/* Liên kết đến Google Fonts */
/* Import phông chữ từ Google Fonts */



/* mystyle.css */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Open+Sans:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');




@font-face {
    font-family: UTMBebas;
    src: url(/fonts/UTMBebas.ttf) format('truetype')
}

:root {

    
    --bg-color-white: #f9f9f9;
    
    --bg-color: #f4f6f9;
    --border-color: rgba(0, 0, 0, 0.05); /*#007bff*/
    --shadow-soft: 0 0 2px 2px #ececec !important;
    
    --primary-color:#486ed8;
    --brand-color:#486ed0;
    --primary: #486ed0;


    --text-color: #515967;
    --text-color-header: #697492;
    --text-title-color: #636568;
    
    --hover-color: #41B1E1;
    --button-primary: #3567c3;
    --button-secondary: #C1C1C1;
    
    
    
    
    --pager-bg: #C1C1C1;
    --navbar-bg: #0e6dbd;
    --status-new: #41B1E1;
    --status-assigned: #41B119;
    --status-in-progress: #3151B1;
    --status-completed: #3567c3;
    --status-pending-approval: #F4C131;
    --status-error: #E45153;
    --status-overdue: #C14141;
    --button-primary-bg: #3567c3;
    --button-primary-hover: #3151B1;
    --button-secondary-bg: #41B1E1;
    --button-secondary-hover: #3191C1;
    --nav-link-active: #E45252;
    --nav-link-active-hover: #C14141;
    --nav-link-active-text: #FFFFFF;
    --card-hover-background: rgba(0, 0, 0, 0.08);
    --card-border: rgba(0, 0, 0, 0.10);
    --card-border-active: rgba(0, 0, 0, 0.2);
    --header-foreground: #242424;


   
    --color-primary: var(--primary-color);
    --color-success: #00bc8c;
    --color-warning: #FFB900;
    --color-danger: #D13438;
    --color-info: #0178D4;
    --color-light: #F3F2F1;
    --color-dark: #323130;
    --color-title: #496dd0;
    
    
    --bs-font-body: 'Open Sans', sans-serif;
    --bs-font-body1: 'Roboto Condensed', sans-serif;
    
    --bs-font-size: 15.3px;
    --bs-bg-toolbar: #fafafa;
    --bs-bg-menu-left: #0f1a34;
    --bs-bg-menu-left-second: #1B2E4C;
    --bs-bg-section: var(--bg-color-white);
    --bs-color-input: #6F7A91;

    --min-width: 49px;
    --min-width: 68px;



    --color-primary: #017FCC;
  --color-primary-light: #C2E9FB;
  --color-primary-hover: #0267A4;
  --color-primary-dark: #014F80;
  --color-secondary: #5AB5E7;
  --color-success: #28A745;
  --color-warning: #FFC107;
  --color-danger:  #DC3545;
  --color-text-light: #FFFFFF;
  --color-label:#495054;

}



body {
    background-color: var(--bg-color);
    margin: 0;
    color: var(--text-color);
 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    font-size: 15.3px !important;
    
    color: #6f7a91;
    font-weight: 400;
    
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; 
}

.success{
    color: #496dd0;
    
    background: #f5f5f5;
}
.danger{
    color: var(--color-danger);
    
    background: #f5f5f5;
}
/* button */
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    text-align: left;
}

.btn:not(td .btn, .input-group-append .btn,.card-header .btn,.accordion-header .btn) {
    white-space: nowrap;
    font-size: 15.9px ;
    padding: 8px 25px;
    border-radius: 26px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    max-height: 41px;
    height: 41px;
    display: inline-block;
    margin: 2px;

}
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    will-change: transform;
 
}

.nav-tabs .nav-link.active {
    color: var(--brand-color);
    background-color: #f9f9f9;
    text-decoration: underline;
    font-weight: 600;
    border-color:var(--border-color);
}

button.btn.btn-danger.btn-square.form-control.space {
    
}
.btn:hover:not(a[data-toggle="collapse"]) {
    transform: scale(1.13);
    box-shadow: 0 4px 9px var(--border-color);
    /*background-color: #0056b3;  Hoặc màu phù hợp thương hiệu của bạn */
    /* color: white; */
}

a[data-toggle="collapse"]:not(#accordion a[data-toggle="collapse"]):hover {
    transform: scale(1.1);
    box-shadow: 0 4px 3px var(--border-color);
  
}


.btn-primary,.sweet-alert button.confirm {
       color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: none;
}

.sweet-alert button.confirm
{
     color: #fff;
    background-color: var(--brand-color) !important;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
} 



.btn-second {
    color:  var(--primary-color);

    background-color:var(--bs-color-white);
    border-color: var(--primary-color);
} 

.btn-second:hover {
    color: #f9f9f9 !important;
    background-color: var(--primary-color);
} 

.btn-third {
    color:  var(--primary-color);
    text-decoration: underline;
      text-decoration-color: var(--primary-color);
    text-decoration-style: dashed; /* solid | dotted | double | wavy */
} 

.btn-third:hover {
    color: var(--bs-color-white);
    background-color: var(--primary-color);
} 






.btn-success {
    background-color: #2ed8b6;
    border-color: #2ed8b6;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

.btn-success:hover {
    background-color: #59e0c5;
    border-color: #59e0c5;
}


.btn-info {
    background-color: #00bcd4;
    border-color: #00bcd4;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

.btn-info:hover {
    background-color: #08e3ff;
    border-color: #08e3ff;
}

.btn-warning {
    background-color: #FFB64D;
    border-color: #FFB64D;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

.btn-warning:hover {
    background-color: #ffcb80;
    border-color: #ffcb80;
    color: #fff;
}

.btn-danger {
    background-color: #FF5370;
    border-color: #FF5370;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

.btn-danger:hover {
    background-color: #ff869a;
    border-color: #ff869a;
}


.btn-inverse {
    background-color: #37472f;
    border-color: #37472f;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}
    .k-window-content.km-widget.km-native-scroller {
        background: #f4f6f9;
    }
.btn-inverse:hover {
    background-color: #4c626d;
    border-color: #4c626d;
}

/* === */

/* Áp dụng font mặc định cho tất cả các phần tử Kendo UI */
.k-widget,
.k-textbox,
.k-dropdown,
.k-input,
.k-button,
.k-select,
.k-grid,
.k-grid-toolbar {
    font-family: 'Open Sans', sans-serif !important;

    font-size: 15.3px !important;
    /* Bạn có thể điều chỉnh kích thước font */

}

/* Cụ thể cho các phần tử input (TextBox, Dropdown, etc.) */
.k-textbox,
.k-dropdown,
.k-input {
    font-family: 'Open Sans', sans-serif !important;

    font-size: 15.3px;
    /* Bạn có thể điều chỉnh kích thước font */

}

/* Nếu muốn chỉnh cho tất cả các phần tử button của Kendo */
.k-button {
    font-family: "Tahoma", sans-serif;
    /* Font cho các button */
}

.wrapper {
    
    background: #f4f6f9;
}
.paddingWindow {
    padding: 0px !important;
    padding-bottom: 39px;
}

label {
    color: var(--text-color-header);
    font-weight: 600;
}
button.close>span,button.close {
    color: var(--color-danger);
    font-size: 41px;
    font-weight: 900;
    transition: transform 0.3s ease;
    display: inline-block;
}
.modal-header {
    white-space: nowrap !important;
    background: #f4f6f9;
}
button.close:not(.modalLoading-boc button.close, #modalLoading  button.close, #modelContainer  button.close, .commentBox button.close ) {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 9999;
    opacity: 0.86;
    transition: opacity 0.3s ease;
}

button.close:hover {
    opacity: 1;
}


button.close>span:hover {
    transform: scale(1.3);
}

.modal-header {
    white-space: nowrap !important;
}

.modal-title {
    color: var(--color-title);
    font-weight: 700;
}

.modal-body {
    
    max-height: calc(100vh - 194px);

}

.k-grid-toolbar {
    white-space: normal !important;
}

.divTextSearch {
    display: flex !important;
}

.k-grid .k-grid-search {
    width: 100% !important
}

.topWindowNormal {
    top: 1px !important;
}

.topWindowFull {
    top: 0px !important;

}

nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
    background: #f9f9f9;
}

.swal2-container {
    z-index: 10072 !important;
}

.swal2-title {
    margin-left: 1em !important;
}

.d-block::after {
    font-family: 'Font Awesome\ 5 Pro';
    content: "\f078";
    color: #fff;
    right: 0px;
    position: absolute;
}

.d-block[aria-expanded="true"]::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.d-block {
    position: relative;
}

.input-group input {
    margin-left: auto !important;
}

.modal-content {
    border: 0px !important;
    overflow-x: auto;
    padding: 19px;
}

.k-window-content {
    /* padding: 0px !important;*/
    overflow-y: hidden !important;
    overflow-x: auto;
    
}

.k-widget.k-window.topWindowNormal {
    padding-bottom: 1px;
}

.k-grid-content {
    /* height: 350px !important; */
}

/*.k-list-filter {
    display: inline !important;
}

.k-popup .k-list .k-item > .k-group {
    background: #217ebd !important;
}*/


/* ======= */
.k-animation-container,

.k-animation-container :after,
.k-block .k-header,
.k-list-container,
.k-widget
{
    box-sizing: border-box !important;
    border: 1px solid var(--border-color);
}

.k-grid tr td {
    border-top-width: 0px !important;
    border-bottom-width: 1px !important;
    border-right-width: 1px !important;
    font-family: 'Merriweather Sans';
    color: var(--text-color);
    font-size: 15.3px;
}

.k-grid tr th {
    border-right-width: 1px !important;
    font-family: 'Merriweather Sans';
    color: var(--text-color);
    font-size: 15.3px;
    font-weight: 600;
}

.k-treelist .k-header {
    text-align: left !important;
}

.k-header {
    text-align: center !important;
    font-weight: bold !important;
}



.k-checkbox-label {
    vertical-align: middle !important;
}

.grid-text-center {
    text-align: center !important;
}

.k-grid-content {
    /* min-height: 360px !important; */
}

.k-grid-norecords {
    padding-left: 26px;
    color: var(--color-danger);
    font-size: 19px;
    font-weight: 600;
    font-family: 'Merriweather Sans', sans-serif;
    justify-content: center;
}

.content-header {
    padding: 1px 4px;
    padding-top: 13px;
}

.table {
    margin-bottom: 0px !important;
}

.k-grid-norecords-template {
    border-width: 0 !important;
}

#divDataContent .container {
    width: auto !important;
}

#reportViewer1 {
    height: 450px;
    font-family: "segoe ui", "ms sans serif";
    overflow: hidden;
    margin: 5px;
}

.text-danger {
    color: var(--red) !important;
    /*padding-left: 30px;*/
}

/*grid tệp đính kèm: Ẩn grid header */
#attachment {
    margin-bottom: 10px;
}

#attachment .k-grid .k-header {
    display: none;
}

/*grid tệp đính kèm: Ẩn grid row line*/
#attachment .k-grid tr td {
    border-width: 0px;
    border-style: none;
}

/*grid tệp đính kèm: canh trái các nút*/
#attachment .k-grid tr td a {
    border-width: 0px;
    border-style: none;
}

#attachment .btnTDK {
    padding-left: 10px;
}

.toast {
    min-width: 350px;
}

/*#popupProcessReader .k-window{
    z-index:10060 !important;
}
*/
.row-high-light {
    color: var(--red) !important;
}

.row-warn {
    color: orange !important;
}

.jquery-notific8-notification {
    height: auto;
    max-height: 100px;
}

.k-window {
    z-index: 100000 !important;
    border-radius: .3rem !important;
}



.modal-overflow .modal-body {
    overflow-x: hidden !important;
}

.modal-body-hiday {
    padding-bottom: 70px !important;
}

.modal-footer-hiday {
    text-align: right;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 6px;
    width: 100%;
    background-color: #f9f9f9;
}

/*
    CLASS DÙNG CHO MÀN HÌNH CHẤM CÔNG START
    1) CHỈNH KHUNG HÌNH CAMERA
    2) CHỈNH KHUNG HÌNH CHỤP
*/
.camera {
    width: 100%;
    height: auto;
}

.hinhChup {
    width: 100%;
    max-height: 30vh;
}

/* CLASS DÙNG CHO MÀN HÌNH CHẤM CÔNG END*/

/* CLASS DÙNG CHO CÁC MÃ QR SCALE FULL CHIỀU NGANG*/


/* LÀM MỜ INPUT KENDO KHI Ở TRẠNG THÁI READONLY (MÀN HÌNH NHẬT LỆNH) */
.k-textbox input[readonly],

.k-numerictextbox input[readonly],
.k-datepicker input[readonly],
.k-dropdown[aria-readonly=true] .k-dropdown-wrap,
.k-datetimepicker input[readonly] {
    background-color: #e8e8e8 !important;
    opacity: 0.6 !important;
    line-height: 31px;
}

.confirm-text-style {
    font-size: 1.2rem !important;
}

.grid-cell-on-top {
    vertical-align: text-top !important;
    white-space: normal !important;
}


/* ===== phieu can==== */
#frmPhieuDieuVan .modal-header {

    padding-top: unset;
    padding-bottom: unset;
}

div#divPhieuXuatContent {
    padding-top: unset;
    font-family: 'Roboto Condensed', sans-serif;
}

