/* ═══════════════════════════════════════════════════════════════
   theme2.css — ธีมใหม่ member "แผงหวย" (vibrant ticket theme)
   ใช้คู่กับ layout views/main2.ejs เท่านั้น (โหลดทับ core.css/custom.css)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --lt-ink: #2b2140;
  --lt-ink-soft: #7a7090;
  --lt-canvas: #f5f2f8;
  --lt-card: #ffffff;
  --lt-chili: #f03e52;
  --lt-tangerine: #ff7a3c;
  --lt-marigold: #ffb020;
  --lt-leaf: #0e9f6e;
  /* สีตัวเลขบวก/ลบ ชุดเดียวทั้งระบบ:
     พื้นสว่างใช้ chili/leaf, พื้นเข้ม (แถบสรุป .lt-rpt-total/.lt-rp-total/.lt-path-total/tfoot) ใช้เฉดสว่างขึ้น
     ห้ามใส่ hex แดง/เขียวใหม่ตรง ๆ ให้ใช้ตัวแปร 4 ตัวนี้ */
  --lt-neg: var(--lt-chili);
  --lt-pos: var(--lt-leaf);
  --lt-neg-dark: #ff6b74;
  --lt-pos-dark: #6ee7b7;
  --lt-line: rgba(43, 33, 64, 0.1);
  --lt-shadow: 0 2px 10px rgba(43, 33, 64, 0.08);
  --lt-chrome: linear-gradient(115deg, var(--lt-chili), var(--lt-tangerine) 55%, var(--lt-marigold));
  --lt-font-display: "Mitr", "Anuphan", sans-serif;
  --lt-font-body: "Anuphan", "Mitr", sans-serif;
  /* Anuphan รองรับ tabular figures — Chakra Petch ไม่รองรับ ทำตัวเลขเต้นทุกวินาที */
  --lt-font-digit: "Anuphan", sans-serif;
}

/* .text-danger/.text-success ของ Bootstrap (#ff4c51 / #28c76f) ที่ตารางเดิมใส่ให้ตัวเลข ให้เป็นเฉดเดียวกับการ์ด theme2
   วางไว้ต้นไฟล์เพื่อให้กฎเฉพาะทาง (แถบพื้นเข้ม) ที่อยู่ถัดลงไปทับได้ */
.lt-body .text-danger { color: var(--lt-neg) !important; }
.lt-body .text-success { color: var(--lt-pos) !important; }
/* บนแถบพื้นเข้มทุกชนิดใช้เฉดสว่าง (specificity เท่ากฎข้างบนแต่มาทีหลังจึงชนะ) */
.lt-rpt-total .text-danger, .lt-rp-total .text-danger, .lt-path-total .text-danger, .lt-num-total .text-danger { color: var(--lt-neg-dark) !important; }
.lt-rpt-total .text-success, .lt-rp-total .text-success, .lt-path-total .text-success, .lt-num-total .text-success { color: var(--lt-pos-dark) !important; }

body.lt-body {
  background: var(--lt-canvas);
  color: var(--lt-ink);
  font-family: var(--lt-font-body);
}
/* หัวข้อใช้ font เดียวกับเนื้อหา (ต่างที่น้ำหนัก) — Mitr เหลือเฉพาะชื่อแบรนด์บน header */
.lt-body h1, .lt-body h2, .lt-body h3, .lt-body h4, .lt-body h5, .lt-body h6,
.lt-body .modal-title {
  font-family: var(--lt-font-body);
  font-weight: 600;
  color: var(--lt-ink);
}
/* ตัวเลขที่เดินตลอดเวลา (countdown ทุกหน้า) — เลขกว้างเท่ากัน ไม่ทำ layout ขยับ */
.lt-body .countdown {
  font-family: var(--lt-font-digit);
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* หัวตารางเข้ม (จาก custom.css เดิม) → ไล่เฉดสีแบรนด์ ให้มีสีสันแทนสีทึบ */
.lt-body .table-custom-color {
  --bs-table-bg: var(--lt-ink);
  --bs-table-border-color: rgba(255, 255, 255, 0.2);
}
.lt-body thead.table-custom-color th,
.lt-body tfoot.table-custom-color td {
  background-image: linear-gradient(90deg, var(--lt-chili), #f0602c 55%, #d97706);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22);
  font-size: 1rem;
}
.lt-body thead.table-custom-color th:first-child { border-start-start-radius: 10px; }
.lt-body thead.table-custom-color th:last-child { border-start-end-radius: 10px; }
/* Vuexy ใส่กรอบขาว+เงาให้ tab-content ที่ตามหลัง nav-pills (core.css `.nav-pills ~ .tab-content`)
   — ทำกล่องมุมเหลี่ยมโผล่หลังการ์ด ปิดทิ้งทั้งธีม */
.lt-body .nav-pills ~ .tab-content {
  border: 0 !important;
  box-shadow: none !important;
}

/* ── Header (chrome ไล่เฉด + ขอบหยักแบบรอยฉีกตั๋ว) ─────────────── */
.lt-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--lt-chrome);
  color: #fff;
  box-shadow: 0 2px 14px rgba(240, 62, 82, 0.3);
}
.lt-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 7px;
  background-image: radial-gradient(circle at 6px 7px, var(--lt-canvas) 4px, transparent 4.5px);
  background-size: 14px 8px;
  background-repeat: repeat-x;
  pointer-events: none;
}
/* grid 3 คอลัมน์: ซ้าย/ขวากว้างเท่ากัน → nav กลางนิ่ง ไม่ขยับตามความกว้างชิปยอดเงิน */
.lt-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1rem 0.8125rem;
}
.lt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  min-width: 0;
  grid-column: 1;
  justify-self: start;
}
.lt-brand:hover { color: #fff; }
.lt-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px;
}
.lt-brand-name {
  font-family: var(--lt-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* nav desktop — วางบนแทร็กสีหมึกโปร่ง ให้ตัวขาวอ่านออกตลอดช่วงไล่เฉด (contrast ≥ 4.8:1)
   โดยไม่ต้องลดความสดของ gradient */
.lt-nav {
  align-items: center;
  gap: 0.15rem;
  grid-column: 2;
  background: rgba(43, 33, 64, 0.5);
  border-radius: 999px;
  padding: 4px;
}
.lt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(43, 33, 64, 0.3);
}
.lt-nav-link i { opacity: 0.85; }
.lt-nav-link:hover,
.lt-nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
}
.lt-nav-link.active {
  background: #fff;
  color: var(--lt-chili);
  box-shadow: 0 2px 8px rgba(43, 33, 64, 0.22);
  text-shadow: none;
}
.lt-nav-link.active i { opacity: 1; }
.lt-nav-link .news-count-new {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 0.6rem;
  padding: 0.2em 0.42em;
  line-height: 1;
  border: 2px solid #fff;
}
.lt-nav .dropdown-menu {
  font-family: var(--lt-font-body);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(43, 33, 64, 0.18);
}

/* tools ขวา */
.lt-header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: 3;
  justify-self: end;
}
.lt-clock {
  font-family: var(--lt-font-digit);
  font-weight: 600;
  font-size: 0.85rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  background: rgba(43, 33, 64, 0.5);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.lt-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--lt-ink);
  border-radius: 999px;
  padding: 0.32rem 0.8rem 0.32rem 0.6rem;
  box-shadow: 0 2px 6px rgba(43, 33, 64, 0.15);
  cursor: pointer;
  max-width: 40vw;
}
.lt-balance:hover { color: var(--lt-ink); }
.lt-balance i { color: var(--lt-chili); }
.lt-balance .user-credit {
  font-family: var(--lt-font-digit);
  font-weight: 600;
  font-size: 0.9rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* จองพื้นที่ไว้ กันชิปหด/ขยายตอนสลับ spinner ↔ ตัวเลข */
  min-width: 4.5rem;
  text-align: center;
}
.lt-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.lt-bell:hover { color: #fff; background: rgba(255, 255, 255, 0.28); }
.lt-bell .news-count-new {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.6rem;
  padding: 0.2em 0.42em;
  line-height: 1;
  border: 2px solid #fff;
}
.lt-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lt-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.lt-avatar-btn:hover { color: #fff; }
.lt-user-dropdown {
  font-family: var(--lt-font-body);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(43, 33, 64, 0.18);
  min-width: 230px;
}

/* ── Main ──────────────────────────────────────────────────────── */
.lt-main {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
  min-height: calc(100vh - 220px);
}

/* ── Bottom tab bar (มือถือ) ───────────────────────────────────── */
.lt-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--lt-line);
  box-shadow: 0 -4px 18px rgba(43, 33, 64, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
}
.lt-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0 0.55rem;
  color: #8a80a0;
  font-size: 0.68rem;
  font-weight: 500;
}
.lt-tab i { font-size: 1.15rem; }
.lt-tab:hover { color: var(--lt-ink-soft); }
.lt-tab.active { color: var(--lt-chili); }
.lt-tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--lt-chrome);
}
.lt-tab .news-count-new {
  position: absolute;
  top: 2px;
  left: calc(50% + 6px);
  font-size: 0.58rem;
  padding: 0.2em 0.4em;
  line-height: 1;
  border: 2px solid #fff;
}
@media (max-width: 991.98px) {
  body.lt-body { padding-bottom: 72px; }
}

/* ── Footer ────────────────────────────────────────────────────── */
.lt-footer {
  text-align: center;
  color: var(--lt-ink-soft);
  font-size: 0.8rem;
  padding: 1rem 0 1.25rem;
}

/* ── ช่องค้นหา ─────────────────────────────────────────────────── */
.lt-search-wrap { margin-bottom: 0.5rem; }
.lt-search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--lt-card);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  box-shadow: var(--lt-shadow);
  max-width: 620px;
  margin: 0 auto;
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lt-search:focus-within {
  border-color: var(--lt-chili);
  box-shadow: 0 4px 16px rgba(240, 62, 82, 0.16);
}
.lt-search i { color: var(--lt-ink-soft); }
.lt-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lt-ink);
  font-size: 0.95rem;
  font-family: var(--lt-font-body);
}
.lt-search input::placeholder { color: var(--lt-ink-soft); }

/* ── หัวหมวดหวย ────────────────────────────────────────────────── */
.lt-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem 0.25rem 0.35rem;
  font-family: var(--lt-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--lt-ink);
}
.lt-group-chip {
  flex: none;
  width: 11px;
  height: 24px;
  border-radius: 4px;
  background-color: var(--lt-accent, var(--lt-chili));
}
.lt-group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lt-line);
}
.lt-group-row { margin-bottom: 0.8rem; }

/* ── การ์ดตั๋วหวย (signature) ──────────────────────────────────── */
.lt-ticket-link { display: block; height: 100%; }
.lt-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--lt-card);
  border: 1px solid var(--lt-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a:not(.disabled) .lt-ticket:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(43, 33, 64, 0.14);
}
/* แถบ accent (สีจากหลังบ้านต่อกลุ่มหวย) — flex:none กัน parent ที่เป็น flex column บีบจนหาย */
.lt-ticket-band {
  flex: none;
  height: 5px;
  background-color: var(--lt-accent, var(--lt-chili));
}
.lt-ticket-body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  flex: 1;
}
.lt-ticket-flag {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lt-canvas);
  border-radius: 12px;
}
.lt-ticket-flag img {
  max-width: 38px;
  max-height: 38px;
}
.lt-ticket-info { min-width: 0; flex: 1; }
.lt-ticket .lottery-name {
  margin: 0;
  font-family: var(--lt-font-body);
  font-weight: 600;
  font-size: 0.95rem !important;
  line-height: 1.25;
  color: var(--lt-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lt-ticket-date {
  font-size: 0.75rem;
  color: var(--lt-ink-soft);
  margin-top: 0.1rem;
  white-space: nowrap;
}
/* เส้นปรุ + รอยบากสองข้าง */
.lt-ticket-tear {
  position: relative;
  height: 0;
  border-top: 2px dashed rgba(43, 33, 64, 0.14);
  margin: 0 0.75rem;
}
.lt-ticket-tear::before,
.lt-ticket-tear::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lt-canvas);
  box-shadow: inset 0 1px 2px rgba(43, 33, 64, 0.08);
}
.lt-ticket-tear::before { left: calc(-0.75rem - 7px); }
.lt-ticket-tear::after { right: calc(-0.75rem - 7px); }
.lt-ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  padding: 0.5rem 0.75rem 0.6rem;
}
/* ชิป countdown ตัวเลขสไตล์ป้ายไฟ */
.lt-countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--lt-ink);
  color: #cfc8e0;
  border-radius: 8px;
  padding: 0.18rem 0.5rem;
  font-family: var(--lt-font-digit);
  font-weight: 600;
  font-size: 0.78rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lt-countdown-chip .text-close-time { color: var(--lt-marigold); }
.lt-countdown-chip .text-open-time { color: #cfc8e0; }
/* ป้ายเวลาเปิด/ปิดรับ */
.lt-ticket .open-and-close-time {
  background: rgba(14, 159, 110, 0.12);
  color: var(--lt-leaf);
  font-family: var(--lt-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}
/* สถานะปิดรับ/ยังไม่เปิด (JS toggle .bg-light .text-muted บน .card) */
.lt-ticket.bg-light {
  background: #fbfafc !important;
  filter: grayscale(1);
  opacity: 0.82;
}
a.disabled .lt-ticket:hover { transform: none; }
.lt-ticket .text-not-open {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
}

/* แถบพับ "หวยอื่นที่ยังไม่เปิดให้คุณ" ท้ายหน้า /lottery + การ์ดล็อกข้างใน (โครง summary เดียวกับ .lt-gc-more ของ company) */
.lt-locked {
  border: 1.5px dashed var(--lt-line);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
  background: #fff;
  margin: 0.4rem 0 1rem;
}
.lt-locked summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lt-ink-soft);
  user-select: none;
}
.lt-locked summary::-webkit-details-marker { display: none; }
.lt-locked summary > i { font-size: 0.7rem; color: #8a80a0; transition: transform 0.15s ease; }
.lt-locked[open] summary > i { transform: rotate(90deg); }
.lt-locked-title i { font-size: 0.75rem; margin-inline-end: 0.15rem; }
.lt-locked-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lt-ink-soft);
  background: #f1eef6;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.lt-locked-note { font-size: 0.72rem; font-weight: 600; color: #b9b2c9; margin-inline-start: auto; }
