/*
 * Khối Giới thiệu – split-stats: chữ + nhóm số liệu. Layout: stats-right | image-stats | margin-notes | bubbles | card-right.
 * Số dùng font của mẫu (mono / serif / display); bong bóng dùng màu vui --vh-color-fun-1…4, chữ luôn là màu mực.
 * Mobile trước, mốc 640px / 1024px.
 */

.vh-intro-ss {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
}

.vh-intro-ss__text {
	display: grid;
	align-content: start;
	gap: 12px;
	min-width: 0;
}

.vh-intro-ss__eyebrow {
	margin: 0;
	text-transform: var(--vh-label-transform, none);
	letter-spacing: var(--vh-ls-label, 0);
}

.vh-intro-ss__title,
.vh-intro-ss__p {
	margin: 0;
}

.vh-intro-ss__p {
	max-width: var(--vh-measure, 65ch);
}

.vh-intro-ss__quote {
	margin: 8px 0 0;
	padding-left: 16px;
	border-left: 3px solid var(--vh-color-ornament, var(--vh-color-border-strong));
	font-style: italic;
}

.vh-intro-ss__quote-by {
	margin-top: 4px;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-style: normal;
}

.vh-intro-ss__sign {
	margin-top: 4px;
	font-family: var(--vh-font-accent, var(--vh-font-heading));
	font-size: 1.5rem;
	line-height: 1.3;
}

/* ---- Số liệu chung ---- */
.vh-intro-ss__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-intro-ss__stat {
	display: grid;
	align-content: start;
	gap: 4px;
	padding-top: 12px;
	border-top: var(--vh-border-width, 1px) solid var(--vh-color-border-strong);
}

.vh-intro-ss__value {
	color: var(--vh-color-text);
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-stat, clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem));
	font-weight: var(--vh-fw-heading);
	line-height: 1.15;
	font-variant-numeric: var(--vh-num-stat, lining-nums tabular-nums);
	overflow-wrap: anywhere;
}

.vh-intro-ss__stats--mono .vh-intro-ss__value {
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-weight: var(--vh-fw-medium);
	letter-spacing: -0.01em;
}

.vh-intro-ss__stats--display .vh-intro-ss__value {
	font-size: var(--vh-fs-display, clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem));
	line-height: max(1.1, var(--vh-lh-display, 1.1));
}

.vh-intro-ss__stat > .vh-demo-label,
.vh-intro-ss__stat > .vh-small {
	justify-self: start;
}

.vh-intro-ss__label {
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.4;
}

/* ---- Ảnh 4:5 + số lớn ---- */
.vh-intro-ss__media {
	min-width: 0;
}

.vh-intro-ss__media .vh-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 72vh;
	max-height: 72svh;
	object-fit: cover;
	border-radius: var(--vh-radius-media);
}

.vh-intro-ss--image-stats .vh-intro-ss__stats {
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	margin-top: 12px;
}

/* ---- Ghi chú lề kiểu sổ tay ---- */
.vh-intro-ss__margin {
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--vh-color-ornament, var(--vh-color-border-strong));
}

.vh-intro-ss__notes {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-intro-ss__note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	font-style: italic;
}

.vh-intro-ss__note .vh-intro-ss__value {
	font-size: 1.375rem;
	font-style: normal;
}

.vh-intro-ss__note .vh-intro-ss__label {
	font-size: var(--vh-fs-body);
	font-weight: var(--vh-fw-body);
}

.vh-intro-ss__dash {
	color: var(--vh-color-muted);
}

/* ---- Bong bóng màu vui ---- */
.vh-intro-ss__bubbles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-intro-ss__bubble {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 2px;
	aspect-ratio: 1;
	padding: 14%;
	border-radius: 50%;
	background: var(--vh-color-fun-1, var(--vh-color-accent));
	color: var(--vh-color-text);
	text-align: center;
}

.vh-intro-ss__bubble--2 {
	background: var(--vh-color-fun-2, var(--vh-color-surface-2, var(--vh-color-accent)));
}

.vh-intro-ss__bubble--3 {
	background: var(--vh-color-fun-3, var(--vh-color-accent));
}

.vh-intro-ss__bubble--4 {
	background: var(--vh-color-fun-4, var(--vh-color-surface-2, var(--vh-color-accent)));
}

.vh-intro-ss__bubble .vh-intro-ss__value {
	font-size: var(--vh-fs-display, clamp(1.75rem, 1.2rem + 2.4vw, 3rem));
	line-height: 1.05;
}

.vh-intro-ss__bubble .vh-intro-ss__label {
	color: var(--vh-color-text);
	overflow-wrap: anywhere;
}

.vh-intro-ss__bubble--text .vh-intro-ss__label {
	font-size: var(--vh-fs-body);
	font-weight: var(--vh-fw-bold);
}

/* ---- Thẻ cam kết ---- */
.vh-intro-ss__card {
	display: grid;
	gap: 12px;
	padding: var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	box-shadow: var(--vh-shadow-card);
}

.vh-intro-ss__card-fig {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.vh-intro-ss__card-fig .vh-img {
	width: 72px;
	height: 72px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.vh-intro-ss__card-title {
	margin: 0;
}

/* ---- Máy tính bảng ---- */
@media (min-width: 640px) {
	.vh-intro-ss--stats-right .vh-intro-ss__stats--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vh-intro-ss--image-stats:not(.vh-intro-ss--noimg) {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}
}

/* ---- Máy tính ---- */
@media (min-width: 1024px) {
	.vh-intro-ss--stats-right,
	.vh-intro-ss--card-right {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
	}

	.vh-intro-ss--card-right {
		align-items: start;
	}

	.vh-intro-ss--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	.vh-intro-ss--margin-notes {
		grid-template-columns: minmax(0, 680px) 260px;
		justify-content: center;
		column-gap: 64px;
		align-items: start;
	}

	.vh-intro-ss--margin-notes.vh-intro-ss--solo {
		grid-template-columns: minmax(0, 680px);
	}

	.vh-intro-ss__margin {
		padding: 8px 0 8px 24px;
		border-left-width: 1px;
	}

	.vh-intro-ss--bubbles {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}

	.vh-intro-ss--bubbles.vh-intro-ss--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	.vh-intro-ss__bubbles {
		gap: 16px 24px;
	}

	/* Bong bóng cột phải lệch xuống cho vui mắt, không đổi thứ tự đọc. */
	.vh-intro-ss__bubble:nth-child(even) {
		transform: translateY(24px);
	}
}