/*
 * Thẻ dùng chung: học viên, review, cảm nhận, giảng viên, tin, chứng chỉ, số liệu
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

.tri-stats--cards {
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 24px;
	max-width: var(--tri-frame);
}

.tri-stats--cards .tri-stat-card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* ch?a ch? cho thanh navy l? xu?ng d??i ??y (nh? .tri-cred) */
	margin-bottom: 9px;
	padding: 20px 16px 16px;
	/* N?n/vi?n/shadow chuy?n sang ::before ?? ::after kh?ng ?? m?t th? */
	background: transparent;
	border: none;
	box-shadow: none;
	text-align: center;
	isolation: isolate;
}

/* M?t th? (n?n + vi?n + bo g?c) n?m tr?n thanh navy. */
.tri-stats--cards .tri-stat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--wp--custom--color--ice-soft);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Thanh navy n?m sau m?t th?, ch? l? ph?n ??y ra ngo?i. */
.tri-stats--cards .tri-stat-card::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	z-index: -1;
	width: 140px;
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

.tri-stats--cards .tri-stat-card > * {
	position: relative;
	z-index: 1;
}

.tri-stats--cards .tri-stat-card.is-featured::before {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.tri-stat-card__box {
	width: 100%;
	padding: 16px 14px;
	border: 1px solid var(--wp--preset--color--ice);
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--custom--color--ice-soft);
}

.tri-stats--cards .tri-stat-card__box strong {
	display: block;
	margin-bottom: 8px;
	background-image: linear-gradient(90deg, var(--wp--preset--color--action) 0%, var(--wp--preset--color--cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	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: 1.15;
}

.tri-stat-card__box p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--navy);
}

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

.tri-stat-card__check::before {
	content: "";
	width: 16px;
	height: 16px;
	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;
}

.tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__check {
	background: var(--wp--preset--color--white);
}

.tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__check::before {
	background: var(--wp--preset--color--navy);
}

.tri-stat-card__title {
	margin: 0;
	padding: 0 4px;
	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;
	color: var(--wp--preset--color--navy);
}

.tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__title {
	color: var(--wp--preset--color--white);
}

.tri-stat-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 286 / 188;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--field);
	margin-top: auto;
}

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

	}
}

/* Dải chạy trang chủ dùng lại thẻ học viên nhưng ở dạng gọn: không thanh
   navy, không nút. Vị trí ảnh / cung / huy hiệu lấy từ .tri-student-card. */
.tri-marquee .tri-student-card {
	box-sizing: border-box;
	--tri-sc-avatar: var(--tri-mq-avatar);
	--tri-sc-ring: 2px;
	--tri-sc-badge: clamp(32px, calc(var(--tri-mq-avatar) * 0.36), 44px);
	--tri-sc-text-gap: 12px;
	flex: 0 0 var(--tri-mq-card);
	width: var(--tri-mq-card);
	max-width: none;
	height: auto;
	margin: 0;
	padding-inline: clamp(10px, calc(var(--tri-mq-card) * 0.06), 16px);
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
	border-radius: 16px;
	box-shadow: none;
}

