/* Cỡ chữ chuẩn của toàn hệ thống là 14px.
   Đoạn CSS mặc định của template trước đây để root 14px nhưng từ 768px trở lên lại nhảy lên 16px,
   nên cùng một màn hình xem trên desktop và trên máy tính bảng ra hai cỡ khác nhau.
   Bootstrap lẫn AdminLTE đều tính theo rem nên chỉ cần cố định gốc ở đây. */
html {
    font-size: 14px;
}

/* Các lớp tự khai cỡ riêng theo em / rem sẽ đẻ ra cỡ chữ thứ hai trên cùng một trang,
   ép hết về 1rem để chữ trong bảng, nhãn phụ, badge, nút nhỏ đều bằng nhau.
   Phân cấp thông tin giữ bằng màu và độ đậm chứ không bằng cỡ chữ. */
small,
.small,
.form-text,
.invalid-feedback,
.valid-feedback,
.badge,
.btn-sm,
.btn-group-sm > .btn,
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.table-sm,
.breadcrumb,
.nav-link,
.dropdown-menu,
.page-link,
.alert,
.toast-body,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-results__option {
    font-size: 1rem;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus {
    color: #00BFA5;
}



[v-cloak] {
    display: none;
}

.toast-success {
    --bs-toast-bg: #51a351;
}

.toast-error {
    --bs-toast-bg: #bd362f;
}

.toast-info {
    --bs-toast-bg: #2f96b4;
}

ul.select2-choices {
    padding-right: 30px !important;
}

    ul.select2-choices:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 5px solid #333;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    line-height: 1.4 !important;
    min-height: 28px; /*calc(2.25rem + 2px) !important;*/
    padding-right: 2rem !important;
    display: flex;
    align-items: center;
}

.select2-container--bootstrap-5 .select2-selection--single {
    height: auto !important;
    min-height: 38px; /*calc(2.25rem + 2px) !important;*/
    display: flex;
    align-items: center;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.select2-results__option {
    white-space: normal !important;
    word-break: break-word !important;
}

.nav-item .nav.nav-treeview {
    padding-left: 20px;
}

/* ================= Ô nhập ngày (flatpickr) =================
   Mọi ô ngày trong hệ thống đều khởi tạo flatpickr ở chế độ static. Chế độ này
   chèn thêm một thẻ div.flatpickr-wrapper bọc quanh ô nhập, mà thẻ đó mặc định
   là inline-block nên ô co lại bằng bề rộng chữ thay vì chiếm trọn cột.
   Ba khối dưới đây trả ô ngày về đúng chỗ của nó, đặt ở đây thay vì ở từng màn
   để mọi ô ngày trông giống nhau. */
.flatpickr-wrapper {
    display: block;
    width: 100%;
}

.flatpickr-wrapper > .form-control {
    width: 100%;
}

/* Trong input-group, thẻ bọc đứng cùng hàng với nút hoặc icon lịch bên cạnh.
   input-group cho phép xuống dòng, nên thẻ bọc rộng 100% sẽ đẩy icon xuống
   hàng dưới. width 1% + flex grow là đúng cách Bootstrap dùng cho .form-control:
   ô bắt đầu từ gần như không có bề rộng rồi giãn ra vừa đủ chỗ còn lại. */
.input-group > .flatpickr-wrapper {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Bootstrap bỏ bo góc dựa trên con trực tiếp của input-group, mà con trực tiếp
   giờ là thẻ bọc chứ không phải ô nhập, nên phải chỉ lại cho đúng ô nhập */
.input-group > .flatpickr-wrapper:not(:last-child) > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .flatpickr-wrapper:not(:first-child) > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Lịch bung ra phải nổi trên các ô phía dưới và trên cả nền popup (modal 1055) */
.flatpickr-calendar {
    z-index: 1060;
}