/* ================= Menu dọc nền sáng v3 (js/core/sidebar.js, 28/10/2026) =================
   Chủ dự án: v2 giống hệt sản phẩm mẫu ⇒ giữ CÁCH DÙNG (nhóm có mũi tên, nhóm của trang đang mở tự mở, mục con dạng cây, dòng
   rộng, icon nét, dải icon có menu nổi) nhưng hình thức riêng, nền SÁNG, phẳng (không gradient ở bất cứ đâu). crmnew dùng ĐÚNG
   các giá trị dưới đây (một họ giao diện):
   - nền #ffffff + viền phải 1px #e4e3ea; chữ #03000e 80%; icon #5d5a6b; rê chuột #efeff3 bo 8px;
   - mục đang mở = khối xanh thương hiệu #2000b1 bo 8px, chữ + icon trắng; nhóm chứa mục đang mở: nhãn #2000b1 đậm 600;
   - đường cây #d9d8e0 (nhánh vào mục đang mở màu xanh thương hiệu);
   - tối: nền #12111a, chữ #ebeaed; mục đang mở vẫn là khối #2000b1 chữ trắng;
   - rộng 256px / dải icon 64px; dòng cấp 1 44px, mục con 36px.
   - Logo màu (ô Z xanh + chữ ZAFAGO, ảnh có sẵn ở img/brand), tên ứng dụng xám bên dưới.
   - Thu gọn (.collapsed, màn >= 900px): mục đơn có chú thích .sb-tip, dòng nhóm có menu nổi .sb-flyout.
   - Màn < 900px: menu trượt từ trái (.open) + nền mờ #sbBackdrop, mở bằng ☰ ở thanh mảnh .sb-mobilebar. */
:root {
  --sb-bg: #ffffff;
  --sb-border: #e4e3ea;
  --sb-ink: rgb(3 0 14 / .8);
  --sb-ink-strong: #03000e;
  --sb-icon: #5d5a6b;
  --sb-muted: #5d5a6b;
  --sb-hover: #efeff3;
  --sb-active: #2000b1;
  --sb-active-ink: #ffffff;
  --sb-group-on: #2000b1;
  --sb-tree: #d9d8e0;
}
:root[data-theme="dark"] {
  --sb-bg: #12111a;
  --sb-border: #2a2836;
  --sb-ink: #ebeaed;
  --sb-ink-strong: #ffffff;
  --sb-icon: #a29fb3;
  --sb-muted: #a29fb3;
  --sb-hover: #1f1d2b;
  --sb-active: #2000b1;
  --sb-active-ink: #ffffff;
  --sb-group-on: #8b7dff;  /* #2000b1 không đủ tương phản trên nền tối ⇒ xanh thương hiệu bản sáng (--brand tối) */
  --sb-tree: #34313f;
}
.sidebar { --sb-w: 256px;
  width: var(--sb-w); flex: none; height: 100%; display: flex; flex-direction: column; position: relative; z-index: 40;
  background: var(--sb-bg); border-right: 1px solid var(--sb-border); color: var(--sb-ink); font-family: var(--font); }
.sidebar a { text-decoration: none; color: inherit; }
.sidebar :focus-visible { outline: 2px solid var(--sb-active); outline-offset: -2px; }
.sidebar .ic, .sb-mobilebar .ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Đầu menu: logo màu + tên ứng dụng xám ---- */
.sb-head { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 12px 10px 8px 16px; flex: none; }
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.sb-logo { width: 32px; height: 32px; flex: none; border-radius: 7px; display: block; }
.sb-brand-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-word { width: 83px; height: 16px; display: block; }
.sb-word-dark { display: none; }
:root[data-theme="dark"] .sb-word-light { display: none; }
:root[data-theme="dark"] .sb-word-dark { display: block; }
.sb-name { font-size: 12px; font-weight: 500; line-height: 14px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-collapse-btn, .sb-close, .sb-burger { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--sb-icon); cursor: pointer; align-self: flex-start; }
.sidebar-collapse-btn .ic, .sb-close .ic { width: 18px; height: 18px; }
.sidebar-collapse-btn:hover, .sb-close:hover, .sb-burger:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.sb-close { display: none; }

/* ---- Bộ chọn nền tảng: ô chọn sáng có viền ---- */
.sb-platform { padding: 2px 16px 12px; flex: none; }
.sb-platform[hidden] { display: none; }
.sb-platform-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-muted); margin-bottom: 5px; cursor: pointer; }
.sidebar .platform-select { width: 100%; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--control-bg);
  color: var(--sb-ink-strong); font: 600 13px/1 var(--font); cursor: pointer; }
