:root {
      --c-primary:        #2563eb;
      --c-primary-dark:   #1d4ed8;
      --c-primary-light:  #eff6ff;
      --c-primary-rgb:    37,99,235;
      --c-accent:         #f59e0b;
      --c-accent-light:   #fffbeb;
      --c-bg:             #f5f6f8;
      --c-surface:        #ffffff;
      --c-surface-2:      #f9fafb;
      --c-border:         #e5e7eb;
      --c-border-dark:    #d1d5db;
      --c-text:           #111827;
      --c-text-2:         #374151;
      --c-muted:          #6b7280;
      --c-muted-lt:       #9ca3af;
      --c-success:        #16a34a;
      --c-danger:         #dc2626;
      --radius-sm:        6px;
      --radius-md:        10px;
      --radius-lg:        14px;
      --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
      --shadow-md:        0 4px 12px rgba(0,0,0,.08);
      --shadow-lg:        0 10px 30px rgba(0,0,0,.1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Kanit', sans-serif;
      background: var(--c-bg);
      color: var(--c-text);
      font-size: 15px;
      line-height: 1.6;
    }

    /* ─── NAVBAR ─── */
    .top-nav {
      background: var(--c-surface);
      border-bottom: 1px solid var(--c-border);
      box-shadow: var(--shadow-sm);
      position: sticky; top: 0; z-index: 999;
    }
    .nav-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 1rem;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .nav-logo-wrap { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
    .nav-logo-img {
      width: 36px; height: 36px; border-radius: var(--radius-sm);
      object-fit: cover; background: var(--c-primary-light);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; color: var(--c-primary); font-size: .8rem; overflow: hidden;
    }
    .nav-logo-text { font-size: 1rem; font-weight: 700; color: var(--c-text); white-space: nowrap; }
    .nav-logo-text span { color: var(--c-primary); }

    /* Desktop links */
    .nav-links { display: flex; gap: .25rem; align-items: center; }
    .nav-links a {
      color: var(--c-muted); text-decoration: none;
      padding: .4rem .75rem; border-radius: var(--radius-sm);
      font-size: .88rem; font-weight: 500; transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .nav-links a:hover { background: var(--c-bg); color: var(--c-text); }
    .nav-links a.active { background: var(--c-primary-light); color: var(--c-primary); font-weight: 600; }

    /* Hamburger button */
    .nav-hamburger {
      display: none;
      background: none; border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      width: 38px; height: 38px;
      align-items: center; justify-content: center;
      cursor: pointer; color: var(--c-text);
      font-size: 1.2rem; flex-shrink: 0;
      transition: background .15s;
    }
    .nav-hamburger:hover { background: var(--c-bg); }

    /* Mobile drawer */
    .nav-drawer {
      display: none;
      background: var(--c-surface);
      border-top: 1px solid var(--c-border);
      padding: .5rem 1rem .75rem;
    }
    .nav-drawer.open { display: block; }
    .nav-drawer-inner {
      max-width: 1100px; margin: 0 auto;
      display: flex; flex-direction: column; gap: .15rem;
    }
    .nav-drawer a {
      color: var(--c-text-2); text-decoration: none;
      padding: .55rem .75rem; border-radius: var(--radius-sm);
      font-size: .92rem; font-weight: 500;
      display: flex; align-items: center; gap: .5rem;
      transition: background .15s, color .15s;
    }
    .nav-drawer a:hover { background: var(--c-bg); color: var(--c-text); }
    .nav-drawer a.active { background: var(--c-primary-light); color: var(--c-primary); font-weight: 600; }
    .nav-drawer-divider { height: 1px; background: var(--c-border); margin: .4rem 0; }

    /* Responsive breakpoints */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
    }
    @media (min-width: 769px) {
      .nav-drawer { display: none !important; }
    }

    /* ─── PAGE ─── */
    .page-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

    /* ─── HERO ─── */
/* HERO: full-width ของ container + 16:9 */
.hero-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

/* 16:9 รองรับ 1920x1080 */
.hero-wrap::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}

/* จำกัดความสูงบนจอใหญ่ (กันยาวเกิน) */
@media(min-width: 992px){
  /* .hero-wrap{ max-height: 520px; } */
  /* .hero-wrap::before{ padding-top: min(56.25%, 520px); } */
}

/* มือถือสูงขึ้นนิด */
@media(max-width: 576px){
  .hero-wrap::before{ padding-top: 70%; }
}

/* รูป banner cover เต็ม hero */
.hero-wrap > img#hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

/* overlay gradient */
.hero-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events:none;
}

