/* ============================================================
   Trang "Sau đại học" — module postgraduate-page iteration 3 (SELF-CONTAINED).
   Port ngày 2026-08-20 từ _design-reference/20260820-HUFLIT-website-standalone/
   HUFLIT-standalone.html, component `js/sdh.js` (dòng 47272–47709).

   NGUỒN TỪNG KHỐI (để lần sau sửa hệ thiết kế chung còn biết đối chiếu):
   · Token + base + `.hf-shell` ....... css/tokens-and-header.css (329–367)
                                        + css/accessibility-layout.css (3794–3953)
                                        + v40-global-container-about.css (4513)
                                        + v42 (`--hf-page-max/--hf-page-side`, 4909)
   · Nguyên thuỷ dùng chung ........... css/site.css: `.hf-btn*` (374–387),
                                        `.hf-link-arrow` (389), `.hf-eyebrow` (395),
                                        `.hf-tag*` (529), `.hf-crumb` (2382),
                                        `.hf-tabs/.hf-tab` (2631), `.hf-news-date`,
                                        `.hf-prog-card*`, `.hf-newscard*`, `.hf-team-*`
   · Hero + khung 9 khối .............. khối "Program Detail — 9 blocks" (2416–2435,
                                        3140–3302): `hf-pd-hero*`, `hf-blk*`, `hf-ov*`,
                                        `hf-why-*`, `hf-out-*`, `hf-handbook-*`,
                                        `hf-syllabus-card`, `hf-quote`, `hf-pd-ctastrip`
   · Riêng trang SĐH .................. khối "v-sdh" (7215–7335): toàn bộ `hf-sdh-*`

   ⚠ KHÔNG chép từ assets/css/program-detail.css (trang /dai-hoc/). File đó port từ
   design CŨ (program-ngon-ngu-trung.html) nên lệch 3 chỗ với design 20/08:
     1. `.hf-pd-hero` ở đó có `background: linear-gradient(120deg,…)` + lớp phủ 2 stop;
        design SĐH dùng ảnh nền + `.hf-pd-hero-ov` 4 stop nhạt dần về transparent (82%).
     2. `.hf-shell` ở đó là `max-width:1360px; padding:0 32px` → hẹp hơn design 64px ở
        1440. Design (v40 !important) là `width: calc(100% - side*2); max-width:1360px;
        padding:0`. Theo đúng cách experience58.css / home-page-v3.css đã chốt.
     3. Heading ở đó là `700 → 800 / 1.12 / -.02em`; design 20/08 là `700 / 1.16 / -.01em`,
        và bộ shadow nhẹ hơn (`0 1px 3px`, `0 4px 14px`, `0 10px 28px`).

   ⚠ SCOPE BẮT BUỘC: mọi rule đặt dưới `.hf-sdh` (wrapper `<div class="hf-page hf-pd
   hf-sdh">`). Các class `.hf-shell` / `.hf-eyebrow` / `.hf-tag` cũng do HEADER/MEGA-MENU
   + FOOTER dùng; file này nạp 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 / experience58.css.

   Cỡ chữ đã BAKE lớp đè accessibility-layout.css (dòng 3830–3899) vào giá trị cuối:
     `.hf-btn`/`.hf-btn-lg`/`.hf-link-arrow`/`.hf-tab` → 15px (không phải 16.5/14.5)
     `.hf-eyebrow`/`.hf-tag` → 14px (không phải 13/12.5)
     `.hf-news-date`/`.hf-prog-meta`/`.hf-team-role` → 13px (không phải 12.5)
     `.hf-pd-hero p` → 16px/1.65 (không phải 17px)
     `.hf-why-card p`/`.hf-out-card p`/`.hf-handbook-card p` → 15px/1.55 (không phải 14.5)

   Breakpoint GIỮ NGUYÊN của design: 1100 / 1080 / 960 / 760 / 720 / 640 px.
   Font 'Mulish' đã có @font-face trong mega-menu.css (nạp mọi trang).
   ============================================================ */

/* ══════════════════ A. Token + base — khai TRÊN .hf-sdh, KHÔNG :root ══════════════════ */
.hf-sdh {
	--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);
	--ease: cubic-bezier(.22, .61, .36, 1);
	/* Khung nội dung cuối cùng của design (v40 + v42) — xem mục B. */
	--hf-page-max: 1360px;
	--hf-page-side: 36px;

	color: var(--ink);
	background: var(--bg);
	font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

