/* EMM Thịnh Studio — giao diện quản trị (đè lên admin.css): xanh chàm + xanh ngọc, nền trắng xám, thanh bên tối */
:root {
  --pine-50: #eef2ff; --pine-100: #e0e7ff; --pine-600: #4f46e5; --pine-700: #4338ca; --pine-800: #3730a3; --pine-900: #0b1220;
  --gold: #06b6d4; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --bad: #dc2626; --ok: #059669; --warn: #d97706; --bg: #f1f5f9;
  --accent: #4f46e5; --accent2: #06b6d4; --card: #fff; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
}
body { background: var(--bg); font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); } a:hover { color: var(--pine-800); }
.card, .panel, .stat, .kpi, .kpi2, .task, .hub-link, .seg, .paper, .pf, .tabs-card { background: var(--card); border-color: var(--line); }
.card, .panel { border-radius: 16px; box-shadow: var(--shadow); }
.btn { border-radius: 10px; border-color: #cbd5e1; font-weight: 600; } .btn:hover { background: #f8fafc; }
.btn-primary { background: linear-gradient(180deg, #5b52f0, #4338ca); border-color: #4338ca; box-shadow: 0 1px 2px rgba(67,56,202,.35); } .btn-primary:hover { background: #4338ca; }
.btn-danger { border-color: #fecaca; } .btn-warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; } .btn-ok { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.badge { border-radius: 6px; padding: 2px 8px; } .badge.ok { background: #d1fae5; color: #047857; } .badge.warn { background: #fef3c7; color: #b45309; } .badge.bad { background: #fee2e2; color: #b91c1c; } .badge.info { background: #e0e7ff; color: #4338ca; } .badge.muted { background: #f1f5f9; color: #64748b; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(79,70,229,.18); border-color: var(--accent); }
input:not([type=checkbox],[type=radio],[type=file]), select, textarea { border-radius: 10px; border-color: #cbd5e1; }

/* Thanh bên */
.side { background: #0b1220; width: 248px; border-right: 1px solid #111b30; }
.side-brand small { color: #67e8f9; } .side-brand b { letter-spacing: -.01em; }
.side h6 { color: #64748b; letter-spacing: .12em; }
.side nav a { color: #cbd5e1; border-radius: 10px; font-size: 13.5px; } .side nav a:hover { background: #162036; color: #fff; text-decoration: none; }
.side nav a.on { background: linear-gradient(90deg, rgba(79,70,229,.95), rgba(79,70,229,.7)); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.35); }
.side nav a span { flex: 1; } .nav-n { font-style: normal; min-width: 20px; padding: 0 6px; height: 18px; display: inline-grid; place-items: center; border-radius: 99px; background: #f59e0b; color: #1c1917; font-size: 11px; font-weight: 700; }
.side-foot { border-top-color: #162036; } .side-foot a, .side-foot button { color: #94a3b8; } .side-foot a:hover, .side-foot button:hover { color: #fff; }
.ver { color: #64748b; } .ver b { color: #cbd5e1; } .env-dev, .env-local { background: #fde68a; }
.plan-tag { background: rgba(6,182,212,.12); color: #67e8f9; } .up-btn { display: block; margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: #06b6d4; color: #083344; text-align: center; font-weight: 700; text-decoration: none; }
@media (min-width: 1024px) { .main { margin-left: 248px; } }
.bar { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: var(--line); }
.bar h1 { font-size: 1.12rem; letter-spacing: -.01em; } .content { max-width: 1320px; }
.sync-btn { color: #475569; border-radius: 99px; } .sync-btn span { font-weight: 500; font-size: 12px; }
.sync-btn.spin .ico { animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
.seg { border-radius: 12px; } .seg a { border-radius: 9px; } .seg a.on { background: var(--accent); } .seg a i { background: #eef2f7; }
.chip { background: #e0e7ff; color: #3730a3; } .chip b { background: rgba(55,48,163,.14); } .chip:hover { background: #c7d2fe; color: #3730a3; }
.prop-pills a.on { background: var(--accent); }
.table th { background: #f8fafc; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .table td { border-bottom-color: #eef2f7; vertical-align: middle; }
.table.list tbody tr:hover { background: #f8fafc; }
.empty { text-align: center; padding: 28px 8px; }
.flash { border-radius: 12px; border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; } .flash.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .plan-notice { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }

/* Dải đầu trang tổng quan */
.hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; padding: 24px 28px; margin-bottom: 18px; border-radius: 20px; color: #e2e8f0;
  background: radial-gradient(900px 260px at 100% -40%, rgba(6,182,212,.55), transparent 60%), radial-gradient(700px 300px at 0% 120%, rgba(99,102,241,.6), transparent 60%), linear-gradient(135deg, #0f172a, #1e1b4b); }
.hero h2 { margin: 2px 0 6px; font-size: 1.55rem; color: #fff; letter-spacing: -.02em; } .hero p { margin: 0; color: #cbd5e1; max-width: 560px; } .hero small { color: #67e8f9; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.hero .quick { display: flex; gap: 8px; flex-wrap: wrap; } .hero .quick a { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 13px; text-decoration: none; }
.hero .quick a:hover { background: #fff; color: #1e1b4b; } .hero .quick .ico { color: #67e8f9; } .hero .quick a:hover .ico { color: #4f46e5; }
.mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(251,191,36,.18); color: #fcd34d; border: 1px solid rgba(251,191,36,.35); } .mode-pill.live { background: rgba(16,185,129,.18); color: #6ee7b7; border-color: rgba(16,185,129,.4); }

/* KPI */
.kpis4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi2 { border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; gap: 6px; position: relative; overflow: hidden; }
.kpi2 .k-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi2 .k-top small { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.kpi2 .k-ic { background: #eef2ff; color: var(--accent); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin: 0; }
.kpi2 b { font-size: 1.9rem; } .kpi2.alert { background: #fff; border-color: #fecaca; } .kpi2.alert .k-ic { background: #fee2e2; color: var(--bad); }
.kpi2.good .k-ic { background: #d1fae5; color: #047857; } .kpi2.warn2 .k-ic { background: #fef3c7; color: #b45309; }
.kpi2 .k-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi2 .spark { opacity: .9; }
.panel > header { border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; } .panel h2 { font-size: .98rem; } .panel > header a { color: var(--accent); }
.dash-grid { gap: 16px; margin-bottom: 16px; } .dash-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .dash-grid, .dash-grid.three { grid-template-columns: 1fr; } }
.panel.flush { padding: 0; overflow: hidden; } .panel.flush > header { padding: 14px 18px 10px; margin: 0; }

/* Biểu đồ */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut .d-big { font-size: 26px; font-weight: 700; fill: #0f172a; } .donut .d-small { font-size: 11px; fill: #64748b; }
.lgd { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 150px; flex: 1; } .lgd li, .lgd a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); text-decoration: none; padding: 3px 6px; border-radius: 8px; } .lgd a { width: 100%; } .lgd a:hover { background: #f1f5f9; }
.lgd i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .lgd span { flex: 1; color: #475569; } .lgd b { font-variant-numeric: tabular-nums; }
.hbars { display: grid; gap: 9px; } .hb-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 36px; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 13px; padding: 2px 4px; border-radius: 8px; } a.hb-row:hover { background: #f1f5f9; text-decoration: none; }
.hb-l { display: grid; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hb-l small { color: var(--muted); font-size: 11px; } .hb-t { height: 9px; background: #eef2f7; border-radius: 99px; overflow: hidden; } .hb-t i { display: block; height: 100%; border-radius: 99px; } .hb-row b { text-align: right; font-variant-numeric: tabular-nums; }
.trend { width: 100%; height: 220px; display: block; } .trend .gl { stroke: #eef2f7; stroke-width: 1; } .trend .gt { font-size: 10px; fill: #94a3b8; }
.cols2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; } .c2 { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; text-align: center; gap: 3px; } .c2 i { display: block; border-radius: 6px 6px 2px 2px; min-height: 2px; align-self: end; } .c2 small { font-size: 10.5px; color: var(--muted); } .c2-v { font-size: 11px; font-weight: 600; color: #475569; }
.ring .r-t { font-size: 14px; font-weight: 700; fill: #0f172a; } .meter2 { display: inline-block; width: 70px; height: 7px; border-radius: 99px; background: #e2e8f0; overflow: hidden; vertical-align: middle; } .meter2 i { display: block; height: 100%; background: #10b981; border-radius: 99px; } .meter2.warn i { background: #f59e0b; } .meter2.bad i { background: #ef4444; }
.legend-inline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; } .legend-inline i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Danh sách thiết bị */
.dev-cell { display: flex; align-items: center; gap: 12px; min-width: 190px; } .dev-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #eef2ff; color: var(--accent); flex-shrink: 0; }
.dev-cell b { display: block; line-height: 1.2; color: var(--ink); } .dev-cell small { color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; margin-right: 6px; } .dot.ok { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); } .dot.bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); } .dot.warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.risk-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; } .risk-pill i { display: block; width: 40px; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; position: relative; } .risk-pill i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: currentColor; border-radius: 99px; }
.risk-pill.ok { color: #059669; } .risk-pill.warn { color: #d97706; } .risk-pill.bad { color: #dc2626; }
.bulk-bar { display: none; position: sticky; bottom: 12px; z-index: 15; margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: #0f172a; color: #fff; box-shadow: 0 12px 40px rgba(15,23,42,.35); align-items: center; gap: 10px; flex-wrap: wrap; } .bulk-bar.on { display: flex; } .bulk-bar select, .bulk-bar input { width: auto; background: #1e293b; color: #fff; border-color: #334155; } .bulk-bar b { margin-right: auto; }
td.cb, th.cb { width: 34px; } input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.view-toggle { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .view-toggle a { padding: 6px 10px; color: var(--muted); display: grid; place-items: center; } .view-toggle a.on { background: var(--accent); color: #fff; }
.dev-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 16px; }
.dev-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; color: var(--ink); text-decoration: none; } .dev-card:hover { border-color: #a5b4fc; text-decoration: none; transform: translateY(-1px); }
.dev-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }

/* Chi tiết thiết bị */
.dev-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 24px; margin-bottom: 14px; border-radius: 20px; color: #e2e8f0; background: radial-gradient(700px 240px at 100% -30%, rgba(6,182,212,.45), transparent 60%), linear-gradient(135deg, #0f172a, #312e81); }
.dev-hero.bad { background: radial-gradient(700px 240px at 100% -30%, rgba(239,68,68,.45), transparent 60%), linear-gradient(135deg, #0f172a, #3f1d2e); }
.dev-hero h2 { margin: 2px 0 6px; font-size: 1.45rem; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dev-hero small { color: #a5b4fc; } .dev-hero p { margin: 0; color: #cbd5e1; }
.dev-hero .badge { background: rgba(255,255,255,.14); color: #fff; } .dev-hero .badge.ok { background: rgba(16,185,129,.25); color: #6ee7b7; } .dev-hero .badge.bad { background: rgba(239,68,68,.28); color: #fecaca; } .dev-hero .badge.warn { background: rgba(245,158,11,.25); color: #fde68a; }
.hero-nums { display: flex; gap: 10px; flex-wrap: wrap; } .hero-nums > div { padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.08); display: grid; min-width: 96px; } .hero-nums small { color: #a5b4fc; font-size: 11.5px; } .hero-nums b { font-size: 1.25rem; color: #fff; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 14px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; width: max-content; max-width: 100%; }
.tabs a { padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; } .tabs a:hover { color: var(--ink); text-decoration: none; } .tabs a.on { background: var(--accent); color: #fff; } .tabs a i { font-style: normal; background: #e2e8f0; color: #334155; border-radius: 99px; padding: 0 6px; font-size: 11px; } .tabs a.on i { background: rgba(255,255,255,.25); color: #fff; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; } .kv > div { display: grid; padding: 9px 4px; border-bottom: 1px solid #f1f5f9; } .kv small { color: var(--muted); font-size: 11.5px; } .kv span { font-weight: 600; word-break: break-word; }
.cmd-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .cmd { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); } .cmd:hover { border-color: #a5b4fc; background: #f8faff; } .cmd b { display: flex; align-items: center; gap: 8px; } .cmd small { color: var(--muted); font-size: 12px; line-height: 1.35; } .cmd.danger { border-color: #fecaca; } .cmd.danger:hover { background: #fef2f2; border-color: #f87171; } .cmd.danger b { color: var(--bad); }
dialog.dlg { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(15,23,42,.35); } dialog.dlg::backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.dlg form { padding: 20px; display: grid; gap: 12px; } .dlg h3 { margin: 0; font-size: 1.1rem; } .dlg .hint { margin: 0; color: var(--muted); font-size: 13px; } .dlg .warnbox { padding: 10px 12px; border-radius: 12px; background: #fef2f2; color: #991b1b; font-size: 13px; border: 1px solid #fecaca; }
.dlg .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.nc-list { display: grid; gap: 10px; } .nc { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; border-left-width: 4px; } .nc.ADMIN { border-left-color: #ef4444; } .nc.DEVICE { border-left-color: #f59e0b; } .nc.INCOMPATIBLE { border-left-color: #94a3b8; } .nc.TRANSIENT { border-left-color: #6366f1; }
.nc header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .nc code, .code-inline { background: #f1f5f9; padding: 1px 6px; border-radius: 6px; font-size: 12px; } .nc p { margin: 0; color: #475569; font-size: 13px; }
.timeline { display: grid; gap: 0; } .tl { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 0 0 14px; position: relative; } .tl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: #e2e8f0; } .tl:last-child::before { display: none; } .tl i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); margin-top: 3px; } .tl.bad i { border-color: #ef4444; } .tl.ok i { border-color: #10b981; } .tl.warn i { border-color: #f59e0b; } .tl small { color: var(--muted); }
pre.code { margin: 0; padding: 14px 16px; background: #0f172a; color: #e2e8f0; border-radius: 14px; overflow: auto; max-height: 560px; font: 12.5px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; } .jk { color: #93c5fd; } .js { color: #86efac; } .jn { color: #fcd34d; }
textarea.mono { font: 12.5px/1.5 ui-monospace, Consolas, monospace; tab-size: 2; }

/* Trình soạn chính sách */
.pe { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 860px) { .pe { grid-template-columns: 1fr; } }
.pe-nav { position: sticky; top: 74px; display: grid; gap: 4px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; } .pe-nav button, .pe-nav a { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 10px; font: inherit; font-weight: 600; color: #475569; cursor: pointer; text-decoration: none; display: flex; justify-content: space-between; gap: 8px; } .pe-nav button:hover, .pe-nav a:hover { background: #f1f5f9; text-decoration: none; } .pe-nav .on { background: var(--accent); color: #fff; } .pe-nav small { font-weight: 500; opacity: .7; }
@media (max-width: 860px) { .pe-nav { position: static; grid-auto-flow: column; overflow-x: auto; } }
.pe-sec { display: none; } .pe-sec.on { display: block; }
.pe-group { margin-bottom: 18px; } .pe-group > h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pe-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f5f9; } .pe-row:last-child { border: 0; } .pe-row label { font-weight: 600; } .pe-row small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; } .pe-row.set label::after { content: " ●"; color: var(--accent); font-size: 10px; }
@media (max-width: 640px) { .pe-row { grid-template-columns: 1fr; gap: 6px; } }
.tri { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; } .tri label { padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: #64748b; background: #fff; border-right: 1px solid #e2e8f0; } .tri label:last-child { border: 0; } .tri input { position: absolute; opacity: 0; } .tri input:checked + span { color: #fff; } .tri label:has(input:checked) { background: var(--accent); color: #fff; } .tri label:has(input[value="0"]:checked) { background: #475569; } .tri label:has(input[value=""]:checked) { background: #e2e8f0; color: #475569; }
.preset-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .preset { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; } .preset:hover { border-color: #818cf8; box-shadow: 0 6px 20px rgba(79,70,229,.12); } .preset b { color: var(--ink); } .preset small { color: var(--muted); line-height: 1.4; }
.app-table input, .app-table select { padding: 5px 8px; font-size: 13px; }
.diff-add { background: #ecfdf5; } .diff-del { background: #fef2f2; } .diff td { vertical-align: top; font: 12.5px/1.5 ui-monospace, Consolas, monospace; word-break: break-all; }
.draft-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; margin-bottom: 14px; } .draft-bar b { margin-right: auto; }

/* QR & đăng ký */
.qr-box { display: grid; place-items: center; gap: 10px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; } .qr-box svg:not(.ico) { width: min(100%, 300px); height: auto; image-rendering: pixelated; } .qr-box code { font-size: 12.5px; background: #f1f5f9; padding: 4px 8px; border-radius: 8px; word-break: break-all; }
.token-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; } @media (max-width: 640px) { .token-card { grid-template-columns: 1fr; } }
.steps { counter-reset: s; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; } .steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e0e7ff; color: var(--accent); font-weight: 700; }

/* Khác */
.alert-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid #f1f5f9; } .alert-row:last-child { border: 0; } .alert-row i { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; } .alert-row.bad i { background: #ef4444; } .alert-row.info i { background: #6366f1; } .alert-row small { color: var(--muted); }
.conn-card { display: grid; gap: 14px; } .conn-state { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line); } .conn-state.live { background: #ecfdf5; border-color: #6ee7b7; } .conn-state.sim { background: #fffbeb; border-color: #fcd34d; } .conn-state .ico { width: 28px; height: 28px; }
.help-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #475569; } .help-list code { background: #f1f5f9; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.auth { background: radial-gradient(900px 400px at 10% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(800px 400px at 100% 110%, rgba(6,182,212,.3), transparent 60%), #0b1220; }
.auth-box { border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.4); } .auth-box .side-brand { color: var(--ink); } .auth-box .side-brand small { color: var(--muted); } .demo-line button { color: var(--accent); }
.credit { color: #94a3b8; } .credit a { color: #64748b; }
.sticky-actions { position: sticky; bottom: 0; z-index: 10; background: linear-gradient(180deg, rgba(241,245,249,0), var(--bg) 40%); padding: 14px 0 6px; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.stack-sm { display: grid; gap: 6px; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .gap8 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media print { .side, .bar, .no-print, .credit, .tabs { display: none !important; } .main { margin: 0 !important; } body { background: #fff; } .card, .panel { box-shadow: none; } }
@media (max-width: 640px) { .hero { padding: 18px; } .hero h2 { font-size: 1.25rem; } .content { padding: 12px; } }
.filter-sel { margin-bottom: 12px; } .filter-sel select, .gap8 > select, .inline-form select { width: auto; min-width: 150px; max-width: 100%; }
.dev-cell { color: var(--ink); text-decoration: none; } .dev-cell:hover { text-decoration: none; color: var(--accent); }
@media (max-width: 860px) { .pe-nav button, .pe-nav a { white-space: nowrap; flex: none; } .pe-nav { gap: 6px; } }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 12px; } .lang-switch a { color: inherit; opacity: .6; text-decoration: none; } .lang-switch a:hover { opacity: 1; } .lang-switch i { font-style: normal; opacity: .35; } .lang-switch.dark { color: #cbd5e1; } .lang-switch.dark b { color: #67e8f9; } .lang-switch b { color: var(--accent); }