.tri-marquee .tri-student-card::before {
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.tri-marquee .tri-student-card::after {
	content: none;
}

.tri-marquee .tri-student-card__badge-score {
	font-size: var(--wp--preset--font-size--medium);
}

/* Badge / chip micro ≤11px: cố định, không fluid theo 1440. */
.tri-marquee .tri-student-card__badge-label {
	font-size: 9px;
}

.tri-marquee .tri-student-card__body {
	width: 100%;
	padding: 0 2px;
}

.tri-marquee .tri-student-card__name {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

.tri-marquee .tri-student-card__note {
	margin: 0;
	padding-inline: 2px;
	font-size: var(--tri-text-12);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tri-marquee .tri-student-card__more {
	display: none;
}

.tri-teachers {
	display: grid;
	gap: 16px;
	/* Dong bo --tri-frame voi cac section khac (Figma goc la 999, gian ty le). */
	max-width: var(--tri-frame);
	margin: 0 auto;
}

/* Figma: kh?ng c? th? n?n navy ? ch? ?nh navy r?i ch? n?m tr?n n?n trang. */
.tri-teacher {
	padding: 0;
	background: none;
	color: inherit;
}

/* Ảnh giảng viên thật. Trước đây chỉ có luật cho ô xám .tri-ph--photo nên
   khi có bản ghi thật thì ảnh in ra ở kích thước gốc, phá vỡ bố cục.
   Tỉ lệ 4:5 khớp đúng ảnh thẻ trong assets/images/giang-vien/. */
/* Figma: 452x194, bo 15px — cùng khổ với ô xám .tri-ph--photo ngay trên,
   nên có ảnh thật hay chưa thì bố cục vẫn y nhau.

   Ảnh nguồn là thẻ DỌC 400x500, cắt về khổ ngang này chỉ còn một dải
   172px trong 500px gốc — chọn dải nào là chuyện sống còn. Dựng thử cả
   chín người ở 0% / 8% / 15% / 28%: từ 15% trở đi là cụt đỉnh đầu vài
   người, 0% thì thừa một mảng navy phía trên và mặt tụt xuống thấp. 8%
   vừa đủ trọn khuôn mặt vừa giữ được huy hiệu band ở góc phải. */
.tri-teacher__photo {
	display: block;
	width: 100%;
	aspect-ratio: 452 / 194;
	object-fit: cover;
	/* Trước là `center 8%`, chỉnh tay cho hợp với ảnh thẻ DỌC bị nhét vào
	   khung ngang. Giờ giảng viên có ô ảnh ngang riêng đúng 452x194 nên
	   không còn phần thừa nào để canh; để `center` cho đúng khi sếp tải lên
	   ảnh tỉ lệ khác. */
	object-position: center;
	border-radius: var(--wp--custom--radius--field);
}

.tri-teacher__link {
	display: block;
	border-radius: var(--wp--custom--radius--field);
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-teacher__link:hover {
	transform: translateY(-3px);
}

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

/* Mọi hồ sơ nằm CHUNG một ô lưới nên chiều cao khối bằng hồ sơ dài nhất —
   đổi người không làm trang nhảy. Rẻ hơn position:absolute nhiều: không
   phải đo chiều cao bằng JS, và tắt JS thì hồ sơ đầu vẫn chiếm chỗ đúng. */
.tri-teacher--stack {
	position: relative;
	display: grid;
}

.tri-teacher-switch {
	display: none;
}

/* Mobile + tablet (≤1024): bỏ lưới ảnh, chỉ hồ sơ và hai mũi tên. Desktop ≥1025 giữ lưới. */
@media (max-width: 1024px) {
	.tri-teachers {
		grid-template-columns: minmax(0, 1fr);

	}

	.tri-teachers[data-tri-teachers] .tri-teacher-col {
		display: none;

	}

	.tri-teacher-switch {
		position: absolute;
		top: 64px;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
		box-shadow: 0 4px 12px rgba(9, 31, 91, 0.22);
		cursor: pointer;

	}

	.tri-teacher-switch--prev {
		left: 0;

	}

	.tri-teacher-switch--next {
		right: 0;

	}

	.tri-teacher-switch::before {
		content: "";
		width: 12px;
		height: 12px;
		background: currentColor;
		-webkit-mask: url(../../images/icon-chevron.svg) center / contain no-repeat;
		mask: url(../../images/icon-chevron.svg) center / contain no-repeat;

	}

	.tri-teacher-switch--prev::before {
		transform: rotate(180deg);

	}

	.tri-teacher--stack {
		padding-inline: 8px;

	}
}

.tri-teacher__card {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--motion--duration-mid) ease;
}

.tri-teacher__card.is-active {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.tri-teacher__card,
		.tri-teacher__link,
		.tri-cred,
		.tri-voice {
		transition: none;

	}
}

/* Figma: thẻ trắng bo góc, bóng mềm, cột giữa — ảnh tròn + tên + band. */
.tri-teacher-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 16px 10px 14px;
	border: 0;
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 20px rgba(15, 40, 100, 0.08);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	text-align: center;
	cursor: pointer;
	/* Viền active/focus bằng outline: không chiếm chỗ, lưới không xô. */
	outline: 3px solid transparent;
	outline-offset: 2px;
	transition: outline-color var(--wp--custom--motion--duration-mid) ease,
		transform var(--wp--custom--motion--duration-mid) ease,
		box-shadow var(--wp--custom--motion--duration-mid) ease;
}

/* Ô rỗng lấp chỗ ở trang cuối: giữ đủ số hàng cho lưới, để thanh phân
   trang bên dưới không nhảy lên khi trang đó ít thẻ hơn. */
.tri-teacher-grid__item--empty {
	visibility: hidden;
	pointer-events: none;
	cursor: default;
	box-shadow: none;
}

.tri-teacher-grid__photo {
	display: block;
	/* Ảnh tròn rộng nửa thẻ → chiếm khoảng nửa thẻ cả ngang lẫn dọc.
	   Sàn 64px cho lưới 3 cột trên điện thoại (thẻ chỉ ~100px). */
	width: clamp(64px, 70%, 140px);
	height: auto;
	aspect-ratio: 1;
	flex-shrink: 0;
	object-fit: cover;
	/* Huy hiệu band nằm góc trên; neo lên trên để nó không bị cắt. */
	object-position: top center;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.tri-teacher-grid__name {
	display: block;
	margin: 2px 0 0;
	color: var(--wp--preset--color--navy);
	font-size: var(--tri-text-13);
	font-weight: 400;
	line-height: 1.25;
}

.tri-teacher-grid__score {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--action);
	font-size: var(--tri-text-18);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.2;
}

/* Khung viền đánh dấu người đang hiện ở hồ sơ bên trái. */
.tri-teacher-grid__item.is-active {
	outline-color: var(--wp--preset--color--action);
}

.tri-teacher-grid__item:hover:not(.tri-teacher-grid__item--empty) {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 40, 100, 0.12);
}

.tri-teacher-grid__item:focus-visible {
	outline-color: var(--wp--preset--color--cyan);
}

.tri-teacher h3,
.tri-teacher__name {
	margin: 22px 0 0;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--wp--custom--color--rule);
	color: var(--wp--preset--color--navy);
	text-align: center;
}

.tri-teacher__facts {
	display: grid;
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--custom--color--ink-strong);
}

.tri-teacher__facts li {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	gap: 10px;
}

.tri-teacher__facts li::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url(../../images/icon-badge.svg) center / contain no-repeat;
	mask: url(../../images/icon-badge.svg) center / contain no-repeat;
}

.tri-teacher__facts-lead {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-ui);
	text-transform: uppercase;
}

/* C?n ?? specificity ?? th?ng `.tri-teacher__facts li::before` ? tr?n. */
.tri-teacher__facts li.tri-teacher__facts-lead::before {
	-webkit-mask-image: url(../../images/icon-badge-solid.svg);
	mask-image: url(../../images/icon-badge-solid.svg);
}

.tri-teacher-col {
	display: grid;
	align-content: start;
	gap: 24px;
}

/* Lưới ảnh nhỏ trượt ngang theo trang, cùng kiểu với khối Khoá học bổ
   trợ: khung ngoài cắt, ray bên trong dịch đi đúng một khung mỗi trang.
   Mỗi trang rộng đúng bằng khung nên dịch bằng phần trăm là đủ, không
   phải đo pixel. */
/* Chừa chỗ quanh khung cắt rồi kéo lại bằng margin âm đúng ngần ấy.
   Khung phải cắt (overflow:hidden) để trang bên cạnh không lòi ra, nhưng
   khung viền của ảnh đang chọn vẽ LỒI RA 5px (3px nét + 2px hở), và lúc
   hover ảnh nhích lên thêm 3px — tổng 8px. Lưới 3x2 thì ô hàng trên sát
   mép, nên 6px cũ cắt mất nét trên khi nhích. Đệm 9px (8px + 1px dư) thì
   viền còn đủ; margin âm bù lại nên lưới vẫn nằm đúng chỗ cũ: mép trên
   thẳng hàng với ảnh lớn, khoảng cách tới thanh phân trang không đổi. */
.tri-teacher-grid-viewport {
	overflow: hidden;
	--tri-vien-ho: 9px;
	padding: var(--tri-vien-ho);
	margin: calc(-1 * var(--tri-vien-ho));
}

