/**
 * VicUni Education - Main Stylesheet
 * Modernized & Elevated Flatsome Child Theme
 */

:root {
	--vue-primary: #11479b;
	--vue-primary-dark: #0d387a;
	--vue-navy: #0a2a5e;
	--vue-gold: #d4a018;
	--vue-gold-hover: #e3af24;
	--vue-hero-bg: #e2ebf8;
	--vue-bg-alt: #f4f6fa;
	--vue-tint-bg: #e3ecf8;
	--vue-tint-border: #ceddf2;
	--vue-text-main: #1e293b;
	--vue-text-muted: #475569;
	--vue-border: #e2e8f0;
	--vue-radius-lg: 18px;
	--vue-radius-md: 14px;
	--vue-shadow-sm: 0 6px 20px rgba(10, 42, 94, 0.05);
	--vue-shadow-md: 0 12px 32px rgba(10, 42, 94, 0.08);
	--vue-shadow-lg: 0 20px 48px rgba(10, 42, 94, 0.14);
	--vue-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
.heading-font,
.nav > li > a,
button,
input,
select,
textarea {
	font-family: var(--vue-font) !important;
}

body {
	color: var(--vue-text-main);
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. HEADER & TOP BAR (FLATSOME HEADER BUILDER)
   ============================================================ */
#top-bar {
	background-color: var(--vue-primary) !important;
	min-height: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vue-topbar-links {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
}

.vue-topbar-links a {
	color: rgba(255, 255, 255, 0.95) !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.vue-topbar-links a:hover {
	color: var(--vue-gold) !important;
}

.vue-topbar-links i {
	font-size: 13px;
}

#masthead.header-main {
	background-color: var(--vue-navy) !important;
	height: 54px !important;
	min-height: 54px !important;
	box-shadow: 0 4px 20px rgba(10, 42, 94, 0.18);
}

#masthead .header-inner {
	height: 54px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

#masthead .top-divider {
	display: none !important;
}

#logo {
	width: 115px !important;
	display: flex;
	align-items: center;
}

#logo a {
	display: inline-flex;
	align-items: center;
}

#logo img {
	max-height: 40px !important;
	width: auto !important;
}

/* Center primary navigation in header-main (Desktop only) */
@media (min-width: 850px) {
	#masthead .flex-col.hide-for-medium.flex-left.flex-grow {
		display: flex;
		justify-content: center;
	}
}

#masthead .header-nav-main.nav {
	justify-content: center;
	gap: 6px;
}

#masthead .header-nav-main.nav > li > a {
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em;
	padding: 10px 12px !important;
	transition: color 0.2s ease;
}

#masthead .header-nav-main.nav > li > a:hover,
#masthead .header-nav-main.nav > li.active > a {
	color: var(--vue-gold) !important;
}

/* Header CTA Button */
#masthead .header-button-1 .button {
	background-color: var(--vue-gold) !important;
	border-color: var(--vue-gold) !important;
	color: var(--vue-navy) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	border-radius: 999px !important;
	padding: 4px 22px !important;
	min-height: 40px !important;
	line-height: 32px !important;
	margin: 0 !important;
	white-space: nowrap !important;
	box-shadow: 0 4px 12px rgba(212, 160, 24, 0.25);
	transition: all 0.25s ease !important;
}

#masthead .header-button-1 .button:hover {
	background-color: var(--vue-gold-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(212, 160, 24, 0.35);
}

/* Mobile Header & Off-Canvas Menu (<= 849px) */
@media (max-width: 849px) {
	#top-bar .vue-topbar-links {
		gap: 14px;
		font-size: 11.5px;
		justify-content: center;
	}

	#masthead .header-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	#masthead .flex-col.show-for-medium.flex-left {
		display: none !important;
	}

	#masthead #logo {
		width: auto !important;
		max-width: 138px !important;
		margin: 0 auto 0 0 !important;
		text-align: left !important;
		flex: 0 0 auto !important;
	}

	#masthead #logo img {
		max-height: 38px !important;
		width: auto !important;
	}

	#masthead .flex-col.show-for-medium.flex-right {
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}

	#masthead .mobile-nav.nav-right {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		flex-wrap: nowrap !important;
	}

	#masthead .mobile-nav.nav-right > li {
		margin: 0 !important;
	}

	#masthead .header-button-1 .button {
		font-size: 12.5px !important;
		padding: 3px 14px !important;
		min-height: 34px !important;
		line-height: 26px !important;
	}

	#masthead .nav-icon > a {
		width: 38px !important;
		height: 38px !important;
		min-height: 38px !important;
		border-radius: 10px !important;
		border: 1.5px solid rgba(255, 255, 255, 0.24) !important;
		background: rgba(255, 255, 255, 0.08) !important;
		color: #ffffff !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#masthead .nav-icon > a i {
		font-size: 18px !important;
		color: #ffffff !important;
	}
}

/* Mobile Off-Canvas Sidebar Menu (#main-menu) */
#main-menu .nav-sidebar > li > a {
	font-family: var(--vue-font) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: var(--vue-navy) !important;
	padding: 14px 20px !important;
}

#main-menu .header-button-1 {
	padding: 16px 20px !important;
	width: 100% !important;
}

#main-menu .header-button-1 .button {
	width: 100% !important;
	background-color: var(--vue-gold) !important;
	border-color: var(--vue-gold) !important;
	color: var(--vue-navy) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	margin: 0 !important;
}

/* ============================================================
   2. GLOBAL SECTION HEADINGS & DIVIDERS
   ============================================================ */
.vue-sec-head {
	text-align: center;
	margin-bottom: 36px;
}

.vue-sec-sub {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}

.vue-sec-title {
	font-size: 32px;
	font-weight: 800;
	color: var(--vue-primary);
	line-height: 1.25;
	margin: 0 0 14px;
}

.vue-sec-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.vue-sec-divider::before,
.vue-sec-divider::after {
	content: "";
	display: block;
	width: 96px;
	height: 1.5px;
	background-color: #9bb5e0;
}

.vue-sec-divider span {
	display: block;
	width: 9px;
	height: 9px;
	background-color: var(--vue-gold);
	transform: rotate(45deg);
}

.vue-sec-desc {
	font-size: 15px;
	color: var(--vue-text-muted);
	margin-top: 14px;
	margin-bottom: 0;
}

/* ============================================================
   3. TOP MAROON BANNER & HERO SECTION
   ============================================================ */
.vue-top-banner-section {
	padding: 0 !important;
}

.vue-top-banner-section .img,
.vue-top-banner-section img {
	width: 100%;
	display: block;
	margin: 0 !important;
}

.vue-hero-section {
	background-color: var(--vue-hero-bg) !important;
}

.vue-hero-badge {
	display: inline-block;
	background-color: var(--vue-gold);
	color: var(--vue-navy);
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.vue-hero-title {
	font-size: 38px;
	line-height: 1.22;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}

.vue-hero-desc {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--vue-text-muted);
	margin: 0 0 26px;
}

