/* ==========================================================================
   DIGI PIPE — SECTIONS
   Style riêng của từng khối. Đây là file sửa nhiều nhất khi chỉnh giao diện.

   MỤC LỤC
   21. Banner nháp
   00. Topbar
   01. Header + nav + menu di động
   --. Rail — dòng nước chảy dọc trang
   02. Hero
   03. USP strip
   04. Sơ đồ hành trình nước
   19. Footer
   20. Sticky CTA mobile
   ========================================================================== */

/* 21. BANNER NHÁP ---------------------------------------------------------- */
.draft-banner {
  background: var(--amber-100);
  border-bottom: 1px solid rgba(180, 83, 9, 0.24);
  color: var(--amber-600);
  position: relative;
  z-index: var(--z-draft);
}

.draft-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 10px;
  flex-wrap: wrap;
}

.draft-banner__badge {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  font-weight: 600;
  background: var(--amber-600);
  color: #fff;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  flex: none;
}

.draft-banner__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Nền nhạt hơn + chữ đậm hơn để đạt tương phản WCAG AA (>= 4.5:1).
   Bản cũ #b45309 trên #f4dfc5 chỉ đạt 3.87:1. */
.draft-banner code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: #7c3d06;
  background: rgba(255, 255, 255, 0.72);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 01. HEADER --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

/* Khi header dính lại, nền phải ĐẶC. Bản cũ giữ nguyên trắng 90% nên chữ hero
   cuộn xuống dưới header vẫn lộ mờ qua lớp kính — nhìn như chữ dính vào đáy
   header và bị cắt ngang. Giữ blur để vẫn ra chất kính, nhưng không cho xuyên. */
.header.is-stuck {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 12px rgba(8, 25, 43, 0.05);
}

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--blue-600);
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

/* Logo Digi Pipe — CHỈ CHỮ, không icon. Hai dòng được giãn cho rộng bằng nhau
   tuyệt đối ngay trong file SVG, nên không được đặt letter-spacing đè từ CSS.
   32px: cao hơn logo TGLT bên cạnh (26px) một bậc — Digi Pipe là thương hiệu chính,
   TGLT đóng vai bảo chứng ở vế sau dấu ngăn.

   Vì sao 32 chứ không phải 30 như bản đầu: 17-08-2026 file SVG được sửa để khung
   chứa cả CHÂN CHỮ "g" (trước đó bị xén, đọc thành "Cleanina"), nên khung cao thêm
   6,58%. Giữ nguyên 30px thì CHỮ tự nhỏ đi đúng 6,58%. 30 × 1,0658 = 32.
   ⚠️ Sửa tỉ lệ trong gen-logo.py lần nữa thì phải tính lại cả số này và số ở footer. */
.brand__lockup {
  height: 32px;
  width: auto;
  flex: none;
}

.brand__logo {
  height: 26px;
  width: auto;
  flex: none;
}

.brand__sep {
  width: 1px;
  height: 26px;
  background: var(--line-strong);
  flex: none;
}

/* Tên thương hiệu trước đây là chữ sống (.brand__text/__name/__by) — đã bỏ khi
   chuyển sang logo dạng file SVG, vì mặt chữ thương hiệu không phải font của trang. */

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}

.nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-600);
  padding-block: 6px;
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--blue-600);
  transition: right var(--t-base) var(--ease-out);
}

.nav a:hover {
  color: var(--ink-900);
  text-decoration: none;
}

.nav a:hover::after {
  right: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

.header__actions .btn {
  padding: 11px 18px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  /* flex: none — nếu không có, ở 320px logo (269px) ép nút co còn 20px:
     vừa tràn trang 13px, vừa tụt dưới kích thước vùng chạm tối thiểu. */
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  place-items: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out),
    opacity var(--t-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: relative;
}

.nav-toggle__bars::before {
  top: -6px;
}
.nav-toggle__bars::after {
  top: 4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: var(--paper);
  padding-block: var(--sp-3) var(--sp-5);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
}

.mobile-nav__links a {
  padding: 14px 0;
  font-weight: 500;
  color: var(--ink-800);
  border-bottom: 1px solid var(--border);
}

.mobile-nav__links a:last-child {
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .nav,
  .header__actions {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }
}

/* Dưới 400px, hai logo cạnh nhau chiếm 269px trong 280px lòng container —
   không còn chỗ cho nút menu. Bỏ logo bảo chứng TGLT khỏi header, giữ
   nguyên logo Digi Pipe ở kích thước đọc được. TGLT vẫn xuất hiện ở khối
   bảo chứng và footer nên không mất nhận diện. */
@media (max-width: 400px) {
  .brand__sep,
  .brand__logo {
    display: none;
  }
}

/* --. RAIL — dòng nước chảy dọc trang -------------------------------------- */
.rail {
  position: fixed;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 5;
  pointer-events: none;
  display: none;
}

.rail__track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: var(--r-pill);
}

.rail__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--rail-progress, 0%);
  border-radius: var(--r-pill);
  background: linear-gradient(
    180deg,
    var(--blue-500) 0%,
    var(--brand-blue) 78%,
    var(--blue-300) 100%
  );
  transition: height 90ms linear;
}

.rail__fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(36, 156, 216, 0.18);
}

@media (min-width: 1280px) {
  .rail {
    display: block;
  }
}

/* Màn hẹp: trang dài hơn 30 màn hình, người đọc cần biết mình đang ở đâu.
   Dòng nước chuyển thành vạch ngang mảnh chạy sát mép trên. */
@media (max-width: 1279px) {
  .rail {
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    z-index: calc(var(--z-header) + 1);
  }
  .rail__track {
    background: transparent;
  }
  .rail__fill {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    height: 100%;
    width: var(--rail-progress, 0%);
    background: linear-gradient(
      90deg,
      var(--blue-500) 0%,
      var(--brand-blue) 100%
    );
    transition: width 90ms linear;
  }
  .rail__fill::after {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translate(50%, -50%);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(36, 156, 216, 0.22);
  }
}

