/* =====================================================================
   Alo Link theme
   Mực đêm (ink) cho khung, giấy lạnh (paper) cho nền, xanh cobalt cho thao tác,
   vàng "đồng xu" dành riêng cho mở khóa & tiền. Một font: Be Vietnam Pro.
   ===================================================================== */
:root {
  --ink: #141a33;
  --ink-2: #283056;
  --ink-soft: #5b6385;
  --paper: #f3f5fa;
  --card: #ffffff;
  --line: #e2e6f0;
  --cobalt: #2b59ff;
  --cobalt-dark: #1d43d6;
  --cobalt-tint: #eaefff;
  --coin: #ffc531;
  --coin-dark: #e5a800;
  --coin-tint: #fff6db;
  --mint: #12a37a;
  --mint-tint: #e3f6ef;
  --rose: #e5484d;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --sidebar: 248px;

  --bs-body-font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-secondary-color: var(--ink-soft);
  --bs-border-color: var(--line);
  --bs-primary: var(--cobalt);
  --bs-primary-rgb: 43, 89, 255;
  --bs-success-rgb: 18, 163, 122;
  --bs-danger-rgb: 229, 72, 77;
  --bs-link-color: var(--cobalt);
  --bs-link-color-rgb: 43, 89, 255;
  --bs-link-hover-color: var(--cobalt-dark);
  --bs-border-radius: var(--radius-s);
  --bs-border-radius-lg: var(--radius-m);
  --bs-focus-ring-color: rgba(43, 89, 255, .3);
}

