/* ============================================================
   HUD-TNUS — skin CHỈ cho TRANG CHỦ (html.th-hud-tnus, chồng lên th-tnus).
   Chủ đạo #1d73ba · kết hợp #ff0000 #ffa800 #0cbddc #c5efff
   Nạp SAU tnus.css → override biến + thêm "chrome" kiểu bảng điều khiển HUD.
   ============================================================ */

html.th-hud-tnus,
html.th-hud-tnus[data-theme],
html.th-hud-tnus[data-mode]{
  --hud-primary:#1d73ba;
  --hud-red:#ff0000;
  --hud-amber:#ffa800;
  --hud-cyan:#0cbddc;
  --hud-ice:#c5efff;
  --hud-navy:#072135;
  --hud-line:rgba(12,189,220,.30);

  /* ghi đè biến nền của th-tnus để toàn trang chủ theo tông HUD */
  --tn-blue:#1d73ba; --tn-blue-dk:#0e4f86; --tn-blue-2:#0cbddc; --tn-blue-3:#4aa8e0;
  --tn-amber:#ffa800; --tn-amber-dk:#e09600; --tn-orange:#ff6b00;
  --tn-navy:#072135; --tn-soft:#e6f6fc; --tn-line:#bfe4f3; --tn-muted:#4c647a;

  --navy:#0e4f86; --star:#1d73ba;
  --red:#ff0000; --gold:#ffa800; --green:#0cbddc;
  --bg:#eaf4fb; --surface:#ffffff; --ink:#082234;
  --muted:#4c647a; --faint:#8fb3cb; --line:#bfe4f3;
  --shadow:0 12px 34px rgba(7,33,53,.12);
  --g-accent:linear-gradient(120deg,#0cbddc,#1d73ba);
  --g-cta:linear-gradient(135deg,#ffa800,#ff7a00);
  --s1:#1d73ba; --s2:#ffa800; --s3:#0cbddc; --s4:#0e4f86;
}

/* ---- Nền lưới kỹ thuật (radar grid) phủ toàn trang ---- */
html.th-hud-tnus body{ background:var(--bg); position:relative; }
html.th-hud-tnus body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(29,115,186,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,115,186,.05) 1px,transparent 1px),
    radial-gradient(circle at 85% -5%,rgba(12,189,220,.10),transparent 45%),
    radial-gradient(circle at 5% 105%,rgba(29,115,186,.10),transparent 45%);
  background-size:42px 42px,42px 42px,100% 100%,100% 100%;
}
html.th-hud-tnus .home-flow,
html.th-hud-tnus .ticker{ position:relative; z-index:1; }
/* nav: GIỮ sticky của base; nền navy ĐẶC (không xuyên qua) + chữ SÁNG dễ đọc */
html.th-hud-tnus nav{
  z-index:90;
  background:#072135 !important;          /* đặc → nội dung không xuyên qua */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:1px solid var(--hud-line);
}
html.th-hud-tnus nav .brand .t b{ color:#fff !important; }
html.th-hud-tnus nav .brand .t span{ color:#bcdcef !important; }
html.th-hud-tnus nav .navham span{ background:#e8f2fb !important; }
html.th-hud-tnus nav a.btn-out{
  color:#e8f2fb !important; border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.05) !important;
}
html.th-hud-tnus nav a.btn-out:hover{
  color:#fff !important; border-color:var(--hud-cyan) !important; background:rgba(12,189,220,.16) !important;
}

/* "Xem thêm / Thu gọn" (.rm-btn) trên các KHỐI TỐI → màu sáng dễ đọc (gốc dùng --star xanh đậm, chìm vào nền) */
html.th-hud-tnus section.alt .rm-btn,
html.th-hud-tnus .cn-sec .rm-btn,
html.th-hud-tnus .hero .rm-btn{ color:#8fd9f0 !important; }
html.th-hud-tnus section.alt .rm-btn:hover,
html.th-hud-tnus .cn-sec .rm-btn:hover,
html.th-hud-tnus .hero .rm-btn:hover{ color:#c5efff !important; }

/* ====================== HERO ====================== */
html.th-hud-tnus .hero{
  background:linear-gradient(125deg,#04131f 0%,#0a2a44 48%,#0e4f86 100%);
  border-radius:0 0 22px 22px; overflow:hidden;
}
/* lưới radar + đường quét chạy */
html.th-hud-tnus .hero::after{
  opacity:1;
  background-image:
    linear-gradient(rgba(12,189,220,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,189,220,.10) 1px,transparent 1px);
  background-size:40px 40px;
}
html.th-hud-tnus .hero::before{
  background:
    radial-gradient(circle at 92% 10%,rgba(255,168,0,.20),transparent 40%),
    radial-gradient(circle at 6% 90%,rgba(12,189,220,.30),transparent 52%);
}
/* khung góc + đường quét HUD trên hero */
html.th-hud-tnus .hero .wrap::before{
  content:""; position:absolute; inset:-6px 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--hud-cyan),transparent);
  animation:hud-scan 5.5s linear infinite; opacity:.7;
}
@keyframes hud-scan{ 0%{transform:translateY(0);opacity:0} 12%{opacity:.8} 88%{opacity:.8} 100%{transform:translateY(360px);opacity:0} }

html.th-hud-tnus .hero .hbadge{
  background:rgba(12,189,220,.12); border:1px solid rgba(12,189,220,.5);
  color:var(--hud-ice); font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  letter-spacing:.04em; border-radius:6px;
}
html.th-hud-tnus .hero .hbadge .d{ background:var(--hud-red); box-shadow:0 0 0 4px rgba(255,0,0,.2),0 0 8px var(--hud-red); }
html.th-hud-tnus .hero h1 .y,
html.th-hud-tnus .hero h1 em{ color:var(--hud-cyan); -webkit-text-fill-color:var(--hud-cyan);
  text-shadow:0 0 18px rgba(12,189,220,.55); }
html.th-hud-tnus .hero .sub{ color:#cfe9f6; }
html.th-hud-tnus .hero .sub b{ color:#fff; }

/* số liệu hero = đồng hồ HUD */
html.th-hud-tnus .stat{
  background:rgba(255,255,255,.04); border:1px solid rgba(12,189,220,.35);
  border-radius:10px; backdrop-filter:blur(3px);
}
html.th-hud-tnus .stat b{
  color:var(--hud-cyan); font-family:ui-monospace,Consolas,monospace;
  text-shadow:0 0 12px rgba(12,189,220,.5);
}

/* ====================== KICKER = nhãn HUD ====================== */
html.th-hud-tnus .kicker{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--hud-primary); background:none; padding:0;
  display:inline-flex; align-items:center; gap:8px;
}
html.th-hud-tnus .kicker::before{ content:"//"; color:var(--hud-cyan); font-weight:800; }
html.th-hud-tnus .kicker::after{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg,var(--hud-cyan),transparent);
}
html.th-hud-tnus .shead h2{ position:relative; }
html.th-hud-tnus .shead h2::after{
  content:""; display:block; width:64px; height:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--hud-primary),var(--hud-cyan));
  box-shadow:0 0 10px rgba(12,189,220,.6);
}

/* ====================== THẺ HUD (card/group/method/ncard) ====================== */
html.th-hud-tnus .card,
html.th-hud-tnus .group,
html.th-hud-tnus .method,
html.th-hud-tnus .ncard,
html.th-hud-tnus .flip-front,
html.th-hud-tnus .sp-card{
  position:relative;
  background:
    linear-gradient(90deg,var(--hud-primary),var(--hud-cyan)) top left/100% 3px no-repeat,
    var(--surface);
  border:1px solid var(--hud-line);
  border-radius:4px 14px 4px 14px;
  box-shadow:0 6px 20px rgba(7,33,53,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* ngoặc góc HUD (corner brackets) */
html.th-hud-tnus .card::after,
html.th-hud-tnus .group::after,
html.th-hud-tnus .method::after,
html.th-hud-tnus .ncard::after{
  content:""; position:absolute; right:8px; bottom:8px; width:12px; height:12px;
  border-right:2px solid var(--hud-cyan); border-bottom:2px solid var(--hud-cyan);
  opacity:.55; pointer-events:none;
}
html.th-hud-tnus .card:hover,
html.th-hud-tnus .method:hover,
html.th-hud-tnus .ncard:hover{
  transform:translateY(-3px);
  border-color:var(--hud-cyan);
  box-shadow:0 12px 30px rgba(7,33,53,.14),0 0 0 1px rgba(12,189,220,.4),0 0 22px rgba(12,189,220,.25);
}

/* tiêu đề nhóm ngành */
html.th-hud-tnus .group-h h3{ letter-spacing:.01em; }
html.th-hud-tnus .group-h .gc{
  font-family:ui-monospace,Consolas,monospace; color:var(--hud-primary);
  border:1px solid var(--hud-line); border-radius:5px; background:var(--hud-ice);
}
html.th-hud-tnus .group-h .dot{ box-shadow:0 0 10px currentColor; }

/* ====================== TAB Đào tạo chuẩn / Định hướng giáo viên ====================== */
html.th-hud-tnus .toggle{ border:1px solid var(--hud-line); background:#fff; border-radius:10px; }
html.th-hud-tnus .toggle button{
  font-family:ui-monospace,Consolas,monospace; letter-spacing:.02em; font-weight:700;
  color:var(--hud-primary); border-radius:8px; background:transparent;
}
html.th-hud-tnus .toggle button.on{
  background:linear-gradient(135deg,var(--hud-primary),#155a91); color:#fff;
  box-shadow:0 0 0 1px rgba(12,189,220,.5),0 6px 16px rgba(29,115,186,.4);
}

/* chip lọc / đợt */
html.th-hud-tnus .dot-tab{
  border:1px solid var(--hud-line); border-radius:999px; font-weight:700;
  color:var(--hud-primary); background:#fff;
}
html.th-hud-tnus .dot-tab.on{
  background:linear-gradient(135deg,var(--hud-cyan),var(--hud-primary)); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(12,189,220,.45);
}
html.th-hud-tnus .nl-chips button.on,
html.th-hud-tnus .nl-tabbar button.on{
  background:linear-gradient(135deg,var(--hud-primary),#155a91)!important; color:#fff!important;
  box-shadow:0 0 16px rgba(12,189,220,.4);
}

/* ====================== NÚT HÀNH ĐỘNG ====================== */
html.th-hud-tnus .btn-go,
html.th-hud-tnus .tn-reg,
html.th-hud-tnus .tvb-btn,
html.th-hud-tnus .tuvan-cta .tvb-btn{
  background:linear-gradient(135deg,var(--hud-amber),#ff7a00); color:#08222f;
  font-weight:800; border:none; border-radius:6px;
  box-shadow:0 6px 18px rgba(255,168,0,.4);
}
html.th-hud-tnus .btn-go:hover,
html.th-hud-tnus .tn-reg:hover,
html.th-hud-tnus .tvb-btn:hover{ filter:brightness(1.05); box-shadow:0 8px 24px rgba(255,168,0,.55); }
html.th-hud-tnus .more{ color:var(--hud-primary); font-weight:700; }   /* link chữ trên nền sáng — giữ xanh */
/* nút "Xem tất cả thông báo" là NÚT TÔ NỀN → chữ TRẮNG (trước đây trùng màu nền xanh) */
html.th-hud-tnus .news-all a{
  background:linear-gradient(120deg,var(--hud-primary),var(--hud-cyan));
  color:#fff !important; font-weight:700;
  border:1px solid var(--hud-line);
  box-shadow:0 8px 22px rgba(29,115,186,.35);
}
html.th-hud-tnus .news-all a:hover{ filter:brightness(1.06); }
html.th-hud-tnus .news-all a svg{ stroke:#fff; }

/* ====================== Chip tính năng trong banner Tư vấn ====================== */
html.th-hud-tnus .tvb-feats{ gap:10px 14px; }
html.th-hud-tnus .tvb-feat{
  background:#eaf4fb; border:1px solid var(--hud-line); border-radius:999px;
  padding:8px 14px 8px 8px; font-weight:700; color:#0e4f86; font-size:13.5px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
html.th-hud-tnus .tvb-feat:hover{
  border-color:var(--hud-cyan); transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(12,189,220,.22);
}
html.th-hud-tnus .tvb-feat .ck{
  width:22px; height:22px;
  background:linear-gradient(135deg,var(--hud-cyan),var(--hud-primary)); color:#fff;
  box-shadow:0 0 0 3px rgba(12,189,220,.16);
}

/* ====================== Ô TÌM KIẾM ====================== */
html.th-hud-tnus .searchbox{
  border:1px solid var(--hud-line); border-radius:10px;
  box-shadow:0 0 0 3px rgba(12,189,220,.08);
}
html.th-hud-tnus .searchbox:focus-within{ border-color:var(--hud-cyan); box-shadow:0 0 0 3px rgba(12,189,220,.22); }

/* ====================== TICKER / mốc thời gian ====================== */
html.th-hud-tnus .ticker{ background:#072135; color:var(--hud-ice); border-bottom:1px solid var(--hud-line); }
html.th-hud-tnus .ticker .label{ background:var(--hud-cyan); color:#072135; font-family:ui-monospace,Consolas,monospace; }
html.th-hud-tnus .ticker .run b{ color:var(--hud-amber); }
html.th-hud-tnus .timeline .tl .node{
  background:var(--hud-cyan); box-shadow:0 0 0 4px rgba(12,189,220,.18),0 0 10px var(--hud-cyan);
}
html.th-hud-tnus .timeline .tl.past .node{ background:var(--hud-faint,#8fb3cb); box-shadow:none; }

/* ====================== PHƯƠNG THỨC ====================== */
html.th-hud-tnus .method .mi{
  color:var(--hud-primary); background:var(--hud-ice);
  border:1px solid var(--hud-line); border-radius:8px;
}

/* ====================== VÌ SAO CHỌN TNUS — "module telemetry" nằm ngang, khác hẳn 4-thẻ-dọc của TNUS ====================== */
html.th-hud-tnus #visao .why{
  counter-reset:hudwhy;
  grid-template-columns:repeat(2,1fr);   /* 2 cột rộng thay vì 4 cột hẹp */
  gap:16px;
}
@media (max-width:720px){ html.th-hud-tnus #visao .why{ grid-template-columns:1fr; } }
html.th-hud-tnus #visao .wcard{
  counter-increment:hudwhy;
  position:relative; overflow:hidden;
  display:grid;
  grid-template-columns:54px 1fr;
  grid-template-areas:"ico title" "ico desc";
  column-gap:16px; row-gap:6px;
  text-align:left;
  padding:20px 20px 20px 22px;
  background:rgba(255,255,255,.055);
  border:1px solid var(--hud-line);
  border-left:3px solid var(--hud-cyan);          /* ray accent HUD bên trái */
  border-radius:4px 14px 14px 4px;
}
/* khung góc HUD góc trên-phải */
html.th-hud-tnus #visao .wcard::before{
  content:""; position:absolute; top:8px; right:8px; width:18px; height:18px;
  border-top:2px solid var(--hud-cyan); border-right:2px solid var(--hud-cyan); opacity:.6;
}
/* số thứ tự 01/02… mờ lớn */
html.th-hud-tnus #visao .wcard::after{
  content:counter(hudwhy,decimal-leading-zero);
  position:absolute; right:14px; bottom:6px;
  font:800 30px/1 ui-monospace,Consolas,monospace;
  color:var(--hud-cyan); opacity:.16; letter-spacing:1px;
}
html.th-hud-tnus #visao .wcard .e{
  grid-area:ico; width:54px; height:54px; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(12,189,220,.22),rgba(29,115,186,.30));
  border:1px solid var(--hud-line); border-radius:12px;
  color:var(--hud-ice);
}
html.th-hud-tnus #visao .wcard .e svg{ width:26px; height:26px; }
html.th-hud-tnus #visao .wcard b{ grid-area:title; align-self:end; margin:0; color:#fff; font-size:16.5px; }
html.th-hud-tnus #visao .wcard .w-desc{ grid-area:desc; color:#cfe6f7; }

/* ====================== CTA cuối trang ====================== */
html.th-hud-tnus .cta{
  background:linear-gradient(125deg,#04131f,#0e4f86);
  border:1px solid rgba(12,189,220,.4); border-radius:16px; position:relative; overflow:hidden;
}
html.th-hud-tnus .cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(12,189,220,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(12,189,220,.08) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ====================== CẢM NHẬN — "luồng phát" HUD: tên+avatar LÊN ĐẦU, ray cyan trái, thẻ đầu nổi bật (khác hẳn lưới-trích-dẫn của TNUS) ====================== */
html.th-hud-tnus .cn-sec .cn-grid{
  grid-template-columns:repeat(2,1fr);   /* lưới 2 cột để thẻ đầu trải rộng */
  align-items:start;
}
@media (max-width:760px){ html.th-hud-tnus .cn-sec .cn-grid{ grid-template-columns:1fr; } }
html.th-hud-tnus .cn-sec .cn-card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hud-line);
  border-left:3px solid var(--hud-cyan);            /* ray "kênh phát" */
  border-radius:4px 14px 14px 4px;
  padding:18px 20px 18px 22px;
}
/* tên + avatar đẩy LÊN ĐẦU thẻ, viền ngăn dưới (TNUS để ở chân) */
html.th-hud-tnus .cn-card figcaption{
  order:-1; margin:0 0 14px; padding:0 0 12px;
  border-top:none; border-bottom:1px solid var(--hud-line);
}
html.th-hud-tnus .cn-card blockquote{ color:#eaf3fb; font-style:normal; margin:0; }
html.th-hud-tnus .cn-who b{ color:#fff; }
html.th-hud-tnus .cn-who small{ color:#c2dcf0; }
html.th-hud-tnus .cn-quote{ display:none; }         /* bỏ dấu ngoặc kép khổng lồ kiểu TNUS */
html.th-hud-tnus .cn-ava{ background:linear-gradient(135deg,var(--hud-amber),#ff7a00); color:#08222f; }
/* thẻ ĐẦU TIÊN nổi bật: trải 2 cột + trích dẫn lớn hơn */
html.th-hud-tnus .cn-sec .cn-card:first-child{
  grid-column:1 / -1;
  background:linear-gradient(120deg,rgba(12,189,220,.12),rgba(29,115,186,.12));
  border-left-width:4px;
}
html.th-hud-tnus .cn-sec .cn-card:first-child blockquote{ font-size:18px; line-height:1.7; }
@media (max-width:760px){ html.th-hud-tnus .cn-sec .cn-card:first-child{ grid-column:auto; } }

/* ====================== MENU TRƯỢT (drawer/tn-dw): nền navy đậm + chữ SÁNG (chống trùng màu) ====================== */
/* ID selector (đặc hiệu cao nhất) — chắc chắn thắng mọi rule nền sáng */
html.th-hud-tnus #drawer,
html.th-hud-tnus #tnDw{ background:#072135 !important; color:#e8f2fb !important; }
html.th-hud-tnus #drawer .drawer-nav,
html.th-hud-tnus #drawer .drawer-nav a{ background:transparent; color:#e8f2fb !important; }
html.th-hud-tnus .drawer,
html.th-hud-tnus .tn-dw{ background:#072135 !important; color:#e8f2fb; }
html.th-hud-tnus .drawer-top,
html.th-hud-tnus .tn-dw-top{ background:#03101c !important; border-bottom:1px solid var(--hud-line); }
html.th-hud-tnus .drawer-top span,
html.th-hud-tnus .tn-dw-top span,
html.th-hud-tnus .drawer-top b,
html.th-hud-tnus .tn-dw-top b{ color:#fff !important; }
html.th-hud-tnus .drawer-nav a,
html.th-hud-tnus .tn-dw-nav a,
html.th-hud-tnus .tn-dw a{ color:#e8f2fb !important; }
html.th-hud-tnus .drawer-nav a:hover,
html.th-hud-tnus .drawer-nav a:active,
html.th-hud-tnus .tn-dw-nav a:hover{ background:rgba(12,189,220,.14) !important; color:#fff !important; }
html.th-hud-tnus .drawer-x,
html.th-hud-tnus .tn-dw-x{ background:rgba(12,189,220,.18) !important; color:#fff !important; }
html.th-hud-tnus .drawer-cta,
html.th-hud-tnus .tn-dw-cta{ background:linear-gradient(135deg,var(--hud-amber),#ff7a00) !important; color:#08222f !important; }

/* emblem HUD nếu có */
html.th-hud-tnus .hud-emblem{ filter:drop-shadow(0 0 10px rgba(12,189,220,.5)); }

/* giảm hiệu ứng nếu người dùng yêu cầu */
@media (prefers-reduced-motion:reduce){
  html.th-hud-tnus .hero .wrap::before{ animation:none; }
}