/* ==========================================================
   ATOSY ERP
   INFORMATION UI SUBJECT CLONE V1

   Values copied/adapted from active Subject UI:
   - styles.css / SUBJECT FULL PAGE
   - subject-classification-v1.css
   - subject-ui-final-v4.js
   ========================================================== */


:root {

  --atosy-information-sticky-top:
    214px;

  --atosy-information-title-height:
    76px;

}


/* ==========================================================
   SINGLE VIEW
   Same workspace isolation as Subject
   ========================================================== */

body.atosy-view-information
#atosy-dashboard-v2,

body.atosy-view-information
#module-grid,

body.atosy-view-information
#subject-full-page,

body.atosy-view-information
#bpmn-workspace,

body.atosy-view-information
.bpmn-workspace {

  display:
    none
    !important;

  visibility:
    hidden
    !important;

  pointer-events:
    none
    !important;

}


body.atosy-view-information
#information-full-page.hidden {

  display:
    none
    !important;

}


body.atosy-view-information
#information-full-page {

  display:
    block
    !important;

  visibility:
    visible
    !important;

  pointer-events:
    auto
    !important;

  width:
    100%
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  box-sizing:
    border-box
    !important;

}


/* ==========================================================
   HERO
   Exact Subject dimensions/colors
   ========================================================== */

#information-full-page
.information-full-hero {

  min-height:
    145px
    !important;

  padding:
    27px 31px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  gap:
    21px
    !important;

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

  border-radius:
    30px
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        17,
        90,
        192,
        .72
      ),
      rgba(
        6,
        61,
        138,
        .78
      )
    )
    !important;

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

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

  box-shadow:
    var(
      --shadow-liquid
    )
    !important;

}


#information-full-page
.information-full-back {

  width:
    52px
    !important;

  height:
    52px
    !important;

  flex:
    0 0 auto
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  padding:
    0
    !important;

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

  border-radius:
    17px
    !important;

  color:
    white
    !important;

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

  font-size:
    32px
    !important;

  font-weight:
    500
    !important;

  line-height:
    1
    !important;

  transition:
    .15s ease
    !important;

}


#information-full-page
.information-full-back:hover {

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

  transform:
    translateX(
      -2px
    )
    !important;

}


#information-full-page
.information-full-hero-copy {

  flex:
    1
    !important;

  min-width:
    0
    !important;

}


#information-full-page
.information-full-eyebrow {

  margin-bottom:
    5px
    !important;

  color:
    rgba(
      255,
      255,
      255,
      .58
    )
    !important;

  font-size:
    9px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    1.2px
    !important;

}


#information-full-page
.information-full-hero
h1 {

  margin:
    0
    !important;

  color:
    white
    !important;

  font-size:
    32px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    -.7px
    !important;

}


#information-full-page
.information-full-hero
h1
span {

  margin-left:
    7px
    !important;

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

  font-size:
    19px
    !important;

  font-weight:
    800
    !important;

}


#information-full-page
.information-full-hero
p {

  margin:
    7px 0 0
    !important;

  color:
    rgba(
      255,
      255,
      255,
      .67
    )
    !important;

  font-size:
    12px
    !important;

  line-height:
    1.45
    !important;

}


#information-full-page
.information-full-total {

  min-width:
    148px
    !important;

  padding:
    13px 18px
    !important;

  text-align:
    center
    !important;

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

  border-radius:
    20px
    !important;

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

  box-shadow:
    inset
    0 1px 0
    rgba(
      255,
      255,
      255,
      .07
    )
    !important;

}


#information-full-page
.information-full-total
span {

  display:
    block
    !important;

  color:
    rgba(
      255,
      255,
      255,
      .58
    )
    !important;

  font-size:
    9px
    !important;

  font-weight:
    800
    !important;

}


#information-full-page
.information-full-total
strong {

  display:
    block
    !important;

  margin-top:
    4px
    !important;

  color:
    white
    !important;

  font-size:
    25px
    !important;

  font-weight:
    900
    !important;

}


/* ==========================================================
   TOOLBAR
   Exact Subject sticky toolbar
   ========================================================== */

#information-full-page
.information-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;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  gap:
    11px
    !important;

  border-radius:
    26px
    !important;

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

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

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

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

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

}


