/* ══════════════════════════════════════════════════════════════════
   THE ROCKET — ชุดดีไซน์ใหม่ 2026
   เขียว Rocket = ปุ่มยืนยัน / สิ่งที่เลือกอยู่
   ส้ม         = การนำทาง (แท็บกีฬา, เมนูล่าง, ลิงก์, ป้ายเตือน)
   ทุกคลาสขึ้นต้น rk- เพื่อไม่ชนกับ app.css เดิม
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* เขียว — แบรนด์ */
  --rk-green:#0D5334;
  --rk-green-2:#17754A;
  --rk-green-soft:#E6F0EA;
  --rk-green-ink:#0A3F27;

  /* ส้ม — สีเน้น */
  --rk-or:#DD7526;
  --rk-or-2:#BC5D17;
  --rk-or-soft:#FDEEE1;

  /* กลาง */
  --rk-bg:#F1F3F1;
  --rk-card:#FFFFFF;
  --rk-fill:#F0F2F0;
  --rk-fill-2:#E6EAE7;
  --rk-line:#E2E7E3;
  --rk-line-2:#CBD4CE;

  --rk-ink:#16211C;
  --rk-ink-2:#5A6B63;
  --rk-ink-3:#8A9891;

  --rk-red:#C0392B;
  --rk-gold:#B8791C;

  /* มุมโค้ง */
  --rk-r-sm:10px;
  --rk-r:14px;
  --rk-r-lg:20px;
  --rk-r-xl:26px;

  --rk-sh-1:0 1px 3px rgba(22,33,28,.06);
  --rk-sh-2:0 4px 16px -6px rgba(22,33,28,.18);
  --rk-sh-3:0 12px 34px -12px rgba(22,33,28,.30);

  --rk-tab-h:68px;   /* ความสูงแถบเมนูล่าง (ตรึงไว้ให้แถบสรุปวางต่อพอดี) */
}

/* ══════════ โครงหน้า ══════════
   มือถือ: เอกสารไม่สกรอลล์ ให้สกรอลล์อยู่ใน .rk-scroll
   (แถบเมนูล่างจะได้ไม่เด้งตาม iOS rubber-band)            */

html.rk, body.rk{
  margin:0; background:var(--rk-bg); color:var(--rk-ink);
  font-family:var(--body,"IBM Plex Sans Thai",system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
}
body.rk *{ box-sizing:border-box }

.rk-app{
  display:flex; flex-direction:column;
  min-height:100svh; min-height:100dvh;
  max-width:520px; margin:0 auto;
  background:var(--rk-card);
  position:relative;
}
.rk-scroll{ flex:1; min-height:0 }

@media(max-width:899px){
  html.rk.lock, body.rk.lock{ height:100%; overflow:hidden; position:static }
  body.rk.lock .rk-app{ height:100svh; height:100dvh; overflow:hidden }
  body.rk.lock .rk-scroll{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:calc(var(--rk-tab-h) + 18px + env(safe-area-inset-bottom,0px));
  }
}
@media(min-width:900px){
  .rk-app{ max-width:1180px; background:var(--rk-bg) }
  .rk-scroll{ padding-bottom:40px }
}

/* ══════════ แถบบนสุด ══════════ */
.rk-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  background:var(--rk-card);
  border-bottom:1px solid var(--rk-line);
}
.rk-top .rk-logo{ height:26px; width:auto; display:block }
.rk-top .rk-sp{ flex:1 }
.rk-top .rk-ico{
  width:38px; height:38px; border-radius:50%; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--rk-or);
}
.rk-top .rk-ico:active{ background:var(--rk-or-soft) }
.rk-top .rk-ico svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round }

/* ปุ่มเขียวทรงเม็ดยา เช่น "เติมเงิน" */
.rk-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px 9px 12px; border:0; border-radius:999px; cursor:pointer;
  background:var(--rk-green); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:600;
  box-shadow:var(--rk-sh-1);
}
.rk-pill:active{ transform:scale(.97) }
.rk-pill svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }

/* ══════════ แท็บกีฬา / โปรแกรม ══════════ */
.rk-sports{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:10px 16px; background:var(--rk-fill);
  border-bottom:1px solid var(--rk-line);
  position:sticky; top:0; z-index:19;
}
.rk-sports::-webkit-scrollbar{ display:none }
.rk-sports a, .rk-sports button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--rk-ink-2); text-decoration:none;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.rk-sports .on{ background:var(--rk-or); color:#fff; box-shadow:var(--rk-sh-2) }
.rk-sports svg,.rk-sports img{ width:19px; height:19px; flex:0 0 auto }

/* ══════════ ปก / hero ══════════ */
.rk-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--rk-r-lg);
  margin:16px; padding:26px 20px 22px;
  min-height:190px; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--rk-green); background-size:cover; background-position:center;
  color:#fff;
}
.rk-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,26,17,.12) 0%, rgba(8,26,17,.72) 100%);
}
.rk-hero h1{
  margin:0; font-family:var(--disp,inherit);
  font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
  text-transform:uppercase;
}
.rk-hero p{ margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.86) }

