/* ตั้งค่าพื้นฐาน */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}
/* ซ่อนหน้าจอที่ไม่ได้ใช้งาน */
.hidden {
  display: none;
}

#news-image {
  display: block;
  width: 512px;
  height: 512px;
  margin: 0 auto;
}


/* สำหรับ Launcher 2 */
#launcher2-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/bg1.jpg'); /* ตั้งค่าภาพพื้นหลังเริ่มต้น */
  background-size: cover;
  background-position: center;
  z-index: -1; /* แสดงบนส่วนอื่นเมื่อเปิดใช้งาน */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  transition: background-image 1s ease; /* การเปลี่ยนแปลงพื้นหลังแบบลื่นไหล */
}

.hidden {
  display: none;
}

#toggle-animation-button {
  position: absolute;
  bottom: 20px;
  right: 310px;
  padding: 20px 20px;
  font-size: 26px;
  cursor: pointer;
  z-index: 10;
  color: #ffffff; /* ตัวอักษรสีขาว */
  border: 1px solid rgba(255, 255, 255, 0.5); /* ขอบสีขาวโปร่งใส */
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีขาวโปร่งใส 10% */
  border-radius: 50px; /* ความโค้งมนเล็กน้อย */
}


/* ปุ่มควบคุม */
#control-buttons {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
}

#control-buttons button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
}



#launcher3-container {
  position: absolute;
  top: 85%; /* ปรับตำแหน่งแนวตั้ง */
  left: 210%; /* เลื่อนไปทางขวา 50% */
  height: 0%;
  transform: translate(-50%, -50%); /* จัดให้อยู่กึ่งกลาง */
  width: 0;
  width: 0%;
  max-width: 0; /* กำหนดความกว้างสูงสุด */
  padding: 0;
  font-size: 0; /* ขนาดตัวอักษรใหญ่ขึ้น */
  border-radius: 0; /* ความโค้งมนเล็กน้อย */
  border: 1px solid rgba(0, 0, 0, 0.0); /* ขอบสีขาวโปร่งใส */
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.0); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}
.hidden {
  display: none;
}

.input-group input {
  width: calc(100% - 24px); /* ลดขนาดจาก padding */
  padding: 12px;
}

#error-message {
  text-align: center;
  font-weight: bold;
  animation: fadeIn 0.3s ease-in-out;
}



/* ปุ่มปิดโปรแกรม */
#close-button-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

#close-button {
  background: #ff4d4d;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีขาวโปร่งใส 10% */
  border-radius: 15px; /* ความโค้งมนเล็กน้อย */
}

#close-button:hover {
  background: #ff1a1a;
}

.container {
  background-color: #1C1C1C;
  padding: 233px 35px;
  border-radius: 0px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
  width: 350px;
  height: 300px;
  margin-right: 880px;
  position: relative;
}
/* ซ่อนหน้าจอที่ไม่ได้ใช้งาน */
.hidden {
  display: none;
}

.container1 {
  padding: 233px 35px;
  border-radius: 0px;
  text-align: center;
  width: 350px;
  height: 300px;
  margin-right: 880px;
  position: relative;
}

.hidden1 {
  display: none;
}

h1 {
  position: absolute;
  bottom: 437px; /* ระยะห่างจากด้านล่าง */
  right: -535px; /* ระยะห่างจากด้านขวา */
  font-size: 12px;
  color: #fff; /* ปรับสีของข้อความ */
}

/* กล่อง Login และ Start Game ใช้ตำแหน่งเดียวกัน */
.input-group {
  margin-bottom: 20px; /* เพิ่มระยะห่างระหว่างช่องกรอกข้อมูล */
  text-align: left;
}

.input-group label {
  display: block; /* ทำให้ label เป็นบล็อก */
  margin-bottom: 5px; /* ระยะห่างระหว่าง label และ input */
  font-size: 10px; /* ขนาดตัวอักษร */
  color: #fff; /* สีข้อความ */
}

.input-group input {
  width: 100%; /* ให้ช่องกรอกข้อมูลขยายเต็มความกว้าง */
  padding: 12px; /* เพิ่มระยะห่างภายใน */
  font-size: 16px; /* ขนาดตัวอักษร */
  background-color: #333; /* พื้นหลังของ input */
  color: white; /* สีข้อความ */
  border: 2px solid #444; /* กรอบของ input */
  border-radius: 6px; /* ทำมุมโค้งให้กรอบ */
  box-sizing: border-box; /* ให้ช่องกรอกข้อมูลขยายเต็มขนาดที่กำหนด */
}

