/* 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: Poppins-Regular;
    src: url('/fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('/fonts/Poppins-Bold.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('/fonts/Poppins-Medium.ttf');
}

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

:root {
    --background: #f3f3fa;
    --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: #f5f6f8;
    --mau-slidebar-text: #A6A6A6;
    --mau-navbar: #A6A6A6;
    --bg-color: var(--background);
    --mau-seleted: #bce9b9;
    --mau-seleted-1: #f5f6f8;
    --mau-k-link: #525967;
    --accent-color: #F4C131;
    --background-color: #f3f3fa;
    --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;
    --border-color: rgba(0, 0, 0, 0.05);
    --border-color-1: #e2e2e2;
    --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: var(--border-color);
    --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: 19px;
    --bs-bg-toolbar: #fafafa;
    --bs-bg-menu-left: #0f1a34;
    --bs-bg-menu-left-second: #1B2E4C;
    /* #2b5fc3;*/
    --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: 6px 13px;
    border-radius: 26px;
    /* font-weight: 600; */
    font-family: 'Roboto', sans-serif;
    max-height: 49px;
    margin-right: 2px;
    font-weight: 500;
}

.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 {
    transform: scale(1.07);
    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;
    z-index: 1;
}

.btn-primary {
    color: #fff;
    background-color: #1A73E8;
    border-color: #1A73E8;
    box-shadow: none;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
.btn-primary:focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5);
}
.btn-secondary {
    border: 2px solid #1A73E8 !important;
    background-color: #f9f9f9 !important;
    color: #1A73E8 !important;
}
.btn-secondary:focus {
    color: #fff;
    background-color: #1A73E8;
    border-color: #1A73E8;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5);
}

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

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

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

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

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

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

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

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

.btn-inverse {
    background-color: #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 - 194px);
}

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

.divTextSearch {
    display: flex !important;
}

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

.topWindowNormal {
    top: 1px !important;
}

.topWindowFull {
    top: 0px !important;
}

nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
    background: #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;
}

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

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

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


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

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


/* ======= */

.k-animation-container,
.k-animation-container *,
.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;
}

.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: bold !important;
}

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

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

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

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

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

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

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

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

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

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


/*grid tệp đính kèm: Ẩn grid header */

#attachment {
    margin-bottom: 10px;
}

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


/*grid tệp đính kèm: Ẩn grid row line*/

#attachment .k-grid tr td {
    border-width: 0px;
    border-style: none;
}


/*grid tệp đính kèm: canh trái các nút*/

#attachment .k-grid tr td a {
    border-width: 0px;
    border-style: none;
}

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

.toast {
    min-width: 350px;
}


/*#popupProcessReader .k-window{
    z-index:10060 !important;
}
*/

.row-high-light {
    color: var(--red) !important;
}

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

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

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

.k-window-titlebar {
    /* display: none !important; */
    /* ẩn đi làm mất header title của model */
}

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

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


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


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


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

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

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

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


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

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

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

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

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

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

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

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

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

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


/* ====ket thuc phieu can=== */

td.tai-xe {
    font-family: 'Roboto Condensed', sans-serif;
    min-width: 191px;
    white-space: nowrap;
    text-align: left !important;
    color: var(--text-color);
}

td[role="gridcell"]>a>i.fa-shipping-fast::before {
    color: var(--color-title);
}

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

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

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

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

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

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

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

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


/* ===suport */


/* CSS cho thanh cuộn dọc */

.row-edit::-webkit-scrollbar {
    width: 3px;
    /* Chiều rộng thanh cuộn */
}


/* CSS cho thanh cuộn ngang */

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

.wrapper-center::-webkit-scrollbar {
    display: block;
}


/* CSS cho track thanh cuộn */

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


/* CSS cho thumb (phần kéo của thanh cuộn) */

.row-edit::-webkit-scrollbar-thumb {
    background: var(--bg-color);
    /* Màu của thumb */
    border-radius: 10px;
    /* Bo tròn thumb */
}


/* Thêm hiệu ứng khi hover vào thumb */

