.bds-im-viewer-shell,
.bds-im-viewer-shell * {
	box-sizing: border-box;
}

.bds-im-viewer-shell {
	--bds-im-viewer-height: clamp(560px, 76svh, 920px);
	--bds-im-shell-gutter: 16px;
	width: 100%;
	margin: 18px auto 28px;
	border: 1px solid #dfe3e8;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	font-family: inherit;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

/*
 * Full layout breaks out of a constrained WordPress/Elementor content column
 * and uses almost the entire browser viewport while keeping a safe gutter.
 */
.bds-im-viewer-shell--full {
	position: relative;
	left: 50%;
	width: calc(100vw - (var(--bds-im-shell-gutter) * 2));
	max-width: 1920px;
	transform: translateX(-50%);
}

.bds-im-viewer-shell--contained {
	max-width: 1440px;
}

.bds-im-viewer-header,
.bds-im-viewer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	background: #fff;
}

.bds-im-viewer-header {
	min-height: 58px;
	border-bottom: 1px solid #e5e7eb;
}

.bds-im-viewer-footer {
	min-height: 40px;
	border-top: 1px solid #e5e7eb;
	font-size: 12px;
	line-height: 1.35;
}

.bds-im-viewer-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.bds-im-viewer-meta,
.bds-im-viewer-tech,
.bds-im-viewer-phase {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	opacity: 0.68;
}

.bds-im-viewer-phase {
	margin-top: 0;
	white-space: nowrap;
}

.bds-im-viewer-stage {
	position: relative;
	width: 100%;
	height: var(--bds-im-viewer-height);
	min-height: 520px;
	background: #0f172a;
	overflow: hidden;
}

.bds-im-viewer {
	width: 100%;
	height: 100%;
	background: #0f172a;
	touch-action: none;
}

/*
 * Keep the navigator useful but visually secondary.
 * OSD sets inline dimensions, therefore !important is intentional here.
 */
.bds-im-viewer .navigator {
	width: clamp(132px, 10vw, 176px) !important;
	height: clamp(82px, 6.25vw, 110px) !important;
	border: 1px solid rgba(255, 255, 255, 0.78) !important;
	background: rgba(15, 23, 42, 0.78) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.bds-im-viewer-status {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	background: rgba(15, 23, 42, 0.84);
	color: #fff;
	font-size: 14px;
	text-align: center;
	transition: opacity 180ms ease;
	pointer-events: none;
}

.bds-im-viewer-status[aria-hidden="true"] {
	opacity: 0;
}

.bds-im-viewer-status[data-state="error"] {
	pointer-events: auto;
}

.bds-im-viewer-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bds-im-spin 700ms linear infinite;
}

.bds-im-viewer-status[data-state="error"] .bds-im-viewer-spinner,
.bds-im-viewer-status[data-state="ready"] .bds-im-viewer-spinner {
	display: none;
}

.bds-im-viewer-error {
	margin: 20px 0;
	padding: 16px;
	border: 1px solid #d63638;
	border-radius: 8px;
	background: #fff;
}

.bds-im-resolver-notice {
	margin: 16px 0 8px;
	padding: 10px 12px;
	border: 1px solid #dba617;
	border-radius: 6px;
	background: #fcf9e8;
	font-size: 13px;
	line-height: 1.5;
}

@keyframes bds-im-spin {
	to { transform: rotate(360deg); }
}

/* Large desktop / common 1440–1920px monitors. */
@media (min-width: 1440px) {
	.bds-im-viewer-shell {
		--bds-im-viewer-height: clamp(640px, 79svh, 960px);
		--bds-im-shell-gutter: 18px;
	}

	.bds-im-viewer-header {
		padding-inline: 18px;
	}

	.bds-im-viewer-footer {
		padding-inline: 18px;
	}
}

/* Laptop and landscape tablet. */
@media (max-width: 1199px) {
	.bds-im-viewer-shell {
		--bds-im-viewer-height: clamp(500px, 70svh, 760px);
		--bds-im-shell-gutter: 12px;
		border-radius: 10px;
	}

	.bds-im-viewer-stage {
		min-height: 460px;
	}
}

/* Tablet / mobile. */
@media (max-width: 767px) {
	.bds-im-viewer-shell {
		--bds-im-viewer-height: clamp(420px, 62svh, 640px);
		--bds-im-shell-gutter: 8px;
		margin: 10px auto 18px;
		border-radius: 8px;
	}

	.bds-im-viewer-header,
	.bds-im-viewer-footer {
		padding: 9px 11px;
	}

	.bds-im-viewer-header {
		min-height: 52px;
		align-items: flex-start;
	}

	.bds-im-viewer-stage {
		min-height: 420px;
	}

	.bds-im-viewer-footer {
		min-height: 38px;
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}

	.bds-im-viewer-phase {
		display: none;
	}

	.bds-im-viewer-title {
		font-size: 14px;
	}
}

/* Phone. Navigator is disabled in JS below 640px. */
@media (max-width: 479px) {
	.bds-im-viewer-shell {
		--bds-im-viewer-height: clamp(360px, 58svh, 540px);
		--bds-im-shell-gutter: 4px;
	}

	.bds-im-viewer-stage {
		min-height: 360px;
	}
}


/* ------------------------------------------------------------------
 * Phase 5 — SVG Polygon Overlay
 * Neutral mapping style only.
 * Status colors are intentionally deferred to a later phase.
 * ------------------------------------------------------------------ */

.bds-im-svg-overlay {
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.bds-im-svg-shape-group {
	pointer-events: none;
}

.bds-im-unit-shape {
	fill: var(--bds-im-status-fill, rgba(37, 99, 235, 0.16));
	stroke: var(--bds-im-status-stroke, rgba(37, 99, 235, 0.9));
	stroke-width: 2px;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
	pointer-events: all;
	cursor: pointer;
	transition:
		fill 120ms ease,
		stroke 120ms ease,
		fill-opacity 120ms ease,
		stroke-opacity 120ms ease,
		filter 120ms ease;
	outline: none;
}

.bds-im-unit-shape:hover,
.bds-im-unit-shape.is-hovered,
.bds-im-unit-shape:focus-visible {
	fill: var(--bds-im-status-fill-hover, rgba(37, 99, 235, 0.30));
	stroke: var(--bds-im-status-stroke-strong, rgba(30, 64, 175, 1));
	filter: drop-shadow(
		0 0 2px
		var(--bds-im-status-shadow, rgba(37, 99, 235, 0.45))
	);
}

.bds-im-unit-shape.is-selected {
	fill: var(--bds-im-status-fill-selected, rgba(14, 165, 233, 0.38));
	stroke: var(--bds-im-status-stroke-strong, rgba(3, 105, 161, 1));
	stroke-width: 3px;
}


/* v1.14.2.7 — small screen-space standard-price pins on mapped products. */
.bds-im-unit-price-tag-layer {
	position: absolute;
	inset: 0;
	z-index: 24;
	overflow: hidden;
	pointer-events: none;
}

.bds-im-unit-price-tag {
	position: absolute;
	min-width: 30px;
	height: 19px;
	padding: 0 6px;
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 999px;
	background: rgba(151, 103, 0, .94);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(79,52,0,.22);
	transform: translate(-50%, calc(-100% - 4px));
	transform-origin: 50% 100%;
	pointer-events: none;
}

.bds-im-unit-price-tag::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid rgba(151, 103, 0, .94);
	transform: translateX(-50%);
}

.bds-im-unit-price-tag[hidden] {
	display: none !important;
}

@media (max-width: 767px), (pointer: coarse) {
	.bds-im-unit-price-tag {
		min-width: 29px;
		height: 18px;
		padding-inline: 5px;
		font-size: 9.5px;
		line-height: 16px;
		transform: translate(-50%, calc(-100% - 3px));
	}
}

.bds-im-polygon-tooltip {
	position: absolute;
	z-index: 35;
	max-width: min(260px, calc(100% - 24px));
	padding: 6px 9px;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.94);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
	transform: translateY(-100%);
}

.bds-im-viewer-selection {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 767px), (pointer: coarse) {
	/* WebKit/iOS is more stable when the SVG stays in OSD's normal paint
	 * layer. Avoid filter/compositor promotion while users pinch and pan. */
	.bds-im-svg-overlay {
		transform: none !important;
		-webkit-transform: none !important;
		will-change: auto !important;
	}

	.bds-im-unit-shape:hover,
	.bds-im-unit-shape.is-hovered,
	.bds-im-unit-shape:focus-visible {
		filter: none;
	}
}

@media (max-width: 767px) {
	.bds-im-viewer-selection {
		white-space: normal;
	}

	.bds-im-polygon-tooltip {
		display: none;
	}
}


/* ------------------------------------------------------------------
 * Phase 6 — Unit REST API Popup / Drawer
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * Phase 6.3 visibility rule
 *
 * Author CSS such as `.bds-im-unit-panel__loading { display:flex; }` can
 * override the browser's UA `[hidden] { display:none }`. Make hidden
 * authoritative for all popup components.
 * ------------------------------------------------------------------ */

.bds-im-unit-modal [hidden] {
	display: none !important;
}


html.bds-im-modal-open,
html.bds-im-modal-open body {
	overflow: hidden;
}

.bds-im-unit-modal[hidden] {
	display: none !important;
}

.bds-im-unit-modal {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}

.bds-im-unit-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.bds-im-unit-modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: rgba(15, 23, 42, 0.58) !important;
	background-color: rgba(15, 23, 42, 0.58) !important;
	color: transparent !important;
	cursor: default;
}

/*
 * Important:
 * The backdrop is a <button> so it remains keyboard/click accessible.
 * Many WordPress themes apply button:hover / button:focus / button:active
 * brand colors. Lock the backdrop to the same neutral dim color so theme
 * button styles cannot turn the entire masterplan green/red/etc.
 */
.bds-im-unit-modal__backdrop:hover,
.bds-im-unit-modal__backdrop:focus,
.bds-im-unit-modal__backdrop:focus-visible,
.bds-im-unit-modal__backdrop:active {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
	background: rgba(15, 23, 42, 0.58) !important;
	background-color: rgba(15, 23, 42, 0.58) !important;
	color: transparent !important;
}

.bds-im-unit-panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(460px, 94vw);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%);
	box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
	transform: translateX(100%);
	transition: transform 220ms ease;
	outline: none;
}

.bds-im-unit-modal.is-open .bds-im-unit-panel {
	transform: translateX(0);
}

.bds-im-unit-panel__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid #e4ece0;
	background: linear-gradient(180deg, rgba(227, 235, 178, 0.34) 0%, rgba(255, 255, 255, 0) 100%);
}

.bds-im-unit-panel__heading {
	min-width: 0;
}

.bds-im-unit-panel__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 9px;
	border: 1px solid var(--bds-im-status-badge-border, transparent);
	border-radius: 999px;
	background: var(--bds-im-status-badge-bg, #f1f5f9);
	color: var(--bds-im-status-badge-text, #0f172a);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.bds-im-unit-panel__title {
	margin: 8px 0 0;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.1;
}

.bds-im-unit-panel__subtitle {
	margin: 6px 0 0;
	color: #64748b;
	font-size: 13px;
}

.bds-im-unit-panel__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid #d8e2d7;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--bds-brand-800);
	font-size: 28px;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
	cursor: pointer;
}

.bds-im-unit-panel__close:hover,
.bds-im-unit-panel__close:focus-visible {
	background: var(--bds-brand-50);
	border-color: var(--bds-brand-500);
	color: var(--bds-brand-800);
}

.bds-im-unit-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 22px 28px;
	overscroll-behavior: contain;
}

.bds-im-unit-panel__loading {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #475569;
}

.bds-im-unit-panel__loading .bds-im-viewer-spinner {
	border-color: rgba(15, 23, 42, 0.18);
	border-top-color: #0f172a;
}

.bds-im-unit-panel__error {
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fef2f2;
	color: #991b1b;
	font-size: 13px;
	line-height: 1.5;
}

.bds-im-unit-detail {
	padding-top: 4px;
}

.bds-im-unit-gallery {
	position: relative;
	margin: 16px 0 4px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f1f5f9;
	aspect-ratio: 4 / 3;
}

.bds-im-unit-gallery__viewport {
	position: absolute;
	inset: 0;
}

.bds-im-unit-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	background: #e2e8f0;
}

.bds-im-unit-gallery__slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.bds-im-unit-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	border-radius: 999px !important;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.bds-im-unit-gallery__nav:hover,
.bds-im-unit-gallery__nav:focus-visible,
.bds-im-unit-gallery__nav:active {
	background: rgba(15, 23, 42, 0.88) !important;
	color: #fff !important;
	transform: translateY(-50%) !important;
}

.bds-im-unit-gallery__nav--prev {
	left: 10px;
}

.bds-im-unit-gallery__nav--next {
	right: 10px;
}

.bds-im-unit-gallery__meta {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.bds-im-unit-gallery__dots {
	display: flex;
	align-items: center;
	gap: 5px;
}

.bds-im-unit-gallery__dot {
	width: 7px;
	height: 7px;
	min-width: 7px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.55) !important;
	box-shadow: none !important;
	cursor: pointer;
	pointer-events: auto;
}

.bds-im-unit-gallery__dot:hover,
.bds-im-unit-gallery__dot:focus-visible,
.bds-im-unit-gallery__dot:active,
.bds-im-unit-gallery__dot.is-active {
	width: 18px;
	background: #fff !important;
}

.bds-im-unit-section {
	padding: 18px 0;
	border-bottom: 1px solid #e8efe4;
}

.bds-im-unit-section:last-child {
	border-bottom: 0;
}

.bds-im-unit-section h3 {
	margin: 0 0 12px;
	color: var(--bds-brand-800);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
}

.bds-im-unit-kv {
	display: grid;
	grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.1fr);
	gap: 0;
	margin: 0;
}

.bds-im-unit-kv__label,
.bds-im-unit-kv__value {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px dashed #dce7da;
	font-size: 13px;
	line-height: 1.4;
}

.bds-im-unit-kv__label {
	padding-right: 16px;
	color: #6b7a92;
	font-weight: 600;
}

.bds-im-unit-kv__value {
	color: #111827;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}

.bds-im-unit-prices {
	display: grid;
	gap: 10px;
}

.bds-im-unit-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid #dbe8d8;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,251,247,1) 100%);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
	transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.bds-im-unit-price:hover {
	border-color: rgba(107, 183, 74, 0.6);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(227,235,178,0.34) 100%);
	transform: translateY(-1px);
}

.bds-im-unit-price__label {
	min-width: 0;
	color: #495a68;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

.bds-im-unit-price__value {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.bds-im-unit-price__value strong {
	color: #111827;
	font-size: 17px;
	line-height: 1.2;
}

.bds-im-unit-price__value small {
	margin-top: 3px;
	color: #6b7a92;
	font-size: 10px;
}

@media (max-width: 767px) {
	.bds-im-unit-modal {
		display: flex;
		align-items: flex-end;
	}

	.bds-im-unit-panel {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: min(78svh, 720px);
		max-height: calc(100svh - 20px);
		margin-top: auto;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.24);
		transform: translateY(100%);
	}

	.bds-im-unit-modal.is-open .bds-im-unit-panel {
		transform: translateY(0);
	}

	.bds-im-unit-panel::before {
		content: "";
		width: 44px;
		height: 4px;
		margin: 8px auto -2px;
		border-radius: 999px;
		background: #cbd5e1;
	}

	.bds-im-unit-panel__header {
		padding: 12px 16px 12px;
	}

	.bds-im-unit-panel__body {
		padding: 0 16px 24px;
	}

	.bds-im-unit-panel__title {
		font-size: 24px;
	}

	.bds-im-unit-kv {
		grid-template-columns: minmax(108px, 0.9fr) minmax(0, 1.1fr);
	}
}

@media (max-width: 767px) {
	.bds-im-interest-action {
		min-height: 40px;
		padding: 0 14px;
		font-size: 11px;
	}

	.bds-im-interest-item__zone {
		max-width: 92%;
	}
}

/* ------------------------------------------------------------------
 * Phase 7 — Dynamic Price Engine
 * ------------------------------------------------------------------ */

.bds-im-unit-section__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.bds-im-unit-section__heading h3 {
	margin: 0;
}

.bds-im-unit-section__meta {
	flex: 0 0 auto;
	color: #6b7a92;
	font-size: 11px;
	font-weight: 700;
}

.bds-im-unit-price__info {
	min-width: 0;
	flex: 1 1 auto;
}

.bds-im-unit-price__description {
	margin-top: 4px;
	color: #6b7a92;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.35;
}

.bds-im-unit-price__note {
	display: inline-flex;
	margin-top: 7px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(191, 223, 116, 0.28);
	color: var(--bds-brand-800);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 479px) {
	.bds-im-unit-price {
		align-items: flex-start;
	}

	.bds-im-unit-price__value {
		max-width: 44%;
		text-align: right;
	}
}


/* ------------------------------------------------------------------
 * Phase 8 — Dynamic Attribute Engine
 * ------------------------------------------------------------------ */

.bds-im-unit-attribute-groups {
	display: block;
}

.bds-im-unit-attribute-group:first-child {
	margin-top: 0;
}

.bds-im-unit-attribute-group__list {
	margin: 0;
}


/* ------------------------------------------------------------------
 * Phase 9 — Search + Filter Engine
 * ------------------------------------------------------------------ */

.bds-im-filterbar {
	position: relative;
	z-index: 15;
	border-bottom: 1px solid #e5e7eb;
	background: #fff;
}

.bds-im-filterbar__main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 9px 14px;
}

.bds-im-filter-search {
	position: relative;
	flex: 1 1 320px;
	max-width: 460px;
}

.bds-im-filter-search__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	z-index: 1;
	color: #64748b;
	font-size: 18px;
	transform: translateY(-50%);
	pointer-events: none;
}

.bds-im-filter-search input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 36px !important;
	border: 1px solid #dbe2ea !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 13px;
}

.bds-im-filter-search input:focus {
	border-color: #94a3b8 !important;
	outline: 2px solid rgba(148, 163, 184, 0.18) !important;
}

.bds-im-filter-toggle,
.bds-im-filter-clear {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px !important;
	border: 1px solid #dbe2ea !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: none !important;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.bds-im-filter-toggle:hover,
.bds-im-filter-toggle:focus-visible,
.bds-im-filter-clear:hover,
.bds-im-filter-clear:focus-visible {
	border-color: #94a3b8 !important;
	background: #f8fafc !important;
	color: #0f172a !important;
	transform: none !important;
}

.bds-im-filter-toggle__count {
	min-width: 20px;
	height: 20px;
	display: inline-grid;
	place-items: center;
	padding: 0 5px;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.bds-im-filter-summary {
	flex: 0 1 auto;
	margin-left: auto;
	color: #64748b;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.bds-im-filter-clear {
	color: #475569 !important;
}

.bds-im-filter-panel {
	padding: 4px 14px 14px;
	border-top: 1px solid #eef2f7;
	background: #f8fafc;
}

.bds-im-filter-section {
	padding-top: 12px;
}

.bds-im-filter-section + .bds-im-filter-section {
	margin-top: 12px;
	border-top: 1px solid #e2e8f0;
}

.bds-im-filter-section h3 {
	margin: 0 0 9px;
	color: #334155;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

.bds-im-filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.bds-im-filter-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.bds-im-filter-field__label {
	color: #475569;
	font-size: 11px;
	font-weight: 700;
}

.bds-im-filter-control {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0 10px !important;
	border: 1px solid #dbe2ea !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 12px;
}

.bds-im-filter-control:focus {
	border-color: #94a3b8 !important;
	outline: 2px solid rgba(148, 163, 184, 0.16) !important;
}

.bds-im-filter-range {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
}

.bds-im-filter-range__separator,
.bds-im-filter-range__unit {
	color: #64748b;
	font-size: 11px;
	white-space: nowrap;
}

.bds-im-unit-shape.is-filtered-out {
	fill-opacity: 0.025 !important;
	stroke-opacity: 0.14 !important;
	filter: none !important;
	pointer-events: none !important;
	cursor: default !important;
}

.bds-im-unit-shape.is-filter-match {
	transition:
		fill 140ms ease,
		stroke 140ms ease,
		fill-opacity 140ms ease,
		stroke-opacity 140ms ease;
}

@media (max-width: 900px) {
	.bds-im-filterbar__main {
		flex-wrap: wrap;
	}

	.bds-im-filter-search {
		flex-basis: calc(100% - 100px);
		max-width: none;
	}

	.bds-im-filter-summary {
		order: 4;
		flex: 1 1 100%;
		margin-left: 0;
		padding: 0 2px 2px;
	}

	.bds-im-filter-clear {
		margin-left: auto;
	}
}

@media (max-width: 600px) {
	.bds-im-filterbar__main {
		padding: 8px;
		gap: 7px;
	}

	.bds-im-filter-search {
		flex: 1 1 100%;
	}

	.bds-im-filter-toggle,
	.bds-im-filter-clear {
		min-height: 36px;
	}

	.bds-im-filter-panel {
		padding: 4px 8px 10px;
		max-height: min(52svh, 520px);
		overflow-y: auto;
	}

	.bds-im-filter-grid {
		grid-template-columns: 1fr;
	}

	.bds-im-filter-range {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
	}
}


/* ------------------------------------------------------------------
 * Phase 9.1 — Compact/manual Search + Filter UX hotfix
 * ------------------------------------------------------------------ */

.bds-im-filterbar [hidden] {
	display: none !important;
}

.bds-im-filterbar {
	overflow: visible;
}

.bds-im-filterbar__main {
	min-height: 54px;
	padding: 7px 12px;
}

.bds-im-filter-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	flex: 1 1 420px;
	max-width: 620px;
	overflow: hidden;
	border: 1px solid #dbe2ea;
	border-radius: 9px;
	background: #fff;
}

.bds-im-filter-search__icon {
	left: 11px;
}

.bds-im-filter-search input {
	height: 38px;
	padding: 0 10px 0 35px !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
}

.bds-im-filter-search input:focus {
	border: 0 !important;
	outline: 0 !important;
}

.bds-im-filter-search:focus-within {
	border-color: #94a3b8;
	box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.14);
}

.bds-im-filter-search__button {
	height: 32px;
	margin-right: 4px !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: #0f172a !important;
	color: #fff !important;
	box-shadow: none !important;
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
}

.bds-im-filter-search__button:hover,
.bds-im-filter-search__button:focus-visible,
.bds-im-filter-search__button:active {
	background: #1e293b !important;
	color: #fff !important;
	transform: none !important;
}

.bds-im-filter-search__button:disabled,
.bds-im-filter-panel__apply:disabled {
	opacity: 0.6;
	cursor: wait;
}

.bds-im-filter-panel {
	position: absolute;
	top: calc(100% - 2px);
	left: 12px;
	z-index: 80;
	width: min(860px, calc(100% - 24px));
	max-height: min(68svh, 660px);
	padding: 0;
	overflow: hidden;
	border: 1px solid #dbe2ea;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 52px rgba(15, 23, 42, 0.18);
}

.bds-im-filter-panel__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 14px 11px;
	border-bottom: 1px solid #eef2f7;
}

