/* style.css */

/* --- การตั้งค่าพื้นฐาน (General Styles) --- */
body {
    font-family: 'Prompt', Tahoma, Geneva, Verdana, sans-serif; /* เปลี่ยน Font */
    margin: 0; /* ลบระยะขอบเริ่มต้นของ Browser */
    line-height: 1.6; /* ระยะห่างระหว่างบรรทัด */
    color: #333; /* สีตัวอักษรเริ่มต้น */
    background-color: #f8f8f8; /* สีพื้นหลังของเว็บไซต์ */
}

a {
    text-decoration: none; /* ลบขีดเส้นใต้ของ Link */
    color: #82ad52; /* สีของ Link */
}

a:hover {
    color: #5A5A5A; /* สีของ Link เมื่อชี้เมาส์ */
}

/* --- ส่วนหัว (Header) --- */
header {
    background-color: #2F4F4F; /* สีพื้นหลัง Header */
    color: white; /* สีตัวอักษรใน Header */
    padding: 1.5rem 0; /* ระยะห่างด้านใน Header (บน-ล่าง ซ้าย-ขวา) */
    text-align: center; /* จัดกลางข้อความใน Header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* เพิ่มเงาเล็กน้อย */
}

header h1 {
    margin: 0; /* ลบระยะขอบเริ่มต้นของ h1 */
    font-size: 2.8rem; /* ขนาดตัวอักษรของชื่อวารสาร */
    letter-spacing: 1px; /* เพิ่มระยะห่างตัวอักษร */
}

/* --- แถบนำทาง (Navigation Bar) --- */
nav ul {
    list-style: none; /* ลบจุดนำหน้า List */
    padding: 0; /* ลบระยะห่างด้านใน List */
    margin: 0; /* ลบระยะขอบ List */
    display: flex; /* จัดเรียงเมนูแนวนอน */
    justify-content: center; /* จัดกลางเมนู */
    flex-wrap: wrap; /* ให้เมนูขึ้นบรรทัดใหม่เมื่อจอน้อย */
}

nav ul li {
    margin: 0 15px; /* ระยะห่างระหว่างเมนู */
}

nav ul li a {
    color: white; /* สีตัวอักษรของเมนู */
    font-weight: bold; /* ตัวหนา */
    padding: 0.5rem 0; /* ระยะห่างด้านในของ Link */
    transition: color 0.3s ease; /* เพิ่ม Animation เมื่อชี้เมาส์ */
}

nav ul li a:hover {
    color: #82ad52; /* สีเมนูเมื่อชี้เมาส์ */
}

/* --- เนื้อหาหลัก (Main Content) --- */
main {
    max-width: 1200px; /* กำหนดความกว้างสูงสุดของเนื้อหา */
    margin: 20px auto; /* จัดกลางเนื้อหาและเพิ่มระยะห่างด้านบน-ล่าง */
    padding: 0 20px; /* ระยะห่างด้านซ้าย-ขวาของเนื้อหา */
}

section {
    background-color: #ffffff; /* สีพื้นหลังของแต่ละ Section */
    padding: 30px; /* ระยะห่างด้านในของ Section */
    margin-bottom: 20px; /* ระยะห่างด้านล่างของแต่ละ Section */
    border-radius: 8px; /* มุมโค้งมน */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* เพิ่มเงา */
}

section h2 {
    color: #2E8B57; /* สีหัวข้อ h2 */
    border-bottom: 2px solid #e0e0e0; /* เส้นใต้หัวข้อ */
    padding-bottom: 10px; /* ระยะห่างใต้เส้น */
    margin-bottom: 20px; /* ระยะห่างใต้หัวข้อ */
}

/* --- ปุ่ม (Buttons) --- */
.button {
    display: inline-block; /* ทำให้เป็น Block แต่ยังอยู่บรรทัดเดียวกับข้อความอื่นได้ */
    background-color: #6B8E23; /* สีพื้นหลังปุ่ม */
    color: white; /* สีตัวอักษรปุ่ม */
    padding: 10px 20px; /* ระยะห่างด้านในปุ่ม */
    border-radius: 5px; /* มุมโค้งมนของปุ่ม */
    margin-top: 15px; /* ระยะห่างด้านบนปุ่ม */
    transition: background-color 0.3s ease; /* เพิ่ม Animation */
}

.button:hover {
    background-color: #556B2F; /* สีพื้นหลังปุ่มเมื่อชี้เมาส์ */
    transform: translateY(-2px);
  
}

/* --- บทความล่าสุด (Latest Articles Section) --- */
#latest-articles article {
    border-bottom: 1px dashed #eee; /* เส้นประคั่นแต่ละบทความ */
    padding-bottom: 20px; /* ระยะห่างด้านล่าง */
    margin-bottom: 20px; /* ระยะห่างด้านล่าง */
}

#latest-articles article:last-child {
    border-bottom: none; /* ลบเส้นประที่บทความสุดท้าย */
    margin-bottom: 0;
    padding-bottom: 0;
}

#latest-articles h1 a {
    color: #4CAF50; /* สีหัวข้อบทความ */
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

#latest-articles h1 a:hover {
    color: #388E3C;
}

#latest-articles article p {
    font-size: 0.95rem;
    color: #5A5A5A;
}

/* --- ประกาศและข่าวสาร (Announcements Section) --- */
#announcements ul {
    list-style: disc; /* เปลี่ยนเป็นหัวข้อกลม */
    margin-left: 20px; /* ย่อหน้า */
}

#announcements ul li {
    margin-bottom: 10px;
}

/* --- ส่วนท้าย (Footer) --- */
footer {
    background-color: #2F4F4F; /* สีเทาเข้มเหมือนดินที่อุดมสมบูรณ์ */
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 40px;
    font-size: 0.95rem;
    border-top: 5px solid #6B8E23; /* เพิ่มเส้นสีเขียวด้านบน */
}

footer p {
    margin: 5px 0;
}

/* --- Responsive Design (ทำให้เว็บไซต์ดูดีบนมือถือ) --- */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.8rem;
    }

    nav ul {
        flex-direction: column; /* ให้เมนูเรียงลงมาในแนวตั้ง */
        align-items: center; /* จัดกลางเมนูแนวตั้ง */
    }

    nav ul li {
        margin: 10px 0; /* เพิ่มระยะห่างระหว่างเมนู */
    }

    main {
        margin: 10px auto;
        padding: 0 15px;
    }

    section {
        padding: 20px;
    }

    .button {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}