/* DooVina · Concept C · CSS riêng cho views-work (Duyệt SCR-02, Việc SCR-15 + chi tiết trace, Bản tin SCR-05). Nạp sau c.css.
   Tiền tố w-. Chỉ dùng token của c.css để bản Sáng tự đổi theo. Cỡ chữ mỗi màn: 11 / 13 / 16 / 24 (điện thoại 20 cho tít). */

/* ---------- dùng chung ---------- */
.w-page .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.w-page{--wpad:20px}
.w-g{width:12px; height:12px; flex:none; display:inline-block; vertical-align:-1px}
.w-g .gi{fill:var(--bg)} .w-g .gs{stroke:var(--bg)}
.w-st{display:inline-flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap}
.w-lv{display:inline-flex; align-items:center; height:18px; padding:0 5px; border-radius:5px; border:1px solid var(--line2); font:700 11px/1 var(--font-mono); color:var(--tx2); white-space:nowrap; flex:none}
.w-lv.lv-L2{color:var(--need); border-color:color-mix(in srgb, var(--need) 55%, transparent)}
.w-lv.lv-L3{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, transparent)}
.w-lv.lv-L1{color:var(--info); border-color:color-mix(in srgb, var(--info) 50%, transparent)}
.w-lv.lv-G{color:var(--acc2); border-color:color-mix(in srgb, var(--acc) 60%, transparent)}
.w-title{font:600 24px/32px var(--sans); letter-spacing:-.01em; margin:0; overflow-wrap:anywhere}
.w-none{color:var(--tx3); font-size:13px; padding:4px 0; display:flex; align-items:center; gap:8px}
.w-none.pad{padding:16px}
.w-lnk{border:0; background:none; padding:0; color:var(--acc2); font:inherit; cursor:pointer}
.w-ib{width:32px; height:32px; border-radius:8px; border:1px solid var(--line2); display:grid; place-items:center; color:var(--tx2); background:none; flex:none}
.w-ib:hover{color:var(--tx); border-color:var(--tx3)}
.w-sec{display:grid; gap:8px; min-width:0}
.w-sec h4, .w-sh{margin:0; font:600 11px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase}
.w-sh{padding:12px 16px 4px}
.w-kv{display:grid; grid-template-columns:112px minmax(0,1fr); gap:6px 12px; margin:0; font-size:13px}
.w-kv dt{color:var(--tx3); font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; padding-top:2px}
.w-kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.w-callout{display:flex; gap:8px; align-items:flex-start; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:13px; color:var(--tx2)}
.w-callout > .w-g, .w-callout > .c-ico{margin-top:3px}
.w-callout b{color:var(--tx)}
.w-callout.ok{border-color:color-mix(in srgb, var(--ok) 40%, var(--line))}
.w-callout.need{border-color:color-mix(in srgb, var(--need) 45%, var(--line)); background:color-mix(in srgb, var(--need) 6%, var(--bg))}
.w-callout.bad{border-color:color-mix(in srgb, var(--bad) 50%, var(--line)); background:color-mix(in srgb, var(--bad) 6%, var(--bg))}
.w-sel select.lp-in{min-height:32px; height:32px; padding:0 28px 0 10px; font-size:13px; width:auto; max-width:220px}
.w-chk{display:flex; align-items:center; gap:8px; font-size:13px; min-height:32px; cursor:pointer}
.w-chk input{width:16px; height:16px; accent-color:var(--acc); margin:0}
.w-file{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; border:1px solid var(--line2); font-size:11px; color:var(--tx2); background:var(--bg); margin:2px 4px 2px 0}
.c-btn.on{background:var(--accbg); border-color:var(--acc); color:var(--acc2)}
.c-btn b.mono{font-size:11px}

/* =========================================================================
   SCR-02 · Duyệt
   ========================================================================= */
