/* ============================================================================================
   หวยชุดแบบใหม่ (R35 — เจ้าของ 2026-10-08 "ใช้งานง่าย Mobile 100% user friendly ที่สุด คนแก่ใช้ได้ เข้าใจง่าย งานพรีเมียมที่สุด") — components/lotto/{Lottoset,ForeignMain,ForeignTang,ForeignPoy,ForeignMenu}V2.vue
   โหลดจาก component (ต่อจาก theme-override/red) ; kill switch LOTTO_BET_UI=legacy → หน้าเดิมไม่โหลดไฟล์นี้
   กติกาคนแก่ใช้ได้: ฐานตัวอักษร 17 px (ป้ายปุ่มหลัก/ยอดเงิน ≥ 18 px), line-height ≥ 1.5, contrast ≥ 4.5:1 (ข้อความหลัก ≥ 7:1), สถานะ = ไอคอน + ข้อความเสมอ, ปุ่ม ≥ 48 px,
   คีย์แพด 64 px, หน้าละ 1 ปุ่มหลัก (sticky ล่างบนมือถือ), ระยะห่างกว้าง, ปุ่มกลับ pill ; DOM ของ tang_*.js เดิม (.group__keyboard/.key-pad/#lottery_list/.total_price/.triggerSendLottery) จัดรูปใหม่ด้วย CSS เท่านั้น
   ขอบเขต: `.ls2-root …` + `body.ls2 …` (swal2 ยืนยัน + modal สลาก/กติกา ที่อยู่นอก root) ; ธีม default มืด LOTTOVIP / `.ls2-theme-red` สว่าง SUKJAI99
   ============================================================================================ */