.tri-teacher-grid-track {
	display: flex;
	/* Khe giữa hai trang phải RỘNG HƠN phần đệm chừa cho khung viền ở
	   trên, nếu không thì mép trái của trang sau thò vào đúng dải đệm đó
	   và dính vào trang trước. JS dịch ray có cộng khe này vào. */
	gap: var(--tri-teacher-page-gap, 24px);
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-teacher-grid {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-content: start;
}

.tri-news-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 220px;
	width: 220px;
	padding: 10px 10px 16px;
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	/* Vẫn là link bài viết, nhưng tay nắm là tay kéo: hover = grab,
	   nhấn giữ = grabbing. Click gần như không dịch thì sang bài;
	   kéo quá ngưỡng thì nav.js chặn click. */
	cursor: grab;
}

.tri-news-card:active,
.tri-ticker.is-dragging .tri-news-card {
	cursor: grabbing;
}

.tri-news-card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 232 / 148;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--control);
}

.tri-news-card__title {
	margin: 0;
	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.35;
	text-transform: uppercase;
	/* Figma c?t ti?u ?? ? d?ng th? 2 k?m d?u ba ch?m. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tri-news-card__body {
	margin: 0;
	color: var(--wp--custom--color--ink);
	font-size: var(--tri-text-13);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 767px) {
	.tri-navy-strip .tri-news-card {
		flex-basis: calc((100cqi - 16px) / 2);
		width: calc((100cqi - 16px) / 2);

	}
}

.tri-stats,
.tri-cards-3 {
	display: grid;
	gap: var(--tri-grid-gutter);
	max-width: var(--tri-frame);
	margin: 0 auto;
}

.tri-stats {
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	margin-bottom: 32px;
	text-align: center;
}

/* Những con số biết nói: dưới desktop mỗi thẻ một hàng. */
.tri-stats.tri-stats--cards {
	grid-template-columns: 1fr;
}

.tri-stats strong {
	display: block;
	color: var(--wp--preset--color--royal);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--x-large);
}

/* ?? Th? h?c vi?n ti?u bi?u ???????????????????????????????????????????
   ?o t? figma/pages/hoc-vien-tieu-bieu.png (1?): l??i r?ng 993, 3 c?t,
   khe 16 ? th? 320?302. ?nh tr?n 131 nh? 68px l?n kh?i m?p tr?n th?,
   v?ng cung navy b?n k?nh ngo?i 80.5 n?t 4 qu?t t? 9h qua ??nh t?i ~2h,
   ch?m sky 18 ??u ? ??u cung, huy hi?u cam 54 l?ch (56, 53.5) so t?m ?nh,
   v? m?t thanh navy 142 l? 10px d??i ??y th?. */
.tri-student-card {
	--tri-sc-avatar: 136px;
	--tri-sc-ring: 4px;
	--tri-sc-badge: 52px;
	/* Cung (students/vong-cung.svg: bán kính 79.97 nét 3.95 trong hộp 164 →
	   mép trong = 0.4756 × cỡ) luôn cách mép ảnh --tri-sc-arc-gap, nên ảnh
	   không che cung / chấm đang đung đưa. Biến thể chỉ đổi cỡ ảnh. */
	--tri-sc-arc-gap: 10px;
	--tri-sc-arc: calc((var(--tri-sc-avatar) / 2 + var(--tri-sc-arc-gap)) / 0.4756);
	/* Huy hiệu IELTS: tâm nằm đúng trên viền ảnh ở góc 4h30 (cos 45° = 0.3536)
	   → luôn một nửa trong ảnh, một nửa ngoài, ở mọi cỡ. */
	--tri-sc-badge-off: calc(var(--tri-sc-avatar) * 0.3536);
	/* Chữ bắt đầu dưới đáy huy hiệu một khoảng --tri-sc-text-gap. */
	--tri-sc-text-gap: 14px;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	/* Lưới --tri-frame chia cột; bỏ max 320 cứng để thẻ fill ô khi frame co/giãn. */
	max-width: none;
	/* Tâm ảnh nằm ở mép trên thẻ: chừa chỗ cho nửa ảnh + chấm đầu cung
	   (0.552 × cỡ cung) nhô lên, và thanh navy lộ 10px phía dưới. */
	margin-top: calc(var(--tri-sc-arc) * 0.56);
	margin-bottom: 10px;
	padding: calc(var(--tri-sc-badge-off) + var(--tri-sc-badge) / 2 + var(--tri-sc-text-gap)) 16px 22px;
	/* Nền/bóng ở ::before để ring (z-index:-1) nằm dưới mặt thẻ. */
	background: transparent;
	border-radius: var(--wp--custom--radius--control);
	box-shadow: none;
	text-align: center;
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

/* Mặt thẻ — trên ring, dưới avatar/body. */
.tri-student-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 26px rgba(9, 31, 91, 0.08);
	transition: box-shadow var(--wp--custom--motion--duration-mid) ease;
}

/* Nhich len mot it khi hover, giong cac the khac tren site (vd .tri-voice). */
.tri-student-card:hover {
	transform: translateY(-6px);
}

.tri-student-card:hover::before {
	box-shadow: 0 14px 32px rgba(9, 31, 91, 0.16);
}

/* Thanh navy nằm sau thẻ, chỉ lộ phần đáy ra ngoài. */
.tri-student-card::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	z-index: -1;
	width: 142px;
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

/* Mặt thẻ (nền + bóng + bo góc) ở ::before để ::after không đè mặt thẻ
   khi hover transform tạo stacking context. Transform vẫn ở thẻ ngoài
   nên thanh navy nhích cùng thẻ. Thẻ đứng trước xếp trên thẻ đứng sau;
   hover không nâng z-index kẻo thanh navy đè thẻ phía trên. */
