/**
 * YogiBee Theme — Product CSS
 * Product archive + filter sidebar + product detail.
 * Conditional: load only on product pages.
 * @package YogiBee
 */

/* ═══════════════════════════════════════════
   ARCHIVE LAYOUT
══════════════════════════════════════════ */
.listing-wrap{display:grid;grid-template-columns:1fr;max-width:var(--wrap,1200px);margin:0 auto}
.fsidebar{display:none;padding:24px 20px;background:var(--s0);border-right:1px solid var(--bd)}
.lmain{padding:20px;min-width:0}

/* ═══════════════════════════════════════════
   SEARCH BAR + CONTROLS
══════════════════════════════════════════ */
.lsh{margin-bottom:20px}
.lsh-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ksearch{position:relative;flex:1}
.ksearch input{
  width:100%;min-height:44px;padding:10px 14px 10px 36px;
  border-radius:var(--r);border:1.5px solid var(--bd);
  background:var(--w);font-size:16px;color:var(--tx);
  outline:none;transition:border-color var(--tr);
  font-family:var(--fb);
}
.ksearch input:focus{border-color:var(--jade)}
.ksearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--tx3);fill:none;stroke-width:2;pointer-events:none}
.fbtn{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:9px 15px;border-radius:22px;border:1.5px solid var(--bd);font-size:var(--fs-sm);color:var(--tx2);cursor:pointer;background:transparent;font-family:var(--fb);font-weight:500;white-space:nowrap;flex-shrink:0;transition:all var(--tr)}
.fbtn:hover{border-color:var(--jade);color:var(--jade)}
/* Ô sắp xếp: có nhãn "Sắp xếp" và mũi tên xổ để nhìn ra ngay đây là bộ chọn,
   không phải một cái nút. Trước đây chỉ hiện chữ "Mới nhất" trong viền bo tròn
   nên trông y hệt nút bấm. */
.srtwrap{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 34px 0 14px;
  border:1px solid var(--bd);border-radius:22px;
  background:var(--w);flex-shrink:0;
  transition:border-color var(--tr);
}
.srtwrap:hover,.srtwrap:focus-within{border-color:var(--jade)}
.srtlbl{
  font-size:var(--fs-xs);color:var(--tx3);
  text-transform:uppercase;letter-spacing:.6px;
  white-space:nowrap;pointer-events:none;
}
.srtcar{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;stroke:var(--jade);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
/* font-size 16px: dưới mức này iOS tự phóng to trang khi chạm vào select */
.srtbtn{
  -webkit-appearance:none;appearance:none;
  padding:0;min-height:44px;border:none;border-radius:0;
  font-size:16px;font-weight:600;color:var(--tx);
  cursor:pointer;background:transparent;font-family:var(--fb);
  white-space:nowrap;outline:none;
}
.srtbtn:hover,.srtbtn.on{border-color:var(--jade);color:var(--jade)}

/* Suggestion tags */
.lsh-sug{background:var(--s1);border-radius:var(--r);border:1px solid var(--bd2);padding:14px}
.sg-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.sg-row:last-child{margin-bottom:0}
.sg-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--tx3);white-space:nowrap;padding-top:6px;min-width:68px;letter-spacing:.3px}
.sg-tags{display:flex;flex-wrap:wrap;gap:6px}