.ls2-root, body.ls2 {
  --ls2-primary: var(--nhf-red, #b90504); --ls2-primary-hi: var(--nhf-red-hi, #d21414); --ls2-primary-deep: var(--nhf-red-deep, #790000); --ls2-primary-ink: #ff9b93; --ls2-primary-soft: rgba(210, 20, 20, .16); --ls2-primary-line: rgba(210, 20, 20, .40);
  --ls2-accent: var(--nhf-gold, #f2c14e); --ls2-accent-ink: #ffd166; --ls2-accent-soft: rgba(242, 193, 78, .16);
  --ls2-good: #34d399; --ls2-good-soft: rgba(52, 211, 153, .16); --ls2-good-ink: #7ff0c0; --ls2-warn: #fbbf24; --ls2-warn-soft: rgba(251, 191, 36, .16); --ls2-warn-ink: #ffd86b;
  --ls2-bad: #f87171; --ls2-bad-soft: rgba(248, 113, 113, .16); --ls2-bad-ink: #ffb4b4;
  --ls2-ink: #f7f7f9; --ls2-muted: #b8b8c2; --ls2-faint: #80808b; --ls2-paper: #1b1b20; --ls2-paper-2: #24242b; --ls2-bg: #121216; --ls2-bg-2: #2b2b33; --ls2-line: rgba(255, 255, 255, .10); --ls2-line-strong: rgba(255, 255, 255, .22);
  --ls2-surface: linear-gradient(180deg, #212129 0%, #19191e 100%); --ls2-bar-bg: #141416; /* R34h ข้อ 8: ทึบ — แถวตะกร้าเลื่อนลอดใต้แถบไม่ทะลุ */
  --ls2-radius: 18px; --ls2-radius-sm: 14px; --ls2-radius-xs: 10px; --ls2-pill: 999px;
  --ls2-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35); --ls2-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 50px rgba(0, 0, 0, .5);
  --ls2-font: var(--nhf-font-body, 'NotosansThai', 'Mitr', system-ui, sans-serif); --ls2-font-display: var(--nhf-font-display, 'Mitr', 'NotosansThai', system-ui, sans-serif);
  --ls2-footer-h: 0px;
}
.ls2-root.ls2-theme-red, body.ls2-theme-red {
  --ls2-primary: #DC2626; --ls2-primary-hi: #EF4444; --ls2-primary-deep: #B91C1C; --ls2-primary-ink: #B91C1C; --ls2-primary-soft: #FEE2E2; --ls2-primary-line: rgba(220, 38, 38, .32);
  --ls2-accent: #111111; --ls2-accent-ink: #92400E; --ls2-accent-soft: #FEF3C7;
  --ls2-good: #1f9d55; --ls2-good-soft: #eaf7ee; --ls2-good-ink: #0f5a30; --ls2-warn: #d97706; --ls2-warn-soft: #fff4d6; --ls2-warn-ink: #7a4d0b; --ls2-bad: #c53030; --ls2-bad-soft: #fde8e8; --ls2-bad-ink: #7f1d1d;
  --ls2-ink: #1b1b1f; --ls2-muted: #525866; --ls2-faint: #8a8f9a; --ls2-paper: #fff; --ls2-paper-2: #f7f7f9; --ls2-bg: #f1f2f5; --ls2-bg-2: #e5e6eb; --ls2-line: rgba(27, 27, 31, .12); --ls2-line-strong: rgba(27, 27, 31, .24);
  --ls2-surface: linear-gradient(180deg, #ffffff 0%, #fafafc 100%); --ls2-bar-bg: #ffffff;
  --ls2-shadow: 0 1px 2px rgba(27, 27, 31, .04), 0 8px 24px rgba(27, 27, 31, .06); --ls2-shadow-lg: 0 2px 4px rgba(27, 27, 31, .06), 0 18px 40px rgba(27, 27, 31, .10);
}
.ls2-root { font-family: var(--ls2-font); font-size: 17px; line-height: 1.5; color: var(--ls2-ink); -webkit-font-smoothing: antialiased; padding-bottom: calc(104px + var(--ls2-footer-h)); position: relative; }
.ls2-root *, .ls2-root *::before, .ls2-root *::after { box-sizing: border-box; }
.ls2-root h1, .ls2-root h2, .ls2-root h3, .ls2-root h4, .ls2-root p, .ls2-root li, .ls2-root label, .ls2-root small, .ls2-root b { color: inherit; }
.ls2-root .af-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.ls2-root a { color: inherit; text-decoration: none; }
.ls2-root a:hover { text-decoration: none; }
.ls2-root a:focus-visible, .ls2-root button:focus-visible, .ls2-root input:focus-visible { outline: 3px solid color-mix(in srgb, var(--ls2-primary-hi) 60%, transparent); outline-offset: 2px; }
.ls2-wrap { padding: 12px 16px 0; max-width: 1180px; margin: 0 auto; }
@media (min-width: 992px) { .ls2-wrap { padding: 20px 20px 0; } .ls2-root { padding-bottom: 48px; } }

/* ---------- แถวบน + เมนู 3 ปุ่ม ---------- */
.ls2-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ls2-root .ls2-back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: var(--ls2-pill); background: var(--ls2-paper-2); border: 1px solid var(--ls2-line-strong); color: var(--ls2-ink); font-size: 16px; font-weight: 700; box-shadow: var(--ls2-shadow); }
.ls2-root .ls2-back i { color: var(--ls2-primary-ink); font-size: 14px; }
.ls2-root .ls2-back:hover { background: var(--ls2-primary-soft); border-color: var(--ls2-primary-line); color: var(--ls2-ink); }
.ls2-root .ls2-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--ls2-pill); background: var(--ls2-paper-2); border: 1px solid var(--ls2-line); color: var(--ls2-ink); font-size: 15px; font-weight: 700; }
.ls2-root .ls2-chip i { color: var(--ls2-primary-ink); }
.ls2-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; padding: 6px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px solid var(--ls2-line); }
.ls2-root .ls2-nav__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; border-radius: var(--ls2-radius-xs); color: var(--ls2-muted); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.25; }
.ls2-root .ls2-nav__btn i { font-size: 18px; }
.ls2-root .ls2-nav__btn:hover { background: var(--ls2-bg-2); color: var(--ls2-ink); }
.ls2-root .ls2-nav__btn.is-active { background: var(--ls2-primary); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--ls2-primary) 35%, transparent); }

