/* ============================================================
   KQT LUXURY — TRANG DỊCH VỤ LẮP ĐẶT (/dich-vu-lap-dat/)
   Nạp CHỈ trên trang này (xem kqt_inject_service_css() trong functions.php).
   Bám --navy/--gold/... của kqt-chrome.css (đã nạp trước, cùng giá trị với
   bản thiết kế — không cần khai lại :root). Mọi luật scope dưới body.kqt-svc,
   theo đúng quy ước body.kqt-home / body.kqt-plp đã có trong theme.

   ĐỢT 1: Breadcrumb + S1 Hero + S5 Bảng giá + S6 Form đặt lịch — ĐÃ khớp
   file thiết kế gốc "website KQT.COM (5).zip" (dich-vu-lap-dat.html/
   kqt-service.css/.js) ngay từ đầu.
   ĐỢT 2–4 (2026-09-09) bản đầu: S2/S3/S4/S7/S8/S9/S10/S11/S12 do AI tự
   nháp nội dung — SAI so với file thiết kế gốc (Quyết báo "chưa giống với
   thiết kế"). ĐỢT 5 (2026-09-09) — VIẾT LẠI 9 section này bám sát 100%
   file thiết kế gốc: đúng class, đúng chữ, đúng thứ tự nền
   trắng→trắng→navy→trắng→paper→navy→trắng→kem→trắng→kem→navy→gold-tint.
   Riêng S7 link "Điện gia dụng" KHÔNG có danh mục khớp tên trên kqt.local
   → theo yêu cầu Quyết, tạm trỏ về "Điện Máy" (dien-may). Đủ 12/12 section
   đúng thiết kế kể từ đợt này.
   ============================================================ */

/* ---------- nền trắng cho toàn trang (bắt buộc khai RÕ) ----------
   Trang này dùng template Flatsome "page-blank.php" → bọc nội dung bằng
   #content.content-area, KHÔNG phải #main/#wrapper (nơi duy nhất flatsome.css
   tự đặt background-color:#fff). Kết quả: suốt cascade không có bất kỳ luật
   nào khai nền trắng cho body/#content trên trang này — Quyết báo "nền xám
   xịt sau tiêu đề S9, xấu hơn hẳn thiết kế" dù mọi class/màu trong theme đều
   đúng: khoảng trống này khiến trình duyệt/OS ở chế độ Dark tự tô xám mọi
   vùng KHÔNG có nền khai rõ (thẻ .policy trắng thì KHÔNG bị vì nó tự khai
   background:var(--white) — đúng như ảnh chụp: chữ mờ xám, 4 thẻ vẫn trắng
   tinh). color-scheme:light chặn hẳn heuristic đó, background là lưới an
   toàn thứ hai phòng khi trình duyệt không đọc color-scheme. */
body.kqt-svc{ background:var(--white); color-scheme:light; }
html:has(body.kqt-svc){ background:var(--white); color-scheme:light; }

/* ---------- component còn thiếu so với kqt-chrome.css ---------- */
/* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site, theo yêu cầu Quyết sau khi
   thấy About lệch): wire font-size sang var(--fs-eyebrow) — giá trị số
   giữ NGUYÊN 14px, chỉ đổi nguồn tham chiếu để About/Dịch vụ/Trang chủ
   dùng chung 1 biến, sửa 1 chỗ áp dụng mọi nơi. */
/* SỬA 2026-09-10 (Quyết yêu cầu bỏ vạch trang trí): đã gỡ ::before (vạch vàng
   26px trước chữ eyebrow) + gap:12px đi kèm nó. Nhãn "eyebrow" giờ chỉ còn chữ. */
body.kqt-svc .eyebrow{
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe); }
body.kqt-svc .section--navy .eyebrow{ color:var(--gold-light); }
body.kqt-svc .btn--ghost{ background:transparent; border:1px solid var(--navy); color:var(--navy); }
body.kqt-svc .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); }
/* .btn--ghost mặc định viền/chữ MÀU NAVY (dành cho nền sáng) — mọi section nền
   navy KHÔNG mang class .section--navy (tự khai background:var(--navy) riêng)
   đều lọt lưới luật nền-tối này: S1 Hero (.svc-hero — đã vá, nút "Bảng giá
   dịch vụ"/"Đặt lịch lắp đặt" chìm) và S6 Đặt lịch (.booking — 2 nút "Gọi
   1900 6789"/"Chat Zalo" cùng lỗi y hệt, Quyết khoanh đỏ hỏi "section này
   thiếu 2 nút này r?" vì trình duyệt tự bù màu ép trắng/đen cho dễ đọc — che
   mất bug thật, đúng thiết kế phải là viền/chữ màu kem nhạt trong suốt).
   Khai thêm .svc-hero + .booking vào cùng luật nền-tối với .section--navy,
   và sửa luôn :hover (bản gốc hover→nền navy cũng chìm y hệt trên nền navy). */
body.kqt-svc .section--navy .btn--ghost,
body.kqt-svc .svc-hero .btn--ghost,
body.kqt-svc .booking .btn--ghost{ border-color:rgba(244,241,234,.4); color:var(--on-navy); }
body.kqt-svc .section--navy .btn--ghost:hover,
body.kqt-svc .svc-hero .btn--ghost:hover,
body.kqt-svc .booking .btn--ghost:hover{ background:rgba(244,241,234,.12); border-color:var(--gold-light); color:var(--on-navy); }

