/* ============================================================
   KQT LUXURY — CATEGORY PAGE (PLP)
   Scope: body.kqt-plp — nạp inline trên archive product_cat.
   Token màu lấy từ kqt-chrome.css (đã nạp global mọi trang non-home).
   ============================================================ */
body.kqt-plp .kqt-plp-root{ background:var(--white); }
body.kqt-plp .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ---------- Breadcrumb ---------- */
/* ⚠ DÙNG padding-block, ĐỪNG dùng shorthand `padding: X 0 Y`.
   Dòng 7 cho .wrap `padding-inline:var(--gutter)`. Shorthand `padding` đứng SAU nó,
   cùng độ ưu tiên, nên ghi đè luôn cả hai bên thành 0 — mà chỉ 0 ở THÂN trang danh
   mục, còn header và khối "Danh mục liên quan" vẫn 20px. Đo 2026-09-06 ở khổ 398px:
   header padL 20 · khối cuối 20 · crumb/clp-head/subnav-band/clp-body ĐỀU 0
   ⇒ thẻ dính sát hai mép màn hình, thẻ cột phải trông như bị cứa mất viền.
   Desktop giấu được lỗi này vì .wrap chỉ rộng 1320 nên còn lề thừa hai bên — nhưng
   giấu không đều: thân trang bám 1320 trong khi header lùi vào 40px, hai bên lệch
   nhau đúng một gutter. Bốn dòng dưới đây (.crumb .clp-head .subnav-band .clp-body)
   là bốn chỗ dính lỗi này. */
body.kqt-plp .crumb{ padding-block:18px 4px; }
body.kqt-plp .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-plp .crumb a{ color:var(--taupe); transition:color .2s; }
body.kqt-plp .crumb a:hover{ color:var(--gold-dark); }
body.kqt-plp .crumb li{ display:flex; align-items:center; gap:8px; }
body.kqt-plp .crumb li::after{ content:"›"; color:var(--gold); font-size:14px; }
body.kqt-plp .crumb li:last-child::after{ display:none; }
body.kqt-plp .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }

/* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site, đợt 2): Danh mục dùng class
   "eyebrow" ở 2 chỗ (.clp-head, .band-head — xem inc/kqt-plp.php) nhưng CHƯA
   TỪNG có rule font-size/color nào cho nó ở đây lẫn kqt-chrome.css — nhãn
   "Danh mục"/"Danh mục con" đang ăn font-size mặc định của trình duyệt thay
   vì kiểu chữ eyebrow chuẩn (14px/600/hoa/giãn chữ) dùng ở mọi trang khác.
   Thêm rule gốc dùng var(--fs-eyebrow) để khớp Trang chủ/Dịch vụ/About/Sản phẩm. */
body.kqt-plp .eyebrow{ font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dark); }

/* ---------- Category Head ---------- */
body.kqt-plp .clp-head{ padding-block:14px 30px; border-bottom:1px solid var(--taupe-10); }
body.kqt-plp .clp-head .eyebrow{ margin-bottom:14px; }
/* SỬA 2026-09-10: H1 trang danh mục vốn trần 48px, cao hơn mốc chung
   --fs-h1-page (44px, mốc đã duyệt cho trang Dịch vụ 2026-09-09) — đổi cho
   khớp. Đây LÀ H1 hero thật của trang (không như tên SP trong buybox ở
   kqt-product.css — vai trò khác nên không đổi). */
body.kqt-plp .clp-head h1{ font-size:var(--fs-h1-page); color:var(--navy); line-height:1.12; }
body.kqt-plp .clp-head__intro{ max-width:64ch; font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-top:16px; }
body.kqt-plp .clp-head__intro a{ color:var(--gold-dark); font-weight:600; text-underline-offset:2px; }
body.kqt-plp .clp-head__intro a:hover{ text-decoration:underline; }

/* ============================================================
   SUBCATEGORY NAV + BRANDWALL
   ============================================================ */
body.kqt-plp .subnav-band{ border-bottom:1px solid var(--taupe-10); padding-block:26px 32px; }
body.kqt-plp .subnav-band .band-head{ margin-bottom:20px; }
body.kqt-plp .subnav-band .band-head h2{ font-size:22px; }
body.kqt-plp .subnav-band .band-head h2::after{ width:42px; height:3px; margin-top:10px; }
body.kqt-plp .subcats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
body.kqt-plp .subcat{ position:relative; display:flex; align-items:center; gap:18px; padding:22px;
  background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg);
  overflow:hidden; transition:.26s var(--ease); }
body.kqt-plp .subcat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-grad);
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease); }
body.kqt-plp .subcat:hover{ transform:translateY(-4px); border-color:var(--taupe-20); box-shadow:var(--shadow-2); }
body.kqt-plp .subcat:hover::before{ transform:scaleY(1); }
body.kqt-plp .subcat__ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:var(--cream); border:1px solid var(--taupe-10); color:var(--gold-dark); transition:.26s var(--ease); }
body.kqt-plp .subcat__ic svg{ width:27px; height:27px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
body.kqt-plp .subcat:hover .subcat__ic{ background:var(--gold-grad); border-color:transparent; color:var(--navy); }
body.kqt-plp .subcat__txt{ min-width:0; display:flex; flex-direction:column; }
body.kqt-plp .subcat__name{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); line-height:1.3; }
body.kqt-plp .subcat__count{ margin-top:5px; font-size:12.5px; color:var(--ink-3); letter-spacing:.01em; }
body.kqt-plp .subcat--combo{ background:var(--gold-tint); border-color:var(--gold); }
body.kqt-plp .subcat--combo .subcat__ic{ background:var(--gold-grad); border-color:transparent; color:var(--navy); }
body.kqt-plp .subcat--combo .subcat__name{ color:var(--gold-dark); }

/* Ô ẢNH — thay cho ô icon khi danh mục có ảnh thật (xem kqt_plp_subcat_anh).
   To hơn ô icon (72 vs 54) vì ảnh chụp sản phẩm cần chỗ mới đọc được hình dáng.
   Nền TRẮNG chứ không kem: ảnh sản phẩm vốn nền trắng, để nền kem thì lộ khung
   vuông trắng bên trong ô bo góc, nhìn như ảnh dán lệch.
   object-fit:contain để bồn cầu nằm ngang và bồn tắm cao không bị cắt cụt. */
body.kqt-plp .subcat__ic--anh{ width:72px; height:72px; padding:5px; background:var(--white); }
body.kqt-plp .subcat__ic--anh img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Giữ nền trắng cả khi hover / thẻ combo — hai chỗ đó đang tô nền vàng cho icon,
   phủ lên ảnh sẽ thành khung vàng chóe quanh sản phẩm. */
body.kqt-plp .subcat:hover .subcat__ic--anh,
body.kqt-plp .subcat--combo .subcat__ic--anh{ background:var(--white); border-color:var(--gold); }

body.kqt-plp .brandwall{ margin-top:22px; }
body.kqt-plp .brandwall__lbl{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; }
body.kqt-plp .brandwall__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px; }
body.kqt-plp .blogo{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; height:84px; padding:12px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg);
  background:var(--white); transition:.24s var(--ease); text-align:center; }
body.kqt-plp .blogo:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow-2); }
body.kqt-plp .blogo__mark{ font-family:var(--serif); font-weight:800; font-size:19px; letter-spacing:.06em;
  color:var(--navy); line-height:1; transition:color .24s; }
