/*!
 * Pay2S Elementor Widgets — Product Benefits: header, bố cục carousel, kiểu thẻ "dịch vụ"
 * Chỉ nạp khi instance dùng (Base_Widget::variant_styles). Phụ thuộc: product-benefits, product (+ carousel khi bố cục
 * carousel). Số đo #service-sec của /cong-thanh-toan (28/09/2026):
 *  header (.row.justify-content-lg-between.justify-content-center.align-items-center, gutter 24):
 *   cột tiêu đề 100% · 75% (≥576) · 50% (≥992), padding phải 48 (≥1200); chữ căn giữa, căn trái từ 992
 *   cột nút rộng theo nút, nút cách dưới 60 · 55 (≤1199) · 50 (≤991); <992 nút xuống dưới tiêu đề, căn giữa
 *  carousel: 1 thẻ mỗi khung · 2 (≥768) · 3 (≥992) · 4 (≥1200); cách nhau 30 (20 ở 576–767)
 *   thẻ dịch vụ có bóng: khung carousel lùi −25/−12, vùng cắt padding 25/12 (.th-slider.has-shadow)
 *  thẻ dịch vụ (.service-grid): thẻ kéo lên 40 · icon tròn 80 nền #106a38, dịch xuống 40, ảnh 39px trắng
 *   (brightness(0) invert(1)), 2 vòng gợn sóng ::before/::after (scale 1 → 1.8, 5s, vòng sau trễ 2s)
 *   thân thẻ nền trắng, bo 10, bóng 0 10 15 rgba(8,14,28,.06), padding 70/15/40 · tiêu đề 24/1.417, cách dưới 15
 *   · mô tả 16/1.7 tối đa 230, cách dưới 22
 *   hover: thân thẻ #106a38, chữ trắng, icon nền trắng + ảnh lật rotateY(180deg) về màu gốc, ảnh sóng trượt lên (0.4s)
 *   ảnh sóng: cắt theo bo góc thân thẻ (site để tràn góc vuông); trượt bằng transform thay cho "bottom"
 */

/* ---------------------------------------------------------------------------
 * Header: khối tiêu đề + nút
 * ------------------------------------------------------------------------- */
.p2sew-product-benefits .p2sew-product-benefits__header {
	--p2s-header-action-space: 60px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-right: -12px;
	margin-left: -12px;
}

.p2sew-product-benefits .p2sew-product-benefits__heading {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	padding-right: 12px;
	padding-left: 12px;
	text-align: center;
}

.p2sew-product-benefits .p2sew-product-benefits__header-action {
	flex: 0 0 auto;
	max-width: 100%;
	padding-right: 12px;
	padding-bottom: var(--p2s-header-action-space);
	padding-left: 12px;
}

