#dateButtons {
  display: flex;
  flex-wrap: wrap;
  /* ให้ปุ่มขึ้นบรรทัดใหม่อัตโนมัติ */
  justify-content: center;
  /* จัดกึ่งกลางแนวนอน */
  gap: 10px;
  /* ระยะห่างระหว่างปุ่ม */
}

#dateButtons button,
#subButtons button {
  background: #4caf50;
  /* สีพื้นหลังปุ่ม */
  color: #fff;
  /* สีตัวอักษร */
  border: none;
  /* เอาขอบออก */
  padding: 10px 20px;
  /* ระยะห่างในปุ่ม */
  border-radius: 8px;
  /* มุมโค้งมน */
  font-size: 16px;
  /* ขนาดตัวอักษร */
  cursor: pointer;
  /* เปลี่ยนเมาส์เป็นมือ */
  transition: background 0.3s, transform 0.2s;
  /* ทำให้ hover นุ่ม */
  margin: 5px;
}

/* ตอนเอาเมาส์ชี้ */
#dateButtons button:hover,
#subButtons button:hover {
  background: #45a049;
  transform: translateY(-2px);
  /* ยกปุ่มขึ้นนิดหน่อย */
}

/* ตอนกด */
#dateButtons button:active,
#subButtons button:active {
  background: #3e8e41;
  transform: translateY(0);
}

#dateButtons button.active,
#subButtons button.active {
  background: #2196f3;
  /* สีฟ้า */
  color: #fff;
}

:root {
  --accent-yellow: #ffd54a;
}

/* จัดกลางแนวนอนใต้หัวข้อเดิม */
.idx-center-row {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
}

/* กล่องหลัก (ไม่มีขอบ/เงา) */
.idx-wrap {
  max-width: 560px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.idx-title {
  margin: 0 0 12px;
  font: 700 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #fff;
}

.idx-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* ช่องกรอกเลข: ตัวเลขอยู่กึ่งกลาง, ไม่มีขอบ */
.idx-input {
  width: 70%;
  min-width: 240px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  background: #f3f4f6;
  outline: none;
  text-align: center;
  /* ✅ จัดตัวเลขให้อยู่ตรงกลาง */
}

.idx-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.35);
}

/* ปุ่มค้นหาอยู่ใต้ช่องกรอก */
.idx-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ข้อความช่วย / ข้อความแจ้งเตือน: สีเหลืองทั้งหมด */
.idx-help {
  font-size: 12px;
  color: var(--accent-yellow);
  margin: 6px 0 8px;
}

.idx-msg {
  font-size: 14px;
  color: var(--accent-yellow);
  min-height: 18px;
  margin-bottom: 8px;
}

/* โซนผลลัพธ์ */
.idx-result {
  margin-top: 10px;
}

/* ข้อความ IDX + ข้อความเพิ่มเติม: อยู่ "เหนือรูป", สีเหลือง และใหญ่ขึ้นนิดนึง */
.idx-text {
  color: var(--accent-yellow);
  font-size: 18px;
  /* ✅ ใหญ่ขึ้นเล็กน้อย */
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 8px;
  /* ระยะห่างจากรูป */
}

.idx-text b {
  font-weight: 800;
}

/* รูปไม่เกิน 400px (ด้านกว้าง) และอยู่กึ่งกลาง */
.idx-img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  /* ✅ จำกัดยาวไม่เกิน 400px */
  height: auto;
  border: none;
  /* ไม่มีขอบ */
  border-radius: 12px;
  object-fit: contain;
}

