:root { color-scheme:light; --bg:#f3f5f8; --card:#fff; --ink:#1c2430; --mut:#6b7686; --line:#dde2ea; --acc:#0b6bcb; --ok:#188a3e; --bad:#c62828; --warn:#b26a00; --nav:52px; }
:root[data-theme="dark"] { --bg:#10141a; --card:#1a2029; --ink:#e8ecf2; --mut:#9aa6b6; --line:#2b3441; --acc:#5aa9ff; --ok:#4cc26f; --bad:#ff7b72; --warn:#e3a33b;  color-scheme:dark }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body { margin:0 } body { background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom)) }
header { display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
header h1 { font-size:18px; margin:0; flex:1 } header .who { color:var(--mut); font-size:13px }
main { max-width:900px; margin:0 auto; padding:14px }
nav { position:fixed; left:0; right:0; bottom:0; z-index:6; display:grid; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom) }
nav::-webkit-scrollbar { display:none }
nav button { min-height:52px; padding:2px 0; background:none; border:0; color:var(--mut); font:inherit; font-size:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer }
nav button .ic { font-size:20px; line-height:1 } nav button.on { color:var(--acc); font-weight:700 }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px }
h2 { font-size:16px; margin:0 0 10px } h3 { font-size:15px; margin:12px 0 6px }
input,select,textarea { font:inherit; font-size:16px; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); max-width:100%; width:100% }
input[type=checkbox] { width:22px; height:22px; min-height:0; accent-color:var(--acc) }
input[type=number] { width:90px }
label.f { display:block; font-size:13px; color:var(--mut); margin:10px 0 3px }
button.b { font:inherit; font-size:15px; min-height:44px; padding:8px 14px; border-radius:10px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer }
button.b.sec { background:none; color:var(--acc) } button.b.red { border-color:var(--bad); background:none; color:var(--bad) } button.b.sm { min-height:36px; padding:4px 10px; font-size:14px } button.b:disabled { opacity:.5 }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 } .row > input,.row > select { flex:1 1 140px; width:auto }
.btns { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px }
.pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; border:1px solid var(--line); color:var(--mut) } .pill.ok { color:var(--ok); border-color:var(--ok) } .pill.bad { color:var(--bad); border-color:var(--bad) } .pill.warn { color:var(--warn); border-color:var(--warn) }
.ok { color:var(--ok) } .bad { color:var(--bad) } .warn { color:var(--warn) } .mut { color:var(--mut) } .small { font-size:13px }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px } .kv b { display:block; font-size:12px; color:var(--mut); font-weight:600 } .kv span { font-size:15px; word-break:break-word }
.big { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700 } .dot { width:18px; height:18px; border-radius:50%; background:var(--bad); flex:none } .dot.on { background:var(--ok); box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 25%,transparent) }
.qr { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; word-break:break-all; padding:6px 8px; background:var(--bg); border-radius:8px }
canvas { border:1px solid var(--line); background:#fff; max-width:100%; height:auto; image-rendering:pixelated }
.item { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line) } .item:last-child { border-bottom:0 } .item .main { flex:1; min-width:0 } .item .t { font-weight:600; word-break:break-word }
details.card > summary { cursor:pointer; font-weight:700; font-size:16px; list-style:none; min-height:32px } details.card > summary::before { content:"▸ " } details[open].card > summary::before { content:"▾ " } details.card[open] > summary { margin-bottom:10px }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 }
.perm { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line) } .perm:last-child { border-bottom:0 }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:20; display:flex; align-items:flex-end; justify-content:center }
.sheet > div { background:var(--card); width:100%; max-width:560px; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); max-height:92vh; overflow:auto }
.video { position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden } .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.login { max-width:380px; margin:12vh auto 0; padding:0 16px } .login h1 { text-align:center; font-size:22px }
#toast { position:fixed; left:50%; bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; display:none; z-index:30; max-width:92vw; text-align:center }
@media (min-width: 900px) {
  body { padding-bottom:0; padding-top:56px } nav { top:0; bottom:auto; left:auto; right:auto; position:fixed; z-index:6; border:0; background:none; padding:0; height:56px; overflow:visible; left:200px } header { position:fixed; top:0; left:0; right:0; height:56px; padding-top:8px }
  nav button { flex:none; min-height:56px; flex-direction:row; font-size:14px; padding:0 12px; gap:6px } nav button .ic { font-size:18px } #toast { bottom:20px }
  header h1 { flex:none; width:180px }
  header .who { margin-left:auto }
}

/* gọn: danh sách tem và thẻ món */
.job { padding:8px 0; border-bottom:1px solid var(--line) } .job:last-child { border-bottom:0 }
.top { display:flex; align-items:center; gap:8px } .top .t { flex:1; min-width:0; font-weight:600; word-break:break-word }
.acts { display:flex; gap:6px; flex:none } .acts2 { display:flex; gap:8px; margin:8px 0 }
.card.tight { padding:10px 12px; margin-bottom:8px } .card.tight .qr { font-size:12px; padding:4px 8px }
.chk { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer }
.ing { display:grid; grid-template-columns:1fr 76px 22px 40px; gap:6px; align-items:center; margin:6px 0 } .ing input { min-height:40px; width:100%; padding:6px 8px }
button.b.sm { min-height:36px; padding:4px 12px; font-size:14px }
@media (min-width: 900px) { nav { display:flex !important } nav button { min-height:56px } }
.ing select { min-height:40px; width:100%; padding:6px 8px }

.g2 { display:grid; gap:6px; margin-bottom:6px } .g2.a { grid-template-columns:76px 1fr } .g2.b { grid-template-columns:1fr 1fr }
.lb { font-size:11px; color:var(--mut); margin:0 0 2px 2px } .g2 input { min-height:40px; padding:6px 8px }

.subbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px } .subbar button { font:inherit; font-size:13px; min-height:34px; padding:3px 10px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer } .subbar button.on { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700 }

nav a.navlink { min-height:52px; padding:2px 0; color:var(--mut); font-size:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none } nav a.navlink .ic { font-size:20px; line-height:1 }
@media (min-width: 900px) { nav a.navlink { flex-direction:row; font-size:14px; padding:0 12px; gap:6px; min-height:56px } nav a.navlink .ic { font-size:18px } }
details.card.tight > summary { cursor:pointer; list-style:none } details.card.tight > summary::-webkit-details-marker { display:none }

a.hbtn { display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 10px; border-radius:99px; border:1px solid var(--acc); color:var(--acc); text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap }
header h1 { font-size:15px; white-space:nowrap; flex:none } header .who { flex:none; font-size:12px } a.hbtn { font-size:12px; padding:0 8px } @media (max-width:400px) { header .who { display:none } }