/**
 * DevVN Locations Pro — frontend (flat, minimal).
 */

.devvn-loc-app,
.devvn-loc-global {
	--devvn-primary: #1463ff;
	--devvn-ink: #101828;
	--devvn-muted: #667085;
	--devvn-soft: #f4f6fa;
	--devvn-line: #eceff4;
	--devvn-radius: 12px;
	--devvn-map-h: 520px;
	color: var(--devvn-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.devvn-loc-app *,
.devvn-loc-global * { box-sizing: border-box; }

/* Inline SVG icons (replaces the dashicons font). */
.devvn-ic { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.15em; }

/* ---------- Filter chips ---------- */
.devvn-loc__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.devvn-chip {
	--c: var(--devvn-primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 0;
	border-radius: 999px;
	background: var(--devvn-soft);
	color: var(--devvn-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s;
	margin: 0 !important;
}
.devvn-chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c);
	opacity: .35;
	transition: opacity .15s;
}
.devvn-chip.is-active {
	background: color-mix(in srgb, var(--c) 14%, #fff);
	color: var(--devvn-ink);
}
.devvn-chip.is-active::before { opacity: 1; }
/* Custom category icon inside the chip — replaces the colour dot. */
.devvn-chip__icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex: none;
	opacity: .6;
	transition: opacity .15s;
}
.devvn-chip.is-active .devvn-chip__icon { opacity: 1; }
.devvn-chip:has(.devvn-chip__icon)::before { display: none; }

/* ---------- Layout ---------- */
.devvn-loc__layout {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 14px;
	min-height: var(--devvn-map-h);
}
.devvn-loc-app--list-right .devvn-loc__layout { grid-template-columns: 1fr 340px; }
.devvn-loc-app--list-right .devvn-loc__sidebar { order: 2; }
.devvn-loc-app--list-none .devvn-loc__layout { grid-template-columns: 1fr; }

.devvn-loc__sidebar {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--devvn-radius);
	overflow: hidden;
}
.devvn-loc__title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 800; }
.devvn-loc__sub { font-size: 13px; color: var(--devvn-muted); }
.devvn-loc__count { font-weight: 700; color: var(--devvn-primary); }

/* Main destination card */
.devvn-loc__main {
	display: flex;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 10px;
	margin-bottom: 8px;
	border: 0;
	border-radius: var(--devvn-radius);
	background: color-mix(in srgb, var(--devvn-primary) 8%, #fff);
	box-shadow: 0 0 0 1px var(--devvn-line) inset;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: box-shadow .15s, background .15s;
}
.devvn-loc__main:hover { background: color-mix(in srgb, var(--devvn-primary) 13%, #fff); }
.devvn-loc__main.is-active { box-shadow: 0 0 0 2px var(--devvn-primary) inset; }
.devvn-loc__main-media { flex: 0 0 100px; width: 100px; height: 100px; border-radius: 10px; background: #dfe5ee center/cover no-repeat; }
.devvn-loc__main-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.devvn-loc__main-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--devvn-primary); }
.devvn-loc__main-addr { display: inline-flex; align-items: flex-start; gap: 3px; font-size: 12px; color: var(--devvn-muted); }
.devvn-loc__main-addr .devvn-ic { width: 13px; height: 13px; margin-top: 3px;}

.devvn-loc__listbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
}
.devvn-loc__listbar-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--devvn-muted);
}
.devvn-loc__listbar-label .devvn-ic { width: 13px; height: 13px; }
.devvn-loc__sort {
	border: 1px solid var(--devvn-line);
	border-radius: 8px;
	background-color: #fff;
	color: var(--devvn-ink);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 5px 28px 5px 10px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	width: 126px;
	margin: 0;
}
.devvn-loc__sort:focus-visible { outline: 2px solid var(--devvn-primary); outline-offset: 1px; }

.devvn-loc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	max-height: var(--devvn-map-h);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.devvn-loc__empty {
	padding: 24px 12px;
	text-align: center;
	color: var(--devvn-muted);
	font-size: 14px;
}

