/*
 * Banner đầu trang, trang hero, dải CTA khi cuộn
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

/* Banner ảnh: khung 1440×600 (tỉ lệ 5/12). Chiều cao = width × 600/1440
   nhờ aspect-ratio trên __frame — body khóa --tri-vp-cap 3840 nên 1025→4K
   luôn cùng tỉ lệ. Không max-height (cũ 600px cắt FHD/4K).
   Clearance trên = .tri-main padding-top (--tri-header-h), không padding thêm.
   Nền = --tri-banner-bg (màu + ảnh sóng của khối "Banner chung", in inline
   bởi tri_default_banner_css()); ảnh bìa nền trong suốt nên lộ nền này. */
.tri-banner {
	position: relative;
	width: 100%;
	margin-inline: auto;
	overflow: hidden;
	background: var(--tri-banner-bg, #fff);
}

.tri-banner__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 600;
	cursor: grab;
	touch-action: pan-y;
}

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

/* Các slide chồng khít lên nhau; chỉ slide is-active hiện. Dùng opacity chứ
   không display:none để chuyển được mượt, và giữ nguyên chiều cao khung. */
.tri-banner__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	/* Slide khuất không được ăn cú bấm của slide đang hiện. */
	pointer-events: none;
}

.tri-banner__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.tri-banner__slide a,
.tri-banner__frame img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain: ảnh bìa 1958×745 (2.63:1) không bị cắt mép trong khung 2.4:1;
	   ảnh thiết kế 1440×600 vẫn khít y như cũ. Banner chữ đè dùng cover. */
	object-fit: contain;
	/* Không để ảnh/link ăn pointer — kéo slide sẽ bị kẹt drag-native của ảnh. */
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.tri-banner__dots {
	position: absolute;
	left: 0;
	right: 0;
	/* 88@600 → % chiều khung để giữ tỉ lệ khi height scale. */
	bottom: calc(100% * 88 / 600);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Trang chủ: bỏ chấm progress — chuyển slide bằng kéo. */
.tri-banner:not(.tri-banner--trang) .tri-banner__dots {
	display: none;
}

.tri-banner__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 3px rgba(9, 31, 91, 0.35);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.tri-banner__dot.is-active {
	width: 26px;
	border-radius: 5px;
	background: var(--wp--preset--color--white);
}

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

/* Banner của 8 trang trong: giống hệt trang chủ, chỉ khác là KHÔNG có hàng
   nút CTA bên dưới — nên chấm tròn tụt xuống sát đáy thay vì treo ở 88/600
   để chừa chỗ cho hàng nút đó. */
.tri-banner--trang .tri-banner__dots {
	bottom: calc(100% * 24 / 600);
}

.tri-intro__grid {
	display: grid;
	gap: 48px;
	align-items: center;
}

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

.tri-intro__copy p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	text-align: justify;
}

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

/* Ảnh lễ ký kết 380×420, nhịp bob giống thẻ mosaic trang chủ. */
.tri-intro__media {
	position: relative;
	width: min(100%, 380px);
	margin: 0 auto;
	padding: 0;
	aspect-ratio: 380 / 420;
	border-radius: var(--wp--custom--radius--field);
	overflow: hidden;
	background: var(--wp--preset--color--placeholder);
	animation: tri-bob 4s ease-in-out infinite;
}

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

.tri-hero {
	--tri-hero-h: var(--tri-hero-h-fluid);
	display: flex;
	align-items: flex-start;
	min-height: var(--tri-hero-h);
	padding: 56px 0 40px;
	background-image: linear-gradient(208.81deg, var(--wp--preset--color--white) 18.9%, var(--wp--preset--color--ice) 81%);
}

.tri-hero--short {
	--tri-hero-h: var(--tri-hero-h-short-fluid);
}

/* Giới thiệu / Phương pháp / Lộ trình: thiết kế để banner trống hơn. */
.tri-hero--blank {
	--tri-hero-h: var(--tri-hero-h-blank-fluid);
	padding: 0;
}