/* ---------- section nền + khối tiêu đề dùng chung ---------- */
/* SỬA 2026-09-10 (đồng bộ spacing toàn site, Quyết báo qua rà soát trang
   Liên hệ): trang này CHƯA BAO GIỜ tự định nghĩa padding-block cho `.section`
   — mọi khối dùng class="section" trần (Cam kết/Quy trình/Bảng giá/Danh mục/
   Chính sách/FAQ/Khu vực/Hình ảnh) đang rơi về đúng va chạm tên class với
   Flatsome (`flatsome.css: .section{padding:30px 0}`, ngoài ra còn kéo theo
   display:flex/align-items:center không mong muốn) — chỉ 30px mỗi đầu, hẹp
   hơn hẳn Giới thiệu (`.ab-sec{padding:84px 0}`, tự khai riêng) và Liên hệ
   (`.section{padding-block:clamp(56px,7.4vw,96px)}`, tự khai riêng để né
   đúng va chạm này). Thêm luật này cho khớp Liên hệ — dùng chung 1 giá trị. */
body.kqt-svc .section{ padding-block:clamp(56px,7.4vw,96px); }
body.kqt-svc .section--navy{ background:var(--navy); }
/* Đợt 6 (2026-09-09) — Quyết báo H2 cứ bị ép xuống 2-3 dòng dù câu ngắn.
   Root cause: max-width:62ch đặt trên .svc-head (font-size nhỏ, kế thừa body)
   nhưng áp cho CẢ h2 (font to gấp 2-3 lần) → 62ch quy ra ~550px cố định,
   quá hẹp so với chữ to của h2. Đúng nguyên văn file thiết kế gốc, nhưng
   Quyết chọn "nới rộng cho H2" — chuyển max-width sang riêng cho .svc-head p
   (đo theo cỡ chữ thường của chính nó, đúng ý ban đầu là giới hạn ĐOẠN MÔ TẢ
   dễ đọc), H2 không còn bị giới hạn theo con số đo sai cỡ chữ. */
body.kqt-svc .svc-head .eyebrow{ margin-bottom:14px; }
/* Đợt 6 (2026-09-09) — cùng đợt giảm cỡ chữ H: H2 tối đa 42px → 34px
   (~18%, mức "Giảm vừa" Quyết chọn), min giữ nguyên 26px.
   SỬA 2026-09-10: wire sang var(--fs-h2) — giá trị giữ NGUYÊN, mốc này
   chính là chuẩn dùng để định nghĩa --fs-h2 dùng chung toàn site. */
body.kqt-svc .svc-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.15;
  color:var(--navy); text-wrap:balance; }
body.kqt-svc .svc-head p{ max-width:62ch; margin-top:14px; color:var(--ink-2); line-height:1.7; }
body.kqt-svc .section--navy .svc-head h2{ color:var(--white); }
body.kqt-svc .section--navy .svc-head p{ color:var(--on-navy-2); }

/* ---------- Breadcrumb ---------- */
body.kqt-svc .crumb{ padding:18px 0 4px; }
body.kqt-svc .crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-size:13px; color:var(--taupe); }
body.kqt-svc .crumb li{ display:flex; align-items:center; gap:8px; }
body.kqt-svc .crumb li::after{ content:"\203A"; color:var(--gold); font-size:14px; }
body.kqt-svc .crumb li:last-child::after{ display:none; }
body.kqt-svc .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }
body.kqt-svc .crumb a{ color:var(--taupe); transition:color .2s; }
body.kqt-svc .crumb a:hover{ color:var(--gold-dark); }

/* ============ 1 · HERO ============ */
body.kqt-svc .svc-hero{ position:relative; background:var(--navy); overflow:hidden; }
body.kqt-svc .svc-hero__bg{ position:absolute; inset:0; z-index:0; }
body.kqt-svc .svc-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
body.kqt-svc .svc-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#0B1626 6%,rgba(11,22,38,.92) 42%,rgba(11,22,38,.42) 100%); }
body.kqt-svc .svc-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(44px,6.5vw,86px); }
body.kqt-svc .svc-hero .eyebrow{ color:var(--gold-light); }
/* Đợt 6 (2026-09-09) — Quyết báo "chữ hơi to", chọn mức "Giảm vừa (~18%)"
   qua AskUserQuestion: H1 tối đa 54px → 44px. Giữ nguyên min (30px), chỉ
   giảm hệ số vw và max theo cùng tỉ lệ ~0.81 để đường cong responsive
   không đổi hình dạng, chỉ đổi biên trên.
   SỬA 2026-09-10: wire sang var(--fs-h1-page) — giá trị giữ NGUYÊN, mốc
   này chính là chuẩn dùng để định nghĩa --fs-h1-page dùng chung cho mọi
   trang "nội dung" (About cũng đang dùng biến này, trước đó About tự khai
   68px riêng, không liên quan gì tới mốc đã duyệt ở đây). */
body.kqt-svc .svc-hero h1{ font-size:var(--fs-h1-page); font-weight:800; line-height:1.1; color:#fff;
  letter-spacing:-.01em; margin:16px 0 16px; text-wrap:balance; }
body.kqt-svc .svc-hero__sub{ font-size:clamp(15px,1.3vw,18px); color:rgba(244,241,233,.84);
  line-height:1.62; max-width:52ch; }
body.kqt-svc .svc-hero__tel{ display:inline-flex; align-items:center; gap:14px; margin-top:26px;
  padding:14px 22px 14px 18px; border:1px solid rgba(212,175,55,.32); background:rgba(212,175,55,.08);
  border-radius:var(--radius-lg); transition:.26s var(--ease); }
body.kqt-svc .svc-hero__tel:hover{ background:rgba(212,175,55,.14); border-color:rgba(212,175,55,.5); }
body.kqt-svc .svc-hero__tel svg{ width:26px; height:26px; stroke:var(--gold-light); fill:none;
  stroke-width:1.5; flex:none; }
body.kqt-svc .svc-hero__tel span{ display:block; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-navy-2); }
body.kqt-svc .svc-hero__tel b{ display:block; font-size:clamp(22px,2.4vw,30px); font-weight:800;
  color:var(--gold-light); letter-spacing:.01em; line-height:1.15; font-variant-numeric:tabular-nums; }
