/* ========== CSS VARIABLES ========== */
:root {
    /* Typography */
    --wp--preset--font-size--normal: 16px;  /* Base font size for normal text */
    --wp--preset--font-size--huge: 42px;    /* Large heading size */
    --wp--preset--font-size--small: 13px;   /* Small text size */
    --wp--preset--font-size--medium: 20px;  /* Medium text size */
    --wp--preset--font-size--large: 36px;   /* Large text size */
    --wp--preset--font-size--x-large: 42px; /* Extra large text size */

    /* Spacing */
    --wp--preset--spacing--20: 0.44rem;     /* Small spacing */
    --wp--preset--spacing--30: 0.67rem;     /* Medium spacing */
    --wp--preset--spacing--40: 1rem;        /* Base spacing */
    --wp--preset--spacing--50: 1.5rem;      /* Large spacing */
    --wp--preset--spacing--60: 2.25rem;     /* Extra large spacing */
    --wp--preset--spacing--70: 3.38rem;     /* Huge spacing */
    --wp--preset--spacing--80: 5.06rem;     /* Massive spacing */

    /* Shadows */
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);  /* Natural shadow effect */
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);  /* Deep shadow effect */
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);    /* Sharp shadow effect */
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1); /* Outlined shadow effect */
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);      /* Crisp shadow effect */

    /* Font Awesome */
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";     /* Font Awesome brands */
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";      /* Font Awesome regular */
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";        /* Font Awesome solid */

    /* Viewport */
    --vh: 9.28px;  /* Viewport height unit */
}

/* Lost Password Form Styles */
.fong-lost-password-page #page {
    margin: 0;
    padding: 0;
}

/* Container for content - Remove max-width and padding constraints */
.fong-lost-password-page .ast-container {
    max-width: none;
    padding: 0;
}

/* ========== BACKGROUND STYLES ========== */
/* Main background gradient - Full viewport height with gradient */
.bg_login {
    min-height: 100vh;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

/* Cloud background image - Fixed position for parallax effect */
.bg_cloud {
    background-image: url('../images/background_login_2.png');
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
}

/* ========== LAYOUT COMPONENTS ========== */
/* Help center button - Fixed position in top right */
.help_center {
    position: absolute;
    top: 40px;
    right: 20px;
}

/* Main wrapper for layout - Centered content with padding */
.wrapper_layout {
    width: 90%;
    margin: auto;
    display: flex;
    height: 100%;
    justify-content: center;
    padding-top: 30px;
}

/* Content group container - Max width constraint with flex layout */
.group_content {
    width: 100%;
    max-width: 440px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

/* ========== HEADER STYLES ========== */
/* Header container - Centered with vertical spacing */
.header_login {
    margin: 40px 0px 30px 0px;
    text-align: center;
}

/* .content_head {
    margin-top: 30px;
} */

/* Main title - Bold Montserrat font with specific sizing */
.title_head {
    --fa-font-brands: normal 400 1em / 1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em / 1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
    text-align: center;
    box-sizing: border-box;
    font-size: 32px;
    line-height: 48px;
    font-family: 'montserrat-bold', 'Montserrat', sans-serif;
    color: #002748;
    /* margin-bottom: 30px; */
    text-transform: capitalize;
    font-weight: 700;
}

/* Description text - Regular Montserrat with constrained width */
.desc_head {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #497374;
    text-align: center;
    box-sizing: border-box;
    max-width: 360px;
    margin: 0 auto;
    margin-bottom: 210px;
}

/* Container styles */
.container_login {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Form styles */
#user-registration.user-registration {
    font-family: 'Montserrat', sans-serif !important;
    width: 100% !important;
}

/* Form grid layout - Remove default margins and borders */
#user-registration .ur-frontend-form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Form grid padding - Remove default padding */
#user-registration .ur-frontend-form .ur-form-grid {
    padding: 0 !important;
}

/* ========== INPUT STYLES ========== */
/* Input field base styles - Consistent sizing and appearance */
.user-registration-Input {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 440px !important;
    height: 49px !important;
    inline-size: 440px !important;
    block-size: 49px !important;

    /* Typography */
    font-family: Arial !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    color: rgb(108, 112, 116) !important;
    text-align: start !important;

    /* Border */
    border: 1px solid rgb(223, 223, 223) !important;
    border-radius: 30px !important;
    /* border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;

    /* Padding */
    padding: 16px 40px 16px 20px !important;
    padding-top: 16px !important;
    padding-right: 40px !important;
    padding-bottom: 16px !important;
    padding-left: 20px !important;

    /* Margin */
    /* margin: 0 0 30px 0 !important; */
    /* margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 30px !important;
    margin-left: 0px !important; */

    /* Background */
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;

    /* Other */
    outline: none !important;
    cursor: text !important;
    transition: all 0.2s linear !important;
    min-height: 0px !important;
    min-width: 0px !important;
    max-width: none !important;
    max-height: none !important;
    vertical-align: baseline !important;
    white-space-collapse: collapse !important;
    text-transform: none !important;
    overflow-x: clip !important;
    overflow-y: clip !important;

    /* Reset */
    appearance: auto !important;
    text-decoration: none solid rgb(108, 112, 116) !important;
    word-spacing: 0px !important;
    text-indent: 0px !important;
    text-shadow: none !important;
    text-rendering: auto !important;
    -webkit-text-fill-color: rgb(108, 112, 116) !important;
    -webkit-text-stroke-width: 0px !important;
    -webkit-text-stroke-color: rgb(108, 112, 116) !important;
}

/* Input focus state - Highlight with brand color */
.user-registration-Input:focus {
    border-color: #21A7A8 !important;
    box-shadow: 0 0 0 1px rgba(33, 167, 168, 0.2) !important;
}

/* Remove old input styles */
#user-registration .ur-frontend-form input[type="text"],
#user-registration .ur-frontend-form input[type="email"] {
    display: inline-block !important;
}

