/*
 * Trang chủ & Giới thiệu: nổi bật, báo chí, LCLT/kênh, trụ cột, tầm nhìn, cam kết
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

.tri-banner .tri-cta-row {
	position: absolute;
	left: 0;
	right: 0;
	/* 32@600 — scale theo chiều khung, không cố định px. */
	bottom: calc(100% * 32 / 600);
	z-index: 1;
	padding: 0 16px;
}

.tri-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tri-grid-gutter);
	padding: 32px 0 8px;
}

.tri-cta-row--flush {
	padding-top: 0;
}

.tri-commit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 48px;
	max-width: var(--tri-frame);
	margin: 0 auto;
	padding: 8px 16px 24px;
}

.tri-commit {
	display: flex;
	align-items: center;
	gap: 20px;
}

.tri-commit__icon {
	display: grid;
	place-items: center;
	flex: 0 0 128px;
	width: 128px;
	height: 128px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05);
}

.tri-commit__icon img {
	display: block;
	width: auto;
	max-width: 72px;
	max-height: 72px;
	height: auto;
}

.tri-commit 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-commit p strong {
	font-weight: var(--wp--custom--font--weight-strong);
}

.tri-about__copy strong {
	font-weight: var(--wp--custom--font--weight-strong);
	color: #0053d1;
}

/* 1/3 cuốn sách đè góc trái dưới thẻ trái; phần còn lại treo bên dưới. */
.tri-about__book {
	z-index: 3;
	left: 0;
	top: calc((var(--tri-card1-h) - 101 / 3) / var(--tri-stage-h) * 100%);
	width: calc(91 / var(--tri-stage-w) * 100%);
	height: auto;
	pointer-events: none;
	animation: tri-bob 3.5s ease-in-out infinite 0.7s;
}

/* Góc phải thẻ 1, phía trên thẻ 2, không đè lên thẻ nào. */
.tri-about__headphones {
	z-index: 3;
	left: calc((var(--tri-card1-w) + 12) / var(--tri-stage-w) * 100%);
	top: calc(8 / var(--tri-stage-h) * 100%);
	width: calc(111 / var(--tri-stage-w) * 100%);
	height: auto;
	pointer-events: none;
	animation: tri-bob 5.2s ease-in-out infinite 1.8s;
}

.tri-featured {
	/* Khổ thẻ / cột nút bám --tri-frame (cqw), không neo vw thô + 352px cố định. */
	container-type: inline-size;
	container-name: tri-featured;
	display: flex;
	flex-direction: column;
	width: var(--tri-frame);
	max-width: 100%;
	margin: 0 auto;
	overflow: visible;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy);
	/* Fallback khi không có CQ: shell ≈ nội dung trong section-px. */
	--tri-feat-shell: calc(var(--tri-vp) - 2 * var(--tri-section-px));
	/* Figma @1440: frame≈993, cột nút 368 / nút 352 / cao 89. */
	--tri-feat-list: clamp(
		240px,
		calc(var(--tri-feat-shell) * 368 / 993),
		480px
	);
	--tri-feat-btn-h: clamp(64px, calc(89 * var(--tri-feat-list) / 368), 96px);
	--tri-feat-gap: var(--tri-grid-gutter);
}

.tri-featured__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding: 24px 24px 30px;
}

.tri-featured__acc {
	--tri-featured-overlap: 15px;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	margin-top: calc(-1 * var(--tri-featured-overlap));
}

.tri-featured__acc:first-child {
	margin-top: 0;
}

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

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

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

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

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

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

.tri-featured__acc:nth-child(7) {
	 z-index: 7; 
}

.tri-featured__acc:nth-child(8) {
	 z-index: 8; 
}

.tri-featured__acc:nth-child(9) {
	 z-index: 9; 
}

.tri-featured__item {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	min-height: 89px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 15px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 -6px 0 0 var(--wp--preset--color--ice);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.2;
	text-align: center;
	text-transform: capitalize;
	cursor: pointer;
	transition:
		background-color 0.28s ease,
		color 0.28s ease,
		box-shadow 0.28s ease,
		filter 0.28s ease;
}

/* Cap trắng ~½ cao button; ice; không tương tác — tạm comment HTML. */
.tri-featured__item--cap {
	height: 45px;
	min-height: 45px;
	pointer-events: none;
	cursor: default;
	color: transparent;
	user-select: none;
	white-space: normal;
}

.tri-featured__item:hover:not(.tri-featured__item--cap):not(.is-active) {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--white);
}

.tri-featured__item:focus-visible:not(.tri-featured__item--cap) {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
}

.tri-featured__item.is-active {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
	box-shadow: none;
}

.tri-featured__item.is-active:hover {
	filter: brightness(1.08);
}

/* Accordion panel (mobile): sổ xuống mượt bằng grid 0fr → 1fr. */
.tri-featured__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tri-featured__acc.is-open .tri-featured__panel {
	grid-template-rows: 1fr;
}

.tri-featured__panel-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
	padding: 16px 14px 18px;
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity 0.32s ease 0.04s,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tri-featured__acc.is-open .tri-featured__panel-inner {
	opacity: 1;
	transform: translateY(0);
}

.tri-featured__label,
.tri-featured__chev {
	pointer-events: none;
}

.tri-featured__chev {
	display: none;
}

/* Desktop: panel accordion ẩn, dùng khung preview bên phải. */
@media (min-width: 768px) {
	.tri-featured__list {
		align-items: stretch;

	}

	.tri-featured__panel {
		display: none;

	}
}

/* Mobile: bỏ nền navy ngoài, nút full ngang, sổ xuống liền một khối như FAQ. */
@media (max-width: 767px) {
	.tri-featured {
		width: calc(100% + (var(--tri-section-px) * 2));
		max-width: none;
		margin-inline: calc(var(--tri-section-px) * -1);
		border-radius: 0;
		background: transparent;

	}

	.tri-featured__list {
		align-items: stretch;
		gap: 10px;
		width: 100%;
		padding: 0 12px 8px;

	}

	.tri-featured__acc {
		--tri-featured-overlap: 0;
		--tri-feat-bg: var(--wp--preset--color--white);
		--tri-feat-ink: var(--wp--preset--color--navy);
		--tri-feat-panel: color-mix(in srgb, var(--wp--preset--color--action) 7%, var(--wp--preset--color--white));
		width: 100%;
		margin-top: 0;
		border-radius: 16px;
		background: var(--tri-feat-bg);
		box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);

	}

	.tri-featured__acc.is-open {
		--tri-feat-bg: var(--wp--preset--color--action);
		--tri-feat-ink: var(--wp--preset--color--white);
		z-index: 1;
		overflow: hidden;
		box-shadow: 0 8px 20px color-mix(in srgb, var(--wp--preset--color--action) 28%, transparent);

	}

	.tri-featured__item,
		.tri-featured__acc .tri-featured__item:hover:not(.tri-featured__item--cap):not(.is-active),
		.tri-featured__acc .tri-featured__item.is-active,
		.tri-featured__acc .tri-featured__item.is-active:hover {
		justify-content: space-between;
		gap: 12px;
		min-height: 48px;
		padding: 10px 12px 10px 16px;
		border-radius: 16px;
		background: transparent;
		color: var(--tri-feat-ink);
		box-shadow: none;
		font-size: var(--wp--preset--font-size--small);
		text-align: left;
		text-transform: none;
		filter: none;

	}

	.tri-featured__acc.is-open .tri-featured__item {
		border-radius: 0;

	}

	.tri-featured__acc:not(.is-open):hover {
		background: color-mix(in srgb, var(--wp--preset--color--ice) 45%, var(--wp--preset--color--white));

	}

	.tri-featured__acc .tri-featured__item:hover:not(.is-active) {
		filter: none;

	}

	.tri-featured__label {
		flex: 1;
		min-width: 0;
		text-align: left;

	}

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

	}

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

	}

	.tri-featured__acc.is-open .tri-featured__chev {
		background: var(--wp--preset--color--white);

	}

	.tri-featured__acc.is-open .tri-featured__chev::before {
		border-color: var(--wp--preset--color--action);
		transform: rotate(45deg);
		margin-left: 0;
		margin-top: -2px;

	}

	.tri-featured__panel-inner {
		align-items: stretch;
		gap: 12px;
		margin-top: 0;
		padding: 12px 14px 16px;
		border-radius: 0;
		background: var(--tri-feat-panel);

	}

	.tri-featured__panel .tri-featured__media {
		min-height: 0;
		align-items: center;

	}

	.tri-featured__panel .tri-featured__media img {
		max-height: 148px;

	}

	.tri-featured__panel .tri-featured__facts {
		max-width: none;
		padding-top: 10px;
		text-align: left;

	}
}

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

	}

	.tri-featured__item,
		.tri-featured__acc .tri-featured__item:hover:not(.tri-featured__item--cap):not(.is-active),
		.tri-featured__acc .tri-featured__item.is-active,
		.tri-featured__acc .tri-featured__item.is-active:hover {
		min-height: 44px;
		padding: 8px 10px 8px 12px;

	}

	.tri-featured__panel-inner {
		gap: 10px;
		padding: 10px 12px 14px;

	}
}

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

	}

	.tri-featured__item,
		.tri-featured__acc .tri-featured__item:hover:not(.tri-featured__item--cap):not(.is-active),
		.tri-featured__acc .tri-featured__item.is-active,
		.tri-featured__acc .tri-featured__item.is-active:hover {
		min-height: 52px;
		padding: 12px 14px 12px 18px;
		font-size: var(--wp--preset--font-size--medium);

	}

	.tri-featured__panel-inner {
		gap: 14px;
		padding: 14px 18px 18px;

	}

	.tri-featured__panel .tri-featured__media img {
		max-height: 180px;

	}
}

