@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap");

/* RAN CHAMPION Website V2 — shared black & gold design system */
:root {
  color-scheme: dark;
  --rc-bg-main: #080808;
  --rc-bg-secondary: #101010;
  --rc-surface: #161616;
  --rc-surface-raised: #1a1a1a;
  --rc-surface-hover: #202020;
  --rc-gold: #d2a64a;
  --rc-gold-light: #f0c96a;
  --rc-gold-dark: #92702d;
  --rc-gold-soft: rgba(210, 166, 74, .12);
  --rc-text-main: #f4f4f4;
  --rc-text-secondary: #b8b8b8;
  --rc-text-muted: #858585;
  --rc-danger: #ef6b6b;
  --rc-success: #77c890;
  --rc-border: rgba(255, 255, 255, .09);
  --rc-border-gold: rgba(210, 166, 74, .34);
  --rc-shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
  --rc-shadow-lg: 0 22px 65px rgba(0, 0, 0, .5);
  --rc-radius-sm: 10px;
  --rc-radius-md: 16px;
  --rc-radius-lg: 22px;
  --rc-container: 1280px;
  --rc-section-space: clamp(48px, 6vw, 92px);
  --rc-transition: 200ms cubic-bezier(.2, .7, .2, 1);

  /* Compatibility aliases for the existing page styles. */
  --bg: var(--rc-bg-main);
  --bg-soft: var(--rc-bg-secondary);
  --card: var(--rc-surface);
  --text: var(--rc-text-main);
  --muted: var(--rc-text-secondary);
  --brand: var(--rc-gold);
  --brand-2: var(--rc-gold-dark);
  --accent: var(--rc-gold-light);
  --shadow: var(--rc-shadow-lg);
}

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

html {
  min-width: 0;
  scroll-behavior: smooth;
  scrollbar-color: var(--rc-gold-dark) var(--rc-bg-secondary);
}

body {
  min-width: 0 !important;
  margin: 0;
  color: var(--rc-text-main);
  background-color: var(--rc-bg-main) !important;
  background-image:
    linear-gradient(180deg, rgba(8, 8, 8, .5), rgba(8, 8, 8, .9)),
    url("../../images/bg_page.jpg") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  font-family: "Kanit", "Noto Sans Thai", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(210, 166, 74, .17), transparent 34rem),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
}

img, video, iframe { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rc-gold-light) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(210, 166, 74, .18) !important;
}

