/**
 * Thành phần giao diện: hero, thẻ, sơ đồ, form, thư viện, dòng thời gian.
 */

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */

.svh-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 78vh;
	min-height: 78svh;
	padding-block: var(--svh-sp-7);
	color: var(--svh-white);
	overflow: hidden;
}

.svh-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.svh-hero__image,
.svh-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svh-hero__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--svh-forest-dark), var(--svh-forest));
}

.svh-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31, 53, 41, .45) 0%, rgba(31, 53, 41, .85) 100%);
}

.svh-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.svh-hero__content {
	max-width: 720px;
}

.svh-hero--center .svh-hero__content {
	margin-inline: auto;
	text-align: center;
}

.svh-hero--right .svh-hero__content {
	margin-left: auto;
}

.svh-hero__eyebrow {
	font-size: var(--svh-fs-xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--svh-champagne);
	margin-bottom: var(--svh-sp-2);
}

.svh-hero__title {
	font-size: var(--svh-fs-4xl);
	color: var(--svh-white);
	margin-bottom: var(--svh-sp-3);
	text-wrap: balance;
}

.svh-hero__text {
	font-size: var(--svh-fs-lg);
	color: var(--svh-sand-light);
	margin-bottom: var(--svh-sp-4);
}

.svh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-sp-2);
	margin-bottom: var(--svh-sp-3);
}

.svh-hero--center .svh-hero__actions {
	justify-content: center;
}

.svh-hero__note {
	font-size: var(--svh-fs-xs);
	color: rgba(232, 220, 195, .8);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Dải thông tin nhanh
 * ------------------------------------------------------------------ */

.svh-facts-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--svh-line);
	border: 1px solid var(--svh-line);
}

.svh-facts-strip__item {
	padding: var(--svh-sp-3);
	background: var(--svh-off-white);
}

.svh-facts-strip dt {
	font-size: var(--svh-fs-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--svh-text-muted);
	margin-bottom: 0.35rem;
}

.svh-facts-strip dd {
	margin: 0;
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-lg);
	font-weight: 600;
	color: var(--svh-forest-dark);
	line-height: 1.3;
}

.svh-facts-strip__note {
	margin-top: var(--svh-sp-3);
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

/* Bảng thông tin nhanh trong trang chi tiết */
.svh-facts {
	padding: var(--svh-sp-3);
	background: var(--svh-sand);
	border-radius: var(--svh-radius-lg);
	margin-bottom: var(--svh-sp-4);
}

.svh-facts dl {
	margin: 0;
}

.svh-facts__row {
	display: flex;
	justify-content: space-between;
	gap: var(--svh-sp-3);
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(47, 79, 62, .12);
	font-size: var(--svh-fs-sm);
}

.svh-facts__row:last-child {
	border-bottom: 0;
}

.svh-facts__row dt {
	color: var(--svh-stone);
	flex: 0 0 auto;
}

.svh-facts__row dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
	color: var(--svh-forest-dark);
}

/* ---------------------------------------------------------------------
 * Khối trả lời nhanh và nguồn dữ liệu
 * ------------------------------------------------------------------ */

.svh-answer {
	padding: var(--svh-sp-3) var(--svh-sp-4);
	margin: 0 0 var(--svh-sp-4);
	background: var(--svh-white);
	border-left: 3px solid var(--svh-champagne);
	box-shadow: var(--svh-shadow);
}

.svh-answer__label {
	margin: 0 0 0.35rem;
	font-size: var(--svh-fs-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--svh-champagne-dark);
}

.svh-answer__body > *:last-child {
	margin-bottom: 0;
}

.svh-source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-sp-2);
	margin-top: var(--svh-sp-5);
	padding: var(--svh-sp-2) var(--svh-sp-3);
	background: var(--svh-sand);
	border-radius: var(--svh-radius);
	font-size: var(--svh-fs-xs);
	color: var(--svh-stone);
}

.svh-source__badge {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-weight: 600;
	background: var(--svh-white);
	color: var(--svh-forest-dark);
}

.svh-source__badge--verified {
	background: var(--svh-forest);
	color: var(--svh-white);
}

.svh-source__badge--planning {
	background: #4E8FA8;
	color: var(--svh-white);
}

.svh-source__badge--commercial,
.svh-source__badge--marketing {
	background: var(--svh-champagne);
	color: var(--svh-charcoal);
}

