/*
 * Khung trang: header, mega menu, drawer, thanh dưới màn, nút nổi, breadcrumb, footer
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

body:has(.tri-mobile-bar.is-hidden) {
	padding-bottom: 0;
}

.tri-header {
	/* fixed + .tri-main { padding-top: var(--tri-header-h) } — chừa chỗ rõ ràng
	   cho band đầu (banner/hero), không phụ thuộc sticky còn trong flow hay không.
	   max-width + margin khớp body khóa 4K. */
	position: fixed;
	top: var(--tri-adminbar);
	left: 0;
	right: 0;
	z-index: 50;
	isolation: isolate;
	width: 100%;
	max-width: var(--tri-vp-cap);
	margin-inline: auto;
	height: var(--tri-header-h);
	overflow: visible;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: 0 8px 18px rgba(9, 31, 91, 0);
	transition: box-shadow 0.25s ease;
}

.tri-header.is-scrolled {
	box-shadow: 0 8px 18px rgba(9, 31, 91, 0.22);
}

.tri-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	width: var(--tri-chrome);
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.tri-logo,
.tri-header__actions {
	position: relative;
	z-index: 2;
}

.tri-logo {
	display: block;
	width: 128px;
	height: 60px;
	flex-shrink: 0;
}

@media (min-width: 1025px) {
	/* Logo 128×60@1440 — scale cùng --tri-header-h (80@1440). */
	.tri-logo {
		width: calc(128 / var(--tri-type-ref) * var(--tri-vp));
		height: calc(60 / var(--tri-type-ref) * var(--tri-vp));

	}
}

.tri-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
	/* logo.svg đã trắng; không filter — dark mode + filter dễ đảo thành đen. */
	forced-color-adjust: none;
}

/* Mobile / tablet: 3 gạch trái — logo giữa (cân 40px hai bên).
   Logo giữ 128×60 như Laptop; khung --tri-chrome cùng hệ inset. */
@media (max-width: 1024px) {
	.tri-header__inner {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) 40px;
		gap: 0;
		align-items: center;

	}

	.tri-header__actions {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		z-index: 3;

	}

	.tri-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		width: 128px;
		height: 60px;

	}

	.tri-logo img {
		object-position: center;

	}

	.tri-nav {
		display: none;

	}
}

.tri-nav {
	display: none;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, calc(28 / var(--tri-type-ref) * var(--tri-vp)), 36px);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-ui);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.tri-nav > a,
.tri-mega__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
	transform: scale(1);
	transform-origin: center center;
	transition:
		transform var(--wp--custom--motion--duration-mid) ease,
		background-color var(--wp--custom--motion--duration-mid) ease,
		color var(--wp--custom--motion--duration-mid) ease;
}

.tri-nav > a.is-current,
.tri-mega.is-current .tri-mega__trigger {
	color: var(--wp--preset--color--cyan);
}

.tri-nav > a:hover,
.tri-mega__trigger:hover,
.tri-mega.is-open .tri-mega__trigger {
	background: transparent;
	color: var(--wp--preset--color--cyan);
	transform: none;
}

.tri-mega {
	/* Mặc định: dropdown gọn neo dưới mục cha. HTML cũ (không có --gon/--rong)
	   vẫn ra thẻ trắng như local; chỉ .tri-mega--rong mới tràn ngang. */
	position: relative;
	display: inline-flex;
	align-items: center;
}

.tri-mega__panel {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	left: 50%;
	right: auto;
	top: calc(100% + 14px);
	z-index: 45;
	width: max-content;
	min-width: 220px;
	max-width: min(420px, calc(var(--tri-vp) - 32px));
	padding: 16px 8px;
	transform: translate(-50%, 8px);
	background: #ffffff;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 18px 40px rgba(9, 31, 91, 0.16);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.tri-mega__inner {
	display: grid;
	grid-template-columns: repeat(var(--tri-mega-cot, 1), minmax(0, 1fr));
	gap: 2px;
	width: auto;
	margin-inline: 0;
}

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

