/* 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); }

/* ---------- TRẢ LẠI KHOẢNG CÁCH DƯỚI TIÊU ĐỀ ----------
   Bộ reset "body.th-svc h1..h6 { margin: 0 }" ở ngay trên có độ ưu tiên cao hơn
   các rule viết dạng .class đơn, nên nó đã vô tình xoá sạch margin-bottom mà
   thiết kế đặt cho MỌI tiêu đề của trang dịch vụ:
     .th-h2     (52 chỗ)  0 0 14px -> bị ép về 0
     .hrchk-h   (9 chỗ)   0 0 14px -> bị ép về 0
     .cov-reg-h (3 chỗ)   0 0 14px -> bị ép về 0
   Hậu quả: tiêu đề dính sát dòng mô tả / danh sách bên dưới, trong khi trang chủ
   (không có bộ reset này) vẫn giữ đúng 14px -> hai bên nhìn lệch nhau.
   Khai báo lại ở đây với cùng độ ưu tiên (body.th-svc + class) để thắng reset. */
body.th-svc .th-h2,
body.th-svc .hrchk-h,
body.th-svc .cov-reg-h { margin: 0 0 14px; }

/* Ở bản HTML cũ, khoảng cách 14px dưới tiêu đề cuối cùng bị nuốt ra ngoài
   khối bao nên không tính vào chiều cao. Cột UX Builder là ô co giãn, nó
   giữ lại khoảng cách đó và làm khối cao thêm 14px -> bỏ đi cho khớp. */
