/* =========================
   Variables
========================= */
:root {
  --primary: #0ea5e9;
  --bg: #0b1220;
  --card: #111827;
  --muted: #94a3b8;
}

/* =========================
   Reset & Base
========================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, Segoe UI, Roboto;
  background: #0a0f1c;
  color: #e5e7eb;
}

a { color: #93c5fd; text-decoration: none; }
a:hover { opacity: .9; }

input, select, button {
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #0b1220;
  color: #e5e7eb;
  padding: 10px 12px;
  max-width: 100%; /* không bị tràn */
}

/* =========================
   Layout
========================= */
.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 16px;
}

.site-header {
  background: #0b1220;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #1f2937;
  z-index: 50;
  overflow: visible; /* tránh cắt dropdown */
}

.site-header .brand img { height: 36px; vertical-align: middle; }

/* header row: brand + nav + burger */
.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* desktop nav */
#mainNav { display: flex; align-items: center; gap: 14px; }

/* burger button */
.burger{
  display: none; font-size: 24px; background: none; border: none;
  cursor: pointer; color: #e5e7eb;
}

/* =========================
   Buttons
========================= */
.btn{
  background: var(--primary); color:#001; padding:8px 14px;
  border-radius:12px; font-weight:600;
}

/* =========================
   Menu (dropdown)
========================= */
.menu{ position:relative; display:inline-block; }
.menu .dropdown{
  display:none; position:absolute; right:0; min-width:220px;
  background:#0b1220; border:1px solid #1f2937; border-radius:12px;
  padding:8px; z-index:999; flex-direction:column;
}
.menu:hover .dropdown{ display:flex; }
.menu .dropdown a{ display:block; padding:8px 12px; white-space:nowrap; border-radius:8px; }
.menu .dropdown a:hover{ background:#1f2937; }

/* =========================
   Mobile slide-down nav
========================= */
@media (max-width:768px){
  .burger{ display:block; }

  #mainNav{
    position:absolute; right:16px; top:60px; background:#0b1220;
    border:1px solid #1f2937; border-radius:12px; padding:10px 12px;
    box-shadow:0 10px 24px rgba(0,0,0,.22); z-index:1000;

    display:block; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .35s ease, opacity .2s ease;
  }
  #mainNav.show{ max-height:80vh; opacity:1; overflow-y:auto; }

  #mainNav > a, #mainNav .menu{ display:block; padding:8px 0; }

  .menu{ display:block; position:relative; overflow:visible; }
  .menu .dropdown{
    position:static; right:auto; min-width:0; width:100%;
    margin-top:6px; padding:6px; border-radius:10px;
  }
}

/* =========================
   Tables (PC giống mobile)
========================= */
.table-wrap{
  width:100%;
  overflow-x:auto;              /* luôn có thể kéo ngang */
  -webkit-overflow-scrolling:touch;
}

.table{
  width:100%;
  min-width: 820px;             /* tạo bề rộng tối thiểu để scrollbar xuất hiện */
  border-collapse:separate;
  border-spacing:0 8px;
}

.table th{
  padding:12px 14px; background:#0b1220; text-transform:uppercase;
  font-size:12px; color:#94a3b8; text-align:center; vertical-align:middle;
  white-space: nowrap;          /* không xuống dòng */
}

.table td{
  padding:12px 14px; background:#0f172a; text-align:center; vertical-align:middle;
  white-space: nowrap;          /* không xuống dòng */
}

.table .col-ua{ min-width:340px; }  /* client UA dài */
.table .col-ip{ min-width:220px; }  /* IP dài */
.table img{ max-width:64px; height:auto; }

