/* Khối Giới thiệu – benefits-strip: hai câu + tối đa 4 chip lợi ích. Mobile trước, mốc 640px / 1024px. */

.vh-intro {
	display: grid;
	gap: 1.25rem;
}

.vh-intro__title {
	margin: 0;
}

.vh-intro__text {
	max-width: 46rem;
	margin: 0;
}

/* Chip lợi ích: ô có viền, chữ có thể xuống dòng nên bo theo thẻ chứ không bo viên thuốc. */
.vh-intro__chips {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Số chip chẵn thì 2 cột ngay trên điện thoại; lẻ thì 1 cột để dải luôn cân (thiếu dữ liệu chỉ còn 3 chip). */
.vh-intro__chips--n2,
.vh-intro__chips--n4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vh-intro__chip {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 56px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.35;
}

.vh-intro__chip-icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vh-color-surface);
	color: var(--vh-color-primary);
}

/* Nền khối xen kẽ đã là surface: đổi vòng tròn sang tint để còn thấy. */
.vh-alt .vh-intro__chip-icon {
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
}

.vh-intro__chip-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.vh-intro__chips--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vh-intro__chip {
		font-size: var(--vh-fs-body);
	}
}

@media (min-width: 1024px) {
	.vh-intro {
		gap: 1.5rem;
	}

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

	.vh-intro__chips--n2 {
		max-width: 46rem;
	}

	.vh-intro__chips--n1 {
		max-width: 23rem;
	}

	.vh-intro__chip {
		padding: 0.75rem 1rem;
	}
}