/* 1. จัดกล่องเข้าสู่ระบบให้อยู่กึ่งกลางหน้าจอแบบกะทัดรัด (ไม่ยืด) */
#loginComp {
    max-width: 350px; /* ลดขนาดจาก 450px เป็น 350px เพื่อให้ฟอร์มดูพอดี ไม่ยืดกว้างเกินไป */
    margin: 40px auto; 
    padding: 30px; 
    background-color: #ffffff; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* 2. บังคับให้โครงสร้างฟอร์มด้านในกว้างเต็มพื้นที่กล่อง (350px) */
#loginComp .loginWndInside,
form.ial-login {
    width: 100% !important;
    margin: 0 auto !important;
}

/* จัดแต่ละแถวให้เป็นระเบียบ */
form.ial-login .gi-elem {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 3. แก้ปัญหาไอคอนซ้อนทับ และปรับแต่งช่องกรอกข้อความ */
form.ial-login .gi-elem input.loginTxt {
    width: 100% !important; 
    padding-left: 55px !important; /* เว้นที่ให้ไอคอน */
    height: 45px !important; 
    box-sizing: border-box !important; 
}

/* 4. ปรับหัวข้อ "เข้าสู่ระบบ" ให้อยู่กึ่งกลาง */
form.ial-login h3.loginH3 {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* 5. ปรับปุ่ม "เข้าสู่ระบบ" ให้พอดีกล่อง */
form.ial-login button.loginBtn {
    width: 100% !important;
    height: 45px !important;
}

/* 6. แก้ไขช่องติ๊ก "จำการเข้าระบบ" ให้อยู่ติดกับข้อความและอยู่กึ่งกลาง */
form.ial-login .ial-check-lbl {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 15px !important;
    gap: 8px; /* ระยะห่างระหว่างช่องติ๊กกับตัวหนังสือ */
}

/* ป้องกันไม่ให้ช่องติ๊กถูกลอยไปซ้ายหรือขวา */
form.ial-login .ial-check-lbl input[type="checkbox"] {
    margin: 0 !important;
    float: none !important;
    position: static !important;
}

/* 7. ปรับลิงก์ "ลืมรหัสผ่าน?" ให้อยู่ตรงกลาง */
form.ial-login .forgetDiv {
    margin-top: 10px;
    text-align: center !important; 
    width: 100%;
}