/* DooVina · Concept C · CSS riêng V4 (nạp sau c.css): Sản phẩm, R&D, Nhật ký, Cài đặt, Tìm kiếm, Quy trình, Handbook, Cấu hình vận hành.
   Tiền tố ad-, mọi màn bọc trong .ad. Chỉ dùng token của c.css nên tự đổi theo Tối/Sáng (riêng ô xem trước giao diện dùng màu cố định).
   Cỡ chữ: 11 (nhãn, mono phụ) · 13 (thân) · 16 (nhấn) · 24 (tiêu đề, số lớn). Lưới 8 px, bo 10–12 px. */

.ad{gap:16px}
.ad .k-ok{--kc:var(--ok)} .ad .k-need{--kc:var(--need)} .ad .k-bad{--kc:var(--bad)} .ad .k-info{--kc:var(--info)}
.ad .k-acc{--kc:var(--acc2)} .ad .k-off, .ad .k-todo, .ad .k-unk{--kc:var(--tx3)} .ad .k-lost{--kc:var(--bad)}
.ad small{font-size:11px}
.ad .pn-b{padding:16px}
.ad .pn-h{gap:8px}
.ad .pn-h h3{flex:none}
.ad .pn-h .meta{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.ad .pn-h > :last-child{flex:none}
.ad .pn.ad-bad{border-color:color-mix(in srgb, var(--bad) 55%, var(--line))}
.ad .pn.ad-need{border-color:color-mix(in srgb, var(--need) 55%, var(--line))}
.ad .pn.ad-info{border-color:color-mix(in srgb, var(--info) 50%, var(--line))}
.ad .pn.ad-ok{border-color:color-mix(in srgb, var(--ok) 45%, var(--line))}
.ad .c-head .ad-st{flex:none}
.ad .c-head{row-gap:8px}

/* ---------- nhãn trạng thái, chip lọc, nút phân đoạn, công tắc ---------- */
.ad-st{--kc:var(--tx3); display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:11px; border:1px solid color-mix(in srgb, var(--kc) 45%, transparent); background:color-mix(in srgb, var(--kc) 9%, transparent); color:var(--kc); font:600 11px/1 var(--font-mono); white-space:nowrap; vertical-align:middle}
.ad-st b{font-weight:700}
.ad .k-off.ad-st, .ad .k-todo.ad-st{color:var(--tx2)}
.ad-chips{display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px}
.ad-fc{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--line2); background:var(--panel); color:var(--tx2); font:500 13px var(--sans); white-space:nowrap; cursor:pointer}
.ad-fc b{font-size:11px; font-weight:700; color:var(--tx)}
.ad-fc:hover{border-color:var(--tx3)}
.ad-fc[aria-pressed="true"]{border-color:var(--acc); background:var(--accbg); color:var(--tx)}
.ad-seg{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden; flex:none; vertical-align:middle}
.ad-seg button{border:0; background:none; color:var(--tx3); font:600 11px var(--font-mono); min-height:32px; min-width:44px; padding:0 10px; cursor:pointer}
.ad-seg button + button{border-left:1px solid var(--line)}
.ad-seg button[aria-pressed="true"]{background:var(--accbg); color:var(--acc2)}
.ad-swi{appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:9px; background:var(--line2); position:relative; flex:none; margin:0; cursor:pointer; transition:background .2s; border:0}
.ad-swi::after{content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--tx2); transition:transform .2s}
.ad-swi:checked{background:var(--acc)}
.ad-swi:checked::after{transform:translateX(14px); background:var(--bg)}
.ad-chk{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); min-height:32px; cursor:pointer}
.ad-swrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.ad-swrow small{color:var(--tx3)}
.ad-file{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.ad label.c-btn{position:relative}

/* ---------- bố cục ---------- */
.ad-2{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start}
.ad-2e{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 24px; align-items:start}
.ad-cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start}
.ad-col{display:grid; gap:16px; min-width:0; align-content:start}
.ad-sect{display:grid; gap:8px; margin-top:16px; min-width:0; align-content:start}
.ad-sect:first-child, .ad-2e > .ad-sect{margin-top:0}
.ad-2e + *, * + .ad-2e{margin-top:16px}
.ad-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px}
.ad-acts .sp{flex:1}
.ad-note{font:400 11px/1.5 var(--sans); color:var(--tx3)}
p.ad-note{margin:8px 0 0}
.ad-empty{color:var(--tx3); font-size:13px; padding:16px; margin:0}
.pn-b .ad-empty{padding:8px 0}
.ad-fc.z{opacity:.55}
.ad-big{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.ad-big small{color:var(--tx3)}
.ad-num{font:700 24px/28px var(--font-mono); letter-spacing:-.01em}
.ad-warn{padding:8px 12px; border-radius:10px; border:1px solid color-mix(in srgb, var(--need) 45%, transparent); background:color-mix(in srgb, var(--need) 8%, transparent); color:var(--need); font-size:13px; margin-bottom:12px}
.ad-sum{border-top:1px dashed var(--line2); margin-top:8px; padding-top:4px}
.ad .c1-banner{margin-bottom:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid; font-size:13px}

/* ---------- hàng thước, lưới cặp số ---------- */
.ad-mr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center; padding:6px 0}
.ad-mr .l{display:flex; align-items:center; gap:6px; font-size:13px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-mr .l small{color:var(--tx3)}
.ad-mr .l a{text-decoration:none}
.ad-mr > b{font:600 13px var(--font-mono); white-space:nowrap}
.ad-mr > b small{color:var(--tx3); font-weight:500}
.ad-mr .c-bar{grid-column:1 / -1}
.ad-facts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:12px 0 0}
.ad-facts.c3{grid-template-columns:repeat(3, minmax(0,1fr))}
.ad-facts > div{background:var(--panel); padding:8px 12px; min-width:0}
.ad-facts > div:last-child:nth-child(odd){grid-column:1 / -1}
.ad-facts.c3 > div:last-child:nth-child(odd){grid-column:auto}
.ad-facts dt{font:500 11px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-facts dd{margin:2px 0 0; font-size:13px; font-weight:600; overflow-wrap:anywhere}
.ad-facts dd small{color:var(--tx3); font-weight:400}
.ad-facts dd a{text-decoration:none}

/* ---------- đường nét mảnh ---------- */
.ad-lc{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ya pl" ". xa"; column-gap:8px}
.ad-lc.bare{display:block}
.ad-lc .pl{grid-area:pl; position:relative; display:block}
.ad-lc svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block}
.ad-lc .ln{fill:none; stroke:var(--acc2); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.ad-lc .ar{opacity:1}
.ad-lc .g{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke}
.ad-lc .g.b{stroke:var(--line2); stroke-dasharray:none}
.ad-lc .dot{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--acc2); box-shadow:0 0 0 3px var(--accbg)}
.ad-lc .ya{grid-area:ya; display:flex; flex-direction:column; justify-content:space-between; font-size:11px; color:var(--tx3); text-align:right; padding:0}
.ad-lc .xa{grid-area:xa; display:flex; justify-content:space-between; font-size:11px; color:var(--tx3); margin-top:4px}
.ad-lc0{display:flex; align-items:center; justify-content:center; border:1px dashed var(--line2); border-radius:8px; color:var(--tx3); font-size:11px}

/* ---------- cột kim ---------- */
.ad-ll .plot{position:relative; padding-top:20px}
.ad-ll .cols{position:relative; display:grid; height:100%; align-items:end; border-bottom:1px solid var(--line2)}
:where(.ad-ll .c){--kc:var(--acc2)}
.ad-ll .c{display:flex; justify-content:center; align-items:flex-end; height:100%}
.ad-ll .c i{position:relative; display:block; width:2px; background:var(--kc); border-radius:1px}
.ad-ll .c i::before{content:""; position:absolute; top:-4px; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--kc)}
.ad-ll .c i b{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px; font:600 11px var(--font-mono); color:var(--tx); white-space:nowrap}
.ad-ll .c.k-bad i b{color:var(--bad)}
.ad-ll .cap{position:absolute; left:0; right:0; height:0; border-top:1px dashed color-mix(in srgb, var(--bad) 70%, transparent); pointer-events:none}
.ad-ll .cap span{position:absolute; right:0; bottom:2px; font-size:11px; color:var(--bad); background:var(--panel); padding-left:4px}
.ad-ll .labs{display:grid; margin-top:6px; font-size:11px; color:var(--tx3); text-align:center}

