/**
    - File custom css theo project
    - Nó sẽ ghi đè các css của các file css lib
 */

.tooltip {
    position: absolute;
}
.vh-50 {
    height: 50vh !important
}
.fs-7 {
    font-size: 0.75rem !important
}
.object-fit-contain {
    object-fit: contain;
}

.form-control-feedback-start:not(.filterBasicImportant.search-group) .form-control {
    padding-left: calc(var(--input-padding-x) * 2 + var(--icon-font-size))
}
.autoComplete_wrapper > ul {
    z-index: 106;
    min-width: 310px !important;
}
/* set height ckeditor product content */
/*#cldetailPsContent .ck-editor__editable {*/
/*   height: 22.3rem;*/
/*}*/
#cldetailPsContent figure.table>table{
    width: 100%;
}
.autoComplete_wrapper > ul > li.active{
    color: var(--ac-item-active-color);
    background-color: var(--ac-item-active-bg)
}

.border-top-left-radius-0 {
    border-top-left-radius: 0 !important;
}
.border-top-right-radius-0 {
    border-top-right-radius: 0 !important;
}
.border-bottom-left-radius-0 {
    border-bottom-left-radius: 0 !important;
}
.border-bottom-right-radius-0 {
    border-bottom-right-radius: 0 !important;
}

/**
* có class fakeInput thì ko dùng css này
* do có trường hợp muốn dùng input
* select2, date-range
 */
.form-control[readonly]:not(.fakeInput) {
    background-color: #fafafa;
    opacity: 1;
}

.bg-slate {
    background-color: #607d8b;
}

div#boxZaloChat {
    right: 15px !important;
    bottom: 30px !important;
}
.bg-grey-400{background-color:#888}

/**
* @link https://work.1app.vn/loi-pos-don-hang-man-hinh-in-don-hang-hien-thi-sai.t516566.p200?businessId=124
* Tình huống:
* - Xảy ra khi user chỉ in 1 đơn, vùng app-root đang có style height: 100% nên vô tình tạo khoảng trắng lớn cho vùng này
* - In nhiều đơn không gặp tình trạng trên
* Giải pháp:
* - Ở vùng in chứa app-root để height auto, trình duyệt tự tính toán lại vùng này
**/
.layout-mode-print {
    app-root {
        height: auto;
    }

    /*
        Update: 2025-07-11
        + Trong file all.min.css, các thẻ tbody, td, tfoot, th, thead ,tr đang bị set border-with: 0
            => làm mất border của phần bảng đã lưu trước đó, bootstrap css bên UI cũ không có phần này
        Update: 2025-12-31
        + Tương tự border-with, border-style trong file all.min.css đang bị set solid
            => Vô tình làm phần border hiển thị trên firefox (chrome, edge không bị ảnh hưởng)
        + Giải pháp: chuyển sang inherit để có thể thừa kế theo style lớp cha là được.
    */
    tbody, td, tfoot, th, thead ,tr {
        border-width: inherit;
        border-style: inherit;
    }
}

@media (max-width: 768px) {
    .overflow-auto-mb {
        overflow: auto !important
    }
}

@media (min-width: 768px) {
    .modal-xxl {
        --modal-width: 99vw;
    }
}
@media (min-width: 992px) {
    .modal-xxl {
        --modal-width: 1100px;
    }
}
@media (min-width: 1200px) {
    .modal-xxl {
        --modal-width: 1400px;
    }
}
@media (max-width: 768px) {
    .overflow-auto-mobile{
        overflow: auto;
        min-height: 270px;
        max-height: 500px;
    }
}