/*
 * PWT Scroll Carousel
 * Dùng cho Elementor Nested Carousel có class "pwt-scroll-carousel".
 * Mỗi slide nên có 1 container class "slide-img" và 1 container class "slide-text".
 */

/* Bỏ mũi tên và chấm mặc định của Elementor */
.pwt-scroll-carousel .elementor-swiper-button,
.pwt-scroll-carousel .swiper-pagination {
	display: none !important;
}

/* Khung đứng yên khi cuộn qua section */
.pwt-sc-track {
	position: relative;
	width: 100%;
}
.pwt-scroll-carousel {
	position: relative;
}
.pwt-scroll-carousel.pwt-sc-pinned {
	position: sticky;
	z-index: 1;
}

/* Mọi slide cao bằng slide dài nhất: các container bên trong giãn hết chiều cao slide */
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper {
	align-items: stretch;
}
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper > .swiper-slide {
	height: auto;
	display: flex;
}
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper > .swiper-slide > .e-con {
	flex: 1 1 auto;
}
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper > .swiper-slide > .e-con > .e-con-inner {
	flex-grow: 1;
}
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper > .swiper-slide > .e-con > .e-con-inner > .e-con,
.pwt-scroll-carousel .e-n-carousel > .swiper-wrapper > .swiper-slide > .e-con > .e-con {
	flex-grow: 1;
	align-self: stretch;
}
.pwt-scroll-carousel .slide-img,
.pwt-scroll-carousel .slide-text {
	align-self: stretch;
}

/* Điện thoại: ảnh nằm trên, cao cố định; khung chữ giãn để các slide bằng nhau */
@media (max-width: 767px) {
	.pwt-scroll-carousel .e-con:has(> .slide-img) {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.pwt-scroll-carousel .slide-img {
		flex: 0 0 auto;
		min-height: var(--pwt-sc-mobile-img-height, 240px);
	}
	.pwt-scroll-carousel .swiper-slide .e-con.slide-text {
		--flex-grow: 1;
		flex-grow: 1;
	}
}

/* Cắt phần ảnh/chữ nằm ngoài khung khi đang chạy animation */
.pwt-scroll-carousel .slide-img,
.pwt-scroll-carousel .slide-text {
	overflow: hidden;
}

/* ẢNH: cuộn xuống thì chạy từ phải qua, cuộn lên thì chạy từ trái qua */
.pwt-scroll-carousel .swiper-slide-active .slide-img > .elementor-background-slideshow,
.pwt-scroll-carousel .swiper-slide-active .slide-img img {
	animation: pwtScImgFromRight .9s cubic-bezier(.22, .61, .36, 1) both;
}
.pwt-scroll-carousel.is-prev .swiper-slide-active .slide-img > .elementor-background-slideshow,
.pwt-scroll-carousel.is-prev .swiper-slide-active .slide-img img {
	animation-name: pwtScImgFromLeft;
}

/* CHỮ: từng dòng chạy vào, lệch nhau một chút */
.pwt-scroll-carousel .swiper-slide-active .slide-text > * {
	animation: pwtScTextFromRight .7s cubic-bezier(.22, .61, .36, 1) both;
}
.pwt-scroll-carousel.is-prev .swiper-slide-active .slide-text > * {
	animation-name: pwtScTextFromLeft;
}
.pwt-scroll-carousel .swiper-slide-active .slide-text > *:nth-child(1) { animation-delay: .15s; }
.pwt-scroll-carousel .swiper-slide-active .slide-text > *:nth-child(2) { animation-delay: .25s; }
.pwt-scroll-carousel .swiper-slide-active .slide-text > *:nth-child(3) { animation-delay: .35s; }
.pwt-scroll-carousel .swiper-slide-active .slide-text > *:nth-child(4) { animation-delay: .45s; }
.pwt-scroll-carousel .swiper-slide-active .slide-text > *:nth-child(5) { animation-delay: .55s; }

@keyframes pwtScImgFromRight  { from { transform: translateX(100%); }  to { transform: none; } }
@keyframes pwtScImgFromLeft   { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes pwtScTextFromRight { from { opacity: 0; transform: translateX(80px); }  to { opacity: 1; transform: none; } }
@keyframes pwtScTextFromLeft  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }

/* Chấm tiến độ (thay cho mũi tên) */
.pwt-sc-dots {
	position: absolute;
	/* Đổi vị trí bằng 2 biến này nếu slide có padding khác */
	right: var(--pwt-sc-dots-right, 60px);
	bottom: var(--pwt-sc-dots-bottom, 56px);
	z-index: 2;
	display: flex;
	gap: 8px;
}
.pwt-sc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--e-global-color-primary, #1d4f91);
	opacity: .25;
	cursor: pointer;
	transition: width .3s ease, opacity .3s ease;
}
.pwt-sc-dot.is-active {
	width: 24px;
	opacity: 1;
}

/* Người dùng tắt hiệu ứng chuyển động trong hệ điều hành */
@media (prefers-reduced-motion: reduce) {
	.pwt-scroll-carousel .swiper-slide-active .slide-img > .elementor-background-slideshow,
	.pwt-scroll-carousel .swiper-slide-active .slide-img img,
	.pwt-scroll-carousel .swiper-slide-active .slide-text > * {
		animation: none;
	}
}

/*
 * Theme Vintech đặt #pxl-main { overflow-x: hidden } ở màn hình ≤1200px, làm sticky không chạy
 * trên tablet/laptop nhỏ. Trên trang có carousel thì đổi sang clip: vẫn cắt phần tràn ngang
 * nhưng không chặn sticky. Trình duyệt quá cũ không hỗ trợ clip thì giữ nguyên như theme.
 */
@supports (overflow: clip) {
	@media (max-width: 1200px) {
		body:has(.pwt-scroll-carousel) #pxl-wapper #pxl-main {
			overflow-x: clip;
		}
	}
}