/* ---------- POI cards ---------- */
.devvn-poi-card {
	--card-media: 100px; /* thumbnail size */
	--card-gap: 11px;   /* gap between thumbnail and text column */
	display: flex;
	gap: var(--card-gap);
	padding: 11px 12px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--devvn-line) inset;
	cursor: pointer;
	transition: box-shadow .15s, background .15s;
	margin: 0 !important;
}
.devvn-poi-card:hover { background: var(--devvn-soft); }
.devvn-poi-card.is-active {
	background: #fff;
	box-shadow: 0 0 0 2px var(--devvn-primary) inset;
}
.devvn-poi-card__media {
	flex: 0 0 var(--card-media);
	width: var(--card-media);
	height: var(--card-media);
	border-radius: 9px;
	background: #dfe5ee center/cover no-repeat;
	align-self: flex-start;
}
.devvn-poi-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}
.devvn-poi-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.devvn-poi-card__cat {
	--c: var(--devvn-primary);
	display: inline-block;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 13%, #fff);
	padding: 2px 8px;
	border-radius: 999px;
	line-height: 1.5;
}
.devvn-poi-card__dist {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--devvn-muted);
	white-space: nowrap;
}
.devvn-poi-card__dist .devvn-ic { width: 14px; height: 14px; color: var(--devvn-primary); }
.devvn-poi-card__name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.devvn-poi-card__desc {
	font-size: 12.5px;
	color: var(--devvn-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.devvn-poi-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	margin-top: 2px;
}
.devvn-poi-card__meta a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--devvn-muted);
	text-decoration: none;
}
.devvn-poi-card__meta a:hover { color: var(--devvn-primary); }
.devvn-poi-card__meta .devvn-ic { width: 14px; height: 14px; }

/* ---------- Map ---------- */
.devvn-loc__map {
	border-radius: var(--devvn-radius);
	overflow: hidden;
	min-height: var(--devvn-map-h);
	height: 100%;
	background: #e8edf3;
}
.devvn-loc__map--full { height: var(--devvn-map-h); }

/* Map wrapper: positioning context that hosts the map + the slide-in detail panel. */
.devvn-loc__mapwrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--devvn-radius);
	min-height: var(--devvn-map-h);
	height: 100%;
}
.devvn-loc__mapwrap--full { height: var(--devvn-map-h); }
.devvn-loc__mapwrap .devvn-loc__map { border-radius: 0; }

/* ---------- Detail panel (slide-in desktop / bottom sheet mobile) ---------- */
.devvn-loc__panel {
	position: absolute;
	top: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
	width: 360px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -10px 0 30px rgba(16, 24, 40, .16);
	transform: translateX(130%);
	transition: transform .28s ease;
	z-index: 1200;
}
/* transform:none at rest (not translateX(0)) so the panel leaves the GPU layer and
   text stays crisp on tall content — translateX(0) keeps a layer that blurs text. */
