/**
 * Custom CSS Overrides
 * Override Webflow CSS classes without modifying the original file
 */

/* ========================================
   Design System - Color Variables
   สอดคล้องกับ /login page style
   ======================================== */
:root {
  --btnbg: #0d4a36; /* Main Green Dark - โทนเดียวกับ #12674a แต่เข้มขึ้น */

  /* Brand Colors */
  --brand-primary: #12674a;       /* Main Green */
  --brand-primary-dark: #084040;  /* Dark Teal */
  --brand-primary-light: #c5e6d4; /* Soft Green (borders) */
  --brand-accent: #c4f1b0;        /* Light Green */

  /* Semantic Colors */
  --color-success: #12674a;       /* บวก/ยืนยัน/เรทจ่าย */
  --color-warning: #e6a700;       /* เตือน/ส่วนลด/เวลาใกล้ปิด */
  --color-danger: #c62828;        /* ลบ/ยกเลิก/ด่วนมาก */
  --color-neutral: #333333;       /* ข้อความทั่วไป */

  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
}

/* Header - เข้มสุด (2 ชั้น) */
.v2hd,
.v2header {
  background-color: #193131 !important;
  height: 60px !important;
}

/* Mobile menu header */
.hdclose {
  background-color: #193131 !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  box-sizing: border-box !important;
}

/* Hamburger & Close button - same size 60x60px, icon centered */
.mnbtn,
.mnbtn-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  margin-right: 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Icon inside buttons - centered 28x28px */
.mnbtn .code-embed-4,
.mnbtn-close .c3close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}

@media screen and (min-width: 992px) {
  .mnbtn {
    display: none !important;
  }
}

/* Sidebar - สีอักษรเข้ม */
.v2sb {
  color: #193131 !important;
}

/* Notice box (.wny) */
.wny {
  background-color: #193131 !important;
  margin-top: 20px !important;
  margin-bottom: 16px !important; /* 4 units */
  padding: 12px 20px !important;  /* 3 units / 5 units */
  gap: 16px !important;           /* 4 units - ระหว่างข้อความกับปุ่ม */
}

.wny .link-block {
  transition: all 0.2s ease;
}

.wny .link-block:hover {
  background-color: #c5e6d4 !important;
}

/* .z-ct ที่อยู่หลัง .wny - ลด padding-top เพราะ .wny มี margin-bottom แล้ว */
.wny + #lottery-cards-page .z-ct,
.wny ~ #lottery-cards-page .z-ct {
  padding-top: 8px !important; /* 2 units - รวมกับ .wny margin-bottom 16px = 24px (6 units) */
}

/* ========================================
   Global Font Override
   ======================================== */
body {
  font-family: 'Noto Sans Thai', sans-serif;
}

/* ========================================
   Text Link - สไตล์ลิงก์ข้อความ
   ======================================== */
.text-link {
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  transition: text-decoration 0.15s ease;
}

.text-link:hover {
  text-decoration: underline;
}

.text-link-primary {
  color: #1976d2;
}

.text-link-primary:hover {
  color: #1565c0;
}

.text-link-danger {
  color: #c62828;
}

.text-link-danger:hover {
  color: #b71c1c;
}

/* ========================================
   Astro View Transitions - ปิด animation ทั้งหมด
   เปลี่ยนหน้าทันทีไม่มี fade/slide
   ======================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  animation-duration: 0s !important;
}

::view-transition-old(*),
::view-transition-new(*) {
  animation: none !important;
  animation-duration: 0s !important;
}

/* ปิด fade animation ของ Astro */
@keyframes astroFadeIn {
  from { opacity: 1; }
  to { opacity: 1; }
}

@keyframes astroFadeOut {
  from { opacity: 1; }
  to { opacity: 1; }
}

/* ปิด slide animation ของ Astro */
@keyframes astroSlideFromRight {
  from { transform: none; }
  to { transform: none; }
}

@keyframes astroSlideToLeft {
  from { transform: none; }
  to { transform: none; }
}

/* Override z-ct-h - 4px Grid System */
/* Header = 60px (15 units), ใช้เป็น reference */
.z-ct-h {
  padding-top: 8px !important;    /* 2 units - default */
  padding-bottom: 16px !important; /* 4 units - ระยะก่อน content */
  font-weight: 500 !important;
  line-height: 20px !important;   /* 5 units */
}

/* หน้าแรก - ปรับให้ตรงกับหน้า /bet/* */
#lottery-cards-page {
  margin-top: -3px; /* ขยับขึ้น 3px ให้ตรงกับหน้า /bet/* */
}

#lottery-cards-page .z-ct-h {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override bold-text-4 - ให้ font-weight เท่ากับ .z-ct-h */
.bold-text-4 {
  font-weight: 500 !important;
}


