/* =============================================================================
   KQT — /shop/ SẢNH CỬA HÀNG (kqt-shop.css)
   Scope TOÀN BỘ dưới body.kqt-shop — file chỉ enqueue ở is_shop() nhưng scope
   vẫn phải chặt (lệ site: CSS trang nào khoá trang nấy, kqt-blog.css từng chứng
   minh chuyện tràn scope rất khó truy).
   Token màu/chữ ăn từ kqt-chrome.css + kqt-typography.css (global). Các cụm
   .crumb / .eyebrow KHÔNG có bản global — tự khai bản riêng như kqt-post.css.
   ========================================================================== */

/* ---------- khung trang ---------- */
body.kqt-shop .kqt-shop-root{ background:var(--white); padding-bottom:clamp(48px,6vw,80px); }

/* ---------- breadcrumb (bản riêng, giống kqt-post.css) ---------- */
body.kqt-shop .sh-crumb{ padding-top:18px; }
body.kqt-shop .crumb{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0;
  list-style:none; font-size:13px; color:var(--taupe); }
body.kqt-shop .crumb li{ display:flex; align-items:center; gap:6px; }
body.kqt-shop .crumb li + li::before{ content:"›"; color:var(--taupe-30); }
body.kqt-shop .crumb a{ color:var(--taupe); text-decoration:none; }
body.kqt-shop .crumb a:hover{ color:var(--gold-dark); }

/* ---------- head: eyebrow + H1 + lời dẫn đếm sống ---------- */
body.kqt-shop .sh-head{ padding-block:clamp(20px,3vw,34px) clamp(26px,3.5vw,44px); }
/* Eyebrow kiểu toàn trang sau Cấp-1 khử mùi AI: KHÔNG all-caps, không giãn .22em.
   KHÔNG vạch gạch dẫn trước — Quyết bác trực tiếp 2026-09-29 ("bỏ cái dấu gạch
   đi"), chữ gold đứng một mình là đủ; đừng thêm lại. */
body.kqt-shop .sh-eyebrow{ margin:0 0 12px; font-size:14px; font-weight:700;
  color:var(--gold-dark); }
body.kqt-shop .sh-head h1{ margin:0; font-size:var(--fs-h1-page,clamp(30px,3.6vw,44px));
  font-weight:800; line-height:1.12; letter-spacing:-.015em; color:var(--navy);
  overflow-wrap:anywhere; min-width:0; }
body.kqt-shop .sh-dan{ margin:14px 0 0; font-size:clamp(15px,1.3vw,17px); line-height:1.7;
  color:var(--ink-2,#4A5468); max-width:62ch; }
body.kqt-shop .sh-dan b{ color:var(--navy); }

/* ---------- H2 mục ---------- */
body.kqt-shop .sh-h2{ margin:0 0 18px; font-size:clamp(22px,2.2vw,28px); font-weight:800;
  letter-spacing:-.01em; color:var(--navy); }

/* ---------- 2 panel trụ (navy) ---------- */
body.kqt-shop .sh-truc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px); }
body.kqt-shop .sh-panel{ display:flex; flex-direction:column; gap:18px;
  background:var(--navy); border-radius:var(--radius-lg,18px);
  padding:clamp(20px,2.6vw,32px); }
body.kqt-shop .sh-panel__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; }
body.kqt-shop .sh-panel__head h2{ margin:0; font-size:clamp(21px,2vw,26px); font-weight:800;
  letter-spacing:-.01em; color:var(--white); }
body.kqt-shop .sh-panel__head p{ margin:0; font-size:14px; font-weight:600;
  color:var(--gold-light); }
body.kqt-shop .sh-panel__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; }

