/* ============================================================
   adhesive.css — dùng cho 3 trang:
     · san-pham-khac.html            (body.page-other)          — trang 10 thiết kế
     · keo-dan-gach.html             (body.page-adhesive)       — trang 11
     · keo-dan-gach-chi-tiet.html    (body.page-adhesive-detail)— trang 12
   Nạp SAU common.css.
   Card (.tile-card / .plain-card), .gallery, .spec, .breadcrumb, .page-banner…
   nằm trong common.css §15 — ở đây chỉ bổ sung phần riêng của 3 trang này.
   ============================================================ */

/* ============================================================
   1 · SẢN PHẨM KHÁC (trang 10)
   ============================================================ */
.other-list { padding-bottom: var(--sp-section); }

/* `.plain-card` là thẻ <a>: trong .grid-2 nó đã được blockify, nhưng khai báo
   tường minh để card vẫn đúng khi dùng ngoài lưới. */
.plain-card { display: block; }

/* Tên nhóm sản phẩm ở trang này lớn hơn card mặc định (trang 10 thiết kế) */
.page-other .plain-card__name { font-size: clamp(20px, 2.1vw, 24px); }

/* ============================================================
   2 · KEO DÁN GẠCH — DANH SÁCH (trang 11)
   ============================================================ */
/* Banner đầu trang chạy bằng Swiper (3 slide theo 3 nhóm ứng dụng).
   Swiper đặt `z-index: 1` cho `.swiper` → sẽ đè lên lớp phủ tối `.page-banner::after`.
   Trả về `auto` để thứ tự chồng lớp giữ đúng: ảnh < lớp phủ < chữ. */
.adh-banner .swiper { z-index: auto; }
.adh-banner .swiper-slide { position: relative; }

.adh-list { padding-bottom: var(--sp-section); }
/* Nhãn ở đây là tên sản phẩm dài (không phải mã gạch ngắn) nên hạ cỡ chữ một bậc */
.page-adhesive .tile-card__code { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; }

/* ============================================================
   3 · KEO DÁN GẠCH — CHI TIẾT (trang 12)
   ============================================================ */

/* --- 3.1 Ảnh sản phẩm + thông tin --------------------------- */
.adh-hero { padding-bottom: clamp(40px, 6vw, 72px); }
/* 1fr 1fr → 45fr 55fr (phản hồi 31/07/2026: "giảm width cụm chi tiết bên trái,
   sao cho ảnh sản phẩm là hình vuông"). Hai yêu cầu này là MỘT phép tính, không
   phải hai chỉnh sửa rời: cột trái = 92px thumb + 14px gap + ảnh chính, nên khi
   `.gallery__main` chuyển sang vuông (common.css §15.10) thì chiều CAO của ảnh
   bị bề RỘNG cột trái quyết định. Giữ 1fr thì ở khổ 1440 ảnh ra ~547px vuông,
   cao hơn 4/3 cũ tới ~120px và đẩy cụm thông số bên phải nổi lên lửng lơ giữa
   một cột trắng. 45fr đưa ảnh về ~487px — vuông, mà tổng chiều cao cột trái xấp
   xỉ bản 4/3 nên hai cột vẫn kết thúc gần ngang nhau.
   Dùng `minmax(0, …)` như .pd-grid và .sanitary-detail__top: thiếu nó thì cột
   grid lấy min-content của ảnh làm sàn và không co xuống được ở khổ hẹp. */
.adh-hero__grid {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}

/* --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"), rồi 500 → 600 (phản hồi 30/07/2026: "tăng nhẹ
   font-weight tên sản phẩm") — hạ một nấc thì tên đọc ra nhẹ quá so với khối
   thông số ngay dưới. Giữ --fs-h2, chỉ nhích nét đậm.
   Cùng thang với .pd-code (product-detail.css) và .sanitary-detail__info h1 để
   ba trang chi tiết đọc ra cùng một cấp bậc — sửa một cái phải sửa cả ba. */
