/* khung ứng dụng: điện thoại = thanh dưới; ≥1024px = thanh bên */
#app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--gutter);padding-top:calc(var(--s2) + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:800;letter-spacing:.02em;color:var(--accent);display:flex;align-items:center;gap:var(--s2)}
.topbar .brand svg{width:26px;height:26px}
.main{flex:1;padding:var(--s4) var(--gutter) calc(var(--nav-h) + var(--s5) + env(safe-area-inset-bottom));max-width:1200px;width:100%;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--nav-h);color:var(--soft);text-decoration:none;font-size:.75rem;font-weight:600;position:relative}
.nav a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--accent)} .nav a .cnt{position:absolute;top:6px;left:calc(50% + 6px);background:var(--err-solid);color:#fff;border-radius:999px;font-size:.7rem;padding:0 6px;min-width:18px;text-align:center}
@media (max-width:1023.98px),(max-device-width:600px){.nav a[data-tier="more"]{display:none}}
@media (min-width:1024px) and (min-device-width:601px){
  .nav a.more-link{display:none}
  #app{flex-direction:row;flex-wrap:wrap}
  .topbar{width:100%;order:0}
  .nav{position:sticky;top:0;order:1;flex-direction:column;width:var(--side-w);height:calc(100dvh - 57px);align-self:flex-start;border-top:0;border-right:1px solid var(--line);padding:var(--s3);gap:var(--s1);top:57px}
  .nav a{flex:none;flex-direction:row;justify-content:flex-start;min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-sm);font-size:var(--fs);gap:var(--s3)}
  .nav a[aria-current="page"]{background:var(--accent-weak)} .nav a .cnt{position:static;margin-left:auto}
  .main{order:2;flex:1;min-width:0;padding-bottom:var(--s6)}
}
/* màn đăng nhập */
.gate{width:100%;box-sizing:border-box;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s4) var(--gutter)}
.gate .card{width:min(440px,100%)} .gate .brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);font-size:var(--fs-xl);font-weight:800;color:var(--accent)}
.gate .brand svg{width:40px;height:40px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)} .list>li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3)}

.tabs{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1)} .tabs .btn{flex:none}

