/* Thanh Hung — Service page CSS (chuyen nha tron goi).
   Generated from the design bundle. Enqueued only on this page.
   Bare element rules scoped to body.th-svc; fonts via global Be Vietnam Pro. */
/* ============================================================
   Thành Hưng Taxi Tải — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file as @import lines only.
   ============================================================ */
/* Be Vietnam Pro — modern Vietnamese-first sans. Self-hosted woff2 (Google Fonts v12). */

/* ---- 400 ---- */



/* ---- 500 ---- */



/* ---- 600 ---- */



/* ---- 700 ---- */



/* ---- 800 ---- */



/* ============================================================
   COLORS — Thành Hưng Taxi Tải
   Triadic, controlled: Red (action) + Navy (trust) + Copper (care)
   Ratio in use: ~60% neutral · 30% navy · 10% red · <5% copper
   ============================================================ */
:root {
  /* ---- Primary · Đỏ Thành Hưng (CTA / action) ---- */
  --red-50:  #FCF0F0;
  --red-100: #F9D9D8;
  --red-200: #F0A8A6;
  --red-300: #E57673;
  --red-400: #D63B37;
  --red-500: #BF0603;   /* brand red */
  --red-600: #A30503;   /* hover */
  --red-700: #850402;
  --red-800: #5E0302;
  --red-900: #3D0201;

  /* ---- Secondary · Navy / Indigo (trust, headers, footers) ---- */
  --navy-50:  #EAEBF6;
  --navy-100: #D2D4EC;
  --navy-200: #A5A9D9;
  --navy-300: #777EC6;
  --navy-400: #4B53A8;
  --navy-500: #292E91;   /* indigo accent navy */
  --navy-600: #222678;
  --navy-700: #1A1D5C;
  --navy-800: #131540;   /* footer */
  --navy-900: #011631;   /* deep brand navy (header) */

  /* ---- Accent · Vàng Đồng (copper, <5% highlight) ---- */
  --copper-50:  #FFF8EB;
  --copper-100: #FFF2D7;
  --copper-200: #FFE6B4;
  --copper-300: #F3D592;
  --copper-400: #E4BC6C;  /* brand copper */
  --copper-500: #D4A24A;
  --copper-600: #B5853A;
  --copper-700: #8C6429;

  /* ---- Supporting · Xanh Dịch Vụ (links, info) ---- */
  --blue-50:  #E3F1FA;
  --blue-100: #B5D1E2;
  --blue-200: #8FC6EC;
  --blue-400: #4CA9DF;
  --blue-600: #1E80BE;
  --blue-800: #004E89;

  /* ---- Neutral · Trung tính ---- */
  --white:      #FFFFFF;
  --neutral-50:  #F0F3FA;
  --neutral-100: #E5E7EB;
  --neutral-200: #C9CDD2;
  --neutral-400: #9EA4AA;
  --neutral-500: #72787F;
  --neutral-700: #4B4F54;
  --neutral-900: #1B1D1F;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Brand */
  --color-primary:        var(--red-500);
  --color-primary-hover:  var(--red-600);
  --color-primary-active: var(--red-700);
  --color-secondary:      var(--navy-900);
  --color-secondary-alt:  var(--navy-500);
  --color-accent:         var(--copper-400);
  --color-info:           var(--blue-800);
  --color-link:           var(--blue-800);
  --color-link-hover:     var(--blue-600);

  /* Text */
  --text-strong:   var(--navy-900);   /* headings */
  --text-body:     var(--neutral-900);
  --text-muted:    var(--neutral-500);
  --text-inverse:  var(--white);
  --text-on-dark:  #C9CDD2;           /* footer copy */
  --text-accent:   var(--red-500);    /* highlighted keywords */

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-subtle:   var(--neutral-50);   /* alt section bg */
  --surface-card:     var(--white);
  --surface-tint-red: var(--red-50);       /* #FCF0F0 */
  --surface-tint-gold:var(--copper-50);    /* #FFF8EB */
  --surface-dark:     var(--navy-900);     /* header */
  --surface-darker:   var(--navy-800);     /* footer */

  /* Lines / borders */
  --border-subtle: var(--neutral-200);     /* 1px #C9CDD2 */
  --border-strong: var(--neutral-400);
  --border-focus:  var(--red-500);

  /* Status (semantic) */
  --success:     #1E9E6A;
  --success-bg:  #E6F6EF;
  --warning:     #D4A24A;
  --warning-bg:  #FFF8EB;
  --error:       #D92D20;
  --error-bg:    #FCF0F0;
  --info-fg:     #1E80BE;
  --info-bg:     #E3F1FA;
}

/* ============================================================
   TYPOGRAPHY — Be Vietnam Pro
   Headings 700–800 navy · body 400–500 · keywords red
   ============================================================ */
:root {
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* Type scale (px) */
  --fs-display: 56px;   /* hero H1 */
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-lead: 19px;      /* hero subhead / lead paragraph */
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-overline: 12px;  /* eyebrow / label */

  /* Line heights */
  --lh-tight: 1.1; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Tracking */
  --ls-tight: -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-overline: 0.12em; /* @kind font */
}

/* ============================================================
   SPACING & LAYOUT — 4px base grid
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section rhythm */
  --section-pad-y: 80px;
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
   EFFECTS — radii, shadows, transitions
   Clean, strong, trustworthy. Subtle shadows only.
   ============================================================ */
:root {
  /* Radii */
  --radius-sm: 6px;
  --radius-btn: 8px;      /* buttons / inputs */
  --radius-md: 10px;
  --radius-card: 12px;    /* cards / sections */
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows — soft, navy-tinted */
  --shadow-xs: 0 1px 2px rgba(1, 22, 49, 0.06);
  --shadow-sm: 0 1px 3px rgba(1, 22, 49, 0.08), 0 1px 2px rgba(1, 22, 49, 0.04);
  --shadow-md: 0 4px 12px rgba(1, 22, 49, 0.10);
  --shadow-lg: 0 12px 28px rgba(1, 22, 49, 0.14);
  --shadow-cta: 0 6px 16px rgba(191, 6, 3, 0.28);   /* red CTA lift */

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(191, 6, 3, 0.18);
  --ring-info:  0 0 0 3px rgba(0, 78, 137, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}

/* ============================================================
   BASE — light resets + element defaults
   Optional for consumers; sets the brand baseline.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.th-svc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.th-svc h1, body.th-svc h2, body.th-svc h3, body.th-svc h4, body.th-svc h5, body.th-svc h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--th-font, 'Be Vietnam Pro'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
body.th-svc h3, body.th-svc h4 { font-weight: var(--fw-bold); }

body.th-svc p { margin: 0; text-wrap: pretty; }

body.th-svc a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
body.th-svc a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* Highlighted keyword inside headings */
body.th-svc .kw, body.th-svc mark.kw {
  color: var(--text-accent);
  background: none;
}



/* shared.css — common Thành Hưng utilities used by all pages */
:root {
  --th-red: #BF0603;
  --th-red-hover: #A30503;
  --th-radius-scale: 1;
  --th-space-scale: 1;
  --th-font-scale: 1;
  --sec-pad: calc(64px * var(--th-space-scale));
  --maxw: 1200px;

  --color-primary: var(--th-red);
  --color-primary-hover: var(--th-red-hover);
  --text-accent: var(--th-red);
  --border-focus: var(--th-red);
  --shadow-cta: 0 6px 16px color-mix(in srgb, var(--th-red) 30%, transparent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.th-svc {
  margin: 0;
  font-family: var(--th-font, 'Be Vietnam Pro'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  background: var(--white);
  color: var(--text-body);
  font-size: calc(16px * var(--th-font-scale));
  -webkit-font-smoothing: antialiased;
}
body.th-svc img { max-width: 100%; display: block; }
body.th-svc a { color: inherit; }

.th-container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.th-section { padding: var(--sec-pad) 0; }
.th-section.tight { padding: calc(var(--sec-pad) * 0.7) 0; }

.th-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--th-red); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
}
.th-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--th-red); display: inline-block; }

