/* ==========================================================================
   THE ARISTO — PHÚ MỸ HƯNG | COMING SOON LANDING PAGE
   Thiết kế độc lập, Fullscreen 100vh, Tối ưu chuyển đổi & Thẩm mỹ thượng lưu
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT DEFINITIONS
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Beautique Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../assets/fonts/BeautiqueDisplay-Regular.woff2') format('woff2'),
	     url('../assets/fonts/BeautiqueDisplay-Regular.woff') format('woff');
}

@font-face {
	font-family: 'DesignerVN Photograph';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../assets/fonts/DesignerVN-Photograph.woff2') format('woff2'),
	     url('../assets/fonts/DesignerVN-Photograph.woff') format('woff');
}

@font-face {
	font-family: 'BDesignerVN Photograph';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../assets/fonts/DesignerVN-Photograph.woff2') format('woff2'),
	     url('../assets/fonts/DesignerVN-Photograph.woff') format('woff');
}

@font-face {
	font-family: 'Be Vietnam Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2'),
	     url('../assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Be Vietnam Pro';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../assets/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2'),
	     url('../assets/fonts/be-vietnam-pro-500-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Be Vietnam Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2'),
	     url('../assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. CSS VARIABLES & RESET
   -------------------------------------------------------------------------- */
:root {
	--aristo-primary: #8e5a23;
	--aristo-primary-hover: #734516;
	--aristo-primary-gradient: linear-gradient(135deg, #a8692e 0%, #8e5a23 50%, #6e3d17 100%);
	--aristo-champagne: #e5bf7c;
	--aristo-champagne-light: #f5dfb8;
	--aristo-ivory: #FBF8F1;
	--aristo-dark: #190e07;
	--aristo-dark-overlay: rgba(20, 11, 5, 0.65);
	
	--font-heading: 'Beautique Display', 'Noto Serif', Georgia, serif;
	--font-script: 'DesignerVN Photograph', cursive;
	--font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	
	--transition-smooth: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	font-family: var(--font-body);
	background-color: var(--aristo-dark);
	color: var(--aristo-ivory);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. FULLSCREEN WRAPPER
   -------------------------------------------------------------------------- */
.cs-viewport {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #1a0e06;
}

/* LIVING ARCHITECTURAL BACKGROUND (KEN BURNS BREATHING) */
.cs-bg {
	position: absolute;
	inset: -4%;
	width: 108%;
	height: 108%;
	z-index: 1;
	background-color: #1a0e06;
	background-image: url('../assets/img/The-Aristo-01.webp');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	animation: bgLivingPan 28s ease-in-out infinite alternate;
	will-change: transform;
	pointer-events: none;
}

/* PERSPECTIVE REFERENCE NOTE ON BUILDING IMAGE (DESKTOP & MOBILE) */
.cs-hero-perspective {
	position: absolute;
	z-index: 10;
	font-family: var(--font-body, 'Be Vietnam Pro', sans-serif);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.78);
	font-style: italic;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7);
	pointer-events: none;
	white-space: nowrap;
}

.cs-hero-perspective--desktop {
	bottom: 20px;
	left: clamp(24px, 4vw, 56px);
}

.cs-hero-perspective--mobile {
	display: none;
}

@keyframes bgLivingPan {
	0% {
		transform: scale(1) translate3d(0, 0, 0);
	}
	50% {
		transform: scale(1.03) translate3d(-0.6%, -0.4%, 0);
	}
	100% {
		transform: scale(1.05) translate3d(0.4%, -0.7%, 0);
	}
}

/* ==========================================================================
   RÈM PRELOADER 7 NAN DỌC (LOAM HOUSE CHOREOGRAPHY)
   Thiết kế chuẩn xác từ Landing Page chính
   ========================================================================== */
.aristo-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #7d441d 0%, #8e5a23 50%, #e5bf7c 100%);
	pointer-events: auto;
	overflow: hidden;
}

.pl-panels {
	position: absolute;
	inset: 0;
	display: flex;
}

