/* ============================================================
   product.css — trang chi tiết một nhóm sản phẩm (san-pham-chi-tiet.html)

   MỘT trang dùng chung cho cả năm nhóm: tên, tagline, câu dẫn, ba đoạn giới
   thiệu, sáu ô thông số, ảnh hero và danh sách "nhóm khác" do product-page.js
   điền từ ?sp=<slug> (nguồn: catalog.js + i18n.js).

   NHỊP LẤY TỪ REF (đo thật manubens.es/en/products/velvet-ribbon/ @1440px,
   2026-08-05) — bản trước dựng ba khối chữ 780px CANH GIỮA nối nhau, phẳng
   hơn ref hẳn một bậc. Nhịp đo được của ref:

     hero ảnh tràn viền 100vh, tên đè lên ảnh + tagline một chữ
     → câu dẫn IN HOA 32px rộng gần hết khung (1312px), KHÔNG hẹp
     → cặp ảnh tràn viền 958+478 (đúng 2fr 1fr)
     → cột chữ 632px canh giữa trang nhưng chữ CANH TRÁI
     → ảnh tràn viền cao 855px có thị sai
     → hàng lệch: hai ô vuông 478 + cột chữ 368 bên phải
     → dải CTA nền tối

   Hai điều dễ làm sai khi đọc ref:
   · cột chữ CANH TRÁI, không canh giữa. Canh giữa là nhịp trang giới thiệu
     (.m-story__narrow); trang sản phẩm ref đọc ra khác hẳn vì đây là văn bản
     kỹ thuật nhiều đoạn, canh giữa thì mắt mất mốc đầu dòng.
   · câu dẫn RỘNG, không hẹp. Nó là câu tuyên ngôn, không phải đoạn văn.

   Lớp ảnh tràn viền khai LẠI ở đây (không tái dùng .fb của about.css) vì mỗi
   trang chỉ nạp file CSS của mình; thông số để trùng nhau nên hai trang vẫn
   đọc ra một ngôn ngữ.
   ============================================================ */

/* ---- Nhịp RỘNG: cùng lề với header, footer và mọi section trang chủ ------
   Trước đây trang này để .container mặc định (--maxw 1280 + clamp(20px,5vw,48px))
   nên ở 1920px thân trang hẹp hơn CHÍNH CÁI HEADER ngay trên nó 256px — mắt
   đọc ra ngay là "trang con bị hẹp". Đây đúng lỗi mà products-list.css đã sửa
   cho trang danh mục; trang chi tiết chỉ là chưa được sửa theo.
   Đây là lý do --maxw-wide tồn tại như một token: opt-in một dòng. */
.pd-lead .container,
.pd-block .container,
.pd-sample .container,
.m-contact .container,
.cta-band .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}

/* Bề ngang cột chữ hẹp — khai MỘT chỗ để đoạn văn, bảng thông số và ghi chú
   luôn thẳng mép nhau. Ref đo 632px; khách chốt 2026-08-05 nới rộng thêm, nay
   860px (tiếng Việt có dấu nên cùng số ký tự thì dòng dài hơn tiếng Anh). */
/* +18% (khách 2026-09-07: "tăng width những cụm text khoảng 15-20%") */
:root{--pd-col:clamp(354px,73vw,1015px);}

/* ============ 1 · HERO ảnh tràn viền, tên đè lên ảnh ============ */
/* Khác .page-hero của các trang con khác (khối chữ trên nền trắng): ba trang
   ref đều mở bằng ẢNH chiếm gần hết màn hình, tên nằm trên ảnh. Khách chốt
   theo ref 2026-08-05. */
.pd-hero{
  position:relative;isolation:isolate;overflow:hidden;margin:0;
  min-height:clamp(460px,80vh,820px);
  display:grid;align-items:end;
  background:var(--dark);
}
/* Ảnh CAO HƠN KHUNG 12% và thò đều hai đầu 6% — phần thừa đó là quỹ đạo cho
   cú trôi thị sai khi cuộn (effects.js). Cùng cặp số với .plist-card__media và
   .fb--tall: sửa 6% ở đây mà quên sửa 4.5 trong effects.js là hở mép. */
