/* Liên kết đến Google Fonts */
/* Import phông chữ từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;300;400;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


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

:root {
    --background: #f9f9f9;
    --accent-primary: #0e6dbd;
    --accent-secondary: #0e6dbd;
    --link-foreground: #0e6dbd;
    --link-foreground-hover: #00376b;
    --link-underline-background: var(--link-foreground);
    --border-background: #ccc;
    --header-background: var(--background);
    --footer-background: var(--background);
    --button-primary-background: var(--accent-primary);
    --button-primary-foreground: var(--white);
    --button-secondary-background: #eaeaea;
    --button-secondary-foreground: var(--foreground);
    --button-secondary-hover: #e0e0e0;
    --button-secondary-border: rgba(0, 0, 0, 0.15);
    --icon-button-hover-background: rgba(0, 0, 0, 0.06);
    --navbar-border: var(--border-background);
    --color-tim: #714b67;
    --color-vang: #FD7B38;
    --mau-chinh: var(--link-foreground);
    --mau-avatar-text: #A6A6A6;
    
    
    --mau-bg: #D1D1D1;
    --mau-title-chon: #F86568;
    --mau-border: var(--border-background);
    --mau-breadcrum: #2d78ba;
    --mau-slidebar: #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: #f5f6f8;
    --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:#3f6791;
--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: 15.3px;
    --bs-bg-toolbar: #fafafa;
    --bs-bg-menu-left: #0f1a34;
    --bs-bg-menu-left-second: #1B2E4C;
    --bs-bg-section: var(--background);
    --bs-color-input: #6F7A91;
}



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

.btn:not(td .btn, .input-group-append .btn) {
    white-space: nowrap;
    /* font-size: 15.9px !important; */
    padding: 7px 20px;
    border-radius: 26px;
    font-weight: 300;
    font-family: 'Merriweather Sans',sans-serif;
    
}
.accordion-button {
    border-radius: 3px !important;
}
.btn-success {
    background-color: #2ed8b6;
    border-color: #2ed8b6;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}
.btn-success:hover {
    background-color: #59e0c5;
    border-color: #59e0c5;
}


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

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

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


.btn-inverse {
    background-color: #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;
}
.btn-default {
    box-shadow: 0  3px 7px rgba(0,0,0,0.05) !important;
    transition: box-shadow 0.2s ease;
    border-color: transparent !important;
}
.btn-default:hover {
    box-shadow: 0  3px 7px rgba(0,0,0,0.2) !important;
}
/* === */

/* Á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>span {
    color: var(--red) !important;
    font-size: 41px;
    font-weight: 900;
    opacity: 1;
}

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

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

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

.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:has(iframe#viewer) {
    /* z-index: 10061 !important; */
}

.k-window-content:has(iframe) {
    /* padding: 0px 13px !important; */
}
.modal-overflow .modal-body {
    overflow-x: hidden !important;
}
.k-window-titlebar
{
    display: none !important;
}

.modal-body-hiday {
    padding-bottom: 72px !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;
    padding: unset !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);
}

td.td-border.colKhoiLuongThan .k-input {
    min-width: 94px;
    text-align: center;
    font-weight: 600 !important;
}

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: 1px !important;
    font-weight: 400 !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;
}

.avatar-upload .avatar-edit input + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}
/* 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;
    padding-top: 5px;
   
}



#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;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input + label:after {
    /* content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto; */
} 

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

