/*
 * Băng chuyền, dải chạy, nút trước/sau, phân trang
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

.tri-mosaic {
	--tri-card1-w: 240;
	--tri-card1-h: 260;
	--tri-card2-w: 230;
	--tri-card2-h: 170;
	/* Thẻ phải đè góc dưới phải thẻ trái: 1/3.5 bề ngang, 1/2.5 bề dọc. */
	--tri-overlap-x: calc(var(--tri-card1-w) / 3.5);
	--tri-overlap-y: calc(var(--tri-card1-h) / 2.5);
	--tri-stage-w: calc(var(--tri-card1-w) + var(--tri-card2-w) - var(--tri-overlap-x));
	--tri-stage-h: calc(var(--tri-card1-h) + var(--tri-card2-h) - var(--tri-overlap-y));
	position: relative;
	width: min(100%, calc(var(--tri-stage-w) * 1px));
	aspect-ratio: var(--tri-stage-w) / var(--tri-stage-h);
	margin-inline: auto;
}

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

.tri-gallery--4 {
	max-width: var(--tri-frame);
}

.tri-section--marquee .tri-marquee__count {
	color: #0053d1;
}

.tri-marquee {
	display: flex;
	flex-direction: column;
	gap: var(--tri-grid-gutter);
	width: 100%;
	margin-top: 8px;
	/* Khổ thẻ = (frame − 3 gutter) / 4 — bám --tri-frame-abs, không neo vw thô. */
	--tri-mq-shell: var(--tri-frame-abs, calc(var(--tri-vp) - 2 * var(--tri-section-px)));
	/* 5 thẻ / khung: thẻ hẹp + cao hơn (trước 4 thẻ → 300×131, bè ngang). */
	--tri-mq-card: clamp(
		180px,
		calc((var(--tri-mq-shell) - 4 * var(--tri-grid-gutter)) / 5),
		250px
	);
	--tri-mq-avatar: clamp(88px, calc(var(--tri-mq-card) * 0.5), 124px);
	--tri-mq-gap: var(--tri-grid-gutter);
}

.tri-marquee__row {
	overflow: hidden;
	width: 100%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

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

.tri-marquee__row--rtl {
	/* Stagger ≈ nửa thẻ + gutter so với hàng trên */
	padding-left: calc(var(--tri-mq-card) * 0.5 + var(--tri-mq-gap));
}

/* ?? Ticker: d?i tr??t ngang v? t?n, d?ng l?i ? nhi?u ch? ??????????????
   ?i?u ki?n: nh?m con ph?i ???c nh?n ??i trong PHP (b?n th? hai aria-hidden)
   th? translateX(-50%) m?i n?i li?n m?ch. T?c ?? ??t qua --tri-ticker-duration. */
.tri-ticker {
	--tri-ticker-duration: 70s;
	overflow: hidden;
	width: 100%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

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

.tri-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: tri-marquee-rtl var(--tri-ticker-duration) linear infinite;
}

.tri-ticker--ltr .tri-ticker__track {
	animation-name: tri-marquee-ltr;
}

.tri-ticker:hover .tri-ticker__track,
.tri-ticker:focus-within .tri-ticker__track {
	animation-play-state: paused;
}

.tri-ticker__group {
	display: flex;
	flex-shrink: 0;
}

.tri-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.tri-marquee__row--ltr .tri-marquee__track {
	animation: tri-marquee-ltr 70s linear infinite;
}

.tri-marquee__row--rtl .tri-marquee__track {
	animation: tri-marquee-rtl 70s linear infinite;
}

.tri-marquee__row:hover .tri-marquee__track {
	animation-play-state: paused;
}

.tri-marquee__group {
	display: flex;
	flex-shrink: 0;
	gap: var(--tri-mq-gap, var(--tri-grid-gutter));
	padding-right: var(--tri-mq-gap, var(--tri-grid-gutter));
}

/* Hàng .tri-marquee__row vẫn overflow:hidden để cắt ngang. Padding nằm
   trong hộp cắt nên nửa ảnh phía trên và bóng đổ phía dưới không bị xén.
   Chỉ dải trang chủ — .tri-moments dùng cùng class nhóm nhưng không cần khoảng này. */
.tri-marquee .tri-marquee__group {
	/* Chừa đủ cho CHẤM TRÒN đầu cung khi đung đưa lên 12h: mép ngoài chấm
	   cách tâm ảnh 90.5/164 ≈ 0.552 × cỡ cung (students/vong-cung.svg).
	   Cỡ cung = công thức --tri-sc-arc của .tri-student-card. */
	padding-top: calc((var(--tri-mq-avatar) / 2 + 10px) / 0.4756 * 0.56 + 8px);
	padding-bottom: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.tri-marquee__row--ltr .tri-marquee__track,
		.tri-marquee__row--rtl .tri-marquee__track,
		.tri-ticker__track {
		animation: none;
		transform: none;

	}

	/* D?ng r?i th? ph?i cu?n tay ???c, n?u kh?ng n?a sau d?i s? kh?ng t?i ???c. */
	.tri-ticker {
		overflow-x: auto;

	}
}

/* Phân trang thật dùng <button>; luật sẵn có chỉ nhắm a và span. */
.tri-pager button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-strong);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease;
}

.tri-pager button:hover:not(.is-disabled):not(.is-current) {
	background: var(--wp--custom--color--ice-soft);
}

.tri-pager button.is-current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-pager button.is-disabled {
	color: var(--wp--custom--color--track-ring);
	cursor: default;
	pointer-events: none;
}