.vue-hero-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.vue-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--vue-primary) !important;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 999px !important;
	border: 1.5px solid var(--vue-primary) !important;
	text-decoration: none !important;
	transition: all 0.25s ease;
	box-shadow: 0 6px 18px rgba(17, 71, 155, 0.2);
}

.vue-btn-primary:hover {
	background-color: var(--vue-primary-dark) !important;
	border-color: var(--vue-primary-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(17, 71, 155, 0.28);
}

.vue-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: transparent !important;
	color: var(--vue-primary) !important;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 999px !important;
	border: 1.5px solid var(--vue-primary) !important;
	text-decoration: none !important;
	transition: all 0.25s ease;
}

.vue-btn-outline:hover {
	background-color: var(--vue-primary) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
}

.vue-hero-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
}

.vue-hero-checks span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vue-hero-checks i {
	color: var(--vue-primary);
	font-size: 14px;
}

.vue-hero-image-card,
.vue-hero-ux-image,
.vue-hero-section .col:last-child > .col-inner > .img {
	background: #ffffff;
	padding: 12px;
	border-radius: 22px;
	box-shadow: var(--vue-shadow-lg);
	margin-bottom: 0 !important;
}

.vue-hero-ux-image .img-inner,
.vue-hero-section .col:last-child > .col-inner > .img .img-inner {
	border-radius: 15px;
	overflow: hidden;
}

.vue-hero-image-card .img,
.vue-hero-image-card img,
.vue-hero-ux-image img,
.vue-hero-section .col:last-child > .col-inner > .img img {
	border-radius: 15px;
	display: block;
	width: 100%;
	margin: 0 !important;
}

/* ============================================================
   4. STATS 4 CARDS & PARTNERS MARQUEE
   ============================================================ */
.vue-stat-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border-radius: 16px;
	padding: 34px 24px 30px;
	text-align: center;
	box-shadow: 0 14px 34px -8px rgba(17, 71, 155, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
	border: 1px solid #dbe7f7;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.vue-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -10px rgba(17, 71, 155, 0.16), 0 8px 18px -4px rgba(15, 23, 42, 0.06);
	border-color: var(--vue-primary);
}

.vue-stat-icon-box {
	width: 78px;
	height: 78px;
	border-radius: 22px;
	background: linear-gradient(135deg, #e7f0ff 0%, #d2e3ff 100%);
	border: 1.5px solid rgba(17, 71, 155, 0.16);
	box-shadow: 0 10px 22px -6px rgba(17, 71, 155, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	position: relative;
	transition: all 0.3s ease;
}

.vue-stat-icon-box::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--vue-gold);
	border: 2.5px solid #ffffff;
	box-shadow: 0 2px 6px rgba(212, 160, 24, 0.4);
}

.vue-stat-card:hover .vue-stat-icon-box {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border-color: var(--vue-gold);
	transform: scale(1.06);
	box-shadow: 0 14px 26px -6px rgba(212, 160, 24, 0.32);
}

.vue-stat-icon {
	font-size: 36px;
	color: var(--vue-primary);
	display: inline-block;
	transition: color 0.3s ease, transform 0.3s ease;
}

.vue-stat-card:hover .vue-stat-icon {
	color: var(--vue-navy);
	transform: scale(1.06);
}

.vue-stat-bg-icon {
	position: absolute;
	right: -12px;
	bottom: -14px;
	font-size: 96px;
	color: var(--vue-primary);
	opacity: 0.035;
	pointer-events: none;
	transform: rotate(-12deg);
}

