table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled,
    table.dataTable thead > tr > td.sorting,
    table.dataTable thead > tr > td.sorting_asc,
    table.dataTable thead > tr > td.sorting_desc,
    table.dataTable thead > tr > td.sorting_asc_disabled,
    table.dataTable thead > tr > td.sorting_desc_disabled {
        cursor: pointer;
        position: relative;
        padding-right: 26px;

    }
    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after,
    table.dataTable thead > tr > td.sorting:before,
    table.dataTable thead > tr > td.sorting:after,
    table.dataTable thead > tr > td.sorting_asc:before,
    table.dataTable thead > tr > td.sorting_asc:after,
    table.dataTable thead > tr > td.sorting_desc:before,
    table.dataTable thead > tr > td.sorting_desc:after,
    table.dataTable thead > tr > td.sorting_asc_disabled:before,
    table.dataTable thead > tr > td.sorting_asc_disabled:after,
    table.dataTable thead > tr > td.sorting_desc_disabled:before,
    table.dataTable thead > tr > td.sorting_desc_disabled:after {
        position: absolute;
        display: block;
        opacity: 0.125;
        right: 10px;
        line-height: 9px;
        font-size: 0.9em;

    }
    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before,
    table.dataTable thead > tr > td.sorting:before,
    table.dataTable thead > tr > td.sorting_asc:before,
    table.dataTable thead > tr > td.sorting_desc:before,
    table.dataTable thead > tr > td.sorting_asc_disabled:before,
    table.dataTable thead > tr > td.sorting_desc_disabled:before {
        bottom: 50%;
        content: "▲";
    }
    table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after,
    table.dataTable thead > tr > td.sorting:after,
    table.dataTable thead > tr > td.sorting_asc:after,
    table.dataTable thead > tr > td.sorting_desc:after,
    table.dataTable thead > tr > td.sorting_asc_disabled:after,
    table.dataTable thead > tr > td.sorting_desc_disabled:after {
        top: 50%;
        content: "▼";
    }
    table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after,
    table.dataTable thead > tr > td.sorting_asc:before,
    table.dataTable thead > tr > td.sorting_desc:after {
        opacity: 0.6;
    }
    table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before,
    table.dataTable thead > tr > td.sorting_desc_disabled:after,
    table.dataTable thead > tr > td.sorting_asc_disabled:before {
        display: none;
    }
    table.dataTable thead > tr > th:active,
    table.dataTable thead > tr > td:active {
        outline: none;
    }

    div.dataTables_scrollBody table.dataTable thead > tr > th:before, div.dataTables_scrollBody table.dataTable thead > tr > th:after,
    div.dataTables_scrollBody table.dataTable thead > tr > td:before,
    div.dataTables_scrollBody table.dataTable thead > tr > td:after {
        display: none;
    }
    .select2-dropdown{
        border: 1px solid #e6e7e9;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field{
        border: 1px solid #e6e7e9;
        outline: none;
    }
    .select2-container--default .select2-selection--single{
        border: 1px solid #e6e7e9;
        height: 41px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height: 41px;
        font-size: 14px;

    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
        height: 41px;
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #ffffff;
        color: #206bc4;

    }
    .select2-results__option{
      white-space: nowrap;
    }
    .select2-container--default .select2-results__option--selected{
        background:none;
        color: #206bc4;
    }
    .select2-search--dropdown{
        padding: 8px;
    }
    .select2-results{
        padding:8px
    }
    tr.odd td{background: #fff !important;}
    tr.even td{background: #fff !important;}
    .form-select .dropdown-menu, .multiple_select .dropdown-menu {
        width: 100% !important;
        outline: none !important;
    }
    .select2-container--default.select2-container--disabled .select2-selection--single{
        background: #FFF !important;
    }
    .ts-control{min-height: calc(1.4285714286em + 0.875rem + 5px);}


    .dtfc-fixed-left {
            z-index: 1 !important;
    }
    .form-select:disabled {
        background-color: #fafafa !important;
    }
    .ts-wrapper.form-select.single.disabled {
            background-color: #fafafa;
            border-color: #e9ecef;
            opacity: 1;
        }

    .disabled .ts-control {
            opacity:1 !important;

    }
    input[readonly],
    textarea[readonly] {

    }
        #approval_box{
            overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
            /* Firefox */
            scrollbar-width: none;

            /* IE/Edge cũ */
            -ms-overflow-style: none;
        }
         #approval_step {
            padding: 0;
            list-style-type: none;
            font-size: 12px;
            clear: both;
            line-height: 1em;
            margin: 0 -1px;
            text-align: center;
             display: flex;
            flex-wrap: nowrap;
            width: max-content;
        }

        #approval_step li {
            float: left;
            padding: 5px 20px 5px 20px;
            background: #EFF2FA;
            color: #182433;

            position: relative;
            border-top: 1px solid #EFF2FA;
            border-bottom: 1px solid #EFF2FA;
            margin: 0 3px;
        }


        #approval_step li:before {
            content: '';
            border-left: 35px solid #fff;
            border-top: 35px solid transparent;
            border-bottom: 35px solid transparent;
            position: absolute;
            top: 0;
            left: 0;

        }
        #approval_step li:first-child:before{
            border-left: 1px solid #EFF2FA;
        }
        #approval_step li:after {
            content: '';
            border-left: 35px solid #EFF2FA;
            border-top: 35px solid transparent;
            border-bottom: 35px solid transparent;
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 1;
        }

        #approval_step li.active {

        }
        #approval_step li:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        #approval_step li.active:after {
            border-left-color: #ecf5fc;
        }

        #approval_step li {

    /* thêm vào */
    min-width: 160px;
    max-width: 220px;

    min-height: 70px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

}