.pd-hero__img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;
  object-fit:cover;display:block;z-index:-2;
}
/* Scrim hai tầng: một lớp phẳng kéo TOÀN ảnh tối đều, một lớp gradient dồn về
   đáy nơi chữ nằm. Cần cả hai vì kho ảnh hero không đều nhau — đo được độ sáng
   trung bình từ 30 đến 77/255 (xem assets/images/CREDITS-pexels.md), chỉ một
   lớp gradient thì tấm sáng nhất sẽ nuốt mất chữ trắng. */
.pd-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,.18) 100%),
    rgba(0,0,0,.16);
}
.pd-hero__inner{
  position:relative;width:100%;max-width:var(--maxw-wide);
  margin-inline:auto;padding:clamp(40px,7vw,96px) var(--pad-wide) clamp(36px,5.4vw,72px);
  text-align:center;
}
.pd-hero__kicker{
  display:inline-block;font-family:var(--font-display);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.22em;
  /* VÀNG cùng đợt với .page-hero__kicker (2026-09-07 tối): hero này nằm trên
     ẢNH TỐI nên dùng --gold-light (vàng nhạt, vai "gold trên nền tối") chứ không
     phải --gold như bản trên nền trắng. */
  text-transform:uppercase;color:var(--gold-light);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.pd-hero h1{
  font-size:var(--fs-display);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--white);margin:0 auto;max-width:18ch;
}
/* (.pd-hero__tag — tagline một chữ dưới tên nhóm — đã gỡ 2026-09-07 theo yêu
   cầu của khách, cả markup lẫn CSS. Khoá products.cat*.tag còn trong từ điển
   nhưng không phần tử nào dùng; đừng gắn lại.) */

/* ============ 2 · Câu dẫn IN HOA, RỘNG (2026-09-22: khách bỏ in hoa lúc còn
   Philosopher, rồi bật lại sau khi đổi sang SVN-Georgia — chữ hoa Georgia đọc
   tốt hơn). Giãn chữ nhẹ .02em cho chữ hoa serif thở. ============ */
.pd-lead{padding-block:clamp(48px,6.6vw,96px);background:var(--bg);}
.pd-lead p{
  max-width:1240px;margin-inline:auto;text-align:center;
  font-family:var(--font-display);font-size:var(--fs-h2);
  font-weight:var(--fw-medium);text-transform:uppercase;
  line-height:var(--lh-heading);letter-spacing:.02em;
  color:var(--heading);
}

/* ============ 3 · Ảnh tràn viền ============ */
/* Khối ảnh dùng lớp .fb / .fb--tall DÙNG CHUNG trong common.css (dời từ
   about.css sang 2026-08-05), KHÔNG khai lại ở đây. Lý do: khung 112%/-6% bên
   CSS và biên độ ±4.5% của effects.js mục 12 là một cặp số phải khớp nhau, chép
   ra bản thứ hai là sớm muộn lệch — và dùng lớp chung thì khối ảnh cao được
   thị sai sẵn, không cần thêm JS.
   Riêng cặp ảnh 2fr 1fr thì common.css không có (bản .fb--split cũ đã bị thay
   bằng .fb--trio ba ô đều nhau cho trang giới thiệu), nên khai ở đây — chỉ
   thêm phần LƯỚI, còn nền/object-fit vẫn thừa hưởng từ .fb img.

   Dải ảnh dưới câu dẫn nay là .fb--trio (BA ô bằng nhau, khách chốt
   2026-08-05) — cùng lớp và cùng khe 3px với section thị trường trang chủ, nên
   không còn quy tắc riêng nào cần khai ở đây. Bản trước là .pd-split 2fr/1fr
   dựng theo trang velvet-ribbon của ref; đã gỡ hẳn. */

/* ============ 4 · Khối chữ hẹp, chữ CANH TRÁI ============ */
.pd-block{padding-block:clamp(56px,8.5vw,128px);background:var(--bg);}
.pd-block--tint{background:var(--gray-100);}
/* Cột canh giữa trang, chữ CANH GIỮA (khách chốt 2026-08-05, thay canh trái
   kiểu ref): về đúng nhịp .m-story__narrow của trang giới thiệu, nên hai trang
   con đọc ra cùng một giọng. */
