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

:root{
  --ink:#06343c;
  --muted:#4d6a73;
  --teal-900:#0d3b3b;
  --teal-700:#0f766e;
  --teal-600:#08766e;
  --teal-500:#21b9ae;
  --gold:#d39b19;
  --gold-500:#fbbf24;
  --full:#155e75;
  --disabled:#aabcc1;
  --paper:#ffffff;
  --mist:#edf6f8;
  --line:rgba(7,59,76,.12);
  --shadow:0 22px 60px rgba(7,59,76,.16);
  --soft-shadow:0 12px 32px rgba(7,59,76,.12);
}

*{box-sizing:border-box}
html,body{min-height:100%; overflow-x:hidden}
body{
  margin:0;
  font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(20,184,166,.16), transparent 28rem),
    linear-gradient(180deg,#f7fbfc 0%, var(--mist) 100%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  letter-spacing:0;
}

a{color:inherit}
.container.wide{max-width:1180px}
.narrow{max-width:880px; margin-inline:auto}

/* Navbar */
.navbar{
  width:calc(100% - 64px);
  max-width:1500px;
  min-height:82px;
  margin:16px auto 0;
  padding:10px 18px;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.68);
  border-radius:24px;
  box-shadow:var(--soft-shadow);
  position:relative;
  z-index:20;
}
.navbar .container-fluid{gap:12px}
.navbar-brand{min-width:238px}
.navbar-brand img{filter:none}
.brand-copy{display:flex; flex-direction:column; line-height:1.12; color:var(--ink)}
.brand-copy strong{font-size:.9rem; font-weight:900}
.brand-copy small{font-size:.68rem; font-weight:600; color:#234f55}
.navbar-dark .navbar-toggler{border-color:rgba(7,59,76,.18)}
.navbar-dark .navbar-toggler-icon{filter:invert(1)}
.navbar-dark .navbar-nav{align-items:center; gap:2px}
.navbar-dark .navbar-nav .nav-link{
  color:#173d44;
  min-height:42px;
  padding:.48rem .62rem;
  font-size:.85rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  border-radius:999px;
  position:relative;
  transition:transform .18s ease,color .18s ease,background .18s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color:#109e9a;
  background:rgba(20,184,166,.08);
}
.navbar-dark .navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--teal-700),var(--teal-500));
}
.nav-login{
  color:#fff!important;
  background:linear-gradient(135deg,#0c8f91,#20beb1)!important;
  box-shadow:0 12px 26px rgba(12,143,145,.28);
  padding-inline:1rem!important;
}
.nav-login:hover{transform:translateY(-2px)}

/* Generic hero for inner pages */
.hero,.hero-autofix{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--soft-shadow);
  padding:clamp(1.35rem,2.6vw,2rem);
}
.hero .title,.hero-autofix h1{
  font-weight:900;
  line-height:1.1;
  margin:0 0 .35rem;
  color:var(--ink);
}
.hero p,.hero-autofix p{color:var(--muted); margin:0}

/* Home */
.home-shell{margin-top:-66px}
.home-hero{
  width:100%;
  min-height:690px;
  padding:106px 6vw 22px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(237,246,248,.08) 0%,rgba(13,59,59,.08) 43%,rgba(0,76,73,.82) 100%),
    linear-gradient(120deg,rgba(255,255,255,.08) 0%,rgba(20,184,166,.08) 58%,rgba(13,59,59,.4) 100%),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center top/cover no-repeat;
  border-radius:0 0 40px 40px;
}
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.72) 0 2px,transparent 2px 38px),
    linear-gradient(0deg,rgba(255,255,255,.38) 0 2px,transparent 2px 38px);
  opacity:.14;
  pointer-events:none;
}
.home-hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:96px;
  width:260px;
  height:260px;
  transform:translateX(-15%);
  background:url('../img/su-logo_big-150x150_black.png') center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