/* 02. HERO ----------------------------------------------------------------- */
/* Hở trên PHẢI bằng hở dưới. Bản cũ để 56px trên / 72px dưới, nên khối mở màn
   dính sát mép header — đọc vào là thấy chật ngay
   màn đầu tiên. Đây cũng là khai báo clamp() tự chế cuối cùng còn sót. */
.hero {
  padding-block: var(--flow-2xl);
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--paper) 62%);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--flow-lg);
  align-items: start;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hero__title {
  text-wrap: balance;
  max-width: 17ch;
}

.hero__title .hl {
  position: relative;
  white-space: nowrap;
  color: var(--blue-700);
}

/* Gạch chân dạng "nét bút đánh dấu trên biên bản" */
.hero__title .hl::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.08em;
  height: 0.3em;
  background: linear-gradient(
    90deg,
    rgba(36, 156, 216, 0.28),
    rgba(36, 156, 216, 0.14)
  );
  border-radius: 3px;
  z-index: -1;
}

.hero__sub {
  max-width: 52ch;
}

.hero__product {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__product-name {
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0;
}

/* Bốn bước xếp 2×2 từ 720px trở lên. Để flex-wrap tự do thì bốn viên rơi
   thành 3+1, viên thứ tư đứng lẻ một dòng và làm gãy nhịp ngay dưới tiêu đề. */
.chain {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

@media (min-width: 720px) {
  .chain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
  }
}

.chain li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 8px;
}

.chain__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 0.6875rem;
  font-weight: 600;
  flex: none;
}

.hero__cta {
  margin-top: var(--sp-1);
}

/* REEL — video dọc 9:16 quay tại công trình.
   Self-host, chỉ nạp <video> khi bấm play → không tốn băng thông khi tải trang. */
.reel {
  margin: 0;
}

.reel__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.reel__poster,
.reel__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel__frame video {
  background: #000;
}

.reel__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(8, 25, 43, 0.42) 0%,
    rgba(8, 25, 43, 0.08) 40%,
    rgba(8, 25, 43, 0.62) 100%
  );
  transition: background var(--t-base) var(--ease-out);
}

.reel__play:hover {
  background: linear-gradient(
    180deg,
    rgba(8, 25, 43, 0.5) 0%,
    rgba(8, 25, 43, 0.14) 34%,
    rgba(8, 25, 43, 0.8) 100%
  );
}

.reel__play-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--blue-600);
  padding-left: 4px;
  box-shadow: 0 6px 24px rgba(8, 25, 43, 0.42);
  transition: transform var(--t-base) var(--ease-spring);
}

.reel__play:hover .reel__play-icon {
  transform: scale(1.08);
}

.reel__play-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(8, 25, 43, 0.7);
  max-width: 24ch;
  text-align: center;
  line-height: 1.4;
}

.reel__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: rgba(8, 25, 43, 0.58);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.reel.is-playing .reel__play,
.reel.is-playing .reel__badge {
  display: none;
}

/* Dải tín nhiệm cạnh video — chỉ số liệu thật */
.creds {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}

.creds__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--blue-100);
}

.creds__num {
  font-size: var(--fs-h4);
  text-wrap: balance;
  font-weight: 600;
  color: var(--blue-700);
  letter-spacing: 0;
  line-height: 1.2;
}

.creds__label {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty; /* tránh một chữ đứng lẻ ở dòng cuối trong cột hẹp */
}

.creds__label strong {
  color: var(--ink-800);
  font-weight: 600;
}

.creds__note {
  color: var(--slate-500);
  line-height: 1.5;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.hero__visual-note {
  margin-top: var(--sp-3);
  line-height: 1.5;
}

/* Màn rộng: video dọc bên trái, tín nhiệm bên phải.
   Cột phải phải CAO BẰNG cột chữ bên trái, nếu không đáy hero bị hụt một mảng
   trống — lỗi thị giác dễ thấy nhất của hero cũ. Cách xử lý: khung video rộng
   340px (cao 604px, xấp xỉ chiều cao khối chữ), và dải tín nhiệm trải đều hết
   chiều cao thay vì dồn lên đầu. */
@media (min-width: 1100px) {
  .hero__inner {
    align-items: stretch;
  }

  .hero__visual {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: var(--flow-sm);
    align-items: stretch;
  }

  .hero__visual .reel {
    align-self: start;
  }

  .creds {
    height: 100%;
    justify-content: space-between;
    padding-top: 0;
  }
}

@media (max-width: 1099px) {
  .reel {
    max-width: 320px;
  }
  .creds {
    margin-top: var(--sp-6);
  }
}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__copy {
    padding-top: 0;
  }
  .hero__title {
    max-width: 20ch;
  }
}

@media (max-width: 520px) {
  .hero__title .hl {
    white-space: normal;
  }
  .hero__split {
    grid-template-columns: 1fr;
  }
}

/* 03. USP STRIP ------------------------------------------------------------ */
.usp {
  border-block: 1px solid var(--border);
  background: var(--paper);
}

.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.usp__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-right: 1px solid var(--border);
}

.usp__item:first-child {
  padding-left: 0;
}

.usp__item:last-child {
  border-right: 0;
}

.usp__tick {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--green-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23206b33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 17px no-repeat;
}

.usp__text {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-800);
}

@media (max-width: 900px) {
  .usp__grid {
    grid-template-columns: 1fr 1fr;
  }
  .usp__item {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
  }
  .usp__item:nth-child(2n) {
    border-right: 0;
  }
  .usp__item:nth-child(odd) {
    padding-left: 0;
  }
  .usp__item:nth-child(even) {
    padding-left: var(--sp-4);
  }
  .usp__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .usp__grid {
    grid-template-columns: 1fr;
  }
  .usp__item {
    border-right: 0;
    padding-left: 0 !important;
  }
  .usp__item:last-child {
    border-bottom: 0;
  }
}

/* 04. SƠ ĐỒ HÀNH TRÌNH NƯỚC ------------------------------------------------ */
.journey__zones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.journey__zone {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 7px 12px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: var(--paper);
  text-align: center;
  line-height: 1.3;
}

.journey__zone--source {
  grid-column: 1 / 2;
  color: var(--slate-600);
}