.vue-stat-num {
	font-size: 40px;
	font-weight: 800;
	color: var(--vue-primary);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.vue-stat-label {
	font-size: 15px;
	color: #334155;
	font-weight: 600;
}

/* Partners Section */
.vue-partners-title {
	text-align: center;
	font-size: 14px;
	font-weight: 800;
	color: var(--vue-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 24px;
}

.vue-partners-track-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 8px 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.vue-partners-track {
	display: flex;
	align-items: center;
	gap: 20px;
	width: max-content;
	animation: vueMarquee 34s linear infinite;
}

.vue-partners-track:hover {
	animation-play-state: paused;
}

@keyframes vueMarquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.vue-partner-pill {
	background: #ffffff;
	border: 1.5px solid #dce7f6;
	border-radius: 16px;
	padding: 12px 22px;
	width: 204px;
	height: 78px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -4px rgba(17, 71, 155, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vue-partner-pill:hover {
	transform: translateY(-3px);
	border-color: var(--vue-primary);
	box-shadow: 0 12px 24px -6px rgba(17, 71, 155, 0.15);
}

.vue-partner-logo {
	max-width: 160px;
	max-height: 50px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ============================================================
   5. THƯ NGỎ SECTION
   ============================================================ */
.vue-letter-quote {
	border-left: 1px solid var(--vue-gold);
	padding-left: 16px;
	font-size: 17.5px;
	font-weight: 700;
	font-style: italic;
	color: var(--vue-primary);
	line-height: 1.5;
	margin-bottom: 20px;
}

.vue-letter-text p {
	font-size: 15px;
	line-height: 1.72;
	color: #1e293b;
	margin-bottom: 16px;
}

.vue-author-card,
.vue-author-image-box {
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px -8px rgba(17, 71, 155, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
	border: 1.5px solid #dbe7f7;
}

.vue-author-image-box .box-image {
	border-bottom: 3.5px solid var(--vue-gold);
	overflow: hidden;
}

.vue-author-image-box .box-image img {
	object-fit: cover !important;
	object-position: center top !important;
}

.vue-author-image-box .box-text {
	padding: 24px 28px 28px !important;
	background: #ffffff;
}

.vue-author-image-box .box-text-inner h3,
.vue-author-name {
	font-size: 18.5px !important;
	font-weight: 800 !important;
	color: var(--vue-primary) !important;
	margin: 0 0 8px 0 !important;
}

.vue-author-image-box .box-text-inner p,
.vue-author-role {
	font-size: 13.5px !important;
	line-height: 1.65 !important;
	color: var(--vue-text-muted) !important;
	margin: 0 !important;
}

/* ============================================================
   6. QUỸ V-SKILL (THÔNG TIN CỤ THỂ)
   ============================================================ */
.vue-fund-amount-card {
	background-color: var(--vue-primary);
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	color: #ffffff;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(17, 71, 155, 0.22);
}

.vue-fund-amount-num {
	font-size: 46px;
	font-weight: 800;
	color: var(--vue-gold);
	line-height: 1.1;
	margin-bottom: 8px;
}

.vue-fund-amount-sub {
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
}

.vue-fund-intro-card {
	background-color: #e8effa;
	border-radius: 16px;
	padding: 26px 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vue-fund-intro-card p {
	font-size: 15px;
	line-height: 1.65;
	color: #1e293b;
	margin-bottom: 12px;
}

.vue-fund-intro-card p:last-child {
	margin-bottom: 0;
}

.vue-fund-box {
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 30px;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #edf2f7;
	height: 100%;
}

.vue-fund-box.top-gold {
	border-color: rgba(212, 160, 24, 0.45);
}

.vue-fund-box.top-blue {
	border-color: rgba(17, 71, 155, 0.25);
}

.vue-fund-box-title {
	font-size: 18.5px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.vue-fund-box p,
.vue-fund-box li {
	font-size: 14.5px;
	line-height: 1.65;
	color: #1e293b;
}

.vue-fund-box ul {
	margin: 0 0 14px 0 !important;
	padding: 0 0 0 16px !important;
	list-style-position: outside;
}

.vue-fund-box ul li {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
}

.vue-fund-notice {
	background-color: var(--vue-tint-bg);
	border: 1px solid var(--vue-tint-border);
	border-radius: 14px;
	padding: 20px 26px;
}

.vue-fund-notice-title {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--vue-primary);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.vue-fund-notice p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--vue-navy);
	font-style: italic;
	margin: 0;
}

.vue-pillar-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border-radius: 16px;
	padding: 28px 26px 26px;
	box-shadow: 0 12px 30px -8px rgba(17, 71, 155, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
	border: 1px solid #dbe7f7;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.vue-pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -10px rgba(17, 71, 155, 0.15), 0 6px 14px -3px rgba(15, 23, 42, 0.05);
	border-color: var(--vue-primary);
}

.vue-pillar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.vue-icon-sq {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--vue-primary) 0%, #1d5ed8 100%);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 8px 18px -4px rgba(17, 71, 155, 0.32);
	transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	margin-bottom: 0;
}

.vue-pillar-card:hover .vue-icon-sq {
	transform: scale(1.07);
	background: linear-gradient(135deg, var(--vue-navy) 0%, var(--vue-primary) 100%);
	box-shadow: 0 10px 22px -4px rgba(10, 42, 94, 0.38);
}

.vue-card-badge {
	background: #eaf2ff;
	color: var(--vue-primary);
	font-size: 12.5px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(17, 71, 155, 0.14);
	letter-spacing: 0.03em;
	transition: all 0.25s ease;
}

.vue-pillar-card:hover .vue-card-badge {
	background: var(--vue-gold);
	color: var(--vue-navy);
	border-color: var(--vue-gold);
}

.vue-pillar-title {
	font-size: 18.5px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 10px;
	line-height: 1.35;
}

.vue-pillar-desc {
	font-size: 14.5px;
	line-height: 1.65;
	color: #475569;
	margin: 0;
	flex: 1;
}

/* ============================================================
   7. BÁO CHÍ (VICUNI TRÊN BÁO CHÍ)
   ============================================================ */
.vue-press-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #e6edf7;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.vue-press-head {
	background: linear-gradient(180deg, #eef4fc 0%, #e3ecf8 100%);
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #d3e1f4;
	font-size: 23px;
	font-weight: 800;
	color: var(--vue-primary);
	padding: 0 20px;
	text-align: center;
}

.vue-press-logo {
	max-width: 175px;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.vue-press-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vue-press-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.vue-press-tag {
	background-color: var(--vue-tint-bg);
	color: var(--vue-primary);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.vue-press-date {
	font-size: 12px;
	color: var(--vue-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vue-press-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--vue-primary);
	line-height: 1.42;
	margin: 0 0 8px;
}

.vue-press-excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--vue-text-muted);
	margin: 0 0 16px;
	flex: 1;
}

.vue-press-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--vue-primary) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vue-press-link:hover {
	color: var(--vue-gold) !important;
}

/* ============================================================
   8. VIDEO & CƠ CẤU HỖ TRỢ
   ============================================================ */
.vue-video-frame,
.vue-video-section .col > .col-inner {
	background: #ffffff;
	padding: 8px !important;
	border-radius: 20px;
	box-shadow: var(--vue-shadow-lg);
	border: 1px solid #e2e8f0;
}

.vue-video-frame .video,
.vue-video-section .video {
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 0 !important;
	background: #0a2a5e;
}

.vue-video-section .video iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: 14px;
}

.vue-mech-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 32px 26px;
	text-align: center;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #edf2f7;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.vue-icon-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--vue-primary);
	color: #ffffff;
	font-size: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.vue-mech-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 8px;
}

.vue-mech-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--vue-text-muted);
	margin: 0;
}

/* ============================================================
   9. ĐIỀU KIỆN (NATIVE ACCORDION) & QUY TRÌNH XÉT DUYỆT
   ============================================================ */
.vue-panel-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 30px;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #edf2f7;
	height: 100%;
}

.vue-panel-heading {
	font-size: 18.5px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 18px;
}

/* Styling Thịnh Accordion Plugin ([thinh_accordion]) đồng bộ nhận diện VicUni */
.vue-panel-card .thinh-accordion-wrap {
	margin: 0 !important;
	font-family: var(--vue-font) !important;
}

.vue-panel-card .thinh-accordion-main-title {
	font-size: 18.5px !important;
	font-weight: 800 !important;
	color: var(--vue-primary) !important;
	margin: 0 0 18px !important;
	font-family: var(--vue-font) !important;
}

.vue-panel-card .thinh-accordion-item {
	border: 1.5px solid #dbe7f7 !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 12px rgba(17, 71, 155, 0.04) !important;
}

.vue-panel-card .thinh-accordion-item:hover {
	border-color: #a8c5eb !important;
}

.vue-panel-card .thinh-accordion-item.active {
	border-color: var(--vue-primary) !important;
	box-shadow: 0 8px 22px rgba(17, 71, 155, 0.10) !important;
}

.vue-panel-card .thinh-accordion-header {
	padding: 16px 20px !important;
}

.vue-panel-card .thinh-accordion-title {
	font-family: var(--vue-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

.vue-panel-card .thinh-accordion-item.active .thinh-accordion-title {
	color: var(--vue-primary) !important;
}

.vue-panel-card .thinh-accordion-icon,
.thinh-accordion-wrap .thinh-accordion-icon {
	font-size: 0 !important;
	color: var(--vue-primary) !important;
	background: #eaf2ff !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.vue-panel-card .thinh-accordion-icon::before,
.vue-panel-card .thinh-accordion-icon::after,
.thinh-accordion-wrap .thinh-accordion-icon::before,
.thinh-accordion-wrap .thinh-accordion-icon::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	background-color: currentColor !important;
	border-radius: 2px !important;
	transform: translate(-50%, -50%) !important;
}

.vue-panel-card .thinh-accordion-icon::before,
.thinh-accordion-wrap .thinh-accordion-icon::before {
	width: 12px !important;
	height: 2px !important;
}

.vue-panel-card .thinh-accordion-icon::after,
.thinh-accordion-wrap .thinh-accordion-icon::after {
	width: 2px !important;
	height: 12px !important;
}

.vue-panel-card .thinh-accordion-item.active .thinh-accordion-icon,
.thinh-accordion-wrap .thinh-accordion-item.active .thinh-accordion-icon {
	color: #ffffff !important;
	background: var(--vue-primary) !important;
	transform: rotate(45deg) !important;
}

.vue-panel-card .thinh-accordion-body {
	font-family: var(--vue-font) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: #334155 !important;
	border-top: 1px solid #d5e4f7 !important;
	padding: 16px 20px 18px !important;
}

/* 4-Step Vertical Timeline */
.vue-steps-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
}

.vue-step-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	position: relative;
}