.adh-hero__name {
  font-size: var(--fs-h2); font-weight: var(--fw-ui);
  letter-spacing: -.02em; line-height: 1.15;
}
.adh-hero__brand { margin: 8px 0 22px; font-size: var(--fs-sm); color: var(--c-muted); }
.adh-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 34px);
}

/* --- 3.2 Cách dùng + Hướng dẫn thi công --------------------- */
.adh-guide { padding-bottom: clamp(40px, 6vw, 72px); }
.adh-guide__grid { gap: clamp(28px, 4vw, 64px); }
/* --fs-h2 (40px) → --fs-h3 (26px), phản hồi client 31/07/2026: "tiêu đề Cách
   dùng, Hướng dẫn thi công nhỏ lại BẰNG Tài liệu và chứng nhận".
   Ba tiêu đề này là ba mục ngang hàng nhau trong cùng trang chi tiết, mà
   .adh-docs__title ("Tài liệu và chứng nhận") vốn đã là --fs-h3 — để hai cái
   đầu ở --fs-h2 thì cùng một cấp nội dung lại vẽ ra hai cấp thị giác. */
.adh-guide__title {
  font-size: var(--fs-h3); font-weight: var(--fw-title);
  letter-spacing: -.01em; margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* Danh sách gạch đầu dòng — cấp 1 dấu chấm tròn, cấp 2 dấu cộng (trang 12) */
.adh-bullets { display: grid; gap: 8px; font-size: var(--fs-body); }
.adh-bullets > li { position: relative; padding-left: 18px; }
.adh-bullets > li::before {
  content: "•"; position: absolute; left: 0; top: 0; color: var(--c-body);
}
.adh-bullets__sub { display: grid; gap: 8px; margin-top: 8px; }
.adh-bullets__sub > li { position: relative; padding-left: 18px; }
.adh-bullets__sub > li::before {
  content: "+"; position: absolute; left: 0; top: 0; color: var(--c-body);
}

/* Danh sách đánh số 1–4, số nằm cột riêng để phần chữ luôn thẳng hàng */
.adh-steps { counter-reset: adh-step; display: grid; gap: 12px; font-size: var(--fs-body); }
.adh-steps > li {
  counter-increment: adh-step;
  display: grid; grid-template-columns: 38px 1fr; align-items: start;
}
.adh-steps > li::before { content: counter(adh-step) "."; color: var(--c-body); }

/* Ảnh minh hoạ dưới cột "Cách dùng" (thiết kế ghi: ảnh đăng kèm nếu có).
   Nay là thẻ `img`: khung 5/2 (16/9 ở mobile) nên phải cover để không kéo méo. */
.adh-figure {
  display: block; width: 100%; height: auto;
  margin-top: clamp(24px, 3.2vw, 40px);
  aspect-ratio: 5 / 2; border-radius: var(--r-sm);
  background: var(--c-grey-light); object-fit: cover;
}

/* Bộ 8 hình minh hoạ các bước thi công — lưới 4 cột × 2 hàng như thiết kế */
.adh-steps__figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: clamp(24px, 3.2vw, 40px);
}
/* Tám ô hình cắt từ lưới 4x2. Bản webp cũ còn ~10% lề trắng thừa quanh khung
   vẽ nên viền đen ô số 1 lùi vào trong so với chữ "Hướng dẫn thi công" và các
   bước 1–4 ở trên; đã cắt sát viền và chuẩn hoá cả 8 ảnh về 424×360, vì vậy
   aspect-ratio ở đây phải khớp 424/360 chứ không còn 4/3. */
.adh-steps__fig {
  display: block; width: 100%; height: auto; aspect-ratio: 424 / 360; border-radius: 6px;
  background: #fff; object-fit: contain;
}

