/* ============================================================
   Trang con "Những câu hỏi thường gặp" — module student-experience iteration 9.
   Port từ _design-reference/20260819-HUFLIT-website-standalone/HUFLIT-standalone.html:
     · hero trang chủ đề  — dòng 7005–7010 (+ base ảnh 6962, media 7044–7048)
     · breadcrumb .hf-crumb — dòng 2382–2385
     · accordion .hf-ex58-faq* — dòng 7130–7215 (kèm media 720 + reduced-motion)

   Nạp SAU experience58.css (dependency 'hf-experience58', cùng priority 22). File kia
   giữ token + `.hf-shell` + `.hf-ex58-hero-shade` (dùng chung cho cả 2 template) nên ở
   đây KHÔNG khai lại chúng.

   ⚠ SCOPE BẮT BUỘC: mọi rule đặt dưới `.hf-experience58`. Các class dùng chung
   (.hf-shell, .hf-crumb) cũng thuộc HEADER/MEGA-MENU + FOOTER; file này load sau
   mega-menu.css nên rule TRẦN sẽ đè định nghĩa gốc và 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. Riêng `.hf-crumb` còn
   đang bị assets/css/faculty-detail.css:139 khai TRẦN, thêm một lý do phải scope.

   Breakpoint GIỮ NGUYÊN của design: 980 / 720 / 640 (không đổi sang 1024/767 của theme).
   ============================================================ */

/* ══════════════════ A. Hero trang chủ đề (design 7005–7010) ══════════════════
   CỐ Ý BỎ `width` của `.hf-ex58-topic-hero > .hf-shell` (design ghi
   `width: min(var(--hf-container), calc(100% - 48px))`): trong design, rule
   `.hf-shell{width: calc(100% - var(--hf-page-side)*2) !important}` (dòng 4516) đè nó
   bằng !important, nên bề ngang thực tế = đúng công thức mà
   `.hf-experience58 .hf-shell` (experience58.css dòng 69) đã dựng. Port thêm `width`
   ở đây là làm LỆCH so với design, không phải khớp. */
