/* ========================== General Styles ========================== */

/* Giới hạn chiều rộng tổng lock cho Kendo Grid */
@media (min-width: 1135px) {

    /* custom dialog */
.modal-footer {
        padding: 1px 19px;
    width: calc(100% - 13px);
    height: auto;
    
}
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 227px);
    max-width: calc(100% - 13px);
}
div#modalLoading {
    max-height: calc(100vh - 43px);
    
    padding-top: 2px;
}
.modal-header {
    white-space: nowrap !important;

}
.modal-title {
    font-weight: 600 !important;
    font-size: 26px !important;
    color: var(-primary);
    font-family: 'Roboto Condensed', sans-serif !important;
}

/* end */
    #modalLoading form#frmPhieuDieuVan .modal-body.window .scroll-wrapper {
        max-width: 100vw;
        max-height: 100vh;
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.window {
        overflow-y: auto;
        max-height: calc(100vh - 76px);
        min-height: calc(100vh - 67px);
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.window .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 67px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    #modalLoading form#frmPhieuDieuVan .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 39px);
        overflow: auto;
        background: white;
        padding: 19px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 82px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window {
        overflow-y: auto;
        max-height: calc(100vh - 113px);
        min-height: calc(100vh - 154px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 49px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    /* ===== */
    /* ====ipad== */
    #modalLoading form#frmPhieuDieuVan .modal-body.ipad .scroll-wrapper {
        max-width: 100vw;
        max-height: 100vh;
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.ipad {
        overflow-y: auto;
        max-height: calc(100vh - 76px);
        min-height: calc(100vh - 67px);
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.ipad .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 67px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.ipad .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 82px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.ipad {
        overflow-y: auto;
        max-height: calc(100vh - 113px);
        min-height: calc(100vh - 154px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.ipad .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 49px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    /* ===== */



    /* ====Surface== */
    #modalLoading form#frmPhieuDieuVan .modal-body.Surface .scroll-wrapper {
        max-width: 100vw;
        max-height: 100vh;
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.Surface {
        overflow-y: auto;
        max-height: calc(100vh - 76px);
        min-height: calc(100vh - 67px);
    }

    #modalLoading form#frmPhieuDieuVan .modal-body.Surface .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 67px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.Surface .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 82px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.Surface {
        overflow-y: auto;
        max-height: calc(100vh - 113px);
        min-height: calc(100vh - 154px);
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.Surface .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 49px);
        width: calc(100vw - 39px);
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    /* ===== */


    #modalLoading form#frmMauPhieuVanChuyen .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 39px);
        overflow: auto;
        background: white;
        padding: 19px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }
}
@media (min-width: 991px) {
#divFilter .card-body {
    
}
div#accordion {
    padding: 1px;
}
}


@media (max-width: 1134px) {
       /* ====window== */
   .k-toolbar::before
    {
        content:none !important;
        height: 1px !important;
    }
    #gridData .k-toolbar::before {
    content: none;
    height: 1px !important;
}

.k-toolbar.k-grid-toolbar::before {
    display: none;
}
    #modalLoading form#frmMauPhieuVanChuyen .modal-body {
        min-height: calc(100vh - 227px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 227px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window {
        min-height: calc(100vh - 227px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 227px) !important;
    }




    #modalLoading form#frmMauPhieuVanChuyen {
        padding-bottom: 31px;
        padding-bottom: 2px;
        min-height: calc(100vh) !important;
        max-height: calc(100vh) !important;
        min-width: 100%;
        max-width: 100%;
        width: 100vw !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 76px);
        width: 100vw;
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable {
        max-height: 31px;
    }

    #modalLoading form#frmMauPhieuVanChuyen {
        padding-bottom: 2px;
        min-height: calc(100vh - 19px) !important;
        max-height: calc(100vh - 191px) !important;
        min-width: 100%;
        max-width: 100%;
        width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    div.k-grid-footer,
    div.k-grid-header {

        min-height: 41px;
    }

    #modalLoading form#frmPhieuDieuVan {
        padding-bottom: 2px;
        min-height: calc(100vh - 86px) !important;
        max-height: calc(100vh - 86px) !important;
        min-width: 100%;
        height: calc(var(--vh, 1vh) * 100 - 86);
        ;
        max-width: 100%;
        width: 100vw !important;
    }

    .card-body .form-group>* {
        min-width: 100%;
    }

    .wrapper-center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 86px);
        width: 100vw;
        background-color: #f9f9f9;
        box-sizing: border-box;
        padding: 19px;
    }

    .scroll-wrapper {
        max-width: 99vw;
        max-height: 100vh;
        overflow: auto;
        background: white;
        padding: 31px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    .card-body.filter-border.card {
        gap: 9px;
    }

    .d-flex.justify-content-between.align-items-center.flex-nowrap {
        gap: 10px;
    }

    .d-flex.justify-content-between.align-items-center.flex-nowrap>.form-group {
        max-width: 100%;
    }

    div.k-grid-footer,
    div.k-grid-header {
        /* font-size: 19px !important; */
        min-height: 39px;
        font-size: inherit;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        zoom: 1;
        /* font-family: 'Merriweather Sans', sans-serif !important; */
    }

    #frmPhieuDieuVan .modal-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 1px 2px;
        gap: 1px;
    }

    /* ///canh nut duoi */
    #frmPhieuDieuVan .modal-body {
        line-height: unset;
        min-height: calc(100vh - 194px);
        max-height: calc(100vh - 194px);
    }

    #frmPhieuDieuVan .modal-body.iOs {
        line-height: unset;
        min-height: calc(100vh - 139px);
        max-height: calc(100vh - 194px);
    }

    .wrapper-center {
        max-height: calc(100vh) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen div#divPhieuXuatContent {
        /* min-height: 1443px !important;
        min-width: 1999px !important; */
        overflow: auto !important;
    }

    div#divPhieuXuatContent {
        padding-top: unset;
        font-family: 'Roboto Condensed', sans-serif;
        color: #515967;
        font-weight: 600;
        /* height: 1443px; */
        overflow: auto !important;
    }

    .k-grid tr:nth-child(odd) {
        background-color: unset;
    }

    #gridData thead th {
        padding: 1px 15px;
    }

    .img-size-50 {
        width: 39px;
    }

    nav.main-header.navbar.navbar-expand.navbar-white.navbar-light a.nav-link {


        padding-left: 1px !important;
    }

    div#divFilter>div.card-body {
        padding: 1px 1px !important;
    }

    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
        white-space: nowrap;
        text-overflow: ellipsis !important;
        max-width: 668px;
        font-size: 19px;
        padding-left: 1px;
        overflow: auto;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 600;
        color: #486dcf;
        display: block;

        overflow: hidden;
        padding-top: 4px;

    }

    .section-header>* {
        font-size: 13px !important;
    }

    .content-header {
        padding: unset !important;
        padding-top: 1px;
    }

    ol.breadcrumb li.breadcrumb-item>a {
        font-weight: 600;
        color: #d7dce2;
    }




    

    /* =====ios */
    #modalLoading form#frmMauPhieuVanChuyen .modal-body.iOs {
        min-height: calc(100vh - 194px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 194px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.iOs .scroll-wrapper {
        padding: unset;
        min-height: calc(100vh - 94px);
        max-height: calc(100vh - 94px);
        margin-top: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-header.iOs h5.modal-title {
        height: 28px !important;
        margin: unset;
        padding: unset;
        font-size: 19.3px !important;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.iOs h5.modal-title {
        display: none;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.iOs button.close {

        opacity: 0.86;

        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    }

    /* =====iPad */
    #modalLoading form#frmMauPhieuVanChuyen .modal-body.iPad {
        min-height: calc(100vh - 194px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 194px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.iPad .scroll-wrapper {
        padding: unset;
        min-height: calc(100vh - 94px);
        max-height: calc(100vh - 94px);
        margin-top: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-header.iPad h5.modal-title {
        height: 28px !important;
        margin: unset;
        padding: unset;
        font-size: 19.3px !important;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.iPad h5.modal-title {
        display: none;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.iPad button.close {

        opacity: 0.86;

        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    }

    /* ==== */




    /* =====android */
    #modalLoading form#frmMauPhieuVanChuyen .modal-body.android {
        min-height: calc(100vh - 193px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 193px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.android .scroll-wrapper {
        padding: unset;
        min-height: calc(100vh - 154px);
        max-height: calc(100vh - 154px);
        margin-top: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-header.android h5.modal-title {
        height: 28px !important;
        margin: unset;
        padding: unset;
        font-size: 19.3px !important;
    }


    #frmPhieuDieuVan .modal-body.android {

        min-height: calc(100vh - 143px);
        max-height: calc(100vh - 143px);
        height: calc(100vh - 143px) !important;
    }

    #frmPhieuDieuVan .modal-body.android .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 143px);
        overflow: auto;
        background: white;
        padding: 31px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.android h5.modal-title {
        display: none;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.android button.close {

        opacity: 0.86;
        top: 14px;
        right: 27px;

        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    }


    /* ==== */


    /* =====window */
    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window {
        min-height: calc(100vh - 193px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 193px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.window .scroll-wrapper {
        padding: unset;
        min-height: calc(100vh - 154px);
        max-height: calc(100vh - 154px);
        margin-top: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-header.window h5.modal-title {
        height: 28px !important;
        margin: unset;
        padding: unset;
        font-size: 19.3px !important;
    }

    #frmPhieuDieuVan .modal-body.iOs,#frmPhieuDieuVan .modal-body.iPad,#frmPhieuDieuVan .modal-body.android,
    #frmPhieuDieuVan .modal-body.Surface,#frmPhieuDieuVan .modal-body.Surface {

        min-height: calc(100vh - 191px);
        max-height: calc(100vh - 143px);
        height: calc(100vh - 191px) !important;
    }


    #frmPhieuDieuVan .modal-body.window {

        min-height: calc(100vh - 191px);
        max-height: calc(100vh - 143px);
        height: calc(100vh - 191px) !important;
    }

    #frmPhieuDieuVan .modal-body.window .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 143px);
        overflow: auto;
        background: white;
        padding: 31px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.window h5.modal-title {
        display: none;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.window button.close {

        opacity: 0.86;
        top: 14px;
        right: 27px;

        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    }

    /* =====Surface */
    #modalLoading form#frmMauPhieuVanChuyen .modal-body.Surface {
        min-height: calc(100vh - 193px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow: auto;
        height: calc(100vh - 193px) !important;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-body.Surface .scroll-wrapper {
        padding: unset;
        min-height: calc(100vh - 154px);
        max-height: calc(100vh - 154px);
        margin-top: unset;
    }

    #modalLoading form#frmMauPhieuVanChuyen .modal-header.Surface h5.modal-title {
        height: 28px !important;
        margin: unset;
        padding: unset;
        font-size: 19.3px !important;
    }


    #frmPhieuDieuVan .modal-body.Surface {

        min-height: calc(100vh - 143px);
        max-height: calc(100vh - 143px);
        height: calc(100vh - 143px) !important;
    }

    #frmPhieuDieuVan .modal-body.Surface .scroll-wrapper {
        max-width: 100vw;
        max-height: calc(100vh - 143px);
        overflow: auto;
        background: white;
        padding: 31px;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.Surface h5.modal-title {
        display: none;
    }

    #modalLoading form#frmPhieuDieuVan .modal-header.Surface button.close {

        opacity: 0.86;
        top: 14px;
        right: 27px;

        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    }

}

/* ========================== Small Screen Adjustments ========================== */

/* Điều chỉnh thẻ td và thẻ th của Kendo Grid trên màn hình nhỏ */
@media (max-width: 1132px),
(max-height: 433px) {


    .k-grid-header th {}


    #gridData .k-grid-content td,
    .k-grid-content-locked td {
        
        vertical-align: middle;
        padding-left: 8px;
        padding-right: 8px;
        height: 62px !important;
    }

    div#divFilter>div.card-body>.row {
        gap: unset;
        display: flex;
    }

    /* Set chiều cao cho grid */
    #gridData {
        height: 100vh;
    }

    /* Chiều cao dòng trong Kendo Grid */
    #gridData .k-grid-content tr {}

    /* Đảm bảo chiều cao của td trong grid */
    .k-grid-content td,
    .k-grid-lockable .k-grid-content td {
        vertical-align: middle;
        height: 100%;
    }

    /* Căn giữa nội dung bên trong .XeVanChuyen */
    .XeVanChuyen {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    /* Cột đã bị khóa, căn giữa nội dung */
    .k-grid-lockable .k-grid-content .k-locked td {
        vertical-align: middle;
        height: 100%;
    }

    /* Căn giữa nội dung trong cột khóa */
    .k-grid-content .k-locked td .XeVanChuyen {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
}

/* ========================== Responsiveness for Other Elements ========================== */

/* Khi chiều rộng màn hình nhỏ hơn 1000px */
@media (max-width: 1000px) {
    .responsive-QRImg {
        width: inherit;
    }
}

/* Điều chỉnh cho màn hình có chiều rộng nhỏ hơn 991px */
@media (max-width: 991px) {
section.section {
    padding: 13px;
}
    #accordion .card.card-info {
    margin-bottom: unset;
    margin-top: unset;
    padding: unset;
    padding-bottom: 1px;
    background: #f9f9f9 !important;
        border-radius: 5px;
        padding-top: unset;
        padding: 19px !important;
}
    #frmNhatLenhDieuVanTong .modal-body {
        max-height: calc(100vh - 227px);
        overflow: auto;
    }
    
    .layout-footer-fixed .wrapper .main-footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1032;
    max-width: calc(100vw - 39px);
}
body.sidebar-mini.layout-fixed.layout-footer-fixed.sidebar-collapse .wrapper .main-footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1032;
    max-width: calc(100vw);
}
.section-footer {
    position: relative;
    min-width: calc(100vw - 333px);
    max-width: calc(100vw);
    height: 49px;
    overflow: hidden;
}
    div#accordion {
        padding: 1px 1px;
    }

    /* ====tien ich */
    /* form#frmChangeProfile {
        padding-left: 19px;
        padding-right: 19px;
    } */

    form#frmChangeChuKy {
        padding-left: 19px;
        padding-right: 19px;
    }

    form#frmChangePassword {
        padding-left: 19px;
        padding-right: 19px;
        background: #fff !important;
        opacity: 1 !important;
    }

    /* Button styling */
    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {

        max-width: 668px;
        font-size: 25px;
        font-weight: 900;

    }

    /* Thẻ tr trong grid */
    tr.k-alt.k-master-row td[role="gridcell"] {
        white-space: nowrap;
    }

    /* Điều chỉnh vị trí và kích thước của hình ảnh */
    div#divPhieuXuatContent>img {
        top: -43px !important;
        right: -768px !important;
    }

    /* Navbar Item Styling */
    ul.navbar-nav.ml-auto li.nav-item>a {
        padding: 8px 6px !important;
        margin-right: 1px !important;
    }

    /* Scroll animation */
    .birthday-ticker-content {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        font-size: 15.3px;
        animation: scrollTicker 86s linear infinite;
        color: #5c6f85;
    }

    /* Modal Loading Styling */
    /* div#modalLoading {
        height: calc(100%;
    } */

    .modal-footer.justify-content-between,
    .modal-footer.justify-content-between div {
        display: flex;
        overflow: auto;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: baseline;
        justify-items: center;

    }

    /* Kendo Grid Pager */
    div#gridData .k-grid-content-locked,
    div#gridData.k-grid-content {
        overflow: auto;
    }

    /* Input Group Styling */
    td span.k-widget.k-textbox.form-control {
        border: 0px;
        padding-left: 1px;
        padding-right: 1px;
        margin: 1px;
        text-align: center;
    }

    /* Toolbar Styling */
    .k-toolbar.k-grid-toolbar div.row>div {
        display: flex;
        gap: 3px;
        flex-wrap: nowrap;
        overflow: auto;
        
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
    }

    .d-flex-nowrap {
        display: flex;
        gap: 3px;
        flex-wrap: nowrap;
        overflow: auto;
        padding: unset;
        margin: unset;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
    }

    /* Grid Toolbar Flex */
    .k-toolbar.k-grid-toolbar>div {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
    }

    .card-info:not(.card-outline)>.card-header a {
    color: #486dcf !important;
    font-size: 19px !important;
    font-weight: 600;
    padding: 1px 1px;
    font-family: 'Roboto Condensed';
}
.k-grid-toolbar>* {
    
    padding: 13px;
    
}
.k-toolbar.k-grid-toolbar>div>div {
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1px 2px;
}
.k-toolbar.k-grid-toolbar>div>div.input-group {
    min-width: 139px;
}
.modal-title {
    max-width: calc(100% - 86px);
    overflow: hidden;
    text-overflow: initial;
    overflow-x: auto;
}
    .modal-body {
        max-height: calc(100vh - 256px);
        overflow: auto;
    }

.modalLoading-boc .modal-footer {
    position: absolute;
    bottom: 19px;
    left: 1px;
    height: 86px;
    z-index: 3;
    border-radius: unset;
    border: 0px;
    width: calc(100%);
    max-width: 100vw;
}
    /* Other Miscellaneous Styles */
    #idpagebodywrapper>section.content {
        padding: 8px !important;
    }

    #modalLoading .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    #modalLoading .modal-content {
        height: 100%;
        border-radius: 0;
    }

    nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
        background: #fff;
        /*#1B2E4C;*/
        opacity: 0.94;
    }

    nav.main-header.navbar.navbar-expand.navbar-white.navbar-light a.nav-link {
        color: #fff !important;
        font-size: 26px;
    }



    /* === ADMINLTE OVERRIDE === */
    .navbar,
    .sidebar,
    .content-wrapper,
    .main-footer,
    .card,
    .breadcrumb,
    .dropdown-menu,
    .form-control,
    .modal-content,
    .nav-tabs {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15.9px;

    }

    /* === KENDO UI OVERRIDE === */
    .k-widget,
    .k-grid,
    .k-button,
    .k-tabstrip-items,
    .k-header,
    .k-edit-form-container,
    .k-menu,
    .k-tooltip,
    .k-window {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;

    }

    /* Các phần tử chi tiết Kendo */
    .k-grid-header th,
    .k-grid td,
    .k-button,
    .k-dropdown,
    .k-combobox,
    .k-input,
    .k-textbox,
    .k-label {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
    }

    .k-tabstrip .k-item {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
        font-weight: 500;
    }

    .k-toolbar .k-button {
        font-weight: 600;
    }

    .k-grid-header th {
        font-weight: 600;
    }

    .k-grid td {
        font-weight: 400;
    }

    /* === FORM CONTROL, BUTTON, LABEL === */
    label,
    .k-label,
    .form-label {
        font-weight: 500;
        font-size: 14px;
    }

    input,
    textarea,
    select,
    .k-textbox,
    .k-dropdown,
    .k-input {
        font-size: 15.9px;
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    button,
    .btn,
    .k-button {
        font-weight: 500;
        font-size: 15.9px;
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }



    .k-grid-content-locked.k-grid-content-them.k-grid-content-lock {
        overflow-y: auto !important;
    }

    body {
        background-color: var(--background-color);
        margin: 0;
        color: var(--text-color-1);

        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

        font-size: 15.3px !important;

        font-weight: 400;


    }

    .XeVanChuyen {
        display: inline-block;
        padding: inherit;
        background-color: inherit;
        font-weight: bold;

        color: var(--text-color);
        box-shadow: inherit;

        font-size: inherit;

        /* opacity: 0.68; */
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease;
    }

    #gridData tbody th,
    #gridData tbody td,
    #gridData tbody th>div,
    #gridData tbody td>div,
    #gridData tbody th>*,
    #gridData tbody td>* {


        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 19px;

    }

    #gridData thead th,
    #gridData thead th>div {

        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 19px;
    }

    .k-button.k-state-hover,
    .k-button:hover {
        color: var(--text-color-1);
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 15.9px !important;
    }
    #idpagebodywrapper>section.content {
        padding: 8px !important;
        background: inherit;
        border-radius: 13px;
        
        
    }
    nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link>img {
    padding: 1px !important;
    margin: 1px !important;
    transition: transform 0.3s ease;
    height: 34px;
    width: 39px;
}
li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b, li.nav-item.d-none.d-sm-inline-block.add-breadcum .header-title {
  white-space: nowrap;
        text-overflow: ellipsis !important;
        max-width: calc(100vw - 194px);
        padding-left: 1px;
        overflow: auto;
        color: #486dcf;
        font-size: 19px;
        overflow: hidden;
        padding-top: 4px;
}
    .card-info:not(.card-outline)>.card-header a {
        color: #6f7a91 !important;
        font-size: 15.9px !important;
        font-weight: 900 !important;
        padding: unset;
        font-family: 'Open Sans', sans-serif !important;
    }
      
    .main-header .navbar-nav .nav-item {
    margin: 0;
    padding-top: 19px;
}
.k-tabstrip>.k-tabstrip-items>.k-item {
    border-radius: 0;
    background: inherit;
    font-size: 19px;
}
.k-tabstrip>.k-tabstrip-items>.k-item>.k-link {
    padding: 13px 13px;
    color: #6f7a91;
}
.k-tabstrip-top>.k-tabstrip-items .k-state-active .k-link .k-link-text {
    font-weight: 900;
}
.k-tabstrip .k-tabstrip-items {
    overflow: auto;
    align-items: flex-end;
    width: 100vw;
    margin-left: 2px !important;
}
.k-tabstrip-top>.k-tabstrip-items .k-state-active 
{
    border: none;
}
.k-tabstrip-top>.k-tabstrip-items .k-state-active .k-link-text
{
    border: none;
    color: #486dcf;
    font-weight: 900;
}
td.cong-viec{
    white-space: nowrap !important;
}
.modalLoading-boc .modal-header{
    top: 1px;
    overflow: hidden;
    background: transparent;
}