.table-border,
th.th-border:not(.colTenKho, .colDiemChatTaiDoTai),
.table-border td.td-border:not(.colTenKho, .colDiemChatTaiDoTai) {

    border: 1px solid rgba(0, 0, 0, .125) !important;
    padding: 1px !important;
}

.table-border,
th.th-border.colTenKho,
th.th-border.colDiemChatTaiDoTai,
th.th-border.colDonViTinh,
.table-border td.td-border.colTenKho,
.table-border td.td-border.colDonViTinh,
.table-border td.td-border.colDiemChatTaiDoTai {

    border: 1px solid rgba(0, 0, 0, .125) !important;

}

.td-border-boc {
    position: relative;
    width: 100%;
    height: 49px;
    overflow: hidden;
}

.td-border-boc>* {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

table#tbNhapXuat.table-border:hover,
table#tbNhapXuat th.th-border:hover,
table#tbNhapXuat td.td-border:hover {
    /* border-color: #5c6f85 !important;  */
    /* Thay đổi màu border khi hover để nổi bật */
    box-shadow: var(--shadow-soft);
    /*0 1px 3px rgba(0, 0, 0, 0.1);  Đổ bóng mạnh hơn khi hover */
}

table.phieu-header-table>tbody>tr>td {
    padding: unset !important;
}

.k-dropdown-wrap .k-input,
.k-numeric-wrap .k-input,
.k-picker-wrap .k-input {
    /* border: 1px solid var(--border-color) !important; */
}



/* ====ket thuc phieu can=== */
td.tai-xe {
    font-family: 'Roboto Condensed', sans-serif;
    min-width: 191px;
    white-space: nowrap;
    text-align: left !important;
white-space: normal !important;
    color: var(--text-color);
}
#gridData tbody td.tai-xe
{
    white-space: normal !important;
    text-align: left !important;
    font-weight: 900 !important;
}
td[role="gridcell"]>a>i.fa-shipping-fast::before {
    color: var(--color-title);
}

table#\#tbNhapXuat tr td.colTenKho {
    min-width: 134px;
    max-width: 186px;
}

table#\#tbNhapXuat tr td.td-border.colDiemGiua {
    min-width: 94px;
    max-width: 94px;
}

td.td-border.colThoiDiemQuaCan {
    vertical-align: middle !important;
}

td.td-border.colThoiDiemQuaCan *,
td.td-border.colThoiDiemQuaCan span,
td.td-border.colThoiDiemQuaCan input,
td.td-border.colThoiDiemQuaCan .k-widget {
    vertical-align: middle !important;
    min-width: 149px !important;
    font-size: 19px !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

#tbNhapXuat .k-input {
    text-indent: 3px !important;
    font-weight: 600 !important;
    font-family: var(--bs-font-input1);
}

table#tbNhapXuat>tbody>tr:first-child>td {
    text-align: center !important;
    vertical-align: middle;
    /* Căn giữa theo chiều dọc nếu cần */
    white-space: normal !important;
}

.k-numeric-wrap.k-expand-padding .k-input {
    font-family: var(--bs-font-input1);
    text-indent: 3px;

    font-weight: 600;
}

.form-control {
    font-size: var(--bs-font-size);
}

/* ===suport */
/* CSS cho thanh cuộn dọc */
.row-edit::-webkit-scrollbar {
    width: 3px;
    /* Chiều rộng thanh cuộn */
}

/* CSS cho thanh cuộn ngang */
.row-edit::-webkit-scrollbar {
    display: none;
}
.wrapper-center::-webkit-scrollbar {
    display: block;
}
/* CSS cho track thanh cuộn */
.row-edit::-webkit-scrollbar-track {
    background: var(--bg-color);
    /* Màu nền của thanh cuộn */
    border-radius: 8px;
    /* Bo tròn góc của track */
}

/* CSS cho thumb (phần kéo của thanh cuộn) */
.row-edit::-webkit-scrollbar-thumb {
    background: var(--bg-color);
    /* Màu của thumb */
    border-radius: 10px;
    /* Bo tròn thumb */
}

/* Thêm hiệu ứng khi hover vào thumb */
.row-edit::-webkit-scrollbar-thumb:hover {
    background: var(--bs-bg-toolbar);
    /* Màu thumb khi hover */
}

.row-edit>* {
    min-width: 153px;
}

.section-footer-right-container {
    display: flex;
    justify-items: center;
    align-items: baseline;
    flex-wrap: nowrap;
    justify-items: flex-end;
    

}




#joinZaloGroup {
    position: fixed;
    
     top: 334px;
    right: 19px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 49px;
    display: inline-block;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: var(--shadow-soft);
    /* 0 2px 6px rgba(0, 0, 0, 0.3);  Thêm bóng nhẹ */
}
#webgiaonhan {
    position: fixed;
    top: 449px;
    right: 19px;
    height: 43px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 49px;
    display: inline-block;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: var(--shadow-soft);
    /* Thêm bóng nhẹ */
}
#webnhatlenh {
    position: fixed;
    top: 449px;
    right: 19px;
    height: 43px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 49px;
    display: inline-block;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Thêm bóng nhẹ */
}



#websiteImage {
    position: fixed;
   top: 394px;
    right: 19px;
    height: 43px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 49px;
    display: inline-block;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: var(--shadow-soft);
    /* Thêm bóng nhẹ */
}
@media (max-width: 991px) {

    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 39px;
    }
}

@media (max-width: 768px) {

    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 34px;
    }
}

/* Hiệu ứng hover cho máy tính */
#joinZaloGroup:hover,
#websiteImage:hover,
#webgiaonhan:hover,
#webnhatlenh:hover {
    transform: scale(1.3);
    /* Phóng to nhẹ khi hover */
    opacity: 0.9;
    /* Mờ nhẹ khi hover */
    box-shadow: var(--shadow-soft);
    /* Bóng đổ mạnh hơn khi hover */
}

/* Hiệu ứng hover cho điện thoại */
@media (max-width: 1133px) {

    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 45px;
        /* Mở rộng kích thước cho điện thoại */
    }

    #joinZaloGroup:hover,
    #websiteImage:hover,
    #webgiaonhan:hover,
    #webnhatlenh:hover {
        transform: scale(1.3);
        /* Phóng to mạnh hơn trên điện thoại */
        opacity: 0.8;
        /* Mờ nhẹ khi hover */
        box-shadow: var(--shadow-soft);
        /* Bóng đổ mạnh hơn trên điện thoại */
    }
}

.colDanhMuc,
.colTenKho,
.colDiemChatTaiDoTai,
.colDiemGiua,
.colThoiDiemQuaCan,
.colGhiChu {

    font-family: var(--bs-font-input1);
    text-indent: 3px;
}

.colKhoiLuongTong,
.colKhoiLuongBi,
.colKhoiLuongThan {
    text-align: center;
    font-family: var(--bs-font-input1);
    font-size: var(--bs-font-size);

}

td .colKhoiLuongTong,
td .colKhoiLuongBi,
td .colKhoiLuongThan {
    text-align: right;

    font-family: var(--bs-font-input1);
    font-size: var(--bs-font-size);
}

.lblRead,
.colTenKho span[class="k-input"],
.colDiemChatTaiDoTai span[class="k-input"],
.colDiemGiua span[class="k-input"],
.colKhoiLuongTong input,
.colKhoiLuongBi input,
.colKhoiLuongThan input,
.colThoiDiemQuaCan input {
    color: var(--red) !important;
    font-family: var(--bs-font-input1);
    text-indent: 3px;
    font-size: var(--bs-font-size);
    font-size: 19px !important;

    font-weight: 600 !important;
}

table#\#tbNhapXuat tr td.td-border.colDanhMuc {
    max-width: 94px;
    min-width: 14px;
}

#modalLoading form#frmMauPhieuVanChuyen div#divPhieuXuatContent {
    min-height: 886px !important;
    min-width: 991px !important;
    overflow: auto !important;
    height: 991px;
}

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

table#\#tbNhapXuat tr td.td-border.colThoiDiemQuaCan {
    text-align: center;
    text-indent: 9px;

}

table#\#tbNhapXuat tr td .k-dropdown-wrap {
    padding-right: 25px;
}

td.td-border.colThoiDiemQuaCan input {

    white-space: nowrap;
    text-indent: 3px;
    text-overflow: unset !important;
    font-size: var(--bs-font-size);
    color: var(--red) !important;
    text-align: center !important;
    font-family: var(--bs-font-input1);
}

.colDonViTinh {

    font-family: var(--bs-font-input1);
}

.XeVanChuyen {
    font-weight: 500;
    color: var(--bs-green);
}

.XeVanChuyen {
    min-width: 149px;
}

.XeVanChuyen {
    display: inline-block;
    padding: 1px 19px;
    background-color: inherit;

    font-weight: bold;
    text-align: left !important;
    color: var(--text-color);
    /* box-shadow: var(--shadow-soft); */
    letter-spacing: 2px;
    font-size: 19px;
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    /* opacity: 0.68; */
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}


/* Hiệu ứng mượt mà khi phần tử được tải lên */
@keyframes fadeInUp {
    0% {
        opacity: 0.68;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Áp dụng hiệu ứng fade-in khi phần tử được tải lên */
.XeVanChuyen {
    animation: fadeInUp 1s ease-out forwards;
    /* Thêm hiệu ứng fade-in khi phần tử xuất hiện */
}

/* Khi hover vào phần tử */
.XeVanChuyen:hover {
    background-color: var(--hover-color);
    /* Màu nền khi hover */
    color: #fff;
    /* Màu chữ khi hover */
    border-color: var(--hover-color);
    /* Đổi màu viền khi hover */
    box-shadow: var(--shadow-soft);
    /* Thêm bóng đổ khi hover */
    transform: scale(1.3);
    /* Phóng to một chút khi hover */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.colKhoiLuongThan input[readonly] {

    opacity: 1 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: var(--bs-font-size);
    font-weight: 500 !important;
}

.main-footer {
    border-top: 1px solid var(--border-color);
    color: #869099;
    padding: 1px;
}
.layout-footer-fixed .wrapper .main-footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    
    z-index: 1032;
    max-width: calc(100vw - 250px);
}

.card-info:not(.card-outline)>.card-header {
    background-color: transparent;
}

.card-info:not(.card-outline)>.card-header,
.card-info:not(.card-outline)>.card-header a {
    color: #2877c6 !important;
    font-size: 19px;
    font-weight: 600;

}

.card-info:not(.card-outline)>.card-header,
.card-info:not(.card-outline)>.card-header i::after {
    color: var(--text-color) !important;
    text-align: left;
}

.d-block::after {
    font-family: 'Font Awesome\ 5 Pro';
    content: "\f078";
    color: var(--text-color) !important;
    right: 0px;
    position: absolute;
}

.card-header {
    background-color: inherit;
    border-bottom: 1px solid var(--border-color);
    padding: 13px 1px;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

#accordion .card {
    /* box-shadow: unset; */
    margin-bottom: 1px; 
    background: inherit;
    
}


.modal-body {
    line-height: 39px;
}

#frmPhieuDieuVan .modal-body {
    line-height: unset;
}

/* Đối với trình duyệt WebKit (Chrome, Edge, Safari) */
.modal-header::-webkit-scrollbar,.scroll-wrapper.card::-webkit-scrollbar,div#divPhieuXuatContent::-webkit-scrollbar,.card-body::-webkit-scrollbar ,.card-body-group::-webkit-scrollbar ,.modal-footer::-webkit-scrollbar ,.modal-body::-webkit-scrollbar ,.scroll-wrapper::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
    width: 6px;
    /* Độ rộng thanh scrollbar dọc */
    height: 8px;
    /* Độ cao thanh scrollbar ngang */
    /* display: none; */
}

.k-grid-header-locked .k-header {
    border: 1px solid var(--border-color) !important;
}

/* Màu nền thanh scrollbar */
::-webkit-scrollbar-track {
    background: var(--bg-color);
    border: 1px solid var(--border-color) !important;
    /* Màu nền nhạt */
    border-radius: 11.3px;
}

/* table grid */
/* Dòng chẵn */
.k-grid tr:nth-child(even) {
    background-color: var(--bg-color-white);
    /* Màu nền nhẹ nhàng, dễ nhìn */
}

/* Dòng lẻ */
.k-grid tr:nth-child(odd) {
    background-color: #ffffff;
    /* Màu nền trắng cho dòng lẻ */
}

/* Hiệu ứng hover khi di chuột qua dòng */
.k-grid tr:hover {
    background-color: #e0f7fa;
    /* Màu nền sáng khi hover, giúp dễ dàng nhận diện dòng đang được chọn */
}

/* Tùy chọn: Làm cho dòng chẵn và lẻ có hiệu ứng chuyển màu nhẹ nhàng */
.k-grid tr:nth-child(even),
.k-grid tr:nth-child(odd) {
    transition: background-color 0.3s ease;
    /* Hiệu ứng chuyển màu nhẹ nhàng */
}

/* ketthuc=== */


/* Màu của thanh kéo (thumb) */
::-webkit-scrollbar-thumb {
    background:#999;
    /* Màu xám nhẹ */
    border-radius: 11.3px;
    transition: background 0.3s ease-in-out;
}