body.kqt-plp .blogo__sub{ font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
body.kqt-plp .blogo:hover .blogo__mark{ color:var(--gold-dark); }
body.kqt-plp .blogo--feat{ background:var(--navy); border-color:var(--navy); }
body.kqt-plp .blogo--feat .blogo__mark{ color:#fff; }
body.kqt-plp .blogo--feat .blogo__sub{ color:rgba(255,255,255,.62); }
body.kqt-plp .blogo--feat:hover{ background:#0A1320; border-color:var(--gold); }
body.kqt-plp .blogo--feat:hover .blogo__mark{ color:var(--gold); }

/* Ô CÓ LOGO ẢNH (xem kqt_brand_logo_url). Chỉ một số hãng có file logo, số còn
   lại vẫn in tên chữ — nên hai kiểu ô này phải CAO BẰNG NHAU, nếu không hàng
   thương hiệu sẽ so le như răng cưa. Vì vậy khoá chiều cao vùng logo, không cho
   ảnh tự đẩy ô cao ra.
   40px chứ không phải 34px (= đúng chiều cao một dòng chữ): logo XẾP DỌC như
   Tân Á Đại Thành (biểu tượng ở trên, tên hãng ở dưới, tỉ lệ 1,5:1) ở 34px co
   lại thành một vệt không đọc được tên. Ô .blogo cao 84px, trừ padding 24 và
   dòng đếm sản phẩm ~20 thì còn đúng 40px để tiêu — dùng hết, không dư ra. */
body.kqt-plp .blogo--anh .blogo__mark{ display:flex; align-items:center; justify-content:center;
  width:100%; height:40px; }
/* max-width/max-height + contain: logo hãng đủ mọi tỉ lệ, từ vuông (TOTO) tới
   rất dài (STIEBEL ELTRON). Ép theo chiều nào cũng méo, nên để nó tự vừa khung. */
body.kqt-plp .blogo--anh .blogo__mark img{ max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block; }
/* Hover không đổi màu được ảnh — bù bằng nhấc nhẹ cho biết là bấm được.
   (Ô chữ đang đổi sang màu vàng ở dòng .blogo:hover .blogo__mark.) */
body.kqt-plp .blogo--anh:hover .blogo__mark img{ transform:scale(1.05); transition:transform .24s var(--ease); }

/* ============================================================
   SIBLING CHIP NAV (trang lá) — chuyển danh mục nhanh, gọn 1 hàng.
   ============================================================ */
body.kqt-plp .sibnav{ display:flex; align-items:center; gap:16px; padding:18px 0 20px; border-bottom:1px solid var(--taupe-10); }
body.kqt-plp .sibnav__lbl{ flex:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
body.kqt-plp .sibnav__scroll{ display:flex; gap:10px; min-width:0; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--taupe-20) transparent; }
body.kqt-plp .sibnav__scroll::-webkit-scrollbar{ height:6px; }
body.kqt-plp .sibnav__scroll::-webkit-scrollbar-thumb{ background:var(--taupe-20); border-radius:3px; }
body.kqt-plp .sibpill{ flex:none; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--taupe-15); background:var(--white); font-size:13.5px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; transition:.2s var(--ease); }
body.kqt-plp .sibpill i{ font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted,#8E8B82); }
body.kqt-plp .sibpill:hover{ border-color:var(--gold); color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-1); }
body.kqt-plp .sibpill.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; cursor:default; }
body.kqt-plp .sibpill.is-active i{ color:var(--gold-light); }
body.kqt-plp .sibpill--all{ background:var(--gold-tint); border-color:var(--gold); color:var(--gold-dark); }
body.kqt-plp .sibpill--all svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
body.kqt-plp .sibpill--all:hover{ background:var(--gold-grad); color:var(--navy); border-color:transparent; }

/* ============================================================
   BODY: FACETS SIDEBAR + MAIN
   ============================================================ */
body.kqt-plp .clp-body{ display:grid; grid-template-columns:264px 1fr; gap:40px; padding-block:34px 56px; align-items:start; }
body.kqt-plp .plp-main{ min-width:0; }

/* ---------- Facets ---------- */
body.kqt-plp .facets{ position:sticky; top:110px; border:1px solid var(--line,#ECEAE4); border-radius:var(--radius-lg);
  background:var(--white); overflow:hidden; }
body.kqt-plp .facets__bar{ display:flex; align-items:center; gap:10px; background:var(--white); color:var(--navy);
  border-bottom:1px solid var(--taupe-10); padding:17px 20px 13px; }
body.kqt-plp .facets__bar > svg{ width:18px; height:18px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; flex:none; }
body.kqt-plp .facets__bar b{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--navy); white-space:nowrap; }
body.kqt-plp .facets__bar .reset{ margin:0 0 0 auto; color:var(--gold-dark); font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; line-height:17.6px; min-height:0; padding:0; white-space:nowrap; background:none; border:0; cursor:pointer; }
body.kqt-plp .facets__bar .reset:hover{ color:var(--navy); text-decoration:underline; }
body.kqt-plp .facets__head{ display:none; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--taupe-10); }
body.kqt-plp .facet{ border-bottom:1px solid var(--taupe-10); padding:18px 20px; }
body.kqt-plp .facet:last-of-type{ border-bottom:0; }
body.kqt-plp .facet__title{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); margin-bottom:13px; background:none; border:0; cursor:pointer; }
body.kqt-plp .facet__title-txt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.kqt-plp .facet__title .chev{ width:16px; height:16px; flex:none; stroke:var(--muted,#8E8B82); fill:none; stroke-width:2; transition:transform .25s; }
body.kqt-plp .facet.collapsed .facet__title .chev{ transform:rotate(-90deg); }
body.kqt-plp .facet.collapsed .facet__body{ display:none; }
body.kqt-plp .opt{ display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
body.kqt-plp .opt:hover{ color:var(--navy); }
body.kqt-plp .opt input{ position:absolute; opacity:0; width:0; height:0; }
body.kqt-plp .opt .box{ width:17px; height:17px; border:1.4px solid #CFCCC3; border-radius:4px; flex:none;
  display:grid; place-items:center; color:transparent; transition:.15s var(--ease); }
body.kqt-plp .opt input:checked + .box{ background:var(--navy); border-color:var(--navy); color:var(--gold); }
body.kqt-plp .opt .box svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; }
body.kqt-plp .opt .lbl{ flex:1; }
body.kqt-plp .opt input:checked ~ .lbl{ color:var(--navy); font-weight:600; }
body.kqt-plp .opt .cnt{ margin-left:auto; font-size:11.5px; font-weight:500; color:var(--muted,#8E8B82); }
body.kqt-plp .opt input:checked ~ .cnt{ color:var(--gold-dark); font-weight:600; }
body.kqt-plp .facets__clear{ display:block; margin:6px 20px 20px; width:calc(100% - 40px); min-height:46px;
  border:1px solid var(--taupe-20); border-radius:var(--radius); font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--ink-2); background:var(--white); cursor:pointer; transition:.2s; }
body.kqt-plp .facets__clear:hover{ background:var(--navy); color:var(--on-navy); border-color:var(--navy); }

/* ---------- Toolbar ---------- */
body.kqt-plp .toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
body.kqt-plp .toolbar__count{ font-size:14px; color:var(--ink-3); }
body.kqt-plp .toolbar__count b{ color:var(--navy); font-weight:700; }
body.kqt-plp .toolbar__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
body.kqt-plp .filter-toggle{ display:none; align-items:center; gap:8px; height:44px; padding:0 16px; border:1.5px solid var(--navy);
  border-radius:var(--radius); font-size:13px; font-weight:700; color:var(--navy); background:var(--white); cursor:pointer; }
body.kqt-plp .filter-toggle svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
body.kqt-plp .sortsel{ position:relative; }
body.kqt-plp .sortsel select{ appearance:none; height:44px; padding:0 38px 0 16px; border:1.5px solid var(--taupe-20);
  border-radius:var(--radius); font-size:13.5px; font-weight:600; color:var(--navy); background:var(--white); cursor:pointer; }
body.kqt-plp .sortsel::after{ content:""; position:absolute; right:15px; top:50%; width:8px; height:8px; border-right:2px solid var(--gold-dark);
  border-bottom:2px solid var(--gold-dark); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
body.kqt-plp .active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
body.kqt-plp .active-chips:empty{ margin:0; }
body.kqt-plp .achip{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 8px 0 12px; border-radius:999px;
  background:var(--gold-tint); color:var(--gold-dark); font-size:12.5px; font-weight:600; }
body.kqt-plp .achip button{ flex:none; width:18px; height:18px; min-width:0; min-height:0; padding:0; margin:0; line-height:1;
  border-radius:50%; display:grid; place-items:center; color:var(--gold-dark); background:none; border:0; cursor:pointer; }
body.kqt-plp .achip button:hover{ background:rgba(124,98,48,.18); }
body.kqt-plp .achip svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.5; }

/* ============================================================
   GROUPED VIEW
   ============================================================ */
body.kqt-plp .cgroup{ padding:30px 0; border-top:1px solid var(--taupe-10); scroll-margin-top:120px; }
body.kqt-plp .cgroup:first-child{ border-top:0; padding-top:4px; }
body.kqt-plp .cgroup__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
body.kqt-plp .cgroup__head h2{ font-size:24px; color:var(--navy); position:relative; }
body.kqt-plp .cgroup__head h2::after{ content:""; display:block; width:48px; height:3px; background:var(--gold-grad); border-radius:2px; margin-top:12px; }
body.kqt-plp .cgroup__tools{ display:flex; align-items:center; gap:16px; flex:none; padding-bottom:6px; }
/* Khối "Tất cả …" chỉ có phần đầu, lưới phẳng nằm ngay sau nó nên bỏ padding dưới. */
body.kqt-plp .cgroup--all{ padding-bottom:0; }
body.kqt-plp .cgroup__tong{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--taupe); white-space:nowrap; }
body.kqt-plp .cgroup__tong b{ color:var(--navy); }
body.kqt-plp .cgroup__all{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold-dark); white-space:nowrap; flex:none; }
body.kqt-plp .cgroup__all svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s var(--ease); }
body.kqt-plp .cgroup__all:hover svg{ transform:translateX(3px); }
body.kqt-plp .cgroup__nav{ display:flex; gap:8px; }
body.kqt-plp .cgroup--nooverflow .cgroup__nav{ display:none; }
body.kqt-plp .cgroup__arrow{ width:40px; height:40px; border-radius:50%; border:1px solid var(--taupe-12,rgba(92,77,67,.12));
  background:var(--white); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, border-color .2s, opacity .2s; }
