/* Khung giao diện chung theo Sổ tay thương hiệu Công ty Cổ phần 26
   Màu chuẩn: xanh #024DA1 (nền tảng) · đỏ #C4151C (điểm nhấn, dưới 25% diện tích) · vàng #FFF100 (ngôi sao)
   Kiểu chữ: Myriad Pro → trên web dùng Source Sans 3 (cùng họ chữ, hỗ trợ tiếng Việt) */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&display=swap");

:root{
  --b-blue:#024DA1; --b-blue-d:#013A7A; --b-blue-dd:#022B5C; --b-blue-50:#EAF1FA; --b-blue-100:#D3E2F4;
  --b-red:#C4151C; --b-red-50:#FBEAEB; --b-yellow:#FFF100;
  --b-ink:#1B2433; --b-mute:#5F6B7A; --b-line:#DCE3EB; --b-bg:#F3F6FA; --b-surface:#FFFFFF; --b-sunk:#EEF2F7;
  --b-ok:#1E7B46; --b-ok-50:#E6F4EC; --b-warn:#B5650D; --b-warn-50:#FDF1E2;
  --b-font:"Source Sans 3","Myriad Pro","Segoe UI",Roboto,Arial,sans-serif;
  --b-radius:10px; --b-shadow:0 1px 2px rgba(16,32,64,.06),0 2px 8px rgba(16,32,64,.05);
  --side-w:248px;
}
:root[data-theme="dark"]{
  --b-ink:#E4EAF2; --b-mute:#9AA7B8; --b-line:#2C3746; --b-bg:#0F1621; --b-surface:#17202D; --b-sunk:#1E2937;
  --b-blue-50:#13284A; --b-blue-100:#1A3561; --b-red-50:#3A1B1D; --b-ok-50:#15301F; --b-warn-50:#33240F;
  --b-shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}
html{font-family:var(--b-font)}
body.shell{margin:0;background:var(--b-bg);color:var(--b-ink);font-family:var(--b-font)}
body.shell{padding-left:var(--side-w)}

/* ---------- thanh bên (máy tính) ---------- */
#side{position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--b-blue) 0%,var(--b-blue-d) 100%);color:#fff;overflow:hidden}
#side .brandbox{display:flex;gap:10px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
#side .logo{width:46px;height:46px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:0 0 auto}
#side .logo img{width:38px;height:38px;object-fit:contain}
#side .bt{line-height:1.15;min-width:0}
#side .bt small{display:block;font-size:10.5px;letter-spacing:.04em;opacity:.8;text-transform:uppercase}
#side .bt b{display:block;font-size:14px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
#side .bt span{display:block;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 10px 120px;scrollbar-width:thin}
#side .grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:14px 10px 4px}
#side a.it,#side button.it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;
  color:#fff;text-decoration:none;font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;cursor:pointer;
  position:relative;text-align:left;min-height:40px}
#side .it:hover{background:rgba(255,255,255,.1)}
#side .it.on{background:#fff;color:var(--b-blue)}
#side .it.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0;background:var(--b-red)}
#side .it .ic{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center}
#side .it svg{width:20px;height:20px}
#side .foot{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:var(--b-blue-dd);
  display:flex;align-items:center;gap:10px;z-index:2}
#side .av{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--b-blue);display:grid;place-items:center;font-weight:800;flex:0 0 auto}
#side .who{min-width:0;flex:1;line-height:1.2}
#side .who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side .who span{font-size:12px;opacity:.75}
#side .ib{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;
  cursor:pointer;display:grid;place-items:center;padding:0}
#side .ib:hover{background:rgba(255,255,255,.12)}
#side .arcs{position:absolute;right:-40px;bottom:58px;width:220px;opacity:.18;pointer-events:none}

/* ---------- thanh trên + thanh dưới (máy tính bảng, điện thoại) ---------- */
#mtop,#mbot,#scrim{display:none}
@media (max-width:1023px){
  body.shell{padding-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  #side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.drawer #side{transform:none}
  body.drawer #scrim{display:block;position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:39}
  #mtop{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:10px;padding:8px 12px;
    background:var(--b-blue);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
  #mtop .logo{width:34px;height:34px;border-radius:8px;background:#fff;display:grid;place-items:center}
  #mtop .logo img{width:28px;height:28px}
  #mtop b{font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mtop button{background:transparent;border:0;color:#fff;width:40px;height:40px;display:grid;place-items:center;cursor:pointer}
  #mbot{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--b-surface);
    border-top:1px solid var(--b-line);padding-bottom:env(safe-area-inset-bottom,0px)}
  #mbot a,#mbot button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;
    font:inherit;font-size:11.5px;font-weight:600;color:var(--b-mute);text-decoration:none;background:none;border:0;cursor:pointer;min-height:56px}
  #mbot svg{width:22px;height:22px}
  #mbot .on{color:var(--b-blue)}
  #mbot .on::after{content:"";width:18px;height:3px;border-radius:2px;background:var(--b-red);margin-top:1px}
}

/* ---------- khối dùng chung cho các trang ---------- */
.pg{max-width:1200px;margin:0 auto;padding:20px 24px 40px}
.pghead{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pghead h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--b-ink)}
.pghead .crumb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--b-blue);margin-bottom:2px}
.pghead .sp{flex:1}
@media (max-width:1023px){.pg{padding:14px 14px 28px}.pghead h1{font-size:20px}}
.b-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:var(--b-radius);box-shadow:var(--b-shadow)}
.b-btn{font:inherit;font-weight:600;font-size:15px;border-radius:8px;border:1px solid var(--b-line);background:var(--b-surface);
  color:var(--b-ink);padding:8px 14px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.b-btn:hover{border-color:var(--b-blue);color:var(--b-blue)}
.b-btn.pri{background:var(--b-blue);border-color:var(--b-blue);color:#fff}
.b-btn.pri:hover{background:var(--b-blue-d);color:#fff}
.b-btn:disabled{opacity:.5;cursor:default}

/* ---------- khung đăng nhập ---------- */
#login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;
  background:radial-gradient(1200px 600px at 110% 110%,rgba(196,21,28,.18),transparent 60%),linear-gradient(160deg,var(--b-blue) 0%,var(--b-blue-dd) 100%)}
#login .box{background:#fff;color:#1B2433;border-radius:16px;padding:28px 26px 22px;width:min(400px,100%);text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;overflow:hidden}
#login .box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--b-blue) 0 70%,var(--b-red) 70% 100%)}
#login img{width:84px;height:84px;object-fit:contain}
#login small{display:block;font-size:11px;letter-spacing:.06em;color:var(--b-blue);font-weight:700;margin-top:8px}
#login h2{margin:2px 0 4px;font-size:22px;color:var(--b-blue);font-weight:800}
#login p{margin:6px 0;color:#5F6B7A;font-size:14px}
#login #lbtn{display:inline-block;margin:14px 0 6px;min-height:44px}
#login #lmsg{color:var(--b-red);font-size:13px;white-space:pre-wrap;min-height:1em}
[hidden]{display:none!important}