/* SV 07 Geinsheim – Demo. Đen–vàng CLB, chất điện ảnh. */
:root{
  --bg:#070706; --bg-2:#0e0d0a; --surface:#14130f; --line:#26241c;
  --gold:#fff500; --gold-soft:#ffe94d; --gold-dim:rgba(255,245,0,.14);
  --ink:rgba(255,255,255,.92); --ink-soft:rgba(255,255,255,.72);
  --font-d:"Oswald",Impact,sans-serif; --font-b:"Source Sans 3",system-ui,sans-serif;
  --max:72rem; --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);
  font-size:1.15rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-soft)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3{font-family:var(--font-d);font-weight:600;line-height:1.1;text-wrap:balance;
  letter-spacing:.01em;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem)}
h3{font-size:1.25rem}
p{margin:.4em 0 1em;max-width:62ch}
.eyebrow{font-family:var(--font-d);font-weight:500;font-size:.8rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.eyebrow::before{content:"";display:inline-block;width:1.6rem;height:2px;background:var(--gold);
  vertical-align:middle;margin-right:.6rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1.2rem;background:rgba(7,7,6,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-header img{width:40px;height:40px}
.brand{font-family:var(--font-d);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;line-height:1.1}
.brand small{display:block;font-size:.62rem;letter-spacing:.3em;color:var(--gold)}
.main-nav{margin-left:auto;display:flex;gap:1.1rem;flex-wrap:wrap}
.main-nav a{font-family:var(--font-d);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  overflow:hidden;isolation:isolate;padding:5rem 1.2rem}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60rem 30rem at 50% 118%,rgba(255,245,0,.16),transparent 62%),
  radial-gradient(40rem 22rem at 82% -10%,rgba(80,110,60,.28),transparent 60%),
  linear-gradient(180deg,#0a0c12 0%,#070706 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(50rem 28rem at 50% 100%,#000 30%,transparent 75%)}
.hero canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.hero .sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-soft);max-width:44ch;margin-inline:auto}
.hero-inner>*{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-inner>*:nth-child(2){animation-delay:.15s}
.hero-inner>*:nth-child(3){animation-delay:.3s}
.hero-inner>*:nth-child(4){animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}
.hero-badge{width:clamp(72px,10vw,104px);margin:0 auto 1.4rem;filter:drop-shadow(0 6px 24px rgba(255,245,0,.25))}
.gold{color:var(--gold)}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;color:var(--ink-soft);
  font-size:1.4rem;animation:bob 2.2s ease-in-out infinite;text-decoration:none}
@keyframes bob{50%{transform:translateY(8px)}}

/* Buttons */
.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.btn{font-family:var(--font-d);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.7rem;border:1px solid var(--gold);border-radius:4px;
  color:var(--gold);transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--gold);color:#111;font-weight:600}
.btn-solid:hover{background:var(--gold-soft)}

/* Sections & cards */
.section{padding:5.5rem 1.2rem}
.section-inner{max-width:var(--max);margin:0 auto}
.section.alt{background:var(--bg-2)}
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:.4rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem;
  text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .25s,border-color .25s}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,245,0,.4)}
.card:hover::before{transform:scaleY(1)}
.card h3{margin:0}
.card .tagline{font-size:.92rem;color:var(--gold-soft);font-style:italic}
.card p{font-size:1.05rem;color:var(--ink-soft);margin:0}
.badge{position:absolute;top:1rem;right:1rem;background:var(--gold);color:#111;
  font-family:var(--font-d);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:3px;font-weight:600}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:1.05rem;min-width:34rem}
th,td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--font-d);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  font-size:.8rem;color:var(--gold);background:var(--bg-2)}
tr:last-child td{border-bottom:0}
td{color:var(--ink-soft)} td:first-child{color:var(--ink);font-weight:600}

/* Gallery + media placeholders */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.ph{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  border:1px dashed rgba(255,245,0,.35);display:grid;place-items:center;
  background:radial-gradient(22rem 14rem at 30% 110%,var(--gold-dim),transparent 70%),var(--surface)}
.ph span{font-family:var(--font-d);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;padding:0 1rem}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Video facade */
.video-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.video-facade{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:
  radial-gradient(24rem 14rem at 70% -20%,rgba(255,245,0,.12),transparent 70%),var(--bg-2);
  display:grid;place-items:center;cursor:pointer;width:100%;padding:0;color:var(--ink)}