.hf-sdh h1,
.hf-sdh h2,
.hf-sdh h3,
.hf-sdh h4 { margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700; }
.hf-sdh p { margin: 0; }
.hf-sdh ul,
.hf-sdh ol { margin: 0; padding: 0; list-style: none; }
.hf-sdh dl { margin: 0; }
.hf-sdh a { color: inherit; text-decoration: none; }
.hf-sdh a:hover,
.hf-sdh a:focus { text-decoration: none; }
.hf-sdh img { display: block; max-width: 100%; }
.hf-sdh figure { margin: 0; }
.hf-sdh button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Chừa chỗ cho header sticky khi cuộn tới #blk-… (không ảnh hưởng layout tĩnh). */
.hf-sdh section[id] { scroll-margin-top: 140px; }

/* ══════════════════ B. Container — v40 (4513) + v42 (4909) ══════════════════
   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-sdh` → mega-menu + footer giữ nguyên. */
.hf-sdh .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. Nguyên thuỷ dùng chung ══════════════════ */

/* --- Nút (site.css 374–387; cỡ chữ theo lớp đè accessibility 15px) --- */
.hf-sdh .hf-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: var(--radius);
	font-weight: 800;
	font-size: 15px;
	/* KHÔNG khai line-height: design (site.css 374–387) không có, nút thừa hưởng 1.55
	   của body ⇒ cao 55px. Đặt 1.2 làm nút 50px và kéo tụt cả hero 6px. */
	white-space: nowrap;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform .16s var(--ease), box-shadow .2s, background .2s;
}
.hf-sdh .hf-btn:hover { transform: translateY(-2px); }
.hf-sdh .hf-btn-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(238, 104, 35, .32); }
.hf-sdh .hf-btn-orange:hover { box-shadow: 0 12px 26px rgba(238, 104, 35, .42); }
.hf-sdh .hf-btn-blue { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(23, 71, 157, .28); }
.hf-sdh .hf-btn-ghost { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-100); }
.hf-sdh .hf-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.hf-sdh .hf-btn-white { background: #fff; color: var(--blue); }
/* `.hf-btn-lg` chỉ còn khác padding: font-size 16.5px của site.css bị lớp accessibility
   (nạp sau, cùng specificity) kéo về 15px. */
.hf-sdh .hf-btn-lg { padding: 16px 30px; }

/* --- Link mũi tên (site.css 389) --- */
.hf-sdh .hf-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 15px;
	color: var(--blue);
	transition: gap .18s var(--ease);
}
.hf-sdh .hf-link-arrow:hover { gap: 12px; }

/* --- Eyebrow (site.css 395; 14px theo --hf-type-label) --- */
.hf-sdh .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-sdh .hf-eyebrow::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--orange);
}

/* --- Tag (site.css 529; 14px theo --hf-type-label) --- */
.hf-sdh .hf-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 800;
	padding: 5px 11px;
	border-radius: 4px;
}
.hf-sdh .hf-tag-blue { background: var(--blue-50); color: var(--blue); }
.hf-sdh .hf-tag-orange { background: var(--orange-50); color: var(--orange); }

