/* ============================================================
   VARIABLES & RESET
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

/* Leaflet gán tabindex cho các layer vector (polygon ranh giới/thửa đất...) để
   hỗ trợ điều hướng bàn phím. Khi click, trình duyệt tự vẽ viền focus mặc định
   quanh phần tử SVG đó — nhưng vì outline không bám theo hình dạng polygon nên
   nó vẽ thành 1 HÌNH CHỮ NHẬT bao quanh bounding box của polygon (không phải bug
   của app). Tắt outline mặc định này vì bản thân các layer đã có style
   hover/click riêng (đổi màu/độ dày viền) để thể hiện trạng thái chọn rồi. */
.leaflet-interactive:focus { outline: none; }

/* ── Context menu chuột phải / long-press trên bản đồ (Ghim, Copy tọa độ...) ── */
.map-ctx-menu {
    position: fixed;
    z-index: 3000;
    background: var(--bg-panel, #1a1d27);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    padding: 6px;
    min-width: 200px;
    font-size: 13px;
}
.map-ctx-item {
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-1, #e8eaf0);
    white-space: nowrap;
}
.map-ctx-item:hover {
    background: rgba(255,255,255,.08);
}

:root {
    --bg-dark:        #0f1117;
    --bg-panel:       #1a1d27;
    --bg-panel-2:     #22263a;
    --bg-glass:       rgba(26, 29, 39, 0.92);
    --border:         rgba(255,255,255,0.08);
    --border-hover:   rgba(255,255,255,0.18);

    --accent:         #4f9cf9;
    --accent-hover:   #6aadff;
    --accent-glow:    rgba(79,156,249,0.3);

    --text-primary:   #e8ecf4;
    --text-secondary: #8892a4;
    --text-dim:       #5a6378;

    --success:        #34d399;
    --warning:        #fbbf24;
    --danger:         #f87171;

    /* Loại đất */
    --land-ont:  #FFE033;
    --land-odt:  #FF8C00;
    --land-cln:  #5ECB6E;
    --land-lua:  #98FB98;
    --land-dgt:  #8899AA;
    --land-skc:  #9370DB;
    --land-tmd:  #FF4D2E;
    --land-nts:  #5BC8E8;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --shadow:     0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BẢN ĐỒ
   ============================================================ */
#map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0d1117;
}

/* Ẩn attribution Leaflet mặc định (hiển thị ở góc phải dưới) */
.leaflet-control-attribution {
    background: rgba(0,0,0,0.5) !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 10px !important;
    backdrop-filter: blur(4px);
}
.leaflet-control-attribution a { color: rgba(255,255,255,0.5) !important; }

.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow) !important;
}
.leaflet-control-zoom a {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    font-size: 18px !important;
    transition: background var(--transition) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--bg-panel-2) !important;
    color: var(--accent) !important;
}

/* ============================================================
   HEADER BAR
   ============================================================ */
#header-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

/* Search + Region cùng nhóm */
#search-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#search-group #search-wrapper {
    flex: 1;
    max-width: 400px;
    min-width: 160px;
}
#search-group #region-select {
    flex-shrink: 0;
    width: auto;
    min-width: 150px;
    max-width: 200px;
}
#logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
}
#logo .logo-icon {
    width: 32px; height: 32px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
#logo .logo-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
#logo .logo-sub {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Search Box */
#search-wrapper {
    position: relative;
}

#search-input {
    width: 100%;
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 36px 8px 38px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
#search-input::placeholder { color: var(--text-dim); }
#search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-icon {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 16px;
    pointer-events: none;
}
#search-clear {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--text-dim);
    font-size: 15px;
    display: none;
    padding: 2px;
    transition: color var(--transition);
}
#search-clear:hover { color: var(--text-primary); }
#search-clear.visible { display: block; }

/* Kết quả tìm kiếm */
#search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 200;
}
#search-results.active { display: block; }
#search-results::-webkit-scrollbar { width: 4px; }
#search-results::-webkit-scrollbar-track { background: transparent; }
#search-results::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

.search-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--bg-panel-2); }

.search-item-icon {
    margin-top: 2px;
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}
.search-item-body { flex: 1; min-width: 0; }
.search-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item-addr {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-no-result {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
.search-loading {
    padding: 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Region Select */
#region-select {
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    min-width: 200px;
    transition: border-color var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892a4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
#region-select:focus { border-color: var(--accent); }
#region-select option { background: var(--bg-panel); }

/* ============================================================
   PANEL TRÁI — THÔNG TIN THỬA ĐẤT
   ============================================================ */
#info-panel {
    position: absolute;
    bottom: 24px; left: 14px;
    width: 300px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
#info-panel.visible {
    transform: translateY(0);
    opacity: 1;
}

#info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
#info-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#info-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim);
    font-size: 18px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color var(--transition), background var(--transition);
}
#info-panel-close:hover { color: var(--text-primary); background: var(--bg-panel-2); }

#info-panel-body { padding: 14px; }

/* Land type badge */
.land-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}
.land-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

/* Bảng thông tin */
.info-table {
    width: 100%;
    border-collapse: collapse;
}
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-table td {
    padding: 7px 0;
    font-size: 13px;
    vertical-align: top;
}
.info-table td:first-child {
    color: var(--text-secondary);
    white-space: nowrap;
    width: 38%;
    font-size: 12px;
}
.info-table td:last-child {
    color: var(--text-primary);
    font-weight: 500;
    padding-left: 8px;
}

/* Tọa độ */
.coord-row {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--bg-panel-2);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.land-note {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(79,156,249,0.08);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.info-no-data {
    text-align: center;
    padding: 10px 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.info-no-data .coord-info {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Loading spinner */
.info-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}
.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PANEL PHẢI — ĐIỀU KHIỂN LỚP BẢN ĐỒ
   ============================================================ */
#layer-panel {
    position: absolute;
    top: 70px; right: 14px;
    width: 210px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    z-index: 100;
    overflow: hidden;
}

/* Layer panel header */
#layer-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
#layer-panel-header:hover { background: rgba(255,255,255,0.03); }
#layer-panel-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#layer-panel-chevron {
    font-size: 12px;
    color: var(--text-dim);
    transition: transform var(--transition);
}

/* Body có thể scroll khi nhiều provider */
#layer-panel-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#layer-panel-body::-webkit-scrollbar { width: 3px; }
#layer-panel-body::-webkit-scrollbar-track { background: transparent; }
#layer-panel-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

/* Phần QH + opacity bên dưới danh sách provider */
.panel-section-label {
    padding: 8px 13px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.panel-toggles { padding: 0 13px 8px; }
.panel-divider { height: 1px; background: var(--border); margin: 2px 0; }
.panel-opacity { padding: 4px 13px 12px; }

.panel-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.panel-section:last-child { border-bottom: none; }

.panel-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

/* Toggle switch */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.toggle-row:last-child { margin-bottom: 0; }
.toggle-label {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.toggle-switch {
    position: relative;
    width: 32px; height: 18px;
    cursor: pointer;
}
.toggle-switch input { display: none; }
.toggle-track {
    position: absolute; inset: 0;
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: background var(--transition), border-color var(--transition);
}
.toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: transform var(--transition), background var(--transition);
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(14px); background: #fff; }

/* Opacity slider */
#opacity-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#opacity-slider {
    flex: 1;
    appearance: none;
    height: 4px;
    background: var(--bg-panel-2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
#opacity-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px; height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
#opacity-value {
    font-size: 11px;
    color: var(--text-secondary);
    width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   NÚT ĐIỀU KHIỂN GÓC
   ============================================================ */
#fab-buttons {
    position: absolute;
    bottom: 80px; right: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.fab {
    width: 40px; height: 40px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 18px;
    transition: all var(--transition);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.fab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-panel);
}
.fab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Tooltip cho FAB */
.fab[title] { position: relative; }

/* ============================================================
   LEGEND BẢN ĐỒ
   ============================================================ */
#legend {
    position: absolute;
    bottom: 24px; right: 14px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    z-index: 100;
    min-width: 160px;
    box-shadow: var(--shadow);
}
#legend-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.legend-item:last-child { margin-bottom: 0; }
.legend-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-dim, #5a6478);
    margin: 10px 0 5px;
}
.legend-group-label:first-child { margin-top: 0; }
.legend-dot {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ============================================================
   TỜ THỬA SEARCH FORM
   ============================================================ */
#parcel-form {
    position: absolute;
    top: 70px; left: 14px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    z-index: 100;
    width: 220px;
    box-shadow: var(--shadow);
    display: none;
}
#parcel-form.visible { display: block; }
#parcel-form h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.form-field {
    flex: 1;
}
.form-field label {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.form-field input {
    width: 100%;
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition);
}
.form-field input:focus { border-color: var(--accent); }

