/* Liên kết đến Google Fonts */


/* Import phông chữ từ Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@font-face {
    font-family: UTMBebas;
    src: url(/fonts/UTMBebas.ttf) format('truetype')
}

:root {
    --background: #f9f9f9;
    --accent-primary: #0e6dbd;
    --accent-secondary: #0e6dbd;
    --link-foreground: #0e6dbd;
    --link-foreground-hover: #00376b;
    --link-underline-background: var(--link-foreground);
    --border-background: #ccc;
    --header-background: var(--background);
    --footer-background: var(--background);
    --button-primary-background: var(--accent-primary);
    --button-primary-foreground: var(--white);
    --button-secondary-background: #eaeaea;
    --button-secondary-foreground: var(--foreground);
    --button-secondary-hover: #e0e0e0;
    --button-secondary-border: rgba(0, 0, 0, 0.15);
    --icon-button-hover-background: rgba(0, 0, 0, 0.06);
    --navbar-border: var(--border-background);
    --color-tim: #714b67;
    --color-vang: #FD7B38;
    --mau-chinh: var(--link-foreground);
    --mau-avatar-text: #A6A6A6;
    --mau-bg: #D1D1D1;
    --mau-title-chon: #F86568;
    --mau-border: var(--border-background);
    --mau-breadcrum: #2d78ba;
    --mau-slidebar: #f4f6f9;
    --mau-slidebar-text: #A6A6A6;
    --mau-navbar: #A6A6A6;
    --bg-color: var(--background);
    --mau-seleted: #bce9b9;
    --mau-seleted-1: #f4f6f9;
    --mau-k-link: #525967;
    --accent-color: #F4C131;
    --background-color: #f4f6f9;
    --navbar-color: #003141;
    --text-light: #777;
    --hover-color: #41B1E1;
    --button-primary: #3567c3;
    --button-secondary: #C1C1C1;
    --brand-color: #F4C131;
    --footer-bg: #1F3141;
    --footer-text: #C1C1C1;
    --card-background: rgba(0, 0, 0, 0.01);
    --primary-color: #FAC404;
    --secondary-color: #41B1E1;
    --selected-color: #3151B1;
    /* --text-color: #515967; */
    --text-color: #697492;
    --border-color: rgba(0, 0, 0, 0.05);
    --border-color-1: #e6e6e6;
    --row-even-bg: #faf9f8;
    --row-odd-bg: #FFFFFF;
    --pager-bg: #C1C1C1;
    --navbar-bg: #0e6dbd;
    --status-new: #41B1E1;
    --status-assigned: #41B119;
    --status-in-progress: #3151B1;
    --status-completed: #3567c3;
    --status-pending-approval: #F4C131;
    --status-error: #E45153;
    --status-overdue: #C14141;
    --button-primary-bg: #3567c3;
    --button-primary-hover: #3151B1;
    --button-secondary-bg: #41B1E1;
    --button-secondary-hover: #3191C1;
    --nav-link-active: #E45252;
    --nav-link-active-hover: #C14141;
    --nav-link-active-text: #FFFFFF;
    --card-hover-background: rgba(0, 0, 0, 0.08);
    --card-border: rgba(0, 0, 0, 0.10);
    --card-border-active: rgba(0, 0, 0, 0.2);
    --header-foreground: #242424;
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --color-primary: #0078D4;
    --color-success: #00bc8c;
    --color-warning: #FFB900;
    --color-danger: #D13438;
    --color-info: #0178D4;
    --color-light: #F3F2F1;
    --color-dark: #323130;
    --color-title: #496dd0;
    --mau-title: var(--color-title);
    --mau-title-1: #e45252;
    --border-color-soft: rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 0 2px 2px #ececec !important;
    --bg-soft: var(--background-color);
    --bs-font-body: 'Open Sans', sans-serif;
    --bs-font-body1: 'Roboto Condensed', sans-serif;
    --bs-font-input1: 'Roboto Condensed', sans-serif;
    --bs-font-size: 17px;
    --bs-bg-toolbar: #fafafa;
    --bs-bg-menu-left: #0f1a34;
    --bs-bg-menu-left-second: #1B2E4C;
    --bs-bg-section: var(--background);
    --bs-color-input: #6F7A91;
    --min-width: 49px;
    --max-width: 68px;
}

body {
    background-color: var(--background-color);
    margin: 0;
    color: var(--text-color);
    /* -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Open Sans', sans-serif !important;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    /* font-family: 'Merriweather Sans',sans-serif !important; */
    font-size: 15.3px !important;
    line-height: 19px;
    color: #48505F;
    font-weight: 400;
    font-style: normal;
    /* font-family: 'Roboto', sans-serif !important; */
}


/* button */

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    text-align: left;
}

.btn:not(td .btn,
.input-group-append .btn) {
    white-space: nowrap;
    font-size: 15.9px;
    padding: 8px 21px;
    border-radius: 26px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    max-height: 38px;
}

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

button.btn.btn-danger.btn-square.form-control.space {
    min-width: 134px;
}

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

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

.main-footer .section-footer-right a[data-toggle="collapse"]:hover {
    transform: scale(1) !important;
    opacity: 0.86;
}

.btn-primary,button.confirm.btn.btn-success.btn-class-confirm-0 {
    color: #fff;
    background-color: #007bff !important;
    border-color: #007bff;
    box-shadow: none;
}

.btn-primary:hover,button.confirm.btn.btn-success.btn-class-confirm-0:hover {
    color: #fff;
    background-color: #0069d9 !important;
    border-color: #0062cc;
}

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

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

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

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

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

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

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

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

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

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

.paddingWindow {
    padding: 0px !important;
    padding-bottom: 39px;
}

label {
    color: var(--text-color);
}

button.close {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

button.close:hover {
    opacity: 1;
}

button.close>span {
    color: var(--red) !important;
    font-size: 41px;
    font-weight: 900;
    transition: transform 0.3s ease;
    display: inline-block;
}

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

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

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

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

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

.divTextSearch {
    display: flex !important;
}

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

.topWindowNormal {
    top: 1px !important;
}

.topWindowFull {
    top: 0px !important;
}

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

.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;
    min-width: 400px !important;
    padding: 15px 25px 0;
}

.k-window-content {
    padding: 0px;
    overflow-y: hidden !important;
    overflow-x: auto;
    min-width: 400px !important;
}

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

.k-grid-content,
.k-grid-content-locked,
.k-grid-norecords {
    transition: height .2s ease;
}


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

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


/* ======= */

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

.k-grid tr td {
    border-top-width: 0px !important;
    border-bottom-width: 1px !important;
    border-right-width: 1px !important;
    color: var(--text-color);
}

.k-grid tr th {
    border-right-width: 1px !important;
}

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

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

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

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

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

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

