/*
*** โค้ด CSS สำหรับโลโก้ลอย ***
*/

#floating-logo {
    /*
    กำหนดให้ตำแหน่ง "ลอย" อยู่กับที่ แม้จะเลื่อนหน้าเว็บ
    */
    position: fixed;

    /*
    จัดตำแหน่งไปที่มุมขวา (20px จากขอบขวา)
    */
    left: 20px;

    /*
    จัดตำแหน่งไปที่มุมล่าง (20px จากขอบล่าง)
    */
    bottom: 20px;

    /*
    ทำให้โลโก้อยู่ด้านบนสุดขององค์ประกอบอื่นๆ (เลขยิ่งมาก ยิ่งอยู่บน)
    */
    z-index: 1000;

    /*
    เปลี่ยนเคอร์เซอร์ให้เป็นรูปมือ เมื่อชี้ไปที่โลโก้
    */
    cursor: pointer;
}

.logo-img {
    /*
    กำหนดขนาดของรูปภาพ
    */
    width: 60px; /* หรือขนาดที่คุณต้องการ เช่น 80px */
    height: 60px;

    /*
    ทำให้รูปภาพเป็นทรงกลม (50% คือทรงกลมสมบูรณ์)
    */
    border-radius: 50%;

    /*
    เพิ่มเงาเล็กน้อย เพื่อให้ดู 'ลอย' ขึ้นมา
    */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    /*
    เพิ่มการเปลี่ยนแปลงอย่างนุ่มนวลเมื่อมีการโต้ตอบ
    */
    transition: transform 0.2s;
}

/*
เมื่อนำเมาส์ไปชี้ที่โลโก้ (Hover)
*/
.logo-img:hover {
    /*
    ทำให้โลโก้ขยายใหญ่ขึ้นเล็กน้อย
    */
    transform: scale(1.1);
}

/*
*** โค้ด CSS ทั่วไป (ไม่บังคับ แต่เพิ่มความชัดเจน) ***
*/
body {
    margin: 0;
    font-family: Arial, sans-serif;
    padding-bottom: 1000px; /* เพิ่มพื้นที่ให้เลื่อนได้เพื่อทดสอบโลโก้ลอย */
}

header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}