/* ==========================================================================
   jj-lobby.css — ล็อบบี้หวย (member/lobby.html) · มือถือเป็นหลัก (เป้า 390–440px) · feat/lobby-reorder 2026-10-05
   โครง (layout) ตามบรีฟ "ล็อบบี้แบบจริงใจ168": แถบหัว → ซับหัว "หวยออนไลน์" → ทางลัด 4 วง → ชิปประเภทหวย
        → หัวข้อหมวด (แถบอ่อน) + การ์ด 2 คอลัมน์ → แท็บล่าง

   🔴 สี = teal #45A9A9 ของทั้งเว็บ (เจ้าของสั่ง 2026-10-05: เอาแค่ layout ของจริงใจ168 ไม่เอาเขียว+ทอง)
      · สเกลสีไม่ได้นิยามเอง — อ้าง --jj-teal-* ของ skins/jingjai-front.css (ชั้นสกินกลาง โหลดทุกหน้า) + fallback เผื่อสกินมาช้า
      · ผิวของหน้า = ภาษาเดียวกับหน้าอื่น: พื้น aurora (body.gold-frame) · แผ่นขาวขอบ teal อ่อน (แบบ .jj-wallet/.jj-tile ของ home)
        · ปุ่มขาวไอคอน teal (แบบ .jj-bell) · แท็บล่างใช้ของกลางทั้งดุ้น (ไฟล์นี้ไม่ทับสีแท็บ)
      · ไฟล์แบบ jingjai-lobby-exact.html ยังไม่ได้รับ ⇒ ระยะ/ขนาดยังไม่ได้เทียบกับแบบ
   🔴 เฉพาะหน้านี้: ทุกกฎนำด้วย body.jl หรือ .jl-app (มีแต่ในหน้านี้) — หน้าอื่นไม่ถูกแตะ
   🔴 หน้าตาเดียวทั้งโหมดสว่าง/มืด เหมือนบล็อกใหม่ของ home (jj-home.css) — กฎที่ชนกับสกินใช้ :root[data-theme] นำ
   🔴 ตัวหนังสือทุกชิ้นอยู่บนแผ่น/แถบของตัวเอง ไม่วางลอยบน aurora (พื้นนั้นไล่จากอ่อนบนจอไปเข้มล่างจอ — ตัวหนังสือลอยจะอ่านไม่ออกครึ่งจอ)
   🔴 ตัวหนังสือไทย: line-height ≥ 1.35 ทุกจุด (สระบน/วรรณยุกต์ไม่โดนตัด) · ไม่ใส่ letter-spacing
   ========================================================================== */