.video-facade .play{width:64px;height:64px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;transition:transform .2s}
.video-facade:hover .play{transform:scale(1.08)}
.video-facade .play::after{content:"";border-style:solid;border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #111;margin-left:5px}
.video-facade figcaption,.video-facade .vtitle{position:absolute;left:1rem;bottom:.8rem;
  font-family:var(--font-d);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-note{font-size:.85rem;color:var(--ink-soft)}

/* Footer */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:3rem 1.2rem 2rem}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;
  justify-content:space-between;font-size:.95rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.motion-btn{margin-top:1.2rem;background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-family:var(--font-b);font-size:.85rem;padding:.5rem 1rem;border-radius:4px;cursor:pointer}
.motion-btn:hover{border-color:var(--gold);color:var(--gold)}

/* Motion controls */
body.motion-paused *{animation-play-state:paused!important;transition:none!important}
body.motion-paused .reveal{opacity:1;transform:none}
body.motion-paused .hero-inner>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.hero-inner>*{opacity:1;transform:none}
}
@media (max-width:640px){
  .main-nav{display:none}
  .section{padding:3.5rem 1.1rem}
}

/* Cỡ chữ lớn cho người lớn tuổi (nút A+) */
body.big-text{font-size:1.32rem}
body.big-text .card p{font-size:1.2rem}
body.big-text table{font-size:1.2rem}
body.big-text .main-nav a{font-size:1rem}
.textsize-btn{background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-d);font-size:1rem;padding:.35rem .8rem;border-radius:4px;cursor:pointer;margin-left:.6rem}
.textsize-btn:hover,.textsize-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
/* Dải số liệu */
.stats{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));text-align:center;margin-top:2.5rem}
.stat .num{font-family:var(--font-d);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);color:var(--gold);font-variant-numeric:tabular-nums}
.stat .lbl{font-size:1.05rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-d)}
.card h3{font-size:1.4rem}
.gmeta{color:var(--ink-soft);line-height:1.9}

/* Bộ lọc giờ tập */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 1.6rem}
.chip{font-family:var(--font-d);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  padding:.45rem 1rem;border-radius:999px;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#111;font-weight:600}
/* Đối tác */
.partners{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:center}
.partner{background:#fff;border-radius:var(--radius);padding:1.2rem;display:grid;place-items:center;min-height:6.5rem}
.partner img{max-height:4.2rem;width:auto;max-width:100%;object-fit:contain}
.partner-name{text-align:center;font-size:.9rem;color:var(--ink-soft);margin-top:.5rem}

/* Ảnh thật – hiệu ứng nổi 3D */
.photo3d{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.photo3d:hover{transform:perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-8px) scale(1.02);
  box-shadow:0 28px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,245,0,.35)}
.photo3d img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb{aspect-ratio:16/10;border-radius:8px;overflow:hidden;margin:-.4rem 0 .6rem;
  border:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.06)}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);
  box-shadow:0 8px 20px rgba(0,0,0,.5);margin-bottom:.6rem}
.hero-photo{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,6,.72),rgba(7,7,6,.55) 45%,rgba(7,7,6,.92))}
@media (prefers-reduced-motion:reduce){.photo3d:hover{transform:none}}
body.motion-paused .photo3d:hover{transform:none}

/* Tischtennis showpiece */
.tt-ball{position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#e8e6d8 60%,#b9b6a0);
  box-shadow:0 6px 18px rgba(0,0,0,.5);left:12%;top:20%;
  animation:ttbounce 2.6s cubic-bezier(.5,.05,.6,1) infinite}
@keyframes ttbounce{0%,100%{transform:translateY(0) scale(1)}
  48%{transform:translateY(46vh) scale(1)}52%{transform:translateY(46vh) scale(1.15,.8)}}
body.motion-paused .tt-ball{animation:none;top:60%}
@media (prefers-reduced-motion:reduce){.tt-ball{animation:none;top:60%}}
.gallery-lg{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.gallery-lg .ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:700px){.gallery-lg{grid-template-columns:repeat(2,1fr)}}
.cta-band{background:var(--gold);color:#111;border-radius:var(--radius);
  padding:2.5rem 2rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.cta-band h2{color:#111;margin:0;border:0}
.cta-band p{color:#222;margin:.3rem 0 0;font-size:1.1rem}
.cta-band .btn{border-color:#111;color:#111;font-weight:600;background:none}
.cta-band .btn:hover{background:#111;color:var(--gold)}
.sixw{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.sixw .card h3{color:var(--gold);font-size:1.1rem}
.gallery-lg .ph:last-child{grid-column:span 2}

/* Lightbox – bấm ảnh bung to */
.ph:has(img),.thumb{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:grid;place-items:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,245,0,.25);cursor:zoom-out}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{position:absolute;
  background:rgba(20,19,15,.8);border:1px solid var(--line);color:var(--ink);
  font-size:1.6rem;line-height:1;width:52px;height:52px;border-radius:50%;cursor:pointer}
.lightbox .lb-close{top:1.2rem;right:1.2rem}
.lightbox .lb-prev{left:1rem;top:50%;translate:0 -50%}
.lightbox .lb-next{right:1rem;top:50%;translate:0 -50%}
.lightbox button:hover{border-color:var(--gold);color:var(--gold)}
.lightbox .lb-cap{position:absolute;bottom:1.2rem;left:50%;translate:-50% 0;
  color:var(--ink-soft);font-size:1rem;text-align:center;max-width:80vw}