/* ==========================================================================
   LAYOUT — top bar, header/nav (đã sửa lỗi tràn ngang di động), footer, toast
   ========================================================================== */

/* ---- top utility bar ---- */
.topbar{
  background:var(--bg-inverse); color:var(--text-inverse);
  font-size:12.5px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; width:100%; }
.topbar-slogan{ display:flex; align-items:center; gap:12px; }
.topbar-pill{
  background:linear-gradient(135deg,#b45309,#f59e0b); color:#fff; padding:2.5px 9px; border-radius:var(--radius-full);
  font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.topbar-text{ color:#cbd5e1; font-size:12.5px; }
.topbar-text em{ font-style:normal; color:#f8fafc; font-weight:500; }
.topbar-domains{ display:flex; gap:16px; font-size:12px; }
.topbar-domains a{ color:#94a3b8; text-decoration:none; transition:color var(--transition-fast); }
.topbar-domains a:hover{ color:#38bdf8; }
@media (max-width:860px){ .topbar-text em, .topbar-domains{ display:none; } }

/* ---- Cyber Grid & Animated Ambient Glow Atmosphere ---- */
#particle-canvas{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.8;
}
:root[data-theme="light"] #particle-canvas{ opacity:0.35; }

/* Futuristic Perspective Cyber Matrix Grid */
.cyber-grid{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 88%);
}
:root[data-theme="light"] .cyber-grid{
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
}

/* Subtle Vertical Cyber Scanline */
.cyber-scanline{
  position:fixed; top:0; left:0; width:100%; height:2px; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, transparent 0%, rgba(56,189,248,.35) 50%, transparent 100%);
  opacity:0.22;
  animation:cyberScan 14s linear infinite;
}
@keyframes cyberScan{
  0% { transform:translateY(-10vh); }
  100% { transform:translateY(110vh); }
}

/* Fluid Organic Ambient Glow Orbs with Keyframe Animations */
.ambient-glow{
  position:fixed; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:0;
  will-change:transform, opacity;
}

@keyframes auroraFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
  33% { transform: translate(70px, 60px) scale(1.15); opacity: 0.52; }
  66% { transform: translate(-50px, 90px) scale(0.92); opacity: 0.35; }
}
@keyframes auroraFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(-90px, -70px) scale(1.22); opacity: 0.44; }
}
@keyframes auroraFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  50% { transform: translate(80px, -80px) scale(1.18); opacity: 0.48; }
}
@keyframes auroraFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.28; }
  50% { transform: translate(-60px, 60px) scale(1.15); opacity: 0.4; }
}

.glow-top-left{
  width:580px; height:580px; top:-160px; left:-160px;
  background:radial-gradient(circle, rgba(37,99,235,0.45), transparent 70%);
  animation: auroraFloat1 18s ease-in-out infinite;
}
.glow-mid-right{
  width:640px; height:640px; top:30%; right:-220px;
  background:radial-gradient(circle, rgba(245,158,11,0.28), rgba(217,119,6,0.12) 40%, transparent 70%);
  animation: auroraFloat2 22s ease-in-out infinite;
}
.glow-bottom-left{
  width:600px; height:600px; bottom:6%; left:-180px;
  background:radial-gradient(circle, rgba(6,182,212,0.35), rgba(16,185,129,0.15) 45%, transparent 70%);
  animation: auroraFloat3 20s ease-in-out infinite;
}
.glow-hero-center{
  width:680px; height:450px; top:15%; left:30%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(56,189,248,0.25), rgba(37,99,235,0.12) 45%, transparent 70%);
  animation: auroraFloat4 16s ease-in-out infinite;
}

:root[data-theme="light"] .ambient-glow{ opacity:0.22; }
:root[data-theme="light"] .glow-top-left{
  background:radial-gradient(circle, rgba(37,99,235,0.25), transparent 70%);
}
:root[data-theme="light"] .glow-mid-right{
  background:radial-gradient(circle, rgba(217,119,6,0.18), transparent 70%);
}
:root[data-theme="light"] .glow-bottom-left{
  background:radial-gradient(circle, rgba(2,132,199,0.2), transparent 70%);
}
:root[data-theme="light"] .glow-hero-center{
  background:radial-gradient(circle, rgba(14,165,233,0.15), transparent 70%);
}

/* ---- nav dropdown dùng <details>/<summary> gốc trình duyệt ---- */
.nav-dropdown{ position:relative; }
.nav-dropdown summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--text-secondary);
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary:hover{ color:var(--brand-blue); background:var(--bg-surface-2); }
.nav-dropdown .chev{ transition:transform var(--transition); }
.nav-dropdown[open] .chev{ transform:rotate(180deg); }