/* Override .whr to not center content */
.whr {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.whr > div {
  width: 100%;
}

/* Sidebar menu hover colors - override var(--btnover) */
/* NOTE: ใช้ :focus-visible แทน :focus เพื่อป้องกัน focus state ค้างหลัง mouse click */
.btmsb:hover,
.btmsb.nav-pressed,
.btmsbis:hover,
.btmsbis.nav-pressed,
.zm-hed:hover,
.menu-toggle:hover,
.menu-item:hover,
.menu-item.nav-pressed,
.logout-btn:hover {
  background-color: #f1f8f2 !important;
  color: #16a34a !important;
}

/* Focus visible - keyboard navigation only */
.btmsb:focus-visible,
.btmsbis:focus-visible,
.zm-hed:focus-visible,
.menu-toggle:focus-visible,
.menu-item:focus-visible,
.logout-btn:focus-visible {
  background-color: #f1f8f2 !important;
  color: #16a34a !important;
  outline: 2px solid #16a34a;
  outline-offset: -2px;
}

/* Remove default focus outline */
.btmsb:focus,
.btmsbis:focus,
.zm-hed:focus,
.menu-toggle:focus,
.menu-item:focus,
.logout-btn:focus {
  outline: none;
}

/* Prevent flash during View Transitions */
::view-transition-old(sidebar),
::view-transition-new(sidebar),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0s !important;
}

/* Keep hover state visible during navigation */
.btmsb,
.btmsbis,
.zm-hed,
.menu-toggle,
.menu-item,
.logout-btn {
  transition: none !important;
}

/* ========================================
   Sidebar Menu - 4px Grid System
   ======================================== */

/* Sidebar width: 240px (4 × 60) */
.v2sb {
  min-width: 240px !important;
  max-width: 240px !important;
}

/* Menu items padding: 12px (4 × 3) */
.btmsb,
.btmsbhd,
.zm-hed,
.btmsb-at {
  padding: 12px !important;
}

/* Submenu items: padding 12px, left 44px (4 × 11) */
.btmsbis {
  padding: 12px 12px 12px 44px !important;
}

/* Logo margin: 12px (4 × 3) */
.lgm {
  margin-top: 12px !important;
}

/* ========================================
   Dashboard Cards - 4px Grid System
   ======================================== */

/* Cards container margin */
.div-block-89 {
  margin-bottom: 12px !important; /* 4 × 3 */
}

/* Cards padding */
.cardh,
.cardh-y,
.cardhg {
  padding: 12px !important; /* 4 × 3 */
}

/* Cards content gap */
.div-block-91 {
  grid-column-gap: 12px !important; /* 4 × 3 */
  grid-row-gap: 12px !important;
}

/* ========================================
   Bet Page - 4px Grid System
   ======================================== */

/* Input sections padding */
.div-block-121 {
  padding-bottom: 12px !important; /* 4 × 3 */
}

/* Bill list margin */
.div-block-118 {
  margin-bottom: 12px !important; /* 4 × 3 */
}

/* Header bet (mobile) padding */
@media screen and (max-width: 767px) {
  .hdz {
    padding-top: 12px !important; /* 4 × 3 */
    padding-bottom: 12px !important;
  }
}

/* Bet page 2 columns - สมดุล 50:50 */
/* ฝั่งซ้าย (form) : ฝั่งขวา (tables) = 50% : 50% */
.zb {
  grid-template-columns: 1fr 1fr !important;
}

.zb > .tcl,
.zb > .tcr {
  min-width: 0 !important; /* ป้องกัน content ดัน column กว้างขึ้น */
  width: 100% !important;
}

