/* ============================================================
   Trang "Bảo đảm chất lượng giáo dục" (Quality Assurance) — module
   quality-assurance. Hero + 4 tab CSS-only (scope .hf-qa-tabs, mở rộng
   cơ chế 3→4 tab đã có ở about-page.css).
   Port từ page-hero-shared.css (.hf-phero/.hf-phero-actions/.hf-about-intro),
   program-detail-blocks.css (.hf-fitlist/.hf-fit-ic/.hf-quote),
   pages-about-org-faculty.css (.hf-gt-subhead/.hf-quality-statrow/
   .hf-unit-grid/.hf-doan-row), home.css (.hf-news-*), tokens-and-header.css
   (.hf-tag). Tái dùng nguyên .hf-reason-card (về about-page.css) và
   .hf-org-card (về academic-page.css) — copy CSS, không import chéo file.
   Conditional enqueue: chỉ trang có block acf_fc_layout tiền tố "qa_".
   ============================================================ */

:root {
  --blue:      #17479D;
  --orange:    #EE6823;
  --blue-700:  #0f3270;
  --blue-50:   #eef3fb;
  --blue-100:  #dde7f6;
  --orange-50: #fdf0e7;
  --ink:       #14213d;
  --ink-soft:  #4a5a76;
  --muted:     #7a879c;
  --line:      #e4eaf2;
  --bg-soft:   #f5f8fc;
  --radius:    4px;
  --shadow-sm: 0 2px 8px rgba(20,33,61,.06);
  --shadow-md: 0 10px 30px rgba(20,33,61,.10);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

.hf-phero, .hf-qa-tabs, .hf-cta-band {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Resets có phạm vi ---- */
.hf-phero a:not(.hf-btn), .hf-cta-band a:not(.hf-btn),
.hf-phero button:not(.hf-btn), .hf-phero label:not(.hf-btn), .hf-cta-band button:not(.hf-btn) { color: inherit; text-decoration: none; }
.hf-phero h1, .hf-phero h2, .hf-phero h3,
.hf-qa-tabs h1, .hf-qa-tabs h2, .hf-qa-tabs h3, .hf-qa-tabs h4,
.hf-cta-band h1, .hf-cta-band h2 {
  margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700;
}

/* ---- Section wrapper dùng chung ---- */
.hf-section { padding: 80px 0; }
.hf-section.soft { background: var(--bg-soft); }
.hf-head { margin-bottom: 40px; }
.hf-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 10px; }
.hf-head p { font-size: 16px; color: var(--ink-soft); margin-top: 10px; }

.hf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange);
}
.hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }

/* Scope .hf-btn/.hf-tag dưới .main-content (wrapper nội dung của introduce.php) —
   header/mega render NGOÀI .main-content nên KHÔNG bị đè. Tránh leak: mega-menu.css
   khai .hf-tag (pill 999px) + .hf-btn global; CSS này enqueue prio 22 (sau mega 21)
   nên nếu để global sẽ đè pill .hf-tag của mega thành 4px trên trang QA. */
.main-content .hf-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 4px; font-weight: 800; font-size: 15px; white-space: nowrap; transition: transform .16s var(--ease), box-shadow .2s, background .2s; cursor: pointer; }
.main-content .hf-btn-white { background: #fff; color: var(--blue); }
.main-content .hf-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.main-content .hf-btn-lg { padding: 16px 30px; font-size: 16.5px; }
.main-content .hf-btn:hover { transform: translateY(-2px); }

.main-content .hf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 4px; }
.main-content .hf-tag-blue { background: var(--blue-50); color: var(--blue); }
.main-content .hf-tag-orange { background: var(--orange-50); color: var(--orange); }

