/* Google Maps–inspired shell — light chrome, dark map underneath.
   Contrast rule: any white/light surface uses dark text (#202124 / #3c4043). */

.gm-maps-shell {
	--gm-left-panel-w: clamp(280px, 28vw, 460px);
	--gm-font-base: clamp(12px, 0.22vw + 11px, 15px);
	--gm-font-sm: clamp(11px, 0.16vw + 10px, 13px);
	--gm-font-title: clamp(13px, 0.28vw + 12px, 16px);
	--gm-search-height: clamp(40px, 2.2vh + 34px, 48px);
	--gm-control-hit: clamp(24px, 2vh + 30px, 20px);
	--gm-panel-pad-x: clamp(10px, 0.8vw, 14px);
	--gm-panel-pad-y: clamp(7px, 0.6vw, 12px);
	--gm-list-item-pad: clamp(8px, 0.7vw, 10px);
	--gm-map-ctrl-top: 12px;
	--gm-map-ctrl-right: 12px;
	--gm-map-ctrl-btn-size: 32px;
	--gm-map-ctrl-gap: 6px;
	--gm-map-tool-cols: 6;
	--gm-map-tool-w: calc(var(--gm-map-ctrl-btn-size) * var(--gm-map-tool-cols) + var(--gm-map-ctrl-gap) * (var(--gm-map-tool-cols) - 1));
	--gm-map-tool-h: calc(var(--gm-map-ctrl-btn-size) * 2 + var(--gm-map-ctrl-gap));
	--gm-map-obs-count: 3;
	--gm-map-right-stack-h: var(--gm-map-tool-h);
	--gm-map-zoom-top: calc(var(--gm-map-ctrl-top) + var(--gm-map-ctrl-btn-size) + var(--gm-map-ctrl-gap));
	--gm-map-zoom-group-h: calc(var(--gm-map-ctrl-btn-size) * 2);
	--gm-map-toggle-right: calc(var(--gm-map-ctrl-right) + var(--gm-map-ctrl-btn-size) + var(--gm-map-ctrl-gap));
	--gm-map-footer-bottom: 12px;
	--gm-map-footer-stack: 18px;
	--gm-rail-w: 72px;
}

.gm-maps-body {
	overflow: hidden;
	height: 100vh;
	/* Quantum mặc định Chakra Petch — ép Inter giống irrigation-bacninh */
	--bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.gm-maps-shell,
.gm-maps-shell .app-sidebar,
.gm-maps-shell .gm-left-rail,
.gm-maps-shell .mailbox-sidebar,
.gm-maps-shell .gm-list-overlay,
.gm-maps-shell #stationsList,
.gm-maps-shell #stationsListMobile,
.gm-maps-shell #tab-detail,
.gm-maps-shell .mailbox-detail-header,
.gm-maps-shell .mailbox-list-item,
.gm-maps-shell .gm-group-flyout,
.gm-maps-shell .gm-context-bar {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}

.gm-maps-body #app {
	min-height: 100vh;
}

.gm-maps-shell .app-header {
	display: none !important;
}

.gm-maps-shell .gm-right-rail {
	display: none !important;
}

.gm-maps-shell.app-sidebar-collapsed .app-sidebar {
	transform: translateX(-110%);
	opacity: 0;
	pointer-events: none;
	transition: transform .25s ease, opacity .2s ease;
}

.gm-maps-shell:not(.app-sidebar-collapsed) .app-sidebar,
.gm-maps-shell.gm-drawer-open .app-sidebar {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
	z-index: 1200;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.gm-maps-shell .app-content.gm-content {
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	height: 100vh !important;
	min-height: 100vh !important;
	max-height: 100vh !important;
	width: 100%;
}

/* Full-viewport map — bỏ khoảng trống header (dải đen phía trên) */
.gm-maps-shell.app {
	padding-top: 0 !important;
}

.gm-maps-shell.app-content-full-height .app-content {
	height: 100vh !important;
	min-height: 100vh !important;
}

.gm-maps-shell .mailbox-content > div[data-scrollbar="true"],
.gm-maps-shell #mailboxDetail {
	height: 100% !important;
	min-height: 100% !important;
	overflow: hidden !important;
	position: relative !important;
}

.gm-maps-shell #tab-map {
	position: relative !important;
	height: 100% !important;
	min-height: 100% !important;
	overflow: hidden !important;
}

.gm-maps-shell .mailbox {
	height: 100%;
	background: transparent;
}

/* Floating chrome */
.gm-float-ui {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 50;
}

/* ===== Google-style vertical left rail ===== */
.gm-left-rail {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--gm-rail-w);
	z-index: 70;
	pointer-events: auto;
	background: #e8f0fe;
	border-right: 1px solid #d2e3fc;
	display: flex;
	flex-direction: column;
	box-shadow: 1px 0 0 rgba(26, 115, 232, 0.06);
	transition: transform .22s ease, opacity .18s ease;
	will-change: transform;
}

.gm-maps-shell.gm-rail-collapsed {
	--gm-rail-w: 0px;
}

.gm-maps-shell.gm-rail-collapsed .gm-left-rail {
	/* Giữ bề rộng thật để animation trượt; layout dùng --gm-rail-w: 0 */
	width: 72px;
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
	border-right-width: 0;
}

.gm-maps-shell.gm-rail-collapsed .gm-rail-flyout-host {
	visibility: hidden;
	pointer-events: none;
}

.gm-rail-scroll {
	flex: 1;
	overflow-x: visible;
	overflow-y: auto;
	padding: 10px 0 16px;
	scrollbar-width: thin;
	scrollbar-color: #aecbfa transparent;
}

/* Cho phép flyout tràn ra ngoài rail (tránh bị cắt bởi overflow) */
.gm-left-rail,
.gm-rail-section {
	overflow: visible;
}

.gm-rail-scroll::-webkit-scrollbar {
	width: 4px;
}

.gm-rail-scroll::-webkit-scrollbar-thumb {
	background: #aecbfa;
	border-radius: 4px;
}

.gm-rail-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 6px;
}

.gm-rail-section + .gm-rail-section {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid #c5d7f5;
}

.gm-rail-section.is-hidden {
	display: none !important;
}

.gm-rail-section-label {
	width: 100%;
	padding: 0 4px 6px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f6368;
	text-align: center;
	line-height: 1.2;
}

.gm-search-action.is-active {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-search-action.is-active iconify-icon {
	color: #1967d2;
}

.gm-account-wrap {
	position: relative;
	flex-shrink: 0;
	z-index: 3;
}

.gm-account-menu {
	position: fixed;
	z-index: 10120;
	min-width: 228px;
	max-width: min(320px, calc(100vw - 16px));
	padding: 8px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(32, 33, 36, 0.18), 0 1px 4px rgba(32, 33, 36, 0.12);
	color: #202124;
}

.gm-account-menu[hidden] {
	display: none !important;
}

.gm-account-menu-user {
	padding: 8px 10px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid #e8eaed;
}

.gm-account-menu-kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #80868b;
}

.gm-account-menu-name {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	color: #202124;
	word-break: break-word;
}

.gm-account-logout {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #c5221f;
	cursor: pointer;
}

.gm-account-logout:hover,
.gm-account-logout:focus-visible {
	background: #fce8e6;
	outline: none;
}

.gm-account-logout iconify-icon {
	font-size: 18px;
}

.gm-rail-item--logout .gm-rail-icon-wrap {
	color: #c5221f;
}

.gm-rail-item--logout:hover,
.gm-rail-item--logout:focus-visible {
	background: #fce8e6;
	color: #c5221f;
}

.gm-rail-item--logout:hover .gm-rail-icon-wrap,
.gm-rail-item--logout:focus-visible .gm-rail-icon-wrap {
	color: #c5221f;
}

.gm-rail-item {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 12px;
	color: #3c4043;
	transition: background 0.15s ease, color 0.15s ease;
}

.gm-rail-item:hover,
.gm-rail-item.is-open,
.gm-rail-item.is-active {
	background: rgba(255, 255, 255, 0.72);
	color: #1967d2;
}

.gm-rail-item.is-active .gm-rail-icon-wrap {
	box-shadow: 0 0 0 2px #1a73e8;
}

.gm-rail-item--toggle .gm-rail-icon-wrap {
	position: relative;
}

.gm-rail-toggle-caret {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dadce0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5f6368;
}

.gm-rail-toggle-caret iconify-icon {
	font-size: 10px !important;
	color: inherit !important;
}

.gm-rail-item--toggle.is-active .gm-rail-toggle-caret {
	background: #e8f0fe;
	box-shadow: 0 0 0 1px #1a73e8;
	color: #1a73e8;
}

.gm-rail-item--toggle.is-active .gm-rail-label {
	color: #1967d2;
	font-weight: 700;
}

.gm-rail-icon-wrap {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gm-rail-icon-wrap iconify-icon {
	font-size: 22px;
	color: inherit;
}

.gm-rail-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ea4335;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #e8f0fe;
}

.gm-rail-label {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	max-width: 64px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.gm-rail-flyout-host {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10060;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	/* Chừa vùng search — tránh lớp fixed chặn tap trên mobile */
	.gm-rail-flyout-host {
		top: 64px;
	}
}

.gm-float-ui .gm-rail-flyout-host {
	pointer-events: none;
}

.gm-rail-flyout-host > .gm-rail-flyout.is-visible {
	pointer-events: auto;
}

/* Flyout menu (Google Maps style) — gắn vào host fixed, không bị rail cắt */
.gm-rail-flyout {
	position: absolute;
	left: 0;
	top: 0;
	min-width: 220px;
	max-width: min(300px, calc(100vw - var(--gm-rail-w) - 24px));
	max-height: min(70vh, 420px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08);
	padding: 8px;
	z-index: 10061;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.gm-rail-flyout.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

/* Bản gốc trong rail chỉ là placeholder ẩn */
.gm-rail-item > .gm-rail-flyout {
	display: none !important;
}

.gm-rail-flyout-title {
	padding: 8px 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5f6368;
}

/* Layer group: bật/tắt cả nhóm */
.gm-rail-flyout--layer-group {
	padding-top: 6px;
}

.gm-rail-layer-group-bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 10px 10px;
	border-bottom: 1px solid #e8eaed;
	margin-bottom: 4px;
}

.gm-rail-layer-group-status {
	font-size: 11px;
	font-weight: 600;
	color: #5f6368;
}

.gm-rail-layer-group-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gm-rail-layer-group-btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 8px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #fff;
	color: #3c4043;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-rail-layer-group-btn:hover {
	background: #f1f3f4;
	border-color: #bdc1c6;
}

.gm-rail-layer-group-btn[aria-pressed="true"] {
	background: #e8f0fe;
	border-color: #1a73e8;
	color: #1967d2;
}

.gm-rail-group-visibility {
	position: absolute;
	left: -2px;
	bottom: -2px;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dadce0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	color: #5f6368;
	z-index: 2;
}

.gm-rail-group-visibility iconify-icon {
	font-size: 11px !important;
	color: inherit !important;
}

.gm-rail-group-visibility:hover {
	background: #e8f0fe;
	color: #1967d2;
	box-shadow: 0 0 0 1px #1a73e8;
}

.gm-rail-item--maplayer.is-layer-group-off .gm-rail-icon-wrap {
	opacity: 0.55;
	filter: grayscale(0.35);
}

.gm-rail-item--maplayer.is-layer-group-mixed .gm-rail-icon-wrap {
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35);
}

.gm-rail-item--maplayer.is-layer-group-off .gm-rail-label {
	opacity: 0.65;
}

.gm-rail-item--layers-master.is-all-layers-off .gm-rail-icon-wrap {
	opacity: 0.55;
	filter: grayscale(0.35);
}

.gm-rail-item--layers-master.is-all-layers-mixed .gm-rail-icon-wrap {
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35);
}

.gm-rail-item--layers-master.is-all-layers-off .gm-rail-label {
	opacity: 0.65;
}

.gm-rail-flyout--grid,
.gm-rail-flyout--basemap {
	min-width: 280px;
	max-width: min(340px, calc(100vw - var(--gm-rail-w) - 24px));
	padding: 10px;
}

.gm-rail-grid,
.gm-rail-basemap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 4px 2px 6px;
}

.gm-rail-grid-tile,
.gm-rail-basemap-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px 6px 8px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #f8f9fa;
	color: #3c4043;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	min-height: 84px;
}

.gm-rail-grid-tile:hover,
.gm-rail-basemap-tile:hover {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-rail-grid-tile.is-active,
.gm-rail-basemap-tile.is-active {
	background: #e8f0fe;
	border-color: #1a73e8;
	box-shadow: 0 0 0 1px #1a73e8;
	color: #1967d2;
}

.gm-rail-grid-tile-icon,
.gm-rail-basemap-tile-icon {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: visible;
}

.gm-rail-grid-tile.is-active .gm-rail-grid-tile-icon,
.gm-rail-basemap-tile.is-active .gm-rail-basemap-tile-icon {
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25);
}

.gm-rail-grid-tile-icon iconify-icon,
.gm-rail-basemap-tile-icon iconify-icon {
	font-size: 22px;
}

.gm-rail-grid-tile-label,
.gm-rail-basemap-tile-label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	max-width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gm-rail-grid-tile-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ea4335;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* Các trận lũ lịch sử: danh sách năm + mưa 24h (TP / Bản Yên) */
.gm-rail-flyout--flood-years {
	min-width: 340px;
	max-width: min(420px, calc(100vw - var(--gm-rail-w) - 24px));
	max-height: min(72vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gm-rail-flood-year-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 2px 0 4px;
}

.gm-rail-flood-year-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #f8f9fa;
	color: #3c4043;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-rail-flood-year-row:hover {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-rail-flood-year-row.is-active {
	background: #e8f0fe;
	border-color: #1a73e8;
	box-shadow: 0 0 0 1px #1a73e8;
	color: #1967d2;
}

.gm-rail-flood-year-row-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px #e8eaed;
}

.gm-rail-flood-year-row.is-active .gm-rail-flood-year-row-icon {
	box-shadow: inset 0 0 0 1px #aecbfa;
}

.gm-rail-flood-year-row .gm-rail-flood-svg {
	display: block;
	width: 20px;
	height: 20px;
	color: #1a73e8;
}

.gm-rail-flood-year-row.is-active .gm-rail-flood-svg {
	color: #174ea6;
}

.gm-rail-flood-year-row-body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gm-rail-flood-year-row-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.gm-rail-flood-year-rain {
	font-size: 11px;
	line-height: 1.4;
	color: #5f6368;
	font-weight: 400;
}

.gm-rail-flood-year-row:hover .gm-rail-flood-year-rain,
.gm-rail-flood-year-row.is-active .gm-rail-flood-year-rain {
	color: #3c4043;
}

.gm-rail-flood-year-rain strong {
	font-weight: 700;
	color: #174ea6;
	font-variant-numeric: tabular-nums;
}

.gm-rail-flood-year-rain.is-muted {
	font-style: italic;
	color: #80868b;
}

/* (legacy grid flood-years — giữ nếu còn tham chiếu) */
.gm-rail-flyout--flood-years .gm-rail-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.gm-rail-flyout--flood-years .gm-rail-grid-tile {
	min-height: 72px;
	padding: 8px 4px 6px;
	gap: 4px;
}

.gm-rail-flyout--flood-years .gm-rail-grid-tile-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.gm-rail-flyout--flood-years .gm-rail-grid-tile-icon iconify-icon {
	font-size: 18px;
}

.gm-rail-flyout--flood-years .gm-rail-flood-svg {
	display: block;
	width: 22px;
	height: 22px;
	color: #1a73e8;
}

.gm-rail-flyout--flood-years .gm-rail-grid-tile.is-active .gm-rail-flood-svg {
	color: #174ea6;
}

.gm-rail-flyout--flood-years .gm-rail-grid-tile-label {
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-webkit-line-clamp: 1;
}

.gm-rail-flyout-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #202124;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease;
}

.gm-rail-flyout-item:hover {
	background: #f1f3f4;
}

.gm-rail-flyout-item.is-active {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-rail-flyout-thumb {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #e8f0fe;
	color: #1967d2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gm-rail-flyout-thumb iconify-icon {
	font-size: 18px;
}

.gm-rail-flyout-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gm-rail-flyout-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

.gm-rail-flyout-sub {
	font-size: 11px;
	color: #5f6368;
	line-height: 1.2;
}

.gm-rail-flyout-count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f1f3f4;
	color: #3c4043;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gm-rail-flyout-item.is-active .gm-rail-flyout-count {
	background: #1a73e8;
	color: #fff;
}

.gm-rail-flyout-switch {
	flex-shrink: 0;
	pointer-events: none;
}

.gm-rail-flyout-switch .form-check-input {
	width: 2.2em;
	height: 1.15em;
	cursor: pointer;
	pointer-events: auto;
	margin: 0;
}

@media (max-width: 991.98px) {
	.gm-maps-shell {
		--gm-rail-w: 56px;
	}

	.gm-rail-collapse {
		display: none !important;
	}

	.gm-rail-icon-wrap {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.gm-rail-icon-wrap iconify-icon {
		font-size: 18px;
	}

	.gm-rail-label {
		font-size: 9px;
		max-width: 52px;
	}

	.gm-rail-flyout {
		max-width: min(280px, calc(100vw - var(--gm-rail-w) - 16px));
	}

	/* Mobile vẫn dùng nút < trên search để thu gọn rail */
	.gm-maps-shell.gm-rail-collapsed .gm-left-rail {
		width: 56px;
	}
}

.gm-search-stack {
	position: absolute;
	top: 12px;
	left: calc(var(--gm-rail-w) + 12px);
	width: calc(100vw - var(--gm-rail-w) - 24px);
	max-width: calc(100vw - var(--gm-rail-w) - 24px);
	padding-right: calc(
		var(--gm-map-ctrl-btn-size, 32px) * 5
		+ var(--gm-map-ctrl-gap, 6px) * 4
		+ var(--gm-map-ctrl-right, 12px)
		+ 16px
	);
	box-sizing: border-box;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 10080; /* trên flyout-host (10060) — một số mobile vẫn chặn click dù pointer-events:none */
}

.gm-search-stack .gm-top-row {
	pointer-events: none; /* để click xuyên xuống nút quan trắc góc phải */
}
.gm-search-stack .gm-left-panel,
.gm-search-stack .gm-search-card,
.gm-search-stack .gm-nav-strip,
.gm-search-stack .gm-search-results {
	pointer-events: auto;
}

.gm-search-card {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border-radius: 28px;
	padding: 4px 6px 4px 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .12);
	min-height: var(--gm-search-height);
	width: 100%;
}

.gm-search-card .gm-search-action {
	flex-shrink: 0;
}

.gm-menu-btn,
.gm-search-action,
.gm-context-close {
	width: var(--gm-control-hit);
	height: var(--gm-control-hit);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #3c4043;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.gm-menu-btn:hover,
.gm-search-action:hover,
.gm-fab:hover,
.gm-context-close:hover {
	background: #f1f3f4;
	color: #202124;
}

.gm-search-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.gm-search-icon {
	color: #5f6368;
	font-size: clamp(16px, 0.35vw + 14px, 18px);
	flex-shrink: 0;
}

.gm-search-input {
	border: 0;
	outline: none;
	width: 100%;
	font-size: var(--gm-font-base);
	color: #202124;
	background: transparent;
	padding: 6px 0;
}

.gm-search-input::placeholder {
	color: #80868b;
}

/* Group segments — 1 dòng, không wrap */
.gm-group-row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 2px 0 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(95, 99, 104, .55) rgba(255, 255, 255, .6);
}

.gm-group-row::-webkit-scrollbar {
	height: 8px;
	background: rgba(255, 255, 255, .65);
	border-radius: 999px;
}

.gm-group-row::-webkit-scrollbar-thumb {
	background: rgba(95, 99, 104, .55);
	border-radius: 999px;
}

.gm-group-btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #3c4043;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	box-shadow:
		0 1px 2px rgba(60, 64, 67, 0.3),
		0 2px 6px 2px rgba(60, 64, 67, 0.15);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
	max-height: 34px;
}

.gm-group-btn iconify-icon {
	font-size: 15px;
	color: #5f6368;
}

.gm-group-btn:hover {
	background: #f8f9fa;
	color: #202124;
}

.gm-group-btn.active {
	background: #1a73e8;
	color: #fff;
	box-shadow:
		0 1px 2px rgba(26, 115, 232, 0.4),
		0 2px 6px 2px rgba(26, 115, 232, 0.25);
}

.gm-group-btn.active iconify-icon {
	color: #fff;
}

/* Layer chips — 1 dòng */
.gm-chip-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(95, 99, 104, .55) rgba(255, 255, 255, .6);
}

.gm-chip-row::-webkit-scrollbar {
	height: 8px;
	background: rgba(255, 255, 255, .65);
	border-radius: 999px;
}

.gm-chip-row::-webkit-scrollbar-thumb {
	background: rgba(95, 99, 104, .55);
	border-radius: 999px;
}

.gm-chip {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #202124;
	padding: 7px 10px 7px 12px;
	font-size: 12px;
	font-weight: 500;
	box-shadow:
		0 1px 2px rgba(60, 64, 67, 0.3),
		0 2px 6px 2px rgba(60, 64, 67, 0.15);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
	max-height: 34px;
	line-height: 1.2;
}

.gm-chip iconify-icon {
	font-size: 15px;
	color: #5f6368;
}

.gm-chip-label {
	color: #202124;
}

.gm-chip-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ea4335;
	color: #fff !important;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.gm-chip:hover {
	background: #e8f0fe;
}

.gm-chip:hover .gm-chip-label,
.gm-chip:hover iconify-icon {
	color: #1967d2;
}

.gm-chip.active {
	background: #e8f0fe;
	box-shadow:
		0 0 0 1.5px #1a73e8,
		0 1px 2px rgba(60, 64, 67, 0.25),
		0 2px 6px 2px rgba(60, 64, 67, 0.12);
}

.gm-chip.active .gm-chip-label,
.gm-chip.active iconify-icon {
	color: #1967d2;
}

/* Chip năm trận lũ trên hàng Nhóm */
.gm-chip.gm-chip--flood-year {
	padding: 6px 10px;
	gap: 4px;
	border-radius: 10px;
}

.gm-chip.gm-chip--flood-year .gm-chip-label {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 2.5em;
	text-align: center;
}

/* Compact context hint under chips (not function tabs) */
.gm-context-bar {
	display: none;
	position: absolute;
	top: auto;
	left: 12px;
	width: min(440px, calc(100vw - 24px));
	pointer-events: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	padding: 8px 10px 10px;
	z-index: 55;
	/* placed via JS/CSS below search stack roughly */
	margin-top: 0;
}

.gm-maps-shell.gm-layer-active .gm-context-bar {
	display: none; /* title shown in panel header instead — avoid extra height */
}

.gm-context-bar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.gm-context-title {
	font-size: 13px;
	font-weight: 600;
	color: #202124;
}

.gm-context-hint {
	font-size: 11px;
	color: #5f6368;
	margin-top: 2px;
}

.gm-right-rail {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: auto;
	align-items: flex-end;
	z-index: 60;
}

.gm-fab {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #3c4043;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.gm-fab-coords {
	width: auto;
	height: auto;
	border-radius: 18px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 500;
	max-width: 210px;
	color: #202124;
}

.gm-fab-coords #gmCoordsChip {
	color: #202124;
}

/* bottom sheet removed */

/* ===== Function toolbar + list panel — INSIDE left card, not stacked on map ===== */

.gm-maps-shell .mailbox-toolbar {
	position: absolute;
	left: 12px;
	top: 118px; /* under search+group+chips (~48+34+34+gaps) */
	z-index: 40;
	width: min(440px, calc(100vw - 24px));
	display: none;
	background: #fff;
	color: #202124;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	border: 0;
	padding: 6px 8px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	max-height: 44px;
	scrollbar-width: thin;
}

.gm-maps-shell.gm-list-open .mailbox-toolbar,
.gm-maps-shell.gm-layer-active .mailbox-toolbar {
	display: flex !important;
}

.gm-maps-shell .mailbox-toolbar-item {
	flex: 0 0 auto;
	margin: 0;
	float: none !important;
}

.gm-maps-shell .mailbox-toolbar-text {
	color: #5f6368 !important;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	padding: 0 6px;
}

.gm-maps-shell .mailbox-toolbar-link,
.gm-maps-shell .mailbox-toolbar-link.gm-fn-tab {
	display: inline-flex !important;
	align-items: center;
	color: #3c4043 !important;
	font-size: 12px !important;
	font-weight: 500;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
	max-height: 32px;
	padding: 6px 10px !important;
	border-radius: 999px !important;
	background: transparent !important;
}

.gm-maps-shell .mailbox-toolbar-link.active {
	background: #e8f0fe !important;
	color: #1a73e8 !important;
}

.gm-maps-shell .mailbox-body {
	height: 100%;
}

.gm-maps-shell .mailbox-sidebar {
	position: absolute !important;
	left: calc(var(--gm-rail-w) + 12px);
	top: var(--gm-list-top, 72px);
	bottom: var(--gm-panel-bottom, 12px);
	height: var(--gm-panel-h, auto);
	max-height: var(--gm-panel-h, none);
	width: var(--gm-left-panel-w, 400px);
	z-index: 45;
	display: none !important;
	background: #fff !important;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	color: #202124 !important;
	transform-origin: top center;
	transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), max-height .28s cubic-bezier(.4, 0, .2, 1);
	pointer-events: auto;
	box-sizing: border-box;
}

.gm-maps-shell .gm-list-jump-btn {
	position: sticky;
	margin-left: auto;
	margin-right: 12px;
	margin-top: auto;
	bottom: 12px;
	align-self: flex-end;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1a73e8;
	box-shadow: 0 2px 8px rgba(60, 64, 67, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.gm-maps-shell .gm-list-jump-btn:hover {
	background: #e8f0fe;
	box-shadow: 0 4px 12px rgba(60, 64, 67, 0.34);
}

.gm-maps-shell .gm-list-jump-btn:active {
	transform: translateY(1px);
}

.gm-maps-shell .gm-list-jump-btn:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.gm-maps-shell .gm-list-jump-btn iconify-icon {
	font-size: 18px;
	pointer-events: none;
}

.gm-maps-shell.gm-list-open .mailbox-sidebar.visible,
.gm-maps-shell.gm-list-open .mailbox-sidebar,
.gm-maps-shell.gm-layer-active:not(.gm-panel-collapsed) .mailbox-sidebar,
.gm-maps-shell.gm-layer-active:not(.gm-panel-collapsed) #map-container .gm-list-overlay {
	display: flex !important;
	flex-direction: column;
	opacity: 1;
	transform: translateY(0) scaleY(1);
	pointer-events: auto;
}

.gm-maps-shell.gm-panel-collapsed .mailbox-sidebar,
.gm-maps-shell.gm-panel-collapsed #map-container .gm-list-overlay,
.gm-maps-shell.gm-panel-collapsed #tab-detail,
.gm-maps-shell.gm-panel-collapsed #tab-list,
.gm-maps-shell.gm-panel-collapsed #tab-science {
	opacity: 0 !important;
	transform: translateY(-12px) scaleY(0.96);
	pointer-events: none !important;
	visibility: hidden !important;
	max-height: 0 !important;
	bottom: auto !important;
	overflow: hidden !important;
	box-shadow: none !important;
	border: 0 !important;
	display: none !important;
}

