/*
 * Nền tảng: reset, biến :root, chữ, lưới, nút, tiện ích, hiệu ứng hiện dần
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
}

/* Chi?u cao header l? m?t con s? 4 ch? kh?c ph? thu?c v?o (panel mega, backdrop,
   drawer, offset cu?n trong nav.js) ? gi? ? ??ng m?t bi?n. */
:root {
	/* Site luôn giao diện sáng (header navy + logo trắng). Không để OS/browser
	   dark mode tự đảo ảnh SVG — nếu không logo trắng thành đen trên navy. */
	color-scheme: only light;

	--tri-header-h: 80px;
	/* Ảnh orbit kéo âm → bù bằng padding đáy section để nhân vật đụng sát mép band. */
	--tri-section-pb: 32px;
	--tri-section-px: 16px;
	/* Thanh cố định đáy màn; 0 từ 1025px vì lúc đó thanh bị ẩn. */
	--tri-bottombar-h: 62px;

	/* Chiều cao thanh quản trị của WordPress. 0 khi khách xem, chỉ khác 0
	   khi chính mình đang đăng nhập — xem khối .admin-bar ngay dưới. */
	--tri-adminbar: 0px;

	/*
	 * Lưới 12 cột toàn site — mọi màn cùng gốc.
	 * Span dùng 100% (parent full-bleed), không dùng 100vw/cqw —
	 * tránh header co nội dung / lệch khi zoom hoặc container query = 0.
	 *   --tri-frame  (≥1025): 8 cột + 9 gutter  → nội dung page
	 *   --tri-chrome (≥1025): 10 cột + 9 gutter → header / footer / mega
	 *   ≤1024: cả hai = full − padding 2 bên
	 *   >4K: body khóa 3840
	 *
	 * Tham chiếu (frame 8 / chrome 10 ≈):
	 *   1440 Laptop L → 993 / 1197
	 *   1920 FHD      → 1313 / 1597
	 *   2560 2K       → 1740 / 2120
	 *   3840 4K       → 2593 / 3197
	 */
	--tri-grid-gutter: 20px;
	--tri-vp-cap: 3840px;
	--tri-vp: min(100vw, var(--tri-vp-cap));
	--tri-col: calc((var(--tri-vp) - 11 * var(--tri-grid-gutter)) / 12);
	--tri-span-1: calc((100% - 11 * var(--tri-grid-gutter)) * 1 / 12 + 0 * var(--tri-grid-gutter));
	--tri-span-2: calc((100% - 11 * var(--tri-grid-gutter)) * 2 / 12 + 1 * var(--tri-grid-gutter));
	--tri-span-3: calc((100% - 11 * var(--tri-grid-gutter)) * 3 / 12 + 2 * var(--tri-grid-gutter));
	--tri-span-4: calc((100% - 11 * var(--tri-grid-gutter)) * 4 / 12 + 3 * var(--tri-grid-gutter));
	--tri-span-6: calc((100% - 11 * var(--tri-grid-gutter)) * 6 / 12 + 5 * var(--tri-grid-gutter));
	--tri-span-8: calc((100% - 11 * var(--tri-grid-gutter)) * 8 / 12 + 9 * var(--tri-grid-gutter));
	--tri-span-10: calc((100% - 11 * var(--tri-grid-gutter)) * 10 / 12 + 9 * var(--tri-grid-gutter));
	--tri-span-12: calc(100% - 0px);
	--tri-frame: calc(100% - (2 * var(--tri-section-px)));
	--tri-chrome: var(--tri-frame);
	/* Độ rộng fade sương 2 mép (partners + carousel course opt-in). */
	--tri-mist: clamp(32px, 6vw, 140px);

	/*
	 * Fluid neo 1440 — pattern: clamp(MIN, calc(N / 1440 * var(--tri-vp)), MAX)
	 * ≤1024: base cố định = đúng px thiết kế (trừ heading preset hơi hạ cho mobile).
	 * ≥1025: preferred = N × min(vw,4K) / 1440.
	 *
	 * Bảng (min | @1440 | max):
	 *   small    13 | 14 | 15
	 *   medium   15 | 16 | 18
	 *   large    18 | 20 | 24
	 *   x-large  28 | 32 | 48
	 *   xx-large 32 | 40 | 56
	 *   text-12  11 | 12 | 13
	 *   text-13  12 | 13 | 14
	 *   text-15  14 | 15 | 17
	 *   text-17  15 | 17 | 19
	 *   text-18  16 | 18 | 22
	 *   text-22  18 | 22 | 28
	 *   text-26  22 | 26 | 36
	 *   text-35  28 | 35 | 52
	 *   section-px  24 | 32 | 40
	 *   section-pb  48 | 64 | 80
	 *   hero-h      480 | 600 | 720
	 *   hero-short  360 | 450 | 540
	 * Badge ≤11px / font-size:0 / em tương đối: KHÔNG fluid.
	 * Vòng skill: type/icon/pill fluid qua --tri-skill-s (neo frame / --tri-vp).
	 */
	--tri-type-ref: 1440;
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--medium: 16px;
	--wp--preset--font-size--large: 18px;
	--wp--preset--font-size--x-large: 28px;
	--wp--preset--font-size--xx-large: 32px;
	--tri-text-12: 12px;
	--tri-text-13: 13px;
	--tri-text-15: 15px;
	--tri-text-17: 17px;
	--tri-text-18: 18px;
	--tri-text-22: 22px;
	--tri-text-26: 26px;
	--tri-text-35: 35px;
	/* Hero mặc định mobile; ≥1025 ghi đè clamp. */
	--tri-hero-h-fluid: 320px;
	--tri-hero-h-short-fluid: 260px;
	--tri-hero-h-blank-fluid: 220px;
}