.input-group input:focus {
  border-color: #ff0000; /* เปลี่ยนสีกรอบเมื่อ focus */
  outline: none; /* ไม่ให้มีเส้นรอบที่ขอบ */
}

/* ปรับช่องกรอก Username */
#username {
  background-color: #1C1C1C; /* พื้นหลังสีดำ */
  color: white; /* ตัวอักษรเป็นสีขาว */
  border: 1px solid #444; /* ขอบสีเทา */
  padding: 10px; /* ช่องว่างภายใน */
  border-radius: 6px; /* มุมมน */
}

/* ปรับช่องกรอกรหัส Password */
#password {
  background-color: #1C1C1C; /* พื้นหลังสีดำ */
  color: white; /* ตัวอักษรเป็นสีขาว */
  border: 1px solid #444; /* ขอบสีเทา */
  padding: 10px; /* ช่องว่างภายใน */
  border-radius: 6px; /* มุมมน */
}

/* เพิ่มความสวยงามเมื่อ input focus */
#username:focus, #password:focus {
  border: 2px solid #ff0000; /* เปลี่ยนขอบเมื่อมีการเลือก */
  outline: none; /* ลบขอบนอก */
}


/* ปุ่มในฟอร์ม Login */
button[type="submit"] {
  width: 100%;
  padding: 20px 15px;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background: #ff4d4d;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 15px; /* ระยะห่างจากด้านบน */
  position: relative; /* ใช้ position เพื่อปรับตำแหน่ง */
  top: 0;
  left: 0;
}

button[type="submit"]:hover {
  background: #FF3030;
}

#status-message {
  position: absolute;
  bottom: 60px; /* อยู่สูงกว่า progress bar (30px) */
  left: 200%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 20px;
  color: white;
  text-align: center;
  z-index: 110;
  white-space: nowrap; /* ป้องกันข้อความขึ้นบรรทัดใหม่ */
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ปุ่มในหน้าจอ Start Game */
#start-game-button {
  width: 100%;
  padding: 25px 15px;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background: #ff4d4d;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 15px; /* ระยะห่างจากส่วนอื่น */
  position: relative; /* ใช้ position เพื่อปรับตำแหน่ง */
  top: 400px; /* ปรับตำแหน่งแนวตั้ง */
  left: 880px; /* ปรับตำแหน่งแนวนอน */
}

#start-game-button:hover {
  background: #FF3030;
}

#channel-dropdown {
  position: absolute;
  top: 42%; /* ปรับตำแหน่งแนวตั้ง */
  left: 262%; /* เลื่อนไปทางขวา 50% */
  transform: translate(-50%, -50%); /* จัดให้อยู่กึ่งกลาง */
  width: 380px;
  width: 138%;
  max-width: 420px; /* กำหนดความกว้างสูงสุด */
  padding: 10px;
  font-size: 10px; /* ขนาดตัวอักษรใหญ่ขึ้น */
  border-radius: 30px; /* ความโค้งมนเล็กน้อย */
  border: 1px solid rgba(255, 255, 255, 0.3); /* ขอบสีขาวโปร่งใส */
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.1); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  cursor: pointer;
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

#channel-dropdown:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.6); /* ขอบสีขาวโปร่งใสเมื่อ focus */
}

#channel-dropdown option {
  background: rgba(0, 0, 0, 0.8); /* พื้นหลังตัวเลือก dropdown สีดำโปร่งใส */
  color: #ffffff; /* ตัวอักษรในตัวเลือกสีขาว */
}




/* Error Message */
#error-message {
  color: #ff4d4d;
  margin-top: 10px;
  font-size: 14px;
}

/* Progress Bar Container */
#progress-bar {
  width: 100%;
  max-width: 750px; /* กำหนดความกว้าง */
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  position: absolute; /* ใช้ Absolute เพื่อให้ปรับตำแหน่งได้อิสระ */
  bottom: 30px; /* ติดขอบล่าง */
  left: 40%; /* กำหนดตำแหน่งแนวนอนให้ตรงกลาง */
  transform: translateX(-50%); /* เลื่อน Progress Bar ให้ตรงกลาง */
  overflow: hidden;
  margin-top: 20px; /* ระยะห่างจากส่วนอื่น */
  display: none; /* ซ่อน Progress Bar โดยเริ่มต้น */
  z-index: 100; /* จัดให้อยู่ข้างหน้าส่วนอื่น */
}