/* ---------- การ์ดหัว ---------- */
.ls2-hero { position: relative; overflow: hidden; margin-bottom: 14px; padding: 18px; border-radius: var(--ls2-radius); background: var(--ls2-paper); background-image: radial-gradient(120% 90% at 50% -10%, var(--ls2-primary-soft), transparent 62%), var(--ls2-surface); border: 1px solid var(--ls2-primary-line); box-shadow: var(--ls2-shadow-lg); }
.ls2-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ls2-primary-deep), var(--ls2-primary), var(--ls2-primary-hi)); }
.ls2-hero--compact { padding: 16px 18px; }
.ls2-hero__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ls2-hero__names { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ls2-hero__flag { width: 40px; height: 30px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px var(--ls2-line-strong); }
.ls2-hero__name { font-family: var(--ls2-font-display); font-size: 24px; line-height: 1.2; font-weight: 700; margin: 0; color: var(--ls2-ink); }
.ls2-hero__name i { color: var(--ls2-primary-ink); font-size: 20px; margin-right: 4px; }
.ls2-hero__draw { font-size: 15px; color: var(--ls2-muted); margin-top: 2px; }
.ls2-status { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--ls2-pill); font-size: 15px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.ls2-status--good { background: var(--ls2-good-soft); color: var(--ls2-good-ink); border-color: color-mix(in srgb, var(--ls2-good) 35%, transparent); }
.ls2-status--wait { background: var(--ls2-warn-soft); color: var(--ls2-warn-ink); border-color: color-mix(in srgb, var(--ls2-warn) 35%, transparent); }
.ls2-status--bad { background: var(--ls2-bad-soft); color: var(--ls2-bad-ink); border-color: color-mix(in srgb, var(--ls2-bad) 35%, transparent); }
.ls2-status--muted { background: var(--ls2-bg-2); color: var(--ls2-muted); border-color: var(--ls2-line); }
.ls2-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.ls2-fact { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ls2-ink); }
.ls2-fact i { color: var(--ls2-primary-ink); width: 18px; text-align: center; }
.ls2-hero__closed { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--ls2-radius-xs); background: var(--ls2-bad-soft); border: 1px solid color-mix(in srgb, var(--ls2-bad) 35%, transparent); color: var(--ls2-ink); font-size: 15px; }
.ls2-hero__closed i { color: var(--ls2-bad); margin-right: 6px; }
.ls2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ls2-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 8px 6px; border-radius: var(--ls2-radius-xs); background: var(--ls2-bg); border: 1px solid var(--ls2-line); text-align: center; }
.ls2-tile b { font-family: var(--ls2-font-display); font-size: 24px; line-height: 1.1; color: var(--ls2-ink); }
.ls2-tile span { font-size: 13.5px; color: var(--ls2-muted); display: inline-flex; align-items: center; gap: 5px; }
.ls2-tile.is-good b { color: var(--ls2-good-ink); }
.ls2-tile.is-muted b { color: var(--ls2-muted); }

/* ---------- 3 ขั้นตอน ---------- */
.ls2-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 992px) { .ls2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ls2-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--ls2-radius-sm); background: var(--ls2-paper); border: 1px solid var(--ls2-line); font-size: 15.5px; line-height: 1.5; }
.ls2-steps li b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ls2-primary); color: #fff; font-size: 16px; }

