:root {
  --heading-font: 'Chonburi', cursive;
  --body-font: 'Sarabun', sans-serif;
  --modal-bg: rgba(255, 255, 255, 0.95);
  --dark-text: #333;
  --primary-color: #ffb300; /* ปรับสีให้สว่างขึ้นเล็กน้อย */

  /* --- ‼️ ส่วนควบคุมขนาดกระทง (ปรับค่าที่นี่) ‼️ --- */
  --krathong-size-desktop: 250px; /* ขนาดกระทงสำหรับจอแนวนอน (Desktop) */
  --krathong-size-mobile: 150px;  /* ‼️ แก้ไข: ลดขนาดกระทงสำหรับจอแนวตั้ง */
  /* -------------------------------------------------- */
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--body-font);
}

#app-container {
  width: 100%;
  height: 100%; /* <-- แก้ไข: ให้พื้นหลังเต็มความสูงของหน้าจอ */
  position: relative;
  /* ไม่จำเป็นต้องใช้ padding-top ที่นี่แล้ว */
}

/* ===== ส่วนที่เพิ่มเข้ามาสำหรับวิดีโอพื้นหลัง ===== */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* เปลี่ยนกลับ: ทำให้วิดีโอเต็มพื้นที่โดยการยืด (อาจเสียสัดส่วน) */
  /* object-position ไม่มีผลเมื่อใช้ fill */
  z-index: 0; /* จัดให้อยู่หลังสุด */
  pointer-events: none; /* ทำให้คลิกทะลุได้ */
}

/* เริ่มต้น: ซ่อนวิดีโอสำหรับมือถือไว้ก่อน */
#background-video-mobile {
  display: none;
}

/* Media Query สำหรับหน้าจอแนวตั้ง (เช่น โทรศัพท์, iPad แนวตั้ง) */
@media (orientation: portrait) {
  #background-video-desktop {
    display: none; /* ซ่อนวิดีโอแนวนอน */
  }
  #background-video-mobile {
    display: block; /* แสดงวิดีโอแนวตั้ง */
  }

  /* --- ปรับสัดส่วนปุ่มและตัวนับสำหรับจอแนวตั้ง --- */
  #create-krathong-btn {
    /* ‼️ แก้ไข: ปรับปรุงปุ่มสำหรับมือถือ ‼️ */
    font-size: 0.95em; /* ลดขนาดฟอนต์ลงเล็กน้อย */
    bottom: 20px; /* ลดระยะห่างจากขอบล่าง */
    /* ลบ width และ max-width ออก เพื่อให้ปุ่มปรับขนาดตามเนื้อหา */
  }

  #krathong-counter {
    /* ‼️ แก้ไข: ปรับปรุงตัวนับสำหรับมือถือ ‼️ */
    width: 85%;
    max-width: 350px;
    font-size: 0.9em;
    bottom: 80px; /* ย้ายตำแหน่งให้อยู่เหนือปุ่มสร้างกระทง */
    padding: 6px 10px; /* ลด padding แนวตั้ง */
    justify-content: space-between; /* จัดให้ปุ่ม "ดูทั้งหมด" อยู่ขวาสุดเสมอ */
  }

  /* --- ‼️ เพิ่มเติม: ปรับขนาดตัวอักษรบนกระทงสำหรับจอแนวตั้ง ‼️ --- */
  .krathong-name, .krathong-wish {
    font-size: 0.6em; /* ลดขนาดฟอนต์พื้นฐานลง */
  }
  .krathong-name { font-size: 0.7em; } /* ปรับขนาดชื่อให้ใหญ่กว่าคำอวยพรเล็กน้อย */

  /* --- ‼️ เพิ่มเติม: ปรับปรุง Modal สร้างกระทงสำหรับจอแนวตั้ง ‼️ --- */
  .krathong-image-wrapper {
    width: 220px; /* ลดขนาดรูปกระทงตัวอย่าง */
    height: 220px;
  }

  #krathong-dots-container {
    /* (กว้าง 50px * 4) + (gap 8px * 3) = 200 + 24 = 224px */
    max-width: 224px; /* ปรับความกว้างสูงสุดให้พอดีกับ 4 รูป */
  }

}

/* ===== ส่วนที่เพิ่มเข้ามาสำหรับดาวระยิบระยับ ===== */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