/* Light panel contrast for list/search */
.gm-maps-shell .mailbox-sidebar .gm-light-field,
.gm-maps-shell .mailbox-sidebar .form-control.gm-light-field,
.gm-maps-shell .mailbox-sidebar .input-group-text.gm-light-field {
	background: #f1f3f4 !important;
	border-color: transparent !important;
	color: #202124 !important;
}

.gm-maps-shell .mailbox-sidebar .form-control::placeholder {
	color: #80868b !important;
}

.gm-maps-shell .dss-vlist {
	position: relative;
	width: 100%;
}
.gm-maps-shell .dss-vlist-spacer {
	width: 100%;
	pointer-events: none;
}
.gm-maps-shell .dss-vlist-window {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	will-change: transform;
}

.gm-maps-shell .mailbox-list-item {
	border-bottom: 1px solid #e8eaed;
	color: #202124 !important;
	background: #fff;
	padding: var(--gm-list-item-pad) !important;
	font-size: var(--gm-font-base);
}

.gm-maps-shell .mailbox-list-item .mailbox-sender-name {
	font-size: var(--gm-font-title) !important;
}

/* Chỉ in đậm tên trạm cho các list IoT (mưa/nhiệt độ/sông/hồ chứa) */
.gm-maps-shell #stationsList .mailbox-list-item .mailbox-sender-name,
.gm-maps-shell #stationsListMobile .mailbox-list-item .mailbox-sender-name {
	font-weight: 700 !important;
}

.gm-maps-shell .mailbox-list-item .mailbox-title {
	color: #5f6368 !important;
	font-size: var(--gm-font-sm);
}

.gm-maps-shell .mailbox-list-item .mailbox-desc,
.gm-maps-shell .mailbox-list-item .mailbox-message,
.gm-maps-shell .mailbox-list-item .mailbox-sender-name,
.gm-maps-shell .mailbox-list-item .mailbox-title {
	color: #202124 !important;
}

.gm-maps-shell .mailbox-list-item .mailbox-desc,
.gm-maps-shell .mailbox-list-item .text-white-50,
.gm-maps-shell .mailbox-list-item .text-white,
.gm-maps-shell .mailbox-list-item .text-opacity-50,
.gm-maps-shell .mailbox-list-item .text-opacity-75 {
	color: #5f6368 !important;
	font-size: var(--gm-font-sm) !important;
}

.gm-maps-shell .mailbox-list-item .mailbox-time {
	color: #80868b !important;
}

.gm-maps-shell .mailbox-list-item.active .mailbox-sender-name {
	color: #1967d2 !important;
}

.gm-maps-shell .mailbox-list-item.active .mailbox-title,
.gm-maps-shell .mailbox-list-item.active .mailbox-desc,
.gm-maps-shell .mailbox-list-item.active .mailbox-message span:not(.rain-dot):not(.pctt-capde-list-dot):not(.kttv-bd-level):not(.kttv-wl-status):not(.rain-legend-text):not(.hochua-list-capacity):not(.hochua-list-live-value):not(.hochua-list-sep):not(.trambom-op-list-alert):not(.trambom-op-list-wl-now):not(.trambom-op-list-rain) {
	color: #3c4043 !important;
}

/* Ghi đè inline màu trắng/xám nhạt (theme tối) trong danh sách overlay */
.gm-maps-shell .gm-list-overlay .mailbox-list-item span[style*="rgba(255,255,255"],
.gm-maps-shell .gm-list-overlay .mailbox-list-item span[style*="rgba(255, 255, 255"],
.gm-maps-shell .gm-list-overlay .mailbox-list-item span[style*="color:#ccc"],
.gm-maps-shell .gm-list-overlay .mailbox-list-item span[style*="color: #ccc"],
.gm-maps-shell .gm-list-overlay .mailbox-list-item .mailbox-desc span:not(.rain-dot):not(.pctt-capde-list-dot):not(.pctt-capde-legend-dot):not(.kttv-bd-level):not(.kttv-wl-status):not(.rain-legend-text) {
	color: #5f6368 !important;
}

/* Mức báo động sông — màu khớp đường BD trên biểu đồ */
.gm-maps-shell .mailbox-list-item .kttv-bd-level.kttv-bd-1,
.gm-maps-shell .mailbox-list-item.active .kttv-bd-level.kttv-bd-1 {
	color: #F1C40F !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-bd-level.kttv-bd-2,
.gm-maps-shell .mailbox-list-item.active .kttv-bd-level.kttv-bd-2 {
	color: #E67E22 !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-bd-level.kttv-bd-3,
.gm-maps-shell .mailbox-list-item.active .kttv-bd-level.kttv-bd-3 {
	color: #E74C3C !important;
	font-weight: 600;
}

/* Mực nước hiện tại theo cấp báo động */
.gm-maps-shell .mailbox-list-item .kttv-wl-status.kttv-wl-normal,
.gm-maps-shell .mailbox-list-item.active .kttv-wl-status.kttv-wl-normal {
	color: #2ECC71 !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-wl-status.kttv-wl-bd1,
.gm-maps-shell .mailbox-list-item.active .kttv-wl-status.kttv-wl-bd1 {
	color: #F1C40F !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-wl-status.kttv-wl-bd2,
.gm-maps-shell .mailbox-list-item.active .kttv-wl-status.kttv-wl-bd2 {
	color: #E67E22 !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-wl-status.kttv-wl-bd3,
.gm-maps-shell .mailbox-list-item.active .kttv-wl-status.kttv-wl-bd3 {
	color: #E74C3C !important;
	font-weight: 600;
}
.gm-maps-shell .mailbox-list-item .kttv-wl-status.kttv-wl-unknown,
.gm-maps-shell .mailbox-list-item.active .kttv-wl-status.kttv-wl-unknown {
	color: #5f6368 !important;
	font-weight: 600;
}

.gm-maps-shell .gm-list-overlay .pctt-capde-list-line {
	color: #5f6368;
}

.gm-maps-shell .gm-list-overlay .pctt-capde-list-line > span:not(.pctt-capde-list-dot)[style*="rgba(255,255,255"],
.gm-maps-shell .gm-list-overlay .pctt-capde-list-line > span:not(.pctt-capde-list-dot)[style*="rgba(255, 255, 255"] {
	color: #5f6368 !important;
}

.gm-maps-shell .gm-list-overlay .rain-dot {
	box-shadow: 0 0 0 1px rgba(60, 64, 67, .25) !important;
}

.gm-maps-shell .gm-list-overlay .trambom-color-legend {
	background: #f8f9fa !important;
	border: 1px solid #e8eaed !important;
	color: #3c4043 !important;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 11px !important;
	line-height: 1.45;
}

.gm-maps-shell .gm-list-overlay .trambom-color-legend-title {
	font-weight: 600 !important;
	color: #202124 !important;
	margin-bottom: 6px;
	font-size: 11px !important;
}

.gm-maps-shell .gm-list-overlay .trambom-color-legend-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 3px;
	color: #3c4043 !important;
}

.gm-maps-shell .gm-list-overlay .trambom-color-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 3px;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.2);
}

.gm-maps-shell .gm-list-overlay .trambom-color-legend div,
.gm-maps-shell .gm-list-overlay .trambom-color-legend span {
	color: #3c4043 !important;
}

.gm-maps-shell .gm-list-overlay .trambom-ds-report-btn,
.gm-maps-shell .gm-list-overlay .trambom-report-btn {
	background: #1a73e8 !important;
	border: 1px solid #1a73e8 !important;
	color: #fff !important;
	font-weight: 600;
}

.gm-maps-shell .gm-list-overlay .trambom-ds-report-btn:hover,
.gm-maps-shell .gm-list-overlay .trambom-report-btn:hover {
	background: #1765cc !important;
	border-color: #1765cc !important;
	color: #fff !important;
}

.gm-maps-shell .mailbox-list-item.active {
	background: #e8f0fe !important;
	border-left: 3px solid #1a73e8;
}

.gm-maps-shell .mailbox-list .loading-state,
.gm-maps-shell .mailbox-list .empty-state {
	color: #5f6368 !important;
}

.gm-maps-shell .mailbox-content,
.gm-maps-shell .mailbox-content > div[data-scrollbar="true"],
.gm-maps-shell #mailboxDetail,
.gm-maps-shell #tab-map,
.gm-maps-shell #tab-map .mailbox-detail-content,
.gm-maps-shell #map-container {
	height: 100% !important;
	min-height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.gm-maps-shell #map-container {
	position: absolute !important;
	inset: 0 !important;
	border-radius: 0 !important;
	background: #0d1117 !important;
}

/* Overview map + chú giải — góc dưới, tránh chồng panel trái */
.gm-maps-shell .overview-map-container {
	position: absolute;
	bottom: var(--gm-map-footer-bottom);
	right: var(--gm-map-ctrl-right);
	width: 168px;
	height: 132px;
	z-index: 48;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: transform 0.22s ease;
}

.gm-maps-shell .overview-map-container.is-collapsed {
	transform: translateX(calc(100% + var(--gm-map-ctrl-right)));
}

.gm-maps-shell .overview-map-collapse-btn {
	position: absolute;
	left: -18px;
	top: 50%;
	z-index: 2;
	width: 18px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid #bdc1c6;
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: #fff;
	box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.12);
	color: #5f6368;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
}

.gm-maps-shell .overview-map-collapse-btn:hover {
	background: #f1f3f4;
	color: #202124;
}

.gm-maps-shell .overview-map-collapse-btn iconify-icon {
	font-size: 12px;
	pointer-events: none;
}

.gm-maps-shell .overview-map-container.is-collapsed .overview-map-collapse-btn {
	border-right: 1px solid #bdc1c6;
	box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.16);
}

.gm-maps-shell .overview-map-container.is-collapsed #overview-map {
	pointer-events: none;
}

.gm-maps-shell .overview-map-container.is-collapsed .overview-viewport {
	display: none;
}

.gm-maps-shell .overview-map-container.hidden,
.gm-maps-shell .overview-map-container.auto-hidden {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.gm-maps-shell .overview-map-container #overview-map,
.gm-maps-shell .overview-map-container .mapboxgl-map {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #bdc1c6;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.gm-maps-shell .overview-map-container .mapboxgl-canvas-container,
.gm-maps-shell .overview-map-container .mapboxgl-canvas {
	border-radius: inherit;
}

.gm-maps-shell .overview-viewport {
	position: absolute;
	border: 2px solid #1a73e8;
	background: rgba(26, 115, 232, 0.12);
	pointer-events: none;
	z-index: 10;
	box-sizing: border-box;
}

/* Footer trái: chú giải + peek nền cạnh nhau */
.gm-maps-shell .gm-map-footer-left {
	position: absolute;
	bottom: var(--gm-map-footer-bottom);
	left: calc(var(--gm-rail-w) + var(--gm-map-ctrl-right));
	right: auto;
	top: auto;
	z-index: 49;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
	max-width: calc(100vw - var(--gm-rail-w) - 200px);
}

.gm-maps-shell .gm-map-footer-left > * {
	pointer-events: auto;
}

.gm-maps-shell .gm-map-layer-peeks {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	top: auto;
	z-index: 49;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
	flex: 0 0 auto;
	max-width: none;
}

.gm-maps-shell .gm-map-layer-peeks > * {
	pointer-events: auto;
}

.gm-maps-shell .map-legend-panel {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	max-width: min(280px, 42vw);
	max-height: min(34vh, 260px);
	z-index: 48;
	border-radius: 12px;
	border: 1px solid #e8eaed;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
	pointer-events: auto;
	flex: 0 1 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.gm-maps-shell .map-legend-panel.hidden {
	display: none !important;
}

/* Header chú giải luôn là nút (không ẩn cả panel) */
.gm-maps-shell .map-legend-panel.collapsed {
	display: flex !important;
}

.gm-maps-shell .map-legend-panel-body {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.gm-maps-shell .map-legend-panel-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.85);
}

.gm-maps-shell .map-legend-panel-body table + table {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e8eaed;
}

.gm-maps-shell .map-legend-panel-body table td {
	padding: 2px 4px;
	vertical-align: middle;
}

.gm-maps-shell .map-legend-panel.collapsed {
	max-height: none;
	height: auto;
	overflow: hidden;
}

.gm-maps-shell .map-legend-panel.collapsed .map-legend-panel-body {
	display: none;
}

.gm-maps-shell .map-legend-panel.collapsed .map-legend-panel-header {
	border-bottom: none;
}

.gm-maps-shell .map-legend-panel-header,
.gm-maps-shell .map-legend-panel-toggle {
	pointer-events: auto;
	cursor: pointer;
}

.gm-maps-shell.gm-layer-active:not(.gm-panel-collapsed) .gm-map-footer-left {
	left: calc(var(--gm-rail-w) + var(--gm-left-panel-w, 400px) + var(--gm-map-ctrl-right) + 12px);
	max-width: calc(100vw - var(--gm-rail-w) - var(--gm-left-panel-w, 400px) - 200px);
}

.gm-maps-shell.gm-detail-open .map-legend-panel {
	display: none !important;
}

.gm-maps-shell:has(.modern-timeline.visible) .overview-map-container,
.gm-maps-shell:has(.modern-timeline.visible) .gm-map-footer-left {
	bottom: var(--gm-map-footer-stack);
	z-index: 1002;
}

/*
 * Timeline fixed thoát khỏi .gm-float-ui.
 * Thu gọn: z-index thấp → Chú giải / Thời tiết / Nền nổi trên thanh.
 * Mở (hover / expand / play): timeline che nút.
 */
.gm-maps-shell .modern-timeline.timeline-mini.visible {
	z-index: 40 !important;
}
.gm-maps-shell .modern-timeline.timeline-mini.visible:hover,
.gm-maps-shell .modern-timeline.timeline-mini.visible.is-expanded,
.gm-maps-shell .modern-timeline.timeline-mini.visible.is-playing {
	z-index: 1003 !important;
}

/* Giữ Chú giải + Nền + nút Thời tiết khi timeline hiện (giống Bắc Ninh) */
.gm-maps-shell:has(.modern-timeline.visible) .gm-map-footer-left > #mapLegendPanel,
.gm-maps-shell:has(.modern-timeline.visible) .gm-map-footer-left > #gmBasemapPeek,
.gm-maps-shell:has(.modern-timeline.visible) .gm-map-footer-left > #gmMapLayerPeeks {
	display: flex;
	visibility: visible;
	pointer-events: auto;
}

.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek > .gm-weather-peek__card {
	display: flex;
	visibility: visible;
	pointer-events: auto;
}

.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek {
	width: auto;
	height: auto;
	min-width: 0;
	overflow: visible;
	margin: 0;
	align-self: flex-end;
}

/* Circle menu neo phía trên card Thời tiết — không đè timeline */
.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek.is-menu-open .gm-weather-peek__menu,
.gm-maps-shell #gmWeatherPeek.is-menu-open .gm-weather-peek__menu {
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}

/* WRF: circle + chú giải FengWu */
.gm-maps-shell #gmWeatherPeek.is-fengwu-active .gm-weather-peek__menu,
.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek.is-fengwu-active.is-menu-open .gm-weather-peek__menu {
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
}

.gm-maps-shell .fengwu-legend-panel {
	left: calc(var(--gm-rail-w) + 12px) !important;
	right: auto !important;
	top: auto !important;
	bottom: 168px !important; /* ngay trên circle fan (~132px) + timeline mini */
	z-index: 1002;
	max-width: 200px;
	min-width: 160px;
	padding: 8px 10px;
	font-size: 11px;
}

.gm-maps-shell .fengwu-legend-panel .fengwu-legend-title {
	font-size: 11px;
	margin-bottom: 6px;
}

.gm-maps-shell .gm-basemap-peek {
	position: relative;
	bottom: auto;
	left: auto;
	z-index: 49;
	pointer-events: auto;
	flex: 0 0 auto;
	align-self: flex-end;
}

.gm-maps-shell .gm-basemap-peek__card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 168px;
	height: 44px;
	padding: 4px 10px 4px 4px;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
	color: #3c4043;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.gm-maps-shell .gm-basemap-peek__card:hover {
	border-color: #dadce0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.1);
}

.gm-maps-shell .gm-basemap-peek.is-menu-open .gm-basemap-peek__card,
.gm-maps-shell .gm-basemap-peek__card:focus-visible {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gm-maps-shell .gm-basemap-peek__thumb {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #e8f0fe 0%, #f8f9fa 100%);
	color: #1967d2;
}

.gm-maps-shell .gm-basemap-peek__thumb iconify-icon {
	font-size: 20px;
	pointer-events: none;
}

.gm-maps-shell .gm-basemap-peek__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	line-height: 1.15;
}

.gm-maps-shell .gm-basemap-peek__eyebrow {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #80868b;
}

.gm-maps-shell .gm-basemap-peek__label {
	font-size: 12px;
	font-weight: 600;
	color: #202124;
	max-width: 96px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gm-maps-shell .gm-basemap-peek__hint {
	margin-left: 2px;
	color: #9aa0a6;
	display: inline-flex;
}

.gm-maps-shell .gm-basemap-peek__hint iconify-icon {
	font-size: 12px;
	pointer-events: none;
}

.gm-maps-shell .gm-basemap-peek__menu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	width: min(280px, calc(100vw - var(--gm-rail-w) - 32px));
	padding: 10px;
	border-radius: 14px;
	border: 1px solid #e8eaed;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 12px 32px rgba(0, 0, 0, 0.1);
	z-index: 50;
}

.gm-maps-shell .gm-basemap-peek__menu[hidden] {
	display: none !important;
}

.gm-maps-shell .gm-basemap-peek__menu-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5f6368;
	margin: 0 2px 8px;
}

.gm-maps-shell .gm-basemap-peek__menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.gm-maps-shell .gm-basemap-peek__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px 8px;
	min-height: 78px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #f8f9fa;
	color: #3c4043;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-maps-shell .gm-basemap-peek__tile:hover {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-maps-shell .gm-basemap-peek__tile.is-active {
	background: #e8f0fe;
	border-color: #1a73e8;
	box-shadow: 0 0 0 1px #1a73e8;
	color: #1967d2;
}

.gm-maps-shell .gm-basemap-peek__tile-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}

.gm-maps-shell .gm-basemap-peek__tile-icon iconify-icon {
	font-size: 18px;
	pointer-events: none;
}

.gm-maps-shell .gm-basemap-peek__tile-label {
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	max-width: 100%;
}

.gm-maps-shell .gm-basemap-peek__menu-foot {
	margin-top: 8px;
	padding: 0 2px;
	font-size: 10px;
	color: #80868b;
}