/* nội dung bên trong */

#approval_step .approval-content {

    width: 100%;
    padding-left: 20px;
    overflow: hidden;

    text-align: center;

}



/* fullname */

#approval_step .approval-content {

    word-break: break-word;

}


/* email dài */

#approval_step .approval-email {

    display: inline-block;

    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    vertical-align: middle;

}

        .offcanvas-bottom {
          height: 100vh !important;      /* 50% viewport height */
          max-height: 100vh  !important;
        }
        .custom-offcanvas .offcanvas-body {
          overflow-y: auto;
        }

        .custom-offcanvas .table thead th {
          position: sticky;
          top:0;
          z-index: 10;

        }
        .material-selected {
          background: #e9f0f9;
        }

        .material-selected  td {

        }

        .table_materials tbody tr:hover {
          background-color: #e9f0f9;
          cursor: pointer;

        }
        .modal-90-width {
                margin-top:2%;
                margin-left: 12%;
                margin-right: 12%;

        }
        .form-control:read-only {
                box-shadow: none;
                background: #fafafa !important;
            }
        .focus .ts-control{
            box-shadow: none !important;
        }

        .select2-container--default .select2-selection--single{height: 40px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height: 38px  !important;
        font-size: 14px  !important;
        padding-left: 12px !important;
    }
/*.select2-selection__arrow{display: none}*/
.limit-2-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.limit-1-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    max-width: 250px;
}

