/*!
 * Pay2S Elementor Widgets — lớp style "trang sản phẩm"
 *
 * Dùng chung cho các widget/bố cục dựng lại trang sản phẩm của pay2s.vn (/open-api-banking, /cong-thanh-toan,
 * /chia-se-bien-dong-so-du, /bang-gia — template "th-" trên nền Bootstrap). Root widget có class .p2sew--product.
 * Số đo live (26/09/2026):
 *  màu chủ đạo #106a38 · tiêu đề #0d2719 · chữ thân #4b5563 · Nunito cho toàn trang (mặt chữ 400/700/900)
 *  container 1244 (≥1400) · 1274 (1300–1399) · 1140 (≥1200) · 960 (≥992) · 720 (≥768) · 540 (≥576) · 100%, padding 12
 *  section 70px (60px ≤991) · title-area/sec-title cách dưới 50px (40px ≤991)
 *  sub-title 16/24 600 in hoa · sec-title 40px/1.25 (1.3 ≤1199) 700 capitalize · shadow-title 74→40px 900 chữ gradient
 *  nút .th-btn 14px/1 500 in hoa, padding 20.5/20, bo 4, hover phủ #0d2719 theo trục Y (0.4s)
 * Không có selector toàn cục: mọi rule nằm dưới .p2sew--product (≥ 0,2,0).
 */

.p2sew.p2sew--product {
	--p2s-product-primary: #106a38;
	--p2s-product-title: #0d2719;
	--p2s-product-text: #4b5563;
	--p2s-product-smoke: #f5f5f5;
	--p2s-product-smoke2: #d7e7df;
	--p2s-product-border: #e0e0e0;
	--p2s-product-font: "Pay2S Nunito", "Nunito", sans-serif;
	--p2s-product-space: 70px;
	--p2s-product-title-space: 60px;
	--p2s-muted: var(--p2s-product-text);

	color: var(--p2s-product-text);
	font-family: var(--p2s-product-font);
	font-size: 16px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * Container (tương đương .container Bootstrap + rule riêng của site ở ≥1300px)
 * ------------------------------------------------------------------------- */
.p2sew--product .p2sew-product-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 12px;
}

@media (min-width: 576px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 540px;
	}
}

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

@media (min-width: 768px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 720px;
	}
}

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

@media (min-width: 992px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 960px;
	}
}

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

@media (min-width: 1200px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 1140px;
	}
}

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

@media (min-width: 1300px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 1274px;
	}
}

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

@media (min-width: 1400px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew--product .p2sew-product-container {
		max-width: 1244px;
	}
}

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

@media (max-width: 1199px) {
	.p2sew.p2sew--product {
		--p2s-product-title-space: 60px;
	}
}

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

