/* Sinh tự động bởi tools/fetch-fonts.sh — dán khối này vào đầu site.css */
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Be Vietnam Pro';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ==========================================================================
   Doanh Trí Việt — landing page
   Dựng lại từ design_handoff_doanh_tri_viet/Doanh Tri Viet v3.dc.html (dòng 105–513).
   Giá trị màu/spacing/typography lấy nguyên từ design (bản hi-fi, số cuối).

   Khối @font-face ở đầu file do tools/fetch-fonts.sh sinh ra. Nếu đổi bộ weight
   thì chạy lại script đó rồi dán lại phần đầu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design token
   -------------------------------------------------------------------------- */
:root {
  /* Màu */
  --c-teal-900: #00343D;
  --c-teal-600: #147C82;
  --c-emerald:  #1AAB81;
  --c-gold:     #F2D675;
  --c-red:      #ED1C24;
  --c-blue:     #0B72CE;
  --c-green:    #2AA84A;
  --c-cream:    #EEEDEA;
  --c-cream-2:  #FBFAF8;
  --c-cream-3:  #F3EFE5;
  --c-white:    #FFFFFF;
  --c-ink-72:   rgba(0, 52, 61, .78);
  --c-ink-66:   rgba(0, 52, 61, .74);
  --c-ink-60:   rgba(0, 52, 61, .70);

  --grad-cta:      linear-gradient(94deg, #147C82, #1AAB81);
  --grad-progress: linear-gradient(90deg, #147C82, #1AAB81, #F2D675);

  /* Bo góc */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 9px;
  --r-pill: 999px;

  /* Đổ bóng */
  --sh-card:  0 12px 30px rgba(0, 52, 61, .09);
  --sh-float: 0 16px 34px rgba(0, 52, 61, .24);
  --sh-cta:   0 14px 30px rgba(26, 171, 129, .35);

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 1160px;
  --pad-x: clamp(18px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Chiều cao header thật. JS đo lại lúc load + resize (initHeaderHeight).
     Design hardcode 88px là SAI: padding header cố định 13px ở mọi breakpoint,
     phần tử cao nhất là nút CTA (~38px) nên tổng thực ~67px. */
  --header-h: 67px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-teal-900);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--c-teal-600); text-decoration: none; }

/* `height:auto` là BẮT BUỘC, không phải tuỳ chọn.
   Mọi <img> ở đây đều có thuộc tính width/height (để trình duyệt giữ chỗ,
   tránh nhảy layout). Nếu CSS chỉ đặt width mà bỏ height, trình duyệt dùng
   luôn thuộc tính height làm chiều cao pixel thật — ảnh bị kéo giãn và
   `aspect-ratio` trong CSS mất tác dụng hoàn toàn. */
img { max-width: 100%; height: auto; }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: rgba(0, 52, 61, .56); }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
/* Trình duyệt mặc định thụt <dd> vào 40px và thêm margin cho <dl>. Các khối
   số liệu ở đây dùng dl/dt/dd cho đúng ngữ nghĩa nên phải khử cả hai. */
dl, dd { margin: 0; }

/* Chuỗi dài không ngắt được (email, website, số điện thoại) là nguyên nhân
   tràn ngang phổ biến nhất ở 320px. */
.dtv-breakable { overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--c-teal-900); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 14px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* Viền focus thống nhất. Dùng :focus-visible để không hiện khi bấm chuột. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-teal-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.dtv-hero-shot:focus-visible { outline-offset: 6px; }

/* --------------------------------------------------------------------------
   3. Utility
   -------------------------------------------------------------------------- */
.dtv-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.dtv-wrap--narrow { max-width: var(--wrap-narrow); }

.dtv-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-teal-600);
}
.dtv-eyebrow--gold { color: var(--c-gold); }

/* Hình thoi trang trí — dùng lại ở nhiều section. */
.dtv-diamond {
  display: block; width: 18px; height: 18px;
  transform: rotate(45deg); flex: none;
}

.dtv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 44px;              /* M3: vùng chạm tối thiểu */
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 700; letter-spacing: .03em;
  border: 0; cursor: pointer;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s, color .2s, border-color .2s, background .2s;
}
.dtv-btn--primary { background: var(--grad-cta); color: #fff; }
.dtv-btn--lg { padding: 16px 30px; font-size: 15px; }
.dtv-btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-weight: 600;
}
.dtv-btn--ghost-dark {
  border: 1px solid rgba(0, 52, 61, .22);
  color: var(--c-teal-900); font-weight: 600;
}
.dtv-btn--dark { background: var(--c-teal-900); color: #fff; font-size: 14px; }
.dtv-btn--block { display: flex; width: 100%; }

/* Hiệu ứng hover chỉ áp cho thiết bị THẬT SỰ hover được.
   M2: gate bằng (hover:hover) chứ không gate bằng chiều rộng — iPad ngang
   rộng 1024px nhưng là cảm ứng. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--c-emerald); }
  .dtv-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sh-cta); }
  .dtv-btn--lg:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(26, 171, 129, .38); }
  .dtv-btn--ghost-light:hover { color: var(--c-gold); border-color: var(--c-gold); transform: translateY(-3px); }
  .dtv-btn--ghost-dark:hover { color: var(--c-teal-600); border-color: var(--c-teal-600); transform: translateY(-2px); }
  .dtv-btn--dark:hover { color: var(--c-gold); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 52, 61, .22); }
}

/* Reveal on scroll. Trạng thái mờ CHỈ áp khi JS đã chạy — nếu JS lỗi hoặc bị
   chặn, nội dung vẫn hiện bình thường thay vì kẹt ở opacity:0. */
.js-enabled [data-reveal] { opacity: 0; }
.js-enabled [data-reveal].is-revealed {
  animation: dtvUp .7s var(--ease) both;
}

/* --------------------------------------------------------------------------
   4. Header + nav + drawer mobile
   -------------------------------------------------------------------------- */
.dtv-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 52, 61, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dtv-header__bar {
  max-width: var(--wrap); margin: 0 auto;
  padding: 13px var(--pad-x);
  display: flex; align-items: center; gap: 16px 28px;
}
.dtv-brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 44px; }
.dtv-brand__mark { width: 48px; height: auto; flex: none; transition: transform .5s var(--ease); }
.dtv-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.dtv-brand__name {
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: -.01em; white-space: nowrap;
}
.dtv-brand__tag {
  font-size: 10.5px; font-weight: 400; color: var(--c-gold);
  letter-spacing: .04em; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-brand:hover .dtv-brand__mark { transform: rotate(-8deg) scale(1.08); }
}

