@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: mfs-fonts;
    src: url('../fonts/mfs-fonts/mfs-light-2.0.2.woff2')
            format('woff2'),
        url('../fonts/mfs-light-2.0.2.woff')
            format('woff');
    font-display: swap;
}

body {
    font-family: 'mfs-fonts', sans-serif;
    font-size: 18px;
    height: 100%;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.01em;
    padding-right: 0!important;
    background: #F5F5DC;
    color: #4F565E;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* #14425d !important */

.blue.accent-3 {
    background-color: #14425d !important;
}

#main_giapha p {
    font-size: 18px;
}

#main_giapha .s-24 {
    font-size: 26px !important;
}

#main_giapha .s-14 {
    font-size: 16px !important;
}

.table thead th {
    font-weight: 400;
    font-size: 16px;
}

.table thead tr {
    border-bottom: none !important;
}

h4 {
    font-size: 24px;
}

h5, h6 {
    font-size: 18px;
    font-weight: 400;
    color: #4F565E;
    line-height: 1.5;
    margin: 0;
}

form label {
    font-size: 18px;
}

.s-20 {
    font-size: 20px;
}

.text_login {
    font-size: 16px;
}

/* Menu Custom */

.sidebar-menu li.header {
    font-size: 16px;
    padding: 10px 25px 10px 15px;
    color: #4F565E;
}

.sidebar-menu>li>a {
    display: block;
    padding: 10px 5px 10px 15px;
    color: #4F565E;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .4px;
}

label small {
    color: red;
}

#thongTinForm .btn {
    width: 120px; /* Adjust width as needed */
    margin-right: 10px; /* Space between buttons */
}

/* Select2 Custom */

.select2-container--default {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.select2-results__option {
  font-family: 'mfs-fonts', sans-serif;
  font-size: 16px; /* Change font size */
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 38px;
    font-size: 18px;
    padding: 1px 0px 0px 12px;
}

.select2-container--default .select2-selection--single:focus {
    border: 1px solid #03a9f4;
    box-shadow: 0 0 0 0 #03a9f4;
}

.select2-container--default .select2-search--dropdown {
    border-bottom: 1px solid #f5f5f5;
    border-radius: 1px 1px 0 0;
    margin-bottom: 10px;
    margin-top: -10px;
    position: relative;
}

.select2-container--default .select2-search--dropdown::before {
    color: #86939e;
    content: none !important;
    font-size: 0 !important;
    left: 0;
    position: absolute;
    top: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #4F565E !important;
    line-height: 28px;
    font-size: 1rem;
    padding-top: 3px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #e1e8ee;
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #4F565E !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 38px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: white;
    font-size: 18px;
    padding-left: 20px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: transparent;
    border: 0 none;
    color: #006400;
    height: 38px;
    padding: 5px 10px 5px 15px;
    margin: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background-color: transparent;
    border: 0 none;
    color: #006400;
    height: 38px;
    padding: 5px 10px 5px 15px;
    margin: 0;
}


.select2-results__message {
    color: #006400;
    font-size: 18px;
    margin-top: 0;
    text-align: center;
}

.select2-results__option {
    color: #86939e;
    cursor: pointer;
    font-size: 18px;
    padding-left: 20px;
    transition: background-color .3s ease 0s;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 0px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DateTime Picker */

.form-material .input-group input[type=text] {
    border: 1px solid #e1e8ee;
    box-shadow: none;
    padding-left: 11px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #e1e8ee;
    border-radius: .25rem;
}

/* Lựa chọn tình trạng */

.status-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.status-option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 120px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    position: relative;
}

.status-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.status-option .icon {
    font-size: 24px;
    margin-bottom: 5px;
    color: green;
}

.status-option.active {
    border-color: red;
}

.radio-circle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border: 1px solid green;
    border-radius: 50%;
    background-color: white;
}

.status-option.active .radio-circle {
    background-color: green;
}

#show_div label, #show_div p, #show_div .input-group {
    margin: 0;
    padding: 0;
}

#show_div label {
    font-size: 16px;
}

#show_div {
    display: none;
}

/* 

*/

