*{ 
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    font-size: 20px;
    font-family: Mitr-Regular;
}
/* สำหรับหน้าจอที่กว้างไม่เกิน 1024px (มือถือและแท็บเล็ต) */
@media (max-width: 1024px) {
    .body {
        font-size: 20px;
    }
    .container {
        padding: 10px;
    }
    .menu a{
        font-size: 16px;
    }
    .about p {
        font-size: 16px;
    }
    .footer h3 {
        font-size: 18px;
    }
    .footer-section.links {
        font-size: 10px;
    }
    .footer-section.links ul{
    gap: 5px;
    }
}
/* สำหรับหน้าจอที่กว้างไม่เกิน 480px (มือถือขนาดเล็ก) */
@media (max-width: 480px) {
    body {
        font-size: 16px;
    }
    .menu a{
        font-size: 16px;
    }
    .about p {
        font-size: 12px;
    }
    .container {
        display: flex;
        justify-content: center; 
        align-items: center;  
        margin-top: -50px;
        padding: 0;
    }
    .menu {
        margin-top: -20px;
    }
    .container a img {
        margin-left: 25px;
        width: 180px  !important;
        height: 180px  !important;
    }
    .about .column p {
        font-size: 14px;
    }
    .footer h3 {
        font-size: 18px;
    }
    .footer-section.links {
        width: 100%;
        justify-content: center; 
    }
    .footer .footer-section.links ul li{
        width: 100%;
        font-size: 10px !important;
        margin: 0 5px;
    }
}
@font-face {
    font-family: Mitr-Regular;
    src: url("Mitr-Regular.ttf");
}
@font-face {
    font-family: Kanit-Light;
    src: url("Kanit-Light.ttf");
}
.container {
    width: 100%;
    background-color: #ffffff;
    text-align: center;
    margin-top: -50px;
}
.social-account {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
    margin-top: 15px;
}
/* กำหนดสไตล์ของแถบเมนู */
.menu {
    width: 100%;
    margin-top: 10px;
    max-width: 100%;
    padding: 0;
    background-color: #BC2636;
}
.menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}
.menu li {
    padding:5px;
    font-size: 20px;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    text-decoration: overline; /* เพิ่มเส้นขีดด้านบน */
    height: 2px; /* ความหนาของเส้น */
    text-decoration-color: #000000; /* สีของเส้นขีดบน */
    color: #000000;
    transition: width 0.3s ease-in-out;
}
a:active {
    color: #000000;
}
.menu-item {
    color: #FFFFFF;
    margin-right: 20px;
    text-decoration: none;
}
.menu-item.active {
    text-decoration: overline; /* เพิ่มเส้นขีดด้านบน */
    height: 2px; /* ความหนาของเส้น */
    text-decoration-color: #000000; /* สีของเส้นขีดบน */
    color: rgb(0, 0, 0);
}
.menu-item:hover {
    color: #000000;
}
.main-contact ,.main-contact h2 {
    margin-top: auto;
    text-align: center; 
    margin: 20px;
}
.main-contact table {
    margin: auto; 
    border-collapse: collapse; 
    width: 100%; 
    max-width: 1000px;
    margin-bottom: 40px;
}
.main-contact th, .main-contact td {
    border: 1px solid black; 
    padding: 10px; 
    text-align: center; 
}
.main-contact th {
    background-color: #BC2636; 
    color: #ffffff;
}
.main-contact td {
    font-family: Kanit-Light;
    font-size: 18px;
}
/* สไตล์สำหรับ select (dropdown) */
#monthSelect {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #BC2636; /* กรอบสีแดง */
    border-radius: 5px;
    background-color: #BC2636;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
    margin-bottom: 10px;
}
/* เมื่อโฮเวอร์ dropdown */
#monthSelect:hover {
    border: 2px solid #333;
    background-color: #333; 
    color: #ffffff;
}
/* สไตล์ option */
#monthSelect option {
    padding: 10px;
}
iframe {
    border: none;
    width: 100%;
    max-width: 800px;
    height: 400px;
}

/* footer */
.footer {
    text-align: center; /* จัดเนื้อหาใน footer ให้อยู่กลาง */
    padding: 10px; /* เพิ่มระยะห่างด้านใน */
    background-color: #BC2636; /* เปลี่ยนสีพื้นหลัง */
    margin: 0;
    margin-top: 20px;
}
.footer h3 {
    font-family: Mitr-Regular;
    color: #ffffff;
}
.footer p {
    font-family: Kanit-Light;
    font-size: 16px;
    margin: -5px 0 0; /* ระยะห่างระหว่าง p กับ links */
    color: #ffffff;
}
.footer-section.links ul {
    font-family: Kanit-Light;
    list-style: none; /* ไม่ให้มีจุดในรายการ */
    padding-top: 10px; 
    margin: 10px;
    display: flex; /* ใช้ flexbox เพื่อให้เรียงแนวนอน */
    justify-content: center; /* จัดให้มีระยะห่างเท่า ๆ กัน */
}
.footer-section.links li {
    margin: 0 15px; /* ระยะห่างระหว่างรายการ */
}
.footer-section.links a {
    font-family: Kanit-Light;
    font-size: 16px;
    color: #ffffff; /* สีลิงค์ */
}
.footer-section.links a:hover {
    color: #000000;
}
.footer-section.social {
    padding: 20px;
}
.social-icons a {
    margin: 0 5px; /* เพิ่มระยะห่างระหว่างไอคอน */
}
.footer2 {
    font-size: 14px; /* ขนาดฟอนต์ */
    color: #6c757d; /* สีข้อความ */
}