::selection { color: #090704; background: var(--rc-gold-light); }

.container {
  width: min(calc(100% - 32px), var(--rc-container)) !important;
  margin-inline: auto !important;
}

h1, h2, h3, h4, .main-header, .section__title {
  font-family: "Kanit", "Noto Sans Thai", Tahoma, system-ui, sans-serif !important;
  color: var(--rc-text-main);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.4; }
p, li, td, th { overflow-wrap: anywhere; }

/* Shared modern header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--rc-border-gold) !important;
  background: rgba(8, 8, 8, .9) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px) saturate(1.15);
}

.site-header .nav {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 10px !important;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rc-text-main) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.brand .logo { width: 22px; height: 22px; fill: var(--rc-gold) !important; }
.brand-ico { width: 28px !important; height: 28px !important; border: 1px solid var(--rc-border-gold); }

.menu {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(7px, 1vw, 14px) !important;
  margin-left: auto;
}

.menu a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 2px;
  color: var(--rc-text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.25;
  transition: color var(--rc-transition), transform var(--rc-transition) !important;
}

.menu a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 2px;
  background: var(--rc-gold);
  transition: right var(--rc-transition), left var(--rc-transition);
}

.menu a:hover, .menu a.active, .menu a[aria-current="page"] { color: var(--rc-gold-light) !important; }
.menu a:hover::after, .menu a.active::after, .menu a[aria-current="page"]::after { right: 0; left: 0; }
.menu a span { margin-top: 2px; color: var(--rc-text-muted); font-size: 10px !important; }

.hamburger, .rc-nav-toggle, .rc-home-toggle {
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--rc-border-gold) !important;
  border-radius: var(--rc-radius-sm) !important;
  background: var(--rc-gold-soft) !important;
  color: var(--rc-text-main);
  cursor: pointer;
}

.hamburger span, .rc-nav-toggle span, .rc-home-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 3px;
  background: var(--rc-gold-light) !important;
  transition: transform var(--rc-transition), opacity var(--rc-transition);
}

[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Legacy text navigation */
.navbar_menu {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  min-height: 72px !important;
  border-bottom: 1px solid var(--rc-border-gold) !important;
  background: rgba(8, 8, 8, .91) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(16px);
}

.navbar_menu_bg { min-height: 72px !important; background: none !important; }
.navbar_menu .container { position: relative; min-height: 72px; }
.navbar_menu .row { margin: 0 !important; }
.navbar_menu nav > ul {
  display: flex !important;
  justify-content: center;
  align-items: stretch;
  min-height: 72px;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar_menu .navbar_container { width: auto !important; min-width: 145px; background: none !important; }
.navbar_menu .navbar_container > a {
  display: flex !important;
  min-height: 72px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px !important;
  border: 0 !important;
  color: var(--rc-text-main) !important;
  text-decoration: none;
  transition: color var(--rc-transition), background var(--rc-transition) !important;
}

.navbar_menu .navbar_container > a:hover,
.navbar_menu .navbar_container > a[aria-current="page"] {
  color: var(--rc-gold-light) !important;
  background: var(--rc-gold-soft) !important;
}

.navbar_menu .navbar_container > a span { color: var(--rc-text-muted) !important; }
.navbar_menu .dropdown_menu {
  border: 1px solid var(--rc-border-gold) !important;
  border-radius: 0 0 var(--rc-radius-sm) var(--rc-radius-sm);
  background: var(--rc-surface) !important;
  box-shadow: var(--rc-shadow-sm);
  overflow: hidden;
}

.navbar_menu .dropdown_menu a { color: var(--rc-text-main) !important; background: transparent !important; }
.navbar_menu .dropdown_menu a:hover { color: var(--rc-gold-light) !important; background: var(--rc-gold-soft) !important; }
.rc-nav-toggle { display: none; position: absolute; top: 13px; right: 0; }

/* Shared surfaces */
.section { padding: var(--rc-section-space) 0 !important; }
.hero { border-bottom: 1px solid var(--rc-border); background: linear-gradient(110deg, rgba(210, 166, 74, .12), transparent 48%) !important; }
.hero__inner { padding-block: clamp(48px, 7vw, 92px) !important; }
.hero__text h1 { margin: 0 0 14px !important; font-size: clamp(2.3rem, 5vw, 4.5rem) !important; }
.lead { max-width: 760px; color: var(--rc-text-secondary) !important; line-height: 1.8; }
.badge, .badges .badge { color: var(--rc-gold-light); border: 1px solid var(--rc-border-gold); background: var(--rc-gold-soft) !important; }

.card, .rc-card, .rules-container, .box-sv, .ui.segment, .toolbar {
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-md) !important;
  background:
    linear-gradient(145deg, rgba(210, 166, 74, .055), transparent 34%),
    rgba(18, 18, 18, .94) !important;
  color: var(--rc-text-main) !important;
  box-shadow: var(--rc-shadow-sm) !important;
}

.card, .rules-container, .box-sv, .ui.segment {
  transition: border-color var(--rc-transition), transform var(--rc-transition), box-shadow var(--rc-transition);
}

.card:hover, .rc-card-hover:hover, .rules-container:hover, .box-sv:hover {
  border-color: var(--rc-border-gold) !important;
  box-shadow: var(--rc-shadow-lg) !important;
}

.section__title { margin-bottom: 24px !important; color: var(--rc-text-main) !important; }
.section__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--rc-gold), transparent);
}
.section__title span { color: var(--rc-gold) !important; }

.steps, .grid { gap: clamp(16px, 2.2vw, 28px) !important; }
.step { padding: clamp(18px, 2.5vw, 28px) !important; }
.step__num { color: #100c04; background: linear-gradient(135deg, var(--rc-gold-light), var(--rc-gold-dark)) !important; }
.notice { margin-top: 28px; padding: clamp(18px, 2.5vw, 26px) !important; }
.faq { border-color: var(--rc-border) !important; background: rgba(16, 16, 16, .92) !important; }
.faq[open] { border-color: var(--rc-border-gold) !important; }
.faq summary { color: var(--rc-gold-light); }
.faq p, .rules-container p, .rules-container li { color: var(--rc-text-secondary) !important; }

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-icon,
.pagination button, .pagination .page-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--rc-border-gold) !important;
  border-radius: var(--rc-radius-sm) !important;
  color: var(--rc-text-main) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color var(--rc-transition), background var(--rc-transition), border-color var(--rc-transition), transform var(--rc-transition) !important;
}