body.th-svc .th-center > .col-inner > .th-h2:last-child { margin-bottom: 0; }

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(36px * 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: đã chuyển sang global.css (nguồn duy nhất, đồng bộ mọi trang).
   Kiểu IN HOA + giãn chữ 0.12em vốn nằm ở đây được giữ làm chuẩn chung.
   Đã bỏ gạch ngang "—" trước eyebrow theo yêu cầu (2026-08-05). */

/* 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: 900px; text-wrap: pretty; }
.th-center { text-align: center; }
/* .th-center .th-eyebrow: xem global.css */
.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(26px * 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; }
/* margin: 0 -> huy margin-right/bottom ~15.5px Flatsome gan cho moi <button>:
   neu khong, o anh tran sang phai va khe ho duoi bi lech so voi khe ngang. */
.masonry-item { grid-row: span 1; margin: 0; position: relative; border: none; padding: 0; cursor: pointer; border-radius: calc(12px * var(--th-radius-scale)); overflow: hidden; background: none; width: 100%; }
.masonry-item.tall { grid-row: span 2; }
.masonry-item .ph { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--neutral-50); }
.masonry-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(1,22,49,.78)); display: flex; align-items: flex-end; padding: 14px; pointer-events: none; }
.masonry-cap span { color: #fff; font-weight: 600; font-size: 14.5px; text-align: left; line-height: 1.35; }
@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 { margin: 0; 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); }
  /* Ô khu vực chưa có trang riêng: hiển thị dạng chữ, không phải link */
  .locg-chip-off { cursor: default; }
  .locg-chip-off:hover { border-color: var(--border-subtle); color: var(--neutral-700); background: #fff; transform: none; }
  .locg-chip-off:hover b { color: var(--navy-900); }

  /* 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; }
  /* margin: 0 -> huy margin-right/bottom 14px ma Flatsome gan mac dinh cho moi <button>;
     neu khong, nut cuoi du 14px ben phai lam ca cum lech trai va lech len tren. */
  .chk-tab { margin: 0; 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; }
  /* Icon trong vòng tròn quy trình (Lucide vẽ ra <svg>) */
  /* 26px (không phải 28px): ở 28px góc trên phải của icon bị số thứ tự đè lên 2px. */
  .flow-circle i, .flow-circle svg { width: 26px; height: 26px; flex: none; stroke-width: 2; }

  /* === 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; }
  /* Trang kho xưởng (453) và liên tỉnh (455) bọc thêm một lớp #wh-breakdown
     quanh phần dòng chi tiết + khối tổng, để đổi qua lại với bảng "báo giá
     khảo sát" (#wh-quote). Lớp bọc đó là block thường, cao đúng bằng nội dung,
     nên margin-top:auto của khối tổng bên trong KHÔNG có khoảng dư nào để đẩy
     → khối tổng dính lên sát đầu, chừa một mảng nền xanh trống phía dưới.
     Trang 2111/2040 không có lớp bọc: khối tổng là con trực tiếp của
     .calc-result (vốn là flex column, cao bằng cột trái nhờ grid stretch) nên
     nằm đúng dưới đáy. Cho lớp bọc giãn hết chiều cao và cũng là flex column
     thì margin-top:auto ăn trở lại, hai kiểu trang hiện giống hệt nhau.
     JS chỉ bật/tắt bằng inline style ('none' / '') nên không đụng rule này. */
  #wh-breakdown { flex: 1; display: flex; flex-direction: column; }

  /* 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); }

/* 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); }

/* 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: 190px; }
.cmp-tbl td.sol { background: var(--surface-tint-red); border-left: 2px solid var(--th-red); }

/* ---------- SỬA 2 LỖI DO CSS MẶC ĐỊNH CỦA THEME CHA (Flatsome) ----------
   Trong flatsome.css có 2 dòng áp cho MỌI bảng của website:
     1) table { margin-bottom: 1em }              -> chừa sẵn khoảng trống dưới bảng
     2) td:first-child, th:first-child { padding-left: 0 }  -> xoá lề trái cột đầu
   Hai dòng đó viết ở dạng "thẻ" nên tưởng yếu, nhưng dòng (2) có độ ưu tiên
   ngang bằng ".cmp-tbl td" ở trên và nằm sau trong thứ tự nạp file nên nó thắng.

   Hậu quả nhìn thấy trên bảng so sánh:
     - Bảng bị đẩy lên, chừa 1 DẢI TRẮNG ~14px ở đáy khung viền bo góc .cmp-wrap
       (khung cao 831px trong khi bảng chỉ 815px) -> trông như bảng bị lỗi/hụt đáy.
     - Cột "Tiêu chí" mất hoàn toàn lề trái, chữ dính sát vào đường viền, lệch hẳn
       so với 3 cột còn lại vốn có lề 16px.

   Khai báo lại ở đây với độ ưu tiên cao hơn để trả về đúng thiết kế.
   Chỉ khoanh vùng trong .cmp-tbl, không đụng tới bảng khác của theme. */
.cmp-wrap .cmp-tbl { margin: 0; }
.cmp-tbl th:first-child,
.cmp-tbl td:first-child { padding-left: 16px; }
.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 (2 cột) — huy hiệu icon riêng cho từng mục ----------
   Trước đây ô bên trái là con số 01–06 viền đỏ cỡ 32px. Kiểu đánh số to như vậy là
   ngôn ngữ thị giác của mục "điểm mạnh / quy trình", nhìn vào không ra một mục lưu ý.
   Nay bỏ số, đưa icon vốn nằm nhỏ 18px bên trong tiêu đề ra ngoài thành huy hiệu 44px
   ở cột trái. Mỗi mục một hình khác nhau (lịch, ghim địa chỉ, bảng kiểm kê, ...) nên
   vẫn dễ lướt mắt, đồng thời trùng khớp với mọi huy hiệu icon khác của website
   (.info-cell .ic, .trust-badge .ic, .vc-item-ic ... đều nền var(--surface-tint-red)). */
.tips-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
.tips-item { display: flex; gap: 16px; align-items: flex-start; }
.tips-ic { flex: none; width: 44px; height: 44px; border-radius: calc(12px * var(--th-radius-scale)); background: var(--surface-tint-red); display: inline-flex; align-items: center; justify-content: center; }
.tips-ic svg { width: 22px; height: 22px; }
/* Bộ reset "body.th-svc h1..h6 { margin: 0 }" ở đầu file mạnh hơn ".tips-h" viết trơn,
   nên phải khai báo kèm body.th-svc thì margin dưới tiêu đề mới có tác dụng. */
body.th-svc .tips-h { font-size: calc(16.5px * var(--th-font-scale)); font-weight: 700; color: var(--navy-900); margin: 0 0 6px; }
.tips-p { font-size: 14px; color: var(--neutral-500); margin: 0; line-height: 1.6; }

/* 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; }
}

/* ---------- TIÊU ĐỀ LỚN ĐẦU TRANG (H1) TRÊN ĐIỆN THOẠI ----------
   Giống hệt lỗi ở trang chủ: cỡ chữ 40px + giãn dòng 1.12 được ghi thẳng
   trong thẻ (style nội tuyến) nên màn hình hẹp vỡ ra 5 dòng, dấu tiếng Việt
   gần chạm nhau. Thu cỡ chữ theo 3 mốc và nới giãn dòng. Ghi !important vì
   style nội tuyến luôn thắng file CSS. Máy tính giữ nguyên 40px. */
@media (max-width: 860px) {
  .sv-hero-grid h1, .ab-hero-grid h1 {
    font-size: 32px !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 15px !important;
  }
}
@media (max-width: 560px) {
  .sv-hero-grid h1, .ab-hero-grid h1 { font-size: 28px !important; }
}
@media (max-width: 360px) {
  .sv-hero-grid h1, .ab-hero-grid h1 { font-size: 25px !important; }
}

/* ================================================================
   KHỐI "LỢI THẾ / VÌ SAO CHỌN" — DỰNG BẰNG ELEMENT GỐC UX BUILDER
   ================================================================
   Trước đây cả khối là một cục HTML thô nên trong UX Builder khách chỉ
   thấy dòng chữ "HTML", không bấm sửa được. Nay tách thành: 1 hàng tiêu đề
   + 1 hàng 4 ô, mỗi ô gồm 2 element (số thứ tự + khối chữ). Toàn bộ kích
   thước giữ y hệt bản cũ: lưới 2 cột, mỗi cột 548px, khe 56px, mỗi ô đệm
   trên dưới 30px, có viền mảnh ngăn cách trừ 2 ô cuối.
   Áp cho mọi trang dùng service.css (4 trang dịch vụ). */
body.th-svc .th-adv2-sec > .section-content { padding: var(--sec-pad) 0; }
/* Bản cũ ở trang chuyển nhà & văn phòng thu đệm trên còn 35%. */
body.th-svc .th-adv2-sec.th-adv2-tight > .section-content { padding-top: calc(var(--sec-pad) * .35); }

/* Cả 2 hàng canh đúng mép trong của .th-container (1152px ở máy tính). */
body.th-svc section.th-adv2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-adv2-sec .row:first-child > .col { padding: 0; }
body.th-svc .th-adv2-row { margin-top: 30px; }
/* Khe 56px giữa 2 cột: mỗi cột chừa 28px về phía trong.
   KHÔNG dùng kiểu "đệm đều 2 bên rồi nới hàng rộng ra" như các khối khác,
   vì khe 56px lớn hơn lề 48px của .th-container -> hàng sẽ thò ra khỏi
   màn hình và sinh thanh cuộn ngang trên điện thoại. */
body.th-svc section.th-adv2-sec .row.th-adv2-row > .col { padding: 0; }
body.th-svc section.th-adv2-sec .row.th-adv2-row > .col:nth-child(odd) { padding-right: 28px; }
body.th-svc section.th-adv2-sec .row.th-adv2-row > .col:nth-child(even) { padding-left: 28px; }

/* Ô bên phải phải cao bằng ô bên trái thì 2 đường kẻ ngăn cách mới nằm
   ngang bằng nhau như bản cũ (bản cũ dùng lưới CSS nên 2 ô cùng hàng tự
   cao bằng nhau). Cột của Flatsome là flex-item nên chỉ cần cho ruột cột
   giãn hết chiều cao dòng. */
body.th-svc .th-adv2-col { display: flex; }
body.th-svc .th-adv2-col > .col-inner { flex: 1; }

body.th-svc .th-adv2-col > .col-inner {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	text-align: left;
	/* !important: Flatsome in ra luật theo id cột (#col-1234 .col-inner{padding:0}). */
	padding: 30px 0 !important;
	border-bottom: 1px solid var(--border-subtle);
}
/* Hai ô cuối bỏ đường kẻ. Dùng "of-type" chứ không phải "child": trong màn
   hình UX Builder trình dựng chèn thêm một thẻ <style> ở cuối hàng, đếm theo
   "child" sẽ lệch một nhịp khiến ô áp chót vẫn còn kẻ. */
body.th-svc .th-adv2-row > .col:nth-last-of-type(-n+2) > .col-inner { border-bottom: none; }
/* Rê chuột vào ô thì con số viền rỗng chuyển thành đỏ đặc — giống bản cũ. */
body.th-svc .th-adv2-col > .col-inner:hover .adv-figure { color: var(--th-red); -webkit-text-stroke-color: var(--th-red); }

/* Gạch đỏ ngắn phía trên tiêu đề: vẽ bằng CSS nên không phải chèn thêm một
   element rỗng vào UX Builder (element rỗng rất dễ bị khách xoá nhầm). */
body.th-svc .th-adv2-body::before { content: ""; display: block; width: 34px; height: 3px; background: var(--th-red); border-radius: 999px; margin: 0 0 12px; }
body.th-svc .th-adv2-body { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.65; color: var(--neutral-500); }
body.th-svc .th-adv2-body h3 { display: flex; align-items: center; gap: 9px; font-size: calc(18px * var(--th-font-scale)); font-weight: 800; color: var(--navy-900); margin: 0 0 8px; line-height: 1.3; }
body.th-svc .th-adv2-body h3 svg, body.th-svc .th-adv2-body h3 i { flex: none; width: 19px; height: 19px; color: var(--th-red); }
body.th-svc .th-adv2-body p { margin: 0; }

/* Trang "Chuyển nhà liên tỉnh" bản cũ để cỡ chữ nhỏ hơn 3 trang kia
   (tiêu đề 17.5px, mô tả 14px). Giữ nguyên để chữ ngắt dòng y như cũ. */
body.th-svc.page-id-455 .th-adv2-body { font-size: 14px; }
body.th-svc.page-id-455 .th-adv2-body h3 { font-size: calc(17.5px * var(--th-font-scale)); }

/* CHỈ có tác dụng trong màn hình UX Builder: trình dựng bọc mỗi element
   trong một thẻ div.uxb-wrapper kiểu inline-block + position:relative.
   Trong ô co giãn (flex) phải trả đúng vai cho 2 thẻ bọc này: ô số không co,
   ô chữ chiếm hết phần còn lại. Ngoài web không có class này nên vô hại.
   LƯU Ý: tuyệt đối không đổi lớp bọc sang position:static. Trình dựng đặt
   trong mỗi lớp bọc một tấm phủ trong suốt để bắt cú bấm chuột; bỏ
   position:relative là tấm phủ bung ra trùm cả cột, bấm vào chữ lại chọn
   nhầm sang ô HTML nên không sửa được nội dung. */
body.th-svc .th-adv2-col > .col-inner > .uxb-wrapper { position: relative; }
/* Ô số: không co giãn, chỉ rộng bằng đúng con số. */
body.th-svc .th-adv2-col > .col-inner > .uxb-wrapper--ux_html { flex: 0 0 auto; width: auto; }
body.th-svc .th-adv2-col > .col-inner > .uxb-wrapper--ux_html > div { width: auto; }
/* Ô chữ chiếm hết phần còn lại. Trình dựng đặt tên thẻ là "text"
   (không phải "ux_text") nên phải viết cả 2 cách cho chắc. */
body.th-svc .th-adv2-col > .col-inner > .uxb-wrapper--text,
body.th-svc .th-adv2-col > .col-inner > .uxb-wrapper--ux_text { flex: 1 1 0%; min-width: 0; }

/* Xuống 1 cột ở đúng mốc 900px như bản cũ (Flatsome mặc định đổi ở 849px). */
@media (max-width: 900px) {
  /* Phải viết kèm :nth-child thì mới đè được luật khe 28px ở trên: câu lệnh
     trong @media KHÔNG tự động mạnh hơn, phải bằng hoặc hơn về độ ưu tiên. */
  body.th-svc section.th-adv2-sec .row.th-adv2-row > .col:nth-child(odd),
  body.th-svc section.th-adv2-sec .row.th-adv2-row > .col:nth-child(even) { flex-basis: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
  body.th-svc .th-adv2-row > .col:nth-last-of-type(2) > .col-inner { border-bottom: 1px solid var(--border-subtle); }
}

/* ================================================================
   KHỐI "GIỚI THIỆU" (đoạn văn mở đầu) — ELEMENT GỐC UX BUILDER
   ================================================================
   Bản cũ: một khung hẹp 900px, phía trên có dấu mũi tên kép, bên dưới là
   4 đoạn văn. Nay tách thành 1 element HTML (mũi tên) + 1 element Văn bản
   (4 đoạn) để khách bấm sửa chữ trực tiếp. */
/* Bản cũ dùng lớp .tight: đệm trên 30%, đệm dưới 70% của mức chuẩn. */
body.th-svc .th-intro2-sec > .section-content { padding: calc(var(--sec-pad) * .3) 0 calc(var(--sec-pad) * .7); }
/* Khung hẹp: 900px kể cả 24px lề mỗi bên -> lòng chữ rộng đúng 852px như cũ.
   Phải xoá đệm mặc định 10px của cột (kiểu hàng "small") thì mới đủ 852. */
body.th-svc section.th-intro2-sec .row { max-width: 900px; width: 100%; }
body.th-svc section.th-intro2-sec .row > .col { padding: 0; }
body.th-svc .th-intro2-col > .col-inner { padding: 0 24px !important; }
body.th-svc .th-intro2-body p {
	font-size: calc(15.5px * var(--th-font-scale));
	line-height: 1.85;
	color: var(--neutral-700);
	margin: 0 0 16px;
}
body.th-svc .th-intro2-body p:last-child { margin-bottom: 0; }
body.th-svc .th-intro2-body b, body.th-svc .th-intro2-body strong { color: var(--navy-900); }

/* ================================================================
   KHỐI "CẨM NANG" (lưới 2 cột có ô biểu tượng) — ELEMENT GỐC UX BUILDER
   ================================================================ */
body.th-svc .th-tips2-sec > .section-content { padding: var(--sec-pad) 0; }

/* Hàng rộng đúng bằng .th-container cũ: 1200 - 48 lề = 1152. */
body.th-svc section.th-tips2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-tips2-sec .row:first-child > .col { padding: 0; }

/* Khe dọc 26px, khe ngang 44px (22px mỗi bên) — y như lưới cũ. */
body.th-svc .th-tips2-row { margin-top: 38px; }
body.th-svc section.th-tips2-sec .row.th-tips2-row > .col { padding: 0 0 26px; }
body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-child(odd) { padding-right: 22px; }
body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-child(even) { padding-left: 22px; }
/* Hàng cuối không có khe dưới. Viết đủ chuỗi chọn như luật ở trên thì mới đè
   được (câu lệnh ngắn hơn sẽ thua về độ ưu tiên). Dùng "of-type" vì trình dựng
   chèn thêm thẻ <style> ở cuối hàng, đếm theo "child" sẽ lệch một nhịp. */
body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-last-of-type(-n+2) { padding-bottom: 0; }

body.th-svc .th-tips2-col > .col-inner {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-align: left;
	padding: 0 !important;
}
body.th-svc .th-tips2-body { flex: 1; min-width: 0; }

/* CHỈ có tác dụng trong màn hình UX Builder: trình dựng bọc mỗi phần tử thêm
   một lớp div, làm hỏng bố cục ngang. Ngoài trang thật không có lớp này. */
body.th-svc .th-tips2-col > .col-inner > .uxb-wrapper { position: relative; }
body.th-svc .th-tips2-col > .col-inner > .uxb-wrapper--ux_html { flex: 0 0 auto; width: auto; }
body.th-svc .th-tips2-col > .col-inner > .uxb-wrapper--text,
body.th-svc .th-tips2-col > .col-inner > .uxb-wrapper--ux_text { flex: 1 1 0%; min-width: 0; }

/* Xuống 1 cột ở đúng mốc 860px như lưới cũ. Phải viết kèm :nth-child thì mới
   đè được luật khe 22px ở trên (câu lệnh trong @media không tự mạnh hơn). */
@media (max-width: 860px) {
	body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-child(odd),
	body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-child(even) {
		flex-basis: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 26px;
	}
	body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-last-of-type(2) { padding-bottom: 26px; }
	body.th-svc section.th-tips2-sec .row.th-tips2-row > .col:nth-last-of-type(1) { padding-bottom: 0; }
}

/* ================================================================
   KHỐI "GIẢI PHÁP DỊCH VỤ" (lưới 3 thẻ có ảnh) — ELEMENT GỐC UX BUILDER
   ================================================================ */
body.th-svc .th-sol2-sec { background: var(--neutral-50); }
body.th-svc .th-sol2-sec > .section-content { padding: var(--sec-pad) 0; }

/* Hàng tiêu đề rộng đúng bằng .th-container cũ: 1200 - 48 lề = 1152. */
body.th-svc section.th-sol2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-sol2-sec .row:first-child > .col { padding: 0; }

/* Hàng thẻ: cột kiểu "small" có đệm 10px mỗi bên -> khe giữa 2 thẻ đúng 20px
   như lưới cũ. Vì vậy hàng phải rộng thêm 20px thì mép thẻ ngoài cùng mới
   thẳng hàng với khung 1152. */
body.th-svc .th-sol2-row { margin-top: 36px; }
body.th-svc section.th-sol2-sec .row.th-sol2-row { max-width: calc(var(--maxw) - 28px); width: calc(100% - 28px); }
body.th-svc section.th-sol2-sec .row.th-sol2-row > .col { padding: 0 10px 20px; }
/* Hàng thẻ cuối không có khe dưới. */
body.th-svc section.th-sol2-sec .row.th-sol2-row > .col:nth-last-of-type(-n+3) { padding-bottom: 0; }

/* Các thẻ cùng hàng phải cao bằng nhau như lưới cũ. */
body.th-svc .th-sol2-col { display: flex; }
body.th-svc .th-sol2-col > .col-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden;
	text-align: left;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: calc(12px * var(--th-radius-scale));
	box-shadow: var(--shadow-sm);
	transition: transform .16s, box-shadow .16s;
}
body.th-svc .th-sol2-col > .col-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.th-svc .th-sol2-col .sol-content { flex: 1; }
body.th-svc .th-sol2-col .sol-content h3 {
	font-size: calc(17px * var(--th-font-scale));
	font-weight: 700;
	color: var(--navy-900);
	margin: 0 0 7px;
}
body.th-svc .th-sol2-col .sol-content p { font-size: 14px; line-height: 1.6; color: var(--neutral-500); margin: 0; }

/* CHỈ có tác dụng trong màn hình UX Builder: trình dựng bọc thêm một lớp div
   quanh mỗi phần tử, làm ruột thẻ hết giãn theo chiều dọc. */
body.th-svc .th-sol2-col > .col-inner > .uxb-wrapper { position: relative; }
body.th-svc .th-sol2-col > .col-inner > .uxb-wrapper--text,
body.th-svc .th-sol2-col > .col-inner > .uxb-wrapper--ux_text { display: flex; flex: 1; }
body.th-svc .th-sol2-col > .col-inner > .uxb-wrapper--text > div,
body.th-svc .th-sol2-col > .col-inner > .uxb-wrapper--ux_text > div { flex: 1; }

/* Xuống 2 cột ở 900px và 1 cột ở 560px — đúng như lưới cũ. Phải viết đủ chuỗi
   chọn thì mới đè được luật ở trên (câu lệnh trong @media không tự mạnh hơn). */
@media (max-width: 900px) {
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col { flex-basis: 50%; max-width: 50%; }
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col:nth-last-of-type(-n+3) { padding-bottom: 20px; }
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col:nth-last-of-type(-n+2) { padding-bottom: 0; }
}
@media (max-width: 560px) {
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col { flex-basis: 100%; max-width: 100%; }
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col:nth-last-of-type(-n+2) { padding-bottom: 20px; }
	body.th-svc section.th-sol2-sec .row.th-sol2-row > .col:nth-last-of-type(1) { padding-bottom: 0; }
}

/* ================================================================
   KHỐI "DỰ ÁN THỰC TẾ" (lưới 2 thẻ ảnh mở album) — ELEMENT GỐC UX BUILDER
   ================================================================ */
body.th-svc .th-case2-sec { background: var(--neutral-50); }
body.th-svc .th-case2-sec > .section-content { padding: var(--sec-pad) 0; }

body.th-svc section.th-case2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-case2-sec .row:first-child > .col { padding: 0; }

/* Cột kiểu "small" có đệm 10px mỗi bên -> khe giữa 2 thẻ đúng 20px như lưới cũ,
   nên hàng phải rộng thêm 20px thì mép thẻ ngoài mới thẳng khung 1152. */
body.th-svc .th-case2-row { margin-top: 34px; }
body.th-svc section.th-case2-sec .row.th-case2-row { max-width: calc(var(--maxw) - 28px); width: calc(100% - 28px); }
body.th-svc section.th-case2-sec .row.th-case2-row > .col { padding: 0 10px 20px; }
body.th-svc section.th-case2-sec .row.th-case2-row > .col:nth-last-of-type(-n+2) { padding-bottom: 0; }

body.th-svc .th-case2-col { display: flex; }
body.th-svc .th-case2-col > .col-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden;
	text-align: left;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: calc(12px * var(--th-radius-scale));
	box-shadow: var(--shadow-sm);
	transition: transform .15s, box-shadow .15s;
}
body.th-svc .th-case2-col > .col-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.th-svc .th-case2-col > .col-inner:hover .case-thumb img { transform: scale(1.04); }
body.th-svc .th-case2-body { padding: 20px; }
body.th-svc .th-case2-body h3 {
	font-size: calc(17px * var(--th-font-scale));
	font-weight: 700;
	color: var(--navy-900);
	margin: 0 0 5px;
}