.w-hk{font-size:11px; letter-spacing:.04em}
.w-dy{display:grid; grid-template-columns:minmax(320px, 400px) minmax(0, 1fr); gap:16px; align-items:start}
.w-q .pn-h .meta{font-size:11px}
.w-qb0{padding:12px 16px 4px; display:grid; gap:8px}
.w-fchips{display:flex; flex-wrap:wrap; gap:6px}
.w-fc{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:16px; border:1px solid var(--line2); background:var(--bg); color:var(--tx2); font:500 13px var(--sans); white-space:nowrap; cursor:pointer}
.w-fc b{color:var(--tx); font-size:11px}
.w-fc.on{border-color:var(--acc); background:var(--accbg); color:var(--tx)}
.w-fc.urg b{color:var(--need)}
.w-fsel{display:flex; gap:8px; flex-wrap:wrap}
.w-fsel .w-sel{flex:1; min-width:0}
.w-fsel select.lp-in{width:100%; max-width:none}
.w-qbody{padding:8px 16px 16px}
.w-ql{display:grid; gap:8px}
.w-qempty{display:flex; align-items:center; gap:8px; color:var(--tx2); font-size:13px; padding:16px 0; margin:0}
.w-qsec{margin:16px 0 8px; font:600 11px var(--font-mono); color:var(--tx3); letter-spacing:.06em}
.w-qi{position:relative; display:grid; gap:4px; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); color:inherit; font:inherit; cursor:pointer; min-width:0}
.w-qi:hover{border-color:var(--line2)}
.w-qi.urg{border-color:color-mix(in srgb, var(--need) 50%, var(--line))}
.w-qi.on{border-color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, var(--bg))}
.w-qi.on::before{content:""; position:absolute; left:-1px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--acc)}
.w-qi.gone{opacity:.72}
.w-qi .r1{display:flex; align-items:center; gap:8px; font-size:11px; min-width:0}
.w-qi .r1 b{font-size:11px; color:var(--tx)}
.w-qi .r1 .sp{flex:1}
.w-qi .lf{display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--tx2); white-space:nowrap}
.w-qi .t{font:600 13px/20px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-qi .n{font-size:11px; line-height:16px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-qb{border:1px dashed var(--line2); border-radius:12px; padding:6px; display:grid; gap:6px}
.w-qb.on{border-color:var(--acc); border-style:solid}
.w-qbh{display:flex; align-items:center; gap:8px; min-height:32px; padding:0 6px; border:0; background:none; color:var(--tx); font:500 13px var(--sans); text-align:left; cursor:pointer; border-radius:8px; min-width:0}
.w-qbh:hover{background:var(--panel2)}
.w-qbh .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.w-qbh .sp{flex:1}
.w-qbh .mono{font-size:11px; white-space:nowrap}
.w-qbn{color:var(--acc2); font-weight:700}

/* khung quyết định */
.w-d{position:sticky; top:calc(var(--top) + 16px); max-height:calc(100vh - var(--top) - 84px); display:flex; flex-direction:column; min-height:0}
.w-dnav{display:flex; align-items:center; gap:4px; min-height:44px; padding:0 8px 0 16px; border-bottom:1px solid var(--line); flex:none}
.w-nt{flex:1; font:600 13px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; order:-1}
.w-nt .mono{font-size:11px; margin-left:4px}
.w-nb{width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:none; color:var(--tx2); display:grid; place-items:center; cursor:pointer; flex:none}
.w-nb:hover:not(:disabled){border-color:var(--line2); color:var(--tx)}
.w-nb:disabled{opacity:.35; cursor:default}
.w-nb .c-ico{width:16px; height:16px}
.w-lt{display:none}
.w-keys{font-size:11px; color:var(--tx3); margin-left:8px; letter-spacing:.04em}
.w-db{flex:1; min-height:0; overflow:auto; padding:20px 24px; display:flex; flex-direction:column; gap:16px}
.w-db > *, .w-trb > *{flex:none}
.w-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.w-chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border-radius:6px; border:1px solid var(--line2); font:600 11px var(--sans); color:var(--tx2); white-space:nowrap}
.w-chip.mono{font-family:var(--font-mono)}
.w-chip.lv-L2{color:var(--need); border-color:color-mix(in srgb, var(--need) 50%, transparent)}
.w-chip.lv-L3{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 50%, transparent)}
.w-chip.lv-G{color:var(--acc2); border-color:color-mix(in srgb, var(--acc) 55%, transparent)}
.w-chip.urg{color:var(--need); border-color:color-mix(in srgb, var(--need) 50%, transparent); background:color-mix(in srgb, var(--need) 8%, transparent)}
.w-who{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--tx2); margin-top:-8px}
.w-avb{display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; color:var(--tx2); font:inherit; cursor:pointer}
.w-avb b{color:var(--tx); font-size:13px}
.w-avb:hover span{color:var(--tx)}
.w-av{width:24px; height:24px; flex:none; --c:var(--ok)}
.w-av circle{fill:var(--bg); stroke:var(--c); stroke-width:2}
.w-av text{font:700 11px var(--font-mono); fill:var(--tx); text-anchor:middle}
.w-av.s-wait{--c:var(--info)} .w-av.s-block{--c:var(--need)} .w-av.s-err{--c:var(--bad)} .w-av.s-pause{--c:var(--pause)} .w-av.s-idle{--c:var(--idle)} .w-av.s-off{--c:var(--off)}
.w-done{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid var(--line2); font-size:13px}
.w-done.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); background:color-mix(in srgb, var(--ok) 7%, transparent)}
.w-done.bad{color:var(--tx2)}
.w-done span{color:var(--tx)}
.w-dgrid{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:16px; align-items:start}
.w-dcol{display:grid; gap:16px; min-width:0}
.w-chg{border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:16px; display:grid; gap:12px}
.w-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; font-variant-numeric:tabular-nums}
.w-price s{font-size:24px; color:var(--tx3); text-decoration-thickness:2px}
.w-price .arr{font-size:16px; color:var(--tx3)}
.w-price b{font-size:24px; font-weight:700; color:var(--tx)}
.w-price small{font-size:13px; color:var(--tx3)}
.w-delta{margin-left:auto; align-self:center; height:24px; display:inline-flex; align-items:center; padding:0 8px; border-radius:12px; font:700 11px var(--font-mono); border:1px solid}
.w-delta.dn{color:var(--info); border-color:color-mix(in srgb, var(--info) 50%, transparent)}
.w-delta.up{color:var(--need); border-color:color-mix(in srgb, var(--need) 50%, transparent)}
.w-bars{display:grid; grid-template-columns:40px minmax(0,1fr) 48px; gap:6px 8px; align-items:center; font-size:11px; color:var(--tx3)}
.w-bars .bt{height:8px; border-radius:4px; background:var(--line); overflow:hidden; display:block}
.w-bars .bt i{display:block; height:100%; border-radius:4px; background:var(--tx3)}
.w-bars .bt i.a{background:var(--acc)}
.w-bars .v{text-align:right; color:var(--tx2)}
.w-rest{margin:0; font-size:13px; color:var(--tx2)}
.w-diff{display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px 12px; margin:0; border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:14px 16px}
.w-diff dt{font:600 11px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase; padding-top:2px}
.w-diff dd{margin:0; font-size:13px; min-width:0; overflow-wrap:anywhere}
.w-diff dd.b{color:var(--tx3)}
.w-diff dd.a{color:var(--tx); font-weight:600}
.w-diff b.mono, .w-ev b.mono, .w-rest b.mono{font-weight:700; color:var(--tx)}
.w-ev{border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:12px 16px; display:grid; gap:8px}
.w-evh{display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--tx3); letter-spacing:.06em; font-weight:600}
.w-ev p{margin:0; font-size:13px; color:var(--tx2)}
.w-ev .w-cons{display:flex; gap:8px; align-items:flex-start; padding-top:8px; border-top:1px dashed var(--line2)}
.w-ev .w-cons .w-g{margin-top:3px}
.w-checks{list-style:none; margin:0; padding:0}
.w-checks li{display:flex; align-items:center; gap:12px; min-height:48px; border-bottom:1px solid var(--line); font-size:13px}
.w-checks li:last-child{border-bottom:0}
.w-checks li > span:first-child{display:grid; place-items:center; flex:none}
.w-checks .k{flex:1; min-width:0; color:var(--tx2)}
.w-checks .k b{color:var(--tx)}
.w-checks li > b{font-size:13px; white-space:nowrap}
.w-checks li > b small{font-size:11px; color:var(--tx3); font-weight:500}
.w-mbar{display:inline-block; width:56px; vertical-align:middle; margin-left:6px}
.w-ttl{display:grid; grid-template-columns:40px minmax(48px, 1fr) auto; gap:8px; align-items:center; font-size:11px}
.w-ttl .k{color:var(--tx3); letter-spacing:.06em}
.w-ttl .bt{height:4px; border-radius:2px; background:var(--line2); overflow:hidden}
.w-ttl .bt i{display:block; height:100%; background:var(--ok); border-radius:2px}
.w-ttl.urg .bt i{background:var(--need)}
.w-ttl > span:last-child{white-space:nowrap}
.w-warn{display:flex; gap:8px; align-items:flex-start; margin:0; font-size:11px; color:var(--tx2)}
.w-desc{margin:0; font-size:11px; color:var(--tx3)}
.w-form{display:grid; gap:8px; border:1px solid var(--line2); border-radius:12px; background:var(--bg); padding:12px 16px}
.w-form.bad{border-color:color-mix(in srgb, var(--bad) 50%, var(--line2))}
.w-step{font-size:11px; color:var(--tx3); letter-spacing:.06em; font-weight:600}
.w-lbl{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font:600 13px var(--sans)}
.w-lbl .c-tx3{font-weight:400; font-size:11px}
.w-cnt{font-size:11px; color:var(--tx3); font-weight:500}
.w-form textarea.lp-in{min-height:72px; font-size:13px}
.w-form input.lp-in{font-size:13px}
.w-hint{font-size:11px; color:var(--tx3); margin:0}
.w-seg{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.w-seg legend{font:600 11px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase; padding:0; margin-right:4px; float:left; line-height:32px}
.w-seg label{position:relative; cursor:pointer}
.w-seg input{position:absolute; opacity:0; pointer-events:none}
.w-seg span{display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--line2); font-size:13px; color:var(--tx2)}
.w-seg input:checked + span{border-color:var(--acc); background:var(--accbg); color:var(--tx)}
.w-seg input:focus-visible + span{outline:2px solid var(--acc2); outline-offset:2px}
.w-err{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid color-mix(in srgb, var(--bad) 50%, transparent); background:color-mix(in srgb, var(--bad) 8%, transparent); font-size:13px}
.w-err span{flex:1}
.w-dact{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 24px; border-top:1px solid var(--line); flex:none; flex-wrap:wrap}
.w-dact .c-btn{min-height:40px; padding:0 16px}
.w-dact .w-main{min-width:132px}
.w-dact .w-out{background:transparent}
.w-ask{margin-right:auto; min-height:40px; gap:6px}
.w-zero{display:grid; justify-items:center; text-align:center; gap:12px; padding:56px 16px}
.w-zero > span .w-g{width:32px; height:32px}
.w-zero p{margin:0; font-size:13px}
/* lô */
.w-bt{grid-template-columns:repeat(3, minmax(0,1fr)) !important}
.w-bt .c-tile{background:var(--bg)}
.w-bt .c-tile.urg .v{color:var(--need)}
.w-blist{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.w-blist li + li{border-top:1px solid var(--line)}
.w-bi{display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; gap:12px; align-items:center; width:100%; min-height:44px; padding:0 14px; border:0; background:var(--bg); color:var(--tx); font:inherit; text-align:left; cursor:pointer}
.w-bi:hover{background:var(--panel2)}
.w-bi b{font-size:11px}
.w-bi .t{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-bi .mono{font-size:11px; white-space:nowrap}

/* =========================================================================
   SCR-15 · Việc
   ========================================================================= */
.w-vg{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:16px; align-items:start}
.w-vg.has-d{grid-template-columns:minmax(0, 1fr) 448px}
.w-vmain{display:grid; gap:16px; min-width:0}
.w-live{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); flex:none}
.anim .w-live{animation:cBlink 2.4s ease-in-out infinite}
.w-live.paused{background:var(--tx3); box-shadow:none; animation:none}
.w-pipeb{padding:4px 12px 0}
.w-pipeb .c-pipe{max-height:200px; margin:0 auto}
.w-pipe .pn-h .meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.w-pp{display:none}
.w-tasks .pn-h{flex-wrap:wrap; gap:8px 12px; padding-top:6px; padding-bottom:6px}
.w-tasks .pn-h .meta .c-lnk{font-size:11px}
.w-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.w-search{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border:1px solid var(--line2); border-radius:8px; background:var(--bg); color:var(--tx3)}
.w-search:focus-within{border-color:var(--acc)}
.w-search input{border:0; background:none; outline:none; color:var(--tx); font:13px var(--sans); width:180px; min-width:0}
.w-search input::placeholder{color:var(--tx3)}
.w-segm{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.w-segm button{border:0; background:none; color:var(--tx3); font:600 13px var(--sans); height:30px; padding:0 10px; cursor:pointer}
.w-segm button + button{border-left:1px solid var(--line)}
.w-segm button.on{background:var(--accbg); color:var(--acc2)}
.w-filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 40%, var(--panel))}
.w-filters .c-lnk{font-size:13px}
.w-tw{overflow-x:auto}
.w-tt{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px}
.w-tt th{font:600 11px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; text-align:left; height:32px; padding:0 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.w-tt th:nth-child(1){width:112px} .w-tt th:nth-child(3){width:84px} .w-tt th:nth-child(4){width:72px} .w-tt th:nth-child(5){width:204px} .w-tt th:nth-child(6){width:84px} .w-tt th:nth-child(7){width:64px}
.w-tt .r{text-align:right}
.w-tt td{height:48px; padding:0 12px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-tt tbody tr{cursor:pointer}
.w-tt tbody tr:hover td{background:var(--panel2)}
.w-tt tbody tr:last-child td{border-bottom:0}
.w-tt tr.sel td{background:var(--accbg)}
.w-tt tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.w-tt td.id a{color:var(--tx2); text-decoration:none; font-size:13px}
.w-tt tr:hover td.id a, .w-tt tr.sel td.id a{color:var(--tx)}
.w-tt .tt{font-weight:500}
.w-tt td.ck, .w-tt td.age, .w-tt td.usd{font-size:11px}
.w-tt td.stc{font-size:13px}
.w-tt td.stc .mono{font-size:11px}
.w-agc{display:inline-block; font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px; border:1px solid var(--line2); color:var(--tx2)}
.w-tt .w-none{justify-content:center; height:64px; cursor:default}
/* ô trống trải hết các cột: giữ display table-cell (flex làm mất colspan, chữ bị cắt) */
.w-tt td.w-none{display:table-cell; text-align:center; vertical-align:middle; white-space:normal}
.w-tt tbody tr:has(> td.w-none){cursor:default}
.w-tt tbody tr:has(> td.w-none):hover td{background:none}
.w-more{margin:8px 16px 12px}
/* kanban (chế độ phụ) */
.w-kb{display:grid; grid-template-columns:repeat(9, minmax(168px, 1fr)); gap:8px; overflow-x:auto; padding:12px}
.w-kcol{border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:6px; display:grid; gap:6px; align-content:start; min-width:0}
.w-kcol.neck{border-color:color-mix(in srgb, var(--need) 55%, var(--line))}
.w-kh{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; border:0; background:none; color:var(--tx); text-align:left; padding:4px; font:600 13px var(--sans); cursor:pointer; border-radius:6px}
.w-kh small{font-size:11px; color:var(--tx3); font-weight:500; flex-basis:100%}
.w-kh small.c-need{color:var(--need)}
.w-kcards{display:grid; gap:6px}
.w-kc{display:grid; gap:2px; width:100%; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:8px; color:var(--tx); font:inherit; cursor:pointer; min-width:0}
.w-kc:hover{border-color:var(--line2)}
.w-kc.sel{border-color:var(--acc); background:var(--accbg)}
.w-kc.old{border-color:color-mix(in srgb, var(--need) 55%, var(--line))}
.w-kc b{font-size:11px; color:var(--tx2)}
.w-kc span{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-kc small{font-size:11px; color:var(--tx3)}
/* cột phải khi chưa chọn việc */
.w-side{display:grid; gap:16px; position:sticky; top:calc(var(--top) + 16px)}
.w-necks{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.w-necks li{display:grid; gap:2px; padding:8px 10px; border:1px solid color-mix(in srgb, var(--need) 40%, var(--line)); border-radius:10px; background:color-mix(in srgb, var(--need) 5%, var(--bg))}
.w-necks a{display:flex; align-items:center; gap:8px; color:var(--tx); text-decoration:none; font-size:13px}
.w-necks a b{font-size:13px}
.w-necks a span.mono{margin-left:auto; font-size:11px}
.w-necks small{font-size:11px; color:var(--tx3)}
.w-ok{display:flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--tx2)}
.w-ft{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important}
.w-ft .c-tile{background:var(--bg); padding:10px 12px}
.w-ft .c-tile .v{font-size:16px; line-height:20px}
.w-dc{display:block; width:100%; height:auto; margin-top:12px}
.w-dc rect{fill:color-mix(in srgb, var(--ok) 55%, var(--line2))}
.w-dc rect.now{fill:var(--acc)}
.w-dc text{font:500 11px var(--font-mono); fill:var(--tx3)}

/* ---------- chi tiết việc dạng trace ---------- */
.w-tr{position:sticky; top:calc(var(--top) + 16px); max-height:calc(100vh - var(--top) - 84px); display:flex; flex-direction:column; min-height:0}
.w-trh{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 8px 0 16px; border-bottom:1px solid var(--line); flex:none}
.w-trh > span{font-size:11px; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-trh a{color:var(--tx3); text-decoration:none}
.w-trh a:hover{color:var(--tx)}
.w-trb{flex:1; min-height:0; overflow:auto; padding:16px 20px 20px; display:flex; flex-direction:column; gap:16px}
.w-trtop{display:grid; gap:8px; justify-items:start}
.w-pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:12px; font:600 11px var(--font-mono); border:1px solid color-mix(in srgb, currentColor 50%, transparent); background:color-mix(in srgb, currentColor 8%, transparent)}
.w-facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.w-facts > div{background:var(--panel); padding:8px 12px; min-width:0}
.w-facts .k{display:block; font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.06em}
.w-facts b{display:block; font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-facts .w-lnk{font:inherit; color:var(--acc2)}
.w-tabs{display:flex; gap:20px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.w-tabs button{height:36px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--tx3); font:500 13px var(--sans); padding:0; white-space:nowrap; cursor:pointer}
.w-tabs button.on{color:var(--tx); border-color:var(--acc)}
.w-tabp{display:grid; gap:16px; min-width:0}
.w-tbar{display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden}
.w-tbar i{display:block; min-width:3px}
.s-q{background:var(--line2)} .s-w{background:var(--acc)} .s-c{background:var(--info)} .s-b{background:var(--need)} .s-e{background:var(--bad)}
.s-a{background:repeating-linear-gradient(90deg, var(--need) 0 4px, color-mix(in srgb, var(--need) 25%, transparent) 4px 7px)}
.w-tleg{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--tx3)}
.w-tleg span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.w-tleg i{width:8px; height:8px; border-radius:2px; display:inline-block}
.w-tleg b{color:var(--tx); font-size:11px}
.w-trace{position:relative; --tc:40px 120px; --tl:184px}
.w-tx{display:grid; grid-template-columns:var(--tc) minmax(0,1fr); gap:12px; height:24px; align-items:center; font-size:11px; color:var(--tx3)}
.w-tx .lbl{grid-column:1}
.w-tx .ticks{grid-column:3; position:relative; height:24px}
.w-tx .ticks span{position:absolute; top:5px; transform:translateX(-50%); white-space:nowrap}
.w-tx .ticks span:first-child{transform:none}
.w-tx .ticks .end{transform:translateX(-100%)}
.w-tx .ticks .nowt{color:var(--need); font-weight:700}
.w-tgrid{position:absolute; left:var(--tl); right:0; top:24px; bottom:0; pointer-events:none}
.w-tgrid i{position:absolute; top:0; bottom:0; width:1px; background:var(--line)}
.w-tgrid i.ng{background:color-mix(in srgb, var(--need) 45%, transparent)}
.w-trace ol{list-style:none; margin:0; padding:0}
.w-trr{display:grid; grid-template-columns:var(--tc) minmax(0,1fr); gap:12px; align-items:center; min-height:44px; border-top:1px solid var(--line)}
.w-trr time{font-size:11px; color:var(--tx3)}
.w-trr.now time{color:var(--need); font-weight:700}
.w-trr .ta{min-width:0}
.w-trr .ta b{display:flex; align-items:center; gap:6px; font:600 13px/18px var(--sans); white-space:nowrap}
.w-trr .ta span{display:block; font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-trr .trk{position:relative; height:20px}
.w-trr .tb{position:absolute; top:5px; height:10px; border-radius:3px; min-width:3px}
.w-trr .tb.s-a{top:9px; height:2px; border-radius:0}
.w-trr .tp{position:absolute; top:5px; width:10px; height:10px; margin-left:-5px; transform:rotate(45deg); border-radius:2px; background:currentColor}
.w-trr .tp.s-w{color:var(--acc)} .w-trr .tp.s-c{color:var(--info)} .w-trr .tp.s-a, .w-trr .tp.s-b{color:var(--need)} .w-trr .tp.s-e{color:var(--bad)} .w-trr .tp.s-q{color:var(--tx3)}
.w-trr .tp[class*=" s-"]{background:currentColor}
.anim .w-trr .tp.now{animation:cBlink 1.6s ease-in-out infinite}
.w-evs .c-stream{padding:0; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.w-evs .c-stream li{padding:0 12px}
.w-evs .lp-empty{padding:8px 0 !important}
.w-cost{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--tx3); padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.w-cost b{color:var(--tx); font-size:13px}
.w-cost .ckr{display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-weight:600}
.w-cost .c-lnk{font-size:11px}
.w-trf{display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px; border-top:1px solid var(--line); flex:none}
.w-trf .c-btn{min-height:36px}
.w-atts{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.w-att{border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:10px 12px; display:grid; gap:8px}
.w-atth{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; font-size:11px}
.w-atth b{font-size:11px; letter-spacing:.06em}
.w-steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--tx3)}
.w-steps li{display:inline-flex; align-items:center; gap:4px}
.w-steps li.ok, .w-steps li.now{color:var(--tx2)}
.w-steps time{color:var(--tx3)}
.w-res{margin:0; font-size:13px}
.w-ck{display:flex; gap:8px; align-items:flex-start; font-size:13px; padding:8px 10px; border-radius:8px}
.w-ck > .w-g{margin-top:3px}
.w-ck.ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 7%, transparent)}
.w-ck.bad{color:var(--bad); background:color-mix(in srgb, var(--bad) 7%, transparent)}
.w-ck.wait{color:var(--info); background:color-mix(in srgb, var(--info) 7%, transparent)}
.w-ck span{color:var(--tx)}
.w-ck .mono{font-size:11px; color:var(--tx2)}
.w-fn{display:flex; gap:8px; align-items:flex-start; margin:0; font-size:13px; color:var(--tx2)}
.w-obs{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.w-obs li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 10px; padding:10px 12px; background:var(--bg)}
.w-obs li > .w-lv{grid-row:1}
.w-obs li > .c-btn, .w-obs li > .w-st{grid-column:3; grid-row:1 / span 2}
.w-obs li + li{border-top:1px solid var(--line)}
.w-obm{min-width:0; display:grid}
.w-obm b{font-size:13px; font-weight:600}
.w-obm .mono, .w-obs2 .mono{font-size:11px}
.w-obs2{grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11px}
.w-rel{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.w-rel li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg)}
.w-rel .k{font-size:11px; color:var(--tx3); letter-spacing:.06em}
.w-rel .t{flex:1; min-width:120px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-rel a.mono{font-size:13px}
.w-note{margin:0; font-size:13px; color:var(--tx2)}
.w-budget{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px}
.w-budget b{font-size:13px}
.w-budget .c-tx3{font-size:11px}

/* =========================================================================
   SCR-05 · Bản tin 7:00
   ========================================================================= */
.w-days{display:flex; align-items:center; gap:12px; min-width:0}
.w-dstrip{display:flex; gap:6px; overflow-x:auto; min-width:0; flex:1; padding:2px; scrollbar-width:thin}
.w-day{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:6px; align-items:center; justify-items:start; min-width:64px; height:48px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--tx); cursor:pointer; text-align:left; flex:none}
.w-day .mono{font-size:13px; font-weight:600}
.w-day small{grid-row:2; font-size:11px; color:var(--tx3)}
.w-day .w-g{grid-row:1 / span 2; grid-column:2; justify-self:end}
.w-day:hover{border-color:var(--line2)}
.w-day.on{border-color:var(--acc); background:var(--accbg)}
.w-date input.lp-in{height:40px; min-height:40px; width:auto; font-size:13px}
.w-bempty .pn-b{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.w-bempty p{display:flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--tx2)}
.w-bg{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:16px; align-items:start}
.w-bcol{display:grid; gap:16px; min-width:0}
.w-nl{list-style:none; margin:0; padding:0}
.w-nl > li + li{border-top:1px solid var(--line)}
.w-nr{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; min-height:52px; padding:8px 16px; color:var(--tx); text-decoration:none}
.w-nr:hover{background:var(--panel2)}
.w-nr .t{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-nr .r{font-size:11px; white-space:nowrap}
.w-nr .s{grid-column:2 / span 2; font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.w-nr .s .mono{color:var(--tx2)}
.w-nr.dim{opacity:.62}
.w-nr > .w-lv, .w-nr > span:first-child{align-self:center}
.w-l1{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; min-height:52px; padding:8px 16px}
.w-l1 .t{display:grid; font-size:13px; font-weight:600; min-width:0}
.w-l1 .t > span.s{font-size:11px; color:var(--tx3); font-weight:400}
.w-l1 .s .w-lnk, .w-l1 .s a{font-size:11px}
.w-nums{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important}
.w-nums .c-tile{background:var(--bg)}
.w-nums .c-tile .s{min-height:22px}
.w-nums .lp-spark{width:96px; height:22px; margin-left:auto; flex:none}
.w-nums .lp-spark .dt{stroke:var(--bg)}
.w-econ{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 12px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:11px; color:var(--tx3)}
.w-econ b{color:var(--tx); font-size:13px}
.w-econ .k{letter-spacing:.06em; text-transform:uppercase}
.w-econ .nx{grid-column:1 / -1; color:var(--tx2)}
.w-plan{margin:8px 16px 16px; padding:10px 12px; border-radius:10px; border:1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); background:var(--accbg); font-size:13px}
.w-k1 .pn-h .c-btn{min-height:28px}

/* =========================================================================
   Màn vừa (900–1279 px)
   ========================================================================= */
@media (max-width:1279px){
  .w-dgrid{grid-template-columns:minmax(0,1fr)}
  .w-vg, .w-vg.has-d{grid-template-columns:minmax(0,1fr)}
  .w-vg.has-d .w-tr{order:-1}
  .w-side{position:static; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
  .w-tr{position:static; max-height:none}
  .w-tr .w-trb{overflow:visible}
  .w-bg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px) and (min-width:900px){
  .w-dy{grid-template-columns:300px minmax(0,1fr)}
  .w-tt th:nth-child(4), .w-tt td.ck{display:none}
}

/* =========================================================================
   Điện thoại (< 900 px): một cột, không cuộn ngang, nút quyết định dính đáy
   ========================================================================= */
@media (max-width:899px){
  .w-title{font-size:20px; line-height:28px}
  .w-hk, .w-keys{display:none}
  .w-sel select.lp-in{max-width:none}
  /* Duyệt: một yêu cầu mỗi màn */
  .v-dy:not(.ql) > .c-head{display:none}
  .w-dy{grid-template-columns:minmax(0,1fr)}
  .v-dy:not(.ql) .w-q{display:none}
  .v-dy.ql .w-d{display:none}
  .w-d{position:static; max-height:none; overflow:visible; border:0; background:none; border-radius:0; margin:-12px -12px 0}
  .w-dnav{min-height:52px; padding:0 4px; gap:0; border-bottom:0}
  .w-who .w-x{display:none}
  .w-nt{order:0; text-align:center; font-size:16px}
  .w-nt .mono{font-size:13px}
  .w-nb{width:44px; height:44px; border-radius:12px}
  .w-nb .c-ico{width:20px; height:20px}
  .w-lt{display:grid}
  .w-dnav .w-lt{order:-2} .w-dnav [data-dact="prev"]{order:-1}
  .w-db{overflow:visible; padding:8px 16px calc(176px + env(safe-area-inset-bottom)); gap:16px}
  .w-dgrid{grid-template-columns:minmax(0,1fr)}
  .w-chips{gap:6px}
  .w-who{margin-top:-6px}
  .w-checks li{font-size:13px}
  .w-dact{position:fixed; left:0; right:0; bottom:calc(var(--tabs) + 1px + env(safe-area-inset-bottom)); z-index:28; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px 12px; padding:4px 16px 12px; border-top:1px solid var(--line); background:var(--bg)}
  .w-dact .c-btn{min-height:52px; border-radius:14px; font-size:16px; padding:0 12px}
  .w-dact .w-main{min-width:0}
  .w-dact .w-ask{grid-column:1 / -1; justify-content:center; min-height:44px; margin:0; font-size:13px}
  .w-dact > .c-btn:only-child{grid-column:1 / -1}
  .w-q{margin:0}
  .w-bi{grid-template-columns:40px minmax(0,1fr) auto; padding:8px 12px}
  .w-bi .mono:last-child{display:none}
  .w-bt{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important}
  .w-bt .c-tile{padding:10px}
  .w-bt .c-tile .v{font-size:16px}
  .w-fc{height:44px; padding:0 14px}
  .w-page .c-btn, .w-page .c-btn.sm{min-height:44px}
  .w-ib{width:44px; height:44px}
  .w-sel select.lp-in{height:44px; min-height:44px}
  .w-chk{min-height:44px}
  .w-tabs button{height:44px}
  .w-qbh{min-height:44px}
  .w-lnk{min-height:32px}
  .w-fsel{display:grid; grid-template-columns:1fr 1fr}
  /* Việc */
  .w-pipeb{display:none}
  .w-pp{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; padding:12px}
  .w-ppi{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-height:52px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--tx); text-decoration:none}
  .w-ppi .w-st{grid-row:1 / span 2}
  .w-ppi b{font-size:20px; line-height:24px}
  .w-ppi span:last-child{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .w-ppi.on{border-color:var(--acc); background:var(--accbg)}
  .w-pipe .pn-h .meta{display:none}
  .w-vg.has-d .w-vmain{display:none}
  .w-side{grid-template-columns:minmax(0,1fr)}
  .w-tasks .pn-h{align-items:flex-start}
  .w-tools{width:100%}
  .w-search{flex:1 1 100%; min-width:0; height:44px}
  .w-tools .c-btn, .w-tools .w-segm{flex:1 1 0}
  .w-segm button{flex:1}
  .w-tx .ticks .mid{display:none}
  .w-search input{width:100%}
  .w-tools .c-btn{min-height:40px}
  .w-segm button{height:42px}
  .w-filters{display:grid; grid-template-columns:1fr 1fr}
  .w-filters .w-sel select.lp-in{width:100%}
  .w-tw{overflow:visible}
  .w-tt, .w-tt tbody{display:block}
  .w-tt thead{display:none}
  .w-tt tr{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"id st age" "tt tt tt" "ag ag usd"; gap:2px 10px; padding:10px 16px; border-bottom:1px solid var(--line)}
  .w-tt tbody tr:last-child{border-bottom:0}
  .w-tt td{display:block; height:auto; padding:0; border:0; background:none !important; min-width:0}
  .w-tt td.w-none{display:block; grid-column:1 / -1; padding:16px 0}
  .w-tt tr:has(> td.w-none){grid-template-areas:none}
  .w-tt td.id{grid-area:id} .w-tt td.stc{grid-area:st; justify-self:start; font-size:11px} .w-tt td.age{grid-area:age}
  .w-tt td.tt{grid-area:tt; white-space:normal; font-size:13px; line-height:20px}
  .w-tt td:nth-child(3){grid-area:ag} .w-tt td.ck{display:none} .w-tt td.usd{grid-area:usd}
  .w-tt tr.sel{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
  .w-tt tr.sel td:first-child{box-shadow:none}
  .w-tt td.id a{display:inline-flex; align-items:center; min-height:24px}
  .w-kb{grid-template-columns:minmax(0,1fr); overflow:visible}
  .w-kcol .w-kcards{display:none} .w-kcol.open .w-kcards{display:grid}
  .w-kh{min-height:44px}
  /* chi tiết việc */
  .w-tr{margin:0; overflow:visible}
  .w-tr > .w-trh{border-radius:12px 12px 0 0}
  .w-trh{min-height:52px}
  .w-trb{padding:16px}
  .w-facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .w-trace{--tc:40px 104px; --tl:168px}
  .w-trf{position:sticky; bottom:calc(var(--tabs) + 1px + env(safe-area-inset-bottom)); background:var(--panel); z-index:4; border-radius:0 0 12px 12px}
  .w-trf .c-btn{min-height:44px; flex:1 1 auto}
  .w-kv{grid-template-columns:96px minmax(0,1fr)}
  /* Bản tin */
  .w-days{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
  .w-date input.lp-in{width:100%; height:44px}
  .w-day{height:52px}
  .w-nr{min-height:56px}
}
@media (max-width:899px){ .v-bt .c-head{gap:8px} }
@media (prefers-reduced-motion:reduce){ .w-live, .w-trr .tp.now{animation:none !important} }