/* ============================================================ NEARLINK CYBER THEME — nearlink-cyber.css Giao diện Cyberpunk / Neon Dark Thay thế toàn bộ style cũ khi dùng với header.php mới ============================================================ */ /* ===== GOOGLE FONTS ===== */ /* Thêm vào nếu chưa có: */ /* ===== CSS VARIABLES ===== */ :root { --cy-bg: #04060f; --cy-bg2: #070b18; --cy-card: #0c1222; --cy-card2: #0f1628; --cy-line: rgba(56,189,248,.12); --cy-line2: rgba(124,92,255,.14); --cy-text: #e8edf8; --cy-muted: #7a8aaa; --cy-cyan: #22d3ee; --cy-blue: #38bdf8; --cy-purple: #a78bfa; --cy-pink: #f472b6; --cy-orange: #fb923c; --cy-green: #34d399; --cy-red: #f87171; --cy-yellow: #fbbf24; --cy-glow-cyan: rgba(34,211,238,.18); --cy-glow-blue: rgba(56,189,248,.22); --cy-glow-purple:rgba(167,139,250,.18); --cy-rail-w: 74px; --cy-radius: 14px; --cy-radius-lg: 20px; --cy-shadow: 0 20px 60px rgba(0,0,0,.45); } /* ===== RESET ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ===== BASE BODY ===== */ body { font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; background: var(--cy-bg); color: var(--cy-text); line-height: 1.65; overflow-x: hidden; padding-left: var(--cy-rail-w); padding-bottom: 100px; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(56,189,248,.09) 0%, transparent 60%), radial-gradient(ellipse 35% 30% at 92% 50%, rgba(124,92,255,.07) 0%, transparent 50%), radial-gradient(ellipse 25% 35% at 8% 80%, rgba(34,211,238,.05) 0%, transparent 50%); } body > main { position: relative; z-index: 1; padding-top: 16px; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* ===== UTILITY ===== */ .container { width: min(1140px, 94%); margin: auto; } /* ===== VERTICAL RAIL ===== */ .cy-rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--cy-rail-w); background: rgba(5,8,18,.95); border-right: 1px solid var(--cy-line); backdrop-filter: blur(20px) saturate(140%); display: flex; flex-direction: column; align-items: center; padding: 10px 0; z-index: 1100; gap: 3px; } .cy-rail-logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(124,92,255,.20)); border: 1px solid rgba(56,189,248,.30); display: grid; place-items: center; margin-bottom: 10px; position: relative; text-decoration: none; box-shadow: 0 0 22px rgba(56,189,248,.16); transition: all .2s; } .cy-rail-logo:hover { box-shadow: 0 0 32px rgba(56,189,248,.28); transform: scale(1.04); } .cy-rail-logo img { width: 30px; height: 30px; object-fit: contain; } .cy-rail-logo i { font-size: 20px; color: var(--cy-blue); } .cy-rail-logo::after { content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent); } .cy-rail-item { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--cy-muted); text-decoration: none; border: 1px solid transparent; transition: all .18s ease; font-size: 18px; cursor: pointer; background: transparent; } .cy-rail-item:hover { background: rgba(56,189,248,.09); border-color: rgba(56,189,248,.16); color: var(--cy-blue); box-shadow: 0 0 14px rgba(56,189,248,.12); } .cy-rail-item.is-active { background: linear-gradient(135deg, rgba(56,189,248,.17), rgba(124,92,255,.13)); border-color: rgba(56,189,248,.28); color: #fff; box-shadow: 0 0 20px rgba(56,189,248,.18); } .cy-rail-item.is-active::before { content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--cy-cyan), var(--cy-purple)); box-shadow: 0 0 10px var(--cy-cyan); } .cy-rail-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; display: grid; place-items: center; padding: 0 3px; font-weight: 700; line-height: 1; border: 1.5px solid var(--cy-bg); } .cy-rail-tooltip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: rgba(5,8,18,.97); border: 1px solid var(--cy-line); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 9999; backdrop-filter: blur(12px); font-family: 'Oxanium', sans-serif; letter-spacing: .04em; } .cy-rail-item:hover .cy-rail-tooltip { opacity: 1; } .cy-rail-sep { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--cy-line), transparent); margin: 5px 0; } .cy-rail-spacer { flex: 1; } /* ===== TOP HEADER ===== */ .cy-topbar { position: sticky; top: 0; z-index: 1050; background: rgba(4,6,15,.88); backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid var(--cy-line); box-shadow: 0 1px 0 rgba(56,189,248,.05); } .cy-topbar::after { content: ''; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.38), rgba(124,92,255,.32), transparent); } .cy-topbar-inner { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 20px 0 16px; } /* Brand (mobile) */ .cy-topbar-brand { display: none; align-items: center; gap: 10px; text-decoration: none; color: #fff; } .cy-topbar-brand img { width: 32px; height: 32px; object-fit: contain; } .cy-topbar-brand span { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .04em; background: linear-gradient(90deg, var(--cy-blue), var(--cy-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Top nav tabs */ .cy-topbar-nav { display: flex; align-items: center; gap: 3px; flex: 1; } .cy-topnav-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; color: var(--cy-muted); text-decoration: none; font-size: 13px; font-weight: 600; font-family: 'Oxanium', sans-serif; letter-spacing: .03em; border: 1px solid transparent; transition: all .16s ease; white-space: nowrap; position: relative; cursor: pointer; } .cy-topnav-item i { font-size: 14px; } .cy-topnav-item:hover { background: rgba(56,189,248,.07); border-color: rgba(56,189,248,.13); color: var(--cy-blue); } .cy-topnav-item.is-active { background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(124,92,255,.10)); border-color: rgba(56,189,248,.22); color: #fff; } .cy-topnav-item.is-active::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-purple)); box-shadow: 0 0 6px var(--cy-cyan); } .cy-nav-badge-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; border-radius: 999px; background: rgba(239,68,68,.20); border: 1px solid rgba(239,68,68,.32); color: #fca5a5; font-size: 10px; font-weight: 700; padding: 0 4px; font-family: 'Inter', sans-serif; } .cy-topbar-spacer { flex: 1; } /* Search */ .cy-topbar-search { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--cy-line); border-radius: 10px; padding: 0 12px; height: 38px; width: 220px; transition: all .2s ease; } .cy-topbar-search:focus-within { border-color: rgba(56,189,248,.34); background: rgba(56,189,248,.05); box-shadow: 0 0 0 3px rgba(56,189,248,.07); width: 270px; } .cy-topbar-search i { font-size: 14px; color: var(--cy-muted); flex-shrink: 0; } .cy-topbar-search input { background: transparent; border: 0; outline: 0; color: var(--cy-text); font-size: 13px; width: 100%; font-family: 'Inter', sans-serif; } .cy-topbar-search input::placeholder { color: var(--cy-muted); font-size: 13px; } /* Topbar divider */ .cy-topbar-div { width: 1px; height: 24px; background: var(--cy-line); flex-shrink: 0; } /* Action icon buttons */ .cy-topbar-actions { display: flex; align-items: center; gap: 5px; } .cy-topbar-icon { position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--cy-muted); text-decoration: none; border: 1px solid transparent; transition: all .16s ease; font-size: 16px; cursor: pointer; background: transparent; } .cy-topbar-icon:hover { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.15); color: var(--cy-blue); } .cy-topbar-icon.is-active { color: var(--cy-blue); background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.20); } .cy-icon-badge { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; display: grid; place-items: center; padding: 0 3px; font-weight: 700; border: 1.5px solid var(--cy-bg); } /* Avatar */ .cy-topbar-avatar { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(56,189,248,.24); overflow: hidden; cursor: pointer; text-decoration: none; display: grid; place-items: center; background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(124,92,255,.14)); color: var(--cy-blue); font-size: 15px; font-weight: 700; font-family: 'Oxanium', sans-serif; transition: all .16s ease; box-shadow: 0 0 12px rgba(56,189,248,.10); } .cy-topbar-avatar:hover { border-color: rgba(56,189,248,.44); box-shadow: 0 0 20px rgba(56,189,248,.20); } .cy-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Mobile toggle */ .cy-mob-toggle { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cy-line); background: rgba(255,255,255,.04); color: var(--cy-text); cursor: pointer; place-items: center; font-size: 18px; margin-left: auto; } /* ===== MOBILE DRAWER ===== */ .cy-mob-drawer { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 1049; background: rgba(4,6,15,.98); border-bottom: 1px solid var(--cy-line); backdrop-filter: blur(22px); padding: 10px; max-height: calc(100vh - 64px); overflow-y: auto; } .cy-mob-drawer.show { display: block; } .cy-mob-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 11px; color: var(--cy-text); text-decoration: none; font-weight: 600; font-size: 14px; transition: all .14s ease; border: 1px solid transparent; margin-bottom: 3px; } .cy-mob-item:hover { background: rgba(56,189,248,.07); border-color: rgba(56,189,248,.13); color: var(--cy-blue); } .cy-mob-item.is-active { background: rgba(56,189,248,.11); border-color: rgba(56,189,248,.20); color: #fff; } .cy-mob-item-left { display: flex; align-items: center; gap: 10px; } .cy-mob-item i { font-size: 15px; color: var(--cy-cyan); width: 20px; text-align: center; flex-shrink: 0; } .cy-mob-badge { min-width: 20px; height: 20px; border-radius: 999px; background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.28); color: #fca5a5; font-size: 11px; display: grid; place-items: center; padding: 0 5px; font-weight: 700; } /* ===== MEGA MENU OVERLAY ===== */ .cy-mega-backdrop { position: fixed; inset: 0; background: rgba(2,4,12,.72); backdrop-filter: blur(14px); z-index: 9990; opacity: 0; visibility: hidden; transition: .18s ease; } .cy-mega-backdrop.show { opacity: 1; visibility: visible; } .cy-mega-panel { position: fixed; top: 80px; right: 22px; width: min(800px, calc(100vw - 44px)); max-height: calc(100vh - 108px); overflow: hidden; z-index: 9991; border-radius: 22px; background: rgba(6,10,22,.98); border: 1px solid rgba(56,189,248,.16); box-shadow: 0 30px 90px rgba(0,0,0,.60), inset 0 0 0 1px rgba(56,189,248,.05), 0 0 60px rgba(56,189,248,.05); display: none; color: #fff; } .cy-mega-panel.show { display: block; animation: cyMegaIn .18s ease-out; } @keyframes cyMegaIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .cy-mega-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid rgba(56,189,248,.09); } .cy-mega-title { font-family: 'Oxanium', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .05em; background: linear-gradient(90deg, var(--cy-blue), var(--cy-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cy-mega-close { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--cy-muted); display: grid; place-items: center; cursor: pointer; font-size: 16px; transition: all .15s; } .cy-mega-close:hover { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.22); } .cy-mega-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; padding: 14px; max-height: calc(100vh - 166px); overflow-y: auto; } .cy-mega-card { background: rgba(10,16,30,.65); border: 1px solid rgba(56,189,248,.09); border-radius: 16px; padding: 14px; } .cy-mega-card-title { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-family: 'Oxanium', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--cy-cyan); } .cy-mega-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; color: #fff; border: 1px solid transparent; transition: all .14s ease; margin-bottom: 5px; } .cy-mega-item:last-child { margin-bottom: 0; } .cy-mega-item:hover, .cy-mega-item.is-active { background: rgba(56,189,248,.07); border-color: rgba(56,189,248,.13); transform: translateX(3px); } .cy-mega-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(124,92,255,.10)); border: 1px solid rgba(56,189,248,.15); color: var(--cy-cyan); font-size: 18px; flex: 0 0 auto; } .cy-mega-item b { display: block; font-size: 14px; font-weight: 700; color: #fff; } .cy-mega-item small { display: block; font-size: 11px; color: var(--cy-muted); margin-top: 2px; line-height: 1.3; } .cy-mega-quick-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(56,189,248,.07); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; margin-bottom: 5px; transition: all .14s; font-family: 'Oxanium', sans-serif; letter-spacing: .02em; } .cy-mega-quick-item:last-child { margin-bottom: 0; } .cy-mega-quick-item:hover, .cy-mega-quick-item.is-active { background: rgba(56,189,248,.09); border-color: rgba(56,189,248,.18); color: var(--cy-blue); } .cy-mega-quick-item i { width: 32px; height: 32px; border-radius: 9px; background: rgba(56,189,248,.11); display: grid; place-items: center; font-size: 14px; color: var(--cy-cyan); flex-shrink: 0; } /* ===== HERO SECTION ===== */ .hero, .page-hero { padding: 60px 0 42px; border-bottom: 1px solid var(--cy-line); position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .eyebrow { display: inline-flex; font-family: 'Oxanium', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cy-cyan); background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.22); border-radius: 999px; padding: 5px 12px; margin-bottom: 20px; } h1, .hero-title { font-family: 'Oxanium', sans-serif; font-size: clamp(38px, 5.5vw, 72px); line-height: 1.0; letter-spacing: -.02em; color: #fff; font-weight: 800; margin-bottom: 20px; } h1 span, .hero-title span { background: linear-gradient(90deg, var(--cy-blue), var(--cy-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lead { color: var(--cy-muted); font-size: 17px; max-width: 560px; line-height: 1.7; } .mockup, .hero-card { min-height: 420px; border-radius: 24px; padding: 28px; background: var(--cy-card); border: 1px solid var(--cy-line); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--cy-shadow); position: relative; overflow: hidden; } .mockup::before, .hero-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,189,248,.07), rgba(124,92,255,.05)); pointer-events: none; } .mockup h3, .hero-card h3 { font-family: 'Oxanium', sans-serif; font-size: 28px; color: #fff; font-weight: 800; } .mockup p, .hero-card p { color: var(--cy-muted); font-size: 15px; margin-top: 8px; } /* ===== BUTTONS ===== */ .btn, .btn-tto, button[type=submit], .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; border: 1px solid rgba(56,189,248,.28); background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(124,92,255,.14)); color: #fff; font-weight: 700; cursor: pointer; transition: all .2s; font-family: 'Oxanium', sans-serif; letter-spacing: .03em; font-size: 14px; box-shadow: 0 4px 20px rgba(56,189,248,.12); } .btn:hover, .btn-tto:hover, button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(56,189,248,.22); border-color: rgba(56,189,248,.44); background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(124,92,255,.20)); } .btn-outline, .btn-outline-tto { background: rgba(255,255,255,.04); border: 1px solid var(--cy-line); color: var(--cy-text); box-shadow: none; } .btn-outline:hover, .btn-outline-tto:hover { background: rgba(56,189,248,.07); border-color: rgba(56,189,248,.20); color: #fff; } /* ===== SECTIONS ===== */ .section { padding: 70px 0; } /* ===== CARDS ===== */ .card, .box, .panel { background: var(--cy-card); border: 1px solid var(--cy-line); border-radius: var(--cy-radius-lg); padding: 24px; color: var(--cy-text); transition: all .18s; position: relative; overflow: hidden; } .card::before, .box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.20), transparent); } .card:hover, .box:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.20); box-shadow: 0 14px 40px rgba(0,0,0,.28); } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; } h2 { font-family: 'Oxanium', sans-serif; font-size: clamp(26px, 3.5vw, 48px); line-height: 1.1; color: #fff; font-weight: 800; margin-bottom: 16px; letter-spacing: -.01em; } h3 { color: #fff; font-weight: 700; margin-bottom: 8px; } .muted, p { color: var(--cy-muted); } .stat-card strong { display: block; font-family: 'Oxanium', sans-serif; color: #fff; font-size: 34px; line-height: 1; font-weight: 800; margin-bottom: 8px; background: linear-gradient(90deg, var(--cy-blue), var(--cy-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-card span { color: var(--cy-muted); font-size: 13px; font-weight: 600; } .icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.18); color: var(--cy-cyan); font-size: 20px; margin-bottom: 16px; } /* ===== FORMS ===== */ input, textarea, select { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--cy-line); background: rgba(255,255,255,.04); color: var(--cy-text); outline: none; margin-bottom: 12px; font-family: 'Inter', sans-serif; font-size: 14px; transition: all .18s; } input:focus, textarea:focus, select:focus { border-color: rgba(56,189,248,.34); background: rgba(56,189,248,.05); box-shadow: 0 0 0 3px rgba(56,189,248,.07); } input::placeholder, textarea::placeholder { color: var(--cy-muted); } textarea { min-height: 130px; resize: vertical; } /* ===== TABLES ===== */ .table-wrap { background: var(--cy-card); border: 1px solid var(--cy-line); border-radius: 18px; overflow: auto; box-shadow: var(--cy-shadow); } table, .table { width: 100%; border-collapse: collapse; min-width: 720px; } th, .table th { background: rgba(56,189,248,.07); color: var(--cy-cyan); padding: 14px 16px; font-size: 12px; text-align: left; white-space: nowrap; font-family: 'Oxanium', sans-serif; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } td, .table td { padding: 14px 16px; border-top: 1px solid rgba(56,189,248,.07); color: var(--cy-text); font-size: 14px; } /* ===== STATUS BADGES ===== */ .status, .status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; font-family: 'Oxanium', sans-serif; letter-spacing: .04em; } .status.pending { background: rgba(251,191,36,.14); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); } .status.approved, .status.published { background: rgba(52,211,153,.14); color: #34d399; border: 1px solid rgba(52,211,153,.22); } .status.rejected { background: rgba(248,113,113,.14); color: #f87171; border: 1px solid rgba(248,113,113,.22); } .status.draft { background: rgba(56,189,248,.14); color: #38bdf8; border: 1px solid rgba(56,189,248,.22); } /* ===== VERIFY & PREMIUM BADGES ===== */ .tto-verify-badge { display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; min-width: 18px !important; border-radius: 50% !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; vertical-align: middle !important; margin-left: 5px !important; } .tto-verify-super { background: linear-gradient(135deg,#dc2626,#7f1d1d) !important; } .tto-verify-admin { background: linear-gradient(135deg,#fb7185,#be123c) !important; } .tto-verify-moderator { background: linear-gradient(135deg,#f59e0b,#b45309) !important; } .tto-verify-director { background: linear-gradient(135deg,#a855f7,#6d28d9) !important; } .tto-verify-head { background: linear-gradient(135deg,#6366f1,#4338ca) !important; } .tto-verify-manager { background: linear-gradient(135deg,#0ea5e9,#0369a1) !important; } .tto-verify-supervisor { background: linear-gradient(135deg,#06b6d4,#0e7490) !important; } .tto-verify-employee { background: linear-gradient(135deg,#22c55e,#15803d) !important; } .tto-verify-intern { background: linear-gradient(135deg,#94a3b8,#475569) !important; } .nl-premium-badge { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin-left: 5px !important; padding: 3px 7px !important; border-radius: 999px !important; background: rgba(56,189,248,.14) !important; border: 1px solid rgba(56,189,248,.24) !important; color: #7dd3fc !important; font-size: 12px !important; font-weight: 700 !important; } .nl-premium-plus { background: rgba(250,204,21,.14) !important; border-color: rgba(250,204,21,.24) !important; color: #fde68a !important; } .nl-premium-pro { background: rgba(56,189,248,.14) !important; border-color: rgba(56,189,248,.24) !important; color: #bae6fd !important; } .nl-premium-vip { background: rgba(251,191,36,.16) !important; border-color: rgba(251,191,36,.28) !important; color: #fcd34d !important; } /* ===== AVATAR ===== */ .friend-avatar, .near-avatar, .feed-avatar, .profile-avatar, .chat-avatar, .conv-avatar, .mini-avatar { overflow: visible !important; box-sizing: border-box !important; } .online-dot { right: 0 !important; bottom: 0 !important; transform: translate(12%, 12%) !important; z-index: 5 !important; box-sizing: border-box !important; } /* ===== FOOTER ===== */ footer, .footer, .site-footer { background: rgba(4,6,15,.98) !important; border-top: 1px solid var(--cy-line) !important; padding: 56px 0 100px !important; color: var(--cy-muted) !important; position: relative; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } .site-footer h4 { font-family: 'Oxanium', sans-serif; font-weight: 700; color: #fff; margin-bottom: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .footer-links { display: grid; gap: 9px; } .footer-links a { color: var(--cy-muted); font-size: 14px; transition: color .15s; } .footer-links a:hover { color: var(--cy-blue); } .copyright { color: var(--cy-muted); text-align: center; padding-top: 24px; font-size: 13px; } /* ===== BOTTOM MOBILE NAV ===== */ .mobile-menu, .bottom-menu { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; height: 76px; background: rgba(4,6,15,.97); backdrop-filter: blur(20px); border-top: 1px solid var(--cy-line); padding: 6px 8px 8px; } .mobile-menu a, .bottom-menu a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--cy-muted) !important; font-size: 11px; font-weight: 700; border-radius: 12px; transition: all .15s; font-family: 'Oxanium', sans-serif; letter-spacing: .03em; } .mobile-menu i, .bottom-menu i { font-size: 20px; } .mobile-menu a.active, .bottom-menu a.active, .mobile-menu a:hover, .bottom-menu a:hover { color: var(--cy-cyan) !important; background: rgba(56,189,248,.08); } /* ===== NEAR-DESKTOP-RAIL (ẩn cái cũ) ===== */ .near-desktop-rail { display: none !important; } .near-menu-backdrop { display: none !important; } .near-menu-panel { display: none !important; } /* ===== RESPONSIVE ===== */ @media (max-width: 1023px) { body { padding-left: 0; } .cy-rail { display: none; } .cy-topbar-brand { display: flex; } .cy-topbar-nav { display: none; } .cy-topbar-search { display: none; } .cy-mob-toggle { display: grid; } .cy-topbar-spacer { display: none; } .cy-topbar-div { display: none; } .cy-mega-panel { top: 72px; right: 10px; left: 10px; width: auto; } .cy-mega-body { grid-template-columns: 1fr; } .hero-grid, .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .mobile-menu, .bottom-menu { display: flex; } } @media (max-width: 760px) { .container { width: 92%; } .hero, .page-hero { padding: 38px 0 24px; } h1, .hero-title { font-size: 38px; } .grid-4, .grid-3 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .table-wrap { display: none; } } @media (max-width: 640px) { .cy-topbar-actions .cy-topbar-icon:not(.cy-keep) { display: none; } }