html, body, button, input, select, textarea {
      font-family: "Prompt" !important;
}

.image-show-list {
    width: 100px !important;
    max-height:100px; object-fit:cover; cursor:pointer;
}

.modern-card {
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    background: #fff;
}
.modern-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.card-header {
    background: #3dbfb3 !important;
    border: none;
}

.show_popup {
    z-index: 9999999 !important;
}

.modal-dialog {
    max-width: none !important;
}


.form-control.is-valid, .was-validated .form-control:valid {
    padding-right: 0 !important;
    background-image: none !important;
}

.custom-modal-point-deduct {
    width: 60% !important; /* ขนาดเริ่มต้น สำหรับหน้าจอใหญ่ */
    max-width: 95% !important; /* ป้องกันใหญ่เกินไป */
    margin: auto !important;
    margin-top: 20px !important;
    margin: auto !important;
}

.bg-ex {
    background-color: #3dbfb3 !important;
    color: #000 !important;
}

.custom-modal-point {
    width: 50% !important; /* ขนาดเริ่มต้น สำหรับหน้าจอใหญ่ */
    max-width: 90% !important; /* ป้องกันใหญ่เกินไป */
    margin: auto !important;
    margin-top: 20px !important;
}

.badge {
    font-size: 100% !important;
}

@media (max-width: 1200px) {
    .custom-modal-point {
        width: 100% !important; /* สำหรับหน้าจอโน้ตบุ๊กหรือหน้าจอเล็ก */
    }
    
    .custom-modal-point-deduct {
        width: 100% !important; /* สำหรับหน้าจอโน้ตบุ๊กหรือหน้าจอเล็ก */
    }
}


/* ดัน modal ให้อยู่หน้าสุด */
.modal {
  z-index: 9999 !important;
}

/* ดัน backdrop (พื้นหลังดำจาง ๆ) ให้อยู่ต่ำกว่า modal แต่สูงกว่า content อื่น */
.modal-backdrop {
  z-index: 9998 !important;
}

#tb_exp {
  table-layout: auto;       /* ให้ขนาดคอลัมน์ปรับตามเนื้อหา */
  width: 100%;
}
#tb_exp th, 
#tb_exp td {
  white-space: nowrap;      /* กันบรรทัดไม่ให้ตัดคำ */
  text-align: center;
  vertical-align: middle;
}

/* สีไฮไลต์เมื่อเลือก */
tr.selected {
    background-color: #d1e7dd !important; /* สีเขียวอ่อน สามารถเปลี่ยนสีได้ */
}

.card-primary:not(.card-outline)>.card-header {
    background-color: #3dbfb3 !important;
}

.card {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    margin-bottom: 1.5rem !important;
}

.widget-user-username {
  font-size: 28px !important;
  font-weight: bolder !important;
}

.bg-point {
  background-color: #62c7bb !important;
}

.bg-true {
  background-color: #ff9b47 !important;
}

.bg-razer {
  background-color: #f4d35c !important;
}

.bg-chillpay {
  background-color: #88ccf9 !important
}

.bg-haipay {
  background-color: hsl(258.08deg 31.34% 63.47%) !important
}

.icon-haipay {
  font-size: 50px;       /* ขนาดไอคอน */
  width: 80px;           /* กำหนดขนาดวงกลม */
  height: 80px;
  background-color: #fff; /* สีพื้นหลัง */
  border: 2px solid #ffffff; /* ขอบสีดำ ปรับสีตามต้องการ */
  border-radius: 50%;    /* ทำให้เป็นวงกลม */
  display: flex;          /* จัดตำแหน่งไอคอนตรงกลาง */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* ใส่เงาเล็กน้อย (ไม่จำเป็น) */
  color: #7c5bcd;
}