.nav-dropdown .dropdown-panel{
  position:absolute; top:calc(100% + 8px); left:0; min-width:260px; background:var(--bg-elevated);
  border:1px solid var(--border-subtle); border-top:3px solid var(--brand-gold); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:10px; z-index:100; backdrop-filter:blur(16px);
}
.nav-dropdown .dropdown-panel a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:13.8px; font-weight:600; color:var(--text-primary); text-decoration:none;
}
.nav-dropdown .dropdown-panel a small{ font-weight:500; color:var(--text-muted); font-size:12px; }
.nav-dropdown .dropdown-panel a:hover{ background:var(--bg-surface-2); color:var(--brand-blue); }

/* Mega Dropdown Panel (2-column layout) */
.nav-dropdown .dropdown-panel.mega-panel{
  min-width:min(90vw, 560px); padding:14px;
}
.mega-grid-2col{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.mega-item{
  display:flex !important; flex-direction:row !important; align-items:center !important; gap:12px !important;
  padding:10px 12px !important; border-radius:var(--radius-sm) !important; text-decoration:none;
  transition:background var(--transition-fast), transform var(--transition-fast);
  border:1px solid transparent;
}
.mega-item:hover{
  background:var(--bg-surface-2) !important;
  border-color:var(--border-subtle) !important;
  transform:translateX(3px);
}
.mega-icon{
  width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.mega-meta{
  display:flex; flex-direction:column; gap:2px;
}
.mega-meta strong{ font-size:13.5px; color:var(--text-primary); line-height:1.25; }
.mega-meta small{ font-size:11.8px; color:var(--text-muted); line-height:1.3; }
.mega-item:hover .mega-meta strong{ color:var(--brand-blue); }

.mega-item-all{
  grid-column:span 2; background:rgba(255,255,255,.03); border:1px dashed var(--border-subtle) !important;
}

@media (max-width:980px){
  .nav-dropdown .dropdown-panel{ position:static; box-shadow:none; border:none; margin-top:4px; }
  .nav-dropdown .dropdown-panel.mega-panel{ min-width:100%; }
  .mega-grid-2col{ grid-template-columns:1fr; }
  .mega-item-all{ grid-column:span 1; }
}

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
  height:var(--header-h);
}
.site-header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{
  display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none;
  transition:transform var(--transition);
}
.brand:hover{
  transform:translateY(-1px);
}
.brand img{
  height:52px; width:auto; max-width:250px; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(15,44,89,.25));
  transition:filter var(--transition), transform var(--transition);
}
.brand:hover img{
  filter:drop-shadow(0 4px 14px rgba(56,189,248,.45));
}
.brand .logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand .logo-light{ display:none; }
  :root:not([data-theme="light"]) .brand .logo-dark{ display:block; }
}
:root[data-theme="dark"] .brand .logo-light{ display:none; }
:root[data-theme="dark"] .brand .logo-dark{ display:block; }
:root[data-theme="light"] .brand .logo-light{ display:block; }
:root[data-theme="light"] .brand .logo-dark{ display:none; }

@media (max-width:768px){
  .brand img{ height:40px; max-width:180px; }
}

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--text-secondary);
}
.main-nav a:hover, .main-nav a.active{ color:var(--brand-blue); background:var(--bg-surface-2); }

.nav-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-surface-2); color:var(--text-secondary); border:1px solid var(--border-subtle);
}
.icon-btn:hover{ color:var(--brand-blue); }
.icon-btn .icon{ font-size:18px; }

.hamburger-btn{
  display:none; width:38px; height:38px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center; background:var(--bg-surface-2); border:1px solid var(--border-subtle);
  color:var(--text-primary);
}

