/*
 * SiSu – bộ CSS của TRANG TĨNH dùng chung (docs/ThietKe-ThuVienGiaoDien.md mục 4): wizard cài đặt, Quản trị hệ thống của nút, trang đăng nhập / 2 lớp / lỗi / cài đặt
 * của Control Panel và SiSuEInvoice. Không cần MudBlazor / Bootstrap; không khai màu – mọi giá trị lấy từ token --sn-* (sisu-tokens.css) theo hồ sơ nhận diện của trang
 * (<html data-sn-brand="…">). Trang dùng bộ này đặt <body class="cx">; lớp: .cx-*. Nạp kèm sisu-fonts.css khi hồ sơ dùng phông tự host.
 */

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cx {
    margin: 0;
    min-height: 100vh;
    background: var(--sn-page-bg);
    color: var(--sn-text);
    font-family: var(--sn-font);
    font-size: var(--sn-fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.cx h1, .cx h2, .cx h3 { margin: 0; font-weight: 600; line-height: 1.3; color: var(--sn-text); }
.cx h1 { font-size: var(--sn-fs-xl); }
.cx h2 { font-size: var(--sn-fs-lg); }
.cx h3 { font-size: var(--sn-fs-md); }
.cx p { margin: 0; }
.cx a { color: var(--sn-primary); text-decoration: none; }
.cx a:hover { color: var(--sn-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.cx code, .cx-mono { font-family: var(--sn-font-mono); font-size: .92em; }
.cx code { background: var(--sn-surface-muted); border-radius: 6px; padding: 1px 6px; color: var(--sn-primary-text); }
.cx :focus-visible { outline: none; box-shadow: var(--sn-focus); border-radius: var(--sn-radius-sm); }
/* Blazor focus tiêu đề sau điều hướng (FocusOnNavigate) – không vẽ vòng focus lên tiêu đề */
.cx h1:focus, .cx h1:focus-visible { outline: none; box-shadow: none; }
.cx input[type="checkbox"], .cx input[type="radio"] { accent-color: var(--sn-primary); width: 18px; height: 18px; cursor: pointer; }
.cx-icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.cx-icon-sm { width: 16px; height: 16px; }
.cx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bố cục: trang giữa (cài đặt, đăng nhập) ---------- */
.cx-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--sn-space-6) var(--sn-space-4); }
.cx-center-inner { width: 100%; max-width: 680px; }
.cx-center-narrow { max-width: 440px; }
.cx-brand-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--sn-space-2); margin-bottom: var(--sn-space-5); text-align: center; }
.cx-mark {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: var(--sn-primary); color: var(--sn-on-primary); font-weight: 600; font-size: 20px; box-shadow: var(--sn-shadow);
}
.cx-mark-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; box-shadow: none; }
.cx-brand-name { font-weight: 600; font-size: var(--sn-fs-lg); }
.cx-brand-sub { color: var(--sn-text-muted); font-size: var(--sn-fs-sm); }
/* Logo chữ SiSuNext (bộ nhận diện – docs/ThietKe-NhanDienThuongHieu.md): <picture> bản sáng + bản nền tối (-reverse) theo prefers-color-scheme */
.cx-logo { display: block; height: 28px; width: auto; max-width: 100%; }
.cx-logo-sm { height: 20px; }
.cx-brand-lockup .cx-logo { height: 40px; margin-bottom: var(--sn-space-1); }
.cx-footnote { margin-top: var(--sn-space-5); text-align: center; color: var(--sn-text-muted); font-size: var(--sn-fs-xs); }