body.jl{
  --jl-t50:var(--jj-teal-50,#F1F9F9);   --jl-t100:var(--jj-teal-100,#DEF2F2); --jl-t200:var(--jj-teal-200,#BEE4E4);
  --jl-t300:var(--jj-teal-300,#92D3D3); --jl-t400:var(--jj-teal-400,#67C1C1); --jl-t500:var(--jj-teal-500,#45A9A9);
  --jl-t600:var(--jj-teal-600,#3B9191); --jl-t700:var(--jj-teal-700,#2F7474); --jl-t800:var(--jj-teal-800,#235757);
  --jl-t900:var(--jj-teal-900,#183A3A);
  --jl-card-top:#348080;                 /* อยู่ระหว่าง 600 กับ 700 = teal ที่สว่างที่สุดที่ตัวหนังสือขาวยังได้เกิน 4.5:1 (ได้ 4.62 · teal-600 ได้ 3.7) */
  --jl-panel:rgba(255,255,255,.96);      /* แผ่นขาว (home ใช้ .92 — หน้านี้ทึบขึ้นนิดเพราะมีการ์ดซ้อนข้างใน) */
  --jl-line:var(--jl-t200);  --jl-ink:var(--jl-t900);  --jl-sub:var(--jl-t700);
  --jl-on-card:#FFFFFF;      --jl-on-card-2:#E3F4F4;                           /* ชื่อตลาด · บรรทัดปิดรับ บนการ์ด teal */
  --jl-shut:#E6EAE9;    --jl-shut-2:#D9DEDD;   --jl-shut-ink:#4C5756;  --jl-shut-line:#B4BDBC; /* การ์ดปิดรับแล้ว = เทาอ่อน (ชุดเดียวกับล็อบบี้บน home) */
  --jl-red:var(--jj-red,#D93532);  --jl-red-2:var(--jj-red-2,#C22D2A); /* แดงกลางของเว็บ (skins/jingjai-front.css §1/§6): badge · ป้าย "ปิดรับแล้ว" / "ตลาดปิด · คืนยอด" — ตัวขาวได้ 4.66:1 */
  --jl-shadow:0 8px 22px -14px rgba(24,58,58,.45);                             /* เงาเดียวกับแผ่นของ home */
  --jl-r:16px;
  --jl-head-h:56px;
  --jl-display:"Kanit","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
  --jl-body:"Noto Sans Thai","Kanit","Leelawadee UI",Tahoma,sans-serif;
}
/* styles.css ตั้ง html,body สูง 100% ⇒ หัว sticky จะหลุดหลังเลื่อนพ้น 1 จอ — หน้านี้ให้ body สูงตามเนื้อหา
   🔴 body ตั้งแค่ "กล่อง" — พื้นมาจาก gold-frame (aurora) · ฟอนต์/สีตัวหนังสือตั้งที่ .jl-app ข้างล่าง ไม่ตั้งที่ body:
      ลิ้นชักเมนู · กล่องล็อกอิน · แชท ถูกฉีดเป็นลูกของ body แล้วรับฟอนต์ต่อจาก body ⇒ ตั้งที่ body = ของกลางหน้านี้หน้าตาไม่เหมือนหน้าอื่น */
:root[data-theme] body.jl{margin:0;height:auto;min-height:100%}
/* รีเซ็ตเฉพาะในเนื้อหน้านี้ (.jl-app) — ไม่แตะของกลางที่ shell.js/chat.js ฉีดเข้ามาใน body (ลิ้นชักเมนู · กล่องล็อกอิน · แชท · แท็บล่าง)
   เจาะจงต่ำ (.jl-app x) โดยตั้งใจ: กฎของชิ้นส่วนข้างล่าง (body.jl .jl-…) ต้องชนะรีเซ็ตเสมอ */
.jl-app,.jl-app *{box-sizing:border-box}
.jl-app a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.jl-app button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jl-app [hidden]{display:none!important}

body.jl .jl-app{
  max-width:480px;margin-inline:auto;min-height:100vh;min-height:100dvh;
  padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));        /* ที่ว่างให้แท็บล่าง (fixed) */
  color:var(--jl-ink);font-family:var(--jl-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}

/* ── แถบหัว: โลโก้ · เครดิต · รีเฟรช · เมนู — พื้น teal ของแบรนด์ · ของบนแถบเป็นกล่องขาวทั้งหมด (ตัวหนังสือขาวบน #45A9A9 ได้แค่ 2.8:1) ── */
body.jl .jl-head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:calc(var(--jl-head-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 12px 0;
  background:linear-gradient(180deg,var(--jl-t500),var(--jl-t600));
  box-shadow:0 6px 16px -10px rgba(24,58,58,.75);
}
body.jl .jl-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
body.jl .jl-logo img{display:block;height:30px;width:auto;max-width:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 1px 2px rgba(24,58,58,.45))}   /* ยอดเครดิตยาว + จอแคบ → โลโก้ย่อทั้งรูป ไม่ถูกบีบจนเบี้ยว */
body.jl .jl-head-r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
body.jl .jl-credit{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  min-width:86px;height:40px;padding:0 12px;border-radius:12px;
  background:rgba(255,255,255,.95);box-shadow:0 2px 8px -4px rgba(24,58,58,.6);
}
body.jl .jl-credit small{font-family:var(--jl-display);font-size:10.5px;line-height:1.2;color:var(--jl-sub)}
body.jl .jl-credit b{font-family:var(--jl-display);font-weight:600;font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--jl-t800)}
body.jl .jl-login{
  display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:12px;
  font-family:var(--jl-display);font-weight:600;font-size:14px;color:var(--jl-t800);
  background:rgba(255,255,255,.95);box-shadow:0 2px 8px -4px rgba(24,58,58,.6);
}
body.jl .jl-ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--jl-t700);background:rgba(255,255,255,.92);box-shadow:0 2px 8px -4px rgba(24,58,58,.6);
}
body.jl .jl-ic:active,body.jl .jl-login:active{background:#FFFFFF;transform:scale(.96)}
body.jl .jl-ic:focus-visible,body.jl .jl-login:focus-visible,body.jl .jl-logo:focus-visible{outline:2px solid var(--jl-t900);outline-offset:2px}
body.jl .jl-ic.spin svg{animation:jl-spin .7s linear infinite}
@keyframes jl-spin{to{transform:rotate(360deg)}}

/* ── ซับหัว: [🏠 หน้าหลัก] หวยออนไลน์ ───────────────────────────────────────────
   ปุ่มซ้าย = "หน้าหลัก" (ไอคอนบ้าน + ข้อความ · เจ้าสั่ง 2026-10-05 ให้มีทุกหน้า) แทนลูกศร ← เดิม ปลายทางเดิม
   เม็ดยาหน้าตาเดียวกับชิปประเภทหวยข้างล่าง (teal-50 / teal-700) · วางแบบ absolute ชิดซ้าย ⇒ ชื่อหน้ายังอยู่กึ่งกลางจริง
   ::after ขยายพื้นที่แตะเป็นสูง 46px (ตัวปุ่มสูง 32px) */
body.jl .jl-sub{
  position:relative;display:flex;align-items:center;justify-content:center;height:46px;
  background:var(--jl-panel);border-bottom:1px solid var(--jl-line);
}
:root[data-theme] body.jl .jl-sub h1{margin:0;font-family:var(--jl-display);font-weight:600;font-size:17px;line-height:1.35;color:var(--jl-ink)}
body.jl .jl-back{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px 0 9px;border-radius:16px;
  font-family:var(--jl-display);font-weight:600;font-size:13px;line-height:1;white-space:nowrap;
  color:var(--jl-t700);background:var(--jl-t50);border:1px solid var(--jl-line);
}
body.jl .jl-back svg{flex:0 0 auto;display:block}
body.jl .jl-back::after{content:"";position:absolute;inset:-7px -6px}
body.jl .jl-back:active{background:var(--jl-t100)}
body.jl .jl-back:focus-visible{outline:2px solid var(--jl-t700);outline-offset:2px}

/* เนื้อหา = แผ่นขาวเรียงลงมาบนพื้น aurora (ช่องไฟ 12px เท่ากันทั้งหน้า) */
body.jl .jl-main{display:flex;flex-direction:column;gap:12px;padding:12px 12px 6px}
body.jl .jl-ctrl,
body.jl .jl-sec,
body.jl .jl-msg{background:var(--jl-panel);border:1px solid var(--jl-line);border-radius:var(--jl-r);box-shadow:var(--jl-shadow)}

/* ── แผ่นควบคุม: ทางลัด 4 วง + เลือกประเภทหวย ──────────────────────────────── */
body.jl .jl-ctrl{padding:14px 0 12px;min-width:0}
body.jl .jl-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0 8px}
body.jl .jl-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:2px 0;border-radius:12px}
/* วงกลม = แนวเดียวกับวงปุ่มกลางของแท็บล่าง (teal ไล่จากสว่างไปเข้ม ไอคอนขาว) — เริ่มที่ #45A9A9 แล้วเข้มเร็วกว่า ให้ไอคอนขาวได้ ≥ 3:1 ทุกจุดที่เส้นไอคอนพาดถึง */
body.jl .jl-quick .c{
  position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;
  background:radial-gradient(circle at 35% 28%,var(--jl-t500),var(--jl-t600) 36%,var(--jl-t700));
  box-shadow:0 0 0 3px var(--jl-t100),0 8px 16px -8px rgba(47,116,116,.75);
}
body.jl .jl-quick .t{font-family:var(--jl-display);font-weight:500;font-size:13px;line-height:1.35;color:var(--jl-ink);text-align:center}
body.jl .jl-quick .badge{
  position:absolute;top:-4px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;
  display:grid;place-items:center;font-family:var(--jl-display);font-weight:600;font-size:11.5px;line-height:1;font-variant-numeric:tabular-nums;
  color:#fff;background:var(--jl-red);box-shadow:0 0 0 2px #FFFFFF;
}
body.jl .jl-quick a:active .c{transform:scale(.96)}
body.jl .jl-quick a:focus-visible{outline:2px solid var(--jl-t700);outline-offset:2px}