#twinkling-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%; /* ให้ดาวแสดงในพื้นที่ 60% บนของท้องฟ้า */
  pointer-events: none; /* ทำให้คลิกทะลุได้ */
  overflow: hidden; /* ป้องกันดาวล้นออกนอกพื้นที่ */
  z-index: 1; /* --- แก้ไข: กำหนด z-index ให้ดาวอยู่เหนือวิดีโอพื้นหลัง --- */
}

.star {
  position: absolute;
  background-color: #FFF;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255, 255, 224, 0.8); /* แสงฟุ้งๆ สีเหลืองนวล */
  animation: twinkle 4s infinite ease-in-out;
}

/* สร้างดาว 3 ชุด และกำหนดตำแหน่ง, ขนาด, และหน่วงเวลาที่ต่างกัน */
.star:nth-child(1) {
  width: 2px; height: 2px;
  top: 15%; left: 20%;
  animation-delay: 0s;
}
.star:nth-child(2) {
  width: 3px; height: 3px;
  top: 30%; left: 80%;
  animation-delay: 1.5s;
}
.star:nth-child(3) {
  width: 1px; height: 1px;
  top: 45%; left: 50%;
  animation-delay: 3s;
}

#river {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* ปรับความสูงเป็นครึ่งหน้าจอ */
  pointer-events: none;
  z-index: 5; /* --- แก้ไข: กำหนด z-index ให้แม่น้ำอยู่เหนือดาว --- */
} 

/* ===== ‼️ ส่วนควบคุมการแสดงผลกระทง (ขนาดและการเคลื่อนที่) ‼️ ===== */
.floating-krathong-wrapper { /* New wrapper for krathong image and text */
  position: absolute;
  bottom: -50px;
  width: var(--krathong-size-desktop); /* ใช้ตัวแปรสำหรับขนาดแนวนอน */
  height: auto;
  /* --- ‼️ แก้ไข: animation จะถูกกำหนดโดย JavaScript เพื่อสุ่มทิศทาง ‼️ --- */
  /* animation-name, duration, และ delay ถูกกำหนดโดย script.js */
  animation: floatAcross-desktop 80s linear infinite; 
  transform-origin: center bottom;
  opacity: 0; /* --- ‼️ แก้ไข: เริ่มต้นด้วยการซ่อนกระทง (ทำให้มองไม่เห็น) ‼️ --- */
  transition: opacity 0.5s ease; /* --- ‼️ เพิ่ม: ทำให้การปรากฏตัวนุ่มนวล --- */
  display: flex; /* Use flexbox for centering content */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 10px; /* Adjust if krathong image has padding */
  /* --- ‼️ แก้ไข: z-index จะถูกกำหนดโดย JS ตามเลน --- */
  /* z-index: 10; */ 
  /* --- ‼️ เพิ่มเติม: ทำให้คลิกทะลุพื้นที่ว่างรอบๆ รูปกระทงได้ --- */
  pointer-events: none;
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับ Grid Overlay (Admin) ‼️ --- */
#grid-overlay {
  display: none; /* ซ่อนไว้เป็นค่าเริ่มต้น */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* ความกว้างเต็ม */
  height: 50%; /* ครอบคลุมพื้นที่แม่น้ำ (ครึ่งล่างของจอ) */
  bottom: 0;   /* ยึดกับขอบล่าง */
  top: auto;   /* ล้างค่า top เดิม */
  pointer-events: none; /* ทำให้คลิกทะลุได้ */
  z-index: 1500; /* ให้อยู่เหนือทุกอย่างยกเว้น Modal */
  /* ‼️ แก้ไข: ลบ flexbox ออก เพื่อให้ควบคุมตำแหน่งเส้นจาก JS ได้โดยตรง */
}

.grid-lane-line {
  position: absolute; /* ‼️ แก้ไข: เปลี่ยนเป็น absolute เพื่อให้กำหนดตำแหน่ง bottom ได้ */
  width: 100%;
  border-top: 2px dashed rgba(255, 0, 0, 0.7); /* สร้างเส้นประแนวนอน */
  transition: bottom 0.2s ease-in-out; /* ‼️ เพิ่ม: ทำให้เส้นขยับอย่างนุ่มนวล */
}