/* Active filter chips */
.af-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.af-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--s1);border-radius:14px;font-size:var(--fs-xs);color:var(--jade);font-weight:500;border:1px solid rgba(26,92,72,.2)}
/* Nút xoá tất cả nằm cùng hàng với các chip đang lọc */
.af-clear{
  display:inline-flex;align-items:center;
  padding:4px 12px;margin-left:2px;
  background:transparent;border:1px solid #C04030;border-radius:14px;
  font-size:var(--fs-xs);font-weight:600;color:#C04030;
  font-family:var(--fb);cursor:pointer;
  transition:all var(--tr);
}
.af-clear:hover{background:#C04030;color:#fff}

/* ═══ CÔNG TẮC "CHỈ HIỆN HÀNG CÒN" ═══ */
.fstock{
  display:flex;align-items:center;gap:11px;
  min-height:52px;padding:0 15px;margin-bottom:14px;
  background:var(--w);border:1px solid var(--bd);
  border-radius:var(--r);cursor:pointer;
  box-shadow:0 1px 3px rgba(26,32,24,.05);
  transition:border-color var(--tr),background var(--tr);
}
.fstock:hover{border-color:var(--jade)}
.fstock input{position:absolute;opacity:0;width:0;height:0}
.fstock-sw{
  position:relative;flex-shrink:0;
  width:40px;height:23px;border-radius:12px;
  background:var(--s3,#D8DCD6);transition:background var(--tr);
}
.fstock-sw::after{
  content:'';position:absolute;top:2px;left:2px;
  width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform var(--tr);
}
.fstock-tx{font-size:var(--fs-sm);font-weight:600;color:var(--tx)}
.fstock input:checked ~ .fstock-sw{background:var(--jade)}
.fstock input:checked ~ .fstock-sw::after{transform:translateX(17px)}
.fstock:has(input:checked){background:rgba(26,92,72,.06);border-color:var(--jade)}
.fstock input:focus-visible ~ .fstock-sw{outline:2px solid var(--jade);outline-offset:2px}
.af-chip button{background:none;border:none;cursor:pointer;color:var(--j3);font-size:11px;line-height:1;padding:0 0 0 2px}
.lmeta{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:14px}

/* No results */
.yb-no-products{text-align:center;padding:60px 20px;color:var(--tx3)}
.yb-no-products p:first-child{font-size:40px;margin-bottom:12px}

/* ═══════════════════════════════════════════
   FILTER SIDEBAR — GROUPS
══════════════════════════════════════════ */
/* Mỗi nhóm lọc là một khối có nền + viền riêng.
   Bản cũ chỉ có một đường kẻ mảnh nên các nhóm dính vào nhau, khó phân biệt
   đâu là tiêu đề nhóm, đâu là lựa chọn. */
.fg{
  margin-bottom:14px;padding:0;
  background:var(--w);
  border:1px solid var(--bd);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(26,32,24,.05);
}
.fg:last-of-type{margin-bottom:18px}

/* Nút xoá lọc — trước dùng .boj nền trong suốt nên gần như không thấy.
   Khi chưa chọn lọc nào thì mờ đi và không bấm được, để trạng thái nút
   phản ánh đúng việc có gì để xoá hay không. */
.bclear{
  width:100%;
  background:var(--jade);color:#fff;
  border:none;font-weight:600;
}
.bclear:hover:not(:disabled){background:var(--j2)}
.bclear:disabled{
  background:var(--s1);color:var(--tx3);
  border:1px solid var(--bd2);
  cursor:not-allowed;opacity:1;
}
.fg:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
/* Tiêu đề nhóm có nền riêng — đây là ranh giới rõ nhất giữa các nhóm lọc.
   Bản trước chỉ có đường kẻ mảnh nên nhìn vào vẫn thấy các nhóm trộn vào nhau. */
.fgtitle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:var(--fs-sm);font-weight:700;color:var(--j2);
  margin:0;padding:12px 14px;
  background:var(--s1);
  border-bottom:1px solid var(--bd);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  min-height:44px;
  transition:background var(--tr);
}
.fgtitle:hover{background:#EDF3E8}
.fgbody{padding:10px 14px 14px}
.fg.collapsed .fgtitle{border-bottom:none}
.fgtitle svg{width:14px;height:14px;stroke:var(--tx3);fill:none;stroke-width:2;stroke-linecap:round;transition:transform var(--tr)}
.fg.collapsed .fgtitle svg{transform:rotate(-90deg)}
.fg.collapsed .fgbody{display:none}
.fgbody{}

/* ═══════════════════════════════════════════
   DUAL-RANGE PRICE SLIDER
══════════════════════════════════════════ */
.price-disp{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-weight:500;color:var(--tx);margin-bottom:14px}
.rng-wrap{position:relative;height:32px}
.rng-track{position:absolute;top:14px;left:0;right:0;height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.rng-fill{
  position:absolute;top:0;left:0;right:0;bottom:0;
  pointer-events:none;
  background:linear-gradient(to right,var(--s3) 0%,var(--s3) 0%,var(--jade) 0%,var(--jade) 100%,var(--s3) 100%);
}
/* Two range inputs stacked */
/* Vùng kéo cao 44px cho ngón tay; núm vẫn vẽ 26px nên nhìn không đổi nhiều. */
.rng-wrap input[type=range]{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:-6px;width:100%;height:44px;
  background:transparent;pointer-events:none;
  outline:none;margin:0;padding:0;
}
.rng-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--jade);pointer-events:all;cursor:pointer;
  border:3px solid #fff;box-shadow:0 1px 6px rgba(26,92,72,.35);
  transition:transform .1s;
}
.rng-wrap input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}
.rng-wrap input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--jade);pointer-events:all;cursor:pointer;
  border:3px solid #fff;box-shadow:0 1px 6px rgba(26,92,72,.35);
  box-sizing:border-box;
}
.rng-wrap input[type=range]::-webkit-slider-runnable-track{background:transparent;height:4px}
.rng-wrap input[type=range]::-moz-range-track{background:transparent;height:4px}

/* ═══════════════════════════════════════════
   CHECKBOX FILTERS
══════════════════════════════════════════ */
.chk-list{display:flex;flex-direction:column;gap:8px}
/* Cả dòng là <label> nên bấm đâu cũng tick được — cho nó cao 44px để ngón tay
   không phải nhắm đúng ô vuông 16px. */
.chk-item{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:var(--fs-sm);color:var(--tx2);min-height:44px}
.chk-item input{width:20px;height:20px;accent-color:var(--jade);cursor:pointer;flex-shrink:0}
.chk-item:hover{color:var(--tx)}
.chk-cnt{margin-left:auto;font-size:var(--fs-xs);color:var(--tx3)}

/* ═══════════════════════════════════════════
   MOBILE FILTER DRAWER
   Dùng transform vì đây không phải main nav/menu
══════════════════════════════════════════ */
.drw-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:var(--z-drawer)}
.drw-ov.on{display:block}
.drw-panel{
  position:fixed;right:0;top:0;bottom:0;
  width:min(340px,90vw);background:var(--w);
  z-index:calc(var(--z-drawer) + 1);
  transform:translateX(100%); /* progressive: OK for filter drawer */
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;box-shadow:var(--sh3);
}
.drw-panel.on{transform:translateX(0)}
.drw-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--w);z-index:1}
.drw-head h3{font-size:var(--fs-base);font-weight:600;color:var(--tx)}
.drw-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--tx2);cursor:pointer}
.drw-body{padding:20px}
.drw-foot{padding:16px 20px;border-top:1px solid var(--bd);position:sticky;bottom:0;background:var(--w);display:flex;gap:10px}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL
══════════════════════════════════════════ */
.pd-wrap{max-width:var(--wrap,1200px);margin:0 auto}

/* ── Bố cục hero ──
   Điện thoại: một cột, thứ tự đọc do `order` quyết định
     ảnh → tên/sao/giá/biến thể → cam kết → thông số
   Desktop (xem @media cuối file): ba cột — ảnh | mua hàng | thông số. */
.pd-hero{display:flex;flex-direction:column;min-width:0}
.pd-gallery{order:1;min-width:0}
.pd-info   {order:2;min-width:0}

/* Hàng chia sẻ — chỉ biểu tượng, không chữ */
.pd-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 0}
.pd-share-lb{font-size:var(--fs-xs);color:var(--tx3)}
.pd-share-btn{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--tx2);text-decoration:none;
  background:var(--s1);border:1px solid var(--bd2);
  border-radius:50%;cursor:pointer;padding:0;
  transition:all var(--tr);
}
.pd-share-btn svg{width:16px;height:16px;display:block}
.pd-share-btn:hover{border-color:var(--jade);color:var(--jade);background:var(--w)}

