/*
 * Minh bạch & đúng luật (legal-band, CONTRACT-RATES §6.6): band (dải biểu tượng + câu ngắn) và cards (thẻ).
 * Khối có bg none trong lược đồ: tự tô nền theo tone (surface | deep | accent) trên khung bo góc.
 */

.vh-lband__panel {
	padding: calc(var(--vh-card-pad) * 1.25);
	border-radius: var(--vh-radius-panel, var(--vh-radius-card));
}

.vh-lband__panel--surface {
	border: 1px solid var(--vh-color-border);
	background: var(--vh-color-surface);
	color: var(--vh-color-text);
}

.vh-lband__panel--accent {
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
}

.vh-lband__panel--accent .vh-lead,
.vh-lband__panel--accent .vh-eyebrow,
.vh-lband__panel--accent .vh-h2 {
	color: inherit;
}

.vh-lband__panel--deep .vh-h2 {
	color: var(--vh-color-on-deep);
}

.vh-lband__panel--deep .vh-lead {
	color: var(--vh-color-muted-on-deep);
}

.vh-lband__panel--deep .vh-eyebrow {
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
}

.vh-lband__head {
	margin-bottom: var(--vh-card-gap);
}

.vh-lband__items {
	display: grid;
	gap: 20px var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-lband__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.vh-lband__ic {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vh-color-card);
	color: var(--vh-color-primary);
}

.vh-lband__panel--deep .vh-lband__ic {
	background: rgb(255 255 255 / 0.1);
	color: var(--vh-color-on-deep);
}

.vh-lband__panel--accent .vh-lband__ic {
	background: var(--vh-color-card);
	color: var(--vh-color-text);
}

.vh-lband__t {
	margin: 0 0 4px;
	font-family: var(--vh-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--vh-fw-bold);
	line-height: var(--vh-lh-heading);
}

.vh-lband__x {
	margin: 0;
	font-size: var(--vh-fs-small);
	line-height: var(--vh-lh-body);
}

.vh-lband__panel--surface .vh-lband__x {
	color: var(--vh-color-muted);
}

.vh-lband__panel--deep .vh-lband__x {
	color: var(--vh-color-muted-on-deep);
}

/* cards: mỗi mục một thẻ trắng trên nền khối. */
.vh-lband--cards .vh-lband__item {
	flex-direction: column;
	padding: var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
}

.vh-lband--cards .vh-lband__ic {
	background: var(--vh-color-surface);
	color: var(--vh-color-primary);
}

.vh-lband--cards .vh-lband__x {
	color: var(--vh-color-muted);
}

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

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

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