/* ---------- Bố cục: quản trị (thanh trên + menu trái) ---------- */
.cx-topbar {
    position: sticky; top: 0; z-index: 10; height: 60px; display: flex; align-items: center; gap: var(--sn-space-3);
    padding: 0 var(--sn-space-4h); background: color-mix(in srgb, var(--sn-page-bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--sn-border);
}
.cx-topbar-brand { display: flex; align-items: center; gap: var(--sn-space-2); color: var(--sn-text) !important; font-weight: 600; text-decoration: none !important; }
.cx-topbar-chip { font-size: var(--sn-fs-xs); font-weight: 500; color: var(--sn-primary-text); background: var(--sn-primary-soft); padding: 2px 10px; border-radius: var(--sn-radius-pill); }
.cx-topbar-user { margin-left: auto; display: flex; align-items: center; gap: var(--sn-space-2); font-size: var(--sn-fs-sm); color: var(--sn-text-secondary); }
.cx-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sn-primary-soft); color: var(--sn-primary-text); font-weight: 600; font-size: var(--sn-fs-sm); }
.cx-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.cx-nav { padding: var(--sn-space-4h) var(--sn-space-3); display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--sn-border); }
.cx-nav a {
    display: flex; align-items: center; gap: var(--sn-space-3); padding: 9px var(--sn-space-3); border-radius: var(--sn-radius-sm);
    color: var(--sn-text-secondary); font-weight: 500; font-size: var(--sn-fs-sm); text-decoration: none; transition: background var(--sn-dur), color var(--sn-dur);
}
.cx-nav a:hover { background: var(--sn-surface-hover); color: var(--sn-text); text-decoration: none; }
.cx-nav a.active { background: var(--sn-primary-soft); color: var(--sn-primary-text); }
.cx-nav { position: sticky; top: 60px; height: calc(100vh - 60px); }
.cx-nav-note {
    margin-top: auto; display: flex; flex-direction: column; gap: var(--sn-space-2); padding: var(--sn-space-3);
    border-radius: var(--sn-radius); background: var(--sn-surface-muted); border: 1px solid var(--sn-border);
}
.cx-nav-note-head { display: flex; align-items: center; gap: 6px; font-size: var(--sn-fs-xs); font-weight: 600; color: var(--sn-text-secondary); }
.cx-nav-note-head .cx-icon { color: var(--sn-primary); }
.cx-nav-note-text { font-size: var(--sn-fs-xs); line-height: 1.5; color: var(--sn-text-muted); }
.cx-nav .cx-nav-note .cx-btn { justify-content: space-between; color: var(--sn-text-secondary) !important; padding: 0 12px; }
.cx-nav .cx-nav-note .cx-btn:hover { background: var(--sn-surface); color: var(--sn-primary-text) !important; text-decoration: none; }
.cx-main { padding: var(--sn-space-5) var(--sn-space-6) var(--sn-space-6); min-width: 0; animation: cx-enter 260ms var(--sn-ease); }
.cx-main-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sn-space-4h); }

@media (max-width: 959.98px) {
    .cx-shell { grid-template-columns: 1fr; }
    .cx-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--sn-border); padding: var(--sn-space-2) var(--sn-space-3); }
    .cx-nav a { white-space: nowrap; }
    .cx-nav { position: static; height: auto; }
    .cx-nav-note { display: none; }
    .cx-main { padding: var(--sn-space-4h) var(--sn-space-4) var(--sn-space-6); }
    .cx-topbar { padding: 0 var(--sn-space-4); }
    .cx-hide-mobile { display: none !important; }
}

/* ---------- Đầu trang ---------- */
.cx-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sn-space-3) var(--sn-space-4); }
.cx-page-head-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--sn-space-1); }
.cx-page-head h1 { font-size: var(--sn-fs-2xl); letter-spacing: -.01em; }
.cx-page-head p { color: var(--sn-text-secondary); max-width: 760px; }
.cx-back { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sn-fs-sm); color: var(--sn-text-muted) !important; }
.cx-page-actions { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); }

