/* Khung giao diện: thanh trên, menu trái (thu gọn được), ngăn kéo trên điện thoại, breadcrumbs, toast */
:root{--sb-w:248px;--sb-w-thu:56px;--top-h:48px}
body.co-khung{padding-top:var(--top-h)}
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:50;background:var(--blue);color:#fff;display:flex;align-items:center;gap:10px;padding:0 10px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.topbar .app{color:#fff;white-space:nowrap;font-size:15px}.topbar .app:hover{text-decoration:none}
.topbar .grow{flex:1}
.topbar form.search{flex:1;max-width:520px;margin:0 auto}
.topbar form.search input{width:100%;border:0;border-radius:4px;padding:7px 10px;font:inherit;background:#e9eef7}
.tb-ic{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}.tb-ic:hover{background:rgba(255,255,255,.15)}
.user-menu{position:relative}
.um-btn{display:flex;align-items:center;gap:8px;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:4px 8px;border-radius:4px}
.um-btn:hover{background:rgba(255,255,255,.15)}
.av{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.um-pop{position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:var(--text);min-width:260px;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px 0;z-index:60}
.um-pop[hidden]{display:none}
.um-head{padding:8px 14px 10px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:2px}
.um-vt{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.um-pop a,.um-pop button{display:block;width:100%;text-align:left;padding:8px 14px;border:0;background:none;font:inherit;color:var(--text);cursor:pointer}
.um-pop a:hover,.um-pop button:hover{background:#f3f2f1;text-decoration:none}
/* Menu trái */
.sidebar{position:fixed;top:var(--top-h);bottom:0;left:0;width:var(--sb-w);background:#fff;border-right:1px solid var(--line);overflow-y:auto;z-index:40;padding:8px 0 44px;transition:width .15s}
.sb-nhom{padding:4px 0}
.sb-nhom+.sb-nhom{border-top:1px solid #edebe9}
.sb-tieu-de{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#605e5c}
.sb-tieu-de .ic{font-size:13px}
.sb-muc{display:flex;align-items:center;gap:10px;padding:7px 14px;color:var(--text);border-left:3px solid transparent;cursor:pointer;list-style:none;white-space:nowrap}
.sb-muc::-webkit-details-marker{display:none}
.sb-muc:hover{background:#f3f2f1;text-decoration:none}
.sb-muc .ic{width:22px;text-align:center;font-size:16px;flex:none}
.sb-muc .tx{overflow:hidden;text-overflow:ellipsis}
.sb-muc.active{background:var(--blue-l);border-left-color:var(--blue);color:var(--blue-d);font-weight:600}
.sb-muc.active-cha{color:var(--blue-d);font-weight:600}
.sb-con>summary{position:relative}
.sb-con>summary::after{content:"▸";position:absolute;right:14px;color:#8a8886;transition:transform .15s}
.sb-con[open]>summary::after{transform:rotate(90deg)}
.sb-cap2{padding-left:30px;font-size:13px}
.sb-thu-gon{position:fixed;bottom:8px;left:8px;width:32px;height:28px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;z-index:41}
main.noi-dung{margin-left:var(--sb-w);max-width:none;padding:14px 20px 40px;transition:margin .15s}
/* Thu gọn (máy tính) */
html.sb-thu .sidebar{width:var(--sb-w-thu)}
html.sb-thu .sidebar .tx,html.sb-thu .sb-tieu-de .tx,html.sb-thu .sb-con>summary::after{display:none}
html.sb-thu .sb-tieu-de{justify-content:center;padding:8px 0 4px}
html.sb-thu .sb-cap2{padding-left:14px}
html.sb-thu main.noi-dung{margin-left:var(--sb-w-thu)}
html.sb-thu .sb-thu-gon{transform:rotate(180deg)}
/* Breadcrumbs + đầu trang */
.breadcrumbs{font-size:12px;color:#605e5c;margin:-4px 0 8px}.breadcrumbs span{margin:0 4px;color:#a19f9d}.breadcrumbs b{color:var(--text);font-weight:600}
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #edebe9}
.page-head h1{margin:0}
.page-head>.toolbar{margin:0;justify-content:flex-end}
/* Toast */
.toasts{position:fixed;top:calc(var(--top-h) + 10px);right:14px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:min(440px,92vw)}
.toast{display:flex;gap:10px;align-items:flex-start;box-shadow:0 6px 18px rgba(0,0,0,.15);margin:0;animation:toast-in .2s ease-out}
.toast span{flex:1}.toast .dong{background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:#605e5c}
.toast.an{opacity:0;transform:translateX(20px);transition:all .3s}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
/* Trạng thái rỗng, thẻ lối tắt */
.empty{text-align:center;padding:40px 16px;background:#fff;border:1px dashed var(--line);border-radius:6px;color:#605e5c}
.empty .ic{font-size:40px}.empty h2{color:var(--text)}
.shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.shortcuts a{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;color:var(--text)}
.shortcuts a:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(24,90,189,.12);text-decoration:none}
.shortcuts .ic{font-size:26px}.shortcuts b{display:block;color:var(--blue-d)}
.btn.secondary{background:#fff}
.btn.danger:hover{background:#fde7e9}
table.grid tbody tr td[colspan].muted{text-align:center;padding:18px}
.sb-nen{display:none}
/* Điện thoại: ngăn kéo */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:min(300px,86vw);box-shadow:4px 0 16px rgba(0,0,0,.2);padding-bottom:12px}
  html.sb-thu .sidebar{width:min(300px,86vw)}
  html.sb-thu .sidebar .tx,html.sb-thu .sb-tieu-de .tx{display:inline}
  body.sb-mo .sidebar{transform:none}
  body.sb-mo .sb-nen{display:block;position:fixed;inset:var(--top-h) 0 0 0;background:rgba(0,0,0,.35);z-index:39}
  main.noi-dung,html.sb-thu main.noi-dung{margin-left:0;padding:10px 10px 30px}
  .sb-thu-gon{display:none}
  .topbar form.search{display:none}.um-ten{display:none}
  .topbar .app b{font-size:14px}
  .sb-muc{padding:11px 16px}
}
@media (min-width:901px){#sb-mo{display:none}}
@media print{.topbar,.sidebar,.breadcrumbs,.toasts,.sb-nen{display:none!important}body.co-khung{padding-top:0}main.noi-dung{margin:0;padding:0}}
.topbar .user-menu{margin-left:auto}

/* logo đơn vị (Cấu hình hệ thống) */
.logo-brand{height:22px;max-width:60px;object-fit:contain;vertical-align:middle;background:#fff;border-radius:3px;padding:1px}
.logo-dang-nhap{text-align:center;margin-bottom:6px}.logo-dang-nhap img{max-height:72px;max-width:220px;object-fit:contain}
.chan-trang{text-align:center;font-size:12px;color:#8a8886;padding:14px 8px 4px;margin-top:24px;border-top:1px solid #edebe9}
.trang-dang-nhap .chan-trang{border-top:0;margin-top:0}