.grid-cell-label {
  /* สไตล์เดิมยังใช้ได้ดี */
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับตัวหนังสือบอกแกนใน Grid ‼️ --- */
.grid-cell-label {
  position: absolute;
  top: 5px;
  left: 8px;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

/* --- ปรับขนาดและ animation สำหรับจอแนวตั้ง --- */
@media (orientation: portrait) {
  .floating-krathong-wrapper {
    width: var(--krathong-size-mobile); /* ใช้ตัวแปรสำหรับขนาดแนวตั้ง */
    /* animation-name ถูกกำหนดโดย JS แล้ว */
  }
}
/* =================================================================== */


/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับไฮไลท์กระทงของฉัน ‼️ --- */
.my-krathong-highlight {
  /* เพิ่มเงาฟุ้งๆ สีทองเพื่อทำให้โดดเด่น */
  filter: drop-shadow(0 0 15px #ffeb3b) drop-shadow(0 0 5px #ffffff);
  /* ทำให้สว่างขึ้นเล็กน้อย */
  opacity: 1 !important; 
  /* ทำให้ลอยอยู่ชั้นบนสุด */
  z-index: 20 !important;
}

.floating-krathong-wrapper img { /* Style for the actual krathong image inside the wrapper */
  width: 100%; /* ‼️ แก้ไข: ปรับขนาดรูปให้พอดีกับกรอบ เพื่อให้ตำแหน่งข้อความถูกต้อง */
  height: auto;
  /* เพิ่ม animation bobbing ที่ตัวรูปกระทงโดยตรง */
  /* --- ‼️ เพิ่มเติม: ทำให้สามารถคลิกที่รูปกระทงได้ (แต่ไม่คลิกพื้นที่ว่าง) --- */
  pointer-events: auto;
  animation: bobbing 7s ease-in-out infinite;
  display: block; /* Remove extra space below image */
}

.krathong-name, .krathong-wish {
  position: absolute;
  color: #fff;
  font-size: 0.8em; /* ปรับขนาดฟอนต์พื้นฐาน */
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  width: 150%; /* ขยายความกว้างเผื่อข้อความยาว */
  word-wrap: break-word;
  pointer-events: none;
  transform: translateX(-50%);
  left: 50%;
  line-height: 1.4;
}

.krathong-name {
  /* ‼️ ข้อเสนอแนะ: ย้ายตำแหน่งไปอยู่เหนือกระทง */
  bottom: 105%; /* ย้ายไปอยู่เหนือรูปกระทง (100%) และเว้นระยะเล็กน้อย (5%) */
  font-size: 0.9em;
  font-weight: 700;
  color: #ffeb3b; /* ทำให้ชื่อเด่นขึ้นด้วยสีทอง */
}

.krathong-wish {
  /* ‼️ ข้อเสนอแนะ: ย้ายตำแหน่งไปอยู่ใต้ชื่อ */
  bottom: 80%; /* จัดตำแหน่งให้อยู่ใต้ชื่อ */
  font-style: italic;
}



@keyframes floatAcross-desktop {
  0% {
    transform: translateX(calc(-1 * var(--krathong-size-desktop))) rotate(-5deg);
  }
  50% {
     transform: translateX(calc(50vw - var(--krathong-size-desktop) / 2)) rotate(5deg);
  }
  100% {
    transform: translateX(calc(100vw + var(--krathong-size-desktop))) rotate(-5deg);
  }
}

@keyframes floatAcrossReverse-desktop {
  0% {
    transform: translateX(calc(100vw + var(--krathong-size-desktop))) rotate(5deg);
  }
  50% {
     transform: translateX(calc(50vw - var(--krathong-size-desktop) / 2)) rotate(-5deg);
  }
  100% {
    transform: translateX(calc(-1 * var(--krathong-size-desktop))) rotate(5deg);
  }
}

/* --- ‼️ ส่วนเพิ่มเติม: Keyframes สำหรับกระทงบนจอแนวตั้ง ‼️ --- */
@keyframes floatAcross-portrait {
  0% {
    transform: translateX(calc(-1 * var(--krathong-size-mobile))) rotate(-5deg);
  }
  50% {
     transform: translateX(calc(50vw - var(--krathong-size-mobile) / 2)) rotate(5deg);
  }
  100% {
    transform: translateX(calc(100vw + var(--krathong-size-mobile))) rotate(-5deg);
  }
}

@keyframes floatAcrossReverse-portrait {
  0% {
    transform: translateX(calc(100vw + var(--krathong-size-mobile))) rotate(5deg);
  }
  50% {
     transform: translateX(calc(50vw - var(--krathong-size-mobile) / 2)) rotate(-5deg);
  }
  100% {
    transform: translateX(calc(-1 * var(--krathong-size-mobile))) rotate(5deg);
  }
}

/* Animation ใหม่สำหรับการโยกตัวบนคลื่น */
@keyframes bobbing {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg); /* ขยับขึ้นและหมุนเล็กน้อย */
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* --- ‼️ ส่วนเพิ่มเติม: Animation เรืองแสงสำหรับปุ่ม ‼️ --- */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 5px rgba(255, 193, 7, 0.4);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 18px rgba(255, 193, 7, 0.9);
  }
  100% {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 5px rgba(255, 193, 7, 0.4);
  }
}


#create-krathong-btn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  font-family: var(--heading-font);
  transform: translateX(-50%);
  padding: 12px 25px; /* ปรับ Padding ให้สมดุล */
  font-size: 1em; /* ปรับขนาดฟอนต์ให้ใหญ่ขึ้นเล็กน้อย */
  letter-spacing: 0.5px;
  /* --- ‼️ แก้ไข: เปลี่ยนเป็น Gradient และเพิ่มเส้นขอบ ‼️ --- */
  background: linear-gradient(180deg, #ffc107, #ff9800);
  color: white;
  border: 2px solid #FFA000;
  border-radius: 50px;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1000;
  animation: pulse-glow 3s infinite ease-in-out; /* ‼️ เพิ่ม Animation ‼️ */
  white-space: nowrap; /* ‼️ เพิ่ม: ป้องกันข้อความขึ้นบรรทัดใหม่ ‼️ */
}

#create-krathong-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Krathong Counter Styling */
#krathong-counter {
  position: fixed;
  bottom: 85px; /* ปรับตำแหน่งให้เหมาะสมกับปุ่มใหม่ */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.25); /* ‼️ ทำให้โปร่งใสขึ้นและใช้สีเข้มเล็กน้อยเพื่อให้อ่านง่าย ‼️ */
  color: white;
  padding: 8px 18px; /* ‼️ ลด Padding ลง ‼️ */
  border-radius: 25px; /* ‼️ ทำให้ขอบมนมากขึ้น ‼️ */
  border: 1px solid rgba(255, 255, 255, 0.15); /* ‼️ ทำให้เส้นขอบโปร่งใสขึ้น ‼️ */
  z-index: 999;
  text-align: center;
  backdrop-filter: blur(5px); /* ‼️ ลดความเบลอลงเล็กน้อย ‼️ */
  display: flex;
  flex-direction: row; /* ‼️ จัดเรียงเป็นแนวนอน ‼️ */
  align-items: center;
  justify-content: space-between; /* ‼️ จัดให้ข้อความและปุ่มอยู่คนละฝั่ง ‼️ */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  gap: 15px; /* ‼️ เพิ่มระยะห่างระหว่างข้อความและปุ่ม ‼️ */
}

