:root{
  --bg:#0D1316;
  --surface:#141C21;
  --sunk:#101A1F;
  --raised:#1B252B;
  --ink:#E4EDF1;
  --muted:#93A5AF;
  --line:#26333A;
  --accent:#57CFC6;
  --accent-ink:#8BE3DA;
  --accent-deep:#0E4B4A;
  --warn:#E0A163;
  --warn-bg:#2E2116;
  --bad:#E58A7B;
  --bad-bg:#331D1A;
  --ok:#6FC194;
  --ok-bg:#152A20;
  --body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.boot{padding:60px 20px;text-align:center;color:var(--muted)}

/* ---------- khung ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
header.top{
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.top-in{
  max-width:1000px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:8px;min-height:56px;flex-wrap:wrap;
}
.brand{font-weight:600;font-size:1.02rem;margin-right:6px;white-space:nowrap}
.brand span{color:var(--accent)}
nav.tabs{display:flex;gap:2px;flex:1;flex-wrap:wrap}
nav.tabs a{
  padding:6px 12px;border-radius:var(--r);color:var(--muted);
  font-size:.92rem;white-space:nowrap;
}
nav.tabs a:hover{background:var(--raised);text-decoration:none}
nav.tabs a.on{background:var(--accent-deep);color:var(--accent-ink)}
.purse{
  font-family:var(--mono);font-size:.85rem;background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--r);padding:4px 11px;white-space:nowrap;
}
.purse b{color:var(--accent)}
.purse i{font-style:normal;color:var(--muted)}

main{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:26px 18px 64px}
.narrow{max-width:640px}
/* overflow-wrap: tiêu đề là email dài (trang quản trị một người) không có chỗ ngắt,
   đẩy cả trang rộng 480 px trên điện thoại 360 px. */
h1{font-size:1.5rem;margin:0 0 4px;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
h2{font-size:1.1rem;margin:0 0 10px;font-weight:600}
.sub{color:var(--muted);margin:0 0 22px;font-size:.94rem}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- thẻ ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card.tight{padding:14px 16px}

/* ---------- biểu mẫu ---------- */
label.f{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],textarea,select{
  font:inherit;background:var(--sunk);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;width:100%;
}
textarea{resize:vertical;min-height:120px;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
.counter{font-family:var(--mono);font-size:.75rem;color:var(--muted);text-align:right}
.counter.over{color:var(--bad)}

.btn{
  background:var(--accent);color:#062B2B;border:none;border-radius:var(--r);
  padding:10px 18px;font-weight:600;font-size:.95rem;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--raised);filter:none}
.btn.sm{padding:5px 12px;font-size:.85rem;font-weight:500}
.btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}

/* ---------- lựa chọn dạng nút ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--sunk);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--r);padding:7px 14px;font-size:.9rem;
}
.chip.on{border-color:var(--accent);background:var(--accent-deep);color:var(--accent-ink)}

/* ---------- ảnh đính kèm ---------- */
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs figure{position:relative;margin:0;width:72px;height:72px}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.thumbs button{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--raised);color:var(--ink);
  font-size:13px;line-height:1;padding:0;
}
.drop{
  border:1px dashed var(--line);border-radius:var(--r);padding:14px;
  text-align:center;color:var(--muted);font-size:.88rem;
}
.drop:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- giữ khuôn mặt ---------- */
label.giu-mat{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink);cursor:pointer}
label.giu-mat input{margin-top:4px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--accent)}
label.giu-mat > span{display:flex;flex-direction:column;gap:3px}

