/* =========================================================
   TT Genesis — landing CSS
   Màu & font: TT Genesis Design System v3
   Style: kính mờ, card nổi, nút viên thuốc (ảnh mẫu glass)
   ========================================================= */

/* 01 · TOKENS ------------------------------------------------ */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: oklch(97.5% 0.014 75);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{ margin: 0; }

.ttg{
  --ink: oklch(30% 0.07 240);
  --ink-soft: oklch(44% 0.045 238);
  --water-mist: oklch(95.5% 0.015 225);
  --water-pale: oklch(88% 0.035 228);
  --water: oklch(50% 0.10 240);
  --water-deep: oklch(27% 0.055 245);
  --water-abyss: oklch(21% 0.045 250);
  --light-paper: oklch(97.5% 0.014 75);
  --light-sand: oklch(92% 0.03 75);
  --light-glow: oklch(82% 0.11 75);
  --light-copper: oklch(64% 0.11 50);
  --light-copper-text: oklch(50% 0.10 45);
  --on-deep: oklch(96% .012 75);
  --on-deep-soft: oklch(82% .03 230);
  --aura: oklch(83% .045 250);
  --lumina: oklch(86% .045 60);
  --tidal: oklch(77% .075 305);
  --line: color-mix(in oklch, var(--ink) 12%, transparent);

  --glass-blur: 18px;
  --glass-light: color-mix(in oklch, var(--light-paper) 80%, transparent);
  --glass-edge: rgb(255 255 255 / .42);
  --glass-edge-deep: rgb(255 255 255 / .18);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .30), rgb(255 255 255 / 0) 42%);

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Mulish', 'Segoe UI', system-ui, sans-serif;

  --radius: 20px;
  --radius-in: 14px;
  --pill: 999px;
  --max: 1230px;
  --pad: max(16px, calc(clamp(16px, 3vw, 32px) - 15px));
  --sec: clamp(20px, 2.5vw, 36px);
  --gap: clamp(12px, 1.4vw, 16px);
  --block: clamp(20px, 2.6vw, 32px);
  --header-h: 68px;
  --ease: cubic-bezier(.16,1,.3,1);

  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--light-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* 02 · RESET (specificity 0) -------------------------------- */
.ttg :where(*, *::before, *::after){ box-sizing: border-box; }
.ttg :where(h1,h2,h3,p,ul,ol,li,figure,dl,dd){ margin: 0; padding: 0; }
.ttg :where(ul,ol){ list-style: none; }
.ttg :where(img){ display: block; max-width: 100%; height: auto; }
.ttg :where(button, input, select){ font: inherit; color: inherit; }
.ttg :where(button){ background: none; border: 0; padding: 0; cursor: pointer; }
.ttg :where(a){ color: inherit; text-decoration: none; }

