/* ============================================================
   Trang "Học thuật" — module academic, iteration 4 (thiết kế 21/08/2026).
   Port từ _design-reference/20260821-HUFLIT-website-standalone/HUFLIT-standalone-hoc-thuat.html
   Conditional enqueue: chỉ trang dùng `templates/academic.php` (hf_academic_assets()).

   ⚠ SCOPE BẮT BUỘC: MỌI selector đặt dưới `.hf-hoc-thuat` (class thứ 3 của <main>,
   cạnh `.hf-page .hf-pd`). Các class dùng chung (.hf-shell, .hf-btn, .hf-eyebrow,
   .hf-crumb, .hf-tag…) 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 → mega/footer co lại CHỈ trên
   trang này (gate QA crop `.hf-page` không bắt được — xem helper assertSharedChromeIntact).
   Guard: `grep "^\.hf-" academic-page.css | grep -v "^\.hf-hoc-thuat" | wc -l` = 0.

   ⚠ CASCADE: giá trị dưới đây là giá trị HIỆU LỰC sau toàn bộ lớp override của design,
   không phải block khai báo đầu tiên:

     · Khung nội dung do lớp v40 (dòng 4514) QUYẾT ĐỊNH, ghi đè MỌI lớp trước bằng !important:
         .hf-shell { width: calc(100% - var(--hf-page-side) * 2) !important; max-width: var(--hf-page-max) !important;
                     margin-inline: auto !important; padding-inline: 0 !important; }
       ⇒ shell KHÔNG có padding ngang; mép trái = --hf-page-side, KHÔNG phải --gut của lớp type-scale.
     · `--maxw` 1360px = --hf-page-max (v42 :root, 4910).
     · `--gut`  ở file này = --hf-page-side của design: 36px / ≤1100 28px / ≤760 18px (4910, 4995, 5002),
       KHÔNG phải clamp(24px,5vw,64px) — cái đó là --gut lớp type-scale, design không dùng cho shell.
     · `.hf-eyebrow` `.hf-tag` 14px · `.hf-pd-hero p` 16px/1.65 · `.hf-org-card p` 15px/1.55 ← 3837–3900.
   Font 'Mulish' đã có @font-face trong mega-menu.css (nạp mọi trang) — không khai lại.
   ============================================================ */

/* ---- Tokens + base ĐẶT TRÊN wrapper (KHÔNG dùng :root — tránh rò biến sang chrome dùng chung) ---- */
.hf-hoc-thuat {
	--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: #ffffff; --bg-soft: #f5f8fc;
	--radius: 4px; --radius-lg: 6px; --radius-sm: 3px;
	--shadow-sm: 0 1px 3px rgba(20,33,61,.05);
	--shadow-md: 0 4px 14px rgba(20,33,61,.07);
	--shadow-lg: 0 10px 28px rgba(20,33,61,.10);
	--maxw: 1360px;
	--gut: 36px;
	--ease: cubic-bezier(.22,.61,.36,1);
	font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	animation: hfAcademicPageIn .35s var(--ease);
}

@keyframes hfAcademicPageIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ---- Reset khác biệt giữa theme cha và design (T3.4) ---- */
.hf-hoc-thuat,
.hf-hoc-thuat *,
.hf-hoc-thuat *::before,
.hf-hoc-thuat *::after { box-sizing: border-box; }
.hf-hoc-thuat h1,
.hf-hoc-thuat h2,
.hf-hoc-thuat h3,
.hf-hoc-thuat h4 { margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700; }
.hf-hoc-thuat p { margin: 0; }
.hf-hoc-thuat a { color: inherit; text-decoration: none; }
.hf-hoc-thuat img { display: block; max-width: 100%; }
.hf-hoc-thuat ul { margin: 0; padding: 0; list-style: none; }

/* ---- Khung nội dung ---- */
.hf-hoc-thuat .hf-shell {
	width: calc(100% - var(--gut) * 2);
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 0;
}