.row-edit::-webkit-scrollbar-thumb:hover {
    background: var(--bs-bg-toolbar);
    /* Màu thumb khi hover */
}

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

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

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

#webgiaonhan {
    position: fixed;
    top: 199px;
    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ẹ */
}

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

.XeVanChuyen {
    min-width: 149px;
}

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


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

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


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

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


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

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

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

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

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


/* Đối với trình duyệt WebKit (Chrome, Edge, Safari) */

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

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


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

::-webkit-scrollbar-track {
    background: #eee;
    /* 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: #e0f7fa;
    /* Màu nền sáng khi hover, giúp dễ dàng nhận diện dòng đang được chọn */
}


/* Tùy chọn: Làm cho dòng chẵn và lẻ có hiệu ứng chuyển màu nhẹ nhàng */

.k-grid tr:nth-child(even),
.k-grid tr:nth-child(odd) {
    transition: background-color 0.3s ease;
    /* Hiệu ứng chuyển màu nhẹ nhàng */
}


/* ketthuc=== */


/* Màu của thanh kéo (thumb) */

::-webkit-scrollbar-thumb {
    background: var(--background-color);
    /* 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: 13px 1px;
    height: 82px;
    background: #fafafa;
}


/* #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;
    background: white;
    padding: 4px 13px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

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

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #2a467c;
    color: #fff;
    font-weight: 900;
    font-family: Roboto;
    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: 9px;
    padding-left: 5px !important;
}

#idpagebodywrapper>section.content {
    padding: 1.9rem !important;
    padding-top: 5px !important;
    background: #f3f3fa;
}

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

.modal-body {
    padding: 27px;
}


/* sinh nhat */

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

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

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

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

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


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

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

.main-footer {
    height: 62px;
}

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

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

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

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

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

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

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

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


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

.dropdown-menu-lg .dropdown-item {
    padding: 15px 19px;
}

.k-textbox {
    /* padding: 9px 13px; */
    /* font-size: 19px !important; */
    /* dính input trong popup */

    /* background-color: #fafafa;
    border-color: #f0f0f0; */
}


/*.k-grid-toolbar .col-md-9.col-sm-12 {
    display: flex;
    gap: 4px;
}
*/

.k-pager-wrap .k-pager-numbers .k-state-selected,
.k-pager-wrap .k-pager-numbers .k-state-selected:hover {
    border-top-color: transparent;
    color: var(--color-title) !important;
    border-radius: 49%;
    padding: 1px !important;
    font-weight: 500;
    font-size: 19px;
    font-family: 'Roboto Condensed', sans-serif;
    background: transparent !important;
    border-radius: 3px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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


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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

#modalLoading>form>.modal-header:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 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: 26px;
    overflow: auto;
    font-weight: 700;
    color: var(--color-title);
    font-family: UTMBebas, sans-serif !important;
}

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

li.nav-item.headerOpen .nav-icon {
    margin: unset !important;
    width: auto !important;
    text-align: left !important;
}


/* (Tùy chọn) Ẩn scrollbar (Chrome, Edge) */

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

input#TextSearch,
input.text-search,
input#searchInput {
    border-radius: unset !important;
    /* min-height: 41px; */
    border-radius: unset !important;
}

.divTextSearch,
input#searchInput {
    /* 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.k-widget .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),
.k-grid.k-widget .k-grid-header-locked .k-grid-content td:nth-child(3),
.k-grid.k-widget .k-grid-header-locked .k-header th:nth-child(3),
#gridData .k-grid-header-locked .k-header th:nth-child(3) {
    text-align: left;
}

.k-grid.k-widget .k-grid-header-locked .k-grid-content td:nth-child(3),
#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%;
}

.k-grid.k-widget .k-grid-header-locked .k-grid-content td:nth-child(3)>a,
#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: 16px !important;
    /* Kích thước font dễ đọc */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Đổ bóng nhẹ */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển trạng thái */
}


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

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


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

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

