/* ============================================================
 * KQT PRODUCT PAGE — single product (simple product)
 * Port 1:1 từ bản thiết kế "Trang sản phẩm (standalone)".
 * Scope: .kqt.pp. Tokens lấy từ :root global (kqt-chrome.css).
 * WooCommerce làm động cơ; lớp vỏ HTML/CSS là KQT.
 * ============================================================ */

/* --sec = MỘT nhịp dọc duy nhất giữa các section của trang sản phẩm.
   Trước đây mỗi ranh giới tự đặt số riêng (phero 56, secnav 40 + ppbody 56,
   block 52) nên desktop có chỗ cách 56px chỗ cách 96px; mobile 40px và 64px.
   Giờ mọi ranh giới đều đọc từ đây, đổi một chỗ là cả trang đổi theo.

   --tabpad = đệm trong của MỖI link trên thanh tab. Nó là khoảng trắng VÔ HÌNH:
   mắt người đo nhịp từ CHỮ "Mô tả" xuống chữ "VÌ SAO CHỌN", chứ không đo từ cái
   đường kẻ mờ dưới thanh. Nên ranh giới này phải trừ đi phần đệm đó, không thì
   nó thành 16+1+56 = 73px trong khi mọi ranh giới khác đúng 56px. */
.kqt.pp{ background:var(--white); color:var(--ink); font-family:var(--sans); --sec:56px; --tabpad:16px; }
.kqt.pp .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.kqt.pp a{ text-decoration:none; color:inherit; }
.kqt.pp *,
.kqt.pp *::before,
.kqt.pp *::after{ box-sizing:border-box; }

/* Brand font (Be Vietnam Pro) — thắng typography "Lato" của Flatsome trong vùng .kqt.pp.
   Flatsome đặt font-family thẳng trên h1..h6/button/input nên thừa kế từ .kqt.pp không đủ;
   cần selector rõ ràng (specificity cao hơn) + inject sau cùng (priority 10000) để thắng. */
.kqt.pp h1, .kqt.pp h2, .kqt.pp h3, .kqt.pp h4, .kqt.pp h5, .kqt.pp h6{ font-family:var(--serif); }
.kqt.pp p, .kqt.pp li, .kqt.pp a, .kqt.pp button, .kqt.pp input,
.kqt.pp select, .kqt.pp textarea, .kqt.pp th, .kqt.pp td,
.kqt.pp label, .kqt.pp small{ font-family:var(--sans); }

/* ---------- Utilities cần cho trang (self-contained) ---------- */
/* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site): eyebrow vốn 12px/đậm 700, lệch
   với Trang chủ/Dịch vụ/About (đều 14px/đậm 600) — đổi về var(--fs-eyebrow)
   + weight 600 cho khớp chuẩn chung, xem kqt-typography.css. */
.kqt.pp .eyebrow{ font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); }
.kqt.pp .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border:0; border-radius:var(--radius); cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.01em; line-height:1;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.kqt.pp .btn--gold{ background:var(--gold-grad); color:#0F1B2D; box-shadow:var(--shadow-gold); background-size:160% 160%; }
.kqt.pp .btn--gold:hover{ background-image:var(--gold-grad-sh); transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(154,116,42,.7); }
.kqt.pp .btn--ghost{ border:1px solid var(--navy); color:var(--navy); background:var(--white); }
.kqt.pp .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); }
.kqt.pp .btn--ghost-light{ border:1px solid rgba(244,241,233,.4); color:var(--on-navy); background:transparent; }
.kqt.pp .btn--ghost-light:hover{ background:var(--on-navy); color:var(--navy); border-color:var(--on-navy); }
.kqt.pp .btn--block{ width:100%; }
.kqt.pp .btn--sm{ min-height:42px; padding:0 16px; font-size:13.5px; }
.kqt.pp .badge{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:26px; padding:0 11px;
  border-radius:999px; background:var(--navy); color:var(--on-navy); font-size:11px; font-weight:700;
  letter-spacing:.04em; white-space:nowrap; flex:0 0 auto; width:auto; }
.kqt.pp .badge--gold{ background:var(--gold-grad); color:#2A2008; }
.kqt.pp .stars{ display:inline-flex; gap:2px; color:var(--gold); }
.kqt.pp .stars svg{ width:17px; height:17px; fill:currentColor; }
.kqt.pp .ph{ position:relative; overflow:hidden; background:var(--paper); }
.kqt.pp .ph__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Breadcrumb ---------- */
/* ⚠️ BẪY LỀ HAI BÊN — đọc trước khi sửa padding của BẤT KỲ khối nào dưới đây.
   Các khối `.crumb` `.phero` `.ppbody` `.buybar__row` đều mang KÈM class `.wrap`
   trên CÙNG MỘT thẻ. `.kqt.pp .wrap` cấp lề hai bên bằng `padding-inline:var(--gutter)`,
   nhưng mấy khối này đứng SAU trong file và cùng độ đặc hiệu, lại viết `padding`
   dạng RÚT GỌN → thành phần ngang ghi đè `padding-inline` về 0, chữ dán sát mép màn.
   Vì vậy mọi `padding` rút gọn ở đây phải ghi rõ `var(--gutter)` ở giữa. */
.kqt.pp .crumb{ padding:18px var(--gutter) 4px; }
.kqt.pp .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); }
.kqt.pp .crumb a{ color:var(--taupe); transition:color .2s; }
.kqt.pp .crumb a:hover{ color:var(--gold-dark); }
.kqt.pp .crumb li{ display:flex; align-items:center; gap:8px; }
.kqt.pp .crumb li::after{ content:"\203A"; color:var(--gold); font-size:14px; }
.kqt.pp .crumb li:last-child::after{ display:none; }
.kqt.pp .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }

/* ============================================================
   C · PRODUCT HERO
   ============================================================ */
/* minmax(0,..) chặn "grid blowout": tên/SKU dài không ngắt được sẽ KHÔNG thể
   bè rộng cột buybox làm méo tỉ lệ cột ảnh. Khung ảnh giữ 55% đồng nhất mọi sản phẩm. */
.kqt.pp .phero{ display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:48px; padding:18px var(--gutter) var(--sec); align-items:start; }

/* gallery — bám đúng thiết kế gốc (KQT.COM - Trang sản phẩm standalone):
   khung 4/3.4 + nền gradient kem-vàng sang trọng + 5 thumbnail ĐỀU NHAU (flex:1). */
.kqt.pp .gallery{ position:sticky; top:130px; display:block; width:100%; margin:0; }
/* Ảnh sản phẩm là cutout NỀN TRẮNG và nền trang (.kqt.pp) cũng TRẮNG. Vì vậy KHÔNG
   dùng border, KHÔNG box-shadow: mọi viền/bóng trên nền trắng đều lộ thành "khung".
   Ảnh nằm phẳng, hoà vào trang → sạch tuyệt đối, không còn viền. */