/* custom dialog */
.modal-footer {
        padding: 1px 19px;
    width: calc(100%);
    height: auto;
    
}
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 258px);
    max-width: calc(100%);
}
div#modalLoading {
    max-height: calc(100vh - 43px);
}
.modal-header {
    white-space: nowrap !important;
    max-width: calc(100%);
}

/* end */
#modal-default
{
    max-width: 100%;
}
}

/* ========================== Mobile Adjustments ========================== */
@media (max-width: 768px) {
   
   .modalLoading-boc {
    max-height: calc(100vh - 49px);
}

    a.nav-link[data-widget="fullscreen"] {
        display: none;
    }

    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {

        max-width: 459px;
        font-size: 19px;


    }
/* #modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable a {
    text-align: center;
    height: 44px;
    width: 44px;
    vertical-align: middle;
    padding-top: 13px;
    padding-left: 13px;
    padding-right: 13px;

}
#modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable a:not(:last-child) {
   margin-right: 5px;
    
} 
#modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable>*:not(a) {
        height: 43px;
        border: unset;
        background: transparent;
        padding-left: unset;
    } 
    #modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable {
        max-height: 49px;
        padding: unset;
        background: transparent;
        border: unset;
    }
    #modalLoading form#frmMauPhieuVanChuyen .k-toolbar.k-widget.k-toolbar-resizable>* {
    height: 43px;
    }
    .k-toolbar [data-command="ZoomCommand"] select {
    display: none;
    }
    .k-toolbar [data-command="ZoomCommand"] a {
    width: 49px;
    }
    .km-widget input[readonly], .km-widget input[type=image], .km-widget select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: unset;
}*/
#modalLoading form {
    padding: 1px;
}
.modal-body {
    padding: 13px;
    background: #f9f9f9;
    border-radius: 9px;
}
.modal-content {
   
    padding: 1px;
}
#modalLoading>form>.modal-header .modal-title {
    font-size: 19px !important;
    padding-left: 13px;
}
button:not(button.btn-primary), td button.btn {
    background: #f9f9f9;
    border: 1px solid var(--border-color);
    color: var(
    --primary);
}
#modalLoading>form>.modal-header:first-child .close {
    position: absolute;
    right: 19px;
    top: 49px;
    transform: translateY(-46%);
    z-index: 1;
}
}