/* Đợt 6 (2026-09-09) — Quyết báo 3 nút CTA hero lệch (2 nút hàng đầu +
   1 nút rớt xuống hàng 2). Root cause: .btn dùng chung site-wide có
   padding:0 30px + letter-spacing:.12em (kqt-chrome.css dòng 86-88) —
   quá rộng cho 3 nút tiếng Việt dài trong cột hero chỉ ~600px. Thu nhỏ
   RIÊNG cho 3 nút hero (không đụng .btn dùng ở nơi khác) để cùng vừa 1 hàng. */
body.kqt-svc .svc-hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
body.kqt-svc .svc-hero__cta .btn{ min-height:46px; padding:0 16px; font-size:12.5px; letter-spacing:.05em; }
body.kqt-svc .svc-hero__badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:24px;
  border-top:1px solid rgba(212,175,55,.22); }
body.kqt-svc .svc-badge{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;
  color:var(--on-navy); padding:7px 14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(244,241,233,.14); border-radius:999px; }
body.kqt-svc .svc-badge svg{ width:14px; height:14px; stroke:var(--gold-light); fill:none;
  stroke-width:2; flex:none; }
body.kqt-svc .svc-hero__media{ position:relative; }
body.kqt-svc .svc-hero__media .ph{ aspect-ratio:4/3.4; border:1px solid rgba(212,175,55,.22);
  border-radius:var(--radius-lg); overflow:hidden; }
body.kqt-svc .svc-hero__tag{ position:absolute; left:-18px; bottom:28px; background:var(--white);
  color:var(--navy); padding:15px 19px; max-width:236px; box-shadow:var(--shadow-2);
  border:1px solid var(--taupe-15); border-radius:var(--radius-lg); }
body.kqt-svc .svc-hero__tag span{ color:var(--ink-3); font-size:12.5px; font-weight:600; opacity:.82; }
body.kqt-svc .svc-hero__tag b{ display:block; font-size:15px; font-weight:800; line-height:1.2; }

/* ============ 2 · CAM KẾT ============ */
body.kqt-svc .pledges{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
body.kqt-svc .pledge{ padding:30px 26px; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); transition:.3s var(--ease); }
body.kqt-svc .pledge:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--taupe-20); }
body.kqt-svc .pledge__ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-tint); border:1px solid rgba(154,116,42,.16); margin-bottom:20px; }
body.kqt-svc .pledge__ic svg{ width:27px; height:27px; stroke:var(--gold-dark); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
body.kqt-svc .pledge h3{ font-size:18px; font-weight:700; color:var(--navy); margin-bottom:9px; }
body.kqt-svc .pledge p{ font-size:14px; color:var(--ink-2); line-height:1.66; }

/* ============ 3 · BANNER KHẢO SÁT ============ */
body.kqt-svc .freesurvey{ position:relative; overflow:hidden; background:var(--navy); }
body.kqt-svc .freesurvey::before{ content:""; position:absolute; inset:0; opacity:.06;
  background:radial-gradient(circle at 88% 12%, var(--gold-light), transparent 58%); }
body.kqt-svc .freesurvey__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto;
  gap:clamp(24px,4vw,52px); align-items:center; padding-block:clamp(36px,4.6vw,56px); }
body.kqt-svc .freesurvey .tagline{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#2A2008; background:var(--gold-grad); padding:7px 15px;
  border-radius:999px; margin-bottom:18px; }
/* Đợt 6 (2026-09-09) — cùng đợt giảm cỡ chữ H: max 36px → 29px (~18%). */
body.kqt-svc .freesurvey h2{ font-size:clamp(23px,2.3vw,29px); font-weight:800; color:#fff; line-height:1.18; text-wrap:balance; }
body.kqt-svc .freesurvey h2 em{ font-style:italic; color:var(--gold-light); font-weight:700; }
body.kqt-svc .freesurvey p{ margin-top:14px; font-size:14.5px; color:var(--on-navy-2); line-height:1.7; max-width:62ch; }
body.kqt-svc .freesurvey__cta{ display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:270px; }
body.kqt-svc .freesurvey__cta small{ font-size:12px; color:var(--on-navy-2); text-align:center; line-height:1.5; }

/* ============ 4 · QUY TRÌNH ============ */
body.kqt-svc .steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:44px; }
body.kqt-svc .step{ position:relative; padding:0 18px 0 0; }
body.kqt-svc .step__bar{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
body.kqt-svc .step__n{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-grad); color:#2A2008; font-size:16px; font-weight:800;
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow-gold); }
body.kqt-svc .step__line{ flex:1; height:1px; background:var(--taupe-20); }
body.kqt-svc .step:last-child .step__line{ display:none; }
body.kqt-svc .step h3{ font-size:16.5px; font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.3; }
body.kqt-svc .step p{ font-size:13.5px; color:var(--ink-2); line-height:1.62; }

/* ============ 5 · BẢNG GIÁ ============ */
body.kqt-svc .pricing{ background:var(--paper); }
body.kqt-svc .pricing__bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; margin-top:34px; margin-bottom:0; }
body.kqt-svc .pt-search{ display:flex; align-items:center; gap:9px; height:48px; padding:0 16px;
  background:var(--white); border:1px solid var(--taupe-20); border-radius:999px; min-width:270px;
  flex:1; max-width:400px; transition:border-color .22s; }
