/* ============================================================
   collection.css — Chỉ dùng cho bo-suu-tap-chi-tiet.html
   Section: cd-hero (dải ảnh lớn tràn viền) · cd-sub (bộ sưu tập con)
            · cd-products (sản phẩm trong bộ sưu tập)
   Nạp SAU common.css.
   Breadcrumb / page-head / collection-card / tile-card / pagination
   nằm trong common.css §15 — ở đây chỉ thêm phần riêng của trang.
   ============================================================ */

/* ===== 1 · DẢI ẢNH LỚN TRÀN VIỀN (trang 7–9 file thiết kế) =====
   Ảnh tràn hết chiều ngang viewport, không nằm trong .container.
   Bấm vào ảnh mở modal phóng to — hành vi do main.js/initLightbox lo,
   ở đây chỉ báo hiệu bằng con trỏ. */
.cd-hero { position: relative; }
.cd-hero__swiper,
.cd-hero .swiper-slide { height: clamp(300px, 48vw, 700px); }
.cd-hero .swiper-slide { background: var(--c-grey-light); }

/* Nút bọc quanh ảnh hero, KHÔNG đặt data-zoom thẳng lên .swiper-slide như bản
   cũ: slide là <div> chỉ nghe 'click' nên bàn phím không mở được ảnh phóng to
   (WCAG 2.1.1). Cũng không biến chính slide thành <button> — Swiper đo và ghi
   style thẳng lên thẻ slide, đổi thẻ là phá cách nó dựng dải. Nút nằm TRONG
   slide thì Swiper không quan tâm, mà vẫn có Enter/Space + focus ring sẵn.
   Trải hết khung slide để vùng bấm đúng bằng vùng ảnh như trước. */
.cd-hero__zoom {
  display: block; width: 100%; height: 100%; padding: 0;
  cursor: zoom-in;
}
.cd-hero__img {
  width: 100%; height: 100%; object-fit: cover;
  cursor: zoom-in;
}

/* Cụm nút tròn ở GÓC PHẢI DƯỚI ảnh hero (file thiết kế trang 7). Bản 30/07 tách
   hai nút ra hai mép trái–phải; client rà lại bản desktop 31/07 và yêu cầu về
   đúng PDF, nên quay lại cụm — cùng khuôn với .page-banner__nav (common.css
   §15.3) và .banner__ctrl (home.css).
   Lề phải rộng hơn lề dưới để không chồng lên dải nút liên hệ nổi
   (.group-contact) đang neo cố định bên phải màn hình. */
.cd-hero__nav {
  position: absolute; inset: auto 0 0 auto; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  /* Cận dưới 76px cho khớp .page-banner__nav (common.css §15.3) — dải nút liên
     hệ nổi chiếm đúng 62px từ mép phải, 62px ở đây cho khe 0. Lý do đầy đủ ở
     common.css. */
  padding-right: clamp(76px, 5.4vw, 86px);
  /* Cùng --banner-base với .page-banner__nav và .banner__ctrl: ba slider nằm
     trên ảnh của site cách mép dưới đúng một khoảng, kể cả khi hero này không
     có cụm chữ nào để canh cùng. */
  padding-bottom: var(--banner-base);
  pointer-events: none;
}
.cd-hero__nav .nav-btn { pointer-events: auto; }

/* Nút lùi/tiếp đứng TRÊN ảnh nên đảo sang kiểu viền trắng trong suốt thay cho
   nền trắng đặc mặc định của .nav-btn (common.css §6) — cùng một khuôn với
   .page-banner__nav (common.css §15.3) và .banner__ctrl (home.css), để mọi
   slider nằm trên ảnh của site chỉ có DUY NHẤT một kiểu nút.

   Phải khai đủ CẢ BA thuộc tính ở cả hai trạng thái: `.cd-hero__nav .nav-btn`
   là (0,2,0), đúng BẰNG `.nav-btn:hover` của common.css — hoà độ đặc hiệu thì
   file nạp sau thắng, mà collection.css nạp sau, nên thiếu thuộc tính nào là
   thuộc tính đó rơi về giá trị hover của common.css. */
.cd-hero__nav .nav-btn {
  background: transparent; border-color: rgba(255,255,255,.7); color: #fff;
}
.cd-hero__nav .nav-btn:hover {
  background: #fff; border-color: #fff; color: var(--c-ink);
}

/* ===== 2 · BỘ SƯU TẬP CON (biến thể A — trang 7) ===== */
/* Ảnh DỌC, không phải ngang (phản hồi client 31/07/2026: "cho ảnh dài ra như
   trong thiết kế"). File thiết kế trang 7 vẽ card ≈198×293 → xấp xỉ 2/3.

   Ghi đè tại đây chứ KHÔNG sửa .collection-card__media ở common.css: component
   đó còn dùng ở bo-suu-tap.html, bo-suu-tap-con.html, bo-suu-tap-phang.html,
   index.html và tim-kiem.html — nơi thiết kế vẫn vẽ card ngang 16/11. */
.cd-sub .collection-card__media { aspect-ratio: 2 / 3; }

.cd-sub__nav { margin-top: clamp(24px, 3vw, 34px); }

/* ===== 3 · SẢN PHẨM TRONG BỘ SƯU TẬP (biến thể B — trang 8 & 9) ===== */
.cd-products .sec-title { margin-bottom: 10px; }

/* ===== 4 · RESPONSIVE (1024 / 720 / 640) ===== */
@media (max-width: 1024px) {
  .cd-hero__swiper,
  .cd-hero .swiper-slide { height: clamp(280px, 52vw, 520px); }
}
/* ===== ẨN MŨI TÊN HERO Ở KHỔ CẢM ỨNG =====
   common.css §16 đã liệt `.cd-hero__nav` vào danh sách ẩn từ ≤720px, NHƯNG rule
   đó KHÔNG BAO GIỜ chạy: `@media` không cộng thêm độ đặc hiệu nào, nên
   `@media(max-width:720px){ .cd-hero__nav{display:none} }` của common.css vẫn chỉ
   là (0,1,0) — hoà với `.cd-hero__nav{display:flex}` không điều kiện ở §1 file
   này, và collection.css NẠP SAU nên `flex` thắng ở mọi khổ màn.
   Kết quả: suốt thời gian qua mobile vẫn hiện cặp mũi tên 38×38 mà không ai
   chủ ý, lại còn dưới ngưỡng chạm 44px.

   Khai lại ở ĐÂY mới dứt điểm: cùng file, cùng độ đặc hiệu, đứng sau rule §1.

   Vì sao ẩn là ĐÚNG (khác với .page-banner__nav vẫn giữ mũi tên): initSliderDots
   của main.js có gắn dãy chấm cho .cd-hero (đo được 3 chấm ở 375px), nên khổ cảm
   ứng đã có chỉ báo "vuốt được" rồi. .page-banner thì bị initSliderDots loại ra,
   không có chấm nào, nên mũi tên ở đó là chỉ báo DUY NHẤT và phải giữ. */
@media (max-width: 720px) {
  .cd-hero__nav { display: none; }
}

@media (max-width: 640px) {
  .cd-hero__swiper,
  .cd-hero .swiper-slide { height: clamp(240px, 62vw, 380px); }
}