/* =========================================================
   Ma Sói Tournament — Design System
   Tông ĐỎ RỰC + VÀNG KIM sang trọng (phong cách kỷ niệm Vingroup).
   Dùng chung cho các trang giải đấu (đăng ký, cá nhân,
   điều hành, màn chiếu).
   ========================================================= */
:root {
  /* Nền kem ấm dịu — quầng đỏ/vàng chỉ thoảng ở rìa (không chói) */
  --bg: #faf6ef;
  --bg-grad:
    radial-gradient(1100px 560px at 50% -18%, rgba(228, 0, 43, 0.06) 0%, transparent 60%),
    radial-gradient(760px 500px at 98% -4%, rgba(228, 0, 43, 0.05), transparent 55%),
    radial-gradient(720px 520px at 0% 106%, rgba(232, 178, 58, 0.09), transparent 55%),
    #faf6ef;
  --surface: #ffffff;
  --surface-2: #f3f4f9;
  --border: #e6e8f0;
  --border-soft: #edeef4;
  --text: #16181f;
  --text-muted: #5c6270;
  --text-dim: #8b90a0;

  --primary: #e4002b;        /* Đỏ Vingroup chính thức (rực) */
  --primary-2: #ff1f38;      /* Đỏ tươi rực — điểm nhấn gradient */
  --primary-deep: #9c0019;   /* Đỏ sâu — chiều sâu */
  --primary-ink: #ffffff;
  --primary-soft: #ffdde1;   /* nền đỏ nhạt cho pill/nhấn */

  --ink: #1b1d26;            /* khối tối "ngầu" cho hero/vô địch */
  --ink-2: #2a2d3a;
  /* Vàng kim — điểm nhấn sang trọng */
  --gold: #e8b23a;           /* vàng kim (accent) */
  --gold-2: #ffe08a;         /* vàng sáng (highlight) */
  --gold-deep: #a9791c;      /* vàng sâu (bevel) */
  --gold-soft: #fff3d6;      /* nền vàng nhạt */
  --gold-line: rgba(232, 178, 58, 0.55);
  --gold-grad: linear-gradient(160deg, #fff1c0 0%, #f4cf6b 28%, #e6a92a 52%, #b8791c 78%, #ffe6a0 100%);
  --green: #16a34a;
  --red: #e4002b;
  --amber: #ff7a00;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 12px 34px rgba(23, 25, 34, 0.10);
  --shadow-red: 0 10px 28px rgba(160, 10, 40, 0.28);
  --ring: 0 0 0 3px rgba(228, 0, 43, 0.22);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand lockup */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(145deg, var(--primary-2), var(--primary) 50%, var(--primary-deep));
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-red), inset 0 0 0 1px rgba(255, 224, 138, 0.28);
}
.brand-name { font-weight: 800; letter-spacing: 0.01em; font-size: 18px; line-height: 1.1; }
.brand-name span { color: var(--primary); font-weight: 800; }
.brand-org { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 22px; }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

/* Card — viền trên vàng kim (nét sang trọng) */
.card { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 30px; }
.card-narrow { width: 100%; max-width: 420px; }

/* Panel */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--shadow); }
.panel-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 16px; border-left: 3px solid var(--gold); padding-left: 10px; }

/* Typography */
h1.title { font-size: 27px; margin: 0 0 6px; letter-spacing: -0.02em; font-weight: 800; }
.subtitle { color: var(--text-muted); margin: 0; font-size: 14px; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer;
  transition: filter 0.15s, transform 0.05s, box-shadow 0.15s, background 0.15s; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--primary-2), var(--primary) 48%, var(--primary-deep)); color: var(--primary-ink); border-color: var(--gold-line); box-shadow: var(--shadow-red), inset 0 0 0 1px rgba(255, 224, 138, 0.18); }