td.td-border.colThoiDiemQuaCan input {
    width: 145px !important;
    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 {
    width: 5%;
    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';
    /* 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;
}

.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: transparent;
    border-bottom: 1px solid var(--border-color-soft);
    padding: 13px 1px;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.card {
    /* box-shadow: unset;
    margin-bottom: 1px;
    background: transparent !important; */
}


.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;
}
div#divPhieuXuatContent {
    padding-top: unset;
    font-family: 'Roboto Condensed', sans-serif;
    color: #515967;
    font-weight: 600;
}
/* 
.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: #1B2E4B;
    color: #fff;
}

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

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

.content-header h3 {
    color: #2877c6 !important;
    font-size: 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 tr td {
    min-width: 153px;
}

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 {
    min-width: 76px !important;
    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.colDiemChatTaiDoTai {
    min-width: 186px !important;
    text-align: left;
}

td.td-border.colDiemChatTaiDoTai {
    min-width: 159px !important;
}

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

td.td-border.colDiemGiua {
    min-width: 113px !important;
}

td.td-border.colDonViTinh {
    min-width: 72px !important;
}

td.td-border.colThoiDiemQuaCan {
    min-width: 113px;
}

td.td-border.colKhoiLuongThan {
    min-width: 94px;
    text-align: center;
}

td.td-border.colGhiChu {
    min-width: 49px;
}

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

td.td-border.colKhoiLuongTong {
    min-width: 94px;
}

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

.k-textbox {
    padding: 9px 13px;
    background-color: #fafafa;
    border-color: #f0f0f0;
    font-size: 19px !important;
}

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

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

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 td.td-border.colTenKho {
    min-width: 135px;
}

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

li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
    white-space: nowrap;
    max-width: 314px;
    overflow: auto;
}

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 {
  /* width: 100vw;  */ /* Full chiều rộng màn hình */
  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: 49px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* đảm bảo hiển thị trên */
}
#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: 31px !important;
}
#idmesssagerror .message-header .btn:not(td .btn, .input-group-append .btn) {
    white-space: nowrap;
    font-size: 15.9px !important;
    padding: 5px 19px;
    border-radius: 21px;
    font-weight: 300;
    font-family: 'Merriweather Sans', sans-serif;
}
.message-header input#datetime-picker {
    font-size: 15.9px;
    
    font-weight: 900;
    max-width: 191px;
}

li.nav-item.d-none.d-sm-inline-block.add-breadcum>a>b {
    white-space: nowrap;
    max-width: 314px;
    font-size: 25px;
    overflow: auto;

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

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

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

}

/* Cho toàn bộ thanh tab cuộn ngang nếu vượt quá */
#myTab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 3px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* mượt trên iOS */
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 4px;
}

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

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



input#TextSearch {
    border-radius: unset !important;
    min-width: 153px;
    border-radius: unset !important;
}

.divTextSearch {
    text-align: right;
    margin-left: 13px !important;
}
.message-header {
    display: flex;
    justify-content: space-between;  /* Căn đều hai bên */
    align-items: center;  /* Căn giữa các phần tử theo chiều dọc */
    width: 100%;  /* Chiếm toàn bộ chiều rộng */
    padding: 1px;  /* Thêm padding nếu cần */
}
.modal-body {
    padding: 1px;
}
.message-header h3 {
    margin: 0;  /* Loại bỏ margin mặc định của h3 */
}

#closeButton {
    cursor: pointer;  /* Hiển thị con trỏ khi hover */
    font-size: 20px;  /* Thay đổi kích thước biểu tượng */
}
#idmesssagerror .modal-footer
{
    height: 49px;
}
#idmesssagerror .modal-header .d-flex.justify-content-between
{
    flex: auto;
}
span.input-group-append>button.btn.btn-success {
    /* border: 1px solid #e5e5e5;
    color: #444;
    background: #f2f2f2 !important;
    border-radius: unset; */
}

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

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

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

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

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



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

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

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

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


    min-height: 62px !important;
}

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

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

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

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

    display: flex;
    flex-wrap: nowrap;
}

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


}

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

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

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

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

.k-numerictextbox input[readonly],
.k-datepicker input[readonly],
.k-dropdown[aria-readonly=true] .k-dropdown-wrap,
.k-datetimepicker input[readonly] {
    background-color: #f7fafc !important;
    /* Nền sáng nhẹ, dễ nhìn */

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Đổ 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: 19px; */
    font-weight: 400;
    font-size: 16px !important;
    font-family: 'Merriweather',sans-serif;
}
/* #===cau hinh menu==== */
/* Định dạng ban đầu cho .os-content */
.os-content {
    /* opacity: 0.68; */
    /* Độ mờ ban đầu */
    transition: opacity 0.86s ease;
    /* Thêm hiệu ứng chuyển đổi mượt mà khi opacity thay đổi */
}

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

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

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

.card-body-group {
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    gap: 2px;
    
    padding: 13px 1px;
}

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

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


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

