/*!
 * Pay2S Elementor Widgets — E-Invoice
 * Số đo pay2s.vn (#einvoice):
 *  lưới 1fr 1fr, gap 70 (≤1000: 35 · ≤800: 1 cột gap 40 · ≤480: 25)
 *  minh hoạ cao 390 (≤480: 450, rộng tối đa 530 ở ≤800), nền blob gradient xoay −8°, tràn trái 170px
 *  cửa sổ ứng dụng rộng 90%, xoay −5° · hoá đơn 198px (≤480: 153px), xoay −13° · chip dưới trái
 *  mô tả 14px/1.8 · logo nhà cung cấp 75×30 (≤480: 60) · hàng lợi ích 4 cột gap 15, cách 48 (≤800: 2 cột, 25)
 */

.p2sew.p2sew-einvoice {
	/* Nền blob tràn sang trái 170px: không tạo thanh cuộn ngang. */
	overflow-x: clip;
	scroll-margin-top: 25px;
}

.p2sew-einvoice .p2sew-einvoice__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 70px;
}

.p2sew-einvoice .p2sew-einvoice__main--reverse > .p2sew-einvoice__demo {
	order: 2;
}

.p2sew-einvoice .p2sew-einvoice__main--single {
	grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
 * Minh hoạ
 * ------------------------------------------------------------------------- */
.p2sew-einvoice .p2sew-einvoice__demo {
	--p2s-blob-from: #d5f4e4;
	--p2s-blob-to: #f7fdfa;
	--p2s-demo-accent: #168653;

	position: relative;
	height: 390px;
	isolation: isolate;
}

.p2sew-einvoice .p2sew-einvoice__demo::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 15px -20px 0 -170px;
	border-radius: 30% 60% 50% 30%;
	background: linear-gradient(125deg, var(--p2s-blob-from), var(--p2s-blob-to));
	transform: rotate(-8deg);
}

.p2sew-einvoice .p2sew-einvoice__app,
.p2sew-einvoice .p2sew-einvoice__receipt {
	line-height: 1.5;
}

/* Cửa sổ ứng dụng */
.p2sew-einvoice .p2sew-einvoice__app {
	position: absolute;
	top: 40px;
	left: 0;
	width: 90%;
	overflow: hidden;
	border: 1px solid #e0ebe5;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 18px 35px rgba(23, 92, 56, 0.125);
	transform: rotate(-5deg);
}

.p2sew-einvoice .p2sew-einvoice__app-header {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 13px;
	border-bottom: 1px solid #eef3ef;
	font-size: 10px;
}

.p2sew-einvoice .p2sew-einvoice__app-header img {
	width: 65px;
	height: auto;
}

.p2sew-einvoice .p2sew-einvoice__app-header i {
	width: 15px;
	height: 15px;
	margin-left: auto;
	border-radius: 50%;
	background: #a8d7bb;
	font-style: normal;
}

.p2sew-einvoice .p2sew-einvoice__app-body {
	display: flex;
}

.p2sew-einvoice .p2sew-einvoice__app-body > aside {
	display: grid;
	align-content: start;
	gap: 24px;
	padding: 24px 13px;
	background: #f6faf8;
	color: #238c58;
}

.p2sew-einvoice .p2sew-einvoice__app-body > div {
	flex: 1 1 0%;
	padding: 19px 15px;
}

.p2sew-einvoice .p2sew-einvoice__app .p2sew-eyebrow {
	font-size: 8px;
}

.p2sew-einvoice .p2sew-einvoice__numbers {
	display: flex;
	gap: 12px;
	margin: 12px 0;
}

.p2sew-einvoice .p2sew-einvoice__numbers > div {
	flex: 1 1 0%;
	padding: 12px;
	border: 1px solid #edf1ef;
	border-radius: 6px;
}

.p2sew-einvoice .p2sew-einvoice__numbers small,
.p2sew-einvoice .p2sew-einvoice__numbers strong,
.p2sew-einvoice .p2sew-einvoice__numbers em {
	display: block;
}

.p2sew-einvoice .p2sew-einvoice__numbers small {
	color: #7f8f86;
	font-size: 8px;
}

.p2sew-einvoice .p2sew-einvoice__numbers strong {
	font-size: 22px;
}

.p2sew-einvoice .p2sew-einvoice__numbers em {
	color: #259658;
	font-size: 7px;
	font-style: normal;
}

.p2sew-einvoice .p2sew-einvoice__table-head,
.p2sew-einvoice .p2sew-einvoice__table-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 4px;
	border-bottom: 1px solid #edf1ef;
	font-size: 8px;
}

.p2sew-einvoice .p2sew-einvoice__table-head {
	background: #f6f9f7;
	color: #7a8c81;
}

.p2sew-einvoice .p2sew-einvoice__table-row > span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.p2sew-einvoice .p2sew-einvoice__table-row > span:last-child {
	color: var(--p2s-demo-accent);
}

/* Hoá đơn giấy */
.p2sew-einvoice .p2sew-einvoice__receipt {
	position: absolute;
	top: 95px;
	right: -8px;
	width: 198px;
	padding: 23px 19px;
	border: 1px solid #e2ebe5;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 20px 28px rgba(18, 90, 57, 0.145);
	text-align: center;
	transform: rotate(-13deg);
}

.p2sew-einvoice .p2sew-einvoice__receipt-check {
	position: absolute;
	top: -25px;
	right: -10px;
	display: grid;
	place-items: center;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #bdeccb;
	color: #12874b;
	font-size: 30px;
}