/* Thanh quản trị WordPress. Header và menu sổ bám --tri-adminbar để nằm
   dưới thanh đó khi nó đang cố định.
   Từ 783px thanh cao 32px, từ 601px đến 782px cao 46px.
   Dưới 601px WordPress để thanh position: absolute — kéo trang là nó đi mất.
   Giữ cứng 46px lúc ấy sẽ thành một dải trống trên header và menu sổ.
   JS (nav.js) thu offset dần theo scrollY, hết thanh thì về 0. */
body.admin-bar {
	--tri-adminbar: 46px;
}

@media screen and (min-width: 783px) {
	body.admin-bar {
		--tri-adminbar: 32px;

	}
}

@media screen and (max-width: 600px) {
	body.admin-bar {
		--tri-adminbar: 0px;

	}
}

@media (min-width: 768px) {
	:root {
		--tri-section-pb: 48px;
		--tri-section-px: 24px;
		--tri-hero-h-fluid: 460px;
		--tri-hero-h-short-fluid: 380px;
		--tri-hero-h-blank-fluid: 380px;

	}
}

body {
	width: 100%;
	max-width: var(--tri-vp-cap);
	margin-inline: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: var(--tri-bottombar-h);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

/* Reveal trượt cắt ở main. Header fixed + padding-top dưới đây chừa chỗ banner. */
.tri-main {
	max-width: 100%;
	overflow-x: clip;
	/* Header fixed không chiếm flow — chừa đúng --tri-header-h để banner không bị che. */
	padding-top: var(--tri-header-h);
}

img {
	max-width: 100%;
	height: auto;
	/* Không bắt kéo/thả ảnh — kéo carousel (course, marquee…) mượt hơn. */
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding-left: 1.1rem;
}

.tri-wrap {
	width: var(--tri-frame);
	max-width: 100%;
	margin-inline: auto;
}

.tri-drawer a.tri-btn {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0 24px;
}

.tri-drawer a.tri-btn:hover,
.tri-drawer a.tri-btn:focus-visible {
	background: var(--wp--preset--color--orange-hover);
	color: var(--wp--preset--color--white);
}

.tri-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--wp--custom--control--height);
	min-height: var(--wp--custom--control--height);
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-ui);
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease, box-shadow var(--wp--custom--motion--duration-mid) ease, opacity var(--wp--custom--motion--duration-mid) ease;
}

.tri-btn--orange {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

.tri-btn--orange:hover,
.tri-btn--orange:focus-visible {
	background: var(--wp--preset--color--orange-hover);
	color: var(--wp--preset--color--white);
}

.tri-btn--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-btn--navy:hover,
.tri-btn--navy:focus-visible {
	background: var(--wp--preset--color--navy-hover);
	color: var(--wp--preset--color--white);
}

.tri-btn--white {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
}

.tri-btn--white:hover,
.tri-btn--white:focus-visible {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--navy);
}

/* Primary filled hover for CTA-style anchors (Ant Design primary pattern) */
a.tri-btn:hover,
a.tri-btn:focus-visible {
	outline: none;
}

/* Pulse scale cho CTA đăng ký / tư vấn — chỉ khi có class tri-btn--pulse. */
@keyframes tri-cta-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.06);
	}
}

.tri-btn--pulse {
	animation: tri-cta-pulse 1.4s ease-in-out infinite;
}

.tri-section {
	padding: var(--tri-section-pb) var(--tri-section-px);
}

/* 4 nút dưới banner trang chủ: mặc định trắng; hover = navy như "Đăng ký học thử". */
.tri-banner__ctas .tri-btn,
.tri-banner__ctas .tri-btn--white,
.tri-banner__ctas .tri-btn--navy,
.tri-banner__ctas .tri-btn--orange {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
}

.tri-banner__ctas .tri-btn:hover,
.tri-banner__ctas .tri-btn:focus-visible,
.tri-banner__ctas .tri-btn--white:hover,
.tri-banner__ctas .tri-btn--white:focus-visible,
.tri-banner__ctas .tri-btn--navy:hover,
.tri-banner__ctas .tri-btn--navy:focus-visible,
.tri-banner__ctas .tri-btn--orange:hover,
.tri-banner__ctas .tri-btn--orange:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.tri-band--ice {
	background-image: linear-gradient(208.81deg, var(--wp--preset--color--white) 18.9%, var(--wp--preset--color--ice) 81%);
}

.tri-band--surface {
	background: var(--wp--preset--color--surface);
}

.tri-ph--stat {
	height: 80px;
	margin-top: 16px;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--placeholder);
}

.tri-cards-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: var(--tri-frame);
	margin: 0 auto;
}

/* Chữ trông như h3 nhưng không phải đề mục — dùng cho tên trong thẻ lặp
   (dải chạy, bản chép aria-hidden, thẻ giảng viên đang ẩn) để trang không
   đẻ ra hàng trăm h3. Class riêng của từng thẻ đặt cỡ chữ / lề. */
.tri-h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: 1.17em;
	font-weight: 800;
}

.tri-h {
	margin: 0 0 16px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
}

.tri-h--center {
	text-align: center;
}

.tri-sub {
	margin: 0 auto 24px;
	max-width: min(900px, var(--tri-frame));
	text-align: center;
	white-space: pre-line;
}

.tri-lead {
	max-width: 280px;
	font-weight: 700;
}

.tri-accent,
.tri-h__accent {
	color: var(--wp--preset--color--action);
}

.tri-grid-2,
.tri-about {
	display: grid;
	gap: 32px;
}

.tri-intro__copy .tri-h {
	margin-bottom: 0;
}

.tri-ph {
	background: var(--wp--preset--color--placeholder);
	border-radius: var(--wp--custom--radius--field);
	overflow: hidden;
}

