/* ===== ฟอนต์ Anuphan — ไฟล์อยู่ในโปรเจกต์เอง (/assets/fonts) ไม่ดึงจากเน็ต
   แยก subset ไทย/ละติน + น้ำหนัก 400/600 → เบราว์เซอร์โหลดเฉพาะชุดที่ต้องใช้จริง ===== */
/* ฟอนต์ Anuphan ประกาศที่ `styles.css` ที่เดียว (variable 100–700)
   🔴 ของเดิมประกาศซ้ำที่นี่ด้วย แต่ชี้ไฟล์ที่มีแค่ 400/600 ⇒ ประกาศชนกัน
      เบราว์เซอร์เลือกอันไหนก็ได้ → บางหน้าได้ตัวหนาจริง บางหน้าได้ faux bold */

/* ==========================================================================
   m.css — ชั้น mobile-first ที่ทับ style เดิมของทุกหน้า member
   โหลดหลัง /styles.css และหลัง <style> ในหน้า (อยู่ก่อน </head>) → กฎที่นี่ชนะ
   ทำงานร่วมกับ m.js (สร้าง top-bar + bottom tab-bar + PWA)
   ธีมสว่าง/มืด: อ้าง var(--bg/--panel/--line/--ink/--muted/--brand-2/--soft/...) จาก styles.css
   ========================================================================== */
:root{
  --ui:'LottoNum','Anuphan',"Noto Sans Thai",-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-sm:8px; --r-ct:9px; --r:12px; --r-xl:20px; --r-pill:99px;

  --m-topbar-h:52px;
  --m-tabbar-h:58px;
  --m-gold:#e0b64a;
  --m-safe-b:env(safe-area-inset-bottom,0px);
}

/* ---- โครงพื้นฐาน / กันหน้าเลื่อนแนวนอน ---- */
html,body{max-width:100%;overflow-x:hidden}
*{-webkit-tap-highlight-color:rgba(224,182,74,.18)}
/* ฟอนต์เดียวกับหลังบ้าน (Anuphan · ไฟล์อยู่ในโปรเจกต์ ไม่ยิงออกเน็ต) + วรรณยุกต์ไทยไม่โดนตัด: line-height ใจกว้าง */
body{font-family:var(--ui)}
.ms-content,.bet-content{line-height:1.6}
/* ตัวเลขในตาราง/ยอด = ไม่เต้น */
.ms-info .v,.ms-bal,.fin-tbl td,.ck-tbl td,.res-tbl td,.pf-tbl td,.recent-tbl td,.stat7-tbl td,
.m-bal b,.mstat .v,.mrow .n,.heat-cell,.numchip,.mtable td{font-variant-numeric:tabular-nums}

/* ==========================================================================
   MOBILE (≤900px) — sidebar หาย → มี top-bar (ยอดเงิน) + tab-bar (นิ้วโป้ง)
   ========================================================================== */