/* ══════════ หัวข้อ ══════════ */
.rk-h2{
  margin:22px 16px 12px; font-family:var(--disp,inherit);
  font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--rk-ink);
}
.rk-lab{
  margin:20px 16px 9px; font-family:var(--mono,monospace);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rk-ink-3);
}

/* ══════════ รายการแบบมีไอคอน + ลูกศร ══════════ */
.rk-list{ margin:0 16px; background:var(--rk-card); border-radius:var(--rk-r-lg);
  border:1px solid var(--rk-line); overflow:hidden }
.rk-row{
  display:flex; align-items:center; gap:15px; width:100%;
  padding:16px 16px; border:0; background:transparent; cursor:pointer;
  text-align:left; text-decoration:none; color:inherit; font-family:inherit;
  border-bottom:1px solid var(--rk-line);
}
.rk-row:last-child{ border-bottom:0 }
.rk-row:active{ background:var(--rk-fill) }
.rk-row .rk-emo{
  width:46px; height:46px; flex:0 0 auto; border-radius:var(--rk-r);
  display:grid; place-items:center; font-size:24px;
  background:var(--rk-green-soft);
}
.rk-row .rk-tx{ flex:1; min-width:0 }
.rk-row b{ display:block; font-size:15.5px; font-weight:600; line-height:1.3 }
.rk-row span{ display:block; margin-top:2px; font-size:12.5px; color:var(--rk-ink-3) }
.rk-row .rk-arw{ flex:0 0 auto; width:18px; height:18px; color:var(--rk-line-2);
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.rk-row .rk-bdg{
  flex:0 0 auto; font-family:var(--mono,monospace); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; background:var(--rk-or-soft); color:var(--rk-or-2);
}

/* ══════════ การ์ดหมวดมีรูป ══════════ */
.rk-cats{
  display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:10px;
  overflow-x:auto; scrollbar-width:none; padding:0 16px 4px;
}
.rk-cats::-webkit-scrollbar{ display:none }
.rk-cat{
  position:relative; display:block; height:112px; border-radius:var(--rk-r);
  overflow:hidden; text-decoration:none; border:1px solid var(--rk-line);
  background:var(--rk-fill-2) center/cover no-repeat;
}
.rk-cat span{
  position:absolute; left:0; right:0; bottom:0;
  padding:9px 10px; font-size:13px; font-weight:600; text-align:center;
  background:var(--rk-card); color:var(--rk-green); border-top:1px solid var(--rk-line);
}
.rk-cat.on span{ background:var(--rk-green); color:#fff; border-top-color:var(--rk-green) }

/* ══════════ แถบเลือกวัน ══════════ */
.rk-days{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:2px 16px 6px; scroll-snap-type:x proximity;
}
.rk-days::-webkit-scrollbar{ display:none }
.rk-day{
  flex:0 0 auto; width:62px; padding:10px 4px 11px; cursor:pointer;
  border:1px solid var(--rk-line); border-radius:var(--rk-r);
  background:var(--rk-fill); color:var(--rk-ink); font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  scroll-snap-align:center; transition:background .18s ease, color .18s ease;
}
.rk-day i{ font-style:normal; font-size:11.5px; color:var(--rk-ink-3) }
.rk-day b{ font-family:var(--disp,inherit); font-size:21px; font-weight:700; line-height:1.15 }
.rk-day u{ text-decoration:none; font-size:11px; color:var(--rk-ink-3) }
.rk-day[aria-pressed="true"]{
  background:var(--rk-green); border-color:var(--rk-green); color:#fff;
  box-shadow:var(--rk-sh-2);
}
.rk-day[aria-pressed="true"] i,
.rk-day[aria-pressed="true"] u{ color:rgba(255,255,255,.75) }
.rk-day:disabled{ opacity:.4; cursor:default }

/* ══════════ สวิตช์แบ่งช่อง (60/90/120 นาที) ══════════ */
.rk-seg{
  display:flex; gap:8px; margin:14px 16px 0;
}
.rk-seg button{
  flex:1; padding:14px 10px; cursor:pointer; font-family:inherit;
  border:1px solid var(--rk-line); border-radius:var(--rk-r);
  background:var(--rk-fill); color:var(--rk-ink-2);
  font-size:14.5px; font-weight:600; transition:background .18s ease, color .18s ease;
}
.rk-seg button[aria-pressed="true"]{
  background:var(--rk-green); border-color:var(--rk-green); color:#fff;
  box-shadow:var(--rk-sh-2);
}

/* ══════════ ตารางเวลาบนมือถือ ══════════ */
.rk-slots{
  margin:14px 16px 0; padding:16px 14px 18px;
  background:var(--rk-fill); border-radius:var(--rk-r-lg);
}
.rk-slots-h{
  font-family:var(--mono,monospace); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-ink-2); margin:0 2px 13px;
}
.rk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
@media(max-width:359px){ .rk-grid{ grid-template-columns:repeat(3,1fr) } }
.rk-slot{
  padding:11px 3px 10px; cursor:pointer; font-family:inherit;
  border:1px solid var(--rk-line); border-radius:var(--rk-r-sm);
  background:var(--rk-card); color:var(--rk-ink);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  transition:background .16s ease, border-color .16s ease, transform .1s ease;
}
.rk-slot b{ font-family:var(--disp,inherit); font-size:15px; font-weight:700; line-height:1.15 }
.rk-slot i{ font-style:normal; font-size:10.5px; color:var(--rk-ink-3) }
.rk-slot:active{ transform:scale(.95) }
.rk-slot[aria-pressed="true"]{
  background:var(--rk-green); border-color:var(--rk-green); color:#fff;
  box-shadow:var(--rk-sh-2);
}
.rk-slot[aria-pressed="true"] i{ color:rgba(255,255,255,.8) }
.rk-slot:disabled{
  background:var(--rk-fill-2); border-color:var(--rk-fill-2);
  color:var(--rk-ink-3); cursor:default;
}
.rk-slot:disabled b{ font-weight:500 }
.rk-empty{
  grid-column:1/-1; text-align:center; padding:26px 10px;
  font-size:13.5px; color:var(--rk-ink-3);
}

/* ══════════ ปุ่ม ══════════ */
.rk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:16px 20px; cursor:pointer; font-family:inherit;
  border:0; border-radius:999px;
  background:var(--rk-green); color:#fff;
  font-size:15.5px; font-weight:700; letter-spacing:.01em;
  box-shadow:var(--rk-sh-2);
  transition:transform .1s ease, background .18s ease;
}
.rk-btn:active{ transform:scale(.98) }
.rk-btn:disabled{ background:var(--rk-line-2); box-shadow:none; cursor:default }
.rk-btn.accent{ background:var(--rk-or) }
.rk-btn.ghost{
  background:transparent; color:var(--rk-ink-2);
  border:1px solid var(--rk-line); box-shadow:none; font-weight:600;
}
.rk-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round }
.rk-link{
  background:0; border:0; padding:0; cursor:pointer; font-family:inherit;
  color:var(--rk-or); font-size:13.5px; font-weight:600; text-decoration:none;
}

