/* =====================================================
TOKENS (giữ nguyên + bổ sung hợp đồng biến)
===================================================== */
:root {
	--c-yellow: #ffde59;
	--c-green: #00bf63;
	--c-pink: #ff5970;
	--c-blue: #004aad;
	--c-ielts: #a37dd5;
	--c-cta: #2daafc;
	--c-bg-soft: #f9fdff;

	--shadow-1: 0 6px 14px rgba(0, 0, 0, 0.15);
	--radius-lg: 32px;
	--radius-md: 20px;
	--radius-xl: 50px;

	--muted: #cfcfd6;
	--border: #ffe88a;

	/* Tỉ lệ pha nền/viền panel theo accent (có thể tinh chỉnh) */
	--panel-bg-mix: 10%; /* nền panel = accent 10% pha trắng */
	--panel-bd-mix: 38%; /* viền panel = accent 38% pha trắng */
}

/* =====================================================
THEME CONTRACT theo WRAPPER (mỗi khu set biến 1 lần)
-> đổi các biến dưới là toàn bộ component đổi theo
===================================================== */
.cambridge-wrapper {
	--accent: var(--c-green);
	--btn-grad: linear-gradient(135deg, #00bf63, #009a52);
	--btn-grad-hover: linear-gradient(135deg, #00d86f, #00a85a);
	--btn-shadow: 0 6px 14px rgba(0, 191, 99, 0.3);
	--btn-shadow-hover: 0 8px 18px rgba(0, 191, 99, 0.45);
	--header-cols: 3;
	--progress-padding-x: 100px;
}

.esol-wrapper {
	--accent: var(--c-blue);
	--btn-grad: linear-gradient(135deg, #004aad, #003b8a);
	--btn-grad-hover: linear-gradient(135deg, #005fe3, #0044aa);
	--btn-shadow: 0 6px 14px rgba(0, 74, 173, 0.3);
	--btn-shadow-hover: 0 8px 18px rgba(0, 74, 173, 0.45);
	--header-cols: 2;
	--progress-padding-x: 160px;
}

.tab-wrapper-kingdom {
	--accent: var(--c-pink);
	--btn-grad: linear-gradient(135deg, #ff5970, #ff345a);
	--btn-grad-hover: linear-gradient(135deg, #ff3d5e, #ff1a47);
	--btn-shadow: 0 6px 14px rgba(255, 89, 112, 0.3);
	--btn-shadow-hover: 0 8px 18px rgba(255, 89, 112, 0.45);
	--header-cols: 3;
	--progress-padding-x: 100px;
}

/* alias tương thích */
.ielts-wrapper,
.ielst-wrapper {
	--accent: var(--c-ielts);
	--btn-grad: linear-gradient(135deg, #b49df2, #9c84de);
	--btn-grad-hover: linear-gradient(135deg, #c6b3f8, #ad96e7);
	--btn-shadow: 0 6px 14px rgba(180, 157, 242, 0.3);
	--btn-shadow-hover: 0 8px 18px rgba(180, 157, 242, 0.45);
	--header-cols: 4;
	--progress-padding-x: 100px;
}

.ielst-wrapper.program-section {
	--header-cols: 5;
}

/* =====================================================
WRAPPERS (đồng bộ 80%)
===================================================== */
.tab-wrapper-kingdom,
.cambridge-wrapper,
.esol-wrapper,
.ielts-wrapper,
.ielst-wrapper {
	margin: auto;
	width: 80%;
}

/* =====================================================
HEADER GRIDS (1 base, mỗi wrapper tự set --header-cols)
===================================================== */
.tab-header-kingdom,
.cambridge-header,
.esol-header,
.ielts-header,
.ielst-header {
	display: grid;
	grid-template-columns: repeat(var(--header-cols, 4), 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

/* =====================================================
TAB BUTTONS – 1 lớp base + alias tương thích
===================================================== */
.tab-btn {
	padding: 15px;
	text-align: center;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
		color 0.25s ease;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background: var(--accent);
}
.tab-btn.active,
.tab-btn.hovered {
	background: var(--c-yellow);
	color: #000; /* đảm bảo contrast tốt */
}

/* ALIAS cho code cũ (auto theo .tab-btn) */
.tab-btn-kingdom,
.cambridge-btn,
.esol-btn,
.ielst-btn,
.ielts-btn {
	all: unset;
	display: block;
	padding: 15px;
	text-align: center;
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background: var(--accent);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
		color 0.25s ease;
}
.tab-btn-kingdom.active,
.cambridge-btn.active,
.esol-btn.active,
.ielst-btn.active,
.ielts-btn.active,
.tab-btn-kingdom.hovered,
.cambridge-btn.hovered,
.esol-btn.hovered,
.ielst-btn.hovered,
.ielts-btn.hovered {
	background: var(--c-yellow);
	color: #000;
}

/* =====================================================
PROGRESS (base dùng biến)
===================================================== */
.tab-progress,
.cambridge-progress,
.esol-progress,
.ielts-progress,
.ielst-progress {
	position: relative;
	height: 40px;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 var(--progress-padding-x, 100px);
}
.tab-step,
.cambridge-step,
.esol-step,
.ielts-step,
.ielst-step {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
	padding: 0 50px;
}
.tab-step .dot,
.cambridge-step .dot,
.esol-step .dot,
.ielts-step .dot,
.ielst-step .dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	z-index: 2;
	transition: background 0.25s ease;
	background: var(--accent);
}
.tab-step .dot.active,
.cambridge-step .dot.active,
.esol-step .dot.active,
.ielts-step .dot.active,
.ielst-step .dot.active,
.tab-progress .dot.hovered,
.cambridge-progress .dot.hovered,
.esol-progress .dot.hovered,
.ielts-progress .dot.hovered,
.ielst-progress .dot.hovered {
	background: var(--c-yellow);
}
.tab-progress .line,
.cambridge-progress .line,
.esol-progress .line,
.ielts-progress .line,
.ielst-progress .line {
	position: absolute;
	top: 50%;
	left: 50px;
	right: 50px;
	height: 4px;
	z-index: 1;
	width: 90%;
	background: var(--accent);
}

/* =====================================================
CONTENT PANES – base gộp
===================================================== */
.tab-contents-kingdom,
.cambridge-contents,
.esol-contents,
.ielts-contents,
.ielst-contents {
	width: 100%;
}

.tab-content-kingdom,
.cambridge-content,
.esol-content,
.ielts-content,
.ielst-content {
	display: none;
	border-radius: 10px;
	background: var(--c-bg-soft);
}
.tab-content-kingdom.active,
.cambridge-content.active,
.esol-content.active,
.ielts-content.active,
.ielst-content.active {
	display: block;
}

.ielst-content h4,
.tab-content-kingdom h4,
.cambridge-content h4 {
	color: #000;
}
/* =====================================================
LAYOUT + BORDER BOX
===================================================== */
.tab-flex {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	color: #000;
}

/* ========== BORDER-CONTENT hoàn chỉnh (ăn theo nền chính) ========== */
/* Base: khai báo biến nội bộ và fallback mặc định */
.border-content {
	width: 50%;
	padding: 28px;
	border-radius: var(--radius-xl);

	/* fallback khi thiếu color-mix */
	--_panel-bg: var(--c-bg-soft);
	--_panel-bd: var(--border);

	background: var(--_panel-bg);
	border: 2px solid var(--_panel-bd);
}

/* Nếu hỗ trợ color-mix: tính nền & viền dựa trên --accent của wrapper */
@supports (background: color-mix(in srgb, white 10%, transparent)) {
	.border-content {
		--_panel-bg: color-mix(in srgb, var(--accent) var(--panel-bg-mix), #fff);
		--_panel-bd: color-mix(in srgb, var(--accent) var(--panel-bd-mix), #fff);
		background: var(--_panel-bg);
		border-color: var(--_panel-bd);
	}
}

/* Fallback tông theo từng wrapper (khi KHÔNG có color-mix) */
.cambridge-wrapper .border-content {
	--_panel-bg: rgba(0, 191, 99, 0.08);
	--_panel-bd: rgba(0, 191, 99, 0.35);
}
.esol-wrapper .border-content {
	--_panel-bg: rgba(0, 74, 173, 0.08);
	--_panel-bd: rgba(0, 74, 173, 0.35);
}
.ielts-wrapper .border-content,
.ielst-wrapper .border-content {
	--_panel-bg: rgba(163, 125, 213, 0.08);
	--_panel-bd: rgba(163, 125, 213, 0.35);
}
.tab-wrapper-kingdom .border-content {
	--_panel-bg: rgba(255, 89, 112, 0.08);
	--_panel-bd: rgba(255, 89, 112, 0.35);
}

/* Nội dung trong panel */
.border-content ul {
	margin-bottom: 16px;
}
.border-content ul li {
	font-size: 16px;
}
.border-content ul li span,
.flexcardWrapper .text-red {
	font-weight: 700;
}
.flexcardWrapper .text-red {
	color: red;
}

/* Nếu muốn border “ăn” hẳn màu accent, bật lớp này ở wrapper
<div class="cambridge-wrapper use-accent-border"> ... */
.use-accent-border .border-content {
	@supports (background: color-mix(in srgb, white 10%, transparent)) {
		--_panel-bd: color-mix(in srgb, var(--accent) 55%, #fff);
	}
	border-color: var(--_panel-bd);
}

/* =====================================================
CTA BUTTON – base (theo biến wrapper)
===================================================== */
.cta-btn {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	padding: 12px 32px;
	border: none;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	background: var(--btn-grad);
	box-shadow: var(--btn-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	margin-top: 10px;
}
.cta-btn:hover {
	transform: translateY(-2px);
	background: var(--btn-grad-hover);
	box-shadow: var(--btn-shadow-hover);
}

/* =====================================================
MISC
===================================================== */
.text-learn h2 {
	color: #45c0f8;
	margin-bottom: 4px;
}
.text-learn h4 {
	margin-top: 10px;
}

.row-bg {
	background: #fff;
	border-radius: 30px;
	padding-top: 30px;
	padding-bottom: 10px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

/* Đồng bộ “nền mềm” & trạng thái active/hover theo accent (nếu hỗ trợ) */
@supports (background: color-mix(in srgb, white 10%, transparent)) {
	.program-section .dot.active,
	.program-section .dot.hovered,
	.program-section .tab-btn.active,
	.program-section .tab-btn.hovered,
	.program-section .cambridge-btn.active,
	.program-section .cambridge-btn.hovered,
	.program-section .esol-btn.active,
	.program-section .esol-btn.hovered,
	.program-section .ielts-btn.active,
	.program-section .ielts-btn.hovered,
	.program-section .ielst-btn.active,
	.program-section .ielst-btn.hovered {
		background: color-mix(in srgb, var(--accent) 60%, transparent);
	}
}

/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1280px) {
	.tab-wrapper-kingdom,
	.cambridge-wrapper,
	.esol-wrapper,
	.ielts-wrapper,
	.ielst-wrapper {
		width: 90%;
	}
}

@media (max-width: 768px) {
	.tab-wrapper-kingdom,
	.cambridge-wrapper,
	.esol-wrapper,
	.ielts-wrapper,
	.ielst-wrapper {
		width: 100%;
		overflow: auto;
	}

	.tab-progress,
	.cambridge-progress,
	.esol-progress,
	.ielts-progress,
	.ielst-progress {
		display: flex;
		height: 20px;
		margin-bottom: 20px;
		padding: 0 24px;
		align-items: center;
		justify-content: center;
	}

	.tab-progress .line,
	.cambridge-progress .line,
	.esol-progress .line,
	.ielts-progress .line,
	.ielst-progress .line {
		left: 16px;
		right: 16px;
		height: 3px;
		width: calc(100% - 32px);
	}

	.row-bg {
		padding: 30px 0 0;
	}

	.tab-flex {
		flex-direction: column;
		gap: 10px;
	}
	.border-content {
		width: 100%;
		padding: 20px;
		border-radius: 20px;
	}

	.tab-header-kingdom,
	.cambridge-header,
	.esol-header,
	.ielts-header,
	.ielst-header {
		gap: 10px;
	}

	.tab-btn,
	.tab-btn-kingdom,
	.cambridge-btn,
	.esol-btn,
	.ielts-btn,
	.ielst-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		padding: 12px;
	}
	.ielts-btn,
	.ielst-btn {width: max-content}
	.ielts-header, .ielst-header {overflow: auto}
	.border-content ul li {
		margin-bottom: 12px;
	}
	.cta-btn {
		font-size: 16px;
	}
	.tab-step, .cambridge-step, .ielts-step, .ielst-step {padding: 0 15px}
	.esol-step {padding: 0 35px}
}

/* =====================================================
ACCESSIBILITY: giảm chuyển động
===================================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}