html, body, button, input, select, textarea {
    font-family: "Prompt" !important;
    color: #4b545c;
}
/* Desktop: อยู่ขวาบน เรียงแนวนอน */
.date-filter-wrapper {
  width: 100%;
}

.date-filter {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 1rem;
}

/* Mobile: เรียงจากซ้ายไปขวา พร้อมปุ่ม reset */
@media (max-width: 768px) {
  .date-filter {
    flex-direction: row; /* เรียงแนวนอน */
    flex-wrap: wrap;     /* ถ้าไม่พอ wrap ลงบรรทัดใหม่ */
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .date-group,
  .reset-group {
    flex: 1 1 30%; /* ให้แต่ละกลุ่มประมาณ 1/3 container */
    min-width: 100px; 
    display: flex;
    flex-direction: column; /* label อยู่บน input/button */
  }

  .reset-group button {
    margin-top: auto; /* ให้ button อยู่ขอบล่าง label */
  }
}


 .info-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .75rem 1rem;
    transition: box-shadow 0.2s ease-in-out;
  }

  .info-box:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  }

  .info-label {
    color: #198754;
    font-weight: 600;
    width: 100px;
  }

  .secure-text {
    font-family: "Courier New", monospace;
    letter-spacing: 2px;
    color: #495057;
  }

  .toggle-eye {
    color: #6c757d;
  }

  .toggle-eye:hover {
    color: #198754;
    text-decoration: none;
  }

.showstyle-app {
    background-color: #c4eef5 !important;
    border:2px solid #0cb1cc !important;
}

.textarea-exp {
    height: 300px !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image:none !important;
}

  /* ปรับข้อความใน badge ให้เล็กลง ถ้าจำเป็น */
  .badge-status {
    font-size: 0.85rem;
    cursor: pointer;
  }

.swal2-container {
    z-index: 100001 !important;
}

.btn-outline-exp-1 {
    color: #343a40;
    border-color: #3dbfb3;
    background-color: #3dbfb3;
}

.btn-outline-exp-1:hover {
    color: #343a40;
    background-color: #3dbfb3;
    text-decoration: none;
}