/* --- Breadcrumb trên nền hero (site.css 2382–2385) --- */
.hf-sdh .hf-crumb {
	display: flex;
	align-items: center;
	/* KHÔNG flex-wrap: design để chặng cuối tự xuống dòng BÊN TRONG ô của nó (42px),
	   wrap đẩy nguyên chặng xuống dòng mới (+8px kể cả gap). */
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 10px;
}
.hf-sdh .hf-crumb.light { color: rgba(255, 255, 255, .78); }
.hf-sdh .hf-crumb a:hover { color: #fff; }
.hf-sdh .hf-crumb svg { opacity: .5; }
.hf-sdh .hf-crumb [aria-current] { color: #fff; }

/* --- Thanh tab (site.css 2631–2635; 15px theo --hf-type-control) --- */
.hf-sdh .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-sdh .hf-tab {
	padding: 11px 22px;
	border-radius: 4px;
	font-weight: 800;
	font-size: 15px;
	color: var(--ink-soft);
	transition: background .15s, color .15s;
}
.hf-sdh .hf-tab:hover { color: var(--blue); }
.hf-sdh .hf-tab.on { background: var(--blue); color: #fff; }

/* --- Ngày tin (13px theo --hf-type-meta) --- */
.hf-sdh .hf-news-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	font-weight: 700;
}

/* ══════════════════ D. Hero (design 2416–2424 + 7216) ══════════════════
   z-index:1 — hero là thẻ <header>, theme legacy có `header{z-index:20}`; không đặt lại
   thì nền hero trồi lên trên nội dung (cùng bài học của program-detail.css). */
.hf-sdh .hf-pd-hero {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 52px 0 64px;
	overflow: hidden;
}
.hf-sdh .hf-sdh-hero { padding-bottom: 70px; }
.hf-sdh .hf-pd-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hf-sdh .hf-pd-hero-bg > div { width: 100%; height: 100%; }
.hf-sdh .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-sdh .hf-pd-hero-in { position: relative; z-index: 1; }
.hf-sdh .hf-pd-hero h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; max-width: 760px; }
.hf-sdh .hf-pd-hero p { font-size: 16px; line-height: 1.65; color: #dbe5f5; max-width: 600px; margin-top: 14px; }
.hf-sdh .hf-pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 14px; }
.hf-sdh .hf-pd-code {
	font-size: 12.5px;
	font-weight: 800;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	padding: 5px 11px;
	border-radius: 4px;
}
.hf-sdh .hf-pd-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ══════════════════ E. Dải số liệu dưới hero (design 7217–7235) ══════════════════ */
.hf-sdh .hf-sdh-stats { background: var(--orange); color: #fff; }
.hf-sdh .hf-sdh-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	padding-top: 24px;
	padding-bottom: 24px;
}
.hf-sdh .hf-sdh-stat strong {
	display: block;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -.01em;
}
.hf-sdh .hf-sdh-stat span {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: #ffe3d2;
	line-height: 1.45;
}
.hf-sdh .hf-sdh-stat + .hf-sdh-stat { border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 20px; }

/* ══════════════════ F. Thanh tab điều hướng (design 7236–7241) ══════════════════ */
.hf-sdh .hf-sdh-tabbar { padding-top: 28px; }
.hf-sdh .hf-tabs.hf-sdh-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0; }
.hf-sdh .hf-sdh-tabs .hf-tab { flex: 0 0 auto; white-space: nowrap; }
.hf-sdh .hf-sdh-tab-out { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); }
.hf-sdh .hf-sdh-tab-out:hover { color: var(--orange); background: var(--orange-50); }

/* ══════════════════ G. Khung khối chung (design 3151–3160) ══════════════════ */
.hf-sdh .hf-blk-inner { padding: 70px 0; }
.hf-sdh .hf-blk-inner.soft { background: var(--bg-soft); }
.hf-sdh .hf-blk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hf-sdh .hf-blk-title { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 26px; max-width: 920px; }
.hf-sdh .hf-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; max-width: 760px; }
.hf-sdh .hf-body { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 14px; max-width: 760px; }

