/* LNT Portal — quản trị */
:root { --ink:#131823; --ink-2:#3b4457; --muted:#6c7689; --line:#e5e8f0; --bg:#f5f7fb; --surface:#fff; --primary:#1f6feb; --primary-dark:#1657bd;
  --ok:#128a4b; --ok-bg:#e8f6ee; --warn:#b2650a; --warn-bg:#fdf3e3; --bad:#c62f2f; --bad-bg:#fdeceb; --radius:12px;
  --font:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, Consolas, monospace; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.55; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 23px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 4px; }
code { font-family: var(--mono); background: #eef1f7; border-radius: 5px; padding: 1px 6px; font-size: .92em; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; align-content: start; }
.mt { margin-top: 16px; }

.adm { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
/* Menu trái cao đúng một màn hình và GIM lại: kéo nội dung dài bao nhiêu, nút Thoát vẫn nằm ở đáy màn hình. */
.adm-side { background: #0f1626; color: #cfd6e6; display: flex; flex-direction: column; padding: 18px 14px; gap: 18px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; }
.adm-brand { display: grid; padding: 0 8px; gap: 2px; }
.adm-brand b { color: #fff; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; }
.adm-brand span { font-size: 12px; color: #7f8aa3; }
.adm-side nav { display: grid; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.adm-side nav a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 9px; color: #cfd6e6; font-weight: 600; }
.adm-side nav a:hover { background: #1a2437; text-decoration: none; }
.adm-side nav a.active { background: var(--primary); color: #fff; }
.adm-me { margin-top: auto; flex: 0 0 auto; background: #172136; border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.adm-brand, .adm-scope { flex: 0 0 auto; }
.adm-me b { color: #fff; }
.adm-me small { color: #8b95ad; font-size: 12px; }
.adm-me .adm-ver { color: #6b7690; font-size: 11px; letter-spacing: .02em; }
.adm-main { padding: 22px 26px 60px; max-width: 1400px; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-head p { margin: 4px 0 0; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; align-content: start; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; }
.tile span { color: var(--muted); font-size: 13px; }
.tile b { font-size: 26px; }
.tile small { color: var(--muted); }

label { display: grid; gap: 5px; font-weight: 600; font-size: 13.5px; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd3fb; border-color: var(--primary); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.check input { width: auto; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; min-width: 150px; }

.btn { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.btn:hover { border-color: #c9d2e2; text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { color: var(--bad); border-color: #f0c9c6; background: #fff; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn.big { padding: 11px 20px; font-size: 15px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:hover { background: #fafbfe; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef1f7; color: var(--ink-2); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.alert.error { background: var(--bad-bg); color: var(--bad); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.token { user-select: all; background: #fff; border: 1px dashed var(--ok); padding: 4px 8px; }
.chart { display: flex; gap: 6px; align-items: flex-end; height: 150px; padding-top: 10px; }
.chart .bar { flex: 1; display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; position: relative; }
.chart .bar i { display: block; width: 42%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar i.rev { background: #a9c7f7; }
.chart .bar span { position: absolute; bottom: -18px; font-size: 11px; color: var(--muted); }
.chart { margin-bottom: 24px; }
.chart.dense { gap: 2px; }
.chart.dense .bar i { width: 46%; }
.period-nav { align-items: center; }
.period-nav .btn { min-width: 0; }
.ad-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 10px; }
.ad-group-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ad-group-head p { margin: 2px 0 0; }
.ad-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; background: #fbfcfe; }
.steps { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.danger-box { border-color: #f3d6d3; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-top: 10px; }

.login-body { display: grid; place-items: center; min-height: 100vh; background: #0f1626; }
.login-wrap { width: 100%; max-width: 380px; padding: 20px; }
.login { gap: 14px; }
.login h1 { font-size: 22px; }
.install { background: var(--bg); }
.ins-wrap { max-width: 720px; margin: 40px auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px 34px; }
.ins-wrap h2 { margin-top: 18px; }
.ins-wrap form { gap: 14px; }

@media (max-width: 980px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .adm-side nav { grid-auto-flow: column; overflow: auto; flex: 1 1 100%; }
  .adm-me { margin: 0; }
  .adm-main { padding: 16px; }
}

/* Kiểm tra thư mục sub-domain */
.checklist{margin:0 0 12px;padding-left:18px;line-height:1.9}
.checklist code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:12px}
code.pick{display:inline-block;margin:6px 0;padding:6px 10px;background:#0f172a;color:#e2e8f0;border-radius:6px;user-select:all;font-size:13px}
.pill.user{background:#eef4ff;color:#1f6feb;border:1px solid #d4e3ff;margin:0 4px 4px 0;display:inline-block}
.pill.user i{font-style:normal;opacity:.65}
.card.narrow{max-width:680px}
table.wide td:first-child{min-width:280px}
table.wide td .pill.user{white-space:nowrap}
.adm-scope{margin:14px 12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.08);color:#c8d3e5;font-size:12.5px;line-height:1.6}
.adm-scope b{color:#fff}

/* Thư viện ảnh */
.med-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:12px}
.med{border:1px solid var(--line,#e2e8f0);border-radius:10px;overflow:hidden;background:#fff}
.med>img{width:100%;height:130px;object-fit:cover;display:block;background:#f1f5f9}
.med-in{padding:8px 10px;display:grid;gap:6px}
.med-in b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.med-url{width:100%;font-size:11.5px;padding:4px 6px;border:1px solid #e2e8f0;border-radius:6px;font-family:ui-monospace,monospace;color:#475569}
.med-up{cursor:pointer}
.feat-prev img{max-width:100%;border-radius:8px;margin-top:8px;display:block}

/* Mật khẩu ứng dụng vừa tạo */
.newpass{border:2px solid #16a34a;background:#f0fdf4}
.pass-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pass-grid span{display:block;font-size:12px;color:#64748b;margin-bottom:4px}
.pass-grid code.pick{display:block;width:100%;font-size:14px;word-break:break-all}
.pass-grid code.token{font-size:17px;letter-spacing:.5px;background:#14532d}
h3.small{font-size:14px;margin:14px 0 6px;color:#334155}

/* Tài liệu API */
.doc h2{margin-top:0;padding-bottom:8px;border-bottom:2px solid #eef2f7}
.doc h3{font-size:15px;margin:20px 0 8px;color:#0f172a}
.doc table th{white-space:nowrap}
.doc-code{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:10px;overflow-x:auto;font-size:12.5px;line-height:1.65;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;position:relative;margin:8px 0 4px}
.doc-code::before{content:attr(data-lang);position:absolute;right:10px;top:6px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#64748b}
.verb{display:inline-block;min-width:56px;text-align:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;color:#fff}
.verb.get{background:#0ea5e9}.verb.post{background:#16a34a}.verb.put{background:#d97706}
.verb.patch{background:#7c3aed}.verb.delete{background:#dc2626}
.doc code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:12.5px}
.doc-code code{background:none;padding:0;font-size:inherit;color:inherit}

/* Tổng quan: số liệu người đọc */
.tile.live b{color:#16a34a}
.tile.live{border-left:4px solid #16a34a}
.rankt{width:100%;border-collapse:collapse}
.rankt td,.rankt th{padding:6px 8px;border-bottom:1px solid #f1f5f9;font-size:13.5px}
.rankt td.barcell{width:45%}
.rankt td.barcell span{display:block;height:8px;border-radius:5px;background:linear-gradient(90deg,#1f6feb,#60a5fa)}
.rankt td.num{white-space:nowrap}
.rank{color:#94a3b8;font-weight:700;width:34px}
.live-line{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.livec{background:#f1f5f9;border-radius:999px;padding:4px 10px;font-size:13px}
.livec b{color:#16a34a}
tr.sumrow td{background:#f8fafc;border-top:2px solid #e2e8f0}
@keyframes livepulse{from{opacity:.35}to{opacity:1}}
.tile.live b.pulse{animation:livepulse .5s ease}

/* Dashboard analytics */
.dash { display: grid; gap: 16px; }
.dash-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.seg { display: inline-flex; background: #eef2f7; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; font: inherit; font-weight: 650; font-size: 13px; padding: 7px 12px; border-radius: 8px; cursor: pointer; color: #3d4657; }
.seg button.on { background: #fff; color: #0f1626; box-shadow: 0 1px 2px rgba(15,22,38,.12); }
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; display: grid; gap: 4px; min-width: 0; }
.kpi-l { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7488; }
.kpi b { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; }
.kpi small { color: #6b7488; font-size: 12.5px; }
.kpi.live { border-color: #bbf7d0; background: #f0fdf4; }
.kpi.live b { color: #15803d; }
.delta { font-style: normal; font-weight: 700; margin-right: 4px; }
.delta.up { color: #15803d; }
.delta.down { color: #b91c1c; }
.delta.flat { color: #6b7488; }
.dash-card { gap: 10px; }
.dash-card-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.dash-card-h p { margin: 2px 0 0; }
.dash-hero-nums { font-size: 13px; color: #3d4657; white-space: nowrap; }
.dash-hero-nums b { font-variant-numeric: tabular-nums; }
.dash-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 16px; align-items: start; }
.table-wrap { overflow: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dash-table th, .dash-table td { padding: 9px 10px; border-bottom: 1px solid #eef1f6; }
.dash-table th { font-size: 11.5px; letter-spacing: .04em; }
.dash-table tr.is-on td { background: #f0f6ff; }
.dash-table tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.site-frame { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 380px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #f6f8fc; }
.site-mini { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: inherit; text-decoration: none; min-width: 0; }
.site-mini:hover { border-color: #c5d4ee; text-decoration: none; box-shadow: 0 6px 16px rgba(15,22,38,.06); }
.site-mini.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px #dbe7ff; }
.site-mini.total { background: #0f1626; color: #e8edf7; border-color: #0f1626; }
.site-mini.total .muted { color: #93a0b8 !important; }
.site-mini.total b { color: #fff; }
.site-mini-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.site-mini-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.site-kpis span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8b95a8; }
.site-mini.total .site-kpis span { color: #8b97b0; }
.site-kpis b { font-size: 18px; font-variant-numeric: tabular-nums; }
.site-owners { font-size: 12.5px; color: #334155; font-weight: 650; line-height: 1.35; }
.site-mini.total .site-owners { color: #c5d0e4; }
.pill.effect { font-size: 11px; }
.pill.effect.good { background: #dcfce7; color: #166534; }
.pill.effect.ok { background: #e0f2fe; color: #075985; }
.pill.effect.weak { background: #fef3c7; color: #92400e; }
.pill.effect.low { background: #fee2e2; color: #991b1b; }
.pill.effect.idle { background: #eef2f7; color: #64748b; }
.dash-more { border-top: 1px solid var(--line); padding-top: 8px; }
.dash-more summary { cursor: pointer; font-weight: 650; color: #3d4657; }
.leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.leg.v { background: var(--primary); }
.leg.r { background: #a9c7f7; }
.dash-foot { margin: 0; }
.chart { height: 180px; }
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .dash-split { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi b { font-size: 22px; } }

/* Chọn nhiều website + thanh thao tác hàng loạt */
.sites-table td.pickcell, .sites-table th.pickcell{width:34px;text-align:center;padding-left:10px;padding-right:0}
.sites-table input[type=checkbox]{width:16px;height:16px;cursor:pointer}
.sticky-tools{position:sticky;top:0;z-index:12;background:var(--surface,#fff);padding-bottom:10px;margin:0 0 10px}
.sticky-panel .sticky-save{position:sticky;bottom:0;background:var(--surface,#fff);padding-top:10px;margin-top:8px;z-index:3}
.check-list{display:grid;gap:6px;max-height:280px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.bulkbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;padding:12px 14px;border:1px solid var(--line,#e2e8f0);
  border-radius:10px;background:#f8fafc;opacity:.55;transition:opacity .15s,border-color .15s}
.bulkbar.has-pick{opacity:1;border-color:#1f6feb;background:#f2f7ff}
.bulk-count{flex:1 1 240px;font-size:13px;color:#475569}
.bulkbar.has-pick .bulk-count{color:#0f172a;font-weight:600}
.bulk-danger{display:flex;gap:6px;align-items:center;padding-left:10px;border-left:1px solid #e2e8f0}
.bulk-danger input{width:96px;padding:7px 9px;border:1px solid #fecaca;border-radius:8px;font:inherit;font-size:13px;background:#fff}
.bulk-keep{font-size:12.5px;color:#64748b}
.pill.warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
@media (max-width:720px){.bulk-danger{border-left:0;padding-left:0}}

/* Trang tĩnh & tin nhắn liên hệ */
.msg-body { margin-top: 8px; white-space: pre-wrap; color: var(--ink-2, #3d4657); font-size: 14.5px; line-height: 1.6;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow: auto; }
tr.unread td { background: #f4f8ff; }
tr.unread b { color: var(--primary); }


/* Đăng truyện nhiều chương */
.is-hidden { display: none !important; }
.story-mode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; }
.story-mode p { flex: 1 1 220px; margin: 0; }
.chap-list { display: grid; gap: 12px; }
.chap-card { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 14px; display: grid; gap: 10px; background: #fff; }
.chap-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chap-card-head b { font-size: 15px; }
.extra-mans { margin-top: 8px; }
.extra-mans summary { cursor: pointer; color: #334155; font-size: 13.5px; }
.ip-learned { margin: 6px 0 10px; padding-left: 18px; line-height: 1.8; }
.ip-learned code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; }