/* Form content - ไม่ให้ล้น column */
.tcl .form-b,
.tcl .tabs,
.tcl .w-tabs {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Tables - ไม่ให้ล้น column */
.tcr .tb3,
.tcr .tb5,
.tcr .tb7g,
.tcr .tb7g-2 {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Tabs container */
.tabs,
.w-tabs {
  width: 100% !important;
}

/* Tab menu container */
.tab-sp,
.w-tab-menu {
  width: 100% !important;
}

/* Tab content */
.w-tab-content {
  width: 100% !important;
}

/* Tab pane */
.w-tab-pane {
  width: 100% !important;
}

/* Tab menu padding */
.tbl {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Form labels - match tab font size */
.text-block-39 {
  font-size: 14px !important;
}

/* Fix header menu underline - only show when active */
.tbtm {
  border-bottom-color: transparent !important;
}

.tbtm.w--current {
  border-bottom-color: var(--bgform) !important;
}


/* Table border color - light green like dashboard */
.tb3 {
  border: 1px solid #c5e6d4 !important;
  background-color: transparent !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  gap: 0 !important;
}

/* .tb3g - row มี border-bottom + background (สำหรับเลขมาแรง) */
.tb3 > .tb3g {
  background-color: #fff !important;
  border-bottom: 1px solid #c5e6d4 !important;
}

/* .tb3g header row - สีเขียว */
.tb3 > .tb3g:first-child {
  background-color: #c5e6d4 !important;
}

/* .tb3g แถวสุดท้าย - ไม่มี border-bottom */
.tb3 > .tb3g:last-child {
  border-bottom: none !important;
}

/* tb3g - cell ในแถว ใช้ border-right คั่นระหว่าง cell */
.tb3g > div {
  border-right: 1px solid #c5e6d4 !important;
}

/* tb3g - cell สุดท้ายไม่ต้องมีเส้นขวา (container มี border แล้ว) */
.tb3g > div:last-child,
.tb3 .tb3g > div:last-child,
.tb3 > .tb3g > div:last-child {
  border-right: 0 !important;
  border-right-width: 0 !important;
}

/* tb3--no-divider - ไม่มีเส้นขีดแบ่ง column */
.tb3--no-divider .tb3g > div {
  border-right: none !important;
}

/* tb7g, tb7g-2 - แก้ไขจำนวน columns จาก 7 เป็น 6 + ให้ตรงแนวกัน */
/* ใช้ fr units เพื่อป้องกันตารางทะลุจอ */
.tb7g,
.tb7g-2 {
  grid-template-columns: 0.8fr 1.2fr 2fr 1fr 1.2fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* tb7g, tb7g-2 - cell ใช้ความสูง 28px (กระชับ) */
.tb7g > .roww,
.tb7g-2 > .roww {
  width: 100% !important;
  height: var(--h-row-compact) !important; /* 28px (4 × 7) */
  min-height: var(--h-row-compact) !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

/* tb7g, tb7g-2 - header ใช้ความสูง 28px */
.tb7g > .thdd,
.tb7g-2 > .thdd {
  height: var(--h-row-compact) !important; /* 28px (4 × 7) */
  min-height: var(--h-row-compact) !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

/* tb7g, tb7g-2 - ข้อความไม่ต้อง wrap + จัดกลาง */
.tb7g .thdd,
.tb7g-2 .thdd {
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
}

/* tb7g, tb7g-2 - cell ในแถว ใช้ border-right คั่นระหว่าง cell */
.tb7g > div,
.tb7g-2 > div {
  border-right: 1px solid #c5e6d4 !important;
}

/* tb7g, tb7g-2 - cell สุดท้ายไม่ต้องมีเส้นขวา */
.tb7g > div:last-child,
.tb7g-2 > div:last-child {
  border-right: none !important;
}

/* tb7g-all - ตารางบิลทุกหวย 7 คอลั่ม (#, เวลาแทง, ตลาด, รายการ, บาท, หมายเหตุ, ลบโพย) */
/* ไม่กำหนดความสูง แสดงทั้งหมดไม่ใช้ scrollbar */

/* .tb3 ที่มี tb7g-all - ลบแค่ row-gap ที่สร้างเส้นซ้ำซ้อน */
.tb3:has(.tb7g-all) {
  grid-row-gap: 0 !important;
}

/* แถวสุดท้ายไม่ต้องมี border-bottom เพราะ .tb3 มี border รอบนอกอยู่แล้ว */
.tb3 > .tb7g-all-row:last-child {
  border-bottom: none !important;
}

.tb7g-all {
  display: grid !important;
  grid-template-columns: 0.6fr 1.4fr 2fr 0.8fr 1.2fr 1fr 0.8fr !important;
  gap: 0 !important;
  width: 100% !important;
  background-color: #c5e6d4 !important;
}

.tb7g-all-row {
  display: grid !important;
  grid-template-columns: 0.6fr 1.4fr 2fr 0.8fr 1.2fr 1fr 0.8fr !important;
  gap: 0 !important;
  width: 100% !important;
  background-color: #fff !important;
  border-bottom: 1px solid #c5e6d4 !important;
  min-height: 44px !important;
}

/* tb7g-all-row - ทุก cell ยืดเต็มความสูงแล้วใช้ flex จัดกลาง */
.tb7g-all-row > .roww {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 4px !important;
  height: 100% !important;
  min-height: unset !important;
  border: none !important;
  border-right: 1px solid #c5e6d4 !important;
  background-color: transparent !important;
}

/* cell สุดท้ายไม่มีเส้นขวา */
.tb7g-all-row > .roww:last-child {
  border-right: none !important;
}

/* .thd ข้างใน - ลบ border ทั้งหมด */
.tb7g-all-row .roww .thd {
  display: block !important;
  text-align: center !important;
  line-height: 1.4 !important;
  font-size: 12px !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  min-height: unset !important;
  height: auto !important;
}

.tb7g-all-row:hover {
  background-color: #daf0e3 !important;
}

.tb7g-all-row:hover .roww,
.tb7g-all-row:hover .thd {
  background-color: transparent !important;
}

/* tb7g-all header */
.tb7g-all .thdd {
  white-space: nowrap !important;
  text-align: center !important;
  padding: 6px 4px !important;
  font-size: 14px !important;
  border-right: none !important;
}

.tb7g-all > div:last-child .thdd {
  border-right: none !important;
}

/* ลบ border-right ออกจาก .roww และ .div-block-122 เพราะใช้ parent div แทน */
.tb3 .roww,
.tb3 .div-block-122 {
  border-right: none !important;
}

/* ========================================
   ตารางสถิติหน้า /bet/* - Compact Row Height
   ======================================== */

/* Header cell สถิติ: 28px (4 × 7) */
.thdd {
  min-height: var(--h-row-compact) !important;
  padding-top: 4px !important;   /* 5px → 4px (4 × 1) */
  padding-bottom: 4px !important;
}

/* Data cell สถิติ: 28px (4 × 7) */
.roww {
  min-height: var(--h-row-compact) !important;
  padding: 4px !important; /* 4 × 1 */
}

/* tb3, tb5 - ตารางสถิติ */
.tb3g > .roww,
.tb5g > .roww,
.tb5g2 > .roww {
  min-height: var(--h-row-compact) !important;
}

/* tb5g - ตารางสถิติผลรางวัล: ให้ wrap ได้ + ทุก cell สูงเท่ากัน */
.tb5g {
  align-items: stretch !important; /* ทุก cell สูงเท่ากัน */
  width: 100% !important;
  box-sizing: border-box !important;
}

.tb5g > div {
  display: flex !important;
  align-items: stretch !important;
}

.tb5g .thd,
.tb5g .thdd {
  height: auto !important;
  min-height: var(--h-row-compact) !important; /* 28px min */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;   /* จัดกลางแนวตั้ง */
  justify-content: center !important; /* จัดกลางแนวนอน */
  white-space: normal !important;   /* wrap ได้ */
  padding: 4px 8px !important;
  line-height: 1.3 !important;
}

/* ========================================
   Empty State - 4px Grid System
   ทุกตารางใช้ความสูง 28px (กระชับ)
   ======================================== */

/* ทุกตารางในหน้า /bet/* ใช้ 28px */
.tb3g > .thd[style*="grid-column"],
.tb3g > .roww[style*="grid-column"],
.tb5g > .thd[style*="grid-column"],
.tb5g > .roww[style*="grid-column"],
.tb5g2 > .thd[style*="grid-column"],
.tb5g2 > .roww[style*="grid-column"],
.tb5f > .thd[style*="grid-column"],
.tb5f > .roww[style*="grid-column"],
.tb7g > .thd[style*="grid-column"],
.tb7g > .roww[style*="grid-column"],
.tb7g-2 > .thd[style*="grid-column"],
.tb7g-2 > .roww[style*="grid-column"] {
  min-height: var(--h-row-compact) !important; /* 28px (4 × 7) */
  padding: 4px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ตารางสถิติผลรางวัล - ใช้ border ของ row ไม่ใช่ background trick */
.tb5 {
  border: 1px solid #c5e6d4 !important;
  background-color: transparent !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* .tb5g - row มี border-bottom + background */
.tb5 > .tb5g {
  background-color: #fff !important;
  border-bottom: 1px solid #c5e6d4 !important;
}

/* .tb5g header row - สีเขียว */
.tb5 > .tb5g:first-child {
  background-color: #c5e6d4 !important;
}

/* .tb5g แถวสุดท้าย - ไม่มี border-bottom */
.tb5 > .tb5g:last-child {
  border-bottom: none !important;
}

/* Header หน้า bet - เส้นขอบล่างสีเขียวจาง */
.hdz {
  border-bottom-color: #c5e6d4 !important;
}

/* แท็บประเภทหวย */
.div-block-109:not(.w--current) {
  background-color: #e5ebe8 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Mobile: จัดแท็บประเภทหวยให้อยู่กลาง */
@media (max-width: 991px) {
  .div-block-108 {
    justify-content: center !important;
  }
}

.div-block-109:not(.w--current):hover {
  background-color: var(--btnbg) !important;
  color: var(--btntxt) !important;
}

.div-block-109.w--current {
  background-color: var(--btnbg) !important;
  color: var(--btntxt) !important;
}

.div-block-109.w--current:hover {
  background-color: #0a5c45 !important;
}

/* ปุ่ม เพิ่มบิล hover - เขียวเข้มขึ้น */
.btn-f:hover,
.btn-f-2:hover {
  background-color: #0a5c45 !important;
  color: var(--btntxt) !important;
}

/* แท็บวางโพย - input "บน" โค้งซ้าย */
.inputp > div:first-child .inputc {
  border-radius: 8px 0 0 8px !important;
}

/* แท็บวางโพย - input "ล่าง" ไม่มี border ซ้าย (กัน 2px) */
.inputp > div:nth-child(2) .inputc {
  border-left: none !important;
}

/* ลบ padding-bottom ของ inputp */
.inputp {
  padding-bottom: 0 !important;
}

/* ลด padding-bottom ของ total */
.total {
  padding-bottom: 8px !important; /* 20px → 8px (4 × 2) */
}


/* ปุ่มบันทึก - กว้างเต็มพื้นที่ */
.btnbm {
  width: 100% !important;
  transition: background-color 0.2s ease !important;
}

.btnbm:hover {
  background-color: #2a4a4a !important;
}

/* ========================================
   Form Bet - เปลี่ยนเส้นสีเทาเป็นสีเขียวจาง
   ======================================== */

/* กรอบฟอร์มหลัก */
.form-b {
  border-color: #c5e6d4 !important;
}

/* Input fields - textarea, input ต่างๆ */
.w-input,
.textarea,
.inputl,
.inputl2,
.inputc,
.input8,
.inputform {
  border: 1px solid #999 !important;
}

.w-input:focus,
.textarea:focus,
.inputl:focus,
.inputl2:focus,
.inputc:focus,
.input8:focus,
.inputform:focus {
  border-color: var(--btnbg) !important;
}

/* รายการบิลที่เพิ่ม - gap สีขาว ไม่มีเส้นขอบ */
.div-block-117 {
  background-color: #fff !important;
  border: none !important;
}

/* รายการบิลแต่ละแถว - พื้นเทา */
.div-block-112 {
  background-color: #e9ecef !important;
}

/* Grid input 3ตัว/2ตัว/เลขวิ่ง - form ไม่มี border (container มีอยู่แล้ว) */
.form:has(.div-block-119) {
  border: none !important;
  background-color: transparent !important;
  gap: 0 !important;
}

.div-block-119 {
  background-color: transparent !important;
  grid-column-gap: 0 !important;
  grid-row-gap: 0 !important;
  border: none !important;
}

/* Header cells - เส้นกั้นระหว่าง cell */
.div-block-119 .div-block-120 {
  border-right: 1px solid #999 !important;
}

/* Header cell สุดท้าย ไม่มีเส้นขวา */
.div-block-119 .div-block-120:last-child {
  border-right: none !important;
}

/* เส้นกั้นระหว่าง header row กับ input row */
.div-block-119:first-child {
  border-bottom: 1px solid #999 !important;
}

/* input มีแค่ border ขวา กั้นระหว่าง cell */
.div-block-119 .inputform {
  border: none !important;
  border-right: 1px solid #999 !important;
  border-bottom: 1px solid #999 !important;
}

/* input แถวสุดท้าย ไม่มี border ล่าง (container มีอยู่แล้ว) */
.div-block-119:last-child .inputform {
  border-bottom: none !important;
}

/* row-np ก็ต้องมี border ล่างเหมือนกัน */
.div-block-119 .row-np {
  border-bottom: 1px solid #999 !important;
}

.div-block-119:last-child .row-np {
  border-bottom: none !important;
}

.div-block-119 .inputform:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--btnbg) !important;
}

/* แถวปุ่มลบ */
.row-np {
  background-color: transparent !important;
}

/* ปุ่มลบในแถว input และรายการบิล */
.row-np .div-block-109,
.div-block-116 .div-block-109,
.div-block-116 .btnrm {
  background-color: transparent !important;
  color: #666 !important;
}

.row-np .div-block-109:hover,
.div-block-116 .div-block-109:hover,
.div-block-116 .btnrm:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

/* ========================================
   Skeleton Loading Styles
   ขนาดและระยะห่างตรงกับการ์ดจริง
   ======================================== */

/* Skeleton card - ใช้สี cardgrey (#daf0e3) + shimmer */
.skeleton-card {
  pointer-events: none !important;
  min-height: 120px !important;
  background: linear-gradient(90deg, var(--cardgrey) 25%, #c5e6d4 50%, var(--cardgrey) 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

/* ========================================
   Lottery Cards - Color System
   สอดคล้องกับ /login page style
   ======================================== */

/* การ์ดเปิดรับแทง - Main Green (เหมือนพื้นหลัง login) */
.cardh {
  background-color: #12674a !important;
  color: #fff !important;
  transition: all 0.2s ease !important;
}

.cardh:hover {
  background-color: #0d4a36 !important;
}

.cardh .div-block-90 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Dashboard Stats Cards - Agent */
.cardh .stat-label {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px;
}

.cardh .stat-value {
  color: #fff !important;
  font-size: 20px;
  font-weight: 600;
}

.cardh .cec {
  color: rgba(255, 255, 255, 0.9) !important;
}

.cardh .sse-indicator {
  background: #edd55b !important; /* สีเหลืองเพื่อให้เด่นบนพื้นเขียว */
}

/* การ์ดใกล้ปิด - Yellow (เหมือนปุ่ม login) */
.cardh-y {
  background-color: #edd55b !important;
  color: #0d4a36 !important;
  transition: all 0.2s ease !important;
}

.cardh-y:hover {
  background-color: #e5c84a !important;
}

.cardh-y .div-block-90 {
  color: rgba(13, 74, 54, 0.75) !important;
}

/* การ์ดปิดรับแล้ว - Muted Gray (เขียวอมเทา) */
.cardhg {
  background-color: #e5ebe8 !important;
  color: #1e2e28 !important;
  transition: all 0.2s ease !important;
}

.cardhg:hover {
  background-color: #d8e0dc !important;
}

.cardhg .div-block-90 {
  color: rgba(30, 46, 40, 0.8) !important;
}

.cardhg .lc-icon {
  opacity: 0.4;
}

/* Skeleton text placeholder - พื้นฐาน */
.skeleton-text {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 4px !important; /* 4 × 1 */
}

/* Skeleton image - ขนาดเท่า .image-2 (height: 32px) */
.skeleton-image {
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}

/* Skeleton header - หัวข้อหมวดหมู่ */
.skeleton-header {
  width: 100px !important;
  height: 20px !important; /* 4 × 5 */
}

/* Skeleton title - ชื่อหวย (font-size ปกติ ~14px) */
.skeleton-title {
  width: 88px !important; /* 4 × 22 */
  height: 16px !important; /* 4 × 4 */
  margin-bottom: 4px !important; /* 4 × 1 */
}

/* Skeleton date - วันที่งวด */
.skeleton-date {
  width: 76px !important; /* 4 × 19 */
  height: 16px !important; /* 4 × 4 */
  margin-bottom: 4px !important;
}

/* Skeleton label - "เวลาปิด", "สถานะ" (font-size: 12px) */
.skeleton-label {
  width: 40px !important;
  height: 12px !important;
}

/* Skeleton value - ค่าเวลาปิด */
.skeleton-value {
  width: 110px !important;
  height: 12px !important;
}

/* Skeleton status - ค่าสถานะ */
.skeleton-status {
  width: 70px !important;
  height: 12px !important;
}

/* Shimmer animation */
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   Lottery Cards - เวลาปิด/สถานะ เต็มความกว้าง
   ======================================== */

/* div-block-90 ใน card - เต็ม 100% width */
.cardh .div-block-90,
.cardh-y .div-block-90,
.cardhg .div-block-90 {
  width: 100% !important;
}

/* div ที่ครอบข้อความใน card - เต็ม 100% */
.cardh .div-block-91 > div:last-child,
.cardh-y .div-block-91 > div:last-child,
.cardhg .div-block-91 > div:last-child {
  width: 100% !important;
}

/* ========================================
   Shared Components - Tabs & Tables
   ใช้ร่วมกันทุกหน้า member-settings
   ======================================== */

/* Tags - ปุ่มเลือกหมวดหวย */
.ms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ms-tag {
  padding: 8px 16px; /* 4 × 2, 4 × 4 */
  background-color: #e8f5f1;
  border: 1px solid #c8e6d9;
  border-radius: 8px; /* 4 × 2 */
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  color: #084040;
}

.ms-tag:hover {
  background-color: #f0faf7;
}

.ms-tag.active {
  background-color: #12674a !important;
  color: white !important;
  border-color: #12674a !important;
}

/* Tabs - แท็ปเลือกประเภท */
.ms-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ms-tab {
  padding: 12px 20px; /* 4 × 3, 4 × 5 */
  border: 1px solid #c8e6d9;
  border-radius: 8px; /* 4 × 2 */
  background-color: #e8f5f1;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  color: #084040;
}

.ms-tab:hover {
  background-color: #f0faf7;
}

.ms-tab.active {
  background-color: #12674a !important;
  color: white !important;
  border-color: #12674a !important;
}

/* .ms-table moved to /public/css/member-settings.css (MASTER FILE) */
/* Do NOT add .ms-table styles here - see CSS_BEST_PRACTICES.md */

/* Group button */
.ms-group-btn {
  padding: 8px 16px; /* 4 × 2, 4 × 4 */
  border: 1px solid #c8e6d9;
  border-radius: 4px; /* 4 × 1 */
  font-size: 13px;
  cursor: pointer;
  margin-right: 4px;
  background-color: #e8f5f1;
  color: #084040;
  transition: all 0.2s;
}

.ms-group-btn:hover {
  background-color: #f0faf7;
}

.ms-group-btn.active {
  background-color: #12674a !important;
  color: white !important;
  border-color: #12674a !important;
}

/* Limit input in table */
.limit-input {
  width: 60px;
  padding: 4px 8px; /* 4 × 1, 4 × 2 */
  border: 1px solid #c8e6d9;
  border-radius: 4px; /* 4 × 1 */
  font-size: 12px;
  text-align: right;
  background: #fff;
}

.limit-input:focus {
  outline: none;
  border-color: #12674a;
  box-shadow: 0 0 0 2px rgba(18, 103, 74, 0.15);
}

/* Batch input in table header */
.batch-input {
  width: 60px;
  padding: 4px 8px; /* 4 × 1, 4 × 2 */
  border: 1px solid #c8e6d9;
  border-radius: 4px; /* 4 × 1 */
  font-size: 12px;
  text-align: right;
  background: #fff;
}

.batch-input:focus {
  outline: none;
  border-color: #12674a;
  box-shadow: 0 0 0 2px rgba(18, 103, 74, 0.15);
}

/* Save button */
.ms-save-btn {
  padding: 8px 12px; /* 4 × 2, 4 × 3 */
  background-color: #12674a;
  color: white;
  border: none;
  border-radius: 4px; /* 4 × 1 */
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ms-save-btn:hover {
  background-color: #084040;
}

/* Edit button */
.ms-edit-btn {
  padding: 4px 12px; /* 4 × 1, 4 × 3 */
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px; /* 4 × 1 */
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ms-edit-btn:hover {
  background-color: #1565c0;
}

/* Link button */
.ms-link {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

.ms-link:hover {
  color: #1565c0;
}

/* Badge - ใช้จาก member-settings.css แทน */

/* Breadcrumb */
.ms-breadcrumb {
  background-color: #f8f9fa;
  padding: 12px 16px; /* 4 × 3, 4 × 4 */
  border-radius: 8px; /* 4 × 2 */
  margin-bottom: 16px;
}

.ms-breadcrumb-item {
  color: #12674a;
  font-weight: 500;
}

/* Content container */
.ms-content {
  padding: 20px;
}

/* Modal */
.ms-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ms-modal-dialog {
  width: 100%;
  max-width: 600px;
  margin: 20px;
}

.ms-modal-content {
  background-color: #fff;
  border-radius: 8px; /* 4 × 2 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ddd;
}

.ms-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.ms-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.ms-modal-close:hover {
  color: #333;
}

.ms-modal-body {
  padding: 20px;
}

.ms-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px; /* 4 × 3 */
  padding: 16px 20px;
  border-top: 1px solid #ddd;
}

.ms-btn-cancel {
  padding: 12px 20px; /* 4 × 3, 4 × 5 */
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px; /* 4 × 2 */
  font-size: 14px;
  cursor: pointer;
}

.ms-btn-cancel:hover {
  background-color: #e8e8e8;
}

/* ========================================
   LotteryDashboard Table - Override dark header
   ======================================== */
.v2m table th {
  background-color: #e8f5f1 !important;
  color: #084040 !important;
  font-weight: 600 !important;
}

.ms-btn-save {
  padding: 12px 20px; /* 4 × 3, 4 × 5 */
  background-color: #12674a;
  color: white;
  border: none;
  border-radius: 8px; /* 4 × 2 */
  font-size: 14px;
  cursor: pointer;
}

.ms-btn-save:hover {
  background-color: #084040;
}

.ms-btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   Fix table overflow - ป้องกันตารางทะลุหน้าจอ
   ======================================== */

/* Main content area - ต้องใช้ overflow hidden และ min-width 0 */
.v2ctf > div[style*="flex: 1"] {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Main content container */
.v2m {
  max-width: 100% !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
  padding-left: var(--content-padding-mobile) !important;
  padding-right: var(--content-padding-mobile) !important;
}

.z-ct {
  max-width: 100% !important;
  overflow: hidden !important;
  padding-top: 24px !important; /* 4 × 6 = 24px */
  padding-bottom: 8px !important; /* 4 × 2 */
}

/* Form/Content container - ให้ scroll ได้ */
.form-container,
.content-container {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Table container */
.table-container {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* ========================================
   Login Form Overrides - 4px Grid System
   ======================================== */

/* Form title section - grid aligned */
.logo-login {
  padding: var(--sp-3) var(--sp-3) var(--sp-5) var(--sp-3) !important; /* 12px 12px 20px 12px */
}

/* Logo size: 188px → 160px (4 × 40), balanced spacing */
.flg .lgm {
  height: 160px !important;
  margin-top: var(--sp-3) !important; /* 12px (4 × 3) */
  margin-bottom: 0 !important;
}

/* Form button: ระยะเท่ากันทุกขนาดหน้าจอ */
.formbtn {
  padding-top: var(--sp-5) !important;  /* 20px */
  padding-bottom: 0 !important;  /* ใช้ form padding แทน */
}

/* Form container: เส้นขอบจางๆ + เงาสีเขียว + ระยะห่างขอบ */
.form-b-m {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(18, 103, 74, 0.8) !important; /* #12674a 80% */
  padding: var(--sp-5) !important; /* 20px ทุกด้าน */
  margin-left: var(--content-padding-mobile) !important;
  margin-right: var(--content-padding-mobile) !important;
  width: calc(100% - var(--content-padding-mobile) * 2) !important;
  max-width: 400px !important;
}

/* Error message */
.w-form-fail,
.w-form-fail div {
  color: #fca5a5 !important;
  font-size: 14px !important;
}

/* ========================================
   Table Input Focus - สีเขียว #12674a
   ======================================== */
.tbl-inp:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #12674a !important;
}

/* ========================================
   Toast Notification - ใช้ร่วมกันทุกหน้า
   ======================================== */
.form-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.form-toast.success {
  background: #12674a;
}

.form-toast.error {
  background: #c62828;
}

/* Fix SVG icons in header */
.cec svg {
  width: 100%;
  height: 100%;
}

/* ========================================
   Responsive Layout - Tablet & Mobile
   แก้ไขปัญหาระยะซ้าย-ขวาไม่เท่ากัน
   ======================================== */

/* Tablet (991px) - sidebar ยังอยู่ */
@media screen and (max-width: 991px) {
  .v2ctf {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bet page - stack เป็น 1 column */
  .zb {
    grid-template-columns: 1fr !important;
  }

}

/* Mobile (767px) - sidebar ซ่อน */
@media screen and (max-width: 767px) {
  .v2ctf {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form row - stack เป็น 1 column */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .form-group.full {
    grid-column: span 1 !important;
  }

  /* Tabs - wrap ได้ */
  .tabs {
    flex-wrap: wrap !important;
  }
}

/* ========================================
   BetConfirmation Table - เส้นขีด
   ======================================== */

/* เส้นขีดแนวตั้งระหว่างคอลั่ม */
.tb5g2 > div {
  border-right: 1px solid #c5e6d4;
}

/* คอลั่มสุดท้ายไม่มีเส้นขวา (เพราะ parent มีแล้ว) */
.tb5g2 > div:last-child {
  border-right: none;
}

/* เส้นขีดแนวนอนกั้นแถว */
.tb5g2 {
  border-bottom: 1px solid #c5e6d4;
}

/* แถวสุดท้ายไม่มีเส้นล่าง (เพราะ parent มีแล้ว) */
.tb5g2:last-child {
  border-bottom: none;
}

/* thdd, thd border */
.tb5g2 .thdd,
.tb5g2 .thd {
  border-color: #c5e6d4 !important;
}

/* หัวข้อตารางสถิติไม่ wrap */
.tb5g .thdd {
  white-space: nowrap;
}

/* ========================================
   BetConfirmation Buttons
   ======================================== */

/* ปุ่มยกเลิก - แดง */
.btn-cancel {
  border: none;
  cursor: pointer;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #ffebee;
  color: #c62828;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-cancel:hover:not(:disabled) {
  background-color: #ffcdd2;
}

.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ปุ่มย้อนกลับ - เขียวอ่อน (สไตล์เดียวกับ btnbm) */
.btn-back {
  border: 1px solid #c5e6d4;
  cursor: pointer;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fff;
  color: #084040;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-back:hover:not(:disabled) {
  background-color: #e8f5f1;
  border-color: #999;
}

.btn-back:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ปุ่มยกเลิก - ปกติ outline แดง, hover เป็นพื้นแดง */
.btn-cancel {
  border: 1px solid #c62828;
  cursor: pointer;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fff;
  color: #c62828;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-cancel:hover:not(:disabled) {
  background-color: #c62828;
  color: #fff;
}

.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ปุ่มย้อนกลับ - ปกติ outline เขียวอ่อน, hover เป็นพื้นเขียว */
.btn-back-contrast {
  border: 1px solid #c5e6d4;
  cursor: pointer;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fff;
  color: #084040;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-back-contrast:hover:not(:disabled) {
  background-color: #12674a;
  border-color: #12674a;
  color: #fff;
}

.btn-back-contrast:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ปุ่มยืนยัน - เขียว (สไตล์เดียวกับ btnbm) */
.btn-confirm {
  border: none;
  cursor: pointer;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--btnbg);
  color: var(--btntxt);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-confirm:hover:not(:disabled) {
  background-color: #2a4a4a;
}

.btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   Countdown/Time Status Colors
   ใช้กับ ปิดรับใน/เหลือเวลา
   ======================================== */

/* Warning - ใกล้ปิด (5-30 นาที) */
.countdown-warning {
  color: var(--color-warning, #e6a700) !important;
}

/* Urgent - ด่วนมาก (<5 นาที) */
.countdown-urgent {
  color: var(--color-danger, #c62828) !important;
}

/* ========================================
   Bet Page - Form สีขาว + Input ชัดเจน
   ======================================== */

/* ฟอร์มวางบิลหลัก - สีขาว */
.form-b {
  background-color: #fff !important;
}

/* Input fields - ชัดเจนว่ากรอกได้ */
.textarea,
.inputl,
.inputl2,
.inputc,
.input8,
.inputform {
  background-color: #fafafa !important;
  border: 1px solid #999 !important;
  box-shadow: none !important;
}

.textarea:focus,
.inputl:focus,
.inputl2:focus,
.inputc:focus,
.input8:focus,
.inputform:focus {
  outline: none !important;
}

/* Placeholder ชัดขึ้น */
.textarea::placeholder,
.inputl::placeholder,
.inputl2::placeholder,
.inputc::placeholder,
.input8::placeholder,
.inputform::placeholder {
  color: #999 !important;
}

/* ========================================
   แท็บแทงเร็ว - border ไม่ซ้อน
   ======================================== */
.inputl {
  border-radius: 8px 0 0 8px !important;
}

/* ช่องกรอกแทงเร็ว - padding ล่าง */
.div-block-105 {
  padding-bottom: 8px !important;
}

/* inputc ใน inputp2 (แทงเร็ว) - ไม่มี border ซ้าย */
.inputp2 .inputc {
  border-left: none !important;
}

/* Focus สำหรับ input ที่ไม่มี border ซ้าย - เพิ่มแค่เส้นซ้าย */
.inputp2 .inputc:focus,
.inputp > div:nth-child(2) .inputc:focus {
  box-shadow: inset 1px 0 0 0 var(--btnbg) !important;
}

.btn-f,
.btn-f-2 {
  border-radius: 0 8px 8px 0 !important;
  transition: background-color 0.2s ease !important;
}

/* Input disabled - สีชัดเจนว่า disabled */
.inputform:disabled,
.inputc:disabled,
.inputl:disabled,
.textarea:disabled {
  background-color: #e9ecef !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ปุ่ม disabled - สีเทาอ่อนสวยงาม */
.btn-disabled,
.btn-f.btn-disabled,
.btn-f-2.btn-disabled {
  background-color: #d1d5db !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ========================================
   Logo SVG - Redesigned Brand Logo
   พื้นที่ 240px, padding 20px ซ้าย = เหลือ 220px สำหรับ logo
   ======================================== */
.logo-svg {
  width: 100%;
  height: 100%;
}

/* Logo container - text only, centered */
.logo {
  width: 135px !important;
  height: 28px !important;
  padding: 0 !important;
  margin-left: 20px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Login page logo container - golden ratio spacing (1.5:1) */
.flg {
  opacity: 1 !important;
  padding: var(--sp-3) 0 var(--sp-4) 0 !important; /* 12px top, 16px bottom */
}

/* Login form field labels - grid aligned */
.tt2,
.tt22 {
  padding-top: var(--sp-3) !important;   /* 10px → 12px */
  padding-bottom: var(--sp-3) !important;
}

.tt22 {
  margin-top: var(--sp-2) !important;    /* 5px → 8px */
}

/* Login form input - consistent styling, touch-friendly */
.inputf {
  height: var(--h-button) !important;    /* 44px - เท่ากับปุ่ม */
  border-radius: var(--radius-md) !important; /* 8px */
}

/* Login form button - touch-friendly 44px */
.btnf {
  height: var(--h-button) !important;    /* 40px → 44px */
  border-radius: var(--radius-md) !important;
}

/* Login page footer - minimal copyright */
.login-footer {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);             /* 12px */
  text-align: center;
  padding-top: var(--sp-6);              /* 24px */
  padding-bottom: var(--sp-4);           /* 16px */
}

/* Login page logo - text only, centered */
.login-logo {
  width: 180px;
  height: 32px;
  display: block;
  margin: 0 auto;
}

/* ========================================
   Bet Row Highlight - บิลใหม่ fade in
   ======================================== */

@keyframes bet-row-fade-in {
  0% {
    opacity: 0;
    background-color: #b8e6cf !important;
  }
  30% {
    opacity: 1;
    background-color: #b8e6cf !important;
  }
  100% {
    opacity: 1;
    background-color: #fff !important;
  }
}

/* ต้องใช้ selector ที่แรงกว่า .tb7g-all-row */
.tb7g-all-row.bet-row-highlight {
  animation: bet-row-fade-in 2s ease-out forwards !important;
}

/* รายการที่ถูกยกเลิก - แสดงจางๆ */
.tb7g-all-row.bet-row-cancelled {
  background-color: #f9f9f9 !important;
}

.tb7g-all-row.bet-row-cancelled .thd {
  color: #999 !important;
}

/* ========================================
   ปุ่มลบบิลในรายการบิลล่าสุด
   ======================================== */
.btn-delete-bet {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-delete-bet:hover {
  background-color: #dc3545;
  color: #fff;
}