/* SAPAMEFA GÓI 04 — Certification route (gallery redesign). Page Hero owned by sapamefa-hero.css. */
.sapamefa-cert-page{font-family:var(--smf-font-sans);color:var(--smf-color-text);background:var(--smf-color-surface);overflow-x:hidden;}
.sapamefa-cert-page *{box-sizing:border-box;}
.sapamefa-cert-page .iso-container,.cert-container{width:min(var(--smf-container-content),calc(100% - var(--smf-gutter) * 2));margin-inline:auto;}
.cert-row{padding-block:var(--smf-section-standard);}

/* ===== KHỐI GIỚI THIỆU — 2 cột: hình nhà máy (trái) + card thông tin (phải) =====
   Layout cũ (cert-visual / cert-chip / cert-points / cert-intro__head heading lớn) đã gỡ khỏi DOM, không còn CSS. */
.cert-intro{display:grid;grid-template-columns:1fr;gap:var(--smf-space-6);align-items:stretch;}
.cert-intro__media{margin:0;border-radius:var(--smf-radius-feature);overflow:hidden;background:var(--smf-color-surface-soft);}
.cert-intro__media picture{display:block;width:100%;height:100%;}
.cert-intro__media img{display:block;width:100%;height:auto;object-fit:cover;object-position:center;}
.cert-intro__body{display:flex;flex-direction:column;min-width:0;}
.cert-intro__desc{margin:0 0 var(--smf-space-6);color:var(--smf-color-deep);font-size:var(--smf-font-size-md);font-weight:var(--smf-font-weight-regular);line-height:var(--smf-line-body);}

/* Card thông tin duy nhất — nền dùng ĐÚNG token của section ISO 13485 (.sapamefa-corporate-section--brand
   = --smf-color-light), KHÔNG dùng xám nhẹ, KHÔNG hardcode, KHÔNG gradient, không ảnh hưởng section khác
   (token dùng chung, không đổi giá trị). Border/radius/shadow tái sử dụng token hiện hành. */
.cert-card{margin-top:auto;padding:var(--smf-space-7) var(--smf-space-6);border:var(--smf-border-width-hairline) solid var(--smf-color-border);border-radius:var(--smf-radius-feature);background:var(--smf-color-light);box-shadow:var(--smf-elevation-flat);}
.cert-card__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--smf-space-3);margin-bottom:var(--smf-space-5);padding-bottom:var(--smf-space-4);border-bottom:var(--smf-border-width-hairline) solid var(--smf-color-border);}
.cert-card__system{display:flex;align-items:center;gap:var(--smf-space-2);margin:0;min-width:0;color:var(--smf-color-deep);font-size:var(--smf-type-sm);font-weight:var(--smf-font-weight-semibold);line-height:var(--smf-line-compact);letter-spacing:var(--smf-tracking-control);}
/* Icon huy hiệu chất lượng — asset PNG gốc do Athuyet cung cấp (assets/sapamefa-quality-badge-icon.png),
   giữ nguyên 100% silhouette/hình học, KHÔNG redraw. Dùng làm CSS mask để tô lại màu xanh lá theo token
   --smf-color-success hiện hành (cùng màu badge HIỆU LỰC) thay vì màu đen gốc — không thêm màu mới.
   URL asset được truyền qua custom property --cert-badge-icon từ liquid (asset_url), vì file .css tĩnh
   không xử lý Liquid. */
.cert-card__system-icon{
  display:inline-block;flex:0 0 auto;width:20px;height:20px;
  background-color:var(--smf-color-success);
  -webkit-mask-image:var(--cert-badge-icon);
  mask-image:var(--cert-badge-icon);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}