.k-textarea textarea[readonly]:hover,
.k-textarea textarea[readonly]:focus,
.k-textarea textarea:hover,
.k-textarea textarea:focus {
    background-color: #F5F5F5 !important;
    line-height: 31px;
    color: #333333 !important;
    padding: 10px;
    font-weight: 400;
    font-size: 19px !important;
    font-family: 'Merriweather', sans-serif;
}


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


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

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


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

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


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

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

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

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

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

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

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


/* Đảm bảo rằng .card.card-info bắt đầu với độ mờ */

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


/* Định nghĩa hiệu ứng fade-in từ dưới lên */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        /* Bắt đầu với độ mờ */
        transform: translateY(20px);
        /* Vị trí bắt đầu thấp hơn */
    }
    100% {
        opacity: 1;
        /* Độ mờ hoàn toàn */
        transform: translateY(0);
        /* Vị trí trở về ban đầu */
    }
}

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

.card-header {
    padding: 5px 1px;
}

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: 0px;
    flex-wrap: nowrap;
}


/* 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-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: #fafafa;
    font-family: 'Open Sans', sans-serif !important;
}

.card-body.filter-border.card label,
.card-body.filter-border.card .k-input {
    font-size: 15.9px !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #6f7a91;
    text-align: left;
    white-space: nowrap;
    vertical-align: text-top;
    min-width: 191px;
}

#divFilter .d-flex.justify-content-between.align-items-center.flex-nowrap {
    gap: 10px;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    display: flex !important;
    align-items: flex-start;
}

.k-autocomplete,
.k-draghandle,
.k-dropdown-wrap,
.k-grid-header,
.k-grouping-header,
.k-header,
.k-numeric-wrap,
.k-panelbar .k-tabstrip-items .k-item,
.k-picker-wrap,
.k-progressbar,
.k-state-highlight,
.k-tabstrip-items .k-item,
.k-toolbar {
    background-color: var(--bs-bg-toolbar);
}


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

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

.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);
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color-soft);
    border-top: 1px solid var(--border-color-soft);
    padding: 13px;
}


/* Cell thường */

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


/* Hover row */

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


/* Thanh công cụ toolbar */


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


/* Nút trong Grid */

.k-button,
.k-grid .k-button {
    border: 1px solid var(--border-color-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: var(--bs-bg-toolbar);
}


/* 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-link,
.k-grid-header th.k-header {
    /* color: #999999; */
    color: #555;
}


/* ===footer */

.main-footer {
    border-top: 1px solid #f2f2f2 !important;
}

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

div#sinhNhatContent {
    display: none;
}


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

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



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

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

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

body.sidebar-mini.layout-fixed.layout-footer-fixed.sidebar-collapse .wrapper .main-footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1032;
    max-width: calc(100vw - 68px);
}

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

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

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

.section-footer-container-boc {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.modal-footer {
    /* height: 62px;
    height: 86px; */
    justify-content: stretch;
    display: flex;
    align-items: baseline;
    padding-bottom: 13px;
}

#modalLoading form {
    padding-bottom: 31px;
}

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

div#idmessagerror .modal-header .btn {
    border-radius: 8px !important;
}
.k-grid-content-locked+.k-grid-content,  
.k-grid-content-lock,
.k-grid-header-locked+.k-grid-header-wrap {
    background-color: #f4f6f9;
}
.k-grid.k-widget tbody th,
.k-grid.k-widget tbody td,
#gridData tbody th,
#gridData tbody td {
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 10px solid #f9f9f9 !important;
    color: #6F7A91;
    /* font-family: 'Merriweather Sans', sans-serif !important; */
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px;
    font-weight: 500;
}

.k-grid.k-widget thead th #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 ==== */

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

nav.main-header ul.navbar-nav:last-child>li:first-child>a.nav-link>img {
    padding: 1px !important;
    margin: 1px !important;
    transition: transform 0.3s ease;
}

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

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

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

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

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

input#TextSearch,
input.text-search,
input#searchInput {
    border-radius: unset;
    min-width: 153px;
    border: 1px solid #bfbfbf !important;
    /* margin-left: 8px; */
    padding-left: 8px;
}