/* Ô lơ lửng giờ có ảnh thật bên trong; ảnh phủ kín ô và bo theo ô. */
.tri-mosaic .tri-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tri-ph--tall,
.tri-ph--short,
.tri-about__book,
.tri-about__headphones {
	position: absolute;
	display: block;
}

.tri-ph--tall {
	z-index: 1;
	left: 0;
	top: 0;
	width: calc(var(--tri-card1-w) / var(--tri-stage-w) * 100%);
	height: calc(var(--tri-card1-h) / var(--tri-stage-h) * 100%);
	animation: tri-bob 4s ease-in-out infinite;
}

.tri-ph--short {
	z-index: 2;
	left: calc((var(--tri-card1-w) - var(--tri-overlap-x)) / var(--tri-stage-w) * 100%);
	top: calc((var(--tri-card1-h) - var(--tri-overlap-y)) / var(--tri-stage-h) * 100%);
	width: calc(var(--tri-card2-w) / var(--tri-stage-w) * 100%);
	height: calc(var(--tri-card2-h) / var(--tri-stage-h) * 100%);
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--white);
	animation: tri-bob 4.6s ease-in-out infinite 1.2s;
}

@keyframes tri-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.tri-ph--card {
	min-height: 180px;
}

.tri-ph--photo {
	min-height: 280px;
}

.tri-ph--teacher {
	height: 169px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05);
}

.tri-ph--press {
	display: none;
	width: 324px;
	height: 240px;
}

.tri-ph--press-lg {
	display: block;
	width: min(419px, 100%);
	height: 250px;
	margin-inline: auto;
}

.tri-ph--news {
	width: 200px;
	height: 220px;
	flex-shrink: 0;
	border-radius: 14px;
}

