/* ==========================================================================
   lobby.css — ล็อบบี้เลือกตลาดหวย (member/home.html) · เทา-ทอง เต็มสูบ

   🔴 รอบแรกผมทำพลาด: ตัดของทิ้งจนหน้าโล่ง อ่านออกมาเป็น "หน้าแอดมิน" ไม่ใช่ "เว็บหวย"
      บทเรียน: **ตัดสิ่งที่ไม่ให้ข้อมูล ≠ ตัดจนไม่เหลือน้ำหนัก**
      ของที่ทำให้เว็บหวยดูเป็นเว็บหวย = พื้นผิว · ความลึก · แสง · ตัวเลขใหญ่ · ธง
      สิ่งที่ต้องตัดคือ "ป้ายซ้ำ/ตัวหนังสือที่ไม่ให้ข้อมูล" ไม่ใช่ "ความหรู"

   โครงยืมจาก lotto432ae.com/member/lottery · สี = กราไฟต์ + ทอง (ของเขาเขียว-ทอง)
   ========================================================================== */

.lb{
  --r:18px; --r-sm:12px;
  --spring:cubic-bezier(.32,.72,0,1);
  --snap:cubic-bezier(.2,1.5,.4,1);

  /* ทอง 5 จุดหยุด — ทองแบนสีเดียว = พลาสติกสีเหลือง */
  --g1:var(--gg-lite,#FFF6DC);
  --g2:var(--gg-mid,#F0DCA0);
  --g3:var(--gg-core,#DCB863);
  --g4:var(--gg-deep,#A8822F);
  --g5:var(--gg-edge,#6B5116);
  --gink:var(--gg-ink,#2A1F06);

  /* พื้นผิวของ "ล็อบบี้" — คุมเอง ไม่ปล่อยตามธีมหน้าอื่น
     เหตุผล: หน้านี้คือหน้าขาย ต้องมีบรรยากาศของตัวเอง เหมือนล็อบบี้คาสิโนที่ไฟคนละดวงกับออฟฟิศ */
  --deep:#0C0D0F;
  --slab:#16181B;
  --slab-2:#1D2024;
  --hair:rgba(232,220,190,.10);
  --hair-2:rgba(232,220,190,.20);
  --ink-1:#F2EFE8;
  --ink-2:#A7A399;
  --sunk:rgba(0,0,0,.55);
}

/* ══ พื้นห้อง: กราไฟต์ + แสงทองมุมบนขวา + ขอบมืด (vignette) ══════════════════
   ไล่แสง 3 ชั้น = ตาอ่านว่ามี "ที่ว่างที่มีแสงส่อง" ไม่ใช่ "สี่เหลี่ยมสีเทา" */
.ms-main:has(.lb), .lb{
  background:
    radial-gradient(1200px 620px at 88% -8%, rgba(220,184,99,.10) 0%, transparent 58%),
    radial-gradient(900px 520px at 8% 104%, rgba(220,184,99,.045) 0%, transparent 60%),
    radial-gradient(1400px 900px at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%),
    var(--deep);
  color:var(--ink-1);
}
.lb{padding:16px 18px 40px}
@media(max-width:820px){.lb{padding:12px 12px 28px}}

/* ══════════════════════════════════════════════════════════════════════════
   1) HERO — โครง eyebrow → หัวข้อ → คำอธิบาย → ตัวนับ (แบบที่เว็บใหญ่ใช้ดึงลูกค้า)
      🔴 น้ำหนักฟอนต์สูงสุดที่ Anuphan มีคือ 700 — เขียนเกินนี้ = เบราว์เซอร์ปลอมตัวหนาให้
         ภาษาไทยที่มีวรรณยุกต์ซ้อนจะเละติดกัน = "ฟอนต์เพี้ยน"
   ══════════════════════════════════════════════════════════════════════════ */
.lb-hero{
  position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);
  padding:5px;margin-bottom:16px;
  background:linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03));
  box-shadow:0 26px 62px -34px rgba(0,0,0,.95);
}
/* แสงเรืองสองจุดหลังแผ่น — ทำให้ "มีบรรยากาศ" โดยไม่ต้องใส่รูป */
.lb-glow{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none;z-index:0}
.lb-glow.g1{width:280px;height:280px;top:-130px;right:-60px;background:rgba(220,184,99,.30)}
.lb-glow.g2{width:230px;height:230px;bottom:-140px;left:-50px;background:rgba(220,184,99,.14)}

.lb-hero-in{
  position:relative;z-index:1;overflow:hidden;border-radius:var(--r);
  padding:26px 28px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(35,38,43,.94),rgba(22,24,27,.97) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.5);
}
.lb-hero-in::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.5) 22%,rgba(255,240,200,.16) 62%,transparent)}

.lb-intro{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:9px}
.lb-intro .eyebrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 12px 5px 9px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--g2);
  background:rgba(220,184,99,.10);box-shadow:inset 0 0 0 1px rgba(220,184,99,.28);
}
.lb-intro .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--g3);
  box-shadow:0 0 0 3px rgba(220,184,99,.2)}
.lb-intro h2{margin:0;font-size:29px;font-weight:700;line-height:1.24;letter-spacing:-.01em;
  color:var(--ink-1);text-wrap:balance}
.lb-intro p{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:52ch}
.lb-intro p b{color:var(--g2);font-weight:600}

.lb-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.lb-quick a{
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:99px;
  font-size:15px;font-weight:700;text-decoration:none;color:var(--ink-1);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
}
.lb-quick a:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px var(--hair-2)}
.lb-quick a:active{transform:scale(.95)}
.lb-quick a.pri{background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 15%,var(--g3) 55%,var(--g4) 100%);
  color:var(--gink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px var(--g5),0 10px 24px -12px rgba(220,184,99,.75)}