.tri-featured__preview {
	--tri-featured-tip-y: 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: clamp(10px, 1.2cqi, 16px);
	height: auto;
	min-height: 0;
	margin: 16px 24px 24px;
	padding: clamp(14px, 2cqi, 22px);
	/* Cùng chrome thẻ list: bo 15px, không viền, nền trắng. */
	border: 0;
	border-radius: 15px;
	background: var(--wp--preset--color--white);
	overflow: visible;
	box-sizing: border-box;
}

/* Desktop preview: ẩn ảnh lớn — nội dung chữ + meta + CTA (kiểu course-info). */
.tri-featured__preview .tri-featured__media {
	display: none;
}

.tri-featured__details {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(8px, 1cqi, 12px);
	width: 100%;
	min-width: 0;
	overflow: visible;
	transition:
		opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.tri-featured__details.is-out {
	opacity: 0;
	transform: translateY(8px);
}

.tri-featured__details.is-in {
	opacity: 0;
	transform: translateY(-6px);
}

.tri-featured__preview.is-swap {
	overflow: hidden;
}

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

	}

	.tri-featured__details.is-out,
		.tri-featured__details.is-in {
		opacity: 1;
		transform: none;

	}

	.tri-featured__preview::before {
		transition: none !important;

	}
}

.tri-featured__title {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: clamp(0.92rem, 0.35cqi + 0.85rem, 1.15rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.tri-featured__points {
	margin: 0;
	padding: 0 0 0 1.1em;
	color: var(--wp--custom--color--ink);
	font-size: clamp(0.78rem, 0.25cqi + 0.72rem, 0.92rem);
	line-height: 1.45;
}

.tri-featured__points li {
	margin: 0 0 0.35em;
}

.tri-featured__points li:last-child {
	margin-bottom: 0;
}

.tri-featured__points li::marker {
	color: var(--wp--preset--color--orange);
}

.tri-featured__promo {
	margin: 0;
	padding: clamp(8px, 1cqi, 10px) clamp(10px, 1.2cqi, 12px);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--orange) 12%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--navy);
	font-size: clamp(0.78rem, 0.25cqi + 0.72rem, 0.9rem);
	font-weight: 600;
	line-height: 1.4;
}

.tri-featured__more {
	margin: 0;
	font-size: clamp(0.78rem, 0.25cqi + 0.72rem, 0.9rem);
	line-height: 1.4;
}

.tri-featured__more a {
	color: var(--wp--preset--color--royal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

/* Mũi từ khung trắng bên phải, hướng trái chạm vào button active */
.tri-featured__preview::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--tri-featured-tip-y);
	z-index: 3;
	display: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 18px 14px 0;
	border-color: transparent var(--wp--preset--color--white) transparent transparent;
	transform: translate(-100%, -50%);
	pointer-events: none;
	transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tri-featured__media {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Ba dòng Mục tiêu / Thời lượng / Sĩ số của khoá đang chọn. Lưới hai cột
   "nhãn : giá trị" để các giá trị thẳng hàng nhau khi đổi khoá. */
.tri-featured__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	flex-shrink: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid var(--wp--custom--color--rule);
	font-size: clamp(0.75rem, 0.2cqi + 0.7rem, 0.875rem);
	line-height: 1.4;
}

.tri-featured__fact {
	display: contents;
}

/* display:contents thắng [hidden]{display:none} của reset, nên khoá nào bỏ
   trống một dòng thì dòng đó vẫn hiện ra rỗng. Chặn lại tường minh. */
.tri-featured__fact[hidden] {
	display: none;
}

.tri-featured__facts dt {
	margin: 0;
	color: var(--wp--custom--color--ink-mid);
	white-space: nowrap;
}

.tri-featured__facts dd {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.tri-featured__media picture,
.tri-featured__media img,
.tri-featured__media video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Accordion panel (mobile): giữ ảnh gọn, không cover full box. */
.tri-featured__panel .tri-featured__media {
	overflow: visible;
	min-height: 160px;
}

.tri-featured__panel .tri-featured__media img,
.tri-featured__panel .tri-featured__media video {
	height: auto;
	max-height: 220px;
	object-fit: contain;
	object-position: center bottom;
}

.tri-why {
	display: grid;
	gap: 16px;
	max-width: var(--tri-frame);
	margin: 40px auto 0;
}

.tri-why--orbit {
	/* Figma: thẻ rộng 378, hàng 1 & 3 thắt vào 120 @1440.
	   Inset sống trên component (không :root) — phải là length hợp lệ;
	   calc(N * length / length) ra số đơn vị → clamp(0px,…) bị hủy → margin 0. */
	--tri-why-inset: 0px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 24px 0;
}

.tri-why__center {
	display: flex;
	justify-content: center;
	order: -1;
}

.tri-why__photo {
	display: block;
	flex: 0 0 auto;
	width: min(320px, 76%);
	height: auto;
}

.tri-why__item {
	position: relative;
	z-index: 1;
	display: flex;
	/* Icon neo đầu thẻ (ngang dòng chữ đầu), không canh giữa theo chiều cao. */
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background: var(--wp--preset--color--white);
	border-radius: 24px;
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1);
}

.tri-why__item p {
	margin: 0;
	font-weight: var(--wp--custom--font--weight-ui);
	color: var(--wp--preset--color--navy);
}

.tri-why--orbit .tri-why__item p {
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--custom--color--ink);
}

.tri-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--action);
}

.tri-section--why-2 .tri-why__center {
	position: relative;
}

.tri-section--why-2 .tri-why__orb {
	position: absolute;
	z-index: 0;
	left: 50%;
	/* Mobile ≤767: 250@~390 — clamp + --tri-vp, không kẹt px cứng. */
	bottom: 6%;
	width: min(
		clamp(160px, calc(250 / 390 * var(--tri-vp)), 250px),
		78%
	);
	height: auto;
	transform: translateX(-50%);
	pointer-events: none;
}