/* Progress Bar Fill */
#progress-fill {
  height: 100%;
  background: #FFF;
  width: 0;
  transition: width 0.5s ease; /* เพิ่ม Animation */
  border-radius: 10px;
}

/* Progress Text */
/*#progress-text {
  position: absolute;
  width: 100%;
  top: 50	;
  left: 0;
  text-align: center;
  line-height: 20px;
  color: white;
  font-size: 12px;
}*/

#logo {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  position: absolute;
  top: 20px; /* ระยะห่างจากด้านบน */
  left: 50%; /* อยู่กลางแนวนอน */
  transform: translateX(-50%); /* เลื่อนให้ตรงกลางแนวนอน */
}

h5 {
  position: absolute;
  bottom: 10px; /* ระยะห่างจากด้านล่าง */
  right: 10px; /* ระยะห่างจากด้านขวา */
  font-size: 10px;
  color: #fff; /* ปรับสีของข้อความ */
}

h6 {
  position: absolute;
  bottom: 550px; /* ระยะห่างจากด้านล่าง */
  right: 140px; /* ระยะห่างจากด้านขวา */
  font-size: 25px;
  color: #fff; /* ปรับสีของข้อความ */
}

h4 {
  position: absolute;
  bottom: 550px; /* ระยะห่างจากด้านล่าง */
  right: 150px; /* ระยะห่างจากด้านขวา */
  font-size: 15px;
  color: #fff; /* ปรับสีของข้อความ */
}

/* โลโก้ที่สอง */
#logo2 {
  max-width: 200%;
  max-width: 880px;
  max-height: 200%;
  max-height: 980px;
  object-fit: contain;
  position: absolute;
  top: 50px; /* ระยะห่างจากด้านบน */
  left: 210%; /* อยู่กลางแนวนอน */
  transform: translateX(-50%); /* เลื่อนให้ตรงกลางแนวนอน */
}

/* กล่องพื้นหลังโปร่งใส */
    .background-boxz {
      position: relative;
      width: 90%;
      max-width: 400px;
      padding: 10px 20px;
      background: rgba(0, 0, 0, 0.5); /* สีดำโปร่งใส */
      border-radius: 15px;
      margin: 10px auto;
      text-align: center;
      color: white;
    }
	

.heading-custom {
  top: -10%; /* ปรับตำแหน่งแนวตั้ง */
  left: 15%; /* เลื่อนไปทางขวา 50% */
  font-size: 1.8rem;
  font-weight: bold;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}

.heading-custom1 {
  top: -110%; /* ปรับตำแหน่งแนวตั้ง */
  left: 140%; /* เลื่อนไปทางขวา 50% */
  font-size: 1.8rem;
  font-weight: bold;
  z-index: 1; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  border: 1px solid rgba(0, 0, 0, 0.0); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.0); /* พื้นหลังสีขาวโปร่งใส 10% */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}

#launcher5-container {
  position: absolute;
  top: -58%; /* ปรับตำแหน่งแนวตั้ง */
  left: 236.5%; /* เลื่อนไปทางขวา 50% */
  height: 55%;
  width: 140%;
  position: relative; /* ใช้ position เพื่อปรับตำแหน่ง */
  border-radius: 5px; /* ความโค้งมนเล็กน้อย */
  z-index: -1; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  border: 1px solid rgba(0, 0, 0, 0.3); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}
.hidden {
  display: none;
}

#launcher6-container {
  position: absolute;
  top: -51%; /* ปรับตำแหน่งแนวตั้ง */
  left: 236.5%; /* เลื่อนไปทางขวา 50% */
  height: 15%;
  width: 140%;
  position: relative; /* ใช้ position เพื่อปรับตำแหน่ง */
  border-radius: 5px; /* ความโค้งมนเล็กน้อย */
  z-index: -1; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  border: 1px solid rgba(0, 0, 0, 0.0); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.0); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}
.hidden {
  display: none;
}

