/* Block Số liệu trên ảnh nền (Figma "Detail page → Solution" → Frame 66, 1920×1024) */

.block-stat-slides {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	color: #fff;
}

.block-stat-slides__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.block-stat-slides__track::-webkit-scrollbar {
	display: none;
}

.stat-slide {
	position: relative;
	display: grid;
	flex: 0 0 100%;
	place-items: center;
	aspect-ratio: 4 / 5;
	padding: 72px var(--gutter);
	isolation: isolate;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.stat-slide {
		aspect-ratio: 1920 / 1024;
	}
}

.stat-slide > picture,
.stat-slide__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
}

.stat-slide__image {
	object-fit: cover;
}

/* Ảnh Figma rất tối; phủ nhẹ để chữ vẫn đọc được khi biên tập viên chọn ảnh sáng hơn. */
.stat-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.3);
}

.stat-slide__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 clamp(16px, 2.76vw, 53px); /* 53 / 1920 */
	font-family: var(--font-display);
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* Chữ tô gradient: số vàng, nhãn trắng ánh kim (ước lượng từ ảnh chụp, Figma khoá export). */
.stat-slide__value,
.stat-slide__label {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Mobile: số trên, nhãn dưới; lề ngang chừa chỗ cho nút trước/sau. */
@media (max-width: 767px) {
	.stat-slide {
		padding-inline: 64px;
	}

	.stat-slide__text {
		flex-direction: column;
	}
}

.stat-slide__value {
	font-size: clamp(88px, 8.96vw, 172px);
	background-image: linear-gradient(180deg, #ffd45e 0%, #f5a623 100%);
}

.stat-slide__label {
	font-size: clamp(32px, 4.17vw, 80px);
	background-image: linear-gradient(180deg, #fff 0%, #c9c9c9 100%);
}

/* Nút trước/sau hai bên, chấm chuyển slide ở dưới: chỉ hiện khi có JS (layout.css). */
.block-stat-slides__nav {
	position: absolute;
	top: 50%;
	right: clamp(12px, 1.25vw, 24px);
	left: clamp(12px, 1.25vw, 24px);
	justify-content: space-between;
	pointer-events: none;
	transform: translateY(-50%);
}

.block-stat-slides__nav .carousel-nav__button {
	width: clamp(40px, 2.81vw, 54px);
	height: clamp(40px, 2.81vw, 54px);
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: auto;
}

.block-stat-slides__dots {
	position: absolute;
	bottom: clamp(16px, 1.51vw, 29px); /* tâm chấm cách đáy 38 / 1024 */
	left: 50%;
	transform: translateX(-50%);
}