/* จัดสไตล์ Upload Box */
.upload-box {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.upload-box.drag-over {
  border-color: #3085d6;
  background-color: #f1f9ff;
}

.bg-gradient-info {
    background: #55938d !important;
    color: #ffffff !important;
    border-left: 10px solid #2b716b !important;
}

.bg-gradient-primary {
    background: #e7a843 !important;
    color: #ffffff !important;
    border-left: 10px solid #d9741f !important;
}

.bg-gradient-success {
    background: #518dc2 !important;
    color: #ffffff !important;
    border-left: 10px solid #386aa0 !important;
}

.btn-view-slip,
.btn-upload-slip {
  display: inline-block;
  min-width: 130px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 50px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.btn-view-slip {
  background: #343a40;
  color: #fff;
  border: none;
}

.btn-upload-slip {
  background: linear-gradient(135deg, #f6c23e, #e74a3b);
  color: #fff;
  border: none;
}

.btn-view-slip:hover {
  background:#343a40;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  color: #fff;
}

.btn-view-slip i {
  font-size: 14px;
}

.modal-dialog {
    margin: 0rem auto !important;
    padding-right: 0px !important;
}

.modal-content {
    height: -webkit-fill-available !important;
}

.modal-dialog-centered {
    /*height: -webkit-fill-available !important;*/
}

.clickable-badge {
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor:pointer;
    font-weight: 400;
}

.clickable-badge:hover {
    background-color: rgba(0,0,0,0.1); /* ทำให้ badge สว่างขึ้นเล็กน้อย */
    transform: translateY(-1px);        /* เด้งขึ้นนิดเดียว */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.clickable-badge i {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.clickable-badge:hover i {
    opacity: 1; /* ไอคอนชัดขึ้นเวลา hover */
}

.modal-header .close {
  font-size: 2rem;   /* ขนาดกากบาท */
  opacity: 1;        /* ให้ชัดเจน ไม่ซีด */
}

.custom-table {
    border-radius: 12px;
    overflow: hidden;
  }
  .custom-table thead {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
  }
  .custom-table th {
    font-weight: 600;
    font-size: 14px;
    padding: 12px;
  }
  .custom-table td {
    padding: 10px 12px;
    vertical-align: middle;
  }
  .custom-table tbody tr:hover {
    background-color: #f1f3f5;
    transition: 0.2s;
  }
  .badge-status {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 20px;
  }
  
  .text-order {
    width: 90px;
    font-size: small;
  }
  
  .text-order-all {
    width: 150px;
    font-size: small;
  }
  
 .clickable-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 170px; /* กำหนดความกว้างเท่ากัน */
}

.close-check {
  font-size: 2.5rem; 
  line-height: 1;
  opacity: 1;
  color:#000;
  top: 0.1rem;  
}

.close-x {
    font-size: 32px;
}

.text-exp {
    color: #0da99b;
    font-weight: 600;
}

 /* ปุ่ม reset หมุนเล็กน้อยเวลา hover */
 .reset-btn:hover i {
    transform: rotate(-180deg);
    transition: transform 0.4s ease;
}

.btn-outline-exp {
    color: #3dbfb3;
    border-color: #3dbfb3;
}


.btn-outline-expup {
    color: #089d8f;
    border-color: #089d8f;
    background-color: #fff;
}

.badge-status {
    display: inline-block;
    min-width: 130px; /* กำหนดความกว้างตามข้อความที่ยาวสุด */
    text-align: center;
    color: #ffffff !important;
    font-weight: 400;
}

.table-responsive {
  width: 100% !important;
}

#tb_exp_order {
  width: 100% !important;
}
.bg-dark {
    background-color: #000;
}

.text-dark {
    color: #5a626b !important;
}

.close-button {
    top:10px; 
    right:10px;
}

.text-teal {
    color: #5a626b !important;
}

.text-a a {
    color: #008a7d !important;
}

.image-show-list {
    width: 150px !important;
    max-height:150px; 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: 70% !important; /* ขนาดเริ่มต้น สำหรับหน้าจอใหญ่ */
    max-width: 95% !important; /* ป้องกันใหญ่เกินไป */
    margin: auto !important;
    margin-top: 20px !important;
    margin: auto !important;
}

.bg-ex {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

.big-close span {
  font-size: 2.5rem;   /* ขนาดใหญ่ขึ้น */
  font-weight: bold;   /* หนัก ชัดเจน */
  color: #000;         /* สีดำชัด */
  opacity: 1;          /* ไม่จาง */
  line-height: 1;      /* จัดให้อยู่ตรงกลาง */
}

.big-close:hover span {
  color: red;          /* hover เป็นสีแดง */
  transform: scale(1.2); /* ขยายเวลา hover */
}

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


.custom-modal-pack {
    width: 100% !important; /* ขนาดเริ่มต้น สำหรับหน้าจอใหญ่ */
    max-width: 95% !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: #343a40 !important;
    color: #ffffff;
}

.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: #cb8492 !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-001.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #fbfbfb;
}

.main-sidebar {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #343a40;
  color: #000;
}

[class*=sidebar-dark-] .sidebar a {
    color: #484a4f;
}

.nav-pills .nav-link:not(.active):hover {
    color: #141517;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:active {
    color: #14897e !important;
}

.elevation-3 {
    box-shadow: none !important;
}

.nav-item a {
    color: #3dbfb3 !important;
}

.brand-text {
    color: #fff;
}

[class*=sidebar-dark] .brand-link .pushmenu, [class*=sidebar-dark] .brand-link {
    color: #fff !important;
    background-color: #343a40 !important
}

[class*=sidebar-dark] .brand-link .pushmenu, [class*=sidebar-dark] .brand-link {
    color: #14897e !important;
}

.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 !important;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #fcffff;
}

[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: #111f1e7d;
    border-radius: 8px;
    margin-top: 80px;
    color: #fff;
    border-top: 6px solid rgb(64 224 208);
    box-shadow: 0 0 10px rgb(64 224 208), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
}


.btn-exp {
  color: #343a40;
  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;
  color: #29c5b5;
}

.image-logo {
  width: 80px;
}


/*================================  บัตรเติมเงิน ========================================*/

.box-cards {
    /*border: 1px solid  #ccc;*/
    margin: 6px 0px;
    border-radius: 10px;
    /*background-color: #f1f1f1;*/
}

.card-header-1 {
    position: relative; /* ต้องมี relative เพื่อให้ child ที่ absolute อยู่ในขอบเขตนี้ */
    display: flex;
    align-items: center;
    padding: 10px;
}

.card-price-text {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgb(64 224 208);
    color: #fff;
    padding: 4px 8px;
    border-radius: 14px;
    font-weight: bold;
    font-size: 13px;
}

.blog-card {
    margin: auto;
}
.card_style {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 18px;
    /* box-shadow: 0 4px 6px rgb(0 0 0 / 30%); */
    margin: 10px;
    background-image: url(../../asset/image/card/card.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    /* background-blend-mode: multiply; */
    background-color: rgba(0, 0, 0, 0.6); 
    width: 92%;
}


.card_style:hover {
    transform: translateY(-10px); /* ลอยขึ้น 10px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
}

.card-header-1 img {
    transition: transform 0.3s ease;
}

.card_style:hover .card-header-1 img {
    transform: scale(1.05); /* ซูมภาพนิดหน่อยเวลา hover */
}

.box-cards {
  position: relative;
  display: flow; /* เพื่อให้ card + detail ต่อกัน */
}

.card_style_detail {
  position: relative;;
  bottom: 0;
  left: 0;
  right: 0; 
  padding: 10px 10px;
  font-size: 14px;
  background-color: #fff;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  margin: auto;
  text-align: center;
}

.blog-body {
    position: absolute; top: 10px; right: 10px; z-index: 10;
}

.btn-card-new {
    font-size: 12px;
    border: 1px solid #fff;
}


.card-body-1 {
    position: relative;   /* ใช้กำหนดตำแหน่งภายใน */
    padding: 10px;
    height: 57px;
}

.card-footer {
    display: flex;
    justify-content: space-between; /* ซ้าย-ขวา */
    align-items: center;
    width: 100%;
}

.card-price {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin: auto;
}

.card_style_detail p {
    margin: 5px 0;       /* ระยะห่างบน-ล่างของแต่ละบรรทัด */
    line-height: 1.3;    /* ระยะห่างระหว่างบรรทัด */
    color: #4b545c;
}

.card-expiry {
    font-size: 14px;
    color: #fff;
    float: left;
}

.card-footer {
    margin-top: 48px !important
}

.img-logo-card {
    width: 33px;
}

.page-link {
    cursor: pointer !important;
    color: #119d90 !important;
}

.page-item.active .page-link {
    cursor: pointer !important;
}

.tab-pagination {
    margin: auto;
}

.page-item.active .page-link {
    background-color: #3dbfb3 !important;
    border-color: #8b8c8d !important;
    color: #fff !important;
}

.pagination {
    margin-top: 10px !important;
}

.card-header-2 {
  position: relative; /* ทำให้ลูก .card-overlay-text อ้างอิงตำแหน่งได้ */
  display: inline-block;
  background-color: #4b545c;
  border-radius: 30px 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-overlay-text-2 {
  position: absolute;
  bottom: 10px; /* อยู่ด้านล่างของรูป (ปรับได้: top, bottom, left, right) */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff; /* ตัวอักษรสีขาว */
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5); /* กล่องดำโปร่งใสให้อ่านง่าย */
  padding: 8px 12px;
  border-radius: 6px;
}

.img-card-pack {
    /*border: 1px solid #40e0d0;*/
    /*border-radius: 44px 44px;*/
}

.card-price-top-right {
    position: absolute;
    top: 24px;
    right: 40px;
    background-color: rgb(64 224 208);
    color: #fff;
    padding: 4px 8px;
    border-radius: 14px;
    font-weight: bold;
    font-size: 16px;
}

.card-name-bottom-center {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /*background: rgba(0, 0, 0, 0.5);*/
  color: #fff;
  font-weight: bold;
  /*padding: 6px 12px;*/
  border-radius: 6px;
}


.box-cards-2 {
    position: relative;
    display: flow; /* เพื่อให้ card + detail ต่อกัน */
    /*width: 64%;*/
    margin: auto;
}

.text-muted {
    color: #6c757d !important;
    text-align: justify;
    /*padding: 20px 20px;*/
}

.text-muted-2 {
    padding: 20px 50px;
    text-align: justify;
}

.package-card {
  cursor: pointer;
  transition: all 0.3s ease;
}
.package-card:hover {
  border-color: #0d6efd;
  background: #f8f9fa;
}
.package-radio:checked + .card-body {
  border-left: 5px solid #0d6efd;
  background: #e9f5ff;
}

.package-card.selected {
  border: 3px solid #71e1d6; 
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
  background: #f0f8ff;
}

.package-card.active {
  border: 2px solid #28a745;
  background: #e6ffe6;
}

.text-expup {
    color: #0b9b8e;
    font-size: 15px;
    margin-top: 18px !important;
}

.price-floating-box {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  min-width: 90px;
}

.price-floating-box .price-main {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.price-floating-box .price-sub {
  font-size: 0.8rem;
  opacity: 0.9;
}

.package-card {
  position: relative;
  overflow: hidden; /* กันไม่ให้ริบบิ้นล้น */
}

.price-ribbon {
  position: absolute;
  top: 12px;
  right: -40px; /* ดันออกไปให้หมุนแล้วอยู่พอดี */
  background: #dc3545; /* สีแดง หรือจะใช้ Bootstrap variable ก็ได้ */
  color: #fff;
  padding: 5px 40px;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}


.nav-link {
  position: relative;
}

.cart-icon-wrapper {
  position: relative;
  display: inline-block;
  font-size: 20px; /* ขยายไอคอนตะกร้า */
  margin-right: 29px !important;
}

#cart-count {
  position: absolute;
  top: -11px;
  right: -22px;
  font-size: 12px !important;  /* ลดขนาดตัวเลข */
  padding: 2px 5px;
  border-radius: 50%;
  line-height: 1;   /* ทำให้ badge กระชับ */
}


    .order-card {
      background: #fff;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .order-summary {
      background: #f1f5f9;
      padding: 15px;
      border-radius: 12px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between; /* ดันให้อยู่ซ้าย-ขวา */
      align-items: center;            /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    }

    .order-summary p {
      margin: 5px 0;
      font-weight: 500;

    }

    .price {
      font-size: 20px;
      font-weight: 700;
      color: #e63946;
      margin-right: 55px !important;
    }
    
    .price-total {
        font-size: 18px;
        font-weight: 700;
        color: #e63946;
        margin-top: 35px !important;
    }

    .btn-buy {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      border: none;
      border-radius: 30px;
      padding: 12px 30px;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .btn-buy:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .bank-box {
      background: #fff3cd;
      padding: 15px;
      border: 1px dashed #ffc107;
      border-radius: 12px;
    }
    
.toast {
  position: fixed;
  top: 20px;       /* ⬅️ อยู่บนสุด */
  right: 20px;     /* ⬅️ ชิดขวา */
  background: #4caf50; /* success */
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.toast.error {
  background: #e74c3c; /* error */
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.cart-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.9);
 background: rgba(0, 0, 0, 0.5); /* ดำใส 50% */
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100000;
}
.cart-popup.show {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

/* ทำให้ icon ตะกร้าสั่น */
.bounce {
  animation: bounceAnim 0.5s;
}
@keyframes bounceAnim {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.9); }
}


/* เอฟเฟกต์สั่น */
@keyframes cart-bounce {
  0%,100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
  60% { transform: translateY(3px); }
}
.bounce {
  animation: cart-bounce 0.5s;
}


.package-card {
  position: relative; /* ให้ลูกใช้ absolute ได้ */
}

.overlay-icon {
  position: absolute;
  top: 8px;   /* ห่างจากบน 8px */
  right: 8px; /* ห่างจากขวา 8px */
  width: 40px;
  z-index: 5;
}

.order-summary {
    position: relative;
    background: #fff;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 1px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 5%);
    border-left: 6px solid #3dbfb3;
}

.text-gold {
    color: #bfa14a; /* ทองเรียบหรู */
  }
  .order-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }


  .order-card {
    border: none;
    border-radius: 1.2rem;
    background: var(--secondary-color);
    transition: 0.3s ease;
  }

  .order-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }

  .order-summary {
    border-bottom: 1px dashed #dcdcdc;
  }

  .order-summary:last-child {
    border-bottom: none;
  }

  .price-total {
    font-size: 1.1rem;
    color: var(--primary-color);
  }

  /* ปุ่มลบ */
  .btn-outline-danger {
    border-radius: 50%;
  }

  /* ปุ่มหลัก */
  .btn-main {
    background-color: #3dbfb3;
    color: #fff;
    font-weight: bold;
    border-radius: 2rem;
    transition: 0.2s;
  }

  .btn-main:hover {
    background: #34a79d;
    color: #fff;
  }

  .btn-warning {
    border-radius: 2rem;
    font-weight: bold;
  }
  
  #show_cart .icon-shop {
      color: #fff !important;
  }

  /* ตะกร้าว่าง */
  #show_cart .icon-cart-1 {
    color: #3dbfb3;
    opacity: 0.5;
  }
  
  