.heading-custom2 {
  top: 55%; /* ปรับตำแหน่งแนวตั้ง */
  left: 270%; /* เลื่อนไปทางขวา 50% */
  font-size: 0.8rem;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}

 .tooltip {
	  top: 15%; /* ปรับตำแหน่งแนวตั้ง */
      left: 50%; /* เลื่อนไปทางขวา 50% */
      position: relative;
      display: inline-block;
      cursor: pointer;
      font-size: 16px;
      padding: 3px 8px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      background-color: #FFF;
      color: black;
    }

    /* Tooltip box */
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 5px;

      /* Positioning */
      position: absolute;
      bottom: 150%; /* ปรับให้แสดงเหนือปุ่ม */
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;

      /* Animation */
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Arrow */
    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%; /* ชี้ไปที่ปุ่ม */
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    /* Show tooltip */
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
	
#launcher4-container {
  position: absolute;
  bottom: 0; /* ติดขอบล่าง */
  right: 300; /* ติดขอบขวา */
  height: 122%; /* กำหนดความสูง */
  width: 30%; /* กำหนดความกว้าง */
  border-radius: 0px; /* ขอบไม่โค้งมน */
  z-index: -1; /* แสดงอยู่เหนือ container อื่น */
  border: 1px solid rgba(255, 255, 255, 0.3); /* ขอบสีขาวโปร่งใส */
  border-left: none; /* ลบขอบด้านซ้าย */
  border-top: none; /* ลบขอบด้านบน */
  border-bottom: none; /* ลบขอบด้านล่าง */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีดำโปร่งใส */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

.hidden {
  display: none;
}

	
#launcher7-container {
  position: absolute;
  bottom: 0; /* ติดขอบล่าง */
  right: -880; /* ติดขอบขวา */
  height: 18%; /* กำหนดความสูง */
  width: 295%; /* กำหนดความกว้าง */
  border-radius: 0px; /* ขอบไม่โค้งมน */
  z-index: -1; /* แสดงอยู่เหนือ container อื่น */
  border: 1px solid rgba(255, 255, 255, 0.3); /* ขอบสีขาวโปร่งใส */
  border-right: none; /* ลบขอบด้านขวา */
  border-bottom: none; /* ลบขอบด้านล่าง */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีดำโปร่งใส */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

.hidden {
  display: none;
}


.heading-custom7 {
  top: -75%; /* ปรับตำแหน่งแนวตั้ง */
  left: 210%; /* เลื่อนไปทางขวา 50% */
  font-size: 1.2rem;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}

#channel-dropdown1 {
  position: absolute;
  top: 83.5%; /* ปรับตำแหน่งแนวตั้ง */
  left: 55%; /* เลื่อนไปทางขวา 50% */
  transform: translate(-50%, -50%); /* จัดให้อยู่กึ่งกลาง */
  width: 380px;
  width: 138%;
  max-width: 200px; /* กำหนดความกว้างสูงสุด */
  padding: 10px;
  font-size: 10px; /* ขนาดตัวอักษรใหญ่ขึ้น */
  border-radius: 10px; /* ความโค้งมนเล็กน้อย */
  border: 1px solid rgba(255, 255, 255, 0.3); /* ขอบสีขาวโปร่งใส */
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.1); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  cursor: pointer;
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

#channel-dropdown1:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.6); /* ขอบสีขาวโปร่งใสเมื่อ focus */
}

#channel-dropdown1 option {
  background: rgba(0, 0, 0, 0.8); /* พื้นหลังตัวเลือก dropdown สีดำโปร่งใส */
  color: #ffffff; /* ตัวอักษรในตัวเลือกสีขาว */
}


	
.heading-custom10 {
  top: -95%;
  left: 15%;
  font-size: 3.4rem;
  font-weight: bold;
  z-index: 15;
  position: relative;
  color: transparent; /* ซ่อนพื้นหลังเดิม */
  background-clip: text; /* ใช้พื้นหลังของสีเพื่อทับสีที่ตัวอักษร */
  animation: rainbow 5s infinite ease-in-out; /* เพิ่มเวลา และการเปลี่ยนสีแบบสมูท */
}