/* ---------- trục mốc ---------- */
.ad-trk{position:relative; height:56px; margin:28px 12px 8px}
.ad-trk .ln{position:absolute; left:0; right:0; top:8px; height:2px; background:var(--line2); border-radius:1px}
:where(.ad-trk .fl){--kc:var(--acc)}
.ad-trk .fl{position:absolute; left:0; top:8px; height:2px; background:var(--kc); border-radius:1px}
:where(.ad-trk .nd){--kc:var(--tx3)}
.ad-trk .nd{position:absolute; top:0; width:0}
.ad-trk .nd > i{position:absolute; left:-9px; top:0; width:18px; height:18px; border-radius:50%; background:var(--panel); border:2px solid var(--kc); display:grid; place-items:center; font:700 11px/1 var(--font-mono); color:var(--kc); font-style:normal; box-sizing:border-box}
.ad-trk .nd.k-ok > i{background:var(--ok); color:var(--bg)}
.ad-trk .nd.k-bad > i{background:color-mix(in srgb, var(--bad) 18%, var(--panel))}
.ad-trk .nd.k-todo > i{border-style:dashed}
.ad-trk .nd.k-info > i{background:color-mix(in srgb, var(--info) 16%, var(--panel))}
.ad-trk .tx{position:absolute; top:24px; left:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; white-space:nowrap; line-height:1.35}
.ad-trk .nd.l .tx{left:-9px; transform:none; align-items:flex-start}
.ad-trk .nd.r .tx{left:auto; right:-9px; transform:none; align-items:flex-end}
.ad-trk .tx b{font-size:11px; font-weight:700; color:var(--tx)}
.ad-trk .tx small{font-size:11px; color:var(--kc)}
.ad-trk .nd.k-todo .tx small{color:var(--tx3)}
.ad-trk .nw{position:absolute; top:-6px; width:0; height:30px; border-left:1px solid var(--acc2)}
.ad-trk .nw b{position:absolute; top:-16px; left:0; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--acc2); white-space:nowrap}
.ad-trk .nw.l b{transform:none; left:-2px}
.ad-trk .nw.r b{transform:translateX(-100%)}

/* ---------- danh sách gọn ---------- */
.ad-list{list-style:none; margin:0; padding:0}
.ad-list li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13px; min-height:40px}
.ad-list li:first-child{border-top:0}
.ad-list .t{min-width:0}
.ad-list .t small{display:block; color:var(--tx3); font-size:11px; margin-top:2px}
.ad-list.two li{grid-template-columns:minmax(0,1fr) auto}
.ad-list .w{display:flex; flex-direction:column; min-width:0}
.ad-list .w .t{font-weight:600}
.ad-list .w .m{font-size:11px; color:var(--tx3)}
.ad-list .v{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px}
.ad-list .v b{font-size:13px; font-weight:600}
.ad-list .v small{color:var(--tx3)}
.ad-more{margin-top:8px}
.ad-more summary{cursor:pointer; font:500 11px var(--font-mono); color:var(--acc2); letter-spacing:.06em; text-transform:uppercase; list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:32px}
.ad-more summary::-webkit-details-marker{display:none}
.ad-more summary::before{content:"›"; font-size:13px; transition:transform .15s}
.ad-more[open] summary::before{transform:rotate(90deg)}
.ad-more .ad-list{margin-top:4px}