body.kqt-plp .cgroup__arrow svg{ width:20px !important; height:20px !important; min-width:20px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body.kqt-plp .cgroup__arrow:hover:not(:disabled){ background:var(--navy); color:var(--white); border-color:var(--navy); }
body.kqt-plp .cgroup__arrow:disabled{ opacity:.35; cursor:default; }
/* HÀNG SẢN PHẨM CỦA KHỐI NHÓM = LƯỚI 3 CỘT, KHÔNG CUỘN NGANG.
   Quyết chốt cho trang HÃNG rồi chốt tiếp cho trang DANH MỤC (2026-08-20) ⇒ luật
   này KHÔNG còn bọc trong .cgroup--hang nữa mà là mặc định của .cgroup__row. Hai
   trang dùng chung một luật thì không thể trôi xa nhau về sau.

   ĐO TRƯỚC KHI SỬA (/thiet-bi-ve-sinh/, 1920px): 19 khối, khối nào cũng cuộn
   2939px; mỗi khối 12 SP mà chỉ 3 thẻ hiện đủ còn 9 thẻ bị xén ở HAI mép. Cả trang
   cao 22.852px = 26,7 màn hình, riêng 19 khối ăn 14.394px để bày 226 thẻ mà mắt
   chỉ thấy ~57. Ngay bên dưới, lưới phẳng .plp-grid lại là grid 3 cột đều tăm tắp
   ⇒ hai lối trình bày đá nhau trên cùng một trang.

   MŨI TÊN TỰ TẮT, không phải xoá tay: kqt-plp.js đo scrollWidth − clientWidth,
   thấy ≤4 thì gắn .cgroup--nooverflow (ẩn .cgroup__nav ở dòng 206) và tắt autoplay.
   Lưới không tràn ⇒ mũi tên biến mất. Markup nút vẫn in ra nhưng luôn ẩn — giữ để
   không phải đụng vào JS đang chạy đúng.

   PHẠM VI: .cgroup__row chỉ do kqt_plp_grouped() và kqt_plp_grouped_hang() in ra,
   cả hai đều dưới body.kqt-plp — đã grep toàn theme, không nơi nào khác dùng. */
/* Khe 1px + nền màu kẻ — GIỐNG HỆT .plp-grid (xem ghi chú ở lưới phẳng). Trang
   thương hiệu bày cả kệ hàng lẫn lưới phẳng trên cùng một màn; để kệ 16px còn lưới
   liền mạch thì hai lối trình bày đá nhau ngay cạnh nhau. */
body.kqt-plp .cgroup__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px; }
/* min-width:0 để thẻ dài (tên SP không ngắt được) không thổi cột rộng ra khỏi lưới. */
body.kqt-plp .cgroup__row > .pc{ min-width:0; }

/* ── DẢI THẺ DANH MỤC CON TRONG KỆ (trang hãng — xem kqt_plp_grouped_hang) ──────
   Dùng LẠI thẻ .subcat của lưới danh mục để hai chỗ không lệch ngôn ngữ thị giác,
   chỉ đổi HƯỚNG: trong kệ thẻ xếp dọc (ảnh trên, tên dưới) và hẹp lại. Để nằm
   ngang như ở lưới thì mỗi thẻ ăn ~300px, tám thẻ là 2400px không vừa cột nào.

   XUỐNG DÒNG, KHÔNG CUỘN NGANG. Bản production dùng swiper có mũi tên; ở đây thì
   dải này KHÔNG có mũi tên (mũi tên trong .cgroup__head đã dành cho hàng sản phẩm,
   thêm cặp thứ hai là hai cặp mũi tên cạnh nhau không biết cái nào điều khiển cái
   gì). Mà cuộn ngang không mũi tên thì trên desktop chỉ còn thanh cuộn 6px — thẻ
   thứ tư trở đi coi như bị ẩn. Đo được: 178 thẻ / 169 kệ, phần lớn kệ có 1–6 thẻ và
   chỉ kệ "Phụ Kiện" chạm trần 8 ⇒ cho xuống dòng thì tối đa 2 hàng thẻ, không
   giấu gì.
   KHÔNG có .subcat__count ở đây — cố ý, xem docblock kqt_plp_ho_the().

   SỬA 2026-08-20 sau khi ĐO trên /thiet-bi-ve-sinh-caesar/ (1920px, cột 1016px):
   1) grid auto-fill dựng ĐỦ 7 rãnh 135px bất kể có mấy thẻ, nên kệ 2 thẻ chừa
      735px trống bên phải, kệ 4 thẻ chừa 441px — dải thẻ nhìn như lưới bị hụt.
      flex-wrap thì thẻ chỉ chiếm đúng chỗ nó cần, hàng ngắn đọc ra là "một dãy
      mục", không phải "lưới thiếu ô".
   2) aspect-ratio:1/1 cho ô ảnh: ảnh sản phẩm phần lớn NẰM NGANG, object-fit
      contain vào ô vuông 113px để lại hai băng trắng trên dưới ~30px mỗi bên ⇒
      thẻ trông rỗng. Hạ ô ảnh xuống 78px cao, băng trắng gần như hết.
   3) .subcat::before là vạch vàng 3px dán mép TRÁI, thiết kế cho thẻ nằm ngang ở
      lưới; trên thẻ xếp dọc canh giữa nó thành một gạch lạ ở góc trên-trái
      (transform-origin đo được 1.5px 0px). Tắt trong dải này.
   4) Tên thẻ 24/25 cái xuống 2-3 dòng, cái 2 dòng cái 3 dòng nên chữ so le. Đặt
      min-height 2 dòng + clamp 3 dòng ⇒ mọi thẻ có cùng một khối chữ, đáy thẳng.
      (Tên dài là vì lặp tên hãng — đã cắt ở kqt_plp_ho_the(), xem hàm đó.) */