/* ---------- Thẻ ---------- */
.cx-card { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow); overflow: hidden; }
.cx-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-4) var(--sn-space-4h); border-bottom: 1px solid var(--sn-border); }
.cx-card-head > .cx-icon { color: var(--sn-primary); }
.cx-card-head p, .cx-card-aside { margin-left: auto; color: var(--sn-text-muted); font-size: var(--sn-fs-sm); }
.cx-card-body { padding: var(--sn-space-4h); display: flex; flex-direction: column; gap: var(--sn-space-4); }
.cx-card-body.cx-flush { padding: 0; gap: 0; }
.cx-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-2); padding: var(--sn-space-4) var(--sn-space-4h); background: var(--sn-surface-muted); border-top: 1px solid var(--sn-border); }
.cx-card-hero { padding: var(--sn-space-6) var(--sn-space-5); }

/* ---------- Lưới / khoảng cách ---------- */
.cx-grid { display: grid; gap: var(--sn-space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cx-grid > * { grid-column: span 12; min-width: 0; }
.cx-span-3 { grid-column: span 3 !important; }
.cx-span-4 { grid-column: span 4 !important; }
.cx-span-5 { grid-column: span 5 !important; }
.cx-span-6 { grid-column: span 6 !important; }
.cx-span-7 { grid-column: span 7 !important; }
.cx-span-8 { grid-column: span 8 !important; }
@media (max-width: 959.98px) { .cx-grid > * { grid-column: span 12 !important; } }
.cx-stack { display: flex; flex-direction: column; gap: var(--sn-space-4); }
.cx-stack-sm { display: flex; flex-direction: column; gap: var(--sn-space-2); }
.cx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-2); }
.cx-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sn-space-3); }
.cx-push { margin-left: auto; }
.cx-muted { color: var(--sn-text-muted); }
.cx-text-2 { color: var(--sn-text-secondary); }
.cx-small { font-size: var(--sn-fs-sm); }
.cx-xs { font-size: var(--sn-fs-xs); }
.cx-strong { font-weight: 600; }
.cx-danger-text { color: var(--sn-error); }
.cx-nowrap { white-space: nowrap; }
.cx-break { word-break: break-all; }
.cx-end { text-align: right; }
.cx-divider { height: 1px; background: var(--sn-border); border: 0; margin: 0; }
.cx-upper { text-transform: uppercase; }
.cx-gap-lg { gap: var(--sn-space-5); }
.cx-center-text { text-align: center; align-items: center; }
.cx-w-sm { max-width: 260px; }
.cx-card > .cx-alert { margin: var(--sn-space-4h) var(--sn-space-4h) 0; }
.cx details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cx details > summary::before { content: "▸"; transition: transform var(--sn-dur); }
.cx details[open] > summary::before { transform: rotate(90deg); }
.cx details > .cx-log { margin-top: var(--sn-space-2); }

/* ---------- Form ---------- */
.cx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-label { font-size: var(--sn-fs-sm); font-weight: 500; color: var(--sn-text-secondary); }
.cx-hint { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); }
.cx-error, .cx .validation-message { font-size: var(--sn-fs-xs); color: var(--sn-error); }
.cx-input, .cx-select, .cx-textarea {
    width: 100%; min-height: var(--sn-control-h); padding: 9px 14px; font: inherit; color: var(--sn-text);
    background: var(--sn-surface); border: 1px solid var(--sn-border-strong); border-radius: var(--sn-radius);
    transition: border-color var(--sn-dur), box-shadow var(--sn-dur), background var(--sn-dur);
}
.cx-input::placeholder { color: var(--sn-text-muted); opacity: .8; }
.cx-input:hover, .cx-select:hover { border-color: var(--sn-text-muted); }
.cx-input:focus, .cx-select:focus, .cx-textarea:focus { outline: none; border-color: var(--sn-primary); box-shadow: var(--sn-focus); }
.cx-input[readonly] { background: var(--sn-surface-muted); color: var(--sn-text-secondary); }
.cx-input.invalid, .cx-input:user-invalid { border-color: var(--sn-error-fill); }
.cx-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2378716c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.cx-input-group { display: flex; align-items: stretch; }
.cx-input-group .cx-addon {
    display: flex; align-items: center; padding: 0 12px; font-family: var(--sn-font-mono); font-size: var(--sn-fs-sm); color: var(--sn-text-secondary);
    background: var(--sn-surface-muted); border: 1px solid var(--sn-border-strong); border-right: 0; border-radius: var(--sn-radius) 0 0 var(--sn-radius);
    max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-input-group .cx-input { border-radius: 0 var(--sn-radius) var(--sn-radius) 0; }
.cx-check { display: flex; align-items: flex-start; gap: var(--sn-space-3); cursor: pointer; font-size: var(--sn-fs-sm); color: var(--sn-text-secondary); }
.cx-check input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--sn-primary); flex: none; }
.cx .cx-switch input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--sn-border-strong); position: relative; transition: background var(--sn-dur); margin: 0; cursor: pointer; }
.cx .cx-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--sn-dur) var(--sn-ease); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); }
.cx .cx-switch input:checked { background: var(--sn-primary); }
.cx .cx-switch input:checked::after { transform: translateX(16px); }