#information-full-page
.information-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,
        .32
      ),
      rgba(
        0,
        61,
        143,
        0
      )
    )
    !important;

  pointer-events:
    none
    !important;

}


#information-full-page
.information-full-search {

  position:
    relative
    !important;

  z-index:
    2
    !important;

  flex:
    1
    !important;

  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,
      .42
    )
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        31,
        101,
        196,
        .28
      ),
      rgba(
        13,
        55,
        126,
        .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;

}


#information-full-page
.information-full-search:hover {

  border-color:
    rgba(
      118,
      199,
      255,
      .72
    )
    !important;

}


#information-full-page
.information-full-search:focus-within {

  border-color:
    rgba(
      87,
      185,
      255,
      .95
    )
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        35,
        117,
        226,
        .36
      ),
      rgba(
        16,
        69,
        154,
        .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;

}


#information-full-page
.information-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;

}


#information-full-page
#information-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;

  box-shadow:
    none
    !important;

  color:
    white
    !important;

  font:
    inherit
    !important;

  font-size:
    15px
    !important;

  font-weight:
    600
    !important;

  appearance:
    none
    !important;

  -webkit-appearance:
    none
    !important;

}


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

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

  opacity:
    1
    !important;

}


#information-full-page
.information-full-refresh,

#information-full-page
.information-full-add {

  position:
    relative
    !important;

  z-index:
    2
    !important;

  min-height:
    50px
    !important;

  padding:
    0 20px
    !important;

  border-radius:
    17px
    !important;

  font-size:
    11px
    !important;

  font-weight:
    850
    !important;

  white-space:
    nowrap
    !important;

}


#information-full-page
.information-full-refresh {

  color:
    white
    !important;

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

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

}


#information-full-page
.information-full-add {

  border:
    none
    !important;

  color:
    white
    !important;

  background:
    linear-gradient(
      180deg,
      #18b81f,
      #078b0d
    )
    !important;

  box-shadow:
    0 5px 0
    #076b0b,
    0 8px 16px
    rgba(
      0,
      100,
      20,
      .15
    )
    !important;

}


/* ==========================================================
   MAIN GRID
   Exact Subject FINAL V4:
   1fr + 390px
   ========================================================== */

#information-full-page
.information-full-layout {

  display:
    grid
    !important;

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

  gap:
    26px
    !important;

  align-items:
    start
    !important;

  width:
    100%
    !important;

  margin:
    18px 0 0
    !important;

  padding:
    0
    !important;

  overflow:
    visible
    !important;

}


/* ==========================================================
   CARD
   ========================================================== */

#information-full-page
.information-full-card {

  min-width:
    0
    !important;

  width:
    100%
    !important;

  margin:
    0
    !important;

  overflow:
    visible
    !important;

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

  border-radius:
    28px
    !important;

  color:
    var(
      --text-dark
    )
    !important;

  background:
    linear-gradient(
      180deg,
      #f9fbff 0%,
      #edf3fa 100%
    )
    !important;

  box-shadow:
    var(
      --shadow-card
    )
    !important;

}


/* ==========================================================
   TABLE TITLE
   Exact Subject FINAL V4 sticky title
   ========================================================== */

#information-full-page
.information-full-card-header {

  position:
    sticky
    !important;

  top:
    var(
      --atosy-information-sticky-top
    )
    !important;

  z-index:
    85
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  width:
    100%
    !important;

  height:
    var(
      --atosy-information-title-height
    )
    !important;

  min-height:
    var(
      --atosy-information-title-height
    )
    !important;

  margin:
    0
    !important;

  padding:
    0 24px
    !important;

  box-sizing:
    border-box
    !important;

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

  border-bottom:
    1px solid
    rgba(
      11,
      61,
      145,
      .08
    )
    !important;

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

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

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

  box-shadow:
    none
    !important;

}


#information-full-page
#atosy-information-title-clone-v1 {

  display:
    block
    !important;

  width:
    100%
    !important;

  text-align:
    center
    !important;

  color:
    #0b4388
    !important;

  font-size:
    23px
    !important;

  font-weight:
    900
    !important;

  line-height:
    1.35
    !important;

  white-space:
    nowrap
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

  padding:
    4px 20px
    !important;

  box-sizing:
    border-box
    !important;

}