.bds-im-filter-panel__header strong {
	display: block;
	color: #0f172a;
	font-size: 14px;
	line-height: 1.3;
}

.bds-im-filter-panel__header span {
	display: block;
	margin-top: 2px;
	color: #64748b;
	font-size: 11px;
}

.bds-im-filter-panel__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0 !important;
	border: 1px solid #dbe2ea !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: none !important;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}

.bds-im-filter-panel__close:hover,
.bds-im-filter-panel__close:focus-visible {
	background: #f8fafc !important;
	color: #0f172a !important;
	transform: none !important;
}

.bds-im-filter-panel__body {
	max-height: calc(min(68svh, 660px) - 112px);
	padding: 10px 14px 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bds-im-filter-section {
	padding-top: 4px;
}

.bds-im-filter-section + .bds-im-filter-section {
	margin-top: 10px;
	padding-top: 10px;
}

.bds-im-filter-section h3 {
	margin-bottom: 7px;
}

.bds-im-filter-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 10px;
}

.bds-im-filter-field {
	gap: 4px;
}

.bds-im-filter-field__label {
	font-size: 10.5px;
}

.bds-im-filter-control {
	height: 34px;
	padding-inline: 9px !important;
	font-size: 11.5px;
}

.bds-im-filter-panel__footer {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid #eef2f7;
	background: #fff;
}

.bds-im-filter-panel__reset,
.bds-im-filter-panel__apply {
	min-height: 36px;
	padding: 0 14px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
}

.bds-im-filter-panel__reset {
	border: 1px solid #dbe2ea !important;
	background: #fff !important;
	color: #334155 !important;
}

.bds-im-filter-panel__apply {
	border: 1px solid #0f172a !important;
	background: #0f172a !important;
	color: #fff !important;
}

.bds-im-filter-panel__reset:hover,
.bds-im-filter-panel__reset:focus-visible {
	background: #f8fafc !important;
	color: #334155 !important;
	transform: none !important;
}

.bds-im-filter-panel__apply:hover,
.bds-im-filter-panel__apply:focus-visible {
	background: #1e293b !important;
	color: #fff !important;
	transform: none !important;
}

@media (max-width: 900px) {
	.bds-im-filter-search {
		flex: 1 1 calc(100% - 105px);
		max-width: none;
	}

	.bds-im-filter-panel {
		left: 8px;
		width: calc(100% - 16px);
	}

	.bds-im-filter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bds-im-filterbar__main {
		padding: 7px 8px;
	}

	.bds-im-filter-search {
		flex: 1 1 100%;
	}

	.bds-im-filter-summary {
		order: 4;
	}

	.bds-im-filter-panel {
		top: calc(100% - 1px);
		left: 6px;
		width: calc(100% - 12px);
		max-height: min(72svh, 620px);
		border-radius: 10px;
	}

	.bds-im-filter-panel__body {
		max-height: calc(min(72svh, 620px) - 112px);
		padding: 9px 10px 12px;
	}

	.bds-im-filter-grid {
		grid-template-columns: 1fr;
	}

	.bds-im-filter-panel__footer {
		padding: 9px 10px;
	}

	.bds-im-filter-panel__reset,
	.bds-im-filter-panel__apply {
		flex: 1 1 auto;
	}
}


/* ------------------------------------------------------------------
 * Phase 10 — Status / Color Engine legend
 * ------------------------------------------------------------------ */

.bds-im-status-legend {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 32;
	max-width: min(620px, calc(100% - 220px));
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.66);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.92);
	color: #0f172a;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	pointer-events: none;
}

.bds-im-status-legend__title {
	margin-bottom: 5px;
	color: #475569;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.bds-im-status-legend__items {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 11px;
}

.bds-im-status-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 10.5px;
	font-weight: 650;
	line-height: 1.25;
	transition: opacity 140ms ease;
}

.bds-im-status-legend__item.is-zero {
	opacity: 0.36;
}

