/* ==========================================================================
   HUBT 30 — main.css · "Trống đồng số"
   Nhận diện: xanh HUBT (logo) · vàng HUBT · đỏ logo 30 năm · ánh đồng Đông Sơn · xanh gỉ đồng.
   Mục lục: 1 Token · 2 Nền tảng · 3 Kiểu chữ · 4 Nút · 5 Header · 6 Con trỏ & màn chờ
   7 Tìm kiếm · 8 Thành phần trang trong (giữ lại) · 9 Trang chủ · 10 Trang trong · 11 Footer · 12 Motion · 13 In
   ========================================================================== */

/* 1. Token ----------------------------------------------------------------- */
:root {
	/* Màu nhận diện — lấy từ logo HUBT và logo 30 năm */
	--hubt-green: #166733;
	--hubt-green-2: #11670c;
	--hubt-yellow: #f9f510;
	--hubt-red: #e11d2a;

	/* Thang xanh gỉ đồng cho các vùng tối, sâu */
	--g-950: #03140b;
	--g-900: #062a17;
	--g-850: #08331c;
	--g-800: #0b3d21;
	--g-700: #12502c;
	--g-600: #1a6a3a;
	--patina: #7fb8a0;
	--patina-2: #b8d8c6;
	--bronze: #b8913f;
	--bronze-2: #e6c98a;
	--bronze-3: #f4e4bd;

	--cream: #fbf8f1;
	--paper: #f4efe3;
	--paper-2: #ece4d2;
	--sage: #e8f1e9;
	--sage-2: #d6e7da;
	--bronze-ink: #8a6420;
	--white: #fff;
	--ink: #0f2a1a;
	--ink-2: #2f4236;
	--muted: #5f6d63;
	--line: #e2dccd;
	--line-2: #cfc7b4;

	/* Bí danh cho các thành phần cũ (giữ tương thích) */
	--navy: var(--hubt-green);
	--navy-950: var(--g-950);
	--navy-900: var(--g-900);
	--navy-800: var(--g-800);
	--navy-600: var(--g-600);
	--navy-100: #d9eadf;
	--navy-50: #edf5ef;
	--red: var(--hubt-red);
	--red-700: #b3141f;
	--red-50: #fdecec;
	--gold: var(--bronze);
	--gold-300: var(--bronze-2);
	--gold-50: #faf3e2;

	--g-kinh-te: var(--hubt-green);
	--g-cong-nghe: #0f6f74;
	--g-thiet-ke: #8a5a1f;
	--g-suc-khoe: var(--hubt-red);
	--g-ngon-ngu: #6c4fa0;

	--font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
	--font-accent: "Fraunces", Georgia, serif;
	--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: var(--font-display);

	--fs-xs: .78rem;
	--fs-sm: .875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
	--fs-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
	--fs-2xl: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
	--fs-3xl: clamp(2.8rem, 1.2rem + 6.4vw, 7.5rem);

	--radius-sm: 10px;
	--radius: 18px;
	--radius-lg: 28px;
	--shadow-sm: 0 1px 2px rgba(3, 20, 11, .06), 0 4px 14px rgba(3, 20, 11, .05);
	--shadow: 0 18px 40px -18px rgba(3, 20, 11, .35);
	--shadow-lg: 0 40px 80px -30px rgba(3, 20, 11, .55);

	--container: 1320px;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(80px, 11vw, 160px);
	--mast-h: 64px;
	--header-space: 88px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.76, 0, .24, 1);

	--drum: url("../img/trong-dong-1000.webp");
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Nền tảng --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-space); }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, iframe, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; text-wrap: balance; font-family: var(--font-display); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--hubt-yellow); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--hubt-yellow); color: var(--g-950); }
.site-main { display: block; outline: none; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 10001; background: var(--hubt-yellow); color: var(--g-950); padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.skip-link:focus { top: 16px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--xs { width: 1em; height: 1em; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--paper { background: var(--paper); }
.is-dark { background: var(--g-950); color: #fff; }

/* Họa tiết trống đồng thật (nét vector của nhà trường) — tô màu bằng currentColor qua mask */
.drum-art {
	display: block; aspect-ratio: 1; background: currentColor;
	-webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat;
}
[class*="__drum"] > .drum-art { width: 100%; }
.page-hero::after, .site-footer::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: var(--grain); opacity: .07; mix-blend-mode: multiply;
}

/* Ảnh thay thế khi bài chưa có ảnh */
.hubt-placeholder {
	position: relative; width: 100%; height: 100%; min-height: 160px; aspect-ratio: 16 / 9;
	display: grid; place-items: center; overflow: hidden;
	background: radial-gradient(circle at 30% 20%, var(--sage), var(--sage-2));
	color: var(--bronze);
}
.hubt-placeholder--1 { background: radial-gradient(circle at 70% 30%, #e3f0ee, #cfe3df); }
.hubt-placeholder--2 { background: radial-gradient(circle at 40% 70%, #f6ecd6, #eadcbc); }
.hubt-placeholder--3 { background: radial-gradient(circle at 60% 40%, #fbe7e4, #f1d2cd); }
.hubt-placeholder__drum { width: 78%; max-width: 320px; opacity: .45; }

/* 3. Kiểu chữ --------------------------------------------------------------- */
.display {
	font-family: var(--font-display); font-weight: 700; font-stretch: 82%;
	font-size: var(--fs-2xl); line-height: .98; letter-spacing: -.035em;
}

.display em {
	font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal;
	letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--bronze);
}
.eyebrow {
	display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
	font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hubt-green);
}
.eyebrow span {
	display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px;
	border: 1px solid currentColor; font-family: var(--font-display); letter-spacing: 0; font-size: 12px;
}
.eyebrow--gold { color: var(--bronze-ink); }
.section-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; letter-spacing: -.03em; color: var(--g-900); line-height: 1; }

.section-lead { margin-top: 16px; color: var(--muted); font-size: var(--fs-md); max-width: 60ch; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.section-head__text { max-width: 820px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-sm); color: var(--hubt-green); padding: 10px 0; border-bottom: 1.5px solid currentColor; }
.link-arrow .icon { transition: transform .4s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(6px); }
.link-arrow--light { color: var(--hubt-green); }

/* 4. Nút & chip ------------------------------------------------------------- */
.btn {
	--bg: var(--hubt-green); --fg: #fff; --bd: var(--bg);
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 48px; padding: 12px 24px; border-radius: 999px; overflow: hidden; isolation: isolate;
	background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
	font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap;
	transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::before { /* lớp phủ trượt lên khi hover */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: var(--fill, var(--g-950)); transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: none; }
.btn:hover { color: var(--fill-fg, #fff); border-color: var(--fill, var(--g-950)); }
.btn .icon { transition: transform .4s var(--ease-out); }
.btn:hover .icon { transform: translate(3px, -1px); }
.btn--primary { --fill: var(--g-950); }
.btn--accent { --bg: var(--hubt-red); --fill: var(--g-950); }
.btn--yellow { --bg: var(--hubt-yellow); --fg: var(--g-900); --fill: var(--hubt-green); --fill-fg: #fff; }
.btn--bronze, .btn--gold { --bg: var(--bronze); --fg: var(--g-950); --fill: var(--bronze-3); --fill-fg: var(--g-950); }
.btn--ghost { --bg: transparent; --fg: var(--g-900); --bd: var(--line-2); --fill: var(--g-900); }
.btn--line { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .35); --fill: #fff; --fill-fg: var(--g-950); }
.btn--sm { min-height: 40px; padding: 8px 18px; }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--center { justify-content: center; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
	border: 1.5px solid var(--line-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: #fff;
	transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--hubt-green); color: var(--hubt-green); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.chip__count { font-size: var(--fs-xs); opacity: .65; font-weight: 500; }
.chip--dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.chip--dark:hover { background: #fff; color: var(--g-950); border-color: #fff; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; background: var(--navy-50); color: var(--hubt-green); }
.tag--accent { background: var(--red-50); color: var(--hubt-red); }
.tag--glass { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(8px); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; color: inherit; transition: background-color .25s var(--ease); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); }

/* 5. Header — viên nổi sáng, ẩn khi cuộn xuống, hiện khi cuộn lên ------------ */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--hubt-green), var(--bronze), var(--hubt-red)); transform-origin: 0 50%; transform: scaleX(0); }

.site-header { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; pointer-events: none; transition: translate .6s var(--ease-out); }
.site-header.is-hidden:not(.is-open):not(:focus-within) { translate: 0 -140%; }
.masthead {
	pointer-events: auto; position: relative; width: calc(100% - 24px); max-width: 1560px; height: var(--mast-h); margin-inline: auto;
	display: flex; align-items: center; gap: 14px; padding: 0 10px 0 12px; border-radius: 999px;
	background: rgba(255, 253, 248, .78); color: var(--ink); border: 1px solid rgba(15, 42, 26, .08);
	backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
	box-shadow: 0 18px 40px -26px rgba(15, 42, 26, .35);
	transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.is-scrolled .masthead { background: rgba(255, 253, 248, .94); box-shadow: 0 18px 40px -22px rgba(15, 42, 26, .4); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.brand__logo { height: 42px; width: auto; flex: none; }
.brand__img { height: 42px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__top { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hubt-green); font-weight: 700; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
/* Huân chương (cắt từ băng logo cũ, ảnh gốc nhỏ — giữ cao ~30px cho nét) */
.medals { flex: none; display: grid; justify-items: center; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.medals__img { height: 30px; width: auto; }
.medals__since { font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--bronze-ink); white-space: nowrap; } /* rộng ≈ 3 huân chương */
@media (min-width: 1280px) and (max-width: 1359px) { .medals { display: none; } } /* menu đầy đủ chiếm hết chỗ, tên trường sẽ bị ép */
.seal30 { flex: none; height: 40px; width: auto; }
@media (max-width: 1499px) { .seal30 { display: none; } }
@media (max-width: 480px) { .brand__name { font-size: 13.5px; white-space: normal; } .brand__top { font-size: 9px; } .brand__logo { height: 34px; } }
.brand__name .nw { white-space: nowrap; }
/* Điện thoại hẹp (≤400px): huân chương gọn lại một chút */
@media (max-width: 400px) {
	.medals { padding-left: 10px; }
	.medals__img { height: 26px; }
	.medals__since { font-size: 6px; letter-spacing: .1em; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item--d0 > .nav__link, .nav__toggle {
	position: relative; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 13px; border-radius: 999px;
	font-weight: 600; font-size: 14px; white-space: nowrap; color: inherit; transition: background-color .25s var(--ease), color .25s;
}
.nav__item--d0 > .nav__link:hover, .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: var(--sage); color: var(--hubt-green); }
.nav__item.is-current > .nav__link, .nav__item.is-current > .nav__toggle { color: var(--hubt-green); box-shadow: inset 0 -2px 0 var(--hubt-yellow); }
.nav__toggle .nav__chev { width: 15px; height: 15px; transition: transform .4s var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__ext { width: 13px; height: 13px; opacity: .6; }
.nav__mobile-extra { display: none; }
@media (max-width: 1439px) { .nav__item--d0 > .nav__link, .nav__toggle { padding: 0 9px; font-size: 13.5px; } }

.nav__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 10px); border-radius: var(--radius-lg); overflow: hidden;
	background: #fffdf8; color: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
	transform-origin: 50% 0; animation: panel-in .45s var(--ease-out);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.nav__panel[hidden] { display: none; }
.nav__panel-inner { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 40px; padding: 28px 32px 32px; max-width: none; }
.nav__panel-intro { position: relative; overflow: hidden; border-radius: var(--radius); padding: 28px; background: var(--sage); color: var(--ink); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.nav__panel-intro::before { content: ""; position: absolute; width: 360px; right: -130px; top: -130px; aspect-ratio: 1; background: var(--hubt-green); opacity: .16; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; }
.nav__panel-intro > * { position: relative; }
.nav__panel-intro .eyebrow { margin-bottom: 8px; }
.nav__panel-title { font-family: var(--font-display); font-stretch: 85%; font-size: 34px; letter-spacing: -.03em; margin-bottom: 8px; color: var(--g-900); }
.nav__panel-intro p { color: var(--muted); font-size: var(--fs-sm); }
.nav__panel-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--hubt-green); font-size: var(--fs-sm); }
.nav__sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 20px; align-content: start; }
.nav__sub .nav__link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; color: var(--ink); transition: background-color .25s, color .25s, transform .35s var(--ease-out); }
.nav__sub .nav__link small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.nav__sub .nav__link:hover { background: var(--sage); color: var(--hubt-green); transform: translateX(4px); }
.nav__sub .nav__link[aria-current] { color: var(--hubt-red); }
.nav__sub--1 { grid-template-columns: 1fr; margin-left: 14px; border-left: 1px solid var(--line); }
.nav-scrim { position: fixed; inset: 0; background: rgba(15, 42, 26, .18); backdrop-filter: blur(3px); z-index: -1; }

.masthead__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.masthead__actions .lang { margin-right: 4px; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sage); list-style: none; }
.lang a { display: block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; color: var(--ink-2); }
.lang a.is-active { background: var(--hubt-green); color: #fff; }
.icon-btn:hover { background: var(--sage); }
.search-trigger kbd { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
@media (max-width: 1599px) { .search-trigger kbd { display: none; } }
.burger { display: none; }
.burger__lines { display: grid; gap: 5px; width: 22px; }
.burger__lines i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-out), opacity .2s; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1279px) {
	.hide-md { display: none !important; }
	.burger { display: inline-flex; }
	.masthead__actions { margin-left: auto; }
	.is-open .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-color: transparent; box-shadow: none; }
	.nav {
		position: fixed; inset: -12px 0 0; z-index: -1; margin: 0; padding: 104px var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain;
		background: var(--cream); color: var(--ink);
		clip-path: circle(0% at calc(100% - 40px) 44px); visibility: hidden;
		transition: clip-path .7s var(--ease-io), visibility 0s linear .7s;
	}
	.nav::before { content: ""; position: absolute; width: 560px; right: -220px; bottom: -180px; aspect-ratio: 1; background: var(--bronze); opacity: .16; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; pointer-events: none; }
	.is-open .nav { clip-path: circle(150% at calc(100% - 40px) 44px); visibility: visible; transition: clip-path .8s var(--ease-io); }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
	.nav__item--d0 { border-bottom: 1px solid var(--line); }
	.nav__item--d0 > .nav__link, .nav__toggle { width: 100%; justify-content: space-between; height: auto; padding: 16px 2px; font-family: var(--font-display); font-stretch: 85%; font-size: clamp(26px, 7vw, 38px); font-weight: 700; letter-spacing: -.02em; border-radius: 0; color: var(--g-900); }
	.nav__item--d0 > .nav__link:hover, .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: none; color: var(--hubt-green); }
	.nav__item.is-current > .nav__link, .nav__item.is-current > .nav__toggle { box-shadow: none; }
	.nav__toggle .nav__chev { width: 24px; height: 24px; }
	.nav__panel { position: static; box-shadow: none; border: 0; background: none; animation: none; border-radius: 0; }
	.nav__panel-inner { display: block; padding: 0 0 16px; }
	.nav__panel-intro { display: none; }
	.nav__sub { grid-template-columns: 1fr; }
	.nav__sub .nav__link { color: var(--ink-2); padding: 9px 4px; font-size: 16px; }
	.nav__sub .nav__link:hover { background: none; color: var(--hubt-green); }
	.nav__mobile-extra { display: grid; gap: 20px; margin-top: 32px; position: relative; }
	.nav__mobile-extra .topnav ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; font-size: 14px; color: var(--muted); }
	.nav__mobile-extra .btn--line { --fg: var(--g-900); --bd: var(--line-2); --fill: var(--g-900); --fill-fg: #fff; }
	.nav__mobile-extra .socials a { color: var(--hubt-green); border-color: var(--line-2); }
	.nav-scrim { display: none; }
}
@media (max-width: 720px) { .hide-sm { display: none !important; } .masthead { gap: 8px; padding-right: 6px; } .masthead__actions .lang { display: none; } }
/* Điện thoại: thanh đầu trang chật — nút tìm kiếm chuyển vào menu 3 gạch */
.nav__search { display: none !important; }
@media (max-width: 480px) { .masthead__actions .search-trigger { display: none; } .nav__search { display: inline-flex !important; } }

/* 6. Con trỏ & màn chờ ------------------------------------------------------ */
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
.cursor__dot { width: 6px; height: 6px; background: var(--hubt-green); }
.cursor__ring {
	width: 38px; height: 38px; border: 1.5px solid rgba(22, 103, 51, .55); display: grid; place-items: center;
	transition: width .45s var(--ease-out), height .45s var(--ease-out), background-color .35s, border-color .35s;
}
.cursor__label { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--g-900); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-out); }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; border-color: var(--hubt-green); background: rgba(22, 103, 51, .06); }
.cursor.is-label .cursor__ring { width: 88px; height: 88px; background: var(--hubt-yellow); border-color: var(--hubt-yellow); }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-label .cursor__dot, .cursor.is-hidden { opacity: 0; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }

.preloader { position: fixed; inset: 0; z-index: 10000; display: none; place-items: center; background: var(--cream); color: var(--ink); overflow: hidden; }
html.preload .preloader { display: grid; }
html.preload body { overflow: hidden; }
.preloader__drum { position: absolute; width: min(92vmin, 920px); color: var(--bronze); opacity: .3; animation: spin 40s linear infinite; }
.preloader__center { position: relative; text-align: center; }
.preloader__logo { width: 120px; margin: 0 auto 18px; }
.preloader__year { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: clamp(5rem, 22vw, 16rem); line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--hubt-green); }
.preloader__name { margin-top: 18px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
@keyframes spin { to { rotate: 360deg; } }

/* 7. Tìm kiếm --------------------------------------------------------------- */
.search-dialog {
	width: min(780px, calc(100% - 24px)); max-height: min(660px, calc(100% - 48px));
	margin: 10vh auto auto; padding: 0; border: 0; border-radius: var(--radius-lg);
	background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
.search-dialog::backdrop { background: rgba(3, 20, 11, .7); backdrop-filter: blur(8px); }
.search-dialog[open] { animation: dialog-in .45s var(--ease-out); display: flex; flex-direction: column; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.search-dialog__form { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.search-dialog__icon { width: 24px; height: 24px; color: var(--hubt-green); }
.search-dialog__form input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 20px; font-family: var(--font-display); padding: 10px 0; background: transparent; }
.search-dialog__form input::-webkit-search-cancel-button { display: none; }
.search-dialog__form .icon-btn:hover { background: var(--paper); }
.search-dialog__body { overflow-y: auto; padding: 16px 22px 22px; }
.search-dialog__results:empty { display: none; }
.search-dialog__results:not(:empty) + .search-dialog__hints { display: none; }
.s-result { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px; border-radius: 14px; }
.s-result:hover, .s-result:focus-visible { background: #fff; }
.s-result .tag { grid-row: span 2; align-self: start; margin-top: 2px; }
.s-result strong { color: var(--g-900); font-family: var(--font-display); font-size: 17px; }
.s-result small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.s-result mark { background: var(--hubt-yellow); color: inherit; padding: 0 2px; border-radius: 3px; }
.s-status { color: var(--muted); padding: 12px; }
.s-all { display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0; font-weight: 700; color: var(--hubt-green); }

/* 8. Thành phần trang trong (giữ lại, dùng token mới) ------------------------ */
img { height: auto;
}
a { color: inherit; text-decoration: none;
}
button { cursor: pointer; background: none; border: 0; padding: 0;
}
p { margin: 0;
}
@media (max-width: 1279px) {
	.hide-md {display: none !important; }
}
@media (max-width: 720px) {
	.hide-sm {display: none !important; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.major-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.major { --gc: var(--navy);
}
.major[data-group-color="cong-nghe-ky-thuat"] { --gc: var(--g-cong-nghe);
}
.major[data-group-color="thiet-ke-kien-truc"] { --gc: var(--g-thiet-ke);
}
.major[data-group-color="suc-khoe"] { --gc: var(--g-suc-khoe);
}
.major[data-group-color="ngon-ngu"] { --gc: var(--g-ngon-ngu);
}
.major.is-hidden { display: none;
}
.major__link {
	position: relative; display: flex; flex-direction: column; height: 100%; min-height: 188px; padding: 22px;
	border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden;
	transition: box-shadow .4s var(--ease-out), border-color .3s, transform .4s var(--ease-out);
	transform-style: preserve-3d;
}
.major__link::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--gc) 10%, transparent), transparent 55%);
	opacity: 0; transition: opacity .4s;
}
.major__link:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gc) 35%, var(--line));
}
.major__link:hover::before { opacity: 1;
}
.major__link > * { position: relative; z-index: 1;
}
.major__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.major__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc) 9%, #fff); color: var(--gc); transition: background-color .3s, color .3s;
}
.major__link:hover .major__icon { background: var(--gc); color: #fff;
}
.major__code { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px;
}
.major__name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--navy-900); line-height: 1.25;
}
.major__meta { margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--muted);
}
@media (max-width: 560px) {
	.major-grid {grid-template-columns: 1fr 1fr; gap: 10px; }
	.major__link {min-height: 0; padding: 16px; }
	.major__name {font-size: 16.5px; }
	.major__top {margin-bottom: 12px; }
	.major__icon {width: 38px; height: 38px; }
	.major__code {font-size: 10.5px; padding: 2px 5px; }
	.major__go {display: none; }
}
.major__go { position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gc); color: #fff; transform: scale(.6); opacity: 0; transition: all .35s var(--ease-out);
}
.major__link:hover .major__go { transform: none; opacity: 1;
}
.post-card { position: relative; display: flex; flex-direction: column; height: 100%;
}
.post-card__media { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-50);
}
.post-card__media img, .post-card__media .hubt-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out);
}
.post-card:hover .post-card__media img, .post-card:hover .post-card__media .hubt-placeholder { transform: scale(1.05);
}
.post-card__body { padding-top: 16px;
}
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px;
}
.post-card__title { font-size: 18px; line-height: 1.35; color: var(--navy-900); font-weight: 700;
}
.post-card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease-out);
}
.post-card:hover .post-card__title a { background-size: 100% 1.5px;
}
.post-card__title a::after { content: ""; position: absolute; inset: 0;
}
.post-card__excerpt { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm);
}
.post-card--feature .post-card__media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
}
.post-card--feature .post-card__title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2;
}
.post-card--row { flex-direction: row; gap: 16px; align-items: flex-start;
}
.post-card--row .post-card__media { flex: none; width: 144px; aspect-ratio: 16 / 9; border-radius: 12px;
}
.post-card--row .post-card__body { padding-top: 0;
}
.post-card--row .post-card__title { font-size: 16px;
}
.notice { position: relative; display: flex; gap: 16px; padding: 16px 0;
}
.notice__date { flex: none; align-self: flex-start; width: 62px; text-align: center; border-radius: 12px; padding: 8px 0; background: var(--paper); border: 1px solid var(--line); line-height: 1.1;
}
.notice__d { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--navy);
}
.notice__m { font-size: 11px; color: var(--muted); font-weight: 600;
}
.notice--pinned .notice__date { background: var(--red); border-color: var(--red);
}
.notice--pinned .notice__d, .notice--pinned .notice__m { color: #fff;
}
.notice__body { min-width: 0;
}
.notice__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.notice__meta:empty { display: none;
}
.notice__title { font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--ink);
}
.notice__title a:hover { color: var(--red);
}
.notice__title a::after { content: ""; position: absolute; inset: 0;
}
.notice__excerpt { margin-top: 6px; color: var(--muted); font-size: var(--fs-sm);
}
.notice__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted);
}
.notice__foot > * { display: inline-flex; align-items: center; gap: 5px;
}
.notice__due.is-expired { color: var(--red);
}
.notice__file { color: var(--navy); font-weight: 600;
}
.notice--compact { padding: 14px 0;
}
.notice--compact .notice__date { width: 58px; padding: 6px 0;
}
.notice--compact .notice__m { font-size: 10px;
}
.notice--compact .notice__d { font-size: 18px;
}
.notice--compact .notice__title { font-size: 14.5px;
}
.notice-list > li { border-bottom: 1px solid var(--line);
}
.notice-list .notice { padding: 22px 0;
}
.timeline { position: relative;
}
.timeline--vertical { max-width: 980px; margin-inline: auto;
}
.timeline--vertical .timeline__rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--line);
}
.timeline--vertical .timeline__progress { transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, var(--gold), var(--red));
}
.timeline--vertical .timeline__track { display: grid; gap: 56px;
}
.timeline--vertical .milestone { position: relative; width: calc(50% - 48px);
}
.timeline--vertical .milestone:nth-child(odd) { justify-self: start; text-align: right;
}
.timeline--vertical .milestone:nth-child(even) { justify-self: end;
}
.timeline--vertical .milestone__dot { position: absolute; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--gold);
}
.timeline--vertical .milestone:nth-child(odd) .milestone__dot { right: -57px;
}
.timeline--vertical .milestone:nth-child(even) .milestone__dot { left: -57px;
}
.timeline--vertical .milestone--key .milestone__dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px var(--red-50);
}
.timeline--vertical .milestone__year { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 10px;
}
.timeline--vertical .milestone__title { color: var(--navy-900); font-size: 21px;
}
.timeline--vertical .milestone__text { color: var(--ink-2);
}
.timeline--vertical .milestone__text p + p { margin-top: .8em;
}
@media (max-width: 760px) {
	.timeline--vertical .timeline__rail {left: 8px; }
	.timeline--vertical .milestone {width: auto; padding-left: 40px; text-align: left !important; }
	.timeline--vertical .milestone .milestone__dot {left: 0 !important; right: auto !important; }
}
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.event__link { position: relative; display: flex; gap: 18px; align-items: flex-start; height: 100%; padding: 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: all .35s var(--ease-out);
}
.event__link:hover { border-color: var(--navy); box-shadow: var(--shadow);
}
.event__date { flex: none; width: 64px; padding: 10px 0; border-radius: 12px; text-align: center; background: var(--navy); color: #fff; line-height: 1.1;
}
.event__day { display: block; font-family: var(--font-serif); font-size: 28px; font-weight: 700;
}
.event__month { font-size: 12px; color: var(--gold-300); font-weight: 600;
}
.event__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: 20px;
}
.event__title { font-weight: 700; color: var(--navy-900); line-height: 1.35;
}
.event__meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted);
}
.event__meta span { display: flex; align-items: flex-start; gap: 6px;
}
.event__meta .icon { margin-top: 3px;
}
.event__go { position: absolute; right: 18px; top: 22px; width: 18px; color: var(--muted); transition: transform .3s var(--ease-out), color .3s;
}
.event__link:hover .event__go { transform: translateX(4px); color: var(--red);
}
.event-list--page { margin-bottom: 48px;
}
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); padding-block: clamp(40px, 6vw, 80px); align-items: start;
}
.article-layout--nav { grid-template-columns: 260px minmax(0, 1fr);
}
.article-aside { display: grid; gap: 20px; position: sticky; top: calc(var(--mast-h) + 24px);
}
@media (max-width: 980px) {
	.article-layout, .article-layout--nav {grid-template-columns: 1fr; }
	.article-aside {position: static; }
}
.article__lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-2); font-weight: 500; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.article__figure { margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden;
}
.article__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
}
.share { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted);
}
.share a, .share button { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--navy); transition: all .25s;
}
.share a:hover, .share button:hover { background: var(--navy); color: #fff; border-color: var(--navy);
}
.share__done { position: absolute; bottom: 110%; left: 50%; translate: -50% 0; font-size: 11px; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.share__copy.is-done .share__done { opacity: 1;
}
/* Cột trong lưới được co hẹp hơn nội dung: menu mục con trên điện thoại cuộn ngang thay vì kéo giãn trang */
.article-layout > * { min-width: 0; }
.subnav { position: sticky; top: calc(var(--mast-h) + 24px);
}
.subnav__title { font-weight: 700; color: var(--navy-900); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid var(--navy);
}
.subnav ul { list-style: none;
}
.subnav li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--fs-sm); color: var(--ink-2); border-left: 2px solid transparent;
}
.subnav li a:hover { background: var(--paper); color: var(--navy);
}
.subnav a[aria-current] { color: var(--red); font-weight: 700; border-left-color: var(--red); background: var(--red-50); border-radius: 0 8px 8px 0;
}
@media (max-width: 980px) {
	.subnav {position: static; }
	.subnav ul {display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
	.subnav li a {white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
	.subnav a[aria-current] {border-radius: 999px; border-color: var(--red); }
}
.aside-box { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff;
}
.aside-box__title { font-size: 16px; color: var(--navy-900); margin-bottom: 12px;
}
.aside-box--navy { background: var(--navy-900); color: rgba(255, 255, 255, .8); border: 0; position: relative; overflow: hidden;
}
.aside-box--navy .aside-box__title { color: #fff; font-family: var(--font-serif); font-size: 21px; font-weight: 600;
}
.aside-box__phone { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--gold-300); margin: 8px 0 18px;
}
.aside-list li + li { border-top: 1px solid var(--line);
}
.aside-list a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.4;
}
.aside-list a:hover span { color: var(--red);
}
.aside-list time, .aside-list small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500;
}
.contact-list { display: grid; gap: 14px;
}
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm);
}
.contact-list .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--navy-50); color: var(--navy);
}
.contact-list span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere;
}
.contact-list small { color: var(--muted); font-size: var(--fs-xs);
}
.contact-list a { color: var(--navy); font-weight: 600;
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 36px; border-radius: var(--radius); overflow: hidden; background: var(--line); border: 1px solid var(--line);
}
.facts > div { background: #fff; padding: 16px 18px;
}
.facts dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.facts dd { margin: 0; font-weight: 700; color: var(--navy-900);
}
.facts a { display: inline-flex; align-items: center; gap: 6px; color: var(--red);
}
.facts--major dd { font-family: var(--font-serif); font-size: 19px;
}
.career { margin-top: 40px; padding: 28px; border-radius: var(--radius-lg); background: var(--gold-50); border: 1px solid #eedfb8;
}
.career h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--navy-900); margin-bottom: 12px;
}
.career h2 .icon { color: var(--gold);
}
.career p + p { margin-top: .8em;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 24px;
}
.card-grid__wide { grid-column: 1 / -1;
}
.card-grid__wide .post-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
}
.card-grid__wide .post-card__body { padding: 0;
}
@media (max-width: 800px) {
	.card-grid__wide .post-card {grid-template-columns: 1fr; gap: 0; }
	.card-grid__wide .post-card__body {padding-top: 16px; }
}
.child-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 48px;
}
.child-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.child-card:hover { box-shadow: var(--shadow); transform: translateY(-4px);
}
.child-card__media { aspect-ratio: 16 / 9; overflow: hidden;
}
.child-card__media img, .child-card__media .hubt-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0;
}
.child-card__title { padding: 18px 20px 4px; font-weight: 700; color: var(--navy-900); font-size: 17px;
}
.child-card__text { padding: 0 20px 22px; color: var(--muted); font-size: var(--fs-sm);
}
.child-card__go { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--navy);
}
.unit-group { margin-bottom: 56px; scroll-margin-top: calc(var(--mast-h) + 24px);
}
.unit-group__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--navy-900); font-weight: 600; margin-bottom: 20px;
}
.unit-group__title span { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--paper); border-radius: 999px; padding: 3px 10px;
}
.unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px;
}
.unit-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; height: 100%; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; transition: all .35s var(--ease-out);
}
.unit-card:hover { border-color: var(--navy); box-shadow: var(--shadow);
}
.unit-card__mark { grid-row: span 2; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: var(--gold-300); font-family: var(--font-serif); font-size: 22px; font-weight: 700;
}
.unit-card__name { font-weight: 700; color: var(--navy-900); padding-right: 22px; line-height: 1.35;
}
.unit-card__text { color: var(--muted); font-size: var(--fs-sm);
}
.unit-card__go { position: absolute; top: 20px; right: 18px; width: 18px; color: var(--muted); transition: transform .3s var(--ease-out), color .3s;
}
.unit-card:hover .unit-card__go { transform: translateX(4px); color: var(--red);
}
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 32px;
}
.finder .filters { margin: 0;
}
.finder__search { position: relative; flex: 1 1 320px; max-width: 460px; display: flex; align-items: center;
}
.finder__search .icon { position: absolute; left: 18px; color: var(--muted); pointer-events: none;
}
.finder__search input { width: 100%; height: 52px; padding: 0 20px 0 50px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
.finder__search input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-100);
}
.finder--form { flex-wrap: nowrap;
}
.finder--form .finder__search { max-width: none;
}
.finder__empty { padding: 32px; text-align: center; color: var(--muted);
}
.callout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 64px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--navy-900); color: rgba(255, 255, 255, .78); background-image: radial-gradient(circle at 100% 0, rgba(201, 162, 74, .25), transparent 45%);
}
.callout__title { font-family: var(--font-serif); color: #fff; font-size: var(--fs-xl); font-weight: 600; margin-bottom: 6px;
}
.callout__actions { display: flex; flex-wrap: wrap; gap: 12px;
}
.callout .btn--ghost { --fg: #fff; --bd: rgba(255, 255, 255, .35);
}
.result-list { display: grid; gap: 12px;
}
.result { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s;
}
.result .tag { justify-self: start;
}
.result:hover { border-color: var(--navy); box-shadow: var(--shadow-sm);
}
.result__title { font-weight: 700; font-size: 17px; color: var(--navy-900);
}
.result__text { color: var(--muted); font-size: var(--fs-sm);
}
.week-list { display: grid; gap: 10px;
}
.week { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; transition: all .3s var(--ease-out); flex-wrap: wrap;
}
.week:hover { border-color: var(--navy); box-shadow: var(--shadow-sm);
}
.week--current { border-color: var(--red); background: var(--red-50);
}
.week__icon { color: var(--navy);
}
.week__title { flex: 1; font-weight: 700; color: var(--navy-900);
}
.week__range { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.week__go { color: var(--muted);
}
.toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.adjacent { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px;
}
.adjacent a { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); max-width: 48%;
}
.adjacent a:hover { border-color: var(--navy);
}
.adjacent span { display: flex; flex-direction: column; font-weight: 600; font-size: var(--fs-sm);
}
.adjacent small { color: var(--muted); font-weight: 500;
}
.adjacent__next { margin-left: auto; text-align: right;
}
.pager { margin-top: 56px;
}
.pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
}
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid var(--line);
}
.pager a:hover { border-color: var(--navy); color: var(--navy);
}
.pager .current { background: var(--navy); border-color: var(--navy); color: #fff;
}
.pager .dots { border: 0;
}
.empty { position: relative; text-align: center; padding: 72px 16px; border-radius: var(--radius-lg); background: var(--paper); overflow: hidden;
}
.empty__drum { width: 120px; margin: 0 auto 20px; color: var(--gold); opacity: .6;
}
.empty__title { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--navy-900); margin-bottom: 8px;
}
.empty p { color: var(--muted);
}
.empty__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px;
}
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); max-width: 74ch;
}
.prose--wide { max-width: none;
}
.prose--lg { font-size: var(--fs-md);
}
.prose > * + * { margin-top: 1.1em;
}
.prose h2 { font-family: var(--font-serif); font-size: 1.7em; font-weight: 600; color: var(--navy-900); margin-top: 1.8em;
}
.prose h3 { font-size: 1.28em; color: var(--navy-900); margin-top: 1.6em;
}
.prose h4 { font-size: 1.08em; color: var(--navy-900); margin-top: 1.4em;
}
.prose a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover { color: var(--navy);
}
.prose ul, .prose ol { padding-left: 1.3em;
}
.prose li + li { margin-top: .4em;
}
.prose ul li::marker { color: var(--red);
}
.prose blockquote { margin-inline: 0; padding: 12px 0 12px 24px; border-left: 3px solid var(--gold); font-family: var(--font-serif); font-style: italic; font-size: 1.15em; color: var(--navy-900);
}
.prose img, .prose .wp-block-image img { border-radius: var(--radius);
}
.prose figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: 8px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15px;
}
.prose .wp-block-table, .schedule { overflow-x: auto;
}
.prose th, .prose td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
@media (max-width: 640px) { .prose table { font-size: 14px; } .prose th, .prose td { padding: 8px 10px; } }
.prose th { background: var(--navy); color: #fff; font-weight: 600;
}
.prose tbody tr:nth-child(even) { background: var(--paper);
}
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.4em;
}
.prose strong { color: var(--ink);
}
.schedule table { min-width: 760px;
}
.schedule td:first-child { font-weight: 700; color: var(--navy); white-space: nowrap;
}
.form { margin-top: 32px; padding: clamp(22px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--paper);
}
.form__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin-bottom: 20px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
@media (max-width: 600px) {
	.form__row {grid-template-columns: 1fr; }
}
.field { margin-bottom: 16px;
}
.field label, .comment-form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; color: var(--ink-2);
}
.field input, .field select, .field textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus, .comment-form input:focus, .comment-form textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-100);
}
.form__hp { position: absolute; left: -9999px;
}
.form__msg { padding: 14px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 600;
}
.form__msg--ok { background: #e7f6ec; color: #17603a;
}
.form__msg--err { background: var(--red-50); color: var(--red-700);
}
.form-note { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 14px;
}
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 48px;
}
.contact-card { padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff;
}
.contact-card .icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--navy-50); color: var(--navy); margin-bottom: 16px;
}
.contact-card h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px;
}
.contact-card p { font-weight: 600; color: var(--navy-900);
}
.contact-card--accent { background: var(--navy); border-color: var(--navy);
}
.contact-card--accent .icon { background: rgba(255, 255, 255, .1); color: var(--gold-300);
}
.contact-card--accent h2 { color: rgba(255, 255, 255, .6);
}
.contact-card--accent p, .contact-card--accent a { color: #fff; font-family: var(--font-serif); font-size: 22px;
}
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start;
}
.contact-layout .form { margin-top: 0;
}
.contact-layout .prose + .form { margin-top: 32px;
}
.map { border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; background: var(--paper); position: sticky; top: calc(var(--mast-h) + 24px);
}
.map iframe { width: 100%; height: 520px; border: 0;
}
.map__fallback { display: flex; align-items: center; justify-content: center; gap: 8px; height: 420px; font-weight: 700; color: var(--navy);
}
@media (max-width: 900px) {
	.contact-layout {grid-template-columns: 1fr; }
	.map {position: static; }
}
.guestbook__inner { max-width: 980px;
}
.wishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 40px;
}
.wish { padding: 24px; border-radius: var(--radius-lg); background: var(--gold-50); border: 1px solid #eedfb8;
}
.wish__text { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--navy-900);
}
.wish__by { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted);
}
.wish__pending { font-size: var(--fs-xs); color: var(--red); margin-top: 6px;
}
.comment-respond { padding: clamp(22px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--paper);
}
.comment-reply-title { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--navy-900); margin-bottom: 12px;
}
.comment-form p { margin-bottom: 14px;
}
.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm);
}
.comment-form-cookies-consent label { font-weight: 400; margin: 0;
}
.alignwide { max-width: none;
}
.aligncenter { margin-inline: auto;
}
.wp-caption-text, .wp-element-caption { font-size: var(--fs-sm); color: var(--muted);
}
.widget { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.widget__title { font-size: 16px; margin-bottom: 12px; color: var(--navy-900);
}
@media print {
	.prose th {background: #eee !important; color: #000 !important; }
	a[href^="http"]::after {content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Mặt trống đồng: căn trọn trong vùng giữa header và băng tin, xoay tròn liên tục */

@keyframes beacon { 70% { box-shadow: 0 0 0 10px rgba(225, 29, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 42, 0); } }

.hero__bottom { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; padding: 16px var(--gutter) 22px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
.ticker { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; }
.ticker__label { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--hubt-red); color: #fff; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.ticker__pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.ticker__viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker__track { display: flex; gap: 56px; width: max-content; }
.ticker__track a { display: inline-flex; gap: 12px; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.ticker__track a:hover { color: var(--hubt-green); }
.ticker__track time { color: var(--hubt-red); font-weight: 800; font-family: var(--font-display); }
.scroll-cue { flex: none; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scroll-cue__line { position: relative; width: 1.5px; height: 34px; overflow: hidden; background: var(--line-2); }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--hubt-green); animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { to { top: 110%; } }

@media (max-width: 720px) {
	
	
	.scroll-cue { display: none; }
	
}

/* 03 · Ngành học */
.fields { position: relative; padding-block: var(--section) calc(var(--section) * .8); background: var(--cream); }
.fields__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.fields__head .display { color: var(--g-900); }
.fields__cta { max-width: 380px; display: grid; gap: 16px; justify-items: start; color: var(--muted); }
.deck { display: flex; gap: 10px; height: min(78vh, 720px); }
.field { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; color: #fff; background: var(--g-700); transition: flex-grow .9s var(--ease-io); box-shadow: var(--shadow-sm); }
.field.is-active { flex-grow: 5.2; }
.field__media { position: absolute; inset: 0; }
.field__media img, .field__media .hubt-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; filter: grayscale(.6) contrast(1.02); transform: scale(1.12); transition: filter 1s var(--ease), transform 1.4s var(--ease-out); }
.field.is-active .field__media img { filter: none; transform: scale(1); }
.field__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 103, 51, .15), rgba(10, 45, 24, .78) 80%); }
.field.is-active .field__media::after { background: linear-gradient(90deg, rgba(9, 40, 22, .86) 0%, rgba(9, 40, 22, .55) 45%, rgba(9, 40, 22, .05) 100%); }
.field__tab { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px; text-align: left; color: #fff; transition: opacity .4s; }
.field.is-active .field__tab { opacity: 0; pointer-events: none; }
.field__index { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--hubt-yellow); }
.field__name { writing-mode: vertical-rl; rotate: 180deg; font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.01em; white-space: nowrap; }
.field__count { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.field__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3.5vw, 48px); max-width: 760px; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .7s var(--ease-out); pointer-events: none; }
.field.is-active .field__body { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.field__title { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5.2rem); line-height: .9; letter-spacing: -.04em; margin-bottom: 14px; }
.field__blurb { font-size: var(--fs-md); color: rgba(255, 255, 255, .88); max-width: 44ch; margin-bottom: 24px; }
.field__majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 20px; margin-bottom: 24px; }
.field__majors a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font-weight: 600; transition: color .25s, padding .4s var(--ease-out); }
.field__majors a:hover { color: var(--hubt-yellow); padding-left: 6px; }
.field__majors small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.field .link-arrow--light { color: var(--hubt-yellow); }
@media (max-width: 900px) {
	.deck { flex-direction: column; height: auto; }
	.field { flex: none; min-height: 84px; }
	.field.is-active { min-height: 0; }
	.field__tab { position: relative; flex-direction: row; align-items: center; gap: 12px; min-height: 84px; }
	.field__count { flex: none; }
	.field__name { writing-mode: horizontal-tb; rotate: none; flex: 1; margin-left: 14px; font-size: 22px; }
	.field.is-active .field__tab { display: none; }
	.field__body { display: none; }
	.field.is-active .field__body { display: flex; }
	.field.is-active .field__media::after { background: linear-gradient(180deg, rgba(9, 40, 22, .5), rgba(9, 40, 22, .9)); }
}

