/* Layout: bảng điều hành HVS LOGISTICS — dải cam thương hiệu, nền ấm, cam đậm cho đúng một hành động tiếp theo */
:root{
  --bg:#FBF7F5; --surface:#FFFFFF; --sunk:#F5EEEB; --ink:#26191A; --muted:#75625F; --line:#EADFDC;
  --band:#E41D25; --band-ink:#FFFFFF; --band-mute:#FBD5D6; --band-deep:#A9121A;
  --gold:#EFBA0C; --gold-soft:#FDF3CF; --gold-ink:#7A5B00;
  --accent:#C8151D; --accent-ink:#FFFFFF; --accent-soft:#FDE6E6;
  --ok:#17804A; --ok-bg:#E0F3E8; --warn:#A85E00; --warn-bg:#FCEDD5; --bad:#C2352B; --bad-bg:#FBE2DF; --info:#2460C2; --info-bg:#E2ECFB;
  --shadow:0 1px 2px rgba(60,30,10,.07),0 8px 24px rgba(60,30,10,.06);
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#170F0F; --surface:#221617; --sunk:#2E1D1E; --ink:#F7ECEA; --muted:#C4A9A6; --line:#40292A;
  --band:#B3141B; --band-ink:#FFF6F4; --band-mute:#FFD0D2; --band-deep:#7C0D12;
  --gold:#EFBA0C; --gold-soft:#3A2E0A; --gold-ink:#F3C93A;
  --accent:#FF6B6F; --accent-ink:#2A0507; --accent-soft:#4A1E20;
  --ok:#45BB78; --ok-bg:#133022; --warn:#EBA43B; --warn-bg:#33250F; --bad:#F06B60; --bad-bg:#3A1917; --info:#6FA2F2; --info-bg:#172A47;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#170F0F; --surface:#221617; --sunk:#2E1D1E; --ink:#F7ECEA; --muted:#C4A9A6; --line:#40292A;
  --band:#B3141B; --band-ink:#FFF6F4; --band-mute:#FFD0D2; --band-deep:#7C0D12;
  --gold:#EFBA0C; --gold-soft:#3A2E0A; --gold-ink:#F3C93A;
  --accent:#FF6B6F; --accent-ink:#2A0507; --accent-soft:#4A1E20;
  --ok:#45BB78; --ok-bg:#133022; --warn:#EBA43B; --warn-bg:#33250F; --bad:#F06B60; --bad-bg:#3A1917; --info:#6FA2F2; --info-bg:#172A47;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1240px;margin:0 auto}
.narrow{max-width:620px}
header.band{background:var(--band);color:var(--band-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:9}
header.band .wrap{display:flex;align-items:center;gap:14px;padding-block:12px;flex-wrap:wrap}
.mark{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:22px;height:22px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.06em}
.brand span{font-size:11px;letter-spacing:.12em;color:var(--band-mute);text-transform:uppercase}
.hright{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.clock{font-family:var(--f-display);font-size:24px;font-weight:600}
.role{font-size:12px;font-weight:600;border:1px solid color-mix(in srgb,var(--band-ink) 30%,transparent);border-radius:999px;padding:3px 10px;color:var(--band-mute)}
.hbtn{background:transparent;border:1px solid color-mix(in srgb,var(--band-ink) 35%,transparent);color:var(--band-ink);border-radius:8px;padding:6px 10px;font-size:13px}
nav.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);padding-top:6px}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:600;color:var(--muted);white-space:nowrap}
nav.tabs button[aria-current="true"]{color:var(--ink);border-color:var(--accent)}
nav.tabs .badge{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-left:4px}
main{padding-block:18px 64px;display:flex;flex-direction:column;gap:16px}
h2{font-family:var(--f-display);font-size:26px;font-weight:700;margin:0;letter-spacing:.02em;text-wrap:balance;line-height:1.1}
h3{font-size:15px;margin:0;font-weight:700}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .small{font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);min-width:0}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:10px 14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:44px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.big{width:100%;min-height:62px;font-size:19px;font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.btn.sm{min-height:34px;padding:5px 10px;font-size:13px}
.btn.icon{min-height:32px;min-width:32px;padding:0;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.bad{background:var(--bad-bg);color:var(--bad)} .chip.info{background:var(--info-bg);color:var(--info)}
.plate{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.04em;border:2px solid var(--ink);border-radius:4px;padding:0 6px;background:var(--surface);color:var(--ink);white-space:nowrap;line-height:1.35}
.t{font-family:var(--f-display);font-size:21px;font-weight:600;line-height:1}
.num{font-family:var(--f-display);font-weight:700;font-size:36px;line-height:1}
.num small{font-size:18px;color:var(--muted);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi.alert{border-color:var(--bad);background:color-mix(in srgb,var(--bad-bg) 55%,var(--surface))}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis .kpi:last-child{grid-column:1/-1}}
.bar{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden;display:flex}
.bar b{background:var(--ok)} .bar u{background:var(--info)} .bar s{background:var(--bad)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}}
.board{display:flex;flex-direction:column;gap:8px}
.bhead,.drow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,2fr) minmax(0,.9fr);gap:14px;align-items:center}
.bhead{padding:0 16px}
.drow{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-align:left;width:100%;border-left:5px solid var(--line)}
.drow.s-on{border-left-color:var(--ok)} .drow.s-late{border-left-color:var(--warn)} .drow.s-bad{border-left-color:var(--bad)} .drow.s-done{border-left-color:var(--muted)}
.drow:hover{border-color:var(--muted)}
.cell{min-width:0;display:flex;flex-direction:column;gap:4px}
.name{font-weight:700;overflow-wrap:anywhere}
@media (max-width:760px){.bhead{display:none}.drow{grid-template-columns:minmax(0,1fr) auto}.drow .c-route{grid-column:1/-1}}
.strip{display:flex;align-items:center;gap:0;min-height:22px;overflow:hidden}
.strip .dep{width:12px;height:12px;border-radius:3px;background:var(--ink);flex:none}
.strip .seg{height:3px;flex:1 1 10px;min-width:6px;max-width:34px;background:var(--line)}
.strip .seg.on{background:var(--ok)}
.strip .dot{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line);background:var(--surface);flex:none}
.strip .dot.done{background:var(--ok);border-color:var(--ok)} .strip .dot.failed{background:var(--bad);border-color:var(--bad)}
.strip .dot.started,.strip .dot.arrived{border-color:var(--info);background:var(--info-bg);box-shadow:0 0 0 3px var(--info-bg)}
@media (prefers-reduced-motion:no-preference){.strip .dot.started,.strip .dot.arrived{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}}
.feed{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:46px 10px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev .tm{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2}
.ev i{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--muted)}
.ev i.ok{background:var(--ok)} .ev i.bad{background:var(--bad)} .ev i.info{background:var(--info)} .ev i.accent{background:var(--accent)}
.chart svg{width:100%;height:auto;display:block}
.empty{padding:26px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;gap:6px;align-items:center}
.empty b{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field input,.field select,.field textarea,.in{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 12px;min-height:44px;width:100%}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
/* driver */
.hero{background:var(--band);color:var(--band-ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.hero .lbl{color:var(--band-mute)}
.hero h2{color:var(--band-ink)}
.hero .muted{color:var(--band-mute)}
.hero .btn:not(.primary):not(.ok){background:transparent;color:var(--band-ink);border-color:color-mix(in srgb,var(--band-ink) 35%,transparent)}
.hero .field input{background:color-mix(in srgb,var(--band-ink) 8%,var(--band));border-color:color-mix(in srgb,var(--band-ink) 25%,transparent);color:var(--band-ink)}
.hero a{color:var(--band-ink)}
.bigt{font-family:var(--f-display);font-size:46px;font-weight:700;line-height:1}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stepper span{border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--band-ink) 10%,transparent);color:var(--band-mute)}
.stepper span.on{background:var(--ok);color:#fff}
.stepper span.now{background:var(--accent);color:var(--accent-ink)}
.stop{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px}
.seqn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:17px;background:var(--sunk);color:var(--ink)}
.seqn.done{background:var(--ok);color:#fff} .seqn.failed{background:var(--bad);color:#fff} .seqn.started,.seqn.arrived{background:var(--info);color:#fff}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumb{border:0;padding:0;background:var(--sunk);border-radius:8px;overflow:hidden;width:92px;display:flex;flex-direction:column;text-align:left;color:var(--ink)}
.thumb img{width:92px;height:92px;object-fit:cover;display:block}
.thumb span{font-size:11px;padding:3px 6px;color:var(--muted)}
.thumb.stale{outline:2px solid var(--warn)}
.maplink{font-size:13px;color:var(--muted)}
.scrim{position:fixed;inset:0;background:rgba(8,14,24,.55);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--bg);z-index:21;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) 16px;display:flex;flex-direction:column;gap:14px;box-shadow:-10px 0 30px rgba(0,0,0,.2)}
.tl{display:flex;flex-direction:column;gap:10px}
.metrics{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.metrics b{font-family:var(--f-display);font-size:18px;font-weight:600}
.lb{position:fixed;inset:0;z-index:30;background:rgba(5,9,15,.92);display:grid;place-items:center;padding:20px}
.lb img{max-height:88vh;border-radius:6px}
.lb button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:9px;z-index:40;max-width:calc(100% - 32px);font-weight:500;box-shadow:var(--shadow)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:980px;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;background:var(--sunk)}
td.r,th.r{text-align:right}
.cal{display:grid;grid-template-columns:repeat(31,8px);gap:2px}
.cal i{width:8px;height:14px;border-radius:2px;background:var(--sunk);display:block}
.cal i.ok{background:var(--ok)} .cal i.late{background:var(--warn)} .cal i.nout{background:var(--bad)} .cal i.x{background:transparent}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
@media (max-width:420px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.ostop{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.ostop .seqn{width:24px;height:24px;font-size:14px}
.olist{display:flex;flex-direction:column;gap:6px}
.orow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
@media (max-width:640px){.orow{grid-template-columns:minmax(0,1fr) auto}.orow .o-sel{grid-column:1/-1}}
.banner{border-radius:10px;padding:12px 14px;background:var(--warn-bg);color:var(--warn);font-weight:500}
.banner.info{background:var(--info-bg);color:var(--ink)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
details summary{cursor:pointer}
@media (prefers-reduced-motion:no-preference){.drow,.btn{transition:border-color .15s,background .15s}}

/* ---- standalone app additions ---- */
html,body{margin:0;min-height:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.login{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.login .card{width:min(420px,100%);display:flex;flex-direction:column;gap:14px}
.login .brandrow{display:flex;gap:12px;align-items:center;background:var(--band);color:var(--band-ink);padding:16px;border-radius:14px}
.map{height:340px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--sunk);z-index:0}
.map.tall{height:420px}
.map.short{height:260px}
.leaflet-container{font-family:var(--f-body)}
.pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pin.depot{border-radius:6px;background:#142740}
.pin.plan{background:#fff;color:#142740;border-color:#142740;width:22px;height:22px;font-size:12px}
.pin.ok{background:#17804A}.pin.bad{background:#C2352B}.pin.info{background:#2460C2}.pin.accent{background:#E85D0C}
.pin.drv{width:auto;min-width:26px;padding:0 8px;border-radius:13px;background:#E85D0C;font-family:var(--f-body);font-size:12px;font-weight:600;white-space:nowrap}
.pin.drv.idle{background:#5E6E85}
.gps{font-size:12px;color:var(--muted)}
.chip.far{background:var(--bad-bg);color:var(--bad)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.pwbox{font-family:var(--f-display);font-size:24px;letter-spacing:.08em;background:var(--sunk);padding:10px 14px;border-radius:9px;user-select:all}

.feed{max-height:560px;overflow-y:auto}

/* ---- v1.2 giao diện cam ---- */
header.band{background:linear-gradient(90deg,var(--band) 0%,color-mix(in srgb,var(--band) 82%,var(--band-deep)) 100%)}
.mark{background:var(--band-ink);color:var(--band)}
.brand span{color:var(--band-ink);opacity:.92}
.role{color:var(--band-ink);border-color:color-mix(in srgb,var(--band-ink) 55%,transparent)}
.hbtn{border-color:color-mix(in srgb,var(--band-ink) 60%,transparent)}
.hbtn:hover{background:color-mix(in srgb,var(--band-ink) 14%,transparent)}
nav.tabs button[aria-current="true"]{color:var(--accent)}
.kpi:first-child{border-top:4px solid var(--band)}
.hero{background:linear-gradient(145deg,var(--band) 0%,var(--band-deep) 100%)}
.hero .lbl,.hero .muted{color:var(--band-mute)}
.hero .btn.primary{background:var(--band-ink);border-color:var(--band-ink);color:var(--band-deep)}
.hero .stepper span{background:color-mix(in srgb,var(--band-ink) 18%,transparent);color:var(--band-ink)}
.hero .stepper span.on{background:var(--ok);color:#fff}
.hero .stepper span.now{background:var(--band-ink);color:var(--band-deep)}
.hero .field input{background:color-mix(in srgb,var(--band-ink) 16%,transparent);border-color:color-mix(in srgb,var(--band-ink) 45%,transparent);color:var(--band-ink)}
.hero .field input::placeholder{color:var(--band-mute)}
.hero .btn.danger{color:var(--band-ink);border-color:color-mix(in srgb,var(--band-ink) 55%,transparent);background:transparent}
.hero .banner{background:color-mix(in srgb,#000 22%,transparent);color:var(--band-ink)}
.login .brandrow{background:linear-gradient(135deg,var(--band),var(--band-deep))}
.pin.depot{background:#2B1D14}.pin.plan{color:#2B1D14;border-color:#2B1D14}
.pin.accent{background:#E41D25}.pin.drv{background:#E41D25}
.btn.primary:hover{filter:brightness(1.05)}

/* v1.5 nút chụp ảnh */
.vh{position:absolute!important;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;left:-9999px}
label.btn{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.shotprev{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.shotprev img{width:150px;height:150px;object-fit:cover;border-radius:10px;border:3px solid var(--band-ink);box-shadow:0 4px 14px rgba(0,0,0,.25)}

.hero .btn.ok{box-shadow:0 0 0 3px color-mix(in srgb,#fff 70%,transparent)}

/* v1.6 chân trang bản quyền */
.sitefoot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding:18px 16px max(18px,env(safe-area-inset-bottom,0px));margin-top:28px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.02em;text-align:center}
.sitefoot .sf-c{font-weight:400;letter-spacing:.06em;color:var(--muted)}
.sitefoot .sf-c b{font-weight:800;color:var(--ink)}
.sitefoot a{color:inherit;text-decoration:none;font-weight:400}
.sitefoot a:hover{color:var(--accent)}
.sitefoot .sf-v{background:var(--accent-soft);color:var(--accent);font-weight:600;padding:1px 9px;border-radius:99px}
.login{display:flex;flex-direction:column;align-items:center;justify-content:center}
.loginbox{width:min(420px,100%);display:flex;flex-direction:column;gap:6px}
.loginbox .card{width:100%}
.loginbox .sitefoot{flex-direction:column;gap:3px;border-top:0;margin-top:14px;padding:6px 0 0}
body{min-height:100vh}

/* v1.6 logo HVS + nhận diện đỏ/vàng lúa */
.mark.logo{display:flex;align-items:center;justify-content:center;width:auto;height:48px;padding:0;background:transparent;border-radius:0}
.mark.logo img{height:46px;width:auto;max-width:none;display:block}
.login .mark.logo{height:76px}
.login .mark.logo img{height:72px}
header.band{border-bottom:3px solid var(--gold)}
.login .brandrow{border-bottom:4px solid var(--gold)}
.sitefoot .sf-v{background:var(--gold-soft);color:var(--gold-ink)}
@media (max-width:420px){.login .mark.logo{height:60px}.login .mark.logo img{height:56px}.login .brand b{font-size:20px;white-space:nowrap}.login .brand span{font-size:10px}}