body.kqt-svc .pt-search:focus-within{ border-color:var(--gold); }
body.kqt-svc .pt-search svg{ width:17px; height:17px; stroke:var(--taupe); fill:none; stroke-width:1.7; flex:none; }
/* input type="search" — flatsome.css khai RIÊNG cho [type=search] (không phải
   .pt-search input): box-shadow inset, border-radius:0, height:2.507em,
   padding:0 .75em, width:100%, appearance:textfield. Trước đây ta chỉ reset
   border/outline/background/font trên input, KHÔNG đụng 5 thuộc tính đó nên
   luật gốc của flatsome vẫn áp — 1 ô vuông có viền-bóng-đổ-lõm hiện ra bên
   trong viên thuốc bo tròn .pt-search, khiến Quyết chụp ảnh báo "ô tìm kiếm
   lỗi giao diện". Phải khai RÕ đè hết 5 thuộc tính này lên chính input.
   Vá tiếp (chữ bị lệch lên trên, hở khoảng trắng dưới): height:auto để input
   tự co theo nội dung — trình duyệt tính "auto" cho ô nhập liệu KHÔNG đơn
   giản bằng line-height, mà cộng thêm khoảng UA riêng cho control nên khối
   chữ nổi lệch lên trên trong viên thuốc cao 48px. Ép height:100% (co đúng
   theo chiều cao thật của .pt-search) + line-height:normal + padding:0 (dọn
   nốt padding-ngang .75em còn sót của flatsome) để trình duyệt tự canh giữa
   dòng chữ theo đúng cơ chế canh-giữa gốc của ô nhập liệu. */
body.kqt-svc .pt-search input{ flex:1; width:auto; height:100%; padding:0; margin:0; line-height:normal;
  border:0; outline:0; box-shadow:none;
  border-radius:0; background:transparent; font-family:var(--sans);
  font-size:14.5px; color:var(--ink); min-width:0; -webkit-appearance:none; appearance:none; }
body.kqt-svc .pt-search input::-webkit-search-cancel-button,
body.kqt-svc .pt-search input::-webkit-search-decoration{ -webkit-appearance:none; }
body.kqt-svc .pt-search input::placeholder{ color:var(--ink-3); }
body.kqt-svc .pt-note-inline{ font-size:13px; color:var(--ink-3); }

body.kqt-svc .ptabs{ display:flex; gap:8px; margin-top:22px; margin-bottom:18px; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px; }
body.kqt-svc .ptabs::-webkit-scrollbar{ display:none; }
/* .ptab là thẻ <button> thật (không phải <a>) — UA mặc định của trình duyệt
   (Chrome/Safari) tự thêm line-height/appearance riêng cho <button> khác hẳn
   thẻ thường, khiến viên thuốc lúc cao lúc thấp tuỳ trình duyệt dù padding
   khai đúng 11px/20px — Quyết báo "kích thước không giống thiết kế". Khoá
   cứng line-height + appearance để chiều cao chỉ còn phụ thuộc padding/font.
   Cùng ổ với .gfilter (S8): luật nền `button{margin:0 1em 0 0}` cộng dồn vào
   gap:8px khai ở .ptabs → 1em ở font-size 14px = 14px, tổng 22px, đúng
   khoảng cách "quá lớn" Quyết khoanh đỏ. Khoá margin:0 để chỉ còn 8px.
   File thiết kế gốc (dich-vu-lap-dat.html) khai .ptab to hơn .gfilter một
   cấp có chủ ý (11px/20px·14px vs 9px/17px·13.5px) — đã hỏi Quyết, ban đầu
   chọn giữ nguyên, sau đó đổi ý yêu cầu chỉnh .ptab bằng .gfilter cho đồng
   nhất toàn trang → hạ padding/cỡ chữ xuống bằng .gfilter, CỐ Ý lệch bản gốc. */
body.kqt-svc .ptab{ flex:none; margin:0; padding:9px 17px; font-family:var(--sans); font-size:13.5px; font-weight:600;
  line-height:1.3; color:var(--ink-2); white-space:nowrap; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:999px; transition:.24s var(--ease); text-transform:none; letter-spacing:normal; -webkit-appearance:none; appearance:none; }
body.kqt-svc .ptab:hover{ color:var(--navy); border-color:var(--gold); }
body.kqt-svc .ptab.is-on{ background:var(--navy); border-color:var(--navy); color:var(--on-navy); }

body.kqt-svc .ppanel{ display:none; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); }
body.kqt-svc .ppanel.is-on{ display:block; }
body.kqt-svc .ptable{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.kqt-svc .ptable thead th{ position:sticky; top:0; z-index:5; background:var(--navy); color:var(--on-navy);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:left;
  padding:14px 18px; white-space:nowrap; }
body.kqt-svc .ptable thead th:last-child{ text-align:right; }
body.kqt-svc .ptable td{ padding:14px 18px; border-top:1px solid var(--taupe-10); font-size:14.5px;
  color:var(--ink); vertical-align:top; line-height:1.5; }
body.kqt-svc .ptable tbody tr:hover{ background:var(--gold-tint); }
body.kqt-svc .ptable .c-item{ font-weight:600; width:56%; }
body.kqt-svc .ptable .c-item small{ display:block; font-weight:400; font-size:12.5px; color:var(--ink-3); margin-top:3px; }
body.kqt-svc .ptable .c-svc{ width:20%; white-space:nowrap; }
body.kqt-svc .ptable .c-price{ text-align:right; white-space:nowrap; font-weight:800; font-size:16px; color:var(--gold-dark); }
body.kqt-svc .svc-pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; padding:5px 12px; border-radius:999px; background:var(--cream); color:var(--taupe);
  border:1px solid var(--taupe-15); }
body.kqt-svc .svc-pill--off{ background:#FBF0EE; color:#9A3E31; border-color:rgba(154,62,49,.22); }
body.kqt-svc .svc-pill--chg{ background:var(--gold-tint); color:var(--gold-dark); border-color:rgba(154,116,42,.28); }
body.kqt-svc .ppanel__foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:20px 18px; border-top:1px solid var(--taupe-15); background:var(--cream); }
body.kqt-svc .ppanel__foot p{ font-size:13px; color:var(--ink-2); margin:0; max-width:60ch; line-height:1.6; }
body.kqt-svc .pt-empty{ padding:34px 18px; text-align:center; color:var(--ink-3); font-size:14.5px; display:none; }

body.kqt-svc .pnotes{ margin-top:26px; padding:28px 30px; background:var(--gold-tint);
  border:1px solid rgba(154,116,42,.2); border-radius:var(--radius-lg); }
body.kqt-svc .pnotes h3{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800;
  color:var(--navy); margin-bottom:14px; }