.bg-login {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgb(0 0 0 / 87%)), /* สีดำทับภาพ ความเข้มปรับได้ 0.0–1.0 */ url(../../asset/image/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active{
    background-color: #3dbfb3 !important;
    color: #fff;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    background-color: rgb(255 255 255 / 0%) !important;
    color: #3dbfb3 !important;
    border-bottom: 2px solid #3dbfb3;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 400px;
  padding: 50px 40px;
  background: #212529e3;
  border-radius: 8px;
  margin-top: 80px;
  color: #fff;

  /* ขอบและเงาเรืองแสงสีขาว */
  border: 2px solid rgba(255, 255, 255, 0.5); /* ขอบโปร่งแสงสีขาว */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
              0 0 20px rgba(255, 255, 255, 0.4),
              0 0 30px rgba(255, 255, 255, 0.2);
}


.btn-exp {
  color: #000;
  background-color: #71e1d6;
  transition: background-color 0.4s ease; /* เปลี่ยนสีอย่างสมูทใน 0.4 วินาที */
}

.btn-exp:hover {
  color: #000;
  background-color: #4accc2; /* สีตอน hover */
}

.top-title {
  text-align: center;
}

.image-logo {
  width: 80px;
}

/* --- Card Base --- */
.summary-card {
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}
.summary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* --- Header Accent --- */
.summary-header {
  border-left: 5px solid;
  padding-left: 0.75rem;
}
.border-blue { border-color: #76b5e8; }
.border-green { border-color: #81cba5; }
.border-yellow { border-color: #f6d57b; }

/* --- Icon Circle --- */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  box-shadow: inset 0 0 5px #6c757d;
}

.text-secondary {
    color: #444d56 !important;
}

/* --- Milk Pastel Backgrounds --- */
.bg-milk-blue { background: #f3f8fb; border: 2px solid #3a8ec7;}
.bg-milk-green { background: #f5fbf7; border: 2px solid #47a87c; }
.bg-milk-yellow { background: #fffaf3; border: 2px solid #ffc107;}

/* --- Text + Color --- */
.text-blue { color: #0077c7 !important; }
.text-green { color: #267f57 !important; }
.text-yellow { color: #d1a514  !important; }
.summary-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* --- Progress Bar --- */
.progress { background-color: #343a40; border-radius: 4px;}
.bg-blue { background-color: #6ab7e5; }
.bg-green { background-color: #7cc8a3; }
.bg-yellow { background-color: #f6d57b; }

/* --- Remaining Section --- */
.remaining {
  font-size: 1.15rem;
  margin-top: 0.25rem;
}
.remaining span {
  font-size: 1.6rem;
  font-weight: 700;
}

.rounded-pill {
    border-radius: 50rem !important;
    border: 1px solid #62c7bb !important;
    background-color: #62c7bb !important;
    color: #fff !important;
}

/*------------------------excel csv------------------------------------------*/

.upload-card {
  background: linear-gradient(135deg, #ffffff 0%, #f6fff7 100%);
  transition: all 0.3s ease-in-out;
}
.upload-card:hover {
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.15);
  transform: translateY(-3px);
}
.icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-file-label {
  border: 1px solid #c3e6cb;
  color: #155724;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
}

.style-csv {
    border: 2px solid #3dbfb3 !important;
    color: #3dbfb3 !important;
}

.bgg-exp {
    background-color: #3dbfb3 !important;
}

.text-exp {
    color: #3dbfb3 !important;
}

/*====================spin==========================*/


/* ครอบเต็มจอ */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* พื้นหลังเห็นลางๆ */
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.25);
  transition: opacity 0.6s ease;
}

/* ไอคอนหมุน */
.loader-icon i {
  font-size: 60px;
  color: #007bff; /* น้ำเงินสด */
  animation: spin 1s linear infinite;
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

/* ข้อความด้านล่าง */
.loading-text {
  margin-top: 20px;
  font-size: 1.3rem;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: blink 1.5s ease-in-out infinite;
}

/* แอนิเมชันหมุน */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* แอนิเมชันกระพริบข้อความ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


  .collapse {
        overflow: unset !important;
    }
  /* ======= GLOBAL ======= */
  .small-card {
    font-size: 0.9rem;
    background-color: #ffffff;
    border-radius: 1rem;
    border: none;
  }

  .toggle-btn {
    font-size: 0.85rem;
    border-radius: 0.7rem;
    font-weight: 500;
    transition: all 0.25s ease;
  }

  .toggle-btn:hover {
    background-color: #3b82f6;
    color: #fff;
  }

  /* ======= TABLE ======= */
  .small-table th, .small-table td {
    padding: 8px 10px;
    vertical-align: middle;
    border: 1px solid #e5e7eb;
  }

  thead th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
  }

  tbody td {
    font-weight: 500;
    color: #334155;
  }

  tbody tr:hover {
    background-color: #f1f5f9;
    transition: 0.25s;
  }

  /* ======= COLOR SCHEME ======= */
  .bg-paid { background: linear-gradient(90deg, #dc2626, #b91c1c); }
  .bg-free { background: linear-gradient(90deg, #16a34a, #15803d); }
  .bg-total { background: linear-gradient(90deg, #2563eb, #1e3a8a); }

  .bg-paid-sub { background-color: #fee2e2 !important; color: #991b1b; font-weight: 600; }
  .bg-free-sub { background-color: #dcfce7 !important; color: #166534; font-weight: 600; }
  .bg-total-sub { background-color: #e0e7ff !important; color: #1e3a8a; font-weight: 600; }

  .bg-paid-cell { background-color: #fff7f7 !important; }
  .bg-free-cell { background-color: #f3fff6 !important; }
  .bg-total-cell { background-color: #eef2ff !important; }

  .bg-pastel-red {
    background-color: #ff9aa1 !important;
    font-weight: 600;
    color: #b91c1c;
  }

  /* ======= TABLE HEADER ======= */
  .table-header-main th {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-top: none !important;
  }

  .card {
    box-shadow: 0 4px 12px rgb(0 0 0 / 22%) !important;
  }

  /* ======= FIX COLLAPSE ANIMATION (ไม่กระพริบ) ======= */
  .collapse {
    transition: height 0.35s ease, opacity 0.3s ease;
    overflow: hidden;
  }

  .collapse:not(.show) {
    display: block;
    height: 0;
    opacity: 0;
  }

  .collapse.show {
    height: auto;
    opacity: 1;
  }

  .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
  }

  /* Responsive fix */
  @media (max-width: 768px) {
    .small-table th, .small-table td { font-size: 0.8rem; }
    .toggle-btn { font-size: 0.8rem; }
  }
  
  
.small-table th,
.small-table td {
  padding: 0.5rem 0.4rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.bg-pastel-red {
  background-color: #ffe5e5 !important;
}

.table-header-main {
  background: #f0f0f0;
  font-weight: bold;
}

.small-card {
  transition: all 0.3s ease;
}

.toggle-btn i {
  transition: transform 0.3s ease;
}
.toggle-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.toggle-btn {
    background: linear-gradient(135deg, #00c6b0, #0097a7);
    color: #ffffff !important;
    border: none;
    font-weight: 500;
    border-radius: 50px;
    padding: 0.45rem 1.2rem;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 3px 6px rgba(0, 150, 136, 0.3);
  }

  .toggle-btn:hover {
    background: linear-gradient(135deg, #00b09b, #007a80);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 150, 136, 0.4);
  }

  .toggle-btn:active {
    transform: scale(0.97);
  }

  .toggle-btn i {
    transition: transform 0.3s ease;
  }

  .toggle-btn:hover i {
    transform: rotate(10deg) scale(1.1);
  }
  
 /*==========================[ สุ่มวงล้อ ]======================================*/
 
  .summary-pastel {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* บังคับ 4 ช่องใน 1 แถว */
      gap: 20px;
      margin-top: 20px;
    }
    
    /* การ์ดพื้นฐาน */
    .card-pastel {
      padding: 20px;
      border-radius: 18px;
      color: white;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      transition: .3s;
    }
    
    .card-pastel:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.25);
    }
    
    /* ชื่อหัวข้อ */
    .title-pastel {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* ตัวเลข */
    .value-pastel {
      font-size: 28px;
      font-weight: 800;
    }
    
    /* Gradient สีสวย */
    .bg-1 {
      background: linear-gradient(135deg, #a78bfa, #c4b8f4);
    }
    
    .bg-2 {
      background: linear-gradient(135deg, #f7a8c4, #d88aaa);
    }
    
    .bg-3 {
      background: linear-gradient(135deg, #8fbed8, #b7e3ff);
    }
    
    .bg-4 {
      background: linear-gradient(135deg, #7dd3fc, #8fbed8);
    }

  @media(max-width:768px){
    .summary-pastel {
      grid-template-columns: 1fr;
    }
  }