.tri-student-grid > .tri-student-card:not(.tri-student-card--compact) {
	z-index: 1;
	background: transparent;
	border-radius: 24px;
	box-shadow: none;
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(1) {
	 z-index: 12; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(2) {
	 z-index: 11; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(3) {
	 z-index: 10; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(4) {
	 z-index: 9; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(5) {
	 z-index: 8; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(6) {
	 z-index: 7; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(7) {
	 z-index: 6; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(8) {
	 z-index: 5; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(9) {
	 z-index: 4; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(10) {
	 z-index: 3; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):nth-child(11) {
	 z-index: 2; 
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid rgba(9, 31, 91, 0.16);
	border-radius: inherit;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 28px rgba(9, 31, 91, 0.18);
	transition: box-shadow var(--wp--custom--motion--duration-mid) ease;
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):hover {
	box-shadow: none;
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact):hover::before {
	box-shadow: 0 16px 36px rgba(9, 31, 91, 0.26);
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact)::after {
	border-radius: 0 0 24px 24px;
}

.tri-student-grid > .tri-student-card:not(.tri-student-card--compact) > .tri-student-card__body {
	position: relative;
	z-index: 1;
}

.tri-student-card__visual {
	position: absolute;
	left: 50%;
	top: calc(var(--tri-sc-avatar) / -2);
	/* Không z-index: tránh stacking context kẹt ring phía trên mặt thẻ. */
	width: var(--tri-sc-avatar);
	height: var(--tri-sc-avatar);
	margin-left: calc(var(--tri-sc-avatar) / -2);
}

/* Vòng cung đồng tâm avatar (top/left 50% trong visual). z-index:-1 dưới ::before
   vì visual không tạo stacking context. Đung đưa 12h ↔ 2h. */
.tri-student-card__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	display: block;
	/* img { max-width: 100% } sẽ kẹp theo --tri-sc-avatar nếu không hủy. */
	max-width: none;
	width: var(--tri-sc-arc);
	height: var(--tri-sc-arc);
	transform: translate(-50%, -50%) rotate(-60deg);
	transform-origin: center;
	pointer-events: none;
	animation: tri-student-ring-sway 2.8s ease-in-out infinite;
}

.tri-student-card__avatar img,
.tri-ph--avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	/* Nền logo Ant / TRI (#091F5B) sau ảnh cắt mảnh */
	background: var(--wp--preset--color--navy);
	border-radius: 50%;
}

.tri-student-card__badge {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--tri-sc-badge);
	height: var(--tri-sc-badge);
	margin: calc(var(--tri-sc-badge-off) - var(--tri-sc-badge) / 2) 0 0 calc(var(--tri-sc-badge-off) - var(--tri-sc-badge) / 2);
	border-radius: 50%;
	/* Viền trắng tách huy hiệu khỏi ảnh phía sau. */
	box-shadow: 0 0 0 2px #fff;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--beau-sans);
	line-height: var(--wp--custom--line-height--tight);
}

.tri-student-card__badge-score {
	font-size: var(--tri-text-22);
	font-weight: var(--wp--custom--font--weight-strong);
}

.tri-student-card__badge-label {
	font-size: 11px;
	font-weight: 500;
}

.tri-student-card__body {
	position: relative;
	z-index: 1;
	width: 100%;
}

.tri-student-card__role {
	margin: 0;
	color: var(--wp--custom--color--ink-soft);
	font-size: var(--tri-text-18);
	font-weight: 500;
	line-height: 1.2;
}

.tri-student-card__name {
	margin: 4px 0 16px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-18);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1.2;
	text-transform: uppercase;
}

.tri-student-card__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--navy) 70%, white);
}

.tri-student-card__bands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.tri-student-card__bands li {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 9px 2px;
	border-radius: 4px;
	background: var(--wp--custom--color--band);
}

.tri-student-card__bands span {
	color: var(--wp--custom--color--ink-mid);
	font-size: var(--tri-text-13);
	line-height: 1.2;
}

.tri-student-card__bands strong {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-26);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1.1;
}

.tri-student-card__more {
	height: 26px;
	min-height: 26px;
	padding-inline: 17px;
	border: 1px solid var(--wp--preset--color--navy);
	background: transparent;
	color: var(--wp--preset--color--navy);
	font-size: var(--tri-text-13);
	text-transform: none;
}

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

/* Figma t? ??c ??ng m?t th? trong l??i ?? ph? nh?p h?ng ba. */
.tri-student-card--feature .tri-student-card__more {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-student-card--feature .tri-student-card__more:hover,
.tri-student-card--feature .tri-student-card__more:focus-visible {
	background: var(--wp--preset--color--navy-hover);
}

/* Biến thể gọn cho "Bảng thành tích" (khoa-hoc): thẻ hẹp (tối đa 272px, nằm
   giữa ô lưới) + cao hơn; ảnh / cung / huy hiệu dùng công thức thẻ gốc. */
.tri-student-card--compact {
	--tri-sc-avatar: 124px;
	--tri-sc-ring: 2px;
	--tri-sc-badge: 44px;
	--tri-sc-text-gap: 12px;
	max-width: 272px;
	margin-bottom: 0;
	padding-inline: 14px;
	padding-bottom: 22px;
}

.tri-student-card--compact::after {
	content: none;
}

.tri-student-card--compact .tri-student-card__badge-score {
	font-size: var(--wp--preset--font-size--medium);
}

.tri-student-card--compact .tri-student-card__badge-label {
	font-size: 9px;
}

.tri-student-card--compact .tri-student-card__name {
	margin: 0 0 6px;
	font-size: var(--tri-text-17);
	line-height: 1.25;
}

.tri-student-card--compact .tri-student-card__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Flex + wrap thay grid: hàng cuối lẻ thẻ vẫn nằm giữa khung.
   Số cột = --tri-sg-cols (đổi theo màn ở cuối file phần lưới). */
.tri-student-grid {
	--tri-sg-cols: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px var(--tri-grid-gutter);
	width: var(--tri-frame);
	max-width: 100%;
	margin-inline: auto;
}

.tri-student-grid > * {
	flex: 0 0 calc((100% - (var(--tri-sg-cols) - 1) * var(--tri-grid-gutter)) / var(--tri-sg-cols));
	min-width: 0;
}

.tri-student-grid--compact {
	row-gap: 28px;
}

/* Bảng thành tích — mobile: 2 hàng (course), mỗi hàng hiện 2 thẻ học viên. */
.tri-achievements {
	display: none;
}

@media (max-width: 767px) {
	.tri-achievements__desk {
		display: none;

	}

	.tri-achievements {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: var(--tri-frame);
		margin-inline: auto;

	}

	.tri-achievements__viewport {
		container-type: inline-size;
		overflow: hidden;
		/* Chừa chỗ nửa ảnh + chấm đầu cung nhô lên (0.56 × cỡ cung) + bóng đổ. */
		padding-block: 76px 20px;
		cursor: grab;
		touch-action: pan-y;
		user-select: none;

	}

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

	}

	.tri-achievements__track {
		display: flex;
		flex-direction: row;
		column-gap: 12px;
		width: max-content;
		transition: transform 0.5s ease;

	}

	.tri-achievements__slide {
		flex: 0 0 calc((100cqi - 12px) / 2);
		width: calc((100cqi - 12px) / 2);
		min-width: 0;

	}

	.tri-achievements .tri-student-card {
		box-sizing: border-box;
		--tri-sc-avatar: 92px;
		--tri-sc-ring: 2px;
		--tri-sc-badge: 34px;
		--tri-sc-arc-gap: 8px;
		--tri-sc-text-gap: 10px;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		padding-inline: 8px;
		padding-bottom: 16px;
		border-radius: 15px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

	}

	.tri-achievements .tri-student-card:hover {
		transform: translateY(-4px);

	}

	.tri-achievements__viewport.is-dragging .tri-student-card {
		transform: none;

	}

	.tri-achievements .tri-student-card::after {
		content: none;

	}

	.tri-achievements .tri-student-card__badge-score {
		font-size: var(--wp--preset--font-size--small);

	}

	.tri-achievements .tri-student-card__badge-label {
		font-size: 8px;

	}

	.tri-achievements .tri-student-card__name {
		margin: 0 0 4px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.25;

	}

	.tri-achievements .tri-student-card__note {
		margin: 0;
		font-size: 11px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.tri-achievements__track {
		transition: none;

	}
}

/* Học viên tiêu biểu: 1 → 2 → 3 → 4 cột (4 cột từ 1360: thẻ ≈305–315px, đủ
   chỗ 4 ô điểm; hẹp hơn thì chữ Listening/Reading dính nhau).
   Bảng thành tích (compact, ≥768 — dưới đó là slider): 3 → 4 cột. */
@media (min-width: 560px) {
	.tri-student-grid {
		--tri-sg-cols: 2;

	}
}

@media (min-width: 768px) {
	.tri-student-grid--compact {
		--tri-sg-cols: 3;

	}
}

@media (min-width: 1025px) {
	.tri-student-grid {
		--tri-sg-cols: 3;

	}

	.tri-student-grid--compact {
		--tri-sg-cols: 4;

	}
}

@media (min-width: 1360px) {
	.tri-student-grid {
		--tri-sg-cols: 4;

	}
}

@media (max-width: 374px) {
	.tri-btn {
		font-size: var(--wp--preset--font-size--small);
		padding-inline: 14px;

	}
}

/* ?? Carousel review h?c vi?n ??????????????????????????????????????????? */
.tri-reviews {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: var(--tri-frame);
	margin: 24px auto 0;
}

.tri-reviews__stage {
	flex: 1;
	min-width: 0;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}

.tri-reviews__stage.is-dragging {
	cursor: grabbing;
}

.tri-review {
	display: none;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 28px 24px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 20px rgba(9, 31, 91, 0.08);
}

.tri-review.is-active {
	display: grid;
}

/* Giữ chiều cao thẻ ổn định: cắt chữ dài bằng ellipsis. */
.tri-review.is-active .tri-review__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tri-review.is-active .tri-review__quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tri-review__name {
	margin: 0 0 12px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
}

.tri-review__score {
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px;
	padding: 0;
}

/* Figma: v?ng cam s? ch?ng m?p tr?i pill ice ?IELTS OVERALL?. */
.tri-review__band {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	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);
	line-height: 1;
}

.tri-review__overall {
	display: inline-flex;
	align-items: center;
	margin-left: -12px;
	padding: 8px 18px 8px 22px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--ice-soft);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-review__quote {
	margin: 0 0 16px;
	color: var(--wp--custom--color--ink-strong);
	line-height: var(--wp--custom--line-height--body);
	text-align: justify;
}

.tri-review__more {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-ui);
}

.tri-review__media {
	position: relative;
	width: 100%;
	max-width: 589px;
	margin-inline: auto;
	aspect-ratio: 589 / 420;
	overflow: hidden;
	border-radius: 10px;
}

.tri-review__media > img:first-child {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

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

.tri-reviews__nav,
/* Hai nút NỔI ĐÈ lên dải ảnh chứ không chiếm chỗ trong hàng. Nằm trong
   hàng thì chúng ăn mất 112px (2 nút + 2 khoảng hở); trên máy 375px khung
   cắt chỉ còn 231px, không đủ chỗ cho ô nổi bật 270px — ô bị xén cụt hai
   bên. Nổi đè thì khung cắt lấy trọn chiều ngang. */
.tri-press__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

/* Nút của review đứng trong hàng (trái | nội dung | phải).
   Rule chung phía trên nổi đè cho ảnh báo chí, không áp vào hàng này. */
.tri-reviews > .tri-reviews__nav {
	position: static;
	top: auto;
	flex: 0 0 auto;
	transform: none;
}

/* Dải thumb dưới: chọn bằng click, không kéo/carousel riêng. */
.tri-reviews-slides {
	display: flex;
	align-items: center;
	width: var(--tri-frame);
	margin: 20px auto 0;
}

.tri-reviews-slides__viewport {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.tri-reviews-slides__track {
	display: flex;
	gap: 12px;
	width: max-content;
	min-width: 100%;
}

.tri-reviews-slides__card {
	flex: 0 0 auto;
	width: clamp(140px, 22vw, 224px);
	margin: 0;
	height: 125px;
	border: 2px solid transparent;
	border-radius: 15px;
	overflow: hidden;
	background: var(--wp--preset--color--placeholder);
	cursor: pointer;
	opacity: 0.72;
	transition:
		opacity var(--wp--custom--motion--duration-fast) ease,
		border-color var(--wp--custom--motion--duration-fast) ease,
		box-shadow var(--wp--custom--motion--duration-fast) ease;
}

.tri-reviews-slides__card.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 4px 14px rgba(9, 31, 91, 0.16);
}

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

.tri-reviews-slides__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 768px) {
	.tri-reviews-slides__viewport {
		display: flex;
		justify-content: safe center;

	}

	.tri-reviews-slides__track {
		min-width: 0;
		margin-inline: auto;

	}

	.tri-review.is-active {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
		align-items: center;
		padding: 32px;

	}

	.tri-review.is-active .tri-review__quote {
		-webkit-line-clamp: 6;
		min-height: calc(6 * var(--wp--custom--line-height--body) * 1em);

	}

	.tri-review__media {
		margin-inline: 0 0 0 auto;

	}
}

.tri-reviews__nav::before,
.tri-press__nav::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto;
	background: currentColor;
	-webkit-mask: url(../../images/icon-chevron.svg) center / contain no-repeat;
	mask: url(../../images/icon-chevron.svg) center / contain no-repeat;
}