.kqt.pp .gallery__main{ position:relative; display:block; width:100%; border:0; border-radius:var(--radius-lg);
  overflow:hidden; aspect-ratio:4/3.4; background:#fff; box-shadow:none; }
.kqt.pp .gallery__main .ph{ position:absolute; inset:0; isolation:isolate; background:#fff; }
/* Chrome global vẽ .ph::before = radial-gradient vàng-kem (tâm 80% 10% = góc trên-phải).
   Trên nền trắng lớp glow này lộ thành "viền hơi vàng" ở mép phải. Tắt hẳn ở khung ảnh. */
.kqt.pp .gallery__main .ph::before{ content:none; display:none; background:none; }
.kqt.pp .gallery__main .ph__img{ object-fit:contain; padding:3%; mix-blend-mode:normal;
  filter:none; background:#fff; }
.kqt.pp .gallery__tag{ position:absolute; top:16px; left:16px; z-index:4; display:flex; gap:8px; }
.kqt.pp .gallery__zoom{ position:absolute; bottom:16px; right:16px; z-index:4; width:42px; height:42px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--navy);
  box-shadow:var(--shadow-2); cursor:pointer; transition:background .2s, transform .2s; }
.kqt.pp .gallery__zoom:hover{ background:#fff; transform:scale(1.08); }
.kqt.pp .gallery__zoom svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
/* Thumbnail: khoá đúng SIZE như thiết kế gốc = 1/5 chiều rộng hàng (thiết kế có 5 ảnh).
   Sản phẩm thật số ảnh khác nhau (2/3/5) → KHÔNG để flex:1 (sẽ phình to khi ít ảnh);
   dùng basis cố định = (100% - 4 khoảng cách)/5 để mọi SP đều có thumbnail nhỏ gọn như design. */
/* THANH CUỘN BỊ GỠ (2026-09-07). Quyết khoanh đỏ đúng cái vạch xám dài dưới dải ảnh:
   "đừng có để cái thanh ở dưới nhìn xấu lắm". Nó là thanh cuộn ngang tự vẽ, nằm chình
   ình suốt chiều ngang kể cả khi chỉ thừa vài chục pixel. Thay bằng HAI NÚT MŨI TÊN
   đè lên hai mép dải, giống trang kimquoctien.
   Vẫn giữ overflow-x:auto — cuộn bằng ngón tay / trackpad / phím vẫn chạy, chỉ giấu
   phần vẽ ra màn hình. KHÔNG đổi sang overflow:hidden: làm vậy là cắt luôn đường cuộn
   của bàn phím và thiết bị cảm ứng, mà 5,8% sản phẩm (535 con) có tới 6–42 ảnh. */
.kqt.pp .thumbs-wrap{ position:relative; }
.kqt.pp .thumbs{ display:flex; flex-wrap:nowrap; gap:12px; margin-top:14px;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none; }
.kqt.pp .thumbs::-webkit-scrollbar{ display:none; }

/* Nút mũi tên. Đặt absolute NGOÀI luồng để không ăn chỗ của ô ảnh: dải khoá đúng
   5 ô/hàng, nút mà chiếm chỗ thì ô co lại và lệch hẳn với thiết kế.
   top:50% là ĐỦ. Lần đầu tôi viết calc(14px + …) để cộng bù margin-top:14px của dải,
   đo ra tâm nút 540 trong khi tâm ảnh 525 — lệch đúng 15px. Lý do: .thumbs-wrap
   không có viền lẫn padding nên margin-top của dải THOÁT RA NGOÀI (margin collapse),
   mép trên của wrap đã trùng mép trên dải rồi, cộng thêm 14px nữa là cộng hai lần. */
.kqt.pp .thumbs__nav{ position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--taupe-15);
  background:rgba(255,255,255,.94); backdrop-filter:blur(4px); box-shadow:var(--shadow-2);
  display:grid; place-items:center; cursor:pointer; z-index:3; padding:0;
  color:var(--ink); transition:background .2s, color .2s, border-color .2s, opacity .2s; }
.kqt.pp .thumbs__nav[hidden]{ display:none; }
.kqt.pp .thumbs__nav--prev{ left:-6px; }
.kqt.pp .thumbs__nav--next{ right:-6px; }
.kqt.pp .thumbs__nav svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.kqt.pp .thumbs__nav:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
/* Cuộn hết một đầu thì MỜ ĐI chứ không biến mất: nút nhảy ra nhảy vào làm ô ảnh
   dưới nó giật theo, mắt đọc thành lỗi giao diện. */
/* pointer-events:none là BẮT BUỘC, không phải cho đẹp: nút disabled không nhận click
   nhưng vẫn CHẮN chỗ, mà nó nằm đè lên ~28px của ô ảnh ngoài cùng. Thiếu dòng này thì
   ở đầu dải, bấm vào mép trái ảnh 1 không có gì xảy ra — lỗi im lặng, không ai báo. */
.kqt.pp .thumbs__nav:disabled{ opacity:.32; cursor:default; pointer-events:none; }
.kqt.pp .thumbs__nav:disabled:hover{ background:rgba(255,255,255,.94); border-color:var(--taupe-15); color:var(--ink); }

/* CHỈ HIỆN KHI RÊ CHUỘT VÀO DẢI ẢNH (Quyết 2026-09-07).
   Giấu bằng opacity chứ KHÔNG bằng display:none — display làm nút bật ra tức thì,
   giật mắt; opacity thì mờ vào mờ ra theo transition đã khai ở trên.
   pointer-events:none đi KÈM opacity:0: nút trong suốt vẫn chắn chỗ như thường, mà nó
   đè lên ~28px của ô ảnh ngoài cùng — thiếu dòng này thì lúc chưa rê chuột, bấm vào
   mép ô ảnh đầu/cuối sẽ không ăn, lỗi im lặng không ai báo.

   Bọc trong @media (hover:hover) vì máy CẢM ỨNG không có trạng thái rê chuột: gán
   thẳng opacity:0 là nút biến mất VĨNH VIỄN trên tablet, không cách nào cuộn dải bằng
   nút nữa. Máy không có chuột thì giữ nguyên nút luôn hiện.

   :focus-within để người dùng bàn phím Tab tới nút vẫn thấy nút mình đang đứng. */
@media (hover:hover) {
  /* Phải kể RIÊNG :disabled ra đây. Luật .thumbs__nav:disabled{opacity:.32} ở trên có
     4 lớp, luật ẩn này chỉ 3 lớp, mà @media KHÔNG cộng thêm độ ưu tiên — nên nếu chỉ
     viết .thumbs__nav thì nút ở đầu dải (đang disabled) vẫn hiện mờ 32% lúc chưa rê
     chuột. Đo ra đúng lỗi đó: rê chuột ra ngoài, next về 0 nhưng prev còn 0.32. */
  .kqt.pp .thumbs__nav,
  .kqt.pp .thumbs__nav:disabled{ opacity:0; pointer-events:none; }
  .kqt.pp .thumbs-wrap:hover .thumbs__nav,
  .kqt.pp .thumbs-wrap:focus-within .thumbs__nav{ opacity:1; pointer-events:auto; }
  /* Luật hover ở trên có độ ưu tiên CAO HƠN luật :disabled (5 lớp so với 4), nên nếu
     không viết lại riêng thì nút đã cuộn hết đầu dải sẽ sáng rõ như nút còn dùng được. */
  .kqt.pp .thumbs-wrap:hover .thumbs__nav:disabled,
  .kqt.pp .thumbs-wrap:focus-within .thumbs__nav:disabled{ opacity:.32; pointer-events:none; }
}
/* margin:0 KHÔNG phải chuyện thẩm mỹ — vá một lỗi CÓ TỪ TRƯỚC đợt sửa này.
   Ô ảnh là thẻ <button>, mà style nút của theme/trình duyệt đặt margin-bottom theo
   đơn vị EM — đo được 15,52px. Hậu quả: dải cao 137px trong khi ô ảnh chỉ 122px, thừa
   ~15px trống dưới hàng ảnh (CSS cũ còn cộng padding-bottom:6px lên trên khoảng trống
   ấy). Đây cũng là lý do hai nút mũi tên lệch lên 8px: top:50% tính theo dải 137,
   không theo ô 122.
   Mọi phép dò thông thường đều MÙ với nó: padding = 0; offsetHeight − clientHeight = 0
   (không phải thanh cuộn); xoá hết text node khoảng trắng không đổi gì; đổi align-items
   sang baseline/stretch/center vẫn 137. Chỉ getComputedStyle().marginBottom mới lộ ra.
   Đặt margin:0 rồi đo lại tại chỗ: dải 122, ô 122, lệch tâm nút 0. */
.kqt.pp .thumb{ flex:0 0 calc((100% - 48px) / 5); max-width:calc((100% - 48px) / 5);
  aspect-ratio:1; border:1.5px solid var(--taupe-15); border-radius:var(--radius);
  overflow:hidden; position:relative; transition:border-color .2s, box-shadow .2s, transform .2s; cursor:pointer;
  padding:0; margin:0; }
.kqt.pp .thumb:hover{ border-color:var(--gold); transform:translateY(-2px); }
.kqt.pp .thumb.is-active{ border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold); }
.kqt.pp .thumb .ph{ position:absolute; inset:0; isolation:isolate; background:#fff; }
.kqt.pp .thumb .ph__img{ object-fit:contain; padding:9%; mix-blend-mode:normal; filter:none; }

/* buybox */
.kqt.pp .buybox__brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.kqt.pp .buybox__brand .bflag{ font-family:var(--serif); font-size:18px; font-weight:700; color:var(--navy); letter-spacing:.04em; }
.kqt.pp .buybox__brand .auth{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--gold-dark); background:var(--gold-tint);
  padding:5px 10px; border-radius:999px; }
.kqt.pp .buybox__brand .auth svg{ width:13px; height:13px; stroke:var(--gold-dark); fill:none; stroke-width:2; }
/* CỐ Ý KHÔNG đổi sang var(--fs-h1-page) (đợt chuẩn hóa 2026-09-10): đây là
   TÊN SẢN PHẨM nằm trong cột buybox hẹp cạnh gallery ảnh, không phải H1 hero
   toàn trang — cùng loại ngoại lệ với H1 Trang chủ (--fs-h1-home, vai trò
   khác nhau thì cỡ khác nhau, xem kqt-typography.css). Ép lên 44px trong
   cột hẹp sẽ vỡ dòng tên sản phẩm dài + đội chiều cao buybox không đều. */
.kqt.pp .buybox h1{ font-size:clamp(20px,1.7vw,26px); line-height:1.32; color:var(--navy); margin:0; font-weight:700;
  overflow-wrap:break-word; word-break:break-word; }
.kqt.pp .buybox__sku{ font-size:13px; color:var(--ink-3); margin:10px 0 0; overflow-wrap:break-word; word-break:break-word; }
.kqt.pp .buybox__sku b{ color:var(--ink-2); font-weight:600; }
.kqt.pp .buybox__rate{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.kqt.pp .buybox__rate a{ font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.kqt.pp .buybox__rate .sep{ color:var(--taupe-30); }

.kqt.pp .priceblock{ margin:22px 0; padding:20px 22px; border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); background:var(--cream); }
.kqt.pp .priceblock__row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.kqt.pp .priceblock .now{ font-family:var(--serif); font-size:38px; font-weight:800; color:var(--navy); line-height:1; }
.kqt.pp .priceblock .was{ font-size:18px; color:var(--ink-3); text-decoration:line-through; }
.kqt.pp .priceblock .off{ font-size:12px; font-weight:700; color:var(--gold-dark); background:var(--gold-tint); padding:5px 10px; border-radius:5px; }
.kqt.pp .priceblock__meta{ display:flex; gap:18px; margin-top:14px; font-size:13px; color:var(--ink-2); flex-wrap:wrap; }
.kqt.pp .priceblock__meta .stock{ display:inline-flex; align-items:center; gap:7px; color:#1F8A5B; font-weight:600; }
.kqt.pp .priceblock__meta .stock .dot{ width:8px; height:8px; border-radius:50%; background:#1F8A5B; }
.kqt.pp .priceblock__meta .ship{ display:inline-flex; align-items:center; gap:6px; }
.kqt.pp .priceblock__meta svg{ width:15px; height:15px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; }
/* align-items:flex-start chứ KHÔNG center: khi chữ tràn 2 dòng (mobile), center
   đẩy cái ghim xuống giữa khối, nhìn như rơi ra khỏi dòng đầu. */
.kqt.pp .priceblock__stores{ display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--taupe-20); font-size:13px; line-height:1.5; color:var(--ink-2); transition:color .2s; }
.kqt.pp .priceblock__stores > span{ flex:1 1 auto; min-width:0; }
.kqt.pp .priceblock__stores b{ color:var(--navy); white-space:nowrap; }
.kqt.pp .priceblock__stores:hover,
.kqt.pp .priceblock__stores:hover b{ color:var(--gold-dark); }
.kqt.pp .priceblock__stores svg{ width:17px; height:17px; margin-top:1px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; flex:none; }

/* chọn phiên bản cùng dòng (khối cấu hình) */
.kqt.pp .cfgpick{ margin-top:18px; }
.kqt.pp .cfgpick__lbl{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--navy); }
.kqt.pp .cfgpick__lbl span{ font-size:11.5px; font-weight:600; color:var(--ink-3); background:var(--cream); padding:3px 8px; border-radius:20px; }
.kqt.pp .cfgpick__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.kqt.pp .cfgpick__item{ display:flex; flex-direction:column; gap:6px; padding:10px; border:1.5px solid var(--taupe-15);
  border-radius:var(--radius); background:var(--white); transition:border-color .2s, box-shadow .2s; cursor:pointer; }
.kqt.pp a.cfgpick__item:hover{ border-color:var(--gold-dark); box-shadow:0 4px 14px rgba(15,27,45,.08); }
.kqt.pp .cfgpick__item.is-active{ border-color:var(--gold-dark); background:var(--gold-tint); cursor:default; }
.kqt.pp .cfgpick__item .ph{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--cream); }
.kqt.pp .cfgpick__item .ph__img{ width:100%; height:100%; object-fit:cover; }
.kqt.pp .cfgpick__nm{ font-size:11.5px; line-height:1.4; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.kqt.pp .cfgpick__pr{ font-size:13px; font-weight:800; color:var(--gold-dark); margin-top:auto; }
.kqt.pp .cfgpick__pr del{ display:none; }
@media(max-width:560px){ .kqt.pp .cfgpick__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* qty + CTA cluster */
.kqt.pp .buyrow{ display:flex; gap:14px; align-items:stretch; margin-top:6px; }
/* Bộ chọn số lượng.
   Trước: ô số có `border-inline` hai vạch dọc, cộng viền ngoài 1.5px đậm → cả cụm
   trông như một ô bảng kẻ, thô hơn hẳn nút vàng liền khối bên cạnh.
   Nay: bỏ vạch ngăn, cả cụm là MỘT khối liền, viền mảnh 1px cùng tông với các
   khối khác trên trang; hai nút −/+ chìm xuống, chỉ nổi lên khi rê chuột / chạm.
   Vẫn bo 4px (=--radius của theme) chứ KHÔNG bo tròn viên thuốc: ngôn ngữ hình
   khối của trang này là góc vuông mềm, bo tròn sẽ lạc khỏi nút "Thêm vào giỏ". */
/* ⚠️ Flatsome (theme cha) đặt sẵn `margin:0 17px 17px 0` cho MỌI thẻ <button> và
   `margin-bottom:16px` cho <input>. Lọt vào đây thành: 17px hở giữa nút − và ô số,
   17px chết ở đáy khung → ba mảnh so le nhau, đúng cái nhìn "thô". Bản cũ có hai
   vạch dọc nên nhìn như ô bảng lệch. PHẢI xoá margin tại chỗ, đừng chỉnh bằng gap. */
.kqt.pp .qty button,
.kqt.pp .qty input{ margin:0; align-self:stretch; }
.kqt.pp .qty{ display:inline-flex; align-items:stretch; border:1px solid var(--taupe-15); border-radius:var(--radius);
  background:var(--white); overflow:hidden; flex:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.kqt.pp .qty:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,169,78,.16); }
.kqt.pp .qty button{ width:44px; min-height:52px; display:grid; place-items:center; line-height:1;
  font-size:17px; font-weight:500; color:var(--ink-3); border:0; background:transparent; cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease); }
.kqt.pp .qty button:hover{ background:var(--cream); color:var(--navy); }
.kqt.pp .qty button:active{ background:var(--cream); color:var(--gold-dark); }
/* `height:auto` là bắt buộc: Flatsome đặt CHIỀU CAO CỨNG 40px cho <input>, mà chiều
   cao cứng thì thắng `align-self:stretch` → ô số cao 40 trong khung 54, con số đứng
   lệch lên 13px so với hai nút bên cạnh. */
/* `box-shadow:none` cũng bắt buộc: Flatsome đổ `inset 0 1px 2px rgba(0,0,0,.1)` cho
   <input>. Bóng đổ vào trong vẽ ra một khung mờ quanh con số — xoá viền rồi mà nhìn
   vẫn thấy "ô", vì cái kẻ ô còn lại là BÓNG chứ không phải viền. */
.kqt.pp .qty input{ width:40px; height:auto; text-align:center; border:0; box-shadow:none; font-size:16px; font-weight:700; color:var(--navy);
  background:transparent; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.kqt.pp .qty input:focus{ outline:0; }
.kqt.pp .qty input::-webkit-outer-spin-button,
.kqt.pp .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.kqt.pp .cta-main{ flex:1; }
.kqt.pp .cta-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
.kqt.pp .cta-out{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 8px;
  border:1.5px solid var(--navy); border-radius:var(--radius); font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--navy); background:var(--white); transition:.2s var(--ease); text-align:center; }
.kqt.pp .cta-out:hover{ background:var(--navy); color:var(--on-navy); }
.kqt.pp .cta-out.zalo{ border-color:var(--gold-dark); color:var(--gold-dark); }
.kqt.pp .cta-out.zalo:hover{ background:var(--gold-grad); color:#0F1B2D; border-color:transparent; }
.kqt.pp .cta-out svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* --- Nút "trả giá qua Zalo" (2026-09-15, port từ kimquoctien.com) ---------
   Cố ý KHÔNG dùng .btn--gold (đã là màu của nút "Thêm vào giỏ hàng" ngay
   trên — hai nút cùng màu đặc cạnh nhau khách không phân biệt được nút nào
   là mua thật). Viền đứt nét + nền vàng nhạt = "còn thương lượng được",
   khác hẳn khối nút đặc phía trên. */
.kqt.pp .haggle{ display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:50px; margin-top:12px; padding:0 16px; border-radius:var(--radius);
  border:1.5px dashed var(--gold-dark); background:var(--gold-tint); color:var(--navy);
  font-size:14px; font-weight:600; text-align:center; transition:.2s var(--ease); }
.kqt.pp .haggle b{ font-weight:800; }
.kqt.pp .haggle svg{ width:19px; height:19px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; flex:none; transition:.2s var(--ease); }
.kqt.pp .haggle:hover{ background:var(--gold-grad); border-color:transparent; color:#2A2008; transform:translateY(-1px); }
.kqt.pp .haggle:hover svg{ stroke:#2A2008; }
@media (max-width:480px){
  .kqt.pp .haggle{ font-size:13px; gap:6px; padding:0 10px; }
}

/* "Hoàn tiền" (cashback) — huy hiệu $ port từ kimquoctien.com, đặt phía trên
   .priceblock. Chỉ in ra khi postmeta _kqt_hoan_tien có số thật (xem
   kqt_hoan_tien_badge trong inc/kqt-product.php) — không có huy hiệu nghĩa là
   SP đó chưa có dữ liệu, KHÔNG suy ra bằng % giảm giá. Đổi từ xanh lục sang
   vệt vàng thương hiệu (--gold-grad/--navy, giống .badge--hot) 2026-09-15 —
   Quyết góp ý màu xanh không liên quan gì tới bộ nhận diện KQT.
   2026-09-15 (2): hạ cỡ xuống ngang badge "Chính hãng 100%" vì Quyết báo to
   bất hợp lý — RỒI 2026-09-15 (3) Quyết đổi ý: nút này giờ là CTA bấm mở
   popup điều kiện (không còn là badge tĩnh nữa), nên phải NỔI BẬT hơn xung
   quanh, không còn so với .auth nữa — chữ to lại (14.5px, đậm hơn), thêm vệt
   sáng chạy (::after quét chéo, lặp mỗi ~3.2s, tắt hẳn khi
   prefers-reduced-motion) + bóng nổi để trông giống nút bấm chứ không phải
   nhãn trang trí. Phần tử giờ là <button> thật (xem kqt_hoan_tien_badge()
   $clickable) nên phải reset style mặc định của <button>.
   2026-09-15 (4): Quyết báo "chữ vẫn chưa nổi bật, icon tiền vẫn chưa nổi
   bật" — nền vàng + chữ navy tuy đủ tương phản nhưng CÙNG TÔNG ấm với priceblock
   phía dưới (nền --cream) nên mắt lướt qua không khựng lại. Đảo ngược: nền
   NAVY ĐẶC (tông lạnh, tách hẳn khỏi mọi khối vàng/kem xung quanh) + chữ vàng
   sáng — đúng cặp tương phản cao nhất bộ nhận diện (--on-navy dùng cho nút CTA
   chính), vệt sáng chạy trên nền tối cũng rõ hơn hẳn trên nền vàng. Icon đổi
   thành khối tròn vàng đặc (như đồng xu) thay vì nét mảnh — không nét nào có
   thể "chưa nổi bật" khi tự nó là một hình khối đặc màu khác nền. */
.kqt.pp .rebate{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px 9px 9px; margin:14px 0; border:none; -webkit-appearance:none; appearance:none;
  font-family:inherit; text-transform:none; cursor:pointer; border-radius:999px;
  background:linear-gradient(135deg,#152945 0%,#0F1B2D 65%);
  color:var(--gold-light,#F3D98A); font-size:15.5px; font-weight:800; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(15,27,45,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease; }
/* SKU bên trên margin-bottom:0 nên khoảng cách phía trên chỉ do margin-top ở
   đây quyết định (14px). Phía dưới: nút <button> là inline-flex nên margin
   KHÔNG collapse với margin-top:22px của .priceblock — cộng dồn thành 36px,
   lệch hẳn so với 14px phía trên (đúng lỗi Quyết chỉ trong ảnh). Xoá hẳn
   margin-top của .priceblock khi đứng sau nút này — margin-bottom:14px sẵn có
   của nút đã đủ tạo khoảng cách, cộng thêm là dư — để hai bên bằng nhau tại
   14px; không đụng trường hợp SP không có huy hiệu (.priceblock vẫn 22px).
   DÙNG "~" chứ không phải "+": kqt_hoan_tien_modal() in ra <div id="htModal">
   XEN GIỮA nút và .priceblock trong DOM (dù [hidden] không chiếm chỗ) nên
   .rebate + .priceblock KHÔNG khớp — "+" chỉ bắt anh em NGAY SÁT, còn "~" bắt
   mọi anh em phía sau bất kể xen gì ở giữa. */
.kqt.pp .rebate ~ .priceblock{ margin-top:0; }
.kqt.pp .rebate:hover, .kqt.pp .rebate:focus-visible{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(15,27,45,.55); }
.kqt.pp .rebate:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* Nhãn "Hoàn tiền" giữ font-weight thường của nút (800) — số tiền phải nổi
   bật HƠN NỮA vì đó mới là thứ khách cần thấy trước, nên tách riêng: to hơn
   (17px so với 15.5px của nhãn), trắng tinh (không phải vàng) để là điểm sáng
   nhất trong nút, thêm text-shadow phát sáng nhẹ đúng màu vàng thương hiệu. */
.kqt.pp .rebate b{ font-size:17px; font-weight:900; color:#fff; text-shadow:0 0 10px rgba(232,195,106,.55); }
/* Icon đổi hẳn từ nét mảnh sang KHỐI TRÒN VÀNG ĐẶC (đồng xu) — nền + border-radius
   ngay trên chính svg (svg nhận background/padding như phần tử thường), stroke
   đổi sang navy vì giờ nó nằm trên nền vàng chứ không phải nền navy của nút.
   2026-09-15 (5): Quyết gửi ảnh tham khảo (icon $ nền vàng chữ đỏ có viền sáng
   quanh mép) — mô phỏng lại bằng CSS thuần, KHÔNG đổi path SVG: stroke-width
   tăng gần gấp rưỡi (2.4→3.4) để nét $ dày như chữ đặc thay vì line-art mảnh,
   thêm viền sáng quanh mép bằng box-shadow (ring 2px, không dùng border thật
   vì border cộng thêm vào box-sizing:content-box sẽ đội kích thước tổng, ring
   qua box-shadow không chiếm layout). */
.kqt.pp .rebate svg{ box-sizing:content-box; display:block; width:13px; height:13px; padding:5px; flex:none;
  border-radius:50%; background:var(--gold-grad,linear-gradient(135deg,#C99A3B 0%,#E8C36A 100%));
  stroke:var(--navy,#0F1B2D); fill:none; stroke-width:3.4; stroke-linecap:round;
  box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.3); }
/* Vệt sáng chạy — quét nhanh (~1.1s) rồi nghỉ ngoài khung phần còn lại của chu kỳ,
   tránh chớp liên tục gây khó chịu/rối mắt. Trên nền navy đặc, vệt trắng bán
   trong hiện rõ hẳn hơn trước (lúc còn nền vàng, vệt trắng gần như hoà vào nền). */
.kqt.pp .rebate::after{ content:''; position:absolute; top:0; left:-75%; width:45%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform:skewX(-20deg); pointer-events:none; animation:kqtHtShine 3.2s ease-in-out infinite; }
@keyframes kqtHtShine{ 0%{ left:-75%; } 35%{ left:130%; } 100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){
  .kqt.pp .rebate::after{ animation:none; display:none; }
}
@media (max-width:480px){
  .kqt.pp .rebate{ font-size:14px; padding:7px 15px 7px 7px; gap:7px; }
  .kqt.pp .rebate b{ font-size:15px; }
  .kqt.pp .rebate svg{ width:11px; height:11px; padding:4.5px; }
}

/* ---- Popup "Điều kiện tham gia chương trình hoàn tiền" (2026-09-15) ------
   Bấm nút .rebate mở popup này — mô phỏng đúng pattern modal so sánh sản
   phẩm đã có (.kqt-cmodal trong inc/kqt-compare.php) để nhất quán hành vi
   toàn site: scrim + panel, [hidden] + aria-hidden do JS đổi (xem
   assets/js/kqt-product.js), ESC/click-nền để đóng. */
/* z-index 9999→1300 (2026-09-25, hallmark audit #7): 9999 là số "đè cho chắc"
   ngoài thang — site đã CÓ thang modal thật trong kqt-compare.css (bar 1200 <
   modal 1300 < toast 1400). Popup này mô phỏng .kqt-cmodal thì đứng cùng nấc
   1300 với nó; hai modal không bao giờ mở chồng nhau nên không cần nấc riêng. */
.kqt-htmodal{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:16px; }
.kqt-htmodal[hidden]{ display:none; }
.kqt-htmodal__scrim{ position:absolute; inset:0; background:rgba(15,27,45,.55); }
.kqt-htmodal__panel{ position:relative; width:100%; max-width:480px; max-height:min(600px,86vh); overflow-y:auto;
  background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(15,27,45,.35); }
.kqt-htmodal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 20px 12px; border-bottom:1px solid var(--taupe-15,rgba(74,84,104,.15)); }
.kqt-htmodal__head h2{ margin:0; font-size:17px; line-height:1.35; font-weight:800; color:var(--navy,#0F1B2D); }
/* display:grid + place-items:center (không phải inline-flex) — đúng pattern đã
   chạy ổn ở .kqt-cmodal__x (inc/kqt-compare.php). padding:0/margin:0/border:0
   khai RÕ vì nút <button> ăn padding/border mặc định của Flatsome (Flatsome
   không reset những thứ này cho button thường) — thiếu 3 dòng đó thì hộp nút
   phồng to hơn 30×30 khai báo VÀ (đã đo bằng DevTools 2026-09-15) icon svg bên
   trong tính ra bề rộng 0 — box-sizing:border-box mặc định của trình duyệt cho
   input/button/select cộng padding-ngang mặc định của Flatsome vào bên trong
   khung 30px cố định, ép phần còn lại cho nội dung xuống 0. */
/* min-height:30px BẮT BUỘC — Flatsome có luật chung `button{min-height:2.5em}`
   (đo được 38,8px vì font-size kế thừa ~15,5px); min-height LUÔN thắng height
   dù specificity của class ta cao hơn, vì đây là kẹp giữa HAI THUỘC TÍNH khác
   nhau (min-height với height), không phải một cuộc đua cascade trên cùng một
   thuộc tính — không khai đè thì nút méo thành hình trứng 30×38,8 dù đã khai
   height:30px. */
.kqt-htmodal__x{ flex:none; display:grid; place-items:center; width:30px; height:30px; min-height:30px; min-width:30px; padding:0; margin:0;
  border:0; box-sizing:border-box; background:var(--cream,#F4F1E9); border-radius:50%; cursor:pointer; color:var(--navy,#0F1B2D); }
.kqt-htmodal__x svg{ display:block; width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.kqt-htmodal__body{ padding:16px 20px 22px; font-size:14px; line-height:1.6; color:var(--ink-2,#3A4658); }
.kqt-htmodal__body p{ margin:0 0 12px; }
.kqt-htmodal__body ul{ margin:0 0 12px; padding-left:20px; }
.kqt-htmodal__body li{ margin-bottom:8px; }
.kqt-htmodal__body li::marker{ color:var(--gold-dark,#9A742A); }
.kqt-htmodal__note{ font-style:italic; color:var(--ink-3,#6B7686); font-size:13px; }
.kqt-htmodal__cta{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--taupe-15,rgba(74,84,104,.15));
  font-weight:600; color:var(--navy,#0F1B2D); }
.kqt-htmodal__cta a{ color:var(--gold-dark,#9A742A); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
body.kqt-htmodal-open{ overflow:hidden; }

/* --- DỊCH VỤ LẮP ĐẶT (thay .buybox__assure, 2026-09-08) -------------------
   Bảng giá theo từng nhóm hàng, in bởi inc/kqt-lapdat.php. Radio thuần hiển
   thị — không cộng tiền vào giỏ nên KHÔNG cần JS, trạng thái vẽ bằng :checked.
   Màu theo bảng màu tiệm (navy + gold), không bê màu xanh của trang tham khảo. */
.kqt.pp .lapdat{ margin-top:20px; border:1px solid var(--taupe-15); border-radius:10px; overflow:hidden; }
.kqt.pp .lapdat__head{ background:var(--navy); color:#fff; padding:10px 14px; }
.kqt.pp .lapdat__head b{ display:block; font-family:var(--sans); font-size:13px; letter-spacing:.06em; color:var(--gold); }
.kqt.pp .lapdat__head span{ display:block; margin-top:2px; font-size:11.5px; color:rgba(255,255,255,.7); }
.kqt.pp .lapdat__body{ padding:12px 14px 13px; background:#fff; }

/* Máng âm 6px: margin âm kéo nền ra sát mép hơn, padding kéo NỘI DUNG trả về
   đúng 14px — cùng một mốc lề với tiêu đề navy và dải chân thẻ. Nhờ vậy nút
   radio, dấu ✓ và chữ ở dải chân đều bắt đầu tại 14px thay vì 24/18/14 như
   bản cũ. Cao 42px (10+21,6+10) cho vừa ngón tay trên mobile. */
.kqt.pp .lapdat__op{ display:flex; align-items:center; gap:10px; margin:0 -6px; padding:10px 6px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--ink-2); transition:background .15s; }
.kqt.pp .lapdat__op:hover{ background:var(--cream); }
.kqt.pp .lapdat__op input{ appearance:none; -webkit-appearance:none; width:17px; height:17px; margin:0; flex:none; border:1.6px solid var(--taupe-30,#c9c1b4); border-radius:50%; background:#fff; transition:border-color .15s; }
.kqt.pp .lapdat__op input:checked{ border-color:var(--gold-dark); border-width:5px; }
.kqt.pp .lapdat__op:has(input:checked){ background:var(--cream); }
.kqt.pp .lapdat__op:has(input:checked) .lapdat__nhan{ color:var(--navy); font-weight:600; }
.kqt.pp .lapdat__nhan{ flex:1 1 auto; }
.kqt.pp .lapdat__gia{ flex:none; font-family:var(--sans); font-size:14px; color:var(--gold-dark); }

/* Bỏ hết lề lẻ 2px của bản cũ: mọi thứ trong thân thẻ về chung mốc 14px.
   Gạch ngăn của .lapdat__cam nhờ đó chạy đúng bằng bề ngang nội dung, không
   thò ra thụt vào so với hàng radio bên trên. */
.kqt.pp .lapdat__note{ margin:6px 0 0; font-size:12px; line-height:1.55; color:var(--ink-3); }
.kqt.pp .lapdat__ks{ margin:0 0 10px; font-size:13px; line-height:1.6; color:var(--ink-2); }
.kqt.pp .lapdat__cam{ list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--taupe-10); }
.kqt.pp .lapdat__cam li{ position:relative; padding-left:20px; font-size:12px; line-height:1.6; color:var(--ink-3); }
.kqt.pp .lapdat__cam li + li{ margin-top:4px; }
.kqt.pp .lapdat__cam li::before{ content:""; position:absolute; left:0; top:6px; width:8px; height:5px; border-left:1.6px solid var(--gold-dark); border-bottom:1.6px solid var(--gold-dark); transform:rotate(-45deg); }

/* Nút của khối KHẢO SÁT: full width để vùng bấm bằng đúng bề ngang khối —
   inline-flex cũ co lại theo chữ nên trông như bị lệch trái trong thẻ. */
.kqt.pp .lapdat__cta{ display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:2px; padding:10px 16px; border:1px solid var(--gold); border-radius:8px; font-family:var(--sans); font-size:13px; color:var(--navy); background:#fff; transition:background .15s,color .15s,border-color .15s; }
.kqt.pp .lapdat__cta:hover{ background:var(--gold-grad,var(--gold)); color:#0F1B2D; border-color:transparent; }

/* Dải chân khối CÓ GIÁ → trang Dịch vụ lắp đặt. Nền kem, chạy hết bề ngang
   thẻ (thẻ có overflow:hidden nên tự bo góc dưới), hover đảo sang navy giống
   .cta-out cho đồng bộ. Không dùng màu vàng đặc để khỏi tranh nút mua. */
.kqt.pp .lapdat__more{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-top:1px solid var(--taupe-15); background:var(--cream); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--navy); transition:background .15s,color .15s; }
.kqt.pp .lapdat__more:hover{ background:var(--navy); color:#fff; }
.kqt.pp .lapdat__cta svg,
.kqt.pp .lapdat__more svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .15s; }
.kqt.pp .lapdat__cta:hover svg,
.kqt.pp .lapdat__more:hover svg{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .kqt.pp .lapdat__cta svg, .kqt.pp .lapdat__more svg{ transition:none; }
  .kqt.pp .lapdat__cta:hover svg, .kqt.pp .lapdat__more:hover svg{ transform:none; }
}

/* ============================================================
   D · TRUST BAR
   ============================================================ */
.kqt.pp .trustbar{ border-block:1px solid var(--taupe-15); background:var(--cream); }
.kqt.pp .trustbar__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.kqt.pp .trustbar__cell{ display:flex; align-items:center; gap:13px; padding:24px 22px; }
.kqt.pp .trustbar__cell + .trustbar__cell{ border-left:1px solid var(--taupe-15); }
.kqt.pp .trustbar__ic{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--gold); display:grid; place-items:center; color:var(--gold-dark); flex:none; }
.kqt.pp .trustbar__ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; }
.kqt.pp .trustbar__cell b{ font-family:var(--sans); font-size:14px; color:var(--navy); display:block; }
/* PHẢI có "> div": cái vòng tròn icon CŨNG là thẻ <span> (.trustbar__ic), nên
   ".trustbar__cell span" trần trúng luôn cả nó. Mà 3 lớp thì đè được
   ".kqt.pp .trustbar__ic" chỉ có 2 lớp — icon bị nhuộm xám --ink-3 thay vì
   vàng --gold-dark, do svg vẽ bằng stroke:currentColor. */
.kqt.pp .trustbar__cell > div span{ font-size:12.5px; color:var(--ink-3); }

/* ============================================================
   LAYOUT: content + sticky aside
   ============================================================ */
/* Đệm TRÊN trừ bớt --tabpad để nhịp tính từ chữ trên thanh tab; đệm DƯỚI giữ
   nguyên --sec vì dưới đó không có thanh nào cả. Vẫn một nguồn duy nhất: đổi
   --sec là cả trang đổi theo. */
.kqt.pp .ppbody{ display:grid; grid-template-columns:1fr 360px; gap:48px;
  padding:calc(var(--sec) - var(--tabpad)) var(--gutter) var(--sec); align-items:start; }
.kqt.pp .ppmain{ min-width:0; }
.kqt.pp .ppaside{ position:sticky; top:130px; display:flex; flex-direction:column; gap:18px; }

.kqt.pp .block{ margin-bottom:var(--sec); scroll-margin-top:140px; }
.kqt.pp .block:last-child{ margin-bottom:0; }
.kqt.pp .block__head{ margin-bottom:22px; }
.kqt.pp .block__head .eyebrow{ display:block; margin-bottom:10px; color:var(--gold-dark); }
/* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site, đợt 2): 30px cố định → var(--fs-h2)
   dùng chung — đây LÀ tiêu đề section thật (Mô tả, Thông số kỹ thuật...), cùng
   vai trò H2 với About/Dịch vụ nên gộp chung được, không như .buybox h1 ở trên. */
.kqt.pp .block__head h2{ font-size:var(--fs-h2); color:var(--navy); position:relative; display:inline-block; margin:0; font-weight:700; line-height:1.2; }
.kqt.pp .block__head h2::after{ content:""; display:block; width:54px; height:3px; background:var(--gold-grad); border-radius:2px; margin-top:12px; }

/* section nav (sticky tabs) */
.kqt.pp .secnav{ position:sticky; top:120px; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--taupe-15); margin-bottom:0; }
.kqt.pp .secnav ul{ display:flex; gap:6px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; }
.kqt.pp .secnav ul::-webkit-scrollbar{ display:none; }
.kqt.pp .secnav a{ display:inline-block; padding:var(--tabpad); font-size:13px; font-weight:600; color:var(--ink-3); white-space:nowrap;
  border-bottom:2px solid transparent; transition:.2s; }
.kqt.pp .secnav a:hover{ color:var(--navy); }
.kqt.pp .secnav a.is-active{ color:var(--navy); border-bottom-color:var(--gold); }

/* ---------- E · Description ---------- */
.kqt.pp .desc__lead{ font-size:18px; line-height:1.7; color:var(--ink-2); }
.kqt.pp .desc__list{ list-style:none; margin:24px 0; padding:0; display:grid; gap:14px; }
.kqt.pp .desc__list li{ position:relative; padding-left:22px; font-size:15px; line-height:1.65; color:var(--ink-2); }
.kqt.pp .desc__list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.kqt.pp .desc__list li b{ color:var(--navy); font-weight:700; }
.kqt.pp .desc__body{ font-size:15px; line-height:1.8; color:var(--ink-2); }
.kqt.pp .desc__body p{ margin:0 0 14px; }
.kqt.pp .desc__body h2,
.kqt.pp .desc__body h3{ color:var(--navy); margin:24px 0 12px; }
.kqt.pp .desc__body ul{ list-style:none; margin:18px 0; padding:0; display:grid; gap:12px; }
.kqt.pp .desc__body ul li{ position:relative; padding-left:22px; }
.kqt.pp .desc__body ul li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.kqt.pp .desc__body img{ max-width:100%; height:auto; border-radius:var(--radius-lg); margin:10px 0; }
/* Internal links trong nội dung — anchor nổi bật để khách dễ điều hướng (gold-dark + gạch chân tinh tế).
   .kqt.pp a mặc định color:inherit/no-underline (vô hình trong văn bản) nên cần override rõ trong vùng mô tả. */
.kqt.pp .desc__body a,
.kqt.pp .desc__lead a{ color:var(--gold-dark); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--gold); transition:color .2s, text-decoration-color .2s; }
.kqt.pp .desc__body a:hover,
.kqt.pp .desc__lead a:hover{ color:var(--navy); text-decoration-color:var(--navy); }
.kqt.pp .desc__body a strong,
.kqt.pp .desc__lead a strong{ color:inherit; font-weight:700; }
/* Ảnh sản phẩm chèn trong thân bài (figure auto từ DB) */
.kqt.pp .desc__body figure.kqt-inline-img{ margin:22px 0; text-align:center; }
.kqt.pp .desc__body figure.kqt-inline-img img{ display:inline-block; max-width:78%; background:var(--paper); padding:2%; mix-blend-mode:multiply; }
.kqt.pp .desc__body figure.kqt-inline-img figcaption{ margin-top:10px; font-size:13px; color:var(--ink-3); font-style:italic; }
.kqt.pp .desc__figure{ border-radius:var(--radius-lg); overflow:hidden; margin-top:8px; aspect-ratio:16/8; position:relative; }
.kqt.pp .desc__figure .ph{ position:absolute; inset:0; }

/* ---------- F · Specs ---------- */
.kqt.pp .spectable{ width:100%; border-collapse:collapse; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); overflow:hidden; font-size:14.5px; }
.kqt.pp .spectable th,
.kqt.pp .spectable td{ padding:15px 20px; text-align:left; }
.kqt.pp .spectable thead th{ background:var(--navy); color:var(--on-navy); font-family:var(--sans); font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.kqt.pp .spectable tbody td:first-child{ color:var(--ink-3); width:42%; font-weight:500; }
.kqt.pp .spectable tbody td:last-child{ color:var(--navy); font-weight:600; }
.kqt.pp .spectable tbody tr:nth-child(odd){ background:var(--cream); }
.kqt.pp .spectable tbody tr{ border-top:1px solid var(--taupe-10); }
.kqt.pp .spec-docs{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.kqt.pp .doc-pill{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border:1px solid var(--taupe-20);
  border-radius:var(--radius); font-size:13.5px; font-weight:600; color:var(--navy); transition:.2s; }
.kqt.pp .doc-pill:hover{ border-color:var(--gold); background:var(--gold-tint); }
.kqt.pp .doc-pill svg{ width:18px; height:18px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; }

/* ---------- G · Video ---------- */
.kqt.pp .video-row{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }
.kqt.pp .video{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; background:var(--navy); }
.kqt.pp .video .ph{ position:absolute; inset:0; opacity:.8; }
.kqt.pp .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.kqt.pp .video__play{ position:absolute; inset:0; margin:auto; width:78px; height:78px; border:0; border-radius:50%;
  background:var(--gold-grad); display:grid; place-items:center; box-shadow:var(--shadow-gold); cursor:pointer; transition:transform .3s var(--ease); }
.kqt.pp .video__play:hover{ transform:scale(1.08); }
.kqt.pp .video__play svg{ width:30px; height:30px; fill:#0F1B2D; margin-left:4px; }
.kqt.pp .video__cap{ position:absolute; left:20px; bottom:18px; z-index:3; color:#fff; }
.kqt.pp .video__cap b{ font-family:var(--serif); font-size:18px; display:block; }
.kqt.pp .video__cap span{ font-size:13px; color:rgba(255,255,255,.8); }
.kqt.pp .video--sm{ aspect-ratio:4/3; }
.kqt.pp .video--sm .video__play{ width:56px; height:56px; }
.kqt.pp .video--sm .video__play svg{ width:22px; height:22px; }

/* ---------- H · Reviews + UGC ---------- */
.kqt.pp .rate-summary{ display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center; margin-bottom:30px;
  padding:26px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--cream); }
.kqt.pp .rate-big{ text-align:center; }
.kqt.pp .rate-big .n{ font-family:var(--serif); font-size:54px; font-weight:800; color:var(--navy); line-height:1; }
.kqt.pp .rate-big .stars{ justify-content:center; margin:8px 0 6px; }
.kqt.pp .rate-big span{ font-size:13px; color:var(--ink-3); }
.kqt.pp .rate-bars{ display:flex; flex-direction:column; gap:8px; }
.kqt.pp .rate-bar{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-3); }
.kqt.pp .rate-bar .lbl{ width:42px; }
.kqt.pp .rate-bar .track{ flex:1; height:8px; background:var(--taupe-10); border-radius:999px; overflow:hidden; }
.kqt.pp .rate-bar .fill{ height:100%; background:var(--gold-grad); border-radius:999px; }
.kqt.pp .rate-bar .pct{ width:36px; text-align:right; }
.kqt.pp .reviews-list{ display:flex; flex-direction:column; gap:16px; }
.kqt.pp .rev{ border:1px solid var(--taupe-15); border-radius:var(--radius-lg); padding:22px; background:var(--white); }
.kqt.pp .rev__top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.kqt.pp .rev__av{ width:42px; height:42px; border-radius:50%; background:var(--navy); color:var(--on-navy); display:grid; place-items:center; font-family:var(--serif); font-weight:700; }
.kqt.pp .rev__who b{ font-family:var(--sans); font-size:14px; color:var(--ink); display:block; }
.kqt.pp .rev__who span{ font-size:12px; color:var(--ink-3); }
.kqt.pp .rev__top .stars{ margin-left:auto; }
.kqt.pp .rev p{ font-size:14.5px; color:var(--ink-2); line-height:1.65; margin:0; }
.kqt.pp .reviews-empty{ padding:30px; text-align:center; color:var(--ink-3); font-size:14px; border:1px dashed var(--taupe-20); border-radius:var(--radius-lg); }
/* Form gửi đánh giá (2026-09-30). Sao: DOM 5->1 + row-reverse nên hiện 1->5,
   nhờ vậy "input:checked ~ label" (anh em ĐỨNG SAU trong DOM = sao THẤP hơn)
   tô đúng từ sao 1 tới sao đã chọn. */
.kqt.pp .rv-form{ margin-top:26px; padding:26px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--cream); }
.kqt.pp .rv-form h4{ font-family:var(--sans); font-size:14px; color:var(--navy); margin:0 0 14px; }
.kqt.pp .rv-form__ok{ margin:0; font-size:14px; color:var(--ink-2); }
.kqt.pp .rv-stars{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; margin-bottom:14px; }
.kqt.pp .rv-stars input{ position:absolute; opacity:0; width:0; height:0; }
.kqt.pp .rv-stars label{ font-size:26px; line-height:1; color:var(--taupe-20); cursor:pointer; transition:color .15s; }
.kqt.pp .rv-stars input:checked ~ label,
.kqt.pp .rv-stars label:hover,
.kqt.pp .rv-stars label:hover ~ label{ color:var(--gold); }
.kqt.pp .rv-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.kqt.pp .rv-form input[type=text], .kqt.pp .rv-form input[type=email], .kqt.pp .rv-form textarea{ width:100%; border:1px solid var(--taupe-20); border-radius:var(--radius); background:var(--white); padding:11px 14px; font-size:14px; color:var(--ink); font-family:var(--sans); }
.kqt.pp .rv-form textarea{ resize:vertical; margin-bottom:14px; }
.kqt.pp .rv-form__btn{ border:0; cursor:pointer; background:var(--navy); color:var(--on-navy); font-family:var(--sans); font-size:14px; font-weight:600; text-transform:none; padding:12px 26px; border-radius:999px; }
.kqt.pp .rv-form__btn:hover{ opacity:.9; }
.kqt.pp .ugc{ margin-top:26px; }
.kqt.pp .ugc h4{ font-family:var(--sans); font-size:14px; color:var(--navy); margin-bottom:14px; }
.kqt.pp .ugc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.kqt.pp .ugc-grid .ph{ aspect-ratio:1; border-radius:var(--radius); overflow:hidden; }

/* ---------- I · FAQ ---------- */
.kqt.pp .faq-item{ border-bottom:1px solid var(--taupe-15); }
.kqt.pp .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; border:0; background:transparent; cursor:pointer;
  padding:20px 4px; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); text-align:left;
  text-transform:none; letter-spacing:0; }
.kqt.pp .faq-q .ic{ flex:none; width:22px; height:22px; stroke:var(--gold-dark); fill:none; stroke-width:2; transition:transform .25s var(--ease); }
.kqt.pp .faq-item.open .faq-q .ic{ transform:rotate(45deg); }
.kqt.pp .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.kqt.pp .faq-item.open .faq-a{ max-height:320px; }
.kqt.pp .faq-a p{ padding:0 4px 22px; margin:0; font-size:14.5px; color:var(--ink-3); line-height:1.7; max-width:70ch; }

/* ---------- J · Related ----------
   LƯỚI LIỀN MẠCH (2026-09-07). Quyết khoanh đỏ đúng hai khe hở giữa 4 thẻ:
   "sao chỗ này nó vẫn còn khoảng cách giữa các SP". Khe 18px nền kem chẻ khối
   gợi ý thành 4 mẩu rời, trong khi lưới sản phẩm ở TRANG DANH MỤC
   (`body.kqt-plp .plp-grid`) đã liền mạch từ trước — cùng một loại thẻ sản phẩm
   mà hai trang trình bày hai kiểu.

   DÙNG LẠI ĐÚNG CÔNG THỨC CỦA PLP, đừng nghĩ cách mới:
   khe 1px, đường kẻ do TỪNG THẺ tự vẽ bằng VÒNG box-shadow 1px. Hai thẻ cạnh
   nhau thì hai vòng đè trùng khít vào đúng khe ấy ⇒ vẫn là một nét 1px.
   Phải là box-shadow chứ không phải border: border ăn vào kích thước hộp, còn
   vòng shadow nằm NGOÀI hộp nên mới lấn được vào khe.

   VÌ SAO KHÔNG DÙNG "nền lưới xám + gap:1px" như bento trang chủ: nền tô cả ô
   TRỐNG. Khối này lấy tối đa 4 SP nhưng nhiều SP không đủ upsell — xuống 2 cột
   trên điện thoại mà lẻ 3 món là thừa một ô, nền xám hiện ra một tảng to bằng
   cả thẻ. Vẽ trên THẺ thì ô trống không vẽ gì cả.
   padding:1px để vòng viền của các thẻ mép ngoài nằm gọn trong lưới. */
.kqt.pp .related-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; padding:1px; }
.kqt.pp .rel{ position:relative; border:0; border-radius:0; box-shadow:0 0 0 1px rgba(92,77,67,.12);
  overflow:hidden; background:var(--white);
  display:flex; flex-direction:column; transition:box-shadow .3s, transform .3s var(--ease); }
/* HOVER KHÔNG NHẤC THẺ NỮA: translateY(-4px) sinh ra hồi thẻ còn rời nhau, nhấc lên
   thì khoảng trắng xung quanh nhận lấy bóng. Ở lưới liền mạch, nhấc một ô là xé rách
   lưới — hở một vệt 4px và đè lên ô bên trên. Đổi sang nâng bằng BÓNG + z-index.
   Vòng 1px phải KHAI LẠI trong danh sách bóng: box-shadow ghi đè cả cụm, quên nó là
   mỗi lần rê chuột đường kẻ quanh thẻ lại biến mất. */
.kqt.pp .rel:hover{ transform:none; z-index:2; box-shadow:0 0 0 1px rgba(92,77,67,.12), var(--shadow-2); }
.kqt.pp .rel__media{ position:relative; aspect-ratio:1; background:#fff; display:block; overflow:hidden; }
/* .ph phải phủ kín khung vuông (img bên trong là position:absolute) — nếu không
   .ph cao 0 → ảnh height:100% = 0 → mất ảnh. Dùng contain để hiện trọn sản phẩm.
   Ảnh nền TRẮNG + nền card TRẮNG → tắt gradient kem + ::before glow vàng (global
   chrome) để không lộ "khung kem" quanh ảnh. */
.kqt.pp .rel__media .ph{ position:absolute; inset:0; background:#fff; }
.kqt.pp .rel__media .ph::before{ content:none; display:none; background:none; }
.kqt.pp .rel__media .ph__img{ object-fit:contain; padding:8%; filter:contrast(1.04) saturate(1.03); background:#fff; }
/* 2026-09-09 — NHÃN "Ưu đãi" ĐÃ RA KHỎI <a class="rel__media"> (xem
 * woocommerce/content-single-product.php). Cùng một lỗi với .pc__badges bên
 * kqt-category.css: nhãn nằm trong link ảnh thì chữ "Ưu đãi" trở thành anchor text
 * của link, mỗi trang sản phẩm phát ra 3 link "Ưu đãi" trỏ 3 nơi khác nhau.
 *
 * PHẢI GIỮ CẢ HAI BỘ CHỌN. Bộ cũ .rel__media .badge nay không khớp gì nữa (nhãn
 * không còn là con của .rel__media) — bỏ nó đi thì an toàn, nhưng giữ lại để nếu
 * còn chỗ nào trong theme dựng thẻ theo khuôn cũ thì nhãn vẫn có toạ độ, không rơi
 * xuống chen ngang giữa ảnh và phần chữ.
 *
 * Toạ độ không đổi: .rel là position:relative, .rel__media là con đầu dán sát mép
 * trên nên top:10px/left:10px đo theo .rel trùng khít chỗ cũ.
 *
 * .rel có overflow:hidden nên nhãn vẫn bị bo trong khung thẻ như trước. */
.kqt.pp .rel__media .badge,
.kqt.pp .rel > .badge{ position:absolute; top:10px; left:10px; z-index:3; pointer-events:none; }
.kqt.pp .rel__b{ padding:14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.kqt.pp .rel__br{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); }
.kqt.pp .rel__n{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.35em * 2); }
.kqt.pp .rel__rate{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-3); }
.kqt.pp .rel__rate .stars svg{ width:13px; height:13px; }
.kqt.pp .rel__price{ font-family:var(--serif); font-size:18px; font-weight:700; color:var(--navy); margin-top:auto; padding-top:4px; }
.kqt.pp .rel__price s{ font-family:var(--sans); font-size:12px; font-weight:400; color:var(--ink-3); margin-left:6px; }
.kqt.pp .rel .btn{ margin:0 14px 14px; }

/* ---------- COMBO · SKU chưa đăng — nhãn xám, không bịa ảnh/giá/link ---------- */
.kqt.pp .rel--soon{ opacity:.7; }
.kqt.pp .rel--soon .rel__media .ph{ position:absolute; inset:0; background:var(--cream); display:grid; place-items:center; }
.kqt.pp .rel--soon__lbl{ font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--taupe); text-transform:uppercase; }
.kqt.pp .rel--soon .rel__n{ color:var(--taupe); -webkit-line-clamp:3; }
.kqt.pp .combo-save{ margin-top:16px; padding:14px 18px; border-radius:var(--radius-lg); background:var(--gold-tint);
  color:var(--navy); font-size:14px; text-align:center; }
.kqt.pp .combo-save b{ color:var(--gold-dark); }

/* ---------- K · Policy ---------- */
.kqt.pp .policy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.kqt.pp .policy{ padding:24px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--cream); }
.kqt.pp .policy__ic{ width:44px; height:44px; border-radius:var(--radius); background:var(--white); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-dark); margin-bottom:14px; }
.kqt.pp .policy__ic svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.kqt.pp .policy h4{ font-family:var(--sans); font-size:15px; color:var(--navy); margin:0 0 10px; }
.kqt.pp .policy ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.kqt.pp .policy li{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.kqt.pp .policy li svg{ width:16px; height:16px; stroke:var(--gold-dark); fill:none; stroke-width:2; flex:none; margin-top:3px; }

/* ============================================================
   STORES · Showroom picker
   ============================================================ */
.kqt.pp .stores__intro{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; padding:16px 18px;
  border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--cream); }
.kqt.pp .stores__intro svg{ width:22px; height:22px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; margin-top:2px; }
.kqt.pp .stores__intro b{ font-family:var(--sans); font-size:14.5px; color:var(--navy); }
.kqt.pp .stores__intro p{ font-size:13.5px; color:var(--ink-3); margin:3px 0 0; }
.kqt.pp .city-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
.kqt.pp .city-chip{ height:40px; padding:0 18px; border:1.5px solid var(--taupe-20); border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink-2); background:var(--white); transition:.2s var(--ease); }
.kqt.pp .city-chip:hover{ border-color:var(--navy); }
.kqt.pp .city-chip.is-active{ background:var(--navy); color:var(--on-navy); border-color:var(--navy); }
.kqt.pp .stores-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kqt.pp .store{ display:flex; flex-direction:column; gap:0; border:1.5px solid var(--taupe-15);
  border-radius:var(--radius-lg); padding:20px; background:var(--white); transition:border-color .25s, box-shadow .25s; }
.kqt.pp .store.is-picked{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.kqt.pp .store.is-hidden{ display:none; }
.kqt.pp .store__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.kqt.pp .store__name{ font-family:var(--serif); font-size:19px; color:var(--navy); }
.kqt.pp .store__region{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); font-weight:600; margin-bottom:4px; }
.kqt.pp .store__stock{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; flex:none; }
.kqt.pp .store__stock .dot{ width:7px; height:7px; border-radius:50%; }
.kqt.pp .store__stock.in{ color:#1F8A5B; background:rgba(31,138,91,.1); }
.kqt.pp .store__stock.in .dot{ background:#1F8A5B; }
.kqt.pp .store__stock.low{ color:var(--gold-dark); background:var(--gold-tint); }
.kqt.pp .store__stock.low .dot{ background:var(--gold-dark); }
.kqt.pp .store__stock.pre{ color:var(--taupe); background:var(--taupe-10); }
.kqt.pp .store__stock.pre .dot{ background:var(--taupe); }
.kqt.pp .store__addr{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:14px 0 0; }
.kqt.pp .store__addr svg{ width:16px; height:16px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; margin-top:2px; }
.kqt.pp .store__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:12.5px; color:var(--ink-3); }
.kqt.pp .store__meta span{ display:inline-flex; align-items:center; gap:6px; }
.kqt.pp .store__meta svg{ width:14px; height:14px; stroke:var(--ink-3); fill:none; stroke-width:1.7; }
.kqt.pp .store__meta .km{ color:var(--navy); font-weight:600; }
.kqt.pp .store__actions{ display:flex; gap:10px; margin-top:16px; }
.kqt.pp .store__pick{ flex:1; min-height:44px; border-radius:var(--radius); border:1.5px solid var(--navy); cursor:pointer;
  background:var(--white); color:var(--navy); font-size:13px; font-weight:700; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.2s var(--ease); }
.kqt.pp .store__pick:hover{ background:var(--navy); color:var(--on-navy); }
.kqt.pp .store.is-picked .store__pick{ background:var(--gold-grad); color:#0F1B2D; border-color:transparent; }
.kqt.pp .store__pick svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.kqt.pp .store__dir{ flex:none; width:44px; min-height:44px; border-radius:var(--radius); border:1.5px solid var(--taupe-20); display:grid; place-items:center; color:var(--navy); transition:.2s var(--ease); }
.kqt.pp .store__dir:hover{ border-color:var(--gold); color:var(--gold-dark); }
.kqt.pp .store__dir svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
.kqt.pp .store--empty{ grid-column:1/-1; text-align:center; color:var(--ink-3); font-size:14px; padding:30px; }

/* ---------- Aside cards ---------- */
.kqt.pp .acard{ border:1px solid var(--taupe-15); border-radius:var(--radius-lg); padding:20px; background:var(--white); }
.kqt.pp .acard--navy{ background:var(--navy); color:var(--on-navy); border:0; }
.kqt.pp .acard h4{ font-family:var(--sans); font-size:14px; margin:0 0 12px; color:inherit; }
.kqt.pp .acard--navy h4{ color:var(--on-navy); }
.kqt.pp .mini{ display:flex; gap:12px; padding:10px 0; align-items:center; }
.kqt.pp .mini + .mini{ border-top:1px solid var(--taupe-10); }
.kqt.pp .mini .ph{ width:58px; height:58px; border-radius:var(--radius); flex:none; }
.kqt.pp .mini b{ font-family:var(--sans); font-size:13px; color:var(--ink); display:block; line-height:1.3; }
.kqt.pp .mini .p{ font-size:13px; font-weight:700; color:var(--navy); margin-top:4px; }
.kqt.pp .acard--navy .help-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.kqt.pp .acard--navy .help-row svg{ width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.7; flex:none; }
.kqt.pp .acard--navy .help-row b{ font-family:var(--sans); font-size:14px; color:var(--on-navy); display:block; }
.kqt.pp .acard--navy .help-row span{ font-size:12.5px; color:var(--on-navy-2); }

/* ============================================================
   STICKY BUY BAR (appears on scroll)
   ============================================================ */
.kqt.pp .buybar{ position:fixed; bottom:0; left:0; right:0; z-index:55; background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--taupe-15); box-shadow:0 -16px 40px -28px rgba(15,27,45,.4);
  transform:translateY(110%); transition:transform .35s var(--ease); }
.kqt.pp .buybar.show{ transform:none; }
.kqt.pp .buybar__row{ display:flex; align-items:center; gap:20px; padding:12px var(--gutter); }
.kqt.pp .buybar__id{ display:flex; align-items:center; gap:14px; min-width:0; }
.kqt.pp .buybar__id .ph{ width:52px; height:52px; border-radius:var(--radius); flex:none; border:1px solid var(--taupe-15); }
.kqt.pp .buybar__id b{ font-family:var(--sans); font-size:14px; color:var(--navy); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.kqt.pp .buybar__id .stars svg{ width:13px; height:13px; }
.kqt.pp .buybar__price{ margin-left:auto; text-align:right; flex:none; }
.kqt.pp .buybar__price .now{ font-family:var(--serif); font-size:24px; font-weight:800; color:var(--navy); }
.kqt.pp .buybar__price .was{ font-size:13px; color:var(--ink-3); text-decoration:line-through; margin-right:8px; }
.kqt.pp .buybar__cta{ display:flex; gap:10px; flex:none; }
.kqt.pp .buybar__cta .btn{ min-height:50px; }
.kqt.pp .buybar .cta-out{ min-height:50px; padding:0 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .kqt.pp .phero{ grid-template-columns:1fr; gap:28px; }
  .kqt.pp .gallery{ position:static; }
  .kqt.pp .ppbody{ grid-template-columns:1fr; gap:32px; }
  .kqt.pp .ppaside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .kqt.pp .ppaside .acard{ flex:1; min-width:240px; }
  .kqt.pp .video-row{ grid-template-columns:1fr; }
  .kqt.pp .ugc-grid{ grid-template-columns:repeat(4,1fr); }
  .kqt.pp .related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  /* Điện thoại hẹp nên cùng một khoảng trắng ăn phần màn hình lớn hơn nhiều:
     desktop còn 360px cột phải đỡ, mobile xếp một cột thì không còn gì đỡ.
     Chỉ cần hạ --sec, mọi ranh giới (kể cả chỗ trừ --tabpad) tự co theo.
     scroll-margin-top phải hạ riêng: thanh tab dính ở top:56px chứ không
     phải 120px như desktop, để 140px thì bấm tab nào cũng nhảy quá đầu mục. */
  .kqt.pp{ --sec:36px; }
  .kqt.pp .block{ scroll-margin-top:112px; }

  .kqt.pp .trustbar__row{ grid-template-columns:1fr 1fr; }
  .kqt.pp .trustbar__cell:nth-child(3){ border-left:0; }
  .kqt.pp .trustbar__cell{ padding:18px 16px; border-top:1px solid var(--taupe-15); }
  .kqt.pp .trustbar__cell:nth-child(-n+2){ border-top:0; }
  .kqt.pp .policy-grid{ grid-template-columns:1fr; }
  .kqt.pp .rate-summary{ grid-template-columns:1fr; gap:22px; }
  .kqt.pp .rv-form__row{ grid-template-columns:1fr; }
  .kqt.pp .cta-grid{ grid-template-columns:1fr; }
  .kqt.pp .stores-grid{ grid-template-columns:1fr; }
  .kqt.pp .secnav{ top:56px; }
  .kqt.pp .buybar__id b{ max-width:160px; }
  .kqt.pp .buybar__cta .cta-out{ display:none; }
  .kqt.pp .ugc-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .kqt.pp .related-grid{ grid-template-columns:1fr 1fr; }
  .kqt.pp .buybox h1{ font-size:20px; }
  .kqt.pp .priceblock .now{ font-size:31px; }
  .kqt.pp .buybar__price .was{ display:none; }

  /* TRUST BAR giữ lưới 2×2 (Quyết chốt), chữ phải gọn lại.
     Chỗ nghẽn là icon nằm NGANG hàng với chữ: vòng tròn 42px + gap 13px ăn mất
     55px của ô rộng 195px, chữ chỉ còn 96px nên câu nào cũng vỡ 2-3 dòng.
     Xoay icon lên TRÊN thì chữ lấy trọn bề ngang ô — 96px → 169px, đủ cho câu
     dài nhất ("Theo chính sách từng hãng" ~155px) nằm một dòng.
     Icon 42→36px, chữ 14→13,5px và 12,5→12px: đủ để mọi câu vào một dòng mà
     vẫn không nhỏ hơn ngưỡng đọc được trên điện thoại. */
  .kqt.pp .trustbar__cell{ flex-direction:column; align-items:flex-start; gap:9px; padding:15px 13px; }
  .kqt.pp .trustbar__cell > div{ width:100%; }
  .kqt.pp .trustbar__ic{ width:36px; height:36px; }
  .kqt.pp .trustbar__ic svg{ width:18px; height:18px; }
  .kqt.pp .trustbar__cell b{ font-size:13.5px; line-height:1.35; }
  .kqt.pp .trustbar__cell > div span{ display:block; margin-top:2px; font-size:12px; line-height:1.45; }
}

/* ---------- Đọc được trên mobile ---------- */
@media (max-width:860px){
  .kqt.pp .store__region,
  .kqt.pp .store__stock,
  .kqt.pp .buybox__brand .auth{ font-size:12px; }
  .kqt.pp .rel__br{ font-size:11.5px; }
}

/* ============================================================
   MÀN HÌNH ĐẦU TRÊN ĐIỆN THOẠI
   ------------------------------------------------------------
   ĐO TRƯỚC KHI SỬA (2026-09-07, /voi-lavabo-inax-lfv-1402sh…/, khung 390×844):
     header    0→57      crumb   57→184  (127px = 2 dòng, 15% màn hình đầu)
     gallery 202→622     h1     693→746   giá 798→1063
     .buyrow "Thêm vào giỏ" ở y=1086  →  DƯỚI nếp gấp 242px.
   Khách mở trang bằng điện thoại KHÔNG thấy nút mua, phải cuộn mới gặp.
   Đích: .buyrow nằm trọn trên 844 ⇒ đỉnh ≤766 ⇒ phải rút 320px.
   Nguyên tắc cắt: chỉ cắt KHOẢNG TRẮNG và cỡ khung ảnh, KHÔNG giấu thông tin
   nào mà chỗ khác trên trang không nói lại.
   ============================================================ */

/* --- 1 · breadcrumb 6 cấp → một dòng cuộn ngang (−85px) --- */
@media (max-width:860px){
  .kqt.pp .crumb{ padding:12px var(--gutter) 2px; }
  .kqt.pp .crumb ol{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:6px; font-size:12.5px;
  }
  .kqt.pp .crumb ol::-webkit-scrollbar{ display:none; }
  .kqt.pp .crumb li{ flex:0 0 auto; white-space:nowrap; gap:6px; }
  /* Mục cuối là TÊN SẢN PHẨM — dài nhất chuỗi, và ngay dưới đã có <h1> đúng
     chữ ấy. Ẩn KHỎI MẮT nhưng GIỮ TRONG DOM: breadcrumb còn nguyên cho SEO,
     chỉ thôi nói lại điều người đọc sắp đọc. */
  .kqt.pp .crumb li[aria-current]{
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  /* Luật cũ giấu dấu "›" ở :last-child. Mục cuối nay vô hình nên dấu thừa rơi
     xuống mục áp chót — phải giấu ở đó, không thì chuỗi kết thúc bằng "›". */
  .kqt.pp .crumb li:nth-last-child(2)::after{ display:none; }
}

/* --- 2 · nén khối hero (−235px) --- */
@media (max-width:640px){
  .kqt.pp .phero{ gap:18px; padding:12px var(--gutter) var(--sec); }

  /* Khung ảnh 4/3.4 (=319px) là tỉ lệ của bố cục 2 cột trên desktop. Trên điện
     thoại nó ăn 38% màn hình đầu. Ảnh là cutout `object-fit:contain` nên khung
     thấp lại chỉ cắt bớt KHOẢNG TRẮNG quanh sản phẩm, không cắt vào sản phẩm. */
  .kqt.pp .gallery__main{ aspect-ratio:16/11; }
  .kqt.pp .thumbs{ margin-top:10px; padding-bottom:0; }
  /* Ẩn hẳn hai nút mũi tên trên điện thoại: ô ảnh chỉ còn 54px mà nút 34px thì nút
     đè gần kín ô ngoài cùng. Ở đây vuốt ngón tay là cách cuộn tự nhiên, không cần nút.
     Dùng display:none !important vì JS bật nút bằng thuộc tính hidden. */
  .kqt.pp .thumbs__nav{ display:none !important; }
  /* Thumbnail bỏ công thức "1/5 bề rộng hàng": trên 390px một phần năm là 62px,
     to không cần thiết mà lại khoá số ảnh nhìn thấy đúng bằng 5. Cho bề rộng cố
     định 54px → thấy ~6 ảnh, hàng thấp hơn, vẫn cuộn ngang như cũ. */
  .kqt.pp .thumb{ flex:0 0 54px; max-width:54px; }

  .kqt.pp .buybox__brand{ margin-bottom:8px; }
  .kqt.pp .buybox__sku{ margin:6px 0 0; }
  .kqt.pp .buybox__rate{ margin-top:8px; }

  .kqt.pp .priceblock{ margin:12px 0; padding:14px 16px; }
  .kqt.pp .priceblock__row{ gap:10px; }
  .kqt.pp .priceblock__meta{ margin-top:10px; gap:6px 16px; }
  .kqt.pp .priceblock__stores{ margin-top:10px; padding-top:10px; font-size:12.5px; }

  /* Hàng mua: chữ "Thêm vào giỏ hàng" cần 165px mới nằm một dòng, mà lòng nút chỉ
     có 131px → chữ gãy làm hai dòng, nhìn vụn. Thu bộ số lượng 130→118px và hạ đệm
     ngang của nút 30→14px ⇒ lòng nút 175px, chữ nằm gọn. Nút −/+ vẫn 40px, đủ rộng
     cho ngón tay chạm. */
  .kqt.pp .buyrow{ gap:10px; }
  .kqt.pp .qty button{ width:40px; }
  .kqt.pp .qty input{ width:36px; }
  .kqt.pp .buyrow .btn{ padding:0 14px; }
}
/* Máy hẹp (360px: iPhone SE, dòng Galaxy A) chỉ còn dư 1px — sát quá, đổi phông hay
   tên nút dài thêm một chữ là gãy dòng lại. Hạ thêm một nấc cho dư ~18px. */
@media (max-width:400px){
  .kqt.pp .buyrow .btn{ padding:0 10px; font-size:14px; }
}

/* --- 3 · dọn ruột thanh mua dính đáy trên điện thoại ---
   ĐO 2026-09-07, khung 390: hàng trong thanh có 3 khối — mã SP (ảnh 52 + tên 160),
   giá (139), nút (175) + 2 khoảng cách 20 = 566 > lòng thanh 350. Khối mã SP để
   `flex:0 1 auto` nên bị ép về BỀ RỘNG 0, nhưng ruột nó vẫn được VẼ RA:
     ảnh   20→72   nằm đè lên giá (40→179)
     tên   86→246  quét ngang qua giá rồi thò vào nút vàng (199→374)
   Cộng thêm khối rỗng vẫn ăn một `gap` 20px nên cả hàng rộng hơn lòng thanh 4px,
   nút vàng thò sát mép phải. Trước đây thanh chỉ hiện sau khi cuộn qua khối giá
   nên ít ai thấy; nay thanh hiện ngay từ đầu thì phải dọn.
   Trên thanh đã có nút mua + giá, tên sản phẩm thì <h1> ngay trên trang đã nói. */
@media (max-width:640px){
  .kqt.pp .buybar__id{ display:none; }
  .kqt.pp .buybar__row{ gap:12px; }
  /* Máy hẹp hơn (360px) thì cho khối giá co lại, đừng để nó đẩy nút ra ngoài. */
  .kqt.pp .buybar__price{ flex:1 1 auto; min-width:0; }
  .kqt.pp .buybar__cta{ flex:0 0 auto; }
}