/* ===================== Design Tokens ===================== */
:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #dbeafe;
    --color-accent: #38bdf8;

    --color-bg: #ffffff;
    --color-bg-soft: #f8f9fa;
    --color-bg-muted: #f1f5f9;
    --color-border: #e2e8f0;

    --color-text: #0f172a;
    --color-text-soft: #475569;
    --color-text-mute: #94a3b8;

    --bubble-user: #dbeafe;
    --bubble-ai: #f1f5f9;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* ===================== Reset ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg-soft);
}

/* ===================== App Shell (40/60) ===================== */
.app {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ===================== PANEL TRÁI (40%) ===================== */
/* Lưu ý: sizing do Split.js (#left-pane) quản; chỉ giữ nền/màu theme. */
.panel-left {
    height: 100%;
    background: var(--color-bg);
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-logo {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}
.brand-text h1 { font-size: 22px; font-weight: 800; }
.brand-text h1 span { color: var(--color-primary); }
.brand-text p { font-size: 13px; color: var(--color-text-mute); }

/* Section titles */
.section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-mute);
    margin-bottom: 12px;
}

/* Phần 1: Omnibox */
.omnibox-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.omnibox-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}
.omnibox-mode {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    outline: none;
}
.omnibox-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.omnibox-mic {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .15s, background .2s;
}
.omnibox-mic:hover { background: var(--color-primary-dark); transform: scale(1.06); }

/* Phần 2: Upload Zone */
.upload-zone {
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.upload-zone:hover { background: #cfe1fd; border-color: var(--color-primary-dark); }
.upload-zone.dragover {
    background: #bfdbfe;
    border-color: var(--color-primary-dark);
    transform: scale(1.01);
}
.upload-icon { font-size: 40px; line-height: 1; }
.upload-text { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--color-text); }
.upload-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--color-text-mute); }

/* Phần 3: Chat */
.chat { flex: 1; display: flex; flex-direction: column; }
.chat-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}
.bubble p { margin: 0; }
.bubble-user {
    align-self: flex-end;
    background: var(--bubble-user);
    color: var(--color-primary-dark);
    border-bottom-right-radius: 4px;
}
.bubble-ai {
    align-self: flex-start;
    background: var(--bubble-ai);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}

/* Chat composer */
.chat-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.chat-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.chat-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.chat-send {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.chat-send:hover { background: var(--color-primary-dark); transform: scale(1.06); }

/* MapLibre control & popup blends with theme */
.maplibregl-popup-content {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-family: var(--font);
    font-size: 13px;
    padding: 10px 14px;
}

/* ===================== PANEL PHẢI (60%) ===================== */
.panel-right {
    flex: 1 1 60%;
    max-width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Nửa trên: Dashboard */
.dashboard {
    flex: 0 0 50%;
    height: 50%;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 24px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .15s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-mute);
}
.card-amount {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary);
}
.card-sub { font-size: 13px; color: var(--color-text-soft); }
.card-value {
    background: linear-gradient(135deg, #ffffff, var(--color-primary-light));
    border-color: var(--color-primary-light);
}
.card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-list li {
    font-size: 13.5px;
    color: var(--color-text-soft);
    padding-left: 16px;
    position: relative;
}
.card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Nửa dưới: Map — chiếm phần còn lại sau khi kéo #hsplitter */
.map-section {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* YÊU CẦU #15: Thanh kéo NGANG (dashboard trên / map dưới) */
#hsplitter {
    flex: 0 0 6px;
    height: 6px;
    cursor: row-resize;
    background: var(--color-border);
    position: relative;
    z-index: 5;
    transition: background .15s;
}
#hsplitter::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text-mute);
    opacity: .5;
}
#hsplitter:hover,
#hsplitter.dragging { background: var(--color-primary); }
#hsplitter:hover::before,
#hsplitter.dragging::before { background: #fff; opacity: .9; }
body.row-resizing { cursor: row-resize; user-select: none; }
body.row-resizing iframe,
body.row-resizing .maplibregl-canvas { pointer-events: none; }