/* ---------- การ์ด/ปุ่ม/ป้าย ---------- */
.ls2-card { background: var(--ls2-paper); background-image: var(--ls2-surface); border: 1px solid var(--ls2-line); border-radius: var(--ls2-radius); box-shadow: var(--ls2-shadow); padding: 18px; color: var(--ls2-ink); margin-bottom: 14px; min-width: 0; }
.ls2-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ls2-card__title { font-family: var(--ls2-font-display); font-size: 18px; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ls2-ink); }
.ls2-card__title i { color: var(--ls2-primary-ink); font-size: 16px; }
.ls2-hint { margin: 0 0 12px; font-size: 15px; color: var(--ls2-muted); line-height: 1.5; }
.ls2-hint b { color: var(--ls2-ink); }
.ls2-hint--center { text-align: center; margin: 10px 0 0; font-size: 14px; }
.ls2-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--ls2-pill); background: var(--ls2-accent-soft); border: 1px solid color-mix(in srgb, var(--ls2-accent) 45%, transparent); color: var(--ls2-accent-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ls2-root .ls2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border-radius: var(--ls2-radius-sm); font-family: var(--ls2-font); font-size: 18px; font-weight: 700; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: background .15s ease, transform .15s ease; text-decoration: none; }
.ls2-root .ls2-btn:active { transform: translateY(1px); }
.ls2-root .ls2-btn--primary { background: var(--ls2-primary); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--ls2-primary) 38%, transparent); }
.ls2-root .ls2-btn--primary:hover { background: var(--ls2-primary-hi); color: #fff; }
.ls2-root .ls2-btn--ghost { background: transparent; color: var(--ls2-ink); border-color: var(--ls2-line-strong); }
.ls2-root .ls2-btn--ghost:hover { background: var(--ls2-primary-soft); border-color: var(--ls2-primary-line); color: var(--ls2-ink); }
.ls2-root .ls2-btn.is-disabled, .ls2-root .ls2-btn:disabled, .ls2-root .ls2-btn[disabled] { background: var(--ls2-bg-2); color: var(--ls2-muted); border-color: var(--ls2-line); box-shadow: none; cursor: not-allowed; pointer-events: none; opacity: 1; }
.ls2-ctas { display: grid; gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .ls2-ctas { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

/* ---------- หน้าแทง: grid + คีย์แพด (DOM เดิม) ---------- */
.ls2-grid { display: grid; gap: 14px; }
@media (min-width: 992px) { .ls2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .ls2-grid .ls2-cart { position: sticky; top: calc(var(--site-header-h, 0px) + 16px); } }
.ls2-root .group__keyboard { display: block; background: none; padding: 0; margin: 0; }
.ls2-root .group__keyboard .num-pad { background: none; padding: 0; }
.ls2-root .ls2-srhide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.ls2-root .label-number { position: relative; min-height: 96px; display: flex; justify-content: center; gap: 10px; margin: 0 0 14px; }
.ls2-root .label-number label.number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 84px; margin: 0; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 2px solid var(--ls2-line-strong); color: var(--ls2-ink); font-family: var(--ls2-font-display); font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); }
.ls2-root .label-number label.number:has(span) { border-color: var(--ls2-primary); box-shadow: 0 0 0 3px var(--ls2-primary-soft), inset 0 2px 6px rgba(0, 0, 0, .25); }
.ls2-root .key-pad.box__keyboard .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 !important; }
.ls2-root .key-pad.box__keyboard .row > div { padding: 0 !important; margin: 0 !important; max-width: none !important; flex: none !important; width: auto !important; }
.ls2-root .key-pad.box__keyboard .btn { width: 100%; min-height: 64px; margin: 0; border-radius: var(--ls2-radius-sm); border: 1px solid var(--ls2-line-strong) !important; background: var(--ls2-paper-2) !important; color: var(--ls2-ink) !important; font-family: var(--ls2-font-display); font-size: 28px; font-weight: 700; box-shadow: var(--ls2-shadow); background-image: none !important; display: inline-flex; align-items: center; justify-content: center; }
.ls2-root .key-pad.box__keyboard .btn:hover { border-color: var(--ls2-primary-line) !important; background: var(--ls2-primary-soft) !important; }
.ls2-root .key-pad.box__keyboard .btn:active { transform: translateY(1px); }
.ls2-root .key-pad.box__keyboard .btn[data-id="delete"] { background: var(--ls2-bad-soft) !important; border-color: color-mix(in srgb, var(--ls2-bad) 45%, transparent) !important; color: var(--ls2-bad-ink) !important; font-size: 22px; }
.ls2-root .key-pad.box__keyboard .btn-cancle-last-add-num, .ls2-root .key-pad.box__keyboard .btn-reset-lottery { background: var(--ls2-bg-2) !important; font-family: var(--ls2-font); font-size: 13.5px; font-weight: 700; line-height: 1.2; flex-direction: column; gap: 0; }
.ls2-root .key-pad.box__keyboard .btn-cancle-last-add-num span, .ls2-root .key-pad.box__keyboard .btn-reset-lottery span { display: block; }
.ls2-root .key-pad.box__keyboard .btn-blank { visibility: hidden; }
/* รายการ (#lottery_list แถว .d-flex ที่ JS สร้างจาก template) */
.ls2-cart__cols { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--ls2-muted); padding: 0 4px 6px; border-bottom: 1px solid var(--ls2-line); margin-bottom: 8px; }
.ls2-root #lottery_list { display: block; }
.ls2-root #lottery_list > .d-flex { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px solid var(--ls2-line); }
.ls2-root #lottery_list > .d-flex h1 { margin: 0; font-family: var(--ls2-font-display); font-size: 32px; font-weight: 700; letter-spacing: .12em !important; color: var(--ls2-ink); font-variant-numeric: tabular-nums; }
.ls2-root #lottery_list .input-group { width: 160px !important; flex: none; display: flex; align-items: stretch; }
.ls2-root #lottery_list .input-group .form-control.lottery_amount { min-height: 52px; font-family: var(--ls2-font-display); font-size: 22px; font-weight: 700; text-align: center !important; background: var(--ls2-paper-2) !important; color: var(--ls2-ink) !important; border: 1px solid var(--ls2-line-strong) !important; border-right: 0 !important; border-radius: var(--ls2-radius-xs) 0 0 var(--ls2-radius-xs); }
.ls2-root #lottery_list .input-group .form-control.lottery_amount:focus { border-color: var(--ls2-primary) !important; box-shadow: 0 0 0 3px var(--ls2-primary-soft); }
.ls2-root #lottery_list .input-group-text { background: var(--ls2-bg-2) !important; border: 1px solid var(--ls2-line-strong) !important; color: var(--ls2-ink) !important; font-size: 15px; font-weight: 700; border-radius: 0 var(--ls2-radius-xs) var(--ls2-radius-xs) 0; min-width: 48px; justify-content: center; }
.ls2-cart__empty { display: none; margin: 0 0 8px; padding: 16px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px dashed var(--ls2-line-strong); color: var(--ls2-muted); font-size: 15px; text-align: center; }
.ls2-root #lottery_list:not(:has(> .d-flex)) + .ls2-cart__empty { display: block; }
.ls2-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.ls2-total { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px solid var(--ls2-line); }
.ls2-total span { font-size: 14px; color: var(--ls2-muted); }
.ls2-total b { font-family: var(--ls2-font-display); font-size: 22px; line-height: 1.15; color: var(--ls2-ink); font-variant-numeric: tabular-nums; }
.ls2-total--pay { border-color: var(--ls2-primary-line); background: var(--ls2-primary-soft); }
.ls2-total--pay b { color: var(--ls2-ink); }
/* ปุ่ม .triggerSendLottery ตอนส่ง: JS ตั้ง disabled + ข้อความ "กำลังโหลด…" */
.ls2-root .triggerSendLottery[disabled] { opacity: .75; }