@media (max-width: 991px) {
	.p2sew.p2sew--product {
		--p2s-product-space: 60px;
		--p2s-product-title-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.p2sew--product {
		--p2s-product-space: 60px;
		--p2s-product-title-space: 50px;
	}
}

/* ---------------------------------------------------------------------------
 * Chữ cơ bản
 * ------------------------------------------------------------------------- */
.p2sew--product .p2sew-product-text,
.p2sew--product .p2sew-title-area__desc {
	margin: 0 0 18px;
	color: var(--p2s-product-text);
	font-size: 16px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * Khối tiêu đề (Components\Title_Area)
 * ------------------------------------------------------------------------- */
.p2sew--product .p2sew-title-area {
	position: relative;
	z-index: 2;
	margin-bottom: calc(var(--p2s-product-title-space) - 10px);
}

.p2sew--product .p2sew-title-area--left {
	text-align: left;
}

.p2sew--product .p2sew-title-area--center {
	text-align: center;
}

.p2sew--product .p2sew-title-area--right {
	text-align: right;
}

.p2sew--product .p2sew-shadow-title {
	--p2s-shadow-title-color: rgba(195, 219, 208, 0.698);

	margin: -0.55em 0 -0.45em -0.25em;
	background-image: linear-gradient(180deg, var(--p2s-shadow-title-color) 0%, var(--p2s-shadow-title-end, rgba(226, 232, 250, 0)) var(--p2s-shadow-title-stop, 88.54%));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--p2s-product-text);
	font-family: var(--p2s-product-font);
	font-size: 74px;
	font-weight: 900;
	line-height: 1;
	-webkit-text-fill-color: transparent;
}

.p2sew--product .p2sew-sub-title {
	display: block;
	margin-top: -0.34em;
	margin-bottom: 30px;
	color: var(--p2s-product-primary);
	font-family: var(--p2s-product-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: uppercase;
}

.p2sew--product .p2sew-sub-title--icon {
	margin-top: 0;
}

.p2sew--product .p2sew-sub-title__icon {
	position: relative;
	display: inline-block;
	/* Như .icon-masking của site: rộng 26px → ô mask (26×0) chiếm dòng 1, ảnh xuống dòng 2 (khối cao 50px). */
	width: 26px;
	height: auto;
	margin-right: 2px;
	vertical-align: baseline;
}

.p2sew--product .p2sew-sub-title__mask {
	display: inline-block;
	width: 26px;
	height: 100%;
}

.p2sew--product .p2sew-sub-title__image {
	width: 26px;
	max-width: 26px;
	height: auto;
}

.p2sew--product .p2sew-sec-title {
	margin: -0.32em 0 calc(var(--p2s-product-title-space) - 10px);
	color: var(--p2s-product-title);
	font-family: var(--p2s-product-font);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: capitalize;
}

.p2sew--product .p2sew-sec-title em {
	display: inline-block;
	color: var(--p2s-product-primary);
	font-style: normal;
}

@media (max-width: 1199px) {
	.p2sew--product .p2sew-sub-title {
		margin-bottom: 20px;
	}

	.p2sew--product .p2sew-shadow-title {
		font-size: 64px;
	}

	.p2sew--product .p2sew-sec-title {
		line-height: 1.3;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1199px) {
	.p2sew--product .p2sew-sub-title {
		margin-bottom: 20px;
	}

	.p2sew--product .p2sew-shadow-title {
		font-size: 64px;
	}

	.p2sew--product .p2sew-sec-title {
		line-height: 1.3;
	}
}

@media (max-width: 991px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 60px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 60px;
	}
}

@media (max-width: 575px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 52px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 575px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 52px;
	}
}

@media (max-width: 375px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 40px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 375px) {
	.p2sew--product .p2sew-shadow-title {
		font-size: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * Nút "theme" (.th-btn của site) — Components\Button variant "theme"
 * ------------------------------------------------------------------------- */
.p2sew .p2sew-btn.p2sew-btn--theme {
	--p2s-btn-bg: var(--p2s-product-primary, #106a38);
	--p2s-btn-color: #fff;
	--p2s-btn-border: transparent;
	--p2s-btn-shadow: none;
	--p2s-btn-shadow-hover: none;
	--p2s-btn-lift: 0px;
	--p2s-btn-fill: var(--p2s-product-title, #0d2719);

	position: relative;
	z-index: 2;
	display: inline-flex;
	/* Site: "chữ␠" + icon margin-left 2px (.ms-2) → khoảng trắng 0.258em của Nunito + 2px. */
	gap: calc(0.258em + 2px);
	min-width: 144px;
	min-height: 0;
	overflow: hidden;
	padding: 20.5px 20px;
	border: 0;
	border-radius: 4px;
	font-family: var(--p2s-product-font, "Pay2S Nunito", sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: middle;
	transition: none;
}

.p2sew .p2sew-btn.p2sew-btn--theme::before,
.p2sew .p2sew-btn.p2sew-btn--theme::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: 99px;
	background: var(--p2s-btn-fill);
	transform: scaleY(0);
	transition: 0.4s ease-out;
}

/* Như .th-btn: nền nút giữ nguyên, màu hover (--p2s-btn-bg-hover) phủ dần bằng ::before/::after; bàn phím (focus-visible)
   nhận cùng màu chữ với hover để chữ không chìm vào lớp phủ. */
.p2sew .p2sew-btn.p2sew-btn--theme:hover {
	background: var(--p2s-btn-bg);
}

.p2sew .p2sew-btn.p2sew-btn--theme:focus-visible {
	color: var(--p2s-btn-color-hover, var(--p2s-btn-color));
}

.p2sew .p2sew-btn.p2sew-btn--theme:hover::before,
.p2sew .p2sew-btn.p2sew-btn--theme:hover::after,
.p2sew .p2sew-btn.p2sew-btn--theme:focus-visible::before,
.p2sew .p2sew-btn.p2sew-btn--theme:focus-visible::after {
	border-radius: 0;
	/* Màu hover chỉ áp khi đang hover (như .th-btn.style3:hover::before): lúc thu về lớp phủ trở lại màu gốc. */
	background: var(--p2s-btn-bg-hover, var(--p2s-btn-fill));
	transform: scale(1);
}

/* Icon Font Awesome của site: hộp 0.875em × 1em (arrow-right 448/512); right-long 1em (512/512). */
.p2sew .p2sew-btn.p2sew-btn--theme svg,
.p2sew .p2sew-btn.p2sew-btn--theme .p2sew-icon {
	width: 0.875em;
	height: 1em;
	font-size: 14px;
}

/* "fa-solid fa-right-long" trên site không có .ms-2 → bỏ 2px cộng thêm của gap. */
.p2sew .p2sew-btn.p2sew-btn--theme .p2sew-icon--right-long {
	width: 1em;
	margin-inline-start: -2px;
}

/* ---------------------------------------------------------------------------
 * Hiệu ứng trang trí — keyframes jumpAni / jumpReverseAni / moving / spin / bgColor của template (đo 26/09/2026);
 * tên có tiền tố p2sew- để không đụng CSS khác
 * ------------------------------------------------------------------------- */
@keyframes p2sew-jump {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes p2sew-jump-reverse {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(30px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes p2sew-moving {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-50px);
	}

	100% {
		transform: translateX(0);
	}
}

/* Như site (đo trực tiếp): keyframes chỉ quay, không kèm translate. */
@keyframes p2sew-spin {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes p2sew-bg-color {
	0% {
		background-color: #f2ba4c;
	}

	25% {
		background-color: #81f24c;
	}

	50% {
		background-color: #41f27d;
	}

	75% {
		background-color: #0500ff;
	}

	100% {
		background-color: #f2ba4c;
	}
}

/* prefers-reduced-motion: base.css đã tắt animation/transition cho mọi phần tử trong .p2sew. */