/* ===============================
   Wattanawirot Power Run 2026
   Modern Red + Gray Theme
================================= */

:root{
  --brand: #f11724;
  --brand-2: #ca101c;
  --brand-3: #921019;
  --brand-soft: #fff1f2;
  --brand-ring: rgba(241,23,36,.18);

  --brand-green: var(--brand);
  --brand-green-dark: var(--brand-2);

  --dark: #1f1d22;
  --dark-2: #29272d;
  --steel: #66676a;
  --steel-2: #8a8b90;
  --surface: #f3f3f4;
  --surface-2: #ececef;
  --surface-3: #ffffff;
  --border: #dddde1;

  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;

  --toast-success: #16a34a;
  --toast-warning: #f59e0b;
  --toast-danger:  #ef4444;
  --toast-info:    #334155;

  --bg: #ececef;
  --card: #ffffff;
  --text: #171717;
  --muted: #66676a;
  --shadow: 0 18px 48px rgba(26, 26, 28, .08);
  --shadow-soft: 0 10px 26px rgba(26, 26, 28, .06);
}

html,body{ height:100%; }
body{
  font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(241,23,36,.05), transparent 30%),
    radial-gradient(circle at bottom left, rgba(102,103,106,.04), transparent 24%);
  z-index: -1;
}
.small-muted{ color: var(--muted); }
.hr-soft{ border-color: rgba(102,103,106,.25); }
a{ text-decoration: none; }

/* Buttons */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 0;
  color:#fff;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(241,23,36,.18);
}
.btn-brand:hover{
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  color:#fff;
  transform: translateY(-1px);
}
.btn-outline-light,
.btn-outline-dark,
.btn-outline-secondary{
  border-radius: 14px;
}
.btn-outline-dark{
  border-color: rgba(31,29,34,.18);
  color: var(--dark);
  background: rgba(255,255,255,.85);
}
.btn-outline-dark:hover{
  background: var(--dark);
  border-color: var(--dark);
  color:#fff;
}

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--border);
  min-height: 46px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-ring);
}

/* Cards */
.card-glass,
.card-soft{
  background: var(--card);
  border: 1px solid rgba(102,103,106,.12);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-glass:hover,
.card-soft:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(241,23,36,.18);
}
.featured{ overflow:hidden; }
.hero{
  border-radius: 20px;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow);
}

/* Badge */
.badge{
  background: rgba(15, 23, 42, .92);
  color:#fff;
  border-radius: 999px;
  padding: 6px 12px;
}