/*
 * Subject FINAL V4 thay nội dung card-header bằng title.
 * Information cũng làm y hệt.
 */
#information-full-page
.information-full-page-size {

  display:
    none
    !important;

}


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

#information-full-page
.information-full-table-wrapper {

  overflow:
    visible
    !important;

  width:
    100%
    !important;

  max-width:
    none
    !important;

}


#information-full-page
.information-full-table {

  width:
    100%
    !important;

  min-width:
    0
    !important;

  table-layout:
    fixed
    !important;

  border-collapse:
    separate
    !important;

  border-spacing:
    0
    !important;

  white-space:
    nowrap
    !important;

}


/*
 * Chỉ TH sticky.
 * Không sticky THEAD/TR.
 * Đây chính là cách Subject FINAL V4 đang chạy.
 */
#information-full-page
.information-full-table
thead,

#information-full-page
.information-full-table
thead
tr {

  position:
    static
    !important;

  transform:
    none
    !important;

}


#information-full-page
.information-full-table
thead
th {

  position:
    sticky
    !important;

  top:
    calc(
      var(
        --atosy-information-sticky-top
      )
      +
      var(
        --atosy-information-title-height
      )
    )
    !important;

  z-index:
    84
    !important;

  height:
    58px
    !important;

  min-height:
    58px
    !important;

  padding:
    13px 18px
    !important;

  box-sizing:
    border-box
    !important;

  vertical-align:
    middle
    !important;

  text-align:
    left
    !important;

  color:
    #587797
    !important;

  background:
    #e5f2ff
    !important;

  border-bottom:
    1px solid
    rgba(
      11,
      61,
      145,
      .08
    )
    !important;

  font-size:
    12px
    !important;

  font-weight:
    850
    !important;

  letter-spacing:
    .035em
    !important;

  text-transform:
    uppercase
    !important;

  white-space:
    nowrap
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

}


/* ==========================================================
   INFORMATION COLUMN WIDTHS
   Giữ cột nghiệp vụ Information,
   nhưng typography/padding giống Subject.
   ========================================================== */

#information-full-page
.information-full-table
th:nth-child(1),

#information-full-page
.information-full-table
td:nth-child(1) {

  width:
    16%
    !important;

}


#information-full-page
.information-full-table
th:nth-child(2),

#information-full-page
.information-full-table
td:nth-child(2) {

  width:
    8%
    !important;

}


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

#information-full-page
.information-full-table
td:nth-child(3) {

  width:
    26%
    !important;

}


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

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

  width:
    28%
    !important;

}


#information-full-page
.information-full-table
th:nth-child(5),

#information-full-page
.information-full-table
td:nth-child(5) {

  width:
    16%
    !important;

}


#information-full-page
.information-full-table
th:nth-child(6),

#information-full-page
.information-full-table
td:nth-child(6) {

  width:
    6%
    !important;

}


/* action column không cần hiển thị vì click cả row */
#information-full-page
.information-full-table
th:nth-child(7),

#information-full-page
.information-full-table
td:nth-child(7) {

  display:
    none
    !important;

}


#information-full-page
.information-full-table
th:first-child {

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

}


#information-full-page
.information-full-table
th:nth-child(6) {

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

}


/* ==========================================================
   ROW
   Exact Subject font-size/padding/hover
   ========================================================== */

#information-full-page
.information-full-table
tbody
tr {

  cursor:
    pointer
    !important;

  transition:
    background
    .15s
    ease
    !important;

}


#information-full-page
.information-full-table
tbody
tr:hover {

  background:
    rgba(
      25,
      118,
      235,
      .055
    )
    !important;

}


#information-full-page
.information-full-table
td {

  max-width:
    280px
    !important;

  padding:
    14px 18px
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

  color:
    #365674
    !important;

  border-bottom:
    1px solid
    rgba(
      11,
      61,
      145,
      .05
    )
    !important;

  background:
    transparent
    !important;

  font-size:
    11px
    !important;

  font-weight:
    400
    !important;

}


#information-full-page
.information-full-code {

  color:
    #1469d3
    !important;

  font-size:
    inherit
    !important;

  font-weight:
    850
    !important;

}