.journey__zone--home {
  grid-column: 2 / 5;
  color: var(--blue-700);
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.journey__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-6) var(--sp-8);
}

/* Ống nối chạy ngang phía sau các node */
.journey__map::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(var(--sp-6) + 21px);
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--slate-200) 0%,
    var(--blue-500) 18%,
    var(--brand-blue) 72%,
    var(--slate-200) 100%
  );
  opacity: 0.55;
  z-index: 0;
}

.jnode {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding-top: 0;
}

.jnode__dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--slate-200);
  display: grid;
  place-items: center;
  transition: border-color var(--t-base) var(--ease-out),
    background var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-spring);
}

.jnode__dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slate-300);
  transition: background var(--t-base) var(--ease-out);
}

.jnode__idx {
  font-size: 0.6875rem;
  letter-spacing: var(--ls-mono);
  color: var(--slate-500);
  transition: color var(--t-base) var(--ease-out);
}

.jnode__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate-600);
  line-height: 1.3;
  transition: color var(--t-base) var(--ease-out);
}

.jnode:hover .jnode__dot {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}

.jnode.is-active .jnode__dot {
  border-color: var(--blue-600);
  background: var(--blue-600);
  box-shadow: 0 0 0 6px rgba(15, 98, 196, 0.12);
}

.jnode.is-active .jnode__dot::after {
  background: #fff;
}

.jnode.is-active .jnode__idx {
  color: var(--blue-600);
}

.jnode.is-active .jnode__label {
  color: var(--ink-900);
}

/* Panel chi tiết */
.jpanel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--flow-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
  box-shadow: var(--shadow-sm);
  animation: jpanel-in 380ms var(--ease-out) both;
}

@keyframes jpanel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.jpanel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.jpanel__title {
  font-size: var(--fs-h3);
  text-wrap: balance;
}

.jpanel__desc {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.jpanel__list {
  width: 100%;
  font-size: var(--fs-sm);
}

.jpanel__who {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--paper-2);
  border-left: 3px solid var(--blue-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}

.jpanel__who .mono {
  display: block;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--slate-500);
  margin-bottom: 3px;
}

.jpanel__media .ph {
  height: 100%;
}

.jpanel__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}

.jpanel__figure picture {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--paper-2);
}

.jpanel__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.jpanel__figure figcaption {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--slate-500);
}

.journey__foot {
  margin-top: var(--sp-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-8);
}

.journey__caveat {
  max-width: 66ch;
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.journey__caveat strong {
  color: var(--ink-900);
}

@media (max-width: 900px) {
  .jpanel {
    grid-template-columns: 1fr;
  }
  .jpanel__media {
    order: -1;
  }
}

@media (max-width: 760px) {
  .journey__zones {
    display: none;
  }
  .journey__map {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: var(--sp-4) var(--sp-6);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .journey__map::-webkit-scrollbar {
    display: none;
  }
  .journey__map::before {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--sp-4) + 21px);
  }
  .jnode {
    flex: 0 0 108px;
    scroll-snap-align: center;
  }
  .journey__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .journey__foot .btn {
    width: 100%;
  }
}

/* 19. FOOTER --------------------------------------------------------------- */
.footer {
  background: var(--ink-900);
  color: var(--text-on-dark-muted);
  padding-block: var(--sp-16) var(--sp-8);
  margin-bottom: 0;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--sp-10) var(--sp-8);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer không có logo TGLT đứng cạnh nên logo được to hơn header một bậc — nhưng
   giữ mức này, cao hơn nữa là chữ logo lấn át câu slogan ngay dưới nó.
   36px = 34 × 1,0658, bù cho khung SVG cao thêm khi sửa lỗi xén chân chữ. */
.brand--footer .brand__lockup {
  height: 36px;
}

.footer__op {
  margin-top: var(--sp-5);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 42ch;
}

.footer__op strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

.footer__claim {
  margin-top: var(--sp-5);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  letter-spacing: 0;
}

.footer__h {
  font-size: var(--fs-mono-label);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.footer__links a {
  color: var(--text-on-dark-muted);
}

.footer__links a:hover {
  color: #fff;
}

.footer__links--contact a {
  color: #fff;
  font-weight: 500;
}

.footer__bottom {
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  color: var(--text-on-dark-muted);
}

.footer__disclaimer {
  max-width: 62ch;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* 20. STICKY CTA MOBILE ---------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-cta);
  display: none;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease-out);
}

.sticky-cta.is-visible {
  transform: none;
}

.sticky-cta__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 6px;
  background: var(--paper);
  color: var(--ink-800);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.sticky-cta__btn:hover {
  text-decoration: none;
}

.sticky-cta__btn--primary {
  background: var(--blue-600);
  color: #fff;
}

@media (max-width: 1080px) {
  .sticky-cta {
    display: grid;
  }
  body {
    padding-bottom: 68px;
  }
}

/* ==========================================================================
   05. HAI CÔNG NGHỆ
   ========================================================================== */
.tech {
  position: relative;
  overflow: hidden;
}

.tech__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tech > .container {
  position: relative;
  z-index: 1;
}

/* Hai thẻ công nghệ dùng chung năm hàng. Khối claim của thẻ Protect dài hơn
   một dòng so với thẻ Cleaning, nên nếu mỗi thẻ tự tính hàng thì danh sách
   tick của hai bên lệch nhau 22px và phần "PHÙ HỢP VỚI" ở đáy cũng so le. */
.tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--sp-6);
  align-items: stretch;
}

.techcard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: var(--sp-5);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
}

.techcard__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.techcard__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: #fff;
}

.techcard__name span {
  color: var(--blue-300);
}

.techcard__role {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-on-dark-muted);
}

.techcard__desc {
  color: var(--text-on-dark-muted);
  line-height: var(--lh-relaxed);
}

.techcard__desc strong {
  color: #fff;
  font-weight: 600;
}

/* Dòng claim — có công tắc bật/tắt trong config.claims */
.techcard__claim {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: rgba(36, 156, 216, 0.12);
  border: 1px solid rgba(113, 194, 242, 0.30);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}

.techcard__claim--soft {
  color: var(--text-on-dark-muted);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.techcard__claim-icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--green-300)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23041e2d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

