/* ============================================================
   Trang "Trải nghiệm sinh viên" — module student-experience iteration 5 (SELF-CONTAINED).
   Port từ _design-reference/20260819-HUFLIT-website-standalone/HUFLIT-standalone.html
   (khối "v58 — Student experience overview and topic-card pages", dòng 6959–7053
   + 7120–7128). Conditional enqueue: chỉ trang có block acf_fc_layout tiền tố "ex58_"
   (hf_ex58_is_page() trong inc/experience58-page.php), priority 22 → SAU mega-menu.css.

   ⚠ SCOPE BẮT BUỘC: mọi rule đặt dưới `.hf-experience58` (wrapper <main> của trang này).
   Các class .hf-shell / .hf-eyebrow cũng do HEADER/MEGA-MENU + FOOTER dùng; file này load
   SAU mega-menu.css nên rule TRẦN sẽ đè định nghĩa gốc, làm mega/footer co lại CHỈ trên
   trang này — mà gate fidelity crop `.hf-page` không nhìn thấy. Theo đúng convention của
   why-huflit-page.css / home-page-v3.css.

   KHÔNG port phần lưới thẻ `.hf-ex58-topic-grid/-card/-media/-copy` (dòng 7011–7018,
   7022, 7039) — 12 trang chủ đề vẫn hoãn, ngoài phạm vi.
   Phần hero trang chủ đề (7005–7010, 7044–7048) và `.hf-ex58-faq*` (7130–7215) nay ĐÃ
   port ở iteration 9, nằm trong assets/css/experience58-faq.css (chỉ nạp trên
   templates/student-experience-faq.php); file này giữ phần dùng chung cho cả 2 template:
   token trên `.hf-experience58`, `.hf-shell`, `.hf-ex58-hero-shade`.

   Breakpoint GIỮ NGUYÊN của design: 980px / 720px / 640px (không đổi sang 1024/767
   của theme — đổi là lệch điểm gãy layout so với ảnh baseline).
   Font 'Mulish' (family trơn) đã có @font-face trong mega-menu.css (load mọi trang).
   ============================================================ */

/* ══════════════════ A. Token + base — khai TRÊN .hf-experience58, KHÔNG :root ══════════════════
   Giá trị lấy từ tokens-and-header.css của design (dòng 330–367) + lớp đè
   v41-global-legibility (--hf-type-label) + v42-about-fullpage-portals (--hf-page-*). */
.hf-experience58 {
  --blue: #17479d;
  --orange: #ee6823;
  --ink: #14213d;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --hf-type-label: 14px;
  /* Container cuối cùng của design (v40 + v42) — xem mục B. */
  --hf-page-max: 1360px;
  --hf-page-side: 36px;
  /* Token riêng của khối v58 (design dòng 6960). */
  --hf-ex58-radius: 8px;

  overflow: clip; /* design: overflow:clip — dùng clip, không phải hidden (không tạo scroll container) */
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  color: #102342;
  background: #f7f9fc;
  -webkit-font-smoothing: antialiased;
}

.hf-experience58,
.hf-experience58 *,
.hf-experience58 *::before,
.hf-experience58 *::after { box-sizing: border-box; }

.hf-experience58 h1,
.hf-experience58 h2,
.hf-experience58 h3 { margin: 0; font-weight: 700; line-height: 1.16; letter-spacing: -.01em; }
.hf-experience58 p { margin: 0; }
.hf-experience58 a { color: inherit; text-decoration: none; }
.hf-experience58 img { max-width: 100%; display: block; }
.hf-experience58 figure { margin: 0; }

/* Anchor 3 khối chính (#cong-dong-cua-ban / #diem-tua-cua-ban / #khoanh-khac-cua-ban — iteration 8):
   chừa chỗ cho header sticky (.hf-utility 38px + .hf-nav-in 96px + đệm) khi cuộn-tới-fragment.
   GIỮ tiền tố .hf-experience58 — rule `section[id]` trần sẽ rò ra mọi trang khác (file load ở
   priority 22, SAU mega-menu.css). Cùng con số 140px với about/admission/org-structure/quality-assurance. */
