/*
 * Hệ thống cơ sở (branches, CONTRACT-RATES §6.5): cards, list-map, chooser, detail. Một cơ sở: .vh-branch.
 * Bản đồ tĩnh vẽ bằng CSS (lưới + đường), chấm đặt theo tọa độ chuẩn hóa; iframe OSM chỉ tải khi bấm.
 */

/* ---------- Lưới thẻ ---------- */
.vh-brs__grid {
	display: grid;
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-branch--card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	box-shadow: var(--vh-shadow-card);
}

.vh-branch--card.is-selected {
	border-color: var(--vh-color-primary);
	box-shadow: 0 0 0 1px var(--vh-color-primary), var(--vh-shadow-card);
}

.vh-branch__media {
	position: relative;
}

.vh-branch__media .vh-img,
.vh-branch__media img,
.vh-branch__media .vh-ph {
	display: block;
	width: 100%;
}

.vh-branch--card .vh-branch__media img {
	border-radius: 0;
}

.vh-branch__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: none;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-bold);
}

.vh-branch.is-selected .vh-branch__badge {
	display: inline-flex;
}

.vh-branch__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: var(--vh-card-pad);
}

.vh-branch__name {
	margin: 0;
}

.vh-branch__name a {
	color: inherit;
	text-decoration: none;
}

.vh-branch__name a:hover {
	color: var(--vh-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vh-branch__lm {
	margin: -4px 0 0;
	color: var(--vh-color-primary);
	font-weight: var(--vh-fw-medium);
}

.vh-branch__facts,
.vh-branch__near {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vh-fs-small);
}

.vh-branch__facts li,
.vh-branch__near li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.vh-branch__facts .vh-i,
.vh-branch__near .vh-i {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--vh-color-muted);
}

.vh-branch__from {
	margin: 0;
}

.vh-branch__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.vh-branch__set .vh-i {
	display: none;
}

.vh-branch__set-on {
	display: none;
}

.vh-branch__set[aria-pressed="true"] {
	--vh-btn-bg: var(--vh-color-surface);
	--vh-btn-bd: var(--vh-color-success);
	--vh-btn-fg: var(--vh-color-text);
}

.vh-branch__set[aria-pressed="true"] .vh-i {
	display: inline-block;
	color: var(--vh-color-success);
}

.vh-branch__set[aria-pressed="true"] .vh-branch__set-on {
	display: inline;
}

.vh-branch__set[aria-pressed="true"] .vh-branch__set-off {
	display: none;
}

/* ---------- list-map ---------- */
.vh-brs__lm {
	display: grid;
	gap: var(--vh-card-gap);
	align-items: start;
}

.vh-brs__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vh-color-border);
}

.vh-branch--row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 12px;
	border-bottom: 1px solid var(--vh-color-border);
	border-left: 4px solid transparent;
	scroll-margin-top: calc(var(--vh-header-h) + 16px);
}

.vh-branch--row:focus {
	outline: none;
}

.vh-branch--row.is-active,
.vh-branch--row:focus-within {
	border-left-color: var(--vh-color-primary);
	background: var(--vh-color-surface);
}

.vh-branch--row .vh-branch__body {
	padding: 0;
}

.vh-branch__num {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
	font-weight: var(--vh-fw-bold);
}

.vh-branch__thumb {
	flex: 0 0 80px;
	overflow: hidden;
	border-radius: var(--vh-radius-media);
}

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

.vh-brs__map {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	min-height: 18rem;
	aspect-ratio: 1 / 1;
	padding: var(--vh-card-pad);
	overflow: hidden;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-media);
	background-color: var(--vh-color-surface);
	background-image:
		linear-gradient(var(--vh-color-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--vh-color-border) 1px, transparent 1px);
	background-size: 2rem 2rem;
}

.vh-brs__art {
	position: absolute;
	inset: 0;
}

.vh-brs__road {
	position: absolute;
	background: var(--vh-color-card);
	border: 1px solid var(--vh-color-border-strong);
	pointer-events: none;
}

.vh-brs__road--h {
	left: -10%;
	right: -10%;
	top: 56%;
	height: 0.75rem;
	transform: rotate(-6deg);
}

.vh-brs__road--v {
	top: -10%;
	bottom: -10%;
	left: 40%;
	width: 0.75rem;
	transform: rotate(10deg);
}