.pl-panels i {
	flex: 1 1 0;
	height: 100%;
	background: linear-gradient(180deg, #4d260c 0%, #7d441d 40%, #8e5a23 80%, #a86c2e 100%);
	border: none !important;
	box-shadow: none !important;
	margin-right: -0.5px;
	transform: translateY(0%);
	transition: transform 0.68s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

.aristo-preloader.lift {
	background: transparent;
	pointer-events: none;
}

.aristo-preloader.lift .pl-panels i {
	transform: translateY(-101%);
}

.aristo-preloader.lift .pl-panels i:nth-child(1) { transition-delay: 0.21s; }
.aristo-preloader.lift .pl-panels i:nth-child(2) { transition-delay: 0.18s; }
.aristo-preloader.lift .pl-panels i:nth-child(3) { transition-delay: 0.15s; }
.aristo-preloader.lift .pl-panels i:nth-child(4) { transition-delay: 0.12s; }
.aristo-preloader.lift .pl-panels i:nth-child(5) { transition-delay: 0.09s; }
.aristo-preloader.lift .pl-panels i:nth-child(6) { transition-delay: 0.06s; }
.aristo-preloader.lift .pl-panels i:nth-child(7) { transition-delay: 0.03s; }

.pl-logo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	padding: 0 24px;
	transition: opacity 0.28s ease, transform 0.35s ease;
}

.pl-wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	filter: blur(18px);
	opacity: 0.16;
	transform: scale(0.97);
	will-change: filter, opacity, transform;
}