.content-header {
    padding: 1px 4px;
    padding-top: 13px;
    background-color: var(--bs-bg-section);
}

.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: 10060 !important;
    border-radius: .3rem !important;
    background: #f5f6f9;
}
.modal-body h3 {
    background: #f9f9f9;
    border-radius: 19px;
    padding: 31px;
}
.k-window-titlebar {
    display: none !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: #f8f9fa;
}


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


img.hinhChup + p.mt-2.fw-semibold {
    font-size: 41px;
    font-family: 'UTMBebas', sans-serif;
}

.text-start  p.fw-bold.fs-4.mb-0 {
    text-align: center;
    font-size: 26px !important;
    
    font-weight: 800;
    color: var(--text-color);
    font-family: 'Open Sans' , sans-serif;
}
.hinhChup {
    width: 100%;
    max-height: calc(100vh - 341px);
    border: 3px solid var(--border-color);
    box-shadow: var(--shadow-soft) !important;
}
/* CLASS DÙNG CHO MÀN HÌNH CHẤM CÔNG END*/


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


/* LÀM MỜ INPUT KENDO KHI Ở TRẠNG THÁI READONLY (MÀN HÌNH NHẬT LỆNH) */

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

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

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


/* ===== phieu can==== */

#frmPhieuDieuVan .modal-header {
    padding-top: unset;
    padding-bottom: unset;
}

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

.table-border,
th.th-border:not(.colTenKho,
.colDiemChatTaiDoTai),
.table-border td.td-border:not(.colTenKho,
.colDiemChatTaiDoTai) {
    border: 1px solid rgba(0, 0, 0, .125) !important;
    padding: 1px !important;
}

.table-border,
th.th-border.colTenKho,
th.th-border.colDiemChatTaiDoTai,
th.th-border.colDonViTinh,
.table-border td.td-border.colTenKho,
.table-border td.td-border.colDonViTinh,
.table-border td.td-border.colDiemChatTaiDoTai {
    border: 1px solid rgba(0, 0, 0, .125) !important;
}

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

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

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

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

.k-dropdown-wrap .k-input,
.k-numeric-wrap .k-input,
.k-picker-wrap .k-input {
    /* border: 1px solid var(--border-color-soft) !important; */
}
.k-autocomplete, .k-dropdown-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-picker-wrap.k-state-default{
    border-color: var(--border-color-1);
}
.form-control:focus {
    border: unset;
}

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

div#divFilter-body::-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: calc(70%);
    right: 19px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 35px;
    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);
    border-radius: 50%;
    /* 0 2px 6px rgba(0, 0, 0, 0.3);  Thêm bóng nhẹ */
}

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

#webnhatlenh {
    position: fixed;
    top: calc(70% + 90px);
    right: 19px;
    height: 35px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 35px;
    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);
    border-radius: 50%;
    /* Thêm bóng nhẹ */
}

#websiteImage {
    position: fixed;
    top: calc(70% + 45px);
    right: 19px;
    height: 35px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 1050;
    opacity: 0.86;
    width: 35px;
    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);
    border-radius: 50%;
    /* Thêm bóng nhẹ */
}

@media (max-width: 991px) {
    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 39px;
    }
}

@media (max-width: 768px) {
    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 34px;
    }
}


/* Hiệu ứng hover cho máy tính */

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


/* Hiệu ứng hover cho điện thoại */

@media (max-width: 1133px) {
    #joinZaloGroup,
    #websiteImage,
    #webgiaonhan,
    #webnhatlenh {
        width: 45px;
        /* Mở rộng kích thước cho điện thoại */
    }
    #joinZaloGroup:hover,
    #websiteImage:hover,
    #webgiaonhan:hover,
    #webnhatlenh:hover {
        transform: scale(1.3);
        /* Phóng to mạnh hơn trên điện thoại */
        opacity: 0.8;
        /* Mờ nhẹ khi hover */
        box-shadow: var(--shadow-soft);
        /* Bóng đổ mạnh hơn trên điện thoại */
    }
}

.colDanhMuc,
.colTenKho,
.colDiemChatTaiDoTai,
.colDiemGiua,
.colThoiDiemQuaCan,
.colGhiChu {
    font-family: var(--bs-font-input1);
    text-indent: 3px;
}

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

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

.lblRead,
.colTenKho span[class="k-input"],
.colTenKho input[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;
}

.k-combobox .k-dropdown-wrap .k-input { 
    max-height: 37px;
    height: 100%;
    color: var(--red) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    font-family: 'Roboto Condensed', sans-serif !important; 
    text-indent: 3px;
}

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;
} 
.tbNhapXuat .k-combobox-clearable .k-input {
    padding-right: 3px;
}
.tbNhapXuat .k-combobox>.k-dropdown-wrap>.k-clear-value {
    right: 30px;
}
.tbNhapXuat .td-border-boc .lblRead {
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
}

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

.colDonViTinh {
    font-family: var(--bs-font-input1);
}

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

.XeVanChuyen {
    min-width: 149px;
}

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


/* Hiệu ứng mượt mà khi phần tử được tải lên */

@keyframes fadeInUp {
    0% {
        opacity: 0.68;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Áp dụng hiệu ứng fade-in khi phần tử được tải lên */

.XeVanChuyen {
    animation: fadeInUp 1s ease-out forwards;
    /* Thêm hiệu ứng fade-in khi phần tử xuất hiện */
}


/* Khi hover vào phần tử */

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

.colKhoiLuongThan input[readonly] {
    opacity: 1 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: var(--bs-font-size);
    font-weight: 500 !important;
}

.main-footer {
    border-top: 1px solid var(--border-color-soft);
    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;
}

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

.card-header {
    background-color: inherit;
    border-bottom: 1px solid var(--border-color-soft);
    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: 35px;
}

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


/* Thanh kéo (thumb) */

::-webkit-scrollbar-thumb {
    background: #e5e5e5;
    /* Màu thanh kéo */
    /*border-radius: 10px;*/
    border: 0px solid #e5e5e5;
    /* Khoảng đệm giữa thumb và track */
    border-radius: 3px !important;
    background: #e5e5e5 !important;
    opacity: .1;
}

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


/* Màu nền thanh scrollbar */

::-webkit-scrollbar-track {
    background: #eee;
    background-color: #f9f9f9;
    /*background-color: gray;*/
    /* Màu nền nhạt */
    border-radius: 11.3px;
}


/* table grid */


/* Dòng chẵn */

.k-grid tr:nth-child(even) {
    /*background-color: #f9f9f9;*/
    /* 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: #fff;
    /* 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: #ccc;
    /* 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(--background-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: 1px 1px;
    height: 49px;
    background: transparent;
}


/* #frmPhieuDieuVan */


/* ====frMauPhieuVanChuyen */

form#frmPhieuDieuVan .modal-header h5.modal-title,
form#frMauPhieuVanChuyen .modal-header h5.modal-title {
    position: fixed;
    left: 15.9px;
    top: 13px;
    z-index: 1050;
    opacity: 0.85;
    padding: 4px 13px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    pointer-events: none;
}

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

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

#modalLoading form#frmMauPhieuVanChuyen .modal-footer {}

#frmMauPhieuVanChuyen h5.modal-title {
    /* height: 19px !important; */
    margin: unset;
    padding: unset;
    /* font-size: 15.9px !important; */
}

#frmMauPhieuVanChuyen .modal-header {
    /* padding: 4px 13px; */
    margin-bottom: 1px;
}

