/* HVSC — Giao diện Sáng / Tối (11/10/2026). Nạp cuối cùng (priority 999) bởi inc/theme.php.
 * html[data-theme="dark"]  = màu tối hiện có của site (nền #0F1012…, giữ nguyên).
 * html[data-theme="light"] = sáng, tươi: nền ngà #FBF9F5, thẻ trắng, bóng ấm nhẹ; chữ/viền đạt AA (xem build/review/theme.md).
 * Mảng nào cũng dùng CÙNG tên token; CSS từng mảng (pillar-*.css) đợt 2 chỉ việc đọc token này. */

/* ============ 1. TOKEN ============ */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1012; --bg-soft: #141519; --surface: #17181C; --surface-2: #1E2026;
  --ink: #F3F1EC; --ink-2: #DAD8D2; --muted: #B9B7B2; --muted-2: #A09E9A;
  --line: #2A2C32; --line-2: #3A3D45; --line-ui: #767A86;
  --on-ink: #0F1012;
  --brand-ink: #FF6B70; --brand-50: rgba(227,30,36,.14);
  --air-ink: #FF9A5C; --tech-ink: #A7ABFF; --mkt-ink: #FF7DB6; --csr-ink: #5EDB9C;
  --air-soft: rgba(242,106,33,.12); --tech-soft: rgba(109,114,246,.14); --mkt-soft: rgba(226,51,127,.13); --csr-soft: rgba(31,164,99,.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-3: 0 4px 10px rgba(0,0,0,.35), 0 30px 70px -20px rgba(0,0,0,.7);
  --focus: 0 0 0 3px #0F1012, 0 0 0 5px #FF6B70;
  /* header / footer */
  --hd-bg: rgba(15,16,18,.9); --veil: rgba(255,255,255,.08);
  --est-c: #E7E5E0; --tag-c: #E8C98E;
  --ftr-bg: #0A0B0D; --ftr-fg: #C9C7C2; --ftr-strong: #FFFFFF; --ftr-link: #F3F1EC; --ftr-line: rgba(255,255,255,.12); --ftr-line2: rgba(255,255,255,.3); --ftr-mute: #9B9A96; --ftr-tag: #E8C98E;
  --over-fg: #FFFFFF; --over-fg-2: #CBD5E1; --over-hover: rgba(255,255,255,.12); --over-line: rgba(255,255,255,.3); --over-line2: rgba(255,255,255,.5); --over-ph: #FFFFFF; --over-tag: #E8C98E;
  --stage-flip: none; /* bộ lọc đảo cho canvas cảnh tối (trang chủ) */
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FBF9F5; --bg-soft: #F2EFE9; --surface: #FFFFFF; --surface-2: #F6F3EC;
  --ink: #1A1A1E; --ink-2: #353842; --muted: #565A65; --muted-2: #62666F;
  --line: #E5E0D8; --line-2: #D6D0C4; --line-ui: #8A8579;
  --on-ink: #FFFFFF;
  --brand-ink: #C5161B; --brand-50: #FFF0EF;
  --air-ink: #B84200; --tech-ink: #4338CA; --mkt-ink: #B0175E; --csr-ink: #137A47;
  --air-soft: #FFF3EB; --tech-soft: #EEF0FE; --mkt-soft: #FDF0F6; --csr-soft: #EDF8F2;
  --shadow-1: 0 1px 2px rgba(28,25,23,.05), 0 2px 8px rgba(28,25,23,.04);
  --shadow-2: 0 2px 4px rgba(28,25,23,.04), 0 12px 32px -8px rgba(28,25,23,.12);
  --shadow-3: 0 4px 10px rgba(28,25,23,.05), 0 30px 70px -20px rgba(28,25,23,.22);
  --focus: 0 0 0 3px #FBF9F5, 0 0 0 5px #C5161B;
  --hd-bg: rgba(251,249,245,.9); --veil: rgba(28,25,23,.06);
  --est-c: #3B3F4A; --tag-c: #85580A;
  --ftr-bg: #EFEAE1; --ftr-fg: #4A4D56; --ftr-strong: #1A1A1E; --ftr-link: #2B2D33; --ftr-line: rgba(28,25,23,.14); --ftr-line2: rgba(28,25,23,.3); --ftr-mute: #5B5F6A; --ftr-tag: #7E5204;
  --over-fg: #1A1A1E; --over-fg-2: #565A65; --over-hover: rgba(28,25,23,.06); --over-line: #D6D0C4; --over-line2: #C5161B; --over-ph: #C5161B; --over-tag: #85580A;
  --stage-flip: invert(1) hue-rotate(180deg);
}
html[data-theme] body.hv-site { background: var(--bg); color: var(--ink); }

