/**
 * Chốn Thiêng — overrides on top of Togo's main.css (main.css is never edited).
 * In the Botble theme this file becomes assets/sass/style.scss → public/css/style.css.
 */

:root {
	--cleon-icon-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--cleon-icon-angle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
 * Grid: main.css › Custom sets `.row { max-width: 1140px; margin: 0 auto }`, which drops
 * Bootstrap's negative gutter margins, so the first/last col of every row are inset by half
 * a gutter. Keep the cap + centring when the parent is wider than the cap, and fall back to
 * the -½ gutter margins (Bootstrap) when it is narrower: max() picks whichever applies.
 * ------------------------------------------------------------------ */
.row {
	--cleon-row-max: 1140px;
	max-width: var(--cleon-row-max);
	margin-right: max(calc(-.5 * var(--bs-gutter-x)), calc((100% - var(--cleon-row-max)) / 2));
	margin-left: max(calc(-.5 * var(--bs-gutter-x)), calc((100% - var(--cleon-row-max)) / 2));
}

.cleon-so-hoa main .row {
	--cleon-row-max: 980px;
}


/* ------------------------------------------------------------------
 * Menu arrows — Font Awesome glyphs (\f107, \f105) replaced by SVG masks
 * ------------------------------------------------------------------ */
.cleon-header-menu > nav > ul > li.cleon-dropdown > a::after,
.cleon-header-menu > nav > ul > li .cleon-submenu li.cleon-dropdown > a::after {
	content: "";
	width: 0.75em;
	height: 0.75em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: var(--cleon-icon-angle-down) center / contain no-repeat;
	mask: var(--cleon-icon-angle-down) center / contain no-repeat;
}

.cleon-header-menu > nav > ul > li .cleon-submenu li.cleon-dropdown > a::after {
	-webkit-mask-image: var(--cleon-icon-angle-right);
	mask-image: var(--cleon-icon-angle-right);
}

/* Breadcrumb trail: 13px (main.css: 15px) */
.cleon-breadcrumb-list ul li {
	font-size: 13px;
}

/* ------------------------------------------------------------------
 * Breadcrumb overlay — Togo fades black 60% → 0 linearly and stops dead at the
 * section's bottom edge. That slope break reads as a bright stripe (Mach band)
 * right below the section. Ease the fade out (alpha 0.6·(1−t)²) so it lands on
 * the page background with no visible edge.
 * ------------------------------------------------------------------ */
.cleon-breadcrumb-bg::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.486) 10%,
		rgba(0, 0, 0, 0.384) 20%,
		rgba(0, 0, 0, 0.294) 30%,
		rgba(0, 0, 0, 0.216) 40%,
		rgba(0, 0, 0, 0.15) 50%,
		rgba(0, 0, 0, 0.096) 60%,
		rgba(0, 0, 0, 0.054) 70%,
		rgba(0, 0, 0, 0.024) 80%,
		rgba(0, 0, 0, 0.006) 90%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* ------------------------------------------------------------------
 * Stacking order (z-index scale). Togo's header was only 9, so its dropdowns
 * (99, but inside the header's stacking context) fell under page widgets.
 *   page widgets (search panel box)  10
 *   back to top                      90
 *   header + its dropdown menus     100
 *   body overlay                   1000
 *   offcanvas / filter drawer      1010
 * Above all: the search <dialog> (browser top layer) and Spotlight (99999).
 * ------------------------------------------------------------------ */
:root {
	--cleon-z-content: 10;
	--cleon-z-back-to-top: 90;
	--cleon-z-header: 100;
	--cleon-z-overlay: 1000;
	--cleon-z-drawer: 1010;
}

.cleon-hdr-transparent {
	z-index: var(--cleon-z-header);
}

.cleon-back-wrapper {
	z-index: var(--cleon-z-back-to-top);
}

/* Smart header (theme.js smartHeader): pinned past its height, hidden while scrolling down. */
.cleon-hdr-transparent.is-pinned {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cleon-hdr-transparent.is-pinned.is-hidden {
	box-shadow: none;
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.cleon-hdr-transparent.is-pinned {
		transition: none;
	}
}

.body-overlay {
	z-index: var(--cleon-z-overlay);
}

.offcanvas-wrapper,
.filter-wrapper {
	z-index: var(--cleon-z-drawer);
}

/* ------------------------------------------------------------------
 * Offcanvas (mobile menu): the top bar mirrors the mobile header (56px tall,
 * 32px side gutter = wrapper 20 + column 12), so the logo and the close button
 * open where the header logo and the menu button were. Togo: 40px all round + 50px gap.
 * ------------------------------------------------------------------ */
.offcanvas-wrapper {
	padding: 0 32px 32px;
}

.offcanvas-top {
	min-height: 56px;
	margin-bottom: 12px;
}

.offcanvas-logo a {
	display: inline-block;
}

.offcanvas-logo,
.offcanvas-close {
	display: flex; /* no line box around the logo / button */
}

.offcanvas-close-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-right: -8px; /* glyph edge lines up with the gutter */
	color: var(--cleon-common-black);
}

.offcanvas-close-btn svg {
	display: block;
	width: 32px;
	height: 32px;
}

/* ------------------------------------------------------------------
 * Section colours live here, not in data-bg-color (removed from the HTML and
 * from theme.js): an inline style would override the page background.
 * ------------------------------------------------------------------ */
.cleon-header-dark,
.cleon-footer-sec {
	background-color: #2e2c2c;
}

/* Header height: 60px desktop (menu link 17 + 26 + 17; Togo 66), 56px below xl
   (wrapper 8 + 40 + 8; Togo 80). Applies to header 3 and header 4 alike. */
.cleon-header-menu > nav > ul > li > a {
	padding-block: 17px;
}

@media (max-width: 1199.98px) {
	.cleon-header-wrapper {
		padding-block: 8px;
	}
}

/* Header + offcanvas logo: fixed 28px tall, width follows the image ratio */
.cleon-header-logo img,
.offcanvas-logo img {
	width: auto;
	max-width: 100%;
	height: 28px;
	object-fit: contain;
}

/* ------------------------------------------------------------------
 * Dark header — same background as the footer (#2e2c2c).
 * Only the top level changes; submenu dropdowns keep their white panel.
 * ------------------------------------------------------------------ */
.cleon-header-dark .cleon-header-menu > nav > ul > li > a,
.cleon-header-dark .cleon-header-menu > nav > ul > li.cleon-dropdown > a::after,
.cleon-header-dark .cleon-header-3-bar {
	color: var(--cleon-common-white);
}

.cleon-header-dark .cleon-header-menu > nav > ul > li:hover > a,
.cleon-header-dark .cleon-header-menu > nav > ul > li.cleon-dropdown:hover > a::after,
.cleon-header-dark .cleon-header-3-bar .cleon-offcanvas-3-open-btn:hover {
	color: var(--cleon-theme-primary);
}

.cleon-header-dark.cleon-hdr-bdr {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Overlay variant (home): same dark header markup, see-through over the hero photo. Once
   smartHeader pins it over page content it takes the dark background back. */
.cleon-header-overlay:not(.is-pinned) {
	background-color: transparent;
}

/* about.html's header 4 has no background at all: give it one when pinned too */
.cleon-header-4-sec.is-pinned {
	background-color: #2e2c2c;
}

/* ------------------------------------------------------------------
 * Header search button (left of the mobile menu button)
 * ------------------------------------------------------------------ */
.cleon-header-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--cleon-common-black);
	background: none;
	border: 0;
	border-radius: 50%;
	transition: color 0.2s ease;
}

