/* ============================================
   LANDING PAGE TIKTOK ADS
   Palette: spa/massage – sage green + warm cream
   ============================================ */

:root {
	--lp-sage: #7d9b76;
	--lp-sage-dark: #4a6b4a;
	--lp-sage-deep: #2d3a2e;
	--lp-sage-light: #c5d5c1;
	--lp-sage-mist: #e8efe4;

	--lp-terra: #c98366;
	--lp-terra-dark: #a5654a;
	--lp-terra-light: #f2ddd0;

	--lp-cream: #f7f2ea;
	--lp-cream-warm: #ede4d1;

	--lp-text: #4a4238;
	--lp-muted: #8a8578;
	--lp-red: #c04545;

	--lp-shadow: 0 10px 30px rgba(74, 107, 74, .10);
	--lp-shadow-lg: 0 20px 60px rgba(74, 107, 74, .15);

	/* ====== SVG PATTERNS ====== */
	/* Seigaiha - sóng Nhật Bản, phù hợp spa/thư giãn */
	--lp-pattern-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'><path d='M0,30 A15,15 0 0,1 30,30 A15,15 0 0,1 60,30' stroke='%237d9b76' stroke-opacity='.12' fill='none' stroke-width='1'/><path d='M-30,30 A15,15 0 0,1 0,30 M30,30 A15,15 0 0,1 60,30 M60,30 A15,15 0 0,1 90,30' stroke='%237d9b76' stroke-opacity='.08' fill='none' stroke-width='1'/></svg>");
	/* Dots subtle */
	--lp-pattern-dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><circle cx='15' cy='15' r='1.5' fill='%237d9b76' fill-opacity='.15'/></svg>");
	/* Dots trên nền tối */
	--lp-pattern-dots-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><circle cx='15' cy='15' r='1.2' fill='%23ffffff' fill-opacity='.08'/></svg>");
	/* Lotus/hoa sen cách điệu */
	--lp-pattern-lotus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%237d9b76' stroke-opacity='.10' stroke-width='1'><path d='M40,20 Q50,35 40,50 Q30,35 40,20 Z'/><path d='M40,20 Q55,25 55,40 Q50,35 40,50' transform='rotate(72 40 40)'/><path d='M40,20 Q55,25 55,40 Q50,35 40,50' transform='rotate(144 40 40)'/><path d='M40,20 Q55,25 55,40 Q50,35 40,50' transform='rotate(216 40 40)'/><path d='M40,20 Q55,25 55,40 Q50,35 40,50' transform='rotate(288 40 40)'/></g></svg>");
	/* Lá scatter */
	--lp-pattern-leaves: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%237d9b76' fill-opacity='.08'><path d='M20,30 Q25,15 40,20 Q35,35 20,30 Z'/><path d='M85,70 Q90,55 105,60 Q100,75 85,70 Z' transform='rotate(45 95 65)'/><path d='M60,95 Q65,80 80,85 Q75,100 60,95 Z' transform='rotate(-30 70 90)'/></g><g fill='%23c98366' fill-opacity='.06'><path d='M95,25 Q100,10 115,15 Q110,30 95,25 Z' transform='rotate(60 105 20)'/></g></svg>");
	/* Diamond/kim cương mờ */
	--lp-pattern-diamond: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><path d='M25,5 L45,25 L25,45 L5,25 Z' stroke='%23c98366' stroke-opacity='.08' fill='none' stroke-width='1'/></svg>");
	/* Bamboo lines */
	--lp-pattern-bamboo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'><g stroke='%237d9b76' stroke-opacity='.10' stroke-width='1' fill='none'><line x1='10' y1='0' x2='10' y2='120'/><line x1='30' y1='0' x2='30' y2='120'/><line x1='0' y1='30' x2='40' y2='30'/><line x1='0' y1='70' x2='40' y2='70'/></g></svg>");
}

body.landing-tiktok {
	background: #fdfbf6;
	color: var(--lp-text);
	font-family: 'Open Sans', sans-serif;
}

.lp-main section {
	padding: 60px 0;
	position: relative;
	overflow: hidden;
}

.lp-main section > .container {
	position: relative;
	z-index: 2;
}

@media (max-width: 767.98px) {
	.lp-main section {
		padding: 40px 0;
	}
}

.lp-section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}

.lp-eyebrow {
	display: inline-block;
	background: var(--lp-sage-mist);
	color: var(--lp-sage-dark);
	padding: 6px 16px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
}

