/* HVSC — Lớp trình bày thị giác (12/10/2026). Nạp SAU hv-theme.css + pillar-*-theme.css bởi mu-plugin zz-hv-visual.php.
 * Chỉ CSS trình bày, không đổi nội dung. Tắt 1 trang: ?hv_no_visual=1 · Hoàn tác: xoá mu-plugins/zz-hv-visual.php (+ 2 file này).
 * SÁNG: bỏ nền kem/be → trắng sạch hoặc mesh pastel theo mục; kính mờ (Liquid Glass) cho thẻ; bóng nhiều lớp; viền sáng 1px.
 * TỐI : bề mặt tối liền mạch, không mảng đỏ/bão hoà lớn làm nền, không mảng sáng lớn; đỏ/màu trụ chỉ là điểm nhấn.
 * Timeline lịch sử: chấm mốc không còn bị cắt nửa, sáng theo mốc, có dải chấm điều hướng bấm được (trang chủ + /gioi-thieu/). */

/* ================= 0. TOKEN SÁNG: thay kem/be bằng trắng lạnh ================= */
html[data-theme="light"] {
  --bg: #FAFBFD; --bg-soft: #F1F4FA; --surface-2: #F3F5F9;
  --line: #E3E6EE; --line-2: #D2D7E3; --line-ui: #7E8494;
  --shadow-1: 0 1px 1px rgba(16,24,48,.04), 0 2px 6px -1px rgba(16,24,48,.06), 0 10px 24px -12px rgba(16,24,48,.10);
  --shadow-2: 0 1px 2px rgba(16,24,48,.05), 0 8px 20px -8px rgba(16,24,48,.10), 0 28px 56px -24px rgba(16,24,48,.18);
  --shadow-3: 0 2px 4px rgba(16,24,48,.05), 0 16px 36px -12px rgba(16,24,48,.14), 0 48px 96px -32px rgba(16,24,48,.24);
  --hvx-ease: cubic-bezier(.32,.72,0,1);
  --hvx-spring: cubic-bezier(.34,1.36,.64,1);
  --hvx-glass: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
  --hvx-glass-line: rgba(255,255,255,.85);
  --hvx-glass-sh: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(16,24,48,.05), 0 10px 28px -10px rgba(16,24,48,.14), 0 32px 64px -32px rgba(16,24,48,.22);
  --hvx-dots: radial-gradient(rgba(30,40,90,.10) 1px, transparent 1.3px);
}
html[data-theme="dark"] { --hvx-ease: cubic-bezier(.32,.72,0,1); --hvx-spring: cubic-bezier(.34,1.36,.64,1); }

/* nền trang: chấm lưới rất nhẹ, cố định (không repaint khi cuộn) */
html[data-theme="light"] body.hv-site::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hvx-dots) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}

