/* ===== ฟอนต์ Anuphan — ไฟล์อยู่ในโปรเจกต์เอง (/assets/fonts) ไม่ดึงจากเน็ต
   แยก subset ไทย/ละติน + น้ำหนัก 400/600 → เบราว์เซอร์โหลดเฉพาะชุดที่ต้องใช้จริง ===== */
/* ===== ฟอนต์ Anuphan — **variable font 100–700** เก็บไว้ในโปรเจกต์เอง (ไม่ดึงจากเน็ต)
   🔴 ของเดิมโหลดแค่ 2 น้ำหนัก (400/600) แล้ว CSS ทั่วเว็บเขียน 700/800/900
      ⇒ เบราว์เซอร์ **สังเคราะห์ตัวหนาเอง (faux bold)** = ลากเส้นให้อ้วนขึ้นแบบหยาบๆ
      ภาษาไทยที่มีวรรณยุกต์/สระซ้อนกันจะ **เละติดกัน** — อ่านออกมาเป็น "ฟอนต์เพี้ยน"
      (ภาษาอังกฤษเนียนกว่า เลยไม่ค่อยมีใครจับได้)
   ✅ ใช้ไฟล์ variable ไฟล์เดียวครอบคลุม 100–700 → ได้ตัวหนาจริงทุกน้ำหนัก ไม่มีการสังเคราะห์
      แถมเบากว่าเดิม (2 ไฟล์ 54KB แทน 4 ไฟล์ที่ให้แค่ 2 น้ำหนัก)
   🔴 Anuphan ไม่มีน้ำหนักเกิน 700 — เขียน 800/900 ที่ไหนก็ได้ faux bold กลับมาเสมอ ===== */