.tri-ph--cert {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* Nền Mask group Figma: khoá tiêu biểu + phương pháp + đội ngũ + tầm nhìn. */
.tri-section:has(.tri-featured),
.tri-section:has(.tri-duo--start),
.tri-section--teachers,
.tri-section:has(.tri-vision) {
	background-color: #f7fbfe;
	background-image: url("../../images/khoa-hoc/nen-khoa-hoc-tieu-bieu-mask.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.tri-section:has(.tri-featured) > .tri-h {
	color: var(--wp--preset--color--navy);
}

.tri-featured__panel .tri-btn {
	width: 100%;
	max-width: 260px;
}

.tri-featured__preview .tri-btn {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

@keyframes tri-marquee-ltr {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes tri-marquee-rtl {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Bản 2: cùng bố cục Why 1, vòng tròn nằm sau nhân vật. Nền = đúng dải
   navy của .tri-scta-strip (tone navy: cam loé góc phải trên, xanh loé góc
   trái dưới, 1646b4 → 0d2f86 → navy) cho đậm như thiết kế, phủ texture sọc
   why-2-soc.png lên trên bằng multiply: ảnh gần trắng nên phần trắng giữ
   nguyên màu navy, chỉ vệt sọc tối nhẹ (soft-light cũ làm cả nền bạc đi). */
.tri-section--why-2 {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--navy);
	background-image:
		url("../../images/why/why-2-soc.png"),
		radial-gradient(520px 220px at 92% -10%, rgba(236, 98, 7, 0.32), transparent 68%),
		radial-gradient(420px 200px at 8% 110%, rgba(84, 156, 255, 0.22), transparent 70%),
		linear-gradient(120deg, #1646b4 0%, #0d2f86 48%, var(--wp--preset--color--navy) 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover, auto, auto, cover;
	background-blend-mode: multiply, normal, normal, normal;
}

.tri-section--why-2 .tri-h,
.tri-section--why-2 .tri-sub {
	color: var(--wp--preset--color--white);
}

.tri-navy-strip--tips {
	background: var(--wp--preset--color--orange);
}

.tri-navy-strip--tips .tri-navy-strip__label h2,
.tri-navy-strip--tips .tri-navy-strip__label p {
	color: var(--wp--preset--color--white);
}

.tri-about__copy .tri-h {
	margin-bottom: 0;
}

.tri-pills {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 24px;
}

.tri-pills__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Cham tron + duong ke chi ve khi 5 pill nam duoc tron mot hang — xem @media 1025. */
.tri-pills__dot {
	display: none;
}

.tri-pill {
	height: 35px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.tri-pill.is-active {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Đường kẻ + mũi tên trang trí (::before/::after) và chấm dưới mỗi pill
   chỉ hiện ≥1025px — xem @media trong khối pills. .tri-pills__fill giữ
   trong markup (ẩn) cho tương thích; không còn vệt tiến trình chạy. */
.tri-pills__fill {
	display: none;
	position: absolute;
	left: 0;
	bottom: 13px;
	height: 2px;
	width: 0;
	background: var(--wp--preset--color--navy);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.tri-pills__fill {
		display: none !important;

	}
}

.tri-pill__label,
.tri-pill__chev {
	pointer-events: none;
}

.tri-pill__chev {
	display: none;
}

@media (max-width: 767px) {
	.tri-pills,
		.tri-pills__item {
		display: contents;

	}

	.tri-pills__dot,
		.tri-pills__fill {
		display: none !important;

	}

	.tri-pill,
		.tri-stage {
		order: var(--tri-road-order);

	}

	/* Inactive: cùng thẻ option/course đóng của .tri-picker */
	.tri-pill {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		height: auto;
		min-height: 48px;
		padding: 10px 12px 10px 16px;
		border: 1.5px solid transparent;
		border-radius: 16px;
		background-color: var(--wp--preset--color--white);
		background-image: linear-gradient(
			165deg,
			var(--wp--preset--color--white) 0%,
			color-mix(in srgb, var(--wp--preset--color--ice) 32%, white) 100%
		);
		color: var(--wp--preset--color--navy);
		box-shadow: 0 4px 14px rgba(9, 31, 91, 0.07);
		font-size: var(--wp--preset--font-size--small);
		text-align: left;
		text-transform: none;

	}

	.tri-pill:hover:not(.is-active) {
		border-color: var(--wp--preset--color--action);
		background-color: color-mix(in srgb, var(--wp--preset--color--ice) 18%, white);
		background-image: linear-gradient(
			165deg,
			color-mix(in srgb, var(--wp--preset--color--ice) 18%, white) 0%,
			var(--wp--custom--color--ice-soft) 100%
		);

	}

	/* Active: cùng accordion course[open] của .tri-picker — navy → action */
	.tri-pill.is-active {
		border-color: transparent;
		border-radius: 16px 16px 0 0;
		background-color: var(--wp--preset--color--navy);
		background-image: linear-gradient(
			160deg,
			var(--wp--preset--color--navy) 0%,
			color-mix(in srgb, var(--wp--preset--color--navy) 70%, var(--wp--preset--color--action)) 100%
		);
		color: var(--wp--preset--color--white);
		box-shadow: none;

	}

	.tri-pill__label {
		flex: 1;
		min-width: 0;

	}

	.tri-pill__chev {
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);

	}

	.tri-pill__chev::before {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 2px solid var(--wp--preset--color--white);
		border-bottom: 2px solid var(--wp--preset--color--white);
		transform: rotate(-45deg);
		margin-left: -2px;

	}

	.tri-pill.is-active .tri-pill__chev {
		background: var(--wp--preset--color--white);

	}

	.tri-pill.is-active .tri-pill__chev::before {
		border-color: var(--wp--preset--color--navy);
		transform: rotate(45deg);
		margin-left: 0;
		margin-top: -2px;

	}
}

@media (max-width: 389px) {
	.tri-pill {
		min-height: 44px;
		padding: 8px 10px 8px 12px;

	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.tri-pill {
		min-height: 52px;
		padding: 12px 14px 12px 18px;
		font-size: var(--wp--preset--font-size--medium);

	}
}

.tri-duo--end .tri-duo__intro .tri-h {
	text-align: right;
}

.tri-duo__intro .tri-lead {
	max-width: 36ch;
	margin: 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.tri-duo--start .tri-duo__intro .tri-lead {
	color: var(--wp--preset--color--navy);
}

.tri-duo--end .tri-duo__intro .tri-lead {
	color: var(--wp--custom--color--ink-strong);
}

.tri-card,
.tri-panel {
	padding: 16px 20px 20px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--control);
	box-shadow: 0 4px 26px rgba(0, 0, 0, 0.08);
}

.tri-card__bar {
	height: 6px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--navy);
}

.tri-card__row {
	display: flex;
	gap: 12px;
}

.tri-card h3,
.tri-panel h3,
.tri-teacher h3,
.tri-teacher__name {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
}

.tri-panel--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-panel--quote {
	position: relative;
	background: var(--wp--custom--color--ice-soft);
	color: var(--wp--preset--color--navy);
}

/* Figma: hai gi?t navy 52?31, canh gi?a th? v? n?m ?? l?n m?p tr?n
   (n?a ? ngo?i, n?a ? trong). Kh?ng c? v?ng tr?n n?n. */
.tri-panel__quote-icon {
	position: absolute;
	left: 50%;
	top: 0;
	width: 52px;
	height: 31px;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--navy);
	-webkit-mask: url(../../images/icon-quote.svg) center / contain no-repeat;
	mask: url(../../images/icon-quote.svg) center / contain no-repeat;
	/* D?u " trong markup ch? l? d? ph?ng khi mask kh?ng ch?y ? gi?u ?i. */
	font-size: 0;
}

.tri-panel--quote p {
	margin: 0;
	font-style: italic;
	line-height: var(--wp--custom--line-height--body, 1.6);
}

.tri-teacher .tri-ph--photo {
	min-height: 0;
	aspect-ratio: 452 / 194;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

.tri-navy-strip {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 100%;
	overflow-x: hidden;
	padding: clamp(48px, calc(56 / var(--tri-type-ref) * var(--tri-vp)), 72px) 16px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--surface);
}

.tri-navy-strip__label h2,
.tri-navy-strip__label p {
	margin: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: 700;
	text-transform: uppercase;
}

.tri-navy-strip__label h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.tri-navy-strip__label p {
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * Sương mù 2 mép — opt-in (carousel course viewport). Mask không overlay
 * nên không phụ thuộc màu nền. Độ rộng fade: --tri-mist.
 */
.tri-mist {
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--tri-mist),
		#000 calc(100% - var(--tri-mist)),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--tri-mist),
		#000 calc(100% - var(--tri-mist)),
		transparent 100%
	);
}

.tri-reveal {
	opacity: 0;
	transform: translateX(-36px);
	transition: opacity 0.65s ease, transform 0.65s ease;
	will-change: opacity, transform;
}

.tri-reveal--left {
	transform: translateX(-36px);
}

.tri-reveal--right {
	transform: translateX(36px);
}

.tri-reveal--up {
	transform: translateY(36px);
}

/* Dưới 768px: trái/phải đổi sang trượt dọc; --up giữ trồi từ dưới. */
@media (max-width: 767px) {
	.tri-reveal,
		.tri-reveal--left,
		.tri-reveal--right {
		transform: translateY(24px);

	}

	.tri-reveal--up {
		transform: translateY(36px);

	}
}

.tri-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tri-btn--pulse {
		animation: none;

	}

	.tri-reveal {
		opacity: 1;
		transform: none;
		transition: none;

	}
}

/* ?? Banner ??u trang ?????????????????????????????????????????????????
   ?o 1? t? figma/pages/*.png (m?p tr?n banner = y100, h?t header):
   khung ch? canh tr?i m?p 224 (tr?ng khung 993 c?a c?c l??i kh?c),
   ti?u ?? 40/800 cao ch? hoa 31, d?ng ph? 35/400 cao ch? hoa 27,
   g?ch 104?4 #2F8EE0, m? t? 17/30, n?t cao 50. Banner cao 600
   (450 ? hai trang kho? h?c). Thi?t k? kh?ng c? ?nh n?n ? ch? gradient. */
/* Ch? d?nh cho tr?nh ??c m?n h?nh ? banner tr?ng v?n ph?i c? <h1>. */
.tri-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@keyframes tri-student-ring-sway {
	0%,
	100% {
		transform: translate(-50%, -50%) rotate(-60deg);
	}
	50% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
}

@media (min-width: 768px) {
	.tri-grid-2,
		.tri-about,
		.tri-navy-strip {
		grid-template-columns: 1fr 1fr;
		display: grid;

	}

	.tri-featured__preview .tri-btn {
		width: 100%;
		max-width: none;
		flex-shrink: 0;
		margin-top: auto;

	}

	.tri-navy-strip {
		/* Figma: nh?n chi?m kho?ng 1/4, d?i th? chi?m ph?n c?n l?i. */
		grid-template-columns: minmax(180px, 1fr) 3fr;
		align-items: center;
		max-width: none;
		padding-inline: 32px;

	}

	/* D?i "Tin t?c" ??o th? t?: th? b?n tr?i, nh?n b?n ph?i. */
	.tri-navy-strip:has(.tri-navy-strip__label--right) {
		grid-template-columns: 3fr minmax(180px, 1fr);

	}

	.tri-navy-strip__label--right {
		text-align: right;

	}

	.tri-cards-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-grid-gutter);

	}

	.tri-ph--press {
		display: block;

	}

	.tri-ph--press-lg {
		height: 310px;

	}

	.tri-ph--news {
		width: clamp(220px, calc(280 / var(--tri-type-ref) * var(--tri-vp)), 360px);
		height: auto;
		aspect-ratio: 241 / 284;

	}
}

@media (min-width: 1025px) {
	.tri-hero .tri-btn {
		height: 48px;
		min-height: 48px;
		padding-inline: 14px;
		font-size: var(--wp--preset--font-size--large);

	}

	.tri-pills {
		/* Span đúng --tri-frame (parent .tri-roadmap); mũi tên không tràn/thiếu shell. */
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
		max-width: 100%;
		gap: 0 clamp(12px, calc(40 / var(--tri-type-ref) * var(--tri-vp)), 40px);
		/* Chừa chỗ mũi tên bên phải trong frame. */
		padding: 0 clamp(28px, calc(48 / var(--tri-type-ref) * var(--tri-vp)), 48px) 8px 0;
		margin-inline: 0;

	}

	.tri-pills::before,
		.tri-pills::after {
		content: "";
		position: absolute;
		pointer-events: none;

	}

	/* Track: nét đứt suốt chiều dài tới mũi tên (thiết kế Lộ trình học). */
	.tri-pills::before {
		left: 0;
		right: 0;
		bottom: 13px;
		height: 2px;
		background: repeating-linear-gradient(
			to right,
			var(--wp--preset--color--navy) 0 7px,
			transparent 7px 14px
		);

	}

	.tri-pills::after {
		right: 0;
		bottom: 1px;
		width: 20px;
		height: 26px;
		background: var(--wp--preset--color--navy);
		clip-path: polygon(25% 0, 100% 50%, 25% 100%, 52% 50%);

	}

	/* Mỗi chặng một chấm trên track; chặng active = vòng ngoài (bullseye). */
	.tri-pills__dot {
		display: block;
		position: relative;
		z-index: 1;
		width: 12px;
		height: 12px;
		margin-top: 18px;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
		box-sizing: border-box;
		transition: box-shadow 0.2s ease;

	}

	.tri-pills__dot.is-active,
		.tri-pills__item:has(.tri-pill.is-active) .tri-pills__dot {
		box-shadow:
			0 0 0 3px var(--wp--preset--color--surface),
			0 0 0 5px var(--wp--preset--color--navy);

	}

	/* ≥1025: lưới 8/10 cột + chữ/spacing fluid neo 1440. */
	/* Logo + nav + CTA không vừa ≤1024 — giữ burger + drawer tới 1025px. */
	/* Thanh đáy bị ẩn ở khổ này nên trả lại phần padding đã chừa. */
	:root {
		--tri-section-pb: clamp(48px, calc(64 / var(--tri-type-ref) * var(--tri-vp)), 80px);
		--tri-section-px: clamp(24px, calc(32 / var(--tri-type-ref) * var(--tri-vp)), 40px);
		--tri-frame: min(100%, var(--tri-span-8));
		--tri-chrome: min(100%, var(--tri-span-10));
		/* Header 80@1440 — scale theo --tri-vp (1025→4K) để clearance
				   dưới header giữ đúng tỉ lệ với banner 1440×600. */
		--tri-header-h: calc(80 / var(--tri-type-ref) * var(--tri-vp));
		--tri-hero-h-fluid: clamp(480px, calc(600 / var(--tri-type-ref) * var(--tri-vp)), 720px);
		--tri-hero-h-short-fluid: clamp(360px, calc(450 / var(--tri-type-ref) * var(--tri-vp)), 540px);
		--tri-hero-h-blank-fluid: clamp(480px, calc(600 / var(--tri-type-ref) * var(--tri-vp)), 720px);
		/* Hero padding neo 1440 (147 / 55 top @1440). */
		--tri-hero-pt: clamp(104px, calc(147 / var(--tri-type-ref) * var(--tri-vp)), 200px);
		--tri-hero-pt-short: clamp(40px, calc(55 / var(--tri-type-ref) * var(--tri-vp)), 80px);
		--tri-hero-pb: clamp(40px, calc(48 / var(--tri-type-ref) * var(--tri-vp)), 64px);
		/* Absolute 8-col shell width (px) — marquee / shared layout; Why inset stays on .tri-why--orbit. */
		--tri-frame-abs: calc(8 * var(--tri-col) + 9 * var(--tri-grid-gutter));
		/* preferred = px_1440 × min(vw,4K) / 1440 */
		--wp--preset--font-size--small: clamp(
				13px,
				calc(14 / var(--tri-type-ref) * var(--tri-vp)),
				15px
			);
		--wp--preset--font-size--medium: clamp(
				15px,
				calc(16 / var(--tri-type-ref) * var(--tri-vp)),
				18px
			);
		--wp--preset--font-size--large: clamp(
				18px,
				calc(20 / var(--tri-type-ref) * var(--tri-vp)),
				24px
			);
		--wp--preset--font-size--x-large: clamp(
				28px,
				calc(32 / var(--tri-type-ref) * var(--tri-vp)),
				48px
			);
		--wp--preset--font-size--xx-large: clamp(
				32px,
				calc(40 / var(--tri-type-ref) * var(--tri-vp)),
				56px
			);
		--tri-text-12: clamp(11px, calc(12 / var(--tri-type-ref) * var(--tri-vp)), 13px);
		--tri-text-13: clamp(12px, calc(13 / var(--tri-type-ref) * var(--tri-vp)), 14px);
		--tri-text-15: clamp(14px, calc(15 / var(--tri-type-ref) * var(--tri-vp)), 17px);
		--tri-text-17: clamp(15px, calc(17 / var(--tri-type-ref) * var(--tri-vp)), 19px);
		--tri-text-18: clamp(16px, calc(18 / var(--tri-type-ref) * var(--tri-vp)), 22px);
		--tri-text-22: clamp(18px, calc(22 / var(--tri-type-ref) * var(--tri-vp)), 28px);
		--tri-text-26: clamp(22px, calc(26 / var(--tri-type-ref) * var(--tri-vp)), 36px);
		--tri-text-35: clamp(28px, calc(35 / var(--tri-type-ref) * var(--tri-vp)), 52px);
		--tri-bottombar-h: 0px;
	}

	.tri-h {
		font-size: var(--wp--preset--font-size--xx-large);

	}

	.tri-cards-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-grid-gutter);

	}
}