.select2-container [title] {
    pointer-events: none;
}
.fixedHeader-locked{
  display: none !important;
}
.form_detail .form-label{
    color: #667085 !important;
}
.nav-bordered .nav-link{
    color: #0c121a;

}
.input-group-flat:focus-within{
    box-shadow: none !important;
}
.input-group-flat:focus-within .form-control, .input-group-flat:focus-within .input-group-text {
    border-color: #dce1e7 !important;

}
.nav-link.disabled, .nav-link:disabled {
    color: var(--tblr-nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
}
.ts-control>input{width: 10%;min-width:0px !important;}
#tblPOItems td , #tblPOItems .form-control ,
#tblPRItems td , #tblPRItems .form-control
{

}

.alert {
  --tblr-alert-color: var(--tblr-body-color);
  --tblr-alert-bg: color-mix(in srgb, var(--tblr-alert-color) 10%, transparent);
  --tblr-alert-padding-x: 1rem;
  --tblr-alert-padding-y: 0.75rem;
  --tblr-alert-margin-bottom: 1rem;
  --tblr-alert-border-color: color-mix(in srgb, var(--tblr-alert-color) 20%, transparent);
  --tblr-alert-border: var(--tblr-border-width) solid var(--tblr-alert-border-color);
  --tblr-alert-border-radius: var(--tblr-border-radius);
  --tblr-alert-link-color: inherit;
  --tblr-alert-heading-font-weight: var(--tblr-font-weight-medium);
  position: relative;
  padding: var(--tblr-alert-padding-y) var(--tblr-alert-padding-x);
  margin-bottom: var(--tblr-alert-margin-bottom);
  background-color: color-mix(in srgb, var(--tblr-alert-bg), var(--tblr-bg-surface));
  border-radius: var(--tblr-alert-border-radius);
  border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-alert-border-color);
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.alert-heading {
  color: inherit;
  margin-bottom: 0.25rem;
  font-weight: var(--tblr-alert-heading-font-weight);
}

.alert-description {
  color: var(--tblr-secondary);
}

.alert-icon {
  color: var(--tblr-alert-color);
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.alert-action {
  color: var(--tblr-alert-color);
  text-decoration: underline;
}
.alert-action:hover {
  text-decoration: none;
}

.alert-list {
  margin: 0;
}

.alert-link {
  font-weight: var(--tblr-font-weight-bold);
  color: var(--tblr-alert-link-color);
}
.alert-link, .alert-link:hover {
  color: var(--tblr-alert-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: calc(var(--tblr-alert-padding-x) / 2 - 1px);
  right: calc(var(--tblr-alert-padding-y) / 2 - 1px);
  z-index: 1;
  padding: calc(var(--tblr-alert-padding-y) * 1.25) var(--tblr-alert-padding-x);
}

.alert-important {
  border-color: var(--tblr-alert-color);
  background-color: var(--tblr-alert-color);
  color: var(--tblr-white);
}
.alert-important .alert-description {
  color: inherit;
}
.alert-important .alert-icon {
  color: inherit;
}

.alert-minor {
  background: transparent;
  border-color: var(--tblr-border-color);
}

.alert-primary {
  --tblr-alert-color: var(--tblr-primary);
}

.alert-secondary {
  --tblr-alert-color: var(--tblr-secondary);
}

.alert-success {
  --tblr-alert-color: var(--tblr-success);
}

.alert-info {
  --tblr-alert-color: var(--tblr-info);
}

.alert-warning {
  --tblr-alert-color: var(--tblr-warning);
}

.alert-danger {
  --tblr-alert-color: var(--tblr-danger);
}

.alert-light {
  --tblr-alert-color: var(--tblr-light);
}

.alert-dark {
  --tblr-alert-color: var(--tblr-dark);
}

.alert-muted {
  --tblr-alert-color: var(--tblr-muted);
}

.alert-blue {
  --tblr-alert-color: var(--tblr-blue);
}

.alert-azure {
  --tblr-alert-color: var(--tblr-azure);
}

.alert-indigo {
  --tblr-alert-color: var(--tblr-indigo);
}

.alert-purple {
  --tblr-alert-color: var(--tblr-purple);
}

.alert-pink {
  --tblr-alert-color: var(--tblr-pink);
}

.alert-red {
  --tblr-alert-color: var(--tblr-red);
}

.alert-orange {
  --tblr-alert-color: var(--tblr-orange);
}

.alert-yellow {
  --tblr-alert-color: var(--tblr-yellow);
}

.alert-lime {
  --tblr-alert-color: var(--tblr-lime);
}

.alert-green {
  --tblr-alert-color: var(--tblr-green);
}

.alert-teal {
  --tblr-alert-color: var(--tblr-teal);
}

.alert-cyan {
  --tblr-alert-color: var(--tblr-cyan);
}

.custom-dropdown {
    min-width: max-content;
}
.dropdown-menu .dropdown-item {
    white-space: nowrap;
}

.input-group>.form-control:focus, .input-group>.form-floating:focus-within, .input-group>.form-select:focus{
    z-index: 0 !important;
}


.btn-animate-icon .icon {
  transition: transform 0.3s ease;
}
.btn-animate-icon:hover .icon, .btn-animate-icon:focus-visible .icon {
  transform: translateX(4px);
}
.btn-animate-icon.btn-animate-icon-rotate:hover .icon, .btn-animate-icon.btn-animate-icon-rotate:focus-visible .icon {
  transform: rotate(90deg);
}
.btn-animate-icon.btn-animate-icon-move-start:hover .icon, .btn-animate-icon.btn-animate-icon-move-start:focus-visible .icon {
  transform: translateX(-4px);
}
.btn-animate-icon.btn-animate-icon-pulse:hover .icon, .btn-animate-icon.btn-animate-icon-pulse:focus-visible .icon {
  transform: none;
  animation: pulse 0.9s;
}
.btn-animate-icon.btn-animate-icon-shake:hover .icon, .btn-animate-icon.btn-animate-icon-shake:focus-visible .icon {
  transform: none;
  animation: shake 0.9s;
}
.btn-animate-icon.btn-animate-icon-tada:hover .icon, .btn-animate-icon.btn-animate-icon-tada:focus-visible .icon {
  transform: none;
  animation: tada 0.9s;
}
.table-wrapper {
    overflow: auto;
    position: relative;
    width: 100%;
    max-height: 488px;
}

.freeze-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: max-content;
}

/* Header */
.freeze-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f6f8fb !important;
}

/* Các cột sticky sẽ được JS thêm class */
.freeze-table .sticky-col {
    position: sticky;
    background: #fff;
    z-index: 1;
}

/* Góc trên trái */
.freeze-table thead .sticky-col {
    z-index: 3;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 20px;
    height: 100%;
    right: 12px;
    top: 0;
    background: center no-repeat;
    background-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238391a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
}

.section {
  //background: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #edf2f7;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

@keyframes shake {
  0% {
    transform: scaleX(1);
  }
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
  }
  50%, 70%, 90% {
    transform: scale3d(1.25, 1.25, 1.25) rotate(5deg);
  }
  60%, 80% {
    transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
  }
  to {
    transform: scaleX(1);
  }
}

.page-link:focus {
    box-shadow: none !important;
}

.lazy-select2:disabled + .select2-container .select2-selection {
    background-color: #fafafa !important;
}

/* Mobile */
@media (max-width: 768px) {

    .card-header.scroller {
        padding: 12px 16px;
    }

    /* Icon back */
    .card-header.scroller .icon {
        width: 20px !important;
        height: 20px !important;
        --tblr-icon-size: 1.2rem !important;
    }

    /* PR Number */
    .card-header.scroller h2 {
        font-size: 1rem;
        margin-bottom: 4px !important;
        line-height: 1.3;
    }

    /* Total amount */
    .card-header.scroller h1 {
        font-size: 1.1rem;
        margin-bottom: 0;
        line-height: 1.2;
    }

    /* "Total amount" */
    .card-header.scroller .subheader {
        font-size: .7rem;
        padding-bottom: 2px !important;
    }

    /* Badge */
    .card-header.scroller .badge {
        font-size: .65rem;
        padding: .25rem .45rem;
    }

    /* Cột bên phải */
    .card-header.scroller .col-auto {
        padding-left: 8px;
    }



    .table-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .table-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Table rộng theo nội dung */
    .table-wrapper table {
        width: max-content;
        min-width: 100%;
    }

    /* Bỏ sticky header */
    .table-wrapper thead th {
        position: static !important;
        top: auto !important;
    }

    /* Bỏ sticky column */
    .table-wrapper .sticky-col,
    .table-wrapper .freeze-col,
    .table-wrapper [class*="sticky-column"] {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
    }

    .custom_table {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;

        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .custom_table::-webkit-scrollbar {
        display: none;
    }

    .custom_table table {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
    }



}