.cleon-header-dark .cleon-header-search-btn,
.cleon-header-4-sec .cleon-header-search-btn {
	color: var(--cleon-common-white);
}

.cleon-header-search-btn:hover,
.cleon-header-search-btn:focus-visible {
	color: var(--cleon-theme-primary);
}

/* ------------------------------------------------------------------
 * Header language switcher (every page, left of the search button). A disclosure:
 * button + list of links to the same page in each language (theme.js languageSwitcher).
 * ------------------------------------------------------------------ */
.cleon-lang-switcher {
	position: relative;
	margin-right: 4px;
}

.cleon-lang-switcher-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--cleon-common-black);
	background: none;
	border: 0;
	border-radius: 20px;
	transition: color 0.2s ease;
}

.cleon-header-dark .cleon-lang-switcher-btn,
.cleon-header-4-sec .cleon-lang-switcher-btn {
	color: var(--cleon-common-white);
}

.cleon-lang-switcher-btn:hover,
.cleon-lang-switcher-btn:focus-visible,
.cleon-lang-switcher-btn[aria-expanded="true"] {
	color: var(--cleon-theme-primary);
}

.cleon-lang-switcher-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 10;
	min-width: 160px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--cleon-common-white);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.cleon-lang-switcher-menu[hidden] {
	display: none;
}

.cleon-lang-switcher-menu a {
	display: block;
	padding: 8px 16px;
	font-size: 15px;
	color: var(--cleon-common-black);
}

.cleon-lang-switcher-menu a:hover,
.cleon-lang-switcher-menu a:focus-visible,
.cleon-lang-switcher-menu a[aria-current] {
	color: var(--cleon-theme-primary);
}

.cleon-lang-switcher-menu a[aria-current] {
	font-weight: 500;
}


/* ------------------------------------------------------------------
 * Search popup (<dialog>) — realtime listing search (plan 07)
 * ------------------------------------------------------------------ */
.cleon-search-open {
	overflow: hidden;
}

.cleon-search-popup {
	width: min(720px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: 12vh auto auto;
	padding: 0;
	color: var(--cleon-common-black);
	background: var(--cleon-common-white);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.cleon-search-popup::backdrop {
	background: rgba(46, 44, 44, 0.8);
}

.cleon-search-popup[open] {
	animation: cleon-search-in 0.2s ease-out;
}

@keyframes cleon-search-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
}

.cleon-search-popup-panel {
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

.cleon-search-popup-form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px 0 20px;
	border-bottom: 1px solid #eee;
}

.cleon-search-popup-icon {
	display: inline-flex;
	color: #888;
}

.cleon-search-popup-input {
	flex: 1;
	min-width: 0;
	height: 64px;
	padding: 0;
	font-size: 18px;
	color: inherit;
	background: none;
	border: 0;
	outline: none;
}

.cleon-search-popup-input::-webkit-search-cancel-button {
	display: none;
}

.cleon-search-popup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #888;
	background: none;
	border: 0;
	border-radius: 50%;
}

.cleon-search-popup-close:hover,
.cleon-search-popup-close:focus-visible {
	color: var(--cleon-common-black);
	background: #f3f3f3;
}

.cleon-search-popup-body {
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cleon-search-popup-status {
	margin: 0;
	padding: 12px 20px 0;
	font-size: 14px;
	color: #888;
}

.cleon-search-popup-status:empty {
	display: none;
}

.cleon-search-popup-results {
	margin: 0;
	padding: 8px;
	list-style: none;
}

.cleon-search-popup-results:empty {
	display: none;
}

.cleon-search-popup-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
	color: inherit;
	border-radius: 10px;
}

.cleon-search-popup-results [aria-selected="true"] .cleon-search-popup-item {
	background: #f5f5f5;
}

.cleon-search-popup-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 8px;
	background: #eee;
}

.cleon-search-popup-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cleon-search-popup-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 22px;
	color: #888;
}

.cleon-search-popup-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cleon-search-popup-name {
	font-size: 16px;
	line-height: 1.4;
}

.cleon-search-popup-name mark {
	padding: 0;
	font-weight: 600;
	color: var(--cleon-theme-primary);
	background: none;
}

.cleon-search-popup-terms {
	font-size: 13px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 575px) {
	.cleon-search-popup {
		width: 100%;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0 0 16px 16px;
	}

	.cleon-search-popup-input {
		height: 56px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------
 * Inline search box (listing / map page header) — one input, realtime results
 * in a dropdown panel. Result rows reuse the popup's .cleon-search-popup-* styles.
 * ------------------------------------------------------------------ */
.cleon-breadcrumb-content .cleon-listing-search {
	flex-wrap: nowrap;
	width: min(560px, calc(100vw - 32px));
	padding: 3px 6px 3px 18px;
}

.cleon-breadcrumb-content .cleon-listing-search .cleon-hero-11-input-search {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-left: 0;
	border: 0;
}

.cleon-listing-search .cleon-hero-11-input-search-wrap label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cleon-common-black);
}