/* Hover vào thanh kéo */
::-webkit-scrollbar-thumb:hover {
    background: var(--bg-color);
    /* Màu xám đậm hơn khi hover */
}

.modal-footer {
    padding: 4px;
}

.main-footer strong {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-right: 19px;
    font-size: 13px;
    display: none;
}

footer.main-footer {
    padding: 13px 1px;
    height: 82px;
    background: #fafafa;
}


.breadcrumb {
    background: none;
    margin-bottom: unset;
    padding-top: 9px;
    padding-left: unset;
    display: flex;
    flex-wrap: nowrap;
}

.breadcrumb .breadcrumb-item {
    white-space: nowrap;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem;
    font-family: 'Roboto Condensed';
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #1B2E4B;
    color: #fff;
    text-align: left;
    padding-bottom: 19px;
}

/* Nút chuẩn */

.btn {
    white-space: nowrap;
    font-size: 15.3px;
}

/* Background dùng cho header, thẻ, badge... */
.bg-primary {
    background-color: var(--color-primary) !important;
    color: #fff;
}

.bg-success {
    background-color: var(--color-success) !important;
    color: #fff;
}

.bg-warning {
    background-color: var(--color-warning) !important;
    color: #212529;
}

.bg-danger {
    background-color: var(--color-danger) !important;
    color: #fff;
}

.bg-info {
    background-color: var(--color-info) !important;
    color: #fff;
}

.bg-light {
    background-color: var(--color-light) !important;
    color: #212529;
}

.bg-dark {
    background-color: var(--color-dark) !important;
    color: #fff;
}

ul.nav-treeview li.nav-item>a {
    margin-left: 9px;
    padding-left: 28px !important;
}
.nav-pills .nav-link{
    padding: 1px 13px;
}
.nav-sidebar .nav-item>.nav-link {
    margin-bottom: 19px;
    line-height: 19px;
}
.nav-sidebar .nav-link>p>.right {
    position: absolute;
    right: 1rem;
    top: 1px;
}
#idpagebodywrapper>section.content {
        padding: 27px !important;
    padding-top: 19px !important;
    line-height: 34px;
    background: var(--bg-color);
    
    color: var(--text-color);
}

.content-header h3 {
    color: #2877c6 !important;
    font-size: 19px;
    font-weight: 600;
    padding-left: 31px;
}

.modal-body {
    padding: 27px;
}

/* sinh nhat */

@keyframes scrollTicker {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.birthday-ticker-container:hover .birthday-ticker-content {
    animation-play-state: paused;
}

.birthday-ticker-content img {
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 50%;
    width: 19px;
    height: 19px;
}

.birthday-ticker-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-radius: 19px;
    padding: 4px 13px;
    height: 39px;
    display: flex;
    align-items: center;
}

.birthday-ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    font-size: 13px;
    animation: scrollTicker 227s linear infinite;
    color: #2c3643;
}

/* .k-window.topWindowFull {
    height: 100vh !important;
    max-height: 100vh !important;
} */


div#divPhieuXuatContent>div>table {
    min-width: 931px !important;
    overflow: auto !important;
}

.main-footer {
    height: 62px;
}

div#divPhieuXuatContent>div>table tr td {
    font-size: 19px !important;
}

div#divPhieuXuatContent>div>table tr:first-child td.td-border.colDanhMuc {

    text-align: left;
}

div#divPhieuXuatContent>div>table tr:first-child td.td-border.colThoiDiemQuaCan {
    text-align: center;
}



div#divPhieuXuatContent>div>table tr:first-child td.td-border.colDiemGiua {
    text-align: left;
}



td.td-border.colDonViTinh {
    /* max-width: 72px !important; */
}


td.td-border.colKhoiLuongThan {

    text-align: center;
}




div#divPhieuXuatContent>div>table tr:first-child td.td-border.colKhoiLuongBi {

    text-align: center;
}


tr.k-master-row td:nth-child(3) {
    text-align: left !important;

}

/* tr.k-master-row td:nth-child(3) a {
    flex: 0 1 auto;
} */
.dropdown-menu-lg .dropdown-item {
    padding: 15px 19px;
}

.k-textbox {
    padding: unset;
    
}

/*.k-grid-toolbar .col-md-9.col-sm-12 {
    display: flex;
    gap: 4px;
}
*/
.k-pager-wrap .k-pager-numbers .k-state-selected,
.k-pager-wrap .k-pager-numbers .k-state-selected:hover {
    border-top-color: transparent;
    color: var(--color-title) !important;
    border-radius: 49%;
    padding: 1px !important;
    font-weight: 500;
    font-size: 19px;
    font-family: 'Roboto Condensed', sans-serif;
    background: transparent !important;
    border-radius: 3px !important;
}

table#\#tbNhapXuat tr td.td-border.colKhoiLuongTong {
    max-width: 113px !important;
    min-width: 27px;
}

table#\#tbNhapXuat tr td.td-border.colKhoiLuongBi {
    max-width: 113px !important;
    min-width: 27px;
}

table#\#tbNhapXuat tr td.td-border.colKhoiLuongThan {
    max-width: 113px !important;
    min-width: 27px;
}

table#\#tbNhapXuat tr td.td-border.colDiemGiua {
    max-width: 134px;
    min-width: 113px;
}

table#\#tbNhapXuat tr td.td-border.colDiemChatTaiDoTai {
    max-width: 168px;
    min-width: 27px;
}

table#\#tbNhapXuat .k-dropdown-wrap,
table#\#tbNhapXuat .k-numeric-wrap,
table#\#tbNhapXuat .k-picker-wrap {
    padding-right: 1px;
}

div#divPhieuXuatContent>div>table tr:first-child td.td-border.colTenKho {
    text-align: left;
}

div#divPhieuXuatContent>div>table tr:first-child td.td-border.colKhoiLuongTong {
    text-align: center;
}

div#divPhieuXuatContent>div>table tr:first-child td.td-border.colDiemChatTaiDoTai {

    text-align: left;
}

table#\#tbNhapXuat tr td.colDiemChatTaiDoTai {

    /* font-family: UTMBebas; */
    font-family: 'Roboto Condensed', sans-serif;
}

table#\#tbNhapXuat tr td.td-border.colDiemGiua {
    text-align: left;

}

table#\#tbNhapXuat tr td.td-border.colThoiDiemQuaCan * {
    vertical-align: middle !important;


}

table#\#tbNhapXuat tr td.td-border.colThoiDiemQuaCan {
    text-align: center;

}



/* Áp dụng cho input readonly trong các component Kendo UI */

.k-grid-header th.k-header {
    vertical-align: middle !important;
    text-align: center;
    cursor: default;
}

/* CSS cho các phần tử khi không có readonly */

/* Khi hover vào các phần tử không có readonly */
.k-textbox input:not([readonly]):hover,

.k-numerictextbox input:not([readonly]):hover,
.k-datepicker input:not([readonly]):hover,
.k-dropdown:not([aria-readonly="true"]) .k-dropdown-wrap:hover,
.k-datetimepicker input:not([readonly]):hover {
    background-color: #e0e7ff !important;
    /* Nền sáng khi hover vào */
    border-color: #7a8aeb !important;
    /* Viền khi hover */
    box-shadow: 0 0 10px rgba(122, 138, 234, 0.3) !important;

    /* Hiệu ứng bóng đổ khi hover */
}

/* Khi focus vào các phần tử không có readonly */
.k-textbox input:not([readonly]):focus,

.k-numerictextbox input:not([readonly]):focus,
.k-datepicker input:not([readonly]):focus,
.k-dropdown:not([aria-readonly="true"]) .k-dropdown-wrap:focus,
.k-datetimepicker input:not([readonly]):focus {
    border-color: #7a8aeb !important;
    /* Viền khi focus */
    box-shadow: 0 0 5px rgba(122, 138, 234, 0.3) !important;
    /* Hiệu ứng sáng khi focus */
    outline: none !important;
    line-height: 31px;
    /* Bỏ đường viền mặc định khi focus */
}

/* Định dạng khi phần tử không có readonly và hover */
.k-textbox input:not([readonly]):hover,

.k-numerictextbox input:not([readonly]):hover,
.k-datepicker input:not([readonly]):hover,
.k-dropdown:not([aria-readonly="true"]) .k-dropdown-wrap:hover,
.k-datetimepicker input:not([readonly]):hover {
    border-color: #8ca567 !important;
    /* Viền khi hover */
    background-color: #e6f1e1 !important;

    /* Nền sáng khi hover */
}

.k-textarea textarea:not([readonly]):hover {
    border-color: #8ca567;
    /* Viền khi hover */
    background-color: #e6f1e1;

    /* Nền sáng khi hover */
}

.k-textbox[readonly],
.k-input[readonly],
.k-datepicker .k-input[readonly],
.k-numerictextbox .k-input[readonly],
.k-dropdown .k-input[readonly],
.k-combobox .k-input[readonly],
.k-autocomplete .k-input[readonly],
.k-multiselect .k-input[readonly] {
    background-color: #fcfcfc !important;
    cursor: default;
}

input.form-control[readonly] {
    background-color: #fcfcfc;
}


@keyframes scrollTicker {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}



legend.w-auto {

    color: var(--color-title);
    font-weight: 600;
    font-size: 25px;
    font-family: 'Roboto Condensed', sans-serif;
}

fieldset.rounded {
    margin-top: 19px;
}

.modal-body h5 {
    margin-top: 19px;
    color: var(--color-title);
    font-weight: 500;
    font-size: 19px;
    font-family: 'Roboto Condensed', sans-serif;
}

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

.modal-body h6 {
    margin-top: 19px;
    color: var(--color-title);
    font-weight: 500;
    font-size: 19px;
    font-family: 'Roboto Condensed', sans-serif;
}

#modalLoading>form>.modal-header:first-child {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 1px;
    box-sizing: border-box;
    padding-left: 1px;
    position: relative;
}

#modalLoading>form>.modal-header:first-child .close {
       position: absolute;
    right: 19px;
    top: 66%;
    transform: translateY(-46%);
    z-index: 1;
}

#modalLoading>form>.modal-header:first-child>.modal-title {
    
    /* Giới hạn chiều rộng */
    white-space: nowrap;
    /* Không xuống dòng */
    overflow: hidden;
    /* Ẩn phần bị tràn */
    text-overflow: ellipsis;
    /* Hiển thị dấu ... */
    margin: 0;
    /* Xóa margin nếu có */
}

#idmesssagerror .modal-footer.justify-content-between div {
    display: flex;
    gap: 4px !important;
    height: 49px !important;
}

#idmesssagerror .message-header .btn:not(td .btn, .input-group-append .btn) {
    white-space: nowrap;
    font-size: 15.9px !important;
    padding: 5px 19px;
    border-radius: 21px;
    font-weight: 300;
    font-family: 'Merriweather Sans', sans-serif;
    
}

.message-header input#datetime-picker {
    font-size: 15.9px;

    font-weight: 900;
    max-width: 191px;
}

li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
    white-space: nowrap;
    max-width: 314px;
    font-size: 26px;
    overflow: auto;
    font-weight: 700;
    color: var(--color-title);
    font-family: UTMBebas, sans-serif !important;
}

.add-breadcum .nav-link {
    padding-right: 13px !important;
    padding-left: 13px !important;
}

li.nav-item.headerOpen .nav-icon {
    margin: unset !important;
    width: auto !important;
    text-align: left !important;
    padding-right: 8px;
    font-family: 'Font Awesome 5 Pro';


}
li.headerOpen a i {
    font-size: 25px;
    vertical-align: middle;
}
li.headerOpen {
    
    line-height: 41px;
}
/* Cho toàn bộ thanh tab cuộn ngang nếu vượt quá */
#myTab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 3px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* mượt trên iOS */
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 4px;
}

/* Ngăn button rớt dòng */
#myTab .nav-link {
    white-space: nowrap;
    font-weight: 400 !important;
    font-weight: 19px;
    color: var(--text-color);
    padding-left: 13px !important;
    padding-right: 13px !important;
    font-family: 'Roboto Condensed', sans-serif;
}

/* (Tùy chọn) Ẩn scrollbar (Chrome, Edge) */
#myTab::-webkit-scrollbar {
    display: none;
}

#accordion .btn {
    max-height: 49px !important;
}

input#TextSearch,input.column-search {
    border-radius: unset !important;
    
    max-height: 41px;
    border-radius: unset !important;
}

.divTextSearch {
    text-align: right;
   /* margin-left: 13px !important;*/
}

.message-header {
    display: flex;
    justify-content: space-between;
    /* Căn đều hai bên */
    align-items: center;
    /* Căn giữa các phần tử theo chiều dọc */
    width: 100%;
    /* Chiếm toàn bộ chiều rộng */
    padding: 1px;
    /* Thêm padding nếu cần */
}
.card-body
{
    padding: 19px;
    background: #f9f9f9;
    border-radius: 9px;
    border: unset;
}
.box-title {
    
    font-family: "Open Sans", sans-serif;
    font-size: 15.9px;
    font-weight: 900;
    color: var(--text-color-header);
}
.modal-body {
    padding: 19px 1px;
    background: #f9f9f9;
    border-radius: 13px;
}

.message-header h3 {
    margin: 0;
    /* Loại bỏ margin mặc định của h3 */
}

#closeButton {
    cursor: pointer;
    /* Hiển thị con trỏ khi hover */
    font-size: 20px;
    /* Thay đổi kích thước biểu tượng */
}

