/**
 * Vinpack — thẻ chứng nhận `.nl-certs` / `.nl-cert*` + lightbox phóng ảnh.
 *
 * TÁCH RA 30/09/2026 từ page-nangluc.css mục 8 (nguyên văn, kể cả chú thích)
 * để dùng chung cho: trang Năng lực doanh nghiệp và template Dịch vụ -
 * Landing. Markup: template-parts/global/cert-cards.php. Nạp ở
 * inc/enqueue.php theo đúng hai template đó; page-nangluc.css khai file này
 * làm dependency nên thứ tự cascade trên trang Năng lực giữ nguyên ý: rule
 * thẻ chứng nhận không đè/không bị đè bởi mục nào khác của page-nangluc.css.
 */

/* ============================================================
   8. Chứng nhận & kiểm định (.nl-certs) — luôn trong .nl-sec-alt, kèm
   lightbox RIÊNG cho mỗi thẻ
   ============================================================ */
.nl-certs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; max-width:960px; margin-inline:auto; }
.nl-cert{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
  /*
   * LUÔN hiện MẶC ĐỊNH (opacity:1). Hiệu ứng "hiện dần khi cuộn tới" đã
   * CHUYỂN sang GSAP + ScrollTrigger dùng chung toàn site (assets/js/
   * motion.js) — không còn gate-class .js-cert-anim/.show nữa: GSAP tự set
   * trạng thái ẩn bằng gsap.set() (inline style), CHỈ KHI đã tải được GSAP +
   * KHÔNG bật prefers-reduced-motion, cùng đúng hợp đồng suy giảm êm như
   * trước.
   */
  opacity:1;
  transition:box-shadow var(--dur-state) ease, border-color var(--dur-state) ease;
}
/* KHÔNG transform khi HOVER — xem chú thích đầu file ("VỀ TRANSFORM TRÊN
   .nl-cert"): tổ tiên transform sẽ biến thành khối chứa của lightbox
   position:fixed bên trong. GSAP animate transform CHO HIỆU ỨNG CUỘN lúc
   tải trang không phạm luật đó vì nó chỉ chạy MỘT LẦN rồi dừng hẳn ở
   transform:none, và lightbox luôn đóng lúc đó. */
.nl-cert:hover{ box-shadow:var(--sh-3); border-color:var(--cobalt); }

.nl-cert-img{
  aspect-ratio:3 / 4;
  background:var(--img-bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:var(--sp-5);
}
/*
 * object-fit:contain, KHONG phai cover — anh logo chung nhan (ISO/BRCGS...)
 * la anh ngang det (vi du 420x135, ti le ~3:1), khung nay lai cao (3/4).
 * cover ep anh ngang cao het chieu cao khung roi cat rong, phong to mot
 * manh nho cua logo va vo hat (git blame: bao cao nguoi dung kem anh chup
 * man hinh thay so bi cat vo va rang cua). Trang chu dung dung .cert-logo-img
 * {object-fit:contain} cho CUNG mot anh nay (home.css dong 1086) - noi nay
 * truoc do dung cover la khong nhat quan, khong phai chu y thiet ke.
 */
.nl-cert-img img{ width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.nl-cert:hover .nl-cert-img img{ transform:scale(1.04); }

.nl-cert-zoom{
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(0, 18, 145, .72);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--white);
  font-family:var(--font-head);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--dur-state) ease;
}

/*
 * `.nl-cert-seal` — icon giữ chỗ cho thẻ KHÔNG có logo (`.nl-cert--text`).
 * Feedback khách (21/08/2026): "thêm cái ảnh placeholder vào 2 cái box".
 * Đứng trong CÙNG khung `.nl-cert-img` (aspect-ratio 3/4, nền --img-bg) mà
 * biến thể --logo dùng cho <img> thật — hai biến thể cao bằng nhau ngay từ
 * layout, không cần mẹo margin:auto nào bù trừ nữa (xem rule đã XOÁ ở cuối
 * mục này). `color:var(--cobalt)` cho icon nổi trên nền --img-bg nhạt, cùng
 * tinh thần "cobalt = điểm nhấn thương hiệu" đã dùng cho .bt-media-fallback/
 * .cert-seal ở home.css. KHÔNG `:hover`/`:focus` nào ở đây — không phải nút,
 * không nhận tương tác.
 */