.techcard__claim--soft .techcard__claim-icon {
  background-color: rgba(255, 255, 255, 0.32);
}

.techcard__list {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.techcard__for {
  margin-top: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--sp-4);
}

.techcard__for strong {
  color: #fff;
  font-weight: 600;
}

.techcard__for .mono {
  display: block;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--blue-300);
  margin-bottom: 5px;
}

.tech__foot {
  margin-top: var(--sp-10);
  text-align: center;
  max-width: 72ch;
  margin-inline: auto;
  color: var(--text-on-dark-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.tech__foot strong {
  color: #fff;
}

@media (max-width: 900px) {
  .tech__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* Một cột thì không còn thẻ nào để thẳng hàng cùng — bỏ subgrid,
     nếu giữ thì hai thẻ ăn chung hàng và cùng cao bằng thẻ dài nhất. */
  .techcard {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   06. KHÁC BIỆT
   ========================================================================== */
/* stretch chứ KHÔNG start: hai thẻ so sánh cạnh nhau mà thẻ ngắn dừng giữa
   chừng thì đáy so le, nhìn như thẻ bị cắt dở. */
.diff__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.diff__col {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  padding: var(--flow-md);
  border: 1px solid var(--border);
}

.diff__col--them {
  background: var(--paper-2);
}

.diff__col--us {
  background: var(--paper);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md);
}

.diff__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.diff__col--them .diff__title {
  color: var(--slate-500);
}

.diff__by {
  font-weight: 500;
  color: var(--slate-500);
  white-space: nowrap;
}

.diff__col .ticklist {
  font-size: var(--fs-sm);
}

/* Khối tuyên ngôn */
.pledge {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--flow-lg);
  align-items: center;
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
}

.pledge__big {
  font-size: clamp(1.375rem, 1rem + 1.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 11ch;
}

.pledge__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: var(--flow-md);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
}

.pledge__body strong {
  color: #fff;
}

.pledge__flow {
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--blue-300);
  background: rgba(36, 156, 216, 0.10);
  border: 1px solid rgba(113, 194, 242, 0.24);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .diff__grid {
    grid-template-columns: 1fr;
  }
  .pledge {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .pledge__big {
    max-width: none;
  }
  .pledge__body {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0;
    padding-top: var(--sp-5);
  }
}

/* ==========================================================================
   07. QUY TRÌNH 8 BƯỚC — timeline dọc
   ========================================================================== */
.steps {
  max-width: 860px;
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-8);
}

.step:last-child {
  padding-bottom: 0;
}

.step__marker {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Đường nối dọc giữa các bước — "dòng chảy" của quy trình */
.step__marker::after {
  content: "";
  position: absolute;
  top: 46px;
  bottom: calc(var(--sp-8) * -1);
  width: 2px;
  background: var(--line-strong);
}

.step:last-child .step__marker::after {
  display: none;
}

.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  color: var(--slate-500);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
  position: relative;
  z-index: 1;
}

.step--gate .step__num {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: #fff;
}

.step--gate .step__marker::after {
  background: linear-gradient(180deg, var(--blue-500), var(--line-strong));
}

.step--final .step__num {
  border-color: var(--green-600);
  background: var(--green-600);
  color: #fff;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-top: 8px;
}

.step__flag {
  margin-bottom: 2px;
}

.step__title {
  font-size: var(--fs-h4);
}

.step__desc {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.step__desc strong {
  color: var(--ink-900);
}

.step__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.step__list li {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

.step__note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-600);
  background: var(--paper);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
}

.step--gate .step__note {
  border-left-color: var(--blue-500);
}

/* Hai kết cục sau quy trình */
.outcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}

.outcome__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.outcome__cell strong {
  color: var(--ink-900);
}

@media (max-width: 700px) {
  .step {
    grid-template-columns: 42px 1fr;
    gap: var(--sp-4);
  }
  .step__num {
    width: 40px;
    height: 40px;
    font-size: var(--fs-xs);
  }
  .step__marker::after {
    top: 40px;
  }
  .outcome {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   08. 5 CAM KẾT KHÔNG
   ========================================================================== */
.promise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flow-lg);
  align-items: start;
}

.promise__list {
  display: flex;
  flex-direction: column;
}

.promise__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.promise__item:first-child {
  padding-top: 0;
}

.promise__item:last-child {
  border-bottom: 0;
}

.promise__no {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--slate-300);
  font-weight: 600;
}

.promise__item strong {
  font-weight: 700;
  color: var(--ink-900);
}

.promise__docs-title {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: var(--sp-4);
}

.promise__docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 860px) {
  .promise__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   09. BẰNG CHỨNG TRƯỚC / SAU
   ========================================================================== */
.proof__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.ptab {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate-600);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.ptab:hover {
  border-color: var(--slate-400);
  color: var(--ink-900);
}

.ptab.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* Cột ảnh được cắt vừa đúng bề rộng thật của khung so sánh (3/4, cao tối đa
   620px → rộng ~465px). Trước đây cột này là 1fr ≈ 780px nên ảnh nằm lọt thỏm
   giữa một mảng trắng 300px, làm cả khối trông lệch và rời. */
.ppanel {
  display: grid;
  grid-template-columns: minmax(0, 465px) minmax(280px, 520px);
  justify-content: start;
  gap: var(--flow-lg);
  align-items: center;
  animation: jpanel-in 380ms var(--ease-out) both;
}

.ppanel__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ppanel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ppanel__caption {
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.ppanel__caption strong {
  color: var(--ink-900);
}

.ppanel__note {
  line-height: 1.6;
  /* slate-400 chỉ đạt 3,13:1 trên nền paper-2 — dưới ngưỡng AA 4,5:1.
     slate-500 đạt 4,95:1. Đây là chữ mang thông tin nên phải đọc được. */
  color: var(--slate-500);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}

/* --- Thanh trượt so sánh trước/sau --- */
.ba {
  position: relative;
}

.ba__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-900);
  aspect-ratio: 3 / 4;
  max-height: 620px;
  margin-inline: auto;
}

.ba__img {
  position: absolute;
  inset: 0;
  display: block;
}