.counter-text-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* ‼️ ระยะห่างระหว่างข้อความและตัวเลข ‼️ */
  white-space: nowrap; /* ป้องกันการตัดข้อความ */
}

#counter-text {
  font-size: 0.85em; /* ‼️ ปรับขนาดฟอนต์ ‼️ */
  opacity: 0.8;
}

#counter-number {
  font-size: 1.1em; /* ‼️ ลดขนาดฟอนต์ตัวเลขลง ‼️ */
  font-weight: 500;
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับปุ่ม "ดูทั้งหมด" ‼️ --- */
#view-all-btn {
  background-color: rgba(255, 255, 255, 0.15); /* ‼️ ปรับพื้นหลังปุ่ม ‼️ */
  border: 1px solid rgba(255, 255, 255, 0.25); /* ‼️ ปรับเส้นขอบปุ่ม ‼️ */
  color: white;
  padding: 5px 12px; /* ‼️ ลด Padding ปุ่ม ‼️ */
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--body-font);
  font-size: 0.85em; /* ‼️ ปรับขนาดฟอนต์ ‼️ */
  transition: all 0.2s ease;
  white-space: nowrap;
}

#view-all-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.5s;
}

.modal-content {
  background-color: var(--modal-bg);
  margin: 10% auto;
  padding: 30px;
  border-radius: 15px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.2);
  position: relative;
  text-align: center;
}