/* Trắc nghiệm */
.quiz { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 40px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: #fffdf8; color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.quiz::backdrop { background: rgba(15, 42, 26, .35); backdrop-filter: blur(10px); }
.quiz[open] { animation: dialog-in .5s var(--ease-out); }
.quiz__inner { position: relative; padding: clamp(24px, 4vw, 44px); overflow-y: auto; max-height: calc(100vh - 40px); }
.quiz__inner::before { content: ""; position: absolute; width: 520px; right: -220px; top: -220px; aspect-ratio: 1; background: var(--bronze); opacity: .18; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; pointer-events: none; }
.quiz__head { position: relative; display: flex; justify-content: space-between; align-items: center; }
.quiz__head .eyebrow { margin: 0; }
.quiz__progress { position: relative; height: 4px; margin: 18px 0 28px; border-radius: 4px; background: var(--sage); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; width: 0; background: var(--hubt-green); transition: width .6s var(--ease-out); }
.quiz__step { position: relative; border: 0; padding: 0; margin: 0; }
.quiz__q { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 85%; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 24px; color: var(--g-900); }
.quiz__q span { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--hubt-red); margin-bottom: 10px; }
.quiz__options { display: grid; gap: 10px; }
.quiz__opt { text-align: left; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: #fff; font-weight: 600; font-size: var(--fs-md); transition: background-color .25s, border-color .25s, transform .35s var(--ease-out); }
.quiz__opt:hover, .quiz__opt:focus-visible { background: var(--sage); border-color: var(--hubt-green); transform: translateX(6px); }
.quiz__result { position: relative; }
.quiz__lead { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }
.quiz__field { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); line-height: .92; letter-spacing: -.04em; margin: 10px 0 14px; color: var(--hubt-green); }
.quiz__blurb { color: var(--ink-2); margin-bottom: 18px; }
.quiz__majors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.quiz__majors a { display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: var(--fs-sm); font-weight: 600; }
.quiz__majors a:hover { background: var(--hubt-green); border-color: var(--hubt-green); color: #fff; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz__actions .btn--line { --fg: var(--g-900); --bd: var(--line-2); --fill: var(--g-900); --fill-fg: #fff; }
.quiz__note { margin-top: 18px; font-size: var(--fs-xs); color: var(--muted); }

/* 04 · Hành trình — nền giấy kem */

.reel { overflow: hidden; }
.reel__track { display: flex; gap: clamp(20px, 3vw, 44px); width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.frame { position: relative; flex: none; width: clamp(280px, 30vw, 440px); padding-top: clamp(40px, 7vh, 80px); }

.scrubber { position: relative; }
.scrubber__rail { height: 1px; background: var(--line-2); margin-bottom: 12px; }
.scrubber__rail span { display: block; height: 3px; margin-top: -1px; background: var(--hubt-green); transform-origin: 0 50%; transform: scaleX(0); }
.scrubber__years { display: flex; justify-content: space-between; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.scrubber__years button { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 2px; transition: color .3s; font-variant-numeric: tabular-nums; }
.scrubber__years button:hover, .scrubber__years button.is-active { color: var(--hubt-green); }
html:not(.motion) .reel { overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px; }

/* Nhịp sống — kiểu tòa soạn: tin tức (trái) | bảng tin ghim khi cuộn (phải). Ảnh bài viết thống nhất 16:9. */
.pulse { position: relative; padding-block: var(--section); background: var(--cream); }
.pulse__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.pulse__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.pulse__news { display: grid; gap: clamp(24px, 2.6vw, 36px); min-width: 0; }

/* Tin nổi bật: ảnh 16:9 bên trái, chữ bên phải */
.pulse__lead .post-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.pulse__lead .post-card__media { border-radius: 22px; box-shadow: 0 34px 54px -40px rgba(15, 42, 26, .6); }
.pulse__lead .post-card__body { padding: 0; }
.pulse__lead .post-card__title { font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: clamp(1.5rem, .9rem + 1.25vw, 2.25rem); line-height: 1.08; letter-spacing: -.02em; color: var(--g-900); }
.pulse__lead .post-card__excerpt { margin-top: 14px; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hàng 3 tin */
.pulse__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--line); list-style: none; }
.pulse__cards .post-card__media { border-radius: 16px; }
.pulse__cards .post-card__body { padding-top: 14px; }
.pulse__cards .post-card__title { font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 17px; line-height: 1.28; color: var(--g-900); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pulse__cards .post-card__excerpt { display: none; }

/* Bảng tin: một thẻ trắng — thông báo ở trên, sắp diễn ra + lịch tuần ở dưới */
.pulse__board { position: sticky; top: calc(var(--mast-h, 76px) + 24px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(15, 42, 26, .5); overflow: hidden; }
.pulse__panel { padding: 18px 22px; }
.pulse__panel--agenda { background: var(--sage); }
.pulse__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pulse__panel-head h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-stretch: 88%; font-size: 19px; letter-spacing: -.01em; color: var(--g-900); }
.pulse__panel-head h3 .icon { width: 20px; height: 20px; color: var(--hubt-green); }
.pulse__panel-head a { font-size: var(--fs-sm); font-weight: 700; color: var(--hubt-green); }
.pulse__panel-head a:hover { text-decoration: underline; }
.pulse__board .board-list a { padding-block: 9px; font-size: 14px; }
.board-list li + li { border-top: 1px dashed var(--line-2); }
.board-list a { display: flex; gap: 14px; padding: 11px 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; transition: color .25s; }
.board-list a:hover { color: var(--hubt-green); }
.board-list time { flex: none; width: 44px; font-family: var(--font-display); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.board-list .is-pinned time { color: var(--hubt-red); }
.agenda { display: grid; gap: 2px; margin: 6px 0 12px; }
.agenda a { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-weight: 600; font-size: 14px; line-height: 1.35; }
.agenda a:hover { color: var(--hubt-green); }
.agenda__date { flex: none; width: 52px; display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; background: #fff; color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.1; box-shadow: var(--shadow-sm); }
.agenda__date b { font-family: var(--font-display); font-size: 20px; color: var(--hubt-green); }
.agenda__week { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--hubt-green); color: #fff; font-size: var(--fs-sm); font-weight: 700; transition: background-color .3s; }
.agenda__week:hover { background: var(--g-700); }

@media (max-width: 1100px) {
	.pulse__grid { grid-template-columns: 1fr; }
	.pulse__board { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
/* Điện thoại: tin nổi bật ảnh trên chữ dưới; 3 tin thành dòng gọn (ảnh 16:9 nhỏ bên trái) */
@media (max-width: 760px) {
	.pulse__lead .post-card { grid-template-columns: 1fr; gap: 16px; }
	.pulse__cards { grid-template-columns: 1fr; gap: 14px; }
	.pulse__cards .post-card { flex-direction: row; align-items: center; gap: 14px; }
	.pulse__cards .post-card__media { flex: none; width: 136px; border-radius: 12px; }
	.pulse__cards .post-card__body { padding-top: 0; min-width: 0; }
	.pulse__cards .post-card__meta { margin-bottom: 4px; }
	.pulse__cards .post-card__meta .tag { display: none; }
	.pulse__cards .post-card__title { font-size: 15.5px; }
	.pulse__board { grid-template-columns: 1fr; }
}

/* 06 · Gia nhập — nền giấy, chữ khổng lồ xanh & viền đồng */

.partners { display: flex; align-items: center; gap: 24px; margin-top: clamp(48px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--line-2); }

@media (max-width: 720px) {  .partners { flex-direction: column; align-items: stretch; } }

/* 10. Trang trong ----------------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(60% 90% at 88% 10%, rgba(201, 162, 74, .18), transparent 70%), var(--sage); color: var(--ink); padding-block: calc(var(--header-space) + clamp(40px, 6vw, 80px)) clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.page-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.page-hero__drum { position: absolute; width: min(760px, 90vw); right: -12%; top: 50%; translate: 0 -50%; color: var(--bronze); opacity: .28; animation: spin 120s linear infinite; }
.page-hero__inner { position: relative; }
.page-hero__title { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); line-height: .92; letter-spacing: -.04em; max-width: 18ch; color: var(--g-900); }
.page-hero--article .page-hero__title { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.2rem); max-width: 24ch; line-height: 1; }
.page-hero__lead { margin-top: 20px; font-size: var(--fs-lg); color: var(--ink-2); max-width: 60ch; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: var(--fs-sm); color: var(--muted); }
.page-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero--image { padding-bottom: 0; border-bottom: 0; }
.page-hero__media { position: relative; margin-top: 44px; margin-bottom: -1px; }
.page-hero__frame { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 21 / 9; background: var(--sage-2); }
.page-hero__frame img { width: 100%; height: 120%; object-fit: cover; }
@media (max-width: 720px) { .page-hero__frame { aspect-ratio: 4 / 3; } }
.crumbs { margin-bottom: 26px; font-size: 12.5px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a:hover { color: var(--hubt-green); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.aside-box--navy { background: var(--hubt-green); }
.aside-box__phone { color: var(--hubt-yellow); font-family: var(--font-display); }
.facts--major dd, .unit-group__title, .callout__title, .empty__title, .form__title, .comment-reply-title, .card-grid .post-card__title, .major__name { font-family: var(--font-display); font-stretch: 88%; letter-spacing: -.015em; }
.callout { background: var(--hubt-green); background-image: radial-gradient(circle at 100% 0, rgba(249, 245, 16, .22), transparent 45%); color: rgba(255, 255, 255, .88); }
.board__week { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--hubt-green); color: #fff; font-size: var(--fs-sm); line-height: 1.35; transition: background-color .3s; }
.board__week:hover { background: var(--g-700); }
.board__week > .icon:first-child { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: var(--hubt-yellow); }
.board__week span { flex: 1; display: flex; flex-direction: column; color: rgba(255, 255, 255, .8); }
.board__week strong { color: #fff; }
.board__week--box { margin: 0 0 20px; }

/* Dòng thời gian dọc (trang 30 năm) */
.timeline { position: relative; }
.timeline__progress { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, var(--hubt-green), var(--bronze), var(--hubt-red)); }
.milestone__img { margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.milestone__img img { width: 100%; height: 100%; object-fit: cover; }
.milestone__title { font-family: var(--font-display); font-stretch: 88%; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.timeline--vertical .milestone__year { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -.04em; color: var(--hubt-green); }

/* Thẻ mốc trượt ngang khi xuất hiện: không để lộ thanh cuộn ngang trên điện thoại trước khi thẻ hiện */
.anniv-timeline { overflow-x: clip; }

/* Trang kỷ niệm 30 năm */
.anniv-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; display: flex; align-items: center; background: radial-gradient(60% 70% at 72% 50%, rgba(201, 162, 74, .22), transparent 70%), var(--cream); color: var(--ink); padding-block: calc(var(--header-space) + 40px) 80px; }
.anniv-hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.anniv-hero .crumbs { grid-column: 1 / -1; margin-bottom: 0; }
.anniv-hero__logo { width: min(560px, 100%); }
.anniv-hero__title { margin-top: 28px; font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); line-height: .92; letter-spacing: -.04em; color: var(--g-900); }
.anniv-hero__slogan { margin-top: 14px; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); color: var(--hubt-red); font-variation-settings: "SOFT" 100, "WONK" 1; }
.anniv-hero__lead { margin-top: 18px; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-md); }
.anniv-hero__drum { position: relative; justify-self: center; width: min(100%, 620px); aspect-ratio: 1; }
.anniv-hero__drum img { position: relative; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(138, 100, 32, .3), 0 50px 100px -40px rgba(138, 100, 32, .7); }
.anniv-hero__drum::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; background: var(--bronze); opacity: .3; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; animation: spin 90s linear infinite reverse; }
@media (max-width: 900px) { .anniv-hero__grid { grid-template-columns: 1fr; } .anniv-hero__drum { width: min(80vw, 420px); } }
.anniv-intro__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.anniv-keys { display: grid; gap: 12px; position: sticky; top: calc(var(--header-space) + 24px); }
.anniv-keys li { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-radius: var(--radius); background: var(--sage); color: var(--g-900); font-weight: 600; line-height: 1.4; }
.anniv-keys__year { flex: none; font-family: var(--font-display); font-stretch: 75%; font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: var(--hubt-green); }
@media (max-width: 900px) { .anniv-intro__grid { grid-template-columns: 1fr; } .anniv-keys { position: static; } }
.guestbook__inner { max-width: 1040px; }
.wishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 40px; }
.wish { padding: 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.wish__text { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: 18px; color: var(--g-900); }
.wish__by { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); }
.wish__pending { font-size: var(--fs-xs); color: var(--hubt-red); margin-top: 6px; }
.comment-respond { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--paper); }
.comment-reply-title { font-size: var(--fs-xl); color: var(--g-900); margin-bottom: 12px; }
.comment-form p { margin-bottom: 14px; }
.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); }
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }

.notfound { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center; background: var(--cream); color: var(--ink-2); padding-block: 120px 80px; }
.notfound__drum { position: absolute; width: min(1000px, 130vw); left: 50%; top: 50%; translate: -50% -50%; color: var(--bronze); opacity: .22; }
.notfound__inner { position: relative; }
.notfound__code { font-family: var(--font-display); font-stretch: 75%; font-size: clamp(7rem, 26vw, 16rem); font-weight: 800; line-height: .85; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--hubt-green); }
.notfound__title { font-family: var(--font-display); font-stretch: 85%; font-size: var(--fs-2xl); letter-spacing: -.03em; color: var(--g-900); margin: 16px 0 12px; }
.notfound__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.notfound .btn--line { --fg: var(--g-900); --bd: var(--line-2); --fill: var(--g-900); --fill-fg: #fff; }
.notfound .chip--dark { color: var(--g-900); border-color: var(--line-2); background: #fff; }
.notfound .chip--dark:hover { background: var(--hubt-green); color: #fff; border-color: var(--hubt-green); }

/* 11. Footer — nền kem đậm, chữ xanh mực ------------------------------------ */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--paper-2); color: var(--ink-2); font-size: var(--fs-sm); border-top: 4px solid var(--hubt-green); }
.site-footer__drum { position: absolute; z-index: -1; width: min(900px, 110vw); right: -18%; bottom: -35%; color: var(--bronze); opacity: .2; }

.footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 40px; padding-block: 56px; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-motto { margin: 0 0 20px; font-family: var(--font-accent); font-style: italic; font-size: 18px; color: var(--g-900); max-width: 34ch; }
.footer-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--hubt-green); margin-bottom: 18px; font-family: var(--font-sans); }
.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact .icon { margin-top: 2px; color: var(--hubt-green); }
.footer-contact a:hover, .footer-links a:hover { color: var(--hubt-green); }
.footer-links { display: grid; gap: 10px; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; transition: color .25s, transform .4s var(--ease-out); }
.footer-links a:hover { transform: translateX(4px); }
.socials { display: flex; gap: 8px; list-style: none; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--hubt-green); background: #fff; transition: all .3s; }
.socials a:hover { background: var(--hubt-green); border-color: var(--hubt-green); color: #fff; }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 24px 30px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.footer-gift { display: inline-flex; align-items: center; gap: 6px; color: var(--hubt-red); }
.to-top { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--hubt-green); color: #fff; transition: background-color .3s; }
.to-top .icon { transform: rotate(180deg); }
.to-top:hover { background: var(--hubt-yellow); color: var(--g-900); }

/* 12. Motion ---------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }

html.motion [data-reveal], html.motion [data-stagger] > *, html.motion [data-hero-in] { opacity: 0; }
html.motion [data-clip] { clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
.split-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split-word { display: inline-block; will-change: transform; }
.is-unmasked .split-line { overflow: visible; }
[data-tilt] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	@view-transition { navigation: none; }
	.ticker__track { animation: none !important; }
	.ticker__viewport { overflow-x: auto; }
}

/* 13. In ------------------------------------------------------------------- */
@media print {
	.site-header, .site-footer, .progress, .article-aside, .toolbar, .adjacent, .share, .search-dialog, .page-hero__bg, .cursor, .preloader { display: none !important; }
	.page-hero { background: none; color: #000; padding: 0 0 16px; }
	.page-hero__title { color: #000; }
	body { font-size: 12pt; background: #fff; }
	.prose th { background: #eee !important; color: #000 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

.aside-box--navy .eyebrow { color: var(--hubt-yellow); }

/* Hero v3 — trống đồng lộ 3/4 tràn mép phải, sinh viên HUBT đứng phía trước, chip số liệu bay nhẹ */

@keyframes bob { 50% { transform: translateY(-12px); } }

/* Nút phim giới thiệu trên hero + hộp xem video */

@keyframes ping { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.45); } }

.video-dialog { width: min(1100px, calc(100% - 24px)); padding: 0; border: 0; border-radius: var(--radius-lg); background: #000; overflow: visible; }
.video-dialog::backdrop { background: rgba(15, 42, 26, .82); backdrop-filter: blur(8px); }
.video-dialog[open] { animation: dialog-in .45s var(--ease-out); }
.video-dialog__frame { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; }
.video-dialog__frame iframe { width: 100%; height: 100%; border: 0; }
.video-dialog__close { position: absolute; top: -52px; right: 0; background: #fff; color: var(--g-900); }

/* Chương Cựu sinh viên */
.alumni { position: relative; padding-block: var(--section) calc(var(--section) * .7); background: var(--cream); overflow: hidden; }

.ribbon { overflow: hidden; margin-bottom: clamp(40px, 6vw, 80px); rotate: -2deg; padding-block: 10px 30px; }

.scrubber__years button { white-space: nowrap; }

/* Hành trình — băng cuộn ngang thủ công (không ghim trang) */

.journey__tools { display: flex; align-items: center; gap: 20px; }
.reel-nav { display: flex; gap: 8px; }
.reel-nav__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--g-900); border: 1px solid var(--line-2); transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.reel-nav__btn:hover:not(:disabled) { background: var(--hubt-green); border-color: var(--hubt-green); color: #fff; transform: scale(1.06); }
.reel-nav__btn:disabled { opacity: .35; cursor: default; }
.reel { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--hubt-green) var(--line); }
.reel::-webkit-scrollbar { height: 8px; }
.reel::-webkit-scrollbar-track { background: var(--line); border-radius: 8px; margin-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.reel::-webkit-scrollbar-thumb { background: var(--hubt-green); border-radius: 8px; }
.reel:focus-visible { outline-offset: -3px; }
.reel__track { scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.frame { scroll-snap-align: start; scroll-margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }

.scrubber__rail span { transition: transform .2s linear; }
@media (max-width: 720px) { .journey__tools { width: 100%; justify-content: space-between; } .reel-nav__btn { width: 46px; height: 46px; } }

/* Hành trình — số năm thành dòng tiêu đề trên ảnh (không bị ảnh đè), poster chờ ảnh tư liệu */
.frame { padding-top: 0; }

/* 04 · Hành trình — thu gọn để trọn trong một màn hình ------------------------ */

.frame { width: clamp(230px, 21vw, 300px); }

.reel-nav__btn { width: 46px; height: 46px; }
@media (max-width: 900px) {
	.frame { width: 72vw; }
	
	
}

/* Hành trình — kéo bằng chuột trên máy tính */
.reel.is-draggable { cursor: grab; }
.reel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.reel.is-dragging a, .reel.is-dragging img { pointer-events: none; }
.reel img { -webkit-user-drag: none; user-select: none; }

/* ==========================================================================
   Trang chủ — "HUBT 30 · Kiến tạo tương lai"
   Hiện đại, công nghệ (lưới chấm, hình động), trang trọng (logo 30 năm, tri ân), sáng.
   ========================================================================== */
.v2title { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: .96; letter-spacing: -.035em; color: var(--g-900); }

/* Hero — chấm đỏ nhấp nháy cạnh dòng đếm ngược */

.v2count__live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--hubt-red); box-shadow: 0 0 0 0 rgba(225, 29, 42, .6); animation: beacon 2s infinite; vertical-align: middle; }

/* Hình động minh họa */
.art { display: block; width: 100%; height: auto; }
.art .art__panel { fill: #fff; stroke: rgba(15, 111, 116, .25); }
.art .art__dot { fill: rgba(15, 111, 116, .35); }
.art--tech .art__code rect { fill: #0f6f74; opacity: .75; transform-box: fill-box; transform-origin: 0 50%; animation: type 4s var(--ease-out) infinite; animation-delay: var(--d); }
.art--tech .art__code rect:nth-child(even) { fill: var(--hubt-green); opacity: .5; }
@keyframes type { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.art__caret { fill: #0f6f74; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.art__chip rect { fill: none; stroke: #0f6f74; stroke-width: 2.5; }
.art__chip path { stroke: #0f6f74; stroke-width: 2.5; stroke-linecap: round; }
.art__chip { animation: chip 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chip { 50% { opacity: .45; } }
.art__axis { fill: none; stroke: rgba(22, 103, 51, .35); stroke-width: 2; }
.art__bars rect { fill: rgba(22, 103, 51, .22); transform-box: fill-box; transform-origin: 50% 100%; animation: grow 4s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes grow { 0% { transform: scaleY(.1); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.art__line { fill: none; stroke: var(--hubt-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 4s var(--ease-out) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.art__arrow { fill: none; stroke: var(--hubt-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; animation: fadein 4s infinite; }
@keyframes fadein { 0%, 40% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
.art__links path { fill: none; stroke: rgba(138, 100, 32, .55); stroke-width: 2.5; stroke-dasharray: 1; animation: draw 5s var(--ease-out) infinite; }
.art__node { fill: #fff; stroke: #8a6420; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: node 5s var(--ease-out) infinite; animation-delay: var(--d); }
.art__node--lead { fill: #8a6420; }
@keyframes node { 0% { transform: scale(0); } 20%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.art__ecg { fill: none; stroke: var(--hubt-red); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90 400; animation: ecg 2.2s linear infinite; }
.art__ecg--glow { stroke-width: 10; opacity: .15; filter: blur(2px); }
@keyframes ecg { from { stroke-dashoffset: 490; } to { stroke-dashoffset: 0; } }
.art__cross rect { fill: var(--hubt-red); opacity: .85; }
.art__cross { transform-box: fill-box; transform-origin: center; animation: beat 1.1s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.08); } }
/* Thiết kế – Kiến trúc: lưới bản vẽ, mặt đứng công trình tự vẽ, đường cong có tay nắm */
.art--design .art__grid path { fill: none; stroke: rgba(138, 100, 32, .12); stroke-width: 1; }
.art__draw { fill: none; stroke: #8a6420; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 5s var(--ease-out) infinite; }
.art__curve { fill: none; stroke: var(--hubt-green); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; animation: draw 5s var(--ease-out) .6s infinite; }
/* Ngôn ngữ: lời chào Anh / Trung / Nga lần lượt hiện trong bong bóng, bong bóng đáp đang gõ */
.art__bubble { fill: #fff; stroke: rgba(61, 90, 152, .35); stroke-width: 2; }
.art__bubble--me { fill: #3d5a98; stroke: none; }
.art__word { font-family: var(--font-display), "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-weight: 800; font-size: 30px; fill: #3d5a98; text-anchor: middle; opacity: 0; transform-box: fill-box; transform-origin: center; animation: word 6s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes word { 0% { opacity: 0; transform: translateY(8px); } 6%, 28% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
.art__typing circle { fill: #fff; animation: typing 1.2s ease-in-out infinite; }
.art__typing circle:nth-child(2) { animation-delay: .15s; }
.art__typing circle:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
	.art * { animation: none !important; }
	.art__line, .art__links path, .art__draw, .art__curve { stroke-dashoffset: 0; }
	.art__word:first-of-type { opacity: 1; }
}

/* Dải chữ chạy -------------------------------------------------------------- */
.v2ribbon { overflow: hidden; background: var(--hubt-green); color: #fff; padding-block: 16px; rotate: -1.2deg; margin-block: -10px; position: relative; z-index: 2; box-shadow: 0 20px 40px -30px rgba(15, 42, 26, .6); }
.v2ribbon__track { display: flex; gap: 0; width: max-content; }
.v2ribbon__track li { display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; }
.v2ribbon__track li::after { content: "✦"; margin-inline: 28px; color: var(--hubt-yellow); font-size: .6em; }
.v2ribbon__track li.is-alt { color: var(--hubt-yellow); }

/* Kỷ niệm 30 năm ------------------------------------------------------------ */
.v2anniv { position: relative; padding-block: var(--section); background: #fff; overflow: hidden; }
.v2anniv::before { content: ""; position: absolute; left: -12%; top: 6%; width: 620px; aspect-ratio: 1; background: var(--bronze); opacity: .07; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; animation: spin 200s linear infinite; }

/* ==========================================================================
   Hero "Thiệp mời lễ kỷ niệm" — logo & chủ đề, đếm ngược, tòa nhà bên phải
   ========================================================================== */
.v2i { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(60% 70% at 80% 45%, rgba(201, 162, 74, .12), transparent 70%), linear-gradient(180deg, #fcfbf7 0%, var(--cream) 100%); }
.v2i__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2i__drum { position: absolute; left: -16vw; bottom: -30vw; width: min(78vw, 980px); aspect-ratio: 1; }
.v2i__drumart { width: 100%; color: var(--bronze-ink); opacity: .08; animation: spin 200s linear infinite; }
.v2i__building { --reveal: 125%; position: absolute; right: 0; top: 50%; width: min(60vw, 980px); aspect-ratio: 1190 / 793; translate: 0 -46%; margin: 0;
	-webkit-mask-image: radial-gradient(120% 110% at 78% 50%, #000 42%, transparent 72%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(120% 110% at 78% 50%, #000 42%, transparent 72%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%)); mask-composite: intersect; }
html.motion .v2i__building { --reveal: -20%; }
.v2i__building img { width: 100%; height: 100%; object-fit: cover; opacity: .9; filter: saturate(.9); transform-origin: 70% 60%; will-change: transform; }

.v2i__inner { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding-top: calc(var(--header-space) + 2svh); padding-bottom: 32px; }
.v2i__copy { max-width: 640px; }
.v2i__logo { width: clamp(220px, 22vw, 330px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 16px 30px rgba(15, 42, 26, .12)); }
.v2i__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hubt-red); }
.v2i__kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.v2i__title { margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2.6rem, 1rem + 4.4vw, 5.6rem); line-height: .92; letter-spacing: -.045em; color: var(--g-900); }
.v2i__title em { display: block; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.02em; color: var(--hubt-green); font-variation-settings: "SOFT" 100, "WONK" 1; }

.v2i__count { margin-top: clamp(24px, 3.4vw, 40px); padding: 20px 22px 18px; border-radius: 24px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(15, 42, 26, .08); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -40px rgba(15, 42, 26, .6); max-width: 560px; }
.v2i__count-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.v2i__count-label a { font-weight: 800; color: var(--g-900); }
.v2i__count-label a:hover { color: var(--hubt-green); }
.v2i__digits { display: flex; align-items: flex-start; gap: 6px; margin: 14px 0 12px; }
.v2i__digits span { flex: 1; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; background: var(--g-900); }
.v2i__digits b { font-family: var(--font-display); font-weight: 800; font-stretch: 74%; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); line-height: .9; color: var(--hubt-yellow); font-variant-numeric: tabular-nums; }
.v2i__digits small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.v2i__digits i { align-self: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--line-2); margin-top: -18px; }
.v2i__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.v2i__meta span { display: inline-flex; align-items: center; gap: 6px; }
.v2i__meta .icon { color: var(--hubt-green); }
.v2i .hero__bottom { position: relative; z-index: 1; }

@media (max-width: 1000px) {
	.v2i__building { top: calc(var(--header-space) - 10px); translate: none; width: 100vw; opacity: .9;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-image: linear-gradient(180deg, #000 55%, transparent 96%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%)); }
	.v2i__inner { padding-top: calc(var(--header-space) + 52vw); align-items: flex-start; }
	.v2i__logo { width: clamp(170px, 40vw, 260px); margin-top: -14vw; position: relative; }
}
@media (max-width: 560px) {
	.v2i__digits { gap: 4px; }
	.v2i__digits i { display: none; }
	.v2i__digits span { padding: 10px 4px 8px; border-radius: 12px; }
	.v2i__title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
	.v2i__count { padding: 16px 14px 14px; }
}
/* Thiệp mời — mép trái tòa nhà loang mềm; thu gọn để cả hero + băng tin nằm trong một màn hình */
@media (min-width: 1001px) {
	.v2i__building {
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(110% 100% at 72% 50%, #000 46%, transparent 74%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		-webkit-mask-composite: source-in, source-in;
		mask-image: linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(110% 100% at 72% 50%, #000 46%, transparent 74%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-composite: intersect, intersect;
		width: min(64vw, 1060px); right: -2vw; }
}
.v2i__logo { width: clamp(170px, 15vw, 250px); margin-bottom: 12px; }
.v2i__title { font-size: clamp(2.4rem, .8rem + 3.8vw, 4.8rem); margin-top: 10px; }
.v2i__count { margin-top: clamp(18px, 2.6vw, 30px); padding: 16px 18px 14px; }
.v2i__digits { margin: 10px 0; }
.v2i__digits span { padding: 10px 6px 8px; }
.v2i__digits b { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.9rem); }
.v2i__inner { padding-bottom: 20px; }
@media (min-width: 1001px) and (max-height: 800px) { .v2i__logo { width: 170px; } .v2i__title { font-size: clamp(2.2rem, .6rem + 3.2vw, 3.8rem); } }

/* Thiệp mời — đếm ngược kiểu "vé mời" sáng màu (không nền đen) */
.v2i__count { position: relative; overflow: hidden; padding: 18px 24px 0; border-radius: 22px; background: linear-gradient(135deg, #fffdf7 0%, #fbf6e8 100%); border: 1px solid rgba(184, 145, 63, .45); box-shadow: 0 24px 50px -36px rgba(138, 100, 32, .55), inset 0 0 0 5px rgba(255, 255, 255, .6); backdrop-filter: none; }
.v2i__count::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; aspect-ratio: 1; background: var(--bronze); opacity: .12; -webkit-mask: var(--drum) center / contain no-repeat; mask: var(--drum) center / contain no-repeat; animation: spin 90s linear infinite; pointer-events: none; }
.v2i__count > * { position: relative; }
.v2i__count-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-ink); }
.v2i__count-label a { display: block; width: 100%; margin-top: 4px; font-family: var(--font-display); font-stretch: 88%; font-size: 17px; letter-spacing: -.01em; text-transform: none; color: var(--g-900); }
.v2i__digits { gap: 0; margin: 14px 0 16px; }
.v2i__digits span { background: none; border-radius: 0; padding: 0 8px; gap: 4px; }
.v2i__digits span + i + span { border-left: 1px solid rgba(184, 145, 63, .35); }
.v2i__digits i { display: none; }
.v2i__digits b { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem); line-height: .9; color: var(--hubt-green); }
.v2i__digits span:last-child b { color: var(--hubt-red); }
.v2i__digits small { color: var(--muted); letter-spacing: .16em; }
.v2i__meta { margin: 0 -24px; padding: 12px 24px 14px; border-top: 2px dashed rgba(184, 145, 63, .45); background: rgba(255, 255, 255, .55); }
.v2i__count::after { content: ""; position: absolute; left: -9px; bottom: 36px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 1px solid rgba(184, 145, 63, .45); box-shadow: calc(100% + 0px) 0 0 0 transparent; }
.v2i__meta::before, .v2i__meta::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 1px solid rgba(184, 145, 63, .45); }
.v2i__meta { position: relative; }
.v2i__meta::before { left: -9px; }
.v2i__meta::after { right: -9px; }
.v2i__count::after { display: none; }
@media (max-width: 560px) { .v2i__count { padding: 16px 16px 0; } .v2i__meta { margin: 0 -16px; padding: 12px 16px 14px; } .v2i__digits span { padding: 0 4px; } .v2i__digits b { font-size: 2.2rem; } }
/* Thiệp mời — đổ mờ mép trên/dưới của tranh tòa nhà (không còn đường viền kẻ) */
@media (min-width: 1001px) {
	.v2i__building {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(110% 100% at 72% 50%, #000 46%, transparent 74%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		-webkit-mask-composite: source-in, source-in, source-in;
		mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(110% 100% at 72% 50%, #000 46%, transparent 74%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-composite: intersect, intersect, intersect; }
}
@media (max-width: 1000px) {
	.v2i__building {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 96%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 96%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%)); }
}

/* ==========================================================================
   Chương 01 — Tri ân người sáng lập + hành trình các dấu mốc
   ========================================================================== */
.v2anniv { padding-block: var(--section) calc(var(--section) * .6); background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.v2anniv__head { position: relative; display: grid; justify-items: center; text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.v2anniv__head .v2title { max-width: none; }
.v2anniv__line { display: block; }
.v2anniv__line { white-space: nowrap; }
/* Điện thoại: cỡ chữ theo bề ngang để giữ đúng 2 dòng */
@media (max-width: 720px) { .v2anniv__head .v2title { font-size: min(2.2rem, 7vw); } }
.v2tri { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px) 0; border-radius: 32px; background: linear-gradient(155deg, #fffdf8 0%, var(--sage) 100%); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(15, 42, 26, .5); overflow: hidden; }
.v2tri__portrait { position: relative; margin: 0; align-self: end; display: grid; place-items: end center; min-height: clamp(400px, 40vw, 560px); }
.v2tri__drum { position: absolute; left: 50%; top: 42%; width: 155%; aspect-ratio: 1; translate: -50% -50%; color: var(--bronze-ink); opacity: .3; animation: spin 140s linear infinite; }
.v2tri__halo { position: absolute; left: 50%; top: 42%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(249, 245, 16, .3), rgba(201, 162, 74, .1) 50%, transparent 70%); }
.v2tri__portrait img { position: relative; height: clamp(400px, 40vw, 560px); width: auto; filter: drop-shadow(0 30px 40px rgba(15, 42, 26, .25)); }
.v2tri__text { padding-bottom: clamp(24px, 3vw, 40px); }
.v2tri__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hubt-red); margin-bottom: 10px; }
.v2tri__kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.v2tri__name { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: clamp(2.4rem, 1.4rem + 3vw, 4.6rem); line-height: .92; letter-spacing: -.04em; color: var(--g-900); }
.v2tri__years { margin-top: 10px; font-weight: 700; color: var(--bronze-ink); }
.v2tri__lead { margin-top: 14px; font-size: var(--fs-md); color: var(--ink-2); max-width: 58ch; }
.v2tri__vision { margin: 18px 0; padding: 16px 22px; border-left: 4px solid var(--hubt-yellow); border-radius: 0 18px 18px 0; background: rgba(255, 255, 255, .85); }
.v2tri__vision p:last-child { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.02rem, .9rem + .4vw, 1.25rem); line-height: 1.5; color: var(--g-900); }
.v2tri__label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hubt-green); margin-bottom: 4px; }
.v2tri__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; margin: 0 0 22px; }
.v2tri__facts div { padding-top: 10px; border-top: 1px solid var(--line-2); }
.v2tri__facts dt { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--hubt-green); }
.v2tri__facts dd { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.v2tri__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v2tri .btn--ghost { background: #fff; }
.v2anniv__journey-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: clamp(56px, 7vw, 96px) 0 22px; }

.v2anniv__reel { margin-bottom: 10px; }
.v2anniv .scrubber { margin-top: 6px; }
@media (max-width: 1100px) { .v2tri__facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
	.v2tri { grid-template-columns: 1fr; padding-bottom: 0; }
	.v2tri__portrait { order: 2; min-height: 340px; }
	.v2tri__portrait img { height: 360px; }
	.v2tri__text { padding-bottom: 0; }
}
.v2anniv { padding-top: clamp(36px, 4.4vw, 64px); }

/* Chương 01 · Phim giới thiệu (trái) + hành trình các dấu mốc (phải) */
.v2jr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.v2video { margin: 0; position: sticky; top: calc(var(--header-space) + 16px); }
.v2video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--g-900); box-shadow: 0 40px 70px -40px rgba(15, 42, 26, .6); }
.v2video__frame > img { width: 100%; height: 100%; object-fit: cover; }
.v2video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v2video__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; }
.v2video__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; transition: transform 1.2s var(--ease-out); }
.v2video__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 42, 26, 0) 40%, rgba(15, 42, 26, .45) 100%); }
.v2video__poster:hover img { transform: scale(1.05); }
.v2video__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 84px; height: 84px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--hubt-yellow); color: var(--g-900); box-shadow: 0 20px 40px -14px rgba(15, 42, 26, .6); transition: transform .45s var(--ease-out); }
.v2video__play .icon { width: 36px; height: 36px; }
.v2video__play::before, .v2video__play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(249, 245, 16, .8); animation: ping 2.2s var(--ease-out) infinite; }
.v2video__play::after { animation-delay: 1.1s; }
.v2video__poster:hover .v2video__play { transform: scale(1.08); }
.v2video__caption { padding: 20px 6px 0; }
.v2video__title { font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); line-height: 1.02; letter-spacing: -.025em; color: var(--g-900); }
.v2video__text { margin-top: 8px; color: var(--ink-2); max-width: 48ch; }
.v2jr__milestones { min-width: 0; }
.v2jr .v2anniv__journey-head { margin: 0 0 18px; }
.v2jr .reel__track { padding-inline: 0; }
.v2jr .frame { width: clamp(220px, 17vw, 260px); scroll-margin-left: 0; }
.v2jr .reel::-webkit-scrollbar-track { margin-inline: 0; }
@media (max-width: 1000px) {
	.v2jr { grid-template-columns: 1fr; }
	.v2video { position: static; }
	.v2jr .frame { width: 70vw; }
}


/* Trang chủ — nhịp khoảng cách thống nhất giữa các chương + nền xen kẽ trắng/kem */
.layout-v2 { --v2-pad: clamp(40px, 4.7vw, 68px); }
.layout-v2 .v2anniv { padding-block: clamp(36px, 4.4vw, 64px) var(--v2-pad); background: #fff; }
.layout-v2 .fields { padding-block: var(--v2-pad); background: var(--cream); }
.layout-v2 .alumni { padding-block: var(--v2-pad); background: #fff; }
.layout-v2 .pulse { padding-block: var(--v2-pad); background: var(--cream); }

.layout-v2 .fields__head, .layout-v2 .pulse__head { margin-bottom: clamp(24px, 3vw, 40px); }
.layout-v2 .ribbon { margin-bottom: clamp(28px, 4vw, 52px); }
.layout-v2 .v2jr { margin-top: clamp(40px, 5vw, 72px); }

/* Lớp nền dùng chung (hero, Cựu sinh viên, chân trang): chấm tỏa + quầng sáng */
.v2alum__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.3px, transparent 1.6px); background-size: 18px 18px;
	-webkit-mask-image: radial-gradient(60% 75% at 22% 34%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 35%, transparent 70%); mask-image: radial-gradient(60% 75% at 22% 34%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 35%, transparent 70%); }
.v2alum__dots::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); background-size: 11px 11px; background-position: 5px 5px;
	-webkit-mask-image: radial-gradient(90% 90% at 85% 20%, #000, transparent 70%); mask-image: radial-gradient(90% 90% at 85% 20%, #000, transparent 70%); }
.v2alum__glow { position: absolute; left: 6%; top: 8%; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(249, 245, 16, .18), transparent 62%); }
.v2alum__glow { left: 2%; top: 2%; width: 40vw; background: radial-gradient(circle, rgba(249, 245, 16, .26), rgba(249, 245, 16, .06) 40%, transparent 65%); }

/* thẻ mốc gọn: một thẻ — biểu tượng + năm, tên mốc, mô tả (không lặp thông tin) */
.v2jr__heading { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); letter-spacing: -.02em; color: var(--g-900); }
.v2jr__heading::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--hubt-red); }
.v2jr .v2anniv__journey-head { align-items: center; }
.frame--compact { width: clamp(230px, 18vw, 270px); padding-top: 0; }
.mc2 { --bg: #eaf3ec; --fg: var(--hubt-green); position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 250px; padding: 20px 20px 22px; border-radius: 22px; overflow: hidden; background: var(--bg); border: 1px solid rgba(15, 42, 26, .06); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.mc2:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -30px rgba(15, 42, 26, .55); }
.mc2--teal { --bg: #e3f1f1; --fg: #0f6f74; }
.mc2--bronze { --bg: #f7eedb; --fg: #8a6420; }
.mc2--red { --bg: #fbeae8; --fg: var(--hubt-red); }
.mc2--gold { --bg: #fff8cc; --fg: #8a6420; }
.mc2--key { --bg: var(--hubt-green); --fg: #fff; }
.mc2__drum { position: absolute; right: -40%; bottom: -44%; width: 105%; aspect-ratio: 1; color: var(--fg); opacity: .12; animation: spin 140s linear infinite; pointer-events: none; }
.mc2 > * { position: relative; }
.mc2__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc2__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #fff; color: var(--fg); box-shadow: 0 8px 18px -12px rgba(15, 42, 26, .5); transition: transform .5s var(--ease-out); }
.mc2:hover .mc2__icon { transform: rotate(-8deg) scale(1.06); }
.mc2--key .mc2__icon { background: var(--hubt-yellow); color: var(--g-900); }
.mc2__icon .icon { width: 24px; height: 24px; }
.mc2__year { font-family: var(--font-display); font-weight: 800; font-stretch: 76%; font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem); line-height: 1; letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.mc2__title { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; color: var(--g-900); }
.mc2__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc2--key .mc2__title, .mc2--key .mc2__year { color: #fff; }
.mc2--key .mc2__desc { color: rgba(255, 255, 255, .82); }
@media (max-width: 1000px) { .frame--compact { width: 72vw; } }
.mc2 > .mc2__drum { position: absolute; }
.reel { position: relative; } /* offsetLeft của thẻ tính theo chính dải cuộn */

/* ==========================================================================
   Hero nền xanh kiểu banner (đồng bộ chương Cựu sinh viên)
   ========================================================================== */
.v2i--green { color: #fff; background: radial-gradient(70% 90% at 18% 30%, #2b9a52 0%, rgba(43, 154, 82, 0) 60%), linear-gradient(115deg, #1f8a47 0%, #166733 42%, #0d4a24 78%, #0a3a1c 100%); }
.v2i--green .v2i__drumart { color: #fff; opacity: .07; }

.v2i--green .v2i__logo { filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .2)); }
.v2i--green .v2i__kicker { color: var(--hubt-yellow); }
.v2i--green .v2i__title { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .18); }
.v2i--green .v2i__title em { color: var(--hubt-yellow); }
.v2i--green .v2i__count { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.v2i--green .hero__bottom { background: rgba(4, 30, 15, .35); border-top-color: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.v2i--green .ticker__track a { color: rgba(255, 255, 255, .85); }
.v2i--green .ticker__track a:hover { color: #fff; }
.v2i--green .ticker__track time { color: var(--hubt-yellow); }
.v2i--green .scroll-cue { color: rgba(255, 255, 255, .7); }
.v2i--green .scroll-cue__line { background: rgba(255, 255, 255, .25); }
.v2i--green .scroll-cue__line::after { background: var(--hubt-yellow); }
@media (max-width: 1000px) {
	
	.v2i--green .v2i__inner { padding-top: calc(var(--header-space) + 40vw); }
	.v2i--green .v2i__logo { margin-top: 0; }
}
/* Dải chữ chạy nền vàng để tách khỏi hero xanh */
.layout-v2 .v2ribbon { background: var(--hubt-yellow); color: var(--g-900); }
.layout-v2 .v2ribbon__track li.is-alt { color: var(--hubt-green); }
.layout-v2 .v2ribbon__track li::after { color: var(--hubt-red); }

/* Hero xanh — tranh màu nước tòa nhà hiển thị rõ như bản trước, mép loang vào nền xanh */
.v2i--green .v2i__building { right: -1vw; width: min(62vw, 1040px); }
.v2i--green .v2i__building img { opacity: 1; filter: saturate(1.05) contrast(1.02); }
@media (min-width: 1001px) {
	.v2i--green .v2i__building {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 26%), radial-gradient(115% 105% at 70% 52%, #000 52%, transparent 76%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		-webkit-mask-composite: source-in, source-in, source-in;
		mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 26%), radial-gradient(115% 105% at 70% 52%, #000 52%, transparent 76%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-composite: intersect, intersect, intersect; }
}
@media (max-width: 1000px) { .v2i--green .v2i__inner { padding-top: calc(var(--header-space) + 52vw); } .v2i--green .v2i__logo { margin-top: -14vw; } }
/* Hero xanh — tòa nhà dạng hạt/nét trắng (cùng vị trí, khung như tranh màu nước) */
.v2i--green .v2i__building { aspect-ratio: 1400 / 932; }
.v2i--green .v2i__building img { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .08)); opacity: .95; }
@media (min-width: 1001px) {
	.v2i--green .v2i__building {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		-webkit-mask-composite: source-in, source-in;
		mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-composite: intersect, intersect; }
	.v2i--green .v2i__building img { opacity: 1; }
}

/* Hero xanh — trống đồng như vầng mặt trời phía sau tòa nhà, xoay chậm */
.v2i--green .v2i__drum--sun { left: auto; bottom: auto; right: -6vw; top: 42%; width: min(68vw, 1080px); translate: 0 -50%; }
.v2i--green .v2i__drum--sun .v2i__drumart { color: #fff; opacity: .1; animation: spin 120s linear infinite; }
.v2i--green .v2i__drum--sun::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(249, 245, 16, .14), transparent 68%); }
@media (max-width: 1000px) { .v2i--green .v2i__drum--sun { right: -30vw; top: calc(var(--header-space) + 24vw); width: 120vw; } }
/* Hero xanh trên điện thoại — logo 30 năm kéo lên ngang tòa nhà (đè nhẹ góc trái), tòa nhà lệch phải, mép trái và đáy mờ dần; bỏ chiều cao cố định để không hở khoảng trống dưới */
@media (max-width: 600px) {
	.v2i { min-height: auto; }
	.v2i--green .v2i__building { right: -24vw; width: 120vw; top: calc(var(--header-space) - 18vw);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 36%, #000 64%, transparent 84%), linear-gradient(90deg, transparent 6%, #000 40%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		-webkit-mask-composite: source-in, source-in;
		mask-image: linear-gradient(180deg, transparent 0%, #000 36%, #000 64%, transparent 84%), linear-gradient(90deg, transparent 6%, #000 40%), linear-gradient(260deg, #000 calc(var(--reveal) - 10%), transparent calc(var(--reveal) + 12%));
		mask-composite: intersect, intersect; }
	.v2i--green .v2i__inner { padding-top: calc(var(--header-space) + 8vw); }
	.v2i--green .v2i__logo { margin-top: 0; width: clamp(160px, 42vw, 240px); }
}

/* ==========================================================================
   Hero xanh · Đếm ngược — kiểu B "Kính mờ" và kiểu C "Không khung"
   ========================================================================== */
.v2i__count--kinh, .v2i__count--mo { color: #fff; }
.v2i__count--kinh::before, .v2i__count--mo::before { background: #fff; opacity: .06; }
.v2i__count--kinh .v2i__meta::before, .v2i__count--kinh .v2i__meta::after,
.v2i__count--mo .v2i__meta::before, .v2i__count--mo .v2i__meta::after { display: none; }
.v2i__count--kinh .v2i__count-label, .v2i__count--mo .v2i__count-label { color: var(--hubt-yellow); }
.v2i__count--kinh .v2i__count-label a, .v2i__count--mo .v2i__count-label a { color: #fff; }
.v2i__count--kinh .v2i__count-label a:hover, .v2i__count--mo .v2i__count-label a:hover { color: var(--hubt-yellow); }
.v2i__count--kinh .v2i__digits b, .v2i__count--mo .v2i__digits b { color: #fff; }
.v2i__count--kinh .v2i__digits span:last-child b, .v2i__count--mo .v2i__digits span:last-child b { color: var(--hubt-yellow); }
.v2i__count--kinh .v2i__digits small, .v2i__count--mo .v2i__digits small { color: rgba(255, 255, 255, .65); }
.v2i__count--kinh .v2i__digits span + i + span, .v2i__count--mo .v2i__digits span + i + span { border-left-color: rgba(255, 255, 255, .28); }
.v2i__count--kinh .v2i__meta, .v2i__count--mo .v2i__meta { background: none; color: rgba(255, 255, 255, .88); }
.v2i__count--kinh .v2i__meta .icon, .v2i__count--mo .v2i__meta .icon { color: var(--hubt-yellow); }

/* B · Kính mờ */
.v2i--green .v2i__count--kinh { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .26); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.v2i__count--kinh .v2i__meta { border-top: 1px solid rgba(255, 255, 255, .22); }

/* C · Không khung — số trên nền, thông tin giữa hai đường kẻ */
.v2i--green .v2i__count--mo { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; max-width: 600px; }
.v2i__count--mo::before { display: none; }
.v2i__count--mo .v2i__count-label a { font-size: 18px; }
.v2i__count--mo .v2i__digits { margin: 12px 0 14px; }
.v2i__count--mo .v2i__digits span { padding: 0 18px; justify-items: start; }
.v2i__count--mo .v2i__digits span:first-child { padding-left: 0; }
.v2i__count--mo .v2i__digits b { font-size: clamp(3.2rem, 2rem + 3vw, 4.8rem); text-shadow: 0 6px 30px rgba(0, 0, 0, .18); }
.v2i__count--mo .v2i__meta { margin: 0; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .6); display: inline-flex; }
@media (max-width: 560px) { .v2i__count--mo .v2i__digits span { padding: 0 8px; } .v2i__count--mo .v2i__digits b { font-size: 2.6rem; } .v2i__count--mo .v2i__meta { display: flex; } }

/* ==========================================================================
   Tuyển sinh — cô sinh viên làm điểm nhấn
   ========================================================================== */
.v2adm { position: relative; overflow: hidden; padding-block: var(--v2-pad, 68px); background: radial-gradient(60% 80% at 85% 55%, rgba(249, 245, 16, .22), transparent 65%), linear-gradient(180deg, #fff 0%, #fbfaf3 100%); }
.v2adm__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.v2adm__title { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2.6rem, 1.2rem + 4.2vw, 5.4rem); line-height: .92; letter-spacing: -.045em; color: var(--g-900); }
.v2adm__title em { display: block; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.02em; color: var(--hubt-green); font-variation-settings: "SOFT" 100, "WONK" 1; }
.v2adm__lead { margin-top: 16px; max-width: 50ch; font-size: var(--fs-md); color: var(--ink-2); }
.v2adm__fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: clamp(22px, 3vw, 32px); }
.v2adm__field { --tone: var(--hubt-green); --tint: #e7f3ea; display: grid; gap: 8px; padding: 10px 10px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -26px rgba(15, 42, 26, .5); transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s; }
.v2adm__field:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--tone); box-shadow: 0 26px 40px -26px rgba(15, 42, 26, .55); }
.v2adm__field--tech { --tone: #0f6f74; --tint: #e3f1f1; }
.v2adm__field--design { --tone: #8a6420; --tint: #f6eedb; }
.v2adm__field--language { --tone: #3d5a98; --tint: #e8edf7; }
.v2adm__field--health { --tone: var(--hubt-red); --tint: #fbe9e8; }
.v2adm__art { display: block; padding: 6px; border-radius: 14px; background: var(--tint); }
.v2adm__fname { display: flex; align-items: center; justify-content: space-between; padding-inline: 4px; font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: 16px; color: var(--g-900); }
.v2adm__field { position: relative; container-type: inline-size; }
.v2adm__fname { align-items: flex-end; gap: 6px; line-height: 1.12; font-size: clamp(12.5px, 14.6cqi, 16px); }
/* Mũi tên thành nút tròn nhỏ ở góc trên phải để tên lĩnh vực dùng trọn bề ngang thẻ */
.v2adm__field .v2adm__fgo { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px -4px rgba(15, 42, 26, .35); }
.v2adm__flabel { display: grid; min-height: 2.24em; align-content: end; }
.v2adm__flabel > span { white-space: nowrap; }
.v2adm__fgo { width: 16px; height: 16px; color: var(--tone); transition: transform .4s var(--ease-out); }
.v2adm__field:hover .v2adm__fgo { transform: translate(2px, -2px); }
.v2adm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(22px, 3vw, 32px); }
.v2adm .btn--ghost { background: #fff; }
.v2adm__hotline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--hubt-red); }
.v2adm__hotline .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--red-50); }
.v2adm__hotline span { display: grid; line-height: 1.1; }
.v2adm__hotline small { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.v2adm__stage { position: relative; align-self: stretch; min-height: clamp(460px, 44vw, 640px); }
.v2adm__disc { position: absolute; left: 50%; bottom: 0; width: min(92%, 560px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b9a52 0%, var(--hubt-green) 55%, #0d4a24 100%); box-shadow: 0 40px 80px -40px rgba(15, 42, 26, .7); }
.v2adm__drum { position: absolute; left: 50%; bottom: -6%; width: min(120%, 740px); aspect-ratio: 1; translate: -50% 0; color: var(--bronze-ink); opacity: .22; animation: spin 90s linear infinite; }
.v2adm__dots { position: absolute; left: 50%; bottom: 0; width: min(92%, 560px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background-image: radial-gradient(rgba(255, 255, 255, .28) 1.3px, transparent 1.6px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 70%); mask-image: radial-gradient(circle at 30% 30%, #000, transparent 70%); }
.v2adm__student { position: absolute; left: 50%; bottom: 0; height: 104%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 24px 30px rgba(15, 42, 26, .28)); }
@media (max-width: 1100px) { .v2adm__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.v2adm__grid { grid-template-columns: 1fr; }
	.v2adm__stage { order: -1; min-height: 420px; }
	.v2adm__student { height: 100%; }
}

/* Con trỏ tùy biến — tương phản rõ trên cả nền sáng và nền xanh */
.cursor__dot { width: 8px; height: 8px; background: var(--hubt-red); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .25); }
.cursor__ring { width: 40px; height: 40px; border: 2px solid var(--hubt-green); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.cursor.is-link .cursor__ring { width: 60px; height: 60px; border-color: var(--hubt-green); background: rgba(22, 103, 51, .1); }
.cursor.is-label .cursor__ring { background: var(--hubt-yellow); border-color: var(--g-900); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); }
.cursor.is-dark .cursor__ring { border-color: var(--hubt-yellow); box-shadow: 0 0 0 1.5px rgba(4, 30, 15, .35), inset 0 0 0 1.5px rgba(4, 30, 15, .25); }
.cursor.is-dark .cursor__dot { background: var(--hubt-yellow); box-shadow: 0 0 0 2px var(--g-900); }
.cursor.is-dark.is-link .cursor__ring { background: rgba(249, 245, 16, .14); }

/* Tuyển sinh — phần dưới ảnh sinh viên nằm gọn trong vòng tròn (không còn đường cắt ngang) */
.v2adm__stage { container-type: inline-size; --D: min(92cqw, 560px); --r: calc(var(--D) / 2); }
.v2adm__disc, .v2adm__dots { width: var(--D); }
.v2adm__cut { position: absolute; left: 50%; bottom: 0; width: var(--D); height: 108%; translate: -50% 0; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--r)), transparent calc(100% - var(--r))), radial-gradient(circle at 50% calc(100% - var(--r)), #000 calc(var(--r) - 1px), transparent var(--r));
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--r)), transparent calc(100% - var(--r))), radial-gradient(circle at 50% calc(100% - var(--r)), #000 calc(var(--r) - 1px), transparent var(--r)); }
.v2adm__cut .v2adm__student { left: 50%; bottom: 0; height: 100%; translate: -50% 0; }
@media (max-width: 900px) { .v2adm__stage { --D: min(88cqw, 420px); } }
/* Tuyển sinh — đáy ảnh luôn nằm dưới mép vòng tròn kể cả khi ảnh trôi theo cuộn */
.v2adm__cut .v2adm__student { bottom: -56px; }

/* ==========================================================================
   Đối tác doanh nghiệp — hai dải logo chạy ngược chiều
   ========================================================================== */
.v2part { position: relative; overflow: hidden; padding-block: var(--v2-pad, 68px); background: #fff; }
.v2part__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.6vw, 48px); }
.v2part__head .v2title { max-width: none; }
.v2part__line { display: block; }
@media (min-width: 721px) { .v2part__line { white-space: nowrap; } }
.v2part__aside { display: grid; gap: 14px; justify-items: start; max-width: 440px; color: var(--ink-2); }
.v2part__rows { display: grid; gap: 14px; }
.plane { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }

.plane__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.plane__track { --mq-gap: 12px; display: flex; gap: var(--mq-gap); width: max-content; animation: marquee 70s linear infinite; }
/* Dải có 2 bản sao liền nhau: trượt đúng 1 bản (nửa dải + nửa khoảng cách) để vòng lặp không bị giật. */
@keyframes marquee { to { transform: translateX(calc(-50% - var(--mq-gap) / 2)); } }
.plane--rev .plane__track { animation-direction: reverse; animation-duration: 85s; }
.plane__viewport:hover .plane__track { animation-play-state: paused; }
.ptile { display: flex; align-items: center; gap: 12px; height: 84px; min-width: 200px; padding: 12px 22px 12px 14px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out), box-shadow .4s; }
a.ptile:hover { background: #fff; border-color: var(--hubt-green); transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(15, 42, 26, .5); }
.ptile__mono { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--g-900); color: var(--hubt-yellow); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 20px; letter-spacing: -.02em; }
.plane--rev .ptile__mono { background: var(--bronze-ink); color: #fff; }
.ptile__text { display: grid; gap: 2px; white-space: nowrap; }
.ptile__text strong { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 19px; letter-spacing: -.01em; color: var(--g-900); }
.ptile__text small { font-size: 12px; font-weight: 600; color: var(--muted); }
.ptile__logo { height: 58px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 720px) { .plane { grid-template-columns: 1fr; padding-left: 0; }  .ptile { height: 70px; min-width: 170px; } }
@media (prefers-reduced-motion: reduce) { .plane__track { animation: none; } .plane__viewport { overflow-x: auto; } }

/* ==========================================================================
   Chân trang — kiểu banner xanh (đồng bộ hero & Cựu sinh viên)
   ========================================================================== */
.site-footer--green { position: relative; isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .78); border-top: 0;
	background: radial-gradient(60% 80% at 12% 10%, #2b9a52 0%, rgba(43, 154, 82, 0) 55%), linear-gradient(160deg, #1a7a3e 0%, #166733 35%, #0d4a24 75%, #093619 100%); }
.site-footer__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer__glow { position: absolute; left: -6%; top: -30%; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(249, 245, 16, .16), transparent 62%); }
.site-footer--green .site-footer__drum { position: absolute; right: -10%; bottom: -40%; width: min(900px, 90vw); color: #fff; opacity: .07; z-index: auto; animation: spin 200s linear infinite; }
.fband { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px clamp(24px, 3vw, 48px); padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3.6vw, 44px); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.fband__logo { width: clamp(140px, 13vw, 200px); height: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .2)); }
.fband__kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hubt-yellow); margin-bottom: 8px; }
.fband__title { font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.fband__title em { display: block; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.01em; color: var(--hubt-yellow); font-variation-settings: "SOFT" 100, "WONK" 1; }
.fband__cta { display: grid; gap: 12px; justify-items: end; }
.fband__hotline { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); color: #fff; }
.fband__hotline .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--hubt-yellow); }
.fband__hotline span { display: grid; line-height: 1.05; }
.fband__hotline small { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.site-footer--green .footer-grid { padding-block: clamp(32px, 4vw, 52px); gap: 32px 40px; }
.footer-name { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 20px; line-height: 1.2; color: #fff; }
.footer-name > span { display: block; }
@media (min-width: 400px) { .footer-name > span { white-space: nowrap; } }
.site-footer--green .footer-motto { margin: 12px 0 18px; color: rgba(255, 255, 255, .85); font-size: 16px; }
.site-footer--green .footer-title { color: var(--hubt-yellow); }
.site-footer--green .footer-contact .icon { color: var(--hubt-yellow); }
.site-footer--green .footer-contact a, .site-footer--green .footer-links a { color: rgba(255, 255, 255, .85); }
.site-footer--green .footer-contact a:hover, .site-footer--green .footer-links a:hover { color: var(--hubt-yellow); }
.footer-apps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.footer-apps a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; color: #fff; transition: background-color .3s, border-color .3s, color .3s; }
.footer-apps a:hover { background: var(--hubt-yellow); border-color: var(--hubt-yellow); color: var(--g-900); }
.footer-apps .icon { color: var(--hubt-yellow); }
.footer-apps a:hover .icon { color: var(--g-900); }
.site-footer--green .socials a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.site-footer--green .socials a:hover { background: var(--hubt-yellow); border-color: var(--hubt-yellow); color: var(--g-900); }
.site-footer--green .footer-bottom { border-top-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .6); }
.site-footer--green .footer-gift { color: var(--hubt-yellow); }
.site-footer--green .to-top { background: var(--hubt-yellow); color: var(--g-900); }
.site-footer--green .to-top:hover { background: #fff; }
@media (max-width: 960px) { .fband { grid-template-columns: auto 1fr; } .fband__cta { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } }
@media (max-width: 560px) { .fband { grid-template-columns: 1fr; } .fband__cta { grid-auto-flow: row; } }

/* Đối tác — một hàng logo thật, thẻ trắng rộng */
.v2part .plane { grid-template-columns: 1fr; padding-left: 0; }
.v2part .plane__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.v2part .plane__track { --mq-gap: 16px; animation-duration: 55s; }
.v2part .ptile { height: 104px; min-width: 230px; justify-content: center; padding: 18px 28px; background: #fff; border-color: var(--line); box-shadow: 0 14px 30px -26px rgba(15, 42, 26, .45); }
.v2part .ptile__logo { height: 52px; max-width: 190px; object-fit: contain; }
@media (max-width: 720px) { .v2part .ptile { height: 84px; min-width: 180px; } .v2part .ptile__logo { height: 40px; max-width: 150px; } }

/* Khuê Văn Các — cắt từ logo trường (Photos/…HUBT.ai), dùng làm mặt nạ để đổi màu tùy ý */
.kvc-art { display: block; aspect-ratio: 1013 / 1400; background-color: currentColor; -webkit-mask: url(../img/khue-van-cac.webp) center / contain no-repeat; mask: url(../img/khue-van-cac.webp) center / contain no-repeat; }

/* ==========================================================================
   Cựu sinh viên — "Mỗi chấm là 100 cựu sinh viên"
   Nền sáng xanh lá nhạt (không trùng banner xanh của chân trang ngay dưới).
   Hàng đầu: tiêu đề | khẩu hiệu + nút. Dải chính (thẻ): Khuê Văn Các + con số vân chấm
   | ma trận chấm vẽ bằng canvas (main.js) sáng dần theo làn sóng tỏa từ Khuê Văn Các.
   ========================================================================== */
.v2alum, .layout-v2 .v2alum { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); padding-block: clamp(40px, 4.4vw, 64px);
	background: radial-gradient(70% 90% at 18% 38%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #eef6ef 0%, var(--sage) 100%); }
.v2alum__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2alum .v2alum__dots { background-image: radial-gradient(rgba(22, 103, 51, .14) 1.3px, transparent 1.6px);
	-webkit-mask-image: radial-gradient(55% 85% at 16% 64%, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 75%); mask-image: radial-gradient(55% 85% at 16% 64%, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 75%); }
.v2alum .v2alum__dots::after { background-image: radial-gradient(rgba(22, 103, 51, .07) 1px, transparent 1.4px); }
.v2alum__inner { position: relative; z-index: 2; }

/* Hàng đầu */
.v2alum__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; }
.v2alum__eyebrow { color: var(--hubt-green); }
.v2alum__h > span, .v2alum__h > em { display: block; }
.v2alum__h > em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.01em; color: var(--hubt-green); font-variation-settings: "SOFT" 100, "WONK" 1; }
/* Khẩu hiệu + lối vào là một khối liền (đường kẻ dài bằng hàng nút, căn trái) — đứng cạnh tiêu đề hay rơi xuống dưới đều ngay ngắn. */
.v2alum__aside { display: grid; gap: 14px; }
.v2alum__motto { padding-block: 8px; border-block: 1px solid rgba(22, 103, 51, .35); font-size: clamp(.95rem, .85rem + .35vw, 1.15rem); font-weight: 600; letter-spacing: .03em; color: var(--ink-2); }
.v2alum__actions { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.v2alum__actions a { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 28px -22px rgba(15, 42, 26, .45); color: var(--g-900); transition: border-color .3s, transform .4s var(--ease-out); }
.v2alum__actions a:hover { border-color: var(--hubt-green); transform: translateY(-3px); }
.v2alum__icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--hubt-yellow); color: var(--g-900); }
.v2alum__icon .icon { width: 17px; height: 17px; }
.v2alum__txt { display: grid; }
.v2alum__txt strong { font-size: 14px; white-space: nowrap; }
.v2alum__txt small { display: none; }
.v2alum__go { flex: none; width: 16px; height: 16px; color: var(--hubt-green); }

/* Dải chính */
.v2alum__band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 3.6vw, 56px); margin-top: clamp(22px, 2.6vw, 34px);
	padding: clamp(18px, 2vw, 28px) clamp(20px, 2.8vw, 40px); border-radius: 28px; background: rgba(255, 255, 255, .66); border: 1px solid rgba(22, 103, 51, .12); box-shadow: 0 30px 60px -44px rgba(15, 42, 26, .5); }
.v2alum__hub { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.v2alum__seal { position: relative; flex: none; width: clamp(64px, 6vw, 92px); }
.v2alum__seal::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(249, 245, 16, .34), rgba(249, 245, 16, .08) 45%, transparent 68%); pointer-events: none; }
.v2alum__seal .kvc-art { position: relative; color: var(--hubt-green); filter: drop-shadow(0 10px 18px rgba(15, 42, 26, .16));
	background-image: linear-gradient(105deg, transparent 40%, rgba(249, 245, 16, .9) 50%, transparent 60%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 130% 0; animation: kvc-gleam 7s ease-in-out 1.5s infinite; }
@keyframes kvc-gleam { 0% { background-position: 130% 0; } 35%, 100% { background-position: -30% 0; } }
.v2alum__numwrap { display: grid; justify-items: start; gap: 8px; }
.v2alum__num { font-family: var(--font-display); font-weight: 800; font-stretch: 72%; font-size: clamp(3.4rem, 1.2rem + 5.2vw, 7.4rem); line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
	color: transparent; background-image: radial-gradient(circle, var(--hubt-green) 1.6px, transparent 2.05px), linear-gradient(100deg, var(--hubt-green) 0 46%, rgba(22, 103, 51, .5) 80%, rgba(22, 103, 51, .38) 100%); background-size: 6px 6px, 100% 100%;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 8px 18px rgba(15, 42, 26, .1)); }
.v2alum__numlabel { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }

.v2alum__matrix { margin: 0; min-width: 0; }
.v2alum__canvas { display: block; width: 100%; height: 140px; touch-action: pan-y; }
.v2alum__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.v2alum__key { display: inline-flex; align-items: center; gap: 8px; margin-left: -8px; padding: 4px 12px 4px 8px; border: 0; border-radius: 999px; background: none; font: inherit; color: inherit; cursor: pointer; transition: background-color .25s; }
.v2alum__key:hover, .v2alum__key.is-on { background: rgba(22, 103, 51, .09); }
.v2alum__key i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hubt-green); }
.v2alum__key--gold i { background: #c99a06; box-shadow: 0 0 0 3px rgba(249, 245, 16, .4); }
.v2alum__key b, .v2alum__plus b { font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: 17px; color: var(--g-900); font-variant-numeric: tabular-nums; }
.v2alum__plus { display: inline-flex; align-items: center; gap: 8px; }
.v2alum__plus .icon { width: 16px; height: 16px; color: var(--bronze-ink); }
.v2alum__unit { flex-basis: 100%; font-size: 12px; color: var(--muted); }

/* Sóng sáng (mặc định) / tia sáng (?nen=hao-quang) tỏa từ sau Khuê Văn Các, nằm dưới thẻ */
.v2alum__ripples, .v2alum__rays { position: absolute; left: 50%; top: 50%; z-index: -1; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.v2alum__ripples { width: min(150vw, 1900px); }
.v2alum__ripples b { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(22, 103, 51, .1); }
.v2alum__ripples b:nth-of-type(1) { width: 22%; height: 22%; border-color: rgba(22, 103, 51, .2); }
.v2alum__ripples b:nth-of-type(2) { width: 42%; height: 42%; border-color: rgba(22, 103, 51, .13); }
.v2alum__ripples b:nth-of-type(3) { width: 66%; height: 66%; border-color: rgba(22, 103, 51, .08); }
.v2alum__ripples i { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(22, 103, 51, .34); box-shadow: 0 0 26px rgba(249, 245, 16, .4), inset 0 0 22px rgba(249, 245, 16, .18); opacity: 0; transform: scale(.08); animation: ripple 9s cubic-bezier(.2, .6, .35, 1) infinite; }
.v2alum__ripples i:nth-child(2) { animation-delay: 2.25s; }
.v2alum__ripples i:nth-child(3) { animation-delay: 4.5s; }
.v2alum__ripples i:nth-child(4) { animation-delay: 6.75s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.08); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(.8); } }
.v2alum__rays { width: 190vmax; background: repeating-conic-gradient(from 0deg, rgba(22, 103, 51, .09) 0deg 1.2deg, rgba(22, 103, 51, 0) 1.2deg 7.5deg);
	-webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .75) 12%, transparent 40%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .75) 12%, transparent 40%); animation: spin 160s linear infinite; }

@media (max-width: 1100px) {
	.v2alum__band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.v2alum__actions { display: grid; }
	.v2alum__band { padding: 18px 16px; border-radius: 22px; }
	.v2alum__seal { width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .v2alum__ripples i { animation: none !important; opacity: 0; } .v2alum__seal .kvc-art, .v2alum__rays { animation: none !important; } }

/* ==========================================================================
   Trang Tuyển sinh (page-templates/tpl-tuyen-sinh.php) — tiền tố ts-
   Hero xanh đậm + "vé vào HUBT", thanh mục lục dính, các chương nền kem / giấy / xanh nhạt.
   ========================================================================== */
.ts-sec { position: relative; padding-block: clamp(64px, 8vw, 120px); }
.ts-sec--paper { background: var(--paper); }
.ts-sec--sage { background: var(--sage); }
.ts-head { margin-bottom: clamp(28px, 4vw, 52px); }
.ts-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.ts-head__lead { max-width: 46ch; font-size: var(--fs-md); color: var(--muted); }
.ts-head__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ts-title { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: .95; letter-spacing: -.04em; color: var(--g-900); }
.ts-title em, .ts-hero__title em, .ts-adv__title em, .ts-contact__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.ts-title em { color: var(--hubt-green); }
.ts-source { margin-top: 18px; font-size: 13px; color: var(--muted); }
.ts-source a, a.ts-source { color: var(--hubt-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.ts-source { display: inline-flex; align-items: center; gap: 6px; }

/* Hero — nền sáng: xanh nhạt pha kem, ánh vàng góc phải, trống đồng đồng thau mờ */
.ts-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); padding-block: calc(var(--header-space) + clamp(28px, 4vw, 56px)) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line);
	background: radial-gradient(50% 65% at 90% 12%, rgba(249, 245, 16, .34), transparent 62%), radial-gradient(45% 60% at 0% 100%, rgba(127, 184, 160, .3), transparent 70%), linear-gradient(165deg, #fbfcf6 0%, var(--sage) 58%, #dfeee2 100%); }
.ts-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
.ts-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ts-hero__glow { position: absolute; left: 28%; top: -35%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 60%); }
.ts-hero__drum { position: absolute; right: -14%; top: 50%; width: min(980px, 105vw); translate: 0 -50%; color: var(--bronze); opacity: .2; animation: spin 180s linear infinite; }
.ts-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.ts-hero__eyebrow { color: var(--hubt-green); }
.ts-hero__title { font-family: var(--font-display); font-weight: 800; font-stretch: 76%; font-size: clamp(3.2rem, 1.6rem + 6vw, 8rem); line-height: .88; letter-spacing: -.05em; color: var(--g-900); }
.ts-hero__title em { display: block; color: var(--hubt-green); font-size: .82em; }
.ts-hero__lead { margin-top: 22px; max-width: 54ch; font-size: var(--fs-lg); color: var(--ink-2); }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ts-hero__actions .btn--yellow { box-shadow: 0 16px 30px -18px rgba(15, 42, 26, .55); }
.ts-hero__actions .btn--ghost { background: rgba(255, 255, 255, .75); }
.ts-hero__hotline { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--g-900); font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.ts-hero__hotline .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--hubt-yellow); color: var(--g-900); }
.ts-hero__hotline span { display: grid; line-height: 1.1; }
.ts-hero__hotline small { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-hero__hotline:hover { color: var(--hubt-green); }

/* Vé vào HUBT: phần chính + cuống vé (đếm ngược). Lỗ đục hai bên là mặt nạ trong suốt nên hợp mọi nền. */
.ts-pass { position: relative; color: var(--ink); filter: drop-shadow(0 28px 36px rgba(15, 42, 26, .16)) drop-shadow(0 2px 4px rgba(15, 42, 26, .06)); }
.ts-pass__main, .ts-pass__track { background: #fff; }
.ts-pass__main { padding: clamp(22px, 2.6vw, 30px); border-radius: 28px 28px 0 0; }
.ts-pass.has-stub .ts-pass__main { -webkit-mask: radial-gradient(circle at 0 100%, #0000 14px, #000 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 14px, #000 14.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 100%, #0000 14px, #000 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 14px, #000 14.5px) right / 51% 100% no-repeat; }
.ts-pass__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ts-pass__state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--sage); color: var(--hubt-green); }
.ts-pass__state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ts-pass__state--now i { background: var(--hubt-red); box-shadow: 0 0 0 0 rgba(225, 29, 42, .5); animation: ts-ping 1.8s var(--ease-out) infinite; }
.ts-pass__state--next { background: var(--bronze-3); color: var(--bronze-ink); }
.ts-pass__state--done { background: var(--paper-2); color: var(--muted); }
@keyframes ts-ping { 70% { box-shadow: 0 0 0 9px rgba(225, 29, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 42, 0); } }
.ts-pass__code { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.ts-pass__title { font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1; letter-spacing: -.03em; color: var(--g-900); }
.ts-pass__date { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; color: var(--hubt-green); }
.ts-pass__date .icon { width: 18px; height: 18px; }
.ts-pass__text { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.ts-pass__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--hubt-green); border-bottom: 1.5px solid currentColor; }
.ts-pass__link .icon { width: 16px; height: 16px; }
.ts-pass__stub { position: relative; padding: clamp(18px, 2.2vw, 24px) clamp(22px, 2.6vw, 30px); border-top: 2px dashed var(--line-2); background: #fffdf4;
	-webkit-mask: radial-gradient(circle at 0 0, #0000 14px, #000 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 14px, #000 14.5px) right / 51% 100% no-repeat;
	mask: radial-gradient(circle at 0 0, #0000 14px, #000 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 14px, #000 14.5px) right / 51% 100% no-repeat; }
.ts-pass__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-ink); }
.ts-pass__next { margin-top: 4px; font-weight: 700; color: var(--g-900); }
.ts-pass__cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ts-pass__cd span { display: grid; justify-items: center; padding: 10px 4px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ts-pass__cd b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); line-height: 1; color: var(--g-900); font-variant-numeric: tabular-nums; }
.ts-pass__cd small { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ts-pass__track { display: flex; gap: 6px; padding: 0 clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px); border-radius: 0 0 28px 28px; }
.ts-pass.has-stub .ts-pass__track { background: #fffdf4; }
.ts-pass__track li { flex: 1; height: 6px; border-radius: 999px; background: var(--line); }
.ts-pass__track .is-done { background: var(--hubt-green); }
.ts-pass__track .is-now { background: linear-gradient(90deg, var(--hubt-green), var(--hubt-yellow), var(--hubt-green)); background-size: 200% 100%; animation: ts-flow 2.4s linear infinite; }
@keyframes ts-flow { to { background-position: -200% 0; } }

.ts-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(15, 42, 26, .12); }
.ts-facts li { display: grid; gap: 4px; align-content: start; }
.ts-facts b { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--g-900); font-variant-numeric: tabular-nums; }
.ts-facts li:first-child b { color: var(--hubt-green); }
.ts-facts span { font-size: 14px; color: var(--muted); max-width: 26ch; }

/* Thanh mục lục dính: nằm dưới header khi header hiện, lên sát mép trên khi header ẩn */
.ts-nav { position: sticky; top: calc(var(--mast-h) + 20px); z-index: 40; background: rgba(251, 248, 241, .9); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); transition: top .6s var(--ease-out), box-shadow .3s; }
.site-header.is-hidden:not(.is-open):not(:focus-within) ~ .site-main .ts-nav { top: 0; }
.ts-nav.is-stuck { box-shadow: 0 14px 30px -24px rgba(15, 42, 26, .45); }
.ts-nav__list { display: flex; gap: 4px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.ts-nav__list::-webkit-scrollbar { display: none; }
.ts-nav__list a { display: block; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color .25s, color .25s; }
.ts-nav__list a:hover { background: var(--sage); color: var(--hubt-green); }
.ts-nav__list a[aria-current] { background: var(--g-900); color: #fff; }

.ts-notice { margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: linear-gradient(100deg, rgba(249, 245, 16, .2), rgba(249, 245, 16, .04)); border: 1px solid rgba(184, 145, 63, .35); }
.ts-notice .eyebrow { margin-bottom: 10px; color: var(--bronze-ink); }

/* 01 · Lịch */
.ts-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ts-step { position: relative; margin-top: 38px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ts-step::before { content: ""; position: absolute; top: -29px; left: 0; right: -16px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
.ts-step:last-child::before { right: 0; }
.ts-step__dot { position: absolute; top: -38px; left: 22px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 2px solid var(--line-2); }
.ts-step.is-done::before { background: var(--hubt-green); }
.ts-step.is-done .ts-step__dot { background: var(--hubt-green); border-color: var(--hubt-green); box-shadow: inset 0 0 0 4px var(--cream); }
.ts-step.is-now { border-color: var(--hubt-green); background: linear-gradient(180deg, #fff, #f3f9ef); box-shadow: 0 26px 50px -30px rgba(22, 103, 51, .55); }
.ts-step.is-now::before { background: linear-gradient(90deg, var(--hubt-green), var(--line-2)); }
.ts-step.is-now .ts-step__dot { background: var(--hubt-yellow); border-color: var(--hubt-green); box-shadow: 0 0 0 6px rgba(249, 245, 16, .35); }
.ts-step__state { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ts-step.is-now .ts-step__state { color: var(--hubt-red); }
.ts-step.is-next .ts-step__state { color: var(--bronze-ink); }
.ts-step__date { margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: var(--hubt-green); font-variant-numeric: tabular-nums; }
.ts-step__title { margin-top: 6px; font-size: 1.12rem; color: var(--g-900); }
.ts-step__text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ts-step.is-done .ts-step__title, .ts-step.is-done .ts-step__date { color: var(--muted); }

/* 02 · Phương thức */
.ts-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ts-method { display: flex; flex-direction: column; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s; }
.ts-method:hover { transform: translateY(-5px); border-color: var(--hubt-green); box-shadow: 0 28px 50px -34px rgba(15, 42, 26, .55); }
.ts-method__code { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; color: var(--hubt-green); }
.ts-method__code small { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ts-method__title { margin-top: 14px; font-size: 1.18rem; line-height: 1.2; color: var(--g-900); }
.ts-method__scale { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--sage); font-size: 12px; font-weight: 700; color: var(--g-700); }
.ts-method__calc { margin-top: 14px; margin-bottom: 18px; font-size: 15px; color: var(--ink-2); }
.ts-method__rule { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ts-method__rule .icon { margin-top: 3px; color: var(--hubt-green); }
.ts-bonus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ts-bonus li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--sage); border: 1px solid rgba(22, 103, 51, .14); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ts-bonus b { flex: none; min-width: 2.6ch; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.9rem; line-height: 1; color: var(--hubt-green); }

/* 03 · Ngành & điểm chuẩn */
.ts-finder { margin-bottom: 20px; }
.ts-table { overflow-x: auto; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ts-majors { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ts-majors thead th { padding: 12px 14px; background: var(--sage); color: var(--g-700); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; vertical-align: bottom; }
.ts-majors thead tr + tr th { background: var(--sage-2); padding-block: 8px 10px; }
.ts-majors thead tr:last-child th, .ts-majors thead th[rowspan] { border-bottom: 1px solid rgba(22, 103, 51, .16); }
.ts-majors thead abbr { text-decoration: none; cursor: help; }
.ts-majors thead .ts-majors__group { text-align: center; color: var(--hubt-green); border-bottom: 1px solid rgba(22, 103, 51, .16); }
.ts-majors tbody th, .ts-majors tbody td { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; text-align: left; }
.ts-majors tbody tr:first-child > * { border-top: 0; }
.ts-majors tbody tr { transition: background-color .2s; }
.ts-majors tbody tr:hover { background: #f5f9f3; }
.ts-majors tr.is-hidden { display: none; }
.ts-major { --tone: var(--g-kinh-te); min-width: 220px; box-shadow: inset 3px 0 0 var(--tone); font-weight: 400; }
.ts-major--cong-nghe-ky-thuat .ts-major { --tone: var(--g-cong-nghe); }
.ts-major--thiet-ke-kien-truc .ts-major { --tone: var(--g-thiet-ke); }
.ts-major--suc-khoe .ts-major { --tone: var(--g-suc-khoe); }
.ts-major--ngon-ngu .ts-major { --tone: var(--g-ngon-ngu); }
.ts-major a { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--g-900); }
.ts-major a:hover { color: var(--hubt-green); text-decoration: underline; text-underline-offset: 3px; }
.ts-major small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.ts-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--red-50); color: var(--red-700); font-size: 11px; font-weight: 700; }
.ts-code { font-weight: 600; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-combos { max-width: 230px; }
.ts-combos abbr { display: inline-block; margin: 2px 2px 2px 0; padding: 3px 7px; border-radius: 7px; background: var(--paper); color: var(--ink-2); font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: help; }
.ts-majors .ts-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-majors .ts-score { background: rgba(232, 241, 233, .45); font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--g-900); }
.ts-majors tbody tr:hover .ts-score { background: transparent; }
.ts-majors .ts-score.is-na { font-weight: 400; color: var(--line-2); }
.ts-fee { font-weight: 700; color: var(--bronze-ink); }

/* 04 · Hồ sơ */
.ts-dossier { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ts-dossier .ts-title { margin-bottom: clamp(20px, 3vw, 32px); }
.ts-checklist li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(15, 42, 26, .1); }
.ts-checklist .icon { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--hubt-green); color: #fff; }
.ts-checklist span { font-weight: 600; color: var(--g-900); line-height: 1.45; }
.ts-checklist small { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); }
.ts-warn { display: flex; gap: 12px; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: rgba(249, 245, 16, .22); border: 1px solid rgba(184, 145, 63, .35); font-size: 14.5px; color: var(--ink-2); }
.ts-warn .icon { margin-top: 2px; color: var(--bronze-ink); }
.ts-ways { display: grid; gap: 16px; }
.ts-way { padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.ts-way--online { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 100% 0, rgba(249, 245, 16, .32), transparent 60%), #fff; border: 2px solid var(--hubt-green); box-shadow: 0 26px 50px -34px rgba(22, 103, 51, .6); }
.ts-way__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hubt-green); }
.ts-way__title { margin: 6px 0 12px; font-weight: 800; font-stretch: 84%; font-size: clamp(1.45rem, 1.15rem + .8vw, 1.8rem); letter-spacing: -.02em; color: var(--g-900); }
.ts-way__note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.ts-way__facts li { display: flex; gap: 12px; padding: 8px 0; }
.ts-way__facts .icon { margin-top: 2px; color: var(--hubt-green); }
.ts-way__facts span { font-weight: 600; color: var(--g-900); }
.ts-way__facts small { display: block; font-weight: 400; color: var(--muted); }
.ts-way__facts a { font-weight: 700; color: var(--g-900); }
.ts-way__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }

/* 05 · Học phí */
.ts-fees { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ts-calc { padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ts-calc__pick { display: grid; gap: 8px; }
.ts-calc__pick > span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-calc select { width: 100%; height: 54px; padding: 0 46px 0 16px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166733' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; font-weight: 700; font-size: 16px; color: var(--g-900); appearance: none; -webkit-appearance: none; cursor: pointer; }
.ts-calc select:focus { outline: none; border-color: var(--hubt-green); box-shadow: 0 0 0 4px var(--navy-100); }
.ts-calc__lines { margin-top: 18px; }
.ts-calc__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: var(--ink-2); transition: opacity .25s; }
.ts-calc__lines b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-calc__fee b { font-family: var(--font-display); font-size: 17px; color: var(--g-900); }
.ts-calc__lines li.is-off { opacity: .42; text-decoration: line-through; }
.ts-calc__opt { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.ts-calc__opt input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--hubt-green); }
.ts-calc__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 18px 0 14px; padding: 16px 20px; border-radius: 18px; background: rgba(249, 245, 16, .3); border: 1px solid rgba(184, 145, 63, .35); color: var(--ink-2); font-weight: 600; }
.ts-calc__total b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; color: var(--g-900); font-variant-numeric: tabular-nums; }
.ts-tiers { display: grid; gap: 8px; }
.ts-tiers li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ts-tier__amount { grid-row: span 2; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--g-900); }
.ts-tier__amount small { display: block; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ts-tier__bar { display: block; width: var(--w, 50%); height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--hubt-green), var(--bronze)); }
.ts-tier__names { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Chương trình tiên tiến */
.ts-adv { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 52px); border-radius: 32px; color: rgba(255, 255, 255, .84); background: radial-gradient(60% 90% at 100% 0, rgba(249, 245, 16, .24), transparent 60%), var(--hubt-green); }
.ts-adv .eyebrow { color: var(--hubt-yellow); margin-bottom: 14px; }
.ts-adv__title { margin-bottom: 14px; font-weight: 800; font-stretch: 80%; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem); line-height: 1; letter-spacing: -.035em; color: #fff; }
.ts-adv__title em { display: block; color: var(--hubt-yellow); }
.ts-adv__majors { margin-top: 12px; font-size: 14.5px; }
.ts-adv__majors a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
.ts-adv__majors a:hover { text-decoration-color: var(--hubt-yellow); }
.ts-adv__facts { display: grid; gap: 10px; }
.ts-adv__facts li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 14.5px; line-height: 1.4; }
.ts-adv__facts b { flex: none; min-width: 3.4ch; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.9rem; line-height: 1; color: var(--hubt-yellow); }
.ts-adv__drum { position: absolute; z-index: -1; right: -140px; bottom: -200px; width: 520px; color: var(--hubt-yellow); opacity: .08; animation: spin 160s linear infinite; }

/* 06 · Nhập học */
.ts-enroll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ts-enroll li { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ts-enroll__n { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--hubt-green); }
.ts-enroll h3 { margin: 12px 0 6px; font-size: 1.08rem; color: var(--g-900); }
.ts-enroll p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ts-orient { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.ts-orient__title { font-weight: 800; font-stretch: 84%; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; color: var(--g-900); margin-bottom: 12px; }
.ts-orient__head p { color: var(--ink-2); font-size: 15px; }
.ts-orient__head a { color: var(--hubt-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ts-orient__days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ts-orient__days li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ts-orient__days time { flex: none; width: 62px; text-align: center; }
.ts-orient__days time b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; color: var(--g-900); }
.ts-orient__days time small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ts-orient__days span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ts-orient__days .is-done { opacity: .5; }
.ts-orient__days .is-now { border-color: var(--hubt-green); background: rgba(249, 245, 16, .22); }
.ts-docs { margin-top: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ts-docs summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; font-weight: 700; color: var(--g-900); list-style: none; cursor: pointer; }
.ts-docs summary::-webkit-details-marker { display: none; }
.ts-docs summary > .icon:first-child { color: var(--hubt-green); }
.ts-docs__chev { margin-left: auto; transition: rotate .3s var(--ease-out); }
.ts-docs[open] .ts-docs__chev { rotate: 180deg; }
.ts-docs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; padding: 0 22px 6px 44px; list-style: decimal; }
.ts-docs__list li { padding: 6px 0; font-size: 14.5px; color: var(--ink-2); }
.ts-docs__list li::marker { color: var(--hubt-green); font-weight: 700; }
.ts-docs .ts-source { margin: 6px 22px 18px; }

/* 07 · Thông báo + hệ khác */
.ts-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ts-board .ts-title { margin-bottom: clamp(20px, 3vw, 32px); }
.ts-news { margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.ts-news a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "date cat go" "date title go"; gap: 2px 16px; align-items: center; padding: 16px 6px; border-top: 1px solid var(--line); transition: background-color .25s, padding .35s var(--ease-out); }
.ts-news a:hover { background: var(--sage); padding-inline: 14px; }
.ts-news time { grid-area: date; font-weight: 700; font-size: 13.5px; color: var(--hubt-green); font-variant-numeric: tabular-nums; }
.ts-news__cat { grid-area: cat; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-news__title { grid-area: title; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--g-900); }
.ts-news__go { grid-area: go; color: var(--muted); transition: transform .35s var(--ease-out), color .25s; }
.ts-news a:hover .ts-news__go { color: var(--hubt-green); transform: translate(3px, -3px); }
.ts-board__programs { padding: clamp(20px, 3vw, 28px); border-radius: 26px; background: var(--paper); }
.ts-board__sub { margin-bottom: 10px; font-weight: 800; font-stretch: 84%; font-size: 1.4rem; color: var(--g-900); }
.ts-programs a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; transition: background-color .25s; }
.ts-programs a:hover { background: #fff; }
.ts-programs__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--hubt-green); transition: background-color .25s, color .25s; }
.ts-programs a:hover .ts-programs__icon { background: var(--hubt-green); color: #fff; }
.ts-programs b { display: block; font-size: 15.5px; color: var(--g-900); }
.ts-programs small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* 08 · Hỏi đáp */
.ts-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ts-faq__head { position: sticky; top: 140px; }
.ts-faq__head .ts-head__lead { margin-top: 16px; }
.ts-faq__head .btn { margin-top: 22px; }
.ts-qa { border-bottom: 1px solid var(--line-2); }
.ts-qa:first-child { border-top: 1px solid var(--line-2); }
.ts-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.3; color: var(--g-900); list-style: none; cursor: pointer; }
.ts-qa summary::-webkit-details-marker { display: none; }
.ts-qa summary:hover { color: var(--hubt-green); }
.ts-qa summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background-color .3s, border-color .3s; }
.ts-qa summary i::before, .ts-qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--g-900); transition: rotate .35s var(--ease-out), background-color .3s; }
.ts-qa summary i::after { rotate: 90deg; }
.ts-qa[open] summary i { background: var(--g-900); border-color: var(--g-900); }
.ts-qa[open] summary i::before, .ts-qa[open] summary i::after { background: #fff; }
.ts-qa[open] summary i::after { rotate: 0deg; }
.ts-qa p { padding: 0 56px 22px 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* 09 · Liên hệ — nền xanh nhạt, tách khỏi chân trang xanh đậm */
.ts-contact { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 8vw, 112px); color: var(--ink-2); background: radial-gradient(45% 70% at 100% 100%, rgba(249, 245, 16, .32), transparent 65%), var(--sage); }
.ts-contact__drum { position: absolute; z-index: -1; left: -220px; top: -240px; width: 720px; color: var(--hubt-green); opacity: .07; animation: spin 200s linear infinite; }
.ts-contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ts-contact__title { font-weight: 800; font-stretch: 78%; font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem); line-height: .94; letter-spacing: -.045em; color: var(--g-900); }
.ts-contact__title em { display: block; color: var(--hubt-green); }
.ts-contact__hotline { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; color: var(--g-900); }
.ts-contact__hotline .icon { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: var(--hubt-yellow); color: var(--g-900); box-shadow: 0 14px 30px -14px rgba(15, 42, 26, .5); }
.ts-contact__hotline span { display: grid; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ts-contact__hotline small { margin-bottom: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ts-contact__hotline:hover span { color: var(--hubt-green); }
.ts-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ts-contact .btn--ghost { background: #fff; }
.ts-contact__lines { padding: clamp(8px, 2vw, 16px) clamp(20px, 3vw, 32px); border-radius: 28px; background: #fff; box-shadow: var(--shadow-sm); }
.ts-contact__lines li { padding: 16px 0; }
.ts-contact__lines li + li { border-top: 1px solid var(--line); }
.ts-contact__lines p:first-child { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-contact__nums { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ts-contact__nums a { font-weight: 700; font-size: 17px; color: var(--g-900); font-variant-numeric: tabular-nums; }
.ts-contact__nums a:hover { color: var(--hubt-green); }
.ts-contact__addr { color: var(--g-900); font-weight: 600; }

@media (max-width: 1100px) {
	.ts-methods, .ts-bonus, .ts-enroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ts-fees, .ts-adv, .ts-orient, .ts-faq, .ts-board { grid-template-columns: minmax(0, 1fr); }
	.ts-faq__head { position: static; }
}
@media (max-width: 900px) {
	.ts-hero__grid, .ts-dossier, .ts-contact__grid { grid-template-columns: minmax(0, 1fr); }
	.ts-hero__grid { align-items: start; }
	.ts-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ts-docs__list { grid-template-columns: minmax(0, 1fr); }

	/* Bảng ngành thành thẻ */
	.ts-table { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.ts-majors, .ts-majors tbody, .ts-majors th, .ts-majors td { display: block; }
	.ts-majors thead { display: none; }
	.ts-majors tbody { display: grid; gap: 12px; }
	.ts-majors tbody tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 8px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
	.ts-majors tbody tr:hover { background: #fff; }
	.ts-majors tbody tr.is-hidden { display: none; }
	.ts-majors tbody th, .ts-majors tbody td, .ts-majors .ts-num { padding: 0; border: 0; text-align: left; }
	.ts-majors .ts-score { background: none; }
	.ts-majors tbody th.ts-major { grid-column: 1 / -1; min-width: 0; padding: 0 0 12px 12px; border-bottom: 1px dashed var(--line-2); }
	.ts-majors td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
	/* Hàng 1: mã ngành · chỉ tiêu · học phí — hàng 2: 4 điểm chuẩn — hàng 3: tổ hợp */
	.ts-majors td { grid-column: span 4; order: 1; }
	.ts-majors .ts-fee { order: 2; }
	.ts-majors .ts-score { grid-column: span 3; order: 3; padding-top: 10px; border-top: 1px dashed var(--line); }
	.ts-majors .ts-combos { grid-column: 1 / -1; order: 4; max-width: none; }
}
@media (max-width: 640px) {
	.ts-methods, .ts-bonus, .ts-enroll, .ts-orient__days { grid-template-columns: minmax(0, 1fr); }
	.ts-hero__actions .btn { flex: 1 1 100%; }
	.ts-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ts-step { margin: 0 0 0 34px; }
	.ts-step::before { top: 0; bottom: -12px; left: -25px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 11px); }
	.ts-step:last-child::before { bottom: auto; height: 24px; }
	.ts-step.is-now::before { background: var(--hubt-green); }
	.ts-step__dot { top: 22px; left: -34px; }
	.ts-news a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date go" "cat go" "title go"; }
	.ts-qa p { padding-right: 0; }
	.ts-calc__lines li { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .ts-pass__track .is-now, .ts-pass__state--now i { animation: none !important; } }