/* Vạch 1px chấm giữa các cột (Khóa học / Kiến thức). */
.tri-mega__col + .tri-mega__col {
	border-left: 1px dotted color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
	padding-left: 28px;
	margin-left: 4px;
}

/* Tiêu đề cột trong mega menu: chữ hoa, đậm, không phải một mục bấm được
   trừ khi có đích (cột "Lịch khai giảng" trong thiết kế là link). */
.tri-mega__title {
	margin-bottom: 8px;
	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);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-mega__panel a {
	white-space: nowrap;
}

.tri-mega__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

/* Dropdown gọn: 1 cột giữ thẻ hẹp; 2 cột (Kiến thức) rộng hơn theo Figma. */
.tri-mega--gon .tri-mega__panel {
	padding: 20px 12px;
}

.tri-mega--gon .tri-mega__inner {
	gap: 8px 0;
}

.tri-mega--gon:has(.tri-mega__inner[style*="--tri-mega-cot:2"]) .tri-mega__panel {
	max-width: min(720px, calc(var(--tri-vp) - 32px));
	padding: 28px 36px;
}

/* Khóa học (≥3 cột): panel tràn ngang + backdrop. */
.tri-mega--rong {
	position: static;
}

.tri-mega--rong .tri-mega__panel {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--tri-adminbar) + var(--tri-header-h));
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: 32px 16px 40px;
	transform: translateY(8px);
	background: #ffffff;
	background-image: none;
	border-radius: 0;
	box-shadow: 0 16px 40px color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent);
}

.tri-mega--rong .tri-mega__inner {
	grid-template-columns: repeat(var(--tri-mega-cot, 1), minmax(0, 1fr));
	gap: 8px 0;
	width: var(--tri-chrome);
	margin-inline: auto;
}

.tri-mega--rong .tri-mega__col + .tri-mega__col {
	padding-left: 32px;
	margin-left: 8px;
}

.tri-mega--rong .tri-mega__panel a {
	white-space: normal;
}

.tri-mega--rong .tri-mega__panel::before {
	top: -28px;
	height: 28px;
}

.tri-mega.is-open .tri-mega__panel,
.tri-mega:focus-within .tri-mega__panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.tri-mega--rong.is-open .tri-mega__panel,
.tri-mega--rong:focus-within .tri-mega__panel {
	transform: translateY(0);
}

/* Primary filled menu item (interaction pattern) */
.tri-mega__panel a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--control--height);
	margin: 0;
	padding: 0 20px;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--navy);
	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: var(--wp--custom--line-height--nav);
	text-transform: none;
	transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease, box-shadow var(--wp--custom--motion--duration-mid) ease, font-weight var(--wp--custom--motion--duration-mid) ease;
}

/* Mac dinh: nen xanh nhat BAD6EB 50% (Gioi thieu, Luyen thi IELTS, Tin
   tuc). Rieng Khoa hoc + Kien thuc dung .tri-mega--hover-text (chu navy
   dam, khong nen) - xem rule ben duoi va header.php cho ly do chon 2 muc do. */
.tri-mega__panel a:hover,
.tri-mega__panel a:focus-visible {
	background: color-mix(in srgb, #BAD6EB 50%, transparent);
	color: var(--wp--preset--color--navy);
	box-shadow: none;
	outline: none;
}

.tri-mega--hover-text .tri-mega__panel a:hover:not(.tri-mega__title),
.tri-mega--hover-text .tri-mega__panel a:focus-visible:not(.tri-mega__title) {
	/* :hover nâng specificity lên (0,4,1) so với rule rest
	   ".tri-mega--hover-text … a:not(.tri-mega__title) { font-weight:500 }"
	   (0,3,1) — nếu bằng specificity thì weight không đổi lúc hover. */
	background: none;
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-strong);
	box-shadow: none;
}