/* ---------------------------------------------------------------------
 * Thẻ nội dung
 * ------------------------------------------------------------------ */

.svh-card {
	background: var(--svh-white);
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--svh-transition), transform var(--svh-transition);
}

.svh-card:hover {
	box-shadow: var(--svh-shadow-lg);
	transform: translateY(-2px);
}

.svh-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.svh-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--svh-sand);
	overflow: hidden;
}

.svh-card__media--small {
	aspect-ratio: 4 / 3;
}

.svh-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

.svh-card:hover .svh-thumb {
	transform: scale(1.04);
}

.svh-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, var(--svh-sand), var(--svh-sand) 10px, #E0D7C8 10px, #E0D7C8 20px);
}

.svh-card__badge {
	position: absolute;
	top: var(--svh-sp-2);
	left: var(--svh-sp-2);
	padding: 0.2rem 0.7rem;
	background: var(--svh-forest);
	color: var(--svh-white);
	border-radius: var(--svh-radius);
	font-size: var(--svh-fs-xs);
	font-weight: 600;
}

.svh-card__badge--sold {
	background: #7A3030;
}

.svh-card__badge--reserved {
	background: var(--svh-champagne);
	color: var(--svh-charcoal);
}

.svh-card__body {
	padding: var(--svh-sp-3);
}

.svh-card__code {
	margin: 0 0 0.3rem;
	font-size: var(--svh-fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--svh-champagne-dark);
	font-weight: 600;
}

.svh-card__title {
	font-size: var(--svh-fs-lg);
	margin-bottom: 0.5rem;
	text-wrap: balance;
}

.svh-card__excerpt,
.svh-card__distance {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin-bottom: var(--svh-sp-2);
}

.svh-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: var(--svh-sp-2);
	list-style: none;
	margin: 0 0 var(--svh-sp-2);
	padding: var(--svh-sp-2) 0 0;
	border-top: 1px solid var(--svh-line);
}

.svh-card__meta-label {
	display: block;
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

.svh-card__meta-value {
	display: block;
	font-size: var(--svh-fs-sm);
	font-weight: 600;
	color: var(--svh-forest-dark);
}

.svh-card__cta {
	font-size: var(--svh-fs-sm);
	font-weight: 600;
	color: var(--svh-forest);
}

.svh-card__cta::after {
	content: " →";
}

/* ---------------------------------------------------------------------
 * Ba trụ cột
 * ------------------------------------------------------------------ */

.svh-concept {
	padding: var(--svh-sp-4);
	background: var(--svh-off-white);
	border-top: 3px solid var(--svh-champagne);
}

.svh-concept__num {
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-2xl);
	color: var(--svh-champagne);
	margin-bottom: var(--svh-sp-1);
	line-height: 1;
}

.svh-concept__title {
	font-size: var(--svh-fs-lg);
	margin-bottom: var(--svh-sp-2);
}

.svh-concept__text {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin: 0;
}

/* Danh sách có dấu tích */
.svh-ticks {
	list-style: none;
	margin: var(--svh-sp-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.5rem var(--svh-sp-3);
}

.svh-ticks li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--svh-fs-sm);
}

.svh-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--svh-champagne);
}

/* ---------------------------------------------------------------------
 * Sơ đồ quy hoạch
 * ------------------------------------------------------------------ */

.svh-masterplan__stage {
	position: relative;
	background: var(--svh-sand);
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
}

.svh-masterplan__canvas {
	position: relative;
	overflow: hidden;
	transform-origin: center center;
	transition: transform var(--svh-transition);
	cursor: grab;
}

.svh-masterplan__canvas.is-zoomed {
	cursor: grab;
}

.svh-masterplan__image {
	width: 100%;
	display: block;
}

.svh-masterplan__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.svh-zone {
	cursor: pointer;
	outline: none;
}

.svh-zone polygon,
.svh-zone rect,
.svh-zone circle {
	fill-opacity: .28;
	stroke: rgba(255, 255, 255, .85);
	stroke-width: .25;
	transition: fill-opacity var(--svh-transition);
}

.svh-zone:hover polygon,
.svh-zone:hover rect,
.svh-zone:hover circle,
.svh-zone:focus polygon,
.svh-zone:focus rect,
.svh-zone:focus circle {
	fill-opacity: .62;
}

