/* =========================================================
   ATOSY ERP — SUBJECT CLASSIFICATION V1
   ========================================================= */


/* ============================
   SEARCH — TRUE LIQUID PILL
   ============================ */

#subject-full-page .subject-full-search {
  min-width: 0 !important;
  height: 58px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 0 20px !important;

  overflow: hidden !important;

  border-radius: 999px !important;

  border:
    1px solid
    rgba(135, 196, 255, 0.42) !important;

  background:
    linear-gradient(
      135deg,
      rgba(31, 101, 196, 0.28),
      rgba(13, 55, 126, 0.38)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 30px rgba(0,39,105,.13) !important;

  backdrop-filter:
    blur(18px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(150%) !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}


#subject-full-page .subject-full-search:hover {
  border-color:
    rgba(118, 199, 255, .72) !important;
}


#subject-full-page .subject-full-search:focus-within {
  border-color:
    rgba(87, 185, 255, .95) !important;

  background:
    linear-gradient(
      135deg,
      rgba(35, 117, 226, 0.36),
      rgba(16, 69, 154, 0.42)
    ) !important;

  box-shadow:
    0 0 0 3px rgba(64, 161, 255, .14),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 16px 38px rgba(0,55,130,.18) !important;
}


#subject-full-page .subject-full-search > span {
  flex: 0 0 auto !important;

  display: grid !important;
  place-items: center !important;

  width: 22px !important;
  height: 22px !important;

  color:
    rgba(201, 230, 255, .92) !important;

  font-size: 18px !important;
  line-height: 1 !important;
}


#subject-full-page
#subject-full-search-input {

  flex: 1 1 auto !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 0 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #ffffff !important;

  font: inherit !important;

  font-size: 15px !important;
  font-weight: 600 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}


#subject-full-page
#subject-full-search-input::placeholder {

  color:
    rgba(210, 231, 255, .57) !important;

  opacity: 1 !important;
}


/* ============================
   TABLE + RIGHT FILTER LAYOUT
   ============================ */

#subject-full-page
.subject-full-content-layout {

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    338px !important;

  gap: 20px !important;

  align-items: start !important;

  width: 100% !important;

  margin-top: 22px !important;
}


#subject-full-page
.subject-full-content-layout
.subject-full-card {

  min-width: 0 !important;

  margin-top: 0 !important;
}


/* ============================
   RIGHT CLASSIFICATION PANEL
   ============================ */

#subject-full-page
.subject-classification-panel {

  position: sticky !important;
  top: 102px !important;

  width: 100% !important;

  max-height:
    calc(100vh - 126px) !important;

  overflow:
    hidden auto !important;

  padding: 20px !important;

  border-radius: 28px !important;

  border:
    1px solid
    rgba(113, 186, 255, .38) !important;

  background:
    linear-gradient(
      145deg,
      rgba(11, 54, 122, .91),
      rgba(10, 38, 94, .92)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 22px 55px rgba(0, 31, 89, .24) !important;

  backdrop-filter:
    blur(24px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(150%) !important;
}


.subject-classification-head {

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 14px !important;

  padding:
    2px 2px 16px !important;
}


.subject-classification-eyebrow {

  margin-bottom: 5px !important;

  color:
    #72baff !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing:
    .16em !important;

  text-transform:
    uppercase !important;
}


.subject-classification-head h3 {

  margin: 0 !important;

  color: #fff !important;

  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}


.subject-classification-head p {

  margin:
    5px 0 0 !important;

  color:
    rgba(206, 226, 255, .65) !important;

  font-size: 12px !important;
}


.subject-classification-clear {

  width: 36px !important;
  height: 36px !important;

  flex:
    0 0 36px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius:
    50% !important;

  border:
    1px solid
    rgba(130, 193, 255, .30) !important;

  background:
    rgba(45, 112, 205, .18) !important;

  color:
    rgba(230, 242, 255, .82) !important;

  font-size: 22px !important;
  font-weight: 400 !important;

  cursor:
    pointer !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}


.subject-classification-clear:hover {

  transform:
    translateY(-1px) !important;

  background:
    rgba(49, 139, 255, .30) !important;

  border-color:
    rgba(105, 189, 255, .64) !important;
}


/* ============================
   BREADCRUMB
   ============================ */

.subject-classification-breadcrumb {

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  gap: 5px !important;

  min-height: 34px !important;

  margin-bottom: 13px !important;

  padding:
    8px 10px !important;

  border-radius:
    15px !important;

  background:
    rgba(29, 91, 176, .17) !important;

  border:
    1px solid
    rgba(112, 177, 244, .18) !important;
}


.subject-classification-breadcrumb button {

  padding: 0 !important;

  border: 0 !important;
  background: none !important;

  color:
    #7fc1ff !important;

  font-size: 11px !important;
  font-weight: 750 !important;

  cursor:
    pointer !important;
}


.subject-classification-breadcrumb button:hover {

  color:
    #ffffff !important;
}


.subject-classification-chevron {

  color:
    rgba(180, 211, 255, .37) !important;

  font-size: 13px !important;
}


.subject-classification-all-label {

  color:
    rgba(220, 235, 255, .66) !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}


/* ============================
   TREE
   ============================ */

.subject-classification-tree {

  display: flex !important;
  flex-direction: column !important;

  gap: 5px !important;
}


.subject-classification-root {

  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 10px !important;

  padding:
    12px 14px !important;

  margin-bottom:
    4px !important;

  border-radius:
    16px !important;

  border:
    1px solid
    rgba(100, 176, 255, .26) !important;

  background:
    rgba(29, 94, 188, .19) !important;

  color:
    rgba(231, 242, 255, .88) !important;

  cursor:
    pointer !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}


.subject-classification-root:hover,
.subject-classification-root.is-selected {

  transform:
    translateY(-1px) !important;

  border-color:
    rgba(70, 170, 255, .88) !important;

  background:
    linear-gradient(
      135deg,
      rgba(30, 143, 255, .34),
      rgba(39, 90, 208, .30)
    ) !important;

  box-shadow:
    0 8px 24px rgba(12, 90, 210, .16) !important;
}


.subject-classification-root span {

  font-size: 13px !important;
  font-weight: 800 !important;
}


.subject-classification-root strong {

  min-width: 34px !important;

  padding:
    4px 8px !important;

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.10) !important;

  color:
    #dfefff !important;

  font-size: 11px !important;
  text-align: center !important;
}


.subject-classification-node {

  width: 100% !important;
}


.subject-classification-row {

  display: grid !important;

  grid-template-columns:
    28px minmax(0, 1fr) !important;

  gap: 4px !important;

  align-items: center !important;

  padding-left:
    calc(
      var(--subject-depth, 0)
      * 13px
    ) !important;
}


.subject-classification-toggle {

  width: 28px !important;
  height: 34px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border: 0 !important;
  border-radius: 10px !important;

  background:
    transparent !important;

  color:
    rgba(167, 207, 255, .74) !important;

  font-size: 19px !important;
  line-height: 1 !important;

  cursor:
    pointer !important;

  transition:
    background .16s ease,
    color .16s ease !important;
}


.subject-classification-toggle:hover {

  background:
    rgba(57, 139, 244, .18) !important;

  color:
    #ffffff !important;
}


.subject-classification-toggle.is-empty {

  cursor:
    default !important;

  color:
    rgba(155, 192, 235, .30) !important;

  background:
    transparent !important;
}


.subject-classification-label {

  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 10px !important;

  padding:
    9px 10px !important;

  border-radius:
    13px !important;

  border:
    1px solid
    transparent !important;

  background:
    transparent !important;

  color:
    rgba(222, 237, 255, .79) !important;

  cursor:
    pointer !important;

  text-align:
    left !important;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease !important;
}


.subject-classification-label:hover {

  transform:
    translateX(2px) !important;

  color:
    #ffffff !important;

  border-color:
    rgba(86, 171, 255, .30) !important;

  background:
    rgba(39, 119, 225, .20) !important;
}


.subject-classification-node.is-selected
.subject-classification-label {

  color:
    #ffffff !important;

  border-color:
    rgba(74, 174, 255, .70) !important;

  background:
    linear-gradient(
      135deg,
      rgba(28, 148, 255, .48),
      rgba(45, 100, 229, .37)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 8px 23px rgba(0, 84, 210, .18) !important;
}


.subject-classification-name {

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  font-size:
    12px !important;

  font-weight:
    720 !important;
}


.subject-classification-count {

  flex:
    0 0 auto !important;

  min-width:
    29px !important;

  padding:
    3px 7px !important;

  border-radius:
    999px !important;

  background:
    rgba(119, 175, 241, .12) !important;

  color:
    rgba(201, 225, 255, .70) !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  text-align:
    center !important;
}


.subject-classification-children {

  display: flex !important;
  flex-direction: column !important;

  gap: 3px !important;
}


.subject-classification-loading,
.subject-classification-error,
.subject-classification-empty {

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  padding:
    24px 10px !important;

  color:
    rgba(202, 225, 255, .62) !important;

  font-size:
    12px !important;

  text-align:
    center !important;
}


.subject-classification-spinner {

  width: 15px !important;
  height: 15px !important;

  border-radius:
    50% !important;

  border:
    2px solid
    rgba(131, 191, 255, .20) !important;

  border-top-color:
    #59afff !important;

  animation:
    subject-classification-spin
    .75s linear infinite !important;
}


@keyframes subject-classification-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* ============================
   RESPONSIVE
   ============================ */

@media (
  max-width: 1180px
) {

  #subject-full-page
  .subject-full-content-layout {

    grid-template-columns:
      1fr !important;
  }


  #subject-full-page
  .subject-classification-panel {

    position:
      static !important;

    max-height:
      none !important;

    order:
      -1 !important;
  }

}


@media (
  max-width: 760px
) {

  #subject-full-page
  .subject-full-toolbar {

    grid-template-columns:
      1fr !important;
  }


  #subject-full-page
  .subject-full-search {

    width:
      100% !important;
  }

}


/* =========================================================
   ATOSY ERP — SUBJECT STICKY TOOLBAR
   Search + Status + Refresh + Add luôn hiện khi scroll
   ========================================================= */


/* TOOLBAR FREEZE */
#subject-full-page .subject-full-toolbar {
  position: sticky !important;
  top: 96px !important;
  z-index: 80 !important;

  width: 100% !important;

  margin-top: 18px !important;
  margin-bottom: 22px !important;

  padding: 10px !important;

  border-radius: 26px !important;

  background:
    linear-gradient(
      135deg,
      rgba(7, 61, 139, 0.88),
      rgba(10, 72, 170, 0.82)
    ) !important;

  border:
    1px solid
    rgba(119, 190, 255, 0.26) !important;

  box-shadow:
    0 14px 38px rgba(0, 34, 92, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;

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

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


/* Giữ toolbar gọn khi đã dính trên đầu */
#subject-full-page .subject-full-toolbar::before {
  content: "" !important;

  position: absolute !important;
  inset: -10px -2px !important;

  z-index: -1 !important;

  border-radius: 30px !important;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 61, 143, 0.32),
      rgba(0, 61, 143, 0)
    ) !important;

  pointer-events: none !important;
}


/* Panel phân loại phải nằm dưới toolbar sticky */
#subject-full-page .subject-classification-panel {
  top: 184px !important;
}


/* Search vẫn giữ dạng Liquid Pill */
#subject-full-page .subject-full-search {
  position: relative !important;
  z-index: 2 !important;
}


/* Select trạng thái cũng giữ Liquid */
#subject-full-page .subject-full-select {
  position: relative !important;

  border-radius: 18px !important;

  backdrop-filter:
    blur(18px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(150%) !important;
}


/* Hai nút bên phải không bị chìm khi toolbar sticky */
#subject-full-page .subject-full-refresh,
#subject-full-page .subject-full-add {
  position: relative !important;
  z-index: 2 !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease !important;
}


#subject-full-page .subject-full-refresh:hover,
#subject-full-page .subject-full-add:hover {
  transform: translateY(-2px) !important;

  filter:
    brightness(1.08) !important;
}


#subject-full-page .subject-full-refresh:active,
#subject-full-page .subject-full-add:active {
  transform:
    translateY(0)
    scale(.98) !important;
}


/* Desktop nhỏ */
@media (max-width: 1180px) {

  #subject-full-page .subject-full-toolbar {
    top: 88px !important;
  }

  #subject-full-page .subject-classification-panel {
    top: auto !important;
  }

}


/* Mobile/tablet: không ép sticky nếu toolbar xếp nhiều dòng */
@media (max-width: 760px) {

  #subject-full-page .subject-full-toolbar {
    position: relative !important;
    top: auto !important;
  }

}


/* =========================================================
   ATOSY ERP
   SUBJECT TABLE — STICKY TITLE + STICKY COLUMN HEADER
   ========================================================= */


/*
  Sticky không được nằm trong ancestor overflow:hidden,
  nếu không Chrome sẽ coi ancestor đó là vùng sticky.
*/
#subject-full-page
.atosy-subject-sticky-table-host {
  overflow: visible !important;
}


/* =========================================================
   1. TITLE:
   Danh sách Chủ thể / 801 Chủ thể / Hiển thị 25
   ========================================================= */

#subject-full-page
.atosy-subject-sticky-list-title {
  position: sticky !important;

  top:
    calc(
      var(--atosy-subject-toolbar-top, 96px)
      +
      var(--atosy-subject-toolbar-height, 82px)
      +
      var(--atosy-subject-sticky-gap, 12px)
    ) !important;

  z-index: 76 !important;

  background:
    rgba(
      248,
      251,
      255,
      0.985
    ) !important;

  backdrop-filter:
    blur(22px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%) !important;

  box-shadow:
    0 10px 24px
    rgba(0, 35, 90, 0.08) !important;
}


/* =========================================================
   2. COLUMN NAMES
   ========================================================= */

#subject-full-page
.atosy-subject-sticky-table
thead th {
  position: sticky !important;

  top:
    calc(
      var(--atosy-subject-toolbar-top, 96px)
      +
      var(--atosy-subject-toolbar-height, 82px)
      +
      var(--atosy-subject-sticky-gap, 12px)
      +
      var(--atosy-subject-list-title-height, 82px)
    ) !important;

  z-index: 75 !important;

  background:
    rgba(
      232,
      241,
      251,
      0.99
    ) !important;

  backdrop-filter:
    blur(20px)
    saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(140%) !important;

  box-shadow:
    inset 0 -1px 0
    rgba(25, 79, 138, 0.10) !important;
}


/*
  Tránh chữ của row phía dưới xuyên qua header
*/
#subject-full-page
.atosy-subject-sticky-table
thead {
  position: relative !important;
  z-index: 75 !important;
}


/* Giữ table sạch khi sticky */
#subject-full-page
.atosy-subject-sticky-table {
  border-collapse:
    separate !important;

  border-spacing:
    0 !important;
}


/* Mobile không khóa quá nhiều diện tích */
@media (max-width: 760px) {

  #subject-full-page
  .atosy-subject-sticky-list-title,

  #subject-full-page
  .atosy-subject-sticky-table
  thead th {

    position:
      static !important;

  }

}


/* =========================================================
   ATOSY ERP
   SUBJECT — LIQUID TABLE HEADER STACK
   FIX 2026-09-28
   ========================================================= */


/* ---------------------------------------------------------
   Vô hiệu hóa hoàn toàn cách sticky cũ
   --------------------------------------------------------- */

#subject-full-page
.atosy-subject-sticky-list-title {
  position: static !important;
  top: auto !important;
}

#subject-full-page
.atosy-subject-sticky-table
thead th {
  position: static !important;
  top: auto !important;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

#subject-full-page
.atosy-subject-liquid-table-card {
  overflow: visible !important;
}


/* =========================================================
   PHẦN TRÊN
   Danh sách Chủ thể / 801 / Hiển thị 25
   ========================================================= */

#subject-full-page
.atosy-subject-liquid-table-title {
  position: sticky !important;

  top:
    var(
      --subject-liquid-top,
      188px
    ) !important;

  z-index: 82 !important;

  margin: 0 !important;

  padding:
    24px
    30px
    19px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(244,249,255,.93)
    ) !important;

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

  border-bottom:
    0 !important;

  border-radius:
    28px
    28px
    0
    0 !important;

  box-shadow:
    0 -2px 0 rgba(255,255,255,.45) inset,
    0 14px 34px rgba(5,42,101,.12) !important;

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

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


/*
  Một đường highlight rất nhẹ phía trên
  để giữ cảm giác Liquid Glass.
*/
#subject-full-page
.atosy-subject-liquid-table-title::after {
  content: "";

  position: absolute;

  left: 22px;
  right: 22px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.95),
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   PHẦN DƯỚI
   MÃ CHỦ THỂ / TÊN / TÊN ĐẦY ĐỦ / EMAIL...
   ========================================================= */

#subject-full-page
.atosy-subject-liquid-table
thead th {
  position: sticky !important;

  top:
    calc(
      var(
        --subject-liquid-top,
        188px
      )
      +
      var(
        --subject-liquid-title-height,
        90px
      )
    ) !important;

  z-index: 81 !important;

  background:
    linear-gradient(
      180deg,
      rgba(235,244,254,.98),
      rgba(226,238,251,.97)
    ) !important;

  color:
    #557493 !important;

  border-top:
    1px solid
    rgba(80,130,185,.08) !important;

  border-bottom:
    1px solid
    rgba(43,99,159,.12) !important;

  box-shadow:
    none !important;

  backdrop-filter:
    blur(24px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(150%) !important;
}


/* Mép trái của khung Liquid */
#subject-full-page
.atosy-subject-liquid-table
thead th:first-child {
  border-left:
    1px solid
    rgba(255,255,255,.86) !important;

  border-radius:
    0
    0
    0
    26px !important;
}


/* Mép phải */
#subject-full-page
.atosy-subject-liquid-table
thead th:last-child {
  border-right:
    1px solid
    rgba(255,255,255,.86) !important;

  border-radius:
    0
    0
    26px
    0 !important;
}


/*
  Tạo bóng chung ở đáy.
*/
#subject-full-page
.atosy-subject-liquid-table
thead th {
  box-shadow:
    0 13px 26px
    rgba(8,51,105,.10) !important;
}


/* Các ô ở giữa không tạo bóng chồng quá mạnh */
#subject-full-page
.atosy-subject-liquid-table
thead th:not(:first-child):not(:last-child) {
  border-left:
    0 !important;

  border-right:
    0 !important;
}


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

#subject-full-page
.atosy-subject-liquid-table {
  margin-top:
    0 !important;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;
}


/*
  Data row chạy phía dưới Liquid Header,
  không xuyên lên trên.
*/
#subject-full-page
.atosy-subject-liquid-table
tbody {
  position: relative;
  z-index: 1;
}


/* =========================================================
   HOVER NHẸ CHO HEADER
   ========================================================= */

#subject-full-page
.atosy-subject-liquid-table-title {
  transition:
    box-shadow .2s ease,
    background .2s ease !important;
}


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

@media (max-width: 760px) {

  #subject-full-page
  .atosy-subject-liquid-table-title,

  #subject-full-page
  .atosy-subject-liquid-table
  thead th {

    position:
      static !important;

    top:
      auto !important;
  }

}