.tri-section--why-2 .tri-why__photo {
	position: relative;
	z-index: 1;
}

/* Tablet: orb theo --tri-vp giữa mobile 250 và desktop 380. */
@media (min-width: 768px) and (max-width: 1024px) {
	.tri-section--why-2 .tri-why__orb {
		bottom: 5%;
		width: min(
			clamp(200px, calc(300 / var(--tri-type-ref) * var(--tri-vp)), 320px),
			78%
		);

	}
}

.tri-about__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tri-about__copy p {
	margin: 0;
}

/* —— Duo: LCLT (--start + navy) ↔ Channels (--end + ice) — mirror layout —— */
.tri-duo {
	display: grid;
	grid-template-areas:
		"intro"
		"list";
	gap: 24px;
	width: var(--tri-frame);
	margin-inline: auto;
	overflow: visible;
}

.tri-duo__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tri-duo__list {
	grid-area: list;
	display: grid;
	gap: clamp(16px, calc(20 / var(--tri-type-ref) * var(--tri-vp)), 24px);
	align-content: start;
	height: 100%;
}

.tri-duo--start .tri-duo__intro {
	align-items: flex-start;
	text-align: left;
}

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

.tri-duo__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	max-width: 22ch;
	line-height: 1.15;
}

.tri-duo__line {
	display: inline-block;
	/* text-transform: uppercase; */
}

.tri-duo__line--badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.tri-duo__word {
	display: inline-block;
}

/* Pill cam — dùng chung news-strip / LCLT title. */
.tri-lclt-block__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 14px 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-size: 1em;
	font-weight: inherit;
	line-height: inherit;
	text-transform: uppercase;
	vertical-align: middle;
}

.tri-duo__media--lclt {
	margin: 8px 0 0;
	width: clamp(320px, calc(400 / var(--tri-type-ref) * var(--tri-vp)), 460px);
	max-width: 100%;
	height: auto;
	aspect-ratio: 353 / 336;
	overflow: hidden;
	border-radius: 30px;
	background: var(--wp--preset--color--placeholder);
}

.tri-duo__media--lclt img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.tri-duo__media--channels {
	position: relative;
	width: min(360px, 100%);
	margin: 28px 0 0;
	aspect-ratio: 360 / 340;
	overflow: visible;
}

.tri-duo__panel {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 88%;
	height: 78%;
	transform: translateX(-50%);
	border-radius: 48px;
	background: var(--wp--custom--color--ice-soft);
}

.tri-duo__media--channels img {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
	display: block;
	width: auto;
	max-width: none;
	height: 125%;
	transform: translateX(-50%);
	object-fit: contain;
	object-position: bottom center;
}

/* Shared duo card — bottom-only radius; top vuông cho bar đỉnh. */
.tri-duo__card {
	--tri-duo-icon: clamp(44px, calc(54 / var(--tri-type-ref) * var(--tri-vp)), 62px);
	--tri-duo-gap: clamp(8px, calc(10 / var(--tri-type-ref) * var(--tri-vp)), 14px);
	--tri-duo-pad-x: clamp(18px, calc(30 / var(--tri-type-ref) * var(--tri-vp)), 36px);
	--tri-duo-pad-y: clamp(18px, calc(28 / var(--tri-type-ref) * var(--tri-vp)), 34px);
	--tri-duo-head-pt: clamp(18px, calc(26 / var(--tri-type-ref) * var(--tri-vp)), 32px);
	--tri-duo-head-pl: clamp(22px, calc(36 / var(--tri-type-ref) * var(--tri-vp)), 44px);
	--tri-duo-dash-w: clamp(26px, calc(34 / var(--tri-type-ref) * var(--tri-vp)), 40px);
	--tri-duo-dash-slot: calc(var(--tri-duo-dash-w) + var(--tri-duo-gap));
	--tri-duo-bar: clamp(5px, calc(8 / var(--tri-type-ref) * var(--tri-vp)), 10px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 0 var(--tri-duo-pad-x) var(--tri-duo-pad-y) 0;
	border: 0;
	border-top: 0;
	border-radius: 0 0 24px 24px;
	box-shadow: 0 4px 16px rgba(9, 31, 91, 0.06);
}

.tri-duo__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: var(--tri-duo-bar);
	margin: 0;
	border: 0;
	border-radius: 0;
	pointer-events: none;
}

.tri-duo__head {
	display: flex;
	align-items: center;
	gap: var(--tri-duo-gap);
	margin: 0;
	padding: var(--tri-duo-head-pt) 0 0 var(--tri-duo-head-pl);
}

.tri-duo__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--tri-duo-icon);
	height: var(--tri-duo-icon);
	border-radius: 50%;
}

.tri-duo__icon img {
	display: block;
	width: clamp(20px, calc(28 / var(--tri-type-ref) * var(--tri-vp)), 32px);
	height: clamp(20px, calc(28 / var(--tri-type-ref) * var(--tri-vp)), 32px);
	filter: brightness(0) invert(1);
}

.tri-duo__card h3 {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-duo-gap);
	margin: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: clamp(
		var(--wp--preset--font-size--medium),
		calc(20 / var(--tri-type-ref) * var(--tri-vp)),
		var(--wp--preset--font-size--large)
	);
	line-height: 1.35;
	text-transform: uppercase;
}

.tri-duo__card h3::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: var(--tri-duo-dash-w);
	height: 2px;
	background: linear-gradient(
		to right,
		currentColor 0 14.286%,
		transparent 14.286% 35.714%,
		currentColor 35.714% 64.286%,
		transparent 64.286% 85.714%,
		currentColor 85.714% 100%
	);
}

.tri-duo__card p {
	margin: 0;
	min-width: 0;
	padding-left: calc(
		var(--tri-duo-head-pl) + var(--tri-duo-icon) + var(--tri-duo-gap) + var(--tri-duo-dash-slot)
	);
	font-size: clamp(
		var(--wp--preset--font-size--small),
		calc(16 / var(--tri-type-ref) * var(--tri-vp)),
		var(--wp--preset--font-size--medium)
	);
	line-height: 1.5;
}

.tri-duo__card--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.tri-duo__card--navy .tri-duo__bar {
	background: var(--wp--preset--color--sky);
}

.tri-duo__card--navy .tri-duo__icon {
	background: var(--wp--preset--color--action);
}

.tri-duo__card--navy h3,
.tri-duo__card--navy p {
	color: var(--wp--preset--color--white);
}

.tri-duo__card--navy p {
	opacity: 0.95;
}

.tri-duo__card--ice {
	background: var(--wp--custom--color--ice-soft);
	color: var(--wp--preset--color--navy);
}

.tri-duo__card--ice .tri-duo__bar {
	background: var(--wp--preset--color--navy);
}

.tri-duo__card--ice .tri-duo__icon {
	background: var(--wp--preset--color--navy);
}

.tri-duo__card--ice h3 {
	color: var(--wp--preset--color--navy);
}

.tri-duo__card--ice p {
	color: var(--wp--custom--color--ink-strong);
}

.tri-vision-list {
	/* T?m c?a d?y ch?m, t?nh t? m?p tr?i <ul>. */
	--tri-rail-x: 7px;
	--tri-rail-dot: 13px;
	position: relative;
	margin: 16px 0 0;
	padding: 0 0 0 28px;
	list-style: none;
}

/* ???ng g?ch ??t ch?y d?c xuy?n qua c?c ch?m. */
.tri-vision-list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tri-rail-x);
	border-left: 2px dashed rgba(255, 255, 255, 0.55);
}

