/* กำหนด list container สูงตายตัว */
    .staff-container {
      display: flex;
      overflow-x: auto;
      gap: 16px;
      padding: 16px;
      /* ความสูงตายตัว (ตัวอย่าง 220px) */
      height: 100%;
      box-sizing: border-box;
		background:transparent;
    }


    /* การ์ดของแต่ละ staff ให้สูง 100% ของ container */
    .staff-card {
      width: auto;            /* ความกว้างตามต้องการ */
      height: 100%;            /* เต็มความสูงของ .staff-container */
      border: 2px solid #ed1c24;
      border-radius: 8px;
      box-sizing: border-box;
      position: relative;      /* ถ้าจะวาง text ซ้อนทับรูปได้ง่ายขึ้น */
      flex-shrink: 0;          /* ไม่ให้การ์ดย่อเกินกว่านี้ */
      cursor: pointer;
      background-color: #fff;
    }

    /* รูปภาพสูงเต็มการ์ด */
    .staff-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;  /* ครอปภาพโดยรักษาอัตราส่วน ไม่ให้บิดเบี้ยว */
      border-radius: 6px;
    }

    /* ตัวอย่างการวางชื่อ staff ซ้อนทับที่ด้านล่างของรูป (หากต้องการ) */
    .staff-name {
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      background-color: rgba(255,255,255,0.7);
      border-radius: 4px;
      padding: 4px;
      font-weight: bold;
      color: #333;
      width: 80%;
      margin: 0 10% 8px 10%;
    }
