/* cad-ve.css - «Bản vẽ CAD» (web/js/cad-ve.js): dải lệnh gọn, dòng lệnh, thanh trạng thái, lớp phủ bắt điểm / grip / khung chọn.
   Dùng token theme.css / he-thong.css (sáng / tối theo khung). «◐» trên dải lệnh: giao diện CAD tối riêng (kiểu AutoCAD) - chỉ phần CAD.
   KHÔNG đổi kiểu hiển thị lớp bản đồ. */
.cad-ribbon,.cad-bottom,.cad-menu{
  --c-bg:var(--glass,rgba(255,255,255,.96));--c-ink:var(--ink,#202124);--c-soft:var(--ink-soft,#5f6368);--c-line:var(--line,#dadce0);
  --c-hover:var(--hover,rgba(60,64,67,.08));--c-on:var(--brand,#1a73e8);--c-on-weak:var(--brand-weak,#e8f0fe);--c-field:var(--field,#fff);
  font-family:var(--font-sans);color:var(--c-ink)}
.cad-toi{--c-bg:rgba(33,40,48,.97);--c-ink:#e6e9ed;--c-soft:#a9b2bc;--c-line:#3c4652;--c-hover:rgba(255,255,255,.08);--c-on:#4ea1ff;--c-on-weak:rgba(78,161,255,.18);--c-field:#1b2128}
.cad-an{display:none!important}

/* ---- dải lệnh ---- */
.cad-ribbon{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100% - 140px);background:var(--c-bg);
  border:1px solid var(--c-line);border-radius:var(--radius,12px);box-shadow:var(--shadow-2);backdrop-filter:blur(6px)}
.cad-rb-top{display:flex;align-items:center;gap:6px;padding:4px 8px 0;min-width:0}
.cad-rb-ten{font-size:var(--fs-sm,12.5px);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-soft)}
.cad-tabs{display:flex;gap:2px;overflow-x:auto}
.cad-tabs button{border:0;background:none;color:var(--c-soft);font:inherit;font-size:var(--fs-sm,12.5px);padding:5px 10px;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap}
.cad-tabs button[aria-selected="true"]{color:var(--c-on);background:var(--c-on-weak);font-weight:var(--fw-semi,600)}
.cad-tabs button:hover{background:var(--c-hover)}
.cad-rb-sp{flex:1}
.cad-rb-x{border:0;background:none;color:var(--c-soft);font-size:16px;line-height:1;width:26px;height:26px;border-radius:6px;cursor:pointer}
.cad-rb-x:hover{background:var(--c-hover);color:var(--c-ink)}
.cad-rb-body{display:flex;flex-wrap:wrap;gap:2px;padding:4px 6px 6px;border-top:1px solid var(--c-line)}
.cad-ribbon.thu .cad-rb-body{display:none}
.cad-nut{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;padding:4px 4px 3px;border:1px solid transparent;border-radius:8px;
  background:none;color:var(--c-ink);font:inherit;font-size:11px;cursor:pointer;position:relative}
.cad-nut:hover{background:var(--c-hover);border-color:var(--c-line)}
.cad-nut.on{background:var(--c-on-weak);border-color:var(--c-on);color:var(--c-on)}
.cad-nut kbd{font-size:9px;padding:0 3px;border-width:1px;opacity:.75;background:transparent;color:inherit;border-color:var(--c-line)}

/* ---- dòng lệnh + trạng thái ---- */
.cad-bottom{position:absolute;left:8px;right:8px;bottom:26px;z-index:6;display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--radius,12px);box-shadow:var(--shadow-2);overflow:hidden;max-width:1180px;margin:0 auto}
.cad-log{max-height:46px;overflow-y:auto;padding:3px 10px;font-family:var(--font-mono);font-size:11.5px;color:var(--c-soft);border-bottom:1px solid var(--c-line);transition:max-height .15s}
.cad-log.mo{max-height:220px}
.cad-log.nhay{background:var(--warn-weak,#fef7e0)}
.cad-toi .cad-log.nhay{background:#3a3016}
.cad-l.cmd{color:var(--c-ink);font-weight:600}.cad-l.echo{color:var(--c-ink)}.cad-l.ok{color:var(--ok-ink,#137333)}.cad-l.warn{color:var(--warn-ink,#8a4b00)}.cad-l.err{color:var(--danger-ink,#b3261e)}
.cad-toi .cad-l.ok{color:#a8dab5}.cad-toi .cad-l.warn{color:#fde293}.cad-toi .cad-l.err{color:#f6aea9}
.cad-cmd{display:flex;align-items:center;gap:8px;padding:3px 10px;border-bottom:1px solid var(--c-line)}
.cad-cmd-p{font-family:var(--font-mono);font-size:12.5px;white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis;color:var(--c-ink);font-weight:600}
.cad-cmd-p[data-kw]::after{content:"  ⟨" attr(data-kw) "⟩";color:var(--c-on);font-weight:400}
.cad-cmd-in{flex:1;min-width:80px;font-family:var(--font-mono)!important;font-size:13px;border:0!important;background:transparent!important;color:var(--c-ink)!important;box-shadow:none!important;padding:3px 2px!important;outline:none}
.cad-cmd:focus-within{box-shadow:inset 0 -2px 0 var(--c-on)}
.cad-status{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:3px 8px;font-size:11.5px}
.cad-xyb{display:flex;flex-direction:column;min-width:230px;margin-right:6px;line-height:1.2}
.cad-xy{font-family:var(--font-mono);font-size:12px;color:var(--c-ink)}
.cad-ll,.cad-crs{font-family:var(--font-mono);font-size:10.5px;color:var(--c-soft)}
.cad-tg{border:1px solid var(--c-line);background:var(--c-field);color:var(--c-soft);font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:6px;cursor:pointer}
.cad-tg:hover{color:var(--c-ink)}
.cad-tg.on{background:var(--c-on-weak);border-color:var(--c-on);color:var(--c-on)}
.cad-tg-cfg{padding:3px 5px;margin-left:-3px}
.cad-pinc,.cad-sc{font-size:11px!important;padding:2px 4px!important;background:var(--c-field)!important;color:var(--c-ink)!important;border-color:var(--c-line)!important}
.cad-scale{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.cad-sbar{display:inline-flex;align-items:center;gap:4px;color:var(--c-soft)}
.cad-sbar i{display:inline-block;height:6px;border:1.5px solid var(--c-ink);border-top:0}
.cad-sel{color:var(--c-on);font-weight:600;margin-left:4px}
.cad-note{margin-left:auto;color:var(--c-soft);cursor:help;white-space:nowrap}
.cad-note:focus-visible{outline:2px solid var(--c-on)}

/* ---- lớp phủ: con trỏ, nét tạm, bắt điểm, khung chọn, grip ---- */
.cad-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.cad-xh{stroke:#202124;stroke-width:1;fill:none;paint-order:stroke;filter:drop-shadow(0 0 1px #fff)}
.cad-pv{stroke:#1a73e8;stroke-width:1.6;fill:none;stroke-dasharray:6 3}
text.cad-pv,.cad-pv-t{fill:#1a73e8;stroke:none;font-family:Arial,sans-serif}
.cad-rb{stroke:#1a73e8;stroke-width:1;stroke-dasharray:3 3;fill:none;opacity:.7}
.cad-track{stroke:#22a06b;stroke-width:1;stroke-dasharray:2 4;fill:none}
.cad-snap{fill:none;stroke-width:2.2;stroke:#f5b400}
.cad-snap.s-int{stroke:#ff2bd6}.cad-snap.s-per{stroke:#ff8a00}.cad-snap.s-nea{stroke:#00c2ff}.cad-snap.s-cen{stroke:#7a5cff}.cad-snap.s-ext{stroke:#22a06b}
.cad-g{fill:none;stroke:#f5b400;stroke-width:2;vertical-align:middle;margin:0 4px}
.cad-box.win{fill:rgba(26,115,232,.12);stroke:#1a73e8;stroke-width:1.2}
.cad-box.cross{fill:rgba(34,160,107,.12);stroke:#22a06b;stroke-width:1.2;stroke-dasharray:5 3}
.cad-grip{fill:#1a73e8;stroke:#fff;stroke-width:1}
.cad-grip.them{fill:#9ac2ff}
.cad-grip.hot{fill:#e0004d}
.cad-dyn{position:absolute;z-index:7;pointer-events:none;background:rgba(32,33,36,.92);color:#fff;font:11.5px var(--font-mono);padding:4px 7px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.cad-dyn .f{display:inline-block;min-width:44px;padding:0 4px;border:1px solid #6b7480;border-radius:3px;background:#2b3138;text-align:right}
.cad-dyn .f.go{border-color:#4ea1ff;background:#123a66}
.cad-dyn .sn{color:#f5b400;margin-right:6px}
.cad-dyn .hoi{display:block;color:#c7ccd1;font-family:var(--font-sans)}

/* ---- menu chuột phải ---- */
.cad-menu{position:fixed;z-index:10050;min-width:230px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;box-shadow:var(--shadow-3);padding:4px;display:flex;flex-direction:column}
.cad-menu button{display:flex;justify-content:space-between;gap:12px;border:0;background:none;color:var(--c-ink);font:inherit;font-size:12.5px;text-align:left;padding:6px 10px;border-radius:6px;cursor:pointer}
.cad-menu button:hover,.cad-menu button:focus-visible{background:var(--c-hover)}
.cad-menu kbd{opacity:.7}
.cad-menu-sep{height:1px;background:var(--c-line);margin:3px 4px}

/* ---- bảng (WG.panels) ---- */
.cad-pn{font-size:var(--fs-sm,12.5px)}
.cad-pn-tb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cad-tbl{width:100%;border-collapse:collapse}
.cad-tbl th,.cad-tbl td{padding:3px 5px;border-bottom:1px solid var(--line-soft,#e8eaed);text-align:left;vertical-align:middle}
.cad-tbl select{max-width:120px;font-size:11.5px}
.cad-sw{display:inline-block;width:10px;height:10px;border:1px solid var(--line);margin-right:5px;vertical-align:-1px}
.cad-kv{width:100%;border-collapse:collapse;margin-bottom:8px}.cad-kv th{text-align:left;color:var(--ink-soft);font-weight:500;padding:2px 6px 2px 0;white-space:nowrap}.cad-kv td{padding:2px 0;font-family:var(--font-mono);font-size:11.5px}
.cad-form{display:grid;gap:6px}.cad-form label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cad-osn{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin-bottom:8px}.cad-osn label{display:flex;align-items:center}
.cad-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.cad-lnk{border:0;background:none;color:var(--brand);font:inherit;cursor:pointer;padding:0;text-align:left}
.cad-lnk:hover{text-decoration:underline}
.cad-dlg{max-width:min(560px,calc(100vw - 32px))}
.cad-the{height:54px;border:2px solid var(--brand);border-radius:6px;background:var(--brand-a12);margin:6px 0}
.cad-ruler{display:inline-block;width:300px;height:10px;border:1.5px solid var(--ink);border-top:0;vertical-align:middle}
.cad-chk{display:grid;gap:4px;max-height:220px;overflow:auto;margin:6px 0}

@media (max-width:768px){
  .cad-ribbon{max-width:calc(100% - 16px);top:4px}
  .cad-nut{min-width:48px}.cad-nut kbd{display:none}
  .cad-xyb{min-width:0}.cad-note{display:none}
  .cad-bottom{left:4px;right:4px}
}

/* ---- 31/10/2026: Số hoá GIS, tuyến cong, sửa đối tượng GIS, hệ toạ độ, kho cloud ---- */
button.cad-crs{border:0;background:none;padding:0 2px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
button.cad-crs:hover{color:var(--c-on,#1a73e8)}
.cad-gisbar{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 4px 2px 10px;border-radius:999px;font-size:var(--fs-sm,12.5px);
  background:#fdecf6;color:#8e1d63;border:1px solid #f2b8da;white-space:nowrap}
.cad-gisbar .btn{padding:2px 10px;font-size:12px;min-height:0}
.cad-toi .cad-gisbar{background:rgba(233,30,99,.16);color:#f8bbd9;border-color:rgba(233,30,99,.45)}
.cad-dlg.cad-sh{max-width:min(800px,calc(100vw - 32px))}
.cad-sh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 10px}
.cad-sh-the{position:relative;display:flex;flex-direction:column;gap:3px;padding:8px 10px 10px;border:1px solid var(--line,#dadce0);border-radius:12px;cursor:pointer;
  background:var(--field,#fff);transition:border-color .12s,box-shadow .12s}
.cad-sh-the:hover{border-color:var(--brand,#1a73e8)}
.cad-sh-the input{position:absolute;opacity:0;pointer-events:none}
.cad-sh-the:has(input:checked){border-color:var(--brand,#1a73e8);box-shadow:0 0 0 2px var(--brand-weak,#e8f0fe)}
.cad-sh-the:has(input:focus-visible){outline:2px solid var(--brand,#1a73e8);outline-offset:2px}
.cad-sh-the svg{width:100%;height:58px;border-radius:8px;background:var(--surface-2,#f1f3f4);fill:none;stroke:var(--brand,#1a73e8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cad-sh-the svg circle{fill:var(--brand,#1a73e8);stroke:none}
.cad-sh-the svg .nen{stroke:var(--ink-soft,#9aa0a6);stroke-width:1.5;stroke-dasharray:3 2}
.cad-sh-the svg .ve{stroke:#e8710a;stroke-width:2.5}
.cad-sh-the svg .to{fill:rgba(26,115,232,.18)}
.cad-sh-the svg text{fill:#e8710a;stroke:none;font:bold 11px sans-serif}
.cad-sh-the b{font-size:13px}
.cad-sh-the small{font-size:11.5px;color:var(--ink-soft,#5f6368);line-height:1.35}
.cad-sh-dich{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line,#dadce0);border-radius:10px;padding:6px 10px 8px}
.cad-sh-dich label,.cad-dlg fieldset label{display:flex;align-items:center;gap:6px;flex-direction:row}
.cad-sh-dich select{max-width:100%}
.cad-dlg fieldset{border:1px solid var(--line,#dadce0);border-radius:10px;padding:6px 10px 8px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.cad-tuyen{margin-top:6px;font-size:12px}
.cad-tuyen input{width:5.5em;font-variant-numeric:tabular-nums}
.cad-rall{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0;font-size:12px}
.cad-loi{color:#b3261e;font-size:12px;margin:4px 0}
.cad-tabs2{display:flex;gap:4px;margin-bottom:6px}
.cad-tabs2 button{border:1px solid var(--line,#dadce0);background:none;border-radius:999px;padding:3px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:inherit}
.cad-tabs2 button.on{background:var(--brand-weak,#e8f0fe);border-color:var(--brand,#1a73e8);color:var(--brand,#1a73e8)}
.cad-tabs2 button:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:600px){.cad-sh-luoi{grid-template-columns:repeat(2,1fr)}.cad-gisbar{position:absolute;top:100%;left:0;margin:4px 0 0}}
.cad-dlg .wg-ph > label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0}
.cad-dlg .wg-ph > label > select{max-width:100%}