:root {
  --bg: #0a0e1a;
  --card: rgba(23, 31, 51, 0.72);
  --card2: rgba(15, 23, 42, 0.6);
  --text: #eef2fb;
  --muted: #9aa7c2;
  --border: rgba(255, 255, 255, 0.09);
  --brand: #6366f1;
  --brand-hover: #4f46e5;
  --brand-rgb: 99, 102, 241;
  --green: #22c55e;
  --red: #ef4444;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  line-height: 1.55;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 520px at 50% -10%, rgba(var(--brand-rgb), 0.22), transparent 60%),
    radial-gradient(700px 500px at 108% 6%, rgba(var(--brand-rgb), 0.12), transparent 55%),
    radial-gradient(680px 620px at -8% 108%, rgba(var(--brand-rgb), 0.10), transparent 58%);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--brand); }
.wrap { max-width: 980px; margin: 0 auto; padding: 30px 16px 70px; }
.center { max-width: 540px; }
header.app { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
header.app h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; font-weight: 700; }
.logo {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  display: grid; place-items: center; font-size: 23px;
  box-shadow: 0 8px 20px -8px rgba(var(--brand-rgb), 0.7);
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
h2 { font-size: 17px; margin: 0 0 16px; letter-spacing: -0.01em; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
input, textarea, select {
  width: 100%; padding: 12px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--card2); color: var(--text);
  font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #64748b; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.25);
}
textarea { min-height: 68px; resize: vertical; }
button {
  cursor: pointer; border: none; border-radius: 12px; padding: 12px 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  color: #fff; font-size: 15px; font-weight: 600; font-family: inherit;
  box-shadow: 0 10px 24px -12px rgba(var(--brand-rgb), 0.85);
  transition: transform .12s ease, box-shadow .15s, filter .15s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(var(--brand-rgb), 0.95); filter: brightness(1.06); }
button:active { transform: translateY(0); }
button.secondary {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text);
  box-shadow: none;
}
button.secondary:hover { background: rgba(255, 255, 255, 0.11); filter: none; }
button.danger { background: none; color: var(--red); padding: 6px 10px; font-size: 13px; box-shadow: none; }
button.danger:hover { filter: none; background: rgba(239, 68, 68, 0.1); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }
.muted { color: var(--muted); font-size: 13px; }
.checkboxes { display: flex; gap: 16px; margin-top: 8px; }
.checkboxes label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text); }
.checkboxes input { width: auto; }
.event {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  margin-bottom: 14px; background: var(--card2);
}
.event h3 { margin: 0 0 4px; font-size: 16px; }
.event .meta { font-size: 13px; color: var(--muted); }
.badge {
  display: inline-block; background: linear-gradient(135deg, var(--brand), var(--brand-hover)); color: #fff;
  border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.badge.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.event-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.event-actions button, .event-actions a.btn { font-size: 13px; padding: 8px 13px; }
a.btn {
  display: inline-block; text-decoration: none; border-radius: 11px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text); font-weight: 600;
}
a.btn:hover { background: rgba(255, 255, 255, 0.11); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
code.mono { font-family: ui-monospace, monospace; background: rgba(125, 135, 160, 0.22); padding: 2px 7px; border-radius: 6px; }
.qr-box { text-align: center; }
.notice { padding: 13px 15px; border-radius: 12px; font-size: 14px; margin: 12px 0; }
.notice.error { background: rgba(239, 68, 68, .12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); }
.notice.ok { background: rgba(34, 197, 94, .12); color: #86efac; border: 1px solid rgba(34, 197, 94, .3); }
.hidden { display: none !important; }
.success-icon { font-size: 60px; text-align: center; line-height: 1; }
.welcome { text-align: center; font-size: 21px; font-weight: 700; color: var(--text); margin: 12px 0 4px; white-space: pre-line; letter-spacing: -0.01em; }
.stat { display: flex; gap: 22px; margin-top: 6px; }
.stat b { font-size: 26px; }
.link-box { display: flex; gap: 8px; margin-top: 10px; }
.link-box input { font-size: 13px; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
h4 { margin: 16px 0 8px; font-size: 14px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.bar-label { flex: 0 0 42%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { flex: 1; background: rgba(0, 0, 0, 0.3); border-radius: 6px; height: 20px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-hover)); border-radius: 6px; }
.bar-val { flex: 0 0 34px; text-align: right; font-weight: 700; font-size: 13px; }

/* Ảnh QR tạo phía trình duyệt (GIF) — giữ sắc nét khi phóng to */
.qr-box img, .qr-holder img { width: 240px; height: 240px; background: #fff; padding: 12px; border-radius: 14px; image-rendering: pixelated; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); }
.qr-holder { text-align: center; }

/* Khu tiêu đề trang check-in — gọn, có phân cấp */
.brand-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.logo.sm { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
.event-title { font-size: 25px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; }
.event-meta { color: var(--muted); font-size: 13.5px; }
.form-divider { height: 1px; background: var(--border); margin: 20px 0 8px; }

/* Hero banner đầu trang check-in (theo từng sự kiện) */
.hero img {
  width: 100%; display: block; border-radius: var(--radius); margin-bottom: 20px;
  max-height: 280px; object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.85);
}

/* ===== Chế độ nền SÁNG (chọn theo từng sự kiện) ===== */
:root[data-theme="light"] {
  --bg: #eef1f8;
  --card: rgba(255, 255, 255, 0.86);
  --card2: #f4f6fc;
  --text: #1e293b;
  --muted: #5b6b86;
  --border: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #94a3b8; }
:root[data-theme="light"] .card {
  box-shadow: 0 24px 60px -34px rgba(30, 41, 59, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .bar { background: rgba(15, 23, 42, 0.08); }

/* ===== Trang nhân viên cổng (quét QR) ===== */
.tabs button { box-shadow: none; background: rgba(125,135,160,0.14); border: 1px solid var(--border); color: var(--text); font-size: 14px; padding: 9px 14px; }
.tabs button.active { background: linear-gradient(135deg, var(--brand), var(--brand-hover)); border-color: transparent; color: #fff; }
.scan-area { width: 100%; background: #0b1020; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.scan-area video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--card2); }
.ticket-name { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }

/* Popup xem QR trong admin */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); display: grid; place-items: center; z-index: 100; padding: 20px; backdrop-filter: blur(3px); }
.modal-box { background: #161d30; border: 1px solid var(--border); border-radius: 16px; padding: 22px; max-width: 320px; width: 100%; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85); }