/* Font tự host (OFL, xem fonts/OFL-*.txt) — không gọi Google Fonts */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/dm-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/dm-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/dm-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/dm-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/manrope-var-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/manrope-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/manrope-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/manrope-var-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/manrope-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/manrope-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/manrope-var-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/manrope-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/manrope-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-var-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-var-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{color-scheme:dark;--bg:#090c0f;--surface:#11161b;--surface2:#151b21;--surface3:#0d1216;--text:#e5e9e7;--muted:#77827f;--faint:#4d5956;--line:#232b2c;--line2:#303a39;--mint:#95e6c2;--mint2:#3e9677;--amber:#e6b978;--red:#ff8175;--blue:#9db9ec;--mono:'DM Mono',ui-monospace,monospace;--sans:'Manrope',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.55 var(--sans);min-height:100vh}a{color:inherit;text-decoration:none}button,select,input{font:inherit;color:inherit}button{cursor:pointer}.topbar{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#0b0f11}.crumb,.top-actions{font:10px var(--mono);letter-spacing:.06em;color:var(--muted)}.crumb span{color:#394340;margin:0 9px}.crumb b{color:#c2cbc6;font-weight:500}.top-actions{display:flex;align-items:center;gap:9px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint2);display:inline-block;box-shadow:0 0 11px #57c29588}.top-divider{height:15px;border-left:1px solid var(--line2);margin:0 7px}.top-actions form{margin:0}.logout{background:none;border:0;color:var(--muted);font:10px var(--mono)}main{max-width:1480px;padding:38px 42px 54px;margin:0 auto}.page-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 25px}.eyebrow{font:10px var(--mono);color:var(--mint2);letter-spacing:.16em}.page-heading h1{margin:7px 0 3px;font-size:27px;line-height:1.2;letter-spacing:-.045em;font-weight:600}.subhead{margin:5px 0 0;color:var(--muted);font-size:12px}.explorer-meta{font:10px var(--mono);letter-spacing:.06em;color:#91a099;display:flex;align-items:center;gap:9px;padding-bottom:5px}.button{min-height:35px;border:1px solid var(--line2);border-radius:3px;padding:0 13px;background:var(--surface2);font:11px var(--mono);display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:background .16s,border .16s,transform .16s}.button:hover{transform:translateY(-1px);border-color:#597565}.button.primary{background:#b4efd2;border-color:#b4efd2;color:#0b1711;font-weight:500}.button.primary:hover{background:#c5f6df}.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px;margin-bottom:22px}.metric-card{background:var(--surface);padding:15px 18px 14px;min-height:112px}.metric-card>span{display:block;font:9px var(--mono);letter-spacing:.13em;color:var(--muted)}.metric-card strong{display:block;margin-top:8px;font:24px var(--mono);letter-spacing:-.05em;color:#dfe8e2}.metric-card small{font-size:10px;color:var(--faint)}.metric-card .attention{color:var(--amber)}.panel{border:1px solid var(--line);background:var(--surface)}.source-panel{overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:14px;margin:4px 0 0;font-weight:600}.refresh-note{font:10px var(--mono);color:var(--mint2)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}th{font:9px var(--mono);letter-spacing:.1em;color:var(--faint);font-weight:400;background:#0e1316}tbody tr{cursor:pointer}tbody tr:hover{background:#17201e}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;padding:2px 7px;font:9px var(--mono);border:1px solid currentColor;margin:0 4px 2px 0;white-space:nowrap}.s-ok{color:var(--mint)}.s-warn{color:var(--amber)}.s-bad{color:var(--red)}.s-spike{color:#c4a2f5}svg.spark{display:block}svg.spark polyline{fill:none;stroke:var(--mint2);stroke-width:1.5}.query-panel{border-color:#2b3532;margin-bottom:19px;box-shadow:0 8px 35px #0002}.query-caption{height:37px;border-bottom:1px solid var(--line);padding:0 14px;display:flex;align-items:center;gap:9px;font:9px var(--mono);letter-spacing:.11em;color:#94a29a}.query-symbol{font-size:17px;color:var(--mint)}.query-hint{letter-spacing:0;color:var(--faint);margin-left:4px}.toolbar{padding:14px;display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1.6fr;gap:10px 9px}.field,.search-field{min-width:0;display:flex;flex-direction:column;gap:5px}.field>span,.search-field>span{font:9px var(--mono);letter-spacing:.1em;color:var(--faint)}.field select,.search-wrap{width:100%;height:35px;min-width:0;background:#0c1114;border:1px solid #283230;border-radius:2px;padding:0 9px;font:10px var(--mono);outline:none}.field select:focus,.search-wrap:focus-within{border-color:var(--mint2)}.search-wrap{display:flex;align-items:center;gap:8px}.search-wrap>span{font-size:18px;color:var(--mint2)}.search-wrap input{min-width:0;flex:1;background:transparent;border:0;outline:0;font:11px var(--mono)}.search-wrap input::placeholder{color:#56615d}.search-wrap kbd,.keyboard-hint kbd{font:9px var(--mono);color:var(--faint);border:1px solid #333e3a;padding:1px 4px}.query-options{grid-column:1/-1;border-top:1px solid var(--line);padding-top:11px;display:flex;justify-content:space-between;align-items:center}.toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle i{width:25px;height:14px;border-radius:10px;border:1px solid #46504d;background:#202725;position:relative;transition:.15s}.toggle i:after{content:'';position:absolute;width:8px;height:8px;left:2px;top:2px;border-radius:50%;background:#75817b;transition:.15s}.toggle input:checked+i{background:#19382d;border-color:#468566}.toggle input:checked+i:after{left:13px;background:var(--mint)}.toggle:focus-within i{outline:2px solid var(--mint2)}.toolbar-actions{display:flex;align-items:center;gap:16px}.live-toggle input:checked+i{background:#47231f;border-color:#8f5045}.live-toggle input:checked+i:after{background:var(--red)}.run-button{height:33px;min-height:33px;padding:0 12px}.run-button span{font-size:9px}.results-head{display:flex;align-items:center;justify-content:space-between;padding:2px 1px 8px}.results-title{font-size:12px;font-weight:700}.results-sub{font:10px var(--mono);color:var(--faint);margin-left:9px}.result-actions{display:flex;align-items:center;gap:17px}.quiet-button{background:none;border:0;font:10px var(--mono);color:#89958e}.quiet-button:hover{color:var(--mint)}.keyboard-hint{font:9px var(--mono);color:var(--faint);display:flex;gap:3px;align-items:center}.query-status{padding:0 1px 8px;font:9px var(--mono);color:var(--faint)}.log-table{border:1px solid var(--line);background:#0c1013}.log-columns,.logs .l{display:grid;grid-template-columns:175px 85px 190px minmax(0,1fr);gap:10px;align-items:start}.log-columns{position:sticky;top:0;z-index:1;background:#11171a;border-bottom:1px solid var(--line2);padding:9px 12px;font:9px var(--mono);letter-spacing:.09em;color:var(--faint)}.logs{font:11px/1.55 var(--mono);max-height:calc(100vh - 425px);min-height:180px;overflow:auto}.logs:empty:after{content:'Chưa có log trong phạm vi này.';display:block;padding:25px 13px;color:var(--faint)}.logs .l{padding:5px 12px;border-bottom:1px solid #1b2222;color:#bac3be;cursor:pointer}.logs .l:hover{background:#151d1b}.logs .t{color:#77847c;white-space:nowrap}.logs .c{color:#9dbaaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logs .m{white-space:pre-wrap;word-break:break-word}.logs .l.err{background:#291b1a55}.logs .l.err .m{color:#ff9c91}.logs .l.warn .m{color:#ecc484}.logs .severity{font:9px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#77847c}.logs .severity.error{color:#ff897b}.logs .severity.warn{color:#e8bb79}.logs .severity.info{color:#83c8a8}.logs .details{grid-column:1/-1;background:#111819;border:1px solid #2b3c35;padding:11px 13px;color:#bdc9c2;white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 6px}.logs .l.expanded{background:#151e1c}.status{padding:9px 13px;color:var(--faint);font:9px var(--mono)}footer{border-top:1px solid var(--line);padding:12px 42px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.08em;color:#46514d}.error{color:var(--red)}
@media(max-width:1050px){main{padding:30px 24px}.toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.search-field{grid-column:span 2}.log-columns,.logs .l{grid-template-columns:150px 70px 150px minmax(0,1fr)}}@media(max-width:700px){.topbar{padding:0 14px}.crumb{font-size:8px}.top-actions{font-size:8px;gap:6px}.top-actions .top-divider,.top-actions>span:not(.live-dot){display:none}main{padding:23px 13px 38px}.page-heading{align-items:flex-start;gap:12px;flex-direction:column}.page-heading h1{font-size:23px}.metric-strip{grid-template-columns:repeat(2,1fr)}.metric-card{min-height:96px;padding:12px}.toolbar{grid-template-columns:repeat(2,minmax(0,1fr));padding:11px}.time-field{grid-column:span 1}.search-field{grid-column:1/-1}.query-hint{display:none}.query-options{align-items:flex-start;gap:10px;flex-direction:column}.toolbar-actions{width:100%;justify-content:space-between}.log-columns,.logs .l{grid-template-columns:122px 60px minmax(0,1fr);gap:6px}.log-columns span:nth-child(3){display:none}.logs .c{grid-column:3}.logs .m{grid-column:1/-1;padding:1px 0 3px}.logs{max-height:calc(100vh - 475px);font-size:10px}.keyboard-hint{display:none}.hide-sm{display:none}footer{padding:11px 13px}}
/* ---------- APM ---------- */
.mono{font-family:var(--mono)}.subhead.mono{font-size:10px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;flex:none}.dot.big{width:12px;height:12px;margin-right:12px;vertical-align:2px}.badge.muted{color:var(--faint);margin-left:8px}.back-link{display:inline-block;font:10px var(--mono);color:var(--muted);margin-bottom:10px}.back-link:hover{color:var(--mint)}.heading-actions{display:flex;align-items:end;gap:10px}.range-field{width:170px}main>section>.panel{margin-bottom:19px}tbody tr.selected{background:#18231f;box-shadow:inset 2px 0 var(--mint)}
.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:19px}.chart-panel{padding:12px 14px 8px}.chart-head{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.12em;color:var(--muted);margin-bottom:6px}.chart-head b{font-weight:500;color:var(--text);letter-spacing:0}.chart{height:130px}.linechart{width:100%;height:130px;display:block}.linechart .grid{stroke:#1f2828;stroke-width:1}.linechart .axis{font:9px var(--mono);fill:var(--faint)}.chart-empty{height:130px;display:grid;place-items:center;font:10px var(--mono);color:var(--faint)}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}.split>.panel{margin-bottom:19px}.deps{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;padding:16px;align-items:start}.dep-col{display:flex;flex-direction:column;gap:7px}.dep-col.center{align-self:center}.dep{display:flex;align-items:center;flex-wrap:wrap;border:1px solid var(--line2);background:var(--surface3);padding:7px 9px;font-size:11px}.dep b{font-weight:600;overflow:hidden;text-overflow:ellipsis}.dep small{flex-basis:100%;font:9px var(--mono);color:var(--faint);margin-left:16px}.dep.link:hover{border-color:var(--mint2)}.dep-empty{font:10px var(--mono);padding:7px 2px}
.trace-filters{display:flex;align-items:center;gap:10px}.chip{border:1px solid #30453c;background:#18231f;color:var(--mint);font:10px var(--mono);padding:3px 8px;margin-left:9px}.segmented{display:flex;border:1px solid var(--line2)}.segmented button{background:none;border:0;border-right:1px solid var(--line2);font:10px var(--mono);color:var(--muted);padding:5px 10px}.segmented button:last-child{border-right:0}.segmented button.on{background:#18231f;color:var(--mint)}.dur-bar{display:flex;align-items:center;gap:9px}.dur-track{position:relative;width:180px;height:8px;background:#141b1d;flex:none}.dur-track i{position:absolute;left:0;top:0;height:100%;background:#3e9677}.dur-bar span{font:10px var(--mono);color:#cfd8d3;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:14px;font:10px var(--mono);color:var(--muted)}.waterfall{font:11px var(--mono);max-height:60vh;overflow:auto}.wf-row{display:grid;grid-template-columns:minmax(260px,32%) minmax(0,1fr);border-bottom:1px solid #1b2222;cursor:pointer;min-height:26px}.wf-row:hover{background:#151d1b}.wf-row.selected{background:#18231f}.wf-axis{position:sticky;top:0;z-index:1;background:#11171a;cursor:default;font-size:9px;color:var(--faint);letter-spacing:.08em}.wf-axis:hover{background:#11171a}.wf-name{display:flex;align-items:center;gap:6px;padding:5px 10px;overflow:hidden;white-space:nowrap;border-right:1px solid var(--line)}.wf-name .dot{margin-right:0}.wf-svc{color:var(--muted)}.wf-op{color:#d6dfda;overflow:hidden;text-overflow:ellipsis}.wf-row.err .wf-op{color:var(--red)}.wf-track{position:relative;margin:0 60px 0 10px}.wf-axis .wf-track span{position:absolute;top:6px;transform:translateX(-50%)}.wf-axis .wf-track span:first-child{transform:none}.wf-axis .wf-track span:last-child{transform:translateX(-100%)}.wf-bar{position:absolute;top:8px;height:10px;border-radius:1px;opacity:.85}.wf-bar.err{outline:1px solid var(--red);background:repeating-linear-gradient(45deg,#ff8175,#ff8175 4px,#c25a50 4px,#c25a50 8px)!important}.wf-dur{position:absolute;top:5px;padding:0 6px;font-size:9px;color:var(--muted);white-space:nowrap}.wf-dur.inside{color:#0b1711;font-weight:500}
.span-detail .panel-heading h2{display:flex;align-items:center}.span-body{padding:14px 19px 18px;display:flex;flex-direction:column;gap:9px}.span-error{border:1px solid #5a2e2a;background:#291b1a;color:var(--red);font:11px var(--mono);padding:8px 10px}.exception{border:1px solid #5a2e2a;background:#1d1414;padding:10px 12px}.exception b{color:#ff9c91;font:11px var(--mono)}.exception pre,.statement{margin:8px 0 0;font:10px/1.5 var(--mono);color:#d3c2bf;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto}.statement{margin:0;background:var(--surface3);border:1px solid var(--line);padding:9px 11px;color:#bcd4c8}.kv{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:3px 16px;margin:0;font:10px/1.5 var(--mono)}.kv dt{color:var(--muted)}.kv dd{margin:0;color:#d4ddd8;word-break:break-all}.event{border-left:2px solid var(--line2);padding-left:10px}.event b{font:10px var(--mono)}
@media(max-width:1050px){.chart-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.wf-row{grid-template-columns:minmax(180px,40%) minmax(0,1fr)}}@media(max-width:700px){.heading-actions{flex-wrap:wrap}.deps{grid-template-columns:1fr}.dur-track{width:90px}.trace-filters{flex-wrap:wrap;justify-content:flex-end}.panel-heading{flex-wrap:wrap;gap:8px}.wf-track{margin-right:40px}.kv{grid-template-columns:1fr}}
.trace-lookup{width:260px}.trace-lookup .search-wrap input{font-size:10px}
.wf-logs{margin-left:auto;font-size:9px;color:var(--mint);border:1px solid #30453c;padding:0 5px;flex:none}.trace-logs{max-height:46vh;overflow:auto}.tl-list{font:11px/1.5 var(--mono)}.tl-row{display:grid;grid-template-columns:96px 52px minmax(120px,240px) minmax(0,1fr);gap:10px;padding:4px 14px;border-bottom:1px solid #1b2222;color:#bac3be}.tl-row .t,.tl-row .sev{color:#77847c}.tl-row .src{color:#9dbaaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-row .m{white-space:pre-wrap;word-break:break-word}.tl-row.error .m,.tl-row.error .sev{color:#ff9c91}.tl-row.warn .m,.tl-row.warn .sev{color:#ecc484}.span-body .tl-list{border:1px solid var(--line)}.span-body .tl-row{padding:4px 10px}.tl-empty{padding:16px 19px;font:10px var(--mono)}@media(max-width:700px){.tl-row{grid-template-columns:80px minmax(0,1fr)}.tl-row .sev,.tl-row .src{display:none}}
.llm-strip{grid-template-columns:repeat(5,1fr)}tbody tr.row-err td{color:#ff9c91}@media(max-width:700px){.llm-strip{grid-template-columns:repeat(2,1fr)}}
.ov-label{margin:0 0 8px}.ov-apm{margin-bottom:22px}a.metric-card{display:block;transition:background .15s}a.metric-card:hover{background:#151d1b}.svc-map{overflow:auto;padding:10px}.map-svg{display:block;margin:0 auto}.map-node rect{fill:#0d1216;stroke:#303a39}.map-node.service rect{stroke:#3e6a59}.map-node.service:hover rect{stroke:var(--mint)}.map-node.user rect{stroke-dasharray:4 3}.map-node text.name{font:600 12px var(--sans);fill:#dfe8e2}.map-node text.sub{font:9px var(--mono);fill:var(--faint)}.map-edge path{fill:none;stroke:#3e9677;opacity:.75}.map-edge.bad path{stroke:var(--red)}.map-edge text{font:9px var(--mono);fill:var(--muted)}.map-edge.bad text{fill:var(--red)}
.gauge{display:grid;grid-template-columns:80px 38px;align-items:center;gap:8px;row-gap:1px}.gauge-track{height:6px;background:#141b1d}.gauge-track i{display:block;height:100%}.gauge-track i.ok{background:var(--mint2)}.gauge-track i.warn{background:var(--amber)}.gauge-track i.bad{background:var(--red)}.gauge span{font:11px var(--mono);text-align:right}.gauge small{grid-column:1/-1;font:9px var(--mono);color:var(--faint)}tbody tr.no-click{cursor:default}

.cmd{white-space:pre-wrap;word-break:break-all;color:var(--text)}
.ssh-wrap{white-space:normal;min-width:160px;max-width:300px}.ssh-scroll{max-height:56vh;overflow:auto}

/* ---------- Thanh bên trái: nhóm + tên + mô tả; thu gọn còn icon (nhớ trong trình duyệt) ---------- */
:root{--rail-w:236px}
body.rail-mini{--rail-w:62px}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail-w);border-right:1px solid var(--line);background:#0b0f11;display:flex;flex-direction:column;z-index:5;transition:width .15s}
.app-shell{margin-left:var(--rail-w);min-height:100vh;transition:margin-left .15s}
.rail-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.brand-mark{width:32px;height:32px;flex:none;border:1px solid #466e5d;background:#13241e;color:var(--mint);display:grid;place-items:center;font-weight:800;font-size:17px}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.brand-text b{font-size:14px;letter-spacing:.02em}
.brand-text span{font:9px var(--mono);color:var(--faint);letter-spacing:.06em;white-space:nowrap}
.rail-toggle{margin-left:auto;flex:none;width:26px;height:26px;border:1px solid var(--line2);background:none;color:var(--muted);font-size:13px}
.rail-toggle:hover{color:var(--mint);border-color:#30453c}
.rail-nav{flex:1;overflow-y:auto;padding:6px 10px 12px}
.rail-group{font:9px var(--mono);letter-spacing:.16em;color:var(--faint);padding:14px 6px 5px}
.rail-button{position:relative;display:flex;align-items:center;gap:10px;padding:7px 8px;margin:1px 0;border:1px solid transparent;color:var(--muted)}
.rail-button:hover{background:#121a17;color:var(--text)}
.rail-button.active{background:#18231f;border-color:#30453c;color:var(--mint)}
.rail-button i{font-style:normal;font-size:17px;width:22px;flex:none;text-align:center}
.rail-button span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.rail-button b{font-size:12.5px;font-weight:600;color:inherit}
.rail-button small{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-button.active small{color:#6f9a87}
.rail-badge{margin-left:auto;flex:none;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--amber);color:#0b1711;font:700 9px/17px var(--mono);font-style:normal;text-align:center}
.rail-badge.crit{background:var(--red)}
.rail-soon{margin-left:auto;flex:none;font:8px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--amber);border:1px solid #5a4a30;padding:1px 4px}
.rail-bottom{padding:12px 16px;border-top:1px solid var(--line);font:10px var(--mono);color:#c7d0cb;display:flex;flex-direction:column}
.rail-bottom span{font-size:8px;color:var(--faint);letter-spacing:.08em}
.crumb em{font-style:normal}
body.rail-mini .brand-text,body.rail-mini .rail-button span,body.rail-mini .rail-soon,body.rail-mini .rail-bottom{display:none}
body.rail-mini .rail-head{flex-direction:column;padding:14px 0 10px}
body.rail-mini .rail-toggle{margin:0;transform:scaleX(-1)}
body.rail-mini .rail-nav{padding:6px 0}
body.rail-mini .rail-group{font-size:0;padding:8px 0 4px;margin:6px 14px 0;border-top:1px solid var(--line)}
body.rail-mini .rail-button{width:38px;height:36px;margin:2px auto;padding:0;justify-content:center}
body.rail-mini .rail-badge{position:absolute;top:-4px;right:-7px;min-width:15px;height:15px;line-height:15px;padding:0 3px}
/* Màn hình nhỏ: luôn chỉ còn icon; bấm nút để mở đè lên nội dung */
@media(max-width:700px){
  :root,body.rail-mini{--rail-w:52px}
  body:not(.rail-open) .brand-text,body:not(.rail-open) .rail-button span,body:not(.rail-open) .rail-soon,body:not(.rail-open) .rail-bottom{display:none}
  body:not(.rail-open) .rail-head{flex-direction:column;padding:12px 0 8px}
  body:not(.rail-open) .rail-toggle{margin:0;transform:scaleX(-1)}
  body:not(.rail-open) .rail-nav{padding:6px 0}
  body:not(.rail-open) .rail-group{font-size:0;padding:6px 0 3px;margin:5px 10px 0;border-top:1px solid var(--line)}
  body:not(.rail-open) .rail-button{width:36px;height:34px;margin:2px auto;padding:0;justify-content:center}
  body:not(.rail-open) .rail-badge{position:absolute;top:-4px;right:-7px;min-width:15px;height:15px;line-height:15px;padding:0 3px}
  body.rail-open .rail{width:248px;box-shadow:0 0 40px #000c}
}


/* ---------- Network ---------- */
.net-topo{padding:14px 16px 6px;margin-bottom:19px}
.net-tier{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.net-tier-label{font:9px var(--mono);letter-spacing:.14em;color:var(--faint);padding-top:12px}
.net-tier-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.net-arrow{grid-column:2;text-align:center;color:var(--line2);font-size:14px;line-height:1;padding:4px 0}
.net-node{display:block;border:1px solid var(--line);background:var(--surface3);padding:10px 12px;min-height:88px}
a.net-node:hover{border-color:#30453c;background:#121a17}
.net-node.bad{border-color:#5a2e2a}
.net-node.warn{border-color:#5a4a30}
.net-node-head{display:flex;align-items:center}
.net-node-head strong{font-size:13px}
.net-node small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.net-node code{display:block;font:10px var(--mono);color:var(--blue);margin:4px 0 2px}
.net-line{font:10px var(--mono);color:#c2cbc6}
.net-node.bad .net-line{color:var(--red)}
.dot.ok{background:var(--mint2)}
.dot.warn{background:var(--amber)}
.dot.bad{background:var(--red)}
.dot:not(.ok):not(.warn):not(.bad){background:var(--faint)}
.net-cards .panel{margin-bottom:19px}
.net-todo{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-top:1px solid var(--line)}
a.net-todo:hover{background:#121a17}
.net-todo p{margin:2px 0 0;color:var(--muted);font-size:12px}
.net-banner{border:1px solid #5a2e2a;background:#1d1414;color:#f1c9c4;padding:11px 14px;margin-bottom:16px;font-size:12px}
.net-banner strong{color:var(--red)}
.net-kv{padding:6px 16px 14px}
.net-kv-row{display:grid;grid-template-columns:minmax(130px,40%) minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.net-kv-row span{color:var(--muted)}
.net-kv-row b{font-weight:500;font-family:var(--mono);font-size:11px;word-break:break-word}
.net-setup{margin-bottom:19px}
.net-steps{margin:4px 16px 16px 34px;padding:0;color:#c2cbc6;line-height:1.8}
.chart-grid.net-2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.dns-search{width:240px}
@media(max-width:1050px){.chart-grid.net-2{grid-template-columns:1fr}}
@media(max-width:700px){.net-tier{grid-template-columns:1fr;gap:6px}.net-tier-label{padding-top:6px}.net-arrow{grid-column:1}.net-tier-nodes{grid-template-columns:1fr}.dns-search{width:100%}}
.dns-desc{white-space:normal;min-width:200px;max-width:380px;font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#dt-wan{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1050px){#dt-wan{grid-template-columns:1fr}}
/* Uptime: mỗi ô một lần kiểm tra Gatus */
.up-sub{font-size:10px;font-family:var(--mono)}
tbody tr.selected{background:#18231f}

/* ---------- v2.0: phân quyền, form, token ---------- */
.no-perm{display:none!important}
.user-chip{font:10px var(--mono);color:#c2cbc6;border:1px solid var(--line2);padding:3px 8px;cursor:default}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;padding:14px 16px 16px;align-items:end}
.form-grid .wide{grid-column:1/-1}
.form-grid input:not([type=checkbox]),.form-grid textarea,.form-grid select,.inline-form input,.mini-select{width:100%;min-height:35px;background:#0c1114;border:1px solid #283230;border-radius:2px;padding:7px 9px;font:11px var(--mono);color:var(--text);outline:none}
.form-grid textarea{resize:vertical;line-height:1.5}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:#30453c}
.form-grid .field>span,.form-grid .field>div>span{display:block}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.form-msg{font:10px var(--mono)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin-top:6px}
.perm{display:grid;grid-template-columns:16px 1fr;gap:2px 8px;align-items:start;border:1px solid var(--line);padding:7px 9px;cursor:pointer}
.perm b{font:11px var(--mono);color:var(--text)}
.perm small{grid-column:2;color:var(--faint);font-size:10.5px}
.token-once{margin:0 16px 16px;border:1px solid #30453c;background:#121a17;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.token-line{display:flex;gap:10px;align-items:center}
.token-line code{font:12px var(--mono);color:var(--mint);word-break:break-all;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:4px;max-width:420px;white-space:normal}
.chip-sm{font:9px var(--mono);border:1px solid var(--line2);padding:1px 5px;color:#c2cbc6}
td.row-actions{white-space:nowrap}
.row-actions>*{margin-right:6px}
.mon-val{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto}
.quiet-button.danger{color:var(--red)}
.muted-row td{opacity:.6}
.inline-form{display:inline-flex;gap:6px;align-items:center}
.inline-form input{width:170px}
.mini-select{width:auto;min-height:28px;padding:3px 6px}
.adm-tab .panel{margin-bottom:19px}
#view-admin .segmented,#view-admin .page-heading{flex-wrap:wrap}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.user-chip{display:none}}
.mention-bar{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
button.chip-sm.mention{background:none;cursor:pointer;color:var(--blue)}
button.chip-sm.mention:hover{border-color:var(--blue)}
.perm-inline{font-size:10px;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
/* Uptime kiểu Gatus */
.up-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.up-toolbar .status{padding:0;margin-left:auto}
.up-groups{display:flex;flex-direction:column;gap:14px;margin-bottom:19px}
.up-group{border:1px solid var(--line);background:var(--surface)}
.up-group-head{width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);text-align:left}
.up-group-head b{font-size:14px;font-weight:600}
.up-group-head small{color:var(--faint);font:10px var(--mono)}
.up-group-head i{margin-left:auto;font-style:normal;color:var(--muted)}
.up-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0b1711;background:var(--mint)}
.up-icon.bad{background:var(--red)}
.up-icon.warn{background:var(--amber)}
.up-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.up-card{display:block;background:var(--surface);padding:12px 16px 10px;min-width:0}
.up-card:hover{background:#121a17}
.up-card.selected{background:#18231f}
.up-card.down{background:#1d1414}
.up-card-top{display:flex;align-items:center;gap:8px;min-width:0}
.up-card-top strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-host{font:10px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-ms{margin-left:auto;font:11px var(--mono);color:#c2cbc6;white-space:nowrap}
.up-bars{display:flex;gap:2px;height:26px;margin:9px 0 6px}
.up-bars i{flex:1;min-width:2px;border-radius:3px;background:#3fb27f}
.up-bars i.bad{background:var(--red)}
.up-bars i:hover{opacity:.7}
.up-card-foot{display:flex;justify-content:space-between;gap:8px;font:9.5px var(--mono);color:var(--faint)}
.up-uptime{color:var(--muted)}
.up-why{margin-top:6px;font:10px var(--mono);color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1050px){.up-cards{grid-template-columns:1fr}}
/* Dashboards */
.board-heading .heading-actions{align-items:center}
.board-clock{font:20px var(--mono);color:#c2cbc6;letter-spacing:.02em}
.board-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.board-tile{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--mint2);padding:14px 16px;min-height:132px;display:flex;flex-direction:column}
.board-tile.warn{border-top-color:var(--amber)}
.board-tile.bad{border-top-color:var(--red);background:#1d1414}
.board-tile>span{font:9px var(--mono);letter-spacing:.13em;color:var(--muted)}
.board-tile strong{font:40px/1.1 var(--mono);letter-spacing:-.04em;margin:10px 0 6px;color:#dfe8e2}
.board-tile.bad strong{color:var(--red)}
.board-tile.warn strong{color:var(--amber)}
.board-tile small{font-size:11px;color:var(--faint)}
.board-tile .spark{margin-top:auto;width:100%}
.board-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.board-panel{padding:12px 16px 14px;margin-bottom:14px}
.board-split .board-panel{margin-bottom:0}
.board-panel-head{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.13em;color:var(--muted);margin-bottom:8px}
.board-panel-head a{color:var(--faint);letter-spacing:0}
.board-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:12px;min-width:0}
.board-row-main{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row-val{font:11px var(--mono);color:#c2cbc6;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.board-gauge{width:120px;grid-template-columns:1fr}
.board-gauge span{display:none}
.board-empty{padding:16px 0;color:var(--mint);font-size:13px}
.wall-group{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:start;padding:7px 0;border-top:1px solid var(--line)}
.wall-label{font:11px var(--mono);color:#c2cbc6;padding-top:2px;display:flex;justify-content:space-between;gap:6px}
.wall-label small{color:var(--faint)}
.wall{display:flex;flex-wrap:wrap;gap:4px}
.wall-cell{width:18px;height:18px;border-radius:3px;background:#3fb27f}
.wall-cell.bad{background:var(--red)}
.wall-cell.warn{background:var(--amber)}
.wall.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.wall.big .wall-cell{width:auto;height:auto;padding:9px 11px;display:flex;flex-direction:column;gap:2px;color:#08110d}
.wall.big .wall-cell b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall.big .wall-cell small{font:10px var(--mono);opacity:.8}
.wall.big .wall-cell.bad{color:#fff}
.host-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:14px}
.host-card{padding:12px 16px 12px}
.host-card.down{border-color:#5a2e2a;background:#1d1414}
.host-card-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.host-card-head strong{font-size:14px}
.host-card-head small{margin-left:auto;font:10px var(--mono);color:var(--faint)}
.host-gauges{display:grid;gap:8px}
.host-gauges label{display:grid;grid-template-columns:52px 1fr;align-items:center;font:9px var(--mono);color:var(--muted);letter-spacing:.08em}
.host-foot{display:flex;align-items:center;gap:12px;margin-top:10px;font:10px var(--mono);color:var(--faint)}
.host-foot .spark{margin-left:auto}
.src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.src-cell{border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.src-cell:hover{border-color:#30453c}
.src-cell b{font-size:12px}
.src-cell small{font:10px var(--mono);color:var(--faint)}
.src-cell .spark{width:100%}
/* Chế độ TV: ẩn thanh bên / topbar, chữ to hơn */
body.kiosk .rail,body.kiosk .topbar,body.kiosk footer{display:none}
body.kiosk .app-shell{margin-left:0}
body.kiosk main{padding:22px 28px}
body.kiosk .board-tile strong{font-size:52px}
body.kiosk #board-tabs{display:none}
@media(max-width:1050px){.board-split{grid-template-columns:1fr}.wall-group{grid-template-columns:1fr}}
button.chip-sm.mention.dir{border-style:dashed}
.ews-preview{width:100%;height:560px;border:1px solid var(--line);background:#fff;margin-top:12px}
.ews-test{grid-template-columns:1fr}