/* จอเล็ก */
@media (max-width: 420px) {
  .idx-input {
    width: 100%;
    min-width: 0;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: "Sarabun", sans-serif;
  background-color: #1a1036;
  color: #f0eaff;
}

.wrapper {
  width: 100%;
  overflow-x: hidden;
}

.section1 {
  /* ดึง BG ลายตารางม่วง/ชมพูที่คุณมีอยู่แล้วมาผสม */
  background: linear-gradient(rgba(26, 16, 54, 0.8), rgba(26, 16, 54, 0.8)),
    url("https://www.transparenttextures.com/patterns/brick-wall.png");
  background-attachment: fixed;
}

.content1 {
  padding: 20px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* หัวข้อหลัก */
.main-title {
  color: #ffcc00;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(255, 204, 0, 0.6), 2px 2px 2px #000;
  padding-top: 20px;
}

.main-subtitle {
  color: #ff69b4;
  /* สีชมพูสว่าง */
  font-weight: bold;
  font-size: 20px;
  text-shadow: 1px 1px 2px #000;
}

/* การ์ดสไตล์ Glassmorphism - ปรับให้กว้างขึ้น */
.event-card {
  max-width: 500px;
  /* เพิ่มจาก 500px เป็น 650px (หรือกว้างกว่านี้ตามชอบ) */
  width: 95%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 15px;
  /* เพิ่มพื้นที่หายใจด้านข้างอีกนิด */
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.event-name {
  color: #ffd86b;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
  text-shadow: 1px 1px 3px #000;
}

/* ปุ่มลงทะเบียนแบบขยับได้ */
.btn-regis {
  display: inline-block;
  background: linear-gradient(135deg, #ff5fa2, #8e2de2);
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  margin: 15px 0;
  box-shadow: 0 5px 15px rgba(255, 95, 162, 0.4);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 95, 162, 0.7);
  }

  100% {
    transform: scale(1);
  }
}

.details {
  font-size: 15px;
  color: #ffe6af;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #ff5fa2;
  text-align: left;
}

/* ตารางรางวัล */
.reward-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
}

.reward-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

.reward-row.head {
  background: rgba(121, 247, 255, 0.15);
  color: #79f7ff;
  font-weight: bold;
}

.reward-row .val {
  color: #4dfa9f;
  font-weight: bold;
}

/* แถบตารางแบบขยับได้ */
.hide-content {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-top: 12px;
  border: 1px solid rgba(255, 95, 162, 0.3);
  overflow: hidden;
  animation: card-pulse 3s infinite ease-in-out;

  /* เพิ่ม 2 บรรทัดนี้ */
  width: 100%;
  box-sizing: border-box;
}

@keyframes card-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 95, 162, 0.2);
    border-color: rgba(255, 95, 162, 0.6);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
}

.hide-content summary {
  padding: 15px;
  color: #ffd86b;
  cursor: pointer;
  font-weight: bold;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  /* เพิ่มบรรทัดนี้เพื่อปรับขนาดฟอนต์ */
  font-size: 16px;
  /* ปรับตัวเลขได้ตามความเหมาะสม (เช่น 16px หรือ 18px) */
}