/* =========================
   Cards
========================= */
.card{ background:#0f172a; border:1px solid #1f2937; padding:16px; border-radius:16px; }

/* =========================
   Helpers
========================= */
.center{ text-align:center; }
.bold{ font-weight:800; }

.rainbow{
  background:linear-gradient(90deg,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold{ color:#facc15; }

/* LED text runner for footer */
.led-run{
  /* nền gradient nhiều màu */
  background: linear-gradient(90deg,
    #ff3b3b, #ffb000, #ffee00, #41ff76, #00e1ff, #7a7dff, #ff46c8, #ff3b3b);
  background-size: 400% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent; /* làm chữ trong suốt để lộ gradient */
  text-fill-color: transparent;
  animation: led-marquee 6s linear infinite;
  letter-spacing: .5px;
  text-shadow: 0 0 10px rgba(255,255,255,.08); /* chút glow nhẹ */
}

.site-footer{
  display:block !important;
  position:relative;        /* tạo stacking context riêng */
  clear: both;
}


/* chạy ngược lại khi hover cho vui */
.led-run:hover { animation-direction: reverse; }

@keyframes led-marquee{
  0%   { background-position: 0% 50%;   }
  100% { background-position: 400% 50%; }
}

/* tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .led-run{ animation: none; }
}


/* =========================
   Pagination
========================= */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px;
}
.pagination .pill{
  width:36px; height:36px; border-radius:999px; background:#0b1220;
  display:flex; align-items:center; justify-content:center; border:1px solid #1f2937; cursor:pointer;
}

/* =========================
   Forms
========================= */
form .row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

/* Form tìm kiếm rộng bằng bảng + responsive */
.search-wide{ padding:14px; }
.search-wide .row{ grid-template-columns:1fr 1fr 1fr auto; }
@media (max-width:860px){
  .search-wide .row{ grid-template-columns:1fr; }
}

/* Mobile: input/select full width để không bị tràn */
@media (max-width:768px){
  input, select { width: 100%; }
  /* ✅ đừng kéo rộng checkbox/radio */
  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    display: inline-block;
  }
}

/* ✅ nhãn & checkbox luôn cùng hàng, căn giữa dọc */
.check-inline{
  display: inline-flex;          /* hoặc flex nếu bạn muốn chiếm full chiều ngang */
  align-items: center;
  gap: 8px;
}


/* Badge + email row (thông tin tài khoản) */
.verify-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; font-weight:800; font-size:12px;
  color:#fff; vertical-align:middle; cursor:default;
}
.verify-badge.success{ background:#16a34a; }
.verify-badge.danger{  background:#ef4444; }
.label-inline{ display:flex; align-items:center; gap:8px; }

/* input email + nút cùng hàng */
.email-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.email-row input[type="email"]{
  flex:1; min-width:240px; background:#f3f4f6; color:#374151; cursor:not-allowed;
}

/* =========================
   Alerts
========================= */
.alert{
  padding:12px; border-radius:12px; margin:8px 0; font-size:15px; line-height:1.5; font-weight:500;
}
.alert.success{ background:#052e16; color:#bbf7d0; border:1px solid #14532d; }
.alert.error{   background:#3f0d12; color:#fecaca; border:1px solid #7f1d1d; }
.alert.info{    background:#0c4a6e; color:#bae6fd; border:1px solid #0369a1; }
.alert.warning{ background:#451a03; color:#fed7aa; border:1px solid #9a3412; }

/* =========================
   Dashboard Admin
========================= */
.admin-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:900px){ .admin-grid{ grid-template-columns:1fr; } }

.card.stat{ position:relative; border-radius:16px; overflow:hidden; }
.card.stat header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card.stat .big{ font-size:28px; font-weight:800; margin:4px 0; }
.card.stat .muted{ color:var(--muted); font-size:13px; }

.donut-wrap{ display:flex; align-items:center; gap:14px; }
.donut{ width:120px; height:120px; }
.flex-col{ display:flex; flex-direction:column; gap:6px; }

select.stat-select{
  background:#0b1220; border:1px solid #1f2937; color:#e5e7eb;
  border-radius:10px; padding:6px 10px;
}