body { background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.page-sub { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 70ch; }
:focus-visible { outline: 3px solid rgba(43, 89, 255, .45); outline-offset: 2px; }
::selection { background: var(--coin); color: var(--ink); }

/* ---------- nút ---------- */
.btn { font-weight: 600; border-radius: var(--radius-s); }
.btn-primary { --bs-btn-bg: var(--cobalt); --bs-btn-border-color: var(--cobalt); --bs-btn-hover-bg: var(--cobalt-dark); --bs-btn-hover-border-color: var(--cobalt-dark); --bs-btn-active-bg: var(--cobalt-dark); --bs-btn-disabled-bg: var(--cobalt); }
.btn-outline-primary { --bs-btn-color: var(--cobalt); --bs-btn-border-color: var(--cobalt); --bs-btn-hover-bg: var(--cobalt); --bs-btn-hover-border-color: var(--cobalt); --bs-btn-active-bg: var(--cobalt-dark); }
.btn-coin { background: var(--coin); color: var(--ink); border: 0; box-shadow: 0 3px 0 var(--coin-dark); }
.btn-coin:hover, .btn-coin:focus-visible { background: #ffd04f; color: var(--ink); }
.btn-coin:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coin-dark); }
.btn-ink { background: var(--ink); color: #fff; border: 0; }
.btn-ink:hover { background: var(--ink-2); color: #fff; }

/* ---------- thanh trên ---------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); height: 60px; position: sticky; top: 0; z-index: 1030; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -.02em; }
.brand-logo { display: block; height: 40px; width: auto; }
@media (max-width: 575.98px) { .brand-logo { height: 34px; } }
@media (max-width: 419.98px) { .brand-logo { height: 36px; } }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; color: var(--coin); font-size: 1.05rem; font-weight: 800; line-height: 1; }
.balance-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--coin-tint); color: var(--ink); border: 1px solid #f5dc8e; border-radius: 999px; padding: .3rem .8rem; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.balance-chip:hover { background: #fff0c2; color: var(--ink); }
.balance-chip i { color: var(--coin-dark); }

/* ---------- sidebar ---------- */
.shell { display: flex; min-height: calc(100vh - 60px); }
.sidebar, .sidebar.offcanvas-lg { width: var(--sidebar); flex: 0 0 var(--sidebar); background-color: var(--ink) !important; color: #c9cee6; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
  /* nền tối kéo dài hết trang dài */
  .shell { background: linear-gradient(to right, var(--ink) var(--sidebar), transparent var(--sidebar)); }
}
@media (max-width: 991.98px) { .sidebar { flex: none; } }
.sidebar .offcanvas-header { color: #fff; }
.sidebar .who { padding: 1rem .9rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: .5rem; }
.sidebar .who b { color: #fff; display: block; }
.sidebar .who small { color: #8f97bd; }
.sidebar .group { font-size: .78rem; color: #8f97bd; padding: .9rem .9rem .35rem; font-weight: 600; }
.sidebar .nav-link { color: #c9cee6; border-radius: var(--radius-s); padding: .5rem .75rem; margin: 1px .4rem; display: flex; gap: .7rem; align-items: center; font-weight: 500; }
.sidebar .nav-link i { font-size: 1.05rem; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .nav-link.active { background: var(--cobalt); color: #fff; }
.sidebar .nav-link.active i { opacity: 1; }
.main-area { flex: 1; min-width: 0; padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; }

/* ---------- khối ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: none; }
.card-title-sm { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.card-sub { color: var(--ink-soft); font-size: .875rem; margin-bottom: 1rem; }
.stat { padding: 1.1rem 1.25rem; }
.stat .label { font-size: .85rem; color: var(--ink-soft); font-weight: 500; }
.stat .value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .15rem; }
@media (max-width: 575.98px) { .stat { padding: .95rem 1rem; } .stat .value { font-size: clamp(1.05rem, 5.4vw, 1.5rem); white-space: nowrap; } }
.stat .foot { font-size: .8rem; color: var(--ink-soft); margin-top: .2rem; }
.stat-money { background: var(--ink); color: #fff; border-color: var(--ink); }
.stat-money .label, .stat-money .foot { color: #a9b0d3; }
.stat-money .value { color: var(--coin); }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .8rem; font-weight: 600; color: var(--ink-soft); border-bottom-color: var(--line); white-space: nowrap; }
.table td { border-color: var(--line); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
.form-text { color: var(--ink-soft); }
.form-control, .form-select { border-color: #d6dbe8; }
.form-control:focus, .form-select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 .2rem rgba(43, 89, 255, .15); }
.badge { font-weight: 600; }
.badge-soft { background: var(--cobalt-tint); color: var(--cobalt-dark); }
.badge-coin { background: var(--coin-tint); color: #8a6400; }
.badge-mint { background: var(--mint-tint); color: #0b7356; }
.text-truncate-300 { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.alert { border-radius: var(--radius-m); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.empty i { font-size: 2rem; display: block; margin-bottom: .5rem; color: #b5bcd3; }

/* ---------- trang cài đặt: mỗi dòng 1 ý ---------- */
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 1rem 2rem; padding: 1rem 0; border-top: 1px solid var(--line); align-items: center; }
.setting-row:first-of-type { border-top: 0; padding-top: .25rem; }
.setting-row .name { font-weight: 600; }
.setting-row .desc { color: var(--ink-soft); font-size: .85rem; max-width: 60ch; }
@media (max-width: 767.98px) { .setting-row { grid-template-columns: 1fr; gap: .5rem; } }
.settings-nav { position: sticky; top: 84px; }
.settings-nav a { display: block; padding: .45rem .75rem; border-radius: var(--radius-s); color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.settings-nav a:hover { background: var(--card); color: var(--ink); }
.example { background: var(--coin-tint); border: 1px dashed #f0cd6a; border-radius: var(--radius-s); padding: .6rem .8rem; font-size: .85rem; }
.form-switch { padding-left: 3.3em; min-height: 1.5em; }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-left: -3.3em; margin-top: .05em; cursor: pointer; }
.form-switch .form-check-label { padding-top: .1em; }
.form-switch .form-check-input:checked { background-color: var(--mint); border-color: var(--mint); }

/* ---------- trang vượt link: tấm vé ---------- */
.gate-page { background: radial-gradient(circle at 50% -20%, #dfe6ff 0, transparent 55%), var(--paper); }
.gate-wrap { display: grid; grid-template-columns: 160px minmax(0, 520px) 160px; gap: 1.5rem; justify-content: center; align-items: start; }
@media (max-width: 991.98px) { .gate-wrap { grid-template-columns: minmax(0, 520px); } .ad-side { display: none; } }
.ad-side { position: sticky; top: 84px; }
.ticket { background: var(--card); border-radius: var(--radius-l); box-shadow: 0 18px 40px -18px rgba(20, 26, 51, .35); position: relative; overflow: hidden; }
.ticket-head { background: var(--ink); color: #fff; padding: 1.4rem 1.5rem 1.6rem; }
.ticket-head .kind { color: var(--coin); font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.ticket-head h1 { color: #fff; font-size: 1.35rem; margin: .35rem 0 0; word-break: break-word; }
.ticket-head .host { color: #a9b0d3; font-size: .85rem; margin-top: .3rem; }
/* đường xé vé */
.ticket-tear { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 18px; }
.ticket-tear::before, .ticket-tear::after { content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); }
.ticket-tear::before { left: -31px; }
.ticket-tear::after { right: -31px; }
.ticket-body { padding: 1.5rem; }
.btn-getlink { width: 100%; font-size: 1.15rem; padding: .95rem 1rem; border-radius: var(--radius-m); }
.or-split { display: flex; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .85rem; margin: 1.4rem 0 1rem; }
.or-split::before, .or-split::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.buy-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--paper); border-radius: var(--radius-m); padding: .9rem 1rem; }
.buy-box .price { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.steps-mini { list-style: none; padding: 0; margin: 1.1rem 0 0; font-size: .85rem; color: var(--ink-soft); display: grid; gap: .35rem; }
.steps-mini li { display: flex; gap: .55rem; }
.steps-mini b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--cobalt-tint); color: var(--cobalt-dark); display: grid; place-items: center; font-size: .75rem; }

/* ---------- ô quảng cáo ---------- */
.ad-slot { text-align: center; margin: 1rem auto; max-width: 100%; overflow: hidden; }
.ad-slot .ad-label { display: block; font-size: .7rem; color: #9aa2c0; margin-bottom: .25rem; }
.ad-slot img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.ad-slot-inside { margin: 0 0 1.1rem; }

/* ---------- note ---------- */
.note-content { font-size: 1rem; line-height: 1.7; word-wrap: break-word; max-width: 72ch; }
.note-content img, .note-content iframe, .note-content video { max-width: 100%; border-radius: var(--radius-s); }

/* ---------- trang chủ ---------- */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 3rem; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; max-width: 15ch; }
.hero p.lead { color: var(--ink-soft); max-width: 46ch; font-size: 1.1rem; }
.stub { background: var(--ink); color: #fff; border-radius: var(--radius-l); padding: 1.5rem; box-shadow: 0 30px 60px -30px rgba(20, 26, 51, .55); }
.stub .long { color: #8f97bd; font-size: .85rem; word-break: break-all; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.stub .short { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--coin); letter-spacing: -.02em; margin: .4rem 0 1rem; }
.stub .row-line { display: flex; justify-content: space-between; border-top: 1px dashed rgba(255, 255, 255, .15); padding-top: .8rem; font-size: .9rem; color: #c9cee6; }
.stub .row-line b { color: #fff; font-variant-numeric: tabular-nums; }
.feature h3 { font-size: 1.05rem; margin-top: .6rem; }
.feature p { color: var(--ink-soft); margin: 0; }
.feature .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt); font-size: 1.2rem; }
.how { counter-reset: how; }
.how li { list-style: none; position: relative; padding-left: 2.6rem; margin-bottom: 1rem; }
.how li::before { counter-increment: how; content: counter(how); position: absolute; left: 0; top: -.1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--coin); color: var(--ink); font-weight: 800; display: grid; place-items: center; }
.site-foot { border-top: 1px solid var(--line); padding: 1.25rem 0; font-size: .85rem; color: var(--ink-soft); }
.auth-card { max-width: 420px; margin: 2rem auto; }

/* ---------- mã/sao chép ---------- */
.codebox { background: var(--ink); color: #dfe3f5; border-radius: var(--radius-s); padding: .7rem .9rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; }
.codebox .hl { color: var(--coin); }

/* ---------- trình soạn thảo note ---------- */
.editor { border: 1px solid #d6dbe8; border-radius: var(--radius-m); background: var(--card); }
.editor:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 .2rem rgba(43, 89, 255, .12); }
.ed-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: .4rem; border-bottom: 1px solid var(--line); position: sticky; top: 60px; background: var(--card); z-index: 5; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.ed-toolbar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.ed-toolbar button, .ed-toolbar label { border: 0; background: transparent; border-radius: 6px; min-width: 32px; height: 32px; display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; padding: 0 .45rem; font-size: .95rem; font-weight: 600; }
.ed-toolbar button:hover, .ed-toolbar label:hover { background: var(--paper); }
.ed-toolbar button.active { background: var(--cobalt-tint); color: var(--cobalt-dark); }
.ed-toolbar button:disabled { opacity: .35; }
.ed-toolbar input[type=color] { position: absolute; opacity: 0; width: 0; height: 0; }
.ed-area { min-height: 360px; padding: 1.1rem 1.25rem; outline: none; }
.ed-area:empty::before { content: attr(data-placeholder); color: #9aa2c0; }
.ed-source { min-height: 360px; border: 0; border-radius: 0 0 var(--radius-m) var(--radius-m); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.ed-foot { display: flex; justify-content: space-between; padding: .4rem .9rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-soft); }
.title-input { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; border: 0; background: transparent; padding: .25rem 0; }
.title-input:focus { box-shadow: none; }

/* ---------- nội dung note (dùng chung cho trang xem & trình soạn) ---------- */
.note-content, .ed-area { font-size: 1.02rem; line-height: 1.75; word-wrap: break-word; }
.note-content h1, .ed-area h1 { font-size: 1.7rem; margin: 1.4rem 0 .6rem; }
.note-content h2, .ed-area h2 { font-size: 1.35rem; margin: 1.3rem 0 .5rem; }
.note-content h3, .ed-area h3 { font-size: 1.12rem; margin: 1.1rem 0 .4rem; }
.note-content p, .ed-area p { margin: 0 0 .8rem; }
.note-content a, .ed-area a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.note-content blockquote, .ed-area blockquote { border-left: 4px solid var(--coin); background: var(--coin-tint); margin: 1rem 0; padding: .6rem 1rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.note-content pre, .ed-area pre { background: var(--ink); color: #e5e8f5; padding: .9rem 1rem; border-radius: var(--radius-s); white-space: pre-wrap; font-size: .85rem; }
.note-content ul, .note-content ol, .ed-area ul, .ed-area ol { padding-left: 1.4rem; margin-bottom: .8rem; }
.note-content li, .ed-area li { margin-bottom: .25rem; }
.note-content hr, .ed-area hr { border: 0; border-top: 2px dashed var(--line); margin: 1.5rem 0; opacity: 1; }
.note-content table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
.note-content th, .note-content td { border: 1px solid var(--line); padding: .4rem .6rem; }
.note-content img, .note-content iframe, .note-content video, .ed-area img, .ed-area iframe { max-width: 100%; border-radius: var(--radius-s); }
.note-content iframe, .ed-area iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }

/* ---------- trang xem note ---------- */
.note-page { max-width: 820px; margin: 0 auto; }
.note-hero { background: var(--ink); color: #fff; border-radius: var(--radius-l) var(--radius-l) 0 0; padding: 1.6rem 1.75rem 1.4rem; }
.note-hero h1 { color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0; letter-spacing: -.02em; word-break: break-word; }
.note-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: #a9b0d3; font-size: .85rem; margin-top: .7rem; }
.note-meta a { color: var(--coin); text-decoration: none; }
.note-tools { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 1.75rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: 4; }
.note-body { background: var(--card); padding: 1.6rem 1.75rem 2rem; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.note-body.size-lg .note-content { font-size: 1.15rem; }
.note-body.size-sm .note-content { font-size: .93rem; }
.links-box { border: 1px solid var(--line); border-radius: var(--radius-m); margin-top: 1.5rem; }
.links-box .head { padding: .7rem 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.links-box .row-link { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-top: 1px solid var(--line); }
.links-box .row-link:first-of-type { border-top: 0; }
.links-box .row-link a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-m); background: var(--paper); margin-top: 1.5rem; }
.author-card .avatar { width: 46px; height: 46px; border-radius: 13px; background: var(--ink); color: var(--coin); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; flex: none; }
@media (max-width: 575.98px) { .note-hero, .note-tools, .note-body { padding-left: 1.1rem; padding-right: 1.1rem; } }
@media print { .topbar, .note-tools, .site-foot, .ad-slot, .author-card .btn { display: none !important; } .note-hero { background: none; color: #000; } .note-hero h1 { color: #000; } }
.quick-actions { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .25rem .9rem .5rem; }
.btn-ghost { color: #c9cee6; border: 1px solid rgba(255, 255, 255, .16); background: transparent; }
.btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.plan-card.is-stopped { opacity: .65; }
.plan-card .dropdown-item { font-size: .9rem; }

/* Ô chọn ngân hàng */
.bank-trigger { display: flex; align-items: center; min-height: 52px; text-align: left; cursor: pointer; }
.bank-sel { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.bank-sel small { font-size: .78rem; }
.bank-logo { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.bank-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; opacity: 0; transition: opacity .15s; }
.bank-logo img.is-loaded { opacity: 1; }
.bank-ini { font-size: .64rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.bank-search { padding-left: 2.6rem; border-radius: 12px; }
.bank-search-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.bank-modal .modal-header { border-bottom: 0; position: sticky; top: 0; }
.bank-group-t { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: .25rem 0 .5rem; }
.bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1.1rem; }
.bank-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: .75rem; font-weight: 600; color: var(--ink); line-height: 1.15; text-align: center; word-break: break-word; }
.bank-tile:hover, .bank-tile:focus-visible { border-color: var(--cobalt); }
.bank-tile.active { border-color: var(--cobalt); background: #eef2ff; }
.bank-list { display: flex; flex-direction: column; }
.bank-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--ink); width: 100%; }
.bank-item + .bank-item { margin-top: 2px; }
.bank-item:hover, .bank-item:focus-visible { background: var(--paper); outline: none; }
.bank-item:focus-visible { box-shadow: inset 0 0 0 2px var(--cobalt); }
.bank-item small { font-size: .78rem; }
.bank-item .bank-check { color: var(--cobalt); visibility: hidden; font-size: 1.1rem; }
.bank-item.active { background: #eef2ff; }
.bank-item.active .bank-check { visibility: visible; }
.bank-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) { .bank-grid { grid-template-columns: repeat(3, 1fr); } }

/* Đăng ký: chọn loại tài khoản */
.auth-wide { max-width: 560px; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.type-card { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem; border: 2px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; transition: border-color .15s, background-color .15s; }
.type-card i { font-size: 1.6rem; color: var(--ink-soft); line-height: 1; margin-bottom: .2rem; }
.type-card b { font-size: 1rem; }
.type-card span { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.type-card:hover { border-color: #b9c6ff; }
.btn-check:checked + .type-card { border-color: var(--cobalt); background: #eef2ff; }
.btn-check:checked + .type-card i { color: var(--cobalt); }
.btn-check:focus-visible + .type-card { box-shadow: 0 0 0 .25rem rgba(43, 89, 255, .25); }
@media (max-width: 420px) { .type-pick { grid-template-columns: 1fr; } }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha-box { min-height: 78px; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; font-size: .95rem; }
.recovery-grid span { background: #fff; border: 1px dashed #e0b84a; border-radius: 8px; padding: .25rem .5rem; text-align: center; }

/* Dải logo ngân hàng */
.bank-strip-t { font-size: .82rem; color: var(--ink-soft); margin-bottom: .5rem; }
.bank-strip-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.bank-strip-list .bank-logo { width: 46px; height: 46px; border-radius: 12px; }
.bank-strip.is-compact .bank-logo { width: 36px; height: 36px; border-radius: 9px; }
.bank-strip-more { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .5rem; border-radius: 12px; background: var(--paper); border: 1px dashed var(--line); font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.bank-strip.is-compact .bank-strip-more { height: 36px; min-width: 36px; border-radius: 9px; }
.trust-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }

/* ---------- Trang vượt link: 3 cách mở (vượt / mua link / mua gói) ---------- */
.choose-title { text-align: center; font-weight: 700; color: var(--ink); margin: -.25rem 0 1rem; font-size: .95rem; }
.opt-free { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1rem 1.1rem; }
.opt-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.opt-head b { display: block; line-height: 1.2; }
.opt-head small { color: var(--ink-soft); font-size: .8rem; }
.opt-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt); font-size: 1.1rem; }
.opt-tag { white-space: nowrap; margin-left: auto; font-size: .72rem; font-weight: 700; color: #0b7356; background: var(--mint-tint); border-radius: 999px; padding: .2rem .6rem; }
.opt-buttons { display: grid; gap: .9rem; margin-top: .25rem; }
.opt-btn { position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; border: 0; border-radius: var(--radius-m); padding: .95rem 1rem; font: inherit; cursor: pointer; transition: transform var(--m-fast, .15s) ease, box-shadow var(--m-base, .24s) ease, filter var(--m-fast, .15s) ease; }
.opt-btn:hover { transform: translateY(-2px); }
.opt-btn:active { transform: scale(.98); }
.opt-btn:focus-visible { outline: 3px solid rgba(43, 89, 255, .45); outline-offset: 2px; }
.opt-buy { background: var(--cobalt); color: #fff; box-shadow: 0 10px 22px -14px rgba(43, 89, 255, .9); }
.opt-buy:hover { box-shadow: 0 14px 26px -12px rgba(43, 89, 255, .8); }
.opt-plan { background: var(--coin); color: var(--ink); box-shadow: 0 3px 0 var(--coin-dark), 0 10px 22px -14px rgba(229, 168, 0, .9); }
.opt-plan:hover { box-shadow: 0 5px 0 var(--coin-dark), 0 14px 26px -12px rgba(229, 168, 0, .8); }
.opt-btn-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255, 255, 255, .16); }
.opt-plan .opt-btn-ico { background: rgba(20, 26, 51, .1); }
.opt-btn-text { flex: 1; min-width: 0; line-height: 1.25; }
.opt-btn-text b { display: block; font-size: 1.02rem; }
.opt-btn-text small { opacity: .85; font-size: .78rem; }
.opt-price { flex: none; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.opt-price b { display: block; font-size: 1.15rem; font-weight: 800; }
.opt-price s, .opt-price small { display: block; font-size: .78rem; opacity: .75; }
.opt-off { position: absolute; top: -11px; right: 12px; display: inline-flex; align-items: center; gap: .3rem; background: var(--rose); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(229, 72, 77, .8); white-space: nowrap; }
.opt-off-inline { background: var(--rose); color: #fff; }
.buy-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; background: var(--paper); border-radius: var(--radius-m); padding: .9rem 1rem; }
.buy-sum-price { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.buy-sum-price s { font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.deposit-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 400px) { .deposit-btns { grid-template-columns: 1fr; } .opt-btn-text small { display: none; } }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 1.25rem; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card); transition: transform var(--m-base, .24s) ease, box-shadow var(--m-base, .24s) ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(20, 26, 51, .35); }
.pcard-head { position: relative; background: var(--ink); color: #fff; border-radius: var(--radius-m) var(--radius-m) 0 0; padding: 1.1rem 1rem .9rem; text-align: center; }
.pcard-dur { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.pcard-price { margin-top: .35rem; font-variant-numeric: tabular-nums; }
.pcard-price s { color: #8f97bd; font-size: .85rem; margin-right: .4rem; }
.pcard-price b { color: var(--coin); font-size: 1.35rem; font-weight: 800; }
.pcard-price small { color: #a9b0d3; font-size: .78rem; margin-left: .25rem; }
.pcard-body { padding: 1rem; flex: 1; }
.pcard-body h3 { font-size: 1rem; margin: 0 0 .35rem; text-align: center; }
.pcard-desc { color: var(--ink-soft); font-size: .85rem; text-align: center; white-space: pre-line; margin-bottom: .75rem; }
.pcard-facts { display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; margin: 0; font-size: .85rem; }
.pcard-facts dt { font-weight: 500; color: var(--ink-soft); display: flex; align-items: center; gap: .4rem; }
.pcard-facts dd { margin: 0; text-align: right; font-weight: 600; }
.pcard-foot { padding: 0 1rem 1rem; }
.pcard-safe { text-align: center; font-size: .75rem; color: var(--ink-soft); margin-top: .5rem; }
.plan-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.plan-info h3 { font-size: .95rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .45rem; }
.plan-info h3 i { color: var(--cobalt); }
.plan-info p, .plan-info ul { color: var(--ink-soft); font-size: .85rem; margin: 0; }
.plan-info ul { padding-left: 1.1rem; }
.plan-info li + li { margin-top: .25rem; }
.btn.is-armed { background: var(--rose) !important; color: #fff !important; box-shadow: 0 3px 0 #b8383c !important; }
.stat-warn { border-color: #f5dc8e; background: var(--coin-tint); }

/* Bắt đầu kiếm tiền */

/* ===== Thanh chuyển mục dạng phân đoạn ===== */
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #e9ecf5; border-radius: 12px; border: 0; }
.seg-tabs .nav-link { border: 0; border-radius: 9px; color: var(--ink-soft); font-weight: 600; font-size: .9rem; padding: .45rem .9rem; background: transparent; }
.seg-tabs .nav-link:hover { color: var(--ink); }
.seg-tabs .nav-link.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 26, 51, .08), 0 2px 8px rgba(20, 26, 51, .06); }
.seg-count { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .25rem; border-radius: 99px; background: var(--cobalt-tint); color: var(--cobalt-dark); font-size: .75rem; text-align: center; }

/* ===== Luồng 3 bước ===== */
.flow-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; counter-reset: flow; }
.flow-steps li { position: relative; display: flex; gap: .75rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .85rem 1rem; counter-increment: flow; }
.flow-steps li > i { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt); font-size: 1.1rem; }
.flow-steps li div { line-height: 1.3; min-width: 0; }
.flow-steps b { display: block; font-size: .92rem; }
.flow-steps b::before { content: counter(flow) '. '; color: var(--cobalt); }
.flow-steps span { font-size: .8rem; color: var(--ink-soft); }
.flow-steps li:not(:last-child)::after { content: ''; position: absolute; right: -.6rem; top: 50%; width: .45rem; height: .45rem; border-top: 2px solid #c3cae0; border-right: 2px solid #c3cae0; transform: translateY(-50%) rotate(45deg); z-index: 1; }
@media (max-width: 767.98px) { .flow-steps { grid-template-columns: 1fr; gap: .5rem; } .flow-steps li:not(:last-child)::after { display: none; } }

/* ===== Biểu đồ cột nhỏ ===== */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.spark i { flex: 1; border-radius: 3px 3px 0 0; background: var(--line); }
.spark i.on { background: var(--cobalt); }

/* ===== Thẻ API vượt link ===== */
.api-list { display: grid; gap: .75rem; }
.api-card .card-body { padding: 1rem 1.15rem; }
.api-card.is-off { background: #fafbfd; }
.api-card.is-off .api-name b, .api-card.is-off .api-order { opacity: .55; }
.api-top { display: flex; align-items: center; gap: .85rem; }
.api-order { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.api-name { flex: 1; min-width: 0; line-height: 1.25; }
.api-name b { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-name span { font-size: .8rem; color: var(--ink-soft); }
.api-switch { display: flex; align-items: center; gap: .5rem; }
.api-state { font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap; }
.is-live .api-state { background: var(--mint-tint); color: var(--mint); }
.is-wait .api-state { background: var(--coin-tint); color: #9a6d00; }
.is-off .api-state { background: #eef0f5; color: var(--ink-soft); }
.api-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 .65rem calc(34px + .85rem); }
.api-facts span { font-size: .8rem; background: #f3f5fa; border: 1px solid var(--line); border-radius: 99px; padding: .15rem .6rem; color: var(--ink-2); }
.api-facts i { margin-right: .3rem; color: var(--ink-soft); }
.api-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-left: calc(34px + .85rem); }
.api-count { font-size: .85rem; }
.api-count b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.api-edit { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-m); background: #f6f8fc; border: 1px solid var(--line); }
@media (max-width: 575.98px) { .api-facts, .api-bottom { margin-left: 0; } .api-state { display: none; } }

/* ===== Phần mở rộng trong form ===== */
details.adv { border: 1px dashed #cdd3e3; border-radius: var(--radius-m); padding: .65rem .9rem; background: #fbfcfe; }
details.adv > summary { cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: '\F285'; font-family: 'bootstrap-icons'; display: inline-block; margin-right: .4rem; font-size: .8rem; transition: transform .2s; }
details.adv[open] > summary::before { transform: rotate(90deg); }
.chip-btn { display: inline-block; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: .1rem .6rem; margin: .25rem .25rem 0 0; font-size: .8rem; color: var(--cobalt-dark); }
.chip-btn:hover { border-color: var(--cobalt); background: var(--cobalt-tint); }

/* ===== Cài đặt: trạng thái nạp tự động ===== */
.auto-card { color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.auto-card:hover { border-color: #c3cae0; box-shadow: 0 4px 14px rgba(20, 26, 51, .06); }
.auto-help { border-top: 1px solid var(--line); padding-top: 1rem; font-size: .9rem; }
.auto-help ol { padding-left: 1.2rem; margin-top: .4rem; }
.auto-help li { margin-bottom: .2rem; }

/* ===== Rút tiền: chọn cách nhận ===== */
.pay-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 720px; }
.pay-tile { position: relative; display: flex; align-items: center; gap: .85rem; text-align: left; padding: .9rem 1rem; border-radius: var(--radius-m); border: 2px solid var(--line); background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.pay-tile > i { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: #f0f2f8; color: var(--ink-soft); }
.pay-tile span { display: block; line-height: 1.3; min-width: 0; }
.pay-tile b { display: block; font-size: 1rem; }
.pay-tile small { display: block; color: var(--ink-soft); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-tile:hover:not(:disabled) { border-color: #c3cae0; }
.pay-tile.active { border-color: var(--cobalt); background: var(--cobalt-tint); box-shadow: 0 0 0 3px rgba(43, 89, 255, .12); }
.pay-tile.active > i { background: var(--cobalt); color: #fff; }
.pay-tile:disabled { opacity: .55; cursor: not-allowed; }
.pay-ok { position: absolute; top: .45rem; right: .6rem; color: var(--mint); font-size: .95rem; }
.pay-empty { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-radius: var(--radius-m); background: var(--coin-tint); border: 1px solid #f3dc9a; }
.pay-empty > i { font-size: 1.5rem; color: var(--coin-dark); }
.pay-empty b { display: block; }
.pay-empty span { font-size: .85rem; color: var(--ink-2); }
.pay-dest { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: var(--radius-m); background: #f6f8fc; border: 1px solid var(--line); }
.pay-dest > span:last-child { min-width: 0; line-height: 1.3; }
.pay-dest b { display: block; }
.pay-dest small { display: block; color: var(--ink-soft); font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .pay-pick { grid-template-columns: 1fr; } }

/* ===== Bộ lọc + danh sách kiểm duyệt ===== */
.filter-bar .card-body { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem; }
.filter-bar .filter-search { flex: 1 1 280px; }
.filter-bar .form-select { width: auto; flex: 0 1 190px; min-width: 0; max-width: 100%; }
.mod-list { list-style: none; margin: 0; padding: 0; }
.mod-list > li { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.mod-list > li:first-child { border-top: 0; }
.mod-list > li.is-hidden { background: #fafbfd; }
.mod-list > li.is-hidden .mod-main { opacity: .6; }
.mod-main { flex: 1; min-width: 0; }
.mod-title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mod-title a.fw-semibold { color: var(--ink); text-decoration: none; word-break: break-all; }
.mod-title a.fw-semibold:hover { color: var(--cobalt); }
.mod-sub { font-size: .9rem; color: var(--ink-2); }
.mod-url { font-size: .8rem; color: var(--ink-soft); max-width: 640px; }
.mod-host { display: inline-block; background: #eef1f8; border-radius: 6px; padding: 0 .4rem; margin-right: .4rem; color: var(--ink-2); font-weight: 600; }
.mod-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .35rem; font-size: .8rem; color: var(--ink-soft); }
.mod-meta i { margin-right: .3rem; }
.mod-meta a { color: inherit; }
.mod-actions { display: flex; gap: .35rem; flex: none; }
@media (max-width: 767.98px) { .mod-list > li { flex-direction: column; align-items: stretch; } .mod-actions { justify-content: flex-start; } .filter-bar .form-select { flex: 1 1 140px; } .filter-bar .filter-search { flex-basis: 100%; } }

/* ===== Trang link ===== */
.shorten-row { display: flex; gap: .5rem; }
.shorten-row .form-control { flex: 1; min-width: 0; }
@media (max-width: 575.98px) { .shorten-row { flex-direction: column; } }
.result-card { border-color: #9fd9c4; background: linear-gradient(180deg, #f2fbf7, var(--card) 60%); }
.result-link { display: flex; gap: .5rem; flex-wrap: wrap; }
.result-link .form-control { flex: 1 1 260px; min-width: 0; background: #fff; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.list-stats { font-size: .9rem; color: var(--ink-soft); margin-right: auto; }
.list-stats b { color: var(--ink); }
.list-search { flex: 0 1 300px; }
.icon-btn { border: 0; background: transparent; padding: .1rem .3rem; border-radius: 6px; color: var(--ink-soft); line-height: 1; }
.icon-btn:hover { background: var(--cobalt-tint); color: var(--cobalt); }
.link-list > li { flex-wrap: wrap; }
.link-edit { flex-basis: 100%; }
.link-edit form { margin-top: .25rem; padding: .85rem; border-radius: var(--radius-m); background: #f6f8fc; border: 1px solid var(--line); }

/* ===== Quảng cáo (admin) ===== */
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .3rem; vertical-align: 0; }
.ads-chart { position: relative; height: 250px; }
.seg-tabs.seg-sm { padding: 3px; }
.seg-tabs.seg-sm .nav-link { padding: .25rem .6rem; font-size: .8rem; }
.zmap { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.zmap a, .zmap-zone, .zmap-zone text { text-decoration: none; }
.dev-pick .btn { white-space: nowrap; padding-inline: .9rem; }
.zmap-page { fill: #f3f5fa; }
.zmap-card, .zmap-side { fill: #fff; stroke: #e2e6f0; }
.zmap-side { fill: #f8f9fc; stroke-dasharray: 4 3; }
.zmap-head { fill: #141a33; }
.zmap-t { font-size: 11px; fill: #fff; }
.zmap-n { font-size: 12px; font-weight: 700; fill: #141a33; text-anchor: middle; }
.zmap-zone rect { fill: #fff6db; stroke: #e5a800; stroke-dasharray: 4 3; transition: fill .2s ease, stroke .2s ease; }
.zmap-zone text { font-size: 11px; font-weight: 600; fill: #8a6400; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.zmap-zone text.zc { font-size: 9.5px; font-weight: 500; }
.zmap-zone.z-empty rect { fill: #f8f9fc; stroke: #b9c1d8; }
.zmap-zone.z-empty text { fill: #5b6385; }
.zmap-zone.z-has rect { fill: #e9f8f2; stroke: #12a37a; stroke-dasharray: none; }
.zmap-zone.z-has text { fill: #0b7356; }
.zmap-zone:hover rect { fill: #eaefff; stroke: #2b59ff; }
.zmap-zone:hover text { fill: #1d43d6; }
.zmap-zone.z-on rect { fill: #2b59ff; stroke: #1d43d6; stroke-dasharray: none; }
.zmap-zone.z-on text { fill: #fff; }
.zmap-zone:focus-visible rect { stroke: #2b59ff; stroke-width: 3; }

.ad-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; }
.ad-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: .85rem; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.ad-chip b { font-size: .75rem; padding: 0 .4rem; border-radius: 99px; background: #eef1f8; color: var(--ink-soft); }
.ad-chip:hover { border-color: #b9c6ff; color: var(--ink); }
.ad-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ad-chip.on b { background: rgba(255, 255, 255, .18); color: #fff; }

.ad-group { margin-bottom: 1.5rem; }
.ad-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin-bottom: .6rem; }
.ad-group-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.ad-list { display: grid; gap: .6rem; }
.ad-row .card-body { display: grid; grid-template-columns: 64px minmax(0, 1fr) 230px auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; }
.ad-row.is-paused, .ad-row.is-ended, .ad-row.is-capped { background: #fafbfd; }
.ad-row.is-paused .ad-thumb, .ad-row.is-ended .ad-thumb, .ad-row.is-capped .ad-thumb { opacity: .55; }
.ad-thumb { width: 64px; height: 52px; border-radius: 10px; background: #f0f2f8; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--ink-soft); font-size: 1.3rem; }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ad-title a { font-size: 1rem; }
.ad-title a:hover { color: var(--cobalt) !important; }
.ad-st { font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 99px; white-space: nowrap; }
.st-run { background: var(--mint-tint); color: #0b7356; }
.st-wait { background: var(--cobalt-tint); color: var(--cobalt-dark); }
.st-off { background: #eef0f5; color: var(--ink-soft); }
.st-end { background: #fde8e9; color: #a3262b; }
.ad-note { font-size: .85rem; color: var(--ink-soft); }
.ad-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.ad-facts span { font-size: .78rem; background: #f3f5fa; border: 1px solid var(--line); border-radius: 99px; padding: .1rem .55rem; color: var(--ink-2); }
.ad-facts i { margin-right: .3rem; color: var(--ink-soft); }
.ad-cap, .ad-share { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .78rem; color: var(--ink-soft); }
.ad-cap .progress { flex: 0 0 120px; height: 6px; }
.ad-cap .progress-bar { background: var(--coin-dark); }
.ad-share-bar { flex: 0 0 120px; height: 6px; border-radius: 99px; background: #eef1f8; overflow: hidden; }
.ad-share-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6d8dff, #2b59ff); }
.ad-stats { min-width: 0; }
.ad-spark { width: 100%; height: 30px; display: block; }
.ad-spark .a { fill: rgba(43, 89, 255, .12); }
.ad-spark .l { fill: none; stroke: #2b59ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ad-row:not(.is-running) .ad-spark .l { stroke: #9aa2c0; }
.ad-row:not(.is-running) .ad-spark .a { fill: rgba(154, 162, 192, .15); }
.ad-stats dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: .35rem 0 0; }
.ad-stats dt { font-size: .68rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.ad-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-total { font-size: .72rem; color: var(--ink-soft); margin-top: .1rem; }
.ad-actions { display: flex; align-items: center; gap: .4rem; }
@media (max-width: 1199.98px) { .ad-row .card-body { grid-template-columns: 56px minmax(0, 1fr) auto; } .ad-stats { grid-column: 2 / -1; grid-row: 2; } }
@media (max-width: 575.98px) { .ad-row .card-body { grid-template-columns: 48px minmax(0, 1fr); } .ad-thumb { width: 48px; height: 42px; } .ad-stats, .ad-actions { grid-column: 1 / -1; } .ad-actions { justify-content: flex-end; } }

/* trình soạn quảng cáo */
.ed-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .78rem; margin-right: .55rem; vertical-align: 1px; }
.zone-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.zone-card { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .8rem; border: 2px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.zone-card b { font-size: .92rem; }
.zone-card small { font-size: .75rem; color: var(--ink-soft); line-height: 1.35; }
.zone-card:hover { border-color: #b9c6ff; }
.btn-check:checked + .zone-card { border-color: var(--cobalt); background: var(--cobalt-tint); box-shadow: 0 0 0 3px rgba(43, 89, 255, .12); }
.btn-check:focus-visible + .zone-card { box-shadow: 0 0 0 .25rem rgba(43, 89, 255, .3); }
.weight-out { min-width: 2.5ch; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ad-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; box-shadow: 0 -6px 20px -14px rgba(20, 26, 51, .35); }
.ad-preview-wrap { position: sticky; top: 84px; }
.pv-stage { display: grid; place-items: center; padding: 1.25rem .75rem; border-radius: var(--radius-m); background: radial-gradient(400px 220px at 50% 0%, rgba(43, 89, 255, .08), transparent 70%), repeating-linear-gradient(45deg, #f6f8fc 0 10px, #f1f4fa 10px 20px); }
.pv-device { width: 100%; max-width: 360px; border-radius: 22px; background: #fff; border: 1px solid #dfe4f0; box-shadow: 0 18px 40px -24px rgba(20, 26, 51, .45); overflow: hidden; transition: max-width .35s var(--e-out, ease); }
.pv-stage[data-dev='desktop'] .pv-device { max-width: 100%; border-radius: 12px; }
.pv-bar { display: flex; align-items: center; gap: 5px; padding: .5rem .75rem; background: #f3f5fa; border-bottom: 1px solid var(--line); }
.pv-bar span { width: 8px; height: 8px; border-radius: 50%; background: #d3d9e8; }
.pv-bar em { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.pv-frame { display: block; width: 100%; height: 300px; border: 0; background: #fff; }
@media (max-width: 1199.98px) { .ad-preview-wrap { position: static; } }

/* Form API vượt: chỉ hiện các ô của loại API đang chọn */
[data-provider-form] .pf-only-api, [data-provider-form] .pf-only-custom { display: none; }
[data-provider-form][data-pmode='api'] .pf-only-api, [data-provider-form][data-pmode='custom'] .pf-only-api, [data-provider-form][data-pmode='custom'] .pf-only-custom { display: block; }
[data-provider-form][data-pmode='custom'][data-pmethod='GET'] .pf-only-post { display: none; }
.pf-type { min-height: 100%; }
.pf-type b .badge { font-size: .62rem; vertical-align: 2px; }
.pf-builder summary i { color: var(--cobalt); }

/* ---------- Sửa lỗi tràn ngang trên điện thoại (không đổi thiết kế) ---------- */
@media (max-width: 767.98px) {
  /* Danh sách link xếp dọc: không gói dòng, nếu không 1 URL dài làm cả dòng rộng tới 640px và trang bị thu nhỏ */
  .link-list > li { flex-wrap: nowrap; }
  .setting-row { grid-template-columns: minmax(0, 1fr); }
}
.setting-row > * { min-width: 0; }
.bank-trigger { min-width: 0; max-width: 100%; }
/* Trang chủ: khoảng cách cột g-5 (âm 1.5rem mỗi bên) lớn hơn lề container trên màn hẹp -> tràn 12px */
@media (max-width: 575.98px) { .hero.row { --bs-gutter-x: 1.5rem; } }
@media (max-width: 399.98px) { .dev-pick .btn { padding-inline: .55rem; } }