/* Ticker t? ch?y n?n kh?ng c?n cu?n tay n?a (tr? khi reduced-motion, xem kh?i ??). */
.tri-navy-strip__row {
	--tri-ticker-duration: 45s;
	max-width: 100%;
}

.tri-navy-strip__row .tri-ticker__group {
	gap: 16px;
	padding-right: 16px;
}

@media (max-width: 767px) {
	.tri-navy-strip .tri-ticker {
		container-type: inline-size;

	}

	.tri-navy-strip .tri-ticker__track {
		animation: none;
		transition: transform 0.5s ease;

	}
}

.tri-partners .tri-ticker__group {
	gap: var(--tri-partner-gap);
	padding-right: var(--tri-partner-gap);
}

.tri-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 32px;
}

.tri-pager a,
.tri-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-strong);
	font-size: var(--wp--preset--font-size--small);
	transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease;
}

.tri-pager a:hover,
.tri-pager a:focus-visible {
	background: var(--wp--custom--color--ice-soft);
	outline: none;
}

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

/* D?u ? kh?ng c? n?n tr?n. */
.tri-pager .tri-pager__gap {
	width: auto;
	background: none;
}

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

.tri-pager__nav--prev::before {
	transform: rotate(180deg);
}

.tri-pager .is-disabled {
	color: var(--wp--custom--color--track-ring);
}

/* Ô số bị thu gọn (pager.js, luật 7 ô): thắng display:inline-flex ở trên. */
.tri-pager [hidden] {
	display: none;
}

/* Dấu "…" bấm được (nhảy tới trang giữa đoạn ẩn — inc/pager.php). */
.tri-pager a.tri-pager__gap,
.tri-pager button.tri-pager__gap,
.tri-pagination a.page-numbers.dots {
	min-width: 32px;
	padding-inline: 6px;
	border-radius: 16px;
	cursor: pointer;
}

.tri-pager a.tri-pager__gap:hover,
.tri-pager button.tri-pager__gap:hover,
.tri-pagination a.page-numbers.dots:hover {
	background: var(--wp--custom--color--ice-soft);
}

@media (min-width: 1025px) {
	.tri-gallery,
		.tri-gallery--4,
		.tri-gallery:not(.tri-gallery--4) {
		grid-template-columns: repeat(2, minmax(0, 1fr));

	}
}

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

	}

	.tri-gallery:not(.tri-gallery--4) {
		grid-template-columns: repeat(5, minmax(0, 1fr));

	}
}

.tri-moments .tri-marquee__row--rtl {
	padding-left: 0;
}

.tri-moments .tri-marquee__group {
	gap: var(--tri-moment-gap);
	padding-right: var(--tri-moment-gap);
}

/* ── Phân trang ── */
.tri-pagination {
	margin-top: 32px;
}

.tri-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.tri-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.tri-pagination .page-numbers:hover,
.tri-pagination .page-numbers:focus-visible {
	background: var(--wp--preset--color--ice);
}

.tri-pagination .page-numbers.current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tri-pagination .page-numbers.dots {
	background: transparent;
}

.tri-press > .tri-press__nav::before,
.tri-reviews > .tri-reviews__nav::before,
.tri-skill-courses > .tri-reviews__nav::before,
.tri-teacher--stack > .tri-teacher-switch::before,
.tri-pager .tri-pager__nav::before,
.tri-arrow-ico {
	content: "";
	display: block;
	width: var(--tri-arrow-icon);
	height: var(--tri-arrow-icon);
	margin: 0;
	background: currentColor;
	-webkit-mask: url(../../images/icon-arrow.svg) center / contain no-repeat;
	mask: url(../../images/icon-arrow.svg) center / contain no-repeat;
}

.tri-press > .tri-press__nav--prev::before,
.tri-reviews > .tri-reviews__nav--prev::before,
.tri-skill-courses > .tri-reviews__nav--prev::before,
.tri-teacher--stack > .tri-teacher-switch--prev::before,
.tri-pager .tri-pager__nav--prev::before,
.tri-arrow-ico--prev {
	transform: rotate(180deg);
}

/* Thanh phân trang: nút trước / sau dùng cùng icon (inc/pager.php thay chữ
   ‹ › ← → của paginate_links bằng .tri-arrow-ico). */
.tri-pager .tri-pager__nav {
	display: inline-grid;
	place-items: center;
}

.page-numbers.prev,
.page-numbers.next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tri-marquee__row,
.tri-navy-strip__row,
.tri-reviews-slides__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%);
}

/* 10.000+ học viên: kéo hết padding ngang của section (khổ thẻ tính theo
   --tri-mq-shell nên thẻ không to ra, chỉ thấy thêm thẻ ở hai mép). */
.tri-section--marquee .tri-marquee {
	width: calc(100% + 2 * var(--tri-section-px));
	max-width: none;
	margin-inline: calc(var(--tri-section-px) * -1);
}

@media (min-width: 768px) {
	.tri-mosaic {
		height: auto;
		align-self: center;

	}

	.tri-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));

	}

	.tri-navy-strip .tri-navy-strip__row {
		width: calc(100% + var(--tri-ns-px));
		max-width: none;
		margin-right: calc(var(--tri-ns-px) * -1);

	}

	.tri-navy-strip:has(.tri-navy-strip__label--right) .tri-navy-strip__row {
		margin-right: 0;
		margin-left: calc(var(--tri-ns-px) * -1);

	}
}