.tri-reviews__nav--prev::before,
.tri-press__nav--prev::before {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	.tri-reviews-slides {
		display: none;

	}

	.tri-reviews {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
		gap: 0;

	}

	.tri-reviews__stage {
		flex: 1 1 auto;
		width: 100%;

	}

	.tri-review,
		.tri-review.is-active {
		width: var(--tri-vp);
		max-width: var(--tri-vp);
		margin-inline: calc(50% - (var(--tri-vp) / 2));
		border-radius: 0;
		padding: 24px 16px;

	}

	.tri-review.is-active .tri-review__quote {
		-webkit-line-clamp: 4;
		min-height: calc(4 * var(--wp--custom--line-height--body) * 1em);

	}

	/* Prev/next nổi đè trên thẻ full-bleed. */
	.tri-reviews > .tri-reviews__nav {
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY(-50%);

	}

	.tri-reviews > .tri-reviews__nav--prev {
		left: 8px;

	}

	.tri-reviews > .tri-reviews__nav--next {
		right: 8px;

	}
}

/* Two rows at every width. Visible cards per row: phone 1, tablet 2, desktop 3.
   Padding keeps the hover lift and the navy tab inside the clip. */
.tri-voices__viewport {
	container-type: inline-size;
	overflow: hidden;
	padding-block: 16px 24px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.tri-voices__viewport.is-dragging {
	cursor: grabbing;
}

.tri-voices__track {
	display: flex;
	flex-direction: row;
	column-gap: 12px;
	width: max-content;
	transition: transform 0.5s ease;
}

.tri-voice {
	position: relative;
	z-index: 0;
	flex: 0 0 100cqi;
	width: 100cqi;
	min-width: 0;
	/* chừa chỗ cho thanh navy ló dưới đáy */
	margin-bottom: 9px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border-radius: var(--wp--custom--radius--card);
	background: transparent;
	color: var(--wp--custom--color--ink-strong);
	transition:
		transform var(--wp--custom--motion--duration-mid) ease,
		color var(--wp--custom--motion--duration-mid) ease;
}

/* Face sits above ::after so the tab never paints on the card.
   Lift lives on the card, so the tab (a child) translates with it. */
.tri-voice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 26px rgba(9, 31, 91, 0.08);
	transition: background-color var(--wp--custom--motion--duration-mid) ease;
}