.p2sew-einvoice .p2sew-einvoice__receipt > img {
	display: block;
	width: 45px;
	height: auto;
	margin-bottom: 12px;
}

.p2sew-einvoice .p2sew-einvoice__receipt > strong {
	display: block;
	font-size: 12px;
	line-height: 1.4;
}

.p2sew-einvoice .p2sew-einvoice__receipt > small {
	color: #849388;
	font-size: 7px;
}

.p2sew-einvoice .p2sew-einvoice__receipt hr {
	margin: 14px 0;
	border-top-color: #e8efeb;
}

.p2sew-einvoice .p2sew-einvoice__receipt > div {
	display: flex;
	justify-content: space-between;
	padding-block: 5px;
	font-size: 7px;
}

.p2sew-einvoice .p2sew-einvoice__receipt-status {
	display: block;
	margin-top: 14px;
	padding: 7px;
	border: 1px solid #9dd5b1;
	color: #168d51;
	font-size: 8px;
}

/* Chip "Nhận thanh toán → Tự động xuất hóa đơn" */
.p2sew-einvoice .p2sew-einvoice__auto {
	position: absolute;
	bottom: -5px;
	left: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid #d7ecdf;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 7px 20px rgba(23, 125, 63, 0.07);
	color: #168550;
}

.p2sew-einvoice .p2sew-einvoice__auto > span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
}

/* ---------------------------------------------------------------------------
 * Nội dung
 * ------------------------------------------------------------------------- */
.p2sew-einvoice .p2sew-einvoice__copy {
	min-width: 0;
}

.p2sew-einvoice .p2sew-heading__desc {
	max-width: none;
	margin: 14px 0;
	font-size: 14px;
	line-height: 1.8;
}

.p2sew-einvoice .p2sew-einvoice__providers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin: 25px 0;
}

.p2sew-einvoice .p2sew-einvoice__providers img {
	width: 75px;
	height: 30px;
	object-fit: contain;
}

.p2sew-einvoice .p2sew-einvoice__provider-link {
	display: inline-flex;
}

/* Hàng lợi ích */
.p2sew-einvoice .p2sew-einvoice__benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-top: 48px;
}

.p2sew-einvoice .p2sew-einvoice__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 12px;
	border-radius: 9px;
	background: #f8fcf9;
}

.p2sew-einvoice .p2sew-einvoice__benefit .p2sew-icon-badge {
	width: 35px;
	height: 35px;
	font-size: 22px;
}

.p2sew-einvoice .p2sew-einvoice__benefit strong {
	font-size: 11px;
}

@media (max-width: 1000px) {
	.p2sew-einvoice .p2sew-einvoice__main {
		gap: 35px;
	}
}

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

@media (max-width: 800px) {
	.p2sew-einvoice .p2sew-einvoice__main {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.p2sew-einvoice .p2sew-einvoice__main--reverse > .p2sew-einvoice__demo {
		order: 0;
	}

	.p2sew-einvoice .p2sew-einvoice__demo {
		width: 100%;
		max-width: 530px;
		margin: auto;
	}

	.p2sew-einvoice .p2sew-einvoice__benefits {
		grid-template-columns: 1fr 1fr;
		margin-top: 25px;
	}
}

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

	.p2sew-einvoice .p2sew-einvoice__main--reverse > .p2sew-einvoice__demo {
		order: 0;
	}

	.p2sew-einvoice .p2sew-einvoice__demo {
		width: 100%;
		max-width: 530px;
		margin: auto;
	}

	.p2sew-einvoice .p2sew-einvoice__benefits {
		grid-template-columns: 1fr 1fr;
		margin-top: 25px;
	}
}

@media (max-width: 480px) {
	.p2sew-einvoice .p2sew-einvoice__main {
		gap: 25px;
	}

	.p2sew-einvoice .p2sew-einvoice__demo {
		height: 450px;
	}

	.p2sew-einvoice .p2sew-einvoice__receipt {
		top: 95px;
		right: 0;
		width: 153px;
		padding: 17px 12px;
	}

	.p2sew-einvoice .p2sew-einvoice__app-body > div {
		padding: 12px 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__app-body > aside {
		padding: 20px 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__numbers > div {
		padding: 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__auto {
		bottom: 5px;
		left: 0;
		padding: 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__auto > span {
		font-size: 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__providers img {
		width: 60px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefits {
		gap: 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefit {
		gap: 7px;
		padding: 10px 7px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefit strong {
		font-size: 10px;
	}
}

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

	.p2sew-einvoice .p2sew-einvoice__demo {
		height: 450px;
	}

	.p2sew-einvoice .p2sew-einvoice__receipt {
		top: 95px;
		right: 0;
		width: 153px;
		padding: 17px 12px;
	}

	.p2sew-einvoice .p2sew-einvoice__app-body > div {
		padding: 12px 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__app-body > aside {
		padding: 20px 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__numbers > div {
		padding: 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__auto {
		bottom: 5px;
		left: 0;
		padding: 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__auto > span {
		font-size: 9px;
	}

	.p2sew-einvoice .p2sew-einvoice__providers img {
		width: 60px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefits {
		gap: 8px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefit {
		gap: 7px;
		padding: 10px 7px;
	}

	.p2sew-einvoice .p2sew-einvoice__benefit strong {
		font-size: 10px;
	}
}