.lp-section-header h2 {
	font-family: 'Lora', serif;
	font-size: 36px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	margin-bottom: 16px;
	line-height: 1.25;
	position: relative;
}

.lp-section-header h2 span {
	color: var(--lp-sage);
	font-style: italic;
}

.lp-section-header h2::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--lp-sage), var(--lp-terra));
	border-radius: 3px;
	margin: 14px auto 0;
}

.lp-section-header.text-start h2::after {
	margin-left: 0;
	margin-right: auto;
}

.lp-section-header p {
	color: var(--lp-muted);
	font-size: 16px;
	margin: 0;
}

@media (max-width: 767.98px) {
	.lp-section-header h2 {
		font-size: 26px;
	}
	.lp-section-header {
		margin-bottom: 28px;
	}
}

/* Buttons */
.btn-lp-primary {
	background: linear-gradient(135deg, var(--lp-sage) 0%, var(--lp-sage-dark) 100%);
	color: #fff !important;
	border: none;
	padding: 12px 28px;
	border-radius: 50px;
	font-weight: 700;
	letter-spacing: .5px;
	box-shadow: 0 8px 24px rgba(74, 107, 74, .30);
	transition: all .25s ease;
}

.btn-lp-primary:hover,
.btn-lp-primary:focus {
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(74, 107, 74, .40);
}

.btn-lp-primary.btn-lg {
	padding: 16px 36px;
	font-size: 16px;
}

.btn-lp-outline {
	background: #fff;
	color: var(--lp-sage-dark) !important;
	border: 2px solid var(--lp-sage);
	padding: 10px 26px;
	border-radius: 50px;
	font-weight: 700;
	letter-spacing: .5px;
	transition: all .25s ease;
}

.btn-lp-outline:hover {
	background: var(--lp-sage);
	color: #fff !important;
}

.btn-lp-outline.btn-lg {
	padding: 14px 34px;
	font-size: 16px;
}

/* ============================================
   PROMO BAR (top)
   ============================================ */
.lp-promobar {
	background: linear-gradient(135deg, var(--lp-terra-dark), var(--lp-terra));
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.lp-promobar::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
	animation: lpShine 3s infinite;
}

@keyframes lpShine {
	100% { left: 100%; }
}

.lp-countdown {
	background: rgba(0,0,0,.25);
	padding: 2px 10px;
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 1px;
}

@media (max-width: 480px) {
	.lp-promobar { font-size: 11px; }
}

/* ============================================
   MARQUEE SOCIAL PROOF
   ============================================ */
.lp-marquee {
	background: linear-gradient(90deg, var(--lp-sage-deep), var(--lp-sage-dark), var(--lp-sage-deep));
	color: #fff;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
}

.lp-marquee-track {
	display: flex;
	gap: 40px;
	white-space: nowrap;
	animation: lpMarquee 30s linear infinite;
	font-size: 13px;
	font-weight: 600;
	color: #f5e9d0;
}

.lp-marquee-track span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.lp-marquee-track span i {
	color: #f5b301;
}

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

/* ============================================
   LIVE BAR (hero top)
   ============================================ */
.lp-live-bar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(220, 38, 38, .08);
	border: 1px solid rgba(220, 38, 38, .2);
	color: #b91c1c;
	padding: 6px 14px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 16px;
}

.lp-live-bar strong {
	color: #7f1d1d;
	font-weight: 800;
	letter-spacing: .3px;
}

.lp-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #dc2626;
	box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
	animation: lpLivePulse 1.5s ease-out infinite;
	flex-shrink: 0;
}

@keyframes lpLivePulse {
	0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
	100% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

/* ============================================
   PULSE ANIMATION for main CTAs
   ============================================ */
.lp-pulse {
	position: relative;
	animation: lpPulseBtn 2.5s ease-in-out infinite;
}

.lp-pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50px;
	box-shadow: 0 0 0 0 rgba(125, 155, 118, .5);
	animation: lpPulseRing 2s ease-out infinite;
	pointer-events: none;
}

@keyframes lpPulseBtn {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

@keyframes lpPulseRing {
	0% { box-shadow: 0 0 0 0 rgba(125, 155, 118, .5); }
	100% { box-shadow: 0 0 0 20px rgba(125, 155, 118, 0); }
}

/* ============================================
   HEADER
   ============================================ */
.lp-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(253, 251, 246, .96);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 20px rgba(74, 107, 74, .06);
	padding: 10px 0;
}