.pd-prose{max-width:var(--pd-col);margin-inline:auto;text-align:center;}
.pd-prose h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--heading);margin-bottom:clamp(16px,1.8vw,26px);
}
.pd-prose p{
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);
  margin:0 0 clamp(12px,1.3vw,18px);
}
.pd-prose p:last-child{margin-bottom:0;}
/* Biến thể SIẾT cho khối thông số: ở đó .pd-prose chỉ còn mỗi tiêu đề (đoạn
   dẫn đã gỡ), nên khoảng hở 26px xuống bảng đọc ra như một lỗ trống. */
.pd-prose--tight h2{margin-bottom:0;}

/* ============ 5 · Bảng thông số ============ */
/* Kẻ ngang mảnh thay vì khung ô đủ bốn phía: bảng chỉ hai cột, kẻ kín sẽ đọc
   ra như một cái lưới. Thẳng mép với .pd-prose ở trên nhờ dùng chung --pd-col. */
/* Bảng giữ text-align:left dù khối chữ quanh nó canh giữa: bảng hai cột mà
   canh giữa từng ô thì nhãn và giá trị không còn mép chung nào để mắt bám. */
.pd-specs{
  max-width:var(--pd-col);margin:clamp(20px,2.4vw,34px) auto 0;
  border-collapse:collapse;width:100%;text-align:left;
}
.pd-specs th,
.pd-specs td{
  padding:clamp(11px,1.15vw,15px) 4px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-body);line-height:var(--lh-body);vertical-align:top;
}
/* NHÃN IN ĐẬM (khách chốt 2026-09-07): cột trái là nhãn, cột phải là giá trị —
   hai cột cùng một nét thì bảng đọc ra như hai danh sách rời. */
.pd-specs th{
  width:38%;font-weight:var(--fw-bold);color:var(--heading);
  font-family:var(--font-display);letter-spacing:.01em;
}
.pd-specs td{color:var(--gray-700);}
/* Ô CHƯA có dữ liệu: gạch ngang xám nhạt — nhìn là biết "chưa điền", khác hẳn
   ô trống trơn (đọc ra như lỗi hiển thị). Từ 2026-08-05 mọi ô đều được
   product-page.js điền và GỠ class này; rule giữ lại cho nhóm nào sau này thêm
   vào mà chưa kịp có số. ⚠️ Nội dung ::after hiện BẤT KỂ ô có chữ hay không —
   điền chữ mà quên gỡ class là ra "20mm—". */
.pd-specs .is-tbd::after{content:"—";color:var(--gray-200);font-size:var(--fs-h4);}
.pd-note{
  max-width:var(--pd-col);margin:clamp(14px,1.6vw,22px) auto 0;text-align:left;
  font-size:var(--fs-meta);color:var(--gray-500);
}

/* ============ 6 · Ứng dụng: MỘT ảnh lớn + cột chữ ============ */
/* Nhịp của trang ref herringbone-tape: ảnh chiếm 2/3 bề ngang, cột chữ 1/3
   canh giữa theo chiều dọc bên phải (khách chốt 2026-08-05, thay hàng lệch hai
   ô vuông kiểu trang velvet-ribbon). Nằm thẳng trong <main> như các khối ảnh
   nên ảnh chạm mép trái màn hình.
   Nền cột chữ TRẮNG, không phải xám: ref để trắng, và khối ngay dưới
   (.pd-block "nhóm sản phẩm khác") cũng trắng nên xám ở đây tạo một dải cắt
   ngang không có lý do. */
.pd-showcase{
  display:grid;grid-template-columns:2fr 1fr;
  gap:0;background:var(--bg);align-items:stretch;
}
/* Bỏ aspect-ratio 1/1: ô ảnh nay rộng 2/3 màn: giữ vuông là cao gần 1000px ở
   1440. Chiều cao khai thẳng, cùng thang với .fb--tall. */
