/* ตั้งค่าพื้นหลัง */
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 2901px;
            background-image: url('../images/bg3.png'); /* ใช้ภาพ bg.png */
            background-size: cover; /* ปรับขนาดภาพให้พอดีกับหน้าจอ */
            background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
            background-position: center; /* จัดให้อยู่ตรงกลาง */
            font-family: Arial, sans-serif;
        }

        /* สไตล์ของเมนู */
        .headmenu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 79px; /* ความสูงของเมนู */
            background-color: rgba(255, 250, 205, 0.9); /* สีพื้นหลังโปร่งแสง */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* เงาเพิ่มมิติ */
            z-index: 1000;
        }

        .headmenu img {
            height: 100%; /* ปรับความสูงของแต่ละภาพให้พอดีกับเมนู */
            transition: transform 0.3s ease, filter 0.3s ease; /* เพิ่ม transition */
        }

        /* เอฟเฟกต์เมื่อชี้ */
        .headmenu img.pointer:hover {
            transform: scale(1.05); /* ขยายขนาด */
            filter: brightness(1.2); /* เพิ่มความสว่าง */
        }

        .pointer {
            cursor: pointer; /* ทำให้แสดงมือเมื่อชี้ */
        }

        /* สไตล์ container */
        .container {
            width: 1295px; /* กำหนดความกว้าง */
            margin: 0 auto; /* จัดให้อยู่กึ่งกลางหน้าจอ */
            height: auto; /* ความสูงปรับอัตโนมัติตามเนื้อหา */
            position: relative; /* กำหนด relative เพื่อให้ตำแหน่งภายในใช้งานได้ */
        }

        /* รูป download_top.png */
        .download-link {
            position: absolute;
            top: 79px; /* อยู่ใต้ headmenu */
            left: calc((100% - 1295px) / 2 - 100px); /* ขยับออกไปทางซ้าย 100px */
            width: 103px; /* ความกว้างตามภาพ */
            height: 544px; /* ความสูงตามภาพ */
            display: inline-block; /* ทำให้ลิงก์เป็น block สำหรับครอบภาพ */
            transition: transform 0.3s ease, filter 0.3s ease; /* เพิ่มความนุ่มนวล */
        }

        .download-link img {
            width: 100%; /* ให้ภาพเต็มพื้นที่ของลิงก์ */
            height: 100%;
            transition: transform 0.3s ease, filter 0.3s ease; /* เพิ่ม transition */
        }

        /* เอฟเฟกต์เมื่อชี้ */
        .download-link:hover {
            transform: scale(1.01); /* ขยายลิงก์และภาพเล็กน้อย */
            filter: brightness(1.2); /* เพิ่มความสว่าง */
        }

        /* โลโก้ภายใน container */
        .logo {
            position: absolute;
            top: 100px; /* ขยับลงมา 100px */
            left: 0; /* ชิดขอบซ้ายของ container */
            width: 641px; /* ความกว้างของโลโก้ */
            height: 539px; /* ความสูงของโลโก้ */
            animation: bounce 2s infinite, glow 2s ease-in-out infinite; /* รวมสองอนิเมชัน */
        }

        .logo2 {
            position: absolute;
            top: 510px; /* อยู่ใต้โลโก้หลัก */
            left: 0; /* ชิดขอบซ้ายของ container */
            width: 650px; /* ความกว้างของโลโก้ */
            height: 353px; /* ความสูงของโลโก้ */
        }
		
        .announ {
            position: absolute;
            top: 570px; /* อยู่ใต้ logo2 */
            left: 0; /* ชิดขอบซ้ายของ container */
			background-image: url('../images/announ.png');
			background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
            width: 807px; /* ความกว้างของ announ */
            height: 133px; /* ความสูงของ announ */
        }		

        /* อนิเมชันเด้ง */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0); /* อยู่ตำแหน่งปกติ */
            }
            50% {
                transform: translateY(-20px); /* เด้งขึ้น */
            }
        }

        /* อนิเมชันกระพริบแสง */
        @keyframes glow {
            0%, 100% {
                filter: brightness(1); /* ความสว่างปกติ */
            }
            50% {
                filter: brightness(1.5); /* เพิ่มความสว่าง */
            }
        }
		
    .char {
        position: absolute;
        top: 130px; /* ขยับลงมาให้ตรงกับ logo */
        left: 420px; /* ชิดขอบขวาของ logo */
        width: 1110px; /* ความกว้างของ char.png */
        height: 693px; /* ความสูงของ char.png */
    }

    .video {
        position: absolute;
        top: 690px; /* อยู่ใต้ announ */
        left: -45px; /* ชิดขอบซ้ายของ container */
        width: 946px; /* ความกว้างของ video.png */
        height: 556px; /* ความสูงของ video.png */
		background-image: url('../images/video.png');
		background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
    }

		.menubar {
			position: absolute;
			top: 690px; /* อยู่ในระดับเดียวกับ video */
			left: 880px; /* วางด้านขวาของ video */
			width: 487px; /* ความกว้างของ menubar.png */
			height: 587px; /* ความสูงของ menubar.png */
			background-image: url('../images/menubar3.png');
			background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
			background-size: cover; /* ปรับให้ภาพเต็มพื้นที่ */
		}

		.menu {
			display: block; /* จัดเรียงเป็นบล็อกแนวตั้ง */
			width: 349px; /* กำหนดความกว้าง */
			height: auto; /* ปรับความสูงตามภาพ */
			margin: 10px auto; /* เพิ่มระยะห่างระหว่างเมนู */
		}
		.menu-link {
			display: block; /* จัดเรียงเป็นบล็อกแนวตั้ง */
			width: 349px; /* กำหนดความกว้างเท่าภาพ */
			margin: 10px auto; /* เพิ่มระยะห่างระหว่างลิงก์ */
			text-align: center; /* จัดภาพให้อยู่กึ่งกลางลิงก์ */
			transition: transform 0.3s ease, filter 0.3s ease; /* เพิ่ม transition ให้ลิงก์ */
		}

		.menu-link:hover {
			transform: scale(1.02); /* ขยายขนาดเล็กน้อยเมื่อชี้ */
			filter: brightness(1.2); /* เพิ่มความสว่าง */
			
		}

		.events {
			position: absolute;
			top: 1400px; /* ขยับลงมา 1650px ใต้ video */
			left: 0; /* เริ่มชิดซ้ายของ container */
			display: flex;
			flex-wrap: wrap; /* ทำให้แถวใหม่ขึ้นอัตโนมัติ */
			justify-content: space-between; /* กระจายช่องว่างระหว่างไอเท็ม */
			gap: 20px; /* เพิ่มช่องว่างระหว่างไอเท็ม */
			width: 100%; /* ใช้พื้นที่เต็มความกว้าง */
		}

		.event {
			width: 375px; /* ความกว้างของกล่อง */
			text-align: center; /* จัดข้อความให้อยู่กลาง */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
			border-radius: 8px; /* มุมโค้ง */
			background-color: #fff; /* พื้นหลังสีขาว */
			padding: 15px; /* ระยะห่างภายใน */
			transition: transform 0.3s ease, box-shadow 0.3s ease; /* เพิ่มเอฟเฟกต์เมื่อ hover */
		}

		.event img {
			width: 100%; /* ขนาดเต็มกล่อง */
			height: auto; /* ความสูงปรับตามภาพ */
			border-radius: 8px; /* มุมโค้งของรูป */
		}

		.event p {
			font-size: 1.1rem; /* ขยายขนาดตัวอักษร */
			color: #ff9800; /* สีส้ม */
			font-weight: bold; /* ทำให้ตัวอักษรหนา */
			margin: 10px 0; /* เพิ่มระยะห่างเล็กน้อย */
		}


		.event button {
			background-color: #FFD700; /* ปุ่มสีส้ม */
			color: white; /* สีตัวอักษร */
			border: none; /* ไม่มีเส้นขอบ */
			padding: 10px 20px; /* ขนาดปุ่ม */
			border-radius: 20px; /* ทำให้ปุ่มโค้ง */
			cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
			font-size: 1rem; /* ขนาดตัวอักษร */
			margin-top: 10px; /* เลื่อนปุ่มลงมา 10px */
			transition: background-color 0.3s ease, transform 0.3s ease; /* เพิ่มเอฟเฟกต์เมื่อ hover */
		}

		.event button:hover {
			background-color: #DAA520; /* สีปุ่มเมื่อ hover */
			transform: scale(1.05); /* ขยายขนาดเล็กน้อย */
		}


		.event:hover {
			transform: scale(1.05); /* ขยายกล่องเล็กน้อยเมื่อชี้ */
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* เพิ่มเงาเมื่อ hover */
		}

		.war {
			position: absolute;
			top: 2700px; /* อยู่ใต้ events */
			left: 0; /* ชิดขอบซ้ายของ container */
			width: 1493px; /* ความกว้างของ war.png */
			height: 1173px; /* ความสูงของ war.png */
			background-image: url('../images/war.png'); /* ใช้ภาพ war.png */
			background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
			background-size: cover; /* ปรับให้ภาพเต็มพื้นที่ */
		}
		
		.social-section {
			position: absolute;
			top: 3900px; /* อยู่ใต้ war */
			left: 0; /* ชิดขอบซ้ายของ container */
			width: 100%; /* ใช้พื้นที่เต็มความกว้าง */
			display: flex; /* ใช้ flexbox สำหรับจัดเรียงด้านข้าง */
			justify-content: center; /* จัดให้อยู่กึ่งกลาง */
			gap: 20px; /* เพิ่มระยะห่างระหว่าง discord และ fanpage */
		}

		.discord {
			width: 662px; /* ความกว้างของ discord.png */
			height: 551px; /* ความสูงของ discord.png */
			background-image: url('../images/discord.png'); /* ใช้ภาพ discord.png */
			background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
			background-size: cover; /* ปรับให้ภาพเต็มพื้นที่ */
		}

		.fanpage {
			width: 671px; /* ความกว้างของ fanpage.png */
			height: 551px; /* ความสูงของ fanpage.png */
			background-image: url('../images/fanpage.png'); /* ใช้ภาพ fanpage.png */
			background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
			background-size: cover; /* ปรับให้ภาพเต็มพื้นที่ */
		}
		.discord iframe {
			margin-top: 95px; /* ขยับลงมา 100px */
			margin-left: 50px; /* ขยับไปทางขวา 100px */
		}
		
		.fanpage iframe {
			margin-top: 95px; /* ขยับลงมา 100px */
			margin-left: 50px; /* ขยับไปทางขวา 100px */
		}
		
	
		.footer-text {
			position: absolute;
			top: 4460px; /* ปรับตำแหน่งตามความเหมาะสม */
			left: 50%; /* จัดให้อยู่กลางจอ */
			transform: translateX(-50%); /* ปรับตำแหน่งให้อยู่กึ่งกลาง */
			text-align: center; /* จัดข้อความให้อยู่กลาง */
		}


		.footer {
			position: relative;
			margin-top: 20px; /* ระยะห่างจากส่วนบน */
			text-align: center; /* จัดข้อความให้อยู่กึ่งกลาง */
			font-size: 14px; /* ขนาดตัวอักษร */
			color: #333; /* สีของข้อความ */
		}

		.footer a {
			text-decoration: none; /* ลบเส้นใต้ลิงก์ */
			color: #333; /* สีลิงก์ */
			font-weight: bold; /* ตัวหนา */
			transition: color 0.3s ease; /* เพิ่มเอฟเฟกต์เปลี่ยนสี */
		}

		.footer a:hover {
			color: #ff9800; /* สีลิงก์เมื่อชี้ */
		}
		
		/* Modal Container */
		.modal {
			display: none; /* ซ่อน modal เป็นค่าเริ่มต้น */
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังโปร่งแสง */
		}

		/* Modal Content */
		.modal-content {
			background-color: #fff;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 80%;
			max-width: 600px;
			border-radius: 10px;
			text-align: center;
		}

		/* Close Button */
		.close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}

		.close:hover,
		.close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		/* Table Styling */
		table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
		}

		th, td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: center;
		}

		th {
			background-color: #f4f4f4;
			font-weight: bold;
		}

		.btn {
			padding: 5px 10px;
			color: white;
			background-color: #28a745;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

		.btn:hover {
			background-color: #218838;
		}	

		/* สไตล์ปุ่ม */
		.btn {
			padding: 8px 15px; /* ขนาดปุ่ม */
			color: white; /* สีข้อความ */
			background: linear-gradient(90deg, #28a745, #218838); /* เพิ่มไล่สี */
			border: none; /* ไม่มีขอบ */
			border-radius: 20px; /* ทำมุมปุ่มโค้งมน */
			font-size: 14px; /* ขนาดตัวอักษร */
			font-weight: bold; /* ตัวหนา */
			cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
			transition: all 0.3s ease; /* เพิ่มเอฟเฟกต์ความนุ่มนวล */
			display: flex; /* ใช้ flexbox สำหรับการจัดการไอคอน */
			align-items: center; /* จัดไอคอนกับข้อความให้อยู่ตรงกลาง */
			justify-content: center; /* จัดข้อความให้อยู่กึ่งกลาง */
			gap: 5px; /* เพิ่มช่องว่างระหว่างไอคอนกับข้อความ */
		}

		/* เอฟเฟกต์เมื่อชี้ */
		.btn:hover {
			background: linear-gradient(90deg, #218838, #28a745); /* เปลี่ยนไล่สีเมื่อ hover */
			transform: scale(1.05); /* ขยายปุ่มเล็กน้อย */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
		}

		/* สไตล์ไอคอน */
		.btn i {
			font-size: 16px; /* ขนาดไอคอน */
		}

		/* สไตล์ลิงก์เพื่อเอาเส้นใต้ */
		a {
			text-decoration: none; /* ลบเส้นใต้ */
		}	
		
		/* สไตล์สำหรับการ hover บน <a> */
		.pointer:hover {
			transform: scale(1.02); /* ขยายเมื่อชี้ */
			transition: transform 0.3s ease-in-out; /* เพิ่มเอฟเฟกต์นุ่มนวล */
		}

		/* สไตล์สำหรับการ hover บน <img> ภายใน <a> */
		.pointer img:hover {
			transform: scale(1.05); /* ขยายเมื่อชี้ */
			filter: brightness(1.2); /* เพิ่มความสว่าง */
			transition: all 0.3s ease; /* เพิ่มเอฟเฟกต์นุ่มนวล */
		}