/* ========================================================================== GEOAI3D — giao diện Bảng màu xanh dương trên nền xám sáng, thẻ trắng bo góc, ribbon biểu tượng. Nền tối bật bằng thuộc tính data-theme="dark" trên . ========================================================================== */ :root{ /* nền */ --bg:#EEF2F7; --bg2:#F5F7FA; --panel:#FFFFFF; --panel2:#F8FAFC; --sunken:#FFFFFF; --vp:#E4EAF2; --vp2:#D6DFEA; --core-bg:#F1F5F9; --line:#E2E8F0; --line2:#CBD5E1; --line3:#EFF3F8; /* chữ */ --ink:#0F172A; --ink-dim:#475569; --ink-faint:#94A3B8; --on-accent:#FFFFFF; /* xanh chủ đạo */ --azurite:#2563EB; --azurite-d:#1D4ED8; --azurite-l:#EFF4FF; --azurite-m:#DBE7FE; --navy:#1E3A8A; --malachite:#059669; --limonite:#D97706; --cinnab:#DC2626; --ok:#059669; --warn:#D97706; --err:#DC2626; --ok-bg:#ECFDF5; --warn-bg:#FFFBEB; --err-bg:#FEF2F2; --sh1:0 1px 2px rgba(15,23,42,.05); --sh2:0 4px 12px rgba(15,23,42,.08); --sh3:0 20px 50px rgba(15,23,42,.20); --hl:rgba(37,99,235,.12); --mono:'Consolas','Courier New',ui-monospace,monospace; --sans:Arial,Helvetica,'Segoe UI',sans-serif; --cond:Arial,Helvetica,'Segoe UI',sans-serif; --rail-w:246px; --panel-w:372px; --r:8px; } html[data-theme="dark"]{ --bg:#0B1220; --bg2:#0F172A; --panel:#111C2E; --panel2:#152238; --sunken:#0D1626; --vp:#0C1524; --vp2:#0A1220; --core-bg:#152238; --line:#1E2B42; --line2:#2A3A55; --line3:#18243A; --ink:#E2E8F0; --ink-dim:#94A3B8; --ink-faint:#64748B; --azurite:#3B82F6; --azurite-d:#2563EB; --azurite-l:#16233A; --azurite-m:#1B2C48; --navy:#93C5FD; --ok:#10B981; --warn:#F59E0B; --err:#EF4444; --ok-bg:rgba(16,185,129,.10); --warn-bg:rgba(245,158,11,.10); --err-bg:rgba(239,68,68,.10); --sh1:0 1px 2px rgba(0,0,0,.45); --sh2:0 4px 12px rgba(0,0,0,.5); --sh3:0 20px 50px rgba(0,0,0,.65); --hl:rgba(59,130,246,.20); } *{box-sizing:border-box} html,body{height:100%;margin:0} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;overflow:hidden;-webkit-font-smoothing:antialiased} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);background-clip:padding-box} #app{display:flex;flex-direction:column;height:100%} /* ========================================================================== HEADER ========================================================================== */ header{ height:64px;flex:0 0 64px;display:flex;align-items:center;gap:16px;padding:0 18px; background:var(--panel);border-bottom:1px solid var(--line);z-index:14; } .brand{display:flex;align-items:center;gap:10px;min-width:0} .blogo{ width:44px;height:44px;border-radius:11px;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 44px; overflow:hidden;box-shadow:var(--sh1); } .blogo img{width:100%;height:100%;object-fit:contain;border-radius:11px;background:#fff} .brand .mark{font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--ink);white-space:nowrap;line-height:1.1} .brand .mark em{font-style:normal;color:var(--azurite)} .brand{align-items:center} .brand .sub{font-size:12.5px;color:var(--ink-faint);white-space:nowrap; padding-left:14px;margin-left:2px;border-left:1px solid var(--line);line-height:1.35} .toolbar{display:flex;gap:8px;margin-left:auto;align-items:center} .projsel{ display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r);padding:6px 10px;font-size:13px;cursor:pointer;white-space:nowrap; } .projsel:hover{border-color:var(--azurite)} .projsel b{font-weight:700} .projsel .lb{color:var(--ink-faint)} .projsel .cv{color:var(--ink-faint);font-size:10px} .btn{ background:var(--panel);border:1px solid var(--line2);border-radius:var(--r); padding:7px 13px;cursor:pointer;transition:background .12s,border-color .12s; white-space:nowrap;color:var(--ink);display:inline-flex;align-items:center;gap:6px; } .btn:hover{background:var(--azurite-l);border-color:var(--azurite)} .btn.primary{background:var(--azurite);border-color:var(--azurite-d);color:var(--on-accent);box-shadow:var(--sh1)} .btn.primary:hover{background:var(--azurite-d)} .btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{background:var(--azurite-l)} .btn:disabled{opacity:.42;cursor:not-allowed} .btn.sm{padding:4px 9px;font-size:12px} .btn i{font-style:normal} .iconbtn{ width:32px;height:32px;border-radius:var(--r);border:1px solid transparent;background:transparent; cursor:pointer;color:var(--ink-dim);font-size:15px;display:flex;align-items:center;justify-content:center;position:relative; } .iconbtn:hover{background:var(--azurite-l);color:var(--azurite)} .avatar{ width:32px;height:32px;border-radius:50%;background:var(--azurite);color:#fff; display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer; } #u-area{display:inline-flex;gap:8px;align-items:center} .uchip{font-size:12px;padding:5px 10px;border:1px solid var(--line2);border-radius:20px;color:var(--ink-dim); cursor:pointer;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;background:var(--panel2)} .uchip.proj{color:var(--azurite);border-color:var(--azurite-m);background:var(--azurite-l)} .uchip:hover{border-color:var(--azurite)} .usep{width:1px;height:22px;background:var(--line);display:inline-block;vertical-align:middle} #btn-noti{position:relative} .ncount{position:absolute;top:0;right:0;background:var(--err);color:#fff;font-size:9px;font-style:normal; border-radius:9px;padding:0 4px;line-height:14px;min-width:14px;text-align:center} /* ========================================================================== MENUBAR + RIBBON ========================================================================== */ #menubar{ flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line); display:flex;gap:2px;padding:0 16px;z-index:13; } .mb-tab{ border:0;background:none;padding:11px 17px 9px;cursor:pointer;font-size:15px; color:var(--ink-dim);border-bottom:2px solid transparent; } .mb-tab:hover{color:var(--ink)} .mb-tab.on{color:var(--azurite);border-bottom-color:var(--azurite);font-weight:700} #ribbon{ flex:0 0 auto;background:var(--panel2);border-bottom:1px solid var(--line);z-index:12; max-height:0;overflow:hidden;transition:max-height .16s ease;border-bottom-width:0; } body.rb-open #ribbon{max-height:120px;border-bottom-width:1px} #menubar{position:relative} .mb-right{margin-left:auto;display:flex;align-items:center;gap:2px;padding-right:4px} .mb-ic{border:0;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px; padding:6px 9px;border-radius:6px} .mb-ic:hover{background:var(--azurite-l);color:var(--azurite)} .mb-ic.on{color:var(--azurite);background:var(--azurite-l)} .rb-body{display:flex;flex-wrap:nowrap;padding:5px 10px 6px;overflow-x:auto;overflow-y:hidden;align-items:stretch;gap:0} .rb-group{ display:flex;flex-direction:column;gap:4px;padding:0 9px;border-right:1px solid var(--line); flex:0 0 auto;min-width:max-content; } .rb-group:last-child{border-right:0} .rb-glabel{font-size:11.5px;color:var(--ink-faint);text-align:center;order:-1;white-space:nowrap} .rb-items{display:flex;gap:2px;align-items:stretch;flex-wrap:nowrap;flex:0 0 auto} .rb-btn{ background:transparent;border:1px solid transparent;border-radius:6px;padding:5px 4px 4px; cursor:pointer;font-size:11px;color:var(--ink-dim); display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px; flex:0 0 66px;width:66px;max-width:66px;line-height:1.2;text-align:center;overflow:hidden; } .rb-btn span{ display:block;width:100%;white-space:normal;overflow-wrap:anywhere; height:2.3em;overflow:hidden; } .rb-btn:hover{background:var(--azurite-l);border-color:var(--azurite-m);color:var(--azurite)} .rb-btn.on{background:var(--azurite-l);border-color:var(--azurite);color:var(--azurite);font-weight:700} .rb-btn:disabled{opacity:.35;cursor:not-allowed} .rb-btn i{font-style:normal;font-size:17px;line-height:19px;height:19px;width:19px; display:flex;align-items:center;justify-content:center;color:var(--azurite);opacity:.92; overflow:hidden;flex:0 0 19px} .rb-btn:disabled i{color:var(--ink-faint)} /* ========================================================================== BỐ CỤC CHUNG ========================================================================== */ .bodywrap{flex:1;display:flex;min-height:0;padding:10px;gap:10px;background:var(--bg)} /* dải biểu tượng dọc bên trái */ #dock{ flex:0 0 44px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r); display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;box-shadow:var(--sh1); } .dk{ width:32px;height:32px;border-radius:6px;border:0;background:transparent;cursor:pointer; color:var(--ink-faint);font-size:15px;display:flex;align-items:center;justify-content:center; } .dk:hover{background:var(--azurite-l);color:var(--azurite)} .dk.on{background:var(--azurite);color:#fff} .dk-sep{width:22px;height:1px;background:var(--line);margin:4px 0} /* ========================================================================== CỘT TRÁI: QUY TRÌNH + LỚP HIỂN THỊ ========================================================================== */ #rail{ flex:0 0 var(--rail-w);display:flex;flex-direction:column;gap:10px;min-height:0; transition:flex-basis .16s ease;position:relative; } body.rail-off #rail{flex-basis:0;overflow:hidden;gap:0} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1); display:flex;flex-direction:column;min-height:0;overflow:hidden} .card-h{display:flex;align-items:center;gap:8px;padding:11px 13px 9px} .card-h h2{margin:0;font-size:14.5px;font-weight:700;flex:1} .card-h .cx{border:0;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px;padding:0 3px} .card-h .cx:hover{color:var(--azurite)} .card-b{overflow-y:auto;padding:0 8px 10px;min-height:0} #wf{flex:0 0 auto;max-height:46%} #steps{display:flex;flex-direction:column;gap:1px} .step{ display:flex;align-items:center;gap:9px;cursor:pointer;border:0;background:none;width:100%; text-align:left;padding:8px 9px;border-radius:6px;position:relative;color:inherit; } .step .core{display:none} .step .n{ flex:0 0 22px;height:22px;border-radius:50%;background:var(--core-bg);color:var(--ink-dim); display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700; } .step .lbl{flex:1;min-width:0;display:flex;flex-direction:column} .step .t{font-size:13.5px;color:var(--ink-dim);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .step:hover{background:var(--panel2)} .step:hover .t{color:var(--ink)} .step.active{background:var(--azurite-l);box-shadow:inset 2px 0 0 var(--azurite)} .step.active .t{color:var(--azurite);font-weight:700} .step.active .n{background:var(--azurite);color:#fff} .step.done .n{background:var(--core-bg);color:var(--ink-dim)} .step.done .t{color:var(--ink)} .step .tick{flex:0 0 18px;text-align:center;font-size:11px;color:transparent} .step.done .tick{color:#fff;background:var(--ok);border-radius:50%;width:18px;height:18px; display:flex;align-items:center;justify-content:center;font-size:10px} .step.stale .tick{background:var(--warn);color:#fff} .step.stale .tick::before{content:"⟳"} .step.stale .t{color:var(--warn)} .step .chev{color:var(--ink-faint);font-size:11px} /* cây lớp hiển thị */ #lyrcard{flex:1;min-height:0} .lsearch{position:relative;margin:0 5px 8px} .lsearch input{width:100%;padding:7px 28px 7px 28px;border:1px solid var(--line2);border-radius:6px; font-size:12.5px;background:var(--panel2);font-family:var(--sans)} .lsearch .mag{position:absolute;left:8px;top:7px;color:var(--ink-faint);font-size:12px} .ltree{display:flex;flex-direction:column;gap:1px;font-size:13px} .lrow{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;cursor:default} .lrow:hover{background:var(--panel2)} .lrow .cv{width:12px;text-align:center;color:var(--ink-faint);font-size:9px;cursor:pointer} .lrow input[type=checkbox]{width:14px;height:14px;accent-color:var(--azurite);margin:0} .lrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lrow .eye{color:var(--ink-faint);cursor:pointer;font-size:13px;background:none;border:0;padding:0 2px} .lrow .eye:hover{color:var(--azurite)} .lrow .eye.off{opacity:.32} .lrow .grip{color:var(--line2);cursor:grab;font-size:12px} .lrow.child{padding-left:22px} .lrow.head{font-weight:700} .lrow.off .nm{color:var(--ink-faint)} .lrow .op{width:66px;accent-color:var(--azurite)} /* ========================================================================== KHUNG NHÌN ========================================================================== */ #view{ flex:1;position:relative;min-width:0;border-radius:var(--r);overflow:hidden; background:linear-gradient(160deg,var(--vp) 0%,var(--vp2) 100%); border:1px solid var(--line);box-shadow:var(--sh1); } #gl{position:absolute;inset:0;display:block} .vp-overlay{position:absolute;pointer-events:none;font-size:11.5px} #vp-chips{top:12px;left:64px;display:flex;gap:8px;align-items:center;pointer-events:auto} #vp-tl{top:52px;left:64px;color:var(--ink-dim);line-height:1.55;background:var(--panel); border:1px solid var(--line);border-radius:6px;padding:5px 9px;box-shadow:var(--sh1);max-width:260px} #vp-tl:empty{display:none} #vp-tr{top:12px;right:12px;display:flex;flex-direction:column;gap:5px;align-items:stretch; pointer-events:auto;z-index:6;width:118px;max-height:calc(100% - 24px);overflow-y:auto;overflow-x:hidden} #vp-bl{bottom:14px;left:12px;pointer-events:auto} /* thanh công cụ dọc nổi trong khung nhìn */ #vtools{ position:absolute;top:56px;left:12px;z-index:6;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--sh2);display:flex;flex-direction:column;padding:4px;gap:2px; } #vtools .vt{ width:30px;height:30px;border:0;background:none;border-radius:6px;cursor:pointer; color:var(--ink-dim);font-size:14px;display:flex;align-items:center;justify-content:center; } #vtools .vt:hover{background:var(--azurite-l);color:var(--azurite)} #vtools .vt.on{background:var(--azurite);color:#fff} /* chip chế độ hiển thị */ .chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--sh1);display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12.5px} .chip .cl{color:var(--ink-faint)} .seg{display:flex;background:var(--core-bg);border-radius:6px;padding:2px;gap:2px} .seg button{border:0;background:none;padding:3px 11px;border-radius:5px;cursor:pointer; font-size:12px;color:var(--ink-dim)} .seg button.on{background:var(--azurite);color:#fff;font-weight:700} .sw{position:relative;width:34px;height:19px;border-radius:11px;background:var(--line2); border:0;cursor:pointer;padding:0;transition:background .15s} .sw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:#fff;transition:left .15s;box-shadow:var(--sh1)} .sw.on{background:var(--azurite)} .sw.on::after{left:17px} .vbtn{ background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer; font-size:11.5px;color:var(--ink-dim);box-shadow:var(--sh1); } .vbtn:hover{color:var(--azurite);border-color:var(--azurite)} .vbtn.on{background:var(--azurite);color:#fff;border-color:var(--azurite-d)} .vgroup{display:flex;flex-direction:column;gap:5px;align-items:stretch} select.vbtn{background:var(--panel);color:var(--ink-dim)} #vp-tr .vbtn,#vp-tr select.vbtn{width:100%;min-width:0;text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.vptr-off #vp-tr .vbtn:not(#vp-toggle){display:none} #vp-tr #vp-toggle{width:28px!important;align-self:flex-end;text-align:center;font-size:13px} /* chú giải */ .legend{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:11px 13px;min-width:200px;box-shadow:var(--sh2)} .legend .lt{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px;letter-spacing:.02em} .legend .lu{font-size:11px;color:var(--ink-faint);margin-bottom:6px} .ramp{height:10px;border-radius:3px;margin-bottom:4px} .legend .lr{display:flex;justify-content:space-between;color:var(--ink-faint);font-size:11px} .legend .lstat{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px; border-top:1px solid var(--line);font-size:11px;color:var(--ink-dim)} /* thước tỷ lệ + trục toạ độ */ #scalebar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:4; pointer-events:none;text-align:center;color:var(--ink-dim);font-size:10.5px} #scalebar .bar{display:flex;height:7px;border:1px solid var(--ink-dim);width:230px} #scalebar .bar i{flex:1;background:var(--ink-dim)} #scalebar .bar i:nth-child(even){background:transparent} #scalebar .tk{display:flex;justify-content:space-between;width:238px;margin:2px -4px 0} #axis3{position:absolute;bottom:16px;right:16px;z-index:4;pointer-events:none} #vp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;color:var(--ink-faint);text-align:center;padding:24px} #vp-empty h2{font-size:22px;font-weight:700;color:var(--ink-dim);margin:0} #vp-empty p{margin:0;max-width:400px;line-height:1.6} #labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3} .lbl3{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono); font-size:10px;line-height:1;padding:2px 5px;border-radius:4px;background:var(--panel); color:var(--ink);border:1px solid var(--line2);box-shadow:var(--sh1);opacity:.95} .lbl3.hole{font-family:var(--sans);font-size:11px;font-weight:700;background:var(--azurite); color:#fff;border-color:var(--azurite-d)} .lbl3.hi{background:var(--warn);color:#fff;border-color:var(--warn)} #navcube{position:absolute;top:56px;right:12px;z-index:5;cursor:pointer;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)} #minimap{position:absolute;bottom:14px;right:64px;z-index:4;cursor:crosshair;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)} body.mini-off #minimap,body.mini-off #navcube{display:none} body.nav-off #navcube{display:none} body.map-off #minimap{display:none} #prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:8} #prog i{display:block;height:100%;width:0;background:var(--azurite);transition:width .12s} /* ========================================================================== BẢNG THAO TÁC BÊN PHẢI ========================================================================== */ #panel{ flex:0 0 var(--panel-w);background:var(--panel);border:1px solid var(--line);border-radius:var(--r); display:flex;flex-direction:column;min-height:0;box-shadow:var(--sh1);overflow:hidden; transition:flex-basis .16s ease;position:relative; } body.panel-off #panel{flex-basis:0;overflow:hidden;border:0} .p-head{padding:11px 13px 0;display:flex;flex-direction:column} .p-htop{display:flex;align-items:center;gap:8px} .p-head h1{font-size:16px;font-weight:700;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .p-head .pbtn{border:0;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px;padding:2px 4px} .p-head .pbtn:hover{color:var(--azurite)} .p-head .pbtn.on{color:var(--azurite)} .p-head p{margin:3px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.45} .p-tabs{display:flex;gap:2px;margin-top:9px;border-bottom:1px solid var(--line)} .p-tab{border:0;background:none;padding:8px 13px 7px;cursor:pointer;font-size:13px;color:var(--ink-faint); border-bottom:2px solid transparent} .p-tab:hover{color:var(--ink)} .p-tab.on{color:var(--azurite);border-bottom-color:var(--azurite);font-weight:700} .p-body{flex:1;overflow-y:auto;padding:12px 13px 24px} .p-foot{padding:10px 13px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--panel2)} fieldset{border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;padding:10px 12px 12px;background:var(--panel)} legend{font-size:11.5px;letter-spacing:.02em;color:var(--azurite);padding:0 6px;font-weight:700} .row{display:flex;align-items:center;gap:9px;margin-bottom:8px} .row:last-child{margin-bottom:0} .row label{flex:0 0 128px;color:var(--ink-dim);font-size:12.5px;line-height:1.3} .row .ctl{flex:1;min-width:0;display:flex;gap:6px;align-items:center} .row.stack{flex-direction:column;align-items:stretch;gap:5px} .row.stack label{flex:none} input[type=text],input[type=number],input[type=password],input[type=date],select,textarea{ background:var(--sunken);border:1px solid var(--line2);border-radius:6px;padding:6px 9px;width:100%;font-size:12.5px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azurite);box-shadow:0 0 0 3px var(--hl)} input[type=range]{width:100%;accent-color:var(--azurite)} input[type=checkbox],input[type=radio]{accent-color:var(--azurite);width:15px;height:15px} .hint{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin:5px 0 0} .hint.ok{color:var(--ok)}.hint.err{color:var(--err)} .warnbox{border-left:3px solid var(--warn);background:var(--warn-bg);padding:9px 11px;font-size:12px; color:var(--ink-dim);line-height:1.5;margin-bottom:11px;border-radius:0 6px 6px 0} .okbox{border-left:3px solid var(--ok);background:var(--ok-bg);padding:9px 11px;font-size:12px; color:var(--ink-dim);line-height:1.5;margin-bottom:11px;border-radius:0 6px 6px 0} table.grid{width:100%;border-collapse:collapse;font-size:11.5px} table.grid th{text-align:right;padding:7px 8px;color:var(--ink-dim);font-weight:700; border-bottom:1px solid var(--line2);white-space:nowrap;font-size:11px;background:var(--panel2);position:sticky;top:0} table.grid th:first-child,table.grid td:first-child{text-align:left} table.grid td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line3);white-space:nowrap} table.grid tr:hover td{background:var(--azurite-l)} table.grid td.k{color:var(--ink-dim)} .tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10.5px;font-weight:700} .tag.m{background:var(--ok-bg);color:var(--ok)} .tag.i{background:var(--azurite-l);color:var(--azurite)} .tag.f{background:var(--warn-bg);color:var(--warn)} canvas.chart{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:block;cursor:zoom-in} .chart-cap{font-size:11px;color:var(--ink-faint);margin:5px 0 12px;line-height:1.5} .drop{border:1.5px dashed var(--line2);border-radius:var(--r);padding:16px;text-align:center; color:var(--ink-faint);cursor:pointer;transition:.15s;font-size:12.5px;background:var(--panel2)} .drop:hover,.drop.over{border-color:var(--azurite);color:var(--azurite);background:var(--azurite-l)} .drop b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px;font-size:13px} .filestat{font-size:11.5px;color:var(--ok);margin-top:6px;font-weight:700} /* ========================================================================== THANH TRẠNG THÁI ========================================================================== */ footer{ flex:0 0 32px;height:32px;display:flex;align-items:center;gap:14px;padding:0 12px; background:var(--panel);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-dim); } footer .sep{color:var(--line2)} .fbtn{border:0;background:none;color:var(--ink-dim);cursor:pointer;font-size:12px;padding:3px 8px;border-radius:5px} .fbtn:hover{background:var(--azurite-l);color:var(--azurite)} .fbadge{background:var(--err);color:#fff;border-radius:9px;padding:0 5px;font-size:10px;margin-left:5px;line-height:14px;display:inline-block} .fright{margin-left:auto;display:flex;align-items:center;gap:14px} .fdot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:5px} #msg{color:var(--ink-dim);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw} #msg.err{color:var(--err)} #msg.ok{color:var(--ok)} /* ========================================================================== HỘP THOẠI ========================================================================== */ .modal{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:60;display:none; align-items:center;justify-content:center;padding:28px} html[data-theme="dark"] .modal{background:rgba(2,6,14,.7)} .modal.show{display:flex} .modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:12px; max-width:min(1000px,95vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh3); width:auto;min-width:min(420px,92vw)} .modal-box.wide{width:100%} .modal-body{min-width:0} /* bảng hồ sơ người dùng: hai cột cho cân, không để trống bên phải */ .umgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start;width:min(420px,80vw)} .umgrid .full{grid-column:1 / -1} @media (max-width:720px){.umgrid{grid-template-columns:1fr;width:min(340px,80vw)}} .umcard{display:flex;align-items:center;gap:12px;margin-bottom:14px} .umav{width:46px;height:46px;border-radius:50%;background:var(--azurite);color:#fff; display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:0 0 46px} .umwho{display:flex;flex-direction:column;gap:4px} .umwho b{font-size:15px} .umfld{display:flex;flex-direction:column;gap:2px;min-width:0} .umfld label{font-size:11px;color:var(--ink-faint);letter-spacing:.02em} .umfld span{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .modal-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px; background:var(--panel2);border-radius:12px 12px 0 0} .modal-head h3{margin:0;font-size:15.5px;font-weight:700} .modal-head .btn{margin-left:auto} .modal-body{padding:16px;overflow:auto} /* ========================================================================== THU GỌN THANH BÊN ========================================================================== */ .sidetab{ position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:15px;height:54px; border:1px solid var(--line);background:var(--panel);color:var(--ink-faint);cursor:pointer; font-size:10px;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh1); } .sidetab:hover{background:var(--azurite);color:#fff;border-color:var(--azurite-d)} #tab-rail{border-radius:0 6px 6px 0} #tab-panel{border-radius:6px 0 0 6px} .gripv{position:absolute;top:0;bottom:0;width:5px;cursor:col-resize;z-index:8} .gripv:hover{background:var(--azurite);opacity:.3} #grip-rail{right:-4px} #grip-panel{left:-4px} /* ========================================================================== THÀNH PHẦN PHỤ ========================================================================== */ .noti{font-size:12.5px;padding:8px 10px;border-left:3px solid var(--ok);margin-bottom:6px; background:var(--panel2);border-radius:0 6px 6px 0} .noti.warn{border-color:var(--warn)}.noti.err{border-color:var(--err)} .noti span{color:var(--ink-faint);margin-right:9px;font-family:var(--mono)} #palette{position:fixed;inset:0;background:rgba(15,23,42,.34);display:none;z-index:62} #palette.show{display:block} .pal-box{max-width:560px;margin:12vh auto 0;background:var(--panel);border:1px solid var(--line2); border-radius:12px;overflow:hidden;box-shadow:var(--sh3)} .pal-box input{width:100%;box-sizing:border-box;background:var(--panel);border:0; border-bottom:1px solid var(--line);color:var(--ink);padding:13px 16px;font:14px var(--sans);outline:none} .pal-it{padding:9px 16px;font-size:13px;color:var(--ink-dim);cursor:pointer} .pal-it.on,.pal-it:hover{background:var(--azurite-l);color:var(--azurite)} .authtabs{display:flex;gap:6px;align-items:center;margin-bottom:10px} .dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .dcard{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px; display:flex;flex-direction:column;gap:3px} .dcard b{font-size:21px;color:var(--ink)} .dcard span{font-size:11px;color:var(--ink-faint);letter-spacing:.02em} .lyr{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line3)} .lyr:last-child{border-bottom:0} .lyr .sw2{width:11px;height:11px;border-radius:3px;flex:0 0 11px;border:1px solid rgba(0,0,0,.12)} .lyr .nm{flex:1;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lyr .op{flex:0 0 96px} .lyr .cnt{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);flex:0 0 auto} .lyr.off .nm{color:var(--ink-faint)} .lyr .iso{cursor:pointer;font-size:12px;color:var(--ink-faint);border:0;background:none;padding:2px 4px} .lyr .iso.on{color:var(--warn)} .rb-menu{position:relative} .rb-drop{position:absolute;top:100%;left:0;z-index:30;min-width:230px;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--sh2);padding:5px;display:none} .rb-menu.open .rb-drop{display:block} .rb-drop button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 11px; font-size:12.5px;color:var(--ink);cursor:pointer;border-radius:6px} .rb-drop button:hover{background:var(--azurite-l);color:var(--azurite)} /* hướng dẫn */ .gd-grp{font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;padding:10px 5px 4px;font-weight:700} .gd-item{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:7px 10px; font-size:12.5px;color:var(--ink-dim);border-radius:6px;line-height:1.35} .gd-item:hover{background:var(--azurite-l);color:var(--azurite)} .gd-item.on{background:var(--azurite);color:#fff;font-weight:700} .gd-body{font-size:13px;line-height:1.62;padding-right:6px} .gd-body h3{font-size:17px;margin:0 0 10px} .gd-body h4{font-size:13.5px;margin:16px 0 5px;color:var(--azurite)} .gd-body p{margin:6px 0} .gd-body ol,.gd-body ul{margin:6px 0 6px 20px;padding:0} .gd-body li{margin:4px 0} .gd-body code{background:var(--panel2);border:1px solid var(--line);padding:1px 5px;border-radius:4px; font-family:var(--mono);font-size:11.5px} table.gt{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px} table.gt th,table.gt td{border:1px solid var(--line2);padding:6px 9px;text-align:left;vertical-align:top} table.gt th{background:var(--panel2);font-weight:700} /* multi-viewport */ #mvp{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:1px;background:var(--line); border-top:1px solid var(--line2)} .mvp-pane{flex:1;background:var(--panel);position:relative;min-width:0} .mvp-t{font-size:10.5px;letter-spacing:.03em;color:var(--ink-faint);padding:4px 9px; border-bottom:1px solid var(--line3);font-weight:700} .mvp-pane canvas{display:block} /* bảng thao tác nổi */ #panel.floating{position:fixed;width:var(--panel-w);height:min(70vh,640px);z-index:40; border-radius:12px;box-shadow:var(--sh3);overflow:hidden} body.panel-float #panel{flex-basis:0} @media (max-width:1400px){#panel{flex-basis:340px}#rail{flex-basis:224px}} /* ========================================================================== BIỂU MẪU TÀI KHOẢN ========================================================================== */ .auth{display:flex;gap:0;margin:-16px;border-radius:12px;overflow:hidden;min-height:440px} .auth-side{ flex:0 0 300px;background:linear-gradient(160deg,var(--navy),var(--azurite-d)); color:#fff;padding:26px 24px;display:flex;flex-direction:column;position:relative; background-size:cover;background-position:center; } .auth-side.has-bg::before{content:'';position:absolute;inset:0; background:linear-gradient(160deg,rgba(30,58,138,.88),rgba(29,78,216,.86))} .auth-side>*{position:relative;z-index:1} .auth-logo{width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:14px;overflow:hidden} .auth-logo img{width:100%;height:100%;object-fit:contain;background:rgba(255,255,255,.9);border-radius:12px} .auth-brand{font-size:21px;font-weight:700;letter-spacing:.01em} .auth-brand em{font-style:normal;opacity:.85} .auth-brand span{font-size:13px;vertical-align:middle;opacity:.8} .auth-tag{font-size:12.5px;opacity:.85;line-height:1.6;margin-top:8px} .auth-pt{list-style:none;padding:0;margin:20px 0 0;font-size:12px;opacity:.9;line-height:1.5} .auth-pt li{position:relative;padding-left:16px;margin-bottom:9px} .auth-pt li::before{content:'✓';position:absolute;left:0;top:0;font-weight:700} .auth-srv{margin-top:auto;font-size:11.5px;line-height:1.55;background:rgba(0,0,0,.18); border-radius:8px;padding:10px 11px} .auth-srv b.ok{color:#86EFAC} .auth-srv b.err{color:#FCA5A5} .auth-srv code{background:rgba(255,255,255,.14);padding:1px 4px;border-radius:3px;font-family:var(--mono)} .auth-srv .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff} .auth-srv .btn:hover{background:rgba(255,255,255,.26)} .auth-main{flex:1;padding:24px 26px;min-width:0;background:var(--panel)} .afgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px} .afgrid.one{grid-template-columns:1fr;max-width:360px} .afld{display:flex;flex-direction:column;gap:4px;min-width:0} .afld.wide{grid-column:1 / -1} .afld label{font-size:12.5px;color:var(--ink-dim)} .afld .rq{color:var(--err);font-weight:700} .afbtn{width:100%;justify-content:center;margin-top:16px;padding:10px 14px;font-size:14px} .acheck{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink-dim); margin-top:14px;line-height:1.45} .acheck input{margin-top:1px;flex:0 0 auto} @media (max-width:860px){.auth{flex-direction:column;min-height:0}.auth-side{flex:0 0 auto} .afgrid{grid-template-columns:1fr}} /* ---------- trang quản trị, nhận diện, trợ lý ---------- */ .admtabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px} .brandprev{width:44px;height:44px;border-radius:9px;background:var(--navy);color:#fff;display:flex; align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex:0 0 44px} .brandprev img{width:100%;height:100%;object-fit:contain;background:#fff} .blogo img{width:100%;height:100%;object-fit:contain;border-radius:50%} .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* ---------- nhãn lưới toạ độ trên khung nhìn ---------- */ #gridlabels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2} .glbl{ position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono); line-height:1;padding:1px 4px;border-radius:3px;color:var(--ink-dim); background:color-mix(in srgb, var(--panel) 78%, transparent); } .glbl.gz{color:var(--azurite);font-weight:700} .glbl.gx{color:var(--cinnab)} .glbl.gy{color:var(--malachite)} @supports not (background: color-mix(in srgb, red 50%, blue)){ .glbl{background:var(--panel);opacity:.86} }