/**
 * Hero Banner (trang chủ) — LAYOUT MỚI, 2 phần:
 *  1) .hero__stage: ảnh nền + overlay + content căn GIỮA (subtitle → heading → desc → CTA).
 *     Desktop: toàn bộ Hero (stage + Stats) nhận phần viewport còn lại sau Header đặc;
 *     tablet/mobile cao theo nội dung.
 *  2) .hero__stats: card 4 cột STRADDLE — nửa trên đè đáy stage, nửa dưới tràn xuống nền
 *     dưới (chỉ desktop; tablet/mobile card nằm bình thường dưới stage). Nội dung căn giữa.
 *
 * Giá trị --hero-* do inc/template-functions.php emit inline (wp_add_inline_style) — file
 * này KHÔNG hardcode giá trị người dùng đổi được trong Customizer. Header trang chủ là
 * Header đặc có chiều cao thực; khoảng Header được tính riêng khỏi Hero.
 */

.hero {
	position: relative;
	color: #ffffff;
	--hero-viewport-height: 100vh;
}

/* Dùng viewport động khi trình duyệt hỗ trợ, để resize/orientation không giữ chiều cao cũ. */
@supports (height: 100dvh) {
	.hero {
		--hero-viewport-height: 100dvh;
	}
}

/* ==================== STAGE (ảnh nền + content) ==================== */
.hero__stage {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-areas: "hero-stack";
	align-items: center;
	overflow: hidden;
	background-color: var(--hero-fallback-bg, #ffffff);
}

@media (min-width: 993px) {
	.hero {
		display: block;
	}
}

/* ==================== BACKGROUND ==================== */
.hero__background {
	grid-area: hero-stack;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__picture {
	display: contents;
}

.hero__bg-image {
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

/* ==================== OVERLAYS (ĐÃ LOẠI BỎ THEO YÊU CẦU) ==================== */
.hero__stage::before,
.hero__stage::after,
.hero__overlay {
	display: none !important;
}

@media (max-width: 992px) {
	.hero__content-panel {
		max-width: 100%;
		padding: 28px;
		background: #00000033;
	}
}

@media (max-width: 767px) {
	.hero__content-panel {
		padding: 20px 16px;
	}
}

/* ==================== INNER / CONTENT ==================== */
.hero__inner {
	grid-area: hero-stack;
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	padding-block: var(--hero-padding-top, 60px) var(--hero-padding-bottom, 60px);
}

.hero__content {
	/* Content căn TRÁI, tập trung vào panel trắng. */
	max-width: 650px;
	text-align: left;
	display: grid;
	gap: 24px;
}

.hero__support-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	color: #475569;
	font-size: 0.95rem;
}

.hero__support-delimiter {
	color: #9CA3AF;
}

.hero__support-item {
	font-weight: 500;
}

.hero__content-panel .hero__subtitle {
	color: var(--hero-subtitle-color, #ffffff);
}

.hero__content-panel .hero__heading {
	color: var(--hero-heading-color, #ffffff);
	font-size: 60px;
}

.hero__content-panel .hero__description {
	color: var(--hero-description-color, #ffffff);
}

.hero__content-panel .hero__btn--primary {
	color: #ffffff;
}

.hero__content-panel .hero__btn--secondary {
	background-color: #ffffff;
	color: #046AB5;
	border-color: #046AB5;
}

.hero__content-panel .hero__btn--secondary:hover,
.hero__content-panel .hero__btn--secondary:focus-visible {
	background-color: rgba(4, 106, 181, 0.08);
}

.hero__subtitle {
	/* Eyebrow → Heading: 24px (nhịp cụm text). */
	margin-bottom: 18px;
	color: var(--hero-subtitle-color, #ffffff);
	font-size: clamp(0.875rem, calc(28 * var(--fig1px)), 1rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.35;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero__heading {
	margin-bottom: 24px;
	color: var(--hero-heading-color, #ffffff);
	font-size: clamp(2.75rem, calc(7vw + 1rem), 5rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__description {
	/* Căn trái, tách CTA 32px. */
	margin: 0 0 32px;
	max-width: 520px;
	color: var(--hero-description-color, rgba(255, 255, 255, 0.95));
	font-size: clamp(1rem, calc(18 * var(--fig1px)), var(--hero-description-size, 20px));
	line-height: 1.85;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Giới hạn số dòng description (không kéo dài quá). */
.hero__description--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hero-description-max-lines, 3);
	overflow: hidden;
}

/* ==================== CTA BUTTONS (căn giữa) ==================== */
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* CTA căn trái theo content. */
	gap: 20px;
	padding-bottom: 60px;
	/* Cách stats card 8px (desktop) khi straddle. */
}

.hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border-radius: var(--hero-btn-radius, 10px);
	font-size: clamp(1rem, calc(20 * var(--fig1px)), 1.125rem);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__btn--primary {
	background-color: #0D47FF;
	color: #ffffff;
	box-shadow: 0 18px 32px rgba(13, 71, 255, 0.22);
}

.hero__btn--primary:hover,
.hero__btn--primary:focus-visible {
	background-color: var(--hero-btn-primary-hover-bg, #0579CC);
	transform: translateY(-2px);
}

.hero__btn--secondary {
	background-color: #ffffff;
	border: 1px solid #046AB5;
	color: #046AB5;
	box-shadow: inset 0 0 0 1px rgba(13, 71, 255, 0.14);
}

.hero__btn--secondary:hover,
.hero__btn--secondary:focus-visible {
	background-color: rgba(13, 71, 255, 0.08);
	border-color: #046AB5;
	transform: translateY(-2px);
}

/* ==================== STATS CARD (STRADDLE) ==================== */
.hero__stats-wrap {
	position: relative;
	z-index: 3;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	margin-top: 40px;
}

@media (min-width: 992px) {
	.hero__stats-wrap {
		margin-top: -100px;
	}
}

.hero__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	padding: clamp(28px, calc(40 * var(--fig1px)), 40px) clamp(24px, calc(64 * var(--fig1px)), 64px);
	background-color: #f2fffde3;
	border-radius: 32px;
	/* border: 1px solid rgba(15, 23, 42, 0.08); */
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
	border: 1px solid var(--color-border, #e0e0e0);
}

.hero__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Layout mới: nội dung mỗi cột căn GIỮA. */
	text-align: center;
	gap: 10px;
}

/* Divider dọc mảnh giữa các cột — chỉ desktop (ẩn ở ≤991 khi về 2 cột). */
.hero__stat:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: calc(var(--space-lg) / -2);
	width: 1px;
	background-color: rgba(15, 23, 42, 0.08);
}

.hero__stat-icon {
	margin: 0 auto 2px;
}

.hero__stat-number {
	margin: 0;
	color: #046AB5;
	font-size: clamp(2rem, calc(70 * var(--fig1px)), 4rem);
	font-weight: 800;
	line-height: 1;
}

.hero__stat-badge {
	display: inline-flex;
	align-self: center;
	padding: 6px 20px;
	border-radius: 10px;
	background-color: rgba(13, 71, 255, 0.08);
	color: #046AB5;
	font-size: clamp(0.8125rem, calc(20 * var(--fig1px)), 1.25rem);
	font-weight: 600;
}

.hero__stat-description {
	margin: 0 auto;
	max-width: 256px;
	color: #475569;
	font-size: clamp(0.8125rem, calc(16 * var(--fig1px)), 1rem);
	line-height: 1.6;
}

/* ==================== ANIMATION (fade-up + stagger + scale) ==================== */
/* Chỉ áp dụng khi JS gắn .js-hero-stats-ready (progressive enhancement — JS lỗi/chặn thì
   stats vẫn hiện đầy đủ, không CLS xấu vì opacity/transform giữ nguyên vị trí). */
.js-hero-stats-ready .hero__stat {
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition:
		opacity var(--hero-animation-duration, 600ms) ease-out,
		transform var(--hero-animation-duration, 600ms) ease-out;
	transition-delay: calc(var(--stagger-index, 0) * var(--hero-animation-delay, 100ms));
}

.js-hero-stats-ready .hero__stat.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.js-hero-stats-ready .hero__stat {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==================== RESPONSIVE ==================== */
/* Tablet: stats về 2 cột, bỏ divider dọc; Hero cao theo nội dung. */
@media (max-width: 992px) {
	.hero__inner {
		padding-block: clamp(35px, 6vw, 50px) 35px;
	}

	.hero__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.hero__stat:not(:last-child)::after {
		display: none;
	}
}

/* Mobile: nhịp text gọn hơn, CTA/nút full width, card 2 cột padding gọn. */
@media (max-width: 599px) {
	.hero__inner {
		padding-block: 30px 25px;
	}

	.hero__content {
		gap: 12px;
	}

	.hero__subtitle {
		font-size: 0.8125rem;
		margin-bottom: 8px;
		letter-spacing: 0.1em;
	}

	.hero__heading {
		font-size: clamp(1.85rem, 8vw, 2.35rem);
		margin-bottom: 12px;
		line-height: 1.15;
	}

	.hero__description {
		font-size: 0.9375rem;
		line-height: 1.55;
		margin-bottom: 18px;
	}

	.hero__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-bottom: 0px;
	}

	.hero__btn {
		width: 100%;
		padding: 13px 20px;
		font-size: 0.95rem;
	}

	.hero__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
		padding: 20px;
	}
}