/* เพิ่มไอคอนนิ้วจิ้ม หรือลูกศรขยับเข้าออก (เรียกแขก) */
.hide-content summary::after {
  content: "คลิก!";
  font-size: 10px;
  background: rgba(255, 95, 162, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  animation: click-me 1s infinite;
}

@keyframes click-me {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  50% {
    opacity: 0.5;
    transform: translateX(-5px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* เมื่อกดเปิดแล้ว ให้หยุดขยับเพื่อให้คนอ่านง่าย */
.hide-content[open] {
  animation: none;
  border-color: #4dfa9f;
  /* เปลี่ยนเป็นสีเขียวเมื่อเปิดดูแล้ว */
  background: rgba(0, 0, 0, 0.6);
}

.hide-content[open] summary {
  color: #4dfa9f;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

/* แก้ไขให้มีผลเฉพาะกล่องที่ถูกเปิดจริงๆ (ใส่เครื่องหมาย > เพิ่ม) */
.hide-content[open] > summary::after {
  content: "✕";
  background: #444;
  animation: none;
}

/* เพิ่มการระบุสีตัวอักษรเฉพาะกล่องที่เปิดด้วย เพื่อไม่ให้ตัวหนังสือข้างในสีเพี้ยน */
.hide-content[open] > summary {
  color: #4dfa9f;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

/* เนื้อหาข้างใน */
.hide-details {
  padding: 15px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.2);
  line-height: 1.6;
}

/* โครงสร้างตารางทีมแบบ 4 ช่อง */
/* 1. ตัวแม่: ตั้งค่า Grid และเอาพื้นหลังออกเพื่อให้เห็นเส้นจากตัวลูก */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่ง 2 คอลัมน์ */
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  /* เส้นขอบซ้ายสุด */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* เส้นขอบล่างสุด */
  margin-bottom: 15px;
  /* เพิ่มระยะห่างก่อนเริ่มทีมถัดไป */
}

/* 2. ตัวลูก: ช่องรายชื่อ */
.team-member {
  /* สีน้ำเงินเข้มโปร่งแสง */
  background: rgba(20, 30, 48, 0.7);
  padding: 12px 5px;
  line-height: 1.4;
  text-align: center;
  font-size: 13px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

/* สลับสีช่อง (Zebra Style) ให้ดูมีมิติ */
.team-member:nth-child(2),
.team-member:nth-child(3) {
  /* สีน้ำเงินที่สว่างขึ้นมาอีกนิด */
  background: rgba(36, 59, 85, 0.7);
}

/* แถม: ทำให้ IDX ดูจางลงนิดนึงเพื่อให้ชื่อคนแข่งเด่นขึ้น */
.team-member br + text,
.team-member small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* หัวทีมและเวลาแข่ง */
.team-header {
  /* เปลี่ยนจากชมพู-ม่วง เป็น ฟ้า-น้ำเงิน */
  background: linear-gradient(90deg, #2193b0, #6dd5ed);
  color: #fff;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  margin-top: 10px;
}

.team-time {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  color: #ffffff;
}

.live-tag {
  background: #ff0000;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

/* กรอบพิเศษแบบรอยปะ เรืองแสงขยับได้ (เปลี่ยนเป็นสีเหลืองทองและจัดกึ่งกลาง) */
.special-promo-box {
  background: rgba(255, 204, 0, 0.05);
  /* พื้นหลังเหลืองทองจางๆ */
  border-radius: 12px;
  margin-top: 10px;
  padding: 5px;
  /* เส้นขอบรอยปะสีเหลืองทอง */
  border: 2px dashed rgba(255, 204, 0, 0.6);
  overflow: hidden;

  /* จัดวางข้อความตรงกลาง */
  text-align: center;

  font-size: 14px;
  color: #fff;
  /* เปลี่ยนเป็นสีขาวเพื่อให้ตัดกับพื้นหลัง */
  line-height: 1.6;

  /* ใส่ Animation ให้เรืองแสงและขยับเบาๆ (สีเหลืองทอง) */
  animation: promo-pulse 3s infinite ease-in-out;
}

/* แถม: ทำให้คำว่า "พิเศษ" เด่นขึ้น (สีเหลืองทองเข้ม) */
.special-promo-box strong {
  color: #ffcc00;
  /* สีเหลืองทองเข้ม */
  font-size: 15px;
  display: block;
  margin-bottom: 5px;
}

/* Definition ของ Animation (ปรับเป็นโทนสีเหลืองทอง) */
@keyframes promo-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.6);
  }

  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.9);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.6);
  }
}

/* สไตล์สำหรับคำว่า คลิก! หลังลิงก์ LINE */
.click-hint {
  font-size: 10px;
  background: #ff5fa2;
  /* สีชมพูเดียวกับปุ่ม */
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  font-weight: bold;
  /* ใช้ Animation click-me ที่คุณเขียนไว้ด้านบนได้เลย */
  animation: click-me 1s infinite;
}

.note {
  background: rgba(15, 5, 35, 0.9);
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  color: #ffe6af;
  border-top: 4px solid #ff5fa2;
  width: 100%;
  box-sizing: border-box;
}

.note b {
  color: #ffd86b;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

.note strong {
  color: #ff79b0;
}

.foot {
  background: #0a041a;
  color: #4a455a;
  padding: 20px;
  font-size: 11px;
  text-align: center;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Sarabun", sans-serif;
  background-color: #1a1036;
  color: #f0eaff;
}

.wrapper {
  width: 100%;
  overflow-x: hidden;
}

.section1 {
  /* ดึง BG ลายตารางม่วง/ชมพูที่คุณมีอยู่แล้วมาผสม */
  background: linear-gradient(rgba(26, 16, 54, 0.8), rgba(26, 16, 54, 0.8)),
    url("https://www.transparenttextures.com/patterns/brick-wall.png");
  background-attachment: fixed;
}

.content1 {
  padding: 20px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* หัวข้อหลัก */
.main-title {
  color: #ffcc00;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(255, 204, 0, 0.6), 2px 2px 2px #000;
  padding-top: 20px;
}

.main-subtitle {
  color: #ff69b4;
  /* สีชมพูสว่าง */
  font-weight: bold;
  font-size: 20px;
  text-shadow: 1px 1px 2px #000;
}

/* การ์ดสไตล์ Glassmorphism - ปรับให้กว้างขึ้น */
.event-card {
  max-width: 550px;
  /* เพิ่มจาก 500px เป็น 650px (หรือกว้างกว่านี้ตามชอบ) */
  width: 99%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 15px;
  /* เพิ่มพื้นที่หายใจด้านข้างอีกนิด */
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.event-name {
  color: #ffd86b;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
  text-shadow: 1px 1px 3px #000;
}

/* ปุ่มลงทะเบียนแบบขยับได้ */
.btn-regis {
  display: inline-block;
  background: linear-gradient(135deg, #ff5fa2, #e6a100);
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  margin: 15px 0;
  box-shadow: 0 5px 15px rgba(255, 95, 162, 0.4);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 95, 162, 0.7);
  }

  100% {
    transform: scale(1);
  }
}

.details {
  font-size: 15px;
  color: #ffe6af;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #ff5fa2;
  text-align: left;
}

/* ตารางรางวัล */
.reward-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
}

.reward-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

.reward-row.head {
  background: rgba(121, 247, 255, 0.15);
  color: #79f7ff;
  font-weight: bold;
}

.reward-row .val {
  color: #4dfa9f;
  font-weight: bold;
}

/* แถบตารางแบบขยับได้ */
.hide-content {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-top: 12px;
  border: 1px solid rgba(255, 95, 162, 0.3);
  overflow: hidden;
  animation: card-pulse 3s infinite ease-in-out;

  /* เพิ่ม 2 บรรทัดนี้ */
  width: 100%;
  box-sizing: border-box;
}

@keyframes card-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 95, 162, 0.2);
    border-color: rgba(255, 95, 162, 0.6);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
}

