/* Panel quản trị VPS - Flat design, font Be Vietnam Pro, chỉ dùng bold/normal */
:root{
  --blue:#0068ff; --blue-dark:#0057d9; --blue-bg:#eef4ff;
  --bg:#f7f9fc; --card:#ffffff; --text:#1b2536; --muted:#6d7b8f; --line:#e4eaf1;
  --green:#178a4c; --green-bg:#e9f7ef; --red:#d92d20; --red-bg:#fdecea;
  --amber:#9a6a12; --amber-bg:#fdf3dd; --gray-bg:#f0f3f7;
}
[data-theme="dark"]{
  --bg:#10161f; --card:#182130; --text:#e8edf4; --muted:#94a3b5; --line:#273449;
  --blue-bg:#1a2c47; --green-bg:#143325; --red-bg:#3a201d; --amber-bg:#38300f; --gray-bg:#212d3f;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6; font-weight:normal;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
b,strong,h1,h2{font-weight:bold}

/* ---------- Thanh trên ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  background:var(--card); border-bottom:1px solid var(--line); padding:12px 24px;
}
.logo{font-weight:bold; font-size:18px; color:var(--text); display:flex; align-items:center; gap:10px}
.logo:hover{text-decoration:none}
.logo-mark{
  display:inline-flex; width:32px; height:32px; border-radius:8px; background:var(--blue);
  color:#fff; align-items:center; justify-content:center; font-size:17px; font-weight:bold;
}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.who{font-size:14px; text-align:right; line-height:1.35}
.who small{display:block; color:var(--muted); font-size:12.5px}
.burger{
  display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:38px; height:38px; color:var(--text); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger svg{width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round}
.icon-btn{
  background:none; border:1px solid var(--line); border-radius:8px; width:38px; height:38px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.icon-btn svg{width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
[data-theme="light"] .ic-sun{display:none}
[data-theme="dark"] .ic-moon{display:none}

/* ---------- Bố cục ---------- */
.wrap{display:flex; max-width:1280px; margin:0 auto; align-items:flex-start}
.side{width:240px; flex:0 0 240px; padding:26px 16px; position:sticky; top:57px}
.side a{display:block; padding:11px 14px; border-radius:8px; color:var(--text); font-size:14.5px; margin-bottom:4px}
.side a:hover{background:var(--gray-bg); text-decoration:none}
.side a.on{background:var(--blue-bg); color:var(--blue); font-weight:bold}
.nav-badge{background:var(--red); color:#fff; border-radius:20px; font-size:11px; padding:1px 7px; margin-left:4px}
.side-help{margin-top:26px; border:1px solid var(--line); border-radius:10px; padding:16px; font-size:13.5px; color:var(--muted)}
.side-help .btn{display:block; text-align:center; margin-top:10px}
.main{flex:1; min-width:0; padding:32px 28px 56px}
.foot{text-align:center; color:var(--muted); font-size:13px; padding:20px 10px 30px}

/* ---------- Thành phần ---------- */
h1{font-size:24px; margin:0 0 20px; line-height:1.35}
h2{font-size:17px; margin:0 0 16px; line-height:1.4}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:26px 28px; margin-bottom:24px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:24px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px}
.stat b{font-size:28px; display:block; line-height:1.25}
.stat span{color:var(--muted); font-size:13.5px}
.btn{
  display:inline-block; background:var(--blue); color:#fff; border:1px solid var(--blue);
  border-radius:8px; padding:10px 20px; font-size:14.5px; font-weight:bold; cursor:pointer;
  font-family:inherit; line-height:1.45;
}
.btn:hover{background:var(--blue-dark); border-color:var(--blue-dark); text-decoration:none}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--gray-bg); border-color:var(--line)}
.btn-zalo{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-danger{background:var(--red); border-color:var(--red)}
.btn-small{padding:6px 13px; font-size:13.5px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.badge{display:inline-block; padding:3px 11px; border-radius:20px; font-size:12.5px; font-weight:bold}
.badge-green{background:var(--green-bg); color:var(--green)}
.badge-red{background:var(--red-bg); color:var(--red)}
.badge-amber{background:var(--amber-bg); color:var(--amber)}
.badge-blue{background:var(--blue-bg); color:var(--blue)}
.badge-gray{background:var(--gray-bg); color:var(--muted)}
.flash{border-radius:8px; padding:13px 16px; margin-bottom:18px; font-size:14.5px; background:var(--card); border:1px solid var(--line)}
.flash-success{background:var(--green-bg); border-color:transparent}
.flash-error{background:var(--red-bg); border-color:transparent}
.flash-amber{background:var(--amber-bg); border-color:transparent}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:13px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:normal}
.table-wrap{overflow-x:auto}
label{display:block; font-size:13.5px; font-weight:bold; margin:14px 0 6px}
input,select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--text); font-size:15px; font-family:inherit; line-height:1.45;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue)}
textarea{resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px 24px}
.kv div span{display:block; color:var(--muted); font-size:12.5px; margin-bottom:3px}
.kv div b{font-size:15.5px; overflow-wrap:anywhere}
.cred{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:16px 18px; font-family:Consolas,Menlo,monospace; font-size:14.5px}
.cred .row{display:flex; align-items:center; gap:10px; padding:6px 0; flex-wrap:wrap}
.cred .row span{color:var(--muted); min-width:120px; font-family:"Be Vietnam Pro","Segoe UI",sans-serif; font-size:13.5px}
.mini-btn{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:7px; padding:3px 11px; font-size:12.5px; cursor:pointer; font-family:inherit}
.mini-btn:hover{background:var(--gray-bg)}
.actions{display:flex; flex-wrap:wrap; gap:10px}
details.action-box{border:1px solid var(--line); border-radius:10px; padding:15px 18px; margin-top:14px; background:var(--card)}
details.action-box summary{cursor:pointer; font-weight:bold}
.msg{border-left:3px solid var(--line); padding:10px 14px; margin-bottom:12px; background:var(--bg); border-radius:0 8px 8px 0}
.msg.admin{border-left-color:var(--blue)}
.msg .meta{font-size:12.5px; color:var(--muted); margin-bottom:3px}
.empty{color:var(--muted); text-align:center; padding:28px 10px}
.warn-text{color:var(--red); font-weight:bold}
.soon{color:var(--amber); font-weight:bold}
.login-wrap{max-width:420px; margin:8vh auto; padding:0 16px}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:38px 34px}
.login-card h1{font-size:21px; text-align:center; margin-bottom:10px}
.login-card .sub{text-align:center; color:var(--muted); font-size:14px; margin:0}
.login-logo{display:flex; justify-content:center; margin-bottom:16px}
.login-logo .logo-mark{width:44px; height:44px; font-size:23px; border-radius:10px}
.pager{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}

@media (max-width:840px){
  .burger{display:inline-flex}
  .side{display:none; width:100%; flex:none; position:static; padding:14px 14px 0}
  .side.open{display:block}
  .wrap{flex-direction:column}
  .main{width:100%; padding:22px 16px 40px}
  .card{padding:22px 20px}
  .form-grid{grid-template-columns:1fr}
  .who{display:none}
  .topbar{padding:12px 16px}
}