.k-combobox,
.k-combobox .k-input,
.k-datepicker,
.k-widget .k-input,
input#TextSearch,
input#searchInput,
input.text-search,
.k-combobox>*,
.k-datepicker .k-input,
.k-datetimepicker,
.k-datetimepicker .k-input,
.k-timepicker,
.k-timepicker .k-input {
    font-family: "Roboto", sans-serif;
    color: var(--bs-color-input) !important;
}

.nav-sidebar .nav-link p {
    display: inline;
    margin: 0;
    white-space: normal;
    font-family: Roboto;
    font-weight: normal;
}

.nav-sidebar .nav-link.active p {
    font-family: Roboto;
    font-weight: bold;
}

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,
.k-grid.k-widget tbody td,
#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: 600;
}

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

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

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

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

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


/* Footer chính */


/* Phieu dien van  */

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

div#divPhieuXuatContent {
    height: 991px;
}


/* Khung cuộn không làm thay đổi nội dung bên trong */

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

#divFilter .card-footer>div {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: flex-start;
    align-items: center;
    max-width: calc(100%);
    overflow-x: auto;
    padding-left: unset;
    margin-left: unset;
}

#divFilter .card-footer {
    padding-left: unset;
    padding-bottom: unset;
    margin-top: unset;
    background: inherit;
    gap: 4px;
}

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

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


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

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

#modalLoading form#frmMauPhieuVanChuyen .wrapper-center {
    height: calc(100vh - 94px);
}

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

#modalLoading form#frmMauPhieuVanChuyen .scroll-wrapper {
    padding: unset;
}


/* ket thuc phieu dieu van */

.filter-border {
    max-height: 286px;
    overflow-y: auto;
    padding: 19px
}

#accordion .k-multiselect-clearable .k-multiselect-wrap {
    overflow: auto;
    white-space: nowrap;
    max-height: 41px;
    padding: 1px;
}

div#divFilter .card-body.bootstrap-tagsinput.filter-border {
    padding-left: 19px;
    padding-right: 19px;
}

#divFilter .card-footer {
    padding-left: unset;
    padding-bottom: unset;
    margin-top: unset;
    background: inherit;
    display: flex;
    overflow-x: auto;
    justify-content: center;
}

#divFilter .input-group-append {
    margin-left: unset;
    height: auto;
    min-height: 39px;
}

.k-grid.k-widget tbody td>button.btn #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;
}

#divFilter .card-body {
    padding-left: 19px;
    padding-right: 19px;
    background: unset;
    margin-bottom: 4px;
}

#divFilter label,
#divFilter .k-input {
    font-size: 19px;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15.9px;
    text-overflow: ellipsis;
    font-family: 'Open Sans', sans-serif !important;
}

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

.k-toolbar [data-command="ZoomCommand"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.k-toolbar [data-command="ZoomCommand"] select.k-valid {
    display: none;
}

.k-toolbar [data-command="DownloadCommand"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

li.nav-item.load-nhat-ky>a>i {
    padding-top: 15.3px;
    padding-right: 4px;
    font-size: 19px;
    color: var(--color-primary);
}

div#gridData,
.k-grid.k-widget {
    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;
}

.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: 10px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 10px 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,
input.text-search+button.btn,
input#searchInput+button.btn {
    margin-left: unset;
    height: auto;
    border-radius: 1px 13px 13px 1px !important;
}

button#btnXem {
    border-radius: 3px !important;
    max-height: 41px;
}

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

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

.k-grid.k-widget thead th,
.k-grid.k-widget thead th,
#gridData thead th,
.k-grid.k-widget thead th {
    padding: 10px;
    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,
.k-grid.k-widget .k-toolbar.k-grid-toolbar {
    /* max-width: calc(100% - 5px); */
    width: 100%;
    /* padding: 5px 13px;  */
}
.k-toolbar > .row {
    margin-left: 0;
}


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

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

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

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

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


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


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


/*}

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


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


/*}

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


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


/*}

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


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


/*}*/

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

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

#accordion .card.card-info {
    margin-bottom: unset;
    /* padding: unset;
    min-height: 41px; */
    background: #f3f5f8;
}


