html #layoutSidenav_content {
    font-size: 14px;
}

body {
    font-family: "Roboto", system-ui;
    color: #000
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: #000;
    font-weight: bold;
}
/*
div::-webkit-scrollbar, ul::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

div::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 10px
}

    div::-webkit-scrollbar-thumb:hover, ul::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,.5)
    }*/

.fa-sync-alt.fa-spin {
    margin-left: 5px;
}

#toast-container > div {
    opacity: 1;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;
}

.form-control,
.bootstrap-select > .dropdown-toggle {
    padding: 0.5rem 0.75rem;
    min-height: 32px;
    line-height: 1.25;
}

.col-form-label {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
}

.form-label {
    margin-bottom: 0.25rem;
}

.bg-yellow {
    color: #000;
    background-color: yellow !important
}

.bg-blue {
    color: #fff;
    background-color: #4285f4 !important
}

.bg-green {
    color: #fff;
    background-color: #34a853 !important
}

.bg-pink {
    color: #000;
    background-color: #e6b8af !important
}

#myForm .col-form-label {
    text-align: right;
}

/* table */
.table {
    color: #000
}

    .table th {
        /*white-space: nowrap;*/
        text-align: center;
        vertical-align: middle;
        min-width: 85px;
    }

/*th:first-child, td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #f8f9fa;
}*/

.table-slvechitiet th.sticky-left {
    position: sticky;
    left: 0;
    background-color: lightgray;
}

.table-slvechitiet td.sticky-left {
    position: sticky;
    left: 0;
    background-color: #f8f9fa;
}

.table-slvechitiet th.sticky-left:nth-child(2), td.sticky-left:nth-child(2) {
    left: 85px;
}

/* sticky head */
.table-fit {
    overflow: auto;
}

    .table-fit thead {
        position: sticky;
        top: -1px;
        z-index: 1;
        background-color: lightgray;
    }

/* card fit height */
.table-fit {
    max-height: calc(100vh - 65px) !important;
}

.scroll-wrapper {
    position: fixed;
    bottom: 0; /* Để neo cố định ở đầu, nếu muốn ở cuối thì đổi thành bottom: 0; */
    left: 0;
    width: 100%;
    overflow-x: auto;
    z-index: 9999; /* Đảm bảo luôn hiển thị trên cùng */
    background-color: #f8f9fa; /* Màu nền của thanh cuộn */
}

.table > :not(caption) > * > *, .dataTable-table > :not(caption) > * > * {
    padding: 0.2rem 0.4rem;
}

table td {
    line-height: 1.35;
}

table .scroll-cell {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 3rem;
}

/* override topbar */
.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav {
    padding-top: 0;
}

.nav-fixed .topnav {
    position: unset;
}

.nav-fixed #layoutSidenav #layoutSidenav_content {
    top: 0;
}

#layoutSidenav #layoutSidenav_content {
    display: block;
}

.bg-orange {
    background-color: orange !important;
}

@media (max-width: 575px) {
    .topnav .dropdown .dropdown-menu {
        width: auto;
        min-width: 15rem;
        right: 65px;
        left: auto;
        top: 65px !important;
    }
}

.justify-items-center {
    justify-items: center !important;
}

.user-profile-header-banner img {
    width: 100%;
    object-fit: cover;
    height: 150px !important;
}

.trainingPackage-body {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Giới hạn 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* Điều chỉnh chiều cao phù hợp với font-size */
}

.select2-container--bootstrap-5 {
    width: 100% !important;
}

.cursorPoint {
    cursor: pointer;
}

.cursorPoint {
    background: linear-gradient(135deg, #007bff, #66ddff);
    border-radius: 16px; /* Bo góc mềm mại */
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Bóng đổ nhẹ */

    border-left: 6px solid #007bff; /* Viền trái màu xanh dương */
}

    /* Hiệu ứng hover */
    .cursorPoint:hover {
        transform: translateY(-8px);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
       /* background: linear-gradient(135deg, #43b3a5, #52c478);*/
        background: linear-gradient(135deg, #e63946, #ff6f61);
    }

    /* Hiệu ứng khi click */
    .cursorPoint:active {
        transform: scale(0.98);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    .cursorPoint .info {
        color: #2c3e50; /* Xám đậm để dễ đọc */
        font-weight: 600; /* Làm đậm một chút */
    }

    .cursorPoint .time {
        color: #054a29; /* Xanh rêu đậm */
        font-weight: 500;
    }

/* Điều chỉnh thẻ badge */
.badge {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.packageInfo {
    background: linear-gradient(135deg, #66aaff, #66d1ff);
}

.avatar-sm {
    flex-shrink: 0; /* Giữ kích thước avatar cố định */
}


.trainingPackage-body {
    max-height: 100px; /* Điều chỉnh chiều cao phù hợp với 3 dòng */
    overflow: hidden;
    position: relative;
}






.cursorPoint {
    /*background: linear-gradient(135deg, #f94449, #ff9a8b, #ffd3b6);*/
    /*background: linear-gradient(135deg, #f94449, #ff9a8b, #ffd3b6, #1a1a1a);*/

    /*background: linear-gradient(135deg, #f94449, #ff9a8b, #ffd3b6, #2c2c2c);*/
    /*background: linear-gradient(135deg, #f94449, #ff9a8b, #ffd3b6, #2c2c2c);*/
    /*background: linear-gradient(135deg, #f94449, #ff6b6b, #333333);*/
    /*background: linear-gradient(135deg, #f94449, #c0392b, #1a1a1a);*/
    /*background: linear-gradient(135deg, #f94449, #ff414d, #2c2c2c);*/

    background: linear-gradient(135deg, #f94449, #ff6b6b, #333333);




    border-radius: 16px; /* Bo góc mềm mại */
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Bóng đổ nhẹ */
    border-left: 6px solid #d63031; /* Viền trái màu đỏ đậm */
    color: white; /* Màu chữ trắng để dễ đọc */
}

    /* Hiệu ứng hover */
    /*.cursorPoint:hover {
        transform: translateY(-8px);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #e63946, #ff6f61);
    }*/

    /* Hiệu ứng khi click */
    /*.cursorPoint:active {
        transform: scale(0.98);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }*/

    /* Màu chữ chính */
    /*.cursorPoint .info {
        color: #fff;*/ /* Chữ trắng để tương phản */
        /*font-weight: 600;
    }

    .cursorPoint .time {
        color: #ffeaa7;*/ /* Vàng nhạt để tạo điểm nhấn */
        /*font-weight: 500;
    }*/

/* Badge chỉnh màu theo tông chủ đạo */
/*.badge {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.bg-label-danger {
    background-color: #d63031 !important;*/ /* Đỏ đậm */
    /*color: white !important;
}

.bg-label-primary {
    background-color: #ff9f43 !important;*/ /* Cam nhạt */
    /*color: white !important;
}

.bg-label-warning {
    background-color: #fdcb6e !important;*/ /* Vàng */
    /*color: black !important;
}*/