/* ---------- รางวัล 6 แบบ / ผล ---------- */
.ls2-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .ls2-prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ls2-prizes li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px solid var(--ls2-line); border-left: 3px solid var(--ls2-primary); min-height: 84px; }
.ls2-prizes__name { font-size: 16px; font-weight: 700; }
.ls2-prizes li small { font-size: 13px; color: var(--ls2-muted); line-height: 1.35; }
.ls2-prizes li b { font-family: var(--ls2-font-display); font-size: 18px; color: var(--ls2-accent-ink); margin-top: auto; }
.ls2-prizes--result li { border-left-color: var(--ls2-good); }
.ls2-prizes__digits { font-family: var(--ls2-font-display); font-size: 30px; font-weight: 700; letter-spacing: .12em; color: var(--ls2-ink); line-height: 1.1; margin: 4px 0 2px; }
.ls2-prizes__digits.is-empty { color: var(--ls2-faint); letter-spacing: 0; }
.ls2-result__num { font-family: var(--ls2-font-display); font-size: clamp(48px, 16vw, 72px); font-weight: 700; letter-spacing: .18em; text-align: center; margin: 4px 0 14px; padding: 16px 12px; border-radius: var(--ls2-radius-sm); background: var(--ls2-bg); border: 1px solid var(--ls2-good); color: var(--ls2-ink); box-shadow: 0 0 0 4px var(--ls2-good-soft); }
.ls2-result__wait { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--ls2-radius-sm); background: var(--ls2-warn-soft); border: 1px solid color-mix(in srgb, var(--ls2-warn) 35%, transparent); font-size: 15.5px; }
.ls2-result__wait i { font-size: 26px; color: var(--ls2-warn); }
.ls2-result__wait b { display: block; font-size: 17px; }
.ls2-result__wait span { color: var(--ls2-muted); }

