/* ---------- Base & Blue Theme ---------- */
:root{
  --bg-1:#0f3a69;      /* header */
  --bg-2:#1e5ea2;      /* hero top */
  --bg-3:#0b2036;      /* deep navy */
  --card:#ffffff;
  --ink:#142033;
  --ink-soft:#5b6a80;
  --brand:#7cc6ff;     /* sky */
  --accent:#4ea9ff;    /* button */
  --ring: rgba(255,255,255,.18);
  --radius: 16px;
  --shadow-lg: 0 20px 35px rgba(0,0,0,.22);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.14);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Kanit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#fff;
  background: linear-gradient(180deg,var(--bg-2),#184a7c 40%, var(--bg-3) 100%) fixed;
  min-height:100svh;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1440px, 92vw); margin-inline:auto; }

/* ---------- Top Nav ---------- */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(15,58,105,.96); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); border-bottom:1px solid var(--ring); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand .mark{ width:40px; aspect-ratio:1/1; border-radius:12px; background: radial-gradient(60% 60% at 50% 30%, #c5e8ff, #3280d5 60%, #13446e 100%); box-shadow: inset 0 0 14px rgba(255,255,255,.35), 0 10px 18px rgba(0,0,0,.25); }
.menu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.menu a{ display:flex; align-items:center; gap:8px; font-size:.98rem; padding:8px 10px; border-radius:10px; opacity:.95; transition:.2s ease; }
.menu a:hover{ background:rgba(255,255,255,.08); opacity:1; }
.nav-actions{ display:flex; gap:8px; align-items:center; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid var(--ring); box-shadow: inset 0 -2px 0 rgba(255,255,255,.08); }
.btn.primary{ background: linear-gradient(180deg,#99d4ff,#4ea9ff); color:#021a2e; border-color:rgba(0,0,0,.08); }

/* mobile nav */
.burger{ display:none; width:42px; height:42px; border-radius:12px; place-items:center; background:rgba(255,255,255,.12); border:1px solid var(--ring); }
#nav-open{ display:none; }
.drawer{ display:none; }
@media (max-width:980px){
  .menu{ display:none; }
  .burger{ display:grid; }
  .drawer{ display:block; background:rgba(8,32,54,.92); backdrop-filter: blur(6px); border-bottom:1px solid var(--ring); }
  .drawer .menu{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
  #nav-open:checked ~ .drawer{ display:block; }
}

/* ---------- NEWS ---------- */
.page{ padding:24px 0 10px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:18px; }
.pill{ background:#eff6ff; color:#0f2a4a; border:1px solid #d6e7ff; padding:10px 14px; border-radius:999px; box-shadow:0 1px 0 #d6e7ff; display:inline-flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; }
.pill.active{ background:linear-gradient(180deg,#bfe4ff,#7cc6ff); border-color:#7cc6ff; }

.grid{ display:grid; gap:26px; grid-template-columns: repeat(12, 1fr); }
.col-4{ grid-column: span 4; }
@media (max-width:1200px){ .col-4{ grid-column: span 6; } }
@media (max-width:760px){ .col-4{ grid-column: span 12; } }

.news-card{ background:var(--card); color:var(--ink); border-radius:16px; overflow:hidden; border:1px solid #e6eef8; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; height:100%; }
.cover{ position:relative; background:#eaf3ff center/cover no-repeat; aspect-ratio: 16/9; }
/* แนะนำภาพข่าว: 1200×675px (16:9) */
.body{ padding:16px 18px 18px; display:grid; gap:10px; }
.title{ font-weight:800; color:#0f2a4a; }
.desc{ color:#51647c; }
.meta{ display:flex; align-items:center; gap:8px; color:#6f86a0; font-size:.95rem; }
.actions{ display:flex; justify-content:flex-end; padding:0 18px 18px; }
.btn.read{ background:#efe8ff00; color:#0050aa; border:1px solid #dbe9ff; border-radius:999px; padding:10px 14px; font-weight:700; }
.btn.read:hover{ background:#f4f9ff; }

.muted-bg{ position:relative; }
.muted-bg::before{
  content:""; position:absolute; inset:-80px 0 -40px; z-index:-1; background:
  url('assets/bg-silhouette.png') center bottom / 1200px auto no-repeat,
  radial-gradient(600px 300px at 50% 0%, rgba(173,216,255,.35), transparent 70%),
  linear-gradient(180deg, #f6fbff, #eef6ff 40%, #e6f0ff 100%);
  opacity:.9;
}

/* ---------- JOBS ---------- */
.jobs{ position:relative; padding:28px 0 20px; }
.jobs::before{
  content:""; position:absolute; left:0; right:0; top:80px; height:260px; transform:skewY(-8deg);
  background: linear-gradient(90deg, rgba(94,160,255,.55), rgba(30,94,162,.55));
  z-index:-1; border-radius:8px; filter:saturate(110%);
}
.jobs-grid{ display:grid; gap:22px; grid-template-columns: 220px 1fr 520px; align-items:start; }
@media (max-width:1200px){ .jobs-grid{ grid-template-columns: 180px 1fr; } .jobs-right{ grid-column: 1 / -1; } }
@media (max-width:900px){ .jobs-grid{ grid-template-columns: 1fr; } .jobs-right{ grid-column:auto; } }

.side-card{ background:#fff; color:var(--ink); border-radius:36px; border:1px solid #e6eef8; box-shadow: var(--shadow-sm); padding:16px 12px; display:grid; gap:14px; align-content:start; }
.icon-btn{ width:86px; height:86px; border-radius:999px; background: var(--img) center/cover no-repeat, radial-gradient(70% 70% at 50% 30%, #d9eaff, #8fbfff); border:4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.15), 0 0 0 2px #e2efff inset; margin-inline:auto; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; }
.icon-btn:hover{ transform: translateY(-2px); }
.icon-btn.active{ box-shadow: 0 0 0 3px #5aaaff, 0 6px 14px rgba(0,0,0,.15); }

.job-figure{ position:relative; min-height:520px; display:grid; place-items:end center; }
.job-figure img{ width:auto; max-width:min(100%, 880px); max-height: clamp(420px, 55svh, 720px); object-fit:contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }

.right-card{ background:#fff; color:var(--ink); border-radius:16px; border:1px solid #e6eef8; box-shadow: var(--shadow-sm); overflow:hidden; }
.right-card .card-body{ padding:18px; }
.right-title{ font-size:2rem; font-weight:800; color:#0f2a4a; margin:0 0 6px; text-align:center; }
.right-desc{ color:#50637b; text-align:center; margin:0; }
.video-card{ background:#fff; border:1px solid #e6eef8; border-radius:16px; box-shadow: var(--shadow-sm); overflow:hidden; }
.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:900px){
  .side-card{ display:flex; overflow:auto; gap:12px; padding:12px; }
  .icon-btn{ flex:0 0 74px; height:74px; }
  .job-figure{ min-height:380px; }
}

/* ---------- Hero (Optional) ---------- */
.hero{ position:relative; isolation:isolate; margin-top:28px; }
.hero-wrap{ position:relative; padding:min(7vw,56px) 0 min(9vw,80px); }
.hero-bg{ position:absolute; inset:-2px; z-index:-2; pointer-events:none; opacity:.5; background:
  radial-gradient(1200px 500px at 50% -50%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
  radial-gradient(800px 300px at 20% 10%, rgba(200,235,255,.25), transparent 70%),
  radial-gradient(900px 500px at 80% 0%, rgba(120,190,255,.22), transparent 70%),
  linear-gradient(180deg, transparent, rgba(0,0,0,.15));
}
.hero::before{ content:""; position:absolute; inset:0; z-index:-3; opacity:.25; background:center/cover no-repeat var(--hero-image, url('assets/hero-bg.jpg')); filter: blur(2px); }
.hero-main{ display:grid; place-items:center; text-align:center; gap:22px; }
.game-logo{ width:min(840px, 92%); aspect-ratio:16/7; background:center/contain no-repeat var(--logo-image, url('assets/logo.png')); margin-inline:auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.char{ position:absolute; bottom:0; width:clamp(120px, 20vw, 260px); aspect-ratio:3/5; background:center/contain no-repeat; filter: drop-shadow(0 14px 30px rgba(0,0,0,.35)); opacity:.98; }
.char.l{ left:max(-10px, 2vw); background-image: var(--char-left, url('assets/char-left.png')); }
.char.r{ right:max(-10px, 2vw); background-image: var(--char-right, url('assets/char-right.png')); }

/* ---------- Footer ---------- */
footer{ color:#8aa6c2; border-top:1px solid rgba(255,255,255,.15); margin-top:40px; }
.foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:24px 0; font-size:.95rem; justify-content:space-between; }