/*
 * Trang khoá học: vấn đề, lợi ích, kết quả, chương trình học, lộ trình, chọn trình độ
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

/* "Vấn đề học viên IELTS thường gặp phải" — Figma khoa-hoc.png:
   khối 901×480 @1440, hub 452 giữa mép trên, thẻ 306×133 absolute quanh hub.
   Desktop ≥1025: scale cả cụm qua --tri-issues-s = vp/1440px (cùng Why orbit).
   Tablet 768–1024: lưới 2×2 bằng nhau. Mobile ≤767: 4 thẻ xếp dọc tĩnh. */
.tri-issues {
	--tri-issue-w: 306px;
	--tri-issue-h: 133px;
	--tri-issue-x: 37px;
	--tri-issue-tail-w: 35px;
	--tri-issue-tail-h: 25px;
	/* mép trong của đuôi, tính từ cạnh thẻ hướng vào vòng tròn */
	--tri-issue-tail-in: 72px;
	/* Viên cong chỗ đuôi chạm mép thẻ (speech-bubble join). */
	--tri-issue-blob: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	width: min(901px, 100%);
	margin-inline: auto;
}

.tri-issues__hub {
	display: block;
	width: min(452px, 82%);
	height: auto;
}

.tri-issues__viewport {
	width: 100%;
}

.tri-issues__track {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	width: 100%;
}

.tri-issue {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--tri-issue-w);
	min-height: var(--tri-issue-h);
	padding: 16px 25px;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 26px rgba(9, 31, 91, 0.1);
}

.tri-issue h3 {
	margin: 0 0 10px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-17);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.3;
}

.tri-issue p {
	margin: 0;
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--tri-text-15);
	line-height: 1.65;
}

/* Huy hiệu × — assets/images/icon-X-prolem.png (41×42). */
.tri-issue__x {
	position: absolute;
	left: calc(var(--tri-issue-x) / -2 + 10px);
	top: calc(var(--tri-issue-x) / -2 + 8px);
	width: var(--tri-issue-x);
	height: calc(var(--tri-issue-x) * 42 / 41);
	background: url(../../images/icon-X-prolem.png) center / contain no-repeat;
	pointer-events: none;
}

/* Mobile ≤767: hub trên + 4 thẻ xếp dọc tĩnh; pad để × + box-shadow không bị cắt. */
@media (max-width: 767px) {
	.tri-issues {
		--tri-issue-x: 32px;
		--tri-issues-pad-x: 20px;
		--tri-issues-pad-y: 20px;
		width: var(--tri-frame);
		gap: 20px;

	}

	.tri-issues__hub {
		width: min(280px, 72%);

	}

	.tri-issues__viewport {
		overflow: visible;
		padding: var(--tri-issues-pad-y) var(--tri-issues-pad-x);
		margin-inline: calc(var(--tri-issues-pad-x) * -1);
		width: calc(100% + 2 * var(--tri-issues-pad-x));
		box-sizing: border-box;

	}

	.tri-issues__track {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		width: 100%;

	}

	.tri-issue {
		width: 100%;
		max-width: none;
		height: auto;
		min-height: var(--tri-issue-h);

	}

	.tri-issue__x {
		left: calc(var(--tri-issue-x) / -2);
		top: calc(var(--tri-issue-x) / -2);

	}
}

.tri-problem-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: min(900px, var(--tri-frame));
	margin: 24px auto 0;
}

.tri-problem {
	position: relative;
	padding: 20px 20px 20px 24px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.tri-problem__x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e11;
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
}

.tri-problem h3 {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-strong);
}

.tri-problem p {
	margin: 0;
	padding-right: 20px;
}

/* ?? "IELTS & 5 l?i ?ch" ??????????????????????????????????????????????
   ?o 1? t? figma/pages/khoa-hoc.png: c?t danh s?ch 357 (x 224..580),
   ?nh 617 (x 600..1216) ? t?ng ??ng khung 993. M?i d?ng cao 64, c?ch
   nhau 14, ch? 15/700 line-height 24, th?t tr?i 42 ?? n? huy hi?u.
   Huy hi?u s? 27?23 bo 6, n?n #0053D1, ??t c?ch m?p tr?i th? 9px v?
   nh? l?n kh?i m?p tr?n 8px. D?ng ??u ??o n?n navy, ch? tr?ng. */
.tri-benefits {
	display: grid;
	gap: 20px;
	align-items: center;
	width: var(--tri-frame);
	margin-inline: auto;
}

.tri-benefit-list {
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tri-benefit-list li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 12px 20px 12px 42px;
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--color--ink-strong);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: 0 6px 18px rgba(15, 35, 78, 0.08);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-15);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.6;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration-fast) ease,
		color var(--wp--custom--motion--duration-fast) ease,
		box-shadow var(--wp--custom--motion--duration-fast) ease;
}

.tri-benefit-list li:hover,
.tri-benefit-list li:focus-visible,
.tri-benefit-list li.is-active {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: none;
	outline: none;
}

.tri-benefit-list__badge {
	position: absolute;
	top: -8px;
	left: 9px;
	display: inline-grid;
	place-items: center;
	width: 27px;
	height: 23px;
	border-radius: 6px;
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--white);
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1;
}

.tri-benefit-list__text {
	display: block;
}

.tri-benefits__media {
	position: relative;
	width: min(618px, 100%);
	margin-inline: auto;
	aspect-ratio: 618 / 375;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--muted);
}

.tri-benefits__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tri-benefits__sticker {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: min(132px, 28%);
	height: auto;
	pointer-events: none;
}

@media (min-width: 768px) {
	.tri-benefits {
		grid-template-columns: minmax(0, 1fr) minmax(0, 618px);
		gap: 40px;
		align-items: stretch;

	}

	.tri-benefits__media {
		margin-inline: 0;
		justify-self: end;

	}
}

.tri-problem-banner-section {
	overflow: visible;
	padding-top: 56px;
}

.tri-problem-banner {
	position: relative;
	display: grid;
	gap: 24px;
	align-items: stretch;
	min-height: 280px;
	padding: 28px 24px;
	overflow: visible;
	background: var(--wp--preset--color--navy);
	border-radius: 28px;
	color: var(--wp--preset--color--white);
}

.tri-problem-banner__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	align-self: center;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.tri-problem-banner__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tri-problem-banner__accent {
	flex-shrink: 0;
	align-self: stretch;
	width: 6px;
	margin-block: 10px;
	margin-inline-start: 10px;
	background: var(--wp--preset--color--action);
	border-radius: 999px;
}

.tri-problem-banner__q {
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 1.1em;
	margin: 0;
	padding: 12px 0;
	color: var(--wp--preset--color--action);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-strong);
	font-size: var(--tri-text-22);
	line-height: 1;
	background: none;
}

.tri-problem-banner__text {
	flex: 1;
	min-width: 0;
	padding: 14px 16px 14px 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.tri-problem-banner__text strong {
	font-weight: var(--wp--custom--font--weight-strong);
}

.tri-problem-banner__media {
	position: relative;
	display: block;
	align-self: stretch;
	min-height: 240px;
	overflow: visible;
	z-index: 0;
}

.tri-problem-banner__media img {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: block;
	width: auto;
	max-width: none;
	height: calc(100% + 64px);
	object-fit: contain;
	object-position: bottom center;
	transform: translateX(calc(-50% - 28px));
	pointer-events: none;
}

@media (max-width: 767px) {
	/* Ảnh xếp dưới list — không overlap âm (tránh chữ đè mặt). */
	.tri-problem-banner {
		overflow: hidden;

	}

	.tri-problem-banner__media {
		position: relative;
		min-height: 220px;
		margin-top: 0;
		overflow: hidden;
		border-radius: 16px;

	}

	.tri-problem-banner__media img {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: auto;
		max-width: 85%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
		transform: translateX(-50%);

	}
}

.tri-stage {
	display: none;
	/* Parent .tri-roadmap đã là --tri-frame; width 100% tránh tính lại
	   --tri-span-8 trên shell lồng nhau (co còn ~8/12 frame). */
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	gap: 20px;
	background: transparent;
}

.tri-stage.is-active {
	display: grid;
	grid-template-columns: 1fr;
}

.tri-roadmap__panels {
	display: contents;
}

/* ≥768: chồng panel + fade — đổi chặng không nhảy layout (display:none). */
@media (min-width: 768px) {
	.tri-roadmap__panels {
		display: grid;
		width: 100%;

	}

	.tri-roadmap__panels > .tri-stage {
		grid-area: 1 / 1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 20px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);
		transition:
			opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.35s;

	}

	.tri-roadmap__panels > .tri-stage.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		z-index: 1;

	}
}