/* ---------- ô danh mục (dùng cả trong panel navy lẫn dải "Khu vực khác") ---------- */
body.kqt-shop .sh-o{ display:flex; align-items:center; gap:12px; min-width:0;
  padding:12px; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:12px; text-decoration:none;
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
body.kqt-shop .sh-o:hover{ border-color:var(--gold); box-shadow:0 6px 18px var(--navy-12); }
/* grid-template 100%/100% BẮT BUỘC: hộp cao 48px nhưng nếu để hàng implicit
   (auto) thì hàng co theo RUỘT → height/max-height:% của ảnh bên trong thành
   cyclic, trình duyệt coi như auto → ảnh DỌC (Vòi Sen Cây 113×300) cao 127px
   tràn xuyên panel. Đã đo tận nơi @1366 (zb106_do_thu_pham.py): không rule nào
   đè, thủ phạm là track auto. Khai track định trước thì % có chỗ bám. */
body.kqt-shop .sh-o__ic{ flex:0 0 48px; width:48px; height:48px; display:grid;
  grid-template:100% / 100%; place-items:center; }
body.kqt-shop .sh-o__ic img{ width:100%; height:100%; object-fit:contain; }
body.kqt-shop .sh-o__ic svg{ width:30px; height:30px; fill:none; stroke:var(--gold-dark);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
body.kqt-shop .sh-o__t{ min-width:0; display:flex; flex-direction:column; gap:2px; }
body.kqt-shop .sh-o__t b{ font-size:13.5px; font-weight:700; line-height:1.35; color:var(--navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.kqt-shop .sh-o__t i{ font-style:normal; font-size:12px; color:var(--taupe); }
/* Trong panel navy: ô trắng nổi sẵn, bỏ viền cho đỡ rườm. */
body.kqt-shop .sh-panel .sh-o{ border-color:transparent; }
body.kqt-shop .sh-panel .sh-o:hover{ border-color:var(--gold); }

/* ---------- nút "Xem tất cả" trên panel navy ---------- */
/* <a> chứ không <button>, nhưng vẫn khai text-transform tường minh — bẫy Flatsome
   uppercase đã cắn 3 lần, khai thừa rẻ hơn truy lùng. */
body.kqt-shop .sh-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border:1px solid var(--gold-light); border-radius:999px;
  font-size:14px; font-weight:700; text-transform:none; text-decoration:none;
  color:var(--gold-light); background:transparent;
  transition:background .2s var(--ease,ease), color .2s var(--ease,ease); }
body.kqt-shop .sh-btn::after{ content:"→"; }
body.kqt-shop .sh-btn:hover{ background:var(--gold-grad); border-color:transparent;
  color:var(--navy); }

/* ---------- dải "Khu vực khác" ---------- */
body.kqt-shop .sh-khac{ margin-top:clamp(32px,4vw,56px); }
body.kqt-shop .sh-khac__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; }

/* ---------- tường thương hiệu (băng kem full-bleed) ---------- */
body.kqt-shop .sh-hang{ margin-top:clamp(36px,4.5vw,60px);
  padding-block:clamp(28px,3.5vw,48px); background:var(--paper); }
body.kqt-shop .sh-hang__grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px; }
body.kqt-shop .sh-bl{ display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:0; padding:16px 10px 12px; background:var(--white);
  border:1px solid var(--taupe-10); border-radius:12px; text-decoration:none;
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
body.kqt-shop .sh-bl:hover{ border-color:var(--gold); box-shadow:0 6px 18px var(--navy-12); }
body.kqt-shop .sh-bl__logo{ height:34px; display:grid; place-items:center; }
body.kqt-shop .sh-bl__logo img{ max-height:30px; max-width:110px; object-fit:contain; }
body.kqt-shop .sh-bl__logo b{ font-size:14px; font-weight:800; letter-spacing:.02em;
  color:var(--navy); overflow-wrap:anywhere; text-align:center; }
body.kqt-shop .sh-bl__n{ font-size:12px; color:var(--taupe); }

/* ---------- "Vừa cập nhật" ---------- */
body.kqt-shop .sh-moi{ margin-top:clamp(36px,4.5vw,60px); }
body.kqt-shop .sh-moi__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px); }
body.kqt-shop .sh-sp{ display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--taupe-15); border-radius:12px;
  overflow:hidden; text-decoration:none;
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
body.kqt-shop .sh-sp:hover{ border-color:var(--gold); box-shadow:0 8px 22px var(--navy-12); }
/* kqt_ph() trả <div class="ph sh-ph"><img class="ph__img">…</div> — .ph chỉ có CSS
   trong kqt-category.css (scope body.kqt-plp) nên ở đây phải tự lo đủ. */
/* grid-template 100%/100% cùng lý do ô icon phía trên: hàng implicit auto làm
   max-height:% cyclic — 8 SP hiện toàn ảnh ngang nên chưa lộ, nhưng chỉ cần 1 SP
   ảnh dọc là thủng thẻ. Vá phòng theo đúng bài đã đo. */
body.kqt-shop .sh-ph{ aspect-ratio:1/1; display:grid; grid-template:100% / 100%;
  place-items:center; background:var(--white); padding:14px; }
body.kqt-shop .sh-ph .ph__img{ max-width:100%; max-height:100%; object-fit:contain; }
body.kqt-shop .sh-sp__b{ display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px;
  border-top:1px solid var(--taupe-10); }
body.kqt-shop .sh-sp__b i{ font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.04em; color:var(--taupe); }
body.kqt-shop .sh-sp__b b{ font-size:13.5px; font-weight:600; line-height:1.4; color:var(--navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.8em; }
body.kqt-shop .sh-sp__gia{ margin-top:2px; font-size:15px; font-weight:800;
  color:var(--gold-dark); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  body.kqt-shop .sh-hang__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:980px){
  body.kqt-shop .sh-truc{ grid-template-columns:1fr; }
  body.kqt-shop .sh-moi__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  body.kqt-shop .sh-khac__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  body.kqt-shop .sh-hang__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.kqt-shop .sh-panel__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px){
  body.kqt-shop .sh-khac__grid{ grid-template-columns:1fr; }
  body.kqt-shop .sh-hang__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}