.section-introduce-v2 {
	background-color: black;
	display: flex;
	flex-direction: column;
	align-items: center;

	position: relative;
	padding: 56px 0px 0px 0px;
}

/* ─────────────────────────────────────────────────────────────
   Aug 2026 promotion — ทุกกฎอยู่ใต้ .promo-aug26 เท่านั้น
   ก่อน 1 ส.ค. หน้าเว็บจะไม่มีคลาสนี้ แบนเนอร์ ก.ค. จึงทำงานเหมือนเดิม
   ดูสวิตช์วันที่ที่ insurverse_is_aug26_promo() ใน functions.php
   ───────────────────────────────────────────────────────────── */
.section-introduce-v2.promo-aug26 {
	overflow: hidden;

	/* ตัวแปรคุมตำแหน่งน้องมินท์บนฉากรถ (ค่าเป็น % ของ .hero-frame)
	   mobile ใช้ไฟล์ M- (1080x1080) รถอยู่กลางภาพ */
	--stage-ratio: 1 / 1;
	--stage-ratio-num: 1;
	--stage-bg: url('../../images/M-ISV-AUG26-BG-homepage.png');
	--actor-x: 9%;   /* ระยะจากขอบซ้ายของกรอบ */
	--actor-b: 21%;   /* ระยะจากขอบล่างของกรอบ — คุมว่านั่งสูงแค่ไหนบนกระโปรงหน้ารถ */
	--actor-w: 70%;   /* ขนาดน้องมินท์เทียบกับความกว้างกรอบ (ใหญ่กว่านี้ข้อความ "ตัวแม่" จะล้นขอบขวา) */
}

/* กรอบเวที: mobile อยู่ในสายงานปกติ (ใต้ข้อความ) */
.promo-aug26 .hero-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--stage-ratio);
	overflow: hidden;
	container-type: size;
}

/* .hero-frame = ระบบพิกัดของไฟล์ BG — กว้างพอจะคลุมกรอบเสมอ (เลียนแบบ background-size: cover)
   ยึดขอบล่าง เพราะถ้าต้องตัด ให้ตัดจากด้านบน (ไฟสปอตไลต์) ไม่ใช่ตัดล้อรถกับขาน้องมินท์ */