/* Trên điện thoại: gom thành MỘT nút tròn nổi ở góc phải ảnh, bấm mới xổ ra.
   Hàng bốn nút chiếm nguyên một dòng dưới ảnh là quá nhiều chỗ cho một hành
   động ít ai dùng. */
.pd-share-fab{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--bd2);
  color:var(--tx2);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.pd-share-fab svg{width:17px;height:17px}

/* Hàng chọn số lượng — nhãn bên trái, ô đếm bên phải (kiểu Shopee) */
.pd-qtyrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.pd-qtyrow .ol{margin:0;flex:0 0 auto}

/* ── Băng ảnh ──
   Một dải cuộn ngang chứa mọi ảnh. Điện thoại vuốt trực tiếp; desktop bấm ảnh
   nhỏ thì JS cuộn tới ô tương ứng. scroll-snap giữ ảnh luôn dừng đúng khung,
   không bao giờ đứng lưng chừng giữa hai tấm. */
.pd-stage{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-radius:var(--rl);background:var(--s1);
  min-width:0;
}
.pd-stage::-webkit-scrollbar{display:none}
.pd-slide{
  position:relative;flex:0 0 100%;scroll-snap-align:center;
  overflow:hidden;
}
.pd-slide::before{content:'';display:block;padding-bottom:100%} /* 1:1 */
.pd-slide picture{display:contents}
/* Hai lớp tổ tiên để thắng luật `picture>img.pvt-loaded{width:100%}` của plugin
   lazy-load — luật đó ép width nhưng bỏ height, làm ảnh không phủ kín khung. */
/* contain chứ KHÔNG phải cover: ảnh sản phẩm thường chụp trọn vật trên nền
   trắng, cover sẽ cắt mất mép (bánh xe bị xén hai bên). contain cho thấy đủ
   sản phẩm, phần thừa là nền nhạt của khung. */
.pd-gallery .pd-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.pd-slide>.mtlg{position:absolute;width:46%;height:76%;top:12%;left:27%;border-radius:50px;background:rgba(255,255,255,.13)}

/* ── Lightbox — xem ảnh phóng to đúng kích cỡ gốc ── */
.pd-lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(20,24,20,.92);
  display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.pd-lightbox[hidden]{display:none}