#information-full-page
.information-full-subject {

  color:
    #173f70
    !important;

  font-size:
    inherit
    !important;

  font-weight:
    850
    !important;

}


#information-full-page
.information-full-content {

  color:
    #365674
    !important;

  font-size:
    inherit
    !important;

  font-weight:
    400
    !important;

}


#information-full-page
.information-full-category {

  display:
    inline-flex
    !important;

  max-width:
    100%
    !important;

  min-height:
    27px
    !important;

  padding:
    0 10px
    !important;

  align-items:
    center
    !important;

  border-radius:
    999px
    !important;

  background:
    #e7edf5
    !important;

  color:
    #687c94
    !important;

  font-size:
    9px
    !important;

  font-weight:
    850
    !important;

  white-space:
    nowrap
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

}


#information-full-page
.information-full-drive {

  color:
    #1469d3
    !important;

  font-size:
    10px
    !important;

  font-weight:
    850
    !important;

}


/* ==========================================================
   PAGINATION
   Exact Subject sizing
   ========================================================== */

#information-full-page
.information-full-pagination {

  min-height:
    70px
    !important;

  padding:
    13px 22px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    space-between
    !important;

  border-top:
    1px solid
    rgba(
      11,
      61,
      145,
      .07
    )
    !important;

  color:
    #71849b
    !important;

  background:
    transparent
    !important;

  font-size:
    10px
    !important;

  font-weight:
    750
    !important;

}


#information-full-page
#information-full-result-label {

  display:
    none
    !important;

}


#information-full-page
#information-full-pagination-info {

  order:
    1
    !important;

  text-align:
    left
    !important;

  color:
    #71849b
    !important;

  font-size:
    10px
    !important;

  font-weight:
    750
    !important;

}


#information-full-page
.information-full-pagination-control {

  order:
    2
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  gap:
    7px
    !important;

}


#information-full-page
.information-full-pagination-control
button {

  width:
    36px
    !important;

  height:
    36px
    !important;

  padding:
    0
    !important;

  border:
    none
    !important;

  border-radius:
    12px
    !important;

  color:
    #125db9
    !important;

  background:
    #e2edf9
    !important;

  font-size:
    20px
    !important;

  font-weight:
    900
    !important;

}


#information-full-page
.information-full-pagination-control
button:disabled {

  opacity:
    .33
    !important;

  cursor:
    default
    !important;

}


#information-full-page
#information-full-page-number {

  min-width:
    66px
    !important;

  text-align:
    center
    !important;

  color:
    #496581
    !important;

  font-size:
    10px
    !important;

  font-weight:
    850
    !important;

}


/* ==========================================================
   CLASSIFICATION PANEL
   Same dimensions/color behavior as Subject FINAL
   ========================================================== */

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

  grid-column:
    2
    !important;

  position:
    sticky
    !important;

  top:
    var(
      --atosy-information-sticky-top
    )
    !important;

  z-index:
    80
    !important;

  width:
    100%
    !important;

  max-width:
    390px
    !important;

  min-width:
    0
    !important;

  height:
    calc(
      100vh
      -
      var(
        --atosy-information-sticky-top
      )
      -
      14px
    )
    !important;

  max-height:
    calc(
      100vh
      -
      var(
        --atosy-information-sticky-top
      )
      -
      14px
    )
    !important;

  margin:
    0
    !important;

  padding:
    15px 18px 12px
    !important;

  display:
    flex
    !important;

  flex-direction:
    column
    !important;

  overflow:
    hidden
    !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;

}


/* kicker */

#information-full-page
.information-classification-eyebrow {

  margin:
    0 0 5px
    !important;

  color:
    #74b8ff
    !important;

  font-size:
    10px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    .14em
    !important;

  text-transform:
    uppercase
    !important;

}


/* title + X */

#information-full-page
.information-classification-title-row {

  display:
    grid
    !important;

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

  gap:
    10px
    !important;

  align-items:
    start
    !important;

  margin:
    0 0 16px
    !important;

}


#information-full-page
.information-classification-title-row
h2 {

  margin:
    0
    !important;

  color:
    white
    !important;

  font-size:
    20px
    !important;

  line-height:
    1.12
    !important;

  font-weight:
    900
    !important;

}


#information-full-page
.information-classification-title-row
p {

  display:
    none
    !important;

}