.dtv-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.dtv-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;                       /* M3 */
  font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap; transition: color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-nav a:hover { color: var(--c-gold); }
}
.dtv-nav a[aria-current="true"] { color: var(--c-gold); }

.dtv-header__cta {
  margin-left: auto;
  background: var(--grad-cta); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  padding: 11px 20px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill); white-space: nowrap;
  transition: transform .22s, box-shadow .22s;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-header__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26, 171, 129, .35); }
}

.dtv-progress { height: 3px; background: rgba(255, 255, 255, .07); }
.dtv-progress__fill { height: 100%; width: 0; background: var(--grad-progress); }

/* Nút hamburger — KHÔNG có trong design. Design chỉ ẩn nav ở ≤920px mà không
   thay thế bằng gì, tức là mobile mất hoàn toàn điều hướng. */
.dtv-burger {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
}
.dtv-burger__box { display: block; width: 20px; height: 14px; position: relative; }
.dtv-burger__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.dtv-burger__box span:nth-child(1) { top: 0; }
.dtv-burger__box span:nth-child(2) { top: 6px; }
.dtv-burger__box span:nth-child(3) { top: 12px; }
.dtv-burger[aria-expanded="true"] .dtv-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dtv-burger[aria-expanded="true"] .dtv-burger__box span:nth-child(2) { opacity: 0; }
.dtv-burger[aria-expanded="true"] .dtv-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.dtv-drawer { position: fixed; inset: 0; z-index: 90; }
.dtv-drawer[hidden] { display: none; }
.dtv-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 20, 24, .55);
  opacity: 0; transition: opacity .3s var(--ease);
}
.dtv-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--c-teal-900);
  border-left: 1px solid rgba(242, 214, 117, .22);
  padding: 18px var(--pad-x) 32px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  overflow-y: auto;
}
.dtv-drawer[data-open] .dtv-drawer__overlay { opacity: 1; }
.dtv-drawer[data-open] .dtv-drawer__panel { transform: none; }

.dtv-drawer__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%; color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; margin-bottom: 10px;
}
.dtv-drawer__panel a:not(.dtv-btn) {
  display: flex; align-items: center;
  min-height: 52px;                        /* M3 */
  padding: 4px 2px;
  color: rgba(255, 255, 255, .86);
  font-size: 17px; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dtv-drawer__panel .dtv-btn { margin-top: 18px; }

/* Khoá cuộn nền khi drawer mở. position:fixed thay vì overflow:hidden vì
   iOS Safari bỏ qua overflow:hidden trên body. JS lưu và khôi phục scrollY. */
body[data-menu-open] {
  position: fixed; width: 100%; overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Section chung
   -------------------------------------------------------------------------- */
.dtv-section { position: relative; }

/* Anchor không bị header che. Dùng biến đo thật thay vì hardcode 88px. */
section[id], #noi-dung { scroll-margin-top: calc(var(--header-h) + 12px); }

.dtv-section__head { max-width: 780px; }
.dtv-section__head--center { text-align: center; margin-left: auto; margin-right: auto; }

.dtv-h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.14; font-weight: 800; letter-spacing: -.03em;
}
.dtv-lead {
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.7; color: var(--c-ink-66);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.dtv-hero { background: var(--c-teal-900); overflow: hidden; }
.dtv-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .16;
  mix-blend-mode: luminosity;
  animation: dtvDrift 34s ease-in-out infinite;
}
.dtv-hero__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.dtv-hero__glow--a {
  top: -18%; right: -8%; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(26, 171, 129, .34), transparent 68%);
  filter: blur(12px); animation: dtvDrift 22s ease-in-out infinite;
}
.dtv-hero__glow--b {
  bottom: -24%; left: -10%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(20, 124, 130, .3), transparent 70%);
  filter: blur(14px); animation: dtvDrift 28s ease-in-out infinite reverse;
}
.dtv-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, #00343D 32%, rgba(0, 52, 61, .74) 62%, rgba(0, 52, 61, .3) 100%);
}
.dtv-hero__inner {
  position: relative;
  padding-top: clamp(56px, 8vw, 82px);
  padding-bottom: clamp(60px, 8vw, 88px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5vw, 56px); align-items: center;
}

.dtv-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(242, 214, 117, .4); border-radius: var(--r-pill);
  padding: 7px 15px 7px 9px; margin-bottom: 24px;
}
.dtv-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-emerald); animation: dtvPulse 2.4s ease-out infinite;
}
.dtv-badge__text {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: var(--c-gold); text-transform: uppercase;
}

.dtv-hero__title {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: #fff;
}
.dtv-hero__title span.line { display: block; }
.dtv-accent { color: var(--c-gold); }

