.sticky-table-header {
  position: fixed;
  z-index: 1035;
  display: none;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  isolation: isolate;
}

.sticky-table-header.is-visible {
  display: block;
}

.sticky-table-header__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.sticky-table-header table {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
}

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

.sticky-table-header,
.sticky-table-header * {
  pointer-events: auto;
}

/*
 * Reset position và z-index lấy từ CSS của table gốc.
 * Nếu không reset, các cột khác có thể đè lên cột đầu.
 */
.sticky-table-header thead,
.sticky-table-header thead tr {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
  overflow: visible !important;
}

.sticky-table-header thead th,
.sticky-table-header thead td {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;
  transform: none !important;
  background-clip: padding-box;
}

/*
 * Cột đầu luôn nằm trên tất cả các cột còn lại.
 * Transform thực tế được JavaScript gán inline.
 */
.sticky-table-header thead .sticky-clone-column {
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate;
  background-clip: padding-box;
}

/*
 * Không hiển thị sticky header khi Bootstrap modal đang mở.
 *
 * modal-backdrop thường là 1040
 * modal thường là 1050
 * sticky header là 1035
 */
body.modal-open .sticky-table-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sticky-table-header thead .sticky-clone-column {
  position: relative !important;
  z-index: 1000 !important;
}