/*body {*/
/*  padding: 50px;*/
/*  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
/*}*/

/*a {*/
/*  color: #00B7FF;*/
/*}*/
/* Định nghĩa các lớp màu cho các trạng thái */
/* Thay đổi giá trị màu cho mỗi trạng thái theo ý thích */
.bg-status-pending {
    background-color: #ffc107; /* Màu nền cho trạng thái "pending" */
}

.bg-status-processing {
    background-color: #17a2b8; /* Màu nền cho trạng thái "processing" */
}

.bg-status-completed {
    background-color: #28a745; /* Màu nền cho trạng thái "completed" */
}

/* Định nghĩa các lớp màu văn bản cho các trạng thái */
/* Thay đổi giá trị màu cho mỗi trạng thái theo ý thích */
.text-status-pending {
    color: #ffc107; /* Màu văn bản cho trạng thái "pending" */
}

.text-status-processing {
    color: #17a2b8; /* Màu văn bản cho trạng thái "processing" */
}

.text-status-completed {
    color: #28a745; /* Màu văn bản cho trạng thái "completed" */
}
.badge.bg-success {
    font-size: 10px;
    color: white !important;
}
.badge.bg-danger {
    font-size: 10px;
    color: white !important;
}
.badge.bg-warning {
    font-size: 10px;
    color: white !important;
}
.badge.bg-info {
    font-size: 10px;
    color: white !important;
}
.badge.bg-primary {
    font-size: 10px;
    text-align: center;
    color: white !important;
}
.navbar.show.navbar-vertical.h-lg-screen.navbar-expand-lg.px-0.py-3.py-lg-0.navbar-light.bg-light.border-end-lg{
    background-color: white !important;
}
.bg-light.border-top{
    background-color: white !important;
}
/*#navbarVertical {*/
/*    position: fixed;      !* Cố định vị trí *!*/
/*    top: 0;               !* Canh lề trên *!*/
/*    left: 0;              !* Canh lề trái *!*/
/*    height: 100vh;        !* Chiều cao bằng chiều cao viewport *!*/
/*    width: 250px;         !* Chiều rộng cố định, bạn có thể điều chỉnh *!*/
/*    overflow-y: auto;     !* Cho phép cuộn nội dung bên trong nếu cần *!*/
/*    z-index: 1030;        !* Đảm bảo nav luôn ở trên các phần tử khác *!*/
/*}*/
/*.main-content {*/
/*    margin-left: 250px;  !* Tạo khoảng trống bên trái tương ứng với chiều rộng của nav *!*/
/*}*/

@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse {
        flex: 1;
        display: flex
    ;
        flex-direction: column;
        align-items: stretch;
        opacity: 1;
    }
}
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg > [class*=container] {
        flex-direction: column;
        align-items: stretch;
        min-height: 100vh;   /* Sử dụng 100vh để chiếm toàn bộ chiều cao của viewport */
        padding-left: 0;
        padding-right: 0;
        position: fixed;     /* Định vị cố định */
        top: 0;              /* Cố định ở phía trên */
        left: 0;             /* Cố định bên trái */
        width: 250px;        /* Chiều rộng cố định, thay đổi theo nhu cầu */
        overflow-y: auto;    /* Cho phép cuộn nếu nội dung vượt quá chiều cao */
        z-index: 1030;       /* Đảm bảo luôn nằm trên các phần tử khác */
    }
}
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg.show {
        max-width: 250px !important;
        border-radius: 0;
    }
}

.navbar-nav>.nav-item>.nav-link, .navbar-nav>.nav-link {
    margin: 5px !important;
}