body.kqt-svc .pnotes h3 svg{ width:19px; height:19px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; flex:none; }
body.kqt-svc .pnotes ul{ list-style:none; display:grid; gap:10px; }
body.kqt-svc .pnotes li{ display:flex; gap:11px; font-size:14px; color:var(--ink-2); line-height:1.62; }
body.kqt-svc .pnotes li::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none;
  margin-top:7px; background:var(--gold-grad); }

/* ============ 6 · FORM ĐẶT LỊCH ============ */
body.kqt-svc .booking{ background:var(--navy); }
body.kqt-svc .booking__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4.5vw,64px); align-items:start; }
body.kqt-svc .booking__why{ list-style:none; display:grid; gap:16px; margin-top:26px; }
body.kqt-svc .booking__why li{ display:flex; gap:13px; font-size:14.5px; color:var(--on-navy); line-height:1.6; }
body.kqt-svc .booking__why svg{ width:20px; height:20px; stroke:var(--gold-light); fill:none;
  stroke-width:1.7; flex:none; margin-top:2px; }
body.kqt-svc .booking__side{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:24px;
  border-top:1px solid rgba(212,175,55,.22); }
/* Đợt 6 (2026-09-09) — Quyết báo 2 việc cho khối form đặt lịch (.bform):
   (1) "chữ trong ô liên hệ viết thường thôi" — nhãn field (HỌ TÊN, KHU
   VỰC…) và chip (BỒN CẦU, LAVABO…) đang uppercase. Đã đo trước đó (cùng
   ngày) là khớp NGUYÊN VĂN file thiết kế gốc, nhưng đây là lần Quyết chủ
   động yêu cầu đổi khác thiết kế gốc (không phải hiểu lầm bug nữa) → bỏ
   text-transform:uppercase ở nhãn field + chữ trong chip. KHÔNG đụng nút
   submit .btn (quy ước CTA viết hoa dùng chung toàn trang, đã xác nhận
   đúng ý nhiều lần trong các nút khác — nếu Quyết muốn đổi luôn nút này
   thì báo thêm).
   (2) "kích thước ô liên hệ to quá" — thu gọn khoảng đệm/chiều cao theo
   mức vừa phải (~20-25%): padding khối, gap lưới field, chiều cao
   input/select/textarea, đệm chip. */
body.kqt-svc .bform{ background:var(--white); padding:clamp(20px,2.4vw,28px); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); }
body.kqt-svc .bform h3{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:5px; }
body.kqt-svc .bform__sub{ font-size:13.5px; color:var(--ink-3); margin-bottom:16px; }
body.kqt-svc .bfgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.kqt-svc .bfield{ display:flex; flex-direction:column; }
body.kqt-svc .bfield--full{ grid-column:1 / -1; }
body.kqt-svc .bfield label{ font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:none;
  color:var(--taupe); margin-bottom:6px; }
body.kqt-svc .bfield label em{ color:#B23B2E; font-style:normal; }
body.kqt-svc .bfield input, body.kqt-svc .bfield select, body.kqt-svc .bfield textarea{
  height:42px; padding:0 13px; border:1px solid var(--taupe-20); background:var(--white);
  font-family:var(--sans); font-size:14px; color:var(--ink); border-radius:var(--radius);
  transition:border-color .2s; width:100%; }
body.kqt-svc .bfield textarea{ height:auto; padding:10px 13px; min-height:66px; resize:vertical; line-height:1.5; }
body.kqt-svc .bfield input:focus, body.kqt-svc .bfield select:focus, body.kqt-svc .bfield textarea:focus{
  outline:0; border-color:var(--gold); }
body.kqt-svc .bchips{ display:flex; flex-wrap:wrap; gap:6px; }
body.kqt-svc .bchip{ position:relative; }
body.kqt-svc .bchip input{ position:absolute; opacity:0; pointer-events:none; }
body.kqt-svc .bchip span{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-size:12px;
  font-weight:500; text-transform:none; border:1px solid var(--taupe-20); border-radius:999px; color:var(--ink-2); cursor:pointer;
  transition:.2s; user-select:none; }
body.kqt-svc .bchip span::before{ content:""; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--taupe-30); flex:none; }
body.kqt-svc .bchip input:checked + span{ border-color:var(--gold); background:var(--gold-tint);
  color:var(--navy); font-weight:600; }
body.kqt-svc .bchip input:checked + span::before{ background:var(--gold-grad); border-color:transparent; }
body.kqt-svc .bchip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
body.kqt-svc .bform__foot{ margin-top:18px; }
body.kqt-svc .bform__foot small{ display:block; margin-top:12px; font-size:12.5px; color:var(--ink-3); line-height:1.55; }
body.kqt-svc .bform__ok{ display:none; margin-top:16px; padding:14px 17px; background:var(--gold-tint);
  border:1px solid rgba(154,116,42,.24); border-radius:var(--radius); font-size:14px; color:var(--navy); font-weight:600; }
body.kqt-svc .bform__ok.is-on{ display:block; }
body.kqt-svc .bform__err{ display:none; margin-top:16px; padding:14px 17px; background:#FBF0EE;
  border:1px solid rgba(154,62,49,.22); border-radius:var(--radius); font-size:14px; color:#9A3E31; font-weight:600; }
body.kqt-svc .bform__err.is-on{ display:block; }

/* ============ 7 · DANH MỤC DỊCH VỤ ============ */
body.kqt-svc .svclist{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
body.kqt-svc .svcitem{ display:flex; flex-direction:column; padding:26px 24px; background:var(--white);
  border:1px solid var(--taupe-15); border-radius:var(--radius-lg); transition:.28s var(--ease); }
body.kqt-svc .svcitem:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-2); }
body.kqt-svc .svcitem__ic{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream); border:1px solid var(--taupe-10); margin-bottom:18px;
  transition:.26s var(--ease); }
