/* Khung ứng dụng : menu dọc bên trái (nhóm có mục con), thanh trên gọn. Nạp sau cùng. */
:root{--sb-w:224px;--sb-w-mini:64px;--sb-top:52px}
body.aff-sb #mods{display:none}
body.aff-sb .topnav{padding-left:12px}
body.aff-sb .wrap{margin-left:var(--sb-w);transition:margin-left .18s ease}
body.aff-sb.sb-mini .wrap{margin-left:var(--sb-w-mini)}

.sb{position:fixed;left:0;top:var(--sb-top);bottom:0;width:var(--sb-w);z-index:45;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .18s ease,transform .18s ease}
.sb-scroll{flex:1;min-height:0;overflow:auto;padding:12px 10px 8px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.sb-item,.sb-group>summary{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--fg);font:inherit;font-size:13.5px;font-weight:500;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;list-style:none;white-space:nowrap;text-decoration:none}
.sb-group>summary::-webkit-details-marker{display:none}
.sb-item:hover,.sb-group>summary:hover{background:var(--panel-2)}
.sb-item:focus-visible,.sb-group>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.sb-ic{width:18px;height:18px;flex:none;color:var(--muted)}
.sb-ic svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-chev{width:14px;height:14px;color:var(--muted);transition:transform .15s ease;flex:none}
.sb-chev svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.sb-group[open]>summary .sb-chev{transform:rotate(180deg)}
.sb-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 19px;padding-left:12px;border-left:1px solid var(--line)}
.sb-sub .sb-item{font-size:13px;padding:7px 10px;color:var(--muted);font-weight:500}
.sb-sub .sb-item:hover{color:var(--fg)}
.sb-item.on{background:#efedff;color:#5b4ce0;font-weight:600}
.sb-item.on .sb-ic{color:#5b4ce0}
.sb-group.has-on>summary{color:var(--fg);font-weight:600}
.sb-group.has-on>summary .sb-ic{color:#5b4ce0}
.sb-sep{height:1px;background:var(--line);margin:8px 6px}
.sb-foot{border-top:1px solid var(--line);padding:8px 10px;display:flex;align-items:center;gap:8px}
.sb-foot .sb-note{flex:1;font-size:11.5px;color:var(--muted);line-height:1.35;white-space:normal}
.sb-collapse{border:1px solid var(--line);background:var(--panel);color:var(--muted);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none}
.sb-collapse:hover{color:var(--brand);border-color:var(--brand)}
.sb-collapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sb-item.on{background:#262145;color:#b7aefc}:root:not([data-theme=light]) .sb-item.on .sb-ic,:root:not([data-theme=light]) .sb-group.has-on>summary .sb-ic{color:#b7aefc}}
:root[data-theme=dark] .sb-item.on{background:#262145;color:#b7aefc}
:root[data-theme=dark] .sb-item.on .sb-ic,:root[data-theme=dark] .sb-group.has-on>summary .sb-ic{color:#b7aefc}

/* thu gọn: chỉ còn biểu tượng */
body.sb-mini .sb{width:var(--sb-w-mini)}
body.sb-mini .sb-label,body.sb-mini .sb-chev,body.sb-mini .sb-sub,body.sb-mini .sb-note,body.sb-mini .sb-sep{display:none}
body.sb-mini .sb-item,body.sb-mini .sb-group>summary{justify-content:center;padding:10px 0}
body.sb-mini .sb-foot{justify-content:center}
body.sb-mini .sb-collapse svg{transform:rotate(180deg)}

/* nút mở menu trên màn hình hẹp */
.sb-burger{display:none;border:1px solid var(--line);background:var(--panel);color:var(--fg);width:34px;height:34px;border-radius:8px;place-items:center;cursor:pointer;flex:none}
.sb-burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.sb-veil{display:none}
@media (max-width:900px){
  body.aff-sb .wrap,body.aff-sb.sb-mini .wrap{margin-left:0}
  .sb,body.sb-mini .sb{width:min(280px,82vw);transform:translateX(-100%);box-shadow:none}
  body.sb-mini .sb-label,body.sb-mini .sb-chev,body.sb-mini .sb-note,body.sb-mini .sb-sep{display:revert}
  body.sb-mini .sb-sub{display:flex}
  body.sb-mini .sb-item,body.sb-mini .sb-group>summary{justify-content:flex-start;padding:9px 10px}
  body.sb-open .sb{transform:none;box-shadow:8px 0 24px rgba(0,0,0,.18)}
  body.sb-open .sb-veil{display:block;position:fixed;inset:var(--sb-top) 0 0 0;background:rgba(15,23,42,.35);z-index:44}
  .sb-burger{display:grid}
  .sb-collapse{display:none}
}
@media (prefers-reduced-motion:reduce){.sb,body.aff-sb .wrap{transition:none}}
@media (max-width:900px){.sb{top:0;z-index:70}body.sb-open .sb-veil{inset:0;z-index:69}}