.cleon-listing-search-input {
	width: 100%;
	outline: none;
}

/* Taller than Togo's 24px input (.cleon-hero-11-input-search-wrap input) */
.cleon-listing-search .cleon-listing-search-input {
	height: 36px;
	font-size: 16px;
}

.cleon-listing-search-input::-webkit-search-cancel-button {
	display: none;
}

@media (max-width: 767px) {
	.cleon-breadcrumb-content .cleon-listing-search .cleon-hero-2-search-btn {
		padding-bottom: 0;
	}
}

.cleon-listing-search-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	display: none;
	max-height: min(60vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left;
	background: var(--cleon-common-white);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.cleon-listing-search.is-open .cleon-listing-search-panel {
	display: block;
}

.cleon-listing-search-panel .cleon-search-popup-status:has(+ .cleon-search-popup-results:empty) {
	padding-bottom: 12px;
}

/* Listing page header: col-lg-6 search on the left, col-lg-6 Số hóa / Bản đồ shortcuts on the right */
.cleon-breadcrumb-content:has(.cleon-listing-search) {
	display: block;
}

/* The result panel's z-index only counts inside this box (.z-index-1 makes it a stacking
   context at level 1), so raise the whole box above the sidebar and grid that follow. */
.cleon-breadcrumb-content.z-index-1:has(.cleon-listing-search) {
	z-index: var(--cleon-z-content);
}

.cleon-breadcrumb-content .cleon-listing-search {
	width: 100%;
	max-width: 900px;
}

.cleon-listing-shortcuts {
	/* Above the breadcrumb's dark overlay (::before), like .cleon-breadcrumb-content.z-index-1 */
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
}

@media (max-width: 991px) {
	.cleon-listing-shortcuts {
		margin-top: 20px;
	}
}

/* Same button as the card actions (.cleon-listing-card-action), sized to the search box height */
.cleon-listing-card-action.cleon-listing-shortcut {
	width: 56px;
	height: 56px;
	background-color: var(--cleon-common-white);
	border-color: #EEE;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.cleon-listing-card-action.cleon-listing-shortcut:hover,
.cleon-listing-card-action.cleon-listing-shortcut:focus-visible {
	background-color: var(--cleon-theme-primary);
	border-color: var(--cleon-theme-primary);
	box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.25);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.cleon-listing-card-action.cleon-listing-shortcut:hover,
	.cleon-listing-card-action.cleon-listing-shortcut:focus-visible {
		transform: none;
	}
}

/* Glyph size of the shortcut icons */
.cleon-listing-shortcut svg {
	width: 32px;
	height: 32px;
}

/* Keep the search box exactly as tall as the shortcut buttons */
.cleon-breadcrumb-content .cleon-listing-search {
	min-height: 56px;
}

/* ------------------------------------------------------------------
 * Listing filter sidebar — one radio group per Directory term type.
 * Reuses Togo's .cleon-from-checkbox look with a round box and a dot.
 * ------------------------------------------------------------------ */
.cleon-from-radio input {
	/* Togo hides the input (display: none); keep it focusable instead */
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cleon-from-radio label::after {
	border-radius: 50%;
}

.cleon-from-radio label::before {
	content: "";
	top: 9px;
	left: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--cleon-common-black);
	filter: none;
}

.cleon-from-radio input:checked ~ label {
	color: var(--cleon-common-black);
}

.cleon-from-radio input:focus-visible ~ label::after {
	outline: 2px solid var(--cleon-theme-primary);
	outline-offset: 2px;
}

/* "Lọc" / "Xoá bộ lọc": in the mobile offcanvas, and for no-JS. The desktop sidebar submits
   on change and has "Xoá bộ lọc" in the top bar, so it hides them once theme.js has run. */
.cleon-listing-filter-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 20px 24px 24px;
}