/* Mobile drawer nav — display:none thật sự, không chỉ dịch vị trí */
.mobile-drawer{
  position:fixed; inset:0; z-index:120; display:none;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer .drawer-backdrop{ position:absolute; inset:0; background:rgba(6,10,20,.55); }
.mobile-drawer .drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--bg-secondary); box-shadow:var(--shadow-lg); padding:20px; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
}
.mobile-drawer .drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mobile-drawer a{
  padding:13px 10px; border-radius:var(--radius-sm); font-weight:600; color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
.mobile-drawer .drawer-cta{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }

@media (max-width:980px){
  .main-nav{ display:none; }
  .nav-actions .icon-btn.search-only, .nav-actions .btn-secondary.login-only{ display:none; }
  .hamburger-btn{ display:inline-flex; }
}

/* ---- horizontal scrollers (thay cho tràn ngang không kiểm soát) ---- */
.hscroll{
  display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:thin;
}
.hscroll::-webkit-scrollbar{ height:6px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.hscroll > *{ flex:0 0 auto; }
.hscroll.wrap-on-desktop{ flex-wrap:nowrap; }
@media (min-width:760px){ .hscroll.wrap-on-desktop{ flex-wrap:wrap; overflow-x:visible; } }

/* ---- hero ---- */
.hero{ position:relative; color:#eef2f9; padding:calc(var(--space-10) + 20px) 0 var(--space-9); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero-overlay{ position:absolute; inset:0; background:var(--grad-hero-overlay); z-index:1; }
.hero .container{ position:relative; z-index:2; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-size:12.5px; letter-spacing:.06em;
  font-weight:600; margin-bottom:20px;
}
.hero h1{ font-size:clamp(34px,5.4vw,58px); color:#fff; max-width:16ch; }
.hero .lede{ font-size:18px; color:#cbd5e6; max-width:56ch; margin-bottom:var(--space-6); }
.hero-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; margin-top:var(--space-8); }
.hero-stats .stat b{ display:block; font-family:var(--font-heading); font-size:28px; color:#fff; }
.hero-stats .stat span{ font-size:12.5px; color:#9fb0c9; }

/* ---- page-hero: banner rút gọn cho các trang con (không ảnh nền) ---- */
.page-hero{ background:var(--bg-inverse); color:#eef2f9; padding:var(--space-9) 0 var(--space-8); }
.page-hero .breadcrumb{ font-size:13px; color:#9fb0c9; margin-bottom:16px; display:flex; gap:8px; align-items:center; }
.page-hero .breadcrumb a{ color:#9fb0c9; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero h1{ font-size:clamp(28px,4.2vw,42px); color:#fff; max-width:26ch; margin-bottom:14px; }
.page-hero .lede{ font-size:16.5px; color:#cbd5e6; max-width:64ch; margin-bottom:0; }
.page-hero .hero-eyebrow{ margin-bottom:18px; }

/* ---- footer ---- */
.site-footer{ background:var(--bg-inverse); color:#c6ceda; padding:var(--space-9) 0 var(--space-6); margin-top:var(--space-9); }
.site-footer a{ color:#c6ceda; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--space-7); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-grid li{ margin-bottom:10px; font-size:14px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:var(--radius-full); background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:var(--space-7); padding-top:var(--space-5);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8b96a8;
}

/* ---- toast ---- */
.toast-stack{ position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  min-width:260px; max-width:360px; background:var(--bg-elevated); color:var(--text-primary);
  border:1px solid var(--border-subtle); border-left:4px solid var(--brand-blue);
  border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow-lg);
  font-size:14px; display:flex; gap:10px; align-items:flex-start;
  animation:toast-in .25s ease;
}
.toast.success{ border-left-color:var(--brand-emerald); }
.toast.error{ border-left-color:var(--brand-red); }
.toast.warning{ border-left-color:var(--brand-amber); }
@keyframes toast-in{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ---- demo/notice banners ---- */
.notice-banner{
  display:flex; gap:12px; align-items:flex-start; padding:14px 18px; border-radius:var(--radius-md);
  background:rgba(200,67,58,.08); border:1px solid rgba(200,67,58,.3); color:var(--text-primary); font-size:14px;
}
.notice-banner.info{ background:rgba(29,78,216,.08); border-color:rgba(29,78,216,.28); }
.notice-banner .icon{ color:var(--brand-red); flex-shrink:0; margin-top:2px; }
.notice-banner.info .icon{ color:var(--brand-blue); }

/* ---- nav dropdown dùng <details>/<summary> gốc trình duyệt: có sẵn khả năng
   truy cập bàn phím, không cần JS ---- */
.nav-dropdown{ position:relative; }
.nav-dropdown summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--text-secondary);
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary:hover{ color:var(--brand-blue); background:var(--bg-surface-2); }
.nav-dropdown .chev{ transition:transform var(--transition); }
.nav-dropdown[open] .chev{ transform:rotate(180deg); }
.nav-dropdown .dropdown-panel{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:var(--bg-elevated);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:8px; z-index:90;
}
.nav-dropdown .dropdown-panel a{
  display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:var(--radius-sm); font-size:13.8px; font-weight:600;
}
.nav-dropdown .dropdown-panel a small{ font-weight:500; color:var(--text-muted); font-size:12px; }
.nav-dropdown .dropdown-panel a:hover{ background:var(--bg-surface-2); color:var(--brand-blue); }
@media (max-width:980px){
  .nav-dropdown .dropdown-panel{ position:static; box-shadow:none; border:none; margin-top:4px; }
}

/* đóng dropdown khác khi một dropdown mở (xử lý bằng JS thêm class .dropdown-active) */

/* skip link for a11y */
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }