/* Khung ứng dụng: thanh bên + nội dung (xếp chồng trên màn hình hẹp) */
.app{display:flex;flex-wrap:wrap;min-height:100vh;align-items:stretch}
.side{flex:0 0 232px;background:linear-gradient(180deg,var(--side-a),var(--side-b));border-right:1px solid var(--navyline);color:var(--navytext);padding:20px 12px;display:flex;flex-direction:column;gap:4px}
/* Màn rộng: thanh bên đứng yên, chỉ nội dung trang cuộn; menu dài hơn màn hình thì tự cuộn trong thanh bên. */
@media (min-width:768px){.side{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;scrollbar-width:thin}}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;color:#fff;font-weight:600;font-size:16px;letter-spacing:.2px}
.brand small{display:block;font-weight:400;font-size:12px;color:var(--navymute);letter-spacing:.4px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--navytext);font-weight:500;text-decoration:none}
.nav a:hover{background:rgba(34,228,255,.12);color:#fff}
.nav a.on{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:700}
.nav-ic{width:18px;height:18px;flex:0 0 18px;opacity:.8}
.nav a.on .nav-ic,.nav a:hover .nav-ic,.side-link:hover .nav-ic{opacity:1}
.side-link{display:flex;align-items:center;gap:12px;padding:8px 10px;color:var(--navytext);border-radius:8px;text-decoration:none}
.side-link:hover{background:rgba(34,228,255,.12);color:#fff}
.nav .sec{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--navymute);padding:14px 10px 4px}
.nav .badge{margin-left:auto;background:var(--amber);color:#2A1B00;border-radius:10px;padding:0 7px;font-size:12px;font-weight:600}
.side .me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 10px;border-top:1px solid var(--navyline);color:#fff}
.side .me small{display:block;color:var(--navymute);font-size:12px}
/* Nút đổi giao diện: chỉ hiện nhãn của chế độ đang dùng (html[data-theme]; không có = theo hệ thống) */
.theme-btn{margin-top:8px;background:none;border:1px solid var(--navyline);border-radius:8px;padding:7px 10px;color:var(--navytext);font:inherit;font-size:13.5px;cursor:pointer;text-align:left;width:100%}
.theme-btn:hover{background:rgba(34,228,255,.12);color:#fff}
.theme-btn span{display:none}
:root:not([data-theme]) .theme-btn .t-sys,:root[data-theme="light"] .theme-btn .t-light,:root[data-theme="dark"] .theme-btn .t-dark{display:inline}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 28px;background:var(--topbar);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .crumb{color:var(--ink3);font-size:13px}
.search{flex:1 1 280px;max-width:420px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 12px;height:36px;background:var(--surface);color:var(--ink3)}
.page{padding:24px 28px 40px;display:flex;flex-direction:column;gap:20px}
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-h h1{font-size:24px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.page-h p{color:var(--ink3);margin-top:2px}

/* Màn hẹp (E9): menu thu gọn, điều khiển chạm >= 44 px, bảng nhập tiến độ thành thẻ. */
.menu-btn{display:none}
@media (max-width:767px){
  .menu-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 16px;background:var(--side-b);color:#fff;border:0;border-bottom:1px solid var(--navyline);font:inherit;font-weight:600;cursor:pointer}
  .side{display:none;flex-basis:100%}
  .side.open{display:flex}
  .page{padding:16px 16px 32px}
  .btn,.input,.seg button,.nav a{min-height:44px}
  .btn.sm{min-height:40px;padding:0 12px}
  table.tbl.cards{min-width:0 !important}
  table.tbl.cards thead{display:none}
  table.tbl.cards tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px;border-bottom:1px solid var(--line2)}
  table.tbl.cards td{display:flex;flex-direction:column;gap:2px;border:0;padding:0}
  table.tbl.cards td[data-label]::before{content:attr(data-label);font-size:12px;color:var(--ink3);font-weight:400}
  table.tbl.cards td.right{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  table.tbl.cards td[colspan]{grid-column:1 / -1}
}

/* Khung chờ trước khi giao diện tương tác sẵn sàng (AD4) */
.app-boot { display: flex; min-height: 100vh; }
.app-boot:has(~ :not(script)) { display: none; }
.boot-side { flex: 0 0 232px; background: linear-gradient(180deg,var(--side-a),var(--side-b)); padding: 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.boot-brand { color: #fff; font-weight: 600; font-size: 16px; padding: 4px 10px 16px; }
.boot-line, .boot-row, .boot-title { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(128,128,128,.08), rgba(128,128,128,.18), rgba(128,128,128,.08)); background-size: 200% 100%; animation: boot-shimmer 1.2s linear infinite; }
.boot-side .boot-line { background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)); }
.boot-line { height: 30px; }
.boot-main { flex: 1; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.boot-title { height: 28px; width: 280px; }
.boot-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.boot-row { height: 36px; }
.boot-text { color: var(--ink3); font-size: 13px; }
@keyframes boot-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (max-width:767px) { .boot-side { display: none; } .boot-title { width: 60%; } }
@media (prefers-reduced-motion: reduce) { .boot-line, .boot-row, .boot-title { animation: none; } }

/* Logo + tên phần mềm (Quản trị → Tên và logo, 15/10/2026) */
.brand-mark{display:flex;align-items:center;gap:10px;min-width:0}
.brand-name{font-weight:600;font-size:16px;color:#fff;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand-name small{display:block;font-weight:400;font-size:12px;color:var(--navymute);letter-spacing:.4px}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand-logo img{display:block;max-height:34px;max-width:150px;object-fit:contain}
.brand-logo.on-light{background:#fff;border-radius:8px;padding:4px 6px}
.brand-mark.lg .brand-name{font-size:22px}
.brand-mark.lg .brand-logo img{max-height:52px;max-width:220px}
.brand-preview{background:linear-gradient(180deg,var(--side-a),var(--side-b));border-radius:10px;padding:16px}
.brand-tab{display:inline-flex;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:6px 14px;font-size:12.5px;background:var(--surface)}