/* =========================================
 * Pages: login.php
 * Author: Thanh ??
 * Note: Auto-extracted from inline <style>
 * ========================================= */
:root {
            --primary: #1a73e8;
            --bg-color: #f0f2f5;
            --text-main: #202124;
            --text-sub: #5f6368;
            --border: #dadce0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
        
        body {
            background-color: var(--bg-color);
            display: flex; align-items: center; justify-content: center;
            height: 100vh;
        }

        .auth-card {
            background: #fff;
            width: 100%;
            max-width: 400px;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            margin: 0 15px; /* Giữ khoảng cách không dính mép màn hình */
        }

        .logo {
            font-size: 24px; font-weight: 700; color: var(--text-main);
            margin-bottom: 8px; display: inline-flex; align-items: center; text-decoration: none;
        }
        .logo img { width: 32px; height: 32px; margin-right: 10px; object-fit: contain; }
        
        .sub-title { color: var(--text-sub); font-size: 14px; margin-bottom: 30px; }

        .form-group { margin-bottom: 20px; text-align: left; }
        .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px; color: var(--text-main); }
        
        .input-wrapper { position: relative; }
        
        .input-wrapper i {
            position: absolute; top: 50%; transform: translateY(-50%);
            color: var(--text-sub); font-size: 18px;
        }
        .input-wrapper i.icon-left {
            left: 12px;
        }
        .input-wrapper i.icon-right {
            right: 12px; cursor: pointer; transition: 0.2s;
        }
        .input-wrapper i.icon-right:hover {
            color: var(--text-main);
        }
        
        .form-input {
            width: 100%; padding: 12px 40px 12px 40px;
            border: 1px solid var(--border); border-radius: 6px;
            font-size: 14px; outline: none; transition: 0.2s;
        }
        .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,0.1); }

        .btn-submit {
            width: 100%; padding: 12px; border: none; border-radius: 6px;
            background: var(--primary); color: #fff; font-weight: 600; font-size: 14px;
            cursor: pointer; transition: 0.2s;
        }
        .btn-submit:hover { background: #1557b0; }

        .divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 20px 0;
            color: var(--text-sub);
            font-size: 13px;
        }
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid var(--border);
        }
        .divider:not(:empty)::before {
            margin-right: .5em;
        }
        .divider:not(:empty)::after {
            margin-left: .5em;
        }

        .btn-google {
            display: flex; align-items: center; justify-content: center;
            width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px;
            background: #fff; color: var(--text-main); font-weight: 500; font-size: 14px;
            text-decoration: none; cursor: pointer; transition: 0.2s; margin-bottom: 20px;
        }
        .btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-color: #d2d2d2; }
        .btn-google img { width: 18px; height: 18px; margin-right: 10px; }

        .auth-footer { margin-top: 10px; font-size: 13px; color: var(--text-sub); }
        .auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
        .auth-footer a:hover { text-decoration: underline; }

        .alert-error {
            background: #fce8e6; color: #d93025; padding: 10px;
            border-radius: 6px; font-size: 13px; margin-bottom: 20px;
            text-align: left; border: 1px solid #fad2cf;
        }

        /* Tối ưu riêng cho màn hình Mobile */
        @media (max-width: 480px) {
            .auth-card {
                padding: 30px 20px; /* Thu nhỏ khoảng cách viền trong */
            }
            .logo {
                font-size: 22px;
            }
            .sub-title {
                margin-bottom: 20px;
            }
            .form-input {
                padding: 10px 35px 10px 35px; /* Giảm độ béo của input */
            }
            .btn-submit, .btn-google {
                padding: 10px;
            }
        }