/* ══════════ ช่องกรอก ══════════ */
.rk-field{
  position:relative; display:block; margin:0 0 13px;
  background:var(--rk-fill); border-radius:var(--rk-r);
  border:1px solid transparent; transition:border-color .18s ease, background .18s ease;
}
.rk-field:focus-within{ border-color:var(--rk-green); background:var(--rk-card) }
.rk-field > span{
  position:absolute; left:46px; top:9px;
  font-size:11px; color:var(--rk-ink-3); pointer-events:none;
}
.rk-field input{
  width:100%; border:0; background:transparent; outline:0;
  font-family:inherit; font-size:16px; color:var(--rk-ink);
  padding:26px 44px 11px 46px;
}
.rk-field .rk-lead{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--rk-ink-3);
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.rk-field .rk-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:50%; background:0; cursor:pointer;
  display:grid; place-items:center; color:var(--rk-ink-3);
}
.rk-field .rk-eye svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }

/* ══════════ หน้าเข้าสู่ระบบ ══════════ */
.rk-auth{
  display:flex; flex-direction:column; min-height:100svh; min-height:100dvh;
  background:var(--rk-card);
}
.rk-auth-bar{
  display:flex; align-items:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 4px;
}
.rk-auth-bar button{
  width:40px; height:40px; border:0; background:0; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; color:var(--rk-ink);
}
.rk-auth-bar svg{ width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }
.rk-auth-body{
  flex:1; display:flex; flex-direction:column;
  padding:0 22px calc(22px + env(safe-area-inset-bottom,0px));
  max-width:440px; width:100%; margin:0 auto;
}
.rk-auth-logo{ display:block; height:42px; width:auto; margin:10px auto 22px }
.rk-auth-body h1{
  margin:0; text-align:center; font-family:var(--disp,inherit);
  font-size:33px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase;
}
.rk-auth-body .rk-sub{
  margin:7px 0 30px; text-align:center; font-size:14.5px; color:var(--rk-ink-3);
}
.rk-auth-foot{ margin-top:auto; padding-top:26px }
.rk-err{
  min-height:18px; margin:2px 2px 10px;
  font-size:13px; color:var(--rk-red); font-weight:500;
}
.rk-note{ margin:14px 0 0; text-align:center; font-size:12px; color:var(--rk-ink-3); line-height:1.65 }

.rk-auth-art{ display:none }

@media(min-width:900px){
  .rk-auth{ flex-direction:row; max-width:none }
  .rk-auth-art{ display:flex;
    flex:1 1 52%; position:relative; isolation:isolate; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:52px; color:#fff; background:var(--rk-green) center/cover no-repeat;
  }
  .rk-auth-art::before{ content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(165deg, rgba(6,22,14,.42) 0%, rgba(6,22,14,.92) 100%) }
  .rk-auth-art h2{ margin:0 0 14px; font-family:var(--disp,inherit);
    font-size:42px; font-weight:700; letter-spacing:-.025em; line-height:1.14 }
  .rk-auth-art p{ margin:0; max-width:38ch; font-size:15px; line-height:1.75;
    color:rgba(255,255,255,.76) }
  .rk-auth-side{ flex:1 1 48%; display:flex; align-items:center; justify-content:center; padding:40px }
  .rk-auth-body{ min-height:0 }
  .rk-auth-foot{ margin-top:30px }
}

