/*
 * Định vị dự án — Figma node 11:70 (1440×1051, nền Background 2)
 * Bố cục: tiêu đề y=59; cột trái x=80 (523, padding 32) y=344; sơ đồ x=620 (740×651) y=283; skyline đáy.
 *
 * Sơ đồ (node 79:596) — hiệu ứng:
 *   Vào khung nhìn (.is-visible): trục vẽ từ tâm → vòng lan ra → cung đỏ tự vẽ →
 *     điểm đến bật lên theo thời gian di chuyển (--m phút) → trục kinh tế tự vẽ.
 *   Nghỉ: huy hiệu phát sóng, vòng gradient xoay chậm, chấm sáng chạy trên trục kinh tế.
 *   Chọn nhóm (.has-active + .is-on): góc phần tư sáng, điểm thuộc nhóm phóng to + vẽ đường nối, còn lại mờ.
 * Trạng thái ẩn ban đầu chỉ áp dụng khi có JS (.vg-anim) — không JS vẫn thấy sơ đồ đầy đủ.
 */

.vg-location {
	--vg-loc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vg-loc-dot: #d28060;
	--vg-loc-label: #904441;

	position: relative;
	overflow: hidden;
	padding: 59px 16px 117px;
	background-color: var(--vg-color-bg-2);
}