.modal-content h2 {
  font-family: var(--heading-font);
  font-size: 1.8em;
}

.preview-content {
  max-width: 400px;
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับ Modal รายชื่อ ‼️ --- */
.list-content {
  max-width: 800px; /* ขยายความกว้างสำหรับตาราง */
  margin: 5% auto; /* ปรับ margin ด้านบน */
}

#wish-list-container {
  max-height: 60vh; /* จำกัดความสูงและให้มี scrollbar */
  overflow-y: auto;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

#wish-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

#wish-list-table th, #wish-list-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

#wish-list-table th {
  background-color: #f7f7f7;
  font-weight: 500;
  font-family: var(--body-font);
  position: sticky; /* ทำให้หัวตารางลอยอยู่ด้านบนเมื่อ scroll */
  top: 0;
}

#wish-list-table td:nth-child(1), #wish-list-table th:nth-child(1) { width: 50px; text-align: center; } /* คอลัมน์ลำดับ */
#wish-list-table td:nth-child(2), #wish-list-table th:nth-child(2) { width: 80px; text-align: center; } /* คอลัมน์กระทง */
#wish-list-table td:nth-child(3), #wish-list-table th:nth-child(3) { width: 25%; } /* คอลัมน์ชื่อ */

#wish-list-table .list-krathong-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.close-btn {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* Form Elements */
/* --- รูปแบบใหม่สำหรับตัวเลือกกระทง --- */
#krathong-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  position: relative;
}

.krathong-image-wrapper {
  width: 300px; /* <-- ขยายขนาดภาพกระทงหลัก */
  height: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#selected-krathong-preview {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.selector-arrow {
  background-color: transparent;
  border: none;
  font-size: 2.5em;
  color: #aaa;
  cursor: pointer;
  padding: 0 15px;
  transition: color 0.2s ease;
}

.selector-arrow:hover {
  color: var(--dark-text);
}

#krathong-dots-container {
  display: flex;
  justify-content: flex-start; /* <-- ปรับเป็น flex-start */
  gap: 8px;
  margin-bottom: 20px;
  /* --- เพิ่มเติม: จัดการให้ขึ้นแถวใหม่ --- */
  flex-wrap: wrap;
  max-width: 282px; /* (ความกว้างรูป 50px * 5) + (gap 8px * 4) = 250 + 32 = 282px */
  margin-left: auto;
  margin-right: auto;
}

/* --- เปลี่ยนจาก .dot เป็น .krathong-thumbnail --- */
.krathong-thumbnail {
  box-sizing: border-box; /* <-- เพิ่ม: ให้ความกว้าง 50px รวม border ไปด้วย */
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.krathong-thumbnail:hover,
.krathong-thumbnail.active {
  opacity: 1;
  border-color: var(--primary-color);
  transform: scale(1.1);
}

input[type="text"], textarea {
  width: 95%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: var(--body-font);
  font-size: 1em;
}

textarea {
  resize: vertical;
  height: 80px;
}

/* --- ช่องเลือกศูนย์การศึกษา (เพิ่มตอนย้ายมา Cloudflare 2026-11-11) --- */
#user-center {
  width: 95%;
  padding: 12px;
  margin: 10px 0 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: var(--body-font);
  font-size: 1em;
  background: #fff;
  color: var(--dark-text);
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับตัวนับตัวอักษร ‼️ --- */
.char-counter-wrapper {
  text-align: right;
  font-size: 0.85em;
  color: #666;
  margin-top: -5px; /* ดึงขึ้นไปใกล้กับ textarea */
  margin-bottom: 15px;
  padding-right: 5px;
}

#submit-krathong-btn, #float-krathong-btn {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin-top: 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  font-size: 1.1em;
  font-family: var(--heading-font);
}

/* Preview Area */
#preview-area {
  padding: 20px;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}