.sidebar .platform-select:focus { outline: none; border-color: var(--sb-active); box-shadow: 0 0 0 1px var(--sb-active); }
.sb-platform-mini { display: none; width: 44px; height: 28px; margin: 0 auto; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--control-bg);
  color: var(--sb-ink-strong); font: 700 10px/1 var(--font); cursor: pointer; overflow: hidden; white-space: nowrap; }

/* ---- Danh sách: dòng cấp 1 (mục đơn + dòng nhóm) ---- */
.sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 0 12px; border-top: 1px solid var(--sb-border);
  scrollbar-width: thin; scrollbar-color: var(--sb-tree) transparent; }
.sb-row { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); min-height: 44px; margin: 1px 8px; padding: 0 10px 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--sb-ink); font: 500 14px/20px var(--font); text-align: left; cursor: pointer; white-space: nowrap; }
.sb-row .nav-icon { color: var(--sb-icon); }
.sb-row:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.nav-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.sidebar .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar .nav-ext { width: 14px; height: 14px; color: var(--sb-icon); opacity: .8; }
.sb-chev { width: 16px !important; height: 16px !important; color: var(--sb-icon); transition: transform .15s ease; }
.sb-group.open > .sb-group-head .sb-chev { transform: rotate(90deg); }
.sb-group[hidden] { display: none; }
/* Nhóm chứa trang đang mở: nhãn + icon xanh thương hiệu, đậm 600 */
.sb-group.has-active > .sb-group-head, .sb-group.has-active > .sb-group-head .nav-icon { color: var(--sb-group-on); }
.sb-group.has-active > .sb-group-head { font-weight: 600; }

/* ---- Mục con dạng cây: đường xám nhạt + nhánh cong └ vào từng mục ---- */
.sb-children { display: none; position: relative; margin: 0 8px 4px 30px; }
.sb-group.open > .sb-children { display: block; }
.sb-children::before { content: ""; position: absolute; left: 0; top: -10px; height: 10px; border-left: 1.5px solid var(--sb-tree); }
.sidebar .sb-children .nav-item { position: relative; display: flex; align-items: center; min-height: 36px; margin: 0 0 0 18px; padding: 0 12px; border-radius: 8px;
  color: var(--sb-ink); font: 500 14px/18px var(--font); cursor: pointer; white-space: nowrap; }
.sidebar .sb-children .nav-item + .nav-item { margin-top: 2px; }
.sb-children .nav-item::before { content: ""; position: absolute; left: -18px; top: -2px; height: calc(50% + 2px); width: 12px;
  border-left: 1.5px solid var(--sb-tree); border-bottom: 1.5px solid var(--sb-tree); border-bottom-left-radius: 8px; }
.sb-children .nav-item:first-child::before { top: 0; height: 50%; }
.sb-children .nav-item:not(.sb-last)::after { content: ""; position: absolute; left: -18px; top: calc(50% - 8px); bottom: -2px; border-left: 1.5px solid var(--sb-tree); }
.sidebar .sb-children .nav-item:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
/* Mục đang mở: khối xanh thương hiệu, chữ trắng; nhánh cây vào mục này cũng xanh */
.sidebar .sb-children .nav-item.active { background: var(--sb-active); color: var(--sb-active-ink); font-weight: 600; }
.sb-children .nav-item.active::before { border-bottom-color: var(--sb-active); }
.sidebar .sb-children .nav-item:focus-visible { outline: 2px solid var(--sb-active); outline-offset: 1px; }

/* ---- Chân menu: USD / VND · Sáng / Tối · Hướng dẫn · hồ sơ ---- */
.sb-foot { flex: none; padding: 8px; border-top: 1px solid var(--sb-border); display: flex; flex-direction: column; gap: 4px; }
.sb-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sb-btn { height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--sb-ink); font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.sb-btn:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.sb-help { width: 32px; padding: 0; font-weight: 700; font-size: 15px; margin-left: auto; }
.sidebar .theme-toggle { min-width: 0; }
.sidebar .festive-toggle { width: 32px; height: 32px; }
.sidebar .festive-toggle-flower { width: 18px; height: 18px; }
.sb-foot .festive-greeting { display: none; }
.sidebar .profile-menu-wrap { position: relative; }
.sidebar .profile-chip { width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ink); cursor: pointer; text-align: left; }
.sidebar .profile-chip:hover { background: var(--sb-hover); }
.sidebar .profile-avatar { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--sb-active); color: #ffffff; font: 700 14px/32px var(--font); text-align: center; display: block; }
.sidebar .profile-meta { min-width: 0; flex: 1; line-height: 1.3; }
.sidebar .profile-name { color: var(--sb-ink-strong); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .profile-role { margin-top: 2px; padding: 0 6px; border-radius: 4px; font-size: 11px; }
/* Menu hồ sơ mở LÊN trên (chân menu); dải icon: mở sang phải */
.sidebar .profile-dropdown { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 0; color: var(--ink); border-radius: 8px; z-index: 60; }

/* ---- Chú thích + menu nổi của dải icon (sidebar.js đặt vị trí) ---- */
.sb-tip { position: fixed; z-index: 70; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--card); font: 500 12px/1.3 var(--font);
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px var(--shadow); }
.sb-tip[hidden], .sb-flyout[hidden] { display: none; }
.sb-flyout { position: fixed; z-index: 70; min-width: 200px; padding: 6px; border-radius: 10px; background: var(--card); color: var(--ink);
  border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow); }