form#frMauPhieuVanChuyen .modal-header h5.modal-title {
    font-size: 13px !important;
}

form#frMauPhieuVanChuyen h5.modal-title {
    font-size: 13px !important;
}

#frmMauPhieuVanChuyen h5.modal-title {
    height: 19px !important;
    margin: unset;
    padding: unset;
    font-size: 15.9px !important;
}

#frmMauPhieuVanChuyen .modal-header {
    padding: 4px 13px;
    margin-bottom: 1px;
}

#frmMauPhieuVanChuyen .modal-footer.justify-content-between {
    padding-bottom: 1px;
}

#modalLoading form#frmMauPhieuVanChuyen {
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
    padding: 19px;
}


/* ======ket thuc cau hinh frmMauPhieuVanChuyen */


/* 
.btn-success {
    color: #fff;
    background-color: var(--color-success);
    border-color: var(--color-success);
    box-shadow: none;
}

.btn-success:hover {
    color: #fff;
    background-color: #08b1cf;
    border-color: #08b1cf;
    box-shadow: none;
} */

.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: 15.3px;
}
.breadcrumb .breadcrumb-item > a {
    font-size: 15.3px;
}
.breadcrumb-item+.breadcrumb-item {
    font-family: 'Merriweather Sans', sans-serif;
}

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


/* 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: 5px;
    padding-left: 10px !important;
    border-radius: 3px;
    transition: transform 0.3s ease !important;
}
ul.nav-treeview li.nav-item>a:hover {
    transform: translateX(5px);
}

#idpagebodywrapper>section.content {
    padding: 13px !important;
    padding-top: 1px !important;
    line-height: 34px;
    background: var(--bs-bg-section);
}

.content-header h3 {
    color: #2877c6 !important;
    font-size: 20px;
    font-weight: 600;
    padding-left: 12px;
    font-family: 'Merriweather Sans';
}

.modal-body {
    padding: 27px;
}


/* sinh nhat */

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

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

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

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

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


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

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

.main-footer {
    height: 62px;
}

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

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

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

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

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

td.td-border.colKhoiLuongThan {
    text-align: center;
}

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

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


/* tr.k-master-row td:nth-child(3) a {
    flex: 0 1 auto;
} */

.dropdown-menu-lg .dropdown-item {
    padding: 10px 19px;
}
.dropdown-menu-lg .dropdown-item:not(:first-child) {
    padding: 7px 19px;
}

.k-textbox {
    /* padding: 9px 13px; */
    font-size: 19px !important;
}


/*.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: 900;
    text-decoration: underline;
    font-size: 19px;
    font-family: 'Roboto Condensed', sans-serif;
    background: transparent !important;
    border: 1px solid var(--border-color);
    border-radius: 49% !important;
}

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

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

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

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

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

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

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

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

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

table#\#tbNhapXuat tr td.colDiemChatTaiDoTai {
    /* font-family: UTMBebas; */
    font-family: 'Roboto Condensed', sans-serif;
}

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

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

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


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

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


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


/* Khi hover vào các phần tử không có readonly */

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


/* Khi focus vào các phần tử không có readonly */

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


/* Định dạng khi phần tử không có readonly và hover */

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

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

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

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

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

legend.w-auto {
    color: var(--color-title);
    font-weight: 600;
    font-size: 25px;
    font-family: 'Roboto Condensed', sans-serif;
}
.modal-body fieldset legend {
    font-size: 23px;
}
fieldset.rounded {
    margin-top: 19px;
}

.modal-body h5 {
    margin-top: 10px;
    color: var(--text-color);
    font-weight: 700;
    font-size: 16px;
    font-family: 'Merriweather Sans';
}

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

.modal-body h6 {
    margin-top: 19px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 15.9px;
    font-family: 'Merriweather Sans';
}
.modal-body fieldset legend {
    margin-bottom: 0;
}
#modalLoading>form>.modal-header:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    padding-left: 1px;
    position: relative;
}

#modalLoading>form>.modal-header:first-child .close {
    position: absolute;
    right: 19px;
    top: 66%;
    transform: translateY(-46%);
    z-index: 1;
} 
#modalLoading>form>.modal-header:first-child>.modal-title {
    max-width: calc(100% - 131px);
    /* 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: 25px;
    overflow: auto;
    font-weight: 600;
    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;
}


/* 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 */
    padding-bottom: 4px;
    border: unset;
}


/* 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, .text-search { 
    height: 38px; 
    border-radius: unset !important;
}
input#TextSearch + .input-group-append,
.text-search + .input-group-append {
    height: 38px; 
}

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

.modal-body {
    padding: 1px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#gridData .k-grid-content td,
.k-grid-content-locked td,
.k-grid-header th {
    min-height: 62px !important;
}

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

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

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

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

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

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

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


/* # thong bao nhat lenh */


/* CSS cho các input, textarea, dropdown, numerictextbox và datetimepicker khi readonly */


/* Định dạng chung cho các phần tử khi readonly */

.k-textbox input[readonly],
.k-numerictextbox input[readonly],
.k-datepicker input[readonly],
.k-dropdown[aria-readonly=true] .k-dropdown-wrap,
.k-datetimepicker input[readonly] {
    /* Nền sáng nhẹ, dễ nhìn */
    /* Đổ bóng nhẹ cho phần tử */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển trạng thái mượt mà */
}


/* Hiệu ứng khi phần tử được focus */

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


/* Hiệu ứng khi hover vào các phần tử */

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


/* Hiệu ứng cho dropdown khi readonly */

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


/* Khi focus vào dropdown */

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


/* Hiệu ứng cho numerictextbox khi readonly */

.k-numerictextbox input[readonly] {
    background-color: #f7fafc !important;
    /* Nền sáng nhẹ */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Đổ bóng nhẹ */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển trạng thái */
}


/* Hiệu ứng cho datetimepicker khi readonly */

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


/* Hiệu ứng khi phần tử readonly được hover */