/* ---- Nút (design 371–388) ---- */
.hf-hoc-thuat .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;
}
.hf-hoc-thuat .hf-btn:hover { transform: translateY(-2px); }
.hf-hoc-thuat .hf-btn-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(238,104,35,.32); }
.hf-hoc-thuat .hf-btn-orange:hover { box-shadow: 0 12px 26px rgba(238,104,35,.42); }
.hf-hoc-thuat .hf-btn-ghost { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-100); }
.hf-hoc-thuat .hf-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.hf-hoc-thuat .hf-btn-white { background: #fff; color: var(--blue); }
/* `.hf-btn-lg` design khai 16.5px (387) NHƯNG lớp type-scale sau đó đặt
   `.hf-btn { font-size: var(--hf-type-control) }` = 15px, cùng specificity → 15px THẮNG.
   Giữ 16.5px ở đây làm nút rộng thêm 26px, cao thêm 3px so với design. */
.hf-hoc-thuat .hf-btn-lg { padding: 16px 30px; font-size: 15px; }

/* ---- Nhãn eyebrow + tag (design 395–401, 529–531; cỡ chữ 14px theo lớp type-scale) ---- */
.hf-hoc-thuat .hf-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--orange);
}
.hf-hoc-thuat .hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }
.hf-hoc-thuat .hf-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 800; padding: 5px 11px; border-radius: 4px;
}
.hf-hoc-thuat .hf-tag-orange { background: var(--orange-50); color: var(--orange); }

/* ---- Breadcrumb (design 2382–2385). Impl dùng <a>, design dùng <button> ---- */
.hf-hoc-thuat .hf-crumb {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 10px;
}
.hf-hoc-thuat .hf-crumb.light { color: rgba(255,255,255,.78); }
.hf-hoc-thuat .hf-crumb svg { opacity: .5; }
.hf-hoc-thuat .hf-crumb a {
	color: inherit; text-decoration: none; background: none; border: 0;
	padding: 0; font: inherit; cursor: pointer;
}
.hf-hoc-thuat .hf-crumb a:hover { color: #fff; }

/* ---- Link "Xem chi tiết" trong thẻ (design 2412) ---- */
.hf-hoc-thuat .hf-prog-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 800; font-size: 13.5px; color: var(--orange); transition: gap .16s;
}