/* Tam giác ▶ trước mỗi link con (Khóa học / Kiến thức). */
.tri-mega--hover-text .tri-mega__panel a:not(.tri-mega__title)::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 10px;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent currentColor;
	flex-shrink: 0;
	opacity: 0.85;
	transition: opacity var(--wp--custom--motion--duration-mid) ease;
}

.tri-mega--hover-text .tri-mega__panel a:not(.tri-mega__title):hover::before,
.tri-mega--hover-text .tri-mega__panel a:not(.tri-mega__title):focus-visible::before {
	opacity: 1;
}

/* Tiêu đề cột KHÔNG mang dáng của một mục bấm được: luật .tri-mega__panel a
   ở trên biến mọi thẻ a trong panel thành nút cao, nền đổi khi rê chuột.
   Tiêu đề cột chỉ là nhãn nhóm. */
.tri-mega__col > .tri-mega__title {
	display: block;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0 20px;
	border-radius: 0;
	background: none;
	white-space: normal;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: var(--wp--custom--line-height--nav);
	/* Thắng .tri-mega__panel a { text-transform: none } khi tiêu đề cột là <a>. */
	text-transform: uppercase;
}

/* Khóa học (--rong) và Kiến thức (--gon + --hover-text): cùng độ đậm
   nghỉ 500 → hover đậm; các mega khác (Giới thiệu…) giữ weight-ui + pill. */
.tri-mega--hover-text .tri-mega__panel a:not(.tri-mega__title) {
	font-weight: 500;
}

a.tri-mega__title:hover,
a.tri-mega__title:focus-visible {
	background: none;
	color: var(--wp--preset--color--action);
	box-shadow: none;
	text-decoration: underline;
}

.tri-mega-backdrop {
	position: fixed;
	inset: calc(var(--tri-adminbar) + var(--tri-header-h)) 0 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--navy) 28%, transparent);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.tri-mega-backdrop.is-on {
	opacity: 1;
	pointer-events: auto;
}

.tri-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.tri-header .tri-header__cta {
	display: none;
}

.tri-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.tri-burger span {
	display: block;
	height: 2px;
	width: 24px;
	margin-inline: auto;
	background: var(--wp--preset--color--white);
}

/* Drawer tr??t t? tr?i, ph? to?n chi?u cao m?n (ki?u LangGo).
   Tr??c ??y d?ng thu?c t?nh `hidden` ? display:none n?n transition kh?ng ch?y;
   gi? tr?ng th?i n?m ? class `is-open`. */
.tri-drawer {
	position: fixed;
	top: var(--tri-adminbar);
	bottom: var(--tri-bottombar-h);
	left: 0;
	z-index: 52;
	display: flex;
	flex-direction: column;
	width: min(300px, 82%);
	overflow-y: auto;
	padding: 0 0 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}

body:has(.tri-mobile-bar.is-hidden) .tri-drawer {
	bottom: 0;
}

.tri-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.tri-drawer-backdrop {
	position: fixed;
	top: var(--tri-adminbar);
	right: 0;
	bottom: var(--tri-bottombar-h);
	left: 0;
	z-index: 51;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

body:has(.tri-mobile-bar.is-hidden) .tri-drawer-backdrop {
	bottom: 0;
}

.tri-drawer-backdrop.is-on {
	opacity: 1;
	pointer-events: auto;
}

.tri-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: var(--tri-header-h);
	padding: 0 16px;
	border-bottom: 1px solid rgba(9, 31, 91, 0.08);
}

.tri-drawer__logo {
	width: 104px;
	height: auto;
	forced-color-adjust: none;
}

/* D?u X gh?p t? hai g?ch, kh?i th?m asset m?i. */
.tri-drawer__close::before,
.tri-drawer__close::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	background: var(--wp--preset--color--navy);
}