.btn-theme {
  background: linear-gradient(135deg, #3ddadf, #3dbfb3, #2fa399);
  background-size: 200% 200%;
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.8rem 2rem;
  border-radius: 14px;
  transition: all 0.4s ease;
  box-shadow: 0 6px 18px rgba(61, 191, 179, 0.35);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  animation: gradientMove 5s ease infinite; /* ทำให้ gradient เคลื่อนไหว */
}

/* Gradient animation */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover effect */
.btn-theme:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 28px rgba(61, 191, 179, 0.55),
              0 0 18px rgba(61, 191, 179, 0.6);
}

/* Shine effect */
.btn-theme::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
}

.btn-theme:hover::after {
  left: 160%;
  transition: left 0.8s ease;
}

/* Active effect */
.btn-theme:active {
  transform: scale(0.96);
  box-shadow: 0 4px 12px rgba(61, 191, 179, 0.45);
}

/* Section พื้นหลัง */
.payment-section {
  background: #f5fafa;
}

/* กล่องข้อมูลบัญชี */
.account-box {
  padding: 2.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* โลโก้ธนาคาร */
.bank-logo {
  width: 150px;
  height: 150px;
  background: #f5fafa;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.bank-logo img {
  width: 140px;
}

/* หมายเลขบัญชี */
.account-number-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
  border-radius: 50rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}