@keyframes rainbow {
  0% { color: rgba(255, 255, 255, 0); }
  17% { color: rgba(206, 206, 206, 0); }
  33% { color: rgba(173, 173, 173, 0); }
  50% { color: rgba(116, 116, 116, 0); }
  67% { color: rgba(88, 88, 88, 0); }
  83% { color: rgba(65, 65, 65, 0); }
  100% { color: rgba(215, 215, 215, 0); }
}



	.heading-custom11 {
  top: -90%; /* ปรับตำแหน่งแนวตั้ง */
  left: 20%; /* เลื่อนไปทางขวา 50% */
  font-size: 1.4rem;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #ffffff00;
}

	.heading-custom12 {
  top: -30%; /* ปรับตำแหน่งแนวตั้ง */
  left: -12%; /* เลื่อนไปทางขวา 50% */
  font-size: 0.8rem;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}



.heading-custom13 {
  top: -274%; /* ปรับตำแหน่งแนวตั้ง */
  left: 200%; /* เลื่อนไปทางขวา 50% */
  font-size: 1.2rem;
  z-index: 15; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  position: relative; /* ใช้ position เพื่อให้ z-index ทำงาน */
  color: #FFF;
}

#character-container {
  top: -187%; /* ปรับตำแหน่งแนวตั้ง */
  left: 240%; /* เลื่อนไปทางขวา 50% */
  color: #FFFFFF; /* สีที่ต้องการ */
  position: relative; /* หรือ absolute ขึ้นอยู่กับตำแหน่งที่ต้องการ */
  margin-top: 20px;  /* ปรับระยะห่างจากขอบบน */
  padding: 10px;
}

#character-container div {
  color: #FFF;
  margin-bottom: 10px;
}

#character-container div:nth-child(odd) {
}

#character-container div:nth-child(even) {
  color: #FFF;
}


/* สไตล์สำหรับตัวละคร */
.character-div {
  display: flex;  /* ใช้ Flexbox เพื่อจัดการการแสดงผล */
  align-items: center;  /* จัดให้อยู่กลางแนวนอน */
  gap: 10px;  /* กำหนดระยะห่างระหว่างข้อความกับไอคอน */
  font-size: 18px;
  color: #FFFFFF;
  white-space: nowrap;  /* ป้องกันการข้ามบรรทัด */
  overflow: hidden;  /* ซ่อนข้อความที่เกินขนาด */
  text-overflow: ellipsis;  /* เพิ่ม "..." หากข้อความยาวเกิน */
}

/* สไตล์สำหรับไอคอน Level */
.level-icon {
  align-items: center;
  top: -270%; /* ปรับตำแหน่งแนวตั้ง */
  left: 20%; /* เลื่อนไปทางขวา 50% */
  width: 40px;  /* ขนาดไอคอน */
  height: 40px; /* ขนาดไอคอน */
}

/* สไตล์สำหรับกล่องแสดงเงิน */
.money-div {
  display: flex; /* ใช้ flexbox */
  align-items: center; /* จัดแนวกลางแนวตั้ง */
  position: relative; /* เพื่อควบคุมการจัดตำแหน่ง */
}

