/* ==========================================================================
   jj-home.css — บล็อกใหม่หน้า member home (กระเป๋าเงิน · แบนเนอร์ · ไทล์ · กระดิ่ง · แถบประกาศ)
   feat/member-ui-jingjai · 2026-10-02 · เลย์เอาต์อ้างอิง _ui-reference/jingjai-member.html (ไม่ commit)

   🔴 2026-10-02 (รอบแก้): สีเปลี่ยนจาก "เขียวเข้มมรกต + ทอง" → teal #45A9A9 โทนสว่าง (สีเดิมของเว็บ)
      สเกลสี --jj-teal-* นิยามที่ skins/jingjai-front.css (ชั้นสกินท้ายสุด · ใช้ทุกหน้า) — ไฟล์นี้อ้างอย่างเดียว
      (ใส่ fallback ของสีหลักไว้กันกรณีสกินโหลดไม่ทัน)
   🔴 พื้นเพจ/หัวเว็บ/ล็อบบี้เดิม = ของเดิมทั้งหมด (ไม่ทับแล้ว) · ไฟล์นี้แต่งเฉพาะบล็อกใหม่
   🔴 สโคป body.jj-home ทุกกฎ — หน้าอื่นไม่โดนแตะ · หน้าตาอย่างเดียว ข้อมูลมาจาก home.js (API จริง)
   ========================================================================== */