/*.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-widget.k-dropdown {
    height: 100% !important;
    max-height: 41px;
    box-sizing: border-box;
}
.k-picker-wrap .k-input {
    max-height: 39px;
}

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

div#divFilter {
    margin-top: 8px;
}

div#divFilter .card {
    margin-bottom: 8px;
}

.card-body .row [class^="col-"]:not(:last-child) {
    margin-bottom: 8px;
}

.overlay {
    color: #fff;
}

.k-toolbar.k-grid-toolbar {
    overflow-x: auto;
    /* padding: 13px 14px; */
    background: #f9f9f9;
    border: unset;
    width: 100%;
    gap: 5px;
}

.modal-footer.container {
    overflow-x: auto;
}

button.btn.btn-primary.btn-small {
    padding: 1px 14px;
    border-radius: 5px;
    margin-left: 3px;
}

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

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

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

section.content.container-lop-tren {
    padding: 19px;
}

section.content.container-lop-tren .chart-container {
    padding: 19px;
    background: #fff;
    overflow: auto;
}

section.content.container-lop-tren .chart-container text {
    font-family: UTMBebas, sans-serif;
    font-size: 15.9px;
    font-weight: 500;
}

section.content.container-lop-tren .card .card-header h5 {
    font-size: 19px;
    font-family: 'Roboto';
    font-weight: 600;
}

section.content.container-lop-tren .card-body h2 {
    font-size: 62px;
    font-weight: 600;
}

section.content.container-lop-tren .card-body h2 {
    font-size: 62px;
    font-weight: 600;
}

section.content.container-lop-tren .card-header h6 a {
    font-size: 19px;
    font-weight: 600;
    font-family: 'Roboto';
}

section.content.container-lop-tren .card-header h6 {
    padding: 4px 1px;
}

span.brand-text b {
    font-size: 19px;
    font-weight: 900;
    font-family: Poppins-Bold, sans-serif;
}

nav[aria-label="breadcrumb"]>ol {
    padding: 9px 31px;
    font-family: 'Roboto';
    font-size: 19px;
}

nav[aria-label="breadcrumb"]>ol>li>a {
    padding: 11px 9px;
    font-family: 'Roboto';
    font-size: 19px;
}
section.content {
    /* padding: 1px 27px; */
}

div#idpagebodywrapper>nav {
    padding: 5px 1px;
}

.accordion-item {
    /* padding: 13px 1px; */
}

.card-body-item-search {
    display: flex;
    justify-content: start;
    align-items: center;
}

.card-body-item-search>button {
    align-items: center;
    top: 15px;
    position: relative;
}
ol.breadcrumb li.breadcrumb-item>a:first-child {
    font-weight: 600;
    color: #718ba8;
    padding-left: 1px;
}

h2.header-title {
    font-size: 27px;
    font-family: 'Roboto';
    color: #495058;
    border-bottom: 1px solid var(--border-color-soft);
    padding-bottom: 9px;
    margin-bottom: 19px;
}


/* graph */

#pieChart_ThongTinLoaiHopDongLaoDong {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinLoaiHopDongLaoDong {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinSoLuongNSTheoTrinhDoChinhTri {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinSoLuongNSTheoHang {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinSoLuongNSQuanLyNhaNuoc {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinSoLuongNSTheoTrinhDo {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinLoaiTaiSan {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#pieChart_ThongTinChungLoaiTaiSan {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.k-chart,
.k-chart-title,
.k-chart-legend,
.k-chart-tooltip,
.k-chart-label {
    font-family: 'Roboto', sans-serif !important;
}

.box-body .card {
    height: 100%;
}

.box-body .card h4 {
    font-size: 41px;
}

.box-body .card .col.d-flex.flex-column.justify-content-between.align-items-start {
    min-height: 131px;
}

.box-body .card h4 {
    font-size: 49px;
    font-weight: 600;
    font-family: 'Roboto';
}

.card .card-block p {
    line-height: 25px;
    font-family: Roboto;
    font-size: 15.9px;
}

.content-body {
    padding: 1.9rem;
    background: #f3f3fa;
}

#reportContainer .card {
    height: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}