/* Badge trạng thái — token success hiện hành, không thêm màu mới */
.cert-badge{display:inline-flex;align-items:center;gap:var(--smf-space-2);flex:0 0 auto;padding:6px 12px;border:var(--smf-border-width-hairline) solid var(--smf-color-success);border-radius:var(--smf-radius-pill);background:var(--smf-color-success-soft);color:var(--smf-color-success);font-size:var(--smf-font-size-2xs);font-weight:var(--smf-font-weight-bold);line-height:var(--smf-line-title);letter-spacing:var(--smf-tracking-eyebrow);text-transform:uppercase;white-space:nowrap;}
.cert-badge__dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--smf-color-success);}

/* Bốn dòng trong card — dùng CHUNG một class .cert-fact (không phải nhiều kiểu trình bày khác nhau).
   Dòng 1-3: label trái/value phải. Dòng 4 (.cert-fact--links): label trái/3 nút bằng nhau phải. */
.cert-facts{margin:0;padding:0;display:grid;gap:0;}
.cert-fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--smf-space-4);margin:0;padding:12px 0;border-bottom:var(--smf-border-width-hairline) solid var(--smf-color-border);}
.cert-fact:last-child{border-bottom:0;padding-bottom:0;}
.cert-fact__label{margin:0;flex:0 0 auto;color:var(--smf-color-deep);font-size:var(--smf-font-size-sm);font-weight:var(--smf-font-weight-semibold);line-height:var(--smf-line-compact);}
.cert-fact__value{margin:0;text-align:right;color:var(--smf-color-deep);font-size:var(--smf-font-size-sm);font-weight:var(--smf-font-weight-semibold);line-height:var(--smf-line-compact);font-variant-numeric:tabular-nums lining-nums;}
.cert-fact--links{align-items:center;}
.cert-fact__value--links{flex:1 1 auto;min-width:0;text-align:right;}

/* Tra cứu nhanh — 3 nút dùng ĐÚNG component nút chuẩn của site (.sapamefa-button.sapamefa-button--secondary,
   xem assets/sapamefa-components.css) để nhìn rõ là nút bấm; .cert-quicklink chỉ còn vai trò LAYOUT
   (chia đều chiều rộng trong hàng), không tự định nghĩa border/background/màu/hover/focus-visible nữa —
   toàn bộ visual/hover/focus-visible/transition đã do component nút chuẩn + reset :focus-visible site-wide
   (sapamefa-core.css) đảm nhiệm, không tạo kiểu nút riêng. */
.cert-quicklinks__row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--smf-space-3);}
.cert-quicklink{flex:1 1 0;min-width:0;}

/* Anchor offset để heading gallery không bị header sticky che; section là focus target (-1) không cần outline */
#iso-13485,#iso-9001,#ho-so-cong-bo{scroll-margin-top:calc(var(--smf-height-header-desktop) + var(--smf-space-4));}
#iso-13485:focus,#iso-9001:focus,#ho-so-cong-bo:focus{outline:none;}

/* Pulse nhẹ chấm badge — SCOPE RIÊNG trang Chứng nhận, chỉ đổi opacity (không màu mới, không scale, không layout shift) */
@keyframes cert-badge-dot-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.sapamefa-cert-page .cert-badge__dot{animation:cert-badge-dot-pulse 2s var(--smf-ease-standard) infinite;}
@media(prefers-reduced-motion:reduce){.sapamefa-cert-page .cert-badge__dot{animation:none;}}

/* Gallery sections — 3 section, mỗi section 3 ảnh tài liệu A4 dọc 1800×2546.
   Nền xen kẽ dùng ĐÚNG pattern site-wide: .sapamefa-corporate-section (trắng = --smf-color-surface)
   và .sapamefa-corporate-section--soft (xám = --smf-color-surface-soft) — không thêm màu mới. */
