/*
 * Khối stats-band – number-band: 3–6 con số lớn ngăn bằng vạch dọc mảnh.
 * Nền thường hoặc dải tối (plugin gắn .vh-deep theo options.bg); số oldstyle cho năm, lining + tabular cho số chạy.
 * Điện thoại 2 cột (ô lẻ cuối chiếm cả hàng), máy tính bảng 3–4 cột, máy tính 5–6 cột.
 */

.vh-nb__head {
	margin-inline: auto;
}

.vh-nb__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-nb__cell {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 6px;
	min-width: 0;
	padding-inline: 12px;
	border-left: 1px solid var(--vh-color-ornament, var(--vh-color-border-strong));
	text-align: center;
}

.vh-nb__value {
	color: var(--vh-color-text);
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-stat, clamp(2.25rem, 1.6rem + 3vw, 4.5rem));
	font-weight: var(--vh-fw-heading);
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
	font-variation-settings: var(--vh-heading-variation, normal);
	/* Không bẻ giữa con số ('1.200', '27 km'); cỡ chữ tự nhỏ lại khi nhiều cột. */
	white-space: nowrap;
}

.vh-nb--n5 .vh-nb__value,
.vh-nb--n6 .vh-nb__value {
	font-size: min(var(--vh-fs-stat, 4.5rem), clamp(2rem, 1.2rem + 2.4vw, 3.5rem));
}

.vh-nb--oldstyle .vh-nb__value {
	font-variant-numeric: oldstyle-nums proportional-nums;
}

.vh-nb__label {
	max-width: 20ch;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.4;
}

.vh-nb__note {
	font-size: 0.75rem;
}

.vh-nb__foot {
	margin: clamp(20px, 3vw, 32px) auto 0;
	color: var(--vh-color-muted);
	text-align: center;
}

/* ---- Dải tối: chữ trên nền đậm, vạch ngăn màu trang trí (vàng ở mẫu Hội nghị) ---- */
.vh-deep .vh-nb__value {
	color: var(--vh-color-on-deep);
}

.vh-deep .vh-nb__label,
.vh-deep .vh-nb__foot {
	color: var(--vh-color-muted-on-deep);
}

.vh-deep .vh-nb__cell {
	border-left-color: var(--vh-color-ornament, color-mix(in srgb, var(--vh-color-on-deep) 32%, transparent));
}

/* Điện thoại 2 cột: ô đầu hàng không có vạch; số ô lẻ thì ô cuối chiếm cả hàng. */
.vh-nb__cell:nth-child(odd) {
	border-left: 0;
}

.vh-nb--n3 .vh-nb__cell:last-child,
.vh-nb--n5 .vh-nb__cell:last-child {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.vh-nb--n3 .vh-nb__list,
	.vh-nb--n5 .vh-nb__list,
	.vh-nb--n6 .vh-nb__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vh-nb--n4 .vh-nb__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vh-nb--n3 .vh-nb__cell:last-child,
	.vh-nb--n5 .vh-nb__cell:last-child {
		grid-column: auto;
	}

	/* Đặt lại vạch: chỉ ô đầu mỗi hàng không có. */
	.vh-nb__cell:nth-child(odd) {
		border-left: 1px solid var(--vh-color-ornament, var(--vh-color-border-strong));
	}

	.vh-deep .vh-nb__cell:nth-child(odd) {
		border-left-color: var(--vh-color-ornament, color-mix(in srgb, var(--vh-color-on-deep) 32%, transparent));
	}

	.vh-nb__cell:first-child,
	.vh-nb--n5 .vh-nb__cell:nth-child(3n + 1),
	.vh-nb--n6 .vh-nb__cell:nth-child(3n + 1) {
		border-left: 0;
	}
}

@media (min-width: 1024px) {
	.vh-nb--n5 .vh-nb__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.vh-nb--n6 .vh-nb__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.vh-nb--n5 .vh-nb__cell:nth-child(3n + 1),
	.vh-nb--n6 .vh-nb__cell:nth-child(3n + 1) {
		border-left: 1px solid var(--vh-color-ornament, var(--vh-color-border-strong));
	}

	.vh-deep .vh-nb--n5 .vh-nb__cell:nth-child(3n + 1),
	.vh-deep .vh-nb--n6 .vh-nb__cell:nth-child(3n + 1) {
		border-left-color: var(--vh-color-ornament, color-mix(in srgb, var(--vh-color-on-deep) 32%, transparent));
	}

	.vh-nb .vh-nb__cell:first-child {
		border-left: 0;
	}
}