body {
    background-color: var(--bg-color);
    margin: 0;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--bs-font-body)  !important;
    font-size: var(--bs-font-size) !important;
    font-weight: 400;   
}
.k-window-content {
    background: var(--bg-color-modal);
    padding: 0px;
    padding-top: 0;
    border-radius: 5px;
}
.success{
    color: var(--color-success);
    
    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;
}

/* Focus — vòng sáng nhã nhặn */
.btn-default:focus,
.btn-default:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(209, 213, 219, 0.7),
        0 10px 22px rgba(0, 0, 0, 0.12);
}

/* Disabled */
.btn-default:disabled,
.btn-default.disabled {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-color: #d1d5db;
    color: #9ca3af;
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn:not(td .btn, .input-group-append .btn,.card-header .btn,.accordion-header .btn,div.k-grid-content-locked .btn) {
    white-space: nowrap;
    font-size: var(--bs-font-size) ;
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-family:var(--bs-font-second);
    max-height: var(--btn-height);
    height: var(--btn-height);
    display: inline-flex;
    align-items: center;
    color: #fff;
    /* margin-right: 3px; */
   /* border-radius: 4px; */ 
}  
.btn i {
    margin-right: 2px;
}
.btn {
    transition: transform 0.35s ease, box-shadow 0.2s ease, background-color 0.35s ease;
    will-change: transform;
 
}

.nav-tabs .nav-link.active {
    color: var(--brand-color);
    background-color: var(--bg-color-white);
    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.08);
    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 {
    
    box-shadow: 0 4px 3px var(--border-color);
  
}

button#btnOK:hover {
    color: #fff;
}


.sweet-alert button.confirm
{
     color: #fff;
    background-color: var(--brand-color) !important;
}
.btn-primary{
       color: #fff;
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    box-shadow: none;
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
} 
td .btn {
    font-size: 15.3px;
    padding: 6px 8px;
    border-radius: 6px !important;
}
td .btn.btn-success {
    
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
    
    color: var(--button-success);
    box-shadow: none;
}
td .btn.btn-primary {
    
    /* background: var(--bg-color);
    border: 1px solid var(--bg-color);
    
    color: var(--button-primary);
    box-shadow: none; */
}

td .btn.btn-info {
    
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
    
    color: var(--button-info);
    box-shadow: none;
}
td .btn.btn-danger {
    
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
    
    color: var(--button-danger);
    box-shadow: none;
}
td .btn.btn-warning {
    
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
    
    color: var(--button-warning);
    box-shadow: none;
}

/* Base button style inside td */
td .btn {
    font-size: 14.3px;
    padding: 6px 8px;
    border-radius: 6px !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* background: rgba(255,255,255,0.10); */
    
    /* Border theo màu var(--bg-color-white) */
    border: 1px solid var(--bg-color-white) !important;

    /* Shadow theo màu var(--bg-color-white) */
    box-shadow: 0 4px 14px rgba(249, 249, 249, 0.35);

    transition: 0.25s ease;
}

/* Hover chung */
td .btn:hover {
    transform: translateY(-2px);
    background:var(--bg-color);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    border: var(--border-color);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
}

/* --- COLOR GLASS BUTTONS (chỉ đổi màu chữ) --- */
td .btn.btn-success {
    color: var(--button-success);
}
td .btn.btn-primary {
    /* color: var(--button-primary); */
}
td .btn.btn-info {
    color: var(--button-info);
}
td .btn.btn-danger {
    color: var(--button-danger);
}
td .btn.btn-warning {
    color: var(--button-warning);
}


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

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

.btn-second:hover {
    color: var(--bg-color-white) !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: var(--button-success);
    border-color: var(--button-success);
    color: #fff;
    cursor: pointer; 
}

.btn-success:hover {
    background-color: var(--button-success-hover);
    border-color: var(--button-success-hover);
}


.btn-info {
    background-color: var(--button-info);
    border-color: var(--button-info);
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

.btn-info:hover {
    background-color: var(--button-info-hover);
    border-color: var(--button-info-hover);
}

.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: var(--button-danger);
    border-color: var(--button-danger-border);
    color: #fff;
    cursor: pointer;
    /* -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s; */
}

.btn-danger:hover {
    background-color: var(--button-danger-hover);
    border-color: var(--button-danger-hover);
}


.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: var(--bg-color);
    }
.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: var(--bg-color);
}
.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: var(--bg-color);
    padding: 10px 30px 7px;
}
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-title {
    color: var(--color-title);

}

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

}

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

.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: var(--bg-color-white);
}

.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; */
    padding-top: 0;
}

.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: 14px;
    line-height: 1.4;
}
.k-grid tr td:has(.btn-sm) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.k-grid tr th {
    border-right-width: 1px !important;
    font-family: 'Merriweather Sans';
    color: var(--text-color);
    font-size: 14px;
    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; */
    transition: height 0.35s ease;
}
.k-grid-content-locked {
    transition: height 0.35s ease;
}
.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: var(--bg-color-white);
}

/*
    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-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%;
    min-height: 55px;
    overflow: hidden;
}

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

}
#tbNhapXuat .k-combobox .k-input-inner {
    padding: .5rem 2px;
}  
#tbNhapXuat .k-combobox .k-input-button {
    padding: 8px 2px 8px 4px;
}  
#tbNhapXuat .k-combobox .k-clear-value {
    padding: 8px 0px 8px 3px;
}  
#tbNhapXuat .k-numerictextbox,
#tbNhapXuat .k-textbox {
    height: 100% !important;
    max-height: unset;
} 
.td-border-boc .lblRead {
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
}

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);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /*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: none !important;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /* 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);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /* 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: none !important;
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt mà cho tất cả thay đổi */
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /* Thêm bóng nhẹ */
}
@media (min-width: 1400px) {
    p {
        font-size: 13px;
    }
}
@media (min-width: 993px) {
    [class^="col-"]:has(>.input-group .text-search) {
        max-width: 350px;
    }
}


/* 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);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /* 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);
        backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
        /* 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);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    /* 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-title > a::after {
    right: 15px;
}

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

#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;
    font-size: 15px;
    font-family: "Roboto Condensed";
}

.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;
    margin-bottom: 10px;
}

/* 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: auto;
    padding: 9px 13px;
    padding-right: 20px;
}
.nav-sidebar .nav-link>p>.right {
    /* position: absolute;
    right: 1rem;
    top: 3px; */
    right: 11px;
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link {
    color: var(--text-color-bg-menu);
    transition: transform .3s ease;
    transform: translateX(0px);
}
[class*=sidebar-dark] .brand-link {
    
    height:auto;
    
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover {
  
    color: var(--text-color-bg-menu);
    opacity: 0.86;
}
#idpagebodywrapper>section.content {
    padding: 15px !important;
    padding-bottom: 10px !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) a {
    flex: 0 1 auto;
} */
.dropdown-menu-lg .dropdown-item {
    padding: 10px 19px;
    color: var(--text-color-dropdown-menu) !important;
    font-family: var(--bs-font-second);
}

.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:has(input:not([readonly])):hover,
.k-numerictextbox:has(input:not([readonly])):hover,
.k-datepicker:has(input:not([readonly])):hover,
.k-dropdownlist:not([aria-readonly="true"]):hover,
.k-combobox:not([aria-readonly= "true"]):hover,
.k-multiselect:not([aria-readonly= "true"]):hover,
.k-datetimepicker:has(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-textarea:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.05);
    background-color: #e6f1e1 !important;
}

