/* agency – Cổng đại lý (white-label). Tiền tố ag-. Màu thương hiệu đại lý: var(--wl) (body.wl). */
.ag { --ag: var(--wl, #0b4a9e); --ag-dk: color-mix(in srgb, var(--ag) 70%, #000); --ag-soft: color-mix(in srgb, var(--ag) 9%, #fff); --ag-line: color-mix(in srgb, var(--ag) 22%, #fff);
  display: grid; gap: 14px; min-width: 0; }
.ag > * { min-width: 0; margin: 0; }
.ag .page-head { margin-bottom: 0; }
.ag .page-head h2 { color: var(--ag-dk); }
.ag-count { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 9px; border-radius: 99px; background: var(--ag-soft); color: var(--ag-dk); font-size: 13px; font-weight: 700; }
.ag-lead { margin: -4px 0 0; }
.ag-narrow { max-width: 760px; }
.ag-portal .tabs button.active { color: var(--wl); border-color: var(--wl); }
.ag-portal .seg button.active { background: var(--wl); }
.ag-portal .chips .chip.on, .ag-portal .chips .chip:hover { border-color: var(--wl); color: var(--wl); background: color-mix(in srgb, var(--wl) 8%, #fff); }
.ag-portal .switch input:checked + span { background: var(--wl); }
.ag-portal input:focus, .ag-portal select:focus, .ag-portal textarea:focus, .ag-portal .btn:focus-visible { outline-color: var(--wl); }
.ag a:not(.btn):not(.ag-kpi):not(.ag-chip):not(.ag-res-i) { color: var(--ag); }
.ag .btn.success { background: #059669; border-color: #059669; }
.ag .bars .fill { background: linear-gradient(180deg, var(--ag) 0%, color-mix(in srgb, var(--ag) 65%, #fff) 100%); }
.ag .bars .bar:hover .fill { background: var(--ag-dk); }
.ag-in { color: #047857; }
.ag-out { color: #b91c1c; }
.ag .bad { color: #b91c1c; }
.ag-nodata { margin: 0 0 -6px; }
.ag-dh-st { align-items: center; margin: 0; }
.ag-dl .pill { white-space: normal; }
.ag b.warn, .ag-q b.warn { color: var(--warn); }

/* ---- Hero tổng quan */
.ag-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; color: #fff; border-radius: 18px; padding: 20px 22px 18px;
  background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--ag) 80%, #fff) 0%, var(--ag) 35%, var(--ag-dk) 100%); box-shadow: 0 10px 30px color-mix(in srgb, var(--ag) 25%, transparent); }
.ag-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgb(255 255 255 / 7%); pointer-events: none; }
.ag-hero > * { position: relative; z-index: 1; min-width: 0; }
.ag-hero-l small { color: rgb(255 255 255 / 78%); }
.ag-hero-l h2 { color: #fff; font-size: 24px; margin: 2px 0 8px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hero-b { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgb(255 255 255 / 15%); color: #fff; border: 1px solid rgb(255 255 255 / 22%); white-space: nowrap; text-decoration: none; }
a.ag-chip:hover { background: rgb(255 255 255 / 25%); }
.ag-chip.ok { background: rgb(16 185 129 / 28%); border-color: rgb(110 231 183 / 50%); }
.ag-chip.bad { background: rgb(239 68 68 / 30%); border-color: rgb(252 165 165 / 50%); color: #fff; }
.ag-hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ag-hero-cta { justify-content: flex-end; }
.ag-hero .btn { border-color: rgb(255 255 255 / 32%); background: rgb(255 255 255 / 12%); color: #fff; box-shadow: none; }
.ag-hero .btn:hover { background: rgb(255 255 255 / 22%); }
.ag-hero .btn.primary { background: #fff; color: var(--ag-dk); border-color: #fff; }
.ag-hero .btn.primary:hover { background: color-mix(in srgb, var(--ag) 8%, #fff); }
.ag-seg { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 24%); }
.ag-seg button { color: rgb(255 255 255 / 85%); padding: 6px 12px; }
.ag-seg button + button { border-left-color: rgb(255 255 255 / 20%); }
.ag-portal .ag-seg button.active { background: #fff; color: var(--ag-dk); }
.ag-money { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ag-m { background: rgb(255 255 255 / 11%); border: 1px solid rgb(255 255 255 / 16%); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; backdrop-filter: blur(2px); }
.ag-m.hl { background: #fff; color: var(--text); border-color: #fff; }
.ag-m > span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgb(255 255 255 / 80%); font-weight: 600; }
.ag-m.hl > span { color: var(--muted); }
.ag-m > b { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-m > b small { font-size: 16px; margin-left: 2px; opacity: .8; }
.ag-m.hl > b { color: #047857; }
.ag-m-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-m-f small { font-size: 12px; color: rgb(255 255 255 / 78%); }
.ag-m.hl .ag-m-f small { color: var(--muted); }
.ag-hero .ag-m:not(.hl) .ag-d { background: rgb(255 255 255 / 18%); color: #fff; }
.ag-hero .ag-m:not(.hl) .ag-d.up { background: rgb(16 185 129 / 35%); }
.ag-hero .ag-m:not(.hl) .ag-d.down { background: rgb(239 68 68 / 38%); }

/* ---- So sánh kỳ */
.ag-d { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.ag-d.up { background: #ecfdf5; color: #047857; }
.ag-d.down { background: #fef2f2; color: #b91c1c; }
.ag-d.neu { background: #eff6ff; color: #1d4ed8; }
.ag-d.new { background: #f5f3ff; color: #6d28d9; }

/* ---- Gợi ý / cảnh báo */
.ag-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ag-tips .cu-tip { font-size: 13.5px; }

/* ---- KPI */
.ag-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ag-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ag-kpis:empty { display: none; }
.ag-kpi { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--surface); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; border: 1px solid transparent; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.ag-kpi:hover { transform: translateY(-1px); border-color: var(--ag-line); }
.ag-kpi::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ag-line); }
.ag-kpi.amber::before { background: #f59e0b; } .ag-kpi.green::before { background: #10b981; } .ag-kpi.red::before { background: #ef4444; }
.ag-kpi.amber { background: linear-gradient(180deg, #fffbeb, #fff); }
.ag-k-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ag-k-l i { font-style: normal; font-size: 13px; }
.ag-k-v { font-size: 24px; line-height: 1.2; color: var(--ag-dk); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-k-v small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ag-kpi.green .ag-k-v { color: #047857; }
.ag-kpi.amber .ag-k-v { color: var(--warn); }
.ag-k-s { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ag-kpi .ag-bar { margin-top: 4px; }

/* ---- Bố cục */
.ag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.ag-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.ag-split.wide { grid-template-columns: minmax(0, 1fr) 400px; }
.ag-col { display: grid; gap: 14px; min-width: 0; align-content: start; }
.ag-col > * { margin: 0; min-width: 0; }
.ag-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ag-stick { position: sticky; top: 14px; }
.ag-card { margin: 0; border-radius: 14px; }
.ag-ch { display: flex; align-items: flex-start; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ag-ch > div:first-child { margin-right: auto; min-width: 0; }
.ag-ch h3 { margin: 0; font-size: 15px; color: var(--text); }
.ag-ch small { display: block; font-size: 12px; }
.ag-seg-sm button { padding: 4px 10px; font-size: 12.5px; }
.ag-sec h3 { margin: 0 0 12px; font-size: 15px; }
.ag-h4 { margin: 0 0 10px; font-size: 14px; color: var(--ag-dk); }
.ag-none { padding: 6px 0; margin: 0; }

/* ---- Thanh tiến độ */
.ag-bar { height: 6px; border-radius: 99px; background: #edf1f7; overflow: hidden; margin-top: 4px; min-width: 50px; }
.ag-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ag); transition: width .3s; }
.ag-bar.low i { background: #f59e0b; }

/* ---- Biểu đồ */
.ag-bars .bars { padding-top: 10px; }
.ag-bars.ag-hrs .bars { gap: 3px; overflow: visible; }
.ag-bars.ag-hrs .bars .bar { flex: 1 1 0; min-width: 6px; }
.ag-sum { display: flex; flex-wrap: wrap; gap: 10px 26px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ag-sum > div { display: flex; flex-direction: column; gap: 1px; }
.ag-sum span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ag-sum b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ag-range { gap: 6px; flex-wrap: wrap; }
.ag-range input[type=date] { width: auto; padding: 5px 8px; font-size: 13px; }

/* ---- Danh sách trong thẻ */
.ag-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ag-rank, .ag-hb, .ag-log, .ag-dom { grid-template-columns: minmax(0, 1fr); }
.ag-li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.ag-li:first-child { border-top: 0; padding-top: 2px; }
.ag-li-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit !important; }
.ag-li-m b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-li-m:hover b { color: var(--ag); }
.ag-li-m small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-li-n { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; flex: none; font-variant-numeric: tabular-nums; }
.ag-li-n small { font-size: 11.5px; }
.ag-li-n.wide { width: 150px; align-items: stretch; }
.ag-li-n.wide .row { justify-content: space-between; flex-wrap: nowrap; }
.ag-li-a { display: flex; gap: 6px; flex: none; }
.ag-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ag-more { display: block; text-align: center; padding: 8px; font-size: 13px; }
.ag-empty { text-align: center; padding: 18px 10px; }
.ag-empty-i { font-size: 30px; margin-bottom: 4px; }
.ag-empty p { margin: 0 0 10px; }
.ag-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-rank a { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit !important; }
.ag-rank-n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--ag-soft); color: var(--ag-dk); }
.ag-rank li:first-child .ag-rank-n { background: var(--ag); color: #fff; }
.ag-rank-m { flex: 1; min-width: 0; }
.ag-rank-m .row { justify-content: space-between; flex-wrap: nowrap; gap: 8px; font-size: 13.5px; }
.ag-rank-m .row b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-rank-m small { font-size: 12px; }
.ag-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-hb .row { flex-wrap: nowrap; gap: 8px; font-size: 13px; }
.ag-hb .row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hb .row small { width: 36px; text-align: right; }

/* ---- Ví */
.ag-wallet { position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ag) 85%, #fff) 0%, var(--ag) 40%, var(--ag-dk) 100%); box-shadow: 0 10px 26px color-mix(in srgb, var(--ag) 28%, transparent); }
.ag-wallet::before { content: ''; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgb(255 255 255 / 8%); }
.ag-wallet > * { position: relative; }
.ag-wallet.cust { background: linear-gradient(140deg, #1f2937 0%, #111827 100%); box-shadow: 0 10px 26px rgb(17 24 39 / 22%); }
.ag-wallet.low { box-shadow: 0 0 0 3px #fbbf24, 0 10px 26px rgb(0 0 0 / 15%); }
.ag-wallet.blocked { box-shadow: 0 0 0 3px #f87171, 0 10px 26px rgb(0 0 0 / 15%); }
.ag-w-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / 85%); }
.ag-w-big { font-size: 30px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.ag-wallet.big .ag-w-big { font-size: 36px; }
.ag-w-cap { margin-top: -8px; color: rgb(255 255 255 / 70%); font-size: 12px; }
.ag-w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-w-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-w-grid > div { background: rgb(255 255 255 / 10%); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ag-w-grid small { display: block; font-size: 11.5px; color: rgb(255 255 255 / 75%); }
.ag-w-grid b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ag-w-grid b.bad { color: #fecaca; }
.ag-w-cr .row { justify-content: space-between; font-size: 12.5px; }
.ag-w-cr small { font-size: 11.5px; color: rgb(255 255 255 / 75%); }
.ag-w-cr .ag-bar { background: rgb(255 255 255 / 20%); }
.ag-w-cr .ag-bar i { background: #fff; }
.ag-w-st { font-size: 12.5px; background: rgb(0 0 0 / 18%); border-radius: 10px; padding: 7px 10px; }
.ag-w-act { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-wallet.cust .ag-w-act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-wallet.cust .ag-w-act .btn { justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.ag-w-act .btn { background: #fff; color: var(--ag-dk); border-color: #fff; font-weight: 600; box-shadow: none; }
.ag-wallet.cust .ag-w-act .btn { color: #111827; }
.ag-wallet .ag-w-act .btn.ghost { background: rgb(255 255 255 / 12%); color: #fff; border-color: rgb(255 255 255 / 30%); }
.ag-wallet .ag-w-act .btn.ghost:hover { background: rgb(255 255 255 / 22%); }

/* ---- Bảng */
.ag-tw { border-radius: 14px; max-height: none; }
.ag-tbl td { vertical-align: middle; }
.ag-tbl tr[data-href] { cursor: pointer; }
.ag-tbl tr[data-href]:hover td { background: var(--ag-soft); }
.ag-tbl tr[data-href]:focus-visible { outline: 2px solid var(--ag); outline-offset: -2px; }
.ag-tbl .ag-bar { max-width: 140px; margin-left: auto; }
.ag-card .ag-tw, .ag-tabs-card .ag-tw { box-shadow: none; border: 1px solid var(--line); }
.ag-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-who > div { min-width: 0; display: flex; flex-direction: column; }
.ag-who b { overflow: hidden; text-overflow: ellipsis; }
.ag-who small { font-size: 12px; }
.ag-who.lg h2 { margin: 0; font-size: 22px; }
.ag-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 800; font-size: 14px; text-transform: uppercase;
  background: var(--ag-soft); color: var(--ag-dk); border: 1px solid var(--ag-line); }
.ag-who.lg .ag-av { width: 46px; height: 46px; font-size: 19px; border-radius: 13px; }
.ag-av.xl { width: 64px; height: 64px; font-size: 26px; border-radius: 18px; background: var(--ag); color: #fff; border: 0; }

/* ---- Thanh công cụ danh sách */
.ag-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ag-toolbar input[type=search] { flex: 1 1 280px; max-width: 420px; border-radius: 10px; padding: 9px 12px; }
.ag-toolbar .chips { flex: 1 1 auto; }
.chips .chip small { margin-left: 3px; color: var(--muted); font-weight: 600; }
.chips .chip.hot { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.chips .chip.hot.on { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.chips .chip.hot.on small { color: #fff; }

/* ---- Trang chi tiết */
.ag-dh { gap: 10px 12px; }
.ag-dh h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-dh .ag-who { margin-right: auto; flex: 1 1 280px; }
.ag-dh .ag-who h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-dh-t { margin-right: auto; min-width: 0; flex: 1 1 280px; display: flex; flex-direction: column; }
.ag-dh-t small { font-size: 12.5px; }
.ag-dh-act { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-dl { margin: 0; display: grid; gap: 0; }
.ag-dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.ag-dl > div:first-child { border-top: 0; padding-top: 0; }
.ag-dl dt { color: var(--muted); }
.ag-dl dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-tabs-card { padding-top: 6px; }
.ag-tabs-card .tabs { margin: 0 -16px 14px; padding: 0 10px; }
.ag-q { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ag-q > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ag-q span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ag-q b { font-size: 19px; color: var(--ag-dk); font-variant-numeric: tabular-nums; }
.ag-q small { font-size: 11.5px; }
.ag-log { list-style: none; margin: 0; padding: 0; display: grid; max-height: 460px; overflow: auto; }
.ag-log li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.ag-log li:first-child { border-top: 0; padding-top: 0; }
.ag-log i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ag); margin-top: 6px; box-shadow: 0 0 0 3px var(--ag-soft); }
.ag-log small { font-size: 12px; }

/* ---- Ô nhập tiền */
.ag-pin { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; max-width: 160px; }
.ag-pin:focus-within { border-color: var(--ag); box-shadow: 0 0 0 3px var(--ag-soft); }
.ag-pin input { border: 0 !important; outline: 0 !important; text-align: right; padding: 7px 4px 7px 10px; width: 100%; min-width: 0; background: transparent; font-variant-numeric: tabular-nums; font-weight: 600; }
.ag-pin span { padding: 0 10px 0 2px; color: var(--muted); font-size: 13px; }
.ag-pin:has(input.bad) { border-color: #f87171; background: #fef2f2; }
.ag-pin:has(input:disabled) { background: var(--surface-2); }
.ag-pin.big { max-width: none; width: 100%; }
.ag-pin.big input { font-size: 24px; padding: 10px 6px 10px 14px; }
.ag-pin.big span { font-size: 18px; }
.ag-pin-m { min-height: 0; margin-top: 3px; }
.ag-pin-m.ok { color: #047857; }
.ag-pin-m.err { color: #b91c1c; font-weight: 600; }
.ag-prices .ag-pin { width: 140px; }

/* ---- Form */
.ag-form-page { display: grid; gap: 14px; max-width: 860px; }
.ag-type { display: inline-flex; margin-bottom: 12px; }
.ag-type label { cursor: pointer; }
.ag-type input { position: absolute; opacity: 0; pointer-events: none; }
.ag-type span { display: block; padding: 8px 16px; font-weight: 600; color: var(--muted); }
.ag-type label + label span { border-left: 1px solid var(--line); }
.ag-type input:checked + span { background: var(--ag); color: #fff; }
.ag-type input:focus-visible + span { outline: 2px solid var(--ag); outline-offset: -2px; }
.ag-sticky { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: rgb(255 255 255 / 92%); backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgb(15 23 42 / 16%); border: 1px solid var(--line); }
.ag-dirty span { margin-right: auto; font-weight: 600; color: var(--warn); font-size: 13.5px; }
.ag-dirty span::before { content: '● '; }
.ag-done { text-align: center; }
.ag-done-i { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #fff; background: #10b981; box-shadow: 0 6px 18px rgb(16 185 129 / 35%); }
.ag-cred { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.ag-cred > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ag-cred span { font-size: 12px; color: var(--muted); }
.ag-cred b { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.ag-cred.one { margin: 8px 0 0; }
.ag-led-c { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 12px; }
.ag-amt { margin-top: 2px; }
.ag-quick { margin-top: 8px; }
.ag-led-after { margin-top: 10px; color: var(--muted); min-height: 18px; }

/* ---- Bảng giá */
.ag-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border: 1px dashed var(--ag-line); background: linear-gradient(180deg, var(--ag-soft), #fff); }
.ag-bulk > div:first-child { display: flex; flex-direction: column; }
.ag-bulk small { font-size: 12.5px; }
.ag-bulk .ag-pin { width: 90px; }
.ag-bulk .row { gap: 8px; }

/* ---- Thương hiệu */
.ag-lbl { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.ag-color { margin-top: 14px; }
.ag-color input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.ag-hex { width: 110px !important; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.ag-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-sw button { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.ag-sw button:hover { transform: scale(1.1); }
.ag-imgs { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.ag-img { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-img small { font-size: 12px; }
.ag-img-b { height: 86px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; padding: 8px;
  background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 50% / 16px 16px; }
.ag-img-b img { max-height: 70px; max-width: 100%; object-fit: contain; }
.ag-img-b.favicon img { width: 48px; height: 48px; }
.ag-dom { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-dom li { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; }
.ag-dom li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-dom small { font-size: 12px; }
.ag-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: none; }
.ag-dot.ok { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }

/* Xem trước thương hiệu */
.pv { --pv-dk: color-mix(in srgb, var(--pv) 65%, #000); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f2f4f8; font-size: 12px; }
.pv-tab { display: flex; align-items: center; gap: 6px; background: #e2e8f0; padding: 6px 10px; }
.pv-t { background: #fff; border-radius: 8px 8px 0 0; padding: 4px 12px 4px 8px; margin-bottom: -6px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pv-fav { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.pv-fav img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.pv-fav i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.pv-login { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 14px; background: linear-gradient(135deg, var(--pv) 0%, var(--pv-dk) 100%); color: #fff; }
.pv-hero { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-hero b { font-size: 15px; line-height: 1.2; }
.pv-hero small { color: rgb(255 255 255 / 80%); font-size: 11px; }
.pv-logo { max-height: 34px; max-width: 130px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px 6px; align-self: flex-start; margin-bottom: 4px; }
.pv-ini { width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.pv-box { background: #fff; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-self: center; box-shadow: 0 6px 18px rgb(0 0 0 / 20%); }
.pv-box i { height: 9px; border-radius: 4px; background: #e2e8f0; }
.pv-btn { display: block; text-align: center; background: var(--pv); color: #fff; font-weight: 700; border-radius: 6px; padding: 5px 8px; font-size: 11px; }
.pv-btn.sm { display: inline-block; align-self: flex-start; }
.pv-app { display: grid; grid-template-columns: 112px 1fr; min-height: 132px; border-top: 1px solid var(--line); }
.pv-side { background: linear-gradient(180deg, var(--pv) 0%, var(--pv-dk) 100%); color: #fff; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-side .pv-mk { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; background: #fff; padding: 2px; font-size: 13px; margin: 0; }
.pv-side b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.pv-side span { font-size: 10.5px; padding: 4px 6px; border-radius: 6px; color: rgb(255 255 255 / 82%); white-space: nowrap; overflow: hidden; }
.pv-side span.on { background: rgb(255 255 255 / 18%); color: #fff; font-weight: 600; }
.pv-main { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pv-main > i { height: 10px; border-radius: 4px; background: #cbd5e1; }
.pv-main > i.w60 { width: 60%; background: var(--pv); opacity: .55; }
.pv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-cards i { height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 8%); border-left: 3px solid var(--pv); }
.pv-foot { padding: 7px 10px; text-align: center; color: var(--muted); font-size: 10.5px; border-top: 1px solid var(--line); background: #fff; white-space: pre-line; }

/* ---- Ví & thanh toán */
.ag-pay { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.ag-qr { text-align: center; }
.ag-qr img { width: 150px; height: 150px; border-radius: 12px; border: 1px solid var(--line); background: #fff; object-fit: contain; display: block; }
.ag-qr small { font-size: 11.5px; }
.ag-bank > div { grid-template-columns: 1fr; gap: 2px; }
.ag-bank dd .btn { padding: 2px 8px; font-size: 12px; }
.ag-bank .hl { background: var(--ag-soft); border: 1px dashed var(--ag-line) !important; border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
.ag-code { font-family: ui-monospace, Menlo, monospace; font-size: 16px; color: var(--ag-dk); letter-spacing: .04em; }

/* ---- Tài khoản */
.ag-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-roles .card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; }
.ag-roles small { font-size: 12.5px; line-height: 1.45; }
.ag-me { display: flex; gap: 16px; align-items: center; border-radius: 14px; }
.ag-me h3 { margin: 0; }

/* ---- Chọn khách (tạo chiến dịch) */
.ag-pick { border-radius: 14px; }
.ag-pick-row { flex-wrap: wrap; }
.ag-pick-row .num { text-align: right; }
.ag-res { display: grid; gap: 6px; margin-top: 10px; max-height: 420px; overflow: auto; }
.ag-res-i { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; color: inherit; }
.ag-res-i:hover { border-color: var(--ag); background: var(--ag-soft); }
.ag-res-i > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-res-i .num { display: flex; flex-direction: column; align-items: flex-end; }
.ag-res-i small { font-size: 12px; }

/* ---- Đại lý bị khóa */
.ag-locked .main::before { content: 'Tài khoản đại lý đang tạm khóa – khách không tạo được chiến dịch mới. Liên hệ nhà cung cấp.'; display: block; margin-bottom: 12px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; }

/* ---- Màn hình vừa */
@media (max-width: 1280px) {
  .ag-kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .ag-split.wide { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1100px) {
  .ag-grid, .ag-split, .ag-split.wide { grid-template-columns: minmax(0, 1fr); }
  .ag-stick { position: static; }
  .ag-q { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ag-kpis, .ag-kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-kpis.k5 > :first-child { grid-column: 1 / -1; }
  .ag-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Điện thoại */
@media (max-width: 700px) {
  .ag { gap: 12px; }
  .ag-hero { grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 16px; }
  .ag-hero-l h2 { font-size: 20px; white-space: normal; }
  .ag-hero-r { align-items: stretch; }
  .ag-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ag-hero-cta { display: grid; grid-template-columns: 1fr 1fr; }
  .ag-hero-cta .btn { justify-content: center; text-align: center; }
  .ag-money { grid-template-columns: 1fr 1fr; }
  .ag-m.hl { grid-column: 1 / -1; order: -1; }
  .ag-m > b { font-size: 22px; }
  .ag-m.hl > b { font-size: 28px; }
  .ag-m { padding: 10px 12px; }
  .ag-tips { grid-template-columns: minmax(0, 1fr); }
  .ag-kpi { padding: 11px 12px; }
  .ag-k-v { font-size: 20px; }
  .ag-k-l { font-size: 11px; }
  .ag-li { flex-wrap: wrap; }
  .ag-li-m { flex-basis: 100%; }
  .ag-li-n { align-items: flex-start; text-align: left; margin-right: auto; }
  .ag-li-n.wide { width: 100%; }
  .ag-li-a { flex: 1 1 100%; justify-content: flex-end; }
  .ag-li-n + .ag-li-a { flex-basis: auto; flex-grow: 1; }
  .ag-li-a .btn { min-height: 38px; flex: 1; justify-content: center; }
  .ag-toolbar input[type=search] { max-width: none; flex-basis: 100%; }
  .ag-toolbar .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
  .ag-toolbar .chips::-webkit-scrollbar { display: none; }
  .ag-toolbar .chip { white-space: nowrap; flex: none; }
  .ag-dh .ag-who.lg { flex-basis: calc(100% - 60px); }
  .ag-dh-t { flex-basis: calc(100% - 60px); }
  .ag-dh-act { flex-basis: 100%; }
  .ag-dh-act .btn { flex: 1 1 auto; justify-content: center; }
  .ag-dl > div { grid-template-columns: 110px minmax(0, 1fr); }
  .ag-w-big { font-size: 26px; }
  .ag-wallet.big .ag-w-big { font-size: 30px; }
  .ag-w-grid.g3 { grid-template-columns: 1fr 1fr; }
  .ag-w-grid.g3 > div:last-child { grid-column: 1 / -1; }
  .ag-tbl .ag-bar { max-width: 110px; }
  table.stack-m.ag-tbl > tbody > tr > td.num { text-align: right; }
  table.stack-m.ag-tbl > tbody > tr > td > .ag-bar { display: none; }
  .ag-tabs-card { padding: 4px 12px 12px; }
  .ag-tabs-card .tabs { margin: 0 -12px 12px; }
  .ag-card .ag-tw, .ag-tabs-card .ag-tw { border: 0; }
  .ag-imgs { grid-template-columns: 1fr; }
  .ag-pay { grid-template-columns: minmax(0, 1fr); }
  .ag-qr img { margin: 0 auto; width: 180px; height: 180px; }
  .ag-roles { grid-template-columns: minmax(0, 1fr); }
  .ag-bulk .row { width: 100%; }
  .ag-prices .ag-pin { width: 130px; }
  .ag-sticky { bottom: calc(var(--tabbar-h, 64px) + 10px + var(--sab, 0px)); }
  .ag-sticky .btn { flex: 1 1 auto; justify-content: center; }
  .ag-dirty span { flex-basis: 100%; }
  .ag-sticky { flex-wrap: wrap; }
  .ag-q b { font-size: 17px; }
  .ag-cred > div { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .pv-login { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-kpi, .ag-bar i { transition: none; }
}

/* Một cột: ví lên trước biểu đồ; biểu đồ ngày co vừa màn hình */
@media (max-width: 1100px) {
  .ag-grid > .ag-col { display: contents; }
  .ag-grid > .ag-col > .ag-wallet { order: -1; }
}
@media (max-width: 700px) {
  .ag-bars .bars { gap: 2px; overflow: visible; }
  .ag-bars .bars .bar { flex: 1 1 0; min-width: 3px; }
}
@media (max-width: 1100px) {
  .ag-split > .ag-col { display: contents; }
  .ag-split > .ag-col > .ag-wallet { order: -1; }
  .ag-split { gap: 12px; }
}
@media (max-width: 900px) {
  .ag-kpis.k3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* ================= Giai đoạn 2: phân quyền, thu tiền, khuyến mãi, hóa đơn, báo cáo, cài đặt ================= */
.ag-portal .grow { flex: 1 1 auto; }
.ag-portal .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ag-portal .btn.danger-t { color: #b91c1c; }
.ag .page-head { flex-wrap: wrap; gap: 8px; }
.ag .page-head > h2 { margin-right: auto; }

/* Dải "chỉ xem" theo vai trò */
.ag-ro { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; border-radius: 12px; background: var(--surface-2, #f1f5f9); border: 1px dashed var(--line); font-size: 13px; color: #334155; }
.ag-ro > span:first-child { font-size: 15px; line-height: 1.2; }

/* Băng thông báo lớn */
.ag-banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.ag-banner > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ag-banner small { font-size: 12.5px; line-height: 1.5; color: #475569; }
.ag-banner-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; background: var(--ag-soft); }
.ag-banner.warn { background: linear-gradient(90deg, #fffbeb, #fff 70%); border-color: #fde68a; }
.ag-banner.warn .ag-banner-i { background: #fef3c7; }
.ag-banner.info { background: linear-gradient(90deg, var(--ag-soft), #fff 75%); border-color: var(--ag-line); }

/* Chip trạng thái */
.ag-stchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-toolbar > div:has(> .ag-stchips) { flex: 1 1 auto; min-width: 0; }
.ag-toolbar.sm { margin-bottom: 10px; }
.ag-toolbar.sm input[type=search] { flex-basis: 200px; }
.ag-acts { gap: 6px; justify-content: flex-end; }

/* Giao dịch ngân hàng */
.ag-txc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; color: #0f172a; }
.ag-txbox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: var(--ag-soft); border: 1px solid var(--ag-line); margin-bottom: 12px; }
.ag-txbox > div { display: grid; gap: 2px; min-width: 0; }
.ag-txbox .full { grid-column: 1 / -1; }
.ag-txbox small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.ag-txbox b { font-size: 22px; color: #047857; font-variant-numeric: tabular-nums; }
.ag-cpick { display: grid; gap: 6px; margin: 8px 0 12px; max-height: 300px; overflow: auto; padding: 2px; }
.ag-copt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; min-height: 48px; }
.ag-copt:hover { border-color: var(--ag-line); background: var(--ag-soft); }
.ag-copt.on { border-color: var(--ag); background: var(--ag-soft); box-shadow: 0 0 0 2px var(--ag-soft) inset; }
.ag-copt-m { flex: 1 1 auto; min-width: 0; display: grid; }
.ag-copt-m small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-copt .ag-av { flex: none; }
.ag-cmore { padding: 2px 4px; }
.ag-reqs { display: grid; gap: 6px; margin: 0 0 10px; border-radius: 12px; }
.ag-reqs legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.ag-req { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.ag-req:has(input:checked) { border-color: var(--ag); background: var(--ag-soft); }
.ag-req input { margin-top: 3px; accent-color: var(--ag); }
.ag-req > span { display: grid; gap: 2px; font-size: 13.5px; }
.ag-portal .modal .ag-led-after { padding: 9px 12px; border-radius: 10px; background: var(--surface-2, #f8fafc); line-height: 1.55; }
.ag-portal .modal .ag-led-after:empty { display: none; }

/* Yêu cầu nạp */
.ag-code.sm { font-size: 14px; }
.ag-ck { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--line); margin-right: 4px; }
.ag-coupon { display: inline-block; font: 700 11.5px ui-monospace, Menlo, monospace; letter-spacing: .05em; padding: 2px 8px; border-radius: 6px; color: var(--ag-dk, #3b0764); background: repeating-linear-gradient(135deg, var(--ag-soft, #f5f3ff) 0 6px, #fff 6px 12px); border: 1px dashed var(--ag, #7c3aed); }
.ag-coupon.lg { font-size: 13.5px; padding: 3px 10px; }

/* Khuyến mãi nạp khi nạp tay */
.ag-bonus { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid #a7f3d0; background: #f0fdf4; cursor: pointer; }
.ag-bonus input { margin-top: 3px; width: 18px; height: 18px; accent-color: #059669; flex: none; }
.ag-bonus > span { display: grid; gap: 2px; }
.ag-bonus small { font-size: 12px; }

/* Khuyến mãi: bậc */
.ag-tiers { display: grid; gap: 8px; margin: 10px 0; }
.ag-tier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, #f8fafc); border: 1px solid var(--line); }
.ag-tier .ag-pin { flex: 1 1 120px; max-width: 170px; background: #fff; }
.ag-tier .ag-pin.pct { flex: 0 0 84px; }
.ag-tier-l { font-size: 13px; color: var(--muted); }
.ag-tier-x { margin-left: auto; color: #b91c1c; }
.ag-tier-act { gap: 8px; }
.ag-tmin { margin: 4px 0 12px; }
.ag-tmin .ag-pin { max-width: 220px; width: 100%; }
.ag-cond { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ag-cond .pill { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ag-cst { display: inline-flex; align-items: center; gap: 8px; }
.ag-cpf .seg { margin: 0; display: flex; }
.ag-cpf .seg label { flex: 1; }
.ag-cpf .seg span { justify-content: center; width: 100%; }
.ag-cpf .ag-pin { max-width: none; width: 100%; }
.ag-code-in { gap: 6px; flex-wrap: nowrap; }
.ag-code-in input { font-family: ui-monospace, Menlo, monospace; letter-spacing: .05em; font-weight: 700; }
.ag-portal .check-field { gap: 8px; align-items: center; font-size: 13.5px; }

/* Hóa đơn */
.ag-files { display: inline-flex; gap: 4px; }
.ag-file { font: 700 10.5px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 5px; border: 1px dashed var(--line); color: #94a3b8; }
.ag-file.on { border-style: solid; border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.ag-inv { display: grid; gap: 14px; }
.ag-inv-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--ag-soft), #fff); border: 1px solid var(--ag-line); }
.ag-inv-amt { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--ag-dk); }
.ag-inv-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.ag-inv .ag-h4 { margin: 0 0 8px; }
.ag-log i.ok { background: #059669; box-shadow: 0 0 0 3px #d1fae5; }
.ag-log li > div { display: block; }
.ag-inv .ag-log small { display: block; }
.ag-fslots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-fslot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--line); background: #fff; }
.ag-fslot > div:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; }
.ag-fslot.on { border-style: solid; border-color: #a7f3d0; background: #f0fdf4; }
.ag-fslot-i { font-size: 22px; }
.ag-issue { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--ag-line); background: #fff; box-shadow: var(--shadow); }
.ag-issue .ag-h4 { margin: 0; }
.ag-send { grid-column: 1 / -1; }
.ag-portal .modal .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ag-inv-act { padding-top: 4px; }

/* Báo cáo */
.ag-rbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 14px; margin: 0; }
.ag-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-rbar .ag-range { display: flex; align-items: center; }
.ag-groups { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 12px; }
.ag-groups::-webkit-scrollbar { display: none; }
.ag-groups button { white-space: nowrap; padding: 8px 14px; }
.ag-portal .ag-groups button.active { background: var(--wl); color: #fff; }
.ag-rp #body { display: grid; gap: 14px; min-width: 0; transition: opacity .15s; }
.ag-rp #body > * { margin: 0; min-width: 0; }
.ag-loading { opacity: .45; pointer-events: none; }
.ag-cash { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ag-cash-c { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, #f8fafc); border: 1px solid var(--line); min-width: 0; }
.ag-cash-c > span { font-size: 12px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.ag-cash-c > b { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ag-cash-c > b small { font-size: 12px; color: var(--muted); margin-left: 1px; }
.ag-cash-c > small { font-size: 11.5px; }
.ag-cash-c.in { background: #f0fdf4; border-color: #bbf7d0; }
.ag-cash-c.in > b { color: #047857; }
.ag-cash-c.gift > b { color: #b45309; }
.ag-cash-c.out > b { color: #334155; }
.ag-net { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.ag-net b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ag-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.ag-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ag-legend i.c, .ag-sb-col i.c, .ag-hbar-t i.c { background: color-mix(in srgb, var(--ag) 22%, #e2e8f0); }
.ag-legend i.p, .ag-sb-col i.p, .ag-hbar-t i.p { background: var(--ag); }
.ag-sbars { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-bottom: 20px; position: relative; }
.ag-sb { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.ag-sb-col { display: flex; flex-direction: column; min-height: 2px; border-radius: 4px 4px 1px 1px; overflow: hidden; background: #eef2f7; transition: filter .15s; }
.ag-sb:hover .ag-sb-col { filter: brightness(.9); }
.ag-sb > span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ag-sbmax { text-align: right; margin-top: 4px; }
.ag-hbar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-hbar .row { gap: 8px; align-items: baseline; flex-wrap: nowrap; }
.ag-hbar-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ag-hbar .row small { white-space: nowrap; }
.ag-hbar-t { height: 10px; border-radius: 99px; background: #f1f5f9; overflow: hidden; margin-top: 4px; }
.ag-hbar-t > div { display: flex; height: 100%; border-radius: 99px; overflow: hidden; min-width: 3px; }
.ag-sort { all: unset; cursor: pointer; font-weight: 600; white-space: nowrap; }
.ag-sort:focus-visible { outline: 2px solid var(--ag); outline-offset: 2px; border-radius: 4px; }
.ag-sort::after { content: '↕'; margin-left: 4px; opacity: .3; font-size: 11px; }
.ag-sort.asc::after { content: '▲'; opacity: .8; }
.ag-sort.desc::after { content: '▼'; opacity: .8; }
.ag-rtbl tfoot td { border-top: 2px solid var(--line); background: var(--surface-2, #f8fafc); font-variant-numeric: tabular-nums; }
.ag-rtbl td.num { font-variant-numeric: tabular-nums; }
.ag-mg { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.ag-mg.hi { background: #ecfdf5; color: #047857; }
.ag-mg.mid { background: #fffbeb; color: #b45309; }
.ag-mg.lo { background: #fef2f2; color: #b91c1c; }

/* Cài đặt */
.ag-set { display: grid; gap: 12px; }
.ag-set-h { display: flex; gap: 12px; align-items: flex-start; }
.ag-set-h > div { flex: 1 1 auto; min-width: 0; }
.ag-set-h h3 { margin: 0 0 2px; }
.ag-set-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ag-soft); font-size: 19px; }
.ag-set-sw { font-size: 14px; }
.ag-key { gap: 6px; flex-wrap: nowrap; }
.ag-key input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; }
.ag-copyrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; border: 1px solid var(--ag-line); background: var(--ag-soft); }
.ag-copyrow code { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; color: var(--ag-dk); }
.ag-copyrow.sm { display: inline-flex; padding: 2px 2px 2px 8px; margin: 2px 0; max-width: 100%; }
.ag-copyrow.sm .btn { padding: 2px 8px; min-height: 0; }
.ag-guide, .ag-smtp, .ag-matrix { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; }
.ag-guide > summary, .ag-smtp > summary, .ag-matrix > summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 14px; list-style-position: inside; }
.ag-guide[open] > summary, .ag-smtp[open] > summary, .ag-matrix[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.ag-smtp[open], .ag-matrix[open] { padding-bottom: 12px; }
.ag-steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.ag-steps li { counter-increment: st; position: relative; padding-left: 38px; font-size: 13.5px; line-height: 1.6; }
.ag-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ag); color: #fff; font-weight: 700; font-size: 13px; }
.ag-steps li small { display: block; font-size: 12px; }
.ag-steps code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--line); overflow-wrap: anywhere; }
.ag-bank-l { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--ag-soft); }
.ag-via { padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.55; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.ag-via.agency { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.ag-set-ck { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.ag-set-ck input { margin-top: 3px; accent-color: var(--ag); }
.ag-smtp .chips { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-test { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ag-test .field { flex: 1 1 220px; margin: 0; }
.grid-form.one { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; }
.ag-chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.ag-chk li { display: flex; gap: 10px; align-items: center; }
.ag-chk i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: #fef3c7; color: #b45309; }
.ag-chk li.ok i { background: #d1fae5; color: #047857; }
.ag-chk li.info i { background: #dbeafe; color: #1d4ed8; }

/* Nhân viên & phân quyền */
.ag-roles.r5 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 12px; }
.ag-role { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.ag-role p { margin: 0; line-height: 1.45; }
.ag-role-h { display: flex; gap: 10px; align-items: center; }
.ag-role-h > div { display: grid; }
.ag-role-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ag-soft); font-size: 17px; }
.ag-role-a { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-ar { font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; white-space: nowrap; }
.ag-ar.read { background: #f8fafc; color: #475569; border-color: var(--line); }
.ag-ar i { font-style: normal; opacity: .75; }
.ag-pmx { width: 100%; border-collapse: collapse; font-size: 13px; }
.ag-pmx th, .ag-pmx td { text-align: center; padding: 8px 6px; }
.ag-pmx thead th { font-size: 12px; vertical-align: bottom; }
.ag-pmx thead th span { display: block; font-weight: 600; }
.ag-pmx tbody th { text-align: left; font-weight: 600; position: sticky; left: 0; background: #fff; min-width: 170px; }
.ag-pmx tbody th small { display: block; font-weight: 400; font-size: 11.5px; }
.ag-pm { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; border-radius: 7px; font-weight: 700; }
.ag-pm i { display: none; }
.ag-pm.full { background: #d1fae5; color: #047857; }
.ag-pm.read { background: #f1f5f9; }
.ag-pm.none { color: #cbd5e1; }
.ag-role-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; }
.ag-qual { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ag-qual li { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 1100px) {
  .ag-cash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ag-banner { flex-wrap: wrap; padding: 12px; }
  .ag-banner > div { flex-basis: calc(100% - 56px); }
  .ag-banner > .btn { flex: 1 1 100%; justify-content: center; }
  .ag-stchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px; }
  .ag-stchips::-webkit-scrollbar { display: none; }
  .ag-stchips .chip { flex: none; white-space: nowrap; }
  .ag-acts { width: 100%; }
  .ag-acts .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .ag-txbox b { font-size: 20px; }
  .ag-inv-g, .ag-fslots { grid-template-columns: minmax(0, 1fr); }
  .ag-inv-amt { font-size: 22px; }
  .ag-cash { grid-template-columns: 1fr 1fr; }
  .ag-cash-c:first-child { grid-column: 1 / -1; }
  .ag-rbar { padding: 10px; }
  .ag-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ag-presets::-webkit-scrollbar { display: none; }
  .ag-presets .chip { flex: none; white-space: nowrap; }
  .ag-rbar .ag-range { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr auto; }
  .ag-rbar .ag-range input[type=date] { width: 100%; }
  .ag-groups { width: 100%; }
  .ag-groups button { padding: 8px 11px; font-size: 13px; }
  .ag-sbars { height: 160px; gap: 1px; }
  .ag-sb > span { font-size: 9.5px; }
  .ag-rtbl tfoot { display: block; }
  .ag-rtbl tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, #f8fafc); }
  .ag-rtbl tfoot td { border: 0; background: none; padding: 0; text-align: left; }
  .ag-rtbl tfoot td:empty { display: none; }
  .ag-rtbl tfoot td:first-child { grid-column: 1 / -1; }
  .ag-rtbl tfoot td[data-label]:not(:first-child)::before { content: attr(data-label) ': '; color: var(--muted); font-size: 12px; }
  .ag-set-h .pill { display: none; }
  .ag-tier .ag-pin { flex: 1 1 100px; max-width: none; }
  .ag-test .btn { flex: 1 1 100%; justify-content: center; }
  .ag-roles.r5 { grid-template-columns: minmax(0, 1fr); }
  .ag-fslot { flex-wrap: wrap; }
  .ag-fslot > .row { width: 100%; justify-content: flex-end; }
}
.ag-coupon { white-space: nowrap; }
.ag-promo2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ag-promo2 > * { margin: 0; }
@media (max-width: 900px) { .ag-promo2 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (min-width: 1280px) { .ag-roles.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Cửa sổ (modal) nằm ngoài .ag → khai báo lại biến màu thương hiệu */
.ag-portal .modal { --ag: var(--wl, #0b4a9e); --ag-dk: color-mix(in srgb, var(--ag) 70%, #000); --ag-soft: color-mix(in srgb, var(--ag) 9%, #fff); --ag-line: color-mix(in srgb, var(--ag) 22%, #fff); }
.ag-portal .modal .btn.success { background: #059669; border-color: #059669; color: #fff; }
@media (max-width: 700px) {
  .ag-tier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 72px auto; gap: 6px; padding: 8px; }
  .ag-tier .ag-pin, .ag-tier .ag-pin.pct { max-width: none; width: 100%; }
  .ag-tier .ag-pin input { padding-left: 6px; }
  .ag-tier-l { font-size: 12px; }
  .ag-tier-x { margin: 0; width: 32px; height: 32px; }
}
.ag-cpf .seg span { white-space: nowrap; padding-left: 8px; padding-right: 8px; }