.cert-gallery-section{padding-block:var(--smf-section-standard);}
.cert-gallery__head{width:100%;max-width:none;margin:0 auto var(--smf-space-7);text-align:center;}
.cert-gallery__title{margin:0;color:var(--smf-color-deep);font-size:var(--smf-section-heading-title-size);line-height:var(--smf-line-section);font-weight:var(--smf-font-weight-bold);letter-spacing:var(--smf-tracking-section);text-align:center;}
.cert-gallery__subtitle{margin:var(--smf-space-3) 0 0;color:var(--smf-color-deep);font-size:var(--smf-font-size-md);font-weight:var(--smf-font-weight-regular);line-height:var(--smf-line-body);text-align:center;}
.cert-gallery{display:grid;grid-template-columns:1fr;gap:var(--smf-space-5);align-items:start;}
/* Radius tài liệu: 3px (không dùng token — token nhỏ nhất --smf-radius-small=8px không gần 3px).
   Bo góc nhỏ để tài liệu không trông như card sản phẩm; overflow:hidden ở wrapper cắt ảnh theo đúng 3px. */
.cert-gallery__item{display:block;width:100%;margin:0;padding:0;border:var(--smf-border-width-hairline) solid var(--smf-color-border);border-radius:3px;background:var(--smf-color-light);overflow:hidden;cursor:pointer;font-family:inherit;color:inherit;}
.cert-gallery__img{display:block;width:100%;height:auto;max-width:100%;border-radius:3px;object-fit:contain;background:var(--smf-color-light);}
.cert-gallery__item:focus-visible{outline:2px solid var(--smf-color-teal);outline-offset:3px;}

/* Radius ảnh tài liệu KHI MỞ trong lightbox dùng chung — scope RIÊNG trang Chứng nhận.
   Lightbox là portal ở body (ngoài .sapamefa-cert-page) nên không scope được bằng ancestor;
   thay vào đó khớp theo tên file tài liệu (chỉ tồn tại ở trang Chứng nhận) → KHÔNG đụng route khác,
   KHÔNG đổi --smf-radius-small toàn cục. Đặc thù selector (0,2,0: class + attribute) thắng
   rule dùng chung .sapamefa-media-lightbox__image (0,1,0) bất kể thứ tự nạp CSS.
   Ghi đè cả border-radius lẫn clip-path để bỏ hẳn bo góc 8px, đồng nhất 3px với gallery. */
.sapamefa-media-lightbox__image[src*="iso-13485"],
.sapamefa-media-lightbox__image[src*="iso-9001"],
.sapamefa-media-lightbox__image[src*="ho-so-cong-bo"]{
  border-radius:3px;
  clip-path:inset(0 round 3px);
}

/* ===== LIGHTBOX — fit trọn tài liệu dọc, đủ 4 mép — SCOPE RIÊNG 9 tài liệu Chứng nhận =====
   Lỗi gốc (chỉ ở tài liệu dọc, rõ trên màn hình cao): .sapamefa-media-lightbox__stage bị KHÓA
   height:min(78vh,820px) (khung cố định) + .sapamefa-media-lightbox__image-button có overflow:hidden,
   trong khi ảnh max-height:78vh > chiều cao stage → mép dưới tài liệu bị cắt.
   Scope bằng :has() theo tên file tài liệu (chỉ tồn tại ở trang Chứng nhận) → lightbox route khác GIỮ NGUYÊN.
   Khi đóng, JS xoá src nên selector không khớp → override tự tắt. */
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-13485"]) .sapamefa-media-lightbox__stage,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-9001"]) .sapamefa-media-lightbox__stage,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="ho-so-cong-bo"]) .sapamefa-media-lightbox__stage{
  height:auto;
  max-height:calc(100dvh - 150px);
}
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-13485"]) .sapamefa-media-lightbox__image-button,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-9001"]) .sapamefa-media-lightbox__image-button,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="ho-so-cong-bo"]) .sapamefa-media-lightbox__image-button{
  max-width:100%;
  max-height:100%;
  overflow:visible;
}
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-13485"]) .sapamefa-media-lightbox__image,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="iso-9001"]) .sapamefa-media-lightbox__image,
.sapamefa-media-lightbox:has(> .sapamefa-media-lightbox__dialog .sapamefa-media-lightbox__image[src*="ho-so-cong-bo"]) .sapamefa-media-lightbox__image{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 150px);
  aspect-ratio:auto;
  object-fit:contain;
}

