/* ============================================================
   product-detail.css — Trang chi tiết sản phẩm gạch (trang 15 PA1-R6)
   Chỉ chứa style riêng của trang. Component dùng chung nằm ở
   common.css §15 (.page-banner · .breadcrumb · .gallery · .spec ·
   .tile-card · .btn · .nav-btn / .nav-group · .sec-head · .icon).
   ============================================================ */

/* ===== 1 · BANNER ==========================================
   Banner trang này KHÔNG có chữ đè lên → tắt lớp phủ tối của
   .page-banner để ảnh giữ nguyên độ sáng như thiết kế. */
.pd-banner::after { content: none; }

/* ẢNH PHỐI CẢNH GẦN TRÀN MÀN HÌNH. Phản hồi MONA R1 tr.2: "Khu vực ảnh phối cảnh cho
   to gần tràn màn hình, bấm vào hiện pop up ảnh như của web Tasa" (phần pop up
   do initLightbox() trong main.js lo, kích hoạt bằng [data-zoom] trên chính ảnh).

   Ghi đè CỤC BỘ chứ KHÔNG sửa token `--h-page-banner` ở common.css: token đó là
   chiều cao chung của .page-banner cho 7 trang con khác (Giới thiệu, Thư viện,
   Sản phẩm gạch, Thiết bị vệ sinh…) mà phản hồi không đụng tới. Đổi token là kéo
   cả 7 trang lên full màn hình theo.

   Cặp `82vh` → `82dvh` cùng lý do với banner trang chủ (home.css §1): `vh`
   trên trình duyệt điện thoại tính theo khung nhìn lớn nhất nên ảnh bị cao quá
   màn hình thật; dòng `82vh` đứng trước làm dự phòng cho trình duyệt cũ.

   82% CHỨ KHÔNG PHẢI 100%. Bản đầu của pass tr.2 để `100dvh` và client rà lại:
   "giảm height ảnh phối cảnh 1 chút… (thấy dc tên và mô tả sản phẩm)". Đo trên
   ảnh mẫu client gửi thì banner kết thúc ở ~82,7% chiều cao khung nhìn.

   `min()` chứ không phải một con số phần trăm trơn, vì yêu cầu thật nằm trong
   ngoặc: PHẢI thấy tên + mô tả sản phẩm. Đo được cụm dưới banner cao 162px
   (breadcrumb: đệm 26+26 + chữ 19 · tên SP + mô tả: ~85 + lề).

   HAI SỐ NÀY BỊ RÀNG BUỘC NGƯỢC CHIỀU NHAU — đừng chỉnh một cái mà quên cái kia:
   client sau đó xin "tăng size banner thêm 1 chút", nên trần nâng 82 → 88dvh và
   khoảng chừa hạ 190 → 175px. Chỉ nâng trần thôi thì KHÔNG có tác dụng gì trên
   laptop: ở màn cao 900–1080px nhánh `100dvh − chừa` mới là nhánh nhỏ hơn, tức
   là nhánh đang quyết định. Muốn banner cao thêm thật sự thì buộc phải bớt chỗ
   chừa. 175 = 162 vừa khít + 13px thở; đây là mức thấp nhất còn giữ được lời hứa
   "thấy tên + mô tả" mà chữ chưa dính sát mép màn.

   Trên màn cao, 88dvh nhỏ hơn nên nhánh đó quyết định; trên màn thấp (laptop
   800px, điện thoại xoay ngang 600px) thì `100dvh − 175px` nhỏ hơn và tự nhường
   đủ chỗ:
     1440 → min(1267, 1265) = 1265 (88%)   ·   1080 → min(950, 905) = 905 (84%)
      900 → min( 792,  725) =  725 (81%)   ·    800 → min(704, 625) = 625 (78%)
   Một con số phần trăm trơn chỉ đúng ở đúng một cỡ màn.

   Không đụng `--h-page-banner`: cùng lý do như trên. */
.pd-banner .page-banner__img {
  height: 88vh;
  height: min(88dvh, 100dvh - 175px);
  /* Không có dấu hiệu nào khác nói ảnh này bấm được — dải mũi tên bên cạnh lại
     dễ bị đọc nhầm thành "chỉ để lật ảnh". */
  cursor: zoom-in;
  /* Zoom chậm, dùng CHUNG @keyframes tl-ken với banner trang chủ (common.css
     §15.3) — cùng 1→1.08 trong 16s để hai trang cùng một nhịp, người xem chuyển
     từ trang chủ sang không thấy lệch. Ràng buộc "chạy vô hạn trên mọi ảnh, KHÔNG
     gắn theo .swiper-slide-active" áp dụng y hệt ở đây: banner này cũng là Swiper
     nhiều slide, gắn theo slide là dính lại đúng lỗi nhá zoom đã ghi ở common.
     Ảnh vẫn bấm mở popup bình thường trong lúc đang phóng. */
  animation: tl-ken 16s linear infinite alternate;
}

