/* ============================================================
   Trang "Giới thiệu chung" (About Us) — module about-us
   Port từ _design-reference/.../pages-about-org-faculty.css +
   page-hero-shared.css (.hf-about-intro/.hf-tabs/.hf-reason/.hf-leader) +
   home.css (.hf-cta-band) + tokens-and-header.css (.hf-eyebrow) +
   app-shell.css (.hf-reveal stagger) + static-ui.css (tab radio sr-only
   + sibling-selector switch — cơ chế dùng chung mọi tab-group, không port
   lại toàn bộ file, chỉ phần cần cho data-hf-tabgroup="g0").
   Conditional enqueue: chỉ trang có block acf_fc_layout tiền tố "about_".
   ============================================================ */

/* ---- Design tokens (mega-menu.css scope vào .hf-header, không lan ra
   ngoài — trang này ở ngoài .hf-header nên cần khai báo riêng, giống
   home-page.css đã làm cho trang chủ). ---- */
: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);
  --maxw:      1360px;
  --gut:       32px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

.hf-about-hero, .hf-about-stats, .hf-about-intro, .hf-about-tabs, .hf-about-cta {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Resets có phạm vi (không đụng phần còn lại của theme), giống mega-menu.css ---- */
.hf-about-hero a, .hf-about-stats a, .hf-about-intro a, .hf-about-tabs a, .hf-about-cta a { color: inherit; text-decoration: none; }
.hf-about-hero h1, .hf-about-hero h2, .hf-about-hero h3, .hf-about-hero h4,
.hf-about-stats h1, .hf-about-stats h2, .hf-about-stats h3, .hf-about-stats h4,
.hf-about-intro h1, .hf-about-intro h2, .hf-about-intro h3, .hf-about-intro h4,
.hf-about-tabs h1, .hf-about-tabs h2, .hf-about-tabs h3, .hf-about-tabs h4,
.hf-about-cta h1, .hf-about-cta h2, .hf-about-cta h3, .hf-about-cta h4 {
  margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700;
}

.hf-about-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%; }

/* ============ Breadcrumb (dùng lại trong hero) ============ */
.hf-about-hero .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-about-hero .hf-crumb.light { color: rgba(255,255,255,.78); }
.hf-about-hero .hf-crumb a:hover { color: #fff; }
.hf-about-hero .hf-crumb span[aria-current] { color: #fff; }

/* ============ Placeholder "chân dung" / tên cơ sở khi chưa có ảnh ============ */
.hf-about-tabs .hf-placeholder-tag {
  font-family: 'Mulish', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #5b6b82; background: rgba(255,255,255,.66);
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(2px); white-space: nowrap;
}

/* ============ Eyebrow ============ */
.hf-about-hero .hf-eyebrow,
.hf-about-intro .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-about-hero .hf-eyebrow::before,
.hf-about-intro .hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }

/* ============ Section wrapper dùng chung ============ */
.hf-about-tabs.hf-section { padding: 80px 0; }
.hf-about-tabs.hf-section.soft { background: var(--bg-soft); }

/* ============ Hero — editorial lớn (dùng <div>, KHÔNG dùng thẻ <header>
   để tránh dính rule global `header{z-index:20}` của theme legacy). ============ */
.hf-about-hero { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hf-about-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hf-about-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-about-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,44,.55) 0%, rgba(8,20,44,.45) 45%, rgba(8,20,44,.92) 100%);
}
.hf-about-hero-in { position: relative; z-index: 1; max-width: 760px; padding: 120px 0 90px; }
.hf-about-hero-in h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; margin: 18px 0 18px; color: #fff; }
.hf-about-hero-in p { font-size: clamp(16px, 1.6vw, 19px); color: #dbe5f5; max-width: 600px; }
.hf-about-hero-scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1; }
.hf-about-hero-scroll span {
  display: block; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.55); border-radius: 999px; position: relative;
}
.hf-about-hero-scroll span::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 999px; background: #fff; animation: hfAboutScrollCue 1.8s ease-in-out infinite;
}
@keyframes hfAboutScrollCue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: .3; } }