/* CHỈ có tác dụng trong màn hình UX Builder. */
body.th-svc .th-case2-col > .col-inner > .uxb-wrapper { position: relative; }

/* Xuống 1 cột ở 900px như lưới cũ. */
@media (max-width: 900px) {
	body.th-svc section.th-case2-sec .row.th-case2-row > .col { flex-basis: 100%; max-width: 100%; }
	body.th-svc section.th-case2-sec .row.th-case2-row > .col:nth-last-of-type(-n+2) { padding-bottom: 20px; }
	body.th-svc section.th-case2-sec .row.th-case2-row > .col:nth-last-of-type(1) { padding-bottom: 0; }
}

/* ================================================================
   KHỐI "QUY TRÌNH" (dòng thời gian dọc) — ELEMENT GỐC UX BUILDER
   Mỗi bước là một cột riêng: bên trái là chấm tròn + đường kẻ nối,
   bên phải là thẻ nội dung. Dùng lại lớp .of-tl-* của bản cũ nên
   hình thức giữ nguyên tuyệt đối.
   ================================================================ */
body.th-svc .th-tl2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-tl2-nen { background: var(--neutral-50); }
body.th-svc section.th-tl2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-tl2-sec .row > .col { padding: 0; }
body.th-svc .th-tl2-row { margin-top: 38px; }
/* Trang chuyển văn phòng bó khung hẹp 920px và cách tiêu đề 40px. */
body.th-svc section.th-tl2-sec .row.th-tl2-row.th-tl2-hep {
	max-width: calc(920px - 48px);
	margin-top: 40px;
}
body.th-svc .th-tl2-col > .col-inner {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 20px;
	padding: 0 !important;
	text-align: left;
}
body.th-svc .th-tl2-card h3 {
	font-size: calc(17.5px * var(--th-font-scale));
	font-weight: 700;
	color: var(--navy-900);
	margin: 4px 0 8px;
}
body.th-svc .th-tl2-card p {
	font-size: 14.5px;
	color: var(--neutral-500);
	margin: 0;
	line-height: 1.65;
}
/* WordPress tự bọc nhãn "Bước n" vào một thẻ p khi dựng trang.
   Trả dòng chữ đó về đúng cỡ như bản cũ. */