.ba__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ảnh TRƯỚC nằm trên, bị cắt theo vị trí tay kéo */
.ba__img--before {
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

.ba__tag {
  position: absolute;
  top: var(--sp-4);
  z-index: 2;
  pointer-events: none;
}

.ba__tag--before {
  left: var(--sp-4);
}

.ba__tag--after {
  right: var(--sp-4);
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  transform: translateX(-1px);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(8, 25, 43, 0.45);
}

.ba__handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 14px rgba(8, 25, 43, 0.42);
  display: grid;
  place-items: center;
}

.ba__handle-grip::before {
  content: "";
  width: 17px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%230e5c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 3 6l5 4.5M14 1.5 19 6l-5 4.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Thanh range thật nằm đè lên ảnh, trong suốt — giữ được thao tác bàn phím */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
  cursor: ew-resize;
}

.ba__range::-moz-range-thumb {
  width: 46px;
  height: 620px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.ba__range:focus-visible + .ba__handle .ba__handle-grip,
.ba:focus-within .ba__handle-grip {
  box-shadow: 0 0 0 4px rgba(15, 98, 196, 0.5), 0 3px 14px rgba(8, 25, 43, 0.42);
}

@media (max-width: 900px) {
  .ppanel {
    grid-template-columns: 1fr;
  }
  .ba__stage {
    max-height: none;
    max-width: 460px;
  }
}

/* ==========================================================================
   10. XÉT NGHIỆM NƯỚC
   ========================================================================== */
/* Thẻ xét nghiệm ở cột phải ngắn hơn cột chữ 255px. Để `start` thì thẻ dính
   lên đỉnh và chừa một mảng trống lớn phía dưới; căn giữa thì khoảng trống
   chia đều hai đầu, khối cân hơn hẳn. */
.wt {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--flow-xl);
  align-items: center;
}

.wt__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: flex-start;
}

.wt__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 700;
  text-wrap: balance;
}

.hl-2 {
  display: block;
  color: var(--blue-700);
  margin-top: var(--sp-2);
}

.wt__desc {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.wt__desc strong {
  color: var(--ink-900);
  font-weight: 600;
}

.wt__why {
  width: 100%;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-5);
}

.wt__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
  box-shadow: var(--shadow-md);
}

.wt__card-title {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-heading);
}

.wt__lab {
  font-size: var(--fs-body);
  color: var(--text-muted);
}

.wt__lab strong {
  color: var(--blue-700);
  font-weight: 700;
}

.wt__lab-note {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  line-height: 1.55;
}

.wt__specs {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.wt__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.wt__spec dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
}

.wt__spec dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-800);
  line-height: 1.55;
}

.wt__ph {
  width: 100%;
}

@media (max-width: 900px) {
  .wt {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   15. VIDEO CÔNG TRÌNH
   ========================================================================== */
.cases {
  position: relative;
  overflow: hidden;
}

.cases > .container {
  position: relative;
  z-index: 1;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  max-width: 940px;
  margin-inline: auto;
}

.reel--case .reel__frame {
  border-color: rgba(255, 255, 255, 0.14);
}

.reel__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

.cases__pending {
  margin-top: var(--sp-12);
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-6);
}

.cases__pending-title {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--sp-3);
}

.cases__pending strong {
  color: #fff;
}

@media (max-width: 820px) {
  .cases__grid {
    grid-template-columns: 1fr 1fr;
    max-width: 560px;
  }
  .cases__grid .reel:last-child {
    grid-column: 1 / -1;
    max-width: 270px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .cases__grid {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
  .cases__grid .reel:last-child {
    grid-column: auto;
    max-width: none;
  }
}

/* ==========================================================================
   11. CÂY QUYẾT ĐỊNH
   ========================================================================== */
/* Hai câu hỏi nằm NGANG ở hàng trên, ô kết luận chạy hết bề ngang bên dưới.
   Bản cũ đặt câu hỏi một cột và kết luận cột còn lại: khi chưa chọn đáp án,
   nửa phải màn hình là một ô rỗng cao 200px cộng thêm ~500px trắng phía dưới. */
.tree__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow-lg);
  align-items: start;
}

.tree__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flow-lg);
  align-items: start;
}

.tree__q {
  border: 0;
  padding: 0;
  margin: 0;
}

.tree__legend {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-4);
  padding: 0;
}

.tree__legend .mono {
  display: block;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--slate-500);
  font-weight: 500;
  margin-bottom: 5px;
}

.tree__opts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.topt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.topt__box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.topt__box em {
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--slate-500);
}

.topt__box:hover {
  border-color: var(--slate-400);
}

.topt input:checked + .topt__box {
  border-color: var(--blue-600);
  background: var(--blue-50);
  box-shadow: 0 0 0 1px var(--blue-600);
}

.topt input:focus-visible + .topt__box {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
}

/* Ô kết luận neo giữa theo khổ đọc, không kéo hết 1200px:
   một dòng chữ nằm giữa khối rộng bằng cả container trông như lỗi bỏ trống. */
.tree__out {
  display: block;
  max-width: 860px;
  margin-inline: auto;
}

.tres {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
  box-shadow: var(--shadow-md);
  animation: jpanel-in 340ms var(--ease-out) both;
}

.tres--idle {
  border-style: dashed;
  box-shadow: none;
  background: var(--paper-2);
  align-items: center;
  text-align: center;
  min-height: 150px;
  justify-content: center;
}

.tres__hint {
  color: var(--slate-500);
  font-size: var(--fs-sm);
}

.tres__title {
  font-size: var(--fs-h3);
  text-wrap: balance;
}

.tres__flow {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}