/* ============ Breadcrumb (dùng trong hero, .light — nền xanh đặc) ============ */
.hf-phero .hf-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 10px; flex-wrap: wrap; }
.hf-phero .hf-crumb.light { color: rgba(255,255,255,.78); }
.hf-phero .hf-crumb svg { opacity: .5; }
.hf-phero .hf-crumb a:hover { color: #fff; }
.hf-phero .hf-crumb span[aria-current] { color: #fff; }

/* ============ Hero ============ */
.hf-phero { background: var(--blue-700); color: #fff; padding: 46px 0 56px; }
.hf-phero h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin: 14px 0 14px; }
.hf-phero p { font-size: 17px; color: #dbe5f5; max-width: 680px; }
.hf-phero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ============ Tab CSS-only (scope .hf-qa-tabs, 4 tab) ============ */
.hf-qa-tabs .hf-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden; }
.hf-qa-tabs .hf-tabpanel { display: none; }
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="0"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="0"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="1"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="1"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="2"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="2"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="3"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="3"] { display: block; }
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="0"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="0"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="1"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="1"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="2"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="2"],
.hf-qa-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="3"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="3"] { background: var(--blue); color: #fff; }
.hf-qa-tabs .hf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: -26px 0 32px; position: relative; z-index: 2; background: #fff; padding: 7px; border: 1px solid var(--line); border-radius: 4px; width: fit-content; box-shadow: var(--shadow-sm); }
.hf-qa-tabs .hf-tab { padding: 11px 22px; border-radius: 4px; font-weight: 800; font-size: 14.5px; color: var(--ink-soft); transition: background .15s, color .15s; cursor: pointer; }
.hf-qa-tabs .hf-tab:hover { color: var(--blue); }

/* ============ Tab 0 — Tổ chức & Văn bản ============ */
.hf-about-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.hf-fitlist { display: grid; gap: 10px; margin-top: 6px; list-style: none; padding: 0; }
.hf-fitlist li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.hf-fit-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #d8f0e0; color: #1f8a5b; flex-shrink: 0; margin-top: 1px; }
.hf-quote { margin: 0; background: var(--blue-50); border-left: 4px solid var(--orange); border-radius: 0 4px 4px 0; padding: 18px 20px; color: var(--blue-700); }
.hf-quote svg { color: var(--orange); opacity: .8; }
.hf-quote p { font-size: 16px; font-weight: 700; font-style: italic; margin-top: 8px; line-height: 1.45; }
.hf-quote span { font-size: 13px; font-weight: 700; opacity: .8; }

.hf-gt-subhead { margin: 42px 0 22px; }
.hf-gt-subhead.tight { margin: 0 0 18px; }
.hf-gt-subhead h3 { font-size: clamp(22px, 2.6vw, 28px); }
.hf-gt-subhead p { font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; }

.hf-unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hf-unit-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.hf-unit-item:hover { border-color: var(--blue); background: var(--blue-50); transform: translateX(3px); }
.hf-unit-kind { flex-shrink: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 6px; border-radius: 4px; width: 34px; height: 34px; }
.hf-unit-item:hover .hf-unit-kind { background: #fff; }
.hf-unit-name { flex: 1; font-weight: 700; font-size: 14.8px; color: var(--ink); }
.hf-unit-item > svg:last-child { color: var(--orange); opacity: 0; transition: opacity .15s, transform .15s; flex-shrink: 0; }
.hf-unit-item:hover > svg:last-child { opacity: 1; transform: translateX(2px); }
@media (max-width: 720px) { .hf-about-intro, .hf-unit-grid { grid-template-columns: 1fr; } }

/* ============ Tab 1 — Khảo sát (tái dùng .hf-reason-card) ============ */
.hf-qa-tabs .hf-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hf-qa-tabs .hf-reason-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.hf-qa-tabs .hf-reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.hf-qa-tabs .hf-reason-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 4px; background: var(--bg-soft); color: var(--orange); margin-bottom: 16px; }
.hf-qa-tabs .hf-reason-card h3 { font-size: 17px; margin-bottom: 8px; }
.hf-qa-tabs .hf-reason-card p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 860px) { .hf-qa-tabs .hf-reason-grid { grid-template-columns: 1fr; } }