/* Mũi tên đôi "cuộn xuống" — 2 chevron đỏ sáng dần từ trên xuống */
/* .th-scroll-cue: style chung ở global.css (nguồn duy nhất, đồng bộ mọi trang). */
.th-h2 {
  font-size: calc(34px * var(--th-font-scale)); line-height: 1.18; font-weight: 800;
  color: var(--navy-900); margin: 0 0 14px; letter-spacing: -0.02em; text-wrap: balance;
}
.th-h2 .kw { color: var(--th-red); }
.th-lead { font-size: calc(18px * var(--th-font-scale)); line-height: 1.6; color: var(--neutral-500); margin: 0; max-width: 640px; text-wrap: pretty; }
.th-center { text-align: center; }
.th-center .th-eyebrow { justify-content: center; }
.th-center .th-lead { margin-left: auto; margin-right: auto; }

.th-card {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: calc(12px * var(--th-radius-scale)); box-shadow: var(--shadow-sm);
}
.th-pill {
  border-radius: 999px; height: 46px; padding: 0 26px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: calc(15px * var(--th-font-scale)); border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .12s, box-shadow .18s;
  white-space: nowrap; font-family: inherit;
}
/* body.th-svc prefix raises specificity (0,3,1) to beat Flatsome's
   `a.primary:not(.button){background:transparent}` (0,2,1), which otherwise
   wipes the red fill on <a class="th-pill primary"> CTAs → invisible button. */
body.th-svc .th-pill.primary { background: var(--th-red); color: #fff; box-shadow: var(--shadow-cta); }
body.th-svc .th-pill.primary:hover { background: var(--th-red-hover); transform: translateY(-1px); }
.th-pill.outline { background: transparent; color: var(--th-red); border-color: var(--th-red); }
.th-pill.outline:hover { background: var(--th-red); color: #fff; }
.th-pill.ghostnavy { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.th-pill.ghostnavy:hover { background: var(--navy-900); color: #fff; }
/* Flatsome's `.white{background:#fff!important;color:#666!important}` utility
   collides with our white pill on the insurance banner → grey text. Override
   with !important (scoped to this page only, so contained). */
body.th-svc .th-pill.white { background: #fff !important; color: var(--th-red) !important; }
body.th-svc .th-pill.white:hover { background: var(--neutral-50) !important; color: var(--th-red) !important; transform: translateY(-1px); }
.th-pill:active { transform: translateY(1px); }

.icon-chip {
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface-tint-red);
  display: inline-flex; align-items: center; justify-content: center; color: var(--th-red); flex: none;
}
.icon-chip i { width: 24px; height: 24px; }

.th-grid { display: grid; gap: 20px; }
/* Điện thoại: mọi lưới th-grid về 1 cột. Số cột được set bằng inline style
   (vd grid-template-columns:1fr 1fr) nên phải !important để thắng inline. */
@media (max-width: 640px) { .th-grid { grid-template-columns: 1fr !important; } }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

image-slot { border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; }

.th-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 12px; }
.th-fab a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); color: #fff; }
.th-fab a i { width: 24px; height: 24px; }
.th-fab .call { background: var(--th-red); animation: thpulse 2.2s infinite; }
.th-fab .zalo { background: var(--blue-800); }
@keyframes thpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--th-red) 50%, transparent); } 70% { box-shadow: 0 0 0 14px rgba(191,6,3,0); } 100% { box-shadow: 0 0 0 0 rgba(191,6,3,0); } }

.only-mobile { display: none; }
@media (max-width: 860px) {
  :root { --sec-pad: calc(44px * var(--th-space-scale)); }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .only-desktop { display: none !important; }
  .only-mobile { display: block; }
  .th-h2 { font-size: calc(27px * var(--th-font-scale)); }
}
@media (max-width: 520px) {
  .cols-2 { grid-template-columns: 1fr; }
}

/* masonry gallery (shared) */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 16px; }
.masonry-item { grid-row: span 1; }
.masonry-item.tall { grid-row: span 2; }
@media (max-width: 960px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .masonry { grid-template-columns: 1fr; } .masonry-item.tall { grid-row: span 1; } }