.tri-voice:hover,
.tri-voice:focus-within {
	transform: translateY(-12px);
	color: var(--wp--preset--color--white);
}

.tri-voice:hover::before,
.tri-voice:focus-within::before {
	background: var(--wp--preset--color--navy);
}

.tri-voices__viewport.is-dragging .tri-voice {
	transform: none;
}

/* Thanh navy ló dưới đáy thẻ — cùng kiểu với .tri-cred. */
.tri-voice::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	z-index: -1;
	width: 132px;
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

.tri-voice__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tri-voice__avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--action);
	transition: background-color var(--wp--custom--motion--duration-mid) ease;
}

.tri-voice__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.tri-voice:hover .tri-voice__avatar:not(:has(img)),
.tri-voice:focus-within .tri-voice__avatar:not(:has(img)) {
	background: var(--wp--custom--color--ice-soft);
}

.tri-voice h3,
.tri-voice__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.tri-voice p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	/* Figma c?n ??u hai bi?n nh? th? n?ng l?c. */
	text-align: justify;
}

/* ?? 3 th? n?ng l?c gi?ng vi?n (??i ng? gi?ng vi?n) ???????????????????
   Figma: th? tr?ng 303?343, huy hi?u navy 44?40 nh? l?n 8px kh?i m?p tr?n,
   ch? c?n ??u hai bi?n, v? m?t thanh navy 140px l? ra 9px d??i ??y th?. */
.tri-creds {
	display: grid;
	gap: 40px;
	width: var(--tri-frame);
	margin-inline: auto;
}

.tri-cred {
	position: relative;
	/* ch?a ch? cho huy hi?u nh? l?n v? thanh navy l? xu?ng */
	margin-top: 8px;
	margin-bottom: 9px;
	padding: 56px 24px 28px;
	border-radius: var(--wp--custom--radius--field);
	/* Nền và bóng nằm ở ::before để :after (z-index -1) vẫn ở dưới mặt thẻ
	   khi transform tạo stacking context. */
	background: transparent;
	transform-origin: center;
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

/* Thẻ đứng trước xếp trên thẻ đứng sau. Hover không nâng z-index: cả :after
   nằm trong stacking context của thẻ, nâng lên là thanh navy đè thẻ phía trên. */
.tri-cred:nth-child(1) {
	 z-index: 6; 
}

.tri-cred:nth-child(2) {
	 z-index: 5; 
}

.tri-cred:nth-child(3) {
	 z-index: 4; 
}

.tri-cred:nth-child(4) {
	 z-index: 3; 
}

.tri-cred:nth-child(5) {
	 z-index: 2; 
}

.tri-cred:nth-child(6) {
	 z-index: 1; 
}

.tri-cred::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 26px rgba(9, 31, 91, 0.08);
}

.tri-cred:hover {
	transform: scale(1.04);
}

.tri-cred__badge {
	position: absolute;
	z-index: 1;
	left: 17px;
	top: -8px;
	width: 44px;
	height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--navy) url(../../images/icon-cenf.svg) center / 18px 25px no-repeat;
}

/* Thanh navy n?m sau th?, ch? l? ph?n ??y ra ngo?i. */
.tri-cred::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	z-index: -1;
	width: 140px;
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control);
	background: var(--wp--preset--color--navy);
}

.tri-cred h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.tri-cred p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	/* Figma c?n ??u hai bi?n. */
	text-align: justify;
}

/* Ảnh 16:9 trong thẻ tâm tình — Figma 279×157. */
.tri-voice__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 279 / 157;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--custom--color--ice-soft, #eef5fb);
	transition: background-color var(--wp--custom--motion--duration-mid) ease;
}