/* Trang có banner ảnh ở trên rồi thì khối chữ bên dưới chỉ còn là phần
   tiêu đề trang, không phải một banner đứng một mình nữa — nên bỏ chiều
   cao tối thiểu 460px và thu gọn đệm.

   Đo trước khi sửa: banner 594px + khối chữ 600px = 1.194px, khách phải
   cuộn qua hơn một màn hình rưỡi mới tới nội dung thật.

   Hai class nên luật này (0,2,0) thắng .tri-hero (0,1,0) kể cả khi luật
   kia nằm trong @media — media query KHÔNG cộng thêm độ ưu tiên. Dùng
   padding-block chứ không phải padding, để không chạm vào đệm hai bên. */
.tri-banner--trang + .tri-hero {
	--tri-hero-h: 0px;
	padding-block: 32px 28px;
}

@media (min-width: 768px) {
	.tri-banner--trang + .tri-hero {
		padding-block: 56px 44px;

	}
}

.tri-hero__inner {
	width: var(--tri-frame);
	margin-inline: auto;
}

.tri-hero__eyebrow {
	margin: 0 0 4px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

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

.tri-hero__sub {
	margin: 6px 0 0;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.tri-hero__line {
	width: 104px;
	height: 4px;
	margin: 12px 0 0;
	background: var(--wp--custom--color--rule-strong);
}

.tri-hero__desc {
	margin: 20px 0 0;
	max-width: min(560px, var(--tri-frame));
	color: var(--wp--custom--color--ink-strong);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	/* "\n" trong chu?i ng?t d?ng ??ng ch? nh? thi?t k?, kh? h?p v?n t? xu?ng d?ng. */
	white-space: pre-line;
}

.tri-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Banner có chữ đè lên ảnh (trang giảng viên): nằm chồng lên .tri-banner__frame
   thay vì xếp thành dải riêng bên dưới. Scrim đậm bên trái để chữ đọc được
   trên mọi ảnh, nhạt dần sang phải để không che hết ảnh. z-index thấp hơn
   .tri-banner__dots (2) để chấm chọn slide vẫn bấm được. */
.tri-hero--overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	align-items: center;
	min-height: 0;
	padding: 0;
	background: linear-gradient(90deg, rgba(9, 31, 91, 0.72) 0%, rgba(9, 31, 91, 0.35) 55%, rgba(9, 31, 91, 0) 85%);
	pointer-events: none;
}

.tri-hero--overlay .tri-hero__actions {
	pointer-events: auto;
}

.tri-hero--overlay .tri-hero__eyebrow,
.tri-hero--overlay h1,
.tri-hero--overlay .tri-hero__sub,
.tri-hero--overlay .tri-hero__desc {
	color: var(--wp--preset--color--white);
}

.tri-banner--overlay .tri-banner__frame img {
	object-fit: cover;
}

@media (min-width: 768px) {
	.tri-hero {
		padding: 104px 0 48px;

	}

	.tri-hero--blank {
		--tri-hero-h: var(--tri-hero-h-blank-fluid);

	}

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

	}

	.tri-hero__eyebrow,
		.tri-hero__sub {
		font-size: var(--tri-text-26);

	}
}

