/* Tong toi (#1e1e1e / #2d2d2d); mau nut theo y nghia (xanh = chay, do = dung/xoa...). */
:root {
  --bg: #1e1e1e; --panel: #252526; --field: #2d2d2d; --line: #3a3a3a;
  --text: #f2f2f2; --muted: #9a9a9a; --accent: #4a90e2;
  --go: #27ae60; --danger: #c0392b; --warn: #e67e22; --neutral: #5f6b6d;
  --ok: #5fd38d; --err: #ff7b72; --head: #f0b35a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ── Khung ── */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--text); letter-spacing: .02em; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav form { margin: 0; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
.link:hover { color: var(--text); }

.dash { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; height: calc(100vh - 45px - 42px); min-height: 560px; }
.page { padding: 16px; max-width: 1000px; margin: 0 auto; }
.page h1 { font-size: 20px; margin: 4px 0 16px; }

/* ── Form ── */
input, select { background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.btn { background: var(--neutral); border: 1px solid transparent; border-radius: 4px; padding: 7px 12px; font-weight: 600; cursor: pointer; white-space: nowrap; color: #fff; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); }
.btn.go { background: var(--go); }
.btn.danger { background: var(--danger); }
.btn.warn { background: var(--warn); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.loading { position: relative; color: transparent; }
.btn.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dang nhap ── */
.auth { flex: 1; display: grid; place-items: center; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.auth .card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.auth h1 { margin: 0 0 4px; font-size: 20px; }
.auth label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
.auth input { color: var(--text); font-size: 14px; padding: 8px 10px; }
.auth .btn { padding: 9px; margin-top: 4px; }
.back { font-size: 13px; text-align: center; }
/* Ho so: 1 dong "nhan - gia tri" */
.row-kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 0; font-size: 14px; }
.row-kv span { color: var(--muted); font-size: 13px; }
.row-kv b { word-break: break-all; }
.msg { margin: 0; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.msg.err { background: rgba(255,123,114,.12); color: var(--err); }
.msg.ok { background: rgba(95,211,141,.12); color: var(--ok); }

/* ── Thanh cong cu ── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.field { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.field.cred { flex: 1 1 420px; margin: 0; }
.balance { color: #00e676; font-weight: 700; white-space: nowrap; }
.spacer { flex: 1; }

/* ── Bang campaign ── */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
/* Chia chieu cao co dinh: bang 1.2 / log 1, bang tu cuon ben trong -> nhieu campaign cung khong day mat log */
.dash > .panel { flex: 3 1 0; min-height: auto; }   /* bang cao gap 3 log; min-height auto: khong co nho hon nut -> nut khong de len log */
.dash > .log-panel { flex: 1 1 0; min-height: 180px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h2 { font-size: 14px; margin: 0; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--field); color: var(--muted); border: 1px solid var(--line); }
.pill.on { color: #0e1a12; background: var(--ok); border-color: var(--ok); font-weight: 700; }
.panel-head .pill { margin-left: auto; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.camp-wrap { flex: 1; min-height: 140px; }
/* Man hinh lon (chieu cao chia co dinh): so hang campaign KHONG tinh vao chieu cao toi thieu cua khung
   (.dash > .panel min-height: auto) - bang cuon ben trong, nhieu campaign khong day log xuong */
@media (min-width: 701px) and (min-height: 561px) { .dash .camp-wrap { contain: size; } }
.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 6px 10px; text-align: center; border-bottom: 1px solid #303030; }
.grid th { position: sticky; top: 0; background: #333; font-weight: 600; font-size: 13px; z-index: 1; }
/* Hang tong cuoi bang campaign (tabletotal.js): dinh day khung cuon nhu dong tieu de dinh tren */
.grid tfoot td { position: sticky; bottom: 0; background: #333; z-index: 1; border-top: 2px solid var(--line);
  border-bottom: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid tfoot td.total-label { text-align: left; color: var(--text); }
.grid tfoot td.total-num.muted, .grid tfoot td.roi-cell.muted { color: var(--muted); font-weight: 400; }
#campTable th[data-col] { cursor: pointer; user-select: none; }
#campTable th[data-col]::after { content: attr(data-arrow); margin-left: 4px; font-size: 10px; color: var(--accent); }
#campTable tbody tr { cursor: default; }
#campTable tbody tr:hover { background: #2f2f30; }
#campTable tbody tr.sel { background: rgba(74,144,226,.28); }
.grid td.chk, .grid th.chk { width: 36px; padding: 6px; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.st-run { color: var(--ok); }
.st-stop { color: var(--muted); }
.empty { color: var(--muted); padding: 24px !important; cursor: default; }
/* Bang campaign 4 trang: cac cot CHIA DEU (table-layout: fixed), noi dung dai hon cot thi cat "..." cho vua
   cot, re chuot xem du (static/cellclip.js). Chi bang trong .dash - bang trang Admin co o nhieu dong / nut nen
   khong ap. O ID cua Camp Manager con icon Clone -> cat phan chu ben trong (.cut-in). */
.dash .grid :where(td:not(.chk, .opt-cell, .editing, .empty)) { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.grid .cut-in { display: inline-block; vertical-align: bottom; max-width: calc(100% - 22px); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Log ── */
.log-panel { flex: 1; padding: 0; overflow: hidden; }
.log { margin: 0; padding: 10px 12px; height: 100%; min-height: 160px; overflow: auto; background: var(--field);
  font: 12.5px/1.5 Consolas, "Cascadia Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.l-ok { color: var(--ok); } .l-err { color: var(--err); } .l-head { color: var(--head); }

/* ── Hop thoai cai dat ── */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.opt-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.opt-form h3 { margin: 0 0 4px; font-size: 16px; }
.opt-form h4 { margin: 12px 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.opt-form label { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 12px; color: #ccc; font-size: 13px; }
.opt-form label.check { display: flex; gap: 8px; color: var(--text); }
.opt-form label.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.opt-form .off { opacity: .4; pointer-events: none; }
.note { margin: 0; color: var(--muted); font-size: 12px; white-space: pre-line; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.row-form input[type=email], .row-form input[type=text] { flex: 1 1 200px; }
.check { display: flex; align-items: center; gap: 6px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.4); max-width: calc(100vw - 32px); z-index: 10; }

/* ── Dien thoai ── */
@media (max-width: 700px) {
  .dash { height: auto; }
  .dash > .panel, .dash > .log-panel { flex: none; }
  .camp-wrap { max-height: 70vh; }
  .log { height: 40vh; }
  .spacer { display: none; }
  .field.cred { flex-basis: 100%; flex-wrap: wrap; }
  .opt-form label { grid-template-columns: 1fr 110px; }
  .grid th, .grid td { padding: 6px; }
}

/* ── Nut tu toi uu tren tung dong ── */
.opt-col { width: 150px; }
.opt-cell { white-space: nowrap; }
.ib { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 2px; padding: 0; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--muted); cursor: pointer; }
.ib svg { width: 16px; height: 16px; fill: currentColor; }
.ib:hover:not(:disabled) { color: var(--text); border-color: #555; }
.ib:disabled { opacity: .5; cursor: default; }
.ib.toggle { color: var(--go); border-color: rgba(39,174,96,.5); }
.ib.toggle:hover:not(:disabled) { background: var(--go); color: #fff; }
.ib.toggle.on { background: var(--warn); border-color: var(--warn); color: #fff; }
.ib.toggle.on:hover:not(:disabled) { filter: brightness(1.12); }
.ib.edit:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.next { display: inline-block; min-width: 38px; margin-left: 4px; font-size: 11px; color: var(--muted); vertical-align: middle; }
#campTable tbody tr.opt-on td:nth-child(2) { box-shadow: inset 3px 0 0 var(--warn); }
.dlg-sub { margin: -2px 0 6px; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .opt-col { width: auto; } .next { display: none; } }

/* -- Dang ky / quan tri -- */
.hint { margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.auth.stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.auth.stack .card { width: 100%; max-width: 360px; }
.page h2 { font-size: 15px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.page .msg { margin-bottom: 12px; }
.mono { font-family: Consolas, Menlo, monospace; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; margin: 0 2px; }
.st-bad { color: var(--err); cursor: help; }
.warn-pill { background: var(--warn); color: #fff; border-color: var(--warn); font-weight: 700; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.admin-cols .card { display: flex; flex-direction: column; gap: 10px; }
.admin-cols h2 { margin: 0; }
textarea { background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 8px; color: var(--text);
  font: 13px/1.5 Consolas, Menlo, monospace; resize: vertical; width: 100%; }
textarea:focus { outline: none; border-color: var(--accent); }
@media (max-width: 700px) { .admin-cols { grid-template-columns: 1fr; } }

.back-top { display: inline-block; margin-bottom: 8px; }
.back-top:hover { color: var(--text); border-color: #555; }

/* -- Logo + chan trang -- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand img { border-radius: 6px; }
.page { flex: 1; width: 100%; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px;
  border-top: 1px solid var(--line); font-size: 12px; color: #bdbdbd; }
.site-footer .muted { color: #7d7d7d; }
@media (max-width: 700px) { .site-footer { flex-direction: column; } }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand img { border-radius: 7px; }
.role-admin { background: var(--warn); color: #fff; border-color: var(--warn); }
.role-manager { color: var(--accent); border-color: var(--accent); }
.admin-cols select { width: 100%; }

/* -- O nhap key: hien key da luu + nut mat -- */
.cred-box { position: relative; flex: 1; min-width: 140px; display: flex; }
.cred-box input { flex: 1; padding-right: 34px; font-family: Consolas, Menlo, monospace; }
.eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 30px; height: 28px; padding: 0;
  display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.eye:hover { color: var(--text); }
.eye svg { width: 18px; height: 18px; fill: currentColor; }

/* -- O tim kiem campaign -- */
.search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.search svg { position: absolute; left: 9px; width: 16px; height: 16px; fill: var(--muted); pointer-events: none; }
.search input { flex: 1; min-width: 0; padding-left: 32px; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
#searchCount { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -- Thanh menu tren moi trang -- */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.topbar nav a { color: var(--muted); padding: 5px 2px; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.topbar nav a.nav-cta { color: #fff; background: var(--accent); padding: 5px 12px; border-radius: 4px; border-bottom: 0; }
.topbar nav a.nav-cta:hover { filter: brightness(1.12); }
.topbar nav a.nav-cta.active { background: transparent; color: var(--text); padding: 5px 2px; border-radius: 0;
  border-bottom: 2px solid var(--accent); }
.account-link { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Menu tai khoan: chuyen / them / dang xuat (nhieu tai khoan cung luc) */
.acct-menu { position: relative; }
.acct-menu summary { cursor: pointer; list-style: none; color: var(--muted); padding: 4px 22px 4px 10px;
  border: 1px solid var(--line); border-radius: 4px; position: relative; }
.acct-menu summary::-webkit-details-marker { display: none; }
.acct-menu summary::after { content: "▾"; position: absolute; right: 8px; top: 4px; }
.acct-menu summary:hover, .acct-menu[open] summary { color: var(--text); }
.acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.acct-pop.to-left { right: auto; left: 0; }
.acct-pop form { margin: 0; }
.acct-head { padding: 4px 14px 6px; font-size: 12px; color: var(--muted); }
.topbar nav .acct-pop .acct-item { display: block; width: 100%; text-align: left; padding: 7px 14px; border: 0;
  background: none; color: var(--text); font: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav .acct-pop .acct-item:hover { background: var(--field); }
.acct-pop .acct-item b, .acct-pop .acct-item small { display: block; overflow: hidden; text-overflow: ellipsis; }
.acct-pop .acct-item.on b { display: inline; }
.acct-pop .acct-item small { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.acct-pop .acct-item.on { color: var(--accent); cursor: default; }
.acct-pop .acct-item.on:hover { background: none; }
.topbar nav .acct-pop .acct-sep { border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 8px 16px; }
  .topbar nav { gap: 12px; }
  .account-link { max-width: 140px; }
}

/* -- Nut doi ngon ngu tren thanh menu -- */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; order: 99; }
.topbar nav .lang-switch a { padding: 3px 8px; font-size: 12px; font-weight: 600; color: var(--muted); border: 0; }
.topbar nav .lang-switch a + a { border-left: 1px solid var(--line); }
.topbar nav .lang-switch a.on { background: var(--accent); color: #fff; }
.topbar nav .lang-switch a:not(.on):hover { color: var(--text); background: var(--field); }

/* Che key/token bang dau cham ma KHONG dung type=password (tranh Chrome hoi luu mat khau) */
input.masked { -webkit-text-security: disc; text-security: disc; }
input.masked::placeholder { -webkit-text-security: none; }

/* -- Trang chi tiet nguoi dung -- */
.user-link { color: var(--text); border-bottom: 1px dashed #666; }
.user-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ud-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; margin: 6px 0 14px; word-break: break-all; }
.ud-card { margin-bottom: 14px; }
.ud-card h2 { margin: 0 0 10px; font-size: 15px; }
.ud-card h3 { margin: 14px 0 6px; font-size: 13px; }
.ud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ud-row h2 { margin: 0; }
.ud-row form { margin: 0; }
.page-access { display: grid; gap: 0; max-width: 520px; }
.page-access .ud-row { padding: 6px 0; margin: 0; border-bottom: 1px solid var(--line); }
.page-access .ud-row:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.st-pill-ok { color: #0e1a12; background: var(--ok); border-color: var(--ok); }
.st-pill-bad { color: #fff; background: var(--danger); border-color: var(--danger); }
table.keys th { position: static; text-align: left; width: 120px; background: transparent; }
table.keys td { text-align: left; }
.key-cell { word-break: break-all; }
.key-val.revealed { color: var(--head); background: rgba(240,179,90,.08); padding: 2px 4px; border-radius: 3px; user-select: all; }
.key-result { font-size: 12px; white-space: nowrap; }
.key-result.ok { color: var(--ok); }
.key-result.bad { color: var(--err); }
.grid td.left { text-align: left; }
.grid tr.opt-on td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.ud-log { max-height: 360px; height: auto; border-radius: 4px; }
.audit { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
@media (max-width: 700px) { table.keys th { width: auto; } .key-result { white-space: normal; } }
.key-cell .muted { word-break: normal; white-space: nowrap; }
@media (max-width: 700px) {
  table.keys, table.keys tbody, table.keys tr, table.keys th, table.keys td { display: block; width: auto; }
  table.keys tr { padding: 8px 4px; border-bottom: 1px solid #303030; }
  table.keys th, table.keys td { border: 0; padding: 3px 6px; }
  table.keys .row-actions { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; }
  table.keys .row-actions .btn { margin: 0; }
}

.src-note { font-size: 12px; color: var(--muted); background: var(--field); border: 1px dashed var(--line);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 700px) { .src-note { white-space: normal; } }

.opt-form h3:focus { outline: none; }

/* -- Nut bat/tat tu toi uu hang loat -- */
.act-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.btn.ghost-warn { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
.btn.ghost-warn:hover:not(:disabled) { background: rgba(230,126,34,.12); filter: none; }
@media (max-width: 700px) { .act-sep { display: none; } }

/* -- Dong vua doi trang thai nhay sang ~2s -- */
@keyframes rowflash { 0%, 30% { background: rgba(95,211,141,.28); } 100% { background: transparent; } }
#campTable tbody tr.flash td { animation: rowflash 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) { #campTable tbody tr.flash td { animation: none; } }


/* -- Camp dang dung: nut bat tu toi uu bi khoa -- */
.ib.toggle.blocked { color: var(--muted); border-color: var(--line); opacity: .4; cursor: not-allowed; }
.ib.toggle.blocked:hover:not(:disabled) { background: var(--field); color: var(--muted); }
.contact { margin: 0; font-size: 13.5px; color: #cfcfcf; }
.contact a { color: var(--accent); }

/* TsArbitrage (chi admin) */
.arb .toolbar + .toolbar { margin-top: -4px; }
.arb td.spot { cursor: text; font-variant-numeric: tabular-nums; }
.arb .spot-edit { width: 100%; max-width: 110px; padding: 2px 6px; text-align: center; }
.arb .panel > .note { margin-top: 6px; }

/* Camp Manager */
.cm .cm-group { display: contents; }
/* "Dang chay..." hien len khong duoc lam cao them / xuong dong lai -> dat de len, chua san cho ben phai */
.cm .panel-head { position: relative; padding-right: 104px; min-height: 26px; }
.cm #busy { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 0; }
.cm #cmTable th[data-col] { cursor: pointer; user-select: none; white-space: nowrap; }
.cm #cmTable tbody tr { cursor: default; }
.cm #cmTable tbody tr:hover { background: #2f2f30; }
.cm #cmTable tbody tr.sel { background: rgba(74,144,226,.28); }
.cm #cmTable td { white-space: nowrap; }
.cm #cmTable { table-layout: fixed; }   /* cot chia deu; min-width theo so cot: cm.js renderTable */
/* O sua duoc ngay tren bang (bid, ten, geo...) - xem cell_edits trong campmgr/core.py */
/* Icon thao tac theo dong trong o ID (hien chi co Clone) */
.cm #cmTable .row-ico { background: none; border: 0; padding: 0; margin-left: 7px; line-height: 0;
  color: var(--muted); cursor: pointer; vertical-align: -2px; }
.cm #cmTable .row-ico:hover { color: var(--accent); }
.cm #cmTable tbody tr.sel .row-ico { color: #cfe0f5; }
.cm #cmTable td.ed { cursor: text; }
.cm #cmTable td.ed:hover { background: rgba(74,144,226,.22); box-shadow: inset 0 0 0 1px var(--accent); }
/* O nhap giu nguyen padding cua o bang + cao dung bang dong chu cu (cm.js dat height), cot
   thi da bi ghim (lockCols) -> mo o nhap khong lam bang xe dich. Ben rong theo so ky tu. */
.cm #cmTable td.editing { overflow: hidden; }
.cm #cmTable .cell-in { max-width: 100%; vertical-align: top; padding: 0 4px; font: inherit; text-align: inherit;
  background: #1b1b1c; color: #fff; border: 1px solid var(--accent); border-radius: 3px; }
.cm .field.check { gap: 6px; }
.cm-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
.cm-dlg:has(.cm-nb), .cm-dlg:has(.cm-lf .cm-list) { width: min(980px, calc(100vw - 32px)); }
/* Khong hieu ung luc mo: hien la thay ngay, khong cho doi. Them mo dan
   0,12s nghe thi muot nhung chinh 0,12s do lai la phan cho lau nhat con lai sau khi da rut
   duoc vong goi server, nen bo han. */
@media (prefers-reduced-motion: reduce) { .cm-dlg[open], .cm-dlg[open]::backdrop { animation: none; } }
/* Dang cho server (cm.js gan sau 250ms): vach chay o dinh trang + con tro doi */
body.cm-busy { cursor: progress; }
body.cm-busy::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60;
  pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: cmBusyBar 1.1s linear infinite; }
@keyframes cmBusyBar { from { background-position: -45% 0; } to { background-position: 145% 0; } }
@media (prefers-reduced-motion: reduce) { body.cm-busy::after { animation: none; background-position: 0 0; background-size: 100% 100%; } }
.cm-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cm-form h3 { margin: 0; font-size: 16px; }
.cm-dlg-head { display: flex; align-items: center; gap: 8px; }
.cm-dlg-head h3 { flex: 1; }
/* Hop thoai cai dat: phan noi dung tu cuon, hop thoai khong tran ra
   ngoai man hinh; luc doi noi dung thi cm.js cho khung co gian co da (class morphing). */
.cm-dlg-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: calc(100vh - 150px); }
.cm-dlg.morphing { overflow: hidden; }
.cm-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.cm-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, max-content)); gap: 6px 10px; align-items: center; }
.cm-label { color: #ddd; font-size: 13px; }
.cm-label.muted { color: var(--muted); font-size: 12px; }
.cm-label.b, .cm-check.b { font-weight: 700; }
.cm-label.accent { color: var(--ok); font-weight: 700; }
.cm-pre { white-space: pre-line; margin: 0; }
.cm-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.cm-check input, .cm-li input { accent-color: var(--accent); }
/* O tha xuong co o tick ngay tai o bang (kieu "checks": Devices / OS / Categories...) */
.cm-drop { position: absolute; z-index: 40; min-width: 200px; max-width: min(320px, calc(100vw - 16px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; }
.cm-drop-head { font-weight: 700; font-size: 13px; }
.cm-drop-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; padding-right: 4px; }
.cm-drop-list .cm-check { padding: 3px 2px; gap: 8px; white-space: nowrap; }
.cm-drop-list .cm-check:hover { background: rgba(255,255,255,.05); }
.cm-drop-acts { display: flex; gap: 6px; justify-content: flex-end; }
.cm-list { max-height: 240px; min-height: 60px; overflow: auto; border: 1px solid var(--line); border-radius: 4px;
  background: var(--field); padding: 4px 6px; display: flex; flex-direction: column; min-width: 160px; }
.cm-li { font-size: 13px; padding: 2px 0; cursor: pointer; white-space: nowrap; }
.cm-lf { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0; min-width: 0; }
.cm-lf legend { color: #ccc; font-weight: 700; font-size: 12.5px; padding: 0 4px; }
.cm-nb .cm-tab { margin: 10px 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.cm-nb > div { display: flex; flex-direction: column; gap: 8px; }
.cm-dlg textarea { width: 100%; box-sizing: border-box; }
.cm-dlg select { max-width: 100%; }
.cm-frame { min-width: 0; }

/* Link Telegram: nut xanh Telegram de nguoi dung thay ro la bam duoc */
.tg-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
           background: #229ed9; color: #fff !important; font-weight: 700; text-decoration: none;
           box-shadow: 0 0 0 0 rgba(34,158,217,.5); transition: background .15s, transform .15s, box-shadow .15s; }
.tg-link:hover, .tg-link:focus-visible { background: #34b3ef; transform: translateY(-1px);
           box-shadow: 0 3px 10px rgba(34,158,217,.45); text-decoration: none; }
.tg-link svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.footer-contact { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-form { display: inline; }
.inline-form .pill { cursor: pointer; font-size: 11px; padding: 2px 8px; margin-left: 4px; }
.stack-form { display: flex; flex-direction: column; gap: 12px; }

/* ── Trang chu (landing) ── */
.lp { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px 24px; }
.lp h1, .lp h2, .lp h3 { margin: 0; line-height: 1.2; }
.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 64px 0 48px; }
.lp-kicker { margin: 0 0 12px; color: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.lp-hero h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -.01em; }
.lp-lead { margin: 18px 0 26px; color: #c9c9c9; font-size: 17px; line-height: 1.6; max-width: 34em; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-btn { padding: 12px 22px; font-size: 15px; border-radius: 6px; display: inline-block; }
.lp-btn.ghost { color: var(--text); }
.lp-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

.lp-mock { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
           box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(74,144,226,.08); font-size: 13px; }
.lp-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #202021; }
.lp-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #444; }
.lp-mock-bar span:nth-child(1) { background: #ff5f57; } .lp-mock-bar span:nth-child(2) { background: #febc2e; } .lp-mock-bar span:nth-child(3) { background: #28c840; }
.lp-mock-bar b { margin-left: 8px; color: var(--muted); font-weight: 600; font-size: 12px; }
.lp-mock table { width: 100%; border-collapse: collapse; }
.lp-mock th, .lp-mock td { padding: 9px 14px; text-align: left; border-bottom: 1px solid #303031; }
.lp-mock th { color: var(--muted); font-weight: 600; font-size: 12px; }
.lp-mock td i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.lp-mock td i.on { background: var(--ok); color: #0e1a12; }
.lp-mock .up { color: var(--ok); font-weight: 700; } .lp-mock .down { color: var(--err); font-weight: 700; }
.lp-mock-log { padding: 10px 14px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #bdbdbd; display: grid; gap: 5px; background: #1b1b1c; }
.lp-mock-log em { color: var(--muted); font-style: normal; margin-right: 6px; }
.lp-mock-log b { color: var(--head); font-weight: 600; }

.lp-sources { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; padding: 18px 0;
              border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.lp-sources b { color: #d6d6d6; font-size: 16px; letter-spacing: .01em; }

.lp-sec { padding: 64px 0 8px; }
.lp-sec > h2 { font-size: clamp(24px, 3vw, 32px); text-align: center; }
.lp-sub { margin: 12px auto 0; max-width: 40em; text-align: center; color: var(--muted); font-size: 15px; }
.lp-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; transition: border-color .15s, transform .15s; }
.lp-card:hover { border-color: rgba(74,144,226,.55); transform: translateY(-2px); }
.lp-card h3 { font-size: 16px; margin: 14px 0 8px; }
.lp-card p { margin: 0; color: #b8b8b8; line-height: 1.55; }
.lp-ico { width: 38px; height: 38px; padding: 8px; border-radius: 9px; background: rgba(74,144,226,.14); color: var(--accent);
          fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lp-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.lp-steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.lp-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.lp-steps h3 { font-size: 16px; margin: 14px 0 8px; }
.lp-steps p { margin: 0; color: #b8b8b8; line-height: 1.55; }

.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq h2 { margin-bottom: 24px; }
.lp-faq details { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: 10px; }
.lp-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px; list-style: none; position: relative; padding-right: 40px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 16px; top: 11px; font-size: 20px; color: var(--muted); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: 0; padding: 0 16px 16px; color: #b8b8b8; line-height: 1.6; }

.lp-final { margin: 64px 0 24px; padding: 44px 24px; text-align: center; border-radius: 14px;
            background: linear-gradient(135deg, rgba(74,144,226,.22), rgba(39,174,96,.14)); border: 1px solid rgba(74,144,226,.35); }
.lp-final h2 { font-size: clamp(22px, 3vw, 30px); }
.lp-final p { margin: 12px 0 24px; color: #cfcfcf; font-size: 15px; }
.lp-final .lp-cta { justify-content: center; }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding: 40px 0 32px; gap: 32px; }
  .lp-grid, .lp-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .lp-grid, .lp-steps { grid-template-columns: 1fr; }
  .lp-sec { padding-top: 48px; }
  .lp-btn { flex: 1 1 auto; text-align: center; }
  .lp-mock th, .lp-mock td { padding: 8px 10px; }
}
.lp-sources .lp-more { color: var(--accent); font-weight: 600; }
.log-src { color: var(--head); font-weight: 600; }
/* Cot ROI */
.roi-col { width: 80px; }
td.roi-cell { font-weight: 700; white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; }
td.roi-cell.up { color: var(--ok); }
td.roi-cell.down { color: var(--err); }
td.roi-cell.muted { font-weight: 400; }
/* Bang campaign: cac cot du lieu rong bang nhau (cot checkbox giu hep) */
/* Rong toi thieu theo so cot (giong Camp Manager: cm.js) - hep hon thi truot ngang trong khung, khong don cot */
#campTable { table-layout: fixed; min-width: calc(36px + var(--ncol, 8) * 90px); }
#campTable .roi-col { width: auto; }
/* Cot nut (Tu toi uu / ROI Track): toi da 3 nut 30px (+ le 2px) -> rong co dinh du cho nut, khong chia deu
   nhu cot du lieu (dien thoai cot chi ~90px -> nut bi bop meo) */
#campTable .opt-col { width: 124px; }
#campTable td:not(.chk):not(.opt-cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O Ten / Trang thai sua duoc ngay tren bang (quickcell.js) - cung kieu o sua cua Camp Manager */
#campTable td.ed, #campTable td.hist { cursor: pointer; }
#campTable td.hist:hover { box-shadow: inset 0 0 0 1px var(--accent); }
/* Bieu do loi nhuan 30 ngay (profithist.js) */
dialog.hist-dlg { width: min(720px, calc(100vw - 32px)); }
.hist-sums { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 4px 0 10px; }
.hist-sum { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.hist-sum b { font-size: 16px; }
.hist-svg { width: 100%; height: auto; display: block; }
.hist-svg .hb-up { fill: var(--ok); }
.hist-svg .hb-down { fill: var(--err); }
.hist-svg .hb-none { fill: var(--muted); opacity: .5; }
.hist-svg .hb-zero { stroke: var(--line); stroke-width: 1; }
.hist-svg .hb-lbl { fill: var(--muted); font-size: 10px; text-anchor: middle; }
#campTable td.ed:hover { background: rgba(74,144,226,.22); box-shadow: inset 0 0 0 1px var(--accent); }
#campTable td.editing { overflow: hidden; padding-top: 3px; padding-bottom: 3px; }
#campTable .cell-in { width: 100%; box-sizing: border-box; padding: 0 4px; font: inherit; text-align: inherit;
  background: #1b1b1c; color: #fff; border: 1px solid var(--accent); border-radius: 3px; }
/* Cot Tu toi uu: cac nut nam chinh giua, giu tron (khong co lai khi o hep) */
#campTable .opt-wrap { display: flex; justify-content: center; align-items: center; }
#campTable .opt-wrap .ib { flex: none; }
/* Mau cot Status (TsArbitrage, Camp Manager) */
.st-warn { color: var(--warn); }
td.st-bad { cursor: inherit; }

.grid tbody td.chk { cursor: pointer; }   /* chi o tick moi chon dong (4 trang) */

/* Man hinh thap (dien thoai xoay ngang, cua so thap): bo chia chieu cao co dinh bang/log - bang cao gan
   bang man hinh, cuon trang xuong de toi hang nut va log (giong dien thoai dung). */
@media (max-height: 560px) {
  .dash { height: auto; min-height: 0; }
  .dash > .panel, .dash > .log-panel { flex: none; min-height: 0; }
  .camp-wrap { flex: none; height: calc(100vh - 110px); min-height: 200px; max-height: none; }
  .log { height: 60vh; min-height: 160px; }
}

/* ── TsArbitrage: hop thoai Xoa GEO lo ── */
dialog.geo-dlg { width: min(920px, calc(100vw - 32px)); }
.geo-form { max-height: calc(100vh - 34px); overflow: auto; }
.geo-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 6px 0 4px; }
.geo-form .geo-bar label { display: flex; flex-direction: column; gap: 4px; grid-template-columns: none; font-size: 12.5px; }
.geo-bar input[type=number] { width: 90px; }
.geo-out { display: flex; flex-direction: column; gap: 14px; }
.geo-camp { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.geo-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.geo-head b { overflow-wrap: anywhere; }
.geo-head .roi-cell { margin-left: auto; font-weight: 700; }
.roi-cell.up { color: var(--ok); } .roi-cell.down { color: var(--err); }
.geo-warn { margin: 0; font-size: 12.5px; color: var(--head); }
.geo-wrap { max-height: 46vh; overflow: auto; border: 1px solid #303030; border-radius: 4px; }
.geo-table td.roi-cell { cursor: default; }
.geo-table tr.geo-off td { color: var(--muted); }
.geo-table tr.geo-off td.roi-cell { color: var(--muted); }
.geo-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) { .geo-table th, .geo-table td { padding: 5px 6px; font-size: 12px; } .geo-table .imps { display: none; } }
/* GEO Track: nguon chua ho tro (khac EvaDav) thi an cot + nut */
body.no-geo .geo-col { display: none; }
#campTable td.geo-on { color: var(--warn); font-weight: 600; }
#campTable td.geo-on::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.dlg-actions .geo-toggle { margin-right: auto; }   /* nut Bat/Tat GEO Track nam ben trai hop thoai */

/* Hop thoai xac nhan (confirm.js) thay confirm() cua trinh duyet */
dialog.ask-dlg { width: min(440px, calc(100vw - 32px)); }
.ask-msg { white-space: pre-line; margin: 4px 0 16px; line-height: 1.5; overflow-wrap: anywhere; }

/* TsArbitrage - cot eCPM gio: bang tung gio hom nay (re chuot / cham vao o) */
#campTable td.ecpm { cursor: help; }
.ecpm-pop { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45); max-height: min(70vh, 520px); overflow: auto;
  max-width: calc(100vw - 16px); font-size: 12px; }
.ecpm-pop .ecpm-title { font-weight: 700; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecpm-pop table { border-collapse: collapse; width: 100%; }
.ecpm-pop th, .ecpm-pop td { padding: 3px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.ecpm-pop th:first-child, .ecpm-pop td:first-child { text-align: left; }
.ecpm-pop th { color: var(--muted); font-weight: 600; position: sticky; top: -8px; background: var(--panel); }
.ecpm-pop tr.now td { color: var(--head); font-weight: 700; }
.ecpm-pop tfoot td { font-weight: 700; border-bottom: 0; }

/* TsArbitrage: nut ⏰ tu chay campaign luc 0h UTC (o ROI Track) */
.ib.auto:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.ib.auto.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ib.auto.on:hover:not(:disabled) { filter: brightness(1.12); }