#preview-krathong-img {
  max-width: 150px;
}
#preview-wish-text {
  font-size: 1.1em;
  margin: 15px 0;
}
#preview-name-text {
  font-weight: 500;
  font-family: var(--heading-font);
}
.capture-note {
  font-size: 0.9em;
  color: #555;
  margin-top: 15px;
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับคำอวยพรจากโรงเรียน ‼️ --- */
.school-blessing {
  margin: 20px 0;
  padding: 15px;
  background-color: rgba(255, 215, 0, 0.1); /* สีทองอ่อนๆ โปร่งแสง */
  border-left: 4px solid var(--primary-color);
  border-radius: 0 8px 8px 0;
  text-align: left;
}
.school-blessing p {
  margin: 0;
  font-size: 0.95em;
  color: #444;
  line-height: 1.6;
}
.school-blessing .school-name {
  margin-top: 10px;
  text-align: center;
  font-weight: 500;
  font-style: italic;
}

/* Toast Notification */
#toast-notification {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 3000;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 17px;
}

#toast-notification.show {
  visibility: visible;
  animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
}

/* Fireworks Canvas Styling */
#fireworks-canvas {
  position: fixed; /* ใช้ fixed เพื่อให้ครอบคลุม viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 25%; /* ครอบคลุม 25% ด้านบนของหน้าจอ */
  z-index: 100; /* ให้แสดงผลอยู่เหนือกระทง (z-index: 10) แต่ต่ำกว่า Modal (z-index: 2000) */
  pointer-events: none; /* ทำให้คลิกทะลุ canvas ไปยังองค์ประกอบด้านล่างได้ */
}

@keyframes fadeIn { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes fadeOut { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

@media (max-width: 600px) {
  .modal-content {
    width: 90%;
    margin: 10% auto; /* ปรับ margin ให้สอดคล้องกัน */
    padding: 20px;
  }
  #music-control-btn {
    top: 15px;
    right: 15px;
  }
  /* ‼️ ลบ: ไม่ย้ายปุ่มตามหากระทงในหน้าจอมือถือแล้ว ‼️ */
}

/* --- ‼️ เพิ่มเติม: ปรับปรุงสำหรับหน้าจอที่แคบมากๆ (น้อยกว่า 360px) ‼️ --- */
@media (max-width: 360px) {
  #krathong-counter {
    font-size: 0.8em; /* ลดขนาดฟอนต์ของตัวนับลงอีก */
  }
  #view-all-btn {
    font-size: 0.8em; /* ลดขนาดฟอนต์ของปุ่มดูทั้งหมด */
  }
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับปุ่มพิเศษ (ตามหากระทง) ‼️ --- */
.extra-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* --- ‼️ แก้ไข: ทำให้ปุ่มเล็กลงและเป็นวงกลม ‼️ --- */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-family: var(--body-font);
  font-size: 1.1em; /* ปรับขนาดไอคอนให้พอดี */
  cursor: pointer;
  backdrop-filter: blur(5px);
  z-index: 1001; /* อยู่เหนือปุ่มสร้างกระทง แต่ใต้ modal */
  transition: all 0.3s ease;
}
.extra-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* --- ‼️ ส่วนเพิ่มเติม: สไตล์สำหรับแผงควบคุมของ Admin ‼️ --- */
#admin-controls-panel {
  position: fixed;
  bottom: 15px;
  left: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  z-index: 1002;
  font-family: var(--body-font);
  width: 300px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- ‼️‼️ ส่วนเพิ่มเติม: สไตล์สำหรับคิวรอปล่อยกระทง ‼️‼️ --- */
@keyframes queue-item-fade {
  0% { opacity: 0; transform: translateX(-20px); }
  15% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(20px); }
}

#krathong-queue-container {
  position: fixed;
  top: 70px; /* ให้อยู่ใต้ปุ่มค้นหา */
  left: 15px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* ทำให้คลิกทะลุได้ */
}

.queue-item {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  white-space: nowrap;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  animation: queue-item-fade 4s ease-in-out forwards; /* แสดงผล 4 วินาทีแล้วหายไป */
}

.admin-control-group {
  margin-bottom: 12px;
}

.admin-control-group h4 {
  margin: 0 0 10px 0;
  font-size: 0.9em;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 5px;
}

.admin-slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.admin-slider-container label {
  font-size: 0.8em;
  width: 40px; /* กำหนดความกว้างให้ label เท่ากัน */
  flex-shrink: 0;
}

.admin-slider-container input[type="range"] {
  flex-grow: 1;
}

.admin-slider-container span {
  font-size: 0.8em;
  font-weight: bold;
  width: 35px; /* กำหนดความกว้างให้ตัวเลขเท่ากัน */
}