.hero-art{
  position:absolute;
  width:340px;
  height:520px;
  border:1px solid rgba(251,191,36,.42);
  transform:skewX(-24deg);
  pointer-events:none;
}
.hero-art-left{left:-190px; bottom:18px; background:rgba(255,255,255,.16)}
.hero-art-right{right:-120px; top:108px; background:rgba(20,184,166,.2)}
.home-hero-content{
  position:relative;
  z-index:4;
  max-width:760px;
  margin-left:clamp(180px,24vw,460px);
  padding-top:0;
  color:#fff;
}
.hero-kicker{
  margin:0;
  color:#fff;
  font-size:clamp(38px,4vw,68px);
  font-weight:800;
  line-height:1.05;
  text-shadow:0 10px 34px rgba(0,0,0,.28);
}
.home-hero h1{
  margin:0;
  font-size:clamp(64px,7vw,118px);
  font-weight:900;
  line-height:.96;
  color:transparent;
  background:linear-gradient(180deg,#fff 20%,#61ddd4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 16px 38px rgba(0,0,0,.28);
  white-space:nowrap;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:10px;
  padding:7px 28px;
  border-radius:999px;
  color:#345254;
  font-weight:800;
  background:linear-gradient(180deg,#f8dd83,#dcb245);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 28px rgba(43,32,2,.18);
}
.hero-subtitle{
  margin:16px 0 0;
  color:#eaffff;
  font-weight:700;
  text-shadow:0 4px 16px rgba(0,0,0,.34);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.btn{min-height:44px; border-radius:14px; font-weight:800}
.btn-primary{
  border:none;
  background:linear-gradient(135deg,#0c8f91,#20beb1);
  box-shadow:0 14px 30px rgba(12,143,145,.3);
}
.btn-primary:hover{transform:translateY(-2px); background:linear-gradient(135deg,#0b7779,#18aaa0)}
.btn-outline-primary{border-color:#0f766e; color:#0f766e}
.btn-outline-primary:hover{background:#0f766e; border-color:#0f766e}
.btn-outline-light{border-color:rgba(255,255,255,.74); color:#fff}
.btn-outline-light:hover{color:#0d3b3b}

.hero-sport-asset{
  display:none;
}

.registration-spotlight{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:112px;
  transform:translateX(-50%);
  width:calc(100% - 48px);
  max-width:980px;
  padding:20px 24px 18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:26px;
  box-shadow:0 20px 60px rgba(0,65,70,.22);
}
.spotlight-main{
  display:grid;
  grid-template-columns:1.25fr .65fr .75fr 1fr;
  gap:18px;
  align-items:center;
}
.spotlight-status,
.spotlight-number{
  min-height:84px;
  display:flex;
  align-items:center;
}
.spotlight-status{
  gap:12px;
  padding-right:16px;
  border-right:1px solid rgba(7,59,76,.14);
}
.status-dot{
  width:14px;
  height:14px;
  min-width:14px;
  border-radius:999px;
  background:#21b9ae;
  box-shadow:0 0 0 0 rgba(33,185,174,.42);
  animation:status-pulse 2.2s ease-out infinite;
}
.status-dot.full{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  background:#0f5f94;
  box-shadow:none;
  animation:none;
}
.status-dot.full::before{
  content:"\F26E";
  font-family:"bootstrap-icons";
  color:#fff;
  font-size:14px;
}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(33,185,174,.42)}
  72%{box-shadow:0 0 0 12px rgba(33,185,174,0)}
  100%{box-shadow:0 0 0 0 rgba(33,185,174,0)}
}
.spotlight-status p,
.spotlight-number p{
  margin:0 0 3px;
  color:#496972;
  font-weight:800;
}
.spotlight-status strong{
  display:block;
  color:#08766e;
  font-size:1.12rem;
  font-weight:900;
  line-height:1.2;
}
.spotlight-status small,
.spotlight-action small{
  display:block;
  margin-top:5px;
  color:#56747c;
  font-weight:600;
  line-height:1.45;
}
.spotlight-number{
  display:block;
  text-align:center;
  padding-inline:14px;
  border-right:1px solid rgba(7,59,76,.14);
}
.spotlight-number strong{
  display:inline-block;
  font-size:clamp(42px,3.8vw,54px);
  line-height:1;
  font-weight:900;
}
.spotlight-number small{
  margin-left:4px;
  color:#183f47;
  font-weight:900;
}
.spotlight-number.registered strong{color:#08766e}
.spotlight-number.remaining strong{color:#d39b19}
.spotlight-action{
  text-align:center;
}
.spotlight-action .btn{
  width:100%;
  min-height:56px;
  border-radius:999px;
  font-size:1.05rem;
  box-shadow:0 16px 36px rgba(15,118,110,.28), inset 0 1px 0 rgba(255,255,255,.38);
}
.spotlight-action .btn.last-seat{
  background:linear-gradient(135deg,var(--gold),var(--gold-500));
  box-shadow:0 0 0 4px rgba(211,155,25,.16),0 18px 38px rgba(211,155,25,.32);
}
.spotlight-action .btn.is-disabled,
.spotlight-action .btn[aria-disabled="true"],
.mobile-registration-bar a.is-disabled{
  pointer-events:none;
  background:linear-gradient(135deg,#9aa9ad,#c9d2d4)!important;
  color:#fff!important;
  box-shadow:none;
}
.team-list-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  color:#0f766e;
  font-weight:800;
  text-decoration:none;
}
.last-seat-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:12px 0 2px;
  padding:7px 14px;
  border-radius:999px;
  color:#8a5d00;
  background:#fff2c7;
  border:1px solid rgba(211,155,25,.26);
  font-weight:900;
  box-shadow:0 10px 22px rgba(211,155,25,.14);
}
.spotlight-progress-row{margin-top:14px}
.spotlight-progress{
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#e8eeee;
}
.spotlight-progress span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0f766e,#21b9ae);
  transition:width .28s ease;
}
.spotlight-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  color:#355a63;
  font-size:.9rem;
  font-weight:700;
}
.event-detail-panel{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:calc(100% - 48px);
  max-width:1120px;
  min-height:72px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(245,255,255,.24);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(0,65,70,.16);
}
.event-detail-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-right:1px solid rgba(255,255,255,.42);
  color:#fff;
}
.event-detail-item:last-child{border-right:0}
.event-detail-item p{margin:0; font-weight:800; color:rgba(255,255,255,.86); font-size:.86rem}
.event-detail-item strong{display:block; margin-top:2px; color:#fff; font-weight:900; font-size:.93rem; line-height:1.25}
.info-icon{
  width:58px;
  min-width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:1.45rem;
  background:linear-gradient(135deg,#0d3b3b,var(--teal-500));
  box-shadow:0 12px 24px rgba(13,59,59,.24);
}

.mobile-registration-bar{display:none}

.content-band{padding:56px 0 26px}
.section-heading{margin-bottom:22px}
.section-heading p{margin:0; color:#0f766e; font-weight:900}
.section-heading h2{margin:2px 0 0; font-weight:900; color:var(--ink)}
.info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.info-tile,.card,.match-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.75);
  border-radius:16px;
  box-shadow:var(--soft-shadow);
}
.info-tile{padding:22px}
.info-tile i{font-size:1.8rem; color:#0f766e}
.info-tile h3{font-size:1.05rem; margin:10px 0 6px; font-weight:900}
.info-tile p{margin:0; color:var(--muted); line-height:1.6}

/* Forms and tables */
.card{border-radius:16px}
.form-control,.form-select{
  border-radius:12px;
  min-height:44px;
  border:1px solid rgba(7,59,76,.18);
}
.form-control:focus,.form-select:focus{
  border-color:var(--teal-500);
  box-shadow:0 0 0 .25rem rgba(33,185,174,.18);
}
.alert{border-radius:14px; border:1px solid rgba(255,255,255,.7)}
.table>:not(caption)>*>*{padding:.88rem}
.schedule-table td,.schedule-table th{vertical-align:middle}
.score{font-size:2rem; font-weight:900; color:#0f766e}
.versus{font-weight:900; color:#7a8f95; padding:0 .45rem}
.match-card{padding:22px}
.team-name{margin:0; font-weight:800}
.match-info{color:var(--muted); font-size:.95rem}

.footer{
  margin-top:auto;
  color:#fff;
  background:rgba(0,73,73,.92);
  border-top:1px solid rgba(255,255,255,.12);
}

@media (max-width:1199px){
  .navbar{width:calc(100% - 32px); min-height:74px}
  .navbar-brand{min-width:auto}
  .navbar-collapse{
    margin-top:14px;
    padding:12px;
    background:rgba(255,255,255,.96);
    border-radius:18px;
  }
  .navbar-dark .navbar-nav{align-items:stretch}
  .home-hero-content{margin-left:5vw}
  .registration-spotlight{
    bottom:118px;
    max-width:920px;
  }
  .spotlight-main{grid-template-columns:1.1fr .7fr .7fr}
  .spotlight-action{grid-column:1 / -1}
  .event-detail-panel{grid-template-columns:repeat(2,1fr)}
  .event-detail-item:nth-child(2){border-right:0}
  .event-detail-item:nth-child(1),
  .event-detail-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.32)}
  .info-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .navbar{
    width:calc(100% - 20px);
    min-height:72px;
    margin-top:10px;
    padding:10px 12px;
    border-radius:18px;
  }
  .navbar-brand img{height:44px}
  .brand-copy strong{font-size:.82rem}
  .brand-copy small{display:none}
  .home-shell{margin-top:-52px}
  .home-hero{
    min-height:auto;
    padding:74px 20px 24px;
    border-radius:0 0 28px 28px;
    background-position:center top;
  }
  .home-hero-content{margin-left:0; padding-top:0}
  .home-hero h1{font-size:clamp(56px,17vw,78px); white-space:normal}
  .hero-kicker{font-size:clamp(32px,11vw,44px)}
  .hero-subtitle{margin-top:12px; max-width:280px}
  .hero-actions{display:none}
  .registration-spotlight{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 8px);
    margin:18px auto 0;
    padding:18px 16px;
    border-radius:22px;
  }
  .spotlight-main{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .spotlight-status{
    grid-column:1 / -1;
    min-height:auto;
    padding:0 0 12px;
    border-right:0;
    border-bottom:1px solid rgba(7,59,76,.12);
  }
  .spotlight-status strong{font-size:1.25rem}
  .spotlight-number{
    border-right:0;
    border-radius:16px;
    background:rgba(237,246,248,.8);
    padding:14px 10px;
  }
  .spotlight-number strong{font-size:clamp(34px,10vw,40px)}
  .spotlight-action{grid-column:1 / -1}
  .spotlight-action .btn{
    min-height:52px;
    width:100%;
  }
  .spotlight-progress-copy{font-size:.82rem}
  .event-detail-panel{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    margin:14px 0 0;
    grid-template-columns:1fr;
    background:rgba(0,73,73,.36);
  }
  .event-detail-item{border-right:0; border-bottom:1px solid rgba(255,255,255,.24)}
  .event-detail-item:last-child{border-bottom:0}
  .mobile-registration-bar{
    position:fixed;
    z-index:60;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px 10px 16px;
    color:#073b4c;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.82);
    border-radius:18px;
    box-shadow:0 18px 42px rgba(0,65,70,.28);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-registration-bar span{
    min-width:0;
    font-weight:900;
  }
  .mobile-registration-bar a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#0f766e,#21b9ae);
    text-decoration:none;
    font-weight:900;
    white-space:nowrap;
  }
  .info-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

/* Theme refresh */
.navbar-dark .navbar-nav .nav-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:74px;
  color:#0d343b;
  font-size:.82rem;
  font-weight:700;
}
.navbar-dark .navbar-nav .nav-link i{
  font-size:1.08rem;
  color:#0d3b3b;
  line-height:1;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color:var(--teal-700);
  background:rgba(33,185,174,.1);
}
.navbar-dark .navbar-nav .nav-link:hover i,
.navbar-dark .navbar-nav .nav-link.active i{color:var(--teal-700)}
.nav-login{
  flex-direction:row!important;
  min-width:auto!important;
  gap:8px!important;
}
.nav-login i{color:#fff!important}

.page-hero-wrap{margin-top:18px!important}
.hero{
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,5vw,68px) clamp(28px,6vw,90px);
  background:
    linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 35%,rgba(255,255,255,.58) 58%,rgba(255,255,255,.18) 100%),
    linear-gradient(180deg,rgba(237,246,248,.08),rgba(15,118,110,.18)),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center/cover no-repeat;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 20px 60px rgba(0,65,70,.16);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 30px 24px auto;
  width:210px;
  height:210px;
  background:url('../img/Su80_green.png') center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
.hero .title{
  max-width:760px;
  color:#06343c;
  font-family:'Prompt','Kanit',sans-serif;
  font-size:clamp(38px,5vw,70px);
  font-weight:900;
  text-shadow:none;
}
.hero .text-uppercase{
  color:var(--teal-700)!important;
  letter-spacing:0!important;
}
.hero p{
  max-width:760px;
  color:#315760;
  font-size:1.08rem;
  font-weight:500;
}

.home-hero{
  background:
    radial-gradient(ellipse at 50% 39%,rgba(0,56,58,.58) 0%,rgba(0,56,58,.34) 28%,rgba(0,56,58,0) 56%),
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(13,59,59,.32) 45%,rgba(0,63,64,.9) 100%),
    linear-gradient(120deg,rgba(255,255,255,.02) 0%,rgba(33,185,174,.08) 58%,rgba(13,59,59,.36) 100%),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center top/cover no-repeat;
}
.hero-kicker,
.home-hero h1{
  font-family:'Prompt','Kanit',sans-serif;
}
.hero-kicker{
  color:#fff;
  text-shadow:0 5px 20px rgba(0,45,48,.72),0 1px 0 rgba(0,0,0,.28);
}
.home-hero h1{
  background:linear-gradient(180deg,#ffffff 0%,#d7fffb 28%,#21b9ae 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 8px 16px rgba(0,45,48,.72));
}
.hero-pill{
  color:#173d44;
  background:linear-gradient(180deg,#ffe589,#d39b19);
}
.hero-subtitle{
  color:#fff;
  text-shadow:0 4px 16px rgba(0,35,38,.75);
}

.registration-spotlight{
  color:#06343c;
  background:rgba(255,255,255,.94);
}
.spotlight-status p,
.spotlight-number p{
  color:#355a63;
  font-weight:700;
}
.spotlight-status strong{color:var(--teal-700)}
.status-dot{background:var(--teal-500)}
.status-dot.full{background:var(--full)}
.spotlight-number.registered strong{color:var(--teal-600)}
.spotlight-number.remaining strong{color:var(--gold)}
.spotlight-number small{color:#123c45}
.spotlight-progress span{background:linear-gradient(90deg,var(--teal-700),var(--teal-500))}
.spotlight-progress-copy{color:#244d56}
.spotlight-action .btn{
  color:#fff;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-500));
}
.spotlight-action .btn.is-disabled,
.spotlight-action .btn[aria-disabled="true"],
.mobile-registration-bar a.is-disabled{
  background:var(--disabled)!important;
}
.last-seat-badge{
  color:#7a4f00;
  background:#fff0c4;
}

.page-shell{padding:8px 0 34px}
.card,
.data-panel,
.summary-card,
.filter-console,
.prize-section{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.82);
  border-radius:22px;
  box-shadow:0 18px 45px rgba(0,65,70,.12);
}
.card{overflow:hidden}
.card h2,
.card h4,
.card h5,
.data-panel h2,
.prize-section h4{
  color:#073b3b;
  font-weight:900;
}
.form-label{
  color:#173d44;
  font-weight:700;
}
.form-control,
.form-select{
  color:#073b4c;
  background-color:#fff;
  border-color:rgba(7,59,76,.18);
}
.form-control::placeholder{color:#7b9298}
.form-text,
.text-muted{color:#5b7480!important}
.alert-info{
  color:#0b4f58;
  background:#d7f5f6;
  border-color:#b6ebec;
}
.alert-success{
  color:#0f5f45;
  background:#daf7ea;
  border-color:#bdeed5;
}
.alert-warning{
  color:#68490b;
  background:#fff0c4;
  border-color:#f6d88b;
}
.btn-primary,
.btn-success{
  color:#fff;
  border:0;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-500));
  box-shadow:0 12px 28px rgba(15,118,110,.28);
}
.btn-primary:hover,
.btn-success:hover{
  background:linear-gradient(135deg,#0b665f,#1aa89e);
}
.btn-outline-primary{
  color:var(--teal-700);
  border-color:rgba(15,118,110,.45);
}
.btn-outline-primary:hover{
  color:#fff;
  background:var(--teal-700);
  border-color:var(--teal-700);
}
.btn-outline-light{
  color:#fff;
  border-color:rgba(255,255,255,.72);
}
.text-primary{color:var(--teal-700)!important}
.prize-amount{color:var(--gold); font-weight:900}

.filter-console{
  padding:22px 24px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(7,59,60,.96),rgba(15,118,110,.9)),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_09 (3).png') center/cover no-repeat;
  box-shadow:0 18px 46px rgba(0,65,70,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.filter-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:1.12rem;
  font-weight:900;
}
.filter-row{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto;
  gap:12px;
}
.filter-console .form-control{
  min-height:52px;
  border:0;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.filter-console .btn{
  min-height:52px;
  border-radius:14px;
  white-space:nowrap;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.summary-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px;
}
.summary-icon{
  width:62px;
  height:62px;
  min-width:62px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  font-size:1.55rem;
  box-shadow:0 13px 28px rgba(0,65,70,.18);
}
.summary-icon.teal{background:linear-gradient(135deg,var(--teal-700),var(--teal-500))}
.summary-icon.gold{background:linear-gradient(135deg,var(--gold),var(--gold-500))}
.summary-card p{
  margin:0 0 2px;
  color:#4d6a73;
  font-weight:700;
}
.summary-card strong{
  color:var(--teal-600);
  font-size:2rem;
  line-height:1;
  font-weight:900;
}
.summary-card strong small{
  font-size:.95rem;
  color:#173d44;
}
.summary-card .summary-status{
  color:var(--full);
  font-size:1.15rem;
}

.data-panel{padding:22px}
.data-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.data-panel-head h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:1.35rem;
}
.data-panel-head h2 i{color:var(--teal-700)}
.data-count{
  padding:6px 13px;
  border-radius:999px;
  color:#0b4f58;
  background:#d7f5f6;
  font-weight:800;
}
.table{
  margin-bottom:0;
  color:#173d44;
}
.table thead th{
  color:#fff;
  background:linear-gradient(135deg,#0d3b3b,var(--teal-700));
  border:0;
  font-weight:800;
  white-space:nowrap;
}
.table thead th:first-child{border-top-left-radius:12px}
.table thead th:last-child{border-top-right-radius:12px}
.table tbody td{
  padding:14px 16px;
  color:#173d44;
  border-color:rgba(7,59,76,.08);
}
.table-hover tbody tr:hover td{background:#f2fbfb}
.name-cell{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.avatar-chip{
  width:36px;
  height:36px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-500));
  font-size:.82rem;
  font-weight:800;
}
.unit-pill{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:6px 11px;
  border-radius:999px;
  color:#0b4f58;
  background:#e6f6f7;
  font-weight:700;
}

@media (max-width:1199px){
  .navbar-dark .navbar-nav .nav-link{
    min-width:0;
    flex-direction:row;
    justify-content:flex-start;
    padding:.7rem .9rem;
  }
  .summary-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  .navbar-dark .navbar-nav .nav-link{
    flex-direction:row;
    gap:9px;
  }
  .page-hero-wrap{
    width:calc(100% - 20px);
    padding:0;
  }
  .hero{
    min-height:220px;
    padding:30px 22px;
    border-radius:22px;
    background-position:center top;
  }
  .hero .title{font-size:clamp(34px,11vw,48px)}
  .hero p{font-size:.98rem}
  .home-hero{
    background:
      radial-gradient(ellipse at 50% 28%,rgba(0,56,58,.66) 0%,rgba(0,56,58,.4) 30%,rgba(0,56,58,.08) 62%),
      linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(13,59,59,.38) 38%,rgba(0,63,64,.9) 100%),
      url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center top/cover no-repeat;
  }
  .filter-console{padding:18px 16px; border-radius:20px}
  .filter-row{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr}
  .summary-card{padding:18px}
  .data-panel{padding:16px}
  .data-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .table tbody td{padding:12px 10px}
}

/* Master design alignment */
:root{
  --color-page-bg:#eef6f5;
  --color-white:#ffffff;
  --color-text-main:#073b43;
  --color-text-dark:#062f36;
  --color-text-muted:#557178;
  --color-primary:#14b8a6;
  --color-primary-dark:#0f766e;
  --color-primary-deep:#075d62;
  --color-primary-light:#5de6da;
  --color-aqua-soft:#ddf9f5;
  --color-gold:#e6b238;
  --color-gold-light:#f5d875;
  --color-gold-dark:#c58b11;
  --color-border:rgba(7,59,67,.10);
  --color-shadow:rgba(7,52,58,.12);
  --gradient-primary:linear-gradient(135deg,#14b8a6 0%,#0f766e 100%);
  --gradient-headline:linear-gradient(180deg,#e4fffc 0%,#a6f9f1 25%,#5ee6da 55%,#19bdb0 100%);
  --gradient-gold:linear-gradient(135deg,#f6dc82 0%,#e6b238 60%,#c98d15 100%);
  --gradient-dark-glass:linear-gradient(135deg,rgba(6,77,79,.96) 0%,rgba(20,139,131,.92) 100%);
}

html{
  font-family:"LINE Seed Sans TH","Noto Sans Thai","Kanit",sans-serif;
}
body{
  font-family:inherit;
  color:var(--color-text-main);
  background:
    radial-gradient(circle at 12% 6%,rgba(93,230,218,.28),transparent 30rem),
    radial-gradient(circle at 88% 20%,rgba(230,178,56,.12),transparent 22rem),
    var(--color-page-bg);
  overflow-x:hidden;
}
body,
p,
span,
a,
button,
input,
select,
textarea,
td,
th{
  line-height:1.55;
  word-break:keep-all;
}
.event-name-nowrap{
  display:inline-block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  max-width:100%;
}
.event-subtitle{
  font-size:clamp(.78rem,1.15vw,1.1rem);
  line-height:1.6;
}

.container:not(.container-fluid),
.container.wide{
  width:min(1320px,calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
}
.narrow{max-width:880px}

.navbar{
  position:sticky;
  top:16px;
  width:calc(100% - 48px);
  max-width:1460px;
  min-height:88px;
  margin:16px auto 0;
  padding:14px 24px;
  background:rgba(255,255,255,.9)!important;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  box-shadow:0 12px 35px rgba(5,50,55,.12);
  z-index:100;
}
.navbar-brand{min-width:280px}
.brand-copy strong{
  color:var(--color-text-main);
  font-size:1rem;
  font-weight:900;
}
.brand-copy small{
  color:var(--color-text-dark);
  font-size:.75rem;
  font-weight:500;
}
.navbar-dark .navbar-nav{gap:4px}
.navbar-dark .navbar-nav .nav-link{
  min-width:76px;
  min-height:52px;
  padding:.48rem .74rem;
  color:var(--color-text-main);
  border-radius:18px;
  font-weight:700;
}
.navbar-dark .navbar-nav .nav-link i{color:var(--color-text-main)}
.navbar-dark .navbar-nav .nav-link:hover{
  color:var(--color-primary-dark);
  background:rgba(20,184,166,.08);
}
.navbar-dark .navbar-nav .nav-link.active{
  color:var(--color-primary-dark);
  background:rgba(20,184,166,.12);
}
.navbar-dark .navbar-nav .nav-link.active::after{
  left:22px;
  right:22px;
  bottom:5px;
  background:var(--gradient-primary);
}
.nav-login{
  min-height:48px!important;
  padding-inline:1.2rem!important;
  color:#fff!important;
  background:var(--gradient-primary)!important;
  box-shadow:0 14px 28px rgba(7,93,98,.24);
}

.home-shell{margin-top:-104px}
.home-hero{
  min-height:760px;
  padding:176px 6vw 28px;
  background:
    linear-gradient(90deg,rgba(3,48,52,.65) 0%,rgba(3,48,52,.38) 42%,rgba(3,48,52,.10) 72%,rgba(3,48,52,.25) 100%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(15,118,110,.12) 42%,rgba(3,48,52,.78) 100%),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center top/cover no-repeat;
}
.home-hero-content{
  max-width:780px;
  margin-left:clamp(120px,16vw,250px);
}
.hero-kicker{
  font-size:clamp(2.5rem,5vw,5rem);
  font-weight:800;
}
.home-hero h1{
  font-size:clamp(4rem,8vw,8rem);
  font-weight:900;
  line-height:.95;
  background:var(--gradient-headline);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 18px 28px rgba(0,43,46,.35));
}
.hero-pill{
  color:var(--color-text-dark);
  font-weight:700;
  background:var(--gradient-gold);
}
.hero-subtitle{
  color:#fff;
  font-weight:600;
  max-width:min(100%,720px);
}

.registration-spotlight{
  max-width:1060px;
  padding:24px 30px;
  background:rgba(255,255,255,.94);
  border-radius:26px;
  box-shadow:0 18px 50px rgba(5,50,55,.18);
}
.spotlight-status strong{color:var(--color-primary-dark)}
.status-dot{background:var(--color-primary)}
.status-dot.full{background:var(--full)}
.spotlight-number strong{font-size:clamp(2.5rem,4vw,4rem)}
.spotlight-number.registered strong{color:#08766e}
.spotlight-number.remaining strong{color:#d39b19}
.spotlight-action .btn,
.btn-primary,
.btn-success{
  min-height:48px;
  border-radius:999px;
  font-weight:700;
  background:var(--gradient-primary)!important;
  color:#fff!important;
}
.spotlight-action .btn.is-disabled,
.spotlight-action .btn[aria-disabled="true"],
.mobile-registration-bar a.is-disabled,
.btn:disabled{
  background:#aabcc1!important;
  cursor:not-allowed;
  opacity:.92;
}
.spotlight-progress span,
.mobile-registration-bar a{background:linear-gradient(90deg,#0f766e,#21b9ae)}

.event-detail-panel{
  max-width:1160px;
  min-height:88px;
  background:rgba(255,255,255,.22);
  border-radius:24px;
}
.event-detail-item p{color:rgba(255,255,255,.84)}
.event-detail-item strong{line-height:1.35}
.info-icon,
.summary-icon.teal{background:var(--gradient-primary)}
.summary-icon.gold{background:var(--gradient-gold)}

.page-shell{padding:8px 0 42px}
.page-hero-wrap{margin-top:22px!important}
.page-hero{
  position:relative;
  min-height:300px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:clamp(34px,5vw,70px) clamp(28px,6vw,92px);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.46) 68%,rgba(255,255,255,.08) 100%),
    url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 20px 55px rgba(7,52,58,.12);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(221,249,245,.34),rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.page-hero::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:16px;
  width:230px;
  height:230px;
  background:url('../img/Su80_green.png') center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
.page-hero-copy{
  position:relative;
  z-index:1;
  max-width:800px;
}
.page-hero-eyebrow{
  margin:0 0 5px;
  color:var(--color-primary-dark);
  font-weight:800;
}
.page-hero-title{
  margin:0;
  color:var(--color-text-main);
  font-family:"LINE Seed Sans TH","Noto Sans Thai","Kanit",sans-serif;
  font-size:clamp(2.4rem,5vw,4.6rem);
  line-height:1.12;
  font-weight:900;
}
.page-hero-desc{
  margin:12px 0 0;
  color:#46666c;
  font-size:clamp(.95rem,1.5vw,1.2rem);
  font-weight:500;
}

.filter-console{
  border-radius:24px;
  background:var(--gradient-dark-glass);
}
.filter-row{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(132px,.72fr)) auto auto;
  align-items:end;
}
.filter-console .form-control,
.filter-console .form-select{
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.35);
}
.filter-console .form-select{
  color:#fff;
  background-color:rgba(255,255,255,.14);
  background-image:none;
}
.filter-console .form-select option{color:var(--color-text-main)}
.filter-console .btn{height:56px}

.card,
.data-panel,
.summary-card,
.filter-console,
.prize-section,
.info-tile,
.match-card{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(7,52,58,.10);
}
.data-panel{padding:24px}
.summary-card strong{color:#08766e}
.summary-card:nth-child(2) strong,
.summary-card:nth-child(4) strong{color:#d39b19}
.summary-status{color:var(--color-primary-deep)!important}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}
.status-chip.confirmed{
  color:#0f766e;
  background:#ddf9f5;
  border:1px solid rgba(20,184,166,.24);
}
.status-chip.pending{
  color:#946300;
  background:#fff2c8;
  border:1px solid rgba(230,178,56,.28);
}
.status-chip.cancelled{
  color:#b42318;
  background:#fff1f0;
  border:1px solid rgba(244,67,54,.18);
}
.icon-action{
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border:0;
  border-radius:12px;
  color:var(--color-primary-deep);
  background:#eef9f8;
}
.mobile-card-list{display:none}
.empty-state{
  padding:42px 22px;
  text-align:center;
  color:var(--color-text-muted);
}
.empty-state-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:24px;
  color:#fff;
  font-size:1.8rem;
  background:var(--gradient-primary);
  box-shadow:0 15px 32px rgba(7,93,98,.18);
}
.empty-state h3{
  margin:0 0 6px;
  color:var(--color-text-main);
  font-weight:900;
}
.empty-state p{margin:0}

.date-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 22px;
}
.date-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 15px;
  border-radius:999px;
  color:var(--color-primary-deep);
  background:#effafa;
  font-weight:800;
}
.date-tab.active{
  color:#fff;
  background:var(--gradient-primary);
}
.date-tab.gold{
  color:var(--color-text-dark);
  background:linear-gradient(135deg,#fff5d6,#f5d875);
}
.timeline-list{
  display:grid;
  gap:12px;
}
.timeline-match{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  align-items:center;
  gap:16px;
  padding:18px;
  border:1px solid var(--color-border);
  border-radius:20px;
  background:#fff;
}
.timeline-date,
.timeline-meta{
  display:grid;
  gap:4px;
  color:var(--color-text-muted);
  font-weight:600;
}
.timeline-date i,
.timeline-meta i{color:var(--color-primary-dark)}
.timeline-date strong{color:var(--color-text-main)}
.timeline-versus{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  text-align:center;
  font-weight:900;
}
.timeline-versus span{
  min-width:72px;
  padding:8px 13px;
  border-radius:999px;
  color:var(--color-primary-deep);
  background:#e8f7f6;
}
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.contact-form textarea{resize:vertical}

@media (max-width:1199px){
  .navbar{width:calc(100% - 32px); padding:12px 16px}
  .navbar-brand{min-width:auto}
  .filter-row{grid-template-columns:1fr 1fr}
  .timeline-match{grid-template-columns:1fr}
}

@media (max-width:767px){
  .container:not(.container-fluid),
  .container.wide{
    width:calc(100% - 32px);
  }
  .navbar{
    top:10px;
    width:calc(100% - 24px);
    min-height:76px;
    margin-top:10px;
    border-radius:22px;
  }
  .navbar-collapse{
    max-height:calc(100vh - 110px);
    overflow:auto;
  }
  .home-shell{margin-top:-86px}
  .home-hero{
    min-height:auto;
    padding:112px 20px 24px;
    background:
      linear-gradient(180deg,rgba(3,48,52,.28) 0%,rgba(3,48,52,.28) 48%,rgba(3,48,52,.72) 100%),
      url('../img/ChatGPT Image 2 ส.ค. 2569 01_55_07 (1).png') center top/cover no-repeat;
  }
  .home-hero-content{margin-left:0}
  .home-hero h1{
    font-size:clamp(3.4rem,16vw,5rem);
    white-space:nowrap;
  }
  .hero-kicker{font-size:clamp(2.1rem,10vw,3.2rem)}
  .event-subtitle{font-size:clamp(.72rem,3vw,.9rem)}
  .registration-spotlight{
    width:100%;
    margin-top:18px;
    padding:18px 16px;
  }
  .event-detail-panel{border-radius:22px}
  .page-hero{
    min-height:230px;
    padding:30px 22px;
  }
  .page-hero-title{font-size:clamp(2.1rem,10vw,3.2rem)}
  .page-hero-title .event-name-nowrap{
    font-size:clamp(1.05rem,4.8vw,1.45rem);
    line-height:1.45;
    vertical-align:baseline;
  }
  .filter-row{grid-template-columns:1fr}
  .summary-grid{gap:12px}
  .team-table-wrap,
  .participant-table{
    display:none!important;
  }
  .mobile-card-list{
    display:grid;
    gap:12px;
  }
  .list-mobile-card{
    padding:16px;
    border:1px solid var(--color-border);
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 28px rgba(7,52,58,.08);
  }
  .list-mobile-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  .list-mobile-head h3{
    margin:0;
    color:var(--color-text-main);
    font-size:1.04rem;
    font-weight:900;
  }
  .list-mobile-head p{
    margin:2px 0 0;
    color:var(--color-text-muted);
  }
  .list-mobile-meta{
    display:grid;
    gap:8px;
    color:var(--color-text-muted);
    font-size:.94rem;
  }
}

@media (max-width:480px){
  .event-name-nowrap{
    white-space:nowrap;
    word-break:keep-all;
  }
  .hero-subtitle,
  .page-hero-desc{
    font-size:clamp(.68rem,3vw,.86rem);
  }
  .page-hero-title .event-name-nowrap{
    font-size:clamp(.95rem,4.4vw,1.2rem);
  }
}