/* VDA Platform 4 — design system "Nebula" (4.0.0). Không phụ thuộc bên ngoài; CSP 'self'.
   Style cả component mới (n-*) lẫn bộ class cũ (card, btn, form-control, table, badge, grid…) để mọi trang cũ đổi giao diện. */
:root{
  --bg:#070b16;--bg-2:#0b1222;--panel:#0f1729;--panel-2:#131d33;--elev:#17223b;--line:#1f2b45;--line-2:#2a3a5c;
  --text:#e6ecf8;--text-2:#a9b6d3;--muted:#7383a6;--brand:#7c5cff;--brand-2:#22d3ee;--brand-3:#3b82f6;
  --ok:#22c55e;--ok-bg:rgba(34,197,94,.12);--warn:#f59e0b;--warn-bg:rgba(245,158,11,.12);--bad:#f43f5e;--bad-bg:rgba(244,63,94,.12);--info:#38bdf8;--info-bg:rgba(56,189,248,.12);
  --grad:linear-gradient(135deg,#7c5cff 0%,#3b82f6 55%,#22d3ee 100%);
  --glow:0 0 0 1px rgba(124,92,255,.35),0 8px 30px -10px rgba(124,92,255,.55);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  --r:14px;--r-sm:10px;--r-lg:20px;--side:264px;--side-mini:76px;--top:64px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f6fb;--bg-2:#eef1f8;--panel:#ffffff;--panel-2:#f8faff;--elev:#ffffff;--line:#e3e8f2;--line-2:#d3dbea;
  --text:#0f172a;--text-2:#334155;--muted:#64748b;--shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -20px rgba(15,23,42,.25);
  --ok-bg:#e9f9ef;--warn-bg:#fff6e5;--bad-bg:#ffecef;--info-bg:#e8f6fd;color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:14px/1.55 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 500px at 85% -10%,rgba(124,92,255,.16),transparent 60%),radial-gradient(700px 420px at -5% 110%,rgba(34,211,238,.10),transparent 60%)}
:root[data-theme="light"] body::before{opacity:.5}
a{color:var(--brand-2);text-decoration:none}a:hover{text-decoration:underline}
:root[data-theme="light"] a{color:var(--brand-3)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25;letter-spacing:-.01em}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}
small,.muted,.cell-sub{color:var(--muted)}
code,kbd,.mono{font-family:var(--mono);font-size:12.5px}
code{background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
kbd{border:1px solid var(--line-2);border-bottom-width:2px;padding:0 6px;border-radius:6px;background:var(--panel-2);color:var(--text-2)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}
::selection{background:rgba(124,92,255,.35)}

/* ---------- Shell ---------- */
.app-shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
body.sidebar-collapsed .app-shell{grid-template-columns:var(--side-mini) 1fr}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:linear-gradient(180deg,rgba(15,23,41,.92),rgba(11,18,34,.92));border-right:1px solid var(--line);backdrop-filter:blur(14px);overflow:auto}
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.9)}
.cp-brand{padding:6px 8px 14px}
.cp-brand-link{display:flex;align-items:center;gap:12px;color:var(--text)!important;text-decoration:none!important}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;box-shadow:var(--glow);flex:none}
.cp-brand-copy{display:flex;flex-direction:column;line-height:1.15}
.cp-brand-copy b{font-size:14px}.cp-brand-copy strong{font-size:12px;color:var(--text-2);font-weight:600}.cp-brand-copy small{font-size:11px}
.n-nav-group{margin-top:10px}
.n-nav-label{padding:8px 12px 4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.n-nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--text-2);font-weight:550;text-decoration:none;transition:background .15s,color .15s}
.n-nav a:hover{background:var(--panel-2);color:var(--text)}
.n-nav a.active{background:linear-gradient(90deg,rgba(124,92,255,.22),rgba(34,211,238,.06));color:var(--text);box-shadow:inset 2px 0 0 var(--brand)}
.n-nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.n-nav .n-new{margin-left:auto;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--grad);color:#fff}
body.sidebar-collapsed .cp-brand-copy,body.sidebar-collapsed .n-nav-label,body.sidebar-collapsed .n-nav span,body.sidebar-collapsed .n-new,body.sidebar-collapsed .sidebar-footer .n-user-meta{display:none}
body.sidebar-collapsed .n-nav a{justify-content:center}
.sidebar-footer{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.n-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);font-weight:700;font-size:12px;flex:none}
.n-user-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}.n-user-meta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-user-meta small{font-size:11px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 24px;background:rgba(7,11,22,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .topbar{background:rgba(244,246,251,.8)}
.page-heading{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.page-heading small{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.page-heading h1{font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.cp-global-search{display:flex;align-items:center;gap:10px;min-width:260px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;font:inherit}
.cp-global-search:hover{border-color:var(--line-2)}
.cp-global-search kbd{margin-left:auto}
.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text-2);cursor:pointer}
.icon-button:hover{color:var(--text);border-color:var(--line-2)}
.icon-button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-menu{display:none}
.n-env-chips{display:flex;gap:6px}
.n-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--text-2);white-space:nowrap}
.n-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(115,131,166,.15)}
.n-dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}.n-dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(245,158,11,.18)}.n-dot.bad{background:var(--bad);box-shadow:0 0 0 3px rgba(244,63,94,.18)}
.n-dot.pulse{animation:npulse 1.6s infinite}
@keyframes npulse{50%{box-shadow:0 0 0 7px rgba(124,92,255,0)}}
.content,.page-stack{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1440px;width:100%}
.n-page-head,.page-head,.page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.n-page-head p{margin:.2em 0 0;color:var(--text-2)}
.eyebrow,.n-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)}
.n-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.06) 60%,transparent),var(--panel)}
.n-hero h1{font-size:26px;margin:.2em 0}
.n-hero p{color:var(--text-2);max-width:760px;margin:0}
.n-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:var(--grad);filter:blur(60px);opacity:.25}