.tri-voice__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.tri-voice:hover .tri-voice__media,
.tri-voice:focus-within .tri-voice__media {
	background: var(--wp--custom--color--ice-soft);
}

@media (min-width: 768px) {
	.tri-news-card {
		flex-basis: clamp(220px, calc(280 / var(--tri-type-ref) * var(--tri-vp)), 360px);
		width: clamp(220px, calc(280 / var(--tri-type-ref) * var(--tri-vp)), 360px);

	}

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

	}

	.tri-review {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding: 28px 32px;

	}

	.tri-voice {
		flex-basis: calc((100cqi - 12px) / 2);
		width: calc((100cqi - 12px) / 2);

	}

	.tri-creds {
		gap: 24px;

	}

	.tri-cred {
		padding: 52px 18px 24px;

	}
}

/* Tablet ≤1024: thẻ 1+2 chung hàng; thẻ 3+ full-bleed. */
@media (min-width: 768px) and (max-width: 1024px) {
	#tri-sec-page-doi-ngu-giang-vien-creds .tri-creds {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-grid-gutter);

	}

	#tri-sec-page-doi-ngu-giang-vien-creds .tri-cred:nth-child(n + 3) {
		grid-column: 1 / -1;

	}
}

/* Nút prev/next hai bên; hover đổi màu navy. */
.tri-skill-courses > .tri-reviews__nav {
	position: static;
	flex: 0 0 auto;
	transform: none;
	transition: background-color var(--wp--custom--motion--duration-fast) ease;
}

.tri-skill-courses > .tri-reviews__nav:hover,
.tri-skill-courses > .tri-reviews__nav:focus-visible {
	background: var(--wp--preset--color--navy-hover);
}

.tri-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 8px;
}

.tri-post-card {
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.tri-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tri-post-card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 232 / 148;
	object-fit: cover;
	background: var(--wp--preset--color--placeholder);
}

.tri-post-card__media--empty {
	display: block;
	width: 100%;
	aspect-ratio: 232 / 148;
	background: var(--wp--preset--color--placeholder);
}

.tri-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.tri-post-card__tag {
	align-self: flex-start;
	color: var(--wp--preset--color--royal);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: 11px;
	font-weight: var(--wp--custom--font--weight-ui);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-post-card__title {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-15);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1.35;
	/* Tiêu đề bài cũ rất dài, cắt 3 dòng để các thẻ trong lưới bằng nhau. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tri-post-card__desc {
	margin: 0;
	color: var(--wp--custom--color--ink);
	font-size: var(--tri-text-13);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tri-post-card__date {
	margin-top: auto;
	padding-top: 6px;
	color: var(--wp--custom--color--ink);
	font-size: var(--tri-text-12);
}

.tri-post-card__link:hover .tri-post-card__title,
.tri-post-card__link:focus-visible .tri-post-card__title {
	color: var(--wp--preset--color--royal);
}

@media (min-width: 640px) {
	.tri-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

	}
}

@media (min-width: 1025px) {
	/* 1025+ laptop mid: tối đa 2 thẻ/hàng; 3 cột khi frame đủ rộng (≥1440). */
	.tri-stats.tri-stats--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-grid-gutter);

	}

	.tri-teachers {
		grid-template-columns: minmax(0, 452fr) minmax(0, 493fr);
		gap: 54px;

	}

	.tri-teacher-switch {
		display: none;

	}

	.tri-voice {
		flex-basis: calc((100cqi - 24px) / 3);
		width: calc((100cqi - 24px) / 3);

	}

	/* Desktop ≥1025 (neo-1440 / --tri-vp): đúng 3 thẻ ngang — chỉ section này. */
	#tri-sec-page-doi-ngu-giang-vien-creds .tri-creds {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;

	}

	#tri-sec-page-doi-ngu-giang-vien-creds .tri-cred {
		padding: 56px 24px 28px;
		grid-column: auto;

	}

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

	}
}

@media (min-width: 1440px) {
	.tri-stats.tri-stats--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));

	}

	.tri-teacher-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 17px;

	}

	.tri-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;

	}
}

/* Nút trong cột phải.
   Đo được: chữ "NHẬN TƯ VẤN MIỄN PHÍ" viết hoa cần 191px, cộng đệm 24px
   mỗi bên là 239px, trong khi nút chỉ rộng 214px — thiếu 25px nên chữ bị
   xuống dòng. Hạ cỡ chữ và đệm cho vừa đúng một dòng, rồi khoá nowrap để
   sau này sếp sửa chữ dài hơn thì nó tràn ra chứ không âm thầm xuống dòng. */
.tri-promo__cta {
	width: 100%;
	margin-top: 18px;
	padding-inline: 12px;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
	animation: tri-nut-tho 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.tri-teacher-grid__item {
		transition: none;

	}

	.tri-teacher-grid-track {
		transition: none;

	}

	.tri-student-card__ring {
		animation: none;
		transform: translate(-50%, -50%) rotate(-60deg);

	}

	.tri-cred {
		transition: none;

	}

	.tri-voice,
		.tri-voice::before,
		.tri-voices__track {
		transition: none;

	}

	.tri-voice:hover,
		.tri-voice:focus-within {
		transform: none;

	}

	/* Hiệu ứng nhấp nháy liên tục là thứ gây khó chịu thật với người nhạy
	   cảm chuyển động, không phải chuyện lịch sự suông. */
	.tri-promo__cta {
		animation: none;

	}
}

@media (min-width: 640px) and (max-width: 1199px) {
	/* Ở khổ tablet khối này nằm ngang nên nút trải hết chiều ngang trông
		   thừa. Kẹp lại và căn giữa. Bản trước ghi width:auto + min-width,
		   nhưng thẻ block với width:auto vẫn chiếm hết chỗ — phải dùng
		   max-width mới thực sự hẹp lại. */
	.tri-promo__cta {
		display: block;
		max-width: 320px;
		margin-inline: auto;

	}
}