.svh-zone.is-hidden {
	display: none;
}

.svh-masterplan__tip {
	position: absolute;
	z-index: 5;
	padding: 0.35rem 0.7rem;
	background: var(--svh-forest-dark);
	color: var(--svh-white);
	font-size: var(--svh-fs-xs);
	border-radius: var(--svh-radius);
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-50%, -130%);
}

.svh-masterplan__tools {
	position: absolute;
	right: var(--svh-sp-2);
	bottom: var(--svh-sp-2);
	display: flex;
	gap: 0.35rem;
	z-index: 4;
}

.svh-masterplan__tools .svh-btn {
	padding: 0.45rem 0.8rem;
	background: rgba(255, 255, 255, .94);
	border-color: var(--svh-line);
	color: var(--svh-forest-dark);
	font-size: var(--svh-fs-xs);
}

.svh-masterplan__legend {
	margin-top: var(--svh-sp-3);
}

.svh-masterplan__legend-title {
	font-size: var(--svh-fs-xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--svh-text-muted);
	margin-bottom: var(--svh-sp-2);
}

.svh-masterplan__legend ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-legend-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem;
	background: var(--svh-white);
	border: 1px solid var(--svh-line);
	border-radius: 999px;
	font-size: var(--svh-fs-xs);
	color: var(--svh-charcoal);
	cursor: pointer;
	transition: opacity var(--svh-transition);
}

.svh-legend-btn[aria-pressed="false"] {
	opacity: .45;
}

.svh-legend-btn__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 10px;
}

.svh-masterplan__list {
	margin-top: var(--svh-sp-3);
	font-size: var(--svh-fs-sm);
}

.svh-masterplan__list summary {
	cursor: pointer;
	color: var(--svh-forest);
	font-weight: 500;
}

.svh-masterplan__list ul {
	margin-top: var(--svh-sp-2);
	padding-left: 1.2rem;
}

/* ---------------------------------------------------------------------
 * Bộ lọc
 * ------------------------------------------------------------------ */

.svh-filters-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--svh-sp-3);
	align-items: end;
	padding: var(--svh-sp-3);
	margin-bottom: var(--svh-sp-4);
	background: var(--svh-white);
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius-lg);
}

.svh-filters-bar__item {
	margin: 0;
}

.svh-filters-bar__item--actions {
	display: flex;
	gap: var(--svh-sp-2);
	align-items: center;
}

.svh-filters-bar__reset {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
}

.svh-filters-bar__status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

.svh-result-count {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin-bottom: var(--svh-sp-3);
}

.svh-grid[data-svh-results].is-loading {
	opacity: .5;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Biểu mẫu
 * ------------------------------------------------------------------ */

.svh-form-wrap {
	padding: var(--svh-sp-4);
	background: var(--svh-white);
	border-radius: var(--svh-radius-lg);
	box-shadow: var(--svh-shadow);
}

.svh-section--dark .svh-form-wrap {
	box-shadow: none;
}

.svh-form__title {
	font-size: var(--svh-fs-xl);
	margin-bottom: var(--svh-sp-2);
}

.svh-form__subtitle {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin-bottom: var(--svh-sp-3);
}

.svh-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--svh-sp-3);
}

@media (min-width: 560px) {
	.svh-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.svh-field--full {
		grid-column: 1 / -1;
	}
}

.svh-form__submit {
	margin: var(--svh-sp-2) 0 0;
}

.svh-form__submit .svh-btn {
	width: 100%;
}

.svh-form__note {
	margin: var(--svh-sp-2) 0 0;
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

.svh-form__message {
	margin-top: var(--svh-sp-2);
	font-size: var(--svh-fs-sm);
}

.svh-form__message.is-success {
	padding: var(--svh-sp-2) var(--svh-sp-3);
	background: #E5F0EA;
	color: #1E4230;
	border-radius: var(--svh-radius);
}

.svh-form__message.is-error {
	padding: var(--svh-sp-2) var(--svh-sp-3);
	background: #F8E6E6;
	color: #8A1F1F;
	border-radius: var(--svh-radius);
}

.svh-side-form {
	margin-top: var(--svh-sp-4);
}

.svh-split__phone {
	margin-top: var(--svh-sp-3);
	font-size: var(--svh-fs-lg);
}

/* ---------------------------------------------------------------------
 * Thông số
 * ------------------------------------------------------------------ */

.svh-specs {
	padding: var(--svh-sp-3);
	background: var(--svh-white);
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius-lg);
}

