/**
 * Tom Luxury — Section: Hero
 * -----------------------------------------------------------------------------
 * Chi dung design token trong tokens.css. Khong hex truc tiep, khong !important.
 * Nap sau components.css (enqueue.php) nen moi rule o day thang rule dung chung
 * co cung do dac hieu.
 *
 * Bien dieu khien do PHP dat qua inline custom property (tinh tu thiet lap admin):
 *   --tl-hero-vh        chieu cao hero theo % chieu cao man hinh (so, khong don vi)
 *   --tl-hero-overlay   do dam lop phu toi (0..0.92)
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. KHUNG SECTION
 * ========================================================================== */
.tl-hero {
	--tl-hero-vh: 86;
	--tl-hero-overlay: .58;
	--tl-hero-cw: clamp(320px, 58vw, 820px);
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	isolation: isolate;
}

/* =============================================================================
 * 2. BANG CHUYEN
 * ========================================================================== */
.tl-hero__track {
	--tl-gap: 0px;
	--tl-slide-visible: 1;
	--tl-slide-visible-md: 1;
	--tl-slide-visible-sm: 1;
	margin: 0;
	padding: 0;
}

.tl-hero__track--single {
	display: block;
	overflow: visible;
}

/* =============================================================================
 * 3. SLIDE
 * ========================================================================== */
.tl-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	/* min-height chu KHONG height: tieu de tieng Viet 3 dong + 2 nut co the cao
	   hon 86vh tren man hinh thap, dung `height` se cat mat nut CTA. */
	min-height: max(480px, calc(var(--tl-hero-vh, 86) * 1vh));
	max-height: none;
	overflow: hidden;
	background-color: var(--color-primary);
}

/* Thanh dieu huong tren dien thoai lam 100vh nhay len xuong — dung svh khi co. */
@supports (height: 1svh) {

	.tl-hero__slide {
		height: calc(var(--tl-hero-vh, 86) * 1svh);
	}
}

/* =============================================================================
 * 4. MEDIA NEN
 * ========================================================================== */
.tl-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--color-primary);
}

.tl-hero__picture {
	display: block;
}

.tl-hero__img,
.tl-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	border: 0;
}

.tl-hero__video {
	z-index: 1;
}

/* Lop phu chuyen tu trai sang phai. Ban du phong dung token co san. */
.tl-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		var(--color-overlay) 0%,
		var(--color-overlay-soft) 52%,
		transparent 100%
	);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {

	.tl-hero__overlay {
		background-image: linear-gradient(
			90deg,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 100%), transparent) 0%,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 88%), transparent) 34%,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 42%), transparent) 68%,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 10%), transparent) 100%
		);
	}
}

.tl-hero--center .tl-hero__overlay {
	background-image: linear-gradient(
		180deg,
		var(--color-overlay-soft) 0%,
		var(--color-overlay) 100%
	);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {

	.tl-hero--center .tl-hero__overlay {
		background-image: linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 46%), transparent) 0%,
			color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 92%), transparent) 100%
		);
	}
}

/* =============================================================================
 * 5. NOI DUNG
 * ========================================================================== */
.tl-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Dai cam ket (.tl-trust--overlap) noi de len ~60px day hero. Chua san
	   khoang trong o duoi de the do khong bao gio che nut CTA. */
	padding-bottom: clamp(72px, 9vh, 128px);
}

@media (max-width: 849px) {
	.tl-hero__inner {
		padding-bottom: 0;
	}
}

.tl-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	max-width: var(--tl-hero-cw);
	animation: tl-hero-rise var(--dur-slow) var(--ease-out) both;
}

/* Be rong khoi chu co gian theo man hinh — khong can cat nho theo tung breakpoint. */
.tl-hero--w-sm {
	--tl-hero-cw: clamp(300px, 44vw, 620px);
}

.tl-hero--w-md {
	--tl-hero-cw: clamp(320px, 58vw, 820px);
}

.tl-hero--w-lg {
	--tl-hero-cw: clamp(340px, 68vw, 980px);
}

.tl-hero--center .tl-hero__content {
	align-items: center;
	max-width: min(calc(var(--tl-hero-cw) + 140px), 100%);
	margin-inline: auto;
	text-align: center;
}

@keyframes tl-hero-rise {

	from {
		transform: translate3d(0, 18px, 0);
	}

	to {
		transform: none;
	}
}

.tl-hero__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-gold-light);
}