/* ---- Khối 1: hero ảnh nền (design 2416–2424, 7223) ---- */
.hf-hoc-thuat .hf-pd-hero { position: relative; color: #fff; padding: 52px 0 64px; overflow: hidden; }
.hf-hoc-thuat .hf-pd-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hf-hoc-thuat .hf-pd-hero-bg > div { width: 100%; height: 100%; }
.hf-hoc-thuat .hf-pd-hero-ov {
	position: absolute; inset: 0;
	background: linear-gradient(95deg, rgba(15,50,112,.93) 0%, rgba(23,71,157,.55) 45%, rgba(23,71,157,.05) 68%, transparent 82%);
}
.hf-hoc-thuat .hf-pd-hero-in { position: relative; z-index: 1; }
.hf-hoc-thuat .hf-pd-hero h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; max-width: 760px; }
.hf-hoc-thuat .hf-pd-hero .hf-eyebrow { margin-bottom: 12px; }
.hf-hoc-thuat .hf-pd-hero p { font-size: 16px; line-height: 1.65; color: #dbe5f5; max-width: 600px; margin-top: 14px; }
.hf-hoc-thuat .hf-pd-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hf-hoc-thuat .hf-sdh-hero { padding-bottom: 70px; }

/* ---- Khối chung .hf-blk + bố cục 2 cột (design 3151–3170) ---- */
.hf-hoc-thuat .hf-blk-inner { padding: 70px 0; }
.hf-hoc-thuat .hf-blk-inner.soft { background: var(--bg-soft); }
.hf-hoc-thuat .hf-blk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hf-hoc-thuat .hf-blk-title { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 26px; max-width: 920px; }
.hf-hoc-thuat .hf-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; max-width: 760px; }
.hf-hoc-thuat .hf-body { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 14px; max-width: 760px; }
.hf-hoc-thuat .hf-ov { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.hf-hoc-thuat .hf-ov-side { position: relative; display: flex; flex-direction: column; gap: 16px; }

/* ---- Khối 5: băng-rôn thương hiệu tràn viền (design 3321–3323) ---- */
.hf-hoc-thuat .hf-brand-banner { display: block; width: 100%; overflow: hidden; }
.hf-hoc-thuat .hf-brand-banner picture { display: block; }
.hf-hoc-thuat .hf-brand-banner img { width: 100%; height: auto; display: block; }

/* ---- Khối 6: thẻ sự kiện (design 2513–2516, 7303–7305, 7341–7360) ---- */
.hf-hoc-thuat .hf-newscard {
	text-align: left; border-radius: var(--radius); overflow: hidden; background: #fff;
	border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s;
}
/* KHÔNG đặt `display: block` — specificity (0,2,1) sẽ đè `.hf-ht-event { display: flex }`
   (0,2,0) → `.hf-newscard-body { flex: 1 }` hết tác dụng → `.hf-ht-event-meta { margin-top: auto }`
   không đẩy được meta xuống đáy thẻ, 3 thẻ lệch nhau. Màu/gạch chân đã có ở rule `a` gốc. */
.hf-hoc-thuat a.hf-newscard { color: inherit; text-decoration: none; }
.hf-hoc-thuat .hf-newscard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.hf-hoc-thuat .hf-newscard-body { padding: 18px 20px 22px; }
.hf-hoc-thuat .hf-newscard-body h3 { font-size: 17.5px; margin: 10px 0 12px; line-height: 1.3; }
.hf-hoc-thuat .hf-news-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hf-hoc-thuat .hf-news-grid-3 .hf-newscard-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hf-hoc-thuat .hf-news-grid-3 .hf-newscard-body h3 { margin: 0; font-size: 16.5px; }

.hf-hoc-thuat .hf-ht-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hf-hoc-thuat .hf-ht-figure {
	margin: 0; overflow: hidden; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.hf-hoc-thuat .hf-ht-figure img { width: 100%; height: auto; display: block; }
.hf-hoc-thuat .hf-ht-event { display: flex; flex-direction: column; text-align: left; }
.hf-hoc-thuat .hf-ht-event > div:first-child { flex-shrink: 0; }
.hf-hoc-thuat .hf-ht-event .hf-newscard-body { flex: 1; gap: 9px; }
.hf-hoc-thuat .hf-ht-event .hf-newscard-body h3 { font-size: 17px; line-height: 1.35; }
.hf-hoc-thuat .hf-ht-event .hf-newscard-body > p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.hf-hoc-thuat .hf-ht-event-meta { display: grid; gap: 6px; margin-top: auto; padding-top: 4px; }
.hf-hoc-thuat .hf-ht-event-meta li {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.5;
}
.hf-hoc-thuat .hf-ht-event-meta svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }

/* ---- Khối 7: thẻ thư viện & học liệu (design 2644–2648) ---- */
.hf-hoc-thuat .hf-org-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hf-hoc-thuat .hf-org-card {
	display: flex; gap: 16px; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.hf-hoc-thuat a.hf-org-card { color: inherit; text-decoration: none; }
.hf-hoc-thuat .hf-org-ic {
	display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 4px; background: var(--bg-soft); color: var(--blue); flex-shrink: 0;
}
.hf-hoc-thuat .hf-org-card h3 { font-size: 17px; margin-bottom: 6px; }
.hf-hoc-thuat .hf-org-card p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---- Khối 8: dải CTA cam (design 611–617) ---- */
.hf-hoc-thuat .hf-cta-band { background: var(--orange); color: #fff; padding: 60px 0; }
.hf-hoc-thuat .hf-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.hf-hoc-thuat .hf-cta-copy h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 12px 0 12px; max-width: 600px; }
.hf-hoc-thuat .hf-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---- Cân dòng tiêu đề/nhãn ngắn (design app-shell 3728–3734) ---- */
.hf-hoc-thuat h1,
.hf-hoc-thuat h2,
.hf-hoc-thuat h3,
.hf-hoc-thuat h4,
.hf-hoc-thuat .hf-tag { text-wrap: balance; }

/* ============ Responsive (port đúng breakpoint design) ============ */

@media (max-width: 1080px) {
	.hf-hoc-thuat .hf-news-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
	.hf-hoc-thuat { --gut: 28px; }
}

@media (max-width: 960px) {
	.hf-hoc-thuat .hf-ov { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
	.hf-hoc-thuat { --gut: 18px; }
}

@media (max-width: 720px) {
	.hf-hoc-thuat .hf-org-grid { grid-template-columns: 1fr; }
	.hf-hoc-thuat .hf-news-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.hf-hoc-thuat .hf-blk-inner { padding: 48px 0; }
}