/* ---------- R&D · radar ---------- */
.ad-rl{list-style:none; margin:0; padding:0 0 8px}
.ad-rl > li{border-top:1px solid var(--line)}
.ad-rr{display:grid; grid-template-columns:32px 72px minmax(0,1fr) 136px 120px 16px; grid-template-areas:"sc sb w s d cv"; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 16px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.ad-rr:hover{background:var(--panel2)}
.ad-rl > li.on > .ad-rr{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
.ad-rr .sc{grid-area:sc; font-size:16px; font-weight:700; text-align:right}
.ad-rr .sb{grid-area:sb}
.ad-rr .w{grid-area:w; display:flex; flex-direction:column; min-width:0; gap:2px}
.ad-rr .t{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-rr .m{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-rr .sd{display:contents}
.ad-rr .s{grid-area:s; min-width:0}
.ad-rr .d{grid-area:d; font-size:11px; color:var(--tx2); white-space:nowrap}
.ad-rr .d.k-need{color:var(--need)} .ad-rr .d.k-bad{color:var(--bad)}
.ad-rr .d small{font-size:11px}
.ad-rr .cv{grid-area:cv; color:var(--tx3); display:flex; transition:transform .15s}
.ad-rl > li.on .cv{transform:rotate(90deg)}
.ad-rl li.lo .sc, .ad-rl li.lo .t{color:var(--tx2)}
.ad-rr .sb, .ad-sbar{position:relative; display:block; height:4px; border-radius:2px; background:var(--line2)}
.ad-rr .sb i, .ad-sbar i{display:block; height:100%; border-radius:2px; background:var(--acc)}
.ad-rl li.lo .sb i{background:var(--tx3)}
.ad-rr .sb::after, .ad-sbar::after{content:""; position:absolute; left:70%; top:-4px; bottom:-4px; width:1px; background:var(--tx2)}
.ad-sbar{margin:4px 0 4px}
.ad-rl > li.thr{display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px dashed var(--line2); color:var(--tx3); font-size:11px; letter-spacing:.06em}
.ad-rl > li.thr::after{content:""; flex:1; border-top:1px dashed var(--line2)}
.ad-rdd{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 24px; padding:16px 16px 16px 60px; background:color-mix(in srgb, var(--acc) 5%, var(--panel)); border-top:1px solid var(--line)}
.ad-rdd .pt{display:grid; gap:0; align-content:start}
.ad-rdd .pt .c-sub{margin-bottom:4px}
.ad-rdd .ad-facts{margin-top:0}
.ad-rdd .ad-acts{grid-column:1 / -1; margin-top:0}
.ad-t3{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px}
.ad-t3 .c-tile{padding:12px}
.ad-axis{position:relative; height:44px; margin:4px 8px 8px}
.ad-axis::before{content:""; position:absolute; left:0; right:0; top:10px; height:2px; background:var(--line2)}
.ad-axis .z{position:absolute; left:0; width:33.3%; top:10px; height:2px; background:color-mix(in srgb, var(--need) 70%, transparent)}
:where(.ad-axis .pt){--kc:var(--info)}
.ad-axis .pt{position:absolute; top:5px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--panel); border:2px solid var(--kc); box-sizing:border-box}
.ad-axis .tk{position:absolute; top:24px; transform:translateX(-50%); font-size:11px; color:var(--tx3); white-space:nowrap}
.ad-axis .tk.l{transform:none} .ad-axis .tk.r{transform:translateX(-100%)}

/* ---------- Sản phẩm ---------- */
.ad-pcs{display:grid; grid-template-columns:repeat(auto-fit, minmax(288px, 1fr)); gap:16px}
.ad-pc{display:flex; flex-direction:column; gap:12px; text-align:left; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:inherit; font:inherit; cursor:pointer; min-width:0}
.ad-pc:hover{border-color:var(--line2)}
.ad-pc.on{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.ad-pc > span{display:flex; min-width:0}
.ad-pc .h{align-items:center; gap:8px}
.ad-pc .h b{font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-pc .h .sp{flex:1}
.ad-pc .h .mono{font-size:11px}
.ad-pc .n{align-items:flex-end; gap:16px}
.ad-pc .n > span{display:flex; flex-direction:column}
.ad-pc .v{font-size:24px; font-weight:700; line-height:28px}
.ad-pc .v2{font-size:16px; font-weight:600; line-height:28px}
.ad-pc .n small{font-size:11px; color:var(--tx3); font-family:var(--sans)}
.ad-pc .dl{margin-left:auto; font-size:11px; font-weight:600; align-items:flex-end}
.ad-pc .ad-lc, .ad-pc .ad-lc0{display:block; width:100%}
.ad-pc .ad-lc0{display:flex}
.ad-ms{display:flex; flex-wrap:wrap; gap:6px}
.ad-ms > span{--kc:var(--tx3); display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:6px; border:1px solid color-mix(in srgb, var(--kc) 40%, var(--line2)); font:600 11px var(--font-mono); color:var(--kc)}
.ad-ms > span.k-todo, .ad-ms > span.k-off{color:var(--tx2)}
.ad-ms small{font-weight:400; color:var(--tx3); margin-left:2px}
.ad-stk{display:flex; gap:2px; height:8px; border-radius:4px; overflow:hidden}
.ad-stk i{display:block; background:var(--kc); min-width:2px}
.ad-stk i.k-off{background:var(--tx3)}
.ad-leg{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--tx2)}
.ad-leg span{display:inline-flex; align-items:center; gap:6px}
.ad-leg i{width:8px; height:8px; border-radius:2px; background:var(--kc)}
.ad-leg b{color:var(--tx); font-weight:600}
.ad-san-pham .c-tiles{margin-bottom:16px}
.ad-dock{display:none}

/* ---------- Cài đặt ---------- */
.ad-thms{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.ad-thm{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pv pv" "tx rd"; gap:10px; align-items:center; padding:10px; border:1px solid var(--line2); border-radius:12px; background:var(--bg); color:inherit; text-align:left; cursor:pointer; font:inherit}
.ad-thm:hover{border-color:var(--tx3)}
.ad-thm[aria-checked="true"]{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); background:var(--accbg)}
.ad-thm .pv{grid-area:pv; position:relative; display:block; height:64px; border-radius:8px; overflow:hidden}
.ad-thm .pv i{position:absolute; display:block; border-radius:4px}
.ad-thm .pv i:nth-child(1){left:8px; right:8px; top:8px; height:4px; border-radius:2px}
.ad-thm .pv i:nth-child(2){left:8px; top:20px; width:46%; bottom:8px; border-radius:6px}
.ad-thm .pv i:nth-child(3){right:8px; top:20px; width:calc(54% - 24px); bottom:8px; border-radius:6px}
.ad-thm .pv i:nth-child(4){left:16px; top:29px; width:22%; height:8px; border-radius:2px}
.ad-thm .pv i:nth-child(5){left:16px; top:45px; width:30%; height:3px; border-radius:2px}
.ad-thm.dk .pv{background:#0E1116; box-shadow:inset 0 0 0 1px #262C36}
.ad-thm.dk .pv i:nth-child(1){background:linear-gradient(90deg, #5a2a2e 0 18%, transparent 18% 20.5%, #5a2a2e 20.5% 38.5%, transparent 38.5% 41%, #22384f 41% 59%, transparent 59% 61.5%, #4d3a17 61.5% 79.5%, transparent 79.5% 82%, #3DD68C 82%)}
.ad-thm.dk .pv i:nth-child(2), .ad-thm.dk .pv i:nth-child(3){background:#161B22; box-shadow:inset 0 0 0 1px #262C36}
.ad-thm.dk .pv i:nth-child(4){background:#E6EAF0}
.ad-thm.dk .pv i:nth-child(5){background:#8B7CFF}
.ad-thm.lt .pv{background:#F3F5F8; box-shadow:inset 0 0 0 1px #D5DBE3}
.ad-thm.lt .pv i:nth-child(1){background:linear-gradient(90deg, #efc4c2 0 18%, transparent 18% 20.5%, #efc4c2 20.5% 38.5%, transparent 38.5% 41%, #c3d6ee 41% 59%, transparent 59% 61.5%, #ead6b0 61.5% 79.5%, transparent 79.5% 82%, #14834D 82%)}
.ad-thm.lt .pv i:nth-child(2), .ad-thm.lt .pv i:nth-child(3){background:#FFFFFF; box-shadow:inset 0 0 0 1px #D5DBE3}
.ad-thm.lt .pv i:nth-child(4){background:#10141A}
.ad-thm.lt .pv i:nth-child(5){background:#5B4BE0}
.ad-thm .tx{grid-area:tx; display:flex; flex-direction:column; min-width:0}
.ad-thm .tx b{font-size:13px; font-weight:600}
.ad-thm .tx small{color:var(--tx3)}
.ad-thm .rd{grid-area:rd; width:18px; height:18px; border-radius:50%; border:2px solid var(--tx3); display:grid; place-items:center; box-sizing:border-box}
.ad-thm[aria-checked="true"] .rd{border-color:var(--acc)}
.ad-thm[aria-checked="true"] .rd::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--acc)}
.ad-kf{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px}
.ad-kf > div{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.ad-kf p{margin:4px 0 0; font-size:11px; color:var(--tx2); line-height:1.5}
.ad-ct{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ad-ct li{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ad-ct .lp-in{flex:1 1 160px; width:auto; min-height:36px; font-size:13px}
.ad-form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.ad-form .lp-lbl{font:500 11px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; display:grid; gap:4px}
.ad-form .lp-in{min-height:36px; width:auto; font:400 13px var(--sans); color:var(--tx)}
.ad-form .lp-in.mono{font-family:var(--font-mono)}
.ad-form input[type="number"]{width:120px}
.ad-form .ad-grow{flex:1 1 240px}
.ad-form .ad-grow .lp-in{width:100%}
.ad-form .ad-seg button{min-height:36px}
.ad-ses{list-style:none; margin:0; padding:0}
.ad-ses li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13px}
.ad-ses li:first-child{border-top:0}
.ad-ses .w{display:flex; flex-direction:column; min-width:0}
.ad-ses .w b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-ses .w small{color:var(--tx3)}
.ad-ses li > .mono{font-size:11px}
.ad-lanes{list-style:none; margin:0; padding:0}
.ad-lanes li + li{border-top:1px solid var(--line)}
.ad-lanes label{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 0; cursor:pointer}
.ad-lanes .w{flex:1; display:flex; flex-direction:column; min-width:0}
.ad-lanes .w b{font-size:13px; font-weight:600}
.ad-lanes .w small{font-size:11px; color:var(--tx3)}
.ad-lanes .w small.c-need{color:var(--need)}
.ad-sim{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 24px}
.ad-sim > div{display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0}
.ad-sim .ad-acts{margin-top:0}
.ad-sim small{color:var(--tx3)}
.ad-clock{font-size:24px; line-height:28px; font-weight:700}
.ad-cfg{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px}
.ad-cfg details{border-top:1px solid var(--line); min-width:0}
.ad-cfg summary{display:flex; align-items:baseline; gap:8px; min-height:40px; padding:10px 0; cursor:pointer; list-style:none}
.ad-cfg summary::-webkit-details-marker{display:none}
.ad-cfg summary::before{content:"›"; color:var(--tx3); display:inline-block; width:8px; transition:transform .15s}
.ad-cfg details[open] summary::before{transform:rotate(90deg)}
.ad-cfg summary b{font-size:13px}
.ad-cfg summary small{color:var(--tx3)}
.ad-cfg pre{margin-bottom:12px}

/* ---------- Nhật ký ---------- */
.ad-vf{--kc:var(--tx3); display:flex; align-items:center; gap:16px; padding:0 0 16px}
.ad-vf .lamp{width:16px; height:16px; border-radius:50%; background:var(--kc); flex:none; margin:0 4px; box-shadow:0 0 0 4px color-mix(in srgb, var(--kc) 22%, transparent), 0 0 18px var(--kc)}
.ad-vf.k-unk .lamp{background:transparent; border:2px dashed var(--tx3); box-shadow:none}
.anim .ad-vf.k-bad .lamp{animation:cBlink 1.6s ease-in-out infinite}
.ad-vf .w{flex:1; display:flex; flex-direction:column; min-width:0; gap:2px}
.ad-vf .w b{font-size:16px; font-weight:600; color:var(--kc)}
.ad-vf.k-unk .w b{color:var(--tx)}
.ad-vf .w small{font-size:11px; color:var(--tx3)}
.ad-chain{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--tx3)}
.ad-chain .lk{flex:1; display:flex; align-items:center; gap:2px; min-width:0; height:16px}
.ad-chain .lk i{--kc:var(--ok); flex:1; height:10px; border-radius:2px; background:color-mix(in srgb, var(--kc) 75%, transparent); min-width:1px}
.ad-chain .lk i.k-unk{background:var(--line2)}
.ad-chain .lk i.k-lost{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 55%, transparent) 0 2px, transparent 2px 4px)}
.ad-chain .lk i.k-bad{background:var(--bad); height:16px; box-shadow:0 0 8px var(--bad)}
.ad-dev{opacity:.85}
.ad-tw{border-top:1px solid var(--line)}
.ad-lt{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px}
.ad-lt 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}
.ad-lt td{height:40px; padding:0 12px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-lt td.mono{font-size:13px}
.ad-lt .q-lp{width:44px; padding:0 0 0 16px; text-align:center}
.ad-lt .q-seq{width:64px; color:var(--tx3)}
.ad-lt .q-at{width:116px; color:var(--tx2)}
.ad-lt .q-who{width:128px}
.ad-lt .q-act{width:26%}
.ad-lt .q-ch{width:72px; color:var(--tx3); font-size:11px}
.ad-lt .q-h{width:96px; color:var(--tx3); font-size:11px}
.ad-lt td.q-ch, .ad-lt td.q-h{font-size:11px}
.ad-lt tr.click{cursor:pointer}
.ad-lt tr.click:hover td{background:var(--panel2)}
.ad-lt tr.sel td{background:var(--accbg)}
.ad-lt tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.ad-lt .q-lp i{font-style:normal; color:var(--kc); font-size:13px}
.ad-lt tr.lp-lost td{color:var(--tx3)}
.ad-lt tr.lp-bad td{background:color-mix(in srgb, var(--bad) 9%, transparent)}
.ad-lt tr.lp-bad .q-act{color:var(--bad)}
.ad-lt .q-who .kd{color:var(--tx3); margin-left:6px; font-size:11px}
.ad-lt tr:last-child td{border-bottom:0}
.ad-xr td{height:auto; padding:0; white-space:normal; overflow:visible}
.ad-xd{padding:16px 16px 16px 60px; background:color-mix(in srgb, var(--acc) 5%, var(--panel)); display:grid; gap:12px}
.ad-xd .ad-facts{margin-top:0}
.ad-xd .ad-acts{margin-top:0}
.ad-xd .hh{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:baseline}
.ad-xd .hh code{font-size:11px; overflow-wrap:anywhere; color:var(--tx2); background:none; border:0; padding:0}
.ad-lp{--kc:var(--tx3); color:var(--kc); font:600 11px var(--font-mono)}
.ad-more-b{display:flex; justify-content:center; padding:12px 16px; border-top:1px solid var(--line)}
.ad-nhat-ky .ad-form{padding:0 16px 16px}

/* ---------- máy tính hẹp ---------- */
@media (max-width:1279px){
  .ad-2{grid-template-columns:minmax(0,1fr) 360px}
  .ad-rr{grid-template-columns:32px 56px minmax(0,1fr) 128px 104px 16px}
  .ad-sim{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:1099px){
  .ad-2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- điện thoại: một cột, chạm ≥ 44 px, không cuộn ngang ---------- */
@media (max-width:899px){
  .ad .c-btn, .ad .c-btn.sm, .ad .c-tg, .ad-fc, .ad-seg button, .ad-form .ad-seg button{min-height:44px}
  .ad .lp-in, .ad-form .lp-in, .ad-ct .lp-in{min-height:44px; font-size:16px}
  .ad-chk{min-height:44px}
  .ad-2e, .ad-cols, .ad-cfg{grid-template-columns:minmax(0,1fr)}
  .ad .pn-b{padding:12px}
  .ad-chips{padding:12px}
  .ad-rr{grid-template-columns:36px minmax(0,1fr) 16px; grid-template-areas:"sc w cv" "sb sd sd"; gap:6px 12px; padding:10px 12px}
  .ad-rr .sc{text-align:left}
  .ad-rr .t{white-space:normal}
  .ad-rr .sd{grid-area:sd; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0}
  .ad-rr .cv{justify-self:end}
  .ad-rdd{grid-template-columns:minmax(0,1fr); padding:12px}
  .ad-facts.c3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ad-facts.c3 > div:last-child:nth-child(odd){grid-column:1 / -1}
  .ad-sim{grid-template-columns:minmax(0,1fr)}
  .ad-kf{grid-template-columns:minmax(0,1fr)}
  .ad-ses li{grid-template-columns:minmax(0,1fr) auto; row-gap:4px}
  .ad-ses li > .mono{grid-column:1 / -1}
  .ad-dock{display:flex; position:sticky; bottom:calc(var(--tabs) + 8px + env(safe-area-inset-bottom)); z-index:5; padding:8px; gap:8px; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line2); border-radius:14px}
  .ad-dock .c-btn{flex:1; min-height:52px; font-size:13px}
  .ad-vf{flex-wrap:wrap}
  .ad-vf .w{flex:1 1 200px}
  /* bảng nhật ký → thẻ dòng */
  .ad-lt thead{display:none}
  .ad-lt, .ad-lt tbody{display:block}
  .ad-lt tr.click{display:grid; grid-template-columns:20px auto minmax(0,1fr) auto; grid-template-areas:"lp seq who at" "lp act act act" "lp obj obj obj"; gap:2px 8px; align-items:baseline; padding:10px 12px; border-bottom:1px solid var(--line); min-height:44px}
  .ad-lt tr.click td{display:block; width:auto; height:auto; padding:0; border:0; background:none !important; box-shadow:none !important}
  .ad-lt .q-lp{grid-area:lp; text-align:left} .ad-lt .q-seq{grid-area:seq} .ad-lt .q-at{grid-area:at; text-align:right; font-size:11px} .ad-lt .q-who{grid-area:who}
  .ad-lt .q-act{grid-area:act} .ad-lt .q-obj{grid-area:obj; color:var(--tx2); font-size:11px}
  .ad-lt .q-ch, .ad-lt .q-h{display:none !important}
  .ad-lt tr.click.sel{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
  .ad-lt tr.click.lp-bad{background:color-mix(in srgb, var(--bad) 9%, transparent)}
  .ad-lt tr.ad-xr, .ad-lt tr.ad-xr td{display:block}
  .ad-xd{padding:12px}
  .ad-xd .hh{grid-template-columns:minmax(0,1fr)}
  .ad-nhat-ky .ad-form{padding:0 12px 12px}
  .ad-form .lp-lbl{flex:1 1 140px}
  .ad-form .lp-lbl .lp-in{width:100%}
}
@media (max-width:420px){
  .ad-t3 .c-tile{padding:12px 10px}
  .ad-t3 .c-tile .k{letter-spacing:.02em}
}

/* =====================================================================
   views-extra: Tìm · Quy trình · Handbook · Cấu hình vận hành
   ===================================================================== */
.ad kbd{display:inline-flex; align-items:center; min-height:20px; padding:0 6px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:5px; background:var(--panel2); color:var(--tx2); font:600 11px var(--font-mono)}
.ad-kbd{display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--tx3)}
.ad .c-btn kbd{margin-left:4px}
.ad-facts.c4{grid-template-columns:repeat(4, minmax(0,1fr))}
.ad-facts.c4 > div:last-child:nth-child(odd){grid-column:auto}
.ad-ri{display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.ad-cnt{font-size:11px; color:var(--tx3); align-self:center; padding-bottom:10px}

/* ---------- Tìm: bảng lệnh ---------- */
.ad-pal{overflow:hidden}
.ad-q{display:flex; align-items:center; gap:12px; min-height:64px; padding:0 20px; border-bottom:1px solid var(--line); color:var(--tx3)}
.ad-q .c-ico{width:24px; height:24px; color:var(--acc2)}
.ad-q input{flex:1; min-width:0; height:56px; border:0; outline:0; background:none; color:var(--tx); font:500 24px/1.2 var(--sans); letter-spacing:-.01em}
.ad-q input::placeholder{color:var(--tx3); font-weight:400}
.ad-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.ad-q:focus-within{box-shadow:inset 0 -2px 0 var(--acc)}
.ad-pal .ad-chips{border-bottom:1px solid var(--line)}
.ad-hint{padding:16px 20px 20px; display:grid; gap:12px}
.ad-ex{display:flex; flex-wrap:wrap; gap:8px}
.ad-hint kbd{margin:0 2px}
.ad-rg{padding:8px 0}
.ad-rg + .ad-rg{border-top:1px solid var(--line)}
.ad-rg-h{display:flex; align-items:center; gap:8px; padding:4px 20px}
.ad-rg-h b{font-size:11px; color:var(--tx3)}
.ad-hit{display:grid; grid-template-columns:96px minmax(0,1fr) 16px; gap:16px; align-items:center; min-height:52px; padding:6px 20px; color:var(--tx); text-decoration:none; border-left:3px solid transparent}
.ad-hit .id{font-size:13px; font-weight:600; color:var(--acc2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-hit .w{display:flex; flex-direction:column; min-width:0}
.ad-hit .t{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-hit .s{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-hit .go{color:var(--tx3); opacity:0}
.ad-hit.on, .ad-hit:focus-visible{background:var(--accbg); border-left-color:var(--acc)}
.ad-hit.on .go{opacity:1; color:var(--acc2)}

/* ---------- Quy trình ---------- */
.ad-wfl{list-style:none; margin:0; padding:0}
.ad-wfl > li{border-top:1px solid var(--line)}
.ad-wfl > li:first-child{border-top:0}
.ad-wfr{display:grid; grid-template-columns:48px minmax(0,1fr) minmax(120px,240px) 96px 128px 16px; align-items:center; gap:16px; width:100%; min-height:56px; padding:8px 16px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.ad-wfr:hover{background:var(--panel2)}
.ad-wfl > li.on > .ad-wfr{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
.ad-wfr .id{font-size:16px; font-weight:700; color:var(--acc2)}
.ad-wfr .w{display:flex; flex-direction:column; min-width:0}
.ad-wfr .t{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-wfr .m{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-wfr .n{font-size:11px; color:var(--tx2); white-space:nowrap}
.ad-wfr .s{display:flex; justify-content:flex-end}
.ad-wfr .cv{color:var(--tx3); display:flex; transition:transform .15s}
.ad-wfl > li.on .cv{transform:rotate(90deg)}
/* dải nút mini */
.ad-mini{position:relative; display:flex; align-items:center; justify-content:space-between; height:12px}
.ad-mini::before{content:""; position:absolute; left:4px; right:4px; top:5px; height:1px; background:var(--line2)}
.ad-mini i{position:relative; width:10px; height:10px; border-radius:50%; background:var(--panel); border:1.5px solid var(--tx3); box-sizing:border-box}
.ad-mini i.m-f{border-color:var(--need); border-radius:2px; transform:rotate(45deg) scale(.9)}
.ad-mini i.m-x{border-style:dashed}
.ad-mini i.p-done{background:var(--ok); border-color:var(--ok)}
.ad-mini i.p-now{border-color:var(--acc2); box-shadow:0 0 0 3px var(--accbg); background:var(--acc)}
/* đường ống bước */
.ad-wfd{display:grid; gap:16px; padding:16px 16px 20px 80px; background:color-mix(in srgb, var(--acc) 4%, var(--panel)); border-top:1px solid var(--line)}
.ad-wfd .ad-facts{margin:0}
.ad-wfd .ad-acts{margin-top:0}
.ad-wfd .ad-sect{margin-top:0}
.ad-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:0}
:where(.ad-flow li){--kc:var(--tx2)}
.ad-flow li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; min-width:0}
.ad-flow li + li::before{content:""; position:absolute; top:33px; left:-50%; right:50%; height:2px; margin:0 18px; background:var(--line2)}
.ad-flow li.ho::before{background:repeating-linear-gradient(90deg, var(--acc2) 0 4px, transparent 4px 7px)}
.ad-flow li.p-done + li::before, .ad-flow li.p-done::before{background:var(--ok)}
.ad-flow .tg{height:16px; font-size:11px; font-weight:700; color:var(--tx3); margin-bottom:2px}
.ad-flow .tg.lv-L1{color:var(--info)} .ad-flow .tg.lv-L2{color:var(--need)} .ad-flow .tg.lv-L3{color:var(--bad)} .ad-flow .tg.lv-G{color:var(--acc2)}
.ad-flow .nd{position:relative; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--panel); border:2px solid var(--kc); font-size:13px; font-weight:700; color:var(--tx); box-sizing:border-box}
.ad-flow li.m-f{--kc:var(--need)}
.ad-flow li.m-f .nd{border-radius:8px; transform:rotate(45deg); width:28px; height:28px; margin:2px 0}
.ad-flow li.m-f .nd{font-size:0}
.ad-flow li.m-f .nd::after{content:"F"; font:700 11px var(--font-mono); color:var(--need); transform:rotate(-45deg)}
.ad-flow li.m-x{--kc:var(--tx3)}
.ad-flow li.m-x .nd{border-style:dashed; color:var(--tx3)}
.ad-flow li.off .nd{border-style:dotted; color:var(--tx3)}
.ad-flow li.p-done{--kc:var(--ok)}
.ad-flow li.p-done .nd{background:var(--ok); color:var(--bg)}
.ad-flow li.p-now{--kc:var(--acc2)}
.ad-flow li.p-now .nd{box-shadow:0 0 0 4px var(--accbg)}
.ad-flow .tx{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:8px; min-width:0; max-width:100%}
.ad-flow .tx b{font-size:11px; font-weight:700; color:var(--tx2); white-space:nowrap}
.ad-flow li.m-f .tx b{color:var(--need)}
.ad-flow .tx b small{font-weight:400; color:var(--tx3)}
.ad-flow .nm{font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ad-flow .tx > small{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.ad-wleg{gap:12px}
.ad-wleg i{width:10px; height:10px; border-radius:50%; background:none; border:1.5px solid var(--tx2); box-sizing:border-box}
.ad-wleg i.lg-f{border-color:var(--need); border-radius:2px; transform:rotate(45deg) scale(.85)}
.ad-wleg i.lg-x{border-style:dashed; border-color:var(--tx3)}
.ad-inst li{grid-template-columns:auto minmax(0,1fr) auto}
.ad-quy-trinh .c-tiles .c-tile .s{white-space:nowrap}

/* ---------- Handbook ---------- */
.ad-tabs{display:flex; gap:24px; border-bottom:1px solid var(--line)}
.ad-tabs button{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 2px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--tx3); font:600 13px var(--sans); cursor:pointer}
.ad-tabs button b{font-size:11px; color:var(--tx3); font-weight:600}
.ad-tabs button[aria-selected="true"]{color:var(--tx); border-bottom-color:var(--acc)}
.ad-lyr{cursor:pointer}
.ad-lyr.on{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); background:var(--accbg)}
.ad-lyr .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-handbook .ad-form{padding:12px 16px}
.ad-hb{list-style:none; margin:0; padding:0}
.ad-hb li{display:grid; grid-template-columns:160px 112px minmax(0,1fr) 72px; gap:16px; align-items:center; min-height:48px; padding:8px 16px; border-top:1px solid var(--line); font-size:13px}
.ad-hb li .id{font-size:13px; font-weight:600; color:var(--acc2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-hb li .t{min-width:0}
.ad-hb li .t small{display:block; color:var(--tx3); font-size:11px; margin-top:2px}
.ad-hb li .t small.why{color:var(--tx2)}
.ad-hb li .ag{text-align:right; font-size:11px}
.ad-hb li .ag a{text-decoration:none}
.ad-hb li.sel{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
.ad-hb li > .ad-st{justify-self:start}
.ad-hb.ad-adr li{grid-template-columns:80px minmax(0,1fr) auto 48px}
.ad-hb.ad-adr li .t b{font-weight:600}
.ad-hb.ad-adr .dt{font-size:11px; text-align:right}
.ad-hb.ad-rule li{grid-template-columns:64px minmax(0,1fr) auto}
.ad-hb.ad-rule .rq{font-size:11px}

/* ---------- Cấu hình vận hành ---------- */
.ad-profs{display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); gap:16px}
.ad-prof{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0}
.ad-prof.on{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.ad-prof .h{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px}
.ad-prof .h b{font-size:16px; font-weight:600}
.ad-prof .nums{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 12px}
.ad-prof .nums span{display:flex; flex-direction:column}
.ad-prof .nums b{font-size:16px; font-weight:700; line-height:1.3}
.ad-prof .nums small{color:var(--tx3)}
.ad-prof .ad-note{margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ad-dots{display:flex; flex-wrap:wrap; gap:6px 10px}
.ad-dots .bk{display:inline-flex; align-items:center; gap:3px}
.ad-dots .bk small{font-size:11px; color:var(--tx3); margin-right:2px}
.ad-dots i{width:8px; height:8px; border-radius:2px; border:1px solid var(--line2); box-sizing:border-box}
.ad-dots i.on{background:var(--acc2); border-color:var(--acc2)}
.ad-dots i.chk{border-color:var(--info); background:color-mix(in srgb, var(--info) 30%, transparent)}
.ad-lane1{display:flex; align-items:center; gap:12px; cursor:pointer}
.ad-lane1 .w{flex:1; display:flex; flex-direction:column; min-width:0}
.ad-lane1 .w b{font-size:13px; font-weight:600}
.ad-lane1 .w small{color:var(--tx3)}
.ad-ready{margin:12px 0 4px}
.ad-roll .pc{font-size:16px; width:48px}
.ad-roll .t .c-bar{margin-top:6px}
.ad-shl li, .ad-bat li{grid-template-columns:auto minmax(0,1fr) auto}
.ad-cau-hinh-van-hanh .ad-warn{margin:0}

@media (max-width:1279px){
  .ad-wfr{grid-template-columns:40px minmax(0,1fr) minmax(100px,180px) 128px 16px}
  .ad-wfr .n{display:none}
  .ad-hb li{grid-template-columns:140px 100px minmax(0,1fr) 64px}
}
@media (max-width:899px){
  .ad-q{padding:0 12px; min-height:56px}
  .ad-q input{font-size:16px; height:52px}
  .ad-q kbd, .ad-kbd{display:none}
  .ad-hint{padding:12px}
  .ad-rg-h{padding:4px 12px}
  .ad-hit{grid-template-columns:minmax(0,1fr); gap:2px; padding:8px 12px; min-height:56px}
  .ad-hit .go{display:none}
  .ad-hit .id{font-size:11px}
  .ad-wfr{grid-template-columns:40px minmax(0,1fr) 16px; grid-template-areas:"id w cv" "id mc mc" "id s s"; gap:6px 12px; padding:10px 12px}
  .ad-wfr .id{grid-area:id; align-self:start; padding-top:2px}
  .ad-wfr .w{grid-area:w} .ad-wfr .cv{grid-area:cv} .ad-wfr .ad-mini{grid-area:mc; max-width:240px} .ad-wfr .s{grid-area:s; justify-content:flex-start} .ad-wfr .s:empty{display:none}
  .ad-wfd{padding:12px}
  .ad-facts.c4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ad-flow{grid-template-columns:minmax(0,1fr); gap:0}
  .ad-flow li{flex-direction:row; align-items:flex-start; text-align:left; gap:12px; padding:0 0 12px; min-height:52px}
  .ad-flow li + li::before{left:15px; right:auto; top:-12px; height:14px; width:2px; margin:0; background:var(--line2)}
  .ad-flow li.ho::before{background:repeating-linear-gradient(180deg, var(--acc2) 0 4px, transparent 4px 7px)}
  .ad-flow .tg{order:3; margin-left:auto; height:auto}
  .ad-flow .tx{align-items:flex-start; margin-top:4px; flex:1}
  .ad-flow .nm{-webkit-line-clamp:3}
  .ad-tabs{gap:16px}
  .ad-tabs button{min-height:44px}
  .ad-handbook .ad-form{padding:12px}
  .ad-lyr .s{display:none}
  .ad-hb li{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id st" "t t" "ag ag"; gap:4px 12px; padding:10px 12px}
  .ad-hb li .id{grid-area:id} .ad-hb li > .ad-st{grid-area:st; justify-self:end} .ad-hb li .t{grid-area:t} .ad-hb li .ag{grid-area:ag; text-align:left}
  .ad-hb.ad-adr li{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id st" "t t" "dt dt"}
  .ad-hb.ad-adr .dt{grid-area:dt; text-align:left}
  .ad-hb.ad-rule li{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id rq" "t t"}
  .ad-hb.ad-rule .id{grid-area:id} .ad-hb.ad-rule .rq{grid-area:rq} .ad-hb.ad-rule .t{grid-area:t}
  .ad-profs{grid-template-columns:minmax(0,1fr)}
  .ad-ri{justify-content:flex-start}
  .ad-shl li, .ad-bat li, .ad-roll li, .ad-inst li{grid-template-columns:auto minmax(0,1fr)}
  .ad-shl .ad-ri, .ad-bat .ad-ri, .ad-roll .ad-ri, .ad-inst > li > .ad-st{grid-column:1 / -1}
}