/* ≥1440: card grids trở lại 3–4 cột theo design. */
@media (min-width: 1440px) {
	.tri-cards-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));

	}
}

@media (max-width: 374px) {
	.tri-h {
		font-size: var(--wp--preset--font-size--x-large);

	}
}

@media (max-width: 1024px) {
	/* Tablet/mobile: tắt mist — card hẹp không bị cắt fade. */
	.tri-skill-courses .tri-mist {
		-webkit-mask-image: none;
		mask-image: none;

	}
}

.tri-tech-shell .tri-h,
.tri-tech-shell .tri-sub {
	max-width: 720px;
}

/* ─── Blog: trang đọc bài, chuyên mục, tìm kiếm ──────────────────────
   Dùng lại token màu/phông/bo góc của 9 trang đã thiết kế, không đặt thêm
   màu mới, để trang bài nhìn liền mạch với phần còn lại. */
.tri-wrap--narrow {
	width: min(760px, var(--tri-frame), calc(100% - 32px));
	margin-inline: auto;
}

.tri-post-cta__box .tri-btn {
	margin-top: 4px;
}

/* Phân trang Kiến thức / Luyện thi: #fragment giữ viewport tại tabslist + list. */
#tri-kien-thuc-ds,
#tri-luyen-thi-ds {
	scroll-margin-top: calc(var(--tri-adminbar) + var(--tri-header-h) + 16px);
}

