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

html, body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

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

/* Sidebar */
.sidebar-container {
    width: 250px;
    background-color: #FFF;
    color: #374151;
    height: 100%;
    position: relative;
    z-index: 10;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
}

/* Vùng bên phải gồm header + content */
.main-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

/* Main content nằm dưới header */
.main-container {
    flex: 1;
    background-color: #dee2e8;
    overflow-y: auto;
}


/* responsive */
/* 
@media (max-width: 768px) {
    #sidebar {
        display: none; 
    }

    #sidebar.active {
        display: block; 
        position: absolute; 
        top: 0;
        left: 0;
        height: 100%; 
        background-color: #fff; 
        z-index: 1000;
    }
} */