body.th-svc .th-tl2-card > p:first-child {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

/* Biến thể trang liên tỉnh: khung 780px, chấm tròn 50px, thân bài không có nền. */
body.th-svc section.th-tl2-sec .row.th-tl2-row.th-tl2-780 { max-width: 780px; }
body.th-svc .th-tl3-col > .col-inner { grid-template-columns: 60px 1fr; }
body.th-svc .th-tl3-body h3 {
	font-size: calc(17px * var(--th-font-scale));
	font-weight: 700;
	color: var(--navy-900);
	margin: 2px 0 6px;
}
body.th-svc .th-tl3-body p {
	font-size: 14px;
	color: var(--neutral-500);
	margin: 0;
	line-height: 1.6;
}
body.th-svc .th-tl3-body > p:first-child {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

/* CHỈ có tác dụng trong màn hình UX Builder: riêng lớp bọc của ô HTML (chấm
   tròn + đường kẻ) phải trở thành ô lưới thì đường kẻ mới kéo hết chiều cao
   của bước. Giữ nguyên position:relative để tấm phủ bắt chuột của trình dựng
   nằm gọn trong bề ngang 48px, nhờ vậy bấm vào chữ là chọn đúng ô chữ. */
body.th-svc .th-tl2-col > .col-inner > .uxb-wrapper--ux_html,
body.th-svc .th-tl2-col > .col-inner > .uxb-wrapper--ux_html > div { display: grid; }

/* ================================================================
   KHỐI "QUY TRÌNH" DẠNG NGANG (6 vòng tròn nối nhau) — ELEMENT GỐC
   ================================================================ */
body.th-svc .th-flow2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc section.th-flow2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-flow2-sec .row > .col { padding: 0; }
body.th-svc .th-flow2-row { position: relative; margin-top: 44px; gap: 12px; }
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng. Hàng này xếp theo kiểu co giãn
   nên ô đó bị tính thành một cột thật, làm 6 bước hụt mất vài pixel -> tắt đi. */
body.th-svc .th-flow2-row::after { display: none; }
/* Đường kẻ đứt nối các bước, nằm phía sau vòng tròn. */
body.th-svc .th-flow2-row::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;
}
body.th-svc section.th-flow2-sec .row.th-flow2-row > .col { flex: 1 1 0%; max-width: none; padding: 0; }
body.th-svc .th-flow2-col > .col-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 !important;
}
body.th-svc .th-flow2-body h3 {
	font-size: calc(15px * var(--th-font-scale));
	font-weight: 700;
	color: var(--navy-900);
	margin: 0 0 6px;
}
body.th-svc .th-flow2-body p {
	font-size: 13px;
	color: var(--neutral-500);
	margin: 0;
	line-height: 1.5;
}

