@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,500;0,700;0,800;1,700;1,800&display=swap");
/* SUANPATHUM GAMES — ธีมใหม่ "Midnight Arena" (โหลดหลัง modern.css ใช้ได้ทุกหน้า)
   โทนกรมท่าเข้ม + ชมพูนีออน + ฟ้าไซยาน ตัวอักษรคอนทราสต์สูง */
:root {
  --th-bg: #060d24; --th-bg2: #0b1637; --th-card: #101c45; --th-line: rgba(255,255,255,.12);
  --th-ink: #eef2ff; --th-soft: #b9c6ee; --th-pink: #ff3d9a; --th-cyan: #22d3ee; --th-gold: #ffd34d; --lg-pink: #e8306f; --lg-blue: #2a55c8; --lg-navy: #0c2a6b; --lg-yellow: #f7c600; --lg-orange: #f57c00; --lg-green: #1e9e5a; --lg-purple: #6a2bb8; --lg-red: #d32f2f;
  --th-grad: linear-gradient(135deg, #1b2f8f 0%, #5b2bd6 55%, #ff3d9a 120%);
}
html { scroll-behavior: smooth; }
/* ---------- เมนู ---------- */
.skp-header { background: rgba(6,13,36,.82) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--th-line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.7); }
.skp-header .top-bar { background: rgba(255,255,255,.04) !important; color: var(--th-soft) !important; }
.skp-header .top-bar small, .skp-header .top-bar i { color: var(--th-soft) !important; }
.skp-header .navbar { background: transparent !important; }
.skp-header .brand-text { color: #fff !important; letter-spacing: .5px; font-weight: 800; }
.skp-header .navbar .navbar-nav .nav-link { color: #dfe7ff !important; font-weight: 600; position: relative; }
.skp-header .navbar .navbar-nav .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 0; height: 2px; background: linear-gradient(90deg, var(--th-pink), var(--th-cyan)); transition: width .25s, left .25s; }
.skp-header .navbar .navbar-nav .nav-link:hover::after, .skp-header .navbar .navbar-nav .nav-link.active::after { width: 70%; left: 15%; }
.skp-header .navbar .navbar-nav .nav-link:hover, .skp-header .navbar .navbar-nav .nav-link.active { color: #fff !important; }
.skp-header .navbar-toggler { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.skp-header .dropdown-menu { background: var(--th-bg2); border: 1px solid var(--th-line) !important; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); }
.skp-header .dropdown-item { color: #dfe7ff; }
.skp-header .dropdown-item:hover { background: rgba(255,61,154,.18); color: #fff; }
@media (max-width: 991px) { .skp-header .navbar-collapse { background: var(--th-bg2); border-radius: 0 0 16px 16px; } }

/* ---------- หน้าแรก ---------- */
body.skp-home { background: var(--th-bg); color: var(--th-ink); }
body.skp-home .skp-hero { background: radial-gradient(900px 420px at 15% 0%, rgba(34,211,238,.28), transparent 60%), radial-gradient(800px 420px at 90% 100%, rgba(255,61,154,.38), transparent 60%), linear-gradient(160deg, #0d1b5e 0%, #2a1a85 60%, #4a1670 100%); border: 1px solid var(--th-line); box-shadow: 0 40px 80px -30px rgba(255,61,154,.35); }
body.skp-home .skp-hero h1 { background: linear-gradient(90deg, #fff 30%, #ffc2e2 70%, #a5f3fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; text-shadow: none; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }
body.skp-home .skp-hero .hero-sub, body.skp-home .skp-hero .hero-purpose { color: #e8eeff !important; }
body.skp-home .skp-cd-box { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6) inset, 0 0 24px -8px rgba(34,211,238,.45); }
body.skp-home .skp-cd-box .num { color: #fff; text-shadow: 0 0 18px rgba(34,211,238,.7); }
body.skp-home .skp-cd-box .unit { color: var(--th-soft); }
body.skp-home .skp-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
body.skp-home .skp-chip .label { color: #a5f3fc; } body.skp-home .skp-chip .value { color: #fff; }
body.skp-home .skp-btn-accent { background: linear-gradient(135deg, #ff3d9a, #ff7a3d); box-shadow: 0 14px 30px -10px rgba(255,61,154,.7); border: 0; color: #fff; }
body.skp-home .skp-btn-ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4); color: #fff; }
body.skp-home .skp-btn-ghost:hover { background: #fff; color: #1b2f8f; }
body.skp-home .skp-section { background: linear-gradient(180deg, var(--th-bg) 0%, var(--th-bg2) 100%) !important; color: var(--th-ink); }
body.skp-home .skp-head h2, body.skp-home .skp-section h2, body.skp-home .skp-section h3 { color: #fff; }
body.skp-home .skp-head .eyebrow { color: var(--th-cyan); letter-spacing: 3px; }
body.skp-home .obj-intro { background: var(--th-grad); border: 1px solid var(--th-line); }
body.skp-home .obj-item { background: var(--th-card); border: 1px solid var(--th-line); color: var(--th-ink); transition: transform .25s, border-color .25s, box-shadow .25s; }
body.skp-home .obj-item:hover { transform: translateY(-4px); border-color: var(--th-pink); box-shadow: 0 18px 36px -18px rgba(255,61,154,.6); }
body.skp-home .obj-item p { color: var(--th-ink); }
body.skp-home .obj-num { color: var(--th-pink); }
body.skp-home .obj-ico { background: rgba(255,61,154,.16); color: var(--th-pink); }

/* ---------- การ์ดรายการแข่งขัน + รางวัล ---------- */
.skp-item { border-radius: 18px; transition: transform .22s, box-shadow .22s; }
.skp-item:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(255,61,154,.55); }
.skp-awards { list-style: none; margin: .7rem 0 0; padding: .55rem .6rem; display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px dashed rgba(120,130,170,.45); }
.skp-awards li { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem .22rem .45rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #11203f; background: #f1f4ff; border: 1px solid #d6dcf3; border-left: 5px solid var(--tc, #6B7280); }
.skp-awards li.aw1 { background: linear-gradient(135deg, #fff4c2, #ffe083); border-color: #f2c94c; }
.skp-awards li.aw2 { background: linear-gradient(135deg, #f4f6fb, #dfe4ee); }
.skp-awards li.aw3 { background: linear-gradient(135deg, #ffe9d8, #f5c9a4); }
.skp-awards .aw-m { font-size: 1.05rem; }

/* ---------- ทุกหน้า: ตาราง/การ์ด/ปุ่ม ให้ดูใหม่และอ่านง่าย ---------- */
.table { --bs-table-hover-bg: rgba(53,94,252,.07); }
.table > thead > tr > th, .table thead th { background: linear-gradient(135deg, #0d1b5e, #2a1a85) !important; color: #fff !important; border: 0 !important; font-weight: 700; white-space: nowrap; }
.table > tbody > tr { transition: background .15s; }
.table > tbody > tr:hover { background: rgba(53,94,252,.08); }
.table-responsive-auto, .table-responsive { border-radius: 16px; box-shadow: 0 14px 34px -22px rgba(1,26,65,.5); border: 1px solid #e3e8f6; }
.card { border: 1px solid #e3e8f6; border-radius: 18px; box-shadow: 0 14px 34px -24px rgba(1,26,65,.45); transition: transform .2s, box-shadow .2s; }
.card:hover { box-shadow: 0 22px 40px -22px rgba(53,94,252,.45); }
.btn-primary { background: linear-gradient(135deg, #355EFC, #6a3df0); border: 0; box-shadow: 0 10px 22px -12px rgba(53,94,252,.8); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
body:not(.skp-home) { background: #f3f5fd; }
h1, h2, h3 { letter-spacing: .2px; }
/* ระบุคณะสีให้เห็นชัดในตารางและป้าย */
.team-red { --tc: #D32F2F; } .team-green { --tc: #1E9E5A; } .team-yellow { --tc: #F5B301; } .team-purple { --tc: #7B3FA0; } .team-orange { --tc: #F57C00; }
@media print { .skp-header, .back-to-top { display: none !important; } body { background: #fff !important; } .table thead th { background: #eee !important; color: #000 !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- โลโก้วงกลม + ฟอนต์หัวข้อสไตล์กีฬา + แถบ 5 สีคณะ ---------- */
h1, h2, h3, .skp-head h2, .brand-text, .ann-hero h1, .lst-head h1 { font-family: 'Kanit', 'Noto Sans Thai', sans-serif; font-style: italic; font-weight: 800; }
.skp-header .brand-logo { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 16px -4px rgba(255,61,154,.7); transition: transform .4s; }
.skp-header .brand-logo:hover { transform: rotate(-8deg) scale(1.08); }
.hero-logo { width: clamp(120px, 22vw, 190px); height: auto; margin-bottom: .6rem; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(255,61,154,.45)); animation: heroFloat 5s ease-in-out infinite; }
@keyframes heroFloat { 50% { transform: translateY(-8px); } }
.skp-header::after, .ann-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: linear-gradient(90deg, var(--lg-purple) 0 20%, var(--lg-green) 20% 40%, var(--lg-yellow) 40% 60%, var(--lg-red) 60% 80%, var(--lg-orange) 80% 100%); }
.skp-header { position: fixed; }
body.skp-home .skp-hero .btn, body.skp-home .skp-btn { font-family: 'Kanit', 'Noto Sans Thai', sans-serif; font-weight: 700; }
.skp-item .title, .skp-head .eyebrow { font-family: 'Kanit', 'Noto Sans Thai', sans-serif; }
body.skp-home .skp-head .eyebrow { color: var(--lg-yellow); }
body.skp-home .obj-intro { background: linear-gradient(150deg, var(--lg-navy), var(--lg-purple) 60%, var(--lg-pink)); }
.btn-primary { background: linear-gradient(135deg, var(--lg-blue), var(--lg-purple)); }
.table > thead > tr > th, .table thead th { background: linear-gradient(135deg, var(--lg-navy), var(--lg-blue)) !important; }