.pd-showcase__media{
  position:relative;overflow:hidden;
  min-height:clamp(320px,42vw,600px);
}
.pd-showcase__media img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;
  object-fit:cover;display:block;background:var(--gray-100);
}
.pd-showcase__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.6vw,60px) clamp(22px,3.4vw,64px);
  background:var(--bg);
}
/* --fs-h2 CHỨ KHÔNG --fs-h3 (khách 2026-09-07: "cùng style tiêu đề như Thông
   số kỹ thuật"). Hai khối này đứng liền nhau trên trang, lệch một bậc cỡ chữ
   thì "Ứng dụng" đọc ra như tiêu đề con của bảng thông số ở trên. */
.pd-showcase__body h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--heading);margin-bottom:clamp(12px,1.4vw,20px);
}
.pd-showcase__body p{
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);margin:0;
}

/* Danh sách tick MỘT cột ở đây (trang cũ để hai cột): cột chữ chỉ rộng ~370px,
   chia đôi nữa thì mỗi nhãn xuống ba dòng. */
.pd-uses{
  display:grid;gap:10px;
  margin:clamp(18px,2.2vw,30px) 0 0;padding:0;list-style:none;text-align:left;
}
.pd-uses li{
  position:relative;padding-left:26px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-700);
}
.pd-uses li::before{
  content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;
  border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(-45deg);
}

/* ============ 7 · Dải "nhận bảng mẫu" — nền tối ============ */
/* Khối "DOWNLOAD OUR SAMPLE" của ref: nền gần đen, một câu in hoa, một nút.
   Đây là khối TỐI DUY NHẤT trong thân trang, cố ý — nó chặn mạch trắng/xám
   ngay trước khối liên hệ và làm cái nút nổi hẳn lên.
   Dùng --dark (cùng màu nền footer) chứ không phải #27282A của ref: giữ bảng
   màu nhà, và nhờ vậy dải này nối liền mạch xuống footer. */
/* NỀN ẢNH (khách 2026-09-07) thay nền --dark đặc. Ảnh + scrim nằm dưới, nội
   dung nâng lên z-index:2. isolation để scrim không leo ra ngoài section. */
.pd-sample{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);padding-block:clamp(56px,7.5vw,112px);
}
.pd-sample__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Cùng cặp số với .pd-hero__scrim và .fb--overlay: 24% → 66%. Đây là thông số
   ĐÃ ĐO tương phản cho chữ trắng đè ảnh — đừng làm nhạt đi cho "thoáng". */
.pd-sample__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,44,96,.24) 0%,rgba(34,44,96,.66) 100%);
}
.pd-sample__inner{position:relative;z-index:2;max-width:var(--cta-col);margin-inline:auto;text-align:center;}
/* Khối CTA vừa là .container (lề rộng) vừa là cột chữ hẹp. Rule nhịp rộng ngay
   đầu file có đặc hiệu (0,2,0) nên nó ĐANG thắng và kéo cột chữ ra 1600px —
   đó là lý do khối này thấp hơn .cta-band ở các trang khác. Hai selector dưới
   (0,3,0) trả cột chữ về --cta-col mà vẫn giữ nguyên lề rộng. */
.pd-sample .container.pd-sample__inner,
.cta-band .container.cta-band__inner{max-width:var(--cta-col);}
.pd-sample h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--white);margin-bottom:clamp(12px,1.4vw,20px);
}
.pd-sample p{
  font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--footer-text);margin:0;
}
/* `p.` là BẮT BUỘC, không thừa — cùng cái bẫy đã cắn .cta-band__btn hai lần
   (xem common.css): nút là một thẻ <p> nên nó cũng khớp `.pd-sample p` ở trên,
   mà selector đó đặc hiệu hơn (0,1,1 so với 0,1,0) VÀ dùng `margin` rút gọn,
   nên nó đặt lại margin-top về 0. Viết `.pd-sample p.pd-sample__btn` mới thắng. */
.pd-sample p.pd-sample__btn{margin-top:clamp(24px,3vw,40px);}