@media (min-width: 576px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits .p2sew-product-benefits__heading {
		width: 75%;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 576px) {
	.p2sew-product-benefits .p2sew-product-benefits__heading {
		width: 75%;
	}
}

@media (min-width: 992px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits .p2sew-product-benefits__header {
		justify-content: space-between;
	}

	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits .p2sew-product-benefits__heading {
		width: 50%;
		text-align: left;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 992px) {
	.p2sew-product-benefits .p2sew-product-benefits__header {
		justify-content: space-between;
	}

	.p2sew-product-benefits .p2sew-product-benefits__heading {
		width: 50%;
		text-align: left;
	}
}

@media (min-width: 1200px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits .p2sew-product-benefits__heading {
		padding-right: 48px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 1200px) {
	.p2sew-product-benefits .p2sew-product-benefits__heading {
		padding-right: 48px;
	}
}

@media (max-width: 1199px) {
	.p2sew-product-benefits .p2sew-product-benefits__header {
		--p2s-header-action-space: 55px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1199px) {
	.p2sew-product-benefits .p2sew-product-benefits__header {
		--p2s-header-action-space: 55px;
	}
}

@media (max-width: 991px) {
	.p2sew-product-benefits .p2sew-product-benefits__header {
		--p2s-header-action-space: 50px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew-product-benefits .p2sew-product-benefits__header {
		--p2s-header-action-space: 50px;
	}
}

/* ---------------------------------------------------------------------------
 * Bố cục carousel (khung + nút + chấm: carousel.css)
 * ------------------------------------------------------------------------- */
.p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
	--p2s-per-view: 1;
	--p2s-gap: 30px;
}

@media (min-width: 576px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-gap: 20px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 576px) {
	.p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-gap: 20px;
	}
}

@media (min-width: 768px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 2;
		--p2s-gap: 30px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 768px) {
	.p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 2;
		--p2s-gap: 30px;
	}
}

@media (min-width: 992px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 3;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 992px) {
	.p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 3;
	}
}

@media (min-width: 1200px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 4;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 1200px) {
	.p2sew-product-benefits.p2sew-product-benefits--carousel .p2sew-product-benefits__carousel {
		--p2s-per-view: 4;
	}
}

/* Thẻ dịch vụ có bóng: chừa chỗ trong vùng cắt của carousel (.th-slider.has-shadow). */
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__carousel {
	margin: -25px -12px;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__carousel .p2sew-carousel__viewport {
	padding: 25px 12px;
}

/* ---------------------------------------------------------------------------
 * Kiểu thẻ dịch vụ
 * ------------------------------------------------------------------------- */
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card {
	position: relative;
	margin-top: -40px;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__icon {
	--p2s-icon-bg: var(--p2s-product-primary);

	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: var(--p2s-icon-bg);
	color: #fff;
	line-height: 80px;
	filter: none;
	transform: translateY(40px);
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__icon::before,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: 50%;
	background-color: var(--p2s-icon-bg);
	-webkit-mask-image: none;
	mask-image: none;
	transition: background-color 0.4s;
	animation: p2sew-ripple 5s ease-in-out infinite;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__icon::after {
	animation-delay: 2s;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__icon img {
	position: relative;
	z-index: 2;
	width: 39px;
	max-width: none;
	height: 39px;
	vertical-align: middle;
	filter: brightness(0) invert(1);
	transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__body {
	position: relative;
	overflow: hidden;
	padding: 70px 15px 40px;
	border-radius: 10px;
	background-color: var(--p2s-card-bg, #fff);
	box-shadow: 0 10px 15px rgba(8, 14, 28, 0.06);
	transition: background-color 0.4s ease-in-out;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__title {
	margin-bottom: 15px;
	line-height: 1.417;
	transition: color 0.4s ease-in-out;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__title a {
	color: inherit;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__title a:hover {
	color: var(--p2s-product-smoke2);
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__text {
	max-width: 230px;
	margin: 0 auto 22px;
	font-size: 16px;
	line-height: 1.7;
	transition: color 0.4s ease-in-out;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__shape {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transform: translateY(200px);
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__shape-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Hover (và focus bàn phím khi thẻ có link) */
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__body,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__body {
	background-color: var(--p2s-card-bg-hover, var(--p2s-product-primary));
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__title,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__title,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__text,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__text {
	color: var(--p2s-card-color-hover, #fff);
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__icon,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__icon {
	--p2s-icon-bg: var(--p2s-icon-bg-hover, #fff);

	color: var(--p2s-product-primary);
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__icon img,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__icon img {
	filter: none;
	transform: rotateY(180deg);
}

.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:hover .p2sew-product-benefits__shape,
.p2sew-product-benefits.p2sew-product-benefits--card-service .p2sew-product-benefits__card:focus-within .p2sew-product-benefits__shape {
	opacity: 1;
	transform: none;
}

/* Gợn sóng quanh icon (keyframes "ripple" của template). prefers-reduced-motion: base.css tắt animation/transition. */
@keyframes p2sew-ripple {
	0% {
		opacity: 0;
		transform: scale(1);
	}

	30% {
		opacity: 0.4;
	}

	100% {
		opacity: 0;
		transform: scale(1.8);
	}
}