/* ══════════════════ H. Khối Tổng quan: lưới 2 cột + trích dẫn (design 3162–3172) ══════════════════ */
.hf-sdh .hf-ov { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.hf-sdh .hf-ov-main { min-width: 0; }
.hf-sdh .hf-ov-side { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hf-sdh .hf-quote {
	margin: 0;
	background: var(--blue-50);
	border-left: 4px solid var(--orange);
	border-radius: 0 4px 4px 0;
	padding: 18px 20px;
	color: var(--blue-700);
}
.hf-sdh .hf-quote svg { color: var(--orange); opacity: .8; }
.hf-sdh .hf-quote p { font-size: 16px; font-weight: 700; font-style: italic; margin-top: 8px; line-height: 1.45; }

/* --- Thẻ cổng thông tin trong cột phải (design 7242–7250) --- */
.hf-sdh .hf-sdh-portals { display: grid; gap: 12px; }
.hf-sdh .hf-sdh-portal {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.hf-sdh .hf-sdh-portal:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.hf-sdh .hf-sdh-portal-ic {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--blue-50);
	color: var(--blue);
	flex-shrink: 0;
}
.hf-sdh .hf-sdh-portal > div { flex: 1; min-width: 0; }
.hf-sdh .hf-sdh-portal h4 { font-size: 15px; margin-bottom: 5px; line-height: 1.35; }
.hf-sdh .hf-sdh-portal p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.hf-sdh .hf-sdh-portal > svg:last-child { color: var(--orange); flex-shrink: 0; margin-top: 4px; }

/* --- Ảnh chứng nhận kiểm định trong cột phải trang ngành (design 7264–7266) --- */
.hf-sdh .hf-sdh-cert {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.hf-sdh .hf-sdh-cert img { width: 100%; height: auto; display: block; }
.hf-sdh .hf-sdh-cert figcaption { padding: 12px 14px 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ══════════════════ I. Lưới ngành Thạc sĩ (site.css .hf-prog-card* + design 7256–7261) ══════════════════ */
/* padding + line-height: tái lập hộp mặc định của <button> mà design đang render (D5-e đổi
   sang <a> nên mất). Không có 2 dòng này, ảnh thẻ rộng thêm 12px và thẻ cao thêm 19px. */
.hf-sdh .hf-prog-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 100%;
	padding: 1px 6px;
	line-height: normal;
	/* cỡ chữ mặc định của <button> — không chữ nào của thẻ dùng nó (mọi con đều tự khai),
	   nhưng nó định chiều cao dòng ảo chứa `.hf-prog-link` (inline-flex) ⇒ lệch 3px nếu bỏ. */
	font-size: 13.3333px;
	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;
}
.hf-sdh .hf-prog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.hf-sdh .hf-prog-card-body { padding: 18px 20px 20px; }
.hf-sdh .hf-prog-card-body h3 { font-size: 18px; margin: 10px 0 12px; }
.hf-sdh .hf-prog-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--muted);
	font-weight: 700;
	margin-bottom: 14px;
}
.hf-sdh .hf-prog-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hf-sdh .hf-prog-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	font-size: 13.5px;
	color: var(--orange);
	transition: gap .16s;
}
.hf-sdh .hf-prog-card:hover .hf-prog-link { gap: 11px; }

.hf-sdh .hf-sdh-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hf-sdh .hf-sdh-prog-card h3 { font-size: 19px; margin: 10px 0 10px; }
.hf-sdh .hf-sdh-prog-decision { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px; }
.hf-sdh .hf-sdh-prog-card .hf-prog-meta { flex-wrap: wrap; gap: 8px 16px; }

/* ══════════════════ J. Thẻ "Vì sao" + thẻ nghề nghiệp (design 3196–3200 + 7262–7263) ══════════════════ */
.hf-sdh .hf-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hf-sdh .hf-why-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 24px;
	box-shadow: var(--shadow-sm);
	transition: transform .18s var(--ease), box-shadow .18s;
}
.hf-sdh .hf-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hf-sdh .hf-why-no { font-size: 28px; font-weight: 700; color: var(--blue-100); letter-spacing: -.03em; }
.hf-sdh .hf-why-card h3 { font-size: 18px; margin: 6px 0 10px; }
.hf-sdh .hf-why-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

.hf-sdh .hf-sdh-career-card { display: flex; align-items: flex-start; gap: 15px; padding: 22px 22px; }
.hf-sdh .hf-sdh-career-ic {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--orange-50);
	color: var(--orange);
	flex-shrink: 0;
}
.hf-sdh .hf-sdh-career-card p { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.55; }

/* ══════════════════ K. Đội ngũ (site.css .hf-team-*) ══════════════════ */
.hf-sdh .hf-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hf-sdh .hf-team-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 20px;
	text-align: left;
	box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.hf-sdh .hf-team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.hf-sdh .hf-team-avatar {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .01em;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 1px var(--line);
}
.hf-sdh .hf-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hf-sdh .hf-team-text { min-width: 0; }
.hf-sdh .hf-team-card strong { display: block; font-size: 15px; color: var(--ink); line-height: 1.35; }
.hf-sdh .hf-team-role { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 4px; line-height: 1.45; }