/* ══════════ แถบเมนูล่าง ══════════ */
.rk-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:520px; margin:0 auto;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--rk-card); border-top:1px solid var(--rk-line);
  transform:translateZ(0); backface-visibility:hidden; will-change:transform;
}
.rk-tabs-in{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  background:var(--rk-fill); border-radius:999px; padding:4px;
}
.rk-tabs a{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 6px; border-radius:999px; text-decoration:none;
  color:var(--rk-ink-2); font-size:12.5px; font-weight:700; letter-spacing:.03em;
  white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.rk-tabs a svg{ width:19px; height:19px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.rk-tabs a[aria-current="page"]{
  background:var(--rk-or); color:#fff; box-shadow:var(--rk-sh-2);
}
@media(max-width:400px){ .rk-tabs a{ font-size:11.5px; gap:5px } }
@media(min-width:900px){ .rk-tabs{ display:none } }

/* ══════════ เมนูข้างจอคอม ══════════ */
.rk-side{ display:none }
@media(min-width:900px){
  .rk-shell{ display:grid; grid-template-columns:252px 1fr; gap:26px;
    max-width:1180px; margin:0 auto; padding:0 26px; align-items:start }
  .rk-side{
    display:flex; flex-direction:column; gap:4px;
    position:sticky; top:22px; padding:22px 14px;
    background:var(--rk-green); border-radius:var(--rk-r-lg); color:#fff;
  }
  .rk-side img{ height:24px; width:auto; margin:2px 8px 18px }
  .rk-side a{
    display:flex; align-items:center; gap:12px; padding:11px 13px;
    border-radius:var(--rk-r); text-decoration:none;
    color:rgba(255,255,255,.74); font-size:14px; font-weight:600;
  }
  .rk-side a svg{ width:19px; height:19px; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
  .rk-side a:hover{ background:rgba(255,255,255,.09); color:#fff }
  .rk-side a[aria-current="page"]{ background:var(--rk-or); color:#fff }
}

/* ══════════ แผ่นเด้ง / กล่องข้อความ ══════════ */
.rk-scrim{
  position:fixed; inset:0; z-index:80; background:rgba(10,22,16,.52);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.rk-scrim[hidden]{ display:none }
.rk-modal{
  position:fixed; z-index:81; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px, calc(100vw - 36px));
  background:var(--rk-green); color:#fff;
  border-radius:var(--rk-r-xl); padding:28px 24px 24px;
  box-shadow:var(--rk-sh-3); text-align:center;
}
.rk-modal[hidden]{ display:none }
.rk-modal h2{
  margin:0 0 10px; font-family:var(--disp,inherit);
  font-size:22px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase;
}
.rk-modal p{ margin:0 0 20px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.82) }
.rk-modal .rk-x{
  position:absolute; right:14px; top:14px;
  width:34px; height:34px; border:0; border-radius:50%; background:0; cursor:pointer;
  display:grid; place-items:center; color:rgba(255,255,255,.8);
}
.rk-modal .rk-x svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round }
.rk-modal .rk-btn{ background:rgba(255,255,255,.16); box-shadow:none }
.rk-modal .rk-btn:active{ background:rgba(255,255,255,.24) }

/* ══════════ แถบสรุปท้ายจอ (ตอนเลือกเวลาแล้ว) ══════════ */
.rk-bar{
  position:fixed; left:0; right:0; z-index:41;
  bottom:calc(var(--rk-tab-h) + env(safe-area-inset-bottom,0px));
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--rk-card);
  border-top:1px solid var(--rk-line);
  box-shadow:0 -8px 26px -18px rgba(22,33,28,.5);
  transform:translateZ(0);
}
.rk-bar[hidden]{ display:none }
.rk-bar .rk-bt{ flex:1; min-width:0 }
.rk-bar .rk-bt b{ display:block; font-size:14px; font-weight:600 }
.rk-bar .rk-bt span{ display:block; margin-top:1px; font-size:11.5px; color:var(--rk-ink-3) }
.rk-bar .rk-sum{
  font-family:var(--disp,inherit); font-size:19px; font-weight:700; color:var(--rk-green);
}
.rk-bar .rk-btn{ width:auto; padding:13px 24px; font-size:14.5px }
@media(min-width:900px){
  .rk-bar{ bottom:0; max-width:none; padding:14px 30px }
}

/* ══════════ จิปาถะ ══════════ */
.rk-hide{ display:none!important }
.rk-spin{
  display:inline-block; width:15px; height:15px; vertical-align:-3px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:rkspin .7s linear infinite;
}
@keyframes rkspin{ to{ transform:rotate(360deg) } }
.rk-skel{
  background:linear-gradient(90deg,var(--rk-fill) 25%,var(--rk-fill-2) 37%,var(--rk-fill) 63%);
  background-size:400% 100%; animation:rkshim 1.3s ease infinite; border-radius:var(--rk-r-sm);
}
@keyframes rkshim{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ══════════════════════════════════════════════════════════════════
   อัปหน้าตาของเดิมทั้งเว็บ — ทับคลาสที่ app.css ใช้อยู่
   ไม่ต้องแตะสคริปต์สักบรรทัด แค่โหลดไฟล์นี้ต่อจาก app.css
   ══════════════════════════════════════════════════════════════════ */

/* ---------- แถบเมนูล่าง ---------- */
body.hastab .tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--rk-tab-h) + env(safe-area-inset-bottom,0px));
  display:flex; gap:4px;
  width:100%; max-width:470px; margin:0 auto;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--rk-card); border-top:1px solid var(--rk-line);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transform:translateZ(0); backface-visibility:hidden; will-change:transform;
  isolation:isolate;
}
/* รางสีเทาหลังปุ่ม แบบ Sterling */
body.hastab .tabbar::before{
  content:""; position:absolute; z-index:-1;
  left:10px; right:10px; top:8px;
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--rk-fill); border-radius:var(--rk-r-lg);
}
body.hastab .tabbar a{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 2px 7px; border-radius:var(--rk-r-lg);
  color:var(--rk-ink-2); font-size:10.5px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; overflow:hidden;
  transition:background .18s ease, color .18s ease;
}
body.hastab .tabbar a span{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.hastab .tabbar a svg{ width:19px; height:19px; flex:0 0 auto }
body.hastab .tabbar a span{ font-size:inherit }
body.hastab .tabbar a[aria-current="page"]{
  background:var(--rk-or); color:#fff; box-shadow:var(--rk-sh-2);
}
body.hastab .tabbar a:active{ transform:none }
@media(max-width:360px){
  body.hastab .tabbar a{ font-size:9.5px }
}

/* ---------- เมนูข้างจอคอม ---------- */
@media(min-width:960px){
  .side{
    background:var(--rk-green)!important;
    border-radius:var(--rk-r-lg); margin:18px 0 18px 18px;
    padding:20px 12px;
  }
  .side .snav a[aria-current="page"]{
    background:var(--rk-or)!important; color:#fff!important;
  }
  .side .snav a{ border-radius:var(--rk-r) }
}

/* ---------- ปุ่มทรงเม็ดยา ---------- */
.cta{
  border-radius:999px!important;
  font-weight:700; letter-spacing:.01em;
  box-shadow:var(--rk-sh-2);
}
.cta.wide{ padding-top:16px; padding-bottom:16px }
.ghost2,.ghost{ border-radius:999px!important }
.tbtn{
  border-radius:999px!important; border:1px solid var(--rk-line)!important;
  font-weight:600;
}

/* ---------- การ์ด ---------- */
.pcard,.bcard,.rowcard,.gcard,.nextcard,.plan,.qtile{
  border-radius:var(--rk-r-lg)!important;
}
.pcard{ overflow:hidden }

/* ---------- ลิงก์/ป้าย ใช้สีส้ม ---------- */
.rowlab .mstat,
.pill.wait{ background:var(--rk-or-soft); color:var(--rk-or-2) }
.clearsel{ color:var(--rk-or) }

/* ---------- ปกหน้าแรก ---------- */
.xhero h1{ text-transform:uppercase; letter-spacing:-.025em }

/* ══════════════════════════════════════════════════════════════════
   แก้บั๊ก: จอคอมต้องไม่มีแถบเมนูล่าง
   (กฎ body.hastab .tabbar ด้านบนน้ำหนักมากกว่า .tabbar{display:none}
    ใน app.css เลยไปทับมันจนแถบโผล่บนจอคอม)
   ══════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  body.hastab .tabbar{ display:none !important }
  body.hastab .tabbar::before{ display:none !important }
}

/* ปุ่มในการ์ดบัญชีบนแถบซ้าย — เดิมเป็นสีทอง ชนกับชุดสีใหม่ */
@media(min-width:960px){
  .scard .sgo{ background:var(--rk-or); color:#fff; border-radius:999px }
  .scard .strack i{ background:var(--rk-or) }
}

/* ══════════════════════════════════════════════════════════════════
   หน้าจอง — มือถือใช้ตารางเวลา / จอคอมใช้ผังคอร์ท
   ══════════════════════════════════════════════════════════════════ */

/* แท็บโปรแกรมด้านบน (พิกเคิลบอล / Ice Bath) */
#ptabs{
  position:static; background:transparent; border:0;
  margin:0 -18px 16px; padding:0 18px 2px;
}
#ptabs a{ background:var(--rk-fill); color:var(--rk-ink-2) }
#ptabs a.on{ background:var(--rk-green); color:#fff; box-shadow:var(--rk-sh-2) }

/* การ์ดหมวด — การ์ดรูปภาพ 4 ใบเรียงพอดีจอมือถือ ไม่ต้องเลื่อน
   ใส่รูปเองได้: วางไฟล์ cat-booking.jpg / cat-open.jpg /
   cat-events.jpg / cat-lessons.jpg ไว้โฟลเดอร์เดียวกับหน้าเว็บ
   ยังไม่มีไฟล์ก็ไม่พัง จะเป็นพื้นเขียวแทน */
#cats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  grid-auto-flow:row; grid-auto-columns:auto;
  overflow:visible; margin:0 0 2px; padding:0;
}
#cats .rk-cat{
  position:relative; display:block; height:auto;
  aspect-ratio:78/104; border-radius:12px; overflow:hidden;
  border:1px solid var(--rk-line);
  background-color:var(--rk-green);
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* ยังไม่ได้ใส่รูป — ไล่เฉดให้แต่ละใบไม่เหมือนกัน จะได้ไม่ดูโล่ง */
#cats .rk-cat::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(155deg,#1E7A50,#0A3F27);
}
#cats .rk-cat:nth-child(2)::before{ background:linear-gradient(155deg,#2A6F8E,#123D50) }
#cats .rk-cat:nth-child(3)::before{ background:linear-gradient(155deg,#B8791C,#6B430B) }
#cats .rk-cat:nth-child(4)::before{ background:linear-gradient(155deg,#3E6B5A,#1A3B2E) }
#cats .rk-cat span{
  position:absolute; left:0; right:0; bottom:0;
  min-height:34px; display:flex; align-items:center; justify-content:center;
  padding:5px 3px; text-align:center;
  font-size:10.5px; font-weight:700; letter-spacing:-.01em; line-height:1.15;
  background:var(--rk-card); color:var(--rk-green);
  border-top:1px solid var(--rk-line);
}
#cats .rk-cat.on span{ background:var(--rk-green); color:#fff; border-top-color:var(--rk-green) }
#cats .rk-cat.soon{ pointer-events:none }
#cats .rk-cat.soon::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.26);
}
#cats .rk-cat em{
  position:absolute; top:5px; left:50%; transform:translateX(-50%); z-index:2;
  font-style:normal; font-family:var(--mono,monospace); font-size:8px;
  letter-spacing:.02em; color:var(--rk-or-2); text-align:center; white-space:nowrap;
  background:rgba(255,255,255,.95); border-radius:999px; padding:2px 7px;
  line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,.14);
}
@media(min-width:520px){
  #cats .rk-cat span{ font-size:12.5px; min-height:38px }
  #cats{ gap:10px }
}