.lt-locked-body { padding-top: 0.6rem; }
.lt-locked-body .lt-group-row:last-child { margin-bottom: 0; }
.lt-group-head--locked { font-size: 0.9rem; }
.lt-group-head--locked .lt-group-chip { background: #c9c2d6; }
/* การ์ดล็อกไม่ใช่ลิงก์: ไม่ยกตัวตอน hover, เคอร์เซอร์ปกติ, ไม่มีป้าย "ดูสถิติย้อนหลัง" */
.lt-ticket--locked,
.lt-ticket--locked:hover { transform: none; cursor: default; opacity: 0.7; }
.lt-ticket--locked .lt-ticket-band { background-color: #c9c2d6; }
.lt-ticket--locked .lt-countdown-chip i { color: #8a80a0; }

/* empty state ค้นหาไม่เจอ */
.lt-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--lt-ink-soft);
}
.lt-empty-ico { font-size: 2.4rem; margin-bottom: 0.6rem; color: var(--lt-marigold); }
.lt-empty-title {
  font-family: var(--lt-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--lt-ink);
}
.lt-empty-hint { font-size: 0.85rem; margin-top: 0.2rem; }

/* จอแคบมาก: ลดขนาดโซนเวลา */
@media (max-width: 400px) {
  .lt-countdown-chip { font-size: 0.68rem; padding: 0.15rem 0.4rem; }
  .lt-ticket .open-and-close-time { font-size: 0.64rem; padding: 0.25rem 0.4rem; }
  .lt-ticket .lottery-name { font-size: 0.88rem !important; }
}

/* ── Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .lottery-round { animation: ltRise 0.35s ease backwards; }
  .lottery-round:nth-child(1) { animation-delay: 0.03s; }
  .lottery-round:nth-child(2) { animation-delay: 0.06s; }
  .lottery-round:nth-child(3) { animation-delay: 0.09s; }
  .lottery-round:nth-child(4) { animation-delay: 0.12s; }
  .lottery-round:nth-child(5) { animation-delay: 0.15s; }
  .lottery-round:nth-child(6) { animation-delay: 0.18s; }
  .lottery-round:nth-child(n + 7) { animation-delay: 0.21s; }
}
@keyframes ltRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* focus ให้เห็นชัดบนคีย์บอร์ด */
.lt-body a:focus-visible,
.lt-body button:focus-visible {
  outline: 2px solid var(--lt-chili);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Components กลาง (ย้ายมาจาก lottery/bet.ejs — ใช้ซ้ำได้ทุกหน้าในธีมนี้)
   สีที่ผูกกับค่าหลังบ้านอ่านจาก CSS var ที่หน้านั้น ๆ กำหนดไว้ใน :root
   --lt-accent / --lt-accent-contrast / --lt-help / --lt-help-contrast / --lt-amount
   ═══════════════════════════════════════════════════════════════ */
/* การ์ดยืนยันรายการ (bg ขาวปกติ) */
/* ── การ์ด "บิลที่เพิ่มแล้ว" หน้า bet (#wrapListNumber, render โดย bet.js renderBillGroup) — เฉพาะ member ──
   สีตัวเลข/ยอดยังมาจาก colorSetting ผ่านคลาสเดิม (.text-bet-number, .text-bet-amount, .text-decoration-line-through ฯลฯ) */
.lt-bl-card {
  background: var(--lt-card);
  border: 1px solid var(--lt-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lt-shadow);
}
.lt-bl-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-bottom: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-bl-head .lt-ticket-flag { width: 38px; height: 38px; border-radius: 10px; }
.lt-bl-head .lt-ticket-flag img { max-width: 30px; max-height: 30px; }
.lt-bl-head-info { flex: 1; min-width: 0; }
.lt-bl-head-name { display: flex; flex-wrap: wrap; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.lt-bl-head-date { display: block; font-size: 0.78rem; color: var(--lt-ink-soft); }
.lt-bl-count {
  flex: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--lt-accent, var(--lt-chili));
  background: rgba(43, 33, 64, 0.07); /* ไม่ใช้ color-mix — การ์ดนี้ถูก html2canvas แคป (ดูหมายเหตุใน bet.ejs) */
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.lt-bl-cam {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--lt-canvas);
  color: var(--lt-ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.lt-bl-cam:hover { background: var(--lt-ink); color: #fff; }
.lt-bl-body { padding: 0 0.8rem; }
.lt-bl-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 0.6rem 0.8rem;
  align-items: center;
  padding: 0.65rem 0;
}
.lt-bl-row + .lt-bl-row { border-top: 1px dashed rgba(43, 33, 64, 0.12); }
.lt-bl-type { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.lt-bl-type-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.lt-bl-sides { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lt-bl-side {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.72rem;
  background: var(--lt-canvas);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
  white-space: nowrap;
}
.lt-bl-side i { font-style: normal; color: var(--lt-ink-soft); }
.lt-bl-side b { font-size: 0.82rem; font-feature-settings: "tnum"; }
.lt-bl-nums { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.lt-bl-num {
  display: inline-block;
  min-width: 2.35em;
  text-align: center;
  padding: 0.18rem 0.45rem;
  border-radius: 8px;
  background: rgba(43, 33, 64, 0.06);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-bl-num.text-decoration-line-through { background: rgba(240, 62, 82, 0.08); }
.lt-bl-num.text-bet-number-payout-half { background: rgba(255, 159, 67, 0.14); }
.lt-bl-num.text-bet-number-not-active-or-payout-half { background: rgba(255, 159, 67, 0.14); }
.lt-bl-meta { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.lt-bl-sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.lt-bl-sum i { font-style: normal; font-size: 0.68rem; color: var(--lt-ink-soft); }
.lt-bl-sum b { font-size: 0.88rem; font-feature-settings: "tnum"; }
.lt-bl-del {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(240, 62, 82, 0.1);
  color: var(--lt-chili);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.lt-bl-del:hover { background: var(--lt-chili); color: #fff; }
/* มือถือ: บรรทัดแรก = ประเภท+ราคา (ซ้าย) / รวม+ลบ (ขวา), บรรทัดสอง = เลขเต็มความกว้าง (DOM เรียง type, nums, meta จึงต้องกำหนด grid-row เอง) */
@media (max-width: 575.98px) {
  .lt-bl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem 0.6rem; }
  .lt-bl-type { grid-row: 1; grid-column: 1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
  .lt-bl-meta { grid-row: 1; grid-column: 2; }
  .lt-bl-nums { grid-row: 2; grid-column: 1 / -1; }
}
.lt-confirm-card { overflow: hidden; }
.lt-confirm-foot { padding: 0.75rem 1.5rem 1.5rem; }
.lt-confirm-sum {
  background: #f5f2f8;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.lt-confirm-sum-tear {
  border-top: 2px dashed rgba(43, 33, 64, 0.2);
  margin: 0.5rem 0;
}
.lt-confirm-total {
  font-size: 1.15rem;
  font-weight: 700;
}
.lt-confirm-total span:last-child,
.lt-confirm-sum .fw-bold {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* รายการยืนยัน (bet.ejs "กรุณายืนยันรายการ") — แทนตาราง #tableNumberAllConfirm ที่ซ่อนเป็น data source
   กล่องเลื่อน .lt-cf-scroll ถือ id cardTableNumberAllConfirm ให้ PerfectScrollbar ของ bet.js */
.lt-cf-scroll { position: relative; overflow: auto; padding-right: 2px; }
.lt-cf-group + .lt-cf-group { margin-top: 0.75rem; }
.lt-cf-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem 0.35rem;
  background: var(--lt-card);
  border-bottom: 2px dashed rgba(43, 33, 64, 0.14);
}
.lt-cf-group-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lt-ink);
}
.lt-cf-group-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--lt-ink-soft);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-cf-group-meta b { color: var(--lt-ink); font-size: 0.82rem; }
.lt-cf-tag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
}
.lt-cf-tag-off { background: rgba(255, 76, 81, 0.12); color: var(--lt-chili); }
.lt-cf-tag-half { background: rgba(255, 159, 67, 0.16); color: #e8890c; }
/* เกินจำกัดต่อเลข/รอบ (โทนม่วง) — แถวถูกตัดออกเหมือนปิดรับ */
.lt-cf-tag-over { background: rgba(109, 91, 208, 0.12); color: #6d5bd0; }
.lt-cf-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.25rem;
}
.lt-cf-row + .lt-cf-row { border-top: 1px dashed rgba(43, 33, 64, 0.1); }
.lt-cf-numwrap { flex: none; min-width: 64px; text-align: center; }
.lt-cf-numwrap .lt-cf-tag { display: block; width: max-content; margin: 3px auto 0; }
.lt-cf-num {
  display: inline-block;
  background: var(--lt-ink);
  color: #fff;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-cf-row.is-half .lt-cf-num { background: var(--lt-tangerine); }
.lt-cf-row.is-off .lt-cf-num { background: #d9d3e4; color: #6f6685; text-decoration: line-through; }
.lt-cf-row.is-over .lt-cf-num { background: #d9d3e4; color: #6f6685; text-decoration: line-through; }
.lt-cf-row.is-off .lt-cf-stats { opacity: 0.55; }
/* 3 คอลัมน์เต็มความกว้าง ตัวเลขชิดขวาให้ตรงกันทุกแถว (เดิม flex เกาะซ้าย พื้นที่กลางแถวว่างบน desktop) */
.lt-cf-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem 0.75rem;
  min-width: 0;
}
.lt-cf-stat { font-size: 0.7rem; color: var(--lt-ink-soft); line-height: 1.25; text-align: end; }
.lt-cf-stat i { font-style: normal; }
.lt-cf-stat b {
  display: block;
  font-size: 0.9rem;
  color: var(--lt-ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-cf-stat.is-disc b { color: var(--lt-chili); }
.lt-cf-del { flex: none; margin-inline-start: 0.4rem; }
/* ปุ่มลบ = span เดิมของ bet.js (clone มาพร้อม data-*) ทำเป็นปุ่มกลมให้กดง่ายบนมือถือ */
.lt-cf-del > span {
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 76, 81, 0.1);
  color: var(--lt-chili) !important;
  font-size: 0.9rem !important;
  transition: background 0.12s ease;
}
.lt-cf-del > span:hover { background: rgba(255, 76, 81, 0.2); }
@media (max-width: 575.98px) {
  .lt-cf-row { gap: 0.5rem; }
  .lt-cf-numwrap { min-width: 56px; }
  .lt-cf-num { font-size: 0.98rem; padding: 0.18rem 0.4rem; }
  .lt-cf-stats { gap: 0.2rem 0.5rem; }
}

/* โมดัลเลขปิดรับ/จ่ายครึ่ง (bet.ejs #modalConfirmBillNumberNotActive + #modalNewNotActiveNumber)
   ใช้เชลล์ .lt-detail-modal + แถว .lt-cf-row ชุดเดียวกับการ์ดยืนยัน — แถบสีแดง (ปิดรับ) / ส้มเมื่อมีแต่เลขจ่ายครึ่ง (.is-half-only) */
.lt-na-modal { --lt-accent: var(--lt-chili); }
.lt-na-modal.is-half-only { --lt-accent: var(--lt-tangerine); }
.lt-na-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}
.lt-na-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(240, 62, 82, 0.12);
  color: var(--lt-chili);
  font-size: 1.1rem;
}
.lt-na-modal.is-half-only .lt-na-icon { background: rgba(255, 122, 60, 0.14); color: var(--lt-tangerine); }
.lt-na-head-text { min-width: 0; }
.lt-na-modal .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--lt-ink); margin: 0 0 0.15rem; }
.lt-na-sub { font-size: 0.8rem; color: var(--lt-ink-soft); line-height: 1.4; }
/* .lt-detail-modal ทำ modal-body เป็น flex column → กล่องเนื้อหาต้องยืดเต็มกว้าง */
.lt-na-body { width: 100%; }
.lt-na-group + .lt-na-group { margin-top: 0.9rem; }
.lt-na-group .lt-cf-group-head { background: var(--bs-modal-bg, #fff); }
.lt-na-group-icon { font-size: 0.85rem; }
.lt-na-group.is-off .lt-na-group-icon { color: var(--lt-chili); }
.lt-na-group.is-half .lt-na-group-icon { color: #e8890c; }
.lt-na-group.is-over .lt-na-group-icon { color: #6d5bd0; }
.lt-na-row { gap: 0.75rem; }
.lt-na-type {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lt-ink);
}
.lt-na-row.is-off .lt-na-type,
.lt-na-row.is-over .lt-na-type { color: #6f6685; text-decoration: line-through; }
.lt-na-stats {
  flex: none;
  display: flex;
  gap: 0.9rem;
}
.lt-na-stat {
  font-size: 0.7rem;
  color: var(--lt-ink-soft);
  line-height: 1.25;
  text-align: end;
}
.lt-na-stat i { font-style: normal; }
.lt-na-stat b {
  display: block;
  font-size: 0.92rem;
  color: var(--lt-ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-na-row.is-off .lt-na-stat b { color: #6f6685; text-decoration: line-through; }
.lt-na-row.is-over .lt-na-stat:not(.is-over) b { color: #6f6685; text-decoration: line-through; }
.lt-na-row.is-over .lt-na-stat.is-over b { color: #6d5bd0; }
.lt-na-stat.is-half b { color: #e8890c; }
.lt-na-stat.is-half b s { color: var(--lt-ink-soft); font-weight: 500; margin-inline-end: 0.15rem; }
/* สรุปท้ายโมดัล (ตัดออก / ยอดที่จะส่ง) — โครง .lt-bd-sum เดียวกับโมดัลรายละเอียดบิล (sticky ล่างตามกฎ .lt-detail-modal .lt-bd-sum) */
.lt-na-sum { margin-top: 0.9rem; }
.lt-na-sum .lt-bd-sum-item small { display: block; font-size: 0.7rem; color: var(--lt-ink-soft); }
.lt-na-sum-cut b { color: var(--lt-chili); text-decoration: line-through; }
.lt-na-sum-send { text-align: end; margin-inline-start: auto; }
.lt-na-sum-send.is-empty b,
.lt-na-sum-send.is-empty small { color: var(--lt-chili); }
.lt-na-modal .modal-footer { padding-top: 0.25rem; }
@media (max-width: 575.98px) {
  .lt-na-row { gap: 0.5rem; }
  .lt-na-type { font-size: 0.8rem; }
  .lt-na-stats { gap: 0.6rem; }
}

/* hero การ์ดหัวหน้า (ตั๋วหวย) */
.lt-bet-hero { padding: 0; }
.lt-bet-hero-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0.9rem;
}
.lt-bet-hero-info { flex: 1; min-width: 0; }
.lt-bet-hero-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.lt-bet-hero-name h6 {
  font-size: 1.02rem;
}
.lt-bet-hero-date {
  display: block;
  font-size: 0.8rem;
  color: #7a7090;
  margin-top: 0.1rem;
}
.lt-bet-hero-count {
  font-size: 0.95rem;
  padding: 0.3rem 0.7rem;
}
.lt-bet-hero-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem 0.75rem;
}
.lt-bet-hero-rate-label { color: #7a7090; white-space: nowrap; }
.lt-bet-hero-foot .form-select { max-width: 300px; }
/* ชิปอัตราจ่ายของอัตราที่เลือก ต่อท้าย select (desktop) — ชิดขวา, ห่อบรรทัดได้ */
.lt-hero-rates {
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.lt-hero-rates-lbl { font-size: 0.72rem; color: #7a7090; margin-right: 0.15rem; white-space: nowrap; }
.lt-hero-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: 999px;
  padding: 0.12rem 0.15rem 0.12rem 0.6rem;
  font-size: 0.74rem;
  color: var(--lt-ink-soft);
  white-space: nowrap;
}
.lt-hero-rate i { font-style: normal; }
.lt-hero-rate b {
  background: #2b2140;
  color: #ffb020;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* แถบแท็บหลัก: ถอดกรอบการ์ด ให้เป็น pill ลอยบนพื้น */
.lt-tabs-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* ล็อกขนาดทุกสถานะ กัน hover ดัน layout */
.lt-tabs-card .tab-menu-category,
.lt-tabs-card .tab-menu-category:hover,
.lt-tabs-card .tab-menu-category:focus {
  padding: 0.55rem 1rem !important;
  border: 0 !important;
}
/* แท็บย่อย: segmented track */
.lt-subtabs {
  background: #f1eef5;
  border-radius: 20px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
}
.lt-subtabs .nav-link,
.lt-subtabs .nav-link:hover,
.lt-subtabs .nav-link:focus {
  margin-right: 0;
  padding: 0.45rem 0.95rem !important;
  border: 0 !important;
}
/* ผลรางวัลย้อนหลังแบบแถบ (แทนตาราง) */
.lt-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.25rem;
}
.lt-result-row + .lt-result-row {
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-result-date {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #7a7090;
  font-weight: 600;
  white-space: nowrap;
}
.lt-result-badge {
  background: var(--lt-accent, var(--lt-chili));
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  padding: 0.18em 0.6em;
  font-weight: 600;
}
.lt-result-groups {
  display: flex;
  gap: 0.5rem;
}
.lt-result-group {
  text-align: center;
  min-width: 72px;
}
.lt-result-lbl {
  display: block;
  font-size: 0.7rem;
  color: #7a7090;
  margin-bottom: 2px;
}
.lt-result-num {
  display: inline-block;
  min-width: 62px;
  background: #f5f2f8;
  border-radius: 8px;
  padding: 0.15rem 0.6rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #2b2140;
}
.lt-result-latest .lt-result-num {
  background: #2b2140;
  color: #ffb020;
  font-size: 1.2rem;
}
.lt-result-latest .lt-result-date { color: #2b2140; }
/* อัตราจ่ายแบบแถบ (แทนตาราง — โครงเดียวกับผลรางวัล) */
.lt-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.25rem;
}
.lt-rate-row + .lt-rate-row {
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-rate-name {
  font-weight: 600;
  color: #2b2140;
  white-space: nowrap;
}
.lt-rate-pay {
  background: #2b2140 !important;
  color: #ffb020 !important;
}
/* เลขตัด-อั้นแบบแถบ (แทนตาราง) */
.lt-limit-row { padding: 0.6rem 0.25rem; }
.lt-limit-row + .lt-limit-row {
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-limit-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.lt-limit-lbl {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2em 0.6em;
  margin-top: 2px;
  white-space: nowrap;
}
.lt-limit-lbl-close { background: rgba(255, 76, 81, 0.12); color: var(--lt-chili); }
.lt-limit-lbl-half { background: rgba(255, 159, 67, 0.16); color: #e8890c; }
.lt-limit-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lt-limit-num {
  border-radius: 6px;
  padding: 0.05rem 0.45rem;
  font-weight: 700;
  font-size: 0.85rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-limit-num-close { color: var(--lt-chili); background: rgba(255, 76, 81, 0.08); }
.lt-limit-num-half { color: #e8890c; background: rgba(255, 159, 67, 0.12); }
.lt-limit-empty { color: #a9a1bd; font-weight: 600; }
/* บิลล่าสุดแบบแถบ (ตารางถูกซ่อน เหลือแค่ตัวแบ่งหน้า) */
.lt-bill-source table { display: none !important; }
/* ตารางถูกซ่อนแล้ว จึงไม่ต้องเลื่อน — .table-responsive ตั้ง overflow-x:auto ซึ่งดัน overflow-y เป็น auto ทำให้มี scrollbar โผล่ */
.lt-bill-source,
.lt-bd-source {
  overflow: visible !important;
  white-space: normal !important;
}
.lt-bill-source .dt-layout-table,
.lt-bd-source .dt-layout-table { margin: 0 !important; }
.lt-bill-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.25rem;
}
.lt-bill-row + .lt-bill-row {
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-bill-info { flex: 1; min-width: 0; }
.lt-bill-code {
  font-weight: 700;
  color: #2b2140;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lt-bill-code .btn-bill-detail:hover { text-decoration: underline; }
.lt-bill-time {
  font-size: 0.75rem;
  color: #7a7090;
  margin-top: 1px;
}
.lt-bill-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  background: #f5f2f8;
  color: #5a5170;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-bill-amount {
  flex: none;
  background: #2b2140;
  color: #ffb020;
  border-radius: 8px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lt-bill-del .btn { padding: 0.25rem 0.4rem; }
/* ตัวแบ่งหน้าของ DataTable ให้เข้าธีม (DataTables 2.x = .dt-paging / .dt-search / .dt-info) */
.lt-bill-source .dt-paging,
.lt-bill-source .dataTables_paginate { padding-top: 0.6rem; }
.lt-bill-source .pagination {
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
  gap: 2px;
}
.lt-bill-source .pagination .page-link {
  border: 0;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
}
.lt-bill-source .pagination .page-item.active .page-link {
  background-color: var(--lt-accent, var(--lt-chili));
  border-color: var(--lt-accent, var(--lt-chili));
  color: var(--lt-accent-contrast, #fff);
  box-shadow: none;
}
/* บรรทัด "แสดง x ถึง y" ให้เล็กลง เข้ากับธีม */
.lt-bill-source .dt-info {
  font-size: 0.78rem;
  color: var(--lt-ink-soft);
  padding-top: 0.4rem;
}

/* ── โมดัลรายละเอียดบิล ── */
.lt-detail-modal { overflow: hidden; }
.lt-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-size: 0.82rem;
  color: #7a7090;
}
.lt-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* JS (bet.js) ใส่ img 35px + ms-auto มา — ปรับให้พอดีบรรทัด ไม่ดันไปชิดขวา */
#billDetailRound img {
  width: 20px !important;
  height: auto;
  border-radius: 3px;
  margin-inline-end: 0.15rem !important;
}
#billDetailCreatedAt .ms-auto { margin-inline-start: 0 !important; }
#billDetailCreatedAt > span {
  background: #f5f2f8;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
#billDetailCreatedAt > span + span { margin-inline-start: 0 !important; }
/* ชิป "อัตราจ่าย: <ชื่อ tier>" — ไม่มีในวิว: scripts/main.js เติมให้เองหลัง DataTable ในโมดัลโหลด (xhr.dt)
   ดู .ai-context.md "ชิปอัตราจ่ายในโมดัลรายละเอียดบิล" */
.lt-detail-meta > .lt-bd-payout {
  background: #f5f2f8;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.lt-detail-meta > .lt-bd-payout i { color: var(--lt-accent, var(--lt-chili)); }
.lt-detail-meta > .lt-bd-payout b { color: #2b2140; }
.lt-detail-meta > .lt-bd-payout.is-none b { font-weight: 500; color: #a99fbb; }
.lt-detail-note { font-size: 0.85rem; }
/* ซ่อนบรรทัด Note เมื่อบิลไม่มีโน้ต */
.lt-detail-note:has(#billDetailNote:empty) { display: none; }
/* ลำดับในโมดัล: ช่องค้นหา → รายการ → สรุป (ตาราง data source อยู่ท้ายสุด) */
.lt-detail-modal .modal-body { display: flex; flex-direction: column; }
/* ผูกกับ class (ไม่ใช่ id) เพื่อให้ใช้ได้ทุกหน้าที่มีโมดัลรายละเอียดบิล */
.lt-detail-modal .lt-modal-search { order: 1; }
.lt-detail-modal .lt-result-list { order: 2; }
.lt-detail-modal .lt-bd-sum {
  order: 3;
  position: sticky;
  bottom: 0;
  background: var(--bs-modal-bg, #fff);
  padding-bottom: 0.25rem;
}
.lt-detail-modal .lt-bd-source { order: 4; white-space: normal !important; }
.lt-bd-source table { display: none !important; }
/* ซ่อน chrome ของ DataTable ทั้งชุด (ค้นหา/บรรทัดนับ) — หน้าใช้ช่องค้นหา + สรุปของตัวเอง
   เพราะ search ของ DataTable ใช้ไม่ได้กับ render ที่คืนค่าเฉพาะ type "display" */
.lt-bd-source .dt-search,
.lt-bd-source .dt-info,
.lt-bd-source .dataTables_filter,
.lt-bd-source .dataTables_info { display: none !important; }

/* ── ช่องค้นหาในโมดัล/การ์ด (ใช้ซ้ำได้) ── */
.lt-modal-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--lt-canvas, #f5f2f8);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin-bottom: 0.75rem;
}
.lt-modal-search:focus-within {
  border-color: var(--lt-accent, var(--lt-chili));
  background: #fff;
}
.lt-modal-search i { color: var(--lt-ink-soft, #7a7090); }
.lt-modal-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lt-ink, #2b2140);
  font-family: inherit;
  font-size: 0.95rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-modal-search input::placeholder {
  color: var(--lt-ink-soft, #7a7090);
  font-variant-numeric: normal;
}
/* แถวเลขในบิล */
.lt-bd-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.25rem;
}
.lt-bd-row + .lt-bd-row { border-top: 2px dashed rgba(43, 33, 64, 0.12); }
.lt-bd-numwrap { flex: none; text-align: center; min-width: 68px; }
.lt-bd-num {
  background: #2b2140;
  color: #fff;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-bd-row.is-win .lt-bd-num { background: #0e9f6e; }
.lt-bd-type {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #7a7090;
}
.lt-bd-stats {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  min-width: 0;
}
.lt-bd-stat {
  font-size: 0.7rem;
  color: #7a7090;
  line-height: 1.25;
}
.lt-bd-stat b {
  display: block;
  font-size: 0.9rem;
  color: #2b2140;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-bd-net { flex: none; text-align: end; }
.lt-bd-net b { font-size: 1rem; }
.lt-bd-net.neg b { color: var(--lt-chili); }
.lt-bd-net.pos b { color: var(--lt-leaf); }
/* สรุปท้ายบิล */
.lt-bd-sum {
  margin-top: 0.5rem;
  border-top: 2px dashed rgba(43, 33, 64, 0.2);
  padding-top: 0.7rem;
}
.lt-bd-sum-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  background: #f5f2f8;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}
.lt-bd-sum-item { font-size: 0.72rem; color: #7a7090; }
.lt-bd-sum-item b {
  display: block;
  font-size: 1rem;
  color: #2b2140;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   หน้ารายการโพย (/lottery/bill) — การ์ดสรุป, ชิปตัวกรอง, แถวโพย
   ═══════════════════════════════════════════════════════════════ */

/* การ์ดสรุปยอด */
.lt-summary-card { overflow: hidden; }
.lt-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.lt-summary-item {
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid var(--lt-line);
}
.lt-summary-item-net { border-inline-start-color: var(--lt-accent, var(--lt-chili)); }
.lt-summary-label {
  display: block;
  font-size: 0.75rem;
  color: var(--lt-ink-soft);
  margin-bottom: 2px;
}
.lt-summary-grid h4 {
  font-size: 1.25rem;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .lt-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ชิปตัวกรอง — ใช้ร่วมกับปุ่มเดิมของ bill.js (active = btn-outline-success / btn-primary) */
.lt-filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lt-body .btn-status,
.lt-body .btn-date-range,
.lt-body .lottery-category-item,
.lt-body .btn-clear-all-lottery-category-item,
.lt-body .btn-group-lottery-category {
  border-radius: 999px !important;
  font-weight: 600;
  padding: 0.32rem 0.85rem;
  border-width: 1.5px;
  box-shadow: none !important;
}
/* ยังไม่เลือก */
.lt-body .btn-status.btn-outline-secondary,
.lt-body .btn-date-range.btn-outline-secondary,
.lt-body .lottery-category-item.btn-outline-secondary,
.lt-body .btn-group-lottery-category.btn-label-secondary {
  background: #fff !important;
  border-color: rgba(43, 33, 64, 0.15) !important;
  color: var(--lt-ink) !important;
}
.lt-body .btn-status.btn-outline-secondary:hover,
.lt-body .btn-date-range.btn-outline-secondary:hover,
.lt-body .lottery-category-item.btn-outline-secondary:hover,
.lt-body .btn-group-lottery-category.btn-label-secondary:hover {
  border-color: var(--lt-ink) !important;
  color: var(--lt-ink) !important;
}
/* ที่เลือกอยู่ */
.lt-body .btn-status.btn-outline-success,
.lt-body .btn-date-range.btn-outline-success,
.lt-body .lottery-category-item.btn-outline-success,
.lt-body .btn-group-lottery-category.btn-primary {
  background: var(--lt-ink) !important;
  border-color: var(--lt-ink) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(43, 33, 64, 0.22) !important;
}
.lt-body .lottery-category-item .text-black { color: inherit !important; }

/* แถวรายการโพย */
.lt-bp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  padding: 0.8rem 0.25rem;
}
.lt-bp-row + .lt-bp-row { border-top: 2px dashed rgba(43, 33, 64, 0.12); }
.lt-bp-row.is-win { background: rgba(14, 159, 110, 0.06); border-radius: 12px; }
.lt-bp-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 210px;
}
.lt-bp-flag {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lt-canvas);
  border-radius: 11px;
}
.lt-bp-flag img { max-width: 28px; height: auto; }
.lt-bp-info { min-width: 0; }
.lt-bp-title { font-weight: 700; color: var(--lt-ink); line-height: 1.25; }
.lt-bp-code {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
  font-feature-settings: "tnum";
}
.lt-bp-meta { font-size: 0.72rem; color: var(--lt-ink-soft); margin-top: 1px; }
.lt-bp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-inline-start: auto;
}
.lt-bp-status .badge { font-size: 0.68rem; }
.lt-bp-status br { display: none; }
.lt-bp-actions { flex: none; }
.lt-bp-stats {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  padding-top: 0.15rem;
}
.lt-bp-note {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.72rem;
  background: var(--lt-canvas);
  color: #5a5170;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* หัวคอลัมน์ของรายการ — โชว์เฉพาะจอกว้าง */
.lt-bp-head { display: none; }

/* จัดลำดับ chrome ของ DataTable: "แสดง N รายการ / ค้นหา" ขึ้นบนรายการ, ตัวแบ่งหน้าอยู่ล่าง
   (DataTables 2.x วาง 3 แถวใน wrapper: [บน] [ตาราง] [ล่าง] — ตารางถูกซ่อนอยู่แล้ว) */
.lt-list-body { display: flex; flex-direction: column; }
.lt-list-body .lt-bill-source,
.lt-list-body .lt-bill-source > div { display: contents; }
/* เนื้อหาหลักของหน้า (รายการ/หัวคอลัมน์/กริดการ์ด) อยู่ลำดับ 2 เสมอ
   — ต้องเป็นกฎกลาง ไม่ผูกกับชื่อ container ของแต่ละหน้า ไม่งั้นช่องค้นหาจะตกไปอยู่ล่างรายการ */
.lt-list-body > * { order: 2; }
.lt-list-body .lt-bill-source > div > div:nth-child(1) { order: 1; }
.lt-list-body .lt-bill-source > div > div:nth-child(3) { order: 4; }
.lt-list-body .lt-bill-source > div > div:nth-child(2) { order: 5; }

/* ── skeleton ตอน DataTable โหลด (กัน "หน้าขาว") ──
   hook กลางใน main2.ejs (ผูก preXhr/xhr/draw/dt-error ที่ document) ใส่ .lt-dt-loading ต่อจาก container ของ renderer ก่อน data source
   ใน .lt-list-body ได้ order 2 ตามกฎกลางด้านบนอยู่แล้ว; ในโมดัลรายละเอียด (.lt-detail-modal ที่ search=1/list=2/sum=3/source=4) ต้องตั้ง order 2 เอง
   ดีไซน์: แถวเป็น "การ์ดตั๋ว" ขอบมน 14px + แถบสี chili→marigold ซ้าย, กล่องธง 40px, 2 บรรทัด, ป้ายสถานะโทน marigold, ชิปตัวเลข 3 ช่อง;
   แถวจางลงทีละแถว (--o) และเข้าฉากไล่กันด้วย --i; แสงวิ่ง (::after) กวาดทั้งแถวไล่หน่วงต่อแถวเป็นคลื่น; ป้ายลูกบอล 3 สีกระดอน
   component กลาง 3 สำเนา member/company/agent — แก้ต้องซิงก์ทั้งสาม */
.lt-dt-loading { padding: 0.35rem 0 0.25rem; }
.lt-detail-modal .lt-dt-loading { order: 2; }
.lt-ld-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.lt-ld-row {
  --d: calc(var(--i, 0) * 0.09s);
  --o: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem 0.75rem 1.05rem;
  border: 1.5px solid var(--lt-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  animation: lt-ld-in 0.45s ease-out forwards;
  animation-delay: var(--d);
}
.lt-ld-row:nth-child(2) { --o: 0.85; }
.lt-ld-row:nth-child(3) { --o: 0.7; }
.lt-ld-row:nth-child(4) { --o: 0.55; }
.lt-ld-row:nth-child(5) { --o: 0.42; }
.lt-ld-row:nth-child(n + 6) { --o: 0.3; }
.lt-ld-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(240, 62, 82, 0.45), rgba(255, 176, 32, 0.45));
}
/* แสงวิ่งกวาดทั้งแถว (สว่างขึ้นเฉพาะบนบล็อกที่มีสี) ไล่หน่วงต่อแถวให้เห็นเป็นคลื่น */
.lt-ld-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: lt-ld-sheen 1.7s ease-in-out infinite;
  animation-delay: var(--d);
  pointer-events: none;
}
.lt-skel { display: block; background: #ece8f3; border-radius: 8px; }
.lt-ld-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.lt-ld-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lt-ld-line { height: 12px; max-width: 100%; border-radius: 6px; }
.lt-ld-line.is-sub { height: 9px; opacity: 0.65; }
.lt-ld-pill { flex: none; width: 76px; height: 24px; border-radius: 999px; background: rgba(255, 176, 32, 0.22); }
.lt-ld-nums { flex: none; display: flex; gap: 0.4rem; }
.lt-ld-num { width: 54px; height: 26px; border-radius: 9px; background: rgba(43, 33, 64, 0.07); }
/* ป้ายสถานะ: ลูกบอล 3 สีของธีม (chili/tangerine/marigold) กระดอนไล่กัน + ข้อความ */
.lt-ld-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: max-content;
  max-width: 100%;
  margin: 0.9rem auto 0;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--lt-line);
  box-shadow: var(--lt-shadow);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
}
.lt-ld-balls { display: inline-flex; align-items: center; gap: 0.3rem; }
.lt-ld-balls i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lt-chili);
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.14);
  animation: lt-ld-bounce 1s ease-in-out infinite;
}
.lt-ld-balls i:nth-child(2) { background: var(--lt-tangerine); animation-delay: 0.15s; }
.lt-ld-balls i:nth-child(3) { background: var(--lt-marigold); animation-delay: 0.3s; }
@keyframes lt-ld-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: var(--o, 1); transform: none; }
}
@keyframes lt-ld-sheen {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@keyframes lt-ld-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
/* กล่อง error ในตำแหน่งเดียวกับ skeleton ไม่ต้องสูงเท่าหน้าว่าง */
.lt-dt-loading .lt-empty { padding: 2rem 1rem; }
/* ระหว่างโหลด: บรรทัดนับ "แสดง 0 ถึง 0 จาก 0 รายการ" ยังไม่ใช่ข้อมูลจริง ซ่อนไว้แต่คงพื้นที่ไม่ให้แถวล่างขยับ */
.is-loading .dt-info { visibility: hidden; }
/* container ที่ค้างกล่อง "ไม่พบข้อมูล" ของรอบก่อน ซ่อนชั่วคราวระหว่างโหลดรอบใหม่ (hook ถอดคลาสตอน xhr/draw) */
.lt-dt-wait { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lt-ld-row { animation: none; opacity: var(--o, 1); }
  .lt-ld-row::after,
  .lt-ld-balls i { animation: none; }
}
@media (max-width: 575.98px) {
  .lt-ld-row { gap: 0.6rem; padding: 0.65rem 0.7rem 0.65rem 0.85rem; }
  .lt-ld-ico { width: 34px; height: 34px; border-radius: 10px; }
  .lt-ld-pill { width: 56px; height: 20px; }
  .lt-ld-num { width: 40px; height: 22px; }
  .lt-ld-num:nth-child(n + 2) { display: none; }
}
/* ช่องค้นหา + ตัวเลือกจำนวนแถวให้เข้าธีม
   (DataTables 2.x วาง <label> กับ <input> เป็นพี่น้องกันใน .dt-search จึงต้องทำ .dt-search เป็น flex) */
.lt-bill-source .dt-search {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}
.lt-bill-source .dt-search label {
  margin: 0 !important;
  white-space: nowrap;
  width: auto !important;
  flex: none;
}
.lt-bill-source .dt-search input { flex: 1 1 auto; min-width: 0; width: auto; }
.lt-bill-source .dt-search label,
.lt-bill-source .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--lt-ink-soft);
}
/* ล็อกขนาดทั้งสถานะปกติและ focus — ไม่งั้น .form-control:focus ของ template เปลี่ยน padding
   ทำให้ช่องยุบลงตอนคลิก */
.lt-bill-source .dt-search input,
.lt-bill-source .dt-search input:focus,
.lt-bill-source .dt-length select,
.lt-bill-source .dt-length select:focus {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.lt-bill-source .dt-search input,
.lt-bill-source .dt-length select { border-color: rgba(43, 33, 64, 0.15) !important; }
.lt-bill-source .dt-search input:focus,
.lt-bill-source .dt-length select:focus { border-color: var(--lt-accent, var(--lt-chili)) !important; }
/* select มีลูกศรของเบราว์เซอร์เอง — เผื่อที่ทางขวาไม่ให้ทับตัวเลข */
.lt-bill-source .dt-length select { padding-inline-end: 2rem !important; }
/* จอกว้าง: กระจายเป็นคอลัมน์เดียวกันทุกแถว ใช้พื้นที่เต็มความกว้าง (อ่านเทียบกันได้เหมือนตาราง) */
@media (min-width: 992px) {
  /* หัวคอลัมน์กับแถวข้อมูลต้องใช้ "กริดเดียวกัน" ไม่งั้นความกว้างคอลัมน์คำนวณแยกกันแล้วไม่ตรง */
  .lt-bp-table {
    display: grid;
    grid-template-columns: minmax(280px, 2.2fr) minmax(104px, max-content) repeat(4, minmax(88px, 0.85fr)) max-content;
    column-gap: 1.25rem;
    /* ระยะขอบอยู่ที่กริดแม่ ไม่ใส่ที่หัว/แถว ไม่งั้น subgrid จะเลื่อนไม่ตรงกัน */
    padding-inline: 0.5rem;
  }
  .lt-bp-table > .lt-result-list { display: contents; }
  .lt-bp-head,
  .lt-bp-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    /* ต้องเท่ากับ gap ของกริดแม่ — subgrid ใช้ gap ของตัวเองถ้ากำหนดไว้ (แถวมี 0.75rem ติดจากกฎมือถือ) */
    column-gap: 1.25rem;
  }
  .lt-bp-row {
    row-gap: 0;
    padding-inline: 0;
  }
  .lt-bp-status { margin-inline-start: 0; justify-content: flex-start; }
  /* ให้ตัวเลข 4 ช่องกลายเป็น grid item เอง จะได้ตรงคอลัมน์กันทุกแถว */
  .lt-bp-stats { display: contents; }
  .lt-bp-stats .lt-bd-stat { text-align: end; }
  .lt-bp-actions { justify-self: end; }
  /* หัวคอลัมน์ของรายการ */
  .lt-bp-head {
    /* padding แนวนอนต้องเป็น 0 เสมอ ไม่งั้น subgrid เลื่อนไม่ตรงกับแถวข้อมูล
       — พื้นหลังจึงใช้ ::before ยืดออกนอกแทน */
    position: relative;
    padding: 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 0;
    margin-bottom: 0.4rem;
  }
  .lt-bp-head::before {
    content: "";
    position: absolute;
    inset: 0 -0.55rem;
    border-radius: 10px;
    background-image: linear-gradient(90deg, var(--lt-chili), #f0602c 55%, #d97706);
    box-shadow: 0 2px 8px rgba(240, 62, 82, 0.25);
  }
  .lt-bp-head > span {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(43, 33, 64, 0.25);
  }
  .lt-bp-head span:nth-child(n + 3) { text-align: end; }
  .lt-bp-head span:last-child { text-align: center; }
  /* บนจอกว้างซ่อน label ในแต่ละแถว เพราะมีหัวคอลัมน์แล้ว */
  .lt-bp-row .lt-bd-stat { font-size: 0; line-height: 1; }
  .lt-bp-row .lt-bd-stat b { font-size: 0.95rem; }
  /* เบราว์เซอร์ที่ยังไม่รองรับ subgrid — ใช้กริดแยกที่นิยามคอลัมน์เหมือนกัน */
  @supports not (grid-template-columns: subgrid) {
    .lt-bp-table { display: block; }
    .lt-bp-head,
    .lt-bp-row {
      grid-template-columns: minmax(280px, 2.2fr) minmax(104px, max-content) repeat(4, minmax(88px, 0.85fr)) max-content;
      column-gap: 1.25rem;
    }
  }
}

/* ── การ์ด "รายละเอียดหวย" (ตัวกรองหวยที่มีโพย) ─────────────────── */
.lt-body .ui-lottery-group-category .card-body { padding-block: 0.25rem 1rem; }
.lt-body .ui-lottery-group-category .card-header { padding-bottom: 0.5rem; }
.lt-body #lotteryCategoryWithBill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 !important;
}
.lt-body #lotteryCategoryWithBill > * { margin: 0 !important; }
/* ปุ่มเลือกทั้งหมด / ไม่เลือกทั้งหมด — วงกลมโปร่ง ไม่แย่งสายตาไปจากชิปหวย */
.lt-body #btnAll,
.lt-body #btnClear,
.lt-body .btn-lottery-category-all,
.lt-body .btn-lottery-category-clear-all {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid rgba(43, 33, 64, 0.15) !important;
  box-shadow: none !important;
}
.lt-body #btnAll i,
.lt-body .btn-lottery-category-all i { color: var(--lt-leaf); }
.lt-body #btnClear i,
.lt-body .btn-lottery-category-clear-all i { color: var(--lt-chili); }
.lt-body #btnAll:hover,
.lt-body .btn-lottery-category-all:hover {
  background: var(--lt-leaf) !important;
  border-color: var(--lt-leaf) !important;
}
.lt-body #btnClear:hover,
.lt-body .btn-lottery-category-clear-all:hover {
  background: var(--lt-chili) !important;
  border-color: var(--lt-chili) !important;
}
.lt-body #btnAll:hover i,
.lt-body #btnClear:hover i,
.lt-body .btn-lottery-category-all:hover i,
.lt-body .btn-lottery-category-clear-all:hover i { color: #fff; }
/* เว้นช่องระหว่างปุ่มจัดการกับกลุ่มชิป */
.lt-body #btnClear { margin-inline-end: 0.5rem !important; }

/* ชิปหวยที่มีโพย */
.lt-body .btn-lottery-category {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px !important;
  padding: 0.3rem 0.9rem 0.3rem 0.45rem !important;
  font-weight: 600;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
}
.lt-body .btn-lottery-category img {
  width: 22px !important;
  height: auto;
  border-radius: 4px;
  margin: 0 !important;
}
.lt-body .btn-lottery-category.btn-label-secondary {
  background: #fff !important;
  color: var(--lt-ink) !important;
  border-color: rgba(43, 33, 64, 0.15) !important;
}
.lt-body .btn-lottery-category.btn-label-secondary:hover { border-color: var(--lt-ink) !important; }
.lt-body .btn-lottery-category.btn-primary {
  background: var(--lt-ink) !important;
  color: #fff !important;
  border-color: var(--lt-ink) !important;
  box-shadow: 0 2px 8px rgba(43, 33, 64, 0.22) !important;
}

/* ── ตารางปุ่มเลขที่เลือกไว้ (หน้าแทงหวย) ────────────────────────
   custom.css ใช้ repeat(N, 1fr) ซึ่ง 1fr ย่อไม่ต่ำกว่าเนื้อหา+margin ของปุ่ม
   ทำให้ล้นขอบการ์ดบนจอแคบ → ใช้ minmax(0, 1fr) และคุมระยะด้วย gap แทน m-1 */
.lt-body .bet-lottery-number-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}
.lt-body .bet-lottery-number-grid > .btn-number {
  margin: 0 !important;
  width: 100%;
  min-width: 0;
  padding-inline: 0.25rem;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .lt-body .bet-lottery-number-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .lt-body .bet-lottery-number-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* ป้ายบอกคีย์ลัด — ตัวเล็กใต้ปุ่ม โชว์เฉพาะจอที่มีคีย์บอร์ดจริง */
.lt-kbd-hint {
  display: none;
  margin-top: 0.35rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--lt-ink-soft);
}
.lt-kbd-hint kbd {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid rgba(43, 33, 64, 0.18);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  color: var(--lt-ink);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
}
@media (min-width: 992px) {
  .lt-kbd-hint { display: block; }
}

/* มือถือ: บีบระยะของ chrome ตาราง (แสดง N รายการ / ค้นหา) ให้ชิดกัน ไม่ห่างเว่อร์ */
@media (max-width: 991.98px) {
  .lt-bill-source .row { margin: 0 !important; row-gap: 0.4rem !important; }
  .lt-bill-source .dt-layout-start,
  .lt-bill-source .dt-layout-end,
  .lt-bill-source .dt-layout-full {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  .lt-bill-source .dt-length,
  .lt-bill-source .dt-search,
  .lt-bill-source .dt-info,
  .lt-bill-source .dt-paging {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  /* DataTables จัดกลางบนจอเล็ก — บังคับชิดซ้าย และให้ label+ช่องอยู่บรรทัดเดียวกัน */
  .lt-bill-source .dt-length,
  .lt-bill-source .dt-search { text-align: start !important; }
  .lt-bill-source .dt-length label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
  }
  .lt-bill-source .dt-paging { justify-content: center; display: flex; }
}

/* มือถือ: ย้ายปุ่ม "จัดการ" ขึ้นไปเป็นไอคอน ⋮ มุมขวาบนของแถว (เดสก์ท็อปคงเดิม) */
@media (max-width: 991.98px) {
  .lt-bp-row { align-items: flex-start; }
  .lt-bp-main { order: 1; }
  .lt-bp-status { order: 2; margin-inline-start: auto; }
  .lt-bp-actions { order: 3; }
  .lt-bp-stats { order: 4; }
  .lt-bp-actions .dropdown-toggle {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    background: #fff !important;
    border: 1.5px solid rgba(43, 33, 64, 0.15) !important;
    color: var(--lt-ink) !important;
    box-shadow: none !important;
  }
  .lt-bp-actions .dropdown-toggle::after { display: none !important; }
  .lt-bp-actions .dropdown-toggle::before {
    content: "\f142";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
  }
  .lt-bp-actions .dropdown-toggle:hover,
  .lt-bp-actions .dropdown-toggle.show {
    background: var(--lt-ink) !important;
    border-color: var(--lt-ink) !important;
    color: #fff !important;
  }
  .lt-bp-actions .dropdown-menu { min-width: 190px; }
}

/* ── หน้าโพยตามชนิดหวย (/lottery/bill/category) ───────────────────
   บล็อกต่อหวยถูกสร้างโดย billCategory.js (h5.card-header + ชิปสถานะ + ตาราง)
   จึงจัดสไตล์จากภายนอกอย่างเดียว */
.lt-body #allTable > div[id^="div"] {
  margin-top: 1.25rem !important;
  padding-top: 1rem;
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-body #allTable > div[id^="div"]:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}
.lt-body #allTable .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 0.5rem 0 !important;
  font-size: 1rem;
  font-weight: 700;
  color: var(--lt-ink);
}
.lt-body #allTable .card-header img {
  width: 26px !important;
  height: auto;
  border-radius: 5px;
  margin: 0 !important;
}
/* แถวชิปสถานะของแต่ละหวย — ชิดซ้าย ใต้ชื่อหวย */
.lt-body #allTable .row.px-2 { margin: 0 0 0.25rem 0 !important; }
.lt-body #allTable .row.px-2 .col-12 {
  padding: 0 !important;
  text-align: start !important;
}
.lt-body #allTable .row.px-2 .mt-2 { margin-top: 0 !important; }
.lt-body #allTable .row.px-2 [role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lt-body #allTable .btn-status { margin-top: 0 !important; }
/* ที่วางรายการแบบแถบของแต่ละหวย */
.lt-cat-host { margin-bottom: 0.5rem; }
.lt-cat-host .lt-bd-sum { margin-top: 0.75rem; }



/* ── หน้าตรวจรางวัล (/lottery/round/check) — การ์ดผลรางวัลต่อรอบ ──── */
.lt-rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.85rem;
}
.lt-rc-empty-state { grid-column: 1 / -1; }
.lt-rc-card {
  display: flex;
  flex-direction: column;
  background: var(--lt-card);
  border: 1px solid var(--lt-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-rc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43, 33, 64, 0.14);
}
.lt-rc-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.4rem;
}
.lt-rc-head .lt-bp-flag {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.lt-rc-head .lt-bp-flag img { max-width: 24px; }
.lt-rc-headinfo {
  flex: 1;
  min-width: 0;
  /* กันชื่อหวยยาว 2 บรรทัด ทำให้ตัวเลขของแต่ละการ์ดไม่อยู่ระดับเดียวกัน */
  min-height: 2.75rem;
}
.lt-rc-name {
  font-weight: 700;
  line-height: 1.2;
  color: var(--lt-ink);
}
.lt-rc-round {
  font-size: 0.7rem;
  color: var(--lt-ink-soft);
  margin-top: 2px;
}
.lt-rc-badge .badge { font-size: 0.62rem; }
/* โซนผลรางวัล — เลข 3 ตัวบนเป็นพระเอก */
.lt-rc-results {
  text-align: center;
  padding: 0.35rem 0.75rem 0.7rem;
}
.lt-rc-main-label {
  display: block;
  font-size: 0.68rem;
  color: var(--lt-ink-soft);
}
.lt-rc-main-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.12em;
  color: var(--lt-ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-rc-sub {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.lt-rc-sub-item { text-align: center; }
.lt-rc-sub-label {
  display: block;
  font-size: 0.64rem;
  color: var(--lt-ink-soft);
  margin-bottom: 2px;
}
.lt-rc-sub-num {
  display: inline-block;
  min-width: 46px;
  background: var(--lt-canvas);
  border-radius: 8px;
  padding: 0.1rem 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--lt-ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* รอบที่ยังไม่ออกผล — ตัวเลขจาง */
.lt-rc-card.is-pending .lt-rc-main-num,
.lt-rc-card.is-pending .lt-rc-sub-num { color: #b9b2c9; }
/* ท้ายการ์ด */
.lt-rc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.6rem;
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-rc-bills { font-size: 0.78rem; color: var(--lt-ink-soft); }
.lt-rc-bills b {
  color: var(--lt-ink);
  font-feature-settings: "tnum";
}
.lt-rc-action .btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 999px;
}
.lt-rc-action .btn i { margin-inline-end: 0.3rem !important; }

/* ปุ่มสลับรูปแบบการแสดงผล (ตาราง / การ์ด) */
.lt-view-toggle {
  display: inline-flex;
  background: var(--lt-canvas);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lt-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
}
.lt-view-btn:hover { color: var(--lt-ink); }
.lt-view-btn.active {
  background: var(--lt-ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 33, 64, 0.22);
}

/* โหมดตารางของหน้าตรวจรางวัล — ชิปผลรางวัล + hover ทั้งแถว */
.lt-rc-num-main {
  display: inline-block;
  min-width: 64px;
  background: var(--lt-ink);
  color: var(--lt-marigold);
  border-radius: 8px;
  padding: 0.15rem 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-rc-num {
  display: inline-block;
  min-width: 64px;
  background: var(--lt-canvas);
  color: var(--lt-ink);
  border-radius: 8px;
  padding: 0.15rem 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lt-rc-num-empty { color: #b9b2c9; font-weight: 700; }
.lt-rc-table .lt-bp-row { border-radius: 10px; transition: background-color 0.12s ease; }
.lt-rc-table .lt-bp-row:hover { background: rgba(43, 33, 64, 0.035); }
@media (min-width: 992px) {
  /* คอลัมน์: หวย/งวด | สถานะ | 3 ผล | จำนวนบิล | จัดการ */
  .lt-rc-table {
    display: grid;
    /* คอลัมน์ผลรางวัลแคบและอยู่กลาง เพื่อให้ชิปทั้งสามอยู่เป็นกลุ่มเดียวกัน ระยะห่างเท่ากัน
       ส่วนที่เหลือให้คอลัมน์ชื่อหวยดูดไป */
    grid-template-columns: minmax(240px, 3fr) max-content repeat(3, minmax(84px, 0.5fr)) minmax(70px, max-content) max-content;
    column-gap: 1rem;
    padding-inline: 0.5rem;
  }
  .lt-rc-table > .lt-result-list { display: contents; }
  .lt-rc-table .lt-bp-stats .lt-bd-stat { text-align: center; }
  .lt-rc-table .lt-bp-head span:nth-child(3),
  .lt-rc-table .lt-bp-head span:nth-child(4),
  .lt-rc-table .lt-bp-head span:nth-child(5),
  .lt-rc-table .lt-bp-head span:nth-child(6) { text-align: center; }
}
@media (max-width: 991.98px) {
  .lt-rc-table .lt-bp-main { min-width: 150px; }
  /* ผลรางวัล 4 ช่องกว้างเท่ากันเป็นกริด — ชิปกับ label จึงอยู่ตรงกลางตรงกันทุกช่อง */
  .lt-rc-table .lt-bp-stats {
    order: 4;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    padding-top: 0.35rem;
  }
  .lt-rc-table .lt-bp-stats .lt-bd-stat { text-align: center; }
  .lt-rc-table .lt-rc-num-main,
  .lt-rc-table .lt-rc-num {
    display: block;
    width: 100%;
    min-width: 0;
    padding-inline: 0.2rem;
  }
  /* ปุ่มตรวจบิลเต็มความกว้างใต้ตัวเลข */
  .lt-rc-table .lt-bp-actions {
    order: 5;
    width: 100%;
    margin-top: 0.5rem;
  }
  .lt-rc-table .lt-bp-actions .btn {
    width: 100%;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 10px;
  }
}

/* ── การ์ดโพย (โหมด "การ์ด" ของหน้า /lottery/bill และ /lottery/bill/category) ── */
.lt-bill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0.85rem;
}
.lt-bill-grid-empty { grid-column: 1 / -1; }
.lt-bill-card {
  display: flex;
  flex-direction: column;
  background: var(--lt-card);
  border: 1px solid var(--lt-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-bill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43, 33, 64, 0.14);
}
.lt-bill-card.is-win { background: rgba(14, 159, 110, 0.05); }
.lt-bill-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.5rem;
}
.lt-bill-card-head .lt-bp-flag {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.lt-bill-card-head .lt-bp-flag img { max-width: 24px; }
.lt-bill-card-info { flex: 1; min-width: 0; }
.lt-bill-card-title { font-weight: 700; line-height: 1.2; color: var(--lt-ink); }
.lt-bill-card-code {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
  font-feature-settings: "tnum";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-bill-card-meta {
  font-size: 0.7rem;
  color: var(--lt-ink-soft);
  margin-top: 2px;
  line-height: 1.35;
}
.lt-bill-card-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lt-bill-card-badge .badge { font-size: 0.62rem; }
.lt-bill-card-badge br { display: none; }
.lt-bill-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.6rem;
  padding: 0.35rem 0.75rem 0.6rem;
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
  margin-top: 0.1rem;
}
.lt-bill-card-stats .lt-bd-stat { font-size: 0.68rem; }
.lt-bill-card-stats .lt-bd-stat b { font-size: 0.95rem; }
.lt-bill-card-stats .lt-bd-stat.is-net b { font-size: 1.1rem; }
.lt-bill-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.75rem 0.65rem;
}
.lt-bill-card-foot .lt-bp-note { margin-top: 0; }
.lt-bill-card-foot .btn { padding: 0.28rem 0.75rem; font-size: 0.8rem; border-radius: 999px; }

/* ── ชิปกรองสถานะ: ให้สีตามความหมายของแต่ละสถานะ ─────────────────
   (ใช้ทั้งหน้า /lottery/bill และชิปรายหวยใน /lottery/bill/category) */
.lt-body .btn-status[data-category] { --chip: var(--lt-ink); }
.lt-body .btn-status[data-category="pending"] { --chip: #2ba7c9; }
.lt-body .btn-status[data-category="win"] { --chip: var(--lt-leaf); }
.lt-body .btn-status[data-category="notWin"] { --chip: #7a7090; }
.lt-body .btn-status[data-category="cancelled"] { --chip: var(--lt-chili); }
/* ยังไม่เลือก — ขอบ/ตัวหนังสือเป็นสีของสถานะ */
.lt-body .btn-status[data-category].btn-outline-secondary {
  background: #fff !important;
  border-color: color-mix(in sRGB, var(--chip) 40%, #fff) !important;
  color: var(--chip) !important;
}
.lt-body .btn-status[data-category].btn-outline-secondary:hover {
  background: color-mix(in sRGB, var(--chip) 8%, #fff) !important;
  border-color: var(--chip) !important;
  color: var(--chip) !important;
}
/* ที่เลือกอยู่ — ทึบสีของสถานะ */
.lt-body .btn-status[data-category].btn-outline-success {
  background: var(--chip) !important;
  border-color: var(--chip) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in sRGB, var(--chip) 38%, transparent) !important;
}

/* บรรทัดข้อมูลย่อของแถว/การ์ด (จำนวนเลข · งวด · เวลาบันทึก) — ตัวใหญ่ขึ้นและเข้มขึ้นให้อ่านง่าย */
.lt-bp-meta {
  font-size: 0.82rem;
  color: #5f5675;
}
.lt-bill-card-meta { font-size: 0.78rem; }

/* ── มือถือ: ล็อกตำแหน่งของแต่ละส่วนในแถวด้วย grid areas ─────────
   (เดิมใช้ flex-wrap ทำให้ปุ่ม ⋮ ตกบรรทัดบ้าง/อยู่บนบรรทัดเดียวกับป้ายบ้าง แล้วแต่ความยาวข้อความ) */
@media (max-width: 991.98px) {
  .lt-bp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main status action"
      "stats stats stats";
    align-items: start;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
  }
  .lt-bp-main { grid-area: main; min-width: 0; }
  .lt-bp-status {
    grid-area: status;
    margin-inline-start: 0;
    justify-content: flex-end;
  }
  .lt-bp-actions { grid-area: action; }
  .lt-bp-stats { grid-area: stats; width: auto; padding-top: 0; }
  /* หน้าตรวจรางวัล: ปุ่ม "ตรวจบิล" เต็มความกว้างใต้ตัวเลข */
  .lt-rc-table .lt-bp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "stats stats"
      "action action";
  }
}

/* ── เมนูย่อยของ tab bar มือถือ (bottom sheet) ─────────────────── */
/* แท็บที่เป็นปุ่ม (มีเมนูย่อย) ต้องหน้าตาเหมือนแท็บที่เป็นลิงก์ทุกอย่าง
   — ห้ามใส่ `font: inherit` เพราะ shorthand จะทับ font-size/weight ของ .lt-tab ทำให้ตัวหนังสือใหญ่กว่าแท็บอื่น */
button.lt-tab {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lt-sheet { position: fixed; inset: 0; z-index: 1040; pointer-events: none; }
.lt-sheet-backdrop,
.lt-sheet-panel { pointer-events: auto; }
.lt-sheet-backdrop {
  position: absolute;
  /* เว้นแถบ tab bar ไว้ให้กดข้ามเมนูได้เลย ไม่ต้องปิดก่อน */
  inset: 0 0 var(--lt-tabbar-h, calc(72px + env(safe-area-inset-bottom)));
  background: rgba(43, 33, 64, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lt-sheet.show .lt-sheet-backdrop { opacity: 1; }
.lt-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lt-tabbar-h, calc(72px + env(safe-area-inset-bottom)));
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 32px rgba(43, 33, 64, 0.22);
  padding: 0.5rem 0.75rem 0.85rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
}
.lt-sheet.show .lt-sheet-panel { transform: translateY(0); opacity: 1; }
.lt-sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: #e3dfec;
  margin: 0.15rem auto 0.5rem;
}
.lt-sheet-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a80a0;
  padding: 0 0.35rem 0.4rem;
}
.lt-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.55rem;
  border-radius: 14px;
  color: var(--lt-ink);
  font-weight: 600;
}
.lt-sheet-item + .lt-sheet-item { margin-top: 0.15rem; }
.lt-sheet-item:active { background: #f6f4fa; }
.lt-sheet-item.active { background: rgba(240, 62, 82, 0.08); color: var(--lt-chili); }
.lt-sheet-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--lt-ink);
  color: #fff;
  font-size: 0.95rem;
}
.lt-sheet-item.active .lt-sheet-ico { background: var(--lt-chrome); }
.lt-sheet-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.lt-sheet-text small { font-size: 0.72rem; font-weight: 400; color: #7a7090; }
.lt-sheet-item.active .lt-sheet-text small { color: rgba(240, 62, 82, 0.75); }
.lt-sheet-go { color: #b8b0c8; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .lt-sheet-backdrop,
  .lt-sheet-panel { transition: none; }
}

/* ── หน้า /report (รายงานสรุปบัญชี) ────────────────────────────── */
.lt-rp-daterange {
  font-size: 0.82rem;
  color: #5f5675;
  margin-top: 0.15rem;
}
.lt-rp-daterange:empty { display: none; }

/* บรรทัดนับของ DataTable ซ้ำกับแถบรวมท้ายรายการ (บอกจำนวนรอบ/บิลอยู่แล้ว) */
.lt-rp-body .dt-info { display: none; }

/* แถบรวมท้ายรายการ */
.lt-rp-total {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: var(--lt-ink);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.lt-rp-total-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}
.lt-rp-total-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-inline-start: auto;
}
.lt-rp-total .lt-bd-stat {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  text-align: end;
}
.lt-rp-total .lt-bd-stat b {
  display: block;
  font-size: 1rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lt-rp-total .lt-bd-stat.is-net b { font-size: 1.15rem; }
.lt-rp-total .text-success { color: var(--lt-pos-dark) !important; }
.lt-rp-total .text-warning { color: #ffd166 !important; }
.lt-rp-total .text-danger { color: var(--lt-neg-dark) !important; }

@media (max-width: 575.98px) {
  .lt-rp-total { gap: 0.4rem; }
  .lt-rp-total-label { width: 100%; }
  .lt-rp-total-stats {
    width: 100%;
    margin-inline-start: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .lt-rp-total .lt-bd-stat { text-align: center; }
}

/* ตารางหน้ารายงาน — ไม่มีคอลัมน์ "จัดการ" จึงเหลือ 6 คอลัมน์ */
@media (min-width: 992px) {
  .lt-bp-table.lt-rp-table {
    grid-template-columns: minmax(280px, 2.2fr) minmax(104px, max-content) repeat(4, minmax(96px, 0.9fr));
  }
  .lt-rp-table .lt-bp-head span:last-child { text-align: end; }
  @supports not (grid-template-columns: subgrid) {
    .lt-rp-table .lt-bp-head,
    .lt-rp-table .lt-bp-row {
      grid-template-columns: minmax(280px, 2.2fr) minmax(104px, max-content) repeat(4, minmax(96px, 0.9fr));
    }
  }
}
@media (max-width: 991.98px) {
  /* ไม่มีปุ่มจัดการ — ป้ายสถานะอยู่ขวาบน ตัวเลขเรียงเต็มความกว้างด้านล่าง */
  .lt-rp-table .lt-bp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "stats stats";
  }
  /* 4 ช่องกว้างเท่ากัน คอลัมน์ตรงกันทุกแถว (แบบเดียวกับหน้าตรวจรางวัล) */
  .lt-rp-table .lt-bp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    padding-top: 0.35rem;
  }
  .lt-rp-table .lt-bp-stats .lt-bd-stat { text-align: center; }
}

/* ── ตัวเลือกหวย (lotteryGroupCategoryUi3) ─────────────────────── */
.lt-lot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
}
.lt-lot-count {
  font-size: 0.82rem;
  color: #7a7090;
  background: #f3f0f8;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-variant-numeric: tabular-nums;
}
.lt-lot-count b { color: var(--lt-chili); }

.lt-lot-picker .accordion-item {
  border: 1.5px solid var(--lt-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.lt-lot-picker .accordion-button {
  font-weight: 600;
  color: var(--lt-ink);
  background: #fbfafd;
  padding-block: 0.7rem;
}
.lt-lot-picker .accordion-button:not(.collapsed) {
  background: rgba(240, 62, 82, 0.06);
  color: var(--lt-chili);
  box-shadow: none;
}
.lt-lot-badge {
  margin-inline-start: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--lt-ink);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

/* แถบเครื่องมือ (ค้นหา + เลือกทั้งหมด/ล้าง) — ติดบนสุดของกล่องเสมอ */
.lt-lot-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.65rem;
  background: #fff;
}
.lt-lot-toolbar .lt-modal-search {
  flex: 1 1 220px;
  margin: 0;
}
.lt-lot-actions { display: flex; gap: 0.4rem; }
.lt-lot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid transparent;
}
.lt-lot-btn-all { background: var(--lt-ink); color: #fff; }
.lt-lot-btn-all:hover { background: #3b2f57; color: #fff; }
.lt-lot-btn-clear { background: #fff; color: var(--lt-chili); border-color: rgba(240, 62, 82, 0.4); }
.lt-lot-btn-clear:hover { background: rgba(240, 62, 82, 0.08); color: var(--lt-chili); }

/* กลุ่มหวย */
.lt-lot-group + .lt-lot-group { margin-top: 0.9rem; }
.lt-lot-group[hidden] { display: none !important; }
.lt-lot-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.3rem 0.1rem 0.45rem;
  user-select: none;
}
.lt-lot-group-name { font-weight: 700; color: var(--lt-ink); }
.lt-lot-group-count {
  font-size: 0.72rem;
  color: #8a80a0;
  background: #f3f0f8;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.lt-lot-group.is-all .lt-lot-group-count { background: rgba(14, 159, 110, 0.12); color: var(--lt-leaf); }
.lt-lot-group.is-none .lt-lot-group-count { background: rgba(240, 62, 82, 0.1); color: var(--lt-chili); }
.lt-lot-group-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #8a80a0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lt-lot-group-head:hover .lt-lot-group-toggle { opacity: 1; }
.lt-lot-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* รายการยาวมาก — ให้เลื่อนในกล่อง แถบค้นหา/ปุ่มจึงอยู่ให้เห็นตลอด */
.lt-lot-groups {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-inline-end: 0.35rem;
}

/* ชิปหวยแต่ละตัว — กดที่ไหนก็ได้ทั้งชิป */
.lt-lot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border: 1.5px solid var(--lt-line);
  border-radius: 999px;
  background: #fff;
  color: #7a7090;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  margin: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lt-lot-chip[hidden] { display: none !important; }
.lt-lot-chip:hover { border-color: rgba(240, 62, 82, 0.45); }
.lt-lot-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lt-lot-tick {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eeeaf4;
  color: transparent;
  font-size: 0.6rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.lt-lot-chip img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}
.lt-lot-chip.is-on {
  border-color: rgba(14, 159, 110, 0.55);
  background: rgba(14, 159, 110, 0.08);
  color: var(--lt-ink);
  font-weight: 600;
}
.lt-lot-chip.is-on .lt-lot-tick { background: var(--lt-leaf, #0e9f6e); color: #fff; }
.lt-lot-chip input:focus-visible + .lt-lot-tick { outline: 2px solid var(--lt-chili); outline-offset: 2px; }

/* แถวเลือกทั้งกลุ่มแบบเร็ว */
.lt-lot-groupbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.lt-lot-groupbar-label { font-size: 0.8rem; color: #8a80a0; }
.lt-lot-groupchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lt-lot-groupchips .btn-lottery-category {
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  margin: 0;
}

@media (max-width: 767.98px) {
  .lt-lot-group-toggle { opacity: 1; }
  .lt-lot-actions { width: 100%; }
  .lt-lot-actions .lt-lot-btn { flex: 1 1 0; justify-content: center; }
  .lt-lot-chip { font-size: 0.82rem; }
}

/* ── หน้า /report/transaction (ประวัติการเงิน) ─────────────────── */
.lt-tx-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.lt-tx-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.9rem;
  background: var(--lt-ink);
}
[data-kind="lottery"] .lt-tx-icon { background: var(--lt-chrome); }
[data-kind="money"] .lt-tx-icon { background: linear-gradient(135deg, #0e9f6e, #12b981); }
[data-kind="summary"] .lt-tx-icon { background: linear-gradient(135deg, #d97706, var(--lt-marigold)); }
.lt-tx-headinfo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lt-tx-type { font-weight: 700; color: var(--lt-ink); font-size: 0.92rem; }
.lt-tx-time {
  font-size: 0.78rem;
  color: #7a7090;
  font-variant-numeric: tabular-nums;
}
.lt-tx-detail {
  font-size: 0.85rem;
  color: #5f5675;
  line-height: 1.45;
  margin-top: 0.3rem;
}
.lt-tx-detail .lt-tx-flag {
  width: 24px;
  height: 17px;
  object-fit: cover;
  border-radius: 3px;
  vertical-align: -3px;
  margin-inline-end: 0.2rem;
}
.lt-tx-row .lt-bd-stat b,
.lt-tx-card .lt-bd-stat b { font-variant-numeric: tabular-nums; }
/* ช่อง "ทำรายการ" ของบิลหวยมี 3 บรรทัด (ยอด/คอม/สุทธิ) */
.lt-tx-change b { line-height: 1.35; font-size: 1rem; }
.lt-tx-row .lt-bd-stat.is-net b { font-weight: 700; }

/* โหมดการ์ด */
.lt-tx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}
.lt-tx-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  padding: 0.85rem 0.9rem;
  overflow: hidden;
}
.lt-tx-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lt-ink);
}
.lt-tx-card[data-kind="lottery"]::before { background: var(--lt-chrome); }
.lt-tx-card[data-kind="money"]::before { background: #0e9f6e; }
.lt-tx-card[data-kind="summary"]::before { background: var(--lt-marigold); }
.lt-tx-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(43, 33, 64, 0.14);
}
.lt-tx-card-stats .lt-bd-stat { text-align: center; }

/* ตาราง: รายการ | ก่อน | ทำรายการ | หลัง */
@media (min-width: 992px) {
  .lt-bp-table.lt-tx-table {
    grid-template-columns: minmax(320px, 2.4fr) minmax(104px, 0.8fr) minmax(130px, 1fr) minmax(104px, 0.8fr);
  }
  .lt-tx-table .lt-bp-head span:last-child { text-align: end; }
  .lt-tx-table .lt-bp-row { align-items: start; padding-block: 0.7rem; }
  .lt-tx-table .lt-bp-stats .lt-bd-stat { padding-top: 0.15rem; }
  @supports not (grid-template-columns: subgrid) {
    .lt-tx-table .lt-bp-head,
    .lt-tx-table .lt-bp-row {
      grid-template-columns: minmax(320px, 2.4fr) minmax(104px, 0.8fr) minmax(130px, 1fr) minmax(104px, 0.8fr);
    }
  }
}
@media (max-width: 991.98px) {
  .lt-tx-table .lt-bp-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "stats";
  }
  /* จอแคบ: รายละเอียดลงบรรทัดใหม่เต็มความกว้าง (ไม่เบียดข้างชื่อประเภท) */
  .lt-tx-row .lt-bp-main { display: block; }
  .lt-tx-row .lt-tx-detail { margin-top: 0.4rem; }
  .lt-tx-table .lt-bp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding-top: 0.5rem;
    margin-top: 0.15rem;
    border-top: 1px dashed rgba(43, 33, 64, 0.14);
  }
  .lt-tx-table .lt-bp-stats .lt-bd-stat { text-align: center; }
}

/* ── กล่อง "ไม่พบข้อมูล" (ใช้ทุกหน้าใน theme2 ผ่าน window.ltEmptyHtml) ── */
.lt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  margin: 0.25rem 0;
  border: 1.5px dashed rgba(43, 33, 64, 0.16);
  border-radius: 16px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(43, 33, 64, 0.014),
    rgba(43, 33, 64, 0.014) 10px,
    transparent 10px,
    transparent 20px
  );
  text-align: center;
}
.lt-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f3f0f8;
  color: #b0a7c4;
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}
.lt-empty-title {
  font-weight: 700;
  color: var(--lt-ink);
  font-size: 0.98rem;
}
.lt-empty-text {
  font-size: 0.83rem;
  color: #8a80a0;
  max-width: 34ch;
}
/* ในโมดัล/การ์ดเล็ก ใช้ขนาดกระชับลง */
.modal .lt-empty,
.lt-info-tabs .lt-empty {
  padding: 1.25rem 0.75rem;
  border-radius: 12px;
}
.modal .lt-empty-icon,
.lt-info-tabs .lt-empty-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1rem;
}

/* ── หน้า /lottery/link/check (ลิงก์ดูผล) ──────────────────────── */
.lt-lk-sub { font-size: 0.82rem; margin-top: 0.1rem; }
.lt-lk-group {
  font-size: 0.78rem;
  color: #8a80a0;
}
.lt-lk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff !important;
  background: var(--lt-ink);
  border: 0;
  white-space: nowrap;
}
.lt-lk-btn:hover { background: #3b2f57; color: #fff !important; }
.lt-lk-btn i { font-size: 0.75rem; }
.lt-lk-nolink { font-size: 0.8rem; color: #b0a7c4; }
.lt-lk-open b { color: var(--lt-leaf); }
.lt-lk-close b { color: var(--lt-chili); }
.lt-lk-row .lt-bd-stat b { font-variant-numeric: tabular-nums; }

/* โหมดการ์ด */
.lt-lk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.lt-lk-card {
  background: #fff;
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lt-lk-head { display: flex; align-items: center; gap: 0.55rem; }
.lt-lk-headinfo { min-width: 0; }
.lt-lk-name { font-weight: 700; color: var(--lt-ink); line-height: 1.25; }
.lt-lk-times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: #f7f5fb;
}
.lt-lk-time { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.lt-lk-time-label { font-size: 0.7rem; color: #8a80a0; }
.lt-lk-time-num {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;
}
.lt-lk-times .lt-lk-time:first-child .lt-lk-time-num { color: var(--lt-leaf); }
.lt-lk-times .lt-lk-time:last-child .lt-lk-time-num { color: var(--lt-chili); }
.lt-lk-arrow { color: #c4bcd4; font-size: 0.8rem; }
.lt-lk-foot { margin-top: auto; text-align: center; }
.lt-lk-foot .lt-lk-btn { width: 100%; justify-content: center; }

/* ตาราง: หวย/กลุ่ม | เปิดรับ | ปิดรับ | ลิงก์ */
@media (min-width: 992px) {
  .lt-bp-table.lt-lk-table {
    grid-template-columns: minmax(260px, 2.4fr) minmax(96px, 0.7fr) minmax(96px, 0.7fr) max-content;
  }
  /* คอลัมน์ที่ 2 ของหน้านี้เป็นตัวเลขเวลา (ไม่ใช่ป้ายสถานะ) หัวคอลัมน์จึงชิดขวาให้ตรงกับค่า */
  .lt-lk-table .lt-bp-head span:nth-child(2) { text-align: end; }
  .lt-lk-table .lt-bp-head span:last-child { text-align: end; }
  @supports not (grid-template-columns: subgrid) {
    .lt-lk-table .lt-bp-head,
    .lt-lk-table .lt-bp-row {
      grid-template-columns: minmax(260px, 2.4fr) minmax(96px, 0.7fr) minmax(96px, 0.7fr) max-content;
    }
  }
}
@media (max-width: 991.98px) {
  /* จอแคบ: ชื่อหวยบรรทัดบน เวลาสองช่องกว้างเท่ากัน ปุ่มเต็มความกว้างด้านล่าง */
  .lt-lk-table .lt-bp-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "stats"
      "action";
  }
  .lt-lk-table .lt-bp-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding-top: 0.4rem;
  }
  .lt-lk-table .lt-bp-stats .lt-bd-stat { text-align: center; }
  .lt-lk-table .lt-bp-actions { width: 100%; margin-top: 0.5rem; text-align: center; }
  .lt-lk-table .lt-bp-actions .lt-lk-btn { width: 100%; justify-content: center; }
}

/* ── หน้า /news (ประกาศ) ───────────────────────────────────────── */
.lt-news-sub { font-size: 0.82rem; margin-top: 0.1rem; }
.lt-news-count {
  font-size: 0.8rem;
  color: #7a7090;
  background: #f3f0f8;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
.lt-news-count:empty { display: none; }

.lt-news-list { display: flex; flex-direction: column; gap: 0.85rem; }
.lt-news-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  padding: 0.95rem 1.05rem 1.05rem;
  overflow: hidden;
}
.lt-news-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lt-ink);
}
.lt-news-card.is-pin {
  border-color: rgba(255, 176, 32, 0.55);
  background: linear-gradient(180deg, rgba(255, 176, 32, 0.07), rgba(255, 176, 32, 0) 90px), #fff;
}
.lt-news-card.is-pin::before { background: linear-gradient(180deg, var(--lt-marigold), #d97706); }

.lt-news-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-news-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--lt-ink);
  color: #fff;
  font-size: 0.9rem;
}
.lt-news-card.is-pin .lt-news-icon { background: linear-gradient(135deg, var(--lt-marigold), #d97706); }
.lt-news-headinfo { min-width: 0; flex: 1 1 auto; }
.lt-news-title {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lt-ink);
  line-height: 1.35;
}
.lt-news-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #8a80a0;
  font-variant-numeric: tabular-nums;
}
.lt-news-pin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #9a6207;
  background: rgba(255, 176, 32, 0.18);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.lt-news-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4a4160;
  word-break: break-word;
}
.lt-news-body img { max-width: 100%; height: auto; border-radius: 10px; }
.lt-news-body a { color: var(--lt-chili); text-decoration: underline; }
.lt-news-body :last-child { margin-bottom: 0; }
.lt-news-body table { max-width: 100%; }

@media (max-width: 575.98px) {
  .lt-news-card { padding: 0.85rem 0.85rem 0.9rem; border-radius: 14px; }
  .lt-news-title { font-size: 0.98rem; }
  .lt-news-head { flex-wrap: wrap; }
  .lt-news-pin { order: 3; }
}

/* DataTable ที่ตั้ง dom แบบไม่มี row wrapper (เช่น "lrtip" ในหน้าประกาศ)
   — chrome เป็นลูกตรง ๆ ของ .dt-container กฎ nth-child ด้านบนจึงจับสลับกัน ต้องระบุตามคลาส */
.lt-list-body .lt-bill-source > div > div.dt-length,
.lt-list-body .lt-bill-source > div > div.dt-search { order: 1; }
.lt-list-body .lt-bill-source > div > div.dt-info { order: 4; }
.lt-list-body .lt-bill-source > div > div.dt-paging { order: 5; }
.lt-list-body .lt-bill-source > div > table { order: 6; }

/* ── หน้า /user/detail (ส่วนแบ่งที่ได้รับ) ─────────────────────── */
.lt-my-sub { font-size: 0.82rem; margin-top: 0.1rem; }

/* ส่วนแบ่งหุ้น: การ์ดต่อหวย */
.lt-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem;
}
.lt-share-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--lt-line);
  border-radius: 14px;
  background: #fff;
}
.lt-share-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--lt-ink);
  font-size: 0.9rem;
  line-height: 1.25;
}
.lt-share-val {
  flex: none;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--lt-leaf);
  font-variant-numeric: tabular-nums;
}
.lt-share-val span { font-size: 0.8rem; font-weight: 600; margin-inline-start: 0.1rem; }
.lt-share-card.is-zero .lt-share-val { color: #b0a7c4; }

/* การ์ดต่อหวย (อัตราจ่าย / แทงสูงสุด) */
.lt-my-lots { display: flex; flex-direction: column; gap: 0.75rem; }
.lt-my-lot {
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  background: #fff;
  padding: 0.75rem 0.85rem 0.85rem;
}
.lt-my-lot-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.65rem;
  border-bottom: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-my-lot-name { font-weight: 700; color: var(--lt-ink); }
/* แท็บ "จำกัดต่อเลขต่อรอบ" ในหน้าข้อมูลของฉัน: ชิปสถานะบนหัวการ์ด + การ์ดที่ปิดใช้หรี่ลง */
.lt-my-numchip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.7;
  background: rgba(138, 128, 160, 0.14);
  color: #8a80a0;
  white-space: nowrap;
}
.lt-my-numchip.is-on { background: rgba(109, 91, 208, 0.12); color: #6d5bd0; }
.lt-my-numchip i { font-size: 0.6rem; }
.lt-my-lot.is-off { opacity: 0.75; }
.lt-my-type-pay.is-muted { color: #8a80a0; font-weight: 600; }
.lt-my-more {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid var(--lt-line);
  background: #fff;
  color: #7a7090;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.lt-my-more:hover { border-color: rgba(240, 62, 82, 0.4); color: var(--lt-chili); }
.lt-my-more i { font-size: 0.65rem; transition: transform 0.18s ease; }
.lt-my-more:not(.collapsed) i { transform: rotate(180deg); }
.lt-my-more-count {
  background: var(--lt-ink);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
}

/* 6-7 ช่องต่อหวย */
.lt-my-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.4rem;
}
.lt-my-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.35rem;
  border-radius: 12px;
  background: #f7f5fb;
  text-align: center;
}
.lt-my-type-label { font-size: 0.72rem; color: #8a80a0; }
.lt-my-type-pay {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;
}
.lt-my-type-com {
  font-size: 0.72rem;
  font-weight: 600;
  color: #d97706;
  background: rgba(255, 176, 32, 0.16);
  border-radius: 999px;
  padding: 0 0.4rem;
}

/* อัตราเพิ่มเติม (tier อื่น) */
.lt-my-extra { margin-top: 0.7rem; }
.lt-my-extra-row {
  border-top: 2px dashed rgba(43, 33, 64, 0.12);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}
.lt-my-extra-row:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.lt-my-extra-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lt-chili);
  margin-bottom: 0.35rem;
}
.lt-my-types.is-sm .lt-my-type { padding: 0.35rem 0.3rem; background: #fbf9fd; }
.lt-my-types.is-sm .lt-my-type-pay { font-size: 0.9rem; }

@media (max-width: 575.98px) {
  .lt-my-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-share-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lt-my-lot-head { flex-wrap: wrap; }
  .lt-my-more { margin-inline-start: 0; width: 100%; justify-content: center; }
}

/* สีแท็บย่อย — ใช้สีจากหลังบ้านถ้าหน้านั้นตั้ง --lt-accent ไว้ (เช่นหน้า bet) ไม่งั้นใช้สีหมึกของธีม
   (ไม่ตั้งสีไว้ก่อนหน้านี้ หน้าที่ไม่ได้ override เลยได้สีม่วงของ Vuexy ติดมา) */
.lt-subtabs .nav-link {
  color: #7a7090;
  font-weight: 600;
  border-radius: 16px;
  background: transparent;
}
.lt-subtabs .nav-link:hover { color: var(--lt-ink); }
.lt-subtabs .nav-link.active,
.lt-subtabs .nav-link.active:hover,
.lt-subtabs .nav-link.active:focus {
  background: var(--lt-accent, var(--lt-ink));
  color: var(--lt-accent-contrast, #fff);
  box-shadow: 0 2px 8px rgba(43, 33, 64, 0.18);
}
.lt-my-search { margin-bottom: 0.75rem; }

/* แท็บย่อยยาวเกินจอ (เช่น กลุ่มหวยหลายกลุ่มบนมือถือ) — ให้เลื่อนแนวนอนในแถบ ไม่ล้นออกนอกการ์ด
   หน้าไหนที่อยากให้ตัดบรรทัดแทน ใส่คลาส .flex-wrap ของ Bootstrap ได้ (มี !important จะชนะกฎนี้) */
.lt-subtabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lt-subtabs::-webkit-scrollbar { display: none; }
.lt-subtabs .nav-item { flex: 0 0 auto; }
.lt-subtabs .nav-link { white-space: nowrap; }

/* ── โมดัลตั้งค่า (theme2) ─────────────────────────────────────── */
.lt-set-dialog { max-width: 560px; }
.lt-set-sub { font-size: 0.8rem; color: #8a80a0; margin-top: 0.1rem; }

.lt-set-group + .lt-set-group { margin-top: 1rem; }
.lt-set-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a80a0;
  padding: 0 0.15rem 0.4rem;
}
.lt-set-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--lt-line);
  border-radius: 14px;
  background: #fff;
}
.lt-set-row + .lt-set-row { margin-top: 0.4rem; }
.lt-set-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.95rem;
  background: var(--lt-ink);
}
.lt-set-icon-sound { background: linear-gradient(135deg, var(--lt-chili), #f0602c); }
.lt-set-icon-view { background: linear-gradient(135deg, #2ba7c9, #38b6d9); }
.lt-set-icon-clock { background: linear-gradient(135deg, #d97706, var(--lt-marigold)); }
.lt-set-icon-pin { background: linear-gradient(135deg, #0e9f6e, #12b981); }
.lt-set-icon-bank { background: linear-gradient(135deg, #6d5bd0, #8b7ae8); }
.lt-set-text { flex: 1 1 auto; min-width: 0; }
.lt-set-name { font-weight: 600; color: var(--lt-ink); line-height: 1.3; }
.lt-set-desc { font-size: 0.76rem; color: #8a80a0; line-height: 1.35; }
.lt-set-switch { flex: none; margin: 0; }

/* โหมดการแสดงผล: segmented */
.lt-set-seg {
  flex: none;
  display: inline-flex;
  background: #f1eef5;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lt-set-seg-btn {
  border: 0;
  background: transparent;
  color: #7a7090;
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}
.lt-set-seg-btn.active {
  background: var(--lt-ink);
  color: #fff;
  box-shadow: 0 2px 6px rgba(43, 33, 64, 0.2);
}

.lt-set-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid var(--lt-line);
  background: #fff;
  color: var(--lt-ink);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
}
.lt-set-btn:hover { border-color: var(--lt-chili); color: var(--lt-chili); }
.lt-set-btn i { font-size: 0.78rem; }

/* ท้ายโมดัล */
.lt-set-foot { gap: 0.5rem; }
.lt-set-cancel,
.lt-set-save {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.lt-set-cancel { background: #fff; border-color: var(--lt-line); color: #7a7090; }
.lt-set-cancel:hover { color: var(--lt-ink); border-color: #c9c2d6; }
.lt-set-save {
  background: var(--lt-chrome);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 12px rgba(240, 62, 82, 0.28);
}
.lt-set-save:hover { filter: brightness(1.05); color: #fff; }
.lt-set-save i { font-size: 0.8rem; }

@media (max-width: 575.98px) {
  .lt-set-row { flex-wrap: wrap; }
  .lt-set-row-stack .lt-set-seg { width: 100%; justify-content: center; margin-top: 0.15rem; }
  .lt-set-row-stack .lt-set-seg-btn { flex: 1 1 0; }
  .lt-set-foot { flex-direction: column-reverse; }
  .lt-set-foot .lt-set-cancel,
  .lt-set-foot .lt-set-save { width: 100%; justify-content: center; }
}

/* สวิตช์ของธีม (ใช้ในโมดัลตั้งค่า) — ไม่พึ่งคลาส .switch ของ Vuexy ที่วาง slider แบบ absolute แล้ว label กว้าง 0 */
.lt-tgl {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 27px;
  flex: none;
  margin: 0;
  cursor: pointer;
}
.lt-tgl input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lt-tgl-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ddd8e6;
  transition: background 0.18s ease;
}
.lt-tgl-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(43, 33, 64, 0.25);
  transition: transform 0.18s ease;
}
.lt-tgl input:checked + .lt-tgl-track { background: var(--lt-leaf); }
.lt-tgl input:checked + .lt-tgl-track::after { transform: translateX(21px); }
.lt-tgl input:focus-visible + .lt-tgl-track {
  outline: 2px solid var(--lt-chili);
  outline-offset: 2px;
}

/* ── หน้า /lottery/history/:name (ประวัติ/สถิติของหวย) ─────────── */
.lt-hist-hero { overflow: hidden; }
.lt-hist-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.lt-hist-back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f3f0f8;
  color: var(--lt-ink);
}
.lt-hist-back:hover { background: var(--lt-ink); color: #fff; }
.lt-hist-flag {
  flex: none;
  width: 46px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(43, 33, 64, 0.2);
}
.lt-hist-flag img { width: 100%; height: 100%; object-fit: cover; }
.lt-hist-title { flex: 1 1 auto; min-width: 0; }
.lt-hist-group { font-size: 0.8rem; color: #8a80a0; }
.lt-hist-next {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  background: #f7f5fb;
}
.lt-hist-next-label { font-size: 0.7rem; color: #8a80a0; }
.lt-hist-next-date { font-weight: 700; color: var(--lt-ink); }
.lt-hist-next-time { font-size: 0.72rem; color: #7a7090; font-variant-numeric: tabular-nums; }
.lt-hist-next.is-wait .lt-hist-next-date { color: var(--lt-chili); }

.lt-hist-latest {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 2px dashed rgba(43, 33, 64, 0.14);
}
.lt-hist-latest-label { font-size: 0.8rem; color: #8a80a0; margin-bottom: 0.5rem; }
.lt-hist-latest-nums { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lt-hist-num {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.5rem;
  border-radius: 14px;
  background: #f7f5fb;
}
.lt-hist-num-label { font-size: 0.72rem; color: #8a80a0; }
.lt-hist-num-val {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;
}
.lt-hist-num.is-main { background: var(--lt-ink); }
.lt-hist-num.is-main .lt-hist-num-label { color: rgba(255, 255, 255, 0.65); }
.lt-hist-num.is-main .lt-hist-num-val { color: var(--lt-marigold); font-size: 1.85rem; }

/* ตัวเลือกจำนวนงวด */
.lt-hist-sub { font-size: 0.8rem; margin-top: 0.1rem; }
.lt-hist-scope {
  display: inline-flex;
  background: #f1eef5;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lt-hist-scope::-webkit-scrollbar { display: none; }
.lt-hist-scope-btn {
  border: 0;
  background: transparent;
  color: #7a7090;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}
.lt-hist-scope-btn.active {
  background: var(--lt-ink);
  color: #fff;
  box-shadow: 0 2px 6px rgba(43, 33, 64, 0.2);
}

/* แผงสถิติ */
.lt-hist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}
.lt-hist-panel {
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  padding: 0.8rem 0.85rem 0.9rem;
  background: #fff;
}
.lt-hist-panel-wide { grid-column: 1 / -1; }
.lt-hist-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8a80a0;
  margin-bottom: 0.6rem;
}
.lt-hist-none { font-size: 0.85rem; color: #b0a7c4; text-align: center; padding: 0.6rem 0; }

/* อันดับเลขที่ออกบ่อย */
.lt-hist-toprow {
  display: grid;
  grid-template-columns: 22px auto auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.lt-hist-toprow + .lt-hist-toprow { border-top: 1px dashed rgba(43, 33, 64, 0.1); }
.lt-hist-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1eef5;
  color: #8a80a0;
  font-size: 0.7rem;
  font-weight: 700;
}
.lt-hist-toprow.is-first .lt-hist-rank { background: var(--lt-chrome); color: #fff; }
.lt-hist-topnum {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--lt-ink);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  min-width: 2.2rem;
}
.lt-hist-topcount { font-size: 0.76rem; color: #7a7090; white-space: nowrap; }
.lt-hist-topbar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #f1eef5;
  overflow: hidden;
}
.lt-hist-topbar i { display: block; height: 100%; background: var(--lt-chrome); }

/* กราฟแท่งเลขโดด */
.lt-hist-bars {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.25rem;
  align-items: end;
}
.lt-hist-bar { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.lt-hist-bar-track {
  width: 100%;
  height: 64px;
  border-radius: 6px;
  background: #f4f1f8;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.lt-hist-bar-track i {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #f0602c, var(--lt-chili));
  border-radius: 6px 6px 0 0;
  min-height: 2px;
}
.lt-hist-bar.is-max .lt-hist-bar-track i { background: linear-gradient(180deg, var(--lt-marigold), #d97706); }
.lt-hist-bar.is-zero .lt-hist-bar-track i { background: #ddd8e6; }
.lt-hist-bar-count { font-size: 0.7rem; font-weight: 700; color: var(--lt-ink); font-variant-numeric: tabular-nums; }
.lt-hist-bar-digit { font-size: 0.72rem; color: #8a80a0; }

/* เลขที่ไม่ออกนาน */
.lt-hist-drylist { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lt-hist-dry {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: #f7f5fb;
  font-size: 0.8rem;
  color: #5f5675;
}
.lt-hist-dry-digit {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lt-ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ตารางผลย้อนหลัง */
.lt-hist-thead,
.lt-hist-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(70px, 1fr));
  align-items: center;
  gap: 0.5rem;
}
.lt-hist-thead {
  position: relative;
  padding: 0.6rem 0;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.lt-hist-thead::before {
  content: "";
  position: absolute;
  inset: 0 -0.55rem;
  border-radius: 10px;
  background-image: linear-gradient(90deg, var(--lt-chili), #f0602c 55%, #d97706);
  box-shadow: 0 2px 8px rgba(240, 62, 82, 0.25);
}
.lt-hist-thead > span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(43, 33, 64, 0.25);
}
.lt-hist-thead span:not(:first-child) { text-align: center; }
.lt-hist-row { padding: 0.55rem 0; }
.lt-hist-row + .lt-hist-row { border-top: 2px dashed rgba(43, 33, 64, 0.12); }
.lt-hist-row.is-latest { background: rgba(255, 176, 32, 0.09); border-radius: 12px; }
.lt-hist-date { font-size: 0.88rem; color: #5f5675; padding-inline-start: 0.15rem; }
.lt-hist-cell {
  text-align: center;
  font-weight: 700;
  color: var(--lt-ink);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.lt-hist-cell.is-main { font-size: 1.05rem; color: var(--lt-chili); }
.lt-hist-count { font-size: 0.8rem; color: #7a7090; }

@media (max-width: 575.98px) {
  .lt-hist-next { width: 100%; align-items: flex-start; text-align: start; }
  .lt-hist-num-val { font-size: 1.3rem; }
  .lt-hist-num.is-main .lt-hist-num-val { font-size: 1.55rem; }
  .lt-hist-bar-track { height: 52px; }
  .lt-hist-bars { gap: 0.15rem; }
  .lt-hist-thead,
  .lt-hist-row { grid-template-columns: minmax(84px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
  .lt-hist-date { font-size: 0.8rem; }
}

/* ป้ายบอกว่ากดดูสถิติย้อนหลังได้ — โชว์เฉพาะการ์ดหวยที่ปิดรับ/ยังไม่เปิด (index.js ใส่ .bg-light ให้)
   .lt-ticket ที่เปิดรับอยู่จะไม่มี .bg-light จึงไม่แสดง */
.lt-stats-hint { display: none; }
.lt-ticket.bg-light .lt-stats-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--lt-chili);
}
.lt-ticket.bg-light .lt-stats-hint i { font-size: 0.62rem; }
.lt-ticket-link:hover .lt-ticket.bg-light .lt-stats-hint { text-decoration: underline; }
.lt-hist-next.is-open { background: rgba(14, 159, 110, 0.1); }
.lt-hist-next.is-open .lt-hist-next-label { color: var(--lt-leaf); font-weight: 700; }
.lt-hist-next.is-waiting-result .lt-hist-next-date { color: #2ba7c9; }
.lt-hist-next-btn {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--lt-chrome);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(240, 62, 82, 0.28);
}
.lt-hist-next-btn i { font-size: 0.72rem; }

/* ── โมดัลเปลี่ยนรหัสผ่าน (theme2) ─────────────────────────────── */
.lt-pw-dialog { max-width: 460px; }
.lt-pw-sub { font-size: 0.8rem; color: #8a80a0; margin-top: 0.1rem; }
.lt-pw-form { display: flex; flex-direction: column; gap: 0.85rem; }
.lt-pw-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lt-ink);
  margin-bottom: 0.3rem;
}
.lt-pw-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 0.6rem 0 0.75rem;
  border: 1.5px solid var(--lt-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lt-pw-input:focus-within {
  border-color: var(--lt-chili);
  box-shadow: 0 0 0 3px rgba(240, 62, 82, 0.12);
}
.lt-pw-ico { color: #b0a7c4; font-size: 0.85rem; flex: none; }
.lt-pw-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--lt-ink);
  letter-spacing: 0.02em;
}
.lt-pw-input input::placeholder { color: #b8b0c8; letter-spacing: 0; }
.lt-pw-eye {
  flex: none;
  border: 0;
  background: transparent;
  color: #b0a7c4;
  padding: 0.3rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}
.lt-pw-eye:hover { color: var(--lt-ink); background: #f3f0f8; }
.lt-pw-eye.is-on { color: var(--lt-chili); }

/* แถบวัดความปลอดภัย */
.lt-pw-meter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.45rem;
}
.lt-pw-meter span {
  height: 4px;
  flex: 1 1 0;
  border-radius: 999px;
  background: #eeeaf4;
  transition: background 0.18s ease;
}
.lt-pw-meter em {
  flex: none;
  font-style: normal;
  font-size: 0.72rem;
  color: #8a80a0;
  margin-inline-start: 0.35rem;
  min-width: 4.2rem;
  text-align: end;
}
.lt-pw-meter[data-score="1"] span:nth-child(1) { background: var(--lt-chili); }
.lt-pw-meter[data-score="2"] span:nth-child(-n + 2) { background: var(--lt-marigold); }
.lt-pw-meter[data-score="3"] span { background: var(--lt-leaf); }
.lt-pw-meter[data-score="1"] em { color: var(--lt-chili); }
.lt-pw-meter[data-score="2"] em { color: #d97706; }
.lt-pw-meter[data-score="3"] em { color: var(--lt-leaf); }

/* เงื่อนไขรหัสผ่าน */
.lt-pw-rules {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  background: #f7f5fb;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lt-pw-rules li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #8a80a0;
}
.lt-pw-rules li i { font-size: 0.5rem; }
.lt-pw-rules li.is-ok { color: var(--lt-leaf); font-weight: 600; }
.lt-pw-rules li.is-ok i::before { content: "\f00c"; font-size: 0.7rem; }

.lt-pw-pin { margin-top: 0.1rem; }
.lt-set-save:disabled,
.lt-set-save[disabled] {
  background: #ddd8e6;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

/* ปุ่มปิดของโมดัลธีม — Vuexy วางไว้ absolute ชิดมุมเกินไป (ทับแถบด้านบน/มุมโค้ง) */
.lt-body .modal .btn-close {
  /* Bootstrap ตั้ง .btn-close เป็น content-box + padding ทำให้กล่องบานเป็น ~40px
     และไอคอนกากบาทเล็กจ๋อยอยู่กลางวงใหญ่ — บังคับเป็น border-box ขนาดคงที่ */
  box-sizing: border-box !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  inset-inline-start: auto !important;
  z-index: 5;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50%;
  background-color: rgba(43, 33, 64, 0.06);
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  transform: none !important;
}
.lt-body .modal .btn-close:hover {
  opacity: 1;
  background-color: rgba(43, 33, 64, 0.12);
}

/* ── เมนูผู้ใช้ (dropdown มุมขวาบน) ─────────────────────────────── */
.lt-user-dropdown {
  min-width: 268px;
  padding: 0.5rem;
  overflow: hidden;
}
.lt-ud-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem 0.7rem;
}
.lt-ud-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--lt-chrome);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 10px rgba(240, 62, 82, 0.3);
}
.lt-ud-id { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }
.lt-ud-name {
  font-weight: 700;
  color: var(--lt-ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-ud-role {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7090;
  background: #f1eef5;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ยอดเงินในเมนู (กดเพื่อรีเฟรชได้เหมือนบนแถบ header) */
.lt-ud-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  background: var(--lt-ink);
  color: #fff !important;
}
.lt-ud-balance:hover { background: #3b2f57; }
.lt-ud-balance-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}
.lt-ud-balance-val {
  font-weight: 700;
  color: var(--lt-marigold);
  font-variant-numeric: tabular-nums;
}

/* รายการเมนู */
.lt-user-dropdown .lt-ud-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  white-space: normal;
}
.lt-user-dropdown .lt-ud-item:hover,
.lt-user-dropdown .lt-ud-item:focus {
  background: #f7f5fb;
  color: var(--lt-ink);
}
.lt-ud-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.85rem;
  background: var(--lt-ink);
}
.lt-ud-ico-user { background: linear-gradient(135deg, #6d5bd0, #8b7ae8); }
.lt-ud-ico-set { background: linear-gradient(135deg, #2ba7c9, #38b6d9); }
.lt-ud-ico-pw { background: linear-gradient(135deg, #0e9f6e, #12b981); }
.lt-ud-ico-link { background: linear-gradient(135deg, #d97706, var(--lt-marigold)); }
.lt-ud-ico-tx { background: linear-gradient(135deg, var(--lt-chili), #f0602c); }
.lt-ud-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-weight: 600;
  color: var(--lt-ink);
}
.lt-ud-text small { font-size: 0.7rem; font-weight: 400; color: #8a80a0; }
.lt-ud-go { color: #c4bcd4; font-size: 0.9rem; }

/* ออกจากระบบ */
.lt-ud-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  padding: 0.55rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--lt-chili) !important;
  background: rgba(240, 62, 82, 0.08);
  border: 1.5px solid rgba(240, 62, 82, 0.25);
}
.lt-ud-logout:hover {
  background: var(--lt-chili);
  border-color: var(--lt-chili);
  color: #fff !important;
}
.lt-ud-logout i { font-size: 0.8rem; }


/* มือถือ: โมดัลกางเกือบเต็มจอ (เดิมเหลือขอบซ้าย-ขวาเยอะ เสียพื้นที่) */
@media (max-width: 767.98px) {
  .lt-body .modal .modal-dialog {
    max-width: none !important;
    width: auto !important;
    margin: 0.5rem;
  }
  .lt-body .modal .modal-content { border-radius: 16px; }
  .lt-body .modal .modal-header,
  .lt-body .modal .modal-body,
  .lt-body .modal .modal-footer { padding-inline: 0.85rem; }
}

/* ไอคอนกากบาทของเทมเพลตวาดด้วย CSS mask ที่ ::before (ขนาด 11px สีเทาอ่อน)
   จึงต้องคุมขนาด/สีที่ pseudo-element ไม่ใช่ background ของปุ่ม */
.lt-body .modal .btn-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  opacity: 1;
}
.lt-body .modal .btn-close::before {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--lt-ink) !important;
  transition: background-color 0.15s ease;
}
.lt-body .modal .btn-close:hover {
  background-color: rgba(43, 33, 64, 0.08);
  opacity: 1;
}
.lt-body .modal .btn-close:hover::before { background-color: var(--lt-chili) !important; }


/* การ์ดที่มีเมนู dropdown อยู่ข้างใน ต้องไม่ตัดเนื้อหาที่ล้น ไม่งั้นเมนูจะถูกซ่อน (กดแล้วเหมือนไม่มีอะไรเกิดขึ้น) */
.lt-bill-card,
.lt-rc-card { overflow: visible; }
.lt-bill-card > .lt-ticket-band,
.lt-rc-card > .lt-ticket-band { border-radius: 16px 16px 0 0; }
.lt-bill-card .dropdown-menu,
.lt-rc-card .dropdown-menu { z-index: 1056; }


/* ── ต้นฉบับรูปที่แนบไปกับบิล (html2canvas) ─────────────────────────
   element ที่ถูกแคปต้องมี layout จริง ๆ ถ้า display:none จะได้ canvas 0x0
   แล้ว canvas.toBlob() คืน null -> รูปไม่ถูกอัปโหลด (เคยทำให้รูป "เลขตัด-อั้น" หายไปจากบิล)
   จึงซ่อนด้วยการย้ายออกนอกจอแทน */
.lt-capture-src {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  width: 700px !important;
  max-width: 700px !important;
  overflow: visible !important;
  pointer-events: none;
  z-index: -1;
}
.lt-capture-src table {
  width: 100% !important;
  white-space: normal !important;
  margin: 0;
}
/* การ์ดต้นฉบับรูป "เลขตัด-อั้น" ที่แนบไปกับบิล (bet #ltLimitCapture — เฉพาะ member ไม่ต้องซิงก์ company/agent)
   ตัวรายการใช้ .lt-limit-* ชุดเดียวกับที่แสดงบนหน้า */
.lt-limit-capture {
  background: #fff;
  color: #2b2140;
  font-family: var(--lt-font-body);
  border: 1px solid var(--lt-line);
}
.lt-limit-capture-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 2px dashed rgba(43, 33, 64, 0.12);
}
.lt-limit-capture-info { flex: 1; min-width: 0; }
.lt-limit-capture-name { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.lt-limit-capture-date { font-size: 0.85rem; color: #6f6884; }
.lt-limit-capture-title {
  flex: none;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lt-chili);
  background: rgba(240, 62, 82, 0.1);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}
.lt-limit-capture-body { padding: 0.25rem 1rem 0.5rem; }
.lt-limit-capture-body .lt-limit-row { padding: 0.6rem 0; }
.lt-limit-capture-foot {
  padding: 0.45rem 1rem 0.6rem;
  font-size: 0.75rem;
  color: #a9a1bd;
  text-align: right;
  border-top: 1px solid var(--lt-line);
}

/* โมดัลรายละเอียดบิล (หน้า bet / รายการโพย): ตัวเลข จ่าย/ยอด/คอม กระจายเต็มความกว้างกลางแถว คอลัมน์ตรงกันทุกแถว
   ของเดิมเป็น flex ชิดซ้าย พอโมดัลกว้างจะเหลือที่ว่างกลางแถวเยอะ (กฎเดียวกับ company — ใช้กับทุกโมดัล .lt-detail-modal ที่มีแถว .lt-bd-row) */
.lt-detail-modal .lt-bd-row { gap: 0.9rem; }
.lt-detail-modal .lt-bd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 0.3rem 0.6rem;
  align-items: center;
}
.lt-detail-modal .lt-bd-net { min-width: 6.5rem; }
@media (max-width: 767.98px) {
  .lt-detail-modal .lt-bd-stats { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
  .lt-detail-modal .lt-bd-net { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   เมนู "จัดการ" ในแต่ละแถว/การ์ดของหน้า theme2 (กฎเดียวกับ company)
   ผูกกับ .lt-list-body (card-body ของการ์ดรายการ) — หน้าใหม่ที่ใช้โครงเดียวกันได้หน้าตานี้อัตโนมัติ
   ═══════════════════════════════════════════════════════════════ */
.lt-list-body .dropdown-menu {
  min-width: 250px;
  padding: 0.4rem;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(43, 33, 64, 0.18);
  z-index: 1056;
}
.lt-list-body .dropdown-item {
  display: grid !important;
  grid-template-columns: 36px 1fr;
  grid-template-areas:
    "ico title"
    "ico sub";
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  font-weight: 600;
  color: var(--lt-ink);
  white-space: normal;
}
.lt-list-body .dropdown-item + .dropdown-item { margin-top: 0.15rem; }
.lt-list-body .dropdown-item:hover,
.lt-list-body .dropdown-item:focus { background: #f7f5fb; color: var(--lt-ink); }
/* ไอคอน: คลาส icon-14px/icon-base ของเทมเพลตล็อกขนาดด้วย !important ต้องทับให้หมด */
.lt-list-body .dropdown-item > i,
.lt-list-body .dropdown-item > span.fa,
.lt-list-body .dropdown-item > span[class*="fa-"] {
  grid-area: ico;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #fff !important;
  background: var(--lt-ink);
}
/* คำอธิบายใต้ชื่อเมนู (markup มาจากสคริปต์ จึงใส่ผ่าน ::after) */
.lt-list-body .dropdown-item::after {
  grid-area: sub;
  font-size: 0.75rem;
  font-weight: 400;
  color: #8a80a0;
  line-height: 1.25;
}
.lt-list-body .dropdown-divider { margin: 0.3rem 0.2rem; opacity: 0.5; }
/* สีไอคอนตามคลาส text-* ที่สคริปต์ใส่มา */
.lt-list-body .dropdown-item > i.text-warning { background: linear-gradient(135deg, #ffc857, var(--lt-marigold)); }
.lt-list-body .dropdown-item > i.text-danger { background: linear-gradient(135deg, var(--lt-neg-dark), var(--lt-chili)); }
.lt-list-body .dropdown-item > i.text-info { background: linear-gradient(135deg, #2ba7c9, #38b6d9); }
.lt-list-body .dropdown-item > i.text-success { background: linear-gradient(135deg, #12b981, #0e9f6e); }
.lt-list-body .dropdown-item > i.text-primary { background: linear-gradient(135deg, #8b7ae8, #6d5bd0); }
.lt-list-body .dropdown-item > i.text-secondary { background: linear-gradient(135deg, #a79fbb, #8a80a0); }
/* คำอธิบายต่อเมนูของหน้า /lottery/bill (member) — ต้องผูกกับ .dropdown-item เสมอ */
.lt-list-body .dropdown-item.btn-detail::after { content: "รายการเลข · รายละเอียดโพย"; }
.lt-list-body .dropdown-item.btn-is-transferred::after { content: "ยืนยันว่าชำระเงินโพยนี้แล้ว"; }
.lt-list-body .dropdown-item.btn-cancel::after { content: "ยกเลิกโพยนี้ (คืนเครดิต)"; }

/* ═══════════════════════════════════════════════════════════════
   ซ่อน scrollbar แนวตั้งของหน้าทั้งหมด — หน้ายังเลื่อนได้ด้วยล้อเมาส์/สัมผัส
   แต่ไม่มีแถบโผล่มาดัน UI ตอนเนื้อหายาวขึ้น; ความกว้าง scrollbar ที่ Bootstrap/เทมเพลตวัดได้จะเป็น 0
   จึงไม่มี padding ชดเชยตอนเปิดโมดัล (กฎเดียวกันทั้ง member/company/agent — แก้ต้องซิงก์)
   ═══════════════════════════════════════════════════════════════ */
html::-webkit-scrollbar {
  display: none; /* ซ่อน scrollbar (Chrome/Safari/Edge) */
}
html {
  -ms-overflow-style: none; /* IE + Edge old */
  scrollbar-width: none; /* Firefox */
}
body.modal-open { padding-right: 0 !important; }
/* SweetAlert2 (ทุก Swal.fire ที่มี backdrop รวม "กรุณารอสักครู่..") วัดความกว้างสกอลบาร์จาก div ทดสอบ (ได้ 15px เมื่อ macOS ต่อเมาส์ / Windows)
   แล้วใส่ padding-right ให้ body แบบ inline เพื่อชดเชยสกอลบาร์ที่มันคิดว่าหายไป — แต่สกอลบาร์ของหน้าถูกซ่อนอยู่แล้ว
   เนื้อหาทั้งหน้าจึงถูกดันไปซ้ายทุกครั้งที่เปิด → !important ชนะ inline style */
body.swal2-shown { padding-right: 0 !important; }

/* ── หน้า /login (theme2) — member เท่านั้น ไม่มีใน company/agent จึงไม่ต้องซิงก์ ──
   แนวคิด: ทั้งหน้าเป็น "ตั๋วใบเดียว" .lt-tk = ต้นขั้วสีแบรนด์ (.lt-tk-stub) + รอยปรุ (.lt-tk-perf) + ตัวตั๋วที่เป็นฟอร์ม (.lt-tk-body)
   มือถือเรียงบน-ล่าง / desktop (≥992px) เรียงซ้าย-ขวา — ไม่มี hero แยกและไม่มีการ์ดซ้อน
   ใช้ร่วม: .lt-pw-field/.lt-pw-input/.lt-pw-eye (ฟิลด์ของโมดัลเปลี่ยนรหัสผ่าน), .lt-tgl,
   .lt-set-cancel, .lt-detail-modal + .lt-ticket-band (เชลล์โมดัล PIN) */
.lt-login-body {
  margin: 0;
  /* แสงสีแบรนด์จาง ๆ 2 มุมบน canvas ให้พื้นไม่แบน — รัศมีสั้น (≤300px) เพื่อไม่ทับตำแหน่งรอยบากของตั๋ว
     (รอยบากเป็นวงกลมสีพื้นทึบ ถ้าพื้นตรงนั้นมีสีจะเห็นขอบ) */
  background:
    radial-gradient(360px 300px at 0% 0%, rgba(240, 62, 82, 0.16), transparent 70%),
    radial-gradient(380px 320px at 100% 100%, rgba(255, 176, 32, 0.2), transparent 70%),
    var(--lt-canvas);
}
.lt-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem 1rem 1.4rem;
}
.lt-tk {
  position: relative;
  display: grid;
  /* minmax(0,…) + min-width:0 กันข้อความไทยยาว ๆ (ไม่มีช่องว่าง) ดัน track กว้างเกินจอจนหน้าเลื่อนแนวนอนได้ */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 440px;
  background: var(--lt-card);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(43, 33, 64, 0.14);
  overflow: hidden;
  /* เข้าหน้าแบบ fade อย่างเดียว — ห้ามใส่ translate */
  animation: ltTkIn 0.3s ease both;
}
@keyframes ltTkIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lt-tk-stub,
.lt-tk-body { min-width: 0; }
.lt-tk-brand,
.lt-tk-line,
.lt-login-sub,
.lt-login-help span { overflow-wrap: anywhere; }

/* ต้นขั้ว */
.lt-tk-stub {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.7rem 1.25rem 1.85rem;
  background: var(--lt-chrome);
  color: #fff;
  text-align: center;
}
.lt-tk-stub::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -130px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
/* ชื่อเว็บพิมพ์จาง ๆ แนวตั้งริมรอยปรุ เหมือนตัวพิมพ์ข้างต้นขั้วตั๋ว — desktop เท่านั้น */
.lt-tk-mark { display: none; }
/* กล่องโลโก้ใหญ่กว่าเดิม (76/92px) เพราะไฟล์โลโก้ที่อัปโหลดมักมีขอบโปร่งใสรอบตัวงาน ~20% ต่อด้าน ตัวโลโก้จริงจึงเหลือเล็กมาก */
.lt-tk-logo {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.3);
  padding: 4px;
  box-shadow: 0 10px 26px rgba(43, 33, 64, 0.28);
}
.lt-tk-brand {
  font-family: var(--lt-font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0.15rem 0 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(43, 33, 64, 0.25);
}
.lt-tk-role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  background: rgba(43, 33, 64, 0.45);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lt-tk-line {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(43, 33, 64, 0.25);
}

/* รอยปรุระหว่างต้นขั้วกับตัวตั๋ว: เส้นประ + รอยบากครึ่งวงกลมสีพื้นหลัง (ตั๋ว overflow:hidden ตัดให้เหลือครึ่ง)
   มือถือ = เส้นแนวนอน รอยบากซ้าย/ขวา; desktop = เส้นแนวตั้ง รอยบากบน/ล่าง */
.lt-tk-perf {
  position: relative;
  z-index: 1;
  height: 0;
  border-top: 2px dashed rgba(43, 33, 64, 0.16);
}
.lt-tk-perf::before,
.lt-tk-perf::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lt-canvas);
  box-shadow: inset 0 1px 3px rgba(43, 33, 64, 0.12);
}
.lt-tk-perf::before { left: -11px; }
.lt-tk-perf::after { right: -11px; }

/* ตัวตั๋ว (ฟอร์ม) */
.lt-tk-body {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.35rem 1.3rem;
}
.lt-tk-head { margin-bottom: 1.05rem; }
.lt-login-title {
  font-family: var(--lt-font-body);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0;
  color: var(--lt-ink);
}
.lt-login-sub { color: var(--lt-ink-soft); font-size: 0.85rem; margin: 0.25rem 0 0; }
#formLogin {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* server แปลงชื่อผู้ใช้เป็นตัวใหญ่เสมอ — โชว์ให้ตรงกับที่เก็บ (placeholder คงเดิม) */
.lt-login-body #username { text-transform: uppercase; }
.lt-login-body #username::placeholder { text-transform: none; }
.lt-login-body .lt-pw-input input { font-size: 1rem; }
/* autofill ของ Chrome ทาสีพื้นช่องเป็นฟ้า/เหลืองทับกล่องมน — บังคับพื้นขาวไว้ */
.lt-login-body .lt-pw-input input:-webkit-autofill,
.lt-login-body .lt-pw-input input:-webkit-autofill:hover,
.lt-login-body .lt-pw-input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--lt-ink);
  caret-color: var(--lt-ink);
}
/* focus ของหน้านี้ใช้สีหมึก ไม่ใช้สีชิลีของธีม — ช่องแรกถูก auto-focus ตอนเปิดหน้า ถ้าขอบแดงจะดูเหมือน error ทั้งที่ยังไม่ได้พิมพ์
   (ต้องอยู่ก่อนกฎ .is-invalid ด้านล่างเพื่อให้สถานะ error ชนะเมื่อ focus อยู่) */
.lt-login-body .lt-pw-input:focus-within {
  border-color: var(--lt-ink);
  box-shadow: 0 0 0 3px rgba(43, 33, 64, 0.1);
}
/* บรรทัดข้อความใต้ช่องกรอก "จอง" ความสูง 1 บรรทัดไว้เสมอ — ถ้าโผล่เฉพาะตอน error ตั๋วจะสูงขึ้น
   แล้วถูกจัดกึ่งกลางแนวตั้งใหม่ ทั้งหน้ากระโดดขึ้น */
.lt-login-msg {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.05rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.05rem;
  color: var(--lt-chili);
}
.lt-login-msg i { font-size: 0.72rem; }
.lt-pw-field.is-invalid .lt-pw-input {
  border-color: var(--lt-chili);
  box-shadow: 0 0 0 3px rgba(255, 76, 81, 0.12);
  animation: ltShake 0.32s ease;
}
/* ป้าย Caps Lock อยู่ในช่องรหัสผ่าน (ชิปหน้าปุ่มตา) — ไม่ใช่บรรทัดใต้ช่อง เพื่อไม่ให้ความสูงฟอร์มเปลี่ยน */
.lt-login-caps {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.lt-login-caps[hidden] { display: none; }
.lt-login-remember {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lt-ink-soft);
  cursor: pointer;
  user-select: none;
}
.lt-login-remember .lt-tgl { width: 42px; height: 24px; }
.lt-login-remember .lt-tgl-track::after { width: 18px; height: 18px; }
.lt-login-remember .lt-tgl input:checked + .lt-tgl-track::after { transform: translateX(18px); }
.lt-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--lt-chrome);
  color: #fff;
  font-family: var(--lt-font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(240, 62, 82, 0.3);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.lt-login-btn:hover { filter: brightness(1.05); box-shadow: 0 8px 20px rgba(240, 62, 82, 0.36); }
.lt-login-btn:active { transform: translateY(1px); }
.lt-login-btn:disabled { cursor: progress; filter: saturate(0.8); box-shadow: none; }
.lt-login-btn:focus-visible,
.lt-login-body .lt-pw-eye:focus-visible,
.lt-pin-key:focus-visible {
  outline: 3px solid rgba(240, 62, 82, 0.45);
  outline-offset: 2px;
}
.lt-login-btn-text,
.lt-login-btn-load { display: inline-flex; align-items: center; gap: 0.5rem; }
.lt-login-btn-load { display: none; }
.lt-login-btn.is-loading .lt-login-btn-text { display: none; }
.lt-login-btn.is-loading .lt-login-btn-load { display: inline-flex; }
.lt-login-help {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: #f7f5fb;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--lt-ink-soft);
}
.lt-login-help i { flex: none; margin-top: 0.2rem; color: var(--lt-marigold); }
.lt-login-foot { font-size: 0.75rem; color: #a59cb8; text-align: center; }

@media (min-width: 992px) {
  .lt-login { padding: 2rem 2rem 2.4rem; }
  .lt-tk {
    max-width: 920px;
    grid-template-columns: 340px auto minmax(0, 1fr);
    border-radius: 28px;
  }
  /* desktop จัดกึ่งกลางเหมือนมือถือ — เดิมชิดซ้ายแล้วเหลือที่ว่างด้านขวา/บนมาก */
  .lt-tk-stub {
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.6rem 2.4rem 2.6rem 2.5rem;
    text-align: center;
  }
  .lt-tk-stub::before { right: -110px; top: -150px; }
  .lt-tk-mark {
    display: block;
    position: absolute;
    right: 0.35rem;
    bottom: -0.35rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--lt-font-display);
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.14);
    pointer-events: none;
    user-select: none;
  }
  .lt-tk-logo { width: 176px; height: 176px; border-radius: 44px; }
  .lt-tk-brand { font-size: 2.1rem; }
  .lt-tk-line { margin-top: 0.5rem; }
  .lt-tk-perf {
    height: auto;
    width: 0;
    border-top: 0;
    border-left: 2px dashed rgba(43, 33, 64, 0.16);
  }
  .lt-tk-perf::before,
  .lt-tk-perf::after { left: -12px; right: auto; }
  .lt-tk-perf::before { top: -11px; }
  .lt-tk-perf::after { top: auto; bottom: -11px; }
  .lt-tk-body { padding: 2.2rem 2.5rem 2.1rem; justify-content: center; }
  .lt-tk-head { margin-bottom: 1.3rem; }
  .lt-login-title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-tk,
  .lt-pw-field.is-invalid .lt-pw-input,
  .lt-pin-dots.is-shake { animation: none; }
  .lt-login-btn,
  .lt-pin-key,
  .lt-pin-dots span,
  .lt-tgl-track,
  .lt-tgl-track::after { transition: none; }
}

/* โมดัล PIN */
.lt-pin-dialog { max-width: 380px; }
.lt-pin-step {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0.7rem;
}
.lt-pin-step[hidden] { display: none; }
.lt-pin-step span { width: 30px; height: 4px; border-radius: 999px; background: #eeeaf4; }
.lt-pin-step span.is-on { background: var(--lt-chili); }
.lt-pin-dots {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.5rem 0 1rem;
}
.lt-pin-dots span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d9d3e4;
  background: #fff;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.lt-pin-dots span.is-on { background: var(--lt-ink); border-color: var(--lt-ink); transform: scale(1.12); }
.lt-pin-dots.is-ok span { background: var(--lt-leaf); border-color: var(--lt-leaf); }
.lt-pin-dots.is-shake { animation: ltShake 0.35s ease; }
.lt-pin-err {
  margin: -0.45rem 0 0.65rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lt-chili);
}
.lt-pin-err[hidden] { display: none; }
.lt-pin-busy {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: -0.45rem 0 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lt-ink-soft);
}
.lt-pin-modal.is-busy .lt-pin-busy { display: flex; }
.lt-pin-modal.is-busy .lt-pin-err { display: none; }
.lt-pin-modal.is-busy .lt-pin-pad { opacity: 0.45; pointer-events: none; }
/* modal-body ของ .lt-detail-modal เป็น flex คอลัมน์ → margin:0 auto ทำให้แป้นหดเท่าความกว้างปุ่ม (ปุ่มแคบสูง)
   จึงกำหนด width:100% + max-width ให้ปุ่มกว้างแบบแป้นโทรศัพท์ */
.lt-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 312px;
  margin: 0 auto;
}
.lt-pin-key {
  height: 60px;
  border: 1.5px solid var(--lt-line);
  border-radius: 16px;
  background: #fff;
  color: var(--lt-ink);
  font-family: var(--lt-font-digit);
  font-feature-settings: "tnum";
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease, transform 0.1s ease;
}
.lt-pin-key:hover { background: #f7f5fb; }
.lt-pin-key:active { background: #efeaf6; transform: scale(0.96); }
.lt-pin-key-fn { font-family: var(--lt-font-body); font-size: 0.9rem; color: var(--lt-ink-soft); }
.lt-pin-hint {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.72rem;
  color: #a59cb8;
}
@media (max-width: 575.98px) {
  .lt-pin-hint { display: none; }
  .lt-pin-key { height: 54px; }
}
@keyframes ltShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ── ป๊อปอัปประกาศ #modalNewsPopup ──
   member: มาร์กอัปใน views/main2.ejs (ทุกหน้า) + JS ใน scripts/main.js; agent: views/dashboard.ejs + scripts/dashboard.js
   บล็อกนี้เหมือนกัน 2 สำเนา (member/agent) — company ไม่มีป๊อปอัปนี้ แก้แล้วต้องซิงก์ทั้งสอง
   โครง: .lt-np-hero (chrome ไล่เฉด: แผ่นไอคอนกระดิ่ง + ป้าย "ประกาศ" + ตัวนับ N / M + ปุ่ม X, ชื่อเรื่อง, ชิปวันที่/เวลาที่ผ่านมา)
   → ขอบล่างหยักแบบรอยฉีกตั๋ว (radial-gradient สีขาวของ body — วิธีเดียวกับ .lt-header::after)
   → .modal-body เนื้อหาใช้ .lt-news-body ชุดเดียวกับหน้า /news → ท้าย: ลิงก์ดูประกาศทั้งหมด + จุดลำดับ .lt-np-dot + ปุ่ม ถัดไป/รับทราบ (.lt-set-save)
   หลายประกาศ: JS สลับเนื้อหาในโมดัลเดิม (.lt-np-anim เล่น ltNpIn ใหม่ทุกครั้ง) ไม่ปิด-เปิดโมดัลซ้ำ */
.lt-np .lt-np-dialog { --bs-modal-width: 680px; }
.lt-np-content {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(43, 33, 64, 0.35);
}
.lt-np-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  padding: 1rem 1.25rem 1.5rem;
  background: var(--lt-chrome);
  color: #fff;
}
/* แสงขาวจาง ๆ มุมขวาบน (แบบเดียวกับต้นขั้วตั๋วหน้า login) ให้ไล่เฉดไม่แบน */
.lt-np-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -110px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
/* ขอบล่างหยักเหมือนรอยฉีกตั๋ว — วงกลมสีขาว (พื้น modal-body) เรียงเป็นแถว */
.lt-np-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 9px;
  background-image: radial-gradient(circle at 8px 9px, #fff 5px, transparent 5.5px);
  background-size: 16px 10px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.lt-np-hero-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.lt-np-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  font-size: 1.05rem;
  color: #fff;
}
.lt-np-icon .fa-bullhorn {
  transform-origin: 50% 45%;
  animation: ltNpRing 3.4s ease-in-out infinite;
}
/* ประกาศปักหมุด: แผ่นไอคอนขาว + หมุดสีทอง (JS สลับคลาส is-pin และไอคอน) */
.lt-np-icon.is-pin { background: #fff; color: #d97706; box-shadow: 0 4px 12px rgba(43, 33, 64, 0.18); }
.lt-np-eyebrow {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--lt-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.lt-np-eyebrow small {
  font-family: var(--lt-font-body);
  font-weight: 500;
  font-size: 0.72rem;
  opacity: 0.85;
}
.lt-np-counter {
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  white-space: nowrap;
}
.lt-np-x {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.2s ease;
  /* ชิดขวาเสมอ (โมดัลอ่านประกาศไม่มีตัวนับ) — ถ้ามีตัวนับแสดงอยู่ให้ตัวนับเป็นตัวดันแทน ไม่งั้น auto margin สองตัวแบ่งช่องว่างกัน */
  margin-inline-start: auto;
}
.lt-np-counter:not(.d-none) + .lt-np-x { margin-inline-start: 0; }
.lt-np-x:hover { background: rgba(255, 255, 255, 0.38); transform: rotate(90deg); }
.lt-np-x:disabled { opacity: 0.6; cursor: default; }
.lt-body .lt-np-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 8px rgba(43, 33, 64, 0.25);
  overflow-wrap: anywhere;
}
.lt-np-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.lt-np-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
}
.lt-np-chip i { font-size: 0.75rem; opacity: 0.9; }
.lt-np-chip-soft { background: transparent; border-style: dashed; opacity: 0.92; }
.lt-np-chip-pin { background: #fff; border-color: transparent; color: #9a6207; font-weight: 700; }
.lt-np-chip-pin i { color: #d97706; opacity: 1; }
/* .lt-detail-modal ตั้ง modal-body เป็น flex column → เนื้อหาที่มีรูปกว้าง (min-width:auto ของ flex item) ดันโมดัลล้นจอมือถือ
   ป๊อปอัปนี้มีลูกเดียวจึงกลับเป็น block ให้ img max-width:100% ทำงาน */
.lt-body .lt-np .modal-body.lt-np-body { display: block; padding: 1.2rem 1.4rem 0.75rem; }
.lt-np-detail { min-width: 0; font-size: 0.97rem; line-height: 1.7; }
.lt-np-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 1.2rem 0;
  color: var(--lt-ink-soft);
  font-size: 0.9rem;
}
.lt-np-empty i { color: var(--lt-marigold); font-size: 1.1rem; }
.lt-body .lt-np .modal-footer.lt-np-foot {
  padding: 0.5rem 1.4rem 1.2rem;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 0;
}
.lt-np-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lt-ink-soft);
  text-decoration: none;
}
.lt-np-all:hover { color: var(--lt-chili); }
.lt-np-all i { font-size: 0.8rem; }
.lt-np-dots { display: inline-flex; align-items: center; gap: 0.32rem; margin-inline-start: auto; }
.lt-np-dots:empty { display: none; }
.lt-np-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(43, 33, 64, 0.16);
  transition: width 0.2s ease, background 0.2s ease;
}
.lt-np-dot.is-done { background: var(--lt-leaf); }
.lt-np-dot.is-now { width: 22px; background: var(--lt-chrome); }
.lt-np-next { min-width: 9rem; justify-content: center; }
.lt-np-in { animation: ltNpIn 0.3s ease both; }
@keyframes ltNpIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* กระดิ่งแกว่งเบา ๆ เป็นช่วง ๆ แทน fa-beat เดิม */
@keyframes ltNpRing {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(-14deg); }
  22% { transform: rotate(12deg); }
  34% { transform: rotate(-8deg); }
  46% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-np-icon .fa-bullhorn, .lt-np-in { animation: none; }
}
@media (max-width: 575.98px) {
  .lt-np-hero { padding: 0.85rem 0.95rem 1.35rem; }
  .lt-np-icon { width: 38px; height: 38px; border-radius: 11px; }
  .lt-body .lt-np-title { font-size: 1.15rem; }
  .lt-body .lt-np .modal-body.lt-np-body { padding: 1rem 0.95rem 0.5rem; }
  .lt-body .lt-np .modal-footer.lt-np-foot { flex-direction: column; align-items: stretch; gap: 0.7rem; padding-inline: 0.95rem; }
  .lt-np-dots { order: 1; margin-inline-start: 0; justify-content: center; }
  .lt-np-next { order: 2; width: 100%; }
  .lt-np-all { order: 3; justify-content: center; }
}

/* ===== พื้นหลังไล่สี + เส้นขอบ = จุดสีแปลกที่ปลายปุ่ม (ชุดเดียวกับ company/agent) =====
   ค่าเริ่มต้นของ background-origin คือ padding-box แต่ background-clip คือ border-box
   ไล่สีจึงถูก "วางขนาด" เท่ากล่องด้านใน แล้ววาดเลยออกไปถึงแถบขอบ ส่วนที่เลยออกไปจะเป็นการปูซ้ำ (repeat)
   ปลายซ้ายจึงโผล่สีท้ายของไล่สี (เหลือง) ปลายขวาโผล่สีต้น (แดง) — บนปุ่มมนจะเห็นเป็นจุดสีเพี้ยนที่ปลายทั้งสองข้าง
   -> ให้ไล่สีวางตาม border-box และห้ามปูซ้ำ ต้องอยู่หลังกฎที่ตั้ง background แบบ shorthand (shorthand รีเซ็ต origin)
   (ใช้กับทุก element ที่มีทั้งพื้นหลังไล่สีและเส้นขอบ — member ตอนนี้มี 2 ตัว) */
.lt-set-save,
.lt-empty {
  background-origin: border-box;
  background-repeat: no-repeat;
}