.k-textbox input[readonly]:hover,
.k-numerictextbox input[readonly]:hover,
.k-datepicker input[readonly]:hover,
.k-dropdown[aria-readonly=true] .k-dropdown-wrap:hover,
.k-datetimepicker input[readonly]:hover {
    background-color: #e6f1e1 !important;
    /* Nền sáng khi hover */
}


/* Hiệu ứng khi phần tử readonly có focus */

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



/* #===cau hinh menu==== */


/* Định dạng ban đầu cho .os-content */

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


/* Khi hover vào .os-content */

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


/* ====thanh tim kiem=== */

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

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

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

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

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

.col-md-6.col-lg-6.col-xl-6 .input-group,
.card-body-group .input-group {
    display: flex;
    /*max-width: 191px;*/
    /* Đảm bảo chiều rộng của input-group không vượt quá 191px */
    /* margin-left: 10px; */
    /* 1 input group margin-left 10 làm lệch form */
    /* 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-header {
    padding: 5px 1px !important;
}

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


/* ====con dau=== */

.ten-cong-ty {
    white-space: nowrap;
    line-height: 27px;
}

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

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

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

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

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

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

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

.canh-giua-tieu-de {
    font-weight: bold;
    white-space: nowrap;
    font-size: 25px;
    padding-left: 19px;
    font-family: 'Roboto Condensed', sans-serif;
}

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

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

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

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

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


/* ====== */


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

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

/* Thiết lập cho phần tử d-flex để không bị rớt xuống dòng */

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


/* Thiết lập cho input-group trong d-flex */

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


/* Thêm một chút style cho các button bên trong .d-flex */

.d-flex-wrap a {
    white-space: nowrap;
    /* Đảm bảo các button không bị xuống dòng */
}


/* Nếu bạn muốn các phần tử button giữ đúng thứ tự nhưng vẫn có thể cuộn khi thiếu không gian */

.d-flex-nowrap {
    flex-wrap: nowrap;
    /* Đảm bảo các phần tử bên trong không xuống dòng */
    display: flex;
}

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

.d-flex.ho-ten {
    gap: 5px;
    align-items: baseline;
}

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

.d-flex.bien-so {
    gap: 4px;
    align-items: baseline;
}

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

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


/* ===== */

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

div#divPhieuXuatContent .k-dropdown .k-input,
div#divPhieuXuatContent .k-dropdown>*,
div#divPhieuXuatContent .k-dropdown .k-state-focused .k-input,
div#divPhieuXuatContent .k-menu .k-popup,
input#ThongBaoGiaoThanSo {
    font-size: 15.9px !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-combobox .k-input,
table#\#tbNhapXuat .k-combobox>*,
table#\#tbNhapXuat .k-combobox .k-state-focused .k-input {
    color: var(--red) !important;
    font-size: 18px !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: #e6e6e6;
    color: #999999;
    font-family: inherit;
    background-color: #fff;
    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 {
    background-color: var(--bs-bg-toolbar);
}
.k-toolbar {
    background-color: #fff;
}


/* Viền tổng thể của grid */

.k-grid {
    border: 1px solid var(--border-color-soft) !important;
    border-radius: 5px;
    box-shadow: var(--shadow-soft);
    background-color: #fff;
    height: auto !important;
}

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


/* Header */

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


/* Cell thường */

.k-grid td {
    border-color: var(--border-color-soft);
}


/* Hover row */


/* 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-soft);
    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-soft) !important;
    border-right-color: var(--border-color-soft) !important;
}

.k-grid-footer,
.k-grid-footer td,
.k-grid-header,
.k-grid-header .k-header {
    background-color: #fff;
}


/* Bo góc và màu viền cho pager */

.k-pager-wrap {
    border-top: 1px solid var(--border-color-soft);
    padding: 8px 13px;
}

.k-filter-row th,
.k-grid-header th.k-header,
.k-grid-header th.k-header .k-link {
    color: #5d6268;
}


/* ===footer */

.main-footer {
    border-top: 0px 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;
}

.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: 5px;
    padding: 13px;
    /* font-size: 18px;
    border-radius: 5px;
    color: #fff;
    background: #3f6792;
    padding: 13px;
    border: 1px solid var(--border-color-soft); */
}

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

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

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

ul.popup-message-list>li {
    border-bottom: 0;
    background: #F9F9F9;
    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;
    /* Giới hạn chiều rộng input */
    margin: 0 4px;
    /* Cách lề để dễ nhìn */
    height: 38px;
}

div#idmessagerror .modal-header .btn {
    border-radius: 8px !important;
}

#gridData tbody th,
#gridData tbody td {
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
}

#gridData thead th {
    white-space: nowrap;
    /* font-family: "Roboto", sans-serif !important; */
    background: inherit;
}

.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 ==== */ 
.img-size-41 {
    width: 41px;
}
nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link>img {
    padding: 1px !important;
    margin: 1px !important;
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
}

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 img.img-circle {
    height: 41px;
    width: 41px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition: all 0.25s ease-in-out;
    border: 1px solid var(--border-color);
    padding: 2px;
}
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;
}
.main-header .navbar-nav .nav-item {
    display: flex !important;
    align-items: center;
}
nav.main-header ul.navbar-nav:last-child>li>a.nav-link {
    padding: 8px 10px;
    height: auto;
    line-height: 1;
}
nav.main-header ul.navbar-nav:last-child>li>a.nav-link>i {
    font-size: 20px;
    padding-top: 4px;
    /* padding-left: 15px; */
    color: var(--color-title);  
}

li.nav-item.load-nhat-ky>a>i {    
}
nav.main-header ul.navbar-nav:last-child>li>a.nav-link>i:hover {
    color: #ff5370;
} 

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

input#TextSearch {
    border-radius: unset;
    min-width: 13px;
    border: 1px solid var(--border-color-soft) !important; 
}

.k-combobox,
.k-combobox .k-input,
.k-datepicker,
.k-widget .k-input,
.k-combobox>*,
.k-datepicker .k-input,
.k-datetimepicker,
.k-datetimepicker .k-input,
.k-timepicker,
.k-timepicker .k-input {
    font-family: "Roboto", sans-serif;
    font-size: 15.9px;
    /* color: var(--bs-color-input) !important; */
    color: var(--text-color) !important;
    font-weight: 500;
}
input#TextSearch, .text-search {
    font-family: "Roboto", sans-serif;
    font-size: 14.9px;
    color: var(--text-color) !important;
    font-weight: 400;
}

.nav-sidebar .nav-link p {
    display: inline;
    margin: 0;
    white-space: normal;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

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


/* ====tien ich */

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

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

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

form#frmChangePassword input {
    height: 41px;
}


/* ======tbNhapXuat */