.nl-cert-seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--border);
  color:var(--cobalt);
}
/* :hover VÀ :focus-visible — nút chỉ hiện khi rê chuột trong mockup, nhưng một
   nút chỉ hiện với chuột là một nút KHÔNG bao giờ nhận được focus bàn phím một
   cách nhìn thấy được (nó vẫn trong thứ tự Tab, opacity không gỡ tab-index).
   Thêm :focus-within để bàn phím cũng thấy nút hiện ra. */
.nl-cert:hover .nl-cert-zoom,
.nl-cert:focus-within .nl-cert-zoom{ opacity:1; }
.nl-cert-zoom svg{ width:20px; height:20px; }

/*
 * ĐÃ XOÁ — `.nl-cert--text .nl-cert-body{ margin-block:auto }` (STT 5, đợt
 * phản hồi trước). Rule đó bù cho thẻ KHÔNG logo thiếu hẳn `.nl-cert-img`,
 * khiến chữ dính mép trên và để hở khoảng trống lớn bên dưới trong lưới cao
 * bằng nhau. Feedback khách (21/08/2026, "thêm cái ảnh placeholder vào 2 cái
 * box") bác bỏ chính tiền đề đó: `.nl-cert--text` giờ LUÔN có `.nl-cert-img`
 * (icon `.nl-cert-seal` thay logo thật, xem rule phía trên) — hai biến thể
 * cao bằng nhau tự nhiên ngay từ khung ảnh, không còn khoảng trống lệch nào
 * để bù bằng margin nữa. Giữ rule cũ lại sẽ là dead code câm lặng.
 */
.nl-cert{ display:flex; flex-direction:column; }

.nl-cert-body{ padding:var(--sp-5) var(--sp-5); text-align:center; }
.nl-cert-body h4{ font-size:17px; margin-bottom:7px; }
.nl-cert-note{ font-size:13.5px; color:var(--text-muted); line-height:1.6; }

/*
 * Lightbox — MỘT vỏ RIÊNG cho MỖI chứng nhận (certs.php, Task 5), không dùng
 * chung như mockup. `position:fixed` nên nằm ngoài luồng của `.nl-cert-img`
 * dù DOM nằm bên trong nó (miễn không tổ tiên nào mang transform — xem chú
 * thích đầu file).
 */
.nl-cert-lightbox-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0, 8, 40, .82);
  z-index:9998;
}
/* [hidden] tường minh — nền mờ mặc định `hidden`, UA lo display:none. */
.nl-cert-lightbox-backdrop[hidden]{ display:none; }

.nl-cert-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px var(--sp-5);
  opacity:0;
  visibility:hidden;
  /*
   * ĐỘ TRỄ HAI CHIỀU LỆCH NHAU — đúng khuôn `.nav-search-pop` (layout.css mục
   * 1b) mà certs.php đã cảnh báo trước. Mặc định (ĐÓNG): đợi hết animation ẩn
   * (var(--dur-state)) rồi mới visibility:hidden — cho phép opacity chạy hết
   * trước khi vỏ biến mất khỏi cây a11y/tab.
   */
  transition:opacity var(--dur-state) ease, visibility 0s linear var(--dur-state);
}
/*
 * MỞ (aria-hidden="false"): visibility:visible NGAY LẬP TỨC (độ trễ 0s), để
 * page-nangluc.js gọi .focus() cùng lượt thực thi vẫn nhận được — đợi hết
 * animation ở chiều này sẽ làm trình duyệt từ chối focus lúc vỏ còn
 * visibility:hidden.
 */
.nl-cert-lightbox[aria-hidden='false']{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-state) ease, visibility 0s linear 0s;
}

.nl-cert-lightbox-img{
  max-width:min(760px, 100%);
  max-height:74vh;
  border-radius:var(--r-card);
  box-shadow:var(--sh-4);
  object-fit:contain;
  display:block;
  margin-bottom:var(--sp-4);
}
.nl-cert-lightbox-cap{ color:var(--white); font-family:var(--font-head); font-weight:700; font-size:16px; text-align:center; }
.nl-cert-lightbox-close{
  position:absolute;
  top:var(--sp-5);
  right:28px;
  width:44px;
  height:44px;
  border-radius:var(--r-full);
  background:rgba(255, 255, 255, .14);
  border:0;
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur-micro) ease;
}
.nl-cert-lightbox-close:hover{ background:rgba(255, 255, 255, .28); }
.nl-cert-lightbox-close svg{ width:18px; height:18px; }

/* Responsive — chuyển từ page-nangluc.css mục 13 (cùng mốc 1180/600). */
@media (max-width:1180px){
  .nl-certs{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .nl-certs{ grid-template-columns:1fr; }
}