@media (max-width: 567px) {
    .k-toolbar.k-grid-toolbar>div {
      
        width: 100%;
        padding: 1px;
    }

  .form-group >.btn, .col-sm-auto >.btn {
    width: 100%;
}
.box-contents .card-body {
    padding: 1px;
    background: #f4f6f9;
}
.k-toolbar.k-grid-toolbar>div {
    gap: 4px;
    overflow-x: auto;
    flex-direction: column;
    flex-wrap: wrap;
    display: flex
;
    padding: 1px;
    background: var(--bg-color);
}
.form-group {
    display: flex
;
    flex-wrap: wrap;
    gap: 4px;
    padding: 1px !important;
    width: 100%;
}

.modal-footer .btn {
    width: 100%;
}
.modal-footer {
        flex-direction: column;
        display: flex
;
        height: auto;
        width: 100%;
        justify-content: space-around;
        padding: 19px 1px;
    }

    /* Cho phép cuộn ngang cho .k-grid-content khi không có lớp .k-auto-scrollable */
    .k-grid-content-locked+.k-grid-content,
    .k-grid-header-locked+.k-grid-header-wrap {
                /* width: calc(100vw - 62px)!important;
        max-width: calc(100vw - 62%) !important; */
        overflow-x: auto !important;
    }

    

    /* Header wrap khi có thêm lớp k-grid-content-them */
    #gridData .k-grid-header-wrap.k-grid-content-them:not(.k-grid-header-locked) {
     /* min-width: 49% !important;
        max-width: 49% !important; */
    }

    /* Cột header đã khoá */
    #gridData .k-grid-header-wrap.k-grid-header-locked {
        /* max-width: 49vw; */
        width: auto !important;
    }

    /* Cột content khi có lớp k-grid-content-locked */
    #gridData .k-grid-content-locked {
        /* max-width: 49vw; */
        /* width: auto !important; */
        overflow: auto;
    }

    /* Trường hợp khi cả k-grid-header-locked và k-grid-content-locked đều có */
    #gridData .k-grid-content-locked.k-grid-header-locked {
        /* max-width: 49vw; */
        /* width: auto !important; */
        overflow: auto;
    }







    #gridData tbody td>button.btn {
    padding: 4px 9px;
}
    .section-info-container {
      
    
    padding: 1px 13px;
  
}

    .k-datetimepicker {
    width: 100%;
    max-width: 100%;
}
    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
        max-width: 287px;
        font-size: 19px;
    }
}


/* Thêm điều chỉnh cho màn hình nhỏ hơn 391px */
@media (max-width: 413px) {
    .k-grid-toolbar {
    background-color: var(--bs-bg-toolbar);
    border-bottom: 1px solid #E5E5EA;
    padding: 8px 1px;
}

}

/* Thêm điều chỉnh cho màn hình nhỏ hơn 391px */
@media (max-width: 391px) {
 
    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {

        max-width: 227px;
        font-size: 19.93px;
        font-weight: 900;


    }

    .k-window-content.km-widget.km-native-scroller {
        
    }

    div#modalLoading {
        
        max-width: 100%;
    }
}