/* ============ 2. KHUNG CHUNG: header, mega, drawer, footer, dock ============ */
html[data-theme] .site-header { color: var(--ink); }
html[data-theme] .site-header--over:not(.is-solid) { color: var(--over-fg); }
html[data-theme] .site-header__bar { background: var(--hd-bg); border-bottom-color: var(--line); }
html[data-theme] .site-header--over:not(.is-solid) .site-header__bar { background: transparent; border-bottom-color: transparent; }
html[data-theme] .mega { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
html[data-theme="dark"] .mega { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
html[data-theme] .mega__kicker { color: var(--accent-ink, var(--brand-ink)); }
html[data-theme] .drawer__panel { background: var(--surface); color: var(--ink); }
html[data-theme] .drawer__backdrop { background: rgba(15,16,18,.55); }
html[data-theme] .drawer__plain, html[data-theme] .drawer__toggle { color: var(--ink); }
/* logo: tối = bản trắng, sáng = bản đỏ (header trong suốt trên trang chủ cũng theo chế độ) */
html[data-theme="dark"] .brand__img--light { opacity: 1 !important; }
html[data-theme="dark"] .brand__img--dark { opacity: 0 !important; }
html[data-theme="light"] .brand__img--light { opacity: 0 !important; }
html[data-theme="light"] .brand__img--dark { opacity: 1 !important; }
html[data-theme="dark"] .hvl--drawer .brand__img--light, html[data-theme="dark"] .hvl--footer .brand__img--light { display: block; position: static; }
html[data-theme="dark"] .hvl--drawer .brand__img--dark, html[data-theme="dark"] .hvl--footer .brand__img--dark { display: none; }
html[data-theme="light"] .hvl--drawer .brand__img--light, html[data-theme="light"] .hvl--footer .brand__img--light { display: none; }
html[data-theme="light"] .hvl--drawer .brand__img--dark, html[data-theme="light"] .hvl--footer .brand__img--dark { display: block; position: static; }
html[data-theme] .hvl--drawer .hvl__est { color: var(--est-c); }
html[data-theme] .hvl--drawer .hvl__tag { color: var(--tag-c); }
/* nút gọi / nút đặt vé */
html[data-theme] .site-header .hbtn--call { border-color: var(--line-2); }
html[data-theme] .site-header--over:not(.is-solid) .hbtn--call { border-color: var(--over-line); }
html[data-theme] .btn--ghost-dark { --b-bg: var(--surface); --b-fg: var(--ink); border-color: var(--line-2); }
/* footer */
html[data-theme] .site-footer { border-top: 1px solid var(--ftr-line); }
html[data-theme] .site-footer__contact .ph { color: var(--brand-ink); }
html[data-theme] .site-footer__tag { color: var(--ftr-fg); }
html[data-theme] .site-footer__links a, html[data-theme] .site-footer__links span { color: var(--ftr-fg); }
html[data-theme="light"] .site-footer__links span { color: var(--ftr-mute); }
html[data-theme="light"] .site-footer a:hover { color: var(--brand-ink); }
html[data-theme="light"] .badge-bct img, html[data-theme="light"] .badge-dmca img { background: transparent; }
/* dock di động */
html[data-theme="light"] .dock { background: var(--surface); border-top-color: var(--line); box-shadow: 0 -6px 20px -12px rgba(28,25,23,.25); }
html[data-theme="light"] .dock__item { color: var(--ink-2); }
html[data-theme="light"] .dock__item.is-active { color: var(--brand-ink); }
html[data-theme="dark"] .dock { background: #0A0B0D; border-top-color: var(--line); }
html[data-theme="light"] .toast code { color: #FFB4B6; }
html[data-theme="dark"] .toast { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
html[data-theme="dark"] .toast a { color: var(--ink); }
html[data-theme="dark"] .toast code { color: #FF9A9E; }
html[data-theme] .skip-link { background: var(--ink); color: var(--on-ink); }

/* ============ 3. NÚT CHUYỂN GIAO DIỆN ============ */
.hvt-btn { position: relative; cursor: pointer; color: inherit; background: transparent; border: 0; flex: none; }
.hvt-btn .hvt-ico { width: 22px; height: 22px; display: block; }
.hvt-btn .hvt-ico--moon, .hvt-btn .hvt-ico--sun { display: none; }
/* đang tối → hiện mặt trời (bấm để sáng); đang sáng → hiện mặt trăng */
html[data-theme="dark"] .hvt-btn .hvt-ico--sun { display: block; }
html[data-theme="light"] .hvt-btn .hvt-ico--moon { display: block; }
html[data-theme] .site-header .hvt-btn { border: 1px solid var(--line-2); }
html[data-theme] .site-header--over:not(.is-solid) .hvt-btn { border-color: var(--over-line); }
html[data-theme] .site-header .hvt-btn:hover { background: var(--veil); }
html[data-theme] .site-header--over:not(.is-solid) .hvt-btn:hover { background: var(--over-hover); }
.hvt-btn:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.drawer__theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 4px; }
.drawer__theme-k { font-weight: 700; font-size: 15px; color: var(--muted); }
.hvt-btn--row { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2) !important; background: var(--surface); color: var(--ink); font: 700 15px var(--font); }
.hvt-btn--row .hvt-txt { display: none; }
html[data-theme="dark"] .hvt-btn--row .hvt-txt--to-light { display: inline; }
html[data-theme="light"] .hvt-btn--row .hvt-txt--to-dark { display: inline; }
@media (max-width: 759px) {
  .site-header .hvt-btn.hbtn--icon { width: 36px; height: 36px; border-radius: 10px; }
  .site-header .hvt-btn .hvt-ico { width: 20px; height: 20px; }
  .site-header .header-actions { gap: 4px; }
}

/* ============ 4. TRANG CHUNG (hv-page) ============ */
html[data-theme] .hv-hero--brand { background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }
html[data-theme="dark"] .hv-hero--csr { background: var(--surface-2); }
html[data-theme] .hv-post-hero { background: linear-gradient(180deg, var(--acc-soft), var(--bg) 85%); }
html[data-theme] .hv-ok { background: var(--csr-soft); border-color: color-mix(in srgb, var(--csr) 40%, transparent); }
html[data-theme] .hv-crumbs, html[data-theme] .hv-note { color: var(--muted); }
html[data-theme] .hv-hero--brand .hv-hero__lead, html[data-theme] .hv-hero--plain .hv-hero__lead { color: var(--ink-2); }
html[data-theme] .hv-card, html[data-theme] .hv-ncard { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .hv-card:hover, html[data-theme="dark"] .hv-ncard:hover { border-color: var(--line-2); }
html[data-theme] .hv-chips a, html[data-theme] .hv-cats a { background: var(--surface); border-color: var(--line-2); color: var(--ink-2) !important; }
html[data-theme] .hv-cats a[aria-current], html[data-theme] .hv-cats a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink) !important; }
html[data-theme] .hv-form input[type=text], html[data-theme] .hv-form input[type=tel], html[data-theme] .hv-form input[type=email], html[data-theme] .hv-form select, html[data-theme] .hv-form textarea { background: var(--surface); color: var(--ink); border-color: var(--line-ui); }
html[data-theme] .hv-form input:focus, html[data-theme] .hv-form select:focus, html[data-theme] .hv-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent); }
html[data-theme] .hv-form ::placeholder { color: var(--muted-2); opacity: 1; }
html[data-theme] .hv-help { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
html[data-theme] .hv-help b, html[data-theme] .hv-help a.hv-help__tel { color: var(--ink); }
html[data-theme="light"] .hv-help { background: var(--night); color: var(--on-night-2); border-color: transparent; }
html[data-theme="light"] .hv-help b, html[data-theme="light"] .hv-help a.hv-help__tel { color: #fff; }
html[data-theme] .hv-prose ol > li::before { background: var(--acc-ink); color: var(--on-ink); }
html[data-theme="dark"] .hv-pager a, html[data-theme="dark"] .hv-pager span { border-color: var(--line-2); }
html[data-theme] .gt-badge { background: var(--surface); color: var(--ink); }
html[data-theme] .gt-era { color: var(--muted-2); }
html[data-theme] .gt-cards span { color: var(--ink-2); }
html[data-theme="dark"] .hv-prose img, html[data-theme="dark"] .hv-hero__media img { filter: brightness(.94); }
html[data-theme] .wp-block-image figcaption, html[data-theme] figcaption { color: var(--muted); }
html[data-theme] .vfb-rep { background: var(--surface) !important; }

/* hard-code đỏ #E31E24 (Giới thiệu: dòng thời gian, thẻ, huy hiệu) → đỏ chữ theo chế độ */
html[data-theme] .gt-time__y, html[data-theme] .gt-ico, html[data-theme] .gt-cards i { color: var(--brand-ink); }
html[data-theme] .gt-badge:hover, html[data-theme] .hv-prose a.gt-badge:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
html[data-theme] .gt-cards > li > a:hover { border-color: var(--brand-ink); }

html[data-theme] .hv-p-brand, html[data-theme] .hv-p-home { --acc-ink: var(--brand-ink); --acc-hi: var(--brand-ink); }
/* công tắc tối/sáng cũ của fork veduhoc (menu "Thêm") — đã thay bằng nút ở header */
html[data-theme] .vdh-thm-t, html[data-theme] .vdk-thm { display: none !important; }

/* ============ 5. TRANG CHỦ ============ */
/* 5a. Sáng: đổi bảng màu "cảnh tối" của hero/bento, canvas được đảo sáng bằng bộ lọc */
html[data-theme="light"] {
  --hx-navy: #FBF6EC; --hx-navy-2: #F6EFE1; --hx-navy-3: #EDE3CE;
  --hx-gold: #85580A; --hx-gold-2: #7A5206; --hx-line: rgba(133,88,10,.3);
}
html[data-theme="light"] [data-group="air"] { --g-hi: var(--air-ink); --g-rgb: 242, 106, 33; }
html[data-theme="light"] [data-group="tech"] { --g-hi: var(--tech-ink); --g-rgb: 109, 114, 246; }
html[data-theme="light"] [data-group="mkt"] { --g-hi: var(--mkt-ink); --g-rgb: 226, 51, 127; }
html[data-theme="light"] [data-group="csr"] { --g-hi: var(--csr-ink); --g-rgb: 31, 164, 99; }
html[data-theme="light"] .hx__canvas, html[data-theme="light"] .pz__fx, html[data-theme="light"] .pz__links, html[data-theme="light"] .hx__fx { filter: var(--stage-flip); }
html[data-theme="light"] .hx { color: var(--ink); }
html[data-theme="light"] .hx__sky { background:
  radial-gradient(900px 520px at 78% 30%, rgba(227,30,36,.09), transparent 62%),
  radial-gradient(700px 480px at 12% 0%, rgba(109,114,246,.11), transparent 60%),
  radial-gradient(1200px 600px at 50% 120%, rgba(232,160,60,.16), transparent 60%),
  linear-gradient(180deg, #FBF6EC 0%, #F6EFE1 70%, #FBF6EC 100%); }
html[data-theme="light"] .hx__sky::before { background-image: linear-gradient(rgba(28,25,23,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28,25,23,.05) 1px, transparent 1px); }
html[data-theme="light"] .hx__sky::after { background: linear-gradient(to bottom, transparent, var(--bg)); }
html[data-theme="light"] .hx__eyebrow { background: rgba(255,255,255,.7); color: var(--hx-gold-2); }
html[data-theme="light"] .hx__display { color: var(--ink); }
html[data-theme="light"] .hx__display em { background-image: linear-gradient(100deg, #D0161C 0%, #E31E24 38%, #C2570C 78%, #85580A 100%); }
html[data-theme="light"] .hx__h1 { color: var(--ink-2); }
html[data-theme="light"] .hx__trust { color: var(--muted); }
html[data-theme="light"] .hx__trust i { color: var(--hx-gold); }
html[data-theme="light"] .hx__doors-k { color: var(--muted); }
html[data-theme="light"] .hx__logo { content: url("../img/logo-hvsc-do-est2016.png"); filter: drop-shadow(0 10px 24px rgba(227,30,36,.16)); }
html[data-theme="light"] .hx__ring { border-color: rgba(133,88,10,.18); }
html[data-theme="light"] .hx__ring--2 { border-color: rgba(133,88,10,.12); }
html[data-theme="light"] .hx__ring--3 { border-color: rgba(28,25,23,.06); }
html[data-theme="light"] .hx__port a { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-1); }
html[data-theme="light"] .hx__port a:is(:hover, :focus-visible), html[data-theme="light"] .hx__port.is-active a { background-color: var(--surface); border-color: rgba(var(--g-rgb), .6); box-shadow: 0 18px 40px -20px rgba(var(--g-rgb), .45); }
html[data-theme="light"] .hx__t { color: var(--muted); }
html[data-theme="light"] .hx__go { color: var(--muted-2); }
/* bento bốn mảng */
html[data-theme="light"] .pz { color: var(--ink); background: radial-gradient(900px 500px at 85% 0%, rgba(227,30,36,.07), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(232,160,60,.12), transparent 60%), linear-gradient(180deg, #F4ECDC, #EFE5D2); }
html[data-theme="light"] .pz::before { background-image: radial-gradient(rgba(28,25,23,.09) 1px, transparent 1.2px); }
html[data-theme="light"] .pz__head .lead { color: var(--ink-2); }
html[data-theme="light"] .pz__tile { background: radial-gradient(600px 300px at 70% 0%, rgba(var(--g-rgb), .10), transparent 70%), var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
html[data-theme="light"] .pz__team { color: var(--ink-2); background: rgba(var(--g-rgb), .1); border-color: rgba(var(--g-rgb), .35); }
html[data-theme="light"] .pz__t { color: var(--ink); }
html[data-theme="light"] .pz__d { color: var(--muted); }
html[data-theme="light"] .pz__sub a { color: var(--ink-2); background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="light"] .pz__sub a:hover, html[data-theme="light"] .pz__sub a:focus-visible { background: rgba(var(--g-rgb), .14); color: var(--ink); }
html[data-theme="light"] .pz__tile:hover, html[data-theme="light"] .pz__tile.is-active { box-shadow: 0 30px 60px -30px rgba(var(--g-rgb), .45); }
html[data-theme="light"] .pz__tile.is-linked { border-color: rgba(var(--g-rgb), .5); }
html[data-theme="light"] .pz__facts { border-top-color: var(--line-2); }
html[data-theme="light"] .pz__facts b { background-image: linear-gradient(180deg, #1A1A1E 25%, #85580A 100%); }
html[data-theme="light"] .pz__facts span { color: var(--muted); }
html[data-theme="light"] .pz__hub { box-shadow: 0 0 0 8px #F4ECDC, 0 0 0 9px rgba(133,88,10,.3), 0 20px 40px rgba(227,30,36,.3); }
html[data-theme="light"] .pz__hub-cap { background: var(--surface); color: var(--hx-gold-2); }
/* hero/booking nối nền */
html[data-theme="light"] .booking { color: var(--ink); }

/* 5b. Tối: các khối vốn sáng của trang chủ */
html[data-theme="dark"] .pillar--air { background: linear-gradient(180deg, var(--bg) 0%, var(--air-soft) 62%, var(--bg) 100%); }
html[data-theme] .air__notice { background: color-mix(in srgb, var(--surface) 96%, transparent); }
html[data-theme] .vdh-banner__logo small { color: var(--muted); }
html[data-theme="dark"] .vdh-banner__logo img { filter: brightness(1.12) saturate(1.1); }
html[data-theme="dark"] .pillar--csr::before { opacity: .7; }
html[data-theme="dark"] .csr__list a { border-color: var(--line); }
html[data-theme="dark"] .csr__ph { border-color: var(--surface-2); }
html[data-theme] .press__logo { background: var(--surface); }
html[data-theme="dark"] .press__logo { color: var(--ink-2) !important; }

/* 5c. Công nghệ (vốn tối): bản sáng */
html[data-theme="light"] .pillar--tech { --accent: var(--tech-ink); --accent-ink: var(--tech-ink); background: linear-gradient(180deg, var(--tech-soft), var(--bg-soft)); color: var(--ink); }
html[data-theme="light"] .tech__grid-bg { background-image: linear-gradient(rgba(67,56,202,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(67,56,202,.07) 1px, transparent 1px); }
html[data-theme="light"] .pillar--tech .h2 { color: var(--ink); }
html[data-theme="light"] .pillar--tech .lead { color: var(--ink-2); }
html[data-theme="light"] .bento__item a { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
html[data-theme="light"] .bento__item a:hover { border-color: rgba(67,56,202,.5); }
html[data-theme="light"] .bento__item a::before { background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 0%), rgba(109,114,246,.14), transparent 60%); }
html[data-theme="light"] .bento__ico { color: var(--tech-ink); }
html[data-theme="light"] .bento b { color: var(--ink); }
html[data-theme="light"] .bento span { color: var(--muted); }
html[data-theme="light"] .products { border-top-color: var(--line-2); }
html[data-theme="light"] .products__title { color: var(--ink); }
html[data-theme="light"] .products__title::before { background: var(--csr); box-shadow: 0 0 0 4px rgba(31,164,99,.2); }
html[data-theme="light"] .products__list a { border-color: var(--line-2); background: var(--surface); }
html[data-theme="light"] .products__list a:hover { border-color: var(--tech-ink); background: var(--surface); }
html[data-theme="light"] .products__list b { color: var(--ink); }
html[data-theme="light"] .products__list span, html[data-theme="light"] .products__list .ph { color: var(--muted); }
html[data-theme="light"] .pillar--tech .more-btn { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
html[data-theme="light"] .pillar--tech .more-btn .ph { background: var(--ink); color: var(--on-ink); }

/* 5d. Câu chuyện (timeline, vốn tối): bản sáng */
html[data-theme="light"] .story { color: var(--ink); background: radial-gradient(60% 80% at 100% 0%, rgba(227,30,36,.10), transparent 60%), linear-gradient(160deg, #FFF3EE 0%, #FBF6EE 55%, #FBF9F5 100%); }
html[data-theme="light"] .story .h2, html[data-theme="light"] .story .kicker { color: var(--ink); }
html[data-theme="light"] .story__lead { color: var(--ink-2); }
html[data-theme="light"] .tl-bar { background: rgba(28,25,23,.12); }
html[data-theme="light"] .tl-bar i { box-shadow: 0 0 10px rgba(227,30,36,.35); }
html[data-theme="light"] .story .timeline__item { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
html[data-theme="light"] .story .timeline__item::before { background: var(--bg); border-color: rgba(28,25,23,.4); }
html[data-theme="light"] .story .timeline__item.is-lit::before { background: #E31E24; border-color: var(--bg); box-shadow: 0 0 0 5px rgba(227,30,36,.2); }
html[data-theme="light"] .story .timeline__item:hover { background: var(--surface); border-color: rgba(227,30,36,.5); }
html[data-theme="light"] .timeline__year, html[data-theme="light"] .timeline__item b { color: var(--ink); }
html[data-theme="light"] .timeline__item--key .timeline__year { background-image: linear-gradient(90deg, #D0161C, #C2570C); }
html[data-theme="light"] .story .timeline__item--ai .timeline__year { background-image: linear-gradient(90deg, #4338CA, #B0175E); }
html[data-theme="light"] .timeline__item p { color: var(--muted); }
html[data-theme="light"] .tl__ico { color: var(--muted-2); }
html[data-theme="light"] .story .timeline__item--key .tl__ico { color: var(--brand-ink); }
html[data-theme="light"] .tl__era { color: var(--ink-2); border-color: var(--line-2); }
html[data-theme="light"] .story .timeline__item--key { border-color: rgba(227,30,36,.4); background: linear-gradient(160deg, rgba(227,30,36,.07), var(--surface)); }
html[data-theme="light"] .round-btn--dark { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
html[data-theme="light"] .round-btn--dark:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* 5e. thanh nối 4 mảng bên phải (home-flow) */
html[data-theme="light"] .hv-sb__track { background: rgba(28,25,23,.2); }
html[data-theme="light"] .hv-sb__n i { background: var(--surface); }

/* 5f. bổ sung sau QA vòng 1 */
html[data-theme="light"] :is(.hx, .story, .pz) .btn--ghost-light { --b-bg: var(--surface); --b-fg: var(--ink); border-color: var(--line-2); backdrop-filter: none; }
html[data-theme="light"] :is(.hx, .story, .pz) .btn--ghost-light:hover { --b-bg: var(--surface-2); border-color: var(--ink); }
html[data-theme="light"] .pz .h2--light { color: var(--ink); }
html[data-theme="light"] .pz .kicker--light { color: var(--muted); }
html[data-theme="light"] .bento code, html[data-theme="light"] .bento__item code { color: var(--tech-ink); }

/* 5g. sửa sau QA vòng 2 */
html[data-theme] .btn--brand, html[data-theme] .hbtn--call.btn--brand { --b-fg: #fff; }
html[data-theme="dark"] .tag { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
html[data-theme] .pillar--mkt .btn--light { --b-bg: #fff; --b-fg: #1A1A1E; }
html[data-theme] .vbk-shr { color: #1D4ED8 !important; }

/* ============ 6. THÀNH PHẦN CỦA FORK (bảng bài viết, thanh chuyên mục, điều hướng nổi) ============ */
html[data-theme="dark"] .vdh-tbl { border-color: var(--line-2); }
html[data-theme="dark"] .vdh-tbl td { border-bottom-color: var(--line-2) !important; }
html[data-theme="dark"] .vdh-tbl tr:nth-child(even) td { background: var(--surface-2); }
html[data-theme="dark"] .vrel { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .vrel-c, html[data-theme="dark"] .vnx-res a { color: var(--ink) !important; }
html[data-theme="dark"] .vcar-h b, html[data-theme="dark"] .vnx-pn .hd b { color: #fff; }
html[data-theme="dark"] .vnx-dock { background: rgba(23,24,28,.97); }
html[data-theme="dark"] .vnx-row a, html[data-theme="dark"] .vnx-row button, html[data-theme="dark"] .vnx-ar, html[data-theme="dark"] .vnx-sr input,
html[data-theme="dark"] .vnx-dock .vnx-row a, html[data-theme="dark"] .vnx-dock .vnx-row button { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .vnx-row a.on, html[data-theme="dark"] .vnx-dock .vnx-row a.on { background: #E31E24; border-color: #E31E24; color: #fff; }
html[data-theme="dark"] .vnx-pn .bx, html[data-theme="dark"] .vnx-res { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .vnx-pn .gr a { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .vnx-pn .sq, html[data-theme="dark"] .vnx-pn .x { background: var(--surface-2); color: #fff; border-color: var(--line-2); }
html[data-theme="dark"] .vnx-res a:hover { background: var(--surface-2); }
html[data-theme="dark"] .vdh-bn>a, html[data-theme="dark"] .vdh-bn>button, html[data-theme="dark"] body .vdh-bn a.bk:not(.vbn-on), html[data-theme="dark"] body .vdh-bn a.bk:not(.vbn-on) i { color: var(--ink-2) !important; }
html[data-theme="dark"] .vdh-bn>a.vbn-on, html[data-theme="dark"] .vdh-bn>button.vbn-on { color: var(--brand-ink) !important; }
html[data-theme="dark"] .vdh-bn { background: rgba(15,16,18,.96) !important; border-top: 1px solid var(--line); }
html[data-theme="dark"] .vbn-show { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
html[data-theme="dark"] ::placeholder { color: var(--muted-2); opacity: 1; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }

/* ============ 7. BÁO CHÍ (hero + chân trang giữ nền "đen mực" ở cả 2 chế độ; phần giấy báo theo chế độ) ============ */
html[data-theme="dark"] .hv-press { --pr-paper: var(--bg); --pr-ink: var(--ink); --pr-rule: var(--line-2); }
html[data-theme="dark"] .pr-card__shot { background: var(--surface-2); }
html[data-theme="dark"] .pr-card__shot a { background: #fff; }
html[data-theme="dark"] .pr-paper.is-tn { background: rgba(227,30,36,.16); color: var(--brand-ink); border-color: rgba(255,107,112,.4); }
html[data-theme="dark"] .pr-filter button:hover { background: var(--veil); }
html[data-theme="dark"] .pr-card, html[data-theme="dark"] .pr-card:hover { box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 30px -22px rgba(0,0,0,.8); }
html[data-theme="light"] .hv-press { --pr-paper: var(--bg); --pr-rule: var(--line-2); }
html[data-theme="light"] .pr-card__shot { background: var(--bg-soft); }
html[data-theme="light"] .pr-paper.is-tn { color: var(--brand-ink); border-color: rgba(197,22,27,.3); }

/* ============ 8. NỘI DUNG TRANG MẢNG (đợt 1) ============
 * CSS riêng của 4 mảng (pillar-ve/tech/mkt/csr) chưa đọc token → giữ nguyên chế độ gốc của mảng trong vùng #content,
 * chỉ khung chung (header, footer, nút chuyển) đổi theo lựa chọn của khách. Đợt 2: mỗi mảng chuyển sang token rồi xoá khối này. */
html[data-theme="light"] body:is(.hv-pm-page-OFF) #content {
  --bg: #0F1012; --bg-soft: #141519; --surface: #17181C; --surface-2: #1E2026;
  --ink: #F3F1EC; --ink-2: #DAD8D2; --muted: #B9B7B2; --muted-2: #A09E9A;
  --line: #2A2C32; --line-2: #3A3D45; --line-ui: #767A86;
  --on-ink: #0F1012;
  --brand-ink: #FF6B70; --brand-50: rgba(227,30,36,.14);
  --air-ink: #FF9A5C; --tech-ink: #A7ABFF; --mkt-ink: #FF7DB6; --csr-ink: #5EDB9C;
  --air-soft: rgba(242,106,33,.12); --tech-soft: rgba(109,114,246,.14); --mkt-soft: rgba(226,51,127,.13); --csr-soft: rgba(31,164,99,.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-3: 0 4px 10px rgba(0,0,0,.35), 0 30px 70px -20px rgba(0,0,0,.7);
  --focus: 0 0 0 3px #0F1012, 0 0 0 5px #FF6B70;
  color-scheme: dark; color: var(--ink);
}

/* 5h. nút CTA header/drawer theo mảng: nền = màu chữ accent (ở tối là bản sáng) → chữ dùng --on-ink */
html[data-theme] .hvx-cta, html[data-theme] .hvx-dcta { color: var(--on-ink); }
html[data-theme] .hvx-cta .ph, html[data-theme] .hvx-dcta .ph { color: inherit; }
html[data-theme] .vfb-rep button, html[data-theme] .vfb-rep span { color: var(--ink) !important; }
html[data-theme] .vfb-rep button u, html[data-theme] .vfb-rep a { color: var(--brand-ink) !important; }

/* ============ 9. QA TỔNG CUỐI 11/10 (chỉ thêm; dùng token) ============
 * /danh-gia/, /bang-dien-tu/, /tai-khoan/, thông báo/ưu đãi, chuyên mục + tìm kiếm tin, Woo (breadcrumb/notice/form), /doi-tac/ chân form.
 * Gỡ = xoá từ dòng này đến hết file. */

/* 9a. /danh-gia/ — token (nền thẻ, chữ, chip, sao) */
html[data-theme="light"] .hvr .st { color: #B45309; }
html[data-theme="light"] .hvr .st i { color: #CFC9BC; }
html[data-theme="light"] .hvr { --gd: #B45309; }
html[data-theme] .hvr-dm { font-size: 11px; }
html[data-theme="dark"] .hvr { --nv: var(--ink); --tx: var(--ink-2); --mu: var(--muted); --ln: var(--line-2); --sf: var(--surface-2); --gd: #FBBF24; }
html[data-theme="dark"] .hvr-hero small, html[data-theme="dark"] .hvr .hvr-adm a, html[data-theme="dark"] .hvr-xm, html[data-theme="dark"] .hvr-msg { color: var(--brand-ink); }
html[data-theme="dark"] .hvr-btn--ghost, html[data-theme="dark"] .hvr-sum, html[data-theme="dark"] .hvr-cr div, html[data-theme="dark"] .hvr-nav button,
html[data-theme="dark"] .hvr-f button, html[data-theme="dark"] .hvr-c, html[data-theme="dark"] .hvr-more button, html[data-theme="dark"] .hvr-m__c,
html[data-theme="dark"] .hvr-pk button, html[data-theme="dark"] .hvr-rl button,
html[data-theme="dark"] .hvr-m select, html[data-theme="dark"] .hvr-m input[type=text], html[data-theme="dark"] .hvr-m input[type=tel], html[data-theme="dark"] .hvr-m textarea { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .hvr-m select, html[data-theme="dark"] .hvr-m input[type=text], html[data-theme="dark"] .hvr-m input[type=tel], html[data-theme="dark"] .hvr-m textarea { border-color: var(--line-ui); }
html[data-theme="dark"] .hvr-btn--ghost { color: var(--ink) !important; }
html[data-theme="dark"] .hvr-sum .bars i { background: var(--surface-2); }
html[data-theme="dark"] .hvr-sum--empty { background: var(--surface); border-color: var(--line-2); }
html[data-theme="dark"] .hvr-f button.on, html[data-theme="dark"] .hvr-rl button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html[data-theme="dark"] .hvr-f button.on i { color: var(--on-ink); }
html[data-theme="dark"] .hvr-nav button:hover, html[data-theme="dark"] .hvr-more button:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-theme="dark"] .hvr-pk button.on { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-ink); }
html[data-theme="dark"] .hvr-dm, html[data-theme="dark"] .hvr-emp p em { background: rgba(251,191,36,.16); color: #FCD34D; border-color: rgba(251,191,36,.4); }
html[data-theme="dark"] .hvr .st5 { background: linear-gradient(90deg, var(--gd) var(--p), #3A3D45 var(--p)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .hvr .st i, html[data-theme="dark"] .hvr-s5 button { color: #4A4D56; }
html[data-theme="dark"] .hvr-s5 button.on { color: var(--gd); }
html[data-theme="dark"] .hvr-nm b em, html[data-theme="dark"] .hvr-msg.ok { color: #4ADE80; }
html[data-theme="dark"] .hvr-c blockquote::before { color: rgba(255,107,112,.55); }
html[data-theme="dark"] .hvr-crx, html[data-theme="dark"] .hvr-c figcaption span { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .hvr-up { border-color: var(--line-ui); }
html[data-theme="dark"] .hvr-ph button { background: var(--surface-2); }
html[data-theme="dark"] .hvr-ag a { color: var(--ink) !important; }

/* 9b. /bang-dien-tu/ (plugin hvsc-fids) */
html[data-theme="dark"] .vfd { --n: var(--ink); --b: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .vfd-flt { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html[data-theme="dark"] .vfd-q, html[data-theme="dark"] .vfd-tabs button, html[data-theme="dark"] .vfd-sw button, html[data-theme="dark"] .vfd-ap,
html[data-theme="dark"] .vfd-chips a, html[data-theme="dark"] .vfd-board, html[data-theme="dark"] .vfd-fc, html[data-theme="dark"] .vfd-err { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
html[data-theme="dark"] .vfd-q { border-color: var(--line-ui); }
html[data-theme="dark"] .vfd-tabs button.on, html[data-theme="dark"] .vfd-sw button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html[data-theme="dark"] .vfd-ap b, html[data-theme="dark"] .vfd-chips a b, html[data-theme="dark"] .vfd-fc .ln em { color: var(--brand-ink); }
html[data-theme="dark"] .vfd-ap small, html[data-theme="dark"] .vfd-fc .ln small, html[data-theme="dark"] .vfd-fc .mt, html[data-theme="dark"] .vfd-note, html[data-theme="dark"] .vfd-empty,
html[data-theme="dark"] .vfd-bc a, html[data-theme="dark"] .vfd-src, html[data-theme="dark"] .vfd-src a, html[data-theme="dark"] .vfd-err { color: var(--muted); }
html[data-theme="dark"] .vfd-fc .ln > div { background: var(--surface-2); }
html[data-theme="dark"] .vfd-fc .st { background: rgba(167,171,255,.16); color: #C7C9FF; }
html[data-theme="dark"] .vfd-fc .st.delayed, html[data-theme="dark"] .vfd-fc .st.cancelled, html[data-theme="dark"] .vfd-fc .st.diverted { background: rgba(248,113,113,.16); color: #FCA5A5; }
html[data-theme="dark"] .vfd-fc .st.landed, html[data-theme="dark"] .vfd-fc .st.departed { background: rgba(74,222,128,.14); color: #86EFAC; }
html[data-theme="dark"] .vfd-cta { background: var(--brand-50); border-color: var(--line-2); }
html[data-theme="dark"] .vfd-cta span { color: var(--ink-2); }
html[data-theme="dark"] .vfd-grp h2, html[data-theme="dark"] .vfd-rel h2 { color: var(--ink); }
html[data-theme] .vfd-ap span { color: var(--ink); }

/* 9c. /tai-khoan/ (đăng nhập / đăng ký) */
html[data-theme="dark"] .vac { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-3); }
html[data-theme="dark"] .vac-r h2, html[data-theme="dark"] .vac-r h3 { color: var(--ink); }
html[data-theme="dark"] .vac-tabs { background: var(--surface-2); }
html[data-theme="dark"] .vac-tabs button { color: var(--muted) !important; }
html[data-theme="dark"] .vac-tabs button.on { background: var(--surface) !important; color: var(--ink) !important; }
html[data-theme="dark"] .vac .form-row label, html[data-theme="dark"] .vac label { color: var(--ink-2); }
html[data-theme="dark"] .vac .input-text, html[data-theme="dark"] .vac input[type=text], html[data-theme="dark"] .vac input[type=password], html[data-theme="dark"] .vac input[type=email] { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-ui) !important; }
html[data-theme="dark"] .vac .lost_password a, html[data-theme="dark"] .vac-help a { color: var(--brand-ink); }
html[data-theme="dark"] .vac .required { color: var(--brand-ink); }

/* 9d. Thông báo / Ưu đãi (vdh-nt) */
html[data-theme] .vdh-nt-lead { color: var(--muted); }
html[data-theme="dark"] .vdh-empty { background: var(--surface); color: var(--muted); }
html[data-theme="dark"] .vdh-nt-i, html[data-theme="dark"] .vdh-of-i { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .vdh-nt-i.new { background: var(--brand-50); border-color: var(--line-2); }
html[data-theme="dark"] .vdh-nt-i .ic { background: var(--surface-2); }
html[data-theme="dark"] .vdh-nt-i header b, html[data-theme="dark"] .vdh-of-i header b { color: var(--ink); }
html[data-theme="dark"] .vdh-nt-i time { color: var(--muted); }
html[data-theme="dark"] .vdh-nt .tx { color: var(--ink-2); }
html[data-theme="dark"] .vdh-nt .more { color: var(--brand-ink) !important; }
html[data-theme="dark"] .vdh-nt-tools button, html[data-theme="dark"] .vdh-nt-tools a { background: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--line-2) !important; }
html[data-theme="dark"] .vdh-nt-tools .add { background: var(--ink) !important; color: var(--on-ink) !important; border-color: var(--ink) !important; }

/* 9e. Chuyên mục / tìm kiếm / thẻ tin (mu hv-news archive + thanh vnb) */
html[data-theme] .vna .mt, html[data-theme] .vna-pop .sh span, html[data-theme] .vna-tags b, html[data-theme] .vna-more span { color: var(--muted); }
html[data-theme] .vna-no { color: var(--muted); }
html[data-theme="dark"] .vna { color: var(--ink); }
html[data-theme="dark"] .vna-hd { background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 22%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--cc) 30%, var(--line)); }
html[data-theme="dark"] .vna-hd .k { color: color-mix(in srgb, var(--cc) 55%, #fff); }
html[data-theme="dark"] .vna-hd h1, html[data-theme="dark"] .vna-hero h2 a, html[data-theme="dark"] .vna-c2 h3 a, html[data-theme="dark"] .vna-r h3 a,
html[data-theme="dark"] .vna-pop h2, html[data-theme="dark"] .vna-pop .pc, html[data-theme="dark"] .vna-sec { color: var(--ink); }
html[data-theme="dark"] .vna-hd .ds, html[data-theme="dark"] .vna-hero p, html[data-theme="dark"] .vna-r p { color: var(--muted); }
html[data-theme="dark"] .vna-hero, html[data-theme="dark"] .vna-c2 { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .vna-hero .im, html[data-theme="dark"] .vna-c2 .im, html[data-theme="dark"] .vna-r .im, html[data-theme="dark"] .vna-pop .pc .im { background: var(--surface-2); }
html[data-theme="dark"] .vna-pop { background: color-mix(in srgb, var(--cc) 12%, var(--surface)); border-color: var(--line-2); }
html[data-theme="dark"] .vna-r { border-color: var(--line); }
html[data-theme="dark"] .vna-tags a, html[data-theme="dark"] .vna-r .ch { background: color-mix(in srgb, var(--cc) 18%, var(--surface)); color: var(--ink); }
html[data-theme="dark"] .vna-more button { background: var(--ink); color: var(--on-ink); }
html[data-theme="dark"] .vna-pg .page-numbers { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .vna-pg .page-numbers.current { color: #fff; }
html[data-theme="dark"] .vna-sf input { background: var(--surface); color: var(--ink); border-color: var(--line-ui); }
html[data-theme="dark"] .vnb.vnb-pp, html[data-theme="dark"] .vnb-t { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink); }
html[data-theme="dark"] .vnb-t .tr { color: var(--muted) !important; }
html[data-theme="dark"] .vnb-t .tr b, html[data-theme="dark"] .vnb-t .tr a { color: var(--ink-2) !important; }
html[data-theme] .vnb-t .tr small { color: var(--muted) !important; }

/* 9f. WooCommerce (breadcrumb, thông báo, form giỏ hàng/thanh toán) */
html[data-theme] .woocommerce-breadcrumb, html[data-theme] .woocommerce-breadcrumb a { color: var(--muted); }
html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-error, html[data-theme="dark"] .woocommerce-noreviews { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .woocommerce-info a, html[data-theme="dark"] .woocommerce-message a, html[data-theme="dark"] .woocommerce-error a { color: var(--brand-ink); }
html[data-theme] .woocommerce form .form-row label, html[data-theme] .woocommerce-checkout label { color: var(--ink-2); }
html[data-theme] .woocommerce form .input-text, html[data-theme] .woocommerce form select, html[data-theme] .woocommerce form textarea,
html[data-theme] .woocommerce-checkout .select2-selection { background: var(--surface); color: var(--ink); border-color: var(--line-ui); }
html[data-theme] .woocommerce table.shop_table, html[data-theme] .woocommerce table.shop_table th, html[data-theme] .woocommerce table.shop_table td { color: var(--ink); border-color: var(--line); background: transparent; }
html[data-theme] .woocommerce .cart_totals, html[data-theme] .woocommerce-checkout #payment, html[data-theme] .woocommerce-checkout-review-order { background: var(--surface); color: var(--ink); border-radius: 12px; }
html[data-theme] .woocommerce-checkout #payment div.payment_box { background: var(--surface-2); color: var(--ink-2); }
html[data-theme] .woocommerce-Price-amount, html[data-theme] .woocommerce ul.products li.product .price { color: var(--ink); }
html[data-theme] .woocommerce a.remove { color: var(--brand-ink) !important; }

/* 9g. /doi-tac/ — chân form (chính sách bảo mật) */
/* thẻ form là nền sáng cố định ở cả 2 chế độ → đỏ đậm */
html[data-theme] details.vdh-pv summary span, html[data-theme] details.vdh-pv p a { color: #C5161B !important; }
html[data-theme="dark"] .vtk-tg { background: var(--surface-2); color: var(--muted); border-color: var(--line-2); }

/* /cong-nghe/ten-mien/ — tiền tố www. trên nền sáng */
html[data-theme] .hvd-www { color: #6B7185 !important; }

/* QA 11/10 (sáng): chip chuyên mục trên thẻ tin */
html[data-theme="light"] .vna-r .ch { color: color-mix(in srgb, var(--cc) 70%, #000); }