/**
 * Tom Luxury — Section "stats" (Chi so nang luc)
 * -----------------------------------------------------------------------------
 * Nen kem, KHONG khung vien. Con so rat lon mau vang dong (serif, weight 300),
 * duoi la nhan in hoa nho letter-spacing rong, roi mo ta nho mau mo.
 * Hai duong ke manh ngan tren/duoi section.
 *
 * Bien do template dat (inline custom property tinh tu thiet lap admin):
 *   --tl-cols  --tl-cols-md  --tl-cols-sm   (dung boi .tl-grid)
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. VO SECTION
 * ========================================================================== */
.tl-stats {
	padding-block: calc(var(--space-section) * .74);
}

.tl-stats--bg-none {
	background-color: transparent;
}

/* Duong ke manh ngan tren/duoi — trong panel toi tu doi sang vien mo */
.tl-stats--rules {
	border-top: var(--rule-w) solid var(--color-border);
	border-bottom: var(--rule-w) solid var(--color-border);
}

/* =============================================================================
 * 2. LUOI CHI SO
 * ========================================================================== */
.tl-stats__list {
	--tl-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-stats__item {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	text-align: center;
}

/* =============================================================================
 * 3. BIEU TUONG (tuy chon)
 *    span la inline: bat buoc dat display cho wrapper, neu khong SVG se phinh.
 * ========================================================================== */
.tl-stats__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-3xs);
	color: var(--color-luxury-gold);
}

.tl-stats__icon > svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* =============================================================================
 * 4. CON SO
 * ========================================================================== */
.tl-stats__value {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 4.4vw, 4.25rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: .012em;
	color: var(--color-luxury-gold);
	font-variant-numeric: lining-nums tabular-nums;
	overflow-wrap: break-word;
}

/* =============================================================================
 * 5. NHAN + MO TA
 * ========================================================================== */
.tl-stats__label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.45;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text);
}

.tl-stats__desc {
	max-width: 32ch;
	margin: var(--space-3xs) auto 0;
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

/* =============================================================================
 * 6. RESPONSIVE
 *    1920 / 1440 / 1366 dung chung thang clamp o tren.
 * ========================================================================== */

/* Tablet ngang: 1024 / 820 / 768 */
@media (max-width: 1024px) {

	.tl-stats {
		padding-block: calc(var(--space-section) * .82);
	}

	.tl-stats__list {
		--tl-gap: clamp(var(--space-md), 4vw, var(--space-xl));
	}

	.tl-stats__value {
		font-size: clamp(2.25rem, 6vw, 3.5rem);
	}

	.tl-stats__desc {
		max-width: 30ch;
	}
}

/* Dien thoai lon: 640 / 430 */
@media (max-width: 640px) {

	.tl-stats {
		padding-block: var(--space-section);
	}

	.tl-stats__list {
		--tl-gap: var(--space-lg);
	}

	.tl-stats__value {
		font-size: clamp(2.25rem, 10.5vw, 3rem);
	}

	.tl-stats__label {
		letter-spacing: var(--tracking-wider);
	}

	.tl-stats__desc {
		max-width: 40ch;
		font-size: var(--font-size-xs);
	}
}

/* Dien thoai nho: 430 / 390 / 360 — mot cot cho de doc */
@media (max-width: 430px) {

	.tl-stats__list.tl-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tl-stats__list {
		--tl-gap: var(--space-lg);
	}

	.tl-stats__value {
		font-size: clamp(2.5rem, 13vw, 3.25rem);
	}
}