.tri-vision-list li {
	position: relative;
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.tri-vision-list li:last-child {
	margin-bottom: 0;
}

/* Figma: v?ng tr?n vi?n tr?ng m?nh, ru?t navy ?? che ???ng g?ch, gi?a l? ch?m tr?ng. */
.tri-vision-list li::before,
.tri-vision-list li::after {
	content: "";
	position: absolute;
	top: 4px;
	border-radius: 50%;
}

.tri-vision-list li::before {
	left: calc(var(--tri-rail-x) - 28px - var(--tri-rail-dot) / 2 + 1px);
	width: var(--tri-rail-dot);
	height: var(--tri-rail-dot);
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: var(--wp--preset--color--navy);
	box-sizing: border-box;
}

.tri-vision-list li::after {
	left: calc(var(--tri-rail-x) - 28px - 3px + 1px);
	top: 8px;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--white);
}

/* Figma: 3 thẻ trắng, ảnh promo trên + logo/tiêu đề dưới; thẻ giữa nổi hơn.
   Khổ thẻ = (khung − 2 gutter) / 3 — bám đúng width --tri-frame (cqw),
   không neo vw thô + media 290px cố định (gây vỡ khi resize). */
.tri-press {
	container-type: inline-size;
	container-name: tri-press;
	/* 100cqw = bề ngang .tri-press (= --tri-frame). Fallback khi không có CQ. */
	--tri-press-shell: calc(var(--tri-vp) - 2 * var(--tri-section-px));
	--tri-press-w: clamp(
		200px,
		calc((var(--tri-press-shell) - 2 * var(--tri-grid-gutter)) / 3),
		440px
	);
	--tri-press-h: calc(var(--tri-press-w) * 280 / 325);
	--tri-press-pad-x: clamp(10px, calc(var(--tri-press-w) * 17.5 / 325), 18px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tri-frame);
	max-width: 100%;
	margin-inline: auto;
	margin-bottom: 24px;
}

@supports (width: 1cqw) {
	.tri-press {
		--tri-press-w: clamp(
			200px,
			calc((100cqw - 2 * var(--tri-grid-gutter)) / 3),
			440px
		);

	}
}

/* Khung cắt: cả danh sách báo nằm trên một cái ray dài, khung này chỉ cho
   thấy phần giữa. Nhờ vậy đổi ảnh là ray TRƯỢT ngang chứ không phải các
   thẻ hoán đổi kích thước tại chỗ — mắt theo được hướng đi. */
.tri-press__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Đệm dọc cho scale(lead) + translateY(hover).
	   CHỈ đệm theo chiều DỌC: place() canh giữa dựa vào viewport.clientWidth,
	   mà clientWidth có tính cả padding ngang — đệm ngang vào là lệch tâm. */
	padding-block: 28px 36px;
	margin-block: -28px -36px;
}

.tri-press__track {
	display: flex;
	align-items: center;
	gap: var(--tri-grid-gutter);
	/* JS đặt translateX để ô nổi bật nằm đúng giữa khung. */
	transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}

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

.tri-press__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.tri-press__item {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0;
	/* Lead không đổi flex-basis — JS canh giữa theo khổ layout. */
	flex: 0 0 var(--tri-press-w);
	width: var(--tri-press-w);
	height: var(--tri-press-h);
	padding: clamp(10px, calc(var(--tri-press-w) * 14 / 325), 14px)
		var(--tri-press-pad-x)
		clamp(8px, calc(var(--tri-press-w) * 12 / 325), 12px);
	border: 0;
	border-radius: clamp(16px, calc(var(--tri-press-w) * 24 / 325), 24px);
	/* Nền/bóng ở ::before. */
	background: transparent;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	opacity: 0.72;
	transform-origin: center center;
	isolation: isolate;
	transition: opacity 0.5s ease,
		transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-press__item:nth-child(1) {
	 z-index: 9; 
}

.tri-press__item:nth-child(2) {
	 z-index: 8; 
}

.tri-press__item:nth-child(3) {
	 z-index: 7; 
}

.tri-press__item:nth-child(4) {
	 z-index: 6; 
}

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

.tri-press__item:nth-child(6) {
	 z-index: 4; 
}

.tri-press__item:nth-child(7) {
	 z-index: 3; 
}

.tri-press__item:nth-child(8) {
	 z-index: 2; 
}

.tri-press__item:nth-child(9) {
	 z-index: 1; 
}

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

.tri-press__item:hover {
	transform: translateY(-8px);
	opacity: 1;
}

/* Ô giữa: nổi opacity/z-index; scale chỉ khi hover/focus. */
.tri-press__item--lead {
	opacity: 1;
	z-index: 10;
}

.tri-press__item--lead:hover,
.tri-press__item--lead:focus-visible {
	transform: scale(1.08) translateY(-8px);
}

.tri-press__media,
.tri-press__footer {
	position: relative;
	z-index: 1;
}

.tri-press__media {
	display: block;
	flex: 0 0 auto;
	/* Trước đây 290×165 cố định — tràn khi --tri-press-w < ~325. */
	width: 100%;
	height: auto;
	aspect-ratio: 290 / 165;
	margin: 0 auto;
	overflow: hidden;
	border-radius: clamp(12px, calc(var(--tri-press-w) * 16 / 325), 16px);
	line-height: 0;
	background: var(--wp--preset--color--placeholder, #d9e7f3);
}

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

/* Phần còn lại: logo + headline — full bề ngang thẻ. */
.tri-press__footer {
	display: flex;
	align-items: center;
	gap: clamp(8px, calc(var(--tri-press-w) * 10 / 325), 12px);
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	margin: 0 auto;
	padding: clamp(6px, calc(var(--tri-press-w) * 10 / 325), 10px) 2px 0;
}

.tri-press__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	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-medium, 500);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Nhãn TIPS / TIN TỨC — cùng pill cam như .tri-lclt-block__badge cạnh “quyền”. */
.tri-navy-strip__label h2 .tri-lclt-block__badge {
	font-weight: inherit;
	line-height: 1.15;
}

.tri-partners {
	--tri-ticker-duration: 40s;
	/* Logo ×1.3 so với bản cũ (153×85 / max-h 65 → 199×111 / 85).
	   Token theo màn: mobile hơi hạ để còn thấy ≥2 ô; ≥768 đủ 1.3×;
	   ≥1025 fluid neo 1440. */
	--tri-partner-w: 168px;
	--tri-partner-h: 94px;
	--tri-partner-img-max: 72px;
	--tri-partner-gap: 14px;
	--tri-partner-pad: 10px;
	/* Full-bleed: kéo hết padding ngang .tri-section → mép viewport
	   (body đã khóa --tri-vp-cap 3840, nên 1025→4K vẫn sát cạnh). */
	width: calc(100% + (2 * var(--tri-section-px)));
	max-width: none;
	margin-inline: calc(var(--tri-section-px) * -1);
	/* .tri-ticker cắt tràn để dải logo chạy vòng, nên bóng dưới mỗi thẻ
	   (0 6px 4px, rộng xuống 10px) bị xén mất. Chừa chỗ rồi kéo lại bằng
	   margin âm dọc — không đụng margin-inline breakout. */
	padding-block: 2px 12px;
	margin-block: -2px -12px;
	/* Màn sương hai đầu: cùng token --tri-mist với .tri-mist. */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--tri-mist),
		#000 calc(100% - var(--tri-mist)),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--tri-mist),
		#000 calc(100% - var(--tri-mist)),
		transparent 100%
	);
}

@media (min-width: 768px) {
	.tri-partners {
		--tri-partner-w: 199px;
		--tri-partner-h: 111px;
		--tri-partner-img-max: 85px;
		--tri-partner-gap: 21px;
		--tri-partner-pad: 13px;

	}
}

.tri-partner {
	display: grid;
	place-items: center;
	flex: 0 0 var(--tri-partner-w);
	width: var(--tri-partner-w);
	height: var(--tri-partner-h);
	padding: var(--tri-partner-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05);
}

