:root{--navy:#071b35;--blue:#1769e0;--sky:#eaf3ff;--ink:#17263b;--muted:#65758b;--line:#e5ebf2;--white:#fff;--green:#17a673;--radius:20px;--shadow:0 16px 40px rgba(8,34,70,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f9fc;color:var(--ink);font-family:'Prompt',sans-serif;font-size:15px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1160px,calc(100% - 36px));margin:auto}.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-family:'Kanit',sans-serif;font-weight:700;font-size:18px;letter-spacing:.2px;line-height:1.1}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#2587ff,#0750c4);color:white;font-size:25px;box-shadow:0 8px 20px #1769e044}.brand-light{color:var(--blue)}.brand small{display:block;font-family:'Prompt',sans-serif;color:#8190a4;font-size:10px;font-weight:400;letter-spacing:0;margin-top:5px}.nav-links{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:500}.nav-links>a:not(.btn):hover{color:var(--blue)}.nav-user{color:var(--muted)}.menu-toggle{display:none;border:0;background:none;font-size:25px;color:var(--navy)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:12px 18px;font-weight:600;cursor:pointer;transition:.2s}.btn-primary{background:var(--blue);color:white;box-shadow:0 8px 18px #1769e02b}.btn-primary:hover{background:#0755c4;transform:translateY(-1px)}.btn-outline{border-color:#cbd8e8;background:white;color:var(--navy)}.btn-small{padding:9px 14px;font-size:12px}.btn-light{background:white;color:var(--navy)}.hero{background:radial-gradient(ellipse at 85% 15%,#1e65ba 0,transparent 35%),linear-gradient(120deg,#071b35 0%,#0b2b53 58%,#124a8a 100%);color:white;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid #ffffff20;border-radius:50%;right:-110px;bottom:-220px;box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff05}.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:480px;padding:68px 0;position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff38;background:#ffffff12;border-radius:99px;padding:7px 12px;font-size:12px;color:#dbeaff}.eyebrow-dot{width:7px;height:7px;background:#54e6b0;border-radius:50%}.hero h1{font-family:'Kanit',sans-serif;font-size:clamp(36px,5vw,58px);line-height:1.18;letter-spacing:-.6px;margin:22px 0 16px}.hero h1 em{font-style:normal;color:#65b5ff}.hero p{color:#cfdef2;max-width:560px;font-size:15px;margin:0 0 27px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-art{min-height:350px;position:relative;display:grid;place-items:center;isolation:isolate}
.court-illustration-svg{display:block;width:min(540px,120%);height:auto;overflow:visible;filter:drop-shadow(0 12px 9px #00101e33);position:relative;z-index:1}
.shuttle{position:absolute;right:12%;top:7%;font-size:58px;transform:rotate(-28deg);filter:drop-shadow(0 8px 8px #0003)}.float-card{z-index:5;position:absolute;background:white;color:var(--ink);border-radius:15px;padding:14px 17px;box-shadow:var(--shadow);font-size:12px}.float-card strong{display:block;font-size:19px;color:var(--blue)}.float-one{left:-2%;bottom:13%}.float-two{right:-1%;top:12%}.search-panel{background:white;border-radius:18px;padding:12px;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;box-shadow:0 16px 45px #00152c22;margin-top:-32px;position:relative;z-index:3;border:1px solid #edf1f6}.search-field{padding:8px 12px}.search-field label{display:block;font-size:11px;color:#75859a;margin-bottom:4px}.search-field input,.search-field select{border:0;outline:0;width:100%;background:transparent;color:var(--ink);font-weight:500}.section{padding:66px 0}.section-white{background:white}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.section-kicker{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.section h2{font-family:'Kanit',sans-serif;font-size:30px;line-height:1.25;margin:6px 0 0;color:var(--navy)}.section-sub{color:var(--muted);margin:8px 0 0;font-size:13px}.text-link{color:var(--blue);font-weight:600;font-size:13px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{padding:23px;border:1px solid var(--line);border-radius:17px;background:white;transition:.2s}.feature-card:hover,.listing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature-icon{width:47px;height:47px;border-radius:14px;display:grid;place-items:center;background:var(--sky);font-size:23px;margin-bottom:15px}.feature-card h3{font-size:16px;margin:0 0 5px}.feature-card p{font-size:12px;color:var(--muted);margin:0}.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.listing-card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s}.listing-image{height:170px;background:linear-gradient(135deg,#dcecff,#a9d3f7);display:grid;place-items:center;font-size:55px;position:relative}.listing-image.coach-img{background:linear-gradient(135deg,#e3f8ee,#9ee4c3)}.listing-image.article-img{background:linear-gradient(135deg,#e9e4ff,#bcb0ff)}.listing-tag{position:absolute;top:13px;left:13px;background:#fff;color:var(--blue);border-radius:7px;padding:5px 9px;font-size:10px;font-weight:600}.listing-body{padding:18px}.listing-body h3{font-size:16px;margin:0 0 7px}.listing-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}.listing-body p{color:var(--muted);font-size:12px;margin:9px 0 14px}.card-bottom{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.price{font-weight:700;color:var(--blue)}.community-banner{background:linear-gradient(110deg,#eaf3ff,#f7fbff);border:1px solid #dceaff;border-radius:23px;padding:35px;display:flex;align-items:center;justify-content:space-between;gap:20px}.community-banner h2{font-size:27px}.community-banner p{color:var(--muted);font-size:13px;margin:7px 0 0}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat{background:#ffffff12;border:1px solid #ffffff22;border-radius:13px;padding:13px}.stat strong{display:block;font-size:20px}.stat span{font-size:11px;color:#c5d8f2}.site-footer{background:#06162b;color:#c4d1e2;padding:46px 0 18px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-brand{color:white}.footer-grid p{max-width:360px;color:#92a5bd;font-size:12px}.footer-grid strong{display:block;color:white;margin-bottom:12px;font-size:13px}.footer-grid>div>a:not(.brand){display:block;font-size:12px;color:#a9bad0;margin:8px 0}.copyright{border-top:1px solid #ffffff1b;margin-top:30px;padding-top:16px;color:#758ba7;font-size:11px}.page-hero{background:linear-gradient(120deg,#071b35,#124a8a);color:white;padding:48px 0}.page-hero h1{font-family:'Kanit',sans-serif;font-size:38px;margin:0}.page-hero p{color:#cbdcf0;margin:8px 0 0}.content-area{padding:38px 0 70px}.filters{background:white;border:1px solid var(--line);border-radius:16px;padding:17px;display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}.filters input,.filters select,.form-control{border:1px solid #dce4ee;border-radius:10px;padding:11px 12px;background:white;min-width:150px;outline-color:var(--blue)}.filters input{flex:1}.empty-state{background:white;border:1px dashed #cbd8e8;padding:35px;text-align:center;border-radius:16px;color:var(--muted)}.form-card{max-width:540px;margin:42px auto;background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;padding:30px}.form-card h1{font-family:'Kanit',sans-serif;margin:0 0 6px;color:var(--navy)}.form-card>p{color:var(--muted);font-size:13px;margin-top:0}.form-group{margin:15px 0}.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}.form-control{width:100%}.form-note{font-size:12px;color:var(--muted)}.alert{padding:12px 14px;border-radius:10px;background:#fff0ef;color:#a62d25;font-size:13px;margin:14px 0}.alert.success{background:#eafaf3;color:#08744e}.topic-list{display:grid;gap:12px}.topic{background:white;border:1px solid var(--line);border-radius:14px;padding:17px;display:flex;justify-content:space-between;gap:15px}.topic h3{margin:0;font-size:15px}.topic p{margin:5px 0 0;font-size:12px;color:var(--muted)}.badge{display:inline-block;background:#eaf3ff;color:#1769e0;padding:4px 8px;border-radius:7px;font-size:10px}.notice{background:#fff9e9;border:1px solid #f4e2a9;padding:13px 15px;border-radius:12px;font-size:12px;color:#765b12;margin-bottom:18px}
@media(max-width:900px){.nav-links{gap:13px}.hero-inner{grid-template-columns:1fr .8fr}.feature-grid{grid-template-columns:repeat(2,1fr)}.listing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.nav-wrap{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:white;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:15px}.nav-links.open{display:flex}.nav-links .btn{width:100%}.hero-inner{grid-template-columns:1fr;padding:46px 0 60px;gap:10px}.hero h1{font-size:39px}.hero-art{min-height:250px}.court-illustration-svg{width:min(360px,100%)}.shuttle{font-size:34px}.float-one{left:2%;bottom:4%}.float-two{right:0;top:2%}.search-panel{grid-template-columns:1fr;margin-top:-22px;padding:12px}.search-field{border-bottom:1px solid var(--line)}.search-panel .btn{width:100%}.section{padding:48px 0}.section h2{font-size:26px}.section-head{align-items:start}.feature-grid{gap:10px}.feature-card{padding:16px}.listing-grid{grid-template-columns:1fr}.listing-image{height:155px}.community-banner{padding:24px;align-items:start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:1/-1}.form-card{padding:22px;margin:25px auto}.page-hero h1{font-size:31px}.topic{flex-direction:column}.filters>*{width:100%;min-width:0!important}}

.lang-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid #dce4ee;border-radius:9px;background:#f5f8fc;flex-shrink:0}.lang-switch a{font-size:11px;font-weight:700;color:#6b7a90;padding:5px 7px;border-radius:6px}.lang-switch a.active{background:#1769e0;color:white}

/* BadmintonTH wood-court hero artwork (final consolidated overrides) */
.hero-art{min-height:385px;position:relative;display:grid;place-items:center;isolation:isolate;perspective:1100px}
.court-illustration-svg{display:block;width:min(540px,122%);height:auto;overflow:visible;filter:drop-shadow(0 14px 12px rgba(0,12,28,.28));position:relative;z-index:1}
.float-card{z-index:5}
.float-one{left:-3%;bottom:10%}
.float-two{right:-2%;top:7%}
@media(max-width:900px){.hero-art{min-height:340px}.court-illustration-svg{width:min(490px,120%)}.float-one{left:-1%;bottom:7%}.float-two{right:0;top:4%}}
@media(max-width:680px){.hero-art{min-height:280px}.court-illustration-svg{width:min(390px,112%)}.float-one{left:0;bottom:2%;padding:10px 12px}.float-two{right:0;top:1%;padding:10px 12px}.float-card strong{font-size:15px}}

/* Accurate court drawing: one SVG court with floating mesh and a floor shadow. */
.court-illustration-svg { overflow: visible; }
.hero-art { isolation: isolate; }
.court-illustration-svg { max-width: 100%; }
.float-one { left: -3%; bottom: 7%; }
.float-two { right: -1%; top: 5%; }
@media (max-width: 680px) {
  .float-one { left: 0; bottom: 1%; }
  .float-two { right: 0; top: 0; }
}


/* Bilingual site polish */
.lang-switch .lang-option{display:inline-flex;align-items:center;justify-content:center;min-width:32px}
.lang-switch .lang-option.active{background:#1769e0;color:#fff}
.form-note + .form-note{margin-top:8px}
textarea.form-control{resize:vertical;min-height:110px}
.topic p{overflow-wrap:anywhere}


/* Language switch: active selection is driven by PHP and reinforced by the document language. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #f5f8fc;
  flex-shrink: 0;
}
.lang-switch .lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 9px;
  border-radius: 7px;
  color: #56677e;
  background: transparent;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.lang-switch .lang-option:hover {
  background: #dceaff;
  color: #0b56bf;
}
.lang-switch .lang-option.active,
html[data-lang="th"] .lang-switch .lang-option[lang="th"],
html[data-lang="en"] .lang-switch .lang-option[lang="en"] {
  background: #1769e0 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(23,105,224,.28);
}
.lang-switch .lang-option:focus-visible {
  outline: 2px solid #1769e0;
  outline-offset: 2px;
}
@media (max-width: 680px) {
  .lang-switch { align-self: flex-start; }
}

/* Multi-role registration choices */
.role-choice-group > label:first-child { margin-bottom: 5px; }
.role-choice-group .role-choice { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; margin:10px 0; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#fff; transition:border-color .15s, background .15s; }
.role-choice-group .role-choice:has(input:checked) { border-color:var(--blue); background:#f2f7ff; }
.role-choice-group .role-choice input[type="checkbox"] { width:17px; height:17px; min-width:17px; margin:3px 0 0; accent-color:var(--blue); }
.role-choice-group .role-choice span { display:block; }
.role-choice-group .role-choice strong { display:block; color:var(--navy); font-size:13px; }
.role-choice-group .role-choice small { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:3px; line-height:1.5; }

/* General-user role is included in every account and shown as a fixed default. */
.role-choice-group .role-choice-base { cursor:default; border-color:var(--blue); background:#f2f7ff; }
.role-choice-group .role-choice-base input[type="checkbox"] { opacity:1; cursor:not-allowed; }