@media (min-width: 1025px) {
	.tri-hero {
		--tri-hero-h: var(--tri-hero-h-fluid);
		padding: var(--tri-hero-pt) 0 var(--tri-hero-pb);

	}

	.tri-hero--short {
		--tri-hero-h: var(--tri-hero-h-short-fluid);
		padding-top: var(--tri-hero-pt-short);

	}

	.tri-hero--blank {
		--tri-hero-h: var(--tri-hero-h-blank-fluid);

	}

	.tri-hero__eyebrow {
		margin-bottom: 12px;
		font-size: var(--tri-text-35);

	}

	.tri-hero__sub {
		margin-top: 13px;
		font-size: var(--tri-text-35);

	}

	.tri-hero__line {
		margin-top: 13px;

	}

	/* Khi có dòng "Khóa học" phía trên thì gạch nằm ngay dưới tiêu đề,
		   thiết kế chừa rộng hơn 6px so với khi gạch nối tiếp dòng phụ. */
	.tri-hero--eyebrow .tri-hero__line {
		margin-top: 19px;

	}

	.tri-hero__desc {
		margin-top: 36px;
		max-width: min(620px, var(--tri-frame));
		font-size: var(--tri-text-17);
		line-height: 1.75;

	}

	.tri-hero__actions {
		margin-top: 28px;

	}
}

@media (min-width: 768px) {
	.tri-intro__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
		gap: 48px;

	}

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

	}
}

/* ─── Khối giới thiệu The Real IELTS ─────────────────────────────────── */
.tri-promo {
	margin: 32px 0 0;
	padding: 20px 18px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Trong cột phải nó đứng ngay dưới danh sách bài liên quan. */
@media (min-width: 1200px) {
	.tri-promo {
		margin-top: 20px;

	}
}

.tri-article__aside-inner > .tri-promo {
	margin-top: 0;
	flex-shrink: 0;
}

.tri-promo__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--cyan);
	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.06em;
}

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

.tri-promo__sub {
	margin: 8px 0 0;
	font-size: var(--tri-text-13);
	line-height: 1.55;
	opacity: 0.85;
}

.tri-promo__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 16px 0 0;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	text-align: center;
}

.tri-promo__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tri-promo__stats strong {
	color: var(--wp--preset--color--cyan);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-17);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1.1;
}

.tri-promo__stats span {
	font-size: 11px;
	line-height: 1.3;
	opacity: 0.8;
}

.tri-promo__points {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.tri-promo__points li {
	position: relative;
	padding-left: 22px;
	font-size: var(--tri-text-13);
	line-height: 1.5;
}

.tri-promo__points li + li {
	margin-top: 8px;
}

/* Dấu tích vẽ bằng hai đường viền, khỏi tải thêm một file ảnh nữa. */
.tri-promo__points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--cyan);
	border-bottom: 2px solid var(--wp--preset--color--cyan);
	transform: rotate(45deg);
}

.tri-promo__phone {
	margin: 12px 0 0;
	font-size: var(--tri-text-12);
	text-align: center;
	opacity: 0.85;
}

.tri-promo__phone a {
	color: var(--wp--preset--color--cyan);
	font-weight: var(--wp--custom--font--weight-ui);
	text-decoration: none;
	white-space: nowrap;
}

.tri-promo__phone a:hover,
.tri-promo__phone a:focus-visible {
	text-decoration: underline;
}

/* Dưới 1200px khối này nằm ngang dưới bài, trải rộng ra cho đỡ thừa chỗ. */
@media (min-width: 640px) and (max-width: 1199px) {
	.tri-promo__stats {
		gap: 16px;

	}

	.tri-promo__points {
		columns: 2;
		column-gap: 24px;

	}
}

/* -- CTA khi cuộn (inc/scroll-cta.php, assets/js/scroll-cta.js) ---------- */
/* Dải chèn = 1 section full-bleed: nền navy của thẻ cũ trải cả bề ngang,
   nội dung vẫn bám --tri-frame; lớp orb cử động nhẹ phía sau. */