#idmesssagerror .modal-footer {
    height: 49px;
}

#idmesssagerror .modal-header .d-flex.justify-content-between {
    flex: auto;
}

span.input-group-append>button.btn.btn-success {
    /* border: 1px solid #e5e5e5;
    color: #444;
    background: #f2f2f2 !important;
    border-radius: unset; */
}

label.lblRead.col-sm-1.col-form-label {
    text-align: left;
    display: inline-block;
    width: auto !important;
}

label.lblRead.col-form-label {
    display: inline-block;
    /* width: auto !important; */
}

label.lblRead.col-sm-2.col-form-label {
    text-align: left;
    display: inline-block;
    width: auto !important;
}

.main-sidebar {
    transition: transform 0.3s ease;
}

#modal-header .d-flex.justify-content-between {
    flex: auto;
}



.row-edit {
    display: flex;
    justify-content: center;
    max-width: 100%;
    gap: 1px;
    overflow: hidden;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 1px;
    flex-wrap: nowrap;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    align-items: center;
}

.row-edit:hover {
    overflow-x: auto;
    scrollbar-width: none;
}

.row-edit::-webkit-scrollbar {
    display: none;
}

#gridData .k-grid-content td,
.k-grid-content-locked td,
.k-grid-header th {


    min-height: 62px !important;
}

.row-edit .card-item {
    display: flex;
    /* justify-content: center; */
    flex-wrap: nowrap;
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: unset;
    margin: unset;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: hidden;
    padding: 5px 1px;
    margin: 0;
}

.row-edit .card-item:hover {
    overflow-x: auto;
    scrollbar-width: none;
}

.row-edit .card-item::-webkit-scrollbar {
    display: none;
}

.input-group.card-item-input-group {
    display: flex;
    flex-wrap: nowrap;

    display: flex;
    flex-wrap: nowrap;
}

#gridData .k-grid-header-locked .k-grid-content td:nth-child(3),
#gridData .k-grid-header-locked .k-header th:nth-child(3) {
    text-align: left;


}

#gridData .k-grid-header-locked .k-grid-content td:nth-child(3) {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#gridData .k-grid-header-locked .k-grid-content td:nth-child(3)>a {
    flex: 0 1 auto;
}

/* # thong bao nhat lenh */
/* CSS cho các input, textarea, dropdown, numerictextbox và datetimepicker khi readonly */

/* Định dạng chung cho các phần tử khi readonly */
.k-textbox input[readonly],

.k-numerictextbox input[readonly],
.k-datepicker input[readonly],
.k-dropdown[aria-readonly=true] .k-dropdown-wrap,
.k-datetimepicker input[readonly] {
    
    /* Nền sáng nhẹ, dễ nhìn */

    
    /* Đổ bóng nhẹ cho phần tử */
    transition: all 0.3s ease;

    /* Hiệu ứng chuyển trạng thái mượt mà */
}

/* Hiệu ứng khi phần tử được focus */
.k-textbox input[readonly]:focus,

.k-numerictextbox input[readonly]:focus,
.k-datepicker input[readonly]:focus,
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:focus,
.k-datetimepicker input[readonly]:focus {
    border-color: #8ca567 !important;
    /* Viền xanh nhẹ khi focus */
    box-shadow: 0 0 5px rgba(140, 165, 103, 0.3) !important;
    /* Hiệu ứng sáng khi focus */

    outline: none !important;
    /* Bỏ đường viền mặc định khi focus */
}


.k-taskboard-column-card
{
  border-radius: 5px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    border: none;
    margin-bottom: 30px;
}
/* Hiệu ứng khi hover vào các phần tử */
.k-textbox input[readonly]:hover,

.k-numerictextbox input[readonly]:hover,
.k-datepicker input[readonly]:hover,
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:hover,
.k-datetimepicker input[readonly]:hover {
    background-color: #f7fafc !important;
    line-height: 31px;


}

/* Hiệu ứng cho dropdown khi readonly */
.k-dropdown[aria-readonly=true] .k-dropdown-wrap {
    background-color: #f7fafc !important;
    /* Nền sáng nhẹ cho dropdown */


}

/* Khi focus vào dropdown */
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:focus {
    border-color: #8ca567 !important;
    /* Viền khi focus */
    box-shadow: 0 0 5px rgba(140, 165, 103, 0.3) !important;
    /* Hiệu ứng sáng khi focus */
}

/* Hiệu ứng cho numerictextbox khi readonly */
.k-numerictextbox input[readonly] {

    background-color: #f7fafc !important;
    /* Nền sáng nhẹ */



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Đổ bóng nhẹ */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển trạng thái */
}

/* Hiệu ứng cho datetimepicker khi readonly */
.k-datetimepicker input[readonly] {

    background-color: #f7fafc !important;
    /* Nền sáng nhẹ */


    border-radius: 8px !important;
    /* Bo góc nhẹ */
    padding: 13px 15px !important;
    /* Padding hợp lý */
    font-size: 16px !important;
    /* Kích thước font dễ đọc */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Đổ bóng nhẹ */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển trạng thái */
}

/* Hiệu ứng khi phần tử readonly được hover */
.k-textbox input[readonly]:hover,

.k-numerictextbox input[readonly]:hover,
.k-datepicker input[readonly]:hover,
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:hover,
.k-datetimepicker input[readonly]:hover {

    background-color: #e6f1e1 !important;

    /* Nền sáng khi hover */
}

/* Hiệu ứng khi phần tử readonly có focus */
.k-textbox input[readonly]:focus,

.k-numerictextbox input[readonly]:focus,
.k-datepicker input[readonly]:focus,
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:focus,
.k-datetimepicker input[readonly]:focus {
    outline: none !important;
    /* Bỏ đường viền mặc định khi focus */
    border-color: #8ca567 !important;
    /* Viền khi focus */
    box-shadow: 0 0 5px rgba(140, 165, 103, 0.3) !important;

    /* Hiệu ứng sáng khi focus */
}



/* #===cau hinh menu==== */
/* Định dạng ban đầu cho .os-content */
.os-content {
    opacity: 0.68;
    /* Độ mờ ban đầu */
    transition: opacity 0.86s ease;
    /* Thêm hiệu ứng chuyển đổi mượt mà khi opacity thay đổi */
}

/* Khi hover vào .os-content */
.os-content:hover {
    opacity: 1;
    /* Độ mờ khi hover */
}

/* ====thanh tim kiem=== */
.card-info:not(.card-outline)>.card-header,
.card-info:not(.card-outline)>.card-header i::after {
    color: var(--text-color) !important;
    padding: 1px !important;
}

.k-toolbar.k-grid-toolbar>.card-body {
    padding: 1px 3px;
}

.card-body-group {
    height: auto !important;
    min-height: 41px;
    max-height: 41px;
    line-height: 1.5;
    /* text-align: left; */
    display: flex
;
    justify-content: flex-start;
    align-items: normal;
    width: 100%;
    overflow-x: auto;
    gap: 1px;
    padding: 1px;
    flex-direction: row;
    place-items: flex-start;
    flex-wrap: nowrap;
    gap: 1px;
    align-items: stretch;
}

.card-body-group:hover {
    overflow-y: auto;
}

.card-body-group>* {
    flex: 0 1 auto;
    min-width: 191px;
}


.col-md-6.col-lg-6.col-xl-6 .input-group,
.card-body-group .input-group {
    display: flex;
    /*max-width: 191px;*/
    /* Đảm bảo chiều rộng của input-group không vượt quá 191px */
    margin-left: 10px;
    /* Thêm khoảng cách giữa các phần tử */
    flex-shrink: 0;
    /* Đảm bảo input-group không bị co lại khi không đủ không gian */
    flex-wrap: nowrap;
}

/* Đảm bảo rằng .card.card-info bắt đầu với độ mờ */
.card.card-info {
    opacity: 0;
    /* Bắt đầu với độ mờ */
    transform: translateY(20px);
    /* Bắt đầu từ vị trí thấp hơn */
    animation: fadeInUp 0.5s ease-out forwards;
    /* Áp dụng hiệu ứng khi tải */
}

/* Định nghĩa hiệu ứng fade-in từ dưới lên */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        /* Bắt đầu với độ mờ */
        transform: translateY(20px);
        /* Vị trí bắt đầu thấp hơn */
    }

    100% {
        opacity: 1;
        /* Độ mờ hoàn toàn */
        transform: translateY(0);
        /* Vị trí trở về ban đầu */
    }
}


.card-title>a {
    float: left;
    font-size: 15.3px !important;
    font-weight: 400;
    margin: 0;
}

.card-title {
    color: var(--primary);
    font-size: 19px !important;
}


div#divFilter>div.card-body {
    padding: unset ;
    
    
}

/* ====con dau=== */
.ten-cong-ty {
    white-space: nowrap;
    line-height: 27px;
}

.ten-cong-ty-tren {
    text-align: center;
    white-space: nowrap;
    font-family: 'Roboto Condensed', sans-serif;

}

.ten-cong-ty-duoi {
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
}

.con-dau-boc {
    position: relative;
    width: 359px;
    height: 149px;
    overflow: hidden;
}

img.con-dau-img {
    position: absolute;
    width: 257px;
    height: 227px;
    z-index: 1;
    top: 6px;
    left: 141px;

}

.con-dau {
    position: absolute;
    top: 135px;
    background: transparent;
    left: 94px;
    font-size: 15.3px;
    width: 100%;
    height: 100%;
    line-height: 19px;
    text-align: left;
    color: #444444;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    z-index: 2;
}

.canh-giua {
    min-width: 413px;
}

.canh-giua-luu {
    white-space: nowrap;
}

.canh-giua-tieu-de {
    font-weight: bold;
    white-space: nowrap;

    font-size: 25px;
    padding-left: 19px;
    font-family: 'Roboto Condensed', sans-serif;
}

.canh-giua-luu {
    font-style: italic;
    white-space: nowrap;
}

.canh-giua-ngay {
    font-weight: bold;
    white-space: nowrap;
}

.phieu-header-table {
    width: 100%;
    /* border: 1px solid var(--border-color); */
}

.d-flex.van-ban-so label:first-child {
    white-space: nowrap;
    padding: 0px;
}

.d-flex.van-ban-so {
    gap: 8px;
    padding-bottom: 13px;
    align-items: center;
}

/* ====== */

/* ===nut- tim kiem== */

.input-group {
    /*max-width: 131px;
     Đặt chiều rộng tối đa là 131px 
    width: 100%;
     Đảm bảo chiều rộng có thể co dãn nhưng không vượt quá 131px */
    margin-bottom: 0px;
}


/* Thiết lập cho phần tử d-flex để không bị rớt xuống dòng */
.d-flex-wrap {
    display: flex;
    /* Đảm bảo phần tử sử dụng flexbox */
    flex-wrap: nowrap;
    /* Không cho phần tử xuống dòng */
    overflow-x: auto;
    /* Thêm cuộn ngang khi không đủ không gian */
    overflow-y: hidden;
    /* Không cuộn dọc */
    width: 100%;
    /* Đảm bảo chiều rộng là 100% */
}

/* Thiết lập cho input-group trong d-flex */
.d-flex-wrap .input-group {
    max-width: 191px;
    /* Đảm bảo chiều rộng của input-group không vượt quá 191px */
    margin-left: 10px;
    /* Thêm khoảng cách giữa các phần tử */
    flex-shrink: 0;
    /* Đảm bảo input-group không bị co lại khi không đủ không gian */
}

/* Thêm một chút style cho các button bên trong .d-flex */
.d-flex-wrap a {
    white-space: nowrap;
    /* Đảm bảo các button không bị xuống dòng */
}

/* Nếu bạn muốn các phần tử button giữ đúng thứ tự nhưng vẫn có thể cuộn khi thiếu không gian */
.d-flex-nowrap {
    flex-wrap: nowrap;
    /* Đảm bảo các phần tử bên trong không xuống dòng */
    display: flex;
}

.noi-dung-phieu-chuyen.d-flex {
    flex-direction: column;
    line-height: 49px;

    align-items: baseline;
}

.d-flex.ho-ten {
    gap: 5px;

    align-items: baseline;
}

.d-flex.ve-viec-chuyen {
    gap: 4px;
    align-items: baseline;

}

.d-flex.bien-so {
    gap: 4px;

    align-items: baseline;
}

.so-phieu {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 168px;
    left: 93px;
    z-index: 3;
}

table#tbNhapXuat {
    margin-top: 19px;
}

/* ===== */
div#divPhieuXuatContent .k-listbox .k-item,
div#divPhieuXuatContent .k-popup .k-list .k-item {
    font-size: 19px;
    font-weight: 500;
    font-family: '' Roboto Condensed'';
}

div#divPhieuXuatContent .k-dropdown .k-input,
div#divPhieuXuatContent .k-dropdown>*,
div#divPhieuXuatContent .k-dropdown .k-state-focused .k-input,
div#divPhieuXuatContent .k-menu .k-popup,
input#ThongBaoGiaoThanSo {
    font-size: 15.2px !important;
    font-weight: 600 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

table#\#tbNhapXuat div.td-border-boc span.k-numeric-wrap.k-state-default.k-expand-padding {
    padding-top: 1px;
    color: var(--red) !important;
    font-size: 19px !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