/* Logo đủ tỉ lệ (vuông / ngang / đứng). Không ép cứng width/height HTML —
   co trong khung, giữ tỉ lệ; max-height theo token màn. */
.tri-partner img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--tri-partner-img-max);
	object-fit: contain;
}

@media (min-width: 768px) {
	.tri-about {
		align-items: stretch;

	}

	.tri-featured {
		flex-direction: row;
		/* Cao theo cột chữ (preview); tab trái kéo dài cho khớp — không scroll nội bộ. */
		align-items: stretch;
		padding: clamp(16px, calc(24 * 100cqw / 993), 28px)
			clamp(12px, calc(20 * 100cqw / 993), 24px)
			clamp(16px, calc(24 * 100cqw / 993), 28px)
			clamp(10px, calc(16 * 100cqw / 993), 20px);
		gap: 0;

	}

	.tri-featured__list {
		flex: 0 0 var(--tri-feat-list);
		width: var(--tri-feat-list);
		max-width: var(--tri-feat-list);
		align-items: stretch;
		justify-content: stretch;
		align-self: stretch;
		padding: 0 0 0 8px;
		gap: 0;
		/* Phân đều chiều cao theo preview — hết khoảng trống xấu. */
		display: flex;
		flex-direction: column;

	}

	.tri-featured__acc {
		width: 100%;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		min-height: 0;
		margin-top: calc(-1 * var(--tri-featured-overlap));

	}

	.tri-featured__acc:first-child {
		margin-top: 0;

	}

	.tri-featured__item {
		width: 100%;
		flex: 1 1 auto;
		height: auto;
		min-height: clamp(52px, calc(72 * 100cqw / 993), 89px);
		max-height: none;
		overflow: hidden;

	}

	.tri-featured__label {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		max-width: 100%;
		overflow-wrap: anywhere;
		font-size: clamp(0.8rem, 0.4cqi + 0.7rem, 1.05rem);

	}

	.tri-featured__preview {
		flex: 1 1 auto;
		align-self: stretch;
		min-width: 0;
		min-height: 0;
		height: auto;
		max-height: none;
		margin: 0 0 0 clamp(12px, calc(16 * 100cqw / 993), 20px);
		border: 0;
		border-radius: 15px;
		background: var(--wp--preset--color--white);
		overflow: visible;

	}

	.tri-featured__preview .tri-featured__details {
		flex: 0 1 auto;
		min-height: 0;
		overflow: visible;
		padding-right: 0;

	}

	.tri-featured__preview .tri-featured__facts {
		max-width: none;

	}

	.tri-featured__preview::before {
		display: block;
		border-width: 14px 16px 14px 0;

	}

	.tri-featured__preview .tri-featured__media {
		flex: 1 1 auto;
		min-height: 0;
		align-self: stretch;

	}

	.tri-featured__preview .tri-featured__media picture,
		.tri-featured__preview .tri-featured__media img,
		.tri-featured__preview .tri-featured__media video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;

	}

	.tri-why:not(.tri-why--orbit) {
		grid-template-columns: 1fr 1fr;

	}

	.tri-press {
		/* Đủ chỗ cho scale(lead) + hover; chiều cao thẻ đã theo --tri-press-h. */
		min-height: calc(var(--tri-press-h) * 1.12 + 24px);

	}

	.tri-press__title {
		font-size: var(--tri-text-13);

	}

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

	}
}

/* ?? Ph??ng ph?p ??o t?o: 2 tr? ph??ng ph?p ?????????????????????????????
   Figma: badge navy tab gi?a m?p tr?n, thanh navy l? d??i ??y (nh? .tri-stat-card). */
.tri-pillars {
	display: grid;
	gap: 28px;
	align-items: stretch;
	max-width: var(--tri-frame);
	margin: 40px auto 0;
}

.tri-pillar {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* ch?a ch? badge nh? l?n + thanh navy l? xu?ng */
	margin-top: 16px;
	margin-bottom: 9px;
	padding: 36px 24px 24px;
	background: transparent;
	border: none;
	box-shadow: none;
	text-align: left;
	isolation: isolate;
}

/* M?t th? n?m tr?n thanh navy. */
.tri-pillar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

/* Thanh navy n?m sau m?t th?, ch? l? ph?n ??y. */
.tri-pillar::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-pillar > *:not(.tri-pillar__badge) {
	position: relative;
	z-index: 1;
}

.tri-pillar__title {
	margin: 0;
	color: var(--wp--preset--color--action);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font--weight-ui);
	text-align: center;
}

.tri-pillar__points {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1;
}

/* Figma: m?i ? c? d?u t?ch; ???ng ??t ch? gi?a c?c ?. */
.tri-pillar__points li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	margin: 0;
	padding: 12px 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-pillar__points li + li {
	border-top: 1px dashed var(--wp--custom--color--rule);
}

.tri-pillar__points li::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--action) url(../../images/icon-check.svg) center / 13px no-repeat;
}

/* M?t ? grid duy nh?t cho body ? tr?nh text/<strong> t?ch c?t 20px. */
.tri-pillar__text {
	min-width: 0;
	text-align: justify;
}

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

.tri-pillar__more {
	margin-top: auto;
	align-self: center;
	padding-top: 8px;
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-ui);
	font-size: var(--wp--preset--font-size--small);
}

.tri-press__nav--prev {
	left: 0;
}

.tri-press__nav--next {
	right: 0;
}

/* ?? T?m nh?n & S? m?nh (Gi?i thi?u) ??????????????????????????????????
   Figma: th? navy 582 v? th? ice 412 n?m s?t nhau kh?ng c? khe, th? ice
   th?t v?o theo chi?u d?c ?? l? th? navy cao h?n. */
.tri-vision {
	display: grid;
	gap: 24px;
	width: var(--tri-frame);
	margin-inline: auto;
}

/* ?? Gi? tr? c?t l?i (Gi?i thi?u) ?????????????????????????????????????
   Figma: ??a navy 253px, cung tr?n b?n k?nh 170.5 n?t 12px tr?i n?a ph?i,
   4 badge 40px b?m tr?n cung, m?i badge k?o m?t ???ng ch?m sang ph?i k?t
   th?c b?ng m?i t?n, nh?n n?m ph?a tr?n ???ng. */
.tri-core {
	--tri-core-disc: 253px;
	--tri-core-r: 170.5px;
	--tri-core-badge: 40px;
	/* Mép trái đĩa navy trùng mép trái thẻ Tầm nhìn. Tâm = r + inset, mép đĩa = tâm − disc/2. */
	--tri-core-inset: calc((var(--tri-core-disc) - var(--tri-core-r) * 2) / 2);
	display: grid;
	gap: 16px;
	width: var(--tri-frame);
	margin: 32px auto 0;
}

.tri-core__disc,
.tri-core__arc {
	display: none;
}

.tri-core__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-core__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
}

.tri-core__badge {
	flex-shrink: 0;
	width: var(--tri-core-badge);
	height: var(--tri-core-badge);
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--action) url(../../images/icon-user.svg) center / 20px no-repeat;
	box-shadow: 0 2px 8px rgba(9, 31, 91, 0.2);
}

.tri-core__label {
	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);
	color: var(--wp--preset--color--navy);
	text-transform: uppercase;
	line-height: 1.3;
}

/* ?? Kho?nh kh?c h?c t?p (??i ng? gi?ng vi?n) ?????????????????????????
   Figma: d?i tr?n h?t b? ngang m?n, 2 h?ng l?ch nhau n?a ?. */
.tri-moments {
	--tri-moment-w: 295px;
	--tri-moment-gap: 22px;
	display: grid;
	gap: var(--tri-moment-gap);
	/* k?o ra kh?i padding ngang c?a .tri-section ?? tr?n vi?n */
	margin-inline: calc(var(--tri-section-px) * -1);
	overflow: hidden;
}