.sidebar-menu .treeview-menu>li>a {
    display: block;
    font-size: 15px;
    font-weight: 300;
    padding: 10px 5px 10px 15px;
    color: #86939e;
}

#message {
    min-height: 50px;
}

.alert.alert-warning {
    background-color: rgba(252, 248, 227, .3);
    border-color: #faebcc;
    color: #8a6d3b;
}
.alert {
    border-radius: 5px;
    font-size: 15px;
    font-weight: 300;
}

.table tbody+tbody {
    border-top: 1px solid #e1e8ee;
}

.sticky-column {
    position: sticky;
    left: 0;
    z-index: 10;
}

.table {
    width: 100%;
    margin-bottom: 0rem;
    color: #212529;
    font-size: 16px;
}

.table td, .table th {
    padding: .55rem;
    vertical-align: top;
    border-top: 1px solid #e1e8ee;
}

td.fixed-length {
  max-width: 250px; /* Độ rộng tối đa */
  white-space: nowrap; /* Không cho xuống dòng */
  overflow: hidden; /* Ẩn phần vượt quá */
  text-overflow: ellipsis; /* Hiển thị dấu ... */
}

p.text_content {
    font-size: 16px;
    color: #212529;
    margin-bottom: 5px !important;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title { 
    padding-top: 3px;
}

.icon-s20 {
    font-size: 20px;
}

.suggestion {
    position: absolute;
    font-size: 18px;
    background: white;
    border: 1px solid #e1e8ee; /* Viền chung */
    border-top: none; /* Bỏ viền trên */
    border-radius: 0 0 10px 10px; /* Bo tròn hai góc dưới */
    padding: 5px 5px 5px 5px;
    margin-top: 1px;
    cursor: pointer;
    z-index: 1000;
}
.suggestion:hover {
/*     background: #f0f0f0; */
}

#select_id {
    border: none !important;
}

ul.pagination {
    margin: 0 !important;
}

.pagination li {
    display: inline;
    margin: 2.5px;
    font-size: 14px;
}

.pagination li.active a {
    color: #fff;
    background-color: #14425d;
    border-color: #14425d;
}

.pagination li a {
    display: block;
    padding: 4px 6px;
    color: #14425d;
    text-decoration: none;
    border: 1px solid #14425d;
    border-radius: 4px;
    transition: background-color 0.3sease;
}

.pagination li a:hover {
    border: 1px solid #14425d;
    border-radius: 4px;
    transition: background-color 0.3sease;
}

.page-item.active .page-link {
    display: block;
    padding: 4px 6px;
    color: #fff;
    background-color: #14425d;
    border-color: #14425d;
}

/* Cách nâng cao hơn */
.form-material .form-control[disabled], .form-material .form-control[readonly] {
    background-color: #E9ECEF;
    border: 1px solid #ced4da;
    color: #0247AB;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: not-allowed;
    opacity: 0.65;
}

.card-form {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none;
    border-radius: .25rem;
}

.card-form .card-body {
    flex: 1 1 auto;
    padding: 0.25rem;
}

/* Giới hạn chiều cao của dropdown và thêm scroll */
.select2-results__options {
    max-height: 150px; /* Chiều cao tối đa của dropdown, bạn có thể điều chỉnh */
    overflow-y: auto; /* Thêm scroll dọc khi vượt quá chiều cao */
}

/* Tùy chỉnh thanh scroll */
.select2-results__options::-webkit-scrollbar {
    width: 6px; /* Độ rộng của thanh scroll (nhỏ lại) */
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1; /* Màu nền của track */
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #888; /* Màu của thanh scroll */
    border-radius: 3px; /* Bo góc cho thanh scroll */
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #555; /* Màu khi hover */
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 115px;
    overflow-y: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: visible;
}

/* Tùy chỉnh hệ thống 16 cột trong div #tracuuForm */
#tracuuForm .col-1,
#tracuuForm .col-sm-1,
#tracuuForm .col-md-1,
#tracuuForm .col-lg-1,
#tracuuForm .col-xl-1 {
    flex: 0 0 6.25%;
    max-width: 6.25%;
}

#tracuuForm .col-2,
#tracuuForm .col-sm-2,
#tracuuForm .col-md-2,
#tracuuForm .col-lg-2,
#tracuuForm .col-xl-2 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