#user-registration .ur-frontend-form .ur-form-row .ur-form-grid {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 10px !important;
}

#user-registration .ur-frontend-form .ur-form-row .ur-form-grid input {
    position: relative !important;
}

#user-registration .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item {
    display: flex !important;
    margin-bottom: 0 !important;
}

/* Button styles */
.user-registration-form-row:not(.user-registration-form-row--first) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid rgba(0, 195, 197, 0.2);
    border-radius: 36px;
    margin: 0;
}

/* First row reset - Remove default styles */
.user-registration-form-row--first {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Submit button - Brand color with uppercase text */
.user-registration-form-row .user-registration-Button.button {
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
    box-sizing: border-box;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 15px;
    font-family: 'montserrat-bold', 'Montserrat', sans-serif;
    font-weight: 700;
    background-color: #21A7A8;
    padding: 17px 0;
    width: 100%;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

/* Button hover state - Darker shade of brand color */
.user-registration-form-row .user-registration-Button.button:hover {
    background-color: #1c9596;
    color: #FFFFFF;
}

/* Remove old button styles */
.group_button,
.btn_child,
.ur-submit-button {
    display: none !important;
}

/* Back to login link */
.ur-login-link {
    text-align: center;
    margin-top: 24px;
}

.ur-login-link a {
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: none;
}

.ur-login-link a:hover {
    text-decoration: underline;
}

/* Register link styles */
._register {
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

._register span {
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    color: #323334;
    font-size: 15px;
}

._register a {
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    color: #21A7A8;
    font-size: 14px;
    text-decoration: none;
}

._register a:hover {
    text-decoration: underline;
}

/* Responsive styles */
@media screen and (max-width: 1025px) and (min-width:461px) {
    .bg_cloud {
        background-position: center;
    }
}

/* Mobile devices - Adjust spacing and widths */
@media screen and (max-width: 460px) {
    /* .bg_cloud {
        background-position: 100% 120px;
    } */

    .header_login {
        margin: 100px 0px 30px 0px;
    }

    .wrapper_layout {
        padding: 16px;
    }

    .content_head {
        margin-top: 20px;
    }

    #user_login {
        width: 100% !important;
    }
}

/* Hide scrollbar but keep functionality */
html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}


/*
<div class="ur-message-container ">
	<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
	<path d="M12.5 22.4995C18.0228 22.4995 22.5 18.0224 22.5 12.4995C22.5 6.97666 18.0228 2.49951 12.5 2.49951C6.97715 2.49951 2.5 6.97666 2.5 12.4995C2.5 18.0224 6.97715 22.4995 12.5 22.4995Z" stroke="#49C85F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
	<path d="M9.5 12.5005L11.5 14.5005L15.5 10.5005" stroke="#49C85F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

	<div class="user-registration-message">Password reset email has been sent.</div>

		<div class="ur-message-content">
			A password reset email has been sent to the email address on file for your account, but may take several minutes to show up in your inbox. Please wait at least 10 minutes before attempting another reset.	</div>

                        <div class="_register">
                            <span>Bạn đã có tài khoản?</span>
                            <a href="https://tiengduc2fong.com/dang-nhap-dang-ky-2025-01-05/">
                                Đăng nhập
                            </a>
                        </div>
                    </div>
*/



/* Styling cho thông báo reset mật khẩu */
.ur-message-container {
    padding: 20px;
    text-align: center;
}

.ur-message-container svg {
    display: block;
    margin: 0 auto 15px;
}

.user-registration-message {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.ur-message-content {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #666;
}

/* Khoảng cách cho phần đăng nhập */
.ur-message-container ._register {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}