/* màn đăng nhập & trạng thái kết nối: căn giữa trên mọi thiết bị */
.gate .card{text-align:center} .gate .brand{justify-content:center}
.gate form{text-align:left}
.gate .conn{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.conn-st{display:inline-flex;align-items:center;gap:var(--s2)} .conn-st .dot{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.conn-st.ok .dot{background:var(--ok)} .conn-st.warn .dot{background:var(--warn)}
.gate .conn .btn{min-width:160px;justify-content:center} .install{align-items:center}
.banner.center{flex-direction:column;align-items:center;text-align:center;max-width:640px;margin-inline:auto;width:100%}
.center-row{justify-content:center;text-align:center;flex-direction:column}
/* chip đồng bộ: dòng 1 trạng thái, dòng 2 phiên bản · tên nhân viên */
.chip .chip-b{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.chip .chip-m{color:var(--soft);font-size:var(--fs-sm);max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.chip:has(.chip-m:not(:empty)){padding-block:var(--s1)}

/* thanh thông báo (hết phiên / ngoại tuyến): dải ngang đầy chiều rộng ngay dưới thanh trên cùng, không nằm lọt cạnh menu */
.top{position:sticky;top:0;z-index:20;width:100%;order:0;flex:0 0 100%} .top .topbar{position:static} .banner-host{width:100%} .banner-host:empty{display:none}
@media (min-width:1024px) and (min-device-width:601px){.nav{top:var(--top-h,57px) !important;height:calc(100dvh - var(--top-h,57px)) !important}}
.banner-host .banner.center{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s2) var(--s4);max-width:none;margin:0;border-radius:0;border-width:0 0 1px 0;padding:var(--s2) var(--gutter)}
.banner-host .banner.center .btn{min-height:36px;padding:0 var(--s4)}

/* PC: thanh menu dọc thu gọn thành dải biểu tượng, rê chuột / focus thì bung đè lên nội dung; bàn làm việc dùng toàn bộ chiều ngang */
@media (min-width:1024px) and (min-device-width:601px){
  :root{--rail-w:64px} #app{align-content:flex-start}
  .nav{position:fixed !important;left:0;top:var(--top-h,57px) !important;height:calc(100dvh - var(--top-h,57px)) !important;width:var(--rail-w) !important;overflow:hidden;z-index:40;transition:width .15s ease,box-shadow .15s ease;padding-inline:var(--s2)}
  .nav a{white-space:nowrap;padding-inline:var(--s3)} .nav a svg{flex:none}
  .nav a>span:not(.cnt){opacity:0;transition:opacity .1s ease} .nav a .cnt{position:absolute;top:4px;right:6px;left:auto;margin:0}
  .nav:hover,.nav:focus-within{width:var(--side-w) !important;box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18))}
  .nav:hover a>span:not(.cnt),.nav:focus-within a>span:not(.cnt){opacity:1} .nav:hover a .cnt,.nav:focus-within a .cnt{position:static;margin-left:auto}
  .main{max-width:none !important;margin:0 !important;margin-left:var(--rail-w) !important;width:calc(100% - var(--rail-w))}
}
.stage-box{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .stage-t{white-space:nowrap}
.tbl .stage-box{align-items:flex-start}
@media (min-width:1100px){.banner-host .banner.center,#desktop-mode-note{padding-block:3px;font-size:.85rem;line-height:1.3;min-height:0;gap:var(--s1) var(--s3);flex-wrap:nowrap}.banner-host .banner.center .btn{min-height:26px;padding:0 var(--s3);font-size:.85rem;white-space:nowrap}.banner-host .banner.center>div{margin:0}}
/* cờ số: đỏ = mới phát sinh chưa xử lý, xanh = đang xử lý */
.nav a .cnt.xl{background:var(--accent)} .nav a .cnt.moi~.cnt.xl{top:26px}
.nav a .cnt.moi+.cnt.xl{margin-left:4px}
.btn .cnt{margin-left:6px;border-radius:999px;font-size:.7rem;padding:0 6px;min-width:18px;display:inline-block;text-align:center;color:#fff;background:var(--err-solid)} .btn .cnt.xl{background:var(--accent)}
.doc-flag{margin-left:var(--s2)}

/* v5.147 PC/Mac co giãn 2 chiều: chữ theo chiều ngang, nội dung căn giữa theo --mw, menu ghim/thu, mật độ */
.nav-pin{display:none}
@media (min-width:1024px) and (min-device-width:601px){
  html{font-size:clamp(14px,13px + .195vw,18px)}
  :root{--mw:1760px} .main:has(.card.stack>form){--mw:1280px} .main:has(.ord-form){--mw:1560px}
  .main{--pad:max(var(--gutter),calc((100% - var(--mw)) / 2));padding-inline:var(--pad) !important}
  html[data-rail="open"]{--rail-w:var(--side-w)}
  html[data-rail="open"] .nav a>span:not(.cnt){opacity:1} html[data-rail="open"] .nav a .cnt{position:static;margin-left:auto}
  html[data-rail="open"] .nav:hover,html[data-rail="open"] .nav:focus-within{box-shadow:none}
  .nav-pin{display:flex;align-items:center;justify-content:center;margin-top:auto;min-height:var(--tap);border:0;background:none;color:var(--soft);cursor:pointer;border-radius:var(--r-sm);font:inherit;gap:var(--s2);white-space:nowrap}
  .nav-pin:hover{background:var(--accent-weak);color:var(--accent)} .nav{display:flex;flex-direction:column}
  .nav-pin{justify-content:flex-start;padding:0 var(--s3)} .nav-pin svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s ease} html[data-rail="open"] .nav-pin svg{transform:rotate(180deg)}
  .nav-pin>span{opacity:0} html[data-rail="open"] .nav-pin>span,.nav:hover .nav-pin>span,.nav:focus-within .nav-pin>span{opacity:1}
  html[data-density="compact"]{--tap:36px}
  html[data-density="compact"] .tbl th,html[data-density="compact"] .tbl td{padding-block:3px}
  html[data-density="compact"] .card{padding-block:var(--s3)}
  html{overscroll-behavior:none}
}

/* 5.185: thanh trên cùng có màu nền thương hiệu nhạt (tách khỏi vùng nội dung) */
.topbar{background:var(--accent-weak);border-bottom-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
/* 5.231: hai nút cuối menu gọn trong một khối: hàng ngang khi menu mở, cột khi thu */
.nav-tools{display:none}
@media (min-width:1024px) and (min-device-width:601px){
  .nav-tools{display:flex;flex-direction:column;margin-top:auto;gap:0;border-top:1px solid var(--line);padding-top:var(--s2)}
  .nav-tools .nav-pin{margin-top:0;min-height:36px}
  html[data-rail="open"] .nav-tools{flex-direction:row;flex-wrap:nowrap}
  html[data-rail="open"] .nav-tools .nav-pin{flex:1 1 auto;min-width:0}
  html[data-rail="open"] .nav-tools .nav-help{flex:none}
}