@font-face{font-family:'Anuphan';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('/assets/fonts/anuphan-thai-var.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('/assets/fonts/anuphan-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== ตัวเลข = Sarabun (ครอบเฉพาะ U+0030-0039) =====
   ตัวหนังสือยังเป็น Anuphan เหมือนเดิม — วัดแล้ว Anuphan ดีสุดสำหรับตัวไทย
   (ตัวไทยสูง 9.0px @15px · วรรณยุกต์ซ้อนสูงแค่ 101% ของ em ⇒ บรรทัดชิดได้)
   แต่แพ้เรื่องเลข: รูปทรงเลขคู่ที่คนสับสนทับกันเฉลี่ย 59.7% vs Sarabun 57.0%
   Sarabun ชนะ 9/10 คู่ · ชนะมากสุด 0/6 (-7.7) 6/9 (-4.5) 5/6 (-4.0)
   = คู่ "หมุนแล้วเหมือนกัน" ซึ่งอ่านผิดแล้วเสียเงินบนเว็บหวย
   🔴 ใส่ 'LottoNum' ไว้หน้าสุดของ --ui ⇒ สลับเฉพาะตัวเลข ไม่ต้องไล่ใส่คลาสทีละจุด
   วิธีวัด + ตารางเต็ม: member/fonts/fonts.css ===== */
@font-face{font-family:"LottoNum";font-style:normal;font-weight:400;font-display:swap;
  src:url(/member/fonts/sarabun-lat-400-7f63.woff2) format("woff2");
  unicode-range:U+0030-0039, U+002C, U+002E, U+002B, U+002D, U+0025}
@font-face{font-family:"LottoNum";font-style:normal;font-weight:700;font-display:swap;
  src:url(/member/fonts/sarabun-lat-700-a3f1.woff2) format("woff2");
  unicode-range:U+0030-0039, U+002C, U+002E, U+002B, U+002D, U+0025}

/* ===== LottoV2 · theme tokens ===== */
:root{
  --ui:'LottoNum','Anuphan',"Noto Sans Thai",-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hdr-h:64px;
  --r-sm:8px; --r-ct:9px; --r:12px; --r-xl:20px; --r-pill:99px;

  --bg:#0D1013; --panel:#171B1F; --panel-2:#12161A; --line:#272D33;
  --ink:#E8EDF2; --muted:#7E8A95; --soft:#1D2227;
  --brand:#3B82F6; --brand-2:#2563EB;
  --green:#3DBF5C; --red:#EF4D5A; --amber:#F0A93C; --teal:#22B8D6; --purple:#8B5CF6;
  --rail:#0A0D10; --rail-line:#1C2228; --rail-ink:#B9C3CC; --rail-dim:#5D6772; --rail-hover:#171B1F;
  --radius:12px; --sh:none;
  --bg-grad:radial-gradient(1100px 560px at 84% -12%,rgba(59,130,246,.07) 0,transparent 62%);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#E3E9F0; --panel:#FFFFFF; --panel-2:#FFFFFF; --line:#D9E0E8;
  --ink:#0F151B; --muted:#5C6772; --soft:#EDF1F6;
  --brand:#2F6FD8; --brand-2:#1B57BA;
  --green:#22A34C; --red:#E0384A; --amber:#D9820B; --teal:#0E93AE; --purple:#7C3AED;
  --rail:#FFFFFF; --rail-line:#D9E0E8; --rail-ink:#3C4650; --rail-dim:#8B95A0; --rail-hover:#EDF1F6;
  --sh:0 1px 2px rgba(16,24,40,.05);
  --bg-grad:none;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--ui);
  background:var(--bg-grad),var(--bg);color:var(--ink);min-height:100vh}
a{color:inherit;text-decoration:none}
.ms-clock{text-align:center}   /* จัดวันที่-เวลาในแถบข้างสมาชิกให้อยู่กึ่งกลาง (ทุกหน้า) */
.app{display:flex;min-height:100vh}

/* ===== Sidebar ===== */
.sidebar{width:264px;flex:0 0 264px;background:var(--panel-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* 🔴 หัวของ 2 คอลัมน์ต้องสูงเท่ากันเป๊ะ ไม่งั้นเส้นใต้ไม่ตรงกัน (เดิม brand ~87px · topbar ~72px)
   ล็อกด้วย --hdr-h ตัวเดียว แก้ที่เดียวขยับพร้อมกันทั้งคู่ */
.brand{display:flex;flex:none;align-items:center;gap:11px;
  height:var(--hdr-h);padding:0 16px;border-bottom:1px solid var(--line)}
.logo{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--purple));
  display:grid;place-items:center;font-weight:700;color:#fff}
.brand b{font-size:21.5px;letter-spacing:.3px}
.brand small{color:var(--muted);font-size:13.5px;font-weight:500;display:block;margin-top:1px;line-height:1.2}
.nav{padding:2px 12px 12px;overflow:auto;flex:1}
/* 🔴 ป้ายหมวดในเมนู — เดิมเป็น mono + uppercase + letter-spacing .22em ซึ่งยืมมาจากดีไซน์ฝรั่ง
   ภาษาไทยไม่มีตัวพิมพ์ใหญ่ และ mono+ระยะห่างมากทำให้ตัวไทยแตกอ่านยาก → ใช้ฟอนต์ปกติ ตัวใหญ่ขึ้น หนาขึ้น */
.nav .group{color:var(--muted);font-size:15.5px;font-weight:600;letter-spacing:.02em;
  padding:20px 10px 8px;opacity:1}
.nav .group:first-child{padding-top:8px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--ink);
  font-size:16.5px;margin:2px 0;cursor:pointer;opacity:.86}
.nav a .ic{width:20px;text-align:center}
.nav .caret{margin-left:auto;font-size:14.5px;color:var(--muted);transition:transform .2s}
.nav .has-sub:not(.open) .caret{transform:rotate(-90deg)}
.nav .subnav{padding-left:22px;overflow:hidden;max-height:0;transition:max-height .25s ease}
.nav .has-sub.open .subnav{max-height:320px}
.nav .subnav a{font-size:16px;padding:8px 12px;line-height:1.35}
.nav a:hover{background:var(--soft);opacity:1}
.nav a.active{background:linear-gradient(90deg,rgba(59,130,246,.22),rgba(59,130,246,.04));
  color:var(--ink);opacity:1;box-shadow:inset 3px 0 0 var(--brand);font-weight:600}
.badge-pill{margin-left:auto;background:var(--soft);color:var(--muted);font-size:14.5px;padding:1px 8px;border-radius:99px}

/* ===== Main / topbar ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;height:var(--hdr-h);padding:0 22px 0 24px;
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.search{flex:1;max-width:340px;background:var(--soft);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;color:var(--ink);font-size:16.5px}
.clock{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:700;background:color-mix(in srgb,var(--amber) 14%,var(--panel-2));
  border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line));padding:6px 12px;border-radius:9px;font-size:16.5px}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);cursor:pointer;font-size:19.5px;display:grid;place-items:center}
.icon-btn:hover{background:var(--soft)}
.userbox{display:flex;align-items:center;gap:12px}
/* gear user-menu dropdown */
.user-menu{position:relative}
.user-pop{position:absolute;right:0;top:calc(100% + 12px);width:262px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden;z-index:30}
.user-pop[hidden]{display:none}
.up-head{background:linear-gradient(120deg,#5eead4,#a7f3d0 42%,#fde68a);padding:22px 16px 16px;text-align:center}
.up-avatar{position:relative;width:72px;height:72px;border-radius:50%;margin:0 auto 8px;
  background:linear-gradient(135deg,#3b82f6,#4f46e5);color:#fff;font-weight:700;font-size:18.5px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.up-dot{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%;background:#16c784;border:2px solid #fff}
.up-name{color:#12324b;font-weight:700;font-size:18.5px}
.up-role{color:#2c4d66;font-size:15.5px}
.up-item{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:17.5px;cursor:pointer;color:var(--ink);border-top:1px solid var(--line)}
.up-item:hover{background:var(--soft)}
.kv{text-align:right;font-size:15.5px;line-height:1.3}
.kv b{font-size:17.5px}.kv .muted{color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--brand));
  display:grid;place-items:center;font-weight:700;color:#fff}

.content{padding:22px;max-width:1280px;width:100%;margin:0 auto}
.btn{background:var(--brand-2);color:#fff;border:0;padding:9px 16px;border-radius:9px;font-size:17.5px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:5px 11px;font-size:16px}
.btn.green{background:var(--green)}.btn.red{background:var(--red)}
.btn:hover{filter:brightness(1.08)}

/* ===== Cards / grid ===== */
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,1fr)}
.two{grid-template-columns:1.6fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--sh)}
.stat .top{display:flex;align-items:center;justify-content:space-between}
.stat .ic{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-size:23.5px}
.stat .label{color:var(--muted);font-size:16.5px;margin-top:12px}
.stat .value{font-size:29.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .delta{font-size:15.5px;margin-top:6px}
.up{color:var(--green)}.down{color:var(--red)}
.i-blue{background:rgba(59,130,246,.15);color:var(--brand)}
.i-green{background:rgba(22,199,132,.15);color:var(--green)}
.i-amber{background:rgba(255,176,32,.15);color:var(--amber)}
.i-red{background:rgba(255,92,114,.15);color:var(--red)}
.i-purple{background:rgba(139,92,246,.15);color:var(--purple)}

.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.panel-h h3{margin:0;font-size:19.5px}
.panel-h .link{color:var(--muted);font-size:16.5px;cursor:pointer}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px;
  box-shadow:0 0 0 0 rgba(22,199,132,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,199,132,.5)}70%{box-shadow:0 0 0 7px rgba(22,199,132,0)}100%{box-shadow:0 0 0 0 rgba(22,199,132,0)}}

.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tab{padding:6px 12px;border-radius:8px;font-size:16.5px;color:var(--muted);cursor:pointer;border:1px solid transparent}
.tab.active{background:var(--soft);color:var(--ink);border-color:var(--line)}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:16.5px}
th{text-align:right;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:11px 10px;border-bottom:1px solid var(--soft);font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--soft)}
table.tbl-left th{text-align:left}
/* member table (SMLOT-style: purple header + zebra rows) */
.mtbl{border-collapse:collapse}
.mtbl th{background:var(--panel-2);color:var(--muted);border:0;border-bottom:1px solid var(--line);
  text-align:left;padding:11px 12px;font-weight:600;font-size:15px;white-space:nowrap}
.mtbl td{border:1px solid var(--line);padding:11px 12px;vertical-align:middle;height:58px}   /* แถวสูงเท่ากัน + จัดกึ่งกลางแนวตั้ง */
.mtbl .m-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.mtbl .m-actions .btn{white-space:nowrap}
.mtbl tbody tr:nth-child(odd) td{background:color-mix(in srgb,var(--purple) 8%,var(--panel))}
.mtbl tbody tr:nth-child(even) td{background:var(--panel)}
.mtbl tbody tr:hover td{background:color-mix(in srgb,var(--purple) 16%,var(--panel))}
.mtbl tbody tr.row-banned td{background:rgba(236,58,110,.24)}
.mtbl tbody tr.row-banned:hover td{background:rgba(236,58,110,.32)}
.mtbl td:nth-child(2) b{color:var(--brand)}

/* fixed dark sidebar (match member portal · #2a2e35) */
/* แถบข้างเป็น "ราง" สีเข้มทั้งสองธีมตามดีไซน์เดิม — ปรับเฉดให้เป็นถ่านชุด Arclon
   (เดิม #2a2e35 เป็นเทาอมเขียว คนละชุดกับพื้น #0D1013 → ดูเป็นคนละหน้า) */
.sidebar{background:var(--rail);border-right:1px solid var(--rail-line)}
.sidebar .brand{border-bottom:1px solid var(--rail-line)}
.sidebar .nav .group{color:var(--rail-dim)}
.sidebar .nav a{color:var(--rail-ink)}
.sidebar .nav a:hover{background:var(--rail-hover);opacity:1}
.sidebar .nav a.active{background:linear-gradient(90deg,rgba(59,130,246,.28),rgba(59,130,246,.06));color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.sidebar .badge-pill{background:var(--rail-hover);color:var(--rail-dim)}
/* sidebar info panel (agent) — นาฬิกา + Username/กระเป๋า/สมาชิก/ออนไลน์ */
.side-foot{flex:none;padding:12px;border-top:1px solid var(--rail-line)}
.side-foot a{display:flex;align-items:center;gap:8px;color:#ff8b9c;cursor:pointer;font-size:17.5px;font-weight:600;padding:9px 12px;border-radius:9px}
.side-foot a:hover{background:rgba(255,92,114,.14);color:#ff5c72}

/* Jingjailot brand logo (gold→indigo gradient · theme-safe) */
.jj-logo{font-size:21px;font-weight:700;letter-spacing:.2px;white-space:nowrap;line-height:1.15;padding-bottom:0;
  background:linear-gradient(95deg,#f5db8b 0%,#d8b661 45%,#b9c0cc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.jj-logo .lv{-webkit-text-fill-color:initial;color:initial;font-size:.62em;margin-right:7px;vertical-align:middle}
.jj-logo .lot{-webkit-text-fill-color:var(--rail-dim);color:var(--rail-dim)}

/* role badge (ระดับ) — Member=gold · Agent=red/pink */
.rb{display:inline-block;padding:3px 13px;border-radius:99px;font-size:15.5px;font-weight:700;white-space:nowrap}
.rb-member{background:#2563eb;color:#fff}
.rb-agent{background:linear-gradient(135deg,#e5c14a,#b8860b);color:#fff}
.tag{font-size:14.5px;padding:2px 9px;border-radius:99px;font-weight:600;white-space:nowrap}
.t-open{background:rgba(59,130,246,.18);color:var(--brand)}
.t-wait{background:rgba(255,176,32,.18);color:var(--amber)}
.t-paid{background:rgba(22,199,132,.18);color:var(--green)}
.t-close{background:rgba(142,160,200,.18);color:var(--muted)}
.t-ban{background:rgba(255,92,114,.18);color:var(--red)}
.num-red{color:var(--red)}.num-green{color:var(--green)}
tr.row-banned td{background:rgba(236,58,110,.16)}
tr.row-banned:hover td{background:rgba(236,58,110,.24)}
.flash{animation:flash .8s ease}
@keyframes flash{0%{background:rgba(59,130,246,.28)}100%{background:transparent}}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters select,.filters input{background:var(--soft);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;color:var(--ink);font-size:16.5px}
label.fl{font-size:15.5px;color:var(--muted);display:block;margin-bottom:4px}

/* rounds */
.round{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--panel-2)}
.round .flag{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-size:21.5px;background:var(--soft)}
.round .meta{flex:1;min-width:0}.round .meta b{font-size:17.5px}.round .meta .sub{color:var(--muted);font-size:15.5px}
.round .cd{font-variant-numeric:tabular-nums;font-weight:700;color:var(--amber);font-size:16.5px}

/* exposure */
.exp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.exp-row .n{width:52px;font-weight:700;font-size:18.5px;text-align:center;background:var(--soft);border-radius:8px;padding:6px 0}
.exp-row .bar{flex:1;height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.exp-row .bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--red));transition:width .6s ease}
.exp-row .amt{width:92px;text-align:right;font-size:15.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.2s;cursor:pointer}
.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--green)}
.switch input:checked+.slider:before{transform:translateX(18px)}

.demo-note{background:linear-gradient(90deg,rgba(139,92,246,.14),transparent);border:1px solid color-mix(in srgb,var(--purple) 35%,var(--line));
  color:var(--purple);padding:8px 14px;border-radius:9px;font-size:16px;margin-bottom:18px;display:flex;gap:8px;align-items:center}
.footer{color:var(--muted);font-size:15.5px;text-align:center;padding:20px}
.help{color:var(--muted);font-size:15.5px}
.field{margin-bottom:14px}
.field input,.field select{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);font-size:17.5px}
.matrix td .switch{vertical-align:middle}

/* win-lose search panel (grouped lotto-type checkboxes) */
.search-panel{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.radio{display:flex;align-items:center;gap:8px;font-size:17px;cursor:pointer;padding:2px 0}
.radio input{accent-color:var(--brand)}
.wl-date{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:16.5px;width:100%}
.chk-scroll{max-height:70vh;overflow:auto}
.chk-group{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:10px;background:var(--panel-2)}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:3px 12px}
.chk-cat{grid-column:1/-1;font-weight:700;color:var(--ink);font-size:16.5px;margin-top:9px;padding:5px 0 4px;border-bottom:1px solid var(--line)}
.chk-grid .chk-cat:first-child{margin-top:0}
.chk{display:flex;align-items:center;gap:6px;font-size:16px;padding:2px 0;cursor:pointer;line-height:1.3}
.chk input{accent-color:var(--brand);flex:0 0 auto}
.chk.gh{font-size:17px;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:6px}
@media(max-width:900px){.search-panel{grid-template-columns:1fr}}

/* custom พ.ศ. date picker */
.dp-pop{position:absolute;z-index:70;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:10px;width:240px}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-head b{font-size:17px}
.dp-nav{background:var(--soft);border:1px solid var(--line);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--ink);font-size:19.5px;line-height:1}
.dp-nav:hover{background:var(--line)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow span{text-align:center;font-size:14.5px;color:var(--muted)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-grid span{text-align:center;padding:6px 0;font-size:16px;border-radius:8px}
.dp-day{cursor:pointer}
.dp-day:hover{background:var(--soft)}
.dp-day.today{outline:1px solid var(--brand)}
.dp-day.sel{background:var(--brand-2);color:#fff}
.dp-day.dis{opacity:.28;cursor:default;pointer-events:none}
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mp-mon{text-align:center;padding:11px 0;font-size:16.5px;border-radius:8px;cursor:pointer}
.mp-mon:hover{background:var(--soft)}
.mp-mon.sel{background:var(--brand-2);color:#fff}
.mp-mon.dis{opacity:.28;cursor:not-allowed}
.dp-nav.dis{opacity:.28;cursor:not-allowed}

/* win-lose report result table (grouped: member / self / company) */
.report-table{font-size:16.5px;white-space:nowrap;border-collapse:collapse;width:100%}
.report-table th{background:var(--panel-2);border:0;border-bottom:1px solid var(--line);
  text-align:center;padding:10px;color:var(--muted);font-weight:600;font-size:15px}
.report-table td{border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent);
  text-align:right;padding:10px;font-variant-numeric:tabular-nums}
.report-table td:first-child{text-align:left}
.report-table tbody tr:hover td{background:var(--soft)}
/* สีแบ่งกลุ่มในรายงานแพ้ชนะ: สมาชิก=ฟ้า · เอเย่นต์=ม่วง · บริษัท=เขียว */
.report-table th.g-mem{background:color-mix(in srgb,#3b82f6 20%,var(--panel-2));color:var(--ink)}
.report-table th.g-me{background:color-mix(in srgb,#8b5cf6 20%,var(--panel-2));color:var(--ink)}
.report-table th.g-co{background:color-mix(in srgb,#0ea5a0 20%,var(--panel-2));color:var(--ink)}
.report-table td.g-mem{background:color-mix(in srgb,#3b82f6 9%,transparent)}
.report-table td.g-me{background:color-mix(in srgb,#8b5cf6 9%,transparent)}
.report-table td.g-co{background:color-mix(in srgb,#0ea5a0 9%,transparent)}
.report-table th.g-me,.report-table td.g-me{border-left:2px solid color-mix(in srgb,#8b5cf6 45%,var(--line))}
.report-table th.g-co,.report-table td.g-co{border-left:2px solid color-mix(in srgb,#0ea5a0 45%,var(--line))}
.report-table tbody tr:hover td.g-mem{background:color-mix(in srgb,#3b82f6 16%,var(--panel))}
.report-table tbody tr:hover td.g-me{background:color-mix(in srgb,#8b5cf6 16%,var(--panel))}
.report-table tbody tr:hover td.g-co{background:color-mix(in srgb,#0ea5a0 16%,var(--panel))}
.num-zero{color:var(--muted)}

/* แบ่งหุ้น / เก็บของ — UI ใหม่ (สไลเดอร์ + บันทึกทันที) */
.sh-toolbar{padding:14px 16px}
.sh-bulk-title{font-weight:700;margin-bottom:10px}
.sh-bulk-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh-bulk-row .sh-lbl{white-space:nowrap}
.sh-bulk-row input[type=range]{flex:1;min-width:160px;max-width:340px;accent-color:var(--brand)}
.sh-hold{color:var(--muted);white-space:nowrap}
.sh-chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.sh-banner{margin:16px 0 0;padding:12px 18px;border-radius:12px 12px 0 0;font-weight:700;color:var(--ink);
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 20%,var(--panel)),var(--panel));
  box-shadow:inset 3px 0 0 var(--brand);border:1px solid var(--line);border-bottom:0;letter-spacing:.2px}
.sh-shownm{display:block;font-weight:400;font-size:15.5px;margin-top:4px;cursor:pointer}
.sh-shownm input{vertical-align:middle}
.sh-table td{vertical-align:middle;height:56px}
.sh-ctrl{display:flex;align-items:center;gap:10px;justify-content:center}
.sh-range{width:140px;accent-color:var(--brand);cursor:pointer}
.sh-pct{font-weight:700;min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--brand)}
.sh-over{border:none;background:transparent;font-size:19.5px;font-weight:700;cursor:pointer;line-height:1;
  width:30px;height:30px;border-radius:8px;color:#ef4444;transition:background .15s}
.sh-over.on{color:#16a34a}
.sh-over:hover{background:var(--soft)}
.sh-owner{font-weight:700;font-size:15.5px;color:var(--brand);margin-top:3px;letter-spacing:.3px}

/* ตารางตั้งค่า วงเงิน/อัตราจ่าย */
.cfg-table td{vertical-align:middle;height:54px}
.cfg-in{width:110px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--ink);font-family:inherit;font-size:16.5px;text-align:right;font-variant-numeric:tabular-nums}
.cfg-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.cfg-in:disabled,.cfg-lock{background:var(--soft);color:var(--muted);cursor:not-allowed;opacity:.6;border-style:dashed}

/* อัตราจ่าย/คอมมิชชั่น (per-member) */
.pr-modes{display:flex;gap:0;margin:0 0 12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);max-width:520px}
.pr-mode{flex:1;padding:12px 16px;border:0;background:var(--panel);color:var(--muted);font-family:inherit;font-size:17.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.pr-mode+.pr-mode{border-left:1px solid var(--line)}
.pr-mode.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.pr-groups{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pr-group{padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);
  font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pr-group:hover{background:var(--soft)}
.pr-group.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb}
.pr-presets{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pr-preset{padding:9px 20px;border:1px solid #d97706;border-radius:9px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;
  font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s;box-shadow:0 2px 8px rgba(249,115,22,.25)}
.pr-preset:hover{filter:brightness(1.06)}
.pr-preset:active{transform:scale(.97)}
.pr-preset.on{background:linear-gradient(135deg,#16c784,#0ea968);border-color:#0ea968;box-shadow:0 3px 11px rgba(14,169,104,.35)}
.pr-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.pr-scope{color:var(--muted);font-size:16.5px}
.pr-table th,.pr-table td{white-space:nowrap}
.pr-table .cfg-in{width:88px}
.pr-bulkrow{background:color-mix(in srgb,#3b82f6 7%,var(--panel))}
/* ช่องแถว "ตั้งค่าที่เลือก": พื้นเทา + เส้นใต้แดง ให้เด่น (เป็นช่อง master) */
.pr-bulkrow .cfg-in{background:color-mix(in srgb,#94a3b8 16%,var(--panel));border:1px solid var(--line);border-bottom:2.5px solid #e11d48}
.pr-bulkrow .cfg-in::placeholder{color:#8a93a6}
.pr-bulkrow .cfg-in:focus{background:var(--panel);border-color:var(--brand);border-bottom-color:#e11d48}
.pr-selrow{background:color-mix(in srgb,#3b82f6 10%,var(--panel))}
.pr-sel,#pr-all{width:18px;height:18px;cursor:pointer;accent-color:var(--brand);display:block;margin:0 auto}
/* คอลัมน์เลือก — ช่องติ๊กอยู่กึ่งกลางเซลล์ (ทั้งแนวตั้ง+แนวนอน) */
.pr-table th,.pr-table td{vertical-align:middle}
.pr-table .pr-selcol{width:44px;text-align:center;vertical-align:middle}

/* today's lotto results table (หน้าหลัก) */

/* ===== ออกผลรางวัล — modern & larger ===== */
.res-card{padding:22px 26px}
.res-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.res-head h3{margin:0;font-size:24.5px;font-weight:700}
.res-daypick{display:flex;align-items:center;gap:10px}
.res-daypick .fl{margin:0;font-size:16.5px;white-space:nowrap}
.res-daysel{padding:9px 14px;border:1.5px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);
  font-family:inherit;font-size:17.5px;font-weight:600;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.res-daysel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.res-table{width:auto;border-collapse:separate;border-spacing:0}
.res-table thead th{font-size:16.5px;font-weight:700;color:var(--muted);padding:6px 26px 16px;text-align:left;letter-spacing:.3px}
.res-table thead th.c{text-align:center}
.res-table th:first-child,.res-table td:first-child{min-width:190px}
.res-row td{padding:13px 26px;border-top:1px solid var(--line);vertical-align:middle}
.res-row td.c{text-align:center}
.res-row:hover{background:var(--soft)}
.res-lotto{display:flex;align-items:center;gap:13px;white-space:nowrap}
.res-lotto img{width:36px;height:26px;border-radius:8px;object-fit:cover;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.res-nm{display:flex;flex-direction:column;line-height:1.25}
.res-lotto .nm{font-size:20px;font-weight:700}
.res-ct{font-size:15px;color:var(--muted);font-weight:600;margin-top:2px}
.res-in{width:110px;height:54px;text-align:center;font-size:26.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:4px;
  border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;font-family:inherit}
.res-in::placeholder{color:var(--muted);opacity:.5;letter-spacing:0;font-weight:600}
.res-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.res-in.two{width:84px}
.res-in.err{border-color:#ec3a6e;box-shadow:0 0 0 4px rgba(236,58,110,.16);background:color-mix(in srgb,#ec3a6e 6%,var(--panel))}
.res-in.err::placeholder{color:#ec3a6e;opacity:.75}
.res-in:disabled{opacity:.65;cursor:not-allowed;background:var(--soft)}
.res-notyet{opacity:.72}
.res-draw.hot{color:#e11d48;font-weight:700}   /* ถึงเวลาออกผลแล้ว → แดง */
.res-draw.next{color:#16a34a;font-weight:700;animation:drawBlink 1s steps(1) infinite}   /* รายการถัดไปที่จะออก → เขียวกระพริบ */
@keyframes drawBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.res-wait{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:16.5px;font-weight:700;white-space:nowrap;
  background:var(--soft);border:1px dashed var(--line);padding:10px 16px;border-radius:12px;min-width:150px}
.res-closed{display:inline-flex;align-items:center;gap:5px;color:#8a93a6;font-size:16.5px;font-weight:700;white-space:nowrap;
  background:color-mix(in srgb,#8a93a6 8%,var(--soft));border:1px dashed color-mix(in srgb,#8a93a6 45%,var(--line));padding:10px 16px;border-radius:12px}
.res-save{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:17.5px;font-weight:700;
  padding:12px 22px;border:0;border-radius:12px;cursor:pointer;color:#fff;white-space:nowrap;min-width:150px;
  background:linear-gradient(135deg,#16c784,#0ea968);box-shadow:0 4px 13px rgba(14,169,104,.32);
  transition:transform .12s,box-shadow .12s,filter .12s}
.res-save:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(14,169,104,.42);filter:brightness(1.04)}
.res-save:active{transform:translateY(0) scale(.97)}
.res-save.done{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 13px rgba(37,99,235,.34)}
.res-act{display:inline-flex;align-items:center;gap:8px}
.res-act-x{flex:0 0 auto;width:44px;display:flex;justify-content:flex-start}   /* จองช่องปุ่มลบไว้เสมอ → ปุ่มบันทึกผลตรงกันทุกแถว */
.res-clear{border:1.5px solid color-mix(in srgb,#ec3a6e 40%,var(--line));background:color-mix(in srgb,#ec3a6e 8%,var(--soft));line-height:0;
  padding:9px 11px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s,transform .1s}
.res-clear svg{display:block}
.res-clear:hover{background:color-mix(in srgb,#ec3a6e 18%,var(--panel));border-color:#ec3a6e}
.res-clear:active{transform:scale(.9)}
/* ปุ่มตลาดปิด (คืนยอด) + ยกเลิก — อยู่แถวเดียวกัน ต่อจากถังขยะ */
.res-mclose{font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap;margin-left:2px;
  padding:9px 14px;border-radius:9px;border:1.5px solid color-mix(in srgb,#ec3a6e 45%,var(--line));
  background:color-mix(in srgb,#ec3a6e 8%,var(--soft));color:#d11d54;transition:background .12s,transform .1s}
.res-mclose:hover{background:color-mix(in srgb,#ec3a6e 16%,var(--panel));border-color:#ec3a6e}
.res-mclose:active{transform:scale(.97)}
.res-mopen{font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;padding:9px 16px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--soft);color:var(--ink);transition:background .12s}
.res-mopen:hover{background:var(--panel);border-color:var(--brand)}
/* แถวตลาดปิด/คืนยอด — พื้นหลังชมพูโปร่งแสง + แท็บชมพู */
.res-refund td{background:rgba(236,58,110,.09)}
.res-refund-tag{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:16.5px;font-weight:700;
  color:#d11d54;background:rgba(236,58,110,.14);border:1px solid rgba(236,58,110,.45);border-radius:12px;padding:9px 16px}
@media(max-width:720px){.res-card{padding:16px 14px}.res-head h3{font-size:21.5px}}

/* lotto catalog (ตั้งค่าหวย) */
.lotto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lotto-cell{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;background:var(--panel-2);font-size:16.5px}
.lotto-cell span{display:flex;align-items:center;gap:8px}

/* inline lotto-name editor (settings modal) */
.lt-name{display:inline-flex;align-items:center;gap:6px}
.ln-edit{background:none;border:0;cursor:pointer;font-size:15.5px;opacity:.5;padding:0 2px;line-height:1}
.ln-edit:hover{opacity:1}
.name-input{background:var(--soft);border:1px solid var(--brand);border-radius:8px;padding:3px 7px;color:var(--ink);font-size:16.5px;width:140px}

@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}.two,.three{grid-template-columns:1fr}}
@media(max-width:860px){.sidebar{display:none}.cards{grid-template-columns:1fr}}

/* ===== เพิ่มเมมเบอร์/เอเย่นต์ (create-user modal · แบบละเอียด) ===== */
.modal-overlay:has(.cu-modal){padding:0}
.cu-modal{max-width:none;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
.cu-modal .modal-b{flex:1 1 auto;max-height:none;overflow:auto}
.cu-modal #cu-form{max-width:1080px;margin:0 auto}
.cu-modal .modal-h{padding:18px 26px}
.cu-modal .modal-h h3{font-size:23.5px}
.cu-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
.cu-grid .fg.full{grid-column:1/-1}
.cu-userrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cu-userrow input[name=username]{flex:1;min-width:180px}
.cu-rnd{display:inline-flex;align-items:center;gap:6px;font-size:16.5px;color:var(--muted);white-space:nowrap;cursor:pointer}
.cu-setup{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.cu-setup-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cu-setup-h b{font-size:19.5px}
.cu-copysel{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-family:inherit;min-width:210px;cursor:pointer}
.cu-lg{width:100%;border-collapse:collapse;font-size:17.5px;margin-top:8px}
.cu-lg th{background:var(--panel-2);color:var(--muted);border:0;border-bottom:1px solid var(--line);
  padding:11px 14px;font-weight:600;font-size:15px;text-align:left}
.cu-lg-title{text-align:center!important;background:var(--soft)!important;color:var(--ink)!important;letter-spacing:.3px}
.cu-lg td{border:1px solid var(--line);padding:10px 14px}
.cu-lg tbody tr:hover td{background:var(--soft)}
.cu-lg-all td{background:color-mix(in srgb,var(--brand) 11%,var(--panel));font-weight:700}
.cu-tgl{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.cu-onoff{font-size:16.5px;font-weight:700;color:var(--green);min-width:26px;text-align:left}
.cu-onoff.off{color:var(--red)}

/* ===== hero banner (หน้าหลัก/ข่าวสาร) ===== */
/* ===== live chat widget (agent) ===== */
.chatw{position:fixed;right:22px;bottom:22px;z-index:900;font-family:inherit}
.chatw-fab{position:relative;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;font-size:27.5px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .15s}
.chatw-fab:hover{transform:translateY(-2px)}
.chatw-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:9px;background:#ec3a6e;color:#fff;
  font-size:15.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--panel)}
.chatw-panel{position:absolute;right:0;bottom:70px;width:344px;height:472px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.32);display:flex;flex-direction:column;overflow:hidden}
.chatw-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.chatw-title{flex:1;font-weight:700;font-size:18.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatw-back,.chatw-x{background:rgba(255,255,255,.2);border:0;color:#fff;width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:19.5px;line-height:1}
.chatw-rooms{flex:1;overflow-y:auto}
.chatw-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:16.5px}
.chatw-room{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer}
.chatw-room:hover{background:var(--soft)}
.chatw-room.un{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.chatw-ava{width:38px;height:38px;border-radius:50%;background:var(--brand-2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.chatw-rmeta{flex:1;min-width:0}
.chatw-rname{font-weight:700;font-size:17px;display:flex;align-items:center;gap:6px}
.chatw-rlast{color:var(--muted);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatw-rtime{color:var(--muted);font-size:14.5px;flex:0 0 auto}
.chatw-dot{width:8px;height:8px;border-radius:50%;background:#ec3a6e;display:inline-block}
.chatw-bell{display:inline-block;transform-origin:50% 0;animation:chatw-ring 1.1s ease-in-out infinite}
@keyframes chatw-ring{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-20deg)}70%{transform:rotate(15deg)}78%{transform:rotate(-9deg)}86%{transform:rotate(5deg)}}
.chatw-rnew{flex:0 0 auto;background:#ec3a6e;color:#fff;font-size:14px;font-weight:700;padding:3px 9px;border-radius:12px;white-space:nowrap;
  box-shadow:0 2px 7px rgba(236,58,110,.42);animation:chatw-pulse 1.4s ease-in-out infinite}
@keyframes chatw-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.chatw-ava{position:relative}
.chatw-avadot{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:#ec3a6e;border:2px solid var(--panel)}
.chatw-fab:has(.chatw-badge:not([hidden])){animation:chatw-fab-pulse 1.6s ease-in-out infinite}
@keyframes chatw-fab-pulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.28)}50%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 7px rgba(236,58,110,.18)}}
.chatw-conv{flex:1;display:flex;flex-direction:column;min-height:0}
.chatw-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--soft)}
.chatw-msg{display:flex;flex-direction:column;max-width:78%}
.chatw-msg.me{align-self:flex-end;align-items:flex-end}
.chatw-msg.them{align-self:flex-start;align-items:flex-start}
.chatw-bubble{padding:8px 12px;border-radius:12px;font-size:17px;line-height:1.35;word-break:break-word}
.chatw-msg.me .chatw-bubble{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-bottom-right-radius:4px}
.chatw-msg.them .chatw-bubble{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.chatw-mtime{font-size:13.5px;color:var(--muted);margin-top:2px}
.chatw-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel)}
.chatw-input input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:20px;background:var(--soft);color:var(--ink);font-family:inherit;font-size:17px}
.chatw-input input:focus{outline:none;border-color:var(--brand)}
.chatw-input button{border:0;border-radius:20px;padding:0 16px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;font-family:inherit}
/* attribute hidden ต้องชนะ display:flex ของคลาส (ไม่งั้นปิด/ซ่อนไม่ได้) */
.chatw-panel[hidden],.chatw-conv[hidden],.chatw-badge[hidden]{display:none}
@media(max-width:560px){.chatw-panel{width:calc(100vw - 44px)}}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:32px;box-shadow:var(--sh)}
.login-card .logo{width:54px;height:54px;border-radius:12px;font-size:25.5px;margin:0 auto 14px}
.login-card h2{text-align:center;margin:0 0 4px}
.login-card .sub{text-align:center;color:var(--muted);font-size:16.5px;margin-bottom:24px}
.login-card .demo{background:var(--soft);border:1px dashed var(--line);border-radius:9px;padding:10px 12px;
  font-size:15.5px;color:var(--muted);margin-bottom:18px;text-align:center}
.login-top{position:fixed;top:16px;right:16px}

/* ===== Modal / toast (create-user) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(4,8,18,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:560px;
  box-shadow:var(--sh);max-height:92vh;display:flex;flex-direction:column}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:20.5px}
.modal-h .x{cursor:pointer;color:var(--muted);font-size:23.5px;line-height:1;background:none;border:0}
.modal-b{padding:20px;overflow:auto}
.modal-f{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1 / -1}
.fg label{font-size:15.5px;color:var(--muted);display:block;margin-bottom:5px}
.fg input,.fg select{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);font-size:17px}
.fg .req{color:var(--red)}
.err-box{background:rgba(255,92,114,.12);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);
  color:var(--red);padding:9px 12px;border-radius:9px;font-size:16.5px;margin-bottom:14px;display:none}
.rpc-tag{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;color:var(--muted);
  background:var(--soft);border:1px solid var(--line);padding:3px 8px;border-radius:8px}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:12px 20px;
  border-radius:9px;box-shadow:var(--sh);z-index:9999;font-size:17.5px;font-weight:600;max-width:calc(100vw - 32px);
  text-align:center;animation:toast-in .25s ease}
.toast.err{background:var(--red)}
@keyframes toast-in{from{transform:translate(-50%,-14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.chk-row{display:flex;align-items:center;gap:10px;margin-top:4px}
/* deposit/withdraw toggle (credit modal) */
.dw-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dw-btn{padding:13px;border-radius:12px;border:1.5px solid var(--line);background:var(--soft);color:var(--muted);
  font-weight:700;font-size:18.5px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.dw-btn:hover{border-color:var(--brand);color:var(--ink)}
.dw-btn.active[data-type="DEPOSIT"]{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 16px rgba(22,199,132,.3)}
.dw-btn.active[data-type="WITHDRAW"]{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(255,92,114,.3)}

/* status dropdown (manage-members) */
.status-select{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px 10px;
  font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.status-select:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.status-select.t-open{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.status-select.t-ban{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.status-select.t-wait{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}

/* ═══ การ์ด KPI ไล่สี (โครง Arclon) — ใช้ทั้งโทนถ่านและโทนสว่าง เพราะพาสีของตัวเองมา ═══ */
.kpi-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);margin-bottom:16px}
@media (max-width:1240px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kpi-grid{grid-template-columns:1fr}}
.kpi{position:relative;display:flex;border-radius:20px;overflow:hidden;color:#fff;min-height:176px;
  background:linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
  box-shadow:0 12px 26px -12px var(--glow),0 2px 6px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease}
.kpi:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px var(--glow),0 3px 9px rgba(0,0,0,.32)}
/* ขอบแสงบนสุด — ตัวที่ทำให้การ์ดไล่สีดูมีน้ำหนัก ไม่แบน */
.kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),inset 0 0 0 1px rgba(255,255,255,.13)}
/* แสงมุมขวาบน + ม่านดำครึ่งล่าง — ม่านคือตัวที่ทำให้ตัวหนังสือขาวแถวล่างอ่านออกจริง */
.kpi-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 95% at 88% -18%,rgba(255,255,255,.26),transparent 56%),
             linear-gradient(180deg,transparent 40%,rgba(0,0,0,.26))}
.kpi-spark{position:absolute;left:0;right:0;bottom:44px;height:72px;opacity:.46;pointer-events:none}
.kpi-spark svg{display:block;width:100%;height:100%}
.kpi-in{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 18px 14px;min-width:0}
.kpi-top{display:flex;align-items:flex-start;gap:10px}
.kpi-t{font-size:16.5px;font-weight:700;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px}
.kpi-q{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.24);display:grid;place-items:center;
  font-size:13px;font-style:normal;flex:none;line-height:1;cursor:help}
.kpi-ic{margin-inline-start:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:20.5px;background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.kpi-v{margin-top:22px;font-size:33.5px;font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v .cur{font-size:23.5px;font-weight:700;letter-spacing:0;margin-inline-end:2px;opacity:.9}
.kpi-rule{margin-top:auto;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.40),rgba(255,255,255,.05))}
.kpi-bot{display:flex;align-items:center;gap:7px;padding-top:12px;font-size:15px}
/* เม็ดยาใช้ frost "ดำ" ไม่ใช่ขาว — frost ขาวจะทำพื้นสว่างขึ้น = ตัวหนังสือขาวอ่านยากลง */
.kpi-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;font-weight:700;flex:none;
  background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-variant-numeric:tabular-nums}
.kpi-cmp{opacity:.92;white-space:nowrap;min-width:0}
.kpi-go{margin-inline-start:auto;opacity:.8;flex:none;font-size:16.5px}
/* 🔴 สีการ์ด = ตำแหน่ง ไม่ใช่สัญญาณ — ลูกศรในเม็ดยาต่างหากที่บอกดี/ไม่ดี
   (จ่ายออกลดลง = ดีสำหรับเจ้ามือ แต่การ์ดยังแดงเหมือนเดิม)
   โทนเข้มอยู่มุมบนซ้ายที่มีตัวหนังสือเสมอ → ตัวหนังสือขาวผ่าน 4.5:1 ทุกใบ */
.kpi.c-bet{--c1:#0A6F48;--c2:#12A06B;--c3:#34C98D;--glow:rgba(10,111,72,.45)}
.kpi.c-pay{--c1:#A81F46;--c2:#DE2F58;--c3:#F4677F;--glow:rgba(168,31,70,.42)}
.kpi.c-net{--c1:#5B25B7;--c2:#7A45E6;--c3:#A17CF5;--glow:rgba(91,37,183,.44)}
.kpi.c-rat{--c1:#9A5A05;--c2:#D9820B;--c3:#F3B44A;--glow:rgba(154,90,5,.42)}
@media (prefers-reduced-motion:reduce){.kpi{transition:none}.kpi:hover{transform:none}}
@media print{.kpi{background:#fff;color:#111;box-shadow:none;border:1px solid #ccc}
  .kpi-glow,.kpi-spark{display:none}.kpi::after{box-shadow:none}
  .kpi-pill{background:#eee;color:#111;box-shadow:none}}

/* การ์ดสรุปเล็ก (จำนวนเงิน/สมาชิก/ออนไลน์) — ไอคอนในกล่อง + ป้าย + ตัวเลข ภาษาเดียวกับ Arclon */
.mstat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  display:flex;align-items:center;gap:13px}
.mstat-ic{width:38px;height:38px;border-radius:var(--r-ct);display:grid;place-items:center;font-size:20.5px;flex:none;
  background:var(--soft);border:1px solid var(--line)}
.mstat-k{font-size:15.5px;color:var(--muted)}
.mstat-v{font-size:24.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:1px}

/* ═══ หัวหน้า: แบรนด์ (แถบข้าง) + แถบบน — ออกแบบใหม่ 2026-08-21 ═══
   ปัญหาเดิม: แถบบนว่างเปล่าทั้งแถบ เหลือแค่ปุ่มเฟืองมุมขวา = ดูเหมือนหน้าพัง
   ทางแก้: ยก "ชื่อหน้า + breadcrumb + ปุ่มของหน้า" จาก .page-head ขึ้นมาอยู่บนแถบบน
   (JS ยังอ้าง #title/#crumbs/#head-actions ด้วย id เดิม → ไม่ต้องแก้ตรรกะเลย) */
.brand-mark{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,#F2C85A,#D9820B);box-shadow:0 3px 10px rgba(217,130,11,.28)}
.brand-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.15}
.brand .jj-logo{padding-bottom:0}
.brand small{margin-top:3px}

.tb-head{min-width:0;display:flex;flex-direction:column;justify-content:center}
.tb-head h1{font-size:21.5px;margin:0;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-head .crumbs{color:var(--muted);font-size:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.tb-ic{width:36px;height:36px;border-radius:9px;font-size:18px;flex:none}
/* ปุ่มผู้ใช้ — เดิมเป็นเฟืองลอยๆ ไม่บอกว่าใครล็อกอินอยู่ */
.icon-btn#gear-btn{width:42px;height:42px;font-size:23px;border-radius:9px}   /* ของเดิม เผื่อหน้าอื่นยังใช้ */
.tb-user{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 5px;border-radius:99px;flex:none;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;font-family:inherit}
.tb-user:hover{background:var(--soft)}
.tb-ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--brand),var(--purple));color:#fff;font-size:14.5px;font-weight:700}
.tb-who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.tb-who b{font-size:15.5px;font-weight:700}
/* 🔴 ไทยในฟอนต์ mono + letter-spacing = ตัวห่างอ่านยาก (mono ไว้ใช้กับตัวเลข/ละตินเท่านั้น) */
.tb-who i{font-style:normal;font-size:13px;color:var(--muted);letter-spacing:0}
.tb-caret{width:6px;height:6px;flex:none;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);
  transform:rotate(45deg);margin-top:-3px}
@media(max-width:1000px){.tb-who,.tb-caret{display:none}.tb-user{padding:0 6px}}
@media(max-width:760px){.tb-head .crumbs{display:none}}

/* ═══ กระดานผลหวยวันนี้ — แทนตาราง 8 คอลัมน์ (4 คอลัมน์เดิมไม่มีข้อมูล) ═══
   ตลาดละ 1 การ์ด เรียงตามเวลาปิดรับ → กวาดตาทั้งวันได้ในหน้าจอเดียว */
.panel-h{display:flex;align-items:baseline;gap:12px}
.rday-sub{margin-inline-start:auto;color:var(--muted);font-size:14.5px}
.rday{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));gap:12px;margin-top:14px}
.rcard{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px 12px;
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden}
/* แถบสีซ้าย = สถานะ (สีบอกอย่างเดียวไม่พอ → มีป้ายคำกำกับเสมอ) */
.rcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--line)}
.rcard.s-done::before{background:var(--green)}
.rcard.s-wait::before{background:var(--amber)}
.rcard.s-open::before{background:color-mix(in srgb,var(--brand) 55%,transparent)}
.rcard.s-off{opacity:.6}
.rc-top{display:flex;align-items:center;gap:10px}
/* ธงชาติ — ตัวแยกตลาดที่แท้จริง (24 ตลาดใช้สีหมวดแค่ 2 สี ย่อมกลืนกันหมด) */
.rc-flag{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;line-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,.20)}
.rc-flag svg{display:block}
.rc-id{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.rc-id b{font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-id i{font-style:normal;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rc-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-inline-end:6px;vertical-align:middle}
.rc-dot.c-bl{background:var(--brand)}.rc-dot.c-cy{background:var(--teal)}
.rc-dot.c-am{background:var(--amber)}.rc-dot.c-gn{background:var(--green)}
.rc-top .tag{margin-inline-start:auto}
.rc-nums{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.rc-n{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-ct);padding:7px 9px;text-align:center}
.rc-n i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.rc-n b{display:block;font-size:22px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1.15}
.rcard.s-done .rc-n b{color:var(--green)}
.rcard.s-wait .rc-n b{color:var(--amber)}
.rcard.s-open .rc-n b{color:var(--muted);letter-spacing:.14em}
.rc-off{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-ct);
  padding:11px 9px;text-align:center;font-size:14.5px;color:var(--muted)}