body.jj-home{
  --jj-r:16px;
  --jj-panel:rgba(255,255,255,.92);
  --jj-panel-line:var(--jj-teal-200,#BEE4E4);
  --jj-ink:var(--jj-teal-900,#183A3A);
  --jj-sub:var(--jj-teal-700,#2F7474);
  --jj-shadow:0 8px 22px -14px rgba(24,58,58,.45);
}
/* ฟอนต์ดีไซน์ (Noto Sans Thai/Kanit) เฉพาะบล็อกใหม่ + แถบประกาศ — ไม่ตั้งที่ body
   🔴 ตั้งที่ body = ฟอนต์การ์ดล็อบบี้เดิมเปลี่ยนตาม ⇒ ความกว้างตัวอักษรเปลี่ยน */
body.jj-home .jj-top,
body.jj-home .tk.tk-full{font-family:"Noto Sans Thai",var(--ui,system-ui),sans-serif}

/* ── กระดิ่งบนแถบหัวมือถือ (home.js ใส่ลง .m-topbar .m-right) ── */
body.jj-home .m-topbar .m-right{display:flex;align-items:center;gap:8px}
body.jj-home .jj-bell{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;position:relative;text-decoration:none;
  display:grid;place-items:center;color:var(--jj-teal-600,#3B9191);
  background:rgba(255,255,255,.85);border:1px solid var(--jj-panel-line);box-shadow:var(--jj-shadow);
}
body.jj-home .jj-bell .dot{
  position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:#E5484D;border:1.5px solid #FFFFFF;
}
body.jj-home .jj-bell .dot[hidden]{display:none}

/* ── ข้อความวิ่งเดิม (.tk) = แถบประกาศของดีไซน์: กล่องขาวโปร่ง + ขอบ teal + ไอคอนโทรโข่ง ──
   🔴 .tk เดิม (lobby.css:734) มี mask-image จางขอบซ้าย/ขวา 7% — จะกินไอคอนไปด้วย ⇒ จางเฉพาะขวา
   🔴 รางข้อความวิ่งผ่าน padding ซ้ายได้ ⇒ ชิปทึบสีเดียวกับกล่องใต้ไอคอน (::before) ให้ข้อความลอดหายเนียน · ไอคอน = ::after */
body.jj-home .tk.tk-full{
  width:auto;margin:2px 0 14px;padding:10px 0;position:relative;overflow:hidden;
  background:#FFFFFF;border:1px solid var(--jj-panel-line);border-radius:14px;box-shadow:var(--jj-shadow);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);
}
body.jj-home .tk.tk-full::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:46px;z-index:1;
  background:linear-gradient(90deg,#FFFFFF 0,#FFFFFF 78%,rgba(255,255,255,0));
}
body.jj-home .tk.tk-full::after{
  content:'';position:absolute;left:12px;top:50%;width:20px;height:20px;transform:translateY(-50%);z-index:2;
  background:var(--jj-teal-500,#45A9A9);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l4 4V6L6 10H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M15 9a3 3 0 0 1 0 6'/%3E%3Cpath d='M17.5 6.5a7 7 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l4 4V6L6 10H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M15 9a3 3 0 0 1 0 6'/%3E%3Cpath d='M17.5 6.5a7 7 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.jj-home .tk.tk-full .tk-set span{color:var(--jj-ink);font-size:13px;font-weight:500;text-shadow:none}
body.jj-home .tk.tk-full .tk-set span::first-letter{color:var(--jj-teal-500,#45A9A9)}

/* ══ บล็อกใหม่: กระเป๋าเงิน → แบนเนอร์ → 3 ไทล์ ═════════════════════════════════ */
body.jj-home .jj-top{color:var(--jj-ink);margin-bottom:18px}
body.jj-home .jj-top a{text-decoration:none}

/* การ์ดกระเป๋าเงิน — แผ่นขาว ขอบ teal อ่อน */
body.jj-home .jj-wallet{
  background:var(--jj-panel);border:1px solid var(--jj-panel-line);border-radius:var(--jj-r);
  padding:16px;margin-bottom:14px;box-shadow:var(--jj-shadow);
}
body.jj-home .jj-u{display:flex;align-items:center;gap:11px}
body.jj-home .jj-ava{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--jj-teal-100,#DEF2F2);border:1px solid var(--jj-panel-line);color:var(--jj-teal-600,#3B9191);
}
body.jj-home .jj-u .lab{font-size:12px;color:var(--jj-sub)}
body.jj-home .jj-u .val{font-family:"Kanit",sans-serif;font-weight:600;font-size:16px;color:var(--jj-ink);word-break:break-all}
body.jj-home .jj-hr{height:1px;margin:14px 0;background:linear-gradient(90deg,transparent,var(--jj-panel-line),transparent)}
body.jj-home .jj-bal{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
body.jj-home .jj-bal .lab{font-size:13px;color:var(--jj-sub)}
body.jj-home .jj-bal .amt{font-family:"Kanit",sans-serif;font-weight:700;font-size:26px;color:var(--jj-teal-700,#2F7474);font-variant-numeric:tabular-nums;white-space:nowrap}
body.jj-home .jj-bal .amt b{font-weight:inherit}
body.jj-home .jj-bal .amt small{font-size:14px;font-weight:500;margin-right:3px;color:var(--jj-teal-500,#45A9A9)}
body.jj-home .jj-btns{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}
body.jj-home .jj-btn{
  border:1px solid transparent;border-radius:13px;padding:13px;cursor:pointer;
  font-family:"Kanit",sans-serif;font-weight:600;font-size:15px;line-height:1.2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s ease,filter .15s ease,background-color .15s ease;
}
body.jj-home .jj-btn:active{transform:scale(.97)}
body.jj-home .jj-btn .cir{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
/* เติมเงิน (ปุ่มหลัก) = teal เต็ม · ถอนเงิน (ปุ่มรอง) = ขอบ teal พื้นขาว — แยกหน้าที่ด้วยน้ำหนัก ไม่ใช้สีที่สอง */
body.jj-home .jj-btn.dep{color:#FFFFFF;background:var(--jj-teal-grad,#45A9A9);box-shadow:0 6px 14px -6px rgba(69,169,169,.65)}
body.jj-home .jj-btn.dep .cir{background:rgba(255,255,255,.25)}
body.jj-home .jj-btn.dep:hover{filter:brightness(1.05)}
body.jj-home .jj-btn.wd,
body.jj-home .jj-btn.reg{color:var(--jj-teal-700,#2F7474);background:#FFFFFF;border-color:var(--jj-teal-400,#67C1C1)}
body.jj-home .jj-btn.wd .cir{background:var(--jj-teal-100,#DEF2F2)}
body.jj-home .jj-btn.wd .cir svg{stroke:var(--jj-teal-600,#3B9191)}
body.jj-home .jj-btn.wd:hover,
body.jj-home .jj-btn.reg:hover{background:var(--jj-teal-50,#F1F9F9)}

/* แบนเนอร์ แทงหวย / แทงหวยยี่กี — teal สองน้ำหนัก (สว่าง/เข้ม) แทนเขียว+ม่วงของดีไซน์ */
body.jj-home .jj-banners{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
body.jj-home .jj-bn{
  position:relative;overflow:hidden;aspect-ratio:1/1.14;border-radius:var(--jj-r);
  border:1px solid var(--jj-panel-line);display:flex;align-items:flex-end;padding:12px;
  background:linear-gradient(160deg,var(--jj-teal-400,#67C1C1),var(--jj-teal-600,#3B9191));
  box-shadow:var(--jj-shadow);transition:transform .15s ease;
}
body.jj-home .jj-bn:active{transform:scale(.98)}
body.jj-home .jj-bn.two{background:linear-gradient(160deg,var(--jj-teal-600,#3B9191),var(--jj-teal-800,#235757))}
body.jj-home .jj-bn .ball{
  position:absolute;top:-14px;right:-14px;width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;font-family:"Kanit",sans-serif;font-weight:700;font-size:30px;
  color:var(--jj-teal-700,#2F7474);
  background:radial-gradient(circle at 35% 30%,#FFFFFF,var(--jj-teal-50,#F1F9F9) 55%,var(--jj-teal-200,#BEE4E4));
  box-shadow:0 6px 18px rgba(24,58,58,.28);
}
body.jj-home .jj-bn .glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 25%,rgba(255,255,255,.28),transparent 70%)}
body.jj-home .jj-bn .cta{
  position:relative;width:100%;text-align:center;padding:9px;border-radius:11px;
  background:#FFFFFF;color:var(--jj-teal-800,#235757);font-family:"Kanit",sans-serif;font-weight:700;font-size:15px;
}

/* การ์ด "แทงหวย" + "แทงหวยยี่กี" มีรูปพรีเซนเตอร์เต็มใบ (เจ้าของสั่ง 2026-10-15) — รูปอยู่ล่างสุด · glow เปลี่ยนเป็นไล่เข้มด้านล่างให้ปุ่มขาวอ่านชัด
   รูป = member/img/bet-banner-girl.webp · yeekee-banner-girl.webp (600×799) · จัดให้หน้าอยู่ในกรอบทั้งการ์ดแนวตั้ง (มือถือ) และแนวกว้าง (จอกว้าง) */
body.jj-home .jj-bn.photo .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
body.jj-home .jj-bn.photo .glow{background:linear-gradient(180deg,rgba(24,58,58,0) 52%,rgba(24,58,58,.55))}

/* 3 ไทล์ — โพยหวย (badge จริง) · อัตราจ่าย · ผลรางวัล */
body.jj-home .jj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
body.jj-home .jj-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 8px;
  background:var(--jj-panel);border:1px solid var(--jj-panel-line);border-radius:var(--jj-r);box-shadow:var(--jj-shadow);
  transition:transform .15s ease;
}
body.jj-home .jj-tile:active{transform:scale(.97)}
body.jj-home .jj-tile .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--jj-teal-100,#DEF2F2);color:var(--jj-teal-600,#3B9191)}
body.jj-home .jj-tile > span:last-child{font-family:"Kanit",sans-serif;font-weight:500;font-size:13.5px;color:var(--jj-ink)}
body.jj-home .jj-tile .badge{
  position:absolute;top:9px;right:12px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  display:grid;place-items:center;background:#E5484D;color:#FFFFFF;
  font-family:"Kanit",sans-serif;font-size:11px;font-weight:700;border:1.5px solid #FFFFFF;
}
body.jj-home .jj-tile .badge[hidden]{display:none}

/* ── มือถือ: แถบยอดเงินเหนือแท็บล่าง (footer-info-user) ซ้ำกับการ์ดกระเป๋าเงิน ⇒ ซ่อนเฉพาะหน้านี้
   🔴 คืนยอดเสีย/แนะนำเพื่อน ยังเข้าได้จาก finance.html / referral.html + แถบนี้ยังอยู่ทุกหน้าอื่น */
body.jj-home .m-bottom .footer-info-user{display:none}
body.jj-home #lb-markets{scroll-margin-top:72px}   /* แถบหัว sticky ไม่บังหัวล็อบบี้ตอนกระโดดมาจาก "แทงหวย" */

/* ── จอกว้าง: เรียงกระเป๋าเงิน | แบนเนอร์ แล้วไทล์เต็มแถว ── */
@media (min-width:901px){
  body.jj-home .jj-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:stretch}
  body.jj-home .jj-wallet,
  body.jj-home .jj-banners{margin-bottom:0}
  body.jj-home .jj-banners .jj-bn{aspect-ratio:auto;min-height:100%}
  body.jj-home .jj-tiles{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  body.jj-home .jj-btn, body.jj-home .jj-bn, body.jj-home .jj-tile{transition:none}
}