.tl-hero__title {
	margin: 0;
	font-family: var(--font-heading);
	/* Mockup dat tieu de hero ~46-52px o 1440, khong phai 84px cua
	   --font-size-hero. Token van giu nguyen cho noi khac dung. */
	font-size: clamp(2.25rem, 3.6vw, 3.5rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: .005em;
	text-transform: none;
	color: var(--color-on-dark);
	text-wrap: balance;
}

.tl-hero__line {
	display: block;
}

.tl-hero__line--accent {
	color: var(--color-gold-light);
}

.tl-hero__desc {
	max-width: 54ch;
	margin: 0;
	font-size: var(--font-size-lg);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
}

.tl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-2xs);
}

.tl-hero--center .tl-hero__actions {
	justify-content: center;
}

/* Nut phu tren nen anh: vien vang, chu sang */
.tl-hero__actions .tl-btn--ghost {
	border-color: var(--color-gold-line);
	color: var(--color-on-dark);
	backdrop-filter: blur(2px);
}

.tl-hero__actions .tl-btn--ghost:hover,
.tl-hero__actions .tl-btn--ghost:focus-visible {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

/* =============================================================================
 * 6. BO DEM SLIDE DOC + THANH TIEN TRINH
 *    Cac nut dot do assets/js/tomluxury.js sinh ra; o day chi tao dang lai.
 *    So thu tu ve bang CSS counter nen khong can them markup hay JS rieng.
 * ========================================================================== */
.tl-hero__dots {
	position: absolute;
	top: 50%;
	right: clamp(var(--container-pad), 3vw, 56px);
	z-index: 3;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: var(--space-2xs);
	width: auto;
	margin-top: 0;
	translate: 0 -50%;
	counter-reset: tl-hero-slide;
}

.tl-hero__dots .tl-slider__dot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2xs);
	width: auto;
	min-width: var(--tap-target);
	height: var(--tap-target);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	font-variant-numeric: tabular-nums;
	color: var(--color-on-dark-muted);
	transition: color var(--dur-fast) var(--ease);
}

/* So thu tu: 01, 02, 03 ... */
.tl-hero__dots .tl-slider__dot::after {
	counter-increment: tl-hero-slide;
	content: counter(tl-hero-slide, decimal-leading-zero);
	order: 1;
}

/* Thanh tien trinh manh */
.tl-hero__dots .tl-slider__dot::before {
	position: static;
	order: 2;
	width: 26px;
	height: var(--rule-w);
	translate: none;
	border-radius: 0;
	background-color: var(--color-border-dark);
	transition: width var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}

.tl-hero__dots .tl-slider__dot:hover {
	color: var(--color-on-dark);
}

.tl-hero__dots .tl-slider__dot:hover::before {
	background-color: var(--color-gold-line);
}

.tl-hero__dots .tl-slider__dot.is-active {
	color: var(--color-gold-light);
}

.tl-hero__dots .tl-slider__dot.is-active::before {
	width: 58px;
	background-color: var(--color-luxury-gold);
}

/* =============================================================================
 * 7. GOI Y CUON XUONG
 * ========================================================================== */
.tl-hero__scroll {
	position: absolute;
	bottom: clamp(18px, 4vh, 40px);
	left: 50%;
	z-index: 3;
	display: block;
	width: var(--rule-w);
	height: 56px;
	overflow: hidden;
	translate: -50% 0;
	background-color: var(--color-border-dark);
}

.tl-hero__scroll-line {
	display: block;
	width: 100%;
	height: 40%;
	background-color: var(--color-luxury-gold);
	animation: tl-hero-scroll 2.4s var(--ease-in-out) infinite;
}

@keyframes tl-hero-scroll {

	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(250%);
	}
}

/* =============================================================================
 * 8. GIAM CHUYEN DONG / TAT VIDEO TREN DIEN THOAI
 *    Video bi an thi lop anh nen ben duoi hien ra — hero khong bao gio trong.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.tl-hero__video {
		display: none;
	}

	.tl-hero__content {
		animation: none;
	}

	.tl-hero__scroll-line {
		animation: none;
	}
}

/* =============================================================================
 * 9. RESPONSIVE
 * ========================================================================== */

/* --- Man hinh rat rong: 1920 va lon hon ---------------------------------- */
@media (min-width: 1600px) {

	.tl-hero__slide {
		max-height: 1080px;
	}
}

/* --- 1440 / 1366 ---------------------------------------------------------- */
@media (max-width: 1440px) {

	.tl-hero__dots {
		right: clamp(var(--container-pad), 2.4vw, 40px);
	}
}