/* Lựa chọn dạng thẻ (radio / checkbox lớn) */
.cx-choices { display: grid; gap: var(--sn-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cx-choice {
    position: relative; display: flex; gap: var(--sn-space-3); padding: var(--sn-space-4); cursor: pointer; border-radius: var(--sn-radius);
    border: 1.5px solid var(--sn-border); background: var(--sn-surface); transition: border-color var(--sn-dur), background var(--sn-dur), transform var(--sn-dur) var(--sn-ease);
}
.cx-choices-col { grid-template-columns: 1fr; }
.cx-card-danger { border-color: color-mix(in srgb, var(--sn-error-fill) 35%, var(--sn-border)); }
.cx-card-danger > .cx-card-head > .cx-icon { color: var(--sn-error-fill); }
.cx-code-chip { display: inline-block; vertical-align: middle; margin-left: var(--sn-space-2); font-family: var(--sn-font-mono); font-size: var(--sn-fs-sm); font-weight: 500; padding: 2px 10px; border-radius: var(--sn-radius-sm); background: var(--sn-surface-muted); color: var(--sn-text-secondary); }
.cx-cell-sub { display: block; }
.cx-choice:hover { border-color: var(--sn-border-strong); background: var(--sn-surface-hover); }
.cx-choice:has(input:checked) { border-color: var(--sn-primary); background: var(--sn-primary-soft); }
.cx-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cx-choice input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--sn-primary); flex: none; }
.cx-choice-title { display: block; font-weight: 600; font-size: var(--sn-fs-sm); color: var(--sn-text); }
.cx-choice-text { display: block; font-size: var(--sn-fs-xs); color: var(--sn-text-secondary); margin-top: 2px; }
.cx-choice-badge { position: absolute; top: -9px; right: 12px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--sn-radius-pill); background: var(--sn-primary); color: var(--sn-on-primary); }

/* ---------- Nút ---------- */
.cx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-space-2); min-height: var(--sn-control-h); padding: 0 18px;
    font: inherit; font-weight: 500; font-size: var(--sn-fs-sm); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important;
    color: var(--sn-text) !important; background: var(--sn-surface); border: 1px solid var(--sn-border-strong); border-radius: var(--sn-radius-pill);
    transition: background var(--sn-dur), border-color var(--sn-dur), transform var(--sn-dur) var(--sn-ease), box-shadow var(--sn-dur);
}
.cx-btn:hover { background: var(--sn-surface-hover); border-color: var(--sn-text-muted); }
.cx-btn:active { transform: scale(.98); }
.cx-btn:disabled, .cx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.cx-btn-primary { background: var(--sn-primary); border-color: var(--sn-primary); color: var(--sn-on-primary) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--sn-primary-hover) 25%, transparent); }
.cx-btn-primary:hover { background: var(--sn-primary-hover); border-color: var(--sn-primary-hover); }
.cx-btn-ghost { background: transparent; border-color: transparent; color: var(--sn-text-secondary) !important; }
.cx-btn-ghost:hover { background: var(--sn-surface-hover); border-color: transparent; color: var(--sn-text) !important; }
.cx-btn-danger { color: var(--sn-error) !important; border-color: color-mix(in srgb, var(--sn-error-fill) 45%, transparent); }
.cx-btn-danger:hover { background: var(--sn-error-bg); border-color: var(--sn-error-fill); }
.cx-btn-danger-solid { background: var(--sn-error-fill); border-color: var(--sn-error-fill); color: #fff !important; }
.cx-btn-danger-solid:hover { filter: brightness(.92); background: var(--sn-error-fill); }
.cx-btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--sn-fs-xs); }
.cx-btn-block { width: 100%; }
/* Nút đang xử lý: spinner thay chữ, giữ nguyên kích thước */
.cx-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.cx-btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sn-text-muted); border-right-color: transparent; animation: cx-spin .7s linear infinite; }
.cx-btn-primary.is-busy::after { border-color: var(--sn-on-primary); border-right-color: transparent; }

