/* ===================================================================
   JBF-Ro (Jabby Family HiClass) — ธีมเว็บไซต์
   โทนสีดึงมาจากโลโก้จริง: น้ำเงินราตรี + ทอง + ชมพู
   =================================================================== */
:root{
  /* น้ำเงิน */
  --bg:#060a18; --navy-900:#0a1024; --navy-800:#111a3a; --navy-700:#18234e;
  --navy-600:#22306b; --navy-line:rgba(126,158,255,.16);
  /* ทอง */
  --gold:#f7cd52; --gold-hi:#ffe9a3; --gold-deep:#c08c1e; --gold-soft:rgba(247,205,82,.14);
  /* ชมพู / ฟ้า (สีรอง) */
  --pink:#ff92c4; --pink-deep:#e8579b; --cyan:#74e0ff;
  /* ตัวอักษร */
  --text:#e8edff; --text-dim:#c3cdef; --muted:#8e9bc8;
  --ok:#4ade80; --danger:#ff6b6b;
  --radius:18px;
  --shadow:0 18px 46px rgba(2,5,18,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Kanit',system-ui,sans-serif;font-weight:300;
  color:var(--text);min-height:100vh;line-height:1.6;
  background-color:var(--bg);
  background-image:
    /* ประกายดาวจาง ๆ */
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 34% 62%, rgba(255,255,255,.30), transparent),
    radial-gradient(2px 2px   at 88% 48%, rgba(255,233,163,.45), transparent),
    radial-gradient(1.5px 1.5px at 62% 84%, rgba(255,255,255,.30), transparent),
    /* แสงเรืองสามจุด */
    radial-gradient(ellipse 70% 46% at 50% -6%, rgba(247,205,82,.20), transparent 70%),
    radial-gradient(ellipse 52% 44% at 6% 86%, rgba(232,87,155,.20), transparent 70%),
    radial-gradient(ellipse 60% 50% at 96% 32%, rgba(59,110,245,.22), transparent 70%),
    linear-gradient(175deg,#0b1230 0%, #080d20 46%, #050814 100%);
  background-attachment:fixed;
}
a{color:var(--gold);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-hi)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- แถบเมนูบน ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(10,16,36,.94),rgba(8,12,28,.82));
  border-bottom:1px solid var(--navy-line);
  box-shadow:0 8px 30px rgba(2,5,18,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:10px;height:70px}
.brand{
  display:flex;align-items:center;gap:11px;font-family:'Cinzel',serif;font-weight:800;
  font-size:21px;letter-spacing:.5px;margin-right:16px;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand:hover{filter:brightness(1.12)}
.brand .orb{
  width:42px;height:42px;flex:none;border-radius:50%;
  background:url('logo-mark.png?v=20260928') center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(247,205,82,.35),0 0 18px rgba(247,205,82,.35);
  font-size:0;   /* ซ่อนอีโมจิเดิมถ้าหน้าไหนยังไม่ได้อัปเดต */
}
.nav-links{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.nav-links a{
  color:var(--text-dim);font-weight:400;font-size:15px;padding:9px 15px;border-radius:10px;
  position:relative;transition:.16s
}
.nav-links a:hover{background:rgba(126,158,255,.10);color:#fff}
.nav-links a.active{color:var(--gold);background:var(--gold-soft)}
.nav-links a.active::after{
  content:'';position:absolute;left:15px;right:15px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)
}
.nav-cta{display:flex;gap:9px;align-items:center}
.nav-user{color:var(--gold);font-weight:500;font-size:14px;padding:6px 10px;border-radius:9px;background:var(--gold-soft)}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-block;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:.7px;text-align:center;
  color:#2a1c02;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 48%,var(--gold-deep));
  box-shadow:0 4px 0 #8d6412,0 10px 24px rgba(247,205,82,.22);
  transition:filter .12s,transform .08s,box-shadow .12s
}
.btn:hover{filter:brightness(1.08);color:#2a1c02}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8d6412,0 4px 12px rgba(247,205,82,.18)}
.btn.ghost{
  background:rgba(126,158,255,.07);color:var(--gold);
  border:1px solid rgba(247,205,82,.34);box-shadow:none
}
.btn.ghost:hover{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-hi)}
.btn.ghost:active{transform:translateY(2px);box-shadow:none}
.btn:disabled,.btn:disabled:hover,.btn:disabled:active{
  cursor:not-allowed;filter:grayscale(1) brightness(.7);opacity:.6;transform:none;box-shadow:none
}
.btn.block{display:block;width:100%}
.btn.sm{padding:9px 16px;font-size:13px;border-radius:10px;box-shadow:0 3px 0 #8d6412}
.btn.ghost.sm{box-shadow:none}

/* ---------- การ์ด / แผง ---------- */
.panel{
  background:linear-gradient(180deg,rgba(24,35,78,.85),rgba(12,18,42,.92));
  border:1px solid var(--navy-line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;position:relative
}
.panel::before{  /* เส้นทองบางเรืองแสงด้านบน */
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,205,82,.7),transparent)
}
.panel .inner{padding:24px}
.panel-title{
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold);
  padding:18px 24px;border-bottom:1px solid var(--navy-line);
  background:linear-gradient(180deg,rgba(247,205,82,.08),transparent)
}

