@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap');
     
   body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; background-color: #f4f4f4; margin: 0; font-family: Arial, sans-serif;}
        .auth-page-container { background-color: white; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; max-width: 480px; /* Rộng hơn chút cho nhiều trường */ text-align: center; }
        .auth-page-container h1 { margin-bottom: 25px; color: #333; }
        .form-group { margin-bottom: 15px; text-align: left; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input[type="email"], .form-group input[type="password"], 
        .form-group input[type="text"], .form-group input[type="tel"]  { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        .form-group button { width: 100%; padding: 12px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
        .form-group button:hover { background-color: #218838; }
        .form-group button[type="button"] { background-color: #6c757d; margin-top: 10px; } 
        .form-group button[type="button"]:hover { background-color: #5a6268; }
        #check-phone-button { width: auto; padding: 10px 15px; background-color: #17a2b8; font-size:0.9em; } 
        #check-phone-button:hover { background-color: #138496; }
        .error-message { color: red; font-size: 0.9em; margin-top: 5px; min-height: 1.2em;}
        .checkbox-group-label {font-weight: bold; margin-bottom: 8px; display: block;}
        .checkbox-group { max-height: 120px; overflow-y: auto; border: 1px solid #eee; padding: 10px; border-radius: 4px; margin-bottom: 10px; text-align: left;}
        .checkbox-group div { margin-bottom: 5px; }
        .checkbox-group input[type="checkbox"] { margin-right: 8px; }
        .terms-group { display: flex; align-items: center; margin-top: 15px; }
        .terms-group input[type="checkbox"] { width: auto; margin-right: 8px; }
        .terms-group label { font-weight: normal; margin-bottom: 0; font-size:0.9em; }
        .extra-links { margin-top: 20px; font-size: 0.9em; }
        .extra-links a { color: #007bff; text-decoration: none; }
        .password-wrapper {
    position: relative;
    width: 100%;
}

/* Style cho input bên trong wrapper (đảm bảo nó vẫn full width) */
.password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Chừa chỗ cho icon con mắt */
    box-sizing: border-box; /* Đảm bảo padding không làm vỡ khung */
}

/* Style cho icon con mắt */
.toggle-password {
    position: absolute;
    right: 15px; /* Cách lề phải */
    top: 50%;
    transform: translateY(-50%); /* Căn giữa theo chiều dọc */
    cursor: pointer;
    color: #666; /* Màu xám nhẹ */
    z-index: 2;
}

.toggle-password:hover {
    color: #000; /* Đổi màu khi di chuột vào */
}