.account-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #3dbfb3;
  margin-right: 0.5rem;
}

.copy-btn {
  background: #3dbfb3;
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(61,191,179,0.4);
}

/* ฟอร์มแนบสลิป */
.upload-box-container {
  padding: 2.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  height: 100%;
}

.upload-title {
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #3dbfb3;
}

/* input style */
.input-style {
  border-radius: 50rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Upload box */
.upload-box {
  border: 2px dashed #3dbfb3;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.upload-box.drag-over {
  background: #f0fdfd;
}

.upload-icon {
  font-size: 2rem;
  color: #3dbfb3;
  margin-bottom: 0.5rem;
}

/* ปุ่มส่ง */
.submit-btn {
  border: none;
  border-radius: 50rem;
  font-weight: bold;
  color: #fff;
  padding: 0.6rem 1rem;
  background: #3dbfb3;
  transition: 0.3s;
  box-shadow: 0 3px 12px rgba(61,191,179,0.4);
}

.submit-btn:hover {
  background: #2fa399;
}

.section-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #2fa399; /* สีธีม */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

 /* กรอบ Preview */
.preview-wrapper {
  display: inline-block;
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 8px;
  background: #f9f9f9;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ปุ่มลบ */
.preview-wrapper .btn-danger {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-upload-slip {
  background: linear-gradient(135deg, #f6b93b, #e58e26); /* สีส้ม-ทอง */
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: 0.3s;
}
.btn-upload-slip:hover {
  background: linear-gradient(135deg, #e58e26, #f6b93b);
  transform: translateY(-2px);
}

/*======================================  แยกตามหน้าจอ ===========================================*/

@media (min-width: 576px) { 
    
    /*.check_col {*/
    /*    flex: 0 0 60% !important;*/
    /*    max-width: 60% !important;*/
    /*}*/
}

/* มือถือ (น้อยกว่า 576px) */
@media (max-width: 576px) { 
    
    .card.shadow-lg {
        padding: 1rem !important;
        margin: 0 0.5rem !important;
    }
    
    .card-footer {
        /*padding: 1.75rem 1.25rem !important;*/
    }
    
    .card-price {
        margin-top: 20px !important;
    }
    
    .check_col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .box-cards-2 {
        width: 90% !important;
        font-size: small !important;
    }
    
    .img-slip-modal {
        width:100% !important;
    }
    
    .custom-modal-card {
        width: 100% !important;
    }
}

/* Tablet เล็ก (≥576px) */
@media (min-width: 760px) { 
    .card-footer {
        padding: 1.75rem 1.25rem !important;
    }
    
    .check_col {
        flex: 0 0 49.333333% !important;
        max-width: 50.333333% !important;
    }

    .box-cards-2 {
        width: 85% !important;
    }
    
    .img-slip-modal {
        width:90% !important;
    }
    
    .custom-modal-card {
        width: 70% !important;
    }
}

/* Tablet กลาง (≥768px) */
@media (min-width: 1200px) { 
  .check_col {
        flex: 0 0 49.333333% !important;
        max-width: 50.333333% !important;
    }
    
    .img-slip-modal {
        width:90% !important;
    }
}

/* Laptop (≥992px) */
@media (min-width: 1350px) { 
    .card-footer {
        padding: 0.5rem 1.25rem !important;
    }
    
    .check_col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    .img-slip-modal {
        width:90% !important;
    }
}

/* Desktop (≥1200px) */
@media (min-width: 1400px) {
    .card-footer {
        padding: 0.5rem 1.25rem !important;
    }
    
    .check_col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .card-name-bottom-center {
        padding: 0px 0px !important;
    }
    .card-header-2 {
        border-radius: 27px 27px !important;
    }
    
    .img-slip-modal {
       width: 40% !important;
    }
}

/* Desktop จอใหญ่พิเศษ (≥1400px) */
@media (min-width: 1500px) { 
    
    .card-footer {
        padding: 0.5rem 1.25rem !important;
    }
    
    .check_col {
        flex: 0 0 24.333333% !important;
        max-width: 33.333333% !important;
    }
}