div#idpagebodywrapper>nav {
    padding: 5px 1px;
}
.card-body-item {
    gap: 5px;
    /* padding: 5px 1px; */
}
section.content {
    /* padding: 1px 27px; */
}
#reportContainer .card .card-body {
    
}
div#reportContainer .card-body h5{
    
    color: #3f6791;
    font-family: 'Roboto';
    font-size: 19px;
    font-weight: 600;
    
}
div#reportContainer  .card-body {
    
    flex: unset;
    min-height: unset;
    padding: 19px 1px;
}
.container-lop-tren .col-xl-3 .card {
    height: 100%;
}
.page-content {
    padding: 1.9rem;
    padding-bottom: 13px;
    background: #f3f3fa;
}
div#idpagebodywrapper {}

.accordion {
    /* padding: 1px 27px; */
    text-align: left;
}

/* tạo padding bọc content */
div#idpagebodywrapper> div {
    padding: 1.9rem;
    padding-top: 5px;
    background: #f3f3fa;
}
div#idpagebodywrapper> div .page-content,
div#idpagebodywrapper > div > div {
    padding: unset;
} 

button.accordion-button {
    border: unset;
    background: unset;
    font-size: 19px;
    font-family: 'Roboto';
    font-weight: 900;
    color: #6c757d;
    /* border-bottom: 1px solid; */
    position: relative;
    top: 0;
    transition: top .3s ease-in;
}

.card-title.card-title-grid {
    padding: 13px 1px;
    font-size: 26px;
    color: #495058;
    font-weight: 600;
    font-family: 'Roboto';
}

footer.main-footer {
    display: none;
}

.box-body {
    /* margin-top: 49px; */
}

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

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

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

.card-body-item {
    gap: 5px;
}

.k-toolbar .d-flex.flex-wrap.gap-2.align-items-center {
    gap: 8px;
}

.card-header h6>a {
    padding: 3px 19px;
    font-size: 19px;
    font-family: Roboto;
    font-weight: 600;
}

.card-header h6 {
    padding: 13px 1px;
}

.add-breadcum .card-title.card-title-grid {
    color: #486dcf;
}

.os-scrollbar-handle {
    display: none;
}

td button {
    width: 100%;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active {
    background-color: unset;
    color: #fff;
    font-weight: 600;
    border: unset;
}


/* //tab */


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

#myTab::-webkit-scrollbar {
    display: none;
}

ul#myTab li:first-child button {
    border-radius: 13px 1px 1px 1px;
}

ul#myTab li:last-child button {
    border-radius: 1px 13px 1px 1px;
}

#myTab li.nav-link {
    white-space: nowrap;
    color: var(--text-color) !important;
    text-align: center;
    padding: 5px 13px;
    cursor: pointer;
    text-decoration: none;
    color: #808080;
    background: #ececec;
    border-right: 1px solid #c1c4c9;
    transition: all 0.2s ease;
}

#myTab li .nav-link.active {
    border-color: unset;
    color: #fff !important;
    font-weight: 600;
    background-color: #0077cc;
}

li.add-breadcum {
    padding: 9px 1px;
}

li.add-breadcum>* {
    font-weight: 600;
    font-family: Roboto;
    font-size: 26px;
    color: #486dcf;
}

button.accordion-button.collapsed::before {
    padding-bottom: 31px;
    font-family: 'Font Awesome\ 5 Pro';
    content: "\f330";
}

button.accordion-button::before {
    font-family: 'Font Awesome\ 5 Pro';
    content: "\f331";
    font-size: 27px;
    color: var(--color-danger);
}

#heading-filter {
    float: right;
    position: sticky;
    top: -19px;
    height: 1px;
    z-index: 999;
    padding-right: 20px;
}
/* Ngăn button rớt dòng */

/* kế thừa css cũ */
.accordion-body-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 1px;
    align-items: center;
}
.k-dropdown .k-dropdown-wrap, 
.k-datepicker .k-picker-wrap,
.k-dropdowntree .k-dropdown-wrap {
    border-color: #bfbfbf !important; 
}