@media (prefers-reduced-motion: reduce) {
	.tri-roadmap__panels > .tri-stage {
		transition: none !important;
		transform: none !important;

	}
}

.tri-stage__dark,
.tri-stage__ice {
	min-width: 0;
	padding: 24px;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

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

.tri-stage__ice {
	background: color-mix(in srgb, var(--wp--preset--color--ice) 50%, transparent);
}

/* Mỗi field: nhãn rồi <br> rồi giá trị; giữa các field: <hr.tri-stage__rule> nét đứt. */
.tri-stage__field {
	margin: 0;
	padding: 0;
}

.tri-stage__rule {
	display: block;
	width: 100%;
	height: 0;
	margin: 16px 0;
	border: 0;
	border-top: 1px dashed color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
}

.tri-stage__dark .tri-stage__rule {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
}

.tri-stage__field ul {
	margin: 0;
}

.tri-stage__label {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
}

.tri-stage__dark ul li::marker,
.tri-stage__ice ul li::marker {
	color: var(--wp--preset--color--orange);
}

/* Dong bo chieu rong --tri-frame voi cac section khac (truoc day khong co gioi
   han, tran het chieu rong container tren desktop). max-width: 100% như
   .tri-featured — tránh kẹp thêm --tri-frame khi breakout mobile. */
.tri-roadmap {
	width: var(--tri-frame);
	max-width: 100%;
	margin-inline: auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* Tablet ≤1024: hub full-width + lưới 2×2; thẻ cao theo thẻ dài nhất (không sàn cố định).
	   Hub row = auto (không chung 1fr với thẻ). Card rows = 1fr → các hàng thẻ bằng nhau. */
	.tri-issues {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-auto-rows: 1fr;
		align-items: stretch;
		justify-items: stretch;
		gap: 24px;
		width: var(--tri-frame);

	}

	.tri-issues__hub {
		grid-column: 1 / -1;
		width: min(360px, 56%);
		justify-self: center;

	}

	.tri-issues__viewport,
		.tri-issues__track {
		display: contents;

	}

	.tri-issue {
		width: 100%;
		max-width: none;
		height: 100%;
		min-height: 0;
		align-self: stretch;
		justify-self: stretch;

	}

	/* Body flex-fills so short copy still occupies the stretched card. */
	.tri-issue p {
		flex: 1;

	}

	.tri-issue__x {
		left: calc(var(--tri-issue-x) / -2);
		top: calc(var(--tri-issue-x) / -2);

	}

	/* Tablet: cột ảnh cứng 618px + stretch làm media chiếm gần hết khung
	   (~720–976) → ảnh phình kín màn. Giữ tỉ lệ 618/375, hạ max xuống ~desktop
	   proportion của frame hẹp; center để height theo aspect-ratio. */
	.tri-benefits {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, min(420px, 46%));
		gap: 28px;
		align-items: center;

	}

	.tri-benefits__media {
		width: 100%;
		max-width: min(420px, 100%);
		height: auto;
		aspect-ratio: 618 / 375;

	}

	/* Tablet: --tri-frame = 100% − 2×section-px, nhưng .tri-section đã pad —
	   width 100% để fill khung nội dung, không double gutter. */
	.tri-roadmap {
		width: 100%;
		max-width: 100%;

	}
}

/* Mobile: accordion giống lộ trình cá nhân hóa — ice soft đóng, navy→action mở.
   Breakout mép section (giống .tri-featured); max-width: none để không bị
   max-width: 100% / --tri-frame kẹp lại → leftover gutter. */
@media (max-width: 767px) {
	.tri-roadmap {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: calc(100% + (var(--tri-section-px) * 2));
		max-width: none;
		margin: 0 calc(var(--tri-section-px) * -1) 8px;
		padding: 0 12px;

	}

	.tri-stage {
		display: none;
		width: 100%;
		max-width: none;
		margin: -10px 0 0;
		gap: 0;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 10px 24px rgba(9, 31, 91, 0.07);
		overflow: hidden;

	}

	.tri-stage.is-active {
		display: grid;
		grid-template-columns: 1fr;

	}

	.tri-stage__dark,
		.tri-stage__ice {
		padding: 14px 16px 16px;
		border-radius: 0;
		overflow: visible;

	}

	/* Panel ice: cùng nền result panel của .tri-picker */
	.tri-stage__ice {
		background-color: var(--wp--custom--color--ice-soft);
		background-image: linear-gradient(
			180deg,
			color-mix(in srgb, var(--wp--custom--color--ice-soft) 40%, white) 0%,
			var(--wp--custom--color--ice-soft) 100%
		);

	}

	.tri-stage__dark {
		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) 78%, var(--wp--preset--color--action)) 100%
		);

	}

	.tri-stage__rule {
		margin: 12px 0;

	}

	.tri-stage__label {
		font-size: var(--wp--preset--font-size--medium);

	}
}

@media (max-width: 389px) {
	.tri-roadmap {
		gap: 8px;
		padding-inline: 10px;

	}

	.tri-stage.is-active {
		margin-top: -8px;

	}

	.tri-stage__dark,
		.tri-stage__ice {
		padding: 12px;

	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.tri-roadmap {
		gap: 12px;
		padding-inline: 16px;

	}

	.tri-stage.is-active {
		margin-top: -12px;

	}

	.tri-stage__dark,
		.tri-stage__ice {
		padding: 16px 18px 18px;

	}
}

.tri-skills {
	/* Neo 1440 / --tri-frame: 4 vòng ≈ frame (992px span @281 → 993 frame @1440).
	   Scale cả cụm theo frame-abs để overlap -44/281 giữ đúng tỉ lệ.
	   Inner type/icon/pill dùng cùng --tri-skill-s (không cqi — không fluid). */
	--tri-skill-s: clamp(
		0.71,
		calc(
			var(--tri-frame-abs, calc(993 / var(--tri-type-ref) * var(--tri-vp))) / 993px
		),
		1.78
	);
	--tri-skill-d: calc(281px * var(--tri-skill-s));
	/* Figma @281 → nhân --tri-skill-s để chữ/icon theo đường kính 2K→1440. */
	--tri-skill-icon: calc(30px * var(--tri-skill-s));
	--tri-skill-fs-label: calc(18px * var(--tri-skill-s));
	--tri-skill-fs-band: calc(15px * var(--tri-skill-s));
	--tri-skill-band-h: calc(30px * var(--tri-skill-s));
	--tri-skill-band-w: calc(110px * var(--tri-skill-s));
	--tri-skill-gap-label: calc(14px * var(--tri-skill-s));
	--tri-skill-gap-bands: calc(12px * var(--tri-skill-s));
	--tri-skill-gap-band: calc(11px * var(--tri-skill-s));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Tránh stretch trên trục chéo — flex mặc định stretch → méo thành ellipse. */
	align-items: center;
	gap: 16px;
	max-width: var(--tri-frame);
	margin: 40px auto 0;
}

.tri-skill {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Một token cho cả hai trục — không clamp width/height khác nhau. */
	width: var(--tri-skill-d);
	height: var(--tri-skill-d);
	flex: 0 0 var(--tri-skill-d);
	max-width: none;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	/* Padding đều — flex center căn icon + label + band trong vòng. */
	padding: calc(22px * var(--tri-skill-s)) calc(16px * var(--tri-skill-s));
	border-radius: 50%;
	background: var(--wp--custom--color--ice-soft);
	color: var(--wp--preset--color--navy);
	text-align: center;
	overflow: hidden;
}

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

/* Icon mask lấy màu chữ của vòng (navy hoặc trắng). 30@281 Figma. */
.tri-skill__icon {
	width: var(--tri-skill-icon);
	height: var(--tri-skill-icon);
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.tri-skill--listening .tri-skill__icon {
	-webkit-mask-image: url(../../images/icon-listening.svg);
	mask-image: url(../../images/icon-listening.svg);
}

.tri-skill--reading .tri-skill__icon {
	-webkit-mask-image: url(../../images/icon-reading.svg);
	mask-image: url(../../images/icon-reading.svg);
}

.tri-skill--writing .tri-skill__icon {
	-webkit-mask-image: url(../../images/icon-writing.svg);
	mask-image: url(../../images/icon-writing.svg);
}

.tri-skill--speaking .tri-skill__icon {
	-webkit-mask-image: url(../../images/icon-speaking.svg);
	mask-image: url(../../images/icon-speaking.svg);
}

.tri-skill p {
	margin: var(--tri-skill-gap-label) 0 var(--tri-skill-gap-bands);
	padding: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	/* 18@281 — cùng tỉ lệ đường kính qua --tri-skill-s. */
	font-size: var(--tri-skill-fs-label);
	line-height: 1.15;
	font-weight: var(--wp--custom--font--weight-ui);
	text-align: center;
	text-transform: uppercase;
}

.tri-skill__band + .tri-skill__band {
	margin-top: var(--tri-skill-gap-band);
}

.tri-skill__band {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tri-skill-band-w);
	max-width: 100%;
	height: var(--tri-skill-band-h);
	flex-shrink: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-size: var(--tri-skill-fs-band);
	line-height: 1;
	font-weight: var(--wp--custom--font--weight-ui);
	text-align: center;
	transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease;
	cursor: pointer;
	/* Là link tới chuyên mục luyện thi (front-page.php) — bỏ kiểu link mặc định. */
	text-decoration: none;
}

.tri-skill__band:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

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

/* Vòng navy: pill active cùng màu vòng, thêm viền trắng để vẫn đọc được. */
.tri-skill--navy .tri-skill__band.is-active,
.tri-skill--navy .tri-skill__band:hover {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--white);
}