/* shared header/footer */
.th-header { position: sticky; top: 0; z-index: 60; background: var(--navy-900); transition: box-shadow .2s; }
.th-header.solid { box-shadow: 0 2px 14px rgba(1,22,49,.35); }
.th-header-bar { display: flex; align-items: center; gap: 18px; height: 68px; }
.th-logo { background: #fff; border-radius: 8px; padding: 6px 10px; display: flex; flex: none; }
.th-logo img { height: 30px; }
.th-nav { display: flex; gap: 22px; margin-left: 8px; }
.th-nav a { color: #DCE0EC; text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; }
.th-nav a:hover { color: #fff; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr !important; } }

.svc-card { transition: transform .15s, box-shadow .15s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr !important; } }

/* ===== Section 4: Visual package estimate (zero-thinking) ===== */
.pkg-wrap { display: grid; grid-template-columns: 1.55fr 1fr; border: 1px solid var(--border-subtle); border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.pkg-left { padding: 24px; }
.pkg-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1.5px solid var(--border-subtle); border-radius: calc(14px * var(--th-radius-scale)); cursor: pointer; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s, transform .12s; margin-bottom: 12px; }
.pkg-card:hover { border-color: var(--red-200); }
.pkg-card.on { border-color: var(--th-red); background: var(--surface-tint-red); box-shadow: var(--shadow-cta); }
.pkg-card:last-of-type { margin-bottom: 0; }
.pkg-truck { width: 72px; height: 60px; flex: none; border-radius: 12px; background: var(--navy-900); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.pkg-card.on .pkg-truck { background: var(--th-red); }
.pkg-truck .ton { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.pkg-body { flex: 1; min-width: 0; }
.pkg-title { font-size: calc(15px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0; line-height: 1.25; }
.pkg-area { font-size: 11.5px; font-weight: 700; color: var(--th-red); text-transform: uppercase; letter-spacing: .04em; }
.pkg-sub { font-size: 12.5px; color: var(--neutral-500); margin: 4px 0 0; line-height: 1.45; }
.pkg-check { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; }
.pkg-card.on .pkg-check { background: var(--th-red); border-color: var(--th-red); }
.pkg-price-bar { margin-top: 18px; padding: 16px 18px; border-radius: calc(12px * var(--th-radius-scale)); background: var(--neutral-50); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pkg-right { background: var(--surface-tint-red); border-left: 1px solid var(--border-subtle); padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pkg-dashed { border: 2px dashed var(--th-red); border-radius: calc(14px * var(--th-radius-scale)); padding: 22px 20px; width: 100%; }
.zalo-btn { background: #0068FF; color: #fff; }
.zalo-btn:hover { background: #0055d4; transform: translateY(-1px); }
@media (max-width: 900px) {
  .pkg-wrap { grid-template-columns: 1fr; }
  .pkg-right { border-left: none; border-top: 1px solid var(--border-subtle); }
}

/* office district matrix */
.ofdist-wrap { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }
.ofdist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ofdist-badge { display: flex; align-items: center; gap: 7px; padding: 11px 13px; min-height: 44px; border: 1px solid var(--border-subtle);
  border-radius: calc(12px * var(--th-radius-scale)); background: #fff; color: var(--navy-900); font-size: 14px; font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow-xs); transition: border-color .15s, color .15s, background .15s, transform .12s; }
.ofdist-badge:hover { border-color: var(--th-red); color: var(--th-red); background: var(--surface-tint-red); transform: translateY(-2px); }
@media (min-width: 861px) { .ofdist-toggle { display: none !important; } }
@media (max-width: 900px) { .ofdist-wrap { grid-template-columns: 1fr; } .ofdist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .ofdist-badge.extra { display: none; }
  .ofdist-grid.open .ofdist-badge.extra { display: flex; }
}

/* coverage directory (bản đồ + panel chọn dịch vụ theo khu vực) — port từ trang chủ */
.cov-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
.cov-map { position: relative; overflow: hidden; border-radius: calc(16px * var(--th-radius-scale)); min-height: 520px; background: var(--navy-900); box-shadow: var(--shadow-md); }
.cov-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.02); }
.cov-map-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,22,49,.55) 0%, rgba(1,22,49,.12) 32%, rgba(1,22,49,.62) 100%); pointer-events: none; }
.cov-map-head { position: absolute; top: 22px; left: 24px; right: 24px; z-index: 3; pointer-events: none; }
.cov-office-card { position: absolute; bottom: 20px; left: 20px; z-index: 5; width: min(280px, 70%); background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lg); }
.cov-dir { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: calc(16px * var(--th-radius-scale)); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.cov-dir-head { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border-subtle); }
.cov-count { flex: none; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--surface-tint-red); color: var(--th-red); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cov-svc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cov-svc-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: #fff; color: var(--th-red); font-family: inherit; font-weight: 700; font-size: 12.5px; line-height: 1.1; text-transform: none; letter-spacing: 0; cursor: pointer; transition: all .14s; white-space: nowrap; }
.cov-svc-tab.on { background: var(--th-red); color: #fff; border-color: var(--th-red); }
.cov-svc-tab i, .cov-svc-tab svg { width: 15px; height: 15px; flex: none; }
.cov-list { padding: 10px; overflow-y: auto; max-height: 470px; display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
.cov-list::-webkit-scrollbar { width: 8px; }
.cov-list::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 999px; }
.cov-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--navy-900); border: 1px solid transparent; transition: background .14s, border-color .14s, color .14s; }
.cov-item:hover, .cov-item.on { background: var(--surface-tint-red); border-color: var(--red-100); color: var(--th-red); }
.cov-item-pin { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; }
.cov-item.on .cov-item-pin, .cov-item:hover .cov-item-pin { background: #fff; }
.cov-item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cov-item-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cov-item-zone { font-size: 11.5px; color: var(--neutral-500); }
.cov-item.on .cov-item-zone, .cov-item:hover .cov-item-zone { color: var(--red-400); }
@media (max-width: 860px) { .cov-wrap { grid-template-columns: 1fr; } .cov-map { min-height: 320px; } .cov-list { max-height: 380px; } }
@media (max-width: 560px) { .cov-svc-tabs { gap: 5px; } .cov-svc-tab { gap: 4px; padding: 8px 4px; font-size: 11.5px; } .cov-svc-tab i, .cov-svc-tab svg { width: 13px; height: 13px; } }




  /* ===== Service page specific ===== */
  .sv-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-500); }
  .sv-breadcrumb a { color: var(--neutral-500); text-decoration: none; }
  .sv-breadcrumb a:hover { color: var(--th-red); }

  /* Hero */
  .sv-hero-grid { display: grid; grid-template-columns: 55fr 45fr; gap: 40px; align-items: center; }
  .sv-tick { display: flex; align-items: center; gap: 9px; font-size: calc(15px * var(--th-font-scale)); color: var(--neutral-700); font-weight: 500; }
  .sv-tick .t { width: 22px; height: 22px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .sv-leadform { display: grid; gap: 12px; }
  .sv-leadrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* booking slot tracker */
  .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .slot-day-label { font-size: 12.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; text-align: center; }
  .slot-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--border-subtle); background: #fff; font-size: 12.5px; font-weight: 600; transition: all .14s; margin-bottom: 6px; }
  .slot-cell .dot { width: 7px; height: 7px; border-radius: 50%; }
  .slot-cell.avail { color: var(--success); } .slot-cell.avail .dot { background: var(--success); }
  .slot-cell.avail:hover, .slot-cell.sel { border-color: var(--success); background: var(--success-bg); }
  .slot-cell.full { color: var(--neutral-400); background: var(--neutral-50); cursor: not-allowed; } .slot-cell.full .dot { background: var(--neutral-300, #ccc); }

  /* scope timeline */
  .scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .scope-card { position: relative; }
  .scope-line { position: absolute; top: 30px; left: 50%; width: 100%; height: 2px; z-index: 0;
    background-image: linear-gradient(90deg, var(--neutral-200) 0 7px, transparent 7px 14px); background-size: 14px 2px; }

  /* price matrix */
  .pm-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .pm-table th { background: var(--neutral-50); color: var(--navy-900); font-weight: 700; font-size: 13px; text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); }
  .pm-table th:first-child { text-align: left; }
  .pm-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--neutral-700); text-align: right; font-weight: 500; }
  .pm-table td:first-child { text-align: left; }
  .pm-table th:first-child, .pm-table td:first-child { padding-left: 20px; }
  .pm-table th:last-child, .pm-table td:last-child { padding-right: 20px; }
  .pm-table tr:last-child td { border-bottom: none; }
  .pm-table .veh { color: var(--navy-900); font-weight: 600; }

  /* === Local district chips === */
  .locg-h { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-900); margin: 0 0 16px; }
  .locg-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; flex: none; }
  .locg-n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--neutral-400); text-transform: none; letter-spacing: 0; }
  .locg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }
  .locg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: 10px; background: #fff; border: 1px solid var(--border-subtle); color: var(--neutral-700); font-size: 13.5px; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-xs, 0 1px 2px rgba(1,22,49,.05)); transition: border-color .14s, color .14s, background .14s, transform .12s; }
  .locg-pin { flex: none; display: inline-flex; }
  .locg-tx { line-height: 1.35; }
  .locg-chip b { font-weight: 700; color: var(--navy-900); }
  .locg-chip:hover { border-color: var(--th-red); color: var(--th-red); background: var(--surface-tint-red); transform: translateY(-2px); }
  .locg-chip:hover b { color: var(--th-red); }

  /* fee box (2 columns + divider) */
  .fee-box { padding: 26px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 36px; align-items: start; }
  .fee-divider { background: var(--border-subtle); align-self: stretch; }

  /* volume calculator */
  .vc-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--border-subtle); border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
  .vc-left { padding: 24px; }
  .vc-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
  .vc-tab { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: #fff; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; color: var(--neutral-700); transition: all .14s; }
  .vc-tab.on { background: var(--th-red); color: #fff; border-color: var(--th-red); }
  .vc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .vc-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; }
  .vc-item-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-tint-red); color: var(--th-red); display: flex; align-items: center; justify-content: center; flex: none; }
  .vc-item-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--navy-900); min-width: 0; }
  .vc-item-sub { font-size: 11.5px; color: var(--neutral-400); font-weight: 500; }
  .vc-stepper { display: flex; align-items: center; gap: 4px; flex: none; }
  .vc-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border-subtle); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--navy-900); display: flex; align-items: center; justify-content: center; transition: all .12s; }
  .vc-btn:hover { border-color: var(--th-red); color: var(--th-red); }
  .vc-btn:disabled { opacity: .4; cursor: not-allowed; }
  .vc-qty { width: 26px; text-align: center; font-weight: 700; font-size: 15px; color: var(--navy-900); }
  .vc-right { background: var(--navy-900); color: #fff; padding: 26px 24px; display: flex; flex-direction: column;
    background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 20px 20px; }

  /* SEO factor cards */
  .factor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .factor-card { background: var(--neutral-50); border: 1px solid var(--border-subtle); border-radius: calc(14px * var(--th-radius-scale)); padding: 24px; }

  /* equipment grid */
  .eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  /* route compliance */
  .route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  .route-map { position: relative; min-height: 420px; border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; background: var(--navy-900); }

  /* checklist hub */
  .chk-tabs { display: inline-flex; padding: 5px; background: var(--neutral-50); border-radius: 999px; gap: 4px; margin-bottom: 24px; }
  .chk-tab { padding: 10px 20px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-weight: 700; font-size: 14px; font-family: inherit; color: var(--neutral-500); text-transform: none; letter-spacing: 0; transition: all .15s; }
  .chk-tab.on { background: #fff; color: var(--th-red); box-shadow: var(--shadow-sm); }
  .chk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .chk-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: 12px; cursor: pointer; transition: all .14s; background: #fff; }
  .chk-item.done { background: var(--success-bg); border-color: #BCE6D2; }
  .chk-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; transition: all .14s; margin-top: 1px; }
  .chk-item.done .chk-box { background: var(--success); border-color: var(--success); }
  .chk-text { font-size: 14px; line-height: 1.5; color: var(--navy-900); }
  .chk-item.done .chk-text { color: var(--neutral-500); text-decoration: line-through; }

  /* local district coverage (house-moving SEO) */
  .loc-wrap { display: grid; grid-template-columns: 350px 1fr; gap: 24px; align-items: stretch; }
  .loc-panel { position: relative; overflow: hidden; background: var(--navy-900); border-radius: calc(18px * var(--th-radius-scale)); padding: 32px 30px; display: flex; flex-direction: column; justify-content: center; }
  .loc-panel-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(228,188,108,.16) 1px, transparent 1.4px); background-size: 20px 20px; pointer-events: none; }
  .loc-panel > * { position: relative; z-index: 1; }
  .loc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-content: center; }
  .loc-zone-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--th-red); margin: 0 0 10px; }
  .loc-zone-h::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
  .loc-link { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--neutral-700); text-decoration: none; transition: color .14s, padding .14s; }
  .loc-link:hover { color: var(--th-red); padding-left: 4px; }
  .loc-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: none; transition: background .14s; }
  .loc-link:hover .dot { background: var(--th-red); }
  @media (max-width: 860px) { .loc-wrap { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .loc-cols { grid-template-columns: 1fr; } }

  /* hero trust strip + pills/chips (homepage style) */
  .th-pill.heronavy { background: var(--navy-900); color: #fff; box-shadow: 0 6px 16px rgba(1,22,49,.28); }
  .th-pill.heronavy:hover { background: #02244e; transform: translateY(-1px); color: #fff; }
  .hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0; border-radius: calc(16px * var(--th-radius-scale)); }
  .hero-trust-cell { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 18px 16px; }
  .hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface-tint-red); color: var(--navy-900); font-size: 14px; font-weight: 600; }

  /* advantages reuse cols-3 from shared; nothing extra */

  /* === Price factors clean 2x2 === */
  .pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .pf-cell { background: #fff; border: 1px solid var(--border-subtle); border-radius: calc(14px * var(--th-radius-scale)); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s; }
  .pf-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .pf-top { display: flex; align-items: center; justify-content: space-between; }
  .pf-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; }
  .pf-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--surface-tint-red); }
  .pf-ul { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px dashed var(--border-subtle); display: grid; gap: 9px; }
  .pf-ul li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--neutral-700); line-height: 1.45; }
  .pf-ul li svg, .pf-ul li i { flex: none; margin-top: 2px; }
  @media (max-width: 760px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
  .pf-ul { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px dashed var(--border-subtle); display: grid; gap: 9px; }
  .pf-ul li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--neutral-700); line-height: 1.45; }
  .pf-ul li svg, .pf-ul li i { flex: none; margin-top: 2px; }
  @media (max-width: 480px) { .pf-grid { grid-template-columns: 1fr; } }

  /* === Advantages editorial (no boxes) === */
  .adv-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .adv-row { display: flex; gap: 22px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid var(--border-subtle); }
  .adv-edit .adv-row:nth-last-child(-n+2) { border-bottom: none; }
  .adv-figure { flex: none; font-size: 56px; font-weight: 800; line-height: .9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--red-200, #F3B5B4); transition: -webkit-text-stroke-color .2s, color .2s; }
  .adv-row:hover .adv-figure { color: var(--th-red); -webkit-text-stroke-color: var(--th-red); }
  .adv-rule { width: 34px; height: 3px; background: var(--th-red); border-radius: 999px; margin: 0 0 12px; }
  .adv-row h3 { display: flex; align-items: center; gap: 9px; }
  .adv-row h3 .mi { color: var(--th-red); }

  /* === Solutions image cards === */
  .sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .sol-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s; }
  .sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .sol-thumb { position: relative; height: 150px; }
  .sol-thumb .ph { width: 100%; height: 100%; }
  .sol-badge { position: absolute; left: 16px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; z-index: 2; }
  .sol-no2 { position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(1,22,49,.55); border-radius: 999px; padding: 4px 10px; z-index: 2; }
  .sol-content { padding: 32px 20px 22px; flex: 1; }

  /* === Workflow timeline === */
  .flow-timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .flow-timeline::before { content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 3px; background-image: linear-gradient(90deg, var(--red-200,#F3B5B4) 0 8px, transparent 8px 16px); background-size: 16px 3px; z-index: 0; }
  .flow-node { position: relative; z-index: 1; text-align: center; }
  .flow-circle { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--th-red); color: var(--th-red); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; box-shadow: 0 4px 14px rgba(191,6,3,.14); }
  .flow-circle .num { position: absolute; top: -8px; right: 50%; transform: translateX(34px); width: 26px; height: 26px; border-radius: 50%; background: var(--th-red); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

  /* === Advantages bento === */

  /* workflow (homepage flow-step7) */
  .flow-grid7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .flow-step7 { padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
  .flow-ico { position: relative; flex: none; }
  .flow-ico .circle { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-tint-red); color: var(--th-red); display: flex; align-items: center; justify-content: center; }
  .flow-ico .num { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--th-red); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

  /* quick calculator (homepage style) */
  .calc-card { display: grid; grid-template-columns: 1.3fr 1fr; padding: 0; overflow: hidden; }
  .calc-addon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--border-subtle); border-radius: 10px; cursor: pointer; transition: all .14s; }
  .calc-addon.on { border-color: var(--th-red); background: var(--surface-tint-red); }
  .calc-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; transition: all .14s; }
  .calc-addon.on .calc-box { background: var(--th-red); border-color: var(--th-red); }
  .calc-result { background: var(--navy-900); color: #fff; padding: 26px; display: flex; flex-direction: column; background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 20px 20px; }

  /* local split */
  .loc-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
  .loc-zone-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-900); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
  .loc-cols { display: grid; grid-template-columns: 1fr; gap: 2px 0; }
  .loc-link { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 14px; font-weight: 500; color: var(--neutral-700); text-decoration: none; white-space: nowrap; transition: color .14s, padding .14s; }
  .loc-link:hover { color: var(--th-red); padding-left: 4px; }
  .loc-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: none; transition: background .14s; }
  .loc-link:hover .dot { background: var(--th-red); }

  /* terrain solution grid */
  .terrain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .terrain-card { padding: 24px; transition: transform .15s, box-shadow .15s; }
  .terrain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  /* package comparison */
  .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .cmp-col { border: 1px solid var(--border-subtle); border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
  .cmp-col.featured { border: 2px solid var(--th-red); box-shadow: var(--shadow-md); }
  .cmp-head { padding: 22px 24px; }
  .cmp-col.featured .cmp-head { background: var(--surface-tint-red); }
  .cmp-li { display: flex; gap: 10px; padding: 11px 24px; font-size: 14px; color: var(--neutral-700); border-top: 1px solid var(--border-subtle); line-height: 1.5; }
  .cmp-li .ic { flex: none; margin-top: 2px; }

  /* packing layers */
  .pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .pack-step { text-align: center; position: relative; }
  .pack-num { width: 54px; height: 54px; border-radius: 50%; background: var(--th-red); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-weight: 800; font-size: 20px; box-shadow: var(--shadow-cta); position: relative; z-index: 1; }
  .pack-line { position: absolute; top: 27px; left: 50%; width: 100%; height: 2px; z-index: 0; background-image: linear-gradient(90deg, var(--red-200,#F3B5B4) 0 7px, transparent 7px 14px); background-size: 14px 2px; }

  /* insurance banner */
  .ins-banner { position: relative; overflow: hidden; background: linear-gradient(110deg, var(--red-700,#850402), var(--red-500,#BF0603)); border-radius: calc(20px * var(--th-radius-scale)); padding: 40px 44px; display: flex; align-items: center; gap: 30px; }
  .ins-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 20px 20px; pointer-events: none; }
  .ins-badge { position: relative; z-index: 1; flex: none; width: 118px; height: 118px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-weight: 800; font-size: 13px; text-align: center; line-height: 1.15; }

  /* mobile utility bar */
  .util-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: none; background: #fff; box-shadow: 0 -4px 16px rgba(1,22,49,.16); }
  .util-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px; color: #fff; text-decoration: none; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }
  .util-bar .u-call { background: var(--th-red); } .util-bar .u-zalo { background: var(--blue-800); } .util-bar .u-book { background: var(--navy-900); }

  /* sticky kicker */
  .kicker { background: var(--neutral-900); color: #fff; }
  .kicker-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; }
  .sticky-kicker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--neutral-900); color: #fff;
    display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }

  /* ---- responsive ---- */
  @media (max-width: 900px) {
    .factor-grid, .eq-grid { grid-template-columns: 1fr; }
    .route-grid { grid-template-columns: 1fr; }
    .vc-wrap { grid-template-columns: 1fr; }
    .terrain-grid { grid-template-columns: 1fr 1fr; }
    .sol-grid { grid-template-columns: 1fr 1fr; }
    .adv-bento { grid-template-columns: 1fr; }
    .adv-edit { grid-template-columns: 1fr; }
    .adv-edit .adv-row:nth-last-child(2) { border-bottom: 1px solid var(--border-subtle); }
    .adv-cell.feat { grid-row: auto; }
    .flow-timeline { grid-template-columns: 1fr 1fr 1fr; row-gap: 30px; }
    .flow-timeline::before { display: none; }
    .flow-grid7 { grid-template-columns: 1fr 1fr; }
    .calc-card { grid-template-columns: 1fr; }
    .loc-split { grid-template-columns: 1fr; }
    .fee-box { grid-template-columns: 1fr; gap: 28px; }
    .fee-divider { display: none; }
    .pack-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 26px; }
    .pack-line { display: none; }
    .ins-banner { flex-direction: column; text-align: center; padding: 32px 24px; }

    /* NOTE: fix tràn ngang máy tính giá (.calc-*), bảng phí (.fee-box) và bảng giá
       (.pm-table) đã chuyển sang global.css (site-wide, không scope) để TRANG CHỦ
       cũng dùng chung component này được fix giống hệt. Không lặp lại ở đây. */
  }
  @media (max-width: 860px) {
    .sv-hero-grid { grid-template-columns: 1fr; gap: 26px; }
    .scope-grid { grid-template-columns: 1fr; }
    .scope-line { display: none; }
    .chk-list { grid-template-columns: 1fr; }
    .cmp-grid { grid-template-columns: 1fr; }
    .sticky-kicker { display: none; }
    .util-bar { display: flex; }
    body { padding-bottom: 60px; }
    .kicker-inner { flex-direction: column; text-align: center; }
  }
  @media (max-width: 560px) {
    .terrain-grid { grid-template-columns: 1fr; }
    .sol-grid { grid-template-columns: 1fr; }
    .flow-grid7 { grid-template-columns: 1fr; }
    .flow-timeline { grid-template-columns: 1fr 1fr; }
    .loc-cols { grid-template-columns: 1fr; }
    .hero-trust { grid-template-columns: 1fr 1fr; }
    .pack-grid { grid-template-columns: 1fr; }
    /* checklist tabs mobile: pill viền đỏ giống .cov-svc-tab ở trang chủ
       (nền trắng chữ đỏ, tab active tô đỏ đặc). 3 cột đều, canh giữa. */
    .chk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 6px; padding: 0; background: transparent; border-radius: 0; }
    .chk-tab { min-width: 0; padding: 10px 6px; font-size: 12.5px; font-weight: 700; line-height: 1.2; border-radius: 999px; text-align: center; text-transform: none; border: 1.5px solid var(--border-subtle); background: #fff; color: var(--th-red); display: flex; align-items: center; justify-content: center; box-shadow: none; }
    .chk-tab.on { background: var(--th-red); color: #fff; border-color: var(--th-red); box-shadow: none; }
  }
  @media (max-width: 560px) {
    .sv-leadrow { grid-template-columns: 1fr; }
    .vc-items { grid-template-columns: 1fr; }
    .slot-grid { grid-template-columns: 1fr; }
  }


/* ============================================================
   SERVICE PAGE additions (placeholders, FAQ, booking popup)
   ============================================================ */
/* Branded image placeholders (no real photos yet) */
.th-ph {
  background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
  border: 1px solid rgba(1,22,49,.06);
  border-radius: calc(16px * var(--th-radius-scale));
  overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 18px; min-height: 120px; color: var(--neutral-400);
}
.th-ph-ic {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: #fff; color: var(--th-red);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(1,22,49,.08);
}
.th-ph-tx { font-size: 12.5px; font-weight: 600; line-height: 1.4; max-width: 240px; color: var(--neutral-500); }

/* FAQ accordion */
.svc-faq-item { padding: 0; overflow: hidden; border: 1px solid var(--border-subtle); transition: border-color .2s; }
.svc-faq-item.open { border-color: var(--th-red); }
.svc-faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
  text-transform: none; /* huỷ uppercase mặc định của Flatsome cho <button> */
}
.svc-faq-qt { flex: 1; font-size: calc(16px * var(--th-font-scale)); font-weight: 600; color: var(--navy-900); text-transform: none; }
.svc-faq-ic {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--neutral-50); color: var(--th-red); transition: background .2s, transform .25s, color .2s;
}
.svc-faq-item.open .svc-faq-ic { background: var(--th-red); color: #fff; transform: rotate(180deg); }
.svc-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); }
.svc-faq-item.open .svc-faq-a { max-height: 640px; }
.svc-faq-a p { padding: 0 20px 18px; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--neutral-700); }