.cleon-listing-filter-reset {
	font-size: 15px;
	color: var(--cleon-common-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cleon-listing-filter-reset:hover {
	color: var(--cleon-theme-primary);
}

/* Drawer head: offcanvas only */
.cleon-filter-drawer-head {
	display: none;
}

@media (min-width: 1200px) {
	.cleon-filter-drawer.is-ready .cleon-listing-filter-actions {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Listing archive below xl — the filter sidebar no longer sits beside the grid,
 * so theme.js › listingFilter turns it into an offcanvas (.is-ready) opened by the
 * "Bộ lọc" button. Three rows: head, groups (the only part that scrolls), and the
 * buttons pinned to the bottom. 100dvh, not Togo's 100vh: on mobile browsers 100vh
 * is taller than the visible area and the buttons ended up under the address bar.
 * ------------------------------------------------------------------ */
.cleon-listing-filter-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	font-size: 15px;
	color: var(--cleon-common-black);
	background-color: var(--cleon-common-white);
	border: 1px solid #e8e8e8;
	border-radius: 21px;
	transition: border-color 0.2s ease;
}

.cleon-listing-filter-toggle[hidden] {
	display: none;
}

/* Desktop: the sidebar is beside the grid, no offcanvas */
@media (min-width: 1200px) {
	.cleon-listing-filter-toggle {
		display: none;
	}
}

.cleon-listing-filter-toggle:hover {
	border-color: #dbdbdb;
}

.cleon-listing-filter-toggle:focus-visible {
	border-color: #999;
	outline: none;
}

.cleon-listing-filter-badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 12px;
	line-height: 1;
	color: var(--cleon-common-white);
	background-color: var(--cleon-theme-primary);
	border-radius: 10px;
}

html.cleon-scroll-lock {
	overflow: hidden;
}

@media (max-width: 1199.98px) {
	/* Hero: shortcuts hidden, so only the header (56px) + a little air above the search box */
	body.listing-archive .cleon-breadcrumb-sec {
		padding-top: 80px;
	}

	body.listing-archive .cleon-heritage-grid-sec {
		padding-top: 24px;
	}

	/* No "shown/total sites" line (+ its "Xoá bộ lọc", also in the offcanvas): sort + "Bộ lọc" on the right */
	body.listing-archive .cleon-heritage-grid-filter-clear {
		display: none;
	}

	.cleon-heritage-grid-select-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
	}

	.cleon-filter-drawer.is-ready .cleon-filter-drawer-panel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: var(--cleon-z-drawer);
		display: flex;
		flex-direction: column;
		width: min(380px, 90vw);
		height: 100vh;
		height: 100dvh;
		background-color: var(--cleon-common-white);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.cleon-filter-drawer.is-ready.opened .cleon-filter-drawer-panel {
		visibility: visible;
		transform: none;
		transition: transform 0.3s ease;
	}

	.cleon-filter-drawer.is-ready .cleon-filter-drawer-head {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 8px 20px 8px 24px;
		border-bottom: 1px solid #EEE;
	}

	.cleon-filter-drawer-title {
		margin: 0;
		font-size: 20px;
		font-weight: 500;
	}

	.cleon-filter-drawer-close {
		margin-right: -8px;
	}

	.cleon-filter-drawer-close svg {
		width: 28px;
		height: 28px;
	}

	.cleon-filter-drawer.is-ready .cleon-listing-filter {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	.cleon-filter-drawer.is-ready .cleon-listing-filter-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.cleon-filter-drawer.is-ready .cleon-heritage-widget {
		padding: 20px 24px;
	}

	.cleon-filter-drawer.is-ready .cleon-listing-filter-actions {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid #EEE;
		box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
	}

	/* Same height as the sort select / "Bộ lọc" button (42px) */
	.cleon-filter-drawer.is-ready .cleon-listing-filter-submit {
		flex: 1 1 auto;
		height: 42px;
		padding-block: 0;
		line-height: 42px;
		text-align: center;
	}
}

@media (max-width: 767.98px) {
	/* Sort select fills the row beside "Bộ lọc" */
	.cleon-heritage-grid-select-wrap {
		flex: 1 1 100%;
	}

	.cleon-heritage-grid-select-wrap .cleon-heritage-grid-select {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cleon-heritage-grid-select-wrap .cleon-heritage-grid-select select {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cleon-filter-drawer.is-ready .cleon-filter-drawer-panel,
	.cleon-filter-drawer.is-ready.opened .cleon-filter-drawer-panel {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Home hero — fixed height for the prototype (the Blade theme sizes it from the
 * real image). The bottom fades into the CTA block right below it
 * (.cleon-home-cta-sec, #E8E8E8), so the two sections join without an edge.
 * The fade covers the last 28% on an S-curve (smootherstep): no slope break at
 * either end, so no bright or dark band. Only this section is affected.
 * ------------------------------------------------------------------ */
:root {
	--cleon-home-cta-bg: #E8E8E8; /* keep in sync with .cleon-home-cta-sec and body.bg-about .cleon-about-story-sec (main.css) */
}

.cleon-home-hero {
	display: flex;
	align-items: center;
	height: 780px;
	padding-top: 80px; /* the transparent header overlaps the top */
}

.cleon-home-hero::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(232, 232, 232, 0) 0%,
		rgba(232, 232, 232, 0) 72%,
		rgba(232, 232, 232, 0.009) 74.8%,
		rgba(232, 232, 232, 0.058) 77.6%,
		rgba(232, 232, 232, 0.163) 80.4%,
		rgba(232, 232, 232, 0.317) 83.2%,
		rgba(232, 232, 232, 0.500) 86%,
		rgba(232, 232, 232, 0.683) 88.8%,
		rgba(232, 232, 232, 0.837) 91.6%,
		rgba(232, 232, 232, 0.942) 94.4%,
		rgba(232, 232, 232, 0.991) 97.2%,
		var(--cleon-home-cta-bg) 100%
	);
}

/* Heading above both overlays (::before dim, ::after fade) */
.cleon-home-hero .cleon-hero-12-heading {
	z-index: 2;
}

.cleon-home-hero > .container {
	width: 100%;
}

/* Title, subtitle and button centred */
.cleon-home-hero .cleon-hero-12-heading {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

/* Realtime search between the subtitle and the button — the listing.html box (pill,
   56px, result panel below), restated here because Togo scopes that look to
   .cleon-breadcrumb-content. */
.cleon-home-hero-search {
	max-width: 800px;
	margin: 32px auto; /* the top collapses with the subtitle's 15px margin */
}

.cleon-home-hero .cleon-listing-search {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 3px 6px 3px 18px;
	text-align: left;
	border: 1px solid #EEE;
	border-radius: 40px;
	background-color: var(--cleon-common-white);
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
}

.cleon-home-hero .cleon-listing-search .cleon-hero-11-input-search {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-left: 0;
	border: 0;
}

.cleon-home-hero .cleon-listing-search .cleon-hero-2-search-btn {
	padding-bottom: 0;
}

/* Darker than Togo's flat 30% dim. A soft, wide vignette adds depth without a
   "spotlight" in the centre; the vertical wash is darkest at the bottom so the short
   fade into the page stays dark instead of turning grey. */
.cleon-home-hero::before {
	background:
		radial-gradient(ellipse 110% 100% at 50% 45%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.2) 100%),
		linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0.5) 35%, rgba(17, 17, 17, 0.55) 70%, rgba(17, 17, 17, 0.75) 100%);
}

/* ------------------------------------------------------------------
 * About hero (about.html, .cleon-breadcrumb-style-2-sec) — same treatment as the
 * home hero: darker dim with a soft vignette, and a bottom fade into the story
 * section right below it (body.bg-about .cleon-about-story-sec, #E8E8E8 in main.css).
 * One ::after, layered: the fade (top layer) over the dim. Same smootherstep curve
 * over the last 28%: no bright or dark band.
 * ------------------------------------------------------------------ */
.cleon-about-hero::after {
	background:
		linear-gradient(
			180deg,
			rgba(232, 232, 232, 0) 0%,
			rgba(232, 232, 232, 0) 72%,
			rgba(232, 232, 232, 0.009) 74.8%,
			rgba(232, 232, 232, 0.058) 77.6%,
			rgba(232, 232, 232, 0.163) 80.4%,
			rgba(232, 232, 232, 0.317) 83.2%,
			rgba(232, 232, 232, 0.500) 86%,
			rgba(232, 232, 232, 0.683) 88.8%,
			rgba(232, 232, 232, 0.837) 91.6%,
			rgba(232, 232, 232, 0.942) 94.4%,
			rgba(232, 232, 232, 0.991) 97.2%,
			var(--cleon-home-cta-bg) 100%
		),
		radial-gradient(ellipse 110% 100% at 50% 45%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.2) 100%),
		linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0.5) 35%, rgba(17, 17, 17, 0.55) 70%, rgba(17, 17, 17, 0.75) 100%);
}