/* ตารางเวลามือถือ */
#tgrid{ margin-top:4px }
#tgrid .rk-slot b{ font-family:var(--disp,inherit) }

/* ใช้ผังคอร์ททุกขนาดจอ — ตารางเวลาแบบเรียงช่องเลิกใช้แล้ว */
#tgrid{ display:none !important }
@media(min-width:900px){
  #cats{ grid-template-columns:repeat(4,minmax(0,150px)); gap:12px }
}

/* ผังคอร์ทบนมือถือ — ปรับให้กดง่าย อ่านง่าย */
@media(max-width:700px){
  .gcard{ --ccol:88px; --cellw:72px; padding:13px 11px 15px }
  .gcard .grid{ gap:5px }
  .gcard .grid .slot{ min-height:60px; border-radius:11px }
  .gcard .grid .slot .t{ font-size:13.5px; font-weight:600 }
  .gcard .grid .slot .p{ font-size:11px }
  .gcard .grid .gh > span{ font-size:12.5px }
  .gcard .grid .gh .free{ font-size:9.5px }
  .gcard .grid .gt{ font-size:11.5px; padding-bottom:8px }
  .gcard .legend{ gap:7px 12px; font-size:11px }
}

/* ---------- แผงเลือกคอร์ท (กางใต้แถวเวลา) ---------- */
.rk-slot.open{
  border-color:var(--rk-green); box-shadow:0 0 0 2px var(--rk-green-soft);
}
.rk-pick{
  grid-column:1 / -1;
  margin:2px 0 4px; padding:13px 13px 12px;
  background:var(--rk-card); border:1px solid var(--rk-line);
  border-radius:var(--rk-r); box-shadow:var(--rk-sh-1);
  animation:rkpick .18s ease;
}
@keyframes rkpick{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }
.rk-pick-h{
  display:flex; align-items:center; gap:8px; margin:0 0 11px;
  font-size:13px; color:var(--rk-ink-2);
}
.rk-pick-h svg{ width:16px; height:16px; flex:0 0 auto; color:var(--rk-ink-3) }
.rk-pick-h b{ color:var(--rk-ink); font-weight:700; font-family:var(--mono,monospace) }
.rk-pick-list{ display:flex; flex-direction:column; gap:7px }
.rk-pick-row{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 11px 11px 13px; cursor:pointer; font-family:inherit;
  background:var(--rk-fill); border:1px solid transparent;
  border-radius:var(--rk-r-sm); color:var(--rk-ink); text-align:left;
  transition:background .16s ease, border-color .16s ease;
}
.rk-pick-row svg{ width:20px; height:20px; flex:0 0 auto; color:var(--rk-ink-3) }
.rk-pick-row b{ flex:1; min-width:0; font-size:14.5px; font-weight:600 }
.rk-pick-row span{
  flex:0 0 auto; padding:8px 20px; border-radius:999px;
  background:var(--rk-green); color:#fff; font-size:13px; font-weight:700;
}
.rk-pick-row:active{ transform:scale(.99) }
.rk-pick-row.on{ background:var(--rk-green-soft); border-color:var(--rk-green) }
.rk-pick-row.on svg{ color:var(--rk-green) }
.rk-pick-row.on span{ background:var(--rk-card); color:var(--rk-green) }
.rk-pick-none{ margin:0; padding:10px 2px; font-size:13px; color:var(--rk-ink-3); text-align:center }


