/**
 * DS Elements — Bảng giá theo số lượng
 *
 * Hàng ô dùng flex: hai ô đầu cuối có bề rộng cố định, phần mốc giá ở giữa co
 * giãn và tự chia đều. Đặt cả hàng thành grid thì số cột phải biết trước, mà số
 * mốc là do repeater quyết định.
 */

.elementor-widget-ds-price-tiers {
	width: 100%;
	min-width: 0;
}

.ds-pt {
	width: 100%;
	min-width: 0;

	--ds-pt-aside-w: 210px;
	--ds-pt-gap: var(--ds-space-3);
	--ds-pt-tier-min: 118px;
}

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

/* --- Tiêu đề ------------------------------------------------------------ */

/* Ba cột bằng nhau ở hai bên để tiêu đề đứng giữa thật, không bị link bên phải
   kéo lệch. Cột trái là ô rỗng. */
.ds-pt__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ds-space-4);
	margin-bottom: var(--ds-pt-head-gap, var(--ds-space-6));
}

.ds-pt__heading {
	margin: 0;
	text-align: center;
	color: var(--ds-pt-heading-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
	text-transform: uppercase;
}

.ds-pt__more {
	justify-self: end;
	color: var(--ds-pt-more-color, var(--ds-color-brand-light));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-decoration: none;
	white-space: nowrap;
}

.ds-pt__more:hover {
	text-decoration: underline;
}

/* --- Hàng ô ------------------------------------------------------------- */

.ds-pt__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ds-pt-gap);
}

.ds-pt__cell {
	padding: var(--ds-space-4);
	background: var(--ds-pt-cell-bg, var(--ds-color-white));
	border: 1px solid var(--ds-pt-cell-border, var(--ds-color-border));
	border-radius: var(--ds-pt-cell-radius, var(--ds-radius-md));
}

.ds-pt__aside {
	flex: 0 0 var(--ds-pt-aside-w);
	min-width: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);
	text-align: center;
}

.ds-pt__icon {
	display: grid;
	place-items: center;
	color: var(--ds-pt-icon-color, var(--ds-color-brand));
}

.ds-pt__icon svg {
	width: 32px;
	height: 32px;
	display: block;
	fill: currentColor;
}

.ds-pt__icon i {
	font-size: 32px;
	line-height: 1;
}

.ds-pt__aside-title {
	color: var(--ds-color-brand);
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-pt__aside-sub {
	color: var(--ds-color-muted);
	font-size: var(--ds-fs-topbar);
	line-height: var(--ds-lh-small);
}

/* --- Mốc số lượng ------------------------------------------------------- */

.ds-pt__tiers {
	flex: 1 1 320px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;

	/* auto-fit chứ không phải số cột cố định: số mốc là do repeater quyết định,
	   và bề rộng còn lại thay đổi theo chỗ mà hai ô đầu cuối chiếm. Ghi số cột
	   bằng inline style thì media query không đè lại được — inline luôn thắng. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--ds-pt-tier-min), 1fr));
	gap: var(--ds-pt-gap);
}

.ds-pt__tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);
	min-width: 0;
	text-align: center;
}

.ds-pt__range {
	color: var(--ds-pt-range-color, var(--ds-color-brand));
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-pt__price {
	color: var(--ds-pt-price-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Nút ---------------------------------------------------------------- */

.ds-pt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ds-space-3) var(--ds-space-4);
	width: 100%;

	background: var(--ds-pt-btn-bg, var(--ds-color-accent));
	color: var(--ds-pt-btn-color, var(--ds-color-white));
	border-radius: var(--ds-pt-btn-radius, var(--ds-radius-sm));

	font-size: var(--ds-fs-topbar);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-button);
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--ds-transition);
}

.ds-pt__btn:hover {
	background: var(--ds-color-accent-dark);
	color: var(--ds-pt-btn-color, var(--ds-color-white));
}

.ds-pt__btn:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 2px;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ds-pt {
		--ds-pt-aside-w: 100%;
	}

	.ds-pt__tiers {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	.ds-pt__head {
		grid-template-columns: 1fr;
	}

	/* Cột rỗng chỉ để căn giữa — một cột thì nó thành khoảng trắng thừa. */
	.ds-pt__head-spacer {
		display: none;
	}

	.ds-pt__more {
		justify-self: center;
	}
}

/* --- Kiểu bảng dọc ------------------------------------------------------- */

/*
 * Mặc định .ds-pt__tiers là lưới auto-fit, mỗi mốc một thẻ vuông xếp ngang —
 * hợp khối chạy hết bề ngang ở template 368. Kiểu bảng thì ngược hẳn: một cột
 * dọc, mỗi mốc một dòng hai ô, có hàng nhãn cột nền navy ở trên cùng.
 *
 * Phải huỷ cả grid lẫn kiểu thẻ của .ds-pt__cell, nếu không mỗi ô lại thành một
 * hộp viền riêng nằm trong hộp viền của dòng.
 */

.ds-pt--table .ds-pt__tiers {
	display: block;
	flex: 1 1 100%;
	overflow: hidden;
	border: 1px solid var(--ds-pt-cell-border, var(--ds-color-border));
	border-radius: var(--ds-pt-cell-radius, var(--ds-radius-md));
}

/* Dòng: bỏ hết kiểu thẻ, viền chỉ còn một nét ngăn giữa hai dòng.
   Lưu ý cấu trúc: class .ds-pt__cell nằm trên chính thẻ <li> của dòng, không
   nằm ở hai ô con — nên phải huỷ kiểu thẻ ở đây chứ không ở ô. */
.ds-pt--table .ds-pt__tier {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	text-align: left;

	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.ds-pt--table .ds-pt__tier + .ds-pt__tier {
	border-top: 1px solid var(--ds-pt-cell-border, var(--ds-color-border));
}

/* Hai ô con chia đôi bề ngang. Chọn theo con trực tiếp để khỏi phải liệt kê
   từng class, thêm ô thứ ba sau này cũng tự chia đều. */
.ds-pt--table .ds-pt__tier > * {
	flex: 1 1 50%;
	min-width: 0;
	padding: var(--ds-space-3) var(--ds-space-4);
}

/* Kẻ sọc cho dễ dò mắt theo dòng. Đếm từ 1 nên hàng nhãn cột là số lẻ. */
.ds-pt--table .ds-pt__tier:nth-child(even) {
	background: var(--ds-pt-stripe-bg, var(--ds-color-surface));
}

.ds-pt--table .ds-pt__tier--head {
	background: var(--ds-pt-head-bg, var(--ds-color-brand));
}

/* Trỏ vào CON TRỰC TIẾP, không phải .ds-pt__cell: sau khi hàng nhãn dùng chung
   cấu trúc với hàng dữ liệu thì hai ô là .ds-pt__range và .ds-pt__price, mà hai
   class đó tự đặt màu navy và xám — navy trên nền navy là tàng hình. */
.ds-pt--table .ds-pt__tier--head > * {
	color: var(--ds-pt-head-color, var(--ds-color-white));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ds-ls-nav);
}

/* Khối kêu gọi dưới bảng: bỏ viền thẻ để nút chạy sát mép bảng. */
.ds-pt--table .ds-pt__aside--bottom {
	padding: 0;
	background: transparent;
	border: 0;
}

/* Khối kêu gọi xuống dưới bảng, chạy hết bề ngang.
   flex-basis 100% ép nó xuống dòng riêng trong .ds-pt__row (đã có flex-wrap). */
.ds-pt__aside--bottom {
	flex: 1 1 100%;
}

.ds-pt__aside--bottom .ds-pt__btn {
	width: 100%;
}