#tracuuForm .col-3,
#tracuuForm .col-sm-3,
#tracuuForm .col-md-3,
#tracuuForm .col-lg-3,
#tracuuForm .col-xl-3 {
    flex: 0 0 18.75%;
    max-width: 18.75%;
}

#tracuuForm .col-4,
#tracuuForm .col-sm-4,
#tracuuForm .col-md-4,
#tracuuForm .col-lg-4,
#tracuuForm .col-xl-4 {
    flex: 0 0 25%;
    max-width: 25%;
}

#tracuuForm .col-5,
#tracuuForm .col-sm-5,
#tracuuForm .col-md-5,
#tracuuForm .col-lg-5,
#tracuuForm .col-xl-5 {
    flex: 0 0 31.25%;
    max-width: 31.25%;
}

#tracuuForm .col-6,
#tracuuForm .col-sm-6,
#tracuuForm .col-md-6,
#tracuuForm .col-lg-6,
#tracuuForm .col-xl-6 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
}

#tracuuForm .col-7,
#tracuuForm .col-sm-7,
#tracuuForm .col-md-7,
#tracuuForm .col-lg-7,
#tracuuForm .col-xl-7 {
    flex: 0 0 43.75%;
    max-width: 43.75%;
}

#tracuuForm .col-8,
#tracuuForm .col-sm-8,
#tracuuForm .col-md-8,
#tracuuForm .col-lg-8,
#tracuuForm .col-xl-8 {
    flex: 0 0 50%;
    max-width: 50%;
}

#tracuuForm .col-9,
#tracuuForm .col-sm-9,
#tracuuForm .col-md-9,
#tracuuForm .col-lg-9,
#tracuuForm .col-xl-9 {
    flex: 0 0 56.25%;
    max-width: 56.25%;
}

#tracuuForm .col-10,
#tracuuForm .col-sm-10,
#tracuuForm .col-md-10,
#tracuuForm .col-lg-10,
#tracuuForm .col-xl-10 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
}

#tracuuForm .col-11,
#tracuuForm .col-sm-11,
#tracuuForm .col-md-11,
#tracuuForm .col-lg-11,
#tracuuForm .col-xl-11 {
    flex: 0 0 68.75%;
    max-width: 68.75%;
}

#tracuuForm .col-12,
#tracuuForm .col-sm-12,
#tracuuForm .col-md-12,
#tracuuForm .col-lg-12,
#tracuuForm .col-xl-12 {
    flex: 0 0 75%;
    max-width: 75%;
}

#tracuuForm .col-13,
#tracuuForm .col-sm-13,
#tracuuForm .col-md-13,
#tracuuForm .col-lg-13,
#tracuuForm .col-xl-13 {
    flex: 0 0 81.25%;
    max-width: 81.25%;
}

#tracuuForm .col-14,
#tracuuForm .col-sm-14,
#tracuuForm .col-md-14,
#tracuuForm .col-lg-14,
#tracuuForm .col-xl-14 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
}

#tracuuForm .col-15,
#tracuuForm .col-sm-15,
#tracuuForm .col-md-15,
#tracuuForm .col-lg-15,
#tracuuForm .col-xl-15 {
    flex: 0 0 93.75%;
    max-width: 93.75%;
}

#tracuuForm .col-16,
#tracuuForm .col-sm-16,
#tracuuForm .col-md-16,
#tracuuForm .col-lg-16,
#tracuuForm .col-xl-16 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Đảm bảo các cột vẫn sử dụng flexbox như Bootstrap */
#tracuuForm [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

#tracuuForm .form-control {
    border: 1px solid #e1e8ee;
/*     border: 1px solid #e1e8ee; */
    box-shadow: none;
    border-radius: 3px;
    transition: all .2s ease-in-out;
    font-weight: 300;
    height: 30px;
    font-size: 16px;
}

#tracuuForm .form-control:disabled, .form-control[readonly] {
    background-color: transparent;
    opacity: 1;
}

/* #tracuuForm input {
    padding-left: 0 !important;
} */

#tracuuForm label {
    color: #14425d;
    font-size: 17px;
    font-weight: 700;
}