#information-full-page
#information-category-reset {

  width:
    36px
    !important;

  height:
    36px
    !important;

  min-width:
    36px
    !important;

  min-height:
    36px
    !important;

  padding:
    0
    !important;

  border:
    1px solid
    rgba(
      116,
      184,
      255,
      .55
    )
    !important;

  border-radius:
    50%
    !important;

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

  color:
    #d5ebff
    !important;

  font-size:
    23px
    !important;

  line-height:
    1
    !important;

  display:
    grid
    !important;

  place-items:
    center
    !important;

}


/* breadcrumb/path giống Subject */

#information-full-page
.information-category-selected {

  display:
    none
    !important;

  width:
    100%
    !important;

  min-height:
    34px
    !important;

  margin:
    0 0 9px
    !important;

  padding:
    7px 11px
    !important;

  box-sizing:
    border-box
    !important;

  border:
    1px solid
    rgba(
      116,
      184,
      255,
      .28
    )
    !important;

  border-radius:
    15px
    !important;

  color:
    #9fcfff
    !important;

  background:
    transparent
    !important;

  font-size:
    11px
    !important;

  font-weight:
    800
    !important;

  white-space:
    nowrap
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

}


#information-full-page
.information-category-selected.has-value {

  display:
    block
    !important;

}


/* Tổng dữ liệu */

#information-full-page
.information-category-all {

  display:
    grid
    !important;

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

  align-items:
    center
    !important;

  gap:
    14px
    !important;

  width:
    100%
    !important;

  min-height:
    44px
    !important;

  margin:
    0 0 9px
    !important;

  padding:
    0 13px
    !important;

  border:
    1px solid
    #43a8ff
    !important;

  border-radius:
    17px
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        51,
        132,
        229,
        .55
      ),
      rgba(
        31,
        98,
        190,
        .42
      )
    )
    !important;

  color:
    white
    !important;

  text-align:
    left
    !important;

}


#information-full-page
.information-category-all
span {

  font-size:
    14px
    !important;

  font-weight:
    900
    !important;

}


#information-full-page
.information-category-all
strong {

  display:
    inline-flex
    !important;

  justify-content:
    center
    !important;

  align-items:
    center
    !important;

  min-width:
    40px
    !important;

  height:
    24px
    !important;

  padding:
    0 8px
    !important;

  border-radius:
    999px
    !important;

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

  font-size:
    12px
    !important;

  font-weight:
    900
    !important;

}


/* chỉ tree cuộn — giống Subject */

#information-full-page
.information-category-tree {

  flex:
    1 1 auto
    !important;

  min-height:
    0
    !important;

  width:
    100%
    !important;

  margin:
    0
    !important;

  overflow-x:
    hidden
    !important;

  overflow-y:
    auto
    !important;

  padding:
    12px 0 22px
    !important;

  scrollbar-gutter:
    stable
    !important;

}


#information-full-page
.information-category-node-row {

  display:
    grid
    !important;

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

  align-items:
    center
    !important;

  width:
    100%
    !important;

  min-height:
    49px
    !important;

  margin:
    0
    !important;

  border-radius:
    0
    !important;

  background:
    transparent
    !important;

}


#information-full-page
.information-category-toggle,

#information-full-page
.information-category-toggle-spacer {

  width:
    30px
    !important;

  min-width:
    30px
    !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;

}


#information-full-page
.information-category-label {

  display:
    block
    !important;

  width:
    100%
    !important;

  min-width:
    0
    !important;

  min-height:
    44px
    !important;

  padding:
    0 11px
    !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    13px
    !important;

  background:
    transparent
    !important;

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

  text-align:
    left
    !important;

  font-size:
    12px
    !important;

  font-weight:
    720
    !important;

  line-height:
    44px
    !important;

  white-space:
    nowrap
    !important;

  overflow:
    hidden
    !important;

  text-overflow:
    ellipsis
    !important;

}


#information-full-page
.information-category-label:hover {

  transform:
    translateX(
      2px
    )
    !important;

  color:
    white
    !important;

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

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

}


#information-full-page
.information-category-node-row.is-selected
.information-category-label {

  color:
    white
    !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;

}


