/* Style của MainLayout — tách khỏi khối <style> inline trong MainLayout.razor.
   Không dùng CSS isolation vì các selector ở đây nhắm tới DOM do BootstrapBlazor.Layout,
   Syncfusion Menu (.e-menu-container) và MegaMenu sinh ra, nằm ngoài phạm vi scope-id
   của component. */

.tabs .tabs-body {
    padding: .4rem;
}

.custom-menu {
    font-size: 0.8rem;
}

.e-menu-container .e-menu {
    color: black;
}

    .e-menu-container .e-menu .e-menu-item .e-caret {
        display: none;
    }

    .e-menu-container .e-menu .e-menu-item.e-focused {
        border-radius: 5px;
    }

    .e-menu-container .e-menu .e-menu-item.e-selected {
        border-radius: 5px;
    }

.e-menu-container ul .e-menu-item.e-menu-caret-icon {
    padding-right: 12px !important;
    margin: 0 5px;
}

.e-menu-container.e-menu-popup {
    top: 38px !important
}

.unit-info {
    cursor: pointer;
    margin: 6px 12px;
    color: black;
    padding: 4px 8px;
}

    .unit-info p {
        color: #FF6363;
        font-weight: 500;
        margin: 0;
        font-size: 14px;
    }

    .unit-info:hover {
        background-color: #FFD8D8;
        border-radius: 6px;
    }

#layout-content {
    display: flex;
    flex-direction: column;
}

.layout .layout-banner .layout-logo {
    background-color: transparent;
    border: none;
}

/* Khi sidebar bị thu nhỏ */
.logo-collapsed {
    display: none;
}

.logo-full {
    display: block;
}

/* Khi sidebar bị thu nhỏ */
.is-collapsed .logo-full {
    display: none !important;
}

.is-collapsed .logo-collapsed {
    display: block !important; /* Sử dụng !important để đảm bảo không bị ghi đè */
}