/* ─── Trang bài viết: lưới ba cột, mục lục và khối giới thiệu dính ───── */
/* Cuộn êm khi bấm vào mục lục, thay vì nhảy phắt một cái.
   Bọc trong prefers-reduced-motion vì với người bị say chuyển động thì
   trang tự trôi là khó chịu thật, không phải chuyện lịch sự suông. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;

	}
}

/* Phóng to nhất 1,03 lần: nút rộng 214px thành 220px, vẫn nằm gọn trong
   khung 224px của khối nên không sinh thanh cuộn ngang cho cột phải —
   cột đó có overflow-y:auto, mà chỉ cần một chiều khác visible là chiều
   kia cũng thành auto. */
@keyframes tri-nut-tho {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03);
	}
}

/* Thanh cuộn của cả trang: mỏng hơn mục lục (4px, mục lục 6px), cùng màu. */
html {
	width: 100%;
	max-width: 100%;
	/* Không clip trên html — overflow khác visible ở đây dễ làm sticky/fixed
		   header mất chỗ trong flow hoặc dính sai scrollport. Cắt ngang ở body/main. */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--navy) transparent;
}

html::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

html::-webkit-scrollbar-track {
	background: transparent;
}

html::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--wp--preset--color--navy);
}

html:hover::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--royal);
}

@keyframes tri-knowledge-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes tri-popup-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tri-popup-out {
	to {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}

@keyframes tri-popup-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes tri-popup-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes tri-popup-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes tri-popup-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: none;
	}
}

@keyframes tri-popup-down {
	to {
		transform: translateY(100%);
	}
}

/* -- Form đăng ký trong trang / footer (template-parts/consult-form.php) --
   Cùng khung với popup (.tri-popup__*), chỉ bỏ phần của <dialog>. */