@media(max-width:900px){
  .ms-side{display:none!important}
  .ms-app{min-height:auto}

  /* top-bar (m.js สร้าง) : แบรนด์ + เครดิตสด + ออกจากระบบ */
  .m-topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    height:var(--m-topbar-h);padding:0 12px;color:#eef2fb;
    background:linear-gradient(118deg,#0C443F 0%,#14524E 48%,#1E6E68 100%);
    box-shadow:0 2px 12px rgba(6,40,36,.4);padding-top:env(safe-area-inset-top,0px)}
  .m-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:20.5px;white-space:nowrap;
    background:linear-gradient(95deg,#f5db8b,#d8b661 45%,#b9c0cc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .m-brand span{-webkit-text-fill-color:initial}
  .m-bal{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
  .m-bal small{font-size:13.5px;color:#9fb0d0}
  .m-bal b{font-size:19.5px;font-weight:700;color:#16c784}
  .m-logout{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:9px;background:rgba(255,255,255,.08);
    color:#e6b4c4;font-size:21px;cursor:pointer;display:grid;place-items:center}
  .m-logout:active{background:rgba(255,255,255,.16)}

  /* nav เดิม → แถบเลื่อนแนวนอนแถวเดียว ใต้ top-bar */
  .ms-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;top:var(--m-topbar-h);
    scrollbar-width:none;gap:4px;padding:8px 10px}
  .ms-nav::-webkit-scrollbar{display:none}
  .ms-nav a{flex:0 0 auto;min-height:40px;font-size:17px}

  /* content: กระชับ + เว้นล่างให้ tab-bar */
  .ms-content{padding:14px 12px 26px!important}
  .bet-content{padding:12px 12px 24px!important}
  body.m-has-tabbar .ms-content,body.m-has-tabbar .bet-content{padding-bottom:calc(var(--m-tabbar-h) + var(--m-safe-b) + 18px)!important}

  /* bottom tab-bar (m.js สร้าง) */
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
    background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:var(--m-safe-b);box-shadow:0 -2px 14px rgba(0,0,0,.12)}
  .m-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    height:var(--m-tabbar-h);color:var(--muted);font-size:14px;font-weight:700;text-decoration:none;position:relative}
  .m-tabbar a .ic{font-size:24.5px;line-height:1}
  .m-tabbar a.active{color:var(--brand-2)}
  .m-tabbar a.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--brand-2)}

  /* chat bubble ยกขึ้นเหนือ tab-bar (กันทับปุ่มบันทึก) */
  body.m-has-tabbar #mchat{bottom:calc(var(--m-tabbar-h) + var(--m-safe-b) + 14px)!important}
  #mchat{right:14px!important}
  .mc-panel{bottom:64px!important}

  /* tap target ≥44px ทุกปุ่มหลัก */
  .btn,.btn-go,.btn-search,.fin-tab,.bet-tabs button,.type-btns button,.rt-view,.date-btn,
  .btn-add,.btn-save,.btn-clear,.btn-rev,.mbtn,.mseg button,.numchip,.pf-action{min-height:44px}
  .fin-tabs{gap:8px}
  .fin-tab{flex:1}

  /* หัวข้อหน้าเล็กลงนิด บนจอแคบ */
  .ck-title,.tk-title,.pf-title{font-size:21px}

  /* ตารางกว้าง = เลื่อนในกล่องตัวเอง (มีอยู่แล้ว แต่ย้ำ momentum + ไม่ดันหน้า) */
  .fin-wrap,.ck-wrap,.res-wrap,.mtable-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
}

/* ==========================================================================
   ชุดคอมโพเนนต์กลาง — ใช้ทั้งหน้าใหม่ (สถิติ/ฝัน/เลขโปรด) และการ์ดคืนยอด
   ========================================================================== */