.lp-header .navbar-brand img {
	max-height: 52px;
	width: auto;
}

.lp-header-cta {
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	border: none;
	color: #fff;
	border-radius: 50px;
	padding: 8px 18px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(74, 107, 74, .3);
}

.lp-header-cta:hover {
	color: #fff;
	transform: translateY(-1px);
}

/* ============================================
   HERO – Massage/Spa themed
   ============================================ */
.lp-hero {
	background:
		radial-gradient(ellipse at top left, var(--lp-sage-mist) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, var(--lp-terra-light) 0%, transparent 55%),
		linear-gradient(180deg, var(--lp-cream) 0%, #fdfbf6 100%);
	padding: 56px 0 60px !important;
	overflow: hidden;
	position: relative;
}

.lp-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 25%, rgba(125, 155, 118, .10), transparent 40%),
		radial-gradient(circle at 88% 75%, rgba(201, 131, 102, .10), transparent 45%);
	pointer-events: none;
}

/* Wave viền dưới hero – chuyển tiếp sang stats bar */
.lp-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 24px;
	background: var(--lp-pattern-wave);
	background-size: 60px 30px;
	background-repeat: repeat-x;
	opacity: .5;
	pointer-events: none;
}

/* ============================================
   LOTUS FLOWERS – decorative khắp trang
   ============================================ */
.lp-lotus-field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.lp-lotus {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	animation: lpLotusFloat 8s ease-in-out infinite;
	filter: drop-shadow(0 4px 12px rgba(74, 107, 74, .1));
}

@keyframes lpLotusFloat {
	0%, 100% { transform: translateY(0) rotate(var(--lotus-rot, 0deg)); }
	50%      { transform: translateY(-12px) rotate(calc(var(--lotus-rot, 0deg) + 6deg)); }
}

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

/* Hero lotus - 5 bông (chỉ ở hero) */
.lp-lotus-h1 { top: 5%;   left: 3%;   width: 80px; opacity: .35; --lotus-rot: -15deg; animation-delay: 0s; }
.lp-lotus-h2 { top: 18%;  right: 8%;  width: 60px; opacity: .28; --lotus-rot: 25deg;  animation-delay: 1.5s; }
.lp-lotus-h3 { bottom: 12%; left: 8%;  width: 100px; opacity: .22; --lotus-rot: 45deg; animation-delay: 3s; }
.lp-lotus-h4 { bottom: 6%;  right: 20%; width: 55px; opacity: .3;  --lotus-rot: -30deg; animation-delay: 2s; }
.lp-lotus-h5 { top: 45%;  left: 42%;  width: 45px; opacity: .18; --lotus-rot: 15deg;  animation-delay: 4s; }

@media (max-width: 767.98px) {
	.lp-lotus-h1, .lp-lotus-h4 { width: 50px !important; }
	.lp-lotus-h2, .lp-lotus-h5 { width: 40px !important; }
	.lp-lotus-h3 { width: 65px !important; }
}

/* Icon leaves cũ - vẫn giữ */
.lp-leaf {
	position: absolute;
	color: var(--lp-sage);
	opacity: .12;
	font-size: 90px;
	animation: lpFloat 8s ease-in-out infinite;
}

.lp-leaf-1 { top: 8%;   left: 25%; transform: rotate(-25deg); animation-delay: 0s; }
.lp-leaf-2 { top: 60%;  right: 25%; font-size: 100px; opacity: .08; animation-delay: 2s; }
.lp-leaf-3 { bottom: 15%; left: 55%; font-size: 70px; transform: rotate(35deg); animation-delay: 4s; }

@keyframes lpFloat {
	0%, 100% { transform: translateY(0) rotate(-25deg); }
	50% { transform: translateY(-14px) rotate(-15deg); }
}

.lp-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .9);
	color: var(--lp-sage-dark);
	padding: 8px 18px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 18px;
	box-shadow: 0 4px 14px rgba(74, 107, 74, .08);
	border: 1px solid var(--lp-sage-light);
}

.lp-hero-badge i {
	color: var(--lp-sage);
	font-size: 14px;
}

.lp-hero-title {
	font-family: 'Lora', serif;
	font-size: 52px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	line-height: 1.15;
	margin-bottom: 18px;
	letter-spacing: -.5px;
}