#information-full-page
.information-category-children {

  display:
    flex
    !important;

  flex-direction:
    column
    !important;

  gap:
    3px
    !important;

  margin-left:
    13px
    !important;

  padding-left:
    0
    !important;

  border-left:
    0
    !important;

}


#information-full-page
.information-category-node.level-1
.information-category-label,

#information-full-page
.information-category-node.level-2
.information-category-label {

  font-weight:
    800
    !important;

}


#information-full-page
.information-category-node.level-3
.information-category-label,

#information-full-page
.information-category-node.level-4
.information-category-label,

#information-full-page
.information-category-node.level-5
.information-category-label,

#information-full-page
.information-category-node.level-6
.information-category-label,

#information-full-page
.information-category-node.level-7
.information-category-label,

#information-full-page
.information-category-node.level-8
.information-category-label {

  font-weight:
    400
    !important;

}


/* ==========================================================
   LOADING
   ========================================================== */

#information-full-page
.information-full-loading {

  min-height:
    250px
    !important;

  display:
    flex
    !important;

  flex-direction:
    column
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  gap:
    14px
    !important;

  color:
    #70839b
    !important;

  font-size:
    11px
    !important;

  font-weight:
    800
    !important;

}


#information-full-page
.information-full-spinner {

  width:
    34px
    !important;

  height:
    34px
    !important;

  border:
    4px solid
    #d7e3f1
    !important;

  border-top-color:
    #1675e8
    !important;

  border-radius:
    50%
    !important;

}


/* ==========================================================
   RESPONSIVE
   Same Subject FINAL V4 breakpoints
   ========================================================== */

@media (
  max-width:
    1050px
) {

  #information-full-page
  .information-full-layout {

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

    gap:
      18px
      !important;

  }


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

    max-width:
      340px
      !important;

  }

}


@media (
  max-width:
    850px
) {

  #information-full-page
  .information-full-layout {

    grid-template-columns:
      1fr
      !important;

  }


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

    grid-column:
      1
      !important;

    max-width:
      none
      !important;

    height:
      600px
      !important;

    max-height:
      600px
      !important;

    position:
      relative
      !important;

    top:
      auto
      !important;

  }

}


@media (
  max-width:
    760px
) {

  #information-full-page
  .information-full-toolbar {

    top:
      88px
      !important;

    flex-wrap:
      wrap
      !important;

  }


  #information-full-page
  .information-full-search {

    width:
      100%
      !important;

    flex-basis:
      100%
      !important;

  }


  #information-full-page
  .information-full-card-header,

  #information-full-page
  .information-full-table
  thead
  th {

    position:
      static
      !important;

    top:
      auto
      !important;

  }

}


/* ==========================================================
   T31 — EXCLUSIVE INFORMATION WORKSPACE
   ========================================================== */

/*
 * Information chỉ được nhìn thấy khi body thực sự
 * đang ở atosy-view-information.
 */

body:not(.atosy-view-information)
#information-full-page {

  display:
    none
    !important;

}


/*
 * Footer không được đứng trước Information.
 * T31 đã chuyển Information lên trước #module-grid;
 * footer trở lại đúng thứ tự DOM phía dưới workspace.
 */

body.atosy-view-information
.app-footer {

  position:
    relative
    !important;

  z-index:
    1
    !important;

  margin-top:
    28px
    !important;

}


/* ==========================================================
   T32 — INFORMATION LOADING / TABLE HEADER FIX
   ========================================================== */


/*
 * QUAN TRỌNG:
 * Subject-clone CSS phía trên có display:flex !important
 * cho loading.
 *
 * Khi JS thêm class hidden, loading phải biến mất tuyệt đối.
 */
body.atosy-view-information
#information-full-page
#information-full-loading.hidden {

  display:
    none
    !important;

}


/*
 * Table wrapper khi hidden cũng phải thật sự biến mất.
 */
body.atosy-view-information
#information-full-page
#information-full-table-wrapper.hidden {

  display:
    none
    !important;

}


/*
 * Khi loading hoàn tất, wrapper hiển thị ngay sát
 * phía dưới title "Tất cả Thông tin".
 */
body.atosy-view-information
#information-full-page
#information-full-table-wrapper:not(.hidden) {

  display:
    block
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

}


/*
 * Không để loading giữ bất kỳ chiều cao nào khi hidden.
 */