/* ══════════════════════════════════════════════════════════════════
   แถบสรุป "จองเลย" ต้องลอยอยู่เหนือแถบเมนูล่าง ไม่ให้ทับกันจนมองไม่เห็น
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:959px){
  body.hastab .bar{
    bottom:calc(var(--rk-tab-h) + env(safe-area-inset-bottom,0px)) !important;
    z-index:46;
    background:var(--rk-card) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-top:1px solid var(--rk-line);
    border-bottom:1px solid var(--rk-line);
    padding-bottom:12px !important;
    box-shadow:0 -10px 28px -20px rgba(22,33,28,.75) !important;
  }
  body.hastab .bar .cta{ padding-left:24px; padding-right:24px }
}

/* ══════════════════════════════════════════════════════════════════
   จอคอม: แถบเมนูซ้ายติดขอบจอ เต็มความสูง ล็อกไว้
   ══════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  .side{
    position:fixed !important;
    left:0 !important; top:0 !important; bottom:0 !important;
    width:250px !important;
    margin:0 !important; border-radius:0 !important;
    overflow-y:auto; overscroll-behavior:contain; z-index:30;
    padding:20px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important;
    scrollbar-width:thin;
  }
  .app > .phone{ margin-left:250px !important }
}
@media(min-width:1280px){
  .side{ width:268px !important }
  .app > .phone{ margin-left:268px !important }
}

/* ══════════════════════════════════════════════════════════════════
   ปกหน้าแรกกับแถบสิทธิพิเศษ — เต็มขอบ ไม่มีมุมโค้ง
   ══════════════════════════════════════════════════════════════════ */
