/* * Program Detail (CPT nganh) — port từ design program-ngon-ngu-trung.html. * Toàn bộ scope dưới .hf-pd để cô lập, KHÔNG đụng global/main.css. */ .hf-pd { --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; /* KHỚP design 260715 (site.css: --radius 4px / -lg 6px / -sm 3px). Bản cũ đặt 18/26/12px làm MỌI card·panel·nút dùng var(--radius) (13 chỗ) bo tròn gấp ~4,5 lần design — gốc của lỗi "nút bo góc pill" + góc panel roadmap lệch. Radius chỉ ảnh hưởng thẩm mỹ, không vỡ layout. */ --radius: 4px; --radius-lg: 6px; --radius-sm: 3px; --shadow-sm: 0 2px 8px rgba(20,33,61,.06); --shadow-md: 0 10px 30px rgba(20,33,61,.10); --shadow-lg: 0 24px 60px rgba(20,33,61,.16); --maxw: 1360px; --gut: 32px; --ease: cubic-bezier(.22,.61,.36,1); color: var(--ink); font-family: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.55; animation: hfPdPageIn .35s var(--ease); } @keyframes hfPdPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* base elements (scoped) */ .hf-pd h1, .hf-pd h2, .hf-pd h3, .hf-pd h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; } .hf-pd p { margin: 0; } .hf-pd ul { margin: 0; padding: 0; list-style: none; } .hf-pd a { color: inherit; text-decoration: none; } .hf-pd img { display: block; max-width: 100%; } .hf-pd .hf-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%; box-sizing: border-box; } /* buttons */ /* border-radius: var(--radius) (4px) — KHỚP design .hf-btn (site.css) + đồng nhất 8 trang khác của site (đều 4px). 999px làm nút tự bo tròn thành pill, sai design. */ .hf-pd .hf-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: var(--radius); font-weight: 800; font-size: 15px; transition: transform .16s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; border: none; cursor: pointer; line-height: 1.2; text-decoration: none; } .hf-pd .hf-btn:hover { transform: translateY(-2px); } .hf-pd .hf-btn-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(238,104,35,.32); } .hf-pd .hf-btn-orange:hover { box-shadow: 0 12px 26px rgba(238,104,35,.42); } .hf-pd .hf-btn-blue { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(23,71,157,.28); } .hf-pd .hf-btn-white { background: #fff; color: var(--blue); } .hf-pd .hf-btn-lg { padding: 16px 30px; font-size: 16.5px; } /* eyebrow / tag / link-arrow / section heads */ .hf-pd .hf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); } .hf-pd .hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); } .hf-pd .hf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 4px; } .hf-pd .hf-tag-orange { background: var(--orange-50); color: var(--orange); } .hf-pd .hf-tag-blue { background: var(--blue-50); color: var(--blue); } .hf-pd .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-pd .hf-link-arrow:hover { gap: 12px; } .hf-pd .hf-section { padding: 84px 0; } .hf-pd .hf-head { max-width: 640px; } .hf-pd .hf-head h2 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 0; } .hf-pd .hf-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } /* breadcrumb */ .hf-pd .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; flex-wrap: wrap; } .hf-pd .hf-crumb.light { color: rgba(255,255,255,.78); } .hf-pd .hf-crumb a:hover { color: #fff; } .hf-pd .hf-crumb span[aria-current] { color: #fff; } .hf-pd .hf-crumb .hf-crumb-sep { opacity: .5; } /* hero */ /* z-index:1 — đè controlled stacking, ghi đè rule global `header{z-index:20}` của theme legacy (hero là thẻ
nên dính z-index 20). Phải thấp hơn facts (z2) để facts nổi LÊN TRÊN bg hero. */ .hf-pd .hf-pd-hero { position: relative; z-index: 1; color: #fff; padding: 52px 0 64px; overflow: hidden; background: linear-gradient(120deg, var(--blue-700) 0%, var(--blue) 75%); } .hf-pd .hf-pd-hero-bg { position: absolute; inset: 0; z-index: 0; } .hf-pd .hf-pd-hero-bg .hf-pd-hero-img { width: 100%; height: 100%; object-fit: cover; } .hf-pd .hf-pd-hero-ov { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(15,50,112,.95), rgba(23,71,157,.7)); } .hf-pd .hf-pd-hero-in { position: relative; z-index: 1; } .hf-pd .hf-pd-tags { display: flex; gap: 8px; margin: 14px 0 14px; flex-wrap: wrap; } .hf-pd .hf-pd-hero h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; max-width: 760px; } .hf-pd .hf-pd-hero p { font-size: 17px; color: #dbe5f5; max-width: 600px; margin-top: 14px; } .hf-pd .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-pd .hf-pd-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } /* facts */ /* z-index:2 — facts NỔI LÊN TRÊN bg hero (hero ghim z1) để cả nhãn lẫn giá trị hiện trên nền trắng; margin-top âm để đè lên đáy hero (hiệu ứng float-up card). Khi cuộn vẫn trượt CHUI DƯỚI header sticky của site (header z-index 100 > 2) — chỉ pdnav ghim lại (đúng behavior design). */ .hf-pd .hf-pd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 22px; position: relative; z-index: 2; margin-top: -34px; } .hf-pd .hf-pd-fact { display: flex; align-items: center; gap: 13px; } .hf-pd .hf-pd-fact + .hf-pd-fact { border-left: 1px solid var(--line); padding-left: 16px; } .hf-pd .hf-pd-fact-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue); flex-shrink: 0; } .hf-pd .hf-pd-fact > div span { font-size: 12.5px; color: var(--muted); font-weight: 700; display: block; } .hf-pd .hf-pd-fact strong { font-size: 16px; } /* sticky sub-nav */ /* Stepper mục lục — port nguyên văn site.css của design 260715 (dòng 1222–1234), thêm tiền tố `.hf-pd` để không rò sang template khác. Ghim NGAY DƯỚI header chính: design `top: 134px`, header impl cao 135px nên giữ 135 — lệch 1px này cố ý, để thanh dừng flush chứ không hở khe. z-index 40 < header 100. */ .hf-pd .hf-stepper { position: sticky; top: 135px; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 30px; } .hf-pd .hf-stepper-in { max-width: 920px; margin: 0 auto; padding: 0 var(--gut); height: 66px; display: flex; align-items: center; gap: 18px; } .hf-pd .hf-stepper-nav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--blue); border: 1px solid var(--line); border-radius: 9px; background: #fff; flex-shrink: 0; transition: background .14s var(--ease), transform .14s var(--ease), border-color .14s; } .hf-pd .hf-stepper-nav:hover:not(:disabled) { background: var(--blue-50); transform: translateY(-1px); } .hf-pd .hf-stepper-nav:disabled { opacity: .32; cursor: not-allowed; } .hf-pd .hf-stepper-center { flex: 1; min-width: 0; } .hf-pd .hf-stepper-label { font-size: 13px; color: var(--ink-soft); font-weight: 700; text-align: center; margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hf-pd .hf-stepper-label b { color: var(--ink); font-size: 15px; } .hf-pd .hf-stepper-track { display: flex; gap: 5px; } .hf-pd .hf-stepper-tick { flex: 1; height: 6px; border-radius: 3px; background: var(--line); cursor: pointer; transition: background .2s, transform .15s; } .hf-pd .hf-stepper-tick:hover { transform: scaleY(1.6); } .hf-pd .hf-stepper-tick.cur { background: var(--blue); } /* generic block */ .hf-pd .hf-blk-inner { padding: 70px 0; } .hf-pd .hf-blk-inner.soft { background: var(--bg-soft); } .hf-pd .hf-blk-inner.blue { background: linear-gradient(150deg, var(--blue) 0%, var(--blue-700) 100%); color: #fff; } .hf-pd .hf-blk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .hf-pd .hf-blk-num { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line); padding: 4px 11px; border-radius: 999px; } .hf-pd .hf-blk-inner.blue .hf-blk-num { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; } .hf-pd .hf-blk-title { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 26px; max-width: 920px; } .hf-pd .hf-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; max-width: 760px; } .hf-pd .hf-lead.light { color: #d4e0f5; } .hf-pd .hf-body { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 14px; max-width: 760px; } /* block 2 overview */ .hf-pd .hf-ov { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; } .hf-pd .hf-ov-listlead { font-size: 16px; font-weight: 800; color: var(--ink); margin: 6px 0 10px; } .hf-pd .hf-fitlist { display: grid; gap: 10px; margin-top: 6px; } .hf-pd .hf-fitlist li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; color: var(--ink); } .hf-pd .hf-fit-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #d8f0e0; color: #1f8a5b; flex-shrink: 0; margin-top: 1px; } .hf-pd .hf-ov-side { position: relative; display: flex; flex-direction: column; gap: 16px; } /* border-radius: var(--radius) (4px) khớp design .hf-ov-poster. Bản cũ hardcode 18px (không dùng var nên fix --radius không chạm) — ảnh poster của cả 23 ngành bo tròn sai. */ .hf-pd .hf-ov-poster { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius); box-shadow: var(--shadow-md); border: 1px solid var(--line); position: sticky; top: 150px; } .hf-pd .hf-quote { margin: 0; background: var(--blue-50); border-left: 4px solid var(--orange); border-radius: 0 14px 14px 0; padding: 18px 20px; color: var(--blue-700); } .hf-pd .hf-quote svg { color: var(--orange); opacity: .8; } .hf-pd .hf-quote p { font-size: 16px; font-weight: 700; font-style: italic; margin-top: 8px; line-height: 1.45; } /* block 3 roadmap */ .hf-pd .hf-roadwrap { display: flex; flex-direction: column; align-items: center; gap: 22px; } .hf-pd .hf-road-note { margin-bottom: 0; text-align: center; max-width: 720px; } .hf-pd .hf-road-figure { margin: 0; width: 100%; max-width: 680px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; } .hf-pd .hf-road-figure img { width: 100%; height: auto; display: block; } /* block 4 why */ .hf-pd .hf-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .hf-pd .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-pd .hf-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .hf-pd .hf-why-no { font-size: 28px; font-weight: 900; color: var(--blue-100); letter-spacing: -.03em; } .hf-pd .hf-why-card h3 { font-size: 18px; margin: 6px 0 10px; } .hf-pd .hf-why-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .hf-pd .hf-minilist { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .hf-pd .hf-minilist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.8px; font-weight: 600; color: var(--ink); } .hf-pd .hf-minilist li svg { color: #1f8a5b; flex-shrink: 0; margin-top: 3px; } /* block 5 experience */ .hf-pd .hf-exp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .hf-pd .hf-exp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .hf-pd .hf-exp-list li { display: flex; align-items: center; gap: 13px; background: var(--bg-soft); border-radius: 14px; padding: 15px 18px; font-size: 15.5px; font-weight: 700; } .hf-pd .hf-exp-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--orange); box-shadow: var(--shadow-sm); flex-shrink: 0; } .hf-pd .hf-exp-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hf-pd .hf-exp-media > div:first-child { transform: translateY(14px); } /* block 6 scholarship */ .hf-pd .hf-fund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; } .hf-pd .hf-fund-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 26px 24px; } .hf-pd .hf-fund-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.16); color: #ffd9bf; margin-bottom: 16px; } .hf-pd .hf-fund-val { font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: #fff; letter-spacing: -.02em; } .hf-pd .hf-fund-card strong { display: block; font-size: 16.5px; color: #fff; margin: 6px 0 8px; } .hf-pd .hf-fund-card p { font-size: 14px; color: #c9d8f1; line-height: 1.5; } /* block 7 outcomes */ .hf-pd .hf-out-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .hf-pd .hf-out-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .hf-pd .hf-out-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--blue-50); color: var(--blue); margin-bottom: 14px; } .hf-pd .hf-out-card h3 { font-size: 17.5px; margin-bottom: 9px; } .hf-pd .hf-out-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } /* block 8 careers */ .hf-pd .hf-career-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .hf-pd .hf-career-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); } .hf-pd .hf-career-card h3 { display: flex; align-items: center; gap: 11px; font-size: 17px; margin-bottom: 14px; color: var(--blue); } .hf-pd .hf-career-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--orange-50); color: var(--orange); flex-shrink: 0; } .hf-pd .hf-career-card ul { display: flex; flex-direction: column; gap: 9px; } .hf-pd .hf-career-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .hf-pd .hf-career-card li svg { color: var(--orange); flex-shrink: 0; margin-top: 3px; } .hf-pd .hf-career-flat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .hf-pd .hf-career-flat li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .hf-pd .hf-career-flat li svg { color: #1f8a5b; flex-shrink: 0; margin-top: 2px; } /* block 9 admission */ .hf-pd .hf-adm { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .hf-pd .hf-adm h3 { font-size: 19px; margin-bottom: 16px; } .hf-pd .hf-adm-list { display: flex; flex-direction: column; gap: 10px; } .hf-pd .hf-adm-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 15px 18px; font-weight: 700; font-size: 15px; } .hf-pd .hf-adm-item span { font-size: 16px; font-weight: 900; color: var(--orange); } .hf-pd .hf-tuition-rows { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .hf-pd .hf-tuition-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 16px 20px; } .hf-pd .hf-tuition-row strong { font-size: 15.5px; display: block; } .hf-pd .hf-tuition-row span { font-size: 13px; color: var(--muted); } .hf-pd .hf-tuition-val { font-size: 22px; font-weight: 900; color: var(--blue); white-space: nowrap; } .hf-pd .hf-tuition-val em { font-size: 13px; font-weight: 700; color: var(--muted); font-style: normal; } .hf-pd .hf-tuition-note { font-size: 14px; color: var(--ink-soft); line-height: 1.6; } /* cta strip */ .hf-pd .hf-pd-ctastrip-wrap { padding: 0 0 10px; } .hf-pd .hf-pd-ctastrip { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; background: linear-gradient(110deg, var(--orange) 0%, #f08440 100%); color: #fff; border-radius: var(--radius); padding: 22px 28px; } .hf-pd .hf-pd-ctastrip span { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; } .hf-pd .hf-pd-ctastrip .hf-btn-orange { background: #fff; color: var(--orange); } /* related */ .hf-pd .hf-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .hf-pd .hf-related-card { text-align: left; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s; display: block; } .hf-pd .hf-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .hf-pd .hf-related-card .hf-related-img, .hf-pd .hf-related-card .hf-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } .hf-pd .hf-related-body { padding: 16px 18px; } .hf-pd .hf-related-body h4 { font-size: 16px; margin-bottom: 8px; line-height: 1.3; } .hf-pd .hf-related-body span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--orange); } /* image placeholder (thay Placeholder React của mock) */ .hf-pd .hf-ph { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 16px; color: #17479D; font-weight: 800; font-size: 13px; text-align: center; padding: 16px; background: repeating-linear-gradient(45deg, #dbe5f5 0 14px, #cdd9ee 14px 28px); } .hf-pd .hf-ph-orange { color: #c4561a; background: repeating-linear-gradient(45deg, #fde2cf 0 14px, #f8d3b8 14px 28px); } .hf-pd .hf-ph-blue { color: #17479D; background: repeating-linear-gradient(45deg, #dbe5f5 0 14px, #cdd9ee 14px 28px); } /* Placeholder ô poster: đồng bộ 4px với ảnh thật .hf-ov-poster (bản cũ 18px). */ .hf-pd .hf-ov-side .hf-ph { aspect-ratio: 1 / 1; border-radius: var(--radius); } /* responsive (theo design: 1080/960/720/640) */ /* 768→1440: header chính cao 135 không co → pdnav ghim ở top:135 (base). facts cuộn chui dưới header. */ @media (max-width: 960px) { .hf-pd .hf-ov, .hf-pd .hf-exp, .hf-pd .hf-adm { grid-template-columns: 1fr; gap: 28px; } .hf-pd .hf-why-grid, .hf-pd .hf-out-grid, .hf-pd .hf-career-grid, .hf-pd .hf-fund-grid { grid-template-columns: repeat(2, 1fr); } .hf-pd .hf-related-grid { grid-template-columns: repeat(2, 1fr); } .hf-pd .hf-ov-poster { position: static; } } @media (max-width: 720px) { .hf-pd .hf-pd-facts { grid-template-columns: 1fr; } .hf-pd .hf-pd-fact + .hf-pd-fact { border-left: none; padding-left: 0; } /* facts xếp 1 cột, vẫn cuộn bình thường (chui dưới header). pdnav top theo header mobile bên dưới. */ } @media (max-width: 640px) { .hf-pd .hf-why-grid, .hf-pd .hf-out-grid, .hf-pd .hf-career-grid, .hf-pd .hf-fund-grid, .hf-pd .hf-career-flat, .hf-pd .hf-related-grid, .hf-pd .hf-exp-media { grid-template-columns: 1fr; } .hf-pd .hf-blk-inner { padding: 48px 0; } } /* Stepper ghim flush dưới header mobile: header co còn 123px (≤767) rồi 111px (≤599). Khớp top theo chiều cao header THẬT của impl để stepper KHÔNG lọt dưới header — design ghi `@media (max-width: 640px) { top: 64px }` nhưng đó là chiều cao header của trang tĩnh, bê nguyên sang đây sẽ làm thanh nằm đè giữa header. Phần `gap: 12px` thì port đúng. */ @media (max-width: 767px) { .hf-pd .hf-stepper { top: 123px; } } @media (max-width: 640px) { .hf-pd .hf-stepper-in { gap: 12px; } } @media (max-width: 599px) { .hf-pd .hf-stepper { top: 111px; } } /* ═══════════════════════════════════════════════════════════════════════════ * DESIGN 260715 — khối mới (iteration adjust 2026-07-19) * khối 3 Chương trình đào tạo : .hf-ct-* · .hf-roadmap2-* * khối 5 Đề cương học phần : .hf-syllabus-card * Cẩm nang sinh viên : .hf-handbook-* * Tổ hợp xét tuyển : .hf-combo* * PORT NGUYÊN VĂN từ _design-reference/HUFLIT-standalone-260715/assets/css/site.css * (không tự chế — xem bài học postgraduate-page). Chỉ lấy rule của class impl CHƯA CÓ; * class dùng chung (hf-eyebrow · hf-blk-title · hf-adm-* · hf-tuition-*) giữ nguyên bản impl. * * ⚠️ KHÔNG viết ".hf-xxx-*" ngay trước dấu "/" trong comment CSS: chuỗi "*" + "/" ĐÓNG * comment sớm, phần còn lại thành rác và mọi rule phía sau bị bỏ qua. Đã dính lỗi này: * grid .hf-roadmap2-tabs không áp dụng, 4 tab xếp bậc thang. Dùng "·" ngăn cách thay "/". * ═══════════════════════════════════════════════════════════════════════════ */ /* block 3 — Lộ trình đào tạo tương tác (tham khảo FPT, điều chỉnh phong cách HUFLIT) */ .hf-roadmap2-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .hf-roadmap2-tab { /* border:0 — design standalone có reset toàn cục `button { border:none }` (site.css); theme WP KHÔNG có nên