.btn:hover, .btn-secondary:hover, .btn-outline:hover, .pagination button:hover, .pagination .page-btn:hover {
  color: var(--rc-gold-light) !important;
  border-color: var(--rc-gold) !important;
  background: var(--rc-gold-soft) !important;
  transform: translateY(-2px);
}

.btn.primary, .btn-primary, .btn-success, .btn-view, .btn-view2, .pagination button.active, .pagination .page-btn.active {
  color: #100c04 !important;
  border-color: var(--rc-gold-light) !important;
  background: linear-gradient(135deg, var(--rc-gold-light), var(--rc-gold-dark)) !important;
}

.btn-danger { color: #fff !important; border-color: rgba(239, 107, 107, .65) !important; background: rgba(239, 107, 107, .16) !important; }
.btn-icon { width: 44px; padding-inline: 0; }

/* Forms */
.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 46px;
  max-width: 100%;
  padding: 10px 14px !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-sm) !important;
  background: rgba(0, 0, 0, .5) !important;
  color: var(--rc-text-main) !important;
  caret-color: var(--rc-gold-light);
  transition: border-color var(--rc-transition), box-shadow var(--rc-transition);
}
input::placeholder, textarea::placeholder { color: var(--rc-text-muted) !important; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--rc-gold) !important; }
label { color: var(--rc-text-secondary); font-weight: 600; }

/* Tables */
.table-responsive, .score-card {
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.table, .ui.table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
.table th, .table td, .ui.table th, .ui.table td { padding: 14px 16px !important; border-color: var(--rc-border) !important; }
.table thead th, .ui.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--rc-gold-light) !important;
  background: #19150d !important;
  font-size: .78rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
.table tbody tr, .ui.table tbody tr { transition: background var(--rc-transition); }
.table tbody tr:hover, .ui.table tbody tr:hover { background: var(--rc-gold-soft) !important; }

/* Homepage */
.rc-home-page {
  width: 100% !important;
  max-width: 100%;
  background-color: #080808 !important;
  background-image:
    radial-gradient(circle at 50% 0, rgba(210, 166, 74, .12), transparent 34rem),
    linear-gradient(180deg, rgba(8, 8, 8, .72) 0%, rgba(16, 16, 16, .84) 48%, rgba(8, 8, 8, .9) 100%),
    url("../../images/bg_page.jpg") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: auto, auto, cover !important;
}

html.rc-index-page {
  width: 100% !important;
  max-width: 100%;
  overflow-x: hidden;
}

.rc-home-page > .wrapper,
.rc-home-page #particles-js,
.rc-home-page #preloader {
  display: none !important;
}

.rc-home-page .header_table {
  margin: 0 auto !important;
}

/* Completely re-composed homepage layout. The legacy table remains as a no-JS fallback. */
.rc-index {
  display: none;
  font-size: 17px;
}
.rc-index-ready .rc-index { display: block; }
.rc-index-ready > .header_table { display: none !important; }
.rc-index .aos-init { opacity: 1 !important; transform: none !important; }

.rc-index-container,
.rc-index-header__inner {
  width: min(calc(100% - 40px), 1240px);
  margin-inline: auto;
}

.rc-index-header {
  position: sticky;
  top: 0;
  z-index: 1300;
  border-bottom: 1px solid var(--rc-border);
  background: rgba(8, 8, 8, .92);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px) saturate(1.15);
}

.rc-index-header__inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.rc-index-brand {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: block;
  overflow: hidden;
}

.rc-index-brand__image {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain;
  object-position: center;
}

.rc-index-navigation {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
}

.rc-index-navigation a {
  min-width: max-content;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px clamp(10px, 1.2vw, 18px);
  border-bottom: 2px solid transparent;
  opacity: .78;
  transition: opacity var(--rc-transition), border-color var(--rc-transition), background var(--rc-transition);
}

.rc-index-navigation a:hover,
.rc-index-navigation a[aria-current="page"] {
  border-bottom-color: var(--rc-gold);
  background: var(--rc-gold-soft);
  opacity: 1;
}