.dtv-hero__lead {
  margin-top: 22px; max-width: 520px;
  font-size: clamp(15.5px, 2vw, 17px); line-height: 1.68;
  color: rgba(255, 255, 255, .78);
}
.dtv-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.dtv-hero__actions .dtv-btn__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; animation: dtvPulse 2.4s ease-out infinite; flex: none;
}

.dtv-stats {
  display: flex; flex-wrap: wrap; gap: 30px;
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Trong <dl>, <dt> BẮT BUỘC đứng trước <dd> — viết ngược là HTML không hợp lệ.
   Thứ tự đúng về ngữ nghĩa là nhãn (dt) rồi số (dd), nhưng thiết kế cần số
   hiện lên trước, nên đảo lại bằng CSS thay vì đảo trong markup. */
.dtv-stats > div,
.dtv-expert__stats > div { display: flex; flex-direction: column-reverse; }
.dtv-stats__n { font-size: 29px; font-weight: 800; color: #fff; }
.dtv-stats__l { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

.dtv-hero-shot { position: relative; outline: none; }
.dtv-hero-shot__frame {
  position: relative; border-radius: 6px; overflow: hidden;
  clip-path: polygon(13% 0, 100% 0, 100% 84%, 86% 100%, 0 100%, 0 16%);
}
.dtv-hero-shot__img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.dtv-scan {
  position: absolute; left: 0; right: 0; top: -8%; height: 26%;
  background: linear-gradient(180deg, rgba(26, 171, 129, 0), rgba(26, 171, 129, .22) 78%, rgba(242, 214, 117, .85));
  border-bottom: 2px solid rgba(242, 214, 117, .9);
  box-shadow: 0 0 26px 6px rgba(242, 214, 117, .28);
  pointer-events: none; opacity: 0;
}
.dtv-pin {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-emerald); box-shadow: 0 0 0 4px rgba(26, 171, 129, .25);
}
.dtv-pin--1 { left: 29%; top: 40%; }
.dtv-pin--2 { left: 66%; top: 27%; background: var(--c-teal-600); box-shadow: 0 0 0 4px rgba(20, 124, 130, .25); }
.dtv-pin--3 { left: 44%; top: 60%; background: var(--c-teal-600); box-shadow: 0 0 0 4px rgba(20, 124, 130, .25); }

.dtv-anno {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border-radius: 15px; padding: 13px 16px;
  box-shadow: 0 16px 34px rgba(0, 20, 24, .24);
}
.dtv-anno__icon {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
}
.dtv-anno__icon span { width: 12px; height: 12px; transform: rotate(45deg); }
.dtv-anno__text { font-size: 15px; font-weight: 800; color: var(--c-teal-900); line-height: 1.3; }

.dtv-datecard {
  background: var(--c-cream); border-radius: 14px; padding: 15px 19px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.dtv-datecard__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--c-teal-600); text-transform: uppercase;
}
.dtv-datecard__value { font-size: 19px; font-weight: 800; margin-top: 3px; color: var(--c-teal-900); }
.dtv-datecard__note { font-size: 12.5px; color: var(--c-ink-60); margin-top: 2px; }

/* Mặc định (thiết bị cảm ứng / không hover): chú thích xếp dọc dưới ảnh, luôn
   hiện. Đây là trạng thái AN TOÀN — nội dung không bao giờ bị ẩn sau hover. */
.dtv-hero-shot__annos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dtv-hero-shot__annos .dtv-anno { box-shadow: 0 6px 18px rgba(0, 20, 24, .14); }
.dtv-hero-shot .dtv-pin { display: none; }
.dtv-hero-shot .dtv-datecard { margin-top: 12px; }

/* Chỉ thiết bị hover được mới bật lớp chú thích nổi + scan line. */
@media (hover: hover) and (pointer: fine) {
  .dtv-hero-shot__annos {
    display: block; margin-top: 0;
    position: absolute; inset: 0; pointer-events: none;
  }
  .dtv-hero-shot__annos .dtv-anno {
    position: absolute; pointer-events: auto;
    box-shadow: 0 16px 34px rgba(0, 20, 24, .24);
    opacity: 0; transform: translateY(12px) scale(.94);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .dtv-anno--1 { top: 6%; left: -12px; max-width: 252px; transition-delay: .05s; }
  .dtv-anno--2 { top: 10%; right: -12px; max-width: 230px; transition-delay: .18s; }
  .dtv-anno--3 { top: 46%; right: -12px; max-width: 230px; transition-delay: .31s; }

  .dtv-hero-shot .dtv-pin {
    display: block; opacity: 0; transform: scale(.3);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .dtv-hero-shot .dtv-datecard {
    position: absolute; left: -14px; bottom: 26px;
    max-width: 264px; margin-top: 0;
  }
  .dtv-hero-shot:hover .dtv-anno,
  .dtv-hero-shot:focus-within .dtv-anno,
  .dtv-hero-shot:hover .dtv-pin,
  .dtv-hero-shot:focus-within .dtv-pin { opacity: 1; transform: none; }
  .dtv-hero-shot:hover .dtv-scan,
  .dtv-hero-shot:focus-within .dtv-scan { opacity: 1; animation: dtvScan 3.4s cubic-bezier(.4, 0, .5, 1) infinite; }
}

/* --------------------------------------------------------------------------
   7. Giới thiệu
   -------------------------------------------------------------------------- */
.dtv-intro { background: var(--c-cream); }
.dtv-intro__inner {
  padding-top: clamp(60px, 9vw, 96px);
  padding-bottom: clamp(56px, 8vw, 88px);
}
.dtv-intro__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(36px, 5vw, 60px); align-items: center;
}
.dtv-intro__text { font-size: clamp(15.5px, 2vw, 17px); line-height: 1.75; color: var(--c-ink-72); max-width: 520px; margin-top: 20px; }

.dtv-creed {
  margin-top: 26px; position: relative; overflow: hidden;
  background: var(--c-teal-900); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 34px);
}
.dtv-creed__ghost {
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px;
  border: 1px solid rgba(242, 214, 117, .2);
  transform: rotate(45deg); pointer-events: none;
}
.dtv-creed__head { position: relative; display: flex; align-items: center; gap: 12px; }
.dtv-creed__head .dtv-diamond { width: 14px; height: 14px; background: var(--c-gold); }
.dtv-creed__head .dtv-eyebrow { letter-spacing: .2em; }
.dtv-creed__list { position: relative; margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.dtv-creed__item { display: flex; gap: 14px; align-items: flex-start; }
.dtv-creed__tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-green); display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.dtv-creed__dash {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .4); position: relative; margin-top: 1px;
}
.dtv-creed__dash::after {
  content: ''; position: absolute; left: 5px; top: 9.5px;
  width: 10px; height: 1.8px; background: rgba(255, 255, 255, .7);
}
.dtv-creed__item p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.dtv-creed__item--lead p { font-size: 15.5px; font-weight: 600; color: #fff; }

.dtv-intro__figure { position: relative; }
.dtv-intro__img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-lg); display: block; }
.dtv-floatcard {
  position: absolute; right: -10px; bottom: -16px;
  background: var(--c-teal-900); color: #fff;
  border-radius: 14px; padding: 16px 20px; max-width: 240px;
  box-shadow: var(--sh-float);
}
.dtv-floatcard__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--c-gold); text-transform: uppercase;
}
.dtv-floatcard__value { font-size: 16px; font-weight: 800; margin-top: 3px; line-height: 1.35; }