/* สไตล์สำหรับไอคอน Money */
.money-div img {
  width: 18px; /* ขนาดไอคอน */
  height: 20px; /* ขนาดไอคอน */
  margin-right: 5px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

/* สไตล์สำหรับข้อความ Money */
.money-div span {
  color: #FFFFFF; /* สีข้อความ */
  font-size: 16px; /* ขนาดข้อความ */
  white-space: nowrap; /* ป้องกันข้อความขึ้นบรรทัดใหม่ */
}

/* สไตล์สำหรับกล่องแสดง Cash Balance */
.cashbalance-div {
  display: flex; /* ใช้ flexbox */
  align-items: center; /* จัดแนวกลางแนวตั้ง */
  position: relative; /* เพื่อควบคุมการจัดตำแหน่ง */
}

/* สไตล์สำหรับไอคอน Cash Balance */
.cashbalance-div img {
  left: -100px; /* เลื่อนไปทางขวา 50% */
  width: 18px; /* ขนาดไอคอน */
  height: 20px; /* ขนาดไอคอน */
  margin-right: 5px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

/* สไตล์สำหรับข้อความ Cash Balance */
.cashbalance-div span {
  color: #FFFFFF; /* สีข้อความ */
  font-size: 10px; /* ขนาดข้อความ */
  white-space: nowrap; /* ป้องกันข้อความขึ้นบรรทัดใหม่ */
}

  #launcher8-container {
  align-items: center;
  position: absolute;
  top: -310%; /* ปรับตำแหน่งแนวตั้ง */
  left: 0%; /* เลื่อนไปทางขวา 50% */
  height: 15%;
  width: 376%;
  position: relative; /* ใช้ position เพื่อปรับตำแหน่ง */
  border-radius: 0px; /* ความโค้งมนเล็กน้อย */
  z-index: -1; /* กำหนดให้แสดงอยู่เหนือ launcher4-container */
  border: 1px solid rgba(0, 0, 0, 0.0); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีขาวโปร่งใส 10% */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

.glowing-circle {
  position: absolute; /* ใช้ absolute เพื่ออ้างอิงตำแหน่ง */
  z-index: 1; /* วางไว้เหนือองค์ประกอบอื่น */
  top: 210px; /* ระบุค่าที่ต้องการแทน -510% */
  left: 818px; /* ระบุค่าที่ต้องการแทน 236.5% */
  width: 15px;
  height: 15px;
  display: flex; /* ใช้ flexbox จัดการตัวอักษร */
  align-items: center; /* จัดแนวแนวตั้ง */
  justify-content: center; /* จัดแนวแนวนอน */
  font-size: 22px; /* ขนาดตัวอักษร */
  background-color: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff00;
  animation: glow 0.8s infinite;
}


@keyframes glow {
  0% {
    box-shadow: 0 0 15px #00ff00, 0 0 20px #00ff00;
  }
  50% {
    box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00;
  }
  100% {
    box-shadow: 0 0 15px #00ff00, 0 0 20px #00ff00;
  }
}
/*
.glowing1-circle {
  position: absolute; 
  top: 249px; 
  left: 823.3px; 
  width: 13px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center; 
  font-size: 22px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 10px #FFFF00;
  animation: glow1 1.5s infinite;
}*/


@keyframes glow1 {
  0% {
    box-shadow: 0 0 15px #FFFF00, 0 0 20px #FFFF00;
  }
  50% {
    box-shadow: 0 0 20px #FFFF00, 0 0 30px #FFFF00;
  }
  100% {
    box-shadow: 0 0 15px #FFFF00, 0 0 20px #FFFF00;
  }
}
/*
.glowing2-circle {
  position: absolute;  
  top: 280px; 
  left: 822px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center; 
  font-size: 22px; 
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 10px #CC00CC;
  animation: glow2 1.5s infinite;
} */


@keyframes glow2 {
  0% {
    box-shadow: 0 0 17px #CC00CC, 0 0 20px #CC00CC;
  }
  50% {
    box-shadow: 0 0 23px #CC00CC, 0 0 30px #CC00CC;
  }
  100% {
    box-shadow: 0 0 17px #CC00CC, 0 0 20px #CC00CC;
  }
}

.tooltip1 {
	  top: 23%; /* ปรับตำแหน่งแนวตั้ง */
      left: 0%; /* เลื่อนไปทางขวา 50% */
      position: relative;
      display: inline-block;
      cursor: pointer;
      font-size: 16px;
      padding: 3px 8px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 47%;
      background-color: #FFF;
      color: black;
    }

    /* Tooltip box */
    .tooltip1 .tooltip-text {
      visibility: hidden;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 5px;

      /* Positioning */
      position: absolute;
      bottom: 150%; /* ปรับให้แสดงเหนือปุ่ม */
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;

      /* Animation */
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Arrow */
    .tooltip1 .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%; /* ชี้ไปที่ปุ่ม */
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    /* Show tooltip */
    .tooltip1:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
	
    /* Slideshow Styles */
    #slideshow {
      position: absolute;
      left: 100px;
      top: 33%;
      transform: translateY(-50%);
      width: 690px;
      height: 400px;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      -webkit-app-region: no-drag; /* ให้ลากไม่ได้ในพื้นที่นี้ */
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      min-width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slide iframe {
      width: 100%;
      height: 100%;
      width: 690px;
      height: 400px;
      border: none;
    }

    .nav-buttons {
      position: absolute;
      bottom: 10px;
      width: 10%;
      display: flex;
	  right: 30;
      justify-content: space-between;
      z-index: 10;
    }

    .nav-buttons button {
      background-color: rgba(0, 0, 0, 1.5);
      border: none;
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .nav-buttons button:hover {
      background-image: linear-gradient(163.3deg, #D9DBDE 11.54%, #A8AAAE 90.45%);
    }

#launcher9-container {
  position: absolute;
  bottom: 740; /* ติดขอบล่าง */
  right: -880px; /* ติดขอบขวา */
  height: 10%; /* กำหนดความสูง */
  width: 500%; /* กำหนดความกว้าง */
  border-radius: 0px; /* ขอบไม่โค้งมน */
  z-index: -1; /* แสดงอยู่เหนือ container อื่น */
  border: 1px solid rgba(255, 255, 255, 0.0); /* ขอบสีขาวโปร่งใส */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีดำโปร่งใส */
  color: #ffffff; /* ตัวอักษรสีขาว */
  text-align: left; /* ตัวอักษรจัดชิดซ้าย */
}

.hidden {
  display: none;
}

#logout-button {
  position: absolute;
  bottom: 530px;
  right: -218%;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #333;
  border: 1px solid #666;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10;
}

#logout-button:hover {
  background: #ff3838;
  color: #fbfbfb;
}

#remember-me {
  width: 20px;
  height: 20px;
  appearance: none;
  border: 2px solid #ff4d4d;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
}

#remember-me:checked {
  background-color: #ff4d4d;
}