.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="vn"] {
	background: linear-gradient(145deg, #e8f5e9, #c8e6c9);
	color: #2e7d32;
}
.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="sat"] {
	background: linear-gradient(145deg, #1a237e, #3949ab);
	color: #e8eaf6;
}
.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="ter"] {
	background: linear-gradient(145deg, #efebe9, #bcaaa4);
	color: #5d4037;
}
.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="road"] {
	background: linear-gradient(145deg, #fff8e1, #ffe082);
	color: #f57f17;
}
.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="hyb"] {
	background: linear-gradient(145deg, #e3f2fd, #90caf9);
	color: #1565c0;
}
.gm-maps-shell .gm-basemap-peek__thumb[data-thumb="osm"] {
	background: linear-gradient(145deg, #e8f0fe, #f8f9fa);
	color: #1967d2;
}

/* ── Weather peek (lớp thời tiết) ── */
.gm-maps-shell .gm-weather-peek {
	position: relative;
	bottom: auto;
	left: auto;
	z-index: 49;
	pointer-events: auto;
	flex: 0 0 auto;
	align-self: flex-end;
}

.gm-maps-shell .gm-weather-peek.is-menu-open {
	z-index: 1002;
}

.gm-maps-shell .gm-weather-peek__card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 168px;
	height: 44px;
	padding: 4px 10px 4px 4px;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
	color: #3c4043;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.gm-maps-shell .gm-weather-peek__card:hover {
	border-color: #dadce0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.1);
}

.gm-maps-shell .gm-weather-peek.is-menu-open .gm-weather-peek__card,
.gm-maps-shell .gm-weather-peek__card:focus-visible {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gm-maps-shell .gm-weather-peek__thumb {
	position: relative;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #e3f2fd 0%, #f8f9fa 100%);
	color: #0277bd;
}

.gm-maps-shell .gm-weather-peek__thumb iconify-icon {
	font-size: 20px;
	pointer-events: none;
}

.gm-maps-shell .gm-weather-peek__dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1a73e8;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell .gm-weather-peek__dot[hidden] {
	display: none !important;
}

.gm-maps-shell .gm-weather-peek__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	line-height: 1.15;
}

.gm-maps-shell .gm-weather-peek__eyebrow {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #80868b;
}

.gm-maps-shell .gm-weather-peek__label {
	font-size: 12px;
	font-weight: 600;
	color: #202124;
	max-width: 96px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gm-maps-shell .gm-weather-peek__hint {
	margin-left: 2px;
	color: #9aa0a6;
	display: inline-flex;
}

.gm-maps-shell .gm-weather-peek__hint iconify-icon {
	font-size: 12px;
	pointer-events: none;
}

.gm-maps-shell .gm-weather-peek__menu {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	z-index: 55;
}

.gm-maps-shell .gm-weather-peek__menu[hidden] {
	display: none !important;
}

.gm-maps-shell .gm-weather-peek__menu-title {
	display: none;
}

/* Intro mây bay lên rồi tan */
.gm-maps-shell .gm-weather-cloud-stage {
	position: absolute;
	left: 50%;
	bottom: 42px;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 60;
	overflow: visible;
}

.gm-maps-shell .gm-weather-cloud {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 14px;
	margin-left: -19px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow:
		14px -5px 0 1px rgba(255, 255, 255, 0.9),
		-12px -4px 0 0 rgba(245, 250, 255, 0.88),
		4px -10px 0 -1px rgba(255, 255, 255, 0.85),
		0 2px 8px rgba(100, 150, 200, 0.25);
	opacity: 0;
	transform: translate(var(--cx, 0), 8px) scale(var(--scale, 1));
	filter: blur(0.4px);
	will-change: transform, opacity, filter;
}

.gm-maps-shell .gm-weather-peek.is-cloud-intro .gm-weather-cloud {
	animation: gmWeatherCloudRise 0.88s cubic-bezier(0.22, 0.8, 0.28, 1) var(--delay, 0ms) forwards;
}

@keyframes gmWeatherCloudRise {
	0% {
		opacity: 0;
		transform: translate(var(--cx, 0), 14px) scale(calc(var(--scale, 1) * 0.55));
		filter: blur(0.2px);
	}
	18% {
		opacity: 0.95;
	}
	55% {
		opacity: 0.75;
		filter: blur(1.2px);
	}
	100% {
		opacity: 0;
		transform: translate(calc(var(--cx, 0) + var(--drift, 0px)), -92px) scale(calc(var(--scale, 1) * 1.2));
		filter: blur(5px);
	}
}

/* Desktop: fan 3 miếng (mây · gió · radar) */
.gm-maps-shell .gm-weather-fan {
	display: block;
	width: 248px;
	height: 136px;
	position: relative;
	filter: drop-shadow(0 10px 18px rgba(25, 55, 95, 0.18));
}

.gm-maps-shell .gm-weather-fan__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gm-maps-shell .gm-weather-fan__ground {
	pointer-events: none;
}

.gm-maps-shell .gm-weather-wedge {
	cursor: pointer;
	transition:
		transform 0.38s cubic-bezier(0.34, 1.45, 0.64, 1),
		opacity 0.28s ease,
		filter 0.22s ease;
	transition-delay: calc(var(--i, 0) * 55ms);
	transform: translate(0, 0) scale(1);
	transform-box: fill-box;
	transform-origin: center bottom;
	outline: none;
	opacity: 1;
}

/* Stagger open từ tâm */
.gm-maps-shell .gm-weather-peek.is-menu-open:not(.is-menu-ready) .gm-weather-wedge {
	opacity: 0;
	transform: translate(0, 10px) scale(0.42);
	filter: blur(1px);
	pointer-events: none;
}

.gm-maps-shell .gm-weather-peek.is-menu-open.is-menu-ready .gm-weather-wedge {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	filter: none;
	pointer-events: auto;
}

.gm-maps-shell .gm-weather-wedge:focus,
.gm-maps-shell .gm-weather-wedge:focus-visible {
	outline: none;
}

.gm-maps-shell .gm-weather-grid__tile:focus,
.gm-maps-shell .gm-weather-grid__tile:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell .gm-weather-wedge:hover,
.gm-maps-shell .gm-weather-wedge.is-hovered,
.gm-maps-shell .gm-weather-peek.is-menu-open.is-menu-ready .gm-weather-wedge:hover,
.gm-maps-shell .gm-weather-peek.is-menu-open.is-menu-ready .gm-weather-wedge.is-hovered {
	transform: translate(var(--lift-x, 0), var(--lift-y, 0)) scale(1.07);
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
	transition-delay: 0ms;
}

.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-wedge__slice {
	stroke: #1a73e8;
	stroke-width: 2.5;
}

.gm-maps-shell .gm-weather-wedge__slice {
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 2.2;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.gm-maps-shell .gm-weather-wedge__shine {
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.gm-maps-shell .gm-weather-wedge__icon {
	pointer-events: none;
	color: #37474f;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}

.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-wedge__icon {
	color: #1565c0;
}

.gm-maps-shell .gm-weather-wedge__label {
	pointer-events: none;
	font-size: 9px;
	font-weight: 700;
	fill: #37474f;
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 2.5px;
}

.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-wedge__label {
	fill: #0d47a1;
}

/* Accent thời tiết trên wedge */
.gm-maps-shell .gm-weather-accent {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-accent,
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-accent {
	opacity: 0.9;
}

.gm-maps-shell .gm-weather-wind-line {
	fill: none;
	stroke: rgba(25, 118, 210, 0.55);
	stroke-width: 1.4;
	stroke-linecap: round;
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-wind-line,
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-wind-line {
	animation: gmWeatherWindPulse 1.1s ease-in-out infinite;
}

.gm-maps-shell .gm-weather-drop {
	fill: rgba(33, 150, 243, 0.75);
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-drop,
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-drop {
	animation: gmWeatherDropFall 0.9s linear infinite;
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-drop:nth-child(2),
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-drop:nth-child(2) {
	animation-delay: 0.2s;
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-drop:nth-child(3),
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-drop:nth-child(3) {
	animation-delay: 0.45s;
}

.gm-maps-shell .gm-weather-puff {
	fill: rgba(255, 255, 255, 0.55);
}

.gm-maps-shell .gm-weather-wedge:hover .gm-weather-puff,
.gm-maps-shell .gm-weather-wedge.is-active .gm-weather-puff {
	animation: gmWeatherPuffDrift 2.4s ease-in-out infinite;
}

@keyframes gmWeatherWindPulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.95; }
}

@keyframes gmWeatherDropFall {
	0% { opacity: 0; transform: translateY(-2px); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(8px); }
}

@keyframes gmWeatherPuffDrift {
	0%, 100% { transform: translateX(-2px); opacity: 0.45; }
	50% { transform: translateX(3px); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
	.gm-maps-shell .gm-weather-cloud,
	.gm-maps-shell .gm-weather-peek.is-cloud-intro .gm-weather-cloud {
		animation: none !important;
		opacity: 0 !important;
	}
	.gm-maps-shell .gm-weather-peek.is-menu-open:not(.is-menu-ready) .gm-weather-wedge,
	.gm-maps-shell .gm-weather-peek.is-menu-open.is-menu-ready .gm-weather-wedge {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	.gm-maps-shell .gm-weather-wind-line,
	.gm-maps-shell .gm-weather-drop,
	.gm-maps-shell .gm-weather-puff {
		animation: none !important;
	}
}

/* Mobile: grid 3 cột */
.gm-maps-shell .gm-weather-grid {
	display: none;
	width: min(300px, calc(100vw - var(--gm-rail-w) - 32px));
	padding: 10px;
	border-radius: 14px;
	border: 1px solid #e8eaed;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 12px 32px rgba(0, 0, 0, 0.1);
}

.gm-maps-shell .gm-weather-grid__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.gm-maps-shell .gm-weather-grid__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 8px 10px;
	min-height: 76px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #f8f9fa;
	color: #3c4043;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-maps-shell .gm-weather-grid__tile:hover {
	background: #e8f0fe;
	color: #1967d2;
}

.gm-maps-shell .gm-weather-grid__tile.is-active {
	background: #e8f0fe;
	border-color: #1a73e8;
	box-shadow: 0 0 0 1px #1a73e8;
	color: #1967d2;
}

.gm-maps-shell .gm-weather-grid__tile-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}

.gm-maps-shell .gm-weather-grid__tile-icon iconify-icon {
	font-size: 20px;
	pointer-events: none;
}

.gm-maps-shell .gm-weather-grid__tile-label {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
}

.gm-maps-shell .gm-weather-grid__tile-sub {
	font-size: 9px;
	color: #80868b;
	text-align: center;
}

.gm-maps-shell .gm-weather-grid__tile.is-active .gm-weather-grid__tile-sub {
	color: #5f87c2;
}

/* ═══════════════════════════════════════════════════════════
   Timeline Mini Overlay (Google shell) — không đụng theme tối app.css
   Mini: thanh ~6px · Expand khi hover/play · Auto-fade khi pan/zoom map
   ═══════════════════════════════════════════════════════════ */

.gm-maps-shell .modern-timeline.timeline-mini {
	pointer-events: none;
}

.gm-maps-shell .modern-timeline.timeline-mini.visible {
	pointer-events: auto;
	transition: opacity 0.25s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

/* Timeline đang nhận phím ←/→ / Space */
.gm-maps-shell .modern-timeline.timeline-mini.is-keyboard-focus {
	box-shadow: inset 0 2px 0 #1a73e8;
	z-index: 1001 !important;
}

/* Chia ngang: mỗi timeline một cột, nền trắng nhẹ để tách vùng */
.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-2 .timeline-container,
.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-4 .timeline-container {
	background: rgba(255, 255, 255, 0.92);
	border-top: 1px solid #e8eaed;
}

.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-2 .timeline-label-group .timeline-label,
.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-4 .timeline-label-group .timeline-label {
	font-size: 10px;
}

.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-2 .timeline-current-time,
.gm-maps-shell .modern-timeline.timeline-mini.timeline-split-4 .timeline-current-time {
	font-size: 11px;
}

.gm-maps-shell .modern-timeline.timeline-mini.is-map-interacting:not(:hover):not(.is-expanded):not(.is-playing) {
	opacity: 0.38;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-container {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	box-shadow: none;
	border: none;
	position: relative;
	min-height: 6px;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-controls {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0 48px 0 8px;
	min-height: 6px;
	background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.85) 40%, #fff 100%);
	border-top: none;
	transition: min-height 0.2s ease, padding 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-controls,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-controls,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-controls {
	min-height: 40px;
	padding: 6px 48px 6px 10px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -2px 12px rgba(60, 64, 67, 0.12);
	border-top: 1px solid #e8eaed;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn {
	width: 0;
	height: 0;
	min-width: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	border: none;
	pointer-events: none;
	flex-shrink: 0;
	transition: opacity 0.15s ease, width 0.15s ease, height 0.15s ease;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-btn,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-btn,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-btn {
	width: 30px;
	height: 30px;
	opacity: 1;
	pointer-events: auto;
	border-radius: 7px;
	background: #f1f3f4;
	color: #202124;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-btn.play,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-btn.play,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-btn.play {
	width: 32px;
	height: 32px;
	background: #1a73e8;
	color: #fff;
	box-shadow: none;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-btn.pause,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-btn.pause,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-btn.pause {
	width: 32px;
	height: 32px;
	background: #ea4335;
	color: #fff;
	box-shadow: none;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn:hover {
	transform: none;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-slider-wrapper {
	flex: 1;
	padding: 0;
	min-width: 0;
	position: relative;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs {
	height: 14px;
	margin: 0;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-with-grid {
	height: 14px;
}

/* Cùng hệ tọa độ absolute để tránh lệch line (relative) vs bar (absolute) */
.gm-maps-shell .modern-timeline.timeline-mini .irs-line,
.gm-maps-shell .modern-timeline.timeline-mini .irs-bar {
	position: absolute !important;
	left: 0;
	height: 5px !important;
	top: 4.5px !important;
	margin: 0 !important;
	border: none !important;
	transform: none !important;
	border-radius: 3px;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-line {
	width: 100%;
	background: rgba(26, 115, 232, 0.22) !important;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-bar {
	background: #1a73e8 !important;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-handle {
	width: 10px;
	height: 10px;
	top: 2px !important;
	border: 2px solid #1a73e8;
	background: #fff;
	box-shadow: 0 1px 4px rgba(26, 115, 232, 0.45);
	margin-top: 0 !important;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .irs,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .irs,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .irs {
	height: 28px;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .irs-with-grid,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .irs-with-grid,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .irs-with-grid {
	height: 28px;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .irs-line,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .irs-line,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .irs-line,
.gm-maps-shell .modern-timeline.timeline-mini:hover .irs-bar,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .irs-bar,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .irs-bar {
	height: 6px !important;
	top: 11px !important;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .irs-handle,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .irs-handle,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .irs-handle {
	top: 9px !important;
	width: 14px;
	height: 14px;
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-from,
.gm-maps-shell .modern-timeline.timeline-mini .irs-to,
.gm-maps-shell .modern-timeline.timeline-mini .irs-single {
	background: #1a73e8;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 4px;
	top: -26px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell .modern-timeline.timeline-mini .irs-grid {
	display: none;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-label-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-height: 22px;
	margin: 0;
	padding: 2px 40px 4px 12px;
	background: transparent;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-label-row,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-label-row,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-label-row {
	background: rgba(255, 255, 255, 0.96);
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-label-group {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
	justify-content: flex-end;
	min-width: 0;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-label {
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #202124;
	text-transform: uppercase;
	white-space: nowrap;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-current-time {
	font-size: 12px;
	font-weight: 700;
	color: #1a73e8;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-date {
	font-size: 11px;
	font-weight: 600;
	color: #5f6368;
	font-variant-numeric: tabular-nums;
	display: none;
}

/* Chỉ hiện khoảng start–end khi hover/expand để gọn thanh mini */
.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-date--start,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-date--start,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-date--start,
.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-date--end,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-date--end,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-date--end {
	display: inline;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-label-row,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-label-row,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-label-row {
	justify-content: space-between;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-close-btn {
	position: absolute;
	right: 6px;
	bottom: 50%;
	transform: translateY(50%);
	z-index: 2;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.92);
	color: #5f6368;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.75;
	transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, top 0.15s ease;
}

.gm-maps-shell .modern-timeline.timeline-mini:hover .timeline-close-btn,
.gm-maps-shell .modern-timeline.timeline-mini.is-expanded .timeline-close-btn,
.gm-maps-shell .modern-timeline.timeline-mini.is-playing .timeline-close-btn {
	opacity: 1;
	bottom: auto;
	top: 8px;
	transform: none;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-close-btn:hover {
	background: #ea4335;
	color: #fff;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-close-btn iconify-icon {
	font-size: 12px;
	pointer-events: none;
}

.gm-maps-shell .fengwu-legend-panel {
	/* vị trí chính đã set ở block WRF gần circle menu */
	bottom: 168px !important;
}

.gm-maps-shell .modern-timeline.timeline-mini .timeline-close-btn::after {
	content: '';
	position: absolute;
	inset: -14px;
}

@media (max-width: 991.98px) {
	.gm-maps-shell .modern-timeline.timeline-mini.visible {
		z-index: 1003 !important;
		pointer-events: auto;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-container {
		overflow: visible;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-controls {
		min-height: 36px;
		padding: 4px 44px 4px 8px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 -2px 10px rgba(60, 64, 67, 0.1);
		overflow: visible;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-close-btn {
		z-index: 20;
		pointer-events: auto !important;
		touch-action: manipulation;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn {
		width: 28px;
		height: 28px;
		opacity: 1;
		pointer-events: auto;
		border-radius: 7px;
		background: #f1f3f4;
		color: #202124;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 4px;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn.play,
	.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn.pause {
		width: 30px;
		height: 30px;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn.play {
		background: #1a73e8;
		color: #fff;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-btn.pause {
		background: #ea4335;
		color: #fff;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-label-row {
		display: flex;
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.96);
	}

	.gm-maps-shell .modern-timeline.timeline-mini .timeline-date--start,
	.gm-maps-shell .modern-timeline.timeline-mini .timeline-date--end {
		display: inline;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .irs,
	.gm-maps-shell .modern-timeline.timeline-mini .irs-with-grid {
		height: 26px;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .irs-line,
	.gm-maps-shell .modern-timeline.timeline-mini .irs-bar {
		height: 5px;
		top: 10px;
	}

	.gm-maps-shell .modern-timeline.timeline-mini .irs-handle {
		width: 14px;
		height: 14px;
		top: 6px;
	}

	.gm-maps-shell .fengwu-legend-panel {
		left: 10px !important;
		bottom: 200px !important;
		max-width: 170px;
		display: block !important; /* hiện trên mobile khi WRF bật (app.css đang ẩn) */
	}
}

@media (max-width: 991.98px) {
	.gm-maps-shell {
		--gm-map-ctrl-top: 12px; /* cột nút cạnh search, không dưới search */
		--gm-map-ctrl-right: 10px;
		--gm-map-ctrl-btn-size: 36px;
		--gm-map-zoom-btn-size: 28px;
		--gm-map-ctrl-gap: 8px;
		--gm-map-zoom-top: var(--gm-map-ctrl-top);
		--gm-map-zoom-group-h: calc(var(--gm-map-zoom-btn-size) * 2);
		--gm-map-footer-bottom: 12px;
		--gm-map-fab-bottom: 12px;
		--gm-map-fab-right: 10px;
		--gm-map-mobile-chip-count: 6;
	}

	.gm-maps-shell .app-theme-panel,
	.app-theme-panel {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.gm-maps-shell .gm-search-stack {
		padding-right: calc(var(--gm-map-ctrl-btn-size) + 20px) !important;
		width: calc(100vw - var(--gm-rail-w) - 24px) !important;
		max-width: calc(100vw - var(--gm-rail-w) - 24px) !important;
		box-sizing: border-box;
	}

	.gm-maps-shell .overview-map-container {
		display: none !important;
	}

	/* Mobile: cột phải = Điều khiển → Địa danh → sông → Truy vấn → Truy vấn mưa → Lúa → Thời tiết → Nền → Zoom */
	.gm-maps-shell .gm-map-footer-left {
		position: static;
		bottom: auto;
		left: auto;
		max-width: none;
		display: block;
		pointer-events: none;
	}

	.gm-maps-shell .gm-map-layer-peeks {
		position: fixed;
		top: calc(
			var(--gm-map-ctrl-top, 12px)
			+ (var(--gm-map-ctrl-btn-size) + var(--gm-map-ctrl-gap)) * var(--gm-map-mobile-chip-count, 6)
		);
		right: var(--gm-map-ctrl-right, 10px);
		left: auto !important;
		bottom: auto !important;
		z-index: 10085;
		max-width: none;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--gm-map-ctrl-gap);
		pointer-events: none;
	}

	.gm-maps-shell .gm-map-layer-peeks > * {
		pointer-events: auto;
	}

	.gm-maps-shell:has(.modern-timeline.visible) .gm-map-layer-peeks {
		bottom: auto !important;
		z-index: 10085;
	}

	.gm-maps-shell .gm-weather-peek,
	.gm-maps-shell .gm-basemap-peek {
		position: relative;
		left: auto !important;
		bottom: auto !important;
		right: auto;
		top: auto;
		z-index: auto;
		align-self: flex-end;
		flex: 0 0 auto;
	}

	.gm-maps-shell .gm-weather-peek.is-menu-open,
	.gm-maps-shell .gm-basemap-peek.is-menu-open {
		z-index: 10086;
	}

	.gm-maps-shell .gm-weather-peek__meta,
	.gm-maps-shell .gm-weather-peek__hint,
	.gm-maps-shell .gm-basemap-peek__meta,
	.gm-maps-shell .gm-basemap-peek__hint {
		display: none !important;
	}

	.gm-maps-shell .gm-weather-peek__card,
	.gm-maps-shell .gm-basemap-peek__card {
		position: relative;
		width: var(--gm-map-ctrl-btn-size) !important;
		height: var(--gm-map-ctrl-btn-size) !important;
		min-width: var(--gm-map-ctrl-btn-size) !important;
		max-width: var(--gm-map-ctrl-btn-size) !important;
		padding: 0 !important;
		gap: 0;
		justify-content: center;
		border-radius: 8px !important;
		border: none !important;
		box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 0 0 1px rgba(60, 64, 67, 0.08) !important;
		background: #fff !important;
		color: #5f6368;
	}

	.gm-maps-shell .gm-weather-peek.is-menu-open .gm-weather-peek__card,
	.gm-maps-shell .gm-basemap-peek.is-menu-open .gm-basemap-peek__card,
	.gm-maps-shell #gmWeatherPeek:has(.gm-weather-peek__dot:not([hidden])) .gm-weather-peek__card {
		background: #e8f0fe !important;
		color: #1967d2;
		box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35) !important;
	}

	.gm-maps-shell .gm-weather-peek__thumb,
	.gm-maps-shell .gm-basemap-peek__thumb {
		width: 100%;
		height: 100%;
		margin: 0;
		border-radius: 8px;
		background: transparent;
		box-shadow: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.gm-maps-shell .gm-weather-peek__thumb iconify-icon,
	.gm-maps-shell .gm-basemap-peek__thumb iconify-icon {
		font-size: 17px;
		color: inherit;
	}

	.gm-maps-shell .gm-weather-peek__dot {
		position: absolute;
		top: 4px;
		right: 4px;
		width: 7px;
		height: 7px;
		border: 1.5px solid #fff;
	}

	.gm-maps-shell .gm-weather-peek__menu,
	.gm-maps-shell #gmWeatherPeek.is-menu-open .gm-weather-peek__menu,
	.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek.is-menu-open .gm-weather-peek__menu,
	.gm-maps-shell #gmWeatherPeek.is-fengwu-active .gm-weather-peek__menu,
	.gm-maps-shell:has(.modern-timeline.visible) #gmWeatherPeek.is-fengwu-active.is-menu-open .gm-weather-peek__menu {
		left: auto !important;
		right: calc(100% + 8px) !important;
		top: 0 !important;
		bottom: auto !important;
		transform: none !important;
		width: min(196px, calc(100vw - 56px));
		z-index: 60;
		padding: 6px;
		border-radius: 10px;
		border: 1px solid #e8eaed;
		background: #fff;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
	}

	.gm-maps-shell .gm-weather-peek__menu-title {
		display: block;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #5f6368;
		margin: 0 0 4px 1px;
	}

	.gm-maps-shell .gm-weather-fan {
		display: none;
	}

	.gm-maps-shell .gm-weather-grid {
		display: block;
		width: 100%;
		max-width: none;
		padding: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		box-sizing: border-box;
	}

	.gm-maps-shell .gm-weather-grid__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.gm-maps-shell .gm-weather-grid__tile {
		gap: 2px;
		min-height: 0;
		padding: 6px 4px 5px;
		border-radius: 8px;
	}

	.gm-maps-shell .gm-weather-grid__tile-icon {
		width: 24px;
		height: 24px;
		border-radius: 6px;
	}

	.gm-maps-shell .gm-weather-grid__tile-icon iconify-icon {
		font-size: 14px;
	}

	.gm-maps-shell .gm-weather-grid__tile-label {
		font-size: 10px;
		line-height: 1.15;
	}

	.gm-maps-shell .gm-weather-grid__tile-sub {
		display: none;
	}

	.gm-maps-shell .gm-basemap-peek__menu {
		left: auto !important;
		right: calc(100% + 8px) !important;
		top: 0 !important;
		bottom: auto !important;
		transform: none !important;
		width: min(220px, calc(100vw - 56px));
		z-index: 60;
		padding: 6px;
		border-radius: 10px;
		border: 1px solid #e8eaed;
		background: #fff;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
	}

	.gm-maps-shell .gm-basemap-peek__menu-title {
		font-size: 9px;
		margin: 0 0 4px 1px;
	}

	.gm-maps-shell .gm-basemap-peek__menu-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
	}

	.gm-maps-shell .gm-basemap-peek__tile {
		gap: 3px;
		min-height: 0;
		padding: 5px 2px 4px;
		border-radius: 8px;
	}

	.gm-maps-shell .gm-basemap-peek__tile-icon {
		width: 28px;
		height: 28px;
		border-radius: 6px;
	}

	.gm-maps-shell .gm-basemap-peek__tile-icon iconify-icon {
		font-size: 14px;
	}

	.gm-maps-shell .gm-basemap-peek__tile-label {
		font-size: 8px;
		line-height: 1.15;
	}

	.gm-maps-shell .gm-basemap-peek__menu-foot {
		display: none;
	}

	.gm-maps-shell .gm-map-footer-left {
		left: calc(var(--gm-rail-w) + 8px);
		bottom: var(--gm-map-footer-bottom);
		z-index: 53;
		max-width: calc(100vw - var(--gm-rail-w) - 56px);
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 8px;
	}

	.gm-maps-shell:has(.modern-timeline.visible) .gm-basemap-peek {
		bottom: auto;
	}

	.gm-maps-shell:has(.modern-timeline.visible) .gm-map-footer-left {
		bottom: var(--gm-map-footer-bottom);
	}

	.gm-maps-shell #mapLegendPanel,
	.gm-maps-shell .map-legend-panel {
		display: none !important;
	}

	.gm-maps-shell .dss-wind-speed-legend,
	.dss-wind-speed-legend {
		display: none !important;
		visibility: hidden !important;
	}

	.gm-maps-shell .gm-map-info-btn,
	.gm-maps-shell #gmMapInfoBtn {
		display: none !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-top-right {
		display: none !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-group {
		border-radius: 6px !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-group button {
		width: var(--gm-map-zoom-btn-size) !important;
		height: var(--gm-map-zoom-btn-size) !important;
	}

	.gm-maps-shell .mapbox-controls-panel {
		position: absolute !important;
		top: var(--gm-map-ctrl-top) !important;
		bottom: auto !important;
		right: calc(10px + var(--gm-map-tool-w) + 8px) !important;
		max-width: min(240px, calc(100vw - var(--gm-rail-w) - 88px));
		z-index: 10092 !important;
		pointer-events: auto !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-attrib,
	.gm-maps-shell .mapboxgl-ctrl-attrib-button {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-bottom-right {
		bottom: 8px !important;
		right: 8px !important;
		pointer-events: none !important;
	}

	.gm-maps-shell .mapboxgl-ctrl-bottom-right > * {
		pointer-events: none !important;
	}

	.gm-maps-shell:has(.modern-timeline.visible) .mapbox-controls-panel {
		top: var(--gm-map-ctrl-top) !important;
		bottom: auto !important;
	}
}

@media (max-width: 480px) {
	.gm-maps-shell {
		--gm-map-ctrl-top: 12px;
		--gm-map-ctrl-btn-size: 34px;
		--gm-map-zoom-btn-size: 26px;
		--gm-map-ctrl-gap: 6px;
		--gm-map-fab-bottom: 10px;
		--gm-map-fab-right: 8px;
	}
}


/* Detail / list tabs as light floating panels (same column as sidebar) */
.gm-maps-shell #tab-list,
.gm-maps-shell #tab-science {
	position: absolute;
	left: calc(var(--gm-rail-w) + 12px);
	top: var(--gm-list-top, 72px);
	bottom: 12px;
	width: var(--gm-left-panel-w, 400px);
	z-index: 36;
	background: #fff !important;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow: auto;
	color: #202124 !important;
}

.gm-maps-shell #tab-detail {
	position: absolute;
	left: calc(var(--gm-rail-w) + 12px);
	top: var(--gm-list-top, 72px);
	bottom: var(--gm-panel-bottom, 12px);
	height: var(--gm-panel-h, auto);
	max-height: var(--gm-panel-h, none);
	width: var(--gm-left-panel-w, 400px);
	z-index: 36;
	background: #fff !important;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow: hidden;
	color: #202124 !important;
	display: flex;
	flex-direction: column;
	min-height: 0;
	box-sizing: border-box;
}

.gm-maps-shell #tab-detail .mailbox-detail-header.gm-detail-outer-hidden {
	display: none !important;
}

.gm-maps-shell #tab-detail .mailbox-detail-header.gm-detail-title-bar {
	padding: 10px 8px 10px 20px;
	border-bottom: 1px solid #e8eaed;
	flex-shrink: 0;
	align-items: flex-start;
	background: #fff;
	display: flex;
	gap: 4px;
	position: relative;
}

.gm-maps-shell.gm-layer-active.gm-detail-open #tab-detail .mailbox-detail-header.gm-detail-title-bar {
	border-radius: 0;
}

.gm-maps-shell #tab-detail .gm-detail-title-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 4px;
}

.gm-maps-shell #tab-detail .gm-detail-close-btn {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: -2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #5f6368;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
	align-self: flex-start;
}

.gm-maps-shell #tab-detail .gm-detail-close-btn iconify-icon {
	font-size: 18px;
	line-height: 1;
}

.gm-maps-shell #tab-detail .gm-detail-close-btn:hover {
	background: #f1f3f4;
	color: #202124;
}

.gm-maps-shell #tab-detail .gm-detail-close-btn:active {
	background: #e8eaed;
}

.gm-maps-shell #tab-detail .gm-detail-close-btn:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 1px;
}

.gm-maps-shell #tab-detail .gm-detail-title-row h5,
.gm-maps-shell #tab-detail .gm-detail-title-row #detailStationName {
	margin: 0 !important;
	flex: 0 1 auto;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #202124 !important;
	text-transform: uppercase;
}

.gm-maps-shell #tab-detail .gm-detail-title-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	width: 100%;
}

.gm-maps-shell #tab-detail .gm-detail-title-subtitle {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #5f6368;
	letter-spacing: 0.01em;
}

.gm-maps-shell #tab-detail .gm-detail-title-coords {
	flex-shrink: 0;
	font-size: 11px !important;
	margin-top: 0;
}

.gm-maps-shell #tab-detail .mailbox-detail-content:has(.gm-detail-tabs-root) {
	padding: 0 16px 72px 20px;
}

.gm-maps-shell #tab-detail .mailbox-detail-content {
	flex: 1 1 auto;
	min-height: 0;
	/* Override app.css height/max-height:100% — otherwise bottom is clipped by #tab-detail */
	height: auto !important;
	max-height: none !important;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	padding: 0 14px 72px;
	scroll-padding-bottom: 64px;
}

/* Nội dung chi tiết / thống kê ngập: không tạo scrollbar riêng */
.gm-maps-shell #tab-detail #stationDetailContent,
.gm-maps-shell #tab-detail #stationDetailContent .main-content.detaildg,
.gm-maps-shell #tab-detail #contentDetail {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
}

/* Đã có nút X trên header panel — ẩn #closedlg trùng lặp trong nội dung */
.gm-maps-shell #tab-detail #closedlg,
.gm-maps-shell #tab-detail .main-content.detaildg > span.close {
	display: none !important;
}

.gm-maps-shell #tab-list .mailbox-detail-header,
.gm-maps-shell #tab-detail .mailbox-detail-header,
.gm-maps-shell #tab-list .mailbox-detail-content,
.gm-maps-shell #tab-detail .mailbox-detail-content {
	color: #202124 !important;
	background: #fff !important;
	border-color: #e8eaed !important;
}

.gm-maps-shell #tab-list .text-white,
.gm-maps-shell #tab-detail .text-white,
.gm-maps-shell #tab-list .text-white-50,
.gm-maps-shell #tab-detail .text-white-50,
.gm-maps-shell #tab-detail .text-opacity-75 {
	color: #5f6368 !important;
}

.gm-maps-shell #detailStationName {
	color: #202124 !important;
}

/* FAB host cũ — đã thay bằng #gmMapRightStack */
.gm-map-fabs {
	display: none !important;
}

/* Không định vị tuyệt đối Light/Info nữa — nằm trong cột flex */

/* Panel điều khiển: neo trái cột icon, cùng hàng với nút ⚙️ */
.gm-maps-shell .mapbox-controls-panel {
	top: var(--gm-map-ctrl-top);
	right: calc(var(--gm-map-ctrl-right) + var(--gm-map-tool-w) + 10px);
	left: auto;
	z-index: 10086;
	pointer-events: auto;
	min-width: 220px;
	max-width: min(280px, calc(100vw - 100px));
	margin-top: 0;
	background: #fff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(60, 64, 67, 0.08);
	padding: 12px;
	color: #202124;
}

.gm-maps-shell .mapbox-controls-panel.hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateX(12px);
	pointer-events: none;
}

.gm-maps-shell .mapbox-control-label {
	color: #5f6368;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gm-maps-shell .lighting-btn {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	color: #3c4043;
	border-radius: 8px;
	min-height: 48px;
}

.gm-maps-shell .lighting-btn iconify-icon {
	color: #5f6368;
	font-size: 18px;
}

.gm-maps-shell .lighting-btn span {
	color: inherit;
	font-size: 10px;
}

.gm-maps-shell .lighting-btn:hover {
	background: #e8f0fe;
	border-color: #d2e3fc;
	color: #174ea6;
	transform: none;
}

.gm-maps-shell .lighting-btn:hover iconify-icon {
	color: #1967d2;
}

.gm-maps-shell .lighting-btn.active {
	background: #e8f0fe;
	border-color: #1a73e8;
	color: #174ea6;
	box-shadow: none;
}

.gm-maps-shell .lighting-btn.active iconify-icon {
	color: #1a73e8;
}

.gm-maps-shell .mapbox-quick-action-btn,
.gm-maps-shell .mapbox-control-btn {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	color: #3c4043;
	border-radius: 8px;
	box-shadow: none;
}

.gm-maps-shell .mapbox-quick-action-btn iconify-icon,
.gm-maps-shell .mapbox-control-btn iconify-icon {
	color: #5f6368;
}

.gm-maps-shell .mapbox-quick-action-btn span,
.gm-maps-shell .mapbox-control-btn span {
	color: inherit;
}

.gm-maps-shell .mapbox-quick-action-btn:hover,
.gm-maps-shell .mapbox-control-btn:hover {
	background: #e8f0fe;
	border-color: #d2e3fc;
	color: #174ea6;
	transform: none;
}

.gm-maps-shell .mapbox-quick-action-btn:hover iconify-icon,
.gm-maps-shell .mapbox-control-btn:hover iconify-icon {
	color: #1967d2;
}

.gm-maps-shell .mapbox-quick-action-btn.active,
.gm-maps-shell .mapbox-control-btn.active {
	background: #e8f0fe;
	border-color: #1a73e8;
	color: #174ea6;
	box-shadow: none;
}

.gm-maps-shell .mapbox-quick-action-btn.active iconify-icon,
.gm-maps-shell .mapbox-control-btn.active iconify-icon {
	color: #1a73e8;
}

/* Ẩn zoom/home Mapbox mặc định — dùng cột nút tùy chỉnh */
.gm-maps-shell .mapboxgl-ctrl-top-right {
	display: none !important;
}

/* Cột nút phải: hàng chip + zoom (giống irrigation-bacninh) */
.gm-maps-shell .gm-map-right-stack {
	position: absolute;
	top: var(--gm-map-ctrl-top);
	right: var(--gm-map-ctrl-right);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	z-index: 10085; /* trên .gm-search-stack (10080) — tránh bị che click */
	pointer-events: auto;
}

/* Pad quả cầu + 2 vòng vuông góc (xoay / ánh sáng) */
.gm-maps-shell .gm-orbit-light-pad {
	position: absolute;
	top: calc(var(--gm-map-ctrl-top) + var(--gm-map-right-stack-h) + 10px);
	right: var(--gm-map-ctrl-right);
	z-index: 10084;
	width: 108px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	pointer-events: auto;
}

.gm-maps-shell .gm-orbit-light-pad.hidden,
.gm-maps-shell .gm-orbit-light-pad[hidden] {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden;
}

.gm-maps-shell .gm-orbit-light-pad__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 6px 8px;
	border-radius: 14px;
	background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
	box-shadow:
		0 1px 2px rgba(60, 64, 67, 0.14),
		0 4px 14px rgba(60, 64, 67, 0.1),
		0 0 0 1px rgba(60, 64, 67, 0.06);
	transition: background 0.28s ease, box-shadow 0.2s ease;
}

/* Nền card theo chế độ ánh sáng */
.gm-maps-shell .gm-orbit-light-pad[data-lighting="dawn"] .gm-orbit-light-pad__card {
	background: linear-gradient(165deg, #fff8f0 0%, #ffe8d4 100%);
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="day"] .gm-orbit-light-pad__card {
	background: linear-gradient(165deg, #ffffff 0%, #f0f7ff 100%);
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="dusk"] .gm-orbit-light-pad__card {
	background: linear-gradient(165deg, #fff5f0 0%, #ffd9c8 100%);
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="night"] .gm-orbit-light-pad__card {
	background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.28),
		0 4px 14px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="night"] .gm-orbit-light-pad__bearing {
	color: #93c5fd;
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="night"] .gm-orbit-light-pad__lighting {
	color: #fdba74;
}
.gm-maps-shell .gm-orbit-light-pad[data-lighting="night"] .gm-orbit-light-pad__lighting-icon {
	opacity: 0.95;
}

.gm-maps-shell .gm-orbit-light-pad__svg {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: default;
	overflow: visible;
}

.gm-maps-shell .gm-orbit-light-pad.is-dragging .gm-orbit-light-pad__card {
	box-shadow:
		0 0 0 2px rgba(66, 133, 244, 0.35),
		0 4px 16px rgba(60, 64, 67, 0.16);
}

.gm-maps-shell .gm-orbit-light-pad.is-dragging-bearing .gm-orbit-light-pad__svg,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-lighting .gm-orbit-light-pad__svg {
	cursor: grabbing;
}

.gm-maps-shell .gm-ring-h-hit,
.gm-maps-shell .gm-ring-v-hit,
.gm-maps-shell .gm-orbit-bead-hit {
	cursor: grab;
	pointer-events: stroke;
}

.gm-maps-shell .gm-orbit-bead-hit {
	pointer-events: all;
	cursor: grab;
}

.gm-maps-shell .gm-orbit-light-pad.is-dragging .gm-ring-h-hit,
.gm-maps-shell .gm-orbit-light-pad.is-dragging .gm-ring-v-hit,
.gm-maps-shell .gm-orbit-light-pad.is-dragging .gm-orbit-bead-hit {
	cursor: grabbing;
}

.gm-maps-shell .gm-globe-core,
.gm-maps-shell .gm-globe-shine,
.gm-maps-shell .gm-orbit-bead {
	pointer-events: none;
}

.gm-maps-shell .gm-orbit-bead {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
	transition: filter 0.15s ease;
}

.gm-maps-shell .gm-orbit-light-pad.is-hover-bearing .gm-orbit-bead--bearing,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-bearing .gm-orbit-bead--bearing {
	filter: drop-shadow(0 0 4px rgba(66, 133, 244, 0.75));
}

.gm-maps-shell .gm-orbit-light-pad.is-hover-lighting .gm-orbit-bead--lighting,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-lighting .gm-orbit-bead--lighting {
	filter: drop-shadow(0 0 4px rgba(232, 113, 10, 0.75));
}

.gm-maps-shell .gm-orbit-light-pad.is-hover-bearing .gm-ring-h,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-bearing .gm-ring-h,
.gm-maps-shell .gm-orbit-light-pad.is-hover-bearing .gm-ring-h--inner,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-bearing .gm-ring-h--inner {
	stroke-width: 2.8;
}

.gm-maps-shell .gm-orbit-light-pad.is-hover-lighting .gm-ring-v,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-lighting .gm-ring-v,
.gm-maps-shell .gm-orbit-light-pad.is-hover-lighting .gm-ring-v--inner,
.gm-maps-shell .gm-orbit-light-pad.is-dragging-lighting .gm-ring-v--inner {
	stroke-width: 2.8;
}

.gm-maps-shell .gm-orbit-light-pad.is-hover-bearing,
.gm-maps-shell .gm-orbit-light-pad.is-hover-lighting {
	cursor: grab;
}

.gm-maps-shell .gm-orbit-light-pad__labels {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	width: 100%;
	padding: 2px 4px 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 11px;
	line-height: 1.25;
	color: #5f6368;
}

.gm-maps-shell .gm-orbit-light-pad__bearing {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: #4285f4;
}

.gm-maps-shell .gm-orbit-light-pad__lighting-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
}

.gm-maps-shell .gm-orbit-light-pad__lighting-icon {
	font-size: 13px;
	line-height: 1;
	color: inherit;
	flex-shrink: 0;
}

.gm-maps-shell .gm-orbit-light-pad__lighting {
	font-weight: 600;
	color: #c2640a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-maps-shell .gm-map-tool-group {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--gm-map-ctrl-gap);
	width: auto;
	min-width: var(--gm-map-tool-w);
	max-width: min(520px, calc(100vw - 24px));
}

.gm-maps-shell .gm-map-tool-row {
	display: flex;
	flex-direction: row;
	gap: var(--gm-map-ctrl-gap);
	justify-content: flex-end;
	width: 100%;
}

.gm-maps-shell .gm-map-tool-row--chips {
	width: auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
	overflow: visible;
}

.gm-maps-shell .gm-map-tool-row--zoom {
	width: auto;
	justify-content: flex-end;
}

.gm-maps-shell .gm-map-chip-btn {
	height: var(--gm-map-ctrl-btn-size);
	min-width: var(--gm-map-ctrl-btn-size);
	max-width: var(--gm-map-ctrl-btn-size);
	padding: 0 !important;
	border: none !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 0 0 1px rgba(60, 64, 67, 0.08) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: #5f6368 !important;
	overflow: hidden;
	white-space: nowrap;
	transform: none !important;
	margin: 0 !important;
	z-index: auto !important;
	transition: background 0.15s ease, color 0.15s ease, max-width 0.2s ease, padding 0.2s ease, box-shadow 0.15s ease;
}

.gm-maps-shell .gm-map-chip-text {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, max-width 0.2s ease;
}

.gm-maps-shell .gm-map-chip-icon {
	flex: 0 0 var(--gm-map-ctrl-btn-size);
	width: var(--gm-map-ctrl-btn-size);
	height: var(--gm-map-ctrl-btn-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gm-maps-shell .gm-map-chip-btn iconify-icon {
	font-size: 17px !important;
	pointer-events: none;
	color: inherit !important;
}

.gm-maps-shell .gm-map-chip-btn:hover {
	background: #f1f3f4 !important;
	color: #202124 !important;
	transform: none !important;
	border-color: transparent !important;
}

.gm-maps-shell .gm-map-chip-btn.is-labeled,
.gm-maps-shell .gm-map-chip-btn.is-active,
.gm-maps-shell .gm-map-chip-btn.active {
	background: #e8f0fe !important;
	color: #1967d2 !important;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35) !important;
	border-color: transparent !important;
}

.gm-maps-shell .gm-map-chip-btn.is-labeled {
	padding: 0 0 0 10px !important;
	max-width: min(200px, calc(100vw - 96px));
}

.gm-maps-shell .gm-map-chip-btn.is-labeled .gm-map-chip-text {
	opacity: 1;
	max-width: 110px;
}

.gm-maps-shell .gm-map-chip-btn.is-labeled iconify-icon,
.gm-maps-shell .gm-map-chip-btn.is-active iconify-icon,
.gm-maps-shell .gm-map-chip-btn.active iconify-icon {
	color: #1967d2 !important;
}

.gm-maps-shell .gm-map-right-stack .gm-map-chip-btn.mapbox-controls-toggle {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	min-width: var(--gm-map-ctrl-btn-size);
}

.gm-maps-shell .gm-map-icon-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	float: none !important;
	width: var(--gm-map-ctrl-btn-size) !important;
	height: var(--gm-map-ctrl-btn-size) !important;
	min-width: var(--gm-map-ctrl-btn-size);
	padding: 0 !important;
	border: none !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 0 0 1px rgba(60, 64, 67, 0.08) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #5f6368 !important;
	transform: none !important;
	margin: 0 !important;
	z-index: auto !important;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell .gm-map-icon-btn iconify-icon {
	font-size: 18px !important;
	pointer-events: none;
	color: inherit !important;
}

.gm-maps-shell .gm-map-icon-btn:hover {
	background: #f1f3f4 !important;
	color: #202124 !important;
	transform: none !important;
	border-color: transparent !important;
}

.gm-maps-shell .gm-map-icon-btn:hover iconify-icon {
	color: inherit !important;
}

.gm-maps-shell .gm-map-icon-btn.active,
.gm-maps-shell .gm-map-icon-btn.is-active {
	background: #e8f0fe !important;
	color: #1967d2 !important;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35) !important;
	border-color: transparent !important;
	transform: none !important;
}

.gm-maps-shell .gm-map-icon-btn.active iconify-icon,
.gm-maps-shell .gm-map-icon-btn.is-active iconify-icon {
	color: #1967d2 !important;
}

/* app.css gắn absolute cho .mapbox-controls-toggle — phải hủy trong cột phải */
.gm-maps-shell .gm-map-right-stack .mapbox-controls-toggle,
.gm-maps-shell .gm-map-icon-btn.mapbox-controls-toggle,
.gm-maps-shell .gm-map-chip-btn.mapbox-controls-toggle {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
}

.gm-maps-shell .gm-map-tool-divider {
	width: var(--gm-map-tool-w);
	height: 1px;
	background: #dadce0;
	margin: 0;
	align-self: flex-end;
}

.gm-maps-shell .gm-map-top-bar {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--gm-map-ctrl-gap);
}

.gm-maps-shell .gm-map-obs-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: var(--gm-map-ctrl-gap);
	height: var(--gm-map-ctrl-btn-size);
}

.gm-maps-shell .gm-obs-label-btn {
	height: var(--gm-map-ctrl-btn-size);
	min-width: var(--gm-map-ctrl-btn-size);
	max-width: var(--gm-map-ctrl-btn-size);
	padding: 0;
	border: none;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 0 0 1px rgba(60, 64, 67, 0.08);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: #5f6368;
	pointer-events: auto;
	overflow: hidden;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, max-width 0.2s ease, padding 0.2s ease, box-shadow 0.15s ease;
}

.gm-maps-shell .gm-obs-label-text {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: opacity 0.15s ease, max-width 0.2s ease;
}

.gm-maps-shell .gm-obs-label-icon {
	flex: 0 0 var(--gm-map-ctrl-btn-size);
	width: var(--gm-map-ctrl-btn-size);
	height: var(--gm-map-ctrl-btn-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gm-maps-shell .gm-obs-label-btn iconify-icon {
	font-size: 17px;
	pointer-events: none;
	color: inherit;
}

.gm-maps-shell .gm-obs-label-btn:hover {
	background: #f1f3f4;
	color: #202124;
}

/* Bật: hiện text bên cạnh icon */
.gm-maps-shell .gm-obs-label-btn.is-active,
.gm-maps-shell .gm-obs-label-btn.active {
	padding: 0 0 0 10px;
	max-width: min(220px, calc(100vw - 120px));
	background: #e8f0fe;
	color: #1967d2;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell .gm-obs-label-btn.is-active .gm-obs-label-text,
.gm-maps-shell .gm-obs-label-btn.active .gm-obs-label-text {
	opacity: 1;
	max-width: 148px;
	pointer-events: auto;
}

.gm-maps-shell .gm-obs-label-btn.is-active iconify-icon,
.gm-maps-shell .gm-obs-label-btn.active iconify-icon {
	color: #1967d2;
}

.gm-maps-shell .gm-obs-label-btn.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Legacy FAB host — không còn dùng layout riêng */
.gm-map-fabs {
	display: none !important;
}

.gm-maps-shell .gm-obs-label-toggles {
	display: none !important;
}

@media (max-width: 991.98px) {
	/* 6 nút chip + Thời tiết/Nền + Zoom */
	.gm-maps-shell {
		--gm-map-tool-cols: 1;
		--gm-map-tool-h: calc(
			(var(--gm-map-ctrl-btn-size) + var(--gm-map-ctrl-gap)) * var(--gm-map-mobile-chip-count, 6)
			- var(--gm-map-ctrl-gap)
		);
		--gm-map-right-stack-h: var(--gm-map-tool-h);
		--gm-map-tool-w: var(--gm-map-ctrl-btn-size);
	}

	.gm-maps-shell .gm-map-right-stack {
		top: var(--gm-map-ctrl-top, 12px);
		right: var(--gm-map-ctrl-right, 10px);
	}

	.gm-maps-shell .gm-map-top-bar {
		align-items: flex-end;
	}

	.gm-maps-shell .gm-map-tool-group {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: var(--gm-map-ctrl-gap);
		width: var(--gm-map-ctrl-btn-size);
		min-width: var(--gm-map-ctrl-btn-size);
	}

	.gm-maps-shell .gm-map-tool-row {
		display: contents;
	}

	.gm-maps-shell .gm-map-tool-row--zoom {
		display: flex !important;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--gm-map-ctrl-gap);
		position: fixed;
		top: calc(
			var(--gm-map-ctrl-top, 12px)
			+ (var(--gm-map-ctrl-btn-size) + var(--gm-map-ctrl-gap)) * calc(var(--gm-map-mobile-chip-count, 6) + 2)
		);
		right: var(--gm-map-ctrl-right, 10px);
		left: auto;
		bottom: auto;
		z-index: 10085;
		width: var(--gm-map-ctrl-btn-size);
		min-width: var(--gm-map-ctrl-btn-size);
		pointer-events: auto;
	}

	.gm-maps-shell .gm-map-tool-spacer,
	.gm-maps-shell #gmOrbitLightToggle,
	.gm-maps-shell .gm-map-info-btn,
	.gm-maps-shell #gmMapInfoBtn {
		display: none !important;
		visibility: hidden;
		pointer-events: none;
	}

	.gm-maps-shell #gmFacilityQueryToggle,
	.gm-maps-shell #gmRainPointQueryToggle,
	.gm-maps-shell #gmRiceMapToggle,
	.gm-maps-shell #gmRiverPathToggle,
	.gm-maps-shell .gm-river-chip-wrap,
	.gm-maps-shell #gmPlacenameChipWrap,
	.gm-maps-shell #gmPlacenameToggle {
		display: inline-flex !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.gm-maps-shell #gmPlacenameChipWrap,
	.gm-maps-shell .gm-river-chip-wrap,
	.gm-maps-shell #gmFacilityQueryToggle,
	.gm-maps-shell #gmRainPointQueryToggle,
	.gm-maps-shell #gmRiceMapToggle {
		width: var(--gm-map-ctrl-btn-size);
		min-width: var(--gm-map-ctrl-btn-size);
	}

	.gm-maps-shell .gm-obs-label-text {
		font-size: 11px;
		max-width: 110px;
	}

	.gm-maps-shell .mapbox-controls-panel {
		top: 12px;
		right: calc(10px + var(--gm-map-tool-w) + 8px);
		max-width: min(260px, calc(100vw - 88px));
	}

	.gm-maps-shell .gm-map-right-stack .mapbox-controls-toggle,
	.gm-maps-shell .gm-map-icon-btn.mapbox-controls-toggle,
	.gm-maps-shell .gm-map-chip-btn.mapbox-controls-toggle,
	.gm-maps-shell .gm-map-chip-btn,
	.gm-maps-shell .gm-map-icon-btn {
		position: static !important;
		top: auto !important;
		right: auto !important;
		width: var(--gm-map-ctrl-btn-size) !important;
		height: var(--gm-map-ctrl-btn-size) !important;
		min-width: var(--gm-map-ctrl-btn-size) !important;
		max-width: var(--gm-map-ctrl-btn-size) !important;
		padding: 0 !important;
		justify-content: center !important;
	}

	.gm-maps-shell .gm-map-chip-btn.is-labeled,
	.gm-maps-shell .gm-map-chip-btn.is-active.is-labeled,
	.gm-maps-shell .gm-map-chip-btn.active.is-labeled {
		max-width: var(--gm-map-ctrl-btn-size) !important;
		min-width: var(--gm-map-ctrl-btn-size) !important;
		width: var(--gm-map-ctrl-btn-size) !important;
		padding: 0 !important;
	}

	.gm-maps-shell .gm-map-chip-text,
	.gm-maps-shell .gm-map-chip-btn.is-labeled .gm-map-chip-text {
		display: none !important;
		opacity: 0 !important;
		max-width: 0 !important;
	}

	.gm-maps-shell .gm-map-chip-btn .gm-map-chip-icon {
		margin: 0 !important;
	}

	.gm-maps-shell .gm-orbit-light-pad {
		display: none !important;
	}
}

/* System info modal — luôn trên cùng (ngoài stacking của #app / flyout) */
body.gm-info-modal-open {
	overflow: hidden !important;
}

.gm-info-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}

.gm-info-modal.gm-info-modal--closed {
	display: none !important;
}

.gm-info-modal.is-open {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.gm-info-modal.is-open.gm-info-modal--closed {
	display: flex !important;
}

.gm-info-modal.hidden {
	display: none !important;
}

@media (max-width: 991.98px) {
	.gm-info-modal.is-open {
		align-items: flex-end;
		padding: 16px 12px;
	}

	.gm-info-modal-dialog {
		width: 100%;
		max-height: min(78vh, 560px);
		border-radius: 16px 16px 12px 12px;
		padding: 22px 18px 16px;
	}

	.gm-info-modal-header {
		padding: 0 28px 12px 0;
	}

	.gm-info-modal-title {
		font-size: 14px;
		line-height: 1.35;
	}
}

.gm-info-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(32, 33, 36, 0.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gm-info-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(520px, 100%);
	max-height: min(88vh, 640px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	padding: 28px 28px 20px;
	transform: none;
	color: #202124;
}

.gm-info-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #5f6368;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.gm-info-modal-close:hover {
	background: #f1f3f4;
	color: #202124;
}

.gm-info-modal-close iconify-icon {
	font-size: 20px;
}

.gm-info-modal-header {
	padding: 0 24px 16px;
}

.gm-info-modal-header-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gm-info-modal-logo-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gm-info-modal-logo {
	display: block;
	max-width: 72px;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gm-info-modal-logo-fallback {
	display: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #e8f0fe;
	color: #1a73e8;
	flex-shrink: 0;
}

.gm-info-modal-logo-fallback.is-visible {
	display: flex;
}

.gm-info-modal-logo-fallback iconify-icon {
	font-size: 30px;
}

.gm-info-modal-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: left;
	color: #202124;
}

.gm-info-modal-body {
	padding: 0 4px 20px;
}

.gm-info-modal-body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #3c4043;
	text-align: justify;
}

.gm-info-modal-footer {
	border-top: 1px solid #e8eaed;
	padding-top: 14px;
	text-align: center;
}

.gm-info-modal-footer p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #80868b;
}

.gm-maps-shell .bacninh-map-home-ctrl {
	display: none !important;
}

/* Low-resolution / short screens: keep stack thin, use bottom sheet for list */
@media (max-height: 800px) {
	.gm-search-stack {
		top: 8px;
		gap: 6px;
	}

	.gm-search-card {
		min-height: 42px;
		padding: 2px 4px;
	}

	.gm-group-btn,
	.gm-chip {
		max-height: 30px;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 11px;
	}

	.gm-maps-shell .mailbox-toolbar {
		top: 100px;
		max-height: 40px;
	}

	.gm-maps-shell .mailbox-sidebar,
	.gm-maps-shell #tab-list,
	.gm-maps-shell #tab-detail,
	.gm-maps-shell #tab-science {
		bottom: 12px;
	}
}

@media (max-width: 991.98px) {
	.gm-maps-shell .mailbox-toolbar {
		top: auto;
		bottom: 96px;
		left: 12px;
		width: calc(100vw - 24px);
		border-radius: 12px 12px 0 0;
	}

	.gm-maps-shell .mailbox-sidebar,
	.gm-maps-shell #tab-list,
	.gm-maps-shell #tab-detail,
	.gm-maps-shell #tab-science {
		left: 12px;
		right: 12px;
		width: auto;
		top: auto;
		bottom: 12px;
		max-height: 42vh;
		border-radius: 0 0 16px 16px;
	}

	.gm-maps-shell .gm-list-jump-btn {
		margin-right: 10px;
		bottom: 10px;
		width: 36px;
		height: 36px;
	}

	.gm-maps-shell.gm-detail-open #map-container .gm-list-overlay,
	.gm-maps-shell.gm-detail-open .mailbox-sidebar {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.gm-maps-shell.gm-detail-open .gm-map-layer-peeks,
	.gm-maps-shell.gm-detail-open .gm-map-tool-row--zoom {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.gm-maps-shell.gm-layer-active.gm-detail-open #tab-detail {
		display: flex !important;
		flex-direction: column;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		top: var(--gm-list-top, 72px) !important;
		bottom: 12px !important;
		height: var(--gm-panel-h, auto) !important;
		max-height: none !important;
		z-index: 60;
		border-radius: 16px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	}

	/* Mobile: tiêu đề 1 dòng, căn trái sát ← */
	.gm-maps-shell #tab-detail .mailbox-detail-header.gm-detail-title-bar {
		padding: 4px 8px 4px 2px !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 2px !important;
		min-height: 36px !important;
		height: auto !important;
		max-height: 40px;
		box-sizing: border-box;
		text-align: left !important;
	}

	.gm-maps-shell #tab-detail .btn-back-mobile {
		display: none !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-close-btn {
		order: -1;
		width: 28px !important;
		height: 28px !important;
		min-width: 28px;
		margin: 0 !important;
		align-self: center !important;
		flex-shrink: 0;
	}

	.gm-maps-shell #tab-detail .gm-detail-close-btn iconify-icon {
		font-size: 15px !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-row {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start !important;
		gap: 4px;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		min-height: 0;
		text-align: left !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-row h5,
	.gm-maps-shell #tab-detail .gm-detail-title-row #detailStationName,
	.gm-maps-shell #tab-detail #detailStationName,
	.gm-maps-shell #tab-detail .mailbox-detail-header.gm-detail-title-bar #detailStationName,
	.gm-maps-shell #tab-detail .mailbox-detail-header h5 {
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 100%;
		text-align: left !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-meta {
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		width: auto !important;
		min-width: 0;
		flex: 0 1 auto !important;
		overflow: hidden;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-meta.is-empty {
		display: none !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-meta:not(.is-empty)::before {
		content: '·';
		margin-right: 4px;
		color: #9aa0a6;
		flex-shrink: 0;
		font-size: 12px;
		line-height: 1;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-subtitle {
		font-size: 11px !important;
		font-weight: 500;
		line-height: 1.2 !important;
		color: #80868b;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0 !important;
	}

	.gm-maps-shell #tab-detail .gm-detail-title-coords {
		display: none !important;
	}

	.gm-maps-shell #tab-detail .mailbox-detail-content:has(.gm-detail-tabs-root),
	.gm-maps-shell #tab-detail .mailbox-detail-content {
		padding: 0 10px 48px 10px !important;
		scroll-padding-bottom: 40px;
	}

	.gm-maps-shell #tab-detail .gm-detail-tabs-outer {
		margin: 0 0 6px !important;
		padding: 0 !important;
		border-radius: 8px;
		min-height: 0;
	}

	.gm-maps-shell #tab-detail .gm-detail-tabs {
		padding: 2px !important;
		gap: 2px;
	}

	.gm-maps-shell #tab-detail .gm-detail-tab {
		padding: 5px 8px !important;
		gap: 4px;
		border-radius: 6px;
		font-size: 11px !important;
		line-height: 1.2;
	}

	.gm-maps-shell #tab-detail .gm-detail-tab iconify-icon {
		font-size: 13px !important;
	}

	.gm-maps-shell #tab-detail .iot-obs-chart-card .station-info-card-title,
	.gm-maps-shell #tab-detail .iot-obs-chart-header h5 {
		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		margin: 0 !important;
		text-transform: none;
	}

	.gm-maps-shell #tab-detail .iot-obs-chart-header-main {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.gm-maps-shell #tab-detail .iot-obs-chart-header-main .d-flex {
		flex-wrap: nowrap;
		gap: 6px !important;
	}

	.gm-right-rail {
		top: auto;
		bottom: 12px;
	}

	.gm-fab-coords {
		display: none;
	}

	.gm-chip-label {
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ===== 2026 Google-like interaction overrides ===== */
.gm-search-stack {
	width: calc(100vw - var(--gm-rail-w) - 24px);
	max-width: calc(100vw - var(--gm-rail-w) - 24px);
	/* Chừa chỗ 3 nút quan trắc + cột công cụ 2×2 góc phải */
	padding-right: calc(
		var(--gm-map-ctrl-btn-size) * 5
		+ var(--gm-map-ctrl-gap) * 4
		+ var(--gm-map-ctrl-right)
		+ 16px
	);
	box-sizing: border-box;
}

.gm-top-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.gm-left-panel {
	flex: 0 1 auto;
	width: var(--gm-left-panel-w, 400px);
	max-width: min(var(--gm-left-panel-w, 400px), calc(100% - 96px));
	min-width: min(220px, 100%);
	box-sizing: border-box;
}

.gm-search-card {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: 16px;
	position: relative;
	z-index: 2;
}

.gm-left-panel.has-search-results .gm-search-card {
	border-radius: 16px 16px 0 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.gm-search-results {
	display: none;
	flex-direction: column;
	width: 100%;
	max-height: min(52vh, 420px);
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .12);
	pointer-events: auto;
	z-index: 1;
	scrollbar-width: thin;
	scrollbar-color: #dadce0 transparent;
}

.gm-left-panel.has-search-results .gm-search-results,
.gm-search-results.is-open {
	display: flex;
}

.gm-search-results-status {
	padding: 14px 16px;
	font-size: 13px;
	color: #5f6368;
}

.gm-search-results-group {
	border-top: 1px solid #f1f3f4;
}

.gm-search-results-group:first-child {
	border-top: 0;
}

.gm-search-results-group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5f6368;
	background: #f8f9fa;
	position: sticky;
	top: 0;
	z-index: 1;
}

.gm-search-results-group-count {
	font-weight: 600;
	font-size: 11px;
	color: #80868b;
	letter-spacing: 0;
	text-transform: none;
}

.gm-search-result-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	border: 0;
	background: #fff;
	text-align: left;
	padding: 10px 14px;
	cursor: pointer;
	color: #202124;
	transition: background .12s ease;
}

.gm-search-result-item:hover,
.gm-search-result-item.is-active {
	background: #e8f0fe;
}

.gm-search-result-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e8f0fe;
	color: #1a73e8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.gm-search-result-icon iconify-icon {
	font-size: 15px;
}

.gm-search-result-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.gm-search-result-name {
	display: block;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #202124;
}

.gm-search-result-meta {
	display: block;
	width: 100%;
	margin-top: 0;
	padding-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #5f6368;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-maps-shell.gm-layer-active .gm-search-card {
	border-radius: 16px 16px 0 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.gm-maps-shell.gm-panel-collapsed .gm-search-card {
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .12);
}

.gm-left-panel.has-search-results.gm-maps-shell.gm-panel-collapsed .gm-search-card,
.gm-left-panel.has-search-results .gm-search-card {
	border-radius: 16px 16px 0 0;
}

.gm-panel-collapse-btn iconify-icon {
	font-size: 16px;
	transition: transform .2s ease;
}

.gm-nav-strip {
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 2px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: visible;
	pointer-events: auto;
	box-sizing: border-box;
	transition: max-width .22s ease;
}

/* Toggle chip / rail nằm trong search card — dùng style gm-search-action */
.gm-search-card .gm-nav-toggle,
.gm-search-card .gm-rail-toggle {
	width: var(--gm-control-hit);
	height: var(--gm-control-hit);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #3c4043;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background .15s ease, color .15s ease;
}

.gm-search-card .gm-nav-toggle:hover,
.gm-search-card .gm-rail-toggle:hover {
	background: #f1f3f4;
	color: #1a73e8;
	box-shadow: none;
}

.gm-search-card .gm-nav-toggle:focus-visible,
.gm-search-card .gm-rail-toggle:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.gm-search-card .gm-nav-toggle iconify-icon,
.gm-search-card .gm-rail-toggle iconify-icon {
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

.gm-search-card .gm-nav-toggle[aria-expanded='false'],
.gm-search-card .gm-rail-toggle[aria-expanded='false'] {
	color: #1a73e8;
	background: #e8f0fe;
}

.gm-nav-strip.gm-nav-strip--collapsed {
	display: none !important;
}

.gm-maps-shell.gm-layer-active .gm-nav-strip {
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.gm-nav-back {
	flex: 0 0 auto;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #1967d2;
	padding: 0 12px 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--gm-font-sm);
	font-weight: 600;
	box-shadow:
		0 1px 2px rgba(60, 64, 67, 0.3),
		0 2px 6px 2px rgba(60, 64, 67, 0.15);
	cursor: pointer;
	white-space: nowrap;
}

.gm-nav-back:hover {
	background: #f8f9fa;
	box-shadow:
		0 1px 3px rgba(60, 64, 67, 0.35),
		0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

.gm-nav-back iconify-icon {
	font-size: 16px;
	color: #1967d2;
}

.gm-nav-scroller {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	overflow: visible;
}

.gm-nav-row {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	padding: 4px 2px;
}

.gm-nav-row::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.gm-nav-scroll {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #3c4043;
	box-shadow:
		0 1px 2px rgba(60, 64, 67, 0.35),
		0 2px 8px 3px rgba(60, 64, 67, 0.18);
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	pointer-events: auto;
}

.gm-nav-scroll iconify-icon {
	font-size: 16px;
	line-height: 1;
}

.gm-nav-scroll:hover {
	background: #f8f9fa;
	color: #1a73e8;
	box-shadow:
		0 1px 3px rgba(60, 64, 67, 0.4),
		0 4px 10px 3px rgba(60, 64, 67, 0.2);
}

.gm-nav-scroll:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.gm-nav-scroll--prev {
	left: 2px;
}

.gm-nav-scroll--next {
	right: 2px;
}

.gm-nav-scroller.gm-nav-scroller--can-prev .gm-nav-scroll--prev,
.gm-nav-scroller.gm-nav-scroller--can-next .gm-nav-scroll--next {
	display: inline-flex;
}

/* Fade nhẹ trên map — không dùng nền trắng đặc */
.gm-nav-scroller.gm-nav-scroller--can-prev::before,
.gm-nav-scroller.gm-nav-scroller--can-next::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 36px;
	z-index: 2;
	pointer-events: none;
}

.gm-nav-scroller.gm-nav-scroller--can-prev::before {
	left: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

.gm-nav-scroller.gm-nav-scroller--can-next::after {
	right: 0;
	background: linear-gradient(
		270deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

.gm-nav-btn {
	flex: 0 0 auto;
	max-height: 36px;
	min-height: 36px;
	font-size: var(--gm-font-sm);
}

.gm-group-btn,
.gm-chip {
	font-size: var(--gm-font-sm);
	padding: clamp(6px, 0.45vw, 8px) clamp(10px, 0.8vw, 14px);
	max-height: 36px;
	min-height: 36px;
}

.gm-group-btn iconify-icon,
.gm-chip iconify-icon,
.gm-nav-btn iconify-icon {
	font-size: clamp(15px, 0.35vw + 13px, 17px);
}

.gm-group-row,
.gm-chip-row {
	display: none !important;
}

.gm-maps-shell .mailbox-toolbar {
	display: none !important;
}

.gm-maps-shell .mailbox-sidebar,
.gm-maps-shell.gm-layer-active #map-container .gm-list-overlay {
	top: var(--gm-list-top, 72px);
	bottom: var(--gm-panel-bottom, 12px);
	height: var(--gm-panel-h, auto);
	max-height: var(--gm-panel-h, none);
	box-sizing: border-box;
}

.gm-maps-shell #tab-detail,
.gm-maps-shell #tab-science {
	top: var(--gm-list-top, 72px);
	bottom: var(--gm-panel-bottom, 12px);
	height: var(--gm-panel-h, auto);
	max-height: var(--gm-panel-h, none);
	box-sizing: border-box;
}

.gm-maps-shell .mailbox-sidebar,
.gm-maps-shell #tab-list,
.gm-maps-shell #tab-detail,
.gm-maps-shell #tab-science {
	top: var(--gm-list-top, 72px);
}

.gm-maps-shell.gm-layer-active .mailbox-sidebar {
	width: var(--gm-left-panel-w, 400px);
}

.gm-maps-shell.gm-layer-active #map-container .gm-list-overlay {
	position: absolute !important;
	top: var(--gm-list-top, 72px);
	bottom: 12px;
	z-index: 45;
	display: none;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	box-sizing: border-box;
	border-top: 0;
	transform-origin: top center;
	transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
	pointer-events: auto;
}

.gm-maps-shell.gm-layer-active:not(.gm-panel-collapsed) #map-container .gm-list-overlay.visible,
.gm-maps-shell.gm-list-open #map-container .gm-list-overlay {
	display: flex !important;
}

.gm-maps-shell .mailbox-sidebar .gm-list-overlay-search,
.gm-maps-shell #map-container .gm-list-overlay-search {
	flex-shrink: 0;
	padding: var(--gm-panel-pad-y) var(--gm-panel-pad-x);
	border-bottom: 1px solid #e8eaed;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 4;
	pointer-events: auto;
	box-shadow: 0 1px 0 #e8eaed;
}

/* Form kịch bản (Ngập LV, Ngập ĐT, …): ẩn ô Lọc theo tên */
.gm-maps-shell #mailboxSidebar.gm-scenario-form-mode .gm-list-overlay-search,
.gm-maps-shell #map-container .gm-list-overlay.gm-scenario-form-mode .gm-list-overlay-search,
.gm-maps-shell #mailboxSidebar:has(.namrom-flood-basin-form) .gm-list-overlay-search,
.gm-maps-shell #mailboxSidebar:has(.namrom-flood-urban-form) .gm-list-overlay-search,
.gm-maps-shell #mailboxSidebar:has(#stationsList [data-namrom-panel]) .gm-list-overlay-search {
	display: none !important;
}

/* Vận hành / mọi lớp có chú giải: sát ô tìm kiếm với khối sticky */
.gm-maps-shell #map-container .gm-list-overlay:has(.gm-list-sticky-head) .gm-list-overlay-search {
	padding-bottom: 6px;
	border-bottom: none;
	box-shadow: none;
}

.gm-maps-shell #map-container .gm-list-overlay-search .input-group,
.gm-maps-shell #map-container .gm-list-overlay-search .form-control,
.gm-maps-shell #map-container .gm-list-overlay-search .input-group-text {
	pointer-events: auto;
}

.gm-maps-shell #map-container .gm-list-overlay-search .form-control {
	font-size: var(--gm-font-base);
	padding: clamp(6px, 0.5vw, 8px) clamp(8px, 0.7vw, 10px);
	cursor: text;
}

.gm-maps-shell .mailbox-detail.dragscroll .gm-list-overlay-search,
.gm-maps-shell .mailbox-detail.dragscroll #stationSearchInput {
	pointer-events: auto !important;
	touch-action: manipulation;
	user-select: text !important;
}