.dtv-pillars {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px;
}
.dtv-pillar {
  background: #fff; border: 1px solid rgba(0, 52, 61, .1);
  border-radius: var(--r-md); padding: 26px 24px;
}
.dtv-pillar__title { font-size: 19px; font-weight: 800; margin-top: 18px; letter-spacing: -.01em; }
.dtv-pillar p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: rgba(0, 52, 61, .72); }

/* --------------------------------------------------------------------------
   8. Thể thức
   -------------------------------------------------------------------------- */
.dtv-format { background: #fff; }
.dtv-format__inner {
  padding-top: clamp(60px, 8vw, 88px);
  padding-bottom: clamp(64px, 8vw, 92px);
}
.dtv-format__grid {
  margin-top: 36px; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px;
}
.dtv-step {
  background: var(--c-cream-2); border: 1px solid rgba(0, 52, 61, .1);
  border-radius: 18px; padding: 28px 26px;
}
.dtv-step__n { font-size: 34px; font-weight: 800; color: var(--c-teal-600); letter-spacing: -.03em; }
.dtv-step__title { font-size: 18px; font-weight: 800; margin-top: 8px; letter-spacing: -.015em; color: var(--c-teal-900); }
.dtv-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--c-ink-66); }

.dtv-credits {
  margin-top: 16px; background: var(--c-cream-2);
  border: 1px solid rgba(0, 52, 61, .1); border-radius: var(--r-md);
  padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
}
.dtv-credits span:not(.dtv-eyebrow) { font-size: 14.5px; }

.dtv-ctabar {
  margin-top: 16px; background: var(--c-teal-900); border-radius: 18px;
  padding: 24px 28px; display: flex; flex-wrap: wrap;
  gap: 16px 24px; align-items: center; justify-content: space-between;
}
.dtv-ctabar__text {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(17px, 2.4vw, 21px); font-weight: 600; color: #fff;
  letter-spacing: -.01em; line-height: 1.35;
}
.dtv-ctabar__text .dtv-diamond { width: 16px; height: 16px; background: var(--c-gold); }

/* --------------------------------------------------------------------------
   9. Lịch trình (timeline)
   -------------------------------------------------------------------------- */