/* Ghi chú xác minh — hiển thị lặp lại trong TỪNG section gallery (không còn khối riêng cuối trang).
   Text nhỏ, không card/border/heading, không cạnh tranh thị giác với gallery. */
.cert-note{width:100%;max-width:none;margin:var(--smf-space-5) auto 0;color:var(--smf-color-deep);font-size:var(--smf-font-size-xs);font-style:italic;line-height:var(--smf-line-note);text-align:center;}

/* Tablet ≥640: gallery 2 cột */
@media(min-width:640px){
  .cert-gallery{grid-template-columns:1fr 1fr;gap:var(--smf-space-4);}
}
/* Intro: 2 cột 44% hình / 56% nội dung từ 960; figure cao bằng đúng khối nội dung */
@media(min-width:960px){
  .cert-intro{grid-template-columns:44fr 56fr;gap:var(--smf-space-8);}
  .cert-intro__media{height:100%;}
  .cert-intro__media img{height:100%;}
}
/* Desktop ≥1024: gallery 3 cột */
@media(min-width:1024px){
  .cert-gallery{grid-template-columns:1fr 1fr 1fr;}
}
/* Mobile ≤640: hàng thông tin xếp dọc (label trên / value dưới); dòng Tra cứu nhanh cũng theo mẫu này */
@media(max-width:640px){
  .cert-fact{flex-direction:column;align-items:flex-start;gap:var(--smf-space-1);}
  .cert-fact__value{text-align:left;}
  .cert-fact__value--links{width:100%;text-align:left;}
  .cert-quicklinks__row{justify-content:flex-start;width:100%;}
  .cert-quicklink{flex:1 1 auto;}
}
/* Anchor offset theo chiều cao header tablet/mobile */
@media(max-width:1023px){#iso-13485,#iso-9001,#ho-so-cong-bo{scroll-margin-top:calc(var(--smf-height-header-tablet) + var(--smf-space-4));}}
@media(max-width:767px){#iso-13485,#iso-9001,#ho-so-cong-bo{scroll-margin-top:calc(var(--smf-height-header-mobile) + var(--smf-space-4));}}

/* SAPAMEFA_V3.42 — certification role mapping. */
.cert-card__system{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-card-title-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-title);
  letter-spacing:var(--smf-tracking-normal);
}
.cert-badge{
  color:var(--smf-color-status-success);
  font-size:var(--smf-role-label-size);
  font-weight:var(--smf-font-weight-bold);
  line-height:var(--smf-line-title);
  letter-spacing:.06em;
}
.cert-fact__label{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-control-text-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-compact);
}
.cert-fact__value{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-section-description-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-lead);
}
.cert-note{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-note-size);
  font-weight:var(--smf-font-weight-regular);
  font-style:italic;
  line-height:var(--smf-line-note);
  text-align:center;
}
.cert-quicklink{}


/* SAPAMEFA_V3.42 — final certification heading behavior after QA.
   Keep title/description centered; allow natural wraps instead of hard breaks. */
.cert-gallery__head{
  width:100%;
  max-width:none;
}
.cert-gallery__title{
  max-width:none;
  margin-inline:auto;
  font-size:clamp(2rem,3.4vw,var(--smf-section-heading-title-size));
  white-space:normal;
  text-wrap:pretty;
  word-break:normal;
  overflow-wrap:normal;
}
.cert-gallery__subtitle,
.cert-gallery__desc{
  width:100%;
  max-width:none;
  margin-inline:auto;
  text-align:center;
}
@media (max-width: 767px){
  .cert-gallery__title{
    font-size:clamp(1.5rem,4.9vw,2rem);
  }
}