.account-pages {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(15, 114, 58, 0.85) 0%, rgba(15, 114, 58, 0.65) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'><defs><pattern id='boxes' x='0' y='0' width='160' height='120' patternUnits='userSpaceOnUse'><rect x='10' y='10' width='60' height='50' fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='0.35'/><rect x='20' y='20' width='40' height='30' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/><rect x='90' y='40' width='60' height='50' fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='0.35'/><rect x='100' y='50' width='40' height='30' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/><line x1='10' y1='85' x2='150' y2='85' stroke='%23ffffff' stroke-width='0.8' opacity='0.2'/></pattern></defs><rect width='1200' height='800' fill='%230F723A'/><rect width='1200' height='800' fill='url(%23boxes)'/></svg>");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.account-pages-inner {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.login-wrap {
    width: 100%;
    margin: 0 auto;
}

.login-wrap a span img {
    width: 170px;
    height: auto;
    max-width: 100%;
}

.login-wrap .login-title {
    margin-top: 16px;
    margin-bottom: 4px;
    color: #0F723A;
    font-weight: 700;
    font-size: 22px;
}

.login-wrap .login-subtitle {
    margin: 0;
    color: #646464;
    font-size: 14px;
}

.login-wrap .eye_icon {
    position: absolute;
    right: 15px;
    top: 43px;
    width: 24px;
    height: 24px;
    /* Biểu tượng vẽ thẳng vào CSS (data URI) thay vì trỏ tới assets/landing-page — thư mục đó
       đã bị gỡ ở a4da1191 (asset của một công ty khác), nên mỗi lần mở trang đăng nhập là ba
       lượt 404 và nút hiện/ẩn mật khẩu vô hình dù vẫn bấm được. Nhúng thẳng thì không còn
       file để mất, không thêm lượt tải, và đổi màu chỉ cần sửa một chỗ. */
    background: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"%20viewBox="0%200%2024%2024"%20fill="none"%20stroke="%23646464"%20stroke-width="1.8"%20stroke-linecap="round"%20stroke-linejoin="round"><path%20d="M1.8%2012S5.4%205.4%2012%205.4%2022.2%2012%2022.2%2012%2018.6%2018.6%2012%2018.6%201.8%2012%201.8%2012Z"/><circle%20cx="12"%20cy="12"%20r="3"/></svg>") no-repeat left center;
    cursor: pointer;
}

.login-wrap .eye_icon.active {
    background: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"%20viewBox="0%200%2024%2024"%20fill="none"%20stroke="%23646464"%20stroke-width="1.8"%20stroke-linecap="round"%20stroke-linejoin="round"><path%20d="M9.9%205.6A9.6%209.6%200%200%201%2012%205.4c6.6%200%2010.2%206.6%2010.2%206.6a17.7%2017.7%200%200%201-2.7%203.7M6.1%206.1A17.6%2017.6%200%200%200%201.8%2012S5.4%2018.6%2012%2018.6a9.7%209.7%200%200%200%204-.8"/><path%20d="m9.9%209.9a3%203%200%200%200%204.2%204.2"/><path%20d="M2.4%202.4l19.2%2019.2"/></svg>") no-repeat left center;
}

.login-wrap .field {
    position: relative;
    margin-bottom: 16px;
}

.login-wrap label {
    margin-bottom: 8px;
    color: #141414;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.login-wrap input {
    height: 52px;
    padding: 0 56px;
    border: 1px solid #E1E2E3;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}

.login-wrap input:focus {
    border-color: #0F723A;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 114, 58, 0.15);
}

.login-wrap .field-Email {
    position: relative;
}

.login-wrap .field-Email:before {
    content: "";
    position: absolute;
    left: 16px;
    width: 24px;
    height: 24px;
    top: 14px;
    background: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"%20viewBox="0%200%2024%2024"%20fill="none"%20stroke="%23646464"%20stroke-width="1.8"%20stroke-linecap="round"%20stroke-linejoin="round"><rect%20x="2.6"%20y="4.8"%20width="18.8"%20height="14.4"%20rx="2.4"/><path%20d="m3.4%206.6%208.6%206%208.6-6"/></svg>") no-repeat;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    box-shadow: 0 0 0 50px white inset;
}

.login-wrap #password {
    background: #fff url("data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"%20viewBox="0%200%2024%2024"%20fill="none"%20stroke="%23646464"%20stroke-width="1.8"%20stroke-linecap="round"%20stroke-linejoin="round"><rect%20x="4.4"%20y="10.2"%20width="15.2"%20height="10.4"%20rx="2.4"/><path%20d="M8%2010.2V7.6a4%204%200%200%201%208%200v2.6"/></svg>") no-repeat left 16px center;
}

.login-wrap .forgot_submit {
    margin-top: 24px;
}

.login-wrap .forgot_submit button {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid #0F723A;
    border-radius: 8px;
    outline: none;
    background-color: #0F723A;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.login-wrap .forgot_submit button:hover {
    background-color: #0a5a2d;
    border-color: #0a5a2d;
}

@media (max-width: 640px) {
    .login-card {
        padding: 32px 24px;
    }
}