.rc-index-navigation__label {
  color: var(--rc-text-secondary);
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  white-space: nowrap;
  transition: color var(--rc-transition);
}

.rc-index-navigation a:hover .rc-index-navigation__label,
.rc-index-navigation a[aria-current="page"] .rc-index-navigation__label {
  color: var(--rc-gold-light);
}

.rc-index-menu-toggle {
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  margin-left: auto;
  padding: 9px;
  border: 1px solid var(--rc-border-gold);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-gold-soft);
  cursor: pointer;
}

.rc-index-menu-toggle span {
  width: 22px;
  height: 2px;
  display: block;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--rc-gold-light);
  transition: transform var(--rc-transition), opacity var(--rc-transition);
}

.rc-index-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rc-index-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rc-index-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.rc-index-main { min-height: 100vh; }

.rc-index-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--rc-border);
  background:
    radial-gradient(circle at 50% 18%, rgba(210, 166, 74, .16), transparent 25rem),
    linear-gradient(180deg, #111 0%, #080808 100%);
}

.rc-index-hero::before,
.rc-index-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.rc-index-hero::before {
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.rc-index-hero::after {
  right: 10%;
  bottom: -180px;
  left: 10%;
  height: 230px;
  border-radius: 50%;
  background: rgba(210, 166, 74, .14);
  filter: blur(60px);
}

.rc-index-hero__inner {
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 30px;
  padding-block: clamp(48px, 7vw, 88px);
}

.rc-index-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.rc-index-hero__visual::after {
  content: "";
  position: absolute;
  inset: auto 16% 4% 16%;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .82);
  filter: blur(12px);
}

.rc-index-hero__logo {
  position: relative;
  z-index: 1;
  width: min(440px, 78vw) !important;
  height: min(440px, 58vh) !important;
  object-fit: contain;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .55));
}

.rc-index-actions {
  width: min(100%, 1040px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.rc-index-actions a {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  overflow: hidden;
  border: 2px solid var(--rc-gold);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(210, 166, 74, .14), transparent 44%),
    linear-gradient(135deg, #17130b 0%, #070707 48%, #12100b 100%);
  color: var(--rc-gold-light);
  font-size: clamp(1.12rem, 1.5vw, 1.28rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 138, .2),
    0 12px 30px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(210, 166, 74, .08);
  transition: color var(--rc-transition), transform var(--rc-transition), border-color var(--rc-transition), background var(--rc-transition), box-shadow var(--rc-transition);
}

.rc-index-actions a:hover {
  color: var(--rc-gold-light);
  border-color: var(--rc-gold-light);
  background:
    linear-gradient(180deg, rgba(240, 201, 106, .2), transparent 46%),
    linear-gradient(135deg, #211a0d 0%, #050505 48%, #171208 100%);
  box-shadow: 0 16px 38px rgba(210, 166, 74, .26), 0 0 22px rgba(210, 166, 74, .16);
  transform: translateY(-4px);
}

.rc-index-actions a:active {
  transform: translateY(-1px) scale(.99);
}

.rc-index-section { padding-block: clamp(54px, 7vw, 92px); }
.rc-index-section--muted { border-block: 1px solid var(--rc-border); background: rgba(255, 255, 255, .018); }

.rc-index-heading {
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rc-index-heading__main {
  color: var(--rc-text-main);
  font-size: clamp(1.55rem, 3.2vw, 2.65rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .04em;
}

.rc-index-heading__sub {
  color: var(--rc-gold);
  font-size: clamp(.9rem, 1.5vw, 1.08rem);
  font-weight: 600;
  letter-spacing: .03em;
}

.rc-index-heading::after {
  content: "";
  width: 76px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--rc-gold), transparent);
}

.rc-index-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.rc-index-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  background: rgba(18, 18, 18, .94);
  box-shadow: var(--rc-shadow-sm);
}

.rc-index-slider {
  width: 100%;
  max-width: 100%;
  align-self: start;
  min-height: 0;
  aspect-ratio: 1.86 / 1;
  padding: 0;
  border-color: var(--rc-border-gold);
  background: #000;
}
.rc-index-slider__frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: inherit;
}
.rc-index-overview__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 24px;
}
.rc-index-info-card { padding: clamp(24px, 2.4vw, 32px); }
.rc-index-info-card .rc-index-heading { margin-bottom: 18px; }
.rc-index-info-card .rc-index-heading__main { font-size: clamp(1.5rem, 2vw, 1.72rem); }
.rc-index-info-card .rc-index-heading__sub { font-size: 1rem; }
.rc-index-info-card__content {
  color: var(--rc-text-secondary);
  font-size: clamp(1.12rem, 1.35vw, 1.24rem);
  line-height: 2.05;
  text-align: left;
}