/* Hang duoi lech nua o. Margin am nam tren chinh hang (width 100%) nen mep
   phai lui vao dung nua o — mot dai trong ben phai. Keo rong them dung
   khoang do de mep phai sat viewport; phan thua ben trai bi overflow:hidden
   cua .tri-moments cat di. .tri-marquee__row--rtl da co padding-left 120px
   rieng cho marquee hoc vien o trang chu, khong lien quan toi so le nay. */
.tri-moments__row:last-child {
	margin-left: calc(var(--tri-moment-w) / -2);
	width: calc(100% + (var(--tri-moment-w) / 2));
}

.tri-moments__tile {
	flex: 0 0 var(--tri-moment-w);
	width: var(--tri-moment-w);
	aspect-ratio: 295 / 208;
	border-radius: 12px;
	object-fit: cover;
}

.tri-tech-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 280px;
	padding: 40px 28px 56px;
	border: 1px solid var(--wp--preset--color--royal);
	border-radius: 28px;
	background: var(--wp--custom--color--ice-soft);
}

/* -- Báo chí nói gì: thẻ to hơn (29/09/2026) ------------------------------
   Trước: thẻ = (khung 8 cột − 2 gutter) / 3 ≈ 301px @1440, điện thoại bị ép
   về 200px; logo 70×33, tiêu đề 13px. JS (nav.js [data-tri-press]) đo khổ
   thật nên chỉ cần đổi CSS. */
.tri-press__logo {
	display: block;
	flex: 0 0 auto;
	width: auto;
	object-fit: contain;
	object-position: left center;
	max-width: clamp(64px, calc(var(--tri-press-w) * 92 / 325), 112px);
	height: clamp(32px, calc(var(--tri-press-w) * 42 / 325), 50px);
}

.tri-press__title {
	font-size: var(--tri-text-15, 15px);
	font-weight: 600;
	line-height: 1.35;
}

@media (min-width: 1025px) {
	/* Desktop ≥1025: 380@1440 — cùng --tri-why-s với ảnh/thẻ orbit (2K→1920→1440). */
	.tri-section--why-2 .tri-why__orb {
		bottom: 4%;
		width: min(calc(380px * var(--tri-why-s, 1)), 78%);

	}

	.tri-partners {
		--tri-partner-w: clamp(199px, calc(199 / var(--tri-type-ref) * var(--tri-vp)), 266px);
		--tri-partner-h: clamp(111px, calc(111 / var(--tri-type-ref) * var(--tri-vp)), 148px);
		--tri-partner-img-max: clamp(85px, calc(85 / var(--tri-type-ref) * var(--tri-vp)), 113px);
		--tri-partner-gap: clamp(21px, calc(21 / var(--tri-type-ref) * var(--tri-vp)), 28px);
		--tri-partner-pad: clamp(13px, calc(13 / var(--tri-type-ref) * var(--tri-vp)), 17px);

	}

	.tri-why--orbit {
		/* Neo 1440: 378 | center | 378 + inset 120. Scale cả cụm theo --tri-vp
		   để quan hệ lệch (relative/absolute margins) giữ nguyên — không ép
		   min(378,38%) / frame hẹp làm mất vòng cung. Shell rộng hơn --tri-frame
		   một chút để thẻ được phép overhang trong section. */
		--tri-why-s: clamp(0.75, calc(var(--tri-vp) / 1320px), 1.4);
		/* Thẻ 420 (cũ 378) cho dài hơn, ít dòng hơn; thụt 100 (cũ 120) để hàng
		   1 & 3 không lấn thêm vào nhân vật giữa. */
		--tri-why-inset: calc(100px * var(--tri-why-s));
		grid-template-columns:
			minmax(0, calc(420px * var(--tri-why-s)))
			minmax(calc(280px * var(--tri-why-s)), 1fr)
			minmax(0, calc(420px * var(--tri-why-s)));
		/* Ảnh giữa cao hơn 3 thẻ cộng lại: phần dư dồn vào 2 hàng đệm 1fr trên /
		   dưới, 3 hàng thẻ ôm sát nhau (trước ảnh kéo giãn hàng → thẻ cách ~90px). */
		grid-template-rows: 1fr auto auto auto 1fr;
		align-items: center;
		gap: calc(24px * var(--tri-why-s)) 0;
		/* 100% (bề ngang thật của section), không dùng --tri-vp: chế độ "fixed"
		   (inc/responsive.php) khoá --tri-vp = 1440px nên màn 1025–1290 bị tràn. */
		width: min(calc(1240px * var(--tri-why-s)), 100%);
		max-width: none;
		margin-inline: auto;
		padding: 0;

	}

	.tri-why__center {
		grid-column: 2;
		grid-row: 1 / -1;
		order: 0;
		align-self: end;

	}

	.tri-why__photo {
		/* 570px @ 1440 (cao ~428px như Figma); co theo cột giữa + --tri-why-s. */
		width: clamp(
			calc(300px * var(--tri-why-s, 1)),
			calc(100% + (86px * var(--tri-why-s, 1))),
			calc(570px * var(--tri-why-s, 1))
		);
		max-width: none;
		/* triệt tiêu padding đáy của .tri-section để nhân vật đụng sát mép band */
		margin-bottom: calc(var(--tri-section-pb) * -1);

	}

	.tri-why__item--1 {
		 grid-column: 1; grid-row: 2; 
	}

	.tri-why__item--2 {
		 grid-column: 1; grid-row: 3; 
	}

	.tri-why__item--3 {
		 grid-column: 1; grid-row: 4; 
	}

	.tri-why__item--4 {
		 grid-column: 3; grid-row: 2; 
	}

	.tri-why__item--5 {
		 grid-column: 3; grid-row: 3; 
	}

	.tri-why__item--6 {
		 grid-column: 3; grid-row: 4; 
	}

	/* Hàng 1 & 3 thắt vào, hàng 2 sát mép — vòng cung quanh ảnh (relative margins). */
	.tri-why__item--1,
		.tri-why__item--3 {
		margin-left: var(--tri-why-inset);
		margin-right: calc(var(--tri-why-inset) * -1);

	}

	.tri-why__item--4,
		.tri-why__item--6 {
		margin-left: calc(var(--tri-why-inset) * -1);
		margin-right: var(--tri-why-inset);

	}

	/* Khung rộng như header/footer (10 cột) → thẻ ≈ 385px @1440. */
	.tri-press {
		width: var(--tri-chrome);

	}

	.tri-press__nav--prev {
		left: -8px;

	}

	.tri-press__nav--next {
		right: -8px;

	}
}

/* Tablet: ~2 thẻ một màn. */
@media (min-width: 768px) and (max-width: 1024px) {
	.tri-press {
		--tri-press-w: min(360px, 44vw);

	}
}

/* Điện thoại: thẻ nổi bật ~80% bề ngang màn, 2 thẻ bên lấp ló. */
@media (max-width: 767px) {
	.tri-press {
		--tri-press-w: min(320px, 80vw);

	}

	.tri-press__title {
		font-size: 14px;

	}
}

.tri-press > .tri-press__nav,
.tri-reviews > .tri-reviews__nav,
.tri-skill-courses > .tri-reviews__nav {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: var(--tri-arrow-size);
	height: var(--tri-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: 0 6px 18px rgba(9, 31, 91, 0.22);
	transform: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration-mid) ease, transform var(--wp--custom--motion--duration-fast, 0.15s) ease;
}