/* ---------- Grid ---------- */
.grid,.n-grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4,.cp-metric-grid,.social300-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.n-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}

/* ---------- Card ---------- */
.card,.n-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-header,.n-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.card-header h2,.card-header h3,.n-card-head h2,.n-card-head h3{margin:0;font-size:15px}
.card-body,.n-card-body{padding:18px}
.n-card.glow{box-shadow:var(--glow)}
.n-kpi,.cp-kpi{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative;overflow:hidden}
.n-kpi .n-kpi-label{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.n-kpi .n-kpi-value{font-size:28px;font-weight:750;letter-spacing:-.02em}
.n-kpi .n-kpi-foot{font-size:12px;color:var(--text-2)}
.n-kpi::after{content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;background:var(--grad);opacity:.08}
.cp-kpi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-2)}

/* ---------- Buttons ---------- */
.btn,.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);font:600 13.5px var(--font);cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:transform .08s,box-shadow .15s,background .15s}
.btn:hover,.n-btn:hover{background:var(--elev);border-color:var(--muted)}
.btn:active,.n-btn:active{transform:translateY(1px)}
.btn:disabled,.n-btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary,.n-btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 22px -10px rgba(124,92,255,.9)}
.btn-primary:hover,.n-btn.primary:hover{filter:brightness(1.08);background:var(--grad)}
.btn-secondary{background:var(--panel-2)}
.btn-danger,.n-btn.danger{background:var(--bad-bg);border-color:rgba(244,63,94,.45);color:#fda4af}
:root[data-theme="light"] .btn-danger{color:#be123c}
.btn-sm,.n-btn.sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:8px}
.n-btn svg,.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-actions,.n-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Forms ---------- */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label,.n-label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.form-control,.n-input,select,textarea,input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],input[type=datetime-local]{width:100%;min-height:40px;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical}
.form-control:focus,.n-input:focus,select:focus,textarea:focus,input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,92,255,.25)}
.w-auto{width:auto}
.checkline{display:flex;gap:8px;align-items:center}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:16px;height:16px}
.filter-form,.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

/* ---------- Table ---------- */
.table-wrap,.n-table-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line)}
.card .table-wrap{border:0;border-radius:0}
.table,.n-table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.n-table th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td,.n-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td,.n-table tr:last-child td{border-bottom:0}
.table tbody tr:hover,.n-table tbody tr:hover{background:rgba(124,92,255,.05)}
.empty-cell{text-align:center;color:var(--muted);padding:28px!important}