/* ตัวนับฝั่งขวา — ตัวเลขใหญ่คือ "เปิดรับตอนนี้" เพราะเป็นสิ่งที่ตัดสินใจ */
.lb-sum{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;min-width:196px;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(180deg,#23262B,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(220,184,99,.3),
             0 14px 30px -18px rgba(0,0,0,.9)}
.lb-sum .s1{display:flex;align-items:baseline;gap:9px}
.lb-sum .s1 strong{font-size:46px;font-weight:700;line-height:.9;
  background:linear-gradient(180deg,#FFF7E0,var(--g3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lb-sum .s1 span{font-size:14px;color:var(--ink-2);font-weight:600}
.lb-sum .s2{display:flex;align-items:baseline;gap:7px;padding-top:9px;
  box-shadow:inset 0 1px 0 rgba(232,220,190,.10)}
.lb-sum .s2 b{font-size:19px;font-weight:700;color:var(--ink-1)}
.lb-sum .s2 span{font-size:13.5px;color:var(--ink-2)}
.lb-sum .s3{display:flex;flex-direction:column;gap:2px;padding-top:9px;
  box-shadow:inset 0 1px 0 rgba(232,220,190,.10)}
.lb-sum .s3 small{font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.lb-sum .s3 b{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:700;color:var(--ink-1);flex-wrap:wrap}
.lb-sum .s3 b .cd-t{font-size:23px;font-weight:700;color:var(--g2);font-variant-numeric:tabular-nums}

/* ══ แถบกระโดดไปหมวด — เห็นภาพรวมทั้งหมดในแถวเดียว ═════════════════════════ */
.lb-jump{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;margin-bottom:16px;scrollbar-width:none}
.lb-jump::-webkit-scrollbar{display:none}
.lb-jump button{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 18px 11px;border:0;border-radius:15px;cursor:pointer;font:inherit;text-align:left;
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
}
.lb-jump button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px var(--hair-2)}
.lb-jump button:active{transform:scale(.96)}
.lb-jump button .ic{font-size:17px;line-height:1}
.lb-jump button strong{font-size:16px;font-weight:700;color:var(--ink-1);white-space:nowrap}
.lb-jump button small{font-size:13px;color:var(--ink-2);white-space:nowrap}
/* หมวดที่มีตลาดเปิดอยู่ = ขอบทอง + จุดเรืองแสง (ตาไปเกาะทันที) */
.lb-jump button.live{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(220,184,99,.42)}
.lb-jump button.live small{color:var(--g2);font-weight:700}
.lb-jump button.live .ic{filter:drop-shadow(0 0 7px rgba(220,184,99,.6))}

/* ══════════════════════════════════════════════════════════════════════════
   2) "กำลังจะปิด" — แถวเร่งด่วน
   ══════════════════════════════════════════════════════════════════════════ */
.lb-soon{margin-bottom:16px}
.lb-soon-h{display:flex;align-items:center;gap:8px;margin:0 2px 10px;
  font-size:13px;font-weight:700;letter-spacing:.18em;color:#F2777F}
.lb-soon-h .dot{width:7px;height:7px;border-radius:50%;background:#F2555F;
  box-shadow:0 0 0 4px rgba(242,85,95,.18);animation:lb-pulse 1.1s infinite}
@keyframes lb-pulse{50%{opacity:.3;box-shadow:0 0 0 7px rgba(242,85,95,0)}}
.lb-soon-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.lb-soon-row::-webkit-scrollbar{display:none}
.lb-soon-row .s{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;
  border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#221A1B,#191416);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(242,85,95,.36),
             0 10px 22px -16px rgba(242,85,95,.7);
  transition:transform .3s var(--spring);
}
.lb-soon-row .s:active{transform:scale(.95)}
.lb-soon-row .s .fl{width:26px;height:26px;display:block;flex:0 0 auto;line-height:0;
  border-radius:50%;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.lb-soon-row .s .fl svg{display:block}
.lb-soon-row .s .nm{font-size:15.5px;font-weight:700;white-space:nowrap;color:var(--ink-1)}
.lb-soon-row .s .t{font-size:18px;font-weight:700;color:#FF8A90;font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════════
   3) ค้นหา + กรอง
   ══════════════════════════════════════════════════════════════════════════ */
.lb-tools{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.lb-search{
  flex:1;min-width:200px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;
  background:linear-gradient(180deg,#14161A,#101215);
  box-shadow:inset 0 2px 5px var(--sunk), inset 0 0 0 1px var(--hair);
}
.lb-search svg{flex:0 0 auto;color:var(--ink-2)}
.lb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink-1);font:inherit;font-size:16px}
.lb-search input::placeholder{color:var(--ink-2);opacity:.8}
.lb-seg{display:flex;gap:4px;padding:4px;border-radius:99px;
  background:linear-gradient(180deg,#14161A,#101215);
  box-shadow:inset 0 2px 5px var(--sunk), inset 0 0 0 1px var(--hair)}
.lb-seg button{
  padding:9px 18px;border:0;border-radius:99px;cursor:pointer;font:inherit;font-size:15px;font-weight:700;
  color:var(--ink-2);background:transparent;transition:all .3s var(--spring);
}
.lb-seg button:hover{color:var(--ink-1)}
.lb-seg button.on{color:var(--gink);
  background:linear-gradient(180deg,var(--g1),var(--g2) 18%,var(--g3) 62%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px var(--g5)}
.lb-seg button b{font-variant-numeric:tabular-nums;opacity:.7;margin-left:5px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   4) หัวข้อกลุ่ม — เหรียญตราทอง + เส้นคาด
   ══════════════════════════════════════════════════════════════════════════ */
.lb-sec{margin-bottom:30px}
.lb-sec-h{display:flex;align-items:center;gap:13px;margin:0 2px 14px}
.lb-sec-h .ic{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(180deg,#23262B,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(220,184,99,.36),
             0 8px 18px -12px rgba(0,0,0,.9);
}
.lb-sec-h b{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink-1)}
.lb-sec-h .n{font-size:13.5px;font-weight:700;padding:4px 10px;border-radius:99px;
  color:var(--g2);background:rgba(220,184,99,.11);
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.24);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-sec-h .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--hair),transparent)}
.lb-sec-h .note{font-size:13.5px;color:var(--ink-2);white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   5) การ์ดตลาด — พระเอกของหน้า
   ══════════════════════════════════════════════════════════════════════════ */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:13px}
@media(max-width:560px){.lb-grid{grid-template-columns:1fr 1fr;gap:10px}}

.lb-card{
  position:relative;overflow:hidden;border-radius:var(--r);padding:14px 15px 13px;cursor:pointer;
  background:linear-gradient(180deg,var(--slab-2),var(--slab) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px var(--hair),
             0 14px 30px -22px rgba(0,0,0,.95);
  transition:transform .34s var(--spring), box-shadow .34s var(--spring);
}
.lb-card:hover{transform:translateY(-2px)}
.lb-card:active{transform:scale(.975)}

/* 🔴 ธงเป็นลายน้ำใหญ่หลังการ์ด — ตัวนี้แหละที่ทำให้ "ดูเป็นเว็บหวย"
   ของ lotto432 ใช้สี่เหลี่ยมเทาเปล่าๆ ⇒ การ์ดจืด จำไม่ได้ว่าใบไหนคือตลาดไหน */
.lb-card .wm{
  position:absolute;right:-26px;bottom:-30px;width:124px;height:124px;line-height:0;
  border-radius:50%;overflow:hidden;
  opacity:.11;transform:rotate(-4deg);pointer-events:none;
  /* 🔴 ลายน้ำต้อง "ละลาย" เข้าการ์ด ไม่ใช่สี่เหลี่ยมแปะทับ — ไม่งั้นเป็นรอยเปื้อน
     ⇒ ไล่ความโปร่งเข้าหามุม + เบลอนิดหน่อย ให้เป็นพื้นผิว ไม่ใช่รูป */
  -webkit-mask-image:linear-gradient(305deg,#000 14%,rgba(0,0,0,.45) 48%,transparent 82%);
  mask-image:linear-gradient(305deg,#000 14%,rgba(0,0,0,.45) 48%,transparent 82%);
  filter:saturate(1.1) blur(.4px);
}
.lb-card .wm svg{display:block;width:100%;height:100%}

/* — เปิดรับ: ทองแผ่น + แสงกวาด — */
.lb-card.open{
  background:linear-gradient(158deg,var(--g1) 0%,var(--g2) 16%,var(--g3) 54%,var(--g4) 100%);
  color:var(--gink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), inset 0 0 0 1px var(--g5),
             0 16px 34px -20px rgba(220,184,99,.8);
}
.lb-card.open .wm{opacity:.16;filter:saturate(.55) contrast(1.05) blur(.5px)}
.lb-card.open::after{                       /* แสงกวาดช้าๆ = โลหะเงาสะท้อนไฟ */
  content:'';position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(72deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  animation:lb-sheen 7s linear infinite;
}
@keyframes lb-sheen{0%{transform:translateX(-62%)}55%,100%{transform:translateX(62%)}}
.lb-card.open:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px var(--g5),
             0 20px 40px -18px rgba(220,184,99,.95)}

/* — ใกล้ปิด (<10 นาที): ขอบแดงหายใจ — */
.lb-card.urgent{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px #F2555F,
             0 16px 36px -18px rgba(242,85,95,.85);animation:lb-breathe 1.8s ease-in-out infinite}
@keyframes lb-breathe{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 2px #FF7A82,
             0 18px 42px -16px rgba(242,85,95,1)}}

/* — ปิดแล้ว: จมลงไปแบบ "แกะสลัก" ไม่ใช่แค่จางลง — */
.lb-card.shut{
  cursor:default;color:var(--ink-2);
  background:linear-gradient(180deg,#121417,#0E1013);
  box-shadow:inset 0 2px 6px var(--sunk), inset 0 0 0 1px rgba(232,220,190,.06);
}
.lb-card.shut .wm{opacity:.055;filter:grayscale(.75) blur(.6px)}
.lb-card.shut:hover,.lb-card.shut:active{transform:none}
/* — 0157 รอเปิด: งวดถูกสร้างไว้แล้วแต่ยังไม่ถึงเวลาเปิด — จมแบบปิด (ยังกดแทงไม่ได้) แต่นับถอยหลังถึงเวลาเปิดตัวใหญ่ + ป้าย "เปิด HH:MM" สีทอง — */
.lb-card.soon{
  cursor:default;color:var(--ink-2);
  background:linear-gradient(180deg,#121417,#0E1013);
  box-shadow:inset 0 2px 6px var(--sunk), inset 0 0 0 1px rgba(230,185,85,.28);
}
.lb-card.soon .wm{opacity:.07;filter:grayscale(.6) blur(.6px)}
.lb-card.soon:hover,.lb-card.soon:active{transform:none}
.lb-card.soon .hm.op{opacity:1;color:#e6b955;background:rgba(230,185,85,.12)}
.lb-card.void{cursor:default;color:#E88B92;
  box-shadow:inset 0 2px 6px var(--sunk), inset 0 0 0 1px rgba(242,85,95,.3)}

/* — ตลาด "เร็วๆ นี้" (foreign-extra) — ยังแทงไม่ได้ · ต้องดูออกทันทีว่าต่างจากตลาดจริง (ไม่ทอง ไม่กดได้) — */
.lb-card.is-extra{cursor:default;color:var(--ink-2);
  background:linear-gradient(180deg,#171b20,#111418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(232,220,190,.10),
             0 12px 26px -22px rgba(0,0,0,.9)}
.lb-card.is-extra::after{content:none}                                   /* ตัดแสงกวาดทอง */
.lb-card.is-extra:hover,.lb-card.is-extra:active{transform:none}         /* ไม่ยก = ไม่ชวนกด */
.lb-card.is-extra .wm{opacity:.06;filter:grayscale(.6) blur(.5px)}
.lb-card.is-extra .nm{color:var(--ink-2)}
.lb-card.is-extra .hm{display:none}                                      /* กันชนกับ badge */
.lb-card.is-extra .cd b{color:#8f9aac}                                   /* countdown จาง = เวลาตามตาราง ไม่ใช่ server */
.lb-card.is-extra .lb-bar>i{background:rgba(232,220,190,.22)}
.xt-soon{position:absolute;top:9px;right:9px;z-index:3;pointer-events:none;
  font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1;padding:3px 8px;border-radius:999px;
  color:#e6b955;background:rgba(230,185,85,.12);border:1px solid rgba(230,185,85,.34)}

.lb-card .top{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lb-card .fl{flex:0 0 auto;width:34px;height:34px;display:block;line-height:0;
  border-radius:50%;overflow:hidden;box-shadow:0 2px 7px rgba(0,0,0,.4)}
.lb-card .fl svg{display:block}
.lb-card .nm{flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.28;letter-spacing:-.01em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lb-card .hm{flex:0 0 auto;font-size:13.5px;font-weight:700;opacity:.7;font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.14)}
.lb-card.shut .hm{background:rgba(255,255,255,.05)}

/* นับถอยหลัง = ตัวเลขที่ใหญ่ที่สุดในการ์ด (มันคือสิ่งที่ตัดสินใจ) */
.lb-card .cd{position:relative;display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.lb-card .cd b{font-size:29px;font-weight:700;line-height:1;letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.28)}
.lb-card .cd small{font-size:13px;font-weight:600;opacity:.66}
.lb-card.shut .cd b,.lb-card.void .cd b{font-size:17px;font-weight:700;text-shadow:none}

/* แถบเวลาที่เหลือ + หัวเรืองแสง */
.lb-bar{position:relative;height:5px;border-radius:99px;margin-top:11px;overflow:hidden;
  background:rgba(0,0,0,.26);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.lb-bar i{position:relative;display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.95));
  box-shadow:0 0 8px rgba(255,255,255,.55);transition:width 1s linear}
.lb-card.shut .lb-bar,.lb-card.void .lb-bar{display:none}

.lb-tag{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  background:rgba(242,85,95,.16);color:#F2777F;box-shadow:inset 0 0 0 1px rgba(242,85,95,.35)}

/* ยี่กี — แผ่นกว้างเต็มแถว (เปิด 24 ชม. เดินหลายรอบ/วัน) */
.lb-card.wide{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:18px 22px}
.lb-card.wide .ico{width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  font-size:24px;background:rgba(0,0,0,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lb-card.wide .nm{font-size:22px;-webkit-line-clamp:1}
.lb-card.wide .rn{font-size:14px;opacity:.72;font-weight:700}
.lb-card.wide .cd{margin-left:auto;flex-direction:column;align-items:flex-end;gap:1px}
.lb-card.wide .cd b{font-size:36px}
.lb-card.wide .wm{display:none}

.lb-empty{padding:44px 16px;text-align:center;color:var(--ink-2);font-size:16px;
  background:linear-gradient(180deg,var(--slab),var(--deep));border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--hair)}

/* ══ ธีมสว่าง — ล็อบบี้ยังคุมพื้นของตัวเอง แต่ยกความสว่างขึ้นทั้งชุด ══════ */
:root[data-theme="light"] .lb,
:root[data-theme="light"] .ms-main:has(.lb){
  --deep:#EDECE8; --slab:#FFFFFF; --slab-2:#FBFAF7;
  --hair:rgba(60,52,32,.13); --hair-2:rgba(60,52,32,.22);
  --ink-1:#191A1C; --ink-2:#6C6F73; --sunk:rgba(40,34,20,.10);
  background:
    radial-gradient(1200px 620px at 88% -8%, rgba(168,132,46,.13) 0%, transparent 58%),
    radial-gradient(900px 520px at 8% 104%, rgba(168,132,46,.07) 0%, transparent 60%),
    var(--deep);
  color:var(--ink-1);
}
:root[data-theme="light"] .lb-hero-in{background:radial-gradient(620px 260px at 92% 0%,rgba(220,184,99,.2),transparent 62%),linear-gradient(180deg,#fff,#F7F5F0)}
:root[data-theme="light"] .lb-plate{background:linear-gradient(180deg,#fff,#F5F2EA)}
:root[data-theme="light"] .lb-plate b{background:linear-gradient(180deg,#8A6A18,#B8912F);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .lb-brand .nm{background:linear-gradient(96deg,#B8912F,#8A6A18 46%,#6C6F73)}
:root[data-theme="light"] .lb-live b{color:#8A6A18}
:root[data-theme="light"] .lb-sec-h .ic{background:linear-gradient(180deg,#fff,#F5F2EA)}
:root[data-theme="light"] .lb-sec-h .n{color:#8A6A18;background:rgba(168,132,46,.12)}
:root[data-theme="light"] .lb-search,:root[data-theme="light"] .lb-seg{background:#fff}
:root[data-theme="light"] .lb-card{background:linear-gradient(180deg,#fff,#FAF8F4)}
:root[data-theme="light"] .lb-card.shut{background:#F0EFEB}
:root[data-theme="light"] .lb-soon-row .s{background:linear-gradient(180deg,#fff,#FDF6F6)}
:root[data-theme="light"] .lb-acts a{background:#fff}

@media(prefers-reduced-motion:reduce){
  .lb *,.lb *::before,.lb *::after{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   มือถือ — HERO ต้องไม่กินจอทั้งหน้าจอแรก
   🔴 เจอจากหน้าจอจริง: hero สูง ~700px ⇒ เปิดมาไม่เห็นตลาดสักใบ
      หน้าล็อบบี้ต้องเห็น "ของที่กดได้" ตั้งแต่ยังไม่เลื่อน
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .lb-hero{padding:4px;margin-bottom:13px;border-radius:20px}
  .lb-hero-in{padding:14px 15px;gap:12px;border-radius:16px}
  .lb-brand{flex:1 1 100%;gap:2px}
  .lb-brand .eyebrow{font-size:11px;letter-spacing:.2em}
  .lb-brand .nm{font-size:23px}
  .lb-brand .clk{font-size:13px}
  /* แผ่นเครดิต + ตัวนับ อยู่แถวเดียวกัน */
  .lb-plate{flex:1 1 auto;min-width:0;padding:10px 14px;border-radius:12px}
  .lb-plate small{font-size:11.5px;letter-spacing:.12em}
  .lb-plate b{font-size:25px}
  .lb-plate b i{font-size:14px}
  .lb-live{flex:0 0 auto;text-align:right}
  .lb-live small{font-size:11.5px;letter-spacing:.12em}
  .lb-live b{font-size:21px}
  .lb-live b em{font-size:13px}
  /* ปุ่มลัด: แถวเดียว เลื่อนแนวนอนถ้าไม่พอ */
  .lb-acts{flex:1 1 100%;margin-left:0;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .lb-acts::-webkit-scrollbar{display:none}
  .lb-acts a{flex:0 0 auto;padding:9px 14px;font-size:14.5px}

  .lb-sec-h .ic{width:34px;height:34px;border-radius:10px;font-size:18px}
  .lb-sec-h b{font-size:18px}
  .lb-card{padding:12px 12px 11px;border-radius:15px}
  /* 🔴 จอ ~430: หลังขยายฟอนต์ +2px ชื่อตลาดยาวๆ ("ดาวโจนส์") ถูกตัดตัวการันต์ทิ้ง
     วัดแล้ว: ชื่อต้องการ 61px แต่ได้ 56px — ธง 34 + ช่องไฟ 10+10 + ป้ายเวลา 51 กินไปหมด
     ⇒ บีบ "ช่องไฟ" คืน 6px แทนการลดขนาดฟอนต์ (เจ้าของสั่งให้ฟอนต์ใหญ่ขึ้น ไม่ใช่เล็กลง)
     ตัวการันต์ไทยหายไป = สะกดผิด ไม่ใช่แค่ดูไม่สวย */
  .lb-card .top{gap:7px}
  .lb-card .nm{font-size:16px}
  .lb-card .cd b{font-size:25px}
  .lb-card.wide{padding:14px 15px;gap:12px}
  .lb-card.wide .nm{font-size:19px}
  .lb-card.wide .cd b{font-size:29px}
  .lb-card.wide .ico{width:38px;height:38px;font-size:20px;border-radius:11px}
}

/* hero: แผ่นซ้ายบอก "เปิดกี่ตลาด" · ขวาบอก "รอบที่ใกล้ปิดที่สุด"
   (ยอดเงินย้ายไปแถบหัวถาวรแล้ว — โชว์ซ้ำในจอเดียวคือ noise) */
.lb-plate b i{font-style:normal;font-size:16px;font-weight:600;-webkit-text-fill-color:var(--ink-2);margin-left:6px}
.lb-live b{display:flex;align-items:baseline;gap:9px;font-size:20px;color:var(--ink-1);flex-wrap:wrap}
.lb-live b .cd-t{font-size:26px;font-weight:700;color:var(--g2)}
@media(max-width:820px){.lb-live b{font-size:16px}.lb-live b .cd-t{font-size:21px}}

/* มือถือ: hero ต้องกระชับ ไม่กินจอแรกทั้งหน้า */
@media(max-width:820px){
  .lb-hero-in{padding:16px 16px 18px;gap:14px}
  .lb-intro{flex:1 1 100%;gap:7px}
  .lb-intro .eyebrow{font-size:11px;padding:4px 10px 4px 8px}
  .lb-intro h2{font-size:22px}
  .lb-intro p{font-size:14.5px;line-height:1.65}
  .lb-quick a{padding:9px 14px;font-size:14.5px}
  .lb-sum{flex:1 1 100%;min-width:0;flex-direction:row;align-items:center;gap:14px;padding:13px 15px;border-radius:14px}
  .lb-sum .s1 strong{font-size:34px}
  .lb-sum .s2{padding-top:0;box-shadow:none;flex-direction:column;gap:0;align-items:flex-start}
  .lb-sum .s3{padding-top:0;box-shadow:none;margin-left:auto;align-items:flex-end}
  .lb-sum .s3 b .cd-t{font-size:20px}
  .lb-jump button{padding:10px 14px 9px}
  .lb-jump button strong{font-size:15px}
}

/* ══ กรอบทองร่วม — ทุก section ในหน้านี้อยู่ใน "แผ่น" เดียวกับ hero ══════════
   เจ้าของสั่ง (2026-08-24): "แต่ละ section ใส่กรอบแบบ .lb-hero — แต่ไม่ต้องมีเงาดำ"

   🔴 ทำด้วย "อีลิเมนต์เดียว" ไม่ต้องเพิ่ม <div> ครอบ:
      `border:5px solid transparent` + วางพื้น 2 ชั้นที่ตัดคนละกรอบ
        ชั้นบน (พื้นเข้ม)  → `padding-box` = เต็มเฉพาะข้างในเส้นขอบ
        ชั้นล่าง (ไล่ทอง) → `border-box`  = เต็มถึงขอบนอก ⇒ โผล่ออกมาเป็น "ขอบทอง" 5px
      ทำแบบนี้เพราะ `.lb-sec` ถูกสร้างจาก JS (template ใน home.html) และ `.lb-jump`
      ก็ถูกเติมด้วย JS — ถ้าใช้วิธี 2 ชั้นแบบ hero ต้องไปแก้ template ทุกจุด

   🔴 ไม่มี drop shadow ตามที่สั่ง — ความลึกมาจาก `inset` เส้นไฮไลต์บนสุดอย่างเดียว
      (เงาดำใหญ่ๆ ซ้อนกัน 5 แผ่นในหน้าเดียว = หน้ามืดลงเรื่อยๆ อ่านยาก) */
.lb-jump, .lb-soon, .lb-tools, .lb-sec{
  position:relative;
  border:5px solid transparent;
  border-radius:calc(var(--r) + 6px);
  background:
    linear-gradient(180deg,rgba(35,38,43,.94),rgba(22,24,27,.97) 62%) padding-box,
    linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* ระยะข้างในของแต่ละแผ่น — ทับ padding เดิมที่ตั้งไว้ตอนยังไม่มีกรอบ */
.lb-jump { padding:12px 12px 14px; margin-bottom:var(--sec,22px) }
.lb-soon { padding:14px 14px 16px; margin-bottom:var(--sec,22px) }
.lb-tools{ padding:12px;           margin-bottom:var(--sec,22px) }
.lb-sec  { padding:16px 16px 18px; margin-bottom:var(--sec,22px) }

/* 🔴 `.lb-jump` เลื่อนแนวนอนได้ (overflow-x:auto) — ห้ามใส่ `overflow:hidden`
   ที่กรอบ ไม่งั้นชิปหมวดเลื่อนไม่ได้เลย. ขอบมนตัดให้เองอยู่แล้วที่ padding-box */

/* hero: เอา "เงาดำ" ออกให้เหมือนกรอบใหม่ — โครง 2 ชั้นเดิมคงไว้ (มีลูกแก้วแสงข้างใน) */
.lb-hero{ box-shadow:none }

/* จอแคบ: ลดระยะข้างในลง ไม่งั้นการ์ดข้างในแคบจนตัวเลขหด */
@media(max-width:520px){
  .lb-jump { padding:10px 10px 12px }
  .lb-soon { padding:12px }
  .lb-tools{ padding:10px }
  .lb-sec  { padding:12px 12px 14px }
}

/* ธีมสว่าง: แผ่นชั้นในต้องเป็นพื้นสว่างด้วย
   🔴 ลืมข้อนี้ = แผ่นดำทับตัวหนังสือดำ อ่านไม่ออกทั้งหน้า (หน้านี้มีกฎธีมสว่างอยู่ 14 จุด
      แปลว่ามีคนใช้จริง ไม่ใช่หน้ามืดล้วน) */
:root[data-theme="light"] .lb-jump,
:root[data-theme="light"] .lb-soon,
:root[data-theme="light"] .lb-tools,
:root[data-theme="light"] .lb-sec{
  background:
    linear-gradient(180deg,#fff,#F7F5F0) padding-box,
    linear-gradient(150deg,rgba(190,150,60,.42),rgba(190,150,60,.10) 44%,rgba(0,0,0,.04)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════════════
   ทางลัด + ประตูเข้าเกม + ผลหวยล่าสุด  (เพิ่ม 2026-08-24)
   เจ้าของบอกว่าหน้าเดิม "เหมือนหน้าหลังบ้าน" — สิ่งที่ทำให้หน้าเป็น *หน้าผู้เล่น*:
     · ปุ่มใหญ่พอให้นิ้วโป้งกดได้โดยไม่ต้องเล็ง (หลังบ้านเป็นลิงก์เล็กๆ เพราะใช้เมาส์)
     · ของที่ผู้เล่นอยากรู้อยู่บนสุด (ฝากเงิน · เข้าเล่น · ผลหวย) ไม่ใช่ตาราง
     · พื้นผิวโปร่ง-เบลอ ให้เห็นแสงข้างหลัง (หลังบ้านเป็นแผ่นทึบ อ่านง่ายแต่ไม่มีบรรยากาศ)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ทางลัด 2 ปุ่มใหญ่ ─────────────────────────────────────────────────────── */
.lb-go{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.lb-go-b{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;
  padding:15px 16px;border-radius:var(--r);text-decoration:none;
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
}
.lb-go-b:active{transform:scale(.985)}
.lb-go-b .ic{
  flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:21px;font-weight:800;color:var(--gink);
  background:linear-gradient(180deg,var(--g2),var(--g3) 45%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -10px rgba(0,0,0,.9);
}

/* ── ไอคอน 3D ที่ "ตอบสนอง" — PNG เดิม + กล้อง perspective จริง (2026-08-28) ──────
   เลือกทางนี้เพราะ **วัดแล้ว**: เทียบ 4 แบบใน `_demo-go3d.html` (control / CSS-3D ปั้นใหม่ /
   WebGL three.js / PNG+motion) — ที่ขนาด 34-46px ไอคอนที่ **เรนเดอร์มาแล้วชนะ geometry ที่เขียนสด**
   ⇒ ของเดิมขาด "ปฏิกิริยา" ไม่ใช่ "รายละเอียด" จึงเติมเฉพาะส่วนที่ขาด
   🔴 +0 KB · ไม่มีไลบรารี · **ไม่มีลูป rAF** ⇒ ภาพนิ่ง = ไม่กิน GPU/แบตเลย
      (WebGL ต้องมี `frameloop=demand` ถึงจะไม่วนเปล่า — B6.152 · expert-3d-web/)
   🔴 `<picture>` เป็นลูกของ .ic ที่เป็น grid ⇒ ต้อง display:block ไม่งั้นมันกลายเป็น grid item เอง */
.lb-go-b .ic.v3{
  /* คงแผ่นรองเดิมไว้ทุกอย่าง (สี/เงา/มุมโค้ง) — เพิ่มแค่ "กล้อง" ให้ลูกข้างในเอียงได้
     🔴 เคยถอด background ออกตอนแรก = แบงก์สีครีมจมไปกับปุ่มครีม (คอนทราสต์หาย) */
  perspective:260px;perspective-origin:50% 45%;
}
.lb-go-b .ic.v3 picture{display:block;line-height:0}
.lb-go-b .ic.v3 img{
  /* 🔴 go-deposit = 96×63 ไม่ใช่จัตุรัส — ใส่ width/height เท่ากันเฉยๆ = ถูกบีบแนวตั้ง
     object-fit:contain ทำให้คงสัดส่วนจริงในกรอบจัตุรัส (go-play 96×96 ไม่กระทบ) */
  object-fit:contain;
  display:block;transform-style:preserve-3d;
  transition:transform .5s var(--spring),filter .5s var(--spring);
  filter:drop-shadow(0 3px 5px rgba(60,40,10,.28));
}
.lb-go-b:hover .ic.v3 img{transform:rotateY(-20deg) rotateX(7deg) translateZ(9px) scale(1.06);
  filter:drop-shadow(0 8px 12px rgba(60,40,10,.42))}
.lb-go-b:active .ic.v3 img{transform:rotateY(-8deg) rotateX(14deg) translateZ(-3px) scale(.94);
  filter:drop-shadow(0 2px 3px rgba(60,40,10,.5))}
/* ลอยเบาๆ ตอนนิ่ง = บอกว่า "ปุ่มนี้กดได้" โดยไม่แย่งสายตาไปจากตัวหนังสือ */
@keyframes v3float{0%,100%{transform:translateY(0) rotateY(-4deg)}50%{transform:translateY(-2.5px) rotateY(4deg)}}
.lb-go-b .ic.v3.idle img{animation:v3float 4.2s ease-in-out infinite}
.lb-go-b:hover .ic.v3.idle img{animation:none}
@media (prefers-reduced-motion:reduce){
  .lb-go-b .ic.v3.idle img{animation:none}
  .lb-go-b .ic.v3 img{transition:none}
}
.lb-go-b .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-go-b .tx b{font-size:17.5px;font-weight:700;color:var(--ink-1);letter-spacing:-.01em}
.lb-go-b .tx small{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-go-b .tx small i{font-style:normal;font-weight:700;color:var(--g3)}
.lb-go-b .ar{margin-left:auto;font-size:22px;line-height:1;color:var(--ink-2);transition:transform .3s var(--spring)}
.lb-go-b:hover .ar{transform:translateX(3px)}
/* ปุ่ม "เข้าเล่น" = งานหลักของเว็บ ⇒ ทองเต็มใบ ไม่ใช่ปุ่มเทาเหมือนกันหมด
   🔴 หน้าหลังบ้านทำทุกปุ่มน้ำหนักเท่ากันเพราะทุกงานสำคัญเท่ากัน — หน้าผู้เล่นตรงข้าม */
.lb-go-b.play{background:linear-gradient(150deg,rgba(220,184,99,.30),rgba(220,184,99,.06) 52%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(220,184,99,.34)}
.lb-go-b.play .tx b{color:#FFF2CE}

/* ── ผลหวยล่าสุด — แผ่น "กระจกเบลอ" ────────────────────────────────────────
   🔴 `backdrop-filter` เบลอ *ของที่อยู่ข้างหลัง* ⇒ ต้องมีอะไรให้เบลอจริง
      หน้านี้มีแสงทองมุมบน + vignette เป็นพื้น ⇒ ได้ฝ้าทองจางๆ ไม่ใช่เทาตาย
   🔴 เบลอกินแรงเครื่อง ⇒ ใช้ที่ "แผ่นใหญ่แผ่นเดียว" ไม่ใช่ทุกการ์ดข้างใน */
.lr{
  position:relative;overflow:hidden;margin-bottom:var(--sec,22px);
  border:5px solid transparent;border-radius:calc(var(--r) + 6px);
  padding:20px 20px 22px;
  background:
    linear-gradient(180deg,rgba(38,41,47,.62),rgba(20,22,26,.72) 70%) padding-box,
    linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03)) border-box;
  -webkit-backdrop-filter:blur(22px) saturate(135%);
          backdrop-filter:blur(22px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* เบราว์เซอร์ที่ไม่รองรับ backdrop-filter → ทึบขึ้นแทน (อ่านออกเหมือนกัน ไม่ใช่แผ่นใส) */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .lr{background:linear-gradient(180deg,rgba(35,38,43,.96),rgba(20,22,26,.98) 70%) padding-box,
      linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03)) border-box}
}
.lr-head{margin-bottom:14px}
.lr-kick{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  padding:5px 12px 5px 9px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.2em;color:#F0DCA0;
  background:rgba(220,184,99,.10);box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.lr-kick i{width:6px;height:6px;border-radius:50%;background:#DCB863;
  box-shadow:0 0 0 3px rgba(220,184,99,.22);animation:lr-blink 1.6s infinite}
@keyframes lr-blink{50%{opacity:.28;box-shadow:0 0 0 6px rgba(220,184,99,0)}}
.lr-head h2{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)}
.lr-head p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:62ch}

/* แท็บหมวด — เลื่อนแนวนอนบนมือถือ (8 หมวดใส่จอ 430px ไม่ได้ ต้องเลื่อน ไม่ใช่ยัด) */
.lr-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:12px;scrollbar-width:none}
.lr-tabs::-webkit-scrollbar{display:none}
.lr-tab{
  flex:0 0 auto;position:relative;display:flex;align-items:center;gap:10px;
  padding:10px 14px 10px 11px;border:0;border-radius:15px;cursor:pointer;font:inherit;text-align:left;
  background:linear-gradient(180deg,rgba(35,38,43,.75),rgba(22,24,27,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
}
.lr-tab:active{transform:scale(.96)}
.lr-tab .ic{font-size:20px;line-height:1}
.lr-tab .cp{display:flex;flex-direction:column;gap:1px}
.lr-tab .cp strong{font-size:15px;font-weight:700;color:var(--ink-1);white-space:nowrap}
.lr-tab .cp small{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
/* จุดสถานะ: มีผลแล้ว = ทองสว่าง · ยังไม่ประกาศ = เทาจม (อ่านด้วยหางตาได้ ไม่ต้องอ่านตัวหนังสือ) */
.lr-tab .st{width:7px;height:7px;border-radius:50%;background:rgba(232,220,190,.22);flex:0 0 auto}
.lr-tab.rdy .st{background:#DCB863;box-shadow:0 0 0 3px rgba(220,184,99,.20)}
.lr-tab.rdy .cp small{color:#D9C089}
.lr-tab.on{background:linear-gradient(150deg,rgba(220,184,99,.26),rgba(220,184,99,.06) 60%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1.5px rgba(220,184,99,.5)}
.lr-tab.on .cp strong{color:#FFF2CE}

/* หัวแผง */
.lr-ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lr-pt{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--ink-1)}
.lr-pt span{font-size:21px}
.lr-st{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  padding:6px 12px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--ink-2);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.lr-st i{width:6px;height:6px;border-radius:50%;background:rgba(232,220,190,.3)}
.lr-st.rdy{color:#E4CF97;background:rgba(220,184,99,.10);box-shadow:inset 0 0 0 1px rgba(220,184,99,.3)}
.lr-st.rdy i{background:#DCB863;box-shadow:0 0 0 3px rgba(220,184,99,.22)}

/* การ์ดผลรายชนิด */
.lr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:11px}
.lr-c{padding:13px 14px 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(35,38,43,.66),rgba(20,22,26,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px var(--hair)}
.lr-c header{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.lr-c header b{font-size:15.5px;font-weight:700;color:var(--ink-1)}
.lr-c header small{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.lr-nums{display:flex;gap:9px;flex-wrap:wrap}
.lr-n{flex:1 1 auto;display:flex;flex-direction:column;gap:5px}
.lr-n small{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.lr-n .d{display:flex;gap:5px}
/* ตัวเลขผล = พระเอกของการ์ด ⇒ ใหญ่ + ตัวเลขความกว้างเท่ากัน (tabular) ไม่งั้นเลขขยับตอนรีเฟรช */
.lr-n .d b{
  width:30px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0;
  animation:lr-pop .42s var(--snap) both;animation-delay:calc(var(--i) * 55ms);
}
.lr-n.up .d b{color:var(--gink);background:linear-gradient(180deg,var(--g2),var(--g3) 48%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -10px rgba(0,0,0,.9)}
.lr-n.dn .d b{color:#DDEDE4;background:linear-gradient(180deg,#243230,#18211F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(120,200,170,.26)}
@keyframes lr-pop{from{opacity:0;transform:translateY(7px) scale(.9)}}
@media(prefers-reduced-motion:reduce){.lr-n .d b{animation:none}.lr-kick i{animation:none}}
/* ชนิดที่ยังไม่ประกาศ — จมลงแต่ยังอ่านชื่อออก (ห้ามซ่อนทิ้ง) */
.lr-c.wait{opacity:.62}
.lr-c.wait header small{padding:3px 9px;border-radius:99px;margin-left:auto;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
.lr-w{display:block;padding:12px 0 6px;font-size:14.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.04em}

/* ── จอแคบ ─────────────────────────────────────────────────────────────────── */
@media(max-width:900px){ .lb-cats{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){
  .lb-go{grid-template-columns:1fr;gap:10px}
  /* 🔴 ของเดิมตั้ง .lb-cat .ic เป็นกล่อง 40px — ตกค้างจากยุคไอคอน SVG ตัวเล็ก
     ตอนนี้ไอคอนเป็น PNG 3D ขนาด 62-80px กฎนี้เลยเป็นโค้ดตาย ลบทิ้ง */
  .lr{padding:15px 14px 17px}
  .lr-head h2{font-size:20.5px}
  .lr-grid{grid-template-columns:1fr}
  .lr-st{margin-left:0}
}

/* ธีมสว่างของบล็อกใหม่ */
:root[data-theme="light"] .lb-go-b,
:root[data-theme="light"] .lb-cat{background:linear-gradient(180deg,#fff,#F6F3EC);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(60,52,32,.10)}
:root[data-theme="light"] .lr{background:
  linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,245,240,.8) 70%) padding-box,
  linear-gradient(150deg,rgba(190,150,60,.42),rgba(190,150,60,.10) 44%,rgba(0,0,0,.04)) border-box}
:root[data-theme="light"] .lr-tab,
:root[data-theme="light"] .lr-c{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,243,236,.9));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(60,52,32,.10)}
:root[data-theme="light"] .lr-n.dn .d b{color:#12332A;background:linear-gradient(180deg,#E6F3ED,#D2E7DE)}

/* ── ประตูเข้าเกม: ไอคอนใหญ่ ลอยล้วน ไม่มีกล่องพื้นเข้ม ─────────────────────
   เจ้าของสั่ง (2026-08-24): "เอาพื้นสีดำออก · ไอคอนใหญ่ๆ · ตัดบรรทัดจำนวนใต้ชื่อออก"
   🔴 ยังเป็น SVG ไม่ใช่ PNG — ได้ผลตรงตามที่สั่งทุกข้อและดีกว่า:
      โปร่งจริง 100% (ไม่มีพื้นให้เอาออก) · คมทุกความละเอียด ขยายเท่าไหร่ก็ไม่แตก
      · ไม่มีไฟล์ให้โหลด (PNG 6 ไฟล์ = 6 request + ต้องมี @2x/@3x อีกชุด) */
.lb-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:var(--sec,22px)}
.lb-cat{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 6px 12px;border-radius:var(--r);text-decoration:none;text-align:center;
  background:transparent;box-shadow:none;
  transition:transform .3s var(--spring);
}
.lb-cat::after{content:none}
.lb-cat .ic{
  width:auto;height:auto;background:none;box-shadow:none;padding:0;border-radius:0;
  display:grid;place-items:center;
}
/* 🔴🔴 เงาตกพื้นต้องอยู่ที่ "รูป" ไม่ใช่ที่ `.ic`
   ของเดิม: `.lb-cat .ic{filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}`
   อาการ: ไอคอนมี **กรอบสี่เหลี่ยมจาง ๆ** ล้อมอยู่ (เห็นชัดที่ "คาสิโน"/"หวย")
   วัดจริง 2026-08-29 (DPR 1 · 1920px): ปิด filter ที่ `.ic` → กรอบหายสนิท · ปิดที่ img → กรอบยังอยู่
   ⇒ ต้นเหตุคือ `.ic` ไม่ใช่รูป
   ทำไม: `.ic` เป็น grid container ที่มีลูกเป็น `<picture>` (ตัวห่อ WebP+PNG)
   `drop-shadow` ของ `.ic` ไปได้ "กล่องสี่เหลี่ยมของ picture" มาเป็นรูปทรงเงา **แทนที่จะได้ silhouette
   จากช่อง alpha ของรูป** ⇒ ได้เงาเป็นสี่เหลี่ยมขนาดเท่ากล่องไอคอน
   🔴 ตรวจแล้วว่าไม่ใช่ที่ไฟล์ภาพ: ดึง alpha ของ .webp ออกมาขยาย 0.8% แล้วนอกตัววัตถุ **ดำสนิท**
      (เกือบหลงไปไล่แก้ไฟล์ภาพ/บีบอัด ทั้งที่ต้นเหตุอยู่ใน CSS)
   🔴 DPR 2 (จอ retina) กลบอาการจนเกือบมองไม่เห็น — ต้องทดสอบที่ **DPR 1** ถึงจะเจอ
   ⇒ ย้ายเงามาไว้ที่รูป ซึ่งมี alpha จริง (สกินคริมสันเขียนทับด้วยค่าของตัวเองอยู่แล้ว
      ใส่ไว้ที่นี่เพื่อให้หน้าที่ไม่โหลดสกินยังมีเงา) */
.lb-cat .ic > picture{display:block;line-height:0}
.lb-cat .ic img.ci3, .lb-cat .ic svg.ci{
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));
}
/* <picture> เป็นตัวห่อ .ci3 (WebP + PNG fallback) — มันเป็น grid item ของ .ic แทน img
   ⇒ บังคับ block + line-height 0 กันช่องว่าง baseline ใต้รูป */
.lb-cat .ic picture{display:block;line-height:0}
.lb-cat .ic svg.ci,
.lb-cat .ic img.ci3{width:80px;height:80px;display:block;object-fit:contain;
  transition:transform .34s var(--spring)}
.lb-cat:hover{transform:translateY(-4px)}
.lb-cat:hover .ic svg.ci,
.lb-cat:hover .ic img.ci3{transform:scale(1.07)}
.lb-cat .n{font-size:16px;font-weight:700;color:var(--ink-1);letter-spacing:-.01em}
.lb-cat:hover .n{color:#FFF2CE}

@media(max-width:900px){ .lb-cats{grid-template-columns:repeat(3,1fr);gap:6px} }
@media(max-width:520px){
  .lb-cats{grid-template-columns:repeat(3,1fr);gap:4px}
  .lb-cat{padding:10px 4px 9px;gap:7px}
  .lb-cat .ic svg.ci,
  .lb-cat .ic img.ci3{width:62px;height:62px}
  .lb-cat .n{font-size:14.5px}
}

/* ══ ข้อความวิ่ง (ticker) ═══════════════════════════════════════════════════
   🔴 seamless ต้องใส่ชุดข้อความ **2 รอบ** แล้วเลื่อน `-50%` — ใส่รอบเดียวแล้ววนกลับ
      จะเห็นรอยกระตุกตอนหางต่อหัว (ปัญหาเดียวกับรางเลื่อนเกมในหน้า games)
   🔴 เลื่อนด้วย `translate3d` เท่านั้น (GPU) ห้ามใช้ left/margin — เพราะ 2 อย่างหลัง
      บังคับเบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรม = กระตุกบนมือถือ
   🔴 คนที่ตั้ง "ลดการเคลื่อนไหว" ต้อง **หยุด** ไม่ใช่ทำให้ช้าลง (เวียนหัวเหมือนกัน) */
.tk{
  position:relative;z-index:1;margin:14px 0 0;padding:9px 0;overflow:hidden;
  border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(90deg,rgba(220,184,99,.10),rgba(220,184,99,.04) 50%,rgba(220,184,99,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tk-track{display:flex;width:max-content;animation:tk-run 34s linear infinite;will-change:transform}
.tk-set{display:flex;flex:0 0 auto}
.tk-set span{
  flex:0 0 auto;padding:0 22px;font-size:14.5px;font-weight:600;letter-spacing:.01em;
  color:#E4CF97;white-space:nowrap;
}
@keyframes tk-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tk:hover .tk-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none}}
@media(max-width:520px){.tk-set span{padding:0 15px;font-size:13.5px}}

/* ══ สูตร & ตัวช่วยเลข — รางเลื่อน "สวนทาง" กับ ticker ═══════════════════════
   เจ้าของสั่ง: "อยากได้แบบนี้ แต่เลื่อนไปอีกทาง"
   🔴 สวนทางทำโดยกลับจุดเริ่ม-จบของ keyframe (-50% → 0) ไม่ใช่ `animation-direction:reverse`
      เพราะ reverse จะทำให้ตอนโหลดหน้าแรกๆ กระโดดไปเริ่มที่กลางราง เห็นการ์ดครึ่งใบ */
.fx{margin-bottom:var(--sec,22px)}
.fx-head{margin-bottom:13px}
.fx-kick{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  padding:5px 12px 5px 9px;border-radius:99px;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#E4CF97;
  background:rgba(220,184,99,.10);box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.fx-kick i{width:6px;height:6px;border-radius:50%;background:#DCB863;box-shadow:0 0 0 3px rgba(220,184,99,.22)}
.fx-head h2{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)}
.fx-head p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:64ch}

.fx-rail{position:relative;overflow:hidden;border-radius:var(--r);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.fx-track{display:flex;width:max-content;animation:fx-run 46s linear infinite;will-change:transform}
.fx-set{display:flex;gap:11px;padding:3px 5px}
@keyframes fx-run{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.fx-rail:hover .fx-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fx-track{animation:none}}

.fx-c{
  position:relative;flex:0 0 auto;width:216px;padding:14px 15px 12px;border-radius:16px;
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
}
.fx-c:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px var(--hair-2),0 10px 22px -14px rgba(0,0,0,.9)}
.fx-c header{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.fx-c header .fl{font-size:19px;line-height:1}
.fx-c header b{font-size:15.5px;font-weight:700;color:var(--ink-1)}
.fx-nums{display:flex;gap:7px}
.fx-n{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 5px;border-radius:11px;
  background:linear-gradient(180deg,rgba(220,184,99,.16),rgba(220,184,99,.05));
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.fx-n b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;color:#FFF2CE}
.fx-n small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.fx-none{padding:13px 0 11px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink-2);
  border-radius:11px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.fx-td{padding:11px 0 9px;font-size:14.5px;color:var(--ink-2)}
.fx-src{display:block;margin-top:9px;font-size:12px;font-weight:600;color:#8B857A;letter-spacing:.02em}
.fx-c.tool{background:linear-gradient(150deg,rgba(220,184,99,.16),rgba(220,184,99,.04) 58%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(220,184,99,.28)}

/* ══ ลิงก์ครอบทั้งการ์ด (แบบที่เจ้าของส่งมาจาก 3dicons) ══════════════════════
   🔴 ทำไมไม่ห่อการ์ดทั้งใบด้วย <a>: ข้างในการ์ดมีทั้งตัวเลข ป้าย และ (ในบล็อกผล) ปุ่มย่อย
      <a> ซ้อน <a>/<button> = HTML ไม่ถูกต้อง เบราว์เซอร์จะแยกแท็กเอง แล้ว layout พัง
   🔴 วิธีนี้: การ์ดเป็น `position:relative` แล้ววาง <a> โปร่งใสทับเต็มใบ
      ⇒ กดตรงไหนก็เข้าได้ · ยังใช้คีย์บอร์ด Tab ได้ (เป็น <a> จริง) · มี aria-label บอกว่าไปไหน */
/* 🔴 แก้ 2026-08-26 — การ์ดต้อง position:relative ไม่งั้นแผ่นคลุมหลุดไปยึดบรรพบุรุษ
   บั๊กจริงที่เจอ: .fx-c มี relative แต่ **.lr-c ไม่มี** (เป็น static)
     ⇒ .lr-hit{position:absolute;inset:0} ไปยึดกับ SECTION.lr แทนการ์ดตัวเอง
     ⇒ แผ่นคลุมกลายเป็น 1142×399 ทั้งที่การ์ดแค่ 267×99 = คลุมทั้ง section
     ⇒ z-index:2 ทับแถบแท็บ .lr-tabs ไว้หมด
     อาการที่ผู้เล่นเจอ: **กดแท็บผลหวยไม่ได้เลย** กดแล้วเด้งไป ?m=<โค้ดหวยของการ์ดใบเดียว>
     (กดด้วยโค้ด tabs[2].click() แท็บเปลี่ยนปกติ ⇒ handler ไม่ผิด เป็นเรื่องของที่ทับอยู่)
   เขียนคู่กับ .fx-hit/.lr-hit ตรงนี้ ให้แก้ทีเดียวเห็นทั้งคู่ ไม่หลุดอีก */
.fx-c,.lr-c{position:relative}
.fx-hit,.lr-hit{position:absolute;inset:0;z-index:2;border-radius:inherit;
  text-decoration:none;font-size:0;color:transparent}
.fx-hit:focus-visible,.lr-hit:focus-visible{outline:2px solid var(--g3);outline-offset:2px}
.fx-c > *:not(.fx-hit),.lr-c > *:not(.lr-hit){position:relative;z-index:1}

@media(max-width:520px){
  .fx-head h2{font-size:19.5px}
  .fx-c{width:186px;padding:12px 12px 10px}
  .fx-n b{font-size:19px}
}

/* ── ข้อความวิ่งเต็มความกว้างจอ (แบบ ark789.vip) ────────────────────────────
   🔴 `.ms-content` ถูกจำกัด max-width:1180 ⇒ ลูกทุกตัวกว้างสุดแค่นั้น
      เทคนิค full-bleed: `width:100vw` + `margin-left:calc(50% - 50vw)`
      = ดันตัวเองออกไปชิดขอบจอทั้งสองข้าง โดยไม่ต้องย้าย DOM ออกนอก container
   🔴 ต้องใช้ 50% (ของ container) ลบ 50vw — ไม่ใช่ -50vw เฉยๆ
      ไม่งั้นบนจอกว้างมันจะเลื่อนไปทางซ้ายเกิน แล้วเกิดแถบเลื่อนแนวนอนทั้งหน้า */
.tk-full{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:0;margin-bottom:var(--sec,22px);
  border-radius:0;padding:11px 0;
  background:linear-gradient(90deg,
    rgba(220,184,99,.06) 0%,rgba(220,184,99,.16) 22%,rgba(220,184,99,.07) 50%,
    rgba(220,184,99,.16) 78%,rgba(220,184,99,.06) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.35);
}
/* เจ้าของสั่ง 2026-09-02: ข้อความจุดเด่นเป็น "โทนสว่าง" (เดิมทอง #EBD8A6 กลืนพื้น teal) */
.tk-full .tk-set span{font-size:15px;color:#EFF8F4;text-shadow:0 1px 2px rgba(6,40,36,.45)}
/* ตัวคั่น ✦ ให้เป็นทองสว่างกว่าตัวหนังสือ — ตาจับจังหวะรายการได้โดยไม่ต้องอ่าน */
.tk-full .tk-set span::first-letter{color:var(--g2);font-size:1.05em}
@media(max-width:520px){ .tk-full{padding:9px 0} .tk-full .tk-set span{font-size:13.5px} }
/* ป้ายบอกว่าเลขชุดนี้มาจากแหล่งนอกระบบ — ผู้เล่นต้องแยกออกด้วยตา ไม่ใช่เดา */
.fx-ext{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:99px;font-style:normal;
  font-size:11px;font-weight:700;color:#9FD4C2;background:rgba(120,200,170,.12);
  box-shadow:inset 0 0 0 1px rgba(120,200,170,.34)}

/* ══ แผงรายละเอียดตลาด (drill-in แบบ 3dicons) ═══════════════════════════════
   🔴 ล็อกการเลื่อนพื้นหลังด้วย `position:fixed` ที่ body ไม่ได้ — จะเด้งกลับไปบนสุด
      ใช้ `overflow:hidden` ที่ `.ms-content` แทน (เก็บตำแหน่ง scroll ไว้)
   🔴 แผงต้องเลื่อนในตัวเองได้ (`overscroll-behavior:contain`) ไม่งั้นเลื่อนสุดแล้ว
      ไปลากหน้าหลังต่อ = ผู้ใช้หลุดตำแหน่งเดิม */
/* 🔴 แผงนี้ถูก append ไว้ที่ `document.body` = **อยู่นอก `.lb`**
   ตัวแปรสีทั้งชุด (--g1..--g5, --slab, --ink-1…) ถูกประกาศไว้ที่ `.lb` เท่านั้น
   ⇒ ข้างในแผงจะได้ `var(--g1)` ที่ไม่มีค่า → `linear-gradient(...)` **ทั้งก้อนกลายเป็น invalid**
      เบราว์เซอร์ทิ้งทั้งบรรทัด ⇒ ปุ่มทองไม่มีพื้นหลัง + ตัวหนังสือตกไปใช้สีที่สืบทอดมา (เข้มบนพื้นเข้ม)
   ไม่มี error ไม่มีอะไรฟ้อง — เห็นก็ต่อเมื่อไปวัด computed style
   แก้: ประกาศตัวแปรที่จำเป็นซ้ำที่ `.mk` (ถูกกว่าย้าย DOM เข้าไปใน .lb ซึ่งเสี่ยงเรื่อง stacking context) */
.mk{
  --r:18px; --spring:cubic-bezier(.32,.72,0,1);
  --g1:var(--gg-lite,#FFF6DC); --g2:var(--gg-mid,#F0DCA0); --g3:var(--gg-core,#DCB863);
  --g4:var(--gg-deep,#A8822F); --g5:var(--gg-edge,#6B5116); --gink:var(--gg-ink,#2A1F06);
  --slab:#16181B; --slab-2:#1D2024; --hair:rgba(232,220,190,.10);
  --ink-1:#F2EFE8; --ink-2:#A7A399;
  position:fixed;inset:0;z-index:120;display:none;
}
.mk.on{display:block}
body.mk-open{overflow:hidden}
.mk-bd{position:absolute;inset:0;background:rgba(6,7,9,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mk-fade .24s ease}
@keyframes mk-fade{from{opacity:0}}
.mk-pane{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94vw,560px);max-height:min(88vh,760px);overflow-y:auto;overscroll-behavior:contain;
  border:5px solid transparent;border-radius:calc(var(--r) + 8px);padding:18px 18px 20px;
  background:
    linear-gradient(180deg,rgba(38,41,47,.96),rgba(20,22,26,.98) 70%) padding-box,
    linear-gradient(150deg,rgba(220,184,99,.42),rgba(220,184,99,.08) 46%,rgba(255,255,255,.04)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px -30px rgba(0,0,0,.95);
  animation:mk-in .3s cubic-bezier(.32,.72,0,1);
}
@keyframes mk-in{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@media(prefers-reduced-motion:reduce){.mk-pane,.mk-bd{animation:none}}
.mk-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.mk-ttl{display:flex;flex-direction:column;gap:5px;min-width:0}
.mk-ttl b{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)}
.mk-grp{align-self:flex-start;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700;
  color:#E4CF97;background:rgba(220,184,99,.12);box-shadow:inset 0 0 0 1px rgba(220,184,99,.3)}
.mk-x{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  font-size:17px;color:var(--ink-2);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--hair)}
.mk-x:hover{color:var(--ink-1);background:rgba(255,255,255,.10)}

.mk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.mk-box{padding:11px 12px;border-radius:13px;
  background:linear-gradient(180deg,rgba(35,38,43,.8),rgba(20,22,26,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px var(--hair)}
.mk-box small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-2);margin-bottom:4px}
.mk-box b{font-size:16.5px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
.mk-box.on{background:linear-gradient(150deg,rgba(220,184,99,.22),rgba(220,184,99,.05) 60%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1.5px rgba(220,184,99,.45)}
.mk-box.on b{color:#FFF2CE;font-size:21px}

.mk-sec{margin-bottom:15px}
.mk-sec h4{margin:0 0 9px;font-size:13px;font-weight:700;letter-spacing:.16em;color:#9C8B5F}
.mk-nums{display:flex;gap:11px;flex-wrap:wrap}
.mk-n{display:flex;flex-direction:column;gap:5px}
.mk-n small{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.mk-n span{display:flex;gap:5px}
.mk-n b{width:34px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.mk-n.up b{color:var(--gink);background:linear-gradient(180deg,var(--g2),var(--g3) 48%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -10px rgba(0,0,0,.9)}
.mk-n.dn b{color:#DDEDE4;background:linear-gradient(180deg,#243230,#18211F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(120,200,170,.26)}
.mk-hot{display:flex;gap:8px;flex-wrap:wrap}
.mk-hot span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 11px;border-radius:11px;
  background:linear-gradient(180deg,rgba(220,184,99,.16),rgba(220,184,99,.05));
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.mk-hot b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:#FFF2CE}
.mk-hot small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.mk-empty{padding:14px;border-radius:12px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.mk-src{display:block;margin-top:9px;font-size:12.5px;font-weight:600;color:#8B857A}

.mk-cta{display:flex;gap:10px;margin-top:4px}
.mk-cta a,.mk-cta .dis{flex:1;display:grid;place-items:center;padding:13px;border-radius:14px;
  font-size:16px;font-weight:700;text-decoration:none;color:var(--ink-1);
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px var(--hair)}
.mk-cta a.pri{color:var(--gink);
  background:linear-gradient(180deg,var(--g1),var(--g2) 26%,var(--g3) 62%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px var(--g5),0 12px 26px -16px rgba(220,184,99,.8)}
.mk-cta .dis{color:var(--ink-2);opacity:.7}
@media(max-width:520px){
  .mk-pane{width:100%;max-width:none;left:0;top:auto;bottom:0;transform:none;
    max-height:90vh;border-radius:20px 20px 0 0;border-width:4px 0 0 0;
    animation:mk-up .32s cubic-bezier(.32,.72,0,1)}
  @keyframes mk-up{from{transform:translateY(100%)}}
  .mk-row{grid-template-columns:1fr 1fr}
  .mk-row .mk-box:first-child{grid-column:1 / -1}
}

/* 🔴 การ์ดในรางที่ "กดได้" ต้องหยุดให้กดโดน — เดิมหยุดเฉพาะตอน :hover
   ⇒ **มือถือไม่มี hover** ผู้เล่นต้องไล่กดการ์ดที่กำลังเลื่อน = กดพลาด/กดไม่โดน
   แก้: หยุดเมื่อ hover (เมาส์) · โฟกัสด้วยคีย์บอร์ด · หรือแตะ (คลาส .hold จาก JS) */
.fx-rail:hover .fx-track,
.fx-rail:focus-within .fx-track,
.fx-rail.hold .fx-track,
.tk:hover .tk-track,
.tk.hold .tk-track{animation-play-state:paused}

/* ══ hero — ความกว้างตัวหนังสือ (2026-08-26) ═══════════════════════════════
   🔴 พื้นหลังภาพ **ไม่ได้อยู่ไฟล์นี้** — ย้ายไป member/skins/crimson-global.css
      เพราะ skin.js โหลดสกินทีหลัง lobby.css แล้วสกินเซ็ต .lb-hero-in{background-image}
      ทับทั้งหมด (เสียเวลาไล่หา 3 รอบเพราะเขียนผิดไฟล์ — พิสูจน์ด้วย getComputedStyle)
   🔴 จำกัดความกว้าง "ตัวหนังสือ" ไม่ใช่จำกัด .lb-intro
      ตั้ง .lb-intro{max-width} เมื่อไหร่ flex จะดึง .lb-sum เลื่อนซ้ายมาทับภาพทันที */
@media (min-width:861px){ .lb-intro h2, .lb-intro p{max-width:620px} }
.lb-intro, .lb-sum{position:relative; z-index:1}