div#divFilter>div.card-body {
    padding: 5px 15px !important;
}

/* ====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: 394px;
    height: 149px;
    overflow: hidden;
}

img.con-dau-img {
    position: absolute;
    width: 266px;
    height: 227px;
    z-index: 1;
    top: -43px;
    left: 180px;

}

.con-dau {
    position: absolute;
    top: 62px;
    background: transparent;
    left: 200px;
    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 */
}


/* 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: 76px;
    left: 0px;
    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;
}

.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: #ffffff;

}

/* 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);
    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 {
    color: #999999;
}

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

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

}

.section-info-container {
    display: none;
    position: relative;
    width: 100%;
    height: 31px;
    overflow: hidden;
    padding: 19px;
    background: #fff;
}

.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;
    /* background: #d8cee3; */
    left: 0;
    vertical-align: middle;
    /* opacity: 0.3; */
    padding: 5px 1px;
}



.section-footer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

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

.section-footer-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
   
}
.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; 
}
div.section-header {
    /* position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 11px;
    left: 0;
    text-align: left;
    vertical-align: middle; */
}
.section-footer-container-boc {
   
   display: flex
;
    flex-wrap: nowrap;
    overflow-x: auto;
        align-items: anchor-center;
}
.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.k-widget.k-dropdown.form-control.form-control-sm {
    max-width: 191px;
}
span.input-group-append>button {
    border-radius: 1px 19px 19px 1px;
}
span.k-widget.k-datepicker.form-control {
    /* max-width: 134px; */
}
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;
}
#gridData tbody th, #gridData tbody td {
    
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 10px solid #fff !important;
    color: #6F7A91;
    font-family: 'Merriweather Sans',sans-serif !important;
    font-size: 14px;
    font-weight: 600;
}
#gridData 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;
    
}

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

nav.main-header ul.navbar-nav:last-child>li:last-child>a.nav-link>i {
    font-size: 19px;
    padding-top: 9px;
}
nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
    background: #fafafa;
    height: 68px;
}
input#TextSearch {
    border-radius: unset ;
    min-width: 153px;
    
    border: 1px solid var(--border-color-soft) !important;
    /* margin-left: 8px ; */
}
.k-combobox, .k-combobox .k-input, .k-datepicker,
.k-widget .k-input,input#TextSearch ,.k-combobox>*,
 .k-datepicker .k-input, .k-datetimepicker, .k-datetimepicker .k-input, .k-timepicker, .k-timepicker .k-input
{
 font-family: "Merriweather Sans", sans-serif ;
 font-size: 14px;
 color: var(--bs-color-input) !important;
 font-weight: 600;
}
.nav-sidebar .nav-link p {
    display: inline;
    margin: 0;
    white-space: normal;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 500;
}
p.lead+.modal-footer {
    height: 62px;
    height: 86px;
    justify-content: center;
    display: flex;
    align-items: baseline;
    flex-shrink: 1;
}




/* ====tien ich */
form#frmChangeProfile {
  padding-left: 39px;
    padding-right: 39px;
}
form#frmChangeChuKy {
   padding-left: 39px;
    padding-right: 39px;
}
form#frmChangePassword {
    padding-left: 39px;
    padding-right: 39px;
    background: #fff !important;
    opacity: 1 !important;
}
form#frmChangePassword input {
    height: 41px;
}



/* ======tbNhapXuat */

#tbNhapXuat tbody th, #gridData tbody td {
    
    border-bottom: 0;
    background: #F9F9F9;
    border-bottom: 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;
}
.dropdown-item {
   
    font-weight: 600;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15.9px;
    color: #515967;
   
}





.social-card {
    color: #fff;
    overflow: hidden;
}

.bg-simple-c-blue {
    background: #01a9ac;
}
.card-block {
    padding: 1.25rem;
}
.social-card .social-icon {
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 22px 23px;
}
.text-c-blue {
    color: #01a9ac;
}
.f-34 {
    font-size: 34px;
}
.feather {
    font-family: 'feather' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.modal-confirm-body {
    padding: 15px 0;
}
.modal-confirm-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.k-window .k-window-titlebar:has(+ .k-window-content iframe) {
    display: block;
}