#tbNhapXuat tbody th,
#gridData tbody td {
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 5px solid #fff !important;
    color: #515967;
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
}

#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 #F9F9F9 !important;
    border-bottom: 1px solid #F9F9F9 !important;
}
.k-grid td .btn:not(.btn-flat) {
    width: 36px;
    height: 34px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.k-grid td .btn i {
    margin-right: 0;
}
.main-footer .card-body-group {
    padding-top: unset;
    align-items: baseline;
}

#modalLoading form {
    /* padding: 15px 27px; */
}

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

.dropdown-item {
    font-weight: 400;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    color: #515967;
}


/* Footer chính */


/* Phieu dien van  */

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

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


/* Không cho phần tử con co lại hoặc xuống dòng */

#frmPhieuDieuVan .modal-footer .action-group>* {
    white-space: nowrap;
    flex-shrink: 0;
}


/* Tùy chọn: scrollbar mượt */

#frmPhieuDieuVan .modal-footer::-webkit-scrollbar,
#frmPhieuDieuVan .modal-footer .action-group::-webkit-scrollbar {
    height: 6px;
}

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

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

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

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

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

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

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

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

table#\#tbNhapXuat tr:first-child td.td-border {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 15.9px !important;
}

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


/* Khung giữa toàn màn hình */

.wrapper-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: calc(100vw - 39px);
    background-color: #f5f5f5;
    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 - 178px);
}

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>div.text-right {
    justify-content: flex-end;
}
#divFilter label {
    margin-bottom: 0;
}
#divFilter .card-footer {
    padding-left: unset;
    padding-right: unset;
    padding-bottom: unset;
    margin-top: unset;
    gap: 4px;
    background: #f4f6f9 !important;
    width: 100%;
    margin: unset !important;
}

div#accordion_child {
    background: #f9f9f9;
    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;
} 

#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(--background-color);
    border: 1px solid var(--border-color-soft);
    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-soft);
    background-color: #fcfcfc;
    border-color: var(--border-color-soft);
    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; 
    padding: unset !important;
    background: #f4f6f9;
}

#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;
    font-weight: 600;
    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;
}


div#gridData {
    margin-top: 8px;
    border-top: 1px !important;
}

.commentBox {
    position: fixed;
    /* Đặt vị trí của bảng comment cố định */
    top: 50%;
    /* Căn giữa theo chiều dọc */
    left: 50%;
    /* Căn giữa theo chiều ngang */
    transform: translate(-50%, -50%);
    /* Dịch chuyển bảng comment để hoàn toàn căn giữa */
    z-index: 9999;
    /* Đảm bảo rằng bảng comment nằm trên các phần tử khác */
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 6px;
    width: 413px;
    /* Bạn có thể điều chỉnh kích thước popup */
    max-width: calc(100vw - 68px);
    display: none;
    /* Ẩn bảng comment khi chưa kích hoạt */
    border-radius: 5px;
    /* Thêm một chút bo góc cho popup */
    height: 668px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    /* Hiệu ứng cho phần tử khi xuất hiện */
    opacity: 0;
    /* Ban đầu độ mờ là 0 */
    transform: translate(-50%, -50%) scale(0.8);
    /* Bắt đầu với kích thước nhỏ */
    animation: fadeInScaleUp 0.5s ease-out forwards;
    /* Áp dụng animation khi xuất hiện */
}

.commentOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    /* Màu nền mờ */
    z-index: 9994;
    /* Thấp hơn .commentBox để nằm phía sau */
}

.commentBox .card {
    position: relative;
    overflow: hidden;
}

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

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

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

@keyframes fadeInScaleUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.card.card-comment.commentBox .card-header {
    padding: 14px 13px !important;
    font-weight: 900;
    position: static;
}

.card.card-comment.commentBox {
    line-height: 25px;
    padding-top: unset;
}

.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: #F9F9F9;
    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: #F9F9F9;
    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;
    background: #fff !important;
    font-weight: 600 !important;
    font-size: 31px !important;
    color: var(--color-title) !important;
    font-family: 'Roboto Condensed', sans-serif;
    border-bottom: 2px solid var(--border-color-soft);
    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 {
    margin-left: unset;
    height: auto;
    border-radius: 1px 13px 13px 1px !important;
}

button#btnXem { 
    max-height: 38px;
}

.k-combobox,
.k-combobox .k-input,
.k-datepicker,
.k-datepicker .k-input,
.k-datetimepicker,
.k-datetimepicker .k-input,
.k-timepicker,
.k-timepicker .k-input {}

.trangthai-info {
    color: #fff !important;
    padding: 13px;
    font-size: 13px;
    line-height: 41px;
    font-weight: 600;
}

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

#gridData thead th {
    padding: 1px 1px;
    height: 27px;
    max-height: 31px;
    margin: 1px !important;
}


/*#gridData .k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    overflow-x: auto;
    padding: 9px 19px;
}*/

#gridData_ChamCong .k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    max-width: calc(100% - 5px);
}


/*#gridData .k-toolbar.k-grid-toolbar>* {
    overflow-x: auto;
    display: flex
;
    flex-wrap: nowrap;
    max-width: calc(100% - 5px);
}*/

.section-footer-right.mb-1 {
    margin-bottom: unset;
}

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

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

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


/*.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;*/


/* Khoảng cách giữa các phần tử */


/*}

.form-group .form-control {
  flex: 1 1 150px;*/


/* Phân bổ chiều rộng động cho các input, với chiều rộng tối thiểu là 150px */


/*}

.form-group .input-group {
  flex: 0 0 auto;*/


/* Không gian cố định cho input-group */


/*}

.input-group .input-group-append {
  display: flex;*/


/* Đảm bảo nút search nằm bên trong cùng một dòng */


/*}*/

.input-group button {
    flex: 0 0 auto;
    /* Nút giữ kích thước cố định */
}

.section-info-container {
    line-height: 54px;
}

#accordion .card.card-info { 
    background: var(--bs-bg-section);
    border-radius: 5px;
    padding-top: 1px;
    box-shadow: unset;
}

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

.k-dropdown,
.k-dropdown .k-input,
.k-dropdown-wrap,
.k-datepicker, .k-picker-wrap,
.k-widget.k-dropdown {
    height: 100% !important;
    max-height: 39px;
    box-sizing: border-box;
}
.k-datepicker, .k-datepicker .k-input, .k-datetimepicker, .k-datetimepicker .k-input, .k-timepicker, .k-timepicker .k-input {
    background-color: transparent;
}

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

div#divFilter {}

section.content .m-1.p-1 {
    padding-top: 1px !important;
    margin-top: 1px !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.section-info-container>.container {
    padding-right: unset !important;
    padding-left: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}

div#divFilter .card {
    width: 100%;
    margin: unset;
    padding: unset;
    box-shadow: unset;
}