.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 {
    
    
    color: var(--color-title);
    
}

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

    box-sizing: border-box;

    position: relative;
    margin: auto;
    width: 100%;
}

#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 {
    
    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.text-search, 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: var(--bg-color-white);
    border-radius: 9px;
    border: unset;
}
.box-title {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16.9px;
    font-weight: 700;
    color: var(--text-color-header);
}
.modal-body {
    padding: 19px 1px;
    background: var(--bg-color-white);
    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; */
    /* display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}
#gridData td:has(button),
#gridData .k-table td:has(button),
#gridData .k-grid-content td:has(button) { 
    vertical-align: middle !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: transparent !important;
    /* Nền sáng nhẹ */


    border-radius: 8px !important;
    /* Bo góc nhẹ */
    padding: 8px 15px !important;
    /* Padding hợp lý */
    font-size: 16px !important;
    /* Kích thước font dễ đọc */
    box-shadow: unset !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;
    margin-top: -7px;
}

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

}

.con-dau {
    position: absolute;
    top: 119px;
    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;
    text-align: center;
}

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

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

.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: 160px;
    left: 93px;
    z-index: 3;
}

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

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

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: var(--bg-color-white);
    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 rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    background-color: #fff;
    border-radius: 5px;
}
.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-table th.k-header {
    background-color: var(--bs-bg-toolbar);
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: 5px 10px !important;
}

/* Cell thường */
.k-grid td { 
    border-color: rgba(0, 0, 0, 0.05); 
}

/* 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: 5px 13px;
}

.k-filter-row th,
.k-grid-header-table th.k-header {
    color: #999999;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

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


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



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


.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: #337ab7;
        text-align: left;
        height: 39px;
    }

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);  */
    background: #edf0f5;
}

.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;
    color: var(--brand-color) !important;
}

nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link>img {

    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>a.nav-link>i { 
    color: var(--brand-color);
    /* border: 1px solid var(--border-color);  */
    font-size: 14px;
}

nav.main-header ul.navbar-nav:last-child>li>a.nav-link:hover>i { 
    color: #3E5FBA; 
}

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

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: "Roboto", sans-serif !important;
    font-size: 16px;
    color: #515a6d !important;
    font-weight: 400;
} 
.k-combobox .k-input-inner::placeholder {
    color: #515a6d;
}

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

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

.container-sm.sweet-alert.showSweetAlert {
    background: var(--bg-color-white);
    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;
    
    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#frmPhieuDieuVan {
    padding-left: 1px;
    padding-right: 1px;
}


.dropdown-item {

    font-size: var(--bs-font-size-dropdown-item);
    font-family: var(--bs-font-second) !important;
    color: var(--font-color-link);

}


/* 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: #fff;
    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 {

   
    color: var(--brand-color);
}
div#gridData {
    margin-top: 5px; 
}
.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: var(--bg-color);
}

.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 {
    
}
.k-picker-wrap > input,
.k-textbox > input {
    height: 100% !important;
}
.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;
    box-shadow: 0 0 2px 2px #ececec;
}
.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 15px;
}
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;
    white-space: nowrap;
    /* background: var(--bg-color); */
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.k-toolbar.k-grid-toolbar:has(.btn, button) {
    padding: 5px 0px;
}
.k-toolbar.k-grid-toolbar:has(.k-toolbar-item, .k-toolbar-solid ) {
    padding: 9px 10px;
}
.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;
}
.col-sm-6:has(.header-title) {
    display: none;
}
.content-header .header-title {
    height: 0;
    color: transparent !important;
}
.header-title {
    color: #486dcf;
    font-size: 26px;
    font-family: var(--font-header-title);
    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; */
}
.k-tabstrip-items .k-link {
    padding: 10px 15px;
}
.k-tabstrip-content {
    padding: 15px 0 0;
}

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: var(--brand-color);
        display: block;
        overflow: hidden;
        padding-top: 4px;
    }




.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 */
}
ol.breadcrumb {
    overflow-x: auto;
    padding-left: 27px !important;
}
.box-contents {
    padding: 13px;
    background: var(--bg-color-white);
    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: var(--bg-color-white);
}
.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: var(--bg-color-white); */
    opacity: 0.68;
}
.nav-sidebar > li > a > i {
    /* padding-right: 13px; */
    font-family: 'Font Awesome 5 Pro';
    font-size: .95rem !important;
    width: 1.2rem !important;
    /* 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: var(--bg-color-white);
    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: var(--bg-color-white); */
}

section.section {
    padding: 27px;
    background: var(--bg-color);
}
.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: var(--bg-color-white);
}

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

.accordion-button[aria-expanded="true"] .rotate-icon {
  transform: rotate(180deg);
}
.accordion-button > span {
    color: var(--brand-color);
    font-weight: 600;
    display: flex;
    align-items: center;
}
button.btn.btn-link:hover
{
    transform: scale(1) !important;
}
div#noiDungBienBan {
    padding: 26px;
    background: var(--bg-color-white);
    border-radius: 8px;
}

.card-header .btn {
    padding-left: 8px !important;
    border-bottom: 1px solid #ececec;
    /* box-shadow: var(--shadow-soft); */ 
}
.accordion-button {
    padding-left: 13px !important;
    padding: 7px 13px 8px;
}
.accordion-header .btn .box-title, .card-header .btn .box-title {
    color: var(--primary);
    text-transform: uppercase;
}
section.content {
    padding: 13px;
    padding-left: 20px;
}
#modalLoading form {
    display: flex;
    padding: unset;
    
    flex-direction: column;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    background-color: var(--bg-color-white);
    border-radius: 13px;
}
.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: var(--bg-color-white);
    border-radius: 9px;
}
.card1-heading-area1-title {
    padding: 19px 13px;
    color: var(--text-color-header);
}


    #frmChangeProfile .modal-body {
    background: var(--bg-color-white);
}
.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: var(--bg-color);
    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: var(--bg-color);
    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: var(--bg-color-white) !important;
    border: 1px solid var(--border-color);
}

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

.modal-body {}

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



ul#myTab li {
    border: 1px solid var(--border-color);
}
#modalLoading>form>.modal-header:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    box-sizing: border-box; 
    position: relative;
}
.modal-body {
    padding: 19px 30px;
    background: var(--bg-color-white);
    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: var(--bg-color-white);
    margin-top: 13px;
    border-radius: 9px;
}

.fw-semibold {
    font-size: 18px;
    font-family: 'Merriweather Sans';
    color: var(--text-color-header);
}
.list-group-item {
    background: var(--bg-color-white);
}
.accordion-body .list-group {
    padding-right: 10px;
    overflow-x: hidden;
}
.accordion-body .list-group-item {
    background-color: unset;
}
.accordion-body .card-footer {
    padding: 10px 5px;
}
iframe#iframeShowReport {
    border: 1px solid var(--border-color);
    margin-top: 13px;
    background: var(--bg-color-white);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
    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: unset; 
    text-overflow: clip;
    width: 100%; 
    display: none;
    /* line-height: 1; */
}
.sidebar-mini.sidebar-collapse .sidebar:hover .nav-link p {
    /* white-space: normal; */
    line-height: 1.4;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .sidebar .nav-sidebar .nav-link p {
    display: inline;
}
.sidebar-mini.sidebar-collapse .sidebar .nav-treeview{
    display: none;
}
.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;
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active p ,.nav-sidebar .nav-link p {
    font-family:var(--bs-font-second);
}

#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:var(--bg-color-white);
  border:1px solid var(--border-color);
  border-radius:.5rem;
  box-shadow:var(--shadow-soft);
  backdrop-filter: blur(13px) saturate(131%);
    -webkit-backdrop-filter: blur(10px) saturate(131%);
  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: var(--bg-color-white);
    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: var(--bg-color-white);
    border-radius: 8px;
}



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

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

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