/* ---------- รายการที่แทง (poy) ---------- */
.ls2-poy { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .ls2-poy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ls2-poy { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ls2-poy__item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--ls2-radius); background: var(--ls2-paper); background-image: var(--ls2-surface); border: 1px solid var(--ls2-line); border-left: 4px solid var(--ls2-line-strong); box-shadow: var(--ls2-shadow); }
.ls2-poy__item.is-wait { border-left-color: var(--ls2-warn); }
.ls2-poy__item.is-win, .ls2-poy__item.is-win_pending { border-left-color: var(--ls2-good); }
.ls2-poy__item.is-lose { border-left-color: var(--ls2-faint); opacity: .92; }
.ls2-poy__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls2-poy__no { font-size: 14px; color: var(--ls2-muted); font-weight: 700; }
.ls2-poy__num { font-family: var(--ls2-font-display); font-size: 40px; font-weight: 700; letter-spacing: .16em; line-height: 1.1; color: var(--ls2-ink); }
.ls2-poy__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15.5px; color: var(--ls2-ink); }
.ls2-poy__meta i { color: var(--ls2-primary-ink); margin-right: 4px; }
.ls2-poy__win { padding: 8px 12px; border-radius: var(--ls2-radius-xs); background: var(--ls2-good-soft); color: var(--ls2-good-ink); font-weight: 700; font-size: 15.5px; }
.ls2-poy__dates { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ls2-muted); }
.ls2-poy__id { color: var(--ls2-faint); }
.ls2-root .ls2-poy__save { min-height: 48px; font-size: 16px; margin-top: 2px; }
.ls2-empty { display: grid; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; border-radius: var(--ls2-radius); background: var(--ls2-paper); border: 1px dashed var(--ls2-line-strong); color: var(--ls2-muted); font-size: 16px; }
.ls2-empty i { font-size: 40px; color: var(--ls2-faint); }
.ls2-empty p { margin: 0; line-height: 1.5; }
.ls2-empty b { color: var(--ls2-ink); font-size: 18px; }
.ls2-root .ls2-empty .ls2-btn { width: auto; min-width: 220px; }

/* ---------- หน้าเลือกประเทศ (lottoset) ---------- */
.ls2-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .ls2-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ls2-hub__card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--ls2-radius); background: var(--ls2-paper); background-image: var(--ls2-surface); border: 1px solid var(--ls2-line); box-shadow: var(--ls2-shadow); }
.ls2-root .ls2-hub__main { display: flex; align-items: center; gap: 14px; min-height: 64px; color: var(--ls2-ink); }
.ls2-hub__flag { width: 56px; height: 42px; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px var(--ls2-line-strong); }
.ls2-hub__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ls2-hub__names b { font-family: var(--ls2-font-display); font-size: 20px; font-weight: 700; }
.ls2-hub__names small { font-size: 14px; color: var(--ls2-muted); }
.ls2-hub__chev { color: var(--ls2-faint); }
.ls2-hub__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ls2-root .ls2-hub__actions .ls2-btn { min-height: 52px; font-size: 16px; }

/* ---------- แถบล่างติดจอ (มือถือ, หน้าแทง) ---------- */
.ls2-bar { position: fixed; left: 0; right: 0; bottom: var(--ls2-footer-h); z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ls2-bar-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--ls2-line-strong); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.ls2-bar__info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ls2-bar__info span { font-size: 13.5px; color: var(--ls2-muted); }
.ls2-bar__info b { font-family: var(--ls2-font-display); font-size: 20px; color: var(--ls2-ink); line-height: 1.15; }
.ls2-root .ls2-bar__btn { min-height: 56px; }
@media (min-width: 992px) { .ls2-bar { display: none; } }

/* ============================================================================================
   นอก root (body.ls2): swal2 ยืนยัน (tang_*.js สร้าง html สรุป) + modal สลาก/กติกา — อ่านง่าย ตัวใหญ่
   ============================================================================================ */
/* SweetAlert2 v6.6.6 ของหน้าเดิม (footer.php:26): popup = .swal2-modal, ปุ่ม = .swal2-buttonswrapper > .swal2-styled (ไม่มี .swal2-popup/.swal2-actions) ;
   theme-override.css ตั้งกระดาษสว่าง + mobile column-reverse → ต้องทับด้วย body.ls2 (specificity สูงกว่า) ให้พื้น/ตัวอักษรตามธีม และปุ่มหลัก "ยืนยันการแทง" อยู่บนเสมอ เต็มกว้าง ≥ 52 px */