.card-body .row [class^="col-"] {
    margin-bottom: 8px;
}
#divFilter .card-body .row [class^="col-"] {
    margin-bottom: 6px;
}
.overlay {
    color: #fff;
}

.k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    padding: 4px 13px;
}

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

.k-datepicker,
.k-datetimepicker {
    transition: border-color 0.3s ease-in-out;
}

.k-datepicker.k-state-focused,
.k-datetimepicker.k-state-focused {
    border-color: #8ca567 !important;
    /* Viền khi focus */
    box-shadow: var(--shadow-soft);
}

.k-datepicker .k-input,
.k-datetimepicker .k-input {
    color: var(--text-color);
}

.k-datepicker .k-icon,
.k-datetimepicker .k-icon {
    /* color: #3498db; */
}


/* Tùy chỉnh calendar popup */

.k-calendar {
    background-color: #f9f9f9;
    border-color: #8ca567 !important;
    /* Viền khi focus */
    box-shadow: var(--shadow-soft);
}

.k-calendar .k-header {
    background-color: #486ed0;
    padding: 13px 27px;
    font-size: 19px;
    font-family: "Roboto", sans-serif;
}

.k-calendar .k-link {
    /* color: #3498db; */
    font-weight: 500;
}

.k-calendar .k-state-selected {
    background-color: #3498db;
    color: white;
}


/* Tùy chỉnh thời gian (time) */

.k-timepicker {
    background-color: #f9f9f9;
    border-color: #8ca567 !important;
    /* Viền khi focus */
    box-shadow: 0 0 5px rgba(140, 165, 103, 0.3) !important;
}

.k-timepicker .k-time-list {
    background-color: #ffffff;
}

.k-timepicker .k-item {
    color: #333;
}

.k-timepicker .k-item.k-state-selected {
    background-color: #3498db;
    color: white;
}

.k-timepicker .k-item.k-state-hover {
    background-color: #f1f1f1;
}

.colTenKho .k-form-error {
    position: absolute !important;
    z-index: 10;
    margin-top: 0rem !important;
    /* Đẩy tooltip xuống dưới ComboBox */
    pointer-events: none;
    /*Cho phép click xuyên qua*/
}

#myTab .nav-link {
    white-space: nowrap;
    font-weight: 400 !important;
    font-weight: 19px;
    color: gray;
    padding-left: 13px !important;
    padding-right: 13px !important;
    background: #f4f6f9;
    font-family: 'Merriweather Sans';
}

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

#myTab .nav-link.active {
    color: #4a6ed1;
    font-weight: 900 !important;
    text-decoration: underline;
}

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

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

.modal-body {}

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

div#modalLoading {
    background: #f4f6f9;
}

ul#myTab li {
    border: 1px solid var(--border-color);
}
.modal-header {
    padding-top: 0;
    padding-bottom: 10px;
}
#modalLoading>form>.modal-header:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    padding-top: 0;
    box-sizing: border-box;
    padding-left: 1px;
    border: unset;
    position: relative;
    border-bottom: 1px solid #ddd;
}

.modal-body {
    padding: 19px;
    background: #f9f9f9;
    border-radius: 9px;
}

input#TextSearch {
    max-width: 320px;
}
#accordion input#TextSearch {
    max-width: unset;
}


/* ///menu */

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

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

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

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

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active {
    padding-bottom: 7px;
    padding-top: 6px;
    background-color: #f9f9f9;
    width: 100%;
}

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

li.list-group-item {
    background: #f9f9f9;
    padding: 19px;
}

#listFilter .list-group-item {
    padding: 5px 10px !important;
}

select.k-dropdown {
    border: 1px solid var(--border-color);
}
input.form-control.form-control-sidebar::placeholder {
    font-size: 13.5px;
}

input.form-control.form-control-sidebar {}

button.btn.btn-sidebar i {
    font-size: 13.5px;
}

button.btn.btn-sidebar {
    height: 39px;
}
div#gridMoiNguyBienPhap table tbody tr td,div#gridBienPhapChiTiet table tbody tr td {
    font-size: 15.3px;
    font-weight: 500;
    font-family: 'Merriweather Sans';
    line-height: 39px;
}

h1#header_waiting {
    
    font-family: 'UTMBebas', sans-serif;
    font-size: 68px;
    letter-spacing: .02em;
    color: #3f6791;
    line-height: 1.35;
    -webkit-text-stroke: .5px color-mix(in srgb, var(--color-text) 35%, #000);
     text-shadow:
    0 1px 0 color-mix(in srgb, var(--color-text) 25%, #000),
    0 2px 6px rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.18);
}

h1#header_fail{
    font-family: 'UTMBebas', sans-serif;
    font-size: 68px;
    letter-spacing: .02em;
    
    line-height: 1.35;
     text-shadow:
    0 1px 0 color-mix(in srgb, var(--color-text) 25%, #000),
    0 2px 6px rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.18);
    
}
.dashboard-chamcong-content{
    position: relative;
    height: calc(100vh - 68px);
    width: 100%;
}

#idpagebodywrapper section.content.dashboard-chamcong-content {
    padding: 1px !important;
}
.dashboard-chamcong-nen{
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    opacity: 0.31;
    background: #dee2e6;
}
section.content.dashboard-chamcong-content {
    background: #f5f6f9;
}
div#chamcong-background,.dashboard-chamcong-body{
    display: flex;justify-content: center;align-items: center;
    /* border: 3px solid var(--border-color-soft); */
     position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    width: calc(100%);
    height: calc(100%);
       background-image: url(/img/nen2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    

}
div#KetQuaChamCong div.col-sm-3 {
    text-align: right !important;
}
div#KetQuaChamCong h3
{
    font-family: 'UTMBebas', sans-serif;
    font-size: 31px;
    font-weight: 500;
    text-align: left;
    color: #496dd0;
}
div#KetQuaChamCong label {
    font-family: 'UTMBebas';
    font-size: 26px;
    padding-top: 3px;
    vertical-align: middle;
    font-weight: 400;
}
div#KetQuaChamCong div.col-sm-12 h3 {
    padding-top: 19px;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 41px;
    font-weight: 600;
    text-align: left !important;
    color: #496dd0;
}
.dashboard-chamcong-header {
   position: absolute;
    top: 27px;
    left: 19px;
    height: 69px;
    width: 100%;
    z-index: 1;
}
h3#header_CanhBaoChamCong, h3#header_ThongBaoChamCong {
    text-align: center !important;
}
.header-boc {
   height: 68px;
    display: flex
;
    padding: 1px 31px;
    gap: 10px;
    justify-content: flex-start;
    background:#f5f6f9;
    width: calc(100% - 38px);
    display: none;
    
}