.promo-aug26 .hero-frame {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: max(100%, calc(100cqh * var(--stage-ratio-num)));
	aspect-ratio: var(--stage-ratio);
	background-image: var(--stage-bg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.intro-container-v2 {
	display: flex;
	flex-direction: column;
	align-items: center;

	max-width: 1166px;
	margin: auto;
	padding: 0 16px;
	width: 100%;
}

.intro-text-box {
	position: relative;
	z-index: 1;
}

.intro-text-box .intro-main-title {
	padding-bottom: 4px;
	color: white;
	font-size: 48px;
	line-height: 72px;
	font-weight: bold;
}

.intro-text-box .intro-sub-title {
	padding-bottom: 4px;
	color: white;
	font-size: 32px;
	line-height: 48px;
	font-weight: 600;
}
.intro-text-box .intro-slogan {
	color: white;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
}

.intro-btn-container {
	padding-top: 40px;
	display:flex;
	grid-area: btn;
}

.intro-btn-container a {
	font-size: 20px !important;
	line-height: 30px !important;
	text-decoration: none;
	border: 2px solid transparent !important;
}

.intro-btn-container a:hover,
.intro-btn-container a:focus {
	border-color: #1DE6C1 !important;
	border-radius: 10px;
	text-decoration: none;
}

.underline-bg {
	background-image: url('https://media.insurverse.co.th/landingpage/2025/04/Group-1000004911.webp');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 18px;

	display: inline-block;
	padding-right: 16px;
	padding-bottom: 8px;
	margin: 0;
}

.intro-container-v2 > * {
	width: 100%;
}

.slide-section-box {
	padding: 0 16px;
	position: absolute;
	left: 0;
	bottom: -40px;
	width: 100%;
}

.slide-section-image {
	width: 131px;
}

.slide-section-image:hover {
	cursor: pointer;
}

.intro-banner-box {
	margin-top: 32px;
}

.intro-btn-container .btn-primary {
	padding: 13px 15px !important;
}

/* ก.ค. (ของเดิม): lottie อยู่ในสายงานปกติ ขนาดคงที่ */
.banner-lottie-wrapper {
	max-width: 100%;
	width: 360px;
	height: 360px;
	position: relative;
}

/* ส.ค.: วางเป็น % ของ .hero-frame → เลื่อน/ย่อ/ขยายไปพร้อมฉากรถเสมอ */
.promo-aug26 .banner-lottie-wrapper {
	position: absolute;
	left: var(--actor-x);
	bottom: var(--actor-b);
	width: var(--actor-w);
	/* height: auto ต้องเขียนไว้ — critical CSS ใน header.php ล็อกความสูงเป็น px
	   ทำให้กล่องผิดสัดส่วนแล้วน้องมินท์เลื่อนขึ้นลงตอนเปลี่ยนขนาดจอ */
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Poster-first LCP: static image เป็น LCP element จริง */
.lottie-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}

/* dotlottie-player ซ่อนไว้ก่อน ค่อย fade-in เมื่อ ready */
.banner-lottie-wrapper dotlottie-player {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.banner-lottie-wrapper.lottie-ready dotlottie-player {
	opacity: 1;
}

/* เมื่อ lottie พร้อมแล้ว ซ่อน poster (ไม่ render อีก) */
.banner-lottie-wrapper.lottie-ready .lottie-poster {
	display: none;
}

/* ─────────────────────────────────────────────────────────────
   ดาววิบวับบนแบนเนอร์ — element ถูกสร้างจาก page-home.js
   z-index: 0 → อยู่หลังข้อความ (.intro-text-box = 1) และหลังน้องมินท์เสมอ
   overflow: hidden อยู่ที่ .hero-sky เท่านั้น ห้ามใส่ที่ section
   เพราะ .slide-section-box บนมือถือล้นออกนอกกรอบ (bottom: -40px) อยู่
   ───────────────────────────────────────────────────────────── */
.hero-sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ดาวเล็ก: จุดกลมกะพริบอยู่กับที่ */
.hero-star {
	position: absolute;
	border-radius: 50%;
	background: white;
	opacity: 0.15;
	box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.7);
}

/* ดาวใหญ่: ดาว 4 แฉกของแบรนด์ สีมิ้นต์ #1DE6C1 + เรืองแสงสีเดียวกัน */
.hero-sparkle {
	position: absolute;
	opacity: 0.1;
	background-image: url('../../images/wink-mint.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 0 6px rgba(29, 230, 193, 0.9));
}

/* ดาว 70 ดวงวิ่ง animation ตลอด — เคารพ prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	.hero-star {
		animation: isv-twinkle var(--dur) ease-in-out var(--delay) infinite;
	}

	.hero-sparkle {
		animation: isv-sparkle var(--dur) ease-in-out var(--delay) infinite;
	}
}

@keyframes isv-twinkle {
	0%,
	100% {
		opacity: 0.15;
		transform: scale(0.6);
	}

	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

@keyframes isv-sparkle {
	0%,
	100% {
		opacity: 0.1;
		transform: scale(0.4) rotate(0deg);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(90deg);
	}
}

@media only screen and (min-width: 768px) {
	.section-introduce-v2 {
		align-items: initial;
		padding: 64px 16px 64px 16px;
	}

	.section-introduce-v2.promo-aug26 {
		/* desktop ใช้ไฟล์ D- (1440x652) — รถอยู่ครึ่งขวา เว้นครึ่งซ้ายไว้ให้ข้อความ
		   ค่า --actor-* วัดจาก mockup-VDOhome-AUG26.png ของดีไซน์ */
		--stage-ratio: 1440 / 652;
		--stage-ratio-num: 2.2086;
		--stage-bg: url('../../images/D-ISV-AUG26-BG-homepage.png');
		--actor-x: 50%;
		--actor-b: 3%;
		--actor-w: 43%;

		/* สูงตามสัดส่วนไฟล์ BG เพื่อไม่ให้ crop — min-height กันข้อความล้นตอนจอแคบ
		   width: 100% จำเป็น ไม่งั้น aspect-ratio จะไปคำนวณความกว้างจาก min-height แล้วล้นจอ */
		width: 100%;
		aspect-ratio: var(--stage-ratio);
		min-height: 520px;
		justify-content: center;
	}

	/* desktop: เวทีเป็นฉากหลังเต็มพื้นที่ ข้อความลอยทับด้านซ้าย */
	.promo-aug26 .hero-stage {
		position: absolute;
		inset: 0;
		width: auto;
		aspect-ratio: auto;
	}

	.promo-aug26 .intro-container-v2 {
		position: relative;
		z-index: 1;
	}

	.section-introduce-v2 .slide-section-box {
		margin-top: 0;
	}

	.intro-container-v2 {
		flex-direction: row;
	}

	.intro-text-box .intro-main-title {
		padding-bottom: 8px;
		font-size: 72px;
		line-height: 108px;
	}

	.intro-text-box .intro-sub-title {
		padding-bottom: 12px;
		font-size: 48px;
		line-height: 72px;
	}
	.intro-text-box .intro-slogan {
		font-size: 24px;
		line-height: 36px;
		white-space: nowrap;
	}

	.intro-container-v2 > * {
		width: 50%;
	}

	.slide-section-box {
		display: flex;
		max-width: 1166px;
		margin: 32px auto 0;
		position: initial;
	}

	.intro-btn-container .btn-primary {
		padding: 13px 56px !important;
	}

	/* ก.ค. (ของเดิม) */
	.banner-lottie-wrapper {
		width: 567px;
		height: 567px;
	}

	.promo-aug26 .banner-lottie-wrapper {
		left: var(--actor-x);
		bottom: var(--actor-b);
		width: var(--actor-w);
		height: auto;
	}
}
/* ─────────────────────────────────────────────────────────────
   Sep 2026 promotion (ครบรอบ 4 ปี) — ทุกกฎอยู่ใต้ .promo-sep26 เท่านั้น
   ก่อน 1 ก.ย. หน้าเว็บจะไม่มีคลาสนี้ แบนเนอร์ ส.ค. จึงทำงานเหมือนเดิม
   ดูสวิตช์วันที่ที่ insurverse_is_sep26_promo() ใน functions.php

   เดือนนี้เป็นภาพเดียวจบ (ไม่มี lottie / ไม่มีชั้นตัวละคร) จึงไม่ต้องใช้ --actor-*
   เหลือแค่กรอบเวทีที่รักษาสัดส่วนไฟล์ภาพไว้
   ───────────────────────────────────────────────────────────── */
.section-introduce-v2.promo-sep26 {
	overflow: hidden;

	/* mobile ใช้ไฟล์ M- (1300x1200) — ตัวการ์ตูนกับเค้กอยู่กลางภาพ */
	--stage-ratio: 1300 / 1200;
	--stage-ratio-num: 1.0833;
}

/* กรอบเวที: mobile อยู่ในสายงานปกติ (ใต้ข้อความ) */
.promo-sep26 .hero-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--stage-ratio);
	overflow: hidden;
	container-type: size;
}