.gm-maps-shell .mailbox-sidebar .mailbox-list,
.gm-maps-shell #map-container .gm-list-overlay .mailbox-list,
.gm-maps-shell #stationsList {
	flex: 0 0 auto !important;
	overflow: visible !important;
	overflow-y: visible !important;
	min-height: auto !important;
	padding: 0;
	margin: 0;
}

/* Chú giải / toolbar trong list — không tạo vùng cuộn riêng */
.gm-maps-shell .mailbox-sidebar .rain-legend,
.gm-maps-shell .mailbox-sidebar .trambom-color-legend,
.gm-maps-shell .mailbox-sidebar .trambom-op-warning-legend,
.gm-maps-shell .mailbox-sidebar .pctt-capde-legend,
.gm-maps-shell .mailbox-sidebar .trambom-list-toolbar {
	overflow: visible;
	pointer-events: auto;
}

.gm-maps-shell #map-container .gm-list-overlay .mailbox-list .trambom-list-toolbar {
	margin: 0;
	padding: var(--gm-panel-pad-y) var(--gm-panel-pad-x) 0;
	gap: 0;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	font-size: var(--gm-font-sm);
}

.gm-maps-shell #map-container .gm-list-overlay .mailbox-list .trambom-list-toolbar > .mailbox-desc {
	display: none;
}