.tri-lead-sec {
	--tri-pop-navy: var(--wp--preset--color--navy, #091f5b);
	--tri-pop-action: var(--wp--preset--color--action, #0053d1);
	--tri-pop-orange: var(--wp--preset--color--orange, #ec6207);
	--tri-pop-line: #dbe3f0;
	padding: 48px var(--tri-section-px) 64px;
	color: var(--tri-pop-navy);
	scroll-margin-top: calc(var(--tri-header-h) + var(--tri-adminbar) + 12px);
}

/* Trong footer: nằm trên nền navy của footer, đổ bóng đậm hơn. */
.tri-lead-sec--footer {
	padding: 56px var(--tri-section-px) 8px;
}

@keyframes tri-scta-orb-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-8%, 14%, 0) scale(1.12); }
}

@keyframes tri-scta-orb-b {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(12%, -10%, 0) scale(1.08); }
}

@keyframes tri-scta-orb-c {
	from { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.35; }
	to { transform: translate3d(10%, 8%, 0) scale(1.18); opacity: 0.65; }
}

@keyframes tri-scta-btn-pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
	}
	40% {
		transform: scale(0.88);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	}
}

@keyframes tri-scta-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ══ Nút Prev / Next dùng chung (mọi carousel + thanh phân trang) ════════
   Icon: assets/images/icon-arrow.svg — nét 2px (hộp 20, hiển thị 20px),
   đầu nét + góc bo tròn. Nút KHÔNG nổi đè lên thẻ:
   - ≥768: đứng hai bên trong hàng flex (trái | khung thẻ | phải);
   - ≤767: xuống hàng dưới carousel, hai nút cạnh nhau ở giữa.
   Carousel: Báo chí (.tri-press), Review (.tri-reviews), Khoá bổ trợ
   (.tri-skill-courses), đổi giảng viên ≤1024 (.tri-teacher-switch). */
/* ══ Carousel: tràn mép màn + sương hai đầu ═══════════════════════════════
   Mọi dải trượt ngang mờ dần ở hai mép rồi "biến vào hư không" (mask, không
   phủ màu nên hợp mọi nền; độ rộng --tri-mist như .tri-mist). Dải 10.000+
   học viên, Tips, Tin tức, Báo chí chạy tràn hết bề ngang màn như dải Đối tác.
   --tri-screen = bề ngang màn THẬT: --tri-vp bị chế độ "fixed" khoá 1440px
   (inc/responsive.php) nên không dùng để tràn mép được. */
:root {
	--tri-arrow-size: 48px;
	--tri-arrow-icon: 20px;
	--tri-arrow-gap: 16px;
	--tri-screen: min(100vw, var(--tri-vp-cap));
}

/* Tips / Tin tức: dải thẻ chạy tới mép màn phía KHÔNG có nhãn (Tips → mép
   phải, Tin tức → mép trái); đầu phía nhãn mờ dần vào sau nhãn. */
.tri-navy-strip {
	--tri-ns-px: 16px;
}

@media (min-width: 768px) {
	.tri-cards-2 {
		grid-template-columns: repeat(2, 1fr);

	}

	.tri-navy-strip {
		--tri-ns-px: 32px;

	}
}

@keyframes tri-duo-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-14px);
	}
}

/* Cuộn quán tính (assets/js/smooth-scroll.js, Lenis): Lenis tự đặt vị trí
   từng khung hình nên tắt cuộn mượt của CSS kẻo hai cái chồng nhau. */
html.lenis,
html.lenis body {
	height: auto;
}

html.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* Iframe khách phải bấm / điền được (Google Form trong bài, bản đồ footer). */
.lenis.lenis-smooth .tri-article__body iframe,
.lenis.lenis-smooth .tri-footer__map iframe {
	pointer-events: auto;
}

/* ══ Trang chủ: nền liền mạch giữa các khối ════════════════════════════════
   Khối sáng để nền trong suốt (lộ màu nền trang), hoạ tiết sóng nằm DƯỚI
   các khối nên chảy qua ranh giới mà không bị cắt ngang. */
/* Hiện dần xong thì bỏ will-change: khối thôi là một lớp xếp chồng riêng,
   lớp sóng z-index:-1 bên dưới mới tràn được sang khối kề (và đỡ tốn bộ nhớ). */
.tri-reveal.is-in {
	will-change: auto;
}

/* Khoá học tiêu biểu: dải sóng (images/nen/song-xanh.webp) tràn lên khối
   Giới thiệu phía trên và xuống khối 10.000+ phía dưới. */
.tri-section:has(.tri-featured) {
	position: relative;
	background: none;
}

.tri-section:has(.tri-featured)::before {
	content: "";
	position: absolute;
	top: -24%;
	bottom: -24%;
	left: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
	background: url("../../images/nen/song-xanh.webp") center / 100% 100% no-repeat;
}

/* Home: infinite dual-row student marquee.
   clip (không phải hidden) để chỉ cắt ngang: hidden trên một trục sẽ
   kéo trục còn lại thành auto và nuốt bóng đổ phía dưới thẻ. */
/* 10.000+ học viên, Đội ngũ giảng viên: bỏ nền riêng → liền màu với khối kề. */
.tri-section--marquee {
	overflow-x: clip;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	background-image: none;
}

.tri-section--teachers {
	background: none;
}

/* Phương pháp LCLT: nền bong bóng phai dần từ màu nền trang ở mép trên,
   không còn đường cắt với khối Lộ trình phía trên. */
.tri-section:has(.tri-duo--start) {
	background-color: transparent;
	background-image:
		linear-gradient(to bottom, var(--wp--preset--color--surface) 0, rgba(255, 255, 255, 0) 240px),
		url("../../images/khoa-hoc/nen-khoa-hoc-tieu-bieu-mask.png");
	background-size: 100% 100%, cover;
	background-position: center, center;
}

