/* ============================================================
   Logo sidebar đại lý — hiện ĐỦ chữ, xếp dọc cho cân đối
   ============================================================

   Trước: `.logo-image` là ô 36×36 dán `one.png`. Chính FILE ẢNH đó đã bị
   cắt sẵn — chữ "7" mất một phần bên trái, vòng tròn cam cụt trên/dưới —
   nên chỉnh CSS kiểu gì cũng không "mọc" lại được phần đã mất.

   Sửa: đổi sang `login-one-logo.png` (SON79 đầy đủ, 1129×328) và dùng
   `background-size: contain` để ảnh luôn lọt trong ô, không bao giờ bị xén.

   Bố cục: logo NHỎ, căn giữa ở TRÊN — chữ AGENT SYSTEM + cấp bậc xuống
   DƯỚI, cũng căn giữa. Bundle đặt `layout="row"` trên `.logo` nên phải
   ép `flex-direction: column` để xoay trục.

   Nạp SAU bundle nên cùng selector là đè được, không cần !important.
   ============================================================ */

/* Header cao hơn để chứa hai hàng (logo trên, chữ dưới) */
#vertical-navigation .navigation-header {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
}

/* Xoay trục: logo trên — chữ dưới, cả hai căn giữa */
#vertical-navigation .navigation-header .logo {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;          /* cho phép co lại, không đẩy tràn thanh bên */
}

/* Logo đầy đủ, contain = không bao giờ bị cắt */
#vertical-navigation .navigation-header .logo .logo-image {
  background-image: url("assets/images/logos/gon79-logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 118px;
  min-width: 0;
  max-width: 100%;
  height: 34px;
  line-height: normal;
  margin-bottom: 6px;
  border-radius: 0;
}

/* Bundle bọc hai dòng chữ trong div[layout=column] — căn giữa cả khối */
#vertical-navigation .navigation-header .logo > div[layout="column"] {
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* Bỏ thụt trái của bố cục ngang cũ */
#vertical-navigation .navigation-header .logo .logo-text,
#vertical-navigation .navigation-header .logo .member-level {
  margin-left: 0;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
}

#vertical-navigation .navigation-header .logo .logo-text {
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* Nút gấp thanh bên: đưa lên đỉnh cho khỏi lệch so với khối đã cao lên */
#vertical-navigation .navigation-header .fold-toggle {
  align-self: flex-start;
  margin-top: 2px;
}

/* ── Thanh bên THU GỌN (64px): chỉ còn logo, thu nhỏ cho vừa ──
   Bundle đã ẩn .logo-text ở trạng thái này; ẩn nốt cấp bậc để không
   rớt chữ lẻ, và bỏ chiều cao tối thiểu cho header gọn lại.

   Nút gấp cho ra khỏi luồng flex (absolute) — nó ngồi cùng hàng với logo
   nên ăn mất hơn nửa bề ngang 48px, logo co còn 23px, chữ SON79 không đọc
   được. Cho absolute thì logo dùng trọn bề ngang mà nút VẪN BẤM ĐƯỢC —
   không bỏ chức năng gấp/mở nào. */
@media screen and (min-width: 960px) {
  .ms-navigation-folded:not(.ms-navigation-folded-open) #vertical-navigation .navigation-header {
    min-height: 64px;
    padding: 8px 6px;
    position: relative;
  }
  .ms-navigation-folded:not(.ms-navigation-folded-open) #vertical-navigation .navigation-header .fold-toggle {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    padding: 4px;
    width: 24px !important;
    height: 24px !important;
    opacity: 0.65;
  }
  .ms-navigation-folded:not(.ms-navigation-folded-open) #vertical-navigation .navigation-header .logo {
    width: 100%;
  }
  .ms-navigation-folded:not(.ms-navigation-folded-open) #vertical-navigation .navigation-header .logo .logo-image {
    width: 50px;
    min-width: 50px;
    height: 22px;
    margin-bottom: 0;
  }
  .ms-navigation-folded:not(.ms-navigation-folded-open) #vertical-navigation .navigation-header .logo .member-level {
    display: none;
  }
}