.tri-drawer__close {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--custom--color--ice-soft);
	cursor: pointer;
	position: relative;
	display: grid;
	place-items: center;
}

.tri-drawer__close::before {
	transform: rotate(45deg);
}

.tri-drawer__close::after {
	transform: rotate(-45deg);
}

.tri-drawer__nav {
	flex: 1;
	padding: 12px;
}

.tri-drawer a {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 2px 0;
	padding: 0 12px;
	border-radius: var(--wp--custom--radius--control);
	line-height: 1.3;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Top-level drawer link = cùng cấp summary (cha). */
.tri-drawer__link {
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-strong);
	text-transform: uppercase;
}

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

.tri-drawer__group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font--weight-strong);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

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

.tri-drawer__group summary::after {
	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;
	transform: rotate(90deg);
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-drawer__group[open] summary::after {
	transform: rotate(-90deg);
}

/* Link con: nhỏ hơn tiêu đề cột; thụt lề rõ hơn summary. */
.tri-drawer__group a {
	padding-left: 36px;
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	color: var(--wp--custom--color--ink-mid, var(--wp--preset--color--navy));
}

/* Tam giác ▶ như mega --hover-text — trước link con (không gồm tiêu đề cột). */
.tri-drawer__group a:not(.tri-drawer__group-title)::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 10px;
	border-style: solid;
	border-width: 3.5px 0 3.5px 5.5px;
	border-color: transparent transparent transparent currentColor;
	flex-shrink: 0;
	opacity: 0.7;
}

/* Tiêu đề cột: secondary so với summary (medium/strong/uppercase). */
.tri-drawer__group-title {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 6px 0 2px;
	padding: 0 12px 0 24px;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--custom--color--ink-mid, var(--wp--preset--color--navy));
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-ui);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-drawer__group-title::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	background: currentColor;
	-webkit-mask: url(../../images/icon-chevron.svg) center / contain no-repeat;
	mask: url(../../images/icon-chevron.svg) center / contain no-repeat;
	transform: rotate(90deg);
	flex-shrink: 0;
	opacity: 0.55;
}

/* Mục to / tiêu đề cột không có submenu nhỏ — bỏ chevron (không gợi mở). */
.tri-drawer__group-title--leaf::before {
	display: none;
}

.tri-drawer__group a.tri-drawer__group-title {
	padding-left: 24px;
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-ui);
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-mid, var(--wp--preset--color--navy));
}

.tri-drawer__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tri-drawer__phone {
	color: var(--wp--preset--color--cyan);
	font-weight: var(--wp--custom--font--weight-ui);
}

/* D??i 768px c? n?t CTA tr?n header l?n FAB ??u t?ng b? ?n ? kh?ng c?n l?i
   chuy?n ??i n?o. FAB gi? hi?n ? m?i kh? m?n. */
.tri-fab {
	display: inline-flex;
	position: fixed;
	right: 16px;
	bottom: calc(var(--tri-bottombar-h) + 16px);
	transition: background var(--wp--custom--motion--duration-mid) ease, transform var(--wp--custom--motion--duration-mid) ease, bottom 0.28s ease;
	z-index: 55;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--wp--custom--control--height-lg);
	min-height: var(--wp--custom--control--height-lg);
	padding: 0 18px;
	border-radius: var(--wp--custom--radius--pill);
	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--small);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--orange) 35%, transparent);
}

body:has(.tri-mobile-bar.is-hidden) .tri-fab {
	bottom: 16px;
}

.tri-fab:hover {
	transform: translateY(-2px);
}

.tri-fab.is-top {
	background: var(--wp--preset--color--navy);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
}

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

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

.tri-footer__brand {
	display: flex;
	align-items: center;
	gap: 20px;
	width: var(--tri-chrome);
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 0 8px;
}

.tri-footer__split {
	flex: 0 0 2px;
	width: 2px;
	height: 56px;
	background: var(--wp--preset--color--white);
}