/* CHỈ có tác dụng trong màn hình UX Builder. */
body.th-svc .th-flow2-col > .col-inner > .uxb-wrapper { position: relative; }

/* Xuống 3 cột rồi 2 cột, giấu đường kẻ — đúng như lưới cũ. */
@media (max-width: 900px) {
	body.th-svc .th-flow2-row { gap: 30px 12px; }
	body.th-svc .th-flow2-row::before { display: none; }
	body.th-svc section.th-flow2-sec .row.th-flow2-row > .col { flex: 0 0 calc((100% - 24px) / 3); }
}
@media (max-width: 560px) {
	body.th-svc section.th-flow2-sec .row.th-flow2-row > .col { flex: 0 0 calc((100% - 12px) / 2); }
}

/* ================================================================
   KHỐI "CAM KẾT BẢO HIỂM / ĐỀN BÙ" (thẻ đỏ lớn) — ELEMENT GỐC UX BUILDER
   Cả tấm thẻ đỏ chính là ruột của một cột. Bên trong xếp ngang ba phần:
   huy hiệu tròn, đoạn chữ, nút gọi. Lớp .ins-* của bản cũ giữ nguyên
   nên hình thức không đổi một li.
   ================================================================ */
body.th-svc .th-ins2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc section.th-ins2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-ins2-sec .row > .col { padding: 0; }
body.th-svc .th-ins2-col > .col-inner {
	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 !important;
	display: flex;
	align-items: center;
	gap: 30px;
	text-align: left;
}
/* Đoạn chữ giữa thẻ: chiếm hết phần còn lại, nổi lên trên lớp chấm bi. */
body.th-svc .th-ins2-body {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
}
body.th-svc .th-ins2-body h2 {
	font-size: calc(26px * var(--th-font-scale));
	font-weight: 800;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.2;
	text-wrap: balance;
}
body.th-svc .th-ins2-body p {
	font-size: calc(15.5px * var(--th-font-scale));
	color: rgba(255, 255, 255, .92);
	margin: 0;
	line-height: 1.6;
	max-width: 760px;
}

/* CHỈ có tác dụng trong màn hình UX Builder: lớp bọc phải trong suốt
   thì ba phần bên trong mới xếp ngang đúng như ngoài trang thật. */
body.th-svc .th-ins2-col > .col-inner > .uxb-wrapper {
	position: relative;
	flex: 0 0 auto;
	width: auto !important; /* lớp bọc mặc định rộng hết hàng, phải trả về vừa nội dung */
}
body.th-svc .th-ins2-col > .col-inner > .uxb-wrapper--text { flex: 1 1 0%; min-width: 0; }

