/*
 * PWT Stack Cards
 * Gắn class "pwt-stack-cards" cho container chứa danh sách.
 * Mỗi container con trực tiếp là 1 thẻ; số lượng thẻ tuỳ ý.
 *
 * Tuỳ chỉnh (Elementor → Advanced → Custom CSS của container, hoặc CSS chung):
 *   --pwt-stack-top     khoảng cách từ đầu màn hình tới thẻ đang dính (mặc định 120px, chừa chỗ cho header)
 *   --pwt-stack-offset  mỗi thẻ sau dính thấp hơn thẻ trước bao nhiêu, để lộ mép thẻ bên dưới (mặc định 16px)
 *   --pwt-stack-scale   thẻ bị đè thu nhỏ bao nhiêu (mặc định 0.06 = 6%)
 *   --pwt-stack-dim     thẻ bị đè tối đi bao nhiêu (mặc định 0.12 = 12%)
 *
 * Chấm tiến độ (đặt trong CSS chung vì cột chấm nằm ngoài container):
 *   --pwt-stack-dot-color   màu chấm thường (mặc định #d9d9d9)
 *   --pwt-stack-dot-active  màu chấm đang xem (mặc định #003c7f, màu chủ đạo)
 *   --pwt-stack-dot-ring    màu viền vòng ngoài chấm đang xem (mặc định #003c7f)
 *   --pwt-stack-dot-gap     khoảng cách giữa các chấm (mặc định 18px)
 */

@media (min-width: 768px) {
	.pwt-stack-cards.pwt-stack-ready > .e-con,
	.pwt-stack-cards.pwt-stack-ready > .e-con-inner > .e-con,
	.pwt-stack-cards.pwt-stack-ready > .pwt-stack-card {
		position: sticky;
		top: calc(var(--pwt-stack-top, 120px) + var(--pwt-stack-i, 0) * var(--pwt-stack-offset, 16px));
		transform-origin: center top;
		transform: scale(calc(1 - var(--pwt-stack-p, 0) * var(--pwt-stack-scale, 0.06)));
		filter: brightness(calc(1 - var(--pwt-stack-p, 0) * var(--pwt-stack-dim, 0.12)));
		will-change: transform;
	}
}

/* Cột chấm tiến độ dọc: cho người xem biết còn bao nhiêu thẻ phía dưới */
.pwt-stack-dots {
	position: fixed;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pwt-stack-dot-gap, 18px);
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.pwt-stack-dots.is-visible {
	opacity: 1;
	visibility: visible;
}
.pwt-stack-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pwt-stack-dot-color, #d9d9d9);
	cursor: pointer;
	transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pwt-stack-dot:hover {
	transform: scale(1.2);
}
.pwt-stack-dot.is-active {
	background: var(--pwt-stack-dot-active, #003c7f);
	/* vòng trắng + vòng xanh bên ngoài như hình mẫu */
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pwt-stack-dot-ring, #003c7f);
	transform: scale(1.15);
}
@media (max-width: 767px) {
	.pwt-stack-dots {
		display: none;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.pwt-stack-cards.pwt-stack-ready > .e-con,
	.pwt-stack-cards.pwt-stack-ready > .e-con-inner > .e-con,
	.pwt-stack-cards.pwt-stack-ready > .pwt-stack-card {
		transform: none;
		filter: 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ó hiệu ứng 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-stack-cards) #pxl-wapper #pxl-main {
			overflow-x: clip;
		}
	}
}