/*!
 * Pay2S Elementor Widgets — Carousel (khung dùng chung cho assets/js/carousel.js)
 *
 * Số slide mỗi khung và khoảng cách là biến CSS: --p2s-per-view, --p2s-gap. Widget đặt giá trị gốc theo breakpoint
 * của pay2s.vn; control Elementor ghi đè qua {{WRAPPER}}. Công thức bề rộng slide giống Swiper:
 * (khung − gap × (n − 1)) / n.
 * Khi chưa có JS: hiển thị n slide đầu tiên, phần còn lại bị che (không tràn ngang).
 */

.p2sew .p2sew-carousel {
	--p2s-per-view: 1;
	--p2s-gap: 0px;

	position: relative;
}

.p2sew .p2sew-carousel__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.p2sew .p2sew-carousel__track {
	display: flex;
	gap: var(--p2s-gap);
	will-change: transform;
}

.p2sew .p2sew-carousel__slide {
	flex: 0 0 calc((100% - (var(--p2s-per-view) - 1) * var(--p2s-gap)) / var(--p2s-per-view));
	min-width: 0;
}

.p2sew .p2sew-carousel.is-dragging .p2sew-carousel__viewport {
	cursor: grabbing;
	user-select: none;
}

.p2sew .p2sew-carousel.is-dragging .p2sew-carousel__slide img {
	pointer-events: none;
}

/* Đủ chỗ cho mọi slide: ẩn nút & chấm (tương đương swiper-button-lock). */
.p2sew .p2sew-carousel.is-locked [data-p2sew-carousel-prev],
.p2sew .p2sew-carousel.is-locked [data-p2sew-carousel-next],
.p2sew .p2sew-carousel.is-locked [data-p2sew-carousel-dots],
.p2sew .p2sew-carousel [data-p2sew-carousel-prev][hidden],
.p2sew .p2sew-carousel [data-p2sew-carousel-next][hidden],
.p2sew .p2sew-carousel [data-p2sew-carousel-dots][hidden] {
	display: none;
}

.p2sew .p2sew-carousel button:disabled {
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * Kiểu nút + chấm của template trang sản phẩm (dùng chung: Bank Partnership bố cục carousel, Product Benefits bố cục
 * carousel). Nút prev/next = mặc định Swiper mà pay2s.vn đang dùng: 27×44, cách mép 10px, giữa theo chiều dọc,
 * #007aff. Chấm 12px #e0e0e0, chấm chọn viền/nền màu chủ đạo (scale .9). Chấm nằm tuyệt đối, cách đáy 8 + 10px.
 * Mỗi nhóm có hai selector: class chung .p2sew-carousel__nav / __dots và class cũ của Bank Partnership (giữ nguyên HTML).
 * Màu chỉnh qua biến: --p2s-nav-color, --p2s-dot-color, --p2s-dot-active.
 * ------------------------------------------------------------------------- */
.p2sew .p2sew-carousel__nav,
.p2sew .p2sew-carousel__nav:hover,
.p2sew .p2sew-carousel__nav:focus,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav:hover,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav:focus {
	border: 0;
	background: none;
	color: var(--p2s-nav-color, #007aff);
}

.p2sew .p2sew-carousel__nav,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav {
	position: absolute;
	top: 50%;
	left: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Không loop, đang ở một đầu: như .swiper-button-disabled. Chỉ class chung (nút của Bank Partnership giữ nguyên 1.1.0). */
.p2sew .p2sew-carousel__nav:disabled {
	opacity: 0.35;
	pointer-events: none;
}

.p2sew .p2sew-carousel__nav--next,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav--next {
	right: 10px;
	left: auto;
}

.p2sew .p2sew-carousel__nav--next svg,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav--next svg {
	transform: scaleX(-1);
}

.p2sew .p2sew-carousel__nav svg,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__nav svg {
	width: 27px;
	height: 44px;
}

.p2sew .p2sew-carousel__dots,
.p2sew-bank-partnership--carousel .p2sew-bank-partnership__dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 12px;
	margin: 50px 0 10px;
	line-height: 12px;
	text-align: center;
}

.p2sew .p2sew-carousel__dots .p2sew-carousel__dot,
.p2sew .p2sew-carousel__dots .p2sew-carousel__dot:hover,
.p2sew .p2sew-carousel__dots .p2sew-carousel__dot:focus,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot:hover,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot:focus {
	border: 0;
	background-color: var(--p2s-dot-color, var(--p2s-product-border));
}

.p2sew .p2sew-carousel__dots .p2sew-carousel__dot,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 8px;
	padding: 0;
	border-radius: 50%;
	box-shadow: none;
	vertical-align: top;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.p2sew .p2sew-carousel__dots .p2sew-carousel__dot::before,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot::before {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid var(--p2s-dot-active, var(--p2s-product-primary));
	border-radius: inherit;
	background: var(--p2s-dot-active, var(--p2s-product-primary));
	transform: scale(0);
	transition: 0.4s ease-in-out;
}

.p2sew .p2sew-carousel__dots .p2sew-carousel__dot.is-active::before,
.p2sew-bank-partnership--carousel .p2sew-carousel__dot.is-active::before {
	transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
	.p2sew .p2sew-carousel__track {
		transition: none !important;
	}
}