table#\#tbNhapXuat .k-dropdown .k-input,
table#\#tbNhapXuat .k-dropdown>*,
table#\#tbNhapXuat .k-dropdown .k-state-focused .k-input {
    color: var(--red) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    height: 100%;
}

table#\#tbNhapXuat .k-numeric-wrap.k-expand-padding .k-input {
    border-radius: 2px;
    height: 100%;
    color: var(--red) !important;
    font-size: 19px !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

span.k-numeric-wrap.k-state-default.k-expand-padding {
    height: 100%;
}

td span.k-widget.k-textbox.form-control {
    background: transparent;
}

input.k-input:focus {
    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
    animation: anim-shadow 0.5s ease-in-out forwards;
}

.d-flex.d-flex-nowrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Kích hoạt cuộn ngang nếu các phần tử vượt quá chiều rộng */
    width: 100%;
    /* Đảm bảo phần tử chiếm toàn bộ chiều rộng của vùng chứa */
}

.d-flex.d-flex-nowrap>.btn {
    margin-right: 3px;
    /* Khoảng cách giữa các nút */
}

.d-flex.d-flex-nowrap>.input-group {
    margin-left: auto;
    max-width: 193px;
    flex-wrap: nowrap;
    display: flex;
}

.d-flex.d-flex-nowrap>.input-group input {
    width: 100%;
    /* Đảm bảo input có chiều rộng đầy đủ của input-group */
}

@-webkit-keyframes anim-shadow {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(144, 238, 144, 0.3);
        /* Sáng xanh lá nhạt */
        opacity: 1;
    }

    100% {
        box-shadow: 0px 0px 10px 3px rgba(144, 238, 144, 0.3);
        /* Bóng sáng xanh lá nhạt */
        opacity: 1;
    }
}

@keyframes anim-shadow {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(144, 238, 144, 0.3);
        /* Sáng xanh lá nhạt */
        opacity: 1;
    }

    100% {
        box-shadow: 0px 0px 10px 3px rgba(144, 238, 144, 0.3);
        /* Bóng sáng xanh lá nhạt */
        opacity: 1;
    }
}




/* #kendo==== */
.k-pager-wrap {
    border-color: var(--border-color);
    color: var(--text-color-header);
    font-family: inherit;
    background-color: #f9f9f9;
    font-family: 'Open Sans', sans-serif !important;
}
.card-body.filter-border.card label, .card-body.filter-border.card .k-input {
   font-size: 15.9px !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #6f7a91;
    text-align: left;
    white-space: nowrap;
    vertical-align: text-top;
    min-width: 191px;

}
    #divFilter .d-flex.justify-content-between.align-items-center.flex-nowrap {
        gap: 10px;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        display: flex !important
;
        align-items: flex-start;
    }
.k-autocomplete,
.k-draghandle,
.k-dropdown-wrap,
.k-grid-header,
.k-grouping-header,
.k-header,
.k-numeric-wrap,
.k-panelbar .k-tabstrip-items .k-item,
.k-picker-wrap,
.k-progressbar,
.k-state-highlight,
.k-tabstrip-items .k-item,
.k-toolbar {
    background-color: var(--bs-bg-toolbar);
}

/* Viền tổng thể của grid */
.k-grid {
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
    box-shadow: var(--shadow-soft);
    background-color: var(--bg-color-white);

}
.k-grid-content-locked+.k-grid-content, .k-grid-header-locked+.k-grid-header-wrap
{
    background: inherit;
}
/* Viền các dòng */
.k-grid tr.k-alt,
.k-grid tr {
    border-bottom: 1px solid var(--border-color);
}

/* Header */
.k-grid-header th.k-header {
    background-color: var(--bs-bg-toolbar);
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: 13px;
}

/* Cell thường */
.k-grid td {

    border-color: var(--border-color);

}

/* Hover row */
.k-grid tr:hover {
    background-color: var(--hover-color);
}

/* Thanh công cụ toolbar */
/*.k-grid-toolbar {
    background-color: var(--bs-bg-toolbar);
    border-bottom: 1px solid #E5E5EA;
    padding: 10px 13px;
}*/

/* Nút trong Grid */
.k-button,
.k-grid .k-button {

    border: 1px solid var(--border-color);


    transition: background-color 0.2s;
}

.k-button:hover {
    background-color: var(--hover-color);
}

.k-grid-content-locked,
.k-grid-content-locked td,
.k-grid-header-locked,
.k-grid-header-locked .k-header {
    border-left-color: var(--border-color) !important;
    border-right-color: var(--border-color) !important;
}

.k-grid-footer,
.k-grid-footer td,
.k-grid-header,
.k-grid-header .k-header {
    background-color: var(--bs-bg-toolbar);
}

/* Bo góc và màu viền cho pager */
.k-pager-wrap {
    border-top: 1px solid var(--border-color);
    padding: 9px 13px;
}

.k-filter-row th,
.k-grid-header th.k-header {
    color: #999999;
    border-top: 1px solid var(--border-color);
}

/* ===footer */
.main-footer {

    border-top: 1px solid #f2f2f2 !important;

}

.section-info-container {
      
    width: 100%;
    padding: 1px 19px;
    background: inherit;
    display: none;
}


div#sinhNhatContent {
    display: none;
}
/* 
.section-info-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background: #fff;
    opacity: 0.4;
}

.section-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
    
    left: 0;
    vertical-align: middle;
  
    padding: 5px 1px;
}



.section-footer {
    position: relative;
    min-width: calc(100vw - 333px);
    max-width: calc(100vw - 86px);
    height: 49px;
    overflow: hidden;
}

.section-footer-bg {
    background: var(--bs-bg-toolbar);

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}  */


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 - 68px);
}

.section-header-container {
    white-space: nowrap;
}

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

li.nav-item.d-none.d-sm-inline-block.add-breadcum {
    display: block !important;
}



.section-footer-container-boc {

    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.modal-footer {
    /* height: 62px;
    height: 86px; */
    justify-content: stretch;
    display: flex;
    align-items: baseline;
    padding-bottom: 13px;
    justify-content: space-between;
    border: unset;
    background-color:var(--bg-color);
}
div#modalLoading
{
    background: var(--bg-color);
}
#modalLoading form {
    padding-bottom: 31px;
    padding: unset;
}

.section-footer-container-boc:hover {
    overflow-y: auto;
}

.d-flex.section-footer-container-boc>* {
    flex: 1 0 auto;
    justify-content: flex-end;
}

.section-footer-right>a {
    margin-right: 3px;
    border-radius: 8px;

    padding: 13px;

    
}

.section-footer-right>a>i:hover {
    /* background-color: var(--accent-primary);
    color: var(--bg-color); */
}



span.input-group-append>button {
    border-radius: 1px 19px 19px 1px;
}


span.input-group-append button:hover {
    color: #444444;
}


ul.popup-message-list>li {
    border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
}


.k-pager-input.k-label {
    white-space: nowrap;
    /* Không xuống dòng */
    overflow: hidden;
    /* Ẩn phần tràn */
    text-overflow: ellipsis;
    /* Hiển thị dấu "..." nếu tràn */
    display: inline-block;
    /* Đảm bảo nằm ngang */
    max-width: 100%;
    /* Không vượt quá khung */
    vertical-align: middle;
    /* Căn giữa theo chiều cao dòng */
}

.k-pager-input.k-label input {
    max-width: 50px;
    margin: 1px 5px;
    color: var(--text-color-header);
    text-align: left;
}

div#idmessagerror .modal-header .btn {
    border-radius: 8px !important;
}
table.table-hover.k-grid.k-widget tbody th,
table.table-hover.k-grid.k-widget tbody td,
#gridTaiKhoan tbody th,
#gridTaiKhoan tbody td,
table[role="treegrid"] tbody th,
table[role="treegrid"] tbody td,
table[role="grid"] tbody th,
table[role="grid"] tbody td,

#gridData tbody th,
#gridData tbody td {

    border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
}

#gridData thead th {
        
    white-space: nowrap;
    
    font-family: "Roboto", sans-serif !important;
   
    background: var(--bg-color-white);
   

}

.XeVanChuyen-boc:hover {
    background: var(--hover-color);
    padding: 9px 4px;
    color: var(--bs-light);
}
.status_btn {
    display: inline-block;
    padding: 2px 15px;
    font-size: 11px;
    font-weight: 300;
    color: #2BD27F !important;
    background: #E7FBF0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-transform: capitalize;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}


/* menu ==== */
nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link {
    padding-top: 1px;
    padding: 1px !important;
    margin: 1px !important;
}

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: 49px;
    width: 49px;
}

nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link>img:hover {
    transform: scale(1.3);
}

nav.main-header ul.navbar-nav:last-child>li:last-child>a.nav-link>i {
    font-size: 25px;
    padding-top: 4px;
    padding-left: 15px;
    color: var(--primary-color);
    border: 1px solid #eee;
    padding: 6px;

}

nav.main-header ul.navbar-nav:last-child>li:last-child>a.nav-link>i:hover {

    color: #ff5370;


}

nav.main-header ul.navbar-nav:last-child>li:last-child>a.nav-link {
    top: -4px !important;
}

nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
    background: #fafafa;
    height: 68px;
}

input#TextSearch,input.column-search {
    border-radius: unset;

    border: 1px solid var(--border-color) !important;
    margin-left: 8px;
}

.k-combobox,
.k-combobox .k-input,
.k-datepicker,
.k-widget .k-input,
input.column-search,
input#TextSearch,
.k-combobox>*,
.k-datepicker .k-input,
.k-datetimepicker,
.k-datetimepicker .k-input,
.k-timepicker,
.k-timepicker .k-input {
    font-family: "Open Sans", sans-serif !important;
    font-size: 15.3px;
    color: var(--bs-color-input) !important;
    font-weight: 600;
}

.nav-sidebar .nav-link p {
    /* display: inline-block;
    margin: 0;
    padding-right: 13px; */
        display: inline;
    margin: 0;
    white-space: normal;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 500;
}

p.lead+.modal-footer {
    
    
    justify-content: center;
    display: flex;
    align-items: baseline;
    flex-shrink: 1;
}

.container-sm.sweet-alert.showSweetAlert {
    background: #f9f9f9;
    padding: 39px;
    text-align: center;
    box-sizing: border-box;
}


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

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

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

form#frmChangePassword input {
    height: 41px;
}



/* ======tbNhapXuat */

#tbNhapXuat tbody th,
#gridData tbody td {

    border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
}

#tbNhapXuat thead th {
    border-bottom: 0 solid transparent;
    padding: 13px 15px;
    border: 0px solid transparent;
    font-size: 14px !important;
    font-weight: 400;
    color: #6F7A91 !important;
    white-space: nowrap;
    text-transform: capitalize;
    font-family: "Merriweather Sans", sans-serif !important;
    border: 0;
    background: #fff;
    border: 0 !important;
    background: transparent;
    border-top: 1px solid var(--bg-color-white) !important;
    border-bottom: 1px solid var(--bg-color-white) !important;

}

.main-footer .card-body-group {
    padding-top: unset;
    align-items: baseline;
}

#modalLoading form {
    padding: unset;
}

#modalLoading form#frmPhieuDieuVan {
    padding-left: 1px;
    padding-right: 1px;
}


.dropdown-item {

    font-weight: 600;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15.9px;
    color: #515967;

}


/* Footer chính */





/* Phieu dien van  */

#frmPhieuDieuVan .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    /* Không xuống dòng */
    overflow-x: auto;
    /* Cuộn nếu vượt chiều ngang */
    padding: 0.75rem 1rem;
    gap: 13px;
}

#frmPhieuDieuVan .modal-footer .action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
}

/* Không cho phần tử con co lại hoặc xuống dòng */
#frmPhieuDieuVan .modal-footer .action-group>* {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tùy chọn: scrollbar mượt */
#frmPhieuDieuVan .modal-footer::-webkit-scrollbar,
#frmPhieuDieuVan .modal-footer .action-group::-webkit-scrollbar {
    height: 6px;
}

#frmPhieuDieuVan .modal-footer::-webkit-scrollbar-thumb,
#frmPhieuDieuVan .modal-footer .action-group::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}




#modalLoading form#frmPhieuDieuVan {
    padding-left: 1px !important;
    padding-right: 1px !important;
}

form#frmPhieuDieuVan {
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    min-width: 100%;
    max-width: 100%;
    width: 100vw !important;
}

#modalLoading form#frmPhieuDieuVan {
    padding-bottom: 2px;
    min-height: 100vh !important;
    max-height: 100vh !important;
    min-width: 100%;
    max-width: 100%;
    width: 100vw !important;
}

table#\#tbNhapXuat tr td.td-border.colThoiDiemQuaCan {
    text-indent: unset;
}

.colTenKho,
.colDiemChatTaiDoTai,
.colDiemGiua,
.colThoiDiemQuaCan {
    text-indent: unset;
}

table#\#tbNhapXuat tr td .k-textarea>.k-input {
    padding: unset;
    text-indent: unset;
}

table#\#tbNhapXuat tr td .k-widget {
    border: unset;
}

table#\#tbNhapXuat tr:first-child td.td-border {

    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 15.9px !important;
}

table#\#tbNhapXuat tr td.td-border.colGhiChu {
    max-width: 62px;
}

