body {
    font-family: Helvetica Neue, sans-serif;
}

.card {
    border: none;
}

.btn.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
    border-radius: 0.2rem;
}

.no-padding {
    padding: 0px !important
}

.menu {
    border-bottom: 1px solid #e7e7e7;
}

.navbar {
    padding: 0px 20px;
}

.navbar-light .navbar-nav .nav-link {
    font-size: 13px;
    padding: 0.8rem 1rem;
    padding-left: 20px;
    padding-right: 20px;
    color: #1d1b1a;
}

.dropdown-item {
    font-size: 13px;
    padding-right: 20px;
    font-weight: 200
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.nav-item.active {
    border-bottom: 2px solid #206bc4;
}

.navbar-brand img {
    height: 2rem;
    width: auto;
    padding-right: 15px;
}

.bg-light {
    background: white !important
}

    .bg-light:hover {
        background: #ededed;
    }
/*content*/
.content {
    margin-top: 10px;
}
/*card*/
.card {
    border-radius: 2px;
    border: none;
    margin-top: 0px !important;
}

    .card .card-header {
        padding: 10px 10px;
        background-color: white;
    }

        .card .card-header .card-title {
            font-size: 14px;
            margin-bottom: 0px;
        }

    .card .card-body {
        padding: 10px;
    }


/*table*/
/*.table {
}

    .table td, .table th {
        padding: 5px 3px;
        font-size: 13px;
    }

.bootstrap-table .fixed-table-toolbar .search-input {
    padding: 5px;
    height: 30px;
    font-size: 13px;
}

.bootstrap-table .fixed-table-toolbar button {
    height: 30px;
    font-size: 13px;
    margin-bottom:3px;
}
.bootstrap-table .fixed-table-loading {
    display: none
}*/

/*Filter*/
.filter {
    width: 100%;
    height: auto;
}

    .filter .filter-item {
        width: 190px;
        padding: 0 5px;
    }

        .filter .filter-item label {
            font-size: 11px;
            padding: 5px 0px;
            margin: 0px;
        }

        .filter .filter-item input, .filter .filter-item select {
            width: 100%;
            height: 30px;
            padding: 5px;
            font-size: 12px;
            color: #636363;
            border: 1px solid #e0e0e0;
            outline: none;
            border-radius: 5px;
        }

            .filter .filter-item input:hover {
                border: 1px solid #5161ce;
            }

        .filter .filter-item button.search {
            margin-top: 20px;
            height: 28px;
            border-radius: 4px;
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            padding: 8px 10px;
            font-size: 11px;
            line-height: 1.2;
            outline: none;
            border: none;
        }


/*select2*/
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
    height: 30px;
    font-size: 1.3rem;
    padding: 0px;
    border-radius: 0px;
    border: 1px solid #e0e0e0;
}

    .select2-container--default .select2-selection--single:hover {
        /*border: 1px solid #5161ce;*/
    }

.select2-selection .select2-selection--single {
    border: 1px solid #5161ce;
}

.select2-results__option {
    font-size: 12px;
    padding: 7px;
    margin-left: 0px;
}

.select2-search--dropdown .select2-search__field {
    font-size: 12px;
    outline: none
}

.select2-search--dropdown {
    padding: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
}

@media(max-width: 992px) {
    .wm50 {
        width: 50% !important;
    }

    .wm100 {
        width: 100% !important;
    }
}




/*Loading*/
.loading {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 2000;
    display: none;
    background: none;
    opacity: 1;
}

    .loading .box {
        width: 150px;
        margin: 40vh auto;
        padding: 10px;
        text-align: center;
        opacity: 1;
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
        border-radius: 10px;
    }

        .loading .box img {
            height: 58px
        }

        .loading .box .blink {
            animation: blinker 1s linear infinite;
        }

        .loading .box .stop-loading {
            color: red;
            cursor: pointer;
            margin-bottom: 0px;
            font-size: 10px;
        }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
/*Table*/
th {
    line-height: 3.5;
}

/*SCROLL BAR*/ /* width */

::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
    cursor: all-scroll
}
/* Track */

::-webkit-scrollbar-track {
    background: #f8f8f8;
}
/* Handle */

::-webkit-scrollbar-thumb {
    background: #747474;
}
    /* Handle on hover */

    ::-webkit-scrollbar-thumb:hover {
        background: red;
    }



@media (max-width: 1200px) {
    /*.card-body .col-md-12.a {
        height: 500px;
        width: 2000px;
    }*/
}

