/*
 * Lớp trang con dùng chung (pages-theme): mục lục trong trang, thông báo trang theo gói (demo "Cơ bản"),
 * nhãn "Trang có trong gói …". Nút "Xem tất cả" (.vh-s__more, .vh-more-link) đã có trong base.css.
 */

/* ---------- Nhãn gói trên demo (R7) ---------- */
.vh-pg-pkg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- Mục lục trong trang ---------- */
.vh-subnav {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var(--vh-color-border);
	background: var(--vh-color-bg);
}

.vh-subnav__list {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--vh-page-pad));
	padding: 10px var(--vh-page-pad);
	overflow-x: auto;
	list-style: none;
	scroll-padding-inline: var(--vh-page-pad);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vh-subnav__list::-webkit-scrollbar {
	display: none;
}

.vh-subnav__list > li {
	flex: none;
}

/* Điện thoại: chip cuộn ngang, vùng chạm 44px. */
.vh-subnav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--vh-color-border-strong);
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-bg);
	color: var(--vh-color-text);
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.vh-subnav__link:hover {
	border-color: var(--vh-color-text);
	color: var(--vh-color-text);
}

.vh-subnav__link.is-active {
	border-color: var(--vh-color-accent-ink);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
}

/* Danh sách cuộn cắt mất phần vòng focus nằm ngoài: vẽ vòng phía trong. */
.vh-subnav__link:focus-visible {
	outline-offset: -3px;
}

/* Nút ‹ › do info.js thêm khi dải tràn: chỉ máy tính (điện thoại vuốt chip). */
.vh-subnav__arrow {
	display: none;
}

/* Máy tính: dải dính ngay dưới đầu trang, gạch chân mục đang đọc. */
@media (min-width: 1024px) {
	.vh-subnav {
		position: sticky;
		top: var(--vh-top-h, var(--vh-header-h));
	}

	.vh-subnav__list {
		gap: clamp(20px, 2.4vw, 32px);
		margin: 0;
		padding: 0;
	}

	.vh-subnav__link {
		min-height: 52px;
		padding: 0 2px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: inset 0 -3px 0 transparent;
		font-size: 0.9375rem;
	}

	.vh-subnav__link:hover {
		box-shadow: inset 0 -3px 0 var(--vh-color-border-strong);
	}

	.vh-subnav__link.is-active {
		background: none;
		color: var(--vh-color-text);
		box-shadow: inset 0 -3px 0 var(--vh-color-primary);
	}

	/* Dải tràn (info.js gắn is-ovf-start / is-ovf-end): mờ mép bên còn mục ẩn, kèm nút cuộn. */
	.vh-subnav .vh-wrap {
		position: relative;
	}

	.vh-subnav.is-ovf-end .vh-subnav__list {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
	}

	.vh-subnav.is-ovf-start .vh-subnav__list {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
	}

	.vh-subnav.is-ovf-start.is-ovf-end .vh-subnav__list {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
	}

	.vh-subnav.is-ovf-start .vh-subnav__arrow--prev,
	.vh-subnav.is-ovf-end .vh-subnav__arrow--next {
		display: inline-flex;
		position: absolute;
		top: 50%;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		transform: translateY(-50%);
		border: 1px solid var(--vh-color-border-strong);
		border-radius: 50%;
		background: var(--vh-color-bg);
		color: var(--vh-color-text);
		cursor: pointer;
	}

	.vh-subnav__arrow--prev {
		left: calc(var(--vh-page-pad) - 8px);
	}

	.vh-subnav__arrow--next {
		right: calc(var(--vh-page-pad) - 8px);
	}

	.vh-subnav__arrow:hover {
		border-color: var(--vh-color-text);
	}

	/* Neo trong trang không bị đầu trang + mục lục dính che. */
	.vh-page--subnav [id] {
		scroll-margin-top: calc(var(--vh-top-h, var(--vh-header-h)) + 64px);
	}
}

/* ---------- Trang có trong gói cao hơn (demo xem bản "Cơ bản") ---------- */
.vh-pg-locked {
	max-width: calc(760px + 2 * var(--vh-page-pad));
	padding-block: clamp(24px, 5vw, 40px) clamp(48px, 10vw, 96px);
}

.vh-pg-locked .vh-alert {
	padding: clamp(16px, 3vw, 28px);
}

.vh-pg-locked .vh-alert__t {
	font-size: var(--vh-fs-lead);
	line-height: 1.45;
}