body.kqt-plp .cgroup__con{ --anh-h:84px; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
/* Thẻ GIÃN ĐƯỢC (flex-grow:1) trong khoảng 118–164px, thay vì cứng 132px. Hai lý
   do đo được ở cột 1016px: (a) thẻ cứng 132 thì 8 thẻ chỉ nhồi được 7 cái/dòng,
   cái thứ 8 rơi xuống dòng hai đứng MỘT MÌNH — mồ côi, nhìn như lỗi; hạ đáy xuống
   118 thì cả 8 nằm gọn một dòng. (b) kệ 6 thẻ giãn tới 161px là kín đúng chiều
   ngang, kệ 2–5 thẻ cũng đỡ hở hơn. Trần 164 để kệ 2 thẻ không phình thành hai
   tấm bảng to. */
body.kqt-plp .cgroup__con > .subcat{ flex:1 1 118px; max-width:164px;
  flex-direction:column; align-items:center; gap:9px; padding:12px 10px; text-align:center; }
body.kqt-plp .cgroup__con > .subcat::before{ content:none; }
body.kqt-plp .cgroup__con .subcat__ic{ width:100%; height:calc(var(--anh-h) + 6px); border-radius:10px; }
/* ĐO 2026-08-20: ảnh cao 102px trong ô 78px, tràn 28px xuống ĐÈ LÊN CHỮ. Vì luật
   img{height:auto} của Flatsome thắng height:100% ở .subcat__ic--anh img (dòng 60)
   ⇒ ảnh tự cao theo tỉ lệ gốc. Trước đây không thấy lỗi chỉ vì ô để aspect-ratio
   1/1 + height:auto nên Ô chạy theo ẢNH (cao 113px) — cũng chính là lý do thẻ
   trông rỗng.
   Chặn ở ẢNH, và chặn bằng px chứ KHÔNG bằng %: ô là grid + place-items:center,
   đo được max-height:100% không giải được (rãnh grid tính theo nội dung ⇒ % coi
   như none) nên ảnh vẫn 102px. --anh-h là một nguồn duy nhất cho cả ô và ảnh. */
body.kqt-plp .cgroup__con .subcat__ic--anh{ width:100%; height:calc(var(--anh-h) + 6px);
  padding:3px; overflow:hidden; }
body.kqt-plp .cgroup__con .subcat__ic--anh img{ width:auto; max-width:100%;
  height:auto; max-height:var(--anh-h); }
body.kqt-plp .cgroup__con .subcat__ic svg{ width:30px; height:30px; }
body.kqt-plp .cgroup__con .subcat__txt{ width:100%; }
body.kqt-plp .cgroup__con .subcat__name{ font-size:13px; line-height:1.35; min-height:2.7em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* .cgroup--hang-tron = kệ KHÔNG dựng được thẻ danh mục con (cây danh mục của hãng
   phẳng), nên kệ ấy hé 12 sản phẩm thay vì 5. CỐ Ý KHÔNG có luật CSS nào ở đây:
   trông nó phải giống hệt khối nhóm ở trang danh mục. Lớp này để sẵn làm chỗ móc
   nếu sau này muốn phân biệt, và để đọc DOM biết vì sao kệ đó nhiều ô hơn. */

/* Tiêu đề kệ bấm được. Thừa màu và cỡ của h2 — đổi màu chữ thành vàng ở đây thì
   nó không còn giống tiêu đề khối ở trang danh mục nữa. */
body.kqt-plp .cgroup__head h2 > a{ color:inherit; text-decoration:none; }
body.kqt-plp .cgroup__head h2 > a:hover{ color:var(--gold-dark); }

/* ============================================================
   PRODUCT GRID + CARD
   ============================================================ */
/* LƯỚI LIỀN MẠCH — thẻ dính nhau, chỉ 1 đường kẻ ngăn cách. Quyết chốt 2026-08-26.
   Trước đây gap:20px, mỗi thẻ tự có viền + bo góc riêng ⇒ giữa các sản phẩm là
   những dải trắng rộng.

   CÁCH DỰNG: khe 1px, và đường kẻ do TỪNG THẺ tự vẽ bằng vòng box-shadow 1px
   (xem luật .plp-grid > .pc bên dưới). Hai thẻ cạnh nhau thì hai vòng viền đè
   TRÙNG KHÍT vào đúng khe 1px ấy ⇒ vẫn là một nét 1px, không cộng thành 2px.

   ĐÃ THỬ RỒI BỎ — "nền lưới màu xám + khe 1px": cách đó gọn hơn nhưng nền tô cả
   ô TRỐNG. Lưới 3 cột mà trang cuối lẻ 1–2 sản phẩm (danh mục 232 SP → trang cuối
   16 SP → thừa 2 ô) thì hai ô thừa hiện ra hai tảng xám to bằng cả thẻ. Vẽ trên
   thẻ thì ô trống không vẽ gì cả — hàng cuối lẻ mấy ô cũng sạch.

   padding:1px để vòng viền của các thẻ mép ngoài nằm gọn trong lưới, không tràn
   1px sang cột bộ lọc. */
body.kqt-plp .plp-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px; }
body.kqt-plp .plp-grid[hidden]{ display:none; }
/* Trang tìm kiếm (.sr-body, archive-product.php): KHÔNG có cột bộ lọc nên lưới
   chiếm trọn .wrap → 4 cột desktop; dưới 1080 (mốc sidebar sập của PLP) về 3,
   dưới 760 về 2 cùng nhịp với lưới PLP thường. Selector 3 class thắng luật gốc
   2 class nên ở mobile phải KHAI LẠI tường minh, không tự thừa hưởng. */
body.kqt-plp .sr-body .plp-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
body.kqt-plp .sr-body{ padding-bottom:60px; }
/* Banner gợi ý (tầng 3, kqt-tim-kiem.php): từ khóa chứa tên hãng/danh mục →
   chip dẫn sang trang PLP tương ứng. Chip trong <a> nên KHÔNG dính bẫy
   uppercase button Flatsome. */
body.kqt-plp .sr-hint{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; }
body.kqt-plp .sr-hint > span{ font-size:13px; color:var(--taupe); }
body.kqt-plp .sr-hint a{ display:inline-flex; align-items:baseline; gap:8px; padding:9px 16px; background:var(--white);
  border:1px solid var(--taupe-15); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--navy);
  transition:border-color .2s, box-shadow .2s; }