/* ============ Số liệu nổi bật ============ */
.hf-about-stats { background: var(--blue-700); padding: 36px 0; }
.hf-about-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.hf-about-stat {
  text-align: center; color: #fff; position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hf-about-stat.in { opacity: 1; transform: none; }
.hf-about-stat + .hf-about-stat::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.18); }
.hf-about-stat-val { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.hf-about-stat-lab { font-size: 13.5px; color: #b9cae8; font-weight: 600; margin-top: 4px; }

/* ============ Tầm nhìn & Sứ mệnh ============ */
.hf-about-intro { padding: 80px 0; }
.hf-about-intro .hf-about-intro-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.hf-about-media { border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.hf-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-about-copy h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 14px 0 16px; color: var(--ink); }
.hf-about-copy p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; }
.hf-about-vals { display: flex; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.hf-about-vals strong { display: block; font-size: 18px; color: var(--blue); }
.hf-about-vals span { font-size: 13.5px; color: var(--muted); font-weight: 600; }

/* ============ Tabs (Lý do chọn HUFLIT / Ban lãnh đạo / Cơ sở vật chất) ============
   Cơ chế switch: radio ẩn (sr-only) + CSS sibling-selector, port từ static-ui.css.
   Radio (.hf-tab-radio) và .hf-tabs/.hf-tabpanel PHẢI là sibling cùng cấp cha
   (xem cấu trúc trong hf_about_render_tabs() ở inc/about-page.php). Không cần JS. */
.hf-about-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-about-tabs [data-hf-tabpanel] { display: none; }
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="0"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="0"],
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="1"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="1"],
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="2"]:checked ~ [data-hf-tabgroup="g0"][data-hf-tabpanel="2"] { display: block; }
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="0"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="0"],
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="1"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="1"],
.hf-about-tabs .hf-tab-radio[data-hf-tabgroup="g0"][data-hf-tab="2"]:checked ~ * .hf-tab[data-hf-tabgroup="g0"][data-hf-tab="2"] { background: var(--blue); color: #fff; }

.hf-about-tabs .hf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; background: #fff; padding: 7px; border: 1px solid var(--line); border-radius: 4px; width: fit-content; }
.hf-about-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-about-tabs .hf-tab:hover { color: var(--blue); }
.hf-about-tabs .hf-tabpanel { animation: hfAboutTabIn .45s var(--ease); }
@keyframes hfAboutTabIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Reason cards */
.hf-about-tabs .hf-reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hf-about-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-about-tabs .hf-reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.hf-about-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; transition: transform .25s var(--ease); }
.hf-about-tabs .hf-reason-card:hover .hf-reason-ic { transform: rotate(-8deg) scale(1.1); }
.hf-about-tabs .hf-reason-card h3 { font-size: 17px; margin-bottom: 8px; text-wrap: balance; }
.hf-about-tabs .hf-reason-card p { font-size: 14px; color: var(--ink-soft); }