.hide-content summary {
  padding: 15px;
  color: #ffd86b;
  cursor: pointer;
  font-weight: bold;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  /* เพิ่มบรรทัดนี้เพื่อปรับขนาดฟอนต์ */
  font-size: 16px;
  /* ปรับตัวเลขได้ตามความเหมาะสม (เช่น 16px หรือ 18px) */
}

/* เพิ่มไอคอนนิ้วจิ้ม หรือลูกศรขยับเข้าออก (เรียกแขก) */
.hide-content summary::after {
  content: "คลิก!";
  font-size: 10px;
  background: rgba(255, 95, 162, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  animation: click-me 1s infinite;
}

@keyframes click-me {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  50% {
    opacity: 0.5;
    transform: translateX(-5px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* เมื่อกดเปิดแล้ว ให้หยุดขยับเพื่อให้คนอ่านง่าย */
.hide-content[open] {
  animation: none;
  border-color: #4dfa9f;
  /* เปลี่ยนเป็นสีเขียวเมื่อเปิดดูแล้ว */
  background: rgba(0, 0, 0, 0.6);
}

.hide-content[open] summary {
  color: #4dfa9f;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

/* แก้ไขให้มีผลเฉพาะกล่องที่ถูกเปิดจริงๆ (ใส่เครื่องหมาย > เพิ่ม) */
.hide-content[open] > summary::after {
  content: "✕";
  background: #444;
  animation: none;
}

/* เพิ่มการระบุสีตัวอักษรเฉพาะกล่องที่เปิดด้วย เพื่อไม่ให้ตัวหนังสือข้างในสีเพี้ยน */
.hide-content[open] > summary {
  color: #4dfa9f;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

/* เนื้อหาข้างใน */
.hide-details {
  padding: 15px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.2);
  line-height: 1.6;
}

/* โครงสร้างตารางทีมแบบ 4 ช่อง */
/* 1. ตัวแม่: ตั้งค่า Grid และเอาพื้นหลังออกเพื่อให้เห็นเส้นจากตัวลูก */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่ง 2 คอลัมน์ */
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  /* เส้นขอบซ้ายสุด */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* เส้นขอบล่างสุด */
  margin-bottom: 15px;
  /* เพิ่มระยะห่างก่อนเริ่มทีมถัดไป */
}

/* 2. ตัวลูก: ช่องรายชื่อ */
.team-member {
  /* สีน้ำเงินเข้มโปร่งแสง */
  background: rgba(20, 30, 48, 0.7);
  padding: 12px 5px;
  line-height: 1.4;
  text-align: center;
  font-size: 13px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

/* สลับสีช่อง (Zebra Style) ให้ดูมีมิติ */
.team-member:nth-child(2),
.team-member:nth-child(3) {
  /* สีน้ำเงินที่สว่างขึ้นมาอีกนิด */
  background: rgba(36, 59, 85, 0.7);
}

/* แถม: ทำให้ IDX ดูจางลงนิดนึงเพื่อให้ชื่อคนแข่งเด่นขึ้น */
.team-member br + text,
.team-member small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* หัวทีมและเวลาแข่ง */
.team-header {
  /* เปลี่ยนจากชมพู-ม่วง เป็น ฟ้า-น้ำเงิน */
  background: linear-gradient(90deg, #2193b0, #6dd5ed);
  color: #fff;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  margin-top: 10px;
}

.team-time {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  color: #ffffff;
}

.live-tag {
  background: #ff0000;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

/* กรอบพิเศษแบบรอยปะ เรืองแสงขยับได้ (เปลี่ยนเป็นสีเหลืองทองและจัดกึ่งกลาง) */
.special-promo-box {
  background: rgba(255, 204, 0, 0.05);
  /* พื้นหลังเหลืองทองจางๆ */
  border-radius: 12px;
  margin-top: 15px;
  padding: 15px;
  text-align: center;
  font-size: 14px;

  /* เส้นขอบรอยปะสีเหลืองทอง */
  border: 2px dashed rgba(255, 204, 0, 0.6);
  overflow: hidden;
  color: #fff;
  /* เปลี่ยนเป็นสีขาวเพื่อให้ตัดกับพื้นหลัง */

  /* ใส่ Animation ให้เรืองแสงและขยับเบาๆ (สีเหลืองทอง) */
  animation: promo-pulse 3s infinite ease-in-out;
}

/* แถม: ทำให้คำว่า "พิเศษ" เด่นขึ้น (สีเหลืองทองเข้ม) */
.special-promo-box strong {
  color: #ffcc00;
  /* สีเหลืองทองเข้ม */
  font-size: 14px;
  margin-bottom: 5px;
}

/* Definition ของ Animation (ปรับเป็นโทนสีเหลืองทอง) */
@keyframes promo-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.6);
  }

  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.9);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.6);
  }
}

/* สไตล์สำหรับคำว่า คลิก! หลังลิงก์ LINE */
.click-hint {
  font-size: 10px;
  background: #ff5fa2;
  /* สีชมพูเดียวกับปุ่ม */
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  font-weight: bold;
  /* ใช้ Animation click-me ที่คุณเขียนไว้ด้านบนได้เลย */
  animation: click-me 1s infinite;
}

.app-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 13px;
  text-align: center;
  margin-top: 5px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.app-live-item {
  padding: 8px 5px;
}

.note {
  background: rgba(15, 5, 35, 0.9);
  padding: 30px 20px;
  text-align: left;
  font-size: 14px;
  color: #ffe6af;
  border-top: 4px solid #ff5fa2;
  width: 100%;
  box-sizing: border-box;
}

.note b {
  color: #ffd86b;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

.note strong {
  color: #ff79b0;
}

.foot {
  background: #0a041a;
  color: #4a455a;
  padding: 20px;
  font-size: 11px;
  text-align: center;
}