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

body { font-family: Arial, sans-serif; background: #f1f4f9; }

.container { display: flex; height: 100vh; }

/* Sidebar */
.sidebar {
    width: 220px;
    background: #1d2838;
    color: #fff;
    padding: 20px;
}
.sidebar .logo { font-size: 22px; font-weight: bold; margin-bottom: 30px; }
.sidebar ul { list-style: none; }
.sidebar ul li { margin: 18px 0; }
.sidebar ul li a { color: #fff; text-decoration: none; }
.sidebar ul li.active a, .sidebar ul li:hover a { color: #00eaff; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; }

/* Top bar */
.topbar {
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

/* Stats cards */
.stats { display: flex; gap: 20px; padding: 20px; }
.card { background: #fff; padding: 15px; border-radius: 8px; flex: 1; }

/* Layout 3 phần */
.layout {
    display: grid;
    grid-template-columns: 0px 1fr 0px;
    height: 100%;
}

/* Panel */
.panel-left, .panel-right {
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 15px;
    overflow-y: auto;
    transition: 0.3s;
}

.panel-left { width: 220px; }
.panel-right { width: 260px; }

.hidden { width: 0 !important; padding: 0 !important; overflow: hidden !important; border: none !important; }

/* Map */
.map-box { width: 100%; height: 100%; }
#map { width: 100%; height: 100%; }