/*!
 * Pay2S Elementor Widgets — Comparison Table ("table.comparison-table" của template trang sản phẩm pay2s.vn)
 * Phụ thuộc: product.css.
 * Số đo /open-api-banking ("So sánh giữa các nền tảng", 26/09/2026):
 *  section padding 70/0 (60 ≤991), chữ #000 · tiêu đề căn giữa (sec-title, cách bảng 50 / 40 ≤991)
 *  bảng: rộng 100%, border-collapse, nền trắng, bóng 0 0 15 rgba(0,0,0,.05); cột tự co theo nội dung (table-layout auto)
 *  ô: viền 1px #ddd, padding 15/10, căn giữa, căn giữa dọc · hàng tiêu đề nền #106a38 chữ trắng 700
 *  cột tiêu chí: 700, nền #f2f2f2, căn phải · nhãn "Hot": nền orange, chữ trắng 12px, padding 2/6, bo 4, cách trái 5
 *  ≤768: ẩn thead; mỗi hàng là thẻ (viền 1px #ccc, bo 8, padding 10, cách nhau 15); ô căn phải, padding trái 50%,
 *   nhãn cột (data-label) đậm, nằm trái cách 15px, rộng 45%, không xuống dòng
 */

.p2sew.p2sew-comparison-table {
	padding-top: var(--p2s-product-space);
	padding-bottom: var(--p2s-product-space);
	color: #000;
}

.p2sew-comparison-table .p2sew-comparison-table__table {
	--p2s-table-bg: #fff;
	--p2s-table-border: #ddd;
	--p2s-table-head-bg: var(--p2s-product-primary);
	--p2s-table-feature-bg: #f2f2f2;
	--p2s-cell-padding: 15px 10px;
	--p2s-card-border: #ccc;
	--p2s-card-gap: 15px;

	width: 100%;
	margin: 0;
	overflow-x: auto;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: var(--p2s-table-bg);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
	color: inherit;
	font: inherit;
	table-layout: auto;
	caption-side: bottom;
}

.p2sew-comparison-table .p2sew-comparison-table__table th,
.p2sew-comparison-table .p2sew-comparison-table__table td {
	padding: var(--p2s-cell-padding);
	border: 1px solid var(--p2s-table-border);
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: center;
	vertical-align: middle;
}

.p2sew-comparison-table .p2sew-comparison-table__table thead th,
.p2sew-comparison-table .p2sew-comparison-table__table thead td {
	background-color: var(--p2s-table-head-bg);
	color: #fff;
	font-weight: 700;
}

.p2sew-comparison-table .p2sew-comparison-table__table .p2sew-comparison-table__feature {
	background-color: var(--p2s-table-feature-bg);
	font-weight: 700;
	text-align: right;
}

.p2sew-comparison-table .p2sew-comparison-table__badge {
	display: inline-block;
	margin-left: 5px;
	padding: 2px 6px;
	border-radius: 4px;
	background-color: orange;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* Tắt dạng thẻ: bảng cuộn ngang trong khung. */
.p2sew-comparison-table.p2sew-comparison-table--scroll .p2sew-comparison-table__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {
	.p2sew-comparison-table.p2sew-comparison-table--scroll .p2sew-comparison-table__table {
		min-width: 640px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 991px) {
	.p2sew-comparison-table.p2sew-comparison-table--scroll .p2sew-comparison-table__table {
		min-width: 640px;
	}
}

@media (max-width: 768px) {
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table thead {
		display: none;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tr,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td {
		display: block;
		width: 100%;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tr {
		margin-bottom: var(--p2s-card-gap);
		padding: 10px;
		border: 1px solid var(--p2s-card-border);
		border-radius: 8px;
		background-color: var(--p2s-table-bg);
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td {
		position: relative;
		padding-left: 50%;
		text-align: right;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th::before,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td::before {
		content: attr(data-label);
		position: absolute;
		left: 15px;
		width: 45%;
		color: var(--p2s-card-label, inherit);
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 768px) {
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table thead {
		display: none;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tr,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td {
		display: block;
		width: 100%;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tr {
		margin-bottom: var(--p2s-card-gap);
		padding: 10px;
		border: 1px solid var(--p2s-card-border);
		border-radius: 8px;
		background-color: var(--p2s-table-bg);
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td {
		position: relative;
		padding-left: 50%;
		text-align: right;
	}

	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table tbody th::before,
	.p2sew-comparison-table.p2sew-comparison-table--cards .p2sew-comparison-table__table td::before {
		content: attr(data-label);
		position: absolute;
		left: 15px;
		width: 45%;
		color: var(--p2s-card-label, inherit);
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
	}
}