/* Khung giữa toàn màn hình */
.wrapper-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: calc(100vw -  41px);
    background-color: var(--bg-color-white);
    box-sizing: border-box;
    padding: 19px;
    /* để tránh dính mép khi cuộn */
}
#modalLoading form#frmMauPhieuVanChuyen  .wrapper-center {
    
    height: calc(100vh -  91px);
    
    /* để tránh dính mép khi cuộn */
}

#modalLoading form#frmMauPhieuVanChuyen  .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 194px);
}
div#divPhieuXuatContent {
    height: 991px;
}
/* Khung cuộn không làm thay đổi nội dung bên trong */
.scroll-wrapper {
    max-width: 99vw;
    max-height: 99vh;
    overflow: auto;
    background: white;
    padding: 19px;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
}
#divFilter .card-footer>div {
      display: flex
;
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: flex-start;
    align-items: center;
    max-width: calc(100%);
    overflow-x: auto;
    padding-left: unset;
    margin-left: unset;
}
#divFilter .card-footer {
        padding-left: unset;
    padding-bottom: unset;
    margin-top: unset;
    
    gap:4px;
    
    background: #f4f4f5 !important;
    width: 100%;
    margin: unset !important;
}
div#accordion_child {
    background: var(--bg-color-white);
    border-radius: 1px 1px 9px 9px;
}

#accordion .card-footer button.btn,#accordion .card-footer a.btn {
    /* background: transparent; */
    
    font-size: 15.9px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    
}

#accordion .btn {
    /* border-radius: 26px;    
    padding: 4px 9px; */
}

/* #accordion .card-footer button.btn.btn-success,#accordion .card-footer a.btn.btn-success {
  color: var(--color-success);
    
}
#accordion .card-footer button.btn.btn-danger,#accordion .card-footer a.btn.btn-danger {
  color: var(--color-danger);
    
}
#accordion .card-footer button.btn.btn-inverse,#accordion .card-footer a.btn.btn-inverse {
  color: var(--color-inverse);
    
} */

#modalLoading form#frmMauPhieuVanChuyen .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 194px);
}
#modalLoading form#frmMauPhieuVanChuyen .wrapper-center {
  
    height: calc(100vh -  94px);
  
}
#modalLoading form#frmMauPhieuVanChuyen .scroll-wrapper {
    padding: unset;
    min-height: calc(100vh - 194px);
    max-height: calc(100vh - 194px);
    
    margin-top: 19px;
}
#modalLoading form#frmMauPhieuVanChuyen .scroll-wrapper
{
    padding: unset;
}
/* ket thuc phieu dieu van */

.filter-border {
    max-height: 286px;
    overflow-y: auto;
    padding: 19px
}
#accordion .k-multiselect-clearable .k-multiselect-wrap {
    
    overflow: auto;
    white-space: nowrap;
    max-height: 41px;
    padding: 1px;
}
div#divFilter .card-body.bootstrap-tagsinput.filter-border {
    padding-left: 19px;
    padding-right: 19px;
}
#divFilter .card-footer {
    padding-left: unset;
    padding-bottom: unset;
    margin-top: unset;
    background: inherit;
    display: flex
;
    overflow-x: auto;
    justify-content: center;
}
#divFilter  .input-group-append {
    margin-left: unset;
    height: auto;
    min-height: 39px;
}
#gridData tbody td>button.btn {
    padding: 5px 11px;
}
#accordion .accordion-panel {
    
    display: flex
;
    flex-flow: column;
}

h3.card-title.accordion-title::after {
   display: flex !important
;
    width: 100%;
    display: block;
    float: initial;
    content: "Lọc thêm nội dung khác...";
    flex-wrap: nowrap;
    justify-content: stretch;
    margin-bottom: -9px;
    color: var(--accent-primary);
    font-size: 13.9px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 72px;
    background-color: var(--bg-color);
        border: 1px solid var(--border-color);
    padding: 6px 28px;
}

#accordion_child div.accordion-heading {
   flex-direction: row-reverse;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    justify-content: center !important;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-color);
        background-color: #fcfcfc;
    border-color:var(--border-color);
    margin-bottom: 13px;
}
.k-pager-wrap .k-pager-info {
    color: #999;
    padding: 1px;
    margin: 1px;
}
#divFilter .card-body
{
    padding-left: 19px;
    padding-right: 19px;
    background:unset;
    margin-bottom: 4px;
    padding: unset !important;
    background: #f4f4f5;
}
#divFilter label, #divFilter .k-input {
    font-size: 15.9px;
    
}
.form-group .btn:not(:last-child) {
    margin-right: 8px; 
}

.section-footer-right.mb-1>a {
    padding-bottom: 19px;
    margin-bottom: 19px;
}
/* #divFilter .card-body>* {
    
    font-size: 19px !important;
    font-family: 'Open Sans', sans-serif !important;
} */

.main-footer .card-body {
    padding: 1px 4px;
}
.k-grid-header th.k-header>.k-link {
    display: block;
    min-height: 19px;
    line-height: 19px;
    margin: unset;
    padding: .5em .6em .4em 0;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
        font-size: 15.3px;
    text-overflow: ellipsis;
    font-family: 'Open Sans', sans-serif !important;
}

.modal-footer {
    justify-content: stretch;
    display: flex
;
    align-items: center;
    padding-bottom: 13px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.k-toolbar [data-command="ZoomCommand"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.k-toolbar [data-command="ZoomCommand"] select.k-valid{
  display: none;
}
.k-toolbar [data-command="DownloadCommand"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
li.nav-item.load-nhat-ky>a>i {
    padding-top: 15.3px;
    padding-right: 4px;
    font-size: 19px;
    color: var(--color-primary);
}
div#gridData {
    margin-top: 8px;
    border-top: 1px !important;
}
.commentBox {
  position: fixed; /* Đặt vị trí của bảng comment cố định */
  top: 50%; /* Căn giữa theo chiều dọc */
  left: 50%; /* Căn giữa theo chiều ngang */
  transform: translate(-50%, -50%); /* Dịch chuyển bảng comment để hoàn toàn căn giữa */
  z-index: 9999; /* Đảm bảo rằng bảng comment nằm trên các phần tử khác */
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 6px;
  width: 413px; /* Bạn có thể điều chỉnh kích thước popup */
  max-width: calc(100vw - 68px);
  display: none; /* Ẩn bảng comment khi chưa kích hoạt */
  border-radius: 5px; /* Thêm một chút bo góc cho popup */
  height: 668px;
  max-height: calc(100vh - 68px);
overflow-y: auto;
 
  /* Hiệu ứng cho phần tử khi xuất hiện */
  opacity: 0; /* Ban đầu độ mờ là 0 */
  transform: translate(-50%, -50%) scale(0.8); /* Bắt đầu với kích thước nhỏ */
  animation: fadeInScaleUp 0.5s ease-out forwards; /* Áp dụng animation khi xuất hiện */
}
.commentOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4); /* Màu nền mờ */
  z-index: 9994; /* Thấp hơn .commentBox để nằm phía sau */
}
.commentBox .card {
  position: relative;
  overflow: hidden;
}

.commentBox .card-header {
  position: sticky;
  top: 0;
  z-index: 10;
  
}

.commentBox .card-header {
  position: relative;
  z-index: 10;  /* Đảm bảo .card-header không che khuất các phần tử khác */
}

.commentBox .close-btn {
  

  position: absolute;
    top: 13px;
    right: 19px;
    padding: 5px 14px;
    font-size: 27px !important;
    cursor: pointer;
    font-weight: 900;
  z-index: 10000;  /* Đảm bảo nút luôn ở trên cùng */
}

@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.card.card-comment.commentBox .card-header {
    padding: 14px 13px !important;
    font-weight: 900;
    position: static;

}

.card.card-comment.commentBox {
    line-height: 25px;
        padding-top: unset;
        display: block;
        background: #f4f6f9;
}

.card.card-comment.commentBox .card-body .info-group:first-child {
   
}
.card.card-comment.commentBox .card-body .info-group:first-child>.xe-info-value {
    text-align: left;
    font-weight: 900;
    padding-bottom: 13px;
    color: var(--color-primary);
}
.card-body {}
.commentBox .card-header {
    padding-left: 13px;
    font-size: 19px;
    padding-top: 9px;
    padding-bottom: 9px;
}


.commentBox .xe-info {
  font-weight: bold;
  margin-bottom: 10px;
}

.commentBox .close-btn {
  position: absolute;
  top: 10px; /* Khoảng cách từ trên cùng của bảng comment */
  right: 10px; /* Khoảng cách từ bên phải */
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}
.card.card-comment.commentBox .info-group {
    display: flex
;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
       border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 9px solid #fff !important;
    color: #6F7A91;
     font-family: 'Roboto', sans-serif !important;
    font-size: 19px;
    font-weight: 600;
}

.card.card-comment.commentBox .info-group .xe-info{
    border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
     font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
}
.card.card-comment.commentBox .xe-info {
    font-weight: bold;
    margin-bottom: 10px;
    white-space: normal;
}
.card-header.bg-c-green.text-white.pl-2
 {
    background: transparent !important;
   font-weight: 600 !important;
    font-size: 31px !important;
    color: var(--color-title);
    font-family: 'Roboto Condensed', sans-serif;
}
.card.card-comment.commentBox .card-header {
    padding: 14px 13px !important;
    font-weight: 900;
    
    font-weight: 600 !important;
    font-size: 31px !important;
    color: var(--color-title) !important;
    font-family: 'Open Sans', sans-serif !important;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
}


.modal-footer.justify-content-between>div {
    white-space: nowrap;
}

.info-group {
  
}

.xe-info-label {
  display: inline-block;  /* label sẽ nằm trên cùng dòng với giá trị */
  font-weight: normal;    /* Bạn có thể tùy chỉnh font-weight của label */
}

.xe-info-value {
  display: inline-block;  /* value sẽ nằm trên cùng dòng với label */
  font-weight: normal;    /* Tùy chỉnh font-weight của value */
  margin-left: 5px; /* Khoảng cách giữa label và value */
}

.xe-info-value.red {
  color: red;      /* Đặt màu đỏ cho giá trị khi cần */
  font-weight: bold;  /* In đậm khi cần */
}

.XeVanChuyen-boc
{
    cursor: pointer;
}
.XeVanChuyen-noidung {
    font-size: 19px !important;
    text-align: left;
    font-weight: 900 !important;
    font-family: 'Open Sans', sans-serif !important;
}
button.btn.btn-danger.mt-2.close-btn {
    padding: 5px 8px;
    font-size: 13px;
    border-radius: 28px;
    font-weight: 600;
}
/*.form-group .input-group {
    display: flex;
    flex-wrap: nowrap;
    margin: unset;
    padding: unset;
}*/

/* .form-group .input-group .input-group-append button {
    border-radius: 1px 13px 13px 1px !important;
} */
input#TextSearch + button.btn,input#CapTheTextSearch + button.btn, input#QuyetDinhTextSearch + button.btn,input + button.btn {
    margin-left: unset;
    height: auto;
    
    border-radius: 1px 13px 13px 1px !important;
}
button#btnXem {
    border-radius: 3px !important;
    max-height: 41px;
}

.k-combobox, .k-combobox .k-input, .k-datepicker, .k-datepicker .k-input, .k-datetimepicker, .k-datetimepicker .k-input, .k-timepicker, .k-timepicker .k-input {
    
}
.trangthai-info {
    color: #fff !important;
    padding: 13px;
    font-size: 13px;
    line-height: 41px;
    font-weight: 600;
}

#accordion .card.card-info {
    margin-bottom: 1px;
}

    #gridData thead th {
        padding: 1px 1px;
        height: 27px;
        max-height: 31px;
        margin: 1px !important;
    }
    /*#gridData .k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    overflow-x: auto;
    padding: 9px 19px;
}*/
   #gridData_ChamCong .k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    display: flex
;
    flex-wrap: nowrap;
    max-width: calc(100% - 5px);
}
/*#gridData .k-toolbar.k-grid-toolbar>* {
    overflow-x: auto;
    display: flex
;
    flex-wrap: nowrap;
    max-width: calc(100% - 5px);
}*/
.section-footer-right.mb-1 {
    margin-bottom: unset;
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(227px, 1fr)); /* Tạo lưới với độ rộng tối thiểu 227px */
  gap: 10px; /* Khoảng cách giữa các phần tử */
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-item input {
  width: 100%;
}

/*.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;*/ /* Khoảng cách giữa các phần tử */
/*}

.form-group .form-control {
  flex: 1 1 150px;*/ /* Phân bổ chiều rộng động cho các input, với chiều rộng tối thiểu là 150px */
/*}

.form-group .input-group {
  flex: 0 0 auto;*/ /* Không gian cố định cho input-group */
/*}

.input-group .input-group-append {
  display: flex;*/ /* Đảm bảo nút search nằm bên trong cùng một dòng */
/*}*/