body.kqt-plp .sr-hint a:hover{ border-color:var(--gold); box-shadow:var(--shadow-2); }
body.kqt-plp .sr-hint a i{ font-style:normal; font-size:11.5px; font-weight:400; color:var(--taupe); }
@media (max-width:1080px){ body.kqt-plp .sr-body .plp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ body.kqt-plp .sr-body .plp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
body.kqt-plp .pc{ position:relative; border:1px solid var(--taupe-12,rgba(92,77,67,.12)); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--white); display:flex; flex-direction:column; transition:box-shadow .3s, transform .3s var(--ease); }
body.kqt-plp .pc:hover{ box-shadow:var(--shadow-2); transform:translateY(-4px); }
/* Trong lưới liền mạch: bỏ viền + bo góc riêng của thẻ, thay bằng VÒNG box-shadow
   1px. Phải là box-shadow chứ không phải border, vì border ăn vào kích thước hộp
   còn vòng shadow nằm NGOÀI hộp — chỉ thế nó mới lấn được vào khe 1px để trùng
   khít với vòng của thẻ bên cạnh. */
body.kqt-plp .plp-grid > .pc,
body.kqt-plp .cgroup__row > .pc{ border:0; border-radius:0;
  box-shadow:0 0 0 1px var(--taupe-12,rgba(92,77,67,.12)); }
/* HOVER KHÔNG NHẤC THẺ NỮA. translateY(-4px) sinh ra để thẻ 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ở ra một vệt 4px và đè lên ô bên trên. Đổi sang nâng bằng BÓNG +
   z-index: thẻ đứng yên, vẫn nổi rõ lên trên các ô cạnh nó.
   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. */
body.kqt-plp .plp-grid > .pc:hover,
body.kqt-plp .cgroup__row > .pc:hover{ transform:none; z-index:2;
  box-shadow:0 0 0 1px var(--taupe-12,rgba(92,77,67,.12)), var(--shadow-2); }
body.kqt-plp .pc__media{ position:relative; aspect-ratio:1; background:var(--paper); display:block; }
body.kqt-plp .pc__media .ph{ position:absolute; inset:0; }
body.kqt-plp .pc__media .ph__img{ width:100%; height:100%; object-fit:cover; }
/* 2026-09-09 — NHÃN ĐÃ RA KHỎI THẺ <a class="pc__media"> (xem inc/kqt-plp.php).
 * Lý do: nhãn nằm TRONG link ảnh thì chữ "Chính hãng" / "Bán chạy" / "Hàng bỏ mẫu"
 * CHÍNH LÀ anchor text của link ấy — mỗi trang danh mục phát ra 21 link trỏ vào 21
 * sản phẩm khác nhau mà đều mang cùng một chữ vô nghĩa. Nay nhãn là em ruột của
 * .pc__media, cùng nằm trong .pc.
 *
 * TOẠ ĐỘ KHÔNG ĐỔI: .pc là position:relative và .pc__media dán sát mép trên-trái
 * (không padding), nên top:12px/left:12px đo theo .pc trùng khít chỗ cũ.
 *
 * pointer-events:none là BẮT BUỘC: trước đây bấm trúng nhãn vẫn mở sản phẩm vì nhãn
 * nằm trong thẻ <a>. Giờ nó ở ngoài, không có dòng này thì nhãn thành một mảng chết
 * đè lên ảnh — bấm vào đúng góc trên-trái ảnh sẽ không ăn. */
body.kqt-plp .pc__badges{ position:absolute; top:12px; left:12px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start; pointer-events:none; }
/* Pill badge cho PLP — khớp thiết kế: chữ HOA, letter-spacing rộng, navy đặc.
 * Ghi đè mạnh (width/min-width/text-transform…) để chặn xung đột .badge của Flatsome cha. */
