/* Vie VPS shared interface tone, chot 2026-07-09.
   Dung cho landing, portal khach va admin de tranh lech mau/spacing theo tung template. */
:root {
  --bg-page: #080A0F;
  --bg-surface: #101820;
  --bg-elevated: #172231;
  --bg-inset: #070A10;
  --border: #263242;
  --border-strong: #3A4658;
  --tx: #F7FAFC;
  --tx-2: #C7D2DE;
  --tx-3: #8EA0B4;
  --link: #9DBBFF;
  --pri: #4F8BFF;
  --pri-h: #74A6FF;
  --pri-bg: #10213A;
  --accent: #1FD1BE;
  --accent-bg: #0A2A27;
  --ok: #39D98A;
  --ok-bg: #0B2B1E;
  --warn: #F4B740;
  --warn-bg: #33250B;
  --bad: #F97066;
  --bad-bg: #351415;
  --info: #4FC3F7;
  --info-bg: #092838;
  --shadow-card: 0 18px 42px rgba(0, 5, 13, .22);
}

html {
  background: var(--bg-page);
}

body {
  background:
    linear-gradient(180deg, #090C12 0%, #0B1118 38%, #080A0F 100%);
  color: var(--tx);
}

a {
  color: var(--link);
}

a:hover {
  color: #D4E1FF;
}

.btn {
  background: var(--pri);
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(79, 139, 255, .16);
}

.btn:hover {
  background: var(--pri-h);
}

.btn.sec {
  background: rgba(16, 24, 32, .72);
  border-color: var(--border-strong);
  color: var(--tx);
  box-shadow: none;
}

.btn.sec:hover {
  background: rgba(23, 34, 49, .92);
  border-color: rgba(79, 139, 255, .58);
}

.btn.ghost {
  background: transparent;
  color: var(--tx-2);
  box-shadow: none;
}

.btn.ghost:hover {
  background: rgba(23, 34, 49, .74);
  color: var(--tx);
}

.btn.danger {
  background: #C84A46;
}

.card,
.stat,
.q,
.faq details {
  background: linear-gradient(180deg, rgba(23, 34, 49, .88), rgba(16, 24, 32, .98));
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

.card:hover,
.stat:hover,
.q:hover {
  border-color: rgba(79, 139, 255, .34);
}

.table-card {
  border-radius: 8px;
}

.empty {
  border-radius: 8px;
  border-color: var(--border-strong);
  background: rgba(7, 10, 16, .62);
}

.badge {
  border-radius: 6px;
}

.b-ok { color: var(--ok); background: var(--ok-bg); }
.b-info { color: var(--info); background: var(--info-bg); }
.b-warn { color: var(--warn); background: var(--warn-bg); }
.b-bad { color: var(--bad); background: var(--bad-bg); }
.b-neutral { color: var(--tx-2); background: rgba(38, 50, 66, .86); }

.field input,
.field select,
.field textarea,
textarea,
select,
input {
  background-color: var(--bg-inset);
  border-color: var(--border-strong);
  color: var(--tx);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
textarea:focus,
select:focus,
input:focus {
  border-color: var(--pri);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

.side {
  background: linear-gradient(180deg, rgba(13, 18, 26, .98), rgba(9, 13, 19, .98));
  border-right-color: var(--border);
}

.side .logo {
  color: var(--tx);
}

.brand-mark {
  color: var(--pri);
  filter: drop-shadow(0 0 12px rgba(79, 139, 255, .22));
}

.brand-word b,
.side .logo b,
.logo b {
  color: var(--pri);
}

.side a.it {
  color: var(--tx-2);
  border-left-color: transparent;
}

.side a.it:hover {
  background: rgba(23, 34, 49, .8);
  color: var(--tx);
}

.side a.it.on {
  background: linear-gradient(90deg, rgba(79, 139, 255, .18), rgba(31, 209, 190, .07));
  color: var(--tx);
  border-left-color: var(--accent);
}

.side a.it.on .nav-mark,
.botnav a.on .bi,
.admin-rail a.on {
  background-color: var(--accent);
  border-color: var(--accent);
}

.top,
.mnav {
  background: rgba(9, 13, 19, .88);
  border-color: var(--border);
}

.wchip {
  background: rgba(7, 10, 16, .78);
  border-color: var(--border-strong);
}

.botnav,
.admin-rail {
  background: rgba(9, 13, 19, .96);
  border-color: var(--border);
}

.admin-rail a {
  border-radius: 8px;
}

.admin-rail a.on {
  color: #06201D;
}

table.tb th,
.tb th {
  background: rgba(7, 10, 16, .58);
  color: var(--tx-3);
  letter-spacing: 0;
  border-bottom-color: var(--border-strong);
}

.cap-h {
  letter-spacing: 0;
}

table.tb td,
.tb td {
  border-bottom-color: var(--border);
}

.tb tr:hover td {
  background: rgba(23, 34, 49, .78);
}

.banner {
  border-radius: 8px;
}

.hero {
  background: linear-gradient(180deg, rgba(8, 10, 15, .36), rgba(8, 10, 15, .94));
}

.rackline {
  background: rgba(16, 24, 32, .92);
  border-color: var(--border);
  border-radius: 8px;
}

.feature .ico,
.stepn,
.tag {
  background: var(--accent-bg);
  color: #70F4E6;
}

.plan.hot {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(31, 209, 190, .18), var(--shadow-card);
}

.auth-logo,
.logo {
  color: var(--tx);
}

.bell button,
.ndrop {
  background: var(--bg-inset);
  border-color: var(--border-strong);
}

.ndrop {
  background: var(--bg-elevated);
  border-radius: 8px;
}

.nitem:hover {
  background: rgba(16, 24, 32, .94);
}

.nitem.unread {
  background: rgba(31, 209, 190, .09);
}

.nitem .unread-dot {
  background: var(--accent);
}

@media (max-width: 640px) {
  .card,
  .stat,
  .q {
    box-shadow: 0 12px 28px rgba(0, 5, 13, .18);
  }
}