/* ข้อ 3: ซ่อนแถบเลื่อน (Scrollbar) ทุกหน้าจอ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
    -ms-overflow-style: none;  /* สำหรับ IE และ Edge */
    scrollbar-width: none;  /* สำหรับ Firefox */
}
*::-webkit-scrollbar {
    display: none; /* สำหรับ Chrome, Safari และ Opera */
}

body { display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background-color: #ffffff; }

.slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.slide { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; }
.bg-login1 { background-image: url('/images/login1.jpg'); }
.bg-login2 { background-image: url('/images/login2.jpg'); }
.bg-login3 { background-image: url('/images/login3.jpg'); }
.bg-login4 { background-image: url('/images/login4.jpg'); }
.bg-login5 { background-image: url('/images/login5.jpg'); }

.login-container { width: 100%; max-width: 420px; padding: 20px; z-index: 1; }
.login-box { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 40px 35px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 51, 102, 0.2); border-top: 6px solid #003366; border-bottom: 2px solid #3399ff; }
.logo-container { text-align: center; margin-bottom: 20px; }
.logo { 
    width: 130px; /* ขยายจากเดิม 80px */
    height: 130px; 
    object-fit: contain; 
    border-radius: 25px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}h2 { text-align: center; margin-bottom: 25px; font-size: 18px; font-weight: bold; letter-spacing: 1px; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .icon { position: absolute; left: 15px; color: #003366; font-size: 16px; }
.input-with-icon input { width: 100%; padding: 12px 12px 12px 40px; border: 1px solid #cccccc; border-radius: 6px; outline: none; font-size: 14px; background-color: #ffffff; transition: all 0.3s; }
.uppercase-input { text-transform: uppercase; }
.input-with-icon input:focus { border-color: #3399ff; box-shadow: 0 0 5px rgba(51, 153, 255, 0.3); }

.btn-primary { width: 100%; padding: 12px; background-color: #003366; color: #ffffff !important; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }
.btn-primary:hover { background-color: #002244; box-shadow: 0 5px 15px rgba(0,51,102,0.3); }
.divider { border: none; border-top: 1px solid #e0e0e0; margin: 25px 0; }

.btn-line { width: 100%; padding: 12px; background-color: #06C755; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px; color: #000000; }
.btn-line i { color: #000000; font-size: 18px; }
.btn-line:hover { background-color: #05b34c; box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3); }

/* Toast */
.toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.toast { background-color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: slideInRight 0.3s forwards; }
.toast i { font-size: 18px; }
.toast-info { border-left: 5px solid #3399ff; } .toast-info i { color: #3399ff; }
.toast-error { border-left: 5px solid #ff4d4d; } .toast-error i { color: #ff4d4d; }
.toast-warning { border-left: 5px solid #ffcc00; } .toast-warning i { color: #ffcc00; }
.toast-success { border-left: 5px solid #06C755; } .toast-success i { color: #06C755; }
.toast.hide { animation: fadeOut 0.3s forwards; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
/* ข้อ 6, 8: ปรับขนาด UI ให้เหมาะสมกับการใช้งานบนมือถือ */
@media screen and (max-width: 480px) {
    .login-box {
        padding: 30px 20px; /* ลด Padding บนมือถือไม่ให้อึดอัด */
    }
    .input-with-icon input {
        padding: 14px 14px 14px 40px; /* เพิ่มพื้นที่กดให้ง่ายขึ้นบนจอมือถือ */
        font-size: 16px; /* ป้องกัน iOS ซูมอัตโนมัติเวลาพิมพ์ */
    }
    .btn-primary, .btn-line {
        padding: 14px; /* เพิ่มขนาดปุ่มให้กดง่ายด้วยนิ้ว */
    }
}