.input-group button {
  flex: 0 0 auto; /* Nút giữ kích thước cố định */
}
.section-info-container {
    line-height: 54px;
}
#accordion .card.card-info {
       margin-bottom: 1px;
    margin-top: 1px;
    
    padding-bottom: 1px;
    background: #f4f4f5;
    border-radius: 5px;
    padding-top: 1px;
}
.card.card-info.m-1.p-1 {
    margin: unset !important;
    padding: unset !important;
}
/*.form-group {
    display: flex
;
    flex-wrap: wrap;
    gap: 13px 3px;
    min-height: 64px;
    justify-content: flex-start;*/
    /* line-height: 96px; */
    /*margin: unset;
    align-items: center;
}*/
.custom-alert.custom-alert-warning.sweet-alert.showSweetAlert.visible {
    padding: 19px;
    font-size: 19px;
    font-family: 'Merriweather Sans';
}


    div#divFilter>div.card-body {
    padding: 3px 1px;
}
div#divFilter 
{
  
}
section.content .m-1.p-1 {
    padding-top: 1px !important;
    margin-top: 1px !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
}
.section-info-container>.container {
    padding-right: unset !important;
    padding-left: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}
div#divFilter .card
{
    width: 100%;
    margin: unset;
    padding: unset;
    box-shadow: unset;
    
}
.card-body .row [class^="col-"]
{
    margin-bottom: 8px;
}
.card {
    box-shadow: none;
    margin: unset;
    border: unset;
}
.overlay
{
    color: #fff;
}
.k-toolbar.k-grid-toolbar {
    overflow-x: auto;
        padding: 4px 13px;
        background: var(--bg-color);
}
.modal-footer.container {
    overflow-x: auto;
}
button.btn.btn-primary.btn-small {
    padding: 1px 14px;
    border-radius: 5px;
    margin-left: 3px;
}

.k-pager-wrap .k-dropdown {
    
    min-width: 113px;
}


.header-title {
    color: #486dcf;
    font-size: 26px;
    font-family: 'UTMBebas',sans-serif;
    font-weight: 600;
}

.k-tabstrip>.k-tabstrip-items>.k-item>.k-link {
    padding: 13px 13px;
    
    color: var(--text-color);
}
.k-tabstrip .k-content.k-state-active {
    background: inherit;
    border-color: transparent;
}

footer.main-footer {
    display: none;
    
}

.k-toolbar::before {
    content: none;
    
}

.k-tabstrip .k-tabstrip-items {
    
    overflow: auto;
}

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: 668px;
        
        padding-left: 1px;
        overflow: auto;
        
        color: #486dcf;
        display: block;
        overflow: hidden;
        padding-top: 4px;
    }

    .brand-link .brand-image {
    float: left;
    /* line-height: .8; */
    /* margin-left: .8rem; */
    margin-right: .5rem;
    margin-top: 1px;
    
        border: 1px solid var(--bg-color-white);
    max-height: 41px;
    width: auto;
    padding: 3px;
    width: 43px;
    background: #f1f8ff;
    margin-left: 4px;
    border-radius: 49%;
}
.k-widget
{
    border: 1px solid var(--border-color);
}
.k-tabstrip .k-content.k-state-active {
    
    padding: 1px;
    margin: 1px;
}

span.brand-text b {
   font-size: 19px;
    font-weight: 900;
    font-family: 'Open Sans';
    
}
.k-taskboard-column-header {
        padding: 2px 26px !important;
    
    vertical-align: middle;
    background: inherit;
}
.trang-thai-header {
    text-align: left;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    content: "";
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: unset ;
}
.k-taskboard-card {
    border-color: var(--border-color);
    background-color: var(--bg-color-white);
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 19px 0 rgba(68, 91, 100, 0.08);
    box-shadow: 0 1px 19px 0 rgba(68, 91, 100, 0.08);
    margin-bottom: 19px;
    padding: 4px 13px;
}
.k-taskboard-column-cards-container {
    padding: 13px;
}

.k-taskboard-column-cards {
    background-color: var(--bg-color);
    padding: 13px;
}
.k-taskboard-card:hover
{
    border: unset;
}
/* 🎯 CỘT TRẠNG THÁI */
/* ============================= */
.k-taskboard-column {
    /* background: white; */
    /* border-radius: 11.3px; */
    /* padding: 11.3px; */
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-in-out forwards;
    background-color: var(--bg-color);
}

/* Đổ bóng khi hover */
.k-taskboard-column:hover {
    
    transform: scale(1.13);
    /* background: #fff; */
}

.k-taskboard-card:hover {
    transform: translateY(-5px) scale(1.02);
    
    
}
.k-taskboard-column-cards
{
    gap: unset;
}

.modal-title {
    max-width: calc(100% - 86px);
    overflow: hidden;
    text-overflow: ellipsis;
}

td.cong-viec {
    white-space: normal !important;
}
#drawerPanel {
    margin-top: 31px;
    position: fixed;
    top: 14px;
    right: -500px;
    width: 500px;
    max-width: calc(100% - 13px);
    height: calc(100% - 76px);
    transition: right 0.3s ease;
    z-index: 1000;
    padding: 13px;
    overflow: hidden;
}
#drawerPanel  .row.form-group {
    gap: 1px;
    justify-content: space-between;
}
div#drawerPanel {
    padding: unset;
}
#drawerPanel .modal-body {
    left: 1px;
    width: 100%;
    border-radius: unset;
}
#drawerPanel .modal-footer.justify-content-between
{
    bottom: 0px;
}
.drawerPanel-boc {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-color);
}
#drawerPanel .modalLoading-boc .modal-body
{
    height: 100% !important;
    background: var(--bg-color-white);
}
#drawerPanel .modalLoading-boc
{
    background: var(--bg-color-white);
}
#drawerPanel #closeDrawer
{
    color: var(--color-danger) !important;
}
#drawerPanel
{
    margin-top: 1px !important;
    position: fixed;
    
    right: -500px;
    width: 500px;
    max-width: calc(100vw - 13px);
    height: calc(100% - 68px);
    transition: right 0.3s ease;
    z-index: 99999;
    padding: 13px;
    overflow: hidden;

    top: 1px !important;
    
}
#drawerPanel .info-group {
    line-height: 25px;
    gap: 4px;
}
 .card-info:not(.card-outline)>.card-header a {
    color: #486dcf !important;
    font-size: 19px !important;
    font-weight: 600;
    padding: 13px 19px;
    font-family: 'Roboto Condensed';
}
.k-taskboard-content {
    padding: unset;
    
    margin-top: 13px;
    
}


.diagram-boc .card {
    
        background: var(--bg-color);
        margin-bottom: unset;
}

.diagram-block-root
{
    border: 1px solid var(--border-color);
    padding: 13px 34px;
    background: var(--bg-color-white);
    border-radius: 13px;
    
}
.diagram-block-root *
{
   
    font-family: "Open Sans", sans-serif;
    color: var(--text-color-header);
    font-size: 15.9px;
    font-weight: 900;
}
.diagram-block
{
    border: 1px solid var(--border-color);
    
    background: var(--bg-color);
    color: var(--primary-color) ;
}
    .diagram-block-main-wr {
        position: relative;
        
    }
.diagram-line {
        position: relative;
        width: 2px;
        height: 40px;
        background-color:var(--border-color);
        margin: 0 auto;
    }

    .diagram-line::after {
        content: '';
        position: absolute;
        top: 100%; /* nằm ngay dưới đường kẻ */
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--border-color);
    }
   
.diagram-block.shadow-lg.rounded.p-3.h-100 {
    border-radius: 8px;
}
    .diagram-boc {
        position: relative;
    }

    .card-position {
        position: relative;
        
    }

    .connector-arrow {
        position: absolute;
        top: -26px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 19px;
        background-color: var(--text-color);
    }

    .connector-arrow::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: var(--text-color);
    }

    .menu-connector {
        position: relative;
        margin-top: 19px;
    }

    .menu-connector::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 19px;
        background-color:var(--text-title-color);
    }

    .menu-connector::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color:var(--text-color);
    }
.diagram-line-with-arrow {
    position: relative;
    height: 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.icon-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* đẩy hai phần tử về hai đầu */
}

.icon-title-row h5 {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
    flex-grow: 1;
    font-family: 'Roboto';
}

.icon-title-row i {
    width: 68px;
    font-size: 41px;
    text-align: right;
    /* căn biểu tượng sang phải trong khung 68px */
}

.box-contents {
    padding: 13px;
    background: #f9f9f9;
    border-radius: 9px;
}
/* Line thẳng đứng */
.vertical-line {
    width: 1px;
    height: 31px;
    background-color:var(--text-color);
}

/* Mũi tên chỉ xuống */
.arrow-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--text-color);
    margin-top: -1px;
}

/* Đường ngang nối đến các nhánh */
.horizontal-line {
    width: 82%;
    height: 8px;
    background-color:var(--text-color);
    border-top: 1px solid var(--text-title-color);
    position: relative;
}
.card-position .card-body {
    
    max-height: calc(100vh - 194px);
    overflow: auto;
    background: #f9f9f9;
}
.card-body.custom-card-body {
    padding: 1px 13px;
}
.card-header.card-header-diagram {
    color: var(--text-color-header);
    background-color: var(--bg-color-white);
    border: 1px solid var(--border-color);
    
}
.diagram-block:hover {
    /* color: #fff;
    background: #1849cb; */
    opacity: 0.86;
}
.card-header.card-header-diagram:hover{
        /* background: #073bc8;
        color: #f9f9f9; */
    opacity: 0.68;
}
li.headerOpen i.fas {
    padding-right: 13px;
    font-family: 'Font Awesome 5 Pro';
    font-size: 15.3px;
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem;
    font-family: 'Roboto Condensed';
    text-decoration: underline;
    color: var(--brand-color);
    text-decoration-style: solid; 
    font-weight: 600;
}
.breadcrumb-item+.breadcrumb-item.active {
    padding-left: .5rem;
    font-family: 'Roboto Condensed';
    text-decoration: none;
    color: var(--brand-color);
    text-decoration-style:none; 
    font-weight: 600;
}

.k-list .k-item ,.k-list-optionlabel.k-state-selected{
    
   border-bottom: unset;
    background: #f9f9f9;
    border-bottom: 8px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    padding: 13px;
    cursor: pointer;
    text-overflow: inherit;
    
}


/* .k-animation-container {
    
   
    pointer-events: auto !important;
}

.k-list-container {
    z-index: 999999 !important;
    
} */

.modal,
.k-window,
#modal-default,#modalLoading {
    overflow: visible !important;
}
.box-body {
    background: #f9f9f9;
}

section.section {
    padding: 27px;
    background: #f4f6f9;
}
.form-control {
    
    border: 1px solid var(--border-color);
    background-color: #fafafa;
}
/* .k-animation-container { 
     
    
    pointer-events: auto !important; 
} 
 
.k-list-container { 
    z-index: 999999 !important; 
     
}  */
 
.modal, 
.k-window, 
#modal-default,#modalLoading { 
    overflow: visible !important; 
}

.card .card-header {
    padding: 4px 13px;
    background: #f9f9f9;
}

.rotate-icon {
  transition: transform 0.3s ease;
}

.accordion-button[aria-expanded="true"] .rotate-icon {
  transform: rotate(180deg);
}

button.btn.btn-link:hover
{
    transform: scale(1) !important;
}
div#noiDungBienBan {
        padding: 26px;
    background: #f9f9f9;
    border-radius: 8px;
}

.accordion-header .btn, .card-header .btn {
    padding-left: 8px;

    box-shadow: var(--shadow-soft);
    
}

.accordion-header .btn .box-title, .card-header .btn .box-title {
    color: var(--primary);
}
section.content {
    padding: 13px;
}
#modalLoading form {
    display: flex
;
    padding: unset;
    max-height: calc(100vh - 13px);
    flex-direction: column;
    justify-content: space-between;
    flex-direction: column;
}
.modal-body {
        overflow-y: auto;
        /* max-height: calc(100vh - 313px); */
        height: auto;
        max-width: calc(100%);
    }

.modal-backdrop.fade {
    z-index: 888;
}
.modal-body {
    padding: 13px;
    background: #f9f9f9;
    border-radius: 9px;
}
.card1-heading-area1-title {
    padding: 19px 13px;
    color: var(--text-color-header);
}


    #frmChangeProfile .modal-body {
    background: #f9f9f9;
}
.modal-fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
}




.modal-fullscreen .modal-content {
    height: 100vh;
    border-radius: 0;
}
div#modalLoading {
      
        box-sizing: border-box;
    }
    

#myTab .nav-link {
    white-space: nowrap;
    font-weight: 400 !important;
    font-weight: 19px;
    color: gray;
    padding-left: 13px !important;
    padding-right: 13px !important;
    background: #f4f6f9;
    font-family: 'Merriweather Sans';
}
#myTab .nav-link {
    white-space: nowrap;
    font-weight: 400 !important;
    font-weight: 19px;
    color: #4a6ed1 !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    background: #f4f6f9;
    font-family: 'Merriweather Sans';
    border: 1px solid var(--border-color);
}
#myTab .nav-link.active {
    color: #4a6ed1;
    font-weight: 900 !important;
    text-decoration: underline;
}

#myTab li.nav-item:first-child {
    border-radius: 13px 1px 1px 19px;
    background: #f9f9f9 !important;
    border: 1px solid var(--border-color);
}

#myTab li.nav-item {
    border: 1px solid var(--border-color);
}

.modal-body {}

div#myTabContent {
   background: #f9f9f9;
    padding: 19px;
    border: 1px solid var(--border-color-soft);
    border-radius: 9px;
}

div#modalLoading {
    background: #f4f6f9;
}

