/**
 * Blue Star English Global Stylesheet
 * Signature Hero & Modern EdTech Layout for Blue Star English
 * Brand Colors: #12499A (Primary) | #F99D1C (Star Accent)
 * Strict Shadow Rule: NO DARK SHADOWS (Flat border + Ultra-subtle feather glow)
 */

/* ========================================================
   GOOGLE SANS FLEX VARIABLE (@font-face Standard)
======================================================== */
@font-face {
  font-family: 'Google Sans Flex Variable';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/google-sans-flex-vietnamese.woff2') format('woff2-variations'),
       url('../fonts/google-sans-flex-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Google Sans Flex Variable';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/google-sans-flex-latin.woff2') format('woff2-variations'),
       url('../fonts/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/google-sans-flex-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Primary Brand (#12499A) */
	--color-primary: #12499A;
	--color-primary-hover: #0e3a7a;
	--color-primary-active: #0a2b5c;
	--color-primary-light: #eff6ff;
	--color-primary-subtle: #dbeafe;
	
	/* Star Amber Orange Accent (#F99D1C) */
	--color-accent: #f99d1c;
	--color-accent-hover: #e08807;
	--color-accent-light: #fef5e7;

	/* Tag Badge Colors */
	--badge-standard: #12499A;
	--badge-vinschool: #12499A;
	--badge-ielts: #e11d48;
	--badge-sat: #7c3aed;
	--badge-kids: #0284c7;

	/* Surfaces & Backgrounds */
	--bg-canvas: #ffffff;
	--bg-surface: #f8fafc;
	--bg-card: #ffffff;
	--border-light: #e2e8f0;
	--border-subtle: #edf2f7;
	--border-hover: #cbd5e1;

	/* Text Neutrals */
	--text-title: #0f172a;
	--text-body: #334155;
	--text-muted: #475569;
	--text-light: #64748b;

	/* Typography */
	--font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-sub: 'Google Sans Flex Variable', 'Google Sans Flex', 'Google Sans', sans-serif;
	--font-accent: 'Fuzzy Bubbles', cursive, sans-serif;

	/* Radiuses (Rule: 1rem applied across cards, containers, panels) */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-card: 1rem;
	--radius-xl: 1rem;
	--radius-pill: 999px;

	/* STRICT SHADOW RULE: NO DARK SHADOWS & NO BACKGROUND COLOR SHADOWS */
	--shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.03);
	--shadow-card: 0 4px 16px rgba(15, 23, 42, 0.05);
	--shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
	--shadow-btn: 0 4px 14px rgba(18, 73, 154, 0.22);

	/* Layout */
	--container-width: 1220px;
	--transition-smooth: all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
	overflow-x: clip;
	max-width: 100vw;
}

body {
	font-family: var(--font-primary);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-body);
	background-color: var(--bg-canvas);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	max-width: 100vw;
	position: relative;
}

/* ==========================================================================
   BROWSER SURFACE PERSONALIZATION & ACCESSIBILITY
   ========================================================================== */
::selection {
	background: #eef5fc;
	color: #12499A;
}

::-moz-selection {
	background: #eef5fc;
	color: #12499A;
}

:focus-visible {
	outline: 2px solid var(--color-primary, #12499A);
	outline-offset: 2px;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #f8fafc;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
	border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* ==========================================================================
   EMIL KOWALSKI DESIGN ENGINEERING STANDARDS (UI POLISH RULES)
   ========================================================================== */
/* 1. Prevent width jitter during number count-up & pricing updates */
.stat-number,
.card-stat-num,
.price-num,
.package-num,
.okhub-stat-card .card-number-row,
.hero-stat-number,
.hero-trust-stat strong,
.rating-score,
.tuition-price {
	font-variant-numeric: tabular-nums;
}

/* 2. Prevent circular avatars and channel icons from squishing into ovals */
.review-avatar-img,
.review-avatar-text,
.author-avatar-circle,
.author-avatar-link,
.proof-avatar,
.student-avatar-badge,
.mockup-avatar,
.dol-channel-icon {
	flex-shrink: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-smooth);
}

/* Font Awesome 5 Pro Typography & Helper Standards */
.fal, .far, .fas, .fab {
	vertical-align: -0.125em;
	transition: color 0.2s ease, transform 0.2s ease;
}

.icon-brand {
	color: var(--color-primary);
}

.icon-accent {
	color: var(--color-accent);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* ========================================================
   HEADER
======================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-light);
	height: 80px;
	display: flex;
	align-items: center;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo img {
	height: 68px;
	width: auto;
	object-fit: contain;
	transition: transform 0.2s ease;
}

/* Nav Menu */
.site-navigation {
	display: flex;
	align-items: center;
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
}

.nav-link {
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
	padding: 7px 12px;
	border-radius: 8px;
	position: relative;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.is-active > .nav-link {
	color: var(--color-primary);
	background: #f1f5f9;
}

.nav-link.active {
	color: var(--color-primary);
}

.dropdown-chevron {
	font-size: 11px;
	color: #64748b;
	transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item:hover > .nav-link .dropdown-chevron,
.nav-item.is-active > .nav-link .dropdown-chevron {
	transform: rotate(180deg);
	color: var(--color-primary);
}

.nav-tag-badge {
	background: #e8f8e3;
	color: #2d7a1e;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	display: inline-block;
	line-height: 1.2;
}

.badge-pill.hot {
	background: #ffefe5;
	color: #ea580c;
	font-size: 9.5px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	display: inline-block;
	line-height: 1.2;
}

/* Standard Dropdown Menu */
.dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 280px;
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 16px 36px -8px rgba(18, 73, 154, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
	padding: 8px;
	list-style: none;
	margin: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.dropdown-menu::before {
	content: '';
	position: absolute;
	top: -26px;
	left: -10px;
	right: -10px;
	height: 30px;
	background: transparent;
	z-index: 50;
}

.has-dropdown:hover > .dropdown-menu,
.has-dropdown.is-active > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.dropdown-menu li {
	margin-bottom: 2px;
}

.dropdown-menu li:last-child {
	margin-bottom: 0;
}

.dropdown-menu.dropdown-menu-wide {
	min-width: 320px;
}

.dropdown-menu li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	border-radius: 10px;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.dropdown-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.dropdown-item-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	transition: color 0.18s ease;
}

.dropdown-item-desc {
	font-size: 11.5px;
	color: #64748b;
	line-height: 1.35;
	font-weight: 400;
}

.dropdown-menu li a:hover {
	background: linear-gradient(135deg, rgba(18, 73, 154, 0.06) 0%, rgba(18, 73, 154, 0.015) 100%);
	color: var(--color-primary);
	transform: translateX(3px);
}

.dropdown-menu li a:hover .dropdown-item-title {
	color: var(--color-primary);
}

.dropdown-item-arrow {
	opacity: 0;
	transform: translateX(-6px);
	color: #94a3b8;
	flex-shrink: 0;
	margin-left: auto;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu li a:hover .dropdown-item-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-primary);
}

.dropdown-item-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #f4f8fe;
	border: 1px solid #e2edfc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.dropdown-item-icon svg {
	width: 18px;
	height: 18px;
}

.dropdown-item-icon i {
	font-size: 16px;
	color: var(--color-primary);
	transition: transform 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover .dropdown-item-icon {
	background: #e8f1fd;
	border-color: #cbdff9;
	transform: scale(1.06);
}

.dropdown-menu li a:hover .dropdown-item-icon i {
	color: var(--color-primary-hover);
}

/* Mega Menu Panel */
.mega-menu-panel {
	position: absolute;
	top: calc(100% + 18px); /* Thụt xuống 18px so với header để tạo khoảng cách thanh thoát */
	left: 50%;
	transform: translateX(-40%) translateY(6px);
	width: 1180px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 16px 36px -8px rgba(18, 73, 154, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
	padding: 20px 24px 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
	pointer-events: none;
}

/* Seamless hover bridge: covers the gap so moving mouse down never loses hover */
.mega-menu-panel::before {
	content: '';
	position: absolute;
	top: -30px;
	left: -20px;
	right: -20px;
	height: 35px;
	background: transparent;
	z-index: 999;
}

.has-mega-menu:hover > .mega-menu-panel,
.has-mega-menu.is-active > .mega-menu-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-40%) translateY(0);
	pointer-events: auto;
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
	margin-bottom: 20px;
}

.mega-menu-col {
	display: flex;
	flex-direction: column;
	padding: 14px 12px;
	border-radius: 1rem;
}

.mega-menu-col.highlight-col {
	background: linear-gradient(180deg, rgba(18, 73, 154, 0.08) 0%, rgba(18, 73, 154, 0.012) 100%);
	border: none;
	border-radius: 1rem;
	padding: 14px 12px;
	margin: 0;
}

.mega-col-header {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 52px;
	padding-top: 4px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid #e2e8f0;
}

.mega-menu-col.highlight-col .mega-col-header {
	border-bottom: 1px solid rgba(18, 73, 154, 0.14);
}

.mega-col-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mega-col-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	line-height: 1.4;
}

.mega-col-sub {
	font-family: var(--font-sub);
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	margin: 0;
	line-height: 1.4;
}

.badge-pill.hot {
	display: none;
}

.mega-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Mega Link Card: Icon + Text + Hover Arrow */
.mega-link-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.mega-link-card:hover {
	background: linear-gradient(135deg, rgba(18, 73, 154, 0.06) 0%, rgba(18, 73, 154, 0.015) 100%);
	transform: translateX(3px);
}

.mega-menu-col.highlight-col .mega-link-card:hover {
	background: linear-gradient(135deg, #ffffff 0%, rgba(240, 247, 255, 0.9) 100%);
	box-shadow: 0 3px 10px rgba(18, 73, 154, 0.06);
	transform: translateX(3px);
}

/* Child item icon container: Brand color outline + Secondary Star Sparkles */
.mega-item-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #f4f8fe;
	border: 1px solid #e2edfc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-item-icon svg {
	width: 22px;
	height: 22px;
	transition: transform 0.2s ease;
}

.mega-item-icon i {
	font-size: 19px;
	color: var(--color-primary);
	transition: transform 0.2s ease, color 0.2s ease;
}

.mega-link-card:hover .mega-item-icon {
	background: #e8f1fd;
	border-color: #cbdff9;
	transform: scale(1.06);
}

.mega-link-card:hover .mega-item-icon i {
	color: var(--color-primary-hover);
	transform: scale(1.1);
}

.mega-item-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.mega-link-list .link-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.35;
	transition: color 0.15s ease;
}

.mega-link-list .link-name.highlight {
	color: var(--color-primary);
	font-weight: 700;
}

.mega-link-card:hover .link-name {
	color: var(--color-primary);
}

.mega-link-list .link-meta {
	font-family: var(--font-sub);
	font-size: 11.5px;
	color: #5A6877;
	margin-top: 2px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mega-sub-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1.5px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #12499A;
	background: #eff6ff;
	border: 1px solid #dbeafe;
	line-height: 1.35;
	margin-top: 3px;
	width: fit-content;
	transition: all 0.18s ease;
}

.mega-link-card:hover .mega-sub-tag {
	background: #12499A;
	color: #ffffff;
	border-color: #12499A;
}

/* Hover Arrow: appears and slides in smoothly */
.mega-item-arrow {
	opacity: 0;
	transform: translateX(-6px);
	color: #94a3b8;
	flex-shrink: 0;
	margin-left: auto;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-link-card:hover .mega-item-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-primary);
}

/* Column 1 Tip Card for Vertical Harmony */
.mega-col-tip-card {
	margin-top: 14px;
	background: #fdfbf7;
	border: 1px dashed #fbd38d;
	border-radius: 12px;
	padding: 12px 14px;
}

.tip-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #c05621;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.tip-desc {
	font-family: var(--font-sub);
	font-size: 11.5px;
	color: #718096;
	line-height: 1.45;
	margin: 0;
}

.mega-bottom-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid #e2edfc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mega-bottom-icon svg {
	width: 20px;
	height: 20px;
}

/* Mega Menu Bottom Bar (Moonday Clean Footer) */
.mega-bottom-bar {
	margin-left: -24px;
	margin-right: -24px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}

.mega-bottom-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mega-bottom-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #eff6ff;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid #dbeafe;
}

.mega-bottom-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mega-bottom-title {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.5;
}

.mega-bottom-sub {
	font-family: var(--font-sub);
	font-size: 12px;
	color: #5A6877;
	line-height: 1.6;
}

.mega-bottom-sub strong {
	color: var(--color-primary);
	font-weight: 700;
}

.mega-bottom-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--color-primary);
	color: #ffffff;
	padding: 7px 18px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.15);
}

.mega-bottom-cta-btn:hover {
	background: var(--color-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.25);
}

/* Header Right Actions */
.header-right-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.header-phone-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 7px 14px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--color-primary);
	font-size: 13.5px;
	font-weight: 700;
	transition: all 0.2s ease;
}

.header-phone-pill:hover {
	background: #eff6ff;
	border-color: #bfdbfe;
	transform: translateY(-1px);
}

.phone-svg-icon,
.phone-fa-icon {
	font-size: 14px;
	color: var(--color-primary);
	flex-shrink: 0;
}

.arrow-svg-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.header-btn-cta:hover .arrow-svg-icon {
	transform: translateX(3px);
}

/* Mobile Toggle */
.mobile-menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #0f172a;
	padding: 0;
	transition: all 0.15s ease;
}

.mobile-menu-toggle:hover {
	background: #eff6ff;
	color: var(--color-primary);
}

.hamburger-icon,
.hamburger-fa-icon {
	font-size: 18px;
}

/* Mobile Drawer */
.mobile-drawer-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(15, 23, 42, 0.5);
	backdrop-filter: blur(4px);
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s ease;
}

.mobile-drawer-backdrop.active {
	opacity: 1;
	visibility: visible;
}

.mobile-drawer {
	position: fixed;
	top: 0;
	right: -360px;
	width: 340px;
	max-width: 90vw;
	height: 100vh;
	background: #ffffff;
	z-index: 2001;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	overflow-y: auto;
}

.mobile-drawer.open {
	right: 0;
}

.mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #f1f5f9;
}

.mobile-drawer-logo img {
	height: 54px;
	width: auto;
}

.mobile-drawer-close {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #64748b;
}

.mobile-drawer-close svg {
	width: 18px;
	height: 18px;
}

.mobile-drawer-content {
	padding: 16px 20px;
	flex-grow: 1;
}

.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: #1e293b;
	text-decoration: none;
	border-radius: 10px;
	transition: background 0.15s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
	background: #f0f6ff;
	color: var(--color-primary);
}

.mobile-accordion-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: #1e293b;
	text-align: left;
	cursor: pointer;
	border-radius: 10px;
	transition: background 0.15s ease;
}

.mobile-accordion-btn:hover {
	background: #f0f6ff;
	color: var(--color-primary);
}

.accordion-arrow {
	width: 15px;
	height: 15px;
	color: #64748b;
	transition: transform 0.2s ease;
}

.mobile-nav-item.has-accordion.open .accordion-arrow {
	transform: rotate(180deg);
}

.mobile-accordion-content {
	list-style: none;
	padding: 4px 0 8px 12px;
	margin: 0;
	display: none;
}

.mobile-nav-item.has-accordion.open .mobile-accordion-content {
	display: block;
}

.mobile-accordion-content li a {
	display: block;
	padding: 7px 12px;
	font-size: 13.5px;
	color: #475569;
	text-decoration: none;
	border-radius: 8px;
}

.mobile-accordion-content li a:hover {
	color: var(--color-primary);
	background: #f8fafc;
}

.mobile-course-group {
	margin-bottom: 12px;
}

.group-badge {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	background: #f8fafc;
	border-radius: 6px;
	margin-bottom: 6px;
}

.group-badge.highlight {
	background: #e0edff;
	color: var(--color-primary);
}

.group-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.group-links li a {
	display: block;
	padding: 6px 12px;
	font-size: 13px;
	color: #334155;
	text-decoration: none;
}

.group-links li a:hover {
	color: var(--color-primary);
}

.mobile-drawer-footer {
	padding: 16px 20px 24px;
	border-top: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mobile-drawer-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.mobile-drawer-cta {
	width: 100%;
	padding: 12px 20px;
	text-align: center;
	font-size: 14px;
}

/* Header Breakpoint */
@media (max-width: 1150px) {
	.site-navigation {
		display: none;
	}
	.mobile-menu-toggle {
		display: flex;
	}
}

@media (max-width: 768px) {
	.site-header {
		height: 64px;
	}
	.site-header .container.header-inner {
		padding: 0 16px;
		gap: 12px;
	}
	.site-logo img {
		height: 36px;
		width: auto;
	}
	.header-right-actions {
		gap: 8px;
	}
	.header-phone-pill {
		display: none !important;
	}
	.header-btn-cta {
		padding: 6px 12px;
		font-size: 12px;
		white-space: nowrap;
	}
	.header-btn-cta .star-svg-icon {
		width: 13px;
		height: 13px;
	}
	.mobile-menu-toggle {
		display: flex !important;
		width: 38px;
		height: 38px;
		border-radius: 8px;
		flex-shrink: 0;
	}
}

@media (max-width: 380px) {
	.site-logo img {
		height: 40px;
	}
	.header-btn-cta {
		padding: 6px 9px;
		font-size: 11px;
	}
}

/* Footer Contact Info Block */
.footer-contact-info-block {
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: #475569;
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	line-height: 1.5;
}

.contact-mini-svg,
.contact-mini-icon {
	font-size: 15px;
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.contact-info-item a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
}

.contact-info-item a:hover {
	text-decoration: underline;
}

/* Header CTA Button */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--radius-pill);
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--transition-smooth);
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-primary);
	color: #ffffff;
	box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	transform: translateY(-2px);
}

.btn-accent {
	background: var(--color-accent);
	color: #ffffff;
}

.btn-accent:hover {
	background: var(--color-accent-hover);
	transform: translateY(-2px);
}

/* ========================================================
   STAR GLOW PILL BUTTON (BLUE STAR BRAND SYNCHRONIZATION)
======================================================== */
.btn-star-glow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%);
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.22);
	isolation: isolate;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: none;
}

.btn-star-glow:hover {
	transform: translateY(-1px);
	box-shadow: none !important; /* Strictly no shadow on hover */
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	border-color: rgba(255, 255, 255, 0.4);
}

/* Ambient Outer Glow Layers - Disabled for clean flat sharp borders */
.btn-star-glow .btn-glow-backdrop,
.btn-star-glow .btn-glow-beam-track {
	display: none;
}

/* Inner Pill Surface - Brand Royal Blue Gradient with crisp lines */
.btn-star-glow .btn-star-glow-inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-pill);
	background: transparent;
	padding: 9px 20px 9px 13px;
	width: 100%;
	border: none;
	box-shadow: none;
	transition: all 0.2s ease;
}

.btn-star-glow:hover .btn-star-glow-inner {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* Star Icon Wrap (Crisp vector lines, no glow/shadow blur) */
.btn-star-glow .btn-star-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transform-origin: center center;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-star-glow .btn-star-icon-wrap svg {
	width: 16px;
	height: 16px;
	display: block;
	filter: none;
	transform-origin: center center;
}

.btn-star-glow:hover .btn-star-icon-wrap {
	transform: scale(1.22) rotate(360deg);
}

.btn-star-glow .btn-star-shine {
	display: none;
}

/* Button Text */
.btn-star-glow .btn-star-glow-text {
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-shadow: none;
	transition: transform 0.2s ease;
}

/* Arrow */
.btn-star-glow .btn-star-glow-arrow {
	font-size: 13px;
	color: #F99D1C;
	filter: none;
	transition: transform 0.2s ease;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-star-glow:hover .btn-star-glow-arrow {
	transform: translateX(3px);
}

/* Size Variants */
.btn-star-glow.btn-star-glow-sm .btn-star-glow-inner {
	padding: 7px 16px 7px 11px;
	gap: 6px;
}

.btn-star-glow.btn-star-glow-sm .btn-star-icon-wrap {
	width: 16px;
	height: 16px;
}

.btn-star-glow.btn-star-glow-sm .btn-star-icon-wrap svg {
	width: 14px;
	height: 14px;
}

.btn-star-glow.btn-star-glow-sm .btn-star-glow-text {
	font-size: 13px;
}

.btn-star-glow.btn-star-glow-lg .btn-star-glow-inner {
	padding: 12px 28px 12px 18px;
	gap: 10px;
}

.btn-star-glow.btn-star-glow-lg .btn-star-icon-wrap {
	width: 22px;
	height: 22px;
}

.btn-star-glow.btn-star-glow-lg .btn-star-icon-wrap svg {
	width: 18px;
	height: 18px;
}

.btn-star-glow.btn-star-glow-lg .btn-star-glow-text {
	font-size: 15px;
}

/* Keyframes */
@keyframes borderGlowTranslate {
	0% {
		transform: translateX(-10%);
	}
	50% {
		transform: translateX(110%);
	}
	100% {
		transform: translateX(-10%);
	}
}

@keyframes borderGlowScale {
	0%, 100% {
		transform: translateX(-50%) scale(0.85);
		opacity: 0.7;
	}
	50% {
		transform: translateX(-50%) scale(1.3);
		opacity: 1;
	}
}

@keyframes starRotate {
	0% {
		transform: rotate(0deg) scale(1);
	}
	30% {
		transform: rotate(18deg) scale(1.08);
	}
	60% {
		transform: rotate(-14deg) scale(0.96);
	}
	85% {
		transform: rotate(24deg) scale(1.12);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

/* ========================================================
   STANDARDIZED HEADLINE TYPOGRAPHY
======================================================== */
.section-header {
	margin-bottom: 42px;
	position: relative;
}

.section-header.text-center {
	text-align: center;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

.section-pill-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	background: #eff6ff;
	border: 1px solid #dbeafe;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 14px;
}

.section-title {
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: 800;
	color: #1e293b;
	line-height: 1.32;
	letter-spacing: -0.025em;
	margin-bottom: 14px;
	text-wrap: balance;
}

.section-title .text-brand,
.section-title .text-highlight,
.section-title .highlight-brand,
.section-title .highlight-brand-light,
.section-title .bs-headline-highlight {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	display: inline-block;
}

.section-desc {
	font-family: var(--font-sub);
	font-size: 15.5px;
	font-weight: 450;
	color: #334155;
	line-height: 1.6;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	text-wrap: pretty;
}

@media (max-width: 1024px) {
	.section-title {
		font-size: 28px;
	}
}

@media (max-width: 640px) {
	.section-title {
		font-size: 24px;
		line-height: 1.35;
	}
	.section-desc {
		font-size: 14px;
	}
}

/* Keyframes */
@keyframes borderGlowTranslate {
	0% {
		transform: translateX(-10%);
	}
	50% {
		transform: translateX(110%);
	}
	100% {
		transform: translateX(-10%);
	}
}

@keyframes borderGlowScale {
	0%, 100% {
		transform: translateX(-50%) scale(0.85);
		opacity: 0.7;
	}
	50% {
		transform: translateX(-50%) scale(1.3);
		opacity: 1;
	}
}

@keyframes starRotate {
	0% {
		transform: rotate(0deg) scale(1);
	}
	30% {
		transform: rotate(18deg) scale(1.08);
	}
	60% {
		transform: rotate(-14deg) scale(0.96);
	}
	85% {
		transform: rotate(24deg) scale(1.12);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

@keyframes starShine {
	0%, 100% {
		opacity: 0.35;
		transform: translate(-50%, -50%) scale(0.85);
	}
	50% {
		opacity: 0.85;
		transform: translate(-50%, -50%) scale(1.3);
	}
}

/* ========================================================
   HERO SECTION
======================================================== */
.bs-hero-section {
	position: relative;
	padding: 56px 0 95px;
	background: radial-gradient(ellipse at bottom, #321b35 0%, #090a0f 100%);
	text-align: center;
	overflow: hidden;
}

/* Background Muted Video & Translucent Overlay */
.hero-video-bg-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.hero-bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 1;
}

.hero-video-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(10, 15, 28, 0.62) 0%, rgba(15, 23, 42, 0.70) 50%, rgba(9, 10, 15, 0.80) 100%);
	z-index: 2;
	pointer-events: none;
}

.hero-content-relative {
	position: relative;
	z-index: 3;
}



/* Top Pill Badges */
.hero-pill-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 26px;
	flex-wrap: wrap;
	animation: fadeInDown 0.6s ease-out;
}

.pill-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	padding: 1.5px; /* Creates hairline space for rotating laser beam */
	overflow: hidden;
	background: var(--pill-border);
	box-shadow: none;
	cursor: pointer;
	user-select: none;
	height: 38px;
	transform: none;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
	white-space: nowrap;
}

/* Balanced horizontal layout without tilted rotations */
.pill-standard,
.pill-vinschool {
	--pill-bg: linear-gradient(135deg, #0d3880 0%, #12499A 100%);
	--pill-border: rgba(255, 255, 255, 0.25);
	--pill-beam: #60a5fa;
	--pill-glow: rgba(59, 130, 246, 0.5);
	transform: none;
}

.pill-cambridge {
	--pill-bg: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
	--pill-border: rgba(255, 255, 255, 0.25);
	--pill-beam: #fca5a5;
	--pill-glow: rgba(239, 68, 68, 0.5);
	transform: none;
}

.pill-timo {
	--pill-bg: linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
	--pill-border: rgba(255, 255, 255, 0.25);
	--pill-beam: #d8b4fe;
	--pill-glow: rgba(168, 85, 247, 0.5);
	transform: none;
}

.pill-preschool {
	--pill-bg: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
	--pill-border: rgba(255, 255, 255, 0.25);
	--pill-beam: #7dd3fc;
	--pill-glow: rgba(14, 165, 233, 0.5);
	transform: none;
}

/* Đường line viền chạy tự động tuần tự từng viên pill (Sequential Laser Border Beam) */
.pill-border-beam {
	position: absolute;
	top: -150%;
	left: -150%;
	width: 400%;
	height: 400%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 260deg,
		var(--pill-beam, #ffffff) 360deg
	);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

/* Chạy tự động lần lượt tuần tự qua từng pill (8s cycle: mỗi pill chạy 2s) */
.pill-preschool .pill-border-beam {
	animation: pillBeamSequence 8s linear infinite 0s;
}

.pill-standard .pill-border-beam,
.pill-vinschool .pill-border-beam {
	animation: pillBeamSequence 8s linear infinite 2s;
}

.pill-cambridge .pill-border-beam {
	animation: pillBeamSequence 8s linear infinite 4s;
}

.pill-timo .pill-border-beam {
	animation: pillBeamSequence 8s linear infinite 6s;
}

/* Khi hover vào viên pill nào thì viên đó lập tức chạy liên tục */
.pill-badge:hover .pill-border-beam {
	opacity: 1 !important;
	animation: pillBeamSpin 2s linear infinite !important;
}

@keyframes pillBeamSequence {
	0% {
		opacity: 0;
		transform: rotate(0deg);
	}
	1.5% {
		opacity: 1;
	}
	23.5% {
		opacity: 1;
	}
	25% {
		opacity: 0;
		transform: rotate(360deg);
	}
	25.01%, 100% {
		opacity: 0;
		transform: rotate(0deg);
	}
}

@keyframes pillBeamSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Inner pill content container - Text only, clean & balanced */
.pill-inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border-radius: var(--radius-pill);
	background: var(--pill-bg);
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

.pill-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	z-index: 10;
}

.pill-badge:hover .pill-logo-svg {
	transform: scale(1.15) rotate(4deg);
}

/* Headline */
.hero-heading {
	margin-bottom: 44px;
	animation: fadeInUp 0.7s ease-out;
}

.hero-heading-sub {
	font-size: 28px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.35;
	letter-spacing: -0.02em;
	display: block;
	max-width: 860px;
	margin: 0 auto 6px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	text-wrap: balance;
}

.hero-heading-main {
	font-family: 'Google Sans Flex', 'Google Sans', 'Plus Jakarta Sans', sans-serif;
	font-size: 58px;
	font-weight: 700;
	color: #60a5fa;
	background: linear-gradient(135deg, #ffffff 0%, #93c5fd 45%, #60a5fa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.15;
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	filter: none;
	white-space: nowrap;
}

/* Star Effect (Ngôi sao 5 cánh sắc nét không shadow) */
.hero-star-effect {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 8px;
	width: 32px;
	height: 32px;
}

.star-svg-main {
	position: relative;
	z-index: 2;
	animation: starGentlePulse 3.5s ease-in-out infinite;
	filter: none !important;
	box-shadow: none !important;
	transform-origin: center center;
}

@keyframes starGentlePulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.16) rotate(15deg);
	}
}

/* 3 Column Stats Row */
.hero-stats-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-bottom: 45px;
	animation: fadeInUp 0.8s ease-out;
}

.stat-col {
	text-align: center;
}

.stat-col-number {
	font-size: 26px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.15;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.stat-col-desc {
	font-size: 11.5px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 4px;
}

.stat-separator {
	width: 1px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.2);
}

/* Hero Center Stage Wrapper */
.hero-stage-container {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	animation: fadeInUp 0.9s ease-out;
}



/* ========================================================
   THE 2x2 MAIN COURSE CARD
======================================================== */
.bs-main-card {
	position: relative;
	z-index: 5;
	background: #e2e8f0; /* 100% straight hairline dividing lines */
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-xl);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px; /* Mathematically aligned 1px cross dividers */
}

/* 3-Box Grid Placements: Row 1 has 2 boxes, Row 2 has 1 box spanning full width */
.bs-main-card .course-box.box-kids {
	grid-column: 1;
	grid-row: 1;
}

.bs-main-card .course-box.box-vin {
	grid-column: 2;
	grid-row: 1;
}

.bs-main-card .course-box.box-thcs {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Course Box (React-Bits SpotlightCard Ambient Track & Emil Kowalski Tactile Active) */
.course-box {
	padding: 32px 36px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: background 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
	position: relative;
	background: #ffffff;
	z-index: 1;
	text-decoration: none;
	overflow: hidden;
}

.course-box::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(18, 73, 154, 0.05), transparent 70%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.course-box:hover::before {
	opacity: 1;
}

.course-box > * {
	position: relative;
	z-index: 1;
}

.course-box:active {
	transform: scale(0.99);
	transition: transform 0.1s ease;
}

.course-box:hover {
	background: #fafcff;
}

/* Box Badges with Running Border Beam */
.box-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	padding: 1.5px; /* Creates the border width where beam rotates */
	margin-bottom: 12px;
	user-select: none;
	overflow: hidden;
	background: var(--badge-border);
	box-shadow: none;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-box:hover .box-badge,
.box-badge:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: none;
}

/* Rotating laser beam circling the border on hover */
.badge-border-beam {
	position: absolute;
	top: -150%;
	left: -150%;
	width: 400%;
	height: 400%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 260deg,
		var(--badge-beam) 360deg
	);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.3s ease;
}

.course-box:hover .badge-border-beam,
.box-badge:hover .badge-border-beam {
	opacity: 1;
	animation: badgeBeamSpin 2.5s linear infinite;
}

@keyframes badgeBeamSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Inner content container */
.badge-inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	background: var(--badge-bg);
	color: var(--badge-color);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	transition: background 0.3s ease, color 0.3s ease;
	width: 100%;
	height: 100%;
	white-space: nowrap;
}

.course-box:hover .badge-inner {
	background: var(--badge-bg-hover);
}

.badge-mini-icon {
	flex-shrink: 0;
	font-size: 11px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-box:hover .badge-mini-icon {
	transform: scale(1.18);
}

/* Badge Styles & Border Beam Palettes */
.badge-vin-style {
	--badge-border: #bfdbfe;
	--badge-bg: #eff6ff;
	--badge-bg-hover: #e0f2fe;
	--badge-color: #0e3a7a;
	--badge-beam: #12499A;
}

.badge-kids-style {
	--badge-border: #bbf7d0;
	--badge-bg: #f0fdf4;
	--badge-bg-hover: #dcfce7;
	--badge-color: #15803d;
	--badge-beam: #16a34a;
}

.badge-ielts-style {
	--badge-border: #fecdd3;
	--badge-bg: #fff1f2;
	--badge-bg-hover: #ffe4e6;
	--badge-color: #be123c;
	--badge-beam: #e11d48;
}

.badge-thcs-style {
	--badge-border: #fecdd3;
	--badge-bg: #fff1f2;
	--badge-bg-hover: #ffe4e6;
	--badge-color: #be123c;
	--badge-beam: #e11d48;
}

.badge-thcs-style .badge-inner {
	padding: 5px 16px;
	justify-content: center;
}

.badge-thcs-logo {
	height: 19px;
	width: auto;
	object-fit: contain;
	display: block;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-box:hover .badge-thcs-logo {
	transform: scale(1.1);
}

.badge-sat-style {
	--badge-border: #fed7aa;
	--badge-bg: #fff7ed;
	--badge-bg-hover: #ffedd5;
	--badge-color: #c2410c;
	--badge-beam: #F99D1C;
}

/* Box Title */
.box-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--text-title);
	margin-bottom: 7px;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-wrap: balance;
}

.course-box.box-kids:hover .box-title { color: #15803d; }
.course-box.box-vin:hover .box-title { color: #12499A; }
.course-box.box-thcs:hover .box-title,
.course-box.box-ielts:hover .box-title { color: #be123c; }
.course-box.box-sat:hover .box-title { color: #ea580c; }

.box-arrow {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--text-light, #94a3b8);
	background: transparent;
	opacity: 0;
	transform: translateX(-6px);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
}

.course-box:hover .box-arrow,
.course-box:focus-visible .box-arrow {
	opacity: 1;
	transform: translateX(0);
}

.course-box.box-kids:hover .box-arrow {
	color: #15803d;
	background: #ecfdf5;
}

.course-box.box-vin:hover .box-arrow {
	color: #12499A;
	background: #eff6ff;
}

.course-box.box-thcs:hover .box-arrow,
.course-box.box-ielts:hover .box-arrow {
	color: #be123c;
	background: #fff1f2;
}

.course-box.box-sat:hover .box-arrow {
	color: #ea580c;
	background: #fff7ed;
}

@media (max-width: 768px) {
	.box-arrow {
		opacity: 0.75;
		transform: none;
	}
}

/* Dedicated Target Audience styling */
.box-target {
	font-family: var(--font-sub);
	font-size: 14px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
	line-height: 1.45;
	transition: color 0.3s ease;
	text-wrap: balance;
}

.course-box.box-kids:hover .box-target { color: #15803d; }
.course-box.box-vin:hover .box-target { color: #12499A; }
.course-box.box-thcs:hover .box-target,
.course-box.box-ielts:hover .box-target { color: #be123c; }
.course-box.box-sat:hover .box-target { color: #c2410c; }

/* Curriculum & subjects description */
.box-desc {
	font-family: var(--font-sub);
	font-size: 13.5px;
	color: #475569;
	line-height: 1.5;
	margin-bottom: 0;
	transition: color 0.3s ease;
	text-wrap: pretty;
}

.course-box:hover .box-desc {
	color: #1e293b;
}
/* ========================================================
   KEYFRAME ANIMATIONS
======================================================== */

@keyframes floatSmooth {
	0%, 100% {
		transform: translateY(0px) rotate(var(--rot, 0deg));
	}
	50% {
		transform: translateY(-10px) rotate(var(--rot, 0deg));
	}
}

@keyframes starPulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		opacity: 0.9;
	}
	50% {
		transform: scale(1.2) rotate(15deg);
		opacity: 1;
	}
}

@keyframes pulseGlow {
	0%, 100% {
		box-shadow: 0 4px 14px rgba(0, 104, 255, 0.3);
	}
	50% {
		box-shadow: 0 4px 22px rgba(0, 104, 255, 0.6);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive */
@media (max-width: 992px) {
	.floating-student-card,
	.orbital-track-left,
	.orbital-track-right,
	.bs-floating-dock {
		display: none;
	}

	.hero-heading-sub {
		font-size: 21px;
	}

	.hero-heading-main {
		font-size: 38px;
	}

	.hero-stats-row {
		gap: 20px;
	}

	.stat-col-number {
		font-size: 22px;
	}

	.bs-main-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.bs-main-card .course-box.box-kids,
	.bs-main-card .course-box.box-vin,
	.bs-main-card .course-box.box-thcs {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ========================================================
   SECTION: FEATURES SECTION WITH SKELETONS (ACADEMIC VALUES)
   - Inspired by Aceternity UI Features Section With Skeletons
   - 3-Column Luxury EdTech Grid with interactive motion & subtle photo underlay
   - Brand Color: #12499A | Star Accent: #F99D1C
   - Strict Constraint: 1rem border-radius, NO dark shadows
======================================================== */
.bs-academic-section {
	padding: 85px 0 95px;
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

.academic-header {
	text-align: center;
	margin-bottom: 48px;
	position: relative;
	z-index: 2;
}

.academic-badge-pill {
	display: inline-block;
	padding: 5px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(18, 73, 154, 0.18);
	background: #eff6ff;
	font-size: 11px;
	font-weight: 800;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.academic-title {
	font-size: 38px;
	font-weight: 800;
	color: var(--text-title);
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: balance;
}

.academic-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.academic-subtitle {
	font-family: var(--font-sub);
	font-size: 15px;
	line-height: 1.6;
	color: #64748b;
	max-width: 680px;
	margin: 12px auto 0;
	text-align: center;
}

/* 3-Column Features Grid */
.academic-skeletons-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* Feature Skeleton Card */
.skeleton-feature-card {
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.3s ease,
	            box-shadow 0.35s ease;
	position: relative;
}

.skeleton-feature-card:hover {
	transform: translateY(-5px);
	border-color: rgba(18, 73, 154, 0.35);
	box-shadow: 0 12px 28px rgba(18, 73, 154, 0.08);
}

.skeleton-feature-card.active-featured {
	border-color: rgba(18, 73, 154, 0.25);
}

/* Visual Stage with Soft Photo Underlay */
.skeleton-visual-stage {
	position: relative;
	height: 240px;
	background: #0f172a;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* Soft Blurred Authentic Photo Underlay */
.skeleton-photo-underlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.skeleton-photo-underlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(2px) brightness(0.72) saturate(1.1);
	transform: scale(1.05);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
	will-change: transform, filter;
	animation: photoBreathScale 10s ease-in-out infinite alternate;
}

[data-skeleton="1"] .skeleton-photo-underlay img {
	animation-delay: 0s;
}

[data-skeleton="2"] .skeleton-photo-underlay img {
	animation-delay: 3s;
}

[data-skeleton="3"] .skeleton-photo-underlay img {
	animation-delay: 6s;
}

@keyframes photoBreathScale {
	0% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1.10);
	}
}

.skeleton-feature-card:hover .skeleton-photo-underlay img {
	transform: scale(1.12);
	filter: blur(0px) brightness(0.82) saturate(1.15);
}

.skeleton-photo-underlay img.photo-contain-cutout {
	object-fit: cover;
	object-position: center 20%;
}

.skeleton-glass-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.55) 100%);
	z-index: 2;
	pointer-events: none;
}

/* Interactive Floating Screen Frame */
.skeleton-screen-wrapper {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 310px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	transition: transform 0.35s ease;
	animation: continuousFrameFloat 6s ease-in-out infinite alternate;
}

[data-skeleton="1"] .skeleton-screen-wrapper {
	animation-delay: 0s;
}

[data-skeleton="2"] .skeleton-screen-wrapper {
	animation-delay: 1.8s;
}

[data-skeleton="3"] .skeleton-curriculum-screen {
	animation: continuousFrameFloat 6s ease-in-out infinite alternate 3.6s;
}

@keyframes continuousFrameFloat {
	0% {
		transform: translateY(0px) scale(1);
	}
	50% {
		transform: translateY(-6px) scale(1.015);
	}
	100% {
		transform: translateY(0px) scale(1);
	}
}

.skeleton-feature-card:hover .skeleton-screen-wrapper {
	transform: translateY(-8px) scale(1.03);
}

.skeleton-window-header {
	background: rgba(248, 250, 252, 0.85);
	border-bottom: 1px solid rgba(226, 232, 240, 0.8);
	padding: 7px 10px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.window-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.window-dot.dot-red { background: #ef4444; }
.window-dot.dot-yellow { background: #f59e0b; }
.window-dot.dot-green { background: #10b981; }

.window-title-tag {
	margin-left: 4px;
	font-family: var(--font-mono, monospace);
	font-size: 10px;
	color: #64748b;
	font-weight: 600;
}

.window-live-pill {
	margin-left: auto;
	font-size: 9.5px;
	font-weight: 700;
	color: #059669;
	background: #ecfdf5;
	border: 1px solid rgba(16, 185, 129, 0.25);
	border-radius: 999px;
	padding: 1px 7px;
}

.skeleton-window-body {
	padding: 12px 14px;
	position: relative;
}

/* SKELETON 1: Mindmap Node Graph Motion */
.logic-node-branch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.node-item {
	padding: 5px 11px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease;
}

.node-root {
	background: #eff6ff;
	color: #12499A;
	border-color: rgba(18, 73, 154, 0.25);
	animation: pulseNodeRoot 3.2s ease-in-out infinite alternate;
}

@keyframes pulseNodeRoot {
	0% { transform: scale(1) translateY(0); box-shadow: 0 0 0 0 rgba(18, 73, 154, 0.15); }
	50% { transform: scale(1.03) translateY(-1px); box-shadow: 0 0 0 5px rgba(18, 73, 154, 0); }
	100% { transform: scale(1) translateY(0); }
}

.logic-connector-line {
	width: 1.5px;
	height: 10px;
	background: linear-gradient(180deg, #12499A 0%, #cbd5e1 100%);
	animation: lineGlowFlow 2.8s ease-in-out infinite alternate;
}

@keyframes lineGlowFlow {
	0% { opacity: 0.6; height: 9px; }
	100% { opacity: 1; height: 12px; }
}

.node-children-row {
	display: flex;
	gap: 8px;
	width: 100%;
	justify-content: center;
}

.node-child {
	font-size: 10px;
	color: #334155;
	padding: 4px 8px;
}

.node-child.child-a {
	animation: floatNodeLeft 3.6s ease-in-out infinite alternate;
}

.node-child.child-b {
	animation: floatNodeRight 3.6s ease-in-out infinite alternate 0.6s;
}

@keyframes floatNodeLeft {
	0% { transform: translateY(0) translateX(0); }
	100% { transform: translateY(-2px) translateX(-2px); }
}

@keyframes floatNodeRight {
	0% { transform: translateY(0) translateX(0); }
	100% { transform: translateY(-2px) translateX(2px); }
}

.node-indicator {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #F99D1C;
	animation: blinkIndicator 2s ease-in-out infinite alternate;
}

.node-child.child-b .node-indicator {
	background: #10b981;
	animation: blinkIndicator 2.4s ease-in-out infinite alternate 0.5s;
}

@keyframes blinkIndicator {
	0% { opacity: 0.5; transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1.3); }
}

.skeleton-floating-pill {
	position: absolute;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 9.5px;
	font-weight: 700;
	color: #12499A;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	animation: floatPillMicro 3.4s ease-in-out infinite alternate;
}

.pill-bottom-right {
	bottom: -4px;
	right: 8px;
}

.pill-dot-active {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	animation: pulseDotLive 1.8s ease-in-out infinite;
}

@keyframes pulseDotLive {
	0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
	70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
	100% { transform: scale(0.9); }
}

@keyframes floatPillMicro {
	0% { transform: translateY(0) scale(1); }
	100% { transform: translateY(-4px) scale(1.02); }
}

/* SKELETON 2: Student Progress Bars */
.student-mini-profile {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	animation: profileSway 4s ease-in-out infinite alternate;
}

@keyframes profileSway {
	0% { transform: translateX(0); }
	100% { transform: translateX(2px); }
}

.student-avatar-badge {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #12499A;
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: avatarGentlePulse 3s ease-in-out infinite alternate;
}

@keyframes avatarGentlePulse {
	0% { transform: scale(1); }
	100% { transform: scale(1.08); }
}

.student-meta {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.student-meta strong {
	font-size: 11px;
	color: #0f172a;
	line-height: 1.2;
}

.student-meta span {
	font-size: 9px;
	color: #64748b;
}

.student-grade-chip {
	font-size: 12px;
	font-weight: 800;
	color: #12499A;
	background: #eff6ff;
	padding: 2px 7px;
	border-radius: 6px;
	border: 1px solid rgba(18, 73, 154, 0.15);
	animation: chipGlow 2.5s ease-in-out infinite alternate;
}

@keyframes chipGlow {
	0% { background: #eff6ff; transform: scale(1); }
	100% { background: #dbeafe; transform: scale(1.05); }
}

.skeleton-metric-bars {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 8px;
}

.metric-track-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.metric-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 600;
	color: #334155;
}

.metric-labels strong {
	color: #12499A;
}

.metric-progress-bg {
	height: 5px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.metric-progress-bar {
	height: 100%;
	border-radius: 999px;
}

.metric-progress-bar.fill-blue {
	background: linear-gradient(90deg, #12499A, #2563eb);
	animation: barBreathBlue 4.5s ease-in-out infinite alternate;
}

.metric-progress-bar.fill-amber {
	background: linear-gradient(90deg, #F99D1C, #fbbf24);
	animation: barBreathAmber 4.5s ease-in-out infinite alternate 0.8s;
}

@keyframes barBreathBlue {
	0% { width: 92%; }
	50% { width: 99%; }
	100% { width: 95%; }
}

@keyframes barBreathAmber {
	0% { width: 90%; }
	50% { width: 97%; }
	100% { width: 93%; }
}

.skeleton-badge-pill-inline {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 9.5px;
	font-weight: 600;
	color: #047857;
	background: #ecfdf5;
	border: 1px solid rgba(16, 185, 129, 0.2);
	border-radius: 6px;
	padding: 4px 8px;
	animation: badgePillBreath 3.2s ease-in-out infinite alternate;
}

@keyframes badgePillBreath {
	0% { transform: translateY(0); }
	100% { transform: translateY(-2px); }
}

.window-live-pill {
	margin-left: auto;
	font-size: 9.5px;
	font-weight: 700;
	color: #059669;
	background: #ecfdf5;
	border: 1px solid rgba(16, 185, 129, 0.25);
	border-radius: 999px;
	padding: 1px 7px;
	animation: livePillPulse 2s ease-in-out infinite alternate;
}

@keyframes livePillPulse {
	0% { opacity: 0.8; }
	100% { opacity: 1; transform: scale(1.05); }
}

/* SKELETON 3: Curriculum Book Stack */
.skeleton-curriculum-screen {
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.skeleton-book-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px;
}

.floating-curriculum-chip {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 12px;
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
	transition: transform 0.3s ease;
}

.chip-cambridge {
	animation: floatChipCambridge 4.5s ease-in-out infinite alternate;
}

.chip-vinschool {
	animation: floatChipVinschool 4.5s ease-in-out infinite alternate 1.5s;
}

@keyframes floatChipCambridge {
	0% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-4px) rotate(-0.5deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

@keyframes floatChipVinschool {
	0% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-5px) rotate(0.6deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

.chip-icon-box {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #eff6ff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.floating-curriculum-chip:hover .chip-icon-box {
	transform: scale(1.1) rotate(5deg);
}

.chip-icon-box.accent-box {
	background: #fffbeb;
}

.chip-info {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.chip-info strong {
	font-size: 11px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
}

.chip-info span {
	font-size: 9.5px;
	color: #64748b;
}

/* Bottom Content Block */
.skeleton-content-block {
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: #ffffff;
}

.skeleton-category-tag {
	font-size: 11px;
	font-weight: 800;
	color: #F99D1C;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.skeleton-card-title {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px 0;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.skeleton-card-desc {
	font-family: var(--font-sub);
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.skeleton-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	border-top: 1px solid #f1f5f9;
	padding-top: 14px;
}

.skeleton-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-sub);
	font-size: 12.5px;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.45;
}

.skeleton-feature-list li svg {
	flex-shrink: 0;
	margin-top: 2px;
}

/* Responsive Grid */
@media (max-width: 991px) {
	.academic-skeletons-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.skeleton-visual-stage {
		height: 220px;
	}
}

/* ========================================================
   SECTION ĐÁNH GIÁ HỌC VIÊN & PHỤ HUYNH
======================================================== */
.bs-testimonial-section {
	padding: 45px 0 60px;
	background-color: #ffffff;
}

.testimonial-banner-wrapper {
	background: linear-gradient(135deg, #0d3f8f 0%, #12499A 48%, #1860c9 100%);
	border-radius: 22px;
	padding: 15px 40px;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 36px;
	align-items: center;
	min-height: 460px;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Faint Grid Background Overlay (Lưới mờ trang nhã phía sau) */
.testimonial-banner-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}

/* Aceternity UI: Shooting Stars & Star Background Layer */
.shooting-stars-background-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	border-radius: inherit;
}

.stars-canvas,
.shooting-stars-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Left text column */
.testimonial-left-col {
	z-index: 2;
	position: relative;
}

.testimonial-heading {
	font-size: 30px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.25;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}

.testimonial-heading .highlight-accent {
	color: #FFAE33;
	background: linear-gradient(135deg, #FFE099 0%, #FFAE33 55%, #F99D1C 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.testimonial-heading .highlight-accent::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
	height: 4px;
	background: rgba(249, 157, 28, 0.45);
	border-radius: 4px;
	z-index: -1;
}

.testimonial-subtext {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	max-width: 380px;
	margin-bottom: 20px;
}

.testimonial-btn-wrap {
	margin-top: 4px;
}

.testimonial-cta-btn.btn-star-glow-accent,
.btn-star-glow.btn-star-glow-accent {
	background: linear-gradient(135deg, #F99D1C 0%, #f59e0b 50%, #d97706 100%);
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(249, 157, 28, 0.35);
}

.testimonial-cta-btn.btn-star-glow-accent:hover,
.btn-star-glow.btn-star-glow-accent:hover {
	background: linear-gradient(135deg, #e67e22 0%, #F99D1C 50%, #f59e0b 100%);
	border-color: rgba(255, 255, 255, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(249, 157, 28, 0.45);
}

.testimonial-cta-btn.btn-star-glow-accent .btn-star-glow-inner {
	padding: 9px 20px 9px 13px;
	font-size: 13.5px;
	font-weight: 700;
	gap: 8px;
}

.testimonial-cta-btn.btn-star-glow-accent .btn-star-icon-wrap svg polygon {
	fill: #ffffff;
	stroke: #ffffff;
}

.testimonial-cta-btn.btn-star-glow-accent .btn-star-glow-arrow,
.btn-star-glow.btn-star-glow-accent .btn-star-glow-arrow {
	color: #ffffff !important;
	stroke: #ffffff !important;
	margin-left: 2px;
}

.testimonial-cta-btn.btn-star-glow-accent:hover .btn-star-icon-wrap {
	transform: scale(1.22) rotate(360deg);
}

.testimonial-cta-btn.btn-star-glow-accent:hover .btn-star-glow-arrow {
	transform: translateX(4px);
}

/* Right scrolling marquee wall */
.testimonial-right-col {
	position: relative;
	z-index: 2;
	height: 480px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	/* Smooth subtle gradient fade mask matching the 15px top/bottom padding */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%);
}

.marquee-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.marquee-col-1 {
	animation: scrollUp 28s linear infinite;
}

.marquee-col-2 {
	animation: scrollDown 32s linear infinite;
}

.testimonial-right-col:hover .marquee-col-1,
.testimonial-right-col:hover .marquee-col-2 {
	animation-play-state: paused;
}

/* Review Card */
.review-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 13px 15px;
	color: var(--text-body);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	transition: var(--transition-smooth);
	border: 1px solid #e2e8f0;
}

.review-card:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

.review-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.review-avatar-text,
.review-avatar-img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.1);
	flex-shrink: 0;
}

.review-avatar-text {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e0edff;
	color: var(--color-primary);
	font-weight: 800;
	font-size: 13px;
}

.review-user-name {
	font-size: 13px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
	white-space: nowrap;
}

.review-user-tag {
	font-size: 10.5px;
	color: var(--color-primary);
	font-weight: 700;
	margin-top: 1px;
}

.review-content {
	font-size: 12px;
	line-height: 1.5;
	color: #334155;
	margin-bottom: 8px;
	text-wrap: pretty;
}

.review-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f1f5f9;
	padding-top: 8px;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
}

.review-rating {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #0f172a;
}

.review-rating .star {
	color: var(--color-accent); /* #F99D1C */
	font-size: 14px;
}

.review-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #059669;
	background: #ecfdf5;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid #d1fae5;
}

.review-likes {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--color-primary);
}

@keyframes scrollUp {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}

@keyframes scrollDown {
	0% {
		transform: translateY(-50%);
	}
	100% {
		transform: translateY(0);
	}
}

@media (max-width: 992px) {
	.testimonial-banner-wrapper {
		grid-template-columns: 1fr;
		padding: 30px 20px;
		min-height: auto;
	}

	.testimonial-heading {
		font-size: 25px;
	}

	.testimonial-right-col {
		height: 380px;
	}
}

@media (max-width: 640px) {
	.testimonial-right-col {
		grid-template-columns: 1fr;
		height: 360px;
	}
	.marquee-col-2 {
		display: none;
	}
}

/* ========================================================
   SECTION LỘ TRÌNH HỌC THUẬT TOÀN CẦU (ICANFIELD STYLE)
======================================================== */
.global-pathway-section {
	position: relative;
	padding: 50px 0 90px;
	background-color: #ffffff;
}

.global-pathway-wrapper {
	position: relative;
	background-color: #ffffff;
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: 0 12px 36px rgba(18, 73, 154, 0.06);
	min-height: 620px;
	display: flex;
	align-items: center;
}

/* Background scene on left */
.pathway-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/about-bg.webp');
	background-size: cover;
	background-position: left center;
	z-index: 1;
	opacity: 0.95;
}

/* Subtle white gradient overlay fading towards the right */
.pathway-overlay-fade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.95) 50%, #ffffff 68%);
	z-index: 2;
}

/* Content Container on Right */
.pathway-content-container {
	position: relative;
	z-index: 3;
	width: 100%;
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	padding: 60px 60px 50px;
}

.pathway-empty-col {
	pointer-events: none;
}

.pathway-info-col {
	padding-left: 20px;
}

.pathway-heading {
	font-size: 40px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.pathway-heading .brand-highlight {
	color: var(--color-primary); /* #12499A */
}

.pathway-desc {
	font-size: 15.5px;
	color: var(--text-muted);
	line-height: 1.65;
	margin-bottom: 36px;
	max-width: 560px;
}

/* 4-Stat Grid */
.pathway-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 40px;
	max-width: 540px;
}

.pathway-stat-item {
	display: flex;
	flex-direction: column;
}

.stat-num-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.stat-big-num {
	font-size: 44px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1;
	letter-spacing: -0.02em;
}

.stat-label-tag {
	font-size: 11px;
	font-weight: 800;
	color: var(--color-primary); /* #12499A */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

.stat-item-desc {
	font-size: 13.5px;
	color: var(--text-body);
	line-height: 1.45;
}

/* Happy Family Image anchored at bottom right */
.pathway-family-img {
	position: absolute;
	right: 40px;
	bottom: 0;
	max-height: 310px;
	width: auto;
	z-index: 4;
	pointer-events: none;
	filter: drop-shadow(0 10px 24px rgba(18, 73, 154, 0.12));
	transition: var(--transition-smooth);
}

@media (max-width: 1200px) {
	.pathway-content-container {
		grid-template-columns: 0.6fr 1.4fr;
		padding: 40px;
	}
	.pathway-family-img {
		max-height: 250px;
		right: 20px;
	}
}

@media (max-width: 992px) {
	.global-pathway-wrapper {
		min-height: auto;
	}
	.pathway-overlay-fade {
		background: rgba(255, 255, 255, 0.94);
	}
	.pathway-content-container {
		grid-template-columns: 1fr;
		padding: 40px 24px;
	}
	.pathway-info-col {
		padding-left: 0;
	}
	.pathway-family-img {
		position: static;
		margin: 30px auto 0;
		max-height: 230px;
		display: block;
	}
}

@media (max-width: 640px) {
	.pathway-heading {
		font-size: 30px;
	}
	.pathway-stats-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.stat-big-num {
		font-size: 36px;
	}
}

/* ========================================================
   SECTION KHÁM PHÁ HÀNH TRÌNH QUỐC TẾ (ICANFIELD CONTACT)
======================================================== */
.ican-contact-section {
	position: relative;
	padding: 85px 0 90px;
	background-color: #ffffff;
	background-image: radial-gradient(circle, rgba(18, 73, 154, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	scroll-margin-top: 80px;
}

/* Header & Trust Bar */
.contact-header-center {
	max-width: 860px;
	margin: 0 auto 36px;
	text-align: center;
}

.contact-header-center .section-title {
	margin-bottom: 12px;
}

.contact-social-proof-wrap {
	position: relative;
	display: inline-block;
	margin-top: 18px;
	margin-bottom: 54px;
}

.contact-social-proof {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 5px 18px 5px 8px;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.04);
}

/* Mũi tên cong trỏ từ huy hiệu xuống dưới phía Form */
.proof-lead-pointer {
	position: absolute;
	top: calc(100% + 8px);
	right: -105px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	pointer-events: none;
	user-select: none;
	z-index: 5;
}

.pointer-note-text {
	font-family: var(--font-accent, 'Fuzzy Bubbles', cursive);
	font-size: 13.5px;
	font-weight: 700;
	color: #d97706;
	background: #fffbeb;
	padding: 5px 16px;
	border-radius: 999px;
	border: 1px dashed rgba(249, 157, 28, 0.5);
	white-space: nowrap;
	transform: rotate(3deg);
	margin-bottom: 0px;
	box-shadow: 0 2px 8px rgba(249, 157, 28, 0.08);
}

.pointer-curved-arrow {
	width: 90px;
	height: 48px;
	margin-right: 32px;
	filter: drop-shadow(0 2px 4px rgba(249, 157, 28, 0.15));
}

@media (max-width: 991px) {
	.proof-lead-pointer {
		display: none;
	}
}

.social-proof-avatars {
	display: flex;
	align-items: center;
}

.proof-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	margin-left: -8px;
	object-fit: cover;
	display: block;
}

.proof-avatar:first-child {
	margin-left: 0;
}

.social-proof-text {
	font-size: 13px;
	color: #475569;
	font-weight: 500;
	text-wrap: balance;
}

.proof-highlight {
	font-weight: 700;
	color: #12499A;
}

/* Doodle Pointer: Trỏ từ trên xuống bên cạnh Form (Phía trên góc phải của form) */
.form-side-doodle {
	position: absolute;
	top: -54px;
	right: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 5;
	pointer-events: none;
	user-select: none;
}

.form-side-doodle .doodle-curved-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	background: rgba(255, 107, 129, 0.12);
	border: 1px solid rgba(255, 107, 129, 0.25);
	border-radius: 999px;
	font-family: var(--font-accent, 'Fuzzy Bubbles', cursive);
	font-size: 13px;
	font-weight: 700;
	color: #be185d;
	transform: rotate(3deg);
	margin-bottom: 2px;
	box-shadow: 0 2px 8px rgba(255, 107, 129, 0.10);
	transition: transform 0.25s ease;
	white-space: nowrap;
}

.modern-form-card:hover .doodle-curved-tag {
	transform: rotate(1deg) scale(1.05);
}

.doodle-heart-icon {
	flex-shrink: 0;
}

.doodle-text {
	line-height: 1;
	letter-spacing: 0.02em;
}

.doodle-arrow-down {
	width: 28px;
	height: 44px;
	color: #94a3b8;
	margin-top: 2px;
	animation: arrowBobDown 2s ease-in-out infinite;
	transition: color 0.25s ease;
}

.modern-form-card:hover .doodle-arrow-down {
	color: #F99D1C;
}

@keyframes arrowBobDown {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}

/* DOL Style Unified Channels Card (Đặt dưới section form) */
.dol-channels-card {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
	margin: 36px auto 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 24px 0;
	box-shadow: none;
}

.dol-channel-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	padding: 0 20px;
	position: relative;
	transition: transform 0.2s ease;
}

.dol-channel-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background-color: #e2e8f0;
}

.dol-channel-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dol-channel-icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	display: block;
}

.dol-channel-item:hover .dol-channel-icon {
	transform: scale(1.12);
}

.dol-channel-title {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
	transition: color 0.2s ease;
}

.dol-channel-item:hover .dol-channel-title {
	color: #12499A;
}

.dol-channel-desc {
	font-size: 13px;
	color: #475569;
	font-weight: 500;
	line-height: 1.45;
	margin: 0;
	white-space: nowrap;
}

/* Split 2-Column Section (Hình 2 Execora Inspiration) - Single Unified Block */
.execora-contact-split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 0;
	align-items: stretch;
	margin-top: 36px;
	background: #ffffff;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 30px rgba(18, 73, 154, 0.05);
	overflow: hidden;
}

/* Left Column: Visual Counselor Photo */
.counselor-visual-card {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	min-height: 560px;
	height: 100%;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: #f1f5f9;
}

.counselor-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	display: block;
	border: none;
	outline: none;
	transition: transform 0.5s ease;
}

.counselor-blue-overlay {
	position: absolute;
	inset: 0;
	background: 
		linear-gradient(to right, transparent 65%, rgba(255, 255, 255, 0.45) 82%, rgba(255, 255, 255, 0.92) 96%, #ffffff 100%),
		linear-gradient(180deg, rgba(18, 73, 154, 0) 0%, rgba(18, 73, 154, 0.05) 45%, rgba(14, 58, 122, 0.52) 100%);
	z-index: 2;
	pointer-events: none;
}

.counselor-visual-card:hover .counselor-bg-img {
	transform: scale(1.02);
}

/* Floating Trigger Pill at bottom of counselor card (Default visible) */
.counselor-trigger-pill {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.12);
	color: #12499A;
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.trigger-pulse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #F99D1C;
	box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.6);
	animation: pulseDot 2s infinite;
	flex-shrink: 0;
}

@keyframes pulseDot {
	0% {
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.6);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(249, 157, 28, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0);
	}
}

.trigger-chevron {
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

/* Floating Overlay Banner at Bottom (Hidden by default, slides up on hover to reveal full photo) */
.counselor-overlay-banner {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 4;
	margin: 14px;
	padding: 22px 20px 20px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 1rem;
	border: none !important;
	box-shadow: 0 12px 32px rgba(14, 58, 122, 0.18);
	transform: translateY(calc(100% + 20px));
	opacity: 0;
	pointer-events: none;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* On hover of counselor card: Reveal full banner smoothly and hide trigger pill */
.counselor-visual-card:hover .counselor-overlay-banner,
.counselor-visual-card:focus-within .counselor-overlay-banner {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.counselor-visual-card:hover .counselor-trigger-pill {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.counselor-overlay-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 6px;
}

.counselor-overlay-desc {
	font-size: 13px;
	color: #475569;
	line-height: 1.55;
	margin-bottom: 16px;
}

/* Synchronized Unified Buttons (Hình 3) */
.btn-sync-unified {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	min-height: 48px;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%);
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-pill);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, border-color 0.22s ease;
	white-space: nowrap;
}

.btn-sync-unified span {
	white-space: nowrap;
}

.btn-sync-unified:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: none !important;
	color: #ffffff !important;
}

/* Emil Kowalski Button Tactile Active Press Feedback */
.btn-sync-unified:active,
.btn-star-glow:active,
.bs-hero-cta:active,
.course-card-btn:active,
.bs-prefooter-btn:active,
.bridge-cta-btn:active,
.consult-submit-btn:active {
	transform: translateY(0px) scale(0.97) !important;
	transition: transform 0.1s ease !important;
}

.btn-sync-unified .btn-star-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transform-origin: center center;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sync-unified .btn-star-icon-wrap svg {
	width: 16px;
	height: 16px;
	display: block;
	transform-origin: center center;
}

.btn-sync-unified:hover .btn-star-icon-wrap {
	transform: scale(1.22) rotate(360deg);
}

.btn-sync-unified .btn-arrow-icon {
	color: #F99D1C;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.btn-sync-unified:hover .btn-arrow-icon {
	transform: translateX(4px);
}

/* Right Column: Modern Form Card */
.modern-form-card {
	position: relative;
	background: #ffffff;
	border-radius: 0;
	padding: 38px 42px 32px;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.form-card-header {
	margin-bottom: 20px;
}

.form-card-title {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.01em;
	margin: 0;
}

.modern-lead-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.form-field-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.form-field-label {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}

.required-star {
	color: #ef4444;
	margin-left: 2px;
}

.form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.form-input-box {
	position: relative;
	display: flex;
	align-items: center;
}

.form-input-box .input-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

.modern-input {
	width: 100%;
	padding: 10px 14px 10px 38px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	color: #0f172a;
	transition: all 0.2s ease;
	outline: none;
}

.modern-input:focus {
	background: #ffffff;
	border-color: #12499A;
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.10);
}

.modern-input.no-icon {
	padding-left: 14px;
}

.modern-select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.modern-textarea {
	width: 100%;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	color: #0f172a;
	min-height: 80px;
	resize: vertical;
	outline: none;
	transition: all 0.2s ease;
}

.modern-textarea:focus {
	background: #ffffff;
	border-color: #12499A;
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.10);
}

.form-submit-row {
	margin-top: 4px;
}

.form-privacy-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: #64748b;
	text-align: center;
	margin-top: 10px;
	line-height: 1.4;
}

.privacy-tick-icon {
	flex-shrink: 0;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
	.form-side-doodle {
		display: none;
	}

	.execora-contact-split {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.counselor-visual-card {
		min-height: 420px;
		border-right: none;
		border-bottom: 1px solid #e2e8f0;
	}

	.dol-channels-card {
		grid-template-columns: 1fr;
		padding: 16px;
		gap: 16px;
	}

	.dol-channel-item:not(:last-child)::after {
		display: none;
	}

	.dol-channel-item:not(:last-child) {
		border-bottom: 1px solid #f1f5f9;
		padding-bottom: 16px;
	}
}

@media (max-width: 640px) {
	.modern-form-card {
		padding: 24px 20px 20px;
	}
	.form-grid-2 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.contact-social-proof {
		flex-direction: column;
		border-radius: 16px;
		padding: 10px 14px;
	}
}



/* ========================================================
   SECTION ĐIỂM HỘI TỤ DÒNG CHẢY TIN TỨC (ICANFIELD NEWS)
======================================================== */
/* ========================================================
   SECTION SỰ KIỆN & CẨM NANG HỌC THUẬT (BLUE STAR)
======================================================== */
.ican-news-section {
	padding: 20px 0 85px;
	background: #ffffff;
	position: relative;
}

.news-section-header {
	margin-bottom: 36px;
}

/* Top 2 Event Cards (Hình 2) */
.featured-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 40px;
}

@media (max-width: 1024px) {
	.featured-news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.featured-news-grid {
		grid-template-columns: 1fr;
	}
}

.featured-news-card {
	position: relative;
	height: 380px;
	border-radius: 1rem; /* Giữ chuẩn border-radius 1rem (16px) */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Đẩy khối blur panel xuống đáy thẻ */
	color: #ffffff;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.08);
	background: #0f172a;
}

.featured-news-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(18, 73, 154, 0.18);
}

.featured-news-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-news-card:hover .featured-news-bg {
	transform: scale(1.07);
}

/* Frosted Glass Blur Panel ở đáy thẻ (Chuẩn mẫu blur nhưng vẫn border radius 1rem) */
.featured-news-blur-panel {
	position: relative;
	z-index: 3;
	padding: 22px 24px 24px;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(10, 15, 28, 0.78) 45%, rgba(5, 10, 20, 0.94) 100%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: background 0.35s ease;
}

.featured-news-card:hover .featured-news-blur-panel {
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(10, 15, 28, 0.86) 45%, rgba(5, 10, 20, 0.98) 100%);
}

.featured-news-heading {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #ffffff;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.featured-news-date {
	font-size: 13.5px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
	display: block;
	margin: 2px 0 10px;
	letter-spacing: 0.01em;
}

.featured-news-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #ffffff;
	transition: color 0.25s ease;
}

.featured-news-action .btn-arrow-icon {
	color: currentColor;
	transition: transform 0.25s ease;
}

.featured-news-card:hover .featured-news-action {
	color: var(--color-accent, #F99D1C);
}

.featured-news-card:hover .featured-news-action .btn-arrow-icon {
	transform: translateX(5px);
}

/* Category Filter Tabs Bar (Thanh line ngang chuẩn phong cách iCanfield) */
.news-category-tabs-bar {
	position: relative;
	border-bottom: 1px solid #e2e8f0;
	margin: 0 0 32px;
}

.news-category-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0;
}

.news-category-tabs::-webkit-scrollbar {
	display: none;
}

.cat-tab-btn {
	background: transparent;
	border: none;
	padding: 6px 2px 14px;
	margin-bottom: -1px;
	font-family: var(--font-primary, inherit);
	font-size: 14.5px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color 0.2s ease;
}

.cat-tab-btn:hover {
	color: #12499A;
}

.cat-tab-btn.active {
	color: #12499A;
	font-weight: 700;
}

.cat-tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2.5px;
	background: #12499A;
	border-radius: 2px 2px 0 0;
}

/* Bottom News Row */
.news-bottom-row {
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 36px;
	align-items: center;
}

.news-bottom-title {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin-bottom: 8px;
}

.news-bottom-desc {
	font-size: 13.5px;
	color: #64748b;
	margin-bottom: 22px;
	line-height: 1.55;
}

.news-bottom-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-news-all {
	padding: 10px 22px;
	font-size: 13.5px;
	min-height: 44px;
	width: auto;
	display: inline-flex;
}

.news-nav-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.news-nav-controls.news-nav-top {
	margin-bottom: 16px;
}

.btn-nav-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-nav-arrow:hover {
	border-color: #12499A;
	background: #12499A;
	color: #ffffff;
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.2);
}

/* Bottom Direct Channels Section (Floating Bridge kết nối nửa trên Album - nửa trên Footer) */
.bottom-channels-section {
	padding: 0;
	margin-top: -55px;
	margin-bottom: -55px;
	background-color: transparent;
	position: relative;
	z-index: 25;
}

.bottom-channels-section .dol-channels-card {
	margin: 0 auto;
	position: relative;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	box-shadow: none;
	overflow: visible;
	padding: 16px 20px;
	transition: none;
}

/* Remove hover from the whole outer card */
.bottom-channels-section .dol-channels-card:hover {
	transform: none;
	border-color: #e2e8f0;
	box-shadow: none;
}

/* Top accent line removed as requested */
.bottom-channels-section .dol-channels-card::before {
	display: none;
}

/* Phân cách giữa các ô bằng đường line thanh lịch */
.bottom-channels-section .dol-channel-item {
	padding: 14px 20px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-channels-section .dol-channel-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: #e2e8f0;
	display: block;
}

.bottom-channels-section .dol-channel-item:hover {
	border-color: #12499A;
	background: #f8fafc;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.06);
}

.bottom-channels-section .dol-channel-item:hover .dol-channel-icon {
	transform: scale(1.12) translateY(-2px);
}

.bottom-channels-section .dol-channel-item:hover .dol-channel-title {
	color: #12499A;
}

/* News Cards Carousel Slider Track */
.news-slider-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.news-cards-grid {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 14px;
}

.news-cards-grid::-webkit-scrollbar {
	display: none;
}

.sub-news-card {
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 250px;
	scroll-snap-align: start;
	background: transparent;
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 0.25s ease;
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.sub-news-card:hover {
	transform: translateY(-4px);
}

.sub-news-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 1rem;
	overflow: hidden;
	background: #f1f5f9;
}

.sub-news-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sub-news-card:hover .sub-news-thumb {
	transform: scale(1.06);
}

.sub-news-body {
	padding: 12px 2px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sub-news-title {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.45;
	margin: 0;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sub-news-card:hover .sub-news-title {
	color: #12499A;
}

.sub-news-date {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
	display: block;
}

@media (max-width: 992px) {
	.featured-news-grid {
		grid-template-columns: 1fr;
	}
	.featured-news-heading {
		max-width: 65%;
	}
	.news-bottom-row {
		grid-template-columns: 1fr;
	}
	.sub-news-card {
		flex: 0 0 calc((100% - 20px) / 2);
	}
}

@media (max-width: 640px) {
	.ican-news-section {
		padding: 16px 0 60px;
	}
	.news-category-tabs-bar {
		margin: 0 0 24px;
	}
	.featured-news-heading {
		max-width: 85%;
		font-size: 16px;
	}
	.sub-news-card {
		flex: 0 0 85%;
	}
	.news-bottom-actions {
		flex-direction: row;
	}
}

/* ========================================================
   MODERN FULL-WIDTH FOOTER (SUPERPOWER STYLE)
======================================================== */
.site-footer {
	background-color: #ffffff;
	border-top: none;
	padding: 95px 0 40px;
	position: relative;
	width: 100%;
}

.footer-fullwidth-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
}

.footer-main-grid {
	display: grid;
	grid-template-columns: 440px 1fr;
	gap: 72px;
	align-items: start;
}

/* Left Brand & Newsletter Pane */
.footer-brand-pane {
	display: flex;
	flex-direction: column;
}

.footer-logo-wrap {
	display: inline-block;
	margin-bottom: 22px;
	text-decoration: none;
}

.footer-logo-img {
	height: 88px;
	width: auto;
	max-width: 360px;
	display: block;
	object-fit: contain;
}

.footer-hook-text {
	font-size: 14px;
	line-height: 1.65;
	color: #475569;
	margin-bottom: 24px;
	max-width: 380px;
}

.footer-hook-text strong {
	color: #0f172a;
	font-weight: 700;
}

/* Newsletter Input Pill */
.footer-subscribe-form {
	margin-bottom: 28px;
	width: 100%;
	max-width: 350px;
}

.footer-input-pill {
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 4px 5px 4px 18px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-input-pill:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.1);
}

.footer-email-input {
	border: none;
	outline: none;
	background: transparent;
	font-size: 13.5px;
	color: #0f172a;
	flex-grow: 1;
	min-width: 0;
	font-family: inherit;
}

.footer-email-input::placeholder {
	color: #94a3b8;
}

.footer-submit-btn {
	background: #0f172a;
	color: #ffffff;
	border: none;
	outline: none;
	border-radius: 999px;
	padding: 9px 22px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	font-family: inherit;
}

.footer-submit-btn:hover {
	background: var(--color-primary);
}

.footer-submit-btn:active {
	transform: scale(0.98);
}

/* QR Code & App Store Box */
.footer-app-box {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.footer-qr-card {
	width: 72px;
	height: 72px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 6px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
	flex-shrink: 0;
}

.footer-qr-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.app-store-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 8px 16px;
	text-decoration: none;
	color: #0f172a;
	transition: all 0.2s ease;
}

.app-store-pill-btn:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
	transform: translateY(-1px);
}

.apple-svg-icon {
	width: 22px;
	height: 22px;
	color: #0f172a;
	flex-shrink: 0;
}

.app-store-text {
	display: flex;
	flex-direction: column;
}

.app-store-sub {
	font-size: 9px;
	line-height: 1;
	color: #64748b;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.app-store-main {
	font-size: 14px;
	line-height: 1.25;
	color: #0f172a;
	font-weight: 800;
}

/* Ask AI Section */
.footer-ai-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-ai-label {
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
}

.footer-ai-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ai-pill-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #475569;
	background: #ffffff;
	transition: all 0.2s ease;
	text-decoration: none;
}

.ai-pill-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: #eff6ff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.08);
}

.ai-icon {
	width: 17px;
	height: 17px;
}

/* Right Navigation Columns */
.footer-nav-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.footer-col-group {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.footer-link-block {
	display: flex;
	flex-direction: column;
}

.footer-block-heading {
	font-size: 12.5px;
	font-weight: 700;
	color: #94a3b8;
	margin-bottom: 14px;
	letter-spacing: 0.01em;
}

.footer-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-link-list li a {
	color: #334155;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
	line-height: 1.4;
}

.footer-link-list li a:hover {
	color: var(--color-primary);
}

/* Social List */
.footer-social-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-social-list li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #334155;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-social-list li a:hover {
	color: var(--color-primary);
}

.social-svg-icon,
.social-fa-icon {
	font-size: 15px;
	width: 16px;
	height: 16px;
	color: #64748b;
	flex-shrink: 0;
	transition: color 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.footer-social-list li a:hover .social-svg-icon,
.footer-social-list li a:hover .social-fa-icon {
	color: var(--color-primary);
}

/* Bottom Bar */
.footer-bottom-bar {
	margin-top: 52px;
	padding-top: 28px;
	border-top: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 12px;
	color: #64748b;
	flex-wrap: wrap;
}

.footer-copyright {
	margin: 0;
	color: #64748b;
	font-size: 12px;
}

.footer-legal-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-legal-links li a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-legal-links li a:hover {
	color: var(--color-primary);
}

.footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-cert-label {
	font-size: 11.5px;
	color: #64748b;
}

.footer-cert-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 800;
	color: #334155;
	letter-spacing: 0.05em;
}

.cert-svg-icon,
.cert-fa-icon {
	font-size: 13px;
	color: var(--color-primary);
}

/* Responsive */
@media (max-width: 1100px) {
	.footer-main-grid {
		grid-template-columns: 320px 1fr;
		gap: 40px;
	}
	.footer-nav-columns {
		gap: 24px;
	}
}

@media (max-width: 992px) {
	.site-footer {
		padding: 40px 0 32px;
	}
	.footer-fullwidth-wrap {
		padding: 0 20px;
	}
	.footer-main-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.footer-hook-text {
		max-width: 100%;
	}
	.footer-subscribe-form {
		max-width: 100%;
	}
	.footer-nav-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.footer-bottom-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 36px;
		padding-top: 24px;
	}
	.footer-legal-links {
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.footer-nav-columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.footer-legal-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}


/* ========================================================
   SECTION: STORYTELLING (THẤU HIỂU NỖI LÒNG CHA MẸ)
======================================================== */
.storytelling-section {
	padding: 90px 0 80px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	position: relative;
}

.story-comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 48px;
}

.story-card {
	background: #ffffff;
	border-radius: var(--radius-card);
	padding: 36px 32px;
	box-shadow: var(--shadow-card);
	transition: var(--transition-smooth);
	position: relative;
	display: flex;
	flex-direction: column;
}

.story-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.story-card-before {
	border: 1px solid #fed7aa;
	background: linear-gradient(180deg, #fffbf7 0%, #ffffff 100%);
}

.story-card-after {
	border: 1.5px solid #bfdbfe;
	background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.story-card-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 20px;
	align-self: flex-start;
}

.story-card-badge.badge-warning {
	background: #ffedd5;
	color: #c2410c;
}

.story-card-badge.badge-success {
	background: #e0f2fe;
	color: #0369a1;
}

.story-card-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--text-title);
	margin-bottom: 24px;
	line-height: 1.4;
}

.story-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.story-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--font-sub);
	font-size: 14.5px;
	line-height: 1.6;
	color: #334155;
}

.story-bullet {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 2px;
}

.bullet-before {
	background: #fee2e2;
	color: #ef4444;
}

.bullet-after {
	background: #dbeafe;
	color: #12499A;
}

.story-banner-cta {
	margin-top: 48px;
	background: linear-gradient(135deg, #12499A 0%, #0c336b 100%);
	border-radius: 1rem;
	padding: 32px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.12);
}

.story-banner-text h4 {
	font-size: 19px;
	font-weight: 800;
	margin-bottom: 6px;
	color: #ffffff;
}

.story-banner-text p {
	font-family: var(--font-sub);
	font-size: 14.5px;
	font-weight: 450;
	color: #f8fafc;
	margin: 0;
	line-height: 1.6;
}

.story-banner-btn {
	flex-shrink: 0;
}

.story-banner-btn:not(.btn-star-glow) {
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 700;
}

/* ========================================================
   SECTION: COURSE DIRECTORY & TRANSPARENT PRICING
======================================================== */
.course-directory-section {
	padding: 95px 0 85px;
	background: 
		radial-gradient(ellipse 70% 45% at 50% -10%, rgba(239, 246, 255, 0.85) 0%, rgba(255, 255, 255, 0) 75%),
		linear-gradient(180deg, #ffffff 0%, #fbfdff 60%, #ffffff 100%);
	position: relative;
	overflow: hidden;
}

.course-filter-tabs-wrapper {
	display: flex;
	justify-content: center;
	margin: 36px 0 50px;
}

.course-filter-tabs {
	display: inline-flex;
	align-items: center;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 5px;
	gap: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.course-tab-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 9px 28px;
	border-radius: 10px;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	color: #64748b;
	position: relative;
	user-select: none;
}

.course-tab-btn span {
	font-size: 14.5px;
	font-weight: 600;
	color: inherit;
	line-height: 1.3;
	transition: color 0.22s ease;
	white-space: nowrap;
}

.course-tab-btn small {
	font-family: var(--font-sub);
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
	margin-top: 2px;
	transition: color 0.22s ease;
	white-space: nowrap;
}

.course-tab-btn:hover {
	color: #0f172a;
	background: rgba(255, 255, 255, 0.6);
}

.course-tab-btn:hover small {
	color: #64748b;
}

/* Active Segmented Control Pill State */
.course-tab-btn.active {
	background: #ffffff;
	color: var(--color-primary);
	box-shadow: 0 3px 12px rgba(18, 73, 154, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
	cursor: default;
}

.course-tab-btn.active span {
	color: var(--color-primary);
	font-weight: 700;
}

.course-tab-btn.active small {
	color: #64748b;
	font-weight: 600;
}

@media (max-width: 640px) {
	.course-filter-tabs {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 4px;
		gap: 3px;
	}
	.course-tab-btn {
		padding: 8px 6px;
	}
	.course-tab-btn span {
		font-size: 12px;
	}
	.course-tab-btn small {
		font-size: 10.5px;
	}
}

.course-tab-pane {
	display: none;
	animation: fadeInPane 0.35s ease-out;
}

.course-tab-pane.active {
	display: block;
}

@keyframes fadeInPane {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 28px;
}

.course-card {
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	border-radius: 1rem;
	padding: 30px 26px 26px;
	display: flex;
	flex-direction: column;
	transition: var(--transition-smooth);
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.04);
}

/* Subtle micro-dot mesh background header pattern */
.course-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 310px;
	background-image: 
		radial-gradient(circle, rgba(18, 73, 154, 0.055) 1px, transparent 1px),
		linear-gradient(180deg, #f0f6ff 0%, rgba(240, 246, 255, 0.4) 65%, rgba(255, 255, 255, 0) 100%);
	background-size: 15px 15px, 100% 100%;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	transition: opacity 0.3s ease;
}

.course-card > * {
	position: relative;
	z-index: 1;
}

.course-card:hover {
	transform: translateY(-5px);
	border-color: #93c5fd;
	box-shadow: 0 10px 25px rgba(18, 73, 154, 0.08);
}

.course-card:hover::before {
	background-image: 
		radial-gradient(circle, rgba(18, 73, 154, 0.075) 1px, transparent 1px),
		linear-gradient(180deg, #e8f2ff 0%, rgba(232, 242, 255, 0.5) 65%, rgba(255, 255, 255, 0) 100%);
}

.course-card.card-featured {
	border-color: var(--color-primary);
	box-shadow: 0 6px 24px rgba(18, 73, 154, 0.07);
}

.course-card.card-featured::before {
	background-image: 
		radial-gradient(circle, rgba(18, 73, 154, 0.075) 1px, transparent 1px),
		linear-gradient(180deg, #e5f0ff 0%, rgba(229, 240, 255, 0.5) 65%, rgba(255, 255, 255, 0) 100%);
}

/* Removed logo overlay as requested */
.course-card::after {
	display: none;
}

.course-card.card-featured:hover::after {
	opacity: 0.17;
	transform: rotate(-1deg) scale(1.08);
}

.course-featured-ribbon {
	display: none !important;
}

.course-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
	margin-bottom: 14px;
}

.course-subject-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eff6ff;
	color: var(--color-primary);
	border: 1px solid rgba(18, 73, 154, 0.12);
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.04);
	transition: all 0.25s ease;
	flex-shrink: 0;
}

.course-subject-icon i {
	font-size: 17px;
	transition: transform 0.25s ease;
}

.course-card:hover .course-subject-icon {
	transform: translateY(-2px);
	border-color: rgba(18, 73, 154, 0.28);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.10);
}

.course-card:hover .course-subject-icon i {
	transform: scale(1.1);
}

.course-subject-icon.icon-cambridge {
	background: #eff6ff;
	color: var(--color-primary);
	border-color: rgba(18, 73, 154, 0.16);
}

.course-subject-icon.icon-math {
	background: #fff7ed;
	color: #ea580c;
	border-color: rgba(234, 88, 12, 0.16);
}

.course-subject-icon.icon-english,
.course-subject-icon.icon-phonics {
	background: #f0fdf4;
	color: #16a34a;
	border-color: rgba(22, 163, 74, 0.16);
}

.course-subject-icon.icon-book {
	background: #faf5ff;
	color: #9333ea;
	border-color: rgba(147, 51, 234, 0.16);
}

.course-subject-icon.icon-standard {
	background: #f1f5f9;
	color: #334155;
	border-color: rgba(51, 65, 85, 0.16);
}

.course-subject-icon.icon-science {
	background: #ecfeff;
	color: #0891b2;
	border-color: rgba(8, 145, 178, 0.16);
}

.course-subject-icon.icon-shield {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: rgba(29, 78, 216, 0.16);
}

.course-subject-icon.icon-trophy {
	background: #fefce8;
	color: #ca8a04;
	border-color: rgba(202, 138, 4, 0.22);
}

.course-tag {
	font-size: 11px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 6px;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.tag-vin { background: #eff6ff; color: var(--color-primary); }
.tag-blue { background: #e0f2fe; color: #0284c7; }
.tag-orange { background: #ffedd5; color: #ea580c; }
.tag-accent { background: #fef3c7; color: #d97706; }

.course-duration {
	font-family: var(--font-sub);
	font-size: 13px;
	color: #475569;
	font-weight: 600;
	margin-left: auto;
}

.course-name {
	font-size: 17.5px;
	font-weight: 800;
	color: var(--text-title);
	margin-bottom: 12px;
	line-height: 1.35;
	text-wrap: balance;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.course-summary {
	font-family: var(--font-sub);
	font-size: 14.5px;
	color: #334155;
	line-height: 1.6;
	margin-bottom: 18px;
	flex-grow: 1;
	font-weight: 450;
	text-wrap: pretty;
}

.course-highlights {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	border-top: 1px dashed var(--border-light);
	margin-bottom: 20px;
}

.highlight-point {
	font-family: var(--font-sub);
	font-size: 13.5px;
	color: #047857;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

.course-pricing-box {
	background: #f8fafc;
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 20px;
	border: none !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pricing-top-row {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

.pricing-original-num {
	font-size: 13.5px;
	color: #94a3b8;
	text-decoration: line-through;
	font-weight: 500;
	white-space: nowrap;
}

.pricing-main-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.pricing-final-num {
	font-size: 24px;
	font-weight: 800;
	color: #12499A;
	letter-spacing: -0.02em;
	line-height: 1.15;
	white-space: nowrap;
}

.pricing-discount-pill {
	font-size: 11.5px;
	font-weight: 700;
	color: #c2410c;
	background: #fef3c7;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	margin-left: 0;
}

.pricing-sub-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12.5px;
	color: #64748b;
	padding-top: 10px;
	border-top: 1px dashed #e2e8f0;
}

.pricing-per-session {
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
}

.pricing-save-badge {
	font-weight: 700;
	color: #ea580c;
	white-space: nowrap;
}

.price-single {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: #475569;
	font-weight: 500;
}

.price-num {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-primary);
}

.price-num small {
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
}

.price-package {
	margin-top: 10px;
	padding: 8px 12px;
	background: linear-gradient(135deg, #fffcf5 0%, #fff7eb 100%);
	border: 1px solid #fed7aa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.course-card:hover .price-package {
	background: linear-gradient(135deg, #fff9ee 0%, #fef3c7 100%);
	border-color: #fcd34d;
}

.price-package-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.package-tag {
	font-size: 11px;
	font-weight: 700;
	color: #c2410c;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.package-num {
	font-size: 14.5px;
	font-weight: 800;
	color: #ea580c;
	white-space: nowrap;
	font-feature-settings: "tnum";
}

.package-per-session {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: #9a3412;
	font-weight: 500;
	white-space: nowrap;
}

.package-per-session strong {
	font-weight: 700;
	color: #c2410c;
}

.package-star-icon {
	flex-shrink: 0;
	display: inline-block;
}

.course-card-btn {
	width: 100%;
	justify-content: center;
	font-size: 13.5px;
	padding: 10px 16px;
	margin-top: auto;
}

.course-card-btn.btn-sync-unified {
	width: 100%;
	justify-content: center;
	min-height: 46px;
	padding: 11px 20px;
	font-size: 13.5px;
	margin-top: auto;
}

.check-icon-inline {
	flex-shrink: 0;
	color: var(--color-primary);
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
	font-size: 13.5px;
}

/* ========================================================
   SECTION: TEACHER SPOTLIGHT (ĐỘI NGŨ GIÁO VIÊN TÂM HUYẾT)
   SEONGON-STYLE SINGLE EDUCATOR SLIDER
   - NO SHADOWS (Strict Rule 3 & User Request)
   - Standard 1rem border-radius (Rule 4)
======================================================== */
.teacher-spotlight-section {
	padding: 95px 0 90px;
	background: 
		radial-gradient(ellipse 75% 50% at 50% 0%, rgba(239, 246, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
	position: relative;
	overflow: hidden;
}

.teacher-seongon-stage {
	position: relative;
	background: linear-gradient(135deg, #0e3a7a 0%, #12499A 60%, #175ec2 100%);
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
	margin-top: 40px;
	padding: 40px 60px 0;
	box-shadow: none;
}

/* SEONGON Reference: Top Brand Identity Bar */
.seongon-top-brand-bar {
	position: absolute;
	top: 20px;
	left: 36px;
	z-index: 5;
}

.seongon-brand-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.95);
	padding: 6px 16px 6px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.seongon-brand-logo-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.seongon-brand-name {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #12499A;
}

.seongon-brand-sep {
	color: #F99D1C;
	font-size: 12px;
}

.seongon-brand-tagline {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}

/* Giant Subtle Background Watermark Text */
.seongon-watermark {
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-primary);
	font-size: 160px;
	font-weight: 900;
	color: #ffffff;
	opacity: 0.06;
	letter-spacing: 0.08em;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 1;
}

/* Circular Navigation Arrow Buttons */
.seongon-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.25s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.seongon-nav-btn:hover {
	background: #ffffff;
	color: var(--color-primary);
	border-color: #ffffff;
	transform: translateY(-50%) scale(1.08);
}

.seongon-btn-prev { left: 16px; }
.seongon-btn-next { right: 16px; }

/* Slides Container */
.seongon-slides-wrapper {
	position: relative;
	width: 100%;
	z-index: 2;
}

.seongon-slide {
	display: none;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.seongon-slide.active {
	display: block;
	opacity: 1;
	animation: seongonFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes seongonFadeIn {
	from {
		opacity: 0;
		transform: translateX(18px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 2-Column Grid inside Slide */
.seongon-slide-grid {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 48px;
	align-items: center;
}

/* Left Column: Portrait & Neon Contour Badge */
.seongon-portrait-col {
	position: relative;
	height: 520px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: flex-end;
}

.seongon-contour-badge {
	position: absolute;
	top: 45px;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 340px;
	pointer-events: none;
	z-index: 1;
}

.contour-lines-svg {
	width: 100%;
	height: 100%;
}

.seongon-img-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: visible;
}

.seongon-portrait-img {
	max-height: 510px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
	border-radius: 0;
	filter: drop-shadow(0 16px 32px rgba(4, 18, 38, 0.55));
	display: block;
}

.seongon-img-fade {
	display: none;
}

/* Quick Chat Floating Pill */
.seongon-quick-chat-pill {
	position: absolute;
	bottom: 24px;
	left: 8px;
	background: #ffffff;
	border-radius: 999px;
	padding: 8px 18px 8px 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 4;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
	border: 1px solid rgba(226, 232, 240, 0.8);
	transition: transform 0.25s ease;
}

.seongon-quick-chat-pill:hover {
	transform: translateY(-2px);
}

.chat-icon-circle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chat-pill-text {
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
}

/* Right Column: Content */
.seongon-details-col {
	text-align: left;
	color: #ffffff;
	padding-right: 20px;
	padding-bottom: 28px;
	align-self: center;
}

.seongon-teacher-name {
	font-size: 38px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
	line-height: 1.2;
}

.seongon-teacher-role {
	font-size: 16px;
	font-weight: 700;
	color: #F99D1C; /* Star Amber */
	margin-bottom: 32px;
	display: block;
	letter-spacing: 0.01em;
}

.seongon-teacher-role.role-emerald {
	color: #4ADE80;
}

.seongon-teacher-role.role-cyan {
	color: #38BDF8;
}

/* 2 Metrics Row */
.seongon-metrics-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
	margin-bottom: 36px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 24px;
}

.seongon-metric-box {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.seongon-metric-value {
	font-size: 44px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	margin-bottom: 6px;
	letter-spacing: -0.02em;
}

.seongon-metric-label {
	font-size: 15px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 10px;
}

.seongon-metric-desc {
	font-family: var(--font-sub);
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
	margin: 0;
}

/* CTA Button */
.seongon-action-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.seongon-cta-btn {
	background: #ffffff;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	border-radius: 999px;
	padding: 10px 24px 10px 10px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	transition: all 0.25s ease;
	border: 2px solid #ffffff;
}

.seongon-cta-btn:hover {
	background: #F99D1C;
	border-color: #F99D1C;
	color: #ffffff;
	transform: translateY(-2px);
}

.seongon-btn-arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.25s ease;
}

.seongon-cta-btn:hover .seongon-btn-arrow {
	background: #ffffff;
	color: #F99D1C;
	transform: translateX(4px);
}

/* Dots Nav */
.seongon-dots-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	position: relative;
	z-index: 10;
}

.teacher-seongon-stage .seongon-dots-nav {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0;
	z-index: 10;
}

.seongon-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.25s ease;
}

.seongon-dot.active {
	width: 28px;
	border-radius: 999px;
	background: #F99D1C;
}

/* Responsive for SEONGON Slide */
@media (max-width: 991px) {
	.teacher-seongon-stage {
		padding: 32px 20px 40px;
	}
	.seongon-slide-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}
	.seongon-portrait-col {
		height: 340px;
	}
	.seongon-portrait-img {
		max-height: 320px;
	}
	.seongon-details-col {
		text-align: center;
		padding-right: 0;
		padding-bottom: 0;
	}
	.seongon-teacher-name {
		font-size: 28px;
	}
	.seongon-metrics-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.seongon-metric-box {
		text-align: center;
	}
	.seongon-action-row {
		justify-content: center;
	}
	.seongon-nav-btn {
		display: none;
	}
	.seongon-watermark {
		font-size: 90px;
		bottom: 10px;
	}
}
/* ========================================================
   SECTION: PHƯƠNG PHÁP & LỘ TRÌNH HỌC (5-STEP INFOGRAPHIC)
   - Luxury Academic Aesthetic
   - Standard 1rem border-radius (Rule 4)
   - NO SHADOWS (Strict Rule 3 & User Request)
======================================================== */
.learning-pathway-infographic-section {
	padding: 95px 0 100px;
	background-color: #f6faff;
	background-image: 
		radial-gradient(ellipse 65% 55% at 50% 25%, rgba(18, 73, 154, 0.08) 0%, rgba(246, 250, 255, 0) 75%),
		radial-gradient(#12499A 1.3px, transparent 1.3px);
	background-size: 100% 100%, 24px 24px;
	position: relative;
	overflow: hidden;
}

.pathway-flow-container {
	position: relative;
	margin-top: 50px;
}

.pathway-steps-grid {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 6px;
	position: relative;
	z-index: 1;
}

.pathway-step-card {
	flex: 1;
	min-width: 0;
	background: #ffffff;
	border: none;
	border-radius: 1rem;
	padding: 22px 14px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.pathway-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.06);
}

/* Card Top Header */
.pathway-card-top-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 12px;
}

/* Metallic Step Number Badge */
.pathway-step-num-badge {
	background: #fffbeb;
	border: 1.5px solid #F99D1C;
	color: #12499A;
	font-size: 11px;
	font-weight: 800;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -0.02em;
	transition: all 0.3s ease;
}

.pathway-step-phase {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748B;
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 999px;
}

.pathway-step-card:hover .pathway-step-num-badge {
	background: #F99D1C;
	color: #ffffff;
	transform: scale(1.08);
}

/* Connected Arrow Connector */
.pathway-step-arrow-connector {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #F99D1C;
	flex-shrink: 0;
	padding: 0 2px;
	opacity: 0.85;
	transition: transform 0.3s ease, color 0.3s ease;
}

.pathway-step-card:hover + .pathway-step-arrow-connector {
	transform: translateX(3px);
	color: #12499A;
}

/* Flaticon Standard Icon Box */
.pathway-step-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #f8fafc;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border: 1px solid #e2e8f0;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pathway-step-card:hover .pathway-step-icon-box {
	background: #12499A;
	color: #F99D1C;
	border-color: #12499A;
	transform: scale(1.06) rotate(3deg);
}

.pathway-step-title {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--text-title);
	margin-bottom: 8px;
	line-height: 1.35;
	min-height: 40px;
}

.pathway-step-desc {
	font-family: var(--font-sub);
	font-size: 12px;
	line-height: 1.55;
	color: #475569;
	margin-bottom: 14px;
	flex-grow: 1;
}

.pathway-step-pill {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	color: #b45309;
	background: #fffbeb;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(249, 157, 28, 0.3);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.pathway-steps-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.pathway-step-arrow-connector {
		display: none;
	}
}

@media (max-width: 640px) {
	.pathway-steps-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ========================================================
   SECTION: TRUST & VALUE COMMITMENTS (HOVER EXPANDING ACCORDION)
   - Inspired by Reference Sample: Expanding Cards on Hover
   - NO SHADOWS (Strict Rule 3 & User Request)
   - Standard 1rem border-radius (Rule 4)
======================================================== */
.trust-commitments-section {
	padding: 95px 0 100px;
	background-color: #ffffff;
	background-image: radial-gradient(circle, rgba(18, 73, 154, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	position: relative;
}

.commitments-header-wrap {
	position: relative;
	z-index: 1;
	padding-top: 60px;
}

.commitments-numeral-backdrop {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 160px;
	font-weight: 900;
	line-height: 0.75;
	letter-spacing: -0.06em;
	pointer-events: none;
	user-select: none;
	z-index: -1;
	background: linear-gradient(180deg, rgba(18, 73, 154, 0.28) 0%, rgba(18, 73, 154, 0.12) 55%, transparent 92%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 1;
}

@media (max-width: 768px) {
	.commitments-header-wrap {
		padding-top: 45px;
	}
	.commitments-numeral-backdrop {
		font-size: 105px;
		top: -20px;
	}
}

.commitments-header-cta {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

.btn-dark-pill {
	background: #0f172a;
	color: #ffffff;
	border-radius: var(--radius-pill);
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: none;
}

.btn-dark-pill svg {
	transition: transform 0.25s ease;
}

.btn-dark-pill:hover {
	background: var(--color-primary);
	color: #ffffff;
	transform: translateY(-2px);
}

.btn-dark-pill:hover svg {
	transform: translateX(4px);
}

/* Hover Expanding Accordion Container */
.calendly-commitments-grid {
	display: flex;
	gap: 16px;
	margin-top: 50px;
	align-items: stretch;
}

/* Base Card Style */
.calendly-card {
	background: #ffffff;
	border-radius: 1rem;
	border: 1px solid rgba(226, 232, 240, 0.95);
	padding: 30px 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
	min-height: 540px;
	box-shadow: none;
	flex: 1;
	min-width: 170px;
	cursor: pointer;
	transition: flex 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease, border-color 0.35s ease;
}

/* Faint Collapsed Watermark Numeral with Brand Icon Silhouette */
.card-collapsed-watermark {
	position: absolute;
	bottom: 12px;
	right: 18px;
	font-family: var(--font-primary);
	font-size: 78px;
	font-weight: 900;
	color: rgba(18, 73, 154, 0.09);
	line-height: 1;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.35s ease;
	z-index: 1;
}

/* Subtle Overlay Icon & Pattern Decor inside empty space - Placed elegantly at top-right or above number without overlapping */
.card-overlay-decor {
	position: absolute;
	top: 26px;
	right: 20px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0.08;
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: 0;
}

.overlay-brand-icon {
	font-size: 38px;
	color: #12499A;
	transition: transform 0.45s ease, color 0.35s ease;
}

.calendly-card:hover .overlay-brand-icon,
.calendly-card.is-expanded .overlay-brand-icon {
	opacity: 0.16;
	transform: scale(1.12) rotate(-6deg);
	color: #F99D1C;
}

/* Subtle Branding Watermark & Soft Glow on Unopened/Collapsed Cards */
.calendly-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3.5px;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 3;
}

/* Clean minimalist collapsed state */
@media (min-width: 992px) {
	.calendly-commitments-grid:not(:hover) .calendly-card:not([data-card="1"]) .card-collapsed-watermark,
	.calendly-commitments-grid:hover .calendly-card:not(:hover) .card-collapsed-watermark {
		color: rgba(18, 73, 154, 0.09);
	}
}

.calendly-card[data-card="1"]::before { background: linear-gradient(90deg, #14b8a6, #0d9488); }
.calendly-card[data-card="2"]::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.calendly-card[data-card="3"]::before { background: linear-gradient(90deg, #10b981, #059669); }
.calendly-card[data-card="4"]::before { background: linear-gradient(90deg, #6366f1, #4f46e5); }

/* Ambient Color Wash at Bottom of Expanded Card (Matching Reference Sample) */
.calendly-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 250px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
}

.calendly-card[data-card="1"]::after { background: linear-gradient(180deg, rgba(20, 184, 166, 0) 0%, rgba(20, 184, 166, 0.09) 100%); }
.calendly-card[data-card="2"]::after { background: linear-gradient(180deg, rgba(249, 157, 28, 0) 0%, rgba(249, 157, 28, 0.12) 100%); }
.calendly-card[data-card="3"]::after { background: linear-gradient(180deg, rgba(16, 185, 129, 0) 0%, rgba(16, 185, 129, 0.10) 100%); }
.calendly-card[data-card="4"]::after { background: linear-gradient(180deg, rgba(18, 73, 154, 0) 0%, rgba(18, 73, 154, 0.10) 100%); }

/* Desktop Hover Expanding Accordion Rules */
@media (min-width: 992px) {
	/* When hovering grid: unhovered cards shrink to flex 1 */
	.calendly-commitments-grid:hover .calendly-card {
		flex: 1;
		border-color: rgba(226, 232, 240, 0.95);
	}

	.calendly-commitments-grid:hover .calendly-card::before,
	.calendly-commitments-grid:hover .calendly-card::after {
		opacity: 0;
	}

	.calendly-commitments-grid:hover .calendly-card .card-collapsed-watermark {
		opacity: 1;
	}

	.calendly-commitments-grid:hover .calendly-card .calendly-steps-list,
	.calendly-commitments-grid:hover .calendly-card .calendly-mockup-wrap {
		max-height: 0;
		opacity: 0;
		transform: translateY(12px);
		margin: 0;
		pointer-events: none;
	}

	/* Card 1 default resting state (when grid is NOT hovered) */
	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"],
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded,
	.calendly-commitments-grid .calendly-card:hover {
		flex: 2.35 !important;
		border-color: rgba(18, 73, 154, 0.35) !important;
	}

	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"]::before,
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded::before,
	.calendly-commitments-grid .calendly-card:hover::before {
		opacity: 1 !important;
	}

	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"]::after,
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded::after,
	.calendly-commitments-grid .calendly-card:hover::after {
		opacity: 1 !important;
	}

	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"] .card-collapsed-watermark,
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded .card-collapsed-watermark,
	.calendly-commitments-grid .calendly-card:hover .card-collapsed-watermark {
		opacity: 0 !important;
	}

	/* Folded content in default resting cards */
	.calendly-steps-list,
	.calendly-mockup-wrap {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transform: translateY(12px);
		transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.35s ease, margin 0.35s ease;
		margin: 0;
		pointer-events: none;
	}

	/* Expanded card contents (Card 1 default resting OR any hovered card) */
	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"] .calendly-steps-list,
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded .calendly-steps-list,
	.calendly-commitments-grid .calendly-card:hover .calendly-steps-list {
		max-height: 280px !important;
		opacity: 1 !important;
		transform: translateY(0) !important;
		margin-top: 16px !important;
		margin-bottom: 20px !important;
		pointer-events: auto !important;
	}

	.calendly-commitments-grid:not(:hover) .calendly-card[data-card="1"] .calendly-mockup-wrap,
	.calendly-commitments-grid:not(:hover) .calendly-card.is-expanded .calendly-mockup-wrap,
	.calendly-commitments-grid .calendly-card:hover .calendly-mockup-wrap {
		max-height: 440px !important;
		opacity: 1 !important;
		transform: translateY(0) !important;
		margin-top: auto !important;
		pointer-events: auto !important;
	}
}

@media (max-width: 991px) {
	.card-collapsed-watermark {
		display: none;
	}
	.calendly-commitments-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.calendly-card {
		min-height: auto;
	}
}

@media (max-width: 640px) {
	.calendly-commitments-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* Card Header & Steps */
.calendly-card-top {
	display: flex;
	flex-direction: column;
}

.calendly-card-title {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px 0;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.calendly-card-desc {
	font-family: var(--font-sub);
	font-size: 15px;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.6;
	margin: 0 0 22px 0;
	min-height: 48px;
	text-wrap: pretty;
}

.calendly-steps-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.step-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-sub);
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	line-height: 1.5;
}

.step-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
	transition: transform 0.25s ease;
}

.step-icon svg {
	width: 13px;
	height: 13px;
}

.step-icon i {
	font-size: 11.5px;
}

.calendly-card:hover .step-icon {
	transform: scale(1.1);
}

.step-icon.icon-teal {
	background: #ccfbf1;
	color: #0f766e;
}

.step-icon.icon-blue {
	background: #eff6ff;
	color: #2563eb;
}

.step-icon.icon-green {
	background: #ecfdf5;
	color: #16a34a;
}

.step-icon.icon-amber {
	background: #fef3c7;
	color: #b45309;
}

.step-icon.icon-orange {
	background: #ffedd5;
	color: #c2410c;
}

.step-icon.icon-emerald {
	background: #d1fae5;
	color: #047857;
}

.step-icon.icon-indigo {
	background: #e0e7ff;
	color: #4338ca;
}

/* Bottom Floating Mockup Widget & Glow Container */
.calendly-mockup-wrap {
	position: relative;
	border-radius: 1rem;
	padding: 12px;
	margin-top: auto;
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendly-card:hover .calendly-mockup-wrap,
.calendly-card.active .calendly-mockup-wrap {
	transform: translateY(-4px);
	background: #f1f5f9;
	border-color: #e2e8f0;
}

/* Floating Card Element */
.mockup-floating-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 14px 13px;
	border: 1px solid rgba(226, 232, 240, 0.95);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.03);
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
}

.calendly-card:hover .mockup-floating-card {
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.11), 0 3px 8px rgba(15, 23, 42, 0.04);
	border-color: #cbd5e1;
}

.mockup-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}

.mockup-avatar {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.avatar-teal {
	background: #ccfbf1;
	color: #0f766e;
}

.avatar-amber {
	background: #fef3c7;
	color: #b45309;
}

.avatar-emerald {
	background: #d1fae5;
	color: #047857;
}

.avatar-indigo {
	background: #e0e7ff;
	color: #4338ca;
}

.mockup-user {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}

.mockup-sub {
	font-size: 12px;
	color: #475569;
	font-weight: 500;
	line-height: 1.3;
}

.mockup-text {
	font-family: var(--font-sub);
	font-size: 13px;
	color: #1e293b;
	line-height: 1.55;
	font-weight: 450;
	margin: 0 0 10px 0;
}

.mockup-tags-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mock-tag {
	font-size: 11.5px;
	font-weight: 600;
	padding: 3.5px 9px;
	border-radius: 6px;
	background: #f8fafc;
	color: #334155;
	border: 1px solid #e2e8f0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transition: all 0.2s ease;
}

.mock-tag.tag-success {
	background: #ecfdf5;
	color: #047857;
	border-color: #a7f3d0;
}

.mock-tag.mock-tag-active {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: #bfdbfe;
	font-weight: 700;
}

.mock-tag:hover {
	transform: translateY(-1px);
}

/* Mockup Metric Bar (Card 3) */
.mockup-metric-bar {
	margin-bottom: 10px;
}

.metric-label-row {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: #1e293b;
	margin-bottom: 5px;
	font-weight: 600;
}

.metric-label-row strong {
	color: #047857;
}

.metric-track {
	height: 6px;
	border-radius: 999px;
	background: #f1f5f9;
	overflow: hidden;
}

.metric-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #10b981, #059669);
	transition: width 1s ease-out;
}

/* ========================================================
   RESPONSIVE ADJUSTMENTS FOR NEW SECTIONS
======================================================== */

@media (max-width: 992px) {
	.story-comparison-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.story-banner-cta {
		flex-direction: column;
		text-align: center;
		padding: 28px 24px;
	}
	.teachers-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.calendly-commitments-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.calendly-card {
		min-height: auto;
		padding: 24px 18px 16px;
	}
	.teachers-grid {
		grid-template-columns: 1fr;
	}
	.courses-grid {
		grid-template-columns: 1fr;
	}
	.course-filter-tabs {
		flex-direction: column;
		align-items: stretch;
	}
	.course-tab-btn {
		width: 100%;
	}
}


/* ========================================================
   SECTION: HÌNH ẢNH LỚP HỌC (3D PERSPECTIVE COVERFLOW)
======================================================== */
.classroom-gallery-section {
	padding: 80px 0 24px;
	background: 
		radial-gradient(circle at 50% 20%, rgba(239, 246, 255, 0.7) 0%, rgba(255, 255, 255, 0) 65%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	overflow: hidden;
	position: relative;
}

.coverflow-carousel-wrapper {
	position: relative;
	perspective: 1200px;
	max-width: 1400px;
	margin: 40px auto 0;
	padding: 10px 0 0;
	user-select: none;
}

.coverflow-track {
	position: relative;
	height: 440px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.coverflow-slide {
	position: absolute;
	width: 580px;
	max-width: 82vw;
	height: 400px;
	border-radius: 1rem;
	cursor: pointer;
	transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.65s ease, filter 0.65s ease, box-shadow 0.65s ease;
	box-shadow: 0 16px 36px rgba(18, 73, 154, 0.08);
	overflow: hidden;
	will-change: transform, opacity;
}

.coverflow-slide .slide-card {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	overflow: hidden;
	background: #ffffff;
	border: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.06);
	cursor: inherit;
}

.coverflow-slide .slide-card .slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 1rem;
	transition: transform 0.5s ease;
	cursor: inherit;
}

.coverflow-slide.active:hover .slide-image {
	transform: scale(1.03);
}

/* 3D Perspective States for Slides (Giữ sắc nét 100%, không mờ xuyên thấu, không chồng lấn) */
.coverflow-slide.pos-0 {
	/* Active Center */
	transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
	z-index: 10;
	opacity: 1;
	filter: none;
	cursor: default;
	box-shadow: 0 20px 48px rgba(18, 73, 154, 0.16);
}

.coverflow-slide.pos--1 {
	/* 1 Step Left - Dịch sang trái rộng hơn để click được mọi vị trí */
	transform: translateX(-460px) translateZ(-90px) rotateY(22deg) scale(0.85);
	z-index: 8;
	opacity: 1;
	filter: brightness(0.92);
	cursor: pointer;
}

.coverflow-slide.pos--1:hover,
.coverflow-slide.pos--1:hover .slide-card,
.coverflow-slide.pos--1:hover .slide-image {
	filter: brightness(1.02);
	transform: translateX(-460px) translateZ(-60px) rotateY(16deg) scale(0.88);
	box-shadow: 0 20px 40px rgba(18, 73, 154, 0.16);
	cursor: pointer !important;
}

.coverflow-slide.pos--2 {
	/* 2 Steps Left */
	transform: translateX(-780px) translateZ(-180px) rotateY(30deg) scale(0.70);
	z-index: 6;
	opacity: 1;
	filter: brightness(0.80);
	cursor: pointer;
}

.coverflow-slide.pos--2:hover,
.coverflow-slide.pos--2:hover .slide-card,
.coverflow-slide.pos--2:hover .slide-image {
	filter: brightness(0.92);
	transform: translateX(-780px) translateZ(-140px) rotateY(24deg) scale(0.74);
	cursor: pointer !important;
}

.coverflow-slide.pos-1 {
	/* 1 Step Right - Dịch sang phải rộng hơn để click được mọi vị trí */
	transform: translateX(460px) translateZ(-90px) rotateY(-22deg) scale(0.85);
	z-index: 8;
	opacity: 1;
	filter: brightness(0.92);
	cursor: pointer;
}

.coverflow-slide.pos-1:hover,
.coverflow-slide.pos-1:hover .slide-card,
.coverflow-slide.pos-1:hover .slide-image {
	filter: brightness(1.02);
	transform: translateX(460px) translateZ(-60px) rotateY(-16deg) scale(0.88);
	box-shadow: 0 20px 40px rgba(18, 73, 154, 0.16);
	cursor: pointer !important;
}

.coverflow-slide.pos-2 {
	/* 2 Steps Right */
	transform: translateX(780px) translateZ(-180px) rotateY(-30deg) scale(0.70);
	z-index: 6;
	opacity: 1;
	filter: brightness(0.80);
	cursor: pointer;
}

.coverflow-slide.pos-2:hover,
.coverflow-slide.pos-2:hover .slide-card,
.coverflow-slide.pos-2:hover .slide-image {
	filter: brightness(0.92);
	transform: translateX(780px) translateZ(-140px) rotateY(-24deg) scale(0.74);
	cursor: pointer !important;
}

.coverflow-slide.pos-hidden-left {
	transform: translateX(-1050px) translateZ(-260px) rotateY(45deg) scale(0.5);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}

.coverflow-slide.pos-hidden-right {
	transform: translateX(1050px) translateZ(-260px) rotateY(-45deg) scale(0.5);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}

/* Dynamic Caption Card (Dưới Center Slide - Chuẩn Mẫu - Không Viền) */
.feedback-active-caption {
	max-width: 620px;
	margin: 22px auto 0;
	text-align: center;
	padding: 16px 24px;
	background: #ffffff;
	border-radius: 1rem;
	border: none;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.feedback-caption-title {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 5px;
	line-height: 1.4;
}

.feedback-caption-desc {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

/* ========================================================
   SECTION: DEDICATED ZALO SCREENSHOT FEEDBACK CAROUSEL
   (Chuyên để hình chụp màn hình, overlay 2 bên, chạy đến hình nào nhảy lên to lên xíu)
======================================================== */
.zalo-feedback-carousel-section {
	background: 
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(239, 246, 255, 0.8) 0%, rgba(255, 255, 255, 0) 75%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	padding: 90px 0 100px;
	position: relative;
	overflow: hidden;
}

.zalo-feedback-carousel-section .container-fluid {
	position: relative;
	z-index: 1;
}

/* Trust Highlight Badges / Chips */
.zalo-trust-pills-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.zalo-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.04);
	transition: all 0.25s ease;
}

.zalo-trust-pill:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.08);
}

.zalo-trust-pill.highlight {
	background: rgba(249, 157, 28, 0.07);
	border-color: rgba(249, 157, 28, 0.3);
	color: #b45309;
}

.zalo-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.zalo-trust-pill.highlight .zalo-pill-icon {
	color: var(--color-accent);
}

/* Carousel Container */
.zalo-carousel-wrapper {
	position: relative;
	max-width: 1400px;
	margin: 20px auto 0;
	padding: 10px 0;
	user-select: none;
}

/* Floating Side Navigation Buttons (Sleek VIP Frosted Glass) */
.zalo-floating-nav-btn {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1.5px solid rgba(18, 73, 154, 0.16);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 15;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.08);
}

.btn-zalo-side-prev {
	left: 16px;
	transform: translateY(-50%);
}

.btn-zalo-side-next {
	right: 16px;
	transform: translateY(-50%);
}

.zalo-floating-nav-btn:hover {
	background: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.2);
}

.zalo-floating-nav-btn:active {
	transform: translateY(-50%) scale(0.96);
}

/* Doodle Annotations & Curved Arrows */
.zalo-doodle-annotation {
	position: absolute;
	z-index: 12;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	user-select: none;
}

.zalo-doodle-annotation.annotation-left {
	top: -12px;
	left: 80px;
	align-items: flex-start;
}

.zalo-doodle-annotation.annotation-right {
	top: -12px;
	right: 80px;
	align-items: flex-end;
}

.zalo-doodle-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: rgba(18, 73, 154, 0.08);
	border: 1.5px dashed rgba(18, 73, 154, 0.35);
	border-radius: 999px;
	font-family: var(--font-accent, 'Fuzzy Bubbles', cursive);
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	transform: rotate(-3deg);
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.05);
	white-space: nowrap;
}

.zalo-doodle-tag.tag-amber {
	background: rgba(249, 157, 28, 0.12);
	border: 1.5px dashed rgba(249, 157, 28, 0.5);
	color: #d97706;
	transform: rotate(3deg);
	box-shadow: 0 4px 12px rgba(249, 157, 28, 0.08);
}

.zalo-doodle-arrow {
	width: 58px;
	height: 44px;
	margin-top: 4px;
	display: block;
	flex-shrink: 0;
}

.zalo-doodle-arrow.arrow-left {
	margin-left: 24px;
}

.zalo-doodle-arrow.arrow-right {
	margin-right: 24px;
}

/* Overlays 2 bên mép carousel */
.zalo-carousel-overlay-left {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 90px;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 10;
}

.zalo-carousel-overlay-right {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 90px;
	background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 10;
}

/* Viewport padding */
.zalo-carousel-viewport {
	overflow: hidden;
	width: 100%;
	padding: 65px 0 50px;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.zalo-carousel-track {
	display: flex;
	gap: 28px;
	will-change: transform;
	align-items: center;
	touch-action: pan-y;
}

/* Từng thẻ slide ảnh chụp màn hình Zalo (Hiển thị 100% full hình nguyên bản, không viền đen, không nền đen) */
.zalo-slide-item {
	flex: 0 0 295px;
	width: 295px;
	min-height: 580px;
	cursor: pointer;
	opacity: 0.6;
	transform: translateY(0) scale(0.93);
	filter: blur(1px);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.zalo-slide-item:hover {
	opacity: 0.88;
	filter: blur(0px);
}

/* Chạy đến hình nào: hình đó NHẢY LÊN, TO LÊN XÍU và SẮC NÉT KHÔNG BLUR */
.zalo-slide-item.active {
	opacity: 1;
	transform: translateY(-24px) scale(1.06);
	filter: none;
	z-index: 5;
}

.zalo-phone-card {
	position: relative;
	width: 100%;
	aspect-ratio: 473 / 1024;
	min-height: 580px;
	background: #f8fafc;
	border-radius: 1.25rem;
	box-shadow: 0 10px 28px rgba(18, 73, 154, 0.08);
	overflow: hidden;
	transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
	border: 1.5px solid rgba(226, 232, 240, 0.95);
	display: block;
}

.zalo-slide-item.active .zalo-phone-card {
	box-shadow: 0 24px 50px rgba(18, 73, 154, 0.14);
	border-color: rgba(18, 73, 154, 0.22);
}

/* Hiển thị full 100% tấm hình chụp màn hình không bị cắt một pixel nào */
.zalo-card-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.4s ease;
	pointer-events: none;
	-webkit-user-drag: none;
}

.zalo-slide-item.active:hover .zalo-card-img {
	transform: scale(1.015);
}

/* Controls: Navigation arrows, Counter & dots */
.zalo-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 18px;
}

.zalo-carousel-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid #e2e8f0;
	background: #ffffff;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.22s ease;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.zalo-carousel-arrow:hover {
	background: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
	transform: scale(1.08);
}

.zalo-carousel-dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.zalo-carousel-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cbd5e1;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.zalo-carousel-dot.active {
	width: 32px;
	border-radius: 999px;
	background: var(--color-primary);
}

/* Counter display */
.zalo-carousel-counter {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 14px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.04);
}

.zalo-carousel-counter .counter-curr {
	color: var(--color-primary);
	font-size: 13.5px;
}

.zalo-carousel-counter .counter-sep {
	color: #cbd5e1;
}

@media (max-width: 1200px) {
	.zalo-doodle-annotation.annotation-left {
		left: 20px;
	}
	.zalo-doodle-annotation.annotation-right {
		right: 20px;
	}
}

@media (max-width: 992px) {
	.zalo-doodle-annotation {
		display: none;
	}
	.btn-zalo-side-prev {
		left: 8px;
	}
	.btn-zalo-side-next {
		right: 8px;
	}
}

@media (max-width: 768px) {
	.zalo-feedback-carousel-section {
		padding: 60px 0 70px;
	}
	.zalo-floating-nav-btn {
		width: 40px;
		height: 40px;
	}
	.zalo-carousel-overlay-left,
	.zalo-carousel-overlay-right {
		width: 45px;
	}
	.zalo-slide-item {
		flex: 0 0 240px;
		width: 240px;
	}
	.zalo-phone-card {
		border-radius: 1rem;
	}
	.zalo-trust-pills-wrap {
		gap: 8px;
	}
	.zalo-trust-pill {
		font-size: 12px;
		padding: 6px 14px;
	}
}

/* Coverflow Navigation Controls */
.coverflow-nav-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.coverflow-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid #e2e8f0;
	background: #ffffff;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.22s ease;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.06);
}

.coverflow-arrow:hover {
	background: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.2);
}

.coverflow-dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.coverflow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cbd5e1;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border: none;
	padding: 0;
}

.coverflow-dot.active {
	width: 32px;
	border-radius: 999px;
	background: var(--color-primary);
}

/* Responsive adjustments for 3D Coverflow */
@media (max-width: 1024px) {
	.coverflow-track {
		height: 380px;
	}
	.coverflow-slide {
		width: 480px;
		height: 340px;
	}
	.coverflow-slide.pos--1 {
		transform: translateX(-260px) translateZ(-70px) rotateY(24deg) scale(0.86);
	}
	.coverflow-slide.pos-1 {
		transform: translateX(260px) translateZ(-70px) rotateY(-24deg) scale(0.86);
	}
	.coverflow-slide.pos--2 {
		transform: translateX(-460px) translateZ(-140px) rotateY(32deg) scale(0.70);
	}
	.coverflow-slide.pos-2 {
		transform: translateX(460px) translateZ(-140px) rotateY(-32deg) scale(0.70);
	}
	.feedback-active-caption {
		max-width: 480px;
	}
}

@media (max-width: 680px) {
	.classroom-gallery-section {
		padding: 45px 0 20px;
	}
	.coverflow-track {
		height: 320px;
	}
	.coverflow-slide {
		width: 86vw;
		height: 290px;
	}
	.coverflow-slide.pos--1 {
		transform: translateX(-160px) translateZ(-50px) rotateY(20deg) scale(0.86);
		opacity: 0.65;
	}
	.coverflow-slide.pos-1 {
		transform: translateX(160px) translateZ(-50px) rotateY(-20deg) scale(0.86);
		opacity: 0.65;
	}
	.coverflow-slide.pos--2,
	.coverflow-slide.pos-2 {
		opacity: 0;
		pointer-events: none;
	}
	.feedback-active-caption {
		max-width: 86vw;
		padding: 12px 16px;
	}
	.feedback-caption-title {
		font-size: 14.5px;
	}
	.feedback-caption-desc {
		font-size: 12.5px;
	}
}

/* ========================================================
   SECTION: VỀ BLUE STAR (MILESTONES & HỌC THUẬT TIÊN PHONG)
======================================================== */
.bs-about-milestones-section {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #edf6fd 0%, #f6faff 50%, #ffffff 100%);
	padding: 65px 0 65px;
}

/* Background atmospheric sky & sunlight beam */
.about-bg-sky {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
	background: radial-gradient(circle at 18% 25%, rgba(219, 238, 255, 0.75) 0%, rgba(240, 248, 255, 0) 55%),
	            radial-gradient(circle at 85% 15%, rgba(254, 243, 199, 0.45) 0%, rgba(255, 255, 255, 0) 45%);
	z-index: 0;
}

.about-sunlight-beam {
	position: absolute;
	top: -120px;
	left: 8%;
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 248, 230, 0.4) 40%, transparent 70%);
	filter: blur(45px);
	pointer-events: none;
	z-index: 1;
}

.about-ambient-glow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Background Academic Campus Layer - Anchored left and smoothly faded to right */
.about-park-backdrop {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 62%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left 18%;
	background-size: cover;
	pointer-events: none;
	opacity: 0.88;
	z-index: 1;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0) 95%);
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0) 95%);
}

/* Flowing decorative ribbon behind landmarks in Blue Star brand colors */
.about-ribbon-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 280px;
	pointer-events: none;
	z-index: 1;
}

.about-ribbon-wave svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Full Bleed Panorama Visual Layer (Cambridge Campus & Outstanding Students) */
.about-panorama-layer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.about-inner-container {
	position: relative;
	z-index: 3;
}

/* 2-Column Split Layout */
.about-layout-grid {
	display: grid;
	grid-template-columns: 46% 54%;
	gap: 40px;
	align-items: center;
	min-height: 540px;
}

.about-visual-spacer {
	min-height: 520px;
	pointer-events: none;
}

/* Right Column: Lead Content & 4 Stat Counters in OKhub Style */
.about-content-stage {
	position: relative;
	padding: 0;
	z-index: 4;
}

.about-lead-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 35px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	max-width: 600px;
	text-wrap: balance;
}

.about-lead-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.about-lead-title .highlight-brand::after {
	display: none !important;
}

.about-lead-desc {
	font-size: 15px;
	color: #475569;
	line-height: 1.65;
	margin: 0 0 28px;
	max-width: 560px;
	text-wrap: pretty;
}

/* 4 Stats Grid in OKhub Style (2 columns x 2 rows) */
.about-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 24px;
	margin-bottom: 10px;
	position: relative;
	z-index: 3;
	max-width: 550px;
}

/* OKhub Style Stat Card */
.okhub-stat-card {
	position: relative;
	border-radius: 18px;
	padding: 24px 22px 20px;
	min-height: 165px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
	background: transparent;
	isolation: isolate;
}

.okhub-card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.card-bg-path {
	fill: #ffffff;
	stroke: #e2e8f0;
	stroke-width: 1px;
	transition: fill 0.3s ease, stroke 0.3s ease;
}

.card-sparkle-stars {
	position: absolute;
	top: -14px;
	right: -10px;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.5) rotate(-15deg);
	transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-sparkle-stars svg {
	display: block;
	filter: drop-shadow(0 2px 6px rgba(249, 157, 28, 0.4));
}

.card-inner-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.card-number-row {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	line-height: 1;
	white-space: nowrap;
}

.card-stat-num {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 50px;
	font-weight: 800;
	color: #12499A;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.card-stat-sym {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 30px;
	font-weight: 800;
	color: #F99D1C;
	line-height: 1;
	margin-left: 2px;
	margin-top: 4px;
	transition: color 0.3s ease;
}

.card-divider-line {
	width: 100%;
	height: 1px;
	background: #e2e8f0;
	margin: 15px 0 13px;
	transition: background 0.3s ease;
}

.card-stat-desc {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 13.5px;
	font-weight: 500;
	color: #334155;
	line-height: 1.45;
	margin: 0;
	transition: color 0.3s ease;
	text-wrap: balance;
}

/* OKhub Card Hover State - Lively side shift & tilt */
.okhub-stat-card:hover,
.okhub-stat-card.bs-revealed:hover {
	transform: translateY(-8px) translateX(6px) rotate(2.2deg) !important;
	filter: drop-shadow(0 18px 32px rgba(18, 73, 154, 0.22));
	z-index: 10;
}

.okhub-stat-card:hover .card-bg-path {
	fill: #12499A;
	stroke: #12499A;
	stroke-width: 1px;
}

.okhub-stat-card:hover .card-sparkle-stars {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.okhub-stat-card:hover .card-stat-num {
	color: #ffffff;
}

.okhub-stat-card:hover .card-stat-sym {
	color: #ffffff;
}

.okhub-stat-card:hover .card-divider-line {
	background: rgba(255, 255, 255, 0.28);
}

.okhub-stat-card:hover .card-stat-desc {
	color: #ffffff;
}

/* ========================================================
   SECTION: KHÁM PHÁ HÀNH TRÌNH VƯƠN XA (SUB-DISCOVERY)
======================================================== */
.bs-discover-journey-section {
	position: relative;
	background: #ffffff;
	padding: 60px 0 75px;
	overflow: hidden;
}

.discover-ribbon-decor {
	position: absolute;
	top: 0;
	left: 0;
	width: 420px;
	height: 280px;
	pointer-events: none;
	z-index: 1;
}

.discover-ribbon-decor svg {
	width: 100%;
	height: 100%;
	display: block;
}

.discover-city-backdrop {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 250px;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: contain;
	pointer-events: none;
	opacity: 0.35;
	filter: hue-rotate(195deg) saturate(0.4);
	z-index: 1;
}

.discover-inner-container {
	position: relative;
	z-index: 3;
}

.discover-layout-grid {
	display: grid;
	grid-template-columns: 46% 54%;
	gap: 40px;
	align-items: center;
}

.discover-brand-column {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.discover-brand-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.discover-brand-logo {
	max-width: 250px;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.discover-brand-logo:hover {
	transform: translateY(-3px) scale(1.02);
}

.discover-brand-slogan {
	display: inline-block;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: #F99D1C;
	margin-top: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.discover-content-column {
	padding: 0;
}

.discover-kicker {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #0f172a;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.discover-lead-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 28px;
	font-weight: 800;
	color: #12499A;
	line-height: 1.35;
	margin: 0 0 18px;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.discover-text-body p {
	font-size: 14px;
	color: #475569;
	line-height: 1.7;
	margin: 0 0 16px;
	text-align: justify;
	text-wrap: pretty;
}

.discover-text-body p:last-child {
	margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
	.about-lead-title {
		font-size: 30px;
	}
	.stat-number {
		font-size: 38px;
	}
	.stat-plus {
		font-size: 26px;
	}
	.discover-brand-logo {
		max-width: 220px;
	}
}

@media (max-width: 991px) {
	.bs-about-milestones-section {
		padding: 50px 0 50px;
	}
	.about-park-backdrop {
		width: 100%;
		height: 280px;
		top: 0;
		bottom: auto;
		opacity: 0.35;
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	}
	.about-panorama-layer {
		display: none;
	}
	.about-visual-spacer {
		display: none;
	}
	.about-layout-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		min-height: auto;
	}
	.about-content-stage {
		padding: 0 10px;
	}
	.about-lead-title {
		font-size: 26px;
	}
	.about-stats-grid {
		margin-bottom: 20px;
		max-width: 100%;
	}
	.bs-discover-journey-section {
		padding: 45px 0 65px;
	}
	.discover-layout-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.discover-brand-column {
		justify-content: center;
		padding-right: 0;
	}
	.discover-brand-logo {
		max-width: 200px;
	}
	.discover-content-column {
		padding-left: 0;
	}
	.discover-ribbon-decor {
		display: none;
	}
}

@media (max-width: 600px) {
	.bs-about-milestones-section {
		padding: 40px 0 45px;
	}
	.about-lead-title {
		font-size: 22px;
	}
	.about-stats-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.okhub-stat-card {
		padding: 20px 18px 16px;
		min-height: 145px;
	}
	.card-stat-num {
		font-size: 42px;
	}
	.card-stat-sym {
		font-size: 26px;
	}
	.card-stat-desc {
		font-size: 13px;
	}
	.discover-brand-logo {
		max-width: 170px;
	}
	.discover-brand-slogan {
		font-size: 12px;
		margin-top: 10px;
	}
	.discover-lead-title {
		font-size: 21px;
	}
}
 
/* ========================================================
   ALBUM SHOWCASE MARQUEE SECTION (KIOTVIET MOSAIC STYLE)
   ======================================================== */
.album-showcase-section {
	position: relative;
	padding: 75px 0 95px;
	background-color: #071A35;
	background-image: 
		radial-gradient(circle at 50% 12%, rgba(18, 73, 154, 0.45) 0%, transparent 65%),
		radial-gradient(rgba(249, 157, 28, 0.16) 1.2px, transparent 1.2px),
		radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 100% 100%, 36px 36px, 18px 18px;
	background-position: 0 0, 0 0, 9px 9px;
	overflow: hidden;
	color: #ffffff;
}

/* Magic UI Ripple Background Component */
.album-ripple-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ripple-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: radial-gradient(circle, rgba(18, 73, 154, 0.08) 0%, rgba(255, 255, 255, 0.015) 60%, transparent 100%);
	animation: rippleWave 8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
	will-change: transform, opacity;
}

.ripple-circle.ripple-1 { width: 220px; height: 220px; animation-delay: 0s; }
.ripple-circle.ripple-2 { width: 380px; height: 380px; animation-delay: 1s; }
.ripple-circle.ripple-3 { width: 560px; height: 560px; animation-delay: 2s; }
.ripple-circle.ripple-4 { width: 760px; height: 760px; animation-delay: 3s; }
.ripple-circle.ripple-5 { width: 980px; height: 980px; animation-delay: 4s; }
.ripple-circle.ripple-6 { width: 1220px; height: 1220px; animation-delay: 5s; }
.ripple-circle.ripple-7 { width: 1480px; height: 1480px; animation-delay: 6s; }
.ripple-circle.ripple-8 { width: 1760px; height: 1760px; animation-delay: 7s; }

@keyframes rippleWave {
	0% {
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0.35;
		border-color: rgba(249, 157, 28, 0.25);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.06);
		opacity: 0.65;
		border-color: rgba(255, 255, 255, 0.18);
	}
	100% {
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0.35;
		border-color: rgba(249, 157, 28, 0.25);
	}
}

.album-ambient-light {
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 380px;
	background: radial-gradient(ellipse at center, rgba(18, 73, 154, 0.35) 0%, rgba(7, 26, 53, 0) 70%);
	pointer-events: none;
	z-index: 1;
}

.album-section-header {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

.album-kicker {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #F99D1C;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}

.album-title {
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
	margin: 0 0 14px 0;
	text-wrap: balance;
}

.album-title .highlight-accent {
	color: #F99D1C;
	position: relative;
	display: inline-block;
}

.album-subtitle {
	font-size: 15px;
	color: #94A3B8;
	line-height: 1.6;
	max-width: 660px;
	margin: 0 auto;
	text-wrap: pretty;
}

/* Marquee Scroller Wrapper */
.album-marquee-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: 42px;
	z-index: 2;
	user-select: none;
}

/* Left & Right Edge Fades */
.album-marquee-fade-left,
.album-marquee-fade-right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 140px;
	z-index: 4;
	pointer-events: none;
}

.album-marquee-fade-left {
	left: 0;
	background: linear-gradient(90deg, #071A35 0%, rgba(7, 26, 53, 0) 100%);
}

.album-marquee-fade-right {
	right: 0;
	background: linear-gradient(270deg, #081D3C 0%, rgba(8, 29, 60, 0) 100%);
}

/* Marquee Track with 60fps CSS transform */
.album-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: albumMarqueeScroll 52s linear infinite;
}

.album-marquee-container:hover .album-marquee-track {
	animation-play-state: paused;
}

@keyframes albumMarqueeScroll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Group containing 8 alternating columns */
.album-marquee-group {
	display: flex;
	align-items: stretch;
	gap: 16px;
	padding: 0 8px;
}

/* Column 1: Single Tall */
.album-card.col-single {
	width: 250px;
	height: 360px;
	flex-shrink: 0;
}

/* Column 2: Stacked 2 Cards */
.album-col-stacked {
	width: 230px;
	height: 360px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}

.album-card.card-stacked {
	width: 100%;
	height: calc(50% - 7px);
	flex-shrink: 0;
}

/* General Album Card Design (Rule 4: 1rem border-radius) */
.album-card {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	background: #0B254B;
	border: 1px solid rgba(255, 255, 255, 0.12);
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.album-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

/* Modern Gradient Overlay & Caption - Disabled per user request (Không hiển thị text mô tả khi hover) */
.album-card-overlay {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none;
}

.album-card-caption {
	display: none !important;
	opacity: 0 !important;
}

/* Card Interactive Hover */
.album-card:hover {
	border-color: rgba(249, 157, 28, 0.6);
}

.album-card:hover img {
	transform: scale(1.05);
	filter: brightness(1.03);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
	.album-showcase-section {
		padding: 60px 0 70px;
	}
	.album-title {
		font-size: 26px;
	}
	.album-card.col-single,
	.album-col-stacked {
		height: 300px;
	}
	.album-card.col-single {
		width: 210px;
	}
	.album-col-stacked {
		width: 190px;
		gap: 10px;
	}
	.album-card.card-stacked {
		height: calc(50% - 5px);
	}
	.album-marquee-fade-left,
	.album-marquee-fade-right {
		width: 80px;
	}
	.album-marquee-group {
		gap: 12px;
		padding: 0 6px;
	}
}

@media (max-width: 600px) {
	.album-showcase-section {
		padding: 45px 0 55px;
	}
	.album-title {
		font-size: 21px;
	}
	.album-subtitle {
		font-size: 13px;
	}
	.album-marquee-container {
		margin-top: 28px;
	}
	.album-card.col-single,
	.album-col-stacked {
		height: 240px;
	}
	.album-card.col-single {
		width: 175px;
	}
	.album-col-stacked {
		width: 160px;
		gap: 8px;
	}
	.album-card.card-stacked {
		height: calc(50% - 4px);
	}
	.album-marquee-fade-left,
	.album-marquee-fade-right {
		width: 40px;
	}
	.album-marquee-group {
		gap: 10px;
		padding: 0 5px;
	}
}

/* ========================================================
   SCROLL REVEAL MOTION ANIMATIONS
======================================================== */
.bs-reveal-init {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.bs-reveal-init.bs-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bs-reveal-init {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}





/* ========================================================
   ABOUT PAGE STYLING (PAGE: /gioi-thieu)
   Design System Standards:
   - Primary: #12499A | Accent: #F99D1C | Neutral: #64748B
   - Strict No Background Shadows (Rule 3)
   - Border radius: 1rem (16px) across cards & panels
   - Pill radius: 999px
   - Typography: Plus Jakarta Sans
======================================================== */

.about-page-main {
	background: #ffffff;
	color: #1e293b;
	overflow-x: hidden;
	position: relative;
}

/* Star Ambient Background Layer & Animations */
.star-ambient-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.star-glow-core {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

.glow-core-1 {
	top: -120px;
	right: 10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(18, 73, 154, 0.12) 0%, rgba(249, 157, 28, 0.08) 50%, transparent 75%);
	animation: starAuraPulse 8s ease-in-out infinite alternate;
}

.glow-core-2 {
	top: 35%;
	left: -100px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(249, 157, 28, 0.10) 0%, rgba(18, 73, 154, 0.06) 60%, transparent 80%);
	animation: starAuraPulse 10s ease-in-out infinite alternate 2s;
}

@keyframes starAuraPulse {
	0% { transform: scale(0.92) translate(0, 0); opacity: 0.7; }
	100% { transform: scale(1.08) translate(15px, 20px); opacity: 1; }
}

.star-twinkle-sparkle {
	position: absolute;
	color: #F99D1C;
	font-size: 14px;
	opacity: 0.45;
	animation: starTwinkle 3.5s ease-in-out infinite;
	pointer-events: none;
	user-select: none;
}

.star-sparkle-1 { top: 14%; left: 8%; font-size: 16px; animation-delay: 0s; }
.star-sparkle-2 { top: 22%; right: 14%; font-size: 18px; color: #12499A; animation-delay: 1.2s; }
.star-sparkle-3 { top: 65%; left: 12%; font-size: 15px; animation-delay: 0.7s; }
.star-sparkle-4 { top: 78%; right: 8%; font-size: 20px; animation-delay: 2s; }

@keyframes starTwinkle {
	0%, 100% { opacity: 0.25; transform: scale(0.8) rotate(0deg); }
	50% { opacity: 0.85; transform: scale(1.25) rotate(18deg); text-shadow: 0 0 12px rgba(249, 157, 28, 0.6); }
}

/* Highlight text đồng bộ phong cách trang chủ (Brand Blue Gradient — Rule 13) */
.about-page-main .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.about-page-main .highlight-brand::after {
	display: none !important;
}

.about-page-main .cta-title .highlight-brand-light {
	color: #FBBF24;
	background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.about-page-main .highlight-brand-light::after {
	display: none !important;
}

/* 1. About Hero Section */
.about-hero-section {
	position: relative;
	padding: 135px 0 70px;
	background: 
		radial-gradient(ellipse 75% 55% at 50% -10%, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #f8faff 0%, #ffffff 85%);
	border-bottom: none;
}

.about-hero-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 24px;
	background: #ffffff;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 6px rgba(18, 73, 154, 0.04);
	white-space: nowrap;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.about-hero-breadcrumb::-webkit-scrollbar {
	display: none;
}

.about-hero-breadcrumb a {
	color: #12499A;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.2s ease;
}

.about-hero-breadcrumb a:hover {
	color: #0e3a7a;
}

.breadcrumb-sep {
	font-size: 10px;
	color: #cbd5e1;
}

.breadcrumb-current {
	color: #475569;
}

.about-hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.about-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 18px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.about-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.about-badge-text {
	font-size: 13px;
	font-weight: 700;
	color: #12499A;
	letter-spacing: 0.015em;
}

.about-hero-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.28;
	color: #0f172a;
	margin: 0 0 20px;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.about-hero-lead {
	font-size: 15.5px;
	line-height: 1.7;
	color: #475569;
	margin: 0 0 30px;
	max-width: 580px;
	text-wrap: pretty;
}

.about-hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 38px;
	flex-wrap: wrap;
}

.btn-outline-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #334155;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.btn-outline-pill:hover {
	border-color: #12499A;
	color: #12499A;
	background: #f8fafc;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(18, 73, 154, 0.08);
}

.about-hero-stats {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 18px 28px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.04);
}

.stat-pill-item {
	display: flex;
	flex-direction: column;
}

.stat-num-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.stat-num {
	font-size: 24px;
	font-weight: 800;
	color: #12499A;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.stat-star-icon {
	color: #F99D1C;
	font-size: 13px;
	animation: starPulse 2.5s infinite alternate;
}

@keyframes starPulse {
	0% { transform: scale(1); }
	100% { transform: scale(1.22); color: #f59e0b; }
}

.stat-award-icon {
	color: #12499A;
	font-size: 14px;
}

.stat-user-icon {
	color: #16a34a;
	font-size: 14px;
}

.stat-lbl {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	margin-top: 3px;
	white-space: nowrap;
}

.stat-divider {
	width: 1px;
	height: 34px;
	background: #e2e8f0;
}

.about-hero-card-frame {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 12px 36px rgba(18, 73, 154, 0.06);
	transition: transform 0.4s ease;
}

.about-hero-card-frame:hover {
	transform: translateY(-4px);
}

.about-hero-img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}

.about-floating-card {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 1rem;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.08);
}

.floating-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #eff6ff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.floating-text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.floating-text span {
	font-size: 12.5px;
	color: #64748b;
}

.star-badge-floating {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	background: rgba(18, 73, 154, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.star-badge-floating .star-pulsing {
	color: #F99D1C;
	font-size: 12px;
}

.about-story-section {
	padding: 80px 0;
	background: #ffffff;
}

.about-story-card {
	background: 
		radial-gradient(circle at 95% 15%, rgba(239, 246, 255, 0.85) 0%, rgba(254, 243, 199, 0.2) 30%, transparent 60%),
		#ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 48px;
	box-shadow: none;
	position: relative;
	overflow: hidden;
}

.about-story-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 52px;
	align-items: center;
}

.founder-img-card {
	position: relative;
	background: radial-gradient(circle at 50% 20%, #1a56b2 0%, #0e3a7a 75%, #0a2b5c 100%);
	border-radius: 1.25rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: none;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.founder-img-card:hover {
	transform: translateY(-4px);
	border-color: #12499A;
	box-shadow: none;
}

/* Luxury geometric star pattern */
.founder-card-decor-pattern {
	position: absolute;
	inset: 0;
	background-image: 
		radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px),
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 20px 20px, 40px 40px, 40px 40px;
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
}

/* Watermark star overlay icon */
.founder-card-overlay-icon {
	position: absolute;
	top: 16px;
	right: 18px;
	font-size: 110px;
	line-height: 1;
	color: rgba(249, 157, 28, 0.14);
	pointer-events: none;
	z-index: 1;
	transition: transform 0.5s ease, color 0.5s ease;
}

.founder-img-card:hover .founder-card-overlay-icon {
	transform: scale(1.1) rotate(15deg);
	color: rgba(249, 157, 28, 0.22);
}

/* Breathing glow aura behind portrait */
.founder-card-glow-aura {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(249, 157, 28, 0.25) 0%, rgba(18, 73, 154, 0.2) 50%, transparent 75%);
	filter: blur(28px);
	pointer-events: none;
	z-index: 1;
	animation: founderGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes founderGlowPulse {
	0% { opacity: 0.6; transform: translate(-50%, 0) scale(0.92); }
	100% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
}

.founder-portrait-img {
	position: relative;
	z-index: 2;
	width: 100%;
	max-height: 420px;
	object-fit: contain;
	object-position: bottom center;
	display: block;
	transition: transform 0.4s ease;
}

.founder-img-card:hover .founder-portrait-img {
	transform: scale(1.02);
}

.founder-caption-box {
	position: relative;
	z-index: 3;
	width: 100%;
	background: #ffffff;
	padding: 20px 22px;
	border-top: 1px solid #e2e8f0;
	text-align: center;
}

.founder-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 4px;
}

.founder-title {
	font-size: 12.5px;
	font-weight: 700;
	color: #12499A;
	margin-bottom: 4px;
}

.founder-credential {
	font-size: 12px;
	color: #64748b;
}

/* Luxury Section Tag Pill with generous icon gap */
.section-tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #12499A;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.04);
	margin-bottom: 8px;
}

.section-tag-pill i {
	font-size: 14px;
	display: inline-block;
	flex-shrink: 0;
	margin-right: 2px;
}

.section-tag-pill span {
	line-height: 1.2;
}

.narrative-heading {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.35;
	color: #0f172a;
	margin: 14px 0 20px;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.narrative-body p {
	font-size: 15px;
	line-height: 1.72;
	color: #475569;
	margin-bottom: 16px;
	text-wrap: pretty;
}

.philosophy-quote-box {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 24px 28px;
	margin-top: 24px;
	position: relative;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.03);
}

.quote-symbol {
	color: #F99D1C;
	font-size: 22px;
	margin-bottom: 8px;
}

.quote-content {
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.65;
	color: #1e293b;
	margin: 0 0 12px;
	text-wrap: pretty;
}

.quote-author {
	font-size: 12.5px;
	font-weight: 700;
	color: #12499A;
}

/* 3. Section Mosaic Số Liệu & Our Mission */
.about-mosaic-section {
	padding: 90px 0 85px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #ffffff 100%);
	position: relative;
}

.mosaic-section-header {
	max-width: 720px;
	margin: 0 auto 48px;
}

.mosaic-section-header.header-left-aligned {
	margin: 0 0 44px 0;
	max-width: 760px;
	text-align: left;
}

.mosaic-headline {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 34px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.32;
	letter-spacing: -0.025em;
	margin: 14px 0 16px;
	text-wrap: balance;
}

.mosaic-sub-lead {
	font-size: 15.5px;
	line-height: 1.7;
	color: #64748b;
	margin: 0;
	text-wrap: pretty;
}

/* Mosaic Media Grid (3 Columns) */
.mosaic-media-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	margin-bottom: 56px;
	align-items: stretch;
}

.mosaic-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mosaic-col-tall .mosaic-img-frame {
	height: 100%;
	min-height: 480px;
}

.mosaic-img-frame {
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.04);
}

.mosaic-img-frame.frame-compact {
	height: 228px;
}

.mosaic-img-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mosaic-img-frame:hover img {
	transform: scale(1.04);
}

.mosaic-frame-tag {
	position: absolute;
	bottom: 14px;
	left: 14px;
	background: rgba(15, 23, 42, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Thẻ số liệu lớn: animation nhịp thở nhẹ + màu chuẩn brand */
@keyframes statCardAura {
	0%, 100% {
		box-shadow: 0 8px 24px rgba(249, 157, 28, 0.16);
	}
	50% {
		box-shadow: 0 14px 34px rgba(249, 157, 28, 0.28);
	}
}

@keyframes statCardBlueAura {
	0%, 100% {
		box-shadow: 0 8px 24px rgba(18, 73, 154, 0.16);
	}
	50% {
		box-shadow: 0 14px 34px rgba(18, 73, 154, 0.28);
	}
}

.mosaic-stat-card {
	border-radius: 1.25rem;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 228px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.mosaic-stat-card:hover {
	transform: translateY(-5px);
}

/* Biểu tượng chìm mờ làm nền cho card */
.stat-card-overlay-icon {
	position: absolute;
	right: 12px;
	bottom: 8px;
	font-size: 86px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.12);
	pointer-events: none;
	user-select: none;
	transition: transform 0.4s ease, color 0.4s ease;
	z-index: 1;
}

.mosaic-stat-card:hover .stat-card-overlay-icon {
	transform: scale(1.08) rotate(-6deg);
	color: rgba(255, 255, 255, 0.18);
}

/* Card màu cam chuẩn Star Amber #F99D1C */
.mosaic-stat-card.card-accent-orange {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	color: #ffffff;
	animation: statCardAura 4s ease-in-out infinite;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Card màu xanh Royal Blue chuẩn brand #12499A */
.mosaic-stat-card.card-brand-blue {
	background: linear-gradient(135deg, #0e3a7a 0%, #12499A 55%, #185ec2 100%);
	color: #ffffff;
	animation: statCardBlueAura 4s ease-in-out infinite 2s;
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.stat-card-badge-row {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	opacity: 0.95;
	margin-bottom: 6px;
}

.stat-card-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffffff;
	position: relative;
}

.stat-card-dot.pulse-amber {
	background: #ffffff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: dotRadarPulse 2s infinite;
}

.stat-card-dot.dot-star {
	background: #F99D1C;
}

.stat-card-dot.pulse-blue {
	background: #F99D1C;
	box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.7);
	animation: dotRadarPulseAmber 2s infinite;
}

@keyframes dotRadarPulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	70% {
		transform: scale(1.1);
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

@keyframes dotRadarPulseAmber {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.7);
	}
	70% {
		transform: scale(1.1);
		box-shadow: 0 0 0 6px rgba(249, 157, 28, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0);
	}
}

.stat-big-num {
	position: relative;
	z-index: 2;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #ffffff !important;
	margin-bottom: 8px;
	text-shadow: none !important;
}

.stat-big-title {
	position: relative;
	z-index: 2;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #ffffff;
	margin-bottom: 6px;
	text-shadow: none !important;
}

.stat-big-desc {
	position: relative;
	z-index: 2;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	text-wrap: pretty;
	text-shadow: none !important;
}

/* Khoảng Our Mission Banner lớn: Chiều cao mở rộng thoáng đãng, controls bên phải */
.our-mission-banner-wrap {
	position: relative;
	width: 100%;
	margin-top: 20px;
}

.our-mission-banner-card {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: flex-end;
	padding: 56px 52px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
}

.mission-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	transition: transform 0.6s ease;
}

.our-mission-banner-card > .bs-img-editable-wrap {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	display: block !important;
}

.our-mission-banner-card > .bs-img-editable-wrap .mission-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.our-mission-banner-card:hover .mission-banner-img {
	transform: scale(1.03);
}

.mission-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.68) 42%, rgba(15, 23, 42, 0.94) 100%);
	pointer-events: none;
	z-index: 2;
}

.mission-banner-content {
	position: relative;
	z-index: 3;
	color: #ffffff;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
}

.mission-banner-text-side {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 680px;
}

.mission-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	margin-bottom: 14px;
}

@keyframes starRotateAnim {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.mission-star-icon {
	color: #F99D1C;
	font-size: 11px;
	display: inline-block;
	animation: starRotateAnim 5s linear infinite;
	transform-origin: center center;
}

.mission-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 34px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 14px;
	letter-spacing: -0.02em;
}

.mission-desc {
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 22px;
	text-wrap: pretty;
}

.mission-tags-list {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mission-pill-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #ffffff;
}

.mission-pill-tag i {
	color: #4ade80;
	font-size: 13px;
}

/* Right Actions in Mission Banner */
.mission-banner-right-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	flex-shrink: 0;
}

.mission-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: #F99D1C;
	color: #ffffff;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(249, 157, 28, 0.35);
	transition: all 0.25s ease;
	white-space: nowrap;
}

.mission-cta-pill:hover {
	background: #ea8c0c;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(249, 157, 28, 0.45);
	color: #ffffff;
}

.mission-arrow-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mission-nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.25s ease;
}

.mission-nav-btn:hover,
.mission-nav-btn.active {
	background: #ffffff;
	color: #12499A;
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* 4. Four Pillars Section: Split 6/4 Layout with Horizontal Carousel */
.about-pillars-section {
	position: relative;
	padding: 95px 0;
	background: 
		radial-gradient(ellipse 60% 50% at 90% 20%, rgba(239, 246, 255, 0.7) 0%, transparent 60%),
		radial-gradient(circle at 10% 80%, rgba(254, 243, 199, 0.25) 0%, transparent 45%),
		linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	overflow: hidden;
}

.about-pillars-section::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 5%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(18, 73, 154, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

.pillars-split-layout {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 48px;
	align-items: center;
}

.pillars-intro-col {
	padding-right: 12px;
}

.pillars-split-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.32;
	letter-spacing: -0.02em;
	margin: 14px 0 16px;
	text-wrap: balance;
}

.pillars-split-desc {
	font-size: 15px;
	line-height: 1.68;
	color: #64748b;
	margin-bottom: 24px;
	text-wrap: pretty;
}

.pillars-intro-highlights {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 30px;
}

.highlight-check-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1e293b;
}

.highlight-check-item i {
	color: #12499A;
	font-size: 16px;
	flex-shrink: 0;
}

/* Pillars Carousel Controls */
.pillars-carousel-nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pillar-nav-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.04);
}

.pillar-nav-btn:hover {
	background: #12499A;
	color: #ffffff;
	border-color: #12499A;
	transform: scale(1.06);
}

.pillar-dots-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pillar-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #cbd5e1;
	cursor: pointer;
	transition: all 0.3s ease;
}

.pillar-dot.active {
	width: 26px;
	background: #12499A;
}

/* Pillars Carousel Right Track */
.pillars-carousel-col {
	position: relative;
	overflow: hidden;
	padding: 16px 4px;
}

.pillars-carousel-track {
	display: flex;
	gap: 20px;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pillars-carousel-track .pillar-card {
	flex: 0 0 320px;
	width: 320px;
	max-width: 320px;
	min-height: 410px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 30px 24px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.04);
	box-sizing: border-box;
}

.pillars-carousel-track .pillar-card:hover {
	border-color: #12499A;
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(18, 73, 154, 0.10);
}

.pillar-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 20px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.pillar-card:hover .pillar-icon-box {
	transform: scale(1.1);
}

.pillar-icon-box.bg-blue { background: #eff6ff; color: #12499A; }
.pillar-icon-box.bg-amber { background: #fffbeb; color: #d97706; }
.pillar-icon-box.bg-green { background: #f0fdf4; color: #16a34a; }
.pillar-icon-box.bg-purple { background: #faf5ff; color: #9333ea; }

.pillar-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 17.5px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 12px;
	letter-spacing: -0.015em;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.pillar-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: #64748b;
	margin-bottom: 20px;
	text-wrap: pretty;
	min-height: 70px;
	flex-grow: 1;
}

.pillar-feature-list {
	list-style: none;
	padding: 0;
	margin: auto 0 0 0;
	border-top: 1px solid #f1f5f9;
	padding-top: 16px;
}

.pillar-feature-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 8px;
}

.pillar-feature-list li i {
	color: #16a34a;
	font-size: 13px;
	flex-shrink: 0;
}

/* 5. Campus Section: Sáng sủa, sạch sẽ, chuẩn luxury EdTech */
.about-campus-section {
	padding: 70px 0;
	background: #ffffff;
}

.campus-inner-panel.campus-light-theme {
	position: relative;
	background: 
		radial-gradient(circle at 85% 15%, rgba(249, 157, 28, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 10% 80%, rgba(18, 73, 154, 0.05) 0%, transparent 50%),
		linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 48px;
	color: #0f172a;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(18, 73, 154, 0.04);
}

.campus-inner-panel.campus-light-theme .campus-heading {
	color: #0f172a;
}

.campus-inner-panel.campus-light-theme .campus-sub-text {
	color: #64748b;
}

.campus-inner-panel.campus-light-theme .campus-img-item {
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.05);
}

.campus-inner-panel.campus-light-theme .campus-star-beam {
	background: radial-gradient(circle, rgba(249, 157, 28, 0.12) 0%, rgba(18, 73, 154, 0.08) 45%, transparent 70%);
}

.campus-header-row {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 36px;
	align-items: flex-end;
	margin-bottom: 34px;
}

.campus-heading {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 29px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.campus-sub-text {
	font-size: 14.5px;
	line-height: 1.65;
	color: #64748b;
	text-wrap: pretty;
}

.campus-gallery-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 22px;
}

.campus-img-item {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	height: 270px;
	border: 1px solid #e2e8f0;
}

.campus-img-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.campus-img-item:hover img {
	transform: scale(1.05);
}

.campus-img-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 18px;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.85) 100%);
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	display: flex;
	align-items: center;
	gap: 8px;
}

.campus-img-overlay i {
	color: #F99D1C;
	font-size: 14px;
}

/* 6. CTA Form Section */
.about-cta-section {
	padding: 80px 0 110px;
	background: #ffffff;
}

.about-cta-card {
	position: relative;
	background: #0e3a7a url('../images/gradient-blue.png') center / cover no-repeat;
	border-radius: 1rem;
	padding: 56px 52px;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(18, 73, 154, 0.15);
}

.cta-star-flare {
	position: absolute;
	top: -100px;
	right: -100px;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, rgba(249, 157, 28, 0.22) 0%, transparent 65%);
	filter: blur(50px);
	pointer-events: none;
}

.cta-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.32;
	color: #ffffff;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.cta-desc {
	font-size: 15px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 26px;
	text-wrap: pretty;
}

.cta-benefits-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 30px;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

.benefit-item i {
	color: #4ade80;
	font-size: 15px;
}

/* Cặp nút Hotline & Zalo chính thức */
.cta-contact-channels-group {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.cta-contact-box {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-contact-box:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.channel-icon-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.channel-icon-circle.icon-hotline {
	background: transparent;
}

.channel-icon-circle.icon-hotline img {
	width: 32px;
	height: 32px;
	display: block;
}

.channel-icon-circle.icon-zalo {
	background: #ffffff;
	padding: 5px;
}

.channel-icon-circle.icon-zalo img {
	width: 22px;
	height: 22px;
	display: block;
	object-fit: contain;
}

.channel-info-meta {
	display: flex;
	flex-direction: column;
}

.channel-tag {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.85);
	text-transform: none;
	font-weight: 500;
}

.channel-val {
	font-size: 16px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 0.02em;
}

.about-lead-form-box {
	background: #ffffff;
	border-radius: 1rem;
	padding: 34px 30px;
	color: #0f172a;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.form-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
	letter-spacing: -0.015em;
}

.form-sub {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 20px;
}

.form-group-field {
	margin-bottom: 16px;
}

.form-group-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}

.input-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.input-icon-wrap i {
	position: absolute;
	left: 14px;
	color: #94a3b8;
	font-size: 14px;
}

.input-icon-wrap input,
.input-icon-wrap select {
	width: 100%;
	padding: 11px 14px 11px 40px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font-size: 13.5px;
	font-family: inherit;
	background: #f8fafc;
	color: #0f172a;
	transition: all 0.2s ease;
	outline: none;
}

.input-icon-wrap input:focus,
.input-icon-wrap select:focus {
	border-color: #12499A;
	background: #ffffff;
}

.about-btn-unified {
	width: 100% !important;
	margin-top: 10px;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.25);
}

.about-btn-unified:hover {
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.35) !important;
}

.btn-form-submit {
	width: 100%;
	padding: 13px 20px;
	background: #12499A;
	color: #ffffff;
	border: none;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	margin-top: 10px;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.25);
}

.btn-form-submit:hover {
	background: #0e3a7a;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.35);
}

/* Responsive for About page */
@media (max-width: 1024px) {
	.about-hero-grid,
	.about-story-grid,
	.about-cta-card,
	.pillars-split-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.pillars-intro-col {
		padding-right: 0;
	}
	.campus-gallery-grid {
		grid-template-columns: 1fr;
		height: auto;
	}
	.campus-img-item {
		height: 220px;
	}
	.mission-banner-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.mission-banner-right-actions {
		align-items: flex-start;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}
}

@media (max-width: 640px) {
	.about-hero-title {
		font-size: 28px;
	}
	.about-hero-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		width: 100%;
	}
	.stat-divider {
		display: none;
	}
	.about-story-card,
	.campus-inner-panel,
	.about-cta-card {
		padding: 24px 18px;
	}
	.cta-contact-channels-group {
		flex-direction: column;
		align-items: stretch;
	}
	.cta-contact-box {
		width: 100%;
	}
	.our-mission-banner-card {
		padding: 30px 20px;
		min-height: 440px;
	}
	.mission-title {
		font-size: 26px;
	}
}

/* ========================================================
   CONTACT PAGE STYLING (PAGE: /lien-he)
   Design System Standards:
   - Primary: #12499A | Accent: #F99D1C | Neutral: #64748B
   - Strict No Background Shadows (Rule 3)
   - Border radius: 1rem (16px) across cards & panels
   - Pill radius: 999px
   - Typography: Plus Jakarta Sans
======================================================== */
.contact-page-main {
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

/* 1. Contact Hero (White Overlay at Top & Bottom, Vivid Photo in Middle) */
.contact-hero-section {
	position: relative;
	padding: 70px 0 95px;
	background: #ffffff;
	overflow: hidden;
}

.contact-hero-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.contact-hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
	transform: scale(1.02);
	opacity: 0.82; /* Vivid, bright image */
	filter: saturate(1.10) contrast(1.06) brightness(1.02);
}

.contact-hero-gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		180deg,
		#ffffff 0%,
		rgba(255, 255, 255, 0.98) 22%,
		rgba(255, 255, 255, 0.88) 36%,
		rgba(255, 255, 255, 0.12) 52%,
		rgba(255, 255, 255, 0.15) 68%,
		rgba(255, 255, 255, 0.78) 85%,
		#ffffff 100%
	);
}

.contact-hero-container {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Breadcrumb synchronized with About page */
.contact-hero-breadcrumb.about-hero-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 22px;
	background: #ffffff;
	padding: 6px 18px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.contact-hero-breadcrumb a {
	color: #12499A;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.2s ease;
}

.contact-hero-breadcrumb a:hover {
	color: #0e3a7a;
}

.contact-hero-breadcrumb .breadcrumb-sep {
	font-size: 10px;
	color: #cbd5e1;
}

.contact-hero-breadcrumb .breadcrumb-current {
	color: #475569;
}

.contact-hero-header {
	max-width: 860px;
	margin: 0 auto 42px;
	text-align: center;
}

.contact-hero-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 38px;
	font-weight: 800;
	color: #0f172a; /* Clean dark text on top white overlay */
	line-height: 1.35;
	margin: 0 0 16px;
	letter-spacing: -0.025em;
	text-wrap: balance;
	text-shadow: none !important; /* Strict no text shadow */
}

.contact-hero-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.contact-hero-lead {
	font-size: 16px;
	color: #475569;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 740px;
	text-wrap: pretty;
	text-shadow: none !important; /* Strict no text shadow */
}

/* 2. Main Card Frame (Seamless Borderless Floating Card inside Flowing BG) */
.contact-main-card-frame {
	width: 100%;
	background: #ffffff;
	border: none !important; /* Xoá viền border của card */
	border-radius: 1.5rem;
	padding: 46px 48px;
	position: relative;
	box-shadow: 0 16px 48px rgba(18, 73, 154, 0.08), 0 2px 12px rgba(18, 73, 154, 0.04);
	text-align: left;
}

.contact-split-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 52px;
	align-items: flex-start;
}

/* Left Column: Company Info */
.contact-info-col {
	display: flex;
	flex-direction: column;
}

.contact-info-intro {
	margin-bottom: 24px;
}

.contact-info-heading {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 8px;
}

.contact-info-sub {
	font-size: 14px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

/* Minimalist Checklist (Image 3 inspired: No outer card boxes, just clean rows) */
.contact-simple-checklist {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 30px;
}

.contact-list-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	padding: 6px 0;
	transition: transform 0.2s ease;
}

.contact-list-row:not(.static-row):hover {
	transform: translateX(4px);
}

.contact-list-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	transition: transform 0.2s ease;
}

.contact-list-row:hover .contact-list-icon {
	transform: scale(1.08);
}

.contact-list-icon.icon-blue {
	background: #eff6ff;
	color: #12499A;
	border: 1px solid #dbeafe;
}

.contact-list-icon.icon-cyan {
	background: #ecfeff;
	color: #0891b2;
	border: 1px solid #cffafe;
}

.contact-list-icon.icon-amber {
	background: #fffbeb;
	color: #d97706;
	border: 1px solid #fef3c7;
}

.contact-list-icon.icon-emerald {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #d1fae5;
}

.contact-list-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.contact-list-label {
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	line-height: 1.3;
}

.contact-list-val {
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
	word-break: break-word;
}

.contact-list-row:not(.static-row):hover .contact-list-val {
	color: #12499A;
}

.contact-quick-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.contact-btn-zalo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	color: #12499A;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	text-decoration: none;
	transition: all 0.2s ease;
}

.contact-btn-zalo:hover {
	border-color: #12499A;
	background: #eff6ff;
	transform: translateY(-1px);
}

.contact-btn-zalo .btn-zalo-img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

.contact-list-icon .contact-zalo-row-icon {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}

/* Right Column: Inquiry Form Card (Borderless, Subtle Icon Overlay) */
.contact-form-col {
	display: flex;
	flex-direction: column;
}

.contact-form-card {
	position: relative;
	background: #f8fafc;
	border: none !important; /* Xoá viền card */
	border-radius: 1.25rem;
	padding: 34px 32px;
	overflow: hidden;
}

/* Subtle Icon Overlay in Empty Space */
.contact-card-overlay-decor {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0.07;
	z-index: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.contact-card-overlay-decor .overlay-brand-icon {
	font-size: 40px;
	color: #12499A;
	transform: rotate(-15deg);
}

.contact-form-card:hover .contact-card-overlay-decor {
	opacity: 0.12;
	transform: rotate(5deg) scale(1.05);
}

.form-card-header {
	position: relative;
	z-index: 1;
	margin-bottom: 22px;
}

.form-card-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 6px;
}

.form-card-desc {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.55;
	margin: 0;
}

.contact-inquiry-form {
	position: relative;
	z-index: 1;
}

/* Form Fields */
.form-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.form-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.form-fields-grid .form-field-wrap {
	margin-bottom: 0;
}

.form-field-label {
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
}

.form-field-label .required {
	color: #dc2626;
}

.form-input-box,
.form-textarea-box {
	position: relative;
	display: flex;
	align-items: center;
}

.form-input-box .input-icon,
.form-textarea-box .textarea-icon {
	position: absolute;
	left: 14px;
	font-size: 14px;
	color: #94a3b8;
	pointer-events: none;
}

.form-textarea-box .textarea-icon {
	top: 13px;
}

.form-input-box input,
.form-textarea-box textarea {
	width: 100%;
	padding: 10px 14px 10px 38px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 13.5px;
	font-family: inherit;
	color: #0f172a;
	background: #ffffff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.form-textarea-box textarea {
	padding-top: 11px;
	resize: vertical;
	min-height: 80px;
}

.form-input-box input:focus,
.form-textarea-box textarea:focus {
	border-color: #12499A;
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.08);
}

.form-submit-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}

/* Submit button full width matching homepage .btn-star-glow */
button.btn-star-glow.btn-submit-full {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	cursor: pointer;
	padding: 0;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: none;
}

button.btn-star-glow.btn-submit-full:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: none !important;
}

button.btn-star-glow.btn-submit-full .btn-star-glow-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	width: 100%;
}

button.btn-star-glow.btn-submit-full:hover .btn-star-icon-wrap {
	transform: scale(1.22) rotate(360deg);
}

button.btn-star-glow.btn-submit-full:hover .btn-star-glow-arrow {
	transform: translateX(4px);
}

.form-privacy-note {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: #64748b;
	text-align: center;
}

.form-alert-msg {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
}

.form-alert-msg.alert-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.form-alert-msg.alert-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

/* 3. Google Maps Section (Clean Nexorya Embed, zero floating card) */
.contact-map-section {
	padding: 60px 0 85px;
	background: #ffffff;
}

.contact-map-container {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.04);
}

.map-iframe-wrapper {
	width: 100%;
	height: 460px;
	position: relative;
}

.map-iframe-wrapper iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Responsive for Contact Page */
@media (max-width: 991px) {
	.contact-hero-section {
		padding: 65px 0 80px;
	}
	.contact-main-card-frame {
		padding: 30px 24px;
		border-radius: 1.25rem;
	}
	.contact-split-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.contact-hero-title {
		font-size: 28px;
	}
	.map-iframe-wrapper {
		height: 380px;
	}
}

@media (max-width: 640px) {
	.contact-hero-section {
		padding: 50px 0 65px;
	}
	.contact-main-card-frame {
		padding: 24px 16px;
	}
	.form-fields-grid {
		grid-template-columns: 1fr;
	}
	.contact-form-card {
		padding: 22px 16px;
	}
	.contact-hero-title {
		font-size: 24px;
	}
	.contact-quick-actions {
		flex-direction: column;
		width: 100%;
	}
	.contact-btn-glow,
	.contact-btn-zalo {
		width: 100%;
		justify-content: center;
	}
}


/* ========================================================
   TEACHERS DIRECTORY PAGE (METABALLS INNOVATORS INSPIRED STYLE)
   - Layout: Hero Header + Category Filter Tabs + 3-Col Cards Grid
   - Frosted Glassmorphism Panel on portrait photos with notch arrow
   - Strict Brand Standards: #12499A, #F99D1C, No dark shadows
======================================================== */
.teachers-page-main {
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

/* 1. Hero Section */
.teachers-hero-section {
	padding: 70px 0 35px;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	border-bottom: 1px solid #f1f5f9;
}

.teachers-hero-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 860px;
	margin: 0 auto;
}

.teachers-hero-breadcrumb.about-hero-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin: 0 auto 22px;
	background: #ffffff;
	padding: 6px 18px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.teachers-hero-breadcrumb a {
	color: #12499A;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.2s ease;
}

.teachers-hero-breadcrumb a:hover {
	color: #0e3a7a;
}

.teachers-pill-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #eff6ff;
	border: 1px solid #dbeafe;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #12499A;
	margin-bottom: 0;
}

.teachers-pill-badge .badge-star {
	color: #F99D1C;
	font-size: 14px;
}

.teachers-hero-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 40px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 auto 16px;
	max-width: 820px;
	letter-spacing: -0.025em;
	text-wrap: balance;
	text-align: center;
	text-shadow: none !important;
}

.teachers-hero-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.teachers-hero-lead {
	font-size: 16px;
	color: #475569;
	line-height: 1.7;
	margin: 0 auto 34px;
	max-width: 720px;
	text-wrap: pretty;
	text-align: center;
	text-shadow: none !important;
}

/* Category Filter Tabs Centered */
.teachers-filter-tabs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	margin: 0 auto;
	flex-wrap: wrap;
}

.filter-tab-pill {
	border: none;
	background: transparent;
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
	cursor: pointer;
	transition: all 0.22s ease;
}

.filter-tab-pill:hover {
	color: #12499A;
}

.filter-tab-pill.active {
	background: #12499A;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.25);
}

/* 2. Grid Section */
.teachers-grid-section {
	padding: 60px 0 95px;
	background: #ffffff;
}

.teachers-portrait-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 54px;
}

/* Individual Portrait Card */
.teacher-portrait-card {
	position: relative;
	height: 480px;
	border-radius: 1.5rem; /* 24px */
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	box-shadow: 0 8px 30px rgba(18, 73, 154, 0.06);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.teacher-portrait-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(18, 73, 154, 0.12);
}

.teacher-img-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.teacher-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.teacher-portrait-card:hover .teacher-photo {
	transform: scale(1.05);
}

.teacher-img-shade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.22) 100%);
	pointer-events: none;
}

/* Top Badge */
.teacher-top-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	color: #0f172a;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.teacher-top-badge .badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F99D1C;
}

/* 3. Floating Bottom Wrap & Frosted Glass Panel (Metaballs Innovators Cutout Style) */
.teacher-bottom-wrap {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 3;
}

/* Circular Arrow Action Button sitting inside the carved notch */
.teacher-notch-action {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.14);
	z-index: 5;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.teacher-notch-action svg {
	width: 15px;
	height: 15px;
	transition: transform 0.25s ease;
}

.teacher-notch-action:hover,
.teacher-portrait-card:hover .teacher-notch-action {
	background: #12499A;
	color: #ffffff;
	border-color: #12499A;
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.3);
}

.teacher-portrait-card:hover .teacher-notch-action svg {
	transform: translate(1px, -1px);
}

/* Frosted Glassmorphism Panel at bottom with precision circular notch cutout */
.teacher-frosted-panel {
	position: relative;
	background: rgba(255, 255, 255, 0.90);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 22px 20px 20px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 10px 28px rgba(18, 73, 154, 0.08);
	-webkit-mask-image: radial-gradient(circle 35px at calc(100% - 24px) 24px, transparent 0, transparent 34px, black 35px);
	mask-image: radial-gradient(circle 35px at calc(100% - 24px) 24px, transparent 0, transparent 34px, black 35px);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.teacher-portrait-card:hover .teacher-frosted-panel {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 14px 36px rgba(18, 73, 154, 0.12);
}

.teacher-panel-content {
	padding-right: 12px;
}

.teacher-name {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 0 4px;
}

.teacher-role {
	font-size: 12.5px;
	font-weight: 700;
	color: #12499A;
	margin-bottom: 8px;
	line-height: 1.4;
}

.teacher-bio {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.5;
	margin: 0 0 14px;
	padding-right: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Social links row */
.teacher-social-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.social-circle-link {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.social-circle-link:hover {
	border-color: #12499A;
	background: #12499A;
	color: #ffffff;
	transform: translateY(-2px);
}

/* Bottom CTA Pill */
.teachers-bottom-cta {
	text-align: center;
	margin-top: 10px;
}

.btn-teachers-cta {
	display: inline-flex;
	padding: 12px 32px;
}

/* Responsive */
@media (max-width: 1024px) {
	.teachers-portrait-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.teachers-hero-title {
		font-size: 32px;
	}
}

@media (max-width: 640px) {
	.teachers-portrait-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.teacher-portrait-card {
		height: 440px;
	}
	.teachers-hero-title {
		font-size: 26px;
	}
	.teachers-hero-section {
		padding: 50px 0 25px;
	}
}


/* ========================================================
   404 ERROR PAGE (SKY ATMOSPHERE, CLOUDS & STAR EFFECTS)
   - Giant 404 display number immersed in floating cloud sea
   - Atmospheric sky gradient with side clouds
   - Twinkling star ambient layer & shooting star
   - Brand compliant: #12499A, #F99D1C, no heavy shadows, pill buttons
======================================================== */
.error-404-main {
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

.error-404-section {
	position: relative;
	min-height: calc(100vh - 120px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: 
		radial-gradient(circle 850px at 50% 38%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 48%, rgba(224, 242, 254, 0.55) 100%),
		linear-gradient(180deg, #dbeafe 0%, #e0f2fe 32%, #f0f9ff 72%, #ffffff 100%);
	padding: 80px 24px 90px;
}

/* Sky Side Clouds */
.sky-side-cloud {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	opacity: 0.85;
}

.sky-side-cloud.left {
	top: 12%;
	left: -80px;
	width: 480px;
	height: 400px;
	filter: blur(2px);
	animation: floatLeftCloud 20s ease-in-out infinite alternate;
}

.sky-side-cloud.right {
	top: 15%;
	right: -80px;
	width: 500px;
	height: 420px;
	filter: blur(3px);
	animation: floatRightCloud 24s ease-in-out infinite alternate;
}

@keyframes floatLeftCloud {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(25px, -15px) scale(1.03); }
}

@keyframes floatRightCloud {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-30px, 18px) scale(1.02); }
}

/* Twinkling Star Ambient Layers */
.sky-stars-wrapper {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

.star-twinkle {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: starPulse 3.5s ease-in-out infinite alternate;
}

.star-twinkle svg {
	filter: drop-shadow(0 0 6px currentColor);
}

.star-amber {
	color: #F99D1C;
}

.star-blue {
	color: #12499A;
	opacity: 0.6;
}

.star-white {
	color: #ffffff;
}

.st-1 { top: 10%; left: 16%; width: 22px; height: 22px; animation-delay: 0s; }
.st-2 { top: 22%; left: 24%; width: 14px; height: 14px; animation-delay: 1.2s; }
.st-3 { top: 12%; right: 18%; width: 24px; height: 24px; animation-delay: 0.6s; }
.st-4 { top: 26%; right: 12%; width: 16px; height: 16px; animation-delay: 2.1s; }
.st-5 { top: 7%; left: 48%; width: 18px; height: 18px; animation-delay: 1.7s; }
.st-6 { top: 36%; left: 10%; width: 14px; height: 14px; animation-delay: 2.8s; }
.st-7 { top: 32%; right: 26%; width: 15px; height: 15px; animation-delay: 0.9s; }
.st-8 { top: 16%; right: 36%; width: 13px; height: 13px; animation-delay: 2.4s; }
.st-9 { top: 42%; left: 30%; width: 12px; height: 12px; animation-delay: 1.5s; }
.st-10 { top: 40%; right: 20%; width: 14px; height: 14px; animation-delay: 3.1s; }

/* Subtle Golden Shooting Star Track */
.shooting-star-track {
	position: absolute;
	top: 14%;
	left: 62%;
	width: 140px;
	height: 2px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(249,157,28,0.7) 40%, #ffffff 100%);
	transform: rotate(-30deg);
	opacity: 0;
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(249, 157, 28, 0.8);
	animation: shootingStarAnim 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes starPulse {
	0% { transform: scale(0.7) rotate(0deg); opacity: 0.3; }
	50% { transform: scale(1.15) rotate(15deg); opacity: 1; }
	100% { transform: scale(0.85) rotate(-10deg); opacity: 0.45; }
}

@keyframes shootingStarAnim {
	0%, 75% { opacity: 0; transform: translate(0, 0) rotate(-30deg); }
	80% { opacity: 1; }
	88% { opacity: 0; transform: translate(-220px, 130px) rotate(-30deg); }
	100% { opacity: 0; }
}

/* Center Content Container */
.error-stage-container {
	position: relative;
	z-index: 4;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 404 Visual Stage with Cloud Horizon */
.error-visual-box {
	position: relative;
	width: 100%;
	max-width: 880px;
	height: 310px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 10px;
}

/* Giant 404 Display Typography in Brand Blue: Expanded & Clearly Visible */
.giant-404-text {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(180px, 26vw, 300px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.015em;
	background: linear-gradient(180deg, #12499A 0%, #1552ac 40%, #1e62c8 70%, #4b89e8 95%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	user-select: none;
	position: relative;
	z-index: 2;
	margin-top: 5px;
	-webkit-mask-image: linear-gradient(180deg, black 0%, black 72%, rgba(0,0,0,0.85) 88%, transparent 100%);
	mask-image: linear-gradient(180deg, black 0%, black 72%, rgba(0,0,0,0.85) 88%, transparent 100%);
}

/* Foreground Cloud Sea Covering only the base of 404 */
.error-cloud-sea {
	position: absolute;
	bottom: -20px;
	left: -40px;
	right: -40px;
	height: 155px;
	z-index: 3;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.cloud-sea-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 -4px 18px rgba(255, 255, 255, 0.95));
	animation: floatCloudSea 16s ease-in-out infinite alternate;
}

@keyframes floatCloudSea {
	0% { transform: translateY(0); }
	100% { transform: translateY(-4px); }
}

/* Text and CTA Block */
.error-details-block {
	position: relative;
	z-index: 5;
	max-width: 680px;
	margin: 0 auto;
}

.error-title-main {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.025em;
	line-height: 1.35;
	margin: 0 auto 14px;
	text-wrap: balance;
	max-width: 620px;
	text-shadow: none !important;
}

.error-lead-message {
	font-size: 15.5px;
	color: #64748b;
	line-height: 1.7;
	margin: 0 auto 32px;
	max-width: 580px;
	text-wrap: pretty;
	text-shadow: none !important;
}

/* Actions Row */
.error-buttons-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Primary Button: Exact Homepage Style (.btn-sync-unified), NO border, NO shadow */
.btn-404-home.btn-sync-unified,
.btn-404-home {
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 30px;
	min-height: 48px;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%);
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
	outline: none !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
}

.btn-404-home:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

/* Star Effect: Continuous gentle pulse + 360deg rotation on hover */
.btn-404-home .btn-star-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transform-origin: center center;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	animation: starGentlePulse 3.5s ease-in-out infinite;
}

.btn-404-home .btn-star-icon-wrap svg {
	width: 17px;
	height: 17px;
	display: block;
	transform-origin: center center;
	filter: drop-shadow(0 0 4px rgba(249, 157, 28, 0.5));
}

.btn-404-home:hover .btn-star-icon-wrap {
	animation: none;
	transform: scale(1.3) rotate(360deg);
}

.btn-404-home .btn-arrow-icon {
	color: #F99D1C !important;
	font-size: 13px;
	margin-left: 2px;
	transition: transform 0.22s ease;
}

.btn-404-home:hover .btn-arrow-icon {
	transform: translateX(4px);
}

/* Secondary Button: Flat Tinted Pill, NO border, NO shadow */
.btn-404-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	min-height: 48px;
	background: #eff6ff;
	color: #12499A !important;
	border: none !important;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
	outline: none !important;
	transition: all 0.22s ease;
	white-space: nowrap;
}

.btn-404-secondary:hover {
	background: #dbeafe;
	transform: translateY(-2px);
	border: none !important;
	box-shadow: none !important;
	color: #0e3a7a !important;
}

/* Helpful Quick Links Bar */
.error-nav-hints {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(226, 232, 240, 0.8);
	font-size: 13.5px;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.error-nav-hints a {
	color: #12499A;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.error-nav-hints a:hover {
	color: #0e3a7a;
	text-decoration: underline;
}

.hint-dot {
	color: #cbd5e1;
}

/* Mobile Responsive */
@media (max-width: 640px) {
	.error-404-section {
		padding: 50px 16px 70px;
		min-height: auto;
	}
	.error-visual-box {
		height: 230px;
	}
	.giant-404-text {
		font-size: 160px;
	}
	.error-cloud-sea {
		height: 120px;
	}
	.error-title-main {
		font-size: 22px;
	}
	.error-lead-message {
		font-size: 14.5px;
	}
	.error-buttons-wrap {
		flex-direction: column;
		width: 100%;
	}
	.btn-404-home,
	.btn-404-secondary {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   CAREERS & RECRUITMENT PAGE (TOPCV INSPIRED WITH BLUE STAR LUXURY STYLE)
   ========================================================================== */

/* 1. Hero Section */
.careers-page-main {
	background: #ffffff;
	min-height: 100vh;
	padding-bottom: 0;
}

.careers-hero-section {
	position: relative;
	background: #0f172a;
	padding: 65px 0 75px;
	border-bottom: none;
	text-align: center;
	overflow: hidden;
}

.careers-hero-bg-layer {
	position: absolute;
	inset: 0;
	background-image: url('../images/vinschool.jpg');
	background-size: cover;
	background-position: center 32%;
	opacity: 0.32;
	filter: blur(1.5px) saturate(0.95) brightness(1.05);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.95) 100%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.95) 100%);
	pointer-events: none;
}

.careers-hero-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 85% 75% at 50% 35%,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(248, 250, 252, 0.90) 50%,
		rgba(240, 246, 255, 0.80) 100%
	);
	pointer-events: none;
}

.careers-hero-pattern {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(18, 73, 154, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
	opacity: 0.45;
}

.careers-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1060px;
	margin: 0 auto;
}

.careers-hero-breadcrumb.about-hero-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin: 0 auto 20px;
	background: #ffffff;
	padding: 6px 18px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.careers-hero-breadcrumb a {
	color: #12499A;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s ease;
}

.careers-hero-breadcrumb a:hover {
	color: #F99D1C;
}

.careers-hero-breadcrumb .separator {
	color: #94a3b8;
	font-size: 10px;
}

.careers-hero-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 34px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	text-shadow: 0 1px 16px rgba(255, 255, 255, 0.9);
}

.careers-hero-title .highlight-brand,
.careers-page-main .highlight-brand,
.careers-page-main .workflow-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.careers-hero-title .highlight-brand::after,
.careers-page-main .highlight-brand::after {
	display: none !important;
}

.careers-hero-lead {
	font-size: 16px;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.65;
	margin: 0 auto 28px;
	max-width: 740px;
	text-shadow: 0 1px 12px rgba(255, 255, 255, 0.95);
}

/* 4 Value Pillars Strip */
.careers-perks-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	text-align: left;
	margin: 0 0 24px;
}

.career-perk-item {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 2px 10px rgba(18, 73, 154, 0.03);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.career-perk-item:hover {
	transform: translateY(-2px);
	border-color: #cbd5e1;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.06);
}

.perk-icon-wrap {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	flex-shrink: 0;
}

.perk-icon-wrap.icon-blue { background: #eff6ff; color: #12499A; }
.perk-icon-wrap.icon-amber { background: #fffbeb; color: #F99D1C; }
.perk-icon-wrap.icon-emerald { background: #ecfdf5; color: #059669; }
.perk-icon-wrap.icon-cyan { background: #ecfeff; color: #0891b2; }

.perk-text-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.perk-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.perk-desc {
	font-size: 11.5px;
	color: #64748b;
	line-height: 1.35;
}

/* 2. TopCV-Style Search Card */
.careers-search-section {
	margin-top: -24px;
	position: relative;
	z-index: 10;
	margin-bottom: 28px;
}

.careers-search-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 22px 28px;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
}

.hero-search-card {
	margin-top: 36px;
	margin-bottom: 24px;
	text-align: left;
}

.careers-count-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}

.count-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
}

.count-icon {
	color: #12499A;
	font-size: 16px;
}

.count-highlight {
	color: #F99D1C;
	font-weight: 800;
	font-size: 16px;
}

.location-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #64748b;
	background: #f8fafc;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
}

.location-badge i {
	color: #12499A;
}

/* Filter Controls Bar */
.careers-filter-controls {
	display: grid;
	grid-template-columns: 1fr 220px 200px 140px;
	gap: 12px;
	align-items: center;
}

.filter-input-wrap,
.filter-select-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.filter-input-icon,
.filter-select-icon {
	position: absolute;
	left: 14px;
	color: #94a3b8;
	font-size: 15px;
	pointer-events: none;
	transition: color 0.2s ease;
}

.filter-text-input {
	width: 100%;
	height: 46px;
	padding: 0 16px 0 42px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	font-size: 13.5px;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	color: #0f172a;
	background: #ffffff;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-text-input:focus {
	border-color: #12499A;
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.1);
}

.filter-text-input:focus + .filter-input-icon {
	color: #12499A;
}

.filter-select {
	width: 100%;
	height: 46px;
	padding: 0 36px 0 42px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	font-size: 13.5px;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	color: #0f172a;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) center;
	appearance: none;
	outline: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.filter-select:focus {
	border-color: #12499A;
}

.filter-submit-btn {
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	border-radius: 999px;
	background: #12499A;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.filter-submit-btn:hover {
	background: #0e3a7a;
	transform: translateY(-2px);
}

/* 3. Job Card Row (TopCV Style Card with Brand Soft Gradient) */
.careers-jobs-section,
.careers-list-section {
	padding: 55px 0 75px;
	background: #ffffff;
	border-top: none;
	border-bottom: none;
}

.jobs-list-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.job-card-row {
	background: linear-gradient(135deg, #ffffff 0%, #f4f8fe 55%, #eaf2fc 100%);
	border: 1px solid rgba(18, 73, 154, 0.16);
	border-radius: 1rem;
	padding: 20px 24px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.04);
}

.job-card-row:hover {
	border-color: #12499A;
	background: linear-gradient(135deg, #ffffff 0%, #eef5ff 55%, #e2eeff 100%);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.08);
	transform: translateY(-2px);
}

.job-card-logo-box {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	flex-shrink: 0;
	overflow: hidden;
}

.job-card-logo-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.job-card-content {
	flex: 1;
	min-width: 0;
}

.job-card-top-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.job-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	flex: 1;
	min-width: 0;
}

.job-title-link {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.job-title-link:hover {
	color: #12499A;
}

.verified-icon {
	color: #12499A;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.job-card-salary-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #12499A;
	flex-shrink: 0;
	white-space: nowrap;
}

.job-card-salary-tag i {
	color: #F99D1C;
	font-size: 15px;
}

.job-company-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 13px;
}

.badge-pro {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
}

.job-company-name {
	font-weight: 700;
	color: #d97706;
}

.job-dept-pill {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748b;
	background: #f1f5f9;
	padding: 2px 10px;
	border-radius: 999px;
}

.job-card-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
	border-top: 1px dashed #f1f5f9;
}

.job-meta-pills-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.job-tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	font-size: 12px;
	color: #475569;
}

.job-tag-pill i {
	color: #94a3b8;
	font-size: 12px;
}

.job-tag-pill.tag-urgent {
	background: #fff1f2;
	border-color: #ffe4e6;
	color: #e11d48;
	font-weight: 700;
}

.job-tag-pill.tag-urgent i {
	color: #e11d48;
	font-size: 7px;
}

.job-tag-pill.tag-deadline {
	background: #fffbeb;
	border-color: #fef3c7;
	color: #b45309;
	font-weight: 600;
}

.job-tag-pill.tag-deadline i {
	color: #F99D1C;
	font-size: 11px;
}

.job-card-actions-compact {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.btn-job-detail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #334155;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-job-detail:hover {
	border-color: #12499A;
	color: #12499A;
	background: #eff6ff;
}

.btn-job-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	border: none;
	background: #12499A;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	text-decoration: none;
}

.btn-job-apply:hover {
	background: #0e3a7a;
	transform: translateY(-2px);
}

/* Empty State */
.jobs-empty-state {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 60px 24px;
	text-align: center;
}

.empty-state-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #94a3b8;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.empty-state-title {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
}

.empty-state-desc {
	font-size: 14px;
	color: #64748b;
	margin: 0 0 24px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* 4. Recruitment Workflow (4 Steps) */
.careers-workflow-section {
	padding: 70px 0 50px;
}

.workflow-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
}

.section-tag-pill {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: #eff6ff;
	color: #12499A;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
	border: 1px solid #dbeafe;
}

.workflow-title {
	font-size: clamp(20px, 4.5vw, 28px);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 12px;
	text-wrap: balance;
}

.workflow-lead {
	font-size: 15px;
	color: #64748b;
	margin: 0;
	line-height: 1.6;
}

.workflow-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.workflow-step-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 24px 20px;
	position: relative;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.workflow-step-card:hover {
	transform: translateY(-3px);
	border-color: #cbd5e1;
}

.step-num-badge {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 28px;
	font-weight: 800;
	color: #f1f5f9;
	line-height: 1;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	user-select: none;
}

.step-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 18px;
}

.step-icon-wrap.icon-blue { background: #eff6ff; color: #12499A; }
.step-icon-wrap.icon-amber { background: #fffbeb; color: #F99D1C; }
.step-icon-wrap.icon-emerald { background: #ecfdf5; color: #059669; }
.step-icon-wrap.icon-cyan { background: #ecfeff; color: #0891b2; }

.step-card-title {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
}

.step-card-desc {
	font-size: 13px;
	color: #64748b;
	line-height: 1.55;
	margin: 0;
}

/* 5. HR Contact Banner (Brand Deep Royal Blue Card on White Section) */
.careers-contact-section {
	padding: 20px 0 60px;
	background: #ffffff;
}

.careers-contact-banner {
	position: relative;
	background: linear-gradient(135deg, #12499A 0%, #0c3674 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1rem;
	padding: 48px 40px;
	color: #ffffff;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.08);
}

.careers-banner-overlay-icon {
	position: absolute;
	top: -20px;
	right: -15px;
	font-size: 150px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
	user-select: none;
	z-index: 1;
	transition: transform 0.5s ease, color 0.5s ease;
}

.careers-contact-banner:hover .careers-banner-overlay-icon {
	transform: scale(1.08) rotate(6deg);
	color: rgba(255, 255, 255, 0.12);
}

.contact-banner-bg,
.contact-banner-overlay,
.contact-banner-pattern {
	display: none;
}

.contact-banner-content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
}

.banner-main-title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 12px;
	color: #ffffff;
	position: relative;
	z-index: 1;
}

.banner-main-title .highlight-brand {
	color: #F99D1C;
	position: relative;
	display: inline-block;
}

.banner-main-title .highlight-brand::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 3px;
	width: 100%;
	height: 8px;
	background: rgba(249, 157, 28, 0.4);
	border-radius: 4px;
	z-index: -1;
}

.banner-sub-text {
	font-size: 15px;
	color: #e2e8f0;
	line-height: 1.6;
	margin: 0 0 28px;
}

.banner-actions-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.banner-btn-phone,
.banner-btn-zalo,
.banner-btn-email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.banner-btn-zalo {
	background: #ffffff;
	color: #0068FF;
	border: 1px solid #ffffff;
}

.banner-btn-zalo:hover {
	background: #eff6ff;
	border-color: #eff6ff;
	color: #0056d6;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.banner-btn-zalo img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.banner-btn-phone {
	background: #ffffff;
	color: #12499A;
	border: 1px solid #ffffff;
}

.banner-btn-phone:hover {
	background: #f8fafc;
	border-color: #f8fafc;
	color: #0e3a7a;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.banner-btn-email {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.banner-btn-email:hover {
	background: rgba(255, 255, 255, 0.24);
	border-color: #ffffff;
	color: #ffffff;
	transform: translateY(-2px);
}

/* 6. Modal Popup Styles (Standardized 1rem, Clean flat borders, No Heavy Shadow) */
.job-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.job-modal-backdrop.is-active {
	opacity: 1;
	visibility: visible;
}

.job-modal-dialog {
	background: #ffffff;
	border: none;
	border-radius: 1rem;
	width: 100%;
	max-width: 680px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	transform: scale(0.96) translateY(10px);
	transition: transform 0.25s ease;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.job-modal-backdrop.is-active .job-modal-dialog {
	transform: scale(1) translateY(0);
}

.job-modal-dialog.apply-dialog {
	max-width: 620px;
}

/* Modal Header with Cover Image on Right & Brand Blue Overlay on Left (TopCV Pro Banner Style) */
.job-modal-header {
	position: relative;
	padding: 26px 28px;
	border: none;
	border-bottom: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	background-color: #0c2548;
	color: #ffffff;
	overflow: hidden;
}

/* Layer 1: Modern Building Image on the right side */
.job-modal-header::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 65%;
	background-image: url('../images/job-modal-cover.png');
	background-size: cover;
	background-position: right 25%;
	background-repeat: no-repeat;
	filter: hue-rotate(185deg) saturate(1.35) brightness(0.92);
	opacity: 0.95;
	pointer-events: none;
	z-index: 1;
}

/* Layer 2: Brand Deep Royal Blue Overlay on the left smoothly fading to transparent on the right */
.job-modal-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, 
		#0c2548 0%, 
		#0c2548 38%, 
		rgba(12, 37, 72, 0.94) 52%, 
		rgba(12, 37, 72, 0.6) 70%, 
		rgba(18, 73, 154, 0.18) 88%, 
		rgba(18, 73, 154, 0.05) 100%
	);
	pointer-events: none;
	z-index: 2;
}

.job-modal-header > * {
	position: relative;
	z-index: 3;
}

.modal-header-top {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.modal-company-logo {
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
}

.modal-company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.modal-header-info {
	flex: 1;
	min-width: 0;
}

.modal-badges-wrap {
	display: none !important;
}

.modal-badges-wrap .job-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
}

.modal-badges-wrap .badge-featured {
	background: #F99D1C;
	color: #ffffff;
}

.modal-badges-wrap .badge-urgent {
	background: #ef4444;
	color: #ffffff;
}

.modal-badges-wrap .job-dept-pill {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.apply-header-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.modal-job-title {
	font-size: 21px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 8px;
	line-height: 1.35;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.apply-header-lead {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.modal-meta-strip {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
}

.job-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.26);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 12.5px;
	color: #ffffff;
	line-height: 1.4;
}

.job-meta-pill i {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	flex-shrink: 0;
	margin-right: 2px;
}

.job-meta-pill.pill-salary {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

.job-meta-pill.pill-salary i {
	color: #F99D1C;
	font-size: 14px;
}

.job-meta-pill.pill-salary strong {
	color: #ffffff;
	font-weight: 800;
}

.job-meta-pill.pill-deadline {
	background: rgba(249, 157, 28, 0.22);
	border-color: rgba(249, 157, 28, 0.45);
	color: #ffffff;
}

.job-meta-pill.pill-deadline i {
	color: #F99D1C;
	font-size: 13px;
}

.modal-close-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
	backdrop-filter: blur(4px);
}

.modal-close-btn:hover {
	background: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	transform: scale(1.05);
}

/* Modal Body */
.job-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

.jd-section-block {
	margin-bottom: 24px;
}

.jd-section-block:last-child {
	margin-bottom: 0;
}

.jd-block-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #e2e8f0;
}

.jd-block-title i {
	color: #12499A;
	font-size: 17px;
	flex-shrink: 0;
	margin-right: 4px;
}

.jd-item-list {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.jd-item-list li {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.6;
}

/* Modal Footer */
.job-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #f1f5f9;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.modal-back-btn {
	padding: 9px 20px;
}

.modal-apply-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 24px;
}

.modal-apply-btn i {
	font-size: 14px;
	margin-left: 2px;
}

/* Apply Form Inputs inside Modal */
.quick-apply-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.quick-apply-form .form-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.quick-apply-form .form-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.quick-apply-form .form-field-label {
	font-size: 12px;
	font-weight: 700;
	color: #334155;
}

.quick-apply-form .form-field-label .required {
	color: #e11d48;
}

.quick-apply-form .form-input-box,
.quick-apply-form .form-textarea-box {
	position: relative;
	display: flex;
	align-items: center;
}

.quick-apply-form .input-icon {
	position: absolute;
	left: 14px;
	color: #94a3b8;
	font-size: 14px;
	pointer-events: none;
}

.quick-apply-form .form-input-box input {
	width: 100%;
	height: 42px;
	padding: 0 14px 0 40px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	color: #0f172a;
	outline: none;
	transition: border-color 0.2s ease;
}

.quick-apply-form .form-input-box input:focus,
.quick-apply-form .form-textarea-box textarea:focus {
	border-color: #12499A;
}

.quick-apply-form .form-textarea-box textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	color: #0f172a;
	outline: none;
	resize: vertical;
}

.apply-form-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #64748b;
	background: #f8fafc;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.apply-form-notice i {
	color: #059669;
	font-size: 14px;
}

.apply-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 8px;
}

/* Success State inside Apply Modal */
.apply-success-state {
	text-align: center;
	padding: 30px 16px;
}

.success-icon-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #059669;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	border: 2px solid #a7f3d0;
}

.success-title {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px;
}

.success-desc {
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR CAREERS PAGE
   ========================================================================== */
@media (max-width: 1024px) {
	.careers-filter-controls {
		grid-template-columns: 1fr 1fr;
	}
	.careers-filter-controls .filter-submit-btn {
		grid-column: span 2;
	}
	.careers-perks-strip {
		grid-template-columns: repeat(2, 1fr);
	}
	.workflow-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.job-card-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px 14px;
	}
	.job-card-logo-box {
		width: 48px;
		height: 48px;
	}
	.job-card-top-line {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 6px;
	}
	.job-title-row {
		width: 100%;
		font-size: 16px;
	}
	.job-title-link {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		line-height: 1.4;
	}
	.job-card-salary-tag {
		font-size: 14px;
		align-self: flex-start;
	}
	.job-card-footer-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-top: 12px;
	}
	.job-meta-pills-row {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
	}
	.job-tag-pill {
		max-width: 100%;
		white-space: normal;
		padding: 4px 10px;
		font-size: 11.5px;
		line-height: 1.35;
	}
	.job-card-actions-compact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		gap: 8px;
	}
	.btn-job-detail,
	.btn-job-apply {
		width: 100%;
		flex: 1;
		justify-content: center;
		padding: 9px 10px;
		min-height: 40px;
		font-size: 12.5px;
		white-space: nowrap;
	}
	.careers-contact-banner {
		padding: 30px 20px;
	}
	.banner-actions-row {
		flex-direction: column;
		width: 100%;
	}
	.banner-btn-phone,
	.banner-btn-zalo,
	.banner-btn-email {
		width: 100%;
		justify-content: center;
	}
	.quick-apply-form .form-fields-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.workflow-title {
		font-size: 21px !important;
		line-height: 1.35;
		padding: 0 10px;
	}
	.workflow-lead {
		font-size: 14px;
		padding: 0 8px;
	}
	.careers-hero-title {
		font-size: 24px;
	}
	.careers-hero-lead {
		font-size: 14.5px;
	}
	.careers-perks-strip {
		grid-template-columns: 1fr;
	}
	.careers-filter-controls {
		grid-template-columns: 1fr;
	}
	.careers-filter-controls .filter-submit-btn {
		grid-column: span 1;
	}
	.careers-count-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.workflow-steps-grid {
		grid-template-columns: 1fr;
	}
	.job-modal-dialog {
		max-height: 95vh;
	}
	.job-modal-header {
		padding: 20px 16px;
	}
	.job-modal-header::before {
		width: 80%;
		opacity: 0.8;
	}
	.job-modal-header::after {
		background: linear-gradient(90deg, 
			#0c2548 0%, 
			#0c2548 45%, 
			rgba(12, 37, 72, 0.94) 65%, 
			rgba(14, 46, 92, 0.45) 100%
		);
	}
	.modal-header-top {
		gap: 12px;
	}
	.modal-company-logo {
		width: 48px;
		height: 48px;
	}
	.modal-job-title {
		font-size: 18px;
	}
	.job-modal-body {
		padding: 16px;
	}
	.job-modal-footer {
		padding: 14px 16px;
	}
}

/* ==========================================================================
   BLUE STAR CAREERS DYNAMIC SECTIONS (TOPCV INSPIRED WITH LUXURY ACADEMIC STYLING)
   ========================================================================== */

/* 1. Animation Globe Sphere & Orbit Cards */
.bs-globe-orbit-section {
	padding: 85px 0 70px;
	background: #ffffff;
	position: relative;
	overflow: hidden;
	border-bottom: none;
}

.globe-orbit-header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 50px;
}

.globe-orbit-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 12px 0 16px;
	letter-spacing: -0.02em;
}

.globe-orbit-lead {
	font-size: 15.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

.bs-globe-orbit-viewport {
	position: relative;
	width: 100%;
	min-height: 660px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bs-globe-canvas-wrap {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 660px;
	margin: 0 auto;
}

/* Quả cầu to và hoành tráng (620px) */
.bs-globe-sphere-box {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 620px;
	height: 620px;
	border-radius: 50%;
}

.bs-globe-grid-aura {
	position: absolute;
	inset: -30px;
	pointer-events: none;
	animation: bsGlobeAuraSpin 60s linear infinite;
}

@keyframes bsGlobeAuraSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.globe-grid-svg {
	width: 100%;
	height: 100%;
}

.bs-globe-canvas-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.bs-globe-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* 3D Glass White Overlay on Globe Sphere per User Request */
.bs-globe-glass-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.20) 45%,
		rgba(255, 255, 255, 0.04) 70%,
		rgba(255, 255, 255, 0.35) 100%
	);
	box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.7);
	pointer-events: none;
	z-index: 4;
}

/* Floating Stat directly on Globe */
.bs-globe-center-stat {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	z-index: 5;
	pointer-events: none;
}

.stat-number-glow {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 50px;
	font-weight: 800;
	color: #12499A;
	line-height: 1.1;
	margin-bottom: 6px;
	text-shadow: 0 2px 14px rgba(255, 255, 255, 0.95);
}

.stat-label-glow {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95);
}

.stat-sub-glow {
	font-size: 12.5px;
	font-weight: 600;
	color: #F99D1C;
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95);
}

/* Smooth Parabolic C-Curve Orbit Trajectory */
.bs-orbit-arc-wrapper {
	position: absolute;
	left: 540px;
	top: 0;
	width: 380px;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.bs-orbit-arc-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.orbit-arc-path-glow {
	stroke: rgba(18, 73, 154, 0.15);
}

.orbit-arc-path-active {
	stroke-dasharray: 900;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.4s ease;
}

.bs-orbit-items-track {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 530px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 3;
}

/* Các mục bên phải: Mờ nhẹ khi chưa active, sáng rực khi active */
.bs-orbit-step-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 10px 14px;
	border-radius: 14px;
	opacity: 0.55;
	transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease;
	cursor: pointer;
}

.bs-orbit-step-item:hover,
.bs-orbit-step-item.is-active {
	opacity: 1;
	transform: translateX(8px);
	background: rgba(239, 246, 255, 0.65);
}

.orbit-bullet-node {
	flex-shrink: 0;
	margin-top: 2px;
}

.orbit-node-circle {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #ffffff;
	background: #12499A;
	box-shadow: 0 0 0 4px rgba(18, 73, 154, 0.1);
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.orbit-node-circle.icon-emerald { background: #12499A; }
.orbit-node-circle.icon-blue { background: #12499A; }
.orbit-node-circle.icon-amber { background: #F99D1C; }
.orbit-node-circle.icon-cyan { background: #0284c7; }

.bs-orbit-step-item.is-active .orbit-node-circle {
	transform: scale(1.18);
	box-shadow: 0 0 0 6px rgba(18, 73, 154, 0.2), 0 4px 16px rgba(18, 73, 154, 0.25);
}

.orbit-step-text {
	flex: 1;
	min-width: 0;
}

.orbit-step-title {
	font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.bs-orbit-step-item.is-active .orbit-step-title {
	color: #12499A;
	font-weight: 800;
}

.orbit-step-desc {
	font-size: 13px;
	color: #64748b;
	line-height: 1.55;
	margin: 0;
}

.globe-bottom-lead {
	text-align: center;
	max-width: 700px;
	margin: 40px auto 20px;
	font-size: 15.5px;
	color: #475569;
	line-height: 1.6;
}

.globe-bottom-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* ==========================================================================
   BUTTONS CHUẨN ĐỒNG BỘ TOÀN TRANG (NGÔI SAO ICON & EFFECT SHINE ÁNH SÁNG)
   ========================================================================== */
.btn-bs-synced {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 26px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.btn-bs-synced .btn-star-icon {
	font-size: 13px;
	color: #F99D1C;
	filter: drop-shadow(0 0 4px rgba(249, 157, 28, 0.45));
}

.btn-bs-synced.btn-bs-primary {
	background: #12499A;
	color: #ffffff;
	border: 1.5px solid #12499A;
}

.btn-bs-synced.btn-bs-primary:hover {
	background: #0e3a7a;
	border-color: #0e3a7a;
	transform: translateY(-2px);
}

.btn-bs-synced.btn-bs-outline {
	background: #ffffff;
	color: #12499A;
	border: 1.5px solid #12499A;
}

.btn-bs-synced.btn-bs-outline:hover {
	background: #eff6ff;
	transform: translateY(-2px);
}

/* Shimmer Light Sweep Effect on Hover */
.btn-bs-synced::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -60%;
	width: 40%;
	height: 200%;
	background: linear-gradient(
		60deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(25deg);
	pointer-events: none;
	transition: none;
}

.btn-bs-synced:hover::after {
	left: 120%;
	transition: left 0.75s ease-in-out;
}

/* 2. Academic Connect & Career Workshop Showcase (Section 2 - No border, Sentence Case, Distinct Icons) */
.bs-partners-network-section {
	padding: 70px 0 60px;
	background: #ffffff;
	border-bottom: none;
}

.topcv-partner-showcase-card {
	position: relative;
	background: linear-gradient(135deg, #f0f7ff 0%, #e2eeff 50%, #eff6ff 100%);
	border: 1px solid rgba(18, 73, 154, 0.1);
	border-radius: 28px;
	padding: 24px;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 20px;
	align-items: stretch;
	margin-top: 36px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.04);
}

/* Soft Blue Glow effect from radial gradient */
.topcv-partner-showcase-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 40% 45%, rgba(56, 189, 248, 0.32) 0%, rgba(18, 73, 154, 0.16) 38%, transparent 70%);
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}

.topcv-partner-showcase-card > * {
	position: relative;
	z-index: 1;
}

.topcv-blocks-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.topcv-block-tile {
	background: #ffffff;
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: none;
	transition: transform 0.2s ease;
}

.topcv-block-tile:hover {
	transform: translateY(-2px);
}

.tile-full-width {
	grid-column: span 2;
}

.topcv-tile-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	margin-bottom: 2px;
}

.topcv-tile-icon.icon-blue { background: #eff6ff; color: #12499A; }
.topcv-tile-icon.icon-amber { background: #fffbeb; color: #F99D1C; }
.topcv-tile-icon.icon-emerald { background: #eff6ff; color: #12499A; }

.tile-block-title {
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
	line-height: 1.4;
	margin: 0;
	text-transform: none;
}

.tile-block-text p {
	font-size: 13px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 6px;
}

.tile-block-text p:last-child {
	margin-bottom: 0;
}

.topcv-slider-frame {
	border-radius: 20px;
	overflow: hidden;
	background: #0f172a;
	position: relative;
	min-height: 380px;
}

.topcv-slider-inner {
	width: 100%;
	height: 100%;
	position: relative;
}

.topcv-slider-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.3s ease;
}

.topcv-arrow-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #12499A;
	font-size: 14px;
	transition: all 0.2s ease;
	z-index: 5;
}

.topcv-arrow-btn:hover {
	background: #ffffff;
	transform: translateY(-50%) scale(1.08);
	color: #F99D1C;
}

.topcv-arrow-btn.arrow-prev { left: 14px; }
.topcv-arrow-btn.arrow-next { right: 14px; }

.topcv-slider-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 5;
}

.slide-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: all 0.2s ease;
}

.slide-dot.is-active {
	width: 22px;
	border-radius: 999px;
	background: #12499A;
}

/* 3. Smart Platform SRP (Section 3 - Auto-Progress & Mesh Ambient Spot Lights Backdrop) */
.bs-smart-platform-section {
	padding: 75px 0 65px;
	background: #ffffff;
	border-bottom: none;
}

.srp-dual-showcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-top: 40px;
}

.srp-steps-col {
	display: flex;
	flex-direction: column;
}

.srp-step-item {
	padding: 20px 18px;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	position: relative;
	border-radius: 12px;
	transition: background 0.2s ease;
}

.srp-step-item:hover {
	background: #f8fafc;
}

.srp-step-item:last-child {
	border-bottom: none;
}

.srp-step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.srp-step-icon {
	font-size: 18px;
	color: #94a3b8;
	transition: color 0.25s ease;
}

.srp-step-title {
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.srp-step-desc {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.55;
	margin: 0 0 10px;
}

.srp-progress-track {
	width: 100%;
	height: 3px;
	background: transparent;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.srp-progress-fill {
	height: 100%;
	width: 0%;
	background: #12499A;
	border-radius: 999px;
	transition: width 0.08s linear;
}

.srp-step-item.is-active .srp-step-icon {
	color: #12499A;
}

.srp-step-item.is-active .srp-step-title {
	color: #12499A;
}

.srp-step-item.is-active .srp-progress-track {
	background: #e2e8f0;
}

/* Right Side Mesh Ambient Spot Lights Device Canvas (Lốm đốm đa tầng, không 1 mảng đơn điệu) */
.srp-device-col {
	position: relative;
}

.srp-device-backdrop {
	background: #091a33;
	background-image: 
		radial-gradient(circle at 18% 22%, rgba(37, 99, 235, 0.65) 0%, transparent 42%),
		radial-gradient(circle at 82% 78%, rgba(18, 73, 154, 0.75) 0%, transparent 48%),
		radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.35) 0%, transparent 58%),
		radial-gradient(circle at 86% 18%, rgba(249, 157, 28, 0.22) 0%, transparent 32%),
		radial-gradient(circle at 15% 85%, rgba(14, 165, 233, 0.3) 0%, transparent 40%);
	border-radius: 28px;
	padding: 36px 32px;
	border: none;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}

.srp-device-backdrop::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	opacity: 0.55;
	pointer-events: none;
}

.srp-app-window {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.85);
}

.srp-window-navbar {
	background: #0f172a;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.srp-nav-dots {
	display: flex;
	gap: 6px;
}

.srp-nav-dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.srp-nav-dots span:nth-child(1) { background: #ef4444; }
.srp-nav-dots span:nth-child(2) { background: #f59e0b; }
.srp-nav-dots span:nth-child(3) { background: #10b981; }

.srp-nav-pill {
	background: rgba(255, 255, 255, 0.12);
	color: #94a3b8;
	font-size: 11px;
	padding: 4px 14px;
	border-radius: 999px;
	font-family: monospace;
	letter-spacing: 0.02em;
}

.srp-screens-viewport {
	padding: 24px;
	min-height: 320px;
	position: relative;
	background: #ffffff;
}

.srp-screen-view {
	display: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.srp-screen-view.is-active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.screen-badge-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
}

.badge-vinschool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #12499A;
}

.badge-vinschool i {
	color: #12499A;
}

.badge-status {
	font-size: 11px;
	font-weight: 600;
	color: #12499A;
	background: #eff6ff;
	padding: 3px 10px;
	border-radius: 999px;
}

.screen-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.screen-tile {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 10px;
	text-align: center;
}

.tile-num {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
	margin-bottom: 2px;
}

.tile-num.text-emerald,
.tile-num.text-blue { color: #12499A; }
.tile-num.text-amber { color: #F99D1C; }

.tile-txt {
	font-size: 11px;
	color: #64748b;
	font-weight: 600;
}

.screen-preview-card {
	background: #f0f7ff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 14px 16px;
}

.preview-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #12499A;
	margin-bottom: 6px;
}

.preview-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: #1e3a8a;
}

.chip-ready {
	background: #12499A;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Bottom CTA Action Buttons */
.srp-bottom-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}

/* Media Queries for Careers Dynamic Sections */
@media (max-width: 1024px) {
	.bs-globe-orbit-viewport {
		min-height: auto;
	}
	.bs-globe-canvas-wrap {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
	.bs-globe-sphere-box {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 440px;
		height: 440px;
	}
	.bs-orbit-arc-wrapper {
		display: none;
	}
	.bs-orbit-items-track {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: 100%;
		max-width: 650px;
	}
	.topcv-partner-showcase-card {
		grid-template-columns: 1fr;
	}
	.topcv-slider-frame {
		min-height: 320px;
	}
	.srp-dual-showcase {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 640px) {
	.bs-globe-sphere-box {
		width: 320px;
		height: 320px;
	}
	.bs-globe-center-stat {
		padding: 12px 18px;
	}
	.stat-number-glow {
		font-size: 34px;
	}
	.topcv-blocks-grid {
		grid-template-columns: 1fr;
	}
	.tile-full-width {
		grid-column: span 1;
	}
	.srp-device-backdrop {
		padding: 20px 16px;
		min-height: auto;
	}
	.screen-stat-grid {
		grid-template-columns: 1fr;
	}
	.srp-bottom-actions,
	.globe-bottom-actions {
		flex-direction: column;
		width: 100%;
	}
}

/* ==========================================================================
   LEARNING FORMATS PAGE (TẠI TRUNG TÂM, ONLINE, TẠI NHÀ)
   ========================================================================== */
.learning-formats-page {
	padding: 40px 0 80px;
	background: #f8fafc;
}

.formats-hero-section {
	text-align: center;
	padding: 40px 0 50px;
}

.formats-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 16px;
	border-radius: 999px;
	background: #eff6ff;
	border: 1px solid #dbeafe;
	color: #12499A;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

.badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #12499A;
}

.formats-hero-title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 14px;
	text-wrap: balance;
}

.formats-hero-title .highlight-brand,
.format-section-title .highlight-brand,
.format-comparison-section .workflow-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.formats-hero-lead {
	font-size: 16px;
	color: #64748b;
	line-height: 1.6;
	max-width: 760px;
	margin: 0 auto 36px;
}

.format-nav-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto;
}

.format-tab-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.04);
	flex: 1;
	min-width: 240px;
}

.format-tab-btn:hover {
	border-color: #12499A;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.08);
}

.format-tab-btn.is-active {
	background: #12499A;
	border-color: #12499A;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.2);
}

.format-tab-btn .tab-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #eff6ff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.format-tab-btn.is-active .tab-icon-box {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.format-tab-btn .tab-btn-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.format-tab-btn .tab-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.format-tab-btn.is-active .tab-title {
	color: #ffffff;
}

.format-tab-btn .tab-sub {
	font-size: 12px;
	color: #64748b;
	margin-top: 2px;
}

.format-tab-btn.is-active .tab-sub {
	color: #e2e8f0;
}

/* Detail Cards */
.format-sections-wrap {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.format-showcase-card {
	background: #ffffff;
	border: none !important;
	border-radius: 1rem;
	padding: 32px;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.format-showcase-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(18, 73, 154, 0.08);
}

.format-showcase-grid {
	display: grid;
	grid-template-columns: 1.05fr 1.35fr;
	gap: 36px;
	align-items: center;
}

.format-showcase-grid.format-grid-reverse {
	grid-template-columns: 1.35fr 1.05fr;
}
.format-showcase-grid.format-grid-reverse .format-showcase-media {
	order: 2;
}
.format-showcase-grid.format-grid-reverse .format-showcase-content {
	order: 1;
}

/* Media Frame with Floating Badges */
.format-showcase-media {
	position: relative;
	width: 100%;
}

.format-media-wrap {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.06);
	background: #f1f5f9;
}

.format-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.format-showcase-card:hover .format-photo {
	transform: scale(1.02);
}

/* Floating Glass Badges on Image */
.format-glass-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.08);
	font-size: 12.5px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	z-index: 2;
}

.format-glass-badge .icon-brand {
	color: #12499A;
	font-size: 13px;
}

.format-glass-badge.badge-top-left {
	top: 14px;
	left: 14px;
}

.format-glass-badge.badge-bottom-right {
	bottom: 14px;
	right: 14px;
}

/* Content Column */
.format-showcase-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.format-number-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #eff6ff;
	color: #12499A;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	width: fit-content;
}

.format-number-pill .dot-amber {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F99D1C;
}

.format-showcase-title {
	font-size: clamp(22px, 2.5vw, 26px);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}

.format-showcase-title .highlight-brand {
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	display: inline-block;
}

.format-showcase-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

/* 3 Compact Highlights */
.format-highlights-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0;
}

.format-hl-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #f8fafc;
	padding: 12px 14px;
	border-radius: 12px;
	border: none !important;
}

.format-hl-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	background: #eff6ff !important;
	color: #12499A !important;
}

.format-hl-icon i {
	color: #12499A !important;
}

.bg-blue-tint { background: #eff6ff !important; color: #12499A !important; }
.bg-amber-tint { background: #eff6ff !important; color: #12499A !important; }
.bg-emerald-tint { background: #eff6ff !important; color: #12499A !important; }

.format-hl-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.format-hl-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}

.format-hl-sub {
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
}

/* Location Info Pill */
.format-location-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #1e3a8a;
	background: #eff6ff;
	padding: 8px 14px;
	border-radius: 999px;
	width: fit-content;
	line-height: 1.4;
}

.format-location-info i {
	color: #12499A;
	font-size: 14px;
	flex-shrink: 0;
}

.format-action-wrap {
	margin-top: 6px;
}

.format-action-wrap .btn-sync-unified {
	width: fit-content;
	display: inline-flex;
	padding: 12px 28px;
}

/* CTA buttons sub */
.cta-btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition: all 0.2s ease;
	border: none !important;
}

.cta-btn-sub:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 991px) {
	.format-showcase-grid,
	.format-showcase-grid.format-grid-reverse {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.format-showcase-grid.format-grid-reverse .format-showcase-media {
		order: 1;
	}
	.format-showcase-grid.format-grid-reverse .format-showcase-content {
		order: 2;
	}
	.format-showcase-card {
		padding: 24px 20px;
	}
}

/* Comparison Table */
.format-comparison-section {
	padding: 40px 0 20px;
}

.format-table-card {
	background: #ffffff;
	border: none !important;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
}

.table-responsive {
	overflow-x: auto;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 13.5px;
}

.comparison-table th {
	padding: 16px 20px;
	background: #f8fafc;
	color: #0f172a;
	font-weight: 700;
	border-bottom: 1px solid #e2e8f0;
}

.comparison-table th.th-highlight {
	background: #eff6ff;
	color: #12499A;
}

.comparison-table td {
	padding: 14px 20px;
	border-bottom: 1px solid #f1f5f9;
	color: #475569;
	vertical-align: middle;
	line-height: 1.5;
}

.comparison-table td.td-highlight {
	background: rgba(239, 246, 255, 0.4);
	color: #0f172a;
	font-weight: 500;
}

.comparison-table td.td-label {
	color: #0f172a;
	font-weight: 600;
	background: #f8fafc;
	width: 22%;
}

/* Learning Formats CTA Section */
.learning-formats-page .about-cta-section {
	padding: 50px 0 20px;
	background: transparent;
}

.learning-formats-page .about-cta-card {
	border: none !important;
}

/* Bottom CTA Banner */
.format-bottom-cta {
	margin-top: 40px;
}

.format-cta-inner {
	background: linear-gradient(135deg, #12499A 0%, #0a2f68 100%);
	border-radius: 1.25rem;
	padding: 44px 36px;
	color: #ffffff;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-banner-title {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 10px;
	line-height: 1.35;
}

.cta-banner-desc {
	font-size: 15px;
	color: #e2e8f0;
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto 28px;
}

.cta-actions-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.btn-white {
	background: #ffffff;
	color: #0f172a;
	border: 1px solid #ffffff;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-white:hover {
	background: #f8fafc;
	transform: translateY(-2px);
}

.btn-zalo {
	color: #0068FF;
}

.btn-phone {
	color: #12499A;
}

.btn-warning-glow {
	background: #F99D1C;
	color: #ffffff;
	border: none;
	padding: 10px 24px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-warning-glow:hover {
	background: #e68d13;
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.format-grid-4cols {
		grid-template-columns: repeat(2, 1fr);
	}
	.format-nav-tabs {
		flex-direction: column;
	}
	.format-tab-btn {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.format-grid-4cols {
		grid-template-columns: 1fr;
	}
	.format-detail-card {
		padding: 24px 16px;
	}
	.format-cta-inner {
		padding: 32px 18px;
	}
	.cta-actions-row {
		flex-direction: column;
		width: 100%;
	}
	.btn-white, .btn-warning-glow {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   BLUE STAR ENGLISH — POLICY SINGLE PAGE (PHƯƠNG ÁN A: STICKY SIDEBAR + READING PANEL)
   ========================================================================== */

.policy-single-page {
	background-color: #f8fafc;
	min-height: 100vh;
}

/* 1. Hero Section Compact with Luxury Layered Gradient */
.policy-hero-section {
	background: 
		radial-gradient(circle at 88% 18%, rgba(249, 157, 28, 0.20) 0%, transparent 42%),
		radial-gradient(circle at 12% 82%, rgba(59, 130, 246, 0.22) 0%, transparent 48%),
		linear-gradient(135deg, #071938 0%, #0c2d61 35%, #12499A 75%, #1e56b3 100%);
	color: #ffffff;
	padding: 48px 0 52px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-hero-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(249, 157, 28, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.policy-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 20px;
}

.policy-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}

.policy-breadcrumb a:hover {
	color: #F99D1C;
}

.policy-breadcrumb .sep {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
}

.policy-breadcrumb .current {
	color: #ffffff;
	font-weight: 600;
}

.hero-tag-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #F99D1C;
	margin-bottom: 14px;
	text-transform: none;
}

.badge-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #F99D1C;
	box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.7);
	animation: pulseAmber 2s infinite;
}

@keyframes pulseAmber {
	0% {
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0.7);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(249, 157, 28, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(249, 157, 28, 0);
	}
}

.policy-hero-title {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.35;
	color: #ffffff;
	margin-bottom: 12px;
	max-width: 860px;
}

.policy-hero-title .highlight-brand {
	color: #F99D1C;
}

.policy-hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.policy-hero-meta .meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.policy-hero-meta .meta-divider {
	color: rgba(255, 255, 255, 0.4);
}

/* 2. Main 2-Column Layout */
.policy-body-section {
	padding: 36px 0 72px;
}

.policy-layout-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: start;
}

/* 3. Sticky Sidebar */
.policy-sidebar {
	position: sticky;
	top: 96px;
	z-index: 10;
}

.sidebar-sticky-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sidebar-card {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 1rem;
	padding: 20px;
}

.sidebar-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f5f9;
}

.sidebar-card-title .icon-brand {
	color: #12499A;
	font-size: 15px;
}

/* Policy Nav Buttons */
.policy-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.policy-nav-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	color: #1e293b;
	position: relative;
	outline: none;
	text-decoration: none;
}

.policy-nav-btn:hover {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #12499A;
}

.policy-nav-btn:hover .btn-arrow {
	transform: translateX(3px);
	color: #12499A;
}

.policy-nav-btn.is-active {
	background: #12499A;
	border-color: #12499A;
	color: #ffffff;
}

.policy-nav-btn.is-active .btn-sub-title {
	color: rgba(255, 255, 255, 0.8);
}

.policy-nav-btn.is-active .btn-arrow {
	color: #F99D1C;
	transform: translateX(3px);
}

.nav-btn-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #12499A;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.policy-nav-btn.is-active .nav-btn-icon {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.nav-btn-text {
	flex: 1;
	min-width: 0;
}

.btn-main-title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 2px;
}

.btn-sub-title {
	display: block;
	font-size: 11px;
	color: #64748b;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
}

.btn-arrow {
	font-size: 12px;
	color: #94a3b8;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

/* TOC (Table of Contents) */
.toc-card {
	padding: 16px 20px;
}

.policy-toc-nav {
	max-height: 280px;
	overflow-y: auto;
	padding-right: 4px;
}

.policy-toc-nav::-webkit-scrollbar {
	width: 4px;
}

.policy-toc-nav::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.policy-toc-nav ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.policy-toc-nav a {
	display: block;
	font-size: 12.5px;
	color: #475569;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	line-height: 1.45;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.policy-toc-nav a:hover {
	color: #12499A;
	background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 50%, #fff7ed 100%);
	border-color: #dbeafe;
	transform: translateX(3px);
}

.policy-toc-nav a.is-active {
	color: #12499A;
	font-weight: 700;
	background: linear-gradient(135deg, #e8f0fe 0%, #e0edff 50%, #fef3e2 100%);
	border-color: #bfdbfe;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.06);
}

/* Support Box */
.support-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	text-align: center;
	padding: 22px 18px;
}

.support-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin: 0 auto 12px;
}

.support-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 6px 0;
}

.support-desc {
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.5;
	margin: 0 0 16px 0;
}

.support-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.btn-support-call,
.btn-support-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-support-call {
	background: #12499A;
	color: #ffffff;
	border: 1px solid #12499A;
}

.btn-support-call:hover {
	background: #0e3a7a;
	color: #ffffff;
}

.btn-support-zalo {
	background: #ffffff;
	color: #0068ff;
	border: 1px solid #0068ff;
}

.btn-support-zalo:hover {
	background: #eff6ff;
	color: #0052cc;
}

/* 4. Policy Content Reading Area */
.policy-content-area {
	min-width: 0;
}

.policy-article-panel {
	display: none;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 1rem;
	padding: 36px 40px;
}

.policy-article-panel.is-active {
	display: block;
	animation: policyFadeIn 0.25s ease-out;
}

@keyframes policyFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.article-header {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f1f5f9;
}

.article-badge {
	display: inline-block;
	padding: 4px 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #12499A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 999px;
	margin-bottom: 10px;
}

.article-title {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 0 10px 0;
}

.article-lead {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.65;
	margin: 0;
}

/* Highlight Box (AI Smart Summary Card) */
.policy-highlight-box {
	background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 55%, #fef8ee 100%);
	border: 1px solid #dbeafe;
	border-radius: 1rem;
	padding: 18px 22px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 30px;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.04);
}

.policy-highlight-box .highlight-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, #12499A 0%, #2563eb 55%, #F99D1C 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	box-shadow: 0 3px 10px rgba(18, 73, 154, 0.18);
}

.policy-highlight-box .highlight-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.policy-highlight-box .highlight-text {
	font-size: 13.5px;
	color: #1e3a8a;
	line-height: 1.6;
}

.policy-highlight-box .highlight-text strong {
	display: block;
	color: #12499A;
	font-size: 14px;
	margin-bottom: 4px;
}

.policy-highlight-box .highlight-text p {
	margin: 0;
}

/* Sections & Typography */
.policy-section {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f8fafc;
}

.policy-section:last-of-type {
	border-bottom: none;
	margin-bottom: 20px;
	padding-bottom: 0;
}

.section-heading,
.policy-article-body h2,
.policy-article-body h3 {
	font-size: 17.5px;
	font-weight: 700;
	color: #12499A;
	margin: 28px 0 14px 0;
	padding-left: 0;
	border-left: none;
	scroll-margin-top: 110px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-heading::before,
.policy-article-body h2::before,
.policy-article-body h3::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F99D1C;
	flex-shrink: 0;
}

.policy-section p,
.policy-article-body p {
	font-size: 14px;
	line-height: 1.7;
	color: #334155;
	margin: 0 0 14px 0;
}

.policy-section p:last-child,
.policy-article-body p:last-child {
	margin-bottom: 0;
}

.policy-article-body ul:not(.policy-check-list) {
	padding-left: 20px;
	margin: 12px 0 16px;
	color: #334155;
}

.policy-article-body ul:not(.policy-check-list) li {
	margin-bottom: 8px;
	font-size: 13.5px;
	line-height: 1.6;
}

/* Check List */
.policy-check-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.policy-check-list li {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #334155;
}

.policy-check-list li::before {
	content: '\f00c';
	font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 11px;
	color: #12499A;
}

/* Commitments Mini Cards Grid */
.commitments-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 18px 0 24px;
}

.commit-mini-card {
	background: #f8fafc;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 20px 18px;
	position: relative;
	transition: all 0.2s ease;
}

.commit-mini-card:hover {
	background: #ffffff;
	border-color: #bfdbfe;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.05);
	transform: translateY(-2px);
}

.card-num-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #12499A;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 12px;
}

.commit-mini-card h4 {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px 0;
	line-height: 1.4;
}

.commit-mini-card p {
	font-size: 13px !important;
	color: #475569 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

@media (max-width: 640px) {
	.commitments-cards-grid {
		grid-template-columns: 1fr;
	}
}

/* Policy Table */
.policy-table-wrapper {
	overflow-x: auto;
	margin: 16px 0 20px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background: #ffffff;
}

.policy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	text-align: left;
}

.policy-table th {
	background: #f8fafc;
	color: #0f172a;
	font-weight: 700;
	padding: 12px 16px;
	border-bottom: 1px solid #E2E8F0;
	white-space: nowrap;
}

.policy-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	color: #334155;
	line-height: 1.5;
}

.policy-table tr:last-child td {
	border-bottom: none;
}

.policy-table tr:hover td {
	background: #f8fafc;
}

/* Notice Box (Amber) */
.policy-notice-box {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 14px 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0;
	font-size: 13px;
	color: #92400e;
	line-height: 1.6;
}

.policy-notice-box i {
	font-size: 16px;
	color: #F99D1C;
	margin-top: 2px;
	flex-shrink: 0;
}

.policy-notice-box p {
	margin: 0;
	color: #92400e;
}

/* Article Signoff */
.article-signoff {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px dashed #cbd5e1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

.signoff-org strong {
	display: block;
	font-size: 14px;
	color: #12499A;
	margin-bottom: 2px;
}

.signoff-org span {
	font-size: 12.5px;
	color: #64748b;
}

.signoff-stamp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #15803d;
}

.signoff-stamp i {
	font-size: 14px;
}

/* 5. Responsive Styling */
@media (max-width: 1024px) {
	.policy-layout-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.policy-sidebar {
		position: static;
		top: auto;
	}

	.policy-nav-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.toc-card {
		display: none;
	}
}

@media (max-width: 640px) {
	.policy-hero-section {
		padding: 28px 0 34px;
	}

	.policy-hero-title {
		font-size: 22px;
	}

	.policy-nav-list {
		grid-template-columns: 1fr;
	}

	.policy-article-panel {
		padding: 24px 18px;
	}

	.article-title {
		font-size: 20px;
	}

	.policy-table-wrapper {
		margin: 12px -18px;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.article-signoff {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ========================================================
   MODERN BLOG ECOSYSTEM (INSIGHTS, ARCHED GALLERY & CARDS V2)
======================================================== */

.blog-page-container {
	background: #ffffff;
	min-height: 100vh;
}

/* 1. Blog Hero Section */
.blog-hero-section {
	position: relative;
	padding: 48px 0 54px;
	overflow: hidden;
	background: #ffffff;
}

.blog-hero-ambient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: 
		radial-gradient(ellipse 85% 65% at 50% -10%, rgba(18, 73, 154, 0.15) 0%, rgba(59, 130, 246, 0.08) 35%, rgba(224, 242, 254, 0.35) 60%, rgba(255, 255, 255, 0) 80%),
		linear-gradient(180deg, #edf5fd 0%, #f4f8fe 28%, rgba(246, 250, 254, 0.75) 50%, rgba(255, 255, 255, 0.95) 75%, #ffffff 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}

.blog-hero-inner {
	position: relative;
	z-index: 2;
	text-align: center;
}

.blog-breadcrumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	color: #64748b;
	margin-bottom: 22px;
}

.blog-breadcrumb .breadcrumb-link {
	color: #64748b;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.blog-breadcrumb .breadcrumb-link:hover {
	color: var(--color-primary, #12499A);
}

.blog-breadcrumb .breadcrumb-separator {
	font-size: 10px;
	color: #94a3b8;
}

.blog-breadcrumb .breadcrumb-current {
	color: #0f172a;
	font-weight: 600;
}

.blog-hero-heading-group {
	max-width: 820px;
	margin: 0 auto 38px;
	text-align: center;
}

.blog-hero-badge {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-primary, #12499A);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
	border: 1px solid #dbeafe;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
}

.blog-hero-title {
	font-size: 44px;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.blog-hero-title .highlight-brand,
.listing-main-title .highlight-brand,
.blog-page-container .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.blog-hero-title .highlight-brand::after,
.listing-main-title .highlight-brand::after,
.blog-page-container .highlight-brand::after {
	display: none !important;
}

.blog-hero-title .highlight-accent,
.listing-main-title .highlight-accent,
.blog-page-container .highlight-accent {
	color: var(--color-accent, #F99D1C);
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.blog-hero-title .highlight-accent::after,
.listing-main-title .highlight-accent::after,
.blog-page-container .highlight-accent::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 5px;
	height: 10px;
	background: rgba(18, 73, 154, 0.18);
	border-radius: 4px;
	z-index: -1;
}

.blog-hero-desc {
	font-size: 16px;
	line-height: 1.65;
	color: #475569;
	max-width: 660px;
	margin: 0 auto;
}

/* 5-Frame Arched Gallery Banner */
.blog-hero-gallery-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}

.blog-hero-gallery {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	width: 100%;
}

.gallery-frame {
	position: relative;
	overflow: hidden;
	background: #e2e8f0;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	border: 1px solid rgba(226, 232, 240, 0.8);
}

.gallery-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.gallery-frame:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(18, 73, 154, 0.08);
}

.gallery-frame:hover img {
	transform: scale(1.05);
}

.gallery-frame.frame-outer {
	flex: 0 0 17%;
	height: 200px;
	border-radius: 1rem;
}

.gallery-frame.frame-inner {
	flex: 0 0 20%;
	height: 250px;
	border-radius: 1rem;
}

.gallery-frame.frame-center-arch {
	flex: 0 0 24%;
	height: 320px;
	border-radius: 120px 120px 1rem 1rem;
	border: 2px solid #ffffff;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.06);
}

/* 2. Blog Listing Section */
.blog-listing-section {
	padding: 30px 0 70px;
}

.blog-listing-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 28px;
}

.listing-header-left {
	flex: 1;
}

.listing-eyebrow {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 6px;
}

.listing-main-title {
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0;
}

.listing-header-right {
	flex: 0 0 440px;
	max-width: 440px;
}

.listing-lead-text {
	font-size: 14.5px;
	line-height: 1.6;
	color: #64748b;
	margin: 0;
}

/* Category Filter Tabs Bar */
.blog-category-filter-bar {
	position: relative;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 36px;
}

.blog-category-tabs {
	display: flex;
	align-items: center;
	gap: 24px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0;
}

.blog-category-tabs::-webkit-scrollbar {
	display: none;
}

.blog-cat-btn {
	background: transparent;
	border: none;
	padding: 8px 4px 14px;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color 0.2s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.blog-cat-btn:hover {
	color: var(--color-primary, #12499A);
}

.blog-cat-btn.active {
	color: var(--color-primary, #12499A);
	font-weight: 700;
}

.blog-cat-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2.5px;
	background: var(--color-primary, #12499A);
	border-radius: 2px 2px 0 0;
}

.cat-count {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
}

/* Posts Grid: Text on Top, Image on Bottom */
.blog-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

.blog-card-v2 {
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	background: #ffffff;
	padding: 20px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.03);
}

.blog-card-v2:hover {
	transform: translateY(-4px);
	border-color: #cbd5e1;
	box-shadow: 0 8px 20px rgba(18, 73, 154, 0.06);
}

.blog-card-thumb-container {
	width: 100%;
	margin-bottom: 16px;
}

.blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-card-top {
	display: flex;
	flex-direction: column;
	margin-bottom: 18px;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	line-height: 1;
}

.blog-card-date {
	color: #64748b;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.blog-card-date i {
	font-size: 13px;
	line-height: 1;
	color: #94a3b8;
	display: inline-flex;
	align-items: center;
}

.blog-card-cat-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: var(--color-primary, #12499A);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-card-cat-badge:hover {
	background: #e0f2fe;
	color: #0284c7;
}

.blog-card-title {
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #0f172a;
	margin: 0;
}

.blog-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card-title a:hover {
	color: var(--color-primary, #12499A);
}

.blog-card-excerpt {
	font-size: 13.5px;
	line-height: 1.58;
	color: #64748b;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card-bottom {
	width: 100%;
}

.blog-card-thumb-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 1rem;
	overflow: hidden;
	background: #f8fafc;
	text-decoration: none;
}

.blog-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card-v2:hover .blog-card-img {
	transform: scale(1.06);
}

.blog-card-thumb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.blog-card-v2:hover .blog-card-thumb-overlay {
	opacity: 1;
}

.btn-read-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-primary, #12499A);
	font-size: 13px;
	font-weight: 700;
	transform: translateY(8px);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, color 0.2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.blog-card-v2:hover .btn-read-pill {
	transform: translateY(0);
}

.btn-read-pill:hover {
	background: var(--color-primary, #12499A);
	color: #ffffff;
}

/* Pagination */
.blog-pagination-wrapper {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.blog-pagination-wrapper ul.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.blog-pagination-wrapper .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #334155;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.blog-pagination-wrapper .page-numbers:hover {
	border-color: var(--color-primary, #12499A);
	color: var(--color-primary, #12499A);
	background: #f8fafc;
}

.blog-pagination-wrapper .page-numbers.current {
	background: var(--color-primary, #12499A);
	border-color: var(--color-primary, #12499A);
	color: #ffffff;
}

/* Empty State */
.blog-empty-state {
	text-align: center;
	padding: 60px 20px;
	max-width: 520px;
	margin: 0 auto;
}

.empty-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #eef5fc;
	color: var(--color-primary, #12499A);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: 0 auto 18px;
}

.blog-empty-state h3 {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 8px;
}

.blog-empty-state p {
	font-size: 14.5px;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 22px;
}

/* 3. Consultation Lead CTA Banner */
.blog-cta-section {
	padding: 30px 0 80px;
}

.blog-cta-card {
	position: relative;
	background: linear-gradient(135deg, #0e3a7a 0%, #12499A 60%, #1a5bb8 100%);
	border-radius: 1rem;
	padding: 44px 50px;
	overflow: hidden;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-cta-content {
	position: relative;
	z-index: 2;
	max-width: 650px;
}

.blog-cta-tag {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fef08a;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 12px;
}

.blog-cta-title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	color: #ffffff;
	margin-bottom: 10px;
}

.blog-cta-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 22px;
}

.blog-cta-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.blog-cta-actions .cta-main-btn {
	background: var(--color-accent, #F99D1C);
	border-color: var(--color-accent, #F99D1C);
	color: #ffffff;
	font-weight: 700;
	border-radius: 999px;
	padding: 11px 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.blog-cta-actions .cta-main-btn:hover {
	background: #d4830f;
	border-color: #d4830f;
	color: #ffffff;
}

.blog-cta-actions .cta-phone-btn {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-weight: 600;
	border-radius: 999px;
	padding: 11px 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.blog-cta-actions .cta-phone-btn:hover {
	background: #ffffff;
	color: #12499A;
}

.blog-cta-decor {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 320px;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	opacity: 0.16;
}

.cta-cap-icon {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 150px;
	color: #ffffff;
}

/* 4. Archive Template Styles */
.archive-hero-section {
	padding: 50px 0 44px;
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
	position: relative;
	overflow: hidden;
}

.archive-hero-ambient {
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 380px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(18, 73, 154, 0.12) 0%, rgba(18, 73, 154, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

.archive-hero-inner {
	position: relative;
	z-index: 2;
}

.archive-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-primary, #12499A);
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 12px;
	border: 1px solid #dbeafe;
}

.archive-main-title {
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}

.archive-description {
	font-size: 15px;
	color: #64748b;
	line-height: 1.65;
	max-width: 720px;
	margin: 0;
}

/* 5. Modern Single Post Format (Matching Specification) */
.blog-single-page {
	padding: 36px 0 80px;
	background: #ffffff;
}

.single-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Top Header */
.single-header-top {
	width: 100%;
	max-width: 100%;
	margin: 0 0 32px;
}

.single-top-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.single-breadcrumb {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}

.single-breadcrumb .breadcrumb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-breadcrumb .breadcrumb-item {
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	line-height: 1.4;
}

.single-breadcrumb .breadcrumb-link {
	color: #64748b;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.single-breadcrumb .breadcrumb-link i {
	font-size: 13px;
	color: #64748b;
	transition: color 0.2s ease;
}

.single-breadcrumb .breadcrumb-link:hover,
.single-breadcrumb .breadcrumb-link:hover i {
	color: var(--color-primary, #12499A);
}

.single-breadcrumb .breadcrumb-separator {
	color: #94a3b8;
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	user-select: none;
	padding: 0 1px;
}

.single-breadcrumb .breadcrumb-current {
	color: #0f172a;
	font-weight: 600;
	max-width: 380px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-back-posts {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.btn-back-posts:hover {
	color: var(--color-primary, #12499A);
	border-color: #bfdbfe;
	background: #eff6ff;
	transform: translateX(-2px);
}

.single-cat-badge-wrap {
	margin-bottom: 14px;
}

.single-category-pill {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: #eff6ff;
	color: var(--color-primary, #12499A);
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #bfdbfe;
	transition: all 0.2s;
}

.single-category-pill:hover {
	background: var(--color-primary, #12499A);
	color: #ffffff;
	border-color: var(--color-primary, #12499A);
}

.single-post-title {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.42;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}

.single-post-subtitle {
	font-size: 16.5px;
	line-height: 1.65;
	color: #475569;
	margin: 0 0 22px;
	font-weight: 450;
}

.single-author-date-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	margin-top: 24px;
}

.author-meta-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.author-avatar-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.1);
}

.author-avatar-link,
.author-card-avatar-link {
	display: inline-flex;
	text-decoration: none;
	border-radius: 50%;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.author-avatar-link:hover,
.author-card-avatar-link:hover {
	opacity: 0.92;
	transform: scale(1.03);
}

.author-name-link,
.author-card-name-link {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	transition: color 0.2s ease;
}

.author-name-link:hover .author-name,
.author-card-name-link:hover {
	color: var(--color-primary, #12499A) !important;
}

.author-meta-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.author-name {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.author-title {
	font-size: 13px;
	color: #64748b;
	line-height: 1.35;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.advisor-check-icon {
	color: var(--color-primary, #12499A);
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
	margin-top: -1px;
}

.author-meta-right {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13.5px;
	color: #64748b;
	line-height: 1;
}

.author-meta-datetime {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.author-meta-share {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 18px;
	border-left: 1px solid #e2e8f0;
	position: relative;
}

.meta-share-title {
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}

.meta-share-grid {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.meta-share-grid .btn-share-icon {
	width: 34px;
	height: 34px;
	font-size: 13px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: none;
}

.meta-share-grid .btn-share-icon:hover {
	transform: translateY(-2px);
}

.meta-share-grid .btn-share-icon.fb:hover {
	background: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}

.meta-share-grid .btn-share-icon.zalo {
	font-size: 10.5px;
	font-weight: 700;
}

.meta-share-grid .btn-share-icon.zalo:hover {
	background: #0068ff;
	border-color: #0068ff;
	color: #ffffff;
}

.meta-share-grid .btn-share-icon.in:hover {
	background: #0a66c2;
	border-color: #0a66c2;
	color: #ffffff;
}

.meta-share-grid .btn-share-icon.copy:hover {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}

.meta-copy-toast {
	position: absolute;
	top: -34px;
	right: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #16a34a;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
	z-index: 10;
}

.meta-date-item,
.meta-reading-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1;
}

.meta-date-item i,
.meta-reading-item i {
	font-size: 13.5px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	margin-top: -1px;
}

.meta-date-item span,
.meta-reading-item span {
	line-height: 1;
	display: inline-block;
}

.meta-dot-sep {
	color: #cbd5e1;
	font-size: 11px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Full Grid Cover Image */
.single-cover-image-wrap {
	width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	margin-bottom: 44px;
	background: #f8fafc;
	max-height: 520px;
}

.single-cover-image {
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

/* 2-Column Split: Content (8 cols) & Sticky Corner (4 cols) */
.single-body-layout {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: 48px;
	margin-bottom: 60px;
}

/* Article Content Column */
.single-content-col {
	min-width: 0;
}

.single-article-body {
	font-size: 17px;
	line-height: 1.82;
	color: #334155;
}

.single-article-body p {
	font-size: 17px;
	line-height: 1.82;
	margin-bottom: 22px;
}

.single-article-body .article-lead {
	font-size: 17px;
	line-height: 1.82;
	font-weight: 500;
	color: #1e293b;
	margin-bottom: 22px;
}

.single-article-body h2 {
	font-size: 25px;
	font-weight: 800;
	color: #0f172a;
	margin: 44px 0 18px;
	line-height: 1.35;
	padding-left: 0;
	border-left: none;
	scroll-margin-top: 100px;
	letter-spacing: -0.01em;
}

.single-article-body h3 {
	font-size: 20px;
	font-weight: 700;
	color: #1e293b;
	margin: 32px 0 14px;
	line-height: 1.4;
	scroll-margin-top: 100px;
}

.single-article-body ul,
.single-article-body ol {
	padding-left: 22px;
	margin: 0 0 24px;
}

.single-article-body li {
	font-size: 17px;
	line-height: 1.8;
	margin-bottom: 10px;
}

.single-article-body blockquote {
	border: none;
	background: #fffbeb;
	padding: 24px 28px;
	border-radius: 1rem;
	margin: 30px 0;
	font-style: italic;
	font-size: 17px;
	line-height: 1.75;
	color: #1e293b;
	position: relative;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
}

.single-article-body blockquote cite {
	display: block;
	font-size: 14.5px;
	font-style: normal;
	font-weight: 600;
	color: #64748b;
	margin-top: 12px;
}

.single-article-body blockquote p:last-child {
	margin-bottom: 0;
}

/* Custom Highlight Box for Key Takeaways & Gutenberg Block */
.article-highlight-box {
	border-radius: 1rem;
	padding: 24px 26px;
	margin: 34px 0;
	border: 1px solid #bfdbfe;
	background: #eff6ff;
	transition: all 0.2s ease;
}

.article-highlight-box.theme-blue {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.article-highlight-box.theme-blue h4 {
	color: var(--color-primary, #12499A);
}

.article-highlight-box.theme-amber {
	background: #fffbeb;
	border-color: #fde68a;
}

.article-highlight-box.theme-amber h4 {
	color: #d97706;
}

.article-highlight-box.theme-green {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.article-highlight-box.theme-green h4 {
	color: #16a34a;
}

.article-highlight-box h4 {
	font-size: 17.5px;
	font-weight: 700;
	color: var(--color-primary, #12499A);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.article-highlight-box h4 i {
	font-size: 18px;
}

.article-highlight-box p,
.article-highlight-box .highlight-box-content p {
	font-size: 17px;
	line-height: 1.75;
	color: #334155;
	margin-bottom: 0;
}

/* Author Card at End of Article */
.single-author-card {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 24px;
	border-radius: 1rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	margin-top: 48px;
}

.author-card-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.08);
}

.author-card-title {
	font-size: 16.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
}

.author-card-role {
	font-size: 13.5px;
	color: var(--color-primary, #12499A);
	font-weight: 700;
	margin: 0 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1.35;
}

.author-card-role .advisor-check-icon {
	color: var(--color-primary, #12499A);
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
	margin-top: -1px;
}

.author-card-bio {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

.author-social-links {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.author-social-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #f8fafc;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.author-social-pill:hover {
	background: var(--color-primary, #12499A);
	color: #ffffff;
	border-color: var(--color-primary, #12499A);
	transform: translateY(-1px);
}

.author-social-pill i,
.author-social-pill .author-social-pill-zalo {
	font-size: 11.5px;
	color: #475569;
	transition: color 0.2s ease;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.author-social-pill:hover i,
.author-social-pill:hover .author-social-pill-zalo {
	color: #ffffff;
}

.author-social-pill .zalo-tag {
	font-weight: 800;
	font-size: 11px;
	color: #475569;
	background: transparent;
	padding: 0;
	border-radius: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
}

.author-social-pill:hover .zalo-tag {
	color: #ffffff;
}

/* Sticky Corner (Right Column - 4 cols) */
.single-sticky-col {
	position: relative;
	height: 100%;
}

.sticky-corner-inner {
	position: -webkit-sticky;
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 10;
}

.sticky-widget {
	background: #ffffff;
	border: none;
	border-radius: 1rem;
	padding: 22px 20px;
}

.widget-toc {
	background: #f8fafc;
	border: none;
	border-radius: 1rem;
	padding: 22px 20px;
}

/* Table of Contents Widget */
.widget-toc-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f5f9;
}

.widget-toc-header i {
	color: var(--color-primary, #12499A);
}

.toc-nav-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 280px;
	overflow-y: auto;
	padding-right: 4px;
}

.toc-link {
	display: block;
	font-size: 13px;
	color: #64748b;
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 8px;
	border: none;
	line-height: 1.45;
	transition: all 0.2s ease;
}

.toc-link:hover {
	color: var(--color-primary, #12499A);
	background: #f1f5f9;
}

.toc-link.active {
	color: var(--color-primary, #12499A);
	font-weight: 700;
	background: #eef5fc;
}

.toc-link.toc-sub-item {
	padding-left: 22px;
	font-size: 13px;
	font-weight: 500;
	color: #475569;
}

.toc-link.toc-sub-item:hover {
	color: var(--color-primary, #12499A);
	background: #f1f5f9;
}

.toc-link.toc-sub-item.active {
	color: var(--color-primary, #12499A);
	font-weight: 600;
	background: #eef5fc;
}

/* Share Widget */
.widget-share {
	background: #f8fafc;
	border: none;
	text-align: center;
	position: relative;
}

.share-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	display: block;
	margin-bottom: 12px;
}

.share-social-grid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-share-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	transition: all 0.2s ease;
	cursor: pointer;
	padding: 0;
}

.btn-share-icon:hover {
	transform: translateY(-2px);
}

.btn-share-icon.fb:hover {
	background: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}

.btn-share-icon.zalo {
	font-size: 11px;
	font-weight: 700;
}

.btn-share-icon.zalo:hover {
	background: #0068ff;
	border-color: #0068ff;
	color: #ffffff;
}

.btn-share-icon.in:hover {
	background: #0a66c2;
	border-color: #0a66c2;
	color: #ffffff;
}

.btn-share-icon.copy:hover {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}

.copy-toast {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12.5px;
	color: #16a34a;
	font-weight: 600;
	margin-top: 10px;
	padding: 4px 8px;
	border-radius: 6px;
	background: #f0fdf4;
}

/* Promotional Card Widget */
.widget-promo-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 0;
	overflow: hidden;
	text-align: left;
	box-shadow: none;
}

.promo-card-cover-wrap {
	position: relative;
	width: 100%;
	height: 165px;
	overflow: hidden;
	background: #f1f5f9;
}

.promo-card-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
	transition: transform 0.4s ease;
}

.widget-promo-card:hover .promo-card-cover-img {
	transform: scale(1.04);
}

.promo-card-tag-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-primary, #12499A);
	font-size: 11.5px;
	font-weight: 700;
	border: 1px solid rgba(18, 73, 154, 0.15);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.promo-card-body {
	padding: 20px 22px 24px;
}

.promo-card-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-primary, #12499A);
	font-size: 11.5px;
	font-weight: 700;
	margin-bottom: 10px;
	border: 1px solid #dbeafe;
}

.promo-card-title {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0 0 8px;
}

.promo-card-desc {
	font-size: 13px;
	color: #475569;
	line-height: 1.55;
	margin-bottom: 16px;
}

.btn-promo-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--color-primary, #12499A);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
	border: none;
}

.btn-promo-action:hover {
	background: #0f427c;
	transform: translateY(-1px);
	color: #ffffff;
}

.promo-card-footer {
	font-size: 12.5px;
	color: #64748b;
	margin-top: 12px;
	text-align: center;
}

.promo-card-footer a {
	color: var(--color-primary, #12499A);
	font-weight: 700;
	text-decoration: none;
}

/* Related Section */
.single-related-section {
	padding-top: 50px;
	border-top: 1px solid #e2e8f0;
	margin-top: 40px;
}

.related-section-header {
	margin-bottom: 28px;
}

.related-badge {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 4px;
}

.related-main-title {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	letter-spacing: -0.01em;
}

.related-main-title .highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	position: relative;
	display: inline-block;
}

.related-main-title .highlight-brand::after {
	display: none !important;
}

/* Mobile TOC Components: Inline Accordion, Floating FAB & Bottom Drawer */
.mobile-inline-toc,
.mobile-toc-fab,
.mobile-toc-backdrop,
.mobile-toc-drawer {
	display: none;
}

@media (min-width: 1025px) {
	.mobile-inline-toc,
	#mobileInlineToc,
	.mobile-toc-fab,
	#mobileTocFab,
	.mobile-toc-backdrop,
	.mobile-toc-drawer {
		display: none !important;
	}
}

/* Responsive Rules */
@media (max-width: 1024px) {
	/* Hide desktop sidebar TOC widget on mobile to avoid bottom duplicate */
	.widget-toc {
		display: none !important;
	}

	/* 1. Mobile Inline TOC Accordion Card */
	.mobile-inline-toc {
		display: block;
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		border-radius: 1rem;
		margin-bottom: 28px;
		overflow: hidden;
		transition: all 0.25s ease;
	}

	.mobile-inline-toc.is-open {
		background: #ffffff;
		border-color: #bfdbfe;
		box-shadow: none !important;
	}

	.mobile-inline-toc-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		background: transparent;
		border: none;
		cursor: pointer;
		text-align: left;
		font-family: inherit;
		min-height: 48px;
	}

	.mobile-inline-toc-btn .inline-toc-left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-inline-toc-btn .inline-toc-left i {
		font-size: 16px;
		color: var(--color-primary, #12499A);
	}

	.mobile-inline-toc-btn .inline-toc-title {
		font-size: 15px;
		font-weight: 700;
		color: #0f172a;
	}

	.mobile-inline-toc-btn .inline-toc-right {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-inline-toc-btn .inline-toc-count {
		font-size: 12px;
		font-weight: 700;
		color: var(--color-primary, #12499A);
		background: #eff6ff;
		padding: 3px 10px;
		border-radius: 999px;
	}

	.mobile-inline-toc-btn .inline-toc-arrow {
		font-size: 12px;
		color: #64748b;
		transition: transform 0.25s ease;
	}

	.mobile-inline-toc.is-open .inline-toc-arrow {
		transform: rotate(180deg);
		color: var(--color-primary, #12499A);
	}

	.mobile-inline-toc-collapse {
		display: none;
		padding: 4px 14px 16px;
		border-top: 1px solid #f1f5f9;
	}

	.mobile-inline-toc.is-open .mobile-inline-toc-collapse {
		display: block;
	}

	.mobile-inline-toc-list {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	/* 2. Floating Action Pill Button (FAB) */
	.mobile-toc-fab {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		bottom: 22px;
		right: 20px;
		z-index: 850;
		height: 44px;
		padding: 0 18px;
		border-radius: 999px;
		background: var(--color-primary, #12499A);
		color: #ffffff;
		border: 1px solid rgba(255, 255, 255, 0.2);
		font-family: inherit;
		font-size: 13.5px;
		font-weight: 700;
		box-shadow: none !important;
		cursor: pointer;
		transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		-webkit-tap-highlight-color: transparent;
	}

	.mobile-toc-fab i {
		font-size: 14.5px;
	}

	.mobile-toc-fab:active {
		transform: scale(0.94);
		box-shadow: none !important;
	}

	/* 3. Mobile Backdrop */
	.mobile-toc-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.mobile-toc-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* 4. Bottom Sheet Drawer */
	.mobile-toc-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 82vh;
		background: #ffffff;
		border-radius: 1.25rem 1.25rem 0 0;
		border-top: 1px solid #e2e8f0;
		box-shadow: none !important;
		z-index: 1001;
		transform: translateY(100%);
		transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
		overflow: hidden;
	}

	.mobile-toc-drawer.is-open {
		transform: translateY(0);
	}

	.mobile-toc-drawer-handle {
		width: 38px;
		height: 4px;
		border-radius: 999px;
		background: #cbd5e1;
		margin: 10px auto 4px;
		flex-shrink: 0;
	}

	.mobile-toc-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px 14px;
		border-bottom: 1px solid #f1f5f9;
		flex-shrink: 0;
	}

	.mobile-toc-drawer-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15.5px;
		font-weight: 700;
		color: #0f172a;
	}

	.mobile-toc-drawer-title i {
		color: var(--color-primary, #12499A);
		font-size: 15px;
	}

	.mobile-toc-drawer-close {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background: #f1f5f9;
		color: #64748b;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.mobile-toc-drawer-close:hover {
		background: #e2e8f0;
		color: #0f172a;
	}

	.mobile-toc-drawer-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 12px 18px 36px;
	}

	.mobile-drawer-toc-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.mobile-drawer-toc-list .toc-link {
		padding: 10px 14px;
		font-size: 13.5px;
		min-height: 42px;
		display: flex;
		align-items: center;
		border-radius: 10px;
	}

	.mobile-drawer-toc-list .toc-link.active {
		background: #eef5fc;
		color: var(--color-primary, #12499A);
		font-weight: 700;
	}

	body.mobile-toc-open {
		overflow: hidden;
	}

	.blog-posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.single-body-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.sticky-corner-inner {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.widget-promo-card {
		grid-column: span 2;
	}
	.single-breadcrumb .breadcrumb-current {
		max-width: 280px;
	}
}

@media (max-width: 680px) {
	.single-top-nav-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 16px;
		width: 100%;
	}
	.single-breadcrumb {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 4px;
	}
	.single-breadcrumb::-webkit-scrollbar {
		display: none;
	}
	.single-breadcrumb .breadcrumb-list {
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		width: max-content;
		padding-right: 16px;
	}
	.single-breadcrumb .breadcrumb-item {
		flex-shrink: 0;
	}
	.single-breadcrumb .breadcrumb-current {
		max-width: none;
		white-space: nowrap;
	}
	.blog-hero-section {
		padding: 30px 0 40px;
	}
	.blog-hero-title {
		font-size: 28px;
	}
	.listing-main-title {
		font-size: 24px;
	}
	.blog-posts-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.blog-cta-card {
		padding: 32px 24px;
	}
	.blog-cta-title {
		font-size: 22px;
	}
	.single-post-title {
		font-size: 24px;
		line-height: 1.42;
	}
	.single-author-date-bar {
		display: grid;
		grid-template-columns: 46px 1fr;
		column-gap: 14px;
		row-gap: 8px;
		align-items: center;
		padding: 14px 0;
	}
	.author-meta-left {
		display: contents;
	}
	.author-avatar-circle {
		grid-row: 1 / span 2;
		width: 46px;
		height: 46px;
		align-self: center;
	}
	.author-meta-text {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 8px;
		line-height: 1.3;
	}
	.author-name {
		font-size: 15px;
		font-weight: 700;
		color: #0f172a;
	}
	.author-title {
		font-size: 12px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	.author-meta-right {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		padding-top: 10px;
		border-top: 1px dashed #e2e8f0;
		font-size: 12px;
	}
	.author-meta-datetime {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		font-size: 12px;
		color: #64748b;
	}
	.author-meta-share {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 0;
		border-left: none;
		width: 100%;
	}
	.meta-share-title {
		font-size: 12px;
		color: #64748b;
	}
	.sticky-corner-inner {
		grid-template-columns: 1fr;
	}
	.widget-promo-card {
		grid-column: span 1;
	}
	.single-author-card {
		flex-direction: column;
		text-align: center;
	}
}

/* ========================================================
   GLOBAL PRE-FOOTER CTA RIBBON (ALL PAGES EXCEPT HOMEPAGE)
   Features signature Royal Blue banner & protruding schedule box
   ======================================================== */
.bs-prefooter-cta-section {
	position: relative;
	width: 100%;
	background: linear-gradient(135deg, #0d3876 0%, #12499A 55%, #185fbf 100%);
	color: #ffffff;
	padding: 0;
	margin-top: 64px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	overflow: visible;
	z-index: 20;
}

.bs-prefooter-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	min-height: 120px;
	padding: 16px 0 0;
	position: relative;
}

/* 1. Pop-out Floating Evaluation Box (Nhô lên ngoài khung dải băng, sát đáy phẳng cắt ngang) */
/* 1. Pop-out Floating Evaluation Box (Nhô lên ngoài khung dải băng, sát đáy phẳng cắt ngang, không shadow, không hover, không border) */
.bs-prefooter-popout-box {
	position: relative;
	width: 250px;
	flex-shrink: 0;
	margin-top: -46px;
	margin-bottom: 0 !important;
	align-self: flex-end;
	z-index: 25;
	border-radius: 14px 14px 0 0 !important;
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: none !important;
}

.bs-prefooter-popout-box:hover {
	transform: none !important;
	box-shadow: none !important;
}

.bs-popout-box-head {
	background: linear-gradient(135deg, #F99D1C 0%, #ea580c 100%);
	color: #ffffff;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bs-popout-box-head i {
	font-size: 14px;
}

.bs-popout-box-body {
	padding: 12px 14px 14px;
	text-align: center;
	background: #ffffff;
}

.bs-popout-days {
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}

.bs-popout-hours-pill {
	display: inline-block;
	width: 100%;
	padding: 6px 10px;
	border-radius: 8px;
	background: #eff6ff;
	color: #12499A;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	border: 1px solid #bfdbfe;
}

.bs-popout-sub {
	font-size: 11.5px;
	color: #64748b;
	margin-top: 6px;
}

/* 2. Center Message Block */
.bs-prefooter-center-content {
	flex: 1;
	min-width: 0;
	padding: 6px 0;
}

.bs-prefooter-headline {
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.bs-prefooter-headline .bs-headline-highlight {
	color: #F99D1C !important;
	background: linear-gradient(135deg, #FFE099 0%, #FFAE33 50%, #F99D1C 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	font-weight: 800 !important;
	display: inline-block !important;
}

.bs-prefooter-subline {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
	margin: 0;
}

/* 3. Right Action Button & Hotline */
.bs-prefooter-action-col {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bs-prefooter-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 999px;
	background: #ffffff;
	color: #12499A;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	border: 1.5px solid #ffffff;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.08);
	transition: all 0.25s ease;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	font-family: inherit;
}

.bs-prefooter-btn:hover {
	background: #ffffff;
	border-color: #F99D1C;
	color: #12499A;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.12);
}

.bs-prefooter-btn .btn-star-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bs-prefooter-btn:hover .btn-star-icon-wrap {
	transform: rotate(72deg) scale(1.15);
}

.bs-prefooter-btn .btn-cta-arrow {
	font-size: 13px;
	color: #F99D1C;
	transition: transform 0.25s ease;
}

.bs-prefooter-btn:hover .btn-cta-arrow {
	transform: translateX(4px);
}

.bs-prefooter-hotline {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}

.bs-prefooter-hotline a {
	color: #ffffff;
	font-weight: 700;
	text-decoration: underline;
}

/* ========================================================
   POPUP MODAL: ĐĂNG KÝ TƯ VẤN LỘ TRÌNH HỌC TẬP
   ======================================================== */
body.bs-modal-open {
	overflow: hidden;
}

.bs-consult-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.bs-consult-modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.bs-consult-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 540px;
	background: #ffffff;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 16px 40px rgba(18, 73, 154, 0.08);
	transform: translateY(20px) scale(0.97);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}

.bs-consult-modal-backdrop.is-open .bs-consult-modal-dialog {
	transform: translateY(0) scale(1);
}

.bs-consult-modal-header {
	padding: 20px 24px 18px;
	background: #ffffff;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.modal-brand-badge {
	display: flex;
	align-items: center;
	gap: 12px;
}

.modal-brand-badge img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
}

.modal-title {
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 2px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.modal-sub {
	font-size: 12px;
	color: #64748b;
	margin: 0;
	line-height: 1.4;
}

.bs-consult-modal-close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #64748b;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.bs-consult-modal-close:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #dc2626;
	transform: rotate(90deg);
}

.bs-consult-modal-body {
	padding: 22px 24px 24px;
	background: #ffffff;
	max-height: calc(88vh - 80px);
	overflow-y: auto;
}

.consult-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.form-group.full-width {
	grid-column: span 2;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
}

.form-label .required {
	color: #ef4444;
	margin-left: 2px;
}

.form-input-wrap {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.form-input-wrap .form-icon {
	position: absolute;
	left: 14px;
	color: #94a3b8;
	font-size: 14px;
	pointer-events: none;
	z-index: 2;
}

.form-input-wrap.textarea-wrap .form-icon {
	top: 13px;
}

.form-control {
	width: 100%;
	padding: 10px 14px 10px 40px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #0f172a;
	font-size: 13.5px;
	font-family: inherit;
	transition: all 0.2s ease;
	line-height: 1.5;
}

.form-control:focus {
	background: #ffffff;
	border-color: #12499A;
	outline: none;
	box-shadow: 0 0 0 3px rgba(18, 73, 154, 0.08);
}

.form-control::placeholder {
	color: #94a3b8;
}

textarea.form-control {
	resize: vertical;
	min-height: 80px;
	padding-top: 10px;
}

.form-select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	padding-right: 36px;
}

.form-submit-row {
	margin-top: 20px;
}

.btn-consult-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	background: #12499A;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.1);
	transition: all 0.25s ease;
	font-family: inherit;
}

.btn-consult-submit:hover {
	background: #0e3a7a;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.15);
}

.btn-consult-submit:active {
	transform: translateY(0);
}

.btn-consult-submit i {
	font-size: 14px;
	color: #F99D1C;
	transition: transform 0.2s ease;
}

.btn-consult-submit:hover i {
	transform: translateX(3px);
}

.form-trust-note {
	margin-top: 14px;
	text-align: center;
	font-size: 12px;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.form-trust-note i {
	color: #16a34a;
	font-size: 13px;
}

/* Success panel state */
.consult-success-panel {
	text-align: center;
	padding: 24px 16px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.success-icon-wrap {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f0fdf4;
	border: 2px solid #bbf7d0;
	color: #16a34a;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.success-title {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 8px;
}

.success-desc {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.55;
	max-width: 440px;
	margin: 0 0 20px;
}

.btn-success-close {
	padding: 10px 28px;
	border-radius: 999px;
	background: #12499A;
	color: #ffffff;
	font-weight: 700;
	font-size: 13.5px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.btn-success-close:hover {
	background: #0e3a7a;
}

/* Responsive for Pre-footer CTA */
@media (max-width: 991px) {
	.bs-prefooter-cta-section {
		margin-top: 70px;
		padding-top: 24px;
	}
	.bs-prefooter-inner {
		flex-direction: column;
		text-align: center;
		gap: 20px;
		padding: 24px 0 32px;
	}
	.bs-prefooter-popout-box {
		margin-top: -60px;
		margin-bottom: 0;
	}
	.bs-prefooter-headline {
		font-size: 18px;
	}
	.bs-prefooter-action-col {
		width: 100%;
	}
	.bs-prefooter-btn {
		width: 100%;
		max-width: 300px;
		justify-content: center;
	}
}

/* Pre-footer CTA to Footer tight spacing & Headline highlight */
.bs-prefooter-cta-section {
	margin-bottom: 0 !important;
}

.bs-prefooter-cta-section + .site-footer {
	padding-top: 36px !important;
}

/* ==========================================================================
   MASTER HEADLINE GRADIENT HIGHLIGHT (BRAND BLUE GRADIENT — RULE 13)
   Royal Blue (#12499A) to Sky Blue (#0284c7)
   Synchronized across Homepage, About, Learning Formats, Teachers, Careers,
   Contact, Blog, Single, Author, and Landing Pages
   ========================================================================== */
.bs-headline-highlight,
h1 .text-brand,
h1 .text-highlight,
h1 .highlight-brand,
h2 .text-brand,
h2 .text-highlight,
h2 .highlight-brand,
h3 .text-brand,
h3 .text-highlight,
h3 .highlight-brand,
.section-title .text-brand,
.section-title .text-highlight,
.section-title .highlight-brand,
.section-title .highlight-brand-light,
.section-title .bs-headline-highlight,
.academic-title .highlight-brand,
.about-lead-title .highlight-brand,
.about-hero-title .highlight-brand,
.narrative-heading .highlight-brand,
.mosaic-headline .highlight-brand,
.pillars-split-title .highlight-brand,
.campus-heading .highlight-brand,
.formats-hero-title .highlight-brand,
.format-section-title .highlight-brand,
.format-comparison-section .workflow-title .highlight-brand,
.teachers-hero-title .highlight-brand,
.careers-hero-title .highlight-brand,
.careers-page-main .workflow-title .highlight-brand,
.contact-hero-title .highlight-brand,
.blog-hero-title .highlight-brand,
.listing-main-title .highlight-brand,
.related-main-title .highlight-brand,
.overview-main-title .highlight-brand,
.overview-main-title .highlight-brand-light,
.sticky-overlay-title .highlight-brand,
.sticky-overlay-title .bs-headline-highlight,
.support-main-title .highlight-brand,
.support-main-title .bs-headline-highlight,
.faq-col-title .highlight-brand,
.faq-col-title .highlight-brand-light {
	color: #12499A !important;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	font-weight: 800;
	display: inline-block;
	position: relative;
}

/* Promo Card Star Button in Single Post Sidebar */
.promo-card-star-btn {
	width: 100% !important;
	display: flex !important;
	margin-bottom: 14px;
	border-radius: 999px;
}

.promo-card-star-btn .btn-star-glow-inner {
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
}

.promo-card-star-btn .btn-star-glow-text {
	font-size: 14px;
	font-weight: 700;
}

/* ========================================================
   AUTHOR PROFILE PAGE (author.php)
   Left: Scrollable Cards Stack | Right: Sticky Portrait Sidebar
   Colors: #12499A (Royal Blue) | #F99D1C (Star Amber)
   Strict Border Radius: 1rem (16px) | Pills: 999px
   ======================================================== */
.author-profile-page {
	padding: 24px 0 60px;
	background: #ffffff;
}

.author-breadcrumb-section {
	margin-bottom: 24px;
}

.author-breadcrumb-section .breadcrumb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.author-breadcrumb-section .breadcrumb-item {
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	line-height: 1.4;
	list-style: none !important;
}

.author-breadcrumb-section .breadcrumb-link {
	color: #64748b;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.author-breadcrumb-section .breadcrumb-link:hover {
	color: var(--color-primary, #12499A);
}

.author-breadcrumb-section .breadcrumb-separator {
	font-size: 10px;
	color: #94a3b8;
	display: inline-flex;
	align-items: center;
}

.author-breadcrumb-section .breadcrumb-current {
	color: #0f172a;
	font-weight: 700;
}

/* Author Badges & Role Pills */
.author-badge-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.author-role-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.author-role-pill.primary {
	background: #eff6ff;
	color: #12499A;
	border: 1px solid #bfdbfe;
}

.author-role-pill.primary i {
	color: #12499A;
}

.author-role-pill.secondary {
	background: #fef7ec;
	color: #b45309;
	border: 1px solid #fed7aa;
}

.author-role-pill.secondary i {
	color: #F99D1C;
}

.card-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.card-icon-circle.blue {
	background: #eff6ff;
	color: #12499A;
	border: 1px solid #bfdbfe;
}

.card-icon-circle.amber {
	background: #fef7ec;
	color: #F99D1C;
	border: 1px solid #fed7aa;
}

/* Main 2-Column Split: Left Cards & Right Sticky Sidebar */
.author-profile-page,
.author-main-split-section,
.author-main-split-section > .container {
	overflow: visible !important;
}

.author-main-split-section {
	margin-bottom: 56px;
}

.author-main-split-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 40px;
	align-items: start;
}

.author-cards-stack {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.author-content-card {
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	border-radius: 1rem;
	padding: 36px;
	box-shadow: 0 4px 24px rgba(18, 73, 154, 0.06) !important;
}

.author-card-heading {
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
	letter-spacing: -0.025em;
	margin: 14px 0 16px;
}

.author-card-heading-h2 {
	font-size: 21px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0;
}

.card-head-title-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}

.card-head-sub {
	font-size: 13px;
	color: #64748b;
	margin: 3px 0 0;
	line-height: 1.4;
}

.author-card-lead {
	font-size: 15.5px;
	line-height: 1.7;
	color: #475569;
	margin: 0 0 20px;
}

/* Intro Certificates 2-Column Slider (Pure Image Showcase) */
.intro-certs-block {
	margin: 20px 0 0;
	position: relative;
}

.intro-certs-slider-container {
	position: relative;
	padding: 0 44px;
}

.intro-cert-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #12499A;
	color: #ffffff;
	border: none !important;
	border-width: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	box-shadow: 0 3px 12px rgba(18, 73, 154, 0.18);
	transition: all 0.22s ease;
	z-index: 5;
}

.intro-cert-arrow.prev {
	left: 0;
}

.intro-cert-arrow.next {
	right: 0;
}

.intro-cert-arrow:hover:not(:disabled) {
	background: #0e3a7a;
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 5px 16px rgba(18, 73, 154, 0.25);
}

.intro-cert-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	box-shadow: none;
}

.intro-certs-viewport {
	overflow: hidden;
	width: 100%;
	border-radius: 12px;
	padding: 2px;
}

.intro-certs-track {
	display: flex;
	gap: 16px;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.intro-cert-slide {
	flex: 0 0 calc(50% - 8px);
	min-width: calc(50% - 8px);
	box-sizing: border-box;
}

.intro-cert-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.04) !important;
	border: none !important;
	border-width: 0 !important;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: block;
	width: 100%;
}

.intro-cert-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.08) !important;
}

.intro-cert-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1.4 / 1;
	background: #f8fafc;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border-radius: 12px;
}

.intro-cert-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

.intro-cert-card:hover .intro-cert-img {
	transform: scale(1.03);
}

.intro-cert-zoom-pill {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(18, 73, 154, 0.92);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	opacity: 0;
	transform: translateY(4px);
	transition: all 0.22s ease;
	pointer-events: none;
}

.intro-cert-card:hover .intro-cert-zoom-pill {
	opacity: 1;
	transform: translateY(0);
}

/* Certificate Lightbox Modal */
.cert-lightbox-modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cert-lightbox-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.cert-lightbox-overlay {
	position: absolute;
	inset: 0;
}

.cert-lightbox-content {
	position: relative;
	max-width: 820px;
	width: 100%;
	max-height: 90vh;
	background: #ffffff;
	border-radius: 1rem;
	padding: 24px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}

.cert-lightbox-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	color: #64748b;
	transition: all 0.2s ease;
	z-index: 3;
}

.cert-lightbox-close:hover {
	background: #fee2e2;
	color: #dc2626;
	border-color: #fca5a5;
}

.cert-lightbox-full-img {
	max-width: 100%;
	max-height: calc(85vh - 70px);
	object-fit: contain;
	border-radius: 8px;
}

.cert-lightbox-caption {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-align: center;
}

@media (max-width: 640px) {
	.intro-certs-slider-container {
		padding: 0 38px;
	}
	.intro-cert-slide {
		flex: 0 0 100%;
		min-width: 100%;
	}
	.intro-cert-arrow {
		width: 32px;
		height: 32px;
		font-size: 11px;
	}
}

/* Quote Box */
.author-quote-box {
	background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
	border: none !important;
	border-width: 0 !important;
	border-radius: 14px;
	padding: 24px 28px;
	margin-bottom: 24px;
	position: relative;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.04) !important;
}

.author-quote-box .quote-icon {
	color: #F99D1C;
	font-size: 22px;
	margin-bottom: 10px;
}

.author-quote-box .quote-text {
	font-size: 15px;
	font-style: italic;
	color: #334155;
	line-height: 1.7;
	margin: 0 0 12px;
}

.author-quote-box .quote-author-sign {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.quote-author-sign strong {
	color: #12499A;
}

.quote-author-sign span {
	color: #64748b;
}

.quote-author-sign span::before {
	content: "•";
	margin-right: 8px;
	color: #cbd5e1;
}

/* Metric Counters */
.author-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 6px;
}

.author-metric-card {
	background: #f8fafc;
	border: none !important;
	border-width: 0 !important;
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04) !important;
}

.metric-num-wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.metric-num {
	font-size: 24px;
	font-weight: 800;
	color: #12499A;
	line-height: 1;
}

.metric-unit {
	font-size: 14px;
	font-weight: 700;
	color: #F99D1C;
}

.metric-label {
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}

/* Career Timeline (Personal Journey & Milestones) */
.career-timeline {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-top: 8px;
}

.timeline-item {
	display: flex;
	gap: 20px;
	position: relative;
	padding-bottom: 28px;
}

.timeline-item:last-child {
	padding-bottom: 0;
}

.timeline-dot-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 24px;
}

.timeline-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #12499A;
	z-index: 2;
	flex-shrink: 0;
	margin-top: 4px;
	transition: all 0.3s ease;
}

.timeline-dot.active {
	background: #F99D1C;
	border-color: #12499A;
	box-shadow: 0 0 0 4px rgba(249, 157, 28, 0.2);
}

.timeline-item:hover .timeline-dot {
	transform: scale(1.2);
}

.timeline-line {
	width: 2px;
	flex-grow: 1;
	background: #e2e8f0;
	margin-top: 6px;
	margin-bottom: -4px;
}

.timeline-content {
	flex-grow: 1;
	min-width: 0;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 24px;
	transition: all 0.25s ease;
}

.timeline-item:hover .timeline-content {
	background: #ffffff;
	border-color: #cbd5e1;
	transform: translateX(4px);
}

.timeline-item.current .timeline-content {
	background: #ffffff;
	border-color: #bfdbfe;
	border-left: 3.5px solid #12499A;
}

.timeline-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.timeline-year-pill {
	font-size: 12px;
	font-weight: 800;
	color: #12499A;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	padding: 3px 12px;
	border-radius: 999px;
	letter-spacing: -0.01em;
}

.timeline-year-pill.highlight {
	background: #fef7ec;
	color: #b45309;
	border-color: #fed7aa;
}

.timeline-role-tag {
	font-size: 11.5px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.timeline-role-tag.highlight {
	color: #12499A;
}

.timeline-title {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.4;
	margin: 0 0 8px;
}

.timeline-desc {
	font-size: 14px;
	color: #475569;
	line-height: 1.65;
	margin: 0;
}

/* Certificate Slider Styles */
.cert-slider-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.card-head-title-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cert-slider-header-controls {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 4px 6px;
	border-radius: 999px;
	flex-shrink: 0;
}

.cert-nav-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	color: #12499A;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.cert-nav-btn:hover {
	background: #12499A;
	color: #ffffff;
	border-color: #12499A;
}

.cert-counter-pill {
	font-size: 12.5px;
	font-weight: 800;
	color: #0f172a;
	padding: 0 8px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.credentials-badge-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.credential-item-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04) !important;
}

.credential-item-row .cred-check-icon {
	color: #16a34a;
	font-size: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

.cred-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cred-item-name {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}

.cred-item-meta {
	font-size: 12px;
	color: #64748b;
}

/* Right Column: Sticky Profile Sidebar */
.author-sticky-sidebar {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 96px !important;
	align-self: start !important;
	z-index: 25;
}

.author-sticky-card {
	position: relative;
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	border-radius: 1rem;
	padding: 24px;
	box-shadow: 0 4px 24px rgba(18, 73, 154, 0.06) !important;
}

.sticky-portrait-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	overflow: hidden;
	border: none !important;
	border-width: 0 !important;
	background: #f8fafc;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.05) !important;
}

.sticky-portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.4s ease;
}

.sticky-portrait-wrap:hover .sticky-portrait-img {
	transform: scale(1.03);
}

.sticky-verified-pill {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(18, 73, 154, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.sticky-verified-pill i {
	color: #F99D1C;
}

.sticky-profile-info {
	text-align: center;
	margin: 16px 0 14px;
}

.sticky-author-name {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.sticky-author-role {
	font-size: 13.5px;
	font-weight: 700;
	color: #12499A;
	margin: 0;
	text-align: center;
}

.sticky-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.btn-sticky-zalo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #0068ff;
	color: #ffffff;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.22s ease;
	border: none !important;
	border-width: 0 !important;
	box-shadow: 0 4px 14px rgba(0, 104, 255, 0.2);
}

.btn-sticky-zalo:hover {
	background: #0056d6;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 104, 255, 0.25);
}

.btn-sticky-zalo-img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.btn-sticky-hotline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: #f8fafc;
	color: #0f172a;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border: none !important;
	border-width: 0 !important;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
	transition: all 0.2s ease;
}

.btn-sticky-hotline .btn-hotline-icon {
	color: #12499A;
	font-size: 13.5px;
	transition: color 0.2s ease;
}

.btn-sticky-hotline:hover {
	background: #12499A;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.15);
}

.btn-sticky-hotline:hover .btn-hotline-icon {
	color: #ffffff;
}
	border-color: #12499A;
}

.sticky-social-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px dashed #e2e8f0;
	margin-bottom: 12px;
}

.social-row-label {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
}

.social-row-icons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sticky-social-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.sticky-social-btn:hover {
	transform: translateY(-2px);
}

.sticky-social-btn.fb:hover {
	background: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}

.sticky-social-btn.in:hover {
	background: #0a66c2;
	border-color: #0a66c2;
	color: #ffffff;
}

.sticky-social-btn.map:hover {
	background: #ea580c;
	border-color: #ea580c;
	color: #ffffff;
}

.sticky-hours-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 11.5px;
	color: #64748b;
	line-height: 1.4;
}

.sticky-hours-note i {
	color: #12499A;
	font-size: 13px;
	margin-top: 2px;
	flex-shrink: 0;
}

.sticky-hours-note strong {
	display: block;
	color: #0f172a;
	margin-bottom: 2px;
}

/* Moments Gallery Section */
.author-moments-section {
	margin-bottom: 64px;
}

.author-moments-section .section-title-wrap,
.author-articles-section .section-title-wrap {
	margin-bottom: 24px;
	text-align: left;
}

.author-moments-section .section-title,
.author-articles-section .section-title {
	text-align: left;
	font-size: 26px;
	margin-bottom: 8px;
}

.author-moments-section .section-desc,
.author-articles-section .section-desc {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
	max-width: 760px;
	color: #64748b;
}

/* Moments Gallery Smooth Infinite Photo Slider */
.moments-slider-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 0 16px;
	mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.moments-slider-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: momentsSlideRun 35s linear infinite;
	will-change: transform;
}

.moments-slider-track:hover {
	animation-play-state: paused;
}

.moment-slide-card {
	flex-shrink: 0;
	width: 320px;
	height: 220px;
	border-radius: 1rem;
	overflow: hidden;
	border: none !important;
	border-width: 0 !important;
	background: #f8fafc;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.moment-slide-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.1);
}

.moment-slider-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.moment-slide-card:hover .moment-slider-img {
	transform: scale(1.05);
}

@keyframes momentsSlideRun {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Author Articles Section */
.author-articles-section {
	margin-bottom: 40px;
}

/* Responsive Rules for Author Profile Page */
@media (max-width: 1024px) {
	.author-main-split-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
	}
	.moment-slide-card {
		width: 280px;
		height: 195px;
	}
}

@media (max-width: 768px) {
	.author-main-split-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.author-sticky-sidebar {
		position: static !important;
		order: -1;
	}
	.author-sticky-card {
		position: static;
		max-width: 380px;
		margin: 0 auto;
	}
	.expertise-items-grid {
		grid-template-columns: 1fr;
	}
	.moment-slide-card {
		width: 240px;
		height: 170px;
	}
	.author-content-card {
		padding: 24px;
	}
	.author-card-heading {
		font-size: 26px;
	}
	.author-metrics-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================================
   LANDING PAGE: TIỀN TIỂU HỌC TIẾNG VIỆT
   ======================================================== */
.tth-landing-page {
	background: #ffffff;
	color: #0f172a;
	overflow: visible !important;
}

/* ==========================================================================
   AMBIENT GLOW SYSTEM FOR TTH LANDING PAGE (VỆT SÁNG CỤC BỘ TINH TẾ)
   ========================================================================== */
.tth-landing-page .tth-hero-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 82% 20%, rgba(18, 73, 154, 0.055) 0%, transparent 55%),
	                  radial-gradient(circle at 10% 85%, rgba(249, 157, 28, 0.035) 0%, transparent 45%);
}

.tth-landing-page .tth-empathy-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 92% 35%, rgba(18, 73, 154, 0.05) 0%, transparent 50%);
}

.tth-landing-page .tth-method-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 50% 25%, rgba(18, 73, 154, 0.05) 0%, transparent 55%),
	                  radial-gradient(circle at 88% 85%, rgba(249, 157, 28, 0.03) 0%, transparent 45%);
}

.tth-landing-page .tth-formats-overview-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 85% 30%, rgba(18, 73, 154, 0.05) 0%, transparent 50%),
	                  radial-gradient(circle at 10% 75%, rgba(249, 157, 28, 0.03) 0%, transparent 45%);
}

.tth-landing-page .tth-outcomes-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 12% 40%, rgba(18, 73, 154, 0.05) 0%, transparent 50%);
}

.tth-landing-page .tth-pricing-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 50% 20%, rgba(18, 73, 154, 0.055) 0%, transparent 55%),
	                  radial-gradient(circle at 90% 75%, rgba(249, 157, 28, 0.035) 0%, transparent 45%);
}

.tth-landing-page .tth-support-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 85% 40%, rgba(18, 73, 154, 0.05) 0%, transparent 50%),
	                  radial-gradient(circle at 12% 20%, rgba(249, 157, 28, 0.03) 0%, transparent 45%);
	padding: 60px 0 32px !important;
}

.tth-landing-page .teacher-spotlight-section {
	background-color: #ffffff !important;
	background-image: radial-gradient(circle at 35% 40%, rgba(18, 73, 154, 0.045) 0%, transparent 50%) !important;
	padding: 32px 0 64px !important;
}

.tth-landing-page .about-cta-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 75% 45%, rgba(18, 73, 154, 0.05) 0%, transparent 55%),
	                  radial-gradient(circle at 15% 75%, rgba(249, 157, 28, 0.035) 0%, transparent 45%);
}

.tth-landing-page .tth-faqs-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 18% 30%, rgba(18, 73, 154, 0.045) 0%, transparent 50%);
}

.tth-breadcrumb-section {
	padding: 12px 0;
	background: #ffffff;
	border-bottom: 1px solid #f1f5f9;
}

.tth-breadcrumb-section nav {
	display: block;
	width: 100%;
}

.tth-breadcrumb-section .breadcrumb-list,
.tth-breadcrumb .breadcrumb-list,
.blog-breadcrumb .breadcrumb-list,
.author-breadcrumb-section .breadcrumb-list {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	gap: 8px !important;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 0 2px !important;
	max-width: 100% !important;
}

.tth-breadcrumb-section .breadcrumb-list::-webkit-scrollbar,
.tth-breadcrumb .breadcrumb-list::-webkit-scrollbar,
.blog-breadcrumb .breadcrumb-list::-webkit-scrollbar,
.author-breadcrumb-section .breadcrumb-list::-webkit-scrollbar {
	display: none !important;
}

.tth-breadcrumb-section .breadcrumb-item,
.tth-breadcrumb .breadcrumb-item,
.blog-breadcrumb .breadcrumb-item,
.author-breadcrumb-section .breadcrumb-item {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #64748b;
}

.tth-breadcrumb-section .breadcrumb-item::marker,
.tth-breadcrumb .breadcrumb-item::marker,
.blog-breadcrumb .breadcrumb-item::marker,
.tth-breadcrumb-section .breadcrumb-separator::marker,
.tth-breadcrumb .breadcrumb-separator::marker,
.blog-breadcrumb .breadcrumb-separator::marker {
	display: none !important;
	content: "" !important;
}

.tth-breadcrumb-section .breadcrumb-link,
.tth-breadcrumb .breadcrumb-link,
.blog-breadcrumb .breadcrumb-link {
	color: #64748b;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.tth-breadcrumb-section .breadcrumb-link:hover,
.tth-breadcrumb .breadcrumb-link:hover,
.blog-breadcrumb .breadcrumb-link:hover {
	color: var(--color-primary, #12499A);
}

.tth-breadcrumb-section .breadcrumb-separator,
.tth-breadcrumb .breadcrumb-separator,
.blog-breadcrumb .breadcrumb-separator {
	font-size: 10px;
	color: #94a3b8;
	display: inline-flex !important;
	align-items: center;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tth-breadcrumb-section .breadcrumb-current,
.tth-breadcrumb .breadcrumb-current,
.blog-breadcrumb .breadcrumb-current {
	color: #0f172a;
	font-weight: 700;
}

/* Hero Section */
.tth-hero-section {
	padding: 56px 0 68px;
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

.tth-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.tth-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #eff6ff;
	color: #12499A;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	border: none !important;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.05);
	margin-bottom: 18px;
	white-space: nowrap !important;
}

.badge-pulsing-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #F99D1C;
	box-shadow: 0 0 0 3px rgba(249, 157, 28, 0.2);
}

.tth-hero-title {
	font-size: 38px;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
	margin-bottom: 18px;
	letter-spacing: -0.01em;
}

.highlight-brand {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	display: inline-block;
}

.highlight-accent {
	color: #F99D1C;
}

.tth-hero-lead {
	font-size: 16px;
	line-height: 1.7;
	color: #475569;
	margin-bottom: 24px;
}

.tth-hero-perks-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 20px 0 26px;
}

.tth-hero-perk-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 10px 12px;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.03);
}

.perk-icon-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.perk-icon-circle.blue {
	background: #eff6ff;
	color: #12499A;
}

.perk-icon-circle.green {
	background: #f0fdf4;
	color: #16a34a;
}

.perk-icon-circle.amber {
	background: #fef3c7;
	color: #d97706;
}

.perk-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.perk-headline {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.perk-caption {
	font-size: 11px;
	color: #64748b;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tth-hero-cta-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 28px;
}

.tth-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	background: #f8fafc;
	color: #12499A;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	text-decoration: none;
	transition: all 0.2s ease;
}

.tth-btn-secondary:hover {
	background: #eff6ff;
	border-color: #12499A;
	transform: translateY(-2px);
}

.tth-hero-proof {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tth-avatars-cluster {
	display: flex;
}

.tth-mini-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	margin-left: -10px;
	object-fit: cover;
}

.tth-mini-avatar:first-child {
	margin-left: 0;
}

.tth-proof-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.proof-rating-stars {
	display: flex;
	align-items: center;
	gap: 3px;
	color: #F99D1C;
	font-size: 12px;
}

.proof-score {
	font-weight: 800;
	color: #0f172a;
	margin-left: 4px;
	font-size: 13px;
}

.proof-desc {
	font-size: 12px;
	color: #64748b;
}

.tth-hero-visual-card {
	position: relative;
	padding: 0;
	background: transparent !important;
	box-shadow: none !important;
}

.hero-image-frame {
	position: relative;
	border-radius: 0;
	overflow: visible;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
}

.hero-main-photo {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 12px 32px rgba(18, 73, 154, 0.08));
}

.hero-floating-card {
	position: absolute;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: none;
	border-radius: 12px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.08);
	z-index: 3;
	white-space: nowrap;
}

.hero-floating-card.top-right {
	top: 0;
	right: 0;
	animation: floatBobTop 4s ease-in-out infinite alternate;
}

.hero-floating-card.bottom-left {
	bottom: 0;
	left: 0;
	animation: floatBobBottom 4.5s ease-in-out infinite alternate;
}

@keyframes floatBobTop {
	0% { transform: translateY(0); }
	100% { transform: translateY(-7px); }
}

@keyframes floatBobBottom {
	0% { transform: translateY(0); }
	100% { transform: translateY(7px); }
}

.floating-icon-box {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.floating-icon-box.orange {
	background: #fef3c7;
	color: #d97706;
}

.floating-icon-box.blue {
	background: #eff6ff;
	color: #12499A;
}

.floating-text-box {
	display: flex;
	flex-direction: column;
}

.floating-label {
	font-size: 11px;
	color: #64748b;
	font-weight: 500;
}

.floating-value {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
}

/* ========================================================
   3. STORYTELLING & 4 PAIN POINTS (STICKY SPLIT LAYOUT)
   (1 bên là hình full sticky overlay, 1 bên là cards show nội dung)
======================================================== */
.tth-empathy-section {
	padding: 68px 0 70px;
	background: #ffffff;
}

.tth-sticky-split-grid {
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 40px;
	align-items: flex-start;
}

.sticky-visual-col {
	position: -webkit-sticky;
	position: sticky;
	top: 96px;
	align-self: flex-start;
}

.sticky-visual-frame {
	position: relative;
	width: 100%;
	height: 560px;
	border-radius: 20px;
	overflow: hidden;
	background: radial-gradient(circle at 100% 0%, rgba(249, 157, 28, 0.16) 0%, rgba(249, 157, 28, 0.03) 42%, transparent 68%), linear-gradient(155deg, #12499A 0%, #0d3b7d 50%, #07254f 100%);
	border: none !important;
	box-shadow: 0 8px 30px rgba(18, 73, 154, 0.08);
	display: flex;
	flex-direction: column;
}

.sticky-visual-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40px 34px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #ffffff;
	flex-grow: 1;
}

.sticky-overlay-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.overlay-badge {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: #ffffff;
	white-space: nowrap;
}

.sticky-overlay-title {
	font-size: 1.7rem;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
	margin-bottom: 12px;
	text-wrap: balance;
}

.sticky-overlay-title .bs-headline-highlight {
	background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	font-weight: 800;
}

.sticky-overlay-desc {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
	margin-bottom: 0;
	text-wrap: pretty;
}

.sticky-overlay-quote {
	background: rgba(255, 255, 255, 0.10);
	border: none !important;
	border-radius: 14px;
	padding: 14px 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #fef7ec;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.sticky-overlay-quote i {
	color: #F99D1C;
	font-size: 1rem;
	margin-top: 2px;
	flex-shrink: 0;
}

.scrolling-cards-col {
	display: flex;
	flex-direction: column;
}

.scrolling-cards-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tth-pain-card-split {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 22px;
	background: linear-gradient(180deg, #dbeafe 0%, #edf5fd 45%, #ffffff 100%);
	border: none !important;
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	align-items: stretch;
}

.tth-pain-card-split:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.07);
}

.pain-thumb-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 140px;
	border-radius: 14px;
	overflow: hidden;
	align-self: stretch;
}

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

.pain-thumb-badge {
	display: none !important;
}

.pain-thumb-badge.red,
.pain-thumb-badge.amber,
.pain-thumb-badge.purple,
.pain-thumb-badge.blue {
	background: #eff6ff;
	color: #12499A;
}

.pain-content-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tth-pain-card-split .pain-card-title {
	font-size: 1.15rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 6px;
	line-height: 1.35;
	text-wrap: balance;
}

.tth-pain-card-split .pain-card-desc {
	font-size: 0.9rem;
	color: #64748b;
	line-height: 1.55;
	margin-bottom: 10px;
	text-wrap: pretty;
}

.tth-pain-card-split .pain-tag {
	display: inline-block;
	padding: 4px 12px;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	white-space: nowrap;
	background: #eff6ff !important;
	color: #12499A !important;
}

.tth-pain-card-split .pain-tag.red,
.tth-pain-card-split .pain-tag.amber,
.tth-pain-card-split .pain-tag.purple,
.tth-pain-card-split .pain-tag.blue {
	background: #eff6ff !important;
	color: #12499A !important;
}

/* Bridge Box at end of pain points */
.tth-empathy-bridge-box {
	margin-top: 36px;
	margin-bottom: 0;
	background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
	border: none;
	border-radius: 16px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.05);
}

@keyframes bsStarSpinSlow {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.bridge-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #12499A;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.bridge-icon-circle svg,
.bridge-icon-circle i {
	animation: bsStarSpinSlow 9s linear infinite;
	transform-origin: center center;
}

.bridge-text-block {
	flex: 1 1 auto;
	min-width: 220px;
}

.bridge-heading {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
	text-wrap: balance;
	white-space: normal;
}

.bridge-desc {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
	margin: 0;
	text-wrap: pretty;
	white-space: normal;
}

.bridge-cta-btn,
.bridge-cta-btn.btn-sync-unified {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 11px 22px !important;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	border-radius: 999px !important;
	border: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	width: auto !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.15) !important;
}

.bridge-cta-btn:hover {
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.22);
}

.bridge-cta-btn .btn-star-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transform-origin: center center;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bridge-cta-btn:hover .btn-star-icon-wrap {
	transform: scale(1.22) rotate(360deg);
}

.bridge-cta-btn .btn-arrow-icon {
	color: #F99D1C;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.bridge-cta-btn:hover .btn-arrow-icon {
	transform: translateX(4px);
}

/* Method Section */
.tth-method-section {
	position: relative;
	overflow: hidden;
	padding: 64px 0 68px;
	background: #ffffff;
}

.tth-method-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.tth-method-card {
	background: #ffffff;
	border: none;
	border-radius: 1rem;
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tth-method-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(18, 73, 154, 0.08);
}

.method-card-photo-wrap {
	position: relative;
	width: 100%;
	height: 180px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 18px;
	background: #eef5fc;
}

.method-card-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.tth-method-card:hover .method-card-photo {
	transform: scale(1.04);
}

.method-photo-pill {
	position: absolute;
	bottom: 10px;
	left: 12px;
	background: rgba(18, 73, 154, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.method-header-block {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.method-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.method-icon-wrap.visual {
	background: #eff6ff;
	color: #12499A;
}

.method-icon-wrap.auditory {
	background: #fef3c7;
	color: #d97706;
}

.method-icon-wrap.kinesthetic {
	background: #f0fdf4;
	color: #166534;
}

.method-meta {
	display: flex;
	flex-direction: column;
}

.method-pill-badge {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: #12499A;
	letter-spacing: 0.04em;
}

.method-card-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	line-height: 1.35;
	text-wrap: balance;
}

.method-card-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 16px;
}

.method-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.method-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #334155;
	line-height: 1.5;
}

.method-feature-list li i {
	color: #16a34a;
	font-size: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

.method-container {
	position: relative;
	z-index: 2;
}

/* ========================================================
   6. DETAILED LEARNING OUTCOMES - STACKED CARDS ON SCROLL
   (Layout thẻ xếp chồng khi cuộn như Hình 1)
======================================================== */
.tth-outcomes-section {
	padding: 56px 0 68px;
	background: #ffffff;
	position: relative;
}

.tth-stacked-cards-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-top: 10px;
	padding-bottom: 80px;
}

.tth-stacked-card {
	position: -webkit-sticky !important;
	position: sticky !important;
	/* Header height 80px + margin, staggered sticky by 28px so previous cards peek at top */
	top: calc(96px + (var(--stack-index) - 1) * 28px) !important;
	z-index: var(--stack-index) !important;
	background: linear-gradient(180deg, #dbeafe 0%, #edf5fd 42%, #ffffff 100%) !important;
	border-radius: 20px;
	border: none !important;
	box-shadow: 0 4px 24px rgba(18, 73, 154, 0.07);
	overflow: hidden;
	opacity: 1;
	transform-origin: center top;
	will-change: transform, opacity;
	margin-bottom: 24px;
}

.tth-stacked-card:hover {
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.06);
}

.stacked-card-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 36px;
	padding: 34px 38px;
	align-items: center;
}

/* Left Visual with Rectangular Rounded Photo Frame (Standard border-radius 16px) */
.stacked-card-visual {
	position: relative;
	width: 100%;
}

.stacked-visual-arch {
	position: relative;
	width: 100%;
	height: 340px;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
}

.stacked-visual-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.tth-stacked-card:hover .stacked-visual-img {
	transform: scale(1.03);
}

.stacked-badge-pill {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: rgba(18, 73, 154, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	font-size: 0.825rem;
	font-weight: 700;
	padding: 7px 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Right Content */
.stacked-card-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stacked-header-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stacked-level-tag {
	font-family: var(--font-sub, 'Google Sans Flex', 'Google Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #12499A;
	background: #ffffff;
	padding: 5px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.06);
}

.stacked-card-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}

.stacked-card-divider {
	width: 100%;
	height: 1px;
	background: #e2e8f0;
	margin: 4px 0 6px;
}

.stacked-card-desc {
	font-size: 0.925rem;
	color: #475569;
	line-height: 1.6;
	margin: 0;
	text-wrap: pretty;
}

/* Proof box */
.stacked-proof-box {
	background: rgba(255, 255, 255, 0.85);
	border: none;
	border-radius: 12px;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.proof-head-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #12499A;
	font-size: 0.875rem;
}

.proof-icon {
	font-size: 1rem;
	color: #12499A;
	flex-shrink: 0;
}

.proof-quotes-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 0.875rem;
	color: #334155;
}

.quote-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.check-green {
	color: #16a34a;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.proof-poem-body {
	font-style: italic;
	color: #1e293b;
	line-height: 1.55;
	padding-left: 12px;
	border-left: 2px solid #12499A;
	font-size: 0.9rem;
}

.proof-poem-note {
	font-size: 0.825rem;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 6px;
}

.proof-pillars-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.proof-sub-pillar {
	background: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 10px 12px;
}

.sub-pillar-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: #12499A;
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sub-pillar-desc {
	font-size: 0.8rem;
	color: #64748b;
	line-height: 1.45;
	margin: 0;
}

/* Checklist of Gains */
.stacked-gains-checklist {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 2px;
}

.gain-check-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.875rem;
	color: #1e293b;
}

.gain-check-item i {
	color: #16a34a;
	font-size: 0.95rem;
	flex-shrink: 0;
}

/* Action button */
.stacked-action-row {
	margin-top: 4px;
}

.stacked-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #12499A;
	color: #ffffff;
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
	text-decoration: none;
	transition: all 0.25s ease;
	box-shadow: 0 4px 12px rgba(18, 73, 154, 0.15);
}

.stacked-card-btn:hover {
	background: #0e3a7a;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(18, 73, 154, 0.22);
}

.stacked-card-btn i {
	transition: transform 0.2s ease;
}

.stacked-card-btn:hover i {
	transform: translateX(4px);
}

/* Pricing Section */
.tth-pricing-section {
	padding: 70px 0 80px;
	background: #ffffff;
}

.tth-courses-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
	align-items: stretch;
}

.single-course-wrapper {
	max-width: 520px;
	margin: 36px auto 0;
}

.course-card.course-card-featured {
	border-top: none;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.08);
}

.course-card.course-card-single {
	border-top: none;
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.08);
}

/* Support & Video Reports Section (Interactive Accordion & Dynamic Media Showcase) */
.tth-support-section {
	padding: 64px 0 36px;
	background: #ffffff;
	position: relative;
}

.tth-support-showcase-card {
	background: #ffffff;
	border-radius: 20px;
	border: none !important;
	box-shadow: 0 4px 28px rgba(18, 73, 154, 0.05);
	padding: 40px 44px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 48px;
	align-items: center;
}

.support-accordion-col {
	display: flex;
	flex-direction: column;
}

.support-tab-item {
	position: relative;
	padding: 22px 0;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	transition: background 0.65s ease, border-color 0.65s ease;
}

.support-tab-item:last-child {
	border-bottom: none;
}

.tab-item-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tab-bullet-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.65s cubic-bezier(0.22, 1, 0.36, 1), color 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.support-tab-item.is-active .tab-bullet-num {
	background: #eff6ff;
	color: #12499A;
	transform: scale(1.06);
}

.tab-item-title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	flex-grow: 1;
	line-height: 1.35;
	transition: color 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	text-wrap: balance;
}

.support-tab-item.is-active .tab-item-title {
	color: #12499A;
}

.tab-toggle-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
	transition: background 0.65s cubic-bezier(0.22, 1, 0.36, 1), color 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.support-tab-item.is-active .tab-toggle-icon {
	background: #12499A;
	color: #ffffff;
	transform: translateX(3px);
}

/* Accordion Smooth Expansion via CSS Grid (Slow, Gentle & Cinematic 0.75s Pace) */
.tab-item-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin: 0;
	padding-left: 50px;
	transition: grid-template-rows 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease;
}

.tab-item-body > * {
	overflow: hidden;
}

.support-tab-item.is-active .tab-item-body {
	grid-template-rows: 1fr;
	opacity: 1;
}

.tab-item-desc {
	font-size: 0.925rem;
	color: #475569;
	line-height: 1.6;
	margin: 0;
	padding-top: 8px;
	text-wrap: pretty;
}

.tab-progress-track {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #e2e8f0;
	opacity: 0;
	overflow: hidden;
	border-radius: 999px;
	transition: opacity 0.6s ease;
}

.support-tab-item.is-active .tab-progress-track {
	opacity: 1;
}

.tab-progress-bar {
	height: 100%;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, #12499A 0%, #0284c7 100%);
	will-change: transform;
	border-radius: 999px;
}

/* Right Stage Visual - Pure Cinematic 0.9s Dissolve Crossfade */
.support-stage-col {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
}

.support-stage-pane {
	grid-area: 1 / 1;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(0);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.9s ease;
	pointer-events: none;
	will-change: opacity;
	backface-visibility: hidden;
}

.support-stage-pane.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.support-mockup-card {
	background: #f8fafc;
	border: none;
	border-radius: 16px;
	padding: 24px 26px;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.04);
}

.mockup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 14px;
}

.mockup-avatar-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mockup-teacher-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.08);
}

.mockup-teacher-name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.mockup-teacher-status {
	font-size: 12px;
	color: #16a34a;
	display: flex;
	align-items: center;
	gap: 6px;
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
	display: inline-block;
	position: relative;
	flex-shrink: 0;
}

.status-dot::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid #16a34a;
	animation: statusRadar 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes statusRadar {
	0% {
		transform: scale(0.8);
		opacity: 0.9;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

.mockup-date {
	font-size: 12px;
	color: #94a3b8;
}

.mockup-chat-text {
	font-size: 14px;
	line-height: 1.55;
	color: #1e293b;
	background: #ffffff;
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 14px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
	min-height: 72px;
	display: flex;
	align-items: center;
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.mockup-stage-media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	height: 240px;
	width: 100%;
	margin-bottom: 14px;
	transform: scale(0.995) translateZ(0);
	opacity: 0.95;
	transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.support-stage-pane.is-active .mockup-stage-media {
	transform: scale(1) translateZ(0);
	opacity: 1;
}

.stage-media-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-play-btn-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #12499A;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.45);
	padding-left: 3px;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.video-play-btn-glow::before,
.video-play-btn-glow::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	animation: playRadarRipple 2s ease-out infinite;
	pointer-events: none;
}

.video-play-btn-glow::after {
	animation-delay: 0.85s;
}

@keyframes playRadarRipple {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	100% {
		transform: scale(1.8);
		opacity: 0;
	}
}

.video-play-btn-glow:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.video-info-pill,
.photo-badge-pill {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: rgba(15, 23, 42, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* Equalizer sound wave animation */
.video-eq-wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 2.5px;
	height: 12px;
}

.video-eq-wave .eq-bar {
	width: 2.5px;
	background: #38bdf8;
	border-radius: 999px;
	animation: eqWave 1.1s ease-in-out infinite alternate;
}

.video-eq-wave .eq-bar.bar-1 { height: 40%; animation-delay: 0.1s; }
.video-eq-wave .eq-bar.bar-2 { height: 95%; animation-delay: 0.35s; }
.video-eq-wave .eq-bar.bar-3 { height: 60%; animation-delay: 0.2s; }
.video-eq-wave .eq-bar.bar-4 { height: 100%; animation-delay: 0.45s; }

@keyframes eqWave {
	0% {
		height: 25%;
	}
	100% {
		height: 100%;
	}
}

.photo-badge-pill {
	background: rgba(18, 73, 154, 0.92);
	animation: photoBadgeFloat 3s ease-in-out infinite alternate;
}

@keyframes photoBadgeFloat {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-4px);
	}
}

.photo-badge-pill i {
	color: #4ade80;
}

.report-student-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 12px;
}

.student-avatar-mini {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eff6ff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.student-meta-info {
	display: flex;
	flex-direction: column;
}

.student-meta-info strong {
	font-size: 13.5px;
	color: #0f172a;
}

.student-meta-info span {
	font-size: 11.5px;
	color: #64748b;
}

.report-metrics-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #ffffff;
	padding: 12px 14px;
	border-radius: 10px;
}

.report-metric-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
}

.metric-name {
	color: #334155;
	min-width: 155px;
	font-weight: 500;
}

.metric-bar-wrap {
	flex-grow: 1;
	height: 6px;
	border-radius: 999px;
	background: #f1f5f9;
	overflow: hidden;
}

.metric-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #12499A 0%, #16a34a 100%);
	border-radius: 999px;
	transform-origin: left center;
}

.support-stage-pane.is-active .metric-bar-fill {
	animation: metricFillGrow 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes metricFillGrow {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

.metric-score {
	color: #12499A;
	font-weight: 800;
	min-width: 44px;
	text-align: right;
}

.mockup-footer-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #64748b;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}

.mockup-footer-note i {
	color: #12499A;
	font-size: 14px;
}

.tth-landing-page .teacher-spotlight-section {
	background: #ffffff !important;
}

/* ========================================================
   9. REAL PARENT FEEDBACK & BOTTOM PANORAMIC OVERLAY
======================================================== */
.ican-zalo-section {
	position: relative;
	overflow: hidden;
	padding: 60px 0 20px;
	background: #ffffff;
}

.feedback-bottom-overlay-art {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 250px;
	pointer-events: none;
	z-index: 12;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	overflow: hidden;
}

.overlay-landmarks-img {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 240px;
	width: auto;
	max-width: 60%;
	object-fit: contain;
	object-position: bottom left;
	opacity: 1;
}

.overlay-family-img {
	position: absolute;
	bottom: 0;
	right: 6%;
	height: 230px;
	width: auto;
	object-fit: contain;
	object-position: bottom right;
	z-index: 2;
}

/* ========================================================
   10. FREQUENTLY ASKED QUESTIONS (2-COLUMN ACCORDION)
   (Layout 2 cột: Bên trái là Thẻ Thương Hiệu & Uy Tín, Bên phải là Accordion câu hỏi)
======================================================== */
.tth-faqs-section {
	padding: 60px 0 68px;
	background: #ffffff;
	position: relative;
	z-index: 2;
}

.tth-faqs-two-col-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: flex-start;
}

.faq-trust-col {
	position: -webkit-sticky;
	position: sticky;
	top: 96px;
	align-self: flex-start;
}

.faq-trust-card {
	position: relative;
	background: #ffffff;
	border: none;
	border-radius: 20px;
	padding: 36px 32px;
	box-shadow: 0 4px 24px rgba(18, 73, 154, 0.05);
	overflow: hidden;
}

.faq-mask-pattern {
	position: absolute;
	top: 0;
	right: 0;
	width: 380px;
	height: 380px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;
	pointer-events: none;
	opacity: 0.85;
	z-index: 1;
}

.faq-trust-card-inner {
	position: relative;
	z-index: 2;
}

.faq-trust-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.faq-brand-logo {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-logo-img {
	max-height: 44px;
	width: auto;
}

.faq-brand-tag {
	font-size: 11px;
	font-weight: 800;
	color: #12499A;
	letter-spacing: 0.05em;
	display: block;
}

.faq-brand-name {
	font-size: 1.25rem;
	font-weight: 800;
	color: #0f172a;
	margin: 2px 0 0;
}

.faq-metrics-box {
	background: #f8fafc;
	border: none;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 20px;
}

.faq-metric-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.metric-icon-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.metric-icon-circle.blue { background: #eff6ff; color: #12499A; }
.metric-icon-circle.green { background: #f0fdf4; color: #16a34a; }

.metric-heading {
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
	display: block;
	margin-bottom: 6px;
}

.metric-subtext {
	font-size: 0.925rem;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

.metric-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 16px 0;
}

.faq-trust-action-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid #f1f5f9;
}

.trust-footer-prompt {
	font-size: 14px;
	color: #475569;
	line-height: 1.45;
	margin: 0;
	width: 100%;
}

.faq-trust-btn {
	width: 100% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #0e3d84 0%, #12499A 50%, #1c5ec9 100%);
	color: #ffffff !important;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	border: none !important;
	box-shadow: none !important;
}

.faq-trust-btn:hover {
	background: linear-gradient(135deg, #0b326c 0%, #0e3d84 50%, #12499A 100%);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: none !important;
}

.faq-trust-btn .btn-arrow-icon {
	color: #F99D1C;
	transition: transform 0.2s ease;
}

.faq-trust-btn:hover .btn-arrow-icon {
	transform: translateX(3px);
}

.faq-col-title {
	font-size: 2rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin-bottom: 8px;
	text-wrap: balance;
}

.faq-col-title .highlight-brand-light {
	color: #12499A;
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	display: inline-block;
}

.faq-col-desc {
	font-size: 1rem;
	color: #64748b;
	margin-bottom: 28px;
	text-wrap: pretty;
}

.tth-faqs-accordion-minimal {
	display: flex;
	flex-direction: column;
}

.faq-minimal-item {
	border-bottom: 1px solid #e2e8f0;
	padding: 20px 0;
}

.faq-minimal-item:first-child {
	padding-top: 0;
}

.faq-minimal-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
}

.faq-q-text {
	flex: 1;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.45;
	transition: all 0.2s ease;
	text-wrap: pretty;
	padding-right: 16px;
}

.faq-minimal-item.is-open .faq-q-text {
	background: linear-gradient(135deg, #12499A 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
}

.faq-toggle-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.faq-minimal-item.is-open .faq-toggle-icon {
	background: #eff6ff;
	color: #12499A;
}

.faq-minimal-content {
	display: none;
	padding-top: 12px;
	font-size: 0.95rem;
	color: #475569;
	line-height: 1.65;
}

.faq-minimal-item.is-open > .faq-minimal-content {
	display: block;
}

.faq-minimal-content p {
	margin: 0;
	text-wrap: pretty;
}

/* Conversion Lead Section */
.tth-conversion-section {
	padding: 68px 0;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.tth-conversion-card {
	background: #ffffff;
	border: 1px solid #f1f5f9;
	border-radius: 1rem;
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.04);
}

.conversion-kicker {
	font-size: 12px;
	font-weight: 700;
	color: #12499A;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.conversion-title {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 12px;
	line-height: 1.3;
}

.conversion-desc {
	font-size: 14.5px;
	color: #64748b;
	line-height: 1.65;
	margin-bottom: 24px;
}

.conversion-contact-chips {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-chip-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #334155;
}

.c-chip-item i {
	color: #12499A;
	font-size: 14px;
	flex-shrink: 0;
}

.lead-form-box {
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 12px;
	padding: 28px;
}

.form-box-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 4px;
}

.form-box-sub {
	font-size: 12.5px;
	color: #64748b;
	margin-bottom: 20px;
}

.tth-custom-lead-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.form-field-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.form-field-label {
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
}

.form-field-label .required {
	color: #dc2626;
}

.form-field-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	color: #0f172a;
	background: #ffffff;
	transition: border-color 0.2s ease;
	outline: none;
}

.form-field-input:focus {
	border-color: #12499A;
	box-shadow: 0 0 0 2px rgba(18, 73, 154, 0.1);
}

.form-grid-2cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.btn-submit-lead {
	width: 100%;
	padding: 13px 20px;
	border-radius: 999px;
	background: #12499A;
	color: #ffffff;
	border: none;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.btn-submit-lead:hover {
	background: #0e3a7a;
	transform: translateY(-1px);
}

.form-security-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11.5px;
	color: #94a3b8;
	margin: 8px 0 0;
}

.form-security-note i {
	color: #16a34a;
}

/* ==========================================================================
   SPECIAL SECTION: CPA 3-STEP BREAKDOWN (TIỀN TIỂU HỌC TOÁN)
   - 100% Borderless Design (Rule 4)
   - Standard 1rem border-radius
   - Feather-light shadow
   ========================================================================== */
.tth-cpa-breakdown-section {
	padding: 56px 0 52px;
	background: #ffffff;
	position: relative;
}

.tth-landing-page .tth-cpa-breakdown-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 15% 30%, rgba(18, 73, 154, 0.05) 0%, transparent 50%),
	                  radial-gradient(circle at 85% 70%, rgba(249, 157, 28, 0.035) 0%, transparent 45%);
}

.cpa-steps-row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.cpa-step-card {
	flex: 1;
	background: #ffffff;
	border-radius: 1rem;
	border: none !important;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	text-align: left;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cpa-step-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.06);
}

.cpa-step-watermark-num {
	position: absolute;
	top: 22px;
	right: 24px;
	font-size: 46px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #e2e8f0;
	pointer-events: none;
	user-select: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

.cpa-step-card:hover .cpa-step-watermark-num {
	color: #cbd5e1;
	transform: scale(1.05);
}

.cpa-step-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px;
}

.cpa-step-icon.icon-blue {
	background: #eff6ff;
	color: #12499A;
}

.cpa-step-icon.icon-amber {
	background: #fef7ec;
	color: #e89519;
}

.cpa-step-icon.icon-emerald {
	background: #f0fdf4;
	color: #16a34a;
}

.cpa-step-heading {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 12px;
	line-height: 1.35;
	text-wrap: balance;
}

.cpa-step-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.cpa-step-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: #12499A;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
}

.cpa-step-feature i {
	color: #16a34a;
	font-size: 14px;
}

.cpa-step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	font-size: 22px;
	flex-shrink: 0;
	padding: 0 4px;
}

@media (max-width: 991px) {
	.cpa-steps-row {
		flex-direction: column;
		gap: 24px;
	}
	.cpa-step-arrow {
		transform: rotate(90deg);
		margin: -8px 0;
	}
}

/* ==========================================================================
   SPECIAL SECTION: 4 GOLDEN POSTURE STANDARDS (HỌC VIẾT CHỮ)
   - 100% Borderless Design (Rule 4)
   - Standard 1rem border-radius
   - Feather-light shadow
   ========================================================================== */
.tth-posture-golden-section {
	padding: 56px 0 52px;
	background: #ffffff;
	position: relative;
}

.tth-landing-page .tth-posture-golden-section {
	background-color: #ffffff;
	background-image: radial-gradient(circle at 80% 25%, rgba(18, 73, 154, 0.05) 0%, transparent 50%),
	                  radial-gradient(circle at 15% 75%, rgba(249, 157, 28, 0.035) 0%, transparent 45%);
}

.posture-showcase-split {
	display: grid;
	grid-template-columns: 410px 1fr;
	gap: 32px;
	align-items: start;
	margin-top: 36px;
}

.posture-visual-col {
	position: sticky;
	top: 96px;
	align-self: start;
}

.posture-visual-frame {
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 50%, #ffffff 100%);
	box-shadow: 0 4px 24px rgba(18, 73, 154, 0.06);
	height: 100%;
	min-height: 520px;
}

.posture-visual-img {
	width: 100%;
	height: 100%;
	min-height: 520px;
	object-fit: cover;
	display: block;
}

.posture-visual-floating-badge {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 10px 16px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.08);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
}

.posture-visual-floating-badge.badge-top {
	top: 18px;
	left: 18px;
}

.posture-visual-floating-badge.badge-bottom {
	bottom: 18px;
	right: 18px;
}

.posture-visual-floating-badge i {
	font-size: 18px;
	color: #12499A;
}

.posture-visual-floating-badge strong {
	font-size: 13.5px;
	color: #0f172a;
	display: block;
}

.posture-visual-floating-badge span {
	font-size: 11.5px;
	color: #64748b;
	display: block;
}

.posture-standards-2x2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.posture-standards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 40px;
}

.posture-standard-card {
	background: #ffffff;
	border-radius: 1rem;
	border: none !important;
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.05);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.posture-standard-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(18, 73, 154, 0.08);
}

.standard-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 14px;
}

.standard-card-icon.icon-blue {
	background: #eff6ff;
	color: #12499A;
}

.standard-card-icon.icon-emerald {
	background: #f0fdf4;
	color: #16a34a;
}

.standard-card-icon.icon-amber {
	background: #fef7ec;
	color: #e89519;
}

.standard-card-icon.icon-purple {
	background: #f5f3ff;
	color: #7c3aed;
}

.standard-pill {
	display: inline-block;
	align-self: flex-start;
	background: #f8fafc;
	color: #12499A;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.standard-title {
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 8px;
	line-height: 1.35;
	text-wrap: balance;
	word-break: keep-all;
}

.standard-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 14px;
	flex: 1;
}

.standard-highlight {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: #12499A;
	padding-top: 10px;
	border-top: 1px solid #f1f5f9;
}

.standard-highlight i {
	color: #16a34a;
	font-size: 13px;
}

@media (max-width: 1100px) {
	.posture-standards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.posture-standards-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ==========================================================================
   5. 3 LEARNING FORMATS OVERVIEW (OFFLINE, ONLINE, GIA SƯ)
   ========================================================================== */
.tth-formats-overview-section {
	padding: 56px 0 44px;
	background: #ffffff;
}

.tth-formats-overview-section .section-title-wrap {
	position: relative;
	padding-top: 55px;
}

.tth-formats-overview-section .commitments-numeral-backdrop {
	position: absolute;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 155px;
	font-weight: 900;
	line-height: 0.75;
	letter-spacing: normal;
	padding: 0 35px;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	background: linear-gradient(180deg, rgba(18, 73, 154, 0.28) 0%, rgba(18, 73, 154, 0.12) 60%, transparent 94%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 1;
}

.tth-formats-three-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.tth-format-card {
	position: relative;
	background: #ffffff;
	border: none !important;
	border-width: 0 !important;
	border-radius: 1rem;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	isolation: isolate;
}

.tth-format-card > * {
	position: relative;
	z-index: 2;
}

.tth-format-card:hover {
	transform: none;
	box-shadow: 0 4px 18px rgba(18, 73, 154, 0.05);
}
}

.format-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.format-badge-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.format-badge-icon.blue {
	background: #eff6ff;
	color: #12499A;
}

.format-badge-icon.green {
	background: #f0fdf4;
	color: #16a34a;
}

.format-badge-icon.amber {
	background: #fef7ec;
	color: #F99D1C;
}

.format-tag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: #64748b;
	background: #f8fafc;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.format-name {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 8px;
	line-height: 1.35;
	text-wrap: balance;
}

.format-sub {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.55;
	margin-bottom: 20px;
}

.format-specs-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #f8fafc;
	border-radius: 12px;
	margin-bottom: 24px;
}

.spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	gap: 10px;
}

.spec-label {
	color: #64748b;
	flex-shrink: 0;
	white-space: nowrap;
}

.spec-val {
	color: #0f172a;
	text-align: right;
}

.spec-val.highlight-blue {
	color: #12499A;
	font-weight: 800;
	white-space: nowrap;
}

.spec-val.highlight-green {
	color: #16a34a;
	font-weight: 800;
	white-space: nowrap;
}

.spec-val.highlight-amber {
	color: #d97706;
	font-weight: 800;
	white-space: nowrap;
}

.format-card-action {
	margin-top: auto;
}

.btn-format-choose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 18px;
	background: #eff6ff;
	color: #12499A;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-format-choose:hover {
	background: #12499A;
	color: #ffffff;
	transform: translateY(-1px);
}

/* ==========================================================================
   7. INTERACTIVE 3-WAY PRICING TABS & PANES
   (Tabs styled exactly like Image 1: White pill active, blue text, no prices)
   ========================================================================== */
.tth-pricing-format-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px auto 0;
	max-width: 780px;
	padding: 6px;
	background: #f1f5f9;
	border-radius: 999px;
}

.pricing-tab-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 20px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: #475569;
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.pricing-tab-btn i {
	font-size: 18px;
	color: #64748b;
	transition: color 0.2s ease;
}

.pricing-tab-btn .tab-btn-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
}

.pricing-tab-btn .tab-title {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}

.pricing-tab-btn .tab-subtitle {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
}

.pricing-tab-btn:hover {
	background: rgba(255, 255, 255, 0.6);
}

.pricing-tab-btn.is-active {
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.08);
}

.pricing-tab-btn.is-active i {
	color: #12499A;
}

.pricing-tab-btn.is-active .tab-title {
	color: #12499A;
	font-weight: 800;
}

.pricing-tab-btn.is-active .tab-subtitle {
	color: #12499A;
}

.tth-pricing-tab-pane {
	display: none;
	animation: tthPaneFadeIn 0.35s ease;
}

.tth-pricing-tab-pane.is-active {
	display: block;
}

@keyframes tthPaneFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   TYPOGRAPHY & ANTI-ORPHAN RULES (CHỐNG RỚT CHỮ)
   ========================================================================== */
.tth-hero-title,
.section-title,
.support-main-title,
.conversion-title,
.outcome-level-name,
.package-name,
.format-name,
.method-title,
.pain-title {
	text-wrap: balance;
}

.tth-hero-lead,
.section-desc,
.support-main-lead,
.conversion-desc,
.card-testimonial-content {
	text-wrap: pretty;
}

.pricing-tab-btn,
.btn-format-choose,
.btn-price-select,
.btn-submit-lead,
.popular-ribbon-tag,
.popular-top-banner,
.outcome-duration-pill,
.price-discount-badge,
.price-save-tag,
.tth-feature-chip,
.format-tag {
	white-space: nowrap;
}

/* Responsive Rules for Landing Page */
@media (max-width: 1024px) {
	.tth-hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.tth-hero-visual-card {
		max-width: 540px;
		margin: 0 auto;
	}
	.tth-sticky-split-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.sticky-visual-col {
		position: static;
	}
	.sticky-visual-frame {
		height: 480px;
	}
	.tth-method-cards-grid {
		grid-template-columns: 1fr;
	}
	.tth-formats-three-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	.tth-stacked-card {
		position: static;
		margin-bottom: 24px;
	}
	.stacked-card-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px 20px;
	}
	.stacked-visual-arch {
		height: 260px;
		border-radius: 16px;
	}
	.proof-pillars-two {
		grid-template-columns: 1fr;
	}
	.tth-courses-grid {
		grid-template-columns: 1fr;
		max-width: 440px;
		margin-left: auto;
		margin-right: auto;
	}
	.tth-support-showcase-card {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 28px 24px;
	}
	.ican-zalo-section {
		padding-bottom: 180px;
	}
	.feedback-bottom-overlay-art {
		height: 180px;
	}
	.overlay-landmarks-img {
		height: 160px;
		max-width: 80%;
	}
	.overlay-family-img {
		height: 150px;
		right: 4%;
	}
	.tth-faqs-two-col-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.faq-trust-col {
		position: static;
	}
}

@media (max-width: 768px) {
	/* Standardized harmonious section vertical spacing on mobile (no huge voids) */
	.tth-hero-section {
		padding: 36px 0 44px;
	}
	.tth-empathy-section {
		padding: 40px 0 44px;
	}
	.tth-method-section {
		padding: 40px 0 44px;
	}
	.tth-formats-overview-section {
		padding: 36px 0 32px;
	}
	.tth-outcomes-section {
		padding: 32px 0 40px;
	}
	.tth-pricing-section {
		padding: 40px 0 44px;
	}
	.tth-support-showcase-section,
	.tth-support-section {
		padding: 40px 0 36px;
	}
	.tth-landing-page .teacher-spotlight-section,
	.teacher-spotlight-section {
		padding: 40px 0 44px !important;
	}
	.ican-zalo-section {
		padding: 40px 0 110px;
	}
	.tth-faqs-section {
		padding: 40px 0 48px;
	}
	.about-cta-section {
		padding: 40px 0 54px;
	}

	/* Section Header & Content mobile horizontal padding sync */
	.section-title-wrap,
	.section-header,
	.tth-section-header {
		width: 100%;
		box-sizing: border-box;
		padding-left: 0;
		padding-right: 0;
	}
	.section-title-wrap .section-title,
	.section-header .section-title,
	.sticky-overlay-title,
	.cta-title {
		padding-left: 4px;
		padding-right: 4px;
		text-wrap: balance;
		word-break: break-word;
	}
	.section-title-wrap .section-desc,
	.section-header .section-desc,
	.section-header .section-subtitle,
	.sticky-overlay-desc,
	.cta-desc {
		padding-left: 6px;
		padding-right: 6px;
		text-wrap: pretty;
	}

	.tth-hero-title {
		font-size: 28px;
	}
	.tth-hero-perks-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.hero-floating-card.top-right {
		top: 8px;
		right: 8px;
	}
	.hero-floating-card.bottom-left {
		bottom: 8px;
		left: 8px;
	}

	/* Section 3 Left Blue Card: Height auto with balanced bottom padding */
	.sticky-visual-frame {
		height: auto !important;
		min-height: unset !important;
	}
	.sticky-visual-overlay {
		height: auto !important;
		padding: 30px 22px 30px !important;
		gap: 20px !important;
		justify-content: flex-start !important;
		box-sizing: border-box !important;
	}
	.sticky-overlay-quote {
		margin-top: 6px !important;
	}

	.tth-pain-card-split {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.pain-thumb-wrap {
		height: 160px;
	}
	.tth-pricing-format-tabs {
		flex-direction: column;
		border-radius: 1rem;
		padding: 8px;
		gap: 6px;
	}
	.pricing-tab-btn {
		width: 100%;
		border-radius: 12px;
		justify-content: flex-start;
		padding: 10px 14px;
	}
	.tth-empathy-bridge-box {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 20px !important;
		gap: 16px !important;
	}
	.bridge-text-block {
		width: 100% !important;
		min-width: 0 !important;
	}
	.bridge-cta-btn,
	.bridge-cta-btn.btn-sync-unified {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: center !important;
	}
	.tth-support-showcase-card {
		padding: 20px 16px;
	}
	.mockup-stage-media {
		height: 200px;
	}
	.feedback-bottom-overlay-art {
		height: 120px;
	}
	.overlay-landmarks-img {
		height: 110px;
		max-width: 90%;
	}
	.overlay-family-img {
		display: none; /* Hide family on narrow screens to prevent overlapping landmarks */
	}

	/* FAQ Section Mobile Padding & Accordion Sync */
	.tth-faqs-two-col-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 0;
	}
	.faq-trust-card {
		padding: 24px 20px;
		border-radius: 1rem;
		box-sizing: border-box;
	}
	.faq-question-btn {
		padding: 14px 16px;
		font-size: 15px;
	}
	.faq-answer-content {
		padding: 0 16px 16px;
		font-size: 14px;
	}

	/* CTA Conversion Section on Landing Page: Symmetric full-width card */
	.about-cta-card {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 28px 20px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	.cta-content-col {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.cta-contact-channels-group {
		width: 100% !important;
		flex-direction: column !important;
		gap: 12px !important;
	}
	.cta-contact-box {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.about-lead-form-box {
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 22px 18px !important;
	}

	/* Global Pre-footer CTA Ribbon: Centered & symmetric on mobile */
	.bs-prefooter-cta-section {
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		margin-top: 50px !important;
	}
	.bs-prefooter-inner {
		padding: 24px 0 28px !important;
		width: 100% !important;
		box-sizing: border-box !important;
		align-items: center !important;
	}
	.bs-prefooter-popout-box {
		margin: -48px auto 0 !important;
		width: calc(100% - 40px) !important;
		max-width: 290px !important;
		align-self: center !important;
	}
	.bs-prefooter-center-content {
		width: 100% !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	.bs-prefooter-action-col {
		width: 100% !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	.bs-prefooter-btn {
		width: 100% !important;
		max-width: 320px !important;
		margin: 0 auto !important;
	}

	/* Home page Course cards: Mobile swipeable horizontal slider */
	.course-directory-section .courses-grid,
	.courses-grid,
	.tth-courses-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		gap: 16px !important;
		padding: 10px 16px 24px !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		max-width: none !important;
		width: calc(100% + 32px) !important;
	}
	.course-directory-section .courses-grid::-webkit-scrollbar,
	.courses-grid::-webkit-scrollbar,
	.tth-courses-grid::-webkit-scrollbar {
		display: none !important;
	}
	.course-directory-section .course-card,
	.courses-grid .course-card,
	.tth-courses-grid .course-card {
		flex: 0 0 84vw !important;
		max-width: 320px !important;
		min-width: 275px !important;
		scroll-snap-align: center !important;
		margin-bottom: 0 !important;
	}

	/* Section 10 & 11 Counselor & Classroom gallery mobile alignment */
	.classroom-gallery-section .section-header {
		padding: 0 16px !important;
		box-sizing: border-box !important;
	}
	.execora-contact-split {
		width: 100% !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.counselor-visual-card {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.counselor-trigger-pill {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		justify-content: center !important;
	}
	.modern-form-card {
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 24px 18px 20px !important;
	}
}

/* ==========================================================================
   GLOBAL CENTER ALIGNMENT FOR SECTION HEADERS
   ========================================================================== */
.section-title-wrap.text-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 36px;
	position: relative;
}

.section-title-wrap.text-center .section-kicker {
	display: inline-block;
	text-align: center;
	margin: 0 auto 8px;
	font-size: 12px;
	font-weight: 800;
	color: #12499A;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section-title-wrap.text-center .section-title {
	text-align: center;
	margin: 0 auto 12px;
	width: 100%;
}

.section-title-wrap.text-center .section-desc {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}











.cta-title .highlight-gold,
.cta-title .highlight-brand-light {
	color: #FBBF24;
	background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	display: inline-block;
}

/* ==========================================================================
   TEACHER SPOTLIGHT SHOWCASE (INTERACTIVE ROSTER — ICANFIELD STYLE)
   ========================================================================== */
.tth-teacher-showcase-section {
	padding: 85px 0 95px;
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

.tth-teacher-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 42px;
}

.teacher-slider-arrows {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.teacher-arrow-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: none;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(18, 73, 154, 0.08);
	transition: all 0.22s ease;
}

.teacher-arrow-btn:hover {
	background: #12499A;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(18, 73, 154, 0.16);
}

.tth-teacher-stage-layout {
	display: grid;
	grid-template-columns: 360px 1fr 280px;
	gap: 32px;
	align-items: center;
	min-height: 520px;
	position: relative;
}

/* 1. Left: Active Teacher Card */
.tth-teacher-info-panel {
	position: relative;
	z-index: 3;
}

.teacher-profile-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 32px 28px;
	box-shadow: 0 8px 30px rgba(18, 73, 154, 0.07);
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.teacher-card-name {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
	line-height: 1.25;
}

.teacher-card-role {
	font-size: 13.5px;
	color: #F99D1C;
	font-weight: 700;
	line-height: 1.4;
}

.teacher-card-divider {
	width: 100%;
	height: 1px;
	background: #f1f5f9;
	margin: 4px 0;
}

.teacher-card-quote {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.65;
	margin: 0;
	text-wrap: pretty;
	font-style: italic;
}

.teacher-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.teacher-pill-spec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #eff6ff;
	color: #12499A;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.teacher-action-btn {
	width: 100%;
	margin-top: 4px;
}

/* 2. Center: Spotlight with Oval Stage Ring */
.tth-teacher-spotlight-col {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 520px;
	z-index: 2;
}

.teacher-oval-stage {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 520px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.stage-ellipse-glow {
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(249, 157, 28, 0.14) 0%, rgba(18, 73, 154, 0.04) 60%, transparent 75%);
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}

.stage-ellipse-ring {
	position: absolute;
	width: 340px;
	height: 220px;
	border-radius: 50%;
	border: 2px solid rgba(249, 157, 28, 0.45);
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) rotate(-12deg);
	pointer-events: none;
	z-index: 1;
	box-shadow: 0 0 24px rgba(249, 157, 28, 0.15);
}

.teacher-hero-portrait {
	position: relative;
	z-index: 2;
	max-height: 500px;
	width: auto;
	object-fit: contain;
	display: block;
	transition: opacity 0.35s ease, transform 0.35s ease;
	filter: drop-shadow(0 12px 28px rgba(18, 73, 154, 0.12));
}

/* 3. Right: Other Teachers Roster / Mini Thumbnails */
.tth-teacher-roster-col {
	position: relative;
	z-index: 3;
}

.teacher-roster-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.roster-teacher-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #ffffff;
	border-radius: 1rem;
	padding: 12px 16px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	cursor: pointer;
	transition: all 0.25s ease;
	user-select: none;
}

.roster-teacher-item:hover {
	transform: translateX(-6px);
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.08);
	background: #f8fafc;
}

.roster-teacher-item.is-active {
	background: #eff6ff;
	box-shadow: 0 4px 16px rgba(18, 73, 154, 0.09);
}

.roster-thumb-wrap {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	flex-shrink: 0;
}

.roster-ellipse-ring {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid rgba(249, 157, 28, 0.4);
	transform: rotate(-15deg);
}

.roster-teacher-item.is-active .roster-ellipse-ring {
	border-color: #12499A;
}

.roster-thumb-img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	object-position: top center;
	border-radius: 50%;
	background: #ffffff;
}

.roster-thumb-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.roster-thumb-name {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
}

.roster-thumb-tag {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
}

.roster-teacher-item.is-active .roster-thumb-name {
	color: #12499A;
	font-weight: 800;
}

.roster-teacher-item.is-active .roster-thumb-tag {
	color: #12499A;
}

@media (max-width: 1024px) {
	.tth-teacher-stage-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.tth-teacher-roster-col .teacher-roster-list {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   ENHANCED SCROLL REVEAL ANIMATIONS (SMOOTH DECELERATION)
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

.reveal-on-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.35s ease-out, transform 0.35s ease-out;
	will-change: opacity, transform;
}

.tth-hero-section .reveal-on-scroll,
.no-js .reveal-on-scroll {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.reveal-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.reveal-on-scroll.reveal-left {
	transform: translateX(-20px);
}

.reveal-on-scroll.reveal-right {
	transform: translateX(20px);
}

.reveal-on-scroll.reveal-scale,
.reveal-on-scroll.reveal-image {
	transform: translateY(18px) scale(0.97);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.reveal-on-scroll.reveal-delay-1 {
	transition-delay: 0.05s;
}

.reveal-on-scroll.reveal-delay-2 {
	transition-delay: 0.1s;
}

.reveal-on-scroll.reveal-delay-3 {
	transition-delay: 0.15s;
}

.reveal-on-scroll.reveal-delay-4 {
	transition-delay: 0.2s;
}

.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* ==========================================================================
   MICRO-MOTION & FLOATING EFFECTS ACROSS COMPONENTS
   ========================================================================== */
.tth-hero-perk-item {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.tth-hero-perk-item:hover {
	transform: translateY(-4px);
}

.hero-floating-card {
	animation: heroCardFloat 5s ease-in-out infinite alternate;
}

.hero-floating-card.bottom-left {
	animation-delay: -2.5s;
}

@keyframes heroCardFloat {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-8px);
	}
}

.stacked-badge-pill {
	animation: pillFloatSoft 4s ease-in-out infinite alternate;
}

@keyframes pillFloatSoft {
	0% {
		transform: translate(-50%, 0);
	}
	100% {
		transform: translate(-50%, -4px);
	}
}

.stacked-visual-img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tth-stacked-card:hover .stacked-visual-img {
	transform: scale(1.04);
}

.course-card {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.course-card:hover {
	transform: translateY(-6px);
}

.support-tab-item {
	transition: background 0.4s ease, box-shadow 0.4s ease;
}

.support-tab-item.is-active .tab-toggle-icon i {
	transform: translateX(2px);
	transition: transform 0.3s ease;
}

.zalo-doodle-annotation {
	animation: doodleTagDrift 6s ease-in-out infinite alternate;
}

.zalo-doodle-annotation.annotation-right {
	animation-delay: -3s;
}

@keyframes doodleTagDrift {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	100% {
		transform: translateY(-6px) rotate(1.5deg);
	}
}

/* ========================================================
   PHONICS 4 CORE SKILLS OUTCOMES GRID (RULE 4 BORDERLESS)
======================================================== */
.phonics-skills-section {
	margin-bottom: 42px;
}

.phonics-skills-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 24px;
}

.phonics-skill-card {
	background: #ffffff;
	border: none !important;
	border-radius: 1rem;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	position: relative;
	overflow: hidden;
}

.phonics-skill-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.06);
}

.phonics-skill-icon-wrap {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	margin-bottom: 14px;
	flex-shrink: 0;
}

.phonics-skill-icon-wrap.blue {
	background: #eff6ff;
	color: #12499A;
}

.phonics-skill-icon-wrap.amber {
	background: #fef7ec;
	color: #d97706;
}

.phonics-skill-icon-wrap.green {
	background: #f0fdf4;
	color: #166534;
}

.phonics-skill-icon-wrap.purple {
	background: #f5f3ff;
	color: #7c3aed;
}

.phonics-skill-label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
	margin-bottom: 4px;
}

.phonics-skill-title {
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px;
	line-height: 1.35;
	text-wrap: pretty;
}

.phonics-skill-desc {
	font-size: 14px;
	color: #475569;
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}

@media (max-width: 1024px) {
	.phonics-skills-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.phonics-skills-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ============================================================================
   SCROLL-CRAFT ENGINE STYLES (SPECIALLY TAILORED FOR BLUE STAR ENGLISH)
   Preserving 100% Borderless Design, Anti-Orphan Typography, & Brand Rules
   ============================================================================ */
:root {
	--sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Flow reveals with staggered entry (non-destructive) */
[data-sc-in] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 640ms var(--sc-ease-out), transform 640ms var(--sc-ease-out);
	will-change: opacity, transform;
}

[data-sc-in].sc-in {
	opacity: 1;
	transform: none;
}

/* Tabular numerals for smooth count bloom */
[data-sc-count] {
	font-variant-numeric: tabular-nums;
	display: inline-block;
}

/* Parallax depth on layers & badges */
[data-sc-parallax] {
	will-change: transform;
	transition: transform 120ms var(--sc-ease-out);
}

/* 3D Card Tilt */
[data-sc-tilt] {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 150ms var(--sc-ease-out);
}

/* Spotlight Effect on Interactive Cards (Preserves sticky on stacked cards) */
[data-sc-spotlight] {
	isolation: isolate;
}

[data-sc-spotlight]:not(.tth-stacked-card) {
	position: relative;
}

[data-sc-spotlight]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	border-radius: inherit;
	background: radial-gradient(
		24rem 24rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
		rgba(18, 73, 154, 0.045),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 320ms var(--sc-ease-out);
}

[data-sc-spotlight]:hover::after {
	opacity: 1;
}

/* Reduced Motion Graceful Degradation */
@media (prefers-reduced-motion: reduce) {
	[data-sc-in],
	[data-sc-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	[data-sc-parallax],
	[data-sc-tilt],
	[data-sc-magnet] {
		transform: none !important;
	}
	[data-sc-spotlight]::after {
		display: none !important;
	}
}


/* ========================================================
   THCS HERO & BREADCRUMB STANDARDIZATION
======================================================== */
.tth-breadcrumb-bar {
	padding: 16px 0 8px;
	width: 100%;
}

.tth-breadcrumb-bar .tth-breadcrumb-list,
.tth-breadcrumb .breadcrumb-list {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tth-breadcrumb-item {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 13.5px !important;
	color: #64748B !important;
}

.tth-breadcrumb-link {
	color: #64748B !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: color 0.15s ease !important;
}

.tth-breadcrumb-link:hover {
	color: #12499A !important;
}

.tth-breadcrumb-separator {
	color: #94A3B8 !important;
	font-size: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
}

.tth-breadcrumb-item.current {
	color: #0F172A !important;
	font-weight: 600 !important;
}

/* THCS Hero Social Proof & Avatars Row */
.tth-hero-proof {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-top: 24px !important;
}

.proof-avatars-group,
.trust-avatars {
	display: inline-flex !important;
	align-items: center !important;
	flex-direction: row !important;
}

.proof-avatars-group .proof-avatar-img,
.trust-avatars .trust-avatar {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	border: 2.5px solid #ffffff !important;
	margin-left: -10px !important;
	object-fit: cover !important;
	display: inline-block !important;
	box-shadow: 0 2px 8px rgba(18, 73, 154, 0.08) !important;
}

.proof-avatars-group .proof-avatar-img:first-child,
.trust-avatars .trust-avatar:first-child {
	margin-left: 0 !important;
}

.proof-meta-info,
.trust-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.proof-meta-info .proof-stars-row,
.trust-rating {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: #F99D1C !important;
	font-size: 13px !important;
}

.proof-stat-text,
.trust-caption {
	font-size: 13.5px !important;
	color: #64748B !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.proof-stat-text strong {
	color: #0F172A !important;
	font-weight: 700 !important;
}

/* ========================================================
   THCS FULL COMPONENT DESIGN SYSTEM
======================================================== */

/* Section 4: Method 4 Pillars Grid */
.tth-pillars-four-grid,
.method-pillars-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.pillar-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 28px 24px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
	border: none !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.07);
}

.pillar-icon-box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.pillar-icon-box.blue { background: #eff6ff; color: #12499A; }
.pillar-icon-box.green { background: #f0fdf4; color: #16a34a; }
.pillar-icon-box.amber { background: #fffbeb; color: #d97706; }
.pillar-icon-box.purple { background: #faf5ff; color: #9333ea; }

.pillar-title {
	font-size: 17.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	line-height: 1.35;
	text-wrap: balance;
}

.pillar-text {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

/* Section 5: Specialized 4 Grid */
.tth-specialized-section,
.tth-special-section {
	padding: 64px 0 32px;
}

.specialized-four-grid,
.special-curriculum-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.specialized-card,
.curriculum-item-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 30px 28px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	border: none !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.specialized-card:hover,
.curriculum-item-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.07);
}

.specialized-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.specialized-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
}

.specialized-icon.blue { background: #eff6ff; color: #12499A; }
.specialized-icon.green { background: #f0fdf4; color: #16a34a; }
.specialized-icon.amber { background: #fffbeb; color: #d97706; }
.specialized-icon.purple { background: #faf5ff; color: #9333ea; }

.specialized-step-num {
	font-size: 14px;
	font-weight: 800;
	color: #94a3b8;
}

.specialized-heading,
.curriculum-item-title {
	font-size: 18.5px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	line-height: 1.35;
}

.specialized-desc,
.curriculum-item-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

.specialized-badge-tag {
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f8fafc;
	color: #12499A;
	font-size: 12.5px;
	font-weight: 600;
	align-self: flex-start;
}

/* Section 6: Formats 3 Grid */
.tth-formats-section {
	padding: 64px 0 32px;
}

.tth-formats-three-grid,
.formats-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 36px;
}

.format-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 32px 28px;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.05);
	border: none !important;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.format-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(18, 73, 154, 0.08);
}

.format-card.featured,
.format-card.format-card-recommended {
	box-shadow: 0 4px 20px rgba(18, 73, 154, 0.08);
}

.format-featured-ribbon,
.format-badge-pill.badge-popular {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 14px;
	border-radius: 999px;
	background: #fef3c7;
	color: #b45309;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 14px;
	white-space: nowrap;
}

.format-card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.format-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.format-icon.blue { background: #eff6ff; color: #12499A; }
.format-icon.amber { background: #fffbeb; color: #d97706; }
.format-icon.green { background: #f0fdf4; color: #16a34a; }

.format-name {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 4px;
	line-height: 1.3;
}

.format-badge-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
}

.format-desc,
.format-sub {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 18px;
}

.format-features-list,
.format-features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.format-features-list li,
.format-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #334155;
	line-height: 1.5;
}

.format-features-list li i,
.format-feature-item i {
	color: #16a34a;
	margin-top: 3px;
	font-size: 13px;
	flex-shrink: 0;
}

.format-cta-link,
.btn-format-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 999px;
	background: #eff6ff;
	color: #12499A;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.2s ease;
	margin-top: auto;
}

.format-card.featured .format-cta-link {
	background: #12499A;
	color: #ffffff;
}

.format-cta-link:hover {
	background: #12499A;
	color: #ffffff;
}

/* Section 7: Stacked Cards Roadmap */
.tth-stacked-roadmap-section {
	padding: 64px 0 32px;
}

.stacked-roadmap-cards-wrap,
.stacked-cards-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 36px;
}

.stacked-roadmap-card,
.roadmap-card-item {
	background: #ffffff;
	border-radius: 1rem;
	padding: 34px 32px;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.05);
	border: none !important;
}

.roadmap-card-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 12px;
}

.roadmap-card-badge.blue { background: #eff6ff; color: #12499A; }
.roadmap-card-badge.amber { background: #fffbeb; color: #d97706; }
.roadmap-card-badge.green { background: #f0fdf4; color: #16a34a; }

.roadmap-stage-title,
.step-title {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px;
	line-height: 1.35;
	text-wrap: balance;
}

.roadmap-stage-desc,
.step-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 20px;
}

.roadmap-targets-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.roadmap-target-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #f8fafc;
	padding: 14px 16px;
	border-radius: 12px;
}

.roadmap-target-item .target-icon {
	color: #16a34a;
	margin-top: 2px;
	font-size: 13px;
	flex-shrink: 0;
}

.roadmap-target-item .target-text {
	font-size: 13.5px;
	color: #334155;
	line-height: 1.5;
}

/* Section 8: Pricing Section Grid & Cards */
.tth-pricing-section {
	padding: 64px 0 32px;
}

.tth-pricing-format-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.pricing-tab-btn {
	padding: 11px 22px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.pricing-tab-btn.is-active {
	background: #12499A;
	color: #ffffff;
}

.tth-pricing-tab-pane {
	display: none;
}

.tth-pricing-tab-pane.is-active {
	display: block;
}

.tth-pricing-three-grid,
.pricing-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.price-plan-card,
.pricing-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 32px 28px;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.05);
	border: none !important;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.price-plan-card:hover,
.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(18, 73, 154, 0.08);
}

.price-plan-card.featured,
.pricing-card.pricing-card-highlight {
	box-shadow: 0 4px 22px rgba(18, 73, 154, 0.09);
}

.plan-featured-ribbon,
.pricing-badge-popular {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 14px;
	border-radius: 999px;
	background: #fef3c7;
	color: #b45309;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 12px;
	white-space: nowrap;
}

.plan-tier-name,
.package-name {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 4px;
}

.plan-subtitle,
.package-target {
	font-size: 13.5px;
	color: #64748b;
	margin: 0 0 16px;
}

.plan-price-box,
.package-price-wrap {
	margin-bottom: 18px;
}

.price-val-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.price-num,
.price-val {
	font-size: 28px;
	font-weight: 800;
	color: #12499A;
}

.price-unit,
.price-period {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.price-note,
.price-unit-pill {
	display: inline-block;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

.plan-perks-list,
.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.plan-perks-list li,
.pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: #334155;
	line-height: 1.5;
}

.plan-perks-list li i,
.pricing-features li i {
	color: #16a34a;
	margin-top: 3px;
	font-size: 13px;
	flex-shrink: 0;
}

/* Section 9: Support Showcase (Đặc quyền đồng hành Zalo) */
.tth-support-showcase-section {
	padding: 64px 0 32px;
}

.tth-support-two-col-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
	margin-top: 36px;
}

.support-perks-col,
.support-pillars-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.support-perk-item,
.support-item-box {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #ffffff;
	border-radius: 1rem;
	padding: 22px 24px;
	box-shadow: 0 2px 12px rgba(18, 73, 154, 0.04);
	border: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-perk-item:hover,
.support-item-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(18, 73, 154, 0.07);
}

.perk-badge-icon,
.support-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.perk-badge-icon.blue, .support-icon-circle { background: #eff6ff; color: #12499A; }
.perk-badge-icon.green { background: #f0fdf4; color: #16a34a; }
.perk-badge-icon.amber { background: #fffbeb; color: #d97706; }

.perk-title,
.support-item-title {
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 6px;
	line-height: 1.35;
}

.perk-desc,
.support-item-desc {
	font-size: 14px;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

/* Zalo Mockup Card */
.support-visual-col {
	display: flex;
	justify-content: center;
}

.zalo-mockup-frame {
	background: #ffffff;
	border-radius: 1.25rem;
	box-shadow: 0 8px 30px rgba(18, 73, 154, 0.08);
	overflow: hidden;
	width: 100%;
	max-width: 420px;
	border: none !important;
}

.zalo-mockup-header {
	background: #0068ff;
	color: #ffffff;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.mockup-avatar img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ffffff;
	padding: 4px;
	object-fit: contain;
}

.mockup-info {
	display: flex;
	flex-direction: column;
}

.mockup-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.mockup-status {
	font-size: 11.5px;
	opacity: 0.9;
}

.zalo-mockup-body {
	background: #f1f5f9;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 240px;
}

.mockup-bubble {
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	max-width: 90%;
	position: relative;
}

.mockup-bubble p {
	margin: 0 0 4px;
}

.mockup-bubble.teacher {
	background: #ffffff;
	color: #0f172a;
	align-self: flex-start;
	border-bottom-left-radius: 2px;
}

.mockup-bubble.parent {
	background: #e1f2ff;
	color: #0f172a;
	align-self: flex-end;
	border-bottom-right-radius: 2px;
}

.bubble-time {
	font-size: 10.5px;
	color: #94a3b8;
	display: block;
	text-align: right;
}

/* Section 10: Teacher Spotlight / Team */
.tth-teachers-section {
	padding: 64px 0 32px;
}

.tth-teachers-three-grid,
.teachers-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 36px;
}

.teacher-profile-card,
.teacher-card {
	background: #ffffff;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.05);
	border: none !important;
	display: flex;
	flex-direction: column;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.teacher-profile-card:hover,
.teacher-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 26px rgba(18, 73, 154, 0.08);
}

.teacher-photo-wrapper,
.teacher-img-wrap {
	width: 100%;
	height: 260px;
	overflow: hidden;
	background: #f1f5f9;
	position: relative;
}

.teacher-avatar-img,
.teacher-avatar {
	width: 100% !important;
	height: 100% !important;
	max-height: 260px !important;
	object-fit: cover !important;
	object-position: top center !important;
	display: block !important;
	transition: transform 0.3s ease;
}

.teacher-profile-card:hover .teacher-avatar-img,
.teacher-card:hover .teacher-avatar {
	transform: scale(1.03);
}

.teacher-meta-box,
.teacher-details {
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.teacher-name {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	line-height: 1.3;
}

.teacher-role,
.teacher-degree {
	font-size: 13px;
	color: #12499A;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.teacher-bio {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

/* Section 11: Testimonials */
.tth-testimonials-section {
	padding: 64px 0 32px;
}

.tth-testimonials-three-grid,
.testimonials-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 36px;
}

.testimonial-bubble-card,
.testimonial-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 28px 24px;
	box-shadow: 0 2px 14px rgba(18, 73, 154, 0.05);
	border: none !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.testimonial-bubble-card:hover,
.testimonial-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(18, 73, 154, 0.07);
}

.testi-stars-row,
.testi-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #F99D1C;
	font-size: 14px;
}

.testi-quote-text,
.testi-text {
	font-size: 14px;
	color: #334155;
	line-height: 1.6;
	margin: 0;
	font-style: italic;
	flex-grow: 1;
}

.testi-author-box,
.testi-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
}

.testi-author-avatar img,
.author-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.testi-author-info,
.author-meta {
	display: flex;
	flex-direction: column;
}

.author-name {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	line-height: 1.3;
}

.author-sub,
.author-info {
	font-size: 12px;
	color: #64748b;
	margin: 0;
}

/* Section 12: Lead Capture Conversion */
.tth-conversion-section,
.tth-consultation-section {
	padding: 64px 0 32px;
}

.tth-conversion-card,
.consultation-box-wrap {
	background: #ffffff;
	border-radius: 1.25rem;
	padding: 44px 48px;
	box-shadow: 0 8px 32px rgba(18, 73, 154, 0.07);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
	border: none !important;
}

.conversion-badge-pill,
.consultation-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: #eff6ff;
	color: #12499A;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 16px;
}

.conversion-title,
.consultation-title {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 14px;
	line-height: 1.3;
	text-wrap: balance;
}

.conversion-lead,
.consultation-desc {
	font-size: 15px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 20px;
}

.conversion-perks-list,
.consultation-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.conversion-perks-list li,
.perk-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #334155;
}

.conversion-perks-list li i,
.perk-item i {
	color: #16a34a;
	font-size: 14px;
	flex-shrink: 0;
}

.conversion-hotline-box,
.consultation-hotline {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	background: #f8fafc;
	border-radius: 12px;
	width: fit-content;
}

.hotline-icon-circle,
.hotline-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #eff6ff;
	color: #12499A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.hotline-info-meta,
.hotline-details {
	display: flex;
	flex-direction: column;
}

.hotline-label {
	font-size: 11.5px;
	color: #64748b;
}

.hotline-num {
	font-size: 16px;
	font-weight: 800;
	color: #12499A;
	text-decoration: none;
}

.conversion-form-wrapper,
.form-card {
	background: #f8fafc;
	padding: 32px 28px;
	border-radius: 1rem;
}

.form-card-title {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 20px;
}

.form-group {
	margin-bottom: 14px;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}

.form-input-text,
.form-select,
.form-textarea,
.form-control {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	font-size: 14px;
	color: #0f172a;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.form-input-text:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus {
	outline: none;
	border-color: #12499A;
}

.form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.btn-lead-submit,
.btn-submit-lead {
	width: 100%;
	margin-top: 10px;
	justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.tth-pillars-four-grid,
	.method-pillars-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tth-formats-three-grid,
	.formats-cards-grid,
	.tth-pricing-three-grid,
	.pricing-cards-grid,
	.tth-teachers-three-grid,
	.teachers-cards-grid,
	.tth-testimonials-three-grid,
	.testimonials-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tth-support-two-col-grid,
	.tth-conversion-card,
	.consultation-box-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.tth-pillars-four-grid,
	.method-pillars-grid,
	.specialized-four-grid,
	.special-curriculum-grid,
	.tth-formats-three-grid,
	.formats-cards-grid,
	.roadmap-targets-grid,
	.tth-pricing-three-grid,
	.pricing-cards-grid,
	.tth-teachers-three-grid,
	.teachers-cards-grid,
	.tth-testimonials-three-grid,
	.testimonials-cards-grid,
	.form-row-2col {
		grid-template-columns: 1fr;
	}
	.tth-conversion-card,
	.consultation-box-wrap {
		padding: 24px 20px;
	}
}