.dtv-schedule {
  background: linear-gradient(180deg, #F1F5F3, #E7EEEB);
  overflow: hidden;
}
.dtv-schedule__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .14; mix-blend-mode: luminosity; pointer-events: none;
}
.dtv-schedule__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; }
.dtv-schedule__glow--a {
  top: -16%; right: -6%;
  background: radial-gradient(circle, rgba(26, 171, 129, .12), transparent 70%);
  animation: dtvDrift 30s ease-in-out infinite;
}
.dtv-schedule__glow--b {
  bottom: -14%; left: -8%;
  background: radial-gradient(circle, rgba(242, 214, 117, .16), transparent 70%);
  animation: dtvDrift 34s ease-in-out infinite reverse;
}
.dtv-schedule__inner {
  position: relative;
  padding-top: clamp(60px, 8vw, 88px);
  padding-bottom: clamp(70px, 9vw, 96px);
}
.dtv-schedule__h2 {
  font-size: clamp(28px, 4.6vw, 46px); font-weight: 800;
  letter-spacing: -.028em; color: var(--c-teal-900); line-height: 1.1;
}
.dtv-schedule__legend {
  display: flex; justify-content: center; gap: 14px 26px;
  margin-top: 22px; flex-wrap: wrap;
}
.dtv-legend {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
}
.dtv-legend__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dtv-legend--online { color: #0E7A5A; }
.dtv-legend--online .dtv-legend__dot { background: var(--c-emerald); }
.dtv-legend--offline { color: #8A6A00; }
.dtv-legend--offline .dtv-legend__dot { background: var(--c-gold); box-shadow: 0 0 0 1px rgba(0, 52, 61, .25); }

.dtv-tl { position: relative; max-width: 1040px; margin: 24px auto 0; }
.dtv-tl__axis {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(26, 171, 129, .55), rgba(242, 214, 117, .55));
  border-radius: 2px; z-index: 1; pointer-events: none;
}
.dtv-tl__cols {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch;
}
.dtv-tl__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dtv-tl__col--online { align-items: flex-end; gap: 14px; }
.dtv-tl__col--offline { align-items: flex-start; gap: 16px; justify-content: space-around; padding-top: 10px; }
.dtv-tl__item { position: relative; width: 100%; max-width: 430px; }
.dtv-tl__conn { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; }
.dtv-tl__col--online .dtv-tl__conn { right: -32px; width: 32px; background: rgba(26, 171, 129, .6); }
.dtv-tl__col--offline .dtv-tl__conn { left: -32px; width: 32px; background: rgba(242, 214, 117, .65); }

.dtv-tl__card {
  border-radius: var(--r-md); box-shadow: var(--sh-card);
  transition: transform .26s var(--ease), box-shadow .26s;
}
.dtv-tl__card--online {
  text-align: right; background: #fff;
  border: 1px solid rgba(26, 171, 129, .28); border-right: 4px solid var(--c-emerald);
  padding: 14px 18px;
}
.dtv-tl__card--offline {
  background: var(--c-teal-900);
  border: 1px solid rgba(242, 214, 117, .4); border-left: 4px solid var(--c-gold);
  padding: 16px 18px; box-shadow: 0 14px 34px rgba(0, 52, 61, .18);
}
@media (hover: hover) and (pointer: fine) {
  .dtv-tl__card--online:hover { transform: translateX(-5px); box-shadow: 0 16px 36px rgba(0, 52, 61, .15); }
  .dtv-tl__card--offline:hover { transform: translateX(5px); box-shadow: 0 18px 40px rgba(0, 52, 61, .3); }
}
.dtv-tl__meta { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.dtv-tl__date { font-size: 12.5px; font-weight: 800; color: #0E7A5A; }
.dtv-tl__no { font-size: 24px; font-weight: 800; color: rgba(26, 171, 129, .35); line-height: .9; letter-spacing: -.03em; }
.dtv-tl__card--online p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: rgba(0, 52, 61, .82); }
.dtv-tl__qmeta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dtv-tl__q { font-size: 15px; font-weight: 800; color: #fff; }
.dtv-tl__qdate { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--c-gold); }
.dtv-tl__points { margin: 11px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.dtv-tl__points li { display: flex; gap: 8px; }
.dtv-tl__points b { flex: none; color: var(--c-gold); font-weight: 800; font-size: 11.5px; line-height: 1.55; }
.dtv-tl__points span { font-size: 13.5px; line-height: 1.55; color: rgba(255, 248, 235, .9); }

/* --------------------------------------------------------------------------
   10. Đồng hành
   -------------------------------------------------------------------------- */
.dtv-expert { background: #fff; }
.dtv-expert__inner {
  padding-top: clamp(60px, 8vw, 88px);
  padding-bottom: clamp(64px, 8vw, 92px);
}
.dtv-expert__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 48px); align-items: stretch;
}
.dtv-expert__figure { position: relative; align-self: stretch; min-height: 440px; }
.dtv-expert__img {
  width: 100%; height: 100%; min-height: 440px;
  object-fit: cover;
  /* Ảnh đã được crop sẵn ở tools/optimize-assets.sh cho chuyên gia nằm giữa
     khung, nên không cần lệch object-position như design cũ (`center 22%`,
     vốn chỉnh cho tấm ảnh trước đó). */
  object-position: center;
  border-radius: 6px;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 93% 100%, 0 100%);
  display: block;
}
.dtv-expert__badge {
  position: absolute; right: -10px; bottom: -18px;
  background: var(--c-teal-900); color: #fff;
  border-radius: 14px; padding: 14px 18px; box-shadow: var(--sh-float);
}
.dtv-expert__name { font-size: clamp(40px, 6vw, 56px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.dtv-expert__role { margin-top: 10px; font-size: 16.5px; font-weight: 600; color: var(--c-teal-600); }
.dtv-expert__bio { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--c-ink-72); max-width: 540px; }
.dtv-expert__stats {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 22px 40px; padding: 22px 0;
  border-top: 1px solid rgba(0, 52, 61, .12); border-bottom: 1px solid rgba(0, 52, 61, .12);
}
.dtv-expert__stats b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dtv-expert__stats span { font-size: 12.5px; color: rgba(0, 52, 61, .70); }
.dtv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.dtv-chips li {
  font-size: 13px; font-weight: 600; background: #F4F6F5;
  color: var(--c-teal-900); padding: 8px 13px; border-radius: 8px;
}
.dtv-expert__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.dtv-coord {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(0, 52, 61, .12);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.dtv-coord__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; object-position: top center; background: #F4F6F5; flex: none;
}
.dtv-coord__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: rgba(0, 52, 61, .68); text-transform: uppercase;
}
.dtv-coord__name { font-size: 16.5px; font-weight: 700; margin-top: 2px; }
.dtv-coord__name small { font-weight: 400; color: rgba(0, 52, 61, .68); font-size: 14px; }

/* --------------------------------------------------------------------------
   11. Chi phí
   -------------------------------------------------------------------------- */
.dtv-price { background: var(--c-cream-3); }
.dtv-price__inner { padding-top: clamp(60px, 8vw, 84px); padding-bottom: clamp(60px, 8vw, 84px); }
.dtv-price__card {
  margin-top: 40px; background: var(--c-teal-900);
  border-radius: var(--r-xl); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.dtv-price__left { position: relative; padding: clamp(34px, 5vw, 46px) clamp(28px, 4vw, 44px); overflow: hidden; }
.dtv-price__glow {
  position: absolute; bottom: -40%; right: -20%; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 171, 129, .28), transparent 70%);
  animation: dtvDrift 24s ease-in-out infinite; pointer-events: none;
}
.dtv-price__body { position: relative; color: #fff; }
.dtv-price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 16px; }
.dtv-price__amount b {
  font-size: clamp(40px, 7vw, 54px); font-weight: 800;
  letter-spacing: -.035em; white-space: nowrap;
}
.dtv-price__amount b small { font-size: .5em; font-weight: 700; }
.dtv-price__per { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.dtv-price__note {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  background: rgba(26, 171, 129, .16); border: 1px solid rgba(26, 171, 129, .4);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-size: 13.5px; font-weight: 600; color: #DFF3EA;
}
.dtv-price__note i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-emerald); }
.dtv-price__rows { margin-top: 20px; }
.dtv-price__row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14.5px; padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dtv-price__row:last-child { border-bottom: 0; }
.dtv-price__row dt { color: rgba(255, 255, 255, .65); }
.dtv-price__row dd { margin: 0; font-weight: 700; white-space: nowrap; }
.dtv-price__row dd.is-gold { color: var(--c-gold); }
.dtv-price__cta { margin-top: 24px; }