ul.nav.nav-treeview>li>a:not(.active)>p {
    color: var(--text-color-bg-menu);
    font-weight: 400;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active
{
    /* padding-bottom: 4px;
    padding-top: 4px;
    padding-right: 15px; */
    /* background-color: var(--bg-color-white); */
    border-bottom: 0;
    font-weight: 600;
}
ul.nav.nav-treeview>li { 
    color: #fff; 
}
#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: var(--bg-color);
}
.modal-content
{
    background: var(--bg-color);
}
.tab-content {
    background: var(--bg-color-white);
    padding-top: 15px;
    border-radius: 19px;
}
ul.nav.nav-tabs li {
    padding: 13px 19px;
}
.modal-content ul.nav.nav-tabs li {
    background: unset;
}

.modal-sm {
    max-width: 886px;
}
    .modal-lg {
    max-width: 1134px;
}
.btn-sm {
    padding: 9px !important;
    height: 32px !important; 
    /* border-radius: 27px !important; */
    vertical-align: middle;
    font-size: 13px !important;
    font-family: "Open Sans", sans-serif !important;
    margin: 1px !important;
    font-weight: 500 !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.btn-sm.btn-circle {
    width: 32px;
}
.k-grid-toolbar {
    padding: 13px 13px;
}
div#idtoolbox {
    padding: 13px;
}
div#idpagebodywrapper {
    background: var(--bg-color);
}
    .content-left,.content-right{
    background: var(--bg-color);
    border-radius: 9px;
    
}

.content-left> div,.content-right> div,
.content-left> h6,.content-right> h6,
.content-left> h6,.content-right> h6{
    padding: 19px;
    background: var(--bg-color-white);
}
.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); */
    background: unset;
    border-top: 1px solid #fff  !important;
    border-bottom: 1px solid #f5f5f5  !important;
    /* color: #6F7A91; */
    color: var(--text-color);
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}


ul.nav.nav-tabs li a { 
    color: #6F7A91;
    padding-left: 13px;
    padding-right: 13px ;
    background: var(--bg-color);
    
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active p {
    font-weight: 600;
 
}
ul.nav.nav-tabs li {
    padding: 0;
    border: 1px solid var(--border-color); 
    background: var(--bg-color-white); 
    margin-right: 3px;
}
.img-size-40 {
    height: 40px;
    width: 40px;
}
.k-grid-content table td button {
    width: auto !important;
}
.form-group .k-input {
    /* height: calc(2.25rem + 2px); */
}
.form-control {
    height: auto;
}
.k-grid-toolbar > .form-group {
    margin-bottom: 0;
}
button.input-group-addon {
    border: 0;
}
.nav-sidebar li ul li a {
    width: auto !important;
}
.add-breadcum > .page-title {
    padding: 7px;
    margin: 0 !important;
}
.main-header > .navbar-nav:last-child {
    height: 100%;
}
#ChiTietHoSo table td {
    padding: 0.25rem;
}
.layout-footer-fixed .wrapper .content-wrapper {
    padding-bottom: 0 !important;
}

/* css new layout hoàng vũ */
.k-grid td {
    white-space: normal;
    word-break: break-word;
}
.k-grid td .btn i {
    margin-right: 0;
}
.k-grid-content::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 6px;
}
.k-grid-content::-webkit-scrollbar-track {
    background: #eeeeee; 
    border-radius: 8px; 
} 
.k-grid-content::-webkit-scrollbar-thumb {
    background: #c2d5e9; 
    border-radius: 10px; 
} 
.k-grid-content::-webkit-scrollbar-thumb:hover {
    background: #b3c8df; 
}
.gridButton-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px 3px;
}
.k-grid-content td > .btn {
    /* margin-right: 1px; */
    /* margin-bottom: 3px; */
    /* width: 39px; */
    height: 35px;
}
#TextSearch, .text-search {
    padding: 8px 10px;
    height: 38px;
}
input#TextSearch+button.btn, input.text-search+button.btn, input#searchInput+button.btn {
    margin-left: unset;
    height: auto;
    border-radius: 1px 13px 13px 1px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}

.main-header .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
}
.nav-sidebar>.nav-item .nav-icon {
    font-size: 1rem !important;
    margin-right: 0;
}
.main-header .navbar-nav .nav-item {
    display: flex !important;
    align-items: center;
} 
.theme-size {
    width: 26px;
    height: 14px;
    border-radius: 6px;
    display: block;
    border: 1px solid #fafafa;
    margin-right: 3px;
}
.theme-vang {
    background: #f3b00a;
}
.theme-default {
    background: #0f1a34;
}
.theme-red {
    background: #c22f2c;
}
.theme-light {
    background: #f6f8fa;
    background: #f6f8fa;
    border: 1px solid #ccc; 
}
.theme-lightx {
    background: #25a0e2;
    background: #25a0e2;
    border: 1px solid #ccc; 
}
.theme-xanh {
    background: #405189;
}
.theme-tim {
    background:  rgb(72, 38, 104);
}
ul.nav-sidebar li.nav-item > a {
    color: var(--text-color-bg-menu);
}
.btn-primary, .sweet-alert button.confirm {
    color: #fff !important;
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    box-shadow: none;
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
}
.k-grid-container .btn-primary {
    color: var(--button-primary)!important;
    background-color: var(--bg-color) !important;
}
.k-grid-container .btn-primary:hover {
    color: #515967 !important; 
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--bs-bg-menu-left);
    color: var(--text-color-bg-menu);
    text-align: left; 
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, 
[class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, 
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    color: var(--text-color-bg-menu);
}
#accordion .card-body .row [class^="col-"] {
    margin-bottom: 5px;
}
#accordion .k-textbox {
    height: auto;
}
.k-dropdown, .k-dropdown .k-input, .k-datepicker, .k-dropdown-wrap, .k-widget.k-dropdown, .k-numeric-wrap, .k-picker-wrap, .k-numerictextbox, span.k-widget.k-textbox {
    height: 100%;
    max-height: 41px;
    box-sizing: border-box;
}
.k-dropdownlist , .k-numerictextbox, .k-datepicker, .k-datetimepicker, .k-textbox {
    height: 38px !important;
}