.lp-hero-title span {
	background: linear-gradient(135deg, var(--lp-terra), var(--lp-terra-dark));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-style: italic;
}

.lp-hero-title .hl {
	color: var(--lp-sage-dark);
	position: relative;
	display: inline-block;
	font-style: italic;
	-webkit-text-fill-color: initial;
	background: none;
}

.lp-hero-title .hl::after {
	content: '';
	position: absolute;
	left: -4px; right: -4px;
	bottom: 4px;
	height: 12px;
	background: linear-gradient(90deg, var(--lp-sage-light), rgba(197, 213, 193, .3));
	z-index: -1;
	border-radius: 4px;
}

.lp-hero-sub {
	font-size: 16px;
	color: var(--lp-text);
	line-height: 1.7;
	margin-bottom: 20px;
}

.lp-hero-sub strong {
	color: var(--lp-sage-dark);
}

/* Service chips */
.lp-hero-services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.lp-service-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--lp-sage-dark);
	padding: 8px 14px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--lp-sage-light);
	box-shadow: 0 3px 10px rgba(74, 107, 74, .06);
	transition: all .2s;
}

.lp-service-chip:hover {
	background: var(--lp-sage);
	color: #fff;
	border-color: var(--lp-sage);
	transform: translateY(-2px);
}

.lp-service-chip i {
	color: var(--lp-terra);
	font-size: 12px;
}

.lp-service-chip:hover i {
	color: #fff;
}

/* Trust */
.lp-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 9px 18px;
	border-radius: 50px;
	margin-bottom: 22px;
	box-shadow: 0 4px 16px rgba(74, 107, 74, .08);
	font-size: 14px;
	border: 1px solid var(--lp-cream-warm);
}

.lp-stars {
	color: #e8a838;
	letter-spacing: 1px;
}

.lp-hero-trust strong {
	color: var(--lp-sage-deep);
}

.lp-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}

.lp-hero-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.lp-hero-features li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--lp-text);
	font-weight: 600;
}

.lp-hero-features i {
	color: var(--lp-sage);
}

/* Hero visual – oval frame + orbital icons */
.lp-hero-visual {
	position: relative;
	aspect-ratio: 1/1;
	max-width: 480px;
	margin: 0 auto;
	padding: 40px;
}

/* Decorative circles behind */
.lp-hero-visual-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.lp-deco-1 {
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(197, 213, 193, .5), transparent 60%);
	animation: lpPulse 6s ease-in-out infinite;
}

.lp-deco-2 {
	top: 10%; left: 10%; right: 10%; bottom: 10%;
	background: radial-gradient(circle at 70% 70%, rgba(242, 221, 208, .6), transparent 60%);
	animation: lpPulse 6s ease-in-out infinite 3s;
}

@keyframes lpPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.05); opacity: .8; }
}

.lp-hero-visual-lotus {
	position: absolute;
	top: -20px;
	right: 10px;
	width: 90px;
	opacity: .35;
	z-index: 1;
	animation: lpSpin 30s linear infinite;
}

.lp-hero-visual-lotus img {
	width: 100%;
	height: auto;
}

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

/* Main image – oval/circle frame */
.lp-hero-visual-frame {
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(74, 107, 74, .25), 0 0 0 8px #fff, 0 0 0 10px var(--lp-sage-mist);
	z-index: 2;
}

.lp-hero-visual-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(45, 58, 46, .35) 100%);
	z-index: 1;
	pointer-events: none;
}

.lp-hero-visual-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

/* Orbital service icons around the image */
.lp-orbit {
	position: absolute;
	background: #fff;
	border-radius: 50px;
	padding: 8px 14px 8px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 10px 24px rgba(74, 107, 74, .18);
	z-index: 3;
	font-size: 13px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	border: 1px solid var(--lp-sage-mist);
	animation: lpFloatBox 4s ease-in-out infinite;
}

.lp-orbit i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}

.lp-orbit-1 {
	top: 8%;
	left: -10px;
	animation-delay: 0s;
}

.lp-orbit-2 {
	top: 15%;
	right: -20px;
	animation-delay: 1s;
}

.lp-orbit-2 i {
	background: linear-gradient(135deg, var(--lp-terra), var(--lp-terra-dark));
}

.lp-orbit-3 {
	bottom: 25%;
	left: -20px;
	animation-delay: 2s;
}

.lp-orbit-4 {
	bottom: 35%;
	right: -14px;
	animation-delay: 3s;
}

