/* =========================================================
   ATOSY — SUBJECT LIQUID STICKY TABLE HEADER
   ========================================================= */


/* Cho sticky hoạt động đúng */
#subject-full-page
.atosy-subject-sticky-host {
  overflow: visible !important;
}


/* =========================================================
   WHOLE HEADER
   ========================================================= */

#subject-full-page
#atosy-subject-fixed-table-header {

  position: sticky !important;

  top:
    var(
      --atosy-subject-table-header-top,
      200px
    ) !important;

  z-index:
    88 !important;

  box-sizing:
    border-box !important;

  margin:
    6px 0 10px 0 !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .92
    ) !important;

  border-radius:
    28px !important;

  overflow:
    hidden !important;

  background:
    rgba(
      249,
      252,
      255,
      .97
    ) !important;

  box-shadow:
    0 15px 34px
      rgba(
        3,
        38,
        87,
        .18
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        .96
      ) !important;

  backdrop-filter:
    blur(26px)
    saturate(160%) !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(160%) !important;
}


/* =========================================================
   TITLE ROW
   ========================================================= */

#subject-full-page
.atosy-subject-fixed-title-row {

  box-sizing:
    border-box !important;

  height:
    88px !important;

  padding:
    0 28px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    24px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.99),
      rgba(248,251,255,.99)
    ) !important;

  border-bottom:
    1px solid
    rgba(
      28,
      88,
      145,
      .10
    ) !important;
}


#subject-full-page
.atosy-subject-fixed-title-text {

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  min-width:
    0 !important;
}


#subject-full-page
.atosy-subject-fixed-title-name {

  color:
    #10427f !important;

  font-size:
    20px !important;

  line-height:
    1.2 !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.015em !important;
}


#subject-full-page
.atosy-subject-fixed-title-count {

  margin-top:
    5px !important;

  color:
    #69819c !important;

  font-size:
    12px !important;

  line-height:
    1 !important;

  font-weight:
    500 !important;
}


/* =========================================================
   PAGE SIZE
   ========================================================= */

#subject-full-page
.atosy-subject-fixed-page-size-slot {

  flex:
    0 0 auto !important;

  display:
    flex !important;

  align-items:
    center !important;
}


#subject-full-page
.atosy-subject-fixed-page-size-slot
.subject-full-page-size {

  position:
    static !important;

  inset:
    auto !important;

  margin:
    0 !important;

  transform:
    none !important;
}


/* =========================================================
   COLUMN NAMES
   ========================================================= */

#subject-full-page
.atosy-subject-fixed-columns {

  box-sizing:
    border-box !important;

  width:
    100% !important;

  height:
    58px !important;

  display:
    grid !important;

  align-items:
    stretch !important;

  background:
    linear-gradient(
      180deg,
      rgba(232,243,254,.99),
      rgba(222,237,251,.99)
    ) !important;
}


#subject-full-page
.atosy-subject-fixed-column {

  box-sizing:
    border-box !important;

  min-width:
    0 !important;

  padding:
    0 20px !important;

  display:
    flex !important;

  align-items:
    center !important;

  color:
    #557493 !important;

  font-size:
    12px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .06em !important;

  text-transform:
    uppercase !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


/* =========================================================
   HIDE ORIGINAL HEADER
   ========================================================= */

#subject-full-page
.atosy-subject-original-header-hidden {

  display:
    none !important;
}


/* Original thead không được chiếm chỗ */
#subject-full-page
.atosy-subject-original-thead-hidden {

  display:
    none !important;
}


/* =========================================================
   REMOVE TÊN ĐẦY ĐỦ + EMAIL
   ========================================================= */

#subject-full-page
.subject-full-table
th:nth-child(3),

#subject-full-page
.subject-full-table
td:nth-child(3),

#subject-full-page
.subject-full-table
th:nth-child(4),

#subject-full-page
.subject-full-table
td:nth-child(4) {

  display:
    none !important;
}


/* =========================================================
   DATA TABLE
   ========================================================= */

#subject-full-page
.subject-full-table-aligned {

  width:
    100% !important;

  max-width:
    100% !important;

  table-layout:
    fixed !important;

  border-collapse:
    collapse !important;
}


#subject-full-page
.subject-full-table-aligned td {

  box-sizing:
    border-box !important;

  min-width:
    0 !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


#subject-full-page
.subject-full-table-aligned
td:last-child {

  overflow:
    visible !important;

  text-align:
    center !important;
}


/* Bỏ component sticky cũ */
#subject-full-page
#atosy-subject-table-sticky-shell {

  display:
    none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 760px) {

  #subject-full-page
  #atosy-subject-fixed-table-header {

    position:
      relative !important;

    top:
      auto !important;

    width:
      100% !important;

    max-width:
      100% !important;
  }

}