.btn-primary {
    width: 100%;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.btn-primary:hover { background: var(--accent-hover); }

/* ============================================================
   TOAST THÔNG BÁO
   ============================================================ */
#toast-container {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: var(--shadow);
    animation: toast-in 0.3s ease forwards;
    white-space: nowrap;
}
.toast.error   { border-color: var(--danger);  color: var(--danger); }
.toast.success { border-color: var(--success); color: var(--success); }
.toast.warning { border-color: #fbbf24; color: #fbbf24; }

/* Toast phong phú (ảnh + link + nút đóng) dùng cho thông báo kiểu "toast" — #toast-container
   đã là flex-column + gap nên nhiều toast tự xếp thành từng hàng, không đè lên nhau; ở
   đây chỉ cần bật lại pointer-events (container đang tắt để không chặn click bản đồ) và
   cho phép xuống dòng bình thường thay vì nowrap như toast báo lỗi ngắn mặc định. */
.toast.cn-toast {
    display: flex; align-items: flex-start; gap: 10px;
    white-space: normal; max-width: 320px;
    pointer-events: auto; position: relative; padding-right: 30px;
}
.cn-toast-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cn-toast-text { min-width: 0; }
.cn-toast-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.cn-toast-link { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--accent); text-decoration: none; }
.cn-toast-close {
    position: absolute; right: 6px; top: 6px; background: none; border: none;
    color: var(--text-3); font-size: 13px; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
}
.cn-toast-close:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CROSSHAIR KHI HOVER BẢN ĐỒ
   ============================================================ */
#map.cursor-crosshair { cursor: crosshair !important; }

/* Leaflet popup tùy chỉnh — dùng CSS variable (--cn-pop-bg/--cn-pop-text) thay vì mã
   màu cứng, để các ghim thông báo có màu nền tuỳ chỉnh (content-widget.js set biến này
   qua JS khi popup mở) vẫn override được dù có !important; popup khác không set biến
   này sẽ tự dùng màu mặc định var(--bg-panel)/var(--text-primary) như cũ. */
.leaflet-popup-content-wrapper {
    background: var(--cn-pop-bg, var(--bg-panel)) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow) !important;
    color: var(--cn-pop-text, var(--text-primary)) !important;
}
.leaflet-popup-tip { background: var(--cn-pop-bg, var(--bg-panel)) !important; }
.leaflet-popup-content { margin: 10px 14px !important; font-size: 13px; }
.leaflet-popup-close-button { color: var(--text-secondary) !important; }

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 600px) {
    #header-bar { padding: 8px 10px; gap: 8px; }
    #logo .logo-text { display: none; }
    #region-select { min-width: 140px; font-size: 12px; }
    #search-input { font-size: 13px; }

    #layer-panel {
        display: none; /* mặc định ẩn — bật lại qua JS khi bấm nút "Lớp bản đồ" trên toolbar */
        left: 10px; right: 10px; top: auto; bottom: 70px;
        width: auto; max-width: none;
    }
    #layer-panel-body { max-height: 50vh; }

    #info-panel {
        left: 10px; right: 10px; bottom: 70px;
        width: auto;
    }

    #legend { display: none; }
    #fab-buttons { bottom: 70px; right: 10px; }

    #parcel-form { left: 10px; right: 10px; width: auto; }
}

/* ── Accordion từng provider ── */
.layer-acc {
    border-bottom: 1px solid var(--border);
}
.layer-acc:last-child { border-bottom: none; }

/* Header có thể click */
.layer-acc-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}
.layer-acc-hdr:hover { background: rgba(255,255,255,0.04); }

.layer-acc-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}
.layer-acc-name {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}
/* Dot nhỏ hiện khi nhóm có layer đang bật */
.layer-acc-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.layer-acc-chevron {
    font-size: 16px;
    color: var(--text-dim);
    transition: transform var(--transition);
    line-height: 1;
    flex-shrink: 0;
}

/* Body — mặc định đóng */
.layer-acc-body {
    padding: 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.2s ease;
}

/* Khi mở */
.layer-acc.open .layer-acc-chevron {
    transform: rotate(90deg);
}
.layer-acc.open .layer-acc-body {
    max-height: 300px;
    padding: 2px 12px 10px;
}

/* Toggle rows bên trong */
.layer-acc-body .toggle-row {
    margin-bottom: 7px;
}
.layer-acc-body .toggle-row:last-child { margin-bottom: 0; }

/* Thông báo API key chưa có */
.api-key-notice {
    margin: 8px 14px 10px;
    padding: 8px 10px;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--warning);
    line-height: 1.5;
}
.api-key-notice small { opacity: 0.75; }
/* ── Select nhỏ trong layer panel ── */
.form-control-sm {
    width: 100%;
    padding: 5px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 11.5px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.form-control-sm:focus { border-color: var(--accent); }
.form-control-sm option { background: #1a1d26; }

#heatmap-filters { padding-top: 4px; }

/* ── Heatmap locked badge ── */
.hm-locked {
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Ẩn heatmap section cho đến khi JS kiểm tra plan xong */
.heatmap-section-hidden { display: none !important; }

/* ── Heatmap sub-controls trong accordion ── */
.hm-sub-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 6px 0;
}

/* ── Badge lock cho layer không đủ plan ── */
.layer-plan-lock {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   SEARCH BOX — kết quả dropdown
   ══════════════════════════════════════════ */
#search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    z-index: 2000;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
}
#search-results.active { display: block; }
#search-results::-webkit-scrollbar { width: 3px; }
#search-results::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

/* Loading */
.search-loading {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty */
.search-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Group label */
.search-group-label {
    padding: 6px 14px 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-top: 1px solid var(--border);
}
.search-group-label:first-child { border-top: none; }

/* Result item */
.search-item {
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--transition);
}
.search-item:hover,
.search-item.focused { background: rgba(255,255,255,.06); }

.search-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-item-name mark {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
}
.search-item-addr {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge loại đất */
.search-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(79,156,249,.15);
    color: var(--accent);
    border: 1px solid rgba(79,156,249,.3);
    flex-shrink: 0;
}

/* Source footer */
.search-source {
    padding: 6px 14px 8px;
    font-size: 10px;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    text-align: right;
}

/* ══════════════════════════════════════════
   SEARCH — External toggle bar
   ══════════════════════════════════════════ */
#search-ext-bar {
    display: none;
    align-items: center;
    padding: 5px 10px 4px;
    border-top: 1px solid var(--border);
    background: transparent;
    border-radius: 0 0 10px 10px;
    transition: background .15s;
}
#search-ext-bar.ext-active {
    background: rgba(66,133,244,.08);
    border-top-color: rgba(66,133,244,.25);
}

.search-ext-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
}
.search-ext-label input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: #4285f4;
    cursor: pointer;
    flex-shrink: 0;
}
.search-ext-icon { font-size: 13px; flex-shrink: 0; }
.search-ext-text { flex: 1; }
#search-ext-bar.ext-active .search-ext-text { color: #4285f4; font-weight: 500; }

.search-ext-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    color: #fff;
    background: #e87722;
    flex-shrink: 0;
}

