/* ========================== 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: 24px !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) {
    .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: #3f6791;
        display: block;
        color: #fff;
        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;
    }

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

    /* Kendo Grid - Cột Header và Content bị khoá */
    #gridData .k-grid-header-locked,
    #gridData .k-grid-content-locked {
        max-width: 191px !important;
    }

    /* 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 {
        overflow-x: auto !important;
        /* Cho phép cuộn ngang */
    }

    /* Đặt max-width cho phần header */
    .k-grid-header-wrap:not(.k-grid-header-locked) {
        max-width: 100vw;
        width: auto !important;
    }

    /* Đặt chiều rộng cho .k-grid-content khi có lớp k-grid-content-lock */
    .k-grid-content.k-grid-content-lock {
        width: calc(100% - 191px) !important;
    }

    /* Đặt chiều rộng cho .k-grid-content khi không có lớp k-grid-content-lock */
    .k-grid-content.k-grid-content-khong-lock {
        width: calc(100%) !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) {
        width: calc(100% - 62vw) !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;
    }

    /* 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;
    }
}

/* ========================== 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 {
        white-space: nowrap !important;
        vertical-align: middle;
        padding-left: 8px;
        padding-right: 8px;
        height: 62px !important;
    }
    div#divFilter>div.card-body>.row {
        gap: 10px;
        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) {
    div#accordion {
    padding: 9px 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;
        padding: unset;
        margin: unset;
        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: var(--text-color) !important;
        font-size: 25px;
        font-family: UTMBebas, sans-serif;
        font-weight: 500;
    }

    .modal-body {
        max-height: calc(100vh - 256px);
        overflow: auto;
    }


    /* Other Miscellaneous Styles */
    #idpagebodywrapper>section.content {
        padding: 1px !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;
    }
    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
        
        color: #3f6791;
      
    }
    html, body {
    
  
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ;
  font-weight: 400;
  font-size: 19px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === 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: 15px;
  font-weight: 400;
}

/* === 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;
}

}

/* ========================== Mobile Adjustments ========================== */
@media (max-width: 768px) {
    li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {

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


    }

}

/* 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 {
        padding-right: 49px;
    }

    div#modalLoading {
        padding-right: 34px !important;
        max-width: 100%;
    }
}