.xhero, .band, .band.dark{ border-radius:0 !important }

/* ══════════════════════════════════════════════════════════════════
   จอคอม: แถบบนล็อกไว้ ไม่เลื่อนตามจอ — เหมือน "Book a court" ของ Sterling
   เดิม app.css สั่งซ่อนหัวบนจอคอม ตรงนี้เอากลับมาแล้วจัดใหม่
   ══════════════════════════════════════════════════════════════════ */

/* แถบเลือกโปรแกรมทรงเม็ดยาในหัว */
.dtabs{ display:none }
@media(min-width:960px){
  .app > .phone > header{
    display:flex !important;
    position:fixed; top:0; left:250px; right:0; z-index:35;
    align-items:center; gap:20px;
    margin:0; padding:11px 28px !important;
    background:var(--rk-card);
    border-bottom:1px solid var(--rk-line);
    box-shadow:0 1px 0 rgba(22,33,28,.03);
  }
  .app > .phone > header .hlogo,
  .app > .phone > header .hback{ display:none !important }
  .app > .phone > header .ht{ display:block !important; flex:0 0 auto; min-width:0 }
  .app > .phone > header .ht h1{
    font-family:var(--disp,inherit); font-size:17.5px; font-weight:600;
    letter-spacing:-.012em; margin:0; white-space:nowrap; color:var(--rk-ink);
  }
  .app > .phone > header .ht .sub{ display:none }
  .app > .phone > header .tbtn{
    margin-left:auto; flex:0 0 auto;
    border-radius:999px !important; padding:9px 18px;
    background:var(--rk-green); color:#fff; border:0 !important;
    font-size:12.5px; font-weight:600; text-decoration:none;
  }

  .dtabs{
    display:flex; gap:4px; flex:0 0 auto;
    padding:3px; background:var(--rk-fill); border-radius:999px;
  }
  .dtabs a{
    padding:7px 16px; border-radius:999px; text-decoration:none;
    color:var(--rk-ink-2); font-size:13px; font-weight:600;
    white-space:nowrap; transition:background .18s ease, color .18s ease;
  }
  .dtabs a:hover{ color:var(--rk-ink) }
  .dtabs a.on{
    background:var(--rk-card); color:var(--rk-green); box-shadow:var(--rk-sh-1);
  }

  /* เว้นที่ให้หัวที่ล็อกไว้ */
  .app > .phone > main{ padding-top:74px !important }
  #ptabs{ display:none }            /* มีในหัวแล้ว ไม่ต้องซ้ำ */
}
@media(min-width:1280px){
  .app > .phone > header{ left:268px; padding:13px 44px !important }
  .app > .phone > header .ht{ display:block !important }
}


/* ══════════════════════════════════════════════════════════════════
   ปกหน้าจอง — ย่อลงให้เห็นผังการจองทันที ไม่ต้องเลื่อน
   ══════════════════════════════════════════════════════════════════ */