/* ============ Tab 2 — Thành tựu kiểm định (tái dùng .hf-org-card) ============ */
.hf-org-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hf-org-card { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.hf-org-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--bg-soft); color: var(--blue); flex-shrink: 0; }
.hf-org-card h3 { font-size: 17px; margin-bottom: 6px; }
.hf-org-card p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 640px) { .hf-org-grid { grid-template-columns: 1fr; } }

/* ===== Tab 2 — Khối "Ảnh minh hoạ" (iteration 15) =====
   Trước 2026-08-13 khối này CHỈ có ảnh, style viết inline trong PHP. Iteration 15 thêm
   cụm chữ Eyebrow / Tiêu đề / Mô tả phía trên ảnh (hf_qa_render_tab_achievements) nên
   style dời ra đây. `.hf-qa-illus` giữ NGUYÊN giá trị inline cũ (aspect 21/9, radius 8px,
   margin-top 26px, nền --bg-soft) → trang chỉ nhập ảnh trông y hệt trước khi đổi.
   Nhịp dọc cụm chữ copy `.hf-cert45-head` (56px desktop / 40px ≤760px) để các khối trong
   tab 2 cách đều nhau; khoảng hở chữ→ảnh 26px trùng nhịp `.hf-cert45-rail` (22px).
   Cả 2 phần tự ẩn khi editor bỏ trống nên KHÔNG đặt margin trên phần tử cha. */
.hf-qa-tabs .hf-qa-illus-head { margin-top: 56px; }
.hf-qa-tabs .hf-qa-illus-head h2 { margin: 10px 0 0; font-size: clamp(30px, 3.5vw, 44px); }
.hf-qa-tabs .hf-qa-illus-head p { margin: 10px 0 0; max-width: 760px; font-size: 16px; color: var(--ink-soft); }
.hf-qa-tabs .hf-qa-illus { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 21 / 9; margin-top: 26px; background: var(--bg-soft); }
.hf-qa-tabs .hf-qa-illus img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hf-quality-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.hf-quality-statrow > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); text-align: center; }
.hf-quality-statrow strong { display: block; font-size: 36px; font-weight: 700; color: var(--blue); letter-spacing: -.02em; }
.hf-quality-statrow span { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 720px) { .hf-quality-statrow { grid-template-columns: 1fr; } }

/* ===== Tab 2 — Rail chứng nhận "Hồ sơ kiểm định" (iteration 11) =====
   Port từ design 20260807: assets/css/v45-integrated-ux.css dòng 86-101.
   MỌI selector phải prefix .hf-qa-tabs — class trần (.hf-shell/.hf-section/…)
   sẽ đè mega-menu + footer CHỈ trên trang này (xem assertSharedChromeIntact). */
/* Iteration 15 — `cert_rail` là REPEATER: tab 2 có thể có NHIỀU khối `.hf-cert45`
   xếp dọc. Wrapper CỐ Ý không có margin/padding riêng: khoảng hở giữa 2 khối do
   `.hf-cert45-head { margin-top }` (56px desktop / 40px ≤760px) collapse ra ngoài
   wrapper sinh ra → khối đơn giữ nguyên nhịp dọc như trước, không cần rule mới.
   ⛔ Đừng thêm padding/border/`display:flow-root` cho `.hf-cert45` — margin hết
   collapse thì khoảng hở nhảy số ở cả trường hợp 1 khối lẫn nhiều khối. */
/* Tiêu đề CHUNG của cả cụm rail (iteration 15, field `cert_rail_heading`) — nằm giữa hàng
   số liệu và khối rail đầu tiên. KHÔNG có trong design 20260807 (design đi thẳng
   .hf-quality-statrow → .hf-cert45-head): phần thêm cho admin, cố ý lệch.
   Cỡ chữ dùng CHUNG một thang với `.hf-cert45-head h2` + `.hf-qa-illus-head h2` để cả tab 2
   chỉ có một cỡ tiêu đề — đổi thang thì đổi cả 3 chỗ. */
