/*!
 * Pay2S Elementor Widgets — Bank Logos, bố cục "showcase" (trang sản phẩm)
 * Chỉ nạp khi instance chọn bố cục này (Base_Widget::variant_styles). Phụ thuộc: bank-logos, product, carousel.
 * Số đo /open-api-banking (section#team-sec):
 *  khối tiêu đề: container padding 70/0 (60 ≤991), tiêu đề căn giữa, cách dưới 50 (40 ≤991)
 *  .brand-sec1: max-width 1420, bo 10 (≤767: lề 12px hai bên) › container padding 48/0
 *  carousel: 5 / 4 / 3 / 2 logo mỗi khung tại ≥1400 / ≥1200 / ≥768 / nhỏ hơn, gap 20, không loop
 *  ô logo padding 20/0 ở mọi độ rộng (site có rule 0 ở ≤767 nhưng .py-20 !important thắng), logo 184×69 (co theo ô)
 *  nút tròn #106a38 55px (40px ≤991), cách mép −17px (≤1399), icon 18px (14px ≤991), hover #0d2719
 */

.p2sew-bank-logos.p2sew-bank-logos--showcase .p2sew-bank-logos__head {
	padding-top: var(--p2s-product-space);
	padding-bottom: var(--p2s-product-space);
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__brand {
	position: relative;
	z-index: 4;
	max-width: 1420px;
	margin-inline: auto;
	border-radius: 10px;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__brand-inner {
	padding-top: 48px;
	padding-bottom: 48px;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__carousel {
	--p2s-per-view: 2;
	--p2s-gap: 20px;

	text-align: center;
}

/* Mỗi ô cao theo logo của nó (slide Swiper không kéo giãn): logo OCB khác tỉ lệ nên ô OCB cao/thấp hơn ô khác. */
.p2sew-bank-logos--showcase .p2sew-bank-logos__carousel .p2sew-carousel__track {
	align-items: flex-start;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__brand-box,
.p2sew-bank-logos--showcase a.p2sew-bank-logos__brand-box:hover,
.p2sew-bank-logos--showcase a.p2sew-bank-logos__brand-box:focus {
	color: inherit;
	text-decoration: none;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__brand-box {
	display: block;
	padding: 20px 0;
	text-align: center;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__brand-box img {
	max-width: 100%;
	height: auto;
}

/* Nút trước/sau (.slider-arrow.style3 của site) */
.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow,
.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow:focus {
	border-color: var(--p2s-arrow-bg, var(--p2s-product-primary));
	background-color: var(--p2s-arrow-bg, var(--p2s-product-primary));
	color: var(--p2s-arrow-color, #fff);
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
	--p2s-arrow-size: 55px;
	--p2s-arrow-pos: -120px;

	position: absolute;
	top: 50%;
	left: var(--p2s-arrow-pos);
	z-index: 3;
	display: inline-grid;
	place-items: center;
	width: var(--p2s-arrow-size);
	height: var(--p2s-arrow-size);
	margin: calc(var(--p2s-arrow-size) / -2) 0 0;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-radius: 50%;
	box-shadow: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	filter: drop-shadow(0 26px 65px rgba(232, 234, 238, 0.55));
	-webkit-appearance: none;
	appearance: none;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow--next {
	right: var(--p2s-arrow-pos);
	left: auto;
}

.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow:hover,
.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow:active {
	border-color: var(--p2s-arrow-bg-hover, var(--p2s-product-title));
	background-color: var(--p2s-arrow-bg-hover, var(--p2s-product-title));
	color: var(--p2s-arrow-color, #fff);
}

/* Như "far fa-arrow-left/right" của site: hộp 0.875em × 1em. */
.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow svg {
	width: 0.875em;
	height: 1em;
}

@media (min-width: 768px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-bank-logos--showcase .p2sew-bank-logos__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: 768px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__carousel {
		--p2s-per-view: 3;
	}
}

@media (min-width: 1200px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-bank-logos--showcase .p2sew-bank-logos__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-bank-logos--showcase .p2sew-bank-logos__carousel {
		--p2s-per-view: 4;
	}
}

@media (min-width: 1400px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-bank-logos--showcase .p2sew-bank-logos__carousel {
		--p2s-per-view: 5;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 1400px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__carousel {
		--p2s-per-view: 5;
	}
}

@media (max-width: 1500px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-pos: -70px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1500px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-pos: -70px;
	}
}

@media (max-width: 1399px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-pos: -17px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1399px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-pos: -17px;
	}
}

@media (max-width: 991px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-size: 40px;

		font-size: 14px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__arrow {
		--p2s-arrow-size: 40px;

		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__brand {
		margin-right: 12px;
		margin-left: 12px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 767px) {
	.p2sew-bank-logos--showcase .p2sew-bank-logos__brand {
		margin-right: 12px;
		margin-left: 12px;
	}
}