/*!
 * Pay2S Elementor Widgets — API Integration
 * Số đo pay2s.vn (#integration):
 *  dải nền radial-gradient(at 65% 30%, #e9f2ef, transparent 65%), #f5f8fb · padding trên 60
 *  (dưới 36 = khoảng cách tới dải "Integration Platforms"; widget đó giữ phần đệm 35 phía dưới)
 *  lưới 1fr 1.15fr .7fr, gap 35 (≤1100: 2 cột + checklist 4 cột ở hàng dưới · ≤800: 1 cột, checklist 2 cột)
 *  tiêu đề 29px · mô tả 14px, cách nút 24 · code: tab 11px, nền #182b28, chữ #a7dfb5, cao 224, 11px/1.9
 */

.p2sew.p2sew-api-integration {
	background: radial-gradient(at 65% 30%, #e9f2ef, transparent 65%), #f5f8fb;
	scroll-margin-top: 20px;
}

.p2sew-api-integration .p2sew-api-integration__inner {
	padding: 60px 0 36px;
}

.p2sew-api-integration .p2sew-api-integration__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr 0.7fr;
	align-items: center;
	gap: 35px;
}

.p2sew-api-integration .p2sew-api-integration__intro {
	min-width: 0;
}

.p2sew-api-integration .p2sew-title {
	font-size: 29px;
}

.p2sew-api-integration .p2sew-heading__desc {
	max-width: none;
	margin: 0 0 24px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Khối code nhiều tab
 * ------------------------------------------------------------------------- */
.p2sew-api-integration .p2sew-code {
	--p2s-tab-color: #81928a;
	--p2s-tab-active-color: #fff;
	--p2s-tab-active-bg: #087b4b;

	min-width: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 16px 30px rgba(19, 44, 35, 0.08);
}

.p2sew-api-integration .p2sew-code__tabs {
	display: flex;
	gap: 1px;
	padding: 5px;
	background: #fff;
}

/* Tab + nút sao chép là <button>: khoá mọi trạng thái trước style button của theme / Kit. */
.p2sew-api-integration .p2sew-code__tab,
.p2sew-api-integration .p2sew-code__copy {
	display: inline-block;
	margin: 0;
	padding: 8px 11px;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	font-family: var(--p2s-font-body);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	text-align: inherit;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.p2sew-api-integration .p2sew-code__tab,
.p2sew-api-integration .p2sew-code__tab:hover,
.p2sew-api-integration .p2sew-code__tab:focus,
.p2sew-api-integration .p2sew-code__copy,
.p2sew-api-integration .p2sew-code__copy:hover,
.p2sew-api-integration .p2sew-code__copy:focus {
	background: transparent;
	color: var(--p2s-tab-color);
}

.p2sew-api-integration .p2sew-code__tab[aria-selected="true"],
.p2sew-api-integration .p2sew-code__tab[aria-selected="true"]:hover,
.p2sew-api-integration .p2sew-code__tab[aria-selected="true"]:focus {
	background: var(--p2s-tab-active-bg);
	color: var(--p2s-tab-active-color);
}

.p2sew-api-integration .p2sew-code__copy {
	margin-left: auto;
}

.p2sew-api-integration .p2sew-code__copied-icon,
.p2sew-api-integration .p2sew-code__copy.is-copied .p2sew-code__copy-icon {
	display: none;
}

.p2sew-api-integration .p2sew-code__copy.is-copied .p2sew-code__copied-icon {
	display: inline-block;
}

.p2sew-api-integration .p2sew-code__panel {
	display: block;
	height: 224px;
	margin: 0;
	padding: 23px;
	overflow: auto;
	border: 0;
	border-radius: 0;
	background: #182b28;
	color: #a7dfb5;
	font-family: monospace, monospace;
	font-size: 11px;
	line-height: 1.9;
	white-space: normal;
	tab-size: 4;
}

.p2sew-api-integration .p2sew-code__panel[hidden] {
	display: none;
}

.p2sew-api-integration .p2sew-code__panel code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--p2s-font-mono);
	font-size: inherit;
	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;
}

.p2sew-api-integration .p2sew-code__caption {
	display: block;
	padding: 8px 13px;
	background: #20342f;
	color: #89a397;
	font-size: 9px;
}

/* ---------------------------------------------------------------------------
 * Checklist
 * ------------------------------------------------------------------------- */
.p2sew-api-integration .p2sew-checklist {
	display: grid;
	gap: 21px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p2sew-api-integration .p2sew-checklist__item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #6f8078;
	font-size: 11px;
}

.p2sew-api-integration .p2sew-checklist__item .p2sew-icon {
	color: #389d69;
	font-size: 19px;
}

@media (max-width: 1100px) {
	.p2sew-api-integration .p2sew-api-integration__grid {
		grid-template-columns: 1fr 1.15fr;
	}

	.p2sew-api-integration .p2sew-checklist {
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, 1fr);
	}
}

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

	.p2sew-api-integration .p2sew-checklist {
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 800px) {
	.p2sew-api-integration .p2sew-api-integration__grid {
		grid-template-columns: 1fr;
	}

	.p2sew-api-integration .p2sew-checklist {
		grid-template-columns: 1fr 1fr;
	}
}

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

	.p2sew-api-integration .p2sew-checklist {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.p2sew-api-integration .p2sew-title {
		font-size: 26px;
	}

	.p2sew-api-integration .p2sew-code__tab,
	.p2sew-api-integration .p2sew-code__copy {
		padding: 8px;
	}

	.p2sew-api-integration .p2sew-code__panel {
		padding: 18px 13px;
		font-size: 10px;
	}

	.p2sew-api-integration .p2sew-checklist {
		gap: 16px;
	}
}

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

	.p2sew-api-integration .p2sew-code__tab,
	.p2sew-api-integration .p2sew-code__copy {
		padding: 8px;
	}

	.p2sew-api-integration .p2sew-code__panel {
		padding: 18px 13px;
		font-size: 10px;
	}

	.p2sew-api-integration .p2sew-checklist {
		gap: 16px;
	}
}