/* ---------- Badge ---------- */
.badge,.n-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2);white-space:nowrap}
.badge-success,.n-badge.ok{background:var(--ok-bg);border-color:rgba(34,197,94,.4);color:#4ade80}
.badge-warning,.n-badge.warn{background:var(--warn-bg);border-color:rgba(245,158,11,.4);color:#fbbf24}
.badge-danger,.n-badge.bad{background:var(--bad-bg);border-color:rgba(244,63,94,.4);color:#fb7185}
.badge-info,.badge-primary,.n-badge.info{background:var(--info-bg);border-color:rgba(56,189,248,.4);color:#7dd3fc}
:root[data-theme="light"] .badge-success,:root[data-theme="light"] .n-badge.ok{color:#15803d}
:root[data-theme="light"] .badge-warning,:root[data-theme="light"] .n-badge.warn{color:#b45309}
:root[data-theme="light"] .badge-danger,:root[data-theme="light"] .n-badge.bad{color:#be123c}
:root[data-theme="light"] .badge-info,:root[data-theme="light"] .n-badge.info{color:#0369a1}

/* ---------- Alert / toast ---------- */
.alert,.n-alert{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--panel-2)}
.alert-success,.n-alert.ok{background:var(--ok-bg);border-color:rgba(34,197,94,.4)}
.alert-warning,.n-alert.warn,.warn{background:var(--warn-bg);border-color:rgba(245,158,11,.4)}
.alert-danger,.n-alert.bad{background:var(--bad-bg);border-color:rgba(244,63,94,.4)}
.n-toasts{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:420px}
.n-toast{padding:12px 16px;border-radius:12px;background:var(--elev);border:1px solid var(--line-2);box-shadow:var(--shadow);animation:nin .25s ease-out}
.n-toast.ok{border-color:rgba(34,197,94,.5)}.n-toast.bad{border-color:rgba(244,63,94,.5)}
@keyframes nin{from{opacity:0;transform:translateY(8px)}}

/* ---------- Timeline (job steps) ---------- */
.timeline,.n-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.n-step{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:12px 0}
.n-step::before{content:"";position:absolute;left:15px;top:40px;bottom:-12px;width:2px;background:var(--line)}
.n-step:last-child::before{display:none}
.n-step-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-2);background:var(--panel);font-size:13px;font-weight:800;color:var(--muted)}
.n-step.done .n-step-icon{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.n-step.running .n-step-icon{border-color:var(--brand);color:#fff;background:var(--grad);box-shadow:var(--glow);animation:npulse 1.6s infinite}
.n-step.failed .n-step-icon{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.n-step.done::before{background:var(--ok)}
.n-step-title{font-weight:650}.n-step-detail{font-size:12.5px;color:var(--text-2);word-break:break-word}
.n-step-time{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---------- Dropzone ---------- */
.n-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:190px;padding:28px;border-radius:var(--r-lg);border:2px dashed var(--line-2);background:linear-gradient(180deg,rgba(124,92,255,.06),transparent);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.n-drop:hover,.n-drop.over{border-color:var(--brand);background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(34,211,238,.04))}
.n-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.n-drop-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad);box-shadow:var(--glow)}
.n-drop-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2}
.n-progress{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.n-progress>i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.n-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:13px}
.n-kv dt{color:var(--muted)}.n-kv dd{margin:0;word-break:break-all}

/* ---------- Gate list ---------- */
.n-gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.n-gates li{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:4px 0;color:var(--text-2)}
.n-gates li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:800;background:var(--ok-bg);color:var(--ok);flex:none}
.n-gates li.block::before{content:"!";background:var(--bad-bg);color:var(--bad)}
.n-gates li.block{color:var(--text)}

/* ---------- Version matrix ---------- */
.n-env{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)}
.n-env-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.n-ver{font:700 15px var(--mono);letter-spacing:-.01em}
.n-arrow{color:var(--muted);margin:0 6px}

/* ---------- Dialog ---------- */
dialog{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--elev);color:var(--text);padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(3,6,15,.6);backdrop-filter:blur(4px)}
.n-dialog-body{padding:22px}
.cp-search-panel{padding:20px}
.cp-search-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.n-palette-list{list-style:none;margin:10px 0 0;padding:0;max-height:320px;overflow:auto}
.n-palette-list a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.n-palette-list a:hover,.n-palette-list a.sel{background:var(--panel-2)}

/* ---------- Guest (login) ---------- */
.guest-shell{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:24px}
.guest-card{width:100%;max-width:420px;padding:32px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);box-shadow:var(--glow)}
.guest-card .brand-mark{margin-bottom:18px;width:48px;height:48px}

/* ---------- Misc / legacy helpers ---------- */
.mb-2{margin-bottom:12px}.wrap{flex-wrap:wrap}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);width:max-content}
.tabs a{padding:7px 14px;border-radius:9px;color:var(--text-2);text-decoration:none}.tabs a.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.cp-empty-large,.cp-positive-empty{padding:36px;text-align:center;color:var(--muted)}
.n-skel{background:linear-gradient(90deg,var(--panel-2),var(--elev),var(--panel-2));background-size:200% 100%;animation:nsk 1.2s infinite;border-radius:8px;min-height:14px}
@keyframes nsk{to{background-position:-200% 0}}
.n-sep{height:1px;background:var(--line);margin:4px 0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.grid-4,.cp-metric-grid,.social300-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.n-split{grid-template-columns:1fr}.cp-global-search{min-width:0}.n-env-chips{display:none}}
@media (max-width:820px){
  .app-shell,body.sidebar-collapsed .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:var(--side);transform:translateX(-102%);transition:transform .2s}
  .sidebar.open{transform:none;box-shadow:30px 0 80px rgba(0,0,0,.5)}
  .mobile-menu{display:inline-grid}
  .grid-2,.grid-3,.n-gates{grid-template-columns:1fr}
  .topbar{padding:0 14px}.content,.page-stack{padding:16px}
  .cp-global-search span{display:none}.cp-global-search{min-width:38px;width:38px;padding:0;justify-content:center}.cp-global-search kbd{display:none}
}
@media (max-width:520px){.grid-4,.cp-metric-grid,.social300-kpis{grid-template-columns:1fr}.n-hero{padding:20px}.n-hero h1{font-size:21px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Cầu nối cho trang cũ (Tenant/Runtime, Social, Dashboard cũ): style theo vai trò, không cần CSS cũ ---------- */
.alert-info{background:var(--info-bg);border-color:rgba(56,189,248,.4)}
.callout,.cp-attention{padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--panel-2)}
.cp-attention{border-color:rgba(245,158,11,.4);background:var(--warn-bg)}
.cell-title,.detail-title,.runtime-config-title,.runtime-env-name{font-weight:650;color:var(--text)}
.cp-page-head,.detail-head,.runtime-manager-head,.runtime220-env-head,.runtime221-title-row,.runtime221-history-head,.runtime221-promotion-head,.provider-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cp-dashboard-grid,.cp-kpi-grid,.provider-grid,.runtime220-grid,.runtime221-grid,.social300-platforms{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cp-incident-value{font-size:24px;font-weight:750}
.empty{color:var(--muted);text-align:center;padding:24px}
.inline-form,.runtime220-actions,.runtime221-promotion-actions,.runtime220-deploy-form,.runtime221-deploy-form,.runtime221-promote-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.is-success{color:var(--ok)}.off{opacity:.55}
.provider-card,.runtime220-env-card,.runtime221-env-card,.runtime-manager,.runtime-manager-221,.runtime-config,.runtime221-config,.runtime221-promotion,.social300-platform,.social300-system,.social300-ops,.social300-webhook-guide,.runtime-latest{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)}
.runtime-manager-error,.runtime221-blocked-text,.runtime302-job-error{color:#fb7185;font-size:12.5px}
.runtime220-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:12.5px;color:var(--text-2)}
.runtime220-health,.runtime220-last,.runtime220-legend,.runtime221-legend,.runtime220-selected-note,.runtime221-promote-note{font-size:12.5px;color:var(--text-2)}
.runtime220-version-select{min-width:240px}
.runtime221-flow-badge,.runtime221-version-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:700 11.5px var(--mono);background:var(--info-bg);border:1px solid rgba(56,189,248,.4);color:#7dd3fc}
.runtime221-gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.runtime221-gate{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-2)}
.runtime221-uat-confirm{display:flex;gap:8px;align-items:center;font-size:12.5px}
.runtime221-history{display:flex;flex-direction:column;gap:8px}
.runtime302-job{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.runtime302-job.success{border-color:rgba(34,197,94,.4)}.runtime302-job.failed{border-color:rgba(244,63,94,.45)}.runtime302-job.queued,.runtime302-job.running,.runtime302-job.cutover{border-color:rgba(124,92,255,.5)}
.social300-hero{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.06) 60%,transparent),var(--panel)}
.social300-steps{display:flex;gap:8px;flex-wrap:wrap}.social300-steps span{padding:4px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:12px}
.status-cluster{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge-muted{background:var(--panel-2);color:var(--text-2)}
.btn-ghost{background:transparent;border-color:transparent}
@media (max-width:820px){.runtime221-gates{grid-template-columns:1fr}}