.header-boc .left {
    position: relative;
    margin-top: 8px;
    height: 49px;
    width: 49px;
    border-radius: 4px;
    overflow: hidden;
}
.header-boc .center{
font-family: 'Open Sans';
    font-size: 19px;
    color: #fff;
    font-weight: 700;
    padding: 13px 1px;
}
.header-boc .left img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div#KetQuaChamCong {
    width: 100%;
    
    padding: 31px;
    overflow: auto;
    padding-top: 49px;
    height: calc(100vh - 227px);
    text-align: center;
    overflow: auto;
}
tr td button.btn {
    border-radius: 1px;
    font-size: 14px !important;
}
tr td .btn.btn-flat {
    border-radius: 5px;
}
tr td button.btn.btn-sm.btn-danger {
    
    background: inherit;
    color: #ff5370;
    border: unset;
    
}
.text-bold {
    font-weight: 600;

    color: var(--primary);
}

/* Nội dung đặt trên sóng */
.wave-content{
  position: relative;
  z-index: 5;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
  padding: 0 15.9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #0f172a;
}
.wave-content h1{ margin: 0 0 8px; font: 700 36px/1.2 "Inter", system-ui;}
.wave-content p { margin: 0; font: 400 16px/1.65 "Inter", system-ui; }
.dashboard-chamcong-nen {
    
    position: absolute !important;
    z-index: 100 !important;
    
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    opacity: 0.27;
        background: transparent;
}
h1#header_waiting, h1#header_fail 
{
color: #144ac9;
  font-weight: 500;
}
h1#header_fail {
    color: #db3b41;
}
div#chamcong-background
{
    background-image: url(/img/chamcong-bgr.jpg);
}
h1#header_waiting, h1#header_fail,div#KetQuaChamCong label,div#KetQuaChamCong h3 {
  
   text-shadow:
    0 0 1px  #fff,
    0 0 3px  rgba(255,255,255,.85),
    0 0 14px rgba(255,255,255,.65),
    0 2px 6px rgba(0,0,0,.2);
}
@supports (-webkit-text-stroke: 1px white) {
  h1#header_waiting, h1#header_fail{
    -webkit-text-stroke: 1px #fff; /* viền trắng */
  }
}

/* Lớp sóng */
/* .dashboard-chamcong-nen{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none; 
  background-image:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%23cfe7ff' d='M0,80 C160,120 320,20 480,40 C640,60 800,140 960,120 C1120,100 1280,40 1440,80 L1440,160 L0,160 Z'/>\
      </svg>"),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%237fc3ff' d='M0,100 C180,140 360,60 540,80 C720,100 900,160 1080,130 C1260,100 1350,80 1440,100 L1440,160 L0,160 Z'/>\
      </svg>"),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%233aa0ff' d='M0,120 C200,160 400,100 600,120 C800,140 1000,150 1200,130 C1300,120 1370,110 1440,120 L1440,160 L0,160 Z'/>\
      </svg>");
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-size: 1440px 120px, 1440px 120px, 1440px 120px;
  background-position:
    0 calc(100% - 60px),
    0 calc(100% - 36px),
    0 calc(100% - 12px);
  animation:
    waveMove1 22s linear infinite,
    waveMove2 14s linear infinite,
    waveMove3 9s  linear infinite;
} 
@keyframes waveMove1 { to { background-position: -1440px calc(100% - 60px), 0 calc(100% - 36px), 0 calc(100% - 12px); } }
@keyframes waveMove2 { to { background-position: 0 calc(100% - 60px), -1440px calc(100% - 36px), 0 calc(100% - 12px); } }
@keyframes waveMove3 { to { background-position: 0 calc(100% - 60px), 0 calc(100% - 36px), -1440px calc(100% - 12px); } }


.dashboard-chamcong-content.red-oracle .dashboard-chamcong-nen{
  background-image:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%23ffd6d6' d='M0,80 C160,120 320,20 480,40 C640,60 800,140 960,120 C1120,100 1280,40 1440,80 L1440,160 L0,160 Z'/>\
      </svg>"),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%23ff9aa2' d='M0,100 C180,140 360,60 540,80 C720,100 900,160 1080,130 C1260,100 1350,80 1440,100 L1440,160 L0,160 Z'/>\
      </svg>"),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
      <path fill='%23F80000' d='M0,120 C200,160 400,100 600,120 C800,140 1000,150 1200,130 C1300,120 1370,110 1440,120 L1440,160 L0,160 Z'/>\
      </svg>");
}


@media (max-width: 768px){
  .dashboard-chamcong-content{ --height: 280px; }
  .wave-content h1{ font-size: 28px; }
}



 
.wave-hero{
  --height: 360px; 
  --mesh-1: rgba(248, 0, 0, .90);   
  --mesh-2: rgba(248, 0, 0, .50);    
  --mesh-size-1: 28px;    
  --mesh-size-2: 14px;    
  --mesh-thick-1: 1.6px; 
  --mesh-thick-2: 1px;   
  --bg: transparent;     
  background: var(--bg);
}

.wave-layers{
  position: absolute; inset: 0;
  pointer-events: none; 
  background-image:
    repeating-linear-gradient(to right, var(--mesh-1), var(--mesh-1) var(--mesh-thick-1), transparent var(--mesh-thick-1), transparent var(--mesh-size-1)),
    repeating-linear-gradient(to bottom, var(--mesh-1), var(--mesh-1) var(--mesh-thick-1), transparent var(--mesh-thick-1), transparent var(--mesh-size-1)),
    repeating-linear-gradient(to right, var(--mesh-2), var(--mesh-2) var(--mesh-thick-2), transparent var(--mesh-thick-2), transparent var(--mesh-size-2)),
    repeating-linear-gradient(to bottom, var(--mesh-2), var(--mesh-2) var(--mesh-thick-2), transparent var(--mesh-thick-2), transparent var(--mesh-size-2));
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-size: 100% 100%; 
  animation: meshParallax 18s linear infinite; 
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.85) 55%, #000 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.85) 55%, #000 100%);
  opacity: .98;
}
 
.wave-layers::after{
  content: "";
  position: absolute; inset: -10% -5% -20% -5%;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 80%  at 20% 110%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
  animation: glareDrift 6s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;  
}
 
@keyframes meshParallax {
  to { 
    background-position:
      -240px 0, 0 -240px, 
      -120px 0, 0 -120px;
  }
}

@keyframes glareDrift {
  from { transform: translateX(-4%) translateY(0%);   opacity: .9; }
  to   { transform: translateX( 4%) translateY(-2%);  opacity: 1;  }
}
 
@media (max-width: 768px){
  .wave-hero{ --height: 280px; }
} */