.hf-experience58 .hf-ex58-topic-hero { position: relative; min-height: 470px; display: grid; align-items: end; overflow: hidden; color: #fff; background: #08275b; }
.hf-experience58 .hf-ex58-topic-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hf-experience58 .hf-ex58-topic-hero > .hf-shell { position: relative; z-index: 1; padding-block: 40px 58px; }
.hf-experience58 .hf-ex58-topic-hero h1 { max-width: 900px; margin: 42px 0 14px; color: #fff; font-size: clamp(46px,6vw,76px); line-height: 1.02; letter-spacing: -.045em; }
.hf-experience58 .hf-ex58-topic-hero p { max-width: 760px; margin: 0; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.6; }
.hf-experience58 .hf-ex58-topic-list { padding-block: 82px 96px; background: #f5f8fc; }

/* KHÔNG port `.hf-ex58-topic-grid` / `-card` / `-media` / `-copy` (design 7011–7018,
   7022, 7039): đó là lưới thẻ của trang "12 chủ đề", chưa nằm trong phạm vi iteration 9. */

/* ══════════════════ B. Breadcrumb (design 2382–2385) ══════════════════
   Design dựng cấp 1-2 bằng <button> và có reset toàn cục `a{color:inherit;
   text-decoration:none}` (dòng 363–364). Impl dùng <a> thật (đi được bằng bàn phím,
   crawler đọc được) nên phải trả màu + gạch chân về đúng mốc đó. */
.hf-experience58 .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; }
.hf-experience58 .hf-crumb.light { color: rgba(255,255,255,.78); }
.hf-experience58 .hf-crumb a { color: inherit; text-decoration: none; }
.hf-experience58 .hf-crumb a:hover { color: #fff; }
.hf-experience58 .hf-crumb svg { opacity: .5; }

/* ══════════════════ C. Accordion câu hỏi (design 7130–7215) ══════════════════ */
.hf-experience58 .hf-ex58-faq { display: grid; gap: 14px; }
.hf-experience58 .hf-ex58-faq-item { border: 1px solid #e2e8f2; border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.hf-experience58 .hf-ex58-faq-item.is-open { border-color: #c9d9f0; box-shadow: 0 10px 26px rgba(8,39,91,.08); }
.hf-experience58 .hf-ex58-faq-item h3 { margin: 0; font: inherit; }
.hf-experience58 .hf-ex58-faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: none; border: 0; text-align: left; cursor: pointer; font-size: 17px; font-weight: 700; line-height: 1.45; color: #0b2d62; }
.hf-experience58 .hf-ex58-faq-q:hover { background: #f6f9fe; }
.hf-experience58 .hf-ex58-faq-no { flex: 0 0 auto; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef3fb; color: #1d4ed8; font-size: 14px; font-weight: 800; }
.hf-experience58 .hf-ex58-faq-item.is-open .hf-ex58-faq-no { background: #ff681f; color: #fff; }
.hf-experience58 .hf-ex58-faq-text { flex: 1 1 auto; }
.hf-experience58 .hf-ex58-faq-icon { flex: 0 0 auto; display: inline-flex; color: #5b7099; transform: rotate(90deg); transition: transform .2s ease, color .2s ease; }
.hf-experience58 .hf-ex58-faq-item.is-open .hf-ex58-faq-icon { transform: rotate(-90deg); color: #ff681f; }
.hf-experience58 .hf-ex58-faq-a { padding: 0 22px 22px 72px; color: #33455f; font-size: 15.5px; line-height: 1.7; }
.hf-experience58 .hf-ex58-faq-a > * + * { margin-top: 12px; }
.hf-experience58 .hf-ex58-faq-a p { margin: 0; }
.hf-experience58 .hf-ex58-faq-a a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.hf-experience58 .hf-ex58-faq-a a:hover { color: #ff681f; }
.hf-experience58 .hf-ex58-faq-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hf-experience58 .hf-ex58-faq-steps > li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.hf-experience58 .hf-ex58-faq-step-no { white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: #eef3fb; color: #1d4ed8; font-size: 13px; font-weight: 700; line-height: 1.6; }
.hf-experience58 .hf-ex58-faq-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.hf-experience58 .hf-ex58-faq-note { border-left: 3px solid #ff681f; background: #fff6f0; border-radius: 0 12px 12px 0; padding: 14px 16px; }
.hf-experience58 .hf-ex58-faq-note > strong { display: block; margin-bottom: 6px; color: #b8410c; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.hf-experience58 .hf-ex58-faq-note ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

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

@media (max-width: 720px) {
  .hf-experience58 .hf-ex58-faq-q { padding: 16px; gap: 12px; font-size: 15.5px; }
  .hf-experience58 .hf-ex58-faq-a { padding: 0 16px 18px; font-size: 15px; }
  .hf-experience58 .hf-ex58-faq-steps > li { grid-template-columns: none; gap: 4px; }
  .hf-experience58 .hf-ex58-faq-step-no { justify-self: start; }
}

/* Design 7044–7048. Vẫn bỏ `width` của `> .hf-shell` (design ghi
   `min(100% − 32px, var(--hf-container))`) vì cùng lý do ở mục A: rule !important dòng
   4516 đè nó, và ở đây `--hf-page-side` = 18px (experience58.css dòng 218) nên bề ngang
   thực tế của design là 100% − 36px — impl đã có sẵn con số đó. */
@media (max-width: 640px) {
  .hf-experience58 .hf-ex58-topic-hero { min-height: 390px; }
  .hf-experience58 .hf-ex58-topic-hero > .hf-shell { padding-block: 25px 38px; }
  .hf-experience58 .hf-ex58-topic-hero h1 { margin-top: 32px; font-size: 43px; }
  .hf-experience58 .hf-ex58-topic-hero p { font-size: 15px; }
  .hf-experience58 .hf-ex58-topic-list { padding-block: 54px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-experience58 .hf-ex58-faq-item,
  .hf-experience58 .hf-ex58-faq-icon { transition: none; }
}