/* ── Timeline "Lộ trình đào tạo tinh gọn" ───────────────────────────────
   Default = palette chặng 1 (ice #BAD6EB); hover = palette chặng 2 (navy).
   Mobile (<768): tab số + kéo ngang thẻ. Desktop: timeline dọc như cũ. */
/* Chỉ trong [data-tri-timeline] — không đụng .tri-picker__tabs / tab khác. */
[data-tri-timeline] > .tri-timeline-tabs {
	display: none;
}

.tri-timeline__viewport {
	max-width: var(--tri-frame);
	margin: 32px auto 0;
}

.tri-timeline {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.tri-timeline__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.tri-timeline__marker {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.tri-timeline__num {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-ui);
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Default: Xây nền tảng (white body + ice-tint head; border action 50%). */
.tri-timeline__card {
	overflow: hidden;
	border: 1px solid rgba(0, 83, 209, 0.5);
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover: Hoàn thiện căn bản (navy fill). */
.tri-timeline__row:hover .tri-timeline__card,
.tri-timeline__row:focus-within .tri-timeline__card {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-timeline__row:hover .tri-timeline__num,
.tri-timeline__row:focus-within .tri-timeline__num {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Header: 2 cols — thumb | body (heading row + facts row). Tint #BAD6EB @ 30%. */
.tri-timeline__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 12px 16px;
	padding: 16px 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);
	background: rgba(186, 214, 235, 0.3);
	color: var(--wp--preset--color--navy);
}

.tri-timeline__thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 12%, transparent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgba(9, 31, 91, 0.06);
}

.tri-timeline__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.tri-timeline__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	min-width: 0;
}

.tri-timeline__head h3 {
	margin: 0;
	color: inherit;
	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-transform: uppercase;
	line-height: 1.25;
}

.tri-timeline__band {
	padding: 3px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-size: var(--tri-text-12);
	font-weight: var(--wp--custom--font--weight-ui);
	text-transform: uppercase;
	white-space: nowrap;
}

.tri-timeline__facts {
	display: grid;
	gap: 14px;
	min-width: 0;
	padding: 0;
	background: transparent;
}

.tri-timeline__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	color: inherit;
	font-weight: var(--wp--custom--font--weight-ui);
	font-size: var(--wp--preset--font-size--small);
}

.tri-timeline__icon {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: inherit;
}

.tri-timeline__icon-svg {
	display: block;
	width: 16px;
	height: 16px;
}

.tri-timeline__fact p:last-child {
	margin: 0;
	font-size: var(--tri-text-12);
	line-height: var(--wp--custom--line-height--body);
	opacity: 0.92;
}

/* Footer: separator + link #0E5DD3 + right arrow. */
.tri-timeline__foot {
	padding: 10px 20px;
	border-top: 1px solid rgba(0, 83, 209, 0.28);
	background: var(--wp--preset--color--white);
	border-radius: 0 0 var(--wp--custom--radius--field) var(--wp--custom--radius--field);
	text-align: right;
}

.tri-timeline__foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0e5dd3;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tri-timeline__foot a::after {
	content: "→";
	font-size: 0.95em;
	line-height: 1;
}

/* Foot stays white + bordered — no navy fill on hover. */
.tri-timeline__row:hover .tri-timeline__foot,
.tri-timeline__row:focus-within .tri-timeline__foot {
	border-top-color: rgba(0, 83, 209, 0.28);
	background: var(--wp--preset--color--white);
}

.tri-timeline__row:hover .tri-timeline__foot a,
.tri-timeline__row:focus-within .tri-timeline__foot a {
	color: #0e5dd3;
}

.tri-timeline__row:hover .tri-timeline__head,
.tri-timeline__row:focus-within .tri-timeline__head {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
	background: transparent;
	color: inherit;
}

.tri-timeline__row:hover .tri-timeline__thumb,
.tri-timeline__row:focus-within .tri-timeline__thumb {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
}

/* Mobile: numbered tabs + horizontal swipe carousel (skill-courses pattern).
   Mọi rule tab gắn [data-tri-timeline] để không spill sang picker/review. */
@media (max-width: 767px) {
	[data-tri-timeline] > .tri-timeline-tabs {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
		max-width: var(--tri-frame);
		margin: 28px auto 0;
		padding: 0 4px;

	}

	[data-tri-timeline] .tri-timeline-tabs__btn {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 2px solid var(--wp--preset--color--navy);
		border-radius: 50%;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
		font-family: var(--wp--preset--font-family--beau-sans);
		font-weight: var(--wp--custom--font--weight-ui);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

	}

	[data-tri-timeline] .tri-timeline-tabs__btn.is-active {
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);

	}

	[data-tri-timeline] .tri-timeline-tabs__btn:focus-visible {
		outline: 2px solid var(--wp--preset--color--action);
		outline-offset: 2px;

	}

	.tri-timeline__viewport {
		overflow: hidden;
		margin-top: 16px;
		padding: 4px 0 8px;
		cursor: grab;
		touch-action: pan-y;
		user-select: none;

	}

	.tri-timeline__viewport.is-dragging {
		cursor: grabbing;

	}

	.tri-timeline {
		display: flex;
		gap: 16px;
		transition: transform var(--wp--custom--motion--duration-mid) ease;

	}

	.tri-timeline.is-instant,
		.tri-timeline.is-dragging {
		transition: none;

	}

	.tri-timeline__row {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		gap: 0;

	}

	/* Tabs thay cột mốc trên mobile. */
	.tri-timeline__marker {
		display: none;

	}

	/* Slide đang chọn: palette navy (cùng hover desktop). */
	.tri-timeline__row.is-active .tri-timeline__card {
		border-color: var(--wp--preset--color--navy);
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);

	}

	.tri-timeline__row.is-active .tri-timeline__head {
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
		background: transparent;
		color: inherit;

	}

	.tri-timeline__row.is-active .tri-timeline__foot {
		border-top-color: rgba(0, 83, 209, 0.28);
		background: var(--wp--preset--color--white);

	}

	.tri-timeline__row.is-active .tri-timeline__foot a {
		color: #0e5dd3;

	}

	.tri-timeline__row.is-active .tri-timeline__thumb {
		border-color: color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);

	}
}