/* ══════════════════ L. Liên hệ (design 7284–7300) ══════════════════ */
.hf-sdh .hf-sdh-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.hf-sdh .hf-sdh-contact-list { display: grid; grid-template-columns: 175px 1fr; gap: 14px 22px; margin: 0; }
.hf-sdh .hf-sdh-contact-list dt {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 800;
	color: var(--blue);
}
.hf-sdh .hf-sdh-contact-list dd { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.hf-sdh .hf-sdh-contact-list a:hover { color: var(--orange); }
.hf-sdh .hf-sdh-maillist { display: grid; gap: 6px; }
.hf-sdh .hf-sdh-contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 26px 28px;
}
.hf-sdh .hf-sdh-contact-card h3 { font-size: 18px; line-height: 1.35; }
.hf-sdh .hf-sdh-contact-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

/* ══════════════════ M. Tin tức (site.css .hf-newscard* + design 7280–7283) ══════════════════ */
.hf-sdh .hf-newscard {
	display: block;
	width: 100%;
	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;
}
.hf-sdh .hf-newscard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.hf-sdh .hf-newscard-body { padding: 18px 20px 22px; }
.hf-sdh .hf-newscard-body h3 { font-size: 17.5px; margin: 10px 0 12px; line-height: 1.3; }

.hf-sdh .hf-sdh-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hf-sdh .hf-sdh-news-grid .hf-newscard-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hf-sdh .hf-sdh-news-grid .hf-newscard-body h3 { margin: 0; font-size: 16.5px; }
/* design: `style={{marginTop:22}}` trên nút "Xem tất cả tin" */
.hf-sdh .hf-sdh-news-more { margin-top: 22px; }

/* ══════════════════ N. Khối riêng trang ngành ══════════════════ */

/* --- Lộ trình đào tạo theo giai đoạn (design 7268–7274) --- */
.hf-sdh .hf-sdh-phases { display: grid; gap: 14px; }
.hf-sdh .hf-sdh-phase {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 22px 24px;
}
.hf-sdh .hf-sdh-phase-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hf-sdh .hf-sdh-phase-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--orange);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
}
.hf-sdh .hf-sdh-phase h3 { font-size: 17.5px; }
.hf-sdh .hf-sdh-phase p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
/* design: `style={{marginTop:26}}` trên nút "Xem khung chương trình đào tạo" */
.hf-sdh .hf-sdh-cur-btn { margin-top: 26px; }

/* --- Thẻ có ảnh: Phương pháp giảng dạy & Cơ hội việc làm (design 7275–7279) --- */
.hf-sdh .hf-sdh-imgcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hf-sdh .hf-sdh-imgcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .18s var(--ease), box-shadow .18s;
}
.hf-sdh .hf-sdh-imgcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hf-sdh .hf-sdh-imgcard-body { padding: 16px 18px 20px; }
.hf-sdh .hf-sdh-imgcard-when {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--orange);
}
.hf-sdh .hf-sdh-imgcard h3 { font-size: 16.5px; line-height: 1.35; margin-bottom: 9px; }
.hf-sdh .hf-sdh-imgcard p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* --- Chuẩn đầu ra & phương thức tuyển sinh (design 3216–3220 + 7267) --- */
.hf-sdh .hf-out-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hf-sdh .hf-out-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}
.hf-sdh .hf-out-ic {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: var(--bg-soft);
	color: var(--blue);
	margin-bottom: 14px;
}
.hf-sdh .hf-out-card h3 { font-size: 17.5px; margin-bottom: 9px; }
.hf-sdh .hf-out-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.hf-sdh .hf-sdh-plo {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--blue-50);
	color: var(--blue);
	font-size: 12.5px;
	font-weight: 800;
}