.lp-orbit-4 i {
	background: linear-gradient(135deg, #b39268, #8a7143);
}

/* Floating card top-left */
.lp-float {
	position: absolute;
	background: rgba(255, 255, 255, .98);
	padding: 12px 16px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(45, 58, 46, .18);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 3;
	font-size: 13px;
	animation: lpFloatBox 4s ease-in-out infinite;
	border: 1px solid var(--lp-sage-mist);
}

.lp-float strong {
	display: block;
	color: var(--lp-sage-deep);
	font-size: 14px;
	line-height: 1.2;
	margin-bottom: 2px;
}

.lp-float span {
	color: var(--lp-muted);
	font-size: 12px;
}

.lp-float-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.lp-float-tl {
	top: 20px;
	left: -30px;
	animation-delay: 1.5s;
}

@keyframes lpFloatBox {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Rating badge bottom */
.lp-hero-visual-badge {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: 12px 18px;
	border-radius: 60px;
	box-shadow: 0 12px 28px rgba(45, 58, 46, .2);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 3;
	border: 1px solid var(--lp-sage-mist);
}

.lp-hero-visual-badge-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f5b301, #e8a838);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.lp-hero-visual-badge-num {
	font-family: 'Lora', serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	line-height: 1;
}

.lp-hero-visual-badge-lbl {
	font-size: 12px;
	color: var(--lp-muted);
	line-height: 1.3;
	font-weight: 600;
	margin-top: 2px;
	white-space: nowrap;
}

@media (max-width: 991.98px) {
	.lp-hero {
		padding: 32px 0 40px !important;
	}
	.lp-hero-title {
		font-size: 34px;
	}
	.lp-hero-sub {
		font-size: 15px;
	}
	.lp-hero-services {
		justify-content: center;
	}
	.lp-hero-ctas .btn {
		flex: 1;
		min-width: 45%;
		padding: 12px 16px !important;
		font-size: 14px;
	}
	.lp-hero-features {
		justify-content: center;
	}
	.lp-live-bar {
		font-size: 11.5px;
		padding: 5px 12px;
	}
}

@media (max-width: 480px) {
	.lp-hero-title {
		font-size: 28px;
	}
}

/* ============================================
   STATS BAR
   ============================================ */
.lp-stats {
	background:
		var(--lp-pattern-dots-light),
		linear-gradient(135deg, var(--lp-sage-deep) 0%, #1e2a20 100%);
	color: #fff;
	padding: 40px 0 !important;
	position: relative;
	overflow: hidden;
}

.lp-stats::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 50%, rgba(125, 155, 118, .25), transparent 40%),
		radial-gradient(circle at 80% 50%, rgba(201, 131, 102, .15), transparent 40%);
}

.lp-stats .container { position: relative; z-index: 1; }

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

.lp-stat-num {
	font-family: 'Lora', serif;
	font-size: 40px;
	font-weight: 700;
	color: #e6d7b8;
	line-height: 1;
	margin-bottom: 8px;
}

.lp-stat-lbl {
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.4;
}

@media (max-width: 767.98px) {
	.lp-stat-num { font-size: 28px; }
	.lp-stat-lbl { font-size: 12px; }
}

/* ============================================
   INTRO / BENEFITS
   ============================================ */
.lp-intro {
	background:
		var(--lp-pattern-dots),
		#fdfbf6;
	position: relative;
}

.lp-intro::before {
	content: '';
	position: absolute;
	top: 40px; right: 40px;
	width: 180px; height: 180px;
	background: var(--lp-pattern-leaves);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .7;
	pointer-events: none;
}

.lp-intro::after {
	content: '';
	position: absolute;
	bottom: 40px; left: 40px;
	width: 160px; height: 160px;
	background: var(--lp-pattern-leaves);
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(180deg);
	opacity: .7;
	pointer-events: none;
}

@media (max-width: 767.98px) {
	.lp-intro::before,
	.lp-intro::after {
		display: none;
	}
}

.lp-benefit {
	background: #fff;
	border: 1px solid var(--lp-sage-mist);
	border-radius: 20px;
	padding: 28px 22px;
	height: 100%;
	text-align: center;
	transition: all .3s ease;
	position: relative;
}

.lp-benefit:hover {
	transform: translateY(-4px);
	box-shadow: var(--lp-shadow);
	border-color: var(--lp-sage-light);
}

.lp-benefit-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: #fff;
	margin-bottom: 16px;
}

