/* An giao dien tool cho toi khi biet trang thai dang nhap (chong flash luc mo lan dau) */
html.chua-san-sang .sidebar, html.chua-san-sang .main{visibility:hidden}

/* style.css - Autopage24h: phong cach "Neon Dashboard" (dark-first).
   Nen navy sau, card bo tron, accent gradient nhieu mau (lime/cyan/pink/orange/
   violet), glow nhe, donut & bar gradient. Co ca Dark (mac dinh) + Light that
   (nut #btnTheme, luu localStorage). Giu NGUYEN moi ten class cu de 20+ trang
   khong vo - chi doi "dien mao". Bien mau --ok/--warn/--err/--acc dung chung cho
   ca bieu do Canvas (dashboard.js doc qua getComputedStyle). */

/* ===== DARK = mac dinh (:root) ===== */
:root{
  /* Nen NEAR-BLACK trung tinh (kieu Bitunix) - sac net hon nen navy/slate cu */
  --bg:#0a0a0b; --bg-sub:#0d0d0f; --card:#141416; --card2:#1c1c1f;
  --line:#2b2b30; --line-soft:#212125;
  --tx:#ffffff; --tx2:#a1a1a6; --dim:#6e6e73;
  --sb-bg:#0a0a0b; --sb-text:#c7c7cc; --sb-text-dim:#7c7c82; --sb-line:#232327;

  /* Accent = LIME cua Bitunix (#B9F641).
     --acc      : dung cho CHU/LINK/VIEN  -> phai doc duoc tren nen dang dung
     --acc-fill : dung cho NEN nut/muc dang chon -> luon la lime tuoi
     --acc-tx   : mau CHU dat TREN nen lime -> den (lime sang nen chu phai toi) */
  /* Lime GOC cua Bitunix la #B9F641. De nguyen do bao hoa toi da roi to len MANG LON
     (ca thanh menu) tren nen gan den thi CHOI MAT - ho chi dung tren nut nho. Nen ha
     nhe do bao hoa/do sang cho mang lon (--acc-fill), giu chat lime nhung diu mat. */
  --acc:#bfe86b; --acc-hov:#cdf47c; --acc-fill:#b4de5a; --acc-tx:#0a0a0b;
  --acc-soft:rgba(180,222,90,.13);
  --acc-grad:linear-gradient(180deg,#bde167,#b4de5a);

  /* bang mau neon dung cho stat/chart/badge */
  --ok:#34d399;  --ok-bg:rgba(52,211,153,.15);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.15);
  --err:#f2555f; --err-bg:rgba(242,85,95,.14);
  --info:#38bdf8; --info-bg:rgba(56,189,248,.15);
  --lime:#a3e635; --lime-bg:rgba(163,230,53,.15);
  --pink:#ec4899; --pink-bg:rgba(236,72,153,.15);
  --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,.15);
  --orange:#fb923c; --orange-bg:rgba(251,146,60,.15);

  /* palette bieu do (thong ke) - hai hoa & tach biet, lay cam hung tu bang mau dashboard chuan */
  --chart-1:#3fbf6f; --chart-2:#f5b429; --chart-3:#ee5a4f;

  /* gradient dung cho nut/thanh/glow */
  --g-pink:linear-gradient(135deg,#f472b6,#e11d64);
  --g-lime:linear-gradient(135deg,#bef264,#4ade80);
  --g-cyan:linear-gradient(135deg,#67e8f9,#0ea5e9);
  --g-orange:linear-gradient(135deg,#fdba74,#f97316);
  --g-violet:linear-gradient(180deg,#bde167,#b4de5a);   /* thanh tien trinh / diem nhan -> theo lime */

  --r:14px; --r-sm:10px; --r-lg:20px; --sb-w:262px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-card:0 10px 30px -18px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-modal:0 30px 70px -12px rgba(0,0,0,.7), 0 6px 20px -6px rgba(0,0,0,.5);
  --glow:0 0 0 1px var(--acc), 0 6px 16px -10px rgba(0,0,0,.6);
  --overlay:rgba(5,8,16,.62);
}

/* ===== LIGHT that (nhe nhang, van neon) ===== */
:root[data-theme="light"]{
  --bg:#f4f6fc; --bg-sub:#eef1f9; --card:#ffffff; --card2:#f4f6fc;
  --line:#e2e6f0; --line-soft:#edf0f7;
  --tx:#141a2e; --tx2:#4a5473; --dim:#8b93ab;
  --sb-bg:#ffffff; --sb-text:#3a4260; --sb-text-dim:#8188a3; --sb-line:#e6e9f2;

  /* Nen SANG: lime tuoi lam CHU se khong doc noi -> chu/link dung lime DAM;
     con NEN nut/muc dang chon van la lime tuoi + chu den (giong nut "Đăng ký" cua Bitunix). */
  --acc:#4e7a00; --acc-hov:#3f6300; --acc-fill:#b4de5a; --acc-tx:#0a0a0b;
  --acc-soft:rgba(180,222,90,.20);
  --acc-grad:linear-gradient(180deg,#bde167,#b4de5a);

  --ok:#10b981;  --ok-bg:rgba(16,185,129,.12);
  --warn:#d97706; --warn-bg:rgba(217,119,6,.12);
  --err:#e11d48; --err-bg:rgba(225,29,72,.10);
  --info:#0284c7; --info-bg:rgba(2,132,199,.10);
  --lime:#65a30d; --lime-bg:rgba(101,163,13,.12);
  --pink:#db2777; --pink-bg:rgba(219,39,119,.10);
  --cyan:#0891b2; --cyan-bg:rgba(8,145,178,.10);
  --orange:#ea580c; --orange-bg:rgba(234,88,12,.10);
  --chart-1:#22a75b; --chart-2:#e0980a; --chart-3:#e0483d;

  --shadow-sm:0 1px 2px rgba(20,20,40,.05);
  --shadow-card:0 10px 26px -20px rgba(30,35,80,.4);
  --shadow-modal:0 24px 60px -12px rgba(30,35,80,.28), 0 4px 16px -4px rgba(30,35,80,.12);
  --glow:0 0 0 1px var(--acc), 0 6px 16px -12px rgba(30,35,80,.5);
  --overlay:rgba(20,24,45,.4);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font:14px/1.55 var(--sans);
  display:flex; height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
}

/* ---------- Banner canh bao het han (TINH — khong chay chu, khong hoa mat) ----------
   Chi hien khi goi TRA PHI con < 3 ngay. Quang cao/uu dai da chuyen sang tab "Thị trường". */
:root{ --han-h:34px; }
.han-banner{ display:none; position:fixed; top:0; left:0; right:0; min-height:var(--han-h); z-index:540;
  align-items:center; justify-content:center; gap:14px; padding:5px 16px;
  font-size:13px; font-weight:700; letter-spacing:.1px; text-align:center;
  background:var(--err); color:#fff; box-shadow:0 1px 6px rgba(0,0,0,.18); user-select:none; }
body.co-han-banner .han-banner{ display:flex; }
body.co-han-banner{ padding-top:var(--han-h); }
body.co-han-banner .sidebar, body.co-han-banner .main{ height:calc(100vh - var(--han-h)); }
.han-banner-btn{ flex:0 0 auto; background:#fff; color:var(--err); border:0; border-radius:7px;
  padding:4px 14px; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.han-banner-btn:hover{ filter:brightness(.94); }
.han-banner[dir=rtl]{ direction:rtl; }

/* ---------- Thị trường (market): the uu dai / quang cao cua admin ---------- */
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(275px, 1fr)); gap:16px; }
.mkt-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mkt-clickable{ cursor:pointer; }
.mkt-clickable:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.14); border-color:var(--acc); }
.mkt-anh{ height:154px; background-size:cover; background-position:center; background-color:var(--card2); position:relative; }
.mkt-anh-plain{ height:64px; background:var(--acc-soft); }
.mkt-badge{ position:absolute; top:10px; left:10px; background:var(--acc); color:#fff;
  font-size:12px; font-weight:800; padding:3px 11px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.mkt-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mkt-title{ font-weight:700; font-size:15px; color:var(--tx); line-height:1.35; }
.mkt-desc{ color:var(--tx2); font-size:13px; line-height:1.55; flex:1; white-space:pre-wrap; }
.mkt-cta{ color:var(--acc); font-weight:700; font-size:13px; margin-top:6px; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sb-w); flex:0 0 var(--sb-w);
  background:var(--sb-bg);
  border-right:1px solid var(--sb-line);
  color:var(--sb-text);
  display:flex; flex-direction:column; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
/* Logo = anh chu "Autopage" that (nen trong suot, da khu quang hong o vien) */
.sb-logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:13px 20px 9px}
.sb-logo-img{width:auto;height:30px;max-width:100%;object-fit:contain;display:block}
/* Logo la chu TRANG (thiet ke cho nen toi) -> tren giao dien SANG se tang hinh.
   Dat len 1 mieng nen toi bo tron: van giu nguyen anh goc ma luon doc duoc. */
:root[data-theme="light"] .sb-logo-img{
  background:#141416; border-radius:10px; padding:7px 11px; box-sizing:content-box;
}
.sb-logo .mark{width:38px;height:38px;border-radius:11px}
.sb-logo .mark{
  background:var(--acc-fill);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--acc-tx);font-size:18px;
  box-shadow:var(--shadow-sm);
}
.sb-logo b{font-size:16px;font-weight:700;color:var(--tx);letter-spacing:-.2px}
.sb-logo .brand-sub{display:block;font-size:9.5px;color:var(--dim);letter-spacing:1.6px;font-weight:700;margin:0 0 0 3px}

.sb-group-label{padding:9px 22px 4px;font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--dim);text-transform:uppercase}
.sb-item{
  display:flex;align-items:center;gap:11px;margin:1px 10px;padding:7px 12px;border-radius:11px;
  color:var(--sb-text-dim); text-decoration:none; cursor:pointer; font-size:14px; font-weight:600;
  border:0; background:none; width:calc(100% - 20px); text-align:left; position:relative;
  transition:background .14s,color .14s,transform .1s;
}
.sb-item svg,.sb-item .sb-ic-img{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.sb-item:hover{background:var(--card2); color:var(--tx)}
.sb-item:active{transform:scale(.98)}
/* Popup Ho tro: hover muc "Ho tro" -> noi 2 QR (theo vung) ben phai. position:fixed (JS dat toa do)
   de thoat overflow cua .sidebar. QR ~220px = gap doi kich thuoc cu (112px). */
.ho-tro-popup{position:fixed;z-index:3000;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 14px 44px rgba(0,0,0,.38)}
.ho-tro-popup[hidden]{display:none}
.ho-tro-qr-row{display:flex;gap:16px}
.ho-tro-qr{text-align:center;text-decoration:none;color:var(--tx2)}
.ho-tro-qr:hover{color:var(--acc)}
.ho-tro-qr img{width:220px;height:auto;aspect-ratio:1170/1252;border-radius:14px;background:#111114;display:block}
.ho-tro-qr span{display:block;margin-top:8px;font-size:14px;font-weight:700}
/* Icon menu CO MAU (moi muc 1 mau; dat TRUOC .active de active van trang) */
.sb-item[data-page="dashboard"] svg{color:#a78bfa}
.sb-item[data-page="create-post"] svg{color:#f472b6}
.sb-item[data-page="posts"] svg{color:#38bdf8}
.sb-item[data-page="campaigns"] svg{color:#fb923c}
.sb-item[data-page="pages"] svg{color:#818cf8}
.sb-item[data-page="groups"] svg{color:#34d399}
.sb-item[data-page="tokens"] svg{color:#fbbf24}
.sb-item[data-page="bulk-actions"] svg{color:#facc15}
.sb-item[data-page="proxies"] svg{color:#22d3ee}
.sb-item[data-page="inbox"] svg{color:#4ade80}
.sb-item[data-page="auto-reply"] svg{color:#c084fc}
.sb-item[data-page="guide"] svg{color:#94a3b8}
/* Muc dang chon = NEN LIME DAC + chu DEN (giong the "Insights" / nut "Đăng ký" cua Bitunix).
   Tuong phan rat cao -> nhin phat biet dang o dau, khong can vien hay bong. */
.sb-item.active{
  background:var(--acc-fill); color:var(--acc-tx); font-weight:800;
}
/* Icon tren nen lime: KHONG ep den (icon cua ta la hinh DAC -> ep den thanh cuc den mat het
   chi tiet). Thay vao do dat icon trong 1 O NEN TOI bo tron - dung ngon ngu cua Bitunix
   (icon mau nam trong huy hieu toi tren the lime), vua ro chi tiet vua tuong phan tot. */
.sb-item.active svg,
.sb-item.active .sb-ic-img{
  opacity:1; filter:none;
  background:var(--acc-tx); border-radius:7px; padding:2.5px; box-sizing:border-box;
}

.sb-bottom{margin-top:auto;padding:14px 12px 18px;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--sb-line)}
.sb-plan{
  background:var(--card2); border:1px solid var(--sb-line); border-radius:var(--r-sm); padding:9px 11px;
  color:var(--tx); display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600;
  cursor:default; margin-top:6px;
}
.sb-plan .days{background:var(--acc-soft); color:var(--acc); padding:1px 8px; border-radius:99px; font-size:10.5px}
.sb-row2{display:flex;gap:6px}
.sb-mini{
  flex:1; background:var(--card2); border:1px solid var(--sb-line); color:var(--sb-text); border-radius:10px;
  padding:9px 0; text-align:center; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .12s,color .12s,background .12s;
}
.sb-mini:hover{border-color:var(--acc); color:var(--acc); background:var(--acc-soft)}
.sb-foot{font-size:10.5px;color:var(--dim);text-align:center;margin-top:2px}
.sb-foot a{color:var(--acc);text-decoration:none;cursor:pointer}

/* ---------- Main area ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; background:transparent; height:100vh; overflow-y:auto}
.main::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.topbar{padding:26px 34px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.topbar h1{font-size:24px;margin:0 0 4px;font-weight:800;letter-spacing:-.5px;color:var(--tx)}
.topbar .sub{color:var(--dim); font-size:13.5px; margin:0}
.content{padding:20px 34px 46px; flex:1}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
button{font-family:inherit; cursor:pointer}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:11px;
  font-size:13.5px; font-weight:700; border:1px solid transparent; white-space:nowrap;
  transition:transform .1s,box-shadow .14s,background .14s,border-color .14s,filter .14s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--acc-fill); color:var(--acc-tx); font-weight:800; box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.08); box-shadow:var(--shadow-sm)}
.btn-ghost{background:var(--card); border-color:var(--line); color:var(--tx); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--card2); border-color:var(--acc)}
.btn-dark{background:var(--tx); color:var(--bg)}
/* MOT mau nhan duy nhat (lime) cho nut CHINH; nut phu dung vien trung tinh - dung cach
   Bitunix lam. Truoc day Xuat Excel xanh la + Thao tac hang loat cam dung canh nut lime
   thanh ra lem nhem 3-4 mau canh nhau. Giu NGUYEN ten class de khong phai sua JS. */
.btn-green,
.btn-orange{background:var(--card); border-color:var(--line); color:var(--tx); box-shadow:var(--shadow-sm)}
.btn-green:hover,
.btn-orange:hover{background:var(--card2); border-color:var(--acc)}
/* Nut NGUY HIEM van giu do - day la canh bao, khong phai trang tri */
.btn-red{background:transparent; color:var(--err); border-color:var(--err)}
.btn-red:hover{background:var(--err-bg)}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:9px}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; filter:none}
@keyframes quayIcon{to{transform:rotate(360deg)}}
.btn.dang-quay svg{animation:quayIcon .7s linear infinite}
.btn-icon{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--tx2)}
.btn-icon:hover{background:var(--card2); color:var(--tx); border-color:var(--acc)}
.btn-icon.danger{color:var(--err)}
.btn-icon.info{color:var(--info)}

/* ---------- Cards / tables ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-card)}
.grid-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}
.stat{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 18px; box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .14s,border-color .14s,box-shadow .14s;
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stat-accent,var(--acc-grad));opacity:.95}
.stat:hover{transform:translateY(-3px); border-color:var(--acc); box-shadow:var(--glow)}
.stat-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px}
.stat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px}
.stat-delta{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px}
.stat-delta.up{color:var(--ok); background:var(--ok-bg)}
.stat-delta.down{color:var(--err); background:var(--err-bg)}
.stat-num{font-size:30px; font-weight:800; line-height:1.05; letter-spacing:-.6px; color:var(--tx); font-variant-numeric:tabular-nums}
.stat-label{color:var(--dim); font-size:12.5px; margin-top:4px; font-weight:600}

.charts-row{display:grid; grid-template-columns:2fr 1fr; gap:14px}
.chart-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-card)}
.chart-title{font-weight:700; font-size:14.5px; margin-bottom:16px; color:var(--tx)}
.chart-card canvas{display:block; width:100% !important; height:220px}

table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{
  text-align:left; color:var(--dim); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:13px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--card2)}
.tbl-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:auto; box-shadow:var(--shadow-card)}

.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-warn{background:var(--warn-bg); color:var(--warn)}
.badge-err{background:var(--err-bg); color:var(--err)}
.badge-info{background:var(--info-bg); color:var(--info)}
.badge-gray{background:var(--card2); color:var(--dim)}
.badge-purple{background:var(--acc-soft); color:var(--acc)}

.pill{display:inline-block;padding:3px 10px;border-radius:9px;font-size:11px;font-weight:700;background:var(--card2);color:var(--tx2);border:1px solid var(--line)}
.pill-sys{background:var(--acc-soft);color:var(--acc);border-color:transparent}
.pill-page{background:var(--info-bg);color:var(--info);border-color:transparent}
.pill-user{background:var(--warn-bg);color:var(--warn);border-color:transparent}

input[type=text],input[type=search],input[type=number],input[type=datetime-local],input[type=password],input[type=email],
select,textarea{
  font-family:inherit; font-size:13.5px; padding:10px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--bg-sub); color:var(--tx); width:100%;
  transition:border-color .12s,box-shadow .12s;
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
input:disabled{color:var(--dim); background:var(--card2)}
label{display:block; font-size:13px; font-weight:700; color:var(--tx2); margin:16px 0 7px}
label:first-child{margin-top:0}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.toolbar input[type=search],.toolbar input[type=text]{flex:1; min-width:200px}
.toolbar select{width:auto}

/* MAC DINH: display BLOCK -> chu chay LIEN MACH nhu doan van binh thuong.
   Truoc day de display:flex, ma flex bien MOI the con (<b>, <svg>...) thanh 1 O RIENG roi
   dan ngang co khoang cach -> cau bi xe thanh nhieu cot "chu tren chu duoi", doc rat khó
   (thay ro o banner "Rủi ro tập trung"). */
.banner{
  display:block; padding:14px 17px; border-radius:var(--r); line-height:1.65;
  margin-bottom:18px; font-size:13.5px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-card);
}
/* Chi banner NAO co <span class="grow"> (tuc la co nut day sang phai) moi can flex */
.banner:has(> .grow){ display:flex; align-items:center; gap:13px }
.banner > svg{ vertical-align:-.18em; margin-right:4px }
/* Banner: KHONG con khoi mau pastel dac (hong/xanh/vang xep chong nhau nhin nhu cau vong).
   Nen trung tinh nhu the card, y nghia the hien bang VACH MAU BEN TRAI + icon - dung ngon
   ngu cua Bitunix: mau chi la diem nhan nho, khong to ca mang. */
.banner-purple{border-left:3px solid var(--acc)}
.banner-yellow{border-left:3px solid var(--warn)}
.banner-info{border-left:3px solid var(--info)}
.banner-red{border-left:3px solid var(--err)}
.banner b{font-weight:800}
.banner .grow{flex:1}

.progress-track{height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.progress-track.light{background:var(--line)}
.progress-fill{height:100%; background:var(--g-violet); border-radius:99px; transition:width .3s ease}
.progress-fill.acc{background:var(--g-violet)}

.empty{padding:52px 20px; text-align:center; color:var(--dim); font-size:13.5px}
.empty svg{width:38px;height:38px;opacity:.3;margin-bottom:10px}

/* ---------- Post composer preview ---------- */
.compose-grid{display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start}
.chip-row{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:9px 16px; border:1px solid var(--line); border-radius:11px; font-size:13px; font-weight:700;
  background:var(--card); color:var(--tx2); cursor:pointer; transition:border-color .12s,color .12s,background .12s,transform .1s;
}
.chip:hover{border-color:var(--acc); color:var(--tx)}
.chip:active{transform:scale(.97)}
/* Chip dang chon: cung ngon ngu voi muc menu dang chon - nen lime dac + chu den */
.chip.active{background:var(--acc-fill); border-color:transparent; color:var(--acc-tx); font-weight:800; box-shadow:var(--shadow-sm)}
/* MOI icon trong app deu la SVG NHIEU MAU (gradient). Truoc day chip dang chon dat
   filter:brightness(0) -> ca icon bien thanh MOT CUC DEN, mat sach mau (loi user bao).
   Cach lam dung - giong muc menu dang chon: GIU NGUYEN mau icon, lot duoi 1 mieng nen
   toi bo tron de icon noi bat tren nen lime. */
.chip.active svg.ic,
.chip.active svg.cic{
  filter:none;
  background:var(--acc-tx); border-radius:6px;
  padding:2px; box-sizing:content-box; vertical-align:-5px;
}
/* Icon SVG filled+gradient trong chip (co mau rieng, giu mau ca khi active) */
.chip svg.cic{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* Icon dung chung ic() — canh giua theo dong chu, khong bi bop */
svg.ic{vertical-align:-.18em;flex:0 0 auto}
.fb-preview{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card)}
.fb-preview-head{display:flex; gap:10px; align-items:center; padding:14px}
.fb-avatar{width:38px;height:38px;border-radius:99px;background:var(--acc-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.fb-preview-name{font-weight:700; font-size:13.5px; color:var(--tx)}
.fb-preview-meta{font-size:11.5px; color:var(--dim)}
.fb-preview-body{padding:0 14px 14px; font-size:13.5px; white-space:pre-wrap; word-break:break-word}
.fb-preview-body a{color:var(--acc)}
.fb-preview-media{background:var(--card2); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--dim)}
.fb-preview-media img{width:100%;height:100%;object-fit:cover}
.fb-preview-actions{display:flex; border-top:1px solid var(--line); padding:6px 10px}
.fb-preview-actions span{flex:1; text-align:center; padding:8px 0; font-size:12.5px; font-weight:600; color:var(--dim); display:flex; align-items:center; justify-content:center; gap:6px}

/* ---------- Page cards ---------- */
.page-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; display:flex; align-items:center; gap:14px; margin-bottom:10px; box-shadow:var(--shadow-card);
  transition:border-color .12s,transform .1s;
}
.page-card:hover{border-color:var(--acc); transform:translateX(2px)}
.page-avatar{width:44px;height:44px;border-radius:99px;flex:0 0 44px;object-fit:cover;background:var(--card2)}
.page-avatar.fallback{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px}
.page-info{flex:1;min-width:0}
.page-name{font-weight:700; font-size:14px; color:var(--tx)}
.page-id{font-size:11px; color:var(--dim); font-family:ui-monospace,Consolas,monospace}
.page-tags{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.page-actions{display:flex; gap:7px; flex-wrap:wrap}

/* ---------- Modal ---------- */
.modal-bg{position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(4px)}
.modal-bg.show{display:flex}
.modal{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); width:500px; max-width:92vw; max-height:88vh; overflow:auto; padding:24px; box-shadow:var(--shadow-modal)}
.modal h3{margin:0 0 16px; font-size:18px; font-weight:800; color:var(--tx)}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; margin-top:20px}

/* ---------- Hop thoai xac nhan cua TOOL (thay confirm() cua Windows) ---------- */
/* z-index 300 > .modal-bg (100) -> goi duoc ngay khi dang mo modal khac. */
.xn-bg{position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center;
  z-index:300; backdrop-filter:blur(4px); animation:xnFade .14s ease}
.xn-bg.xn-out{animation:xnFadeOut .14s ease forwards}
.xn-box{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); width:480px; max-width:92vw;
  max-height:86vh; overflow:auto; box-shadow:var(--shadow-modal); animation:xnIn .2s cubic-bezier(.2,.9,.3,1.25)}
.xn-head{display:flex; align-items:center; gap:10px; padding:18px 22px 10px; font-size:16px; font-weight:800; color:var(--tx)}
.xn-body{padding:0 22px 4px; font-size:13.5px; line-height:1.65; color:var(--tx2)}
.xn-body b{color:var(--tx)}
.xn-foot{display:flex; justify-content:flex-end; gap:8px; padding:16px 22px 20px}
@keyframes xnFade{from{opacity:0}to{opacity:1}}
@keyframes xnFadeOut{to{opacity:0}}
@keyframes xnIn{from{opacity:0; transform:translateY(12px) scale(.96)}to{opacity:1; transform:none}}

/* ---------- Toast ---------- */
/* Thong bao kieu iOS: MOT vi tri duy nhat o GIUA - TREN cung, xo xuong.
   Truoc day toast nam goc duoi-phai va bang "Dang chay" nam goc duoi-trai -> che mat noi dung
   nguoi dung dang xem. Gio gom het vao day, rong hon de chu nam tren it dong => bot chiem cho. */
#toastWrap{
  /* Canh giua VUNG NOI DUNG (ben phai thanh menu), khong phai giua ca man hinh */
  position:fixed; top:14px; left:calc((100vw + var(--sb-w)) / 2); transform:translateX(-50%);
  z-index:400; display:flex; flex-direction:column; gap:8px; align-items:stretch;
  width:min(680px, calc(100vw - var(--sb-w) - 32px)); pointer-events:none;
}
@media(max-width:900px){ #toastWrap{ left:50%; width:min(680px, 92vw); } }
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:11px;
  background:color-mix(in srgb, var(--card2) 86%, transparent);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--line); color:var(--tx);
  padding:12px 18px; border-radius:16px; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.25);
  animation:iosXoXuong .46s cubic-bezier(.16,1,.3,1);
}
.toast.err{background:color-mix(in srgb, var(--err) 92%, transparent); border-color:transparent; color:#fff}
.toast.ok{background:color-mix(in srgb, var(--ok) 92%, transparent); border-color:transparent; color:#062a16}
.toast.toast-out{animation:iosThuLen .3s cubic-bezier(.4,0,1,1) forwards}
/* Xo xuong tu tren + hoi nay nhe (giong Notification Center cua iOS) */
@keyframes iosXoXuong{
  0%{opacity:0; transform:translateY(-140%) scale(.94)}
  60%{opacity:1; transform:translateY(4%) scale(1.005)}
  100%{opacity:1; transform:none}
}
@keyframes iosThuLen{ to{opacity:0; transform:translateY(-130%) scale(.94)} }
.toast-ic{width:18px; height:18px; flex:0 0 18px}
.toast-ic path{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.toast.ok .toast-ic.tick path{stroke-dasharray:26; stroke-dashoffset:26; animation:tickDraw .45s .1s ease forwards}
.toast-ic.dotic{width:9px; height:9px; border-radius:50%; background:var(--acc); flex:0 0 9px}
.toast-msg{flex:1; min-width:0}
@keyframes toastIn{from{opacity:0; transform:translateY(16px) scale(.95)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateX(26px)}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
/* Trang thai HOAN TAT trong modal tien trinh (co animation check) */
.jt-done{display:inline-flex; align-items:center; gap:7px; color:var(--ok); font-weight:800; animation:jtPop .35s cubic-bezier(.2,.9,.3,1.5)}
.jt-tick{width:19px; height:19px; flex:0 0 19px}
.jt-tick path{fill:none; stroke:var(--ok); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:tickDraw .45s .05s ease forwards}
.jt-fail{display:inline-flex; align-items:center; gap:7px; color:var(--err); font-weight:800; animation:jtPop .35s cubic-bezier(.2,.9,.3,1.5)}
.jt-part{display:inline-flex; align-items:center; gap:7px; color:var(--warn); font-weight:800; animation:jtPop .35s cubic-bezier(.2,.9,.3,1.5)}
.jt-x{width:19px; height:19px; flex:0 0 19px}
.jt-x path{fill:none; stroke:var(--err); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:18; stroke-dashoffset:18; animation:tickDraw .4s .05s ease forwards}
.jt-fill-done{background:var(--g-lime) !important; animation:jtFlash .55s ease}
.jt-fill-part{background:var(--g-orange) !important; animation:jtFlash .55s ease}
.jt-fill-fail{background:var(--g-pink) !important; animation:jtFlash .55s ease}
@keyframes jtPop{from{opacity:0; transform:scale(.7)}to{opacity:1; transform:none}}
@keyframes jtFlash{0%{filter:brightness(1.6)}100%{filter:none}}

.spin{display:inline-block; width:13px; height:13px; border:2px solid rgba(128,128,128,.3); border-top-color:currentColor; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block}

.hide{display:none !important}

/* Chi bao "dang chay" - NAM CHUNG khung thong bao tren dinh (truoc day noi o goc duoi-trai,
   che mat noi dung nguoi dung dang xem). Kieu "Live Activity" cua iOS: gon 1-2 dong, rong het khung. */
.job-indicator{
  pointer-events:auto;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:16px;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.25);
  padding:10px 16px; font-size:12px;
  animation:iosXoXuong .46s cubic-bezier(.16,1,.3,1);
}
.ji-head{font-weight:800; margin-bottom:5px; font-size:12.5px; display:flex; align-items:center; gap:7px}
.ji-row{display:flex; align-items:center; gap:10px; padding:3px 0; flex-wrap:wrap}
.ji-row > span:first-child{flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700}
.ji-bar{flex:1 1 120px; min-width:100px; height:5px; background:var(--line); border-radius:99px; overflow:hidden; order:3}
.ji-bar > div{height:100%; background:var(--acc); transition:width .3s}
.ji-cur{flex:1 1 100%; color:var(--dim); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; order:4}
.mono{font-family:ui-monospace,Consolas,monospace}
.muted{color:var(--dim)}
.right{text-align:right}
.center{text-align:center}

/* nhan "cap nhat truc tiep" nho o goc topbar */
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ok);padding:3px 10px;border-radius:99px;background:var(--ok-bg)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ok);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media(max-width:900px){
  .grid-stats{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
  .compose-grid{grid-template-columns:1fr}
}

/* ==================================================================
   MAN HINH DANG NHAP / BAN QUYEN (license-gate.js)
   ================================================================== */
#licenseGate .lg-bg{
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px; overflow:auto;
}
#licenseGate .lg-box{
  width:430px; max-width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:32px; box-shadow:var(--shadow-modal);
  animation:iosBung .44s var(--spring);
}
#licenseGate .lg-head{text-align:center; margin-bottom:24px}
/* Bo chon ngon ngu tren MAN HINH DANG NHAP - man hinh dau tien khach nuoc ngoai nhin thay.
   Bo chon that nam trong thanh ben, ma thanh ben bi lop phu nay che kin. */
#licenseGate .lg-lang{
  appearance:none; -webkit-appearance:none; margin:12px auto 0; display:block;
  background:var(--card2, #1c1c1f) no-repeat right 9px center/9px 6px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%238b8b93' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
  border:1px solid var(--line2, #2b2b30); color:var(--tx, #e8e8ea); border-radius:9px;
  padding:7px 26px 7px 11px; font:inherit; font-size:13px; cursor:pointer;
}
#licenseGate .lg-lang:hover{border-color:#3a3a42}
#licenseGate .lg-lang option{background:var(--card2, #1c1c1f); color:var(--tx, #e8e8ea)}
#licenseGate .lg-logo{height:34px; width:auto; margin:0 auto; display:block}
:root[data-theme="light"] #licenseGate .lg-logo{background:#141416; border-radius:10px; padding:7px 11px; box-sizing:content-box}
#licenseGate .lg-sub{font-size:9.5px; color:var(--dim); letter-spacing:1.6px; font-weight:700; margin-top:7px}
#licenseGate .lg-tabs{margin-bottom:14px}
#licenseGate .lg-tabs .chip{flex:1; justify-content:center; text-align:center}
#licenseGate label{margin:14px 0 6px}
#licenseGate input{width:100%}
/* O mat khau bi Chromium tu dien (da luu mat khau) -> mac dinh no to NEN TRANG/VANG.
   Trick chuan: phu box-shadow inset mau nen toi de giu o dong bo voi o username. */
#licenseGate input:-webkit-autofill,
#licenseGate input:-webkit-autofill:hover,
#licenseGate input:-webkit-autofill:focus,
#licenseGate input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--tx, #e8e8ea) !important;
  -webkit-box-shadow:0 0 0 1000px var(--card2, #1c1c1f) inset !important;
  caret-color:var(--tx, #e8e8ea);
  transition:background-color 9999s ease-in-out 0s;
}
#licenseGate .lg-go{width:100%; justify-content:center; margin-top:20px; padding:13px}
#licenseGate .lg-note{color:var(--dim); font-size:12px; margin-top:12px; text-align:center; line-height:1.55}
#licenseGate .lg-msg{margin-top:14px; font-size:13px; font-weight:600; text-align:center; min-height:19px}
#licenseGate .lg-msg.err{color:var(--err)}
#licenseGate .lg-msg.ok{color:var(--acc)}
#licenseGate .lg-foot{margin-top:12px; text-align:center; color:var(--dim); font-size:11.5px}
#licenseGate .lg-link{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--tx2,#8b8b93);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;padding:4px}
#licenseGate .lg-link:hover{color:var(--acc)}
#licenseGate #rsStep2{margin-top:4px}
#licenseGate .lg-warn{
  background:var(--warn-bg); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius:12px; padding:12px 15px; font-size:13px; line-height:1.55; color:var(--warn);
  margin-bottom:18px; display:flex; gap:9px; align-items:flex-start;
}
#licenseGate .lg-warn svg{flex:0 0 auto; margin-top:2px}

/* ---- Bo chon ngon ngu CO CO QUOC GIA tren man dang nhap (custom dropdown kieu iFarm) ---- */
#licenseGate .lg-lang-dd{position:relative; margin:12px 0 4px}
#licenseGate .lg-lang-nut{width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--card2, #1c1c1f); border:1px solid var(--line2, #2b2b30); border-radius:11px;
  padding:11px 13px; color:var(--tx, #e8e8ea); font:inherit; font-size:14.5px; text-align:left}
#licenseGate .lg-lang-nut:hover{border-color:#3a3a42}
#licenseGate .lg-lang-ten{flex:1; font-weight:600}
#licenseGate .lg-lang-mui{color:var(--tx2, #8b8b93); flex:0 0 auto}
#licenseGate .lg-lang-panel{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:10;
  background:var(--card, #141416); border:1px solid var(--line2, #2b2b30); border-radius:12px;
  padding:6px; max-height:320px; overflow-y:auto; box-shadow:0 12px 34px rgba(0,0,0,.5)}
#licenseGate .lg-lang-panel.hide{display:none}
#licenseGate .lg-lang-muc{width:100%; display:flex; align-items:center; gap:11px; cursor:pointer;
  background:transparent; border:0; border-radius:9px; padding:9px 11px; color:var(--tx, #e8e8ea);
  font:inherit; text-align:left}
#licenseGate .lg-lang-muc:hover{background:var(--card2, #1c1c1f)}
#licenseGate .lg-lang-muc.chon{background:color-mix(in srgb, var(--acc, #6d6df5) 16%, transparent)}
#licenseGate .lg-lang-2d{flex:1; display:flex; flex-direction:column; line-height:1.25}
#licenseGate .lg-lang-2d b{font-weight:600; font-size:14.5px}
#licenseGate .lg-lang-2d small{color:var(--tx2, #8b8b93); font-size:11.5px}
#licenseGate .lg-lang-muc[dir=rtl]{text-align:right}
#licenseGate .lg-lang-muc[dir=rtl] .lg-lang-2d{align-items:flex-end}
#licenseGate .lg-lang-tick{color:var(--acc, #6d6df5); font-weight:800; flex:0 0 auto}

/* ==================================================================
   CHU THICH = BONG BONG CHAT kieu iOS
   ------------------------------------------------------------------
   Thay hoan toan tooltip cua Windows (o vuong xam nho, chu be, hien cham).
   Bong bong noi len tu chinh nut duoc tro vao, co mui nhon chi vao nut,
   chu to 14px de doc thoai mai. app.js lo phan vi tri + doi title="".
   ================================================================== */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);   /* nay len mot chut roi dung - dung "spring" cua iOS */
  --ease-ios:cubic-bezier(.32,.72,0,1);    /* vao nhanh, ra cham - duong cong chuyen canh cua iOS */
}
.gy-bong{
  position:fixed; left:0; top:0; z-index:500; max-width:340px; pointer-events:none;
  opacity:0; visibility:hidden; transform:scale(.82) translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.gy-bong.hien{
  opacity:1; visibility:visible; transform:none;
  /* Chinh cho nay tao ra cam giac iOS: phong to vot qua 100% mot ti roi lang lai */
  transition:opacity .18s ease, transform .36s var(--spring);
}
.gy-chu{
  background:linear-gradient(180deg,#4a4a51,#3a3a40);
  color:#fff; font-size:14px; line-height:1.5; font-weight:600; letter-spacing:-.1px;
  padding:11px 16px; border-radius:18px; text-align:left;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.8), 0 3px 8px -3px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.15);
}
.gy-chu b{color:var(--acc); font-weight:800}
/* Mui nhon = mot o vuong xoay 45 do, to mau trung voi canh bong bong no dinh vao */
.gy-duoi{
  position:absolute; bottom:-5px; width:13px; height:13px; margin-left:-6.5px;
  background:#3a3a40; transform:rotate(45deg); border-bottom-right-radius:3px;
  border-right:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10);
}
.gy-bong.gy-duoi-tren .gy-duoi{
  bottom:auto; top:-5px; background:#4a4a51;
  border:0; border-left:1px solid rgba(255,255,255,.10); border-top:1px solid rgba(255,255,255,.10);
  border-bottom-right-radius:0; border-top-left-radius:3px;
}
:root[data-theme="light"] .gy-chu{
  background:linear-gradient(180deg,#fbfbfd,#e8e8ee); color:#14172a;
  border-color:rgba(20,26,46,.11);
  box-shadow:0 16px 34px -14px rgba(30,35,80,.42), 0 2px 6px -2px rgba(30,35,80,.16),
             inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .gy-duoi{background:#e8e8ee; border-color:rgba(20,26,46,.11)}
:root[data-theme="light"] .gy-bong.gy-duoi-tren .gy-duoi{background:#fbfbfd}
/* Nut/chip nao CO chu thich -> con tro doi thanh dau hoi de user biet la ro chuot vao xem duoc */
[data-gt]{cursor:help}
button[data-gt],a[data-gt],.chip[data-gt],.btn[data-gt],label.chk[data-gt]{cursor:pointer}

/* ==================================================================
   LOP HOAN THIEN kieu iOS 12
   ------------------------------------------------------------------
   Giu NGUYEN he mau lime da chot (Bitunix) va toan bo ten class - chi doi
   CACH BE MAT phan ung: bo tron sau hon, vien mo nhu soi toc, thanh tren
   dinh dang kinh mo, va moi thao tac deu co do nay cua iOS.
   ================================================================== */

/* --- Bam nut: thu nho lai roi bat len, khong phai "lun xuong 1px" --- */
.btn{transition:transform .34s var(--spring),box-shadow .16s,background .16s,border-color .16s,filter .16s}
.btn:active{transform:scale(.955)}
.btn-icon{transition:transform .34s var(--spring),background .16s,color .16s,border-color .16s}
.btn-icon:active{transform:scale(.9)}
.chip{transition:transform .34s var(--spring),border-color .16s,color .16s,background .16s,box-shadow .16s}
.chip:active{transform:scale(.955)}
.sb-item{transition:transform .34s var(--spring),background .16s,color .16s}
.sb-item:active{transform:scale(.97)}
.sb-mini{transition:transform .34s var(--spring),border-color .14s,color .14s,background .14s}
.sb-mini:active{transform:scale(.96)}

/* --- Thanh tieu de: dinh o tren + kinh mo, kieu "large title" cua iOS --- */
.topbar{
  position:sticky; top:0; z-index:30;
  padding:20px 34px 14px;
  background:color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.topbar h1{font-size:27px; letter-spacing:-.7px; font-weight:800; margin:0 0 2px}

/* --- Thanh ben: cung chat lieu kinh mo --- */
.sidebar{
  background:color-mix(in srgb, var(--sb-bg) 88%, transparent);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.sidebar::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--dim) 45%, transparent); border-radius:99px;
}

/* --- The/bang: bo tron sau hon, vien mong nhu soi toc --- */
.card,.tbl-wrap,.chart-card,.stat{border-radius:16px}
.modal,.xn-box{border-radius:18px}
.btn{border-radius:12px}
.btn-sm{border-radius:10px}
.chip{border-radius:12px}
input[type=text],input[type=search],input[type=number],input[type=datetime-local],input[type=password],input[type=email],select,textarea{border-radius:11px}
tbody td{border-bottom:1px solid color-mix(in srgb, var(--line-soft) 75%, transparent)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .16s var(--ease-ios)}

/* --- O nhap: vong sang focus mem hon, kieu iOS --- */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--acc-soft)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc-fill); width:17px; height:17px; cursor:pointer}

/* --- Hop thoai: bung ra kieu iOS (nay nhe) thay vi truot cung --- */
.modal-bg{backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%)}
.modal-bg.show .modal{animation:iosBung .42s var(--spring)}
.xn-bg{backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%)}
.xn-box{animation:iosBung .42s var(--spring)}
@keyframes iosBung{from{opacity:0; transform:scale(.9) translateY(10px)} to{opacity:1; transform:none}}

/* --- The so lieu: nhac len muot hon, bo quang sang gat --- */
.stat{transition:transform .34s var(--spring),border-color .18s,box-shadow .18s}
.stat:hover{transform:translateY(-2px)}

/* Ai bat "giam chuyen dong" trong Windows thi tat het hieu ung nay */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- Bo chon ngon ngu ---------- */
.lang-ds{padding:6px 10px 14px;max-height:60vh;overflow:auto}
.lang-muc{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border:0;background:none;
  color:var(--tx2);border-radius:11px;cursor:pointer;font:inherit;font-size:14.5px;text-align:left;
  transition:transform .3s var(--spring),background .16s,color .16s}
.lang-muc:hover{background:var(--card2);color:var(--tx)}
.lang-muc:active{transform:scale(.98)}
.lang-muc.active{background:var(--acc-fill);color:var(--acc-tx);font-weight:800}
.lang-co{font-size:10.5px;font-weight:800;letter-spacing:.6px;background:var(--card2);color:var(--dim);
  padding:3px 7px;border-radius:6px;min-width:30px;text-align:center}
.lang-muc.active .lang-co{background:var(--acc-tx);color:var(--acc-fill)}
.lang-ten{flex:1}
.lang-rtl{font-size:9.5px;font-weight:800;color:var(--warn);border:1px solid var(--warn);padding:1px 5px;border-radius:5px}
/* Urdu: lat toan bo bo cuc sang phai-trai */
[dir=rtl] .sidebar{border-right:0;border-left:1px solid var(--sb-line)}
[dir=rtl] .sb-item,[dir=rtl] .lang-muc{text-align:right}
[dir=rtl] .right{text-align:left}
[dir=rtl] thead th,[dir=rtl] tbody td{text-align:right}
[dir=rtl] .banner-purple,[dir=rtl] .banner-yellow,[dir=rtl] .banner-info,[dir=rtl] .banner-red{
  border-left:0;border-right:3px solid var(--acc)}
[dir=rtl] .banner-yellow{border-right-color:var(--warn)}
[dir=rtl] .banner-info{border-right-color:var(--info)}
[dir=rtl] .banner-red{border-right-color:var(--err)}

/* ---- THANH TIEN DO kieu iOS 12 (soc CHEO chay) - dung cho hop thoai tai ban cap nhat.
   Khac .progress-track/.progress-fill co san (thanh phang, tinh): thanh nay co soc cheo
   chay lien tuc nen nguoi dung THAY duoc la no dang chay, khong phai dung hinh. ---- */
.rank-ios {
  width: 100%; height: 12px; border-radius: 99px; overflow: hidden;
  background: var(--line); box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.rank-ios-day {
  height: 100%; width: 0%; border-radius: 99px;
  background-color: var(--ok);
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.42) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.42) 75%, transparent 75%, transparent);
  background-size: 22px 22px;
  animation: rankIosChay .7s linear infinite;
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
@keyframes rankIosChay { from { background-position: 0 0; } to { background-position: 22px 0; } }
@media (prefers-reduced-motion: reduce) { .rank-ios-day { animation: none; transition: none; } }