/* ---------- video mẫu ---------- */
div.f{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}
.mau{display:flex;flex-direction:column;gap:8px}
.mau-link{display:flex;gap:8px}
.mau-link input{flex:1;min-width:0}
.mau-link .btn{flex:0 0 auto}
.mau-co{
  display:flex;gap:12px;align-items:center;background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--r);padding:8px;
}
.mau-co img{width:64px;height:64px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:#000}
.mau-tt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;color:var(--ink)}
.mau-nguon{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mau-dang{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:var(--r)}
.mau-dang .bar{height:5px}
.bar i.chay{animation:mau-chay 1.4s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
@keyframes mau-chay{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:420px){.mau-link{flex-direction:column}}

/* ---------- băng rôn hàng chờ ---------- */
.queuebar{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:11px 15px;font-size:.9rem;
}
.queuebar.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.queuebar.shut{border-left-color:var(--bad);background:var(--bad-bg)}
.queuebar b{font-family:var(--mono);color:var(--accent)}
.queuebar.warn b{color:var(--warn)}
.queuebar.shut b{color:var(--bad)}

/* ---------- danh sách job ---------- */
.jobs{display:flex;flex-direction:column;gap:10px}
.job{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:start;
}
.job .shot{
  width:96px;aspect-ratio:16/9;border-radius:4px;background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;display:block;
}
.job .shot.ph{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.3rem}
.job .mid{min-width:0;display:flex;flex-direction:column;gap:5px}
.job .p{
  margin:0;font-size:.94rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45;
}
.job .meta{font-family:var(--mono);font-size:.74rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.job .act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

.state{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;padding:3px 9px;
  border-radius:3px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.state.run{border-color:var(--accent);background:var(--accent-deep);color:var(--accent-ink)}
.state.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.state.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.state.wait{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}

.bar{height:3px;background:var(--sunk);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .6s ease}

/* ---------- sổ credit ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:500;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
/* Cột số: tiêu đề và giá trị phải cùng căn phải, nếu không đầu cột một nơi
   còn con số một nẻo. Cột số cũng chỉ chiếm đúng bề rộng nó cần. */
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
td.n{font-family:var(--mono)}
td.n.plus{color:var(--ok)}
td.n.minus{color:var(--muted)}
/* Cột chữ đầu tiên nuốt hết chỗ thừa, để bảng ít cột không bị dàn trải. */
tbody td:first-child:not(.n){width:auto}
.scroll{overflow-x:auto}

/* ---------- linh tinh ---------- */
.empty{color:var(--muted);text-align:center;padding:36px 16px;font-size:.93rem}
.err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);padding:10px 14px;border-radius:var(--r);font-size:.9rem}
.err b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.note{color:var(--muted);font-size:.85rem}
video{width:100%;border-radius:var(--r);background:#000;border:1px solid var(--line);display:block}

.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{
  background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:10px 15px;font-size:.88rem;max-width:340px;
  box-shadow:0 10px 30px -18px #000;
}
.toast.bad{border-left-color:var(--bad)}
.toast b{display:block;margin-bottom:2px}

@media (max-width:560px){
  /* Thẻ video: ảnh bìa nhỏ bên trái, chữ bên phải, nút bấm xuống hàng dưới.
     Trước đây ảnh bìa (thường chỉ là ô trống 🎬) chiếm cả nửa thẻ. */
  .job{grid-template-columns:72px 1fr;gap:10px 12px;padding:12px}
  .job .shot{width:72px}
  .job .act{grid-column:1 / -1;flex-direction:row;align-items:center;flex-wrap:wrap}
  main{padding:20px 14px 48px}

  /* Đầu trang trên điện thoại.
     Trước đây năm mục điều hướng XUỐNG DÒNG thành năm hàng chồng lên nhau, đè cả
     tên trang, đẩy ví credit và nút Thoát xuống tận 550 px — gần hết màn hình chỉ
     để hiện cái đầu trang. Nay chia hai hàng gọn: hàng trên là tên trang, ví và
     nút Thoát; hàng dưới là dải mục TRƯỢT NGANG, không xuống dòng nữa. */
  .top-in{padding:8px 14px;gap:8px;row-gap:8px}
  .brand{font-size:.98rem;margin-right:auto}
  /* CHỈ dải mục ở đầu trang. Viết trơn `nav.tabs` thì luật `order` áp luôn vào
     dải tab của trang quản trị và kéo nó xuống DƯỚI nội dung. */
  .top-in nav.tabs{
    order:9;flex-basis:100%;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    gap:4px;padding-bottom:2px;
    /* Mờ dần ở mép phải: dấu hiệu dải này còn nữa, vuốt ngang được. */
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
    mask-image:linear-gradient(to right,#000 82%,transparent);
  }
  .top-in nav.tabs::-webkit-scrollbar{display:none}
  .top-in nav.tabs a{padding:6px 11px;font-size:.88rem;flex:0 0 auto}

  /* Bảng giá thành thẻ: tên gói + nút Nạp một hàng, các con số một hàng dưới. */
  table.bang-gia thead{display:none}
  table.bang-gia,table.bang-gia tbody{display:block}
  table.bang-gia tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
    padding:12px 0;border-bottom:1px solid var(--line);
  }
  table.bang-gia tbody tr:last-child{border-bottom:none}
  table.bang-gia td{border:none;padding:0;width:auto !important;text-align:left}
  table.bang-gia td.goi{flex:1 1 55%;font-weight:600}
  table.bang-gia td.mua{order:1;margin-left:auto}
  table.bang-gia td.so{order:2;font-size:.82rem;color:var(--muted)}
  table.bang-gia td.so.gia{color:var(--accent-ink);font-weight:600}
  table.bang-gia td[data-sau]::after{content:attr(data-sau)}
}
/* Màn rất hẹp: bỏ phần «giữ …» trong ví để nút Thoát không rớt xuống một dòng riêng. */
@media (max-width:420px){
  .purse i{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- chân trang: lối vào nhóm Zalo ---- */
.chan{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:980px;margin:40px auto 0;padding:18px 20px 28px;
  border-top:1px solid var(--line);
}
.chan-qr{
  flex:0 0 auto;background:#fff;border-radius:var(--r);padding:6px;
  /* Nền trắng cho QR: mã sinh ra nền trong suốt, đặt thẳng lên nền tối là máy quét không đọc nổi. */
}
.chan-chu{display:flex;flex-direction:column;gap:4px;min-width:0}
.chan-chu b{font-size:14px}
.chan-chu .note{margin:0}
.chan-chu .btn{align-self:flex-start;margin-top:6px}
@media (max-width:560px){
  .chan{gap:12px;padding-bottom:34px}
}

/* Gói chỉ-mua-một-lần mà khách đã dùng: mờ đi chứ không giấu, để họ biết nó
   từng có và mình không âm thầm bỏ đi. */
tr.mo td{opacity:.5}

/* ---------- chọn chế độ đặt: nhờ làm hộ / tự viết ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);
  padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;
}
.mode b{color:var(--ink);font-size:1rem}
.mode span{font-size:.84rem;line-height:1.4}
.mode.on{border-color:var(--accent);background:var(--accent-deep)}
.mode.on b{color:var(--accent-ink)}
@media (max-width:560px){.modes{grid-template-columns:1fr}}