/* ?? B? ch?n l? tr?nh c? nh?n h?a (Ph??ng ph?p ??o t?o) ?????????????????
   Figma: 3 c?t ? head navy d?nh panel ice; option + accordion trong panel. */
.tri-picker {
	display: grid;
	gap: 20px;
	max-width: var(--tri-frame);
	margin: 32px auto 0;
}

.tri-picker__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

button.tri-picker__head,
button.tri-picker__head:hover,
button.tri-picker__head:focus {
	display: block;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 16px;
	background-color: var(--wp--preset--color--navy);
	background-image: linear-gradient(
		100deg,
		var(--wp--preset--color--navy) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy) 78%, var(--wp--preset--color--action)) 100%
	);
	box-shadow: none;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	text-align: center;
	line-height: 1.3;
	cursor: default;
}

button.tri-picker__head:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

/* Hai cột chọn mức không có nền panel; chỉ cột lộ trình giữ nền, tách khỏi nút tiêu đề. */
.tri-picker__panel {
	flex: 1;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.tri-picker__col--result .tri-picker__panel {
	padding: 22px;
	border-radius: 24px;
	background-color: var(--wp--custom--color--ice-soft);
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--custom--color--ice-soft) 40%, white) 0%,
		var(--wp--custom--color--ice-soft) 100%
	);
	box-shadow: 0 10px 24px rgba(9, 31, 91, 0.07);
}

.tri-picker__options {
	display: grid;
	gap: 10px;
}

.tri-picker__option {
	position: relative;
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 6px 10px;
	padding: 12px 14px;
	border: 1.5px solid transparent;
	border-radius: 20px;
	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%
	);
	box-shadow: 0 4px 14px rgba(9, 31, 91, 0.07);
	cursor: pointer;
}

.tri-picker__option:has(input:checked) {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--custom--color--ice-soft);
	background-image: linear-gradient(
		165deg,
		color-mix(in srgb, var(--wp--preset--color--ice) 18%, white) 0%,
		var(--wp--custom--color--ice-soft) 100%
	);
}

/* ?n radio native; gi? focus-visible tr?n label qua :focus-within. */
.tri-picker__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.tri-picker__radio {
	grid-row: 1;
	grid-column: 1;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1.5px solid var(--wp--preset--color--navy);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.tri-picker__option:has(input:checked) .tri-picker__radio {
	background: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
}

.tri-picker__option:focus-within {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

/* Hover thẻ mức: viền thẻ + vòng xanh ngoài cùng. Không đổi nền/radio của thẻ đang chọn. */
.tri-picker__option:hover:not(.is-disabled) {
	border-color: var(--wp--preset--color--action);
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

.tri-picker__option:has(input:checked):hover:not(.is-disabled) {
	border-color: var(--wp--preset--color--navy);
}

.tri-picker__option.is-disabled,
.tri-picker__option.is-disabled:has(input:checked) {
	border-color: transparent;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 70%, #c5cad6);
	background-image: none;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.55;
}

.tri-picker__option.is-disabled .tri-picker__band,
.tri-picker__option.is-disabled .tri-picker__blurb {
	color: color-mix(in srgb, var(--wp--custom--color--ink) 40%, white);
}

.tri-picker__option.is-disabled .tri-picker__radio,
.tri-picker__option.is-disabled:has(input:checked) .tri-picker__radio {
	border-color: color-mix(in srgb, var(--wp--preset--color--navy) 25%, white);
	background: var(--wp--preset--color--white);
	box-shadow: none;
}

.tri-picker__option.is-disabled:focus-within {
	outline: none;
}

.tri-picker__band {
	grid-row: 1;
	grid-column: 2;
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

.tri-picker__blurb {
	grid-column: 2;
	color: var(--wp--custom--color--ink);
	font-size: 11px;
	line-height: 1.45;
}

.tri-picker__result {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tri-picker__meta {
	display: grid;
	gap: 6px;
	margin: 0;
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--tri-text-13);
	line-height: 1.4;
}

.tri-picker__meta strong {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-ui);
}

.tri-picker__courses {
	display: grid;
	gap: 8px;
}

.tri-picker__course {
	overflow: hidden;
	border-radius: 20px;
	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%
	);
	box-shadow: 0 4px 14px rgba(9, 31, 91, 0.07);
}

.tri-picker__course summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	color: var(--wp--preset--color--navy);
	font-size: var(--tri-text-12);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.tri-picker__course summary::-webkit-details-marker {
	display: none;
}

.tri-picker__course summary::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: -2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.tri-picker__course[open] summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.tri-picker__course[open] {
	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%
	);
}

.tri-picker__course[open] summary {
	color: var(--wp--preset--color--white);
}

.tri-picker__course p {
	margin: 0;
	padding: 0 14px 12px;
	color: var(--wp--custom--color--ink-strong);
	font-size: 11px;
	line-height: 1.5;
}

.tri-picker__course[open] p {
	color: var(--wp--preset--color--white);
}

.tri-picker__empty {
	margin: 0;
	color: var(--wp--preset--color--orange);
	font-size: var(--tri-text-12);
}

/* Mobile + tablet (≤1024): tab strip + "Chọn lại"; desktop ẩn (xem min-width: 1025px). */
.tri-picker__tabs {
	display: none;
	grid-column: 1 / -1;
	gap: 6px;
}

.tri-picker__tab {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 8px 6px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--navy) 18%, white);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--color--ink);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: 11px;
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.tri-picker__tab:disabled {
	opacity: 0.45;
	cursor: default;
}

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

.tri-picker__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

.tri-picker__reset {
	display: none;
	grid-column: 1 / -1;
	margin: 4px auto 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--orange);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

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

.tri-picker__reset:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

/* ?? L? tr?nh: kh?a h?c b? tr? + shell c?ng ngh? ?? */
.tri-skill-courses {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--tri-frame);
	margin-inline: auto;
	overflow: visible;
}

@media (min-width: 1025px) {
	/* PC: shell 10 cột (--tri-chrome); mist trên viewport, nav ngoài mask. */
	.tri-skill-courses {
		width: var(--tri-chrome);

	}
}

/*
 * Shadow không bị cắt: viewport vẫn overflow:hidden (cần cho carousel),
 * nhưng padding đủ lớn để bóng + ruy-băng + tab đáy nằm trong vùng clip.
 */
.tri-skill-courses__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	padding: 52px 16px 48px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.tri-skill-courses__viewport.is-dragging {
	cursor: grabbing;
}

.tri-skill-courses__track {
	display: flex;
	gap: 20px;
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-skill-courses__track.is-instant,
.tri-skill-courses__track.is-dragging {
	transition: none;
}

.tri-skill-card {
	position: relative;
	z-index: 0;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Chừa chỗ cho thanh navy lộ dưới đáy (cùng pattern .tri-pillar / .tri-cred). */
	margin-bottom: 9px;
	padding: 40px 18px 22px;
	border-radius: var(--wp--custom--radius--card);
	/* Nền/shadow trên ::before để ::after (tab đáy) chỉ lộ phần nhô ra. */
	background: transparent;
	border: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-skill-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1);
	transition: box-shadow var(--wp--custom--motion--duration-mid) ease;
}

/* Tab navy đáy: chỉ lộ ~9px dưới mép thẻ — không phải khối “leak”. */
.tri-skill-card::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	z-index: -1;
	width: 88px;
	height: 18px;
	transform: translateX(-50%);
	border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

.tri-skill-card:hover,
.tri-skill-card:focus-visible {
	transform: translateY(-8px);
}

.tri-skill-card:hover::before,
.tri-skill-card:focus-visible::before {
	box-shadow: 0 16px 32px rgba(16, 24, 40, 0.14);
}