/* Lịch sử — timeline dọc */
.hf-about-tabs .hf-gt-subhead { margin: 42px 0 22px; }
.hf-about-tabs .hf-gt-subhead h3 { font-size: clamp(22px, 2.6vw, 28px); }
.hf-about-tabs .hf-gt-subhead p { font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; }
.hf-about-tabs .hf-vtimeline { position: relative; max-width: 880px; margin: 0 auto; padding-left: 2px; }
.hf-about-tabs .hf-vtimeline::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: var(--blue-100); }
.hf-about-tabs .hf-vt-item { position: relative; display: flex; gap: 26px; margin-bottom: 30px; }
.hf-about-tabs .hf-vt-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); flex-shrink: 0; position: relative; z-index: 1; display: grid; place-items: center; box-shadow: 0 0 0 6px var(--bg-soft); }
.hf-about-tabs .hf-vt-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.hf-about-tabs .hf-vt-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); flex: 1; transition: transform .2s var(--ease), box-shadow .2s; }
.hf-about-tabs .hf-vt-item:hover .hf-vt-card { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hf-about-tabs .hf-vt-year { display: inline-block; font-size: 13px; font-weight: 800; color: var(--orange); letter-spacing: .04em; margin-bottom: 6px; }
.hf-about-tabs .hf-vt-card strong { display: block; font-size: 17px; margin-bottom: 6px; }
.hf-about-tabs .hf-vt-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* Ban lãnh đạo */
.hf-about-tabs .hf-lead-group + .hf-lead-group { margin-top: 8px; }
.hf-about-tabs .hf-leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hf-about-tabs .hf-leader { text-align: center; }
.hf-about-tabs .hf-leader strong { display: block; font-size: 16px; margin-top: 14px; }
.hf-about-tabs .hf-leader span { font-size: 13px; color: var(--muted); font-weight: 700; }
.hf-about-tabs .hf-leader-photo { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 1 / 1; background: repeating-linear-gradient(135deg, #e7ecf3 0px, #e7ecf3 14px, #dde3ec 14px, #dde3ec 28px); display: flex; align-items: center; justify-content: center; }
.hf-about-tabs .hf-leader-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cơ sở vật chất */
.hf-about-tabs .hf-campus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hf-about-tabs .hf-campus-card { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hf-about-tabs .hf-campus-media { overflow: hidden; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #e7ecf3 0px, #e7ecf3 14px, #dde3ec 14px, #dde3ec 28px); display: flex; align-items: center; justify-content: center; }
.hf-about-tabs .hf-campus-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.hf-about-tabs .hf-campus-card:hover .hf-campus-media img { transform: scale(1.08); }
.hf-about-tabs .hf-campus-body { padding: 20px 22px 24px; }
.hf-about-tabs .hf-campus-body h3 { font-size: 19px; margin-bottom: 10px; }
.hf-about-tabs .hf-campus-addr { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.hf-about-tabs .hf-campus-addr svg { flex-shrink: 0; margin-top: 1px; }
.hf-about-tabs .hf-campus-note { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ============ CTA band ============ */
.hf-about-cta.hf-cta-band { background: var(--orange); color: #fff; padding: 60px 0; }
.hf-about-cta .hf-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.hf-about-cta .hf-cta-copy h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 12px 0 12px; max-width: 600px; color: #fff; }
.hf-about-cta .hf-cta-copy p { font-size: 16.5px; color: #fff5ee; max-width: 560px; }
.hf-about-cta .hf-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hf-about-cta .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; }
.hf-about-cta .hf-btn-white { background: #fff; color: var(--blue); }
.hf-about-cta .hf-btn-lg { padding: 16px 30px; font-size: 16.5px; }
.hf-about-cta .hf-btn:hover { transform: translateY(-2px); }

/* ============ Reveal animation (stagger cho card trong section) ============ */
.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-campus-card, .hf-reveal .hf-leader {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hf-reveal.in .hf-reason-card, .hf-reveal.in .hf-campus-card, .hf-reveal.in .hf-leader {
  opacity: 1; transform: none;
}
.hf-reveal :is(.hf-reason-card, .hf-campus-card, .hf-leader):nth-child(1) { transition-delay: .04s; }
.hf-reveal :is(.hf-reason-card, .hf-campus-card, .hf-leader):nth-child(2) { transition-delay: .10s; }
.hf-reveal :is(.hf-reason-card, .hf-campus-card, .hf-leader):nth-child(3) { transition-delay: .16s; }
.hf-reveal :is(.hf-reason-card, .hf-campus-card, .hf-leader):nth-child(4) { transition-delay: .22s; }
.hf-reveal :is(.hf-reason-card, .hf-campus-card, .hf-leader):nth-child(n+5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .hf-reveal, .hf-reveal * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hf-about-stat { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .hf-about-stats-row { grid-template-columns: repeat(2, 1fr); }
  .hf-about-stat:nth-child(3)::before { display: none; }
  .hf-about-tabs .hf-reason-grid,
  .hf-about-tabs .hf-leader-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hf-about-hero { min-height: 70vh; }
  .hf-about-hero-in { padding: 90px 0 60px; }
  .hf-about-intro .hf-about-intro-in { grid-template-columns: 1fr; }
  .hf-about-tabs .hf-reason-grid,
  .hf-about-tabs .hf-leader-grid,
  .hf-about-tabs .hf-campus-grid { grid-template-columns: 1fr; }
  .hf-about-cta .hf-cta-in { flex-direction: column; align-items: flex-start; }
}

/* ===== Anchor scroll (module mapping-page, đợt Bảo đảm chất lượng + Lý do chọn HUFLIT) ===== */
/* 140px = 134px chiều cao .hf-header cố định (xem org-structure.css) + 6px đệm. */
/* .hf-tab-radio: phòng hờ race giữa scroll-to-fragment tự nhiên của trình duyệt (nhắm thẳng
   radio nếu hash trỏ trực tiếp id radio) và scrollIntoView() của JS — xem quality-assurance-page.css. */
.hf-about-intro[id],
.hf-about-tabs .hf-tab-radio,
.hf-about-tabs .hf-tabs[data-hf-tabgroup],
.hf-about-tabs [id] { scroll-margin-top: 140px; }
/* Selector "html" trông global nhưng file này CHỈ enqueue khi hf_about_page_has_about_blocks() = true
   (hf_about_assets(), wp_enqueue_scripts) — hiệu lực thực tế chỉ trên trang có block about_*. */
html { scroll-behavior: smooth; }