/* ==========================================================================
   shell.css — โครงหน้าฝั่งผู้เล่น (แถบข้าง + แถบหัว) · ใช้ร่วมทุกหน้า
   โหลดเป็นไฟล์สุดท้ายใน <head> → ทับ <style> ที่ฝังในแต่ละหน้า (17 หน้ามีสำเนาของตัวเอง)

   🔴 ทำไมต้องมีไฟล์นี้: `.ms-side` / `.ms-nav` ถูกก็อปเป็น CSS ในทุกหน้า (17 สำเนา)
      แก้ทีละหน้า = พลาดแน่ + ครั้งหน้าแก้ใหม่ต้องไล่ 17 รอบอีก ⇒ รวมมาไว้ที่เดียว

   ── เปลี่ยนอะไร (คำสั่งเจ้าของ 2026-08-22) ──────────────────────────────
   1) เมนู (`.ms-nav`) ย้ายจากแถบบน → **แถบข้างซ้าย** (เมนูยาว 17 รายการ อ่านแนวตั้งง่ายกว่า)
   2) ข้อมูลผู้ใช้ + เครดิต + ออกจากระบบ ย้ายจากแถบข้าง → **แถบหัว**
   3) นาฬิกาในแถบข้าง (`.ms-clock`) เอาออก
   ========================================================================== */