/* Nút điều hướng: CỐ Ý KHÔNG ghi đè gì ở đây.
   Bản trước tô nền trắng đặc cho dễ đọc trên ảnh sáng, nhưng client rà lại và
   yêu cầu về đúng kiểu viền trắng trong suốt như mọi slider khác nằm trên ảnh
   (.page-banner__nav ở common.css §15.3, .banner__ctrl ở home.css, .cd-hero__nav
   ở collection.css). Bỏ khối ghi đè là nút tự rơi về đúng kiểu chung đó —
   thêm lại bất kỳ `background`/`border-color` nào tại đây sẽ phá lại sự đồng bộ.

   Đổi lại, banner trang này tắt lớp phủ tối ở dòng trên nên viền trắng phải tự
   chống chọi với ảnh sáng — việc đó do lớp phủ CỤC BỘ ngay dưới lo. ĐỪNG tô đặc
   lại nút. */

/* Lớp phủ tối CỤC BỘ ở góc phải dưới, chỉ để nút viền trắng đọc được trên các
   slide sáng màu (hành lang travertine). Cố ý KHÔNG bật lại .page-banner::after:
   lớp đó phủ hết chiều ngang và dâng lên 68% chiều cao — đủ để dìm cả bức ảnh,
   trong khi chỗ cần tối chỉ là vùng quanh hai cái nút.

   PHẢI có `z-index: 2`: Swiper đặt `z-index: 1` cho `.swiper`, nên lớp phủ nào
   để `auto` cũng bị ảnh đè lên và mất tăm (đúng lỗi mà adhesive.css §2 đã ghi
   lại). Thứ tự đúng: ảnh (1) < lớp phủ (2) < nút (.page-banner__nav, 3).

   Kích thước tính theo `min()` với cả px lẫn %: màn hẹp thì lớp phủ co lại theo
   ảnh, màn rộng thì dừng ở 420×260 chứ không phình ra chiếm nửa banner. */
.pd-banner::before {
  content: ""; position: absolute; inset: auto 0 0 auto; z-index: 2;
  width: min(420px, 46%); height: min(260px, 42%);
  background: linear-gradient(to top left,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.14) 34%, rgba(0,0,0,0) 72%);
  pointer-events: none;
}

/* ===== 2 · KHỐI CHÍNH: GALLERY + THÔNG TIN ================= */
.pd-top { padding-bottom: clamp(36px, 5vw, 64px); }

.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* `.gallery__main` vuông nay là mặc định ở common.css §15.10 nên ghi đè
   `aspect-ratio: 1` ở đây đã xoá — nó chỉ lặp lại giá trị thừa hưởng. */
.pd-gallery { grid-template-columns: 84px minmax(0, 1fr); }
.pd-gallery .gallery__thumbs { align-content: start; }

/* --- Cột phải --- */
.pd-info { padding-top: clamp(0px, 1.5vw, 18px); }

/* --fs-h1/700 → --fs-h2/500 (phản hồi client 31/07/2026: "giảm font-size và
   font-weight tên sản phẩm"). Đo trên file thiết kế trang 15, mã sản phẩm cao
   ≈42px ở khổ 1440 và nét không đậm — --fs-h1 cho 52px/700 nên nó át cả tiêu đề
   section "Ứng dụng" ngay dưới, sai thứ bậc. */
/* 500 → 600 (phản hồi 30/07/2026: "tăng nhẹ font-weight tên sản phẩm") — đi kèm
   .adh-hero__name và .sanitary-detail__info h1, ba trang chi tiết cùng một cấp. */