.vue-step-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 32px;
	bottom: -16px;
	width: 1.5px;
	background-color: #9bb5e0;
}

.vue-step-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--vue-primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.vue-step-content h4 {
	font-size: 15px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 4px;
}

.vue-step-content p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--vue-text-muted);
	margin: 0;
}

/* ============================================================
   10. LỘ TRÌNH 6 BẬC CEFR (TABS & TABLE)
   ============================================================ */
.vue-course-tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 26px;
}

.vue-course-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 999px !important;
	font-size: 14.5px;
	font-weight: 700;
	text-transform: none !important;
	border: 1.5px solid #cbd5e1;
	background: #ffffff;
	color: var(--vue-primary);
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0 !important;
}

.vue-course-tab-btn.active,
.vue-course-tab-btn:hover {
	background: var(--vue-primary);
	border-color: var(--vue-primary);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(17, 71, 155, 0.22);
}

.vue-cefr-pane {
	display: none;
}

.vue-cefr-pane.active {
	display: block;
}

.vue-cefr-table-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #e2e8f0;
}

.vue-cefr-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.vue-cefr-table thead tr {
	background-color: var(--vue-primary);
	color: #ffffff;
}

.vue-cefr-table th {
	padding: 14px 18px;
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
	text-align: left;
	border: none;
	text-transform: none;
}

.vue-cefr-table th.text-right,
.vue-cefr-table td.text-right {
	text-align: right;
}

.vue-cefr-table tbody tr {
	border-bottom: 1px solid #e8eef6;
	background-color: #f8fafd;
	transition: background-color 0.15s ease;
}

.vue-cefr-table tbody tr:hover {
	background-color: #eef4fc;
}

.vue-cefr-table tbody tr:last-child {
	border-bottom: none;
}

.vue-cefr-table td {
	padding: 13px 18px;
	font-size: 14px;
	color: #0f172a;
	vertical-align: middle;
}

.vue-level-badge {
	display: inline-block;
	background-color: var(--vue-tint-bg);
	color: var(--vue-primary);
	font-size: 11.5px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
}

.vue-old-price {
	color: #64748b;
	text-decoration: line-through;
	font-size: 14px;
}

.vue-new-price {
	color: var(--vue-primary);
	font-weight: 800;
	font-size: 15px;
}

/* Class 1-1 & 1-10 Cards */
.vue-class-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 26px 28px;
	box-shadow: var(--vue-shadow-sm);
	border: 1px solid #edf2f7;
	height: 100%;
}

.vue-class-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.vue-class-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0;
}

.vue-class-badge {
	background-color: var(--vue-gold);
	color: var(--vue-navy);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.vue-class-sub {
	font-size: 13.5px;
	color: var(--vue-text-muted);
	margin-bottom: 14px;
}

.vue-class-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vue-class-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #1e293b;
	margin-bottom: 8px;
}

.vue-class-list li:last-child {
	margin-bottom: 0;
}

.vue-class-list i {
	color: var(--vue-primary);
	font-size: 14px;
}

/* ============================================================
   11. FORM ĐĂNG KÝ XÉT TUYỂN (CONTACT FORM 7)
   ============================================================ */
.vue-reg-card {
	max-width: 820px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(10, 42, 94, 0.11);
	border: 1px solid #e2e8f0;
}

.vue-reg-head {
	background-color: var(--vue-primary);
	padding: 26px 28px;
	text-align: center;
	color: #ffffff;
}

.vue-reg-head h2 {
	font-size: 25px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 6px;
}

.vue-reg-head p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.vue-reg-body {
	padding: 32px 36px 36px;
}

.vue-cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

.vue-cf7-col.vue-cf7-full {
	grid-column: 1 / -1;
}

.vue-cf7-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 6px;
}

.vue-cf7-label .req {
	color: #ef4444;
}

.vue-reg-body .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
}

.vue-reg-body input.vue-input,
.vue-reg-body select.vue-select,
.vue-reg-body textarea.vue-textarea {
	width: 100%;
	background-color: #f1f5f9 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	color: #0f172a !important;
	box-shadow: none !important;
	margin: 0 !important;
	height: 44px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vue-reg-body textarea.vue-textarea {
	height: auto !important;
	min-height: 96px;
	padding: 12px 14px !important;
}

.vue-reg-body input.vue-input:focus,
.vue-reg-body select.vue-select:focus,
.vue-reg-body textarea.vue-textarea:focus {
	background-color: #ffffff !important;
	border-color: var(--vue-primary) !important;
}

.vue-cf7-note {
	background-color: var(--vue-tint-bg);
	border: 1px solid var(--vue-tint-border);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--vue-primary);
}

.vue-cf7-note > strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 800;
}

.vue-cf7-note div strong {
	display: inline;
	font-weight: 800;
}

.vue-cf7-note p {
	margin: 0;
}

.vue-cf7-submit-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	margin-top: 8px;
	width: 100%;
}

.vue-cf7-submit-wrap .wpcf7-spinner {
	position: absolute !important;
	right: calc(50% - 150px);
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
}

.vue-reg-body input.vue-cf7-submit {
	background-color: var(--vue-primary) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	padding: 0 42px !important;
	height: 46px !important;
	line-height: 46px !important;
	border-radius: 999px !important;
	border: none !important;
	margin: 0 auto !important;
	display: inline-block !important;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(17, 71, 155, 0.24);
	transition: all 0.25s ease;
}

.vue-reg-body input.vue-cf7-submit:hover {
	background-color: var(--vue-primary-dark) !important;
	transform: translateY(-2px);
}

/* ============================================================
   12. ĐỘI NGŨ GIẢNG VIÊN VICUNI
   ============================================================ */