/* ---------- Thông báo, nhãn ---------- */
.cx-alert { display: flex; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); border-radius: var(--sn-radius); font-size: var(--sn-fs-sm); background: var(--sn-neutral-bg); color: var(--sn-neutral-text); animation: cx-enter var(--sn-dur-slow) var(--sn-ease); }
.cx-alert .cx-icon { margin-top: 1px; }
.cx-alert-success { background: var(--sn-success-bg); color: var(--sn-success); }
.cx-alert-warning { background: var(--sn-warning-bg); color: var(--sn-warning); }
.cx-alert-danger { background: var(--sn-error-bg); color: var(--sn-error); }
.cx-alert-accent { background: var(--sn-primary-soft); color: var(--sn-primary-text); }
.cx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--sn-radius-pill); font-size: var(--sn-fs-xs); font-weight: 500; white-space: nowrap; background: var(--sn-neutral-bg); color: var(--sn-neutral-text); }
.cx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-pill-plain::before { display: none; }
.cx-pill-success { background: var(--sn-success-bg); color: var(--sn-success); }
.cx-pill-warning { background: var(--sn-warning-bg); color: var(--sn-warning); }
.cx-pill-danger { background: var(--sn-error-bg); color: var(--sn-error); }
.cx-pill-accent { background: var(--sn-primary-soft); color: var(--sn-primary-text); }

/* ---------- Số liệu ---------- */
.cx-stats { display: grid; gap: var(--sn-space-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cx-stat { display: flex; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-4); background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); }
.cx-stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sn-primary-soft); color: var(--sn-primary-text); flex: none; }
.cx-stat-icon.is-success { background: var(--sn-success-bg); color: var(--sn-success); }
.cx-stat-icon.is-warning { background: var(--sn-warning-bg); color: var(--sn-warning); }
.cx-stat-icon.is-danger { background: var(--sn-error-bg); color: var(--sn-error); }
@media (max-width: 599.98px) {
    .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx-stat { padding: var(--sn-space-3); gap: var(--sn-space-2); }
    .cx-stat-icon { width: 32px; height: 32px; border-radius: 10px; }
}
.cx-stat-value { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cx-stat-label { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); }

/* ---------- Bảng, danh sách khóa – giá trị ---------- */
.cx-table-wrap { overflow-x: auto; }
.cx-table { width: 100%; border-collapse: collapse; font-size: var(--sn-fs-sm); }
.cx-table th { text-align: left; font-weight: 500; font-size: var(--sn-fs-xs); color: var(--sn-text-muted); padding: 10px var(--sn-space-4); background: var(--sn-surface-muted); border-bottom: 1px solid var(--sn-border); white-space: nowrap; }
.cx-table td { padding: 12px var(--sn-space-4); border-bottom: 1px solid var(--sn-border); vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table tbody tr { transition: background var(--sn-dur); }
.cx-table tbody tr:hover { background: var(--sn-surface-hover); }
.cx-table .cx-end { text-align: right; }
.cx-cell-title { font-weight: 600; color: var(--sn-text); }
.cx-cell-sub { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); }
.cx-empty { padding: var(--sn-space-6) var(--sn-space-4); text-align: center; color: var(--sn-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--sn-space-2); }
.cx-empty .cx-icon { width: 36px; height: 36px; color: var(--sn-border-strong); }
.cx-kv { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 10px var(--sn-space-4); margin: 0; font-size: var(--sn-fs-sm); }
.cx-kv dt { color: var(--sn-text-muted); }
.cx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599.98px) { .cx-kv { grid-template-columns: 1fr; gap: 2px; } .cx-kv dd { margin-bottom: var(--sn-space-2); } }