/* .hero-frame = ระบบพิกัดของไฟล์ภาพ — กว้างพอจะคลุมกรอบเสมอ (เลียนแบบ background-size: cover)
   ยึดขอบล่าง เพราะถ้าต้องตัด ให้ตัดจากด้านบน (ฉากดำ/ดาว) ไม่ใช่ตัดฐานเค้ก */
.promo-sep26 .hero-frame {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: max(100%, calc(100cqh * var(--stage-ratio-num)));
	aspect-ratio: var(--stage-ratio);
}

.promo-sep26 .hero-frame picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* กรอบมีสัดส่วนเท่าไฟล์อยู่แล้ว cover จึงไม่ตัดอะไร แค่กัน rounding ไม่ให้ภาพยืด */
.promo-sep26 .hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (min-width: 768px) {
	.section-introduce-v2.promo-sep26 {
		/* desktop ใช้ไฟล์ D- (1440x652) — ภาพอยู่ครึ่งขวา เว้นครึ่งซ้ายไว้ให้ข้อความ */
		--stage-ratio: 1440 / 652;
		--stage-ratio-num: 2.2086;

		/* สูงตามสัดส่วนไฟล์เพื่อไม่ให้ crop — min-height กันข้อความล้นตอนจอแคบ
		   width: 100% จำเป็น ไม่งั้น aspect-ratio จะไปคำนวณความกว้างจาก min-height แล้วล้นจอ */
		width: 100%;
		aspect-ratio: var(--stage-ratio);
		min-height: 520px;
		justify-content: center;
	}

	/* desktop: เวทีเป็นฉากหลังเต็มพื้นที่ ข้อความลอยทับด้านซ้าย */
	.promo-sep26 .hero-stage {
		position: absolute;
		inset: 0;
		width: auto;
		aspect-ratio: auto;
	}

	.promo-sep26 .intro-container-v2 {
		position: relative;
		z-index: 1;
	}
}

/* ─────────────────────────────────────────────────────────────
   Oct 2026 promotion (Halloween) — ทุกกฎอยู่ใต้ .promo-oct26 เท่านั้น
   ดูสวิตช์วันที่ที่ insurverse_is_oct26_promo() ใน functions.php

   ฉากปราสาท = <picture> (โครงเดียวกับ ก.ย.) + น้องมินท์กับรถ = <video> วางทับ
   วิดีโอพื้นดำทึบ (ดีไซน์ไม่ได้ส่ง alpha มา) → mix-blend-mode: screen ทำให้ดำ = โปร่งใส
   ───────────────────────────────────────────────────────────── */
