/* ============================================================
   GIAO DIỆN "HUD" — sci-fi công nghệ trên NỀN SÁNG (viền cyan phát sáng + nhấn cam).
   CHỈ áp TRANG CHỦ (class html.th-hud chỉ gắn ở Index). Chạy bằng BIẾN của home.css.
   Bảng màu: #0ea5e9/#22b8e6 (cyan) · #2f7ff0 (blue) · #f97316 (cam) · nền #eaf2fb · thẻ trắng
   ============================================================ */
html.th-hud{
  --hud-cyan:#0ea5e9; --hud-cyan2:#22b8e6; --hud-blue:#2f7ff0; --hud-orange:#f97316;
  --hud-line:rgba(20,150,220,.32); --hud-glow:rgba(20,150,220,.14);
}
html.th-hud h1,html.th-hud h2,html.th-hud h3{letter-spacing:-.01em}

/* ---- TOKEN trang chủ (đè cả 6 theme xoay + sáng/tối) — NỀN SÁNG ---- */
html.th-hud, html.th-hud[data-theme], html.th-hud[data-mode]{
  --navy:#0f2440; --star:#0ea5e9;
  --red:#ef4470; --gold:#f97316; --green:#0fa968;
  --bg:#eaf2fb; --surface:#ffffff; --ink:#0f2238;
  --muted:#51648a; --faint:#8aa0c4; --line:rgba(20,150,220,.30);
  --nav-bg:rgba(255,255,255,.9);
  --shadow:0 10px 30px rgba(30,90,160,.12);
  --g-accent:linear-gradient(120deg,#22b8e6,#2f7ff0);
  --g-cta:linear-gradient(135deg,#22b8e6,#2f7ff0);
  --s1:#0ea5e9; --s2:#22b8e6; --s3:#2f7ff0; --s4:#f97316;
  --hero-blobs:
    radial-gradient(46% 40% at 88% 4%, rgba(14,165,233,.16), transparent 70%),
    radial-gradient(42% 38% at 6% 16%, rgba(249,115,22,.12), transparent 70%),
    radial-gradient(54% 46% at 52% 104%, rgba(47,127,240,.12), transparent 72%);
  --k-quocte:#0ea5e9; --k-cokhi:#f97316; --k-oto:#ef5a3c; --k-dientu:#22b8e6;
  --k-dien:#0fa968; --k-kinhte:#8b5cf6; --k-cdt:#2f7ff0;
}
html.th-hud body{background:#eaf2fb;color:var(--ink);
  background-image:
    radial-gradient(60% 40% at 85% 0%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(50% 36% at 4% 8%, rgba(249,115,22,.05), transparent 60%);
  background-attachment:fixed}
/* lưới mạch điện rất mờ (nền sáng) */
html.th-hud body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(20,150,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,150,220,.05) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(85% 75% at 50% 25%,#000,transparent 92%);-webkit-mask-image:radial-gradient(85% 75% at 50% 25%,#000,transparent 92%)}
html.th-hud section,html.th-hud .hero,html.th-hud footer{position:relative;z-index:1}
/* nav GIỮ sticky (home.css) — chỉ nâng z-index để nổi trên lưới nền */
html.th-hud nav{z-index:90}

/* NAV — kính trắng, viền cyan phát sáng */
html.th-hud nav{background:var(--nav-bg);border-bottom:1px solid var(--hud-line);box-shadow:0 2px 20px rgba(20,120,200,.12)}
html.th-hud nav .brand b{color:var(--navy)}
html.th-hud nav .brand span{color:var(--hud-cyan)}
html.th-hud nav a.btn-sm{background:var(--g-accent);color:#fff;font-weight:800;border-radius:9px;box-shadow:0 4px 14px rgba(20,150,220,.4)}

/* TICKER — thanh cyan */
html.th-hud .ticker{background:linear-gradient(90deg,#0ea5e9,#2f7ff0);color:#fff}
html.th-hud .ticker .label{background:#0b3b66;color:#bfeaff}
html.th-hud .ticker .run b{color:#ffe0b3}

/* HERO — nền sáng + vầng cyan/cam, tiêu đề gradient cyan */
html.th-hud .hero{background:linear-gradient(160deg,#e9f4fe,#eaf2fb)}
/* NỀN bản đồ trái đất kết nối (đã tách nền) ở PHẦN TRÊN hero, mờ dần xuống dưới */
html.th-hud .hero::before{
  background:url('/img/earth-map.webp') top center/100% auto no-repeat, var(--hero-blobs);
  opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)}
html.th-hud .hbadge{background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.4);color:#0b7bb0}
html.th-hud .hbadge .d{background:var(--hud-cyan);box-shadow:0 0 0 4px rgba(14,165,233,.18)}
html.th-hud .hero h1{color:var(--navy)}
html.th-hud .hero h1 .y,html.th-hud .hero h1 em{background:var(--g-accent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html.th-hud .hero .sub{color:#4a5e80}
html.th-hud .hero .sub b{color:var(--navy)}

/* SEARCH + CHIP */
html.th-hud .searchbox{background:#fff;border:1px solid var(--hud-line);box-shadow:0 0 0 1px var(--hud-glow),0 8px 22px rgba(20,120,200,.14)}
html.th-hud .searchbox button{background:var(--g-accent);color:#fff;font-weight:800;box-shadow:0 4px 14px rgba(20,150,220,.4)}
html.th-hud .chip{background:#fff;border:1px solid var(--hud-line);color:#2b4a6e;box-shadow:0 2px 8px rgba(20,120,200,.08)}
html.th-hud .chip:hover{color:var(--navy);border-color:var(--hud-cyan);transform:translateY(-2px)}
html.th-hud .chip.on{background:var(--g-accent);border-color:transparent;color:#fff}

/* TIÊU ĐỀ MỤC */
html.th-hud h2{color:var(--navy)}
html.th-hud .kicker{color:var(--hud-cyan)}

/* PANEL chung → thẻ trắng + VIỀN CYAN PHÁT SÁNG (HUD) */
html.th-hud .qa-card,html.th-hud .why-card,html.th-hud .guide-step,html.th-hud .advisor-banner,
html.th-hud .news-featured,html.th-hud .news-item,html.th-hud .testi-card,html.th-hud .contact-wrap,
html.th-hud .stat,html.th-hud .card,html.th-hud .ncard,html.th-hud .method,html.th-hud .wcard,
html.th-hud .news-feat,html.th-hud .tuvan-banner,html.th-hud .vid-item{
  background:rgba(255,255,255,.6)!important;backdrop-filter:blur(10px) saturate(1.25);-webkit-backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid var(--hud-line)!important;
  box-shadow:0 0 0 1px var(--hud-glow),0 8px 26px rgba(20,110,200,.16),inset 0 1px 0 rgba(255,255,255,.6)!important}
html.th-hud .qa-card:hover,html.th-hud .why-card:hover,html.th-hud .card:hover,html.th-hud .ncard:hover,html.th-hud .guide-step:hover{border-color:var(--hud-cyan)!important;box-shadow:0 0 0 1px rgba(14,165,233,.35),0 10px 28px rgba(20,150,220,.22)!important}
/* icon-chip → nền cyan mờ, icon cyan */
html.th-hud .qa-icon,html.th-hud .why-icon,html.th-hud .guide-icon-bg,html.th-hud .method .mi{background:rgba(14,165,233,.12)!important;color:var(--hud-cyan)!important}
html.th-hud .qa-card:hover .qa-icon,html.th-hud .why-card:hover .why-icon,html.th-hud .guide-step:hover .guide-icon-bg{background:var(--hud-cyan)!important}
html.th-hud .badge-tt{color:#b45309!important;background:#fff3e0!important;border-color:#fcd9a8!important}

/* DẢI XEN KẼ (phương thức/vì sao/liên hệ/cảm nhận) = DẢI TỐI TECH — xen giữa nền sáng (sáng–tối kết hợp) */
html.th-hud section.alt,html.th-hud .cn-sec{background:linear-gradient(160deg,#0a2342,#0e2c52);color:#dcecff}
html.th-hud section.alt .shead h2,html.th-hud .cn-sec .shead h2{color:#fff}
html.th-hud section.alt .kicker,html.th-hud .cn-sec .kicker{color:#7fdcff}
html.th-hud section.alt .shead p,html.th-hud .cn-sec .shead p{color:#bcd4f2}
/* thẻ bên trong dải tối → kính mờ viền cyan, chữ sáng */
html.th-hud section.alt .method,html.th-hud section.alt .wcard,html.th-hud .cn-sec .cn-card{
  background:rgba(120,190,255,.08)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(120,210,255,.28)!important;box-shadow:0 0 22px rgba(10,40,90,.35),inset 0 1px 0 rgba(180,225,255,.15)!important}
html.th-hud section.alt .method b,html.th-hud section.alt .wcard b,html.th-hud .cn-sec .cn-card blockquote,html.th-hud .cn-sec .cn-who b{color:#fff!important}
html.th-hud section.alt .method p,html.th-hud section.alt .method .m-desc,html.th-hud section.alt .wcard p,html.th-hud section.alt .wcard .w-desc,html.th-hud .cn-sec .cn-who small{color:#eef6ff!important}
html.th-hud section.alt .method .mi{background:rgba(56,189,248,.2)!important;color:#7fdcff!important}
/* icon "Vì sao" = Ô VUÔNG HUD gọn phát sáng (KHÔNG để nền tràn ngang thành vệt) */
html.th-hud section.alt .wcard .e{
  display:flex!important;width:56px;height:56px;align-items:center;justify-content:center;margin:0 auto 12px;
  border-radius:15px;border:1px solid rgba(120,210,255,.45);
  background:linear-gradient(135deg,rgba(56,189,248,.24),rgba(47,127,240,.14))!important;
  box-shadow:0 0 18px rgba(56,189,248,.32),inset 0 0 14px rgba(120,210,255,.14);color:#9fe8ff!important;position:relative}
html.th-hud section.alt .wcard .e svg{width:26px;height:26px}
/* góc ngoặc nhỏ cho ô icon → chất HUD */
html.th-hud section.alt .wcard .e::before,html.th-hud section.alt .wcard .e::after{content:"";position:absolute;width:8px;height:8px;border:1.5px solid var(--hud-cyan);opacity:.8}
html.th-hud section.alt .wcard .e::before{top:4px;left:4px;border-right:0;border-bottom:0}
html.th-hud section.alt .wcard .e::after{bottom:4px;right:4px;border-left:0;border-top:0}
html.th-hud section.alt .tl b{color:#fff} html.th-hud section.alt .tl span{color:#cfe1f7}
html.th-hud section.alt{--red:#ffd36e} html.th-hud section.alt em{color:#ffd36e!important;font-style:normal;font-weight:700}
/* CHỮ TÔ MÀU INLINE (đỏ/cam…) trong dải tối → đổi sang VÀNG SÁNG dễ đọc trên nền navy */
html.th-hud section.alt [style*="color"],html.th-hud section.alt [style*="colour"],
html.th-hud section.alt .method p [style*="color"],html.th-hud section.alt .method b [style*="color"],
html.th-hud section.alt .tl [style*="color"],html.th-hud section.alt b[style]{color:#ffd36e!important}
html.th-hud section.alt .tl em{color:#ffd36e!important;font-style:normal;font-weight:700}
html.th-hud .cn-sec .cn-card{background:rgba(255,255,255,.06)!important}
html.th-hud .cn-sec .cn-quote{color:#7fdcff;opacity:.5}
/* form liên hệ nằm trong dải tối → input tối */
html.th-hud section.alt .lh-form input,html.th-hud section.alt .lh-form textarea,html.th-hud section.alt .lh-form select{background:rgba(255,255,255,.08);border-color:rgba(120,210,255,.3);color:#eaf6ff}
html.th-hud section.alt .lh-form input::placeholder,html.th-hud section.alt .lh-form textarea::placeholder{color:#9fb6da}
html.th-hud section.alt .contacts,html.th-hud section.alt .contacts *{color:#dcecff}

/* khối CTA đăng ký + nút (giữ nổi bật bằng dải cyan) */
html.th-hud .cta{background:linear-gradient(135deg,#0ea5e9,#2f7ff0);box-shadow:0 14px 36px rgba(20,150,220,.32);border:0;border-top:3px solid #fff}
html.th-hud .cta .a1{background:#fff;color:#0b6aa6;font-weight:800}
html.th-hud .cta .a2{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.6);color:#fff}

/* form liên hệ */
html.th-hud .lh-btn{background:var(--g-accent);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(20,150,220,.35)}
html.th-hud .lh-form input:focus,html.th-hud .lh-form textarea:focus{border-color:var(--hud-cyan);box-shadow:0 0 0 3px rgba(14,165,233,.15)}

/* avatar cảm nhận */
html.th-hud .cn-ava{background:var(--g-accent);color:#fff}

/* footer — navy nhẹ (chỉ chân trang) */
html.th-hud footer{background:#0e2747;color:#b9cee8;border-top:2px solid var(--hud-cyan)}
html.th-hud footer .fb{color:#fff}

/* ============================================================
   3D / HOLOGRAM — chiều sâu + chuyển động cho cảm giác HUD thật
   ============================================================ */
/* HERO: lưới SÀN phối cảnh kiểu Tron (nghiêng, chạy về phía người xem) */
html.th-hud .hero{overflow:hidden}
html.th-hud .hero::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:52%;z-index:0;opacity:.55;pointer-events:none;
  background-image:linear-gradient(rgba(14,165,233,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.32) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(64deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:hudFloor 5.5s linear infinite}
@keyframes hudFloor{from{background-position:0 0}to{background-position:0 46px}}
/* 4 GÓC NGOẶC phát sáng nhấp nháy quanh hero */
html.th-hud .hero .wrap{position:relative}
html.th-hud .hero .wrap::before,html.th-hud .hero .wrap::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--hud-cyan);pointer-events:none;filter:drop-shadow(0 0 6px var(--hud-cyan));animation:hudPulse 2.4s ease-in-out infinite}
html.th-hud .hero .wrap::before{top:-8px;left:-8px;border-right:0;border-bottom:0}
html.th-hud .hero .wrap::after{bottom:-8px;right:-8px;border-left:0;border-top:0}
@keyframes hudPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* THẺ HUD: nền 3D (preserve-3d) + tia QUÉT chạy ngang + viền sáng đậm hơn */
html.th-hud .qa-card,html.th-hud .why-card,html.th-hud .guide-step,html.th-hud .stat,html.th-hud .card,
html.th-hud .ncard,html.th-hud .method,html.th-hud .wcard,html.th-hud .testi-card,html.th-hud .tuvan-cta,
html.th-hud .news-feat,html.th-hud .vid-item{
  transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .2s,border-color .2s;will-change:transform;position:relative;overflow:hidden}
/* tia quét hologram chạy ngang khi rê chuột */
html.th-hud .qa-card::after,html.th-hud .why-card::after,html.th-hud .card::after,html.th-hud .stat::after,html.th-hud .ncard::after,html.th-hud .guide-step::after{
  content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(120,225,255,.22),transparent);transform:skewX(-18deg);transition:left .55s ease}
html.th-hud .qa-card:hover::after,html.th-hud .why-card:hover::after,html.th-hud .card:hover::after,html.th-hud .stat:hover::after,html.th-hud .ncard:hover::after,html.th-hud .guide-step:hover::after{left:120%}
/* container có chiều sâu để thẻ nghiêng 3D rõ */
html.th-hud .quick-access .container,html.th-hud .why-grid,html.th-hud .majors-grid,html.th-hud .guide-flow,html.th-hud .news,html.th-hud .tuvan-ctas,html.th-hud #board{perspective:1100px}

/* nhãn mục: gạch chân phát sáng động */
html.th-hud .shead .kicker,html.th-hud .kicker{position:relative}
html.th-hud h2{text-shadow:0 0 18px rgba(14,165,233,.18)}

/* skin cố định → ẩn thanh đổi màu/sáng-tối */
html.th-hud .themebar{display:none!important}
@media(prefers-reduced-motion:reduce){ html.th-hud .hero::after,html.th-hud .hero .wrap::before,html.th-hud .hero .wrap::after{animation:none} }