.lp-icon-1 { background: linear-gradient(135deg, #7d9b76, #4a6b4a); }
.lp-icon-2 { background: linear-gradient(135deg, #c98366, #a5654a); }
.lp-icon-3 { background: linear-gradient(135deg, #b39268, #8a7143); }
.lp-icon-4 { background: linear-gradient(135deg, #6f8896, #4a6572); }

.lp-benefit h3 {
	font-family: 'Lora', serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	margin-bottom: 8px;
}

.lp-benefit p {
	font-size: 14px;
	color: var(--lp-muted);
	line-height: 1.6;
	margin: 0;
}

/* ============================================
   TRANSFORM (Trước - Sau)
   ============================================ */
.lp-transform {
	background: linear-gradient(180deg, #fff 0%, #fdfbf6 100%);
	position: relative;
	overflow: hidden;
}

.lp-transform-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: stretch;
	max-width: 900px;
	margin: 0 auto;
}

.lp-transform-card {
	background: #fff;
	border-radius: 24px;
	padding: 32px 28px;
	box-shadow: var(--lp-shadow);
	position: relative;
	border: 2px solid transparent;
	transition: all .3s ease;
}

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

.lp-transform-before {
	background: linear-gradient(180deg, #fef5f2 0%, #fff 100%);
	border-color: rgba(220, 38, 38, .15);
	opacity: .92;
	filter: grayscale(.2);
}

.lp-transform-after {
	background: linear-gradient(180deg, #f0faed 0%, #fff 100%);
	border-color: rgba(125, 155, 118, .3);
	box-shadow: 0 20px 50px rgba(125, 155, 118, .18);
}

.lp-transform-tag {
	position: absolute;
	top: -14px;
	left: 24px;
	background: #94a3b8;
	color: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
}

.lp-transform-tag-hot {
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	box-shadow: 0 4px 12px rgba(125, 155, 118, .35);
}

.lp-transform-emoji {
	font-size: 56px;
	text-align: center;
	margin-bottom: 8px;
	line-height: 1;
}

.lp-transform-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lp-transform-card li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 14.5px;
	color: var(--lp-text);
	line-height: 1.5;
}

.lp-transform-before li i {
	color: #dc2626;
	background: #fee2e2;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	flex-shrink: 0;
	margin-top: 2px;
}

.lp-transform-after li i {
	color: #fff;
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	flex-shrink: 0;
	margin-top: 2px;
}

.lp-transform-arrow {
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
}

.lp-transform-arrow i {
	font-size: 32px;
	color: var(--lp-terra);
	animation: lpArrow 1.5s ease-in-out infinite;
}

.lp-transform-arrow span {
	background: linear-gradient(135deg, var(--lp-terra), var(--lp-terra-dark));
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

@keyframes lpArrow {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}

@media (max-width: 767.98px) {
	.lp-transform-grid {
		grid-template-columns: 1fr;
	}
	.lp-transform-arrow {
		padding: 12px 0;
	}
	.lp-transform-arrow i {
		transform: rotate(90deg);
		font-size: 24px;
	}
	.lp-transform-arrow i.fa-arrow-right {
		animation: lpArrowVert 1.5s ease-in-out infinite;
	}
	@keyframes lpArrowVert {
		0%, 100% { transform: rotate(90deg) translateX(0); }
		50% { transform: rotate(90deg) translateX(6px); }
	}
}

/* ============================================
   PRICING
   ============================================ */
.lp-pricing {
	background:
		var(--lp-pattern-diamond),
		linear-gradient(180deg, var(--lp-cream) 0%, #fdfbf6 100%);
	position: relative;
	overflow: hidden;
}

.lp-pricing::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 24px;
	background: var(--lp-pattern-wave);
	background-size: 60px 30px;
	background-repeat: repeat-x;
	opacity: .4;
	transform: scaleY(-1);
	pointer-events: none;
}

.lp-price-card {
	background: #fff;
	border-radius: 24px;
	padding: 32px 28px;
	height: 100%;
	box-shadow: var(--lp-shadow);
	border: 2px solid transparent;
	position: relative;
	transition: all .3s ease;
	display: flex;
	flex-direction: column;
}

.lp-price-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--lp-shadow-lg);
}

.lp-price-featured {
	border-color: var(--lp-sage);
	box-shadow: 0 20px 50px rgba(74, 107, 74, .18);
	background: linear-gradient(180deg, #fff 0%, var(--lp-sage-mist) 100%);
}

.lp-price-ribbon {
	position: absolute;
	top: -14px;
	right: 24px;
	background: linear-gradient(135deg, var(--lp-terra), var(--lp-terra-dark));
	color: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	box-shadow: 0 4px 12px rgba(201, 131, 102, .4);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lp-price-head {
	text-align: center;
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--lp-sage-light);
	margin-bottom: 20px;
}

.lp-price-head h3 {
	font-family: 'Lora', serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--lp-sage-deep);
	margin-bottom: 6px;
}

.lp-price-head p {
	font-size: 14px;
	color: var(--lp-muted);
	margin: 0;
}

.lp-price-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	flex: 1;
}

.lp-price-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--lp-cream-warm);
	font-size: 15px;
}

.lp-price-list li:last-child {
	border-bottom: none;
}

.lp-price-time {
	color: var(--lp-text);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lp-price-time i {
	color: var(--lp-sage);
}

.lp-price-value {
	font-family: 'Lora', serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--lp-sage-deep);
}

.lp-price-value.hot {
	color: var(--lp-terra-dark);
}

.lp-guarantee {
	max-width: 620px;
	margin: 40px auto 0;
	background: #fff;
	border-radius: 60px;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: var(--lp-shadow);
	border: 1px solid var(--lp-sage-mist);
}

.lp-guarantee i {
	font-size: 32px;
	color: var(--lp-sage);
	flex-shrink: 0;
}

.lp-guarantee div {
	font-size: 14px;
	color: var(--lp-text);
	line-height: 1.5;
}

@media (max-width: 767.98px) {
	.lp-guarantee {
		border-radius: 20px;
		text-align: left;
	}
}

/* ============================================
   STAFF
   ============================================ */
.lp-staff {
	background:
		var(--lp-pattern-bamboo) left top / 40px 120px repeat-y,
		var(--lp-pattern-bamboo) right top / 40px 120px repeat-y,
		#fdfbf6;
	position: relative;
}

.lp-staff .staff-card {
	background: #fff;
	box-shadow: 0 8px 24px rgba(74, 107, 74, .08);
	transition: all .3s ease;
}

.lp-staff .staff-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(74, 107, 74, .15);
}

.lp-staff .staff-card {
	transition: all .3s ease;
}

.lp-staff .staff-card:hover {
	transform: translateY(-4px);
}

/* ============================================
   BOOKING FORM – dùng style trang chủ (home-booking)
   Pulse animation nhẹ cho nút submit để nổi bật
   ============================================ */
body.landing-tiktok .home-booking .wpcf7 input[type="submit"],
body.landing-tiktok .home-booking .wpcf7 .wpcf7-submit {
	animation: lpPulseSubmit 2.2s ease-out infinite;
}

@keyframes lpPulseSubmit {
	0%, 100% { box-shadow: 0 0 0 0 rgba(125, 155, 118, .5); }
	50%      { box-shadow: 0 0 0 12px rgba(125, 155, 118, 0); }
}

/* ============================================
   STICKY CTA (mobile)
   ============================================ */
.lp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	display: flex;
	background: #fff;
	box-shadow: 0 -6px 20px rgba(74, 107, 74, .12);
	border-top: 1px solid var(--lp-sage-mist);
}

.lp-sticky-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 4px;
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	color: #333;
	border: none;
	background: transparent;
	transition: background .2s;
	line-height: 1.2;
}

.lp-sticky-btn i {
	font-size: 20px;
	margin-bottom: 3px;
}

.lp-sticky-call { color: var(--lp-terra-dark); }
.lp-sticky-call:hover { color: var(--lp-terra-dark); }

.lp-sticky-zalo { color: #0068ff; }
.lp-sticky-zalo:hover { color: #0068ff; }

.lp-sticky-book {
	color: #fff !important;
	background: linear-gradient(135deg, var(--lp-sage), var(--lp-sage-dark));
	font-weight: 800;
	position: relative;
	overflow: hidden;
}

.lp-sticky-book::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
	transform: translateX(-100%);
	animation: lpShine2 2.5s infinite;
}

@keyframes lpShine2 {
	100% { transform: translateX(100%); }
}

.lp-sticky-book:hover {
	color: #fff !important;
}

@media (max-width: 380px) {
	.lp-sticky-btn { font-size: 10px; }
	.lp-sticky-btn i { font-size: 18px; }
}