.vh-brs__road--d {
	top: -10%;
	bottom: -10%;
	left: 74%;
	width: 0.5rem;
	transform: rotate(-26deg);
}

/* Chấm đánh số: nhìn 36px, vùng bấm 44px (giả phần tử). */
.vh-brs__dot {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--vh-color-card);
	border-radius: 50%;
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
	box-shadow: var(--vh-shadow-card);
	font: inherit;
	font-weight: var(--vh-fw-bold);
	transform: translate(-50%, -50%);
	cursor: pointer;
}

button.vh-brs__dot::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.vh-brs__dot.is-active {
	outline: 3px solid var(--vh-color-accent);
	outline-offset: 2px;
}

.vh-brs__dlabel {
	position: absolute;
	z-index: 1;
	max-width: 9rem;
	padding: 2px 8px;
	overflow: hidden;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	box-shadow: var(--vh-shadow-card);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	white-space: nowrap;
	text-overflow: ellipsis;
	transform: translate(-50%, 24px);
	pointer-events: none;
}

/* Chấm sát mép trái/phải: nhãn canh theo chấm để không bị cắt. */
.vh-brs__dlabel--l {
	transform: translate(-18px, 24px);
}

.vh-brs__dlabel--r {
	transform: translate(calc(-100% + 18px), 24px);
}

.vh-brs__map--grayscale .vh-brs__art {
	filter: grayscale(1);
}

.vh-brs__map--ink {
	background-color: var(--vh-color-card);
}

.vh-brs__map--ink .vh-brs__road {
	background: var(--vh-color-surface);
	border-color: var(--vh-color-text);
}

.vh-brs__map--ink .vh-brs__dot {
	background: var(--vh-color-text);
	color: var(--vh-color-card);
}

.vh-brs__mapcta {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 6px;
}

.vh-brs__mapnote {
	margin: 0;
	padding: 2px 10px;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-card);
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	text-align: center;
}

.vh-brs__map iframe {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
}

.vh-brs__map.is-loaded {
	padding: 0;
	background-image: none;
}

/* ---------- chooser ---------- */
.vh-brs__chooser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 12px var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
}

.vh-brs__clabel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--vh-fw-bold);
}

.vh-brs__clabel .vh-i {
	color: var(--vh-color-primary);
}

.vh-brs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vh-brs__chip {
	min-height: 44px;
	padding: 6px 14px;
	color: var(--vh-color-text);
	text-decoration: none;
	cursor: pointer;
}

.vh-brs__chip .vh-brs__chk {
	display: none;
}

.vh-brs__chip[aria-pressed="true"] {
	border-color: var(--vh-color-primary);
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
}

.vh-brs__chip[aria-pressed="true"] .vh-brs__chk {
	display: inline-block;
}

.vh-brs__select {
	width: auto;
	min-width: 12rem;
}

.vh-brs__ccontact {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- detail ---------- */
.vh-branch--detail {
	display: grid;
	gap: calc(var(--vh-card-gap) * 1.5);
	align-items: start;
}

.vh-branch__main {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.vh-branch__main > .vh-section-head {
	margin-bottom: 0;
}

.vh-branch__intro {
	margin: 0;
	font-size: var(--vh-fs-lead);
}

.vh-branch__dl {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--vh-color-border);
}

.vh-branch__dl > div {
	display: grid;
	gap: 2px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-branch__dl dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-branch__dl dd {
	margin: 0;
	font-weight: var(--vh-fw-medium);
}

.vh-branch--detail .vh-branch__acts {
	margin-top: 0;
}

.vh-branch__t {
	margin: 8px 0 0;
}

.vh-branch__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-branch__side {
	display: grid;
	gap: var(--vh-card-gap);
	min-width: 0;
}

.vh-branch__side .vh-branch__media {
	overflow: hidden;
	border-radius: var(--vh-radius-media);
}

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

	.vh-branch__dl > div {
		grid-template-columns: 10rem minmax(0, 1fr);
	}

	.vh-brs__map {
		aspect-ratio: 16 / 10;
	}
}

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

	.vh-brs__lm {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.vh-brs__lm--nomap {
		grid-template-columns: minmax(0, 1fr);
	}

	.vh-brs__mapwrap {
		position: sticky;
		top: calc(var(--vh-header-h) + 16px);
	}

	.vh-branch--detail {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.vh-brs__ccontact {
		margin-left: auto;
	}
}