.bhero{
  min-height:132px !important;
  padding:16px 18px 15px !important;
  margin-bottom:14px !important;
}
.bhero .xk{ font-size:9.5px !important; letter-spacing:.16em; opacity:.8 }
.bhero h1{ font-size:23px !important; margin:3px 0 0 !important }
.bhero .xs{ font-size:12px !important; margin-top:4px !important; line-height:1.45 }
.bchips{ margin-top:9px !important; gap:6px !important }
.bchips span{ font-size:10px !important; padding:4px 10px !important }
@media(min-width:900px){
  .bhero{ min-height:168px !important; padding:22px 22px 20px !important }
  .bhero h1{ font-size:28px !important }
}


/* หัวบนมือถือ — บีบให้เตี้ยลง จะได้เห็นผังเร็วขึ้น */
@media(max-width:959px){
  .app > .phone > header{ padding:11px 16px 10px }
  .app > .phone > header .ht h1{ font-size:17px; line-height:1.25 }
  .app > .phone > header .ht .sub{
    font-size:11.5px; margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .app > .phone > header .tbtn{ font-size:12px; padding:8px 14px }
  .app > .phone > header .hlogo{ height:22px }
}

/* ══════════════════════════════════════════════════════════════════
   เปลี่ยนหน้าแบบสไลด์ — ไม่เห็นจอขาววาบตอนโหลดหน้าใหม่
   เบราว์เซอร์ที่ไม่รองรับจะข้ามกฎพวกนี้ไปเอง ใช้งานได้ปกติ
   ══════════════════════════════════════════════════════════════════ */
@view-transition{ navigation:auto }

/* กันจอขาววาบระหว่างสลับหน้า */
html{ background:var(--rk-bg) }

/* เฉพาะ "เนื้อหา" ที่สไลด์ ส่วนเมนูอยู่กับที่เหมือนแอป */
.app > .phone > main{ view-transition-name:rk-page }
.tabbar{ view-transition-name:rk-tabbar }
.side{ view-transition-name:rk-side }
.app > .phone > header{ view-transition-name:rk-top }

/* เมนูไม่ต้องมีอนิเมชัน ให้นิ่งสนิท */
::view-transition-group(rk-tabbar),
::view-transition-group(rk-side),
::view-transition-group(rk-top){ animation-duration:0s }
::view-transition-old(rk-tabbar),::view-transition-new(rk-tabbar),
::view-transition-old(rk-side),::view-transition-new(rk-side),
::view-transition-old(rk-top),::view-transition-new(rk-top){ animation:none; mix-blend-mode:normal }

/* ไปข้างหน้า: หน้าเก่าเลื่อนออกซ้าย หน้าใหม่เข้าจากขวา */
html[data-nav="fwd"]::view-transition-old(rk-page){
  animation:rkOutL .26s cubic-bezier(.32,.72,0,1) both;
}
html[data-nav="fwd"]::view-transition-new(rk-page){
  animation:rkInR .26s cubic-bezier(.32,.72,0,1) both;
}
/* ย้อนกลับ: สลับทิศ */
html[data-nav="back"]::view-transition-old(rk-page){
  animation:rkOutR .26s cubic-bezier(.32,.72,0,1) both;
}
html[data-nav="back"]::view-transition-new(rk-page){
  animation:rkInL .26s cubic-bezier(.32,.72,0,1) both;
}

@keyframes rkOutL{ to{ transform:translateX(-14%); opacity:0 } }
@keyframes rkInR { from{ transform:translateX(14%);  opacity:0 } }
@keyframes rkOutR{ to{ transform:translateX(14%);  opacity:0 } }
@keyframes rkInL { from{ transform:translateX(-14%); opacity:0 } }

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว — ให้จางเข้าออกเฉย ๆ */
@media(prefers-reduced-motion:reduce){
  html[data-nav]::view-transition-old(rk-page),
  html[data-nav]::view-transition-new(rk-page){
    animation-duration:.12s; animation-name:rkFade;
  }
  @keyframes rkFade{ from{opacity:0} to{opacity:1} }
}

/* ══════════════════════════════════════════════════════════════════
   โลโก้หมุนตอนรอโหลด — โผล่เฉพาะตอนช้าจริง (เกิน 0.22 วิ)
   ══════════════════════════════════════════════════════════════════ */
.rk-busy{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--rk-bg);
  animation:rkBusyIn .18s ease both;
}
.rk-busy.out{ animation:rkBusyOut .2s ease both; pointer-events:none }
@keyframes rkBusyIn { from{opacity:0} to{opacity:1} }
@keyframes rkBusyOut{ from{opacity:1} to{opacity:0} }

.rk-busy-in{ display:flex; flex-direction:column; align-items:center; gap:18px }
.rk-busy-in img{
  height:34px; width:auto; display:block;
  animation:rkBusyPulse 1.6s ease-in-out infinite;
}
.rk-busy-in p{
  margin:0; font-family:var(--mono,monospace); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rk-ink-3);
}
.rk-busy-ring{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--rk-line-2); border-top-color:var(--rk-green);
  animation:rkBusySpin .75s linear infinite;
}
@keyframes rkBusySpin { to{ transform:rotate(360deg) } }
@keyframes rkBusyPulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

@media(prefers-reduced-motion:reduce){
  .rk-busy-in img{ animation:none }
  .rk-busy-ring{ animation-duration:1.6s }
}