/* ตัวอย่างการตกแต่งใน Dark Mode แบบกำหนดเอง */
.my-dark-popup .swal2-popup {
	background-color: #111 !important; /* พื้นหลัง */
	color: #fff !important;           /* สีตัวอักษร */
	border: 1px solid #555;          /* ขอบ */
}
.my-dark-popup .swal2-title {
	color: #ffcc00 !important;       /* เปลี่ยนสีเฉพาะ title */
	font-size:15px;
}
.my-dark-popup .swal2-styled.swal2-confirm {
	background-color: #444 !important; 
	color: #fff !important;
}
.my-dark-popup .swal2-styled.swal2-cancel {
	background-color: #666 !important;
	color: #fff !important;
}


    /* Envelope styles - reduced size for better fit */
    .frame {
      width: 100px; /* Reduced from 180px */
      height: 66px; /* Reduced from 120px */
      position: relative;
      background: #d15fbe;
      border-radius: 0 0 10px 10px; /* Adjusted from 16px */
      transform-origin: center;
      margin: 0 auto;
      overflow: hidden;
    }

    .message {
      position: relative;
      width: 90%;
      height: 80%;
      background: #B0B0B0;
      margin: 0 auto;
      top: 9px; /* Adjusted from 17px */
      box-shadow: 0 0 5px 2px rgba(0,0,0,0.25);
      transition: 2s ease-in-out;
      transition-delay: 1.5s;
      z-index: 300;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .message-content {
      padding: 3px; /* Reduced from 5px */
      width: 100%;
      text-align: center;
      overflow: hidden;
    }

    .message h1, .message h2, .message h3 {
      margin: 2px; /* Reduced from 4px */
      font-size: 8px; /* Reduced from 11px */
      white-space: nowrap;
    }

    .left, .right, .top {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      z-index: 310;
    }

    .left {
      border-left: 50px solid #b043a1; /* Reduced from 90px */
      border-top: 33px solid transparent; /* Reduced from 60px */
      border-bottom: 26px solid transparent; /* Reduced from 50px */
    }

    .right {
      border-right: 50px solid #b043a1; /* Reduced from 90px */
      border-top: 33px solid transparent; /* Reduced from 60px */
      border-bottom: 26px solid transparent; /* Reduced from 50px */
      left: 50px; /* Reduced from 90px */
    }

    .top {
      border-right: 50px solid transparent; /* Reduced from 90px */
      border-top: 30px solid #e274ce; /* Reduced from 55px */
      border-left: 50px solid transparent; /* Reduced from 90px */
      transition: transform 1s, border 1s, ease-in-out;
      transform-origin: top;
      transform: rotateX(0deg);
      z-index: 500;
    }

    .bottom {
      width: 100px; /* Reduced from 180px */
      height: 33px; /* Reduced from 60px */
      position: absolute;
      background: #9b3992;
      top: 33px; /* Reduced from 60px */
      border-radius: 0 0 8px 8px; /* Reduced from 12px */
      z-index: 310;
    }

    .open {
      transform-origin: top;
      transform: rotateX(180deg);
      transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
      border-top: 30px solid #c656b4; /* Reduced from 55px */
      z-index: 200;
    }

    .pull {
      animation: message_animation 2s 1 ease-in-out;
      animation-fill-mode: forwards;
      animation-delay: 0.45s;
      transition: 1.5s;
      transition-delay: 1s;
      z-index: 300;
	  background: lightyellow;
      border: solid 1px grey;
    }

    @keyframes message_animation {
      0% {
        transform: translatey(0px);
        z-index: 300;
      }
      50% {
        transform: translatey(-63px); /* Reduced from -115px */
        z-index: 300;
      }
      51% {
        transform: translatey(-63px); /* Reduced from -115px */
        z-index: 350;
      }
      100% {
        transform: translatey(-14px); /* Reduced from -25px */
        z-index: 350;
      }
    }

    .envelope-animation {
      position: absolute;
      transition: all 0.8s ease;
      z-index: 500;
    }

    .enlarged-envelope {
      transform: scale(2.8); /* Adjusted from 2 */
    }

    .enlarged-envelope .message h1, 
    .enlarged-envelope .message h2 {
       font-size: 0.69vh;
      margin: 5px;
      font-weight: bold;
      color: #00008B;
    }

    .enlarged-envelope .frame {
      overflow: visible;
    }
    


	.discount-text {
		font-size: xx-small !important;
		font-weight: bold;
		color: mediumseagreen;
		margin: 0px;
	}
    
    .expiry-text {
		font-size: xx-small;
		color: #666;
		margin: 0px;
	}
    /* Custom Modal Styles - Adjusted width and height */
    .custom-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2000;
    }

    .modal-content {
      background-color: white;
      width: 90%;
      max-width: 300px; /* Increased from 400px */
      min-height: 350px; /* Adjusted from 400px */
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      text-align: center;
      position: relative;
      overflow: auto; /* Added overflow control */
    }

    .modal-title {
      font-size: 20px;
      margin-bottom: 20px;
      color: #d15fbe;
    }

    /* Updated grid to ensure envelopes fit */
    .envelope-grid-popup {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* gap: 8px; Reduced from 15px */
      justify-items: center;
      /* padding: 8px;*/
    }

    .envelope-option {
      cursor: pointer;
      transition: transform 0.2s;
      width: auto; /* Fixed width */
      height: 66px; /* Fixed height */
    }

    .envelope-option:hover {
      transform: scale(1.1);
    }

    .loading-spinner {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #d15fbe;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .animation-container {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .save-btn {
      padding: 10px 20px;
      background-color: #d15fbe;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 15px;
      cursor: pointer;
      margin-top: 4px;
      display: none;
    }

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

    .modal-close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      color: #999;
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
    }

    .modal-close-btn:hover {
      color: #d15fbe;
    }

    .hidden {
      display: none;
    }
    
    /* Loading styles */
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    
    .loading-text {
      margin-top: 20px;
      font-size: 18px;
      color: #d15fbe;
    }

    /* Media query for small screens */
    @media (max-width: 480px) {
      .envelope-grid-popup {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      
      .frame {
        width: 80px;
        height: 53px;
      }
      
      .left {
        border-left: 40px solid #b043a1;
        border-top: 26px solid transparent;
        border-bottom: 19px solid transparent;
      }
      
      .right {
        border-right: 40px solid #b043a1;
        border-top: 26px solid transparent;
        border-bottom: 19px solid transparent;
        left: 40px;
      }
      
      .top {
        border-right: 40px solid transparent;
        border-top: 24px solid #e274ce;
        border-left: 40px solid transparent;
      }
      
      .bottom {
        width: 80px;
        height: 26px;
        top: 26px;
      }
    }



/* Global SweetAlert Styling */
.swal2-popup {
  background: #f8f8f8;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: none;
  font-family: 'Sarabun', sans-serif;
  padding: 20px;
}

@media (max-width: 480px) {
  .swal2-popup {
    padding: 15px;
    width: 95% !important;
  }
}

.swal2-title {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin-bottom:5px;
}

.swal2-content {
  color: #444;
}

/* Purple Theme Button */
.swal2-confirm {
  background: #663399 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
  margin: 10px 0 !important;
}

.swal2-confirm:hover {
  background: #553088 !important;
  transform: translateY(-2px);
}

.swal2-cancel {
  background: #e9e9e9 !important;
  color: #333 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
	margin: 10px 0 !important;
}

.swal2-cancel:hover {
  background: #d5d5d5 !important;
  transform: translateY(-2px);
}

/* Link Style Input (Read-only) */
.swal2-input[readonly] {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  color: #666;
  text-align: center;
  cursor: not-allowed;
  width: 90% !important;
  margin: 0 auto 15px !important;
  display: block !important;
}

.swal2-html-container {
	padding:0px !important;
}

/* Custom Link Buttons */
.custom-link-button {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 45%;
  text-align: center;
  margin: 10px;
  transition: all 0.3s ease;
  word-wrap: break-word;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .custom-link-button {
    padding: 12px 10px;
    font-size: 13px;
    margin: 8px;
  }
}

.custom-link-button:hover {
  background: #f0f0f0;
  border-color: #663399;
}

/* Action Button Styles */
.action-button {
  background: linear-gradient(145deg, #753bb9, #663399);
  border: none;
  border-radius: 10px;
  padding: 12px 25px;
  font-size: 16px;
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(102, 51, 153, 0.2);
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cancel-button{
 background: #e9e9e9 !important;
  color: #333 !important;
}

@media (max-width: 480px) {
  .action-button {
    width: 45%;
    padding: 10px 15px;
    font-size: 14px;
    margin: 5px;
  }
  
  .action-button i {
    margin-right: 5px;
    font-size: 14px;
  }
}

.action-button:hover {
  background: linear-gradient(145deg, #8544cc, #753bb9);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(102, 51, 153, 0.3);
}

.action-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(102, 51, 153, 0.2);
}

.action-button i {
  margin-right: 8px;
  font-size: 18px;
  flex-shrink: 0;
}

.action-button.copy-button {
  background: linear-gradient(145deg, #6c757d, #5a6268);
}

.action-button.copy-button:hover {
  background: linear-gradient(145deg, #7d868e, #6c757d);
}

.action-button.share-button {
  background: linear-gradient(145deg, #2196F3, #1976D2);
}

.action-button.share-button:hover {
  background: linear-gradient(145deg, #42a5f5, #2196F3);
}

/* Points Message Style */
.points-message {
  text-align: center;
  color: #663399;
  font-size: 15px;
  margin: 15px 0;
  padding: 10px;
  background: rgba(102, 51, 153, 0.1);
  border-radius: 8px;
}

/* Underlined Links Style */
.underlined-link {
  color: #663399;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease;
}

.underlined-link:hover {
  color: #442266;
  text-decoration: underline;
}

/* Input styles for form elements */
.swal2-input {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 100%;
}

.swal2-input:focus {
  border-color: #663399;
  box-shadow: 0 0 5px rgba(102, 51, 153, 0.4);
}

.swal2-select {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
  background-color: white;
  width: 69%;
}

.swal2-label {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

/* Animation effect */
.swal2-show {
  animation: swal2-show 0.4s;
}

@keyframes swal2-show {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Footer text style */
.swal2-footer {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin-top: 15px;
}

/* Overlay background */
.swal2-container {
  background: rgba(0, 0, 0, 0.7);
}

/* Custom container for links */
.links-container {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  gap: 10px;
}

@media (max-width: 480px) {
  .links-container {
    flex-direction: row;
    gap: 8px;
  }
  
  .links-container .custom-link-button {
    width: 48%;
  }
}


table.styled-table {
    text-align: center;
    font-size: x-small;
    width: 100%;
}


button#next-page {
    background: lightblue !important;
    color: slategrey;
    font-size: small !important;
    padding: 10px !important;
	margin-right:40px !important;
}

button#prev-page {
    background: lightblue !important;
    color: slategrey;
    font-size: small !important;
    padding: 10px !important;
	margin-left:40px !important;
}