.vg-location__skyline {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1086px;
	height: 192px;
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Tiêu đề */
.vg-location__header {
	position: relative;
	max-width: 1062px;
	margin: 0 auto;
	text-align: center;
}

.vg-location__script {
	margin: 0;
	color: var(--vg-color-description-gold);
	font-family: var(--vg-font-subheading);
	font-size: var(--vg-subheader-size);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.vg-location__title {
	margin: -8px 0 0;
	color: var(--vg-color-primary);
	font-family: var(--vg-font-heading);
	font-size: var(--vg-h3-size);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.vg-location__intro {
	margin-top: 21px;
	color: var(--vg-color-description-blue);
	font-family: var(--vg-font-body);
	font-size: 14px;
	line-height: 1.5;
}

.vg-location__intro p {
	margin: 0;
}

/* Thân: cột trái 523 + sơ đồ 740 (gap 17) */
.vg-location__body {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 523px) minmax(0, 740px);
	justify-content: center;
	align-items: start;
	gap: 17px;
	margin-top: 40px;
}

.vg-location__list {
	display: flex;
	flex-direction: column;
	gap: 41px;
	margin: 61px 0 0;
	padding: 0 32px;
	list-style: none;
}

.vg-location__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.vg-location__item-tag {
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background-color: var(--vg-color-description-gold);
	color: #fff;
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s var(--vg-loc-ease);
}

.vg-location__item.is-on .vg-location__item-tag {
	background-color: var(--vg-color-primary);
	transform: translateX(6px);
}

.vg-location__item p {
	margin: 0;
	color: var(--vg-color-body-blue);
	font-family: var(--vg-font-body);
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Sơ đồ ---------- */
.vg-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: var(--vg-font-body);
}

.vg-map * {
	transform-box: view-box;
}

/* Vòng + trục + cung */
.vg-map__ring,
.vg-map__ring-spin,
.vg-map__center,
.vg-map__pulse {
	transform-origin: 368.25px 325.4px;
}

.vg-map__ring-spin {
	animation: vg-map-spin calc(90s + var(--i) * 25s) linear infinite;
}

.vg-map__ring:nth-of-type(even) .vg-map__ring-spin {
	animation-direction: reverse;
}

.vg-map__axes line,
.vg-map__arc,
.vg-map__spoke-line,
.vg-map__link {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.vg-map__spoke-line {
	stroke-width: 1;
}

.vg-map__spoke-s {
	fill: #b78e84;
	font-size: 14px;
	font-weight: 500;
	text-anchor: middle;
	dominant-baseline: central;
}

.vg-map__spark {
	fill: #fff;
	filter: drop-shadow(0 0 3px #d28060);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.is-visible .vg-map__spark {
	opacity: 0.9;
	transition-delay: 2.6s;
}

/* Điểm, nhãn */
.vg-map__dot {
	fill: var(--vg-loc-dot);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.45s var(--vg-loc-ease), fill 0.3s ease;
}

.vg-map__halo {
	fill: var(--vg-loc-dot);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.4);
	transition: opacity 0.4s ease, transform 0.6s var(--vg-loc-ease);
}

.vg-map__label,
.vg-map__district-name {
	fill: var(--vg-loc-label);
	font-size: 10px;
	text-anchor: middle;
	transition: fill 0.3s ease;
}

.vg-map__time {
	font-weight: 700;
	letter-spacing: -0.005em;
}

.vg-map__district-name {
	font-size: 12px;
}

.vg-map__district-name--hub {
	font-weight: 700;
	letter-spacing: -0.005em;
}

.vg-map__link {
	stroke: var(--vg-loc-dot);
	stroke-width: 1;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
	opacity: 0.8;
	transition: stroke-dashoffset 0.7s var(--vg-loc-ease);
}

.vg-map__poi,
.vg-map__economy {
	cursor: pointer;
	outline: none;
	transition: opacity 0.4s ease;
}

/* Huy hiệu + sóng */
.vg-map__pulse {
	fill: none;
	stroke: #a4352b;
	stroke-width: 1.2;
	opacity: 0;
	animation: vg-map-pulse 3.2s var(--vg-loc-ease) infinite;
	animation-play-state: paused;
}

.vg-map__pulse--late {
	animation-delay: 1.6s;
}

.is-visible .vg-map__pulse {
	animation-play-state: running;
}

/* Nhãn nhóm */
.vg-map__tag {
	cursor: pointer;
	outline: none;
}

.vg-map__tag circle {
	fill: var(--vg-color-description-gold);
	transform-box: fill-box;
	transform-origin: center;
	transition: fill 0.3s ease, transform 0.45s var(--vg-loc-ease);
}

.vg-map__tag-num {
	fill: #fff;
	font-size: 10px;
	font-weight: 800;
	text-anchor: middle;
}

.vg-map__tag-text {
	fill: var(--vg-color-description-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.005em;
	transition: fill 0.3s ease;
}

.vg-map__tag:focus-visible circle {
	stroke: var(--vg-color-primary);
	stroke-width: 2;
}

.vg-map__wedge {
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

/* ---------- Chọn nhóm / rê vào điểm ---------- */
.has-active .poi-group:not(.is-on) {
	opacity: 0.28;
}

.vg-map__wedge.is-on {
	opacity: 1;
}

.vg-map__tag.is-on circle {
	fill: var(--vg-color-primary);
	transform: scale(1.15);
}

.vg-map__tag.is-on .vg-map__tag-text {
	fill: var(--vg-color-primary);
}

.vg-map__poi.is-on .vg-map__link,
.vg-map__poi:hover .vg-map__link,
.vg-map__poi:focus-visible .vg-map__link {
	stroke-dashoffset: 0;
}

.vg-map__poi.is-on .vg-map__dot,
.vg-map__poi:hover .vg-map__dot,
.vg-map__poi:focus-visible .vg-map__dot,
.vg-map__economy.is-on .vg-map__dot {
	transform: scale(1.6);
	fill: #a4352b;
}

.vg-map__poi.is-on .vg-map__halo,
.vg-map__poi:hover .vg-map__halo,
.vg-map__poi:focus-visible .vg-map__halo {
	opacity: 0.22;
	transform: scale(1);
}

.vg-map__poi:hover .vg-map__label,
.vg-map__poi:focus-visible .vg-map__label,
.vg-map__poi.is-on .vg-map__label,
.vg-map__economy.is-on .vg-map__district-name {
	fill: #7a2727;
}

.has-active .vg-map__poi:hover,
.has-active .vg-map__poi:focus-visible {
	opacity: 1;
}

.vg-map__economy.is-on .vg-map__spoke-line {
	stroke-width: 1.8;
}

/* ---------- Intro khi cuộn tới (chỉ khi có JS) ---------- */
.vg-anim:not(.is-visible) .vg-map__axes line,
.vg-anim:not(.is-visible) .vg-map__arc,
.vg-anim:not(.is-visible) .vg-map__spoke-line {
	stroke-dashoffset: 1;
}

.vg-anim:not(.is-visible) .vg-map__ring {
	opacity: 0;
	transform: scale(0.82);
}

.vg-anim:not(.is-visible) .vg-map__center {
	opacity: 0;
	transform: scale(0.4);
}

.vg-anim:not(.is-visible) .vg-map__poi,
.vg-anim:not(.is-visible) .vg-map__district,
.vg-anim:not(.is-visible) .vg-map__spoke-s,
.vg-anim:not(.is-visible) .vg-map__tag {
	opacity: 0;
}

.vg-anim:not(.is-visible) .vg-map__poi .vg-map__dot,
.vg-anim:not(.is-visible) .vg-map__district .vg-map__dot {
	transform: scale(0);
}

.vg-anim .vg-map__axes line {
	transition: stroke-dashoffset 0.9s var(--vg-loc-ease);
}

.vg-anim .vg-map__ring {
	transition: opacity 0.9s ease, transform 1.1s var(--vg-loc-ease);
	transition-delay: calc(0.25s + var(--i) * 0.12s);
}

.vg-anim .vg-map__center {
	transition: opacity 0.6s ease 0.15s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.vg-anim .vg-map__arc {
	transition: stroke-dashoffset 1.4s var(--vg-loc-ease);
	transition-delay: calc(0.9s + var(--i) * 0.2s);
}

/* Điểm đến bật lên theo thời gian di chuyển: 5 phút trước, 12 phút sau */
.vg-anim .vg-map__poi {
	transition: opacity 0.5s ease;
	transition-delay: calc(1s + (var(--m) - 5) * 0.14s);
}

.vg-anim .vg-map__poi .vg-map__dot {
	transition-delay: calc(1s + (var(--m) - 5) * 0.14s);
}

.vg-anim.is-visible .vg-map__poi .vg-map__dot,
.vg-anim.is-visible .vg-map__district .vg-map__dot {
	transition-duration: 0.45s;
}

.vg-anim .vg-map__spoke-line {
	transition: stroke-dashoffset 0.9s var(--vg-loc-ease), stroke-width 0.3s ease;
	transition-delay: calc(1.6s + var(--i) * 0.15s), 0s;
}

.vg-anim .vg-map__district,
.vg-anim .vg-map__spoke-s {
	transition: opacity 0.5s ease 2.1s;
}

.vg-anim .vg-map__tag {
	transition: opacity 0.6s ease 1.2s;
}

/* Sau intro: hiệu ứng tương tác không còn trễ */
.vg-anim.is-settled .vg-map__poi,
.vg-anim.is-settled .vg-map__poi .vg-map__dot,
.vg-anim.is-settled .vg-map__spoke-line,
.vg-anim.is-settled .vg-map__tag {
	transition-delay: 0s;
}

@keyframes vg-map-spin {
	to { transform: rotate(360deg); }
}

@keyframes vg-map-pulse {
	0% { opacity: 0.55; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
	.vg-map__ring-spin,
	.vg-map__pulse {
		animation: none;
	}

	.vg-map__spark {
		display: none;
	}

	.vg-anim .vg-map *,
	.vg-anim .vg-map__ring,
	.vg-anim .vg-map__poi {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	.vg-location__body {
		grid-template-columns: minmax(0, 740px);
	}

	.vg-location__list {
		margin-top: 0;
		padding: 0;
		gap: 24px;
	}
}

@media (max-width: 689.98px) {
	.vg-location {
		padding-top: 48px;
		padding-bottom: 96px;
	}

	.vg-location__intro {
		margin-top: 16px;
	}

	.vg-location__skyline {
		width: 700px;
		height: auto;
	}

	/* Sơ đồ giữ tối thiểu 640px để chữ đọc được, vuốt ngang để xem (mở ở giữa — location.js) */
	.vg-location__map {
		overflow-x: auto;
		margin-inline: -16px;
		padding: 0 16px 8px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vg-location__map::-webkit-scrollbar {
		display: none;
	}

	.vg-map {
		min-width: 640px;
	}

	/* Thanh cuộn tự dựng: track mảnh màu vàng nhạt, con trượt Description gold */
	.vg-scrollbar {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-top: 8px;
	}

	.vg-scrollbar[hidden] {
		display: none;
	}

	.vg-scrollbar__hint {
		color: var(--vg-color-description-gold);
		font-family: var(--vg-font-body);
		font-size: 12px;
		line-height: 1.5;
	}

	.vg-scrollbar__track {
		position: relative;
		width: min(100%, 240px);
		height: 4px;
		border-radius: 4px;
		background-color: rgba(163, 116, 98, 0.18);
		touch-action: none;
		cursor: pointer;
	}

	/* Vùng chạm cao 24px cho ngón tay */
	.vg-scrollbar__track::before {
		content: "";
		position: absolute;
		inset: -10px 0;
	}

	.vg-scrollbar__thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		border-radius: inherit;
		background-color: var(--vg-color-description-gold);
		transition: background-color 0.2s ease;
	}

	.vg-scrollbar.is-dragging .vg-scrollbar__thumb {
		background-color: var(--vg-color-primary);
	}
}