/* ==========================================================================
   PYM Pricing Compare
   Một CSS grid duy nhất cho cả bảng: mỗi hàng (.pct-row) là display:contents,
   nên các ô cùng hàng luôn cao bằng nhau → tick luôn thẳng hàng với tên tính năng.
   ========================================================================== */

.pct {
	/* Không khai báo biến ở đây: mặc định nằm trong fallback var(--x, mặc định)
	   để giá trị từ Bricks (gán ở bất kỳ đâu) luôn được ưu tiên. */
	color: var(--pct-text, #24292e);
	width: 100%;
}

.pct *,
.pct *::before,
.pct *::after {
	box-sizing: border-box;
}

/* Vùng cuộn ngang — cũng là container để tính cqw */
.pct-scroll {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	container-type: inline-size;
	border: 1px solid var(--pct-border, #e6e2d6);
	border-radius: var(--pct-radius, 10px);
	background: var(--pct-bg, #ffffff);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.pct-grid {
	display: grid;
	grid-template-columns:
		minmax(var(--pct-first-min, 240px), 1.5fr)
		repeat(var(--pct-cols, 3), minmax(var(--pct-col-min, 170px), 1fr));
	width: 100%;
	/* Grid luôn rộng ≥ tổng các cột → sticky không bị "đẩy" ra khỏi khối chứa */
	min-width: calc(var(--pct-first-min, 240px) + var(--pct-cols, 3) * var(--pct-col-min, 170px));
}

.pct-row {
	display: contents;
}

/* --------------------------------------------------------------------------
   Ô chung
   -------------------------------------------------------------------------- */
.pct-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 12px 18px;
	text-align: center;
	background: var(--pct-bg, #ffffff);
	border-bottom: 1px solid var(--pct-border, #e6e2d6);
	border-left: 1px solid var(--pct-border, #e6e2d6);
	overflow-wrap: break-word;
	transition: background-color 0.15s ease;
}

.pct-row--alt > .pct-cell {
	background: var(--pct-stripe, #f7f7fa);
}

/* .pct-row--body:hover > .pct-cell {
	background: var(--pct-hover, #f1efe6);
} */

.pct-row:last-child > .pct-cell {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cột đầu tiên: sticky
   -------------------------------------------------------------------------- */
.pct-cell--first {
	position: sticky;
	left: 0;
	z-index: 2;
	justify-content: flex-start;
	text-align: left;
	border-left: 0;
	border-right: 1px solid var(--pct-border, #e6e2d6);
}

.pct-cell--first + .pct-cell {
	border-left: 0;
}

.pct-cell--first::after {
	content: "";
	position: absolute;
	top: 0;
	right: -13px;
	bottom: -1px;
	width: 12px;
	pointer-events: none;
	background: linear-gradient(to right, var(--pct-sticky-shadow, rgba(23, 33, 43, 0.12)), transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pct.is-scrolled .pct-cell--first::after {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.pct-cell--head {
	padding: 26px 18px 22px;
	background: var(--pct-head-bg, #ffffff);
}

.pct-corner {
	align-items: flex-end;
	z-index: 3;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pct-muted, #6f6a5d);
}

.pct-plan {
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
	background: var(--plan-bg, var(--pct-head-bg, #ffffff));
	color: var(--plan-color, var(--pct-text, #24292e));
}

.pct-plan-name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.pct-price {
	margin-top: 2px;
	font-family: "Fraunces", "Playfair Display", Georgia, serif;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pct-unit {
	font-size: 13px;
	opacity: 0.85;
}

.pct-desc {
	max-width: 22em;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.pct-feature {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

.pct-value {
	font-size: 14px;
	line-height: 1.45;
}

.pct-text.is-bold {
	font-weight: 700;
}

.pct-icon {
	display: inline-flex;
	flex: none;
	width: var(--pct-icon-size, 20px);
	height: var(--pct-icon-size, 20px);
	font-size: var(--pct-icon-size, 20px);
	line-height: 1;
}

.pct-icon svg,
.pct-icon i {
	width: 100%;
	height: 100%;
	font-size: inherit;
}

.pct-check {
	color: var(--pct-check, #1f6b58);
}

.pct-check svg:not(:has(.pct-check-mark)) {
	fill: currentColor;
}

.pct-check-mark {
	stroke: var(--pct-check-mark, #ffffff);
}

.pct-cross {
	color: var(--pct-dash, #b3aea2);
}

.pct-dash {
	color: var(--pct-dash, #b3aea2);
	line-height: 1;
}

.pct-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Mobile: cột đầu sticky rộng 40% khung nhìn, các cột gói cuộn ngang
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pct-grid {
		grid-template-columns:
			calc(var(--pct-first-m, 40) * 1cqw)
			repeat(var(--pct-cols, 3), calc(var(--pct-col-m, 42) * 1cqw));
		width: max-content;
		min-width: 0;
	}

	.pct-cell {
		padding: 10px 10px;
	}

	.pct-cell--first {
		padding-left: 12px;
		padding-right: 10px;
	}

	.pct-cell--head {
		padding: 18px 10px 16px;
	}

	.pct-corner {
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.pct-plan-name {
		font-size: 15px;
	}

	.pct-price {
		font-size: 22px;
	}

	.pct-unit,
	.pct-desc {
		font-size: 12px;
	}

	.pct-feature {
		font-size: 13px;
	}

	.pct-value {
		font-size: 13px;
	}
}

/* Trình duyệt cũ không hỗ trợ container query units → fallback vw */
@supports not (width: 1cqw) {
	@media (max-width: 767px) {
		.pct-grid {
			grid-template-columns:
				calc(var(--pct-first-m, 40) * 1vw)
				repeat(var(--pct-cols, 3), calc(var(--pct-col-m, 42) * 1vw));
		}
	}
}