/* ---------- ส่วนหัวหน้าแรก ---------- */
.hero{text-align:center;padding:56px 18px 44px;position:relative}
.hero::before{  /* วงแสงหลังโลโก้ */
  content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:min(560px,90vw);height:340px;pointer-events:none;
  background:radial-gradient(circle,rgba(247,205,82,.20),rgba(232,87,155,.10) 45%,transparent 68%);
  filter:blur(6px)
}
.hero > *{position:relative}
.hero .orb-big{
  width:200px;height:200px;margin:0 auto 18px;font-size:0;
  background:url('logo.png?v=20260928') center/contain no-repeat;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(247,205,82,.30));
  animation:float 6s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero h1{
  font-family:'Cinzel',serif;font-weight:800;font-size:clamp(38px,7vw,60px);letter-spacing:1px;line-height:1.08;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))
}
.hero .tag{color:var(--text-dim);font-size:17px;margin-top:10px;letter-spacing:.4px}
.hero .rates{
  display:inline-block;margin-top:14px;color:var(--gold);font-size:13.5px;font-weight:400;
  padding:7px 18px;border-radius:999px;
  background:var(--gold-soft);border:1px solid rgba(247,205,82,.30)
}
.hero .cta{margin-top:28px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- สถานะเซิร์ฟเวอร์ ---------- */
.status-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.pill{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:400;color:var(--text-dim);
  background:rgba(17,26,58,.75);border:1px solid var(--navy-line);
  border-radius:999px;padding:9px 18px;backdrop-filter:blur(6px)
}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.up{background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.18);animation:pulse 2s ease-in-out infinite}
.dot.down{background:var(--danger);box-shadow:0 0 0 3px rgba(255,107,107,.18)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.18)}50%{box-shadow:0 0 0 7px rgba(74,222,128,.04)}}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-top:24px}
.stat{
  background:linear-gradient(180deg,rgba(24,35,78,.8),rgba(12,18,42,.9));
  border:1px solid var(--navy-line);border-radius:16px;padding:20px 14px;text-align:center;
  transition:transform .18s,border-color .18s,box-shadow .18s
}
.stat:hover{transform:translateY(-4px);border-color:rgba(247,205,82,.45);box-shadow:0 14px 30px rgba(2,5,18,.55)}
.stat .num{
  font-family:'Cinzel',serif;font-size:34px;font-weight:800;line-height:1.1;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:6px}

/* ---------- หัวข้อแต่ละส่วน ---------- */
.section{padding:44px 0}
.section h2{
  font-family:'Cinzel',serif;font-size:clamp(22px,3.4vw,28px);text-align:center;font-weight:700;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px
}
.section .sub{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:26px}