.dtv-price__right { background: #fff; padding: clamp(34px, 5vw, 46px) clamp(28px, 4vw, 44px); }
.dtv-incl { margin-top: 20px; display: flex; flex-direction: column; gap: 13px; padding: 0; list-style: none; }
.dtv-incl li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.dtv-incl__tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #DFF3EA; color: #0E7A5A;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; margin-top: 1px;
}
.dtv-price__excl {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(0, 52, 61, .1);
  font-size: 13.5px; line-height: 1.6; color: var(--c-ink-60);
}

/* --------------------------------------------------------------------------
   12. Đăng ký + form
   -------------------------------------------------------------------------- */
.dtv-signup { background: var(--c-cream); }
.dtv-signup__inner { padding-top: clamp(60px, 8vw, 80px); padding-bottom: clamp(72px, 9vw, 96px); }
.dtv-signup__card {
  background: var(--c-teal-900); border-radius: 22px; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.dtv-signup__left { padding: clamp(34px, 5vw, 48px) clamp(28px, 4vw, 44px); position: relative; }
.dtv-signup__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: .22;
}
.dtv-signup__body { position: relative; }
.dtv-signup__h2 {
  margin-top: 14px; font-size: clamp(28px, 4.2vw, 38px); line-height: 1.12;
  font-weight: 800; letter-spacing: -.025em; color: #fff;
}
.dtv-signup__lead {
  margin-top: 18px; font-size: 16px; line-height: 1.65;
  color: rgba(255, 255, 255, .75); max-width: 420px;
}
.dtv-contact { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; padding: 0; list-style: none; }
.dtv-contact li { display: flex; align-items: center; gap: 12px; }
.dtv-contact__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center; color: var(--c-gold);
}
.dtv-contact a, .dtv-contact span { font-size: 15.5px; color: #fff; }
.dtv-contact a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .dtv-contact a:hover { color: var(--c-gold); }
}

.dtv-signup__right { background: #fff; padding: clamp(30px, 4vw, 40px) clamp(24px, 4vw, 40px) clamp(34px, 5vw, 44px); }

.dtv-fieldset { border: 0; margin: 0; padding: 0; }
.dtv-fieldset + .dtv-fieldset { margin-top: 22px; }
.dtv-fieldset__legend {
  padding: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--c-teal-600); text-transform: uppercase;
}
.dtv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dtv-field { display: flex; flex-direction: column; gap: 6px; }
.dtv-field--full { grid-column: 1 / -1; }
.dtv-field__label { font-size: 13px; font-weight: 600; }