/* ══ แถบข้าง = เมนูล้วน ══════════════════════════════════════════════════ */
.ms-side{
  width:236px;flex:0 0 236px;
  background:linear-gradient(180deg,#1F1F1C,#141413);
  color:#E7E4DC;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;
  box-shadow:inset -1px 0 0 rgba(220,184,99,.16);
}
.ms-side .ms-logo{
  padding:18px 18px 14px;font-size:28px;
  box-shadow:inset 0 -1px 0 rgba(220,184,99,.14);
}
/* นาฬิกา + กล่องข้อมูลเดิมในแถบข้าง → ย้ายขึ้นหัว (shell.js) */
.ms-side .ms-clock{display:none!important}

/* เมนูแนวตั้ง */
.ms-side .ms-nav{
  display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  padding:10px 10px 14px;background:transparent;border:0;position:static;
  scrollbar-width:thin;scrollbar-color:rgba(220,184,99,.28) transparent;
}
.ms-side .ms-nav::-webkit-scrollbar{width:6px}
.ms-side .ms-nav::-webkit-scrollbar-thumb{background:rgba(220,184,99,.26);border-radius:99px}
.ms-side .ms-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  font-size:15.5px;font-weight:600;color:#BDB9AE;white-space:nowrap;cursor:pointer;
  text-decoration:none;min-height:0;
  transition:background .22s cubic-bezier(.32,.72,0,1),color .22s cubic-bezier(.32,.72,0,1);
}
.ms-side .ms-nav a:hover{background:rgba(255,255,255,.055);color:#F2EFE8}
.ms-side .ms-nav > a.active{
  color:#2A1F06;font-weight:700;
  background:linear-gradient(180deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--gg-edge,#6B5116);
}
/* ปุ่มออกจากระบบเดิมที่ก้นแถบข้าง — ย้ายขึ้นหัวแล้ว */
.ms-side .ms-side-act{display:none!important}

/* ══ แถบหัว = ตัวตน + เงิน + ออกจากระบบ ═════════════════════════════════ */
.ms-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:11px 18px;
  background:linear-gradient(180deg,#191A18,#141513);
  box-shadow:0 1px 0 rgba(220,184,99,.16),0 6px 18px -14px rgba(0,0,0,.9);
}
:root[data-theme="light"] .ms-head{
  background:linear-gradient(180deg,#FFFFFF,#FBFAF7);
  box-shadow:0 1px 0 rgba(168,132,46,.22),0 6px 16px -14px rgba(45,38,20,.4);
}

.ms-head .who{display:flex;align-items:center;gap:11px;min-width:0}
.ms-head .av{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  font-size:16px;font-weight:700;letter-spacing:.02em;color:#2A1F06;
  background:linear-gradient(180deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--gg-edge,#6B5116);
}
.ms-head .id{display:flex;flex-direction:column;gap:1px;min-width:0}
.ms-head .id b{font-size:16.5px;font-weight:700;line-height:1.2;color:var(--ink,#F2EFE8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-head .id .lv{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--gg-core,#DCB863)}

/* แผ่นเครดิต — ตัวเลขเงินต้องเห็นตลอดทุกหน้า ไม่ใช่เฉพาะหน้าล็อบบี้ */
.ms-head .cred{
  margin-left:auto;display:flex;align-items:baseline;gap:8px;
  padding:9px 16px;border-radius:12px;
  background:linear-gradient(180deg,#22252A,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(220,184,99,.32);
}
:root[data-theme="light"] .ms-head .cred{
  background:linear-gradient(180deg,#fff,#F6F3EC);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(168,132,46,.34)}
.ms-head .cred small{font-size:12px;letter-spacing:.14em;color:var(--muted,#A7A399)}
.ms-head .cred b{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--green,#5FD08C)}
.ms-head .cred i{font-style:normal;font-size:14px;color:var(--muted,#A7A399)}

.ms-head .act{display:flex;gap:8px;flex:0 0 auto}
.ms-head .act a{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;
  font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer;
  color:var(--ink,#E7E4DC);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(232,220,190,.12);
  transition:transform .26s cubic-bezier(.32,.72,0,1),background .26s ease;
}
:root[data-theme="light"] .ms-head .act a{background:#F3F1EC;box-shadow:inset 0 0 0 1px rgba(60,52,32,.13)}
.ms-head .act a:hover{background:rgba(255,255,255,.1)}
.ms-head .act a:active{transform:scale(.95)}
.ms-head .act a.out{color:#F2777F;box-shadow:inset 0 0 0 1px rgba(242,85,95,.3)}

/* ══ มือถือ: แถบข้างซ่อน (m.css จัดการอยู่แล้ว) · แถบหัวก็ซ่อน เพราะมี m-topbar ══
   🔴 ถ้าไม่ซ่อน จะมีแถบยอดเงิน 2 อัน ซ้อนกัน (m-topbar + ms-head) */
@media(max-width:900px){
  .ms-head{display:none}
  .ms-side{display:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   เมนูแถบข้าง (เดสก์ท็อป) — จัดกลุ่มพร้อมหัวข้อ
   🔴 16 รายการเรียงแบนๆ = กำแพงข้อความ ตาไล่หาไม่เจอ
      หัวข้อกลุ่มทำให้ "กวาดตาหาเป็นกลุ่ม" แทนที่จะอ่านทีละบรรทัด
   ══════════════════════════════════════════════════════════════════════════ */
.ms-side .ms-nav .grp{
  padding:14px 12px 6px;font-size:12px;font-weight:700;letter-spacing:.18em;
  color:rgba(220,184,99,.62);white-space:nowrap;
}
.ms-side .ms-nav .grp:first-child{padding-top:6px}
.ms-side .ms-nav a svg.ic{flex:0 0 auto;width:18px;height:18px;opacity:.7;transition:opacity .22s ease}
.ms-side .ms-nav a:hover svg.ic{opacity:1}
.ms-side .ms-nav > a.active svg.ic{opacity:1;stroke-width:1.95}
.ms-side .ms-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* แถบหัว: ไอคอนในปุ่ม */
.ms-head .act a svg.ic{width:15px;height:15px;flex:0 0 auto;opacity:.85}

/* ══════════════════════════════════════════════════════════════════════════
   มือถือ — แท็บล่าง 5 ปุ่ม (ปุ่มกลางยกขึ้น) + แผ่น "เพิ่มเติม"
   🔴 เดิมมีเมนู 2 ชุดซ้อนกัน: แถบ .ms-nav 16 อันเลื่อนแนวนอน + แท็บล่าง 5 อัน
      แถบเลื่อนแนวนอน = รูปแบบที่ "ของหาย" ง่ายที่สุด (ไม่รู้ว่ามีอะไรอยู่นอกจอ)
      ⇒ มือถือซ่อน .ms-nav ทิ้ง เหลือทางเดียว: แท็บล่าง + แผ่นเพิ่มเติม
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .ms-head{display:none}
  .ms-side{display:none!important}
  .ms-main > .ms-nav, .ms-app .ms-nav{display:none!important}
}

.m-tabbar.mt2{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:flex-end;justify-content:space-around;gap:2px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#1B1C1A,#131412);
  box-shadow:0 -1px 0 rgba(220,184,99,.18),0 -10px 26px -18px rgba(0,0,0,.95);
}
:root[data-theme="light"] .m-tabbar.mt2{
  background:linear-gradient(180deg,#FFFFFF,#F7F5F1);
  box-shadow:0 -1px 0 rgba(168,132,46,.22),0 -8px 22px -18px rgba(45,38,20,.5)}
@media(max-width:900px){.m-tabbar.mt2{display:flex}}

.m-tabbar.mt2 .mt{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 6px;border-radius:14px;text-decoration:none;
  color:var(--muted,#8D8B83);font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:color .22s ease,background .22s ease;
}
/* 🔴 เอาป้ายชื่อออก (เจ้าของสั่ง) — ที่ว่างที่ป้ายกินอยู่ (~18px) คืนให้ไอคอนทั้งหมด
   ⇒ ไอคอน 21 → 29px (+38%) โดย "แถบสูงเท่าเดิม" ไม่ต้องดันเนื้อหาหน้าเพิ่ม
   ซ่อนด้วย CSS ไม่ลบ node — aria-label/title ยังทำงาน และเอาป้ายคืนได้ด้วยการลบกฎเดียว */
/* 🔴 เจ้าของสั่งเอา "ป้ายชื่อ" กลับมาโชว์ 2026-09-02 — โชว์ span + ลดไอคอนให้ไอคอน+ป้ายพอดีแถบ 58px */
.m-tabbar.mt2 .mt > span{display:block;font-size:10.5px;font-weight:800;line-height:1.05;
  white-space:nowrap;letter-spacing:-.01em;
  /* ทองอ่อนไล่เฉดเดิม + เงา "ดำ" ให้อ่านออกบนพื้นมิ้นต์ (เจ้าของสั่ง 2026-09-02) */
  background:linear-gradient(180deg,#FCEFB8 0%,#E9C877 32%,#C99A2F 64%,#8A671C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
.m-tabbar.mt2 .mt.mid > span{display:none}   /* เอาป้าย "หน้าแรก" ปุ่มกลางออก (เจ้าของสั่ง 2026-09-02) */
.m-tabbar.mt2 .mt{justify-content:center;gap:2px}
.m-tabbar.mt2 .mt svg.ic{width:24px;height:24px}
/* ไอคอนแบบรูป 3D glass (แทน SVG) — เจ้าของสั่ง 2026-09-01
   🔴 รูปแต่ละอันสัดส่วนต่างกัน (บางอันแนวนอน 2:1) ⇒ normalize ด้วย "ความสูง"
      (height คงที่ · width:auto) ให้ไอคอนสูงเท่ากันทุกช่อง = แถวไอคอนดูเรียบ
      cap max-width กันตัวแนวนอน (ฝาก-ถอน) ล้นช่อง */
.m-tabbar.mt2 .mt img.ic{height:25px;width:auto;max-width:50px;object-fit:contain;display:block;
  /* 🔴 ห้ามใส่ drop-shadow/contrast: รูปไอคอนมี "แสงเรืองขอบจาง" เต็มกรอบสี่เหลี่ยม
     ⇒ เงา/คอนทราสต์ไปเน้นกรอบนั้น = ได้กรอบสี่เหลี่ยมรอบไอคอน (เจ้าของไม่เอา 2026-09-02)
     เพิ่มความเด่นด้วย saturate อย่างเดียว (ไม่แตะ alpha ขอบ = ไม่มีกรอบ) */
  filter:saturate(1.15)}
/* หน้าปัจจุบัน = "พิลล์นูน" ชุดเดียวกับ .ms-topnav a.on บนเดสก์ท็อป (2026-08-27)
   เจ้าของ: "ให้ปรับ desktop, mobile ไปด้วย" ⇒ ตัวบอกหน้าปัจจุบันต้องพูดภาษาเดียวกันทุกแถบ
   🔴 :not(.mid) บังคับ — ปุ่มกลางเป็น "วงกลมทองยกขึ้น" อยู่แล้ว
      ถ้าไม่กันไว้จะได้พิลล์ซ้อนหลังวงกลม (บั๊กเดิมที่เคยเจอตอนธีมสว่าง)
   🔴 ใช้ ::after absolute ไม่ใช่ background ของ <a> — <a> เป็น flex:1
      ทาพื้นตรง ๆ = พิลล์ยาวเต็มช่อง ไม่ได้หุ้มไอคอน */
.m-tabbar.mt2 .mt.active{color:var(--gg-core,#DCB863);background:none;isolation:isolate}
:root[data-theme="light"] .m-tabbar.mt2 .mt.active{color:var(--gg-core,#DCB863);background:none}
/* 🔴 m.css:74 วาด "ขีดทอง 3px" ไว้ที่ขอบบนของแท็บที่เลือกมาแต่เดิม
   พิลล์มาแทนหน้าที่นั้นแล้ว ⇒ ต้องปิดขีดเก่า ไม่งั้นมีทั้งขีดทั้งพิลล์ซ้อนกัน
   ปิดด้วย specificity (0,4,1) ชนะ (0,2,1) ของ m.css — ไม่ต้องพึ่งลำดับโหลด */
.m-tabbar.mt2 .mt.active::before{content:none}
/* 🔴 เจ้าของสั่งเอา "ขอบจม" ออก 2026-09-16 — ร่องกด (inset box-shadow) ดูจมติดพื้น
   เปลี่ยนเป็น "แสงทองนุ่มยกขึ้น" (glow halo) แทน: ไม่มี inset ไม่มีขอบเข้ม = ไม่จม
   แต่ยังบอก active ชัด (ไอคอน+ป้าย "ลอยเรืองทอง" กว่าแท็บอื่น) */
.m-tabbar.mt2 .mt.active:not(.mid)::after{
  content:'';position:absolute;inset:5px 7px;z-index:-1;border-radius:16px;
  background:radial-gradient(72% 60% at 50% 42%, rgb(242 214 132/40%), rgb(228 190 104/12%) 54%, transparent 72%);
  box-shadow:0 6px 18px -8px rgb(236 202 120/60%);   /* เงาทองนุ่มใต้พิลล์ = ลอยขึ้น ไม่จม */
}
/* ไอคอนแท็บที่เลือก = สว่าง/อิ่มสีขึ้น ให้ "เรืองทอง" เด่นกว่าแท็บอื่น
   🔴 ห้าม drop-shadow (รูปมีแสงเรืองขอบสี่เหลี่ยม → ได้กรอบ) ใช้ brightness+saturate อย่างเดียว */
.m-tabbar.mt2 .mt.active img.ic{filter:saturate(1.3) brightness(1.14)}
.m-tabbar.mt2 .mt{position:relative}

/* ══ ปุ่มกลาง = วงกลมยกขึ้น (2026-08-26 ตามรูปที่เจ้าของส่ง) ═════════════════
   เดิมเป็นแคปซูลมนที่มีป้ายชื่ออยู่ข้างใน · รูปที่ส่งมาเป็น "วงกลม" ลอยพ้นขอบแถบ
   แล้วป้ายชื่ออยู่ "ใต้" วงกลม (นอกวงกลม) เหมือนแท็บอื่น
   🔴 วงกลมต้องมีวงแหวนสีเดียวกับพื้นแถบคั่นไว้ ไม่งั้นมันดูจมติดขอบแถบ
      ใช้ box-shadow ชั้นนอกสุดเป็นวงแหวน 5px แทนการเว้น margin (ไม่กินพื้นที่ layout) */
.m-tabbar.mt2 .mt.mid{
  /* 🔴 ยกด้วย margin-top ติดลบ **ไม่ได้ผล** — แถบตั้ง align-items:flex-end
     ขอบล่างของปุ่มถูกตรึงกับก้นแถบอยู่ดี (วัดแล้ว: ยกไม่ขึ้นเลยสักพิกเซล)
     ⇒ ต้องยก "ตัววงกลม" เอง แล้วดึงระยะกลับด้วย margin-bottom ติดลบ
        เพื่อให้ป้ายชื่อยังอยู่ระดับเดียวกับแท็บอื่น */
  flex:0 0 auto;margin-top:0;padding:0;background:none;box-shadow:none;
  gap:6px;justify-content:flex-end;overflow:visible;isolation:isolate;
}
.m-tabbar.mt2 .mt.mid svg.ic{
  /* 🔴 flex:0 0 auto จำเป็น — ตัว <a> เป็น flex container ถ้าปล่อยให้ย่อได้
     วงกลมจะถูกบีบเป็น "วงรี" (เจอจริงจากภาพ ไม่ใช่จากค่าใน CSS) */
  flex:0 0 auto;
  width:36px;height:36px;stroke-width:1.9;box-sizing:content-box;
  padding:15px;border-radius:50%;color:#2A1F06;
  transform:translateY(-22px);margin-bottom:-22px;
  background:linear-gradient(180deg,var(--gg-lite,#FFF6DC) 0%,var(--gg-mid,#F0DCA0) 16%,var(--gg-core,#DCB863) 56%,var(--gg-deep,#A8822F) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 0 0 1px var(--gg-edge,#6B5116),
             0 0 0 6px var(--m-bar-ring,#7A0810),
             0 10px 22px -8px rgba(220,184,99,.85);
}
/* ปุ่มกลาง แบบรูป glass (แทน svg วงกลมทอง/เขียว) — วงกลมพื้นอ่อนยกลอย + "ขอบมิ้นวิ่ง"
   🔴 เดิมมีวงแหวนทึบ 6px (0 0 0 6px --m-bar-ring) คั่นวงกลมกับแถบ
      เปลี่ยนเป็น "วงแหวนมิ้นหมุน" (::after บน .mt.mid) แทน — ถอด 6px ออกไม่งั้นซ้อนกัน
   🔴 img เป็น replaced element ใส่ ::before/::after ไม่ได้ ⇒ วางวงแหวนบน <a>.mt.mid (พ่อ)
      + .mt.mid ต้อง isolation:isolate ให้ z-index:-1 อยู่หลังรูปแต่ไม่หลุดไปหลังพื้นแถบ */
.m-tabbar.mt2 .mt.mid img.ic{
  flex:0 0 auto;
  width:42px;height:42px;box-sizing:content-box;object-fit:contain;
  padding:11px;border-radius:50%;
  transform:translateY(-22px);margin-bottom:-22px;
  background:linear-gradient(180deg,#F5FBF9 0%,#DEF1EB 58%,#C6E4DA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 0 0 1px rgba(20,122,115,.20),
             0 10px 22px -8px rgba(20,122,115,.45);
  filter:none;
}
/* ── ขอบมิ้นวิ่ง: วงแหวน conic-gradient หมุนด้วย transform:rotate (ไม่พึ่ง @property)
   🔴 เดิมหมุนมุม conic ด้วย @property --mtr-a → in-app browser (LINE/FB) หลายตัวไม่รองรับ
      ⇒ ค้างเฟรม 0° โชว์ด้านเข้มกองบนหัว = เพี้ยน. transform:rotate รองรับทุกเบราว์เซอร์
   🔴 เฉดปรับให้มิ้นเป็นหลัก + comet ขาวสว่างวิ่ง (เขียวเข้มน้อย) ⇒ ต่อให้ค้างเฟรมก็ยังเป็นวงเรียบ
   วงแหวน 74px หลังวงกลม 64px ⇒ มิ้นโผล่ ~5px · bottom:1px = concentric (วัด screenshot) */
@keyframes mtr-spin{ to{ transform:translateX(-50%) rotate(360deg) } }
.m-tabbar.mt2 .mt.mid::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-5px;transform:translateX(-50%) rotate(0deg);   /* -5px = วัดแล้ววงกลมต่ำกว่า ring center 6px → เลื่อน ring ลงให้ concentric */
  width:74px;height:74px;border-radius:50%;
  background:conic-gradient(
    #46C6A6 0deg,#86F0D4 40deg,#EBFFF8 72deg,#86F0D4 104deg,
    #46C6A6 150deg,#2E9B86 210deg,#46C6A6 300deg,#46C6A6 360deg);
  animation:mtr-spin 2.6s linear infinite;
  filter:drop-shadow(0 0 5px rgba(95,214,180,.55));
}
@media(prefers-reduced-motion:reduce){
  .m-tabbar.mt2 .mt.mid::after{ animation:none }
}
.m-tabbar.mt2 .mt.mid:active img.ic{transform:translateY(-22px) scale(.93)}
/* ป้ายชื่อใต้วงกลม — สีเดียวกับแท็บอื่น ไม่ใช่สีเข้มของในวงกลม */
.m-tabbar.mt2 .mt.mid span{color:var(--ink,#F5F1E8)}
.m-tabbar.mt2 .mt.mid.active span{color:var(--gg-core,#DCB863)}
.m-tabbar.mt2 .mt.mid.active{background:none}
.m-tabbar.mt2 .mt.mid:active{transform:none}
.m-tabbar.mt2 .mt.mid:active svg.ic{transform:translateY(-22px) scale(.93)}
.m-tabbar.mt2 .mt:active{transform:scale(.94)}

/* ══ ลิ้นชักเมนูแบบรายการแนวตั้ง (2026-08-27 ตามรูปที่เจ้าของส่ง) ═══════════
   หัวแบรนด์ → ป้ายหมวดตัวเล็ก → รายการ "ไอคอน + ชื่อ" บรรทัดเดียว → เส้นคั่น
   🔴 ต่างจากของเดิม (ตารางการ์ด) ตรงที่ "อ่านเป็นรายการ" ⇒ กวาดตาหาเมนูเร็วกว่า
      และรองรับชื่อยาวโดยไม่ต้องตัดคำ (ชื่อไทยยาวกว่าอังกฤษเกือบเท่าตัว) */
.m-sheet .pane.dw2{padding:10px 12px calc(18px + env(safe-area-inset-bottom,0px))}

.m-sheet .dw-head{
  display:flex;align-items:center;gap:12px;padding:10px 8px 16px;
}
/* 🔴 2026-09-17: dw-mark = <img> โลโก้ J-heart (พื้นหลังโปร่งอยู่แล้ว วัด α มุม=0)
   ⇒ ตัดกล่อง background:rgba(0,0,0,.16)+เส้นขอบทองออก (เจ้าของสั่ง "ตัดพื้นหลังออก")
      เพราะบนธีมสว่าง (.pane=#fff) กล่องดำโปร่งกลายเป็น "สี่เหลี่ยมเทา" หลังโลโก้ = อ่านเป็นพื้นหลัง
      โลโก้ลอยสะอาดทั้ง 2 ธีม (พิสูจน์ด้วย chrome-devtools 2026-09-17) · object-fit:contain กันบิด */
.m-sheet .dw-mark{
  flex:0 0 auto;width:46px;height:46px;
  display:block;object-fit:contain;
}
.m-sheet .dw-name{display:flex;flex-direction:column;gap:2px;min-width:0}

/* 🔴 2026-09-17: ธงชาติวงกลม (.cflag) — LOTTO_FLAG_CC() วาด SVG "สี่เหลี่ยม 32×32 + sphere ทับ"
   ตัว SVG ไม่กลมเอง (ดู lotto-data.js §201-203 สั่งให้กลมด้วย wrapper) แต่ก่อนหน้านี้ .cflag
   ไม่เคยมี CSS ในไฟล์ไหนเลย ⇒ ธงโผล่เป็นสี่เหลี่ยม มุมสีธงยื่นพ้นวง = อ่านเป็น "พื้นหลัง"
   (เจ้าของสั่ง "เอาแบล็คกราวของ icon ธงชาติออก" check.html · เจ้าของสั่งธงกลม 2026-08-28)
   inline-flex+line-height:0 = ยุบตาม svg (30/34/120) · radius50%+overflow:hidden = clip มุมทิ้ง
   พิสูจน์ด้วย chrome-devtools 2026-09-17 · ครอบทุกหน้าที่โหลด shell.css (check/tickets/home) */
.cflag{display:inline-flex;border-radius:50%;overflow:hidden;vertical-align:middle;line-height:0}
.cflag svg{display:block}
.m-sheet .dw-name b{font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.1}
.m-sheet .dw-name small{font-size:12.5px;opacity:.72;letter-spacing:.06em}
.m-sheet .dw-x{
  margin-left:auto;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:12px;
  cursor:pointer;display:grid;place-items:center;color:inherit;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(232,220,190,.12);
}
.m-sheet .dw-x:active{transform:scale(.94)}

.m-sheet .dw-g{
  padding:12px 12px 8px;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.m-sheet .dw-list{display:flex;flex-direction:column;gap:2px}
.m-sheet .dw-i{
  display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:999px;
  text-decoration:none;cursor:pointer;color:inherit;
  font-size:16px;font-weight:600;line-height:1.3;
  transition:background .2s ease,transform .18s cubic-bezier(.32,.72,0,1);
}
/* ══ ชิปไอคอน (icon chip / embossed tile) — ตามภาพต้นแบบที่เจ้าของส่ง 2026-08-27 ══
   🔴🔴 ต้องเขียน `> .b` (ลูกตรง) เท่านั้น ห้ามเขียน `.dw-i .b`
        เพราะไอคอนในโปรเจกต์นี้เป็น SVG สองโทนที่ใช้ `<path class="a">` / `<path class="b">`
        ⇒ `.dw-i .b` จับ <path> ข้างในไอคอนไปด้วย (Playwright ฟ้อง "resolved to 3 elements")
        ตัวห่อไอคอนคือ <span class="b"> ที่เป็นลูกตรงของ .dw-i เท่านั้น
   ไอคอนไม่ลอยเปล่า ๆ แต่นั่งอยู่ใน "แผ่นสี่เหลี่ยมมนนูน" ทีละอัน
   สูตรนูน (extruded) = กลับทางกับร่องกด: ขอบบนรับแสง · เงาอยู่ใต้กรอบ
   🔴 radius 12/34 ≈ 35% = "สี่เหลี่ยมมน" ไม่ใช่วงกลม — เกิน ~45% เมื่อไรมันกลายเป็นวงรี
      ต้นแบบใช้ทรงสี่เหลี่ยมมนล้วน เพราะเรียงเป็นคอลัมน์แล้วขอบตรงช่วยจัดแนวสายตา */
.m-sheet .dw-i > .b{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;
  background:linear-gradient(160deg, rgb(255 236 200/12%) 0%, rgb(0 0 0/20%) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 240 210/24%),       /* ขอบบนรับแสง = นูนขึ้นมา */
    inset 0 0 0 1px rgb(255 236 200/13%),     /* เส้นขอบชิป */
    0 2px 6px -2px rgb(0 0 0/55%);            /* เงาใต้ชิป */
  transition:box-shadow .22s ease, background .22s ease;
}
.m-sheet .dw-i:hover > .b{background:linear-gradient(160deg, rgb(255 236 200/18%) 0%, rgb(0 0 0/16%) 100%)}
.m-sheet .dw-i svg.ic{width:19px;height:19px;color:var(--gg-mid,#F0DCA0)}
.m-sheet .dw-i .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sheet .dw-i:hover{background:rgba(255,255,255,.06)}
.m-sheet .dw-i:active{transform:scale(.985)}

/* หน้าปัจจุบัน = "ร่องที่กดจมลงไป" ตามภาพต้นแบบที่เจ้าของส่งมา (2026-08-27 รอบ 2)
   เดิมเป็นพิลล์ทองทึบเต็มใบ — เจ้าของ: "รูปที่ 2 เหมือนเป็นหลุมลงไป สวยกว่า"

   สูตรหลุม (neumorphism แบบ pressed) = แสงมาจากด้านบน ⇒
     · ผนังบนของหลุมอยู่ในเงา  → inset เงาเข้มด้านบน
     · ก้นหลุมด้านล่างรับแสง    → inset เส้นสว่างด้านล่าง
     · ขอบนอกด้านบนเป็นสันที่ถูกแสง → เส้นสว่างบางนอกกรอบด้านบน
   🔴 พื้นต้องเป็น "สีเดียวกับแผง แค่เข้มลง" ไม่ใช่สีตัดกัน — ทาสีตัดกันเมื่อไร
      มันกลายเป็น "ป้ายแปะทับ" ทันที ไม่ใช่ "ผิวเดียวกันที่ถูกกด"
   ตัวทองย้ายไปอยู่ที่ "ตัวหนังสือ+ไอคอน" แทน ⇒ ยังกวาดตาเจอว่าอยู่หน้าไหน */
.m-sheet .dw-i.on{
  color:var(--gg-lite,#FFF6DC);font-weight:800;
  /* 🔴 พื้นต้อง "สว่างกว่าแผงนิดเดียว" ไม่ใช่เข้มกว่า — เทียบภาพจริง 3 แบบแล้ว:
     พื้นเข้ม (ดำ 26%) = ดูเป็น "รูดำ" · พื้นใส = จางจนแทบไม่เห็น
     พื้นสว่าง 7% + ขอบเข้ม = ตรงกับต้นแบบที่สุด (ผิวเดียวกันที่ถูกกดลงไป) */
  background:rgb(255 236 200/7%);
  box-shadow:
    inset 0 3px 7px -2px rgb(0 0 0/62%),      /* ผนังบนของร่อง = อยู่ในเงา */
    inset 0 0 0 1px rgb(0 0 0/34%),           /* ขอบร่อง = เส้นเข้มบาง ๆ รอบวง */
    inset 0 -1.5px 0 rgb(255 240 210/20%),    /* ก้นร่องด้านล่างรับแสง */
    0 1px 0 rgb(255 240 210/10%);             /* สันขอบนอกด้านล่าง = ผิวที่ยังไม่ถูกกด */
}
/* ชิปของหน้าปัจจุบัน = ทองเรืองแสง (ต้นแบบใช้เขียวเรืองแสง — ที่นี่ทองคือสีแบรนด์)
   ⇒ แถวเป็น "ร่องกด" + ชิปเป็น "ปุ่มนูนสว่าง" = สองภาษาช่วยกันบอกว่าอยู่ตรงนี้ */
.m-sheet .dw-i.on > .b{
  background:linear-gradient(160deg,var(--gg-lite,#FFF6DC) 0%,var(--gg-core,#DCB863) 55%,var(--gg-deep,#A8822F) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/55%),
    inset 0 0 0 1px rgb(255 246 220/45%),
    0 0 14px -2px rgb(232 190 85/60%);
}
.m-sheet .dw-i.on svg.ic{color:#2A1F06}

.m-sheet .dw-sep{height:1px;margin:12px 12px 4px;background:rgba(232,220,190,.14)}
/* ออกจากระบบ = ทางออก ⇒ สีเตือน แต่ไม่เด่นเท่าเมนูหลัก */
.m-sheet .dw-out{color:#F2777F}
.m-sheet .dw-out svg.ic{color:#F2777F}
.m-sheet .dw-out:hover{background:rgba(242,85,95,.1)}

/* ══ แผ่น "เพิ่มเติม" ══════════════════════════════════════════════════════ */
.m-sheet{position:fixed;inset:0;z-index:80;display:none}
.m-sheet.on{display:block}
.m-sheet .bd{position:absolute;inset:0;background:rgba(6,7,9,.66);animation:mm-fade .28s}
/* 🔴 ไม่ใส่ backdrop-filter — เบลอฉากหลังทั้งจอ คนอ่านว่า "เว็บพัง" (บทเรียน speedwin) */
@keyframes mm-fade{from{opacity:0}}
.m-sheet .pane{
  position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;
  padding:8px 14px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,#212320,#171815 22%);
  box-shadow:inset 0 1px 0 rgba(220,184,99,.3),0 -22px 54px -22px rgba(0,0,0,.95);
  animation:mm-up .4s cubic-bezier(.32,.72,0,1);
}
:root[data-theme="light"] .m-sheet .pane{background:#fff;
  box-shadow:inset 0 1px 0 rgba(168,132,46,.32),0 -20px 50px -24px rgba(45,38,20,.5)}
@keyframes mm-up{from{transform:translateY(100%)}}
.m-sheet .grip{width:38px;height:4px;border-radius:99px;background:rgba(220,184,99,.34);margin:6px auto 12px}
.m-sheet .mm-head{display:flex;align-items:center;margin-bottom:6px}
.m-sheet .mm-head b{font-size:18.5px;font-weight:700;color:var(--ink,#F2EFE8)}
.m-sheet .mm-head .x{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);color:var(--muted,#A7A399);font-size:16px}
:root[data-theme="light"] .m-sheet .mm-head .x{background:#F0EEE9}

.m-sheet .mm-g{padding:15px 2px 8px;font-size:12px;font-weight:700;letter-spacing:.18em;
  color:rgba(220,184,99,.62)}
:root[data-theme="light"] .m-sheet .mm-g{color:#8A6A18}
.m-sheet .mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-sheet .mm-i{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px 11px;
  border-radius:15px;text-decoration:none;text-align:center;
  font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink,#E7E4DC);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(232,220,190,.09);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
:root[data-theme="light"] .m-sheet .mm-i{background:#F6F4EF;box-shadow:inset 0 0 0 1px rgba(60,52,32,.1)}
.m-sheet .mm-i:active{transform:scale(.95)}
.m-sheet .mm-i .b{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:rgba(220,184,99,.11);box-shadow:inset 0 0 0 1px rgba(220,184,99,.2)}
.m-sheet .mm-i svg.ic{width:20px;height:20px;color:var(--gg-core,#DCB863)}
:root[data-theme="light"] .m-sheet .mm-i svg.ic{color:#8A6A18}
.m-sheet .mm-i.on{box-shadow:inset 0 0 0 1.5px var(--gg-core,#DCB863)}
.m-sheet .mm-i.on .b{background:linear-gradient(180deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F))}
.m-sheet .mm-i.on svg.ic{color:#2A1F06}

/* ══ แถบยอดเงิน/โบนัส — ลอยติดเหนือแท็บล่าง (2026-08-26 ตามรูปที่เจ้าของส่ง) ══
   แถวเดียว: ซ้าย = ยอดเงินคงเหลือ + เหรียญ · ขวา = คืนยอดเสีย / แนะนำเพื่อน (ซ้อน 2 บรรทัด)
   🔴 มือถือเท่านั้น — เดสก์ท็อปไม่มีแท็บล่าง ก็ต้องไม่มีแถบนี้ (ซ่อนก่อน เปิดทีหลัง) */
.footer-info-user{display:none}

@media(max-width:900px){
  /* กล่องล่าง = แถบยอดเงิน + แท็บล่าง ซ้อนกันด้วย flex column
     🔴 แท็บล่างต้องเป็น static ในกล่องนี้ ไม่งั้นมัน fixed หลุดออกไปตรึงเอง */
  .m-bottom{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;flex-direction:column;overflow:visible}
  /* 🔴 overflow:visible ทั้งสองชั้น — ปุ่มกลางยกขึ้นพ้นขอบแถบ ถ้าชั้นไหน clip อยู่ วงกลมจะโดนตัดหัว */
  .m-bottom .m-tabbar{position:static;left:auto;right:auto;bottom:auto;z-index:auto;overflow:visible}
  /* แถบยอดเงินต้องอยู่ "ใต้" ปุ่มกลางในลำดับการวาด ไม่งั้นทับหัววงกลม */
  .m-bottom .footer-info-user{position:relative;z-index:0}
  .m-bottom .m-tabbar{position:relative;z-index:1}
  .footer-info-user{
    display:flex;align-items:center;gap:10px;padding:8px 12px;
    font-variant-numeric:tabular-nums;
  }
  .footer-info-user .num{font-variant-numeric:tabular-nums}

  .footer-info-user .account-balance{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto}
  .footer-info-user .account-balance .ic{width:30px;height:31px;flex:0 0 auto;display:block}
  .footer-info-user .account-balance .info{display:flex;flex-direction:column;gap:1px;min-width:0}
  .footer-info-user .account-balance .title{font-size:12.5px;font-weight:600;opacity:.8;white-space:nowrap}
  .footer-info-user .account-balance .amount{
    font-size:19px;font-weight:800;line-height:1.15;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* ขวา: 2 บรรทัดซ้อน · ป้ายชิดซ้าย ตัวเลขชิดขวา (อ่านเทียบกันง่ายกว่าเรียงกลาง) */
  .footer-info-user .account-bonus{
    margin-left:auto;display:grid;gap:3px;min-width:0;flex:0 1 auto;
  }
  .footer-info-user .account-bonus > *{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:3px 10px;border-radius:9px;text-decoration:none;color:inherit;min-width:0;
  }
  .footer-info-user .account-bonus .title{font-size:12.5px;font-weight:600;opacity:.8;white-space:nowrap}
  .footer-info-user .account-bonus .amount{font-size:13.5px;font-weight:800;white-space:nowrap}
  /* คืนยอดเสีย = กดได้ · แนะนำเพื่อน = ยังไม่มีระบบ ⇒ จางกว่าให้รู้ว่าไม่ใช่ปุ่ม */
  .footer-info-user .bonus-loss{cursor:pointer}
  .footer-info-user .bonus-loss:active{transform:scale(.97)}
  /* ทั้งสองช่องกดได้แล้ว (แนะนำเพื่อนมีหน้าจริงตั้งแต่ 0078) */

  /* เผื่อที่ให้เนื้อหา = ความสูง "จริง" ของกล่องล่าง (JS วัดแล้วใส่ให้)
     fallback 130px เผื่อกรณี JS ยังไม่ทัน — ยอมเผื่อเกินดีกว่าโดนบัง */
  /* 🔴 ต้องเผื่อที่ "ทั้งฝั่ง body ด้วย" ไม่ใช่แค่ .ms-content
     วัดจริงแล้วพบว่าหน้าล็อบบี้ตัวเลื่อนคือ body ⇒ กฎที่จับแต่ .ms-content ไม่โดน
     ⇒ ท้ายเนื้อหาโดนแถบบัง 50px (เห็นตอนเลื่อนสุด ไม่เห็นตอนเปิดหน้าใหม่) */
  body.m-has-tabbar,
  body.m-has-tabbar .ms-content,body.m-has-tabbar .bet-content{
    padding-bottom:calc(var(--m-bottom-h,130px) + var(--m-safe-b,0px) + 16px)!important;
  }
  body.m-has-tabbar #mchat,body.m-has-tabbar .mc-fab{
    bottom:calc(var(--m-bottom-h,130px) + var(--m-safe-b,0px) + 12px)!important;
  }
}
@media(max-width:360px){
  .footer-info-user .account-balance .title,
  .footer-info-user .account-bonus .title{font-size:11.5px}
  .footer-info-user .account-balance .amount{font-size:17px}
}

.m-sheet .mm-out{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;padding:14px;
  border-radius:14px;cursor:pointer;text-decoration:none;font-size:16px;font-weight:700;color:#F2777F;
  background:rgba(242,85,95,.09);box-shadow:inset 0 0 0 1px rgba(242,85,95,.28);
}
.m-sheet .mm-out svg.ic{width:18px;height:18px}

@media(prefers-reduced-motion:reduce){.m-sheet *,.m-tabbar *{animation:none!important;transition:none!important}}

/* 🔴 ปุ่มลอยแชทต้องหลบตอนแผ่นเมนูเปิด — ไม่งั้นลอยทับเมนูอยู่ข้างบน
   (z-index สูงกว่าแผ่น) ใช้ :has() ถ้าเบราว์เซอร์ไม่รองรับก็แค่ยังเห็นปุ่ม ไม่พัง */
body:has(.m-sheet.on) .mc-fab{opacity:0;pointer-events:none;transition:opacity .2s ease}

/* ══════════════════════════════════════════════════════════════════════════
   แถบข้างเดสก์ท็อป — ออกแบบใหม่ให้เป็น "หน้าผู้เล่น" ไม่ใช่คอนโซลหลังบ้าน
   (2026-08-24 · เจ้าของ: "ส่วนนี้ทำให้เหมือนหน้า BO ลองออกแบบใหม่")

   วินิจฉัยก่อนแก้ — ทำไมของเดิมอ่านเป็นหลังบ้าน (ไม่ใช่เรื่องสี):
     1. รายการ 18 อัน **น้ำหนักเท่ากันหมด** = คอนโซลของคนทำงาน ที่ทุกงานสำคัญเท่ากัน
        หน้าผู้เล่นมีงานเดียวที่สำคัญที่สุด (ลงเงิน → แทง) ⇒ ต้องมีปุ่มหลักที่ชนะทุกอย่าง
     2. หัวข้อกลุ่มเป็นตัวพิมพ์เล็กสีเทา = ป้ายกำกับตาราง ไม่ใช่ป้ายของเว็บบันเทิง
     3. ไอคอนตัวเท่าตัวหนังสือ ไม่มีจุดยึดสายตา ⇒ ตากวาดหาเมนูไม่เจอ ต้องอ่านทีละบรรทัด
     4. พื้นเรียบไม่มีแสง = จอโปรแกรม ไม่ใช่ล็อบบี้
   ══════════════════════════════════════════════════════════════════════════ */

/* แสงทองจางบนหัวแถบ — ให้รู้สึกว่ามี "ที่ว่างที่มีไฟส่อง" ไม่ใช่แผงสีเดียว */
.ms-side{position:relative}
.ms-side::before{
  content:'';position:absolute;inset:0 0 auto 0;height:230px;pointer-events:none;
  background:radial-gradient(150% 100% at 20% 0%,rgba(220,184,99,.16),transparent 62%);
}
.ms-side .ms-logo{position:relative;z-index:1}
.ms-side .ms-nav{position:relative;z-index:1;gap:1px;padding:12px 12px 18px;
  /* 🔴 ต้องรีเซ็ต: `.ms-nav` ใน styles.css เป็นเมนู **แนวนอน** ที่ตั้ง `flex-wrap:wrap` ไว้
     แถบข้างเป็น column + สูงคงที่ ⇒ พอรายการยาวเกินจอ มันไม่เลื่อน แต่ **ขึ้นคอลัมน์ที่ 2**
     กลายเป็นแถวไอคอนลอยชิดขวา (เห็นจากภาพจริง ไม่ใช่จากการอ่านโค้ด) */
  flex-wrap:nowrap}

/* ── ปุ่มหลัก: แทงหวย ─────────────────────────────────────────────────────── */
.ms-side .ms-nav > a.ms-cta{
  /* 🔴 ต้องมี `> a` ให้ specificity (0,3,1) ชนะ `.ms-side .ms-nav a` (0,2,1) ของเดิม
     ไม่งั้นปุ่มทองโดนบังคับเป็นสีตัวหนังสือเมนู = ตัวหนังสือขาวบนพื้นทอง อ่านไม่ออก
     (ตระกูลเดียวกับบั๊ก `.pl button` ที่เคยลบพื้นหลังปุ่มทั้งหน้าแทงหวย) */
  display:flex;align-items:center;gap:11px;margin:0 0 9px;padding:12px 13px;border-radius:15px;
  text-decoration:none;color:#2A1F06;
  background:linear-gradient(150deg,var(--gg-lite,#FFF6DC),var(--gg-mid,#F0DCA0) 26%,var(--gg-core,#DCB863) 62%,var(--gg-deep,#A8822F));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 0 1px var(--gg-edge,#6B5116),
             0 12px 26px -16px rgba(220,184,99,.75);
  transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s cubic-bezier(.32,.72,0,1);
}
.ms-side .ms-nav > a.ms-cta:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px var(--gg-edge,#6B5116),0 16px 30px -16px rgba(220,184,99,.9)}
.ms-side .ms-nav > a.ms-cta:active{transform:scale(.985)}
.ms-side .ms-nav > a.ms-cta .i{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(42,31,6,.16);box-shadow:inset 0 0 0 1px rgba(42,31,6,.18)}
.ms-side .ms-nav > a.ms-cta .i svg.ic{width:19px;height:19px;color:#2A1F06}
.ms-side .ms-nav > a.ms-cta .x{display:flex;flex-direction:column;gap:1px;min-width:0}
.ms-side .ms-nav > a.ms-cta .x b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.ms-side .ms-nav > a.ms-cta .x small{font-size:12.5px;font-weight:600;opacity:.72}

/* ── ทางลัดเงิน 2 ปุ่ม ─────────────────────────────────────────────────────── */
.ms-side .ms-money{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.ms-side .ms-nav .ms-money a{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px;border-radius:12px;
  font-size:14.5px;font-weight:700;color:#E4DFD2;text-decoration:none;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(220,184,99,.20);
  transition:background .22s,box-shadow .22s,color .22s;
}
.ms-side .ms-nav .ms-money a:hover{background:rgba(220,184,99,.14);color:#FFF2CE;
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.44)}
.ms-side .ms-nav .ms-money a svg.ic{width:16px;height:16px}

/* ── หัวข้อกลุ่ม: เส้นทอง + ป้าย (ไม่ใช่ label เทาแบบตาราง) ─────────────────── */
.ms-side .ms-nav .grp{
  display:flex;align-items:center;gap:9px;margin:15px 2px 7px;
  font-size:11.5px;font-weight:800;letter-spacing:.2em;color:#9C8B5F;text-transform:uppercase;
}
.ms-side .ms-nav .grp::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(220,184,99,.34),transparent);
}
.ms-side .ms-nav .grp:first-of-type{margin-top:2px}

/* ── รายการเมนู: ไอคอนมีกล่อง = จุดยึดสายตา ──────────────────────────────── */
.ms-side .ms-nav > a:not(.ms-cta){
  position:relative;display:flex;align-items:center;gap:11px;
  padding:8px 12px 8px 9px;border-radius:13px;
  font-size:15.5px;font-weight:600;color:#B9B5AA;white-space:nowrap;text-decoration:none;cursor:pointer;
  background:transparent;box-shadow:none;
  transition:background .22s cubic-bezier(.32,.72,0,1),color .22s,transform .22s cubic-bezier(.32,.72,0,1);
}
.ms-side .ms-nav > a .t{
  width:30px;height:30px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(232,220,190,.09);
  transition:background .22s,box-shadow .22s,color .22s;
}
.ms-side .ms-nav > a .t svg.ic{width:17px;height:17px}
.ms-side .ms-nav > a:not(.ms-cta):hover{background:rgba(255,255,255,.05);color:#F5F1E8;transform:translateX(2px)}
.ms-side .ms-nav > a:not(.ms-cta):hover .t{background:rgba(220,184,99,.16);color:#F0DCA0;
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.34)}

/* หน้าปัจจุบัน — แถบทองบางด้านซ้าย + พื้นทองจาง
   🔴 ของเดิมทาทองเต็มแถบ = อ่านเป็น "แถวที่ถูกเลือกในตาราง" (ภาษาของหลังบ้าน)
      ทองจาง + ขีดข้าง = "คุณอยู่ตรงนี้" แบบเว็บผู้ใช้ทั่วไป และไม่แย่งสายตาจากปุ่มหลัก */
.ms-side .ms-nav > a.active{
  color:#FFF2CE;font-weight:700;
  background:linear-gradient(90deg,rgba(220,184,99,.20),rgba(220,184,99,.05) 62%,transparent);
  box-shadow:none;
}
.ms-side .ms-nav > a.active::before{
  content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:99px;
  background:linear-gradient(180deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F));
  box-shadow:0 0 10px rgba(220,184,99,.6);
}
.ms-side .ms-nav > a.active .t{
  color:#2A1F06;
  background:linear-gradient(180deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--gg-edge,#6B5116);
}

/* ธีมสว่าง */
:root[data-theme="light"] .ms-side .ms-nav .ms-money a{background:rgba(168,132,46,.10);color:#5A4718;
  box-shadow:inset 0 0 0 1px rgba(168,132,46,.28)}
:root[data-theme="light"] .ms-side .ms-nav > a:not(.ms-cta){color:#5C574C}
:root[data-theme="light"] .ms-side .ms-nav > a .t{background:rgba(60,52,32,.06);
  box-shadow:inset 0 0 0 1px rgba(60,52,32,.10)}

/* ══ ไอคอน duotone — 2 น้ำหนักจากสีเดียว (2026-08-24) ═══════════════════════
   `.a` = มวลหลัก · `.b` = รายละเอียด · ทั้งคู่ใช้ `currentColor`
   ⇒ เปลี่ยนสีที่ตัวแม่ทีเดียว ได้ทั้ง "ทองบนพื้นเข้ม" และ "เข้มบนพื้นทอง" */
svg.ic .a{opacity:.34}
svg.ic .b{opacity:1}

/* สีทองของไอคอนเมนู (เจ้าของสั่ง: "ปรับสีเป็นสีทอง")
   🔴 ทาที่ `.t` (กล่องไอคอน) ไม่ใช่ที่ <a> — ไม่งั้นตัวหนังสือเมนูกลายเป็นทองไปด้วย
      ทองบนตัวหนังสือยาวๆ = คอนทราสต์ตกกับพื้นเข้ม อ่านนาน ๆ แล้วล้า */
.ms-side .ms-nav > a .t{color:var(--gg-core,#DCB863)}
.ms-side .ms-nav > a:hover .t{color:var(--gg-mid,#F0DCA0)}
.ms-side .ms-nav > a.active .t{color:#2A1F06}          /* พื้นทอง ⇒ ไอคอนต้องเข้ม */
.ms-side .ms-nav .ms-money a svg.ic{color:var(--gg-core,#DCB863)}
:root[data-theme="light"] .ms-side .ms-nav > a .t{color:#A8822F}
:root[data-theme="light"] .ms-side .ms-nav > a.active .t{color:#2A1F06}
/* ไอคอนตันมีมวลมากกว่าไอคอนเส้น ⇒ ลดขนาดลงนิดให้สมดุลกับตัวหนังสือเท่าเดิม */
.ms-side .ms-nav > a .t svg.ic{width:16.5px;height:16.5px}
.m-sheet .mm-i .b svg.ic{width:19px;height:19px}

/* ══ ไอคอนเมนู = "ไทล์ทอง + รูปสีเข้ม" (เจ้าของเลือกแบบนี้ 2026-08-24) ═══════
   ทำไมแบบนี้ชนะแบบรูปภาพ 3D สำหรับ *เมนู* โดยเฉพาะ:
     · ทุกตัวทรงเดียวกัน สูงเท่ากันเป๊ะ ⇒ เมนู 18 รายการเรียงเป็นแถวนิ่ง ไม่กระโดด
     · เป็น SVG ⇒ คมทุกความละเอียด · ไม่มีไฟล์ให้โหลด · เปลี่ยนสีตามสถานะได้ทันที
   🔴 ไม่ต้องวาดใหม่: ใช้ไอคอน duotone ชุดเดิม แค่ **สลับขั้ว** —
      กล่อง `.t` เป็นทอง · ตัวรูปเป็นสีเข้ม (ของเดิมกล่องเข้ม/รูปทอง) */
.ms-side .ms-nav > a .t,
.m-sheet .mm-i .b{
  background:linear-gradient(160deg,#FFF6DC,#F0D48E 34%,#D4AC55 68%,#B58F39);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(107,81,22,.42),
             0 3px 7px -4px rgba(0,0,0,.85);
}
.ms-side .ms-nav > a .t svg.ic,
.m-sheet .mm-i .b svg.ic{color:#2A1F06}
.ms-side .ms-nav > a:hover .t{
  background:linear-gradient(160deg,#FFFBEE,#F7E0A6 34%,#DDB863 68%,#C09A41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(107,81,22,.55),
             0 4px 10px -4px rgba(0,0,0,.9);
}
/* แถวที่เลือกอยู่: พื้นแถวเป็นทองจางแล้ว ⇒ ไทล์ต้องกลับเป็น "เข้ม/รูปทอง" ไม่งั้นทองบนทองกลืนกัน */
.ms-side .ms-nav > a.active .t{
  background:linear-gradient(180deg,#2A2C31,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1.5px rgba(220,184,99,.55);
}
.ms-side .ms-nav > a.active .t svg.ic{color:var(--gg-mid,#F0DCA0)}
:root[data-theme="light"] .ms-side .ms-nav > a .t{
  background:linear-gradient(160deg,#FFF6DC,#F0D48E 34%,#D4AC55 68%,#B58F39)}

/* ══ จังหวะและความกว้างของเนื้อหา (2026-08-24) ═══════════════════════════════
   เจ้าของสั่ง: "ให้ content แต่ละ section มีขนาดประมาณนี้" (โครง ark789:
   section-tight > container > [eyebrow → h2 → lead] → เนื้อหา)

   🔴 ปัญหาเดิม: `.ms-content` ไม่มี max-width ⇒ บนจอ 1600px เนื้อหากว้าง **1364px**
      บรรทัดคำอธิบายยาวเกิน 120 ตัวอักษร — ตาต้องกวาดไกลจนหาบรรทัดถัดไปไม่เจอ
      (งานวิจัย typography: อ่านสบายที่ 45–75 ตัวอักษรต่อบรรทัด)
   🔴 แก้ที่ `.ms-content` ที่เดียว = ได้ครบทั้ง 19 หน้า ไม่ต้องไล่แก้ทีละหน้า */
.ms-content{
  --sec:22px;                     /* ระยะห่างระหว่าง section (section-tight) */
  width:100%;max-width:1180px;margin-inline:auto;
}
/* หัวข้อของแต่ละ section — จังหวะเดียวกันทุกที่ ไม่ต้องตั้ง margin เองรายจุด */
.ms-content .sec-h{margin-bottom:26px}
.ms-content .sec-h .eyebrow{display:inline-flex;align-items:center;gap:7px}
.ms-content .sec-h h2{margin:12px 0 0}
.ms-content .sec-h .lead{margin:10px 0 0;font-size:15.5px;line-height:1.75;max-width:68ch}

/* จอกว้างมาก: ขยาย max-width นิดให้ไม่ดูลอยกลางจอ แต่ยังคุมความยาวบรรทัด */
@media(min-width:1700px){ .ms-content{max-width:1320px} }

/* ══════════════════════════════════════════════════════════════════════════
   แถบเมนูบน + ลิ้นชักซ้าย (2026-08-24) — แทนแถบข้างเดิม
   ══════════════════════════════════════════════════════════════════════════ */
/* ไม่มีแถบข้างแล้ว ⇒ ต้องยกเลิกการจองคอลัมน์ซ้ายของ layout เดิม */
.ms-app.no-side{display:block}
.ms-app.no-side .ms-main{width:100%;max-width:none}

.ms-topnav{
  position:sticky;top:0;z-index:19;display:flex;align-items:center;gap:10px;
  padding:0 18px;
  background:linear-gradient(180deg,#17181A,#121314);
  box-shadow:0 1px 0 rgba(220,184,99,.16),0 10px 22px -18px rgba(0,0,0,.95);
}
:root[data-theme="light"] .ms-topnav{background:linear-gradient(180deg,#FFF,#F8F6F1);
  box-shadow:0 1px 0 rgba(168,132,46,.22)}
/* 🔴 2026-08-26 — แถบนี้ต้องมี "โลโก้ตรงกลาง" + "เข้าสู่ระบบด้านขวา"
   ใช้ grid 3 ช่อง: ปีกเมนูซ้าย | โลโก้ | ปีกเมนูขวา+ปุ่ม
   ช่องข้างเป็น minmax(0,1fr) เท่ากัน ⇒ โลโก้อยู่กึ่งกลางจริงเสมอ
   และไม่มีใครทับโลโก้ได้โดยโครงสร้าง (บทเรียนจากหัวเว็บที่เพิ่งแก้) */
/* 🔴 2026-08-27 โลโก้ย้ายขึ้นหัวเว็บแล้ว ⇒ ไม่ต้องเว้นช่องกลางอีก
   ถ้าคง grid `1fr auto 1fr` ไว้: เหลือลูก 2 ตัว → .tn-r ไปนั่งช่อง "กลาง"
   ปีกซ้ายเลยได้แค่ครึ่งจอ (634px) แต่เมนูต้องการ 784px ⇒ **"แทงหวย" ถูกเลื่อนหลุดออกนอกจอ**
   (เมนูมี overflow-x:auto ที่ซ่อน scrollbar ⇒ หายไปเงียบๆ ไม่มีอะไรฟ้อง)
   ⇒ กลับเป็น flex แถวเดียว เมนูอยู่กลาง · ปุ่มฝาก-ถอน (มือถือ) ชิดขวา */
.ms-topnav .tn-in{
  display:flex;align-items:center;gap:14px;flex:1;min-width:0;
  max-width:1400px;margin-inline:auto;justify-content:center;
}
.ms-topnav .tn-l,.ms-topnav .tn-r{
  display:flex;align-items:center;gap:4px;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.ms-topnav .tn-l{justify-content:center;flex:0 1 auto}   /* เมนูก้อนเดียว อยู่กลางแถบ */
.ms-topnav .tn-r::-webkit-scrollbar,.ms-topnav .tn-l::-webkit-scrollbar{display:none}
.ms-topnav .tn-in::-webkit-scrollbar{display:none}
.ms-topnav .ms-brand2{
  /* 🔴 ต้องล้ม `.ms-topnav a{display:flex;gap:8px}` — ไม่งั้น 💛 / Jingjai / lot
     กลายเป็นสมาชิก flex สามชิ้น มีช่องไฟ 8px คั่น ⇒ อ่านเป็น "Jingjai lot" */
  display:block;gap:0;
  flex:0 0 auto;text-decoration:none;white-space:nowrap;justify-self:center;
  font-size:25px;font-weight:800;letter-spacing:.4px;line-height:1;padding:6px 0;
  background:linear-gradient(95deg,#f5db8b 0%,#d8b661 45%,#b9c0cc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ms-topnav .ms-brand2 .lv{-webkit-text-fill-color:initial;font-size:.62em;margin-right:6px;vertical-align:middle}
/* โลโก้ในแถบเมนู = **ของมือถือเท่านั้น** — เดสก์ท็อปใช้ตัวที่อยู่หัวเว็บ
   🔴 กฎซ่อนต้องอยู่ "หลัง" บล็อก .ms-topnav .ms-brand2 ข้างบน และ specificity ต้องสูงกว่า
      รอบแรกวางไว้ก่อน + specificity เท่ากัน (0,2,0) ⇒ ตัวหลังชนะ ⇒ โลโก้โผล่ 2 อันบนเดสก์ท็อป
   🔴 ซ่อนก่อน เปิดทีหลัง: พลาดแล้วผลคือ "ไม่เห็นบนมือถือ" ไม่ใช่ "ซ้อน 2 อันบนเดสก์ท็อป" */
.ms-topnav .ms-brand2.tn-brand{display:none}
@media(max-width:900px){ .ms-topnav .ms-brand2.tn-brand{display:block} }
/* ══ ปุ่มเข้าสู่ระบบ / ออกจากระบบ — "ปุ่มจริง" ไม่ใช่ลิงก์เมนู ═══════════════
   🔴 เดิมหน้าตาเหมือนลิงก์เมนูข้างๆ เป๊ะ ⇒ ผู้เล่นไม่รู้ว่าอันไหนคือปุ่มที่ต้องกด
   ⇒ ทำเป็นแคปซูล มีพื้น/ขอบ/เงาของตัวเอง แยกออกจากแถวเมนูชัดเจน
   🔴 สองสถานะน้ำหนักไม่เท่ากัน — "เข้าสู่ระบบ" คือสิ่งที่อยากให้กด (ทองเต็มใบ)
      ส่วน "ออกจากระบบ" เป็นทางออก (เส้นขอบบาง) · ทำทองทั้งคู่ = เชิญให้กดออกจากระบบ */
.ms-head .act .out{
  margin-left:auto;flex:0 0 auto;
  padding:9px 16px;border-radius:999px;font-weight:700;line-height:1;
  transition:transform .16s cubic-bezier(.32,.72,0,1),filter .16s,box-shadow .16s;
}
.ms-head .act .out svg.ic{width:17px;height:17px}
.ms-head .act .out:active{transform:translateY(1px) scale(.985)}

/* ① ยังไม่ล็อกอิน = ปุ่มหลัก ทองเต็มใบ ตัวหนังสือเข้ม */
.ms-head .act .out.is-login,
.ms-head .act .out.is-login:hover{
  color:#2A1400;
  background:linear-gradient(180deg,#FFF0BE 0%,#F7D774 16%,#E9C25C 46%,#CFA038 78%,#B8871F 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,250,.95),
    inset 0 -2px 0 rgba(122,74,10,.42),
    0 6px 14px -6px rgba(60,20,0,.55);
}
.ms-head .act .out.is-login svg.ic{color:#4A2A02}
.ms-head .act .out.is-login:hover{filter:brightness(1.06)}

/* ② ล็อกอินแล้ว = ปุ่ม "ออกจากระบบ" → ไล่สีแดงเข้ม (เจ้าของสั่ง 2026-09-10 "ไล่สีเข้ม")
   จากเดิมพื้นโปร่ง/ตัวอักษรชมพูจาง → ปุ่มทึบไล่เฉดแดงเข้ม ตัวอักษรอ่อน = เห็นชัดว่าเป็น "ทางออก" */
.ms-head .act .out.is-out{
  color:#FFE1DE;
  background:linear-gradient(180deg,#A32C2C 0%,#7E1D1D 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,215,.28), inset 0 -1.5px 0 rgba(60,6,6,.5), 0 6px 14px -7px rgba(70,8,8,.6);
}
.ms-head .act .out.is-out:hover{
  color:#FFF0EE;
  background:linear-gradient(180deg,#B23636 0%,#8A2222 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,215,.34), inset 0 -1.5px 0 rgba(60,6,6,.55), 0 8px 18px -8px rgba(70,8,8,.68);
}
:root[data-theme="light"] .ms-head .act .out.is-out{
  color:#FFECEA;
  background:linear-gradient(180deg,#A32C2C 0%,#7E1D1D 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,215,.3), 0 6px 14px -7px rgba(120,10,14,.42);
}
:root[data-theme="light"] .ms-head .act .out.is-out:hover{
  background:linear-gradient(180deg,#B23636 0%,#8A2222 100%)}

.ms-head .act .out:focus-visible{outline:2px solid #FFF0C4;outline-offset:2px}
@media(prefers-reduced-motion:reduce){ .ms-head .act .out{transition:none} }

/* ══ ปุ่ม "Login" บนหัวเว็บ (แขกเท่านั้น · shell.js สลับกับ "ข้อมูลผู้ใช้") — เจ้าสั่ง 2026-09-16 ═══
   🔴 ยกชุดปุ่ม .btn "เข้าสู่ระบบ": พื้นเทียลเข้ม (::before) + ตัวขาว + ริงวิ่งมิ้นจาง (conic --tnc-a)
   🔴 เป็น <button> จงใจ ⇒ กฎ .ms-head .act a (base + home.html !important) ยิงเฉพาะ <a> = ไม่โดน ไม่ต้องสู้ !important
   🔴 isolation:isolate + ::before z-index:-1 → หน้าเทียลมุดใต้ตัวอักษร (กันบั๊ก "ปุ่มเปล่า") */
.ms-head .act .hd-login{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;
  flex:0 0 auto; position:relative; overflow:hidden; isolation:isolate;
  border:0;border-radius:999px;padding:9px 20px;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1;
  color:#FFFFFF;
  background:conic-gradient(from var(--tnc-a),
    #E4F5F0 0deg,#CFEAE2 46deg,#B4DFD3 82deg,#8FCFC0 100deg,#A9D9CC 116deg,
    #CFEAE2 140deg,#E4F5F0 196deg,#EAF7F3 300deg,#E4F5F0 360deg);
  animation:tnc-spin 2.8s linear infinite;
  box-shadow:0 4px 12px -6px rgba(6,46,41,.5), 0 10px 22px -14px rgba(4,30,26,.5);
  transition:transform .16s cubic-bezier(.32,.72,0,1),filter .16s;
}
.ms-head .act .hd-login::before{
  content:''; position:absolute; inset:2px; border-radius:999px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#127C6E 0%,#0F6E60 16%,#0C5A4F 46%,#0A4A41 78%,#083C35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 0 rgba(4,42,38,.45),
    inset 0 0 14px rgba(63,191,168,.22);
}
.ms-head .act .hd-login:hover{filter:brightness(.97) saturate(1.05)}
.ms-head .act .hd-login:active{transform:translateY(1px) scale(.985)}
.ms-head .act .hd-login:focus-visible{outline:2px solid #5FD6C0;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .ms-head .act .hd-login{animation:none;transition:none;background:linear-gradient(135deg,#CBE8E0,#DCF1EC 45%,#EAF7F3)}
}

/* ══ ปุ่ม "สมัคร" บนหัวเว็บ (แขกเท่านั้น · คู่กับ .hd-login) — เจ้าสั่ง 2026-09-16 (รูป desktop) ═══
   🔴 ยกชุดปุ่ม .btn-reg-cta: พื้นมิ้นอ่อน (::before) + ตัวเขียว #0C5A4F + ริงวิ่งเทียลเข้ม (conic --tnc-a) */
.ms-head .act .hd-reg{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;
  flex:0 0 auto; position:relative; overflow:hidden; isolation:isolate;
  border:0;border-radius:999px;padding:9px 20px;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1;
  color:#0C5A4F;
  background:conic-gradient(from var(--tnc-a),
    #062E29 0deg,#0C5A4F 46deg,#3FBFA8 82deg,#DCF1EC 100deg,#CDEFE6 116deg,
    #4FCBB4 140deg,#0C5A4F 196deg,#062E29 300deg,#062E29 360deg);
  animation:tnc-spin 2.8s linear infinite;
  box-shadow:0 4px 12px -6px rgba(6,46,41,.5), 0 10px 22px -14px rgba(4,30,26,.5);
  transition:transform .16s cubic-bezier(.32,.72,0,1),filter .16s;
}
.ms-head .act .hd-reg::before{
  content:''; position:absolute; inset:2px; border-radius:999px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#EAF7F3 0%,#DCF1EC 40%,#CBE8E0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(12,90,79,.18),
    inset 0 0 14px rgba(63,191,168,.14);
}
.ms-head .act .hd-reg:hover{filter:brightness(1.06) saturate(1.05)}
.ms-head .act .hd-reg:active{transform:translateY(1px) scale(.985)}
.ms-head .act .hd-reg:focus-visible{outline:2px solid #5FD6C0;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .ms-head .act .hd-reg{animation:none;transition:none;background:linear-gradient(135deg,#0A4A41,#0C5A4F 45%,#127C6E)}
}

/* ══ ปุ่ม "ฝาก-ถอน" — **มือถือเท่านั้น** (สเปกที่เจ้าของส่ง) ═══════════════════
   🔴 เดสก์ท็อปห้ามเปลี่ยน — ซ่อนไว้เป็นค่าเริ่มต้น แล้วค่อยเปิดในเบรกพอยต์มือถือ
      (เขียนแบบ "ซ่อนก่อน เปิดทีหลัง" ปลอดภัยกว่า เพราะถ้าเบรกพอยต์พลาด
       ผลคือ "ไม่เห็นปุ่มบนมือถือ" ไม่ใช่ "ปุ่มโผล่บนเดสก์ท็อป" ที่เจ้าของไม่ต้องการ)
   🔴 ขนาดตัวอักษร: สเปกที่ส่งมา 13px แต่ทั้งเว็บเพิ่งขยาย +2px ตามคำสั่งก่อนหน้า
      ⇒ ใช้ 15px ให้เข้ากับแถบเดียวกัน */
/* keyframe/property "กรอบไฟทองวิ่ง" ของปุ่มฝาก-ถอน/สมัคร — แยกชื่อจาก --brc-a ใน login-card.css
   (สองไฟล์โหลดคู่กันบางหน้า ⇒ ชื่อซ้ำ = redefinition · แยกชื่อกันงงและกันคาบเกี่ยว) */
@property --tnc-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes tnc-spin{ to{ --tnc-a:360deg } }
.ms-topnav .tn-cashier,.ms-topnav .tn-login{display:none}
@media(max-width:900px){
  /* 🔴 2026-09-11 (เจ้าสั่ง "ทำตรงนี้ด้วย"): ยกทรีตเมนต์เดียวกับปุ่มสมัครหน้า login
     = double-bezel — ตัวปุ่ม = ช่องเข้มหมุน conic (เข้ม→มิ้น→เข้ม) ⇒ ไฟมิ้นวิ่งเด้งไม่จม
     🔴 2026-09-16 เจ้าสั่ง: เปลี่ยนโทนทอง→เขียว #0C5A4F เข้าชุดปุ่ม login (ตัวอักษรขาว)
       ::before inset = แกนเขียวเงา + ไฮไลต์บนสว่าง (glossy teal pill)
     🔴 paint-order: ::before ที่ absolute+ทึบ จะทับ "ตัวหนังสือล้วน" ⇒ ต้องมี isolation:isolate
        ที่ปุ่ม + z-index:-1 ที่ ::before → พีมุดใต้ตัวอักษร (บั๊ก "ปุ่มเปล่า" ที่เจอหน้า login) */
  .ms-topnav .tn-cashier{
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;
    justify-self:end;flex:0 0 auto;
    position:relative; overflow:hidden; isolation:isolate;
    border:0;border-radius:999px;padding:8px 20px;
    /* 🔴 เดิม --font-ui ไม่มีจริง → fallback ทิ้งทั้งบรรทัด → ปุ่มได้ 400/16px ปริยาย
       ⇒ ระบุ font-family:inherit ชัดเจน */
    font-family:inherit; font-weight:700; font-size:14px; line-height:1.4;
    color:#0C5A4F;  /* 🔴 2026-09-16 เจ้าสั่ง: ตัวอักษรเขียวเข้ม (ชุด .btn-reg-cta) — ริงวิ่งเทียลเข้มคงเดิม */
    background:conic-gradient(from var(--tnc-a),
      #062E29 0deg,#0C5A4F 46deg,#3FBFA8 82deg,#DCF1EC 100deg,#CDEFE6 116deg,
      #4FCBB4 140deg,#0C5A4F 196deg,#062E29 300deg,#062E29 360deg);
    animation:tnc-spin 2.8s linear infinite;
    box-shadow:0 4px 12px -6px rgba(6,46,41,.5), 0 10px 22px -14px rgba(4,30,26,.5);
    transition:transform .16s cubic-bezier(.32,.72,0,1),filter .16s;
  }
  .ms-topnav .tn-cashier::before{  /* 🔴 2026-09-16 เจ้าสั่ง: พื้นกลาง = มิ้นอ่อน (ชุด .btn-reg-cta) · ริงวิ่งขอบยังเทียลเข้ม */
    content:''; position:absolute; inset:2px; border-radius:999px; z-index:-1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 52%),
      linear-gradient(180deg,#EAF7F3 0%,#DCF1EC 40%,#CBE8E0 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.9),
      inset 0 -2px 0 rgba(12,90,79,.18),
      inset 0 0 14px rgba(63,191,168,.14);
  }
  .ms-topnav .tn-cashier:hover{filter:brightness(1.05) saturate(1.05)}
    .ms-topnav .tn-cashier:active{transform:translateY(1px) scale(.985)}
  .ms-topnav .tn-cashier:focus-visible{outline:2px solid #5FD6C0;outline-offset:2px}
  /* 🔴 2026-09-16 เจ้าสั่ง: ปุ่ม "Login" ใหม่ = ยกชุดปุ่ม .btn (เข้าสู่ระบบ) — พื้นเทียลเข้ม + ตัวขาว + ริงวิ่งมิ้นจาง */
  .ms-topnav .tn-login{
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;
    justify-self:end;flex:0 0 auto;
    position:relative; overflow:hidden; isolation:isolate;
    border:0;border-radius:999px;padding:8px 20px;
    font-family:inherit; font-weight:700; font-size:14px; line-height:1.4;
    color:#FFFFFF;
    background:conic-gradient(from var(--tnc-a),
      #E4F5F0 0deg,#CFEAE2 46deg,#B4DFD3 82deg,#8FCFC0 100deg,#A9D9CC 116deg,
      #CFEAE2 140deg,#E4F5F0 196deg,#EAF7F3 300deg,#E4F5F0 360deg);
    animation:tnc-spin 2.8s linear infinite;
    box-shadow:0 4px 12px -6px rgba(6,46,41,.5), 0 10px 22px -14px rgba(4,30,26,.5);
    transition:transform .16s cubic-bezier(.32,.72,0,1),filter .16s;
  }
  .ms-topnav .tn-login::before{
    content:''; position:absolute; inset:2px; border-radius:999px; z-index:-1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 52%),
      linear-gradient(180deg,#127C6E 0%,#0F6E60 16%,#0C5A4F 46%,#0A4A41 78%,#083C35 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1.5px 0 rgba(4,42,38,.45),
      inset 0 0 14px rgba(63,191,168,.22);
  }
  .ms-topnav .tn-login:hover{filter:brightness(.97) saturate(1.05)}
    .ms-topnav .tn-login:active{transform:translateY(1px) scale(.985)}
  .ms-topnav .tn-login:focus-visible{outline:2px solid #5FD6C0;outline-offset:2px}
  /* มือถือ: ปุ่มฝาก-ถอนทำหน้าที่แทน ⇒ ซ่อนปุ่มเข้าสู่ระบบ/ออกจากระบบบนแถบ
     (ออกจากระบบยังกดได้จากลิ้นชัก — ตรวจแล้วว่ามีจริง) */
  .ms-topnav .tn-r .out{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ms-topnav .tn-cashier{
    animation:none; transition:none;
    background:linear-gradient(135deg,#0A4A41,#0C5A4F 45%,#127C6E);   /* หยุดไฟวิ่ง → เขียวนิ่ง */
  }
  .ms-topnav .tn-login{
    animation:none; transition:none;
    background:linear-gradient(135deg,#CBE8E0,#DCF1EC 45%,#EAF7F3);   /* หยุดไฟวิ่ง → มิ้นนิ่ง */
  }
}
/* ── แถบหัวมือถือของผู้เยี่ยมชม: Login + สมัคร ต้องไม่ทับโลโก้ (เจ้าสั่งแก้ 2026-10-06) ──────────
   ของเดิม: ปุ่มคู่กว้าง 153px (75 + 74 + ช่องไฟ 4) แต่ช่องขวาของ grid 1fr|โลโก้|1fr มีแค่ 86–133px ที่จอ 320–430px
   และ .tn-r เป็น min-width:0 ⇒ ปุ่มล้นช่องไปทางซ้าย ทับโลโก้ 60 / 40 / 25 / 12px ที่จอ 320 / 360 / 390 / 430px (หายเองที่จอ ≥ ~455px)
   แก้: จอ ≤ 479px ให้สองปุ่ม "แบ่งช่องขวาคนละครึ่ง" (flex:1 1 0 · ไม่มี padding ซ้ายขวาตายตัว — ข้อความจัดกลางอยู่แล้ว)
        ⇒ กว้างพอดีช่องเสมอโดยไม่ต้องเดาตัวเลขต่อความกว้างจอ · โลโก้ยังอยู่กึ่งกลางจริง · ปุ่มสูงเท่าเดิม แถบไม่สูงขึ้น
        เพดาน 76px = ขนาดเดิมของปุ่ม ⇒ จอ 456–479px ได้ปุ่มเท่าเดิม · จอ ≥ 480px ไม่เข้ากฎนี้เลย
   .is-guest = shell.js ใส่ที่ .ms-topnav เมื่อยังไม่ล็อกอิน (ปุ่ม "ฝาก-ถอน" ของคนที่ล็อกอินแล้วเป็นปุ่มเดี่ยว ไม่เข้ากฎนี้) */
@media(max-width:479px){
  .ms-topnav.is-guest .tn-login,
  .ms-topnav.is-guest .tn-cashier{flex:1 1 0;min-width:0;max-width:76px;padding-left:0;padding-right:0}
}
@media(max-width:359px){
  /* ช่องขวาเหลือไม่ถึง 106px: ตัวหนังสือ 14px จะเหลือขอบข้างในปุ่มไม่ถึง 8px ⇒ ลดเป็น 13px */
  .ms-topnav.is-guest .tn-login,
  .ms-topnav.is-guest .tn-cashier{font-size:13px}
}
.ms-topnav a{
  position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:13px 14px;text-decoration:none;cursor:pointer;
  font-size:15.5px;font-weight:600;color:#B9B5AA;white-space:nowrap;
  transition:color .22s;
  isolation:isolate;            /* กันพิลล์ ::after (z-index:-1) มุดหลังพื้นแถบ */
}
.ms-topnav a svg.ic{width:17px;height:17px;color:var(--gg-core,#DCB863);transition:color .22s}
.ms-topnav a:hover{color:#F5F1E8}
.ms-topnav a:hover svg.ic{color:var(--gg-mid,#F0DCA0)}
/* หน้าปัจจุบัน = "พิลล์นูน" ตามภาพต้นแบบที่เจ้าของส่งมา (2026-08-27)
   ภาษาของต้นแบบ = แคปซูลมนสุด สีอ่อนกว่าพื้นนิดเดียว + ขอบบนสว่าง + เงานุ่มใต้ปุ่ม
   = ดู "ยกขึ้นมาจากแถบ" ไม่ใช่ "ทาสีทับ"
   🔴 พิลล์ต้องเป็น ::after ที่ absolute ไม่ใช่ background/padding ของตัว <a>
      ไม่งั้นปุ่มที่ active จะเปลี่ยนขนาด → เมนูทั้งแถวขยับทุกครั้งที่เปลี่ยนหน้า
   🔴 z-index:-1 ต้องคู่กับ isolation:isolate ที่ตัว <a> ไม่งั้นพิลล์มุดลงไป
      "หลังพื้นของ .ms-topnav" (ตัว <a> เป็น position:relative เฉย ๆ
      ไม่สร้าง stacking context ⇒ -1 ทะลุออกไปนอกปุ่ม) */
/* 🔴 2026-09-10 เจ้าสั่งให้แถบเมนู (เดสก์ท็อป) เป็นแบบ MUI Tabs:
   จาก "พิลล์นูน/ร่องกด" เดิม → แท็บข้อความแบน + ตัวที่เลือกเป็นสีทอง (primary)
   + "แถบขีดล่าง" (underline indicator) ชิดขอบล่างเหมือน MUI Tabs
   หมายเหตุ: `.on` เกิดเฉพาะลิงก์ใน .tn-l (เดสก์ท็อป) — .tn-r มีแต่ปุ่ม/โลโก้ ไม่มีลิงก์ active
   จึงเปลี่ยนที่ `.ms-topnav a.on` ตรงๆ ได้อย่างปลอดภัย (ไม่กระทบปุ่มฝาก-ถอน/โลโก้มือถือ) */
.ms-topnav a.on{color:#FCE7A8;font-weight:700}
.ms-topnav a.on::after{
  content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#D9AE45,#F7D774 50%,#D9AE45);   /* แถบทอง = indicator */
  box-shadow:0 0 10px -1px rgb(233 194 92/55%);
}
/* ชี้เมาส์แท็บที่ยังไม่เลือก: ขีดล่างจางๆ โผล่มาใบ้ว่ากดได้ (สไตล์ MUI hover)
   🔴 ต้องกัน .ms-brand2 ออก — โลโก้ก็เป็น <a> ใน .ms-topnav เหมือนกัน */
.ms-topnav a:not(.on):not(.ms-brand2):hover::after{
  content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:rgb(247 215 116/28%);
}
/* เดิม .tn-more ถูกดันไปขวาสุด — ตอนนี้ปุ่มเข้าสู่ระบบทำหน้าที่นั้นแทน */
:root[data-theme="light"] .ms-topnav a{color:#5C574C}
:root[data-theme="light"] .ms-topnav a.on{color:#8A6A16}   /* MUI selected = ทองเข้ม อ่านชัดบนพื้นสว่าง */

/* ══ 2026-09-11 — แถบเมนูเป็น "segmented pill" (รูปที่ 3 ที่เจ้าของส่ง · ใช้สีเดิม) ═══════════
   ⚠️ ทับสไตล์ MUI-underline (2026-09-10): เจ้าของขอ "รางพิลล์มืดก้อนเดียวห่อแท็บทั้งแถว
      + ตัวที่เปิดอยู่ = เซกเมนต์ยกนูน" แบบ segmented control (iOS/artlist)
   สีเดิมล้วน: ราง = สแลบเข้ม + ขอบ hairline · เซกเมนต์ active = สแลบ "อ่อนกว่าราง" (ยกนูน) + ตัวอักษรทอง
   🔴 half=pick.length ใน shell.js ⇒ ลิงก์ทั้งหมดอยู่ใน .tn-l ⇒ ห่อ .tn-l เป็นราง = ได้พิลล์ก้อนเดียว
   🔴 .on เกิดเฉพาะลิงก์ใน .tn-l ⇒ scope กฎที่ ".tn-l" ปลอดภัย ไม่กระทบโลโก้ (.tn-brand) / ปุ่มฝาก-ถอน (.tn-r)
   🔴 วางท้ายบล็อก nav + specificity สูงกว่า (เพิ่ม .tn-l) = ชนะกฎ underline / .on เดิมด้วยทั้งน้ำหนักและลำดับ */
.ms-topnav .tn-l{
  gap:3px; padding:5px; border-radius:999px; flex:0 1 auto;
  background:linear-gradient(180deg,#0E1013 0%,#141619 100%);   /* รางพิลล์ = "บ่อมืด" ลึกกว่าพื้นแถบ */
  border:1px solid rgba(232,220,190,.09);                       /* hairline เดิม (--hair) */
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.035);  /* ร่องลึก = "ราง" */
}
.ms-topnav .tn-l a{ padding:10px 17px; border-radius:999px; transition:color .22s, background .2s; }
.ms-topnav .tn-l a::after,
.ms-topnav .tn-l a:hover::after{ display:none; }         /* ปิด underline indicator เดิม (2026-09-10) */
.ms-topnav .tn-l a:not(.on):hover{ background:rgba(255,247,214,.06); color:#F5F1E8; }
.ms-topnav .tn-l a.on{
  color:#FCE7A8; font-weight:700;
  background:linear-gradient(180deg,#33383E 0%,#24282D 55%,#20242A 100%);   /* ชิปสว่างกว่าราง = ยกนูนชัด */
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.22),                 /* ขอบบนรับแสง (specular) */
    inset 0 -1px 0 rgba(0,0,0,.4),                       /* ขอบล่างจม */
    inset 0 0 0 1px rgba(232,220,190,.10),               /* ขอบ hairline รอบชิป */
    0 4px 10px -3px rgba(0,0,0,.7);                       /* เงายกใต้ชิป (ลอยเหนือราง) */
}
.ms-topnav .tn-l a.on svg.ic{ color:var(--gg-mid,#F0DCA0); }
/* ธีมสว่าง: รางโทนแดงจาง + เซกเมนต์ active ขาวยกนูน + ตัวอักษรทองเข้ม */
:root[data-theme="light"] .ms-topnav .tn-l{
  background:rgba(150,20,26,.05); border-color:rgba(150,20,26,.14);
  box-shadow:inset 0 1px 2px rgba(120,20,20,.10);
}
:root[data-theme="light"] .ms-topnav .tn-l a.on{
  color:#8A6A16;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF3DF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(150,20,26,.12), 0 2px 6px -2px rgba(120,20,20,.22);
}
:root[data-theme="light"] .ms-topnav .tn-l a:not(.on):hover{ background:rgba(150,20,26,.05); color:#3A2A0C; }
:root[data-theme="light"] .ms-topnav a.on::after{
  background:linear-gradient(90deg,#C39428,#E0B84A 50%,#C39428);box-shadow:none}

/* ── ปุ่ม 3 ขีด: มือถือเท่านั้น ชิดซ้ายสุด ───────────────────────────────── */
.ms-burger{display:none;flex:0 0 auto;width:40px;height:40px;padding:0;border:0;border-radius:12px;
  cursor:pointer;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.28);
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ms-burger span{display:block;width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F))}
.ms-burger:active{transform:scale(.94)}

/* ── กล่องซ้ายของแถบหัวมือถือ: ปุ่ม 3 ขีด + ปุ่ม "หน้าหลัก" (เจ้าสั่ง 2026-10-05) ─────────
   shell.js สร้าง .tn-left ไว้ใน .ms-topnav แล้ว moveBurgerToTopbar() ย้ายทั้งกล่องขึ้น .m-topbar (ถ้ามี)
   ⇒ กฎชุดนี้ไม่ผูกกับแถบไหน ใช้ได้ทั้งสองที่ (หน้าที่ไม่โหลด m.js + โหมดผู้เยี่ยมชม กล่องจะค้างอยู่ใน .ms-topnav)
   🔴 เดสก์ท็อป: ซ่อน "ทั้งกล่อง" ด้วย display:none — ถ้าซ่อนแค่ลูก กล่องเปล่ายังเป็น flex item ของ .ms-topnav
      แล้วกิน gap 10px ⇒ แถบเมนูเบี้ยวจากกึ่งกลาง 5px · "หน้าหลัก" บนเดสก์ท็อป = ลิงก์ตัวแรกใน .tn-l
   🔴 selector (0,2,0) จงใจ ให้ชนะกฎรวม `.ms-topnav a{padding/font/gap…}` (0,1,1) ตอนปุ่มยังอยู่ในแถบเมนู
   ปุ่ม = ไอคอนบ้านอยู่บน คำว่า "หน้าหลัก" อยู่ล่าง (กว้าง 47px): แถบหัวมือถือเป็น grid 1fr|โลโก้|1fr
      ช่องซ้ายที่จอ 320px เหลือ 88px — ปุ่ม 3 ขีด 34 + ช่องไฟ 6 + ปุ่มนี้ 47 = 87 ⇒ โลโก้ยังกึ่งกลางจริง
      (แบบไอคอน+คำเรียงแนวนอนกว้าง ~99px จะดันโลโก้เบี้ยวตั้งแต่จอ 430px ลงมา ⇒ ใช้แบบนั้นเฉพาะจอ ≥521px) */
.tn-left{display:none}
.tn-left .tn-home{
  flex:0 0 auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  --hb-pad:0 5px;                 /* สกินที่ยิงกฎรวมใส่ลิงก์ในแถบเมนูต้องอ้างตัวแปรนี้ตอนล้าง padding (ดู jingjai-front.css §7) */
  min-width:46px;height:40px;margin:0;padding:var(--hb-pad);border-radius:12px;
  font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:0;white-space:nowrap;text-decoration:none;
  color:#EAF7F3;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-tap-highlight-color:transparent;
}
.tn-left .tn-home svg{display:block;flex:0 0 auto;width:17px;height:17px}
.tn-left .tn-home::after{display:none !important}      /* ขีดล่างของลิงก์แถบเมนู (.ms-topnav a::after) — ปุ่มนี้ไม่ใช่แท็บ */
.tn-left .tn-home:active{transform:scale(.95)}
.tn-left .tn-home:focus-visible{outline:2px solid #EAF7F3;outline-offset:2px}

/* 🔴 จอ 1300 ลงมา: ที่ไม่พอสำหรับ 7 เมนู + โลโก้ + ปุ่มเข้าสู่ระบบ (วัดแล้ว)
   ⇒ บีบช่องไฟปุ่ม แล้วให้ "เพิ่มเติม" เหลือแต่ไอคอน (ความหมายไม่หาย — มี aria-label)
   เลือกตัดที่ "เพิ่มเติม" เพราะเป็นทางลัดไปเมนูรวม ไม่ใช่ปลายทางจริง */
@media(max-width:1300px){
  .ms-topnav a{padding:13px 9px}
  .ms-topnav .tn-in{gap:10px}
  .ms-topnav .tn-more span{display:none}
  .ms-topnav .tn-more{padding:13px 10px}
}
@media(max-width:1120px){
  /* แคบลงอีก: ปุ่มเข้าสู่ระบบเหลือไอคอน — ปุ่มยังกดได้และมี aria-label บอกว่าอะไร */
  .ms-topnav .tn-r .out span{display:none}
  .ms-topnav .tn-r .out{padding:9px 12px}
}

@media(max-width:900px){
  /* 🔴 2026-08-26 — เดิมซ่อน .tn-in ทั้งก้อนบนมือถือ ⇒ โลโก้กับปุ่มเข้าสู่ระบบ
     ที่เพิ่งย้ายมาไว้ในนั้น **หายไปด้วย** เหลือแถบว่างๆ กับปุ่ม 3 ขีด
     ⇒ ซ่อนเฉพาะ "ลิงก์เมนู" (ของพวกนี้อยู่ในลิ้นชัก+แท็บล่างแล้ว)
        แต่คง **โลโก้ + ปุ่มเข้าสู่ระบบ** ไว้ตามที่เจ้าของสั่ง

     🔴 display:contents ที่ .tn-in = ยุบตัวมันเองทิ้ง ให้ลูก (.tn-l/.ms-brand2/.tn-r)
        ขึ้นไปเป็นลูกของ grid แถบโดยตรง — จำเป็น เพราะปุ่ม 3 ขีดอยู่ "นอก" .tn-in
        ถ้าไม่ยุบ โลโก้จะกึ่งกลางแค่ใน .tn-in ⇒ เบี้ยวไปทางขวาครึ่งหนึ่งของปุ่ม 3 ขีด */
  .ms-topnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:8px 12px;gap:8px}
  .ms-topnav .tn-in{display:contents}
  .ms-topnav .tn-l{display:none}                       /* ปีกซ้าย = เมนูล้วน → ลิ้นชัก */
  .ms-topnav .tn-r{display:flex;justify-content:flex-end;min-width:0;overflow:visible;flex:0 0 auto}
  .ms-topnav .tn-r a:not(.out){display:none}           /* เหลือแต่ปุ่มเข้าสู่ระบบ */
  .ms-topnav .ms-brand2{display:block;justify-self:center;font-size:21px}
  .ms-topnav .tn-r .out span{display:inline}           /* มือถือมีที่พอ → โชว์ข้อความ */
  .ms-topnav .tn-r .out{padding:9px 15px;margin-left:0}
  .ms-burger{display:flex;justify-self:start}
  /* กล่องซ้าย (ปุ่ม 3 ขีด + หน้าหลัก) = ลูกตัวเดียวในช่องซ้ายของ grid ทั้งใน .ms-topnav และ .m-topbar
     🔴 ห้ามใส่ min-width:0 — ช่อง grid จะย่อได้ต่ำกว่าเนื้อจริงแล้วปุ่มล้นไปทับโลโก้ (บทเรียนเดียวกับ .m-right)
        ปล่อย auto = ช่องกว้างเท่าเนื้อเสมอ ⇒ ทับไม่ได้เชิงโครงสร้าง (จอแคบเกินจริง ๆ โลโก้เยื้องแทน) */
  .tn-left{display:flex;align-items:center;gap:8px;grid-column:1;justify-self:start}
}
/* จอกลาง (แท็บเล็ต/หน้าต่างแคบ 521–900px): ช่องซ้ายกว้างพอ ⇒ ไอคอน+คำเรียงแนวนอน สูงเท่าปุ่ม 3 ขีด (40px) */
@media(min-width:521px) and (max-width:900px){
  .tn-left .tn-home{--hb-pad:0 14px 0 12px;flex-direction:row;gap:6px;min-width:0;font-size:14px}
}
@media(max-width:520px){
  .tn-left{gap:6px}
  /* แถบบนมือถือ (.m-topbar) ย่อปุ่ม 3 ขีดเหลือ 34px ที่จอนี้ ⇒ ปุ่มหน้าหลักเตี้ยลงตาม ให้สองปุ่มดูเป็นชุดเดียวกัน */
  .m-topbar .tn-left .tn-home{height:36px}
  .m-topbar .tn-left .tn-home svg{width:16px;height:16px}
}
@media(max-width:339px){
  /* จอ 320px + แถบเมนูยังเป็นแถบหัว (หน้าที่ไม่มี .m-topbar: โปรโมชั่น/แนะนำเพื่อน · โหมดผู้เยี่ยมชม):
     ช่องข้างของ grid เหลือ 85px — ไม่พอทั้งฝั่งซ้าย (ปุ่ม 3 ขีด 40 + 6 + หน้าหลัก 47 = 93) และฝั่งขวาของแขก (ปุ่มคู่ Login + สมัคร)
     ⇒ บีบแถบให้เท่าแถบบนมือถือ (ขอบ 8 · ช่องไฟ 6 · ปุ่ม 3 ขีด 34) ได้ช่องละ 91px โลโก้ยังกึ่งกลาง
     .has-home / .is-guest = shell.js ใส่ตามสถานะ · แถบที่ไม่มีทั้งสองอย่างไม่ถูกแตะ */
  .ms-topnav.has-home,.ms-topnav.is-guest{padding-left:8px;padding-right:8px;gap:6px}
  .ms-topnav.has-home .ms-burger,.ms-topnav.is-guest .ms-burger{width:34px;height:34px}
  .ms-topnav.has-home .tn-home{height:36px}
  .ms-topnav.has-home .tn-home svg{width:16px;height:16px}
}
@media(max-width:400px){
  /* จอเล็กมาก: ปุ่มเหลือไอคอน (มี aria-label บอกว่าเข้าสู่ระบบ/ออกจากระบบ) */
  .ms-topnav .tn-r .out span{display:none}
  .ms-topnav .tn-r .out{padding:9px 11px}
  .ms-topnav .ms-brand2{font-size:19px}
}

/* ── ลิ้นชักเมนูชิดซ้าย (แทนแผ่นเด้งจากล่าง) ─────────────────────────────── */
.m-drawer .pane{
  position:absolute;inset:0 auto 0 0;width:min(86vw,340px);max-height:none;
  border-radius:0 18px 18px 0;padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  animation:dw-in .34s cubic-bezier(.32,.72,0,1);
}
@keyframes dw-in{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.m-drawer .pane{animation:none}}
/* จอใหญ่: ลิ้นชักเปิดจากซ้ายเหมือนกัน (เข้าถึงเมนูเต็มได้จากปุ่ม "เพิ่มเติม") */
@media(min-width:901px){ .m-drawer .pane{width:380px} }

/* 🔴 ลบกฎ `.ms-head .ms-brand2` ทั้งชุดทิ้ง — โลโก้ย้ายไปอยู่ "กลางแถบเมนู" แล้ว
   (2026-08-26) ไม่มี node นี้ในหัวเว็บอีกต่อไป ⇒ กฎเดิมคือโค้ดตาย
   ตัวจริงอยู่ที่ `.ms-topnav .ms-brand2` ในบล็อกแถบเมนูด้านบน */

/* ══ หัวเว็บ: ชื่อซ้าย · โลโก้กึ่งกลาง · เครดิต+ปุ่มขวา (2026-08-24 รอบ 5) ═════
   🔴 โลโก้กึ่งกลางด้วย absolute ไม่ใช่ flex — สองข้างกว้างไม่เท่ากันและยาวไม่คงที่
      (ชื่อผู้ใช้ยาวไม่เท่ากัน · ยอดเงินเปลี่ยนทุก 5 วิ) ใช้ flex ถ่วง = โลโก้ขยับไปมา
   🔴 `.hd-in` คุม max-width เท่ากับเนื้อหา ⇒ เครดิต/ปุ่มไม่ไปติดขอบจอ "ขยับเข้ามา" ตามที่สั่ง */
.ms-head{padding:0}
/* 🔴 แก้ 2026-08-26 — เดิมโลโก้ลอย absolute ทับอยู่บน "รอยต่อ" ของสองกล่อง
   วัดได้ว่า .who (ซ้าย) และ .rt (ขวา) ต่างก็ flex:1 1 0 ⇒ กล่องทั้งสอง
   ไปชนกันตรงกลางพอดี แล้วล้ำเข้ามาทับกล่องโลโก้ **ข้างละ 52.5px**
   ⇒ โลโก้ถูกบีบอยู่ในรอยต่อ (เจ้าของทักว่า "เหมือนมีอะไรบัง logo")
   ⇒ เปลี่ยนเป็น grid 3 ช่องจริง: โลโก้มีช่องของตัวเอง ไม่มีใครทับได้อีกโดยโครงสร้าง
     (ช่องข้าง 1fr เท่ากัน ⇒ โลโก้อยู่กึ่งกลางเองโดยไม่ต้องใช้ absolute) */
/* 🔴 โลโก้กลับขึ้นมาอยู่หัวเว็บ (2026-08-26) — ใช้ grid 3 ช่องเหมือนที่เคยพิสูจน์แล้วว่า
   โลโก้อยู่กึ่งกลาง "โดยโครงสร้าง" ไม่มีใครทับได้ (flex:1 สองข้างเคยทับข้างละ 52.5px) */
.ms-head .hd-in{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:18px;
  width:100%;max-width:1280px;margin-inline:auto;padding:12px 22px;
}
.ms-head .ms-brand2{
  display:block;gap:0;justify-self:center;text-decoration:none;white-space:nowrap;
  font-size:25px;font-weight:800;letter-spacing:.4px;line-height:1;
  background:linear-gradient(95deg,#f5db8b 0%,#d8b661 45%,#b9c0cc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ms-head .ms-brand2 .lv{-webkit-text-fill-color:initial;font-size:.62em;margin-right:6px;vertical-align:middle}
/* 🔴 ยอดเงินถูกเอาออกจากหัวแล้ว แต่ node #ms-bal ต้องอยู่ต่อ —
   m.js และแถบยอดเงินเหนือแท็บล่างผูก MutationObserver ไว้กับมัน ลบทิ้ง = ยอดค้างทั้งระบบ */
.ms-head .hd-in .cred.hd-bal-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none;
}
@media(min-width:1700px){ .ms-head .hd-in{max-width:1400px} }
.ms-head .hd-in .who{min-width:0}
.ms-head .hd-in .rt{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px}
/* ไม่มีวงกลมอักษรย่อแล้ว ⇒ ชื่อผู้ใช้เริ่มชิดซ้ายได้เลย */
.ms-head .who{gap:0}
@media(max-width:900px){
  .ms-head .hd-in{padding:9px 14px}
}
@media(max-width:900px){ .ms-head .hd-in{gap:12px} }

/* ── เมนูบนกึ่งกลาง ─────────────────────────────────────────────────────── */
/* (เดิม .tn-in{justify-content:center} — ใช้ grid 3 ช่องแทนแล้ว) */
/* "เพิ่มเติม" เดิมดัน margin-left:auto ไปชิดขวา — พอเมนูอยู่กึ่งกลางต้องอยู่ในแถวเดียวกัน */
.ms-topnav .tn-more{margin-left:0}

/* ══ ไอคอนในลิ้นชัก "เพิ่มเติม" — ใหญ่ขึ้นให้อ่านออก ═══════════════════════
   🔴 เจ้าของ: "ไอคอนที่เพิ่มเติมมันเล็ก ไม่ชัด มองยาก"
      ต้นเหตุ: กล่อง 40px แต่ตัว svg แค่ 19px = ตัวรูปกินพื้นที่ไม่ถึงครึ่งกล่อง
      เส้นในรูป (เช่น แท่งกราฟ 4 แท่ง) เลยชิดกันจนกลืนเป็นก้อนตัน
      แก้ 2 ทาง: ขยายทั้งกล่องและตัวรูป + ลดช่องต่อแถวจาก 3 เหลือ 3 แต่การ์ดสูงขึ้น */
.m-drawer .mm-i{padding:14px 8px 12px;gap:9px}
.m-drawer .mm-i .b{width:54px;height:54px;border-radius:17px}
.m-drawer .mm-i .b svg.ic{width:28px;height:28px}
.m-drawer .mm-i > span:last-child{font-size:14px;font-weight:700;line-height:1.35}
.m-drawer .mm-grid{gap:10px}
.m-drawer .mm-g{padding:18px 2px 9px;font-size:12.5px}

/* ══ หน้าโปรโมชั่น / แนะนำเพื่อน (0078) ══════════════════════════════════════
   🔴 ยอด "ล็อกรอหมุนครบ" ต้องเด่นพอๆ กับ "ถอนได้" — ผู้เล่นต้องรู้ก่อนกดรับ
      ว่าเงินที่จะได้ยังถอนไม่ได้ · ถ้าไปรู้ตอนกดถอนแล้วโดนปฏิเสธ = ร้องเรียน */
.pm-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.pm-cell{padding:14px 16px;border-radius:16px;background:var(--card-1,rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.22);display:flex;flex-direction:column;gap:4px}
.pm-cell small{font-size:13.5px;opacity:.75}
.pm-cell b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gg-core,#DCB863)}
.pm-cell.lock b{color:#F2A65A}

.pm-wr-h,.rf-h{margin:20px 0 10px;font-size:15px;font-weight:800;opacity:.85}
.pm-wr{padding:13px 15px;border-radius:14px;margin-bottom:10px;
  background:var(--card-1,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(220,184,99,.16)}
.pm-wr .r{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:15px;font-weight:700}
.pm-wr .r.sm{font-size:13px;font-weight:600;opacity:.75;margin-top:6px}
.pm-wr .bar{height:8px;border-radius:99px;margin-top:9px;overflow:hidden;background:rgba(0,0,0,.28)}
.pm-wr .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F))}

.pm-card{padding:16px 17px;border-radius:18px;margin-bottom:12px;
  background:var(--card-1,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(220,184,99,.2)}
.pm-t{font-size:18px;font-weight:800;margin-bottom:4px}
.pm-d{font-size:14.5px;opacity:.8;line-height:1.55;margin-bottom:10px}
.pm-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.pm-meta .tag{font-size:13px;font-weight:700;padding:5px 11px;border-radius:99px;
  background:rgba(220,184,99,.12);box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.pm-meta .tag.wr{background:rgba(242,166,90,.13);box-shadow:inset 0 0 0 1px rgba(242,166,90,.34);color:#F2A65A}
.pm-go{width:100%}
.pm-go[disabled]{opacity:.55;cursor:not-allowed}
.pm-empty{padding:26px 18px;text-align:center;border-radius:16px;font-size:15px;opacity:.72;
  background:var(--card-1,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(232,220,190,.1)}

.rf-code{padding:16px 17px;border-radius:18px;margin:16px 0;
  background:linear-gradient(135deg,rgba(220,184,99,.14),rgba(220,184,99,.04));
  box-shadow:inset 0 0 0 1px rgba(220,184,99,.3)}
.rf-code small{font-size:13.5px;opacity:.78}
.rf-row{display:flex;gap:10px;align-items:center;margin-top:7px}
.rf-code b{font-size:27px;font-weight:800;letter-spacing:.16em;color:var(--gg-core,#DCB863);
  font-variant-numeric:tabular-nums;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rf-link{margin-top:9px;font-size:13px;opacity:.7;word-break:break-all}
.rf-pol{padding:14px 16px;border-radius:16px;font-size:14.5px;line-height:1.6;
  background:var(--card-1,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(220,184,99,.2)}
.rf-pol .mbtn{margin-top:11px;width:100%}
.rf-bind,.rf-up{padding:13px 15px;border-radius:14px;margin-top:12px;font-size:14.5px;
  background:var(--card-1,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(232,220,190,.12)}
.rf-bind input{flex:1;min-width:0;padding:11px 13px;border-radius:12px;border:0;font:inherit;
  text-transform:uppercase;letter-spacing:.1em;background:rgba(0,0,0,.2);color:inherit;
  box-shadow:inset 0 0 0 1px rgba(232,220,190,.18)}
.rf-list{display:flex;flex-direction:column;gap:8px}
.rf-item{display:flex;justify-content:space-between;gap:12px;padding:12px 15px;border-radius:13px;
  font-size:14.5px;background:var(--card-1,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(232,220,190,.1)}
.rf-item span{opacity:.7;font-size:13px}
@media(max-width:520px){ .pm-sum{grid-template-columns:1fr} }

/* ══ แบนเนอร์เลื่อนแบบ coverflow (2026-08-27) ═══════════════════════════════
   พอร์ตมาจาก TK100 `HeroCarousel` (tk100-frontend/components/HeroCarousel.tsx)
   — ที่นั่นเป็น React + styled-jsx · ที่นี่ไม่มี React ⇒ เขียนเป็น vanilla ใน shell
   คงค่าตัวเลขเดิมทั้งหมด: scale 1/.85/.7/.55 · offset 0/.2/.36/.5 ของความกว้างการ์ด
   เปลี่ยนแค่ตัวแปรสีให้เป็นสีของแบรนด์นี้ (ทอง-แดง) แทนโทน TK100

   🔴 เนื้อหาสไลด์มาจาก "โปรโมชั่นจริงใน DB" (/api/v2/bonus/promotions)
      ไม่ใช่ข้อความตัวอย่างที่แต่งขึ้น — แบรนด์ที่ยังไม่ตั้งโปรฯ จะเห็นภาพปกใบเดียว
      (เหมือนก่อนหน้านี้) ไม่ใช่การ์ดโปรฯ ปลอมที่ผู้เล่นกดแล้วไม่มีอะไรเกิดขึ้น */
.tkhc{
  --tkhc-gold:var(--gg-core,#DCB863);
  --tkhc-gold-light:var(--gg-lite,#FFF6DC);
  --tkhc-metal:linear-gradient(180deg,#FFF0BE 0%,#F7D774 16%,#E9C25C 46%,#CFA038 78%,#B8871F 100%);
  --tkhc-spark:var(--gg-mid,#F0DCA0);
  --tkhc-glow-spark:0 0 18px rgba(240,220,160,.40);
  --tkhc-glow-gold:0 0 10px rgba(220,184,99,.18);
  --tkhc-muted:rgba(242,201,190,.85);
  --tkhc-edge:rgba(232,205,140,.28);
}
/* full-bleed to the shell edge (cancels the shell's px-4) so the stepped-back
   neighbours have room to peek, and dissolve at the edges instead of being sliced. */
.tkhc{position:relative;width:auto;margin-inline:calc(var(--tkhc-bleed, 22px) * -1);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  /* 🔴 ม่านจางที่ขอบ — เดิม 6%/94% กว้างเกินไป จนกินมุมมนของการ์ดข้างหายไปด้วย
     พอการ์ดข้างอยู่ในกรอบครบแล้ว (ดู .tkhc-stage ข้างล่าง) เหลือไว้แค่บางๆ กันขอบแข็ง */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);}
.tkhc-stage{position:relative;width:100%;
  /* Reserve the height in CSS so the server HTML is already the right size. The JS
     measurement below resolves to the same number (CARD_W_RATIO x CARD_RATIO_H), so
     hydration is a no-op instead of a layout jump. */
  aspect-ratio:1 / 0.387;
  /* 🔴 TK100 ใช้ค่านี้ในเปลือกมือถือแคบๆ (กว้าง ~360px ⇒ สูง ~139px)
     ที่นี่ล็อบบี้เดสก์ท็อปกว้าง 1580px ⇒ อัตราส่วนเดิมให้ความสูง 611px = ครึ่งจอ
     ⇒ ใส่เพดานความสูงไว้ ให้ aspect-ratio ทำงานเฉพาะตอนจอแคบ */
  max-height:250px;}
@media(max-width:520px){ .tkhc-stage{max-height:none} }
.tkhc-slide{position:absolute;top:0;display:flex;
  /* Size the card in CSS as a % of the stage — identical to what the JS measurement
     resolves to (CARD_W_RATIO 86%, so left = (100-86)/2 = 7%). Without this the slides
     were 0x0 in the server HTML and only got dimensions at hydration, which is a real
     layout shift; the remaining offset/scale is transform-only, which CLS ignores. */
  width:86%;left:7%;height:100%;transition:transform 450ms cubic-bezier(.22,.61,.36,1),opacity 450ms,z-index 450ms;will-change:transform;}
.tkhc-slide.is-side{cursor:pointer;}
.tkhc-card{position:relative;display:flex;align-items:center;width:100%;height:100%;
  /* 🔴 15px บนการ์ด 1022x250 = ตาเห็นเป็น "เกือบเหลี่ยม" (รัศมี 1.5% ของด้านยาว)
     24px ให้เท่ากับกรอบ .lb-hero (23px) ⇒ อ่านเป็นการ์ดมนจริง ๆ ทั้งใบปกและใบโปรฯ */
  padding:10px 12px;border-radius:24px;overflow:hidden;text-align:left;
  background:linear-gradient(135deg, rgb(42 32 18/92%), rgb(11 12 13/95%));
  border:1px solid var(--tkhc-edge);
  box-shadow:inset 0 1px 0 rgb(255 240 205/9%),0 2px 5px rgb(0 0 0/45%),0 18px 38px -14px rgb(0 0 0/70%);}
.tkhc-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 88% 22%, rgb(246 181 44/22%), transparent 56%);}
/* scrim so the copy stays legible over the art bleeding in from the right */
.tkhc-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgb(9 7 5/95%) 0%, rgb(9 7 5/90%) 50%, rgb(9 7 5/55%) 74%, rgb(9 7 5/8%) 92%, transparent 100%);}
/* side cards read as "behind" — a veil instead of hiding the copy */
.tkhc-veil{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:18px;
  background:linear-gradient(180deg, rgb(6 5 6/52%), rgb(6 5 6/68%));opacity:0;transition:opacity 450ms;}
.tkhc-slide.is-side .tkhc-veil{opacity:1;}
.tkhc-copy{position:relative;z-index:3;flex:1;min-width:0;max-width:70%;display:flex;flex-direction:column;align-items:flex-start;}
.tkhc-tag{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tkhc-spark);transform:skewX(-9deg);text-shadow:var(--tkhc-glow-spark);}
.tkhc-tag::before{content:"";width:13px;height:2px;border-radius:1px;background:var(--tkhc-spark);box-shadow:var(--tkhc-glow-spark);}
.tkhc-title{margin:4px 0 2px;font-size:clamp(13.5px,3.9vw,17px);font-weight:700;line-height:1.22;color:#fff;letter-spacing:-.01em;}
.tkhc-title b{display:block;font-weight:700;}
.tkhc-title .g{background:linear-gradient(180deg,var(--tkhc-gold-light),var(--tkhc-gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.tkhc-sub{font-size:10.5px;font-weight:600;line-height:1.32;color:var(--tkhc-muted);margin-bottom:6px;}
.tkhc-cta{border-radius:10px;padding:6px 13px;min-height:30px;font-weight:700;font-size:12px;line-height:1;white-space:nowrap;
  background:var(--tkhc-metal);color:#2a1600;border:1px solid rgb(255 246 222/40%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/60%),inset 0 -3px 7px rgb(120 66 0/34%),var(--tkhc-glow-gold);}
/* art bleeds off the right edge behind the scrim — full-height, aspect preserved */
.tkhc-art{position:absolute;z-index:0;right:-4px;top:50%;transform:translateY(-50%);
  height:98%;width:auto;max-width:52%;object-fit:contain;object-position:right center;
  filter:drop-shadow(0 10px 22px rgb(0 0 0/55%));}
/* ── cover card: the artwork IS the card ── no scrim, no gold wash, no copy.
   BO art is uploaded at 16:10 (see the aspect note in the component). object-fit
   cover means an off-ratio upload centre-crops instead of letterboxing. */
.tkhc-card.is-cover{padding:0;}
.tkhc-card.is-cover::before,.tkhc-card.is-cover::after{display:none;}
.tkhc-card.is-cover .tkhc-art{position:absolute;inset:0;right:auto;top:auto;transform:none;
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:none;}
/* full-card hit target — carries the accessible name, paints nothing */
.tkhc-cover-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  background:none;border:none;padding:0;cursor:pointer;}
/* controls */
.tkhc-nav{position:absolute;top:50%;z-index:20;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  display:none;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--tkhc-gold-light);
  background:rgb(6 5 6/62%);border:1px solid var(--tkhc-edge);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.tkhc-nav.prev{left:2px;}
.tkhc-nav.next{right:2px;}
@media (hover:hover) and (pointer:fine){.tkhc-nav{display:flex;}}
.tkhc-dots{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:8px;}
.tkhc-dots button{width:6px;height:6px;border-radius:999px;border:none;padding:0;background:rgb(201 154 63/35%);transition:width .2s;}
.tkhc-dots button.active{width:17px;background:linear-gradient(90deg,var(--tkhc-gold-light),var(--tkhc-gold));box-shadow:var(--tkhc-glow-gold);}
@media (max-width:360px){
  .tkhc-card{padding:12px 13px;}
  .tkhc-copy{max-width:74%;}
}
@media (prefers-reduced-motion: reduce){
  .tkhc-slide,.tkhc-veil{transition:none;}
}

/* ธีมสว่าง: การ์ดพื้นเข้มบนหน้าขาว ⇒ ยังอ่านได้ แต่ลดเงาลงไม่ให้ดูหนักเกิน */
:root[data-theme="light"] .tkhc-card{
  box-shadow:inset 0 1px 0 rgba(255,240,205,.09),0 2px 5px rgba(0,0,0,.18),0 14px 30px -14px rgba(120,95,40,.4);
}
@media(max-width:900px){ .tkhc{--tkhc-bleed:14px} }

/* กล่อง hero ที่ถูก carousel ยึดไปแล้ว — ถอดกรอบ/ภาพพื้นของเดิมออก
   🔴 การ์ดในคาโรเซลมีพื้น+ขอบ+เงาของตัวเองอยู่แล้ว ถ้าไม่ถอด จะได้ "กรอบซ้อนกรอบ"
      และภาพปกเดิมโผล่ตามขอบ (เห็นเป็นแถบแดง/ครีมข้างการ์ด) */
.lb-hero.is-carousel{ padding:0; background:none; box-shadow:none; overflow:visible }
.lb-hero.is-carousel .lb-hero-in{
  background:none !important; box-shadow:none; min-height:0; padding:0; border-radius:0; overflow:visible;
}
.lb-hero.is-carousel .lb-hero-in::before{content:none}
.lb-glow{display:none}   /* แสงเรืองรอบ hero — ออกแบบไว้ตอนเป็นแผ่นทึบ ตอนนี้ไม่มีแผ่นแล้ว */


/* ══ ① ล็อกไม่ให้เนื้อหาเลื่อนซ้าย-ขวา (เจ้าของสั่ง 2026-08-28) ═══════════════
   🔴 ตัวที่เลื่อนได้จริง **ไม่ใช่ body** — body มี overflow-x:hidden อยู่แล้ว
      ตัวจริงคือ `.ms-content` ที่เป็น overflow:auto และ scrollWidth ล้น
      (วัดที่ 1440: 1310 vs 1180 · ที่ 390: 392 vs 390)
      ต้นเหตุ = .tkhc ที่ margin-inline ติดลบ 22px + .tk-track (แถบวิ่ง)
   🔴 ใช้ `clip` ไม่ใช่ `hidden` — `hidden` สร้าง "กล่องเลื่อน" ขึ้นมาใหม่
      ⇒ position:sticky ข้างในจะเกาะผิดกล่อง และ .lb-jump ที่เลื่อนแนวนอนเองจะเพี้ยน
      `clip` = ตัดทิ้งเฉย ๆ ไม่สร้างกล่องเลื่อน                                */
html, body{ overflow-x:clip; }
.ms-content{ overflow-x:clip; }

/* ══ ④ ปุ่ม 3 ขีด ที่มุมซ้ายสุดของหัวเว็บ (แทน "เพิ่มเติม" 3 จุดในแถบเมนู) ══ */
.ms-head .hd-burger{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:40px;height:40px;margin-inline-end:12px;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:rgb(255 255 255/5%);
  box-shadow:inset 0 0 0 1px rgb(220 184 99/28%);
  transition:transform .18s cubic-bezier(.32,.72,0,1), box-shadow .2s ease;
}
.ms-head .hd-burger span{display:block;width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gg-mid,#F0DCA0),var(--gg-deep,#A8822F))}
.ms-head .hd-burger:hover{box-shadow:inset 0 0 0 1px rgb(220 184 99/50%)}
.ms-head .hd-burger:active{transform:scale(.94)}
.ms-head .hd-burger:focus-visible{outline:2px solid var(--gg-core,#DCB863);outline-offset:2px}
/* มือถือมี .ms-burger ที่ .m-topbar อยู่แล้ว ⇒ ซ่อนตัวนี้ กันปุ่มซ้ำ */
@media(max-width:900px){ .ms-head .hd-burger{display:none} }
@media(prefers-reduced-motion:reduce){ .ms-head .hd-burger{transition:none} }

/* ══ ปุ่มค้นหา/กรองตลาด บนหัวเว็บ (ย้ายมาจาก .lb-tools ในเนื้อหา · 2026-08-28) ══ */
.hd-find-wrap{position:relative;flex:0 0 auto}
.hd-find{
  display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:12px;
  cursor:pointer;color:var(--gg-mid,#F0DCA0);
  background:rgb(255 255 255/5%);
  box-shadow:inset 0 0 0 1px rgb(220 184 99/28%);
  transition:transform .18s cubic-bezier(.32,.72,0,1), box-shadow .2s ease;
}
.hd-find:hover{box-shadow:inset 0 0 0 1px rgb(220 184 99/52%)}
.hd-find:active{transform:scale(.94)}
.hd-find:focus-visible{outline:2px solid var(--gg-core,#DCB863);outline-offset:2px}
.hd-find[aria-expanded="true"]{
  box-shadow:inset 2px 2px 5px rgb(0 0 0/45%), inset -2px -2px 5px rgb(255 240 210/14%)}

/* แผงที่เด้งลงมา — กว้างพอให้ช่องค้นหาใช้งานได้จริง ไม่ใช่ช่องจิ๋ว */
/* 🔴 ห้ามทำแผงนี้เป็น "โครมแดงเข้ม" แล้วตั้ง color:var(--ink) ทับ
   `.lb-tools` ถูกออกแบบมาสำหรับ "พื้นเนื้อหา" และพกพื้นขาวของตัวเองมาด้วย
   ⇒ พื้นแดงถูกลูกบัง เห็นเป็นการ์ดขาว แต่ตัวอักษรกลับกลายเป็นครีมที่สืบทอดมาจากแผง
      วัดได้: ปุ่มกรองที่เลือกอยู่ = **1.02:1 มองไม่เห็นเลย**
   ⇒ ให้แผงเป็น "พื้นเดียวกับเนื้อหา" และ **ไม่ตั้ง color** ปล่อยให้ลูกใช้สีของตัวเอง */
.hd-find-pop{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:80;
  width:min(94vw, 420px);padding:12px;border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 18px 44px -14px rgb(40 8 10/45%), 0 0 0 1px rgb(140 120 110/16%);

  /* 🔴🔴 ต้องประกาศตัวแปรของ `.lb` ซ้ำที่นี่ — ครั้งที่ 3 ของบั๊กนี้ในโปรเจกต์
     `.lb-tools` ถูกย้ายออกจาก `.lb` มาอยู่ในหัวเว็บ ⇒ ตัวแปรทั้งชุดที่ประกาศไว้ที่ `.lb`
     (--g1..--g5 · --gink · --ink-1/2 · --spring) **หายหมด**
     ผลที่เกิด (วัดได้ ไม่ใช่เดา):
       · `color:var(--gink)` ใช้ไม่ได้ → ตกไปใช้สีที่สืบทอดจาก .ms-head = ครีม #FFF3EC
       · `background:linear-gradient(var(--g1),...)` มีตัวแปรว่าง → **ทั้งบรรทัดถูกทิ้ง**
         → พิลล์ทองของปุ่มที่เลือกหายไปเลย เหลือพื้นขาว
       · รวมกัน = ครีมบนขาว **1.02:1 มองไม่เห็น** และไม่มีอะไรฟ้อง
     (lobby.css เตือนเรื่องนี้ไว้แล้วที่ `.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:#FFFFFF; --slab-2:#FBFAF7; --hair:rgba(60,52,32,.13);
  --ink-1:#191A1C; --ink-2:#6C6F73; --sunk:rgba(40,34,20,.10);
  color:var(--ink-1);
}
:root[data-theme="dark"] .hd-find-pop{
  background:#3A0104;
  box-shadow:0 18px 44px -14px rgb(0 0 0/72%), 0 0 0 1px rgb(255 196 92/16%);
  --slab:#16181B; --slab-2:#1D2024; --hair:rgba(232,220,190,.10);
  --ink-1:#F2EFE8; --ink-2:#A7A399; --sunk:rgba(53,0,1,.55);
}
.hd-find-pop[hidden]{display:none}
/* 🔴 .lb-tools เดิมถูกออกแบบให้อยู่ในคอลัมน์เนื้อหากว้าง ๆ — พอย้ายมาอยู่ในแผงแคบ
   ต้องบังคับให้ซ้อนกันแนวตั้ง ไม่งั้นช่องค้นหากับปุ่มกรองเบียดกันจนพิมพ์ไม่ได้ */
.hd-find-pop .lb-tools{display:flex;flex-direction:column;gap:10px;margin:0}
.hd-find-pop .lb-search{width:100%}
.hd-find-pop .lb-seg{width:100%}
.hd-find-pop .lb-seg button{flex:1}

/* บนมือถือปุ่มไปอยู่ .m-topbar ⇒ แผงต้องกางจากขอบขวาของจอ ไม่ใช่ของปุ่ม */
@media(max-width:900px){
  .m-topbar .hd-find-wrap{position:static}
  .m-topbar .hd-find-pop{inset-inline:10px auto;width:calc(100vw - 20px);top:calc(100% + 6px)}
  .m-topbar{position:relative}
}
@media(prefers-reduced-motion:reduce){ .hd-find{transition:none} }

/* หัวข้อ section ที่ใช้ไอคอน 3D แทนอีโมจิ (เช่น 🔥 → sec-fire.png) */
.lb-sec-h .ic3{display:inline-grid;place-items:center;line-height:0;flex:0 0 auto}
.lb-sec-h .ic3 picture{display:block;line-height:0}
.lb-sec-h .ic3 img{width:26px;height:26px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 5px rgb(90 40 30/32%))}