.hf-experience58 section[id] { scroll-margin-top: 140px; }

/* ══════════════════ B. Container — v40 (dòng 4515) + v42 (dòng 4917) ══════════════════
   Design: .hf-shell{width:calc(100% - side*2)!important; max-width:var(--hf-page-max)!important;
   margin-inline:auto!important; padding-inline:0!important}.
   Theme .hf-shell = max-width:1360px + padding 0 32px → lệch tới 64px bề ngang ở 1440.
   Đè trong phạm vi .hf-experience58 (<main>) → mega-menu + footer giữ nguyên. */
.hf-experience58 .hf-shell {
  width: calc(100% - (var(--hf-page-side) * 2));
  max-width: var(--hf-page-max);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

/* ══════════════════ C. Eyebrow — tokens-and-header.css dòng 395–401 ══════════════════
   font-size lấy từ lớp đè v41 (--hf-type-label = 14px), không phải 13px gốc. */
.hf-experience58 .hf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hf-type-label);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.hf-experience58 .hf-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

/* ══════════════════ D. Khối 1 — Hero (design 6961–6968) ══════════════════ */
.hf-experience58 .hf-ex58-hero { position: relative; min-height: 660px; display: grid; overflow: hidden; color: #fff; background: #08275b; }
.hf-experience58 .hf-ex58-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.hf-experience58 .hf-ex58-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,57,139,.97) 0%,rgba(12,57,139,.72) 38%,rgba(7,30,72,.16) 75%),linear-gradient(0deg,rgba(5,25,62,.36),transparent 52%); }
.hf-experience58 .hf-ex58-hero-in { position: relative; z-index: 1; min-height: 660px; display: flex; align-items: center; }
.hf-experience58 .hf-ex58-hero-copy { width: min(660px,62%); }
.hf-experience58 .hf-ex58-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(58px,6.8vw,96px); line-height: .98; letter-spacing: -.055em; }
.hf-experience58 .hf-ex58-hero-copy h1 em { color: #ff681f; font-style: normal; }
.hf-experience58 .hf-ex58-hero-copy p { max-width: 640px; margin: 28px 0 30px; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.55; }

/* ══════════════════ E. Nền + header khối 2/4/6 (design 6969–6974) ══════════════════
   Design dựng section là `.hf-section.hf-ex58-*`; padding 84px của .hf-section bị
   padding-block dưới đây đè hết → impl bỏ class .hf-section (khớp thị giác, đồng thời
   không để rule .hf-section nào của theme rò vào trang). */
.hf-experience58 .hf-ex58-community,
.hf-experience58 .hf-ex58-gallery { padding-block: 88px 96px; background: linear-gradient(135deg,#f6f9fd 0%,#eef4fc 70%,#fff1e9 100%); }
.hf-experience58 .hf-ex58-support { padding-block: 88px 96px; background: linear-gradient(135deg,#e8f0fb 0%,#f4f7fc 58%,#fff0e7 100%); }
/* Đầu khối là <header> (design dòng 46729 dựng h("header", …)) → dính HAI thứ của theme
   vốn viết cho header SITE, cả hai đều nhận diện mục tiêu bằng bộ chọn `header` TRẦN:
     1. CSS `header{position:sticky;top:0;z-index:20}` (assets/css/main.css dòng 178)
        → tiêu đề khối ghim lại, đè lên lưới thẻ khi cuộn.
     2. JS `$("header").addClass("shadow-header")` (assets/js/main.js dòng 300, chạy mỗi
        lần scroll khi viewport ≥1024) + `.shadow-header{box-shadow:0 2px 7px rgba(0,0,0,.2)}`
        (main.css dòng 410) → đầu khối hiện ra như một cái HỘP nổi giữa nền gradient.
   Gate `/qa-round` KHÔNG bắt được cả hai: ảnh fullPage chụp ở scrollY=0 nên sticky trùng
   vị trí tĩnh, còn `shadow-header` lúc đó chưa được gắn (JS chỉ gắn khi yTop != 0).
   Vô hiệu hoá TẠI CHỖ, KHÔNG sửa main.css/main.js (dùng chung toàn site). */
.hf-experience58 .hf-ex58-section-head { position: static; top: auto; left: auto; z-index: auto; box-shadow: none; max-width: 940px; margin-bottom: 42px; }
.hf-experience58 .hf-ex58-section-head .hf-eyebrow { color: #f06427; }
.hf-experience58 .hf-ex58-section-head h2 { margin: 16px 0 13px; color: #174c9e; font-size: clamp(38px,4.5vw,62px); line-height: 1.06; letter-spacing: -.04em; }
.hf-experience58 .hf-ex58-section-head p { margin: 0; color: #152844; font-size: 19px; font-weight: 650; line-height: 1.55; }

/* ══════════════════ F. Lưới + thẻ (design 6975–6993) ══════════════════
   Design dùng <button> cho thẻ; impl dùng <a> (link thật, không SPA) — giữ nguyên
   reset font/padding/border để hai bên đo bằng nhau. */
.hf-experience58 .hf-ex58-community-grid,
.hf-experience58 .hf-ex58-support-grid,
.hf-experience58 .hf-ex58-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.hf-experience58 .hf-ex58-community-grid { align-items: stretch; grid-auto-flow: row; }
.hf-experience58 .hf-ex58-card { position: relative; width: 100%; min-width: 0; aspect-ratio: 16/9; overflow: hidden; display: block; padding: 0; border: 0; border-radius: var(--hf-ex58-radius); color: inherit; font: inherit; text-align: left; cursor: pointer; background: #0b397c; box-shadow: 0 14px 34px rgba(8,39,91,.13); }
.hf-experience58 .hf-ex58-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .42s var(--ease); }
.hf-experience58 .hf-ex58-community-card:first-child { grid-row: 1 / span 3; aspect-ratio: auto; min-height: 0; }
.hf-experience58 .hf-ex58-community-card:first-child img { position: absolute; inset: 0; }
.hf-experience58 .hf-ex58-card:hover img { transform: scale(1.035); }
.hf-experience58 .hf-ex58-card:focus-visible,
.hf-experience58 .hf-ex58-banner:focus-visible { outline: 3px solid #ff681f; outline-offset: 3px; }
.hf-experience58 .hf-ex58-card-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,28,70,.98) 0%,rgba(7,36,85,.76) 35%,transparent 78%); }
.hf-experience58 .hf-ex58-community-card:nth-child(3n) .hf-ex58-card-shade { background: linear-gradient(0deg,rgba(130,42,8,.96) 0%,rgba(212,79,20,.62) 34%,transparent 78%); }
.hf-experience58 .hf-ex58-community-card::after { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 4px; background: #1d58aa; }
.hf-experience58 .hf-ex58-community-card:nth-child(odd)::after { background: #f06427; }
.hf-experience58 .hf-ex58-card-copy { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; color: #fff; }
.hf-experience58 .hf-ex58-card-copy strong { display: block; margin-bottom: 8px; color: #fff; font-size: clamp(20px,2vw,29px); line-height: 1.1; }
.hf-experience58 .hf-ex58-card-copy small { display: block; color: #fff; font-size: 13px; font-weight: 650; line-height: 1.45; }
.hf-experience58 .hf-ex58-support-card { aspect-ratio: auto; display: grid; grid-template-rows: auto 1fr; color: #174c9e; background: #fff; border: 1px solid rgba(23,76,158,.1); }
.hf-experience58 .hf-ex58-support-card img { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.hf-experience58 .hf-ex58-support-card > span { position: static; min-height: 76px; display: flex; align-items: center; padding: 19px 20px; border-top: 4px solid #174c9e; color: #174c9e; font-size: 21px; font-weight: 850; line-height: 1.2; background: #fff; }
.hf-experience58 .hf-ex58-support-card:nth-child(even) > span { border-top-color: #f06427; color: #c94c17; }

/* ══════════════════ G. Khối 3 & 5 — Banner (design 6994–6995 + 7122–7128) ══════════════════ */
.hf-experience58 .hf-ex58-banner { width: 100%; margin-top: 68px; display: block; overflow: hidden; border-radius: var(--hf-ex58-radius); background: #fff; box-shadow: 0 12px 30px rgba(8,39,91,.09); }
.hf-experience58 .hf-ex58-banner img { width: 100%; height: auto; display: block; }
/* Banner đặt ngoài .hf-shell nên tự chiếm trọn bề ngang khung xem.
   Bỏ bo góc và đổ bóng vì hai thứ đó chỉ hợp với khối nằm trong lưới nội dung. */
.hf-experience58 .hf-ex58-banner.is-full { border-radius: 0; box-shadow: none; background: transparent; }
/* <picture> mặc định là inline nên sẽ sinh khoảng trắng dưới ảnh. */
.hf-experience58 .hf-ex58-banner picture { display: block; }

/* ══════════════════ H. Khối 6 — Lưới ảnh mosaic (design 6996–7004) ══════════════════ */
.hf-experience58 .hf-ex58-gallery-grid { height: clamp(660px,70vw,900px); grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(6,minmax(0,1fr)); gap: 4px; align-items: stretch; }
.hf-experience58 .hf-ex58-gallery-grid figure { position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--hf-ex58-radius); background: #dce6f4; box-shadow: 0 14px 34px rgba(8,39,91,.12); }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(1) { grid-column: 1; grid-row: 1 / 7; }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(3) { grid-column: 3; grid-row: 1 / 4; }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(4) { grid-column: 2; grid-row: 3 / 5; }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(5) { grid-column: 2; grid-row: 5 / 7; }
.hf-experience58 .hf-ex58-gallery-grid figure:nth-child(6) { grid-column: 3; grid-row: 4 / 7; }
.hf-experience58 .hf-ex58-gallery-grid img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* ══════════════════ I. RIÊNG CỦA IMPL (không có trong design) ══════════════════ */

/* I.1 — Dải banner: design đặt <a class="hf-ex58-banner"> BÊN TRONG section khối 2/4
   (sau .hf-shell), nên khoảng cách trên = margin-top 68px và khoảng dưới = padding-bottom
   96px của chính section đó. Ở impl banner là BLOCK ACF riêng → phải tự dựng dải để tái
   lập đúng nhịp dọc: 96 − 28 = 68 phía trên, 96 + 88 = 184 phía dưới (đúng bằng design).
   Nền copy nguyên giá trị gradient của section đứng trước để không lộ mép nối. */
.hf-experience58 .hf-ex58-band { margin-top: -28px; padding-bottom: 96px; }
/* Dải TỰ dựng lại khoảng trên (96 − 28) → phải TRẢ margin-top 68/44px mà banner mang sẵn
   từ design về 0, nếu không hai nguồn cộng dồn thành 136/88px. Không sửa thẳng rule gốc ở
   phần port để phần đó vẫn phản ánh đúng design. */
.hf-experience58 .hf-ex58-band .hf-ex58-banner { margin-top: 0; }
.hf-experience58 .hf-ex58-community + .hf-ex58-band { background: linear-gradient(135deg,#f6f9fd 0%,#eef4fc 70%,#fff1e9 100%); }
.hf-experience58 .hf-ex58-support + .hf-ex58-band { background: linear-gradient(135deg,#e8f0fb 0%,#f4f7fc 58%,#fff0e7 100%); }

/* I.2 — Lưới ảnh nhánh tràn / nhánh <6 ảnh: mosaic của design gán cứng vị trí cho ĐÚNG 6 ô
   nên thừa/thiếu đều vỡ. Nhánh .is-flow tái dùng đúng ruleset ≤980px của design (lưới đều,
   cao tự động, ô 16/9). */
.hf-experience58 .hf-ex58-gallery-grid.is-flow { height: auto; grid-template-rows: none; }
.hf-experience58 .hf-ex58-gallery-grid.is-flow figure,
.hf-experience58 .hf-ex58-gallery-grid.is-flow figure:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }
.hf-experience58 .hf-ex58-gallery-grid + .is-flow { margin-top: 4px; }

/* ══════════════════ J. Responsive — GIỮ breakpoint của design ══════════════════ */

@media (max-width: 980px) {
  .hf-experience58 .hf-ex58-hero-copy { width: min(660px,78%); }
  .hf-experience58 .hf-ex58-support-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hf-experience58 .hf-ex58-gallery-grid { height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; gap: 14px; }
  .hf-experience58 .hf-ex58-gallery-grid figure,
  .hf-experience58 .hf-ex58-gallery-grid figure:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 16/9; }
}

/* Gutter trang theo ĐÚNG cascade của design — BA bậc, không phải hai:
   base 36px (dòng 4912) → 28px ở ≤1100 (dòng 4997) → 18px ở ≤760 (dòng 5004).
   Bậc 28px là bậc từng thiếu, và nó chi phối bề ngang .hf-shell: thiếu nó thì
   lưới của cả 3 khối có .hf-shell hẹp hơn design đúng 16px ở 1100/1024/767.
   (Design dòng 4877 cũng khai 18px ở ≤720 nhưng đứng TRƯỚC 4997/5004 nên bị đè.) */
@media (max-width: 1100px) {
  .hf-experience58 { --hf-page-side: 28px; }
}

@media (max-width: 760px) {
  .hf-experience58 { --hf-page-side: 18px; }
}

@media (max-width: 640px) {
  .hf-experience58 .hf-ex58-hero,
  .hf-experience58 .hf-ex58-hero-in { min-height: 560px; }
  .hf-experience58 .hf-ex58-hero > img { object-position: 62% center; }
  .hf-experience58 .hf-ex58-hero-shade { background: linear-gradient(0deg,rgba(5,25,62,.98) 0%,rgba(9,48,116,.82) 66%,rgba(9,48,116,.32)); }
  .hf-experience58 .hf-ex58-hero-in { align-items: end; padding-bottom: 46px; }
  .hf-experience58 .hf-ex58-hero-copy { width: 100%; }
  .hf-experience58 .hf-ex58-hero-copy h1 { font-size: clamp(49px,15vw,65px); }
  .hf-experience58 .hf-ex58-hero-copy p { margin: 21px 0 23px; font-size: 15px; line-height: 1.55; }
  .hf-experience58 .hf-ex58-community,
  .hf-experience58 .hf-ex58-support,
  .hf-experience58 .hf-ex58-gallery { padding-block: 58px 64px; }
  .hf-experience58 .hf-ex58-section-head { margin-bottom: 28px; }
  .hf-experience58 .hf-ex58-section-head h2 { margin-top: 12px; font-size: 38px; }
  .hf-experience58 .hf-ex58-section-head p { font-size: 16px; }
  .hf-experience58 .hf-ex58-community-grid,
  .hf-experience58 .hf-ex58-support-grid,
  .hf-experience58 .hf-ex58-gallery-grid { grid-template-columns: 1fr; gap: 14px; }
  .hf-experience58 .hf-ex58-community-card:first-child { grid-row: auto; aspect-ratio: 4/5; }
  .hf-experience58 .hf-ex58-card-copy { right: 18px; bottom: 17px; left: 18px; }
  .hf-experience58 .hf-ex58-card-copy strong { font-size: 23px; }
  .hf-experience58 .hf-ex58-banner { margin-top: 44px; }
  /* Nhịp dọc dải banner theo padding 58/64 của breakpoint này: 64 − 20 = 44, 64 + 58 = 122. */
  .hf-experience58 .hf-ex58-band { margin-top: -20px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-experience58 .hf-ex58-card img { transition: none; }
}