/* Map Controls */
.map-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.ctrl-btn {
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .2s;
}
.ctrl-btn:hover { background: var(--color-primary-dark); }
.ctrl-btn.active { background: #ef4444; }
/* Huy hiệu "Premium" (sao vàng) — đánh dấu tính năng dành cho KH Premium sau này. */
.premium-badge{
    display:inline-flex; align-items:center; gap:2px;
    margin-left:6px; padding:1px 7px; border-radius:99px;
    font-size:10px; font-weight:800; line-height:1.5; letter-spacing:.02em;
    color:#3a2c05; background:linear-gradient(135deg,#F6D365,#C9A84C);
    border:1px solid rgba(122,94,18,.45); box-shadow:0 1px 3px rgba(0,0,0,.25);
    vertical-align:middle; white-space:nowrap;
}
.lp-row .premium-badge{ font-size:9px; padding:0 6px; }
.ctrl-premium .premium-badge{ color:#2a2008; }
.omnibox-mic.listening { background: #ef4444; animation: pulse 1s infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.ctrl-slider {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.ctrl-slider input[type="range"] {
    width: 90px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ===== Nút chuyển chế độ 2D / 3D ===== */
.mode-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #eef1f5);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}
.mode-btn {
    border: none;
    background: transparent;
    color: var(--color-text, #334155);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.mode-btn.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.18));
}

/* Hiện/ẩn công cụ theo chế độ (mặc định body.mode-3d được set bằng JS) */
.mode-3d .two-d-only { display: none !important; }
.mode-2d .three-d-only { display: none !important; }

/* ===== Bảng lớp bản đồ (TSBĐ) — chỉ dùng ở chế độ 2D ===== */
.layer-panel {
    position: absolute;
    top: 74px;
    left: 20px;
    width: 232px;
    max-height: calc(100% - 110px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 11;
    padding: 10px 12px 12px;
    font-size: 13px;
}
.layer-panel[hidden] { display: none; }
.layer-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.layer-panel-head strong { font-size: 14px; }
.layer-panel-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 15px; color: var(--color-text-muted, #64748b);
    line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.layer-panel-close:hover { background: var(--color-bg-muted, #eef1f5); }
.layer-group { margin-bottom: 10px; }
.layer-group-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #64748b);
    margin: 4px 0 5px;
}
.lp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.lp-row:hover { background: var(--color-bg-muted, #eef1f5); }
.lp-row input { accent-color: var(--color-primary); cursor: pointer; }

/* KOL AI Avatar — ẩn mặc định, chỉ hiện khi bấm nút 🤖 */
.ai-avatar {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 180px;
    height: 240px;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, #1e293b, #0f172a);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(56, 189, 248, 0.18);
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
}
.ai-avatar.show {
    display: flex;
}
/* Nút bật/tắt AI Avatar */
.avatar-toggle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(160deg, #1e293b, #0f172a);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.avatar-toggle:hover {
    transform: scale(1.08);
}
.avatar-toggle.active {
    box-shadow: var(--shadow-lg), 0 0 0 3px rgba(56, 189, 248, 0.35);
}
.ai-avatar-text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 0 12px;
}
.ai-avatar-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f87171;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* ===================== YÊU CẦU 1: Splitter ===================== */
#splitter {
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--color-border);
    position: relative;
    transition: background .15s;
    z-index: 20;
}
#splitter::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    border-radius: 2px;
    background: var(--color-text-mute);
    opacity: 0.5;
}
#splitter:hover,
#splitter.dragging { background: var(--color-primary); }
#splitter:hover::before,
#splitter.dragging::before { background: #fff; opacity: 0.9; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing iframe,
body.col-resizing .maplibregl-canvas { pointer-events: none; }

/* ===================== YÊU CẦU 2: Map Toolbar ===================== */
.map-toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.tbtn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
}
.tbtn:hover { background: var(--color-bg-muted); }
.tbtn:active { transform: scale(0.92); }
.tbtn.active { background: var(--color-primary); color: #fff; }
.tbtn-sep { height: 1px; background: var(--color-border); margin: 3px 4px; }

/* ── Toolbar TRÁI — NHỎ GỌN như thanh phải index_bds.html (#16) ── */
.map-toolbar-left {
    right: auto;
    left: 20px;
    top: 74px;
    padding: 4px;
    gap: 2px;
    border-radius: 12px;
}
/* Nút trong thanh trái nhỏ lại để thu hẹp chiều ngang */
.map-toolbar-left .tbtn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 8px;
}

/* ── Cụm điều hướng + zoom DƯỚI-TRÁI kiểu Bing Maps (#16) ── */
.map-nav-cluster {
    position: absolute;
    left: 20px;
    bottom: 28px;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.zoom-stack {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.95);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.zoom-btn {
    width: 38px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, transform .1s;
}
.zoom-btn:first-child { border-bottom: 1px solid var(--color-border); }
.zoom-btn:hover { background: var(--color-bg-muted); }
.zoom-btn:active { transform: scale(0.9); }

/* ── Pegman marker (kéo-thả để xem Street View) (#17) ── */
.pegman-marker {
    font-size: 26px;
    cursor: grab;
    user-select: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
    line-height: 1;
}
.pegman-marker:active { cursor: grabbing; }

/* ── La bàn cảm biến kiểu iPhone (#18) ── */
.device-compass {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 18;
    width: 132px;
    padding: 14px 12px 10px;
    border-radius: 22px;
    background: rgba(17, 22, 34, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.device-compass[hidden] { display: none; }
.dc-dial {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, #2b3344 0 58%, #1b2230 60% 100%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
}
.dc-ticks {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg,
            rgba(255,255,255,.28) 0deg 0.6deg,
            transparent 0.6deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 42px, #000 43px 100%);
            mask: radial-gradient(circle, transparent 0 42px, #000 43px 100%);
}
.dc-needle {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 8px;
    height: 44px;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 44px;        /* xoay quanh tâm dial */
    border-radius: 4px;
    background: linear-gradient(180deg, #ff4d4d 0 50%, #e2e8f0 50% 100%);
    box-shadow: 0 0 6px rgba(255,77,77,.5);
    transition: transform .09s linear;
    z-index: 2;
}
.dc-center {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #e2e8f0;
    box-shadow: 0 0 0 2px rgba(0,0,0,.4);
    z-index: 3;
}
.dc-dir {
    position: absolute;
    font-size: 12px;
    font-weight: 800;
    color: #cbd5e1;
}
.dc-N { top: 4px; left: 50%; transform: translateX(-50%); color: #ff6b6b; }
.dc-S { bottom: 4px; left: 50%; transform: translateX(-50%); }
.dc-E { right: 6px; top: 50%; transform: translateY(-50%); }
.dc-W { left: 6px; top: 50%; transform: translateY(-50%); }
.dc-deg {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #f1f5f9;
}
.dc-close {
    position: absolute;
    top: 6px; right: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}
.dc-close:hover { color: #fff; }

/* ── Bảng Tra QH (#19) ── */
.traqh-panel {
    position: absolute;
    left: 64px;
    top: 74px;
    z-index: 17;
    width: 268px;
    background: rgba(255,255,255,.98);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.3));
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.traqh-panel[hidden] { display: none; }
.traqh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
.traqh-close {
    border: none; background: transparent;
    font-size: 15px; cursor: pointer; color: var(--color-text-mute);
    line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.traqh-close:hover { background: var(--color-bg-muted); }
.traqh-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-soft);
}
.traqh-field select {
    padding: 7px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--color-text);
}
.traqh-actions { display: flex; gap: 8px; }
.traqh-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.traqh-btn:hover { background: var(--color-bg-muted); }
.traqh-btn.primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.traqh-btn.primary:hover { filter: brightness(1.05); }
.traqh-note {
    font-size: 11.5px;
    color: var(--color-text-mute);
    line-height: 1.45;
    margin: 0;
}

/* ── Vòng xoay điều hướng kiểu Bing Maps (pitch lên/xuống, xoay trái/phải) ── */
.nav-wheel {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #ffffff 0 46%, #eef1f5 47% 100%);
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sm, 0 1px 3px rgba(0,0,0,.15));
}
.nw-arrow {
    position: absolute;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
    transition: background .15s, color .15s, transform .1s;
}
.nw-arrow:hover { background: var(--color-primary); color: #fff; }
.nw-arrow:active { transform: scale(0.88); }
.nw-up    { top: 3px;    left: 50%; transform: translateX(-50%); }
.nw-down  { bottom: 3px; left: 50%; transform: translateX(-50%); }
.nw-left  { left: 3px;   top: 50%;  transform: translateY(-50%); }
.nw-right { right: 3px;  top: 50%;  transform: translateY(-50%); }
.nw-up:hover, .nw-down:hover    { transform: translateX(-50%) scale(1.05); }
.nw-left:hover, .nw-right:hover { transform: translateY(-50%) scale(1.05); }
.nw-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.nw-center:hover { background: var(--color-bg-muted); }
.nw-compass {
    font-size: 14px;
    font-weight: 800;
    color: #d61f26;          /* "N" đỏ chỉ hướng Bắc, xoay theo bearing */
    transition: transform .2s ease;
    display: inline-block;
}

/* ── Khung Google Street View (pegman) ── */
.streetview-overlay {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 420px;
    max-width: 46vw;
    height: 300px;
    background: #0f172a;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.35));
    overflow: hidden;
    z-index: 16;
    display: flex;
    flex-direction: column;
}
.streetview-overlay[hidden] { display: none; }
.sv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.sv-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
}
.sv-close:hover { background: rgba(255,255,255,.15); }
.sv-open-gm {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    margin-left: auto;
    margin-right: 2px;
    border-radius: 6px;
}
.sv-open-gm:hover { background: rgba(255,255,255,.15); }
.sv-panorama { flex: 1; width: 100%; height: 100%; min-height: 0; }

.sun-hour {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    min-width: 38px;
    text-align: right;
}

.measure-hint {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    z-index: 15;
}
.measure-popup .maplibregl-popup-content {
    background: #0f172a;
    color: #fff;
    font-weight: 700;
}
.measure-popup .maplibregl-popup-tip { border-top-color: #0f172a; border-bottom-color: #0f172a; }

/* Nút "Định giá & bay tới" trong popup thửa đất */
.popup-val-btn {
    margin-top: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.popup-val-btn:hover { filter: brightness(1.08); }
.popup-val-btn:active { transform: scale(0.97); }

/* Marker định giá: ghim + vòng sóng nhấp nháy */
.val-marker { position: relative; width: 28px; height: 34px; }
.val-marker .val-pin {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.val-marker .val-pulse {
    position: absolute; left: 50%; bottom: 2px; width: 14px; height: 14px;
    transform: translateX(-50%);
    border-radius: 50%; background: rgba(37, 99, 235, 0.45);
    animation: valPulse 1.6s ease-out infinite;
}
@keyframes valPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); opacity: 1; }
    100% { box-shadow: 0 0 0 22px rgba(37, 99, 235, 0); opacity: 0; }
}

/* Attribution Google Photorealistic 3D Tiles (bắt buộc hiển thị nguồn) */
.g3d-attribution {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: 60%;
    background: rgba(15, 23, 42, 0.72);
    color: #f1f5f9;
    font-size: 10px;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 14;
    pointer-events: none;
}

/* ===================== RESPONSIVE (Mobile < 768px) ===================== */
@media (max-width: 768px) {
    /* Layout panes do hệ Bottom Sheet (#left-pane/#right-pane) ở cuối file quản.
       Chỉ giữ các tinh chỉnh không liên quan tới khung kéo. */
    html, body { overflow: hidden; }
    .app { height: 100vh; overflow: hidden; }
    #splitter, #hsplitter { display: none; } /* tàn dư layout cũ */
    .map-toolbar { top: 12px; right: 12px; }
}

/* ===================================================================
 * BƯỚC 3 — POPUP CAMERA CCTV
 * =================================================================== */
.cctv-maplibre .maplibregl-popup-content {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
    background: #0f172a;
}
.cctv-maplibre .maplibregl-popup-close-button {
    color: #e2e8f0;
    font-size: 20px;
    padding: 2px 8px;
    z-index: 2;
}
.cctv-popup { width: 300px; font-family: inherit; color: #e2e8f0; }
.cctv-title {
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}
.cctv-frame {
    position: relative;
    width: 100%;
    min-height: 170px;
    background: #0b1220;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cctv-frame img#live-cctv {
    width: 100%;
    height: auto;
    display: block;
}
.cctv-frame.cctv-nosignal::after {
    content: '📡 Mất tín hiệu camera (demo)\\A Cần kết nối mạng nội bộ Sở GTVT';
    white-space: pre-wrap;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    padding: 28px 16px;
}
.cctv-sub {
    padding: 7px 12px;
    font-size: 11px;
    color: #cbd5e1;
    background: #1e293b;
    border-top: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cctv-live {
    color: #ef4444;
    font-weight: 700;
    animation: cctvBlink 1.2s infinite;
}
@keyframes cctvBlink { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0.25; } }

/* Popup tra cứu quy hoạch / đường (YÊU CẦU trước) — gọn gàng */
.info-popup .maplibregl-popup-content {
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}

/* Popup thông tin PHƯỜNG (lớp địa giới hành chính TP.HCM) */
.admin-info-popup .maplibregl-popup-content {
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.admin-popup { font-size: 13px; line-height: 1.55; min-width: 200px; }
.admin-popup .ap-title {
    font-size: 15px;
    color: #0f172a;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.admin-popup .ap-title b { color: #1e3a8a; }
.admin-popup .ap-row { color: #334155; margin: 2px 0; }
.admin-popup .ap-row b { color: #0f172a; }
.admin-popup .ap-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
    border-top: 1px dashed #e5e7eb;
    padding-top: 5px;
}

/* ===================================================================
 * MHPP DASHBOARD (Dark Navy & Gold) — tích hợp vào nửa trên panel phải
 * + XƯỞNG 12 AGENTS (góc dưới panel trái)
 * =================================================================== */
:root{
  --mh-navy:#0A1628; --mh-navy2:#0e1d36; --mh-panel:#112341; --mh-card:#142a4d;
  --mh-border:#1f3a63; --mh-border2:#2a4d80; --mh-gold:#C9A84C; --mh-gold2:#f3d98a;
  --mh-green:#22c55e; --mh-blue:#4f8ef7; --mh-red:#f75a5a; --mh-text:#e8eefb; --mh-muted:#7d92b8;
}

/* ---- Dashboard scoped dark theme ---- */
.dashboard.mhpp{
  background:radial-gradient(900px 480px at 80% -20%, #143256 0%, var(--mh-navy) 60%);
  color:var(--mh-text); padding:0; overflow:hidden;
  display:flex; flex-direction:column; min-height:0;
}
.mhpp-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--mh-border); background:rgba(10,22,40,.55);
}
.mhpp-title strong{ font-size:16px; font-weight:800; color:var(--mh-text); display:block }
.mhpp-title small{ font-size:11px; color:var(--mh-muted) }
.mhpp-actions{ display:flex; gap:8px; align-items:center }
.mhpp-run{
  border:none; cursor:pointer; font-family:var(--font); font-weight:800; font-size:13px;
  padding:9px 16px; border-radius:10px; color:var(--mh-navy);
  background:linear-gradient(135deg,var(--mh-gold),#9c7f2e); box-shadow:0 5px 16px rgba(201,168,76,.32);
  transition:.18s;
}
.mhpp-run:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.mhpp-run:disabled{ opacity:.55; cursor:not-allowed; transform:none }
.mhpp-icon{
  width:36px; height:36px; border-radius:9px; border:1px solid var(--mh-border2); cursor:pointer;
  background:var(--mh-card); color:var(--mh-text); font-size:15px;
}
.mhpp-icon:hover{ border-color:var(--mh-gold); color:var(--mh-gold) }
.mhpp-icon.muted{ color:var(--mh-red); border-color:var(--mh-red) }

/* ---- Tab bar (cuộn ngang) ---- */
.mhpp-tabs{
  display:flex; gap:6px; padding:9px 14px; overflow-x:auto; overflow-y:hidden;
  border-bottom:1px solid var(--mh-border); background:rgba(14,29,54,.6); flex:0 0 auto;
  scrollbar-width:thin;
}
.mhpp-tabs::-webkit-scrollbar{ height:5px }
.mhpp-tabs::-webkit-scrollbar-thumb{ background:var(--mh-border2); border-radius:99px }
.mhpp-tab{
  white-space:nowrap; border:1px solid var(--mh-border); background:var(--mh-card);
  color:var(--mh-muted); font-family:var(--font); font-weight:700; font-size:12px;
  padding:7px 13px; border-radius:9px; cursor:pointer; transition:.15s; flex:0 0 auto;
}
.mhpp-tab:hover{ color:var(--mh-text); border-color:var(--mh-border2) }
.mhpp-tab.active{ background:linear-gradient(135deg,var(--mh-gold),#9c7f2e); color:var(--mh-navy); border-color:var(--mh-gold) }

/* ---- Tab body (vùng cuộn dọc) ---- */
.mhpp-tabbody{
  flex:1 1 auto; min-height:0; height:100%; overflow-y:auto; padding:16px 18px;
  scrollbar-width:auto;                        /* Firefox: thanh cuộn rõ */
  scrollbar-color:var(--mh-gold,#C9A84C) rgba(230,237,247,.14);
}
/* Thanh cuộn TO, RÕ cho Report — track nền sáng + thumb vàng để dễ nắm kéo */
.mhpp-tabbody::-webkit-scrollbar{ width:10px; }
.mhpp-tabbody::-webkit-scrollbar-track{
  background:rgba(230,237,247,.14); border-radius:99px; margin:4px 0;
}
.mhpp-tabbody::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--mh-gold,#C9A84C),#9c7f2e);
  border-radius:99px; border:2px solid var(--mh-navy);
}
.mhpp-tabbody::-webkit-scrollbar-thumb:hover{ background:var(--mh-gold,#C9A84C); }

/* ---- Building blocks ---- */
.mh-result{
  background:linear-gradient(135deg,#16315a,var(--mh-navy2)); border:1.5px solid var(--mh-gold);
  border-radius:16px; padding:18px 20px; position:relative; overflow:hidden;
  box-shadow:0 10px 34px rgba(201,168,76,.15);
}
.mh-result .lbl{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--mh-gold); font-weight:700 }
.mh-amount{
  font-size:38px; font-weight:900; line-height:1.05; margin-top:3px; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#fff,var(--mh-gold2),var(--mh-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.mh-sub{ display:flex; gap:16px; flex-wrap:wrap; margin-top:7px; font-size:12px; color:var(--mh-muted) }
.mh-sub b{ color:var(--mh-text) }
.mh-conf{ height:7px; border-radius:99px; background:var(--mh-border); margin-top:11px; overflow:hidden }
.mh-conf i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mh-green),var(--mh-gold)); transition:width 1.4s ease }

.mh-grid{ display:grid; gap:11px; margin-top:14px }
.mh-grid.c2{ grid-template-columns:1fr 1fr }
.mh-grid.c3{ grid-template-columns:repeat(3,1fr) }
.mh-grid.c4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .mh-grid.c4{ grid-template-columns:repeat(2,1fr) } .mh-grid.c3{ grid-template-columns:1fr 1fr } }

.mh-card{ background:var(--mh-panel); border:1px solid var(--mh-border); border-left-width:4px; border-radius:11px; padding:12px 13px }
.mh-card .ic{ font-size:18px }
.mh-card .nm{ font-size:11px; color:var(--mh-muted); margin-top:4px }
.mh-card .vl{ font-size:22px; font-weight:900; margin-top:2px }
.mh-card .wt{ font-size:10px; color:var(--mh-muted) }
.mh-bar{ height:6px; border-radius:99px; background:var(--mh-border); margin-top:7px; overflow:hidden }
.mh-bar i{ display:block; height:100%; border-radius:99px; transition:width .9s ease }

.mh-block{ background:var(--mh-panel); border:1px solid var(--mh-border); border-radius:12px; padding:13px 15px; margin-top:14px }
.mh-block h3{ font-size:13px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:7px }
.mh-block h3::before{ content:""; width:4px; height:14px; border-radius:2px; background:var(--mh-gold) }

.mh-tbl{ width:100%; border-collapse:collapse; font-size:12px }
.mh-tbl th{ text-align:left; color:var(--mh-muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:7px 8px; border-bottom:1px solid var(--mh-border) }
.mh-tbl td{ padding:8px; border-bottom:1px solid var(--mh-border) }
.mh-tbl tr:hover td{ background:rgba(201,168,76,.05) }
.mh-pill{ padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700 }
.mh-pill.g{ background:rgba(34,197,94,.16); color:var(--mh-green) }
.mh-pill.y{ background:rgba(201,168,76,.16); color:var(--mh-gold) }
.mh-pill.r{ background:rgba(247,90,90,.16); color:var(--mh-red) }
.mh-note{ font-size:11px; color:var(--mh-muted); margin-top:10px }
.mh-chart{ width:100% }
.mh-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 11px; border-radius:9px; background:var(--mh-card); margin-top:7px; font-size:12px }
.mh-key{ display:flex; flex-wrap:wrap; gap:7px }
.mh-tag{ padding:4px 11px; border-radius:99px; font-size:11px; font-weight:700; background:rgba(201,168,76,.12); border:1px solid var(--mh-border2); color:var(--mh-gold2) }
.mh-tag.pos{ background:rgba(34,197,94,.12); color:var(--mh-green) }
.mh-tag.neg{ background:rgba(247,90,90,.12); color:var(--mh-red) }

/* ===================== XƯỞNG 12 AGENTS (panel trái) ===================== */
/* Là pane TRÊN của Split dọc trong sidebar: header cố định, lưới agent cuộn. */
.agent-shop{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* Task 1 — LAYOUT ĐỘNG: hiệu ứng mượt khi các pane đổi kích thước.
   Split.js set width/height inline; thêm transition để co/giãn không giật.
   (onDrag vẫn tức thời vì kéo tay không gắn class transition này.) */
#left-pane, #right-pane, #chat-pane, #ai-tabs-pane{
  transition:flex-basis .5s cubic-bezier(.4,0,.2,1), width .5s cubic-bezier(.4,0,.2,1);
}
/* Khi đang kéo gutter → tắt transition để bám tay 1:1 */
.xv-dragging #left-pane, .xv-dragging #right-pane,
.xv-dragging #chat-pane, .xv-dragging #ai-tabs-pane{ transition:none !important; }

.agent-shop-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; margin-bottom:9px }
.agent-shop-progress{ font-size:11px; font-weight:700; color:#9c7f2e; font-family:var(--mono, monospace) }
/* =====================================================================
 * AGENT FLEET (DOM thuần — Task 3 Pixar-ready) — KHÔNG dùng <canvas>
 *   Idle  : lưới 4 cột × 3 hàng (12 agent xếp gọn, đầy đủ)
 *   Working: lưới 2 cột (sidebar hẹp) + overflow-y:auto → KHÔNG bao giờ xén
 * ===================================================================== */
/* Lưới agent = vùng CUỘN của pane Agent (chiếm hết chiều cao còn lại sau header).
   Chiều cao pane do Split.js dọc quyết định → kéo gutter để xem đủ 12 agent. */
.agent-fleet-grid{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px;
  width:100%; align-content:start;
  overflow-y:auto; overflow-x:hidden;
  padding:20px 6px 6px;        /* chừa trên cho speech bubble hàng đầu khỏi bị xén */
  transition:gap .4s cubic-bezier(.4,0,.2,1);
  scrollbar-width:auto;                       /* Firefox: thanh cuộn rõ */
  scrollbar-color:var(--mh-gold,#C9A84C) rgba(230,237,247,.14);
}
/* Thanh cuộn TO, RÕ cho Agent Fleet (dễ nắm kéo bằng chuột) */
.agent-fleet-grid::-webkit-scrollbar{ width:10px; }
.agent-fleet-grid::-webkit-scrollbar-track{
  background:rgba(230,237,247,.14); border-radius:99px; margin:4px 0;
}
.agent-fleet-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--mh-gold,#C9A84C),#9c7f2e);
  border-radius:99px; border:2px solid rgba(10,22,40,.85);
}
.agent-fleet-grid::-webkit-scrollbar-thumb:hover{ background:var(--mh-gold,#C9A84C); }
/* Working: sidebar trái hẹp → 2 cột; vẫn cuộn dọc, mọi agent hiện rõ, KHÔNG xén */
body.xv-working .agent-fleet-grid{
  grid-template-columns:repeat(2,1fr); gap:7px;
}

.agent-card{
  position:relative;
  background:linear-gradient(160deg,var(--mh-card),var(--mh-navy2));
  border:1.2px solid var(--mh-border); border-radius:12px;
  padding:6px 5px 5px;               /* gọn hơn để chứa nhiều agent */
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:0;                       /* cho phép co trong grid hẹp, không tràn */
  transition:border-color .35s, box-shadow .35s, transform .25s, opacity .35s;
}
.agent-card.idle{ opacity:.62; }
.agent-card.run{
  opacity:1; border-color:var(--mh-blue); transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(79,142,247,.45),0 8px 22px rgba(79,142,247,.22);
}
.agent-card.done{
  opacity:1; border-color:var(--mh-gold);
  box-shadow:0 0 0 1px rgba(201,168,76,.5),0 6px 18px rgba(201,168,76,.24);
}

/* ---- Khung video Pixar (placeholder xám bo góc, chờ nhúng <video>/Lottie) ---- */
.video-placeholder{
  position:relative; width:100%; aspect-ratio:1/1; max-width:74px;
  border-radius:12px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg,#2a3142,#1a1f2e);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.video-placeholder video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Ảnh tĩnh minh hoạ agent (pixel-art ~5KB) — thay cho Lottie/video nặng đã gỡ bỏ */
.video-placeholder .vp-img{ width:86%; height:86%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
/* Emoji chức năng → badge nhỏ góc dưới-trái để vẫn nhận ra vai trò của agent */
.video-placeholder .vp-ico{ position:absolute; left:5px; bottom:4px; font-size:13px; line-height:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.video-placeholder .vp-tag{ font-size:7.5px; font-weight:700; letter-spacing:.3px; color:var(--mh-muted); text-transform:uppercase; }
/* spinner quay khi agent đang chạy (chỉ hiện ở .run) */
.video-placeholder .vp-spinner{
  position:absolute; inset:auto 6px 6px auto; width:13px; height:13px;
  border:2px solid rgba(79,142,247,.25); border-top-color:var(--mh-blue);
  border-radius:50%; opacity:0; transition:opacity .25s;
}
.agent-card.run  .video-placeholder .vp-spinner{ opacity:1; animation:af-spin .8s linear infinite; }
.agent-card.run  .video-placeholder{ border-color:rgba(79,142,247,.5); }
.agent-card.done .video-placeholder::after{
  content:"✓"; position:absolute; inset:auto 6px 5px auto;
  width:15px; height:15px; border-radius:50%; background:var(--mh-gold); color:#1a1f2e;
  font-size:10px; font-weight:900; display:grid; place-items:center;
}
@keyframes af-spin{ to{ transform:rotate(360deg) } }

.agent-card .agent-name{ font-size:9.5px; font-weight:700; line-height:1.15; text-align:center; color:var(--mh-text); }
.agent-card .a-status{ font-size:8px; font-weight:700; color:var(--mh-muted); }
.agent-card.run  .a-status{ color:var(--mh-blue); }
.agent-card.done .a-status{ color:var(--mh-gold); }

/* ---- Speech bubble (CSS thuần) — thả nổi trên đầu card khi agent đang chạy ---- */
.agent-speech{
  position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(6px) scale(.92);
  white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis;
  background:var(--mh-blue); color:#fff;
  font-size:9.5px; font-weight:700; line-height:1.2;
  padding:5px 9px; border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; z-index:6;
  transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.agent-speech::after{                 /* mũi nhọn bong bóng */
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--mh-blue);
}
.agent-card.run .agent-speech{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* Responsive: trên mobile/bottom-sheet → 3 cột cho gọn, vẫn cuộn */
@media (max-width:768px){
  .dashboard.mhpp{ overflow:visible; height:auto }
  .mhpp-tabbody{ overflow:visible }
  .agent-fleet-grid{ grid-template-columns:repeat(3,1fr); }
  body.xv-working .agent-fleet-grid{ grid-template-columns:repeat(3,1fr); max-height:38vh; }
}

/* =====================================================================
 * BƯỚC 2 — AI OMNIBOX (Dark Navy & Gold) cho PANEL TRÁI
 * ===================================================================== */
.panel-left{
  background:radial-gradient(1200px 600px at 0% 0%, #102441 0%, var(--mh-navy,#0A1628) 60%);
  border-right:1px solid rgba(201,168,76,.18);
  color:#E6EDF7;
}
.panel-left .brand-text h1{ color:#F3F7FF }
.panel-left .brand-text h1 span{ color:var(--mh-gold,#C9A84C) }
.panel-left .brand-text p{ color:#8FA4C4 }
.panel-left .brand-logo{
  background:linear-gradient(135deg,var(--mh-gold,#C9A84C),#E7CE86);
  color:#0A1628; box-shadow:0 6px 18px rgba(201,168,76,.35);
}
.aio-title{ color:var(--mh-gold,#C9A84C); letter-spacing:.05em }

/* Lịch sử chat — khung tối, cuộn riêng */
.aio-chat{ flex:1 1 auto; min-height:120px }
.aio-chat .chat-history{
  flex:1; overflow-y:auto; padding-right:4px;
}
.aio-chat .chat-history::-webkit-scrollbar{ width:7px }
.aio-chat .chat-history::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.35); border-radius:8px }
.panel-left .bubble{ box-shadow:0 4px 14px rgba(0,0,0,.28) }
.panel-left .bubble-ai{
  background:rgba(255,255,255,.06); color:#DCE6F5;
  border:1px solid rgba(201,168,76,.14);
}
.panel-left .bubble-ai strong{ color:var(--mh-gold,#C9A84C) }
.panel-left .bubble-user{
  background:linear-gradient(135deg,var(--mh-gold,#C9A84C),#B8923A); color:#0A1628;
}
.bubble.bubble-ai.thinking i{
  display:inline-block; width:6px;height:6px;margin:0 1px;border-radius:50%;
  background:var(--mh-gold,#C9A84C); animation:aioDot 1s infinite ease-in-out;
}
.bubble.bubble-ai.thinking i:nth-child(2){ animation-delay:.18s }
.bubble.bubble-ai.thinking i:nth-child(3){ animation-delay:.36s }
@keyframes aioDot{ 0%,80%,100%{ opacity:.25;transform:translateY(0) } 40%{ opacity:1;transform:translateY(-4px) } }

/* Thanh nhập Omnibox (đáy) */
.aio-composer{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(201,168,76,.30);
  border-radius:30px; padding:7px 8px 7px 10px;
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:border-color .2s, box-shadow .2s;
}
.aio-composer:focus-within{
  border-color:var(--mh-gold,#C9A84C);
  box-shadow:0 0 0 4px rgba(201,168,76,.18), 0 8px 26px rgba(0,0,0,.4);
}
.aio-btn{
  width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.07); color:#CFE0FB; font-size:17px; cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .15s;
}
.aio-btn:hover{ background:rgba(201,168,76,.22); transform:translateY(-1px) }
.aio-mic.listening{ background:#ef4444; color:#fff; animation:aioPulse 1s infinite }
@keyframes aioPulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
.aio-input{
  flex:1; min-width:0; border:none; background:transparent;
  font-size:14.5px; color:#EAF1FC; outline:none; padding:6px 4px;
}
.aio-input::placeholder{ color:#7C90B2 }
.aio-send{
  width:42px;height:42px;flex-shrink:0;border:none;border-radius:50%;
  background:linear-gradient(135deg,var(--mh-gold,#C9A84C),#E7CE86);
  color:#0A1628; font-size:20px; font-weight:900; cursor:pointer;
  box-shadow:0 6px 16px rgba(201,168,76,.45);
  transition:transform .15s, box-shadow .2s;
}
.aio-send:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 22px rgba(201,168,76,.6) }
.aio-send:active{ transform:scale(.96) }
.aio-send.busy{ opacity:.6; pointer-events:none }

/* Khu tương thích ẩn (giữ phần tử cho app.js, không hiển thị) */
.aio-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none }

/* =====================================================================
 * BƯỚC 1 — MAP SEARCH (Google Places Autocomplete) trên bản đồ
 * ===================================================================== */
.map-search{
  position:absolute; top:12px; right:16px; left:auto; transform:none;
  z-index:55; width:min(380px, 40vw);
}

/* HUD tên đường Flycam (Glassmorphism) */
#flycam-street-hud{
  position:absolute; bottom:120px; left:50%; transform:translateX(-50%);
  z-index:90; max-width:80%;
  padding:14px 28px;
  background:rgba(0,0,0,0.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font-size:20px; font-weight:600; letter-spacing:.2px;
  border-radius:20px; border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; transition:opacity .35s ease;
}
#flycam-street-hud.hidden{ display:none; }

/* ===== Twin City: UI Mô phỏng Ánh sáng (Time Slider 0h–24h) ===== */
#tc-light-ui{
  position:absolute; top:16px; left:16px; z-index:30;
  padding:8px 14px;
  background:rgba(15,23,42,0.62);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.16); border-radius:14px;
  box-shadow:0 8px 26px rgba(0,0,0,0.4);
}
#tc-light-ui .tc-light-row{ display:flex; align-items:center; gap:10px; }
#tc-light-ui .tc-light-ico{ font-size:16px; }
#tc-light-ui #time-slider{ width:170px; accent-color:#FFD83A; height:4px; cursor:pointer; }
#tc-light-ui #tc-time-label{ color:#FFD83A; font-weight:700; font-size:13px; min-width:42px; text-align:right; font-variant-numeric:tabular-nums; }

/* ===== Flycam Dashboard (panel điều khiển nổi dưới màn hình) ===== */
.flycam-dash{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:91; min-width:340px; max-width:92%;
  display:flex; flex-direction:column; gap:10px;
  padding:14px 20px;
  background:rgba(15,23,42,0.66);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:#fff; border-radius:18px;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 12px 40px rgba(0,0,0,0.42);
  opacity:1; transition:opacity .4s ease, transform .4s ease;
}
.flycam-dash.hidden{ opacity:0; transform:translateX(-50%) translateY(20px); pointer-events:none; }
#flycam-stats{ font-size:15px; font-weight:600; text-align:center; letter-spacing:.2px; }
.flycam-dash-row{ display:flex; align-items:center; gap:12px; }
.flycam-dash-row label{ font-size:13px; font-weight:600; white-space:nowrap; }
.flycam-dash-row #speed-val{ color:#FFD83A; }
.flycam-dash-row input[type=range]{
  flex:1; accent-color:#FFD83A; height:4px; cursor:pointer;
}
#btn-toggle-audio{
  border:none; border-radius:12px; cursor:pointer;
  padding:6px 14px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,0.16); color:#fff;
  transition:background .2s ease;
}
#btn-toggle-audio:hover{ background:rgba(255,255,255,0.28); }

.map-search-bar{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #e2e6ee; border-radius:24px;
  box-shadow:0 6px 22px rgba(15,23,42,.18); padding:6px 8px 6px 14px;
}
.map-search-bar:focus-within{ border-color:#1a73e8; box-shadow:0 6px 22px rgba(26,115,232,.28) }
.map-search-ic{ font-size:15px; flex-shrink:0 }
.map-search input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:14px; color:#1f2937; padding:5px 2px;
}
.map-search-clear{
  border:none; background:transparent; color:#94a3b8; cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:50%; display:none;
}
.map-search-clear:hover{ background:#f1f5f9; color:#475569 }
.map-search.has-text .map-search-clear{ display:block }
.map-search-suggest{
  display:none; margin-top:6px; background:#fff; border-radius:12px;
  box-shadow:0 14px 30px rgba(15,23,42,.20); overflow:hidden; max-height:300px; overflow-y:auto;
}
.map-search-suggest.open{ display:block }
.ms-item{ padding:10px 14px; cursor:pointer; border-bottom:1px solid #f1f5f9; display:flex; gap:9px; align-items:flex-start }
.ms-item:last-child{ border-bottom:none }
.ms-item:hover,.ms-item.active{ background:#f0f6ff }
.ms-item .ms-ic{ color:#1a73e8; flex-shrink:0 }
.ms-item .ms-main{ font-size:14px; color:#0f172a; font-weight:600; line-height:1.25 }
.ms-item .ms-sub{ font-size:12px; color:#64748b; margin-top:1px }
/* Khung gợi ý của chính Google Places (pac-container) nổi trên map */
.pac-container{ z-index:9999 !important; border-radius:12px; box-shadow:0 14px 30px rgba(15,23,42,.22); margin-top:4px }

@media (max-width:768px){
  .map-search{ width:86%; }
}

/* =====================================================================
 * MAPBOX DIRECTIONS & FLYCAM CONTROLLER (thẻ chỉ đường nổi trên bản đồ)
 * Glassmorphism: nền mờ + blur + bo góc mịn + đổ bóng.
 * ===================================================================== */
.hidden{ display:none !important; }   /* tiện ích ẩn dùng chung */

/* Nút 📍 Chỉ đường trong thanh search */
.map-dir-toggle{
  border:none; cursor:pointer; flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  background:#eaf1fe; color:#1b73e8; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .18s, box-shadow .18s;
}
.map-dir-toggle:hover{ background:#d6e4fd; transform:scale(1.08); }
.map-dir-toggle.active{ background:#1b73e8; color:#fff; box-shadow:0 4px 12px rgba(27,115,232,.45); }

/* Thẻ chỉ đường — glassmorphism */
.route-card{
  margin-top:8px; padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 44px rgba(15,23,42,.28);
  animation:routeCardIn .22s ease;
}
@keyframes routeCardIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.route-card-hd{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:#0f172a; margin-bottom:12px;
}
.route-card-hd strong{ font-weight:700; }
.route-card-close{
  border:none; background:rgba(15,23,42,.06); color:#475569; cursor:pointer;
  width:24px; height:24px; border-radius:50%; font-size:12px; line-height:1;
}
.route-card-close:hover{ background:rgba(239,68,68,.85); color:#fff; }

.route-field{
  position:relative;
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid #e2e6ee; border-radius:12px;
  padding:7px 11px; margin-bottom:9px;
  transition:border-color .18s, box-shadow .18s;
}
/* Dropdown gợi ý Mapbox cho ô A/B (nổi tuyệt đối dưới ô) */
.route-suggest{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  margin-top:0;
}
.route-field:focus-within{ border-color:#1b73e8; box-shadow:0 4px 14px rgba(27,115,232,.20); }
.route-field input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:13.5px; color:#1f2937;
}
.route-dot{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.route-dot.dot-a{ background:#22c55e; }
.route-dot.dot-b{ background:#ef4444; }

/* Dropdown Autocomplete (Mapbox Geocoding) */
.route-ac{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:60;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.22); border:1px solid #eef1f6;
  max-height:240px; overflow-y:auto;
}
.route-ac-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 12px; cursor:pointer; border-bottom:1px solid #f3f5f9;
  transition:background .14s;
}
.route-ac-item:last-child{ border-bottom:none; }
.route-ac-item:hover{ background:#f0f6ff; }
.route-ac-item .ac-ic{ color:#1b73e8; flex-shrink:0; font-size:13px; line-height:1.4; }
.route-ac-item .ac-tx{ display:flex; flex-direction:column; min-width:0; }
.route-ac-item .ac-main{ font-size:13px; font-weight:600; color:#0f172a; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-ac-item .ac-sub{ font-size:11.5px; color:#64748b; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.action-buttons{ display:flex; gap:8px; margin-top:4px; }
.action-buttons button{
  flex:1; border:none; cursor:pointer; padding:10px 12px;
  border-radius:11px; font-size:13px; font-weight:700; color:#fff;
  transition:transform .15s, box-shadow .2s, filter .2s;
}
#btn-draw-route{ background:linear-gradient(135deg,#1b73e8,#3b8bff); box-shadow:0 6px 16px rgba(27,115,232,.35); }
#btn-draw-route:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#btn-draw-route:disabled{ filter:grayscale(.4) brightness(.95); cursor:wait; transform:none; }
#btn-start-flycam{ background:linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 6px 16px rgba(124,58,237,.4); }
#btn-start-flycam:hover{ filter:brightness(1.08); transform:translateY(-1px); }

.route-status{ font-size:12px; color:#475569; margin-top:10px; min-height:14px; line-height:1.4; }
.route-status.ok{ color:#15803d; }
.route-status.err{ color:#dc2626; }

/* ⏹️ Nút dừng Flycam — cố định góc dưới-giữa màn hình */
.flycam-stop{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:1200; border:none; cursor:pointer;
  padding:12px 24px; border-radius:30px;
  background:rgba(15,23,42,.82);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .18s, background .2s;
  animation:flycamStopIn .25s ease;
}
.flycam-stop:hover{ background:rgba(220,38,38,.92); transform:translateX(-50%) scale(1.05); }
@keyframes flycamStopIn{ from{ opacity:0; transform:translate(-50%,12px) } to{ opacity:1; transform:translateX(-50%) } }

@media (max-width:768px){
  .route-card{ background:rgba(255,255,255,.82); }
  .flycam-stop{ bottom:88px; }   /* tránh che bottom-sheet handle */
}

/* ═══════════════════════════════════════════════════════════════════════
 * TRA TTQH — SỞ KIẾN TRÚC (port từ index_bds.html, panel trượt phải)
 * ═══════════════════════════════════════════════════════════════════════ */
@keyframes sktSpin { to { transform: rotate(360deg); } }
#btnTraSKT.active {
  background:#1976D2 !important; color:#fff !important;
  box-shadow:0 0 0 3px rgba(25,118,210,.35);
}
#sktOverlay { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:1999; display:none; }
#sktOverlay.open { display:block; }
#sktPanel {
  position:fixed; top:0; right:0; width:380px; max-width:92vw; height:100%;
  background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,.18);
  z-index:2000; display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  font-family:system-ui,sans-serif;
}
#sktPanel.open { transform:translateX(0); }
.skt-hdr {
  background:linear-gradient(135deg,#1976D2,#2196F3);
  color:#fff; padding:14px 16px 12px;
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.skt-hdr .skt-title { font-weight:800; font-size:15px; }
.skt-hdr .skt-sub { font-size:11px; color:#BBDEFB; margin-top:2px; }
.skt-close {
  background:rgba(255,255,255,.15); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.skt-close:hover { background:rgba(255,255,255,.3); }
.skt-body { padding:14px; flex:1; overflow-y:auto; color:#0f172a; }
.skt-mode {
  display:flex; gap:6px; margin-bottom:12px;
  background:#f1f5f9; padding:4px; border-radius:8px;
}
.skt-mode button {
  flex:1; padding:7px; border:none; border-radius:6px;
  background:transparent; color:#475569;
  font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
}
.skt-mode button.active { background:#fff; color:#1976D2; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.skt-toggle { display:flex; gap:4px; margin-bottom:6px; }
.skt-toggle-btn {
  flex:1; padding:7px 10px; background:#f1f5f9; border:1.5px solid #cbd5e1;
  border-radius:8px; font-size:11.5px; cursor:pointer; transition:all .12s;
  color:#475569; font-weight:600;
}
.skt-toggle-btn.sel { background:linear-gradient(135deg,#1976D2,#42A5F5); color:#fff; border-color:#1976D2; }
.skt-tabs { display:flex; gap:3px; margin-bottom:8px; }
.skt-tab {
  flex:1; padding:6px 8px; background:#fff; border:1.5px solid #e2e8f0;
  border-bottom:3px solid #e2e8f0; border-radius:6px 6px 0 0;
  font-size:11.5px; cursor:pointer; color:#64748b; font-weight:600; transition:all .15s;
}
.skt-tab.sel { color:#1565C0; border-color:#1565C0; border-bottom-color:#1565C0; background:#E3F2FD; }
.skt-field { margin-bottom:10px; }
.skt-field label {
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:#475569; margin-bottom:4px;
}
.skt-field input, .skt-field select {
  width:100%; padding:9px 11px; border:1.5px solid #e2e8f0;
  border-radius:8px; font-size:13px; font-family:inherit;
  background:#f8fafc; outline:none; box-sizing:border-box;
  transition:border-color .15s; appearance:auto; color:#0f172a;
}
.skt-field input:focus, .skt-field select:focus { border-color:#1976D2; background:#fff; }
.skt-row2 { display:flex; gap:8px; }
.skt-row2 .skt-field { flex:1; }
.skt-btn {
  width:100%; margin-top:10px; background:#1976D2; color:#fff;
  border:none; padding:11px; border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer; transition:background .15s;
}
.skt-btn:hover { background:#1565C0; }
.skt-btn:disabled { background:#cbd5e1; cursor:not-allowed; }
.skt-banner { margin-top:12px; padding:10px 12px; border-radius:8px; font-size:12px; }
.skt-banner.info { background:#E3F2FD; color:#0D47A1; }
.skt-banner.err  { background:#FFEBEE; color:#B71C1C; }
.skt-banner.hidden { display:none; }
.skt-spin {
  display:inline-block; width:14px; height:14px; vertical-align:-2px;
  border:2px solid #c7dbff; border-top-color:#1976D2;
  border-radius:50%; animation:sktSpin .7s linear infinite; margin-right:7px;
}
.skt-result { margin-top:14px; border-top:1px solid #e2e8f0; padding-top:12px; }
.skt-row {
  display:flex; justify-content:space-between; gap:8px;
  padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:12.5px;
}
.skt-row .k { color:#64748b; flex:0 0 38%; }
.skt-row .v { font-weight:600; color:#0f172a; text-align:right; flex:1; word-break:break-word; }
.skt-section { margin-top:12px; padding:10px; border-radius:8px;
  background:#F3E5F5; border-left:3px solid #9C27B0; }
.skt-section h4 { font-size:12px; font-weight:700; color:#6A1B9A;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }

/* ═══ Popup ô chức năng quy hoạch tại vị trí thửa trên bản đồ ═══ */
.skt-map-popup .maplibregl-popup-content {
  padding:0; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 36px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.16);
  border:1px solid rgba(25,118,210,.18); font-family:inherit;
}
.skt-map-popup .maplibregl-popup-close-button {
  width:24px; height:24px; right:6px; top:6px; border-radius:50%;
  font-size:17px; line-height:22px; color:#fff; background:rgba(0,0,0,.22);
  border:none; z-index:3;
}
.skt-map-popup .maplibregl-popup-close-button:hover { background:rgba(0,0,0,.4); }
.skt-map-popup .maplibregl-popup-tip { border-top-color:#fff; }
.skt-pop { width:300px; max-width:84vw; font-size:12px; color:#0f172a; }
.skt-pop-hd {
  background:linear-gradient(135deg,#1976D2,#2196F3); color:#fff;
  padding:9px 30px 9px 12px; font-size:12.5px; font-weight:700; line-height:1.35;
}
.skt-pop-addr { padding:6px 12px 0; color:#475569; font-size:11.5px; }
.skt-pop-area { padding:5px 12px 0; font-size:12px; }
.skt-pop-area b { color:#1976D2; }
.skt-pop-doan {
  margin:7px 12px 0; padding:6px 8px; border-radius:7px; font-size:11px;
  background:#FFF8E1; border-left:3px solid #FFB300; color:#5d4037; line-height:1.35;
}
.skt-pop-sec {
  margin:9px 12px 5px; font-size:11px; font-weight:700; color:#6A1B9A;
  text-transform:uppercase; letter-spacing:.4px;
}
.skt-pop-tb { width:calc(100% - 16px); margin:0 8px 4px; border-collapse:collapse; font-size:11px; }
.skt-pop-tb th {
  background:#F3E5F5; color:#6A1B9A; font-weight:700; padding:4px 5px;
  text-align:left; border-bottom:1px solid #E1BEE7;
}
.skt-pop-tb td { padding:4px 5px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.skt-pop-tb td.r, .skt-pop-tb th:nth-child(4), .skt-pop-tb th:nth-child(5) { text-align:right; }
.skt-pop-tb td code { background:#eef2ff; color:#3730a3; padding:1px 4px; border-radius:4px; font-size:10px; }
.skt-pop-no {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; background:#1976D2; color:#fff;
  font-size:10px; font-weight:700;
}
.skt-pop-tb tfoot td {
  font-weight:700; background:#fafafa; border-top:2px solid #E1BEE7; border-bottom:none;
}
.skt-pop-ext {
  margin:4px 12px 11px; padding:6px 8px; border-radius:7px; font-size:11px;
  background:#E8F5E9; color:#1b5e20; line-height:1.5;
}
.skt-pop-ext b { color:#2E7D32; }

/* ═══ Thẻ thông tin thửa kiểu TekaDev (ẩn/hiện) ═══ */
.skt-teka {
  margin:10px 0; border-radius:12px; overflow:hidden; background:#fff;
  border:1px solid #e2e8f0; box-shadow:0 2px 10px rgba(15,23,42,.06);
}
.skt-teka-hd {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; cursor:pointer; user-select:none;
  background:linear-gradient(135deg,#1565C0,#1E88E5); color:#fff;
}
.skt-teka-hd:hover { filter:brightness(1.05); }
.skt-teka-ttl { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; }
.skt-teka-pin { font-size:14px; }
.skt-teka-cv { font-size:15px; transition:transform .22s ease; opacity:.9; }
.skt-teka.collapsed .skt-teka-cv { transform:rotate(-90deg); }
.skt-teka-bd {
  padding:12px 14px; max-height:1400px; overflow:hidden;
  transition:max-height .28s ease, padding .28s ease, opacity .2s ease; opacity:1;
}
.skt-teka.collapsed .skt-teka-bd {
  max-height:0; padding-top:0; padding-bottom:0; opacity:0;
}
.skt-teka-addr {
  font-size:12.5px; color:#334155; line-height:1.45; margin-bottom:10px;
  padding-left:10px; border-left:3px solid #42A5F5;
}
.skt-teka-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.skt-teka-cell {
  display:flex; flex-direction:column; gap:2px;
  padding:7px 9px; background:#f8fafc; border-radius:8px; border:1px solid #eef2f7;
}
.skt-teka-cell .lbl {
  font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:.3px; font-weight:600;
}
.skt-teka-cell .val { font-size:12.5px; color:#0f172a; font-weight:700; word-break:break-word; }
.skt-teka-coord {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:10px; padding:7px 9px; background:#eef2ff; border-radius:8px;
}
.skt-teka-coord .lbl { font-size:10.5px; color:#475569; font-weight:600; }
.skt-teka-coord code { font-size:11.5px; color:#3730a3; font-family:monospace; }
.skt-teka-gmap {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:9px; padding:9px; border-radius:9px; text-decoration:none;
  font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#43A047,#66BB6A);
  box-shadow:0 2px 8px rgba(67,160,71,.3); transition:transform .12s ease;
}
.skt-teka-gmap:hover { transform:translateY(-1px); filter:brightness(1.05); }
.skt-teka-qh {
  margin-top:10px; padding:9px; border-radius:8px;
  background:#fff8e1; border:1px solid #ffe082;
}
.skt-teka-qh-h {
  font-size:10.5px; font-weight:700; color:#a1670a; text-transform:uppercase;
  letter-spacing:.3px; margin-bottom:4px;
}
.skt-teka-qh-b { font-size:12px; color:#5d4037; line-height:1.5; white-space:pre-line; }

/* ═══ Dải tóm tắt loại đất (Đất ở / Đất giao thông ...) kiểu TekaDev ═══ */
.skt-sumstrip { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px; }
.skt-sumcell {
  display:flex; align-items:center; gap:5px; padding:5px 9px; border-radius:20px;
  background:#f1f5f9; border:1px solid #e2e8f0; font-size:11px; color:#334155;
}
.skt-sumcell .dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.skt-sumcell .t { color:#475569; }
.skt-sumcell b { color:#0f172a; }
.skt-sumcell .p { color:#1976D2; font-weight:700; }
/* Bản popup: thu nhỏ lại cho vừa */
.skt-pop .skt-sumstrip { margin:8px 12px 4px; }
.skt-pop .skt-sumcell { padding:3px 7px; font-size:10px; }

/* =====================================================================
 * DRAGGABLE WORKSPACE — Nested Split Panes (Split.js)
 *   #main-split (ngang): #left-pane | #right-pane
 *   #left-pane  (dọc)  : #chat-pane / #ai-tabs-pane
 *   #right-pane (dọc)  : #detail-pane / #map-pane
 * ===================================================================== */
#main-split{
  flex:1 1 auto; display:flex; flex-direction:row;
  width:100%; height:100%; overflow:hidden;
}
#left-pane, #right-pane{
  display:flex; flex-direction:column;
  height:100%; min-width:0; overflow:hidden;
}
#right-pane{ background:#0A1628; }

/* CHAT PANE (trên-trái) */
#chat-pane{
  display:flex; flex-direction:column; gap:18px;
  padding:24px; overflow:hidden; min-height:0;
}
#chat-pane .aio-chat{ flex:1 1 auto; min-height:80px; }

/* AI TABS PANE (dưới-trái): Agent Fleet ↕ Report — chia bằng Split.js dọc.
   overflow:hidden để 2 pane con (#agentZone / #mhppDashboard) tự cuộn riêng. */
#ai-tabs-pane{
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden; background:var(--color-bg-soft);
  border-top:1px solid rgba(201,168,76,.22);
}
/* #agentZone & #mhppDashboard: Split.js set flex-basis (chiều cao) inline.
   Cho phép co tới 0 + tự quản cuộn bên trong. */
#ai-tabs-pane #agentZone{ margin-top:0; min-height:0; overflow-y:auto; padding:10px 12px 0; }
/* #mhppDashboard PHẢI là flex-column để .dashboard.mhpp căng đầy ô Split.js
   (nếu không, report chỉ cao bằng nội dung → chừa khoảng xám phía dưới). */
#ai-tabs-pane #mhppDashboard{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#ai-tabs-pane .dashboard.mhpp{ height:100%; min-height:0; flex:1 1 auto; border-bottom:none; }

/* DETAIL PANE (trên-phải): slider ảnh/video — ẩn (cao 0) mặc định */
#detail-pane{
  display:flex; flex-direction:column; min-height:0;
  background:#0A1628; color:#E6EDF7; overflow:hidden;
}
#detail-pane .detail-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(201,168,76,.20); font-size:13px;
  font-weight:600; flex:0 0 auto;
}
#detail-pane .detail-close{
  border:none; background:rgba(255,255,255,.08); color:#E6EDF7;
  width:26px; height:26px; border-radius:8px; cursor:pointer;
  font-size:13px; line-height:1;
}
#detail-pane .detail-close:hover{ background:rgba(239,83,80,.85); color:#fff; }
#detail-pane .detail-slider{
  flex:1 1 auto; min-height:0; overflow:auto; display:flex;
  align-items:center; justify-content:center; padding:10px; gap:10px;
}
#detail-pane .detail-empty{ font-size:13px; color:#8FA4C4; text-align:center; }

/* MAP PANE (dưới-phải) — MapLibre/PMTiles */
#map-pane{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
#map-pane .map-section{ height:100%; }

/* ===== Split.js GUTTER (đường phân chia) + hiệu ứng :hover sáng lên ===== */
.gutter{
  background:var(--color-border);
  background-repeat:no-repeat; background-position:50%;
  transition:background-color .18s ease, box-shadow .18s ease;
  position:relative; z-index:30; flex:0 0 auto;
}
.gutter.gutter-horizontal{ cursor:col-resize; }
.gutter.gutter-vertical{ cursor:row-resize; }
.gutter:hover, .gutter:active{
  background:var(--mh-gold,#C9A84C);
  box-shadow:0 0 9px rgba(201,168,76,.75);
}
/* Tay nắm nhỏ giữa gutter (gợi ý kéo được) */
.gutter::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); background:rgba(255,255,255,.55);
  border-radius:6px; pointer-events:none;
}
.gutter.gutter-horizontal::after{ width:2px; height:28px; }
.gutter.gutter-vertical::after{ width:28px; height:2px; }
.gutter:hover::after{ background:#fff; }

/* Gutter Agent Fleet ↕ Report (trong sidebar trái): nổi rõ sẵn để gợi ý kéo */
#ai-tabs-pane > .gutter.gutter-vertical{
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.16), transparent);
  border-top:1px solid rgba(201,168,76,.28);
  border-bottom:1px solid rgba(201,168,76,.28);
}
#ai-tabs-pane > .gutter.gutter-vertical::after{ width:38px; height:3px; border-radius:99px; background:rgba(201,168,76,.85); }

/* Đường phân chia NGANG (Sidebar trái | Bản đồ) — viền rõ để mắt thấy ranh giới,
   khẳng định Sidebar KHÔNG đè lên .map-section. */
.gutter.gutter-horizontal{
  background:linear-gradient(180deg, transparent, rgba(201,168,76,.18), transparent);
  border-left:1px solid rgba(201,168,76,.30);
  border-right:1px solid rgba(201,168,76,.30);
}

/* =====================================================================
 * MOBILE (≤768px) — Split.js bị destroy, panes thành Bottom Sheet
 * (vuốt lên từ đáy), map full-bleed phía sau.
 * ===================================================================== */
@media (max-width:768px){
  #main-split{
    display:block; position:relative;
    width:100vw; height:100vh; overflow:hidden;
  }
  .gutter{ display:none !important; }   /* Split.js đã destroy, dọn gutter sót */

  /* MAP full-bleed phía sau */
  #right-pane{
    position:absolute; inset:0; width:100%; height:100%;
    display:block; z-index:1; flex:none !important;
  }
  #detail-pane{ display:none; }          /* ẩn slider, ưu tiên map toàn khung */
  #map-pane{ position:absolute; inset:0; width:100%; height:100%; }

  /* LEFT PANE = Bottom Sheet — ló đầu, vuốt lên để mở */
  #left-pane{
    position:absolute; left:0; right:0; bottom:0;
    width:100%; height:86vh; flex:none !important;
    transform:translateY(calc(86vh - 132px));   /* chỉ ló phần đầu */
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    z-index:1000; background:var(--mh-navy,#0A1628);
    border-radius:18px 18px 0 0;
    box-shadow:0 -12px 34px rgba(0,0,0,.5);
    overflow:hidden; touch-action:none;
  }
  #left-pane.sheet-open{ transform:translateY(0); }
  #left-pane::before{                    /* tay nắm vuốt (grab handle) */
    content:""; position:absolute; top:9px; left:50%;
    transform:translateX(-50%); width:44px; height:5px;
    border-radius:5px; background:rgba(201,168,76,.75); z-index:5;
    pointer-events:none;
  }
  #chat-pane{ padding-top:24px; flex:1 1 auto; }
  #ai-tabs-pane{ max-height:42vh; }
}

/* ════════════════════════════════════════════════════════════
   TWIN CITY 3D — CesiumJS (Google Photorealistic 3D Tiles)
   DOCK trong khung bản đồ (.map-section), KHÔNG full màn.
   z-index:5 → nằm TRÊN #map (MapLibre) nhưng DƯỚI mọi nút điều khiển
   (.map-controls z10, .map-search z55, HUD z90) → Flycam vẫn bấm được.
═══════════════════════════════════════════════════════════════ */
#twinCityPanel{
  position:absolute; inset:0; z-index:5; display:none; background:#000;
}
#twinCityPanel.open{ display:block; }
#cesiumContainer{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
/* Nút ✕ tắt Twin City — góc trên phải khung bản đồ */
#tcClose{
  position:absolute; top:20px; right:70px; z-index:12;
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:#ef4444; color:#fff; border:none; font-size:16px; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#tcClose:hover{ background:#dc2626; }
#twinCityLoader{
  position:absolute; inset:0; background:#020617; display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:12px;
  color:#e6edf3; font-family:system-ui,sans-serif; z-index:10; pointer-events:none;
}
#twinCityLoader .tc-spin{
  width:40px; height:40px; border:3px solid rgba(255,255,255,.1);
  border-top-color:#0b84ff; border-radius:50%; animation:tcSpin .8s linear infinite;
}
@keyframes tcSpin{ to{ transform:rotate(360deg); } }
/* thụt nhẹ overlay con trong nhóm 3D */
.lp-row.lp-sub{ margin-left:14px; opacity:.95; }
/* ============ XVALUE METAVERSE ============ */
/* La bàn phong thủy — góc dưới-phải, ẩn mặc định */
.mv-compass{
  position:absolute; right:18px; bottom:96px; width:84px; height:84px;
  z-index:60; opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.mv-compass.show{ opacity:1; transform:scale(1); }
.mv-compass-ring{
  position:relative; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(20,28,48,.92), rgba(8,12,24,.96));
  border:2px solid rgba(124,77,255,.7); box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(124,77,255,.35);
  will-change:transform;
}
.mv-compass .mv-dir{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:12px; font-weight:700; color:#cdd6f4; text-shadow:0 1px 2px #000;
}
.mv-compass .mv-n{ top:5px; color:#ff5a5a; }
.mv-compass .mv-s{ bottom:5px; }
.mv-compass .mv-e{ top:50%; right:6px; left:auto; transform:translateY(-50%); }
.mv-compass .mv-w{ top:50%; left:6px; transform:translateY(-50%); }
.mv-compass .mv-needle{
  position:absolute; left:50%; top:50%; width:4px; height:34px;
  transform:translate(-50%,-100%);
  background:linear-gradient(180deg,#ff5a5a 0 50%, #e0e6ff 50% 100%);
  border-radius:2px; transform-origin:50% 100%;
}

/* Mưa metaverse — overlay full-screen, không chặn click */
.mv-rain{
  position:fixed; inset:0; z-index:58; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .5s ease;
}
.mv-rain.show{ opacity:1; }
.mv-rain i{
  position:absolute; top:-12%; width:1.5px; height:60px;
  background:linear-gradient(180deg, rgba(180,200,255,0), rgba(180,200,255,.55));
  animation-name:mvRainFall; animation-iteration-count:infinite; animation-timing-function:linear;
}
@keyframes mvRainFall{ to{ transform:translateY(120vh); } }

/* ===== METAVERSE · nút active + toast + bát quái + thoát ban công ===== */
.tbtn.active{ background:linear-gradient(135deg,#7c4dff,#4d7cff); color:#fff; box-shadow:0 0 0 2px rgba(124,77,255,.45), 0 4px 14px rgba(124,77,255,.5); }

/* Toast gợi ý */
.mv-hint{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  z-index:120; max-width:min(560px,86vw); padding:10px 18px; border-radius:24px;
  background:rgba(14,18,32,.92); color:#eef2ff; font-size:14px; font-weight:600;
  border:1px solid rgba(124,77,255,.55); box-shadow:0 8px 26px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.mv-hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Nút thoát ban công */
.mv-balcony-exit{
  position:fixed; right:18px; top:70px; z-index:120; padding:9px 16px; border:none;
  border-radius:22px; cursor:pointer; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#ff5a5a,#c0392b); box-shadow:0 6px 18px rgba(192,57,43,.5);
  opacity:0; transform:scale(.8); pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.mv-balcony-exit.show{ opacity:1; transform:scale(1); pointer-events:auto; }

/* Bát quái phong thủy dưới chân (marker bản đồ) */
.mv-bagua{ position:relative; width:120px; height:120px; pointer-events:none; }
.mv-bagua-ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(124,77,255,.18) 0 22.5deg, rgba(124,77,255,.04) 22.5deg 45deg);
  border:2px solid rgba(124,77,255,.7);
  box-shadow:0 0 22px rgba(124,77,255,.55), inset 0 0 18px rgba(124,77,255,.35);
  animation:mvBaguaSpin 16s linear infinite;
}
@keyframes mvBaguaSpin{ to{ transform:rotate(360deg); } }
.mv-bagua .mv-bg{ position:absolute; left:50%; transform:translateX(-50%); font-size:13px; font-weight:800; color:#fff; text-shadow:0 1px 3px #000; }
.mv-bagua .mv-bg-n{ top:2px; color:#ff6b6b; }
.mv-bagua .mv-bg-s{ bottom:2px; }
.mv-bagua .mv-bg-e{ top:50%; right:4px; left:auto; transform:translateY(-50%); }
.mv-bagua .mv-bg-w{ top:50%; left:4px; transform:translateY(-50%); }

/* ===== Thanh toạ độ Lat/Lng (góc dưới trái bản đồ) ===== */
.xv-coords{
  position:absolute; left:10px; bottom:10px; z-index:90;
  padding:5px 11px; border-radius:8px; pointer-events:none;
  font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#eaf2ff; background:rgba(10,16,28,.78);
  border:1px solid rgba(124,200,255,.3); box-shadow:0 2px 8px rgba(0,0,0,.45);
  letter-spacing:.2px; white-space:nowrap;
}

/* ===== CHẤM MÀU + NHÃN TÊN THÁP (click thẳng → View Ban Công) ===== */
.mv-tower-pin{
  display:flex; flex-direction:column; align-items:center; cursor:pointer;
  user-select:none; transform:translateY(2px); transition:transform .12s ease;
}
.mv-tower-pin:hover{ transform:translateY(-1px) scale(1.06); z-index:50; }
.mv-tower-lbl{
  margin-top:3px; padding:2px 8px; font-size:12px; font-weight:800; color:#fff;
  white-space:nowrap; border-radius:11px; letter-spacing:.2px;
  background:rgba(10,16,28,.82); border:1px solid rgba(255,255,255,.25);
  box-shadow:0 2px 8px rgba(0,0,0,.5); text-shadow:0 1px 2px #000;
}
.mv-tower-dot{
  width:16px; height:16px; border-radius:50%; display:block;
  border:2px solid #fff; animation:mvDotPulse 1.8s ease-in-out infinite;
}
@keyframes mvDotPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.28); }
}

/* ===== Bộ chọn TẦNG (▲▼) khi ở View Ban Công ===== */
.mv-floor-step{
  position:fixed; right:18px; top:118px; z-index:120; width:62px;
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  opacity:0; transform:translateX(12px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.mv-floor-step.show{ opacity:1; transform:translateX(0); pointer-events:auto; }
.mv-fs-btn{
  height:34px; border:none; border-radius:12px; cursor:pointer; color:#fff;
  font-size:15px; font-weight:800; line-height:1;
  background:linear-gradient(135deg,#2c4f78,#16263c);
  box-shadow:0 4px 12px rgba(0,0,0,.45); transition:filter .15s ease, transform .1s ease;
}
.mv-fs-btn:hover{ filter:brightness(1.25); }
.mv-fs-btn:active{ transform:scale(.93); }
.mv-fs-val{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 0; border-radius:12px; color:#eaf2ff;
  background:rgba(10,16,28,.85); border:1px solid rgba(124,200,255,.35);
  box-shadow:inset 0 0 10px rgba(124,200,255,.18);
}
.mv-fs-val b{ font-size:20px; font-weight:900; color:#7cd0ff; line-height:1; }
.mv-fs-val small{ font-size:9px; letter-spacing:1px; opacity:.7; margin-top:2px; }