body.kqt-svc .svcitem:hover .svcitem__ic{ background:var(--gold-tint); border-color:rgba(154,116,42,.18); }
body.kqt-svc .svcitem__ic svg{ width:24px; height:24px; stroke:var(--gold-dark); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
body.kqt-svc .svcitem h3{ font-size:17px; font-weight:700; color:var(--navy); margin-bottom:8px; }
body.kqt-svc .svcitem p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; flex:1; }
body.kqt-svc .svcitem__go{ margin-top:16px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dark); display:inline-flex; align-items:center; gap:7px; }
body.kqt-svc .svcitem__go svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .24s; }
body.kqt-svc .svcitem:hover .svcitem__go svg{ transform:translateX(4px); }

/* ============ 8 · GALLERY ============ */
body.kqt-svc .section--cream{ background:var(--cream); }
body.kqt-svc .gfilters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; margin-bottom:24px; }
/* .gfilter cũng là <button> thật, dính đúng lỗi UA line-height/appearance như
   .ptab (S5) — Quyết khoanh đỏ báo "nút này kích thước cũng khác thiết kế".
   Khoá cứng line-height + appearance như đã vá cho .ptab.
   Đợt sau: Quyết khoanh đỏ tiếp "khoảng cách lớn quá" giữa các nút lọc —
   ngoài gap:8px khai ở .gfilters, có luật nền `button{margin:0 1em 0 0}` (đơn
   vị EM) cộng dồn vào, mà font-size nút này là 13.5px nên 1em = ĐÚNG 13.5px
   margin-right đo được → tổng khoảng cách 8+13.5=21.5px, gấp gần 3 lần định.
   Khoá margin:0 để chỉ còn đúng 8px khai trong gap. */
body.kqt-svc .gfilter{ margin:0; padding:9px 17px; font-family:var(--sans); font-size:13.5px; font-weight:600;
  line-height:1.3; color:var(--ink-2);
  background:var(--white); border:1px solid var(--taupe-20); border-radius:999px; transition:.22s;
  text-transform:none; letter-spacing:normal;
  -webkit-appearance:none; appearance:none; }
body.kqt-svc .gfilter:hover{ border-color:var(--gold); color:var(--navy); }
body.kqt-svc .gfilter.is-on{ background:var(--navy); border-color:var(--navy); color:var(--on-navy); }
body.kqt-svc .ggrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.kqt-svc .gcell{ position:relative; display:block; overflow:hidden; border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); background:var(--cream); }
body.kqt-svc .gcell .ph{ aspect-ratio:4/3; }
body.kqt-svc .gcell img{ transition:transform .6s var(--ease); }
body.kqt-svc .gcell:hover img{ transform:scale(1.06); }
body.kqt-svc .gcell::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(11,22,38,.82)); }
body.kqt-svc .gcell__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px; color:#fff; }
body.kqt-svc .gcell__cap b{ display:block; font-size:14.5px; font-weight:700; line-height:1.3; }
body.kqt-svc .gcell__cap span{ font-size:12px; color:rgba(255,255,255,.76); }
body.kqt-svc .lbox{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px;
  background:rgba(8,16,28,.92); }
body.kqt-svc .lbox.is-on{ display:grid; }
body.kqt-svc .lbox img{ max-width:min(1000px,92vw); max-height:82vh; object-fit:contain;
  border-radius:var(--radius-lg); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
body.kqt-svc .lbox__cap{ margin-top:14px; text-align:center; color:var(--on-navy); font-size:14px; }
body.kqt-svc .lbox__x{ position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(244,241,233,.3); }
body.kqt-svc .lbox__x svg{ width:20px; height:20px; stroke:var(--on-navy); fill:none; stroke-width:1.8; }

/* ============ 9 · CHÍNH SÁCH ============ */
body.kqt-svc .policies{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:38px; }
body.kqt-svc .policy{ padding:30px; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); transition:.28s var(--ease); }
body.kqt-svc .policy:hover{ box-shadow:var(--shadow-2); border-color:var(--taupe-20); }
body.kqt-svc .policy h3{ display:flex; align-items:center; gap:12px; font-size:17.5px; font-weight:700; color:var(--navy); margin-bottom:12px; }
body.kqt-svc .policy h3 svg{ width:20px; height:20px; stroke:var(--gold-dark); fill:none; stroke-width:1.6; flex:none;
  box-sizing:content-box; padding:9px; border-radius:50%; background:var(--gold-tint); }
body.kqt-svc .policy p{ font-size:14px; color:var(--ink-2); line-height:1.7; }
body.kqt-svc .policy ul{ list-style:none; display:grid; gap:9px; margin-top:12px; }
body.kqt-svc .policy li{ display:flex; gap:10px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
body.kqt-svc .policy li svg{ width:15px; height:15px; stroke:var(--gold-dark); fill:none; stroke-width:2.2; flex:none; margin-top:3px; }

/* ============ 10 · FAQ ============ */
body.kqt-svc .svc-faq{ max-width:860px; margin-inline:auto; margin-top:36px; }
body.kqt-svc .sfq{ border-bottom:1px solid var(--taupe-20); }
body.kqt-svc .sfq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 2px; text-align:left; font-family:var(--sans); font-size:16.5px; font-weight:600; color:var(--navy);
  background:transparent; border:0; text-transform:none; letter-spacing:normal; -webkit-appearance:none; appearance:none; }
body.kqt-svc .sfq__pm{ position:relative; width:18px; height:18px; flex:none; }
body.kqt-svc .sfq__pm::before, body.kqt-svc .sfq__pm::after{ content:""; position:absolute; background:var(--taupe); transition:.3s var(--ease); }
body.kqt-svc .sfq__pm::before{ left:0; top:8px; width:18px; height:1.6px; }
body.kqt-svc .sfq__pm::after{ left:8px; top:0; width:1.6px; height:18px; }
body.kqt-svc .sfq.is-on .sfq__pm::after{ transform:rotate(90deg); opacity:0; }
body.kqt-svc .sfq.is-on .sfq__pm::before{ background:var(--gold-dark); }
body.kqt-svc .sfq__a{ max-height:0; overflow:hidden; transition:max-height .38s var(--ease); }
body.kqt-svc .sfq__a p{ padding:0 2px 24px; font-size:14.5px; color:var(--ink-2); line-height:1.75; max-width:74ch; }