/*Thiết lập chiều rộng và chiều cao cho các thẻ <th> khi màn hình lớn hơn hoặc bằng 1200px */
@media (min-width: 1200px) {
    /*.card-body .col-md-12.a {
        height: 600vh;
        width: 100%;
    }*/

    th, td {
        font-size: 11px;
        line-height: 10px;
    }

    tr th {
        background: #006395;
    }


    .sticky-header {
        width: 100%;
        border-collapse: collapse;
    }

        .sticky-header thead {
            position: sticky;
            top: 0;
            background-color: #206bc4;
            z-index: 1;
            border-bottom: 1px solid #ccc;
        }

        .sticky-header th {
            padding: 8px;
            text-align: left;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
        }
}


@media (min-width: 1600px) {
    /*.card-body .col-md-12.a {
        height: 1000px;
        width: 100%;
    }*/
}

@media (min-width: 2700px) {
    /*.card-body .col-md-12.a {
        height: 1500px;
        width: 100%;
    }*/
}

@media (min-width: 3900px) {
    /* .card-body .col-md-12.a {
        height: 2000px;
        width: 100%;
    }*/
}

@media (min-width: 5400px) {
    /* .card-body .col-md-12.a {
        height: 2500px;
        width: 100%;
    }*/
}


.dataTables_wrapper .row {
    margin: 0px !important;
}

.tableFilter > tbody > tr > td {
    word-break: keep-all;
    text-overflow: ellipsis;
    /*word-break: break-all;*/
    overflow: hidden;
}

td, th {
    border: 1px solid #c9c3c3 !important;
    line-height: 1.5 !important;
}

th {
    color: white;
}

#DataTables_Table_0_wrapper .row .col-sm-12 {
    padding: 0px
}

.table thead tr th {
    text-align: center;
    vertical-align: middle;
}

.table_board .search_box {
    padding-right: 5px !important
}

.table_board .search_input {
    height: 25px;
    font-size: 13px;
    padding: 2px 5px;
}

/*Tale fixed*/
.intro {
    /*max-width: 1280px;
    margin: 1em auto;*/
}

.table-scroll {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    /*height: 350px;*/
}

    .table-scroll table {
        width: 100%;
        /*min-width: 1280px;*/
        margin: auto;
        border-collapse: separate;
        border-spacing: 0;
    }

.table-wrap {
    position: relative;
}

.table-scroll th,
.table-scroll td {
    /*padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;*/
}

.table-scroll thead th {
    /*background: #333;
    color: #fff;*/
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4
}

a:focus {
    /*background: red;*/
}

.table-scroll .fixed {
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
}

.table-scroll th.fixed {
    z-index: 5;
}

.table-scroll td.fixed {
    z-index: 3;
    background-color: white
}

.table-borderless tr td, .table-borderless tr th {
    border: none !important
}

div.dataTables_filter input {
    height: 25px;
    font-size: 1.2rem;
    margin-left: 8px
}

div.dataTables_filter label {
    margin-bottom: 0px;
    font-size: 13px;
}

.dataTables_wrapper .row .col-sm-12, .dataTables_wrapper .row .col-sm-6 {
    margin: 0px !important;
    padding: 0px !important;
}

table.dataTable {
    margin-top: 0px !important
}

.dataTables_wrapper .row:first-child {
    background: #e8e8e8;
}

table.treetable tbody tr td {
    cursor: default;
    padding: .4em 1em !important;
    vertical-align: unset !important;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 3px;
    font-size: 11px;
    vertical-align: middle;
    padding-right: 3px !important;
}

/*leadtime*/
.table-wrapper {
    max-height: 100vh; 
    overflow: auto; 
}