.hf-qa-tabs .hf-qa-certs-head { margin-top: 56px; }
.hf-qa-tabs .hf-qa-certs-head h2 { margin: 0; font-size: clamp(30px, 3.5vw, 44px); }
/* Riêng khối rail ĐẦU TIÊN ngay dưới tiêu đề chung thì thu hẹp lại: 56px của tiêu đề cộng
   56px của khối = 112px, tiêu đề trôi lơ lửng giữa 2 mảng. Chỉ khối đầu bị ảnh hưởng — các
   khối sau vẫn cách nhau 56px như cũ (chọn `+` chứ không phải `~` chính là vì vậy). */
.hf-qa-tabs .hf-qa-certs-head + .hf-cert45 .hf-cert45-head { margin-top: 24px; }
.hf-qa-tabs .hf-cert45-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-top: 56px; }
.hf-qa-tabs .hf-cert45-head h2 { margin: 10px 0 0; font-size: clamp(30px, 3.5vw, 44px); }
/* Mô tả khối: design KHÔNG có `<p>` trong head (field mô tả là phần thêm iteration 11) nên
   trước 2026-08-13 nó rơi về mặc định 16px/400 — nhạt hơn cả tiêu đề thẻ thành tựu ngay
   phía trên. Các khối thực tế của trường thường bỏ trống `title` và chỉ dùng eyebrow + mô tả
   ⇒ dòng này ĐANG ĐÓNG VAI tiêu đề khối. Khoá về ĐÚNG bộ chữ của `.hf-org-card h3`
   (17px/700, cùng màu ink kế thừa) để 2 cụm trong tab 2 cùng một giọng. */
.hf-qa-tabs .hf-cert45-head p { margin: 0; font-size: 17px; font-weight: 700; }
.hf-qa-tabs .hf-cert45-head > div:last-child { display: flex; gap: 8px; }
/* Nút ‹ › bo góc VUÔNG (12px) chứ KHÔNG tròn 50% như design gốc (v45 dòng 89) —
   user chốt 2026-08-13 theo ảnh tham chiếu. Đừng "sửa lại cho khớp design". */
