:root {
    --anim-speed: 0.6s;        /* ปรับความเร็ว: ยิ่งมากยิ่งช้าและนุ่ม */
    --slide-distance: 30px;    /* ปรับระยะการเลื่อน: ยิ่งมากยิ่งดูมีมิติ */
}

/* CSS Reset and Basic Typography */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Kanit', sans-serif; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }

        /* --- Background with Watermark --- */
/* --- พื้นหลังและลายน้ำ (Watermark) --- */
body {
    background: linear-gradient(135deg, #1373e8d5 0%, #d2d5d9 50%, #179c67 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
}

body::before {
    content: "RMUTL TAK";
    position: absolute;
    font-size: 15vw;
    font-weight: 900;
    color: rgba(78, 50, 182, 0.07); /* ลายน้ำโปร่งใส */
    transform: rotate(-25deg);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

/* --- การตั้งค่า Animation --- */
.login-section {
    display: none; 
}

.active-section {
    display: block;
}

/* คลาสสำหรับเรียกใช้ใน JavaScript */
.animate-in {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

        /* --- Main Login Container (The White Box) --- */
        .login-card {
            background-color: #fff;
            padding: 2.5rem 1.5rem; /* rem for relative scaling */
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 450px; /* Max width for desktop */
            margin: 0 auto; /* Center within parent */
            z-index: 10; /* Above watermark */
        }

        /* Responsive padding for card on mobile */
        @media (max-width: 576px) {
            /* .login-card {
                padding: 1.5rem 1rem;
            } */


                .login-card {
        width: 85%;      /* เว้นระยะขอบจอซ้าย-ขวา ให้มากขึ้น (จากเดิม 90% เหลือ 85%) */
        padding: 2rem 1.5rem; /* ปรับ Padding ภายใน บน-ล่าง 2rem / ซ้าย-ขวา 1.5rem */
        border-radius: 20px;
    }
    
    .logo-img {
        max-width: 120px; /* ปรับขนาด Logo ให้เล็กลงพอดีกับจอมือถือ */
        margin-bottom: 1rem;
    }

    .app-title {
        font-size: 1.2rem; /* ปรับขนาดตัวอักษรหัวข้อให้เล็กลงเล็กน้อย */
    }
        }

        /* --- Header & Title --- */
        .card-header { text-align: center; margin-bottom: 2rem; }
        .logo-img { 
            display: block;      /* เปลี่ยนเป็น block เพื่อให้ใช้ margin auto ได้ */
            margin: 0 auto 1.2rem auto; /* จัดกึ่งกลางแนวนอน และเว้นระยะล่าง */
            max-width: 240px;    /* ปรับขนาดให้พอดี (300px อาจจะใหญ่ไปสำหรับมือถือ) */
            height: auto; 
        }

        .app-title {
            text-align: center;  /* แก้ไขจาก text-center เป็น text-align */
            font-size: 1.4rem; 
            font-weight: 500; 
            color: #3d3c3c; 
            line-height: 1.3;
            width: 100%;         /* ประกันว่าจองพื้นที่เต็มเพื่อจัดกลาง */
        }

        /* Responsive title size */
        @media (max-width: 576px) {
            .app-title { font-size: 1.2rem; }
        }

        /* --- Form Inputs Section --- */
        .login-section { display: none; } /* Hide sections by default */
        .active-section { display: block; opacity: 1; } /* Show active section */

        /* Input Group Container (for Icon Positioning) */
        .form-group {
            position: relative;
            margin-bottom: 1.5rem;
            width: 100%;
        }

        /* Labels - Separated and Clear */
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.95rem;
            color: #444;
            font-weight: 500;
            text-align: left;
        }

        .input-wrapper {
            position: relative;
            display: flex;
            align-items: center; /* ทำให้ทุกอย่างในนี้อยู่กึ่งกลางแนวตั้ง */
        }

        .form-input {
            width: 100%;
            height: 55px; /* เพิ่มความสูงให้กดง่ายบนมือถือ */
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 0 15px 0 55px; /* เว้นที่ด้านซ้ายให้ไอคอน */
            font-size: 1rem;
            font-family: 'Kanit', sans-serif;
            background-color: #f9f9f9;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            border-color: #38b349;
            background-color: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            outline: none;
        }

        /* ไอคอนอยู่กึ่งกลางช่องพอดี */
        .input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%); /* เทคนิคทำให้กึ่งกลางแนวตั้งเป๊ะ */
            color: #999;
            font-size: 24px;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #login-new-student .form-input:focus {
            border-color: #007bff; /* Blue for new student */
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
        }

        /* --- Buttons --- */
        .btn-action {
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 500;
            color: white;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.2s;
        }

        .btn-action:hover { opacity: 0.85; }

        .btn-primary { background-color: #38b349; } /* Green for login */
        .btn-secondary { background-color: #007bff; margin-top: 1rem; } /* Blue for switch */
        .btn-outline { background-color: transparent; border: 2px solid #ccc; color: #555; }

        .m-t-15 { margin-top: 1.5rem; }

        /* --- Animations --- */
        .animate-fade {
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ปรับความเร็วอนิเมชั่นภาพรวม */
        .animate__animated {
            animation-duration: 0.5s; /* ปรับให้ไวขึ้นเล็กน้อยเพื่อความฉับไว */
        }

        @keyframes smoothFadeInRight {
            from {
                opacity: 0;
                transform: translateX(var(--slide-distance));
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Custom Animation: Fade Out to Left */
        @keyframes smoothFadeOutLeft {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(calc(var(--slide-distance) * -1));
            }
        }

        .anim-smooth-in {
            animation: smoothFadeInRight var(--anim-speed) ease-out forwards;
        }

        .anim-smooth-out {
            animation: smoothFadeOutLeft var(--anim-speed) ease-in forwards;
        }

        /*
        #togglePassword_new {
            color: #bbb;  สีปกติ (ซีด) 
            transition: color 0.3s ease;  เพิ่มความนุ่มนวลตอนเปลี่ยนสี 
        }

        #togglePassword_new:hover {
            color: #666;
        }
            
        */