body.kqt-plp .pc__badges .badge{ display:inline-flex; align-items:center; justify-content:center;
  width:auto; min-width:0; max-width:none; height:26px; padding:0 12px; margin:0; box-sizing:border-box;
  border:0; border-radius:var(--radius,4px); font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.08em; line-height:1; text-transform:uppercase; white-space:nowrap;
  background:var(--navy,#0F1B2D); color:var(--on-navy,#F4F1E9); box-shadow:none; }
/* Badge giảm giá — navy + số gold. */
body.kqt-plp .pc__badges .badge--sale{ background:var(--navy,#0F1B2D); color:var(--gold-light,#E8C36A); }
/* Badge "Bán chạy" — gold gradient sang trọng, chữ navy. */
body.kqt-plp .pc__badges .badge--hot{ background:var(--gold-grad,linear-gradient(135deg,#C99A3B 0%,#E8C36A 100%)); color:var(--navy,#0F1B2D); }
/* Badge "Chính hãng" — navy đặc, chữ sáng (khớp thiết kế). */
body.kqt-plp .pc__badges .badge--auth{ background:var(--navy,#0F1B2D); color:var(--on-navy,#F4F1E9); }
body.kqt-plp .pc__wish{ position:absolute; bottom:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--navy); opacity:0; transform:translateY(4px);
  transition:.25s var(--ease); }
body.kqt-plp .pc:hover .pc__wish{ opacity:1; transform:none; }
body.kqt-plp .pc__wish svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
/* Nút So sánh — pill nhỏ nổi góc phải trên của card (khớp thiết kế). */
body.kqt-plp .pc__compare{ position:absolute; top:12px; right:12px; z-index:4; height:30px; padding:0 11px; margin:0;
  border-radius:999px; background:rgba(255,255,255,.94); border:1px solid var(--taupe-20,rgba(92,77,67,.2));
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--navy); box-shadow:var(--shadow-1);
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.02em; line-height:1; transition:.18s var(--ease); }
body.kqt-plp .pc__compare svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
body.kqt-plp .pc__compare:hover{ border-color:var(--navy); background:#fff; }
body.kqt-plp .pc__compare[aria-pressed="true"]{ background:var(--navy); color:var(--gold-light); border-color:var(--navy); }
body.kqt-plp .pc__b{ padding:16px; display:flex; flex-direction:column; gap:5px; flex:1; }
body.kqt-plp .pc__br{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); font-weight:600; }
body.kqt-plp .pc__n{ font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink,var(--navy)); line-height:1.4;
  min-height:2.8em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.kqt-plp .pc__n:hover{ color:var(--gold-dark); }
body.kqt-plp .pc__rate{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
body.kqt-plp .pc__rate .stars{ display:inline-flex; color:var(--gold); }
body.kqt-plp .pc__rate .stars svg{ width:13px; height:13px; fill:currentColor; }
/* Chip THÔNG SỐ — giá trị thật (Kiểu xả · 4.8/3L · Tâm xả · Thoát sàn…) lấy từ
 * kqt_product_specs(), khớp bảng so sánh. Nhiều chip hơn nhưng gọn: bo góc mềm,
 * viền mảnh, nền giấy. KHÔNG clamp chiều cao bằng px — giá phía dưới đã tự dính đáy
 * (margin-top:auto) nên chip cao thấp khác nhau vẫn thẳng hàng; clamp px trước đây
 * cắt cụt 2px hàng chip thứ 2, trông như lỗi. Số chip đã chặn tối đa 6 ở PHP. */
body.kqt-plp .pc__chips{ display:flex; flex-wrap:wrap; gap:5px 6px; margin-top:4px; }
body.kqt-plp .pc__chip{ display:inline-flex; align-items:center; max-width:100%; padding:3px 9px;
  border-radius:6px; font-family:var(--sans); font-size:11px; font-weight:600; line-height:1.5;
  letter-spacing:.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--paper,#F4F1E9); color:var(--ink-2,#4A5568);
  border:1px solid var(--taupe-12,rgba(30,45,66,.1)); }
body.kqt-plp .pc:hover .pc__chip{ border-color:var(--taupe-20,rgba(30,45,66,.16)); }
/* Chip "tính năng" (fallback khi SP nghèo thông số) — nhấn nhẹ bằng vàng để phân biệt. */
body.kqt-plp .pc__chip--feat{ background:var(--gold-tint,#F6EEDC); color:var(--gold-dark,#9A742A);
  border-color:rgba(214,169,78,.32); }
body.kqt-plp .pc__rate b{ font-weight:700; color:var(--ink,var(--navy)); }
body.kqt-plp .pc__sold{ color:var(--ink-3); }
body.kqt-plp .pc__price{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:8px; }
body.kqt-plp .pc__price b{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--navy); }
body.kqt-plp .pc__price s{ font-size:12.5px; color:var(--ink-3); }
/* "Hoàn tiền" (cashback) — huy hiệu $ port từ kimquoctien.com, nằm ngay dưới giá.
 * Chỉ in khi postmeta _kqt_hoan_tien có số thật (kqt_hoan_tien_badge trong
 * inc/kqt-product.php) — SP chưa có dữ liệu thì KHÔNG có huy hiệu, không bịa số.
 * align-self:flex-start để pill không bị kéo giãn hết chiều ngang .pc__b (flex column).
 * Đổi từ xanh lục sang vệt vàng thương hiệu (--gold-grad/--navy) 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 (6): đồng bộ với bản đã nâng cấp ở trang chi tiết SP (.kqt.pp
 * .rebate trong kqt-product.css) — Quyết chê bản vàng-chữ-navy cũ ở PLP "xấu,
 * không nổi bật, không hiệu ứng, màu không đẹp" giống hệt lỗi đã sửa bên PDP.
 * Đảo nền sang navy đặc + chữ vàng/trắng + icon đồng xu viền sáng + vệt sáng
 * chạy — CHỈ khác về TỈ LỆ (badge trong thẻ SP nhỏ hơn nút CTA trang chi tiết)
 * và bỏ phần tương tác (cursor/hover/focus) vì đây vẫn là <span> tĩnh, không
 * bấm được — .pc__b .rebate KHÔNG dùng $clickable nên không cần đồng bộ hành
 * vi popup, chỉ đồng bộ MÀU SẮC + HIỆU ỨNG. */
body.kqt-plp .pc__b .rebate{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-top:6px; padding:5px 10px 5px 5px; border-radius:999px;
  background:linear-gradient(135deg,#152945 0%,#0F1B2D 65%);
  color:var(--gold-light,#F3D98A); font-size:11.5px; font-weight:700; line-height:1.3;
  box-shadow:0 3px 10px rgba(15,27,45,.35); }
body.kqt-plp .pc__b .rebate b{ font-weight:900; color:#fff; }
body.kqt-plp .pc__b .rebate svg{ box-sizing:content-box; display:block; width:10px; height:10px; padding:4px; 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.2; stroke-linecap:round;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.3); }
body.kqt-plp .pc__b .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:kqtHtShinePlp 3.2s ease-in-out infinite; }
@keyframes kqtHtShinePlp{ 0%{ left:-75%; } 35%{ left:130%; } 100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){
  body.kqt-plp .pc__b .rebate::after{ animation:none; display:none; }
}
body.kqt-plp .pc__foot{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:0 16px 16px; align-items:stretch; }
/* Reset chung — chặn Flatsome/Woo bơm padding/line-height/box-shadow vào <a>/<button> làm nút phình to. */
body.kqt-plp .pc__foot .pc__view,
body.kqt-plp .pc__foot .pc__add{ height:46px; min-height:0; margin:0; box-sizing:border-box; line-height:1;
  box-shadow:none; text-decoration:none; text-transform:none; font-family:var(--sans); }
body.kqt-plp .pc__view{ display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:1.5px solid var(--navy);
  border-radius:var(--radius); font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--navy);
  background:transparent; transition:.2s var(--ease); }
body.kqt-plp .pc__view:hover{ background:var(--navy); color:var(--on-navy); }
body.kqt-plp .pc__add{ width:46px; padding:0; flex:none; border:1.5px solid var(--gold); border-radius:var(--radius); background:var(--gold-tint);
  display:grid; place-items:center; color:var(--gold-dark); cursor:pointer; transition:.2s var(--ease); }
body.kqt-plp .pc__add:hover{ background:var(--gold-grad); color:#0F1B2D; border-color:transparent; }
body.kqt-plp .pc__add svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; }
body.kqt-plp .plp-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-3); }
body.kqt-plp .plp-empty b{ display:block; font-family:var(--serif); font-size:22px; color:var(--navy); margin-bottom:8px; }

/* ---------- Pagination ---------- */
body.kqt-plp .pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; }
body.kqt-plp .pager a, body.kqt-plp .pager span{ min-width:44px; height:44px; padding:0 12px; border:1px solid var(--taupe-20); border-radius:var(--radius);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--ink-2);
  background:var(--white); transition:.2s; }
body.kqt-plp .pager span{ border:0; background:none; }
body.kqt-plp .pager .is-active{ background:var(--navy); color:var(--on-navy); border-color:var(--navy); }
body.kqt-plp .pager a:hover:not(.is-active){ border-color:var(--navy); color:var(--navy); }

/* ============================================================
   RELATED CATEGORIES
   ============================================================ */
body.kqt-plp .section-band{ padding:52px 0; border-top:1px solid var(--taupe-10); }
body.kqt-plp .section-band--cream{ background:var(--cream); }
body.kqt-plp .band-head{ margin-bottom:26px; }
body.kqt-plp .band-head .eyebrow{ margin-bottom:10px; }
body.kqt-plp .band-head h2{ font-size:28px; color:var(--navy); position:relative; display:inline-block; }
body.kqt-plp .band-head h2::after{ content:""; display:block; width:50px; height:3px; background:var(--gold-grad); border-radius:2px; margin-top:12px; }
/* ── KHỐI "DANH MỤC LIÊN QUAN" ────────────────────────────────────────────────
   KHÔNG CÒN CSS RIÊNG. Quyết chốt 2026-08-26: khối này dùng LẠI thẻ .subcat của
   lưới danh mục con đầu trang (ảnh vuông nhỏ bên trái, tên + số SP bên phải).

   Bỏ hẳn bộ .relcat cũ — nó là thẻ kiểu tạp chí: ảnh phủ kín nền, lớp phủ tối ở
   đáy, chữ TRẮNG đè lên. Kiểu ấy chỉ đúng với ẢNH KHÔNG GIAN (một góc phòng tắm),
   trong khi nguồn ảnh ở đây là ẢNH SẢN PHẨM TÁCH NỀN TRẮNG. Đo 2026-08-26 trên
   720 danh mục cho thấy hai giả định ấy đá nhau ở cả ba mặt:
     · khung 2:1 + cover ⇒ cắt trung bình 49% chiều cao, 697/719 ảnh mất >40%;
     · 325/720 tấm (45%) có dải đáy gần trắng ⇒ chữ trắng trên nền trắng;
     · 414/720 ảnh (58%) tách nền trắng ⇒ nền thẻ ngả kem là lộ Ô VUÔNG trắng.

   Sửa vá hai lượt vẫn hụt, nên thôi không nuôi hai kiểu thẻ song song nữa. Thẻ
   .subcat vốn đã được dựng cho đúng loại ảnh này (ô 72px, contain, nền trắng) và
   miễn nhiễm cả ba lỗi trên: ảnh nhỏ nên chênh lệch tỉ lệ không lộ, chữ nằm ngoài
   ảnh nên không bao giờ chìm. Sửa .subcat là cả hai khối cùng đổi.

   Responsive cũng đi theo .subcats (4 → 2 → 1 cột), khỏi khai lại.
   ── */

/* ============================================================
   CONTENT + FAQ
   ============================================================ */
body.kqt-plp .clp-content{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
body.kqt-plp .clp-content__text p{ font-size:14.5px; line-height:1.75; color:var(--ink-2); margin-bottom:14px; }
body.kqt-plp .clp-content__text h3{ font-size:18px; color:var(--navy); margin:6px 0 10px; }
body.kqt-plp .faq-item{ border-bottom:1px solid var(--taupe-15); }
body.kqt-plp .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 4px;
  font-family:var(--serif); font-size:16.5px; font-weight:600; color:var(--navy); text-align:left; background:none; border:0; cursor:pointer;
  /* button bị Flatsome ép uppercase + giãn chữ — phải khai tường minh */
  text-transform:none; letter-spacing:0; }
body.kqt-plp .faq-q .ic{ flex:none; width:22px; height:22px; stroke:var(--gold-dark); fill:none; stroke-width:2; transition:transform .25s var(--ease); }
body.kqt-plp .faq-item.open .faq-q .ic{ transform:rotate(45deg); }
body.kqt-plp .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
body.kqt-plp .faq-item.open .faq-a{ max-height:280px; }
body.kqt-plp .faq-a p{ padding:0 4px 18px; font-size:14px; color:var(--ink-3); line-height:1.7; }

/* ---------- Mobile drawer scrim ---------- */
body.kqt-plp .facets-scrim{ position:fixed; inset:0; background:rgba(15,27,45,.5); opacity:0; visibility:hidden; transition:.3s; z-index:65; }
body.kqt-plp .facets-scrim.open{ opacity:1; visibility:visible; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  body.kqt-plp .subcats{ grid-template-columns:repeat(2,1fr); }
  body.kqt-plp .brandwall__grid{ grid-template-columns:repeat(4,1fr); }
  body.kqt-plp .clp-body{ grid-template-columns:1fr; gap:0; }
  body.kqt-plp .filter-toggle{ display:inline-flex; }
  body.kqt-plp .facets{ position:fixed; top:0; left:0; bottom:0; width:320px; max-width:86%; background:var(--white);
    z-index:70; padding:0; overflow-y:auto; transform:translateX(-100%); transition:transform .3s var(--ease);
    box-shadow:var(--shadow-2); border-radius:0; border:0; }
  body.kqt-plp .facets.open{ transform:none; }
  body.kqt-plp .facets__head{ display:flex; }
  body.kqt-plp .clp-content{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:760px){
  /* Chỉ đổi SỐ CỘT. Khe giữ 1px như desktop — lưới liền mạch phải liền ở mọi khổ,
     mà trên mobile khe rộng lại càng phí chiều ngang. */
  body.kqt-plp .plp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Lưới khối nhóm đi CHÍNH XÁC theo .plp-grid (lưới phẳng) ở mọi khổ, để hai lưới
     nằm trên cùng một trang không lệch số cột nhau. */
  body.kqt-plp .cgroup__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.kqt-plp .pc__foot{ grid-template-columns:1fr; }
  body.kqt-plp .pc__add{ width:100%; }
  body.kqt-plp .sibnav{ flex-direction:column; align-items:flex-start; gap:10px; }
  body.kqt-plp .sibnav__scroll{ width:100%; }
}
@media (max-width:560px){
  /* ⚠ PHẢI kể ĐỦ HAI VỎ, và CHỈ hai vỏ này. Thẻ .subcat được dùng ở BA chỗ:
       · .subnav-band .subcats      — lưới danh mục con đầu trang (2 chỗ in, kqt-plp.php 470 + 1850)
       · .section-band--cream .subcats — khối "Danh mục liên quan" cuối trang (kqt-plp.php 2044)
       · .cgroup__con > .subcat     — thẻ trong khối nhóm, bố cục DỌC riêng (dòng 273)
     Hai cái đầu phải đi CÙNG NHAU (xem ghi chú dòng ~452: "responsive đi theo .subcats").
     Cái thứ ba KHÔNG được đụng. Viết trần trụi `.subcats` là dính cả ba;
     khoanh mỗi `.subnav-band` là BỎ RƠI khối cuối trang — tôi đã lỡ đúng lỗi đó
     2026-09-06: nó rơi về luật 2 cột dòng 478 mà không có phần nén, chữ 17px +
     icon 72px nhồi trong ô 201px. */
  /* Trước 2026-09-06 chỗ này để 1 cột: 15 ô × 118px = 2.189px, khách phải cuộn 3,2 màn
     hình (2.672px) mới thấy sản phẩm đầu tiên. Xếp 2 cột + nén chữ 17→13px: khối còn
     916px, cuộn tới SP đầu còn 1,7 màn hình (1.399px).
     Vẫn giữ bố cục NGANG (icon | chữ). Đã thử xếp DỌC: hết cắt chữ nhưng ô cao
     178-197px, khối chỉ giảm 20% — thua hẳn. Chỗ cứu cắt chữ là overflow-wrap:anywhere
     ("AMERICAN STANDARD" không có khoảng trắng để ngắt trong 1 cột hẹp). */
  body.kqt-plp .subnav-band .subcats,
  body.kqt-plp .section-band--cream .subcats{ grid-template-columns:repeat(2,1fr); gap:10px; }
  body.kqt-plp .subnav-band .subcat,
  body.kqt-plp .section-band--cream .subcat{ gap:8px; padding:10px; }
  /* ⚠ ĐỪNG hạ icon xuống 44px. Đã thử: ảnh thật chỉ còn 36px, mà ảnh danh mục ở đây
     là hàng SỨ TRẮNG nền trắng — ở cỡ đó ô trông như RỖNG hoàn toàn (15/15 ô đều có
     ảnh, số đo báo "đủ ảnh", chỉ ảnh chụp mới thấy hỏng). 62px là mức ảnh còn đọc
     được mà ô vẫn thấp hơn chiều cao do 2 dòng chữ quyết định. */
  body.kqt-plp .subnav-band .subcat__ic,
  body.kqt-plp .subnav-band .subcat__ic--anh,
  body.kqt-plp .section-band--cream .subcat__ic,
  body.kqt-plp .section-band--cream .subcat__ic--anh{ width:62px; height:62px; }
  body.kqt-plp .subnav-band .subcat__ic--anh,
  body.kqt-plp .section-band--cream .subcat__ic--anh{ padding:2px; }
  body.kqt-plp .subnav-band .subcat__ic svg,
  body.kqt-plp .section-band--cream .subcat__ic svg{ width:30px; height:30px; }
  body.kqt-plp .subnav-band .subcat__name,
  body.kqt-plp .section-band--cream .subcat__name{ font-size:13px; line-height:1.25; overflow-wrap:anywhere; }
  body.kqt-plp .subnav-band .subcat__count,
  body.kqt-plp .section-band--cream .subcat__count{ margin-top:2px; font-size:11.5px; white-space:nowrap; }
  body.kqt-plp .brandwall__grid{ grid-template-columns:repeat(2,1fr); }
  body.kqt-plp .cgroup__head h2{ font-size:20px; }

  /* ⚠ NÚT "SO SÁNH" THU VỀ HÌNH TRÒN CHỈ CÓ ICON — đây mới là chỗ chữa thật cho lỗi
     "chữ chồng lên nhau" Quyết bắt được 2026-09-06.
     Đo ở khổ 428px (thẻ 185px): .pc__badges nằm [29 → 111], .pc__compare nằm
     [92 → 194] ⇒ ĐÈ NHAU 19px. Nút có z-index 4 còn badge z-index 3 nên nút phủ
     lên, đuôi chữ "CHÍNH HÃNG" biến mất thành "CHÍNH HÃN".

     ĐÍNH CHÍNH ghi chú cũ ở khối ≤480px: tôi từng chẩn là "badge bị CẮT chữ" rồi hạ
     font xuống 9.5px. SAI. .badge có white-space:nowrap + width:auto nên không bao
     giờ tự cắt — đo được scrollWidth 82 = width 82, không tràn một pixel nào. Hạ
     font chỉ làm phần BỊ CHE ngắn lại chứ không gỡ được chỗ đè.

     Vì sao phải bỏ chữ chứ không thu nhỏ nút: badge dài nhất trong catalog là
     "HÀNG BỎ MẪU" (kqt-bo-mau.php:233, ~88px), thẻ 185px trừ 16px lề còn 169px
     ⇒ nút chỉ được phép ~70px kể cả khe. Nút có chữ, ép hết cỡ (font 10, padding 8,
     icon 13) vẫn 75px. Không đủ. Bỏ chữ: nút 36px, tổng 124px, dư 45px — đủ chỗ cho
     cả badge dài nhất mà không phải canh từng pixel.

     CHỮ KHÔNG XOÁ KHỎI DOM, chỉ giấu bằng clip-path: kqt-compare.js:158 đổi chính
     span này thành "Đã chọn", và nó là TÊN NÚT cho trình đọc màn hình (nút không có
     aria-label). Dùng display:none là nút thành vô danh. Trạng thái đã chọn vẫn
     nhìn thấy được bằng MÀU — luật [aria-pressed="true"] đổi nền sang navy. */
  body.kqt-plp .pc__compare{ top:8px; right:8px; width:36px; height:36px; padding:0; gap:0;
    border-radius:50%; justify-content:center; }
  body.kqt-plp .pc__compare svg{ width:17px; height:17px; }
  body.kqt-plp .pc__compare-txt{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

  /* Badge lùi vào 8px cho khớp góc với nút tròn ở trên. Font 10,5px: hết bị che rồi
     thì không cần ép xuống 9.5px nữa — "CHÍNH HÃNG" ở cỡ đó rộng 95px, cộng nút 36px
     + hai lề 8px + khe 38px = vừa thẻ 185px (khổ 428px).

     ⚠ max-width KHÔNG PHẢI làm cho đẹp, nó là CÁI CHẶN CỨNG. Thu nút còn 36px vẫn
     chưa đủ ở máy nhỏ: đo ở khổ 360px (thẻ 151px) với badge dài nhất catalog
     "HÀNG BỎ MẪU" (105px) thì badge và nút VẪN đè nhau 6px — 24/24 thẻ. Canh bằng
     cỡ chữ là canh theo CHUỖI DÀI NHẤT MÌNH BIẾT HÔM NAY; thêm một badge mới dài
     hơn là lỗi quay lại mà không ai hay.
     60px = nút 36 + lề phải 8 + khe 8, cộng lề trái 8 của chính badge.
     Quá khổ thì badge tự cắt bằng "…" — chữ cụt nhìn ra ngay là cụt, còn chữ bị
     ĐÈ thì trông như phần mềm hỏng. Chỉ xảy ra với "HÀNG BỎ MẪU" ở máy ≤375px.
     Phải đổi display:block — text-overflow không có tác dụng trên inline-flex. */
  body.kqt-plp .pc__badges{ top:8px; left:8px; max-width:calc(100% - 60px); }
  body.kqt-plp .pc__badges .badge{ font-size:10.5px; padding:0 9px;
    display:block; max-width:100%; line-height:26px; text-align:center;
    overflow:hidden; text-overflow:ellipsis; }
}
/* Máy hẹp: hạ badge về 9,5px cho LỌT mức chặn ở trên, chứ không phải cho đẹp.
   Đo thẻ = (khổ − 40 lề − 14 khe) / 2, mức chặn = thẻ − 60:
     khổ 428 → thẻ 185, chặn 125 · "CHÍNH HÃNG" 10,5px = 95  → dư 30, giữ 10,5px
     khổ 400 → thẻ 173, chặn 113 · 95 vẫn lọt, nhưng
     khổ 360 → thẻ 151, chặn  91 · 95 THỪA 4px ⇒ bị cắt "CHÍNH HÃN…"
   360px là khổ của rất nhiều máy Android, không được để cắt ở đó. Hạ 9,5px + đệm
   6px thì badge còn 82 < 91 ⇒ lọt. Ngưỡng đặt 400px vì đó là chỗ 95px bắt đầu hụt.
   Dưới ~340px (SE đời 1, màn ngoài máy gập) thì thẻ chỉ 131px, badge vẫn bị cắt —
   CHẤP NHẬN: cắt có "…" là hỏng nhìn ra được, còn đè chữ thì trông như lỗi phần mềm. */
@media (max-width:400px){
  body.kqt-plp .pc__badges .badge{ font-size:9.5px; padding:0 6px; }
}
@media (max-width:480px){
  /* GIỮ 2 CỘT như ≤760px, KHÔNG hạ về 1 cột nữa. Đo ở 428px: 1 cột = thẻ 731px, lưới
     17.543px, cả trang 23.679px (28,7 màn hình). 2 cột + nén phần chữ: thẻ 583px, lưới
     6.963px, cả trang 11.720px (14,2 màn hình).
     2 chỗ bị cắt chữ khi thu 2 cột (chỉ ảnh chụp mới thấy, số đo không báo):
     giá gạch "6.200.00" và chip tràn 4 dòng — nên có 2 luật dưới.
     ⚠ Chỗ thứ ba tôi từng kể ở đây — badge "CHÍNH HÃN" — KHÔNG PHẢI cắt chữ mà là
     bị nút So sánh ĐÈ LÊN. Xem ghi chú dài ở khối ≤560px; hai luật .pc__badges từng
     nằm ở đây đã dời lên đó cho nằm cùng chỗ chữa. */
  body.kqt-plp .plp-grid,
  body.kqt-plp .cgroup__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.kqt-plp .pc__n{ font-size:13.5px; }
  body.kqt-plp .pc__b{ padding:12px; gap:4px; }
  body.kqt-plp .pc__foot{ padding:0 12px 12px; gap:6px; }
  body.kqt-plp .pc__foot .pc__view,
  body.kqt-plp .pc__foot .pc__add{ height:40px; }
  body.kqt-plp .pc__price{ flex-wrap:wrap; gap:0 6px; padding-top:6px; }
  body.kqt-plp .pc__price b{ font-size:17px; }
  body.kqt-plp .pc__chip{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* Chip thông số GIỮ NGUYÊN SỐ LƯỢNG trên mobile. Đo 2026-09-06: ẩn từ chip thứ 5 chỉ
   rút thẻ 571→509px (cả trang 11.576→11.142, ~4%) — quá ít để đánh đổi thông tin so
   sánh sản phẩm (xem ghi chú "đây là NỘI DUNG" ở khối ≤860px bên dưới). */

/* ---------- Đọc được trên mobile ----------
   Chip thông số (.pc__chip) là 255 mẩu chữ 11px trên mỗi trang danh mục —
   đây là NỘI DUNG so sánh sản phẩm chứ không phải nhãn trang trí, nên nâng lên
   12px. Badge chữ hoa ngắn (.badge--auth "Chính hãng") giữ nguyên. */
@media (max-width:860px){
  body.kqt-plp .pc__chip,
  body.kqt-plp .pc__compare,
  body.kqt-plp .opt .cnt,
  body.kqt-plp .facets__bar b,
  body.kqt-plp .facets__bar .reset,
  body.kqt-plp .facet__title{ font-size:12px; }
  body.kqt-plp .pc__br{ font-size:11.5px; }
}