.tri-footer__grid {
	display: grid;
	gap: 32px 40px;
	width: var(--tri-chrome);
	max-width: 100%;
	margin: 0 auto;
	padding: 28px 0 48px;
	align-items: start;
}

.tri-footer__logo {
	display: block;
	width: 160px;
	height: 70px;
	margin: 0;
	object-fit: contain;
	object-position: left;
	flex-shrink: 0;
}

.tri-footer__company {
	margin: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-transform: uppercase;
}

.tri-footer__h {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 20px;
	color: var(--wp--preset--color--cyan);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.tri-footer__h::after {
	content: "";
	display: block;
	width: 74px;
	height: 1px;
	margin-top: 8px;
	background: var(--wp--preset--color--cyan);
}

.tri-footer__row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 8px;
}

.tri-footer__row img {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

/* Google Map dưới cột Liên hệ (footer.php). */
.tri-footer__map {
	max-width: 420px;
	margin-top: 16px;
	overflow: hidden;
	border-radius: 12px;
	background: rgb(255 255 255 / 0.08);
}

.tri-footer__map iframe {
	display: block;
	width: 100%;
	height: 180px;
	border: 0;
}

.tri-footer ul {
	padding: 0;
	list-style: none;
}

.tri-footer li {
	line-height: 1.6;
	padding-block: 0.4em;
}

.tri-footer a:hover {
	color: var(--wp--preset--color--cyan);
}

/* ── Kết nối với chúng tôi: hàng logo kiểu icon app điện thoại ── */

.tri-footer__connect {
	margin-top: 28px;
}

.tri-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-footer__social li {
	padding: 0;
	line-height: 0;
}

.tri-footer__social a {
	display: block;
	line-height: 0;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tri-footer__social a:hover,
.tri-footer__social a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgb(0 0 0 / 0.35);
}

.tri-footer .tri-app-ico {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
}

/* ── Cột Khoá học: mục đậm + danh sách khoá con ─────────────────── */

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

.tri-footer__group-h {
	font-weight: 700;
}

.tri-footer__sub {
	margin: 4px 0 2px;
	padding-left: 14px !important;
	border-left: 1px solid rgb(255 255 255 / 0.2);
}

.tri-footer .tri-footer__sub li {
	padding-block: 0.15em;
	font-size: 0.9em;
	line-height: 1.5;
}

.tri-footer__sub a {
	opacity: 0.85;
}

.tri-footer__sub a:hover,
.tri-footer__sub a:focus-visible {
	opacity: 1;
}

.tri-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tri-footer__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 20px;
	background: var(--wp--preset--color--sky);
	font-size: var(--wp--preset--font-size--small);
}

/* ?? Thanh c? ??nh ??y m?n (tablet/mobile) ?????????????????????????????? */
.tri-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 54;
	display: flex;
	height: var(--tri-bottombar-h);
	background: var(--wp--preset--color--white);
	border-top: 1px solid rgba(9, 31, 91, 0.08);
	box-shadow: 0 -4px 20px rgba(9, 31, 91, 0.1);
	transition: transform 0.28s ease;
}

.tri-mobile-bar.is-hidden {
	transform: translateY(100%);
}

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

	}

	.tri-mega__panel {
		transition: none;

	}

	.tri-mobile-bar {
		transition: none;

	}
}

.tri-mobile-bar__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	color: var(--wp--custom--color--ink);
	font-family: var(--wp--preset--font-family--beau-sans);
	cursor: pointer;
}