.tri-press > .tri-press__nav:hover,
.tri-reviews > .tri-reviews__nav:hover,
.tri-skill-courses > .tri-reviews__nav:hover,
.tri-teacher--stack > .tri-teacher-switch:hover {
	background: var(--wp--preset--color--navy-hover, #16307a);
}

.tri-press > .tri-press__nav:active,
.tri-reviews > .tri-reviews__nav:active,
.tri-skill-courses > .tri-reviews__nav:active {
	transform: scale(0.94);
}

/* Hàng carousel: chừa khe giữa nút và khung thẻ. */
.tri-press,
.tri-reviews,
.tri-skill-courses {
	column-gap: var(--tri-arrow-gap);
}

@supports (width: 1cqw) {
	.tri-featured {
		--tri-feat-list: clamp(
			240px,
			calc(100cqw * 368 / 993),
			480px
		);

	}

	/* Báo chí: 3 thẻ tính theo phần còn lại sau hai nút. */
	.tri-press {
		--tri-press-w: clamp(
			200px,
			calc((100cqw - 2 * (var(--tri-arrow-size) + var(--tri-arrow-gap)) - 2 * var(--tri-grid-gutter)) / 3),
			440px
		);

	}
}

/* Điện thoại: khung thẻ lấy trọn bề ngang, hai nút xuống hàng dưới. */
@media (max-width: 767px) {
	.tri-press,
		.tri-reviews,
		.tri-skill-courses {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 16px;
		column-gap: var(--tri-arrow-gap);

	}

	.tri-press > .tri-press__viewport,
		.tri-reviews > .tri-reviews__stage,
		.tri-skill-courses > .tri-skill-courses__viewport {
		flex: 0 0 100%;
		order: 0;

	}

	@supports (width: 1cqw) {
		.tri-press {
			--tri-press-w: min(320px, 80vw);

		}
	}
}

@media (max-width: 1024px) {
	/* Tablet + mobile: ẩn 4 nút CTA dưới banner.
	   Cần specificity cao hơn `.tri-cta-row { display: flex }` phía dưới. */
	.tri-banner > .tri-cta-row.tri-banner__ctas {
		display: none;

	}

	.tri-teacher--stack > .tri-teacher-switch {
		position: absolute;
		top: auto;
		bottom: 0;
		left: 50%;
		right: auto;
		z-index: 2;
		display: grid;
		place-items: center;
		width: var(--tri-arrow-size);
		height: var(--tri-arrow-size);
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
		box-shadow: 0 6px 18px rgba(9, 31, 91, 0.22);
		cursor: pointer;

	}
}

/* ══ Phương pháp đào tạo chuyên nghiệp: nhãn trụ cột = dải tên như thẻ
   Khoá học bổ trợ (.tri-skill-card__ribbon): thân navy vắt qua mép trên thẻ,
   bo 2 góc dưới (::after) + 2 tai navy đậm ló hai bên (::before). */
.tri-pillar {
	padding-top: 76px;
}

.tri-pillar__badge {
	position: absolute;
	left: 50%;
	z-index: 2;
	margin: 0;
	color: var(--wp--preset--color--white);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	--tri-rib-ear: 14px;
	top: calc(-1 * var(--tri-rib-ear));
	width: calc(100% - 64px);
	max-width: 420px;
	padding: calc(var(--tri-rib-ear) + 13px) 16px 15px;
	transform: translateX(-50%);
	border-radius: 0 0 22px 22px;
	background: none;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-18);
	font-weight: var(--wp--custom--font--weight-strong);
	letter-spacing: 0.01em;
	white-space: normal;
}

.tri-pillar__badge::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-pillar__badge::before {
	content: "";
	position: absolute;
	top: -4px;
	left: calc(-1 * var(--tri-rib-ear));
	right: calc(-1 * var(--tri-rib-ear));
	z-index: -2;
	height: calc(var(--tri-rib-ear) + 4px);
	border-radius: 9px 9px 0 0;
	background: #020a2e;
}

@media (max-width: 767px) {
	.tri-pillar {
		padding-top: 60px;

	}

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

	}
}

/* ══ Dải tên (khoá bổ trợ + trụ cột phương pháp) — tinh chỉnh theo thiết kế ══
   Mép trên thân dải (::after) THẲNG HÀNG mép trên hai tai (::before) — trước
   thân thấp hơn tai 4px. Tai chỉ ló 6px mỗi bên, cao đúng phần nhô trên mép
   thẻ; thân ôm chữ (lề ngang 34px), bo góc dưới 12px, gọn như thiết kế. */
.tri-skill-card__ribbon,
.tri-pillar__badge {
	--tri-rib-ear: 10px;
	--tri-rib-side: 6px;
	width: max-content;
	max-width: calc(100% - 2 * var(--tri-rib-side) - 24px);
	padding: calc(var(--tri-rib-ear) + 2px) 34px 10px;
	border-radius: 0 0 12px 12px;
	white-space: nowrap;
}

.tri-skill-card__ribbon::before,
.tri-pillar__badge::before {
	top: 0;
	left: calc(-1 * var(--tri-rib-side));
	right: calc(-1 * var(--tri-rib-side));
	height: var(--tri-rib-ear);
	border-radius: 6px 6px 0 0;
}

.tri-pillar {
	padding-top: 60px;
}

/* Báo chí: khung cắt rộng đúng bề ngang màn, canh giữa theo khối. Khổ thẻ
   vẫn tính theo .tri-press (100cqw) nên 3 thẻ chính giữ nguyên chỗ cũ; hai
   mép lộ thêm thẻ kề và mờ dần. Vùng mờ = phần nằm ngoài 3 thẻ chính
   (100cqw ở đây = bề ngang .tri-press, khung cha gần nhất). .tri-main đã
   overflow-x: clip nên phần lấn dưới thanh cuộn không gây cuộn ngang. */
.tri-press > .tri-press__viewport {
	flex: 0 0 auto;
	width: var(--tri-screen);
	margin-inline: calc(50% - var(--tri-screen) / 2);
	--tri-press-mist: max(var(--tri-mist), calc((100% - 100cqw) / 2 + var(--tri-arrow-size) + var(--tri-arrow-gap)));
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tri-press-mist), #000 calc(100% - var(--tri-press-mist)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--tri-press-mist), #000 calc(100% - var(--tri-press-mist)), transparent 100%);
}

/* ══ Khung ảnh LCLT + Kênh: bo góc, trôi lên xuống nhẹ ════════════════════
   Kênh (template-parts/channels-block.php) dùng cùng khung với LCLT; hai
   ảnh trôi lệch nhịp nhau nửa chu kỳ cho đỡ đều tăm tắp. */
.tri-duo__media--channels-frame {
	margin: 28px 0 0;
	width: clamp(320px, calc(400 / var(--tri-type-ref) * var(--tri-vp)), 460px);
	max-width: 100%;
	height: auto;
	aspect-ratio: 353 / 336;
	overflow: hidden;
	border-radius: 30px;
	/* Ảnh tách nền (PNG trong suốt) vẫn có nền nhạt phía sau. */
	background: var(--wp--custom--color--ice-soft);
}

.tri-duo__media--channels-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.tri-duo__media--frame {
	box-shadow: 0 18px 36px -18px rgba(9, 31, 91, 0.35);
	animation: tri-duo-float 5s ease-in-out infinite;
	will-change: transform;
}

.tri-duo__media--channels-frame.tri-duo__media--frame {
	animation-delay: -2.5s;
}

@media (prefers-reduced-motion: reduce) {
	.tri-featured__panel,
		.tri-featured__panel-inner {
		transition: none;

	}

	.tri-press__item,
		.tri-press__track {
		transition: none;

	}

	.tri-press__item:hover,
		.tri-press__item--lead:hover,
		.tri-press__item--lead:focus-visible {
		transform: none;

	}

	.tri-duo__media--frame {
		animation: none;

	}
}

/* Sóng nền đứng yên; tai nghe và sách mới có nhịp lên xuống. */
/* THE REAL IELTS — Luyện thi uy tín: chỉ dải sọc xanh ở góc trên trái.
   Dải vào từ mép trái màn và ra ở mép trên (khuất sau banner) — không có
   đầu sọc nào dừng giữa chừng. */
