/**
 * Section 07 — Text (khoi so lieu). CLONE ban mau Fabrica.
 * Bang so day du + tham so bon hieu ung: template-parts/home/section-so-lieu.php.
 *
 * ⚠️ Bon con so la SO BIA cua ban mau. Xem canh bao dau file PHP.
 */

.w22-so-lieu {
	/* Khe doc do `.w22-than` lo — section chi co le ngang. */
	padding-inline: var(--w22-le);

	/*
	 * Ba duong cong `--sl-*-cong` (ke · tu · lo) da chuyen len `:root` trong
	 * tokens.css: quy tac `.w22-tu` duoi day ap cho MOI section, de bien o
	 * pham vi nay thi ngoai Section 07 `var()` khong giai duoc, ca khai bao
	 * `transition` hong va chu hien tuc thi (dinh Section 09/10/12).
	 */
}

.w22-so-lieu__khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

/* ---------- Hang tren: bon o so ---------- */

/*
 * `overflow: hidden` la CHEP Y NGUYEN ban mau: duong ke dat o `top:100%` roi keo
 * len nua than, nen nua duoi bi xen. Bo dong nay thi net day gap doi ban mau.
 */
.w22-so-lieu__tren {
	position: relative;
	overflow: hidden;
}

.w22-so-lieu__luoi {
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
	padding-bottom: 100px;
}

.w22-sl-o {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.w22-sl-o__so {
	display: flex;
	align-items: center;
	font-size: 85px;
	line-height: normal;
	font-weight: var(--w22-dam);
	/* Component bo dem cua ban mau hardcode -0.07em, khac he -0.06em cua theme. */
	letter-spacing: -0.07em;
	color: var(--w22-muc);
}

.w22-sl-o__ta {
	width: 140px;
	max-width: 100%;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Duong ke: ve tu trai sang, 1000ms, vua dai vua nhat dan ---------- */
.w22-so-lieu__ke {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 100%;
	height: 1px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
}

.w22-so-lieu__ke > span {
	display: block;
	width: 100%;
	height: 1px;
	background: #000;
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition:
		transform 1000ms var(--sl-ke-cong),
		opacity 1000ms var(--sl-ke-cong);
}

.w22-so-lieu__ke.w22-ke-hien > span {
	transform: scaleX(1);
	opacity: 0.18;
}

/* ---------- Hang duoi ---------- */
.w22-so-lieu__duoi {
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-sl-gioi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.w22-sl-gioi__hieu {
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-sl-gioi__chu {
	max-width: 300px;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-sl-chu {
	grid-column: span 3;
	justify-self: start;
	max-width: 780px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.w22-sl-chu__lon {
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/*
 * 🔴 `.w22-tu` / `.w22-tu--mo` DA CHUYEN SANG base.css (27/08). Chung la lop
 * DUNG CHUNG — Section 07/09/10/12 va trang chi tiet du an deu goi — ma file
 * nay chi nap o trang chu. De o day thi ra ngoai trang chu chu khong co hieu
 * ung, va nguy hiem hon: `.w22-tu` dat `opacity: .001`, thieu quy tac hien
 * kem theo la chu MAT HAN. Cung ho voi bay §39.
 * Quy tac hien chung `[data-w22-tu].w22-tu-hien .w22-tu` cung o base.css;
 * bon quy tac rieng theo section ben duoi giu lai, khong hai gi.
 */
.w22-sl-chu__lon.w22-tu-hien .w22-tu {
	opacity: 1;
	transform: none;
}

.w22-sl-chu__nho {
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
	opacity: 0;
	transition: opacity 1200ms var(--sl-lo-cong) 700ms;
}

.w22-sl-chu__nho.w22-lo-hien {
	opacity: 0.6;
}

/* ---------- Bang tablet ---------- */
@media (max-width: 1024px) {
	/*
	 * 🔴 Section nay KHONG theo token `--w22-le` o kho tablet. Do lai le ngang
	 * cua ca 12 section ban mau: o 1024 va 810 thi 10 section dung 30px, rieng
	 * «Text» (07) va «Bento» (08) giu 36px. Token cua theme dat 30px la dung
	 * cho da so, nen section nay ghi de rieng thay vi sua token chung.
	 */
	.w22-so-lieu {
		padding-inline: 36px;
	}

	.w22-so-lieu__khung {
		gap: 90px;
	}

	.w22-so-lieu__luoi {
		padding-bottom: 90px;
	}

	.w22-sl-o {
		gap: 8px;
	}

	.w22-sl-o__so {
		font-size: 58px;
	}

	.w22-sl-o__ta,
	.w22-sl-gioi__chu {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}

	.w22-sl-gioi__hieu {
		font-size: 19px;
	}

	.w22-sl-gioi__chu {
		max-width: none;
	}

	.w22-sl-chu {
		gap: 30px;
	}

	.w22-sl-chu__lon {
		font-size: 28px;
	}

	.w22-sl-chu__nho {
		font-size: var(--w22-chu-16);
	}
}

/* ---------- Bang dien thoai ---------- */
@media (max-width: 600px) {
	/* Tra ve token chung — o kho dien thoai ban mau lai dung 20px nhu moi section. */
	.w22-so-lieu {
		padding-inline: var(--w22-le);
	}

	.w22-so-lieu__khung {
		gap: 40px;
	}

	.w22-so-lieu__luoi {
		grid-template-columns: repeat(2, minmax(50px, 1fr));
		gap: 40px;
		padding-bottom: 40px;
	}

	.w22-sl-o__so {
		font-size: 40px;
	}

	.w22-sl-o__ta,
	.w22-sl-gioi__chu {
		font-size: 13px;
		line-height: 1.4;
	}

	/*
	 * Ban mau bo luoi o kho nay, hai khoi xep doc va CANG HET be ngang
	 * (350px). De `align-items: flex-start` thi hai khoi co lai bang be rong
	 * chu — bang so khong lo vi cao van dung, chi anh ghep moi thay.
	 */
	.w22-so-lieu__duoi {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}

	.w22-sl-gioi {
		gap: 14px;
	}

	.w22-sl-gioi__hieu {
		font-size: var(--w22-chu-18);
	}

	.w22-sl-gioi__chu {
		max-width: 300px;
	}

	.w22-sl-chu {
		grid-column: auto;
		max-width: none;
		width: 100%;
		gap: 20px;
	}

	.w22-sl-chu__lon {
		font-size: 24px;
	}

	.w22-sl-chu__nho {
		font-size: var(--w22-chu-15);
		opacity: 0.6;
		transition: none;
	}

	/* Ban mau TAT hieu ung tach tu o kho dien thoai. */
	.w22-tu {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-so-lieu__ke > span {
		transform: scaleX(1);
		opacity: 0.18;
		transition: none;
	}

	.w22-tu {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.w22-sl-chu__nho {
		opacity: 0.6;
		transition: none;
	}
}