/*
 * CSS cho Custom Page Template — Snera Homepage
 * Đặt file này tại: wp-content/themes/flatsome-child/assets/css/[page_id].css
 *
 * Viewport fix: viewport-fit=cover được set trong custompage.php qua add_filter('wp_head')
 * hoặc có thể thêm trực tiếp vào header.php của theme.
 */

/* ================================================================
   BASE RESET
   overscroll-behavior: ngăn pull-to-refresh (Android) + bounce (iOS)
   dvh fallback: 100vh cho browser cũ, 100dvh cho browser hỗ trợ
   ================================================================ */
html, body {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	overscroll-behavior: none;
}

body { background: #fff; }

/* ================================================================
   SCROLL ROOT WRAPPER
   ================================================================ */
.snera-scroll-root {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-behavior: smooth;
	position: relative;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: touch;
}

/* ================================================================
   SECTIONS — BASE
   ================================================================ */
.snera-scroll-root .snera-section {
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.snera-scroll-root .section-content {
	height: 100%;
	padding: 60px 40px;
	padding-left:  max(40px, env(safe-area-inset-left));
	padding-right: max(40px, env(safe-area-inset-right));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	min-width: 0;
}

/* ================================================================
   SECTION HEIGHTS (dvh fallback pattern)
   ================================================================ */
.snera-scroll-root .home-hero {
	height: 100vh; height: 100dvh;

}

.snera-scroll-root .hero_statement {
	height: 100vh; height: 100dvh;
	position: relative;
}

.snera-scroll-root .hero_statement .section-content {
	flex-direction: column;
	gap: 0;
	height: 100%;
	padding: 0;
	position: relative;
}

/* ================================================================
   HERO STATEMENT — TEXT BLOCK
   ================================================================ */
.snera-scroll-root .hero_statement-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 6vh, 60px) clamp(16px, 5vw, 40px);
	text-align: center;
	width: 100%;
	max-width: 100vw;
	z-index: 10;
	transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.snera-scroll-root .hero_statement-text h2 {
	opacity: 0;
	transform: translateY(0);
	transition: opacity 1s ease-out, transform 0.5s ease-out;
	word-break: break-word;
	overflow-wrap: break-word;
}

.snera-scroll-root .hero_statement-text p {
	opacity: 0;
	transition: opacity 0.5s ease-out;
	word-break: break-word;
	overflow-wrap: break-word;
}

.snera-scroll-root .hero_statement-text.show-h2 h2  { opacity: 1; }
.snera-scroll-root .hero_statement-text.move-h2 h2  { transform: translateY(-24px); }
.snera-scroll-root .hero_statement-text.show-p p    { opacity: 1; }
.snera-scroll-root .hero_statement-text.move-up-final { top: calc(40% - 70px) !important; }

/* ================================================================
   HERO STATEMENT — IMAGE BLOCK + MASK ANIMATION
   ================================================================ */
.snera-scroll-root .hero_statement-image {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 50vh; height: 50dvh;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	z-index: 1;
	transition: opacity 0.8s ease-out;
}
.snera-scroll-root .hero_statement-image.image-visible { opacity: 1; }

.snera-scroll-root .mask {
	--hero-mask-duration: 900ms;
	--hero-step-delay: 300ms;
	--hero-spin-duration: 15000ms;
	width: 100%; height: 100%;
	border-radius: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-clip-path: circle(25vh at 50% 50%);
	clip-path: circle(25vh at 50% 50%);
	will-change: clip-path;
}

.snera-scroll-root .hero_statement-image.mask-animate .mask {
	-webkit-animation: sneraHeroMaskExpand var(--hero-mask-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation:         sneraHeroMaskExpand var(--hero-mask-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@-webkit-keyframes sneraHeroMaskExpand {
	from { -webkit-clip-path: circle(25vh at 50% 50%); }
	to   { -webkit-clip-path: circle(50vw at 50% 50%); }
}
@keyframes sneraHeroMaskExpand {
	from { clip-path: circle(25vh at 50% 50%); }
	to   { clip-path: circle(50vw at 50% 50%); }
}

.snera-scroll-root .mask img {
	width: 100%; height: 200vh;
	object-fit: cover;
	transform-origin: 50% 50%;
	transform: rotate(0deg);
	will-change: transform;
}
.snera-scroll-root .hero-rotating-img {
	width: 70.71%; height: 70.71%;
	object-fit: contain;
}

.snera-scroll-root .hero_statement-image.mask-animate .hero-rotating-img {
	-webkit-animation: sneraHeroImgSpin var(--hero-spin-duration) linear infinite;
	animation:         sneraHeroImgSpin var(--hero-spin-duration) linear infinite;
	-webkit-animation-delay: calc(var(--hero-mask-duration) + var(--hero-step-delay));
	animation-delay:         calc(var(--hero-mask-duration) + var(--hero-step-delay));
}
@-webkit-keyframes sneraHeroImgSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes         sneraHeroImgSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ================================================================
   UNIVERSAL TEXT ANIMATION (h2.sub-tittle, p.paragrap_content)
   ================================================================ */
.snera-scroll-root h2.sub-tittle {
	opacity: 0;
	transform: translateY(0);
	transition: opacity 1s ease-out, transform 0.5s ease-out;
	margin-bottom: 0;
	min-width: 0; max-width: 100%;
	word-break: break-word; overflow-wrap: break-word;
}
.snera-scroll-root h2.sub-tittle.no-transition { transition: none !important; }
.snera-scroll-root h2.sub-tittle.show-h2 { opacity: 1; transition: opacity 1s ease-out !important; }
.snera-scroll-root h2.sub-tittle.move-h2 { transform: translateY(-24px); transition: transform 0.5s ease-out !important; }

.snera-scroll-root p.paragrap_content {
	opacity: 0;
	transition: opacity 0.5s ease-out;
	min-width: 0;
	word-break: break-word; overflow-wrap: break-word;
}
.snera-scroll-root p.paragrap_content.no-transition { transition: none !important; }
.snera-scroll-root p.paragrap_content.show-p { opacity: 1; transition: opacity 0.5s ease-out !important; }

/* ================================================================
   MAIN PILLARS (200vh)
   ================================================================ */
.snera-scroll-root .main_pillars {
	height: 200vh; height: 200dvh;
	flex-direction: column;
}
.snera-scroll-root .main_pillars::before {
	content: "";
	position: absolute; top: -32vh; left: 0;
	width: 100%; height: 200vh;
	background: url("https://sneragroup.vn/wp-content/themes/flatsome-child/assets/images/1000004262.svg") center/cover no-repeat;

}
.snera-scroll-root .main_pillars .section-content {
	height: 200%;
	flex-direction: column;
	justify-content: space-between;
	padding: 60px 40px;
	padding-left:  max(40px, env(safe-area-inset-left));
	padding-right: max(40px, env(safe-area-inset-right));
}
.snera-scroll-root .main_pillars-top {
	height: 100vh; height: 100dvh;
	display: flex; flex-direction: column; flex: 0 0 auto; box-sizing: border-box;
}
.snera-scroll-root .main_pillars-top-inner {
	display: flex; flex-direction: column;
	width: 100%; min-width: 0;
	margin-top: auto; margin-bottom: 57vh;
}
.snera-scroll-root .main_pillars-bottom {
	height: 100vh; height: 100dvh;
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
	overflow: hidden;
}
.snera-scroll-root .main_pillars-bottom-track {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	/* KHÔNG justify-content:center — làm translate3d lệch vị trí */
}
/* Desktop: 3 cột — 1 block duy nhất, không duplicate */
.snera-scroll-root .main_pillars-bottom-child {
	flex: 0 0 33.333%;
	min-width: 33.333%;
	max-width: 33.333%;
	display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 32px;
	box-sizing: border-box;
}
.snera-scroll-root .main_pillars-bottom-child:nth-child(2) { transform: translateY(50px); }
.snera-scroll-root .main_pillars-bottom-child-image { object-fit: contain; }
.snera-scroll-root .main_pillars-bottom-child-title {
	font-size: 2.25rem; color: #152B1C;
	text-align: center; max-width: 100%; margin-bottom: 0;
	overflow-wrap: break-word; word-break: break-word; hyphens: auto;
	font-family:'MyFont',sans-serif; line-height: 0;
}
.snera-scroll-root .main_pillars-bottom-child-content {
	font-size: 1.125rem; color: rgba(21, 43, 28, 0.7); text-align: center;
	width: 100%; max-width: min(100%, calc(100vw - 48px));
	box-sizing: border-box; padding: 0px 2em;
	overflow-wrap: break-word; word-break: break-word; line-height: 1.5;
}

/* Mobile track — ẩn trên desktop */
.snera-scroll-root .main_pillars-bottom-track-mobile { display: none; }

/* ================================================================
   CORE VALUES (100vh)
   ================================================================ */
.snera-scroll-root .core-values {
	height: 100vh; height: 100dvh;
	font-size: 2.5rem; font-weight: bold; color: white;
}


/* ================================================================
   HOME PRODUCT
   ================================================================ */
.snera-scroll-root .home_product {
	min-height: 0;
	background: url(https://sneragroup.vn/wp-content/uploads/2026/03/Frame-1000004332.svg) center/cover no-repeat;
	position: relative;
	overflow: hidden;
}
.snera-scroll-root .home_product .section-content {
	width: 100%; max-width: 100%; height: auto;
	display: flex; flex-direction: column; flex-wrap: nowrap;
	gap: 0; padding: 0; align-items: stretch;
	overflow: hidden;
}
/*
 * FIX iOS: display:contents → flex
 * Desktop: các child xếp dọc (flex-direction: column từ parent .section-content)
 * nhưng track cần là container thật để JS có thể set transform
 */
.snera-scroll-root .home_product-track {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.snera-scroll-root .home_product-child {
	width: 100%;
	min-height: 75vh; height: 75vh; flex: 0 0 75vh;
	display: flex; align-items: center; justify-content: center;
	gap: clamp(24px, 4vw, 96px);
	padding: clamp(32px, 6vh, 60px) clamp(16px, 5vw, 80px);
	padding-left:  max(clamp(16px, 5vw, 80px), env(safe-area-inset-left));
	padding-right: max(clamp(16px, 5vw, 80px), env(safe-area-inset-right));
	box-sizing: border-box; overflow: hidden;
}
.snera-scroll-root .home_product-child:nth-child(odd)  { flex-direction: row;        justify-content: center; }
.snera-scroll-root .home_product-child:nth-child(even) { flex-direction: row-reverse; justify-content: center; }
.snera-scroll-root .home_product-image {
	max-width: 45%; width: auto; max-height: 58vh;
	object-fit: contain; flex-shrink: 0;
}
.snera-scroll-root .home_product-text {
	text-align: left; display: flex;
	flex-direction: column; max-width: 520px;
	justify-content: center; min-width: 0;
}
.snera-scroll-root .home_product-label {
	font-size: 24px;
	color: rgba(21, 43, 28, 0.3); text-transform: uppercase;
	letter-spacing: 1px; overflow-wrap: break-word; word-break: break-word;
}
.snera-scroll-root .home_product-title {
	font-size: 3em; margin-bottom: 0;
	color: #152B1C; font-family: 'Myfont',serif; font-weight: 300;
	overflow-wrap: break-word; word-break: break-word;
}
.snera-scroll-root .home_product-content {
	font-size: 18px;
	color: rgba(21, 43, 28, 0.7);
	width: 100%; max-width: min(520px, 100%);
	box-sizing: border-box;
	overflow-wrap: break-word; word-break: break-word; line-height: 1.55;
}
.snera-scroll-root .home_product-text .button {
	display: inline-flex;
	align-items: center; justify-content: center;
	padding: 0 30px;
	min-height: 44px;
	background: #333; color: white;
	text-decoration: none; border-radius: 99px;
	transition: background 0.3s ease, transform 0.3s ease;
	cursor: pointer; border: none; font-size: 1rem;
	width: 150px; text-align: center;
}
.snera-scroll-root .button:hover       { background: #000; transform: translateY(-2px); }
.snera-scroll-root .button.white       { background: white; color: #333; }
.snera-scroll-root .button.white:hover { background: #f0f0f0; }
.main_pillars-bottom-child-image{width: 260px;}

/* ================================================================
   CONTACT FORM (100vh)
   ================================================================ */
	.contact_form7{background-image: url(https://sneragroup.vn/wp-content/uploads/2026/03/Contact.png);}
/* ================================================================
   FOOTER (được inject vào bởi custompage.php)
   ================================================================ */
.snera-scroll-root > footer {
	padding-bottom: env(safe-area-inset-bottom);
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
.snera-scroll-root .sub-tittle {
	font-size: clamp(1.4rem, 4vw, 3rem);
	color: #152B1C; margin-bottom: 20px;
	word-break: break-word; overflow-wrap: break-word;
}
.snera-scroll-root .paragrap_content {
	font-size: clamp(0.85rem, 2vw, 1.125rem);
	color: rgba(21, 43, 28, 0.7); line-height: 1.6;
	width: 100%; max-width: min(600px, calc(100vw - 48px));
	margin-left: auto; margin-right: auto;
	box-sizing: border-box;
	overflow-wrap: break-word; word-break: break-word;
}

/* ================================================================
   RESPONSIVE — ≤768px (portrait)
   ================================================================ */
@media (max-width: 768px) {
	.snera-scroll-root .main_pillars-bottom-child-title{
		line-height: 1.2em;
	}
	
	.main_pillars-bottom-child-image{width: 180px;}

	.snera-scroll-root .section-content {
		width: 100%;
		padding: clamp(16px, 5vw, 32px);
		padding-left:  max(clamp(16px, 5vw, 32px), env(safe-area-inset-left));
		padding-right: max(clamp(16px, 5vw, 32px), env(safe-area-inset-right));
	}

	/* Main Pillars Bottom — mobile */
	/* Desktop track ẩn, mobile track hiện */
	.snera-scroll-root .main_pillars-bottom-track { display: none; }
	.snera-scroll-root .main_pillars-bottom {
		display: block;
		overflow: hidden;
		touch-action: none;
		-webkit-user-select: none; user-select: none;
		height: 100vh; height: 100dvh;
	}

	/* Mobile track: hoàn toàn độc lập, không kế thừa desktop */
	.snera-scroll-root .main_pillars-bottom-track-mobile {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		/* Width = số item × 100% của container (không phải vw) */
		width: 300%;
		height: 100vh; height: 100dvh;
		align-items: stretch;
		transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.snera-scroll-root .main_pillars-bottom-mobile-child {
		/* 1/3 của track 300% = 100% của container = đúng 1 màn hình */
		flex: 0 0 33.333%;
		width: 33.333%;
		min-height: 100vh; min-height: 100dvh;
		height: 100vh; height: 100dvh;
		display: flex; flex-direction: column;
		align-items: center; justify-content: center;
		gap: 40px; box-sizing: border-box; overflow: hidden;
		padding: clamp(16px, 5vh, 40px) clamp(16px, 5vw, 32px);
		padding-left:  max(clamp(16px, 5vw, 32px), env(safe-area-inset-left));
		padding-right: max(clamp(16px, 5vw, 32px), env(safe-area-inset-right));
	}
	.snera-scroll-root .main_pillars-bottom-mobile-child .main_pillars-bottom-child-image {
		max-width: min(300px, 78vw); height: auto;
	}

	/* Home Product — carousel ngang */
	.snera-scroll-root .home_product {
		overflow: hidden;
		touch-action: none;
		-webkit-user-select: none; user-select: none;
		/* Cố định chiều cao section = 100vh, không cho section khác lọt vào */
		height: 100vh; height: 100dvh;
	}
	.snera-scroll-root .home_product .section-content {
		display: block; overflow: hidden; width: 100%; padding: 0;
		height: 100%; /* khớp với section height */
	}
	.snera-scroll-root .home_product-track {
		display: flex; flex-direction: row;
		width: calc(6 * 100vw);
		height: 100vh; height: 100dvh;
		align-items: stretch;
		transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.snera-scroll-root .home_product-child,
	.snera-scroll-root .home_product-child:nth-child(odd),
	.snera-scroll-root .home_product-child:nth-child(even) {
		width: 100vw !important;
		min-width: 100vw !important;
		max-width: 100vw !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		flex-basis: auto !important;
		height: 100vh; height: 100dvh;
		min-height: 100vh; min-height: 100dvh;
		flex-direction: column; justify-content: center; align-items: center;
		text-align: center; box-sizing: border-box; gap: 14px;
		padding: clamp(16px, 4vh, 32px) clamp(16px, 5vw, 32px);
		padding-left:  max(clamp(16px, 5vw, 32px), env(safe-area-inset-left));
		padding-right: max(clamp(16px, 5vw, 32px), env(safe-area-inset-right));
		overflow: hidden;
	}
	.snera-scroll-root .home_product-image { max-width: min(350px, 80vw); max-height: 45vh; max-height: 45dvh; }
	.snera-scroll-root .home_product-text  { text-align: center; align-items: center; max-width: 100%; gap: 12px; }
	.snera-scroll-root .home_product-label,
	.snera-scroll-root .home_product-title,
	.snera-scroll-root .home_product-content { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
	.snera-scroll-root .home_product-title { font-size: clamp(1.4rem, 5.5vw, 2rem); }

	.snera-scroll-root .paragrap_content {
		font-size: 0.85rem; line-height: 1.45;
		max-width: calc(100vw - 32px);
	}
	.snera-scroll-root .main_pillars-bottom-child-content {
		max-width: calc(100vw - 40px);
		font-size: 0.85rem; line-height: 1.4;
	}
	.snera-scroll-root .home_product-content {
		max-width: calc(100vw - 32px);
		font-size: 0.9rem; line-height: 1.45;
	}
	.snera-scroll-root .sub-tittle { font-size: 2em; }

	.snera-scroll-root .home_product-text .button { width: auto; min-width: 120px; }

	.snera-scroll-root .main_pillars .section-content {
		padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 40px);
		padding-left:  max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
		padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
	}
}

/* ================================================================
   RESPONSIVE — ≤768px landscape
   ================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
	.snera-scroll-root .home_product-child,
	.snera-scroll-root .home_product-child:nth-child(odd),
	.snera-scroll-root .home_product-child:nth-child(even) {
		flex-direction: row;
		text-align: left;
		gap: clamp(12px, 3vw, 32px);
	}
	.snera-scroll-root .home_product-text  { text-align: left; align-items: flex-start; }
	.snera-scroll-root .home_product-image { max-width: 40%; max-height: 80vh; }
	.snera-scroll-root .hero_statement-text { padding: 16px clamp(16px, 5vw, 40px); }
}