.mwrap{max-width:760px;margin:0 auto}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.mhead h1{font-size:24.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.msub{color:var(--muted);font-size:16.5px;margin:-6px 0 14px}

.mcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.mcard-h{font-size:18.5px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px}

/* segmented control (สลับโหมด) */
.mseg{display:flex;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px}
.mseg button{flex:1;border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;font-size:17.5px;
  padding:10px 8px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.mseg button.active{background:var(--panel);color:var(--brand-2);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* stat tiles */
.mstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.mstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mstat .lbl{color:var(--muted);font-size:15.5px;margin-bottom:4px}
.mstat .v{font-size:25.5px;font-weight:700}
.mstat .v.up{color:var(--brand-2)} .mstat .v.dn{color:var(--red)} .mstat .v.pos{color:var(--green)}

/* number chips (กดเพื่อไปแทง) */
.numgrid{display:flex;flex-wrap:wrap;gap:8px}
.numchip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:58px;padding:9px 12px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--soft);color:var(--ink);font-family:inherit;font-weight:700;font-size:21.5px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:transform .06s,border-color .15s}
.numchip small{font-size:13.5px;font-weight:600;color:var(--muted)}
.numchip:active{transform:scale(.94)}
.numchip.hot{border-color:transparent;background:linear-gradient(135deg,#ff7a59,#ec3a6e);color:#fff}
.numchip.hot small{color:rgba(255,255,255,.85)}
.numchip.cold{border-color:transparent;background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff}
.numchip.cold small{color:rgba(255,255,255,.85)}
.numchip.fav{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,var(--panel))}

/* heatmap 100 ช่อง (00–99) */
.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.heat-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-size:14.5px;font-weight:700;color:var(--ink);background:var(--soft);cursor:pointer;font-variant-numeric:tabular-nums;
  border:1px solid transparent;transition:transform .06s}
.heat-cell:active{transform:scale(.9)}
.heat-cell.sel{outline:2px solid var(--brand-2);outline-offset:-2px}
.heat-legend{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15.5px;color:var(--muted)}
.heat-bar{flex:1;height:10px;border-radius:8px;background:linear-gradient(90deg,var(--soft),#f5b301,#ec3a6e)}

/* list rows (ฝัน/เลขโปรด/หวยชุด) */
.mrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .kw{font-weight:700;flex:1;min-width:0}
.mrow .kw small{display:block;color:var(--muted);font-weight:400;font-size:15.5px;margin-top:2px}
.mrow .n{font-weight:700;color:var(--brand-2);font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* generic table for new pages */
.mtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.mtable{width:100%;border-collapse:collapse;font-size:17px}
.mtable th{background:var(--soft);color:var(--muted);font-weight:700;padding:10px 12px;text-align:left;white-space:nowrap}
.mtable td{padding:10px 12px;border-top:1px solid var(--line);text-align:left}
.mtable td.r,.mtable th.r{text-align:right}

/* ปุ่มหลัก / รอง */
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;
  padding:12px 18px;font-family:inherit;font-weight:700;font-size:18.5px;cursor:pointer;background:var(--brand-2);color:#fff}
.mbtn:active{filter:brightness(.95)}
.mbtn.ghost{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.mbtn.gold{background:linear-gradient(135deg,#ffce3a,#ff9c2b);color:#3a2c00}
.mbtn.block{width:100%}

/* empty state (ซื่อสัตย์: ยังไม่มีข้อมูล — ห้าม hardcode) */
.mempty{text-align:center;color:var(--muted);padding:34px 18px;background:var(--panel);border:1px dashed var(--line);border-radius:12px}
.mempty .em-ic{font-size:37px;margin-bottom:8px;opacity:.8}
.mempty .em-t{font-weight:700;color:var(--ink);margin-bottom:4px}
.mskel{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--soft),color-mix(in srgb,var(--muted) 18%,var(--soft)),var(--soft));
  background-size:200% 100%;animation:mskel 1.2s linear infinite}
@keyframes mskel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* การ์ดคืนยอดเสีย (finance) */
.lossback{background:linear-gradient(135deg,#2a2e35,#3a2c00);border:1px solid var(--amber);border-radius:12px;
  padding:16px 18px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.lossback::after{content:"";position:absolute;right:-6px;bottom:-10px;font-size:78px;opacity:.12}
.lossback h3{margin:0 0 4px;font-size:19.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.lossback .lb-sub{font-size:16px;color:#ffe6b0;opacity:.9;margin-bottom:12px;line-height:1.5}
.lossback .lb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.lossback .lb-box{background:rgba(255,255,255,.06);border-radius:9px;padding:10px 12px}
.lossback .lb-box .k{font-size:14.5px;color:#cdd5e8}
.lossback .lb-box .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;color:#ffd479}
.lossback .lb-cta{width:100%;border:0;border-radius:9px;padding:12px;font-family:inherit;font-weight:700;font-size:18.5px;cursor:pointer;
  background:linear-gradient(135deg,#ffce3a,#ff9c2b);color:#3a2c00}
.lossback .lb-cta:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}

/* ==========================================================================
   หน้าแทง (bet.html) — มือถือ: แถบบันทึกติดล่างในระยะนิ้วโป้ง + คีย์แพดกดง่ายมือเดียว
   ========================================================================== */
@media(max-width:900px){
  /* แถบสรุป+บันทึก = fixed ล่างสุด (แทน tab-bar) — เห็นยอดรวมและกดบันทึกได้ตลอด */
  .bet-page .foot{position:fixed;left:0;right:0;bottom:0;z-index:44;flex-direction:row;justify-content:space-between;
    align-items:center;gap:10px;border-top:1px solid var(--line);background:var(--panel);
    box-shadow:0 -3px 16px rgba(0,0,0,.16);padding:10px 14px calc(10px + var(--m-safe-b))}
  .bet-page .foot .foot-timer,.bet-page .foot .foot-title{display:none}   /* ชื่อ/เวลา มีบนหัวแล้ว */
  .bet-page .foot .foot-info{text-align:left;flex:1 1 auto}
  .bet-page .foot .sum{font-size:21.5px;text-align:left}
  .bet-page .foot .acts{gap:8px;flex:0 0 auto}
  .bet-page .foot .btn-save{padding:13px 22px}
  .bet-page .foot .btn-clear{padding:13px 14px}
  .bet-page .bet-content{padding-bottom:calc(78px + var(--m-safe-b))!important}
  .bet-page #mchat{bottom:calc(76px + var(--m-safe-b))!important}

  /* คีย์แพดแทงเร็ว: ช่องเลขเต็มแถว → บน/ล่าง คู่กัน → เพิ่มบิลเต็มแถว (นิ้วโป้งเดียว) */
  .entry-row{gap:10px;align-items:stretch}
  #num-group{flex:1 1 62%}
  .btn-rev{flex:0 0 32%;align-self:stretch;margin-top:18px}
  .entry-row .ib.amt{flex:1 1 calc(50% - 5px)}
  .ib input,.ib.amt input{width:100%}
  .btn-add{flex:1 1 100%;align-self:stretch;padding:14px}
  #panel-paste .entry-row .ib.amt{flex:1 1 calc(50% - 5px)}
  /* จับวิน / เลขเบิ้ล: แป้นเต็มความกว้าง ไม่ล้นจอ */
  .win-pad{grid-template-columns:repeat(5,1fr)}
  .win-pad button{padding:14px 0;font-size:23.5px}
  /* ตาราง grid/paste กว้างเกิน = เลื่อนในกล่องตัวเอง */
  #panel-grid{overflow-x:auto}
  .grid-tbl{min-width:340px}
  /* การ์ดหัวหวย/แท็บโหมด อ่านง่ายขึ้น */
  .lot-head-top{font-size:19.5px}
  .bet-tabs{gap:6px}
  .bet-tabs button{flex:1;padding:11px 8px;font-size:17px}
}

/* desktop: ให้ top-bar/tab-bar ไม่โผล่ (ใช้ sidebar เดิม) */
@media(min-width:901px){ .m-topbar,.m-tabbar{display:none!important} }

/* ===== ไทม์ไลน์สถานะถอน (P0 หน้า AUTO) =====================================
   ทำไมต้องมี: 0067 แยก "อนุมัติ" ออกจาก "โอนจริง" แล้ว — ถ้าหน้าโชว์ได้แค่ "รอ"
   ผู้เล่นจะโทรถามทุกครั้ง (แชทอันดับ 1 ของ CS)
   จุดที่ "ถึงแล้ว" ต้องมีเวลาจริงกำกับเสมอ — จุดที่ยังไม่ถึงโชว์ "—" ไม่ใช่เดาให้ดูดี */
.wd-item{padding:14px 16px}
.wd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.wd-head .amt{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.wd-head .amt small{font-size:15px;font-weight:600;color:var(--muted)}
.wd-tl{display:flex;align-items:flex-start;margin:12px 0 6px}
.wd-tl-i{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;min-width:74px;text-align:center}
.wd-tl-i .dot{width:11px;height:11px;border-radius:50%;background:var(--line);
  border:2px solid var(--panel);box-shadow:0 0 0 2px var(--line)}
.wd-tl-i.on .dot{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.wd-tl-i .lb{font-size:14.5px;font-weight:700;color:var(--muted);line-height:1.35}
.wd-tl-i.on .lb{color:var(--ink)}
.wd-tl-i .tm{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.wd-tl .bar{flex:1;height:2px;background:var(--line);margin-top:6px;min-width:12px}
/* เส้นก่อนจุดที่ถึงแล้ว = เขียว (ใช้ :has ได้ทุกเบราว์เซอร์ที่รองรับ · ไม่รองรับก็แค่เส้นเทา ไม่พัง) */
.wd-tl .bar:has(+ .wd-tl-i.on){background:var(--green)}
.wd-item .meta{font-size:15px;color:var(--muted);margin-top:2px}
.wd-item .meta b{color:var(--ink);font-family:var(--mono);font-size:14.5px}

/* ===== เลขอั้น / จ่ายครึ่ง (P0 หน้า AUTO) ===================================
   บอกก่อนกดยืนยัน ไม่ใช่ให้รู้ตอนถูกตีกลับ — ที่ผ่านมาการถูกปฏิเสธรายบรรทัด
   ถูกอ่านว่า "เว็บโกง" ทุกครั้ง ทั้งที่เป็นกติกาที่ประกาศได้ตามปกติของวงการ */
.rs-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:10px;padding:11px 13px;margin:0 0 12px}
.rs-head{font-weight:700;font-size:16.5px;margin-bottom:8px}
.rs-sec{margin-bottom:8px}
.rs-t{font-size:14.5px;font-weight:700;margin-bottom:5px}
.rs-t-c{color:var(--red)} .rs-t-h{color:var(--amber)}
.rs-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:4px}
.rs-pay{font-size:14px;color:var(--muted);margin-right:4px;min-width:56px}
.rs-chip{font-family:var(--mono);font-size:14.5px;font-weight:600;padding:1px 7px;border-radius:6px;letter-spacing:.02em}
.rs-chip.c{background:rgba(224,56,74,.13);color:var(--red)}
.rs-chip.h{background:rgba(217,130,11,.15);color:var(--amber)}
.rs-more{font-size:14px;color:var(--muted)}
.rs-note{font-size:13.5px;color:var(--muted);margin-top:2px}
.bw{border-radius:10px;padding:10px 12px;margin:8px 0 0;font-size:15.5px;line-height:1.6}
.bw-c{background:rgba(224,56,74,.10);border:1px solid rgba(224,56,74,.35)}
.bw-h{background:rgba(217,130,11,.10);border:1px solid rgba(217,130,11,.35)}
.bw-s{font-size:14px;color:var(--muted);margin-top:2px}

/* ===== คิวอาร์พร้อมเพย์ในหน้าฝาก (P2) ======================================
   ยอดฝังใน QR ⇒ ผู้โอนแก้ยอดไม่ได้ = ตัดสาเหตุ "โอนไม่ตรงยอด เงินไม่เข้าออโต้" ทิ้ง */
.pp-box{margin-top:12px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 12px}
.pp-t{font-weight:700;font-size:16.5px;margin-bottom:8px;color:#141A21}
.pp-img{display:flex;justify-content:center}
.pp-img svg{max-width:100%;height:auto;border-radius:6px}
.pp-s{font-size:14.5px;color:#5b6672;margin-top:8px;line-height:1.6}
.pp-s b{color:#141A21;font-variant-numeric:tabular-nums}

/* ===== แถบชวนติดตั้งลงหน้าจอโฮม (PWA) =====================================
   ลอยเหนือแถบล่าง · ปิดแล้วไม่ตื๊อ (Android 14 วัน · iOS 30 วัน · ติดตั้งแล้วไม่ถามอีก)
   ทำไมสำคัญกับเว็บนี้เป็นพิเศษ: เปิดจากไอคอน = ไม่ต้องพิมพ์โดเมนใหม่เวลาโดนบล็อก */
.m-pwa{position:fixed;left:10px;right:10px;bottom:calc(var(--m-tabbar-h,64px) + 10px);z-index:60;
  display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:11px 12px;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.m-pwa-i{font-size:28px;line-height:1;flex:none}
.m-pwa-t{flex:1;min-width:0;line-height:1.45}
.m-pwa-t b{display:block;font-size:16.5px}
.m-pwa-t span{display:block;font-size:14.5px;color:var(--muted)}
.m-pwa-go{flex:none;border:0;border-radius:10px;background:var(--brand-2,#2F6FD8);color:#fff;
  font-family:inherit;font-weight:700;font-size:16px;padding:9px 15px;cursor:pointer}
.m-pwa-x{flex:none;border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer;padding:4px 6px}
@media(min-width:900px){ .m-pwa{display:none} }   /* เดสก์ท็อปไม่ต้องชวน */

/* โลโก้แบรนด์ (img) — สูงคงที่ กว้างตามสัดส่วน (2026-09-04 เปลี่ยนเป็น JINGJAI) */
.brand-img{height:40px;width:auto;display:block;object-fit:contain}