.tri-skill-card > * {
	position: relative;
	z-index: 1;
}

/* Name-tag ribbon: bo tron ca 4 goc + 1 tab nho nhoi len chinh giua dinh
   (dung ::before lam tab, khong con 2 tai xeo 2 ben nhu thiet ke cu). */
.tri-skill-card__ribbon {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 10px 22px;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}

.tri-skill-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tri-skill-card__desc {
	margin: 0;
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	text-align: center;
	text-wrap: balance;
	text-decoration: none;
}

.tri-skill-card__meta {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
}

.tri-skill-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--tri-skill-chip-accent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--tri-skill-chip-accent) 8%, #fff);
	font-size: var(--tri-text-12);
	font-weight: 400;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--tri-skill-chip-accent);
	transition:
		background-color var(--wp--custom--motion--duration-fast) ease,
		border-color var(--wp--custom--motion--duration-fast) ease,
		color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-card__chip-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: currentColor;
	transition: background-color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-card__chip-icon::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--white);
	-webkit-mask: url(../../images/icon-check.svg) center / contain no-repeat;
	mask: url(../../images/icon-check.svg) center / contain no-repeat;
	transition: background-color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-card__chip-text {
	color: var(--wp--custom--color--ink-strong);
	transition: color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-card__chip-text strong {
	font-weight: var(--wp--custom--font--weight-ui);
	color: var(--tri-skill-chip-accent);
	transition: color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-card__chip--orange {
	--tri-skill-chip-accent: var(--wp--preset--color--orange);
	--tri-skill-chip-hover: var(--wp--preset--color--orange-hover);
}

.tri-skill-card__chip--blue {
	--tri-skill-chip-accent: #0e5dd3;
	--tri-skill-chip-hover: #0c4fb3;
}

/* Hover/focus: đổ nền accent (đậm hơn một chút), chữ + icon đảo màu. */
.tri-skill-card__chip:hover,
.tri-skill-card__chip:focus-visible,
.tri-skill-card:hover .tri-skill-card__chip,
.tri-skill-card:focus-visible .tri-skill-card__chip {
	background: var(--tri-skill-chip-hover, var(--tri-skill-chip-accent));
	border-color: var(--tri-skill-chip-hover, var(--tri-skill-chip-accent));
	color: var(--wp--preset--color--white);
}

.tri-skill-card__chip:hover .tri-skill-card__chip-text,
.tri-skill-card__chip:hover .tri-skill-card__chip-text strong,
.tri-skill-card__chip:focus-visible .tri-skill-card__chip-text,
.tri-skill-card__chip:focus-visible .tri-skill-card__chip-text strong,
.tri-skill-card:hover .tri-skill-card__chip-text,
.tri-skill-card:hover .tri-skill-card__chip-text strong,
.tri-skill-card:focus-visible .tri-skill-card__chip-text,
.tri-skill-card:focus-visible .tri-skill-card__chip-text strong {
	color: var(--wp--preset--color--white);
}

.tri-skill-card__chip:hover .tri-skill-card__chip-icon,
.tri-skill-card__chip:focus-visible .tri-skill-card__chip-icon,
.tri-skill-card:hover .tri-skill-card__chip-icon,
.tri-skill-card:focus-visible .tri-skill-card__chip-icon {
	background: var(--wp--preset--color--white);
}

.tri-skill-card__chip:hover .tri-skill-card__chip-icon::before,
.tri-skill-card__chip:focus-visible .tri-skill-card__chip-icon::before,
.tri-skill-card:hover .tri-skill-card__chip-icon::before,
.tri-skill-card:focus-visible .tri-skill-card__chip-icon::before {
	background: var(--tri-skill-chip-hover, var(--tri-skill-chip-accent));
}

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

	}

	.tri-problem-banner {
		grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
		align-items: stretch;
		min-height: 320px;
		padding: 36px 12px 0 36px;
		gap: 12px;

	}

	.tri-problem-banner__list {
		padding-bottom: 0;
		align-self: center;
		padding-block: 8px;

	}

	.tri-problem-banner__media {
		min-height: 0;

	}

	.tri-problem-banner__media img {
		left: 50%;
		right: auto;
		height: calc(100% + 80px);
		max-width: 100%;
		width: auto;
		object-position: bottom center;
		transform: translateX(calc(-50% - 36px));

	}

	/* Lộ trình: hai thẻ tách — trái 1 : phải 2 (áp cho mọi panel xếp chồng). */
	.tri-roadmap__panels > .tri-stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 20px;

	}

	[data-tri-timeline] > .tri-timeline-tabs {
		display: none !important;

	}

	.tri-timeline__viewport {
		overflow: visible;
		cursor: auto;
		touch-action: auto;
		user-select: auto;

	}

	.tri-timeline {
		transform: none !important;

	}

	.tri-timeline__row {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 24px;
		align-items: start;

	}

	/* Cột mốc: số trên, nhãn dưới; nối bằng đường đứt nét + chevron.
		   --tri-tl-gap: khoảng trống đối xứng — circle bottom → line start
		   và arrow tip → next circle (không chạm vòng; đủ lớn để tránh đè nhãn).
		   --tri-tl-tip-nudge: bù transform rotate để tip visual khớp --tri-tl-gap. */
	.tri-timeline__marker {
		--tri-tl-num: 36px;
		--tri-tl-pad: 20px;
		--tri-tl-row-gap: 20px;
		--tri-tl-gap: 28px;
		--tri-tl-chevron: 10px;
		--tri-tl-tip-nudge: 7px;
		position: relative;
		z-index: 1;
		align-self: stretch;
		flex-direction: column;
		gap: 6px;
		padding-top: var(--tri-tl-pad);
		isolation: isolate;

	}

	/* Line: starts --tri-tl-gap below current circle; ends just above chevron tip. */
	.tri-timeline__row:not(:last-child) .tri-timeline__marker::after {
		content: "";
		position: absolute;
		top: calc(var(--tri-tl-pad) + var(--tri-tl-num) + var(--tri-tl-gap));
		bottom: calc(
			-1 * (var(--tri-tl-row-gap) + var(--tri-tl-pad) - var(--tri-tl-gap))
			+ var(--tri-tl-tip-nudge)
			- 6px
		);
		left: 50%;
		z-index: 0;
		width: 0;
		transform: translateX(-50%);
		border-left: 3px dashed var(--wp--preset--color--navy);
		pointer-events: none;

	}

	/* Chevron tip --tri-tl-gap above next circle (matches gap above). */
	.tri-timeline__row:not(:last-child) .tri-timeline__marker::before {
		content: "";
		position: absolute;
		bottom: calc(
			-1 * (var(--tri-tl-row-gap) + var(--tri-tl-pad) - var(--tri-tl-gap))
			+ var(--tri-tl-tip-nudge)
		);
		left: 50%;
		z-index: 0;
		width: var(--tri-tl-chevron);
		height: var(--tri-tl-chevron);
		border-right: 3px solid var(--wp--preset--color--navy);
		border-bottom: 3px solid var(--wp--preset--color--navy);
		transform: translate(-50%, 50%) rotate(45deg);
		pointer-events: none;

	}

	.tri-timeline__num,
		.tri-timeline__milestone {
		position: relative;
		z-index: 1;

	}

	/* Facts: 3 columns under heading inside column 2. */
	.tri-timeline__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;

	}

	/* Vách ngăn đứt nét giữa 3 cột thông tin. */
	.tri-timeline__fact + .tri-timeline__fact {
		padding-left: 16px;
		margin-left: 16px;
		border-left: 1px dashed color-mix(in srgb, currentColor 45%, transparent);

	}

	.tri-skill-courses__viewport {
		padding-inline: 18px;

	}
}

@media (max-width: 767px) {
	.tri-skill-courses {
		gap: 8px;
		width: min(100%, calc(100% - 16px));

	}

	.tri-skill-courses__viewport {
		padding: 48px 12px 44px;

	}

	.tri-skill-card {
		padding: 36px 12px 18px;
		gap: 12px;

	}

	.tri-skill-card__meta {
		flex-wrap: nowrap;
		gap: 6px;

	}

	.tri-skill-card__chip {
		padding: 5px 8px;
		font-size: 11px;

	}

	.tri-skill-card__ribbon {
		padding-inline: 14px;
		font-size: var(--tri-text-12);
		white-space: normal;
		max-width: calc(100% - 24px);

	}
}

