:root{
  --ink:#16263a; --ink-2:#44546a; --ink-3:#7a8798;
  --paper:#ffffff; --ground:#eef1f4; --line:#d5dbe2;
  --navy:#1d3b5c; --navy-2:#2b5580;
  --input:#fff8dc; --input-line:#e6c75a;   /* ô vàng = ô nhập, giống phiếu */
  --calc:#e3f1ea; --calc-ink:#1e6b47;     /* ô xanh = tự tính */
  --warn:#9a3412; --warn-bg:#fff1e8; --ok:#1e6b47;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Be Vietnam Pro",system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;
     color:var(--ink);background:var(--ground)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy-2)}

/* top bar */
.top{background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap}
.top h1{font-size:16px;font-weight:600;margin:0;letter-spacing:.1px}
.top .sub{opacity:.75;font-size:13px}
.top .who{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:14px}
.top button{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:var(--r);padding:4px 10px;cursor:pointer}
.save{font-size:13px;opacity:.9}
.save.err{color:#ffd0b5;opacity:1}

/* layout */
.wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;max-width:1240px;margin:20px auto;padding:0 20px}
@media (max-width:820px){.wrap{grid-template-columns:1fr}.steps{position:static!important;display:flex;overflow-x:auto}}
.steps{position:sticky;top:16px;align-self:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:6px}
.steps button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:4px;cursor:pointer;white-space:nowrap}
.steps button .n{font-variant-numeric:tabular-nums;color:var(--ink-3);width:14px}
.steps button .c{margin-left:auto;font-size:12px;color:var(--ink-3)}
.steps button.on{background:var(--navy);color:#fff}
.steps button.on .n,.steps button.on .c{color:#c9d6e6}
.steps button .bad{color:var(--warn);font-weight:600}
.steps button.on .bad{color:#ffd0b5}

main{min-width:0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.panel h2{font-size:19px;margin:0 0 4px;font-weight:600}
.panel .lead{color:var(--ink-2);margin:0 0 14px;max-width:75ch}
.note{background:#f4f6f9;border-left:3px solid var(--navy-2);padding:8px 12px;margin:10px 0;color:var(--ink-2);font-size:14px;max-width:80ch}

/* item list */
.item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff}
.item>.head{display:flex;gap:12px;align-items:center;padding:10px 12px;cursor:pointer}
.item>.head .code{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:13px;min-width:28px}
.item>.head .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item>.head .meta{font-size:13px;color:var(--ink-2);white-space:nowrap}
.item>.head .flag{font-size:12px;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:1px 8px;white-space:nowrap}
.item.open>.head{border-bottom:1px solid var(--line);background:#f8f9fb}
.item .body{padding:14px 14px 6px}
.empty{color:var(--ink-3);padding:14px 0}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media (max-width:700px){.grid{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:4px}
.f.wide{grid-column:1/-1}
.f label{font-size:13px;color:var(--ink-2);font-weight:500}
.f label .req{color:var(--warn)}
.f .help{font-size:12.5px;color:var(--ink-3)}
.f input,.f select,.f textarea{border:1px solid var(--input-line);background:var(--input);border-radius:4px;padding:7px 9px;width:100%}
.f textarea{min-height:58px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--navy-2);outline-offset:0;background:#fff}
.f.miss input,.f.miss select,.f.miss textarea{border-color:#d97a4a}
.calc{background:var(--calc);color:var(--calc-ink);border-radius:4px;padding:7px 9px;font-variant-numeric:tabular-nums;min-height:38px}
.f input:disabled{background:#f1f2f4;border-color:var(--line);color:var(--ink-3)}

.row-actions{display:flex;gap:8px;justify-content:space-between;padding:6px 0 10px}
.btn{text-decoration:none;display:inline-block;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:var(--r);padding:8px 14px;cursor:pointer}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.danger{background:#fff;color:var(--warn);border-color:#e3b9a3}
.btn:disabled{opacity:.5;cursor:default}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* issues */
.issues{list-style:none;margin:0;padding:0}
.issues li{padding:7px 0;border-bottom:1px solid #eef0f3;display:flex;gap:10px}
.issues li .where{color:var(--ink-2);min-width:0}
.issues li .what{color:var(--warn);margin-left:auto;text-align:right}
.okline{color:var(--ok);font-weight:500}

/* login */
.login{max-width:440px;margin:8vh auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.login h1{font-size:20px;margin:0 0 4px}
.login p{color:var(--ink-2);margin:0 0 18px}
.login .f{margin-bottom:12px}
.msg{color:var(--warn);min-height:22px;font-size:14px}

/* admin table */
table.st{width:100%;border-collapse:collapse;font-size:14px}
table.st th,table.st td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.st th{font-weight:600;color:var(--ink-2);background:#f6f7f9}
table.st td.n{text-align:right;font-variant-numeric:tabular-nums}
.pill{font-size:12.5px;border-radius:10px;padding:2px 8px;white-space:nowrap}
.pill.done{background:var(--calc);color:var(--calc-ink)}
.pill.doing{background:var(--input);color:#7a5a00}
.pill.none{background:#eef0f3;color:var(--ink-3)}
.scroll{overflow-x:auto}
pre.report{white-space:pre-wrap;background:#f6f7f9;border:1px solid var(--line);border-radius:var(--r);padding:12px;font-size:13px;max-height:420px;overflow:auto}
.banner{background:var(--warn-bg);color:var(--warn);border:1px solid #f0c9b2;padding:10px 14px;border-radius:var(--r);margin-bottom:14px}

/* ---------- hướng dẫn: nút nhấp nháy + cửa sổ nổi */
.g-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #f2c94c;background:#f2c94c;color:#3d2e00;
       font-weight:600;border-radius:999px;padding:5px 14px;cursor:pointer;position:relative}
.g-btn .g-dot{width:8px;height:8px;border-radius:50%;background:#b45309}
.g-btn.blink{animation:g-blink 1.1s ease-in-out infinite}
.g-btn.blink .g-dot{animation:g-dot 1.1s ease-in-out infinite}
.g-btn.blink::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid #f2c94c;animation:g-ring 1.1s ease-out infinite}
@keyframes g-blink{0%,100%{background:#f2c94c}50%{background:#fff3c4}}
@keyframes g-dot{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes g-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.g-btn.blink,.g-btn.blink .g-dot{animation:none}.g-btn.blink::after{animation:none;opacity:.8}}
.g-btn.on-login{margin:0 0 14px}

.g-overlay{position:fixed;inset:0;background:rgba(16,28,44,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.g-overlay.show{display:flex}
.g-modal{background:#fff;border-radius:8px;width:min(920px,100%);max-height:min(88vh,760px);display:flex;flex-direction:column;
         box-shadow:0 18px 48px rgba(0,0,0,.25);animation:g-in .18s ease-out}
@keyframes g-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.g-head h2{margin:0;font-size:18px}
.g-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2);padding:0 4px}
.g-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:0;flex:1}
.g-toc{border-right:1px solid var(--line);padding:10px 8px;overflow:auto}
.g-toc a{display:block;padding:7px 10px;border-radius:4px;color:var(--ink);text-decoration:none;font-size:14px}
.g-toc a.on{background:var(--navy);color:#fff}
.g-content{overflow:auto;padding:4px 24px 20px;scroll-behavior:smooth}
.g-content section{padding-top:14px}
.g-content h3{font-size:16px;margin:0 0 6px;color:var(--navy)}
.g-content p,.g-content li{max-width:72ch}
.g-content ul,.g-content ol{padding-left:20px;margin:6px 0}
.g-content li{margin:4px 0}
.g-content code{background:#f1f3f6;padding:0 4px;border-radius:3px}
.g-in{background:var(--input);border:1px solid var(--input-line);padding:0 5px;border-radius:3px}
.g-calc{background:var(--calc);color:var(--calc-ink);padding:0 5px;border-radius:3px}
.g-req{color:var(--warn);font-weight:600}
.g-key{background:#f4f6f9;border-left:3px solid var(--navy-2);padding:6px 10px}
.g-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.g-foot label{font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
@media (max-width:700px){.g-body{grid-template-columns:1fr}.g-toc{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.g-toc a{white-space:nowrap}}