/* Máy tính bảng trở xuống: xếp dọc, canh giữa — đúng như bản cũ. */
@media (max-width: 900px) {
	body.th-svc .th-ins2-col > .col-inner {
		flex-direction: column;
		text-align: center;
		padding: 32px 24px !important;
	}
}
/* Điện thoại: lề hai bên còn 16px cho khớp khung chung. */
@media (max-width: 560px) {
	body.th-svc section.th-ins2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   KHỐI "SO SÁNH HAI GÓI" — ELEMENT GỐC UX BUILDER
   Khung bài hẹp 960px. Mỗi gói là một cột, ruột cột chính là thẻ có
   viền. Lớp .cmp-head / .cmp-li của bản cũ giữ nguyên.
   ================================================================ */
body.th-svc .th-cmp2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-cmp2-nen { background: var(--neutral-50); }
/* Hàng tiêu đề rộng đúng bằng khung 960 trừ hai lề 24px. */
body.th-svc section.th-cmp2-sec .row { max-width: calc(960px - 48px); width: calc(100% - 48px); }
body.th-svc section.th-cmp2-sec .row > .col { padding: 0; }
/* Hàng hai gói nới thêm 20px để khe giữa hai thẻ đúng bằng bản cũ. */
body.th-svc section.th-cmp2-sec .row.th-cmp2-row {
	max-width: calc(960px - 28px);
	width: calc(100% - 28px);
	margin-top: 32px;
}
body.th-svc section.th-cmp2-sec .row.th-cmp2-row > .col { padding: 0 10px; }
body.th-svc .th-cmp2-col > .col-inner {
	height: 100%;
	border: 1px solid var(--border-subtle);
	border-radius: calc(16px * var(--th-radius-scale));
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
	padding: 0 !important;
	text-align: left;
}
body.th-svc .th-cmp2-feat > .col-inner {
	border: 2px solid var(--th-red);
	box-shadow: var(--shadow-md);
}
body.th-svc .th-cmp2-head { padding: 22px 24px; }
body.th-svc .th-cmp2-feat .th-cmp2-head { background: var(--surface-tint-red); }
body.th-svc .th-cmp2-head h3 {
	font-size: calc(19px * var(--th-font-scale));
	font-weight: 800;
	color: var(--navy-900);
	margin: 0 0 4px;
}
body.th-svc .th-cmp2-head p {
	font-size: 13.5px;
	color: var(--neutral-500);
	margin: 0;
}
/* Điện thoại: hai gói xếp dọc, cách nhau 20px, lề hai bên 16px. */
@media (max-width: 560px) {
	body.th-svc section.th-cmp2-sec .row { max-width: none; width: calc(100% - 32px); }
	body.th-svc section.th-cmp2-sec .row.th-cmp2-row { max-width: none; width: calc(100% - 12px); }
}
@media (max-width: 549px) {
	body.th-svc section.th-cmp2-sec .row.th-cmp2-row > .col:not(:last-child) { padding-bottom: 20px; }
}

/* ================================================================
   PHẦN ĐẦU TÁCH RIÊNG — ELEMENT GỐC UX BUILDER
   Dùng cho các khối mà phần thân buộc phải giữ HTML: bảng so sánh nhiều
   cột, hộp tính giá chạy JS, lưới ảnh xếp gạch. Mắt chữ, tiêu đề và dòng
   dẫn tách thành element bấm sửa trực tiếp, phần thân nằm trong một hàng.
   ================================================================ */
body.th-svc .th-dau2-sec { --th-khung: var(--maxw); }
body.th-svc .th-dau2-w820 { --th-khung: 820px; }
body.th-svc .th-dau2-w940 { --th-khung: 940px; }
body.th-svc .th-dau2-w1000 { --th-khung: 1000px; }
body.th-svc .th-dau2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-dau2-tight > .section-content { padding: calc(var(--sec-pad) * .7) 0; }
body.th-svc .th-dau2-xam { background: var(--neutral-50); }
body.th-svc .th-dau2-do { background: var(--surface-tint-red); }
body.th-svc .th-dau2-trang { background: #fff; }
body.th-svc section.th-dau2-sec .row { max-width: calc(var(--th-khung) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-dau2-sec .row > .col { padding: 0; max-width: none; }
body.th-svc .th-dau2-than > .col > .col-inner { padding: 0 !important; text-align: left; }
@media (max-width: 560px) {
	body.th-svc section.th-dau2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   KHỐI HERO ĐẦU TRANG — ELEMENT GỐC UX BUILDER
   Hai bên trái/phải thành hai cột thật, chia 55/45 và cách nhau 40px
   đúng như lưới cũ. Vẫn giữ lớp .sv-hero-grid trên hàng vì các quy tắc
   thu nhỏ chữ H1 theo bề ngang màn hình viết bám vào lớp đó.
   Khoảng đệm trên/dưới mỗi trang mỗi khác nên để thành biến.
   ================================================================ */
body.th-svc .th-hero2-sec {
	--th-hero-tren: .7;
	--th-hero-duoi: .35;
	background: linear-gradient(180deg, #FCF0F0 0%, #fff 78%);
}
body.th-svc .th-hero2-tren80 { --th-hero-tren: .8; }
body.th-svc .th-hero2-duoi30 { --th-hero-duoi: .3; }
body.th-svc .th-hero2-duoi40 { --th-hero-duoi: .4; }
body.th-svc .th-hero2-sec > .section-content {
	padding: calc(var(--sec-pad) * var(--th-hero-tren)) 0 calc(var(--sec-pad) * var(--th-hero-duoi));
}
/* Hàng đường dẫn (Trang chủ › … › trang hiện tại) do PHP chèn vào đầu hero. */
body.th-svc section.th-hero2-sec .row.th-hero2-duong { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-hero2-sec .row.th-hero2-duong > .col { padding: 0; max-width: none; }
body.th-svc .th-hero2-duong > .col > .col-inner { padding: 0 !important; }
body.th-svc section.th-hero2-sec .row.th-hero2-row {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 40px;
	align-items: center;
	max-width: calc(var(--maxw) - 48px);
	width: calc(100% - 48px);
}
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, lưới sẽ tính nó thành
   một ô thật và đẩy cột phải xuống dòng -> tắt đi. */
body.th-svc .th-hero2-row::after { display: none; }
body.th-svc section.th-hero2-sec .row.th-hero2-row > .col {
	padding: 0; max-width: none; width: auto; min-width: 0;
}
body.th-svc .th-hero2-row > .col > .col-inner { padding: 0 !important; text-align: left; }
/* Hàng phụ dưới hero: đoạn dẫn giữa trang và mũi tên phân cách. Chúng tự
   canh giữa bằng margin auto nên hàng chỉ cần đúng bề ngang khung chữ. */
body.th-svc section.th-hero2-sec .row.th-hero2-them { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-hero2-sec .row.th-hero2-them > .col { padding: 0; max-width: none; }
body.th-svc .th-hero2-them > .col > .col-inner { padding: 0 !important; }
@media (max-width: 860px) {
	body.th-svc section.th-hero2-sec .row.th-hero2-row { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
	body.th-svc section.th-hero2-sec .row.th-hero2-duong,
	body.th-svc section.th-hero2-sec .row.th-hero2-row,
	body.th-svc section.th-hero2-sec .row.th-hero2-them { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   KHỐI "CÂU HỎI THƯỜNG GẶP" — ELEMENT GỐC UX BUILDER
   Khung chữ hẹp hơn các khối khác (820px thay vì 1200px). Mỗi câu hỏi là
   một cột riêng để bấm sửa được từng câu, các câu cách nhau 12px.
   ================================================================ */
body.th-svc .th-faq2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-faq2-nen { background: var(--neutral-50); }
body.th-svc .th-faq2-trang { background: #fff; }
body.th-svc section.th-faq2-sec .row { max-width: calc(820px - 48px); width: calc(100% - 48px); }
body.th-svc section.th-faq2-sec .row > .col { padding: 0; max-width: none; }
body.th-svc .th-faq2-row { margin-top: 30px; gap: 12px; }
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, hàng có khe sẽ tính nó
   thành một cột thật và ăn mất một khe -> tắt đi. */
body.th-svc .th-faq2-row::after { display: none; }
body.th-svc section.th-faq2-sec .row.th-faq2-row > .col { flex: 0 0 100%; }
body.th-svc .th-faq2-col > .col-inner { padding: 0 !important; text-align: left; }
@media (max-width: 560px) {
	body.th-svc section.th-faq2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   DẢI "ĐỐI TÁC KHU CÔNG NGHIỆP" — ELEMENT GỐC UX BUILDER
   Dải logo chạy ngang phải giữ nguyên một mảng HTML vì nó là một băng
   chuyền liền mạch. Phần chữ tiêu đề tách ra thành đoạn văn sửa được.
   ================================================================ */
body.th-svc .th-par2-sec > .section-content { padding: calc(var(--sec-pad) * .7) 0; }
body.th-svc .th-par2-nen { background: var(--neutral-50); }
body.th-svc section.th-par2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-par2-sec .row > .col { padding: 0; }
body.th-svc .th-par2-eyebrow,
body.th-svc .th-par2-eyebrow p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--neutral-500);
}
/* Dải chạy tràn hết bề ngang màn hình, không bó trong khung 1200px. */
body.th-svc section.th-par2-sec .row.th-par2-strip { max-width: none; width: 100%; margin-top: 22px; }
@media (max-width: 560px) {
	body.th-svc section.th-par2-sec .row { max-width: none; width: calc(100% - 32px); }
	body.th-svc section.th-par2-sec .row.th-par2-strip { width: 100%; }
}

/* ================================================================
   KHỐI "PHẠM VI TUYẾN" (liên tỉnh) — ELEMENT GỐC UX BUILDER
   Hàng thứ hai đóng vai dải băng tối "trục chính": biểu tượng, phần chữ
   và nút gọi là ba cột. Hàng thứ ba là ba tấm thẻ miền, cách nhau 18px.
   ================================================================ */
body.th-svc .th-tuy2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-tuy2-nen { background: var(--neutral-50); }
body.th-svc section.th-tuy2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-tuy2-sec .row > .col { padding: 0; max-width: none; }

/* Dải băng trục chính TP.HCM ⇄ Hà Nội. */
body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk {
	box-sizing: border-box;
	margin-top: 32px;
	align-items: center;
	gap: 18px;
	padding: 22px 26px;
	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));
	color: #fff;
	text-align: left;
}
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, hàng có khe sẽ tính nó
   thành một cột thật và ăn mất một khe -> tắt đi. */
body.th-svc .th-tuy2-trunk::after { display: none; }
body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk > .th-tuy2-ic { flex: 0 0 54px; }
body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk > .th-tuy2-tx { flex: 1 1 0%; }
/* Cột nút co theo bề ngang chữ. Giao diện chung đặt sẵn width:100% cho mọi
   cột nên phải trả về auto, không thì nút chiếm trọn hàng và bị đẩy xuống. */
body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk > .th-tuy2-nut { flex: 0 0 auto; width: auto; }
body.th-svc .th-tuy2-trunk > .col > .col-inner { padding: 0 !important; }
body.th-svc .th-tuy2-nut > .col-inner,
body.th-svc .th-tuy2-nut .uxb-wrapper { width: auto !important; }

/* Ba tấm thẻ miền Nam / Trung / Bắc. */
body.th-svc .th-tuy2-row { margin-top: 18px; gap: 18px; align-items: stretch; }
body.th-svc .th-tuy2-row::after { display: none; }
body.th-svc section.th-tuy2-sec .row.th-tuy2-row > .col { flex: 1 1 0%; }
body.th-svc .th-tuy2-col > .col-inner {
	height: 100%;
	padding: 22px 22px 20px !important;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: calc(12px * var(--th-radius-scale));
	box-shadow: var(--shadow-sm);
	text-align: left;
}
/* Dòng ghi chú nhỏ nằm dưới ba tấm thẻ. */
body.th-svc section.th-tuy2-sec .row.th-tuy2-ghi { margin-top: 18px; }
body.th-svc .th-tuy2-note p { margin: 0; font-size: 13.5px; color: var(--neutral-500); }

/* Máy tính bảng trở xuống: dải băng xếp dọc, ba thẻ miền xếp dọc. */
@media (max-width: 860px) {
	body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk { align-items: flex-start; gap: 14px; }
	body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk > .th-tuy2-ic,
	body.th-svc section.th-tuy2-sec .row.th-tuy2-trunk > .th-tuy2-tx { flex: 0 0 100%; }
	body.th-svc section.th-tuy2-sec .row.th-tuy2-row > .col { flex: 0 0 100%; }
}
/* Điện thoại: nới khe giữa các thẻ, thu bớt đệm trong thẻ. */
@media (max-width: 560px) {
	body.th-svc section.th-tuy2-sec .row { max-width: none; width: calc(100% - 32px); }
	body.th-svc .th-tuy2-row { margin-top: 14px; gap: 14px; }
	body.th-svc .th-tuy2-col > .col-inner { padding: 22px 18px !important; }
}

/* ================================================================
   KHỐI "KHU VỰC PHỤC VỤ" CÓ BẢN ĐỒ — ELEMENT GỐC UX BUILDER
   Hai cột: bản đồ rộng 1.3 phần, danh mục quận rộng 1 phần, cách nhau
   22px. Hàng co giãn chia đúng tỉ lệ như lưới cũ.
   ================================================================ */
body.th-svc .th-cov2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-cov2-nen { background: var(--neutral-50); }
body.th-svc section.th-cov2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-cov2-sec .row > .col { padding: 0; }
body.th-svc .th-cov2-row { margin-top: 34px; gap: 22px; align-items: stretch; }
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, hàng có khe sẽ tính nó
   thành một cột thật và ăn mất một khe -> tắt đi. */
body.th-svc .th-cov2-row::after { display: none; }
body.th-svc section.th-cov2-sec .row.th-cov2-row > .col { flex: 1 1 0%; max-width: none; padding: 0; }
body.th-svc section.th-cov2-sec .row.th-cov2-row > .th-cov2-map { flex-grow: 1.3; }
body.th-svc .th-cov2-map > .col-inner {
	position: relative;
	overflow: hidden;
	border-radius: calc(16px * var(--th-radius-scale));
	min-height: 520px;
	height: 100%;
	background: var(--navy-900);
	box-shadow: var(--shadow-md);
	padding: 0 !important;
}
/* Tấm thẻ trắng nay do chính element [th_kv_ds] in ra (thẻ .cov-dir, đã có
   viền + bo góc + đổ bóng ở khối luật .cov-* phía trên). Cột chỉ còn việc bỏ
   đệm và kéo thẻ cao bằng bản đồ bên cạnh. */
body.th-svc .th-cov2-dir > .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
	text-align: left;
}
body.th-svc .th-cov2-dir .cov-dir { flex: 1; min-height: 0; }
/* Máy tính bảng trở xuống: bản đồ nằm trên, danh mục nằm dưới. */
@media (max-width: 860px) {
	body.th-svc section.th-cov2-sec .row.th-cov2-row > .col,
	body.th-svc section.th-cov2-sec .row.th-cov2-row > .th-cov2-map { flex: 0 0 100%; }
	body.th-svc .th-cov2-map > .col-inner { min-height: 320px; }
}
@media (max-width: 560px) {
	body.th-svc section.th-cov2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   KHỐI "KHU VỰC PHỤC VỤ" (ô chữ nhật từng quận) — ELEMENT GỐC UX BUILDER
   Hàng thứ hai đóng vai tấm thẻ trắng của bản cũ: có viền, bo góc, đệm
   30px và giãn 28px giữa các nhóm khu vực. Mỗi nhóm là một cột.
   ================================================================ */
body.th-svc .th-loc2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc .th-loc2-nen { background: var(--neutral-50); }
body.th-svc section.th-loc2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-loc2-sec .row > .col { padding: 0; }
body.th-svc section.th-loc2-sec .row.th-loc2-row {
	box-sizing: border-box;
	margin-top: 32px;
	padding: 30px;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: calc(12px * var(--th-radius-scale));
	box-shadow: var(--shadow-sm);
	gap: 28px;
	text-align: left;
}
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, hàng có khe sẽ tính nó
   thành một cột thật và ăn mất một khe -> tắt đi. */
body.th-svc .th-loc2-row::after { display: none; }
body.th-svc section.th-loc2-sec .row.th-loc2-row > .col { flex: 0 0 100%; max-width: none; padding: 0; }
body.th-svc .th-loc2-col > .col-inner { padding: 0 !important; }
/* Vạch kẻ mảnh ngăn giữa hai nhóm khu vực. */
body.th-svc .th-loc2-line { height: 1px; background: var(--border-subtle); }
/* Dòng ghi chú nhỏ nằm ngay dưới tấm thẻ. */
body.th-svc section.th-loc2-sec .row.th-loc2-ghi { margin-top: 8px; }
body.th-svc .th-loc2-note p { margin: 0; font-size: 14px; color: var(--neutral-500); }
body.th-svc .th-loc2-note b { color: var(--navy-900); }
@media (max-width: 560px) {
	body.th-svc section.th-loc2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ================================================================
   KHỐI "4 YẾU TỐ QUYẾT ĐỊNH GIÁ" — ELEMENT GỐC UX BUILDER
   Bốn thẻ bằng nhau, khe 18px. Hàng xếp theo kiểu co giãn nên chia
   đều y hệt lưới cũ, không cần bù trừ lề.
   ================================================================ */
body.th-svc .th-pf2-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-svc section.th-pf2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
body.th-svc section.th-pf2-sec .row > .col { padding: 0; }
body.th-svc .th-pf2-row { margin-top: 36px; gap: 18px; }
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng, hàng co giãn sẽ tính nó
   thành một cột thật và ăn mất một khe -> tắt đi. */
body.th-svc .th-pf2-row::after { display: none; }
body.th-svc section.th-pf2-sec .row.th-pf2-row > .col { flex: 1 1 0%; max-width: none; padding: 0; }
body.th-svc .th-pf2-col > .col-inner {
	height: 100%;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: calc(14px * var(--th-radius-scale));
	padding: 26px 24px !important;
	box-shadow: var(--shadow-sm);
	transition: transform .16s, box-shadow .16s;
	text-align: left;
}
body.th-svc .th-pf2-col > .col-inner:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
body.th-svc .th-pf2-body h3 {
	font-size: calc(18px * var(--th-font-scale));
	font-weight: 800;
	color: var(--navy-900);
	margin: 16px 0 8px;
}
body.th-svc .th-pf2-body p {
	font-size: 14px;
	color: var(--neutral-500);
	margin: 0 0 14px;
	line-height: 1.55;
}
/* Trong cột, giao diện chung thụt mỗi dòng danh sách vào 1.3em. Bản cũ nằm
   ngoài cột nên không bị thụt -> trả về 0 để chữ xuống hàng y hệt bản cũ. */
body.th-svc .th-pf2-col .pf-ul li { margin-left: 0; }
/* Xuống 2 thẻ rồi 1 thẻ — đúng như lưới cũ. */
@media (max-width: 760px) {
	body.th-svc section.th-pf2-sec .row.th-pf2-row > .col { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 560px) {
	body.th-svc section.th-pf2-sec .row { max-width: none; width: calc(100% - 32px); }
}
@media (max-width: 480px) {
	body.th-svc section.th-pf2-sec .row.th-pf2-row > .col { flex: 0 0 100%; }
}

/* ---------- 9b. BẢNG SO SÁNH TRỌN GÓI — DỰNG BẰNG ELEMENT GỐC UX BUILDER ----------
   Bản cũ là một thẻ <table> nhét trong 1 khối HTML nên bấm vào không sửa được chữ.
   Nay mỗi hàng là 1 Row, mỗi ô là 1 Text riêng -> bấm thẳng vào ô nào sửa ô đó.
   Bề rộng 4 cột lấy đúng số đo của bảng cũ (190 / 231.2 / 265.7 / 463.1 trên 1150px)
   nên nhìn ngoài trang không khác một pixel nào. */

/* Khung bao ngoài — thay cho .cmp-wrap */
body.th-svc .th-cmp2-wrap > .col-inner {
	margin-top: 32px;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: calc(14px * var(--th-radius-scale));
	box-shadow: var(--shadow-sm);
}

/* Mỗi hàng bảng. Phải gỡ bề rộng khung mà .th-dau2-sec .row áp cho mọi row. */
body.th-svc section.th-dau2-sec .row.th-cmp2-row {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	min-width: 860px;
	flex-wrap: nowrap;
}
body.th-svc section.th-dau2-sec .row.th-cmp2-row > .col {
	display: flex;
	padding: 0;
	max-width: none;
}

/* Bề rộng 4 cột */
body.th-svc .th-cmp2-row > .col.th-cmp2-c1 { flex: 0 0 16.5217%; }
body.th-svc .th-cmp2-row > .col.th-cmp2-c2 { flex: 0 0 20.1043%; }
body.th-svc .th-cmp2-row > .col.th-cmp2-c3 { flex: 0 0 23.1043%; }
body.th-svc .th-cmp2-row > .col.th-cmp2-c4 { flex: 0 0 40.2697%; }

/* Ô — thay cho <td> */
body.th-svc .th-cmp2-row > .col > .col-inner {
	flex: 1;
	padding: 14px 16px !important;
	/* Bảng cũ khai báo 14px nhưng Flatsome có sẵn "td { font-size: .9em }" nên chữ
	   thật sự hiển thị là 12.6px. Ghi đúng 12.6px để cỡ chữ y hệt bản cũ. */
	font-size: 12.6px;
	line-height: 1.55;
	color: var(--neutral-700);
	text-align: left;
	border-bottom: 1px solid var(--border-subtle);
}
body.th-svc .th-cmp2-row.th-cmp2-cuoi > .col > .col-inner { border-bottom: none; }
body.th-svc .th-cmp2-row .th-cmp2-cell p { margin: 0; }
body.th-svc .th-cmp2-row .th-cmp2-cell p + p { margin-top: 10px; }

/* Hàng tiêu đề — thay cho <th> */
body.th-svc .th-cmp2-head > .col > .col-inner {
	display: flex;
	align-items: center;
	background: var(--navy-900);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	border-bottom: none;
}
body.th-svc .th-cmp2-head > .col.th-cmp2-c4 > .col-inner { background: var(--th-red); }

/* Cột "Tiêu chí" và cột giải pháp bôi màu — thay cho td.crit / td.sol */
body.th-svc .th-cmp2-row:not(.th-cmp2-head) > .col.th-cmp2-c1 > .col-inner {
	background: var(--neutral-50);
	color: var(--navy-900);
	font-weight: 700;
}
body.th-svc .th-cmp2-row:not(.th-cmp2-head) > .col.th-cmp2-c4 > .col-inner {
	background: var(--surface-tint-red);
	border-left: 2px solid var(--th-red);
}

/* Dòng rủi ro (chữ nghiêng xám) và dòng giải pháp (có dấu tích tròn xanh).
   Dấu tích vẽ bằng ::before nên người dùng sửa chữ thoải mái, icon không mất. */
body.th-svc .th-cmp2-rui {
	color: var(--neutral-500);
	font-size: 13px;
	font-style: italic;
}
body.th-svc .th-cmp2-giai {
	display: flex;
	gap: 8px;
	color: var(--navy-900);
	font-weight: 500;
}
body.th-svc .th-cmp2-giai::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231a8f4c'/%3E%3Cpath d='M20 6 9 17l-5-5' transform='translate(4 4.3) scale(0.6667)' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}