/* ============================================================
   library.css — Chỉ dùng cho thu-vien.html
   Section: l-video · l-gallery · l-ebook
   Nạp SAU common.css.
   .ebook-card, .sec-title, .pill, .grid-4 nằm trong common.css §15 —
   ở đây chỉ thêm phần riêng của trang Thư viện.
   ============================================================ */

/* ===== 0 · TAB PANEL =====
   main.js ẩn panel bằng thuộc tính [hidden]. UA style `[hidden]{display:none}`
   bị `.grid-4{display:grid}` (author style) đè mất nên phải khai báo lại. */
[data-tab-panel][hidden] { display: none; }

/* ===== 1 · VIDEO GIỚI THIỆU — TRÀN VIỀN =====
   Không bo góc và không .container bọc ngoài (thu-vien.html §1): thiết kế trang
   22 vẽ video chạm hai mép màn hình. Bản 30/07 đặt nó trong .container với
   border-radius --r-md; client rà lại bản desktop 31/07 và báo layout sai.
   Bo góc ở đây sẽ phản tác dụng: một khối tràn viền mà bo góc thì hai góc trên
   hở ra nền trắng, đọc thành lỗi chứ không thành chủ ý. */
.l-video__frame {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--c-grey);
}
/* Phủ đen nhạt lên poster RỒI mới tới nút play (phản hồi client 30/07/2026).
   Trước đây nút tam giác trắng nằm thẳng trên ảnh showroom nền sáng nên gần như
   chìm; lớp phủ hạ độ sáng nền đủ để tam giác nổi mà ảnh vẫn đọc được. */
.l-video__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .3);
  pointer-events: none;
}
.l-video__poster { width: 100%; height: 100%; object-fit: cover; }

.l-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  /* Nới trần 78 → 112px (31/07/2026, cùng pass với video tràn viền). Khung video
     vừa rộng từ 1360px lên trọn 1440px, mà nút phát vẫn kẹt ở 78px nên nó tụt
     xuống còn 5,4% bề ngang — thiết kế trang 22 vẽ tam giác chiếm ~7,8%. Vùng
     bấm chính của cả mục mà bé hơn cái nút mũi tên slider ngay dưới thì sai thứ
     bậc. 7vw giữ nút co theo khung video thay vì đứng yên một cỡ. */
  width: clamp(56px, 7vw, 112px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  /* Thiết kế trang 22 chỉ có MỘT tam giác trắng đặc — không viền, không khung
     tròn. Độ tương phản trên poster sáng do drop-shadow lo: filter bám theo
     hình tam giác thật nên vẫn đọc được mà không phải vẽ thêm nền tối. */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.l-video__play .icon { width: 100%; height: 100%; }
.l-video__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6));
}

/* ===== 2 · DẢI ẢNH — SLIDER 2 ẢNH/KHUNG =====
   Swiper khởi tạo ở library.js. Bản masonry (CSS columns, catalog.css §5) đã gỡ
   31/07/2026 — thiết kế trang 22 vẽ slider chứ không phải lưới.

   Khác masonry ở một điểm cốt lõi: slide trong Swiper đều cao bằng nhau, nên
   ảnh PHẢI có aspect-ratio cố định + object-fit thay vì thả tự do theo tỉ lệ
   gốc. 16/10 khớp tỉ lệ đo được ở trang 22 và cũng là tỉ lệ chung nhất của 18
   file ảnh client cấp, nên phần lớn ảnh gần như không bị cắt. */
.l-gallery { padding-block: clamp(28px, 4vw, 52px); }
/* Ô là <button> nên phải gỡ nền/viền mặc định của nút. */
.l-gallery__item {
  display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 16 / 10;
  background: var(--c-grey-light);
  border-radius: var(--r-md); overflow: hidden; cursor: zoom-in;
}
.l-gallery__item img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}
.l-gallery__item:hover img { transform: scale(1.03); }
.l-gallery__item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

.l-gallery__nav { margin-top: clamp(22px, 2.6vw, 32px); }

/* ===== 3 · E-BOOK ===== */
.l-ebook .sec-title { margin-bottom: clamp(20px, 2.6vw, 30px); }
/* Cụm tab dùng .pill-group của common.css §6; ở đây chỉ lo khoảng cách dưới. */
.l-ebook .pill-group { margin-bottom: clamp(26px, 3.4vw, 40px); }
.l-ebook .grid-4 { row-gap: clamp(26px, 3vw, 38px); }
.l-ebook .ebook-card__name { display: block; line-height: 1.5; }
/* Bìa nhỏ lại (phản hồi client 31/07/2026: "chỉnh card nhỏ lại xíu"). Ở 1440 thì
   .grid-4 trong .container cho mỗi bìa ≈320px, còn thiết kế trang 22 đo được
   ≈267px. Chặn bề rộng ẢNH và căn giữa trong ô lưới, thay vì đổi số cột hay bóp
   .container: giữ nguyên lưới 4 cột thì hàng chữ bên dưới vẫn thẳng cột, và
   khổ hẹp không bị ảnh hưởng vì lúc đó ô lưới vốn đã hẹp hơn 268px. */
.l-ebook .ebook-card__media { max-width: 268px; margin-inline: auto; }

/* ===== 4 · RESPONSIVE (1024 / 720 / 640) ===== */
@media (max-width: 1024px) {
  .l-video__frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .l-video__frame { aspect-ratio: 4 / 3; }
  /* Cụm tab E-book có 3 nhãn dài ("Hồ sơ năng lực", "Chứng nhận") — thu viên
     thuốc lại cho ba nút xếp vừa hai dòng. Selector PHẢI bọc trong `.l-ebook`:
     bản trước khai trần `.pill-group .pill` nên rò sang mọi trang khác dùng
     chung file này lẫn cụm tab ở phần trên trang Thư viện. */
  .l-ebook .pill-group { --pill-gap: 8px; }
  .l-ebook .pill-group .pill { height: 36px; padding: 0 16px; font-size: var(--fs-xs); }

  /* Lưới e-book 2 cột do common.css §16/640 lo (`:has(> .ebook-card)`). */
}