.pd-lightbox-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out;border-radius:4px}
.pd-lightbox-close{
  position:absolute;top:16px;right:16px;width:44px;height:44px;
  border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pd-lightbox-close:hover{background:rgba(255,255,255,.26)}
.pd-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pd-lightbox-nav:hover{background:rgba(255,255,255,.26)}
.pd-lightbox-prev{left:16px}
.pd-lightbox-next{right:16px}
@media(max-width:600px){
  .pd-lightbox{padding:16px}
  .pd-lightbox-nav{width:40px;height:40px;font-size:22px}
}
.pd-slide>.mtlg::after{content:'';position:absolute;inset:7px;border-radius:43px;border:1px solid rgba(255,255,255,.22)}

/* Chấm chỉ vị trí — chỉ có nghĩa khi không thấy dải ảnh nhỏ, nên chỉ hiện
   trên điện thoại */
.pd-dots{display:flex;gap:6px;justify-content:center;padding:12px 0 0}
.pd-dot{width:6px;height:6px;border-radius:50%;background:var(--bd);transition:all var(--tr)}
.pd-dot.on{background:var(--jade);width:18px;border-radius:3px}

/* Dải ảnh nhỏ — ẩn trên điện thoại (ở đó vuốt là đủ, và nó từng đẩy cả trang
   rộng ra 616px gây tràn ngang) */
.pd-thumbs{display:none;gap:9px;min-width:0}
.pd-thumbs::-webkit-scrollbar{display:none}
/* Ô ảnh nhỏ — nhỏ và mảnh như các sàn thương mại điện tử.
   Bản cũ dùng viền 2.5px trong suốt rồi đổi sang màu ngọc khi chọn: viền dày
   ăn vào ảnh, và khi chọn thì cả ô như bị bao một khung xanh dày, trông thô.
   Giờ: viền 1px xám nhạt cho mọi ô (ranh giới rõ mà không nặng), ô đang xem
   đổi sang viền đậm 1.5px — thay đổi đủ thấy nhưng không phá nhịp. */
.pth{
  position:relative;overflow:hidden;
  width:56px;flex-shrink:0;background:var(--s1);
  border-radius:6px;border:1px solid var(--bd2);
  cursor:pointer;transition:border-color var(--tr),opacity var(--tr);
  opacity:.82;padding:0;
}
.pth::before{content:'';display:block;padding-bottom:100%} /* square thumbs */
.pth picture{display:contents}
.pd-thumbs .pth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pth:hover{opacity:1;border-color:var(--tx3)}
.pth.on{border:1.5px solid var(--j2);opacity:1}
.pth:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.pt1{background:linear-gradient(135deg,#0A1A10,#2A5040)}
.pt2{background:linear-gradient(135deg,#0A1018,#203848)}
.pt3{background:linear-gradient(135deg,#1A180A,#503818)}
.pt4{background:linear-gradient(135deg,#180810,#402030)}

/* Info panel */
.pd-info{padding:20px}
.pd-brand{font-size:var(--fs-xs);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--j3);margin-bottom:5px}
.pd-name{font-family:var(--fh);font-size:24px;font-weight:500;font-style:italic;color:var(--j2);line-height:1.25;margin-bottom:8px}
/* Giá — hai tầng: con số phải trả cỡ lớn, tham chiếu (giá cũ + mức giảm) nhỏ
   và nhạt bên dưới. Trước đây bốn mẩu thông tin cùng cỡ, cùng độ đậm nằm sát
   nhau nên mắt không biết đọc cái nào trước. */
.pd-price{margin-bottom:22px}
.pd-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd-price-now{font-size:32px;font-weight:700;color:var(--a2);line-height:1.1;letter-spacing:-.5px}
.pd-price-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.pd-price-was{font-size:var(--fs-sm);color:var(--tx3);text-decoration:line-through}
.pd-price-off{
  display:inline-flex;align-items:center;
  background:rgba(192,52,42,.1);color:#C0342A;
  font-size:var(--fs-xs);font-weight:700;
  padding:2px 7px;border-radius:4px;
}
.pd-price-contact{font-size:18px;color:var(--tx2)}
/* Đánh giá — dòng nhỏ giữa tên và giá. Trước đây con số 4.5 dùng cỡ 40px kiểu
   tiêu đề, to ngang giá bán nên hai thứ tranh nhau sự chú ý. */
.pd-rating{display:flex;align-items:center;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.pd-rating-val{font-size:var(--fs-sm);font-weight:700;color:var(--tx)}
/* "Đã bán" — tách khỏi cụm đánh giá bằng một vạch dọc mảnh, vì đó là hai loại
   bằng chứng khác nhau: một cái là ý kiến, một cái là con số giao dịch */
.pd-sold{font-size:var(--fs-sm);color:var(--tx3);padding-left:10px;
  border-left:1px solid var(--bd);margin-left:4px}
.pdst{color:var(--a2);font-size:var(--fs-sm);letter-spacing:2px}
.rct{font-size:var(--fs-sm);color:var(--tx3)}
.bgr{font-family:var(--fh);font-size:40px;font-style:italic;color:var(--jade)}

/* Variants
   Vùng từ đánh giá xuống nút mua trước đây bị nén: giá, sao, nhãn màu, chấm
   màu và ô số lượng cách nhau chỉ 8–16px nên đọc như một khối đặc. Giãn ra
   theo nhóm — mỗi bước chọn (màu → độ dày → số lượng) là một nhịp nghỉ. */
.ol{font-size:var(--fs-sm);font-weight:600;color:var(--tx);margin:0 0 10px}
.sws{display:flex;gap:10px;margin-bottom:24px;cursor:not-allowed}
.sw{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all var(--tr)}
.sw.on{outline:2.5px solid var(--jade);outline-offset:3px}
.sw1{background:#1A3828}.sw2{background:#0A1828}.sw3{background:#382010}.sw4{background:#281020}
.ochs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;cursor:not-allowed}
.och{padding:9px 16px;border-radius:var(--r);border:1.5px solid var(--bd);font-size:var(--fs-sm);color:var(--tx2);cursor:pointer;transition:all var(--tr);font-family:var(--fb)}
.och.on{border-color:var(--jade);color:var(--jade);background:rgba(62,131,104,.08);font-weight:500}

/* ── Biến thể không mua được ──
   HAI lý do khác nhau, nên phải NHÌN ra khác nhau — nếu vẽ giống hệt thì khách
   chọn "màu Đen" xong thấy "20cm" gạch đỏ sẽ tưởng shop hết sạch bản 20cm,
   trong khi thật ra 20cm vẫn còn, chỉ là không có màu Đen:

     · data-dead="1"  → hết hàng TOÀN CỤC (PHP render cố định)  → gạch ĐỎ
     · không data-dead → chỉ không khớp tổ hợp đang chọn ở trục kia
                         (syncAxisAvailability toggle liên tục) → gạch XÁM

   KHÔNG dùng pointer-events:none: click phải tới được JS thì mới hiện được câu
   hướng dẫn "bỏ chọn X trước". Việc chặn chọn do selSw/selCh lo (kiểm tra
   aria-disabled), không phải do CSS nuốt sự kiện.

   Dùng background-image !important vì color swatch có inline
   style="background:#hex" (shorthand → đặt background-image thành none);
   !important thắng inline. */
.sw-out{opacity:.45;cursor:not-allowed}
.sw-out[data-dead="1"]{
  background-image:linear-gradient(
    135deg,transparent 40%,#C0342A 40%,#C0342A 60%,transparent 60%
  ) !important;
}
.sw-out:not([data-dead="1"]){
  opacity:.35;
  background-image:linear-gradient(
    135deg,transparent 42%,#7A9080 42%,#7A9080 58%,transparent 58%
  ) !important;
}
.och-out{opacity:.55;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:2px}
.och-out[data-dead="1"]{text-decoration-color:#C0342A}
.och-out:not([data-dead="1"]){opacity:.45;text-decoration-color:var(--tx3);color:var(--tx3)}

/* Cảnh báo sắp hết hàng — chỉ xuất hiện khi còn ≤3 cái, nên luôn được tô đỏ:
   đã hiện ra là đã đáng chú ý. Đứng sát ô số lượng để khách thấy trước khi
   chọn số lượng, không phải sau. */
.pd-stock{font-size:var(--fs-sm);color:#C0342A;font-weight:600;margin:0 0 8px}
.pd-stock[hidden]{display:none}

/* Chip "Phù hợp với" — cuối phần mô tả, ngăn cách bằng một vạch mảnh để tách
   khỏi đoạn văn phía trên (xem ghi chú trong single-yb_product.php) */
.pd-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:24px 0 0;padding-top:18px;border-top:1px solid var(--bd)}
.pd-tags-lb{font-size:var(--fs-xs);color:var(--tx3)}
.pd-tag{
  font-size:var(--fs-xs);color:var(--j2);text-decoration:none;
  background:rgba(26,92,72,.07);border:1px solid rgba(26,92,72,.14);
  padding:3px 10px;border-radius:99px;transition:all var(--tr);
}
.pd-tag:hover{background:rgba(26,92,72,.14);color:var(--jade)}

/* Nút mua khi biến thể đang chọn hết hàng */
.btn-oos{background:var(--s2);color:var(--tx3);cursor:not-allowed}
.btn-oos:hover{background:var(--s2);transform:none;box-shadow:none}

/* Hai nút hành động cùng một hàng, như Shopee: mua đứng trước (việc chính),
   nhờ tư vấn đứng sau (việc phụ khi còn phân vân). */
.atcr{display:flex;gap:12px;margin:0;padding-top:20px;border-top:1px solid var(--bd2)}
.atcr>*{flex:1;padding:14px;justify-content:center;display:flex;align-items:center;gap:8px}
.pd-zalo{white-space:nowrap}

/* ── Thanh mua cố định đáy màn hình (chỉ điện thoại) ──
   Cuộn tới giữa bài mô tả rồi muốn mua thì phải vuốt ngược lên đầu trang.
   Thanh này giữ hai hành động chính trong tầm ngón cái suốt cả trang. */
.pd-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--w);border-top:1px solid var(--bd);
  box-shadow:0 -2px 14px rgba(0,0,0,.07);
}
.pd-bar-chat,.pd-bar-buy{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:48px;border:0;border-radius:var(--r);cursor:pointer;
  font-family:var(--fb);font-size:var(--fs-sm);font-weight:600;
  text-decoration:none;
}
.pd-bar-chat{flex:0 0 40%;background:#0068FF;color:#fff}
.pd-bar-buy {flex:1;background:var(--jade);color:#fff}
.pd-bar-buy.is-oos{background:var(--s2);color:var(--tx3);cursor:not-allowed}

/* Trên điện thoại, nút mua và nút Zalo trong trang bị ẩn — thanh cố định đã
   lo cả hai. Ô số lượng vẫn giữ để khách chọn được số lượng trước khi bấm. */
@media(max-width:767px){
  /* Hai nút chính đã nằm ở thanh cố định đáy màn hình → ẩn bản trong trang */
  .atcr{display:none}
  .pd-gallery{padding:0;position:relative}
  .pd-stage{border-radius:0}
  .pd-info{padding:18px 20px 20px}
  .pd-detail{padding:22px 0}

  /* Cụm chia sẻ thu về một nút tròn ở góc phải ảnh; các nút kênh chỉ hiện
     sau khi bấm (JS gắn class .is-open). */
  .pd-share{
    position:absolute;top:56px;right:12px;z-index:4;
    flex-direction:column;padding:0;gap:6px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s,transform .18s,visibility 0s linear .18s;
  }
  .pd-share.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .pd-share-lb{display:none}
  .pd-share-btn{width:36px;height:36px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.1)}
}
/* Desktop không cần nút gom — bốn biểu tượng nằm sẵn dưới ảnh */
@media(min-width:768px){
  .pd-share-fab{display:none}
}
/* Chừa chỗ cho thanh, nếu không nó che mất phần cuối chân trang */
body.yb-single-product .ft{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
/* Ba nút nổi cùng góc là rối — trang này đã có thanh dưới rồi */
body.yb-single-product .yb-fab-cart,
body.yb-single-product .zalo-float{display:none}
/* Ô số lượng — gọn và nhẹ hơn bản cũ (48px, viền 1.5px, dấu +/− cỡ 19px trông
   nặng như một cụm nút chính, trong khi đây chỉ là chỉnh phụ trước khi bấm
   Mua). Vạch ngăn mảnh giữa nút và số thay cho việc phóng to mọi thứ. */
.qty{display:flex;align-items:center;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--w)}
.qb{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;color:var(--tx2);
  cursor:pointer;background:transparent;border:none;
  transition:background var(--tr),color var(--tr);
}
.qb:hover{background:var(--s1);color:var(--jade)}
.qb:active{background:var(--s2)}
/* 16px là ngưỡng iOS: nhỏ hơn thì Safari tự phóng to trang khi focus vào ô */
.qv{
  width:44px;height:38px;text-align:center;
  font-size:16px;font-weight:600;color:var(--tx);
  border:none;border-left:1px solid var(--bd);border-right:1px solid var(--bd);
  outline:none;background:transparent;font-family:var(--fb);
}
/* Trên điện thoại nới lại cho đủ vùng chạm 44px */
@media(max-width:767px){
  .qb{width:44px;height:44px}
  .qv{height:44px}
}
/* Cam kết giao hàng / đổi trả / bảo hành.
   Trước dùng --fs-xs (12px) + màu chữ phụ nên nhỏ và mờ hơn hẳn nội dung
   xung quanh. Đây là thông tin khách đọc trước khi quyết định mua → dùng
   cỡ chữ thân bài và màu chữ chính. */
.asc{
  font-size:var(--fs-sm);
  line-height:1.65;
  color:var(--tx);
  display:flex;flex-direction:column;gap:9px;
  padding:15px 16px;
  background:var(--s1);
  border-radius:var(--r);
  border:1px solid var(--bd2);
}
.asc>div{display:flex;align-items:flex-start;gap:8px}

/* Spec table */
.sptbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.sptbl tr:nth-child(even){background:var(--s0)}
.sptbl td{padding:8px 12px;color:var(--tx2);border-bottom:1px solid var(--bd2)}
.sptbl td:first-child{color:var(--tx);font-weight:500;width:45%}
/* Đoạn giới thiệu mở đầu — chỉ hơi đậm hơn thân bài một chút, không dựng thành
   khung riêng. Vai trò nổi bật thuộc về nội dung người viết soạn. */
.pd-lede{font-size:var(--fs-md);color:var(--tx);line-height:1.75;margin-bottom:20px}

/* ── Khối "Chi Tiết Sản Phẩm" ── */
.pd-detail{padding:32px 0;border-top:1px solid var(--bd)}
.pd-detail-h{
  font-family:var(--fh);font-size:20px;font-style:italic;font-weight:500;
  color:var(--j2);margin:0 0 18px;
}

/* Tổng quan nhanh — gạch đầu dòng, nhãn đậm rồi tới câu giải thích. Giữ nhẹ
   nhàng: đây là phần đọc lướt, không phải khối quảng cáo. */
.pd-quick{background:var(--s0);border:1px solid var(--bd2);border-radius:var(--rl);
  padding:18px 22px;margin:0 0 22px}
.pd-quick-list{margin:0;padding-left:18px;display:grid;gap:8px}
.pd-quick-list li{font-size:var(--fs-sm);color:var(--tx2);line-height:1.7}
.pd-quick-list strong{color:var(--tx);font-weight:600}

.spec-card{background:var(--s1);border-radius:var(--rl);padding:22px;border:1px solid var(--bd);align-self:start}
.spec-card h3{font-family:var(--fh);font-size:var(--fs-base);font-style:italic;font-weight:500;color:var(--j2);margin-bottom:16px}

/* ── Internal link: MỘT kiểu duy nhất cho cả trang ──
   Dùng cho link trong bảng thông số (.spec-link) và link trong bài mô tả
   (.pd-art a, .pd-lede a…). Không gạch dưới ở bất kỳ trạng thái nào — màu xanh
   đậm hơn chữ thường đã đủ báo "bấm được". Hover chỉ hiện một mảng nền rất nhạt
   để xác nhận con trỏ đang ở đúng chỗ.
   padding + margin âm: nền hover ôm sát chữ mà KHÔNG làm giãn dòng văn bản. */
.spec-link,
.pd-lede a,
.pd-art p a,
.pd-art li a,
.pd-art td a,
.pd-quick-list a,
.pd-overview-txt a{
  color:var(--j2);font-weight:500;text-decoration:none;
  padding:1px 3px;margin:0 -3px;border-radius:3px;
  transition:background var(--tr),color var(--tr);
}
.spec-link:hover,
.pd-lede a:hover,
.pd-art p a:hover,
.pd-art li a:hover,
.pd-art td a:hover,
.pd-quick-list a:hover,
.pd-overview-txt a:hover{
  background:rgba(62,131,104,.12);color:var(--jade);
}
.spec-link:focus-visible,
.pd-art a:focus-visible{outline:2px solid var(--jade);outline-offset:1px;border-radius:3px}

/* Description */
.pd-desc{padding:40px 0;border-top:1px solid var(--bd)}
/* Màn hình hẹp: xếp dọc, bài mô tả đọc TRƯỚC bảng thông số. Dùng flex + order
   vì trong HTML bảng đứng trước (bắt buộc, để float ở desktop hoạt động). */
.pd-desc-grid{display:flex;flex-direction:column;gap:28px}
.pd-art{order:1}
.spec-card{order:2}
.pd-art h2{font-family:var(--fh);font-size:22px;font-style:italic;color:var(--j2);margin:0 0 12px;line-height:1.3}
.pd-art h3{font-size:var(--fs-md);font-weight:600;color:var(--tx);margin:24px 0 10px}
.pd-art p{font-size:var(--fs-base);color:var(--tx2);line-height:1.8;margin-bottom:16px}
.pd-art ul{padding-left:20px;margin-bottom:16px}
.pd-art li{font-size:var(--fs-base);color:var(--tx2);line-height:1.8;margin-bottom:6px}
.pd-art strong{color:var(--tx);font-weight:600}
/* Ảnh trong nội dung mô tả — trước đây không có luật nào nên ảnh hiện ở kích
   thước gốc, tấm 1200px đè bẹp cả bố cục. figure/picture cũng phải chặn theo,
   không thì thẻ bọc vẫn giữ chiều rộng gốc. */
/* Ảnh trong nội dung mô tả.
   KHÔNG áp kích thước lên <picture>: thẻ bọc của plugin WebP không có kích
   thước nội tại, cho nó display:block + max-height sẽ tạo ra một hộp rỗng
   1160×480 bao quanh tấm ảnh 300px — nhìn như ảnh lạc giữa một mảng trống và
   chữ bị đẩy lung tung. Để nó ở display:contents (luật chung trong theme.css)
   thì <img> tự lo kích thước của mình.
   Trần chiều cao 480px: ảnh vuông 1200×1200 tuy đã vừa cột nhưng vẫn cao gần
   bằng cả màn hình, đẩy phần chữ ra khỏi tầm mắt. */
.pd-art figure,.pd-art video,.pd-art iframe{
  max-width:100%;height:auto;display:block;margin:0 auto}
.pd-art figure{margin:20px auto}
/* Bộ chọn cố tình dài: plugin lazy-load khai
     picture > img.pvt-lazy, picture > img.pvt-loaded { width:100% }
   với độ ưu tiên (0,1,2) — cao hơn `.pd-art img` (0,1,1), nên MỌI ảnh trong
   bài đều bị kéo căng bằng bề ngang cột bất kể ảnh gốc chỉ 300px. Thêm một
   lớp tổ tiên đưa luật này lên (0,2,1) và giành lại quyền quyết định. */
.pd-desc .pd-art img{
  display:block;margin:20px auto;
  max-width:100%;max-height:480px;
  width:auto;height:auto;
  border-radius:var(--rl);
}
.pd-art figcaption{font-size:var(--fs-xs);color:var(--tx3);text-align:center;margin-top:8px;font-style:italic}
.pd-art table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:var(--fs-sm)}
.pd-art td,.pd-art th{border:1px solid var(--bd);padding:8px 10px;text-align:left}
/* Image/video placeholders in article */
.pd-img-ph{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--s1),var(--s2));
  border-radius:var(--rl);margin:20px 0;display:flex;align-items:center;justify-content:center;font-size:32px;
}
.pd-img-ph::before{content:'';display:block;padding-bottom:56.25%}
.pd-vid-ph{position:relative;overflow:hidden;background:var(--j2);border-radius:var(--rl);margin:20px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pd-vid-ph::before{content:'';display:block;padding-bottom:56.25%}
.pd-vid-ph>.play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:18px}

/* Reviews */
.ri{background:var(--w);border-radius:var(--rl);padding:18px;border:1px solid var(--bd2);margin-bottom:16px}
.rih{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-wrap:wrap;gap:6px}
.rn{font-weight:600;font-size:var(--fs-sm);color:var(--tx)}
.rd{font-size:var(--fs-xs);color:var(--tx3)}
.rst{color:var(--a2);font-size:var(--fs-sm);letter-spacing:2px;margin-bottom:8px}
.rt{font-size:var(--fs-sm);color:var(--tx2);line-height:1.75}

/* ═══ SAO ĐÁNH GIÁ ═══
   Hai lớp chồng nhau: lớp xám nền + lớp vàng cắt theo % điểm. Nhờ vậy 4.5
   ra đúng nửa sao và 4.7 ra nhiều hơn nửa một chút — cách cũ làm tròn nên
   4.5 và 4.7 hiện y hệt nhau. */
.ystars{position:relative;display:inline-block;white-space:nowrap;line-height:1;vertical-align:middle}
.ystars-bg,.ystars-fg{display:block;letter-spacing:2px}
.ystars-bg{color:#D8DCD6}
.ystars-fg{
  position:absolute;top:0;left:0;
  color:#F0A020;overflow:hidden;
}
.ystars--sm{font-size:15px}
.ystars--md{font-size:20px}
.ystars--lg{font-size:24px}

/* ═══ ĐÁNH GIÁ KHÁCH HÀNG ═══ */
.pd-reviews{background:var(--s0);padding:44px 0;border-top:1px solid var(--bd);scroll-margin-top:calc(var(--nav-h) + 20px)}
/* ── Đầu khối đánh giá: điểm bên trái, bộ lọc sao bên phải (bố cục Shopee) ──
   Thay cho biểu đồ phân bố cũ: các thanh phần trăm nhìn thì đẹp nhưng không
   làm được gì, còn bộ lọc thì bấm vào là đọc được đúng nhóm mình quan tâm. */
.pd-rvhead{
  display:flex;gap:20px 28px;align-items:center;flex-wrap:wrap;
  background:var(--s0);padding:20px 22px;border-radius:var(--rl);
  margin-bottom:18px;border:1px solid var(--bd2);
}
.pd-rvscore{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;min-width:96px}
.pd-rvbig{font-family:var(--fh);font-size:34px;font-style:italic;color:var(--a2);line-height:1}
.pd-rvmax{font-size:var(--fs-xs);color:var(--tx3)}

.pd-rvfilter{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.pd-rvchip{
  font-family:var(--fb);font-size:var(--fs-xs);color:var(--tx2);
  background:var(--w);border:1px solid var(--bd);
  padding:7px 14px;border-radius:var(--r);cursor:pointer;
  transition:all var(--tr);white-space:nowrap;
}
.pd-rvchip:hover:not(:disabled){border-color:var(--jade);color:var(--jade)}
.pd-rvchip.on{border-color:var(--a2);color:var(--a2);background:rgba(168,112,32,.07);font-weight:600}
.pd-rvchip:disabled{opacity:.4;cursor:not-allowed}

.pd-rvempty{text-align:center;color:var(--tx3);font-size:var(--fs-sm);padding:24px 0}
.pd-rvempty[hidden]{display:none}

/* Dòng "Đăng nhập để viết đánh giá" — canh giữa, tách khỏi danh sách bằng
   một vạch mảnh */
.pd-rvlogin{
  text-align:center;font-size:var(--fs-sm);color:var(--tx2);font-weight:500;
  margin:0;padding:20px 0 4px;border-top:1px solid var(--bd2);
}
.pd-overview{
  background:var(--s2);border-left:4px solid var(--jade);
  border-radius:0 var(--rl) var(--rl) 0;
  padding:16px 20px;margin-bottom:20px;
}
.pd-overview-h{
  margin:0 0 8px;font-size:var(--fs-base);font-weight:700;color:var(--j2);
}
.pd-overview-txt{
  margin:0;font-size:var(--fs-sm);line-height:1.8;color:var(--tx);
  white-space:pre-wrap;
}
/* Chip "Phù hợp với" bên trong khối tổng quan — vạch mảnh phía trên để tách
   khỏi đoạn văn, nhưng không viền ngoài lặp lại (đã có border-left của khối) */
.pd-overview .pd-tags{
  margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(26,92,72,.14);
}

@media(max-width:600px){
  .pd-rvhead{gap:14px 16px;padding:16px}
  .pd-rvbig{font-size:28px}
  .pd-rvfilter{gap:6px}
  .pd-rvchip{padding:6px 11px}
}

/* MỘT cột, kể cả trên desktop — như Shopee.
   Hai cột buộc mắt phải nhảy ngang liên tục và làm mỗi thẻ hẹp lại; đánh giá
   là thứ đọc tuần tự, một cột đọc nhanh hơn. */
.pd-rvlist{display:flex;flex-direction:column;margin-bottom:20px}

/* Đánh giá vượt quá 3 cái đầu — vẫn nằm trong HTML (máy tìm kiếm và trình đọc
   màn hình đọc được) nhưng ẩn khỏi bố cục cho tới khi bấm "Xem thêm". */
/* !important vì `.pd-rv{display:flex}` bên dưới có cùng độ ưu tiên và đứng
   sau, nên nếu không có nó thì luật ẩn bị đè và đánh giá nào cũng hiện. */
.pd-rv--hidden{display:none !important}
.pd-rvmore-wrap{display:flex;justify-content:center;margin-bottom:28px}
.pd-rvmore{
  background:transparent;border:1px solid var(--bd);
  color:var(--j2);font-family:var(--fb);font-size:var(--fs-sm);font-weight:600;
  padding:10px 24px;border-radius:99px;cursor:pointer;
  transition:all var(--tr);
}
.pd-rvmore:hover{border-color:var(--jade);background:rgba(26,92,72,.05);color:var(--jade)}
/* Thẻ đánh giá: avatar chữ bên trái, nội dung bên phải; ngăn cách bằng vạch
   mảnh thay vì khung viền — nhẹ mắt hơn khi xếp liên tiếp. */
.pd-rv{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--bd2);
}
.pd-rv:first-child{padding-top:4px}
.pd-rv:last-child{border-bottom:0}
.pd-rv-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--jade);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.pd-rv-body{flex:1;min-width:0}
.pd-rv-nm{font-weight:600;color:var(--tx);font-size:var(--fs-sm);margin-bottom:3px}
.pd-rv-body .ystars{margin:0 0 4px}
.pd-rv-mt{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:8px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pd-rv-tx{font-size:var(--fs-sm);color:var(--tx2);line-height:1.75;margin:0}
.pd-rv-vf{color:var(--jade);font-weight:500}
.rv{font-size:var(--fs-xs);color:var(--j3);font-weight:600;margin-top:8px;display:block}

/* Khối đánh giá minh hoạ — làm nhạt để không bị nhầm với đánh giá thật */
.pd-rvnote{font-size:var(--fs-sm);color:var(--tx3);margin-bottom:14px;padding:10px 14px;
  background:var(--s0);border-left:3px solid var(--bd2);border-radius:0 var(--r) var(--r) 0}
.pd-rvlist--sample .pd-rv{opacity:.72}

/* ── Ô chọn sao trong form đánh giá ──
   Radio thật, ẩn khỏi mắt nhưng vẫn nhận focus bàn phím. Xếp NGƯỢC (5→1) trong
   HTML để dùng được bộ chọn ~ khi tô sáng các sao bên trái. */
.yb-rv-stars{border:0;padding:0;margin:0 0 16px}
.yb-rv-stars legend{font-size:var(--fs-sm);font-weight:600;color:var(--tx);margin-bottom:6px;padding:0}
.yb-rv-stars-row{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.yb-rv-stars input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.yb-rv-stars label{font-size:30px;line-height:1;color:var(--s2);cursor:pointer;transition:color var(--tr)}
.yb-rv-stars label:hover,
.yb-rv-stars label:hover ~ label,
.yb-rv-stars input:checked ~ label{color:var(--amb)}
.yb-rv-stars input:focus-visible + label{outline:2px solid var(--jade);outline-offset:2px;border-radius:3px}
.yb-rv-hint{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:4px;line-height:1.6}
/* Rating bar */
.rbr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rbl{font-size:var(--fs-xs);color:var(--tx3);width:20px;flex-shrink:0}
.rb{flex:1;height:6px;background:var(--s2);border-radius:3px;overflow:hidden}
.rbf{height:100%;background:var(--amb);border-radius:3px}
.rbn{font-size:var(--fs-xs);color:var(--tx3);width:28px;flex-shrink:0}

/* ═══════════════════════════════════════════
   RESPONSIVE — Product
══════════════════════════════════════════ */
@media(min-width:768px){
  .listing-wrap{grid-template-columns:280px 1fr}
  .fsidebar{display:block}
  .fbtn{display:none} /* Hide mobile filter button on desktop */
  /* ── Desktop: hai cột — ảnh 42% | mua hàng 58% (bố cục Shopee) ──
     Thông số kỹ thuật KHÔNG còn làm cột thứ ba; nó xuống khối "Chi Tiết Sản
     Phẩm" phía dưới, nơi có đủ bề ngang để bảng dễ đọc. */
  .pd-hero{
    display:grid;
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    gap:0;align-items:start;
  }
  /* Ảnh lớn trên, dải ảnh nhỏ NẰM NGANG bên dưới, rồi tới hàng chia sẻ.
     Trong HTML dải ảnh nhỏ đứng trước (cần thế để mã đơn giản), nên dùng
     `order` kéo nó xuống dưới ảnh lớn. */
  .pd-gallery{padding:28px;display:flex;flex-direction:column;gap:12px}
  .pd-info{padding:28px 28px 28px 8px}

  .pd-stage {order:1}
  .pd-thumbs{order:2}
  .pd-share {order:3}

  .pd-thumbs{
    display:flex;flex-direction:row;
    overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;
  }
  .pd-dots{display:none} /* desktop đã có dải ảnh nhỏ để biết đang ở tấm nào */

  /* Thanh mua cố định chỉ dành cho điện thoại */
  .pd-bar{display:none}
  body.yb-single-product .ft{padding-bottom:0}
  body.yb-single-product .yb-fab-cart,
  body.yb-single-product .zalo-float{display:flex}

  /* Bài mô tả chiếm trọn bề ngang: bảng thông số đã lên hero rồi */
  .pd-desc-grid{display:block}
}
/* ── Máy tính bảng (768–1023px) ──
   Bề ngang đã đủ cho hai cột nhưng chưa đủ để cột mua hàng thở. Thu hẹp
   khoảng đệm và cho cột ảnh nhỏ lại một chút, nếu không tên sản phẩm dài sẽ
   vỡ thành bốn dòng và nút mua bị bóp lại còn hai chữ mỗi dòng. */
@media(min-width:768px) and (max-width:1023px){
  .pd-hero{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
  .pd-gallery{padding:20px;gap:10px}
  .pd-info{padding:20px 20px 20px 4px}
  .pd-name{font-size:21px}
  .pd-price-now{font-size:27px}
  .pth{width:48px}
  .atcr>*{padding:13px;font-size:var(--fs-sm)}
  .pd-detail{padding:26px 0}
  .asc{gap:7px}
}

/* Sidebar hẹp lại 40px so với bản cũ (300 → 260): phần đó dồn cho lưới sản
   phẩm, mỗi card rộng thêm ~10px — vừa đủ để dòng giá không bị bẻ đôi. Bộ lọc
   là các checkbox ngắn nên 260px vẫn thoải mái. */
@media(min-width:1024px){
  .listing-wrap{grid-template-columns:260px 1fr}
}