/* 03 · BASE ------------------------------------------------- */
.ttg-wrap{ width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.ttg-sec{ padding-block: var(--sec); }

/* Nền trang liền mạch (design system §2–3: Nước & Ánh sáng) ----
   Không chia màu theo section: một nền chung chạy suốt trang,
   chuyển mượt giấy ấm ↔ sương nước, điểm các quầng sáng lớn
   (đèn tháp = glow ấm, mặt nước = xanh nhạt) xen kẽ trái/phải,
   phủ thêm vân gợn nước rất mờ. Section để trong suốt. */
.ttg{ --horizon: linear-gradient(90deg, #181725, #282B5C 30%, #605A8C 55%, #C0A0A5 78%, #C8906B); }
.ttg main{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(38% 5% at 92% 6%,  color-mix(in oklch, var(--light-glow) 30%, transparent), transparent 70%),
    radial-gradient(42% 6% at 4% 16%,  color-mix(in oklch, var(--water-pale) 75%, transparent), transparent 70%),
    radial-gradient(36% 5% at 96% 29%, color-mix(in oklch, var(--light-copper) 16%, transparent), transparent 70%),
    radial-gradient(44% 6% at 2% 42%,  color-mix(in oklch, var(--water-pale) 70%, transparent), transparent 70%),
    radial-gradient(38% 5% at 94% 55%, color-mix(in oklch, var(--light-glow) 26%, transparent), transparent 70%),
    radial-gradient(42% 6% at 6% 68%,  color-mix(in oklch, var(--water-pale) 70%, transparent), transparent 70%),
    radial-gradient(36% 5% at 92% 81%, color-mix(in oklch, var(--light-copper) 14%, transparent), transparent 70%),
    radial-gradient(44% 6% at 4% 93%,  color-mix(in oklch, var(--water-pale) 75%, transparent), transparent 70%),
    linear-gradient(180deg,
      var(--light-paper) 0%,
      var(--water-mist) 18%,
      var(--light-paper) 34%,
      var(--water-mist) 50%,
      var(--light-paper) 66%,
      var(--water-mist) 82%,
      var(--light-paper) 100%);
}
/* Vân gợn nước: các vòng đồng tâm rất mờ, lặp theo nhịp dọc trang */
.ttg main::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 100% 20%, transparent 0 46px, color-mix(in oklch, var(--water) 7%, transparent) 46px 47px),
    repeating-radial-gradient(circle at 0% 62%,   transparent 0 46px, color-mix(in oklch, var(--light-copper) 8%, transparent) 46px 47px);
  -webkit-mask-image: radial-gradient(40% 16% at 100% 20%, #000, transparent 70%), radial-gradient(40% 16% at 0% 62%, #000, transparent 70%);
          mask-image: radial-gradient(40% 16% at 100% 20%, #000, transparent 70%), radial-gradient(40% 16% at 0% 62%, #000, transparent 70%);
}
.ttg main > *{ position: relative; }

.ttg h1, .ttg h2, .ttg h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.ttg h1{ font-size: clamp(34px, 5vw, 64px); line-height: 1.14; letter-spacing: -0.02em; }
.ttg h2{ font-size: clamp(30px, 4vw, 50px); line-height: 1.14; letter-spacing: -0.015em; }
/* H1, H2 dùng màu đồng (copper) để tách khỏi chữ nội dung màu navy */
.ttg h1, .ttg h2{ color: var(--light-copper-text); }
.ttg h3{ font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
.ttg p{ text-wrap: pretty; }
.ttg strong{ font-weight: 700; }

.ttg-title{ text-align: center; margin-bottom: var(--block); }

/* Tiêu đề section — một kiểu cho toàn trang: số nhỏ trên, H2 căn giữa */
.ttg-head{ display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: var(--block); }
.ttg-idx{ font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); line-height: 1; color: var(--ink-soft); opacity: .6; order: -1; font-variant-numeric: lining-nums; }

/* H3 tiểu mục — căn giữa */
.ttg-sub{ text-align: center; margin-bottom: 16px; }

/* Đoạn văn căn giữa — dùng chung */
.ttg-lead{ max-width: 80ch; margin: 0 auto var(--block); text-align: center; font-size: clamp(16px, 1.3vw, 18px); }
.ttg-note{ max-width: 80ch; margin: var(--block) auto 0; text-align: center; font-style: italic; color: var(--ink-soft); }

/* Card nền trắng (không đặt trên ảnh) */
.ttg-card{ background: #fff; border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent); border-radius: var(--radius); }
.ttg-card--pad{ padding: clamp(20px, 2.6vw, 32px); }

/* Card tối */
.ttg-dark{ background: var(--water-deep); color: var(--on-deep); border-radius: var(--radius); }

/* Ảnh — giữ tỉ lệ, không crop, không box-shadow */
.ttg-fig{ border-radius: var(--radius); overflow: hidden; background: var(--water-pale); box-shadow: none; }
.ttg-fig img{ width: 100%; height: auto; box-shadow: none; }
.ttg-zoom{ display: block; width: 100%; }
.ttg-zoom img{ transition: transform .7s var(--ease); }
.ttg-zoom:hover img{ transform: scale(1.015); }
.ttg-zoom:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 3px; border-radius: var(--radius); }
.ttg-block{ margin-bottom: var(--block); }

/* Hàng ảnh cao bằng nhau, không crop: flex-grow theo tỉ lệ (--r = rộng/cao) */
.ttg-row{ display: flex; gap: var(--gap); align-items: flex-start; }
.ttg-row > .ttg-fig{ flex: var(--r) 1 0; min-width: 0; }

/* Lưới ảnh cùng tỉ lệ — ô bằng nhau */
.ttg-grid{ display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0,1fr)); gap: var(--gap); }

/* Nút viên thuốc + vòng mũi tên */
.ttg-btn{ display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.ttg-btn__label{ display: inline-flex; align-items: center; height: 48px; padding-inline: 22px 26px; border-radius: 20px; background: var(--light-copper); color: var(--water-abyss); transition: background .3s var(--ease); }
.ttg-btn__icon{ display: grid; place-items: center; width: 48px; height: 48px; margin-left: -10px; border-radius: 20px; background: var(--water-abyss); color: var(--on-deep); transition: transform .4s var(--ease); }
.ttg-btn__icon svg{ width: 16px; height: 16px; }
.ttg-btn:hover .ttg-btn__label{ background: var(--light-glow); }
.ttg-btn:hover .ttg-btn__icon{ transform: translateX(3px); }
.ttg-btn:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 3px; border-radius: 20px; }

/* Tabs viên thuốc (WAI-ARIA) */
.ttg-tabs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; margin: 0 auto var(--block); width: fit-content; max-width: 100%; border-radius: var(--pill); background: #fff; border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent); }
.ttg-tab{ min-height: 44px; padding-inline: 18px; border-radius: var(--pill); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--ink-soft); transition: background .3s var(--ease), color .3s var(--ease); }
.ttg-tab:hover{ color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); }
.ttg-tab[aria-selected="true"]{ background: var(--ink); color: var(--on-deep); }
.ttg-tab:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-panel[hidden]{ display: none; }
.js .ttg-panel.is-enter{ animation: ttg-fade .5s var(--ease); }
@keyframes ttg-fade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* Hiện dần khi cuộn */
/* Hiện dần đã tắt: chế độ trình chiếu không bật được JS nên nội dung luôn hiện */
.js .ttg-reveal{ opacity: 1; transform: none; }
.js .ttg-reveal.is-in{ opacity: 1; transform: none; }

