/* ในไฟล์ style.css */

/* *** 1. การล้างค่า Margin/Padding เริ่มต้นให้สมบูรณ์ *** */
html, body {
    margin: 0;
    padding: 0;
}

body {
    /* 1. เปิดใช้งาน Flexbox (ยังคงไว้สำหรับพื้นหลัง) */
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
    /* margin: 0; ถูกย้ายไปที่ html, body ด้านบน */
    background-color: white; 
    background-image: url('https://files.catbox.moe/4al8sh.png');
    background-size: cover; 
    background-position: center;
}

h1 {
    background-color: rgba(247, 24, 161, 0.851); 
    padding: 10px 20px; 
    border-radius: 5px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    color: #333; 
    font-size: 3em; 
    margin-bottom: 30px; 
}

#fixed-image {
  /* *** 2. การแก้ไขที่สำคัญที่สุดสำหรับช่องว่างด้านล่าง: เปลี่ยนจาก inline เป็น block *** */
  display: block; /* ลบช่องว่างที่เกิดจากพฤติกรรมขององค์ประกอบ inline */
  max-width: 500px; 
  height: auto; 
}

/* ------------------------------------------------------------------- */
/* *** ส่วนสำคัญ: ทำให้เนื้อหาติดกับขอบล่างสุด (Fixed Position) *** */
#centered-content {
    /* 1. การติดอยู่กับที่ (Fixed Position) */
    position: fixed; 
    
    /* 2. ติดที่ขอบล่างของหน้าต่างเบราว์เซอร์ (*** ไม่มีช่องว่าง ***) */
    bottom: 0; 
    
    /* 3. จัดกึ่งกลางแนวนอน */
    left: 50%; 
    transform: translateX(-50%); 
    
    /* การตั้งค่าเพิ่มเติม */
    z-index: 1000;
    max-width: 500px; 
    text-align: center; 
    width: 100%; 
    box-sizing: border-box; 
    padding: 0 15px; /* padding: 0 สำหรับด้านบน/ล่าง */
}
/* ------------------------------------------------------------------- */

/* *** Media Query สำหรับอุปกรณ์มือถือและแท็บเล็ต (หน้าจอไม่เกิน 768px) *** */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8em; 
        margin-bottom: 20px;
        padding: 8px 15px;
    }

    #centered-content {
        max-width: 90%; 
    }
    
    #fixed-image {
        width: 100%; 
        max-width: 400px; 
    }
}