.tri-about-sec {
	position: relative;
	overflow: hidden;
	background-image: url("../../images/nen/song-goc-tren-trai.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: min(720px, 50%) 78%;
}

@media (min-width: 768px) {
	.tri-commit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		gap: 36px 64px;
		padding-left: 0;
		padding-right: 0;

	}

	.tri-duo--start {
		grid-template-columns: minmax(0, 352fr) minmax(0, 610fr);
		grid-template-areas: "intro list";
		gap: 30px;
		align-items: stretch;

	}

	.tri-duo--end {
		grid-template-columns: minmax(0, 610fr) minmax(0, 352fr);
		grid-template-areas: "list intro";
		gap: 30px;
		align-items: stretch;

	}

	.tri-duo__list {
		grid-template-rows: repeat(3, minmax(0, 1fr));
		align-content: stretch;

	}

	.tri-duo__media--channels img {
		width: 344px;
		height: 360px;

	}

	.tri-vision {
		grid-template-columns: minmax(0, 582fr) minmax(0, 412fr);
		gap: 0;
		align-items: center;

	}

	/* Bố cục vòng cung chỉ bật khi đủ chỗ; dưới đó là danh sách xếp dọc. */
	.tri-core {
		position: relative;
		display: block;
		/* cao = đường kính cung + badge nhô ra hai đầu */
		height: calc(var(--tri-core-r) * 2 + var(--tri-core-badge));

	}

	.tri-core__disc,
		.tri-core__arc {
		display: block;
		position: absolute;
		top: 50%;
		/* t?m n?m c?ch m?p tr?i ??ng b?ng b?n k?nh cung */
		left: calc(var(--tri-core-r) + var(--tri-core-inset));
		transform: translate(-50%, -50%);
		border-radius: 50%;

	}

	.tri-core__disc {
		width: var(--tri-core-disc);
		height: var(--tri-core-disc);
		background: var(--wp--preset--color--navy);

	}

	.tri-core__arc {
		width: calc(var(--tri-core-r) * 2);
		height: calc(var(--tri-core-r) * 2);
		border: 12px solid var(--wp--custom--color--ice-soft);
		/* Figma ch? v? n?a ph?i c?a v?ng. */
		clip-path: inset(0 0 0 50%);

	}

	/* Ảnh admin là vòng đủ (bán kính r): mép trái vòng trùng mép khối, không tràn ra ngoài. */
	.tri-core--photo {
		--tri-core-inset: 0px;

	}

	/* Ảnh admin thay vòng cung: một hình tròn đầy đủ, đè lên đĩa navy. */
	.tri-core--photo .tri-core__disc {
		display: none;

	}

	.tri-core--photo .tri-core__arc {
		overflow: hidden;
		border: 0;
		clip-path: none;
		background: var(--wp--preset--color--navy);

	}

	.tri-core__arc img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;

	}

	.tri-core__list {
		display: block;
		height: 100%;

	}

	/* Item b?t ??u ??NG t?i badge ch? kh?ng ph?i m?p tr?i kh?i ? tr??c ??y d?ng
		   padding-left n?n vi?n d??i v?n k?o h?t chi?u ngang, c?t ngang ??a navy. */
	.tri-core__item {
		position: absolute;
		right: 0;
		/* B? flex c?a b?n mobile, n?u kh?ng nh?n co theo ch? v? text-align v? t?c d?ng. */
		display: block;
		padding: 0;
		border-radius: 0;
		background: none;
		/* `top` ??t ? v? tr? ???ng k?, k?o item l?n ?? ??y n? tr?ng ???ng ??. */
		transform: translateY(-100%);
		border-bottom: 2px dotted var(--wp--preset--color--navy);

	}

	/* M?i t?n ? cu?i ???ng ch?m. */
	.tri-core__item::after {
		content: "";
		position: absolute;
		right: -1px;
		bottom: -6px;
		width: 10px;
		height: 10px;
		background: var(--wp--preset--color--navy);
		clip-path: polygon(0 0, 100% 50%, 0 100%);

	}

	/* Badge c??i l?n ??u tr?i c?a ???ng k?. */
	.tri-core__badge {
		position: absolute;
		left: calc(var(--tri-core-badge) / -2);
		bottom: calc(var(--tri-core-badge) / -2);

	}

	.tri-core__label {
		display: block;
		padding: 0 0 12px calc(var(--tri-core-badge) / 2 + 12px);
		text-align: right;
		font-size: var(--wp--preset--font-size--medium);

	}

	/* To? ?? badge tr?n cung: x = inset + r?(1 + cos ?), y = 50% + r?sin ?. */
	.tri-core__item--1 {
		top: calc(50% - var(--tri-core-r) * 0.877);
		left: calc(var(--tri-core-r) * 1.481 + var(--tri-core-inset));

	}

	.tri-core__item--2 {
		top: calc(50% - var(--tri-core-r) * 0.326);
		left: calc(var(--tri-core-r) * 1.945 + var(--tri-core-inset));

	}

	.tri-core__item--3 {
		top: calc(50% + var(--tri-core-r) * 0.290);
		left: calc(var(--tri-core-r) * 1.957 + var(--tri-core-inset));

	}

	.tri-core__item--4 {
		top: calc(50% + var(--tri-core-r) * 0.900);
		left: calc(var(--tri-core-r) * 1.435 + var(--tri-core-inset));

	}

	/* ≥768: hai nút nằm đúng chỗ cũ (mép khối), nổi trên phần thẻ mờ. */
	.tri-press > .tri-press__nav {
		position: absolute;
		top: calc(50% - var(--tri-arrow-size) / 2);
		z-index: 2;

	}

	.tri-press > .tri-press__nav--prev {
		left: 0;

	}

	.tri-press > .tri-press__nav--next {
		right: 0;

	}

	/* Ảnh LCLT + Kênh: ngoài trôi lên xuống còn dính theo cột thẻ bên cạnh khi
	   cuộn (sticky trong cột chữ, cột này cao bằng cột thẻ). */
	.tri-duo__media--frame {
		position: sticky;
		top: calc(var(--tri-header-h, 80px) + 24px);

	}
}

@media (max-width: 767px) {
	/* Đặt sau rule display:flex phía trên — nếu không, preview vẫn hiện trên mobile. */
	.tri-featured__preview {
		display: none;

	}

	/* Duo cards — mobile: thu icon, ẩn gạch nối để tiêu đề còn chỗ. */
	.tri-duo__card {
		--tri-duo-icon: 42px;
		--tri-duo-pad-x: 18px;
		--tri-duo-pad-y: 18px;
		--tri-duo-head-pt: 18px;
		--tri-duo-head-pl: 18px;
		--tri-duo-dash-w: 0px;
		--tri-duo-dash-slot: 0px;

	}

	.tri-duo__card h3::before {
		content: none;
		display: none;

	}

	.tri-duo__card h3 {
		font-size: var(--wp--preset--font-size--small);

	}

	.tri-duo__title {
		font-size: var(--tri-text-26);

	}

	.tri-lclt-block__badge {
		font-size: 1em;

	}

	.tri-duo__media--lclt {
		width: 100%;
		height: auto;
		aspect-ratio: 353 / 336;

	}

	.tri-duo__media--lclt img {
		aspect-ratio: auto;

	}

	.tri-skill-card__ribbon,
		.tri-pillar__badge {
		--tri-rib-ear: 8px;
		--tri-rib-side: 5px;
		padding: calc(var(--tri-rib-ear) + 2px) 22px 9px;
		border-radius: 0 0 10px 10px;
		white-space: normal;

	}

	.tri-pillar {
		padding-top: 52px;

	}

	.tri-press > .tri-press__viewport {
		--tri-press-mist: var(--tri-mist);

	}

	.tri-duo__media--channels-frame {
		width: 100%;

	}

	.tri-about-sec {
		background-size: 100% 60%;

	}
}