.chamcong-body-content {
    height: 100%;
    width: 100%;
    font-family: "Roboto Mono", monospace;
    font-size: 20px;
}
.chamcong-header {
    margin: 8vh auto 15px;
}
.chamcong-header .header-title {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 2.2em;
    font-weight: 600; 
}
.header-dateTime-wr {
    text-align: right;
}
.header-timer {
    font-size: 3em;
    font-weight: 600;
    color: #222;
    margin: 30px 0 20px;
}
.header-date {
    font-size: 1.5em;
    font-weight: 600;
    color: #163568;
}
.chamcong-content  {
    border: 2px solid #89acb0;
    border-radius: 30px;
    background-color: rgb(41 93 136 / 49%);
    /* border-image: linear-gradient(90deg, #3673a2, #f1f4eb, #3673a2, #f1f4eb) 1; */

    /* border: 5px solid transparent;
    border-radius: 10px;
    background: linear-gradient(to right, #3673a2, #f1f4eb) border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box; */

    /* border: 3px solid;
    border-image: linear-gradient(90deg, #3673a2, #f1f4eb, #3673a2, #f1f4eb) 1; */
    /* animation: borderGradient 5s linear infinite; */

    /* border: 5px solid transparent;
    border-radius: 10px;
    background: linear-gradient(90deg, #3673a2, #f1f4eb);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; */

}
@keyframes borderGradient {
  0% { border-image: linear-gradient(90deg, #3673a2, #f1f4eb) 1; }
  50% { border-image: linear-gradient(180deg, #3673a2, #f1f4eb) 1; }
  100% { border-image: linear-gradient(360deg, #3673a2, #f1f4eb) 1; }
} 

.chamcong-logo {
    width: 27%;
    padding: 25px;
}
.chamcong-logo img {
    width: 100%;
    height: auto;
    position: relative;
    top: -20%;
    animation: logoTranslateY 2.5s ease-in-out infinite;
    z-index: 1;
}
@keyframes logoTranslateY {
    0% { transform: translateY(-0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(-0); }
}
@keyframes logoScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.chamcong-description-wr {
    width: 66%;
    padding: 25px 20px 15px;
} 
.chamcong-description-waiting {
    margin-top: 20px;
    text-align: center; 
} 
.description-waiting-items > #header_waiting {
    font-size: 3.5em;
}
.header_waiting-desc {
    color: #fff; 
    font-size: 1.3em;
    font-weight: 500;   
}
.chamcong-description  {
    margin-top: 15px;
}
.description-items {   
    color: #fff;
    /* font-size: 1.5em;  */
    padding: 10px;
}
.description-items span.info{    
    font-size: 1.5em;  
    line-height: 1.3;
}

.description-items.border-bottom:first-child { 
    border-image: linear-gradient(to right, rgb(58 107 150 / 53%), rgb(58 107 150 / 53%), #fff, rgb(58 107 150 / 53%)) 1;
    border-bottom: 2px solid !important; 
    margin-bottom: 5px;
}
.description-items.border-bottom { 
    border-image: linear-gradient(to right, rgb(58 107 150 / 53%), #fff, rgb(58 107 150 / 53%), rgb(58 107 150 / 53%)) 1;
    border-bottom: 2px solid !important;  
}
.description-items > span i {
    color: #e4ab00;
    width: .7em;
    text-align: center;
}
.description-items > span i.fa-clock {
    color: #06cd86;
}
.persion-name {
    font-size: 2em;
    font-weight: 600;
    color: #fff;
}
.chamcong-notification {
    padding: 15px 30px;
    margin-top: 15px;
    width: 117%;
    position: relative;
    left: -15%; 
    position: relative;
    background-image: url(../img/btn-border-star-3.png);
    background-size: 100% 104%;
    background-repeat: no-repeat;
    background-position: 47% 90%;
} 
.notification-text {
    color: #fff;
    /* font-size: 1.5em; */
    font-weight: 600;
    text-align: center;
}
#header_ThongBaoChamCong {
    font-size: 2em;
}
.header_CanhBaoChamCong {
    color: #f6a93a;
    font-size: 1.6em;
    width: 117%;
    left: -15%;
    position: relative;
    text-align: center;
    margin-bottom: 0;
}

/* Loading dots */
.loading {
    margin-top: 1em; 
}

.loading span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 4px;
    background: #0b3c5d;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
}

.loading span:nth-child(2) { animation-delay: .2s; }
.loading span:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

.k-grid td.k-state-selected, .k-grid tr.k-state-selected>td {
    border-color: var(--border-color-soft) !important;
}
/* màn hình chấm công end */

.section-footer-right .btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
}
.modal-body label {
    margin-bottom: 0;
    line-height: 1.3;
}
.modal-body div[class^="col-"]:has(label + span) {
    margin-bottom: 12px;
}
.card-primary .card-title a::after {
    color: #fff !important;
    right: 13px;
} 
.modal-body .k-dropdown-wrap, 
.modal-body .k-numerictextbox,  
.modal-body .k-picker-wrap,  
.modal-body .k-datepicker .k-input,  
.modal-body .k-textbox {
    background-color: #fff;
}
#accordion .k-input {
    font-family: "Roboto", sans-serif !important;
    font-weight: 400;
}
.k-grid-content::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 7px; 
}
.k-grid-content::-webkit-scrollbar-thumb:hover { 
    background: #d4d4d4 !important;
}
.modal-body::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 7px;
    background: #ddd;
}
.modal-body::-webkit-scrollbar-track { 
    border-radius: 8px; 
} 
.modal-body::-webkit-scrollbar-thumb {
    background: #ddd !important; 
    border-radius: 10px; 
} 
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #a2bfdf !important; 
}
.media-body h3 {
    font-weight: 600;
}
.media-body P {
    font-weight: 400; 
    color: #555;
}
#divFilter .row .row > div[class^="col-"] {
    margin-bottom: 0;
}
#accordion .card.card-info:has(#divFilter.show) {
    background-color: #fff;
    padding: 12px 12px 6px;
    border-radius: 5px;
    margin-bottom: 3px;
    margin-top: 10px; 
    box-shadow: var(--shadow-soft);
}
.section-info-wrapper:has(span) {
    background-color: #fff;
    padding: 3px 12px 6px;
    border-radius: 5px;
    box-shadow: var(--shadow-soft);
    margin-top: 10px;
}
.k-list-container {
    font-family: "Roboto", sans-serif !important;
}
.k-list-container .k-list {
    color: #515967;
    font-weight: 400;
}
#gridData tbody td>button.btn-flat {
    pointer-events: none;
}
/* css end */

@media (max-width: 992px) {
    h1#header_waiting {
        font-size: 45px;
    }
}
/* ket thuc  */