/* CAP NHAT: header cua ban nen DAM (xanh navy), nut/chu mau xanh la #2F5233
   cu bi chim vao nen, gan nhu vo hinh. Doi sang mau TRANG (voi vien trang
   mo) de noi bat tren nen dam, giong tinh than cac link menu khac trong
   header dang la mau trang/sang. */
.hp-header-login-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: #fff;
    border-radius: 20px;
    padding: 6px 18px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .hp-header-login-btn:hover {
        background: #fff;
        color: #173A63; /* KIEM TRA LAI: doi cho khop dung mau nen header that su cua ban neu can */
    }

.hp-header-user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
    /* Nut Dang xuat rieng (hien KHONG con dung trong header theo yeu cau cua
   ban, nhung giu lai style o day phong khi lam menu "Tài khoản" sau nay). */
    .hp-header-user-menu .hp-logout-btn {
        background: none;
        border: none;
        color: #ffd7d3;
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
    }

.hp-auth-modal .modal-content {
    border-radius: 14px;
    border: none;
    padding: 8px;
}

.hp-auth-modal .hp-auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.hp-auth-body {
    padding: 28px 30px 22px;
}

.hp-auth-title {
    font-weight: 700;
    color: #2F5233;
    margin-bottom: 4px;
    text-align: center;
}

.hp-auth-sub {
    font-size: 13px;
    color: #6b6b6b;
    text-align: center;
    margin-bottom: 16px;
}

.hp-auth-alert {
    display: none;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.hp-auth-alert-error {
    background: #fdecea;
    color: #b3261e;
}

.hp-auth-alert-success {
    background: #e8f5e9;
    color: #1b6b2c;
}

.hp-auth-field {
    margin-bottom: 14px;
}

    .hp-auth-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #333;
    }

.hp-auth-password-wrap {
    position: relative;
}

    .hp-auth-password-wrap input {
        padding-right: 38px;
    }

.hp-auth-toggle-pwd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
}

.hp-auth-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    color: #555;
    cursor: pointer;
}

.hp-auth-link {
    color: #2F5233;
    font-weight: 600;
    text-decoration: none;
}

    .hp-auth-link:hover {
        text-decoration: underline;
    }

.hp-auth-submit {
    width: 100%;
    background: #2F5233;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 11px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s;
}

    .hp-auth-submit:hover {
        background: #244127;
    }

.hp-auth-footer {
    text-align: center;
    font-size: 13px;
    color: #555;
    margin-top: 16px;
}

/* ---- Responsive: modal sat 2 canh man hinh tren dien thoai nho ---- */
@media (max-width: 575.98px) {
    .hp-auth-body {
        padding: 22px 18px 18px;
    }
}