.tres__desc {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.tree__claim {
  margin-top: var(--sp-12);
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.4;
  color: var(--ink-900);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .tree__form {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ==========================================================================
   12. BẢNG GIÁ
   ========================================================================== */
/* subgrid: ba thẻ giá dùng CHUNG bốn hàng của lưới cha, nên mô tả dài ngắn
   khác nhau vẫn không đẩy giá lệch nhau. Trước đây mô tả gói 3 dài hơn một
   dòng làm khối giá tụt 37px so với hai gói kia — mắt bắt ngay vì ba con số
   giá không nằm trên một đường.
   Hàng 3 để 1fr → danh sách nở ra, nút luôn dính đáy thẻ. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-5);
  align-items: stretch;
}

.plan {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
}

.plan--featured {
  border-color: var(--blue-600);
  box-shadow: var(--shadow-lg);
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-600);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  padding: 5px 16px;
  white-space: nowrap;
}

.plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

/* Tên gói dài ngắn khác nhau ("Giải pháp nước toàn nhà" xuống hai dòng, hai gói
   kia một dòng) làm dòng mô tả bên dưới lệch 37px. Giữ sẵn chỗ cho hai dòng. */
.plan__name {
  min-height: calc(2 * 1.32em);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-heading);
}

.plan__for {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.plan__price {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}

.plan__price strong {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.plan__price--quote {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-900);
}

.plan__list {
  font-size: var(--fs-sm);
  flex: 1;
}

.plan__list strong {
  color: var(--green-700);
}

@media (max-width: 980px) {
  .plan__name {
    min-height: 0;
  }

  .plans {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Một cột thì không còn thẻ nào để thẳng hàng cùng — trả về flex,
     nếu giữ subgrid các thẻ sẽ ăn chung hàng và cao bằng thẻ dài nhất. */
  .plan {
    display: flex;
    flex-direction: column;
  }
}

/* Chữ dẫn nhập trên nền tối phải dùng bảng màu nền tối. Để nguyên slate-500
   thì chỉ đạt 3,24:1 trên ink-900 — chữ xám trên nền gần đen, dưới ngưỡng AA. */
.section--dark .section-head__sub {
  color: var(--text-on-dark);
}

/* ==========================================================================
   12b. BẢNG GIÁ CHI TIẾT  (dựng bằng priceTable() trong app.js)
   Tông "hồ sơ kỹ thuật": hairline, nhãn mono, không đổ bóng loè loẹt.
   ========================================================================== */

/* Nhãn chương trình ưu đãi — có thời hạn, không phải "giảm giá" treo vĩnh viễn */
.pricing__promo {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--amber-600);
  background: var(--amber-100);
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

.pricing__promo[hidden] {
  display: none;
}

/* Giá niêm yết gạch ngang trên thẻ gói */
.plan__price-list {
  display: block;
  font-size: var(--fs-sm);
  color: var(--slate-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.plan__price-list[hidden] {
  display: none;
}

/* ---- Khối bảng ---------------------------------------------------------- */
.pricing__detail {
  margin-top: var(--sp-16);
}

.pricing__detail-head {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

.pricing__detail-title {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-heading);
}

.pricing__detail-sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* subgrid như ba thẻ giá phía trên: phần đầu thẻ (tên nhóm + ghi chú) dài ngắn
   khác nhau — "Chung cư" có ghi chú hai dòng — nên nếu mỗi thẻ tự tính hàng thì
   dòng "HẠNG MỤC" của ba bảng nằm ở ba độ cao khác nhau, đọc rất rối. */
.pricing__tables {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}

.ptable {
  /* Không có min-width:0 thì grid item lấy min-width:auto, tức không chịu co
     nhỏ hơn nội dung tối thiểu của bảng bên trong → ở 320px thẻ phình ra 322px
     và đẩy cả trang tràn ngang. */
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--flow-sm);
}

.ptable__head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.ptable__name {
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-heading);
}

.ptable__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* Bảng hẹp thì cuộn trong khung của chính nó, không đẩy cả trang tràn ngang */
.ptable__scroll {
  min-width: 0;
  overflow-x: auto;
  margin-top: var(--sp-4);
}

.ptable__table {
  width: 100%;
  min-width: 232px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ptable__table th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-600);
  text-align: right;
  padding: 0 0 var(--sp-3) var(--sp-3);
  white-space: nowrap;
}

.ptable__table th:first-child {
  text-align: left;
  padding-left: 0;
}

.ptable__table td {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--border);
  text-align: right;
  vertical-align: baseline;
}

.ptable__item {
  text-align: left !important;
  padding-left: 0 !important;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.ptable__per {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.ptable__list {
  color: var(--slate-500);
  white-space: nowrap;
}

.ptable__sale {
  font-weight: 800;
  color: var(--ink-900);
  white-space: nowrap;
  letter-spacing: 0;
}

/* ---- Hạng mục không nhận ------------------------------------------------ */
/* ---- Vì sao giá mềm hơn mặt bằng ---------------------------------------- */
@media (max-width: 980px) {
  .pricing__tables {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 560px;
    margin-inline: auto;
  }

  .ptable {
    display: block;
  }
}

/* Hạng mục không nhận, trong khối "Ai chưa phù hợp" ------------------------ */
.fit__cannot {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.fit__cannot strong {
  color: var(--ink-900);
}

/* ==========================================================================
   13. SERVICE CREDIT
   ========================================================================== */
.credit {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--flow-lg);
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
}

.credit__label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.credit__title {
  font-size: var(--fs-h3);
  color: #fff;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.credit__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: var(--flow-md);
}

.credit__main {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark);
}

.credit__main strong {
  color: var(--blue-300);
  font-weight: 700;
}

.credit__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
}

@media (max-width: 860px) {
  .credit {
    grid-template-columns: 1fr;
  }
  .credit__body {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0;
    padding-top: var(--sp-5);
  }
}

/* ==========================================================================
   14. AI PHÙ HỢP / AI CHƯA CẦN
   ========================================================================== */
.fit__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.fit__col {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: var(--flow-md);
}

.fit__col--yes {
  background: var(--paper);
  border-color: var(--green-100);
}

.fit__col--no {
  background: var(--paper-2);
}

.fit__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.fit__col .ticklist {
  font-size: var(--fs-sm);
}

.fit__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-600);
}

@media (max-width: 860px) {
  .fit__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   16. TRỤ CỘT TIN CẬY
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.pillar__no {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--slate-300);
  font-weight: 600;
}

.pillar__title {
  font-size: var(--fs-h4);
  color: var(--ink-900);
}

.pillar strong {
  color: var(--ink-900);
}