/* ============ 11 · KHU VỰC PHỤC VỤ ============ */
body.kqt-svc .areas{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:38px; max-width:900px; }
body.kqt-svc .area{ padding:28px; background:rgba(255,255,255,.07); border:1px solid rgba(244,241,233,.2);
  border-radius:var(--radius-lg); transition:.28s var(--ease); }
body.kqt-svc .area:hover{ border-color:var(--gold); background:rgba(255,255,255,.1); transform:translateY(-3px); }
body.kqt-svc .area__c{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:12px; display:block; }
body.kqt-svc .area h3{ font-size:19px; font-weight:700; color:#fff; margin-bottom:10px; }
body.kqt-svc .area p{ font-size:13.5px; color:rgba(244,241,233,.8); line-height:1.66; }
body.kqt-svc .area__tel{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-size:16px; font-weight:800;
  color:var(--gold-light); font-variant-numeric:tabular-nums; }
body.kqt-svc .area__tel svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
body.kqt-svc .area__hours{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(244,241,233,.14);
  font-size:12.5px; color:rgba(244,241,233,.66); }

/* ============ 12 · CTA CUỐI ============ */
body.kqt-svc .finalcta{ background:var(--gold-tint); position:relative; overflow:hidden;
  border-top:1px solid rgba(154,116,42,.2); }
body.kqt-svc .finalcta::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 88% 16%, #FBF3E0, transparent 62%); }
body.kqt-svc .finalcta__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto;
  gap:clamp(24px,4vw,48px); align-items:center; padding-block:clamp(40px,4.6vw,62px); }
/* Đợt 6 (2026-09-09) — cùng đợt giảm cỡ chữ H: max 38px → 31px (~18%). */
body.kqt-svc .finalcta h2{ font-size:clamp(24px,2.4vw,31px); font-weight:700; color:var(--navy); line-height:1.16; text-wrap:balance; }
body.kqt-svc .finalcta p{ margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.6; max-width:56ch; }
body.kqt-svc .finalcta__btns{ display:flex; flex-wrap:wrap; gap:12px; }
body.kqt-svc .btn--onGold{ background:var(--gold-grad); color:#2A2008; box-shadow:var(--shadow-gold); }
body.kqt-svc .btn--onGold:hover{ filter:brightness(1.04); transform:translateY(-2px); }
body.kqt-svc .btn--onGoldGhost{ background:var(--white); border:1px solid var(--navy); color:var(--navy); }
body.kqt-svc .btn--onGoldGhost:hover{ background:var(--navy); color:var(--on-navy); }

/* ============ STICKY BAR + ZALO ============ */
body.kqt-svc .svcbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--navy); box-shadow:0 -8px 24px rgba(10,20,36,.24);
  padding-bottom:env(safe-area-inset-bottom); }
body.kqt-svc .svcbar a{ display:flex; align-items:center; justify-content:center; gap:9px; height:58px;
  font-size:14.5px; font-weight:700; letter-spacing:.02em; }