#remember-me::before {
  content: "✓";
  color: white;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#remember-me:checked::before {
  opacity: 1;
}

.remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #fff;
  margin-top: 18px;
}

#mock-progress-button {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  font-size: 14px;
  background-color: #555;
  color: white;
  border: 1px solid #888;
  border-radius: 8px;
  cursor: pointer;
  z-index: 200;
}

#mock-progress-button:hover {
  background-color: #777;
}

.drag-region {
  -webkit-app-region: drag;
  cursor: move;
}

button, .no-drag {
  -webkit-app-region: no-drag;
}

.news-panel {
  position: absolute;
  top: 120px;
  left: 40px;
  width: 320px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid #00ffff;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
  color: #fff;
  font-family: 'Arial', sans-serif;
  z-index: 50;
  backdrop-filter: blur(4px);
}

.news-header {
  font-size: 18px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 8px;
  text-shadow: 0 0 4px #00ffff;
}

.news-content ul {
  padding-left: 20px;
  margin: 0;
}

.news-content li {
  margin-bottom: 6px;
  line-height: 1.4;
  list-style-type: disc;
}

#news-ticker-container {
  position: absolute;
  bottom: 138px;
  left: 910px;
  width: 78%;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  border-radius: 8px 8px 0 0; /* 👈 โค้งบนตรงล่าง */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
  z-index: 100;
}

#news-ticker {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


.news-carousel {
  position: absolute;
  top: 488px;
  left: 100px;
  width: 670px;
  height: 120px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px 8px 0 0; /* 👈 โค้งบนตรงล่าง */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  gap: 14px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0);
  overflow: hidden;
  z-index: -1;
}


.news-slide {
  display: none;
  flex-direction: row;
  align-items: center;
}

.news-slide.active {
  display: flex;
  animation: fadeIn 0.4s ease-in-out;
}

.news-image {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 6px;
}

.news-text {
  flex: 1;
  color: #fff;
  height: 128px;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 0 2px #000;
  padding-right: 18px;
  line-height: 1.4;
}

.news-text1 {
  flex: 1;
  color: #fff;
  height: 128px;
  left: 50px;
  font-size: 15px;
  font-weight: 100;
  text-shadow: 0 0 2px #000;
  padding-right: 18px;
  line-height: 1.4;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.level-icon-wrapper {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.6); /* พื้นหลังดำโปร่ง */
  border-radius: 25px;
  margin-left: 8px;
}

.level-icon {
  width: 35px;
  height: auto;
  display: block;
}

.status-indicator {
  position: absolute;
  top: 1.5px;
  left: 35px;
  width: 10px;
  height: 10px;
  background-color: #00ff00;
  border-radius: 50%;
  border: 1px solid #ffffff;
  animation: pulse-glow 1.6s infinite ease-in-out;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 4px #00ff00;
    opacity: 1;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 12px #00ff00;
    opacity: 0.6;
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 4px #00ff00;
    opacity: 1;
    transform: scale(1);
  }
}