.table-leadtime {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .table-leadtime thead th {
        position: sticky;
        top: -1px;
        z-index: 10;
        color: #fff;
        text-align: center;
        background: #2f7d32;
    } 
    .table-leadtime thead tr:nth-child(2) th {
        top: 38px; 
        z-index: 9;
    }

.table-leadtime {
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
    table-layout: fixed
}  

    .table-leadtime th {
        color: #fff;
        text-align: center;
        background: #2f7d32;
    }

    .table-leadtime .text-left {
        text-align: left;
    }

    .table-leadtime .text-center {
        text-align: center;
    }

    .table-leadtime tr td.text-right {
        text-align: right;
    }

    .table-leadtime td {
        vertical-align: middle;
        text-align: center;
    }
    .table-leadtime  .color-check {
        background: #cef5c8 !important;
        color: black !important
    }

/* db-leadtime */
/* ROOT */
.db-leadtime {
    width: 100%; 
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

    /* ===== DB MAIN (MỖI KHỐI 100%) ===== */
    .db-leadtime > .db-main {
        width: 100%;
        display: flex;
    }

    /* ===== LEFT BAR ===== */
    .db-leadtime .db-left {
        width: 250px;
        background: #b30000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .db-leadtime .db-left .db-title {
            text-align: center;
            font-weight: bold;
            font-size: 25px;
            line-height: 1.4;
        }

    /* ===== RIGHT CONTENT ===== */
    .db-leadtime .db-right {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        /* ===== HEADER ===== */
        .db-leadtime .db-right .db-header {
            background: #0b5ea8;
            padding: 10px 20px;
        }

            .db-leadtime .db-right .db-header .db-workshop {
                font-size: 20px;
                font-weight: bold;
            }

            .db-leadtime .db-right .db-header select {
                margin-left: 10px;
                padding: 4px 10px;
                border-radius: 6px;
                border: none;
                outline: none;
            }

        /* ===== TOP AREA ===== */
        .db-leadtime .db-right .db-top {
            display: flex;
            gap: 20px;
            padding: 15px 20px;
            align-items: center;
        }

        /* ===== FILTER ===== */
        .db-leadtime .db-right .db-filter {
           width:25%;
        }

            .db-leadtime .db-right .db-filter > div {
                margin-bottom: 10px;
            }

            .db-leadtime .db-right .db-filter select {
                margin-left: 10px;
                padding: 4px 8px;
                border-radius: 6px;
                border: none;
                outline: none;
                background: #008aff;
                color: white;
                font-weight:bold
            }

        /* ===== KPI ===== */
        .db-leadtime .db-right .db-kpi {
            width: 25%;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }

            .db-leadtime .db-right .db-kpi .label {
                font-size: 0.8rem;
                margin-bottom: 5px;
            }

            .db-leadtime .db-right .db-kpi .value {
                font-size: 2rem;
                font-weight: bold;
            }

            .db-leadtime .db-right .db-kpi.green {
                background: #3a7f1c;
            }

            .db-leadtime .db-right .db-kpi.orange {
                background: #ff9800;
            }

            .db-leadtime .db-right .db-kpi.red {
                background: #a61c00;
            }

    /* ===== SECOND MAIN (TABLE ZONE) ===== */
    .db-leadtime > .db-main:last-child {
        flex-direction: column;
    }

    /* ===== SECTION TITLE ===== */
    .db-leadtime .db-section-title {
        padding: 10px 20px;
        font-weight: bold;
    }

    /* ===== TABLE ===== */
    .db-leadtime .db-table-wrapper {
        padding: 0   20px;
        overflow: auto;
    }

        .db-leadtime .db-table-wrapper .db-table {
            width: 100%;
            border-collapse: collapse;
            background: #0b3b6e;
        }

            /* Header sticky */
            .db-leadtime .db-table-wrapper .db-table thead th {
                background: #444;
                padding: 2px;
                text-align: center;
                position: sticky;
                top: 0;
                z-index: 2;
            }

            /* Body */
            .db-leadtime .db-table-wrapper .db-table tbody td {
                padding: 8px;
                border-top: 1px solid rgba(255,255,255,0.15);
                text-align: center;
                font-size: 16px;
            }

                /* Text align cho cột chữ */
                .db-leadtime .db-table-wrapper .db-table tbody td:nth-child(3),
                .db-leadtime .db-table-wrapper .db-table tbody td:nth-child(4) {
                    text-align: center;
                }

    /* ===== STATUS ===== */
    .db-leadtime .pos {
        color: #00ff00;
    }

    .db-leadtime .neg {
        color: #ff3333;
    }

    .db-leadtime .neutral {
        color: #00ff00;
    }


.db-chart {
    width: 100%;
    background: #0b3b6e;
    border: 4px solid #000;
    padding: 10px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    border: 20px solid black;
}

    .db-chart .db-chart-header {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #000;
        padding: 8px 12px;
        font-weight: bold;
        font-size: 14px;
    }

    .db-chart .db-chart-body {
        background: #eef7ff;
        padding: 20px;
    }

    .db-chart canvas {
        width: 100% !important;
        height: 25vh !important
    }