section.content > .container-fluid > div#gridData {
    margin-top: 0;
}
.k-grid {
    /* overflow: hidden; */
}
.k-toolbar > .row {
    width: 100%; 
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 0;
}
.k-toolbar  .os-content > .row {
    width: 100%; 
    display: inline-flex;
    flex-wrap: nowrap;
}
.accordion-header {
    margin-bottom: 0;
}
.accordion-item { 
    box-shadow: 0 0 2px 2px #ececec;
    margin-bottom: 10px;
    border-radius: 5px;
}
.accordion-body {
    padding: 13px 13px 9px;
    /* margin-bottom: 10px;  */
}
.accordion-body > .row {
    align-items: flex-end;
    margin-right: -7.5px;
    margin-left: -7.5px;
}
.accordion-body > .row [class^="col-"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.accordion-body > .row .form-group {
    margin-bottom: 0;
    /* height: 82px; */
}
.accordion-body > .row > div[class^="col-"] {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}
.accordion-body > .row div[class^="col-"]:has(span.k-datepicker) {
    max-width: 200px;
}
.accordion-body .form-group > label + span:not(.k-multiselect) {
    width: 100%;
    display: block;
    min-width: 130px;
    max-width: 300px;
}
.accordion-body .k-multiselect .k-input-values {
    flex-wrap: nowrap;
}
.k-toolbar .os-content .row > div[class^="col-"] > span { 
    display: block;
    max-width: 282px !important;
}
.nav-sidebar>.nav-item .nav-icon.fas {
    margin: auto !important;
    
    margin-right: 5px !important;
    
}
.os-theme-dark>.os-scrollbar-horizontal, .os-theme-light>.os-scrollbar-horizontal {
    height: 6px !important;
}
.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  height: 4px !important;
}
.k-toolbar .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
.k-toolbar .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
.menu-center .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
.menu-center .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { 
    background-color: #d1dce8 !important;
}
.k-toolbar .os-scrollbar-horizontal:hover > .os-scrollbar-track > .os-scrollbar-handle,
.k-toolbar .os-scrollbar-vertical:hover > .os-scrollbar-track > .os-scrollbar-handle,
.menu-center .os-scrollbar-horizontal:hover > .os-scrollbar-track > .os-scrollbar-handle,
.menu-center .os-scrollbar-vertical:hover > .os-scrollbar-track > .os-scrollbar-handle { 
    background-color: #b6cee7 !important;
} 
/* new tabs */
.ui-widget-content {
    border: 0;
    /* background: unset; */
    /* popup timeout logout mất bgc */
}
.menu-center {
    padding-bottom: 0;
    background-color: unset;
    background: unset;
    box-shadow: unset;
    padding-left: 0;
    padding-top: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #becbd9;
    position: relative;
    margin-top: -5px;
}
.menu-center .nav-item {
    border: 0 !important;
    background: transparent !important;
}
.menu-center .nav-link {
    border: 0;
    position: relative;
    padding: 10px 10px !important;
} 
.menu-center .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    height: 2px; 
    transform-origin: center center;
    background-color: #007bff;
    transition: transform 0.3s;
} 
ul.menu-center li.nav-item > .nav-link {
    text-decoration: none;
    padding-bottom: 7px;
    background: transparent;
    line-height: 1;
}

/* TreeList */
.bgRed {
    color: red;
}

.bgPurple {
    color: purple;
}

.bgYellow {
    color: yellow;
}

.bgOrange {
    color: orange;
}

.bgGreen {
    color: green;
}

.bgInfo {
    color: #5bc0de;
}

.bgBlue {
    color: #057efb
}

.bg-file {
    background-color: #f3f2f1 !important;
}

.treeViewTenNguoiNhan {
    font-size: 14px;
}

.treeViewTenPhongBanNguoiNhan {
    font-family: Arial;
    font-size: 14px;
    margin-left: 30px;
    color: #808080;
}

.treeViewNgayXuLy {
    padding-left: 30px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #222;
}

.treeViewYKien {
    white-space: pre-wrap;
    width: 400px;
    text-align: justify;
    color: #222;
    font-size: 14px;
}
.k-grid .k-grid-content table,
.k-grid .k-grid-header table {
    width: 100% !important;
    table-layout: fixed;
}
.btn.btn-outline.blue {
    border-color: #0360a9;
    color: #0360a9;
    background: none;
}

.btn.btn-outline.blue:hover, .btn.btn-outline.blue:active, .btn.btn-outline.blue:active:hover, .btn.btn-outline.blue:active:focus, .btn.btn-outline.blue:focus, .btn.btn-outline.blue.active {
    border-color: #3598dc;
    color: #FFFFFF;
    background-color: #3598dc;
}

.btn.btn-outline.yellow {
    border-color: #c49f47;
    color: #c49f47;
    background: none;
}

.btn.btn-outline.yellow:hover, .btn.btn-outline.yellow:active, .btn.btn-outline.yellow:active:hover, .btn.btn-outline.yellow:active:focus, .btn.btn-outline.yellow:focus, .btn.btn-outline.yellow.active {
    border-color: #c49f47;
    color: #ffffff;
    background-color: #c49f47;
}

.btn.btn-outline.red {
    border-color: #e7505a;
    color: #e7505a;
    background: none;
}

.btn.btn-outline.red:hover, .btn.btn-outline.red:active, .btn.btn-outline.red:active:hover, .btn.btn-outline.red:active:focus, .btn.btn-outline.red:focus, .btn.btn-outline.red.active {
    border-color: #e7505a;
    color: #ffffff;
    background-color: #e7505a;
}

.btn.btn-outline.green {
    border-color: #32c5d2;
    color: #32c5d2;
    background: none;
}

.btn.btn-outline.green:hover, .btn.btn-outline.green:active, .btn.btn-outline.green:active:hover, .btn.btn-outline.green:active:focus, .btn.btn-outline.green:focus, .btn.btn-outline.green.active {
    border-color: #32c5d2;
    color: #FFFFFF;
    background-color: #32c5d2;
}


/* ============================
   BUTTON OUTLINE SUCCESS – PRO
   ============================ */
.btn-outline-success {
    color: #1a8754;
    border: 2px solid #1a8754;
    background-color: transparent;
    font-weight: 600;
    border-radius: 10px;
    padding: 6px 18px;
    transition: all 0.25s ease;
    box-shadow: 0 0 0 rgba(26,135,84,0); /* Glow tắt mặc định */
}

/* Hover – tạo hiệu ứng sáng nhẹ và highlight viền */
.btn-outline-success:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1a8754, #0c5f38);
    border-color: #0c5f38;
    box-shadow: 0 6px 18px rgba(26,135,84,0.35);
    transform: translateY(-2px);
}

/* Khi nhấn – chìm nhẹ */
.btn-outline-success:active {
    background: linear-gradient(135deg, #0c5f38, #064d2a);
    border-color: #064d2a;
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Focus – viền sáng hỗ trợ accessibility */
.btn-outline-success:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(26,135,84,0.35);
}

/* Disabled */
.btn-outline-success.disabled,
.btn-outline-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: transparent;
    border-color: #93c9ae;
    color: #93c9ae;
    box-shadow: none;
    transform: none;
}