.sb-flyout-h { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sb-flyout-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/18px var(--font);
  text-align: left; cursor: pointer; }
.sb-flyout-item:hover, .sb-flyout-item:focus-visible { background: var(--sb-hover); outline: none; }
.sb-flyout-item.on { background: var(--sb-active); color: var(--sb-active-ink); font-weight: 600; }

/* ---- Thanh mảnh + nền mờ: chỉ màn hẹp ---- */
.sb-mobilebar { display: none; }
.sb-backdrop { display: none; }

@media (min-width: 900px) {
  .sidebar.collapsed { --sb-w: 64px; }
  .sidebar.collapsed .sb-brand-t, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-ext, .sidebar.collapsed .sb-chev,
  .sidebar.collapsed .sb-platform-k, .sidebar.collapsed .platform-select, .sidebar.collapsed .profile-meta, .sidebar.collapsed [data-theme-label],
  .sidebar.collapsed .sb-children { display: none; }
  .sidebar.collapsed .sb-head { flex-direction: column; justify-content: center; gap: 4px; min-height: 0; padding: 12px 0 8px; }
  .sidebar.collapsed .sb-brand { flex: none; }
  .sidebar.collapsed .sidebar-collapse-btn { align-self: center; }
  .sidebar.collapsed .sb-platform { padding: 0 0 10px; }
  .sidebar.collapsed .sb-platform-mini { display: block; }
  .sidebar.collapsed .sb-row { width: 44px; min-height: 44px; margin: 2px 10px; padding: 0; justify-content: center; }
  /* Nhóm chứa trang đang mở: ô xanh, icon trắng */
  .sidebar.collapsed .sb-group.has-active > .sb-group-head,
  .sidebar.collapsed .sb-group.has-active > .sb-group-head .nav-icon { background: var(--sb-active); color: var(--sb-active-ink); }
  .sidebar.collapsed .sb-foot { gap: 4px; padding: 6px 10px; align-items: center; }
  .sidebar.collapsed .sb-tools { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .sidebar.collapsed .sb-btn { width: 44px; height: 30px; padding: 0; }
  .sidebar.collapsed #currencyToggleBtn { font-size: 10px; letter-spacing: -.02em; }
  .sidebar.collapsed .sb-help { margin-left: 0; }
  .sidebar.collapsed .profile-menu-wrap { width: 44px; }
  .sidebar.collapsed .profile-chip { justify-content: center; padding: 4px 0; }
  .sidebar.collapsed .profile-dropdown { left: calc(100% + 14px); right: auto; bottom: 0; min-width: 220px; }
}
@media (max-width: 899px) {
  .sidebar { --sb-w: min(288px, 86vw); position: fixed; top: 0; bottom: 0; left: 0; height: auto; z-index: 80; transform: translateX(-100%); visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s; }
  .sidebar.open { transform: none; visibility: visible; transition: transform .18s ease; box-shadow: 0 0 24px var(--shadow); }
  .sidebar-collapse-btn { display: none; }
  .sb-close { display: grid; }
  .sb-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 79; background: var(--overlay); }
  .sb-mobilebar { display: flex; align-items: center; gap: 8px; height: 48px; flex: none; padding: 0 12px 0 6px; background: var(--sb-bg); color: var(--sb-ink-strong);
    border-bottom: 1px solid var(--sb-border); font-weight: 700; font-size: 15px; }
  .sb-mobilebar .sb-logo { width: 26px; height: 26px; border-radius: 6px; }
  .sb-burger { width: 38px; height: 38px; align-self: center; }
  .sb-burger .ic { width: 22px; height: 22px; }
  body.sb-locked { overflow: hidden; }
  body.sb-locked #devBanner { display: none; }  /* nhãn STAGING không đè menu trượt */
}