.tri-mobile-bar__label {
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.tri-mobile-bar__icon {
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.tri-mobile-bar__item--call .tri-mobile-bar__icon {
	-webkit-mask-image: url(../../images/icon-phone.svg);
	mask-image: url(../../images/icon-phone.svg);
}

.tri-mobile-bar__item--tag .tri-mobile-bar__icon {
	-webkit-mask-image: url(../../images/icon-tag.svg);
	mask-image: url(../../images/icon-tag.svg);
}

.tri-mobile-bar__item--chat .tri-mobile-bar__icon {
	-webkit-mask-image: url(../../images/icon-chat.svg);
	mask-image: url(../../images/icon-chat.svg);
}

.tri-mobile-bar__item--badge .tri-mobile-bar__icon {
	-webkit-mask-image: url(../../images/icon-badge.svg);
	mask-image: url(../../images/icon-badge.svg);
}

/* Chevron xoay l?n ? t?i d?ng ??ng asset c?a pager v? carousel. */
.tri-mobile-bar__item--top .tri-mobile-bar__icon {
	-webkit-mask-image: url(../../images/icon-chevron.svg);
	mask-image: url(../../images/icon-chevron.svg);
	transform: rotate(-90deg);
}

/* Tư vấn luôn nổi, mục trùng trang hiện tại cũng nổi: vòng tròn trắng,
   icon và chữ xanh primary, bóng đổ cùng màu. */
.tri-mobile-bar__item--call {
	color: var(--wp--preset--color--action);
	--tri-bar-icon: url(../../images/icon-phone.svg);
}

.tri-mobile-bar__item--tag {
	 --tri-bar-icon: url(../../images/icon-tag.svg); 
}

.tri-mobile-bar__item--chat {
	 --tri-bar-icon: url(../../images/icon-chat.svg); 
}

.tri-mobile-bar__item--badge {
	 --tri-bar-icon: url(../../images/icon-badge.svg); 
}

.tri-mobile-bar__item--top {
	 --tri-bar-icon: url(../../images/icon-chevron.svg); 
}

.tri-mobile-bar__item--chat,
.tri-mobile-bar__item.is-active {
	color: var(--wp--preset--color--action);
}

.tri-mobile-bar__item--chat .tri-mobile-bar__icon,
.tri-mobile-bar__item.is-active .tri-mobile-bar__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -18px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 12px rgba(0, 83, 209, 0.28);
	-webkit-mask-image: none;
	mask-image: none;
	transform: none;
}

.tri-mobile-bar__item--chat .tri-mobile-bar__icon {
	background: var(--wp--preset--color--action);
	box-shadow: 0 6px 12px rgba(0, 83, 209, 0.35);
}

.tri-mobile-bar__item--chat .tri-mobile-bar__icon::after,
.tri-mobile-bar__item.is-active .tri-mobile-bar__icon::after {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--action);
	-webkit-mask: var(--tri-bar-icon) center / contain no-repeat;
	mask: var(--tri-bar-icon) center / contain no-repeat;
}

.tri-mobile-bar__item--chat .tri-mobile-bar__icon::after {
	background: var(--wp--preset--color--white);
}

.tri-mobile-bar__item--top.is-active .tri-mobile-bar__icon::after,
.tri-mobile-bar__item--chat.tri-mobile-bar__item--top .tri-mobile-bar__icon::after {
	transform: rotate(-90deg);
}

.tri-mobile-bar__item--chat .tri-mobile-bar__label,
.tri-mobile-bar__item.is-active .tri-mobile-bar__label {
	color: var(--wp--preset--color--action);
}

@media (min-width: 1025px) {
	.tri-burger {
		display: none;

	}

	/* CTA chỉ hiện desktop — tablet giữ burger, không nút Tư vấn. */
	.tri-header .tri-header__cta {
		display: inline-flex;

	}

	.tri-drawer {
		display: none !important;

	}

	.tri-nav {
		display: flex;
		gap: 28px;
		font-size: var(--wp--preset--font-size--large);
	}

	.tri-mega--rong .tri-mega__inner {
		/* Đọc biến số cột như luật gốc. Ghi cứng repeat(3) ở đây thì mega
		   4 cột của "Khóa học" rụng cột thứ tư xuống hàng dưới — đã dính. */
		grid-template-columns: repeat(var(--tri-mega-cot, 1), minmax(0, 1fr));
		width: var(--tri-chrome);
		gap: 12px 0;

	}

	.tri-footer__bar {
		/* Align bar content with --tri-chrome (header/footer brand/grid). */
		padding-inline: max(20px, calc((100% - var(--tri-chrome)) / 2));

	}

	/* Từ 1025px trở lên đã có nav desktop + nút CTA trên header nên bỏ thanh. */
	.tri-mobile-bar {
		display: none;

	}
}

