/* ตกแต่งเนื้อหาทั่วไป (เพื่อให้หน้าเว็บมีระยะเลื่อนลงมาได้) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
}
.content {
    max-width: 800px;
    margin: 0 auto;
}
.spacer {
    height: 1500px; /* สร้างพื้นที่ว่างเพื่อให้หน้าเว็บยาวและเลื่อนขึ้นลงได้ */
    background: linear-gradient(to bottom, #eee, #ccc);
    margin: 20px 0;
}

/* --- ส่วนสำคัญ: โค้ดล็อกรูปภาพ LINE ให้อยู่กับที่ --- */
.line-fixed-btn {
    position: fixed;    /* ล็อกตำแหน่งให้อยู่กับที่บนหน้าจอ ไม่เลื่อนตามเนื้อหา */
     top: 120px;       /* ห่างจากขอบล่างของหน้าจอ 30 พิกเซล */
     left: 10px;        /* ห่างจากขอบขวาของหน้าจอ 30 พิกเซล */
    width: 60px;        /* กำหนดความกว้างของปุ่ม */
    height: 60px;       /* กำหนดความสูงของปุ่ม */
    z-index: 9999;      /* อยู่บนเลเยอร์สูงสุด เพื่อไม่ให้โดนเนื้อหาอื่นบัง */
    transition: transform 0.2s ease; /* ใส่เอฟเฟกต์นุ่มนวลเวลาเอาเมาส์ไปชี้ */
}

/* ตกแต่งรูปภาพภายในปุ่ม */
.line-fixed-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* ทำรูปให้เป็นวงกลม */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* ใส่เงาด้านหลังรูปภาพให้ดูลอยเด่น */
}

/* เอฟเฟกต์ขยับเล็กน้อยเวลาเมาส์ชี้ (Hover) */
.line-fixed-btn:hover {
    transform: scale(1.1); /* ขยายขนาดขึ้น 10% ให้ปุ่มดูมีมิติเพิ่มขึ้น */
}