/* Thẻ bài Kiến thức — pastel blue theo Figma; không đụng lưới homepage/single. */
.tri-knowledge-posts .tri-post-card--knowledge {
	overflow: hidden;
	border: 1px solid #d1e1f5;
	border-radius: 16px;
	background: #eef4fc;
	box-shadow: none;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__link {
	gap: 14px;
	padding: 16px;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__media,
.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__media--empty {
	border-radius: 10px;
	aspect-ratio: 16 / 9;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__body {
	gap: 6px;
	padding: 0;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__title {
	color: var(--wp--preset--color--action, #0053d1);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-strong);
	-webkit-line-clamp: 2;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__desc {
	color: var(--wp--custom--color--ink-mid, #5b5b5b);
	font-size: var(--tri-text-13);
	-webkit-line-clamp: 2;
}

.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__link:hover .tri-post-card__title,
.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__link:focus-visible .tri-post-card__title {
	color: var(--wp--preset--color--navy, #091f5b);
}

@media (min-width: 640px) {
	.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__link {
		padding: 18px 20px;

	}
}

.tri-knowledge-posts--stack .tri-post-card--knowledge {
	border-color: transparent;
	background: #fff;
	box-shadow: 0 6px 18px rgba(9, 31, 91, 0.08);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.tri-knowledge-posts--stack .tri-post-card--knowledge:hover,
.tri-knowledge-posts--stack .tri-post-card--knowledge:focus-within {
	border-color: #8fb4ec;
	background: #eef4fc;
}

.tri-knowledge-posts--stack .tri-post-card--knowledge .tri-post-card__title {
	color: var(--wp--preset--color--navy, #091f5b);
}

.tri-knowledge-posts--stack .tri-post-card--knowledge:hover .tri-post-card__title {
	color: var(--wp--preset--color--action, #0053d1);
}

.tri-post-card--practice {
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(9, 31, 91, 0.08);
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.tri-post-card--practice .tri-post-card__link {
	gap: 10px;
	padding: 10px;
}

.tri-post-card--practice .tri-post-card__media,
.tri-post-card--practice .tri-post-card__media--empty {
	aspect-ratio: 1;
	border-radius: 4px;
}

.tri-post-card--practice .tri-post-card__body {
	padding: 0 2px 4px;
	text-align: center;
}

.tri-post-card--practice .tri-post-card__title {
	font-size: var(--tri-text-12);
	line-height: 1.45;
}

.tri-post-card--practice:hover,
.tri-post-card--practice:focus-within {
	border-color: #8fb4ec;
	background: #eef4fc;
	transform: translateY(-2px);
}

.tri-post-card--practice:hover .tri-post-card__title,
.tri-post-card--practice:focus-within .tri-post-card__title {
	color: var(--wp--preset--color--action, #0053d1);
}

.tri-teacher__more {
	display: inline-block;
	margin-top: 12px;
	color: var(--wp--preset--color--action);
	font-weight: 700;
}

.tri-teacher__name-link {
	color: inherit;
	text-decoration: none;
}

.tri-teacher__name-link:hover {
	text-decoration: underline;
}

.tri-press > .tri-press__nav:focus-visible,
.tri-reviews > .tri-reviews__nav:focus-visible,
.tri-skill-courses > .tri-reviews__nav:focus-visible,
.tri-teacher--stack > .tri-teacher-switch:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange, #ec6207);
	outline-offset: 3px;
}

/* Đổi giảng viên (≤1024, hồ sơ xếp chồng): hai nút thành hàng dưới hồ sơ,
   không đè ảnh. ≥1025 vẫn ẩn (lưới ảnh bên cạnh). */
@media (max-width: 1024px) {
	.tri-teacher--stack:has(> .tri-teacher-switch) {
		padding-bottom: calc(var(--tri-arrow-size) + 16px);

	}

	.tri-teacher--stack > .tri-teacher-switch--prev {
		transform: translateX(calc(-100% - var(--tri-arrow-gap) / 2));

	}

	.tri-teacher--stack > .tri-teacher-switch--next {
		transform: translateX(calc(var(--tri-arrow-gap) / 2));

	}
}

@media (max-width: 767px) {
	.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__link {
		gap: 10px;
		padding: 10px;

	}

	.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__title {
		font-size: var(--tri-text-13);

	}

	.tri-knowledge-posts .tri-post-card--knowledge .tri-post-card__desc {
		font-size: var(--tri-text-12);
		-webkit-line-clamp: 2;

	}

	.tri-press > .tri-press__nav,
		.tri-reviews > .tri-reviews__nav,
		.tri-skill-courses > .tri-reviews__nav {
		order: 1;

	}

	/* Chỉ là carousel trên điện thoại (máy tính là lưới / cột dọc → không mờ). */
	.tri-achievements__viewport,
		.tri-timeline__viewport {
		-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%);

	}
}

/* ?? T?m t?nh h?c vi?n (??i ng? gi?ng vi?n) ????????????????????????????? */
/* Tâm tình học viên (Đội ngũ GV): khung tràn mép màn; phần đệm ngang =
   đúng phần ngoài khối nên cqi (khổ thẻ) và 3 thẻ chính giữ nguyên chỗ cũ,
   thẻ kề ló ra ở vùng đệm rồi mờ dần. nav.js stride() trừ phần đệm này. */
.tri-voices {
	display: flex;
	flex-direction: column;
	gap: 27px;
	width: var(--tri-frame);
	margin-inline: auto;
	/* 100cqi ở khung con = bề ngang khối (= --tri-frame). */
	container-type: inline-size;
}

.tri-voices > .tri-voices__viewport {
	width: var(--tri-screen);
	max-width: none;
	margin-inline: calc(50% - var(--tri-screen) / 2);
	padding-inline: calc((var(--tri-screen) - 100cqi) / 2);
	box-sizing: border-box;
	--tri-voices-mist: max(var(--tri-mist), calc((var(--tri-screen) - 100cqi) / 2));
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tri-voices-mist), #000 calc(100% - var(--tri-voices-mist)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--tri-voices-mist), #000 calc(100% - var(--tri-voices-mist)), transparent 100%);
}

/* Thẻ học viên: viền mảnh + bóng đổ cho avatar để tách khỏi nền thẻ. */
.tri-student-card__avatar {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	/* Vien trang 2px (marquee) / 4px (the day du) nam trong clip — border/box-shadow
		   bi overflow+radius cat. Padding + nen trang tao vanh ro quanh anh. */
	padding: var(--tri-sc-ring);
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0, 83, 209, 0.45),
		0 10px 22px -4px rgba(9, 31, 91, 0.5);
}