/* 04 · HEADER ----------------------------------------------- */
.ttg-header{ position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; }
.ttg-header > .ttg-wrap{ max-width: none; padding-inline: 0; }
.ttg-header__bar{
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
  /* lề trái/phải khớp mép nội dung (.ttg-wrap): pad khi màn hẹp, căn theo khung --max khi màn rộng */
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  background: var(--glass-sheen), var(--glass-light);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border-bottom: 1px solid var(--glass-edge);
  transition: background .4s var(--ease);
}
.ttg-header.is-scrolled .ttg-header__bar{ background: var(--glass-sheen), color-mix(in oklch, var(--light-paper) 84%, transparent); }
.ttg-logo{ flex: none; display: block; width: 132px; }
.ttg-logo img{ width: 132px; height: auto; }
.ttg-nav{ margin-inline: auto; }
.ttg-nav ul{ display: flex; gap: 2px; }
.ttg-nav a{ position: relative; display: inline-flex; align-items: center; height: 44px; padding-inline: 12px; font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap; color: var(--ink-soft); transition: color .3s var(--ease); }
.ttg-nav a::after{ content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--light-glow); transform: scaleX(0); transition: transform .3s var(--ease); }
.ttg-nav a:hover{ color: var(--ink); }
.ttg-nav a[aria-current="true"]{ color: var(--ink); }
.ttg-nav a[aria-current="true"]::after{ transform: scaleX(1); }
.ttg-nav a:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-header__bar > .ttg-btn { min-height: 40px; font-size: 14px; }
.ttg-header__bar > .ttg-btn .ttg-btn__label { height: 40px; padding-inline: 16px 20px; }
.ttg-menu-btn{ display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--water-abyss); color: var(--on-deep); place-items: center; flex: none; }
.ttg-menu-btn svg{ width: 20px; height: 20px; }
.ttg-menu-btn:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ttg-header__bar{ background: color-mix(in oklch, var(--light-paper) 94%, transparent); }
}
@media (prefers-reduced-transparency: reduce){
  .ttg-header__bar{ background: var(--light-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 05 · HERO ------------------------------------------------- */
.ttg-hero img{ width: 100%; height: auto; }

/* 06 · VỊ TRÍ ----------------------------------------------- */
.ttg-time{ padding: 6px clamp(18px, 3vw, 36px); margin-bottom: var(--gap); }
.ttg-time__row{ display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(12px, 3vw, 40px); align-items: center; padding-block: clamp(16px, 2vw, 24px); }
.ttg-time__row + .ttg-time__row{ border-top: 1px solid var(--glass-edge-deep); }
.ttg-time__label{ font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.14; letter-spacing: -0.01em; color: var(--light-glow); font-variant-numeric: lining-nums; }

.ttg-reach{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); align-items: stretch; margin-bottom: var(--block); }
.ttg-reach__card{ padding: clamp(20px, 2.4vw, 28px); text-align: justify; text-align-last: left; hyphens: auto; }
.ttg-reach__card em{ display: block; font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }

/* 07 · TIỆN ÍCH — 3 trục đánh số, ngăn bằng đường kẻ dọc --- */
.ttg-axes{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: var(--block); }
.ttg-axis{ padding: 4px clamp(16px, 2.4vw, 28px); text-align: justify; text-align-last: left; hyphens: auto; }
.ttg-axis + .ttg-axis{ border-left: 1px solid var(--line); }
.ttg-axis__num{ display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; color: var(--light-copper-text); margin-bottom: 10px; font-variant-numeric: lining-nums; }

/* 08 · MẶT BẰNG — xem mặt bằng + khám phá dòng căn ---------- */
.ttg-plan-view{ position: relative; }
.ttg-points{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); margin-bottom: var(--block); }
.ttg-point{ padding: clamp(20px, 2.4vw, 28px); text-align: justify; text-align-last: left; hyphens: auto; }
.ttg-point strong:first-child{ display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; margin-bottom: 8px; }

/* Khám phá dòng căn: một thông số lề chung cho trên, dưới, trái, phải */
.ttg-units{ --units-pad: clamp(12px, 1.8vw, 20px); padding: var(--units-pad); }
.ttg-lines{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.ttg-line{
  display: grid; gap: 10px; align-content: start; text-align: left;
  padding: clamp(14px, 1.8vw, 20px);
  border-radius: var(--radius-in);
  background: var(--light-paper);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ttg-line:hover{ background: color-mix(in oklch, var(--light-paper) 60%, var(--light-sand)); }
.ttg-line[aria-selected="true"]{ background: var(--water-deep); color: var(--on-deep); }
.ttg-line:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-line__name{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; }
.ttg-line__pct{ font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.ttg-line__type{ font-size: 14px; font-weight: 600; opacity: .8; }
.ttg-bar{ height: 6px; border-radius: 6px; background: color-mix(in oklch, var(--ink) 10%, transparent); overflow: hidden; }
.ttg-line[aria-selected="true"] .ttg-bar{ background: rgb(255 255 255 / .16); }
.ttg-bar span{ display: block; height: 100%; width: var(--w); border-radius: 6px; background: var(--c); transition: width .9s var(--ease); }
/* thanh diện tích luôn hiện đủ, không chờ JS */

.ttg-units__body{ padding: var(--units-pad) 0 0; }
.ttg-units__desc{ max-width: 80ch; margin: 0 auto 16px; text-align: center; }
.ttg-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.ttg-chip{ min-height: 44px; padding-inline: 18px; border-radius: var(--pill); border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); font-weight: 600; font-size: 15px; letter-spacing: .02em; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.ttg-chip:hover{ border-color: var(--ink); }
.ttg-chip[aria-pressed="true"]{ background: var(--ink); color: var(--on-deep); border-color: var(--ink); }
.ttg-chip:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-units .ttg-fig{ border-radius: var(--radius-in); }
.ttg-units .ttg-fig img{ transition: opacity .35s var(--ease); }
.ttg-units .ttg-fig.is-loading img{ opacity: .35; }

/* 09 · VẬT LIỆU BÀN GIAO — hàng nhãn / nội dung ------------- */
.ttg-spec{ padding: 4px clamp(18px, 3vw, 36px); }
.ttg-spec__row{ display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(12px, 3vw, 40px); padding-block: clamp(16px, 2vw, 22px); }
.ttg-spec__row + .ttg-spec__row{ border-top: 1px solid var(--line); }
.ttg-spec__label{ font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; }
.ttg-spec__row dd{ text-align: justify; text-align-last: left; hyphens: auto; }

/* 10 · LỘ TRÌNH BÁN HÀNG ------------------------------------ */
.ttg-phases{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); margin-bottom: var(--block); }
.ttg-phase{ padding: clamp(20px, 2.6vw, 32px); }
.ttg-phase__tag{ display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--light-glow); margin-bottom: 8px; }


/* 11 · PHÁP LÝ — danh sách hồ sơ ---------------------------- */
.ttg-docs{ display: grid; grid-template-columns: minmax(0,1fr); gap: var(--gap); max-width: 820px; margin-inline: auto; }
.ttg-doc a{ display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 18px; height: 100%; font-weight: 600; transition: border-color .3s var(--ease); }
.ttg-doc a:hover{ border-color: var(--ink); }
.ttg-doc a:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-doc__icon{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--water-mist); color: var(--ink); }
.ttg-doc__icon svg{ width: 20px; height: 20px; }

/* 12 · CHỦ ĐẦU TƯ — danh sách đánh số ----------------------- */
.ttg-partners{ margin-bottom: var(--block); }
.ttg-partner{ display: grid; grid-template-columns: 72px minmax(0,1fr); gap: clamp(12px, 2vw, 24px); padding: clamp(16px, 2vw, 22px) clamp(18px, 3vw, 36px); }
.ttg-partner + .ttg-partner{ border-top: 1px solid var(--line); }
.ttg-partner__num{ font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--light-copper-text); font-variant-numeric: lining-nums; }