/* --- 3.3 Tài liệu và chứng nhận ----------------------------- */
.adh-docs { padding-bottom: clamp(40px, 6vw, 72px); }
.adh-docs__box {
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
}
.adh-docs__title {
  font-size: var(--fs-h3); font-weight: var(--fw-title);
  margin-bottom: clamp(16px, 2vw, 22px);
}
/* Hàng tài liệu nằm ngang (thiết kế trang 12). `1fr` chứ không phải cột cố
   định: hiện chỉ có 4 file quét trong assets, thiết kế vẽ 5 tờ — khi có tờ thứ
   năm chỉ cần thêm thẻ img, hàng tự chia lại chứ không phải sửa CSS. */
.adh-docs__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px); align-items: start;
}
/* Tài liệu khổ A4 — contain để không cắt mất mép văn bản; con trỏ phóng to
   vì mỗi ảnh có [data-zoom] mở modal của main.js. */
.adh-doc {
  display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; border-radius: 6px;
  background: #fff; object-fit: contain; cursor: zoom-in;
  border: 1px solid var(--c-line);
  position: relative; transform-origin: center;
  transition: transform var(--dur-media) var(--ease), box-shadow var(--dur-media) var(--ease);
}
/* Rê chuột thì tờ đó phóng to đè lên hai tờ bên cạnh — đúng như thiết kế vẽ tờ
   thứ năm to hơn hẳn và tràn ra ngoài hàng. Chỉ bật ở thiết bị có chuột thật:
   `hover: hover` để trên điện thoại ảnh không dính trạng thái phóng to sau khi
   chạm (ở đó [data-zoom] mở modal đã đủ). */
@media (hover: hover) {
  .adh-doc:hover {
    transform: scale(1.28); z-index: 2;
    box-shadow: 0 18px 44px rgb(0 0 0 / .18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .adh-doc { transition: none; }
}

/* --- 3.4 Sản phẩm liên quan --------------------------------- */
/* --fs-h3 chứ KHÔNG --fs-h2: file thiết kế trang 12 vẽ CẢ BỐN tiêu đề của trang
   này — Cách dùng · Hướng dẫn thi công · Tài liệu và chứng nhận · Sản phẩm liên
   quan — cùng một cỡ. Bản 31/07 đầu tiên chỉ hạ ba cái đầu và giữ cái này ở
   --fs-h2 với lý do "nó ngang hàng .sec-head h2 của cả site"; đối chiếu lại PDF
   thì sai — để 40px cạnh ba tiêu đề 26px là nó vọt hẳn lên một cấp không có
   trong thiết kế.
   Trang chi tiết gạch (15) thì NGƯỢC LẠI: ở đó "Ứng dụng" và "Sản phẩm liên
   quan" đúng là tiêu đề lớn, nên .sec-head h2 bên common.css giữ nguyên --fs-h2. */
.adh-related__title {
  font-size: var(--fs-h3); font-weight: var(--fw-title);
  letter-spacing: -.01em; margin-bottom: clamp(20px, 2.6vw, 30px);
}
.adh-related__nav { margin-top: clamp(24px, 3vw, 34px); }
.page-adhesive-detail .tile-card__code { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; }

/* ============================================================
   4 · RESPONSIVE (1024 / 720 / 640)
   ============================================================ */
@media (max-width: 1024px) {
  .adh-hero__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
}
@media (max-width: 720px) {
  /* Bốn/năm tờ A4 cạnh nhau trên điện thoại thì chữ nhỏ như hạt vừng — chuyển
     hàng ngang thành dải cuộn, mỗi tờ chiếm 42% bề ngang và snap vào mép. */
  .adh-docs__row {
    grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 4px; scrollbar-width: thin;
  }
  .adh-docs__row > * { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  /* 8 hình thi công xếp 2 cột cho vừa bề ngang điện thoại */
  .adh-steps__figures { grid-template-columns: repeat(2, 1fr); }
  .adh-figure { aspect-ratio: 16 / 9; }
  .adh-hero__actions .btn { flex: 1 1 auto; }
}