.btn-circle {
    border-radius: 30px;
}
.btn.btn-status {
    pointer-events: none;
    border-radius: 31px !important;
} 
/* project base */
.dropdown .dropbtn {
    color: var(--text-color) !important;
    font-weight: 500 !important;
    padding-left: 0;
}
.func-button {
    text-align: left !important;
    padding: 6px 7px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color) !important;
    font-family: 'Merriweather Sans', sans-serif !important;  
    display: inline-block;
}
.func-button:hover {
    color: #6F7A91;
}
.btn-func-xem i {
    color: var(--button-info);
}
.btn-func-sua i {
    color: var(--button-success);
}
.btn-func-xoa i {
    color: var(--button-danger);
}
.func-button i {
    margin-right: 5px !important;
} 
.accordion-header .btn, .card-header .btn {
    padding-left: 8px; 
    border-bottom: 1px solid #ececec;
    text-decoration: none;
    border-radius: 0;
}
.menuAction {
    background-color: unset !important;
}
.menuAction .k-menu-link{
    background-color: unset !important;
    color: #6F7A91 !important;
    transform: scale(1) !important;
}
.menuAction > .k-item {
    border-radius: 5px;
    height: 40px !important;
    display: flex;
    align-items: center;
}
.k-grid {
    /* height: auto !important; */
}
.k-grid-content-locked {
    /* height: 100% !important; */
}

.navbar-nav:last-child .nav-link
{
    padding: unset;
}
.sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .nav-link {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: baseline;
}
.sweet-alert.showSweetAlert.visible {
    max-width: 413px;
    margin: auto;
    max-width: 413px;
    margin: auto;
    background: var(--bg-color-white);
    padding: 19px;
    border-radius: 13px;
}

.sweet-alert.showSweetAlert.visible h3 {
    text-align: center;
    color: var(--text-color-header) !important;
}

.sweet-alert.showSweetAlert.visible .modal-footer {
    background: unset;
}


/* ----------------------------
   SCROLLBAR đẹp
   ---------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

ul.navbar-nav {
    padding-left: 19px;
}
/* ==========================================
   BEAUTIFUL NAVBAR AVATAR ICON
   ========================================== */

nav.main-header .nav-link img.img-circle {
    height: 46px;
    width: 44px;
    object-fit: cover;
    border-radius: 50%;
    padding: 2px;
    margin-left: 3px;
    margin-right: 5px;
    box-shadow: 0 6px 19px rgba(15, 23, 42, .12), inset 0 0 0 1px rgba(15, 23, 42, .08);

    transition: all 0.25s ease-in-out;
    border: 1px solid var(--border-color);
}
.media-body {
    padding-left: 8px;
}
.media > img {
    height: 50px;
}
a.dropdown-item
{
    cursor: pointer;
}
.img-size-31 {
    height: 28px;
    width: 31px;
    object-fit: cover;
    border-radius: 50%;
    padding: 2px;
    
    box-shadow: var(--shadow-soft);

    transition: all 0.25s ease-in-out;
    border: 1px solid var(--border-color);
}
ul.dropdown-menu-theme.d-block.d-md-none {
    display: flex;
    flex-direction: row;
    padding: 13px;
    margin: auto;
}

ul.dropdown-menu-theme.d-block.d-md-none::after {
    display: none;
}
   nav.main-header  .form-inline .input-group {
        width: auto;
        flex: 1;
    }

/* Hiệu ứng hover – sáng nhẹ, nổi khối */
nav.main-header .nav-link img.img-circle:hover {
    transform: scale(1.12) rotate(2deg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #60a5fa, #c084fc);
    cursor: pointer;
}

/* Khi click – tạo hiệu ứng nhấn */
nav.main-header .nav-link img.img-circle:active {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ===============================================
   CARD HEADER – SOFT UI STYLE (Tone Nhẹ Nhàng)
   =============================================== */
.card-primary:not(.card-outline)>.card-header {
    background-color: #f4f5f6;
}
.card-header {
    background: #fafafa; /* màu xám cực nhẹ */
    padding: 14px 20px;
    border-bottom: 1px solid #e9e9e9;
    border-radius: 10px 10px 0 0 !important;

    /* hiệu ứng nâng nhẹ */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 
                0 1px 2px rgba(0,0,0,0.04);
}

.card-header .card-title {
    margin: 0;
    padding: 0;
}
.card-primary:not(.card-outline)>.card-header a 
{
    
    color: #486dcf !important;
    font-size: 19px !important;
    font-weight: 600;
    padding: 13px 19px;
    font-family: 'Roboto Condensed';
}



.card-header .card-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: "Inter", "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;

    color: #4a4a4a; /* màu nhẹ, không đậm */
    text-decoration: none;

    padding: 4px 2px;
    transition: all 0.25s ease-in-out;
}

/* icon collapse mềm mại */
.card-header .card-title a:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 13px;
    margin-left: 10px;
    color: #9ca3af; /* màu xám nhạt */

    transition: transform 0.25s ease, color 0.25s ease;
}

/* mở / đóng accordion */
.card-header .card-title a[aria-expanded="false"]:after {
    transform: rotate(-90deg);
}

.card-header .card-title a[aria-expanded="true"]:after {
    transform: rotate(0deg);
}

/* hover – đổi màu nhẹ nhàng */
.card-header .card-title a:hover {
    color: #3b82f680; /* xanh nhẹ 50% opacity */
}

.card-header .card-title a:hover:after {
    color: #6b7280; /* icon đậm hơn chút */
}

/* click */
.card-header .card-title a:active {
    transform: scale(0.98);
}


.table>:not(caption)>*>*
{
    padding: unset;
}

/* //cau hinh form */
div#modalLoading form .modal-footer {
    display: flex;
    /* flex-grow: 1; */
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
div#modalLoading form .modal-footer>*:first-child {
    margin-right: auto;
}
.brand-link {
    text-decoration: none;
}
section.content > .container-fluid {
    padding: 0;
}
.k-grid td {
    padding: .5em .8em;
}
/* =========================
   PALETTE & BASE
   ========================= */
:root {
    --task-bg-page: var(--bg-color);
    --task-card-bg: #ffffff;
    --task-border: #e5e7f0;
    --task-accent: #6366f1; /* tím/xanh giống hình */
    --task-accent-soft: #eef2ff;
    --task-text-main: #0f172a;
    --task-text-muted: #6b7280;
}




/* Backdrop modal blur nhẹ */
.modal-backdrop.show {
    background-color: rgba(15, 23, 42, 0.26);
    backdrop-filter: blur(3px);
}

/* =========================
   DIALOG = CARD NEW TASK
   ========================= */
#modalLoading.modal-content {
  
  
    box-shadow: var(--shadow-soft);
   
    animation: taskModalIn .22s ease-out;
}

    /* Giới hạn chiều rộng giống card */
    #modalLoading.modal-content .forms-sample {
        
    }

/* =========================
   HEADER – giống “New Task”
   ========================= */ 


/* =========================
   KHU VỰC UPLOAD ẢNH
   ========================= */
#modalLoading .form-group:last-of-type {
    /* margin-top: 13px; */
}

/* sửa selector cho đúng class upload thực tế nếu khác */
#modalLoading .upload-wrapper,
#modalLoading .upload-area,
#modalLoading .file-upload-box {
    
    
    
    
    
}

/* =========================
   FOOTER & BUTTONS
   ========================= */
#modalLoading .modal-footer {
    border: none;
    background: var(--task-card-bg);
    
}






/* =========================
   ANIMATION
   ========================= */
@keyframes taskModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ==========================================
   POPUP WINDOW GLASS EFFECT
   (Không chỉnh input, dropdown, textbox…)
   ========================================== */

#popupWindowModal {
    background: transparent !important;
    padding: 0;
}

/* Khung glass chính */
#popupWindowModal .modal-content {
    position: relative;
    overflow: hidden;
    
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(148, 163, 184, 0.15);
    background-color: var(--bg-color-modal);
}