.tri-scta-strip {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: clamp(40px, 5.5vw, 72px) var(--tri-section-px);
	color: #fff;
	background:
		radial-gradient(520px 220px at 92% -10%, rgba(236, 98, 7, 0.32), transparent 68%),
		radial-gradient(420px 200px at 8% 110%, rgba(84, 156, 255, 0.22), transparent 70%),
		linear-gradient(120deg, #1646b4 0%, #0d2f86 48%, var(--wp--preset--color--navy) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tri-scta-strip__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.tri-scta-strip__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.55;
	will-change: transform;
}

.tri-scta-strip__orb--a {
	top: -18%;
	right: 6%;
	width: min(420px, 48vw);
	height: min(420px, 48vw);
	background: radial-gradient(circle, rgba(236, 98, 7, 0.45) 0%, rgba(236, 98, 7, 0) 70%);
	animation: tri-scta-orb-a 16s ease-in-out infinite alternate;
}

.tri-scta-strip__orb--b {
	bottom: -28%;
	left: -4%;
	width: min(520px, 58vw);
	height: min(520px, 58vw);
	background: radial-gradient(circle, rgba(120, 180, 255, 0.35) 0%, rgba(120, 180, 255, 0) 68%);
	animation: tri-scta-orb-b 20s ease-in-out infinite alternate;
}

.tri-scta-strip__orb--c {
	top: 28%;
	left: 38%;
	width: min(280px, 36vw);
	height: min(280px, 36vw);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%);
	animation: tri-scta-orb-c 12s ease-in-out infinite alternate;
}

.tri-scta-strip__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	width: var(--tri-frame);
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
}

.tri-scta-strip__eyebrow {
	margin: 0 0 8px;
	color: rgba(255, 210, 179, 0.95);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.tri-scta-strip__sub {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--wp--preset--font-size--small);
	max-width: 36em;
}