body.jl .jl-pick{margin-top:12px;padding-top:12px;position:relative}
body.jl .jl-pick::before{content:'';position:absolute;left:12px;right:12px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--jl-line),transparent)}   /* เส้นคั่นแบบ .jj-hr ของ home */
:root[data-theme] body.jl .jl-pick h2{margin:0 12px 8px;font-family:var(--jl-display);font-weight:600;font-size:15.5px;line-height:1.35;color:var(--jl-ink)}
body.jl .jl-chips-row{position:relative;display:flex;align-items:center}
body.jl .jl-chips{
  display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;padding:2px 12px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
body.jl .jl-chips::-webkit-scrollbar{display:none}
body.jl .jl-chip{
  flex:0 0 auto;height:36px;padding:0 16px;border-radius:18px;white-space:nowrap;
  font-family:var(--jl-display);font-weight:500;font-size:14px;line-height:1;
  color:var(--jl-t700);background:var(--jl-t50);box-shadow:inset 0 0 0 1px var(--jl-line);
}
body.jl .jl-chip.on{color:#FFFFFF;font-weight:600;background:var(--jl-t700);box-shadow:inset 0 0 0 1px var(--jl-t700),0 6px 12px -8px rgba(47,116,116,.9)}   /* ตัวหนังสือขาวต้องการ teal-700 (5.4:1) — teal-600 ได้ 3.7 */
body.jl .jl-chip:focus-visible{outline:2px solid var(--jl-t900);outline-offset:2px}
body.jl .jl-next{
  flex:0 0 auto;width:36px;height:36px;margin:0 10px 2px 2px;border-radius:50%;display:grid;place-items:center;
  color:var(--jl-t700);background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--jl-line),-10px 0 12px -6px #FFFFFF;
}
body.jl .jl-next:focus-visible{outline:2px solid var(--jl-t700);outline-offset:2px}

/* ── หมวด = แผ่นขาว หัวแถบอ่อน (แบบหัวกล่องของหน้าโพย) + การ์ด 2 คอลัมน์ ─────── */
body.jl .jl-list{display:flex;flex-direction:column;gap:12px;min-width:0}
body.jl .jl-sec{overflow:hidden;min-width:0}
:root[data-theme] body.jl .jl-cat{
  margin:0;padding:9px 14px;background:var(--jl-t50);border-bottom:1px solid var(--jl-line);
  font-family:var(--jl-display);font-weight:600;font-size:15px;line-height:1.4;color:var(--jl-ink);
}
body.jl .jl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 10px}
/* การ์ด 3 แถว: [ธง | ชื่อตลาด] / "ปิดรับ : วันที่ เวลา" (เต็มกว้าง) / ป้ายนับถอยหลัง (เต็มกว้าง)
   แถวบนยืดได้ (1fr) ⇒ การ์ดคู่เดียวกันที่ชื่อยาวไม่เท่ากัน บรรทัดปิดรับ/ป้ายเวลายังอยู่ระดับเดียวกัน
   "ปิดรับ" อยู่แถวของตัวเองเต็มกว้าง เพราะข้างธงมีที่ไม่พอสำหรับวันที่+เวลา
   พื้นการ์ดเปิด = teal ไล่เข้มลงล่าง (สูตรเดียวกับแบนเนอร์ "แทงหวยยี่กี" ของ home) — จุดสว่างสุดยังให้ตัวหนังสือขาวได้ 4.5:1 */