/* ---------- การ์ดจุดเด่น ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.feat{
  background:linear-gradient(180deg,rgba(24,35,78,.78),rgba(12,18,42,.9));
  border:1px solid var(--navy-line);border-radius:16px;padding:24px 22px;
  transition:transform .18s,border-color .18s,box-shadow .18s
}
.feat:hover{transform:translateY(-5px);border-color:rgba(247,205,82,.45);box-shadow:0 16px 34px rgba(2,5,18,.55)}
.feat .ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:14px;
  background:linear-gradient(150deg,rgba(247,205,82,.22),rgba(232,87,155,.18));
  border:1px solid rgba(247,205,82,.28)
}
.feat:nth-child(2n) .ico{background:linear-gradient(150deg,rgba(116,224,255,.20),rgba(59,110,245,.20));border-color:rgba(116,224,255,.28)}
.feat:nth-child(3n) .ico{background:linear-gradient(150deg,rgba(255,146,196,.22),rgba(232,87,155,.20));border-color:rgba(255,146,196,.30)}
.feat h3{color:var(--gold);font-size:17px;margin-bottom:7px;font-weight:600;font-family:'Kanit',sans-serif}
.feat p{color:var(--text-dim);font-size:14px;line-height:1.65}

/* ---------- ตาราง / อันดับ ---------- */
.table-wrap{
  overflow-x:auto;border-radius:var(--radius);border:1px solid var(--navy-line);
  background:linear-gradient(180deg,rgba(24,35,78,.72),rgba(10,16,36,.9));box-shadow:var(--shadow)
}
table.rank{width:100%;border-collapse:collapse;min-width:540px}
table.rank th,table.rank td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(126,158,255,.10)}
table.rank th{
  font-family:'Cinzel',serif;font-size:13.5px;font-weight:700;color:var(--gold);
  background:linear-gradient(180deg,rgba(247,205,82,.10),rgba(247,205,82,.03));
  text-transform:uppercase;letter-spacing:.6px;white-space:nowrap
}
table.rank td{color:var(--text);font-size:14.5px;font-weight:400}
table.rank tbody tr{transition:background .15s}
table.rank tbody tr:hover{background:rgba(126,158,255,.07)}
table.rank tr:last-child td{border-bottom:none}
/* ต้องเจาะจงกว่า `table.rank td` (0,1,2) ไม่งั้น text-align:left ของกฎนั้นชนะ
   แล้วเลขจะไปกองชิดซ้ายของวงเหรียญ */
table.rank td.rankno{
  font-family:'Cinzel',serif;font-weight:800;font-size:14px;width:56px;
  text-align:center;color:var(--muted);vertical-align:middle
}
/* เหรียญ 3 อันดับแรก — วาดวงกลมด้วย background ของช่องเอง
   (ใช้ ::before + z-index:-1 ไม่ได้ เพราะจะจมอยู่ใต้พื้นตาราง) */