.btn-primary:hover { filter: brightness(1.06) saturate(1.06); box-shadow: 0 16px 40px rgba(255, 31, 56, 0.5), inset 0 0 0 1px rgba(255, 224, 138, 0.38); }
/* CTA vàng kim cao cấp (dùng cho nút quan trọng nhất) */
.btn-gold { background: var(--gold-grad); color: #5a0010; border-color: rgba(255, 240, 190, 0.75); box-shadow: 0 10px 26px rgba(184, 121, 28, 0.45); text-shadow: 0 1px 0 rgba(255, 244, 200, 0.5); }
.btn-gold:hover { filter: brightness(1.05); box-shadow: 0 14px 34px rgba(184, 121, 28, 0.6); }
.btn-block { width: 100%; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: transparent; color: var(--primary-deep); border-color: rgba(228, 0, 43, 0.35); }
.btn-danger:hover { background: var(--primary-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-lg { padding: 15px 22px; font-size: 16px; }

/* Inputs */
label.field { display: block; margin: 16px 0 7px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.input {
  width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 16px; font-family: var(--font); transition: border 0.15s, box-shadow 0.15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.input::placeholder { color: #b6bac6; }
select.input { cursor: pointer; }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--primary-soft); color: var(--primary-deep); }
.pill-green { background: #e4f7ec; color: #147a3a; }
.pill-amber { background: #fff1dd; color: #b56a00; }
.pill-dim { background: var(--surface-2); color: var(--text-dim); }
.pill-gold { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold-line); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; box-shadow: var(--shadow); }
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); }
.stat .l { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.table th { color: var(--text-dim); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.table tr:last-child td { border-bottom: none; }
.scroll-y { max-height: 360px; overflow-y: auto; }
.scroll-x { overflow-x: auto; }
code.code { background: var(--primary-soft); border: 1px solid #ffd1da; padding: 2px 8px; border-radius: 6px; color: var(--primary-deep); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }

/* Status text */
.s-done { color: var(--green); font-weight: 600; }
.s-running { color: var(--amber); font-weight: 600; }
.s-pending { color: var(--text-dim); }

/* Grid helpers */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.divider { height: 1px; background: var(--border-soft); margin: 18px 0; border: none; }
@media (max-width: 820px) { .cols-2 { grid-template-columns: 1fr; } }

/* QR */
.qr { background: #fff; padding: 12px; border-radius: 14px; display: inline-block; line-height: 0; border: 1px solid var(--border); box-shadow: var(--shadow); }
.qr img, .qr svg { display: block; width: 100%; height: auto; }

/* =========================================================
   THEME TỐI CINEMATIC (body.night) — cho đăng nhập & màn chiếu.
   Ghi đè biến CSS nên mọi component (.card/.panel/.btn/.input)
   tự chuyển tối, không cần viết lại.
   ========================================================= */
body.night {
  --bg: #0c0709;
  /* Đỏ oxblood sâu, ấm dần ra cam/vàng ở giữa — quầng dịu, không gắt */
  --bg-grad:
    radial-gradient(940px 540px at 50% 16%, rgba(255, 130, 45, 0.16), transparent 56%),
    radial-gradient(1120px 640px at 50% -16%, rgba(224, 22, 52, 0.34), transparent 62%),
    radial-gradient(860px 560px at 92% 2%, rgba(160, 0, 30, 0.30), transparent 56%),
    radial-gradient(900px 720px at 6% 106%, rgba(150, 102, 26, 0.20), transparent 55%),
    #0c0709;
  --surface: rgba(26, 19, 21, 0.76);
  --surface-2: #1f1820;
  --border: rgba(232, 178, 58, 0.20);
  --border-soft: rgba(255, 255, 255, 0.08);
  --text: #f6efe9;
  --text-muted: #d3c6c4;
  --text-dim: #9b9096;
  --primary-soft: rgba(255, 31, 56, 0.20);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
  --shadow-red: 0 14px 42px rgba(200, 20, 50, 0.4);
  color-scheme: dark;
}
body.night .card,
body.night .panel {
  background: rgba(18, 19, 27, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.night .stat { background: rgba(18, 19, 27, 0.6); }
body.night .input { background: rgba(255, 255, 255, 0.05); }
body.night .input::placeholder { color: #7c8194; }
body.night code.code { background: rgba(225, 27, 44, 0.16); border-color: rgba(225, 27, 44, 0.4); color: #ff8f9b; }
body.night a { color: var(--gold-2); }
body.night .brand-name span {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.night .btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--gold-line); }
body.night .btn-ghost:hover { color: var(--gold-2); border-color: var(--gold-2); }

/* Wordmark ÁNH KIM VÀNG (tiêu đề hero — như banner sự kiện) */
.neon {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 1px rgba(90, 0, 16, 0.45)) drop-shadow(0 0 26px rgba(232, 178, 58, 0.5));
}

/* Hiệu ứng phát sáng nút (tôn trọng prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  body.night .btn-primary { animation: nightGlow 3.4s ease-in-out infinite; }
  @keyframes nightGlow {
    0%, 100% { box-shadow: 0 12px 30px rgba(200, 20, 50, 0.38); }
    50% { box-shadow: 0 15px 40px rgba(224, 22, 52, 0.55); }
  }
  body.night .btn-gold { animation: goldGlow 3.6s ease-in-out infinite; }
  @keyframes goldGlow {
    0%, 100% { box-shadow: 0 10px 26px rgba(184, 121, 28, 0.4); }
    50% { box-shadow: 0 13px 36px rgba(255, 208, 110, 0.5); }
  }
}

/* =========================================================
   RESPONSIVE — tương thích mọi dòng điện thoại
   ========================================================= */
@media (max-width: 640px) {
  .wrap { padding: 20px 14px; }
  .card-pad { padding: 22px 18px; }
  h1.title { font-size: 22px; }
  .stat .n { font-size: 25px; }
  .btn { padding: 12px 14px; }
  .toolbar .btn { flex: 1 1 auto; }        /* nút full-width dễ chạm */
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr 1fr; } /* 2 cột trên máy rất nhỏ */
}