/* Gợn sóng nền trắng */
#popupWindowModal .modal-content::before {
    
    
}

@keyframes popupWave {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-20px, 12px, 0) scale(1.05); }
}

/* Header glass nhẹ */
#popupWindowModal .modal-header {
    /* background: linear-gradient(
        120deg,
        rgba(255,255,255,0.85),
        rgba(244,246,249,0.95)
    ); */
    background-color: var(--bg-color);
    backdrop-filter: blur(12px);
    /* border-bottom: 1px solid #e5e7eb; */
    border-bottom: 1px solid #eee;
    padding: 13px 16px 7px;
    padding-left: 30px;
    border-radius: 25px 25px 0 0;
}

/* Footer glass vừa phải */
#popupWindowModal .modal-footer {
    background: linear-gradient(
        180deg,
        rgba(250,250,250,0.92),
        rgba(244,246,249,0.95)
    );
    border-top: 1px solid rgba(255,255,255,0.5);
    border-radius: 0 0 13px 13px;
    padding-bottom: 13px;
}

ul.nav.nav-tabs {
    display: flex;
    gap: 6px;
    padding: 6px 0;
    background: var(--bg-color);
    /* border-radius: 12px; */
    /* border: 1px solid #e3e6eb; */
}

    /* TAB ITEM */
    ul.nav.nav-tabs .nav-item {
        margin: 0;
    }

    /* TAB BUTTON */
    ul.nav.nav-tabs .nav-link {
        position: relative;
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 600;
        font-size: 14px;
        color: #555;
        background: transparent;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 6px; 
    }
    .k-tabstrip-items .k-item {
        font-weight: 600;
        font-size: 17px;
        font-family: "Roboto", sans-serif;
    }
    .k-tabstrip-items {
        text-transform: unset;
    }

        /* HOVER */
        ul.nav.nav-tabs .nav-link:hover {
            color: #222;
            background: rgba(0, 0, 0, 0.04);
        }

        /* ACTIVE TAB */
        ul.nav.nav-tabs .nav-link.active {
            /* background: #ffffff; */
            color: var(--brand-color);
            text-decoration: none;
            /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.05); */
        }

            /* ACTIVE INDICATOR */
            ul.nav.nav-tabs .nav-link.active::after {
                content: "";
                position: absolute;
                bottom: -6px;
                left: 0%;
                right: 00%;
                height: 3px;
                /* background: linear-gradient(90deg, #f3b00a, #ffcb3c); */
                background: var(--brand-color);
                border-radius: 4px;
            }

        /* FOCUS (BỎ VIỀN ĐEN KHÓ CHỊU) */
        ul.nav.nav-tabs .nav-link:focus {
            outline: none;
            box-shadow: none;
        }

/* RESPONSIVE */
@media (max-width: 768px) {
    ul.nav.nav-tabs {
        flex-wrap: wrap;
    } 
}
/* =========================================
   KENDO TABSTRIP – STYLE CAO CẤP (SÁNG / PILL)
   Scope ưu tiên theo ul.k-reset.k-tabstrip-items
========================================= */

ul.k-reset.k-tabstrip-items .k-tabstrip-items,
ul.k-reset.k-tabstrip-items .k-reset.k-tabstrip-items {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--bg-color);
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

    /* Ẩn viền/line mặc định của Kendo */
    ul.k-reset.k-tabstrip-items .k-tabstrip-items:before,
    ul.k-reset.k-tabstrip-items .k-tabstrip-items:after {
        display: none !important;
        content: none !important;
    }

    /* TAB ITEM */
    ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item {
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

        /* TAB LINK */
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item > .k-link {
            position: relative;
            border-radius: 10px;
            padding: 10px 14px;
            font-weight: 700;
            font-size: 13px;
            color: #556070;
            background: transparent;
            border: 1px solid transparent;
            transition: all .22s ease;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        /* Hover */
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item:hover > .k-link {
            background: rgba(0, 0, 0, 0.04);
            color: #1f2a37;
        }

        /* Active item (k-state-active) */
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item.k-state-active > .k-link {
            background: #fff;
            color: #111827;
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 0 6px 16px rgba(0,0,0,0.10);
        }

            /* Indicator vàng dưới tab active */
            ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item.k-state-active > .k-link::after {
                content: "";
                position: absolute;
                left: 18%;
                right: 18%;
                bottom: -6px;
                height: 3px;
                border-radius: 6px;
                background: linear-gradient(90deg, #f3b00a, #ffd25a);
            }

        /* Khử viền đen focus (đặc biệt hay gặp) */
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item > .k-link:focus,
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item > .k-link:active,
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        /* Nếu Kendo render thêm class focus */
        ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item.k-state-focused > .k-link {
            box-shadow: none !important;
        }

    /* Loading icon nhỏ gọn hơn */
    ul.k-reset.k-tabstrip-items .k-tabstrip-items .k-loading.k-complete {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: .5;
    }
    .modal-body {
        max-height: calc(100vh - 124px);
    }
    #modalDanhSachNhanSu .modal-body {
        max-height: 100vh;
    }

/* Mobile tối ưu */
@media (max-width: 768px) {
    ul.k-reset.k-tabstrip-items .k-tabstrip-items > .k-item > .k-link {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}
/* =========================================
   TAB QUẢN LÝ DỰ ÁN – STYLE CHUYÊN NGHIỆP
========================================= */

#tabQuanLyDuAn {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--bg-color);
    border-radius: 12px;
    border: 1px solid #e3e6eb;
}

    /* Bỏ border mặc định bootstrap */
    #tabQuanLyDuAn.nav-tabs {
        border-bottom: none;
    }

    /* ITEM */
    #tabQuanLyDuAn .nav-item {
        margin: 0;
    }

    /* LINK */
    #tabQuanLyDuAn .nav-link {
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        color: #556070;
        background: transparent;
        transition: all 0.25s ease;
        text-decoration: none !important;
        position: relative;
        white-space: nowrap;
    }

        /* HOVER */
        #tabQuanLyDuAn .nav-link:hover {
            background: rgba(0, 0, 0, 0.04);
            color: #1f2a37;
        }

        /* ACTIVE */
        #tabQuanLyDuAn .nav-link.active {
            background: #ffffff;
            color: #111827;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
        }

            /* INDICATOR dưới tab active */
            #tabQuanLyDuAn .nav-link.active::after {
                content: "";
                position: absolute;
                bottom: -6px;
                left: 22%;
                right: 22%;
                height: 3px;
                border-radius: 6px;
                background: linear-gradient(90deg, #f3b00a, #ffd25a);
            }

        /* FOCUS – bỏ viền đen */
        #tabQuanLyDuAn .nav-link:focus {
            outline: none;
            box-shadow: none;
        }

/* MOBILE */
@media (max-width: 768px) {
    #tabQuanLyDuAn {
        flex-wrap: wrap;
    }

        #tabQuanLyDuAn .nav-link {
            padding: 8px 14px;
            font-size: 13px;
        }
} 
.k-dropdown .k-dropdown-wrap, .k-datepicker .k-picker-wrap, .k-dropdowntree .k-dropdown-wrap {
    border-color: var(--border-color) !important;
}
#modalLoading .k-textbox, #modalLoading .k-datepicker, #modalLoading .k-dropdownlist, 
#modalLoading .k-numerictextbox, #modalLoading .k-datetimepicker, #modalLoading .k-textarea, .k-multiselect,
#modalLoading .k-timepicker, #modalLoading .k-combobox, #modalLoading .k-autocomplete  
{
    background: #fff;
    border: 1px solid #d8e0ec;
    border-top-color: #d8e0ec;
} 
.form-control:focus {
    box-shadow: unset;
}

