/*
Theme Name: Phuong Nam
Theme URI: https://antoanphuongnam.com/
Author: An Toàn Phương Nam
Author URI: https://antoanphuongnam.com/
Description: Theme WordPress cho An Toàn Phương Nam — huấn luyện an toàn, vệ sinh lao động Nhóm 1–6 và kiểm định kỹ thuật an toàn. Chuyển từ bộ giao diện HTML gốc (1 template dùng chung + dữ liệu từng nhóm), giữ nguyên giao diện, CSS và JS.
Version: 2.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary — An Toàn Phương Nam
License URI: https://antoanphuongnam.com/
Text Domain: phuongnam
Tags: training, safety, business, responsive
*/
/* ==========================================================================
   AN TOÀN PHƯƠNG NAM – Giao diện dùng chung cho các landing page huấn luyện an toàn (Nhóm 1–6)
   1. Tokens  2. Base  3. Layout  4. Nút  5. Header  6. Sections
   7. Form  8. FAQ  9. Footer  10. CTA mobile, modal, toast  11. Chuyển động  12. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --navy-900: #071A33;
  --navy-800: #0B2545;
  --navy-700: #13315C;
  --navy-600: #1E4677;
  --navy-100: #E3EAF3;
  --yellow: #F5B700;
  --yellow-hover: #FFC21A;
  --yellow-100: #FFF4D1;
  --orange: #E8730C;
  --orange-700: #B3560A;
  --green: #1C7C45;
  --green-100: #E3F3EA;
  --red: #B42318;
  --red-100: #FDECEA;
  --ink: #142236;
  --ink-2: #44546A;
  --muted: #5B6B7E;
  --line: #D9E0E8;
  --bg: #FFFFFF;
  --bg-muted: #F3F6F9;

  --font: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 8px;
  --radius-sm: 6px;
  --header-h: 72px;
  --container: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65;
  color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { line-height: 1.22; margin: 0; color: var(--navy-800); letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--navy-600); text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--yellow); color: var(--navy-900); padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* 3. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 52px 0; }
.section-muted { background: var(--bg-muted); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-700); margin-bottom: 10px;
}
.kicker::before { content: ""; width: 24px; height: 3px; background: var(--yellow); border-radius: 2px; }
.kicker-light { color: var(--yellow); }
h2 { font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.25rem); font-weight: 800; }
.section-intro { color: var(--ink-2); font-size: 1.0625rem; max-width: 62ch; }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; margin-bottom: 32px; }
.center-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.small-muted { font-size: .875rem; color: var(--muted); }
/* Trang chính sách */
.policy-header { border-bottom: 1px solid var(--line); background: #fff; }
.policy-header .container { display: flex; align-items: center; min-height: 72px; }
.policy-header .brand { --logo: 52px; }
.check-list { display: grid; gap: 10px; list-style: disc; padding-left: 22px; color: var(--ink-2); }

/* 4. Buttons --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  font: inherit; font-weight: 700; font-size: .9375rem; line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--btn-bd); border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
/* Hiệu ứng nhấc nút chỉ trên thiết bị có chuột (tránh "kẹt hover" sau khi chạm trên điện thoại) */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .icon { transform: translateX(2px); }
}
.btn-primary { --btn-bg: var(--yellow); --btn-fg: var(--navy-900); }
.btn-primary:hover { --btn-bg: var(--yellow-hover); color: var(--navy-900); box-shadow: 0 6px 18px rgba(245, 183, 0, .35); }
.btn-navy { --btn-bg: var(--navy-800); --btn-fg: #fff; }
.btn-navy:hover { --btn-bg: var(--navy-700); color: #fff; }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--navy-800); --btn-bd: var(--navy-800); }
.btn-ghost:hover { --btn-bg: var(--navy-800); color: #fff; }
.btn-outline { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: var(--line); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); }
.btn-outline-light:hover { --btn-bg: #fff; color: var(--navy-900); }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
/* CTA phụ dạng liên kết – không cạnh tranh với CTA chính */
.btn-link-call {
  --btn-bg: transparent; --btn-fg: var(--navy-800); min-height: 48px; padding: 10px 6px;
  text-decoration: underline; text-decoration-color: rgba(11,37,69,.3); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.btn-link-call .icon { color: var(--orange-700); }
.btn-link-call:hover { color: var(--orange-700); transform: none; text-decoration-color: currentColor; }
.btn-link-call:hover .icon { transform: none; }
/* CTA thứ hai: Chat Zalo – nền trắng, viền xanh Zalo, nhẹ hơn nút báo giá */
.btn-zalo { --btn-bg: #fff; --btn-fg: #0050C8; --btn-bd: #0068FF; min-height: 48px; padding: 10px 18px; }
.btn-zalo .icon { width: 20px; height: 20px; color: #0068FF; }
.btn-zalo:hover { --btn-bg: #EEF5FF; color: #0045AD; }
.btn-zalo:hover .icon { transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.icon-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--navy-800); cursor: pointer;
}
.icon-btn .icon { width: 22px; height: 22px; }

/* 5. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 18px rgba(11,37,69,.08); }
.header-inner { max-width: 1360px; display: flex; align-items: center; gap: 24px; height: var(--header-h); transition: height .25s var(--ease); }
.site-header.is-scrolled .header-inner { height: 62px; }
.brand { --logo: 60px; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy-800); flex: none; border-radius: var(--radius-sm); }
/* Logo huy hiệu tròn chính thức: luôn vuông, không co méo, không đổi màu */
.brand-mark { display: block; flex: 0 0 auto; width: var(--logo); height: var(--logo); transition: width .25s var(--ease), height .25s var(--ease); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-header.is-scrolled .brand { --logo: 52px; }
.brand-text { display: flex; flex-direction: column; font-size: 1.0625rem; letter-spacing: .02em; line-height: 1.15; white-space: nowrap; }
.brand-text strong { font-weight: 800; }
.brand-text small { font-size: .75rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
.header-inner { position: relative; }
.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-row { display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px; border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav-link:hover { color: var(--navy-800); background: var(--navy-100); }
.has-sub .nav-link { padding-right: 2px; }
.sub-toggle, .group-toggle {
  display: inline-grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-2); cursor: pointer;
}
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { color: var(--navy-800); }
/* Mục có menu con: tô nền cả cụm (tên + mũi tên) khi rê chuột hoặc đang mở */
.nav-row { border-radius: var(--radius-sm); }
.has-sub .nav-link:hover { background: none; }
.nav-row:hover, .has-sub.is-open > .nav-row { background: var(--navy-100); }
.nav-row:hover > .nav-link, .has-sub.is-open > .nav-row > .nav-link { color: var(--navy-800); }
.sub-toggle:focus-visible { outline-offset: -3px; }
.chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }
/* Danh mục chứa trang hiện tại: chữ navy đậm + chấm xanh nhỏ (không gạch chân, không dùng màu CTA) */
.is-active-section > .nav-row > .nav-link { color: var(--navy-800); font-weight: 700; gap: 6px; }
.is-active-section > .nav-row > .nav-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.has-mega { position: static; } /* mega menu canh theo khung header, không theo mục */

/* Bảng thả xuống (desktop) */
.subnav, .mega {
  position: absolute; z-index: 110; display: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(7,26,51,.14);
}
.subnav { top: calc(100% + 4px); left: 0; width: 300px; padding: 8px; }
.mega {
  top: calc(100% - 6px); left: 0; right: 0; margin: 0 auto; width: min(980px, calc(100% - 48px)); padding: 22px 24px 0;
  grid-template-columns: 2fr 1fr 1fr; column-gap: 28px;
}
.has-sub.is-open > .subnav { display: block; }
.has-sub.is-open > .mega { display: grid; }
.mega-head { display: flex; align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--yellow); }
.mega-head a { font-size: .8125rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-800); text-decoration: none; padding: 4px 0; }
.mega-head a:hover { color: var(--orange-700); text-decoration: underline; }
.group-toggle { display: none; }
.mega-group--wide .mega-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mega-label { margin: 4px 0 2px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.mega-list a { display: block; padding: 7px 8px; margin: 0 -8px; border-radius: var(--radius-sm); font-size: .9063rem; line-height: 1.35; color: var(--ink); text-decoration: none; }
.mega-list a:hover { background: var(--bg-muted); color: var(--navy-800); }
.mega-list a[aria-current="page"] { background: var(--navy-100); box-shadow: inset 3px 0 0 var(--navy-800); color: var(--navy-800); font-weight: 700; }
.subnav .mega-list a { padding: 10px 12px; margin: 0; font-size: .9375rem; }
.mega-all { grid-column: 1 / -1; margin-top: 14px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.subnav .mega-all { margin-top: 6px; padding: 8px 12px 4px; }
.mega-all a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .875rem; font-weight: 700; color: var(--navy-700); text-decoration: none; }
.mega-all a:hover { text-decoration: underline; }
.mega-all .icon { width: 16px; height: 16px; }
/* Không có JavaScript: mở bằng rê chuột / focus */
html:not(.js) .has-sub:hover > .subnav, html:not(.js) .has-sub:focus-within > .subnav { display: block; }
html:not(.js) .has-sub:hover > .mega, html:not(.js) .has-sub:focus-within > .mega { display: grid; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.hotline { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy-800); }
.header-actions .hotline { gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: 999px; transition: background-color .15s, border-color .15s; }
.header-actions .hotline:hover { background: var(--yellow-100); border-color: #F0D27A; color: var(--navy-800); }
.hotline:focus-visible { outline-offset: 2px; border-radius: 999px; }
/* Icon Zalo nhỏ trên header – chỉ khi đủ chỗ (≥ 1600px) */
.header-zalo { display: none; place-items: center; width: 40px; height: 40px; flex: none; border: 1.5px solid #0068FF; border-radius: 50%; background: #fff; color: #0068FF; }
.header-zalo .icon { width: 20px; height: 20px; }
.header-zalo:hover { background: #EEF5FF; color: #0055D4; }
@media (min-width: 1600px) {
  .header-inner { max-width: 1440px; }
  .header-zalo { display: inline-grid; }
}
.hotline-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow-100); color: var(--orange-700); flex: none; }
.hotline-icon .icon { width: 20px; height: 20px; }
.hotline-text { display: flex; flex-direction: column; line-height: 1.15; }
.hotline-text small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.hotline-text strong { font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }
.hotline:hover strong { color: var(--orange-700); }
.header-cta { white-space: nowrap; }
.call-mobile, .nav-toggle { display: none; }
.burger { position: relative; width: 22px; height: 16px; display: block; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 7px; }
.burger span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(7, 26, 51, .45); }
.nav-backdrop[hidden] { display: none; }

/* 6. Sections -------------------------------------------------------------- */
/* Hero */
.hero {
  /* Chiều cao tự nhiên theo nội dung – không dùng height/min-height theo vh */
  --hero-pad-top: clamp(24px, 2.6vw, 40px);
  --hero-pad-bottom: clamp(28px, 3vw, 48px);
  --hero-space: clamp(14px, 1.4vw, 20px);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  background: var(--bg-muted); border-bottom: 1px solid var(--line);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .95fr; gap: clamp(28px, 3.4vw, 48px); align-items: center; }
.hero-copy { container-type: inline-size; min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-700);
}
.eyebrow::before { content: ""; width: 24px; height: 3px; flex: none; background: var(--yellow); border-radius: 2px; }
/* H1: cân dòng bằng CSS (text-wrap: balance), "doanh nghiệp" giữ liền bằng   trong HTML */
.hero h1 { font-size: clamp(1.75rem, 1rem + 2.4vw, 2.625rem); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; max-width: 15.5em; }
@supports (font-size: 1cqi) {
  .hero h1 { font-size: clamp(1.75rem, 7.2cqi, 2.625rem); }
}
.lead { margin-top: var(--hero-space); font-size: 1.0625rem; color: var(--ink); max-width: 56ch; }
.hero-ctas { margin-top: calc(var(--hero-space) + 4px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hero-ctas .hero-quote { padding-left: 22px; padding-right: 22px; white-space: nowrap; }
.hero-ctas .btn-zalo, .hero-ctas .btn-link-call { white-space: nowrap; }
.call-txt--two, .call-txt--mobile { display: none; }
/* Cột chữ Hero hẹp (< 580px): Báo giá + Zalo cùng hàng, "Gọi trực tiếp: …" xuống hàng dưới */
@container (max-width: 579px) {
  .hero-ctas .btn-link-call { flex-basis: 100%; justify-content: flex-start; min-height: 40px; padding: 4px 2px; }
  .call-txt--row { display: none; }
  .call-txt--two { display: inline; }
}
.hero-points { margin-top: calc(var(--hero-space) + 4px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; padding-top: var(--hero-space); border-top: 1px solid var(--line); }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .9375rem; line-height: 1.5; color: var(--navy-800); }
.hero-points li > span { min-width: 0; }
/* Căn dấu kiểm theo giữa dòng chữ đầu tiên */
.hero-points .icon { color: var(--green); width: 20px; height: 20px; margin-top: calc((1.5em - 20px) / 2); }
.hero-figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #DCE3EC; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }

/* Thanh bằng chứng tin cậy (ngay dưới hero) */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.trust-list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }
.trust-list li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.trust-list .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); }
.trust-list li:first-child .icon { background: var(--green-100); color: var(--green); }
.trust-list span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.trust-list small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.trust-list strong { font-size: .9688rem; color: var(--navy-800); font-weight: 800; }
.trust-list .trust-note { font-style: normal; font-size: .75rem; color: var(--muted); margin-top: 2px; }
/* Mỗi mục đúng 2 dòng: nhãn nhỏ xám + nội dung đậm xanh đậm (không xuống dòng) */
.trust .trust-list li { align-items: center; gap: 10px; }
.trust .trust-list small { white-space: nowrap; font-size: .75rem; color: var(--muted); }
.trust .trust-list strong { white-space: nowrap; line-height: 1.3; color: var(--navy-800); }
.trust .trust-list .icon { width: 30px; height: 30px; padding: 6px; }
/* ≥ 1181px: 4 mục một hàng, cột co theo nội dung */
@media (min-width: 1181px) {
  .trust .trust-list { grid-template-columns: repeat(var(--trust-cols, 4), auto); justify-content: space-between; gap: 12px 20px; }
  .trust .trust-list strong { font-size: .9375rem; }
}
/* 768–1180px: lưới 2 × 2 */
@media (max-width: 1180px) {
  .trust .trust-list { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; gap: 10px 40px; }
}
/* Mobile: 1 cột gọn để nội dung đậm không phải xuống dòng */
@media (max-width: 767px) {
  .trust .trust-inner { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .trust .trust-list { grid-template-columns: 1fr; gap: 8px; }
  .trust .trust-list .icon { width: 28px; height: 28px; padding: 5px; }
  .trust .trust-list li { gap: 12px; }
  .trust .trust-list strong { font-size: .9375rem; }
}
/* Mục "Chi phí huấn luyện": vẫn là mục thông tin, bấm để tới form báo giá (không phải nút CTA) */
.trust-item-link { display: flex; gap: 10px; align-items: center; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.trust-item-link strong { text-decoration: underline dotted rgba(11,37,69,.45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.trust-item-link:hover strong { color: var(--orange-700); text-decoration-color: currentColor; }
.trust-item-link:focus-visible { outline-offset: 4px; }
.trust-list li, .trust-list strong, .trust-list small { overflow-wrap: anywhere; }
.trust-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--navy-800); border-radius: var(--radius-sm); color: var(--navy-800); font-weight: 700; font-size: .875rem; text-decoration: none;
}
.trust-link .icon { width: 18px; height: 18px; }
.trust-link:hover { background: var(--navy-800); color: #fff; }
.trust-link--jump .icon { transform: rotate(90deg); } /* mũi tên xuống: cuộn tới section trong trang */

/* Năng lực pháp lý chi tiết */
.cert-block {
  display: grid; grid-template-columns: minmax(0, 31%) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 36px);
}
.cert-figure {
  position: relative; display: block; text-decoration: none; background: #fff;
  border: 2px solid var(--orange); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(11,37,69,.06);
  transition: box-shadow .2s var(--ease);
}
.cert-figure img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 712; }
.cert-figure:hover { box-shadow: 0 4px 16px rgba(11,37,69,.12); }
.cert-zoom-badge {
  position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--navy-800);
}
.cert-zoom-badge .icon { width: 18px; height: 18px; }
.cert-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cert-body { width: 100%; }
.cert-label { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.cert-label .icon { width: 22px; height: 22px; }
.cert-body h2 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.3; font-weight: 800; color: var(--navy-800); margin-bottom: 22px; max-width: 32ch; text-wrap: balance; }
.cert-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cert-facts > div { padding: 12px 14px; background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.cert-facts dt { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.cert-facts dd { margin: 4px 0 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; color: var(--navy-800); }
.cert-basis { margin: 18px 0 0; font-size: .9375rem; color: var(--ink-2); }
.cert-basis span { display: inline-block; margin-right: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cert-company { margin: 8px 0 0; font-size: .875rem; color: var(--muted); }
.cert-trainer { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.cert-trainer .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
/* Hình ảnh triển khai (trong section Quy trình nền navy) */
.gallery-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.gallery-head { margin-bottom: 18px; }
.gallery-head .kicker { margin-bottom: 6px; }
.gallery-head .process-intro { margin-top: 8px; font-size: .9375rem; }
.gallery-title { color: #fff; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 800; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; list-style: none; margin: 0; padding: 0; }
.gallery-block .gallery { max-width: 980px; margin-left: auto; margin-right: auto; }
.gallery-item { min-width: 0; }
.gallery-link { display: block; border-radius: var(--radius); overflow: hidden; background: #13315C; aspect-ratio: 16 / 9; }
.gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.gallery-link:hover img { transform: scale(1.03); }
.gallery-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.gallery-cap { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-size: .8125rem; line-height: 1.4; color: #C3CFDD; }
.gallery-note { margin: 18px auto 0; max-width: 72ch; text-align: center; font-size: .8125rem; font-style: italic; line-height: 1.5; color: #C3CFDD; }
.gallery-num { flex: none; font-size: .75rem; font-weight: 700; color: var(--yellow); }
.gallery-hint { display: none; }
/* Cửa sổ xem ảnh */
.photo-dialog { width: min(96vw, 1100px); max-height: 94vh; max-height: 94dvh; padding: 0; border: 0; border-radius: var(--radius); background: #0B1A2E; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.photo-dialog::backdrop { background: rgba(7,26,51,.85); }
.photo-inner { position: relative; display: flex; flex-direction: column; }
.photo-close { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; }
.photo-inner figure { margin: 0; }
.photo-inner img { display: block; width: 100%; height: auto; max-height: calc(94dvh - 64px); object-fit: contain; background: #0B1A2E; }
.photo-inner figcaption { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px 14px; font-size: .9375rem; }
.photo-count { flex: none; font-weight: 700; color: var(--yellow); }
.photo-nav { position: absolute; top: calc(50% - 32px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy-800); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.photo-nav:hover { background: #fff; }
.photo-nav .icon { width: 22px; height: 22px; }
.photo-prev { left: 10px; }
.photo-prev .icon { transform: rotate(180deg); }
.photo-next { right: 10px; }
@media (max-width: 1080px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .gallery-block { margin-top: 32px; padding-top: 28px; }
  /* Mobile: cuộn ngang với scroll-snap, mỗi ảnh ~86% bề rộng */
  .gallery-block .gallery { max-width: none; margin: 0 -16px; }
  .gallery { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-item { flex: 0 0 86%; scroll-snap-align: start; }
  .gallery-link:hover img { transform: none; }
  .gallery-hint { display: block; margin-top: 8px; font-size: .8125rem; color: #9FB0C4; text-align: center; }
  .photo-nav { width: 44px; height: 44px; top: 30%; }
}
@media (max-width: 374px) { .gallery-block .gallery { margin: 0 -14px; } .gallery { margin: 0 -14px; padding: 0 14px 6px; scroll-padding-left: 14px; } }
.cert-btn { margin-top: 24px; --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: var(--navy-800); }
.cert-btn:hover, .cert-btn:focus-visible { --btn-bg: var(--navy-800); color: #fff; }
.cert-btn .icon { width: 18px; height: 18px; }
.cert-btn:hover .icon { transform: none; }
.cert-extra {
  margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9375rem; color: var(--ink-2);
}
.cert-extra p { flex: 1; min-width: 0; }
.cert-extra-tag { color: var(--navy-800); }
.cert-extra-icon { flex: none; width: 24px; height: 24px; color: var(--navy-600); }
.cert-extra-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--navy-800); }

/* Hồ sơ bàn giao */
.records-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 52px; align-items: center; }
.records-figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 964 / 1100; background: #DCE3EC; }
.records-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.records-copy h2 { margin-bottom: 20px; }
.doc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.doc-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: var(--radius); }
.doc-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--navy-800); color: var(--yellow); }
.doc-icon .icon { width: 24px; height: 24px; }
.doc-item h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.doc-item p { margin-top: 4px; font-size: .875rem; color: var(--ink-2); }
.records-text { color: var(--ink); }
/* Template dùng chung: số thẻ kết quả linh hoạt, phần giới thiệu trước danh sách, khối không có ảnh */
.records-intro { margin: -6px 0 20px; }
.doc-list--1 { grid-template-columns: 1fr; }
.doc-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-list--3 .doc-item { flex-direction: column; gap: 12px; padding: 16px; }
.doc-list--3 .doc-item h3 { font-size: 1rem; }
.records-grid--solo { grid-template-columns: 1fr; max-width: 980px; }
.audience--solo { grid-template-columns: 1fr; max-width: 820px; }
/* Căn cứ pháp lý */
.basis { border-top: 1px solid var(--line); }
.basis-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.basis-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius); }
.basis-icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: var(--radius-sm); background: #fff; color: var(--navy-700); border: 1px solid var(--line); }
.basis-item h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.basis-item p { margin-top: 4px; font-size: .9375rem; color: var(--ink-2); line-height: 1.55; }
.basis-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: .875rem; color: var(--muted); max-width: 80ch; }
.basis-note .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--orange-700); }
.records-note { margin: 12px 0 22px; font-size: .875rem; color: var(--muted); }
.records-note em { font-style: italic; }
/* Hồ sơ bàn giao có ảnh tài liệu: 3 thẻ (ảnh xem trước giữ nguyên tỷ lệ + nút xem ảnh lớn + tên + mô tả) */
.records-grid.records-grid--docs { grid-template-columns: 1fr; max-width: var(--container); } /* cùng độ rộng container với các section khác */
.doc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 4px 0 16px; padding: 0; list-style: none; }
.doc-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(7,26,51,.04), 0 8px 22px rgba(7,26,51,.06); overflow: hidden; }
.doc-preview { display: block; color: var(--navy-800); text-decoration: none; border-bottom: 1px solid var(--line); }
.doc-frame { display: block; aspect-ratio: 4 / 5; padding: 16px; background: var(--bg-muted); }
.doc-frame img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(7,26,51,.14)); transition: transform .2s ease; }
.doc-zoom { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; font-size: .875rem; font-weight: 700; }
.doc-zoom .icon { width: 18px; height: 18px; }
.doc-preview:hover .doc-zoom { text-decoration: underline; text-underline-offset: 3px; }
.doc-preview:hover .doc-frame img { transform: scale(1.02); }
.doc-card h3 { padding: 16px 18px 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.doc-card p { padding: 6px 18px 18px; font-size: .875rem; color: var(--ink-2); }
.records-grid--docs .records-note { margin-top: 4px; }
/* Thẻ hồ sơ chưa có ảnh mẫu được duyệt: khung trung tính, không phải ảnh giấy tờ */
.doc-frame.doc-frame--pending { aspect-ratio: auto; min-height: 200px; }
.doc-frame--pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; font-size: .875rem; color: var(--muted); }
.doc-frame--pending .icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--navy-700); }
.doc-preview--pending { border-bottom: 1px solid var(--line); }
.doc-zoom--pending { font-weight: 500; color: var(--muted); }
/* Tỷ lệ khung xem trước theo bộ ảnh (outcome.docAspect), ví dụ ảnh hồ sơ ngang 4:3 */
.doc-cards[style*="--doc-ar"] .doc-frame { aspect-ratio: var(--doc-ar); }
/* Khi cùng hàng có thẻ đã có ảnh: khung chờ giữ cùng tỷ lệ để tiêu đề các thẻ thẳng hàng */
.doc-cards:has(.doc-frame img) .doc-frame.doc-frame--pending { aspect-ratio: 4 / 5; min-height: 0; }
/* Hai hồ sơ (Nhóm 4): khối nội dung thu hẹp và căn giữa; khung xem trước vuông để tài liệu dọc và ngang cùng hiển thị trọn */
.records-grid.records-grid--pair { max-width: 1028px; }
.doc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.doc-cards--2 .doc-frame { aspect-ratio: 1 / 1; padding: 20px; }

/* Đối tượng */
.audience { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.audience h2 { margin-bottom: 14px; }
.audience-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.audience-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--navy-800); line-height: 1.5; }
.audience-list .icon { flex: none; width: 20px; height: 20px; margin-top: calc((1.5em - 20px) / 2); color: var(--green); }
.review-box .review-strong { color: var(--navy-800); font-weight: 600; }
.review-box .review-hint { margin: 12px 0 0; font-size: .8125rem; color: var(--muted); }
.review-box { padding: 24px; background: var(--yellow-100); border: 1px solid #F0D27A; border-radius: var(--radius); }
.review-icon { width: 30px; height: 30px; color: var(--orange-700); margin-bottom: 10px; }
.review-box h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.review-box p { color: var(--ink-2); font-size: .9375rem; margin-bottom: 12px; }
.review-box .btn { margin-top: 6px; }

/* Quy trình */
.section-navy { background: var(--navy-800); color: #DCE4EE; }
.section-navy h2 { color: #fff; }
.process { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 24px; position: relative; }
.process::before {
  content: ""; position: absolute; top: 25px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(245,183,0,.7) 0 10px, transparent 10px 18px);
}
.process li { position: relative; text-align: center; padding: 0 6px; }
.step-num {
  position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--yellow); color: var(--navy-900); font-size: 1.1875rem; font-weight: 800;
  box-shadow: 0 0 0 6px var(--navy-800);
}
.process h3 { color: #fff; font-size: 1.0625rem; font-weight: 700; margin-bottom: 6px; }
.process p { font-size: .9375rem; color: #C3CFDD; }
.process-intro { margin: 12px auto 0; color: #C3CFDD; }

/* Nội dung chương trình */
.syllabus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.syllabus li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.sy-num {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 2px solid var(--yellow); color: var(--navy-800); font-weight: 800; font-size: .9375rem; background: #fff;
}
.syllabus h3 { font-size: 1rem; font-weight: 700; }

/* Đăng ký – nền navy để form nổi bật */
.register { background: var(--navy-900); color: #DCE4EE; }
.register h2 { color: #fff; margin-bottom: 12px; }
.register .section-intro { color: #C3CFDD; }
.register-grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 0 56px; align-items: start;
  grid-template-areas: "head form" "aside form";
}
.register-head { grid-area: head; }
.register .form-card { grid-area: form; }
.register-aside { grid-area: aside; }
.register-docs { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: .9375rem; font-weight: 600; }
.register-docs .icon { width: 22px; height: 22px; color: var(--yellow); margin-top: 1px; }
.next-steps { counter-reset: ns; display: grid; gap: 10px; margin: 24px 0 24px; }
.next-steps li { counter-increment: ns; display: flex; gap: 12px; align-items: flex-start; color: #fff; }
.next-steps li::before {
  content: counter(ns); display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 1px;
  border-radius: 50%; background: var(--yellow); color: var(--navy-900); font-size: .8125rem; font-weight: 800;
}
.hotline-lg { color: #fff; }
.hotline-lg .hotline-icon { width: 48px; height: 48px; background: var(--yellow); color: var(--navy-900); }
.hotline-lg small { color: #C3CFDD; }
.hotline-lg strong { font-size: 1.375rem; }
.hotline-lg:hover strong { color: var(--yellow); }

/* CTA cuối */
.final-cta { background: var(--navy-800); color: #fff; position: relative; }
.final-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--navy-900) 14px 28px);
}
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 60px; padding-bottom: 56px; }
.final-cta h2 { color: #fff; max-width: 22ch; }
.final-cta p { margin-top: 12px; color: #C3CFDD; font-size: 1.0625rem; max-width: 56ch; }
.final-cta .btn-row { flex: none; }

/* 7. Form ------------------------------------------------------------------ */
.form-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.req { color: var(--red); font-weight: 700; }
.optional { font-weight: 500; font-size: .8125rem; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9375rem; color: var(--navy-800); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid #B9C4D1; border-radius: var(--radius-sm); transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder { color: #6E7C8E; }
.field input:hover, .field textarea:hover { border-color: var(--navy-600); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(30,70,119,.18); }
.field [aria-invalid="true"] { border-color: var(--red); background: #FFFBFA; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180,35,24,.16); }
.field-error { display: none; font-size: .875rem; font-weight: 600; color: var(--red); }
.field-error:not(:empty) { display: flex; gap: 6px; align-items: flex-start; }
.field-error:not(:empty)::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--red); color: #fff; font-size: .75rem; font-weight: 800;
}
.field-check { margin: 18px 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--navy-800); cursor: pointer; }
.field-check label { font-weight: 500; color: var(--ink); cursor: pointer; font-size: .9375rem; }
.field-check .field-error { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error-summary {
  margin-bottom: 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--red-100); border: 1px solid #F3B8B2; color: #7A1A12; font-size: .9375rem;
}
.form-error-summary strong { display: block; margin-bottom: 4px; }
.form-error-summary ul { list-style: disc; padding-left: 20px; }
.form-error-summary a { color: #7A1A12; font-weight: 600; }
.spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(7,26,51,.25); border-top-color: var(--navy-900); border-radius: 50%; animation: spin .8s linear infinite; }
.submit-btn.is-loading { cursor: progress; opacity: .9; }
.submit-btn.is-loading .spinner { display: inline-block; }
.form-privacy { margin-top: 12px; font-size: .8125rem; color: var(--muted); text-align: center; }
.form-success { text-align: center; padding: 24px 8px; }
.form-success:focus { outline: none; }
.success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-100); color: var(--green); }
.success-icon .icon { width: 32px; height: 32px; }
.form-success h3 { font-size: 1.375rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-2); margin: 0 auto 10px; max-width: 46ch; }
.demo-mode-note { font-size: .875rem; background: var(--yellow-100); border: 1px dashed #D9A400; padding: 8px 12px; border-radius: var(--radius-sm); }
.form-success .btn { margin-top: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 8. FAQ ------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px; align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-head h2 { margin-bottom: 12px; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { font-size: 1.0625rem; font-weight: 700; }
.faq-q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 4px; min-height: 56px; background: none; border: 0; font: inherit; color: var(--navy-800); text-align: left; cursor: pointer;
}
.faq-q button:hover { color: var(--orange-700); }
.faq-icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--navy-100); color: var(--navy-800); transition: transform .3s var(--ease), background-color .2s; }
.faq-q button[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--yellow); }
.faq-panel { display: grid; grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; }
.faq-inner p { padding: 0 4px 18px; color: var(--ink-2); max-width: 70ch; }
.js .faq-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease), visibility 0s .3s; }
.js .faq-item.is-open .faq-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--ease), visibility 0s 0s; }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #B8C5D4; padding-top: 44px; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.15fr 1.45fr .8fr; gap: 40px; padding-bottom: 28px; }
.site-footer .brand { display: inline-flex; padding: 0; }
.brand-light { color: #fff; }
.brand-light .brand-text small { color: #9FB0C4; }
/* Logo nền tối: đặt trên ô sáng để không chìm vào nền navy */
.site-footer .brand { --logo: 56px; }
.brand-light .brand-mark { box-sizing: content-box; padding: 4px; background: #fff; border-radius: 50%; }
.footer-brand p { margin-top: 14px; max-width: 42ch; }
.footer-brand .legal-name { color: #fff; font-weight: 600; }
.footer-badges { margin-top: 14px; display: grid; gap: 6px; }
.footer-badges li { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); font-size: .8125rem; color: #DCE4EE; width: fit-content; max-width: 100%; }
.footer-title { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
/* Icon canh theo dòng đầu tiên (địa chỉ nhiều dòng không bị lệch icon) */
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.footer-contact .icon { color: var(--yellow); width: 18px; height: 18px; margin-top: 13px; }
.footer-contact li > span { padding: 10px 0; line-height: 1.5; }
.footer-contact li > span .icon { margin-top: 0; }
.footer-contact strong { color: #fff; font-weight: 600; }
.footer-address strong { display: block; }
.site-footer a { color: #DCE4EE; text-decoration: none; display: inline-block; padding: 10px 0; }
.site-footer a:hover { color: var(--yellow); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; padding-bottom: 22px; display: grid; gap: 6px; font-size: .8125rem; }
.footer-disclaimer { color: #9FB0C4; }

/* 10. Cụm liên hệ nổi, modal, toast ---------------------------------------- */
/* Desktop (≥ 1280px): 3 nút dọc bên phải; < 1280px: thanh 3 cột cuối màn hình */
.contact-dock {
  position: fixed; z-index: 80; right: 12px; top: 50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transform: translate(0, -50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s, transform .2s ease;
}
.contact-dock.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s, transform .2s ease; }
.cd-btn {
  display: inline-flex; flex-direction: row-reverse; align-items: center; height: 48px; padding: 0;
  border-radius: 24px; text-decoration: none; font-weight: 700; font-size: .9375rem; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(7,26,51,.22); transition: background-color .15s, box-shadow .15s;
}
.cd-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.cd-icon .icon { width: 22px; height: 22px; }
.cd-label { max-width: 0; overflow: hidden; transition: max-width .2s ease, padding .2s ease; }
.cd-short { display: none; }
.cd-btn:hover .cd-label, .cd-btn:focus-visible .cd-label { max-width: 200px; padding-left: 18px; }
.cd-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.cd-btn:active { transform: translateY(1px); }
.cd-call { background: var(--navy-800); color: #fff; }
.cd-call:hover { background: var(--navy-700); color: #fff; }
.cd-quote { background: var(--yellow); color: var(--navy-900); }
.cd-quote:hover { background: var(--yellow-hover); color: var(--navy-900); }
.cd-zalo { background: #0068FF; color: #fff; }
.cd-zalo:hover { background: #0055D4; color: #fff; }
@media (min-width: 1280px) { .cd-call { order: 1; } .cd-zalo { order: 2; } .cd-quote { order: 3; } } /* cụm bên phải: Gọi – Zalo – Báo giá */

@media (max-width: 1279px) {
  /* Thanh 2 mục cố định: Chat Zalo (nổi bật) – Gọi tư vấn. Không có "Báo giá" (form vẫn ở trong trang) */
  /* Khoảng đệm cuối trang để thanh cố định không che nội dung cuối (đặt ở footer để giữ nền navy) */
  .site-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .contact-dock {
    left: 0; right: 0; top: auto; bottom: 0; transform: translateY(110%);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(7,26,51,.08);
  }
  .contact-dock.is-visible { transform: none; }
  .cd-quote { display: none; }
  .cd-btn {
    flex-direction: row; justify-content: center; gap: 8px; height: 52px; min-height: 48px;
    border-radius: var(--radius-sm); box-shadow: none; font-size: .9375rem; line-height: 1.15;
  }
  .cd-icon { width: auto; height: 22px; }
  .cd-icon .icon { width: 20px; height: 20px; }
  .cd-label, .cd-btn:hover .cd-label, .cd-btn:focus-visible .cd-label { max-width: none; padding: 0; overflow: visible; white-space: nowrap; }
  .cd-short { display: inline; }
  .cd-long { display: none; }
  .cd-zalo { background: #0068FF; color: #fff; border: 2px solid #0068FF; }
  .cd-zalo:hover { background: #0055D4; border-color: #0055D4; color: #fff; }
  .cd-call { background: #fff; color: var(--navy-800); border: 2px solid var(--navy-800); }
  .cd-call:hover { background: var(--navy-100); color: var(--navy-800); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dock, .cd-label { transition: none; }
}
/* Khi JavaScript không chạy: luôn hiển thị để vẫn gọi/nhắn được */
html:not(.js) .contact-dock { opacity: 1; visibility: visible; pointer-events: auto; }
@media (max-width: 1279px) { html:not(.js) .contact-dock { transform: none; } }
.modal-open, .modal-open body { overflow: hidden; }
.license-dialog {
  width: min(94vw, 760px); max-height: 94vh; max-height: 94dvh; padding: 0; border: 0; border-radius: var(--radius);
  background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden;
}
.license-dialog::backdrop { background: rgba(7,26,51,.75); }
.license-inner { position: relative; display: flex; flex-direction: column; max-height: 94vh; max-height: 94dvh; }
.license-close {
  position: sticky; top: 0; z-index: 1; align-self: flex-end; margin: 10px 10px -54px 0;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  background: var(--navy-800); color: #fff; border: 0; border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer;
}
.license-close .icon { width: 18px; height: 18px; }
.license-close:hover { background: var(--navy-700); }
.license-inner figure { margin: 0; overflow-y: auto; }
.license-inner img { width: 100%; height: auto; background: #F3F6F9; }
.license-inner figcaption { display: grid; gap: 6px; padding: 12px 16px 16px; font-size: .875rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 20px);
  width: max-content; max-width: min(92vw, 460px); padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--navy-900); color: #fff; font-size: .9375rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 11. Chuyển động – chỉ ẩn nội dung khi script.js đã sẵn sàng (an toàn khi JS lỗi) */
.reveal-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
.reveal-ready .reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal-ready .reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* 12. Responsive ----------------------------------------------------------- */

/* ---- Hero theo chiều cao màn hình (desktop/laptop, bố cục 2 cột) ---- */
@media (min-width: 901px) and (max-height: 760px) {
  .hero { --hero-pad-top: 20px; --hero-pad-bottom: 26px; --hero-space: 12px; }
  .eyebrow { margin-bottom: 10px; }
  .hero-points { gap: 6px 32px; }
  .hero-points li { font-size: .9063rem; }
  .trust-inner { padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .hero { --hero-pad-top: 16px; --hero-pad-bottom: 20px; --hero-space: 10px; }
  .lead { font-size: 1rem; }
}
@media (min-width: 901px) and (min-height: 901px) {
  .hero { --hero-pad-top: clamp(32px, 3.2vw, 56px); --hero-pad-bottom: clamp(40px, 3.6vw, 64px); --hero-space: 20px; }
}

@media (max-width: 1599px) {
  /* 6 mục menu: hotline dạng gọn, tên thương hiệu nhỏ hơn một chút */
  .header-inner { gap: 16px; }
  .site-header .brand-text { font-size: 1rem; }
  .header-actions { gap: 12px; }
  .header-actions .hotline-icon { width: 32px; height: 32px; }
  .header-actions .hotline-text strong { font-size: 1rem; }
}
@media (max-width: 1360px) {
  .site-header .brand { --logo: 56px; }
  .site-header.is-scrolled .brand { --logo: 50px; }
  .header-actions .hotline-text small { display: none; }
}

@media (max-width: 1339px) {
  .site-header .brand { --logo: 52px; }
  .site-header.is-scrolled .brand { --logo: 48px; }
  /* Menu dạng ngăn kéo */
  .js .nav-toggle, .js .call-mobile { display: inline-grid; }
  .header-actions .hotline { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .js .site-nav {
    position: fixed; z-index: 95; overscroll-behavior: contain; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
    margin: 0; padding: 84px 24px 28px; background: #fff; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s .3s;
    box-shadow: -10px 0 40px rgba(7,26,51,.18);
  }
  .js .site-nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s 0s; }
  .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav-item { border-bottom: 1px solid var(--line); }
  .js .nav-row { justify-content: space-between; }
  .js .nav-link { flex: 1; min-height: 52px; padding: 14px 4px; font-size: 1.0625rem; color: var(--navy-800); border-radius: 0; white-space: normal; }
  .js .nav-link:hover { background: none; }
  .js .nav-row:hover, .js .has-sub.is-open > .nav-row { background: none; }
  .js .sub-toggle, .js .group-toggle { display: inline-grid; flex: none; width: 48px; height: 48px; }
  .js .chev { width: 20px; height: 20px; }
  /* Accordion: menu con nằm trong luồng, đóng mặc định */
  .js .subnav, .js .mega { position: static; width: auto; margin: 0 0 12px; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; }
  .js .has-sub.is-open > .mega { display: block; }
  .js .mega-group { border-bottom: 1px solid var(--line); }
  .js .mega-head { margin: 0; padding: 0; border: 0; justify-content: space-between; }
  .js .mega-head a { flex: 1; display: flex; align-items: center; min-height: 48px; font-size: .9375rem; letter-spacing: .02em; text-transform: none; }
  .js .mega-body { display: none; padding: 0 0 10px; }
  .js .mega-group.is-open > .mega-body { display: block; }
  .js .mega-group--wide.is-open > .mega-body { display: block; }
  .js .mega-label { margin: 8px 0 2px; }
  .js .mega-list a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 8px; font-size: .9375rem; }
  .js .mega-all { margin: 0; padding: 6px 0 2px; border: 0; }
  .js .mega-all a { min-height: 44px; }
  .js .nav-toggle { position: relative; z-index: 96; }
  /* Không có JS: menu cuộn ngang dưới logo */
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; }
  html:not(.js) .site-nav { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  html:not(.js) .header-actions { margin-left: auto; }
}

@media (max-width: 1080px) {
  .hero-grid { gap: 32px; }
  .hero-points { gap: 10px 24px; }
  .trust-inner { gap: 16px; }
  .trust-list { gap: 10px 14px; }
  .trust-list .icon { width: 28px; height: 28px; padding: 5px; }
  .trust-list strong { font-size: .9063rem; }
  .records-grid { grid-template-columns: .5fr 1.5fr; gap: 32px; align-items: start; }
  .syllabus { grid-template-columns: 1fr 1fr; }
  .register-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "aside"; gap: 0; }
  .register-head { margin-bottom: 20px; }
  .next-steps { margin: 18px 0 20px; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-head { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 900px) {
  .trust-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-link { align-self: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-figure { aspect-ratio: 2 / 1; }
  .hero-figure img { object-position: 55% 28%; }
  .hero-points { grid-template-columns: 1fr 1fr; }
  .section { padding: 52px 0; }
  .split-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
  .records-grid { grid-template-columns: 1fr; }
  .records-figure { display: none; } /* ảnh minh họa ẩn trên màn nhỏ để trang gọn */
  .doc-cards { gap: 14px; }
  .doc-frame { padding: 12px; }
  .doc-card h3 { padding: 14px 14px 0; font-size: 1rem; }
  .doc-card p { padding: 6px 14px 16px; }
  .cert-block { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 24px; }
  .cert-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-facts > div:first-child { grid-column: 1 / -1; }
  .audience { grid-template-columns: 1fr; gap: 24px; }
  /* Quy trình: timeline dọc */
  .process { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
  .process::before { top: 10px; bottom: 10px; left: 24px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(245,183,0,.7) 0 10px, transparent 10px 18px); }
  .process li { display: grid; grid-template-columns: 50px 1fr; column-gap: 18px; text-align: left; padding: 0 0 22px; }
  .process li:last-child { padding-bottom: 0; }
  .step-num { grid-row: 1 / span 2; margin: 0; }
  .process h3 { align-self: end; margin-top: 2px; }
}

@media (max-width: 767px) {
  .doc-cards { grid-template-columns: 1fr; gap: 16px; }
  .doc-frame { aspect-ratio: 5 / 4; }
  .doc-cards--2 { gap: 16px; }
  .doc-cards--2 .doc-frame { aspect-ratio: 5 / 4; padding: 12px; }
  .doc-frame.doc-frame--pending { min-height: 140px; }
  .doc-cards:has(.doc-frame img) .doc-frame.doc-frame--pending { aspect-ratio: 5 / 4; }
  :root { --header-h: 60px; }
  .container { padding: 0 16px; }
  .section { padding: 36px 0; }
  .process p { display: none; } /* tiêu đề bước đã đủ rõ trên màn nhỏ */
  .process li { padding-bottom: 14px; }
  .footer-badges { display: none; } /* đã có ở khối năng lực pháp lý */
  .register-head .section-intro { margin-bottom: 16px; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .site-header.is-scrolled .header-inner { height: 56px; }
  .header-cta { display: none; }
  .js .call-mobile { display: none; } /* mobile: liên hệ qua 2 nút Hero + thanh cố định, header chỉ giữ logo + menu */
  .site-header .brand { --logo: 44px; gap: 10px; }
  .site-header .brand-text { font-size: .9375rem; }
  .header-actions { gap: 10px; }
  .site-header.is-scrolled .brand { --logo: 42px; }
  .site-footer .brand { --logo: 52px; }
  .site-header .header-inner { gap: 12px; }
  .brand-text { font-size: .9375rem; }
  .brand-text small { font-size: .6875rem; margin-top: 2px; }
  .hero { --hero-pad-top: 18px; --hero-pad-bottom: 28px; --hero-space: 12px; }
  .hero-grid { gap: 20px; }
  .eyebrow { font-size: .75rem; margin-bottom: 10px; }
  .lead { font-size: 1rem; }
  /* Mobile: chỉ 2 CTA liên hệ – [Chat Zalo] (chính) [Gọi tư vấn], chia đều */
  .hero-ctas { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-ctas .hero-quote { display: none; }
  .hero-ctas .btn-zalo, .hero-ctas .btn-link-call { min-height: 50px; padding: 10px 12px; justify-content: center; font-size: 1rem; }
  .hero-ctas .btn-zalo { --btn-bg: #0068FF; --btn-fg: #fff; --btn-bd: #0068FF; }
  .hero-ctas .btn-zalo .icon { color: #fff; }
  .hero-ctas .btn-zalo:hover { --btn-bg: #0055D4; --btn-bd: #0055D4; color: #fff; }
  .hero-ctas .btn-link-call { --btn-bg: #fff; --btn-bd: var(--navy-800); text-decoration: none; }
  .hero-ctas .btn-link-call:hover { --btn-bg: var(--navy-100); color: var(--navy-800); }
  .hero-ctas .btn-link-call .call-txt { display: none; }
  .hero-ctas .btn-link-call .call-txt--mobile { display: inline; }
  /* Mobile: một cột, chữ không thu nhỏ quá mức */
  .hero-points { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; padding-top: 14px; }
  .hero-points li { font-size: .9375rem; gap: 8px; }
  .hero-points .icon { width: 18px; height: 18px; margin-top: calc((1.5em - 18px) / 2); }
  /* Ảnh hero thấp, giữ khuôn mặt trong khung */
  .hero-figure { aspect-ratio: 16 / 7; }
  .hero-figure img { object-position: 55% 26%; }
  .trust-inner { padding-top: 14px; padding-bottom: 14px; }
  .trust-list { gap: 12px; }
  .trust-list .icon { width: 28px; height: 28px; padding: 5px; }
  .trust-list strong { font-size: .9375rem; }
  .trust-link { align-self: stretch; justify-content: center; }
  /* Thứ tự mobile: nhãn → tiêu đề → 3 ô → căn cứ → ảnh → nút */
  .cert-block { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 20px 16px; }
  .cert-content { display: contents; }
  .cert-body { order: 1; }
  .cert-figure { order: 2; width: 100%; max-width: 260px; margin: 22px auto 0; }
  .cert-btn { order: 3; width: 100%; margin-top: 18px; }
  .cert-body h2 { margin-bottom: 18px; }
  .cert-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cert-facts > div { padding: 10px 12px; }
  .cert-facts dd { font-size: 1rem; }
  .cert-extra { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
  .cert-extra-link { min-height: 40px; }
  .doc-list { grid-template-columns: 1fr; gap: 10px; }
  .doc-list--3 .doc-item { flex-direction: row; gap: 14px; padding: 14px; }
  .basis-list { grid-template-columns: 1fr; gap: 10px; }
  .basis-item { padding: 14px; }
  .doc-item { padding: 14px; }
  .hero h1 { font-size: 1.75rem; line-height: 1.25; }
  .section-cta .btn, .records-copy > .btn { width: 100%; }
  .syllabus { grid-template-columns: 1fr; }
  .syllabus li { padding: 12px 0; }
  .review-box { padding: 18px 16px; }
  .review-box .btn { width: 100%; }
  .form-card { padding: 22px 16px; }
  .field-grid { grid-template-columns: 1fr; gap: 14px; }
  .field textarea { min-height: 92px; }
  .final-cta-inner { padding-top: 48px; padding-bottom: 44px; }
  .final-cta .btn-row { width: 100%; }
  .final-cta .btn-row .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .hotline-lg strong { font-size: 1.25rem; }

  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 374px) {
  .eyebrow { letter-spacing: .04em; gap: 8px; }
  .eyebrow::before { width: 18px; }
  .container { padding: 0 14px; }
  .brand-text { font-size: .875rem; letter-spacing: .01em; }
  .site-header .brand, .site-header.is-scrolled .brand { --logo: 42px; gap: 8px; }
  .site-header .brand-text { font-size: .875rem; }
  .site-header .brand-text small { display: none; } /* màn rất nhỏ: chỉ giữ tên chính */
  .icon-btn { width: 44px; height: 44px; }
  .header-actions { gap: 8px; }
  .header-inner { gap: 10px; }
  .cert-figure { max-width: 230px; }
  .trust-list strong { font-size: .875rem; }
}

@media print {
  .site-header, .contact-dock, .nav-backdrop, .toast, .license-dialog { display: none !important; }
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* Màn rất hẹp hoặc khi phóng to trình duyệt (≈ 360px ở 110–125%) */
@media (max-width: 340px) {
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand-text, .site-header .brand-text { white-space: normal; font-size: .8125rem; max-width: 9.5em; }
  .site-header .brand, .site-header.is-scrolled .brand { --logo: 38px; }
  .icon-btn { width: 42px; height: 42px; }
  .hero-points { grid-template-columns: 1fr; }
  .trust-list { grid-template-columns: 1fr; }
  .cd-short { font-size: .75rem; }
}

/* ==========================================================================
   TRANG TỔNG (huan-luyen-an-toan-lao-dong) – các khối riêng, không dùng ở trang nhóm
   ========================================================================== */
.hero-sublink { margin-top: 12px; font-size: .9375rem; }
.hero-sublink a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: 600; color: var(--navy-700); text-underline-offset: 3px; }
.hero-sublink .icon { width: 16px; height: 16px; }

/* Bộ chọn nhóm */
.finder { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; padding: 0; list-style: none; }
.finder-item { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.finder-item--unsure { grid-column: 1 / -1; border-style: dashed; }
.finder-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer; }
.finder-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.finder-num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--navy-100); color: var(--navy-800); font-weight: 800; }
.finder-label { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: .875rem; line-height: 1.35; color: var(--ink-2); }
.finder-label strong { font-size: 1rem; color: var(--navy-800); }
.finder-tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid #B9C4D1; border-radius: 6px; color: transparent; }
.finder-tick .icon { width: 16px; height: 16px; }
.finder-more { display: none; padding: 0 16px 16px 64px; font-size: .875rem; color: var(--ink-2); }
.finder-more a { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 32px; font-weight: 700; color: var(--navy-700); }
.finder-more .icon { width: 16px; height: 16px; }
.finder-item:has(input:checked) { border-color: var(--navy-700); box-shadow: 0 6px 18px rgba(7,26,51,.08); }
.finder-item:has(input:checked) .finder-num { background: var(--navy-800); color: var(--yellow); }
.finder-item:has(input:checked) .finder-tick { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.finder-item:has(input:checked) .finder-more { display: block; }
.finder-item:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.finder-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.finder-note { flex: 1 1 320px; font-size: .875rem; color: var(--muted); }

/* 6 thẻ nhóm */
.group-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
.group-cards > li { display: flex; }
.group-card { display: flex; flex-direction: column; width: 100%; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(7,26,51,.04), 0 8px 22px rgba(7,26,51,.06); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
.group-card:hover { border-color: var(--navy-600); box-shadow: 0 12px 28px rgba(7,26,51,.12); transform: translateY(-2px); }
.group-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.group-card-head { display: flex; align-items: center; gap: 10px; }
.group-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--navy-800); color: var(--yellow); }
.group-badge .icon { width: 22px; height: 22px; }
.group-no { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-700, #B45309); }
.group-card h3 { margin-top: 14px; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--navy-800); }
.group-desc { margin-top: 6px; font-size: .9063rem; color: var(--ink-2); line-height: 1.5; }
.group-facts { display: grid; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; }
.group-facts div { display: flex; gap: 8px; }
.group-facts dt { flex: none; width: 72px; color: var(--muted); }
.group-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.group-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--navy-700); }
.group-more .icon { width: 18px; height: 18px; }
.group-card:hover .group-more { text-decoration: underline; text-underline-offset: 3px; }

/* Trường nhóm trong form */
.field-groups { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-groups legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; color: var(--navy-800); }
.group-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.group-check { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid #B9C4D1; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.field .group-check input { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100%; opacity: 0; margin: 0; padding: 0; cursor: pointer; }
.group-check:has(input:checked) { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.group-check:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Bảng kết quả theo nhóm */
.hub-table-wrap { margin: 0 0 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hub-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hub-table th, .hub-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.hub-table thead th { background: var(--navy-800); color: #fff; font-size: .875rem; font-weight: 700; }
.hub-table tbody tr:last-child > * { border-bottom: 0; }
.hub-table tbody th { font-weight: 400; }
.hub-table tbody th a { font-weight: 800; color: var(--navy-800); }
.hub-table tbody th span { display: block; font-size: .8125rem; color: var(--muted); }
.hub-table-note { margin: -8px 0 24px; font-size: .875rem; color: var(--muted); max-width: 90ch; }
.hub-gallery .gallery-block { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1080px) {
  .finder-list, .group-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .finder-list, .group-cards { grid-template-columns: 1fr; gap: 10px; }
  .finder-more { padding-left: 16px; }
  .group-card { padding: 18px; }
  .group-desc { display: none; } /* mobile: thẻ gọn – tên nhóm, đối tượng, thời lượng, kết quả */
  .finder-foot .btn { width: 100%; }
  .hub-table thead { display: none; }
  .hub-table, .hub-table tbody, .hub-table tr, .hub-table th, .hub-table td { display: block; width: 100%; }
  .hub-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .hub-table tbody tr:last-child { border-bottom: 0; }
  .hub-table th, .hub-table td { padding: 2px 0; border: 0; }
  .hub-table td::before { content: attr(data-label) ": "; color: var(--muted); }
}

/* 13. Tin tức (v2.2) ------------------------------------------------------- */
/* Breadcrumb dùng chung cho trang tin tức và bài viết */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .875rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--navy-800); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--navy-800); font-weight: 700; }
/* Tiêu đề trang/bài tin tức không giới hạn 15.5em như hero trang huấn luyện */
.hero .news-title { max-width: none; }

/* Thẻ bài viết: khung .group-card gốc, ảnh lên đầu, nội dung bên dưới */
.news-grid { align-items: stretch; }
.group-card.news-card { padding: 0; overflow: hidden; }
.news-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #DCE3EC; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-thumb--empty { display: grid; place-items: center; align-content: center; gap: 10px; background: var(--navy-800); }
.news-thumb--empty img { width: 72px; height: 72px; object-fit: contain; }
.news-thumb--empty span { color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.news-body { display: flex; flex-direction: column; padding: 18px 20px 20px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.news-cat { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: var(--yellow-100); color: var(--orange-700); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
a.news-cat:hover { color: var(--orange-700); text-decoration: underline; }
.news-body h3 { margin-top: 10px; }
.news-body .group-desc { margin-top: 6px; }
/* Mô tả thẻ tin tức luôn hiện, giới hạn đúng 2 dòng (ghi đè rule ẩn
   .group-desc trên mobile của CSS gốc — chỉ áp dụng cho thẻ tin tức,
   thẻ nhóm huấn luyện vẫn giữ nguyên như mẫu gốc). */
.news-body .group-desc,
.news-featured-body .group-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bài viết nổi bật ở đầu trang danh sách */
.news-featured { display: grid; grid-template-columns: 1.05fr .95fr; margin-bottom: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(7,26,51,.04), 0 8px 22px rgba(7,26,51,.06); }
.news-featured-thumb { display: block; min-height: 220px; }
.news-featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-featured-thumb .news-thumb { aspect-ratio: auto; height: 100%; min-height: 220px; }
.news-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; }
.news-featured-body h2 { font-size: 1.5rem; line-height: 1.3; }
.news-featured-body h2 a { color: var(--navy-800); text-decoration: none; }
.news-featured-body h2 a:hover { text-decoration: underline; }
.news-featured-body .group-desc { font-size: 1rem; }

/* Trạng thái chưa có bài viết */
.news-empty { padding: 48px 0; text-align: center; color: var(--muted); font-size: 1.0625rem; }

/* Phân trang đánh số */
.pagination { margin-top: 36px; display: flex; justify-content: center; }
.pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers li { display: flex; }
.pagination a.page-numbers, .pagination span.page-numbers { display: inline-grid; place-items: center; min-width: 42px; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--navy-800); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.pagination a.page-numbers:hover { border-color: var(--navy-800); }
.pagination span.page-numbers.current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pagination span.page-numbers.dots { border-color: transparent; background: transparent; }

/* Trang bài viết */
.article-hero-img { margin: 32px auto 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #DCE3EC; }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .9375rem; color: var(--muted); }
.article-meta time { font-weight: 700; color: var(--navy-800); }
.article-body { max-width: 76ch; }
.article-body > * + * { margin-top: 16px; }
.article-body h2 { margin-top: 32px; font-size: 1.5rem; }
.article-body h3 { margin-top: 28px; font-size: 1.25rem; }
.article-body ul { list-style: disc; padding-left: 24px; display: grid; gap: 8px; }
.article-body ol { list-style: decimal; padding-left: 24px; display: grid; gap: 8px; }
.article-body blockquote { margin: 24px 0; padding: 16px 20px; border-left: 4px solid var(--yellow); background: var(--bg-muted); border-radius: 0 var(--radius) var(--radius) 0; }
.article-body img { border-radius: var(--radius); }
.article-body figure { margin: 24px 0; }
.article-body figcaption { margin-top: 8px; font-size: .875rem; color: var(--muted); text-align: center; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.article-body th, .article-body td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.article-body thead th { background: var(--navy-800); color: #fff; }

/* Điều hướng bài trước / bài sau */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 52px; }
.post-nav-item a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-decoration: none; }
.post-nav-item a:hover { border-color: var(--navy-600); }
.post-nav-label { display: block; font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.post-nav-title { display: block; margin-top: 4px; font-weight: 700; color: var(--navy-800); line-height: 1.4; }
.post-nav-item--next { text-align: right; }

/* Bài viết liên quan */
.news-section-title { font-size: 1.5rem; margin-bottom: 24px; }

@media (max-width: 767px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-featured-thumb { min-height: 0; aspect-ratio: 16 / 9; }
  .news-featured-thumb .news-thumb { min-height: 0; }
  .news-featured-body { padding: 20px; }
  .news-featured-body h2 { font-size: 1.25rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-item--next { text-align: left; }
  .article-hero-img { margin-top: 24px; }
}

/* 14. Liên hệ (v2.2) -------------------------------------------------------- */
/* Thẻ thông tin liên hệ dùng lại lưới .group-cards / .group-card. */
.contact-card h3 { font-size: 1.0625rem; }
.contact-card .group-desc { word-break: break-word; }

/* Bố cục form + bản đồ */
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
.contact-form-title { font-size: 1.375rem; margin-bottom: 6px; }
.contact-form-intro { color: var(--ink-2); margin-bottom: 20px; }
.contact-aside { display: grid; gap: 20px; }
.contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #DCE3EC; }
.contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-map iframe { height: 320px; }
}