/* ?? IELTS t? s? 0: layout + outcomes + curriculum ?? */
.tri-course-layout {
	display: grid;
	gap: 32px;
	align-items: start;
	padding-block: 24px 8px;
	overflow: visible;
}

.tri-course-layout__main {
	min-width: 0;
	overflow: visible;
}

.tri-problem-banner-section--nested {
	padding-top: 48px;
}

.tri-problem-banner-section--nested .tri-problem-banner {
	width: 100%;
}

.tri-course-aside {
	position: relative;
	margin-inline: auto;
	max-width: 244px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.tri-course-aside__link {
	display: block;
	line-height: 0;
}

.tri-course-aside__img {
	display: block;
	width: 100%;
	height: auto;
}

.tri-course-aside__cta {
	display: flex;
	width: 100%;
	margin-top: 16px;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ── Luyện thi IELTS dùng chung shell .tri-knowledge (xem khối Kiến thức). ── */
.tri-outcome-stack {
	display: grid;
	gap: 20px;
}

.tri-outcome-card {
	display: grid;
	gap: 20px;
	padding: 24px 20px;
	border-radius: 16px;
	background: var(--wp--custom--color--ice-soft);
}

.tri-outcome-card__label {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	color: var(--wp--preset--color--navy);
}

.tri-outcome-card__num {
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1;
}

.tri-outcome-card__name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tri-outcome-card__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: none;
	border-left: 1px dashed var(--wp--preset--color--royal);
	display: grid;
	gap: 18px;
}

.tri-outcome-card__list li {
	position: relative;
	padding-left: 16px;
}

.tri-outcome-card__list li::before {
	content: "";
	position: absolute;
	left: -23px;
	top: 0.45em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px var(--wp--custom--color--ice-soft);
}

.tri-outcome-card__list strong {
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-strong);
	letter-spacing: 0.02em;
}

.tri-outcome-card__list p {
	margin: 0;
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.tri-curriculum-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 24px;
}

.tri-curriculum-stats__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ice) 72%, #9eb0d4);
	border-radius: 6px;
	background-color: color-mix(in srgb, var(--wp--custom--color--ice-soft) 55%, #eef2ff);
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, #f0f5ff 70%, white) 0%,
		color-mix(in srgb, var(--wp--custom--color--ice-soft) 65%, #e8eeff) 100%
	);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.3;
}

.tri-curriculum-stats__svg {
	flex-shrink: 0;
	display: block;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--navy);
}

.tri-curriculum-stats__label {
	min-width: 0;
}

.tri-curriculum {
	display: grid;
	gap: 10px;
}

.tri-curriculum__row {
	overflow: hidden;
	border-radius: 20px;
	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%
	);
	box-shadow: 0 4px 14px rgba(9, 31, 91, 0.07);
}

.tri-curriculum__row:not([open])::details-content,
.tri-curriculum__row:not([open]) > .tri-curriculum__points {
	display: none;
}

.tri-curriculum__row::details-content {
	display: block;
	width: 100%;
}

.tri-curriculum__row summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.35;
}

.tri-curriculum__row summary::-webkit-details-marker {
	display: none;
}

.tri-curriculum__title {
	flex: 1;
	min-width: 0;
}

.tri-curriculum__chev {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease;
}

.tri-curriculum__chev::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--wp--preset--color--white);
	border-bottom: 2px solid var(--wp--preset--color--white);
	transform: rotate(-45deg);
	margin-left: -2px;
	transition: transform 0.2s ease, border-color 0.2s ease, margin 0.2s ease;
}

.tri-curriculum__row[open] {
	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%
	);
	box-shadow: 0 8px 22px rgba(9, 31, 91, 0.18);
}

.tri-curriculum__row[open] summary {
	color: var(--wp--preset--color--white);
}

.tri-curriculum__row[open] .tri-curriculum__chev {
	background: var(--wp--preset--color--white);
}

.tri-curriculum__row[open] .tri-curriculum__chev::before {
	border-color: var(--wp--preset--color--navy);
	transform: rotate(45deg);
	margin-left: 0;
	margin-top: -2px;
}

.tri-curriculum__points {
	margin: 0;
	padding: 0 18px 16px 34px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, #c5d0e8);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	list-style: disc;
}

.tri-curriculum__points li + li {
	margin-top: 6px;
}

.tri-curriculum__points li::marker {
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, var(--wp--preset--color--action));
}

/* ─── Bài liên quan ở cột phải ───────────────────────────────────────── */
.tri-side-posts {
	margin-top: 32px;
}

@media (min-width: 1200px) {
	.tri-side-posts {
		margin-top: 0;

	}
}

.tri-side-posts__head {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--sky);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-strong);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-side-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-side-posts__item + .tri-side-posts__item {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--sky);
}

.tri-side-posts__item a {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.tri-side-posts__item img,
.tri-side-posts__ph {
	display: block;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--placeholder);
}

.tri-side-posts__title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.35;
	/* Cột aside ≈ 2/8 frame — cắt 3 dòng để các mục không so le nhau. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tri-side-posts__item a:hover .tri-side-posts__title,
.tri-side-posts__item a:focus-visible .tri-side-posts__title {
	color: var(--wp--preset--color--royal);
}

/* Màn vừa: cột phải nằm ngang dưới bài, xếp bài liên quan thành lưới cho
   đỡ thành một cột dài ngoẵng. */
@media (min-width: 640px) and (max-width: 1199px) {
	.tri-side-posts__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 24px;

	}

	.tri-side-posts__item + .tri-side-posts__item {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;

	}
}

@media (max-width: 1024px) {
	/* Dưới 1024px: mỗi hàng đúng 2 vòng, khít bề ngang và đan vào nhau. */
	.tri-skills {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Không stretch ô lưới — giữ hình tròn khi width % ≠ height content. */
		align-items: center;
		justify-items: stretch;
		column-gap: 0;
		row-gap: 12px;
		width: 100%;
		max-width: none;
		margin-top: 24px;
		/* Mobile: đường kính ≈ 108% nửa cột; --tri-skill-s theo đường kính thật. */
		--tri-skill-d: auto;
		--tri-skill-s: clamp(0.5, calc((100vw - 48px) * 0.54 / 281px), 1.15);
		--tri-skill-icon: calc(31px * var(--tri-skill-s));
		--tri-skill-fs-label: calc(20px * var(--tri-skill-s));
		--tri-skill-fs-band: calc(15px * var(--tri-skill-s));
		--tri-skill-band-h: calc(31px * var(--tri-skill-s));
		--tri-skill-gap-label: calc(11px * var(--tri-skill-s));
		--tri-skill-gap-bands: calc(8px * var(--tri-skill-s));
		--tri-skill-gap-band: calc(9px * var(--tri-skill-s));

	}

	.tri-skill {
		width: 108%;
		height: auto;
		flex: none;
		max-width: none;
		min-width: 0;
		min-height: 0;
		aspect-ratio: 1 / 1;
		justify-content: center;
		align-items: center;
		padding: 9% 6%;
		overflow: hidden;

	}

	.tri-skill:nth-child(odd) {
		justify-self: start;

	}

	.tri-skill:nth-child(even) {
		justify-self: end;
		position: relative;
		z-index: 1;

	}

	.tri-skill__band {
		width: 68%;
		height: auto;
		min-height: var(--tri-skill-band-h);
		padding: 0 2px;

	}

	.tri-picker__tabs {
		display: flex;

	}

	.tri-picker__reset {
		display: inline-block;

	}

	/* Thay 3 nút tiêu đề cột bằng tabs + Chọn lại.
		   !important: đè rule nền `button.tri-picker__head:hover/:focus { display:block }`
		   (specificity cao hơn) — tránh hiện lại nút navy đè lên tab mobile. */
	button.tri-picker__head,
		button.tri-picker__head:hover,
		button.tri-picker__head:focus,
		button.tri-picker__head:focus-visible {
		display: none !important;

	}

	.tri-picker > [data-tri-picker-panel] {
		display: none !important;

	}

	.tri-picker[data-tri-picker-step="1"] > [data-tri-picker-panel="1"],
		.tri-picker[data-tri-picker-step="2"] > [data-tri-picker-panel="2"],
		.tri-picker[data-tri-picker-step="3"] > [data-tri-picker-panel="3"] {
		display: flex !important;

	}

	/* ≤1024 chỉ hiện đích đến còn chọn được (đã có is-disabled từ JS). */
	.tri-picker__option.is-disabled {
		display: none;

	}

	/* Thẻ ảnh bên cạnh trang khóa học: trên điện thoại / tablet to gần hết khung. */
	.tri-course-aside {
		width: 100%;
		max-width: 400px;

	}
}