/* --- Dải CTA tuyển sinh (design 3238–3241) --- */
.hf-sdh .hf-pd-ctastrip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 30px;
	background: var(--orange);
	color: #fff;
	border-radius: var(--radius);
	padding: 22px 28px;
}
.hf-sdh .hf-pd-ctastrip span { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; }
.hf-sdh .hf-pd-ctastrip .hf-btn-orange { background: #fff; color: var(--orange); }

/* --- Thẻ đề cương học phần (design 3271–3272) --- */
.hf-sdh .hf-syllabus-card {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 6px;
	padding: 24px 26px;
	box-shadow: var(--shadow-sm);
	flex-wrap: wrap;
}
.hf-sdh .hf-syllabus-card p { flex: 1; min-width: 260px; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* --- Cẩm nang học viên (design 3280–3291) --- */
.hf-sdh .hf-handbook-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hf-sdh .hf-handbook-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.hf-sdh .hf-handbook-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.hf-sdh .hf-handbook-ic {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--blue-50);
	color: var(--blue);
	flex-shrink: 0;
}
.hf-sdh .hf-handbook-card > div { flex: 1; min-width: 0; }
.hf-sdh .hf-handbook-card h4 { font-size: 15.5px; margin-bottom: 5px; }
.hf-sdh .hf-handbook-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.hf-sdh .hf-handbook-card > svg:last-child { color: var(--orange); flex-shrink: 0; margin-top: 4px; }

/* ══════════════════ O. Băng-rôn thương hiệu (design 3345–3347) ══════════════════ */
.hf-sdh .hf-brand-banner { display: block; width: 100%; overflow: hidden; }
.hf-sdh .hf-brand-banner picture { display: block; }
.hf-sdh .hf-brand-banner img { width: 100%; height: auto; display: block; }

/* ══════════════════ P. Khung ảnh — thay component <Placeholder> của design ══════════════════
   Design render `<div style="position:relative;overflow:hidden;border-radius:R;
   aspect-ratio:ratio;background:#eef1f6"><img style="width/height:100%;object-fit:cover"></div>`.
   Ở WP các thuộc tính đó thành class để markup sạch + admin thay ảnh qua ACF. */
.hf-sdh .hf-sdh-ph { position: relative; overflow: hidden; background: #eef1f6; }
.hf-sdh .hf-sdh-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-sdh .hf-sdh-ph.is-fill { width: 100%; height: 100%; }
.hf-sdh .hf-sdh-ph.is-43 { aspect-ratio: 4 / 3; }
.hf-sdh .hf-sdh-ph.is-169 { aspect-ratio: 16 / 9; }
.hf-sdh .hf-sdh-ph.is-rounded { border-radius: 4px; }
/* Admin chưa gắn ảnh: giữ đúng khung sọc của design thay vì để ô trắng vỡ bố cục. */
.hf-sdh .hf-sdh-ph.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #dbe5f5 0 14px, #cdd9ee 14px 28px);
}
.hf-sdh .hf-sdh-ph.is-empty.is-orange { background: repeating-linear-gradient(135deg, #fde2cf 0 14px, #f8d3b8 14px 28px); }
.hf-sdh .hf-sdh-ph-lab {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #17479D;
	background: rgba(255, 255, 255, .66);
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.hf-sdh .hf-sdh-ph.is-empty.is-orange .hf-sdh-ph-lab { color: #c4561a; }

/* ══════════════════ Q. Responsive — GIỮ NGUYÊN điểm gãy của design ══════════════════ */

/* design v42/v45: --hf-page-side 36 → 28 → 18 */
@media (max-width: 1100px) {
	.hf-sdh { --hf-page-side: 28px; }
}

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

@media (max-width: 960px) {
	.hf-sdh .hf-ov { grid-template-columns: 1fr; gap: 28px; }
	.hf-sdh .hf-why-grid,
	.hf-sdh .hf-out-grid { grid-template-columns: repeat(2, 1fr); }
	.hf-sdh .hf-sdh-contact { grid-template-columns: 1fr; gap: 28px; }
	.hf-sdh .hf-sdh-contact-list { grid-template-columns: 1fr; gap: 4px; }
	.hf-sdh .hf-sdh-contact-list dd { margin-bottom: 14px; }
}

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

@media (max-width: 720px) {
	.hf-sdh .hf-sdh-prog-grid,
	.hf-sdh .hf-sdh-news-grid,
	.hf-sdh .hf-sdh-imgcards { grid-template-columns: 1fr; }
	.hf-sdh .hf-sdh-stat + .hf-sdh-stat { border-left: 0; padding-left: 0; }
	.hf-sdh .hf-sdh-tabbar { padding-top: 20px; }
}

@media (max-width: 640px) {
	.hf-sdh .hf-handbook-grid { grid-template-columns: 1fr; }
	.hf-sdh .hf-why-grid,
	.hf-sdh .hf-out-grid { grid-template-columns: 1fr; }
	.hf-sdh .hf-blk-inner { padding: 48px 0; }
}