.rc-index .events-row,
.rc-index .allnews-row,
.rc-index .rc-toolbar {
  width: 100% !important;
}

.rc-index .events-text-harder h4,
.rc-index .allnews-text-harder h4 {
  font-size: clamp(1.2rem, 1.5vw, 1.34rem) !important;
  line-height: 1.45 !important;
}

.rc-index .events-text,
.rc-index .allnews-text {
  font-size: clamp(1.08rem, 1.25vw, 1.16rem) !important;
  line-height: 1.75 !important;
}

.rc-index .events-time {
  font-size: clamp(1rem, 1.1vw, 1.08rem) !important;
  line-height: 1.7 !important;
}

.rc-index .events-botton .btn,
.rc-index .allnews-botton .btn {
  min-height: 52px;
  font-size: 1.08rem !important;
}

.rc-index .rc-toolbar__title { font-size: 1.3rem !important; }
.rc-index .rc-counter { font-size: 1.02rem !important; }
.rc-index .rc-input,
.rc-index .rc-select { min-height: 48px; font-size: 1.06rem !important; }
.rc-index .pagination .page-btn { min-width: 46px !important; min-height: 46px !important; font-size: 1.06rem !important; }

.rc-index-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rc-border-gold);
  border-radius: var(--rc-radius-lg);
  background: #000;
  box-shadow: var(--rc-shadow-lg);
}

.rc-index-video__frame { width: 100% !important; height: 100% !important; display: block; border: 0; }

@media (max-width: 1080px) {
  .rc-index-header__inner { min-height: 68px; }
  .rc-index-brand { width: 58px; height: 58px; flex-basis: 58px; }
  .rc-index-brand__image { width: 52px !important; height: 52px !important; }
  .rc-index-menu-toggle { display: grid; }
  .rc-index-navigation {
    position: absolute;
    top: 100%;
    right: 20px;
    left: 20px;
    max-height: calc(100dvh - 88px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--rc-border-gold);
    border-radius: 0 0 var(--rc-radius-md) var(--rc-radius-md);
    background: rgba(8, 8, 8, .98);
    box-shadow: var(--rc-shadow-lg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--rc-transition), visibility var(--rc-transition), transform var(--rc-transition);
  }
  .rc-index-header.is-menu-open .rc-index-navigation { opacity: 1; visibility: visible; transform: translateY(0); }
  .rc-index-navigation a { min-width: 0; height: 56px; border: 1px solid var(--rc-border); border-radius: 8px; }
  .rc-index-navigation__label { font-size: 1rem; white-space: normal; text-align: center; }
  .rc-index-overview__grid { grid-template-columns: 1fr; }
  .rc-index-overview__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}

@media (max-width: 700px) {
  .rc-index-container,
  .rc-index-header__inner { width: min(calc(100% - 24px), 1240px); }
  .rc-index-hero__inner { min-height: 540px; gap: 22px; }
  .rc-index-hero__logo { width: min(470px, 88vw) !important; height: min(470px, 58vh) !important; }
  .rc-index-actions { grid-template-columns: 1fr; width: min(100%, 380px); gap: 14px; }
  .rc-index-actions a { min-height: 68px; padding: 14px 22px; }
  .rc-index-overview__cards { grid-template-columns: 1fr; }
  .rc-index-slider { min-height: 0; }
  .rc-index-slider__frame { min-height: 0; }
}

@media (max-width: 430px) {
  .rc-index { font-size: 16px; }
  .rc-index-navigation { grid-template-columns: 1fr; right: 12px; left: 12px; }
  .rc-index-navigation a { height: 54px; }
  .rc-index-hero__inner { min-height: 500px; padding-block: 34px 46px; }
  .rc-index-info-card { padding: 18px; }
  .rc-index-info-card__content { font-size: 1.08rem; line-height: 1.9; }
  .rc-index-section { padding-block: 46px; }
  .rc-index-slider { min-height: 0; padding: 0; }
  .rc-index-slider__frame { min-height: 0; }
}