/* ------------------------------------------------------------------
 * Full-frame pages (body.fullframe: ban-do.html, vt.html) — no footer.
 * The page is exactly one viewport tall and never scrolls: the header sits in the
 * flow at the top (never hides, theme.js skips smartHeader) and <main> fills the rest.
 * Scrolling, dragging and zooming belong to the frame inside (Leaflet map / tour
 * iframe), which gets its own events as usual.
 * ------------------------------------------------------------------ */
body.fullframe {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	overscroll-behavior: none; /* no rubber-band / pull-to-refresh of the page */
}

.fullframe .cleon-hdr-transparent {
	position: relative;
	flex: none;
}

body.fullframe main {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

/* Map page (ban-do.html): the map fills <main> */
.cleon-map-sec {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

.cleon-map {
	z-index: 0; /* keep Leaflet's panes (z-index 400+) under the header and drawers */
	width: 100%;
	height: 100%;
	background: #e5e3df;
}

/* Virtual tour page (vt.html) */

/* The iframe is absolutely positioned over the section instead of relying on flex stretch:
   some engines (Safari) size a stretched iframe from its intrinsic 150px height. */
.cleon-vt-sec {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

.cleon-vt-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #111;
}

/* Filter bar: floats over the bottom of the map, 20px above its edge */
.cleon-map-filter-wrap {
	position: absolute;
	right: 16px;
	bottom: 20px;
	left: 16px;
	z-index: 1;
	height: 60px;
	pointer-events: none; /* the map stays draggable beside the bar */
}

.cleon-map-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 1200px;
	height: 60px;
	margin: 0 auto;
	padding: 0 10px 0 24px;
	overflow-x: auto;
	scrollbar-width: none;
	pointer-events: auto;
	background: var(--cleon-common-white);
	border: 1px solid #ddd;
	border-radius: 30px; /* 50% of the height: a pill */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cleon-map-filter::-webkit-scrollbar {
	display: none;
}

.cleon-map-filter-label {
	flex: none;
	margin-right: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--cleon-common-black);
	white-space: nowrap;
}

/* Equal share of the bar; long option text is cut with "…". Narrow screens scroll the bar. */
.cleon-map-filter-select {
	flex: 1 1 0;
	min-width: 140px;
}

.cleon-map-filter-select select {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cleon-map-popup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--cleon-common-black);
}

.cleon-map-popup:hover {
	color: var(--cleon-theme-primary);
}

.cleon-map-popup-thumb {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	background: #eee;
}

.cleon-map-popup-name {
	font-size: 14px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Home CTA cards (Di tích / Số hóa / Bản đồ) — Togo place-5 item + hover button
 * ------------------------------------------------------------------ */
/* The whole card is one <a>; the button inside is a visual <span> (no nested link) */
.cleon-cta-card {
	display: block;
	border-radius: 6px;
	color: inherit;
}

.cleon-cta-card:focus-visible {
	outline: 2px solid var(--cleon-theme-primary);
	outline-offset: 3px;
}

.cleon-cta-card .cleon-place-5-item-thumb {
	overflow: hidden;
}

.cleon-cta-card .cleon-place-5-item-thumb img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Translucent dark overlay so the title, subtitle and button stay readable on any photo */
.cleon-cta-card .cleon-place-5-item-thumb::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: 6px;
	background: rgba(17, 17, 17, 0.45);
	pointer-events: none;
	transition: background-color 0.3s ease;
}

.cleon-cta-card:hover .cleon-place-5-item-thumb::after,
.cleon-cta-card:focus-within .cleon-place-5-item-thumb::after {
	background: rgba(17, 17, 17, 0.55);
}

.cleon-cta-card .cleon-place-5-item-content {
	right: 35px;
	z-index: 1;
}

.cleon-cta-card .cleon-place-5-item-title {
	margin-bottom: 6px;
}