/* Công trình trên kênh: chip lọc dễ đọc trên nền sáng */
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn {
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	box-shadow: none;
	transform: none;
}
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn .kenh-congtrinh-btn-icon {
	background: #e8f0fe;
	color: #1a73e8;
}
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn .kenh-congtrinh-btn-label {
	color: inherit;
	white-space: nowrap;
}
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn:hover {
	background: #e8f0fe;
	border-color: #1a73e8;
	color: #174ea6;
	transform: none;
	box-shadow: none;
}
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn.active {
	background: #0f9d58;
	border-color: #0b8043;
	color: #fff;
	box-shadow: 0 1px 3px rgba(11, 128, 67, 0.25);
	transform: none;
}
.gm-maps-shell .ctrk-mgmt-toolbar .kenh-congtrinh-btn.active .kenh-congtrinh-btn-icon {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}
.gm-maps-shell .mailbox-list-item .ctrk-list-meta .hochua-list-muted {
	color: #5f6368;
	font-weight: 500;
}
.gm-maps-shell .mailbox-list-item.active .ctrk-list-meta .hochua-list-muted {
	color: rgba(255, 255, 255, 0.75);
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head,
.gm-maps-shell #map-container .gm-list-overlay .trambom-op-list-sticky {
	position: sticky;
	top: var(--gm-list-search-h, 52px);
	z-index: 3;
	background: #fff;
	padding: 0 var(--gm-panel-pad-x) 6px;
	margin: 0;
	box-shadow: 0 1px 0 #e8eaed;
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-list-toolbar,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .kttv-list-count,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .rain-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-color-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .pctt-capde-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-op-warning-legend,
.gm-maps-shell #map-container .gm-list-overlay .trambom-op-list-sticky .trambom-op-warning-legend {
	margin: 0 0 6px;
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-list-toolbar {
	padding: 0 0 4px !important;
	margin: 0 0 6px !important;
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .kttv-list-count {
	padding: 2px 0 6px !important;
	margin: 0 !important;
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .rain-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-color-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .pctt-capde-legend,
.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > .trambom-op-warning-legend {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.gm-maps-shell #map-container .gm-list-overlay .gm-list-sticky-head > *:last-child {
	margin-bottom: 0;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend {
	margin: 8px var(--gm-panel-pad-x) 4px;
	padding: 8px 10px;
	background: #f1f3f4;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	color: #5f6368 !important;
	font-size: 11px !important;
	line-height: 1.45;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend-title {
	color: #202124 !important;
	font-size: 11px !important;
	font-weight: 700;
	min-width: 0;
	flex: 1 1 auto;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend .kttv-popup-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 500;
	color: #5f6368;
	flex: 0 0 auto;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend .kttv-popup-toggle input {
	margin: 0;
	cursor: pointer;
	accent-color: #1a73e8;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 2px;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend-text {
	color: #3c4043 !important;
}

.gm-maps-shell #map-container .gm-list-overlay .trambom-op-warning-legend .rain-dot {
	flex-shrink: 0;
	margin-top: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

.gm-maps-shell #map-container .gm-list-overlay .pctt-capde-legend {
	margin-top: 0;
	background: #f1f3f4;
	border: 1px solid #e8eaed;
	color: #5f6368;
	font-size: var(--gm-font-sm);
}

.gm-maps-shell #map-container .gm-list-overlay .pctt-capde-legend-label {
	color: #202124;
}

.gm-maps-shell #map-container .gm-list-overlay .pctt-capde-legend-muted {
	color: #80868b;
}

.gm-maps-shell.gm-layer-active #tab-detail {
	left: calc(var(--gm-rail-w) + 12px + var(--gm-left-panel-w, 400px) + 12px);
	width: min(var(--gm-detail-panel-w, 460px), calc(100vw - var(--gm-rail-w) - var(--gm-left-panel-w, 400px) - 120px));
	font-size: var(--gm-font-base);
	display: none !important;
	border-radius: 0 0 16px 16px;
}

.gm-maps-shell #tab-detail .mailbox-detail-header h5,
.gm-maps-shell #tab-detail #detailStationName {
	font-size: var(--gm-font-title);
}

.gm-maps-shell.gm-layer-active.gm-detail-open #tab-detail {
	/* Keep flex so .mailbox-detail-content can scroll; block clips bottom stats */
	display: flex !important;
	flex-direction: column;
}

.gm-maps-shell.gm-layer-active #tab-list {
	display: none !important;
}

.gm-maps-shell #tab-list {
	display: none !important;
}

.gm-maps-shell #tab-detail .mailbox-detail-header,
.gm-maps-shell #tab-detail .mailbox-detail-content,
.gm-maps-shell #tab-detail .card,
.gm-maps-shell #tab-detail .card-body {
	background: #fff !important;
	color: #202124 !important;
}

.gm-maps-shell #tab-detail .text-white,
.gm-maps-shell #tab-detail .text-white-50,
.gm-maps-shell #tab-detail .text-opacity-50,
.gm-maps-shell #tab-detail .text-opacity-60,
.gm-maps-shell #tab-detail .text-opacity-75,
.gm-maps-shell #tab-detail .text-muted {
	color: #5f6368 !important;
}

.gm-maps-shell #tab-detail .station-info-label,
.gm-maps-shell #tab-detail .station-info-value,
.gm-maps-shell #tab-detail .station-header-card,
.gm-maps-shell #tab-detail .station-info-section,
.gm-maps-shell #tab-detail h5,
.gm-maps-shell #tab-detail h6,
.gm-maps-shell #tab-detail p,
.gm-maps-shell #tab-detail label,
.gm-maps-shell #tab-detail td,
.gm-maps-shell #tab-detail th {
	color: #202124;
}

.gm-maps-shell #tab-detail span[style*="rgba(255,255,255"],
.gm-maps-shell #tab-detail span[style*="rgba(255, 255, 255"],
.gm-maps-shell #tab-detail div[style*="color:rgba(255,255,255"],
.gm-maps-shell #tab-detail div[style*="color: rgba(255,255,255"] {
	color: #5f6368 !important;
}

.gm-maps-shell #tab-detail .bg-dark,
.gm-maps-shell #tab-detail .border-dark {
	background: #f1f3f4 !important;
	border-color: #dadce0 !important;
	color: #202124 !important;
}

.gm-maps-shell #tab-detail .form-control.bg-dark,
.gm-maps-shell #tab-detail .form-control.text-white {
	background: #fff !important;
	border-color: #dadce0 !important;
	color: #202124 !important;
}

.gm-maps-shell .mapboxgl-marker.gm-selected-marker,
.gm-maps-shell .gm-selected-marker {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
	z-index: 40;
}

/* Detail panel — Google-style tabs (all data types) */
.gm-maps-shell #tab-detail .gm-detail-tabs-root {
	padding: 0;
}