.rc-home-toggle {
  display: none;
  position: sticky;
  top: 10px;
  z-index: 1200;
  margin: 10px 12px 0 auto;
}

.header_table { width: 100% !important; max-width: 100%; overflow: hidden !important; }
.header_table > table, .header_table .warpper-table { width: min(100%, 1200px) !important; max-width: 1200px; margin-inline: auto; }
.header_table table { max-width: 100%; }
.header_table td { max-width: 100%; }
.btn-center, .btn-footer { transition: transform var(--rc-transition), filter var(--rc-transition) !important; }
.btn-center:hover, .btn-footer:hover { transform: translateY(-3px); filter: drop-shadow(0 7px 14px rgba(210, 166, 74, .38)) brightness(1.08) !important; }

.events-row, .allnews-row {
  width: min(calc(100% - 32px), 1180px) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: stretch;
}
.events-col, .allnews-col { width: auto !important; float: none !important; margin: 0 !important; }
.events-box, .allnews-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-md) !important;
  background: rgba(18, 18, 18, .95) !important;
  box-shadow: var(--rc-shadow-sm) !important;
  transition: transform var(--rc-transition), border-color var(--rc-transition), box-shadow var(--rc-transition);
}
.events-box:hover, .allnews-box:hover { transform: translateY(-4px); border-color: var(--rc-border-gold) !important; box-shadow: var(--rc-shadow-lg) !important; }
.boximg-shine, .boximg-shine2 { overflow: hidden; background: var(--rc-bg-secondary) !important; }
.boximg-shine figure, .boximg-shine2 figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.boximg-shine img, .boximg-shine2 img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 300ms ease; }
.events-box:hover img, .allnews-box:hover img { transform: scale(1.035); }
.events-text-harder, .allnews-text-harder { padding: 16px 16px 0 !important; }
.events-text-harder h4, .allnews-text-harder h4 { margin: 0 !important; color: var(--rc-gold-light) !important; }
.events-text, .allnews-text { padding-inline: 16px !important; color: var(--rc-text-secondary) !important; }
.events-time { margin-top: auto; padding: 8px 16px !important; color: var(--rc-text-muted) !important; }
.events-botton, .allnews-botton { padding: 10px 16px 18px !important; }
.events-botton .btn, .allnews-botton .btn { width: 100% !important; }
.rc-toolbar {
  width: min(100%, 1180px) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 24px !important;
  padding: 16px 18px;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-md);
  background: rgba(16, 16, 16, .94) !important;
  box-shadow: var(--rc-shadow-sm);
}
.rc-toolbar__actions { display: flex; align-items: center; gap: 10px; }
.rc-toolbar__title { color: var(--rc-gold-light) !important; }
.rc-counter { color: var(--rc-text-muted); font-size: .92rem; }
.rc-input, .rc-select {
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-sm) !important;
  color: var(--rc-text-main) !important;
  background: rgba(0, 0, 0, .35) !important;
}
.status-event { color: var(--rc-gold-light) !important; border: 1px solid var(--rc-border-gold); background: var(--rc-gold-soft) !important; }
.rc-backtop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rc-border-gold) !important;
  border-radius: 50%;
  color: #100c04 !important;
  background: var(--rc-gold) !important;
  box-shadow: var(--rc-shadow-sm);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--rc-transition), transform var(--rc-transition);
}
.rc-backtop.is-show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Legacy content pages */
.header_img { max-width: 100%; }
.header_logo { max-width: 100%; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
.header_table > table > tbody > tr > td { color: var(--rc-text-main); }
.rules-container {
  width: min(calc(100% - 32px), 980px) !important;
  max-width: 980px !important;
  margin: 24px auto !important;
  padding: clamp(18px, 3vw, 30px) !important;
  line-height: 1.75 !important;
}
.rules-container h2, .rules-container h3 { color: var(--rc-gold-light) !important; }
.rules-list { color: var(--rc-text-secondary) !important; }
.rules-list li {
  margin-bottom: 10px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-left: 3px solid var(--rc-gold-dark) !important;
  border-radius: var(--rc-radius-sm) !important;
  background: rgba(255, 255, 255, .025) !important;
}
.rules-list li strong, .rules-note { color: var(--rc-gold-light) !important; }
.box-sv { overflow: hidden; }
.box-sv-body { padding: clamp(16px, 2.5vw, 26px) !important; }
.box-text-haeder, .main-header { color: var(--rc-gold-light) !important; }
.line-box { background: linear-gradient(90deg, var(--rc-gold), transparent) !important; }
.ui.label { color: var(--rc-gold-light) !important; border-color: var(--rc-border-gold) !important; background: var(--rc-gold-soft) !important; }
.page_footer { min-height: 0 !important; padding: 28px 16px !important; border-top: 1px solid var(--rc-border) !important; background: rgba(8, 8, 8, .88) !important; }
.footer_container { color: var(--rc-text-muted) !important; line-height: 1.7; }

/* Guide galleries and screenshots */
.shot, .boss img, .rules-container img {
  max-width: 100%;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-sm) !important;
  box-shadow: var(--rc-shadow-sm);
  transition: transform var(--rc-transition), border-color var(--rc-transition), box-shadow var(--rc-transition) !important;
}
.shot:hover, .boss img:hover, .rules-container img:hover { border-color: var(--rc-border-gold) !important; box-shadow: var(--rc-shadow-lg) !important; }
.boss { overflow: hidden; }
.boss__body { padding: 16px !important; }
.boss li { color: var(--rc-text-secondary) !important; }