.devvn-loc__mapwrap.panel-open .devvn-loc__panel { transform: none; }
.devvn-loc__panel-handle { display: none; }
.devvn-loc__panel-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--devvn-ink);
	box-shadow: 0 1px 5px rgba(16, 24, 40, .2);
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	min-height: auto;
}
.devvn-loc__panel-close:hover { background: #fff; }
.devvn-loc__panel-close .devvn-ic { width: 18px; height: 18px; }
.devvn-loc__panel-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.devvn-loc__panel-backdrop { display: none; }

/* Panel content */
.devvn-detail { color: var(--devvn-ink); }
.devvn-detail__hero {
	display: block;
	width: 100%;
	height: 200px;
	border: 0;
	padding: 0;
	margin: 0;
	background: #dfe5ee center/cover no-repeat;
	cursor: pointer;
}
/* Up to 4 thumbnails fill the row equally (no scrolling); a 5th+ collapses
   into the "+N" overlay on the last tile, which opens the lightbox. */
.devvn-detail__thumbs { display: flex; gap: 6px; padding: 6px 6px 0; }
.devvn-detail__thumb {
	flex: 1 1 0;
	min-width: 0;
	height: 54px;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 7px;
	background: #dfe5ee center/cover no-repeat;
	cursor: pointer;
}
.devvn-detail__thumb:hover { filter: brightness(.93); }
.devvn-detail__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: rgba(16, 24, 40, .55);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	pointer-events: none;
}
/* Category + title sit at the very top, above the photo. */
.devvn-detail__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 11px; }
.devvn-detail__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 20px; }
.devvn-detail__cat {
	--c: var(--devvn-primary);
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 13%, #fff);
	padding: 2px 9px;
	border-radius: 999px;
	line-height: 1.6;
}
.devvn-detail__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.devvn-detail__desc { font-size: 14px; color: #475467; line-height: 1.55; white-space: pre-line; }
.devvn-detail__row {
	margin: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	color: #475467;
	line-height: 1.5;
}
.devvn-detail__row .devvn-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--devvn-primary); }
.devvn-detail__row a,
.devvn-detail__row a:link,
.devvn-detail__row a:visited { color: inherit; text-decoration: none; }
.devvn-detail__row a:hover { color: var(--devvn-primary); }
.devvn-detail__dist { font-weight: 600; }
.devvn-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Full editor content (the_content) at the bottom of the panel. */
.devvn-detail__content {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--devvn-line);
	font-size: 14px;
	line-height: 1.65;
	color: #344054;
}
.devvn-detail__content > :first-child { margin-top: 0; }
.devvn-detail__content > :last-child { margin-bottom: 0; }
.devvn-detail__content p { margin: 0 0 .8em; }
.devvn-detail__content ul,
.devvn-detail__content ol { margin: 0 0 .8em; padding-left: 1.4em; }
.devvn-detail__content h1,
.devvn-detail__content h2,
.devvn-detail__content h3,
.devvn-detail__content h4 { margin: 1em 0 .4em; line-height: 1.3; font-weight: 700; }
.devvn-detail__content img { max-width: 100%; height: auto; border-radius: 8px; }
.devvn-detail__content a { color: var(--devvn-primary); text-decoration: underline; }

/* Mobile: bottom sheet sliding up from the bottom of the screen. */
@media (max-width: 860px) {
	.devvn-loc__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-height: 85vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 30px rgba(16, 24, 40, .24);
		transform: translateY(130%);
		z-index: 100000;
	}
	.devvn-loc__mapwrap.panel-open .devvn-loc__panel { transform: none; }
	.devvn-loc__panel-handle {
		display: block;
		flex: none;
		width: 40px;
		height: 4px;
		margin: 8px auto 0;
		border-radius: 999px;
		background: #d0d5dd;
	}
	.devvn-loc__panel-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(16, 24, 40, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
		z-index: 99999;
	}
	.devvn-loc__mapwrap.panel-open .devvn-loc__panel-backdrop { opacity: 1; visibility: visible; }
}
/* Lock the page scroll while the bottom sheet is open. */
.devvn-panel-lock { overflow: hidden; }

/* ---------- Buttons ---------- */
/* :link/:visited included so a themed `a` colour can't override the label. */
.devvn-btn,
.devvn-btn:link,
.devvn-btn:visited,
.devvn-btn:hover,
.devvn-btn:focus,
.devvn-btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 3px 10px;
    letter-spacing: normal;
    border-radius: 5px;
	background: var(--devvn-primary, #1463ff);
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: filter .15s;
}
.devvn-btn:hover, .devvn-btn:focus { filter: brightness(.94); color: #fff; }
.devvn-btn--sm { padding: 6px 13px; font-size: 13px; align-self: flex-start; }
/* Right-arrow icon on call-to-action buttons: slides right on hover. */
.devvn-btn__arrow { flex: 0 0 auto; transition: transform .15s ease; }
.devvn-btn:hover .devvn-btn__arrow, .devvn-btn:focus .devvn-btn__arrow { transform: translateX(3px); }
/* Custom button colour (per-button) fed through the --btn variable. */
.devvn-btn--custom { background: var(--btn, var(--devvn-primary)); }
/* Custom-coloured buttons in the detail panel honour their per-button colour. */
.devvn-detail__actions a.devvn-btn--custom {
    background: var(--btn, #1463ff) !important;
}

.devvn-btn--ghost,
.devvn-btn--ghost:link,
.devvn-btn--ghost:visited,
.devvn-btn--ghost:hover,
.devvn-btn--ghost:focus {
	background: transparent;
	color: var(--devvn-primary);
	box-shadow: 0 0 0 1px var(--devvn-line) inset;
}
.devvn-btn--ghost:hover { background: var(--devvn-soft); }

/* ---------- Markers ---------- */
/* Leaflet: 0-size container; the inner marker is positioned on the point. */
.dvloc-divicon { width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; overflow: visible; }
.dvloc-divicon .dvloc-marker { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.dvloc-divicon .dvloc-marker--anchor-bottom { transform: translate(-50%, -100%); }
.dvloc-marker { line-height: 0; cursor: pointer; }
/* Active marker (its sidebar card is selected) bounces so it's easy to spot. */
@keyframes dvloc-bounce {
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-9px); }
	55%      { transform: translateY(-3px); }
}
.dvloc-marker--active { z-index: 1001; }
.dvloc-marker--active .dvloc-marker__pin,
.dvloc-marker--active .dvloc-marker__img,
.dvloc-marker--active .dvloc-marker__pill {
	animation: dvloc-bounce .9s ease-in-out infinite;
}

/* Default map pin (teardrop). */
.dvloc-marker__pin { display: block; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .3)); }