@media (max-width: 1366px) {

	.tl-hero__title {
		line-height: 1.06;
	}
}

/* --- May tinh bang: 1024 / 820 / 768 ------------------------------------- */
@media (max-width: 1024px) {

	.tl-hero,
	.tl-hero--w-md {
		--tl-hero-cw: min(74vw, 660px);
	}

	.tl-hero--w-sm {
		--tl-hero-cw: min(64vw, 560px);
	}

	.tl-hero--w-lg {
		--tl-hero-cw: min(84vw, 760px);
	}

	.tl-hero__slide {
		min-height: 440px;
	}

	.tl-hero__title {
		line-height: 1.08;
	}

	.tl-hero__desc {
		font-size: var(--font-size-base);
	}

	/* Bo dem chuyen xuong day, nam ngang de khong de len chu */
	.tl-hero__dots {
		top: auto;
		right: auto;
		bottom: clamp(16px, 3vh, 28px);
		left: 50%;
		flex-direction: row;
		align-items: center;
		gap: var(--space-sm);
		translate: -50% 0;
	}

	.tl-hero__dots .tl-slider__dot {
		min-width: 0;
		height: var(--tap-target);
	}

	.tl-hero__dots .tl-slider__dot::before {
		width: 18px;
	}

	.tl-hero__dots .tl-slider__dot.is-active::before {
		width: 34px;
	}
}

@media (max-width: 820px) {

	.tl-hero__content {
		gap: var(--space-sm);
	}

	.tl-hero__desc {
		max-width: 48ch;
	}
}

/* --- Dien thoai: 768 / 430 / 390 / 360 ----------------------------------- */
@media (max-width: 640px) {

	.tl-hero {
		--tl-hero-cw: 100%;
	}

	.tl-hero--w-sm,
	.tl-hero--w-md,
	.tl-hero--w-lg {
		--tl-hero-cw: 100%;
	}

	.tl-hero__slide {
		height: auto;
		min-height: min(calc(var(--tl-hero-vh, 86) * 1vh), 660px);
		max-height: none;
		padding-block: var(--space-3xl) calc(var(--space-3xl) + 24px);
	}

	.tl-hero__content {
		align-items: flex-start;
		text-align: left;
	}

	.tl-hero--center .tl-hero__content {
		align-items: center;
		text-align: center;
	}

	/* Lop phu doi sang chieu doc de chu doc duoc tren anh doc */
	.tl-hero__overlay,
	.tl-hero--center .tl-hero__overlay {
		background-image: linear-gradient(
			180deg,
			transparent 0%,
			var(--color-overlay-soft) 42%,
			var(--color-overlay) 100%
		);
	}

	.tl-hero__title {
		font-size: clamp(2.125rem, 9.2vw, 3rem);
		line-height: 1.1;
	}

	@supports (background: color-mix(in srgb, red 50%, transparent)) {

		.tl-hero__overlay,
		.tl-hero--center .tl-hero__overlay {
			background-image: linear-gradient(
				180deg,
				color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 30%), transparent) 0%,
				color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 66%), transparent) 44%,
				color-mix(in srgb, var(--color-primary) calc(var(--tl-hero-overlay, .58) * 100%), transparent) 100%
			);
		}
	}

	.tl-hero__desc {
		max-width: none;
		font-size: var(--font-size-base);
	}

	.tl-hero__actions {
		gap: var(--space-2xs);
		width: 100%;
	}

	.tl-hero__actions .tl-btn {
		flex: 1 1 auto;
		min-width: 46%;
		padding-inline: var(--space-md);
	}

	/* Bo dem nam ngang, lech trai theo noi dung */
	.tl-hero__dots {
		bottom: calc(var(--space-md) + 12px);
	}

	.tl-hero__scroll {
		display: none;
	}

	/* Mac dinh khong phat video nen tren dien thoai */
	.tl-hero--novideo-mobile .tl-hero__video {
		display: none;
	}
}

@media (max-width: 430px) {

	.tl-hero__slide {
		padding-block: calc(var(--space-2xl) + 8px) calc(var(--space-3xl) + 8px);
	}

	.tl-hero__title {
		font-size: clamp(1.875rem, 9.6vw, 2.5rem);
	}

	.tl-hero__actions .tl-btn {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 380px) {

	.tl-hero__eyebrow {
		letter-spacing: var(--tracking-wider);
	}

	.tl-hero__title {
		font-size: 1.75rem;
	}

	.tl-hero__desc {
		font-size: var(--font-size-sm);
	}
}