/* Compact hero header */
.gm-maps-shell #tab-detail .gm-detail-hero.station-header-card,
.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-header-card.gm-detail-hero {
	background: transparent !important;
	border: none !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero {
	background: transparent !important;
	border: none !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content.gm-detail-no-title {
	display: block;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content.gm-detail-no-title > .station-title-section {
	display: none !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header.gm-detail-no-title {
	display: block;
	gap: 0;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header.gm-detail-no-title > .station-title-section {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header.gm-detail-no-title .gm-detail-hero-actions-row {
	grid-column: unset;
	grid-row: unset;
	margin-top: 0;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: start;
	gap: 8px 12px;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header .station-title-section {
	grid-column: 1;
	grid-row: 1;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header .station-status-badge {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header .gm-detail-hero-actions,
.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header .pctt-cotkm-header-actions {
	grid-column: unset;
	grid-row: unset;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) .station-title-section {
	flex: 1 1 180px;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) .station-status-badge {
	flex-shrink: 0;
	margin-top: 2px;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) .trambom-header-actions {
	flex: 1 1 100%;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-title-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-title-section h2 {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #202124 !important;
	line-height: 1.25 !important;
	display: none !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gm-maps-shell #tab-detail .gm-detail-chip {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: #e8f0fe;
	color: #1967d2;
	line-height: 1.3;
}

.gm-maps-shell #tab-detail .gm-detail-chip--muted {
	background: #f1f3f4;
	color: #5f6368;
	font-weight: 500;
}

.gm-maps-shell #tab-detail .gm-detail-hero-actions {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;
	margin: 0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero-actions-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	flex: 1 1 100%;
	margin-top: 0;
}

.gm-maps-shell #tab-detail .gm-detail-hero .pctt-cotkm-top-header .gm-detail-hero-actions-row {
	grid-column: 1 / -1;
	grid-row: 2;
}

.gm-maps-shell #tab-detail .gm-detail-hero-actions-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tab-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: #5f6368;
	cursor: pointer;
	user-select: none;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 4px 0 4px 8px;
}

.gm-maps-shell #tab-detail .gm-detail-tab-mode-checkbox {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: #1a73e8;
	cursor: pointer;
	flex-shrink: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tab-mode-toggle:hover {
	color: #1a73e8;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) .gm-detail-hero-actions-row {
	margin-top: 0;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-header-content:not(.pctt-cotkm-top-header) {
	flex-wrap: wrap;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer--wrap {
	align-items: flex-start;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer--wrap .gm-detail-tabs-scroll {
	display: none !important;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer--wrap .gm-detail-tabs {
	flex-wrap: wrap;
	overflow: visible;
	row-gap: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer--wrap .gm-detail-tab {
	white-space: normal;
	text-align: center;
	line-height: 1.25;
	max-width: 100%;
}

.gm-maps-shell #tab-detail .station-status-badge,
.gm-maps-shell #tab-detail .gm-detail-hero .station-status-badge,
.gm-maps-shell #tab-detail .gm-detail-hero-actions-left .station-status-badge {
	display: none !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-status-badge {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-status-badge.active {
	background: #e6f4ea !important;
	color: #137333 !important;
	border-color: #ceead6 !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-status-badge.maintenance {
	background: #fef7e0 !important;
	color: #b06000 !important;
	border-color: #fde293 !important;
}

.gm-maps-shell #tab-detail .gm-detail-hero .station-status-badge.inactive {
	background: #fce8e6 !important;
	color: #c5221f !important;
	border-color: #f5c6c2 !important;
}

.gm-maps-shell #tab-detail .trambom-edit-btn,
.gm-maps-shell #tab-detail .trambom-report-btn,
.gm-maps-shell #tab-detail .iot-rain-report-btn,
.gm-maps-shell #tab-detail .iot-river-report-btn,
.gm-maps-shell #tab-detail .pctt-cotkm-report-btn,
.gm-maps-shell #tab-detail .pctt-congquade-report-btn {
	margin: 0 !important;
	padding: 7px 14px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer;
	line-height: 1.2;
}

.gm-maps-shell #tab-detail .trambom-edit-btn {
	background: #fff !important;
	color: #1a73e8 !important;
	border: 1px solid #dadce0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-cancel-btn {
	background: #fff !important;
	color: #5f6368 !important;
	border: 1px solid #dadce0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-cancel-btn:hover {
	background: #f8f9fa !important;
	border-color: #5f6368 !important;
	color: #202124 !important;
}

.gm-maps-shell #tab-detail .gm-detail-edit-mode .gm-detail-tab-body .trambom-field-cell--empty {
	display: block !important;
}

.gm-maps-shell #tab-detail .gm-detail-edit-mode .gm-detail-tab-body .trambom-field-cell--empty .station-info-label {
	color: #d93025 !important;
}

.gm-maps-shell #tab-detail .gm-detail-edit-mode .gm-detail-tab-body .trambom-field-cell--empty .station-info-value input,
.gm-maps-shell #tab-detail .gm-detail-edit-mode .gm-detail-tab-body .trambom-field-cell--empty .station-info-value textarea {
	border-style: dashed !important;
	background: #fff8f0 !important;
}

.gm-maps-shell #tab-detail .trambom-edit-btn:hover {
	background: #f8f9fa !important;
	border-color: #1a73e8 !important;
}

.gm-maps-shell #tab-detail .trambom-report-btn,
.gm-maps-shell #tab-detail .iot-rain-report-btn,
.gm-maps-shell #tab-detail .iot-river-report-btn,
.gm-maps-shell #tab-detail .pctt-cotkm-report-btn,
.gm-maps-shell #tab-detail .pctt-congquade-report-btn {
	background: #1a73e8 !important;
	color: #fff !important;
	border: 1px solid #1a73e8 !important;
}

.gm-maps-shell #tab-detail .trambom-report-btn:hover,
.gm-maps-shell #tab-detail .iot-rain-report-btn:hover,
.gm-maps-shell #tab-detail .iot-river-report-btn:hover {
	background: #1765cc !important;
	border-color: #1765cc !important;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer {
	display: flex;
	align-items: stretch;
	margin: 0 0 4px;
	padding: 0 2px;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	position: sticky;
	top: 0;
	z-index: 40;
	background: #f1f3f4 !important;
	box-shadow: 0 1px 0 rgba(60, 64, 67, 0.08), 0 2px 6px rgba(60, 64, 67, 0.06);
	isolation: isolate;
	overflow: hidden;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-scroll {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	border: none;
	background: transparent;
	color: #5f6368;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: color 0.15s ease, background 0.15s ease;
	z-index: 1;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-outer--overflow .gm-detail-tabs-scroll {
	display: inline-flex;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-scroll:hover:not(:disabled) {
	color: #1a73e8;
	background: rgba(26, 115, 232, 0.08);
}

.gm-maps-shell #tab-detail .gm-detail-tabs-scroll:disabled {
	opacity: 0.35;
	cursor: default;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-scroll iconify-icon {
	font-size: 16px;
}

.gm-maps-shell #tab-detail .gm-detail-tabs {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	scrollbar-width: none;
	border-bottom: none;
	margin: 0;
	padding: 4px;
	background: transparent;
	position: relative;
	z-index: 1;
}

.gm-maps-shell #tab-detail .gm-detail-tabs::-webkit-scrollbar {
	display: none;
}

.gm-maps-shell #tab-detail .gm-detail-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #5f6368;
	font-size: var(--gm-font-sm, 12px);
	font-weight: 500;
	cursor: pointer;
	margin: 0;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #tab-detail .gm-detail-tab iconify-icon {
	font-size: 15px;
	opacity: 0.9;
	color: inherit;
}

.gm-maps-shell #tab-detail .gm-detail-tab:hover {
	color: #174ea6;
	background: rgba(255, 255, 255, 0.7);
	border-color: #dadce0;
}

.gm-maps-shell #tab-detail .gm-detail-tab.active {
	color: #1a73e8;
	background: #fff !important;
	border-color: #dadce0;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}

/* Nội dung tab nằm dưới thanh tab — tránh icon lịch/filter đè lên khi cuộn */
.gm-maps-shell #tab-detail .gm-detail-tab-panels {
	min-height: 0;
	position: relative;
	z-index: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tab-panel .date-input-wrapper,
.gm-maps-shell #tab-detail .gm-detail-tab-panel .date-input-native,
.gm-maps-shell #tab-detail .gm-detail-tab-panel .date-display,
.gm-maps-shell #tab-detail .gm-detail-tab-panel .date-picker-btn {
	z-index: 1 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-panel {
	display: none;
	padding: 12px 0 40px;
	animation: gm-tab-fade 0.18s ease;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body {
	color: #202124;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-fields-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-item,
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #f1f3f4;
	background: transparent !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	border-radius: 0 !important;
	opacity: 1 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-item:last-child,
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell:last-child {
	border-bottom: none;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--empty,
.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-item.trambom-field-cell--empty {
	display: block !important;
	background: #fff3e0 !important;
	border: none !important;
	opacity: 1 !important;
	border-radius: 0;
	padding: 8px 10px !important;
	margin: 4px 0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--empty .station-info-label {
	color: #d93025 !important;
	font-weight: 600 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--empty .station-info-value {
	color: #5f6368 !important;
	background: transparent !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--empty .station-info-value input,
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--empty .station-info-value textarea {
	background: #fff8f0 !important;
	border-color: #ffcc80 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--zero .station-info-value,
.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-item.trambom-field-cell--zero .station-info-value {
	color: #d93025 !important;
	font-weight: 600 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--zero .station-info-value input,
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell--zero .station-info-value textarea {
	color: #d93025 !important;
	font-weight: 600 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-panel.active {
	display: block;
}

@keyframes gm-tab-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-header-card:not(.gm-detail-hero) {
	background: transparent;
	border: none;
	padding: 0 0 8px;
	margin: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-header-card h2 {
	color: #202124 !important;
	font-size: var(--gm-font-title, 15px);
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-info-card {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-info-label {
	color: #5f6368 !important;
	font-size: var(--gm-font-sm, 12px) !important;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-info-value {
	color: #202124 !important;
	font-size: var(--gm-font-base, 13px) !important;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .trambom-fields-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .pctt-edit-input,
.gm-maps-shell #tab-detail .gm-detail-tabs-root textarea.pctt-edit-input,
.gm-maps-shell #tab-detail .gm-detail-tabs-root .trambom-edit-input,
.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-edit-input {
	background: #fff !important;
	border: 1px solid #dadce0 !important;
	color: #202124 !important;
	border-radius: 6px;
	width: 100%;
	font-size: var(--gm-font-base, 13px);
}

.gm-maps-shell #tab-detail .trambom-diadiem-fields {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .trambom-diadiem-map-wrap {
	margin-top: 12px;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.gm-maps-shell #tab-detail .trambom-diadiem-map-wrap .station-location-map {
	min-height: 220px;
	height: 240px;
}

.gm-maps-shell #tab-detail .trambom-diadiem-map-empty {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f1f3f4;
	color: #80868b;
	font-size: 13px;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .trambom-kenh-row {
	display: block;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px 0 8px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-list-meta {
	font-size: 11px;
	font-weight: 600;
	color: #80868b;
	padding: 0 2px 2px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.gm-maps-shell #tab-detail .trambom-kenh-card:hover {
	border-color: #dadce0;
	box-shadow: 0 2px 8px rgba(60, 64, 67, 0.1);
}

.gm-maps-shell #tab-detail .trambom-kenh-card.is-open,
.gm-maps-shell #tab-detail .trambom-kenh-card.is-selected {
	border-color: #aecbfa;
	box-shadow: 0 2px 10px rgba(26, 115, 232, 0.12);
}

.gm-maps-shell #tab-detail .trambom-kenh-card-main {
	padding: 12px 12px 10px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-index {
	flex: 0 0 auto;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 8px;
	background: #e8f0fe;
	color: #1a73e8;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-heading {
	flex: 1 1 auto;
	min-width: 0;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #202124;
	line-height: 1.35;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #f1f3f4;
	color: #5f6368;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-sub {
	margin-top: 3px;
	font-size: 12px;
	color: #80868b;
	line-height: 1.35;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #1a73e8;
	border-radius: 8px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-toggle:hover {
	background: #e8f0fe;
	border-color: #aecbfa;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-toggle iconify-icon {
	font-size: 12px;
	transition: transform 0.15s ease;
}

.gm-maps-shell #tab-detail .trambom-kenh-card.is-open .trambom-kenh-card-toggle iconify-icon {
	transform: rotate(180deg);
}

.gm-maps-shell #tab-detail .trambom-kenh-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	padding-left: 38px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	color: #3c4043;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-wrap {
	border-top: 1px solid #e8eaed;
	background: #f8f9fa;
	padding: 10px 12px 12px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-wrap[hidden] {
	display: none !important;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-group + .trambom-kenh-card-detail-group {
	margin-top: 12px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-group-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #3c4043;
	margin-bottom: 8px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-group-title iconify-icon {
	color: #1a73e8;
	font-size: 15px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-item {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 8px 10px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-label {
	font-size: 11px;
	color: #80868b;
	margin-bottom: 2px;
	line-height: 1.3;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-value {
	font-size: 13px;
	font-weight: 600;
	color: #202124;
	line-height: 1.35;
	word-break: break-word;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-item.is-empty {
	background: #fff3e0;
	border-radius: 6px;
	padding: 8px 10px;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-item.is-empty .trambom-kenh-card-detail-label {
	color: #d93025;
	font-weight: 600;
}

.gm-maps-shell #tab-detail .trambom-kenh-card-detail-item.is-empty .trambom-kenh-card-detail-value {
	color: #5f6368;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-hint {
	font-size: 12px;
	line-height: 1.45;
	color: #5f6368;
	margin: 0 0 8px;
	text-align: center;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-hint strong {
	color: #202124;
	font-weight: 700;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-type-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	border: 1px solid #dadce0;
	border-radius: 999px;
	background: #fff;
	color: #3c4043;
	cursor: pointer;
	box-shadow: none;
	transform: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn .kenh-congtrinh-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f1f3f4;
	font-size: 13px;
	line-height: 1;
	opacity: 1;
	color: #5f6368;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn:hover {
	background: #f8faf9;
	border-color: #a7f3d0;
	color: #065f46;
	transform: none;
	box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn:hover .kenh-congtrinh-btn-icon {
	background: #d1fae5;
	color: #059669;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn.active {
	background: #d1fae5;
	border-color: #6ee7b7;
	color: #065f46;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
	transform: none;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn.active .kenh-congtrinh-btn-icon {
	background: #a7f3d0;
	color: #047857;
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .kenh-congtrinh-btn:focus-visible {
	outline: 2px solid rgba(16, 185, 129, 0.55);
	outline-offset: 2px;
}

@media (max-width: 1200px) {
	.gm-maps-shell {
		--gm-left-panel-w: clamp(260px, 34vw, 380px);
	}
}

@media (min-width: 1920px) {
	.gm-maps-shell {
		--gm-left-panel-w: clamp(400px, 22vw, 500px);
		--gm-font-base: 15px;
		--gm-font-sm: 13px;
		--gm-font-title: 16px;
	}
}

@media (max-height: 720px) {
	.gm-maps-shell {
		--gm-search-height: clamp(36px, 6vh, 42px);
		--gm-control-hit: clamp(30px, 5vh, 36px);
		--gm-font-base: clamp(11px, 0.18vw + 10px, 13px);
		--gm-font-sm: clamp(10px, 0.14vw + 9px, 12px);
		--gm-font-title: clamp(12px, 0.22vw + 11px, 14px);
		--gm-list-item-pad: 7px;
	}
}

@media (max-width: 991.98px) {
	.gm-maps-shell {
		--gm-left-panel-w: min(calc(100vw - 24px), 520px);
		--gm-font-base: clamp(12px, 3.4vw, 14px);
		--gm-font-sm: clamp(11px, 3vw, 13px);
		--gm-font-title: clamp(13px, 3.8vw, 15px);
	}

	.gm-top-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.gm-left-panel {
		flex: 0 1 auto;
		width: var(--gm-left-panel-w);
		max-width: 100%;
	}

	.gm-search-card {
		width: 100%;
	}

	/* Mobile: hiện nút rail trên thanh tìm kiếm; ẩn nút mở nhóm chức năng. */
	.gm-search-card .gm-rail-toggle,
	#gmRailCollapseBtn {
		display: inline-flex !important;
	}

	.gm-search-card .gm-nav-toggle,
	#gmNavToggle {
		display: none !important;
	}

	.gm-maps-shell .gm-rail-section[data-rail-section="tools"],
	.gm-maps-shell .gm-rail-section[data-rail-section="layers"] {
		padding: 6px 2px 8px;
		margin-bottom: 6px;
		gap: 2px;
	}

	.gm-maps-shell .gm-rail-section[data-rail-section="tools"] .gm-rail-section-label,
	.gm-maps-shell .gm-rail-section[data-rail-section="layers"] .gm-rail-section-label {
		padding-bottom: 4px;
		font-size: 9px;
	}

	.gm-maps-shell #mapLegendPanel,
	.gm-maps-shell .map-legend-panel {
		display: none !important;
	}

	.gm-maps-shell .dss-wind-speed-legend,
	.dss-wind-speed-legend {
		display: none !important;
		visibility: hidden !important;
	}

	.gm-maps-shell.gm-layer-active #tab-detail {
		left: 12px;
		width: auto;
	}

	.gm-maps-shell.gm-layer-active.gm-detail-open #tab-detail {
		display: flex !important;
		flex-direction: column;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		z-index: 60;
	}

	.gm-maps-shell.gm-detail-open #map-container .gm-list-overlay,
	.gm-maps-shell.gm-detail-open .mailbox-sidebar {
		display: none !important;
	}

	.gm-maps-shell.gm-layer-active .mailbox-sidebar {
		width: auto;
	}
}

/* Vận hành TB — tab Kịch bản (light chrome) */
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-fields-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-label,
.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-value {
	text-align: left !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-value.station-info-value--justify {
	text-align: justify !important;
	font-weight: 500 !important;
	line-height: 1.55;
	white-space: normal;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-label {
	color: #5f6368 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-value {
	color: #202124 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.gm-maps-shell #tab-detail .tb-op-scenario-stack {
	gap: 20px;
}

.gm-maps-shell #tab-detail .tb-op-scenario-block-title {
	color: #5f6368;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8eaed;
	margin: 0;
}

.gm-maps-shell #tab-detail .tb-op-scenario-intro,
.gm-maps-shell #tab-detail .tb-op-schedule-heading,
.gm-maps-shell #tab-detail .tb-op-schedule-hint,
.gm-maps-shell #tab-detail .tb-op-calc-mode-option {
	color: #5f6368 !important;
}

.gm-maps-shell #tab-detail .tb-op-scenario-intro {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 10px 12px;
	color: #3c4043 !important;
}

.gm-maps-shell #tab-detail .tb-op-gloss-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gm-maps-shell #tab-detail .tb-op-gloss-item {
	display: grid;
	grid-template-columns: minmax(88px, 110px) 1fr;
	gap: 10px 12px;
	align-items: start;
	padding: 10px 12px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
}

.gm-maps-shell #tab-detail .tb-op-gloss-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	color: #1a73e8;
	background: #e8f0fe;
	border-radius: 6px;
	padding: 4px 8px;
	text-align: center;
	word-break: break-all;
}

.gm-maps-shell #tab-detail .tb-op-gloss-title {
	font-size: 13px;
	font-weight: 600;
	color: #202124;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .tb-op-gloss-desc {
	font-size: 12.5px;
	line-height: 1.45;
	color: #5f6368;
}

.gm-maps-shell #tab-detail .tb-op-gloss-desc code,
.gm-maps-shell #tab-detail .tb-op-gloss-formula code {
	font-size: 11.5px;
	background: #eef1f4;
	color: #3c4043;
	padding: 1px 5px;
	border-radius: 4px;
}

.gm-maps-shell #tab-detail .tb-op-gloss-formula {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 12px 14px;
	text-align: justify;
	text-justify: inter-word;
}

.gm-maps-shell #tab-detail .tb-op-gloss-steps {
	margin: 0 0 10px;
	padding-left: 18px;
	color: #3c4043;
	font-size: 13px;
	line-height: 1.55;
	text-align: justify;
	text-justify: inter-word;
}

.gm-maps-shell #tab-detail .tb-op-gloss-steps li + li {
	margin-top: 6px;
}

.gm-maps-shell #tab-detail .tb-op-gloss-note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #5f6368;
	text-align: justify;
	text-justify: inter-word;
}

.gm-maps-shell #tab-detail .tb-op-season-card-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gm-maps-shell #tab-detail .tb-op-season-card {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 12px 14px;
}

.gm-maps-shell #tab-detail .tb-op-season-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.gm-maps-shell #tab-detail .tb-op-season-name {
	font-size: 14px;
	font-weight: 700;
	color: #202124;
}

.gm-maps-shell #tab-detail .tb-op-season-months {
	font-size: 12px;
	color: #5f6368;
}

.gm-maps-shell #tab-detail .tb-op-season-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}

.gm-maps-shell #tab-detail .tb-op-season-metric {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 8px 6px;
	text-align: center;
}

.gm-maps-shell #tab-detail .tb-op-season-metric-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #80868b;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .tb-op-season-metric-value {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #1a73e8;
	line-height: 1.2;
}

.gm-maps-shell #tab-detail .tb-op-season-note {
	font-size: 12.5px;
	line-height: 1.45;
	color: #5f6368;
	text-align: justify;
}

@media (max-width: 576px) {
	.gm-maps-shell #tab-detail .tb-op-gloss-item {
		grid-template-columns: 1fr;
	}
	.gm-maps-shell #tab-detail .tb-op-gloss-code {
		justify-self: start;
	}
	.gm-maps-shell #tab-detail .tb-op-season-metrics {
		grid-template-columns: 1fr;
	}
}

.gm-maps-shell #tab-detail .tb-op-schedule-heading {
	color: #202124 !important;
	font-weight: 600;
}

.gm-maps-shell #tab-detail .tb-op-param-panel,
.gm-maps-shell #tab-detail .tb-op-schedule-panel {
	background: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
}

.gm-maps-shell #tab-detail .tb-op-param-panel--stack {
	gap: 0;
}

.gm-maps-shell #tab-detail .tb-op-param-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid #f1f3f4;
	border-radius: 0;
	padding: 10px 0;
	margin: 0;
	text-align: left;
}

.gm-maps-shell #tab-detail .tb-op-param-item:last-child {
	border-bottom: none;
}

.gm-maps-shell #tab-detail .tb-op-param-item--mode {
	border-bottom: 1px solid #e8eaed;
	margin-bottom: 4px;
	padding-bottom: 12px;
}

.gm-maps-shell #tab-detail .tb-op-param-label {
	display: block;
	text-align: left;
	color: #5f6368 !important;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 6px;
}

.gm-maps-shell #tab-detail .tb-op-param-input,
.gm-maps-shell #tab-detail #tb-op-selected-date-label,
.gm-maps-shell #tab-detail #tb-op-selected-date-hours {
	background: #fff !important;
	color: #202124 !important;
	border: 1px solid #dadce0 !important;
	border-radius: 8px !important;
	text-align: left;
	box-shadow: none;
}

.gm-maps-shell #tab-detail .tb-op-param-input:focus,
.gm-maps-shell #tab-detail #tb-op-selected-date-hours:focus {
	border-color: #1967d2 !important;
	box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.15) !important;
}

.gm-maps-shell #tab-detail .tb-op-calc-mode-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}

.gm-maps-shell #tab-detail .tb-op-calc-mode-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
	padding: 10px 12px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #3c4043 !important;
}

.gm-maps-shell #tab-detail .tb-op-calc-mode-option:has(input:checked) {
	background: #e8f0fe;
	border-color: #aecbfa;
	color: #174ea6 !important;
}

.gm-maps-shell #tab-detail .tb-op-day-board {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}

.gm-maps-shell #tab-detail .tb-op-day-btn {
	background: #fff;
	border: 1px solid #dadce0;
	color: #202124;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.gm-maps-shell #tab-detail .tb-op-day-btn:hover {
	border-color: #1967d2;
	background: #f8fbff;
}

.gm-maps-shell #tab-detail .tb-op-day-btn.is-active {
	border-color: #1967d2;
	background: #e8f0fe;
	color: #174ea6;
}

.gm-maps-shell #tab-detail .tb-op-day-btn.has-hours:not(.is-active) {
	border-color: #81c995;
	background: #e6f4ea;
	color: #137333;
}

.gm-maps-shell #tab-detail .tb-op-day-tag {
	color: #5f6368;
}

.gm-maps-shell #tab-detail .tb-op-day-btn.is-active .tb-op-day-tag {
	color: #1967d2;
}

.gm-maps-shell #tab-detail .tb-op-day-hours {
	color: #80868b;
}

.gm-maps-shell #tab-detail .tb-op-day-btn.has-hours .tb-op-day-hours,
.gm-maps-shell #tab-detail .tb-op-day-btn.is-active .tb-op-day-hours {
	color: #137333;
	font-weight: 600;
}

.gm-maps-shell #tab-detail .tb-op-selected-row {
	grid-template-columns: 1fr 140px auto;
	gap: 10px;
	align-items: end;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e8eaed;
}

.gm-maps-shell #tab-detail .tb-tieu-result-panel {
	min-height: 80px;
}

.gm-maps-shell #tab-detail .tb-tieu-result-hero {
	background: #f8f9fa;
	border: 2px solid #e8eaed;
	border-radius: 12px;
	padding: 14px 16px;
	text-align: center;
}

.gm-maps-shell #tab-detail .tb-tieu-result-r {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .tb-tieu-result-level {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

.gm-maps-shell #tab-detail .tb-tieu-result-advice {
	font-size: 13px;
	line-height: 1.45;
	color: #3c4043;
	text-align: justify;
}

.gm-maps-shell #tab-detail .tb-tieu-meta-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 4px;
}

.gm-maps-shell #tab-detail .tb-tieu-meta-label,
.gm-maps-shell #map-container .gm-list-overlay .tb-tieu-meta-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #e8f0fe;
	border: 1px solid #d2e3fc;
	color: #174ea6;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
}

.gm-maps-shell #tab-detail .tb-tieu-meta-label iconify-icon {
	font-size: 15px;
	flex-shrink: 0;
}

.gm-maps-shell #tab-detail .tb-tieu-meta-label strong,
.gm-maps-shell #map-container .gm-list-overlay .tb-tieu-meta-label strong {
	font-weight: 700;
	color: #174ea6;
}

.gm-maps-shell #map-container .gm-list-overlay .tb-tieu-meta-label--list {
	padding: 3px 8px;
	font-size: 11px;
}

.gm-maps-shell #map-container .gm-list-overlay .tb-op-pump-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.gm-maps-shell #tab-detail .tb-op-chart-panel--full,
.gm-maps-shell #tab-detail .tb-op-table-panel--full {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	padding: 10px;
}

.gm-maps-shell #tab-detail .tb-op-chart-panel--full {
	min-height: 280px;
	height: 320px;
	position: relative;
}

.gm-maps-shell #tab-detail .tb-op-chart-canvas,
.gm-maps-shell #tab-detail #trambomOperationChart {
	width: 100% !important;
	height: 100% !important;
	max-height: 300px;
}

.gm-maps-shell #tab-detail .tb-op-table-scroll {
	max-height: 320px;
	overflow: auto;
	border: 1px solid #e8eaed;
	border-radius: 8px;
}

.gm-maps-shell #tab-detail .tb-op-result-table,
.gm-maps-shell #tab-detail .tb-op-table-panel--full .table {
	--bs-table-bg: transparent;
	color: #202124;
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.gm-maps-shell #tab-detail .tb-op-result-table thead th {
	color: #5f6368;
	font-weight: 600;
	border-bottom: 1px solid #e8eaed;
	font-size: 12px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f8f9fa;
	box-shadow: 0 1px 0 #e8eaed;
}

.gm-maps-shell #tab-detail .tb-op-result-table tbody td {
	border-bottom: 1px solid #f1f3f4;
	font-size: 13px;
	vertical-align: middle;
}

.gm-maps-shell #tab-detail .tb-tieu-result-panel .tb-op-result-table td:first-child {
	text-align: left !important;
}

.gm-maps-shell #tab-detail .tb-tieu-result-panel .tb-op-result-table td.text-end,
.gm-maps-shell #tab-detail .tb-tieu-result-panel .tb-op-result-table td:last-child {
	text-align: right !important;
}

.gm-maps-shell #tab-detail .tb-op-table-empty {
	color: #80868b !important;
}

.gm-maps-shell #tab-detail .tb-op-table-panel--full .table-dark {
	--bs-table-bg: #fff;
	--bs-table-color: #202124;
	--bs-table-border-color: #e8eaed;
	color: #202124;
}


/* ===== IoT group (mưa / thủy văn / hồ) — light chrome ===== */
.gm-maps-shell #map-container .gm-list-overlay .rain-legend {
	margin: 8px var(--gm-panel-pad-x, 12px) 4px;
	padding: 8px 10px;
	background: #f1f3f4;
	border: 1px solid #e8eaed;
	border-radius: 8px;
}

.gm-maps-shell #map-container .gm-list-overlay .rain-legend-text {
	font-size: 11px !important;
	font-weight: 600;
}

.gm-maps-shell .mailbox-list-item .hochua-list-compact-line .pctt-capde-list-dot,
.gm-maps-shell .mailbox-list-item .hochua-list-compact-line .rain-dot {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
}

.gm-maps-shell .mailbox-list-item .hochua-list-compact-line .pctt-capde-list-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.2);
}

/* Hồ chứa thủy lợi — 3 nhóm gọn (viền trái) */
.gm-maps-shell .mailbox-list-item .hochua-list-block {
	margin-top: 4px;
	padding: 1px 0 1px 8px;
	border-left: 2px solid transparent;
	background: transparent;
	border-radius: 0;
}

.gm-maps-shell .mailbox-list-item .hochua-list-compact-line {
	font-size: 11px;
	line-height: 1.35;
	color: #5f6368;
	word-break: break-word;
}

.gm-maps-shell .mailbox-list-item .hochua-list-sep {
	color: #bdc1c6;
	font-weight: 400;
}

.gm-maps-shell .mailbox-list-item .hochua-list-capacity {
	font-weight: 700;
}

.gm-maps-shell .mailbox-list-item .hochua-list-muted {
	font-weight: 500;
	color: #80868b;
}

.gm-maps-shell .mailbox-list-item .hochua-list-block--design {
	border-left-color: #9aa0a6;
}

.gm-maps-shell .mailbox-list-item .hochua-list-block--live {
	border-left-color: #1a73e8;
}

.gm-maps-shell .mailbox-list-item .hochua-list-live-value {
	font-weight: 700;
	color: #174ea6;
}

.gm-maps-shell .mailbox-list-item .hochua-list-block--stats {
	border-left-color: #bdc1c6;
}

.gm-maps-shell .mailbox-list-item.active .hochua-list-block--design {
	border-left-color: #80868b;
}

.gm-maps-shell .mailbox-list-item.active .hochua-list-block--live {
	border-left-color: #0b57d0;
}

.gm-maps-shell .mailbox-list-item.active .hochua-list-block--stats {
	border-left-color: #9aa0a6;
}

.gm-maps-shell .mailbox-list-item.active .hochua-list-live-value {
	color: #0b57d0;
}

.gm-maps-shell .mailbox-list-item.active .hochua-list-compact-line,
.gm-maps-shell .mailbox-list-item.active .hochua-list-muted {
	color: #3c4043;
}

.gm-maps-shell #map-container .gm-list-overlay .kttv-list-count,
.gm-maps-shell .trambom-op-list-count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px var(--gm-panel-pad-x, 12px) 4px;
	font-size: 11px;
	line-height: 1.3;
	color: #80868b;
}

.gm-maps-shell .trambom-list-toolbar .trambom-op-list-count {
	padding-left: 0;
	padding-right: 0;
}

.gm-maps-shell #map-container .gm-list-overlay .kttv-list-count-text,
.gm-maps-shell .trambom-op-list-count .kttv-list-count-text {
	min-width: 0;
	flex: 1 1 auto;
}

.gm-maps-shell #map-container .gm-list-overlay .kttv-popup-toggle,
.gm-maps-shell .trambom-op-list-count .kttv-popup-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 500;
	color: #5f6368;
	flex: 0 0 auto;
}