.section-introduce-v2.promo-oct26 {
	overflow: hidden;

	/* mobile ใช้ไฟล์ M- (1080x1080) — วิดีโอก็ 1080x1080 ดีไซน์ทำมาให้ซ้อนทับกันพอดี */
	--stage-ratio: 1 / 1;
	--stage-ratio-num: 1;
	--actor-x: 0%;
	--actor-b: 0%;
	--actor-h: 100%;
}

/* กรอบเวที: mobile อยู่ในสายงานปกติ (ใต้ข้อความ) */
.promo-oct26 .hero-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--stage-ratio);
	overflow: hidden;
	container-type: size;
}

/* .hero-frame = ระบบพิกัดของไฟล์ฉาก — กว้างพอจะคลุมกรอบเสมอ (เลียนแบบ background-size: cover)
   ยึดขอบล่าง เพราะถ้าต้องตัด ให้ตัดท้องฟ้าด้านบน ไม่ใช่ตัดล้อรถกับรองเท้าน้องมินท์ */
.promo-oct26 .hero-frame {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: max(100%, calc(100cqh * var(--stage-ratio-num)));
	aspect-ratio: var(--stage-ratio);
}

.promo-oct26 .hero-frame picture {
	display: block;
	width: 100%;
	height: 100%;
}

.promo-oct26 .hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* น้องมินท์: วางเป็น % ของ .hero-frame → เลื่อน/ย่อ/ขยายไปพร้อมฉากเสมอ */
.promo-oct26 .hero-actor {
	position: absolute;
	left: var(--actor-x);
	bottom: var(--actor-b);
	height: var(--actor-h);
	width: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* หมอก — อยู่ใน hero เท่านั้น (section มี overflow: hidden)
   z-index 0 → เหนือฉาก ใต้ข้อความ/ปุ่ม (.intro-container-v2 = 1) */
.promo-oct26 .isv-fog-effect {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.promo-oct26 .isv-fog {
	position: absolute;
	left: -15%;
	bottom: -10px;
	width: 130%;
	height: 105px;
	background-image: url('../../images/oct26-fog.png');
	background-repeat: repeat-x;
	background-position: 0 bottom;
	background-size: 380px 105px;
	opacity: .44;
	filter: blur(1px);
	animation: isv-fog-drift 28s linear infinite;
}

.promo-oct26 .isv-fog--back {
	bottom: 28px;
	height: 75px;
	background-size: 300px 75px;
	opacity: .18;
	animation-duration: 42s;
	animation-direction: reverse;
}

@keyframes isv-fog-drift {
	to {
		background-position: 1080px bottom;
	}
}

@media (prefers-reduced-motion: reduce) {
	.promo-oct26 .isv-fog {
		animation: none;
	}
}

@media only screen and (min-width: 768px) {
	.section-introduce-v2.promo-oct26 {
		/* desktop ใช้ไฟล์ D- (1440x652) — ฉากอยู่ครึ่งขวา เว้นครึ่งซ้ายไว้ให้ข้อความ
		   --actor-* วัดจาก ตัวอย่าง.png ของดีไซน์ (ชุด v2: รถย้ายจากฉากมาอยู่ในวิดีโอ ฉากถูกยกขึ้น)
		   ยึดตำแหน่งน้องมินท์+หัวข้อ — รถในตัวอย่างวาดใหญ่กว่ารถในวิดีโอเล็กน้อย จึงไม่ใช้รถวัด */
		--stage-ratio: 1440 / 652;
		--stage-ratio-num: 2.2086;
		--actor-x: 47.2%;
		--actor-b: 10.9%;
		--actor-h: 98.6%;

		width: 100%;
		aspect-ratio: var(--stage-ratio);
		min-height: 520px;
		justify-content: center;
	}

	.promo-oct26 .hero-stage {
		position: absolute;
		inset: 0;
		width: auto;
		aspect-ratio: auto;
	}

	.promo-oct26 .intro-container-v2 {
		position: relative;
		z-index: 1;
	}

	.promo-oct26 .isv-fog {
		height: 165px;
		background-size: 590px 165px;
	}

	.promo-oct26 .isv-fog--back {
		bottom: 45px;
		height: 110px;
		background-size: 400px 110px;
	}
}

/* tablet: กรอบ 1440x652 ถูกบังคับกว้างกว่าจอ (min-height 520px) แล้วครอบกึ่งกลาง → ขอบขวาโดนตัด
   ย่อน้องมินท์ลงเหลือ 85% (ยังยึดขอบล่าง รองเท้าไม่ลอย) ให้มือถือฟักทองอยู่ในจอ
   ยึดกรอบขวาแทนไม่ได้ — หัวข้อในวิดีโอจะไปทับข้อความ hero ของเว็บ */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.section-introduce-v2.promo-oct26 {
		--actor-h: 85%;
	}
}