.svh-specs__title {
	font-size: var(--svh-fs-lg);
	margin-bottom: var(--svh-sp-2);
}

.svh-specs dl {
	margin: 0;
}

.svh-spec {
	display: flex;
	justify-content: space-between;
	gap: var(--svh-sp-3);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--svh-line);
	font-size: var(--svh-fs-sm);
}

.svh-spec:last-of-type {
	border-bottom: 0;
}

.svh-spec__label {
	color: var(--svh-text-muted);
}

.svh-spec__value {
	margin: 0;
	font-weight: 600;
	color: var(--svh-forest-dark);
	text-align: right;
}

.svh-specs__note {
	margin: var(--svh-sp-2) 0 0;
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Câu hỏi thường gặp
 * ------------------------------------------------------------------ */

.svh-faq__item {
	border-bottom: 1px solid var(--svh-line);
}

.svh-faq__q {
	padding: var(--svh-sp-3) 2rem var(--svh-sp-3) 0;
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-lg);
	font-weight: 600;
	color: var(--svh-forest-dark);
	cursor: pointer;
	list-style: none;
	position: relative;
}

.svh-faq__q::-webkit-details-marker {
	display: none;
}

.svh-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--svh-fs-xl);
	color: var(--svh-champagne-dark);
	font-family: var(--svh-font-body);
}

.svh-faq__item[open] .svh-faq__q::after {
	content: "−";
}

.svh-faq__a {
	padding-bottom: var(--svh-sp-3);
	color: var(--svh-text-muted);
}

.svh-faq__short {
	font-weight: 500;
	color: var(--svh-charcoal);
}

/* ---------------------------------------------------------------------
 * Thư viện ảnh
 * ------------------------------------------------------------------ */

.svh-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--svh-sp-2);
}

.svh-gallery__item {
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var(--svh-radius);
}

.svh-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--svh-transition);
}

.svh-gallery__item:hover img {
	transform: scale(1.05);
}

.svh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--svh-sp-4);
	background: rgba(31, 53, 41, .94);
}

.svh-lightbox img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
}

.svh-lightbox__close {
	position: absolute;
	top: var(--svh-sp-3);
	right: var(--svh-sp-3);
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .4);
	color: var(--svh-white);
	font-size: var(--svh-fs-xl);
	cursor: pointer;
	border-radius: 50%;
}

/*
 * display: block là bắt buộc — khung nhúng do bộ soạn thảo sinh ra dùng thẻ
 * <span> để nằm hợp lệ bên trong <p>, mà aspect-ratio không áp dụng cho phần
 * tử inline. Đặt block ở đây giúp cả <div> lẫn <span> hiển thị như nhau.
 */
.svh-embed {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.svh-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.svh-map-embed iframe {
	width: 100%;
	min-height: 420px;
	border: 0;
	border-radius: var(--svh-radius-lg);
}

/* ---------------------------------------------------------------------
 * Dòng thời gian tiến độ
 * ------------------------------------------------------------------ */

.svh-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--svh-sp-4);
	border-left: 2px solid var(--svh-line);
}

.svh-timeline__item {
	position: relative;
	padding-bottom: var(--svh-sp-5);
}

.svh-timeline__marker {
	position: absolute;
	left: calc(-1 * var(--svh-sp-4) - 7px);
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--svh-champagne);
	border: 2px solid var(--svh-off-white);
}

.svh-timeline__date {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin-bottom: 0.3rem;
}

.svh-timeline__percent {
	display: inline-block;
	margin-left: var(--svh-sp-2);
	padding: 0.1rem 0.55rem;
	background: var(--svh-forest);
	color: var(--svh-white);
	border-radius: 999px;
	font-size: var(--svh-fs-xs);
	font-weight: 600;
}

.svh-timeline__title {
	font-size: var(--svh-fs-lg);
	margin-bottom: var(--svh-sp-2);
}

.svh-timeline__media {
	display: block;
	max-width: 480px;
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
	margin-bottom: var(--svh-sp-2);
}