.pillar--net {
  grid-column: 1 / -1;
}

.pillar__regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.region {
  border-top: 2px solid var(--blue-100);
  padding-top: var(--sp-3);
}

.region > summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--sp-6);
}

.region > summary::-webkit-details-marker {
  display: none;
}

.region > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230e5c80' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform var(--t-base) var(--ease-out);
}

.region[open] > summary::after {
  transform: rotate(135deg);
}

.region__name {
  display: block;
  font-weight: 600;
  color: var(--ink-900);
  font-size: var(--fs-sm);
}

.region__cities {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate-500);
  line-height: 1.6;
}

.region__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--slate-600);
}

.region__list li {
  padding-left: var(--sp-4);
  position: relative;
}

.region__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-300);
}

@media (max-width: 980px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
  }
  .pillar__regions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   17. FAQ
   ========================================================================== */
/* Cột giới thiệu chỉ cao 405px cạnh danh sách câu hỏi 1051px → hụt 646px.
   Cho nó dính lại khi cuộn: khoảng trống thành chỗ có ích thay vì lỗ hổng. */
.faq__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--flow-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.faq__head {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.faq__aside {
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  color: var(--text-muted);
}

.faq__list {
  border-top: 1px solid var(--border);
}

.qa {
  border-bottom: 1px solid var(--border);
}

.qa summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  color: var(--ink-900);
  transition: color var(--t-fast) var(--ease-out);
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--paper-3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23223d4d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  transition: transform var(--t-base) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}

.qa[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--blue-100);
}

.qa summary:hover {
  color: var(--blue-700);
}

.qa__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-6);
  padding-right: var(--sp-10);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.qa__body strong {
  color: var(--ink-900);
}

@media (max-width: 900px) {
  .faq__wrap {
    grid-template-columns: 1fr;
  }
  .faq__head {
    position: static;
  }
  .qa__body {
    padding-right: 0;
  }
}

/* ==========================================================================
   17b. KÊNH CHÍNH THỨC — chống mạo danh
   Tông "biên bản": hairline, số mono, KHÔNG dùng đỏ/vàng cảnh báo.
   Lý do: khối này bảo vệ khách chứ không doạ khách. Màu cảnh báo đặt ngay
   trước form sẽ kéo tâm trạng đi xuống đúng lúc khách sắp để lại số.
   ========================================================================== */
/* Tiêu đề thẻ 03 xuống hai dòng trong khi hai thẻ kia một dòng, nên đoạn văn
   bên dưới bắt đầu ở ba độ cao khác nhau. subgrid cho cả ba thẻ dùng chung
   bốn hàng: số thứ tự, tiêu đề, nội dung (nở), ghi chú đáy. */
.verify__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-4);
  align-items: stretch;
}

.verify__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: var(--sp-3);
  padding: var(--flow-sm);
  background: var(--paper);
}

.verify__no {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--slate-300);
  font-weight: 600;
}

.verify__title {
  font-size: var(--fs-h4);
  text-wrap: balance;
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--ink-900);
}

.verify__item p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--slate-600);
}

.verify__list {
  font-size: var(--fs-sm);
}

/* Câu chốt của mỗi thẻ — tách khỏi phần diễn giải bằng hairline trên.
   KHÔNG đẩy xuống đáy bằng margin-top:auto: đáy 3 thẻ vốn đã thẳng hàng nhờ
   grid stretch, nên đẩy chỉ tạo khoảng trắng chết giữa thẻ nội dung ngắn. */
/* margin-top:auto đẩy ghi chú xuống ĐÁY thẻ. Không có nó thì thẻ nào nội dung
   ngắn sẽ có ghi chú nằm lửng giữa, ba thẻ ba độ cao khác nhau. */
.verify__note {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* Cặp nhãn kênh / số liên hệ. Xếp dọc chứ không cùng dòng — cột nội dung
   trong thẻ hẹp, để cùng dòng thì số bị ngắt giữa hai cụm.

   ⚠️ .ticklist li là grid 2 cột (22px icon + 1fr nội dung). Đặt HAI phần tử
   vào ô nội dung thì phần tử thứ hai bị đẩy xuống hàng dưới, rơi đúng vào cột
   icon 22px và chữ vỡ dọc từng từ. Vì vậy cả hai phải khoá vào cột 2. */
.verify__k,
.verify__v {
  grid-column: 2;
}

.verify__k {
  display: block;
  font-size: var(--fs-xs);
  color: var(--slate-500);
  line-height: 1.4;
}

.verify__v {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}

.verify__v--plain {
  font-weight: 500;
  color: var(--ink-900);
  white-space: normal;
}

.verify__foot {
  margin-top: var(--sp-5);
  max-width: 92ch; /* trải hết 1200px thì dòng dài 159 ký tự, quá xa để quét mắt */
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--slate-500);
}

.verify__foot-label {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
  margin-right: var(--sp-2);
}

@media (max-width: 900px) {
  .verify__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .verify__item {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   18. FORM ĐĂNG KÝ
   ========================================================================== */
.lead {
  position: relative;
  overflow: hidden;
}

.lead > .container {
  position: relative;
  z-index: 1;
}

.lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--flow-xl);
  align-items: start;
}

.lead__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: flex-start;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.lead__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  color: #fff;
}

.lead__desc {
  color: var(--text-on-dark-muted);
  line-height: var(--lh-relaxed);
}

.lead__list {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-5);
}

.lead__call {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--text-on-dark-muted);
}

.lead__formwrap {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--flow-md);
  box-shadow: var(--shadow-lg);
}

.lform {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.lform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.field label,
.field legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  padding: 0;
}

.field label span[aria-hidden] {
  color: var(--red-600);
}

.field__opt {
  font-weight: 400;
  /* "(không bắt buộc)" · "(chọn nhiều được)" là chỉ dẫn điền form, không phải
     chữ trang trí. slate-400 chỉ 3,34:1 → đổi sang slate-500 (5,28:1). */
  color: var(--slate-500);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  background: var(--paper);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 84px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--slate-300);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--shadow-focus);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--red-600);
}

