/* Khối Hình ảnh – grid (và lưới dưới then-and-now): lưới đều, tab theo nhóm, skin plain | framed | film. */

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

.vh-pgrid__item {
	min-width: 0;
}

.vh-pgrid__item[hidden] {
	display: none;
}

.vh-pgrid__fig {
	display: grid;
	margin: 0;
}

.vh-pgrid__cap {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.375rem 0.125rem 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	line-height: var(--vh-lh-body);
}

.vh-pgrid__cap-text {
	min-width: 0;
}

/* framed: viền trang trí lồng trong ảnh (không che nội dung, không bắt sự kiện). */
.vh-pgrid--framed .vh-pgrid__media::after {
	content: "";
	position: absolute;
	inset: var(--vh-media-frame-inset, 10px);
	z-index: 0;
	border: 1px solid var(--vh-media-frame-color, var(--vh-color-ornament, var(--vh-color-on-primary)));
	pointer-events: none;
}

/* film: tờ phim trên nền mực, lỗ răng cưa hai mép, số khung chữ mono. */
.vh-pgrid--film {
	padding: 1.5rem 0.75rem;
	border-radius: var(--vh-radius-panel, 0);
	background-color: var(--vh-color-deep);
	background-image:
		radial-gradient(circle, var(--vh-color-bg) 0 3px, transparent 3.5px),
		radial-gradient(circle, var(--vh-color-bg) 0 3px, transparent 3.5px);
	background-size: 18px 12px, 18px 12px;
	background-position: 0 4px, 0 calc(100% - 4px);
	background-repeat: repeat-x, repeat-x;
	color: var(--vh-color-on-deep);
}

.vh-pgrid--film .vh-pgrid__media {
	border-radius: 0;
}

.vh-pgrid--film .vh-pgrid__cap {
	color: var(--vh-color-muted-on-deep);
	font-family: var(--vh-font-accent, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}

.vh-pgrid--film .vh-pgrid__frame {
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.vh-pgrid--film .vh-itabs__tab {
	border-color: var(--vh-color-muted-on-deep);
	background: transparent;
	color: var(--vh-color-on-deep);
}

.vh-pgrid--film .vh-itabs__tab[aria-selected="true"] {
	border-color: var(--vh-color-on-deep);
	background: var(--vh-color-on-deep);
	color: var(--vh-color-deep);
}

.vh-pgrid--film .vh-itabs__tab:focus-visible {
	outline-color: var(--vh-color-focus-on-deep);
}

@media (min-width: 640px) {
	.vh-pgrid__list {
		gap: 0.75rem;
	}

	.vh-pgrid--c3 .vh-pgrid__list,
	.vh-pgrid--c4 .vh-pgrid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vh-pgrid--film {
		padding: 1.75rem 1.25rem;
	}
}

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

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