.svh-timeline__excerpt {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Tài liệu
 * ------------------------------------------------------------------ */

.svh-docs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-doc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--svh-sp-3);
	padding: var(--svh-sp-3);
	background: var(--svh-white);
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius-lg);
	margin-bottom: var(--svh-sp-2);
}

.svh-doc__info {
	display: flex;
	align-items: center;
	gap: var(--svh-sp-3);
}

.svh-doc__ext {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--svh-sand);
	border-radius: var(--svh-radius);
	font-size: var(--svh-fs-xs);
	font-weight: 700;
	color: var(--svh-forest-dark);
	flex: 0 0 48px;
}

.svh-doc__title {
	font-size: var(--svh-fs-base);
	margin: 0 0 0.2rem;
}

.svh-doc__meta {
	display: flex;
	gap: var(--svh-sp-2);
	margin: 0;
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

/* ---------------------------------------------------------------------
 * Nút liên hệ nổi
 * ------------------------------------------------------------------ */

.svh-float {
	position: fixed;
	right: var(--svh-sp-2);
	bottom: var(--svh-sp-2);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.svh-float__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: var(--svh-forest);
	color: var(--svh-white);
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--svh-fs-sm);
	font-weight: 600;
	box-shadow: var(--svh-shadow);
	transition: transform var(--svh-transition);
}

.svh-float__btn:hover {
	transform: scale(1.04);
	color: var(--svh-white);
}

.svh-float__btn--zalo { background: #0068FF; }
.svh-float__btn--whatsapp { background: #128C7E; }
.svh-float__btn--fb { background: #1877F2; }
.svh-float__btn--form { background: var(--svh-champagne); color: var(--svh-charcoal); }
.svh-float__btn--form:hover { color: var(--svh-charcoal); }

.svh-float__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	font-size: var(--svh-fs-base);
}

@media (max-width: 640px) {
	.svh-float {
		flex-direction: row;
		left: var(--svh-sp-2);
		right: var(--svh-sp-2);
		bottom: var(--svh-sp-2);
		justify-content: center;
	}

	.svh-float__label {
		display: none;
	}

	.svh-float__btn--phone .svh-float__label {
		display: inline;
	}

	.svh-float__icon {
		width: auto;
	}
}

/* ---------------------------------------------------------------------
 * Vụn vặt
 * ------------------------------------------------------------------ */

.svh-breadcrumbs {
	margin-bottom: var(--svh-sp-3);
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
}

.svh-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4rem;
	color: var(--svh-line);
}

.svh-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: var(--svh-sp-5) 0 0;
	padding: 0;
	justify-content: center;
}

.svh-pagination a,
.svh-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius);
	text-decoration: none;
	font-size: var(--svh-fs-sm);
}

.svh-pagination .current {
	background: var(--svh-forest);
	border-color: var(--svh-forest);
	color: var(--svh-white);
}

.svh-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--svh-sp-4);
}

.svh-tabs__link {
	padding: 0.4rem 1rem;
	border: 1px solid var(--svh-line);
	border-radius: 999px;
	font-size: var(--svh-fs-sm);
	text-decoration: none;
	color: var(--svh-charcoal);
}

.svh-tabs__link.is-active {
	background: var(--svh-forest);
	border-color: var(--svh-forest);
	color: var(--svh-white);
}

.svh-empty {
	padding: var(--svh-sp-5);
	text-align: center;
	background: var(--svh-white);
	border: 1px dashed var(--svh-line);
	border-radius: var(--svh-radius-lg);
	color: var(--svh-text-muted);
}

.svh-notice--admin {
	padding: var(--svh-sp-3);
	background: #FCF9E8;
	border-left: 3px solid var(--svh-champagne);
	font-size: var(--svh-fs-sm);
	margin-bottom: var(--svh-sp-3);
}

.svh-search {
	display: flex;
	gap: 0.5rem;
	max-width: 520px;
}