.field__err {
  font-size: var(--fs-xs);
  color: var(--red-600);
  font-weight: 500;
}

.field--checks legend {
  margin-bottom: var(--sp-3);
}

.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-800);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  cursor: pointer;
  line-height: 1.35;
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.check:hover {
  border-color: var(--slate-400);
}

.check input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--blue-600);
  margin: 0;
}

.check:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
}

.lform__submit {
  margin-top: var(--sp-2);
  letter-spacing: 0;
}

.lform__micro {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--slate-500);
}

.lform__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding-block: var(--sp-10);
}

.lform__done-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23206b33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 30px no-repeat;
}

.lform__done h3 {
  font-size: var(--fs-h3);
}

.lform__done p {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 46ch;
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .lead__grid {
    grid-template-columns: 1fr;
  }
  .lead__copy {
    position: static;
  }
}

@media (max-width: 560px) {
  .lform__row,
  .checks {
    grid-template-columns: 1fr;
  }
}

/* Ghi chú dưới ô chọn tỉnh — hiện khi khách chọn ngoài địa bàn */
.field__hint {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--amber-600);
  background: var(--amber-100);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}

/* Phạm vi nhận lịch — đặt ngay dưới dải video công trình */
.cases__scope {
  margin-top: var(--sp-10);
  max-width: 72ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
  background: rgba(36, 156, 216, 0.08);
  border: 1px solid rgba(113, 194, 242, 0.26);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
}

.cases__scope strong {
  color: #fff;
}

.cases__pending {
  margin-top: var(--sp-8);
}

/* Bảng phạm vi triển khai — hai dòng, phân biệt rõ TP.HCM vs tỉnh khác */
.cases__scope {
  text-align: left;
  align-items: stretch;
}

.cases__scope .stamp {
  align-self: center;
}

.cases__scope-lead {
  text-align: center;
}

.scopelist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  width: 100%;
}

.scopelist li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}

.scopelist__where {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--blue-300);
}

.scopelist__what {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.cases__scope-note {
  text-align: center;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 700px) {
  .scopelist {
    grid-template-columns: 1fr;
  }
}

/* Ghi chú phụ trong câu hỏi FAQ — tách khỏi phần trả lời chính */
.qa__aside {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--slate-500);
  border-left: 2px solid var(--border);
  padding-left: var(--sp-4);
  margin-top: var(--sp-1);
}

/* Bẫy bot — đẩy hẳn ra ngoài màn hình, không dùng display:none
   (một số bot bỏ qua trường display:none, nhưng vẫn điền trường bị đẩy đi) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Báo lỗi gửi form */
.lform__error {
  margin-top: var(--sp-5);
  border: 1px solid rgba(180, 35, 24, 0.3);
  background: var(--red-100);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lform__error-title {
  font-weight: 700;
  color: var(--red-600);
}

.lform__error-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-800);
}

.lform__error-body a {
  color: var(--red-600);
  white-space: nowrap;
}

/* ==========================================================================
   CHẾ ĐỘ PUBLISH — ẩn sạch mọi thứ chỉ dành cho bản nháp
   Không có class .is-draft trên <html> nghĩa là đang publish:
   khung placeholder, tab bằng chứng chưa có tư liệu, khối ảnh giấy tờ…
   đều biến mất. Anh quên xoá cũng không lọt ra ngoài.
   ========================================================================== */
html:not(.is-draft) [data-draft-only] {
  display: none !important;
}

/* Khi ô ảnh của sơ đồ hành trình nước bị ẩn → panel co về một cột,
   không để lại khoảng trống bên phải.
   NHƯNG một cột rộng 1200px thì đoạn văn kéo thành 140 ký tự/dòng, mắt phải
   quét ngang quá xa và dễ lạc dòng (ngưỡng dễ đọc là 45–75 ký tự). Vì vậy
   khoá độ dài dòng, và trải danh sách thành hai cột cho hết chỗ trống. */
html:not(.is-draft) .jpanel {
  grid-template-columns: 1fr;
}

html:not(.is-draft) .jpanel__title,
html:not(.is-draft) .jpanel__desc {
  max-width: 68ch;
}

@media (min-width: 760px) {
  html:not(.is-draft) .jpanel__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--flow-lg);
  }
}

/* Tương tự cho khối 5 cam kết và tab bằng chứng */
html:not(.is-draft) .promise__grid {
  grid-template-columns: 1fr;
  max-width: 720px;
}

/* Guard bắt buộc: rule này nằm cuối file nên nếu không bọc media query, nó ghi
   đè cả breakpoint 900px và ép hai cột trên màn 320px → tràn ngang. */
@media (min-width: 901px) {
  html:not(.is-draft) .ppanel {
    grid-template-columns: minmax(0, 465px) minmax(280px, 520px);
  }
}

/* ==========================================================================
   NÉN CHIỀU DÀI TRÊN MOBILE
   Trang 16 section trên màn 390px dài tới ~34 màn hình. Ba việc dưới đây
   rút ngắn mà không làm trang chật chội.
   ========================================================================== */
@media (max-width: 700px) {
  /* 1. Ba video công trình: cuộn ngang thay vì xếp chồng dọc.
        Tiết kiệm ~2 màn hình, lại đúng thói quen xem video dọc trên điện thoại. */
  .cases__grid {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cases__grid::-webkit-scrollbar {
    display: none;
  }
  .cases__grid .reel {
    flex: 0 0 74%;
    scroll-snap-align: center;
    max-width: none;
    margin-inline: 0;
  }
  .cases__grid .reel:last-child {
    grid-column: auto;
  }

  /* 2. Bớt đệm dọc giữa các section — vẫn thoáng nhưng không phí màn hình */
  :root {
    --section-y: clamp(2.75rem, 2rem + 3vw, 4rem);
  }

  /* 3. Bước trong quy trình sát lại một chút */
  .step {
    padding-bottom: var(--sp-6);
  }
}

/* Gợi ý có thể vuốt ngang — người dùng không tự đoán được nếu không báo */
.cases__hint {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
  margin-top: var(--sp-4);
}

@media (max-width: 700px) {
  .cases__hint {
    display: block;
  }
}