body.kqt-svc .svcbar svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
body.kqt-svc .svcbar__call{ background:var(--navy); color:var(--gold-light); }
body.kqt-svc .svcbar__book{ background:var(--gold-grad); color:#2A2008; }
body.kqt-svc .zalo{ position:fixed; right:16px; bottom:76px; z-index:88; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; background:var(--navy); border:1px solid var(--gold);
  box-shadow:var(--shadow-2); color:var(--gold-light); font-size:12px; font-weight:800; letter-spacing:.02em; }
body.kqt-svc .zalo:hover{ background:var(--gold-grad); color:#2A2008; border-color:transparent; }

/* ============================================================
   RESPONSIVE — chỉ phần liên quan Đợt 1
   ============================================================ */
@media (max-width:1080px){
  body.kqt-svc .svc-hero__grid{ grid-template-columns:1fr; }
  body.kqt-svc .svc-hero__media{ order:-1; }
  body.kqt-svc .svc-hero__tag{ left:auto; right:14px; bottom:14px; }
  body.kqt-svc .booking__grid{ grid-template-columns:1fr; }
  body.kqt-svc .pledges{ grid-template-columns:repeat(2,1fr); }
  body.kqt-svc .steps{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  body.kqt-svc .step{ padding-right:0; }
  body.kqt-svc .step__line{ display:none; }
  body.kqt-svc .svclist{ grid-template-columns:repeat(2,1fr); }
  body.kqt-svc .ggrid{ grid-template-columns:repeat(2,1fr); }
  body.kqt-svc .freesurvey__in{ grid-template-columns:1fr; }
  body.kqt-svc .finalcta__in{ grid-template-columns:1fr; }
  body.kqt-svc .areas{ grid-template-columns:1fr; }
  body.kqt-svc .policies{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body.kqt-svc .svcbar{ display:grid; }
  body.kqt-svc{ padding-bottom:56px; }
  /* Nút Zalo nổi (position:fixed góc phải) đè lên đúng cột giá (căn phải)
     của bảng giá dạng thẻ khi cuộn tới — Quyết chụp ảnh báo cột giá bị cắt
     nửa chữ số, trông như lỗi hiển thị. Ẩn nút nổi trên mobile vì .svcbar
     (thanh dưới cùng) đã có sẵn "Gọi ngay" + "Đặt lịch khảo sát"; khách vẫn
     chat Zalo được qua nút ở đầu trang/hero/booking — không mất kênh liên hệ,
     chỉ bớt 1 lớp nổi trùng lặp gây đè chữ. Desktop giữ nguyên. */
  body.kqt-svc .zalo{ display:none; }
  body.kqt-svc .bfgrid{ grid-template-columns:1fr; }
  body.kqt-svc .pricing__bar{ flex-direction:column; align-items:stretch; }
  /* flex:1 (flex-basis:0%) của .pt-search chỉ đúng khi .pricing__bar xếp HÀNG
     (desktop); khi đổi sang xếp CỘT ở đây, flex-basis:0% đè lên height:48px
     khai gốc (main-axis đổi từ ngang sang dọc) → ô tìm kiếm xẹp còn ~21px
     (cao bằng đúng 1 dòng chữ input), viên thuốc bo tròn trông méo/dẹt.
     Khoá flex:none để height:48px khai gốc có hiệu lực trở lại; width vẫn
     giãn full nhờ align-items:stretch phía trên. */
  body.kqt-svc .pt-search{ max-width:none; flex:none; }
  body.kqt-svc .pt-note-inline{ display:none; }
  body.kqt-svc .svc-hero__cta{ flex-direction:column; align-items:stretch; }
  body.kqt-svc .svc-hero__cta .btn{ width:100%; }
  /* 2 nút "Gọi ..." / "Chat Zalo" ở .booking__side dùng padding gốc 0 30px
     (từ .btn nền Flatsome) → cộng cả 2 nút rộng ~360px, vượt khung nội dung
     mobile (~331px) nên bị wrap xuống 2 hàng. Giảm padding/cỡ chữ + chia đều
     flex:1 để 2 nút vừa đúng 1 hàng, giống cách đã sửa cho 3 nút hero. */
  body.kqt-svc .booking__side .btn{ flex:1; min-width:0; padding:0 10px; font-size:12px; letter-spacing:.03em; white-space:nowrap; }
  body.kqt-svc .pledges{ grid-template-columns:1fr; gap:14px; }
  /* --- Quy trình: đổi sang timeline dọc (số bên trái + có đường nối),
     tránh khoảng trắng rời rạc giữa các bước khi xếp 1 cột --- */
  body.kqt-svc .steps{ grid-template-columns:1fr; gap:30px; }
  body.kqt-svc .step{ position:relative; display:grid; grid-template-columns:46px 1fr; column-gap:16px; }
  body.kqt-svc .step__bar{ grid-column:1; grid-row:1; margin-bottom:0; }
  body.kqt-svc .step__line{ display:block; position:absolute; left:22px; top:46px; bottom:-30px; width:1px; height:auto; background:var(--taupe-20); }
  body.kqt-svc .step:last-child .step__line{ display:none; }
  body.kqt-svc .step h3{ grid-column:2; grid-row:1; padding-top:12px; margin-bottom:6px; }
  body.kqt-svc .step p{ grid-column:2; grid-row:2; }
  body.kqt-svc .svclist{ grid-template-columns:1fr; }
  /* Bộ lọc gallery có 9 nút (Tất cả/Bồn cầu/…/Điện gia dụng) — flex-wrap mặc
     định xuống 3 hàng trên mobile, chiếm nhiều khoảng trắng dọc trước khi tới
     ảnh. Quyết yêu cầu gom về 1 hàng: 9 nút chữ dài không thể vừa 1 hàng cố
     định trong khung ~331-374px dù thu nhỏ cỡ chữ, nên đổi sang 1 hàng CUỘN
     NGANG (nowrap + overflow-x:auto) — kiểu chip cuộn quen thuộc trên di động
     (giống thanh danh mục các app đặt đồ ăn). Bù âm margin bằng --gutter để
     hàng chip tràn sát mép màn hình, kéo mượt hơn; ẩn thanh cuộn cho gọn. */
  body.kqt-svc .gfilters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter); padding-right:var(--gutter);
    scrollbar-width:none; -ms-overflow-style:none; }
  body.kqt-svc .gfilters::-webkit-scrollbar{ display:none; }
  body.kqt-svc .gfilter{ flex:none; white-space:nowrap; }
  body.kqt-svc .ggrid{ grid-template-columns:1fr 1fr; gap:10px; }
  body.kqt-svc .freesurvey__cta{ min-width:0; }
  body.kqt-svc .finalcta__btns{ width:100%; flex-direction:column; align-items:stretch; }
  body.kqt-svc .finalcta__btns .btn{ width:100%; }

  /* --- giảm padding thẻ để đỡ chật ở khổ điện thoại (~335-374px nội dung) --- */
  body.kqt-svc .pledge{ padding:22px 20px; }
  body.kqt-svc .svcitem{ padding:20px 18px; }
  body.kqt-svc .policy{ padding:22px 20px; }
  body.kqt-svc .area{ padding:20px; }
  body.kqt-svc .pnotes{ padding:20px; }

  /* --- bảng giá → card, đọc được trên 360px, không scroll ngang --- */
  body.kqt-svc .ppanel{ border:0; background:transparent; }
  body.kqt-svc .ptable thead{ display:none; }
  body.kqt-svc .ptable, body.kqt-svc .ptable tbody, body.kqt-svc .ptable td{ display:block; width:auto; }
  body.kqt-svc .ptable tr{ display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:center;
    background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg);
    margin-bottom:10px; padding:15px 16px; }
  body.kqt-svc .ptable tbody tr:hover{ background:var(--white); }
  body.kqt-svc .ptable td{ padding:0; border:0; }
  body.kqt-svc .ptable .c-item{ grid-column:1 / -1; width:auto; font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
  body.kqt-svc .ptable .c-svc{ grid-column:1; width:auto; white-space:normal; }
  body.kqt-svc .ptable .c-price{ grid-column:2; text-align:right; font-size:17px; }
  body.kqt-svc .ppanel__foot{ border:1px solid var(--taupe-15); border-radius:var(--radius-lg); }
}
@media (max-width:400px){
  body.kqt-svc .ptable .c-item{ font-size:14.5px; }
  body.kqt-svc .ptable .c-price{ font-size:16px; }
}