.svh-search__submit {
	padding: 0 1.2rem;
	background: var(--svh-forest);
	color: var(--svh-white);
	border: 0;
	border-radius: var(--svh-radius);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.svh-result {
	padding: var(--svh-sp-3) 0;
	border-bottom: 1px solid var(--svh-line);
}

.svh-result__type {
	font-size: var(--svh-fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--svh-champagne-dark);
	margin-bottom: 0.2rem;
}

.svh-result__title {
	font-size: var(--svh-fs-lg);
	margin-bottom: 0.3rem;
}

.svh-result__excerpt {
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	margin: 0;
}

.svh-404 {
	text-align: center;
}

.svh-404__code {
	font-family: var(--svh-font-heading);
	font-size: 5rem;
	line-height: 1;
	color: var(--svh-champagne);
	margin: 0;
}

.svh-404__search {
	display: flex;
	justify-content: center;
	margin-bottom: var(--svh-sp-4);
}

.svh-404__links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--svh-sp-3);
	list-style: none;
	padding: 0;
	margin-bottom: var(--svh-sp-6);
}

.svh-404__recent {
	text-align: left;
}

.svh-connections {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-connections__item {
	display: flex;
	justify-content: space-between;
	gap: var(--svh-sp-3);
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--svh-line);
}

.svh-connections__km {
	color: var(--svh-text-muted);
	font-size: var(--svh-fs-sm);
	white-space: nowrap;
}

.svh-contact {
	display: grid;
	gap: var(--svh-sp-5);
}

@media (min-width: 900px) {
	.svh-contact {
		grid-template-columns: 1fr 1fr;
		gap: var(--svh-sp-6);
	}
}

.svh-contact__list {
	margin-top: var(--svh-sp-4);
}

.svh-contact__list > div {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--svh-line);
}

.svh-contact__list dt {
	font-size: var(--svh-fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--svh-text-muted);
}

.svh-contact__list dd {
	margin: 0.2rem 0 0;
	font-weight: 500;
}

.svh-article__cover,
.svh-detail__cover {
	margin: 0 0 var(--svh-sp-4);
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
}

.svh-article__cover figcaption {
	padding: var(--svh-sp-2);
	font-size: var(--svh-fs-xs);
	color: var(--svh-text-muted);
	background: var(--svh-sand);
}

.svh-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-sp-3);
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
}

.svh-article__cat {
	font-size: var(--svh-fs-xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--svh-champagne-dark);
	font-weight: 600;
}

.svh-article__tags {
	margin-top: var(--svh-sp-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-sp-2);
	font-size: var(--svh-fs-sm);
}

.svh-related {
	margin-top: var(--svh-sp-7);
	padding-top: var(--svh-sp-5);
	border-top: 1px solid var(--svh-line);
}

.svh-detail__code {
	font-size: var(--svh-fs-sm);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--svh-champagne-dark);
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.svh-detail__lead {
	font-size: var(--svh-fs-lg);
	color: var(--svh-text-muted);
}

/* Chặn cuộn nền khi mở menu hoặc lightbox */
body.svh-locked {
	overflow: hidden;
}

@media print {
	.svh-header,
	.svh-float,
	.svh-footer,
	.svh-form-wrap,
	.svh-masterplan__tools {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------
   Khung gợi ý cho quản trị viên khi một khối trang chủ chưa có dữ liệu.
   Khách truy cập không bao giờ thấy phần này (kiểm tra quyền ở PHP).
   Dùng gạch đứt và nền trung tính để không bị nhầm là nội dung thật.
   --------------------------------------------------------------------- */
.svh-empty {
	padding-block: var(--svh-sp-5);
}

.svh-empty__box {
	border: 1px dashed var(--svh-champagne-dark);
	border-radius: var(--svh-radius-lg);
	background: var(--svh-white);
	padding: var(--svh-sp-5);
	text-align: center;
}

.svh-empty__eyebrow {
	margin: 0 0 var(--svh-sp-2);
	font-size: var(--svh-fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--svh-champagne-dark);
}

.svh-empty__title {
	margin: 0 0 var(--svh-sp-2);
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-xl);
	color: var(--svh-charcoal);
}

.svh-empty__note {
	margin: 0 auto var(--svh-sp-4);
	max-width: 62ch;
	font-size: var(--svh-fs-sm);
	line-height: 1.65;
	color: var(--svh-stone);
}

.svh-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-sp-2);
	justify-content: center;
	margin: 0;
}

/* Nhắc tạo menu khi header chưa có mục nào. */
.svh-nav__empty {
	margin: 0;
	font-size: var(--svh-fs-sm);
}