.cleon-cta-card-subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.cleon-cta-card-btn {
	position: absolute;
	left: 35px;
	bottom: 35px;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.cleon-cta-card:hover .cleon-cta-card-btn,
.cleon-cta-card:focus-within .cleon-cta-card-btn {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Touch screens have no hover: always show the button */
@media (hover: none) {
	.cleon-cta-card-btn {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Listing card — one static thumbnail (Togo's per-card Swiper removed)
 * ------------------------------------------------------------------ */
.cleon-heritage-2-card-thumb > a {
	display: block;
}

/* ------------------------------------------------------------------
 * Listing card (views/directory/partials/listing-card): equal heights in a row,
 * 2-line title, heritage-level badge, map / VR / detail actions
 * ------------------------------------------------------------------ */
.cleon-listing-card {
	display: flex;
	flex-direction: column;
	height: calc(100% - 24px); /* fill the column, minus .mb-24 */
}

.cleon-listing-card .cleon-heritage-2-card-thumb {
	flex: none;
	margin-bottom: 18px;
}

.cleon-listing-card .cleon-heritage-2-card-thumb img {
	aspect-ratio: 4 / 3;
}

/* VR archive (/so-hoa/): wider cards (2 columns), so a flatter 16:9 thumbnail */
.cleon-vt-archive .cleon-listing-card .cleon-heritage-2-card-thumb img {
	aspect-ratio: 16 / 9;
}

/* Dim the photo a little (replaces Togo's bottom-only gradient); it clears on hover/focus */
.cleon-listing-card .cleon-heritage-2-card-thumb::after {
	top: 0;
	height: 100%;
	border-radius: inherit;
	background: rgba(17, 17, 17, 0.25);
	transition: background-color 0.4s ease;
}

.cleon-listing-card:hover .cleon-heritage-2-card-thumb::after,
.cleon-listing-card:focus-within .cleon-heritage-2-card-thumb::after {
	background-color: rgba(17, 17, 17, 0);
}

/* Heritage level: a plain badge, not Togo's yellow "Best seller" */
.cleon-listing-card .cleon-heritage-card-sell {
	top: 14px;
	left: 14px;
}

.cleon-listing-card .cleon-heritage-card-sell span {
	padding: 2px 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cleon-common-black);
	background-color: rgba(255, 255, 255, 0.9);
}

.cleon-listing-card .cleon-heritage-2-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

.cleon-listing-card-level {
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--cleon-theme-primary);
}

.cleon-listing-card-level:hover {
	color: var(--cleon-common-black);
}

/* "Xếp hạng:" prefix — muted so the level name stays the focus */
.cleon-listing-card-level-label {
	color: var(--cleon-text-body);
}

/* Always 2 lines: clamp long names, reserve the space for short ones */
.cleon-listing-card .cleon-heritage-2-card-title {
	display: -webkit-box;
	width: 100%;
	min-height: calc(2em * 1.6);
	margin-bottom: 16px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Pinned to the bottom so every card in a row lines up */
.cleon-listing-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: auto;
}

.cleon-listing-card-links {
	display: flex;
	gap: 8px;
}

.cleon-listing-card-action {
	display: inline-grid;
	place-content: center;
	width: 28px;
	height: 28px;
	color: var(--cleon-common-black);
	border: 1px solid var(--cleon-gray-2);
	border-radius: 50%;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.cleon-listing-card-action:hover,
.cleon-listing-card-action:focus-visible {
	color: var(--cleon-common-white);
	background-color: var(--cleon-theme-primary);
	border-color: var(--cleon-theme-primary);
}

.cleon-listing-card-detail {
	margin-left: auto;
}

/* Mobile menu toggle button (theme.js injects an inline SVG) */
.cleon-mobilemenu-content ul li.cleon-dropdown > a .dropdown-toggle-btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}


/* ------------------------------------------------------------------
 * Native <select> styled like Togo's nice-select (nice-select.js removed)
 * ------------------------------------------------------------------ */
.cleon-heritage-grid-select select {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	min-width: 170px;
	height: 42px;
	padding: 0 40px 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--cleon-common-black);
	background: var(--cleon-common-white) no-repeat right 18px center / 12px 12px;
	background-image: var(--cleon-icon-angle-down);
	border: 1px solid #e8e8e8;
	border-radius: 21px;
	outline: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.cleon-heritage-grid-select select:hover {
	border-color: #dbdbdb;
}

.cleon-heritage-grid-select select:focus-visible {
	border-color: #999;
}


/* ------------------------------------------------------------------
 * Language switcher (footer) — reuses Togo's currency dropdown UI
 * ------------------------------------------------------------------ */
.currence-work li.active a::after {
	content: "✔";
	margin-left: 6px;
	font-style: normal;
}


/* ------------------------------------------------------------------
 * Outline button (.bdr-style.orange-bdr: about story, contact widget, error page).
 * Togo's border colour rule outranks its own hover rule, so on hover the dark fill
 * kept a primary-coloured ring. The border now follows the fill.
 * ------------------------------------------------------------------ */
.cleon-btn-primary.bdr-style.orange-bdr:hover,
.cleon-btn-primary.bdr-style.orange-bdr:focus-visible {
	color: var(--cleon-common-white);
	background-color: var(--cleon-common-orange);
	border-color: var(--cleon-common-orange);
}

/* ------------------------------------------------------------------
 * Error page (error.html): text + button only, centred in a full-viewport section.
 * The header is absolute (overlaps the top), so the top padding keeps the content
 * centred in the visible area below it.
 * ------------------------------------------------------------------ */
.cleon-error-sec {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 80px 0 40px;
}

.cleon-error-sec > .container {
	width: 100%;
}

/* ------------------------------------------------------------------
 * Fade animation — IntersectionObserver + CSS (GSAP removed)
 * theme.js sets --fade-* per element and adds .fade-anim-ready on <html>.
 * ------------------------------------------------------------------ */
.fade-anim-ready .fade-anim {
	transition:
		opacity var(--fade-duration, 0.75s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--fade-delay, 0.15s),
		transform var(--fade-duration, 0.75s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--fade-delay, 0.15s);
}

.fade-anim-ready .fade-anim:not(.is-visible) {
	opacity: 0;
	transform: translate3d(var(--fade-x, 0), var(--fade-y, 40px), 0);
}

@media (prefers-reduced-motion: reduce) {
	.fade-anim-ready .fade-anim {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Listing detail (listing-details.html) — Listing fields, plan 06 §10.5
 * ------------------------------------------------------------------ */
/* Section headings are h2/h3 for the outline; keep Togo's h4/h5 sizes */
.cleon-listing-detail h2.cleon-heritage-details-title {
	font-size: 22px;
}

.cleon-listing-detail h3.cleon-heritage-details-service-title,
.cleon-listing-timeline-title,
.cleon-listing-rows-title {
	margin-bottom: 4px;
	font-size: 16px;
}

/* Meta line under the title: code · short link · QR */
.cleon-listing-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	list-style: none;
}

.cleon-listing-meta-label {
	color: var(--cleon-text-body);
}

.cleon-listing-meta strong {
	font-weight: 500;
	color: var(--cleon-common-black);
}

.cleon-listing-meta a {
	color: var(--cleon-theme-primary);
}

.cleon-listing-meta a:hover {
	text-decoration: underline;
}

.cleon-listing-meta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Gallery: 1 large + 2 × 2 small tiles; the small column is exactly as tall as the large photo
   (each tile keeps Togo's mb-10, so 2 tiles + 1 gap = large height) */
.cleon-listing-detail {
	--cleon-gallery-h: clamp(380px, 40vw, 595px);
}

.cleon-listing-detail .cleon-heritage-details-gallery-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
}

.cleon-listing-detail .cleon-heritage-details-gallery-thumb {
	aspect-ratio: 4 / 3;
}

/* Frame every tile so photos with a white background stand out from the page. The tile clips
   (overflow: hidden) to its inner radius, so the image itself needs no radius; border-box keeps
   the tile heights above. */
.cleon-heritage-details-gallery-thumb {
	border: 1px solid var(--cleon-gray-1);
	border-radius: 8px;
	background-color: var(--cleon-gray-2);
}

.cleon-heritage-details-gallery-thumb img {
	border-radius: 0;
}

.cleon-listing-detail .cleon-heritage-details-gallery-thumb.h-fix {
	aspect-ratio: 16 / 10;
	height: auto;
}

@media (min-width: 992px) {
	.cleon-listing-detail .cleon-heritage-details-gallery-thumb {
		aspect-ratio: auto;
		height: calc((var(--cleon-gallery-h) - 10px) / 2);
	}

	.cleon-listing-detail .cleon-heritage-details-gallery-thumb.h-fix {
		aspect-ratio: auto;
		height: var(--cleon-gallery-h);
	}
}

/* Tổng quan: term facts without Togo's icon dot */
.cleon-listing-facts ul li span::before {
	display: none;
}

.cleon-listing-facts ul li span i a {
	color: var(--cleon-theme-primary);
}

.cleon-listing-facts ul li span i a:hover {
	text-decoration: underline;
}

.cleon-listing-lead {
	font-size: 17px;
	color: var(--cleon-common-black);
}

/* Dòng thời gian */
.cleon-listing-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cleon-listing-timeline li {
	position: relative;
	padding: 0 0 22px 28px;
	border-left: 1px solid #DDD;
	margin-left: 6px;
}

.cleon-listing-timeline li:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.cleon-listing-timeline li::before {
	position: absolute;
	top: 4px;
	left: -7px;
	width: 13px;
	height: 13px;
	content: "";
	border-radius: 50%;
	border: 3px solid var(--cleon-common-white);
	background: var(--cleon-theme-primary);
	box-shadow: 0 0 0 1px var(--cleon-theme-primary);
}

.cleon-listing-timeline-date {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cleon-theme-primary);
}

.cleon-listing-timeline p,
.cleon-listing-rows p {
	margin: 0;
	font-size: 15px;
}

/* Lễ hội: lunar date above the name */
.cleon-listing-festival-date {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--cleon-theme-primary);
}

.cleon-listing-detail .cleon-heritage-details-service-content p {
	margin-bottom: 0;
}

/* Hiện vật: one row per item */
.cleon-listing-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #EEE;
	border-radius: 8px;
}

.cleon-listing-rows li {
	padding: 16px 20px;
}

.cleon-listing-rows li + li {
	border-top: 1px solid #EEE;
}

/* Hiện vật có ảnh: thumbnail bên trái (mở lightbox) */
.cleon-listing-rows-media {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cleon-listing-rows-thumb {
	flex: 0 0 96px;
}

.cleon-listing-rows-thumb img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid var(--cleon-gray-1);
	border-radius: 6px;
}

/* Vị trí */
.cleon-listing-map {
	z-index: 0; /* keep Leaflet's panes (z-index 400+) under the header and drawers */
	height: 380px;
	border-radius: 8px;
	background: #e5e3df;
}

/* Tư liệu tham khảo */
.cleon-listing-references {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cleon-listing-references li {
	margin-bottom: 10px;
	font-size: 15px;
}

.cleon-listing-references a {
	color: var(--cleon-common-black);
	text-decoration: underline;
}

/* Print source (no url): same weight as a link title */
.cleon-listing-references strong {
	font-weight: 400;
	color: var(--cleon-common-black);
}

.cleon-listing-references a:hover {
	color: var(--cleon-theme-primary);
}

.cleon-listing-references span {
	display: block;
	font-size: 14px;
	color: var(--cleon-text-body);
}

/* Sidebar lists: label + value, links in primary */
.cleon-listing-detail .cleon-heritage-details-booking-list ul li span {
	flex: none;
	color: var(--cleon-text-body);
}

.cleon-listing-detail .cleon-heritage-details-booking-list ul li {
	color: var(--cleon-common-black);
}

.cleon-listing-contact a {
	color: var(--cleon-theme-primary);
	word-break: break-word;
}

/* ------------------------------------------------------------------
 * Contact form (contact.html) — markup of plugin Contact's front form
 * (.contact-form …). Selectors carry one class more than the plugin's
 * contact-public.css (.contact-form .x) so they win whatever the load order.
 * Fields: 54px tall, radius 8px, #DDD border (Togo's contact input look).
 * ------------------------------------------------------------------ */
.cleon-contact-wrapper .contact-form .contact-form-row {
	--bs-gutter-x: 20px;
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.cleon-contact-wrapper .contact-form .contact-column-6,
.cleon-contact-wrapper .contact-form .contact-column-12 {
	float: none;
	padding-right: calc(0.5 * var(--bs-gutter-x));
	padding-left: calc(0.5 * var(--bs-gutter-x));
}

.cleon-contact-wrapper .contact-form .contact-form-group {
	margin-bottom: 20px;
}

.cleon-contact-wrapper .contact-form .form-label {
	margin-bottom: 8px;
	font-size: 15px;
	color: var(--cleon-common-black);
}

.cleon-contact-wrapper .contact-form .form-label.required::after {
	content: " *";
	color: var(--cleon-theme-primary);
}

.cleon-contact-wrapper .contact-form .contact-form-input:not([type="checkbox"]) {
	height: 44px;
	padding: 0 15px;
	font-size: 14px;
	line-height: normal;
	color: var(--cleon-common-black);
	background: var(--cleon-common-white);
	border: 1px solid #DDD;
	border-radius: 8px;
	box-shadow: none;
}

/* :not() matches the input rule's specificity, otherwise its 44px height wins */
.cleon-contact-wrapper .contact-form textarea.contact-form-input:not([type="checkbox"]) {
	height: 220px;
	line-height: 1.6;
	padding-top: 16px;
	padding-bottom: 16px;
	resize: vertical;
}

.cleon-contact-wrapper .contact-form .contact-form-input:focus {
	border-color: var(--cleon-theme-primary);
	box-shadow: none;
}

.cleon-contact-wrapper .contact-form .contact-form-input::placeholder {
	color: var(--cleon-text-body);
}

/* Terms checkbox */
.cleon-contact-wrapper .contact-form .form-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding-left: 0;
	font-size: 15px;
	cursor: pointer;
}

.cleon-contact-wrapper .contact-form .form-check .form-check-input {
	float: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	border-color: #BBB;
}

.cleon-contact-wrapper .contact-form .form-check .form-check-input:checked {
	background-color: var(--cleon-theme-primary);
	border-color: var(--cleon-theme-primary);
}

.cleon-contact-wrapper .contact-form .form-check .form-check-input:focus-visible {
	box-shadow: 0 0 0 3px rgba(192, 117, 50, 0.25);
}

.cleon-contact-wrapper .contact-form .form-check-label a {
	color: var(--cleon-common-black);
}

.cleon-contact-wrapper .contact-form .form-check-label a:hover {
	color: var(--cleon-theme-primary);
}

/* Submit = .cleon-btn-primary */
.cleon-contact-wrapper .contact-form .contact-button {
	padding: 12px 34px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cleon-common-white);
	background-color: var(--cleon-theme-primary);
	border: 0;
	border-radius: 50px;
	transition: background-color 0.3s ease-out;
}

.cleon-contact-wrapper .contact-form .contact-button:hover,
.cleon-contact-wrapper .contact-form .contact-button:focus-visible {
	color: var(--cleon-common-white);
	background-color: var(--cleon-common-orange);
}

/* Success / error messages (shown by contact-public.js) */
.cleon-contact-wrapper .contact-form .contact-message {
	margin: 0;
	padding: 14px 18px;
	font-size: 15px;
	border-left-width: 4px;
	border-radius: 8px;
}

/* ------------------------------------------------------------------
 * Footer — column titles as typed ("Liên Hệ", "Di Tích"…), not Togo's uppercase
 * ------------------------------------------------------------------ */
.cleon-footer-widget-title {
	text-transform: none;
}

/* Title toggle added by theme.js (footerAccordion). From 576px up it is disabled and
   reads as the plain title; the chevron only shows in accordion mode. */
.cleon-footer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	text-transform: inherit;
	background: none;
	border: 0;
}

