/*!
 * Pay2S Elementor Widgets — Operation Tools
 * Số đo pay2s.vn (.hp-more-products):
 *  padding trên 5 (≥1101) / 20 (≤1100), dưới theo section (48/65/45)
 *  lưới 3 cột gap 24 (≤1000: 15 · ≤800: 1 cột, thẻ chia 2 cột minh hoạ | chữ · ≤480: xếp dọc)
 *  thẻ: viền #e3eee7, bo 12, padding 20 (≤1000: 14 · ≤800: 20) · tiêu đề 15px, mô tả 12px/1.8
 *  khung minh hoạ cao 165, bo 9, nền gradient xanh nhạt · banner cách lưới 24 (style: promo-banner.css)
 */

.p2sew-operation-tools .p2sew-operation-tools__inner {
	padding-top: 20px;
}

.p2sew-operation-tools .p2sew-operation-tools__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.p2sew-operation-tools .p2sew-operation-tools__card,
.p2sew-operation-tools a.p2sew-operation-tools__card:hover,
.p2sew-operation-tools a.p2sew-operation-tools__card:focus {
	color: var(--p2s-ink);
	text-decoration: none;
}

.p2sew-operation-tools .p2sew-operation-tools__card {
	display: block;
	padding: 20px;
	border: 1px solid #e3eee7;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 9px 25px rgba(22, 72, 40, 0.024);
	transition: transform 0.2s, box-shadow 0.2s;
}

.p2sew-operation-tools .p2sew-operation-tools__card:hover {
	transform: translateY(var(--p2s-card-lift, 0px));
}

.p2sew-operation-tools .p2sew-operation-tools__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 23px 0 10px;
	font-size: 15px;
}

.p2sew-operation-tools .p2sew-operation-tools__title .p2sew-icon {
	color: #268d5c;
	font-size: 18px;
}

.p2sew-operation-tools .p2sew-operation-tools__text {
	font-size: 12px;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * Khung minh hoạ
 * ------------------------------------------------------------------------- */
.p2sew-operation-tools .p2sew-operation-tools__art {
	height: 165px;
	padding: 20px;
	border-radius: 9px;
	background: linear-gradient(120deg, #ecf9f2, #f6fbf8);
}

/* Thông báo giao dịch */
.p2sew-operation-tools .p2sew-operation-tools__art--notification > span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--notification > span .p2sew-icon {
	color: #1487e5;
}

.p2sew-operation-tools .p2sew-operation-tools__art--notification > strong {
	display: block;
	margin: 10px 0 15px;
	color: var(--p2s-art-accent, #16834c);
	font-size: 25px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--notification > div {
	display: flex;
	gap: 7px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--notification b {
	padding: 4px 8px;
	border: 1px solid #e2ebe6;
	border-radius: 5px;
	background: #fff;
	color: #49896b;
	font-size: 8px;
}

/* Cửa hàng / chi nhánh */
.p2sew-operation-tools .p2sew-operation-tools__art--store > span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
}

.p2sew-operation-tools .p2sew-operation-tools__art--store > div {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--store > div > span {
	display: grid;
	flex: 1 1 0%;
	justify-items: center;
	gap: 8px;
	padding: 9px;
	border-radius: 7px;
	background: #fff;
}

.p2sew-operation-tools .p2sew-operation-tools__art--store .p2sew-icon {
	color: var(--p2s-art-accent, #168650);
	font-size: 23px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--store small {
	font-size: 7px;
	white-space: nowrap;
}

.p2sew-operation-tools .p2sew-operation-tools__art--store i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #38b478;
	font-style: normal;
}

/* Trình duyệt white-label */
.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel {
	padding: 0;
	overflow: hidden;
	border: 1px solid #deebe4;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel > span {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px;
	background: #fff;
	color: #8a9b90;
	font-size: 9px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #9fcbb4;
	font-style: normal;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel > div {
	padding: 15px;
	text-align: center;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel .p2sew-icon {
	color: var(--p2s-art-accent, #268f5d);
	font-size: 30px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel strong {
	display: block;
	font-size: 13px;
}

.p2sew-operation-tools .p2sew-operation-tools__art--whitelabel small {
	color: #789382;
	font-size: 9px;
}

/* Ảnh */
.p2sew-operation-tools .p2sew-operation-tools__art--image {
	padding: 0;
	overflow: hidden;
}

.p2sew-operation-tools .p2sew-operation-tools__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Banner Open Banking nằm dưới lưới */
.p2sew-operation-tools .p2sew-promo {
	margin-top: 24px;
}

@media (min-width: 1101px) {
	:where(:not(.p2sew-rwd-container)) > .p2sew-operation-tools .p2sew-operation-tools__inner {
		padding-top: 5px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (min-width: 1101px) {
	.p2sew-operation-tools .p2sew-operation-tools__inner {
		padding-top: 5px;
	}
}

@media (max-width: 1000px) {
	.p2sew-operation-tools .p2sew-operation-tools__grid {
		gap: 15px;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card,
	.p2sew-operation-tools .p2sew-operation-tools__art--notification,
	.p2sew-operation-tools .p2sew-operation-tools__art--store {
		padding: 14px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 1000px) {
	.p2sew-operation-tools .p2sew-operation-tools__grid {
		gap: 15px;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card,
	.p2sew-operation-tools .p2sew-operation-tools__art--notification,
	.p2sew-operation-tools .p2sew-operation-tools__art--store {
		padding: 14px;
	}
}

@media (max-width: 800px) {
	.p2sew-operation-tools .p2sew-operation-tools__grid {
		grid-template-columns: 1fr;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 24px;
		padding: 20px;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card > .p2sew-operation-tools__art {
		grid-row: span 2;
	}

	.p2sew-operation-tools .p2sew-operation-tools__title {
		align-self: end;
		margin: 0;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 800px) {
	.p2sew-operation-tools .p2sew-operation-tools__grid {
		grid-template-columns: 1fr;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 24px;
		padding: 20px;
	}

	.p2sew-operation-tools .p2sew-operation-tools__card > .p2sew-operation-tools__art {
		grid-row: span 2;
	}

	.p2sew-operation-tools .p2sew-operation-tools__title {
		align-self: end;
		margin: 0;
	}
}

@media (max-width: 480px) {
	.p2sew-operation-tools .p2sew-operation-tools__card {
		display: block;
	}

	.p2sew-operation-tools .p2sew-operation-tools__title {
		margin: 18px 0 10px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 480px) {
	.p2sew-operation-tools .p2sew-operation-tools__card {
		display: block;
	}

	.p2sew-operation-tools .p2sew-operation-tools__title {
		margin: 18px 0 10px;
	}
}