/* edit them material pacific */ 
.k-picker:not(.k-grid-pager .k-picker),
.k-numerictextbox,
.k-textarea,
.k-textbox:not(.k-grid-pager .k-textbox),
.k-multiselect, .k-datepicker,
.k-datetimepicker,
.k-timepicker,
.k-combobox {
    border: 1px solid var(--border-color);
    border-radius: 3px !important;
    color: #515a6d;
}
.k-input-solid:focus-within {
    border-color: #d8e0ec;
}
.k-list-filter {
    padding: 5px;
}
.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
    border-inline-start-color: inherit;
}
.k-grid td,
.k-grid-content-locked td {
    border-color: rgba(0, 0, 0, 0.05) !important;
}
.k-grid .k-grid-md td, .k-grid .k-grid-md .k-table-td, .k-grid-md td, .k-grid-md .k-table-td {
    padding: 8px 15px;
}
.k-grid td:has(span.k-widget, span.k-input, .k-picker) {
    padding: 8px 5px !important;
}
.k-grid .k-table-row.k-table-alt-row {
    /* background-color: whitesmoke; */
    background-color: #edf0f58f;
}
.k-grid-toolbar > .row > [class^="col-"] { 
    padding: 4px 5px;
}
.accordion-button {
    color: var(--brand-color);
    background-color:var(--bg-color);
    box-shadow: var(--shadow-soft);
}
.accordion-body {
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.k-grid .k-cell-inner>.k-link {
    justify-content: center;
}
.k-dropdownlist-popup .k-input-icon {
    width: 32px;
    height: 32px;
}
.k-grid-pager .k-input-solid, 
.k-grid-pager .k-picker-solid {
    border-top-color: transparent !important;
}
.modal-body .k-checkbox-label {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0 !important;
}
.form-check-input {
    position: relative;
    margin-left: 0;
    margin-top: -2px;
}
.modal-body .row > [class^="col-"]:has(label) {
    margin-bottom: 15px;
}
.modal-body .row label {
    margin-bottom: 6px;
}
.modal-body .row > [class^="col-"]:has(.form-group) {
    margin-bottom: 0px !important;
}

.modal-body label {
    font-size: 16px;
}
.dropdown-item.active, .dropdown-item:active
{
    background-color: var(--bg-color-dropdown-active);
    color: var(--text-color-dropdown-active);
}
.btn-outline-success.btn-status {
    background-color: #bae9df;
    color: #444;
    font-weight: 500 !important;
    border: none !important;
    height: 28px !important;
}
.btn-outline-danger.btn-status {
    background-color: #fae8e6;
    color: #444;
    font-weight: 500 !important;
    border: none !important;
}

.k-filter-row th, .k-grid-header-table th.k-header {
    color: #5d6268;
}
.k-grid-pager {
    border-top-color: rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.badge {
    background-color: #a5a3a3;
    color: #fff;
}
.nav-link.active .badge {
    background-color: #f86e15;
}
.modal-body ul.nav.nav-tabs .nav-link {
    font-size: 17px;
}
.modal-body ul.nav.nav-tabs li {
    border: none;
} 
.modal-grid {
    height: calc(80vh - 200px);
}
/* khung phải */
.navbar-right-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* nhóm nút cố định */
.navbar-fixed-actions {
    position: relative;
    z-index: 3;
    gap: 6px;
}

/* search */
.nav-search-item {
    position: relative;
}

/* overlay search */
.navbar-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: var(--rightWidth, 260px);

    display: none;
    align-items: center;
    padding: 0 10px;

    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    z-index: 2;
}

/* khi mở */
.navbar-search-overlay.active {
    display: flex;
}
    .brand-link .brand-image {
    
        border: 1px solid var(--bg-color-white);
    
    width: 31px;
    height: 31px;
    background: #f1f8ff;
    
    border-radius: 50%;
    object-fit: contain;
}
span.brand-text.font-weight-light {
    color: var(--color-brand-text);
    font-weight: 900 !important;
    font-family: var(--family-brand-text);
}
/* ===== Brand (logo + tên dự án) ===== */
.theme-edited-leftmenu .brand-link{
    display:flex;
    align-items:center;
    gap:12px;

    padding: 14px 14px;
    margin: 13px 14px 9px !important;

    border-radius: 16px;
    text-decoration: none;

    /* Glass subtle */
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* Hover “xịn” */
.theme-edited-leftmenu .brand-link:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.085);
    border-color: rgba(255,255,255,.22);
    box-shadow:
        0 14px 34px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.12);
}

/* Focus (tab keyboard) */
.theme-edited-leftmenu .brand-link:focus{
    outline: none;
    box-shadow:
        0 0 0 3px rgba(59,130,246,.35),
        0 14px 34px rgba(0,0,0,.30);
}

/* Ảnh logo */
.theme-edited-leftmenu .brand-link .brand-image{
    width: 42px;
    height: 42px;
    margin: 0 !important;

    border-radius: 999px; /* img-circle vẫn ok, nhưng set chắc */
    object-fit: cover;

    border: 2px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.10);

    box-shadow:
        0 8px 18px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.theme-edited-leftmenu .brand-link:hover .brand-image{
    transform: scale(1.03);
    border-color: rgba(255,255,255,.55);
    box-shadow:
        0 10px 22px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.20);
}

/* Tên dự án */
.theme-edited-leftmenu .brand-link .brand-text{
    display:block;
    line-height: 1.15;

    font-weight: 700 !important;
    letter-spacing: .2px;

    color:var(--text-color-bg-menu);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 153px; 
}

/* Nếu sidebar hẹp */
@media (max-width: 1024px){
    .theme-edited-leftmenu .brand-link .brand-text{ max-width: 140px; }
}

/* Nếu dùng sidebar-dark-primary, làm brand tách bạch hơn */
.theme-edited-leftmenu.sidebar-dark-primary .brand-link{
    background: rgba(255,255,255,.05);
}

.accordion-button > i.fa-angle-down { 
    transform: rotate(180deg); 
    transition: transform .2s ease-in;
}
.accordion-button.collapsed > i.fa-angle-down {
    transform: rotate(0deg); 
}
.tab-underline .nav-link {
    border: none !important;
    color: #555;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 13px;
    position: relative;
}
.tab-underline .nav-link.active {
    color: #007bff;
}
.tab-underline .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #007bff;
    border-radius: 2px;
} 
.k-column-title {
    line-height: 1.4;
} 
.k-pager-sizes .k-button {
    border-color: transparent;
}
.modal-body .k-grid-content-locked,
.modal-body .k-grid-content {
    /* max-height: calc(75vh - 210px); */
    min-height: 300px;
}
.layout-fixed .wrapper .sidebar {
    max-height: calc(100vh - 90px);
}
.k-toolbar.k-grid-toolbar,
.k-grid .k-grid-header {
    margin-left: 3px;
}
.k-grid .k-grid-container {
    margin-left: 3px; 
}
.phanQuyen-group button {
    margin-bottom: 5px;
}
.k-window .k-window-titlebar:has(+ .k-window-content iframe) {
    display: flex !important;
}
.k-window-titlebar {
    background: var(--brand-color) !important;
    padding: 8px 12px;
}
.k-window-title {
    font-size: 1.2em;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}