/* Custom icon — shown as-is, no circle behind it. */
.dvloc-marker__img { display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .38)); }

/* Label tag with a downward arrow pointing at the exact point. */
.dvloc-marker--label { padding-bottom: 5px; }
.dvloc-marker__pill {
	position: relative;
	display: inline-block;
	background: #fff;
	color: var(--devvn-ink, #101828);
	font: 700 10.5px/1.25 -apple-system, "Segoe UI", Roboto, sans-serif;
	padding: 3px 7px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
	white-space: nowrap;
	border: 1px solid var(--dvloc-c, #1463ff);
}
.dvloc-marker__pill::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--dvloc-c, #1463ff);
}
.dvloc-marker__pill--price { background: var(--dvloc-c, #1463ff); color: #fff; }
.dvloc-marker__pill--custom::after { border-top-color: #fff; }

/* Icon + label: white pill, black text, small coloured icon-chip on the left. */
.dvloc-marker__pill--icontext {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 3px;
	color: #101828;
	border-color: rgba(16, 24, 40, .08);
}
.dvloc-marker__pill--icontext::after { border-top-color: #fff; }
.dvloc-marker__pill-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dvloc-c, #1463ff);
}
.dvloc-marker__pill-ic img {
	display: block;
	width: 11px;
	height: 11px;
	object-fit: contain;
}
.dvloc-marker__pill-tx { display: inline-block; }

/* ---------- Cooperative scroll-zoom hint ---------- */
.dvloc-gesture-hint {
	position: absolute;
	inset: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: rgba(16, 24, 40, .55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, visibility .18s ease;
}
.dvloc-gesture-hint--show .dvloc-gesture-hint { opacity: 1; visibility: visible; }

/* ---------- Single page ---------- */
.devvn-single__hero {
	position: relative;
	padding: 56px 24px;
	border-radius: 16px;
	background: #1d2433 center/cover no-repeat;
	color: #fff;
	overflow: hidden;
}
.devvn-single__hero.has-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 24, 40, .15), rgba(16, 24, 40, .72));
}
.devvn-single__hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.devvn-single__title { margin: 0 0 8px; font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.1; color: #fff; }
.devvn-single__addr { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; opacity: .92; }
.devvn-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.devvn-single__meta a:not(.devvn-btn) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	opacity: .95;
}
.devvn-single .devvn-loc-app { max-width: 1180px; margin: 22px auto; padding: 0 16px; }
.devvn-single__content { max-width: 900px; margin: 8px auto 40px; padding: 0 16px; line-height: 1.7; }

/* ---------- Gallery thumb (clickable) + photo-count badge ---------- */
.dvloc-thumb {
	position: relative;
	border: 0;
	padding: 0;
	margin: 0 !important;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
}
.dvloc-thumb:hover { filter: brightness(.93); }
.dvloc-thumb:focus-visible { outline: 2px solid var(--devvn-primary); outline-offset: 2px; }
.dvloc-thumb__count {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(16, 24, 40, .72);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	pointer-events: none;
}
.dvloc-thumb__count .devvn-ic { width: 12px; height: 12px; }
.devvn-poi-card__media.dvloc-thumb .dvloc-thumb__count,
.devvn-loc__main-media.dvloc-thumb .dvloc-thumb__count { right: 3px; bottom: 3px; padding: 1px 5px; font-size: 10px; }
/* The main destination thumb is a clickable gallery trigger. */
.devvn-loc__main-media.dvloc-thumb { cursor: pointer; }

/* ---------- Lightbox (self-coded, overlays everything) ---------- */
.dvloc-lb {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	flex-direction: column;
	color: #fff;
}
.dvloc-lb[aria-hidden="true"] { display: none; }
.dvloc-lb[aria-hidden="false"] { display: flex; }
html.dvloc-lb-open { overflow: hidden; }
.dvloc-lb__backdrop { position: absolute; inset: 0; background: rgba(8, 11, 18, .92); }
.dvloc-lb__close {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
	padding: 0;
    margin: 0;
}
.dvloc-lb__close:hover { background: rgba(255, 255, 255, .24); }
.dvloc-lb__close svg { width: 24px; height: 24px; }
.dvloc-lb__counter {
	position: absolute;
	top: 22px;
	left: 20px;
	z-index: 2;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	opacity: .9;
}
.dvloc-lb__stage {
	position: relative;
	z-index: 1;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px 8px;
}
.dvloc-lb__figure { max-width: 100%; max-height: 100%; display: flex; }
.dvloc-lb__img {
	max-width: 92vw;
	max-height: 76vh;
	margin: auto;
	display: block;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.dvloc-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
	padding: 0;
    margin: 0;
}
.dvloc-lb__nav:hover { background: rgba(255, 255, 255, .26); }
.dvloc-lb__nav svg { width: 26px; height: 26px; }
.dvloc-lb__prev { left: 14px; }
.dvloc-lb__next { right: 14px; }
.dvloc-lb__thumbs {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	justify-content: center;
	overflow-x: auto;
	padding: 12px 16px 18px;
}
.dvloc-lb__thumb {
	flex: 0 0 auto;
	width: 66px;
	height: 46px;
	padding: 0;
	margin: 0 !important;
	border: 2px solid transparent;
	border-radius: 7px;
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, border-color .15s ease;
}
.dvloc-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dvloc-lb__thumb:hover { opacity: .85; }
.dvloc-lb__thumb.is-active { opacity: 1; border-color: #fff; }

@media (max-width: 600px) {
	.dvloc-lb__nav { width: 40px; height: 40px; }
	.dvloc-lb__img { max-height: 66vh; }
	.dvloc-lb__thumb { width: 54px; height: 40px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.devvn-loc__layout { grid-template-columns: 1fr; }
	.devvn-loc-app--list-right .devvn-loc__sidebar { order: 0; }
	.devvn-loc__list { max-height: 360px; }
	/* Map (wrapper is the grid item) sits above the sidebar on mobile. */
	.devvn-loc__mapwrap { min-height: 380px; height: 380px; order: -1; }
	.devvn-loc__map { min-height: 380px; height: 380px; }

	/* Filter chips scroll horizontally (no wrap) and run full-bleed edge-to-edge. */
	.devvn-loc__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;            /* Firefox */
		scroll-padding-inline: 14px;
		/* Full width: break out of the container padding to span the whole screen. */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 0 14px 2px;
		margin-bottom: 12px;
	}
	.devvn-loc__filters::-webkit-scrollbar { display: none; } /* WebKit */
	.devvn-loc__filters .devvn-chip { flex: 0 0 auto; }       /* never shrink */

	/* Pin the filter bar below the theme's sticky header (top set from JS). Keep
	   the full-bleed margins/width from above — only add the sticky chrome. */
	.devvn-loc-app--sticky-filters .devvn-loc__filters {
		position: sticky;
		top: var(--devvn-sticky-top, 0px);
		z-index: 1200;
		padding-top: 10px;
		padding-bottom: 10px;
		background: #fff;
		box-shadow: 0 1px 0 var(--devvn-line);
	}
}