body { background-color: #f4f6f9; font-family: 'Sarabun', sans-serif; }

/* การตั้งค่าสีพื้นหลังหลักของเว็บไซต์ */
.bg-theme-light {
    background-color: #ecf8fb;
}

/* แถบเมนูด้านบน */
.custom-navbar {
    background-color: #ffffe0; /* lightyellow #ffffe0 */
    padding: 0.5rem 1rem;
}

.bottom-border {
    border-bottom: 2px solid #5555ff;
}

/* แถบข้อมูลติดต่อ ข้างบน Footer */
.contact-bar {
    background-color: #219848;   /* #00a000 */
    color: #eeeeee;
}

/* ส่วน Footer สุดท้าย */
.custom-footer {
    background-color: #333333;
    color: #ffffff;
}

/* --------------------------------------
   ลูกเล่น (Hover Effects) สำหรับปุ่มและรูปภาพ 
--------------------------------------- */

/* เอฟเฟกต์สำหรับปุ่มเมนูทั่วไป */
.hover-effect {
    transition: all 0.3s ease-in-out;
}
.hover-effect:hover {
    background-color: #5555ff !important;
    color: white !important;
    transform: translateY(-2px); /* ยกปุ่มขึ้นเล็กน้อย */
}

/* เอฟเฟกต์สำหรับรูปภาพปุ่มกด (เช่น ปุ่มสมัครเรียน) */
.img-btn-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* ทำให้มุมรูปมนขึ้นนิดนึง ดูทันสมัย */
}
.img-btn-hover:hover {
    transform: scale(1.05); /* ขยายรูป 5% เวลาชี้ */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* เพิ่มเงา */
}

/* ระยะห่างสำหรับเนื้อหาหลัก เพื่อไม่ให้โดน Navbar บัง */
#page-content {
    margin-top: 10px; /* ชดเชยความสูงของ fixed-top navbar */
    min-height: 60vh; /* บังคับให้หน้ายาวพอที่จะดัน footer ลงไปด้านล่าง */
}