/* ---------- Bước của wizard ---------- */
.cx-steps { display: flex; gap: var(--sn-space-2); margin: 0 0 var(--sn-space-4h); padding: 0; list-style: none; counter-reset: step; }
.cx-steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--sn-fs-xs); color: var(--sn-text-muted); counter-increment: step; }
.cx-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--sn-border); transition: background var(--sn-dur-slow) var(--sn-ease); }
.cx-steps li.is-done::before, .cx-steps li.is-current::before { background: var(--sn-primary); }
.cx-steps li.is-current { color: var(--sn-primary-text); font-weight: 600; }
.cx-steps li.is-done { color: var(--sn-text-secondary); }
@media (max-width: 599.98px) { .cx-steps li span { display: none; } .cx-steps li.is-current span { display: inline; } }
.cx-step-panel { animation: cx-enter var(--sn-dur-slow) var(--sn-ease); }

/* ---------- Tiến độ việc dài (cài đặt, tạo / reset / khôi phục doanh nghiệp) ---------- */
.cx-progress { height: 8px; border-radius: 4px; background: var(--sn-surface-muted); overflow: hidden; position: relative; }
.cx-progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sn-primary); transition: width var(--sn-dur-slow) var(--sn-ease); }
/* Đang chạy: vệt sáng chạy trên thanh – không bao giờ đứng yên */
.cx-progress.is-running > i { background-image: linear-gradient(90deg, transparent 0, rgb(255 255 255 / 35%) 50%, transparent 100%); background-size: 200px 100%; background-repeat: no-repeat; animation: cx-sheen 1.4s linear infinite; background-color: var(--sn-primary); }
.cx-progress.is-indeterminate > i { width: 35% !important; position: absolute; animation: cx-indeterminate 1.3s var(--sn-ease) infinite; }
.cx-progress.is-failed > i { background: var(--sn-error-fill); }
.cx-progress.is-done > i { background: var(--sn-success-fill); }
.cx-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cx-task { display: flex; align-items: flex-start; gap: var(--sn-space-3); padding: 10px 0; font-size: var(--sn-fs-sm); color: var(--sn-text-muted); border-bottom: 1px dashed var(--sn-border); }
.cx-task:last-child { border-bottom: 0; }
.cx-task-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--sn-border-strong); background: var(--sn-surface); }
.cx-task-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx-task-body { flex: 1; min-width: 0; }
.cx-task-detail { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); margin-top: 2px; font-family: var(--sn-font-mono); overflow-wrap: anywhere; }
.cx-task-time { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); font-variant-numeric: tabular-nums; }
.cx-task.is-done { color: var(--sn-text-secondary); }
.cx-task.is-done .cx-task-mark { border-color: var(--sn-success-fill); background: var(--sn-success-fill); color: #fff; animation: cx-pop var(--sn-dur-slow) var(--sn-ease); }
.cx-task.is-running { color: var(--sn-text); font-weight: 500; }
.cx-task.is-running .cx-task-mark { border-color: var(--sn-primary); border-right-color: transparent; animation: cx-spin .8s linear infinite; }
.cx-task.is-failed { color: var(--sn-error); }
.cx-task.is-failed .cx-task-mark { border-color: var(--sn-error-fill); background: var(--sn-error-fill); color: #fff; }
.cx-task.is-skipped { opacity: .6; text-decoration: line-through; }
.cx-progress-head { display: flex; align-items: baseline; gap: var(--sn-space-3); flex-wrap: wrap; }
.cx-progress-head .cx-push { font-variant-numeric: tabular-nums; }
.cx-log { margin: 0; max-height: 132px; overflow: auto; padding: var(--sn-space-3); border-radius: var(--sn-radius); background: var(--sn-surface-muted); font-family: var(--sn-font-mono); font-size: 12px; line-height: 1.6; color: var(--sn-text-secondary); white-space: pre-wrap; }
.cx-celebrate { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--sn-success-bg); color: var(--sn-success); animation: cx-pop 600ms var(--sn-ease); }
.cx-celebrate svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: cx-draw 500ms 250ms var(--sn-ease) forwards; }
.cx-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cx-spin .7s linear infinite; display: inline-block; flex: none; }

