/* Waterfall Tool — giao diện. Một điểm nhấn duy nhất: "bậc thang" giá sàn. */
:root {
  --mist: #edf2f3;
  --paper: #ffffff;
  --ink: #12313a;
  --ink-2: #4d6870;
  --ink-3: #7f979e;
  --line: #d5e0e3;
  --deep: #0f3d4a;
  --water: #0b7a8f;
  --water-soft: #d6eef2;
  --add: #1b7f52;
  --add-soft: #dcf2e6;
  --edit: #9a6508;
  --edit-soft: #fbeccb;
  --del: #b93a32;
  --del-soft: #fbe1de;
  --r-s: 6px;
  --r-m: 10px;
  --rail: 208px;
  --tab: 60px;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--mist); }
body { min-height: 100dvh; -webkit-text-size-adjust: 100%; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.55rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; font-weight: 650; }
a { color: var(--water); }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 0.87rem; }
.boot { padding: 40px 20px; color: var(--ink-2); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; border-radius: 4px; }

/* ---------- khung ---------- */
.shell { min-height: 100dvh; }
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail);
  background: var(--deep); color: #d9eef2;
  display: flex; flex-direction: column; padding: 18px 12px; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 650; font-size: 1.08rem; color: #fff; }
.brand img { width: 26px; height: 26px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s);
  color: #cfe6ea; text-decoration: none;
}
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { background: #fff; color: var(--deep); font-weight: 600; }
.rail-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 0.85rem; }
.rail-foot .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.rail-foot button { background: none; border: 0; padding: 4px 0; color: #a9d3da; cursor: pointer; text-decoration: underline; }
.main { margin-left: var(--rail); padding: 28px 32px 120px; max-width: 1180px; }
.demo-flag { background: var(--edit-soft); color: #5e3f05; padding: 7px 12px; border-radius: var(--r-s); margin-bottom: 16px; font-size: 0.9rem; }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head p { color: var(--ink-2); margin-top: 4px; max-width: 62ch; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; text-decoration: none; font-size: 0.93rem; }

/* ---------- nút, ô nhập ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 15px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--paper); cursor: pointer; text-decoration: none; color: var(--ink);
  font-weight: 550; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--water); border-color: var(--water); color: #fff; }
.btn.primary:hover { background: #096a7c; }
.btn.danger { color: var(--del); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--water); padding: 0 8px; }
.btn.sm { min-height: 34px; padding: 0 11px; font-size: 0.9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 0.87rem; color: var(--ink-2); font-weight: 550; }
.field small { color: var(--ink-3); }
input[type="text"], input[type="search"], input[type="email"], select, textarea {
  min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--water); outline-offset: 0; border-color: var(--water); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--water); flex: none; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 0.78rem; background: var(--mist); color: var(--ink-2); white-space: nowrap; }
.tag.warn { background: var(--edit-soft); color: #6b4705; }
.tag.off { background: #e6e9ea; color: var(--ink-3); }
.tag.add { background: var(--add-soft); color: #115637; }
.tag.del { background: var(--del-soft); color: #842720; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); }
.panel + .panel { margin-top: 16px; }
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-body { padding: 16px 18px; }
.note { padding: 11px 14px; border-radius: var(--r-s); background: var(--water-soft); color: #0a4a57; font-size: 0.93rem; }
.note.warn { background: var(--edit-soft); color: #5e3f05; }
.note.err { background: var(--del-soft); color: #7a221c; }
.empty { padding: 34px 18px; text-align: center; color: var(--ink-2); }

/* ---------- danh sách group ---------- */
.filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.listmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.9rem; color: var(--ink-2); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.row-link:hover .row-title { color: var(--water); }
.row-text { flex: 1; min-width: 0; }
.row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 0.86rem; color: var(--ink-2); display: flex; gap: 6px 10px; flex-wrap: wrap; margin-top: 2px; }
.row-floors { text-align: right; font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; }
.row-floors b { display: block; color: var(--ink); font-weight: 600; }

/* bậc thang thu nhỏ */
.mini { display: flex; align-items: flex-end; gap: 2px; height: 30px; width: 74px; flex: none; }
.mini i { flex: 1; background: var(--water); border-radius: 1.5px 1.5px 0 0; min-height: 3px; }
.mini.none { align-items: center; justify-content: center; font-size: 0.75rem; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 4px; }

/* ---------- bậc thang giá sàn (điểm nhấn) ---------- */
.ladder { list-style: none; margin: 0; padding: 6px 0; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 18px; }
.step-bar {
  position: relative; height: 46px; border-radius: 4px 12px 12px 4px; background: var(--deep); color: #fff;
  display: flex; align-items: center; padding: 0 14px; gap: 10px; min-width: 132px;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.step-price { font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.step-name { font-size: 0.82rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-old { font-size: 0.85rem; text-decoration: line-through; opacity: .75; }
.step.is-add .step-bar { background: var(--add); }
.step.is-edit .step-bar { background: var(--edit); }
.step.is-del .step-bar { background: #c9d3d6; color: #5d7279; }
.step.is-del .step-price { text-decoration: line-through; }
.step.is-off .step-bar { background: #8aa4ab; }
.step-acts { display: flex; gap: 2px; }
.icon-btn { width: 38px; height: 38px; border: 0; background: none; border-radius: var(--r-s); cursor: pointer; color: var(--ink-2); display: grid; place-items: center; }
.icon-btn:hover { background: var(--mist); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.step-edit { display: flex; gap: 6px; align-items: center; }
.step-edit input { width: 96px; min-height: 38px; }
.addtier { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.addtier .money { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.addtier .money::before { content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.addtier .money input { padding-left: 24px; }
.others { list-style: none; margin: 0; padding: 0; }
.others li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 0.92rem; }
.others li:first-child { border-top: 0; }

/* thanh thay đổi đang chờ */
.pending {
  position: fixed; left: var(--rail); right: 0; bottom: 0; z-index: 5;
  background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15,61,74,.09);
  padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pending .sum { flex: 1; min-width: 180px; font-weight: 550; }

/* ---------- form, bảng ---------- */
.form { display: grid; gap: 14px; max-width: 560px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--water); background: var(--water-soft); }
.choice b { display: block; }
.choice span { font-size: 0.88rem; color: var(--ink-2); }
.planrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: center; }
.planrow:first-child { border-top: 0; }
.planrow .chg { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.status { font-size: 0.88rem; white-space: nowrap; }
.status.ok { color: var(--add); }
.status.err { color: var(--del); }
.status.run { color: var(--water); }

.log { list-style: none; margin: 0; padding: 0; }
.log li { border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; }
.log summary { list-style: none; cursor: pointer; padding: 11px 16px; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.log summary::-webkit-details-marker { display: none; }
.log .when { color: var(--ink-2); font-size: 0.86rem; }
.log .what { font-weight: 550; }
.log .where { grid-column: 2 / -1; font-size: 0.86rem; color: var(--ink-2); }
.log .more { padding: 0 16px 14px 120px; font-size: 0.9rem; color: var(--ink-2); display: grid; gap: 4px; overflow-wrap: anywhere; }

.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inline .field { flex: 1; min-width: 160px; }

/* ---------- đăng nhập ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--deep); }
.gate-card { background: var(--paper); border-radius: 14px; padding: 30px 28px; width: min(420px, 100%); display: grid; gap: 16px; }
.gate-steps { display: grid; gap: 5px; margin-bottom: 4px; }
.gate-steps i { display: block; height: 12px; border-radius: 2px 6px 6px 2px; background: var(--water); }
.gate-steps i:nth-child(1) { width: 100%; background: var(--deep); }
.gate-steps i:nth-child(2) { width: 68%; }
.gate-steps i:nth-child(3) { width: 40%; background: #58b6c6; }

/* ---------- hộp thoại, thông báo ---------- */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(520px, calc(100vw - 28px)); color: var(--ink); box-shadow: 0 20px 60px rgba(15,61,74,.3); }
dialog::backdrop { background: rgba(15,61,74,.45); }
.dlg { padding: 22px; display: grid; gap: 14px; }
.dlg ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bar { height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.bar i { display: block; height: 100%; width: 40%; background: var(--water); border-radius: 3px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
#toasts { position: fixed; right: 16px; top: 16px; z-index: 50; display: grid; gap: 8px; max-width: min(400px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 11px 14px; border-radius: var(--r-s); box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 0.93rem; }
.toast.err { background: var(--del); }

/* ---------- điện thoại ---------- */
@media (max-width: 820px) {
  .rail {
    inset: auto 0 0 0; width: auto; height: calc(var(--tab) + env(safe-area-inset-bottom)); flex-direction: row; padding: 0 4px env(safe-area-inset-bottom); z-index: 10;
  }
  .brand, .rail-foot { display: none; }
  .nav { display: flex; flex: 1; }
  .nav a { flex: 1; flex-direction: column; gap: 2px; padding: 8px 2px; font-size: 0.72rem; justify-content: center; border-radius: 0; text-align: center; }
  .nav a[aria-current="page"] { background: none; color: #fff; box-shadow: inset 0 3px 0 #7fd6e3; }
  .main { margin-left: 0; padding: 18px 14px calc(var(--tab) + 110px); }
  h1 { font-size: 1.3rem; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .field:first-child { grid-column: 1 / -1; }
  .row { padding: 11px 12px; gap: 10px; }
  .row-floors { display: none; }
  .mini { width: 52px; }
  .step { padding: 5px 12px; gap: 4px; }
  .step-bar { height: 44px; padding: 0 11px; min-width: 104px; }
  .step-name { display: none; }
  .addtier, .others li { padding-left: 12px; padding-right: 12px; }
  .pending { left: 0; bottom: calc(var(--tab) + env(safe-area-inset-bottom)); padding: 10px 14px; }
  .pending .sum { flex-basis: 100%; }
  .pending .btn { flex: 1; }
  .log summary { grid-template-columns: minmax(0, 1fr) auto; }
  .log .when { grid-column: 1 / -1; }
  .log .where { grid-column: 1 / -1; }
  .log .more { padding-left: 16px; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dd { margin-bottom: 8px; }
  #toasts { top: auto; bottom: calc(var(--tab) + 16px); left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-bar { transition: none; }
  .bar i { animation: none; width: 100%; }
}

/* tinh chỉnh */
.head .tag { background: var(--paper); }
#preview { margin-top: 16px; }

/* ================= báo cáo ================= */
.l-short { display: none; }
input[type="date"] { min-height: 40px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.range { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.range .field { min-width: 170px; }
.range-custom { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.listmeta { align-items: flex-end; }
.listtools { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.listtools .field { min-width: 150px; }
.filters.three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.filters.three .range .field { flex: 1; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { padding: 14px 18px; border-left: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.tile:first-child { border-left: 0; }
.tile span { font-size: 0.84rem; color: var(--ink-2); }
.tile b { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.is-loading { opacity: .55; }

/* số liệu cạnh từng tầng */
.ladder .step { grid-template-columns: minmax(0, 1fr) 316px 118px; }
.ladder.no-acts .step { grid-template-columns: minmax(0, 1fr) 316px; }
.step-edit { grid-column: 1 / -1; }
.step-acts { justify-content: flex-end; }
.mx { display: grid; grid-template-columns: 0.9fr 1fr 0.9fr 1fr; gap: 10px; text-align: right; font-size: 0.93rem; }
.mx b { font-weight: 600; }
.mx-l { display: none; }
.step-head { color: var(--ink-2); font-size: 0.8rem; padding-top: 8px; padding-bottom: 0; }
.step-head .mx { font-size: 0.8rem; }
.step-flag { margin-left: auto; font-size: 0.76rem; background: var(--edit-soft); color: #5e3f05; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.others li { display: grid; grid-template-columns: minmax(0, 1fr) 316px 118px; align-items: center; gap: 12px; }
.others li.no-acts { grid-template-columns: minmax(0, 1fr) 316px; }

.fold > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); }
.fold[open] > summary h2::before { content: "▾"; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold-inline { padding: 0 18px 14px; font-size: 0.9rem; }
.fold-inline summary { cursor: pointer; color: var(--water); padding: 6px 0; }
.fold-inline .tablewrap { margin: 6px -18px 0; }

.tablewrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tbl th { text-align: right; font-weight: 550; color: var(--ink-2); font-size: 0.82rem; padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { text-align: right; padding: 9px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 18px; white-space: normal; min-width: 150px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
.tbl tbody tr:first-child td { border-top: 0; }
.rev { display: inline-grid; gap: 3px; min-width: 96px; font-weight: 600; }
.share { display: block; height: 4px; border-radius: 2px; background: var(--mist); }
.share i { display: block; height: 100%; border-radius: 2px; background: var(--water); margin-left: auto; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.seg button { border: 0; background: var(--paper); padding: 6px 12px; cursor: pointer; font-size: 0.88rem; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--deep); color: #fff; }
.chart { position: relative; padding: 14px 12px 6px; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.c-line { fill: none; stroke: var(--water); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-area { fill: var(--water); opacity: .08; }
.c-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.c-dot { fill: var(--water); stroke: var(--paper); stroke-width: 2; }
.c-hit { fill: transparent; }
.c-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; padding: 6px 10px; border-radius: var(--r-s); font-size: 0.84rem; display: grid; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-tip span { opacity: .75; font-size: 0.78rem; }

@media (max-width: 1080px) {
  .ladder .step, .ladder.no-acts .step { grid-template-columns: minmax(0, 1fr) auto; }
  .ladder .mx { grid-column: 1 / -1; grid-row: 2; text-align: left; padding: 0 2px 10px; max-width: 460px; }
  .ladder .step-acts { grid-column: 2; grid-row: 1; }
  .mx-l { display: block; font-size: 0.72rem; color: var(--ink-3); font-weight: 400; }
  .step-head { display: none !important; }
  .others li, .others li.no-acts { grid-template-columns: 1fr; gap: 4px; }
  .others li > span:empty { display: none; }
  .others .mx { text-align: left; max-width: 460px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:nth-child(4) { border-left: 0; }
  .tile:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .l-full { display: none; }
  .l-short { display: inline; }
  .row-floors { display: block; font-size: 0.8rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { border-left: 0; padding: 11px 14px; }
  .tile:nth-child(even) { border-left: 1px solid var(--line); }
  .tile:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile b { font-size: 1.2rem; }
  .filters.three { grid-template-columns: 1fr 1fr; }
  .filters.three .range { grid-column: 1 / -1; }
  .listtools { width: 100%; }
  .listtools .field, .listtools .range { flex: 1; min-width: 0; }
  .listtools .range .field { min-width: 0; flex: 1; }
  .head .range { width: 100%; }
  .head .range .field { flex: 1; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 12px; min-width: 120px; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 7px 4px; }
}

/* ================= nhiều tài khoản AdMob ================= */
.acct { display: grid; gap: 4px; }
.acct span { font-size: 0.78rem; }
.acct-rail { padding: 0 8px 16px; color: #a9d3da; }
.acct-rail b { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.acct-rail select { min-height: 36px; padding: 5px 8px; background: #17505f; color: #fff; border-color: #2b6a79; }
.acct-bar { display: none; }
.err-cell { text-align: left !important; color: var(--del); white-space: normal !important; }
@media (max-width: 820px) {
  .acct-bar { display: grid; margin-bottom: 14px; }
  .acct-bar span { color: var(--ink-2); }
}

/* ================= báo cáo gộp mọi tài khoản ================= */
.scope { margin-bottom: 14px; }
.scope .seg button { padding: 8px 14px; font-size: 0.93rem; }
.tbl th.left, .tbl td.left { text-align: left; white-space: normal; }
.acct-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--water-soft); color: #0a4a57; font-size: 0.86rem; font-weight: 550; white-space: nowrap; }
.inline-search { max-width: 280px; min-height: 36px; padding: 5px 10px; }
@media (max-width: 820px) {
  .scope .seg { width: 100%; }
  .scope .seg button { flex: 1; padding: 8px 6px; }
  .inline-search { max-width: none; }
}

/* ==========================================================================
   Giao diện theo nhận diện của Inception (ictglobal.tech):
   nền trắng với quầng xanh da trời, chữ mực #1E2629, nút dạng viên thuốc,
   thẻ bo tròn lớn trên nền xám rất nhạt, điểm nhấn xanh #2AA6DE và vàng #F2AF3A.
   ========================================================================== */
:root {
  --mist: #f6f7f9;
  --paper: #ffffff;
  --ink: #1e2629;
  --ink-2: #5b6780;
  --ink-3: #8a94a8;
  --line: #e3e6ee;
  --deep: #1e2629;
  --water: #1479b8;        /* xanh chữ/liên kết, đủ tương phản trên nền trắng */
  --sky: #2aa6de;          /* xanh thương hiệu */
  --water-soft: #e6f4fb;
  --amber: #f2af3a;
  --edit: #8a5a00;
  --edit-soft: #fdf1d8;
  --r-s: 10px;
  --r-m: 20px;
  --rail: 232px;
  font-family: "Be Vietnam Pro", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
html, body { background: #fff; }
body {
  background:
    radial-gradient(900px 420px at 78% -140px, rgba(42, 166, 222, .30), transparent 70%),
    radial-gradient(700px 380px at 18% -160px, rgba(126, 190, 255, .28), transparent 70%),
    #fff;
  background-repeat: no-repeat;
}
h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.005em; }
a { color: var(--water); text-underline-offset: 3px; }

/* --- cột điều hướng: sáng, mục đang chọn là viên thuốc màu mực --- */
.rail { background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink-2); border-right: 1px solid var(--line); padding: 22px 14px; }
.brand { color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; padding-bottom: 20px; }
.brand img { width: 30px; height: 30px; }
.nav { display: grid; gap: 4px; }
.nav a { color: var(--ink-2); border-radius: 999px; padding: 10px 14px; font-weight: 500; }
.nav a:hover { background: var(--mist); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 500; }
.rail-foot { border-top: 1px solid var(--line); }
.rail-foot .who { color: var(--ink); }
.rail-foot button { color: var(--water); }
.acct-rail { color: var(--ink-3); }
.acct-rail b { color: var(--ink); }
.acct-rail select { background: var(--paper); color: var(--ink); border-color: var(--line); border-radius: 999px; padding: 6px 12px; }
.demo-flag { border-radius: 14px; }

/* --- nút viên thuốc --- */
.btn { border-radius: 999px; padding: 0 20px; min-height: 42px; font-weight: 500; border-color: var(--line); }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.sm { min-height: 34px; padding: 0 14px; }
.btn.ghost { color: var(--water); padding: 0 10px; }
.btn.danger:hover { border-color: var(--del); }
input[type="text"], input[type="search"], input[type="email"], input[type="date"], select, textarea { border-radius: 12px; border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline-color: var(--sky); border-color: var(--sky); }
:focus-visible { outline-color: var(--sky); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* --- thẻ --- */
.panel { border-radius: var(--r-m); border-color: var(--line); overflow: hidden; }
.panel-head { padding: 16px 22px; }
.panel-body { padding: 18px 22px; }
.panel + .panel { margin-top: 18px; }
.tag { background: var(--mist); color: var(--ink-2); padding: 2px 10px; }
.head .tag { background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
.note { border-radius: 14px; }
.tiles { background: var(--mist); gap: 1px; }
.tile { background: var(--mist); border: 0 !important; padding: 18px 22px; }
.tile + .tile { box-shadow: -1px 0 0 var(--line); }
.tile b { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.row { padding: 13px 22px; }
.mini i { background: var(--sky); }
.share i { background: var(--sky); }
.acct-chip { background: var(--water-soft); color: #0d5c8c; }
.tbl th:first-child, .tbl td:first-child { padding-left: 22px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 22px; }
.choice { border-radius: 14px; }
.choice:has(input:checked) { border-color: var(--sky); background: var(--water-soft); }
.seg { border-radius: 999px; background: var(--mist); border: 0; padding: 3px; gap: 2px; }
.seg button { border: 0 !important; border-radius: 999px; background: transparent; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* --- bậc thang giá sàn: dải xanh thương hiệu --- */
.step { padding-left: 22px; padding-right: 22px; }
.step-bar { background: linear-gradient(90deg, #1553c4 0%, #1b74d8 45%, #2aa6de 100%); border-radius: 8px 999px 999px 8px; height: 48px; }
.step.is-add .step-bar { background: #1b7f52; }
.step.is-edit .step-bar { background: var(--amber); color: #2b1d00; }
.step.is-edit .step-name, .step.is-edit .step-old { opacity: .85; }
.step.is-del .step-bar { background: #e3e6ee; color: #7a8598; }
.step.is-off .step-bar { background: #9db4cf; }
.step-flag { background: #fff; color: #7a4d00; }
.addtier { padding-left: 22px; padding-right: 22px; }
.others li { padding-left: 22px; padding-right: 22px; }
.icon-btn { border-radius: 999px; }
.pending { left: var(--rail); background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(30, 38, 41, .08); }

/* --- biểu đồ --- */
.c-line { stroke: var(--sky); stroke-width: 2.5; }
.c-area { fill: var(--sky); opacity: .12; }
.c-dot { fill: var(--sky); }
.bar i { background: var(--sky); }

/* --- hộp thoại, thông báo --- */
dialog { border-radius: 24px; box-shadow: 0 24px 70px rgba(30, 38, 41, .28); }
dialog::backdrop { background: rgba(30, 38, 41, .4); }
.toast { border-radius: 14px; background: var(--ink); }
.c-tip { border-radius: 10px; }

/* --- trang đăng nhập --- */
.gate { background: radial-gradient(1000px 520px at 70% 0, rgba(42, 166, 222, .38), transparent 70%), radial-gradient(800px 480px at 15% 10%, rgba(126, 190, 255, .34), transparent 70%), #fff; }
.gate-card { border-radius: 28px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(30, 38, 41, .12); border: 1px solid var(--line); }
.gate-card h1 { font-size: 2.2rem; }
.gate-steps i { height: 12px; border-radius: 3px 999px 999px 3px; background: var(--sky) !important; }
.gate-steps i:nth-child(1) { background: linear-gradient(90deg, #1553c4, #2aa6de) !important; }
.gate-steps i:nth-child(3) { background: #9fd6f1 !important; }

@media (max-width: 1080px) {
  .tile + .tile { box-shadow: none; }
  .tiles { gap: 0; }
  .tile { border-top: 1px solid var(--line) !important; }
  .tile:nth-child(-n+3) { border-top: 0 !important; }
}
@media (max-width: 820px) {
  h1 { font-size: 1.5rem; }
  .rail { background: rgba(255, 255, 255, .94); border-right: 0; border-top: 1px solid var(--line); padding: 0 6px env(safe-area-inset-bottom); }
  .nav { display: flex; gap: 0; }
  .nav a { border-radius: 0; color: var(--ink-3); padding: 8px 2px; }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { background: none; color: var(--ink); box-shadow: inset 0 3px 0 var(--sky); font-weight: 600; }
  .row, .panel-head, .panel-body, .step, .addtier, .others li { padding-left: 14px; padding-right: 14px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 14px; }
  .tile { padding: 13px 14px; }
  .tile:nth-child(-n+3) { border-top: 1px solid var(--line) !important; }
  .tile:nth-child(-n+2) { border-top: 0 !important; }
  .tile:nth-child(even) { box-shadow: -1px 0 0 var(--line); }
  .tile b { font-size: 1.25rem; }
  .pending { left: 0; }
  .acct-bar select { border-radius: 999px; }
}
@media (max-width: 820px) {
  .acct-rail { display: none; }
  .nav { flex: 1; }
  .nav a { flex: 1; white-space: nowrap; }
}

/* --- logo công ty + tên tool --- */
.brand { display: grid; gap: 6px; justify-items: start; align-items: start; padding: 2px 10px 20px; }
.brand .brand-logo { width: auto; height: 38px; max-width: 100%; display: block; }
.brand-sub { font-size: 0.86rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-left: 2px; }
.brand.is-fallback { display: flex; align-items: center; gap: 10px; }
.brand.is-fallback .brand-logo { width: 30px; height: 30px; }
.brand.is-fallback .brand-sub { font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; color: var(--ink); font-weight: 700; }
.gate-card .brand { display: grid; padding: 0; }
.gate-card .brand .brand-logo { height: 46px; }
.gate-card .brand-sub { display: none; }
.gate-card .brand.is-fallback { display: none; }
.gate-steps { display: none; }
@media (max-width: 820px) {
  .rail .brand { display: none; }
}

/* ================= tạo mediation group, nguồn quảng cáo ================= */
dialog.wide { width: min(700px, calc(100vw - 28px)); }
dialog .dlg { max-height: calc(100dvh - 60px); overflow: auto; }
.form.wide { max-width: none; }
.seg.picks { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.seg.picks button { padding: 8px 16px; font-size: 0.93rem; }
.wz .panel-head h2 { display: flex; align-items: center; gap: 10px; }
.wz-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.82rem; font-weight: 600; flex: none; }
.wz.is-off .wz-n { background: var(--line); color: var(--ink-3); }
.wz.is-off h2 { color: var(--ink-3); }
.scrollbox { max-height: 340px; overflow: auto; border-top: 1px solid var(--line); }
.rows.bordered { border-top: 1px solid var(--line); }
.unitpick { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.unitmap { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.unitmap + .unitmap { margin-top: 10px; }
.unitmap legend { font-weight: 600; padding: 0 6px; font-size: 0.93rem; }
.unitmap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.others li.is-off > div:first-child, .others li.is-off .mx { opacity: .55; }
.panel-head .inline { flex-wrap: wrap; }
@media (max-width: 1080px) {
  .others li .step-acts { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .seg.picks { width: 100%; }
  .seg.picks button { flex: 1 1 30%; }
  .head .inline { width: 100%; }
  .head .inline .btn { flex: 1; }
}

/* ================= tạo group: bản rút gọn ================= */
.field.narrow { max-width: 460px; }
.field.grow { flex: 2; min-width: 220px; }
.bordered-top { border-top: 1px solid var(--line); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--water); cursor: pointer; text-decoration: underline; font: inherit; }
.srclist { display: grid; gap: 12px; }
.srccard { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.srccard.is-off { background: var(--mist); }
.srccard.is-off b { color: var(--ink-2); }
.srccard-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.srccard-head b { font-size: 1rem; }
div.srccard-head { cursor: default; }
.srccard p { margin: 0; }
.unitline { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 12px; align-items: end; padding-top: 10px; border-top: 1px dashed var(--line); }
.unitline-name { font-weight: 550; font-size: 0.93rem; padding-bottom: 10px; overflow-wrap: anywhere; }
.unitline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.seg.picks button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 820px) {
  .unitline { grid-template-columns: 1fr; gap: 6px; }
  .unitline-name { padding-bottom: 0; }
  .field.narrow { max-width: none; }
}

/* ================= tầng giá dạng chữ (không còn cột màu) ================= */
.ladder .step { border-top: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
.ladder .step-head { border-top: 0; padding-top: 8px; padding-bottom: 6px; }
.step-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.step-main .step-price { min-width: 64px; color: var(--ink); font-size: 1.05rem; }
.step-main .step-name { color: var(--ink-2); opacity: 1; font-size: 0.9rem; }
.step-main .step-old { color: var(--ink-2); }
.step.is-del .step-price, .step.is-del .step-name { text-decoration: line-through; color: var(--ink-3); }
.step.is-off .step-price { color: var(--ink-3); }
.tag.st-add { background: #e3f4ea; color: #14613e; }
.tag.st-edit { background: #fdf0d3; color: #6b4700; }
.tag.st-del { background: #fde7e4; color: #8f2318; }
.step-main .step-flag { margin-left: 0; background: #fdf0d3; color: #6b4700; }
.step-main .money { position: relative; width: 150px; }
.step-main .money::before { content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.step-main .money input { padding-left: 24px; min-height: 38px; width: 100%; }
@media (max-width: 820px) { .step-main .step-name { display: inline; } }

/* ================= trang chủ báo cáo: chọn tài khoản, tỉ lệ ad source ================= */
.msel-field { position: relative; }
.msel { position: relative; }
.msel > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 550; }
.msel > summary::-webkit-details-marker { display: none; }
.msel > summary::after { content: "▾"; color: var(--ink-2); }
.msel[open] > summary { border-color: var(--sky, #2aa6de); }
.msel-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(30, 38, 41, .14); padding: 8px; display: grid; gap: 2px; }
.msel-menu label { padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.msel-menu label:hover { background: var(--mist); }
.tbl.mix td, .tbl.mix th { white-space: nowrap; }
.tbl.mix tr.total td { background: var(--mist); }
.tbl.mix td .small { font-weight: 400; }

/* ================= biểu đồ tỉ lệ doanh thu theo ad source ================= */
.mixchart { display: grid; gap: 14px; }
.mixlegend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mixlegend li { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; }
.mixlegend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mixrow { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) 96px; gap: 14px; align-items: center; }
.mixrow-name { display: grid; min-width: 0; overflow-wrap: anywhere; }
.mixrow-total { text-align: right; }
.mixbar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: var(--mist); gap: 2px; }
.mixrow.total .mixbar { height: 44px; }
.mixbar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.8rem; font-weight: 600; color: #fff; min-width: 2px; overflow: hidden; white-space: nowrap; }
.mixbar-empty { padding: 0 12px; align-self: center; font-size: 0.85rem; color: var(--ink-3); }
.c0 { background: #1b74d8; } .c1 { background: #f2af3a; } .c2 { background: #1b7f52; } .c3 { background: #c2410c; }
.c4 { background: #7c3aed; } .c5 { background: #0e7490; } .c6 { background: #be185d; } .c7 { background: #4d7c0f; } .c8 { background: #7a8598; }
.mixbar i.c1 { color: #2b1d00; }
@media (max-width: 820px) {
  .mixrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .mixrow .mixbar { grid-column: 1 / -1; grid-row: 2; }
}

/* ================= biểu đồ đường theo ad source ================= */
.mixchart .chart { padding: 6px 0 0; }
.ml { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mp { stroke: #fff; stroke-width: 1.5; }
.ml.s0 { stroke: #1b74d8; } .mp.s0 { fill: #1b74d8; } .ml.s1 { stroke: #f2af3a; } .mp.s1 { fill: #f2af3a; }
.ml.s2 { stroke: #1b7f52; } .mp.s2 { fill: #1b7f52; } .ml.s3 { stroke: #c2410c; } .mp.s3 { fill: #c2410c; }
.ml.s4 { stroke: #7c3aed; } .mp.s4 { fill: #7c3aed; } .ml.s5 { stroke: #0e7490; } .mp.s5 { fill: #0e7490; }
.ml.s6 { stroke: #be185d; } .mp.s6 { fill: #be185d; } .ml.s7 { stroke: #4d7c0f; } .mp.s7 { fill: #4d7c0f; }
.ml.s8 { stroke: #7a8598; } .mp.s8 { fill: #7a8598; }
.ml-tip { display: grid; gap: 4px; min-width: 230px; pointer-events: none; }
.ml-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 0.85rem; }
.ml-row i { width: 10px; height: 10px; border-radius: 3px; }

/* ================= menu chia theo tính năng ================= */
.nav-sec { font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 14px 14px 4px; }
.nav-sec:first-child { padding-top: 0; }
.nav-soon { padding: 8px 14px; color: var(--ink-3); font-size: 0.92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) { .nav-sec, .nav-soon { display: none; } }

/* ================= bảng doanh thu app ================= */
.thsort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.thsort:hover { color: var(--ink); text-decoration: underline; }
.tbl.revtbl tr.total td { background: var(--mist); }
.tbl.revtbl td, .tbl.revtbl th { white-space: nowrap; }
.filters select { width: 100%; }

/* ================= gán app cho nhân sự UA ================= */
.uapps { flex-basis: 100%; }
.checks.col { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; max-height: 280px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
#uform { flex-wrap: wrap; align-items: flex-end; }
#uform .uapps { flex: 0 0 100%; width: 100%; }
.checks.col label.inline { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.checks.col label.inline input { flex: none; margin-top: 3px; }

/* ================= Google Ads ================= */
.form textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; resize: vertical; background: #fff; }
.filelist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.filelist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 10px; }
.tbl tr.is-off td { color: var(--ink-2); }
.tbl td .step-acts { justify-content: flex-end; min-width: 84px; flex-wrap: nowrap; }