/* Vũ DND endd */ 
.accordion-body {
    padding: 9px 13px;
    margin: 10px 0;
    background: #f9f9f9;
}

.accordion-body .card-body-item {
    padding: 0;
    margin: 0;
}
.accordion-body .k-toolbar.k-grid-toolbar {
    background: transparent;
    padding: 0;
}
.img-size-40 {
    width: 40px;
} 
.input-group input {
    flex-grow: 1;
} 
.accordion-header > .accordion-button:not(.collapsed) {
    position: relative;
    top: -21px; 
}
#collapse-filter {
    width: 100%;
}
.nav-sidebar li ul li a {
    width: auto !important;
}
.modal-content #myTabContent {
    padding-top: 4px;
    box-sizing: border-box;
}
div.vung-mo-ta-khoa-hoc-detail ul.nav-tabs li.nav-item>button[type=button] {
    color: grey;
    font-size: 15.3px;
    padding: 3px 13px;
    animation: fadeIn 0.3s ease-in-out;
    line-height: 2.3;
}
/* popup editor */
div.vung-mo-ta-khoa-hoc-detail.vung-menu-center ul.menu-center li {
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    display: flex;
    text-overflow: ellipsis;
} 
div.vung-mo-ta-khoa-hoc-detail.vung-menu-center ul.menu-center li:not(:last-child) {
    border-right: 1px solid #f7f8f7;
}
.nav-button > button {
    border-radius: 26px !important;
} 
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
    scroll-behavior: smooth;
}

.k-grid-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
    scroll-behavior: smooth;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px !important;
    background: #c2d5e9 !important;
    opacity: .1;
}
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background-color: transparent !important;
}
.profile-pic span {
    display: none;
}
.modal .modal-dialog .modal-content .modal-body .row:not(:last-child) {
    padding-bottom: 5px;
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-dialog {
    margin: 0;
}
.row {
    --bs-gutter-x: 31px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}
.row > * {
    flex-shrink: 0;
    /* width: 100%; */
    /* max-width: 100%; */
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}
.form-group-hiday {
    margin-bottom: 0.5rem !important;
}
.card-header {
    padding: 0.75rem 1.35rem !important;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}
.card-header {
    padding: 0.75rem 1.35rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0 !important;
}
.k-grid-norecords {
    line-height: 100px;
}

#TextSearch::placeholder {
    font-size: 15.3px;
}
.k-grid-content td > button {
    font-size: 13px;
}
.k-grid-content td > button > i {
    margin-right: 1px;
}

/* toolbar */
.k-toolbar * {
    box-sizing: border-box;
}
.btn-search {
    color: #fff; 
    border: hidden;
    font-size: 13px;
    padding: 10px 13px;
    border-radius: 1px 13px 13px 1px;
}
.card-body-item > .input-group {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    align-items: stretch;
}
#TextSearch {
    padding: 8px 10px; 
    height: 41px;
}
.toolbar-filter-items {
    display: inline-block;
}
.gap-2 {
    gap: .5rem !important;
} 
.k-grid-content {
    background-color: #f5f5f5;
}
.k-grid-toolbar > .row > div {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 8px;
}
.k-grid-toolbar .card-body-item:has(.input-group) {
    width: 100%;
}
.row:has(div > .header-title) {
    height: 0;
}
.row > div > .header-title {
    color: transparent;
}
.btn i {
    margin-right: 1px;
}
table td button {
    box-sizing: border-box !important;
}
.toolbar-dropdown > span {
    width: 100%;
}
.k-grid-header {
    /* padding-right: 8px !important; */
}

.modal {
    z-index: 1050 !important;
}
.modal-lg, .modal-xl,.modal-dialog {
    max-width: 100%;
}
@media (min-width: 992px) {
    #content-wrapper .box-body > .table > .k-toolbar > div > div:not(:first-child) {
        text-align: end;
    }
}

/* code for thư viện điện tử */
.form-control {
    border: none;
    height: auto;
}
.k-input {
    min-height: 41px;
}
.k-textarea > .k-input {
    border: 1px solid #e6e6e6;
}
.modal-body .row > * {
    width: 100%;
    max-width: 100%;
}