/* Property Section Nav — thanh mục lục dính (libs/section-nav.php) */

.hhv-snav,
.hhv-snav-portal {
	--hhv-snav-accent: #C4A77D;
	--hhv-snav-text: #5E534D;
	--hhv-snav-active: #2B211D;
	--hhv-snav-bg: #FFFFFF;
	--hhv-snav-border: #E6E1DC;
	--hhv-snav-fs: 14px;
	--hhv-snav-h: 52px;
}
.hhv-snav { position: relative; }
.hhv-snav[hidden] { display: none !important; }

.hhv-snav__bar {
	background: var(--hhv-snav-bg);
	border-bottom: 1px solid var(--hhv-snav-border);
	box-sizing: border-box;
}
.hhv-snav__bar.is-stuck {
	position: fixed;
	top: 0;
	left: 0; /* left / width do JS đặt theo cột nội dung (máy tính) hoặc full màn hình (điện thoại) */
	z-index: 990;
	box-shadow: 0 6px 16px rgba(43, 33, 29, 0.07);
	transform: translateY(0);
	/* top: theo header khi header hiện / ẩn / co lại — trượt mượt thay vì nhảy */
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, top 0.2s ease;
}
/* Tới #similar: mờ dần + trượt lên; cuộn ngược lên: hiện lại + trượt xuống */
.hhv-snav__bar.is-away {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-16px);
	pointer-events: none;
}

.hhv-snav__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	height: var(--hhv-snav-h);
	box-sizing: border-box;
}
.hhv-snav__bar.is-stuck .hhv-snav__inner { padding-right: 12px; }

.hhv-snav__nav {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.hhv-snav__nav::-webkit-scrollbar { display: none; }
.hhv-snav__nav.has-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.hhv-snav__list {
	display: flex;
	align-items: stretch;
	gap: 8px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hhv-snav__item {
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}
.hhv-snav__item[hidden] { display: none; }

.hhv-snav a.hhv-snav__link,
.hhv-snav-portal a.hhv-snav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	font-size: var(--hhv-snav-fs);
	font-weight: 500;
	line-height: 1.2;
	color: var(--hhv-snav-text);
	text-decoration: none;
	white-space: nowrap;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.hhv-snav a.hhv-snav__link:hover,
.hhv-snav-portal a.hhv-snav__link:hover { color: var(--hhv-snav-active); }
.hhv-snav a.hhv-snav__link.is-active,
.hhv-snav-portal a.hhv-snav__link.is-active {
	color: var(--hhv-snav-active);
	font-weight: 600;
	border-bottom-color: var(--hhv-snav-accent);
}
.hhv-snav__link:focus-visible {
	outline: 2px solid var(--hhv-snav-accent);
	outline-offset: -2px;
}
.hhv-snav__icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* Tên · giá + nút: chỉ khi thanh đã dính (và luôn hiện trong trình sửa để xem trước) */
.hhv-snav__meta {
	display: none;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.hhv-snav__bar.is-stuck .hhv-snav__meta,
.hhv-snav.is-editor .hhv-snav__meta { display: flex; }
.hhv-snav__summary {
	max-width: 340px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: var(--hhv-snav-text);
}
.hhv-snav__title {
	color: var(--hhv-snav-active);
	font-weight: 500;
}
.hhv-snav__price {
	color: var(--hhv-snav-text);
	font-weight: 400;
}
.hhv-snav a.hhv-snav__cta,
.hhv-snav-portal a.hhv-snav__cta {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 18px;
	border-radius: 6px;
	background: var(--hhv-snav-accent);
	color: var(--hhv-snav-active);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.hhv-snav a.hhv-snav__cta:hover,
.hhv-snav-portal a.hhv-snav__cta:hover { filter: brightness(0.95); }

/* Lightbox / popup đang mở */
.hhv-snav__bar.is-stuck.is-covered {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: none; /* tức thì, cùng lúc theme hiện lightbox và hạ header xuống */
}
/* Sticky header theme có transition 0.3s cho mọi thuộc tính, kể cả z-index: lúc mở lightbox mặt bằng
   theme hạ z-index header 9999 → 0 (để header nằm dưới lightbox) nhưng số này chạy dần 0.3s →
   header đè lightbox rồi mới biến mất (giật). z-index đổi tức thì, các thuộc tính khác giữ hiệu ứng. */
body .master_header { transition: all 0.3s, z-index 0s !important; }

/* Thanh liên hệ agent dưới đáy (điện thoại) cũng ẩn khi lightbox / popup mở */
html.hhv-overlay-open body .mobile_agent_area_wrapper {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* Đặt lại vị trí sau khi đóng lightbox: không chuyển động */
.hhv-snav__bar.is-snap { transition: none !important; }

@media (max-width: 1279px) {
	.hhv-snav__summary { display: none; }
}

/* Tablet + điện thoại */
@media (max-width: 1024px) {
	/* Thanh không hiện ở vị trí widget (JS đưa lên đầu màn hình khi cuộn tới #propertydescription) */
	.hhv-snav[data-sticky="yes"]:not(.is-editor) > .hhv-snav__bar { display: none; }
	.hhv-snav,
	.hhv-snav-portal { --hhv-snav-h: 50px; }
	.hhv-snav__icon { display: none; }
	.hhv-snav__inner { gap: 0; }
	.hhv-snav__list { gap: 2px; padding: 0 8px; }
	.hhv-snav a.hhv-snav__link,
	.hhv-snav-portal a.hhv-snav__link { padding: 0 12px; }
	.hhv-snav__bar.is-stuck .hhv-snav__inner { padding-right: 0; }
	.hhv-snav__bar.is-stuck .hhv-snav__meta,
	.hhv-snav.is-editor .hhv-snav__meta { display: none; }
	.hhv-snav__bar.is-stuck[data-cta-mobile="yes"] .hhv-snav__meta {
		display: flex;
		padding: 0 10px 0 4px;
	}
	.hhv-snav a.hhv-snav__cta,
	.hhv-snav-portal a.hhv-snav__cta { height: 34px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.hhv-snav__bar.is-stuck { transition: none; }
}