.gm-maps-shell #map-container .gm-list-overlay .kttv-popup-toggle input,
.gm-maps-shell .trambom-op-list-count .kttv-popup-toggle input {
	margin: 0;
	cursor: pointer;
	accent-color: #1a73e8;
}

/* Popup giá trị IoT trên bản đồ */
.mapboxgl-popup.iot-value-popup {
	z-index: 5;
}

.mapboxgl-popup.iot-value-popup .mapboxgl-popup-content {
	padding: 5px 10px 5px 5px;
	border-radius: 18px;
	box-shadow: 0 2px 12px rgba(230, 57, 70, 0.28), 0 1px 3px rgba(0, 0, 0, 0.12);
	border: 1px solid rgba(230, 57, 70, 0.18);
	background: #fff;
}

.mapboxgl-popup.iot-value-popup .mapboxgl-popup-tip {
	border-top-color: #fff;
}

/* Popup dưới công trình đang đánh dấu (anchor: top) */
.mapboxgl-popup.iot-value-popup--below .mapboxgl-popup-tip {
	border-top-color: transparent;
	border-bottom-color: #fff;
}

.iot-map-value-popup {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 320px;
	font-family: Roboto, Arial, sans-serif;
	line-height: 1.25;
}

.iot-map-value-popup-icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 28px;
	height: 28px;
}

.iot-map-value-popup-icon svg {
	display: block;
}

.iot-map-value-popup-body {
	min-width: 0;
	flex: 1 1 auto;
}

.iot-map-value-popup-title {
	font-size: 12px;
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iot-map-value-popup-name {
	font-weight: 500;
}

.iot-map-value-popup-label {
	font-weight: 400;
}

.iot-map-value-popup-value {
	font-weight: 700;
}

.iot-map-value-popup-unit {
	font-weight: 600;
}

.iot-map-value-popup-time {
	margin-top: 2px;
	font-size: 10px;
	color: #80868b;
}

.iot-map-value-popup-metric {
	font-size: 12px;
	color: #202124;
	white-space: nowrap;
	line-height: 1.35;
}

.gm-maps-shell #tab-detail .station-data-section .card,
.gm-maps-shell #tab-detail .station-data-section .card-header,
.gm-maps-shell #tab-detail .station-data-section .card-body {
	background: #fff !important;
	color: #202124 !important;
	border-color: #e8eaed !important;
}

.gm-maps-shell #tab-detail .station-data-section .form-control.bg-dark,
.gm-maps-shell #tab-detail .station-data-section .date-input-native,
.gm-maps-shell #tab-detail .date-input-wrapper .form-control {
	background: #fff !important;
	border: 1px solid #dadce0 !important;
}

/* Ẩn chữ native của input date — chỉ hiện .date-display (tránh trùng 2 dòng) */
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native,
.gm-maps-shell #tab-detail .date-input-wrapper input[type="date"].form-control,
.gm-maps-shell #tab-detail .date-input-wrapper input[type="datetime-local"].form-control {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	caret-color: transparent !important;
}

.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-fields-wrapper,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-text,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-month-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-day-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-year-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-hour-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-minute-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-second-field,
.gm-maps-shell #tab-detail .date-input-wrapper .date-input-native::-webkit-datetime-edit-ampm-field {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.gm-maps-shell #tab-detail .date-input-wrapper {
	background: #fff !important;
	border: 1px solid #dadce0 !important;
	border-radius: 8px;
}

.gm-maps-shell #tab-detail .date-display {
	color: #202124 !important;
}

.gm-maps-shell #tab-detail .station-data-section .table-dark,
.gm-maps-shell #tab-detail .station-data-section .table-dark > :not(caption) > * > * {
	--bs-table-bg: #fff;
	--bs-table-color: #202124;
	--bs-table-border-color: #e8eaed;
	--bs-table-striped-bg: #f8f9fa;
	--bs-table-hover-bg: #f1f3f4;
	color: #202124;
	background: #fff;
	border-color: #e8eaed;
}

/* Export dropdowns — luôn chữ tối trên nền trắng (tránh trắng-trên-trắng) */
.gm-maps-shell #tab-detail .dropdown-menu,
.gm-maps-shell #tab-detail .dropdown-menu-dark,
.gm-maps-shell #tab-detail #exportChartDropdownMenu,
.gm-maps-shell #tab-detail #exportDataDropdownMenu {
	--bs-dropdown-bg: #fff;
	--bs-dropdown-color: #202124;
	--bs-dropdown-border-color: #dadce0;
	--bs-dropdown-link-color: #202124;
	--bs-dropdown-link-hover-bg: #e8f0fe;
	--bs-dropdown-link-hover-color: #174ea6;
	--bs-dropdown-link-active-bg: #1a73e8;
	--bs-dropdown-link-active-color: #fff;
	background: #fff !important;
	color: #202124 !important;
	border: 1px solid #dadce0 !important;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(60, 64, 67, 0.2);
	padding: 6px 0;
	z-index: 1060 !important;
	min-width: 160px;
}

.gm-maps-shell #tab-detail .dropdown-menu .dropdown-item,
.gm-maps-shell #tab-detail .dropdown-menu-dark .dropdown-item,
.gm-maps-shell #tab-detail #exportChartDropdownMenu .dropdown-item,
.gm-maps-shell #tab-detail #exportDataDropdownMenu .dropdown-item {
	color: #202124 !important;
	background: transparent !important;
	padding: 8px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.gm-maps-shell #tab-detail .dropdown-menu .dropdown-item:hover,
.gm-maps-shell #tab-detail .dropdown-menu .dropdown-item:focus,
.gm-maps-shell #tab-detail .dropdown-menu-dark .dropdown-item:hover,
.gm-maps-shell #tab-detail .dropdown-menu-dark .dropdown-item:focus,
.gm-maps-shell #tab-detail #exportChartDropdownMenu .dropdown-item:hover,
.gm-maps-shell #tab-detail #exportDataDropdownMenu .dropdown-item:hover {
	color: #174ea6 !important;
	background: #e8f0fe !important;
}

.gm-maps-shell #tab-detail .dropdown-menu .dropdown-item iconify-icon,
.gm-maps-shell #tab-detail .dropdown-menu-dark .dropdown-item iconify-icon {
	color: #5f6368 !important;
	font-size: 16px;
}

.gm-maps-shell #tab-detail .dropdown-menu .dropdown-divider,
.gm-maps-shell #tab-detail .dropdown-menu-dark .dropdown-divider {
	border-color: #e8eaed !important;
	margin: 4px 0;
}

.gm-maps-shell #tab-detail .btn-info.dropdown-toggle,
.gm-maps-shell #tab-detail #exportChartDropdownBtn {
	background: #039be5 !important;
	border-color: #039be5 !important;
	color: #fff !important;
}

.gm-maps-shell #tab-detail .btn-success.dropdown-toggle,
.gm-maps-shell #tab-detail #exportDataDropdownBtn {
	background: #34a853 !important;
	border-color: #34a853 !important;
	color: #fff !important;
}

.gm-maps-shell #tab-detail .btn-info.dropdown-toggle iconify-icon,
.gm-maps-shell #tab-detail .btn-success.dropdown-toggle iconify-icon,
.gm-maps-shell #tab-detail #exportChartDropdownBtn iconify-icon,
.gm-maps-shell #tab-detail #exportDataDropdownBtn iconify-icon {
	color: #fff !important;
}


/* IoT river — Số liệu quan trắc layout */
.gm-maps-shell #tab-detail .iot-obs-data-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 32px;
}

.gm-maps-shell #tab-detail .iot-obs-table-scroll {
	max-height: min(320px, 42vh);
	overflow-y: auto;
	border-top: 1px solid #e8eaed;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table {
	--bs-table-bg: #fff;
	--bs-table-color: #202124;
	--bs-table-border-color: #e8eaed;
	--bs-table-hover-bg: #f1f3f4;
	--bs-table-striped-bg: #f8f9fa;
	margin-bottom: 0;
	color: #202124;
	font-size: 13px;
	border-collapse: separate;
	border-spacing: 0;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table > :not(caption) > * > * {
	background: #fff;
	color: #202124;
	border-bottom-color: #e8eaed;
	padding: 8px 12px;
	vertical-align: middle;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table thead th,
.gm-maps-shell #tab-detail .iot-obs-table-card .table thead.sticky-top th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f1f3f4 !important;
	color: #3c4043 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	border-bottom: 1px solid #dadce0 !important;
	box-shadow: 0 1px 0 #dadce0;
	white-space: nowrap;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr:nth-child(even) > * {
	background: #fafbfc;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr:hover > * {
	background: #e8f0fe !important;
}

/* Dòng mưa > 0 — tô theo chú giải (đè nền trắng Bootstrap) */
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--lt10 > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--lt10:nth-child(even) > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--lt10:hover > * {
	background: rgba(77, 163, 255, 0.38) !important;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--10-30 > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--10-30:nth-child(even) > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--10-30:hover > * {
	background: rgba(255, 217, 102, 0.45) !important;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--30-50 > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--30-50:nth-child(even) > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--30-50:hover > * {
	background: rgba(255, 140, 66, 0.42) !important;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--ge50 > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--ge50:nth-child(even) > *,
.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody tr.iot-obs-rain-row--ge50:hover > * {
	background: rgba(230, 57, 70, 0.38) !important;
}

.gm-maps-shell #tab-detail .iot-obs-table-card .table tbody td {
	border-bottom: 1px solid #f1f3f4;
	line-height: 1.35;
}

.gm-maps-shell #tab-detail .iot-obs-stats {
	margin: 4px 0 16px;
	flex-shrink: 0;
}

.gm-maps-shell #tab-detail .iot-obs-scroll-spacer {
	height: 48px;
	flex-shrink: 0;
}

.gm-maps-shell #tab-detail .iot-obs-stat-card {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 10px 6px;
	text-align: center;
	min-height: 68px;
	overflow: visible;
}

.gm-maps-shell #tab-detail .iot-obs-stat-label {
	font-size: 10px;
	line-height: 1.25;
	color: #5f6368;
	margin-bottom: 4px;
}

.gm-maps-shell #tab-detail .iot-obs-stat-value {
	font-size: 15px;
	font-weight: 700;
	color: #202124;
	line-height: 1.2;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card,
.gm-maps-shell #tab-detail .iot-obs-table-card {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	/* visible so export dropdowns are not clipped */
	overflow: visible;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card .card-header,
.gm-maps-shell #tab-detail .iot-obs-table-card .card-header {
	background: #fff;
	border-bottom: 1px solid #e8eaed;
	color: #202124;
	overflow: visible;
	position: relative;
	z-index: 5;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card .btn-group,
.gm-maps-shell #tab-detail .iot-obs-table-card .btn-group {
	position: relative;
	z-index: 6;
}

.gm-maps-shell #tab-detail .btn-group.dropup > .dropdown-menu,
.gm-maps-shell #tab-detail .btn-group.dropup > .dropdown-menu.show {
	top: auto !important;
	bottom: 100% !important;
	margin-bottom: 4px;
	margin-top: 0;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card.card-expand {
	background: #fff !important;
	border-radius: 0 !important;
}

/* Fullscreen biểu đồ: luôn trên cùng (trên list/search/FAB ~10060–10092) */
body.card-expand .card.card-expand {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	z-index: 10250 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	overflow: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

body.card-expand .card.card-expand > .card-header,
body.card-expand .card.card-expand > .card-header.with-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	flex-wrap: nowrap !important;
	flex-shrink: 0 !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 3 !important;
	background: #fff !important;
	border-bottom: 1px solid #e8eaed !important;
	padding: 12px 16px !important;
	min-height: 56px;
}

body.card-expand .card.card-expand .iot-obs-chart-header-main,
body.card-expand .card.card-expand .card-header.with-btn > .d-flex {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: calc(100% - 96px) !important;
	min-width: 0 !important;
}

body.card-expand .card.card-expand .card-header-btn {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	margin-inline-start: 8px !important;
	gap: 6px !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.card-expand .card.card-expand .card-header-btn .btn {
	color: #202124 !important;
	background: #f1f3f4 !important;
	border: 1px solid #dadce0 !important;
	border-radius: 8px !important;
	width: 2rem !important;
	height: 2rem !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.card-expand .card.card-expand .card-header-btn .btn:hover {
	background: #e8f0fe !important;
	border-color: #aecbfa !important;
	color: #174ea6 !important;
}

body.card-expand .card.card-expand .card-header-btn .btn iconify-icon {
	font-size: 18px;
	color: inherit !important;
}

body.card-expand .card.card-expand .card-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.gm-maps-shell #tab-detail .iot-obs-chart-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gm-maps-shell #tab-detail .iot-obs-chart-header-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card .card-header-btn {
	display: flex;
	flex-shrink: 0;
	gap: 4px;
}

.gm-maps-shell #tab-detail .iot-obs-chart-card .card-header-btn .btn {
	color: #5f6368 !important;
}

.gm-maps-shell #tab-detail .iot-obs-filters {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.gm-maps-shell #tab-detail .iot-obs-filters-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 240px;
	min-width: 0;
}

.gm-maps-shell #tab-detail .iot-obs-filters-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	padding-top: 0;
}

.gm-maps-shell #tab-detail .iot-obs-filter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.gm-maps-shell #tab-detail .iot-obs-filter-label {
	flex: 0 0 72px;
	width: 72px;
	color: #5f6368;
	font-size: 12px;
	font-weight: 500;
}

.gm-maps-shell #tab-detail .iot-obs-filter-row .date-input-wrapper {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 280px;
}

.gm-maps-shell #tab-detail .iot-obs-filters--datetime .iot-obs-filter-label {
	flex: 0 0 88px;
	width: 88px;
}

.gm-maps-shell #tab-detail .iot-obs-filters--datetime .iot-obs-filter-row .date-input-wrapper {
	max-width: 340px;
}

.gm-maps-shell #tab-detail .iot-obs-load-btn {
	white-space: nowrap;
	min-height: 38px;
	padding-left: 14px;
	padding-right: 14px;
}

.gm-maps-shell #tab-detail .iot-obs-filters .form-label {
	color: #5f6368;
	font-size: 12px;
}


/* Chú giải biểu đồ IoT — ngoài canvas */
.iot-chart-legend,
.gm-maps-shell #tab-detail .iot-chart-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 12px;
	padding: 8px 10px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 8px;
}

.iot-chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #3c4043;
	line-height: 1.2;
}

.iot-chart-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--swatch, #1967d2);
	background: transparent;
	box-sizing: border-box;
	flex-shrink: 0;
}

.iot-chart-legend-item:not(.is-dashed) .iot-chart-legend-swatch {
	background: var(--swatch, #1967d2);
	border-color: var(--swatch, #1967d2);
}

.iot-chart-legend-item.is-dashed .iot-chart-legend-swatch {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.iot-chart-legend-label {
	font-weight: 500;
}

/* Truy vấn mưa IDW tại điểm (dss-namrom) */
.gm-maps-shell #gmRainPointQueryToggle.is-active,
.gm-maps-shell #gmRainPointQueryToggle[aria-pressed="true"] {
	background: #e8f0fe !important;
	color: #1967d2 !important;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35) !important;
}

.namrom-rain-point-panel,
#namromRainPointPanel.namrom-rain-point-panel {
	display: none;
	flex-direction: column;
	position: fixed;
	right: 16px;
	left: auto;
	top: auto;
	bottom: 88px;
	z-index: 10090;
	width: min(380px, calc(100vw - 32px));
	height: auto;
	max-height: min(42vh, 360px);
	padding: 0;
	background: #ffffff !important;
	color: #202124 !important;
	border: 1px solid #dadce0;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(60, 64, 67, 0.18), 0 0 0 1px rgba(60, 64, 67, 0.06);
	font-size: 13px;
	line-height: 1.4;
	pointer-events: auto !important;
	overflow: hidden;
	transform-origin: bottom center;
}

.namrom-rain-point-panel.is-open,
#namromRainPointPanel.namrom-rain-point-panel.is-open {
	display: flex !important;
}

.namrom-rain-point-panel.is-open.has-data,
#namromRainPointPanel.namrom-rain-point-panel.is-open.has-data {
	max-height: min(72vh, 560px);
}

@media (max-width: 991.98px) {
	.namrom-rain-point-panel.is-open,
	#namromRainPointPanel.namrom-rain-point-panel.is-open,
	.namrom-rain-point-panel.is-open.has-data,
	#namromRainPointPanel.namrom-rain-point-panel.is-open.has-data {
		left: 12px;
		right: 12px;
		top: var(--gm-list-top, 72px);
		bottom: 12px;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		border-radius: 16px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
		z-index: 10092;
		overflow: hidden;
	}

	.gm-maps-shell:has(.modern-timeline.visible) .namrom-rain-point-panel.is-open,
	.gm-maps-shell:has(.modern-timeline.visible) #namromRainPointPanel.namrom-rain-point-panel.is-open {
		bottom: 56px;
	}

	.namrom-rain-point-panel__coords,
	.namrom-rain-point-panel__hours,
	.namrom-rain-point-panel__head {
		flex-shrink: 0;
	}
}

.namrom-rain-point-panel *,
#namromRainPointPanel.namrom-rain-point-panel * {
	color: inherit;
	box-sizing: border-box;
}

.namrom-rain-point-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 12px 14px 8px;
	border-bottom: 1px solid #e8eaed;
	flex-shrink: 0;
}

.namrom-rain-point-panel__title {
	color: #202124 !important;
	font-size: 13px;
	font-weight: 600;
}

.namrom-rain-point-panel__close {
	width: 28px;
	height: 28px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #f8f9fa;
	color: #3c4043 !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.namrom-rain-point-panel__close:hover {
	background: #e8f0fe;
	border-color: #d2e3fc;
	color: #174ea6 !important;
}

.namrom-rain-point-panel__coords {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 8px 14px;
	color: #3c4043 !important;
	font-size: 12px;
	flex-shrink: 0;
}

.namrom-rain-point-panel__coords span {
	color: #174ea6 !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.namrom-rain-point-panel__hours {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 0 14px 10px;
	flex-shrink: 0;
}

.namrom-rain-point-panel__hour-btn {
	min-width: 40px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #f8f9fa;
	color: #3c4043 !important;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

.namrom-rain-point-panel__hour-btn:hover {
	background: #e8f0fe;
	border-color: #d2e3fc;
	color: #174ea6 !important;
}

.namrom-rain-point-panel__hour-btn.is-active {
	background: #e8f0fe;
	border-color: #1a73e8;
	color: #174ea6 !important;
}

.namrom-rain-point-panel__hour-input {
	width: 64px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #fff !important;
	color: #202124 !important;
	font-size: 12px;
}

.namrom-rain-point-panel__results {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 14px 12px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #bdc1c6 #f1f3f4;
	color: #202124 !important;
}

.namrom-rain-point-panel__results::-webkit-scrollbar {
	width: 8px;
}

.namrom-rain-point-panel__results::-webkit-scrollbar-track {
	background: #f1f3f4;
	border-radius: 8px;
}

.namrom-rain-point-panel__results::-webkit-scrollbar-thumb {
	background: #bdc1c6;
	border-radius: 8px;
}

.namrom-rain-point-panel__msg {
	padding: 10px 0;
	color: #5f6368 !important;
	font-size: 12px;
}

.namrom-rain-point-panel__msg--loading {
	color: #1a73e8 !important;
}

.namrom-rain-point-panel__msg--error {
	color: #d93025 !important;
}

.namrom-rain-point-panel__table {
	width: 100%;
	border-collapse: collapse;
	color: #202124 !important;
	font-size: 12px;
}

.namrom-rain-point-panel__table th,
.namrom-rain-point-panel__table td {
	padding: 6px 4px;
	border-bottom: 1px solid #e8eaed;
	color: #202124 !important;
	background: transparent;
	text-align: left;
	vertical-align: middle;
}

.namrom-rain-point-panel__table thead th {
	color: #5f6368 !important;
	font-weight: 600;
	font-size: 11px;
	position: sticky;
	top: 0;
	background: #fff !important;
	z-index: 1;
}

.namrom-rain-point-panel__num {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #174ea6 !important;
}

/* Tô màu dòng mưa IDW theo ngưỡng chú giải trạm */
.namrom-rain-point-panel__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: 8px;
	font-size: 10px;
	color: #5f6368;
}

.namrom-rain-point-panel__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

.namrom-rain-point-panel__legend-item i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.namrom-rain-point-panel__table tbody tr.iot-obs-rain-row--lt10 > td {
	background: rgba(77, 163, 255, 0.38) !important;
}
.namrom-rain-point-panel__table tbody tr.iot-obs-rain-row--10-30 > td {
	background: rgba(255, 217, 102, 0.45) !important;
}
.namrom-rain-point-panel__table tbody tr.iot-obs-rain-row--30-50 > td {
	background: rgba(255, 140, 66, 0.42) !important;
}
.namrom-rain-point-panel__table tbody tr.iot-obs-rain-row--ge50 > td {
	background: rgba(230, 57, 70, 0.38) !important;
}

.namrom-rain-point-panel__chart {
	height: 140px;
	margin-top: 10px;
	background: #f8f9fa;
	border-radius: 8px;
	padding: 6px;
}

/* ========== Nam Rom: làm rõ tab + thuộc tính kiểu Bac Ninh ========== */
.gm-maps-shell #tab-detail .gm-detail-tabs-outer {
	background: #f1f3f4 !important;
	border: 1px solid #dadce0 !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1) !important;
	margin-bottom: 10px !important;
	padding: 3px !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 13px !important;
	padding: 9px 14px !important;
	border-radius: 9px !important;
	color: #5f6368 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab.active {
	background: #fff !important;
	color: #1a73e8 !important;
	border-color: transparent !important;
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18) !important;
	font-weight: 600 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab.active iconify-icon {
	color: #1a73e8 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-wrap-toggle {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	color: #5f6368 !important;
	margin-bottom: 6px;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-fields-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-item,
.gm-maps-shell #tab-detail .gm-detail-tab-body .trambom-field-cell {
	display: block !important;
	padding: 12px 4px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e8eaed !important;
	background: transparent !important;
	border-radius: 0 !important;
	border-left: none !important;
	opacity: 1 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-label {
	display: block !important;
	color: #80868b !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	margin-bottom: 4px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-value {
	display: block !important;
	color: #202124 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

/* View mode: ẩn trường trống (không tô cam như edit mode) */
.gm-maps-shell #tab-detail .gm-detail-tabs-root:not(.gm-detail-edit-mode) .gm-detail-tab-body .trambom-field-cell--empty,
.gm-maps-shell #tab-detail .gm-detail-tabs-root:not(.gm-detail-edit-mode) .gm-detail-tab-body .station-info-item.trambom-field-cell--empty {
	display: none !important;
}

.gm-maps-shell #tab-detail .station-info-card-header,
.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-card-header {
	display: none !important; /* tiêu đề đã thành tab */
}

.gm-maps-shell #tab-detail .gm-detail-tabs-root .station-info-card,
.gm-maps-shell #tab-detail .gm-detail-tab-body .station-info-card {
	background: #fff !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	transform: none !important;
}

.gm-maps-shell #tab-detail .iot-obs-stat-label {
	color: #80868b !important;
	font-size: 11px !important;
	font-weight: 500 !important;
}

.gm-maps-shell #tab-detail .iot-obs-stat-value {
	color: #202124 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

.gm-maps-shell #tab-detail .iot-obs-stat-unit {
	color: #5f6368 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

@media (min-width: 992px) {
	.gm-maps-shell #tab-detail .mailbox-detail-header.gm-detail-title-bar #detailStationName {
		font-family: 'Inter', sans-serif !important;
		font-weight: 700 !important;
		color: #202124 !important;
		font-size: 16px !important;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}
}

/* List IoT/hồ — đảm bảo chữ tối trên nền trắng */
.gm-maps-shell #stationsList .mailbox-list-item,
.gm-maps-shell #stationsListMobile .mailbox-list-item {
	background: #fff !important;
	color: #202124 !important;
	border-bottom: 1px solid #e8eaed !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.gm-maps-shell #stationsList .mailbox-list-item.active {
	background: #e8f0fe !important;
}

.gm-maps-shell #stationsList .mailbox-sender-name {
	font-weight: 700 !important;
	color: #202124 !important;
	font-size: 14px !important;
}

.gm-maps-shell #stationsList .mailbox-list-item.active .mailbox-sender-name {
	color: #1967d2 !important;
}

.gm-maps-shell #stationsList .mailbox-title {
	color: #5f6368 !important;
	font-size: 12px !important;
}

.gm-maps-shell #stationsList .rain-legend,
.gm-maps-shell #stationsList .kttv-list-count {
	background: #fff;
	padding: 8px 10px;
	border-bottom: 1px solid #e8eaed;
	font-family: 'Inter', sans-serif !important;
}

/* Danh sách hồ (HTML Quantum .media từ API) → kiểu Google list giống Bac Ninh */
.gm-maps-shell #stationsList > a.media,
.gm-maps-shell #stationsList > a.align-items-center.media,
.gm-maps-shell #stationsList .dss-vlist-window > a.media,
.gm-maps-shell #stationsList .dss-vlist-window > a.align-items-center.media,
.gm-maps-shell #stationsListMobile > a.media,
.gm-maps-shell #stationsListMobile > a.align-items-center.media,
.gm-maps-shell #stationsListMobile .dss-vlist-window > a.media,
.gm-maps-shell #stationsListMobile .dss-vlist-window > a.align-items-center.media {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px;
	padding: var(--gm-list-item-pad) 12px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e8eaed;
	text-decoration: none !important;
	color: #202124 !important;
	background: #fff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: var(--gm-font-base);
	line-height: 1.35;
	cursor: pointer;
}
.gm-maps-shell #stationsList > a.media:hover,
.gm-maps-shell #stationsList > a.align-items-center.media:hover,
.gm-maps-shell #stationsList .dss-vlist-window > a.media:hover,
.gm-maps-shell #stationsList .dss-vlist-window > a.align-items-center.media:hover {
	background: #f8f9fa !important;
	text-decoration: none !important;
}
.gm-maps-shell #stationsList a.media .media-contact-name span,
.gm-maps-shell #stationsList a.media .media-contact-name,
.gm-maps-shell #stationsListMobile a.media .media-contact-name span {
	color: #202124 !important;
	font-weight: 600 !important;
	font-size: var(--gm-font-title) !important;
	text-decoration: none !important;
	border: none !important;
}
.gm-maps-shell #stationsList a.media .text-muted,
.gm-maps-shell #stationsList a.media p {
	color: #5f6368 !important;
	font-size: var(--gm-font-sm) !important;
	margin-bottom: 2px !important;
	text-decoration: none !important;
}
.gm-maps-shell #stationsList a.media .main-img-user {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}
.gm-maps-shell #stationsList a.media .main-img-user img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.gm-maps-shell #stationsList a.media .contact-status {
	font-size: 16px;
	margin-right: 6px !important;
	color: #1a73e8 !important;
}