/* Gợi ý chuyển sang tìm ngoài */
.search-ext-suggest {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.search-ext-suggest-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    transition: background .15s;
}
.search-ext-suggest-btn:hover { background: rgba(255,255,255,.07); }

/* Search wrapper cần position relative để dropdown định vị đúng */
#search-wrapper { position: relative; }

/* ══════════════════════════════════════════
   HEADER RIGHT — User dropdown
   ══════════════════════════════════════════ */
#header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Avatar button */
.user-menu-wrap { position: relative; }
.user-avatar-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    border: 2px solid rgba(255,255,255,.15);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color var(--transition), transform .1s;
    flex-shrink: 0;
}
.user-avatar-btn:hover { border-color: var(--accent); transform: scale(1.05); }
.user-initials { font-size: 14px; font-weight: 700; color: #fff; line-height:1; }
.user-plan-dot {
    width: 9px; height: 9px; border-radius: 50%;
    position: absolute; bottom: -1px; right: -1px;
    border: 2px solid var(--bg-header, #0f1117);
}
.user-plan-dot.plan-free    { background: #60a5fa; }
.user-plan-dot.plan-premium { background: #fbbf24; }
.user-plan-dot.plan-b2b     { background: #34d399; }
.user-plan-dot.plan-admin   { background: #a78bfa; }

/* Dropdown panel */
.user-dropdown {
    position: fixed;   /* fixed = thoát khỏi mọi stacking context */
    width: 220px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    z-index: 99999;    /* cao nhất, trên cả Leaflet */
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.user-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-dropdown-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}
.ud-name  { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ud-email { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-plan  {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; display: inline-block;
}
.ud-plan.plan-free    { background: rgba(96,165,250,.15);  color: #60a5fa; }
.ud-plan.plan-premium { background: rgba(251,191,36,.15);  color: #fbbf24; }
.ud-plan.plan-b2b     { background: rgba(52,211,153,.15);  color: #34d399; }
.ud-plan.plan-admin   { background: rgba(167,139,250,.15); color: #a78bfa; }

.user-dropdown-body { padding: 6px 0 8px; }
.ud-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    font-size: 13px; color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
}
.ud-item:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.ud-divider { height: 1px; background: var(--border); margin: 4px 0; }
.ud-logout { color: var(--danger) !important; }
.ud-logout:hover { background: rgba(248,113,113,.08) !important; }

/* Header buttons (chưa đăng nhập) */
.btn-header {
    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
    text-decoration: none; color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all var(--transition); white-space: nowrap;
}
.btn-header:hover { color: var(--text-primary); border-color: var(--border-hover); }
.btn-header-primary {
    background: var(--accent); color: #fff !important;
    border-color: var(--accent);
}
.btn-header-primary:hover { opacity: .9; }

/* ══════════════════════════════════════════
   TOOLBAR DỌC TRÁI
   ══════════════════════════════════════════ */
#map-toolbar {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 6px;
    box-shadow: var(--shadow);
}
.tb-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    position: relative;
}
.tb-btn:hover {
    background: rgba(255,255,255,.08);
    color: var(--text-primary);
    border-color: var(--border);
}
.tb-btn.tb-btn-active {
    background: rgba(79,156,249,.15);
    color: var(--accent);
    border-color: rgba(79,156,249,.35);
}
.tb-btn svg { pointer-events: none; }

/* Tooltip */
.tb-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
}
.tb-divider {
    width: 20px; height: 1px;
    background: var(--border);
    margin: 2px 0;
}

/* Thu gọn toolbar — chỉ còn hiện nút mở lại, ẩn hết công cụ + gạch chia */
#map-toolbar.tb-collapsed .tb-btn:not(#tb-toolbar-toggle),
#map-toolbar.tb-collapsed .tb-divider {
    display: none;
}
#map-toolbar.tb-collapsed { padding: 6px; }
#tb-toolbar-toggle svg { transition: transform .2s; }
#map-toolbar.tb-collapsed #tb-toolbar-toggle svg { transform: rotate(180deg); }

/* ── Draggable panel styles ── */
.dragging { opacity: .85; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important; }

/* Panel công cụ nổi (Đo đạc, Tra cứu sáp nhập, Vẽ tự do) khi thu gọn — chỉ còn tiêu đề,
   tự động khi bắt đầu kéo bản đồ, hoặc bấm vào tiêu đề để thu gọn/mở rộng thủ công */
.panel-collapsed { height: auto !important; min-height: 0 !important; }
#layer-panel { transition: none; } /* tắt transition khi drag */
/* Chevron ▴/▾ của Lớp bản đồ giờ chỉ đổi hướng theo class panel-collapsed (hệ thống
   thu gọn dùng chung), không còn JS riêng đổi text nữa — tránh 2 hệ thống giẫm nhau */
#layer-panel.panel-collapsed #layer-panel-chevron { transform: rotate(180deg); }

@media (max-width: 600px) {
    /* Khi thu gọn trên mobile, tiêu đề chỉ nên rộng vừa đủ chữ "Lớp bản đồ", không
       kéo dài hết chiều ngang điện thoại như lúc đang mở */
    #layer-panel.panel-collapsed {
        width: fit-content;
        max-width: calc(100vw - 20px);
    }
}

/* ── Legend cập nhật ── */
#legend {
    position: absolute;
    bottom: 28px;
    right: 14px;
    z-index: 500;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    min-width: 200px;
    max-width: 260px;
    max-height: calc(100vh - 160px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#legend-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--border);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}
#legend-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 13px; padding: 0 2px;
    transition: color .15s; line-height: 1;
}
#legend-close:hover { color: var(--danger); }
#legend-items {
    overflow-y: auto;
    padding: 6px 0;
    flex: 1;
}
#legend-items::-webkit-scrollbar { width: 3px; }
#legend-items::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    transition: background .12s;
}
.legend-item:hover { background: rgba(255,255,255,.04); }
.legend-dot {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 2px solid;
}
.legend-code {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    font-family: monospace;
    flex-shrink: 0;
    min-width: 28px;
}
.legend-name { flex: 1; }

/* Mobile */
@media (max-width: 768px) {
    #map-toolbar { top: auto; bottom: 80px; transform: none; left: 10px; }
    #legend { display: none; }
}

/* Legend body — collapsible */
#legend-body {
    overflow-y: auto;
    max-height: calc(100vh - 220px);
    transition: max-height .2s ease;
}
#legend-body::-webkit-scrollbar { width: 3px; }
#legend-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

/* ── Zoom indicator ── */
#zoom-indicator {
    position: absolute;
    bottom: 8px;
    left: 60px;
    z-index: 500;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: monospace;
    pointer-events: none;
    transition: color .2s, border-color .2s;
}
#zoom-indicator.zoom-at-max {
    color: var(--warning, #fbbf24);
    border-color: rgba(251,191,36,.4);
}

/* ══════════════════════════════════════════
   PIN PANEL
   ══════════════════════════════════════════ */
#pin-panel {
    position: absolute;
    top: 70px;
    left: 62px;
    width: 260px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    z-index: 500;
    overflow: hidden;
}
#pin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    cursor: default;
}
#pin-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 13px; padding: 0 2px;
}
#pin-panel-close:hover { color: var(--danger); }
#pin-panel-body { padding: 10px 0; max-height: 320px; overflow-y: auto; }
#pin-panel-body::-webkit-scrollbar { width: 3px; }
#pin-panel-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }
.pin-loading, .pin-empty {
    padding: 16px; text-align: center;
    font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.pin-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 13px; cursor: pointer;
    transition: background .13s;
}
.pin-item:hover { background: rgba(255,255,255,.05); }
.pin-dot-sm {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; border: 2px solid rgba(255,255,255,.3);
}
.pin-item-info { flex: 1; min-width: 0; }
.pin-item-title {
    font-size: 12.5px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pin-item-meta {
    display: flex; gap: 6px; margin-top: 2px;
    font-size: 10.5px; color: var(--text-dim);
}
.pin-del-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 12px; padding: 2px 4px;
    border-radius: 4px; flex-shrink: 0;
    transition: background .13s, color .13s;
}
.pin-del-btn:hover { background: rgba(248,113,113,.15); color: var(--danger); }

