/* ============================================================
 * HUFLIT Mega Menu — component CSS
 * Port từ _design-reference/HUFLIT Website (standalone) (16062026).
 * Iteration 2: dark panel scheme từ design 26062026.
 * Tokens scope vào .hf-header / .hf-mobile để KHÔNG ghi đè biến theme.
 * Breakpoint dùng bộ theme: 1280 / 1023 / 767 / 599 (không dùng 1080/600
 * của design). Grid Đào tạo reflow 5 → 3 → 2 cột.
 * ========================================================== */

/* ---- Font 'Mulish' theo trục weight ----
 * Theme tách Mulish thành các family riêng (Mulish-Bold...) nên header sẽ kế thừa
 * font body theme (nặng hơn design). Khai báo lại family 'Mulish' trỏ vào CHÍNH các
 * file woff2 theme đã có (cùng thư mục font/) để tái lập đúng weight-axis của design. */
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/Mulish-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 500; font-display: swap; src: url(font/Mulish-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap; src: url(font/Mulish-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap; src: url(font/Mulish-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 800; font-display: swap; src: url(font/Mulish-ExtraBold.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 900; font-display: swap; src: url(font/Mulish-Black.woff2) format('woff2'); }

/* ---- Tokens (scope, không dùng :root để tránh đụng theme) ---- */
.hf-header,
.hf-mobile {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Base color = ink như design (body{color:var(--ink)}). Reset `.hf-header a{color:inherit}`
   * cần baseline này, nếu không anchor sẽ kế thừa màu đen của body theme. */
  color: var(--ink);
  /* Smoothing giống design để khớp độ nét/đậm chữ. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --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-sm: 12px;
  --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);
}

/* ---- Resets có phạm vi (không đụng phần còn lại của theme) ---- */
.hf-header ul,
.hf-mobile ul { margin: 0; padding: 0; list-style: none; }
.hf-header button,
.hf-mobile button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.hf-header a,
.hf-mobile a { color: inherit; text-decoration: none; }
.hf-header img,
.hf-mobile img { display: block; max-width: 100%; }
.hf-header *,
.hf-mobile * { box-sizing: border-box; }

.hf-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.hf-no-link { cursor: default; }

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

/* ---- Buttons / link bits dùng trong panel ---- */
.hf-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 4px; font-weight: 800; font-size: 15px;
  transition: transform .16s var(--ease), box-shadow .2s, background .2s;
  white-space: nowrap; border: none; cursor: pointer; font-family: inherit;
}
.hf-btn:hover { transform: translateY(-2px); }
.hf-btn-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(238,104,35,.32); }
.hf-btn-orange:hover { box-shadow: 0 12px 26px rgba(238,104,35,.42); }
.hf-btn-blue  { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(23,71,157,.28); }
.hf-btn-blue:hover { box-shadow: 0 12px 26px rgba(23,71,157,.38); }
.hf-btn-white { background: #fff; color: var(--blue); }
.hf-btn-ghost { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-100); }
.hf-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.hf-btn-lg    { padding: 16px 30px; font-size: 16.5px; }
.hf-link-arrow {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--blue);
  font-size: 15px; transition: gap .18s var(--ease);
}
.hf-link-arrow:hover { gap: 12px; }
.hf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.hf-tag-blue { background: var(--blue-50); color: var(--blue); }
.hf-tag-orange { background: var(--orange-50); color: var(--orange); }

/* ============ Header ============ */
.hf-header { position: sticky; top: 0; z-index: 100; }
.hf-utility { display: flex; align-items: stretch; height: 38px; font-size: 13px; }
.hf-utility-left { flex: 1; background: var(--blue-700); display: flex; align-items: center; justify-content: flex-end; padding-right: 26px; min-width: 0; }
.hf-utility-links { display: flex; gap: 26px; color: #cdd9ef; }
.hf-util-link { font-weight: 600; opacity: .85; transition: opacity .15s, color .15s; }
.hf-util-link:hover { opacity: 1; color: #fff; }
.hf-utility-right { background: var(--orange); display: flex; align-items: center; gap: 14px; flex-shrink: 0; color: #fff8f1; padding-left: var(--gut); padding-right: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gut)); }
.hf-lang { display: inline-flex; gap: 4px; font-size: 12.5px; font-weight: 700; color: #ffe4d2; }
.hf-lang .on { color: #fff; }
.hf-lang a + a::before { content: "·"; margin-right: 4px; }
.hf-util-icon { display: inline-flex; }
.hf-util-icon:hover { color: #fff; }

.hf-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.hf-header[data-scrolled="1"] .hf-nav { box-shadow: var(--shadow-sm); }
.hf-nav-in { display: flex; align-items: center; gap: 18px; height: 96px; }
.hf-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 0; }
.hf-logo { width: 110px; height: 74px; object-fit: contain; }
.hf-brand-text strong { font-size: 18px; color: var(--blue); }

.hf-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hf-menu-item { position: static; }
.hf-menu-btn {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 10px 13px; border-radius: 10px; font-weight: 700; font-size: 14.5px; color: var(--ink);
  /* Design render menu bằng <button> nên giữ line-height UA `normal` (Mulish ≈ cao hơn).
   * Ta render <a> sẽ kế thừa line-height 1.5 của body theme → chữ bị nén. Ép `normal` để khớp. */
  line-height: normal;
  transition: color .15s, background .15s;
}
.hf-menu-btn:hover, .hf-menu-btn.open { color: var(--blue); background: var(--blue-50); }
.hf-menu-btn .hf-ic { transition: transform .2s; opacity: .6; }
.hf-menu-btn.open .hf-ic { transform: rotate(180deg); }

.hf-nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hf-burger { display: none; color: var(--blue); align-items: center; }

/* ---- Panels — dark scheme (design 26062026) ---- */
.hf-panel-wrap {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blue-700);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-md);
  animation: hfPanelIn .22s var(--ease);
}
.hf-panel-wrap[hidden] { display: none; }
@keyframes hfPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.hf-mega { padding: 26px var(--gut); display: flex; gap: 28px; align-items: stretch; }
.hf-mega-rail { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid rgba(255,255,255,.16); padding-right: 26px; }

/* Tier card trong rail — dark scheme.
 * Scope .hf-header (0,2,0) để thắng reset `.hf-header button` (0,1,1). */
.hf-header .hf-mega-tier { display: flex; align-items: center; gap: 13px; text-align: left; padding: 16px 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); transition: border-color .15s, background .15s, transform .15s; }
.hf-header .hf-mega-tier:hover { transform: translateX(2px); background: rgba(255,255,255,.12); }
.hf-header .hf-mega-tier.on { border-color: #fff; background: rgba(255,255,255,.16); }
.hf-mega-tier-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; flex-shrink: 0; }
.hf-mega-tier.on .hf-mega-tier-ic { background: var(--orange); color: #fff; }
.hf-mega-tier-tx { flex: 1; display: flex; flex-direction: column; }
.hf-mega-tier-tx strong { font-size: 16px; color: #fff; }
.hf-mega-tier-tx small { font-size: 12.5px; color: #c5d3ec; font-weight: 600; }
.hf-mega-tier > .hf-ic { color: #c5d3ec; opacity: .7; }
.hf-mega-tier.on > .hf-ic { color: #fff; opacity: 1; }
.hf-mega-body { flex: 1; min-width: 0; }
.hf-mega-tier-panel[hidden] { display: none; }

/* ---- Grid (nội dung tier) — dark scheme ---- */
/* Cột cuối rộng hơn (1.3fr) — nhãn "Truyền thông – Đối ngoại – Sự kiện" dài nhất. Port design 260715. */
.hf-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 22px; }
.hf-mega-col { min-width: 0; }

/* Tiêu đề nhóm — scope .hf-header (0,2,0) để thắng reset `.hf-header a{color:inherit}` (0,1,1). */
.hf-header .hf-mega-head {
  display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: #fff; line-height: 1.3;
  padding-bottom: 11px; margin-bottom: 11px; border-bottom: 2px solid rgba(255,255,255,.18); width: 100%; text-align: left;
}
/* Nhãn nhóm ngành: luôn chiếm đúng 2 dòng để các cột thẳng hàng (gạch chân + list dưới cùng cao độ),
 * bất kể nhãn wrap 1 hay 2 dòng. min-height theo em × line-height (tương đối) nên tự thích ứng khi
 * đổi font-size — KHÔNG dùng px cứng. Port design 260715.
 * grid + align-content:center: nhãn ngắn (1 dòng) nằm giữa hộp 2 dòng nên thẳng tâm icon 26px.
 * display:block cũ đẩy chữ lên dòng đầu → chữ cao hơn tâm icon ~9px ở panel Giới thiệu. */
.hf-mega-head-tx { display: grid; align-content: center; min-height: calc(2em * 1.3); text-wrap: balance; }
/* EN: design chỉ có bản VI nên 2 dòng cân theo tiếng Việt. Nhãn EN dài hơn — "Communications –
 * External Relations – Events" (43 ký tự) wrap 3 dòng trong khi VI "Truyền thông – Đối ngoại –
 * Sự kiện" (34) chỉ 2 → nhóm thứ 5 đội cao 18px, lệch hàng. Nới 3 dòng RIÊNG cho EN để giữ bản VI
 * khớp design tuyệt đối (gate fidelity chạy designLang: 'vi'). Không đổi nhãn (ràng buộc data). */
html[lang="en"] .hf-mega-head-tx { min-height: calc(3em * 1.3); }
.hf-header .hf-mega-head:hover { color: var(--orange); }
.hf-mega-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; flex-shrink: 0; }
.hf-mega-list li a {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 7px 8px; border-radius: 4px; font-size: 13.8px; color: #dbe5f5; font-weight: 600;
  transition: background .14s, color .14s, padding .14s;
  text-wrap: balance; line-height: 1.35;
}
.hf-mega-list li a:hover { background: rgba(255,255,255,.14); color: #fff; padding-left: 12px; }
.hf-hot { font-size: 9px; font-weight: 900; letter-spacing: .06em; color: #fff; background: var(--orange); padding: 1px 5px; border-radius: 5px; }

/* Footer row — dark scheme */
.hf-mega-foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16); font-size: 14px; color: #dbe5f5;
}
.hf-mega-foot strong { color: #fff; }
/* Footer row 2 (Văn bằng 2) — offset nhẹ, viền mờ hơn để phân biệt với row 1. */
.hf-mega-foot-2 { margin-top: 10px; border-top-color: rgba(255,255,255,.08); }

/* Override hf-link-arrow màu trắng bên trong panel (thay vì xanh ở ngoài panel). */
.hf-panel-wrap .hf-link-arrow { color: #fff; }
.hf-panel-wrap .hf-link-arrow:hover { color: #ffd9bf; }

/* ---- Flat grid panel — dùng cho Giới thiệu chung (hf_mega_render_gioi_thieu) ---- */
/* Không có rail — override flex container thành block để grid chiếm toàn bộ chiều rộng. */
.hf-mega-flat { display: block; }
.hf-mega-flat > .hf-mega-grid { grid-template-columns: repeat(5, 1fr); }

/* ---- Tier SDH else-branch fallback (khi tier chỉ có leaf children, không có sub-grid) ---- */
.hf-mega-sdh { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; min-height: 230px; }
.hf-mega-sdh-copy h3 { font-size: 22px; margin: 12px 0 10px; color: #fff; }
.hf-mega-sdh-copy p { font-size: 14.5px; color: #c5d3ec; margin-bottom: 18px; max-width: 380px; line-height: 1.55; }
.hf-mega-sdh-list { display: flex; flex-direction: column; gap: 8px; }
.hf-header .hf-mega-sdh-item { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 700; font-size: 14.5px; color: #fff; transition: background .14s, color .14s, padding .14s; }
.hf-header .hf-mega-sdh-item:hover { background: rgba(255,255,255,.16); padding-left: 19px; }
.hf-header .hf-mega-sdh-item > .hf-ic:last-child { margin-left: auto; color: var(--orange); }

/* ---- Dropdown dàn ngang hết bề rộng — dark scheme (iteration 18) ----
   PORT từ _design-reference/20260819-HUFLIT-website-standalone/HUFLIT-standalone.html §v53
   (`.hf-dropdown-row.is-horizontal`, dòng 6952-6955): width 100% · max-width none · flex ·
   item `flex: 1 1 …` · min-height 62px · white-space normal · ẩn mũi tên.
   Trước iteration 18 đây là grid `repeat(3, minmax(0,1fr))` + `max-width: 760px` → panel 4 thẻ
   vỡ 3+1 và dồn về trái, chừa mảng trống bên phải.

   HAI ĐIỂM CỐ Ý LỆCH DESIGN (chốt với user 2026-08-19, đừng "sửa lại cho khớp"):
   (D1) Design chỉ bật cho 2 panel (Trải nghiệm sinh viên, Học thuật) qua class `.is-horizontal`.
        Ta gộp thẳng vào base ⇒ áp cho MỌI panel dropdown, gồm cả Tuyển sinh (cũng 4 thẻ, cũng vỡ).
   (D2) ĐÃ HUỶ ở iteration 19 (user 2026-08-20: ↗ làm lỗi hiển thị mega-menu). Iteration 18 ẩn
        mũi tên nhưng vẫn giữ ↗; nay ↗ bị **gỡ khỏi renderer** — inc/mega-menu.php không còn
        sinh `.hf-dd-ext` (và cả 2 chỗ ↗ khác: `.hf-mega-list`, overlay mobile). `.hf-ic` vẫn
        chỉ ẩn bằng CSS ở dưới. Tín hiệu "mở site khác" còn lại: target=_blank + rel=noopener.
   Khác design ở nhánh hẹp: design dùng `overflow-x: auto` @1000px, ta dùng `flex-wrap: wrap` +
   `flex-basis: 220px` — menu desktop của theme ẩn ở ≤1023px nên nhánh scroll gần như code chết,
   còn wrap thì đỡ được kịch bản admin thêm thẻ thứ 5-6 qua wp-admin.
   Số học: shell content = --maxw 1360 − 2×--gut 32 = 1296px; 4 thẻ ×220 + 3×8 = 904 ≤ 1296 → 1 hàng. */
.hf-dropdown-row { padding: 22px var(--gut); }
.hf-dropdown { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: none; }
.hf-header .hf-dd-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  flex: 1 1 220px; min-width: 0; min-height: 62px; white-space: normal;
  padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 700; font-size: 14.5px; text-align: left;
  transition: background .15s, color .15s; color: #fff;
}
/* D2 — mũi tên ẩn hẳn khi dàn ngang (thẻ hẹp lại, mũi tên gây chật). Hai rule hover bên dưới
   giữ nguyên để nếu sau này bỏ ẩn thì hiệu ứng cũ còn nguyên vẹn. */
.hf-header .hf-dd-item .hf-ic { display: none; opacity: 0; color: var(--orange); transition: opacity .15s, transform .15s; }
.hf-header .hf-dd-item:hover { background: rgba(255,255,255,.16); }
.hf-header .hf-dd-item:hover .hf-ic { opacity: 1; transform: translateX(3px); }
/* KHÔNG có rule `.hf-dd-ext` ở đây — iteration 19 gỡ hẳn ký tự ↗ khỏi 3 renderer trong
   inc/mega-menu.php nên header không còn sinh ra span đó. Class này vẫn sống ở
   academic-page.css / experience-page.css (badge SVG của 2 trang khác) — nếu sau này cần
   style lại ở header thì PHẢI scope `.hf-header .hf-dd-item`, đừng khai trần. */

/* ============ Mobile overlay ============ */
.hf-mobile { position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column; animation: hfPanelIn .2s var(--ease); }
.hf-mobile[hidden] { display: none; }
.hf-mobile-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.hf-mobile-top strong { font-size: 18px; color: var(--ink); }
.hf-mobile-body { padding: 14px 22px 40px; overflow: auto; }
.hf-mobile-group { border-bottom: 1px solid var(--line); }
.hf-mobile-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 2px; font-weight: 800; font-size: 17px; color: var(--ink); }
.hf-mobile-link .hf-ic { transition: transform .2s; opacity: .6; }
.hf-mobile-link[aria-expanded="true"] .hf-ic { transform: rotate(180deg); }
.hf-mobile-sub { padding: 0 6px 14px; display: flex; flex-direction: column; gap: 2px; }
.hf-mobile-sub[hidden] { display: none; }
.hf-mobile-sub a { display: block; text-align: left; padding: 9px 10px; border-radius: 8px; color: var(--ink-soft); font-weight: 600; }
.hf-mobile-sub a:hover { background: var(--blue-50); color: var(--blue); }
.hf-mobile-tier { font-weight: 800 !important; color: var(--blue) !important; }
body.hf-no-scroll { overflow: hidden; }

/* ============ Responsive — bộ breakpoint theme ============ */
/* Desktop hẹp: grid Đào tạo 5 → 3 cột */
@media (max-width: 1279px) {
  .hf-mega-grid { grid-template-columns: repeat(3, 1fr); }
  .hf-mega-flat > .hf-mega-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Mobile switch ≤1023: ẩn menu desktop, hiện burger. Reflow phòng hờ 3 → 2 cột. */
@media (max-width: 1023px) {
  .hf-menu, .hf-utility-links { display: none; }
  .hf-burger { display: inline-flex; }
  .hf-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .hf-mega-sdh { grid-template-columns: 1fr; }
}

/* Tablet nhỏ */
@media (max-width: 767px) {
  .hf-nav-in { height: 84px; }
  .hf-logo { width: 96px; height: 64px; }
}

/* Mobile */
@media (max-width: 599px) {
  .hf-header, .hf-mobile { --gut: 18px; }
  .hf-nav-in { height: 72px; }
  .hf-logo { width: 84px; height: 56px; }
  .hf-utility-right { padding-left: 14px; }
}