/* fallback text */
.hero-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; letter-spacing:4px;
  font-size: clamp(28px, 6vw, 56px);
  color: rgba(255,255,255,.18);
  text-transform: uppercase;
}

/* prize bar */
.hero-prize-bar{
  position:absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 1100px;
  z-index: 3;
}
    .prize-block .lbl { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.6); }
    .prize-block .amount {
      font-size: clamp(1.6rem, 5vw, 2.4rem);
      font-weight: 800; color: var(--c-accent); line-height: 1.1;
    }
    .prize-block .amount span { font-size: .7em; font-weight: 600; }

    /* ─── META BAR ─── */
    .meta-bar {
      background: var(--c-surface); border: 1px solid var(--c-border);
      border-radius: var(--radius-lg); padding: .9rem 1.25rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: .75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;
    }
    .meta-label { font-size: .75rem; color: var(--c-muted); margin-bottom: .35rem; }
    .countdown-row { display: flex; align-items: center; gap: .35rem; }
    .cd-box {
      background: var(--c-bg); border: 1px solid var(--c-border);
      border-radius: var(--radius-sm); padding: .25rem .5rem;
      text-align: center; min-width: 48px;
    }
    .cd-num { font-size: 1.15rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
    .cd-lbl { font-size: .58rem; color: var(--c-muted-lt); letter-spacing: .5px; }
    .cd-sep { font-size: 1rem; color: var(--c-border-dark); font-weight: 600; }
    .cta-row { display: flex; gap: .6rem; }

    .btn-base {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .45rem 1.1rem; border-radius: var(--radius-sm);
      font-family: 'Kanit', sans-serif; font-size: .88rem; font-weight: 600;
      border: none; cursor: pointer; transition: opacity .15s, transform .15s, box-shadow .15s;
      white-space: nowrap;
    }
    .btn-base:hover { opacity: .88; transform: translateY(-1px); }
    .btn-discord { background: #5865F2; color: #fff; }
    .btn-register {
      background: var(--c-primary); color: #fff;
      box-shadow: 0 2px 8px rgba(var(--c-primary-rgb),.3);
    }
    .btn-register:hover { box-shadow: 0 4px 14px rgba(var(--c-primary-rgb),.4); }

    /* ─── TABS ─── */
    .tab-card {
      background: var(--c-surface); border: 1px solid var(--c-border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
    }
    .tab-nav-wrap {
      border-bottom: 1px solid var(--c-border); background: var(--c-surface-2);
      overflow-x: auto; scrollbar-width: none;
    }
    .tab-nav-wrap::-webkit-scrollbar { display: none; }
    .tab-nav { display: flex; padding: 0 .5rem; }
    .tab-btn {
      background: none; border: none; border-bottom: 3px solid transparent;
      padding: .85rem 1.1rem; color: var(--c-muted);
      font-family: 'Kanit', sans-serif; font-size: .9rem; font-weight: 500;
      white-space: nowrap; cursor: pointer;
      transition: color .2s, border-color .2s;
      display: flex; align-items: center; gap: .4rem;
    }
    .tab-btn:hover { color: var(--c-text); }
    .tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 700; }
    .tab-body { padding: 1.5rem; }
    .tab-pane { display: none; animation: fadeIn .25s ease; }
    .tab-pane.active { display: block; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ─── LOADING/ERROR ─── */
    .loading-box {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 3rem 1rem; gap: .75rem; color: var(--c-muted); font-size: .9rem;
    }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--c-border); border-top-color: var(--c-primary);
      border-radius: 50%; animation: spin .7s linear infinite;
    }
    @keyframes spin { to{transform:rotate(360deg)} }
    .error-box {
      background: #fef2f2; border: 1px solid #fecaca;
      border-radius: var(--radius-md); padding: 1rem 1.25rem;
      color: var(--c-danger); font-size: .9rem;
    }

    /* ─── SHARED COMPONENTS ─── */
    .sec-title {
      font-size: .95rem; font-weight: 700; color: var(--c-text);
      display: flex; align-items: center; gap: .5rem;
      margin-bottom: 1rem; padding-bottom: .6rem;
      border-bottom: 2px solid var(--c-primary-light);
    }
    .sec-title i { color: var(--c-primary); }
    .sec-block { margin-bottom: 1.5rem; }

    /* ─── TAB 1: รายละเอียด ─── */
    .alert-info-box {
      background: #eff6ff; border: 1px solid #bfdbfe;
      border-left: 4px solid var(--c-primary);
      border-radius: var(--radius-md); padding: .9rem 1rem;
      font-size: .88rem; line-height: 1.7; color: var(--c-text-2); margin-bottom: 1.25rem;
    }
    .alert-info-box a { color: var(--c-primary); font-weight: 700; }
    .timeline-row {
      display: flex; gap: .75rem; align-items: flex-start;
      padding: .55rem 0; border-bottom: 1px solid var(--c-border);
    }
    .timeline-row:last-child { border-bottom: none; }
    .tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); margin-top: 8px; flex-shrink: 0; }
    .tl-key { font-size: .78rem; color: var(--c-muted); margin-bottom: .1rem; }
    .tl-val { font-size: .9rem; font-weight: 600; }
    .tag {
      display: inline-block; padding: .2rem .6rem; border-radius: 20px;
      font-size: .76rem; font-weight: 600;
      background: var(--c-primary-light); color: var(--c-primary);
      border: 1px solid #bfdbfe; margin: .2rem .2rem 0 0;
    }
    .misc-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: .5rem 0; border-bottom: 1px solid var(--c-border);
      font-size: .88rem; gap: 1rem;
    }
    .misc-row:last-child { border-bottom: none; }
    .misc-key { color: var(--c-muted); }
    .misc-val { font-weight: 600; text-align: right; }

    /* ─── TAB 2: กฎ ─── */
    .rule-section { margin-bottom: 1.5rem; }
    .rule-item {
      display: flex; gap: .65rem; align-items: flex-start;
      padding: .55rem 0; border-bottom: 1px solid var(--c-border);
      font-size: .88rem; line-height: 1.65;
    }
    .rule-item:last-child { border-bottom: none; }
    .rule-num {
      min-width: 22px; height: 22px; background: var(--c-primary); color: #fff;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
    }

    /* ─── TAB 3: Bracket ─── */
    .bracket-scroll { overflow-x: auto; padding-bottom: .5rem; }
    .bracket-flex { display: flex; gap: 1rem; min-width: max-content; }
    .bracket-round { min-width: 200px; }
    .b-round-label {
      font-size: .72rem; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--c-muted);
      margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--c-border);
    }
    .b-match {
      border: 1px solid var(--c-border); border-radius: var(--radius-md);
      overflow: hidden; margin-bottom: .6rem;
      background: var(--c-surface); box-shadow: var(--shadow-sm);
    }
    .b-team {
      display: flex; align-items: center; justify-content: space-between;
      padding: .5rem .75rem; gap: .5rem;
      border-bottom: 1px solid var(--c-border); font-size: .85rem;
    }
    .b-team:last-child { border-bottom: none; }
    .b-team.winner { background: var(--c-primary-light); }
    .b-team.winner .b-name { color: var(--c-primary); font-weight: 700; }
    .b-team.winner .b-score { color: var(--c-primary); font-weight: 800; }
    .b-team.tbd .b-name { color: var(--c-muted-lt); font-style: italic; }
    .b-name { flex: 1; font-weight: 500; }
    .b-score { font-weight: 700; min-width: 20px; text-align: right; color: var(--c-text-2); }

    /* ─── TAB 4: รางวัล ─── */
    .prize-hero {
      background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
      border-radius: var(--radius-lg); padding: 1.75rem;
      text-align: center; margin-bottom: 1.25rem; color: #fff;
    }
    .prize-hero .lbl { font-size: .8rem; letter-spacing: 2px; opacity: .8; text-transform: uppercase; }
    .prize-hero .total { font-size: clamp(2rem,6vw,2.8rem); font-weight: 800; color: var(--c-accent); line-height: 1.15; }
    .prize-hero .total small { font-size: .45em; opacity: .85; }
    .prize-row {
      display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem;
      border: 1px solid var(--c-border); border-radius: var(--radius-md);
      margin-bottom: .5rem; background: var(--c-surface); box-shadow: var(--shadow-sm);
    }
    .prize-row.rank-1 { border-left: 4px solid #f59e0b; }
    .prize-row.rank-2 { border-left: 4px solid #94a3b8; }
    .prize-row.rank-3 { border-left: 4px solid #b45309; }
    .prize-icon { font-size: 1.3rem; flex-shrink: 0; }
    .prize-place { flex: 1; font-weight: 600; font-size: .9rem; }
    .prize-amt { font-weight: 800; font-size: .95rem; color: var(--c-primary); }

    /* ─── TAB 5: ผู้เข้าแข่งขัน ─── */
    .stats-row { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .stat-chip {
      background: var(--c-bg); border: 1px solid var(--c-border);
      border-radius: var(--radius-sm); padding: .4rem .75rem;
      font-size: .82rem; color: var(--c-text-2);
    }
    .stat-chip strong { color: var(--c-primary); }
    .search-wrap { position: relative; margin-bottom: 1rem; }
    .search-wrap i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--c-muted-lt); font-size: .9rem; }
    .search-wrap input {
      width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-md);
      padding: .55rem .9rem .55rem 2.25rem;
      font-family: 'Kanit', sans-serif; font-size: .88rem;
      color: var(--c-text); background: var(--c-bg); outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .search-wrap input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.1); }
    .p-count { font-size: .82rem; color: var(--c-muted); margin-bottom: .75rem; }
    .p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .6rem; }
    .p-card {
      display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem;
      border: 1px solid var(--c-border); border-radius: var(--radius-md);
      background: var(--c-surface); box-shadow: var(--shadow-sm);
      transition: border-color .15s, box-shadow .15s; cursor: default;
    }
    .p-card:hover { border-color: var(--c-primary); box-shadow: 0 2px 10px rgba(var(--c-primary-rgb),.12); }
    .p-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--c-primary-light); color: var(--c-primary);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: .85rem; flex-shrink: 0; overflow: hidden;
    }
    .p-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .p-name { font-size: .85rem; font-weight: 600; margin-bottom: .1rem; }
    .p-rank { font-size: .73rem; color: var(--c-muted); }
    .p-status { display: inline-block; font-size: .65rem; font-weight: 600; padding: .1rem .35rem; border-radius: 20px; }
    .p-status.active { background: #dcfce7; color: var(--c-success); }
    .p-status.eliminated { background: #fee2e2; color: var(--c-danger); }
    .pg-wrap { display: flex; justify-content: center; gap: .3rem; margin-top: 1.25rem; flex-wrap: wrap; }
    .pg-btn {
      width: 32px; height: 32px; border-radius: var(--radius-sm);
      border: 1px solid var(--c-border); background: var(--c-surface);
      color: var(--c-muted); font-size: .82rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; font-family: 'Kanit', sans-serif;
    }
    .pg-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
    .pg-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

    /* ─── FOOTER ─── */
    .site-footer {
      text-align: center; padding: 2rem 1rem 1rem;
      color: var(--c-muted-lt); font-size: .78rem;
      border-top: 1px solid var(--c-border); margin-top: 2rem;
    }
    .site-footer a { color: var(--c-muted); text-decoration: underline; }

    /* ─── RESPONSIVE ─── */
    @media (max-width:576px) {
      .meta-bar { flex-direction: column; align-items: stretch; }
      .cta-row { justify-content: stretch; }
      .cta-row .btn-base { flex: 1; justify-content: center; }
      .countdown-row { justify-content: center; }
      .tab-btn { padding: .75rem .75rem; font-size: .82rem; }
      .tab-body { padding: 1rem; }
    }