/*!
 * Pay2S Elementor Widgets — Product Hero, bố cục "triangles" (hero-4 của template trang sản phẩm pay2s.vn)
 * Chỉ nạp khi instance chọn bố cục này (Base_Widget::variant_styles). Phụ thuộc: product-hero, product.
 * Số đo /cong-thanh-toan (27/09/2026):
 *  nền section rgba(245,255,252,.87)
 *  vùng chữ max 620 (500 ≤1199), margin 219/0 (180 ≤1400 · 150 ≤1299 · 110 auto + căn giữa ≤991)
 *   (margin như site: margin âm của sub-title gộp với margin vùng chữ)
 *  ảnh absolute top 68 / right 7% (18% ≥1922 · 1% ≤1700 · top 20 ≤1400 · max 520 + top 80 ≤1299 · right −5% ≤1199);
 *   ≤991: nằm trên phần chữ, margin 60 0 −86, padding 0 12, căn giữa
 *  gợn sóng: 6 vòng 100px viền 1px rgba(20,29,56,.3), tâm tại góc trên-trái vùng chữ (−50/−50),
 *   scale .6 → 4, opacity .2 → 0 trong 8s, trễ 0/1/2/4/5/1s
 *  hai tam giác góc dưới phải (clip-path): 70% × 82% rgb(225,249,237) opacity .3 ·
 *   (70% − 140px) × (82% − 90px) rgb(217,250,233) opacity .5; nằm dưới nội dung (z-index −1)
 */

.p2sew.p2sew-product-hero.p2sew-product-hero--triangles {
	background-color: rgba(245, 255, 252, 0.87);
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
	top: 68px;
	right: 7%;
	z-index: 2;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
	max-width: 620px;
	margin: 219px 0;
	padding: 0;
}

/* Gợn sóng: chỉ có ý nghĩa khi chuyển động → ẩn khi tắt hiệu ứng / giảm chuyển động. */
.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple {
	position: absolute;
	top: -50px;
	left: -50px;
	z-index: 1;
	display: none;
	width: 100px;
	height: 100px;
	pointer-events: none;
}

.p2sew-product-hero.p2sew-product-hero--triangles.p2sew-product-hero--animated .p2sew-product-hero__ripple {
	display: block;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border: 1px solid var(--p2s-ripple-color, rgba(20, 29, 56, 0.3));
	border-radius: 50%;
	background-color: transparent;
	animation: p2sew-hero-ripple 8s linear infinite;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span:nth-child(2),
.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span:nth-child(6) {
	animation-delay: 1s;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span:nth-child(3) {
	animation-delay: 2s;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span:nth-child(4) {
	animation-delay: 4s;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__ripple span:nth-child(5) {
	animation-delay: 5s;
}

@keyframes p2sew-hero-ripple {
	0% {
		opacity: 0.2;
		transform: scale(0.6);
	}

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

/* Hai tam giác trang trí */
.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__triangle {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 70%;
	height: 82%;
	background-color: rgb(225, 249, 237);
	opacity: 0.3;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
	pointer-events: none;
}

.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__triangle--2 {
	width: calc(70% - 140px);
	height: calc(82% - 90px);
	background-color: rgb(217, 250, 233);
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
	.p2sew-product-hero.p2sew-product-hero--triangles.p2sew-product-hero--animated .p2sew-product-hero__ripple {
		display: none;
	}
}

@media (min-width: 1922px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: 18%;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 1922px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: 18%;
	}
}

@media (max-width: 1700px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: 1%;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1700px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: 1%;
	}
}

@media (max-width: 1400px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 20px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 180px 0;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1400px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 20px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 180px 0;
	}
}

@media (max-width: 1299px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 80px;
		max-width: 520px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 150px 0;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1299px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 80px;
		max-width: 520px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 150px 0;
	}
}

@media (max-width: 1199px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: -5%;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		max-width: 500px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1199px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		right: -5%;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		max-width: 500px;
	}
}

@media (max-width: 991px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 0;
		right: 0;
		max-width: 100%;
		margin: 60px 0 -86px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 110px auto;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__media {
		top: 0;
		right: 0;
		max-width: 100%;
		margin: 60px 0 -86px;
	}

	.p2sew-product-hero.p2sew-product-hero--triangles .p2sew-product-hero__content {
		margin: 110px auto;
	}
}