.svh-nav__empty a {
	color: var(--svh-champagne-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =====================================================================
   Năm vùng khối nội dung trang chủ (dưới dải "Đô thị 15 phút")
   ===================================================================== */

.svh-section--blocks .svh-container > * + * {
	margin-top: var(--svh-sp-8);
}

/* --- Khối toàn chiều rộng: mọi thành phần xếp dọc và căn giữa --- */
/*
 * Khối nội dung trang chủ.
 *
 * Bố cục theo yêu cầu vận hành: TIÊU ĐỀ căn giữa và chọn được cỡ chữ;
 * PHẦN CHỮ dàn ngang hết chiều rộng khung nội dung thay vì bó trong cột
 * hẹp; ẢNH/VIDEO mặc định tràn hết bề ngang màn hình.
 */
.svh-blockrow {
	max-width: none;
	margin-inline: 0;
}

.svh-blockrow + .svh-blockrow,
.svh-blockrow + .svh-blocks__zones,
.svh-blocks__zones + .svh-blockrow {
	margin-top: var(--svh-sp-7);
}

/* --- Tiêu đề: luôn căn giữa, cỡ chữ chọn trong trang quản trị --- */
.svh-blockrow__title,
.svh-blockcard__title {
	margin: 0 0 var(--svh-sp-4);
	font-family: var(--svh-font-heading);
	line-height: 1.18;
	color: var(--svh-forest-dark);
	text-align: center;
	text-wrap: balance;
}

/*
 * clamp() giữ cho cỡ chữ lớn không làm vỡ giao diện trên điện thoại:
 * giá trị giữa co theo bề rộng màn hình, hai đầu chặn trên và dưới.
 */
.svh-blocktitle--md {
	font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
}

.svh-blocktitle--lg {
	font-size: clamp(1.625rem, 1.25rem + 1.9vw, 2.375rem);
}

.svh-blocktitle--xl {
	font-size: clamp(1.875rem, 1.35rem + 2.7vw, 3rem);
}

.svh-blocktitle--2xl {
	font-size: clamp(2.125rem, 1.4rem + 3.7vw, 3.75rem);
}

/* --- Phần chữ: dàn ngang hết khung, không bó cột hẹp --- */
.svh-blockrow__text {
	color: var(--svh-text-muted);
	max-width: none;
}

.svh-blockrow__text > p:last-child {
	margin-bottom: 0;
}

/*
 * Nội dung do bộ soạn thảo sinh ra. Chữ chạy ngang hết chiều rộng và căn
 * trái để đọc được; ảnh/video chèn giữa dòng cũng kéo hết chiều rộng đó.
 * Quản trị viên vẫn dùng được nút căn giữa/căn phải của editor, vì các
 * class aligncenter/alignright của WordPress được tôn trọng ở dưới.
 */
.svh-prose--wide {
	text-align: left;
}

.svh-prose--wide > img,
.svh-prose--wide > p > img,
.svh-prose--wide > figure,
.svh-prose--wide > .svh-embed,
.svh-prose--wide > video,
.svh-prose--wide > p > video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: 0;
	border-radius: var(--svh-radius-lg);
}

.svh-prose--wide figure {
	margin-inline: 0;
	width: 100%;
}

.svh-prose--wide figcaption {
	margin-top: var(--svh-sp-2);
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
}

.svh-prose--wide iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var(--svh-radius-lg);
}

/* Tôn trọng lựa chọn căn lề của người soạn trong editor. */
.svh-prose--wide .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.svh-prose--wide .alignright {
	margin-left: auto;
	text-align: right;
}

.svh-prose--wide .alignleft {
	margin-right: auto;
	text-align: left;
}

.svh-prose--wide ul,
.svh-prose--wide ol {
	text-align: left;
	padding-left: 1.25rem;
}

.svh-prose--wide blockquote {
	margin-inline: 0;
	border-left: 3px solid var(--svh-champagne);
	padding: var(--svh-sp-2) 0 var(--svh-sp-2) var(--svh-sp-4);
}

/* --- Media của khối: ba mức bề rộng --- */
.svh-blockrow__media {
	margin-top: var(--svh-sp-5);
}