body.jl .jl-card{
  position:relative;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:1fr auto auto;
  grid-template-areas:"fl tx" "cl cl" "cd cd";column-gap:9px;row-gap:7px;align-items:center;
  padding:11px 9px 10px;border-radius:14px;color:var(--jl-on-card);
  background:linear-gradient(165deg,var(--jl-card-top) 0%,var(--jl-t700) 40%,var(--jl-t800) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 16px -12px rgba(24,58,58,.85);
}
body.jl a.jl-card:active{transform:scale(.985)}
body.jl a.jl-card:focus-visible{outline:2px solid var(--jl-t900);outline-offset:2px}
body.jl .jl-card .fl{grid-area:fl;width:38px;height:38px;border-radius:50%;overflow:hidden;display:block;line-height:0;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.3)}
body.jl .jl-card .fl svg,body.jl .jl-card .fl img{display:block;width:100%;height:100%;object-fit:cover}
body.jl .jl-card .fl picture{display:block;width:100%;height:100%}
body.jl .jl-card .fl.ic{background:none;box-shadow:none;border-radius:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}   /* ยี่กี = ไอคอนลูกบอล (โปร่ง) ไม่ใช่ธง → ไม่ต้องมีจานขาวรอง */
body.jl .jl-card .fl.ic img{object-fit:contain}
body.jl .jl-card .tx{grid-area:tx;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:40px}
body.jl .jl-card .nm{
  font-family:var(--jl-display);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--jl-on-card);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;
}
body.jl .jl-card .rn{font-size:11.5px;line-height:1.35;color:var(--jl-on-card)}   /* อยู่แถวบนสุดของการ์ด (จุดที่พื้นสว่างสุด) ⇒ ต้องขาวเต็ม ไม่ใช้สีรอง */
body.jl .jl-card .cl{
  grid-area:cl;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--jl-display);font-weight:500;font-size:12.5px;line-height:1.4;color:var(--jl-on-card-2);font-variant-numeric:tabular-nums;
}
body.jl .jl-card .cd{
  grid-area:cd;display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:3px 10px;border-radius:15px;
  font-family:var(--jl-display);font-weight:600;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums;
  color:var(--jl-t900);background:var(--jl-t100);
}
body.jl .jl-card .cd i{width:8px;height:8px;border-radius:50%;background:var(--jl-t500);box-shadow:0 0 0 3px rgba(69,169,169,.25);flex:0 0 auto;animation:jl-live 1.4s ease-in-out infinite}
@keyframes jl-live{50%{opacity:.35}}