/* 13 · FAQ -------------------------------------------------- */
.ttg-faq{ padding: 4px clamp(18px, 3vw, 36px); }
.ttg-faq details + details{ border-top: 1px solid var(--line); }
.ttg-faq summary{ display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3; }
.ttg-faq summary::-webkit-details-marker{ display: none; }
.ttg-faq summary::after{ content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--light-paper); font-family: var(--font-body); font-size: 22px; line-height: 1; transition: transform .3s var(--ease); }
.ttg-faq details[open] summary::after{ transform: rotate(45deg); }
.ttg-faq summary:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; border-radius: 8px; }
.ttg-faq__a{ padding-bottom: 20px; max-width: 90ch; }

/* 14 · DIALOG — form đăng ký & lightbox --------------------- */
.ttg-dialog{ border: 0; padding: 0; border-radius: var(--radius); background: var(--light-paper); color: var(--ink); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
.ttg-dialog::backdrop{ background: color-mix(in oklch, var(--water-abyss) 72%, transparent); }
.ttg-form{ display: grid; gap: 12px; padding: clamp(22px, 4vw, 36px); }
.ttg-form__title{ font-family: var(--font-display); font-weight: 500; line-height: 1.14; letter-spacing: -0.015em; color: var(--light-copper-text); text-wrap: balance; font-size: clamp(26px, 3vw, 34px); margin-bottom: 6px; padding-right: 48px; }
.ttg-field{ display: grid; gap: 4px; }
.ttg-field label{ font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.ttg-field input, .ttg-field select{ height: 52px; padding-inline: 20px; border-radius: var(--pill); border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent); background: #fff; font-size: 16px; }
.ttg-field input:focus-visible, .ttg-field select:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 1px; }
.ttg-field [aria-invalid="true"]{ border-color: oklch(55% 0.18 25); }
.ttg-err{ font-size: 13px; color: oklch(48% 0.16 25); }
.ttg-check{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.ttg-check input{ width: 20px; height: 20px; margin-top: 1px; accent-color: var(--water-deep); flex: none; }
.ttg-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ttg-form .ttg-btn{ justify-self: start; margin-top: 6px; }
/* submit button shares the input fields' pill radius */
.ttg-form .ttg-btn__label, .ttg-form .ttg-btn:focus-visible{ border-radius: var(--pill); }
.ttg-form__done{ padding: clamp(22px, 4vw, 36px); display: none; }
.ttg-form__done p{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; padding-right: 48px; }
.ttg-dialog.is-done .ttg-form{ display: none; }
.ttg-dialog.is-done .ttg-form__done{ display: block; }
.ttg-close{ position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--water-abyss); color: var(--on-deep); font-size: 24px; line-height: 1; }
.ttg-close:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-lightbox{ border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: transparent; }
.ttg-lightbox::backdrop{ background: color-mix(in oklch, var(--water-abyss) 92%, transparent); }
.ttg-lightbox__inner{ width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(12px, 4vw, 48px); }
.ttg-lightbox img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.ttg-lightbox .ttg-close{ position: fixed; top: 16px; right: 16px; }

/* 15 · RESPONSIVE ------------------------------------------- */
/* 1025–1280px: menu vẫn nằm ngang giữa header, thu gọn khoảng cách chữ */
@media (min-width: 1025px) and (max-width: 1280px){
  .ttg-header__bar{ gap: 12px; }
  .ttg-nav a{ padding-inline: 8px; font-size: 13px; }
  .ttg-nav a::after{ left: 8px; right: 8px; }
  .ttg-header__bar > .ttg-btn .ttg-btn__label{ padding-inline: 16px 20px; font-size: 14px; }
}
@media (max-width: 1024px){
  .ttg-header__bar{ gap: 12px; }
  .ttg-menu-btn{ display: grid; order: 3; }
  .ttg-header__bar > .ttg-btn{ margin-left: auto; }
  .ttg-nav{ position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px 0; border-radius: 0; background: var(--light-paper); border: 0; border-bottom: 1px solid var(--line); display: none; max-height: calc(100vh - 100px); overflow: auto; }
  .ttg-nav.is-open{ display: block; }
  .ttg-nav ul{ flex-direction: column; }
  .ttg-nav a{ width: 100%; height: 48px; font-size: 15px; padding-inline: var(--pad); }
  .ttg-nav a::after{ left: var(--pad); right: auto; width: 24px; }
}
@media (max-width: 1060px){
}
@media (max-width: 900px){
  .ttg-time__row, .ttg-spec__row{ grid-template-columns: minmax(0,1fr); gap: 4px; }
  .ttg-reach, .ttg-axes{ grid-template-columns: minmax(0,1fr); }
  .ttg-axis{ padding: 16px 0; }
  .ttg-axis + .ttg-axis{ border-left: 0; border-top: 1px solid var(--line); }
  /* inline style="--cols:N" sits on the element, so override the columns directly */
  .ttg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ttg-lines{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px){
  .ttg{ --header-h: 60px; --glass-blur: 10px; }
  .ttg-row{ flex-direction: column; }
  .ttg-row > .ttg-fig{ flex: none; width: 100%; }
  .ttg-points, .ttg-phases, .ttg-docs{ grid-template-columns: minmax(0,1fr); }
  .ttg-grid{ grid-template-columns: minmax(0,1fr); }
  .ttg-tabs{ border-radius: var(--radius); }
}
@media (max-width: 520px){
  .ttg-logo, .ttg-logo img{ width: 108px; }
  .ttg-header__bar > .ttg-btn .ttg-btn__label{ padding-inline: 16px 20px; font-size: 14px; }
  .ttg-header__bar > .ttg-btn .ttg-btn__icon{ display: none; }

  .ttg-partner{ grid-template-columns: 48px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .ttg *{ transition: none !important; animation: none !important; }
  .js .ttg-reveal{ opacity: 1; transform: none; }
}

/* Thông số nổi bật (khôi phục dưới H1) ----------------------- */
.ttg-stats{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: clamp(28px, 4vw, 48px) 0; }
.ttg-stat{ background: #fff; padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.ttg-stat--lead{ grid-column: span 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 16px; justify-content: flex-start; align-content: flex-end; }
.ttg-stat__num{ font-family: var(--font-display); font-weight: 500; font-variant-numeric: lining-nums; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.ttg-stat--lead .ttg-stat__num{ font-size: clamp(56px, 8vw, 104px); letter-spacing: -0.03em; }
.ttg-stat__num small{ font-size: .42em; letter-spacing: 0; margin-left: .15em; color: var(--ink-soft); }
.ttg-stat__label{ font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.ttg-stat--lead .ttg-stat__label{ font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; color: var(--ink); }
@media (max-width: 720px){
  .ttg-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ttg-stat--lead{ grid-column: span 2; }
}

/* Lộ trình triển khai: timeline ngang 5 mốc -------------------
   Đường tiến độ phía trên các thẻ; mốc đã qua (is-past) tô xanh,
   mốc kế tiếp (is-next) chấm đồng; mốc cuối là đích, nền tối. */
.ttg-steps{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap); padding: 0; }
.ttg-step{ position: relative; margin-top: 30px; padding: clamp(16px, 1.8vw, 22px); font-size: 15px; line-height: 1.6; }
.ttg-step::after{ content: ""; position: absolute; top: -23px; left: 0; right: calc(-1 * var(--gap)); height: 2px; background: var(--line); }
.ttg-step:last-child::after{ right: auto; width: 32px; }
.ttg-step::before{ content: ""; position: absolute; top: -30px; left: clamp(16px, 1.8vw, 22px); z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--light-paper); border: 2px solid color-mix(in oklch, var(--ink) 30%, transparent); box-sizing: border-box; }
.ttg-step.is-past::after{ background: var(--water); }
.ttg-step.is-past::before{ background: var(--water); border-color: var(--water); }
.ttg-step.is-past{ opacity: .8; }
.ttg-step.is-next::before{ background: var(--light-copper); border-color: var(--light-copper); box-shadow: 0 0 0 5px color-mix(in oklch, var(--light-copper) 25%, transparent); }
.ttg-step__date{ display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; margin-bottom: 10px; font-variant-numeric: lining-nums; }
.ttg-step:last-child{ background: var(--water-deep); color: var(--on-deep); border-color: transparent; }
.ttg-step:last-child .ttg-step__date{ color: var(--light-glow); }
@media (max-width: 900px){
  .ttg-steps{ grid-template-columns: minmax(0,1fr); padding-left: 34px; }
  .ttg-step{ margin-top: 0; }
  .ttg-step::after{ top: 0; bottom: calc(-1 * var(--gap)); left: -24px; right: auto; width: 2px; height: auto; }
  .ttg-step:last-child::after{ bottom: auto; width: 2px; height: 30px; }
  .ttg-step::before{ top: 22px; left: -31px; }
}

/* Footer — nền đêm (abyss), dải chân trời 4px phía trên ------- */
.ttg-footer{ position: relative; background: var(--water-abyss); color: var(--on-deep-soft); padding-block: clamp(48px, 6vw, 80px) 28px; font-size: 15px; line-height: 1.6; }
.ttg-footer::before{ content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--horizon); }
.ttg-footer__top{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--glass-edge-deep); }
.ttg-footer__logo{ display: inline-block; padding: 12px 16px; border-radius: var(--radius-in); background: var(--light-paper); }
.ttg-footer__logo img{ display: block; width: 140px; height: auto; }
.ttg-footer__tagline{ margin: 18px 0 22px; max-width: 34ch; }
.ttg-footer strong{ color: var(--on-deep); }
.ttg .ttg-footer__title{ line-height: 1.4; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--light-glow); margin-bottom: 14px; }
.ttg-footer__title ~ .ttg-footer__title{ margin-top: 22px; }
.ttg-footer__info dt{ font-weight: 700; color: var(--on-deep); }
.ttg-footer__info dd{ margin: 0 0 12px; }
.ttg-footer__list, .ttg-footer__links{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ttg-footer__links{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.ttg-footer__links a{ color: var(--on-deep-soft); text-decoration: none; transition: color .3s var(--ease); }
.ttg-footer__links a:hover{ color: var(--on-deep); }
.ttg-footer__contact{ color: var(--on-deep); font-weight: 600; overflow-wrap: anywhere; transition: color .3s var(--ease); }
.ttg-footer__contact:hover{ color: var(--light-glow); }
.ttg-footer__contact:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-footer__links a:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 2px; }
.ttg-footer__disclaimer{ display: grid; gap: 8px; max-width: 96ch; margin-inline: auto; padding-top: 22px; font-size: 13px; color: var(--on-deep-soft); text-align: center; }
.ttg-footer__bottom{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px 24px; padding-top: 22px; font-size: 13px; letter-spacing: .01em; }
@media (max-width: 1024px){ .ttg-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .ttg-footer__top{ grid-template-columns: minmax(0, 1fr); text-align: center; } .ttg-footer__links{ justify-items: center; } }

/* =========================================================
   Lớp da kính mờ (glassmorphism) — CHỈ đổi bề mặt:
   nền trong mờ, blur nền phía sau, viền sáng, vệt bóng trên.
   Không đổi kích thước, padding, margin, grid, vị trí.
   Không đặt box-shadow lên ảnh.
   ========================================================= */
.ttg{
  --glass-card: color-mix(in oklch, #fff 58%, transparent);
  --glass-card-strong: color-mix(in oklch, #fff 72%, transparent);
  --glass-deep-bg: color-mix(in oklch, var(--water-deep) 78%, transparent);
  --glass-inner: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 0 0 1px rgb(255 255 255 / .18);
  --glass-lift: 0 10px 30px -18px color-mix(in oklch, var(--water-deep) 45%, transparent);
}

/* Thẻ nền sáng: card, tab, bảng số liệu, form dialog */
.ttg-card,
.ttg-tabs,
.ttg-stats{
  background: var(--glass-sheen), var(--glass-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-inner), var(--glass-lift);
}
/* Ô số liệu: trong suốt để thấy kính của khung ngoài, kẻ đường chia mảnh */
.ttg-stat{ background: transparent; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.ttg-stats{ background-color: transparent; }

/* Nút dòng căn (AURA/LUMINA/TIDAL) chưa chọn: kính nhạt lồng trong thẻ kính */
.ttg-line{ background: color-mix(in oklch, #fff 45%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.ttg-line:hover{ background: color-mix(in oklch, #fff 70%, transparent); }

/* Khối nền tối: kính đêm (Giai đoạn 1/2, bảng thời gian di chuyển, mốc cuối timeline, nút dòng căn đang chọn) */
.ttg-dark,
.ttg-step:last-child,
.ttg-line[aria-selected="true"]{
  background: var(--glass-sheen), var(--glass-deep-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px var(--glass-edge-deep), var(--glass-lift);
}

/* Form đăng ký: kính sáng đậm hơn cho dễ đọc, nền mờ phía sau */
.ttg-dialog{
  background: var(--glass-sheen), var(--glass-card-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--glass-inner);
}
.ttg-dialog::backdrop{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ttg-field input, .ttg-field select{ background: color-mix(in oklch, #fff 80%, transparent); }

/* Nút +/− FAQ, chấm mốc timeline: đồng bộ sắc kính */
.ttg-faq summary::after{ background: color-mix(in oklch, #fff 60%, transparent); box-shadow: inset 0 0 0 1px var(--glass-edge); }

/* Footer: vạch chia dạng viền kính */
.ttg-footer__top{ border-bottom-color: var(--glass-edge-deep); }

/* Dự phòng: trình duyệt không hỗ trợ blur hoặc người dùng giảm trong suốt → nền đặc */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ttg-card, .ttg-tabs, .ttg-stats{ background: color-mix(in oklch, #fff 94%, transparent); }
  .ttg-dark, .ttg-step:last-child, .ttg-line[aria-selected="true"]{ background: var(--water-deep); }
  .ttg-dialog{ background: var(--light-paper); }
}
@media (prefers-reduced-transparency: reduce){
  .ttg-card, .ttg-tabs, .ttg-stats{ background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ttg-dark, .ttg-step:last-child, .ttg-line[aria-selected="true"]{ background: var(--water-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ttg-dialog{ background: var(--light-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Khung chua anh mat bang can ho: khong box-shadow (luat cam shadow tren anh va khung anh) */
.ttg-units{ box-shadow: none; }

/* Form đăng ký ngang 16:9 (mục Bán hàng) ----------------------
   Trái: ảnh phối cảnh + thẻ kính (kính đặt trên ảnh, đúng design system).
   Phải: form kính sáng. Không box-shadow trên ảnh / khung ảnh. */
.ttg-lead-box{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}
.ttg-lead-box__media{ position: relative; min-height: 0; }
.ttg-lead-box__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.ttg-lead-box__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklch, var(--water-abyss) 70%, transparent), transparent 55%); }
.ttg-lead-box__glass{
  position: absolute; z-index: 1; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 2vw, 24px); border-radius: var(--radius-in);
  color: var(--on-deep);
  background: var(--glass-sheen), color-mix(in oklch, var(--water-abyss) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid var(--glass-edge-deep);
}
.ttg .ttg-lead-box__title{ color: var(--on-deep); font-size: clamp(24px, 2.6vw, 34px); margin: 2px 0 6px; }
.ttg-lead-box__glass strong{ color: var(--light-glow); }
.ttg-lead-box__form{ display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(20px, 3vw, 40px); min-height: 0; }
.ttg-lead-box__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ttg-lead-box__form .ttg-btn{ align-self: flex-start; margin-top: 4px; }
.ttg-lead-box__done{ font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; }
.ttg-lead-box.is-done .ttg-lead-box__grid,
.ttg-lead-box.is-done .ttg-check,
.ttg-lead-box.is-done .ttg-err,
.ttg-lead-box.is-done .ttg-btn{ display: none; }
/* Màn hẹp: bỏ tỉ lệ 16:9, xếp ảnh trên – form dưới để không cắt chữ */
@media (max-width: 1024px){
  .ttg-lead-box{ aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); }
  .ttg-lead-box__media{ aspect-ratio: 16 / 9; }
}
@media (max-width: 520px){ .ttg-lead-box__grid{ grid-template-columns: minmax(0, 1fr); } }

/* CTA nhấp nháy cuối mục Mặt bằng ----------------------------
   Vòng sáng đồng lan ra liên tục + vệt sáng lướt qua nút.
   Tắt hoạt ảnh khi người dùng bật giảm chuyển động. */
.ttg-cta-row{ display: flex; justify-content: center; margin-top: var(--block); }
.ttg-cta-pulse{ position: relative; border-radius: 24px; animation: ttg-cta-ring 1.8s var(--ease) infinite; }
.ttg-cta-pulse .ttg-btn__label{ position: relative; overflow: hidden; }
.ttg-cta-pulse .ttg-btn__label::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: skewX(-18deg);
  animation: ttg-cta-sheen 2.6s ease-in-out infinite;
}
.ttg-cta-pulse .ttg-btn__icon{ animation: ttg-cta-nudge 1.8s var(--ease) infinite; }
.ttg-cta-pulse:hover{ animation-play-state: paused; }
@keyframes ttg-cta-ring{
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--light-copper) 55%, transparent); }
  70%  { box-shadow: 0 0 0 16px color-mix(in oklch, var(--light-copper) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--light-copper) 0%, transparent); }
}
@keyframes ttg-cta-sheen{ 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes ttg-cta-nudge{ 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce){
  .ttg-cta-pulse, .ttg-cta-pulse .ttg-btn__label::after, .ttg-cta-pulse .ttg-btn__icon{ animation: none; }
}

/* H1 của trang = tiêu đề "Giới thiệu": giữ đúng cỡ chữ của H2 các section */
.ttg .ttg-head h1{ font-size: clamp(30px, 4vw, 50px); line-height: 1.14; letter-spacing: -0.015em; }

/* Hero mobile: ảnh phủ kín màn hình dưới header, giữ 2 tháp ở giữa khung */
@media (max-width: 760px){
  .ttg-hero{ height: 100svh; min-height: 520px; }
  .ttg-hero img{ width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
}

/* Footer: link chính sách */
.ttg-footer__legal{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.ttg-footer__legal a{ color: var(--on-deep-soft); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.ttg-footer__legal a:hover{ color: var(--on-deep); }
.ttg-check a{ text-decoration: underline; text-underline-offset: 2px; }

/* Nút nổi Gọi + Zalo (phải, dưới) */
.ttg-float{ position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 12px; }
.ttg-float__btn{ display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font: 700 15px/1 var(--font-body); letter-spacing: .01em; transition: transform .3s var(--ease); }
.ttg-float__btn:hover{ transform: scale(1.08); }
.ttg-float__btn:focus-visible{ outline: 2px solid var(--light-glow); outline-offset: 3px; }
.ttg-float__btn svg{ width: 26px; height: 26px; }
.ttg-float__btn--call{ background: #22a45a; animation: ttg-ring 2s ease-out infinite; }
.ttg-float__btn--zalo{ background: #0068ff; }
@keyframes ttg-ring{ 0%{ box-shadow: 0 0 0 0 rgb(34 164 90 / .55); } 70%{ box-shadow: 0 0 0 14px rgb(34 164 90 / 0); } 100%{ box-shadow: 0 0 0 0 rgb(34 164 90 / 0); } }
@media (max-width: 520px){ .ttg-float__btn{ width: 50px; height: 50px; } .ttg-float{ gap: 10px; } }
@media (prefers-reduced-motion: reduce){ .ttg-float__btn--call{ animation: none; } }

/* Trang Chính sách bảo mật / Điều khoản sử dụng */
.ttg-policy{ padding-top: calc(var(--header-h) + clamp(32px, 5vw, 64px)); padding-bottom: clamp(48px, 6vw, 80px); }
.ttg-policy__wrap{ max-width: 860px; }
.ttg-policy h1{ margin: 6px 0 8px; }
.ttg-policy h2{ font-size: clamp(22px, 2.4vw, 28px); margin: 32px 0 10px; }
.ttg-policy p, .ttg-policy li{ color: var(--ink-soft); }
.ttg-policy ul{ list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.ttg-policy a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ttg-policy__meta{ font-size: 14px; color: var(--ink-soft); }
.ttg-policy__back{ margin-top: 40px; }