/* Historical gallery pages */
body > .rules-container.active { display: block; }
body > h2:first-child { width: min(calc(100% - 32px), 980px); margin: clamp(34px, 6vw, 72px) auto 20px; color: var(--rc-gold-light); }
body > .pagination { width: min(calc(100% - 32px), 980px); margin: 28px auto 56px !important; }

/* Scoreboard additions: existing data and theme stay intact. */
.score-card table { min-width: 420px; }
.score-card tbody tr:focus-within { background: var(--rc-gold-soft); }
.status-bar { border-color: var(--rc-border) !important; }

/* Responsive */
@media (max-width: 1024px) {
  .events-row, .allnews-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .navbar_menu .navbar_container { min-width: 125px; }
  .navbar_menu .navbar_container > a { padding-inline: 13px !important; }
}

@media (max-width: 1120px) {
  body { background-attachment: scroll !important; }
  .site-header .nav { min-height: 64px; }
  .site-header .menu {
    position: absolute !important;
    inset: 100% 16px auto !important;
    max-height: calc(100vh - 88px);
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px !important;
    border: 1px solid var(--rc-border-gold) !important;
    border-radius: 0 0 var(--rc-radius-md) var(--rc-radius-md);
    background: rgba(10, 10, 10, .98) !important;
    box-shadow: var(--rc-shadow-lg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) !important;
    transition: opacity var(--rc-transition), visibility var(--rc-transition), transform var(--rc-transition) !important;
  }
  .site-header .menu.open { opacity: 1; visibility: visible; transform: translateY(0) !important; }
  .site-header .menu a { width: 100%; padding: 10px 12px !important; border-radius: 8px; }
  .site-header .menu a::after { display: none; }
  .hamburger { display: grid !important; margin-left: auto; }

  .rc-nav-toggle { display: grid; }
  .navbar_menu nav {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    border: 1px solid var(--rc-border-gold);
    border-top: 0;
    border-radius: 0 0 var(--rc-radius-md) var(--rc-radius-md);
    background: rgba(10, 10, 10, .98);
    box-shadow: var(--rc-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--rc-transition), visibility var(--rc-transition), transform var(--rc-transition);
  }
  .navbar_menu.rc-menu-open nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .navbar_menu nav > ul { min-height: 0; flex-direction: column; align-items: stretch; padding: 10px !important; }
  .navbar_menu .navbar_container { width: 100% !important; min-width: 0; }
  .navbar_menu .navbar_container > a { min-height: 54px; padding: 8px 12px !important; border-radius: 8px !important; }
  .navbar_menu .dropdown_menu { position: static !important; width: 100% !important; border-radius: 8px !important; box-shadow: none; }

  .hero__inner { grid-template-columns: 1fr !important; }
  .hero__art { display: none; }
  .steps, .grid { grid-template-columns: 1fr !important; }
  .toolbar__row { align-items: stretch !important; flex-direction: column; }
  .input { width: 100%; min-width: 0 !important; }
}

