/**
 * Section 2: Stats — Figma desktop 4095:4503 · mobile 4095:5943
 *
 * item 320×230 (đo trên 4095:4507):
 *   div "số"   320×67   — số h1 58 (cao 67) + "%" h5 25 (cao 29) neo MÉP TRÊN
 *   divider    y = 107, cao 0 (vector 1px), fill stroke
 *   headings   y = 147  — heading 320×23, description y+39 (gap 16), cao 44
 */

#cr-stats {
	position: relative;
	/* nền trang trí tràn ra ngoài section, cắt phần thừa */
	overflow: clip;
}

/* ---------- nền aurora ---------- */
/* Figma: bg 1950×921 đặt tại x=-15 y=-174 so với section 1920×747
   → tâm ngang trùng section, mép trên cao hơn section 174px. */
#cr-stats .cr-stats__bg {
	position: absolute;
	left: 50%;
	top: -174px;
	width: 1950px;
	height: 921px;
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}

#cr-stats .cr-stats__bg img {
	width: 100%;
	height: auto;
}

#cr-stats .cr-container {
	position: relative;
	z-index: 1;
}

/* ---------- list ---------- */
#cr-stats .cr-stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--var-40);
}

#cr-stats .cr-stats__item {
	display: flex;
	flex-direction: column;
}

/* ---------- số ---------- */
/* Figma: khối số cao 67 (= h1 58 × lh 115%), "%" cao 29 (= h5 25 × 115%)
   và neo theo MÉP TRÊN của khối số, không phải baseline → align-items: flex-start. */
/* font-family / weight / line-height do class .cr-number lo (base.css) — ở đây
   chỉ cần phần bố cục riêng của khối số. */
#cr-stats .cr-stats__value {
	display: flex;
	align-items: flex-start;
}

#cr-stats .cr-stats__number {
	font-size: var(--fs-h1);
}

#cr-stats .cr-stats__unit {
	font-size: var(--fs-h5);
}

/* ---------- divider ---------- */
/* Figma: divider ở y=107, khối số cao 67 → cách khối số 40 (= var-40);
   section-headings ở y=147 → cách divider 40.
   Trong Figma divider là `vector` cao 0 (nét 1px vẽ trên đường path không chiếm
   chỗ), CSS thì luôn tốn 1px thật → trừ lại 1px ở margin dưới để mốc y=147 của
   headings và tổng chiều cao item 230 khớp đúng Figma. */
#cr-stats .cr-stats__divider {
	display: block;
	height: 1px;
	margin-block: var(--var-40) calc(var(--var-40) - 1px);
	background: var(--color-reverse-stroke);
}

/* ---------- text ---------- */
#cr-stats .cr-stats__text {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

/* ---------- footnote ---------- */
/* Figma desktop: text 307×22 đặt tại x=1093 (1400 − 307) → căn PHẢI. */
#cr-stats .cr-stats__note {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	font-style: italic;
	color: rgba(255, 255, 255, .8);
	text-align: right;
}

@media (max-width: 1024px) {
	/* Figma tablet/mobile: 4 item xếp dọc, gap 152 (tablet) / 174 (mobile).
	   Khoảng cách đó = 40 (gap grid) + phần divider bị bỏ đi + chiều cao chữ;
	   đo lại trên frame: item cao 134, cách nhau 174 → gap 40. */
	#cr-stats .cr-stats__list {
		grid-template-columns: 1fr;
		gap: var(--var-40);
	}

	/* Figma BỎ HẲN divider ở tablet/mobile (không có node `divider` trong
	   4095:5943 và 4095:5828) */
	#cr-stats .cr-stats__divider {
		display: none;
	}

	/* khối số cao 37 ở mobile → khoảng cách số ↔ chữ = 53 − 37 = 16 */
	#cr-stats .cr-stats__item {
		gap: var(--var-16);
	}

	/* Figma tablet/mobile: footnote căn TRÁI (x = 0) */
	#cr-stats .cr-stats__note {
		text-align: left;
	}

	/* nền aurora ở mobile: Figma đặt x=-780 y=45 so với section 390 rộng
	   → vẫn canh giữa theo tâm, nhưng nằm THẤP hơn mép section 45px */
	#cr-stats .cr-stats__bg {
		top: 45px;
	}
}