/**
    - 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;
}
/**
    Override style hugerte editor
    - Khi editor ở trong box card thì tạo thành 2 border gây xấu, cần bỏ border của hugerte
    - Mặc định toolbar hơi lớn gây thành 3 dòng, cần cho nhỏ đi để hiển thị 2 dòng sẽ đẹp hơn
*/
.tox-hugerte {
    border: 0;
}
.tox .tox-toolbar__group {
    padding: 0 8px;
}
/**
    Do font này nhỏ hơn font-awesome cũ nên
    nên cần thay tỷ lệ font-size cho tương ứng
*/
.ph,.ph-bold,.ph-light,.ph-thin,.ph-fill,.ph-duotone {
    font-size: 1.25em;
    vertical-align: -0.125em;
}
.ph-xl {
    font-size: 1.65em !important;
}
.ph-lg {
  font-size: 1.5em !important;
  line-height: .05em;
  vertical-align: -.18em;
}
.ph-md {
    font-size: 1.25em !important;
}
.ph-2x {
    font-size: 2.5em !important;
    vertical-align: -0.15em !important;
}
.ph-3x {
    font-size: 3.7em !important;
    vertical-align: -0.15em !important;
}
.ph-spin {
    display: inline-block;
    animation: ph-spin 2s infinite linear;
}

.ph-sm {
    font-size: 1em !important;
}

@keyframes ph-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ph-rotate-90 {
    display: inline-block;
    transform: rotate(90deg);
}
.ph-rotate-180 {
    display: inline-block;
    transform: rotate(180deg);
}
.ph-fw {
    text-align: center;
    width: 1.25em;
}

.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;
    }
}