.tri-scta__btn {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Nút CTA (dải chèn + thẻ nổi): thu phóng nhịp (scale). */
.tri-scta-strip .tri-scta__btn.tri-btn--pulse,
.tri-scta .tri-scta__btn.tri-btn--pulse {
	animation: tri-scta-btn-pulse 1.55s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform;
}

/* Tone nền đa dạng theo từng dải. */
.tri-scta-strip--tone-ember {
	background:
		radial-gradient(520px 220px at 92% -10%, rgba(255, 140, 40, 0.42), transparent 68%),
		radial-gradient(420px 200px at 8% 110%, rgba(236, 98, 7, 0.28), transparent 70%),
		linear-gradient(125deg, #1a3a9a 0%, #0c276e 42%, #091f5b 100%);
}

.tri-scta-strip--tone-aqua {
	background:
		radial-gradient(520px 220px at 90% -8%, rgba(64, 196, 255, 0.32), transparent 68%),
		radial-gradient(420px 200px at 10% 110%, rgba(30, 120, 220, 0.28), transparent 70%),
		linear-gradient(125deg, #0e5bb8 0%, #0a3f8c 48%, #072a62 100%);
}

.tri-scta-strip--tone-violet {
	background:
		radial-gradient(520px 220px at 94% -10%, rgba(180, 120, 255, 0.28), transparent 68%),
		radial-gradient(420px 200px at 6% 110%, rgba(236, 98, 7, 0.22), transparent 70%),
		linear-gradient(125deg, #2a3eb0 0%, #1a2a7a 50%, #101848 100%);
}

.tri-scta-strip--tone-ember .tri-scta-strip__eyebrow {
	color: #ffd9b8;
}

.tri-scta-strip--tone-aqua .tri-scta-strip__eyebrow {
	color: #b8e6ff;
}

.tri-scta-strip--tone-violet .tri-scta-strip__eyebrow {
	color: #e0d0ff;
}

/* Thanh nổi — máy tính: thẻ góc dưới trái (nút "Tư vấn" ở góc phải). */
.tri-scta {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 54;
	width: min(400px, calc(100vw - 48px));
	animation: tri-scta-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.tri-scta[hidden] {
	display: none;
}

.tri-scta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 16px 44px 16px 18px;
	border: 1px solid rgba(9, 31, 91, 0.08);
	border-radius: 18px;
	background: #fff;
	color: var(--wp--preset--color--navy);
	box-shadow: 0 18px 44px rgba(9, 31, 91, 0.22);
}

.tri-scta__text {
	min-width: 0;
	transition: opacity 0.16s ease;
}

.tri-scta__slot {
	display: flex;
	transition: opacity 0.16s ease;
}

.tri-scta.is-swap .tri-scta__text,
.tri-scta.is-swap .tri-scta__slot {
	opacity: 0;
}

.tri-scta__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
}

.tri-scta__sub {
	margin: 4px 0 0;
	color: #4a5a7a;
	font-size: 13px;
	line-height: 1.35;
}

.tri-scta .tri-scta__btn {
	align-self: flex-start;
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
}

.tri-scta__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(9, 31, 91, 0.06);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.tri-scta__close:hover,
.tri-scta__close:focus-visible {
	background: rgba(9, 31, 91, 0.14);
	outline: none;
}

@media (max-width: 767px) {
	/* Mobile: chữ không đè mặt GV — cột hẹp + scrim đậm hơn; ẩn desc dài. */
	.tri-hero--overlay {
		align-items: flex-end;
		padding: 20px 16px 28px;
		background: linear-gradient(
			180deg,
			rgba(9, 31, 91, 0.15) 0%,
			rgba(9, 31, 91, 0.55) 45%,
			rgba(9, 31, 91, 0.88) 100%
		);

	}

	.tri-hero--overlay .tri-hero__inner {
		max-width: 100%;

	}

	.tri-hero--overlay .tri-hero__desc {
		display: none;

	}

	.tri-banner--overlay .tri-banner__frame img {
		object-position: center top;

	}

	/* Mobile: sàn 220px cho banner chữ đè (vd. 375→156 không đủ chỗ chữ).
		   Banner chỉ có ảnh giữ đúng tỉ lệ để ảnh contain không lọt thỏm. */
	.tri-banner--overlay .tri-banner__frame {
		min-height: 220px;

	}

	.tri-scta-strip {
		padding: 32px var(--tri-section-px);

	}

	.tri-scta-strip__inner {
		flex-direction: column;
		align-items: flex-start;

	}

	.tri-scta-strip__inner .tri-scta__btn {
		width: 100%;
		justify-content: center;

	}
}

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

	}

	.tri-ph--tall,
		.tri-ph--short,
		.tri-about__book,
		.tri-about__headphones,
		.tri-intro__media {
		animation: none;

	}

	.tri-scta {
		animation: none;

	}

	.tri-scta-strip__orb {
		animation: none;

	}

	.tri-scta-strip .tri-scta__btn.tri-btn--pulse,
		.tri-scta .tri-scta__btn.tri-btn--pulse {
		animation: none;

	}
}

@media (max-width: 1024px) {
	/* Tablet / điện thoại: thanh ngang phía trên nút nổi + thanh dưới màn. */
	.tri-scta {
		left: 12px;
		right: 12px;
		bottom: calc(var(--tri-bottombar-h, 62px) + 8px + env(safe-area-inset-bottom, 0px));
		width: auto;

	}

	.tri-scta__card {
		gap: 10px;
		padding: 12px 40px 12px 14px;
		border-radius: 16px;

	}

	.tri-scta__sub {
		display: none;

	}

	.tri-scta .tri-scta__btn {
		align-self: stretch;
		justify-content: center;
		min-height: 36px;
		padding: 0 12px;
		font-size: 13px;

	}

	/* Thanh CTA nổi dính đáy: ngay trên thanh dưới màn, hoặc sát mép khi
		   thanh dưới tự ẩn lúc cuộn xuống. Nút Tư vấn / Chuyên mục nhường lên. */
	body:has(.tri-mobile-bar.is-hidden) .tri-scta {
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));

	}
}

.tri-navy-merge > .tri-section--why-2,
.tri-navy-merge > .tri-scta-strip {
	background: none;
	box-shadow: none;
}

/* Quầng sáng riêng của dải CTA tạo mảng khác màu → tắt khi đã gộp. */
.tri-navy-merge .tri-scta-strip__bg {
	display: none;
}