body.ls2 .swal2-modal, body.ls2 .swal2-popup { font-family: var(--ls2-font) !important; font-size: 17px !important; border-radius: var(--ls2-radius) !important; background: var(--ls2-paper) !important; color: var(--ls2-ink) !important; border: 1px solid var(--ls2-line-strong); box-shadow: var(--ls2-shadow-lg) !important; padding: 24px 20px 20px !important; }
body.ls2 .swal2-title { font-family: var(--ls2-font-display) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ls2-ink) !important; }
body.ls2 .swal2-content, body.ls2 .swal2-html-container { font-size: 18px !important; line-height: 1.6 !important; color: var(--ls2-ink) !important; }
body.ls2 .swal2-content strong, body.ls2 .swal2-html-container strong { font-family: var(--ls2-font-display); font-size: 24px; letter-spacing: .12em; color: var(--ls2-primary-ink); }
body.ls2 .swal2-buttonswrapper, body.ls2 .swal2-actions { display: flex; flex-direction: column !important; flex-wrap: nowrap; gap: 10px; margin-top: 18px !important; }
body.ls2 .swal2-buttonswrapper .swal2-styled, body.ls2 .swal2-actions .swal2-styled { width: 100%; margin: 0 !important; min-height: 52px !important; font-family: var(--ls2-font) !important; font-size: 17px !important; font-weight: 700 !important; border-radius: var(--ls2-radius-sm) !important; box-shadow: none !important; }
body.ls2 .swal2-buttonswrapper .swal2-confirm, body.ls2 .swal2-actions .swal2-confirm { order: 1; background: var(--ls2-primary) !important; color: #fff !important; }
body.ls2 .swal2-buttonswrapper .swal2-cancel, body.ls2 .swal2-actions .swal2-cancel { order: 2; background: var(--ls2-bg-2) !important; color: var(--ls2-ink) !important; border: 1px solid var(--ls2-line-strong) !important; }
body.ls2 .modal-content { background: var(--ls2-paper); color: var(--ls2-ink); border: 1px solid var(--ls2-line-strong); border-radius: var(--ls2-radius) !important; font-size: 16px; }
body.ls2 .modal-header, body.ls2 .modal-footer { border-color: var(--ls2-line); }
body.ls2 .modal-header.bg-danger { background: var(--ls2-primary) !important; }
body.ls2 .modal-content .close { color: var(--ls2-ink); text-shadow: none; opacity: .9; }
body.ls2 .modal-content .table { color: var(--ls2-ink); font-size: 16px; }
body.ls2 .modal-content .table td, body.ls2 .modal-content .table th { border-color: var(--ls2-line) !important; }
body.ls2 .modal-footer .btn { min-height: 48px; font-size: 16px; font-weight: 700; border-radius: var(--ls2-radius-xs); }
body.ls2 .modal-footer .btn-danger { background: var(--ls2-primary) !important; border-color: var(--ls2-primary) !important; }
@media (prefers-reduced-motion: reduce) { .ls2-root *, body.ls2 .swal2-modal * { transition: none !important; animation: none !important; } }

/* R34h (ผู้ทดสอบ ข้อ 8): แถบล่างอยู่เหนือเนื้อหา ต่ำกว่า header/เมนูของเว็บ (1020/1023) ; ไม่ตัดคำทีละตัวอักษร */
.ls2-root .ls2-bar { z-index: 40; overflow-wrap: normal; }
.ls2-root #lottery_list, .ls2-root .ls2-cart { position: static; }
@media (min-width: 992px) { .ls2-root .ls2-grid .ls2-cart { position: sticky; z-index: 2; } }

/* ============ R34k ข้อ 6 (ผู้ทดสอบรอบ 2): ลบทีละแถว (ถังขยะที่ lottoset-v2-flow.js §4 แทรกท้ายแถว) + "ล้างทั้งหมด" ในการ์ดรายการ ============ */
.ls2-root #lottery_list > .d-flex { gap: 8px; }
.ls2-root #lottery_list > .d-flex .input-group { margin-left: auto; }
.ls2-root .ls2-del { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.14); color: #ff6b6b; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; padding: 0; }
.ls2-root .ls2-del:hover { background: rgba(255, 107, 107, 0.26); }
.ls2-root .ls2-del:focus-visible { outline: 3px solid #ff6b6b; outline-offset: 2px; }
.ls2-root.ls2-theme-red .ls2-del, .ls2-theme-red .ls2-root .ls2-del { color: #b91c1c; border-color: rgba(185, 28, 28, 0.35); background: rgba(185, 28, 28, 0.10); }
.ls2-root .ls2-cart__actions { margin: 4px 0 10px; }
.ls2-root .ls2-cart__actions .ls2-btn { width: 100%; }
@media (max-width: 420px) { .ls2-root #lottery_list > .d-flex h1 { font-size: 26px; letter-spacing: .08em !important; } .ls2-root #lottery_list .input-group { width: 124px !important; } }