.hf-qa-tabs .hf-cert45-head button { width: 44px; height: 44px; display: grid; place-items: center; color: #174f9c; border: 1px solid #ccd9ea; border-radius: 12px; background: #fff; cursor: pointer; }
.hf-qa-tabs .hf-cert45-head button.is-prev svg { transform: rotate(180deg); }
/* 2 rule dưới KHÔNG có trong design (design không kèm JS nên nút là markup chết) */
.hf-qa-tabs .hf-cert45-head button[disabled] { opacity: .4; cursor: default; }
/* Bề rộng thẻ CỐ ĐỊNH theo bề rộng rail, KHÔNG theo số thẻ trong khối.
   Design dùng `minmax(300px, 32%)`: track co/giãn theo lượng free space còn lại nên
   CÙNG một trang, khối 2 thẻ ra 415px, khối 4 thẻ ra 312px, khối ≥5 thẻ ra 300px —
   3 cỡ thẻ khác nhau xếp chồng nhau (user chốt 2026-08-13: lấy cỡ của khối 4 thẻ).
   `max()` + `calc()` là sizing function CỐ ĐỊNH (min = max) ⇒ mọi khối cùng một cỡ:
   vừa đúng 4 thẻ / khung nhìn (48px = 3 khe × 16px), sàn 300px giữ thẻ không teo ở
   khoảng 761–1100px rồi để rail cuộn. ⛔ Đừng đổi lại về minmax — cỡ thẻ lại lệch theo số thẻ. */
.hf-qa-tabs .hf-cert45-rail { display: grid; grid-auto-flow: column; grid-auto-columns: max(300px, calc((100% - 48px) / 4)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 22px; padding-bottom: 5px; }
.hf-qa-tabs .hf-cert45-rail::-webkit-scrollbar { display: none; }
/* Bo góc 4px — user chốt 2026-08-13, KHÁC design (18px = --hf-radius-card). Cùng nhịp với
   `.hf-org-ic` / `.hf-reason-ic` (4px) trong tab. Lệch design có chủ ý, đừng "sửa cho khớp". */
.hf-qa-tabs .hf-cert45-rail article { overflow: hidden; scroll-snap-align: start; border: 1px solid #dce4ef; border-radius: 4px; background: #fff; }
.hf-qa-tabs .hf-cert45-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #eaf0f8; }
.hf-qa-tabs .hf-cert45-image img { width: 100%; height: 100%; object-fit: cover; }
/* Iteration 17 — vùng ảnh đổi <div> → <button> (mở lightbox). Reset style mặc định của
   button để giữ NGUYÊN diện mạo cũ; chỉ khác con trỏ zoom-in.
   Thẻ KHÔNG có ảnh vẫn là <div> nên rule button dưới đây không chạm tới nó. */
.hf-qa-tabs button.hf-cert45-image { display: block; width: 100%; padding: 0; border: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; }
.hf-qa-tabs button.hf-cert45-image:focus-visible { outline: 2px solid #174f9c; outline-offset: -2px; }
/* Badge số thứ tự (01, 02… tròn cam góc dưới-phải ảnh, design v45 dòng 95) ĐÃ BỎ —
   user chốt 2026-08-13. `position: relative` ở trên GIỮ LẠI: khung ảnh vẫn cần nó
   nếu sau này có lớp phủ. Lệch design có chủ ý, đừng thêm lại khi refresh design. */
/* Chữ trong thẻ chứng nhận căn GIỮA (user chốt 2026-08-14). `<small>` là inline nên
   text-align ở đây phủ luôn cả 3 dòng small/h3/p, không cần khai riêng từng thẻ. */
.hf-qa-tabs .hf-cert45-copy { padding: 19px; text-align: center; }
/* Iteration 17 — vùng chữ đổi <div> → <a>. `cursor: pointer` áp cho CẢ thẻ CHƯA có
   `href` (user chốt 2026-08-14): trông bấm được, nhưng <a> thiếu href thì bấm không
   điều hướng đi đâu. Đừng "sửa lại cho đúng chuẩn" bằng cách bỏ cursor hay thêm href. */
.hf-qa-tabs a.hf-cert45-copy { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.hf-qa-tabs a.hf-cert45-copy:focus-visible { outline: 2px solid #174f9c; outline-offset: -2px; }
/* font-size khai TƯỜNG MINH: Bootstrap (nền Understrap) đặt `small{font-size:.875em}`
   = 14px, còn design tĩnh không có Bootstrap nên `small` rơi về mặc định trình duyệt
   0.8333em = 13.33px. Không khai thì nhãn nhóm lệch cỡ chữ so với design.
   (Giữ lại từ bản rail của nhánh dev khi gộp 2026-08-13 — dữ liệu hiện tại chưa nhập
   nhãn nhóm nên chưa thấy khác biệt, nhưng admin nhập vào là dính ngay.) */
.hf-qa-tabs .hf-cert45-copy small { font-size: 13.33px; line-height: 1.55; color: #ec6528; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hf-qa-tabs .hf-cert45-copy h3 { margin: 9px 0 7px; color: #142744; font-size: 19px; line-height: 1.3; }
.hf-qa-tabs .hf-cert45-copy p { margin: 0; color: #677991; font-size: 13px; line-height: 1.5; }
.hf-qa-tabs .hf-cert45-swipe { display: none; }
/* Khoảng hở giữa rail và bảng chip xám phía dưới KHÔNG đặt ở đây: bảng xám là
   `<section class="hf-section soft">` RIÊNG (xem inc/quality-assurance-page.php), khoảng hở
   do `padding: 80px 0` của cả 2 section tự sinh. Cách này đúng cả khi rail rỗng — lúc đó
   khoảng hở vẫn còn giữa hàng số liệu và bảng xám. */
/* Mốc 760px là của design (v45 dòng 129-130) — KHÔNG gộp vào @media 720px sẵn
   có phía dưới, gộp sẽ sai hẳn vùng 721-760px. */
@media (max-width: 760px) {
  /* `.hf-qa-illus-head` đi kèm ở đây (không tự mở @media riêng) vì dùng CÙNG nhịp dọc
     với `.hf-cert45-head` — sửa 1 chỗ là cả 2 khối tab 2 cùng đổi. */
  .hf-qa-tabs .hf-cert45-head,
  .hf-qa-tabs .hf-qa-certs-head,
  .hf-qa-tabs .hf-qa-illus-head { margin-top: 40px; }
  /* Giữ nguyên 24px cho khối đầu sau tiêu đề chung — dòng trên vừa kéo nó về 40px. */
  .hf-qa-tabs .hf-qa-certs-head + .hf-cert45 .hf-cert45-head { margin-top: 24px; }
  .hf-qa-tabs .hf-cert45-rail { grid-auto-columns: 84%; }
  .hf-qa-tabs .hf-cert45-swipe { display: flex; justify-content: flex-end; gap: 6px; align-items: center; color: #72829a; font-size: 11px; }
}

.hf-doan-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hf-doan-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.hf-doan-chip svg { color: var(--orange); }
.hf-doan-chip:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.hf-doan-chip:hover svg { color: #fff; }

/* ============ Tab 3 — Tin tức ============ */
.hf-news-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
.hf-news-side { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.hf-news-row { display: flex; gap: 16px; text-align: left; padding: 12px; border-radius: 4px; transition: background .15s; align-items: center; color: inherit; text-decoration: none; }
.hf-news-row:hover { background: var(--bg-soft); }
.hf-news-row h4 { font-size: 15.5px; line-height: 1.3; margin: 8px 0 6px; font-weight: 700; }
.hf-news-ic-box { width: 64px; flex-shrink: 0; text-align: center; background: var(--blue-50); border-radius: 12px; padding: 10px 0; }
.hf-news-ic-box svg { margin: 0 auto; color: var(--blue); }

/* --- Tab 3: ảnh đại diện + phân trang AJAX (iteration 10) ---
   Scope dưới .hf-qa-tabs. KHÔNG đụng các rule .hf-news-* trần ở trên (nợ có
   sẵn từ iteration 1) và KHÔNG khai thêm class hf-* trần nào. */
.hf-qa-tabs .hf-news-thumb { width: 96px; flex-shrink: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--blue-50); }
.hf-qa-tabs .hf-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-qa-tabs .hf-qa-news.is-loading { opacity: .55; pointer-events: none; transition: opacity .12s; }

.hf-qa-tabs .hf-qa-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 760px; margin-top: 22px; }
.hf-qa-tabs .hf-qa-pagination a,
.hf-qa-tabs .hf-qa-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .14s var(--ease), color .14s, border-color .14s; }
.hf-qa-tabs .hf-qa-pagination a:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue); }
.hf-qa-tabs .hf-qa-pagination span[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.hf-qa-tabs .hf-qa-pagination span.dots { border-color: transparent; background: transparent; }

@media (max-width: 767px) {
  .hf-qa-tabs .hf-news-thumb { width: 72px; }
  .hf-qa-tabs .hf-qa-pagination a,
  .hf-qa-tabs .hf-qa-pagination span { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ============ CTA band (lặp lại mỗi tab) ============ */
.hf-cta-band { background: var(--orange); color: #fff; padding: 60px 0; }
.hf-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.hf-cta-copy h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 12px 0 12px; max-width: 600px; }
.hf-cta-copy p { font-size: 16.5px; color: #fff5ee; max-width: 560px; }
.hf-cta-actions { flex-shrink: 0; }

/* ============ Reveal animation ============ */
.hf-reveal {
  opacity: 0; transform: translateY(56px) scale(.97); filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  will-change: opacity, transform, filter;
}
.hf-reveal.in { opacity: 1; transform: none; filter: blur(0); }
.hf-reveal .hf-reason-card, .hf-reveal .hf-org-card, .hf-reveal .hf-unit-item, .hf-reveal .hf-doan-chip {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hf-reveal.in .hf-reason-card, .hf-reveal.in .hf-org-card, .hf-reveal.in .hf-unit-item, .hf-reveal.in .hf-doan-chip {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hf-reveal, .hf-reveal * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 720px) {
  .hf-phero { padding: 34px 0 40px; }
  .hf-cta-in { text-align: center; justify-content: center; }
  .hf-qa-tabs .hf-tabs { margin-top: 0; }
}

/* ===== Anchor scroll (module mapping-page, đợt Bảo đảm chất lượng) ===== */
/* 140px = 134px chiều cao .hf-header cố định (xem org-structure.css) + 6px đệm. */
/* .hf-tab-radio CŨNG cần scroll-margin-top: nhảy #tg-g0-N, trình duyệt tự scroll-to-fragment
   nhắm THẲNG vào radio (id khớp hash) TRƯỚC/SONG SONG với scrollIntoView() của JS (nhắm .hf-tabs)
   — nếu chỉ đặt margin ở .hf-tabs, lúc scroll tự nhiên của trình duyệt thắng race thì mất margin. */
.hf-qa-tabs .hf-tab-radio,
.hf-qa-tabs .hf-tabs[data-hf-tabgroup] { scroll-margin-top: 140px; }
/* Selector "html" trông global nhưng file này CHỈ enqueue khi hf_qa_page_has_qa_blocks() = true
   (hf_qa_assets(), wp_enqueue_scripts) — hiệu lực thực tế chỉ trên trang có block qa_*. */
html { scroll-behavior: smooth; }

/* ── Iteration 17 — Lightbox phóng to chứng nhận ────────────────────────────────
   Overlay được JS tiêm vào <body> nên KHÔNG nằm dưới `.hf-qa-tabs` như phần còn lại
   của file. Bù lại bằng namespace RIÊNG `.hf-qa-lightbox*` — tên module tự sở hữu,
   grep toàn theme không trùng ai.
   ⛔ TUYỆT ĐỐI không dùng lại `.hf-shell` / `.hf-section` / `.hf-eyebrow` bên trong
   overlay: đó là class dùng chung với mega-menu + footer, rule trần load sau sẽ đè
   làm chrome co lại (bài học why-huflit-page 2026-07-22). */
.hf-qa-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 22, 40, .88); }
.hf-qa-lightbox.is-open { display: flex; }
/* Khung co đúng theo ảnh — mốc neo của nút đóng. Không có lớp này thì nút X bám vào
   viewport nên nằm xa ảnh ở màn rộng. */
.hf-qa-lightbox-inner { position: relative; display: inline-flex; max-width: min(1100px, 100%); max-height: calc(100vh - 48px); }
.hf-qa-lightbox-img { display: block; max-width: 100%; max-height: calc(100vh - 48px); width: auto; height: auto; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
/* Nằm ĐÈ LÊN góc trên-phải của ảnh, thụt đều 12px cả hai chiều. Dịch ra ngoài
   (vd right:-18px) sẽ bị cắt khi ảnh chạm mép màn hình ở mobile.
   Nút TRÒN + icon SVG: hình tròn không có "hướng" nên không thể nhìn lệch như ô vuông
   bo góc; `display:grid; place-items:center` + SVG đối xứng ⇒ tâm icon = tâm nút.
   `padding:0` bắt buộc — nút mặc định của trình duyệt có padding riêng, để nguyên là
   icon bị đẩy lệch xuống dưới. */
.hf-qa-lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; color: #142744; background: rgba(255, 255, 255, .94); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(10, 22, 40, .28); transition: background .15s, transform .15s; }
.hf-qa-lightbox-close:hover { background: #fff; transform: scale(1.06); }
.hf-qa-lightbox-close svg { display: block; }
.hf-qa-lightbox-close:focus-visible { outline: 2px solid #174f9c; outline-offset: 2px; }
@media (max-width: 599px) {
	.hf-qa-lightbox { padding: 12px; }
	.hf-qa-lightbox-inner { max-height: calc(100vh - 24px); }
	.hf-qa-lightbox-img { max-height: calc(100vh - 24px); }
	.hf-qa-lightbox-close { top: 8px; right: 8px; width: 34px; height: 34px; }
	.hf-qa-lightbox-close svg { width: 15px; height: 15px; }
}