/* Khóa bổ trợ kỹ năng: trên điện thoại thẻ rộng gần hết màn, mũi tên nổi
   trên mép thẻ thay vì chiếm 2 cột hai bên (thẻ còn 207px, chip bị cắt). */
@media (max-width: 767px) {
	.tri-skill-courses {
		width: 100%;
		gap: 0;

	}

	.tri-skill-courses__viewport {
		padding: 48px 16px 44px;

	}

	.tri-skill-courses > [data-tri-skill-prev],
		.tri-skill-courses > [data-tri-skill-next] {
		position: absolute;
		top: 42%;
		z-index: 3;
		transform: translateY(-50%);
		box-shadow: 0 6px 16px rgba(9, 31, 91, 0.25);

	}

	.tri-skill-courses > [data-tri-skill-prev] {
		left: 4px;

	}

	.tri-skill-courses > [data-tri-skill-next] {
		right: 4px;

	}

	.tri-skill-card {
		padding: 36px 16px 20px;

	}

	.tri-skill-card__meta {
		flex-wrap: wrap;

	}

	.tri-skill-card__chip {
		font-size: 12px;

	}
}

/* -- Trang nhóm Khóa học (page-templates/khoa-hoc-nhom.php) --------------- */
.tri-course-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tri-course-row__link {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 14px;
	border: 1px solid #e3e8f2;
	border-radius: var(--wp--custom--radius--card, 16px);
	background: #fff;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tri-course-row__link:hover,
.tri-course-row__link:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--action) 40%, #e3e8f2);
	box-shadow: 0 16px 34px rgba(16, 24, 40, 0.12);
	transform: translateY(-2px);
}

.tri-course-row__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	background: color-mix(in srgb, var(--wp--preset--color--ice, #e7f0fb) 70%, #fff);
}

.tri-course-row__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.tri-course-row__band {
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--orange) 12%, #fff);
	color: var(--wp--preset--color--orange);
	font-size: 12px;
	font-weight: 700;
}

.tri-course-row__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.3;
}

.tri-course-row__desc {
	margin: 0;
	color: #4a5a7a;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.tri-course-row__more {
	margin-top: 4px;
	color: var(--wp--preset--color--action);
	font-size: 14px;
	font-weight: 700;
}

/* ══ Lộ trình đào tạo tinh gọn: màu theo độ khó tăng dần ═════════════════
   template-parts/timeline.php in --tri-tl-c cho từng chặng (#6FA8EF → navy).
   Vòng số tô đặc, viền + vạch trái thẻ, nền đầu thẻ, đường nối tới chặng sau.
   Hover vẫn phủ navy như cũ để chữ trắng luôn đủ tương phản. */
.tri-timeline__row {
	--tri-tl-c: var(--wp--preset--color--navy);
}

.tri-timeline__num {
	border-color: var(--tri-tl-c);
	background: var(--tri-tl-c);
	color: var(--wp--preset--color--white);
}