body.atosy-view-information
#information-full-page
#information-full-loading.hidden {

  width:
    0
    !important;

  height:
    0
    !important;

  min-height:
    0
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  overflow:
    hidden
    !important;

}


/*
 * Title bảng kết thúc ở đâu,
 * header cột bắt đầu ngay tại đó.
 */
body.atosy-view-information
#information-full-page
.information-full-card-header {

  margin-bottom:
    0
    !important;

  border-bottom:
    0
    !important;

}


/*
 * Header cột không có khoảng trống phía trên.
 */
body.atosy-view-information
#information-full-page
.information-full-table {

  margin:
    0
    !important;

  padding:
    0
    !important;

}


body.atosy-view-information
#information-full-page
.information-full-table
thead {

  margin:
    0
    !important;

  padding:
    0
    !important;

}


body.atosy-view-information
#information-full-page
.information-full-table
thead
tr {

  margin:
    0
    !important;

  padding:
    0
    !important;

}


/*
 * Sticky giống Subject:
 *
 * toolbar
 *   ↓
 * title "Tất cả Thông tin" 76px
 *   ↓
 * header cột 58px
 *
 * Không có loading/gap chen giữa.
 */
body.atosy-view-information
#information-full-page
.information-full-table
thead
th {

  top:
    calc(
      var(
        --atosy-information-sticky-top
      )
      +
      var(
        --atosy-information-title-height
      )
    )
    !important;

}


/* T33 DOCUMENT TABLE UX START */

/* --------------------------------------------------
   1. HORIZONTAL SCROLL
   -------------------------------------------------- */
body.atosy-view-information
#information-full-page
.information-full-table-wrapper {
  overflow: auto !important;
}

body.atosy-view-information
#information-full-page
.information-full-table {
  min-width: 1220px !important;
  table-layout: fixed !important;
}

/* --------------------------------------------------
   2. COLUMN WIDTHS
   Sau khi bỏ cột Số:
   1 = Mã hiệu
   2 = Chủ đề
   3 = Nội dung
   4 = Phân loại
   5 = Tài liệu
   6 = Action
   -------------------------------------------------- */
body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(1),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(1) {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(2),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(2) {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(3),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(3) {
  width: 360px !important;
  min-width: 360px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(4),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(4) {
  width: 190px !important;
  min-width: 190px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(5),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(5) {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(6),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(6) {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

/* --------------------------------------------------
   3. FREEZE 2 CỘT:
   Mã hiệu + Chủ đề
   -------------------------------------------------- */
body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(1),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(1) {
  position: sticky !important;
  left: 0 !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(2),
body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(2) {
  position: sticky !important;
  left: 170px !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(1) {
  z-index: 48 !important;
  background: #e8f3ff !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
th:nth-child(2) {
  z-index: 47 !important;
  background: #e8f3ff !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(1) {
  z-index: 8 !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 #e6eef7 !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
td:nth-child(2) {
  z-index: 7 !important;
  background: #ffffff !important;
  box-shadow: 2px 0 8px rgba(28, 71, 114, .08) !important;
}

body.atosy-view-information
#information-full-page
.information-full-table
tbody tr:hover td:nth-child(1),
body.atosy-view-information
#information-full-page
.information-full-table
tbody tr:hover td:nth-child(2) {
  background: #f4f9ff !important;
}

/* --------------------------------------------------
   4. HOVER MARQUEE
   -------------------------------------------------- */
body.atosy-view-information
#information-full-page
.information-marquee {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

body.atosy-view-information
#information-full-page
.information-marquee__text {
  display: inline-block !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  transform: translateX(0);
  will-change: transform;
}

body.atosy-view-information
#information-full-page
.information-marquee.is-overflowing.is-marquee-active
.information-marquee__text {
  animation: atosyInformationMarquee 4.8s ease-in-out infinite alternate;
}

@keyframes atosyInformationMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-distance, 0px));
  }
}

/* tắt ellipsis cũ bên trong track */
body.atosy-view-information
#information-full-page
.information-full-code,
body.atosy-view-information
#information-full-page
.information-full-subject,
body.atosy-view-information
#information-full-page
.information-full-content,
body.atosy-view-information
#information-full-page
.information-full-category {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* T33 DOCUMENT TABLE UX END */