/* ============ 8 · "Nhóm sản phẩm khác" ============ */
/* BỐN cột, không phải năm: catalog có 5 nhóm và lưới luôn BỎ nhóm đang xem
   (product-page.js), nên số thẻ render ra luôn đúng bằng 4. Để 5 cột thì ô thứ
   năm rỗng vĩnh viễn — lưới đọc ra như thiếu mất một sản phẩm. */
/* Tiêu đề chạy hết bề ngang container, KHÔNG bó vào --pd-col như .pd-prose —
   nhưng CANH GIỮA cho khớp mọi tiêu đề khác của trang từ 2026-08-05. Để canh
   trái thì nó là tiêu đề lệch duy nhất trên trang, mắt đọc ra như lỗi. */
.pd-more__head{max-width:none;text-align:center;}
.pd-more__head h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--heading);margin:0;
}
/* KHE GIỐNG .m-plist__grid của trang danh mục (khách 2026-09-07: "card sản
   phẩm sát lại nhau"): cột chỉ cách 3px để bốn tấm ảnh đọc ra là một dải, còn
   khe dọc vẫn rộng vì tên nằm DƯỚI ảnh và cần tách khỏi hàng kế.
   ⚠️ Hai lưới này phải đổi cùng nhau — xem .m-plist__grid trong
   products-list.css. */
.pd-more__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(30px,3.4vw,52px) 3px;
  margin-top:clamp(28px,3.4vw,48px);
}
.pd-more__card{display:block;text-decoration:none;}
.pd-more__media{
  display:block;overflow:hidden;aspect-ratio:1/1;background:var(--bg);
  border-radius:var(--radius-lg);
}
.pd-more__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:scale .6s var(--ease);
}
/* Phóng bằng THUỘC TÍNH `scale` rời, KHÔNG bằng transform:scale(): effects.js
   ghi transform lên thẻ này khi dựng hiệu ứng vào khung, hai bên dùng chung
   một thuộc tính thì bên nào ghi sau sẽ xoá bên kia — im lặng, không báo lỗi.
   Cùng lý do đã ghi ở .plist-card__media trong products-list.css. */
.pd-more__card:hover .pd-more__media img,
.pd-more__card:focus-visible .pd-more__media img{scale:1.04;}
/* Cỡ chữ ĐÚNG BẰNG .plist-card__name của trang danh mục (--fs-h3, không phải
   --fs-meta 13px): đây là cùng một thứ — tên một nhóm sản phẩm nằm dưới ảnh —
   nên hai trang phải đọc ra cùng một cỡ. Khách báo 2026-08-05 "tên sản phẩm bị
   nhỏ"; 13px cạnh ô ảnh ~300px đúng là teo hẳn đi. */
.pd-more__name{
  display:block;margin-top:clamp(14px,1.6vw,22px);text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-heading);
  font-size:var(--fs-h3);letter-spacing:var(--ls-heading);
  line-height:var(--lh-heading);
  color:var(--ink);transition:color .25s var(--ease);
}
.pd-more__card:hover .pd-more__name,
.pd-more__card:focus-visible .pd-more__name{color:var(--gold-deep);}

/* ============ Responsive ============ */
@media (max-width:1024px){
  /* Ảnh lên trên, chữ xuống dưới: giữ 2fr/1fr ở khổ này thì cột chữ chỉ còn
     ~300px và mỗi dòng gãy làm ba. */
  .pd-showcase{grid-template-columns:1fr;}
  .pd-showcase__media{min-height:clamp(260px,46vw,420px);}
  .pd-uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(20px,2.4vw,36px);}
  /* (.m-contact__grid, .contact-form__row và .fb--trio KHÔNG khai lại ở đây:
     cả ba đã có quy tắc responsive trong common.css và trang này nạp common.
     Chép lại là tạo ra bản thứ hai để lệch.) */
}
@media (max-width:900px){
  .pd-more__grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .pd-hero{min-height:clamp(400px,68vh,560px);}
  .pd-uses{grid-template-columns:1fr;}
  .pd-more__grid{grid-template-columns:repeat(2,1fr);}
  /* Cột nhãn co lại: ở khổ này 38% chỉ còn ~120px, nhãn dài xuống 3-4 dòng. */
  .pd-specs th{width:46%;}
}