/* ============================================================
   products-list.css — trang danh mục "Sản phẩm" (san-pham.html)

   NHỊP ĐO TỪ REF manubens.es/en/products/ (2026-08-03): lưới 3 cột
   THOÁNG — mỗi ô rộng ~397px, khe ~63px, ảnh sản phẩm nằm trên nền
   sáng, TÊN CANH GIỮA NẰM DƯỚI ảnh (không đè lên), hover chỉ đổi nền
   ô một sắc nhạt. Không viền, không thẻ, không dải tối, không nút.
   Bản trước của trang này là lưới vuông sát nhau 3px với tên đè trên
   gradient đen — đó là ngôn ngữ của .market-card trang chủ, đọc ra
   dày và tối hẳn so với ref.

   Token màu/chữ/motion lấy từ common.css. (Tên file khác product.css —
   file đó thuộc trang chi tiết san-pham-chi-tiet.html.)
   ============================================================ */

/* Cùng NHỊP RỘNG với header, footer và mọi section trang chủ (--maxw-wide
   1600 + --pad-wide), thay vì .container mặc định 1280.
   Trước đây trang này để .container mặc định nên thân trang thụt vào 320px so
   với chính cái header ngay phía trên nó — mắt đọc ra ngay là "trang con bị
   hẹp". Đây là lý do --maxw-wide tồn tại như một token: opt-in một dòng. */
.page-hero .container,
.m-plist .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}

.m-plist.section-pad{padding-top:clamp(32px,4.4vw,64px);}   /* nối page-hero */

/* KHE NGANG = 3px, ĐÚNG con số của 3 module trang chủ (khách chốt 2026-08-05:
   "gần như khoảng cách 3 modul ở home"). Cả site chỉ dùng MỘT khe hở giữa các
   ô ảnh — .m-markets__grid, .pband__grid, .marquee__track đều 3px, đo từ ref
   manubens. Nay lưới danh mục nhập vào cùng con số đó; đổi thì đổi cả bốn chỗ.

   Đường đi của bề rộng ảnh: 397px (bản ref ban đầu) → 466px → nay ~478px, nhờ
   .container 1600 + bỏ padding thẻ + khe co từ 63px xuống 3px.

   KHE DỌC KHÔNG theo 3px được: khác các ô trang chủ (tên đè LÊN ảnh), ở đây
   tên nằm DƯỚI ảnh, nên 3px sẽ dán tên hàng trên vào ảnh hàng dưới và mắt sẽ
   đọc tên đó thành nhãn của tấm ảnh bên dưới nó. Khe dọc vì thế phải đủ để
   cụm "ảnh + tên" đọc ra là một khối. */
.m-plist__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.4vw,52px) 3px;
}
/* KHÔNG padding, KHÔNG nền: padding + nền hover chính là thứ tạo ra "khung
   xám" mà khách muốn bỏ — nền sáng lên chỉ lộ ra ở đúng dải padding quanh
   ảnh, đọc thành một cái viền. Cử chỉ hover duy nhất giờ là PHÓNG ẢNH. */
.plist-card{display:block;text-decoration:none;padding:0;background:transparent;}
/* ⚠️ PHẢI CÓ, đừng gỡ: thuộc tính `hidden` (plist-page.js dùng để ẩn thẻ ngoài
   trang đang xem) chạy bằng rule `[hidden]{display:none}` của TRÌNH DUYỆT, mà
   `display:block` ở dòng trên là rule của TÁC GIẢ nên nó thắng. Thiếu dòng này
   thì phân trang "chạy" trong DOM (card.hidden = true) nhưng cả 9 thẻ vẫn hiện
   nguyên trên màn — lỗi chỉ thấy khi xem bằng mắt, đo bằng JS thì thấy đúng. */
.plist-card[hidden]{display:none;}

.plist-card__media{
  display:block;position:relative;overflow:hidden;aspect-ratio:1/1;
  background:var(--bg);border-radius:var(--radius-lg);
}
/* Ảnh CAO HƠN KHUNG 12% và thò đều hai đầu: phần thừa đó là quỹ đạo cho cú
   trôi thị sai khi cuộn (effects.js mục 11). Không có phần thừa thì tween
   yPercent sẽ kéo lộ mép trắng. */