/* Booking popup */
.svc-pop { position: fixed; inset: 0; background: rgba(1,22,49,.6); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; }
.svc-pop[hidden] { display: none; }
.svc-pop-card { width: min(420px, 94vw); padding: 26px; background: #fff; }
.svc-pop-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.svc-pop-top h3 { font-size: calc(20px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0; }
.svc-pop-x { background: none; border: none; cursor: pointer; color: var(--neutral-400); font-size: 24px; line-height: 1; }
.svc-pop-lead { font-size: 13.5px; color: var(--neutral-500); margin: 0 0 16px; }
.svc-pop-lead b { color: var(--th-red); }
.svc-pop-fields { display: grid; gap: 12px; }
.svc-pop-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy-900); }
.svc-pop-fields input {
  height: 46px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--text-body);
  background: #fff; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-btn); outline: none;
}
.svc-pop-fields input:focus { border-color: var(--th-red); box-shadow: var(--ring-focus); }
.svc-pop-err { color: var(--error); font-size: 12.5px; margin: 0; }
.svc-pop-done { text-align: center; padding: 10px 0; }
.svc-pop-check { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-tint-red); color: var(--th-red); align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }
.svc-pop-done h3 { font-size: calc(19px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 8px; }
.svc-pop-done p { font-size: 14px; color: var(--neutral-700); margin: 0 auto 18px; max-width: 300px; line-height: 1.55; }

/* ===== Office page: HR checklist 2-column groups ===== */
.hrchk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.hrchk-h { display: flex; align-items: center; gap: 9px; font-size: calc(15px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 760px) { .hrchk-cols { grid-template-columns: 1fr; gap: 22px; } }

/* Office page: vertical process timeline */
.of-timeline { display: flex; flex-direction: column; }
.of-tl-row { display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.of-tl-rail { display: flex; flex-direction: column; align-items: center; }
.of-tl-dot { width: 48px; height: 48px; border-radius: 50%; background: var(--th-red); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-cta); }
.of-tl-line { width: 2px; flex: 1; min-height: 18px; margin: 6px 0; background-image: linear-gradient(var(--red-200, #F3B5B4) 0 7px, transparent 7px 13px); background-size: 2px 13px; }
.of-tl-card { padding: 20px 24px; margin-bottom: 18px; transition: transform .15s, box-shadow .15s; }
.of-tl-card:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.of-tl-step { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--th-red); }

/* Office page: bouncing section divider orb */
.sec-divider { display: flex; justify-content: center; margin-top: 30px; }
.sec-divider-orb { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.sec-divider-orb svg, .sec-divider-orb i { animation: divbounce 1.8s var(--ease-out) infinite; }
@keyframes divbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .sec-divider-orb svg, .sec-divider-orb i { animation: none; } }

/* ===== Policy page (cam-ket-boi-thuong): warranty & compensation ===== */
/* Hero — pink→white gradient (deliberately NOT navy so it doesn't clash with header). */
.pol-hero { background: linear-gradient(180deg, var(--surface-tint-red) 0%, #fff 100%); color: var(--navy-900); padding: 52px 0 44px; border-bottom: 1px solid var(--border-subtle); }
.pol-hero .th-eyebrow { color: var(--th-red); }
.pol-hero .th-eyebrow::before { background: var(--th-red); }

/* Layout: sticky TOC + content */
.pol-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }
.pol-toc { position: sticky; top: 88px; display: grid; gap: 4px; }
.pol-toc a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--neutral-500); text-decoration: none; border-left: 3px solid transparent; transition: all .14s; }
.pol-toc a svg { flex: none; }
.pol-toc a:hover { background: var(--neutral-50); color: var(--navy-900); }
.pol-toc a.active { background: var(--surface-tint-red); color: var(--th-red); border-left-color: var(--th-red); }
body.th-svc .pol-toc a:hover, body.th-svc .pol-toc a.active { text-decoration: none; }

.pol-sec { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--border-subtle); scroll-margin-top: 88px; }
.pol-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pol-sec > h2 { display: flex; align-items: center; gap: 12px; font-size: calc(24px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 18px; letter-spacing: -0.01em; }
.pol-sec h2 .n { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--th-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; }
.pol-sec p { font-size: calc(15.5px * var(--th-font-scale)); line-height: 1.75; color: var(--neutral-700); margin: 0 0 14px; }

/* highlight cover card */
.cover-card { border: 2px solid var(--th-red); border-radius: 14px; padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 8px; }
.cover-card .big { flex: none; font-size: 30px; font-weight: 800; color: var(--th-red); line-height: 1; }
.cover-card p { margin: 0; }

/* list items */
.pol-list { display: grid; gap: 12px; margin: 6px 0 0; }
.pol-li { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.pol-li .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.pol-li.no .ic { background: var(--surface-tint-red); color: var(--th-red); }
.pol-li.yes .ic { background: var(--success-bg); color: var(--success); }
.pol-li.warn .ic { background: #FFF8EB; color: var(--copper-500); }
.pol-li span.tx { font-size: 14.5px; line-height: 1.6; color: var(--neutral-700); padding-top: 3px; }
.pol-li span.tx b { color: var(--navy-900); }

/* step / callout */
.pol-callout { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 14px; background: var(--navy-900); color: #fff; }
.pol-callout .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(228,188,108,.16); display: flex; align-items: center; justify-content: center; }
.pol-callout h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: #fff; }
.pol-callout p { margin: 0; font-size: 14px; color: #C2C8D6; line-height: 1.6; }

.pol-note { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 14px; background: #FFF8EB; border: 1px solid #F0DCB0; }
.pol-note .ic { flex: none; color: var(--copper-500); }
.pol-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #7A5B1E; }
.pol-note b { color: #5C4413; }

/* bottom CTA (red with dotted texture) */
.pol-cta { background: var(--th-red); background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 22px 22px; }

@media (max-width: 900px) {
  .pol-wrap { grid-template-columns: 1fr; gap: 24px; }
  .pol-toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
  .pol-toc a { border-left: none; border: 1px solid var(--border-subtle); padding: 8px 12px; font-size: 13px; }
  .pol-toc a.active { border-color: var(--th-red); }
}
/* Mobile: stack dọc + giãn dòng cho các khối policy (cover-card, callout) */
@media (max-width: 560px) {
  .th-container { padding: 0 16px; }
  .pol-sec { padding-bottom: 32px; margin-bottom: 32px; }
  .pol-sec > h2 { align-items: flex-start; gap: 10px; font-size: calc(20px * var(--th-font-scale)); line-height: 1.3; }
  .pol-sec h2 .n { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .pol-sec p { line-height: 1.8; }
  /* Section 1 — thẻ "100%": xếp dọc để chữ chiếm trọn chiều ngang, hết bị bóp hẹp */
  .cover-card { flex-direction: column; gap: 10px; padding: 20px 18px; }
  .cover-card .big { font-size: 36px; }
  /* Section 3 — box navy: giãn dòng cho đỡ sát, nới padding */
  .pol-callout { flex-direction: column; gap: 12px; padding: 20px 18px; }
  .pol-callout p { font-size: 14.5px; line-height: 1.75; }
  /* Danh sách miễn trừ: bớt padding cho vừa màn hẹp, giãn dòng chữ */
  .pol-li { padding: 14px 15px; gap: 11px; }
  .pol-li span.tx { line-height: 1.68; }
}

/* ===== Survey page (chinh-sach-khao-sat): quy trình khảo sát & báo giá ===== */
/* Info-page hero — pink→white gradient (base .sv-hero; service pages use .sv-hero-grid). */
.sv-hero { background: linear-gradient(180deg, var(--surface-tint-red) 0%, #fff 100%); padding: 52px 0 44px; border-bottom: 1px solid var(--border-subtle); }
.sv-hero .th-eyebrow { color: var(--th-red); }
.sv-hero .th-eyebrow::before { background: var(--th-red); }

/* Two contrasting survey-option cards */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-card { position: relative; border: 1px solid var(--border-subtle); border-radius: 18px; background: #fff; padding: 30px 28px; box-shadow: var(--shadow-sm); overflow: hidden; }
.form-card.feat { border: 2px solid var(--th-red); }
.form-card .tag { position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; letter-spacing: .02em; }
.form-card .tag.blue { background: #E7F1FA; color: var(--blue-800); }
.form-card .tag.free { background: var(--surface-tint-red); color: var(--th-red); }
.form-ic { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.form-ic.blue { background: #E7F1FA; color: var(--blue-800); }
.form-ic.red { background: var(--surface-tint-red); color: var(--th-red); }
.form-card h3 { font-size: calc(20px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 10px; line-height: 1.3; }
.form-card p { font-size: calc(14.5px * var(--th-font-scale)); line-height: 1.7; color: var(--neutral-700); margin: 0 0 18px; }
/* display:block — trước dùng flex khiến đoạn text có <b> bị tách thành 3 "cột" chữ hẹp */
.form-when { display: block; font-size: 13.5px; line-height: 1.6; color: var(--neutral-500); padding: 12px 14px; border-radius: 10px; background: var(--neutral-50); margin-bottom: 18px; }
.form-when b { color: var(--navy-900); }
body.th-svc .form-card .th-pill:hover { text-decoration: none; }

/* Process steps timeline (vertical) */
.tl { max-width: 780px; margin: 0 auto; }
.tl-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 50px; height: 50px; border-radius: 50%; background: var(--th-red); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-cta); font-weight: 800; }
.tl-line { flex: 1; width: 2px; background-image: linear-gradient(var(--red-200, #F3B5B4) 0 6px, transparent 6px 12px); background-size: 2px 12px; margin: 6px 0; min-height: 20px; }
.tl-body { padding-bottom: 28px; }
.tl-card { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px 22px; background: #fff; box-shadow: var(--shadow-sm); }
.tl-card h3 { display: flex; align-items: center; gap: 9px; font-size: calc(17px * var(--th-font-scale)); font-weight: 700; color: var(--navy-900); margin: 0 0 6px; }
.tl-card h3 svg { flex: none; }

/* Contact section (navy panel, 2 tap-to-call phone cards) */
.contact-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; border-radius: 20px; overflow: hidden; background: var(--navy-900); background-image: radial-gradient(rgba(228,188,108,.16) 1px, transparent 1.4px); background-size: 22px 22px; padding: 40px; }
.contact-phone { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); text-decoration: none; transition: background .15s, transform .12s; }
body.th-svc .contact-phone:hover { background: rgba(255,255,255,.11); transform: translateY(-2px); text-decoration: none; }
.contact-phone .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--th-red); display: flex; align-items: center; justify-content: center; }
.contact-phone .lbl { font-size: 12.5px; color: #9aa3b5; }
.contact-phone .num { font-size: calc(21px * var(--th-font-scale)); font-weight: 800; color: #fff; letter-spacing: .02em; }

@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; padding: 30px 24px; }
}
/* Mobile: badge chuyển về static (nằm trên tiêu đề) để không đè lên chữ h3 */
@media (max-width: 560px) {
  .form-card { padding: 24px 20px; }
  .form-card .tag { position: static; display: inline-block; margin: 0 0 12px; }
  .form-card h3 { font-size: calc(19px * var(--th-font-scale)); }
}

/* ============================================================
   WAREHOUSE page (chuyen-kho-xuong-1): partner strip · fee rows ·
   case studies + lightbox. Only rendered on th-svc pages.
   ============================================================ */

/* Fee list rows (bảng phí bốc xếp / dịch vụ kèm theo) */
.fee-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.fee-row:last-child { border-bottom: none; }

/* Industrial partner marquee */
.partner-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-track { display: flex; gap: 18px; width: max-content; animation: partnerScroll 32s linear infinite; }
.partner-strip:hover .partner-track { animation-play-state: paused; }
.partner-chip { flex: none; display: flex; align-items: center; gap: 9px; padding: 14px 24px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; color: var(--neutral-400); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s, color .2s; white-space: nowrap; }
.partner-chip:hover { filter: grayscale(0); opacity: 1; color: var(--navy-900); }
@keyframes partnerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }

/* Case study grid (2×2) */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.case-card { overflow: hidden; transition: transform .15s, box-shadow .15s; }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case-thumb { position: relative; height: 210px; overflow: hidden; }
.case-thumb img { transition: transform .3s var(--ease-out); }
.case-card:hover .case-thumb img { transform: scale(1.04); }

/* Case album lightbox */
.wh-lightbox { position: fixed; inset: 0; background: rgba(1,22,49,.86); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wh-lightbox[hidden] { display: none; }
.wh-lb-inner { width: min(880px, 94vw); }
.wh-lb-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.wh-lb-title { color: #fff; font-weight: 700; font-size: 16px; }
.wh-lb-x { background: rgba(255,255,255,.15); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.wh-lb-x:hover { background: rgba(255,255,255,.28); }
.wh-lb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wh-lb-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; display: block; }

@media (max-width: 900px) {
  .wh-intro-cols { column-count: 1 !important; }
  .wh-feat-row { grid-template-columns: 1fr 1fr !important; }
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wh-feat-row { grid-template-columns: 1fr !important; }
  .wh-lb-grid { grid-template-columns: 1fr; }
  .wh-lb-grid img { height: 200px; }
}

/* ============================================================
   INTER-PROVINCE page (chuyen-nha-lien-tinh): coverage regions ·
   compare table · tips list · naked-timeline step badge.
   Only rendered on th-svc pages.
   ============================================================ */

/* Timeline step badge (naked .tl timeline, no .tl-card) */
.tl-step { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--th-red); }

/* Coverage — trunk banner (TP.HCM ⇄ Hà Nội) + region cards */
.cov-trunk { display: flex; align-items: center; gap: 18px; background: var(--navy-900); background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 20px 20px; border-radius: calc(16px * var(--th-radius-scale)); padding: 22px 26px; color: #fff; }
.cov-trunk-ic { flex: none; width: 54px; height: 54px; border-radius: 14px; background: rgba(228,188,108,.16); display: flex; align-items: center; justify-content: center; }
.cov-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cov-reg { padding: 22px 22px 20px; }
.cov-reg-h { display: flex; align-items: center; gap: 9px; font-size: calc(17px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 14px; }
.cov-reg-h svg { flex: none; }
.cov-reg-h .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--th-red); background: var(--surface-tint-red); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cov-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cov-chip { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 500; color: var(--neutral-700); background: var(--neutral-50); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 6px; line-height: 1.25; }

/* Compare table (self-move vs full-service) */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: calc(14px * var(--th-radius-scale)); box-shadow: var(--shadow-sm); background: #fff; }
.cmp-tbl { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14px; }
.cmp-tbl th { background: var(--navy-900); color: #fff; font-weight: 700; font-size: 13.5px; text-align: left; padding: 14px 16px; vertical-align: middle; line-height: 1.35; }
.cmp-tbl th.hl { background: var(--th-red); }
.cmp-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--neutral-700); line-height: 1.55; }
.cmp-tbl tr:last-child td { border-bottom: none; }
.cmp-tbl .crit { font-weight: 700; color: var(--navy-900); background: var(--neutral-50); width: 150px; }
.cmp-tbl td.sol { background: var(--surface-tint-red); border-left: 2px solid var(--th-red); }
.cmp-risk { display: block; color: var(--neutral-500); font-size: 13px; margin-bottom: 10px; font-style: italic; }
.cmp-sol { display: flex; gap: 8px; color: var(--navy-900); font-weight: 500; }
.cmp-sol-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--success, #1a8f4c); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }

/* Tips list (numbered, 2-col, outline number) */
.tips-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
.tips-item { display: flex; gap: 16px; align-items: flex-start; }
.tips-no { flex: none; font-size: 32px; font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--th-red); letter-spacing: -0.03em; }

/* Tablet band: cards are 3-across but narrow — drop chips to 2 cols to avoid cramping. */
@media (max-width: 1160px) and (min-width: 861px) {
  .cov-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cov-regions { grid-template-columns: 1fr; }
  .cov-trunk { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tips-list { grid-template-columns: 1fr; }
}
/* Điện thoại: chip tỉnh về 2 cột cho rộng rãi (3 cột quá chật, tên dài bị wrap/dính),
   nới khoảng cách giữa các thẻ vùng + trong thẻ để đỡ sát nhau. */
@media (max-width: 560px) {
  .cov-regions { gap: 14px; margin-top: 14px !important; }
  .cov-reg { padding: 22px 18px; }
  .cov-reg-h { margin-bottom: 30px; row-gap: 12px; column-gap: 10px; flex-wrap: wrap; line-height: 1.3; }
  .cov-reg-h .cnt { margin-left: auto; align-self: flex-start; }
  .cov-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
  .cov-chip { padding: 11px 12px; font-size: 13.5px; line-height: 1.35; }
}

/* ============================================================
   Trang "Liên hệ" (lien-he) — hero, quick-contact, form+info, chi nhánh + map.
   ============================================================ */
.lh-hero { background: linear-gradient(180deg, #FCF0F0 0%, #fff 92%); }

/* quick contact cards */
.qc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.qc-card { padding: 26px 22px; text-align: center; text-decoration: none; display: block; transition: transform .16s, box-shadow .16s; }
.qc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.qc-ic { width: 58px; height: 58px; border-radius: 16px; background: var(--surface-tint-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }

/* form + info split */
.lh-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; }
.lh-form { padding: 30px; }
.lh-field { margin-bottom: 16px; }
.lh-label { font-size: 13.5px; font-weight: 600; color: var(--navy-900); display: block; margin-bottom: 6px; }
.lh-input, .lh-select, .lh-textarea { width: 100%; border: 1.5px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--navy-900); background: #fff; }
.lh-input:focus, .lh-select:focus, .lh-textarea:focus { outline: none; border-color: var(--th-red); box-shadow: 0 0 0 3px rgba(191,6,3,.12); }
.lh-textarea { resize: vertical; min-height: 110px; }
/* Select: theme cha ép height cố định (~37px) → cắt chữ. Ép height khớp ô input + mũi tên chevron riêng (appearance:none từ theme làm mất arrow gốc). */
.lh-select { height: 48px; line-height: 1.35; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23011631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.lh-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.lh-info { background: var(--navy-900); color: #fff; padding: 30px; border-radius: calc(16px * var(--th-radius-scale)); background-image: radial-gradient(rgba(228,188,108,.12) 1px, transparent 1.4px); background-size: 20px 20px; display: flex; flex-direction: column; }
.lh-info-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.lh-info-row:last-of-type { border-bottom: none; }
.lh-info-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex: none; }
.lh-social { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.lh-social a { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; transition: background .15s; }
.lh-social a:hover { background: var(--th-red); }

/* branches */
.br-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.br-card { padding: 24px; }
.br-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--th-red); margin-bottom: 10px; }

.map-wrap { border-radius: calc(16px * var(--th-radius-scale)); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }

@media (max-width: 900px) {
  .qc-grid { grid-template-columns: 1fr 1fr; }
  .lh-split { grid-template-columns: 1fr; }
  .br-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .qc-grid { grid-template-columns: 1fr; }
  .lh-row2 { grid-template-columns: 1fr; }
}

/* ===== Trang "Chính sách thanh toán" (chinh-sach-thanh-toan) ===== */
.pay-hero { background: linear-gradient(180deg,#FCF0F0 0%,#fff 92%); }
.pay-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-500); }
.pay-breadcrumb a { color: var(--neutral-500); text-decoration: none; }
.pay-breadcrumb a:hover { color: var(--th-red); }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pay-card { padding: 30px; position: relative; overflow: hidden; }
.pay-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--th-red); }
.pay-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-tint-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.bank-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--border-subtle); }
.bank-row:last-child { border-bottom: none; }
.bank-k { font-size: 13.5px; color: var(--neutral-500); flex: none; }
.bank-v { font-size: 14.5px; font-weight: 700; color: var(--navy-900); text-align: right; word-break: break-word; }
.copy-btn { border: none; background: var(--surface-tint-red); color: var(--th-red); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .14s; margin-left: 8px; vertical-align: middle; }
.copy-btn:hover { background: var(--th-red); color: #fff; }
.info-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-cell { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--border-subtle); border-radius: calc(12px * var(--th-radius-scale)); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.info-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--th-red); }
.info-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.info-cell .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; flex: none; }
.thanks { background: var(--navy-900); background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 22px 22px; border-radius: calc(20px * var(--th-radius-scale)); padding: 44px 40px; text-align: center; }
@media (max-width: 860px) { .pay-methods { grid-template-columns: 1fr; } .info-strip { grid-template-columns: 1fr; } }

/* ===== Trang "Giới thiệu" (gioi-thieu) ===== */
.ab-hero { background: linear-gradient(180deg,#FCF0F0 0%,#fff 78%); position: relative; overflow: hidden; }
.ab-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-500); }
.ab-breadcrumb a { color: var(--neutral-500); text-decoration: none; }
.ab-breadcrumb a:hover { color: var(--th-red); }
.ab-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; position: relative; z-index: 1; }
.ab-hero-media { position: relative; }
.ab-hero-media img { display: block; width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 16px; border: 1px solid var(--border-subtle); background: #eef1f6; box-shadow: var(--shadow-lg); }
.ab-hero-badge { position: absolute; left: -18px; bottom: 28px; background: var(--th-red); color: #fff; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-cta); }
.ab-hero-badge .n { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.ab-hero-badge .l { font-size: 13px; font-weight: 600; line-height: 1.2; opacity: .95; }
@media (max-width: 860px) { .ab-hero-badge { left: 12px; } }

/* trust badges strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-badge { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px; }
.trust-badge .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 860px) { .trust-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } }

/* intro brand band (navy) */
.ab-brand { position: relative; overflow: hidden; background: var(--navy-900); }
.ab-brand-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; }
.ab-brand-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 38px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 560px) { .ab-brand-stats { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* milestone timeline */
.ms-wrap { display: flex; gap: 0; margin-top: 38px; }
.ms-step { flex: 1; text-align: center; position: relative; padding: 0 10px; }
.ms-step::before { content: ""; position: absolute; top: 21px; left: 50%; width: 100%; height: 2px; background: var(--red-200,#F3B5B4); z-index: 0; }
.ms-step:last-child::before { display: none; }
.ms-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--th-red); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff; }
@media (max-width: 700px) { .ms-wrap { flex-direction: column; gap: 20px; } .ms-step { display: flex; gap: 16px; text-align: left; padding: 0; } .ms-step::before { display: none; } .ms-dot { margin: 0; flex: none; } }

/* vmv cards */
.vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vmv-card { padding: 30px 26px; position: relative; overflow: hidden; }
.vmv-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--th-red); }
.vmv-ic { width: 58px; height: 58px; border-radius: 16px; background: var(--surface-tint-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }

/* services list */
.absv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.absv-card { overflow: hidden; text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
.absv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.absv-card img { display: block; width: 100%; height: 130px; object-fit: cover; }

/* clients logos */
.cli-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cli-grid .th-card { display: flex; align-items: center; justify-content: center; padding: 16px 18px; min-height: 92px; }
.cli-logo { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: .72; transition: filter .18s, opacity .18s; }
.cli-grid .th-card:hover .cli-logo { filter: grayscale(0); opacity: 1; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.team-grid img { display: block; width: 100%; height: 220px; object-fit: cover; }

@media (max-width: 960px) {
  .absv-grid { grid-template-columns: repeat(3, 1fr); }
  .cli-grid { grid-template-columns: repeat(4, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .vmv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .absv-grid { grid-template-columns: 1fr 1fr; }
  .cli-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: 1fr 1fr; }
}