/* ================= 1. SÁNG — TRANG CHỦ: mỗi mục một sắc ================= */
html[data-theme="light"] .home .hero.hx {
  background:
    radial-gradient(42% 55% at 88% 18%, rgba(227,30,36,.13), transparent 70%),
    radial-gradient(38% 50% at 62% 92%, rgba(255,138,61,.14), transparent 72%),
    radial-gradient(45% 60% at 4% 70%, rgba(124,92,255,.11), transparent 70%),
    var(--hvx-dots) 0 0 / 24px 24px,
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFE 100%);
}
/* Bốn mảng: mesh 4 góc theo màu trụ (thay nền be) */
html[data-theme="light"] .home .pz {
  background:
    radial-gradient(40% 45% at 0% 0%, rgba(255,154,92,.20), transparent 70%),
    radial-gradient(40% 45% at 100% 6%, rgba(109,114,246,.18), transparent 70%),
    radial-gradient(42% 45% at 2% 100%, rgba(236,72,153,.15), transparent 70%),
    radial-gradient(42% 45% at 100% 100%, rgba(34,197,94,.15), transparent 70%),
    var(--hvx-dots) 0 0 / 24px 24px,
    linear-gradient(180deg, #FAFBFF, #F6F7FD);
}
html[data-theme="light"] .home .pz__tile {
  background: radial-gradient(520px 260px at 75% 0%, rgba(var(--g-rgb), .13), transparent 70%), var(--hvx-glass);
  border: 1px solid var(--hvx-glass-line); box-shadow: var(--hvx-glass-sh);
}
html[data-theme="light"] .home .pz__tile:hover, html[data-theme="light"] .home .pz__tile.is-active {
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(16,24,48,.05), 0 24px 48px -20px rgba(var(--g-rgb), .45), 0 48px 90px -40px rgba(16,24,48,.25);
}
html[data-theme="light"] .home .pz__facts b {
  background: linear-gradient(120deg, #C5161B 10%, #E8590C 55%, #B0175E 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Vé: trời xanh → nắng cam */
html[data-theme="light"] .home .pillar--air {
  background:
    radial-gradient(40% 50% at 92% 10%, rgba(255,154,92,.20), transparent 70%),
    radial-gradient(45% 55% at 6% 30%, rgba(96,165,250,.18), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF6FF 45%, #FFF3EA 85%, #FFFFFF 100%);
}
/* Công nghệ: bản vẽ chàm, kẻ ô mờ */
html[data-theme="light"] .home .pillar--tech {
  background:
    linear-gradient(rgba(67,56,202,.055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(67,56,202,.055) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(50% 60% at 85% 0%, rgba(109,114,246,.18), transparent 70%),
    linear-gradient(180deg, #F0F2FF 0%, #F7F8FF 70%, #FFFFFF 100%);
}
/* Cộng đồng: bạc hà + nắng */
html[data-theme="light"] .home .pillar--csr {
  background:
    radial-gradient(40% 55% at 95% 20%, rgba(250,204,21,.16), transparent 70%),
    radial-gradient(45% 60% at 0% 80%, rgba(34,197,94,.16), transparent 70%),
    linear-gradient(180deg, #F2FBF6 0%, #FFFFFF 100%);
}
/* Vì sao: trắng sạch + thẻ kính, số thứ tự nhấn */
html[data-theme="light"] .home .why { background: linear-gradient(180deg, #FFFFFF, #FAFBFD); }
html[data-theme="light"] .home .why__list > li { background: var(--hvx-glass); border: 1px solid var(--line); box-shadow: var(--shadow-1); border-radius: 20px; transition: transform .5s var(--hvx-ease), box-shadow .5s var(--hvx-ease), border-color .3s; }
/* Đã làm: sương lam-tím */
html[data-theme="light"] .home .proof {
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(124,92,255,.10), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(56,189,248,.10), transparent 70%),
    linear-gradient(180deg, #FAFBFF, #F5F7FC);
}
html[data-theme="light"] .home .proof__case, html[data-theme="light"] .home .proof__long { box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.9); }
/* Câu chuyện: hồng → tím nhạt (không kem) */
html[data-theme="light"] .home .story {
  background:
    radial-gradient(55% 75% at 100% 0%, rgba(227,30,36,.12), transparent 65%),
    radial-gradient(50% 70% at 0% 100%, rgba(139,92,246,.12), transparent 65%),
    linear-gradient(160deg, #FFF3F4 0%, #F8F4FF 60%, #FAFBFD 100%);
}
html[data-theme="light"] .home .story .timeline__item { background: var(--hvx-glass); border-color: var(--hvx-glass-line); box-shadow: var(--hvx-glass-sh); }
/* Báo chí trắng · Tin tức xanh nhạt · Đánh giá trắng · FAQ hồng-tím */
html[data-theme="light"] .home .press { background: #FFFFFF; }
html[data-theme="light"] .home .news {
  background: radial-gradient(45% 60% at 100% 10%, rgba(59,130,246,.10), transparent 70%), linear-gradient(180deg, #F5F8FF, #FAFBFD);
}
html[data-theme="light"] .home .reviews { background: #FFFFFF; }
html[data-theme="light"] .home .faq {
  background: radial-gradient(45% 60% at 0% 0%, rgba(236,72,153,.08), transparent 70%), radial-gradient(45% 60% at 100% 100%, rgba(124,92,255,.09), transparent 70%), #FBFAFE;
}
html[data-theme="light"] .home .contact-card { background: var(--hvx-glass); border: 1px solid var(--hvx-glass-line); box-shadow: var(--hvx-glass-sh); }
html[data-theme="light"] .home .post__img, html[data-theme="light"] .home .hv-empty, html[data-theme="light"] .home .proof__shot { background-color: #EEF1F7; }
html[data-theme="light"] .home .faq details.qa { border-radius: 14px; transition: background .3s, box-shadow .3s; }
html[data-theme="light"] .home .faq details.qa[open] { background: rgba(255,255,255,.75); box-shadow: var(--shadow-1); }
/* CTA cuối: gradient đỏ → hồng → cam (giống tinh thần hero Marketing) + thẻ kính */
html[data-theme="light"] .home .cta {
  background:
    radial-gradient(40% 70% at 95% 0%, rgba(255,138,61,.45), transparent 70%),
    radial-gradient(45% 80% at 0% 100%, rgba(134,25,143,.45), transparent 70%),
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(118deg, #A50F2D 0%, #C8102E 40%, #B3123B 70%, #9A1A1A 100%);
}
html[data-theme="light"] .home .cta__opt {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -14px rgba(60,0,10,.55);
}
/* tiêu đề: chặt hơn, phân cấp rõ; vạch kicker gradient đỏ-cam */
html[data-theme="light"] .home .h2 { letter-spacing: -.028em; }
html[data-theme="light"] .kicker:not(.kicker--light)::before,
html[data-theme="light"] .home .kicker--light::before { background: linear-gradient(90deg, #E31E24, #FF8A3D); opacity: 1; width: 28px; }

/* ================= 2. SÁNG — HUB TRỤ ================= */
/* Vé: các mục xen kẽ có sắc trời, thẻ nổi nhiều lớp */
html[data-theme="light"] .hv-pv .pv-sec--alt {
  background: radial-gradient(40% 60% at 100% 0%, rgba(255,154,92,.12), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(96,165,250,.13), transparent 70%), linear-gradient(180deg, #F3F8FF, #FFF8F2);
}
html[data-theme="light"] .hv-pv .pv-sec:nth-of-type(4n+2):not(.pv-sec--alt):not(.pv-cta) { background: linear-gradient(180deg, #FFFFFF, #F7FAFF); }
html[data-theme="light"] .hv-pv :is(.pv-svc__c, .pv-pain, .pv-cmp__c, .pv-tip) { box-shadow: var(--shadow-1); transition: transform .5s var(--hvx-ease), box-shadow .5s var(--hvx-ease); }
/* Công nghệ: giấy kẻ chàm lạnh (không ngà) */
html[data-theme="light"] .hv-pt-page .pt-sec--paper { background-color: #FBFCFF; }
html[data-theme="light"] .hv-pt-page :is(.pt-cell, .pt-mod, .pt-prod, .pt-demo, .pt-flow__i) { transition: transform .5s var(--hvx-ease), box-shadow .5s var(--hvx-ease); }
/* Cộng đồng: thay nền giấy kraft be bằng bạc hà – nắng tươi (giữ thẻ polaroid/giấy làm điểm nhấn) */
html[data-theme="light"] .hv-csr-land main, html[data-theme="light"] .hv-csr-land #content {
  background-color: #F6FBF8 !important;
  background-image:
    radial-gradient(45% 35% at 100% 0%, rgba(250,204,21,.14), transparent 70%),
    radial-gradient(45% 30% at 0% 18%, rgba(34,197,94,.13), transparent 70%),
    radial-gradient(40% 25% at 100% 55%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(45% 30% at 0% 85%, rgba(249,115,22,.09), transparent 70%),
    radial-gradient(rgba(19,122,71,.08) 1px, transparent 1.3px) !important;
  background-size: auto, auto, auto, auto, 24px 24px !important;
}
/* Giới thiệu + trang chung: hero không còn kem */
html[data-theme="light"] .hv-hero--brand {
  background: radial-gradient(45% 80% at 100% 0%, rgba(227,30,36,.10), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(124,92,255,.10), transparent 70%), linear-gradient(180deg, #F6F7FC, #FAFBFD) !important;
}

/* ================= 3. KÍNH MỜ (chỉ màn rộng, ít lớp — giữ hiệu năng) ================= */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 900px) {
    html[data-theme="light"] .home :is(.pz__tile, .contact-card),
    html[data-theme="light"] .home .story .timeline__item {
      -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
    }
  }
}

/* ================= 4. HOVER (chỉ thiết bị có chuột) ================= */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .home .why__list > li:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(227,30,36,.28); }
  html[data-theme="light"] .hv-pv :is(.pv-svc__c, .pv-pain, .pv-cmp__c, .pv-tip):hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  html[data-theme="light"] .hv-pt-page :is(.pt-cell, .pt-mod, .pt-prod, .pt-flow__i):hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,24,48,.05), 0 22px 44px -22px rgba(67,56,202,.35); }
  .hvm-tilt { transition: transform .6s var(--hvx-ease, ease), box-shadow .5s; will-change: auto; }
  .hvm-tilt.is-tilting { transition: transform .12s linear, box-shadow .5s; }
}

/* ================= 5. TỐI — không mảng đỏ/bão hoà/sáng lớn ================= */
/* 5a. Widget đặt vé (vốn thẻ trắng) → bản tối bằng bộ lọc đảo (giữ đúng sắc: ảnh/nút đảo lại) */
html[data-theme="dark"] .vbk { filter: invert(.9) hue-rotate(180deg); box-shadow: none !important; border-color: #D0D2D8 !important; }
html[data-theme="dark"] .vbk :is(img, picture, video, .vbk-go, [type=submit]) { filter: invert(1) hue-rotate(180deg) brightness(.92); }
/* 5b. Trang chủ — Marketing: thay gradient tím-đỏ bão hoà bằng bề mặt tối + quầng màu nhỏ */
html[data-theme="dark"] .home .pillar--mkt {
  background:
    radial-gradient(45% 60% at 12% 18%, rgba(124,58,237,.20), transparent 70%),
    radial-gradient(40% 55% at 88% 75%, rgba(219,39,119,.14), transparent 70%),
    linear-gradient(180deg, #0B0C10 0%, #120F1C 18%, #120F1C 82%, #0F1012 100%);
}
html[data-theme="dark"] .home .pillar--mkt::before, html[data-theme="dark"] .home .pillar--mkt::after { opacity: .35; }
/* 5c. CTA cuối: bỏ nền đỏ đặc → bề mặt tối, viền/đèn đỏ mảnh */
html[data-theme="dark"] .home .cta {
  background: radial-gradient(50% 90% at 50% 0%, rgba(227,30,36,.09), transparent 70%), linear-gradient(180deg, #0F1012, #131418 40%, #0F1012);
  border-top: 1px solid rgba(255,107,112,.28);
}
html[data-theme="dark"] .home .cta::before { opacity: .06; }
html[data-theme="dark"] .home .cta__sub { color: var(--ink-2); }
html[data-theme="dark"] .home .cta__fine { color: var(--muted); }
html[data-theme="dark"] .home .cta__fine a { color: var(--brand-ink); }
html[data-theme="dark"] .home .cta__opt { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
html[data-theme="dark"] .home .cta__opt .ph { color: var(--brand-ink); background: rgba(227,30,36,.12); }
html[data-theme="dark"] .home .cta__opt span { color: var(--muted); }
@media (hover: hover) { html[data-theme="dark"] .home .cta__opt:hover { border-color: rgba(255,107,112,.55); box-shadow: 0 20px 40px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(255,107,112,.2); } }
/* 5d. Chuyển section mượt: các mảng trụ trang chủ chuyển mép bằng gradient */
html[data-theme="dark"] .home .pillar--tech { background: linear-gradient(180deg, #0F1012 0%, #0B0C10 12%, #0B0C10 88%, #0F1012 100%); }
html[data-theme="dark"] .home .pillar--csr { background: linear-gradient(180deg, #0F1012 0%, rgba(31,164,99,.10) 20%, rgba(31,164,99,.10) 80%, #0F1012 100%); }
html[data-theme="dark"] .home .proof__logos li:not(.is-dark) { background-color: #E4E6EB; }
/* 5e. Công nghệ: mục "giấy" → mực tối (JS đổi lớp), dải đỏ → bề mặt tối viền đỏ */
html[data-theme="dark"] .hv-pt-page .pt-band { background: linear-gradient(180deg, #14151A, #111216); border-block: 1px solid rgba(255,107,112,.30); box-shadow: inset 4px 0 0 #E31E24; }
html[data-theme="dark"] .hv-pt-page .pt-band p { color: #F3F1EC; }
html[data-theme="dark"] .hv-pt-page .pt-band .pt-btn--w { background: #E31E24; color: #fff !important; }
html[data-theme="dark"] .hv-pt-page .pt-band .pt-btn--o { border-color: rgba(255,255,255,.35); }
/* 5f. Mép section tối các hub: bóng chuyển nhẹ thay vì cắt thẳng */
html[data-theme="dark"] :is(.hv-pt-page .pt-sec, .hv-pm-page .pm-sec, .hv-pv .pv-sec--alt) { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
/* 5g. Vé hub: nút lớn bão hoà ở dải "chưa biết chọn hạng" → nút viền */
html[data-theme="dark"] .hv-pv .pv-mid .pv-btn--zalo { background: transparent !important; border: 1px solid rgba(96,165,250,.55) !important; color: #9CC3FF !important; }

/* ================= 6. TIMELINE TRANG CHỦ (sửa chấm mốc + dải điều hướng) ================= */
.story .timeline.hvtl { position: relative; padding-top: 46px; }
.story .tl-wrap.hvtl-on .tl-bar { display: none; }
html[data-theme] .story .timeline.hvtl > .timeline__item::before {
  content: ""; position: absolute; left: 22px; top: -32px; width: 14px; height: 14px; border-radius: 50%;
  box-sizing: border-box; z-index: 2; transition: background .35s, border-color .35s, box-shadow .35s, transform .45s var(--hvx-spring, ease);
}
html[data-theme="dark"] .story .timeline.hvtl > .timeline__item::before { background: #0F1012; border: 2px solid rgba(255,255,255,.38); box-shadow: none; }
html[data-theme="light"] .story .timeline.hvtl > .timeline__item::before { background: #FFFFFF; border: 2px solid rgba(26,26,30,.30); box-shadow: none; }
html[data-theme] .story .timeline.hvtl > .timeline__item.hv-lit::before { background: #E31E24; border-color: #E31E24; }
html[data-theme="dark"] .story .timeline.hvtl > .timeline__item.hv-cur::before { border-color: #fff; box-shadow: 0 0 0 5px rgba(227,30,36,.28), 0 0 16px rgba(227,30,36,.6); transform: scale(1.18); }
html[data-theme="light"] .story .timeline.hvtl > .timeline__item.hv-cur::before { border-color: #fff; box-shadow: 0 0 0 5px rgba(227,30,36,.22), 0 4px 12px rgba(227,30,36,.35); transform: scale(1.18); }
.story .timeline.hvtl > .hvtl-rail, .story .timeline.hvtl > .hvtl-fill {
  position: absolute; top: 19px; height: 2px; border-radius: 2px; pointer-events: none; list-style: none; padding: 0; margin: 0; z-index: 1;
}
html[data-theme="dark"] .story .timeline.hvtl > .hvtl-rail { background: rgba(255,255,255,.16); }
html[data-theme="light"] .story .timeline.hvtl > .hvtl-rail { background: rgba(26,26,30,.13); }
.story .timeline.hvtl > .hvtl-fill { background: linear-gradient(90deg, #E31E24, #FF8A3D); transform-origin: 0 50%; transition: transform .5s var(--hvx-ease, ease); }
html[data-theme="dark"] .story .timeline.hvtl > .hvtl-fill { box-shadow: 0 0 10px rgba(227,30,36,.55); }
/* dải chấm điều hướng (bấm để nhảy mốc) */
.hvtl-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin: 14px auto 0; padding: 0 var(--gutter, 20px); }
.hvtl-nav button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.hvtl-nav button i { display: block; width: 8px; height: 8px; border-radius: 99px; transition: width .4s var(--hvx-ease, ease), background .3s; }
html[data-theme="dark"] .hvtl-nav button i { background: rgba(255,255,255,.32); }
html[data-theme="light"] .hvtl-nav button i { background: rgba(26,26,30,.25); }
.hvtl-nav button.is-vis i { background: rgba(227,30,36,.55); }
.hvtl-nav button[aria-current="true"] i { width: 22px; background: #E31E24; }
.hvtl-nav button:focus-visible { outline: 2px solid #E31E24; outline-offset: 1px; }
.hvtl-nav button span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 4px); padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
html[data-theme="dark"] .hvtl-nav button span { background: #1E2026; color: #F3F1EC; border: 1px solid #3A3D45; }
html[data-theme="light"] .hvtl-nav button span { background: #fff; color: #1A1A1E; box-shadow: var(--shadow-1); }
@media (hover: hover) { .hvtl-nav button:hover span, .hvtl-nav button:focus-visible span { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 1100px) { .story .story__ctrl .round-btn { opacity: 1; } }

/* ================= 7. TIMELINE GIỚI THIỆU (dọc): đường sáng theo cuộn, chấm sáng khi qua mốc ================= */
.gt-time.hvgt { position: relative; }
.gt-time.hvgt > .hvgt-fill { position: absolute; left: 7px; top: 8px; width: 2px; height: calc(100% - 16px); padding: 0; margin: 0; list-style: none; display: block; background: linear-gradient(#E31E24, #FF8A3D); border-radius: 2px; transform-origin: 50% 0; transform: scaleY(0); z-index: 1; pointer-events: none; transition: transform .25s linear; }
html[data-theme="dark"] .gt-time.hvgt > .hvgt-fill { box-shadow: 0 0 10px rgba(227,30,36,.5); }
html[data-theme] .gt-time.hvgt::before { background: var(--line-2); }
html[data-theme] .hv-prose ol.gt-time.hvgt > li:not(.hvgt-fill)::before, html[data-theme] .gt-time.hvgt > li:not(.hvgt-fill)::before {
  z-index: 2; background: var(--surface); border: 3px solid var(--line-ui); box-shadow: none; box-sizing: border-box;
  transition: background .35s, border-color .35s, box-shadow .35s, transform .45s var(--hvx-spring, ease);
}
html[data-theme] .hv-prose ol.gt-time.hvgt > li.hv-pass::before, html[data-theme] .gt-time.hvgt > li.hv-pass::before { border-color: #E31E24; background: var(--surface); }
html[data-theme] .hv-prose ol.gt-time.hvgt > li.is-key.hv-pass::before, html[data-theme] .gt-time.hvgt > li.is-key.hv-pass::before { background: #E31E24; }
html[data-theme] .hv-prose ol.gt-time.hvgt > li.hv-cur::before, html[data-theme] .gt-time.hvgt > li.hv-cur::before { background: #E31E24; border-color: #E31E24; box-shadow: 0 0 0 6px rgba(227,30,36,.2); transform: scale(1.12); }

/* ================= 8. HIỆN DẦN KHI CUỘN ================= */
.hvm-r { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); transition: opacity .8s var(--hvx-ease, ease), transform .9s var(--hvx-ease, ease); transition-delay: var(--hvm-d, 0s); }
.hvm-r.hvm-in { opacity: 1; transform: none; }
.hvm-num { font-variant-numeric: tabular-nums; display: inline-block; }

/* ================= 9. GIẢM CHUYỂN ĐỘNG ================= */
@media (prefers-reduced-motion: reduce) {
  .hvm-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hvm-tilt, .hvtl-nav button i, .story .timeline.hvtl > .hvtl-fill, .gt-time.hvgt > .hvgt-fill,
  html[data-theme] .story .timeline.hvtl > .timeline__item::before { transition: none !important; }
  html[data-theme] .story .timeline.hvtl > .timeline__item.hv-cur::before, html[data-theme] .gt-time.hvgt > li.hv-cur::before { transform: none; }
}

/* ================= 10. TỐI — Công nghệ: thẻ sản phẩm + form (vốn trắng) → bề mặt tối ================= */
html[data-theme="dark"] .hv-pt-page .pt-prod { background: #17181C; border-color: #2E3038; color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8); }
html[data-theme="dark"] .hv-pt-page .pt-prod__bar { background: #1E2026; border-color: #2E3038; color: var(--muted); }
html[data-theme="dark"] .hv-pt-page .pt-prod :is(h3, h4, b, strong) { color: var(--ink); }
html[data-theme="dark"] .hv-pt-page .pt-prod p { color: var(--muted); }
html[data-theme="dark"] .hv-pt-page .pt-prod a { color: #FF8A8E; }
html[data-theme="dark"] .hv-pt-page .pt-prod :is(.pt-tag, .pt-chip, li span, em) { background: rgba(167,171,255,.10); color: #C7CAFF; border-color: rgba(167,171,255,.25); }
html[data-theme="dark"] .hv-pt-page .pt-form { background: #17181C; border: 1px solid #2E3038; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.85); }
html[data-theme="dark"] .hv-pt-page .pt-form :is(h2, h3, label, b, strong) { color: var(--ink); }
html[data-theme="dark"] .hv-pt-page .pt-form :is(p, small, .pt-form__note) { color: var(--muted); }
html[data-theme="dark"] .hv-pt-page .pt-band .pt-btn--w { background: rgba(227,30,36,.16); border: 1px solid rgba(255,107,112,.6); color: #FFD0D2 !important; }
@media (hover: hover) { html[data-theme="dark"] .hv-pt-page .pt-band .pt-btn--w:hover { background: #E31E24; color: #fff !important; } }
/* Vé: dải "Chưa biết chọn hạng" — nút đỏ rộng trên mobile tối → nút viền */
@media (max-width: 600px) { html[data-theme="dark"] .hv-pv .pv-mid .pv-btn { background: rgba(227,30,36,.16) !important; border: 1px solid rgba(255,107,112,.6) !important; color: #FFD0D2 !important; box-shadow: none !important; } }

/* ================= 11. Timeline: mép mờ + ẩn thanh 4 mảng (dọc, trái) khi đang xem Câu chuyện để không chồng chấm ================= */
.story .timeline.hvtl { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter, 20px), #000 calc(100% - var(--gutter, 20px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter, 20px), #000 calc(100% - var(--gutter, 20px)), transparent 100%); }
html.hvx-story-in .hv-sb { opacity: 0 !important; pointer-events: none !important; }
/* tương phản AA (tối): chip lọc khách hàng đang chọn + ghi chú form Công nghệ */
html[data-theme="dark"] .hv-pt-page :is(#kf-all:checked ~ .pt-kh__bar [for="kf-all"], #kf-ban:checked ~ .pt-kh__bar [for="kf-ban"], #kf-cty:checked ~ .pt-kh__bar [for="kf-cty"], #kf-thuonghieu:checked ~ .pt-kh__bar [for="kf-thuonghieu"], #kf-tin:checked ~ .pt-kh__bar [for="kf-tin"], #kf-dv:checked ~ .pt-kh__bar [for="kf-dv"]) { background: #4F46E5 !important; }
html[data-theme="dark"] .hv-pt-page .pt-form__h span { color: var(--muted); }

/* ================= 12. Vòng Gemini (12/10) ================= */
/* Công nghệ sáng: dải đỏ nguyên khối → kính chàm (nút giữ đỏ HVSC làm điểm nhấn) */
html[data-theme="light"] .hv-pt-page .pt-band {
  background: radial-gradient(40% 120% at 100% 0%, rgba(109,114,246,.22), transparent 70%), linear-gradient(135deg, #EEF0FF 0%, #E3E7FF 100%);
  color: #1E1B4B; border-block: 1px solid rgba(99,102,241,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .hv-pt-page .pt-band p { color: #1E1B4B; }
html[data-theme="light"] .hv-pt-page .pt-band p small { color: #3F3D8F; opacity: 1; }
html[data-theme="light"] .hv-pt-page .pt-band .pt-btn--w { background: #E31E24; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(227,30,36,.55); }
html[data-theme="light"] .hv-pt-page .pt-band .pt-btn--o { border-color: rgba(67,56,202,.45); color: #3730A3 !important; }
html[data-theme="light"] .hv-pt-page :is(.pt-cell, .pt-mod) { box-shadow: var(--shadow-1); }
/* Tối: ảnh chụp website nền trắng dịu bớt (rê chuột sáng lại) */
html[data-theme="dark"] :is(.home .proof__shot img, .home .proof__case img, .hv-pt-page .pt-demo img, .hv-pt-page .pt-kh img, .home .post__img img) { filter: brightness(.86); transition: filter .4s var(--hvx-ease, ease); }
@media (hover: hover) { html[data-theme="dark"] :is(.home .proof__case, .hv-pt-page .pt-demo, .hv-pt-page .pt-kh__it, .home .post):hover img { filter: none; } }