/*!
 * Pay2S Elementor Widgets — CTA Banner (".cta-box" của template trang sản phẩm pay2s.vn)
 * Phụ thuộc: product.css.
 * Số đo /open-api-banking (khối "TRIỂN KHAI", 26/09/2026):
 *  section không padding trên, padding dưới 70 (60 ≤991) · khối nền #f5f5f5 bo 10, overflow hidden
 *  hàng flex gutter 24: cột ảnh 5/12 + cột chữ 7/12 từ 992 (ảnh cao bằng cột chữ, object-fit cover);
 *   ≤991 xếp dọc, ảnh trên theo tỉ lệ gốc, chữ căn giữa
 *  vùng chữ padding 70 70 70 55 (70 20 ≤575) · icon góc cách phải/dưới 70 (20 ≤575)
 *  tiêu đề: khối cách dưới 35, sec-title 40px line-height 1.278 ở mọi độ rộng
 *  2 hình trang trí (".shape-mockup"): absolute z-index −1 ở góc trên trái section, ≤ 100% bề ngang,
 *   tràn xuống section kế tiếp (nằm dưới nội dung)
 */

.p2sew.p2sew-cta-banner {
	position: relative;
	padding-bottom: var(--p2s-product-space);
}

.p2sew-cta-banner .p2sew-cta-banner__shape {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

.p2sew-cta-banner .p2sew-cta-banner__shape img {
	display: inline;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.p2sew-cta-banner .p2sew-cta-banner__box {
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--p2s-product-smoke);
}

.p2sew-cta-banner .p2sew-cta-banner__row {
	--p2s-media-width: 41.6667%;

	display: flex;
	flex-wrap: wrap;
	margin-right: -12px;
	margin-left: -12px;
}

.p2sew-cta-banner .p2sew-cta-banner__media,
.p2sew-cta-banner .p2sew-cta-banner__content {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-right: 12px;
	padding-left: 12px;
}

.p2sew-cta-banner .p2sew-cta-banner__image {
	height: 100%;
}

.p2sew-cta-banner .p2sew-cta-banner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}

.p2sew-cta-banner .p2sew-cta-banner__inner {
	position: relative;
	padding: 70px 70px 70px 55px;
}

.p2sew-cta-banner .p2sew-cta-banner__icon {
	position: absolute;
	right: 70px;
	bottom: 70px;
	line-height: 0;
}

.p2sew-cta-banner .p2sew-cta-banner__title-area {
	margin-bottom: 35px;
}

.p2sew-cta-banner.p2sew--product .p2sew-sec-title {
	line-height: 1.278;
}

.p2sew-cta-banner .p2sew-cta-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: var(--p2s-cta-actions, flex-start);
}

@media (min-width: 992px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-cta-banner .p2sew-cta-banner__media {
		width: var(--p2s-media-width);
	}

	:where(:not(.p2sew-rwd-container)) > .p2sew-cta-banner .p2sew-cta-banner__content {
		width: calc(100% - var(--p2s-media-width));
	}

	:where(:not(.p2sew-rwd-container)) > .p2sew-cta-banner--image-none .p2sew-cta-banner__content {
		width: 100%;
	}

	:where(:not(.p2sew-rwd-container)) > .p2sew-cta-banner--image-right .p2sew-cta-banner__media {
		order: 2;
	}
}

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

	.p2sew-cta-banner .p2sew-cta-banner__content {
		width: calc(100% - var(--p2s-media-width));
	}

	.p2sew-cta-banner--image-none .p2sew-cta-banner__content {
		width: 100%;
	}

	.p2sew-cta-banner--image-right .p2sew-cta-banner__media {
		order: 2;
	}
}

@media (max-width: 991px) {
	.p2sew-cta-banner .p2sew-cta-banner__box {
		--p2s-cta-actions: center;

		text-align: center;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew-cta-banner .p2sew-cta-banner__box {
		--p2s-cta-actions: center;

		text-align: center;
	}
}

@media (max-width: 575px) {
	.p2sew-cta-banner .p2sew-cta-banner__inner {
		padding: 70px 20px;
	}

	.p2sew-cta-banner .p2sew-cta-banner__icon {
		right: 20px;
		bottom: 20px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 575px) {
	.p2sew-cta-banner .p2sew-cta-banner__inner {
		padding: 70px 20px;
	}

	.p2sew-cta-banner .p2sew-cta-banner__icon {
		right: 20px;
		bottom: 20px;
	}
}