.svh-blockrow__media img,
.svh-blockrow__media video,
.svh-blockrow__media .svh-embed,
.svh-blockrow__media iframe {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

/*
 * "Tràn ngang màn hình": kéo khối ra khỏi lề của .svh-container để chạm
 * hai mép. Kỹ thuật margin âm theo vw là cách duy nhất làm được điều này
 * từ bên trong container mà không phải đổi cấu trúc HTML. Phần dôi ra do
 * thanh cuộn dọc đã được overflow-x của <html>/<body> cắt gọn.
 */
.svh-blockmedia--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.svh-blockmedia--full img,
.svh-blockmedia--full video,
.svh-blockmedia--full iframe {
	border-radius: 0;
}

.svh-blockmedia--container {
	width: 100%;
}

.svh-blockmedia--container img,
.svh-blockmedia--container video,
.svh-blockmedia--container iframe {
	border-radius: var(--svh-radius-lg);
}

.svh-blockmedia--narrow {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

.svh-blockmedia--narrow img,
.svh-blockmedia--narrow video,
.svh-blockmedia--narrow iframe {
	border-radius: var(--svh-radius-lg);
}

/* Trong thẻ Phân khu thì không tràn viền được, luôn vừa khung thẻ. */
.svh-blockcard .svh-blockmedia--full {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.svh-blockrow__actions {
	margin-top: var(--svh-sp-5);
	margin-bottom: 0;
	text-align: center;
}

/* --- Hàng "Phân khu" chia đôi thấp tầng / cao tầng --- */
.svh-blocks__zones-title {
	margin: 0 0 var(--svh-sp-5);
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-2xl);
	line-height: 1.18;
	color: var(--svh-forest-dark);
	text-align: center;
}

.svh-blocks__zones-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--svh-sp-5);
}

@media (min-width: 768px) {
	.svh-blocks__zones-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--svh-sp-6);
	}
}

/* Chỉ nhập một trong hai cột thì không kéo dài hết chiều rộng cho lệch. */
.svh-blocks__zones-grid--single {
	max-width: 560px;
	margin-inline: auto;
}

/*
 * align-items: stretch để phần chữ và ảnh trải hết bề ngang thẻ. Trước đây
 * dùng center khiến mọi con co lại bằng nội dung, nên chữ không dàn ngang
 * được. Riêng tiêu đề vẫn căn giữa bằng text-align ở quy tắc dùng chung.
 */
.svh-blockcard {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: var(--svh-sp-6) var(--svh-sp-5);
	background: var(--svh-surface, #fff);
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius-lg);
	transition: box-shadow var(--svh-transition), transform var(--svh-transition);
}



.svh-blockcard:hover {
	box-shadow: var(--svh-shadow);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.svh-blockcard {
		transition: none;
	}

	.svh-blockcard:hover {
		transform: none;
	}
}

/*
 * KHÔNG đặt font-size ở đây. Cỡ chữ do class .svh-blocktitle--* quyết định
 * theo lựa chọn trong trang quản trị; để lại font-size cố định ở quy tắc này
 * sẽ ghi đè lựa chọn đó vì hai selector cùng độ ưu tiên và quy tắc này đứng sau.
 */
.svh-blockcard__title {
	margin: 0 0 var(--svh-sp-3);
	line-height: 1.22;
}

/*
 * Thẻ Phân khu nằm trong cột hẹp nên hạ một bậc cỡ chữ so với khối toàn
 * chiều rộng, giữ nguyên tỉ lệ tương đối giữa bốn mức đã chọn.
 */
.svh-blockcard .svh-blocktitle--md { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); }
.svh-blockcard .svh-blocktitle--lg { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }
.svh-blockcard .svh-blocktitle--xl { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem); }
.svh-blockcard .svh-blocktitle--2xl { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem); }

.svh-blockcard__text {
	color: var(--svh-text-muted);
}

.svh-blockcard__text > p:last-child {
	margin-bottom: 0;
}

.svh-blockcard__media {
	width: 100%;
	margin-top: var(--svh-sp-5);
}

.svh-blockcard__media img,
.svh-blockcard__media .svh-embed,
.svh-blockcard__media video {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
}

.svh-blockcard__actions {
	margin: var(--svh-sp-5) 0 0;
}

/* --- Khung nhúng video / YouTube giữ đúng tỉ lệ, không gây nhảy layout --- */
.svh-embed {
	position: relative;
	width: 100%;
	background: var(--svh-forest-dark);
	border-radius: var(--svh-radius-lg);
	overflow: hidden;
}

.svh-embed--16x9 {
	aspect-ratio: 16 / 9;
}

.svh-embed iframe,
.svh-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}