.vue-teacher-card {
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 12px 30px -8px rgba(17, 71, 155, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
	border: 1.5px solid #dbe7f7;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.vue-teacher-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 42px -10px rgba(17, 71, 155, 0.16), 0 6px 16px -3px rgba(15, 23, 42, 0.05);
	border-color: #aac6ed;
}

.vue-teacher-thumb {
	position: relative;
	width: 100%;
	height: 256px;
	overflow: hidden;
	background: #e8f0fc;
	border-bottom: 3.5px solid var(--vue-gold);
	padding: 0;
}

.vue-teacher-thumb p {
	display: none !important;
}

.vue-teacher-thumb .img,
.vue-teacher-thumb .img-inner,
.vue-teacher-thumb img {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.vue-teacher-card:hover .vue-teacher-thumb img {
	transform: scale(1.06);
}

.vue-teacher-cert {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(10, 42, 94, 0.85);
	backdrop-filter: blur(6px);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.vue-teacher-cert i {
	color: var(--vue-gold);
}

.vue-teacher-body {
	padding: 24px 20px 26px !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	gap: 0;
}

.vue-teacher-name {
	font-size: 17.5px !important;
	font-weight: 800 !important;
	color: var(--vue-primary) !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.35 !important;
}

.vue-teacher-role {
	display: block !important;
	font-size: 13.5px !important;
	color: #64748b !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	margin: 0 0 22px 0 !important;
}

.vue-teacher-bio {
	font-size: 13.5px !important;
	color: #475569 !important;
	line-height: 1.65 !important;
	margin: -6px 0 22px 0 !important;
}

.vue-teacher-score-wrap {
	margin-top: auto !important;
	padding-top: 2px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.vue-teacher-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(135deg, #f5b016 0%, var(--vue-gold) 100%);
	color: var(--vue-navy);
	font-size: 12.5px;
	font-weight: 800;
	padding: 8px 18px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(212, 160, 24, 0.25);
	line-height: 1.2;
}

/* SLIDER GIẢNG VIÊN ([vicuni_teachers layout="slider"]) */
.vue-teachers-slider-outer {
	position: relative;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.vue-teachers-slider-viewport {
	overflow: hidden;
	width: calc(100% + 20px);
	padding: 14px 0 26px 0;
	margin: -14px -10px -12px -10px;
	box-sizing: border-box;
}

.vue-teachers-slider-track {
	display: flex;
	align-items: stretch;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.vue-teachers-slide {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.vue-teachers-slide .vue-teacher-card {
	width: 100%;
	flex: 1;
}

.vue-teachers-slide .vue-teacher-name {
	font-size: 16px !important;
}

.vue-ts-nav {
	position: absolute;
	top: calc(50% - 20px);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff !important;
	color: var(--vue-primary) !important;
	border: 1.5px solid #cbd5e1 !important;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	z-index: 5;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 44px !important;
	font-size: 15px !important;
	transition: all 0.25s ease;
}

.vue-ts-nav:hover {
	background: var(--vue-primary) !important;
	color: #ffffff !important;
	border-color: var(--vue-primary) !important;
	box-shadow: 0 8px 22px rgba(17, 71, 155, 0.28) !important;
}

.vue-ts-prev {
	left: -22px;
}

.vue-ts-next {
	right: -22px;
}

.vue-ts-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.vue-ts-dot {
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	line-height: 10px !important;
	border-radius: 999px !important;
	background: #cbd5e1 !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: none !important;
}

.vue-ts-dot.active {
	width: 28px !important;
	min-width: 28px !important;
	background: var(--vue-primary) !important;
}

/* LƯỚI TẤT CẢ GIẢNG VIÊN ([vicuni_teachers layout="grid"]) */
.vue-teachers-grid-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	margin: 10px 0 24px 0;
}

.vue-teachers-grid-item {
	display: flex;
	flex-direction: column;
}

@media (max-width: 1024px) {
	.vue-teachers-slide {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.vue-teachers-grid-wrap {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.vue-teachers-slide {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.vue-teachers-grid-wrap {
		grid-template-columns: 1fr;
	}
	.vue-teachers-slider-outer {
		padding: 0;
	}
	.vue-ts-prev {
		left: -10px;
	}
	.vue-ts-next {
		right: -10px;
	}
}

/* ============================================================
   13. PRE-FOOTER & FOOTER UX BLOCK
   ============================================================ */
.absolute-footer {
	display: none !important;
}

.vue-prefooter-sec {
	border-bottom: 3px solid var(--vue-gold) !important;
}

.vue-prefooter-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vue-prefooter-icon {
	font-size: 28px;
	color: var(--vue-gold);
	flex-shrink: 0;
}

.vue-prefooter-text h4 {
	font-size: 15.5px;
	font-weight: 800;
	color: #ffffff !important;
	margin: 0 0 2px;
}

.vue-prefooter-text p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.vue-footer-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: #ffffff !important;
	margin: 16px 0 18px;
}

.vue-footer-badges {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin-bottom: 20px;
}

.vue-footer-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid rgba(212, 160, 24, 0.65);
	background: rgba(255, 255, 255, 0.03);
	color: #ffffff !important;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vue-footer-badge i {
	color: var(--vue-gold);
}

.vue-footer-socials {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vue-footer-socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.vue-footer-socials a:hover {
	background-color: var(--vue-gold);
	border-color: var(--vue-gold);
	color: var(--vue-navy) !important;
}

.vue-footer-heading,
.dark .vue-footer-heading {
	font-size: 15px;
	font-weight: 800;
	color: var(--vue-gold) !important;
	margin: 0 0 16px;
}

.vue-footer-links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.vue-footer-links li {
	margin: 0 0 10px !important;
}

.vue-footer-links a {
	color: #ffffff !important;
	font-size: 13.5px;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.vue-footer-links a:hover {
	color: var(--vue-gold) !important;
}

.vue-footer-contact-list {
	list-style: none !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

.vue-footer-contact-list li,
.vue-footer-contact-list li span {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.55;
	color: #ffffff !important;
	margin: 0 0 10px !important;
}

.vue-footer-contact-list li span {
	display: inline;
	margin: 0 !important;
}

.vue-footer-contact-list li i {
	color: var(--vue-gold);
	font-size: 14px;
	margin-top: 3px;
	flex-shrink: 0;
}

.vue-footer-contact-list li strong,
.vue-footer-contact-list li a {
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.vue-footer-newsletter {
	display: flex;
	align-items: center;
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	overflow: hidden;
	height: 44px;
	margin: 0 !important;
}

.vue-footer-newsletter input[type="email"] {
	flex: 1;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-size: 13px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	height: 42px !important;
}

.vue-footer-newsletter input[type="email"]::placeholder {
	color: #94a3b8 !important;
}

.vue-footer-newsletter button[type="submit"] {
	background-color: var(--vue-gold) !important;
	color: var(--vue-navy) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	border: none !important;
	border-radius: 0 999px 999px 0 !important;
	padding: 0 22px !important;
	height: 44px !important;
	line-height: 44px !important;
	margin: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
}

.vue-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 22px;
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	font-size: 12.5px;
	color: #94a3b8;
}

.vue-footer-bottom p {
	margin: 0 0 4px;
}

.vue-footer-policy-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.vue-footer-policy-links a {
	color: #e2e8f0 !important;
	text-decoration: none !important;
	font-weight: 500;
}

.vue-footer-policy-links a:hover {
	color: var(--vue-gold) !important;
}

/* ============================================================
   14. FLOATING CONTACT BUTTONS (THINH BUTTON CONTACT)
   ============================================================ */
.tbc-container.tbc-pos-right {
	right: 20px !important;
	bottom: 20px !important;
}

.tbc-item-phone .tbc-ring {
	display: none !important;
}

.tbc-item-phone .tbc-circle svg {
	fill: var(--vue-navy) !important;
}

/* ============================================================
   15. RESPONSIVE DESIGN
   ============================================================ */
@media (max-width: 849px) {
	.vue-hero-title {
		font-size: 28px;
	}
	.vue-sec-title {
		font-size: 25px;
	}
	.vue-cf7-grid {
		grid-template-columns: 1fr;
	}
	.vue-cefr-table-card {
		overflow-x: auto;
	}
	.vue-cefr-table {
		min-width: 680px;
	}
	.vue-reg-body {
		padding: 24px 20px;
	}
}

/* ============================================================
   16. IMPECCABLE & TASTE SKILL CRAFT FLOOR REFINEMENTS
   ============================================================ */
::selection {
	background-color: var(--vue-primary);
	color: #ffffff;
}

:focus-visible {
	outline: 2px solid var(--vue-gold);
	outline-offset: 2px;
}

.vue-cefr-table td,
.vskill-notice-table td,
.vue-stat-num,
.vue-fund-amount-num,
.vue-step-num,
.vue-card-badge,
.vskill-notice-hotline-pill {
	font-variant-numeric: tabular-nums;
}

/* Tactile button micro-interactions (Taste Skill rule 5) */
.button,
.vue-btn-primary,
.vue-btn-outline,
.vue-course-tab-btn,
.vue-fund-banner-btn,
.vue-acta-btn,
.vskill-notice-hotline-pill,
.vue-reg-body input.vue-cf7-submit {
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

.button:active,
.vue-btn-primary:active,
.vue-btn-outline:active,
.vue-course-tab-btn:active,
.vue-fund-banner-btn:active,
.vue-acta-btn:active,
.vskill-notice-hotline-pill:active,
.vue-reg-body input.vue-cf7-submit:active {
	transform: translateY(1px) !important;
}

/* Linked card & photo quiet micro-animations */
.box-blog-post {
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.box-blog-post:hover {
	transform: translateY(-2px);
}

.box-blog-post .box-image img {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.box-blog-post:hover .box-image img {
	transform: scale(1.028);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   17. UPGRADED SECTION 2: TỔNG QUAN QUỸ V-SKILL (.vue-overview-card)
   ============================================================ */
.vue-overview-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 36px 40px;
	box-shadow: 0 18px 46px -12px rgba(10, 42, 94, 0.11), 0 4px 14px -2px rgba(15, 23, 42, 0.04);
	border: 1px solid #dbe7f7;
	position: relative;
	overflow: hidden;
}

.vue-overview-lead {
	padding-bottom: 24px;
	margin-bottom: 26px;
	border-bottom: 1px solid #e2e8f0;
}

.vue-overview-badge-wrap {
	margin-bottom: 14px;
}

.vue-overview-decree {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #eff6ff;
	color: var(--vue-primary);
	border: 1px solid #bfdbfe;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
}

.vue-overview-decree i {
	color: var(--vue-gold);
}

.vue-overview-intro {
	font-size: 16px;
	line-height: 1.72;
	color: #1e293b;
	margin: 0;
}

.vue-overview-intro strong {
	color: var(--vue-navy);
}

.vue-overview-grid {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 32px;
	align-items: stretch;
}

.vue-overview-col {
	display: flex;
	flex-direction: column;
}

.vue-overview-subhead {
	font-size: 17px;
	font-weight: 800;
	color: var(--vue-primary);
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.vue-overview-subhead i {
	color: var(--vue-gold);
}

.vue-overview-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vue-overview-list li {
	position: relative;
	padding: 12px 16px 12px 36px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.62;
	color: #334155;
	margin: 0 !important;
}

.vue-overview-list li::before {
	content: "\f058";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 14px;
	top: 14px;
	color: var(--vue-primary);
	font-size: 14px;
}

.vue-overview-list li strong {
	color: var(--vue-navy);
}

.vue-overview-partner-box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.vue-overview-partner-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.vue-op-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #e8f0fe;
	color: var(--vue-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.vue-overview-partner-item strong {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--vue-navy);
	margin-bottom: 4px;
}

.vue-overview-partner-item p {
	font-size: 13.5px;
	line-height: 1.58;
	color: #475569;
	margin: 0;
}

.vue-fund-banner-cta {
	margin-top: auto;
	background: linear-gradient(135deg, var(--vue-navy) 0%, var(--vue-primary) 100%);
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-shadow: 0 12px 28px -6px rgba(10, 42, 94, 0.35);
	border: 1px solid rgba(212, 160, 24, 0.4);
}

.vue-fund-banner-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.vue-fund-banner-val {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--vue-gold);
	line-height: 1.2;
}

.vue-fund-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vue-gold);
	color: var(--vue-navy) !important;
	font-size: 13.5px;
	font-weight: 800;
	padding: 11px 18px;
	border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(212, 160, 24, 0.3);
}

.vue-fund-banner-btn:hover {
	background: var(--vue-gold-hover);
	transform: translateY(-2px);
}

@media (max-width: 849px) {
	.vue-overview-card {
		padding: 24px 20px;
	}
	.vue-overview-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.vue-fund-banner-cta {
		flex-direction: column;
		text-align: center;
	}
	.vue-fund-banner-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   18. REDESIGNED SECTION 9: ĐIỀU KIỆN & QUY TRÌNH XÉT DUYỆT
   ============================================================ */
.vue-approval-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px 30px !important;
	border-radius: 16px !important;
	border: 1px solid #dbe7f7 !important;
	box-shadow: 0 14px 36px -10px rgba(10, 42, 94, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
	background: #ffffff !important;
}

.vue-approval-card .thinh-accordion-item.active .thinh-accordion-header {
	background: #eff6ff !important;
}

.vue-approval-card .thinh-accordion-content {
	background: #ffffff !important;
}

.vue-approval-card-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e2e8f0;
}

.vue-approval-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--vue-primary) 0%, #1e5fd9 100%);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
	box-shadow: 0 8px 18px -4px rgba(17, 71, 155, 0.3);
}

.vue-approval-card-icon.is-gold {
	background: linear-gradient(135deg, #f5b016 0%, #d4920a 100%);
	color: var(--vue-navy);
	box-shadow: 0 8px 18px -4px rgba(212, 160, 24, 0.35);
}

.vue-approval-card-head .vue-panel-heading {
	font-size: 21px;
	margin: 0 0 4px;
	line-height: 1.25;
}

.vue-panel-sub {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

.vue-approval-card .thinh-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vue-approval-card .thinh-accordion-item {
	margin-bottom: 0 !important;
	background: #f8fafd !important;
	transition: all 0.25s ease !important;
}

.vue-approval-card .thinh-accordion-item.active {
	background: #ffffff !important;
}

.vue-approval-guarantee {
	margin-top: 20px;
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.vue-ag-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--vue-gold);
	color: var(--vue-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
}

.vue-ag-text strong {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: #78350f;
	margin-bottom: 3px;
}

.vue-ag-text p {
	font-size: 13px;
	line-height: 1.55;
	color: #92400e;
	margin: 0;
}

/* Enhanced 4-Step Cards inside Right Column */
.vue-approval-card .vue-steps-list {
	gap: 14px;
}

.vue-approval-card .vue-step-item {
	background: #f8fafd;
	border: 1.5px solid #e2ecf9;
	border-radius: 14px;
	padding: 14px 16px;
	gap: 14px;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.vue-approval-card .vue-step-item:hover {
	background: #ffffff;
	border-color: var(--vue-primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(17, 71, 155, 0.12);
}

.vue-approval-card .vue-step-item:not(:last-child)::after {
	left: 34px;
	top: auto;
	bottom: -16px;
	height: 16px;
	width: 2px;
	background: #9bb5e0;
	z-index: 1;
}

.vue-step-marker {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.vue-approval-card .vue-step-num {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--vue-primary) 0%, var(--vue-navy) 100%);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(17, 71, 155, 0.24);
}

.vue-approval-card .vue-step-content {
	flex: 1;
	min-width: 0;
}

.vue-step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 5px;
}

.vue-step-top h4 {
	font-size: 15px;
	font-weight: 800;
	color: var(--vue-navy);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 7px;
}

.vue-step-top h4 i {
	color: var(--vue-primary);
	font-size: 14px;
}

.vue-step-badge {
	background: #e8f0fe;
	color: var(--vue-primary);
	font-size: 11px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.vue-approval-cta-bar {
	margin-top: 20px;
	background: linear-gradient(135deg, var(--vue-navy) 0%, var(--vue-primary) 100%);
	border-radius: 14px;
	padding: 15px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #ffffff;
}

.vue-acta-info span {
	display: block;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.82);
}

.vue-acta-info strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--vue-gold);
}

.vue-acta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--vue-gold);
	color: var(--vue-navy) !important;
	font-size: 13px;
	font-weight: 800;
	padding: 9px 16px;
	border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
}

.vue-acta-btn:hover {
	background: var(--vue-gold-hover);
	transform: translateY(-2px);
}

/* ============================================================
   19. SECTION BẢNG GIÁ THÔNG BÁO NĂM 2026 (100% REPLICA OF POSTER)
   ============================================================ */
.vskill-notice-section {
	padding-top: 56px;
	padding-bottom: 64px;
	background-color: #e9f0f6;
}

.vskill-notice-poster {
	background-color: #f2f6f9;
	background-image: radial-gradient(rgba(12, 60, 96, 0.03) 1px, transparent 0);
	background-size: 18px 18px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 22px 54px -12px rgba(10, 42, 94, 0.18), 0 4px 16px rgba(15, 23, 42, 0.06);
	border: 1.5px solid #c8dae6;
}

/* Top Partner Bar */
.vskill-notice-partners {
	background: #ffffff;
	padding: 16px 22px 18px;
	border-bottom: 2px solid #d5e3ec;
	display: grid;
	grid-template-columns: 1.05fr 1.15fr 2.4fr 1.15fr 1.15fr;
	align-items: stretch;
}

.vskill-np-group {
	padding: 0 14px;
	border-right: 1.5px solid #cbd5e1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.vskill-np-group:first-child {
	padding-left: 4px;
}

.vskill-np-group:last-child {
	border-right: none;
	padding-right: 4px;
}

.vskill-np-label {
	display: block;
	font-size: 9.5px;
	font-weight: 800;
	color: #334155;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
	text-align: center;
	white-space: nowrap;
}

.vskill-np-logos {
	width: 100%;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vskill-np-logos.single img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
}

.vskill-np-logos.grid-3x2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 12px;
	align-items: center;
	justify-items: center;
}

.vskill-np-logos.grid-3x2 img {
	max-height: 34px;
	width: auto;
	object-fit: contain;
}

.vskill-np-logos.stack-2 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.vskill-np-logos.stack-2 img {
	max-height: 34px;
	width: auto;
	object-fit: contain;
}

/* Poster Main Body */
.vskill-notice-body {
	padding: 32px 36px 28px;
}

.vskill-notice-title-wrap {
	text-align: center;
	margin-bottom: 22px;
}

.vskill-notice-main-title {
	font-family: Georgia, 'Times New Roman', Times, serif !important;
	font-size: 42px;
	font-weight: 800;
	color: #0e2439;
	letter-spacing: 0.06em;
	line-height: 1.15;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.vskill-notice-sub-line {
	font-size: 21px;
	font-weight: 800;
	color: #162f47;
	margin: 0 0 4px;
	line-height: 1.35;
}

.vskill-notice-province {
	font-size: 21px;
	font-weight: 800;
	color: #162f47;
	margin: 0 auto;
	padding-bottom: 10px;
	max-width: 580px;
	border-bottom: 1.5px solid #2c465e;
	line-height: 1.35;
}

.vskill-notice-framework-heading {
	font-family: Georgia, 'Times New Roman', Times, serif !important;
	font-size: 19px;
	font-weight: 800;
	color: #0e2439;
	line-height: 1.42;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Section Bars I, II, III */
.vskill-notice-bar {
	background-color: #0b3d5c;
	color: #ffffff;
	padding: 9px 24px;
	font-size: 16.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 14px;
	border-radius: 2px;
}

/* Left Arrow Badge [ » ] */
.vskill-arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 28px;
	background-color: #0b3d5c;
	border-radius: 3px;
	position: relative;
	flex-shrink: 0;
}

.vskill-arrow-badge i {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.vskill-arrow-badge i::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 8px;
	background: #ffffff;
	box-shadow: -4px 0 0 #ffffff;
	margin-left: 4px;
}

.vskill-arrow-badge i::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #ffffff;
	margin-left: 2px;
}

/* Pricing Tables I (65% & 70%) */
.vskill-table-scroll {
	width: 100%;
	overflow-x: auto;
}

.vskill-notice-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	table-layout: auto;
}

.vskill-notice-table th,
.vskill-notice-table td {
	padding: 8px 10px;
	text-align: center;
	vertical-align: middle;
}

.vskill-notice-table th.col-arrow,
.vskill-notice-table td.cell-arrow {
	background: transparent !important;
	border: none !important;
	width: 48px;
	padding: 0 10px 0 0;
}

.vskill-notice-table thead th:not(.col-arrow) {
	background-color: #0b3d5c;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	border: 1px solid #7fa6bf;
	padding: 10px 8px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.vskill-notice-table tbody td:not(.cell-arrow) {
	background-color: #dfedf3;
	border: 1px solid #88aec6;
	color: #0d2b45;
	font-size: 14.5px;
	font-weight: 700;
	transition: background-color 0.18s ease;
}

.vskill-notice-table tbody tr.vskill-pkg-row {
	cursor: pointer;
}

.vskill-notice-table tbody tr.vskill-pkg-row:hover td.cell-course {
	background-color: #cde3ee;
}

.vskill-notice-table td.cell-route {
	font-size: 17px;
	font-weight: 800;
	color: #0b3d5c;
	line-height: 1.22;
	width: 118px;
}

.vskill-notice-table td.cell-course {
	font-size: 14px;
	font-weight: 700;
	color: #16354d;
	padding: 7px 12px;
	width: 168px;
}

.vskill-notice-table td.cell-sessions {
	font-size: 15px;
	font-weight: 800;
	width: 86px;
}

.vskill-notice-table td.cell-list-price {
	font-size: 15px;
	font-weight: 800;
	width: 136px;
	white-space: nowrap;
}

.vskill-notice-table td.cell-support {
	font-size: 26px;
	font-weight: 800;
	color: #0b3d5c;
	width: 100px;
}

.vskill-notice-table td.cell-promo-price {
	font-size: 15px;
	font-weight: 800;
	color: #0b3d5c;
	width: 128px;
	white-space: nowrap;
}

.vskill-notice-table td.cell-per-session {
	font-size: 15px;
	font-weight: 800;
	width: 118px;
	white-space: nowrap;
}

.vskill-notice-table td.cell-commit {
	width: 136px;
	padding: 14px 10px;
	background-color: #dfedf3;
}

.vskill-commit-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
}

.vskill-commit-title {
	font-size: 16px;
	font-weight: 800;
	color: #0b3d5c;
	line-height: 1.45;
	text-transform: uppercase;
}

.vskill-commit-class {
	font-size: 14px;
	font-weight: 800;
	color: #0b3d5c;
	line-height: 1.35;
}

.vskill-commit-class span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Part II: Đối tượng được Quỹ hỗ trợ */
.vskill-target-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vskill-target-row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.vskill-target-row .vskill-arrow-badge {
	height: auto;
	min-height: 38px;
}

.vskill-target-box {
	flex: 1;
	background-color: #dfedf3;
	padding: 9px 16px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 15.5px;
	color: #162f47;
	display: flex;
	align-items: center;
	line-height: 1.45;
}

/* Part III: Đơn vị triển khai */
.vskill-unit-wrap {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.vskill-unit-side-arrow {
	display: flex;
	align-items: stretch;
}

.vskill-unit-side-arrow .vskill-arrow-badge {
	height: 100%;
	min-height: 120px;
}

.vskill-unit-box {
	flex: 1;
	background-color: #dfedf3;
	padding: 16px 22px 18px;
}

.vskill-unit-title {
	font-family: Georgia, 'Times New Roman', Times, serif !important;
	font-size: 16px;
	font-weight: 800;
	color: #0e2439;
	margin: 0 0 10px;
}

.vskill-unit-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 28px;
}

.vskill-unit-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.vskill-unit-list li {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #162f47;
	margin: 0 0 6px !important;
	position: relative;
	padding-left: 14px;
}

.vskill-unit-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 900;
	color: #0e2439;
}

/* Bottom Right CTA */
.vskill-notice-footer {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
}

.vskill-notice-reg-label {
	font-size: 17px;
	font-weight: 800;
	color: #0b3d5c !important;
	text-decoration: none !important;
	padding-right: 12px;
}

.vskill-notice-reg-label:hover {
	color: var(--vue-primary) !important;
	text-decoration: underline !important;
}

.vskill-notice-hotline-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(90deg, #ff4b12 0%, #ff6a00 100%);
	color: #ffffff !important;
	font-size: 21px;
	font-weight: 800;
	padding: 8px 24px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 8px 22px rgba(255, 75, 18, 0.32);
}

.vskill-notice-hotline-pill:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(255, 75, 18, 0.42);
}

@media (max-width: 980px) {
	.vskill-notice-partners {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.vskill-np-group {
		border-right: none;
		border-bottom: 1px solid #e2e8f0;
		padding-bottom: 12px;
	}
	.vskill-np-group.vskill-np-academic {
		grid-column: 1 / -1;
	}
	.vskill-notice-body {
		padding: 24px 16px;
	}
	.vskill-notice-main-title {
		font-size: 30px;
	}
	.vskill-notice-sub-line,
	.vskill-notice-province {
		font-size: 17px;
	}
	.vskill-notice-framework-heading {
		font-size: 15.5px;
	}
	.vskill-notice-table {
		min-width: 780px;
	}
	.vskill-unit-cols {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ============================================================
   20. FORM ALERTS & SECURITY BADGE
   ============================================================ */
.vue-alert {
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.vue-alert-success {
	background: #f0fdf4;
	border: 1.5px solid #22c55e;
	color: #15803d;
}

.vue-alert-error {
	background: #fef2f2;
	border: 1.5px solid #ef4444;
	color: #b91c1c;
}

.vue-security-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
}

.vue-security-note i {
	color: #16a34a;
}

/* ============================================================
   21. UNIFORM 3-COLUMN PRESS & NEWS CARDS (.vue-news-grid)
   ============================================================ */
.vue-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	align-items: stretch;
}

.vue-news-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #dbe7f7;
	box-shadow: 0 10px 26px -8px rgba(10, 42, 94, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.vue-news-card:hover {
	transform: translateY(-4px);
	border-color: var(--vue-primary);
	box-shadow: 0 20px 42px -10px rgba(17, 71, 155, 0.16), 0 6px 14px -3px rgba(15, 23, 42, 0.05);
}

.vue-news-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e8f0fc;
	flex-shrink: 0;
}

.vue-news-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: 0 !important;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vue-news-card:hover .vue-news-thumb img {
	transform: scale(1.04);
}

.vue-news-cat-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(10, 42, 94, 0.88);
	backdrop-filter: blur(6px);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	z-index: 2;
}

.vue-news-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vue-news-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: #64748b;
	font-weight: 500;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

.vue-news-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vue-news-meta i {
	color: var(--vue-primary);
	font-size: 13px;
}

.vue-news-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.42 !important;
	margin: 0 0 10px !important;
	color: #0f172a !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.84em;
}

.vue-news-title a {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.vue-news-card:hover .vue-news-title a {
	color: var(--vue-primary) !important;
}

.vue-news-excerpt {
	font-size: 14px;
	line-height: 1.62;
	color: #475569;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.vue-news-footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #edf2f7;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vue-news-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--vue-primary) !important;
	text-decoration: none !important;
	transition: gap 0.2s ease, color 0.2s ease;
}

.vue-news-card:hover .vue-news-more {
	color: var(--vue-navy) !important;
	gap: 10px;
}

.vue-news-more i {
	font-size: 12px;
	color: var(--vue-gold);
}

@media (max-width: 980px) {
	.vue-news-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.vue-news-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.vue-news-title {
		min-height: 0;
	}
}