.pl-brand-logo {
	width: clamp(140px, 15vw, 220px);
	height: auto;
	display: block;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.pl-wordmark__main {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFFDF8;
	text-shadow: 0 2px 14px rgba(43, 24, 13, 0.45);
}

.pl-wordmark__sub {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--aristo-champagne, #e5bf7c);
	opacity: 0.95;
	text-shadow: 0 1px 8px rgba(43, 24, 13, 0.4);
}

.pl-pct {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding-top: 14px;
	border-top: 1px solid rgba(229, 191, 124, 0.35);
	font-family: var(--font-heading);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: var(--aristo-champagne, #e5bf7c);
	transition: opacity 0.25s ease, transform 0.35s ease;
}

.aristo-preloader.lift .pl-logo,
.aristo-preloader.lift .pl-pct {
	opacity: 0;
	transform: translateY(-10px);
}

body.pl-done .aristo-preloader {
	display: none;
}

/* Đảm bảo hiệu ứng nội dung trang chỉ kích hoạt khi màn rèm bắt đầu kéo lên */
body.pl-active .cs-header,
body.pl-active .aristo-line-inner,
body.pl-active .cs-slogan-badge,
body.pl-active .cs-countdown-wrap,
body.pl-active .cs-card {
	animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   4. HEADER (NO MENU — HOTLINE ON LEFT, LOGO ON RIGHT)
   -------------------------------------------------------------------------- */
.cs-header {
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 22px clamp(24px, 4vw, 56px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	animation: headerEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes headerEntrance {
	0% {
		opacity: 0;
		transform: translateY(-24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.cs-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

.cs-header__brand:hover {
	opacity: 0.95;
	transform: translateY(-1px) scale(1.02);
}

.cs-header__logo {
	height: clamp(34px, 3.8vw, 44px);
	width: auto;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* LOAM HOUSE MOTION PILL BUTTON */
.mbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid rgba(229, 191, 124, 0.55);
	background: rgba(35, 18, 9, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
	animation: hotlinePulseGlow 4s ease-in-out infinite alternate 1.8s;
}

@keyframes hotlinePulseGlow {
	0% {
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
		border-color: rgba(229, 191, 124, 0.5);
	}
	100% {
		box-shadow: 0 4px 24px rgba(229, 191, 124, 0.45), 0 0 12px rgba(229, 191, 124, 0.3);
		border-color: rgba(251, 248, 241, 0.85);
	}
}

.mbtn-circle {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f5dfb8 0%, #e5bf7c 50%, #c4944d 100%);
	transition: width 0.48s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.35s ease;
	z-index: 0;
	box-shadow: 0 0 10px rgba(229, 191, 124, 0.4);
}

.mbtn-icon {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #2b180d;
	flex-shrink: 0;
	transition: transform 0.48s cubic-bezier(0.65, 0, 0.35, 1);
	animation: phoneIconRing 6s ease-in-out infinite 3s;
}

@keyframes phoneIconRing {
	0%, 82%, 100% {
		transform: rotate(0deg);
	}
	85% {
		transform: rotate(-14deg) scale(1.08);
	}
	88% {
		transform: rotate(14deg) scale(1.08);
	}
	91% {
		transform: rotate(-10deg);
	}
	94% {
		transform: rotate(10deg);
	}
	97% {
		transform: rotate(0deg);
	}
}

.mbtn-icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.mbtn-text {
	position: relative;
	z-index: 1;
	padding: 0 16px 0 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--aristo-ivory);
	white-space: nowrap;
	transition: color 0.42s ease;
}

.mbtn:hover {
	border-color: rgba(251, 248, 241, 0.95);
	box-shadow: 0 6px 26px rgba(229, 191, 124, 0.5);
	transform: translateY(-1px);
}

.mbtn:hover .mbtn-circle {
	width: calc(100% - 6px);
}

.mbtn:hover .mbtn-icon {
	transform: translateX(4px);
	animation: none;
}

.mbtn:hover .mbtn-text {
	color: #2b180d;
}

/* --------------------------------------------------------------------------
   5. MAIN HERO BODY
   -------------------------------------------------------------------------- */
.cs-main {
	position: relative;
	z-index: 5;
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding: clamp(6px, 1.8vh, 20px) clamp(24px, 4vw, 56px) clamp(20px, 3vh, 36px);
	min-height: 0;
}

.cs-layout {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding-right: clamp(24px, 5.5vw, 85px); /* Dịch qua phải một chút để không đè lên tòa nhà */
}

/* MOBILE HERO BACKDROP & TRANSITION (CHỈ DÙNG CHO MOBILE / TABLET) */
.cs-mobile-hero-bg {
	display: none;
}

/* RIGHT COLUMN — SLOGAN + COUNTDOWN + CONTACT FORM CARD (ĐỒNG TRỤC CANH GIỮA TRÊN DESKTOP) */
.cs-right-col {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vh, 20px);
	justify-content: flex-start;
	align-items: center; /* Canh giữa tất cả các thành phần theo trục dọc */
	text-align: center;
	width: 100%;
	max-width: 700px;
}

/* ACTION WRAP: COMING SOON + COUNTDOWN + FORM */
.cs-action-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2vh, 20px);
	width: 100%;
}

.cs-mobile-footer {
	display: none;
}

/* HERO SLOGAN BLOCK — KHỐI NẰM GIỮA TRỤC, NỘI DUNG CANH TRÁI CHUẨN XÁC */
.aristo-video-slogan {
	display: inline-flex;
	flex-direction: column;
	align-items: center; /* Canh giữa khối slogan với đoạn mô tả bên dưới */
	align-self: center;  /* Toàn bộ khối canh giữa trục với Countdown & Form */
	width: fit-content;
	max-width: 100%;
}

.aristo-video-slogan__title {
	--aristo-slogan-size: var(--aristo-display-size, clamp(35px, 3.84vw, 61px));
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start; /* "Chuẩn sống" canh trái cùng với TIÊN PHONG */
	font-size: var(--aristo-slogan-size);
	line-height: 1;
	color: #FFFFFF;
	margin: 0;
	text-shadow: 0 4px 26px rgba(8, 22, 18, 0.42);
	width: fit-content;
	white-space: nowrap;
}

/* ĐOẠN MÔ TẢ PHÍA DƯỚI SLOGAN */
.aristo-slogan-desc {
	margin-top: clamp(12px, 1.6vh, 18px);
	font-family: var(--font-body, 'Be Vietnam Pro', sans-serif);
	font-size: clamp(15.6px, 1.26vw, 18px);
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 10px rgba(8, 22, 18, 0.55);
	max-width: 680px;
	letter-spacing: 0.01em;
	opacity: 0;
	animation: fadeInSloganDesc 1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

.aristo-nowrap {
	white-space: nowrap;
}

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

/* Mask trượt dòng: dùng đơn vị theo --aristo-slogan-size để không cắt nét cong chữ C, D, đ, g và dấu Tiếng Việt */
.aristo-line-mask {
	display: block;
	overflow: hidden;
	line-height: 1;
	padding: 0.28em 0.36em 0.34em 0.36em;
	margin: -0.28em -0.36em -0.34em -0.36em;
	white-space: nowrap;
}

/* Dòng 1 ("Chuẩn sống"):
   - Căn mép trái chữ C (xmin = +0.003em) trùng khít 100% với mép trái chữ T (xmin = -0.019em) bằng margin-left: -0.382em
   - Bụng chữ C tách thoáng khỏi chữ T (~7px) và vòng chữ g vừa chạm nhẹ đầu chữ P */
.aristo-line-mask--script-top {
	position: relative;
	z-index: 2;
	margin-left: -0.382em;
	margin-bottom: -0.33em;
}

/* Dòng 2 ("TIÊN PHONG"): quyết định bề rộng chuẩn của toàn khối (từ mép trái chữ T đến mép phải chữ G).
   margin-bottom -0.16em tạo khoảng cách thoáng rõ giữa chân chữ G và dấu sắc chữ Ế (~10px) */
.aristo-line-mask--display-mid {
	position: relative;
	z-index: 1;
	margin-bottom: -0.16em;
}

.aristo-line-mask--bottom-pair {
	position: relative;
	z-index: 2;
}

.aristo-line-inner {
	display: inline-block;
	line-height: 1;
	will-change: transform, opacity;
	animation: sloganReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
	white-space: nowrap;
}

.aristo-line-mask--script-top .aristo-line-inner {
	animation-delay: 0.18s;
}

.aristo-line-mask--display-mid .aristo-line-inner {
	animation-delay: 0.36s;
}

.aristo-line-mask--bottom-pair .aristo-line-inner {
	animation-delay: 0.54s;
}

@keyframes sloganReveal {
	0% {
		opacity: 0;
		transform: translateY(112%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Chữ viết tay "Chuẩn sống" và "Dẫn đầu" — Font: DesignerVN-Photograph */
.aristo-slogan-script {
	font-family: var(--font-script, 'DesignerVN Photograph', cursive);
	font-style: normal;
	font-weight: 400;
	font-size: 0.96em;
	line-height: 0.88;
	letter-spacing: 0;
	word-spacing: -0.06em;
	text-transform: none;
	color: #FFFFFF;
}

/* Chữ in hoa "TIÊN PHONG" và "VỊ THẾ" — Font: Beautique Display */
.aristo-slogan-display {
	font-family: var(--font-heading, 'Beautique Display', Georgia, serif);
	font-style: normal;
	font-weight: 400;
	font-size: 1em;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #FFFFFF;
	-webkit-text-stroke: 0.016em #FFFFFF;
	paint-order: stroke fill;
}

/* Dòng 3 kết hợp "Dẫn đầu" (Script) + "VỊ THẾ" (Beautique Display) trải đúng 100% bề rộng của "TIÊN PHONG":
   - justify-content: space-between khóa cứng mép trái chữ D và mép phải chữ E (VỊ THẾ) thẳng hàng tuyệt đối với T và G */
.aristo-line-inner.aristo-slogan-bottom-row {
	display: flex;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.aristo-slogan-script--inline {
	display: inline-block;
	margin-left: 0.285em;
	transform: none;
}

.aristo-slogan-bottom-row .aristo-slogan-display {
	margin-right: -0.01em;
}

/* Badge COMING SOON dưới Slogan — MÀU TRẮNG, TĂNG FONT SIZE */
.cs-slogan-badge {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--font-heading, 'Beautique Display', serif);
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin-top: 2px;
	margin-bottom: -2px;
	color: #ffffff;
	background: none;
	-webkit-text-fill-color: #ffffff;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 255, 255, 0.3);
	animation: badgeEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.68s both;
	will-change: transform, opacity;
}

@keyframes badgeEntrance {
	0% {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes goldGleam {
	0% {
		background-position: 0% center;
		filter: drop-shadow(0 0 10px rgba(229, 191, 124, 0.35));
	}
	50% {
		background-position: 100% center;
		filter: drop-shadow(0 0 24px rgba(229, 191, 124, 0.85));
	}
	100% {
		background-position: 0% center;
		filter: drop-shadow(0 0 10px rgba(229, 191, 124, 0.35));
	}
}

/* --------------------------------------------------------------------------
   COUNTDOWN TIMER (14/11/2026) — GRADIENT #7D441D & #E5BF7C
   -------------------------------------------------------------------------- */
.cs-countdown-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background: linear-gradient(135deg, rgba(125, 68, 29, 0.94) 0%, rgba(168, 108, 52, 0.92) 50%, rgba(229, 191, 124, 0.94) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(251, 248, 241, 0.55);
	border-radius: 14px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
	width: fit-content;
	align-self: center; /* Căn ra chính giữa trục dọc */
	margin: 2px auto;
	position: relative;
	overflow: hidden;
	animation: countdownEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.82s both;
}

@keyframes countdownEntrance {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.cs-countdown-header {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cs-countdown-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 10px #FFFFFF, 0 0 4px #e5bf7c;
	animation: pulseDot 1.8s infinite ease-in-out;
}

@keyframes pulseDot {
	0%, 100% {
		transform: scale(1);
		opacity: 0.9;
		box-shadow: 0 0 10px #FFFFFF, 0 0 4px #e5bf7c;
	}
	50% {
		transform: scale(1.4);
		opacity: 1;
		box-shadow: 0 0 16px #FFFFFF, 0 0 8px #f5dfb8;
	}
}

.cs-countdown-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 1px 4px rgba(43, 24, 13, 0.7);
}

.cs-countdown-timer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cs-cd-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	padding: 5px 10px 6px;
	background: rgba(35, 18, 9, 0.75);
	border: 1px solid rgba(251, 248, 241, 0.4);
	border-radius: 8px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.cs-cd-box.cs-tick {
	transform: scale(1.09);
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 14px rgba(229, 191, 124, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cs-cd-num {
	font-family: var(--font-heading, 'Beautique Display', serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.14em;
	padding-left: 0.14em;
	font-variant-numeric: tabular-nums;
	color: #FFFFFF;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cs-cd-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #e5bf7c;
	margin-top: 2px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cs-cd-sep {
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF;
	margin-top: -8px;
	user-select: none;
	text-shadow: 0 1px 4px rgba(43, 24, 13, 0.6);
}

/* --------------------------------------------------------------------------
   6. LUXURY REGISTRATION CARD — GRADIENT #7D441D & #E5BF7C
   -------------------------------------------------------------------------- */
.cs-card {
	position: relative;
	background: linear-gradient(135deg, rgba(125, 68, 29, 0.95) 0%, rgba(168, 108, 52, 0.92) 50%, rgba(229, 191, 124, 0.95) 100%);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(251, 248, 241, 0.5);
	border-radius: 16px;
	padding: 22px 26px 24px;
	width: 100%;
	max-width: 480px;
	align-self: center; /* Căn ra chính giữa trục dọc */
	box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
	transition: transform 0.35s cubic-bezier(0.25, 1.4, 0.5, 1), 
	            border-color 0.35s ease, 
	            box-shadow 0.35s ease;
	animation: cardEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.96s both;
	overflow: hidden;
}

/* BOUNCE NHẸ LÊN KHI CUỘN CHUỘT (KHÔNG BỊ RESET/ẨN ĐI) */
.cs-card.is-bounce {
	transform: translateY(-8px);
	border-color: rgba(251, 248, 241, 0.9);
	box-shadow: 0 0 26px rgba(229, 191, 124, 0.55), 0 26px 65px rgba(0, 0, 0, 0.52), inset 0 1px 2px rgba(255, 255, 255, 0.65);
}

.cs-card:hover {
	border-color: rgba(251, 248, 241, 0.85);
	box-shadow: 0 26px 65px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.cs-card__header {
	margin-bottom: 14px;
	text-align: center;
}

.cs-card__title {
	font-family: var(--font-heading);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(43, 24, 13, 0.6);
	margin: 0;
	text-align: center;
}

/* FORM STYLES */
.cs-form {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.cs-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
}

.cs-form-group {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.cs-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.cs-input,
.cs-select,
.cs-textarea {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: 13px;
	color: #FFFFFF;
	background: rgba(35, 18, 9, 0.72);
	border: 1px solid rgba(251, 248, 241, 0.38);
	border-radius: 8px;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: var(--transition-smooth);
}

.cs-textarea {
	height: 52px;
	padding: 8px 12px;
	resize: none;
}

.cs-select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}

.cs-select option {
	background-color: #2b180d;
	color: #FFFFFF;
}

.cs-input::placeholder,
.cs-textarea::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
	border-color: #FFFFFF;
	background: rgba(35, 18, 9, 0.88);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Privacy Policy Consent Checkbox */
.cs-form-group--consent {
	margin-top: 2px;
	margin-bottom: 0;
}

.cs-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	line-height: 1.45;
	color: #FFFDF8;
	text-shadow: 0 1px 3px rgba(25, 14, 7, 0.75);
}

.cs-consent-checkbox {
	width: 15px;
	height: 15px;
	margin-top: 2px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: #2b180d;
	border-radius: 3px;
}

.cs-consent-checkbox.is-invalid {
	outline: 2px solid #f87171;
	outline-offset: 1px;
}

.cs-consent-text {
	flex: 1;
}

.cs-consent-link {
	color: #fff3d6;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.25s ease;
}

.cs-consent-link:hover {
	color: #FFFFFF;
}

/* Nút Submit trên nền Gradient */
.cs-btn-submit {
	position: relative;
	width: 100%;
	height: 44px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 8px;
	border: 1px solid #e5bf7c;
	background: linear-gradient(135deg, #2b180d 0%, #43220f 50%, #2b180d 100%);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(43, 24, 13, 0.5);
	overflow: hidden;
	transition: var(--transition-smooth);
}

.cs-btn-submit:hover:not(:disabled) {
	background: linear-gradient(135deg, #43220f 0%, #5e3015 50%, #43220f 100%);
	border-color: #FFFFFF;
	box-shadow: 0 10px 28px rgba(43, 24, 13, 0.65);
	transform: translateY(-1px);
}

.cs-btn-submit::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -70%;
	width: 45%;
	height: 200%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
	transform: rotate(25deg);
	pointer-events: none;
	animation: btnLiquidShine 4.6s ease-in-out infinite 2s;
	transition: transform 0.6s ease;
}

@keyframes btnLiquidShine {
	0%, 75% {
		transform: translateX(0) rotate(25deg);
	}
	100% {
		transform: translateX(450%) rotate(25deg);
	}
}

.cs-btn-submit:hover:not(:disabled)::after {
	transform: translateX(450%) rotate(25deg);
	transition: transform 0.65s ease;
}

.cs-btn-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.cs-input.is-invalid,
.cs-select.is-invalid {
	border-color: #f87171;
	box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

.cs-field-error {
	font-size: 10.5px;
	color: #ffe4e6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	margin-top: 3px;
	display: none;
}

.cs-form-group.has-error .cs-field-error {
	display: block;
}

/* Spinner */
.cs-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: cs-spin 0.8s linear infinite;
}

@keyframes cs-spin {
	to { transform: rotate(360deg); }
}

.cs-btn-submit.is-loading {
	pointer-events: none;
	opacity: 0.85;
}

.cs-btn-submit.is-loading .cs-spinner {
	display: inline-block;
}

.cs-btn-submit.is-loading .cs-btn-text {
	opacity: 1;
}

.cs-btn-submit.is-loading .cs-btn-icon {
	display: none;
}

/* Form alerts */
.cs-alert {
	display: none;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 8px;
	animation: fadeIn 0.4s ease;
}

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

.cs-alert--success {
	background: rgba(16, 68, 48, 0.8);
	border: 1px solid rgba(52, 211, 153, 0.5);
	color: #d1fae5;
}

.cs-alert--error {
	background: rgba(80, 20, 20, 0.8);
	border: 1px solid rgba(248, 113, 113, 0.5);
	color: #fee2e2;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE DESIGN (MOBILE & TABLET CHUẨN XÁC THEO HÌNH THAM KHẢO 1 & 2)
   - Hình nền Full Height (the aristo phu my hung mobie.webp)
   - Dải màu chuyển tiếp phía dưới theo đúng hình tham khảo 2: #572d0f -> #41200a -> #28160c
   - Cụm Slogan nằm trên nền trời xanh phía trên tòa nhà
   - COMING SOON, Countdown và Form nằm ở vị trí Bottom trên nền gradient
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cs-viewport {
		position: relative;
		width: 100%;
		max-width: 100vw;
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-y: auto;
		overflow-x: hidden;
		background: #763b16; /* Màu đáy theo dải màu mới #763b16 */
	}

	.cs-bg {
		display: none;
	}

	.cs-hero-perspective--desktop {
		display: none;
	}

	.cs-hero-perspective--mobile {
		display: block;
		position: absolute;
		bottom: 8px;
		right: 12px;
		max-width: calc(100% - 24px);
		font-size: clamp(8.5px, 2.3vw, 10px);
		color: rgba(255, 255, 255, 0.85);
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.8);
		z-index: 10;
		text-align: right;
	}

	/* HÌNH NỀN TÒA NHÀ FIT KHUNG MÀN HÌNH 100%, KHÔNG BỊ CẮT XÉN HAI BÊN (TỈ LỆ MỚI 1464 / 2532) */
	.cs-mobile-hero-bg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 1464 / 2532;
		height: auto;
		z-index: 1;
		pointer-events: none;
		background-image: url('../assets/img/the%20aristo%20phu%20my%20hung%20mobie.webp');
		background-size: 100% 100%;
		background-position: center top;
		background-repeat: no-repeat;
	}

	.cs-mobile-hero-transition {
		display: none;
	}

	/* HEADER TRÊN MOBILE: HOTLINE GỌN BÊN TRÁI, LOGO BÊN PHẢI — TUYỆT ĐỐI KHÔNG ĐÈ LÊN NHAU HOẶC ĐÈ NỘI DUNG */
	.cs-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100vw;
		z-index: 20;
		padding: clamp(14px, 2.5vh, 20px) clamp(16px, 4vw, 24px);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cs-header__brand {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
	}

	.cs-header__logo {
		height: clamp(26px, 3.4vw, 32px);
		width: auto;
		max-width: 160px;
		object-fit: contain;
	}

	.cs-header__action {
		flex-shrink: 0;
	}

	.mbtn {
		height: 36px;
	}
	.mbtn-circle {
		width: 28px;
		height: 28px;
	}
	.mbtn-icon {
		width: 28px;
		height: 28px;
	}
	.mbtn-text {
		font-size: 10.5px;
		padding: 0 10px 0 4px;
	}

	.cs-main {
		position: relative;
		z-index: 10;
		padding: 0;
		width: 100%;
		max-width: 100vw;
		min-width: 0;
	}

	.cs-layout {
		justify-content: center;
		padding: 0;
		width: 100%;
		max-width: 100vw;
		min-width: 0;
	}

	.cs-right-col {
		max-width: 100%;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		align-items: center;
		gap: 0;
	}

	/* CỤM SLOGAN: NỔI TRÊN NỀN TRỜI, THOÁNG ĐÃNG BÊN DƯỚI HEADER (KHÔNG BỊ HOTLINE/LOGO ĐÈ LÊN) */
	.aristo-video-slogan {
		position: absolute;
		top: clamp(75px, 18vw, 105px);
		left: 0;
		right: 0;
		width: 100%;
		z-index: 20;
		margin: 0 auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 12px;
	}

	.aristo-video-slogan__title {
		--aristo-slogan-size: clamp(31px, 8.74vw, 42px);
		margin-bottom: 0;
		text-shadow: 0 4px 24px rgba(8, 22, 18, 0.6);
	}

	.aristo-slogan-desc {
		margin-top: 8px;
		font-size: clamp(13px, 3.5vw, 15px);
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.95);
		text-shadow: 0 2px 10px rgba(8, 22, 18, 0.75);
		max-width: min(96vw, 560px);
		text-align: center;
		padding: 0 4px;
		opacity: 1;
	}

	/* CỤM NỘI DUNG PHÍA BOTTOM: BẮT ĐẦU CHÍNH XÁC TẠI CHÂN HÌNH — TUYỆT ĐỐI KHÔNG CÓ KHE HỞ DÃI MÀU */
	.cs-action-wrap {
		position: relative;
		z-index: 15;
		width: 100%;
		max-width: min(100%, 460px);
		min-width: 0;
		/* Nối tiếp trực tiếp ngay chân đường của hình tòa nhà (-4px triệt tiêu hoàn toàn khe hở viền) */
		margin-top: calc(100vw * 2532 / 1464 - 4px);
		padding: 24px clamp(16px, 4vw, 24px) 50px;
		background: linear-gradient(
			180deg, 
			#e5bf7c 0%, 
			#c8954f 25%, 
			#a66d30 50%, 
			#8c511f 75%, 
			#763b16 100%
		);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.cs-action-wrap::before {
		display: none;
	}

	/* TEXT COMING SOON: MÀU TRẮNG, TĂNG FONT-SIZE, BỎ SHADOW THEO YÊU CẦU */
	.cs-slogan-badge {
		font-size: clamp(22px, 6vw, 30px);
		font-weight: 700;
		letter-spacing: 0.2em;
		margin-top: 0;
		margin-bottom: 2px;
		color: #ffffff !important;
		background: none !important;
		-webkit-text-fill-color: #ffffff !important;
		text-shadow: none !important;
		filter: none !important;
	}

	.cs-countdown-wrap {
		width: 100%;
		max-width: min(100%, 420px);
		min-width: 0;
		padding: 9px 16px;
		gap: 6px;
	}

	.cs-cd-box {
		min-width: 48px;
		padding: 4px 8px 5px;
	}

	.cs-cd-num {
		font-size: 20px;
	}

	.cs-card {
		width: 100%;
		max-width: min(100%, 420px);
		min-width: 0;
		padding: 18px 16px 20px;
	}

	.cs-form-row {
		grid-template-columns: 1fr;
		gap: 9px;
	}

	/* Font-size >= 16px ngăn trình duyệt iOS Safari / Mobile tự động zoom phóng to khi focus vào ô input */
	.cs-input,
	.cs-select,
	.cs-textarea {
		font-size: 16px;
		height: 42px;
	}

	.cs-mobile-footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		margin-top: 10px;
		text-align: center;
	}

	.cs-perspective-note {
		font-size: 10.5px;
		color: rgba(255, 255, 255, 0.65);
		font-style: italic;
		letter-spacing: 0.03em;
	}

	.cs-copyright-note {
		font-size: 10.5px;
		color: rgba(229, 191, 124, 0.75);
		letter-spacing: 0.04em;
	}
}

@media (max-width: 480px) {
	.cs-header {
		padding: 12px 14px;
	}

	.cs-header__logo {
		height: 28px;
	}

	.mbtn {
		height: 36px;
	}
	.mbtn-circle {
		width: 28px;
		height: 28px;
	}
	.mbtn-icon {
		width: 28px;
		height: 28px;
	}
	.mbtn-text {
		font-size: 10.5px;
		padding: 0 10px 0 4px;
	}

	.cs-card {
		padding: 16px 14px 18px;
	}

	.cs-input, .cs-select {
		height: 42px;
		font-size: 16px;
	}

	.cs-btn-submit {
		height: 42px;
		font-size: 12px;
	}
}

@media (max-height: 780px) and (min-width: 1025px) {
	.cs-card {
		padding: 16px 22px;
	}
	.cs-form {
		gap: 8px;
	}
	.cs-input, .cs-select {
		height: 36px;
		font-size: 12px;
	}
	.aristo-video-slogan__title {
		--aristo-slogan-size: clamp(32px, 3.6vw, 50px);
	}
}