.rankno.g1,.rankno.g2,.rankno.g3{color:#2a1c02;font-size:15px;background-repeat:no-repeat}
.rankno.g1{background-image:radial-gradient(circle 15px at 50% 50%,#ffe9a3,#e0a81c 96%,transparent 100%)}
.rankno.g2{background-image:radial-gradient(circle 15px at 50% 50%,#f4f7ff,#98a4c2 96%,transparent 100%)}
.rankno.g3{background-image:radial-gradient(circle 15px at 50% 50%,#ffc999,#bd6f36 96%,transparent 100%)}

/* ---------- แท็บ ---------- */
.tabs{display:flex;gap:9px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.tabs a{
  padding:10px 20px;border-radius:999px;border:1px solid var(--navy-line);
  color:var(--text-dim);font-weight:400;font-size:14px;background:rgba(17,26,58,.6);transition:.16s
}
.tabs a:hover{border-color:rgba(247,205,82,.4);color:var(--gold)}
.tabs a.active{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
  color:#2a1c02;border-color:var(--gold);font-weight:600;
  box-shadow:0 6px 18px rgba(247,205,82,.25)
}

/* ---------- ฟอร์ม ---------- */
.form-wrap{max-width:470px;margin:44px auto}
.field{margin-bottom:16px}
label.lbl{display:block;font-size:13px;color:var(--gold);margin-bottom:7px;font-weight:500}
.req{color:var(--pink)}
input[type=text],input[type=password],input[type=email],input[type=number]{
  width:100%;padding:12px 14px;border-radius:11px;font-family:'Kanit',sans-serif;font-size:15px;font-weight:300;
  color:var(--text);background:rgba(6,10,24,.7);border:1px solid var(--navy-line);transition:.15s
}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,205,82,.16);background:rgba(6,10,24,.9)}
input::placeholder{color:#5f6b93}
.sex{display:flex;gap:10px}
.sex label{
  flex:1;cursor:pointer;text-align:center;padding:12px;border-radius:11px;border:1px solid var(--navy-line);
  background:rgba(6,10,24,.7);color:var(--text-dim);font-weight:400;transition:.15s
}
.sex label:hover{border-color:rgba(247,205,82,.4)}
.sex input{display:none}
.sex input:checked + label{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));color:#2a1c02;
  border-color:var(--gold);font-weight:600;box-shadow:0 6px 18px rgba(247,205,82,.25)
}
.cap-row{display:flex;align-items:center;gap:12px}
.cap-q{
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold);
  background:rgba(6,10,24,.7);border:1px solid rgba(247,205,82,.28);
  border-radius:11px;padding:11px 16px;white-space:nowrap
}
.cap-row input{flex:1}
.hint{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.6}

.msg{padding:14px 16px;border-radius:12px;font-size:14px;margin-bottom:18px;line-height:1.6}
.msg.err{background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.4);color:#ffc2c2}
.msg.err ul{margin:0;padding-left:20px}
.msg.ok{background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.4);color:#bdf5d2}
.msg.ok.center{text-align:center}

.kv{width:100%;border-collapse:collapse}
.kv td{padding:12px 4px;border-bottom:1px solid rgba(126,158,255,.10);font-size:14px}
.kv tr:last-child td{border-bottom:none}
.kv td:first-child{color:var(--muted);width:44%}
.kv td:last-child{color:var(--text);font-weight:400}

/* ---------- ท้ายเว็บ ---------- */
.footer{
  border-top:1px solid var(--navy-line);margin-top:52px;padding:32px 20px 38px;
  text-align:center;color:var(--muted);font-size:13px;
  background:linear-gradient(180deg,transparent,rgba(6,10,24,.6))
}
.footer .links{margin-bottom:12px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.footer .links a{color:var(--text-dim);font-size:14px}
.footer .links a:hover{color:var(--gold)}

/* ---------- จอเล็ก ---------- */
@media(max-width:980px){
  /* 4 การ์ดเรียง 3+1 แล้วดูไม่สมดุล บังคับเป็น 2x2 */
  .features{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .acc-grid,.dl-grid{grid-template-columns:1fr !important}
}
@media(max-width:720px){
  .nav-inner{height:auto;padding:12px 16px;flex-wrap:wrap;row-gap:10px}
  .brand{order:1;font-size:18px;margin-right:8px}
  .brand .orb{width:36px;height:36px}
  /* flex-basis 100% เพื่อบังคับให้เมนูลงบรรทัดของตัวเอง
     (ใส่แค่ width:100% ไม่พอ เพราะ flex:1 จากกฎหลักยังบีบให้ไปแชร์บรรทัดกับปุ่ม) */
  .nav-links{order:3;flex:1 0 100%;width:100%;justify-content:center}
  .nav-links a{padding:8px 14px;font-size:14px}
  .nav-cta{order:2;margin-left:auto}
  .hero{padding:36px 14px 32px}
  .hero .orb-big{width:150px;height:150px}
  .section{padding:34px 0}
  .panel .inner{padding:20px 18px}
  table.rank th,table.rank td{padding:12px 12px}
}

/* ---------- คนที่ตั้งค่าลดการเคลื่อนไหว ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}