/* Các trận lũ lịch sử — danh sách Google UI */
.gm-maps-shell #stationsList .namrom-flood-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: #f8f9fa;
	border-bottom: 1px solid #e8eaed;
	font-family: 'Inter', sans-serif !important;
}

.gm-maps-shell #stationsList .namrom-flood-history-head-title {
	font-size: 12px;
	font-weight: 600;
	color: #174ea6 !important;
}

.gm-maps-shell #stationsList .namrom-flood-history-head-count {
	font-size: 11px;
	color: #5f6368 !important;
	font-variant-numeric: tabular-nums;
}

.gm-maps-shell #stationsList .namrom-flood-history-item {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	padding: var(--gm-list-item-pad) 12px !important;
	border-bottom: 1px solid #e8eaed;
	background: #fff;
	cursor: pointer;
}

.gm-maps-shell #stationsList .namrom-flood-history-item:hover {
	background: #f8f9fa !important;
}

.gm-maps-shell #stationsList .namrom-flood-history-item.active {
	background: #e8f0fe !important;
	border-left: 3px solid #1a73e8;
	padding-left: 9px !important;
}

.gm-maps-shell #stationsList .namrom-flood-history-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gm-maps-shell #stationsList .namrom-flood-history-icon img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.gm-maps-shell #stationsList .namrom-flood-history-year {
	color: #1a73e8 !important;
	font-weight: 600 !important;
	font-size: var(--gm-font-title) !important;
}

.gm-maps-shell #stationsList .namrom-flood-history-rain {
	color: #5f6368 !important;
	font-size: var(--gm-font-sm) !important;
	line-height: 1.35;
	margin-top: 2px;
}

/* Popup Q xả tại hồ chứa (lũ lịch sử / kịch bản) */
.mapboxgl-popup.reservoir-popup {
	z-index: 6;
}

.mapboxgl-popup.reservoir-popup .mapboxgl-popup-content {
	padding: 6px 12px 6px 8px;
	border-radius: 18px;
	border: 1px solid rgba(230, 57, 70, 0.35);
	background: #fff;
	color: #202124;
	font-size: 12px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	line-height: 1.35;
}

.mapboxgl-popup.reservoir-popup .mapboxgl-popup-close-button {
	display: none;
}

.mapboxgl-popup.reservoir-popup .mapboxgl-popup-tip {
	border-top-color: #fff;
}

.mapboxgl-popup.reservoir-popup b {
	color: #d93025;
	font-weight: 700;
}

/* —— Form Ngập LV (kịch bản mưa lớn) —— */
.gm-maps-shell #stationsList .namrom-flood-basin-form {
	padding: 14px 16px 16px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #202124;
	pointer-events: auto;
	touch-action: manipulation;
}

.gm-maps-shell #stationsList .namrom-flood-form__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.gm-maps-shell #stationsList .namrom-flood-form__head-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #1a73e8;
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell #stationsList .namrom-flood-form__head-icon iconify-icon {
	display: block;
	width: 1.15em;
	height: 1.15em;
	color: inherit;
	font-size: inherit;
	line-height: 1;
}

.gm-maps-shell #stationsList .namrom-flood-form__head-icon--rain {
	background: linear-gradient(145deg, #1a73e8 0%, #1967d2 100%);
	box-shadow: 0 1px 3px rgba(26, 115, 232, 0.4);
}

.gm-maps-shell #stationsList .namrom-flood-form__head-icon--urban {
	background: linear-gradient(145deg, #5f6368 0%, #3c4043 100%);
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.4);
}

.gm-maps-shell #stationsList .namrom-flood-form__head-icon--landslide {
	background: linear-gradient(145deg, #e37400 0%, #d56e00 100%);
	box-shadow: 0 1px 3px rgba(227, 116, 0, 0.4);
}

.gm-maps-shell #stationsList .namrom-flood-form__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #202124;
}

.gm-maps-shell #stationsList .namrom-flood-form__hint {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #5f6368;
}

.gm-maps-shell #stationsList .namrom-flood-form__card {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 14px;
}

.gm-maps-shell #stationsList .namrom-flood-form__field + .namrom-flood-form__field {
	margin-top: 10px;
}

.gm-maps-shell #stationsList .namrom-flood-form__field--rain {
	padding-top: 2px;
}

.gm-maps-shell #stationsList .namrom-flood-form__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.gm-maps-shell #stationsList .namrom-flood-form__label-row .namrom-flood-form__label {
	margin-bottom: 0;
}

.gm-maps-shell #stationsList .namrom-flood-rain-reload {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: transparent;
	color: #1a73e8;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 4px;
	cursor: pointer;
	border-radius: 6px;
}

.gm-maps-shell #stationsList .namrom-flood-rain-reload:hover {
	background: rgba(26, 115, 232, 0.08);
}

.gm-maps-shell #stationsList .namrom-flood-rain-reload:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gm-maps-shell #stationsList .namrom-flood-rain-reload iconify-icon {
	font-size: 14px;
}

.gm-maps-shell #stationsList .namrom-flood-seg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-seg__btn {
	appearance: none;
	border: 1px solid #dadce0;
	background: #fff;
	border-radius: 10px;
	padding: 8px 6px;
	font-size: 12px;
	font-weight: 600;
	color: #3c4043;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #stationsList .namrom-flood-seg__btn span {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 500;
	color: #80868b;
}

.gm-maps-shell #stationsList .namrom-flood-seg__btn:hover {
	border-color: #aecbfa;
	background: #f8fbff;
}

.gm-maps-shell #stationsList .namrom-flood-seg__btn.is-active {
	border-color: #1a73e8;
	background: rgba(26, 115, 232, 0.08);
	color: #174ea6;
	box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.2);
}

.gm-maps-shell #stationsList .namrom-flood-seg__btn.is-active span {
	color: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-rain-status {
	margin: 6px 0 0;
	font-size: 11px;
	color: #80868b;
	line-height: 1.35;
	min-height: 1.2em;
}

.gm-maps-shell #stationsList .namrom-flood-rain-status.is-ok { color: #0d7a4f; }
.gm-maps-shell #stationsList .namrom-flood-rain-status.is-error { color: #c5221f; }
.gm-maps-shell #stationsList .namrom-flood-rain-status.is-loading { color: #1a73e8; }

.gm-maps-shell #stationsList .namrom-flood-scenario-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-skeleton {
	padding: 14px 12px;
	text-align: center;
	font-size: 12px;
	color: #5f6368;
	background: #fff;
	border: 1px dashed #dadce0;
	border-radius: 10px;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	text-align: left;
	appearance: none;
	border: 1px solid #e8eaed;
	background: #fff;
	border-radius: 12px;
	padding: 10px 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card:hover:not(:disabled) {
	border-color: #aecbfa;
	background: #f8fbff;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card.is-selected {
	border-color: #1a73e8;
	background: rgba(26, 115, 232, 0.06);
	box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.18);
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card:disabled,
.gm-maps-shell #stationsList .namrom-flood-scenario-card.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__radio {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border-radius: 50%;
	border: 2px solid #dadce0;
	background: #fff;
	position: relative;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card.is-selected .namrom-flood-scenario-card__radio {
	border-color: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card.is-selected .namrom-flood-scenario-card__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__body {
	flex: 1;
	min-width: 0;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__title {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #202124;
	line-height: 1.35;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	color: #0d7a4f;
	background: rgba(13, 122, 79, 0.1);
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__badge.is-warn {
	color: #b45309;
	background: rgba(180, 83, 9, 0.12);
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card.is-below-min {
	border-color: rgba(180, 83, 9, 0.35);
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__math {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font-size: 11px;
	color: #5f6368;
	font-variant-numeric: tabular-nums;
}

.gm-maps-shell #stationsList .namrom-flood-scenario-card__math .is-obs { color: #0d7a4f; font-weight: 600; }
.gm-maps-shell #stationsList .namrom-flood-scenario-card__math .is-fc { color: #b45309; font-weight: 600; }
.gm-maps-shell #stationsList .namrom-flood-scenario-card__math .is-plus,
.gm-maps-shell #stationsList .namrom-flood-scenario-card__math .is-eq { color: #80868b; }
.gm-maps-shell #stationsList .namrom-flood-scenario-card__math strong { color: #202124; font-weight: 700; }
.gm-maps-shell #stationsList .namrom-flood-scenario-card__math.is-muted { color: #9aa0a6; }

.gm-maps-shell #stationsList .namrom-flood-total {
	margin-top: 12px;
	padding: 12px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e8eaed;
}

.gm-maps-shell #stationsList .namrom-flood-total__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.gm-maps-shell #stationsList .namrom-flood-total__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #5f6368;
}

.gm-maps-shell #stationsList .namrom-flood-total__formula {
	font-size: 11px;
	color: #5f6368;
	font-variant-numeric: tabular-nums;
}

.gm-maps-shell #stationsList .namrom-flood-total__formula .is-obs { color: #0d7a4f; font-weight: 600; }
.gm-maps-shell #stationsList .namrom-flood-total__formula .is-fc { color: #b45309; font-weight: 600; }

.gm-maps-shell #stationsList .namrom-flood-total__value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: #174ea6;
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-total__clamp {
	margin: 0 0 8px;
	font-size: 11px;
	line-height: 1.4;
	color: #b45309;
	background: rgba(180, 83, 9, 0.08);
	border-radius: 8px;
	padding: 6px 8px;
}

.gm-maps-shell #stationsList .namrom-flood-qxa {
	margin-bottom: 14px;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	background: #f8f9fa;
	overflow: hidden;
}

.gm-maps-shell #stationsList .namrom-flood-qxa__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #202124;
}

.gm-maps-shell #stationsList .namrom-flood-qxa__hint {
	font-size: 11px;
	font-weight: 500;
	color: #80868b;
}

.gm-maps-shell #stationsList .namrom-flood-qxa .namrom-flood-form__qxa-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px 12px;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-legend {
	margin-bottom: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #e8eaed;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-legend-title {
	font-size: 11px;
	font-weight: 600;
	color: #5f6368;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-item {
	font-size: 12px;
	line-height: 1.35;
	color: #5f6368;
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-item strong {
	font-weight: 600;
	color: #3c4043;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-item.is-active {
	background: #e8f0fe;
	border-color: #c6dafc;
	color: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-item.is-active strong {
	color: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-form__range-active {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #1a73e8;
	line-height: 1.4;
}

.gm-maps-shell #stationsList .namrom-flood-form__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #3c4043;
}

.gm-maps-shell #stationsList .namrom-flood-form__control {
	display: block;
	width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	height: 40px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #202124 !important;
	background: #fff !important;
	border: 1px solid #dadce0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	pointer-events: auto !important;
	touch-action: manipulation;
	user-select: text !important;
	-webkit-user-select: text !important;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #stationsList .namrom-flood-form__control:focus {
	outline: none !important;
	border-color: #1a73e8 !important;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18) !important;
}

.gm-maps-shell #stationsList select.namrom-flood-form__control {
	cursor: pointer;
	padding-right: 36px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px !important;
}

.gm-maps-shell #stationsList .namrom-flood-form__control--rain {
	font-size: 18px;
	font-weight: 600;
	height: 44px;
	color: #1a73e8 !important;
}

.gm-maps-shell #stationsList .namrom-flood-form__section-title {
	font-size: 12px;
	font-weight: 600;
	color: #5f6368;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-form__qxa-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gm-maps-shell #stationsList .namrom-flood-form__qxa-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 108px;
	align-items: center;
	gap: 10px;
}

.gm-maps-shell #stationsList .namrom-flood-form__qxa-label {
	font-size: 13px;
	font-weight: 500;
	color: #3c4043;
	line-height: 1.35;
	margin: 0;
}

.gm-maps-shell #stationsList .namrom-flood-form__control--qxa {
	height: 36px;
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	padding: 6px 10px;
}

.gm-maps-shell #stationsList .namrom-flood-form__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.gm-maps-shell #stationsList .namrom-flood-form__btn {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	line-height: 1.3;
	pointer-events: auto !important;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.gm-maps-shell #stationsList .namrom-flood-form__btn--primary {
	background: #1a73e8 !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(26, 115, 232, 0.25);
}

.gm-maps-shell #stationsList .namrom-flood-form__btn--primary:hover {
	background: #1765cc !important;
	box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35);
}

.gm-maps-shell #stationsList #btn_thongkengap.is-disabled,
.gm-maps-shell #stationsList #btn_thongkengap:disabled {
	opacity: 0.45;
	cursor: not-allowed !important;
	pointer-events: none;
	box-shadow: none !important;
	background: #9aa0a6 !important;
}

.gm-maps-shell #stationsList .namrom-flood-form__btn--ghost {
	background: #fff !important;
	color: #5f6368 !important;
	border: 1px solid #dadce0 !important;
}

.gm-maps-shell #stationsList .namrom-flood-form__btn--ghost:hover {
	background: #f8f9fa !important;
	border-color: #bdc1c6 !important;
}

.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-basin-form input,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-basin-form select,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-basin-form textarea,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-basin-form button {
	pointer-events: auto !important;
	touch-action: manipulation;
	user-select: text !important;
}

.gm-maps-shell #stationsList .namrom-flood-urban-form {
	padding: 14px 16px 16px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #202124;
	pointer-events: auto;
	touch-action: manipulation;
}

.gm-maps-shell #stationsList #namrom-urban-rain-range-hint {
	margin: 0 0 8px;
}

.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-urban-form input,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-urban-form select,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-flood-urban-form button {
	pointer-events: auto !important;
	touch-action: manipulation;
}

.gm-maps-shell #mailboxSidebar.gm-scenario-form-mode {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Trượt lở — panel kịch bản */
.gm-maps-shell #mailboxSidebar:has(.namrom-landslide-form) .gm-list-overlay-search,
.gm-maps-shell #stationsList .namrom-landslide-form {
	width: 100%;
}

.gm-maps-shell #stationsList .namrom-landslide-section {
	margin-top: 4px;
}

.gm-maps-shell #stationsList .namrom-landslide-legend {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(15, 23, 42, 0.04);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.gm-maps-shell #stationsList .namrom-landslide-legend__title {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-landslide-legend__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.gm-maps-shell #stationsList .namrom-landslide-legend__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #475569;
}

.gm-maps-shell #stationsList .namrom-landslide-swatch {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	flex-shrink: 0;
}

.gm-maps-shell #stationsList .namrom-landslide-thresholds {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(37, 99, 235, 0.06);
	border: 1px solid rgba(37, 99, 235, 0.12);
}

.gm-maps-shell #stationsList .namrom-landslide-thresholds__title {
	font-size: 12px;
	font-weight: 600;
	color: #1e40af;
	margin-bottom: 8px;
}

.gm-maps-shell #stationsList .namrom-landslide-thresholds__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gm-maps-shell #stationsList .namrom-landslide-threshold-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	color: #475569;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	cursor: pointer;
}

.gm-maps-shell #stationsList .namrom-landslide-threshold-chip:hover {
	border-color: rgba(37, 99, 235, 0.4);
	color: #1d4ed8;
}

.gm-maps-shell #stationsList .namrom-landslide-threshold-chip.is-active {
	color: #1d4ed8;
	background: rgba(37, 99, 235, 0.12);
	border-color: rgba(37, 99, 235, 0.35);
}

.gm-maps-shell #stationsList .namrom-landslide-thresholds__active {
	margin: 8px 0 0;
	font-size: 12px;
	color: #64748b;
}

.gm-maps-shell .mailbox-detail.dragscroll .namrom-landslide-form input,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-landslide-form select,
.gm-maps-shell .mailbox-detail.dragscroll .namrom-landslide-form button {
	pointer-events: auto !important;
	touch-action: manipulation;
}

.mapboxgl-popup.namrom-landslide-popup .mapboxgl-popup-content {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
}

.mapboxgl-popup.namrom-landslide-popup .mapboxgl-popup-tip {
	border-top-color: #fff;
}

.gm-maps-shell #stationsList .namrom-landslide-popup-toggle {
	margin: 10px 0 4px;
}

.gm-maps-shell #stationsList .namrom-flood-popup-toggle {
	margin: 10px 0 12px;
}

.gm-maps-shell #stationsList .namrom-landslide-popup-toggle__btn,
.gm-maps-shell #stationsList .namrom-flood-popup-toggle__btn {
	width: 100%;
}

.gm-maps-shell #stationsList .namrom-landslide-popup-toggle__btn.is-active,
.gm-maps-shell #stationsList .namrom-flood-popup-toggle__btn.is-active {
	color: #1d4ed8;
	border-color: rgba(37, 99, 235, 0.45);
	background: rgba(37, 99, 235, 0.08);
}

.gm-maps-shell #stationsList .namrom-landslide-popup-toggle__hint,
.gm-maps-shell #stationsList .namrom-flood-popup-toggle__hint {
	margin: 6px 0 0;
	font-size: 11px;
	color: #64748b;
	line-height: 1.4;
}

.gm-maps-shell #stationsList .namrom-flood-stat-scope {
	margin: 12px 0 4px;
	padding: 12px;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	background: #f8fafc;
}

.gm-maps-shell #stationsList .namrom-flood-stat-scope__option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: #202124;
	cursor: pointer;
}

.gm-maps-shell #stationsList .namrom-flood-stat-scope__option input {
	margin: 0;
	accent-color: #1a73e8;
}

.gm-maps-shell #stationsList .namrom-flood-stat-scope__hint {
	margin: 8px 0 0;
	font-size: 11px;
	color: #1967d2;
	line-height: 1.4;
}

.namrom-flood-stat-toolbar {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 12px;
}

.namrom-flood-stat-toolbar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 6px 14px;
	border: none;
	border-radius: 20px;
	background: #1a73e8;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(26, 115, 232, 0.25);
}

.namrom-flood-stat-toolbar__btn:hover {
	background: #1765cc;
}

.gm-maps-shell #tab-detail .namrom-kcn-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 12px;
}

.gm-maps-shell #tab-detail .namrom-kcn-table td {
	border: 1px solid #dadce0;
	padding: 5px 8px;
	vertical-align: top;
}

/* Ẩn panel / nút ẩn-hiện màu chủ đề trên bản đồ */
.gm-maps-shell .app-theme-panel,
.app-theme-panel {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Chip địa danh — cạnh nút điều khiển lớp, dropdown khi click */
.gm-maps-shell .gm-placename-chip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	z-index: 2;
	overflow: visible;
}

.gm-maps-shell .gm-placename-chip-wrap[hidden] {
	display: none !important;
}

.gm-maps-shell #gmPlacenameToggle.is-labeled {
	max-width: min(280px, calc(100vw - 96px));
}

.gm-maps-shell #gmPlacenameToggle.is-labeled .gm-map-chip-text {
	max-width: 160px;
	text-overflow: ellipsis;
}

.gm-maps-shell #gmRiverPathToggle.is-labeled {
	max-width: min(280px, calc(100vw - 96px));
}

.gm-maps-shell #gmRiverPathToggle.is-labeled .gm-map-chip-text {
	max-width: 140px;
	text-overflow: ellipsis;
}

.gm-maps-shell .gm-placename-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: auto;
	transform: none;
	min-width: 260px;
	max-width: min(320px, calc(100vw - 24px));
	max-height: min(380px, calc(100vh - 120px));
	overflow-x: hidden;
	overflow-y: auto;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 8px 24px rgba(60, 64, 67, 0.16);
	z-index: 10090;
}

.gm-maps-shell .gm-placename-menu[hidden] {
	display: none !important;
}

.gm-maps-shell .gm-placename-menu-row {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.gm-maps-shell .gm-placename-menu-row .gm-placename-menu-item {
	flex: 1;
	min-width: 0;
	width: auto;
}

.gm-maps-shell .gm-placename-menu-del {
	flex: 0 0 28px;
	width: 28px;
	min-height: 32px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #80868b;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gm-maps-shell .gm-placename-menu-del:hover,
.gm-maps-shell .gm-placename-menu-del:focus {
	background: #fce8e6;
	color: #c5221f;
	outline: none;
}

.gm-maps-shell .gm-placename-menu-del iconify-icon {
	font-size: 15px;
	pointer-events: none;
}

.gm-maps-shell .gm-placename-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #202124;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-maps-shell .gm-placename-menu-item:hover,
.gm-maps-shell .gm-placename-menu-item:focus {
	background: #f1f3f4;
	outline: none;
}

.gm-maps-shell .gm-placename-menu-item.is-active {
	background: #e8f0fe;
	color: #1967d2;
	font-weight: 600;
}

.gm-maps-shell .gm-placename-menu-item--clear {
	color: #5f6368;
	font-weight: 600;
	border-bottom: 1px solid #e8eaed;
	border-radius: 8px 8px 0 0;
	margin-bottom: 4px;
}

.gm-maps-shell .gm-placename-menu-empty {
	padding: 10px;
	font-size: 13px;
	color: #5f6368;
}

.gm-maps-shell .gm-placename-menu-item--add {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1967d2;
	font-weight: 600;
	border-bottom: 1px solid #e8eaed;
	border-radius: 8px;
	margin-bottom: 4px;
}

.gm-maps-shell .gm-placename-menu-item--add iconify-icon {
	font-size: 14px;
}

@media (max-width: 991.98px) {
	.gm-maps-shell .gm-placename-chip-wrap {
		overflow: visible;
	}

	.gm-maps-shell .gm-placename-menu {
		top: 0;
		right: calc(100% + 8px);
		left: auto;
		transform: none;
		min-width: 0;
		width: min(280px, calc(100vw - var(--gm-rail-w) - var(--gm-map-ctrl-btn-size) - var(--gm-map-ctrl-right) - 20px));
		max-width: calc(100vw - var(--gm-rail-w) - var(--gm-map-ctrl-btn-size) - var(--gm-map-ctrl-right) - 20px);
		max-height: min(420px, calc(100vh - 72px));
	}
}

.gm-maps-shell .gm-placename-add-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	margin-bottom: 6px;
	border-radius: 10px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
}

.gm-maps-shell .gm-placename-add-form[hidden] {
	display: none !important;
}

.gm-maps-shell .gm-placename-add-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #5f6368;
	margin-bottom: 3px;
}

.gm-maps-shell .gm-placename-add-input {
	width: 100%;
	height: 32px;
	padding: 0 8px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	font-size: 13px;
	color: #202124;
	background: #fff;
	box-sizing: border-box;
}

.gm-maps-shell .gm-placename-add-input:focus {
	outline: none;
	border-color: #1967d2;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.gm-maps-shell .gm-placename-add-coords {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.gm-maps-shell .gm-placename-add-mapbtn {
	height: 30px;
	border: none;
	border-radius: 8px;
	background: #e8f0fe;
	color: #1967d2;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.gm-maps-shell .gm-placename-add-mapbtn:hover {
	background: #d2e3fc;
}

.gm-maps-shell .gm-placename-add-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.gm-maps-shell .gm-placename-add-cancel,
.gm-maps-shell .gm-placename-add-save {
	height: 30px;
	padding: 0 12px;
	border: none;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.gm-maps-shell .gm-placename-add-cancel {
	background: #fff;
	color: #5f6368;
	border: 1px solid #dadce0;
}

.gm-maps-shell .gm-placename-add-save {
	background: #1a73e8;
	color: #fff;
}

.gm-maps-shell .gm-placename-add-save:disabled {
	opacity: 0.65;
	cursor: default;
}

.gm-maps-shell .gm-placename-add-msg {
	font-size: 12px;
	color: #5f6368;
}

.gm-maps-shell .gm-placename-add-msg.is-error {
	color: #c5221f;
}

.gm-maps-shell .gm-placename-add-msg.is-ok {
	color: #137333;
}

/* Menu chuột phải trên bản đồ — kiểu Google Maps */
.gm-map-ctx-menu {
	position: fixed;
	z-index: 100120;
	min-width: 228px;
	max-width: min(320px, calc(100vw - 16px));
	padding: 6px 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
	font-family: 'Inter', Roboto, Arial, sans-serif;
}

.gm-map-ctx-menu[hidden] {
	display: none !important;
}

.gm-map-ctx-item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 16px;
	border: none;
	background: transparent;
	text-align: left;
	font-size: 14px;
	line-height: 1.4;
	color: #202124;
	cursor: pointer;
	white-space: nowrap;
}

.gm-map-ctx-item[hidden] {
	display: none !important;
}

.gm-map-ctx-item:hover,
.gm-map-ctx-item:focus {
	background: #f1f3f4;
	outline: none;
}

.gm-map-ctx-coords {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.gm-map-ctx-sep {
	height: 1px;
	margin: 4px 0;
	background: #e8eaed;
}

/* ========== Bản đồ lúa — timeline dưới map (cùng nguồn dienbien.html) ========== */
.gm-maps-shell #irs-rice-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 0;
	width: auto !important;
	z-index: 40;
	pointer-events: none;
	background: transparent;
}

.gm-maps-shell #irs-rice-bar.is-visible {
	pointer-events: auto;
	z-index: 1003;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1 {
	position: relative;
	width: 100%;
	bottom: auto;
	padding: 6px 12px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.96);
	border-top: 1px solid #e8eaed;
	box-shadow: 0 -2px 10px rgba(60, 64, 67, 0.12);
	box-sizing: border-box;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1 {
	width: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1 > div {
	width: auto;
	position: relative;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1-1,
.gm-maps-shell #irs-rice-bar .irs-rice-slider-play,
.gm-maps-shell #irs-rice-bar .irs-rice-slider-pause {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: #f1f3f4;
	color: #202124;
	box-shadow: none;
	transform: none;
	top: auto;
	left: auto;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-play {
	background: #1a73e8;
	color: #fff;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1-1-1,
.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1-2-1,
.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1-3-1,
.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-1-4-1 {
	position: static;
	transform: none;
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-2 {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	padding-right: 8px;
}

.gm-maps-shell #irs-rice-bar .irs-rice-slider-1-2::after {
	content: 'Bản đồ lúa';
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #202124;
	margin-top: 2px;
}

.gm-maps-shell:has(#irs-rice-bar.is-visible) .gm-map-footer-left > #mapLegendPanel,
.gm-maps-shell:has(#irs-rice-bar.is-visible) .gm-map-footer-left > #gmBasemapPeek,
.gm-maps-shell:has(#irs-rice-bar.is-visible) .gm-map-footer-left > #gmMapLayerPeeks {
	display: flex;
	visibility: visible;
	pointer-events: auto;
}