.pd-code {
  font-size: var(--fs-h2);
  font-weight: var(--fw-ui);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.pd-brand {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.pd-spec { margin-top: clamp(20px, 2.6vw, 30px); }

/* ===== 3 · NÚT ỨNG DỤNG (icon tròn + tooltip đen) ========== */
.pd-uses {
  display: flex;
  /* 16px — đo khe giữa hai chip trên file thiết kế trang 15 (≈15px ở khổ 1440). */
  gap: 16px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.pd-use {
  position: relative;
  /* 54px, KHÔNG phải 44px. Đo lại trên file thiết kế trang 15 (30/07/2026):
     khung chip rộng đúng bằng 54px ở khổ 1440, bán kính bo 12px. Bản 44px cũ
     nhỏ hơn thiết kế một phần năm nên hai chip trông như hai nút phụ. */
  width: 54px;
  height: 54px;
  /* Vuông bo góc, KHÔNG phải tròn — file thiết kế trang 15 vẽ hai chip này là
     hình vuông bo mềm, khác hẳn .nav-btn tròn của slider. Giữ khác biệt đó thì
     người dùng không nhầm chip thông tin với nút điều hướng. */
  border-radius: 12px;
  /* --c-line-strong, cùng token với .btn-outline ("Tải catalog" / "Chia sẻ")
     ngay dưới. Thiết kế vẽ viền chip và viền hai nút đó BẰNG NHAU; --c-line
     (#e3e3e3) làm chip nhạt hơn hẳn cặp nút cùng cột. */
  border: 1px solid var(--c-line-strong);
  background: var(--c-white);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pd-use:hover { border-color: var(--c-primary); color: var(--c-primary); }
/* 42px: hình vẽ trong thiết kế cao ≈40px, tức chiếm ~3/4 khung 54px. Bản cũ để
   22px nên hai icon lọt thỏm giữa khung — đây chính là chỗ lệch thiết kế rõ
   nhất, không phải bản thân khung. */
.pd-use .icon { width: 42px; height: 42px; }

/* Tooltip đen hiện khi rê chuột / focus bàn phím */
.pd-use::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.pd-use:hover::after,
.pd-use:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Icon "Gạch lát" / "Gạch ốp" — vẽ HÀNH VI chứ không vẽ VẬT: dấu bàn chân
   (giẫm lên → lát sàn) và bàn tay xoè (sờ lên tường → ốp tường). Hai icon nói
   ngay khác biệt giữa hai loại gạch mà không cần đọc tooltip.

   VẼ LẠI 30/07/2026 theo đúng hình trong file thiết kế trang 15 (dò lại từ bản
   render 1600dpi của trang PDF). Bản trước chỉ là hai hình ellipse trơn và một
   bàn tay mũm mĩm — sai hẳn hình: thiết kế vẽ dấu chân kiểu ĐẾ GIÀY (mũi bàn
   chân hình giọt nước, cắt phẳng ở dưới, cộng miếng gót riêng nằm chéo phía
   dưới-trái) và bàn tay là MỘT đường viền liền (4 ngón + ngón cái).

   stroke-width 0.85 (không phải 1.7 như phần còn lại của bộ icon): hai icon này
   vẽ ở 42px thay vì ~22px, nên muốn nét dày ~1.4px như thiết kế thì phải giảm
   stroke trong viewBox 24 xuống một nửa. */
.ic-tile-floor { --ic: url(../icons/footprint.svg); }
.ic-tile-wall  { --ic: url(../icons/hand.svg); }

/* ===== 4 · NÚT TẢI CATALOG / CHIA SẺ ======================= */
.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 38px);
}
.pd-share-note {
  margin-top: 10px;
  min-height: 20px;
  font-size: var(--fs-xs);
  color: var(--c-primary);
}

/* ===== 5 · ỨNG DỤNG (4 minh hoạ đường nét) ================= */
.pd-apps__list { text-align: center; }
.pd-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* PHÓNG TO tiếp ~1.7× (phản hồi client 30/07/2026: "cho các hình chỗ này to hơn
   chút"). Lần trước đo được "≈174px ở khổ 1440" là đo lệch. Đo lại bằng cách
   render trang 15 của PDF ở 200dpi rồi quy đổi theo BỀ RỘNG CỘT NỘI DUNG (dải
   1294px render ↔ 1360px CSS ở khổ 1440):

     hình vẽ trong thiết kế rộng 210 · 257 · 197 · 228px render
     → 221 · 270 · 207 · 240px CSS, trung bình ≈234px

   PNG nguồn 288×192 có lề trắng, phần nét chỉ chiếm ~79.5% khung, nên khung
   .pd-app__ic phải là 234 / 0.795 ≈ 270px mới ra đúng cỡ nét của thiết kế.
   Kiểm chứng chéo: tỉ lệ nét/bước cột của thiết kế là 0.617, ở khổ 1440 bước
   cột là 346.5px → nét 214px → khung 269px. Khớp.

   Phóng to cũng là cách DUY NHẤT chữa được "nhạt". .icon vẽ PNG bằng CSS mask —
   thu nhỏ 3× thì nét rơi xuống dưới 1 device pixel và bị khử răng cưa thành
   alpha lỡ dở, ra màu xám nhạt thay vì --c-ink đặc. Không có opacity/filter nào
   chỉnh được, và ép đậm bằng `filter: contrast()` chỉ làm nét bết. */
.pd-app__ic {
  width: clamp(150px, 18.7vw, 270px);
  aspect-ratio: 3 / 2;
  height: auto;
  color: var(--c-ink);
}
.pd-app span { font-size: var(--fs-sm); color: var(--c-body); }

/* ===== 6 · SẢN PHẨM LIÊN QUAN ============================== */
.pd-related__nav { margin-top: clamp(24px, 3vw, 34px); }

/* ===== 7 · RESPONSIVE (1024 / 720 / 640) =================== */
@media (max-width: 1024px) {
  .pd-grid { gap: clamp(24px, 4vw, 44px); }
  .pd-gallery { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-info { padding-top: 0; }
}

@media (max-width: 720px) {
  /* BANNER TRÀN MÀN HÌNH — CHỈ Ở KHỔ NÀY.
     Feedback R2 tr.5 (đề mục ghi rõ "Bản điện thoại"): "Chỉnh khung phối cảnh
     cho tràn màn hình giống trang chủ" + "Banner ở trang sản phẩm khách muốn
     hiển thị dài giống Banner trang chủ". `100dvh` là đúng con số banner trang
     chủ đang dùng (home.css §1) nên hai trang khớp nhau tuyệt đối.

     CỐ Ý KHÔNG đụng rule gốc ở §1 — công thức `min(88dvh, 100dvh − 175px)` ở
     đó là kết quả của một vòng phản hồi TRƯỚC ("giảm height ảnh phối cảnh 1
     chút… thấy dc tên và mô tả sản phẩm"), và vòng đó đo trên desktop. Ghi đè
     toàn cục sẽ lật lại thoả thuận cũ ở khổ máy tính; chặn trong media query
     thì desktop giữ nguyên 88dvh, chỉ điện thoại tràn màn hình.

     Khoản "phải thấy tên + mô tả" của vòng cũ không mất ở đây: trên điện thoại
     cụm đó vốn đã nằm dưới màn đầu và người dùng cuộn tới, khác desktop nơi cả
     hai phải cùng lọt một khung nhìn.

     `100vh` đứng trước làm dự phòng cho trình duyệt không hiểu `dvh` — cùng lý
     do đã ghi ở §1 và ở home.css §1. */
  .pd-banner .page-banner__img {
    height: 100vh;
    height: 100dvh;
  }

  /* common.css §16 đổi .gallery thành 1 cột — giữ nguyên hành vi đó */
  .pd-gallery { grid-template-columns: minmax(0, 1fr); }
  /* Đừng hạ dưới ~110px: đó là ngưỡng mà nét của PNG nguồn bắt đầu mảnh hơn
     1 device pixel và lỗi "icon nhạt" quay lại đúng như trên desktop trước đây.

     `max-width: 100%` là bắt buộc, không phải khai thừa. Ghi chú cũ tính "150px
     vẫn vừa cột hẹp nhất (2 cột ở khổ 375 → cột 158px)" — đúng ở 375 nhưng
     KHÔNG đúng ở 320px (iPhone SE): cột lúc đó chỉ còn (320 − 32 − 26)/2 = 131px.
     Bề rộng cứng 150px trở thành cỡ min-content của ô lưới, `1fr` bị đẩy lên
     150px, cả hàng thành 150+26+150 = 326 > 288 → TRANG CHỦ ĐỘNG CUỘN NGANG ở
     320px (rà responsive R2 bắt được). Cho icon co theo cột thì ở 320px nó về
     131px — vẫn trên ngưỡng 110px nói trên. */
  .pd-app__ic { width: 150px; max-width: 100%; }
}

@media (max-width: 640px) {
  /* 4 ứng dụng vẫn xếp 2 cột cho gọn (common.css đưa .grid-4 về 1 cột).
     `minmax(0, 1fr)` chứ KHÔNG phải `1fr`: cỡ tối thiểu tự động của ô lưới là
     min-content, nên `1fr` trần vẫn phình theo nội dung cứng bên trong. Đây là
     nửa còn lại của bản sửa tràn ngang ở 320px (xem .pd-app__ic ngay trên). */
  .pd-apps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .pd-actions .btn { flex: 1 1 auto; }
}