.k-window-titlebar-actions button {
    color: #ffff;
}
.nhansu-info-simple {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
}
.nhansu-info-simple > .simple-label {
    margin-right: 6px;
}
.fs-18 {
    font-size: 18px;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}


.phieu-header {
    width: 100%; 
}

.phieu-header-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start; 
} 
.phieu-col.left, .phieu-col.center {
    padding-top: 20px;
}
.phieu-col.left {
    padding-right: 20%;
}
.phieu-col.center .canh-giua {
    padding-right: 10%;
}
.chuky-wr {
    margin: 15px auto;
    padding: 0;
}
.chuky-name-wr {
    margin: 0 auto;
    padding: 0;
    font-size: 15px;
}
.so-phieu .k-textbox {
    background: transparent !important;
}  
.document-form-container {
    padding: 30px;
}

.theme-picker {
    position: relative;
}
.bgr-circle > a {
    transition: transform .2s ease;
}
.bgr-circle > a:hover {
    transform: scale(1.1);
}
.bgr-circle > a {
    width: 37px;
    height: 37px !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 19px rgba(15, 23, 42, .12), inset 0 0 0 1px rgba(15, 23, 42, .08);
    color: #334155;
    /* transition: all .2s ease; */
}
.theme-panel {
    position: absolute;
    top: 46px;
    right: 0;
    display: flex;
    gap: 8px;
    padding: 10px 11.3px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
    border: 1px solid rgba(15, 23, 42, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.96);
    transition: all .2s ease;
    z-index: 999;
}
.theme-item {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .15s ease;
}
.theme-picker.open .theme-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    top: 53px;
}
.navbar-right .nav-item:not(:last-child) {
    margin-right: 5px;
}
.search-wrapper {
    position: relative;
}
.navbar-search-block {
    min-width: 23vw;
    max-width: 450px;
    top: unset;
    left: unset;
    max-width: unset;
    bottom: 50%;
    transform: translateY(50%);
    right: 100%;
}
.navbar-search-block .form-inline {
    padding: 5px;
    background-color: #fff;
    border-radius: 37px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 19px rgba(15, 23, 42, .12), inset 0 0 0 1px rgba(15, 23, 42, .08);
    opacity: 0;
    transform: translateX(40%);
    transition: transform .25s ease, opacity .15s ease;
}
.navbar-search-block.navbar-search-open .form-inline {
    opacity: 1;
    transform: translateX(0);
} 
nav.main-header .navbar-search-block .input-group {
    border: 2px solid #e0f2f6;
    border-radius: 37px;
    overflow: hidden;
}
nav.main-header .navbar-search-block .input-group i {
    color:#5e79be;
}
.group-header-info {
    color: var(--text-color);
}
.accordion label {
    margin-bottom: 0;
}
td .dropdown-content::before {
    content: "";
    position: absolute;
    width: 55px;
    height: calc(100% + 6px);
    top: -6px;
    left: 0;  
}
.k-grid tr:not(.k-grouping-row):last-child td .dropdown-content::before {
    top: unset;
    bottom: -6px; 
}

/* grid product card */
.grid-productCard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.grid-productCard-wrapper .product-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 7px 14px;
}

.grid-productCard-wrapper .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-productCard-wrapper .product-name {
    font-weight: 600;
    font-size: 16px;
    color: #293850;
}

.grid-productCard-wrapper .product-code {
    font-size: 13px;
    color: var(--text-color);
    margin-top: 4px;
}

.grid-productCard-wrapper .product-quantity {
    font-size: 16px;
    font-weight: 600;
}

.grid-productCard-wrapper .quantity-current {
    color: #16a34a; /* green */
}

.grid-productCard-wrapper .quantity-total {
    color: #94a3b8;
}

.grid-productCard-wrapper .progress-bar {
    margin-top: 10px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.grid-productCard-wrapper .progress-fill {
    height: 100%;
    background: #22c55e;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* fix lỗi dropdownList popup ko wrap text và set width */
.k-child-animation-container {
    max-width: 30vw;
}
.k-list-filter {
    max-width: 100%;
}
.k-list-item-text {
    text-wrap: wrap;
    word-break: break-word;
}
.k-toolbar-button.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}
.k-toolbar-button.btn-success {
    background-color: var(--button-success) !important;
    border-color: var(--button-success) !important;
    color: #fff !important;
}
.k-toolbar-button.btn-danger {
    background-color: var(--button-danger) !important;
    border-color: var(--button-danger-border) !important;
    color: #fff !important;
}

/* PHIẾU ĐẢNG TABS */
.phieuDang-img-wrapper {
    margin-left: auto;
    width: 120px; 
    position: relative;
    top: -65px;
}
.phieuDang-img-wrapper img {
    width: auto;
    height: 150px;
    object-fit: cover; 
    max-width: 120px;
}
.phieu-block {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 20px;
    background-color: #fff;
}
.phieu-block-1 {
    display: flex; 
}
.phieu-anhDaiDien-wrapper {
    width: 200px;
}
.phieu-head-wrapper {
    flex: 1;
}
.phieu-block-1 .phieu-block-title {
    padding-right: 7%;
    padding-left: 7%;
    margin-right: 8%;
    height: fit-content;
}
.phieu-block-1 .phieu-block-title::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -6%;
    width: 2px;
    height: 80%;
    background-color: #e2e8f0;
}
.Ten-PhieuDangVien-img {
    width: 100%;
    height: 85%;
}
.phieu-head-wrapper .info-row > span:first-child {
    display: block;
    width: 45%;
    white-space: normal;
}
.phieu-head-wrapper .info-row > span:nth-child(2) {
    width: 55% !important;
}
.phieu-tabs-wrapper {
    margin-top: 20px;
}
.phieu-tabs-wrapper .info-row > span:first-child {
    display: block;
    width: 25%;
    white-space: normal;
}
.phieu-tabs-wrapper .info-row > span:nth-child(2) {
    width: 75% !important;
}
.phieu-tabs-wrapper .info-row.indent-1-cell > span:first-child {
    /* width: calc(25% - 21px);  */
}
.phieu-tabs-wrapper .info-row.indent-1-cell > span:nth-child(2) {
    /* width: calc(75% + 21px) !important; */
} 
.phieu-tabs-wrapper .col-md-12 .info-row.row-title > span {
    width: unset;
}
.phieu-block-title {
    margin-top: 5px !important;
}


/* chart */
.chart-title {
    color: var(--color-brand-text);
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
}
@media (max-width: 991px) {

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

@media (max-width: 768px) {

    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 34px;
    }
    .main-header .navbar-nav .nav-item.theme-picker {
        display: none !important;
    }
    .phieu-tabs-wrapper .info-row > span:first-child { 
        width: 100%; 
    }
    .phieu-tabs-wrapper .info-row > span:nth-child(2) {
        width: 100% !important;
    }
    /* .modal-grid.k-grid {
        margin-right: 15px !important;
        margin-left: 15px !important;
    } */
}