:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0b1020;
    color: #eef2ff;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #18213f 0, #0b1020 48%, #070a12 100%); }
button, input { font: inherit; }
a { color: inherit; }
.page-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 32px 0 64px; }
.auth-card { width: min(430px, 100%); margin: 7vh auto 0; padding: 30px; border: 1px solid #2a355d; border-radius: 22px; background: rgba(14, 20, 39, .94); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #6d5dfc; font-weight: 800; font-size: 24px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; }
.muted { color: #aab5d6; }
label { display: block; margin: 18px 0 7px; font-weight: 650; }
input { width: 100%; border: 1px solid #34416b; border-radius: 11px; padding: 12px 13px; background: #0a0f1e; color: #f8faff; outline: none; }
input:focus { border-color: #8f84ff; box-shadow: 0 0 0 3px rgba(143, 132, 255, .17); }
button, .secondary-button { border: 0; border-radius: 11px; padding: 11px 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.auth-card button { width: 100%; margin-top: 22px; background: #7868ff; color: white; }
.secondary-button { background: #202a49; color: #eef2ff; }
.danger-button { background: #8b2738; color: white; }
.alert { margin: 18px 0 8px; padding: 12px; border: 1px solid #a84758; border-radius: 10px; background: rgba(145, 42, 60, .25); }
.topbar { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.eyebrow { margin-bottom: 5px; color: #968cff; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.account-box { text-align: right; padding: 11px 14px; border: 1px solid #2c385f; border-radius: 12px; background: rgba(16, 23, 44, .86); }
.account-box span, .account-box small { display: block; }
.account-box small { color: #aab5d6; margin-top: 3px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 16px; }
.actions form { margin: 0; }
.panel { border: 1px solid #2a355d; border-radius: 18px; padding: 20px; background: rgba(14, 20, 39, .92); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.role-badge { padding: 5px 9px; border-radius: 999px; background: #2a3560; font-size: 12px; font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 10px; border-bottom: 1px solid #273252; text-align: left; white-space: nowrap; }
th { color: #b8c1df; font-size: 13px; }
td small { color: #8f9aba; }
.notice { margin: 18px 0 0; padding: 12px; background: #1b2543; border-radius: 10px; color: #c8d0eb; }
.session-list { display: grid; gap: 12px; }
.session-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 16px; border: 1px solid #303d66; border-radius: 13px; background: #10172c; }
.session-card h2 { font-size: 18px; margin-bottom: 7px; }
.session-card p { margin-bottom: 5px; }
.session-card.revoked { opacity: .62; }
.success-text { color: #78e6a0; }
.danger-text { color: #ff9aaa; }
@media (max-width: 720px) {
    .page-shell { width: min(100% - 18px, 1120px); padding-top: 18px; }
    .topbar, .session-card { align-items: stretch; flex-direction: column; }
    .account-box { text-align: left; }
    .actions { justify-content: stretch; }
    .actions > * { flex: 1; }
    .actions .secondary-button { width: 100%; }
    .panel { padding: 14px; }
    table, thead, tbody, tr, th, td { display: block; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    tr { padding: 10px 0; border-bottom: 1px solid #273252; }
    td { display: grid; grid-template-columns: 120px 1fr; gap: 10px; border: 0; padding: 7px 0; white-space: normal; }
    td::before { content: attr(data-label); color: #9aa6ca; font-weight: 700; }
}

/* Stage 9B dashboard */
.dashboard-time { margin-bottom: 0; }
.dashboard-actions { flex-wrap: wrap; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 28px; }
.summary-card { min-height: 132px; padding: 18px; border: 1px solid #2b385f; border-radius: 17px; background: linear-gradient(160deg, rgba(24, 34, 64, .96), rgba(12, 18, 35, .96)); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.summary-card strong { display: block; margin: 10px 0 7px; font-size: clamp(28px, 4vw, 40px); line-height: 1; }
.summary-card small { color: #929fbe; }
.summary-label { color: #c5ccec; font-size: 13px; font-weight: 750; }
.summary-alert { border-color: #764351; background: linear-gradient(160deg, rgba(79, 31, 45, .82), rgba(25, 18, 31, .96)); }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin: 0 0 14px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading .muted { max-width: 540px; margin-bottom: 1px; text-align: right; }
.bot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.bot-card { min-width: 0; padding: 18px; border: 1px solid #2a355d; border-radius: 19px; background: rgba(14, 20, 39, .94); box-shadow: 0 18px 46px rgba(0, 0, 0, .2); }
.bot-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.bot-card-header h2 { margin-bottom: 0; font-size: 22px; }
.bot-code { margin: 0 0 4px; color: #8f9aba; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.status-online { color: #8bf0ae; background: rgba(34, 137, 79, .2); border-color: rgba(81, 205, 126, .38); }
.status-delayed { color: #ffd37a; background: rgba(149, 100, 22, .22); border-color: rgba(235, 177, 70, .36); }
.status-offline, .status-never { color: #ff9eab; background: rgba(145, 42, 60, .22); border-color: rgba(220, 93, 112, .38); }
.status-disabled { color: #bac2dc; background: rgba(92, 100, 128, .22); border-color: rgba(145, 154, 184, .3); }
.freshness { margin: 13px 0 15px; color: #929fbe; font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.metric { min-width: 0; padding: 11px; border: 1px solid #263252; border-radius: 12px; background: #0d1428; }
.metric span { display: block; margin-bottom: 6px; color: #8995b7; font-size: 11px; font-weight: 750; }
.metric strong { display: block; overflow: hidden; color: #f3f6ff; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.metric-warning { border-color: #744253; background: rgba(74, 29, 43, .34); }
.metric-wide { grid-column: span 2; }
.metric-time { font-size: 14px !important; }
.money-positive { color: #78e6a0 !important; }
.money-negative { color: #ff8fa2 !important; }
.money-neutral { color: inherit; }
.missing-box { margin-top: 12px; padding: 11px 12px; border: 1px solid #724254; border-radius: 11px; background: rgba(94, 35, 52, .25); color: #ffd2d9; font-size: 13px; line-height: 1.55; }
.missing-box strong { margin-right: 4px; }
.stats-block { margin-top: 17px; }
.subheading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.subheading h3 { margin: 0; font-size: 15px; }
.subheading span { color: #8592b5; font-size: 12px; }
.compact-table-wrap { max-height: 330px; border: 1px solid #263252; border-radius: 12px; }
.compact-table th, .compact-table td { padding: 9px 8px; font-size: 12px; }
.compact-table tr:last-child td { border-bottom: 0; }
.recent-panel { margin-top: 4px; }
.empty-state { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 22px; border: 1px dashed #34416b; border-radius: 13px; color: #aab5d6; text-align: center; }
.empty-state strong { color: #eef2ff; }
.small-empty { min-height: 105px; padding: 15px; font-size: 13px; }
.source-badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #203258; color: #c7d7ff; font-size: 11px; font-weight: 750; }
.source-backfill { background: rgba(116, 71, 22, .42); color: #ffd78b; }

@media (max-width: 980px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bot-grid { grid-template-columns: 1fr; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .section-heading .muted { text-align: left; }
}

@media (max-width: 720px) {
    .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .summary-card { min-height: 112px; padding: 14px; }
    .summary-card strong { font-size: 27px; }
    .dashboard-actions > * { min-width: calc(50% - 5px); }
    .dashboard-actions form { flex: 1 1 100%; }
    .dashboard-actions form button { width: 100%; }
    .bot-card { padding: 14px; }
    .metric strong { font-size: 18px; }
    .compact-table-wrap { max-height: none; border: 0; overflow: visible; }
    .compact-table tr { padding: 8px 0; }
}

@media (max-width: 430px) {
    .summary-grid { grid-template-columns: 1fr; }
    .dashboard-actions > * { min-width: 100%; }
}

/* NimoWeb UI-1: Bảng cầu vô địch */
[hidden] { display: none !important; }
.page-shell { width: min(1580px, calc(100% - 28px)); padding: 20px 0 48px; }
.champion-dashboard { min-width: 0; }
.champion-header {
    display: grid;
    grid-template-columns: minmax(190px, .75fr) minmax(440px, 2fr) minmax(270px, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}
.online-card,
.account-panel,
.profit-card,
.dashboard-panel {
    border: 1px solid #2a355d;
    background: rgba(14, 20, 39, .93);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.online-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    padding: 14px 16px;
    overflow: hidden;
    border-radius: 18px;
    text-align: center;
}

.online-card-content {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.online-card small,
.online-window-text {
    display: block;
    color: #95a2c4;
}

.online-card small {
    font-size: 12px;
}

.online-card-content > strong {
    display: block;
    margin: 5px 0 4px;
    color: #f5f7ff;
    font-size: 30px;
    line-height: 1;
}

.online-window-text {
    font-size: 11px;
}

.online-vps-details {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(71, 87, 132, 0.55);
}

.online-bot-states {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.online-bot-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    color: #f1f4ff;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.header-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.header-status-dot.status-online {
    color: #45cd77;
    box-shadow: 0 0 7px rgba(69, 205, 119, 0.65);
}

.header-status-dot.status-offline {
    color: #ff6278;
    box-shadow: 0 0 7px rgba(255, 98, 120, 0.6);
}

.online-resource-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 9px;
    color: #f1f4ff;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.online-resource-row > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.online-resource-value {
    margin-left: 0;
    font-size: 14px;
    font-weight: 900;
}

.resource-healthy {
    color: #45cd77;
}

.resource-danger {
    color: #ff6278;
}
.champion-brand {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 8px;
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    text-align: center;
}
.brand-kicker,
.panel-kicker {
    margin: 0 0 4px;
    color: #968cff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.champion-brand h1 {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #ff9f43;
    font-size: clamp(14px, 1.7vw, 24px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .025em;
    text-shadow: 0 0 14px rgba(255, 159, 67, 0.16);
}
.profit-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    height: auto;
}
.profit-card {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    text-align: left;
}
.profit-card > span { display: block; color: #aeb8d7; font-size: 12px; font-weight: 700; }
.profit-card > strong { display: block; overflow: hidden; margin: 5px 0 2px; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.profit-card > small { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 18px; }
.account-identity { text-align: right; }
.account-identity small,
.account-identity span { display: block; color: #9ca8c9; }
.account-identity strong { display: block; margin: 4px 0; font-size: 18px; }
.account-identity span { font-size: 12px; }
.account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.account-actions form { grid-column: 1 / -1; margin: 0; }
.account-button {
    width: 100%;
    min-height: 34px;
    border: 1px solid #33416d;
    border-radius: 9px;
    padding: 8px 9px;
    background: #192440;
    color: #eef2ff;
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.account-button:hover { border-color: #7469e8; background: #252f54; }
.account-logout { border-color: #693848; background: rgba(112, 38, 57, .48); }
.dashboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px;
    border: 1px solid #29345a;
    border-radius: 15px;
    background: rgba(9, 14, 29, .78);
}
.dashboard-tab {
    flex: 1;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #9fabc9;
    font-weight: 800;
    cursor: pointer;
}
.dashboard-tab:hover { color: #eef2ff; background: rgba(42, 53, 96, .5); }
.dashboard-tab.is-active { border-color: #6f63e3; background: linear-gradient(135deg, #6658e8, #473ba8); color: #fff; box-shadow: 0 9px 24px rgba(63, 51, 159, .34); }
.dashboard-tab-panel { min-width: 0; }
.champion-layout { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(390px, .95fr); gap: 14px; align-items: start; }
.dashboard-panel { min-width: 0; padding: 16px; border-radius: 18px; }
.panel-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.panel-title-row h2 { margin: 0 0 4px; font-size: 21px; }
.panel-title-row p:not(.panel-kicker) { margin: 0; color: #929fbe; font-size: 12px; line-height: 1.45; }
.bot3-status { flex: 0 0 auto; text-align: right; }
.bot3-status small { display: block; margin-top: 5px; color: #8f9aba; font-size: 11px; }
.section-mini-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 0 8px; }
.section-mini-title strong { font-size: 13px; }
.section-mini-title span { color: #8e9aba; font-size: 11px; }
.history-meta > div span { display: block; margin-top: 2px; }
.pinned-results { margin-bottom: 15px; }
.wide-table-wrap { overflow: auto; border: 1px solid #263252; border-radius: 12px; background: rgba(8, 13, 27, .62); }
.pinned-table-wrap { overflow-x: auto; }
.history-scroll { max-height: 710px; }
.champion-table,
.top-huge-table { min-width: 900px; table-layout: fixed; }
.champion-table .col-time { width: 12%; }
.champion-table .col-round { width: 8%; }
.champion-table .col-result { width: 17%; }
.champion-table .col-gap { width: 9%; }
.champion-table .col-top { width: 18%; }
.champion-table th,
.champion-table td,
.top-huge-table th,
.top-huge-table td { padding: 9px 8px; vertical-align: middle; }
.champion-table th,
.top-huge-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #151d36;
    color: #c4cbea;
    font-size: 11px;
    text-align: center;
}
.champion-table td { height: 58px; text-align: center; font-size: 12px; }
.champion-table td:first-child,
.top-huge-table td:last-child { text-align: left; }
.champion-table tbody tr:hover,
.top-huge-table tbody tr:hover { background: rgba(75, 85, 143, .16); }
.pinned-result-row { background: linear-gradient(90deg, rgba(66, 52, 145, .28), rgba(25, 36, 67, .2)); }
.pinned-result-row td { border-bottom-color: #3c4772; }
.round-time,
.round-number,
.gap-number { display: block; color: #f6f8ff; }
.round-time { font-size: 13px; }
.round-number { font-size: 15px; }
.gap-number { font-size: 16px; color: #ffd37a; }
.champion-table td small,
.top-huge-table td small { display: block; margin-top: 3px; color: #7f8cac; font-size: 10px; }
.backfill-note { color: #ffd37a !important; }
.result-badge { display: flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; text-align: left; }
.result-badge img,
.result-placeholder { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; object-fit: contain; background: rgba(255, 255, 255, .06); }
.result-placeholder { display: grid; place-items: center; color: #8f9aba; font-weight: 800; }
.result-badge span:last-child { overflow: hidden; color: #f1f4ff; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.top-entry { min-width: 0; text-align: center; }
.top-entry strong,
.top-entry span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-entry strong { color: #e9edff; font-size: 12px; }
.top-entry span { margin-top: 3px; color: #8ee6ac; font-size: 12px; font-weight: 800; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 11px; }
.page-button { min-width: 34px; height: 32px; border: 1px solid #33416b; border-radius: 8px; background: #111a31; color: #aeb8d7; font-weight: 800; cursor: pointer; }
.page-button:hover { border-color: #7c70ef; color: #fff; }
.page-button.is-active { border-color: #7868ff; background: #6658e8; color: #fff; }
.dashboard-sidebar { display: grid; gap: 14px; min-width: 0; }
.compact-heading { margin-bottom: 11px; }
.compact-heading h2 { font-size: 18px; }
.stats-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.stats-summary > div { padding: 10px; border: 1px solid #273456; border-radius: 10px; background: #0d1428; }
.stats-summary span { display: block; color: #8995b7; font-size: 10px; font-weight: 750; }
.stats-summary strong { display: block; margin-top: 4px; color: #f5f7ff; font-size: 19px; }
.stats-summary .stats-updated { grid-column: 1 / -1; }
.stats-summary .stats-updated strong { font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-card { min-width: 0; padding: 9px; border: 1px solid #273456; border-radius: 11px; background: linear-gradient(150deg, rgba(19, 28, 54, .96), rgba(11, 17, 33, .96)); }
.stat-name { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 8px; }
.stat-name img { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; object-fit: contain; }
.stat-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.stat-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.stat-card dl div { min-width: 0; text-align: center; }
.stat-card dt { color: #7f8cac; font-size: 9px; }
.stat-card dd { margin: 2px 0 0; color: #f4f6ff; font-size: 13px; font-weight: 800; }
.record-count { padding: 5px 8px; border-radius: 999px; background: #26345d; color: #c9d2f2; font-size: 11px; font-weight: 800; }
.top-huge-scroll { max-height: 510px; }
.top-huge-table { min-width: 620px; }
.top-huge-table th:nth-child(1) { width: 12%; }
.top-huge-table th:nth-child(2) { width: 28%; }
.top-huge-table th:nth-child(3) { width: 34%; }
.top-huge-table th:nth-child(4) { width: 26%; }
.top-huge-table td { font-size: 11px; }
.dashboard-empty { display: flex; min-height: 130px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; border: 1px dashed #35416b; border-radius: 12px; color: #9ca8c9; text-align: center; }
.dashboard-empty strong { color: #eef2ff; }
.dashboard-empty span { font-size: 12px; }
.small-empty { min-height: 92px; }
.bot12-placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bot-detail-placeholder { min-height: 220px; padding: 20px; border: 1px dashed #3b4774; border-radius: 16px; background: rgba(12, 19, 37, .72); }
.bot-detail-placeholder span { color: #968cff; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.bot-detail-placeholder h3 { margin: 5px 0 22px; }
.bot-detail-placeholder > strong { display: block; margin-bottom: 15px; font-size: 28px; }
.bot-detail-placeholder p { color: #929fbe; line-height: 1.6; }
.viewer-notice { margin: 14px 0 0; padding: 11px 13px; border: 1px solid #3b4770; border-radius: 11px; background: rgba(26, 35, 66, .75); color: #bdc6e4; font-size: 12px; }

@media (max-width: 1180px) {
    .champion-header { grid-template-columns: 210px 1fr; }
    .account-panel { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .account-identity { text-align: left; }
    .account-actions { width: min(460px, 100%); }
    .champion-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .champion-header { grid-template-columns: 1fr; }
    .online-card { min-height: auto; }
    .champion-brand {
        height: auto;
        padding: 12px 0;
    }
    .account-panel { grid-column: auto; flex-direction: column; align-items: stretch; }
    .account-identity { text-align: left; }
    .account-actions { width: 100%; }
    .dashboard-sidebar { grid-template-columns: 1fr; }
    .bot12-placeholder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .page-shell { width: min(100% - 14px, 1580px); padding-top: 10px; }
    .profit-strip {
        grid-template-columns: 1fr;
        height: auto;
    }

    .profit-card {
        min-height: 72px;
    }
    .dashboard-tabs { flex-direction: column; }
    .panel-title-row { flex-direction: column; }
    .bot3-status { text-align: left; }
    .dashboard-panel { padding: 12px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    /* Keep dashboard data tables as real scrollable tables on phones. */
    .champion-dashboard table { display: table; }
    .champion-dashboard thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
    .champion-dashboard tbody { display: table-row-group; }
    .champion-dashboard tr { display: table-row; padding: 0; border: 0; }
    .champion-dashboard th,
    .champion-dashboard td { display: table-cell; }
    .champion-dashboard td { white-space: nowrap; }
    .champion-dashboard td::before { content: none; }
    .history-scroll { max-height: 620px; }
}

@media (max-width: 480px) {
    .account-actions { grid-template-columns: 1fr; }
    .account-actions form { grid-column: auto; }
    .stats-grid { grid-template-columns: 1fr; }
}


/* NimoWeb UI-1F refinements */
.champion-layout { grid-template-columns: minmax(0, 2fr) minmax(410px, .92fr); align-items: stretch; }
.dashboard-sidebar { align-content: start; }
.auto-refresh-note { color: #78d8a0 !important; }
.history-scroll { max-height: 660px; }
.champion-table td { height: 52px; }
.result-badge img, .result-placeholder { border: 1px solid rgba(137, 154, 193, .18); }
.stat-name img { border: 1px solid rgba(137, 154, 193, .18); background: rgba(255,255,255,.05); }
.top-huge-heading .record-count { min-width: 42px; text-align: center; }
.top-huge-scroll { max-height: 460px; }
.top-huge-table { min-width: 100%; table-layout: fixed; }
.top-huge-table th:nth-child(1) { width: 16%; }
.top-huge-table th:nth-child(2) { width: 9%; }
.top-huge-table th:nth-child(3) { width: 18%; }
.top-huge-table th:nth-child(4) { width: 9%; }
.top-huge-table th:nth-child(5), .top-huge-table th:nth-child(6), .top-huge-table th:nth-child(7) { width: 16%; }
.top-huge-table td { font-size: 11px; text-align: center; }
.top-huge-table td:first-child, .top-huge-table td:nth-child(3) { text-align: left; }
.top-huge-panel .panel-title-row { margin-bottom: 10px; }
.top-huge-panel .panel-title-row h2 { font-size: 20px; }
@media (max-width: 1480px) { .history-scroll { max-height: 620px; } .top-huge-scroll { max-height: 420px; } }
@media (max-width: 1180px) { .top-huge-table { min-width: 860px; } }

/* NimoWeb UI-1G realtime */
.auto-refresh-note[data-state="online"] { color: #78e6a0 !important; }
.auto-refresh-note[data-state="reconnecting"] { color: #ffd37a !important; }
.auto-refresh-note[data-state="error"] { color: #ff9eab !important; }


/* NimoWeb UI-1H requested refinements */
.dashboard-section-title {
    font-size: 14.3px;
}

.dashboard-tabs {
    margin-bottom: 10px;
    padding: 4px;
}

.dashboard-tab {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, auto));
    grid-auto-flow: column;
}

.stat-name img {
    width: 34px;
    height: 34px;
}

.result-row-orange {
    background: rgba(255, 174, 66, .15);
}

.result-row-orange:hover {
    background: rgba(255, 174, 66, .23) !important;
}

.result-row-green {
    background: rgba(69, 205, 119, .14);
}

.result-row-green:hover {
    background: rgba(69, 205, 119, .22) !important;
}

.result-badge-icon-only {
    justify-content: center;
}

.result-badge-icon-only img,
.result-badge-icon-only .result-placeholder {
    width: 32px;
    height: 32px;
}

.history-scroll {
    max-height: 800px;
}

@media (max-width: 1480px) {
    .history-scroll {
        max-height: 760px;
    }
}

@media (max-width: 720px) {
    .history-scroll {
        max-height: 620px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* =========================================================
   VPS STATUS — ADMIN READ-ONLY
   ========================================================= */

.vps-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.vps-node-panel {
    min-width: 0;
}

.vps-node-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.vps-node-heading h2 {
    margin: 4px 0 5px;
    color: #ff9f43;
    font-size: 1.25rem;
}

.vps-node-heading p {
    margin: 0;
    color: var(--muted-text);
}

.vps-freshness {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.vps-freshness small {
    color: var(--muted-text);
    white-space: nowrap;
}

.vps-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vps-metric-card {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--soft-panel);
}

.vps-metric-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--muted-text);
    font-size: 0.78rem;
}

.vps-metric-label small {
    color: inherit;
    text-align: right;
}

.vps-metric-card > strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.98rem;
}

.vps-metric-healthy > strong,
.vps-metric-healthy .vps-metric-label small {
    color: #45cd77;
}

.vps-metric-danger > strong,
.vps-metric-danger .vps-metric-label small {
    color: #ff6278;
}

.vps-metric-healthy .vps-progress > span {
    color: #45cd77;
}

.vps-metric-danger .vps-progress > span {
    color: #ff6278;
}

.vps-progress {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel-border);
}

.vps-progress > span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.72;
}

.vps-service-section {
    margin-top: 18px;
}

.vps-service-section > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vps-service-section > header span {
    color: var(--muted-text);
    font-size: 0.78rem;
}

.vps-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vps-service-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--soft-panel);
}

.vps-service-card > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vps-service-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
}

.vps-service-card small {
    color: var(--muted-text);
    font-size: 0.74rem;
}

.vps-service-card > span {
    grid-column: 1 / -1;
    color: var(--muted-text);
    font-size: 0.72rem;
}

.service-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.service-dot.status-online {
    color: #45cd77;
    box-shadow:
        0 0 0 3px rgba(69, 205, 119, 0.12),
        0 0 9px rgba(69, 205, 119, 0.55);
}

.service-dot.status-delayed,
.service-dot.status-offline,
.service-dot.status-never {
    color: #ff6278;
    box-shadow:
        0 0 0 3px rgba(255, 98, 120, 0.11),
        0 0 9px rgba(255, 98, 120, 0.5);
}

.watchdog-history-panel {
    margin-top: 18px;
}

.watchdog-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.watchdog-table th,
.watchdog-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    white-space: nowrap;
}

.watchdog-table th {
    color: var(--muted-text);
    font-size: 0.76rem;
}

.watchdog-table td {
    font-size: 0.84rem;
}

.vps-empty {
    min-height: 180px;
}

@media (max-width: 1100px) {
    .vps-status-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .vps-metric-grid,
    .vps-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .vps-node-heading {
        flex-direction: column;
    }

    .vps-freshness {
        align-items: flex-start;
    }

    .vps-metric-grid,
    .vps-service-grid {
        grid-template-columns: 1fr;
    }
}

/* NIMOWEB_BOT12_DETAIL_CSS_V1 */
.bot12-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.bot12-column{display:grid;gap:14px;min-width:0}
.bot12-overview-panel,.bot12-detail-panel{min-width:0}
.bot12-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.bot12-section-heading h2,.bot12-section-heading h3{margin:2px 0 0;color:#f5f7ff}
.bot12-section-heading h2{font-size:22px}.bot12-section-heading h3{font-size:18px}
.bot12-section-heading>div>span{display:block;margin-top:4px;color:#9ca8c9;font-size:12px}
.bot12-overview-heading{align-items:center}
.bot12-overall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bot12-overall-card{display:grid;min-height:92px;align-content:center;gap:5px;padding:13px;border:1px solid #303b68;border-radius:13px;background:linear-gradient(145deg,rgba(19,27,57,.96),rgba(10,16,37,.96))}
.bot12-overall-card span{color:#9ca8c9;font-size:12px;font-weight:700}
.bot12-overall-card strong{color:#f8f9ff;font-size:24px;line-height:1.1}
.bot12-overall-card small{color:#7783a9;font-size:11px}
.bot12-overall-card-small strong{font-size:19px}
.bot12-strategy-summary{display:grid;gap:7px;margin-top:12px}
.bot12-summary-head,.bot12-summary-row{display:grid;grid-template-columns:minmax(132px,1.35fr) repeat(3,minmax(72px,.8fr));align-items:center;gap:8px}
.bot12-summary-head{padding:0 10px;color:#7885aa;font-size:10px;font-weight:800;text-transform:uppercase}
.bot12-summary-row{min-height:58px;padding:8px 10px;border:1px solid #29345d;border-radius:11px;background:rgba(12,19,42,.78)}
.bot12-summary-row>strong,.bot12-summary-row>span{text-align:right}.bot12-summary-row>span{display:grid;gap:2px}.bot12-summary-row>span small{color:#7783a9;font-size:10px}
.bot12-summary-name{display:flex;align-items:center;gap:8px;min-width:0}.bot12-summary-name>div{display:grid;min-width:0}
.bot12-summary-name strong{overflow:hidden;color:#eef2ff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.bot12-summary-name small{color:#8f9abd;font-size:10px}
.bot12-run-state{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 10px;border:1px solid #35416b;border-radius:999px;font-size:11px;font-weight:800}
.bot12-run-state.status-online{border-color:rgba(35,208,131,.45);color:#47e5a2;background:rgba(14,80,58,.24)}
.bot12-run-state.status-danger{border-color:rgba(255,94,116,.42);color:#ff7589;background:rgba(92,25,39,.24)}
.bot12-table-wrap{border:1px solid #29345d;border-radius:12px;background:rgba(8,14,33,.76)}
.bot12-table{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed}
.bot12-table th,.bot12-table td{padding:9px 7px;border-bottom:1px solid #253054;text-align:center;vertical-align:middle;white-space:nowrap}
.bot12-table th{position:sticky;top:0;z-index:1;color:#99a5c7;background:#111a37;font-size:10px;font-weight:800;text-transform:uppercase}
.bot12-table td{color:#e8ecfa;font-size:12px}.bot12-table tbody tr:last-child td{border-bottom:0}.bot12-table tbody tr.is-paused{opacity:.72}
.bot12-table td strong{display:block;font-size:12px}.bot12-table td small{display:block;margin-top:3px;color:#7885aa;font-size:9px}
.bot12-face-cell img{display:block;width:34px;height:34px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.34))}
.bot12-face-cell small{color:#f7b955!important}.bot12-empty{min-height:96px}
@media(max-width:1180px){.bot12-layout{grid-template-columns:1fr}}
@media(max-width:680px){.bot12-summary-head,.bot12-summary-row{grid-template-columns:minmax(112px,1.25fr) repeat(3,minmax(66px,.75fr));min-width:450px}.bot12-strategy-summary{overflow-x:auto;padding-bottom:4px}.bot12-overall-card strong{font-size:20px}.bot12-overall-card-small strong{font-size:17px}}

/* NIMOWEB_BOT12_FINAL_VISUAL_V2 */
.champion-brand .bot12-header-profit-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:100%;
    margin-top:10px;
}
.champion-brand .bot12-header-profit-card{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    min-width:0;
    min-height:124px;
    padding:10px 12px;
    overflow:hidden;
    border:1px solid #303b68;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(17,25,54,.98),rgba(9,15,35,.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.bot12-header-profit-title{
    grid-column:1/-1;
    padding:0 2px 7px;
    color:#9f8cff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-align:left;
}
.bot12-header-profit-cell{
    display:grid;
    align-content:center;
    gap:2px;
    min-width:0;
    padding:7px 10px;
    text-align:left;
}
.bot12-header-profit-cell:nth-of-type(3),
.bot12-header-profit-cell:nth-of-type(5){border-left:1px solid #29345d}
.bot12-header-profit-cell:nth-of-type(4),
.bot12-header-profit-cell:nth-of-type(5){border-top:1px solid #29345d}
.bot12-header-profit-cell span{
    color:#9ca8c9;
    font-size:10px;
    font-weight:700;
}
.bot12-header-profit-cell strong{
    overflow:hidden;
    color:#f7f9ff;
    line-height:1.05;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bot12-header-profit-main strong{font-size:21px}
.bot12-header-profit-minor strong{font-size:17px}
.bot12-header-profit-cell small{
    color:#7d89ad;
    font-size:9px;
    line-height:1.1;
}
.bot12-summary-name>.service-dot,
.bot12-run-state .service-dot{
    width:9px;
    height:9px;
    min-width:9px;
    border:0;
}
.bot12-summary-name>.service-dot.status-online,
.bot12-run-state .service-dot.status-online{
    background:#35df91!important;
    box-shadow:0 0 0 3px rgba(53,223,145,.12),0 0 10px rgba(53,223,145,.55)!important;
}
.bot12-summary-name>.service-dot.status-danger,
.bot12-run-state .service-dot.status-danger{
    background:#ff637a!important;
    box-shadow:0 0 0 3px rgba(255,99,122,.12),0 0 10px rgba(255,99,122,.55)!important;
}
.bot12-table th:first-child,
.bot12-table td:first-child{
    width:28%;
    padding-left:14px;
    text-align:left;
}
.bot12-face-main{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    min-width:0;
}
.bot12-face-main img{
    display:block;
    width:30px;
    height:30px;
    min-width:30px;
    margin:0;
    object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.bot12-face-main strong{
    overflow:hidden;
    color:#eef2ff;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bot12-face-cell>small{
    margin:3px 0 0 39px!important;
    text-align:left;
}
@media(max-width:1180px){
    .champion-brand .bot12-header-profit-card{min-height:116px}
}
@media(max-width:760px){
    .champion-brand .bot12-header-profit-strip{grid-template-columns:1fr}
    .bot12-header-profit-main strong{font-size:19px}
    .bot12-header-profit-minor strong{font-size:16px}
}

/* NIMOWEB_UI2_COMPACT_STICKY_CSS_V1 */

/*
 * Header desktop:
 * - Menu được đặt thành cột trong header.
 * - Vùng từ đầu trang tới đường phân cách được thu gọn.
 * - Header cố định khi cuộn nội dung.
 */
.page-shell {
    padding-top: 10px;
}

.champion-header {
    grid-template-columns:
        minmax(165px, .70fr)
        minmax(520px, 2.20fr)
        minmax(145px, .58fr)
        minmax(235px, .92fr);
    gap: 10px;
    margin-bottom: 8px;
}

.champion-header > .dashboard-tabs {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    min-height: 124px;
    margin: 0;
    padding: 7px;
    align-self: stretch;
}

.champion-header > .dashboard-tabs .dashboard-tab {
    min-height: 0;
    padding: 6px 8px;
}

.online-card,
.account-panel {
    min-height: 124px;
}

.online-card {
    padding: 8px 12px;
}

.online-card-content > strong {
    margin: 2px 0 3px;
}

.online-vps-details {
    margin-top: 5px;
    padding-top: 5px;
}

.online-resource-row {
    margin-top: 5px;
}

.champion-brand {
    gap: 5px;
    padding: 0 8px;
}

.champion-brand h1 {
    min-height: 24px;
}

.champion-brand .bot12-header-profit-strip {
    margin-top: 0;
    gap: 8px;
}

.champion-brand .bot12-header-profit-card {
    min-height: 92px;
    padding: 4px 7px;
}

.bot12-header-profit-title {
    padding: 0 2px 2px;
}

.bot12-header-profit-cell {
    gap: 1px;
    padding: 2px 7px;
}

.account-panel {
    gap: 5px;
    padding: 9px 10px;
}

.account-identity strong {
    margin: 2px 0;
}

.account-actions {
    gap: 5px;
}

.account-button {
    min-height: 26px;
    padding: 4px 7px;
}

/*
 * Bốn ô Tổng thể:
 * giảm chiều cao từ 92px xuống 64px, giữ kích thước chữ
 * và canh toàn bộ nội dung giữa ô.
 */
.bot12-overall-grid {
    gap: 8px;
}

.bot12-overall-card {
    min-height: 64px;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 7px 10px;
    text-align: center;
}

/*
 * Dòng Chiến lược và các giá trị dùng chung đúng một hệ cột.
 */
.bot12-summary-head,
.bot12-summary-row {
    grid-template-columns:
        minmax(145px, 1.40fr)
        repeat(3, minmax(78px, .80fr));
    gap: 6px;
}

.bot12-summary-head {
    padding: 0 8px;
}

.bot12-summary-head > span:first-child {
    text-align: left;
}

.bot12-summary-head > span:nth-child(n + 2),
.bot12-summary-row > strong,
.bot12-summary-row > span {
    width: 100%;
    justify-self: stretch;
    text-align: center;
}

.bot12-summary-row > strong {
    display: block;
}

.bot12-summary-row > span {
    justify-items: center;
}

.bot12-summary-row > span small {
    text-align: center;
}

@media (min-width: 1181px) {
    .champion-header {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 8px 0 10px;
        background:
            linear-gradient(
                180deg,
                rgba(7, 10, 22, .98),
                rgba(7, 10, 22, .94)
            );
        backdrop-filter: blur(14px);
    }

    .champion-header::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        border-radius: 999px;
        background:
            linear-gradient(
                90deg,
                transparent,
                #5d5df3,
                #c04dd6,
                transparent
            );
        content: "";
        opacity: .72;
        pointer-events: none;
    }
}

@media (max-width: 1180px) {
    .champion-header {
        position: static;
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .champion-header > .dashboard-tabs {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: auto;
        min-height: auto;
    }

    .champion-header > .account-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .champion-header {
        grid-template-columns: 1fr;
    }

    .champion-header > .dashboard-tabs,
    .champion-header > .account-panel {
        grid-column: auto;
    }

    .champion-header > .dashboard-tabs {
        grid-template-columns: 1fr;
    }
}

/* NIMOWEB_UI3_CURRENT_BALANCE_CSS_V1 */

/*
 * Desktop:
 * - Tài khoản giảm từ khoảng 235px xuống 165px, tương đương 30%.
 * - 70px thu được chuyển vào vùng Lợi nhuận Bot 1 và Bot 2.
 */
@media (min-width: 1181px) {
    .champion-header {
        grid-template-columns:
            minmax(165px, .70fr)
            minmax(590px, 2.48fr)
            minmax(145px, .58fr)
            minmax(165px, .64fr);
    }
}

/*
 * Lợi nhuận Bot 1–2:
 * hàng trên gồm Vốn hôm nay | KC hiện tại | Profit.
 * hàng dưới gồm Max Profit | Max Lose.
 */
.champion-brand .bot12-header-profit-card {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}

.bot12-header-profit-title {
    grid-column: 1 / -1;
    text-align: center;
}

.champion-brand
.bot12-header-profit-card
> .bot12-header-profit-cell {
    border-top: 0;
    border-left: 0;
    text-align: center;
    justify-items: center;
}

.bot12-header-capital,
.bot12-header-balance,
.bot12-header-current-profit {
    grid-column: span 2;
}

.bot12-header-max-profit,
.bot12-header-max-lose {
    grid-column: span 3;
    border-top: 1px solid #29345d !important;
}

.bot12-header-balance,
.bot12-header-current-profit,
.bot12-header-max-lose {
    border-left: 1px solid #29345d !important;
}

.bot12-header-profit-main strong {
    font-size: 17px;
}

.bot12-header-profit-minor strong {
    font-size: 14px;
}

/*
 * Tổng thể Bot:
 * 3 ô hàng trên và 2 ô hàng dưới.
 */
.bot12-overall-grid {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.bot12-overall-capital,
.bot12-overall-balance,
.bot12-overall-profit {
    grid-column: span 2;
}

.bot12-overall-pmax,
.bot12-overall-pmin {
    grid-column: span 3;
}

/*
 * Chiều cao hiện tại 64px giảm thêm khoảng 15% còn 54px.
 * Giá trị chính giảm khoảng 20%.
 */
.bot12-overall-card {
    min-height: 54px;
    gap: 1px;
    padding: 4px 8px;
}

.bot12-overall-card span {
    line-height: 1;
}

.bot12-overall-card strong {
    font-size: 19px;
    line-height: 1;
}

.bot12-overall-card small {
    line-height: 1;
}

.bot12-overall-card-small strong {
    font-size: 15px;
}

@media (max-width: 680px) {
    .bot12-overall-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bot12-overall-capital,
    .bot12-overall-balance,
    .bot12-overall-profit,
    .bot12-overall-pmax,
    .bot12-overall-pmin {
        grid-column: span 1;
    }

    .bot12-overall-pmin {
        grid-column: 1 / -1;
    }
}

/* NIMOWEB_UI4_TEXT_SPACING_V1 */

/*
 * Tổng thể Bot 1–2:
 * - 54px tăng 5% thành khoảng 57px.
 * - Tách khoảng cách giữa nhãn, giá trị và dòng phụ.
 */
.bot12-overall-card {
    min-height: 57px;
    gap: 3px;
    padding: 5px 8px;
}

.bot12-overall-card span {
    line-height: 1.1;
}

.bot12-overall-card strong {
    line-height: 1.08;
}

.bot12-overall-card small {
    margin-top: 1px;
    line-height: 1.1;
}

/*
 * Tiêu đề LỢI NHUẬN BOT:
 * 10px tăng 30% thành 13px.
 */
.bot12-header-profit-title {
    padding-bottom: 3px;
    font-size: 13px;
    line-height: 1.1;
}

/*
 * Max Profit và Max Lose:
 * tăng đồng đều nhãn và giá trị khoảng 5%.
 */
.bot12-header-max-profit span,
.bot12-header-max-lose span {
    font-size: 10.5px;
}

.bot12-header-max-profit strong,
.bot12-header-max-lose strong {
    font-size: 14.7px;
}

/*
 * Căn giữa nội dung tài khoản đang đăng nhập.
 */
.account-identity {
    width: 100%;
    text-align: center;
}

.account-identity small,
.account-identity strong,
.account-identity span {
    text-align: center;
}

/* NIMOWEB_UI5_SPACING_STATS_V1 */

/*
 * Max Profit / Max Lose:
 * giãn nhẹ khoảng cách nhãn -> giá trị -> vòng.
 */
.bot12-header-max-profit,
.bot12-header-max-lose {
    gap: 4px;
}

.bot12-header-max-profit small,
.bot12-header-max-lose small {
    margin-top: 1px;
    line-height: 1.15;
}

/*
 * TOP 1 / TOP 2 / TOP 3:
 * tên và kim cương tăng 10% từ 12px -> 13.2px.
 * Khoảng cách Creepy -> 4.500 tăng từ 3px -> 5px.
 */
.top-entry strong {
    font-size: 13.2px;
    line-height: 1.1;
}

.top-entry span {
    margin-top: 5px;
    font-size: 13.2px;
    line-height: 1.1;
}

/*
 * Thống kê từng mặt:
 * Icon + Số lần + W/L + Giam nằm cùng một hàng.
 * Không còn text tên mặt như Dâu/Kiwi...
 */
.stat-card-inline {
    padding: 9px;
}

.stat-inline-row {
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.stat-inline-icon {
    width: 34px;
    height: 34px;
    justify-self: center;
    border: 1px solid rgba(137, 154, 193, .18);
    border-radius: 7px;
    background: rgba(255,255,255,.05);
    object-fit: contain;
}

.stat-card-inline dl {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.stat-card-inline dl div {
    min-width: 0;
    text-align: center;
}

.stat-card-inline dt {
    color: #7f8cac;
    font-size: 9px;
    line-height: 1.05;
    white-space: nowrap;
}

.stat-card-inline dd {
    margin: 5px 0 0;
    font-size: 15.6px;
    font-weight: 800;
    line-height: 1.05;
}

/*
 * Vòng hiện tại / Đã ghi:
 * căn chính giữa toàn bộ nội dung trong từng ô.
 */
.stats-summary > div {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.stats-summary span,
.stats-summary strong {
    width: 100%;
    text-align: center;
}

.stats-summary strong {
    margin-top: 5px;
}

@media (max-width: 480px) {
    .stat-inline-row {
        grid-template-columns:
            38px minmax(0, 1fr);
        gap: 8px;
    }

    .stat-card-inline dl {
        gap: 5px;
    }
}

/* NIMOWEB_UI6R_ALIGN_FOOT_V1 */

/*
 * Vòng hiện tại / Đã ghi:
 * giữ giảm chiều cao khoảng 15%.
 */
.stats-summary > div {
    padding: 6px 10px;
}

.stats-summary span,
.stats-summary strong {
    line-height: 1.05;
}

/*
 * Desktop:
 *
 * KHÔNG kéo dài bảng TOP KHỦNG KHIẾP.
 *
 * Sidebar cao bằng BẢNG CẦU NIMO.
 * Bảng thống kê nằm trên.
 * TOP KHỦNG KHIẾP giữ chiều cao tự nhiên và được đẩy
 * xuống dưới để CHÂN panel ngang chân BẢNG CẦU NIMO.
 */
@media (min-width: 1181px) {
    .champion-layout {
        align-items: stretch;
    }

    .dashboard-sidebar {
        height: 100%;
        grid-template-rows:
            auto auto;
        align-content: space-between;
    }

    .top-huge-panel {
        display: block;
        min-height: 0;
    }

    .top-huge-scroll {
        flex: none;
        max-height: 460px;
    }
}

/*
 * Khôi phục giới hạn chiều cao Top trước UI-6
 * cho màn hình desktop hẹp hơn.
 */
@media (min-width: 1181px) and (max-width: 1480px) {
    .top-huge-scroll {
        max-height: 420px;
    }
}


/* NIMOWEB_UI6S_TOP_HUGE_HEAD_UP_V1 */
/*
 * Muc tieu:
 * - Giu nguyen Bang thong ke.
 * - Giu chan duoi cua TOP KHUNG KHIEP dep nhu hien tai.
 * - Keo dau panel TOP KHUNG KHIEP len gan Bang thong ke hon.
 * - Khong keo full bang Top.
 */
@media (min-width: 1181px) {
    .dashboard-sidebar {
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
        row-gap: 10px;
    }

    .stats-side-panel {
        margin-bottom: 0;
    }

    .top-huge-panel {
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 4px;
    }

    .top-huge-panel .panel-header,
    .top-huge-panel .section-header,
    .top-huge-panel > header {
        margin-bottom: 8px;
    }

    .top-huge-scroll,
    .top-huge-panel .compact-table-wrap {
        flex: 0 0 auto;
        margin-top: 0;
        max-height: 460px;
    }
}

@media (min-width: 1181px) and (max-width: 1480px) {
    .dashboard-sidebar {
        row-gap: 8px;
    }

    .top-huge-panel .panel-header,
    .top-huge-panel .section-header,
    .top-huge-panel > header {
        margin-bottom: 6px;
    }

    .top-huge-scroll,
    .top-huge-panel .compact-table-wrap {
        max-height: 420px;
    }
}



/* NIMOWEB_UI6V_INNER_FIXED_HEIGHT_V1 */
/*
 * CHI CHINH KHUNG BANG BEN TRONG TOP KHUNG KHIEP.
 *
 * KHONG sua:
 * - khung panel ngoai
 * - vi tri dau bang
 * - trai/phai
 * - bang thong ke
 *
 * Chi ha DAY khung trong bang chieu cao px co dinh.
 * Khong flex:1.
 * Khong height:100%.
 * Khong max-height:none.
 */
@media (min-width: 1181px) {
    .top-huge-panel > .top-huge-scroll {
        flex: 0 0 auto;
        height: 567px;
        max-height: 567px;
    }
}

@media (min-width: 1181px) and (max-width: 1480px) {
    .top-huge-panel > .top-huge-scroll {
        height: 527px;
        max-height: 527px;
    }
}



/* NIMOWEB_STATUS_3BOT_PARTIAL_V1 */
.online-status-card-content{
    justify-content:center;
    gap:2px;
    text-align:left;
}

.online-status-title{
    display:block;
    margin:0 0 2px;
    color:#eef2ff;
    font-size:12px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:.035em;
    text-align:left;
}

.online-bot-list{
    display:grid;
    gap:1px;
    min-width:0;
}

.online-bot-state-row{
    display:grid;
    grid-template-columns:
        8px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-width:0;
    color:#dce3fa;
    font-size:11px;
    font-weight:650;
    line-height:1.25;
}

.online-bot-state-row span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.online-bot-state-row b{
    color:#f5f7ff;
    font-weight:900;
}

.header-status-dot.status-recovering{
    background:#ffd166;
    box-shadow:
        0 0 0 3px rgba(255,209,102,.10),
        0 0 10px rgba(255,209,102,.45);
}

.header-status-dot.status-unknown{
    background:#6f7896;
    box-shadow:
        0 0 0 3px rgba(111,120,150,.10),
        0 0 8px rgba(111,120,150,.28);
}

.online-status-divider{
    height:1px;
    margin:2px 0;
    background:#273257;
}

.online-server-row{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    color:#aeb8d7;
    font-size:10px;
    font-weight:750;
    line-height:1.2;
    white-space:nowrap;
}

.online-server-row b{
    min-width:55px;
    color:#eef2ff;
    font-weight:900;
}

.online-server-row i{
    color:#566282;
    font-style:normal;
}


/* NIMOWEB_STATUS_CARD_UI_V2
   Title = 50% cua 12px cu
   Bot rows = 120% cua 11px cu
   VPS rows = giu 10px
   Mau % theo backend value_state
*/
.online-status-card-content{
    gap:1px;
}

.online-status-title{
    margin-bottom:1px;
    font-size:6px;
}

.online-bot-list{
    gap:2px;
}

.online-bot-state-row{
    font-size:13.2px;
    font-weight:700;
    line-height:1.15;
}

.online-status-divider{
    margin:3px 0 2px;
}

.online-server-row{
    gap:4px;
}

.online-resource-value{
    font-size:inherit;
    font-weight:900;
}

.online-resource-value.status-healthy{
    color:#4ade80;
}

.online-resource-value.status-danger{
    color:#ff5d73;
}

.online-resource-value.status-unknown{
    color:#8f99b8;
}


/* NIMOWEB_STATUS_TITLE_SPECIFICITY_FIX_V1
   Ghi de rule chung .online-card-content > strong
   cho rieng tieu de Trang thai 3 BOT.
*/
.online-card-content.online-status-card-content > strong.online-status-title{
    font-size:6px;
}


/* NIMOWEB_STATUS_CARD_UI_V3
   Title: 16px + center
   Bot rows: 12.5px + center whole row
   VPS rows: 12.5px + center
*/
.online-card-content.online-status-card-content > strong.online-status-title{
    width:100%;
    margin:0 0 3px;
    font-size:16px;
    line-height:1.1;
    text-align:center;
}

.online-bot-list{
    width:100%;
    gap:3px;
}

.online-bot-state-row{
    width:100%;
    grid-template-columns:8px auto;
    justify-content:center;
    column-gap:7px;
    font-size:13px;
    line-height:1.2;
    text-align:left;
}

.online-bot-state-row span{
    width:auto;
    overflow:visible;
    text-overflow:clip;
}

.online-status-divider{
    width:100%;
    margin:4px 0 3px;
}

.online-server-row{
    width:100%;
    justify-content:center;
    gap:5px;
    font-size:12.5px;
    line-height:1.2;
    text-align:center;
}

.online-server-row b{
    min-width:0;
}

/*
 * NIMOWEB_UI_TUNE_U2
 *
 * 1. TRẠNG THÁI 3 BOT:
 *    tăng khoảng cách dòng +5%
 *    line-height 1.20 -> 1.26.
 *
 * 2. Ba tiêu đề chính dùng màu cam đồng bộ palette hiện tại.
 *
 * 3. TOP KHỦNG KHIẾP sau khi bỏ cột Giảm cầu:
 *    dàn lại 6 cột còn lại.
 */

.online-bot-state-row {
    line-height: 1.35;
}

.dashboard-section-title {
    color: #ffd37a;
    font-size: 18px;
}

.top-huge-table th:nth-child(1) {
    width: 18%;
}

.top-huge-table th:nth-child(2) {
    width: 10%;
}

.top-huge-table th:nth-child(3) {
    width: 20%;
}

.top-huge-table th:nth-child(4),
.top-huge-table th:nth-child(5),
.top-huge-table th:nth-child(6) {
    width: 17.333333%;
}

/*
 * NIMOWEB_UI_U6
 * Chi gian rieng VPS BOT / VPS Tubo.
 * BOT1/BOT2/BOT3 van giu line-height 1.35.
 */
.online-server-row {
    line-height: 1.35;
}


/* NIMOWEB_PROFIT_THEO_BOT_CSS_V1 */
/*
 * Tổng thể Bot 1–2:
 * Vốn hôm nay | KC hiện tại | Profit hiện tại
 * Profit theo Bot | Pmax | Pmin
 */
.bot12-overall-bot-profit,
.bot12-overall-pmax,
.bot12-overall-pmin {
    grid-column: span 2;
}

@media (max-width: 680px) {
    .bot12-overall-bot-profit,
    .bot12-overall-pmax,
    .bot12-overall-pmin {
        grid-column: span 1;
    }
}


/* NIMOWEB_TONGTHE_UI_P3_FIXED */
/*
 * Tổng thể Bot 1/2
 *
 * Hàng 1:
 * Vốn hôm nay | Profit hiện tại | Pmax
 *
 * Hàng 2:
 * KC hiện tại | Profit theo Bot | Pmin
 *
 * Ô Vốn hôm nay là chuẩn kích thước chữ.
 * Không thay class money-* nên logic màu giữ nguyên.
 */
.bot12-overall-grid > .bot12-overall-card {
    grid-column: span 2;
}

.bot12-overall-grid > .bot12-overall-card span {
    font-size: 12px;
}

.bot12-overall-grid > .bot12-overall-card strong {
    font-size: 19px;
}

.bot12-overall-grid > .bot12-overall-card small {
    font-size: 11px;
}

@media (max-width: 680px) {
    .bot12-overall-grid > .bot12-overall-card {
        grid-column: span 1;
    }
}


/* NIMOWEB_BASIC_M500_COLOR_V2
   Chỉ màu giao diện Basic-M500.
   Không liên quan realtime/backend.
*/
.m500-state-wait {
    color: #ff6b84 !important;
}

.m500-state-hunt {
    color: #35e68a !important;
}

.m500-value-ok {
    color: #35e68a !important;
}

.m500-value-bad {
    color: #ff6b84 !important;
}

.m500-value-neutral {
    color: inherit !important;
}

/* Phần Start | ≤110 | ≤36 | ≤8 giữ cùng tông xanh Start.
   Các số thực tế vẫn được m500-value-ok/bad ghi đè riêng. */
.m500-summary-status-line {
    color: #8f9abd !important;
}

.m500-summary-status-line .m500-value-ok {
    color: #35e68a !important;
}

.m500-summary-status-line .m500-value-bad {
    color: #ff6b84 !important;
}