.bds-im-status-legend__swatch {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 3px;
	background: var(--bds-im-status-swatch, #2563eb);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.bds-im-status-legend__label {
	white-space: nowrap;
}

.bds-im-status-legend__count {
	min-width: 16px;
	height: 16px;
	display: inline-grid;
	place-items: center;
	padding: 0 4px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
}

@media (max-width: 760px) {
	.bds-im-status-legend {
		left: 8px;
		right: 8px;
		bottom: max(8px, env(safe-area-inset-bottom));
		max-width: none;
		padding: 7px 8px;
		overflow-x: auto;
		overflow-y: hidden;
		pointer-events: auto;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;
	}

	.bds-im-status-legend__title {
		display: none;
	}

	.bds-im-status-legend__items {
		flex-wrap: nowrap;
		width: max-content;
		min-width: max-content;
	}

	.bds-im-status-legend__item {
		font-size: 9.5px;
		gap: 4px;
	}

	.bds-im-status-legend__count {
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
	}
}


/* ------------------------------------------------------------------
 * Phase 10.1 — Mobile Filter / Status Legend stacking hotfix
 *
 * Filter Panel lives inside .bds-im-filterbar. In Phase 10.0 the filterbar
 * stacking context was z-index:15 while Status Legend was z-index:32.
 * A child z-index cannot escape its parent stacking context, therefore the
 * legend could paint above the open filter panel on mobile.
 * ------------------------------------------------------------------ */

/* Raise the complete filter stacking context only while the panel is open. */
.bds-im-filterbar.is-panel-open {
	z-index: 120;
}

/*
 * While users are editing filters the status legend is secondary information.
 * Hide it temporarily instead of allowing two floating UI layers to compete.
 * The legend automatically returns as soon as the filter panel closes.
 */
.bds-im-filterbar.is-panel-open ~ .bds-im-viewer-stage .bds-im-status-legend {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

/* Give the transition a small visual polish when the legend returns. */
.bds-im-status-legend {
	transition:
		opacity 140ms ease,
		visibility 140ms ease,
		transform 140ms ease;
}

/*
 * Mobile: keep the filter panel clearly above every OpenSeadragon/status
 * overlay, and constrain its scrollable body so the footer never collides
 * with the Viewer legend or browser chrome.
 */
@media (max-width: 760px) {
	.bds-im-filterbar.is-panel-open {
		z-index: 1000;
	}

	.bds-im-filter-panel {
		z-index: 1001;
		max-height: min(74dvh, 640px);
		max-height: min(74svh, 640px);
	}

	.bds-im-filter-panel__body {
		max-height: calc(min(74dvh, 640px) - 112px);
		max-height: calc(min(74svh, 640px) - 112px);
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Explicit mobile rule in addition to the sibling selector above.
	 * This also protects themes/page-builders that introduce extra stacking
	 * contexts around the Viewer.
	 */
	.bds-im-filterbar.is-panel-open ~ .bds-im-viewer-stage .bds-im-status-legend {
		display: none;
	}
}


/* ------------------------------------------------------------------
 * Phase 10.2 — Mobile Filter Visual Viewport / Footer Hotfix
 *
 * Phase 10.1 solved z-index overlap, but the mobile panel was still
 * positioned below the toolbar and then given a viewport-based max-height.
 * Therefore:
 *
 *     panel top offset + 74svh > visible viewport
 *
 * and the footer could fall below Safari's visible area.
 *
 * Phase 10.2 converts ONLY the mobile filter into a fixed viewport sheet.
 * Header/footer stay visible; the middle body owns vertical scrolling.
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {
	.bds-im-filterbar.is-panel-open {
		z-index: 2000;
	}

	.bds-im-filter-panel {
		/*
		 * Override Phase 9/10 absolute popover geometry.
		 * `fixed` is relative to the mobile visual viewport in modern Safari.
		 */
		position: fixed;
		top: max(8px, env(safe-area-inset-top));
		right: 8px;
		bottom: max(8px, env(safe-area-inset-bottom));
		left: 8px;

		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;

		display: flex;
		flex-direction: column;

		border-radius: 12px;
		overflow: hidden;
		z-index: 2001;

		/*
		 * Prevent the page/Viewer behind the sheet from receiving vertical
		 * overscroll while the user scrolls the filter fields.
		 */
		overscroll-behavior: contain;
	}

	.bds-im-filter-panel[hidden] {
		display: none !important;
	}

	.bds-im-filter-panel__header {
		position: relative;
		flex: 0 0 auto;
		padding: 12px 12px 10px;
		background: #fff;
		z-index: 2;
	}

	.bds-im-filter-panel__body {
		/*
		 * Critical fix:
		 * let flexbox calculate the remaining viewport height.
		 * Never use another dvh/svh max-height here.
		 */
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		padding: 10px 12px 14px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}

	.bds-im-filter-panel__footer {
		position: relative;
		bottom: auto;
		flex: 0 0 auto;
		z-index: 3;

		padding:
			10px
			12px
			max(10px, env(safe-area-inset-bottom));

		border-top: 1px solid #e2e8f0;
		background: #fff;
		box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
	}

	.bds-im-filter-panel__reset,
	.bds-im-filter-panel__apply {
		min-height: 44px;
	}

	/*
	 * The Status Legend must not participate visually while the fixed mobile
	 * filter sheet is open.
	 */
	.bds-im-filterbar.is-panel-open
	~ .bds-im-viewer-stage
	.bds-im-status-legend {
		display: none !important;
	}
}

/*
 * Extra narrow iPhone widths: give action buttons enough room without
 * making the sheet wider than the viewport.
 */
@media (max-width: 390px) {
	.bds-im-filter-panel {
		top: max(6px, env(safe-area-inset-top));
		right: 6px;
		bottom: max(6px, env(safe-area-inset-bottom));
		left: 6px;
	}

	.bds-im-filter-panel__footer {
		gap: 7px;
		padding-left: 9px;
		padding-right: 9px;
	}

	.bds-im-filter-panel__reset,
	.bds-im-filter-panel__apply {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 11.5px;
	}
}


/* ------------------------------------------------------------------
 * Phase 10.3 — TRUE mobile portal + Safari VisualViewport
 *
 * `.is-mobile-portal` is appended directly to <body>.
 * All geometry uses JS VisualViewport variables so this cannot be trapped by
 * Elementor/theme transform/filter/contain ancestors.
 * ------------------------------------------------------------------ */

.bds-im-filter-mobile-backdrop {
	position: fixed !important;
	left: var(--bds-im-mobile-vv-left, 0px) !important;
	top: var(--bds-im-mobile-vv-top, 0px) !important;
	width: var(--bds-im-mobile-vv-width, 100vw) !important;
	height: var(--bds-im-mobile-vv-height, 100vh) !important;
	z-index: 2147483000 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(15, 23, 42, 0.18);
	touch-action: none;
	overscroll-behavior: none;
}

.bds-im-filter-panel.is-mobile-portal {
	position: fixed !important;

	left: var(--bds-im-mobile-sheet-left, 8px) !important;
	top: var(--bds-im-mobile-sheet-top, 8px) !important;
	right: auto !important;
	bottom: auto !important;

	width: var(--bds-im-mobile-sheet-width, calc(100vw - 16px)) !important;
	height: var(--bds-im-mobile-sheet-height, calc(100vh - 16px)) !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;

	display: flex !important;
	flex-direction: column !important;

	margin: 0 !important;
	padding: 0 !important;

	z-index: 2147483001 !important;

	border: 1px solid #dbe2ea !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 24px 72px rgba(15, 23, 42, 0.30) !important;

	overflow: hidden !important;
	transform: none !important;
	filter: none !important;
	contain: none !important;

	touch-action: manipulation;
	overscroll-behavior: contain;
}

.bds-im-filter-panel.is-mobile-portal[hidden] {
	display: none !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header {
	position: relative !important;
	inset: auto !important;
	flex: 0 0 auto !important;
	min-height: 0 !important;
	background: #fff !important;
	z-index: 3 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__body {
	position: relative !important;
	inset: auto !important;

	flex: 1 1 0% !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;

	overflow-x: hidden !important;
	overflow-y: auto !important;

	touch-action: pan-y !important;
	overscroll-behavior-y: contain !important;
	-webkit-overflow-scrolling: touch !important;

	scrollbar-gutter: stable;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__footer {
	position: relative !important;
	inset: auto !important;

	flex: 0 0 auto !important;
	min-height: 0 !important;

	background: #fff !important;
	z-index: 4 !important;

	padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

/*
 * Prevent theme/body touch rules from blocking the scrollable middle section.
 * The page itself stays locked, while the sheet body remains pan-y.
 */
html.bds-im-filter-sheet-open,
body.bds-im-filter-sheet-open {
	overscroll-behavior: none !important;
}

body.bds-im-filter-sheet-open {
	touch-action: none !important;
}

body.bds-im-filter-sheet-open
.bds-im-filter-panel.is-mobile-portal
.bds-im-filter-panel__body {
	touch-action: pan-y !important;
}

/* Mobile portal owns the mobile geometry; neutralize older mobile popover rules. */
@media (max-width: 760px) {
	body > .bds-im-filter-panel.is-mobile-portal {
		position: fixed !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-grid {
		grid-template-columns: 1fr !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset,
	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply {
		min-height: 44px !important;
	}
}


/* ------------------------------------------------------------------
 * Phase 11 — Release / Inventory Visibility Engine
 * ------------------------------------------------------------------ */

.bds-im-release-chip {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
	padding: 4px 8px;
	border: 1px solid #dbe2ea;
	border-radius: 999px;
	background: #f8fafc;
	color: #334155;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
}

.bds-im-release-chip__dot {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}

.bds-im-release-chip small {
	color: #64748b;
	font-size: 9px;
	font-weight: 650;
}

/*
 * Release visibility is stronger than Search/Filter visibility.
 * Geometry remains mounted so masterplan mapping never shifts, but inventory
 * that is not disclosed in the resolved Release cannot be clicked/focused.
 */
.bds-im-unit-shape.is-release-hidden {
	fill-opacity: 0.015 !important;
	stroke-opacity: 0.10 !important;
	filter: none !important;
	pointer-events: none !important;
	cursor: default !important;
}

.bds-im-unit-shape.is-release-hidden.is-filter-match {
	fill-opacity: 0.015 !important;
	stroke-opacity: 0.10 !important;
	pointer-events: none !important;
}

@media (max-width: 760px) {
	.bds-im-release-chip {
		max-width: 100%;
		font-size: 9.5px;
	}
}


/* ------------------------------------------------------------------
 * Phase 13 — ACF Pro CMS content
 * ------------------------------------------------------------------ */
.bds-im-unit-cms[hidden] {
	display: none !important;
}

.bds-im-unit-richtext {
	color: #334155;
	font-size: 13px;
	line-height: 1.65;
}

.bds-im-unit-richtext > :first-child {
	margin-top: 0;
}

.bds-im-unit-richtext > :last-child {
	margin-bottom: 0;
}

.bds-im-unit-richtext p,
.bds-im-unit-richtext ul,
.bds-im-unit-richtext ol {
	margin: 0 0 10px;
}

.bds-im-unit-richtext ul,
.bds-im-unit-richtext ol {
	padding-left: 20px;
}

.bds-im-unit-richtext a {
	color: #0369a1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bds-im-unit-content-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.bds-im-unit-content-action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 12px;
	border: 1px solid #dbe3ed;
	border-radius: 10px;
	background: #f8fafc;
	color: #0f172a;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.bds-im-unit-content-action:hover,
.bds-im-unit-content-action:focus-visible {
	border-color: #94a3b8;
	background: #f1f5f9;
	color: #0f172a;
}

.bds-im-unit-content-action.is-video::before {
	content: '▶';
	margin-right: 7px;
	font-size: 10px;
}

.bds-im-unit-content-action.is-document::before {
	content: 'PDF';
	margin-right: 7px;
	padding: 2px 4px;
	border-radius: 4px;
	background: #fee2e2;
	color: #991b1b;
	font-size: 9px;
	font-weight: 800;
}

@media (max-width: 520px) {
	.bds-im-unit-content-actions {
		grid-template-columns: 1fr;
	}
}


/* ------------------------------------------------------------------
 * Phase 13.2 — On-site Video / PDF viewer
 * Keeps visitors inside the masterplan experience.
 * ------------------------------------------------------------------ */

.bds-im-media-modal[hidden] {
	display: none !important;
}

.bds-im-media-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483200;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}

.bds-im-media-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.bds-im-media-modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: rgba(2, 6, 23, 0.78) !important;
	color: transparent !important;
	cursor: default;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.bds-im-media-modal__backdrop:hover,
.bds-im-media-modal__backdrop:focus,
.bds-im-media-modal__backdrop:active {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	background: rgba(2, 6, 23, 0.78) !important;
	color: transparent !important;
}

.bds-im-media-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1180px, calc(100vw - 48px));
	height: min(90dvh, 900px);
	height: min(90vh, 900px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 28px 90px rgba(2, 6, 23, .42);
	transform: translate(-50%, -48%) scale(.985);
	transition: transform 200ms ease;
	outline: none;
}

.bds-im-media-modal.is-open .bds-im-media-dialog {
	transform: translate(-50%, -50%) scale(1);
}

.bds-im-media-modal[data-media-kind="pdf"] .bds-im-media-dialog {
	width: min(1440px, calc(100vw - 32px));
	height: min(94dvh, 1050px);
	height: min(94vh, 1050px);
}

.bds-im-media-modal[data-media-kind="video"] .bds-im-media-dialog {
	height: auto;
	max-height: 94dvh;
	max-height: 94vh;
}

.bds-im-media-dialog__header {
	flex: 0 0 auto;
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px 10px 18px;
	border-bottom: 1px solid #e2e8f0;
	background: #fff;
}

.bds-im-media-dialog__heading {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bds-im-media-dialog__heading strong {
	min-width: 0;
	overflow: hidden;
	color: #0f172a;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bds-im-media-dialog__type {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3730a3;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
}

.bds-im-media-dialog__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: #0f172a;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.bds-im-media-dialog__close:hover,
.bds-im-media-dialog__close:focus-visible {
	border-color: #cbd5e1;
	background: #f8fafc;
	color: #0f172a;
}

.bds-im-media-dialog__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	overflow: hidden;
	background: #0f172a;
}

.bds-im-media-stage {
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bds-im-media-modal[data-media-kind="video"] .bds-im-media-stage {
	padding: 16px;
	box-sizing: border-box;
}

.bds-im-media-video-frame,
.bds-im-media-video {
	width: 100%;
	max-width: 1120px;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
	border-radius: 10px;
	background: #000;
}

.bds-im-media-modal.is-portrait-video .bds-im-media-video-frame,
.bds-im-media-modal.is-portrait-video .bds-im-media-video {
	width: auto;
	height: min(78dvh, 760px);
	height: min(78vh, 760px);
	max-width: 100%;
	aspect-ratio: 9 / 16;
}

.bds-im-media-pdf-frame {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: #0f172a;
}

.bds-im-media-loading {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #0f172a;
	color: #e2e8f0;
	font-size: 13px;
}

.bds-im-media-loading .bds-im-viewer-spinner {
	border-color: rgba(255,255,255,.22);
	border-top-color: #fff;
}

.bds-im-media-error {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: 28px;
	box-sizing: border-box;
	background: #0f172a;
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

.bds-im-media-dialog__footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-top: 1px solid #e2e8f0;
	background: #fff;
}

.bds-im-media-back {
	min-height: 36px;
	padding: 7px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.bds-im-media-back:hover,
.bds-im-media-back:focus-visible {
	background: #f1f5f9;
	color: #0f172a;
}

/* Buttons, not external anchors anymore. */
button.bds-im-unit-content-action {
	width: 100%;
	cursor: pointer;
	font-family: inherit;
}

/* Full-screen mobile sheet for reliable iOS/Android behavior. */
@media (max-width: 760px) {
	.bds-im-media-modal__backdrop {
		display: none !important;
	}

	.bds-im-media-dialog,
	.bds-im-media-modal[data-media-kind="pdf"] .bds-im-media-dialog,
	.bds-im-media-modal[data-media-kind="video"] .bds-im-media-dialog {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border: 0;
		border-radius: 0;
		transform: translateY(12px);
	}

	.bds-im-media-modal.is-open .bds-im-media-dialog {
		transform: translateY(0);
	}

	.bds-im-media-dialog__header {
		min-height: 54px;
		padding:
			max(8px, env(safe-area-inset-top))
			10px
			8px
			14px;
	}

	.bds-im-media-dialog__footer {
		padding:
			8px
			12px
			max(8px, env(safe-area-inset-bottom));
	}

	.bds-im-media-modal[data-media-kind="video"] .bds-im-media-stage {
		padding: 10px;
	}

	.bds-im-media-video-frame,
	.bds-im-media-video {
		width: 100%;
		max-width: none;
	}

	.bds-im-media-modal.is-portrait-video .bds-im-media-video-frame,
	.bds-im-media-modal.is-portrait-video .bds-im-media-video {
		width: auto;
		height: min(
			76dvh,
			calc(100dvh - 130px)
		);
		max-width: 100%;
	}
}


/* Phase 13.3 — document hierarchy in Unit popup */
.bds-im-document-group {
	margin-top: 14px;
}

.bds-im-document-group:first-of-type {
	margin-top: 10px;
}

.bds-im-document-group__title {
	margin: 0 0 8px;
	color: #64748b;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bds-im-document-group + .bds-im-document-group {
	padding-top: 12px;
	border-top: 1px solid #edf2f7;
}

@media (max-width: 760px) {
	.bds-im-document-group {
		margin-top: 12px;
	}

	.bds-im-document-group__title {
		font-size: 10px;
	}
}





/* Phase 13.10 — PDF fullscreen fallback for mobile browsers. */
.bds-im-media-modal.is-pdf-pseudo-fullscreen {
	z-index: 2147483646;
}

.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-dialog {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-width: none !important;
	max-height: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-dialog__header,
.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-dialog__footer {
	display: none !important;
}

.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-dialog__body,
.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-stage,
.bds-im-media-modal.is-pdf-pseudo-fullscreen .bds-im-media-pdf-frame {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}

/* ------------------------------------------------------------------
 * Phase 13.20 — Product popup typography + adaptive mixed-ratio gallery
 * ------------------------------------------------------------------ */
.bds-im-unit-modal,
.bds-im-media-modal {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bds-im-unit-panel,
.bds-im-unit-panel button,
.bds-im-unit-panel input,
.bds-im-unit-panel select,
.bds-im-unit-panel textarea,
.bds-im-unit-panel h1,
.bds-im-unit-panel h2,
.bds-im-unit-panel h3,
.bds-im-unit-panel h4,
.bds-im-unit-panel p,
.bds-im-unit-panel dt,
.bds-im-unit-panel dd,
.bds-im-unit-panel strong,
.bds-im-unit-panel small,
.bds-im-unit-panel span {
	font-family: inherit !important;
}

.bds-im-unit-panel {
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: .006em;
}

.bds-im-unit-panel__title {
	letter-spacing: -.025em;
	line-height: 1.18;
}

.bds-im-unit-panel__subtitle {
	line-height: 1.55;
	letter-spacing: .012em;
}

.bds-im-unit-section {
	padding: 22px 0;
}

.bds-im-unit-section h3,
.bds-im-unit-section__heading h3 {
	margin: 0 0 15px;
	font-size: 15px;
	font-weight: 750;
	line-height: 1.45;
	letter-spacing: .005em;
}

.bds-im-unit-section__heading {
	align-items: center;
	margin-bottom: 15px;
}

.bds-im-unit-section__heading h3 {
	margin-bottom: 0;
}

.bds-im-unit-kv__label,
.bds-im-unit-kv__value {
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: .004em;
}

.bds-im-unit-price {
	padding: 14px 15px;
}

.bds-im-unit-price__label {
	line-height: 1.5;
	letter-spacing: .004em;
}

.bds-im-unit-gallery {
	aspect-ratio: auto;
	height: var(--bds-im-gallery-height, clamp(240px, 44vh, 460px));
	min-height: 180px;
	max-height: min(58vh, 560px);
	background: #f8fafc;
	transition: height 180ms ease;
}

.bds-im-unit-gallery__slide {
	background: #f8fafc;
}

.bds-im-unit-gallery__slide img {
	object-fit: contain;
	object-position: center center;
	background: #f8fafc;
}

@media (max-width: 767px) {
	.bds-im-unit-panel {
		font-size: 14px;
		line-height: 1.58;
	}

	.bds-im-unit-section {
		padding: 20px 0;
	}

	.bds-im-unit-section h3,
	.bds-im-unit-section__heading h3 {
		font-size: 15px;
		line-height: 1.45;
	}

	.bds-im-unit-kv__label,
	.bds-im-unit-kv__value {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 1.5;
	}

	.bds-im-unit-gallery {
		height: var(--bds-im-gallery-height, min(46dvh, 420px));
		max-height: min(54dvh, 500px);
	}
}

/* ------------------------------------------------------------------
 * Phase 13.21 — Product Gallery Image Viewer
 * Gallery stays compact; customers can open a dedicated responsive
 * lightbox to inspect floorplans/renderings without leaving the unit.
 * ------------------------------------------------------------------ */

.bds-im-unit-gallery__slide {
	cursor: zoom-in;
	outline: none;
}

.bds-im-unit-gallery__slide:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(15, 23, 42, .28);
}

.bds-im-unit-gallery__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .46);
	border-radius: 12px;
	background: rgba(15, 23, 42, .76);
	box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.bds-im-unit-gallery__expand:hover,
.bds-im-unit-gallery__expand:focus-visible {
	border-color: rgba(255, 255, 255, .72);
	background: rgba(15, 23, 42, .92);
	color: #fff;
	transform: none;
}

.bds-im-media-modal[data-media-kind="image"] .bds-im-media-dialog {
	width: min(1440px, calc(100vw - 32px));
	height: min(94dvh, 1050px);
	height: min(94vh, 1050px);
}

.bds-im-media-modal[data-media-kind="image"] .bds-im-media-stage {
	position: relative;
	padding: 0;
	background: #0b1220;
	overflow: hidden;
}

.bds-im-image-viewer {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	display: block;
	overflow: hidden;
	background:
		radial-gradient(circle at center, rgba(51, 65, 85, .62), rgba(15, 23, 42, .96));
}

.bds-im-image-viewer__canvas {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 76px 86px;
	box-sizing: border-box;
	overflow: hidden;
	cursor: zoom-in;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.bds-im-image-viewer__canvas.is-zoomed {
	cursor: grab;
}

.bds-im-image-viewer__canvas.is-zoomed:active {
	cursor: grabbing;
}

.bds-im-image-viewer__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
	box-shadow: 0 18px 52px rgba(2, 6, 23, .34);
	transform-origin: center center;
	will-change: transform;
	transition: transform 100ms ease-out;
	pointer-events: none;
}

.bds-im-image-viewer__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0 0 4px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(15, 23, 42, .78);
	box-shadow: 0 10px 30px rgba(2, 6, 23, .26);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 38px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.bds-im-image-viewer__nav--prev {
	left: 16px;
}

.bds-im-image-viewer__nav--next {
	right: 16px;
}

.bds-im-image-viewer__nav:hover,
.bds-im-image-viewer__nav:focus-visible {
	background: rgba(30, 41, 59, .98);
	color: #fff;
	transform: translateY(-50%);
}

.bds-im-image-viewer__toolbar {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: calc(100% - 32px);
	padding: 7px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	background: rgba(15, 23, 42, .86);
	box-shadow: 0 12px 34px rgba(2, 6, 23, .3);
	transform: translateX(-50%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.bds-im-image-viewer__counter {
	min-width: 54px;
	padding: 0 8px;
	color: #e2e8f0;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
}

.bds-im-image-viewer__tool {
	min-width: 40px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 9px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: inherit;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.bds-im-image-viewer__tool--reset {
	min-width: 86px;
	font-size: 12px;
}

.bds-im-image-viewer__tool:hover,
.bds-im-image-viewer__tool:focus-visible {
	border-color: rgba(255, 255, 255, .34);
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.bds-im-image-viewer__tool:disabled {
	opacity: .38;
	cursor: default;
}

@media (max-width: 760px) {
	.bds-im-media-modal[data-media-kind="image"] .bds-im-media-dialog {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	.bds-im-image-viewer__canvas {
		padding:
			12px
			12px
			calc(82px + env(safe-area-inset-bottom));
	}

	.bds-im-image-viewer__nav {
		top: auto;
		bottom: calc(18px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
		font-size: 32px;
		transform: none;
	}

	.bds-im-image-viewer__nav--prev {
		left: 10px;
	}

	.bds-im-image-viewer__nav--next {
		right: 10px;
	}

	.bds-im-image-viewer__nav:hover,
	.bds-im-image-viewer__nav:focus-visible {
		transform: none;
	}

	.bds-im-image-viewer__toolbar {
		bottom: calc(18px + env(safe-area-inset-bottom));
		gap: 5px;
		max-width: calc(100% - 118px);
		padding: 5px;
	}

	.bds-im-image-viewer__counter {
		min-width: 46px;
		padding: 0 4px;
		font-size: 11px;
	}

	.bds-im-image-viewer__tool {
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
		font-size: 19px;
	}

	.bds-im-image-viewer__tool--reset {
		min-width: 50px;
		font-size: 0;
	}

	.bds-im-image-viewer__tool--reset::after {
		content: '1:1';
		font-size: 11px;
		font-weight: 800;
	}

	.bds-im-unit-gallery__expand {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}
}


/* 0.13.22 — final UI/pinch polish */
.bds-im-image-viewer__canvas.is-interacting .bds-im-image-viewer__image {
	transition: none;
}


/* Phase 13.29.5 — always-visible exit control for OpenSeadragon full-page/fullscreen. */
.bds-im-viewer-fullpage-exit {
	position: fixed !important;
	top: max(14px, env(safe-area-inset-top)) !important;
	right: max(14px, env(safe-area-inset-right)) !important;
	z-index: 2147483647 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 8px 28px rgba(15, 23, 42, .22);
	color: #0f172a;
	font: 400 34px/1 Arial, sans-serif;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.bds-im-viewer-fullpage-exit[hidden] {
	display: none !important;
}

.bds-im-viewer-fullpage-exit.is-visible {
	display: inline-flex !important;
}

.bds-im-viewer-fullpage-exit:hover,
.bds-im-viewer-fullpage-exit:focus-visible {
	background: #fff;
	outline: 2px solid rgba(37, 99, 235, .35);
	outline-offset: 2px;
}

@media (max-width: 782px) {
	.bds-im-viewer-fullpage-exit {
		top: max(12px, env(safe-area-inset-top)) !important;
		right: max(12px, env(safe-area-inset-right)) !important;
		width: 44px;
		height: 44px;
		border-radius: 13px;
		font-size: 31px;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.15 — Desktop viewport frame hotfix
 *
 * Scope is intentionally narrow:
 * - desktop application frame only
 * - viewport-safe width / height
 * - no horizontal overflow from the full-width breakout
 * - Viewer Stage consumes the remaining app height
 *
 * Search/filter controls, floating layers and mobile UI are deliberately
 * untouched so the next UI hotfixes can be tested/rolled back independently.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-viewer-shell {
		--bds-im-shell-gutter: clamp(12px, 1.15vw, 20px);

		/* Treat the masterplan as one viewport-contained application. */
		display: grid;
		width: 100%;
		height: clamp(620px, 92dvh, 1120px);
		max-height: calc(100dvh - 24px);
		min-height: 0;
		margin-top: 12px;
		margin-bottom: 12px;
		overflow: hidden;
	}

	.bds-im-viewer-shell[data-filters-enabled="1"] {
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}

	.bds-im-viewer-shell[data-filters-enabled="0"] {
		grid-template-rows: auto minmax(0, 1fr) auto;
	}

	/*
	 * Break out of Elementor/theme content columns, but always stay inside the
	 * real browser viewport with a safe gutter on both sides.
	 */
	.bds-im-viewer-shell--full {
		left: 50%;
		width: calc(100vw - (var(--bds-im-shell-gutter) * 2));
		max-width: calc(100vw - (var(--bds-im-shell-gutter) * 2));
		transform: translateX(-50%);
	}

	/* Prevent any child flex/grid content from forcing the app wider. */
	.bds-im-viewer-shell > *,
	.bds-im-viewer-header,
	.bds-im-filterbar,
	.bds-im-filterbar__main,
	.bds-im-viewer-footer,
	.bds-im-viewer-stage,
	.bds-im-viewer {
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * Critical part of the hotfix: Stage no longer owns a viewport-based fixed
	 * height. Grid gives it exactly the remaining height after header/filter/
	 * footer, so the complete application stays inside the screen.
	 */
	.bds-im-viewer-stage {
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.bds-im-viewer {
		height: 100%;
		min-height: 0;
	}

	/* Long result text must shrink instead of widening the whole application. */
	.bds-im-filter-summary {
		min-width: 0;
		max-width: min(34vw, 420px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Common 1366px-class laptops: slightly tighter safe gutter only. */
@media (min-width: 992px) and (max-width: 1439px) {
	.bds-im-viewer-shell {
		--bds-im-shell-gutter: 12px;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.16 — Desktop viewport height ratio hotfix
 *
 * Width behavior from v1.14.2.15 is preserved. The desktop application frame
 * now follows the browser viewport proportionally instead of using a fixed
 * pixel clamp. One viewport-percent gutter is reserved above and below, so
 * the complete Masterplan app occupies ~98% of the visible desktop height.
 * Viewer Stage continues to consume the remaining grid row automatically.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-viewer-shell {
		/* Fallback chain for browsers with different viewport-unit support. */
		height: 98vh;
		height: 98svh;
		height: 98dvh;
		min-height: 0;
		max-height: none;

		/* 1% viewport gutter top + bottom => total frame remains ~100%. */
		margin-top: 1vh;
		margin-bottom: 1vh;
		margin-top: 1svh;
		margin-bottom: 1svh;
		margin-top: 1dvh;
		margin-bottom: 1dvh;
	}

	.bds-im-viewer-stage,
	.bds-im-viewer {
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.17 — Hotfix 2: Thanh công cụ desktop
 *
 * Phạm vi:
 * - Gom nhận diện Dự án/Phân khu + tìm kiếm + Bộ lọc + chế độ giá + Chú giải
 *   + vị trí Căn quan tâm lên một hàng trên desktop.
 * - Giữ nguyên Filter Engine và panel Bộ lọc hiện tại.
 * - Thu hồi hàng Header cũ để Viewer tự nhận thêm chiều cao còn trống.
 * - Không thay đổi badge giá, panel nổi, minimap hay bố cục mobile.
 * ------------------------------------------------------------------ */

.bds-im-toolbar-project,
.bds-im-toolbar-tools {
	display: none;
}

.bds-im-toolbar-icon,
.bds-im-toolbar-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.bds-im-toolbar-icon {
	width: 17px;
	height: 17px;
}

.bds-im-toolbar-chevron {
	width: 14px;
	height: 14px;
}

.bds-im-toolbar-icon svg,
.bds-im-toolbar-chevron svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bds-im-status-legend.is-toolbar-hidden {
	display: none !important;
}

@media (min-width: 992px) {
	/* Header cũ được thay bằng toolbar duy nhất. Mobile vẫn giữ Header cũ. */
	.bds-im-viewer-shell[data-filters-enabled="1"] .bds-im-viewer-header {
		display: none;
	}

	.bds-im-viewer-shell[data-filters-enabled="1"],
	.bds-im-viewer-shell[data-filters-enabled="0"] {
		grid-template-rows: auto minmax(0, 1fr) auto;
	}

	.bds-im-filterbar {
		z-index: 80;
		border-bottom: 1px solid #e2e8f0;
		background: rgba(255, 255, 255, 0.98);
	}

	.bds-im-filterbar__main {
		display: grid;
		grid-template-columns:
			minmax(225px, 280px)
			minmax(300px, 1fr)
			auto
			auto
			minmax(92px, auto);
		align-items: center;
		gap: 9px;
		min-height: 64px;
		padding: 8px 12px;
	}

	.bds-im-toolbar-project {
		display: block;
		min-width: 0;
	}

	.bds-im-zone-switcher {
		position: relative;
		min-width: 0;
	}

	.bds-im-zone-switcher > summary {
		list-style: none;
	}

	.bds-im-zone-switcher > summary::-webkit-details-marker {
		display: none;
	}

	.bds-im-zone-switcher__summary {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr) 14px;
		align-items: center;
		gap: 9px;
		min-height: 46px;
		padding: 5px 10px 5px 7px;
		border: 1px solid #dbe2ea;
		border-radius: 11px;
		background: #fff;
		color: #0f172a;
		cursor: pointer;
		user-select: none;
	}

	.bds-im-zone-switcher__summary > .bds-im-toolbar-icon {
		width: 34px;
		height: 34px;
		padding: 8px;
		border-radius: 9px;
		background: #f1f5f9;
		color: #334155;
	}

	.bds-im-toolbar-project__text {
		display: block;
		min-width: 0;
		line-height: 1.15;
	}

	.bds-im-toolbar-project__text strong,
	.bds-im-toolbar-project__text small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bds-im-toolbar-project__text strong {
		font-size: 12px;
		font-weight: 800;
		color: #172033;
	}

	.bds-im-toolbar-project__text small {
		margin-top: 3px;
		font-size: 10px;
		font-weight: 600;
		color: #64748b;
	}

	.bds-im-zone-switcher__summary:hover,
	.bds-im-zone-switcher__summary:focus-visible {
		border-color: #94a3b8;
		background: #f8fafc;
		outline: none;
	}

	.bds-im-zone-switcher[open] .bds-im-toolbar-chevron {
		transform: rotate(180deg);
	}

	.bds-im-zone-switcher__menu {
		position: absolute;
		top: calc(100% + 7px);
		left: 0;
		z-index: 180;
		width: min(330px, 70vw);
		max-height: min(58dvh, 480px);
		overflow: auto;
		padding: 7px;
		border: 1px solid #dbe2ea;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
	}

	.bds-im-zone-switcher__heading {
		padding: 7px 9px 9px;
		color: #64748b;
		font-size: 10px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.bds-im-zone-switcher__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 40px;
		padding: 8px 10px;
		border-radius: 9px;
		color: #172033;
		font-size: 12px;
		font-weight: 700;
		text-decoration: none;
	}

	.bds-im-zone-switcher__item:hover,
	.bds-im-zone-switcher__item:focus-visible {
		background: #f1f5f9;
		color: #0f172a;
		outline: none;
	}

	.bds-im-zone-switcher__item.is-current {
		background: #eef6ff;
		color: #0f4c81;
	}

	.bds-im-zone-switcher__item small {
		flex: 0 0 auto;
		padding: 3px 6px;
		border-radius: 999px;
		background: rgba(15, 76, 129, 0.08);
		font-size: 9px;
	}

	.bds-im-zone-switcher__empty {
		padding: 10px;
		color: #64748b;
		font-size: 11px;
		line-height: 1.45;
	}

	/* Giữ đúng kiểu tìm kiếm/bộ lọc hiện tại, chỉ co giãn trong một hàng. */
	.bds-im-filter-search {
		width: 100%;
		max-width: none;
		min-width: 0;
		flex: none;
	}

	.bds-im-filter-search input {
		font-size: 12px;
	}

	.bds-im-filter-toggle,
	.bds-im-filter-clear,
	.bds-im-toolbar-button {
		min-height: 40px;
		height: 40px;
		padding: 0 11px !important;
		border: 1px solid #dbe2ea !important;
		border-radius: 9px !important;
		background: #fff !important;
		color: #172033 !important;
		box-shadow: none !important;
		font-size: 11px;
		font-weight: 750;
		white-space: nowrap;
	}

	.bds-im-filter-toggle,
	.bds-im-toolbar-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
	}

	.bds-im-filter-toggle:hover,
	.bds-im-filter-toggle:focus-visible,
	.bds-im-toolbar-button:not(:disabled):hover,
	.bds-im-toolbar-button:not(:disabled):focus-visible {
		border-color: #94a3b8 !important;
		background: #f8fafc !important;
		outline: none;
	}

	.bds-im-toolbar-tools {
		display: flex;
		align-items: center;
		gap: 7px;
		min-width: 0;
	}

	.bds-im-price-mode {
		display: grid;
		grid-template-columns: auto minmax(118px, 1fr);
		align-items: center;
		gap: 6px;
		height: 40px;
		padding: 0 7px 0 10px;
		border: 1px solid #dbe2ea;
		border-radius: 9px;
		background: #fff;
		white-space: nowrap;
	}

	.bds-im-price-mode__label {
		color: #64748b;
		font-size: 9px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.025em;
	}

	.bds-im-price-mode select {
		min-width: 0;
		max-width: 165px;
		height: 30px;
		padding: 0 20px 0 5px;
		border: 0;
		background-color: transparent;
		color: #172033;
		font: inherit;
		font-size: 11px;
		font-weight: 750;
		outline: none;
	}

	.bds-im-toolbar-button--interest:disabled {
		cursor: default;
		opacity: 0.58;
	}

	.bds-im-toolbar-badge {
		min-width: 19px;
		height: 19px;
		display: inline-grid;
		place-items: center;
		padding: 0 5px;
		border-radius: 999px;
		background: #eef2f7;
		color: #475569;
		font-size: 9px;
		font-weight: 800;
	}

	.bds-im-filter-summary {
		min-width: 92px;
		max-width: 150px;
		margin-left: 0;
		justify-self: end;
		text-align: right;
		font-size: 10.5px;
		line-height: 1.25;
		white-space: normal;
	}

	.bds-im-filter-clear:not([hidden]) {
		position: absolute;
		right: 12px;
		top: calc(100% + 6px);
		z-index: 130;
	}

	/* Filter panel vẫn giữ logic/field hiện tại, mở ngay dưới toolbar. */
	.bds-im-filter-panel {
		position: relative;
		z-index: 120;
	}

	/* Toàn app vẫn 98dvh; bỏ một hàng Header => Viewer tự nhận phần chiều cao vừa thu hồi. */
	.bds-im-viewer-shell {
		height: 98dvh;
	}
}

/* 1366px-class: tinh gọn vừa đủ để vẫn giữ một hàng. */
@media (min-width: 992px) and (max-width: 1439px) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(205px, 245px) minmax(270px, 1fr) auto auto minmax(82px, auto);
		gap: 7px;
		padding-inline: 9px;
	}

	.bds-im-toolbar-project__text strong {
		font-size: 11px;
	}

	.bds-im-price-mode {
		grid-template-columns: 1fr;
		gap: 0;
		min-width: 142px;
		padding-left: 8px;
	}

	.bds-im-price-mode__label {
		display: none;
	}

	.bds-im-price-mode select {
		max-width: 150px;
	}

	.bds-im-toolbar-button,
	.bds-im-filter-toggle {
		padding-inline: 9px !important;
	}
}

@media (min-width: 992px) {
	/* Chỉ ẩn Header cũ khi toolbar Filter đang tồn tại. */
	.bds-im-viewer-shell[data-filters-enabled="0"] .bds-im-viewer-header {
		display: flex;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(175px, 205px) minmax(220px, 1fr) auto auto minmax(70px, auto);
	}

	.bds-im-toolbar-project__text small {
		display: none;
	}

	.bds-im-toolbar-tools {
		gap: 5px;
	}

	.bds-im-toolbar-button--interest {
		display: none;
	}

	.bds-im-price-mode {
		min-width: 125px;
	}

	.bds-im-price-mode select {
		max-width: 125px;
		font-size: 10px;
	}

	.bds-im-toolbar-button span:not(.bds-im-toolbar-icon):not(.bds-im-toolbar-badge) {
		display: none;
	}

	.bds-im-toolbar-button {
		width: 40px;
		padding: 0 !important;
	}
}

@media (min-width: 992px) {
	.bds-im-filter-search__icon {
		width: 16px;
		height: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.bds-im-filter-search__icon svg {
		width: 100%;
		height: 100%;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.18 — Hotfix 2.1: Toolbar corrections
 * - Khôi phục Filter Panel nổi đúng cơ chế v1.14.2.16.
 * - Xóa thống kê x/y căn phù hợp khỏi toolbar.
 * - Xóa lọc hiển thị inline khi đang có điều kiện lọc/tìm kiếm.
 * - Căn lại Chế độ xem và dành chỗ cho nhiều Loại giá.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-filterbar__main {
		grid-template-columns:
			minmax(225px, 280px)
			minmax(300px, 1fr)
			auto
			auto
			minmax(350px, auto);
	}

	.bds-im-filter-clear:not([hidden]) {
		position: static;
		right: auto;
		top: auto;
		z-index: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
	}

	/* Trả Filter Panel về đúng dạng popover của bản ổn trước Hotfix 2. */
	.bds-im-filter-panel {
		position: absolute;
		top: calc(100% - 2px);
		left: 12px;
		z-index: 120;
		width: min(860px, calc(100% - 24px));
		max-height: min(68svh, 660px);
		padding: 0;
		overflow: hidden;
		border: 1px solid #dbe2ea;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 18px 52px rgba(15, 23, 42, 0.18);
	}

	.bds-im-toolbar-tools {
		justify-content: flex-end;
		gap: 7px;
	}

	.bds-im-price-mode {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 235px;
		padding: 0 8px 0 12px;
	}

	.bds-im-price-mode__label {
		flex: 0 0 auto;
		font-size: 9.5px;
		letter-spacing: 0.02em;
		line-height: 1;
		white-space: nowrap;
	}

	.bds-im-price-mode select {
		flex: 1 1 auto;
		width: auto;
		min-width: 145px;
		max-width: 210px;
		padding-left: 4px;
	}
}

@media (min-width: 992px) and (max-width: 1439px) {
	.bds-im-filterbar__main {
		grid-template-columns:
			minmax(205px, 245px)
			minmax(250px, 1fr)
			auto
			auto
			minmax(255px, auto);
	}

	.bds-im-price-mode {
		min-width: 145px;
		padding-left: 8px;
	}

	.bds-im-price-mode__label {
		display: none;
	}

	.bds-im-price-mode select {
		min-width: 125px;
		max-width: 165px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.bds-im-filterbar__main {
		grid-template-columns:
			minmax(175px, 205px)
			minmax(210px, 1fr)
			auto
			auto
			minmax(165px, auto);
	}

	.bds-im-filter-clear span:not(.bds-im-toolbar-icon) {
		display: none;
	}

	.bds-im-filter-clear {
		width: 40px;
		padding: 0 !important;
	}
}

@media (min-width: 992px) {
	.bds-im-filter-toggle {
		grid-column: 3;
	}

	.bds-im-filter-clear {
		grid-column: 4;
	}

	.bds-im-toolbar-tools {
		grid-column: 5;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.19 — Hotfix 2.2: Toolbar spacing + brand palette
 * Chỉ tinh chỉnh desktop toolbar; không đổi filter engine / polygon geometry.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-filterbar {
		--bds-brand-50: #f6f9e9;
		--bds-brand-100: #e3ebb2;
		--bds-brand-200: #d2e27f;
		--bds-brand-300: #bfdf74;
		--bds-brand-500: #6bb74a;
		--bds-brand-600: #02954f;
		--bds-brand-700: #077840;
		--bds-brand-800: #016243;
	}

	/* Thu ô tìm kiếm về khoảng một nửa bề rộng trước, nhường chỗ cho công cụ. */
	.bds-im-filterbar__main {
		grid-template-columns:
			minmax(220px, 270px)
			clamp(280px, 24vw, 430px)
			auto
			auto
			minmax(0, 1fr);
		gap: 10px;
	}

	.bds-im-filter-search {
		max-width: 430px;
		border-color: #d8e2d7;
	}

	.bds-im-filter-search:focus-within {
		border-color: var(--bds-brand-600);
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.12);
	}

	.bds-im-filter-search__icon {
		color: var(--bds-brand-800);
	}

	.bds-im-filter-search__button {
		background: var(--bds-brand-800) !important;
		border-color: var(--bds-brand-800) !important;
		color: #fff !important;
	}

	.bds-im-filter-search__button:hover,
	.bds-im-filter-search__button:focus-visible {
		background: var(--bds-brand-700) !important;
		border-color: var(--bds-brand-700) !important;
		box-shadow: 0 0 0 3px rgba(7, 120, 64, 0.14) !important;
	}

	.bds-im-zone-switcher__summary,
	.bds-im-filter-toggle,
	.bds-im-filter-clear,
	.bds-im-toolbar-button,
	.bds-im-price-mode {
		border-color: #d8e2d7 !important;
		transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
	}

	.bds-im-zone-switcher__summary > .bds-im-toolbar-icon {
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
	}

	.bds-im-zone-switcher__summary:hover,
	.bds-im-zone-switcher__summary:focus-visible,
	.bds-im-filter-toggle:hover,
	.bds-im-filter-toggle:focus-visible,
	.bds-im-filter-clear:hover,
	.bds-im-filter-clear:focus-visible,
	.bds-im-toolbar-button:not(:disabled):hover,
	.bds-im-toolbar-button:not(:disabled):focus-visible,
	.bds-im-price-mode:focus-within {
		background: var(--bds-brand-50) !important;
		border-color: var(--bds-brand-600) !important;
		color: var(--bds-brand-800) !important;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.10) !important;
		outline: none;
	}

	.bds-im-zone-switcher__item:hover,
	.bds-im-zone-switcher__item:focus-visible {
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
	}

	.bds-im-zone-switcher__item.is-current {
		background: var(--bds-brand-100);
		color: var(--bds-brand-800);
	}

	.bds-im-zone-switcher__item.is-current small {
		background: rgba(1, 98, 67, 0.10);
		color: var(--bds-brand-800);
	}

	.bds-im-filter-toggle__count,
	.bds-im-toolbar-badge {
		background: var(--bds-brand-100);
		color: var(--bds-brand-800);
	}

	.bds-im-toolbar-tools {
		width: 100%;
		justify-content: flex-end;
		gap: 9px;
	}

	/* Nới Chế độ xem để luôn đọc đủ nhãn trên màn hình desktop phổ biến. */
	.bds-im-price-mode {
		flex: 0 1 310px;
		min-width: 270px;
		max-width: 360px;
		gap: 11px;
		padding: 0 9px 0 12px;
	}

	.bds-im-price-mode__label {
		display: inline !important;
		color: var(--bds-brand-800);
		font-size: 9.5px;
		font-weight: 850;
		letter-spacing: 0.025em;
	}

	.bds-im-price-mode select {
		min-width: 170px;
		max-width: 240px;
		color: #172033;
		cursor: pointer;
	}

	.bds-im-price-mode select:hover,
	.bds-im-price-mode select:focus {
		color: var(--bds-brand-800);
	}

	.bds-im-toolbar-button--interest:disabled {
		background: #fafcf7 !important;
		color: #7c8b7f !important;
		border-color: #e1e8df !important;
		opacity: 1;
	}

	.bds-im-toolbar-button[data-bds-im-legend-toggle][aria-pressed="true"] {
		background: #fff !important;
		color: #172033 !important;
	}

	.bds-im-toolbar-button[data-bds-im-legend-toggle][aria-pressed="true"]:hover,
	.bds-im-toolbar-button[data-bds-im-legend-toggle][aria-pressed="true"]:focus-visible {
		background: var(--bds-brand-50) !important;
		color: var(--bds-brand-800) !important;
	}
}

/* 1366–1439px: vẫn giữ chữ “Chế độ xem”, co nhẹ các nút phụ thay vì cắt nhãn. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.bds-im-filterbar__main {
		grid-template-columns:
			minmax(205px, 235px)
			clamp(270px, 23vw, 340px)
			auto
			auto
			minmax(0, 1fr);
		gap: 7px;
	}

	.bds-im-filter-search {
		max-width: 340px;
	}

	.bds-im-price-mode {
		min-width: 240px;
		max-width: 285px;
		gap: 7px;
	}

	.bds-im-price-mode select {
		min-width: 145px;
		max-width: 185px;
		font-size: 10.5px;
	}

	.bds-im-toolbar-tools {
		gap: 6px;
	}

	.bds-im-toolbar-button,
	.bds-im-filter-toggle {
		padding-inline: 8px !important;
	}
}

/* Chế độ “Tất cả các loại giá”: badge vẫn gọn; rê chuột sẽ xem đầy đủ. */
.bds-im-unit-price-tag.is-all-prices {
	position: absolute;
	outline: none;
}

.bds-im-unit-price-tag.is-all-prices::before {
	content: attr(data-all-price-text);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 9px);
	z-index: 40;
	min-width: 180px;
	max-width: 270px;
	padding: 9px 11px;
	border-radius: 10px;
	background: #016243;
	color: #fff;
	box-shadow: 0 10px 26px rgba(1, 98, 67, 0.24);
	font-size: 11px;
	font-weight: 650;
	line-height: 1.45;
	text-align: left;
	white-space: pre-line;
	transform: translate(-50%, 5px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.bds-im-unit-price-tag.is-all-prices:hover::before,
.bds-im-unit-price-tag.is-all-prices:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------
 * v1.14.2.20 — Hotfix 3: lớp nổi trên mặt bằng desktop
 * Badge giá + Căn quan tâm + Chú giải + Zoom/Home + Minimap.
 * Mobile giữ nguyên để xử lý ở Hotfix 4.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-viewer-shell {
		--bds-brand-50: #f6f9e9;
		--bds-brand-100: #e3ebb2;
		--bds-brand-200: #d2e27f;
		--bds-brand-300: #bfdf74;
		--bds-brand-500: #6bb74a;
		--bds-brand-600: #02954f;
		--bds-brand-700: #077840;
		--bds-brand-800: #016243;
	}

	/* ---------- Badge giá ---------- */
	.bds-im-unit-price-tag-layer {
		z-index: 34;
		pointer-events: none;
	}

	.bds-im-unit-price-tag {
		min-width: 34px;
		height: 22px;
		padding: 0 7px;
		border: 1.5px solid rgba(255, 255, 255, 0.95);
		border-radius: 9px;
		background: var(--bds-im-price-status, #9b7200);
		color: #fff;
		font-size: 11px;
		font-weight: 850;
		line-height: 19px;
		box-shadow: 0 4px 10px rgba(15, 23, 42, 0.20);
		transform: translate(-50%, calc(-100% - 4px));
		pointer-events: auto;
		cursor: pointer;
		outline: none;
		transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
	}

	.bds-im-unit-price-tag::after {
		border-left-width: 4px;
		border-right-width: 4px;
		border-top-width: 5px;
		border-top-color: var(--bds-im-price-status, #9b7200);
	}

	.bds-im-unit-price-tag:hover,
	.bds-im-unit-price-tag:focus-visible {
		transform: translate(-50%, calc(-100% - 5px)) scale(1.06);
		box-shadow: 0 7px 16px rgba(15, 23, 42, 0.25);
		filter: saturate(1.08) brightness(0.98);
	}

	.bds-im-unit-price-tag.is-interested::after {
		/* Giữ mũi nhọn của badge; ký hiệu quan tâm dùng ::marker phụ ở span. */
		filter: drop-shadow(0 0 3px rgba(1, 98, 67, 0.28));
	}

	.bds-im-unit-price-tag.is-interested .bds-im-unit-price-tag__value::after {
		content: '♥';
		position: absolute;
		top: -8px;
		right: -8px;
		width: 14px;
		height: 14px;
		display: grid;
		place-items: center;
		border: 1px solid #fff;
		border-radius: 999px;
		background: var(--bds-brand-800);
		color: #fff;
		font-size: 7px;
		line-height: 1;
		box-shadow: 0 2px 5px rgba(1, 98, 67, 0.22);
	}

	.bds-im-unit-price-tag__value {
		position: relative;
		z-index: 1;
	}

	.bds-im-unit-shape.is-interested {
		filter: drop-shadow(0 0 2px rgba(1, 98, 67, 0.85));
	}

	/* ---------- Căn quan tâm ---------- */
	.bds-im-toolbar-button--interest {
		cursor: pointer;
	}

	.bds-im-toolbar-button--interest[aria-expanded="true"] {
		border-color: var(--bds-brand-600) !important;
		background: var(--bds-brand-50) !important;
		color: var(--bds-brand-800) !important;
	}

	.bds-im-interest-panel {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 62;
		width: 238px;
		max-height: min(52%, 500px);
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		border: 1px solid rgba(216, 226, 215, 0.95);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
		backdrop-filter: blur(9px);
		-webkit-backdrop-filter: blur(9px);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-10px);
		pointer-events: none;
		transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
	}

	.bds-im-interest-panel.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		pointer-events: auto;
	}

	.bds-im-interest-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 12px 10px 14px;
		border-bottom: 1px solid #edf1eb;
		color: #172033;
		font-size: 13px;
	}

	.bds-im-interest-panel__close,
	.bds-im-status-legend__close,
	.bds-im-interest-item__remove {
		width: 28px;
		height: 28px;
		display: inline-grid;
		place-items: center;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 8px;
		background: transparent;
		color: #64748b;
		cursor: pointer;
	}

	.bds-im-interest-panel__close svg,
	.bds-im-status-legend__close svg,
	.bds-im-interest-item__remove svg,
	.bds-im-interest-panel__footer button svg,
	.bds-im-interest-action svg,
	.bds-im-map-controls svg {
		width: 16px;
		height: 16px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.bds-im-interest-panel__close:hover,
	.bds-im-status-legend__close:hover,
	.bds-im-interest-item__remove:hover {
		border-color: var(--bds-brand-100);
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
	}

	.bds-im-interest-panel__list {
		min-height: 0;
		overflow-y: auto;
		padding: 9px;
	}

	.bds-im-interest-panel__empty {
		margin: 10px;
		padding: 12px;
		border-radius: 10px;
		background: #f8fafc;
		color: #64748b;
		font-size: 11px;
		line-height: 1.45;
	}

	.bds-im-interest-item {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 28px;
		gap: 6px;
		padding: 8px 8px 8px 10px;
		border: 1px solid #e4ece0;
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,247,0.98) 100%);
		transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
	}

	.bds-im-interest-item + .bds-im-interest-item {
		margin-top: 8px;
	}

	.bds-im-interest-item:hover {
		border-color: rgba(107, 183, 74, 0.55);
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
		transform: translateY(-1px);
	}

	.bds-im-interest-item__open {
		position: relative;
		min-width: 0;
		min-height: 62px;
		padding: 1px 46px 1px 0;
		border: 0;
		background: transparent;
		color: #172033;
		text-align: left;
		cursor: pointer;
	}

	.bds-im-interest-item__code {
		display: block;
		padding-right: 10px;
		font-size: 14px;
		font-weight: 850;
		line-height: 1.25;
		letter-spacing: -0.01em;
	}

	.bds-im-interest-item__meta,
	.bds-im-interest-item__open small {
		display: block;
		margin-top: 4px;
		font-size: 10.5px;
		line-height: 1.35;
	}

	.bds-im-interest-item__meta {
		color: #516157;
		font-weight: 650;
	}

	.bds-im-interest-item__status {
		color: var(--bds-brand-800);
		font-weight: 800;
	}

	.bds-im-interest-item__zone {
		color: #7b8798;
	}

	.bds-im-interest-item__price {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 42px;
		padding: 4px 7px;
		border-radius: 8px;
		background: linear-gradient(180deg, #c58c10 0%, #9b7200 100%);
		color: #fff;
		font-size: 11px;
		font-weight: 850;
		text-align: center;
		box-shadow: 0 4px 10px rgba(155, 114, 0, 0.18);
	}

	.bds-im-interest-item__open:hover .bds-im-interest-item__code {
		color: var(--bds-brand-800);
	}

	.bds-im-interest-panel__footer {
		padding: 8px 10px 10px;
		border-top: 1px solid #edf1eb;
	}

	.bds-im-interest-panel__footer button {
		width: 100%;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		border: 1px solid #d8e2d7;
		border-radius: 9px;
		background: #fff;
		color: #516157;
		font-size: 10.5px;
		font-weight: 750;
		cursor: pointer;
	}

	.bds-im-interest-panel__footer button:hover:not(:disabled) {
		border-color: var(--bds-brand-600);
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
	}

	.bds-im-interest-panel__footer button:disabled {
		opacity: 0.45;
		cursor: default;
	}

	/* Nút lưu căn trong popup chi tiết. */
	.bds-im-interest-action {
		margin-top: 12px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 42px;
		padding: 0 15px;
		border: 1px solid rgba(2, 149, 79, 0.18) !important;
		border-radius: 12px;
		background: #fff !important;
		color: var(--bds-brand-800) !important;
		font-size: 12px;
		font-weight: 800;
		line-height: 1.2;
		white-space: nowrap;
		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}

	.bds-im-interest-action span {
		display: inline-block !important;
		color: inherit !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.bds-im-interest-action svg {
		flex: 0 0 16px;
		color: inherit;
		stroke: currentColor;
		fill: none;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.bds-im-interest-action:hover,
	.bds-im-interest-action:focus,
	.bds-im-interest-action:focus-visible,
	.bds-im-interest-action:active {
		border-color: var(--bds-brand-600) !important;
		background: var(--bds-brand-50) !important;
		color: var(--bds-brand-800) !important;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.08);
		outline: none;
	}

	.bds-im-interest-action.is-active {
		border-color: rgba(107, 183, 74, 0.9) !important;
		background: linear-gradient(180deg, rgba(227, 235, 178, 0.95) 0%, rgba(210, 226, 127, 0.55) 100%) !important;
		color: var(--bds-brand-800) !important;
		box-shadow: 0 6px 16px rgba(2, 149, 79, 0.12);
	}

	.bds-im-interest-action.is-active svg {
		fill: rgba(2, 149, 79, 0.14);
		stroke: var(--bds-brand-800);
	}

	/* ---------- Chú giải ---------- */
	.bds-im-status-legend {
		left: 16px;
		bottom: 16px;
		z-index: 58;
		width: 220px;
		max-width: 220px;
		max-height: 40%;
		padding: 0;
		overflow: hidden;
		border: 1px solid rgba(216, 226, 215, 0.96);
		border-radius: 15px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
		pointer-events: auto;
	}

	.bds-im-status-legend__title {
		min-height: 38px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin: 0;
		padding: 7px 8px 7px 12px;
		border-bottom: 1px solid #edf1eb;
		color: #172033;
		font-size: 10px;
		letter-spacing: 0.04em;
	}

	.bds-im-status-legend__items {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: 7px 11px 9px;
		overflow-y: auto;
	}

	.bds-im-status-legend__item {
		display: grid;
		grid-template-columns: 12px minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px;
		min-height: 28px;
		font-size: 10px;
	}

	.bds-im-status-legend__swatch {
		width: 11px;
		height: 11px;
		border-radius: 4px;
	}

	.bds-im-status-legend__count {
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
	}

	/* ---------- Zoom / Home ---------- */
	.bds-im-map-controls {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 64;
		display: flex;
		flex-direction: column;
		gap: 7px;
	}

	.bds-im-map-controls button {
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 1px solid rgba(216, 226, 215, 0.95);
		border-radius: 11px;
		background: rgba(255, 255, 255, 0.96);
		color: #30473a;
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.12);
		cursor: pointer;
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
	}

	.bds-im-map-controls button:hover,
	.bds-im-map-controls button:focus-visible {
		border-color: var(--bds-brand-600);
		background: var(--bds-brand-50);
		color: var(--bds-brand-800);
		transform: translateY(-1px);
		outline: none;
	}

	.bds-im-map-controls__gap {
		height: 3px;
	}

	/* ---------- Minimap ---------- */
	.bds-im-viewer .navigator {
		right: 16px !important;
		bottom: 16px !important;
		width: clamp(155px, 11vw, 190px) !important;
		height: clamp(98px, 7vw, 122px) !important;
		border: 2px solid rgba(255, 255, 255, 0.95) !important;
		border-radius: 14px !important;
		background: rgba(255, 255, 255, 0.82) !important;
		box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18) !important;
		overflow: hidden !important;
		opacity: 1 !important;
	}

	.bds-im-viewer .displayregion {
		border: 2px solid var(--bds-brand-600) !important;
		background: rgba(191, 223, 116, 0.12) !important;
	}
}

/* Không đưa UI Hotfix 3 desktop xuống mobile trước Hotfix 4. */
@media (max-width: 991px) {
	.bds-im-interest-panel,
	.bds-im-map-controls,
	.bds-im-interest-action {
		display: none !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.22 — Hotfix 3.2: Căn quan tâm compact list only
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-interest-panel {
		width: 246px;
	}

	.bds-im-interest-panel__list {
		padding: 8px;
	}

	.bds-im-interest-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 30px;
		gap: 4px;
		min-height: 58px;
		padding: 6px 6px 6px 9px;
		border: 1px solid #e3e8e1;
		border-radius: 11px;
		background: #ffffff;
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.025);
		transform: none;
		transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
	}

	.bds-im-interest-item + .bds-im-interest-item {
		margin-top: 7px;
	}

	.bds-im-interest-item:hover,
	.bds-im-interest-item:focus-within {
		border-color: #9cc664;
		background: #f7faef;
		box-shadow: 0 5px 13px rgba(1, 98, 67, 0.09);
		transform: none;
	}

	.bds-im-interest-item__open,
	.bds-im-interest-item__open:hover,
	.bds-im-interest-item__open:focus,
	.bds-im-interest-item__open:focus-visible,
	.bds-im-interest-item__open:active {
		position: relative;
		min-width: 0;
		min-height: 44px;
		margin: 0 !important;
		padding: 2px 48px 2px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		filter: none !important;
		color: #172033 !important;
		text-align: left;
		outline: none !important;
	}

	.bds-im-interest-item__code {
		display: block;
		margin: 0;
		padding: 0;
		color: #172033;
		font-size: 12px;
		font-weight: 800;
		line-height: 1.28;
		letter-spacing: 0;
	}

	.bds-im-interest-item__meta {
		display: block;
		margin-top: 3px;
		color: #728096;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bds-im-interest-item__price {
		position: absolute;
		top: 1px;
		right: 0;
		min-width: 39px;
		padding: 4px 6px;
		border-radius: 7px;
		background: #b47c00;
		color: #fff;
		font-size: 10px;
		font-weight: 850;
		line-height: 1.2;
		text-align: center;
		box-shadow: 0 2px 6px rgba(155, 114, 0, 0.16);
	}

	.bds-im-interest-item:hover .bds-im-interest-item__code,
	.bds-im-interest-item:focus-within .bds-im-interest-item__code {
		color: #016243;
	}

	.bds-im-interest-item:hover .bds-im-interest-item__price,
	.bds-im-interest-item:focus-within .bds-im-interest-item__price {
		background: #9b7200;
	}

	.bds-im-interest-item__remove,
	.bds-im-interest-item__remove:hover,
	.bds-im-interest-item__remove:focus,
	.bds-im-interest-item__remove:focus-visible,
	.bds-im-interest-item__remove:active {
		align-self: center;
		width: 30px;
		height: 30px;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 8px !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		color: #7b8798 !important;
	}

	.bds-im-interest-item__remove:hover,
	.bds-im-interest-item__remove:focus-visible {
		border-color: #bfdf74 !important;
		background: #e3ebb2 !important;
		color: #016243 !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.23 — Hotfix 3.3: Căn quan tâm layout + return flow
 * Chỉ khóa lại layout desktop của danh sách quan tâm, chống theme ép button flex.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.bds-im-interest-panel {
		width: 252px;
	}

	.bds-im-interest-item {
		grid-template-columns: minmax(0, 1fr) 30px;
		align-items: center;
		min-height: 62px;
		padding: 7px 7px 7px 10px;
	}

	.bds-im-interest-item__open,
	.bds-im-interest-item__open:hover,
	.bds-im-interest-item__open:focus,
	.bds-im-interest-item__open:focus-visible,
	.bds-im-interest-item__open:active {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 46px;
		padding: 3px 50px 3px 0 !important;
		text-align: left !important;
		align-items: initial !important;
		justify-content: initial !important;
		gap: 0 !important;
	}

	.bds-im-interest-item__code,
	.bds-im-interest-item__meta {
		display: block !important;
		width: auto !important;
		float: none !important;
		clear: both;
	}

	.bds-im-interest-item__code {
		margin: 0 0 4px !important;
		font-size: 13px;
		line-height: 1.25;
	}

	.bds-im-interest-item__meta {
		margin: 0 !important;
		font-size: 10.5px;
		line-height: 1.3;
		color: #728096 !important;
	}

	.bds-im-interest-item__price {
		top: 2px;
		right: 0;
		min-width: 42px;
		padding: 5px 7px;
		border-radius: 8px;
		font-size: 10.5px;
	}

	.bds-im-interest-item__remove {
		justify-self: center;
	}

	.bds-im-interest-item:hover,
	.bds-im-interest-item:focus-within {
		border-color: #9cc664;
		background: #f8fbea;
		box-shadow: 0 5px 14px rgba(1, 98, 67, 0.08);
	}

	.bds-im-interest-item__open:hover,
	.bds-im-interest-item__open:focus-visible,
	.bds-im-interest-item__open:active {
		background: transparent !important;
		color: #016243 !important;
	}

	.bds-im-interest-item:hover .bds-im-interest-item__meta,
	.bds-im-interest-item:focus-within .bds-im-interest-item__meta {
		color: #516157 !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.24 — Hotfix 3.4: Visual polish cuối desktop
 * Chỉ tinh chỉnh Chú giải + Zoom/Home + Minimap + màu Bộ lọc.
 * Không thay đổi cấu trúc DOM, dữ liệu hay logic tương tác.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	/* ---------- Chú giải: compact + đồng bộ thương hiệu ---------- */
	.bds-im-status-legend {
		width: 216px;
		max-width: 216px;
		border-color: rgba(107, 183, 74, 0.28);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.97);
		box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.bds-im-status-legend__title {
		min-height: 36px;
		padding: 7px 8px 7px 12px;
		border-bottom-color: rgba(107, 183, 74, 0.18);
		background: linear-gradient(180deg, rgba(246, 249, 233, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
		color: #016243;
		font-size: 10.5px;
		font-weight: 850;
		letter-spacing: 0.045em;
	}

	.bds-im-status-legend__items {
		padding: 6px 10px 8px;
	}

	.bds-im-status-legend__item {
		min-height: 27px;
		padding: 2px 4px;
		border-radius: 8px;
		font-size: 10px;
		transition: background-color 120ms ease, color 120ms ease;
	}

	.bds-im-status-legend__item:hover {
		background: #f6f9e9;
	}

	.bds-im-status-legend__swatch {
		width: 10px;
		height: 10px;
		border-radius: 3px;
		box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
	}

	.bds-im-status-legend__label {
		font-weight: 700;
		color: #334155;
	}

	.bds-im-status-legend__count {
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border: 1px solid rgba(107, 183, 74, 0.14);
		background: #f6f9e9;
		color: #016243;
		font-weight: 800;
	}

	.bds-im-status-legend__close {
		width: 26px;
		height: 26px;
		border-radius: 7px;
	}

	/* ---------- Zoom / Home: cụm nhỏ, sạch và cùng nhịp ---------- */
	.bds-im-map-controls {
		top: 16px;
		right: 16px;
		gap: 5px;
		padding: 5px;
		border: 1px solid rgba(107, 183, 74, 0.20);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.82);
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.bds-im-map-controls button {
		width: 36px;
		height: 36px;
		border-color: transparent;
		border-radius: 9px;
		background: rgba(255, 255, 255, 0.96);
		color: #385247;
		box-shadow: none;
	}

	.bds-im-map-controls button + button {
		border-top-color: rgba(216, 226, 215, 0.55);
	}

	.bds-im-map-controls button:hover,
	.bds-im-map-controls button:focus-visible {
		border-color: rgba(2, 149, 79, 0.32);
		background: #f6f9e9;
		color: #016243;
		box-shadow: 0 3px 10px rgba(2, 149, 79, 0.10);
		transform: none;
	}

	.bds-im-map-controls button:active {
		background: #e3ebb2;
		color: #016243;
	}

	.bds-im-map-controls svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.9;
	}

	.bds-im-map-controls__gap {
		height: 4px;
		margin: 1px 3px;
		border-top: 1px solid rgba(107, 183, 74, 0.18);
	}

	/* ---------- Minimap: nhẹ hơn, vùng nhìn rõ hơn ---------- */
	.bds-im-viewer .navigator {
		right: 16px !important;
		bottom: 16px !important;
		width: clamp(150px, 10.5vw, 184px) !important;
		height: clamp(94px, 6.7vw, 116px) !important;
		border: 1px solid rgba(107, 183, 74, 0.42) !important;
		border-radius: 13px !important;
		background: rgba(255, 255, 255, 0.78) !important;
		box-shadow: 0 9px 24px rgba(15, 23, 42, 0.14) !important;
	}

	.bds-im-viewer .navigator:hover {
		border-color: rgba(2, 149, 79, 0.65) !important;
		box-shadow: 0 11px 28px rgba(1, 98, 67, 0.16) !important;
	}

	.bds-im-viewer .displayregion {
		border: 2px solid #02954f !important;
		background: rgba(191, 223, 116, 0.16) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65) !important;
	}

	/* ---------- Bộ lọc: giữ nguyên engine/layout, chỉ brand polish ---------- */
	.bds-im-filter-panel {
		border-color: rgba(107, 183, 74, 0.30);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 18px 52px rgba(15, 23, 42, 0.16);
	}

	.bds-im-filter-panel__header {
		padding: 14px 16px 12px;
		border-bottom-color: rgba(107, 183, 74, 0.18);
		background: linear-gradient(180deg, rgba(246, 249, 233, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
	}

	.bds-im-filter-panel__header strong {
		color: #016243;
		font-size: 14px;
		font-weight: 850;
	}

	.bds-im-filter-panel__header span {
		color: #66756b;
	}

	.bds-im-filter-panel__close {
		border-color: rgba(107, 183, 74, 0.24) !important;
		border-radius: 9px !important;
		background: rgba(255, 255, 255, 0.96) !important;
		color: #385247 !important;
	}

	.bds-im-filter-panel__close:hover,
	.bds-im-filter-panel__close:focus-visible {
		border-color: #6bb74a !important;
		background: #e3ebb2 !important;
		color: #016243 !important;
	}

	.bds-im-filter-panel__body {
		padding: 11px 16px 15px;
		scrollbar-color: #9cc664 #f6f9e9;
	}

	.bds-im-filter-section + .bds-im-filter-section {
		border-top: 1px solid rgba(107, 183, 74, 0.20);
	}

	.bds-im-filter-section h3 {
		position: relative;
		padding-left: 10px;
		color: #30473a;
		font-size: 11px;
		font-weight: 850;
		letter-spacing: 0.035em;
	}

	.bds-im-filter-section h3::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 13px;
		border-radius: 999px;
		background: #6bb74a;
		transform: translateY(-50%);
	}

	.bds-im-filter-field__label {
		color: #516157;
		font-weight: 750;
	}

	.bds-im-filter-control {
		border-color: #dce7da !important;
		border-radius: 9px !important;
		background: #fff !important;
		color: #172033 !important;
		box-shadow: none !important;
		transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
	}

	.bds-im-filter-control:hover {
		border-color: #9cc664 !important;
		background: #fbfdf7 !important;
	}

	.bds-im-filter-control:focus,
	.bds-im-filter-control:focus-visible {
		border-color: #02954f !important;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.09) !important;
		outline: none !important;
	}

	.bds-im-filter-panel__footer {
		padding: 10px 16px 12px;
		border-top-color: rgba(107, 183, 74, 0.18);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 233, 0.72) 100%);
	}

	.bds-im-filter-panel__reset,
	.bds-im-filter-panel__apply {
		min-height: 38px;
		border-radius: 9px !important;
		font-weight: 800;
	}

	.bds-im-filter-panel__reset {
		border-color: #d8e2d7 !important;
		background: #fff !important;
		color: #516157 !important;
	}

	.bds-im-filter-panel__reset:hover,
	.bds-im-filter-panel__reset:focus-visible {
		border-color: #9cc664 !important;
		background: #f6f9e9 !important;
		color: #016243 !important;
	}

	.bds-im-filter-panel__apply {
		border-color: #016243 !important;
		background: #016243 !important;
		color: #fff !important;
		box-shadow: 0 5px 14px rgba(1, 98, 67, 0.16) !important;
	}

	.bds-im-filter-panel__apply:hover,
	.bds-im-filter-panel__apply:focus-visible {
		border-color: #077840 !important;
		background: #077840 !important;
		color: #fff !important;
		box-shadow: 0 7px 17px rgba(1, 98, 67, 0.20) !important;
	}

	.bds-im-filter-panel__apply:active {
		border-color: #02954f !important;
		background: #02954f !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.26 — Hotfix 4.1A.1: Mobile App Frame Scroll/Rotation Fix
 *
 * MOBILE-ONLY FOUNDATION. Desktop Hotfix 3 is frozen and must not change.
 * Scope of this build:
 * - viewport-sized mobile application frame
 * - vh -> svh -> dvh fallback chain
 * - safe-area support (including landscape notch insets)
 * - horizontal overflow hardening
 * - no toolbar / viewer / overlay redesign yet
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.bds-im-viewer-shell {
		/*
		 * 4.1A.1: the frame must be at least one visible viewport tall, but it
		 * must NOT clip existing rows before 4.1B/4.1C convert them to flex.
		 */
		width: 100%;
		max-width: 100vw;
		height: auto;
		min-width: 0;
		min-height: 100vh;
		min-height: 100svh;
		min-height: 100dvh;
		max-height: none;

		/* Safe areas stay inside the frame width while vertical content may grow. */
		padding-top: env(safe-area-inset-top, 0px);
		padding-right: env(safe-area-inset-right, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-left: env(safe-area-inset-left, 0px);

		margin: 0;
		border-radius: 0;
		overflow-x: hidden;
		overflow-y: visible;
		overscroll-behavior-x: none;
		overscroll-behavior-y: auto;
		contain: none;
	}

	/*
	 * Keep the existing full-width breakout working inside Elementor/theme
	 * columns while constraining its final box to the real mobile viewport.
	 */
	.bds-im-viewer-shell--full {
		left: 50%;
		width: 100vw;
		width: 100dvw;
		max-width: 100vw;
		max-width: 100dvw;
		transform: translateX(-50%);
	}

	/* No child is allowed to force the application wider than the frame. */
	.bds-im-viewer-shell > *,
	.bds-im-viewer-header,
	.bds-im-filterbar,
	.bds-im-filterbar__main,
	.bds-im-filter-panel,
	.bds-im-viewer-stage,
	.bds-im-viewer,
	.bds-im-viewer-footer {
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * 4.1A deliberately does not recalculate vertical rows yet. Existing child
	 * layout remains intact; 4.1B will convert portrait rows to flex sizing.
	 */
	.bds-im-viewer-stage,
	.bds-im-viewer {
		overflow: hidden;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.27 — Hotfix 4.1A.2: Mobile cooperative scroll + landscape frame
 *
 * MOBILE ONLY. Desktop v1.14.2.24 remains frozen.
 * - allow page-first vertical gestures over the viewer (OSD cooperative mode)
 * - keep the viewer from trapping the entire landscape viewport
 * - use viewport-relative landscape height; no fixed device-specific size
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	/*
	 * OpenSeadragon cooperativeGestures owns the inner canvas gesture rules.
	 * The shell/viewer ancestor must not globally forbid vertical page gestures.
	 */
	.bds-im-viewer {
		touch-action: pan-y;
	}
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 600px) {
	/*
	 * 4.1A.2 does not redesign the landscape toolbar yet. It only prevents the
	 * legacy 520px minimum from making the viewer taller than the phone screen.
	 * 68dvh gives the masterplan a useful, fully visible landscape window while
	 * the surrounding page remains vertically scrollable.
	 */
	.bds-im-viewer-stage {
		height: 68vh;
		height: 68svh;
		height: 68dvh;
		min-height: 0;
		max-height: none;
	}

	.bds-im-viewer {
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.28 — Hotfix 4.1B: Portrait Vertical Layout
 *
 * MOBILE PORTRAIT ONLY. Desktop v1.14.2.24 and landscape 4.1A.2 are frozen.
 * Scope:
 * - convert the current portrait shell into a vertical flex application frame
 * - let the viewer consume the remaining viewport height
 * - remove legacy fixed/min viewer heights in portrait only
 * - keep the current Header + Search/Filter UI unchanged
 * - shorten the footer to selection/status only
 * Price-mode mobile placement belongs to 4.2B, not this build.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) and (orientation: portrait) {
	.bds-im-viewer-shell {
		/*
		 * Use the real visible viewport while keeping the fallback chain for
		 * older mobile browsers. Safe-area padding from 4.1A stays inside this
		 * box because the shell already uses border-box sizing.
		 */
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100vw;
		height: 100vh;
		height: 100svh;
		height: 100dvh;
		min-height: 0;
		max-height: 100vh;
		max-height: 100svh;
		max-height: 100dvh;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	/* Current mobile header remains visually unchanged; it is only a fixed row. */
	.bds-im-viewer-header {
		flex: 0 0 auto;
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * Search + Filter stay exactly as they are today. The bar may have one or
	 * two visual rows depending on phone width, but it must never consume the
	 * viewer's flexible slot.
	 */
	.bds-im-filterbar {
		flex: 0 0 auto;
		min-width: 0;
		max-width: 100%;
	}

	/* Viewer is the only row allowed to grow/shrink in portrait. */
	.bds-im-viewer-stage {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: hidden;
	}

	.bds-im-viewer {
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}

	/*
	 * Mobile footer only keeps the useful current selection / loaded count.
	 * The long gesture sentence is intentionally removed to return height to
	 * the map; guidance can be reintroduced later as contextual mobile UX.
	 */
	.bds-im-viewer-footer {
		flex: 0 0 auto;
		min-height: 30px;
		padding: 6px 10px;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		overflow: hidden;
	}

	.bds-im-viewer-footer > span:first-child {
		display: none;
	}

	.bds-im-viewer-selection {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
		font-size: 11px;
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Debug text must not steal mobile viewer height. */
	.bds-im-viewer-tech {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.29 — Hotfix 4.1C: Mobile Landscape Frame + Footer Removal
 *
 * MOBILE ONLY. Desktop Hotfix 3 remains frozen.
 * Spec adjustment agreed after 4.1B testing:
 * - remove the mobile footer entirely in portrait and landscape
 * - detect phone landscape by orientation + short viewport, not width alone
 * - keep the current legacy mobile header/search controls but compress them
 * - make Viewer the only flexible landscape row
 * - use the small viewport height in landscape so iOS browser chrome cannot
 *   make the application taller than the actually safe visible area
 * ------------------------------------------------------------------ */

/* Mobile portrait/narrow screens: footer no longer consumes Viewer height. */
@media (max-width: 767px) {
	.bds-im-viewer-footer {
		display: none !important;
	}
}

/*
 * Phone landscape can be 844–932 CSS px wide on iOS, therefore max-width:767
 * is not a reliable mobile test after rotation. The short-height + touch
 * contract scopes this to phones/small touch devices without touching desktop.
 */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-viewer-shell {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100vw;
		height: 100vh;
		height: 100svh;
		min-height: 0;
		max-height: 100svh;
		margin: 0;
		padding-top: env(safe-area-inset-top, 0px);
		padding-right: env(safe-area-inset-right, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-left: env(safe-area-inset-left, 0px);
		border-radius: 0;
		overflow: hidden;
	}

	.bds-im-viewer-shell--full {
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);
	}

	/*
	 * 4.2A will redesign this header. 4.1C only removes secondary information
	 * so the current title row does not steal landscape map height.
	 */
	.bds-im-viewer-header {
		flex: 0 0 auto;
		min-height: 34px;
		padding: 4px 10px;
		align-items: center;
		gap: 6px;
		overflow: hidden;
	}

	.bds-im-viewer-header > div:first-child {
		min-width: 0;
		width: 100%;
	}

	.bds-im-viewer-title {
		display: block;
		max-width: 100%;
		font-size: 12px;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bds-im-viewer-meta,
	.bds-im-viewer-header .bds-im-release-chip,
	.bds-im-viewer-phase {
		display: none !important;
	}

	/* Current Search + Filter stay functional but occupy one compact row. */
	.bds-im-filterbar {
		flex: 0 0 auto;
		min-width: 0;
		max-width: 100%;
	}

	.bds-im-filterbar__main {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 7px;
		min-height: 48px;
		padding: 5px 8px;
	}

	.bds-im-filter-search {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	.bds-im-filter-toggle,
	.bds-im-filter-clear {
		flex: 0 0 auto;
	}

	/* Summary is low priority in landscape and was already approved for removal. */
	.bds-im-filter-summary {
		display: none !important;
	}

	/* Viewer receives every remaining safe landscape pixel. */
	.bds-im-viewer-stage {
		flex: 1 1 auto;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: hidden;
	}

	.bds-im-viewer {
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}

	.bds-im-viewer-footer {
		display: none !important;
	}

	.bds-im-viewer-tech {
		display: none !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.30 — Hotfix 4.1D: Mobile Visual Viewport Hardening
 *
 * MOBILE LANDSCAPE ONLY. Desktop and approved portrait layout are frozen.
 * Browser chrome on Android Chrome / iOS Chrome / iOS Safari can change the
 * actually visible viewport without matching 100svh. JavaScript publishes the
 * live VisualViewport height into --bds-im-mobile-visual-height so the shell
 * grows/shrinks with the real visible area and does not leave a blank strip.
 * ------------------------------------------------------------------ */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-viewer-shell {
		height: var(--bds-im-mobile-visual-height, 100svh);
		max-height: var(--bds-im-mobile-visual-height, 100svh);
		min-height: 0;
	}

	/*
	 * The viewer remains the only flexible row. Do not add a second viewport
	 * calculation here: flexbox must receive every pixel freed/consumed by the
	 * browser toolbar after the shell height is synchronized above.
	 */
	.bds-im-viewer-stage {
		flex: 1 1 0%;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.bds-im-viewer {
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.31 — Hotfix 4.2A: Mobile Header
 *
 * MOBILE ONLY. Desktop v1.14.2.24 and the 4.1A–4.1D mobile frame are frozen.
 * Scope:
 * - remove the legacy mobile title header without leaving a blank row
 * - promote the existing Project / Zone switcher into the mobile header
 * - expose Căn quan tâm as a compact heart + count action
 * - portrait: header row above the existing Search / Filter rows
 * - landscape: Project + Search + Filter + Interest share one compact row
 * - Price mode / Legend mobile placement belongs to 4.2B / 4.4B
 * ------------------------------------------------------------------ */

@media (max-width: 767px) and (orientation: portrait) {
	/* The old title/release header is replaced completely by the mobile toolbar row. */
	.bds-im-viewer-shell[data-filters-enabled="1"] .bds-im-viewer-header {
		display: none !important;
	}

	.bds-im-filterbar {
		flex: 0 0 auto;
		z-index: 90;
		padding: 0;
		border-bottom: 1px solid rgba(1, 98, 67, 0.12);
		background: rgba(255, 255, 255, 0.98);
	}

	.bds-im-filterbar__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"project interest"
			"search search"
			"filter clear";
		align-items: center;
		gap: 7px 8px;
		min-height: 0;
		padding: 7px 8px 8px;
	}

	.bds-im-toolbar-project {
		display: block;
		grid-area: project;
		min-width: 0;
		position: relative;
	}

	.bds-im-zone-switcher {
		position: relative;
		min-width: 0;
	}

	.bds-im-zone-switcher > summary {
		list-style: none;
	}

	.bds-im-zone-switcher > summary::-webkit-details-marker {
		display: none;
	}

	.bds-im-zone-switcher__summary {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr) 14px;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 5px 9px 5px 6px;
		border: 1px solid rgba(1, 98, 67, 0.16);
		border-radius: 12px;
		background: #fff;
		color: #172033;
		box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
		cursor: pointer;
		user-select: none;
	}

	.bds-im-zone-switcher__summary > .bds-im-toolbar-icon {
		width: 36px;
		height: 36px;
		padding: 9px;
		border-radius: 10px;
		background: rgba(227, 235, 178, 0.52);
		color: #016243;
	}

	.bds-im-toolbar-project__text {
		display: block;
		min-width: 0;
		line-height: 1.12;
	}

	.bds-im-toolbar-project__text strong,
	.bds-im-toolbar-project__text small {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bds-im-toolbar-project__text strong {
		color: #172033;
		font-size: 12px;
		font-weight: 850;
	}

	.bds-im-toolbar-project__text small {
		margin-top: 3px;
		color: #64748b;
		font-size: 9.5px;
		font-weight: 650;
	}

	.bds-im-zone-switcher__summary:hover,
	.bds-im-zone-switcher__summary:focus-visible,
	.bds-im-zone-switcher[open] .bds-im-zone-switcher__summary {
		border-color: #6bb74a;
		background: #fbfdf7;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.07);
		outline: none;
	}

	.bds-im-zone-switcher[open] .bds-im-toolbar-chevron {
		transform: rotate(180deg);
	}

	.bds-im-zone-switcher__menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 220;
		width: min(360px, calc(100vw - 28px));
		max-height: min(56dvh, 420px);
		overflow: auto;
		padding: 7px;
		border: 1px solid rgba(1, 98, 67, 0.16);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 16px 42px rgba(15, 23, 42, 0.17);
	}

	.bds-im-zone-switcher__heading {
		padding: 7px 9px 9px;
		color: #516157;
		font-size: 9.5px;
		font-weight: 850;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.bds-im-zone-switcher__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 42px;
		padding: 8px 10px;
		border-radius: 9px;
		color: #172033;
		font-size: 11px;
		font-weight: 750;
		text-decoration: none;
	}

	.bds-im-zone-switcher__item:hover,
	.bds-im-zone-switcher__item:focus-visible {
		background: rgba(227, 235, 178, 0.48);
		color: #016243;
		outline: none;
	}

	.bds-im-zone-switcher__item.is-current {
		background: rgba(191, 223, 116, 0.30);
		color: #016243;
	}

	.bds-im-zone-switcher__item small {
		flex: 0 0 auto;
		padding: 3px 6px;
		border-radius: 999px;
		background: rgba(2, 149, 79, 0.09);
		color: #016243;
		font-size: 8.5px;
	}

	.bds-im-zone-switcher__empty {
		padding: 10px;
		color: #64748b;
		font-size: 10.5px;
		line-height: 1.45;
	}

	/* Flatten the desktop tools wrapper so Interest can become the second header item. */
	.bds-im-toolbar-tools {
		display: contents;
	}

	.bds-im-price-mode,
	.bds-im-toolbar-button[data-bds-im-legend-toggle] {
		display: none !important;
	}

	.bds-im-toolbar-button--interest {
		grid-area: interest;
		width: 48px;
		height: 48px;
		min-height: 48px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 0;
		padding: 0 !important;
		border: 1px solid rgba(1, 98, 67, 0.22) !important;
		border-radius: 12px !important;
		background: #fff !important;
		color: #016243 !important;
		box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
		position: relative;
	}

	.bds-im-toolbar-button--interest > span:not(.bds-im-toolbar-icon):not(.bds-im-toolbar-badge) {
		display: none !important;
	}

	.bds-im-toolbar-button--interest .bds-im-toolbar-icon {
		width: 20px;
		height: 20px;
	}

	.bds-im-toolbar-button--interest .bds-im-toolbar-badge {
		position: absolute;
		top: 4px;
		right: 4px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 999px;
		background: #d2e27f;
		color: #016243;
		font-size: 8px;
		font-weight: 900;
	}

	.bds-im-toolbar-button--interest:hover,
	.bds-im-toolbar-button--interest:focus-visible,
	.bds-im-toolbar-button--interest[aria-expanded="true"] {
		border-color: #6bb74a !important;
		background: rgba(227, 235, 178, 0.55) !important;
		color: #016243 !important;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.07) !important;
		outline: none;
	}

	/* Search / Filter remain the current approved controls; only their grid slots are declared. */
	.bds-im-filter-search {
		grid-area: search;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.bds-im-filter-toggle {
		grid-area: filter;
		justify-self: start;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		position: static;
		justify-self: end;
	}

	.bds-im-filter-summary {
		display: none !important;
	}
}

/* Very small portrait phones: keep project identity readable, never wrap the row. */
@media (max-width: 359px) and (orientation: portrait) {
	.bds-im-zone-switcher__summary {
		grid-template-columns: 34px minmax(0, 1fr) 12px;
		gap: 6px;
		padding-right: 7px;
	}

	.bds-im-zone-switcher__summary > .bds-im-toolbar-icon {
		width: 34px;
		height: 34px;
	}

	.bds-im-toolbar-project__text strong {
		font-size: 11px;
	}

	.bds-im-toolbar-project__text small {
		font-size: 9px;
	}

	.bds-im-toolbar-button--interest {
		width: 44px;
		height: 44px;
		min-height: 44px;
	}
}

/* Phone landscape: one compact header row, no extra vertical band. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-viewer-shell[data-filters-enabled="1"] .bds-im-viewer-header {
		display: none !important;
	}

	.bds-im-filterbar {
		flex: 0 0 auto;
		z-index: 90;
		padding: 0;
		border-bottom: 1px solid rgba(1, 98, 67, 0.12);
		background: rgba(255, 255, 255, 0.98);
	}

	.bds-im-filterbar__main {
		display: grid;
		grid-template-columns: minmax(165px, 0.9fr) minmax(210px, 1.8fr) auto auto;
		grid-template-areas: "project search filter interest";
		align-items: center;
		gap: 6px;
		min-height: 50px;
		padding: 5px 8px;
	}

	.bds-im-toolbar-project {
		display: block;
		grid-area: project;
		min-width: 0;
		position: relative;
	}

	.bds-im-zone-switcher {
		position: relative;
		min-width: 0;
	}

	.bds-im-zone-switcher > summary {
		list-style: none;
	}

	.bds-im-zone-switcher > summary::-webkit-details-marker {
		display: none;
	}

	.bds-im-zone-switcher__summary {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr) 12px;
		align-items: center;
		gap: 6px;
		min-height: 40px;
		padding: 3px 7px 3px 4px;
		border: 1px solid rgba(1, 98, 67, 0.16);
		border-radius: 10px;
		background: #fff;
		color: #172033;
		cursor: pointer;
	}

	.bds-im-zone-switcher__summary > .bds-im-toolbar-icon {
		width: 32px;
		height: 32px;
		padding: 8px;
		border-radius: 8px;
		background: rgba(227, 235, 178, 0.52);
		color: #016243;
	}

	.bds-im-toolbar-project__text {
		display: block;
		min-width: 0;
		line-height: 1.08;
	}

	.bds-im-toolbar-project__text strong,
	.bds-im-toolbar-project__text small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bds-im-toolbar-project__text strong {
		font-size: 10.5px;
		font-weight: 850;
	}

	.bds-im-toolbar-project__text small {
		margin-top: 2px;
		color: #64748b;
		font-size: 8.5px;
		font-weight: 650;
	}

	.bds-im-zone-switcher__menu {
		position: absolute;
		top: calc(100% + 5px);
		left: 0;
		z-index: 220;
		width: min(320px, 52vw);
		max-height: min(64dvh, 300px);
		overflow: auto;
		padding: 6px;
		border: 1px solid rgba(1, 98, 67, 0.16);
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 14px 34px rgba(15, 23, 42, 0.17);
	}

	.bds-im-zone-switcher__heading {
		padding: 6px 8px;
		color: #516157;
		font-size: 8.5px;
		font-weight: 850;
		text-transform: uppercase;
	}

	.bds-im-zone-switcher__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: 36px;
		padding: 7px 8px;
		border-radius: 8px;
		color: #172033;
		font-size: 10px;
		font-weight: 750;
		text-decoration: none;
	}

	.bds-im-zone-switcher__item:hover,
	.bds-im-zone-switcher__item:focus-visible,
	.bds-im-zone-switcher__item.is-current {
		background: rgba(227, 235, 178, 0.48);
		color: #016243;
		outline: none;
	}

	.bds-im-zone-switcher__item small {
		font-size: 8px;
	}

	.bds-im-toolbar-tools {
		display: contents;
	}

	.bds-im-price-mode,
	.bds-im-toolbar-button[data-bds-im-legend-toggle] {
		display: none !important;
	}

	.bds-im-toolbar-button--interest {
		grid-area: interest;
		position: relative;
		width: 40px;
		height: 40px;
		min-height: 40px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		border: 1px solid rgba(1, 98, 67, 0.22) !important;
		border-radius: 10px !important;
		background: #fff !important;
		color: #016243 !important;
		box-shadow: none !important;
	}

	.bds-im-toolbar-button--interest > span:not(.bds-im-toolbar-icon):not(.bds-im-toolbar-badge) {
		display: none !important;
	}

	.bds-im-toolbar-button--interest .bds-im-toolbar-icon {
		width: 18px;
		height: 18px;
	}

	.bds-im-toolbar-button--interest .bds-im-toolbar-badge {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
		border-radius: 999px;
		background: #d2e27f;
		color: #016243;
		font-size: 7px;
		font-weight: 900;
	}

	.bds-im-filter-search {
		grid-area: search;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.bds-im-filter-toggle {
		grid-area: filter;
	}

	.bds-im-filter-clear:not([hidden]) {
		position: absolute;
		top: calc(100% + 5px);
		right: 8px;
		z-index: 130;
	}

	.bds-im-filter-summary {
		display: none !important;
	}

	/* Header removal automatically returns its height to the already-approved flex Viewer. */
	.bds-im-viewer-stage {
		flex: 1 1 0%;
		min-height: 0 !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.32 — Hotfix 4.2B: Mobile Search + Filter + Price Mode
 *
 * MOBILE ONLY. Desktop Hotfix 3 and approved 4.1 / 4.2A frame are frozen.
 * Scope:
 * - portrait: Project/Interest -> Search/Filter -> Price mode
 * - landscape: keep at most 2 rows; wide phones collapse Price mode into row 1
 * - preserve current Filter Engine and Price Mode Engine (CSS/layout only)
 * - keep Legend out of the mobile toolbar until 4.4B
 * ------------------------------------------------------------------ */

@media (max-width: 767px) and (orientation: portrait) {
	/*
	 * Normal portrait state: two columns. When Xóa lọc is visible, :has()
	 * temporarily adds a third compact column without permanently shrinking
	 * the search field on the common unfiltered state.
	 */
	.bds-im-filterbar__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"project interest"
			"search filter"
			"price price";
		align-items: center;
		gap: 7px 8px;
		padding: 7px 8px 8px;
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"project project interest"
			"search filter clear"
			"price price price";
	}

	.bds-im-filter-search {
		grid-area: search;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 46px;
		border-color: rgba(1, 98, 67, 0.16);
		border-radius: 12px;
		background: #fff;
	}

	.bds-im-filter-search:focus-within {
		border-color: #02954f;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.08);
	}

	.bds-im-filter-search input {
		min-width: 0;
		height: 44px;
		padding-left: 38px;
		padding-right: 68px;
		font-size: 13px;
	}

	.bds-im-filter-search__icon {
		left: 13px;
		width: 16px;
		height: 16px;
		color: #016243;
	}

	.bds-im-filter-search__button {
		top: 4px;
		right: 4px;
		height: 38px;
		min-width: 58px;
		padding: 0 12px;
		border-radius: 9px;
		background: #016243 !important;
		border-color: #016243 !important;
		color: #fff !important;
		font-size: 11px;
		font-weight: 850;
	}

	.bds-im-filter-search__button:hover,
	.bds-im-filter-search__button:focus-visible,
	.bds-im-filter-search__button:active {
		background: #077840 !important;
		border-color: #077840 !important;
		box-shadow: 0 0 0 3px rgba(7, 120, 64, 0.10) !important;
		outline: none;
	}

	.bds-im-filter-toggle {
		grid-area: filter;
		justify-self: stretch;
		min-height: 46px;
		padding: 0 12px !important;
		gap: 7px;
		border: 1px solid rgba(1, 98, 67, 0.16) !important;
		border-radius: 12px !important;
		background: #fff !important;
		color: #172033 !important;
		font-size: 11px;
		font-weight: 800;
		white-space: nowrap;
	}

	.bds-im-filter-toggle:hover,
	.bds-im-filter-toggle:focus-visible,
	.bds-im-filter-toggle[aria-expanded="true"] {
		border-color: #6bb74a !important;
		background: rgba(227, 235, 178, 0.52) !important;
		color: #016243 !important;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.07) !important;
		outline: none;
	}

	.bds-im-filter-toggle .bds-im-toolbar-icon {
		width: 17px;
		height: 17px;
		color: #016243;
	}

	.bds-im-filter-toggle__count {
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: #d2e27f;
		color: #016243;
		font-size: 8px;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		position: static;
		justify-self: stretch;
		min-height: 46px;
		padding: 0 10px !important;
		gap: 6px;
		border: 1px solid rgba(1, 98, 67, 0.14) !important;
		border-radius: 12px !important;
		background: #fbfdf7 !important;
		color: #516157 !important;
		font-size: 10px;
		font-weight: 800;
		white-space: nowrap;
	}

	.bds-im-filter-clear:not([hidden]):hover,
	.bds-im-filter-clear:not([hidden]):focus-visible {
		border-color: #6bb74a !important;
		background: #e3ebb2 !important;
		color: #016243 !important;
		outline: none;
	}

	/* Restore the real project price selector hidden by 4.2A. */
	.bds-im-price-mode {
		grid-area: price;
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 9px;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 44px;
		min-height: 44px;
		padding: 0 8px 0 11px;
		border: 1px solid rgba(1, 98, 67, 0.16) !important;
		border-radius: 12px;
		background: linear-gradient(180deg, #ffffff 0%, #fbfdf7 100%);
		box-shadow: 0 3px 10px rgba(15, 23, 42, 0.035);
		white-space: nowrap;
	}

	.bds-im-price-mode:focus-within {
		border-color: #02954f !important;
		background: #f6f9e9;
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.08);
	}

	.bds-im-price-mode__label {
		display: inline !important;
		color: #016243;
		font-size: 8.5px;
		font-weight: 900;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: 0.035em;
	}

	.bds-im-price-mode select {
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 34px;
		padding: 0 30px 0 8px;
		border: 0;
		border-radius: 9px;
		background-color: rgba(227, 235, 178, 0.24);
		color: #172033;
		font-size: 11px;
		font-weight: 800;
		outline: none;
		cursor: pointer;
	}

	.bds-im-price-mode select:hover,
	.bds-im-price-mode select:focus {
		background-color: rgba(210, 226, 127, 0.34);
		color: #016243;
	}

	/* Legend stays out of the mobile toolbar until its bottom-sheet phase. */
	.bds-im-toolbar-button[data-bds-im-legend-toggle] {
		display: none !important;
	}
}

@media (max-width: 359px) and (orientation: portrait) {
	.bds-im-filterbar__main {
		gap: 6px;
		padding-inline: 7px;
	}

	.bds-im-filter-search input {
		font-size: 12px;
		padding-right: 61px;
	}

	.bds-im-filter-search__button {
		min-width: 52px;
		padding-inline: 9px;
	}

	.bds-im-filter-toggle {
		padding-inline: 9px !important;
	}

	.bds-im-filter-clear:not([hidden]) {
		width: 42px;
		min-width: 42px;
		padding: 0 !important;
		justify-content: center;
	}

	.bds-im-filter-clear:not([hidden]) > span:not(.bds-im-toolbar-icon) {
		display: none !important;
	}

	.bds-im-price-mode {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 5px;
		padding-left: 8px;
	}

	.bds-im-price-mode__label {
		font-size: 8px;
	}

	.bds-im-price-mode select {
		font-size: 10px;
	}
}

/* Phone landscape: at most two compact rows. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-filterbar__main {
		display: grid;
		grid-template-columns: minmax(145px, 0.9fr) minmax(180px, 1.6fr) auto auto;
		grid-template-areas:
			"project search filter interest"
			"price price price price";
		align-items: center;
		gap: 5px 6px;
		min-height: 0;
		padding: 5px 8px 6px;
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(140px, 0.85fr) minmax(165px, 1.45fr) auto auto auto;
		grid-template-areas:
			"project search filter clear interest"
			"price price price price price";
	}

	.bds-im-filter-search {
		grid-area: search;
		min-width: 0;
		max-width: none;
		min-height: 40px;
		border-radius: 10px;
		border-color: rgba(1, 98, 67, 0.16);
	}

	.bds-im-filter-search input {
		height: 38px;
		padding-left: 34px;
		padding-right: 56px;
		font-size: 10.5px;
	}

	.bds-im-filter-search__icon {
		left: 11px;
		width: 15px;
		height: 15px;
		color: #016243;
	}

	.bds-im-filter-search__button {
		top: 3px;
		right: 3px;
		height: 34px;
		min-width: 48px;
		padding: 0 8px;
		border-radius: 8px;
		background: #016243 !important;
		border-color: #016243 !important;
		font-size: 9.5px;
	}

	.bds-im-filter-toggle {
		grid-area: filter;
		min-height: 40px;
		padding: 0 9px !important;
		gap: 5px;
		border: 1px solid rgba(1, 98, 67, 0.16) !important;
		border-radius: 10px !important;
		background: #fff !important;
		font-size: 9.5px;
		white-space: nowrap;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		position: static;
		min-width: 38px;
		min-height: 40px;
		padding: 0 8px !important;
		border: 1px solid rgba(1, 98, 67, 0.14) !important;
		border-radius: 10px !important;
		background: #fbfdf7 !important;
		color: #516157 !important;
		font-size: 9px;
		white-space: nowrap;
	}

	.bds-im-price-mode {
		grid-area: price;
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 7px;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 36px;
		min-height: 36px;
		padding: 0 7px 0 9px;
		border: 1px solid rgba(1, 98, 67, 0.14) !important;
		border-radius: 9px;
		background: #fff;
	}

	.bds-im-price-mode__label {
		display: inline !important;
		color: #016243;
		font-size: 7.5px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.bds-im-price-mode select {
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 28px;
		padding: 0 24px 0 6px;
		border: 0;
		border-radius: 7px;
		background-color: rgba(227, 235, 178, 0.24);
		color: #172033;
		font-size: 9.5px;
		font-weight: 800;
		outline: none;
	}

	.bds-im-toolbar-button[data-bds-im-legend-toggle] {
		display: none !important;
	}
}

/* Wide landscape phones can keep every primary control on one row. */
@media (orientation: landscape) and (min-width: 780px) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(145px, 0.85fr) minmax(175px, 1.25fr) auto minmax(165px, 0.95fr) auto;
		grid-template-areas: "project search filter price interest";
		gap: 5px;
		padding-block: 5px;
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(135px, 0.8fr) minmax(155px, 1.1fr) auto auto minmax(155px, 0.9fr) auto;
		grid-template-areas: "project search filter clear price interest";
	}

	.bds-im-price-mode {
		height: 40px;
		min-height: 40px;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0 6px;
	}

	.bds-im-price-mode__label {
		display: none !important;
	}

	.bds-im-price-mode select {
		height: 30px;
		font-size: 9.5px;
	}

	.bds-im-filter-clear:not([hidden]) > span:not(.bds-im-toolbar-icon) {
		display: none !important;
	}

	.bds-im-filter-clear:not([hidden]) {
		width: 38px;
		padding: 0 !important;
		justify-content: center;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.33 — Hotfix 4.2B.1: Mobile compact search + price row
 *
 * - Fix vertical centering of the Tìm button on Android/iOS.
 * - Portrait and landscape share one compact control row:
 *   Search (~45-50%) + Filter + Price mode.
 * - Xóa lọc gets its own compact row only when active, avoiding squeezed
 *   search/price controls on narrow phones.
 * - Desktop layout remains frozen; only the label text becomes "Xem giá".
 * ------------------------------------------------------------------ */

/* Browser/theme neutral search action alignment. */
.bds-im-filter-search__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	line-height: 1 !important;
	text-align: center !important;
	vertical-align: middle !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	appearance: none;
	-webkit-appearance: none;
}

@media (max-width: 767px) and (orientation: portrait) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(0, 1.45fr) auto minmax(112px, 1fr);
		grid-template-areas:
			"project project interest"
			"search filter price";
		gap: 7px 7px;
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(0, 1.45fr) auto minmax(112px, 1fr);
		grid-template-areas:
			"project project interest"
			"search filter price"
			"clear clear clear";
	}

	.bds-im-filter-search,
	.bds-im-filter-toggle,
	.bds-im-price-mode {
		min-height: 44px;
		height: 44px;
	}

	.bds-im-filter-search input {
		height: 42px;
		padding-right: 55px;
		font-size: 12px;
	}

	.bds-im-filter-search__button {
		height: 34px;
		min-width: 48px;
		padding: 0 9px !important;
		font-size: 10px;
	}

	.bds-im-filter-toggle {
		min-width: 66px;
		padding: 0 9px !important;
		font-size: 10px;
	}

	.bds-im-filter-toggle .bds-im-toolbar-icon {
		width: 15px;
		height: 15px;
	}

	.bds-im-price-mode {
		grid-area: price;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 5px;
		padding: 0 5px 0 7px;
	}

	.bds-im-price-mode__label {
		font-size: 7.5px;
		letter-spacing: 0.02em;
	}

	.bds-im-price-mode select {
		height: 32px;
		padding: 0 22px 0 5px;
		font-size: 9.5px;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		position: static;
		justify-self: end;
		width: auto;
		min-height: 34px;
		height: 34px;
		padding: 0 10px !important;
		font-size: 9px;
	}
}

@media (max-width: 374px) and (orientation: portrait) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(0, 1.35fr) auto minmax(100px, 0.95fr);
		gap: 6px;
	}

	.bds-im-filter-search input {
		padding-left: 33px;
		padding-right: 49px;
		font-size: 11px;
	}

	.bds-im-filter-search__button {
		min-width: 43px;
		padding-inline: 7px !important;
	}

	.bds-im-filter-toggle {
		min-width: 58px;
		padding-inline: 7px !important;
	}

	.bds-im-filter-toggle > span:not(.bds-im-toolbar-icon):not(.bds-im-filter-toggle__count) {
		font-size: 9px;
	}

	.bds-im-price-mode {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 4px;
	}

	.bds-im-price-mode__label {
		display: none !important;
	}

	.bds-im-price-mode select {
		font-size: 9px;
	}
}

/* Phone landscape: one compact primary-control row below the project header. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(135px, 0.9fr) minmax(170px, 1.35fr) auto minmax(150px, 0.95fr) auto;
		grid-template-areas: "project search filter price interest";
		gap: 5px;
		padding: 5px 8px;
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(135px, 0.9fr) minmax(160px, 1.25fr) auto minmax(145px, 0.9fr) auto;
		grid-template-areas:
			"project search filter price interest"
			"clear clear clear clear clear";
	}

	.bds-im-filter-search,
	.bds-im-filter-toggle,
	.bds-im-price-mode {
		height: 40px;
		min-height: 40px;
	}

	.bds-im-filter-search__button {
		height: 32px;
		min-width: 46px;
		padding: 0 8px !important;
		font-size: 9.5px;
	}

	.bds-im-price-mode {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 5px;
		padding: 0 5px 0 7px;
	}

	.bds-im-price-mode__label {
		display: inline !important;
		font-size: 7px;
	}

	.bds-im-price-mode select {
		height: 30px;
		font-size: 9px;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		justify-self: end;
		width: auto;
		min-height: 30px;
		height: 30px;
		padding: 0 8px !important;
		font-size: 8.5px;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.34 — Hotfix 4.2B.2: Landscape search width + Tìm alignment
 *
 * MOBILE LANDSCAPE ONLY:
 * - shrink Search to ~70% of the previous landscape share
 * - give Price Mode more room so "Xem giá" + price label stay readable
 * - hard-lock the Tìm button as a normal grid item so browser/theme styles
 *   cannot offset its text vertically or horizontally
 * ------------------------------------------------------------------ */

/* Keep the action button centered as a real grid item on mobile. */
@media (max-width: 767px),
       (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-filter-search__button {
		position: static !important;
		inset: auto !important;
		align-self: center !important;
		justify-self: end !important;
		display: inline-grid !important;
		place-items: center !important;
		margin: 0 4px 0 0 !important;
		padding-block: 0 !important;
		line-height: 1 !important;
		text-indent: 0 !important;
		transform: none !important;
	}

	.bds-im-filter-search__button:hover,
	.bds-im-filter-search__button:focus-visible,
	.bds-im-filter-search__button:active {
		transform: none !important;
	}
}

/* Landscape: Search uses ~70% of its previous 1.35fr share; Price gets the space back. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-filterbar__main {
		grid-template-columns: minmax(145px, 0.9fr) minmax(145px, 0.95fr) auto minmax(205px, 1.2fr) auto;
		grid-template-areas: "project search filter price interest";
	}

	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		grid-template-columns: minmax(140px, 0.88fr) minmax(140px, 0.9fr) auto minmax(200px, 1.2fr) auto;
		grid-template-areas:
			"project search filter price interest"
			"clear clear clear clear clear";
	}

	.bds-im-price-mode {
		min-width: 0;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 7px;
		padding-inline: 8px 6px;
	}

	.bds-im-price-mode__label {
		display: inline-flex !important;
		align-items: center;
		white-space: nowrap;
		font-size: 7.5px;
	}

	.bds-im-price-mode select {
		min-width: 0;
		width: 100%;
		font-size: 9.5px;
		text-overflow: ellipsis;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.35 — Hotfix 4.2B.3: Mobile Portrait Price Row
 *
 * PORTRAIT MOBILE ONLY.
 * - Keep approved v1.14.2.34 landscape layout untouched.
 * - Row 1: Project / Zone + Interested units.
 * - Row 2: Search + Filter.
 * - Row 3: Xem giá full width.
 * - If Xóa lọc is active, place it on a small fourth row so the three
 *   primary rows never get squeezed.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) and (orientation: portrait) {
	.bds-im-filterbar__main,
	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"project interest"
			"search filter"
			"price price"
			"clear clear";
		align-items: center;
		gap: 7px 8px;
	}

	.bds-im-filter-search {
		grid-area: search;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 46px;
		min-height: 46px;
	}

	.bds-im-filter-search input {
		height: 44px;
		padding-right: 66px;
		font-size: 13px;
	}

	.bds-im-filter-search__button {
		height: 38px;
		min-width: 58px;
		padding-inline: 11px !important;
		font-size: 11px;
	}

	.bds-im-filter-toggle {
		grid-area: filter;
		min-width: 78px;
		height: 46px;
		min-height: 46px;
		padding-inline: 11px !important;
		font-size: 11px;
	}

	.bds-im-price-mode {
		grid-area: price;
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		align-items: center;
		gap: 9px;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 46px;
		min-height: 46px;
		padding: 0 8px 0 11px;
	}

	.bds-im-price-mode__label {
		display: inline-flex !important;
		align-items: center;
		white-space: nowrap;
		font-size: 8.5px;
		letter-spacing: 0.035em;
	}

	.bds-im-price-mode select {
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 34px;
		padding: 0 30px 0 9px;
		font-size: 11px;
		text-overflow: ellipsis;
	}

	.bds-im-filter-clear:not([hidden]) {
		grid-area: clear;
		position: static;
		justify-self: end;
		width: auto;
		height: 34px;
		min-height: 34px;
		padding: 0 10px !important;
		font-size: 9px;
	}
}

@media (max-width: 359px) and (orientation: portrait) {
	.bds-im-filterbar__main,
	.bds-im-filterbar__main:has(.bds-im-filter-clear:not([hidden])) {
		gap: 6px;
	}

	.bds-im-filter-search input {
		padding-left: 33px;
		padding-right: 58px;
		font-size: 12px;
	}

	.bds-im-filter-search__button {
		min-width: 51px;
		padding-inline: 8px !important;
	}

	.bds-im-filter-toggle {
		min-width: 70px;
		padding-inline: 8px !important;
		font-size: 10px;
	}

	.bds-im-price-mode {
		grid-template-columns: auto minmax(0, 1fr) !important;
		gap: 6px;
		padding-left: 8px;
	}

	.bds-im-price-mode__label {
		display: inline-flex !important;
		font-size: 7.5px;
	}

	.bds-im-price-mode select {
		font-size: 10px;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.36 — Hotfix 4.3A: Zoom / Home + Minimap Mobile
 * Mobile-only map controls. Desktop Hotfix 3 remains untouched.
 * ------------------------------------------------------------------ */

/* Portrait phones: compact touch controls at the right edge. */
@media (max-width: 767px) and (orientation: portrait) {
	/* Hotfix 3 initially hid these until the mobile phase. */
	.bds-im-map-controls {
		display: flex !important;
		position: absolute;
		top: 10px;
		right: 9px;
		z-index: 64;
		flex-direction: column;
		gap: 6px;
		padding: 4px;
		border: 1px solid rgba(107, 183, 74, 0.24);
		border-radius: 13px;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.13);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
	}

	.bds-im-map-controls button {
		display: grid !important;
		place-items: center !important;
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.98) !important;
		color: #385247 !important;
		box-shadow: none !important;
		transform: none !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.bds-im-map-controls button:active,
	.bds-im-map-controls button:focus-visible {
		background: #e3ebb2 !important;
		color: #016243 !important;
		outline: none !important;
	}

	.bds-im-map-controls svg {
		width: 18px !important;
		height: 18px !important;
		stroke: currentColor;
		stroke-width: 1.9;
		fill: none;
	}

	.bds-im-map-controls__gap {
		height: 4px;
		margin: 0 5px;
		border-top: 1px solid rgba(107, 183, 74, 0.22);
	}

	/* Keep a small visual navigator above the horizontal status legend. */
	.bds-im-viewer .navigator {
		display: block !important;
		right: 9px !important;
		bottom: 56px !important;
		width: 94px !important;
		height: 64px !important;
		border: 1px solid rgba(107, 183, 74, 0.48) !important;
		border-radius: 11px !important;
		background: rgba(255, 255, 255, 0.80) !important;
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.14) !important;
		overflow: hidden !important;
		opacity: 0.94 !important;
		pointer-events: none !important;
	}

	.bds-im-viewer .displayregion {
		border: 2px solid #02954f !important;
		background: rgba(191, 223, 116, 0.16) !important;
	}
}

/*
 * Phone landscape can be wider than the normal mobile breakpoint.
 * Detect it by orientation + short viewport + coarse pointer, matching 4.1C/4.1D.
 */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) and (any-pointer: coarse) {
	.bds-im-map-controls {
		display: flex !important;
		position: absolute;
		top: 8px;
		right: 9px;
		z-index: 64;
		flex-direction: column;
		gap: 4px;
		padding: 4px;
		border: 1px solid rgba(107, 183, 74, 0.24);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.12);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
	}

	.bds-im-map-controls button {
		display: grid !important;
		place-items: center !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 9px !important;
		background: rgba(255, 255, 255, 0.98) !important;
		color: #385247 !important;
		box-shadow: none !important;
		transform: none !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.bds-im-map-controls button:active,
	.bds-im-map-controls button:focus-visible {
		background: #e3ebb2 !important;
		color: #016243 !important;
		outline: none !important;
	}

	.bds-im-map-controls svg {
		width: 16px !important;
		height: 16px !important;
		stroke: currentColor;
		stroke-width: 1.9;
		fill: none;
	}

	.bds-im-map-controls__gap {
		height: 3px;
		margin: 0 4px;
		border-top: 1px solid rgba(107, 183, 74, 0.22);
	}

	.bds-im-viewer .navigator {
		display: block !important;
		right: 9px !important;
		bottom: 58px !important;
		width: 112px !important;
		height: 72px !important;
		border: 1px solid rgba(107, 183, 74, 0.48) !important;
		border-radius: 11px !important;
		background: rgba(255, 255, 255, 0.80) !important;
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.14) !important;
		overflow: hidden !important;
		opacity: 0.94 !important;
		pointer-events: none !important;
	}

	.bds-im-viewer .displayregion {
		border: 2px solid #02954f !important;
		background: rgba(191, 223, 116, 0.16) !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.37 — Hotfix 4.3B: Badge giá Mobile
 * Mobile/coarse-pointer only. Desktop Hotfix 3 is frozen.
 * ------------------------------------------------------------------ */
@media (max-width: 767px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-unit-price-tag-layer {
		z-index: 38;
		pointer-events: none;
	}

	.bds-im-unit-price-tag {
		--bds-im-mobile-price-status: #9b7200;
		min-width: 31px;
		height: 20px;
		padding: 0 6px;
		border: 1.25px solid rgba(255, 255, 255, 0.96);
		border-radius: 8px;
		background: var(--bds-im-mobile-price-status);
		color: #fff;
		font-size: 10px;
		font-weight: 850;
		line-height: 17.5px;
		letter-spacing: -0.01em;
		box-shadow: 0 3px 8px rgba(15, 23, 42, 0.20);
		transform: translate(-50%, calc(-100% - 3px)) scale(var(--bds-im-mobile-badge-scale, 1));
		transform-origin: 50% 100%;
		pointer-events: auto;
		cursor: pointer;
		outline: none;
		-webkit-tap-highlight-color: transparent;
		transition: opacity 100ms ease, transform 100ms ease, filter 100ms ease;
	}

	.bds-im-unit-price-tag::after {
		border-left-width: 4px;
		border-right-width: 4px;
		border-top-width: 5px;
		border-top-color: var(--bds-im-mobile-price-status);
	}

	.bds-im-unit-price-tag__mobile-touch {
		position: absolute;
		inset: -8px -7px -9px;
		z-index: 0;
		border-radius: 14px;
		background: transparent;
		pointer-events: auto;
	}

	.bds-im-unit-price-tag:focus-visible,
	.bds-im-unit-price-tag:active {
		filter: brightness(0.92) saturate(1.08);
		box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.13), 0 4px 10px rgba(15, 23, 42, 0.22);
	}

	/* Màn cảm ứng mở popup để xem đủ các mức giá; không bung tooltip hover lớn. */
	.bds-im-unit-price-tag.is-all-prices::before {
		display: none !important;
	}

	.bds-im-unit-price-tag.is-mobile-density-hidden {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.bds-im-viewer-shell[data-bds-im-mobile-badge-density="far"] {
		--bds-im-mobile-badge-scale: 0.90;
	}

	.bds-im-viewer-shell[data-bds-im-mobile-badge-density="medium"] {
		--bds-im-mobile-badge-scale: 0.96;
	}

	.bds-im-viewer-shell[data-bds-im-mobile-badge-density="near"] {
		--bds-im-mobile-badge-scale: 1;
	}

	.bds-im-unit-price-tag.is-interested .bds-im-unit-price-tag__value::after {
		content: '♥';
		position: absolute;
		top: -7px;
		right: -7px;
		width: 12px;
		height: 12px;
		display: grid;
		place-items: center;
		border: 1px solid #fff;
		border-radius: 999px;
		background: #016243;
		color: #fff;
		font-size: 6px;
		line-height: 1;
		box-shadow: 0 2px 5px rgba(1, 98, 67, 0.20);
	}

	.bds-im-unit-price-tag__value {
		position: relative;
	}
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
	.bds-im-unit-price-tag {
		min-width: 29px;
		height: 19px;
		padding-inline: 5px;
		font-size: 9.5px;
		line-height: 16.5px;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.38 — Hotfix 4.4A: Bộ lọc Bottom Sheet (mobile only)
 *
 * Reuses the existing Phase 10.3 body portal + Filter Engine. This block only
 * changes the mobile presentation into a true VisualViewport-aware bottom
 * sheet. Desktop filter popover remains frozen.
 * ------------------------------------------------------------------ */

.bds-im-filter-mobile-backdrop {
	background: rgba(7, 24, 18, 0.34) !important;
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
}

.bds-im-filter-panel.is-mobile-portal {
	border: 1px solid rgba(107, 183, 74, 0.26) !important;
	border-bottom: 0 !important;
	border-radius: var(--bds-im-mobile-sheet-radius, 22px) var(--bds-im-mobile-sheet-radius, 22px) 0 0 !important;
	background: #fff !important;
	box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22) !important;
	animation: bds-im-filter-sheet-in 180ms cubic-bezier(.2,.75,.25,1) both;
}

.bds-im-filter-panel.is-mobile-portal::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	z-index: 8;
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: #cbd8c7;
	transform: translateX(-50%);
	pointer-events: none;
}

@keyframes bds-im-filter-sheet-in {
	from {
		opacity: 0.96;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header {
	padding: 22px 16px 12px !important;
	border-bottom: 1px solid rgba(107, 183, 74, 0.18) !important;
	background: linear-gradient(180deg, #f6f9e9 0%, #ffffff 100%) !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header strong {
	color: #016243 !important;
	font-size: 16px !important;
	font-weight: 850 !important;
	line-height: 1.25 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header span {
	margin-top: 3px !important;
	color: #66756b !important;
	font-size: 11px !important;
	line-height: 1.35 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__close {
	width: 38px !important;
	height: 38px !important;
	border: 1px solid rgba(107, 183, 74, 0.26) !important;
	border-radius: 11px !important;
	background: rgba(255, 255, 255, 0.96) !important;
	color: #016243 !important;
	font-size: 23px !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__close:hover,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__close:focus-visible,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__close:active {
	border-color: #9cc664 !important;
	background: #e3ebb2 !important;
	color: #016243 !important;
	outline: none !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__body {
	padding: 12px 16px 18px !important;
	background: #fff !important;
	scroll-padding-bottom: 92px;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-section {
	padding-top: 5px;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-section + .bds-im-filter-section {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(107, 183, 74, 0.18);
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-section h3 {
	margin: 0 0 9px;
	padding-left: 11px;
	color: #30473a;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .035em;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-section h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: #6bb74a;
	transform: translateY(-50%);
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-field {
	gap: 5px;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-field__label {
	color: #516157;
	font-size: 11px;
	font-weight: 750;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-control {
	min-height: 44px !important;
	height: 44px !important;
	padding-inline: 11px !important;
	border: 1px solid #dce7da !important;
	border-radius: 11px !important;
	background: #fff !important;
	color: #172033 !important;
	font-size: 13px !important;
	box-shadow: none !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-control:hover {
	border-color: #9cc664 !important;
	background: #fbfdf7 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-control:focus,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-control:focus-visible {
	border-color: #02954f !important;
	box-shadow: 0 0 0 3px rgba(2, 149, 79, 0.10) !important;
	outline: none !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__footer {
	gap: 10px !important;
	padding: 11px 16px max(12px, env(safe-area-inset-bottom)) !important;
	border-top: 1px solid rgba(107, 183, 74, 0.20) !important;
	background: rgba(255, 255, 255, 0.98) !important;
	box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.07) !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply {
	flex: 1 1 0 !important;
	min-height: 46px !important;
	padding: 0 14px !important;
	border-radius: 11px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset {
	border: 1px solid #d8e2d7 !important;
	background: #fff !important;
	color: #516157 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset:hover,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset:focus-visible,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset:active {
	border-color: #9cc664 !important;
	background: #f6f9e9 !important;
	color: #016243 !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply {
	border: 1px solid #016243 !important;
	background: #016243 !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(1, 98, 67, 0.18) !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply:hover,
.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply:focus-visible {
	border-color: #077840 !important;
	background: #077840 !important;
	color: #fff !important;
}

.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply:active {
	border-color: #02954f !important;
	background: #02954f !important;
}

/* Portrait: one field per row, optimized for thumb input. */
@media (max-width: 767px) and (orientation: portrait) {
	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-grid {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
}

/* Low-height phone landscape: keep fields compact without changing engine. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header {
		padding: 18px 14px 9px !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header strong {
		font-size: 14px !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__header span {
		display: none !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__body {
		padding: 8px 14px 12px !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 7px 9px !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-control {
		min-height: 38px !important;
		height: 38px !important;
		font-size: 12px !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__footer {
		padding: 8px 14px max(8px, env(safe-area-inset-bottom)) !important;
	}

	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__reset,
	.bds-im-filter-panel.is-mobile-portal .bds-im-filter-panel__apply {
		min-height: 40px !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.39 — Hotfix 4.4B: Căn quan tâm + Chú giải Bottom Sheet
 * MOBILE ONLY. Desktop Hotfix 3 remains frozen.
 * ------------------------------------------------------------------ */

.bds-im-mobile-sheet-backdrop {
	position: fixed !important;
	left: var(--bds-im-sheet-vv-left, 0px) !important;
	top: var(--bds-im-sheet-vv-top, 0px) !important;
	width: var(--bds-im-sheet-vv-width, 100vw) !important;
	height: var(--bds-im-sheet-vv-height, 100vh) !important;
	z-index: 2147483040 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(7, 24, 18, 0.34) !important;
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	touch-action: none;
	overscroll-behavior: none;
}

@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	/* The old inline legend/panel must not consume map space on mobile. */
	.bds-im-viewer-stage > .bds-im-status-legend,
	.bds-im-viewer-stage > .bds-im-interest-panel {
		display: none !important;
	}

	/* Compact trigger replaces the old full-width legend strip. */
	.bds-im-mobile-legend-trigger {
		position: absolute;
		left: 10px;
		bottom: max(10px, env(safe-area-inset-bottom));
		z-index: 71;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 36px;
		padding: 0 11px 0 8px;
		border: 1px solid rgba(107, 183, 74, 0.34) !important;
		border-radius: 999px !important;
		background: rgba(255, 255, 255, 0.94) !important;
		color: #016243 !important;
		box-shadow: 0 7px 18px rgba(15, 23, 42, 0.13) !important;
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		font-size: 10.5px;
		font-weight: 800;
		line-height: 1;
		cursor: pointer;
	}

	.bds-im-mobile-legend-trigger > span {
		width: 20px;
		height: 20px;
		display: inline-grid;
		place-items: center;
		border-radius: 999px;
		background: #e3ebb2;
		color: #016243;
		font-size: 12px;
		font-weight: 900;
	}

	.bds-im-mobile-legend-trigger:hover,
	.bds-im-mobile-legend-trigger:focus-visible,
	.bds-im-mobile-legend-trigger:active {
		border-color: #6bb74a !important;
		background: #f6f9e9 !important;
		color: #016243 !important;
		outline: none !important;
	}

	/* Shared true bottom-sheet geometry. */
	body > .bds-im-interest-panel.is-mobile-sheet,
	body > .bds-im-status-legend.is-mobile-sheet {
		position: fixed !important;
		left: var(--bds-im-sheet-left, 0px) !important;
		top: var(--bds-im-sheet-top, 20vh) !important;
		right: auto !important;
		bottom: auto !important;
		width: var(--bds-im-sheet-width, 100vw) !important;
		height: var(--bds-im-sheet-height, 80vh) !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid rgba(107, 183, 74, 0.28) !important;
		border-bottom: 0 !important;
		border-radius: var(--bds-im-sheet-radius, 22px) var(--bds-im-sheet-radius, 22px) 0 0 !important;
		background: #fff !important;
		box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22) !important;
		z-index: 2147483050 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		overscroll-behavior: contain;
		animation: bds-im-mobile-sheet-in 180ms cubic-bezier(.2,.75,.25,1) both;
	}

	body > .bds-im-interest-panel.is-mobile-sheet::before,
	body > .bds-im-status-legend.is-mobile-sheet::before {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		z-index: 8;
		width: 42px;
		height: 4px;
		border-radius: 999px;
		background: #cbd8c7;
		transform: translateX(-50%);
		pointer-events: none;
	}

	@keyframes bds-im-mobile-sheet-in {
		from { opacity: .96; transform: translateY(18px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Interest sheet: same compact unit card language as approved desktop. */
	body > .bds-im-interest-panel.is-mobile-sheet {
		display: grid !important;
		grid-template-rows: auto minmax(0, 1fr) auto auto;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__header {
		padding: 22px 14px 12px 16px;
		border-bottom: 1px solid rgba(107, 183, 74, 0.18);
		background: linear-gradient(180deg, #f6f9e9 0%, #ffffff 100%);
		color: #016243;
		font-size: 16px;
		font-weight: 850;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close {
		width: 38px;
		height: 38px;
		border: 1px solid rgba(107, 183, 74, 0.26) !important;
		border-radius: 11px !important;
		background: rgba(255,255,255,.96) !important;
		color: #016243 !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__list {
		min-height: 0;
		overflow-y: auto;
		padding: 12px 12px 16px;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__empty {
		align-self: start;
		margin: 12px;
		padding: 14px;
		border: 1px solid #e5ece2;
		border-radius: 12px;
		background: #f8fbf5;
		color: #66756b;
		font-size: 12px;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item {
		grid-template-columns: minmax(0, 1fr) 34px;
		align-items: center;
		min-height: 66px;
		padding: 8px 8px 8px 11px;
		border-color: #e3e8e1;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(15,23,42,.035);
		transform: none;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:focus,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:active {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 48px !important;
		padding: 3px 54px 3px 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #172033 !important;
		text-align: left !important;
		box-shadow: none !important;
		transform: none !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__code {
		font-size: 14px;
		font-weight: 850;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__meta {
		margin-top: 5px;
		color: #516157;
		font-size: 11px;
		font-weight: 700;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__price {
		top: 50%;
		right: 0;
		min-width: 45px;
		transform: translateY(-50%);
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer {
		padding: 10px 12px max(12px, env(safe-area-inset-bottom));
		border-top: 1px solid rgba(107, 183, 74, 0.18);
		background: rgba(255,255,255,.98);
		box-shadow: 0 -7px 20px rgba(15,23,42,.06);
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button {
		height: 44px;
		border-color: #d8e2d7;
		border-radius: 11px;
		font-size: 12px;
	}

	/* Legend sheet: vertical, thumb-friendly list instead of horizontal strip. */
	body > .bds-im-status-legend.is-mobile-sheet {
		display: grid !important;
		grid-template-rows: auto minmax(0, 1fr);
		color: #172033;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__title {
		min-height: 64px;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin: 0 !important;
		padding: 20px 14px 10px 16px !important;
		border-bottom: 1px solid rgba(107, 183, 74, 0.18);
		background: linear-gradient(180deg, #f6f9e9 0%, #ffffff 100%);
		color: #016243;
		font-size: 15px;
		font-weight: 850;
		letter-spacing: 0;
		text-transform: none;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__items {
		width: 100%;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 3px;
		padding: 10px 14px max(16px, env(safe-area-inset-bottom));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__item {
		width: 100%;
		min-height: 44px;
		display: grid;
		grid-template-columns: 16px minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		padding: 7px 8px;
		border-radius: 10px;
		font-size: 12px;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__item:hover {
		background: #f6f9e9;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__swatch {
		width: 14px;
		height: 14px;
		border-radius: 5px;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__label {
		color: #334155;
		font-weight: 750;
		white-space: normal;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__count {
		min-width: 28px;
		height: 24px;
		padding: 0 7px;
		border: 1px solid rgba(107, 183, 74, 0.16);
		background: #f6f9e9;
		color: #016243;
		font-size: 10px;
		font-weight: 850;
	}
}

/* Low-height phone landscape: maximize usable list space. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	.bds-im-mobile-legend-trigger {
		left: 8px;
		bottom: 8px;
		min-height: 32px;
		padding-inline: 7px 9px;
		font-size: 9px;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__header,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__title {
		min-height: 50px;
		padding-top: 17px !important;
		padding-bottom: 7px !important;
		font-size: 13px;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__list {
		padding: 8px 10px 10px;
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3px 8px;
		padding: 8px 12px max(8px, env(safe-area-inset-bottom));
	}

	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__item {
		min-height: 36px;
		font-size: 10.5px;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.40 — Hotfix 4.4B.1: Mobile sheet close + save interest
 * MOBILE ONLY. Keep desktop Hotfix 3 and accepted landscape/map layout frozen.
 * ------------------------------------------------------------------ */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	/*
	 * WordPress/theme button rules can stretch the close button or suppress
	 * the inline SVG after the panel is portalled to <body>. Anchor the close
	 * action to the far right of each sheet header and draw a theme-proof ×.
	 */
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__header,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__title {
		position: relative !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding-right: 66px !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__header > strong,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__title > span {
		min-width: 0 !important;
		max-width: calc(100% - 52px) !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close {
		position: absolute !important;
		top: 17px !important;
		right: 14px !important;
		left: auto !important;
		bottom: auto !important;
		flex: 0 0 38px !important;
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
		display: grid !important;
		place-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid rgba(107, 183, 74, 0.34) !important;
		border-radius: 11px !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		color: #016243 !important;
		box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
		font-size: 0 !important;
		line-height: 1 !important;
		text-indent: 0 !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		transform: none !important;
		filter: none !important;
		overflow: visible !important;
		cursor: pointer !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close svg,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close svg {
		display: none !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close::after,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close::after {
		content: "×";
		display: block !important;
		color: #016243 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 25px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		text-align: center !important;
		transform: translateY(-1px) !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close:focus-visible,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close:active,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close:hover,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close:focus-visible,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close:active {
		border-color: #9cc664 !important;
		background: #e3ebb2 !important;
		background-color: #e3ebb2 !important;
		color: #016243 !important;
		outline: none !important;
	}

	/*
	 * Hotfix 3 intentionally hid the popup favorite action below 992px before
	 * the mobile phase existed. 4.4B now needs the same real localStorage action
	 * on mobile so the Căn quan tâm sheet can be tested end-to-end.
	 */
	.bds-im-unit-panel__heading .bds-im-interest-action {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		max-width: 100% !important;
		min-height: 40px !important;
		margin: 10px 0 0 !important;
		padding: 0 13px !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.bds-im-unit-panel__heading .bds-im-interest-action span {
		display: inline-block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close {
		top: 10px !important;
		right: 12px !important;
		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__close::after,
	body > .bds-im-status-legend.is-mobile-sheet .bds-im-status-legend__close::after {
		font-size: 22px !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.41 — Hotfix 4.4B.2: Mobile interest card visual repair
 * MOBILE ONLY. Presentation-only repair for the approved interest flow.
 * ------------------------------------------------------------------ */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	/*
	 * The desktop card rules intentionally live inside min-width:992px, so the
	 * mobile bottom-sheet needs a complete layout reset after being portalled
	 * to <body>. Do not rely on theme button defaults here.
	 */
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 40px !important;
		align-items: center !important;
		column-gap: 8px !important;
		min-height: 76px !important;
		margin: 0 !important;
		padding: 8px 8px 8px 12px !important;
		border: 1px solid #e3e8e1 !important;
		border-radius: 13px !important;
		background: #ffffff !important;
		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045) !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item + .bds-im-interest-item {
		margin-top: 8px !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:focus,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:focus-visible,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open:active {
		position: relative !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 10px !important;
		row-gap: 4px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 2px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		filter: none !important;
		text-align: left !important;
		font: inherit !important;
		line-height: normal !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__code,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__meta,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__price {
		float: none !important;
		clear: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__code {
		grid-column: 1 !important;
		grid-row: 1 !important;
		display: block !important;
		min-width: 0 !important;
		color: #172033 !important;
		font-size: 15px !important;
		font-weight: 850 !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__meta {
		grid-column: 1 !important;
		grid-row: 2 !important;
		display: block !important;
		min-width: 0 !important;
		color: #66756b !important;
		font-size: 12px !important;
		font-weight: 650 !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__price {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 1 / span 2 !important;
		align-self: center !important;
		justify-self: end !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 48px !important;
		max-width: 86px !important;
		min-height: 30px !important;
		padding: 5px 8px !important;
		border: 0 !important;
		border-radius: 9px !important;
		background: #b47c00 !important;
		color: #ffffff !important;
		box-shadow: 0 2px 7px rgba(155, 114, 0, 0.16) !important;
		font-size: 12px !important;
		font-weight: 850 !important;
		line-height: 1.1 !important;
		text-align: center !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		transform: none !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:focus,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:focus-visible,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:active {
		position: relative !important;
		justify-self: center !important;
		align-self: center !important;
		display: grid !important;
		place-items: center !important;
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid #dce7d7 !important;
		border-radius: 11px !important;
		background: #f7faef !important;
		background-color: #f7faef !important;
		color: #516157 !important;
		box-shadow: none !important;
		font-size: 0 !important;
		line-height: 1 !important;
		text-indent: 0 !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		transform: none !important;
		filter: none !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	/* Theme-proof remove glyph: never allow a global button style to turn it
	 * into the blank green rectangle reported on iOS. */
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove svg {
		display: none !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove::after {
		content: "×";
		display: block !important;
		color: #516157 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 22px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		text-align: center !important;
		transform: translateY(-1px) !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:focus-visible,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:active {
		border-color: #bfdf74 !important;
		background: #e3ebb2 !important;
		background-color: #e3ebb2 !important;
		outline: none !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:hover::after,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:focus-visible::after,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove:active::after {
		color: #016243 !important;
	}
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item {
		min-height: 62px !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__open {
		min-height: 46px !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-item__remove {
		width: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		max-height: 36px !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.42 — Hotfix 4.4C: Mobile Product Bottom Sheet
 * MOBILE ONLY. Desktop Hotfix 3 drawer remains locked.
 * ------------------------------------------------------------------ */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	/* The modal is portalled to <body> by unit-popup.js while open. */
	body > .bds-im-unit-modal.is-mobile-sheet {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		z-index: 2147482000 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-modal__backdrop,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-modal__backdrop:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-modal__backdrop:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-modal__backdrop:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-modal__backdrop:active {
		position: fixed !important;
		left: var(--bds-im-unit-vv-left, 0px) !important;
		top: var(--bds-im-unit-vv-top, 0px) !important;
		right: auto !important;
		bottom: auto !important;
		width: var(--bds-im-unit-vv-width, 100vw) !important;
		height: var(--bds-im-unit-vv-height, 100dvh) !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: rgba(15, 23, 42, 0.52) !important;
		background-color: rgba(15, 23, 42, 0.52) !important;
		box-shadow: none !important;
		transform: none !important;
		filter: none !important;
		touch-action: none !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel {
		position: fixed !important;
		left: var(--bds-im-unit-sheet-left, 0px) !important;
		top: var(--bds-im-unit-sheet-top, 12vh) !important;
		right: auto !important;
		bottom: auto !important;
		width: var(--bds-im-unit-sheet-width, 100vw) !important;
		height: var(--bds-im-unit-sheet-height, 88dvh) !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: var(--bds-im-unit-sheet-radius, 22px) var(--bds-im-unit-sheet-radius, 22px) 0 0 !important;
		background: #ffffff !important;
		box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.24) !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		transform: translate3d(0, calc(100% + 24px), 0) !important;
		transition: transform 180ms cubic-bezier(.2,.75,.25,1) !important;
		will-change: transform;
	}

	body > .bds-im-unit-modal.is-mobile-sheet.is-open .bds-im-unit-panel {
		transform: translate3d(0, 0, 0) !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel::before {
		content: "" !important;
		flex: 0 0 auto !important;
		display: block !important;
		width: 44px !important;
		height: 5px !important;
		margin: 9px auto 0 !important;
		border-radius: 999px !important;
		background: #c7d6c8 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__header {
		position: relative !important;
		flex: 0 0 auto !important;
		display: block !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 10px 66px 12px 16px !important;
		border-bottom: 1px solid rgba(107, 183, 74, 0.18) !important;
		background: linear-gradient(180deg, #f6f9e9 0%, #ffffff 100%) !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		min-height: 22px !important;
		padding: 3px 8px !important;
		font-size: 10px !important;
		line-height: 1.2 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		max-width: 100% !important;
		margin: 6px 0 0 !important;
		color: #172033 !important;
		font-size: clamp(20px, 5.8vw, 24px) !important;
		font-weight: 850 !important;
		line-height: 1.15 !important;
		letter-spacing: -0.02em !important;
		overflow-wrap: anywhere !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		max-width: 100% !important;
		margin: 3px 0 0 !important;
		color: #627066 !important;
		font-size: 11px !important;
		font-weight: 650 !important;
		line-height: 1.35 !important;
		overflow-wrap: anywhere !important;
	}

	/* Theme-proof close action, aligned with the other 4.4 mobile sheets. */
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:active {
		position: absolute !important;
		top: 10px !important;
		right: 14px !important;
		left: auto !important;
		bottom: auto !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		display: grid !important;
		place-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid rgba(107, 183, 74, 0.34) !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		color: #016243 !important;
		box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 0 !important;
		line-height: 1 !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		transform: none !important;
		filter: none !important;
		cursor: pointer !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close > span {
		display: block !important;
		color: #016243 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 27px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		transform: translateY(-1px) !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:active {
		border-color: #9cc664 !important;
		background: #e3ebb2 !important;
		background-color: #e3ebb2 !important;
		outline: none !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		width: auto !important;
		max-width: 100% !important;
		min-height: 38px !important;
		margin: 9px 0 0 !important;
		padding: 0 12px !important;
		border-radius: 10px !important;
		font-size: 10.5px !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		text-align: center !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action svg {
		flex: 0 0 16px !important;
		width: 16px !important;
		height: 16px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__body {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 14px max(20px, env(safe-area-inset-bottom)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		touch-action: pan-y !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__loading {
		min-height: 180px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-detail {
		padding-top: 2px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-gallery {
		height: min(38dvh, 330px) !important;
		min-height: 180px !important;
		max-height: 330px !important;
		margin: 12px 0 2px !important;
		border-radius: 12px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-section {
		padding: 15px 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-section h3,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-section__heading h3 {
		margin-bottom: 10px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-kv {
		grid-template-columns: minmax(104px, .9fr) minmax(0, 1.1fr) !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-kv__label,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-kv__value {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-price {
		gap: 10px !important;
		padding: 11px 12px !important;
		border-radius: 12px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-price__label {
		font-size: 11px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-price__value strong {
		font-size: 15px !important;
	}
}

/* Low-height phone landscape: keep the sheet readable without wasting height. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel::before {
		width: 38px !important;
		height: 4px !important;
		margin-top: 5px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__header {
		padding: 5px 58px 7px 12px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:active {
		top: 5px !important;
		right: 10px !important;
		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		border-radius: 10px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close > span {
		font-size: 23px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		min-height: 19px !important;
		padding: 2px 7px !important;
		font-size: 9px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		margin-top: 3px !important;
		font-size: 17px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		margin-top: 1px !important;
		font-size: 9.5px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(120px, 34vw) !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 10px !important;
		align-items: center !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-column: 1 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 1 / span 3 !important;
		align-self: center !important;
		justify-self: stretch !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 32px !important;
		margin: 0 !important;
		padding: 0 9px !important;
		font-size: 9px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__body {
		padding: 0 12px max(8px, env(safe-area-inset-bottom)) !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-gallery {
		height: min(48dvh, 230px) !important;
		min-height: 130px !important;
		max-height: 230px !important;
		margin-top: 8px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-section {
		padding: 10px 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel {
		transition-duration: 1ms !important;
	}
}

/* v1.14.2.43 — Hotfix 4.4B.3: Mobile Interest clear button theme-proof repair.
 * Chrome Android can let theme button/SVG rules collapse the footer action,
 * wrap its label vertically and fill the trash path black. Keep this scoped
 * to the mobile Căn quan tâm sheet only. */
@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear],
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear]:hover,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear]:focus,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear]:focus-visible,
	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear]:active {
		position: relative !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 9px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 48px !important;
		min-height: 48px !important;
		max-height: 48px !important;
		margin: 0 !important;
		padding: 0 18px !important;
		border: 1px solid #02954F !important;
		border-radius: 12px !important;
		background: #02954F !important;
		background-color: #02954F !important;
		color: #fff !important;
		box-shadow: none !important;
		font-size: 14px !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		text-align: center !important;
		text-indent: 0 !important;
		white-space: nowrap !important;
		writing-mode: horizontal-tb !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		transform: none !important;
		filter: none !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear] > span {
		display: inline-block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #fff !important;
		font: inherit !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		writing-mode: horizontal-tb !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear] svg {
		display: block !important;
		flex: 0 0 20px !important;
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		min-height: 20px !important;
		max-height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #fff !important;
		fill: none !important;
		stroke: #fff !important;
		stroke-width: 2 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
		overflow: visible !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear] svg path {
		fill: none !important;
		stroke: #fff !important;
		stroke-width: 2 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
	}

	body > .bds-im-interest-panel.is-mobile-sheet .bds-im-interest-panel__footer button[data-bds-im-interest-clear]:disabled {
		background: #9CC664 !important;
		background-color: #9CC664 !important;
		border-color: #9CC664 !important;
		color: #fff !important;
		opacity: .58 !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.44 — Hotfix 4.4C.2: Mobile Product Popup Landscape Header Polish
 * LANDSCAPE MOBILE ONLY. Portrait + locked desktop remain unchanged.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	/*
	 * Give the product header a clear hierarchy without letting the favorite
	 * CTA consume half of the short landscape viewport:
	 * status -> title + CTA -> subtitle. Close stays independently anchored.
	 */
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__header {
		padding: 6px 54px 8px 14px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 12px !important;
		row-gap: 2px !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		align-self: center !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: min(100%, 420px) !important;
		min-height: 20px !important;
		margin: 0 0 2px !important;
		padding: 2px 8px !important;
		font-size: 9.5px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		grid-column: 1 !important;
		grid-row: 2 !important;
		align-self: center !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		font-size: clamp(18px, 3vw, 22px) !important;
		line-height: 1.08 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		align-self: center !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 1px 0 0 !important;
		padding-right: 2px !important;
		font-size: 10px !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 2 !important;
		align-self: center !important;
		justify-self: end !important;
		width: clamp(172px, 29vw, 226px) !important;
		min-width: 172px !important;
		max-width: min(226px, 38vw) !important;
		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
		margin: 0 !important;
		padding: 0 13px !important;
		gap: 7px !important;
		border: 1px solid rgba(1, 98, 67, 0.22) !important;
		border-radius: 11px !important;
		background: #02954f !important;
		background-color: #02954f !important;
		color: #ffffff !important;
		box-shadow: 0 5px 13px rgba(1, 98, 67, 0.16) !important;
		font-size: 10.5px !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		text-align: center !important;
		overflow: hidden !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action span {
		display: block !important;
		min-width: 0 !important;
		max-width: 100% !important;
		color: #ffffff !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action svg,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg {
		flex: 0 0 16px !important;
		width: 16px !important;
		height: 16px !important;
		color: #ffffff !important;
		stroke: #ffffff !important;
		fill: transparent !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg {
		fill: rgba(255, 255, 255, 0.2) !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:active {
		top: 7px !important;
		right: 10px !important;
	}
}

/* Very narrow phone landscape: preserve title first, then compact the CTA. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 720px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		column-gap: 8px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		width: clamp(150px, 31vw, 178px) !important;
		min-width: 150px !important;
		max-width: 178px !important;
		padding-inline: 10px !important;
		font-size: 9.5px !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.45 — Mobile UX Final Hardening
 * Mobile-only visual consistency. No layout/engine changes.
 * ------------------------------------------------------------------ */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		border-color: #02954f !important;
		background: #02954f !important;
		background-color: #02954f !important;
		color: #ffffff !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover {
		border-color: #077840 !important;
		background: #077840 !important;
		background-color: #077840 !important;
		color: #ffffff !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active {
		border-color: #016243 !important;
		background: #016243 !important;
		background-color: #016243 !important;
		color: #ffffff !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action span {
		color: #ffffff !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action svg,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg {
		color: #ffffff !important;
		stroke: #ffffff !important;
		fill: transparent !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg {
		fill: rgba(255, 255, 255, 0.2) !important;
	}
}

/* ------------------------------------------------------------------
 * v1.14.2.46 — Hotfix 4.4C.3: Mobile Popup CTA + Search Icon Polish
 * Mobile-only visual polish. Locked desktop remains unchanged.
 * ------------------------------------------------------------------ */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	/* Use the same outlined magnifier SVG on mobile as the locked desktop toolbar. */
	.bds-im-filter-search__icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 0 !important;
		line-height: 1 !important;
	}

	.bds-im-filter-search__icon svg {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		fill: none !important;
		stroke: currentColor !important;
		stroke-width: 1.8 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
		overflow: visible !important;
	}

	.bds-im-filter-search__icon svg circle,
	.bds-im-filter-search__icon svg path {
		fill: none !important;
		stroke: currentColor !important;
	}

	/* Keep video/PDF actions full-width on mobile and center the icon+label cluster. */
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-content-action:active {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	/* Both popup CTA states keep one visual footprint and white heart icon. */
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		min-height: 42px !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action span {
		min-width: 0 !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action svg,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg {
		color: #ffffff !important;
		stroke: #ffffff !important;
		stroke-width: 1.8 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action svg path {
		stroke: #ffffff !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active svg path {
		fill: #ffffff !important;
	}
}

/* Portrait popup CTA keeps the same footprint when toggling Lưu/Hủy lưu. */
@media (max-width: 767px) and (orientation: portrait) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		width: clamp(176px, 58vw, 220px) !important;
		min-width: 176px !important;
		max-width: 220px !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		padding-inline: 12px !important;
		white-space: nowrap !important;
	}
}

/* Landscape popup header: status + CTA on row 1, identity below, close stays pinned right. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__header {
		padding: 7px 58px 9px 14px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		display: grid !important;
		grid-template-columns: minmax(92px, 1fr) clamp(188px, 27vw, 238px) !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 12px !important;
		row-gap: 3px !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		align-self: center !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		align-self: center !important;
		justify-self: end !important;
		width: 100% !important;
		min-width: 188px !important;
		max-width: 238px !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		margin: 0 !important;
		padding: 0 13px !important;
		gap: 7px !important;
		border-radius: 11px !important;
		font-size: 10.5px !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		justify-self: start !important;
		align-self: center !important;
		max-width: 100% !important;
		margin: 1px 0 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		justify-self: start !important;
		align-self: center !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__close:active {
		top: 7px !important;
		right: 10px !important;
	}
}

/* Very narrow phone landscape: keep full CTA text without sacrificing the close/title. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 720px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		grid-template-columns: minmax(84px, 1fr) clamp(166px, 36vw, 190px) !important;
		column-gap: 8px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		min-width: 166px !important;
		max-width: 190px !important;
		padding-inline: 9px !important;
		font-size: 9.5px !important;
	}
}


/* Phase 16.1 — Product Print / PDF Export.
 * This adds one compact action beside the existing interest CTA only; the
 * established popup layout and mobile bottom-sheet geometry remain untouched.
 */
.bds-im-unit-panel__heading .bds-im-print-action {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 40px !important;
	margin: 10px 0 0 8px !important;
	padding: 0 13px !important;
	border: 1px solid rgba(1, 98, 67, .22) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #016243 !important;
	font: inherit !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	vertical-align: top !important;
}
.bds-im-unit-panel__heading .bds-im-print-action svg {
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	flex: 0 0 auto !important;
}
.bds-im-unit-panel__heading .bds-im-print-action:hover,
.bds-im-unit-panel__heading .bds-im-print-action:focus-visible {
	background: #f3faf7 !important;
	border-color: rgba(1, 98, 67, .42) !important;
	outline: none !important;
}
@media (max-width: 420px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action {
		margin-left: 6px !important;
		padding-inline: 11px !important;
	}
}


/* ------------------------------------------------------------------
 * v1.14.2.63 — Hotfix 16.1H: iOS outside-map hard page pinch lock
 *
 * IMPORTANT: do not change the existing .bds-im-viewer touch-action or
 * OpenSeadragon cooperative gesture settings. Baseline 1.14.2.62 already
 * handles two-finger map zoom correctly on iPhone.
 *
 * pan-x pan-y keeps normal one-finger page scrolling/panning available but
 * excludes native browser pinch-zoom. Because touch-action is intersected
 * through the ancestor chain and the viewer itself remains pan-y, the
 * effective map contract stays the same as baseline while non-map page pinch
 * is hard-locked.
 * ------------------------------------------------------------------ */
html.bds-im-ios-page-pinch-locked,
html.bds-im-ios-page-pinch-locked body {
	touch-action: pan-x pan-y !important;
}

/* ------------------------------------------------------------------
 * v1.14.2.66 — Hotfix 16.1K: Mobile Product CTA Row Compaction
 * MOBILE POPUP ONLY. Keep desktop drawer and print sheet untouched.
 * Place Lưu Căn Quan Tâm + In/ Lưu PDF on the same row in portrait
 * and landscape so the popup header consumes less vertical space.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) and (orientation: portrait) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) clamp(108px, 31vw, 124px) !important;
		grid-template-rows: auto auto auto auto !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-column: 1 / -1 !important;
		justify-self: start !important;
		min-width: 0 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		grid-row: 1 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		grid-row: 2 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-row: 3 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		position: static !important;
		grid-column: 1 !important;
		grid-row: 4 !important;
		align-self: center !important;
		justify-self: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		margin: 9px 0 0 !important;
		padding: 0 10px !important;
		gap: 6px !important;
		font-size: 9.7px !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action span {
		min-width: 0 !important;
		max-width: 100% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:active {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 4 !important;
		align-self: center !important;
		justify-self: stretch !important;
		display: inline-flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		margin: 9px 0 0 !important;
		padding: 0 8px !important;
		gap: 5px !important;
		border-radius: 10px !important;
		font-size: 9.6px !important;
		line-height: 1 !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action svg {
		width: 15px !important;
		height: 15px !important;
		flex-basis: 15px !important;
	}
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		grid-template-columns: minmax(88px, 1fr) clamp(158px, 25vw, 210px) clamp(104px, 17vw, 132px) !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 8px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__eyebrow {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action:active,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		align-self: center !important;
		justify-self: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
		margin: 0 !important;
		padding: 0 9px !important;
		gap: 6px !important;
		font-size: 9.4px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:hover,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:focus,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:focus-visible,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action:active {
		position: static !important;
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-self: center !important;
		justify-self: stretch !important;
		display: inline-flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
		margin: 0 !important;
		padding: 0 8px !important;
		gap: 5px !important;
		border-radius: 10px !important;
		font-size: 9.2px !important;
		line-height: 1 !important;
		white-space: nowrap !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action svg {
		width: 14px !important;
		height: 14px !important;
		flex-basis: 14px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__title {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__subtitle {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
	}
}

/* Extra-narrow portrait phones: preserve one-row CTA contract without
 * allowing either action to wrap into a second line. */
@media (max-width: 360px) and (orientation: portrait) {
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading {
		grid-template-columns: minmax(0, 1fr) 104px !important;
		column-gap: 6px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action,
	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-interest-action.is-active {
		padding-inline: 8px !important;
		font-size: 9px !important;
	}

	body > .bds-im-unit-modal.is-mobile-sheet .bds-im-unit-panel__heading .bds-im-print-action {
		padding-inline: 6px !important;
		font-size: 8.8px !important;
	}
}