/* Modal */
.modal-backdrop.show{ opacity: .35; }
.modal-content.modal-card{
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal-card .modal-header{
  background: linear-gradient(135deg, rgba(241,23,36,.08), #ffffff 55%);
  border-bottom: 1px solid rgba(148,163,184,.22);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.modal-card .btn-close{ filter: none; }

/* Toasts */
#toastContainer{ z-index: 1080; }
.toast.app-toast{
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 26px rgba(2,6,23,.16);
}
.toast.app-toast .toast-body{ font-weight: 500; }
.toast-success{ background: var(--toast-success) !important; color:#fff; }
.toast-warning{ background: var(--toast-warning) !important; color:#fff; }
.toast-danger{  background: var(--toast-danger)  !important; color:#fff; }
.toast-info{    background: var(--toast-info)    !important; color:#fff; }

/* Tables */
.table{ color: var(--text); }
.table thead th{ color: rgba(15,23,42,.8); font-weight: 700; }

/* ===== Upload full-screen overlay ===== */
.upload-overlay{
  position:fixed;
  inset:0;
  z-index: 2000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.upload-overlay .upload-card{
  width:min(420px, 100%);
  background:#fff;
  border:1px solid rgba(241,23,36,.12);
  border-radius:18px;
  padding: 22px;
  text-align:center;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.upload-overlay.d-none{ display:none !important; }

/* ===== Topbar (2 ชั้น) ===== */
.topbar{ position: sticky; top:0; z-index: 1030; }
.topbar-main{
  background: linear-gradient(90deg, var(--dark), var(--brand-2));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.topbar-menu{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.brand-mark{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;font-weight:800;
}
.brand-name{ font-weight:800; color:#fff; line-height:1; }
.brand-name span{ opacity:.88; font-weight:600; margin-left:6px; }
.navlinks{ overflow:auto; white-space:nowrap; }
.navlinks a{
  display:inline-block;
  color:#334155;
  text-decoration:none;
  font-weight:700;
  padding:.45rem .75rem;
  border-radius:.85rem;
  transition:.15s ease;
}
.navlinks a:hover{ background: rgba(0,0,0,.06); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  color:#334155;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
}
.chip.active{
  background: rgba(241,23,36,.1);
  border-color: rgba(241,23,36,.2);
  color: var(--brand-2);
}

.page-title{ font-size: clamp(28px, 3vw, 44px); font-weight: 900; }
.section-title{
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 900;
  color: var(--dark);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brand-2);
  font-weight: 800;
  margin-bottom: 8px;
}
.section-eyebrow::before{
  content:"";
  width: 22px;
  height: 2px;
  background: var(--brand);
  border-radius: 999px;
}

/* Home hero */
.home-shell{ position: relative; }
.home-hero{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}
.home-hero__content,
.hero-main{
  border-radius: 30px;
}
.home-hero__content{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(31,29,34,.97), rgba(102,103,106,.94) 58%, rgba(241,23,36,.92));
  color:#fff;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.home-hero__content::before,
.home-hero__content::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
}
.home-hero__content::before{
  width: 220px;
  height: 220px;
  right: -70px;
  top: -70px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.home-hero__content::after{
  width: 300px;
  height: 300px;
  bottom: -180px;
  left: -80px;
  background: radial-gradient(circle, rgba(241,23,36,.22), transparent 72%);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.hero-kicker::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius:50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12);
}
.hero-description{
  max-width: 640px;
  color: rgba(255,255,255,.88);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
}
.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.hero-stat-card{
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 16px 18px;
  backdrop-filter: blur(10px);
}
.hero-stat-card__label{
  display:block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}
.hero-stat-card__value{
  display:block;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.hero-cta .btn{ min-width: 180px; }

.hero-main{
  width:100%;
  max-width:100%;
  margin:auto;
  overflow:hidden;
  position:relative;
  background: linear-gradient(145deg, #ffffff, #f5f5f7);
  box-shadow: var(--shadow);
  border: 1px solid rgba(102,103,106,.12);
}
.hero-main::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(17,24,39,.03));
  pointer-events:none;
}
.hero-main img{
  width:100%;
  height:100%;
  display:block;
  max-width:100%;
  object-fit: cover;
}

/* Featured slider */
.featured-modern{
  padding: 0;
  overflow:hidden;
  background: #f0f0f2;
}
.featured-section{
  margin-top: 6px;
}

.featured-slide{
  display:block;
  position: relative;
  min-height: 420px;
}
.featured-media{
  position:relative;
  min-height: 520px;
  overflow:hidden;
}
.featured-media__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(24,24,27,.03), rgba(24,24,27,.08));
}
.feat-img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:520px;
}
.featured-code,
.badge-code{
  position:absolute;
  top:16px;
  right:16px;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(17,24,39,.9);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing: .03em;
  z-index: 2;
}
.featured-content{
  display:none;
}
.featured-content__inner{
  width:100%;
  padding: clamp(28px, 3vw, 40px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-tag{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(241,23,36,.08);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.feat-title{
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  color: var(--dark);
}
.feat-subtitle{
  margin-top: 10px;
  color: var(--steel);
  line-height: 1.65;
}
.feat-meta{ color:#475569; display:grid; gap:8px; }
.feat-meta i{ color: var(--brand-2); margin-right:8px; }
.featured-meta-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.featured-meta-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(102,103,106,.12);
  background: rgba(255,255,255,.8);
}
.featured-meta-item i{
  color: var(--brand-2);
  font-size: 18px;
  line-height: 1.2;
}
.featured-meta-item span{
  display:block;
  color: var(--steel-2);
  font-size: 12px;
  margin-bottom: 3px;
}
.featured-meta-item strong{
  display:block;
  color: var(--dark);
  font-size: 14px;
  line-height: 1.45;
}
.featured-chip-row,
.event-chip-row,
.card-action-group,
.featured-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 34px;
  padding:6px 12px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing: .02em;
}
.pill-light{
  background: rgba(241,23,36,.08);
  color: var(--brand-2);
}
.featured-actions .btn{
  min-width: 160px;
}
.vip-panel{
  display:grid;
  gap: 12px;
}
.vip-panel__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(31,29,34,.97), rgba(74,74,78,.94));
  color:#fff;
  box-shadow: 0 10px 24px rgba(31,29,34,.12);
}
.vip-panel__item i{ color: #ffd166; margin-top: 3px; }

.modern-indicators{
  margin-bottom: 18px;
  gap: 8px;
}
.modern-indicators [data-bs-target]{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
}
.modern-indicators .active{
  width: 34px;
  background: var(--brand);
}
.carousel-nav-btn,
.carousel-control-prev,
.carousel-control-next{
  width:46px;
  height:46px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(31,29,34,.36);
  border-radius:50%;
  opacity: 1;
}
.carousel-control-prev{ left: 18px; }
.carousel-control-next{ right: 18px; }
.carousel-control-prev:hover,
.carousel-control-next:hover{ background: rgba(241,23,36,.82); }

/* Event grid */
.event-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.event-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.event-thumb{
  position:relative;
  height: 220px;
  background:#f1f5f9;
  overflow:hidden;
}
.event-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .45s ease;
}
.event-card:hover .event-thumb img{ transform: scale(1.04); }
.event-thumb__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.16) 100%);
}
.event-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding: 20px;
}
.event-card__title{
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--dark);
  min-height: 3.2rem;
}
.event-meta-list{
  display:grid;
  gap: 10px;
}
.event-meta-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color: var(--steel);
  line-height: 1.55;
  font-size: 14px;
}
.event-meta-row i{
  color: var(--brand-2);
  margin-top: 2px;
}
.event-card__footer{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.price-block{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.price-label{
  font-size: 12px;
  color: var(--steel-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.price{
  font-weight:900;
  color:var(--brand-2);
  font-size: 1.35rem;
  line-height: 1;
}
.line-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.event-card--vip .event-card__body{
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
}
.event-card--vip .event-card__title{
  color: var(--brand-3);
}
.event-card--shop .event-card__body{
  background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
}
.vip-meta-list .event-meta-row i{ color: #d49b11; }

.admin-toolbar{ border: 1px solid rgba(255,255,255,.08); }
.btn-admin-dashboard{
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-dashboard:hover{ background: #1e40af; border-color: #1e40af; color: #fff; }
.btn-admin-excel{
  background: #059641;
  border: 1px solid #059641;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-excel:hover{ background: #04783a; border-color: #04782b; color: #fff; }
.btn-admin-approved{
  background: #059669;
  border: 1px solid #059669;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-approved:hover{ background: #047857; border-color: #047857; color: #fff; }
.btn-admin-logout{
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-logout:hover{ background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-primary{ background:#2563eb; border-color:#2563eb; font-weight:600; }
.btn-primary:hover{ background:#1d4ed8; border-color:#1d4ed8; }
.btn-secondary{ background:#374151; border-color:#374151; color:#fff; }
.btn-secondary:hover{ background:#1f2937; }

.power-title{
  text-transform: uppercase;
  text-align: left;
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #ffffff 0%, #f4f4f4 30%, #ff8b93 64%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1199.98px){
  .event-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-slide{ display:block; }
  .featured-media,
  .feat-img{ min-height: 400px; }
}

@media (max-width:992px){
  .home-hero{
    grid-template-columns: 1fr;
  }
  .hero-main{
    min-height: 260px;
    border-radius: 22px;
  }
  .hero-main img{ height: 100%; }
  .featured-meta-grid{ grid-template-columns: 1fr; }
}

@media (max-width:767.98px){
  .section-head{ align-items:flex-start; }
  .hero-stats{ grid-template-columns: 1fr; }
  .event-grid{ grid-template-columns: 1fr; }
  .featured-content__inner,
  .home-hero__content,
  .event-card__body{ padding: 20px; }
  .feat-title{ font-size: 1.85rem; }
  .event-thumb{ height: 200px; }
}

@media (max-width:576px){
  .hero-main{ border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
  .hero-main img{ width:100%; height:auto; }
  .carousel-nav-btn,
  .carousel-control-prev,
  .carousel-control-next{
    width: 40px;
    height: 40px;
  }
  .carousel-control-prev{ left: 10px; }
  .carousel-control-next{ right: 10px; }
  .featured-code,
  .badge-code{
    top: 12px;
    right: 12px;
    padding: 7px 12px;
  }
  .power-title{ font-size: clamp(34px, 11vw, 52px); }
}

/* ===== Requested tweak: image-only featured slider + lighter gray bg ===== */
body, .topbar-menu, .subnav {
  background-color: #ececef;
}
.home-shell, .event-section, .featured-section {
  background: transparent;
}
.featured.card-soft, .featured-modern.card-soft {
  border-radius: 28px;
  background: #f2f2f3;
}
.featured-slide--vip .featured-content,
.featured-slide--shop .featured-content {
  display: none !important;
}
.featured-slide .featured-media {
  width: 100%;
}
.featured-slide .featured-code {
  top: 18px;
  right: 18px;
}
@media (max-width: 767.98px){
  .featured-media, .feat-img {
    min-height: 260px;
  }
}


/* ===== Hero title only v3 ===== */
.hero-title-only{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 28px;
}
.hero-title-only__inner{
  width: min(100%, 1120px);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  border-radius: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* background: linear-gradient(135deg, rgba(55,55,60,.96) 0%, rgba(110,110,116,.94) 48%, rgba(235,37,52,.88) 100%);
  box-shadow: 0 20px 48px rgba(35, 35, 40, .14);
  border: 1px solid rgba(255,255,255,.18); */
}
.hero-title-only__inner::before,
.hero-title-only__inner::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
}
.hero-title-only__inner::before{
  width: 280px;
  height: 280px;
  top: -120px;
  left: -90px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 72%);
}
.hero-title-only__inner::after{
  width: 320px;
  height: 320px;
  right: -110px;
  bottom: -150px;
  /* background: radial-gradient(circle, rgba(255,50,68,.25), transparent 70%); */
}
.hero-title-only__kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-title-only__title{
  margin: 0;
  font-size: clamp(34px, 5.8vw, 72px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #ed1a23 0%, #b92229 20%, #626365 52%, #8e8e8f 78%, #acaaaa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 767.98px){
  .hero-title-only__inner{
    border-radius: 22px;
    padding: 28px 18px;
  }
  .hero-title-only__title{
    font-size: clamp(28px, 8vw, 44px);
  }
}

/* =========================================================
   SATIT-MAECHAEM TRAIL 2026
   Requested background enhancements
   bg002.jpg = decorative strip under menu
   bg001.jpg = race categories background
   ========================================================= */


.race-section-bg{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw);
  margin-right: calc(-50vw);
  margin-top: 14px;
  margin-bottom: 0;
  padding: clamp(30px, 3vw, 48px) clamp(18px, 4vw, 42px);
  border-radius: 0;
  background:
    linear-gradient(90deg,
      rgba(11,11,13,.90) 0%,
      rgba(18,18,21,.78) 44%,
      rgba(26,26,30,.64) 100%),
    url('../img/bg001.jpg') center center / cover no-repeat;
  box-shadow: none;
}

.race-section-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(241,23,36,.18), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.20));
}

.race-section-bg .section-head{
  position: relative;
  z-index: 1;
  margin-bottom: 24px !important;
  width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.race-section-bg .section-eyebrow{
  color: rgba(255,255,255,.72);
}

.race-section-bg .section-eyebrow::before{
  background: var(--brand);
  box-shadow: 0 0 16px rgba(241,23,36,.42);
}

.race-section-bg .section-title{
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.28);
}

.race-section-bg .event-grid{
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  margin: 0 auto;
}

.race-section-bg .event-card{
  background: rgba(255,255,255,.97);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.race-section-bg .event-card:hover{
  border-color: rgba(241,23,36,.30);
  box-shadow: 0 22px 46px rgba(0,0,0,.28);
}

.menu-race-strip + .home-shell{
  padding-top: clamp(18px, 2vw, 28px) !important;
}

@media (max-width: 991.98px){
  .menu-race-strip{
    height: 82px;
    background-size: cover;
  }

  .race-section-bg{
    padding: 28px 18px;
    background-position: 58% center;
  }
}

@media (max-width: 767.98px){
  .menu-race-strip{
    height: 64px;
  }

  .race-section-bg{
    padding: 24px 14px;
    background-position: 62% center;
  }

  .race-section-bg .section-head{
    margin-bottom: 16px !important;
  }

  .race-section-bg .section-title{
    font-size: clamp(24px, 7vw, 32px);
  }
}


.footer-bg{
  width: 100%;
  min-height: 110px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      rgba(120, 0, 8, .08),
      rgba(120, 0, 8, .08)
    ),
    url('../img/bg002.jpg') center center / auto 100% repeat-x;

  border-top: 1px solid rgba(120, 0, 8, .18);
}

.footer-bg .small-muted{
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

/* ===== Remove gap between race section and footer =====
   home-shell เดิมมี py-4 และ outer <main> มี py-4 อีกชั้น
   ทำให้เกิดช่องว่างประมาณ 48px ก่อน footer
*/
.home-shell{
  padding-bottom: 0 !important;
  margin-bottom: -1.5rem;
}

/* ให้ section ระยะการแข่งขันชน footer ต่อเนื่อง */
.race-section-bg{
  margin-bottom: 0 !important;
}

/* =========================================================
   Race Route Maps
   map5k.jpg / map10k.jpg / map21k.jpg
   ========================================================= */
.race-map-section{
  position: relative;
  width: min(1720px, calc(100vw - 28px));
  max-width: none;
  left: 50%;
  transform: translateX(-50%);
  margin: 4px 0 42px;
}

.race-map-heading{
  width: min(1540px, calc(100% - 40px));
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.race-map-title{
  margin: 0;
  color: var(--dark);
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.15;
  font-weight: 900;
}

.race-map-subtitle{
  color: var(--steel);
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 4px;
}

.race-map-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(31,29,34,.10);
  background: #111;
  box-shadow: 0 22px 50px rgba(26,26,28,.14);
}

.race-map-item{
  position: relative;
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f4;
  border-right: 1px solid rgba(255,255,255,.26);
}

.race-map-item:last-child{
  border-right: 0;
}

.race-map-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease, filter .45s ease;
}

.race-map-item::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 54%, rgba(12,12,15,.13) 72%, rgba(12,12,15,.72) 100%);
}

.race-map-label{
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.race-map-km{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(202,16,28,.28);
}

.race-map-item:hover img{
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 1199.98px){
  .race-map-section{
    width: calc(100vw - 24px);
  }

  .race-map-heading{
    width: calc(100% - 20px);
  }

  .race-map-item{
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767.98px){
  .race-map-section{
    width: 100vw;
    margin-bottom: 28px;
  }

  .race-map-heading{
    width: calc(100% - 28px);
    margin-bottom: 12px;
  }

  .race-map-subtitle{
    width: 100%;
  }

  .race-map-strip{
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    scrollbar-width: thin;
  }

  .race-map-item{
    flex: 0 0 86vw;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }

  .race-map-label{
    left: 14px;
    bottom: 12px;
  }
}
/* ===== Race map refinement: centered title + original image ratio ===== */
.race-map-heading--center{
  justify-content: center;
  text-align: center;
}

.race-map-heading__inner{
  width: 100%;
  text-align: center;
}

.race-map-heading--center .section-eyebrow{
  justify-content: center;
}

.race-map-heading--center .race-map-subtitle{
  margin-top: 8px;
  padding-bottom: 0;
}

/* Show each route map in its full original proportions; do not crop */
.race-map-strip{
  align-items: start;
  background: transparent;
}

.race-map-item{
  aspect-ratio: auto;
  background: #fff;
}

.race-map-item img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 1199.98px){
  .race-map-item{
    aspect-ratio: auto;
  }
}

@media (max-width: 767.98px){
  .race-map-item{
    aspect-ratio: auto;
  }

  .race-map-item img{
    width: 100%;
    height: auto;
  }
}
/* =========================================================
   Language switcher
   Scoped only to TH / EN buttons in the topbar
   ========================================================= */
.language-switcher{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  margin-left:4px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(18,18,22,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 22px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.language-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  min-height:34px;
  padding:5px 10px 5px 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.language-btn__flag{
  min-width:26px;
  height:24px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}

.language-btn:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  transform:translateY(-1px);
}

.language-btn:active{
  transform:translateY(0);
}

.language-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:2px;
}

.language-btn--th:hover .language-btn__flag,
.language-btn--th.is-active .language-btn__flag{
  background:linear-gradient(135deg, #f11724, #ca101c);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 5px 14px rgba(202,16,28,.30);
}

.language-btn--en:hover .language-btn__flag,
.language-btn--en.is-active .language-btn__flag{
  background:linear-gradient(135deg, #4b5563, #1f2937);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 5px 14px rgba(17,24,39,.28);
}

.language-btn.is-active{
  background:#fff;
  color:#1f1d22;
  box-shadow:0 5px 14px rgba(0,0,0,.12);
}

@media (max-width: 991.98px){
  .language-switcher{
    gap:2px;
    padding:3px;
  }

  .language-btn{
    min-height:32px;
    padding:4px 7px 4px 5px;
  }

  .language-btn__flag{
    min-width:24px;
    height:22px;
  }

  .language-btn__text{
    display:none;
  }
}

@media (max-width: 575.98px){
  .language-switcher{
    margin-left:0;
  }

  .language-btn{
    min-width:34px;
    padding:4px;
  }
}