.dtv-input, .dtv-textarea {
  border-radius: 10px; border: 1px solid rgba(0, 52, 61, .16);
  background: #fff; color: var(--c-teal-900);
  font-size: 14.5px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.dtv-input { height: 46px; padding: 0 14px; }
.dtv-textarea { padding: 12px 14px; resize: vertical; line-height: 1.55; }
.dtv-input:focus-visible, .dtv-textarea:focus-visible {
  border-color: var(--c-teal-600);
  box-shadow: 0 0 0 3px rgba(20, 124, 130, .12);
  outline: none;
}
.dtv-input:user-invalid, .dtv-textarea:user-invalid { border-color: #C0392B; }

.dtv-topics { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.dtv-topic { border: 1px solid rgba(0, 52, 61, .14); border-radius: var(--r-sm); overflow: hidden; }
.dtv-topic__label {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; min-height: 48px;      /* M3 */
  cursor: pointer; font-size: 14.5px;
}
.dtv-topic__label input { width: 18px; height: 18px; accent-color: var(--c-teal-600); cursor: pointer; flex: none; }
.dtv-topic__q { padding: 0 15px 14px; }
.dtv-topic__q[hidden] { display: none; }
/* Khong co JS thi khong ai bo duoc thuoc tinh `hidden`, nen phai ep hien:
   tick chu de xong ma khong go duoc cau hoi la mat du lieu nguoi dung. */
html:not(.js-enabled) .dtv-topic__q[hidden] { display: block; }
.dtv-topic__q .dtv-textarea { width: 100%; background: #F7F7F5; border-radius: var(--r-xs); font-size: 14px; }
.js-enabled .dtv-topic__q:not([hidden]) { animation: dtvUp .3s var(--ease) both; }

/* Link chính sách nằm NGOÀI <label>: lồng <a> trong <label> khiến Safari có
   thể vừa mở link vừa lật checkbox trong cùng một cú chạm. Tách ra rồi nối
   bằng for/id, và cho link đủ vùng chạm 44px vì đây đúng là link mà cơ quan
   quản lý dữ liệu sẽ kiểm tra đầu tiên. */
.dtv-consent {
  display: flex; align-items: center; gap: 11px;
  margin-top: 20px; padding: 12px 14px;
  background: var(--c-cream-2);
  border: 1px solid rgba(0, 52, 61, .12);
  border-radius: var(--r-sm);
  font-size: 14px; color: var(--c-teal-900);
  min-height: 44px;                            /* M3 */
  transition: border-color .2s, background .2s;
}
.dtv-consent:focus-within { border-color: var(--c-teal-600); background: #fff; }
.dtv-consent input {
  width: 20px; height: 20px; flex: none; cursor: pointer;
  accent-color: var(--c-teal-600);
}
/* Nhãn và link nằm liền nhau thành một câu, không tách rời:
   `<label>Tôi đồng ý với</label> <a>Chính sách bảo mật</a>` */
.dtv-consent label { cursor: pointer; }
.dtv-consent a {
  color: var(--c-teal-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(20, 124, 130, .35);
  transition: text-decoration-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-consent a:hover { text-decoration-color: currentColor; }
}

/* Honeypot. KHÔNG dùng display:none — một số bot bỏ qua field ẩn kiểu đó,
   trong khi trường đẩy ra ngoài màn hình vẫn bị chúng điền vào. */
.dtv-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.dtv-submit { margin-top: 22px; width: 100%; padding: 17px; font-size: 15px; letter-spacing: .04em; }
.dtv-submit[disabled] { opacity: .6; cursor: progress; }
.dtv-form__note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: rgba(0, 52, 61, .68); text-align: center; }
.dtv-form__status { margin-top: 12px; font-size: 14px; line-height: 1.55; text-align: center; }
/* KHÔNG dùng display:none khi rỗng. Vùng aria-live phải có mặt trong cây
   render từ trước thì trình đọc màn hình mới thông báo nội dung mới; nếu nó
   vừa xuất hiện vừa có chữ thì NVDA/JAWS thường bỏ qua. */
.dtv-form__status:empty { margin-top: 0; }
.dtv-form__status[data-state="error"] { color: #A33; }

/* Khối liên hệ dự phòng trong <noscript> và khi gửi biểu mẫu gặp trục trặc. */
.dtv-form__fallback {
  margin: 0; padding: 14px 16px;
  background: #FDF3DC; border: 1px solid #F0DCA8; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.6; color: #7A5A00;
}
.dtv-form__fallback a { color: #7A5A00; font-weight: 700; text-decoration: underline; }

.dtv-success {
  min-height: 480px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 16px;
}
.dtv-success[hidden] { display: none; }
.dtv-success__tick {
  width: 74px; height: 74px; border-radius: 50%; background: var(--c-emerald);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 700;
  animation: dtvPop .6s var(--ease) both;
}
.dtv-success h3 { margin-top: 6px; font-size: 26px; font-weight: 800; }
.dtv-success p { font-size: 15.5px; line-height: 1.7; color: rgba(0, 52, 61, .7); max-width: 380px; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.dtv-footer { position: relative; background: var(--c-teal-900); color: rgba(255, 255, 255, .6); overflow: hidden; }
.dtv-footer__pattern {
  position: absolute; right: -70px; top: -50px;
  display: grid; grid-template-columns: repeat(3, 56px); gap: 20px;
  opacity: .28; pointer-events: none;
}
/* Hoạ tiết chỉ là nền trang trí. Ở khổ hẹp nó chen vào nội dung nên ẩn đi. */
@media (max-width: 820px) { .dtv-footer__pattern { display: none; } }
.dtv-footer__pattern span { width: 60px; height: 60px; transform: rotate(45deg); border-radius: 6px; }
/* Ba cột đều nhau thay vì space-between: bản trước dồn brand sang trái, nút PDF
   sang phải và để trống một mảng lớn ở giữa. */
.dtv-footer__main {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: 52px var(--pad-x) 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 36px 40px; align-items: start;
}
.dtv-footer__col { min-width: 0; }

.dtv-footer__brand { display: flex; align-items: center; gap: 14px; }
.dtv-footer__brand svg { width: 64px; height: auto; flex: none; }
.dtv-footer__name { font-size: 16.5px; font-weight: 800; color: #fff; line-height: 1.3; }
.dtv-footer__tag { font-size: 13px; margin-top: 3px; color: rgba(255, 255, 255, .62); }

.dtv-footer__label {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 14px;
}

/* gap:0 + min-height trên <a>: giữ vùng chạm 44px mà không cộng dồn thêm
   khoảng cách, nếu không ba dòng liên hệ bị giãn ra rất thưa. */
.dtv-footer__contact { display: flex; flex-direction: column; gap: 0; padding: 0; list-style: none; }
.dtv-footer__contact li { display: flex; align-items: center; gap: 12px; }
.dtv-footer__contact a {
  color: #fff; font-size: 15px;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .2s;
}
.dtv-footer__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .09); color: var(--c-gold);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-footer__contact a:hover { color: var(--c-gold); }
}

.dtv-footer__pdf {
  display: inline-flex; align-items: center; gap: 11px;
  color: #fff; font-weight: 600; font-size: 14.5px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill);
  padding: 13px 22px; min-height: 44px;
  transition: background .2s, border-color .2s, transform .2s;
}
@media (hover: hover) and (pointer: fine) {
  .dtv-footer__pdf:hover {
    color: #fff; background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5); transform: translateY(-2px);
  }
}
.dtv-footer__bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); }
.dtv-footer__bottom > div {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: rgba(255, 255, 255, .62);
}
.dtv-footer__bottom a {
  color: rgba(255, 255, 255, .55);
  display: inline-flex; align-items: center; min-height: 44px;   /* M3 */
}
@media (hover: hover) and (pointer: fine) {
  .dtv-footer__bottom a:hover { color: var(--c-gold); }
}

/* --------------------------------------------------------------------------
   14. Trang phụ (chính sách bảo mật, 404)
   -------------------------------------------------------------------------- */
.dtv-page { background: #fff; }
.dtv-page__inner { padding-top: clamp(48px, 7vw, 76px); padding-bottom: clamp(56px, 8vw, 88px); max-width: 780px; }
.dtv-page h1 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 800; letter-spacing: -.028em; line-height: 1.15; }
.dtv-page h2 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; letter-spacing: -.015em; margin-top: 36px; }
.dtv-page p, .dtv-page li { font-size: 15.5px; line-height: 1.75; color: var(--c-ink-72); }
.dtv-page p { margin-top: 12px; }
.dtv-page ul { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.dtv-page__updated { margin-top: 10px; font-size: 13.5px; color: var(--c-ink-60); }
.dtv-page__back { margin-top: 40px; }

/* --------------------------------------------------------------------------
   15. Keyframes
   Design có 15 keyframes. Ở đây giữ những cái thật sự dùng tới; dtvSlideL của
   drawer admin (đã cắt) được tái dùng làm chuyển động drawer mobile.
   -------------------------------------------------------------------------- */
@keyframes dtvUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dtvPop  { 0% { opacity: 0; transform: scale(.82); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dtvDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4%,-5%,0) scale(1.12); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes dtvPulse { 0% { box-shadow: 0 0 0 0 rgba(26,171,129,.55); } 70% { box-shadow: 0 0 0 12px rgba(26,171,129,0); } 100% { box-shadow: 0 0 0 0 rgba(26,171,129,0); } }
@keyframes dtvScan { 0% { top: -8%; opacity: 0; } 12% { opacity: .95; } 70% { opacity: .95; } 100% { top: 108%; opacity: 0; } }

/* --------------------------------------------------------------------------
   16. Responsive
   Breakpoint lấy từ design: 920 / 820 / 760 / 560.
   Lưu ý: 3 selector responsive trong design (.dtv-thethuc-grid, .dtv-tl-map,
   .dtv-dot) là code chết — không có phần tử nào mang class đó — nên phần dưới
   được viết lại theo cấu trúc thật, không chép nguyên.
   -------------------------------------------------------------------------- */

/* ≤920px — nav desktop nhường chỗ cho hamburger */
@media (max-width: 920px) {
  .dtv-nav { display: none; }
  .dtv-header__cta { display: none; }
  .dtv-burger { display: inline-flex; }
}

/* ≤820px — lưới 2 cột lớn về 1 cột */
@media (max-width: 820px) {
  .dtv-price__card,
  .dtv-signup__card { grid-template-columns: 1fr; }
  .dtv-expert__figure, .dtv-expert__img { min-height: 340px; }
  .dtv-expert__badge { right: 8px; bottom: -14px; }
  .dtv-floatcard { right: 0; }
}

/* ≤760px — timeline về 1 cột, trục dời sang trái */
@media (max-width: 760px) {
  .dtv-tl__axis { left: 18px; transform: none; }
  .dtv-tl__cols { grid-template-columns: 1fr; padding-left: 38px; }
  .dtv-tl__spacer { display: none; }
  .dtv-tl__col { align-items: stretch; gap: 14px; }
  .dtv-tl__col--offline { justify-content: flex-start; padding-top: 14px; }
  .dtv-tl__item { max-width: none; }
  .dtv-tl__card--online { text-align: left; }
  .dtv-tl__meta { justify-content: flex-start; flex-direction: row-reverse; }
  .dtv-tl__col--online .dtv-tl__conn,
  .dtv-tl__col--offline .dtv-tl__conn { left: -20px; right: auto; width: 20px; }
}

/* ≤560px — form về 1 cột, chữ input đủ lớn để iOS không tự zoom */
@media (max-width: 560px) {
  .dtv-form-grid { grid-template-columns: 1fr; }
  /* M5 — iOS Safari tự phóng to trang khi focus vào ô có font-size < 16px.
     Phải liệt kê cả .dtv-topic__q .dtv-textarea: selector đó có specificity
     cao hơn nên quy tắc 14px của nó sẽ thắng nếu chỉ ghi .dtv-textarea. */
  .dtv-input,
  .dtv-textarea,
  .dtv-topic__q .dtv-textarea { font-size: 16px; }
  .dtv-ctabar { flex-direction: column; align-items: flex-start; }
  .dtv-ctabar .dtv-btn { width: 100%; }
  .dtv-stats { gap: 20px 30px; }
  .dtv-hero__actions .dtv-btn { width: 100%; }
  .dtv-footer__main { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   17. prefers-reduced-motion
   Design chỉ tắt animation-duration; transition vẫn chạy. Ở đây tắt cả hai và
   cả smooth scroll, đồng thời ép mọi phần tử reveal hiện ra.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js-enabled [data-reveal] { opacity: 1 !important; }
  .dtv-anno, .dtv-pin { opacity: 1 !important; transform: none !important; }
}