/* Parcel form — gắn với toolbar */
#parcel-form {
    position: absolute;
    top: 70px;
    left: 62px;
    width: 260px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    z-index: 500;
    padding: 14px;
    display: none;
}
#parcel-form.visible { display: block; }
#parcel-form h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.form-field label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.form-field input {
    width: 100%; padding: 7px 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border); border-radius: 7px;
    color: var(--text-primary); font-size: 13px; outline: none;
}
.form-field input:focus { border-color: var(--accent); }
#parcel-form .btn-primary {
    width: 100%; padding: 8px;
    background: var(--accent); color: #fff; border: none;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: opacity .15s;
}
#parcel-form .btn-primary:hover { opacity: .9; }

/* Ẩn FAB cũ hoàn toàn */
#fab-buttons { display: none !important; }

/* ══════════════════════════════════════════
   BOUNDARY SEARCH — Tìm tỉnh/phường
   ══════════════════════════════════════════ */
#boundary-search-wrap {
    position: relative;
    flex-shrink: 0;
    width: 200px;
}
.b-search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
#boundary-search-input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
#boundary-search-input:focus { border-color: var(--accent); }
#boundary-search-input::placeholder { color: var(--text-dim); }

#boundary-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 2000;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.b-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .13s;
    font-size: 13px;
}
.b-result-item:hover { background: rgba(255,255,255,.06); }
.b-result-type {
    font-size: 11px;
    color: var(--text-dim);
    flex-shrink: 0;
    white-space: nowrap;
}
.b-result-name { color: var(--text-primary); flex: 1; }
.b-no-result {
    padding: 12px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

/* ── Boundary info panel ── */
#boundary-info-panel {
    position: absolute;
    bottom: 32px;
    left: 62px;
    width: 240px;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    z-index: 500;
    overflow-x: hidden;
    /* Giới hạn chiều cao + cho cuộn: nội dung (ảnh vệ tinh + bảng thông số cạnh...) có thể
       cao hơn cả màn hình, trước đây panel không có max-height/overflow-y nên phần thân
       tràn LÊN TRÊN che mất chính thanh tiêu đề (nơi có nút ✕ Đóng) — kết quả là panel bị
       "kẹt" không có cách nào đóng lại, đặc biệt rõ trên mobile vì màn hình thấp hơn. */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
}
.b-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    border-bottom: 1px solid var(--border);
    /* Dính ở trên cùng của vùng cuộn (panel) — nút ✕ Đóng luôn ở trong tầm tay dù nội dung
       bên dưới dài cỡ nào và người dùng đang cuộn xem ở đâu. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel, #1a1a1f);
    backdrop-filter: blur(14px);
}
.b-info-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.b-info-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 14px; padding: 0 2px;
}
.b-info-close:hover { color: var(--danger); }
.b-info-share {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 13px; padding: 0 2px;
}
.b-info-share:hover { color: var(--accent, #4f9cf9); }
.b-info-body { padding: 8px 0; }
.b-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 13px;
    font-size: 12px;
}
.b-info-row span { color: var(--text-secondary); }
.b-info-row strong { color: var(--text-primary); }
.b-info-actions { padding: 8px 13px 12px; }
.b-btn-wards {
    width: 100%;
    padding: 7px;
    background: rgba(79,156,249,.12);
    border: 1px solid rgba(79,156,249,.3);
    border-radius: 8px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.b-btn-wards:hover { background: rgba(79,156,249,.22); }
.b-loading {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}

/* ── Ảnh vệ tinh cắt riêng theo thửa (tự xoay theo cạnh dài nhất) ── */
.lp-snapshot-wrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    background: #0d1117; overflow: hidden;
}
.lp-snapshot-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.lp-snapshot-canvas.lp-snapshot-grabbing { cursor: grabbing; }
.lp-snapshot-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-dim); background: #0d1117;
}
.lp-snapshot-compass {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(13,17,23,.7); display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 0; pointer-events: none;
}
.lp-compass-arrow { display: block; color: #ff3b30; font-size: 10px; line-height: 1; transform-origin: 50% 60%; }
.lp-compass-n { display: block; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; margin-top: 1px; }
.lp-snapshot-zoomctl {
    position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px;
}
.lp-snapshot-zoomctl button {
    width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer;
    background: rgba(13,17,23,.75); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.lp-snapshot-zoomctl button:hover { background: rgba(13,17,23,.95); }
.lp-snapshot-hint {
    position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
    font-size: 9.5px; color: rgba(255,255,255,.55); pointer-events: none;
}

/* ── Nút Chỉ đường / Quan tâm thửa đất ── */
.b-info-actions { display: flex; gap: 8px; }
/* Layout 2 hàng (land-parcels.js): hàng 1 = Chỉ đường + Bản đồ 3D, hàng 2 = Quan tâm thửa đất
   này riêng — tách hàng cho cân đối thay vì nhồi 3 nút chật 1 hàng */
.b-info-actions-row { display: flex; gap: 8px; margin-bottom: 8px; }
.b-info-actions-row:last-child { margin-bottom: 0; }
.b-action-btn {
    flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer; border: none;
    background: rgba(255,255,255,.06); color: var(--text-primary); text-decoration: none;
}
.b-action-btn:hover { background: rgba(255,255,255,.1); }
.b-action-btn-accent { background: var(--accent); color: #fff; }
.b-action-btn-accent:hover { filter: brightness(1.1); }

/* ── Bảng thông số cạnh thửa (độ dài các đoạn ranh) ── */
.b-edges-section { border-top: 1px solid var(--border); }
.b-edges-toggle {
    padding: 10px 13px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.b-edges-toggle:hover { color: var(--text-primary); }
.b-edges-table-wrap { max-height: 160px; overflow-y: auto; }
.b-edges-table-wrap::-webkit-scrollbar { width: 4px; }
.b-edges-table-wrap::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }
.b-edges-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.b-edges-table thead th { position: sticky; top: 0; background: var(--bg-panel); }

/* Nhãn chiều dài cạnh hiện trực tiếp trên bản đồ, tại điểm giữa mỗi cạnh thửa */
.lp-edge-label {
    background: rgba(15,18,26,.85); color: #fff; font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 5px; white-space: nowrap; transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none;
}
.b-edges-table th {
    text-align: left; padding: 4px 13px; color: var(--text-dim); font-weight: 600; font-size: 10.5px;
}
.b-edges-table td { padding: 4px 13px; color: var(--text-primary); }
.b-edges-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }

/* ── Modal "Quan tâm thửa đất này" ── */
.lp-lead-overlay {
    position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.55);
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.lp-lead-box {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
    max-width: 340px; width: 100%; padding: 18px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.lp-lead-header {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 4px;
}
.lp-lead-header button { background: none; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.lp-lead-box input, .lp-lead-box textarea {
    background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 11px; color: var(--text-primary); font-size: 13px; font-family: inherit; resize: vertical;
}
.lp-lead-submit {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.lp-lead-submit:hover { filter: brightness(1.1); }

/* ── Panel chi tiết xã/phường: sáp nhập, diện tích, dân số, trung tâm HC, căn cứ pháp lý ── */
#boundary-info-panel:has(.b-field-legal) { width: 290px; }
.b-field-province {
    padding: 8px 13px 0;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}
.b-field-label {
    padding: 10px 13px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}
.b-field-label-green { color: #22c98e; }
.b-field-value {
    padding: 0 13px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-primary);
}
.b-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 13px;
    font-size: 12px;
}
.b-field-row span { color: var(--text-secondary); flex-shrink: 0; }
.b-field-row strong { color: var(--text-primary); text-align: right; }
.b-empty-val { color: var(--text-dim); font-style: italic; font-weight: 400; font-size: 11px; }
.b-field-divider { height: 1px; background: var(--border); margin: 8px 13px; }
.b-field-legal {
    padding: 0 13px 12px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.5;
}
.b-field-empty { font-size: 12px; color: var(--text-dim); padding: 10px 13px; }

/* ── Leaflet boundary tooltip ── */
.boundary-tooltip {
    background: rgba(15,17,23,.9) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    color: #e8ecf4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
    white-space: nowrap;
}
.boundary-tooltip-ward {
    font-weight: 400 !important;
    font-size: 11px !important;
}
.leaflet-tooltip-top.boundary-tooltip::before,
.leaflet-tooltip-bottom.boundary-tooltip::before {
    border-top-color: rgba(255,255,255,.1) !important;
    border-bottom-color: rgba(255,255,255,.1) !important;
}
/* ══════════════════════════════════════════════════════
   MODAL TRA CỨU SÁP NHẬP
   ══════════════════════════════════════════════════════ */
/* ── Leaflet boundary tooltip ── */
.boundary-tooltip {
    background: rgba(15,17,23,.9) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    color: #e8ecf4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
    white-space: nowrap;
}
.boundary-tooltip-ward {
    font-weight: 400 !important;
    font-size: 11px !important;
}
.leaflet-tooltip-top.boundary-tooltip::before,
.leaflet-tooltip-bottom.boundary-tooltip::before {
    border-top-color: rgba(255,255,255,.1) !important;
    border-bottom-color: rgba(255,255,255,.1) !important;
}
/* ══════════════════════════════════════════════════════
   MODAL TRA CỨU SÁP NHẬP
   ══════════════════════════════════════════════════════ */
.wh-modal-overlay {
    position: fixed;
    top: 90px; left: 80px;
    z-index: 3000;
    width: 440px; max-width: calc(100vw - 20px);
}
.wh-modal {
    width: 100%;
    max-height: 85vh;
    background: #12141c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.wh-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(135deg, var(--accent), #2b7fd6);
    flex-shrink: 0;
    cursor: move;
    user-select: none;
}
.wh-modal-title { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.wh-modal-close {
    background: rgba(255,255,255,.15); border: none; cursor: pointer;
    color: #fff; width: 26px; height: 26px; border-radius: 50%;
    font-size: 13px; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.wh-modal-close:hover { background: rgba(255,255,255,.28); }

.wh-search-row {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 16px 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    flex-shrink: 0;
}
.wh-search-icon { font-size: 13px; opacity: .6; }
.wh-search-row input {
    flex: 1; background: none; border: none; outline: none;
    color: #e8ecf4; font-size: 13px;
}
.wh-search-row input::placeholder { color: #6b7280; }
#wh-search-clear {
    background: none; border: none; cursor: pointer;
    color: #6b7280; font-size: 12px; padding: 2px;
}
#wh-search-clear:hover { color: #e8ecf4; }

.wh-status {
    padding: 2px 18px 8px;
    font-size: 11px; color: #6b7280;
    flex-shrink: 0;
}

.wh-list {
    overflow-y: auto;
    padding: 0 10px;
    flex: 1 1 auto;
    min-height: 120px;
}
.wh-empty, .wh-loading-mini {
    padding: 20px; text-align: center; font-size: 12px; color: #6b7280;
}

.wh-province { margin-bottom: 3px; }
.wh-province-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.wh-province-row:hover { background: rgba(255,255,255,.05); }
.wh-chevron {
    font-size: 14px; color: #6b7280; width: 12px; text-align: center;
    transition: transform .15s;
    flex-shrink: 0;
}
.wh-chevron.open { transform: rotate(90deg); color: var(--accent); }
.wh-province-name { flex: 1; font-size: 13px; font-weight: 600; color: #e8ecf4; }
.wh-badge {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    flex-shrink: 0;
}
.wh-badge-code { background: rgba(255,255,255,.06); color: #9aa3b5; }
.wh-badge-count { background: rgba(79,156,249,.18); color: var(--accent); }
.wh-badge-count-sm { background: rgba(79,156,249,.14); color: var(--accent); font-size: 10px; padding: 1px 7px; }

.wh-ward-list { padding: 2px 0 6px 26px; }
.wh-ward-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px; color: #b8c0d4;
    transition: background .12s, color .12s;
}
.wh-ward-row:hover { background: rgba(255,255,255,.05); color: #e8ecf4; }
.wh-ward-row.selected {
    background: var(--accent); color: #fff;
}
.wh-ward-row.selected .wh-ward-name { color: #fff; font-weight: 600; }
.wh-ward-row.selected .wh-badge { background: rgba(255,255,255,.25); color: #fff; }
.wh-ward-matched { font-size: 10.5px; color: var(--accent); margin-top: 1px; }
.wh-ward-row.selected .wh-ward-matched { color: rgba(255,255,255,.85); }

.wh-province-row-static { cursor: default; }
.wh-province-row-static:hover { background: none; }
.wh-badge-code-sm { background: rgba(255,255,255,.06); color: #9aa3b5; font-size: 10px; padding: 1px 7px; }

.wh-search-item {
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
    transition: background .12s;
}
.wh-search-item:hover { background: rgba(255,255,255,.05); }
.wh-search-name { font-size: 13px; font-weight: 600; color: #e8ecf4; }
.wh-search-province { font-size: 11px; font-weight: 400; color: #6b7280; }
.wh-search-old { font-size: 11px; color: var(--accent); margin-top: 2px; }

.wh-detail {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 14px 18px;
    max-height: 240px;
    overflow-y: auto;
    flex-shrink: 0;
    background: rgba(255,255,255,.015);
}
.wh-detail-empty { font-size: 12.5px; color: #6b7280; text-align: center; padding: 10px 0; }

.wh-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wh-detail-title2 { font-size: 14px; font-weight: 700; color: #e8ecf4; }
.wh-goto-map {
    flex-shrink: 0;
    background: rgba(79,156,249,.15);
    border: 1px solid rgba(79,156,249,.4);
    color: var(--accent);
    font-size: 11px; font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.wh-goto-map:hover { background: rgba(79,156,249,.28); }
.wh-detail-field { font-size: 12px; color: #b8c0d4; margin-bottom: 3px; }
.wh-detail-field span { color: #6b7280; margin-right: 4px; }
.wh-detail-field-label {
    font-size: 11px; color: #6b7280; text-transform: uppercase;
    letter-spacing: .03em; margin: 10px 0 5px;
}
.wh-detail-oldtext {
    font-size: 12.5px; line-height: 1.6; color: #d5dae6;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 10px 12px;
}

@media (max-width: 480px) {
    /* Chỉ cao 50% màn hình (dạng bottom sheet), không che hết điện thoại — bên trong
       tự cuộn (.wh-list, .wh-detail đã có overflow-y:auto sẵn). Dùng "dvh" sau "vh"
       để tính đúng theo khung nhìn thực tế trên trình duyệt mobile hỗ trợ (thanh địa
       chỉ ẩn/hiện), trình duyệt cũ không hiểu dvh sẽ tự bỏ qua và giữ nguyên vh. */
    .wh-modal-overlay {
        top: auto; left: 10px; right: 10px; bottom: 12px;
        width: auto; max-width: none;
        height: 50vh; height: 50dvh;
    }
    .wh-modal { width: 100%; height: 100%; max-height: none; }
    .wh-list { min-height: 70px; }
    /* Chi tiết phường/xã khi chọn — vẫn nằm gọn trong khung 50% đó, tự cuộn riêng
       nếu nội dung dài, không đẩy tràn ra ngoài khung */
    .wh-detail { max-height: 34vh; max-height: 34dvh; }
}

/* ══════════════════════════════════════════════════════
   PANEL ĐO ĐẠC
   ══════════════════════════════════════════════════════ */
#measure-panel {
    position: fixed;
    top: 90px;
    right: 16px;
    width: 168px;
    background: #12141c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    z-index: 900;
    overflow: hidden;
}
#measure-panel.dragging { box-shadow: 0 16px 40px rgba(0,0,0,.55); }

#measure-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
#measure-drag-handle {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    cursor: move;
    padding: 2px 0;
    user-select: none;
}
#measure-close {
    background: none; border: none; cursor: pointer;
    color: #6b7280; width: 20px; height: 20px; border-radius: 5px;
    font-size: 11px; line-height: 1; flex-shrink: 0;
}
#measure-close:hover { background: rgba(255,255,255,.08); color: #e8ecf4; }

#measure-buttons { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.measure-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: #b8c0d4;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}
.measure-btn-icon { font-size: 14px; flex-shrink: 0; }
.measure-btn:hover { background: rgba(255,255,255,.07); color: #e8ecf4; }
.measure-btn.active {
    background: rgba(245,158,11,.15);
    border-color: rgba(245,158,11,.4);
    color: #f59e0b;
}
.measure-btn-danger { color: #f87171; }
.measure-btn-danger:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); color: #f87171; }

/* Nhãn hiển thị khoảng cách/diện tích ngay trên bản đồ */
.measure-label span {
    display: inline-block;
    background: rgba(15,17,23,.92);
    border: 1.5px solid #22c98e;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #e8ecf4;
    white-space: nowrap;
    transform: translate(-50%, -130%);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

@media (max-width: 480px) {
    #measure-panel { width: 148px; }
}

/* ══════════════════════════════════════════════════════
   PANEL VẼ TỰ DO
   ══════════════════════════════════════════════════════ */
#draw-panel {
    position: fixed;
    top: 90px;
    right: 16px;
    width: 176px;
    background: #12141c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    z-index: 900;
    overflow: hidden;
}
#draw-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
#draw-drag-handle {
    flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: #6b7280; cursor: move; user-select: none;
}
#draw-close {
    background: none; border: none; cursor: pointer;
    color: #6b7280; width: 20px; height: 20px; border-radius: 5px;
    font-size: 11px; line-height: 1; flex-shrink: 0;
}
#draw-close:hover { background: rgba(255,255,255,.08); color: #e8ecf4; }

#draw-buttons { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.draw-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: #b8c0d4;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}
.draw-btn-icon { font-size: 14px; flex-shrink: 0; }
.draw-btn:hover { background: rgba(255,255,255,.07); color: #e8ecf4; }
.draw-btn.active {
    background: rgba(59,130,246,.15);
    border-color: rgba(59,130,246,.4);
    color: #3b82f6;
}
.draw-divider { height: 1px; background: rgba(255,255,255,.08); margin: 2px 0; }

/* Panel Bản vẽ của tôi */
#draw-list-panel {
    position: absolute;
    top: 70px;
    left: 62px;
    width: 270px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    z-index: 950;
    overflow: hidden;
}
#draw-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 13px;
    font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
#draw-list-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 13px; padding: 0 2px;
}
#draw-list-close:hover { color: var(--danger); }
#draw-list-body { padding: 6px 0; max-height: 360px; overflow-y: auto; }

.draw-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 13px; cursor: pointer;
    transition: background .13s;
}
.draw-list-item:hover { background: rgba(255,255,255,.05); }
.draw-dot-sm {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; border: 2px solid rgba(255,255,255,.3);
}
.draw-item-info { flex: 1; min-width: 0; }
.draw-item-title {
    font-size: 12.5px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.draw-item-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.draw-item-note {
    font-size: 11px; color: var(--text-secondary); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; font-style: italic;
}
.draw-popup-note { font-size: 12px; color: #444; margin-top: 4px; white-space: pre-wrap; }
.draw-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.draw-act-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 12px; padding: 3px 5px;
    border-radius: 4px;
    transition: background .13s, color .13s;
}
.draw-act-btn:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

@media (max-width: 480px) {
    #draw-panel { width: 156px; }
    #draw-list-panel { left: 10px; right: 10px; width: auto; }
}

/* ══════════════════════════════════════════════════════
   FORM LƯU BẢN VẼ (dwm = draw modal) — class riêng, KHÔNG
   dùng chung với class modal-* của admin (không tồn tại ở đây)
   ══════════════════════════════════════════════════════ */
.dwm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.dwm-box {
    width: 360px; max-width: 100%;
    background: #12141c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    overflow: hidden;
}
.dwm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.dwm-title { font-size: 14px; font-weight: 700; color: #e8ecf4; }
.dwm-close {
    background: rgba(255,255,255,.08); border: none; cursor: pointer;
    color: #e8ecf4; width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; line-height: 1;
}
.dwm-close:hover { background: rgba(255,255,255,.16); }

.dwm-body { padding: 16px; }
.dwm-group { margin-bottom: 14px; }
.dwm-group:last-child { margin-bottom: 0; }
.dwm-label {
    display: block; font-size: 11.5px; font-weight: 600;
    color: #9aa3b5; margin-bottom: 6px;
}
.dwm-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px; color: #e8ecf4;
    font-family: inherit;
}
.dwm-input:focus { outline: none; border-color: #3b82f6; }
textarea.dwm-input { resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.4; }
.dwm-checkbox-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #b8c0d4; cursor: pointer;
}
.dwm-checkbox-row input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #3b82f6; }
.dwm-color-pick {
    width: 44px; height: 38px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    cursor: pointer; padding: 2px; background: transparent;
}

.dwm-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06);
}
.dwm-btn {
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; font-family: inherit;
    transition: opacity .15s, background .15s;
}
.dwm-btn-primary { background: #3b82f6; color: #fff; }
.dwm-btn-primary:hover { background: #2563eb; }
.dwm-btn-secondary { background: rgba(255,255,255,.06); color: #b8c0d4; }
.dwm-btn-secondary:hover { background: rgba(255,255,255,.12); }

@media (max-width: 480px) {
    .dwm-box { width: 100%; }
}

/* ── Zoom hint dùng chung (Ranh thửa đất, Quy hoạch xây dựng...) khi zoom chưa đủ sâu ── */
.zoom-hint-banner {
    position: fixed;
    top: 90px; left: 50%; transform: translateX(-50%);
    background: rgba(15,17,23,.92);
    border: 1px solid rgba(234,179,8,.4);
    color: #eab308;
    font-size: 12.5px; font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 900;
    display: none;
}
/* ============================================================
   MODULE NỘI DUNG — Thông báo (cn-*) + Quảng cáo (cn-ad-*)
   ============================================================ */

/* ── Banner (thông báo) — nằm đầu trang, đẩy nội dung xuống ── */
.cn-banner {
    position: relative; z-index: 1200;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 44px 9px 16px;
    background: color-mix(in srgb, var(--cn-color) 14%, var(--bg-panel));
    border-bottom: 1px solid color-mix(in srgb, var(--cn-color) 45%, transparent);
    color: var(--text-primary); font-size: 13px; line-height: 1.4;
}
.cn-banner-text { flex: 1; min-width: 200px; }
.cn-banner-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.cn-banner-link { color: var(--cn-color); font-weight: 600; white-space: nowrap; text-decoration: none; }
/* Ảnh nằm trên (thay vì cạnh chữ) — banner xếp theo cột, ảnh full chiều rộng, chiều
   cao theo cấu hình admin, chiều rộng tự co giãn theo tỉ lệ ảnh gốc (object-fit: contain) */
.cn-banner.cn-banner-img-top { flex-direction: column; align-items: stretch; padding: 0 0 10px; }
.cn-banner.cn-banner-img-top .cn-banner-img {
    width: auto; max-width: 100%; height: auto; border-radius: 0;
    align-self: center; object-fit: contain; margin-bottom: 8px;
}
.cn-banner.cn-banner-img-top .cn-banner-text,
.cn-banner.cn-banner-img-top .cn-banner-link { padding: 0 16px; }
.cn-banner-link:hover { text-decoration: underline; }
.cn-banner-close {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer;
    width: 26px; height: 26px; border-radius: 50%;
}
.cn-banner-close:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

/* ── Modal (thông báo) ── */
.cn-modal-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.cn-modal {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
    max-width: 440px; width: 100%; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cn-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.cn-modal-title { font-size: 15px; font-weight: 700; }
.cn-modal-close { background: none; border: none; color: var(--text-3); font-size: 16px; cursor: pointer; }
.cn-modal-body { padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: inherit; opacity: .9; overflow-y: auto; }
.cn-modal-img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.cn-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.btn-cn-primary, .btn-cn-secondary {
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-cn-primary { background: var(--accent); border: none; color: #fff; }
.btn-cn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-2); }

/* ── Ghim trên bản đồ (thông báo) — icon lớn gấp 2 lần trước (24px → 48px) ── */
.cn-map-pin-icon { font-size: 48px; line-height: 1; text-align: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); cursor: pointer; }
.cn-pin-popup { font-size: 13px; max-width: 240px; }
.cn-pin-img { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.cn-pin-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.cn-pin-body { color: inherit; opacity: .9; line-height: 1.5; margin-bottom: 6px; }

/* Nhãn cố định hiện luôn cạnh ghim (always_show_on_map) — không cần bấm mới thấy */
.cn-pin-tooltip.leaflet-tooltip {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 1;
    /* Leaflet mặc định white-space: nowrap cho tooltip (tự giãn rộng theo nội dung,
       không xuống dòng) — khiến nội dung dài tràn ra khỏi khung, thậm chí tràn ra
       ngoài khung bản đồ. Ép xuống dòng + giới hạn chiều rộng tối đa. */
    white-space: normal !important;
    max-width: 220px;
    word-wrap: break-word;
}
.cn-pin-tooltip.leaflet-tooltip::before { border-top-color: var(--border); }
.cn-pin-tooltip-inner { max-width: 200px; font-size: 12px; }
.cn-pin-tooltip-img { display: block; width: 100%; max-height: 90px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.cn-pin-tooltip-title { font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-pin-tooltip-body { color: inherit; opacity: .75; margin-top: 3px; line-height: 1.4; }

/* Nhãn gọn chỉ hiện tiêu đề — dùng khi KHÔNG bật "hiện luôn nội dung", để ghim không
   bao giờ trơ trọi chỉ có icon mà không biết là thông báo/quảng cáo gì */
.cn-pin-tooltip-compact-wrap.leaflet-tooltip { padding: 4px 10px; max-width: 160px; }
.cn-pin-tooltip-inner.cn-pin-tooltip-compact {
    font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ghim quảng cáo trên bản đồ — cả popup lẫn nhãn-hiện-luôn đều bọc trong <a>, reset lại
   kiểu link mặc định (gạch chân/màu xanh) cho khớp với UI đang có. Cần !important vì
   Leaflet tự set ".leaflet-container a { color: #0078A8 }" — rule đó có độ đặc hiệu
   (specificity) cao hơn 1 class đơn thuần nên luôn đè mất màu chữ tuỳ chỉnh nếu không
   có !important ở đây. */
.cn-ad-pin-link { display: block; text-decoration: none; color: inherit !important; cursor: pointer; }

/* Icon ghim quảng cáo — tự to hơn khi zoom xa (dễ chú ý), nhỏ lại khi zoom gần (đỡ rối),
   có thêm vòng tròn nhấp nháy (pulse) loang ra phía sau để thu hút mắt hơn */
.cn-ad-pin-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.cn-ad-pin-glyph { position: relative; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.cn-ad-pin-pulse {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(79,156,249,.55), rgba(79,156,249,0) 70%);
    animation: cn-ad-pulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes cn-ad-pulse {
    0%   { transform: translate(-50%, -50%) scale(.55); opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Nhiều ghim quảng cáo gần nhau tự gom thành 1 điểm khi zoom xa (Leaflet.markercluster) */
.cn-ad-cluster-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.3);
}

/* ── Quảng cáo dùng chung ── */
.cn-ad-badge {
    display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-3); background: rgba(255,255,255,.06);
    border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
}
.cn-ad-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cn-ad-text { min-width: 0; }
.cn-ad-title { font-size: 13px; font-weight: 600; color: inherit; }
.cn-ad-desc { font-size: 11.5px; color: inherit; opacity: .75; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Banner quảng cáo đầu trang */
.cn-ad-banner {
    display: flex; align-items: center; gap: 10px; position: relative; z-index: 1100;
    padding: 8px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
}

/* Nổi góc màn hình — vị trí (top/left/right/bottom) được set qua JS theo lựa chọn ở
   Admin (4 góc hoặc ngẫu nhiên), không cố định cứng ở đây nữa */
.cn-ad-floating {
    /* Cùng lý do như .cn-corner-container ở trên — đưa xuống dưới cả 2 panel chi tiết/chọn
       bản đồ chồng lớp, không che mất khi người dùng đang xem/thao tác. */
    position: fixed; z-index: 400;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 10px 34px 10px 12px; max-width: 260px;
}
.cn-ad-floating-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.cn-ad-floating-close {
    position: absolute; right: 8px; top: 8px; background: none; border: none;
    color: var(--text-3); font-size: 13px; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
}
.cn-ad-floating-close:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

/* Splash khi vào trang */
.cn-ad-splash-overlay {
    position: fixed; inset: 0; z-index: 3100; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cn-ad-splash {
    position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
    max-width: 380px; width: 100%; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cn-ad-splash-link { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; text-decoration: none; color: inherit; }
.cn-ad-splash .cn-ad-img { width: 96px; height: 96px; }
.cn-ad-splash-close {
    position: absolute; right: 10px; top: 10px; background: none; border: none;
    color: var(--text-3); font-size: 16px; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
}
.cn-ad-splash-close:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

/* Chèn giữa danh sách (ô search chung + tra cứu sáp nhập) */
.cn-ad-inlist {
    display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
    padding: 8px 12px; margin: 4px 8px; border-radius: 8px;
    background: rgba(255,255,255,.03); border: 1px dashed var(--border-hover);
}
.cn-ad-inlist:hover { background: rgba(255,255,255,.06); }

@media (max-width: 480px) {
    .cn-banner, .cn-ad-banner { padding-left: 12px; padding-right: 40px; font-size: 12.5px; }
}

/* ── Góc màn hình (tùy chỉnh) — không có nút đóng, chỉ tắt được từ Admin ── */
.cn-corner-container {
    /* THEO YÊU CẦU: đưa XUỐNG dưới #boundary-info-panel (z-index 500, panel chi tiết thửa
       đất/khu QHXD/ranh giới) và .ov-area-panel (z-index 2000, panel chọn bản đồ chồng lớp)
       — để khi người dùng đang xem chi tiết hoặc tick chọn bản đồ, "Nội dung" góc màn hình
       không che mất, xem được rõ ràng. (Lần sửa trước đưa lên 2050 là NGƯỢC ý muốn — đã đổi lại). */
    position: fixed; z-index: 400;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; /* click xuyên qua khoảng trống giữa các box */
}
.cn-corner-top-left     { top: 0;    left: 0; }
.cn-corner-top-right    { top: 0;    right: 0; }
.cn-corner-bottom-left  { bottom: 0; left: 0; }
.cn-corner-bottom-right { bottom: 0; right: 0; }
.cn-corner-box {
    pointer-events: auto;
    background: #1e293b; color: #fff;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    font-size: 13px; line-height: 1.5;
}
/* Bo góc 3 cạnh, để thẳng góc phía đang áp sát mép màn hình */
.cn-corner-top-left     .cn-corner-box { border-radius: 0 0 12px 0; }
.cn-corner-top-right    .cn-corner-box { border-radius: 0 0 0 12px; }
.cn-corner-bottom-left  .cn-corner-box { border-radius: 0 12px 0 0; }
.cn-corner-bottom-right .cn-corner-box { border-radius: 12px 0 0 0; }
.cn-corner-img { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.cn-corner-title { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.cn-corner-body { opacity: .85; font-size: 12.5px; }
.cn-corner-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; text-decoration: underline; }

@media (max-width: 480px) {
    .cn-corner-container { max-width: calc(50vw - 24px); }
    .cn-corner-box { width: 100% !important; }
}

/* ── Chuẩn hoá kích thước chữ trên mobile cho toàn bộ module "Nội dung trên Map"
   (Thông báo + Quảng cáo) — trước đây nhiều tiêu đề không có font-size riêng, chỉ kế thừa
   mơ hồ từ khung chứa; trên màn hình hẹp khung chứa co lại nhưng chữ giữ nguyên kích thước,
   gây cảm giác chữ quá to/mất cân đối so với phần nội dung bên dưới (vốn đã nhỏ sẵn). ── */
@media (max-width: 480px) {
    .cn-toast-title  { font-size: 12.5px; }
    .cn-corner-title { font-size: 12.5px; }
    .cn-pin-title    { font-size: 13px; }
    .cn-modal-title  { font-size: 14px; }
    .cn-modal-body   { font-size: 12.5px; padding: 14px 16px; }
    .cn-ad-title     { font-size: 12.5px; }
    /* Icon ghim thông báo trên bản đồ (48px) khá to trên màn hình nhỏ, dễ che khuất khu vực
       xung quanh — thu nhỏ lại còn 2/3 cho cân đối hơn với tầm nhìn bản đồ mobile */
    .cn-map-pin-icon { font-size: 32px; }
    .cn-pin-popup    { font-size: 12px; max-width: 200px; }
    .cn-pin-tooltip-inner { font-size: 11px; max-width: 160px; }
}
/* ===== Bản đồ quy hoạch chồng lớp (Ground Overlay) — marker + cluster theo khu vực ===== */

/* Icon 1 marker lẻ (chưa gom cụm) */
.ov-single-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.4);
}
/* Icon cụm gom nhiều bản đồ gần nhau (Leaflet.markercluster) — hiện số lượng */
.ov-cluster-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.4);
}

/* Bảng nổi liệt kê bản đồ tại khu vực vừa bấm — hiện gần điểm bấm, không chặn thao tác bản đồ */
.ov-area-panel {
    position: fixed; z-index: 2000; width: 300px; max-height: 380px;
    background: var(--surface-1, #1a1a1f); border: 1px solid var(--border-1, rgba(255,255,255,.1));
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); overflow: hidden;
    display: flex; flex-direction: column;
}
.ov-area-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--accent, #6366f1), #7c3aed); flex-shrink: 0;
}
.ov-area-panel-close { background: none; border: none; color: #fff; opacity: .85; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.ov-area-panel-close:hover { opacity: 1; }
.ov-area-panel-body {
    padding: 8px 12px; overflow-y: auto;
    /* flex:1 + min-height:0 bắt buộc phải có cho phần tử con overflow-y:auto bên trong 1
       flex-column cha (.ov-area-panel) — thiếu min-height:0 thì Safari/WebKit trên iPhone
       thật (khác hẳn Chrome DevTools mô phỏng mobile, vẫn dùng engine Chrome/Blink như trên
       máy tính) có thể co phần này về gần như 0 chiều cao, khiến chỉ thấy tiêu đề mà không
       thấy danh sách bản đồ + ô tick bên dưới, dù cùng 1 đoạn code y hệt trên desktop. */
    flex: 1 1 auto; min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: bottom sheet dính đáy màn hình, full-width — thay vì định vị theo toạ độ chạm
   (không đáng tin cậy trên touch event), tránh tình trạng tick bị đẩy ra ngoài không bấm được */
.ov-area-panel.mobile-sheet {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-width: 100%;
    max-height: 70vh; border-radius: 16px 16px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* né thanh home iPhone có notch */
}
.ov-area-panel.mobile-sheet .ov-area-panel-body { max-height: calc(70vh - 46px); }
/* Chrome Android tính "vh" theo chiều cao viewport LỚN NHẤT (lúc thanh địa chỉ đang ẩn) —
   ngay sau khi tải trang, thanh địa chỉ thường đang HIỆN nên viewport thực tế nhỏ hơn 70vh
   tính toán, khiến phần thân (danh sách bản đồ + ô tick) bị đẩy xuống dưới rìa màn hình nhìn
   thấy được, dù DOM vẫn có đủ — chỉ thấy tiêu đề, không bấm được vào tick. "dvh" (dynamic
   viewport height) tính đúng theo viewport đang hiển thị thực tế, khai báo sau để trình duyệt
   hỗ trợ ưu tiên dùng, trình duyệt cũ không hiểu "dvh" sẽ tự bỏ qua và giữ nguyên "vh" ở trên. */
@supports (height: 1dvh) {
    .ov-area-panel.mobile-sheet { max-height: 70dvh; }
    .ov-area-panel.mobile-sheet .ov-area-panel-body { max-height: calc(70dvh - 46px); }
}

/* Lớp nền trong suốt phủ toàn màn hình khi bảng đang mở — bấm vào bất kỳ đâu NGOÀI bảng
   (kể cả trên bản đồ) sẽ tự đóng bảng lại, không cần đợi người dùng bấm nút ✕. Đặt z-index
   ngay dưới .ov-area-panel (2000) để chặn được thao tác với các lớp phía sau trong lúc mở. */
.ov-area-backdrop { position: fixed; inset: 0; z-index: 1999; background: transparent; }

/* Panel chi tiết thửa đất/khu quy hoạch/ranh giới (#boundary-info-panel): trên mobile đổi
   sang bottom sheet dính đáy màn hình, full-width — cùng cách làm với .ov-area-panel ở trên,
   để luôn thấy trọn thanh tiêu đề + nút ✕ Đóng, không bị tràn lên trên/che khuất như trước. */
@media (max-width: 600px) {
    #boundary-info-panel {
        left: 0 !important; right: 0; bottom: 0; top: auto !important;
        width: 100%; max-width: 100%;
        max-height: 75vh; border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px); /* né thanh home iPhone có notch */
    }
    #boundary-info-panel:has(.b-field-legal) { width: 100%; }
}

.ov-map-item { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--border-1, rgba(255,255,255,.06)); }
.ov-map-item:first-child { border-top: none; padding-top: 0; }
.ov-map-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.ov-map-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #eee; }
.ov-map-title { flex: 1; line-height: 1.3; }
.ov-map-title:hover { text-decoration: underline; }
.ov-opacity-row { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .8; margin-left: 42px; }
.ov-opacity-row input[type="range"] { flex: 1; }

/* ===== Địa điểm (POI) — marker thật, hover hiện tên (khác nhãn "nướng sẵn" trong tile ảnh) ===== */
.poi-marker-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35); border: 2px solid #2563eb;
}
.poi-cluster-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.4);
}

/* ===== Tin đăng mua bán — marker "🏷️ bán" / "🔑 cho thuê" + panel xem nhanh ===== */
.ls-marker-icon {
    width: 100%; height: 100%; border-radius: 50% 50% 50% 4px;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.85);
    transform: rotate(45deg);
}
.ls-marker-icon > * { transform: none; }
.ls-cluster-icon {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #10b981);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.4);
}
.ls-detail-panel { width: 260px; }
.ls-panel-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.ls-panel-price { font-weight: 700; color: #34d399; font-size: 14px; margin-bottom: 10px; }
.ls-panel-btn {
    display: block; text-align: center; padding: 8px; border-radius: 7px;
    background: var(--accent, #4f9cf9); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
}
/* Nút Chỉ đường / Bản đồ 3D trong popup POI — popup Leaflet mặc định nền TRẮNG, khác panel
   thửa đất nền tối, nên không dùng lại .b-action-btn được (chữ sẽ gần như vô hình) */
.poi-popup-actions { display: flex; gap: 6px; margin-top: 8px; }
.poi-popup-btn {
    flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px;
    font-size: 11.5px; font-weight: 600; text-decoration: none;
    background: #eff2f7; color: #1d4ed8; border: 1px solid #dbe3ee;
}
.poi-popup-btn:hover { background: #dbe3ee; }