/* ปิดรับแล้ว = ตัวการ์ดเทาอ่อนทั้งใบ (เจ้าของสั่ง 2026-10-05 ให้แยกจากการ์ดเปิดให้ชัด)
   + ป้าย "ปิดรับแล้ว" และ "ตลาดปิด · คืนยอด" = ปุ่มแดง ตัวหนังสือขาว แบบเดียวกันทั้งคู่ (เจ้าของสั่ง 2026-10-05 สองรอบ:
     รอบแรกเฉพาะ "ปิดรับแล้ว" · รอบสองให้ทุกจุดของฝั่งผู้เล่นเป็นแดงโทนเดียว — กฎของหน้าอื่นอยู่ที่ skins/jingjai-front.css §6)
   ตัวการ์ดไม่เปลี่ยน · การ์ดเปิดไม่แตะ · สองสถานะแยกกันด้วยข้อความบนปุ่ม */
body.jl .jl-card.shut,body.jl .jl-card.void{
  color:var(--jl-shut-ink);background:linear-gradient(180deg,var(--jl-shut),var(--jl-shut-2));box-shadow:inset 0 0 0 1px var(--jl-shut-line);
}
body.jl .jl-card.shut .nm,body.jl .jl-card.void .nm{color:#434D4C}
body.jl .jl-card.shut .rn,body.jl .jl-card.void .rn,
body.jl .jl-card.shut .cl,body.jl .jl-card.void .cl{color:#566160}
body.jl .jl-card.shut .fl,body.jl .jl-card.void .fl{box-shadow:0 0 0 2px rgba(255,255,255,.9);filter:saturate(.75)}
body.jl .jl-card.shut .fl.ic,body.jl .jl-card.void .fl.ic{box-shadow:none}
body.jl .jl-card .cd.shut,
body.jl .jl-card .cd.void{font-size:13.5px;font-weight:600;color:#FFFFFF;background:linear-gradient(180deg,var(--jl-red),var(--jl-red-2));box-shadow:var(--jj-red-shadow,0 5px 10px -7px rgba(140,24,22,.85))}   /* ขาวบนแดงนี้ได้ 4.66:1 ที่จุดสว่างสุด */

/* 0157: รอเปิด = งวดถูกสร้างไว้แล้วแต่ยังไม่ถึงเวลาเปิด — ตัวการ์ดโทนเดียวกับปิดรับ (ยังกดแทงไม่ได้ · ไม่ใช่ลิงก์)
   แต่ป้ายเป็น "เปิด HH:MM · นับถอยหลังถึงเวลาเปิด" ขอบเขียว ไม่ใช่ปุ่มแดง (ไม่ได้ปิด แค่ยังไม่ถึงเวลา) */
body.jl .jl-card.soon{color:var(--jl-shut-ink);background:linear-gradient(180deg,var(--jl-shut),var(--jl-shut-2));box-shadow:inset 0 0 0 1px var(--jl-shut-line)}
body.jl .jl-card.soon .nm{color:#434D4C}
body.jl .jl-card.soon .rn,body.jl .jl-card.soon .cl{color:#566160}
body.jl .jl-card .cd.soon{font-size:13.5px;font-weight:600;color:var(--jl-t900);background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--jl-t500)}

/* skeleton ระหว่างโหลด (กล่องสูงเท่าการ์ดจริง ⇒ ของจริงมาแล้วหน้าไม่กระโดด) */
@keyframes jl-sk{0%,100%{opacity:.55}50%{opacity:1}}
:root[data-theme] body.jl .jl-cat.sk{height:40px;animation:jl-sk 1.15s ease-in-out infinite}
body.jl .jl-card.sk{background:var(--jl-t50);box-shadow:inset 0 0 0 1px var(--jl-line);animation:jl-sk 1.15s ease-in-out infinite}
body.jl .jl-card.sk .fl{background:var(--jl-t100);box-shadow:none}
body.jl .jl-card.sk .nm{display:block;height:16px;border-radius:6px;background:var(--jl-t100)}
body.jl .jl-card.sk .cl{height:17.5px;width:78%;justify-self:center;border-radius:6px;background:var(--jl-t100)}
body.jl .jl-card.sk .cd{background:var(--jl-t100)}

/* ข้อความแทนรายการ (ว่าง / โหลดไม่ได้ / ต้องล็อกอิน) */
body.jl .jl-msg{padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
body.jl .jl-msg b{font-family:var(--jl-display);font-weight:600;font-size:16px;line-height:1.4;color:var(--jl-ink)}
body.jl .jl-msg span{color:var(--jl-sub);font-size:14px}
body.jl .jl-msg-b{margin-top:6px;display:inline-flex;align-items:center;height:40px;padding:0 22px;border-radius:13px;font-family:var(--jl-display);font-weight:600;font-size:14.5px;color:#FFFFFF;background:var(--jl-t700)}
body.jl .jl-msg-b:focus-visible{outline:2px solid var(--jl-t900);outline-offset:2px}

/* ปุ่มแชทลอย: หน้านี้เปิดแชทจากแท็บ "ติดต่อเรา" (shell.js สั่ง #mc-fab.click() — ทำงานแม้ปุ่มถูกซ่อน)
   🔴 ต้อง display:none ไม่ใช่ opacity:0 — chat.js วางกล่อง #mchat ไว้มุมขวาล่าง (z-index 9999) ตรงกับแท็บ "ติดต่อเรา" พอดี
      ปุ่มล่องหนแต่ยังกินที่ = กล่องนั้นบังนิ้ว แขกกด "ติดต่อเรา" ไม่ติด (เจอจริงตอนเทส) · display:none = กล่องยุบเหลือ 0 */
body.jl .mc-fab{display:none}

/* 481–900px ยังมีแท็บล่าง (m.css ซ่อนที่ ≥ 901px) — ให้กว้างเท่าคอลัมน์และอยู่กลางจอ ไม่ยืดเต็มจอขณะที่หัวกับเนื้อหากว้างแค่ 480 */
@media (min-width:481px) and (max-width:900px){
  :root[data-theme] body.jl .m-tabbar.mt2.jj-nav{left:50%;right:auto;width:100%;max-width:480px;transform:translateX(-50%)}
}
@media (min-width:901px){ body.jl .jl-app{padding-bottom:28px} }      /* ไม่มีแท็บล่างแล้ว ไม่ต้องเผื่อที่ */
@media (max-width:374px){            /* จอแคบ: คืนความกว้างให้การ์ด — ลดขอบแผ่น/ช่องไฟ ไม่ให้ "ปิดรับ : วัน เวลา" ล้น */
  body.jl .jl-main{padding-inline:8px}
  body.jl .jl-grid{gap:8px;padding:10px 8px}
  body.jl .jl-card{padding:10px 7px 9px}
}
@media (max-width:339px){
  body.jl .jl-card{grid-template-columns:34px minmax(0,1fr);column-gap:7px}
  body.jl .jl-card .fl{width:34px;height:34px}
  body.jl .jl-card .nm{font-size:13.5px}
  body.jl .jl-card .cl{font-size:11.5px}
  body.jl .jl-credit{min-width:74px;padding:0 9px}
  body.jl .jl-head-r{gap:6px}
  body.jl .jl-quick .c{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  body.jl .jl-ic.spin svg,body.jl .jl-card .cd i,body.jl .jl-cat.sk,body.jl .jl-card.sk{animation:none}
}