.cleon-footer-toggle:disabled {
	cursor: default;
	opacity: 1;
}

.cleon-footer-toggle-icon {
	display: none;
	flex: none;
	transition: transform 0.3s ease;
}

/* Accordion mode (< 576px, class set by theme.js): one row per title, hairlines
   between rows, every block closed until its title is tapped. */
.cleon-footer-accordion .cleon-footer-widget {
	margin-bottom: 0;
}

.cleon-footer-accordion .cleon-footer-widget-title {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Lines only between rows: none above the first title or below the last block */
.cleon-footer-accordion .row > :first-child .cleon-footer-widget-title:first-child {
	border-top: 0;
}

.cleon-footer-accordion .cleon-footer-toggle {
	min-height: 52px;
	padding: 12px 0;
}

.cleon-footer-accordion .cleon-footer-toggle-icon {
	display: block;
}

.cleon-footer-accordion .is-open .cleon-footer-toggle-icon {
	transform: rotate(180deg);
}

/* Open block: a slightly darker drawer under its title (footer #2e2c2c → #232121,
   same hue), with its own spacing instead of the desktop margins (mb-15…). No outer
   margin, so the height slide ends without a jump. */
:root {
	--cleon-footer-panel-bg: #232121;
}

.cleon-footer-accordion .cleon-footer-widget-title + * {
	margin: 0;
	padding: 16px 16px 18px;
	background-color: var(--cleon-footer-panel-bg);
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.cleon-footer-toggle-icon {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Editor content (.ck-content): page, post, listing content blocks
 * Same look as page-static.html: h2 = .cleon-privacy-title, h3 = .cleon-privacy-sub
 * Font size / family classes (.text-big, .font-serif…) come from the editor-format plugin.
 * ------------------------------------------------------------------ */
.ck-content h2 {
	font-size: 24px;
	margin: 30px 0 20px;
}

.ck-content h3 {
	font-size: 18px;
	margin: 0 0 20px;
	color: var(--cleon-common-black);
}

.ck-content h4 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 15px;
}

.ck-content > :first-child {
	margin-top: 0;
}

.ck-content p,
.ck-content ul,
.ck-content ol,
.ck-content blockquote,
.ck-content figure,
.ck-content table {
	margin-bottom: 20px;
}

.ck-content ul,
.ck-content ol {
	padding-left: 20px;
}

.ck-content ul {
	list-style: disc;
}

.ck-content ol {
	list-style: decimal;
}

.ck-content li > ul,
.ck-content li > ol {
	margin-bottom: 0;
}

/* main.css hides `.cleon-heritage-details-text p br` below 1400px; keep Shift+Enter breaks. */
.cleon-heritage-details-text .ck-content p br,
.cleon-heritage-details-text.ck-content p br {
	display: inline;
}

.ck-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.ck-content figure {
	max-width: 100%;
}

/* Images that open the lightbox (theme.js › lightbox) */
.cleon-lightbox-img,
a.popup-image img {
	cursor: zoom-in;
}

.cleon-lightbox-img:focus-visible {
	outline: 2px solid var(--cleon-theme-primary);
	outline-offset: 2px;
}

.ck-content figcaption {
	margin-top: 8px;
	font-size: 14px;
	text-align: center;
	color: var(--cleon-text-body);
}

.ck-content blockquote {
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--cleon-theme-primary);
	font-style: italic;
}

.ck-content blockquote > :last-child {
	margin-bottom: 0;
}

.ck-content hr {
	margin: 30px 0;
	border-color: var(--cleon-gray-1);
}

/* Wide tables scroll inside CKEditor's figure.table instead of widening the page. */
.ck-content figure.table {
	overflow-x: auto;
}

.ck-content table {
	width: 100%;
	border-collapse: collapse;
}

.ck-content th,
.ck-content td {
	padding: 8px 12px;
	border: 1px solid var(--cleon-gray-1);
	vertical-align: top;
}

.ck-content th {
	background-color: var(--cleon-gray-2);
	font-weight: 500;
}

.cleon-page-content a {
	color: var(--cleon-theme-secondary);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Pagination (partials/pagination.blade.php): "…" gap and prev arrow, next to main.css › .cleon-pagination
 * ------------------------------------------------------------------ */
.cleon-pagination nav ul li .gap {
	height: 36px;
	width: 36px;
	display: inline-grid;
	place-content: center;
	color: var(--cleon-common-black);
}

.cleon-pagination nav ul li a.prev {
	border: 1px solid rgba(238, 238, 238, 0.9);
}

/* ------------------------------------------------------------------
 * Listing archive / detail (views/directory/*)
 * ------------------------------------------------------------------ */
.cleon-listing-empty {
	padding: 40px 0;
	text-align: center;
}

.cleon-listing-checkin-message:empty {
	display: none;
}

.cleon-listing-checkin-message {
	margin: 10px 0 0;
	font-weight: 500;
	color: var(--cleon-theme-primary);
}

.cleon-listing-checkin-message.is-error {
	color: #d33;
}