/* Homepage card grids: use the complete container and keep related cards close. */
.rc-index .events-row,
.rc-index .allnews-row {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.rc-index .events-box,
.rc-index .allnews-box {
  width: 100% !important;
  max-width: none !important;
  border-radius: 12px !important;
}

/* Keep news/event cards geometrically stable while the pointer moves over them. */
.rc-index .events-box:hover,
.rc-index .allnews-box:hover {
  width: 100% !important;
  transform: none !important;
}

.rc-index .events-box:hover img,
.rc-index .allnews-box:hover img {
  transform: none !important;
}

.rc-index .events-col,
.rc-index .allnews-col,
.rc-index .events-box,
.rc-index .allnews-box {
  min-width: 0;
}

@media (max-width: 900px) {
  .rc-index .events-row,
  .rc-index .allnews-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .rc-index .events-row,
  .rc-index .allnews-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  :root { --rc-section-space: 48px; }
  .events-row, .allnews-row { grid-template-columns: 1fr !important; }
  .rc-home-toggle { display: grid; }
  .rc-home-nav {
    position: fixed !important;
    top: 68px;
    right: 12px;
    left: 12px;
    z-index: 1190;
    display: none !important;
    max-height: calc(100dvh - 84px);
    padding: 10px !important;
    border: 1px solid var(--rc-border-gold);
    border-radius: var(--rc-radius-md);
    background: rgba(10, 10, 10, .98) !important;
    box-shadow: var(--rc-shadow-lg);
    overflow-y: auto;
  }
  .rc-home-nav-open .rc-home-nav { display: table !important; }
  .rc-home-nav tbody, .rc-home-nav tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-home-nav td { display: block !important; width: auto !important; height: auto !important; padding: 3px !important; background: none !important; }
  .rc-home-nav a { display: block; border: 1px solid var(--rc-border); border-radius: 8px; overflow: hidden; }
  .rc-home-nav img { width: 100% !important; height: auto !important; object-fit: contain; }
  .header_table iframe { width: 100% !important; }
  #facebook_right { display: none !important; }
  .cta-row { align-items: stretch; flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 430px) {
  .container { width: min(calc(100% - 24px), var(--rc-container)) !important; }
  .section { padding-block: 42px !important; }
  .card, .step, .rules-container, .box-sv-body { padding: 16px !important; }
  .events-row, .allnews-row, .rc-toolbar { width: calc(100% - 20px) !important; }
  .rc-toolbar, .rc-toolbar__actions { align-items: stretch !important; flex-direction: column; }
  .rc-input, .rc-select { width: 100%; }
  .table th, .table td { padding: 11px 12px !important; }
  .btn-block { width: 100% !important; }
  .rc-home-nav tbody, .rc-home-nav tr { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Typography normalization — readable, modern, and deliberately moderate. */
body {
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.main-header,
.section__title,
.rc-index-heading__main,
.rc-index-heading__sub,
.rc-toolbar__title,
.box-text-haeder {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

p, li, td, th, label, summary,
.lead,
.rules-container,
.rc-card,
.card,
.events-text,
.allnews-text,
.events-time,
.rc-index-info-card__content,
.footer_container {
  font-family: inherit !important;
  font-weight: 400;
}

strong, b { font-weight: 600; }
small, .small, .caption { font-size: .875rem; font-weight: 400; line-height: 1.55; }

.brand,
.menu a,
.navbar_menu .navbar_container > a,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-icon,
.pagination button,
.pagination .page-btn,
.rc-index-navigation__label,
.rc-index-actions a,
.faq summary {
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
}

.step__num,
.status-event,
.badge,
.badges .badge { font-weight: 500 !important; }

.table th,
.ui.table th { font-size: .82rem; font-weight: 600 !important; }

.table td,
.ui.table td { font-size: .96rem; font-weight: 400 !important; }

.rc-index .events-text-harder h4,
.rc-index .allnews-text-harder h4 { font-weight: 600 !important; }

.rc-index .rc-toolbar__title { font-weight: 600 !important; }

@media (max-width: 430px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(1.8rem, 9vw, 2.35rem); }
  h2 { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  h3 { font-size: clamp(1.08rem, 5vw, 1.3rem); }
}