.tri-timeline__milestone {
	font-size: var(--tri-text-12);
	color: color-mix(in srgb, var(--tri-tl-c) 80%, var(--wp--custom--color--ink, #1d2939));
	font-weight: var(--wp--custom--font--weight-ui);
}

.tri-timeline__card {
	border-color: color-mix(in srgb, var(--tri-tl-c) 55%, transparent);
	border-left: 5px solid var(--tri-tl-c);
}

.tri-timeline__head {
	background: color-mix(in srgb, var(--tri-tl-c) 18%, var(--wp--preset--color--white));
}

.tri-timeline__thumb {
	border-color: color-mix(in srgb, var(--tri-tl-c) 35%, transparent);
}

.tri-timeline__row:not(:last-child) .tri-timeline__marker::after {
	border-left-color: var(--tri-tl-c);
}

.tri-timeline__row:not(:last-child) .tri-timeline__marker::before {
	border-right-color: var(--tri-tl-c);
	border-bottom-color: var(--tri-tl-c);
}

.tri-timeline__row:hover .tri-timeline__num,
.tri-timeline__row:focus-within .tri-timeline__num {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
}

.tri-timeline__row:hover .tri-timeline__card,
.tri-timeline__row:focus-within .tri-timeline__card {
	border-left-color: var(--wp--preset--color--orange, #ec6207);
}

/* ══ Khoá học bổ trợ kỹ năng: dải tên khoá vắt qua mép trên thẻ ══════════
   Ảnh sát mép trên thẻ; dải navy phủ phần trên ảnh, bo 2 góc dưới; 2 "tai"
   navy đậm ló hai bên phía trên (như băng gập ra sau thẻ).
   ::after = thân dải, ::before = tai (z-index âm trong stacking của dải). */
.tri-skill-card {
	padding-top: 0;
}

.tri-skill-card__media {
	aspect-ratio: 4 / 3;
	min-height: 160px;
	overflow: hidden;
	background: var(--wp--preset--color--muted);
	width: calc(100% + 36px);
	margin: 0 -18px;
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
}

.tri-skill-courses__viewport {
	padding-top: 32px;
}

.tri-skill-card__ribbon {
	--tri-rib-ear: 14px;
	top: calc(-1 * var(--tri-rib-ear));
	width: calc(100% - 56px);
	max-width: 420px;
	padding: calc(var(--tri-rib-ear) + 14px) 16px 16px;
	transform: translateX(-50%);
	border-radius: 0 0 22px 22px;
	background: none;
	box-shadow: none;
	font-size: var(--tri-text-18);
	font-weight: var(--wp--custom--font--weight-strong);
	letter-spacing: 0.01em;
	white-space: normal;
}

.tri-skill-card__ribbon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, #0b2a66 0%, #081f58 100%);
	box-shadow: 0 8px 18px rgba(9, 31, 91, 0.28);
}

.tri-skill-card__ribbon::before {
	content: "";
	position: absolute;
	top: -4px;
	left: calc(-1 * var(--tri-rib-ear));
	right: calc(-1 * var(--tri-rib-ear));
	z-index: -2;
	width: auto;
	height: calc(var(--tri-rib-ear) + 4px);
	transform: none;
	border-radius: 9px 9px 0 0;
	background: #020a2e;
}

@media (max-width: 767px) {
	/* Điện thoại: thẻ dọc, ảnh to full ngang thẻ. */
	.tri-course-row__link {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 12px;

	}

	[data-tri-timeline] .tri-timeline-tabs__btn {
		border-color: var(--tri-tl-c);
		color: var(--tri-tl-c);

	}

	[data-tri-timeline] .tri-timeline-tabs__btn.is-active {
		border-color: var(--tri-tl-c);
		background: var(--tri-tl-c);
		color: var(--wp--preset--color--white);

	}

	.tri-timeline__row.is-active .tri-timeline__card {
		border-color: var(--tri-tl-c);

	}

	.tri-skill-card {
		padding-top: 0;

	}

	/* Lề ngang thẻ trên điện thoại = 16px (luật .tri-skill-card ≤767 phía trên). */
	.tri-skill-card__media {
		width: calc(100% + 32px);
		margin: 0 -16px;

	}

	.tri-skill-card__ribbon {
		--tri-rib-ear: 10px;
		width: calc(100% - 36px);
		padding: calc(var(--tri-rib-ear) + 10px) 12px 12px;
		border-radius: 0 0 16px 16px;
		font-size: var(--wp--preset--font-size--small);

	}
}

@media (min-width: 1025px) {
	.tri-issues {
		/* Cùng Why orbit: length/length → hệ số đơn vị; KHÔNG chia vp / --tri-type-ref
		   (unitless) — sẽ ra length rồi 306px * 1px = invalid. */
		--tri-issues-s: clamp(0.75, calc(var(--tri-vp) / 1440px), 1.4);
		--tri-issue-w: calc(306px * var(--tri-issues-s));
		--tri-issue-h: calc(133px * var(--tri-issues-s));
		--tri-issue-x: calc(37px * var(--tri-issues-s));
		--tri-issue-tail-w: calc(35px * var(--tri-issues-s));
		--tri-issue-tail-h: calc(25px * var(--tri-issues-s));
		--tri-issue-tail-in: calc(72px * var(--tri-issues-s));
		--tri-issue-blob: calc(14px * var(--tri-issues-s));
		--tri-issues-hub: calc(452px * var(--tri-issues-s));
		display: block;
		position: relative;
		width: min(
			calc(901px * var(--tri-issues-s)),
			calc(var(--tri-vp) - 2 * var(--tri-section-px))
		);
		height: calc(480px * var(--tri-issues-s));
		gap: 0;

	}

	.tri-issues__viewport,
		.tri-issues__track {
		display: contents;

	}

	.tri-issues__hub {
		position: absolute;
		left: 50%;
		top: 0;
		width: var(--tri-issues-hub);
		margin-left: calc(var(--tri-issues-hub) / -2);

	}

	.tri-issue p {
		font-size: calc(15px * var(--tri-issues-s));

	}

	.tri-issue--tl,
		.tri-issue--tr {
		top: calc(64px * var(--tri-issues-s));

	}

	.tri-issue--bl,
		.tri-issue--br {
		top: calc(347px * var(--tri-issues-s));

	}

	.tri-issue--tl {
		left: 0;

	}

	.tri-issue--tr {
		right: 0;

	}

	.tri-issue--bl {
		left: calc(73px * var(--tri-issues-s));

	}

	.tri-issue--br {
		right: calc(68px * var(--tri-issues-s));

	}

	/* Huy hiệu × đúng góc ngoài: trái → cạnh trái, phải → cạnh phải. */
	.tri-issue--tl .tri-issue__x,
		.tri-issue--bl .tri-issue__x {
		left: calc(var(--tri-issue-x) / -2);

	}

	.tri-issue--tr .tri-issue__x,
		.tri-issue--br .tri-issue__x {
		left: auto;
		right: calc(var(--tri-issue-x) / -2);

	}

	/* Đuôi bong bóng + viên cong chỗ chạm mép thẻ (desktop orbit). */
	.tri-issue::before,
		.tri-issue::after {
		content: "";
		position: absolute;
		background: var(--wp--preset--color--white);
		pointer-events: none;

	}

	.tri-issue::before {
		width: var(--tri-issue-tail-w);
		height: var(--tri-issue-tail-h);

	}

	.tri-issue--tl::before,
		.tri-issue--tr::before {
		top: 100%;

	}

	.tri-issue--bl::before,
		.tri-issue--br::before {
		bottom: 100%;

	}

	/* Đỉnh đuôi lệch về vòng tròn: mép trong 72px → ~17% từ mép trong đuôi. */
	.tri-issue--tl::before {
		right: var(--tri-issue-tail-in);
		clip-path: polygon(0 0, 100% 0, 83% 100%);

	}

	.tri-issue--tr::before {
		left: var(--tri-issue-tail-in);
		clip-path: polygon(0 0, 100% 0, 17% 100%);

	}

	.tri-issue--bl::before {
		right: var(--tri-issue-tail-in);
		clip-path: polygon(0 100%, 100% 100%, 83% 0);

	}

	.tri-issue--br::before {
		left: var(--tri-issue-tail-in);
		clip-path: polygon(0 100%, 100% 100%, 17% 0);

	}

	/* Blob căn giữa đáy/đỉnh đuôi, nửa nằm trên thẻ (chạm mép). */
	.tri-issue--tl::after {
		right: calc(var(--tri-issue-tail-in) + var(--tri-issue-tail-w) * 0.415 - var(--tri-issue-blob) / 2);
		bottom: calc(var(--tri-issue-blob) / -2);

	}

	.tri-issue--tr::after {
		left: calc(var(--tri-issue-tail-in) + var(--tri-issue-tail-w) * 0.085 - var(--tri-issue-blob) / 2);
		bottom: calc(var(--tri-issue-blob) / -2);

	}

	.tri-issue--bl::after {
		right: calc(var(--tri-issue-tail-in) + var(--tri-issue-tail-w) * 0.415 - var(--tri-issue-blob) / 2);
		top: calc(var(--tri-issue-blob) / -2);

	}

	.tri-issue--br::after {
		left: calc(var(--tri-issue-tail-in) + var(--tri-issue-tail-w) * 0.085 - var(--tri-issue-blob) / 2);
		top: calc(var(--tri-issue-blob) / -2);

	}

	/* Thanh tiến độ lộ trình + orbit + 4 vòng kỹ năng: ≥1025 với kích thước
	   fluid theo --tri-frame / neo 1440 (trước đây khóa 1100 vì cố định px). */
	/* Figma: 4 vòng tròn 281px @1440, tâm cách ~237.5 → chồng ~44px @281.
		   Scale diameter + overlap cùng tỉ lệ (--tri-skill-s trên .tri-skills). */
	.tri-skills {
		flex-wrap: nowrap;
		gap: 0;
		align-items: center;

	}

	.tri-skill + .tri-skill {
		margin-left: calc(var(--tri-skill-d) * -44 / 281);

	}

	.tri-picker {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
		align-items: stretch;

	}

	.tri-picker__col--result {
		grid-column: span 2;

	}

	.tri-picker__tabs,
		.tri-picker__reset {
		display: none !important;

	}

	.tri-picker > [data-tri-picker-panel] {
		display: flex !important;

	}

	.tri-course-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
		align-items: start;

	}

	.tri-course-aside {
		position: sticky;
		top: calc(var(--tri-adminbar) + var(--tri-header-h) + 16px);

	}

	.tri-outcome-card {
		grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
		align-items: start;
		gap: 28px;
		padding: 28px 24px;

	}

	.tri-outcome-card__label {
		padding-top: 8px;

	}

	/* Viên cong (blob) neo vào mép thẻ tại điểm đuôi chạm. */
	/* ══ Vấn đề học viên IELTS thường gặp: khớp thiết kế ═══════════════════
	   - Bỏ "viên cong" (::after) ở chỗ đuôi chạm thẻ: ở thẻ phải nó lồi ra ngoài
	     cạnh xiên của đuôi thành vết khuyết / lồi (thiết kế không có).
	   - Tiêu đề 1 dòng như thiết kế ("Phương pháp học chưa hiệu quả"). */
	.tri-issue::after {
		width: var(--tri-issue-blob);
		height: var(--tri-issue-blob);
		border-radius: 50%;
		z-index: 1;
		content: none;
	}

	.tri-issue {
		position: absolute;
		width: var(--tri-issue-w);
		height: var(--tri-issue-h);
		max-width: none;
		min-height: 0;
		padding: calc(16px * var(--tri-issues-s)) calc(25px * var(--tri-issues-s));
		border-radius: calc(8px * var(--tri-issues-s));
		box-shadow: 0 calc(4px * var(--tri-issues-s)) calc(26px * var(--tri-issues-s))
				rgba(9, 31, 91, 0.1);
		padding-inline: calc(22px * var(--tri-issues-s));
	}

	.tri-issue h3 {
		margin-bottom: calc(10px * var(--tri-issues-s));
		font-size: calc(16px * var(--tri-issues-s));
		letter-spacing: -0.005em;
	}
}