/* รีเซ็ตค่าเริ่มต้นของเบราว์เซอร์ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f4f4; /* สีพื้นหลังเว็บ */
    color: #333;
}

/* ส่วนหัว */
header {
    background-color: #ffffff;
    text-align: center;
    padding: 40px 20px;
    border-bottom: 2px solid #ddd;
}

/* เมนูหลัก */
nav {
    background-color: #8B4513; /* ใช้สีน้ำตาลให้เข้ากับตีมวัด */
}
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}
nav ul li {
    padding: 15px 25px;
}
nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}
nav ul li a:hover {
    color: #F4A460;
}

/* โครงสร้าง 3 คอลัมน์ */
.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    gap: 15px; /* ระยะห่างระหว่างคอลัมน์ */
    padding: 0 10px;
}
.sidebar-left, .sidebar-right {
    flex: 1; /* แถบซ้าย-ขวา กว้างเท่ากัน */
}
.content {
    flex: 2.5; /* แถบกลางกว้างที่สุด */
}

/* กล่อง (Box) ต่างๆ ในหน้าเว็บ */
.box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}
.box h3 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #eee;
}

/* รายการเมนูด้านซ้าย */
.menu-list ul {
    list-style: none;
    text-align: left;
}
.menu-list ul li {
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
}
.menu-list ul li a {
    text-decoration: none;
    color: #333;
}
.menu-list ul li a:hover {
    color: #8B4513;
}

/* พื้นที่จำลอง (Placeholder) ที่รอการใส่รูปหรือโค้ด */
.placeholder-img, .placeholder {
    background-color: #eaeaea;
    border: 1px dashed #999;
    padding: 30px 10px;
    margin-bottom: 10px;
    color: #666;
}
.slider-box, .news-box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    min-height: 250px;
}
.news-box {
    min-height: 400px;
}

/* ส่วนท้าย */
footer {
    background-color: #8B4513;
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
}
/* =========================================
   Responsive Design (รองรับหน้าจอมือถือ)
========================================= */

/* ป้องกันภาพแบนเนอร์ล้นจอ */
header img {
    max-width: 100%;
    height: auto;
}

/* เมื่อหน้าจอเล็กกว่า 768px (มือถือ) */
@media (max-width: 768px) {
    .container {
        flex-direction: column !important; /* สั่งให้คอลัมน์เรียงซ้อนกันบน-ล่าง */
        padding: 0 10px !important;
    }
    
    .sidebar-left, .content {
        width: 100% !important; /* ให้เมนูซ้ายและเนื้อหาขยายเต็ม 100% ของจอ */
        min-width: unset !important;
    }
    
    /* ปรับเมนูบาร์ด้านบนให้เรียงแนวตั้งบนมือถือ */
    .main-nav .nav-list {
        flex-direction: column !important;
    }
    
    .main-nav .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* ซ่อน Dropdown ก่อนบนมือถือ แล้วค่อยโชว์เมื่อคลิก/แตะ */
    .main-nav .custom-dropdown {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        display: none !important; 
        background-color: #fdfaf6;
    }
    
    .main-nav .nav-item:hover .custom-dropdown,
    .main-nav .nav-item:focus-within .custom-dropdown {
        display: block !important; 
    }
}