/* ── Trang đọc bài ── */
.tri-breadcrumb {
	margin: 0 0 14px;
}

.tri-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--custom--color--ink);
	font-size: var(--tri-text-13);
	line-height: 1.4;
}

.tri-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.tri-breadcrumb__item a {
	color: var(--wp--preset--color--royal);
	text-decoration: none;
}

.tri-breadcrumb__item a:hover {
	text-decoration: underline;
}

.tri-breadcrumb__item.is-current {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font--weight-ui);
}

.tri-breadcrumb__item.is-current > span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.tri-breadcrumb__sep {
	margin-inline: 8px;
	opacity: 0.45;
}

@media (min-width: 1200px) {
	.tri-article__wrap > .tri-breadcrumb {
		grid-column: 2;
		grid-row: 1;

	}
}

.tri-knowledge--practice-list .tri-breadcrumb {
	margin-bottom: 28px;
}

.tri-knowledge--practice-list .tri-breadcrumb__item a {
	color: var(--wp--custom--color--ink-mid, #5b5b5b);
}

.tri-knowledge--practice-list .tri-breadcrumb__item.is-current {
	color: var(--wp--preset--color--navy, #091f5b);
}

/* -- Breadcrumb toàn site (inc/breadcrumbs.php) ------------------------
   Dải riêng ngay dưới banner, hoặc dưới header khi trang không có banner. */
.tri-breadcrumb-bar {
	padding-block: 16px 4px;
	background: transparent;
}

.tri-breadcrumb-bar .tri-breadcrumb {
	margin: 0;
}

/* Trang nền xám nhạt (hub Kiến thức / Luyện thi / Tổng quan) — dải cùng màu
   để không lộ một vệt trắng giữa header và nội dung. */
.tri-hero--blank + .tri-breadcrumb-bar,
.tri-breadcrumb-bar:has(+ .tri-knowledge) {
	background: #f5f7fb;
}

.tri-breadcrumb__item a {
	color: var(--wp--custom--color--ink-mid, #5b5b5b);
}

.tri-breadcrumb__item a:hover,
.tri-breadcrumb__item a:focus-visible {
	color: var(--wp--preset--color--action, #0053d1);
}

@media (max-width: 767px) {
	.tri-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;

	}

	.tri-footer__split {
		display: none;

	}

	/* Một dòng, cuộn ngang — chuỗi 5 mắt không chiếm nửa màn hình điện thoại. */
	.tri-breadcrumb__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;

	}

	.tri-breadcrumb__list::-webkit-scrollbar {
		display: none;

	}

	.tri-breadcrumb__item {
		flex: 0 0 auto;

	}

	.tri-breadcrumb-bar {
		padding-block: 12px 0;

	}
}

/* -- Điện thoại / tablet: lớp nút nổi + thẻ khóa học (29/09/2026) ---------- */
/* Menu trượt phải nằm TRÊN mọi nút nổi (nút Tư vấn 55, Chuyên mục 55, CTA 54,
   thanh dưới 54). Trước đây menu 52 → các nút nổi đè lên menu đang mở, bấm
   trúng là mở popup / bảng chuyên mục chồng lên menu. */
.tri-drawer-backdrop {
	z-index: 71;
}

.tri-drawer {
	z-index: 72;
}

body:has(.tri-drawer.is-open) .tri-fab,
body:has(.tri-drawer.is-open) .tri-sheet__fab,
body:has(.tri-drawer.is-open) .tri-scta,
body:has(.tri-sheet.is-open) .tri-scta {
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.tri-fab,
		.tri-sheet__fab {
		transition-property: background, transform, bottom, translate;

	}

	body.tri-scta-on .tri-fab,
		body.tri-scta-on .tri-sheet__fab {
		/* Thẻ CTA xếp dọc (title + nút) cao hơn layout ngang cũ. */
		translate: 0 -118px;

	}
}

/* -- Menu điện thoại: logo về trang chủ + dòng "Xem trang …" đầu nhóm ------ */
.tri-drawer__home {
	display: inline-flex;
	line-height: 0;
}

.tri-drawer__group a.tri-drawer__hub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
	width: calc(100% - 24px);
	min-height: 42px;
	margin: 4px 12px 8px;
	padding: 0 14px;
	border-radius: var(--wp--custom--radius--control);
	background: color-mix(in srgb, var(--wp--preset--color--ice, #e7f0fb) 70%, #fff);
	color: var(--wp--preset--color--action, #0053d1);
	font-size: var(--tri-text-13, 13px);
	font-weight: var(--wp--custom--font--weight-strong, 700);
	text-transform: none;
}

.tri-drawer__group a.tri-drawer__hub::before {
	content: none;
}

.tri-drawer__group a.tri-drawer__hub:hover,
.tri-drawer__group a.tri-drawer__hub:focus-visible {
	background: var(--wp--preset--color--action, #0053d1);
	color: #fff;
}

/* ══ Footer — hàng đối tác cuối cùng (footer.php) ═══════════════════════
   Flex: trái = 2 dòng chữ, rộng ĐÚNG bằng cột "Liên hệ" của lưới trên
   (lưới 1.65fr | 1fr | 1fr, gap 40px → (100% − 80px) × 1.65 / 3.65);
   phải = phần còn lại, lưới N logo chia đều (--tri-fp-n). */
.tri-footer__partners {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: var(--tri-chrome);
	max-width: 100%;
	margin: 0 auto;
	padding: 28px 0 40px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
}

.tri-footer__h--plain {
	margin: 0;
}

.tri-footer__h--plain::after {
	content: none;
}

.tri-footer__partners-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Dòng 2 ("Văn phòng đại diện VN247 của Cambridge"): chữ thường màu trắng,
   cùng cỡ chữ nội dung footer — không phải tiêu đề. */
.tri-footer__partners-sub {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.tri-footer__partner-logos {
	display: grid;
	grid-template-columns: repeat(var(--tri-fp-n, 3), minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-footer .tri-footer__partner-logos li {
	padding: 0;
	line-height: 0;
}

.tri-footer__partner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	transition: transform var(--wp--custom--motion--duration-fast, 0.15s) ease;
}

a.tri-footer__partner:hover {
	transform: translateY(-2px);
}

.tri-footer__partner img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

@media (min-width: 768px) {
	.tri-drawer {
		width: 340px;

	}

	.tri-fab {
		right: 24px;
		bottom: calc(var(--tri-bottombar-h) + 24px);

	}

	.tri-footer__grid {
		/* Liên hệ rộng hơn 1,5 lần mỗi cột còn lại; số cột còn lại theo công
		   tắc ẩn / hiện ở admin (footer.php đặt --tri-ft-cols). */
		grid-template-columns: minmax(0, 1.65fr) repeat(var(--tri-ft-cols, 3), minmax(0, 1fr));

	}

	.tri-footer__partners {
		flex-direction: row;
		align-items: center;
		gap: 40px;

	}

	.tri-footer__partners-text {
		flex: 0 0 calc((100% - 80px) * 1.65 / 3.65);
		min-width: 0;

	}

	.tri-footer__partner-logos {
		flex: 1 1 0;
		min-width: 0;
		gap: 16px;

	}

	.tri-footer__partner {
		height: 96px;
		padding: 12px 16px;
		border-radius: 12px;

	}
}