/* Dải CTA + "Vì sao nên học" (scroll-cta.js bọc chung .tri-navy-merge):
   một mảng nền liền cho cả hai — đúng dải màu chuyển của CTA tone navy,
   lớp sọc why-2-soc.png phủ từ đỉnh CTA xuống hết khối "Vì sao". */
.tri-navy-merge {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--navy);
	background-image:
		url("../../images/why/why-2-soc.png"),
		radial-gradient(520px 220px at 92% -10%, rgba(236, 98, 7, 0.32), transparent 68%),
		radial-gradient(420px 200px at 8% 110%, rgba(84, 156, 255, 0.22), transparent 70%),
		linear-gradient(120deg, #1646b4 0%, #0d2f86 48%, var(--wp--preset--color--navy) 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover, auto, auto, cover;
	background-blend-mode: multiply, normal, normal, normal;
}

/* Luyện thi trực tiếp: cùng sóng nền 10.000+. */
/* Luyện thi trực tiếp + Đội ngũ giảng viên: giữ nền trắng; sọc xanh dài
   chạy dọc mép TRÁI liền qua cả hai khối (một lớp, nên không có chỗ nối), và
   một dải ở giữa mép PHẢI khối Luyện thi. Hai đầu mỗi dải đều ra ở mép màn
   nên nhìn là đường dài, không cụt. Lớp z-index:-1 nằm dưới mọi khối. */
.tri-section--skills {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	position: relative;
	background-image: none;
}

.tri-section--skills::before,
.tri-section--skills::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tri-section--skills::before {
	top: -40px;
	left: 0;
	width: min(560px, 38%);
	/* Kéo xuống phủ luôn khối Đội ngũ giảng viên ngay dưới. */
	height: calc(100% + 900px);
	background-image: url("../../images/nen/song-doc-trai.svg");
	/* Hai đầu trên / dưới phai dần — không có mép cắt ngang. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.tri-section--skills::after {
	top: 6%;
	right: 0;
	width: min(460px, 32%);
	height: 92%;
	background-image: url("../../images/nen/song-giua-phai.svg");
}

/* Báo chí: nền bong bóng nhạt (phai ở mép trên) + sọc xanh góc dưới phải. */
#tri-sec-page-home-press {
	position: relative;
	background-image:
		linear-gradient(to bottom, var(--wp--preset--color--surface) 0, rgba(255, 255, 255, 0) 200px),
		url("../../images/khoa-hoc/nen-khoa-hoc-tieu-bieu-mask.png");
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 100% 100%, cover;
}

#tri-sec-page-home-press::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: min(820px, 58%);
	height: 78%;
	pointer-events: none;
	background: url("../../images/nen/song-goc-duoi-phai.svg") no-repeat center / 100% 100%;
}

/* ══ Sọc xanh liền mạch cho mọi trang ════════════════════════════════════
   Nền của vùng nội dung (.tri-main): hai dải sọc lặp dọc (ô 1800px) — trái
   và phải so le nửa nhịp. Mỗi ô dải lượn ra từ mép màn rồi quay về mép màn
   nên lặp bao nhiêu cũng không có đầu cụt. Nền .tri-main nằm DƯỚI mọi khối:
   khối nền trắng / trong suốt lộ sọc liền qua ranh giới, khối nền đặc
   (banner, dải navy, thẻ) che sọc như sọc chạy phía sau.
   Trang chủ giữ bố cục sọc riêng ở trên (Giới thiệu, Luyện thi, Báo chí). */
body:not(.home) .tri-main {
	background-image:
		url("../../images/nen/soc-trai-lap.svg"),
		url("../../images/nen/soc-phai-lap.svg");
	background-repeat: repeat-y, repeat-y;
	background-size: min(520px, 36%) 1800px, min(520px, 36%) 1800px;
	background-position: left 0 top 360px, right 0 top 1260px;
}

/* Tắt sọc xanh trang trí (Nội dung → Dùng chung → Logo & nhận diện →
   "Hiện sọc xanh trang trí ở nền trang"; body.tri-no-stripes do
   inc/header-layout.php gắn). Nền navy "Vì sao nên học" giữ nguyên. */
body.tri-no-stripes .tri-main,
body.tri-no-stripes .tri-about-sec {
	background-image: none !important;
}

body.tri-no-stripes .tri-section:has(.tri-featured)::before,
body.tri-no-stripes .tri-section--skills::before,
body.tri-no-stripes .tri-section--skills::after,
body.tri-no-stripes #tri-sec-page-home-press::after {
	display: none;
}

@media (max-width: 767px) {
	.tri-featured__panel .tri-btn {
		max-width: none;
		height: 42px;
		min-height: 42px;

	}

	/* Điện thoại: vừa đúng 2 thẻ, JS trượt từng bài — tắt marquee liên tục.
	   Tin tức đảo thứ tự trên PC (thẻ trái, nhãn phải) nên nhãn rơi xuống dưới
	   slide. Trên mobile kéo nhãn lên trên slide. */
	.tri-navy-strip:has(.tri-navy-strip__label--right) .tri-navy-strip__label {
		order: -1;

	}

	.tri-lead-sec {
		padding: 32px 12px 40px;

	}

	/* -- Điện thoại: form đăng ký trong trang / footer full màn ngang ---------- */
	.tri-lead-sec,
		.tri-lead-sec--footer {
		padding-inline: 0;

	}

	:root {
		--tri-arrow-size: 44px;

	}

	.tri-section--skills::before {
		width: 62%;
		height: calc(100% + 600px);

	}

	.tri-section--skills::after {
		width: 55%;

	}

	body:not(.home) .tri-main {
		background-size: 48% 1500px, 48% 1500px;
		background-position: left 0 top 300px, right 0 top 1050px;

	}
}