ul#myTab li {
    border: 1px solid var(--border-color);
}
#modalLoading>form>.modal-header:first-child {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    padding-left: 1px;
    border: unset;
    position: relative;
}
.modal-body {
    padding: 19px;
    background: #f9f9f9;
    border-radius: 9px;
}

#modalLoading .k-animation-container, .k-animation-container *, .k-animation-container :after, .k-block .k-header, .k-list-container, .k-widget, .k-widget *, .k-widget :before {
    box-sizing: border-box !important;
}



.topWindowNormal {
    top: 0px !important;
}

.topWindowFull {
    top: 0px !important;
}
.dashboard-card,.dashboard-row
{
    background: #f9f9f9;
    margin-top: 13px;
    border-radius: 9px;
}

.fw-semibold {
    font-size: 19px;
    font-family: 'Merriweather Sans';
    color: var(--text-color-header);
}
.list-group-item
{
    background: #f9f9f9;
}
iframe#iframeShowReport {
    border: 1px solid var(--border-color);
    margin-top: 13px;
    background: #f9f9f9;
    box-shadow: var(--shadow-soft);
    border-radius: 9px;
}
nav.breadcrumb-boc {
    padding: 1px 19px;
}

.mb-detail-trigger {
    color: var(--text-color);
}

.form-control:disabled {
    cursor: not-allowed;
    opacity: 0.86;
}
.form-control.k-widget {
    padding: 0;
    opacity: 1;
}
.k-grid td.k-state-selected, .k-grid tr.k-state-selected, .k-listview>.k-state-selected, .k-state-selected .k-progress-status {
    color: var(--text-title-color);
}


   .sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-link p {
        white-space: normal;
        
        text-overflow: clip;
        width: 100%;
    }
.nav-sidebar .nav-item.headerOpen > .nav-link {
  display: flex;               
  align-items: center;
  position: relative;          
}

.nav-sidebar .nav-item.headerOpen > .nav-link p {
  margin: 0;
  flex: 1 1 auto;            
  min-width: 0;              
  white-space: nowrap;       
  overflow: hidden;          
  text-overflow: ellipsis;   
  padding-right: 1.5rem;     
}


.nav-sidebar .nav-item.headerOpen > .nav-link .right {
  position: absolute;
  right: .76rem;             
}

.profile-pic {
    
 
       color: transparent;
   transition: all 0.3s ease;
}
 .profile-pic img {
     
     object-fit: cover;
     width: 193px;
     height: 193px;
     box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
     border-radius: 50%;
     z-index: 1;
  
 }
 li.headerOpen a i.fa.fa-ban.menu-icon {
    font-size: 19px;
}


#bc-portal{
  position: fixed;
  inset: 0;              /* phủ full màn hình */
  z-index: 20000;        /* cao hơn mọi overlay thường gặp */
  pointer-events: none;  /* mặc định không bắt event (panel con sẽ bật lại) */
}

.bc-portal-panel{
  position: fixed;
  min-width: 268px;
  background:#f9f9f9;
  border:1px solid var(--border-color);
  border-radius:.5rem;
  box-shadow:var(--shadow-soft);
  padding:19px;
  min-height: 49px;
    max-height: calc(100vh - 139px);
    overflow: auto;
  pointer-events: auto;  /* panel nhận click */
  /* Không có bất kỳ hiệu ứng nào */
}

.bc-portal-panel a.bc-item{
display: flex
;
    align-items: center;
    gap: 9px;
    background: #f9f9f9;
    padding: 13px 4px;
    border-bottom: 4px solid #fff;
    text-decoration: none;
    
    color: var(--text-color);
    white-space: nowrap;
    
    
    
}
.bc-portal-panel a.bc-item:hover{ background:#f5f6f9; }
.bc-portal-panel a.bc-item.current{ font-weight:600; pointer-events:none; opacity:.7; }
span.breadcrumb-item-text {
    padding: 1px 9px;
    cursor: pointer;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Merriweather Sans';
}


/* ===== Breadcrumb Portal with click + slide-down effect ===== */
#bc-portal{
  position: fixed;
  inset: 0;
  z-index: 20000;            /* cao hơn overlay thường gặp */
  display: none;
}
#bc-portal.active{ display: block; }

#bc-portal .bc-overlay{
  position: absolute;
  inset: 0;
  background: transparent;   /* trong suốt, chỉ để bắt click outside */
}

.bc-portal-panel{
  position: fixed;
  min-width: 260px;
  max-width: min(92vw, 420px);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  padding:.25rem 0;
  /* Hiệu ứng xuất hiện xổ xuống */
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.bc-portal-panel.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bc-portal-panel .bc-list{
  max-height: 56vh;
  overflow:auto;
  padding:.25rem 0;
}

/* Item */
.bc-portal-panel a.bc-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  text-decoration:none;
  color:#222;
  white-space:nowrap;
  line-height:1.25;
  outline:none;
}
.bc-portal-panel a.bc-item i{ width: 1.25rem; text-align:center; }
.bc-portal-panel a.bc-item:hover,
.bc-portal-panel a.bc-item:focus{ background:#f5f6f7; }
.bc-portal-panel a.bc-item:focus-visible{
  box-shadow: inset 0 0 0 .15rem rgba(25, 135, 84, .35);
  border-radius: .25rem;
}

/* Item hiện tại = DISABLED rõ ràng */
.bc-portal-panel a.bc-item.current{
  font-weight:600;
  pointer-events:none;
  opacity:.55;
  color:#999 !important;
  background:#f0f0f0;
  cursor: default;
}

/* ===== Breadcrumb Portal - PRO effect ===== */
#bc-portal{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
}
#bc-portal.active{ display: block; }

#bc-portal .bc-overlay{
  position: absolute;
  inset: 0;
  background: rgba(18,18,18,0.02); /* scrim cực nhẹ; thích trong suốt: đổi thành 'transparent' */
  opacity: 0;
  transition: opacity .18s ease;
}
#bc-portal.active .bc-overlay.visible{ opacity: 1; }

.bc-portal-panel{
  position: fixed;
  min-width: 260px;
  max-width: min(92vw, 420px);
  /* Glassy background nhẹ */
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 13px;
  box-shadow: 0 13px 32px rgba(18,18,18,.18), 0 2px 6px rgba(18,18,18,.08);
  padding: .35rem 0;

  /* Hiệu năng */
  transform-origin: center top;
  will-change: transform, opacity;

  /* Hiệu ứng vào/ra */
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
  -webkit-backdrop-filter: saturate(180%) blur(13px);
  backdrop-filter: saturate(180%) blur(13px);
}
.bc-portal-panel.anim-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bc-portal-panel.anim-out{
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .14s ease, transform .16s ease;
}

.bc-portal-panel .bc-list{
  max-height: 56vh;
  overflow: auto;
  padding: .25rem 0;
}

/* Item + stagger */
.bc-portal-panel .bc-item{
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  margin: 2px 6px;
  text-decoration: none;
  color: #1f2937;
  white-space: nowrap;
  line-height: 1.25;
  border-radius: 8px;
  outline: none;

  /* stagger in */
  opacity: 0;
  transform: translateY(6px);
  animation: bc-item-in .22s ease both;
}
.bc-portal-panel .bc-item i{ width: 1.25rem; text-align: center; }
.bc-portal-panel .bc-item:hover,
.bc-portal-panel .bc-item:focus{ background:#f5f6f7; }
.bc-portal-panel .bc-item:focus-visible{
  box-shadow: inset 0 0 0 .15rem rgba(25,135,84,.35);
}

/* Item hiện tại = DISABLED rõ ràng */
.bc-portal-panel .bc-item.current{
  font-weight: 600;
  pointer-events: none;
  opacity: .55;
  color: #999 !important;
  background: #f0f0f0;
  cursor: default;
  transform: none;
  animation: none;
}

/* Stagger 12 item đầu (tăng/giảm tuỳ khẩu vị) */
.bc-portal-panel .bc-item:nth-child(1){  animation-delay: 40ms; }
.bc-portal-panel .bc-item:nth-child(2){  animation-delay: 60ms; }
.bc-portal-panel .bc-item:nth-child(3){  animation-delay: 80ms; }
.bc-portal-panel .bc-item:nth-child(4){  animation-delay: 100ms; }
.bc-portal-panel .bc-item:nth-child(5){  animation-delay: 120ms; }
.bc-portal-panel .bc-item:nth-child(6){  animation-delay: 140ms; }
.bc-portal-panel .bc-item:nth-child(7){  animation-delay: 160ms; }
.bc-portal-panel .bc-item:nth-child(8){  animation-delay: 180ms; }
.bc-portal-panel .bc-item:nth-child(9){  animation-delay: 200ms; }
.bc-portal-panel .bc-item:nth-child(10){ animation-delay: 220ms; }
.bc-portal-panel .bc-item:nth-child(11){ animation-delay: 240ms; }
.bc-portal-panel .bc-item:nth-child(12){ animation-delay: 260ms; }

@keyframes bc-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: tắt chuyển động cho người dùng nhạy cảm */
@media (prefers-reduced-motion: reduce){
  #bc-portal .bc-overlay{ transition: none !important; }
  .bc-portal-panel{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .bc-portal-panel .bc-item{ animation: none !important; opacity: 1 !important; transform: none !important; }
}
section.content.container-fluid-hinova {
    background: #f9f9f9;
    border-radius: 8px;
}



/* ///menu */
li.nav-item.headerOpen>a>i {
    padding-right: 5px;
}

li.nav-item.headerOpen>a {
    color: #fff;
}

ul.nav.nav-treeview>li {
    padding-left: 13px;
    color: #fff;
    padding-right: 13px;
}

ul.nav.nav-treeview>li>a:not(.active)>p {
    color: #c4c4d6;
    font-weight: 400;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active
{
    padding-bottom: 4px;
    padding-top: 4px;
    background-color: #f9f9f9;
}
ul.nav.nav-treeview>li {
    padding-left: 1px;
    color: #fff;
    padding-right: 1px;
}
#modal-default{
    z-index: 99999;
}
td button {
    margin: 2px;
}
.k-grid-toolbar {
    padding: 1px 13px;
}   
div#treeListTab .k-grid-content {
    max-height: 494px;
}
div#modalLoading70 {
    background: #f4f6f9;
}
.modal-content
{
    background: #f4f6f9;
}
.tab-content {
    background: #f9f9f9;
    padding: 19px;
    border-radius: 19px;
}
ul.nav.nav-tabs li {
    padding: 13px 19px;
}

ul.nav.nav-tabs li a.active {
    font-weight: 800;
    color: var(--primary);
    font-size: 19px;
}
    .modal-sm {
        max-width: 886px;
    }
     .modal-lg {
        max-width: 1134px;
    }
    .btn-sm {
    padding: 9px !important;
    height: 39px !important;
    border-radius: 27px !important;
    vertical-align: middle;
    font-size: 13px !important;
    font-family: "Open Sans", sans-serif !important;
    margin: 1px !important;
    font-weight: 600 !important;
  
}
.k-grid-toolbar {
    padding: 13px 13px;
}
div#idtoolbox {
    padding: 13px;
}
div#idpagebodywrapper {
    background: #f4f6f9;
}
    .content-left,.content-right{
    background: #f4f6f9;
    border-radius: 9px;
    
}

.content-left> div,.content-right> div,
.content-left> h6,.content-right> h6,
.content-left> h6,.content-right> h6{
    padding: 19px;
    background: #f9f9f9;
}
.icon-title-row i {
    color: var(--color-info);
}
table.table-hover.k-grid.k-widget tbody th,
table.table-hover.k-grid.k-widget tbody td,
#gridTaiKhoan tbody th,
#gridTaiKhoan tbody td,
table[role="treegrid"] tbody th,
table[role="treegrid"] tbody td,
table[role="grid"] tbody th,
table[role="grid"] tbody td,

#gridData tbody th,
#gridData tbody td {

    border-bottom: 0;
    background: var(--bg-color-white);
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    
    font-weight: 700 !important;
}
label {
    color: var(--text-color);
}
ul.nav.nav-tabs li a {
    
        color: #4a6ed1 !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    background: #f4f6f9;
    font-family: 'Merriweather Sans';
    
}
ul.nav.nav-tabs li {
    padding: 13px 19px;
    border: 1px solid var(--border-color);

    background: #f9f9f9 !important;
    border: 1px solid var(--border-color);
    margin-right: 3px;
}




.bc-portal-panel a.bc-item
{
    color: var(--text-color);
    font-family: 'Merriweather Sans';
    font-weight: 500;
}
.bc-portal-panel
{
    overflow: hidden;
}
.k-grid-content {
    min-height: 286px !important;
}
#modalLoading form
{
    padding: 19px;
}
.k-treelist tr.k-alt.k-state-selected, .k-treelist tr.k-alt.k-state-selected>td, .k-treelist tr.k-state-selected, .k-treelist tr.k-state-selected td {
    background-color:#e5e5e5;
    border-color:unset;
    color: var(--brand-color);
    cursor: pointer;
}
.main-header .nav-link {
    height: unset;
}
ol.breadcrumb {
    overflow: hidden;
}
ol.breadcrumb:hover {
    overflow-x: auto;
}
ol.breadcrumb::-webkit-scrollbar-thumb {
    display: none;
}
.btn-light
{
    color: var(--primary);
    border: 1px solid var(--border-color);
}
input.k-textbox ,.k-input,.input-group input{
    height: 41px;
}

/* ket thuc  */