/* ---------- Đăng nhập, xác thực 2 lớp ---------- */
.cx-auth-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--sn-primary-soft); color: var(--sn-primary-text); }
.cx-auth-icon .cx-icon { width: 26px; height: 26px; }
.cx-numbered { margin: 0; padding-left: 0; list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: var(--sn-space-2); font-size: var(--sn-fs-sm); color: var(--sn-text-secondary); }
.cx-numbered li { counter-increment: n; display: flex; gap: var(--sn-space-3); align-items: baseline; }
.cx-numbered li::before { content: counter(n); flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--sn-primary-soft); color: var(--sn-primary-text); }
.cx-qr { width: 168px; height: 168px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); background: #fff; padding: 8px; image-rendering: pixelated; }
.cx-secret { font-family: var(--sn-font-mono); font-size: var(--sn-fs-lg); letter-spacing: .06em; padding: 6px 12px; border-radius: var(--sn-radius-sm); background: var(--sn-surface-muted); display: inline-block; word-break: break-all; }
.cx-otp { font-family: var(--sn-font-mono); font-size: 22px; letter-spacing: .3em; text-align: center; max-width: 220px; }

/* ---------- Hiệu ứng ---------- */
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cx-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cx-draw { to { stroke-dashoffset: 0; } }
@keyframes cx-sheen { from { background-position: -200px 0; } to { background-position: calc(100% + 200px) 0; } }
@keyframes cx-indeterminate { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .cx *, .cx *::before, .cx *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .cx-task.is-running .cx-task-mark, .cx-spinner, .cx-btn.is-busy::after { animation: cx-spin 1.6s linear infinite !important; }
}

/* Ẩn phần tử – JS bật / tắt */
.cx [hidden] { display: none !important; }

/* Trợ giúp ẩn của trang tĩnh: <span class="cx-tip" tabindex="0" data-tip="…">?</span> – nội dung chỉ hiện khi rê chuột / chạm / đưa tiêu điểm tới */
.cx-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: 1px solid var(--sn-border);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--sn-text-muted);
    cursor: help;
    vertical-align: middle;
}

.cx-tip:hover::after,
.cx-tip:focus::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: min(320px, 80vw);
    padding: var(--sn-space-2) var(--sn-space-3);
    border-radius: 6px;
    background: var(--sn-text);
    color: var(--sn-surface);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

/* Có sisu-static.js: hộp nổi theo khung nhìn (không bị thẻ có overflow: hidden che, tự lật / dồn khi sát mép) thay cho ::after */
.cx-tips-js .cx-tip:hover::after,
.cx-tips-js .cx-tip:focus::after { content: none; }

.cx-tip-pop {
    position: fixed;
    z-index: 1000;
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
    padding: var(--sn-space-2) var(--sn-space-3);
    border-radius: 6px;
    background: var(--sn-text);
    color: var(--sn-surface);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    box-shadow: var(--sn-shadow);
}

.cx-tip-pop[hidden] { display: none; }