/* LỚP PHÓNG — của riêng CSS. Phải là một phần tử RIÊNG, không phải chính thẻ
   <img>: GSAP 3.11+ ghi đè inline `translate:none;rotate:none;scale:none` lên
   mọi phần tử nó chạm tới, mà mục 11 effects.js thì chạm vào <img> để làm thị
   sai. Inline thắng stylesheet, nên hover đặt trên <img> bị nuốt IM LẶNG — kể
   cả khi viết bằng thuộc tính `scale` rời (đã thử, chính `scale:none` inline
   của GSAP đè lên). Tách một lớp bọc thì mỗi hệ sở hữu một phần tử, và cú
   phóng vẫn còn khi CDN GSAP hỏng — đúng tinh thần dự phòng của effects.js. */
.plist-card__zoom{
  position:absolute;inset:0;display:block;
  transform:scale(1);transition:transform .7s var(--ease);
}
.plist-card:hover .plist-card__zoom,
.plist-card:focus-visible .plist-card__zoom{transform:scale(1.08);}

/* height:112% khai TƯỜNG MINH, KHÔNG dùng cặp top:-6%/bottom:-6% để tự giãn:
   với phần tử thay thế (img, video) được định vị tuyệt đối, CSS §10.6.5 lấy
   chiều cao NỘI TẠI của ảnh rồi coi `bottom` là dư thừa và bỏ đi. Ảnh ở đây
   lại loading="lazy" nên lúc chưa giải mã chiều cao nội tại là 0 — cả lưới ra
   5 ô trắng. Quy tắc này chỉ đúng với phần tử thay thế; một thẻ <div> ở cùng
   vị trí thì cặp top/bottom lại giãn bình thường.
   Phần thừa 12% là quỹ đạo cho thị sai; GSAP giữ `transform` của thẻ này. */
.plist-card__media img{
  position:absolute;left:0;top:-6%;
  width:100%;height:112%;object-fit:cover;display:block;
}

/* Tên NẰM DƯỚI ảnh, canh giữa, chữ thường (không IN HOA): ref để tên sản
   phẩm ở giọng đọc bình thường vì chính tấm ảnh mới là thứ dẫn mắt. */
.plist-card__name{
  display:block;margin-top:clamp(14px,1.6vw,22px);text-align:center;
  /* CÙNG KHUÔN VỚI TIÊU ĐỀ THẺ TIN (khách 2026-09-07: "card tin tức, tên sản
     phẩm bold"): font chữ chạy + nét Bold, xem .ncard h3 trong news-list.css.
     Bốn call-site tiêu đề thẻ nay phải đổi cùng nhau — đây là cái thứ tư. */
  font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:var(--fs-h3);letter-spacing:var(--ls-heading);
  line-height:var(--lh-heading);color:var(--ink);
  transition:color .25s var(--ease);
}
.plist-card:hover .plist-card__name,
.plist-card:focus-visible .plist-card__name{color:var(--gold-deep);}
/* (Đã có một gạch chân quét dưới tên khi hover — khách bỏ 2026-08-05. Hover
   nay đúng HAI việc: phóng ảnh và đổi màu tên. Đừng thêm lại.) */

/* (.m-plist__note đã gỡ 2026-08-05: dòng chú thích "ảnh đang được chụp lại
   đồng bộ…" là do phía dựng site tự thêm, không phải nội dung khách duyệt.
   ĐỪNG tự viết thêm loại chữ xin lỗi / ghi chú nội bộ như vậy lên trang.) */

/* (Dải CTA đóng trang đã chuyển sang .cta-band trong common.css — cả ba trang
   con dùng chung một khối, không chép lại ở đây nữa.) */

/* ---- Responsive — cùng ngưỡng với .m-markets__grid ----------------- */
@media (max-width:1024px){
  .m-plist__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .m-plist__grid{grid-template-columns:1fr;gap:clamp(24px,6vw,36px);}
  .plist-card__media{aspect-ratio:4/3;}
}

/* Máy cảm ứng KHÔNG có trạng thái hover thật: ngón tay chạm vào là trình
   duyệt kẹt luôn :hover cho tới lần chạm kế tiếp, nên ảnh sẽ phóng to rồi
   nằm im — trông như lỗi render. Tắt hẳn, để lại đúng bản tĩnh. */
@media (hover:none){
  .plist-card:hover .plist-card__media img{scale:1;}
  .plist-card:hover .plist-card__name::after{transform:scaleX(0);}
}

/* (Bộ phân trang .plist-pager ĐÃ DỜI sang common.css 2026-08-19: từ lúc trang
   tin tức cũng dùng nó thì nó không còn là thành phần của riêng trang sản
   phẩm. tin-tuc.html KHÔNG nạp file này — để lại đây thì bộ nút bên đó hiện ra
   trần trụi, hai mũi tên xếp dọc.) */