/**
 * VNT39 Member — logged-out My Account (login / register / OTP). Scoped under .vnt39m. Tokens follow the shop: deep red, white, light grey.
 */
.vnt39m { --m-red: #9d0718; --m-red2: #bd1026; --m-ink: #1c2532; --m-muted: #667085; --m-line: #e8eaf0; --m-tint: #fdecee; --m-ok: #157347; }
.vnt39m, .vnt39m * { box-sizing: border-box; }

.vnt39m .vnt39m-panel { background: transparent; border: 0; padding: 0; }
.vnt39m .woocommerce-form-row input.input-text, .vnt39m .woocommerce-form-row input[type="password"], .vnt39m .woocommerce-form-row input[type="email"], .vnt39m .woocommerce-form-row input[type="text"] { width: 100%; max-width: 100%; }
.vnt39m h2 { margin: 0 0 8px; color: var(--m-ink); font-weight: 800; letter-spacing: 0; }
.vnt39m .vnt39m-lead { margin: 0 0 16px; color: var(--m-muted); font-size: 14.5px; line-height: 1.5; }
.vnt39m label { color: var(--m-ink); font-weight: 600; }
.vnt39m .input-text, .vnt39m input[type="text"], .vnt39m input[type="email"], .vnt39m input[type="password"] {
	min-height: 46px; border: 1px solid #d5d9e2; border-radius: 10px; background: #fff; color: var(--m-ink); box-shadow: none;
}
.vnt39m .input-text:focus, .vnt39m input:focus { border-color: #d7a1a9; box-shadow: 0 0 0 3px #9d071814; outline: 0; }
.vnt39m .button, .vnt39m button.button { min-height: 46px; border-radius: 10px; background: var(--m-red); border-color: var(--m-red); color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.vnt39m .button:hover { background: var(--m-red2); border-color: var(--m-red2); color: #fff; }
.vnt39m .vnt39-honeypot, .vnt39m .vnt39m-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* the theme wraps password inputs (show / hide button): keep them as wide as the other fields */
.vnt39m span.password-input { display: block; width: 100%; }
.vnt39m span.password-input input { width: 100%; }

/* live password rules */
.vnt39m .vnt39m-rules { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; color: var(--m-muted); }
.vnt39m .vnt39m-rules li { margin: 0; padding-left: 20px; position: relative; }
.vnt39m .vnt39m-rules li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 10px; border: 1.5px solid #c3c8d4; border-radius: 50%; }
.vnt39m .vnt39m-rules li.is-ok { color: var(--m-ok); }
.vnt39m .vnt39m-rules li.is-ok::before { background: var(--m-ok); border-color: var(--m-ok); }

/* OTP step */
.vnt39m--otp { display: flex; justify-content: center; padding: 8px 0 24px; }
.vnt39m-otp-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--m-line); border-radius: 18px; padding: 28px 28px 22px; box-shadow: 0 10px 30px #1018280d; text-align: center; }
.vnt39m-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--m-tint); color: var(--m-red); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vnt39m-otp-card h2 { margin: 0 0 8px; font-size: 26px; }
.vnt39m-flash { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #e8f5ee; color: var(--m-ok); font-size: 14px; font-weight: 600; }
.vnt39m-otp-form { margin: 18px 0 8px; }
.vnt39m .vnt39m-otp-input { text-align: center; font-size: 30px; line-height: 1.2; letter-spacing: .5em; padding-left: .5em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; min-height: 60px; }
.vnt39m-submit { width: 100%; }
.vnt39m-otp-actions { display: flex; justify-content: center; gap: 22px; margin-top: 6px; }
.vnt39m-inline-form { margin: 0; }
.vnt39m button.vnt39m-link { min-height: 0; padding: 6px 2px; border: 0; background: none; color: var(--m-red); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; box-shadow: none; }
.vnt39m button.vnt39m-link:disabled { color: #98a2b3; text-decoration: none; cursor: default; }
.vnt39m .vnt39m-hint { margin: 10px 0 0; color: var(--m-muted); font-size: 13px; }

@media (max-width: 549px) {
	.vnt39m .vnt39m-rules { grid-template-columns: 1fr; }
	.vnt39m-otp-card { padding: 22px 16px 18px; }
	.vnt39m .vnt39m-otp-input { font-size: 26px; letter-spacing: .4em; }
}
@media (prefers-reduced-motion: reduce) { .vnt39m * { transition: none !important; } }

/* signed-in "Xác minh email" page */
.vnt39m--verify { display: block; padding: 0 0 24px; }
.vnt39m-verify-card { margin: 0; max-width: 520px; text-align: left; }
.vnt39m-verify-card h2 { font-size: 24px; }
.vnt39m-verify-card .vnt39m-otp-actions { justify-content: flex-start; }
.vnt39m-badge { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: #fff4e5; color: #9a5b00; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vnt39m-badge--ok { background: #e8f5ee; color: var(--m-ok); }
.vnt39m-verify-card a.button { display: inline-block; }

/* "email not verified" prompt (Orders page + dashboard) */
.vnt39m-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #f3c6cc; border-radius: 12px; background: var(--m-tint); }
.vnt39m-prompt p { margin: 0; flex: 1 1 260px; color: var(--m-ink); font-size: 14.5px; line-height: 1.5; }
.vnt39m-prompt strong { display: block; color: var(--m-red); }
.vnt39m-prompt span { display: block; color: var(--m-muted); }
.vnt39m-prompt a.button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; white-space: nowrap; }
@media (max-width: 549px) { .vnt39m-prompt a.button { width: 100%; } }

/* 0.8.2 — submit feedback (member.js): the clicked button shows the step in progress; other buttons of the form wait */
.vnt39m form[aria-busy="true"] button[disabled],
form.vnt39m-register[aria-busy="true"] button[disabled],
form.woocommerce-form-login[aria-busy="true"] button[disabled],
form.woocommerce-ResetPassword[aria-busy="true"] button[disabled] { cursor: progress; opacity: .85; }
button.is-busy { position: relative; }
button.is-busy::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	vertical-align: -.15em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vnt39m-spin .8s linear infinite;
}
@keyframes vnt39m-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-busy::before { animation: none; } }
.vnt39m-busy-note { margin: 10px 0 0; color: #475467; font-size: 14px; line-height: 1.45; }

/* 0.8.5 — login | register layout (account page AND header popup): each column is a vertical flex box, the button row sits at the
 * bottom of its column (margin-top:auto), so «Đăng nhập» and «Nhận mã xác minh» line up on one row on desktop whatever the content
 * above them; stacked columns (≤849px) keep each button at the end of its own form. Busy / error notes come after the button. */
.vnt39m #customer_login > .col { display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 44px) clamp(18px, 2.6vw, 44px) !important; } /* !important: Flatsome's .pb-0 removed the space under the buttons */
.vnt39m #customer_login .vnt39m-panel { display: flex; flex: 1 1 auto; flex-direction: column; }
.vnt39m #customer_login .vnt39m-panel > form { display: flex; flex: 1 1 auto; flex-direction: column; }
.vnt39m #customer_login form .form-row { margin-bottom: 13px; }
.vnt39m #customer_login form label { margin-bottom: 5px; }
.vnt39m #customer_login h2,
.vnt39m #customer_login .vnt39-hx--h2 { margin-bottom: 16px; }
.vnt39m #customer_login .vnt39m-lead { margin-bottom: 14px; }
.vnt39m #customer_login .mo-openid-app-icons { margin: 4px 0 14px; }
.vnt39m #customer_login .mo-openid-app-icons::before { margin-bottom: 10px; }
.vnt39m #customer_login .vnt39m-rules { margin: 0 0 14px; }
.vnt39m #customer_login form .vnt39m-actions { margin: auto 0 0; padding-top: 4px; }
.vnt39m #customer_login .vnt39m-actions button { width: 100%; min-height: 48px; margin: 0; border-radius: 8px; }
.vnt39m #customer_login .vnt39m-login-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 14px; font-size: .9rem; }
.vnt39m #customer_login .vnt39m-login-meta .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 600; }
.vnt39m #customer_login .vnt39m-login-meta .woocommerce-form-login__rememberme input { margin: 0; }
.vnt39m #customer_login .vnt39m-login-meta .vnt39m-lost { margin: 0 0 0 auto; }
.vnt39m #customer_login .vnt39m-login-meta .vnt39m-lost a { color: var(--m-red); font-weight: 650; white-space: nowrap; }
.vnt39m #customer_login .vnt39m-login-meta .woocommerce-form-login__rememberme span { white-space: nowrap; }
.vnt39m #customer_login form .vnt39m-busy-note { margin: auto 0 10px; } /* takes the free space above the button, never covers it */
.vnt39m #customer_login form .vnt39m-busy-note + .vnt39m-actions { margin-top: 0; }
@media (max-width: 549px) {
	.vnt39m #customer_login .vnt39m-login-meta { gap: 6px 8px; font-size: .84rem; } /* «Ghi nhớ đăng nhập | Quên mật khẩu?» on one line down to 360px */
	.vnt39m #customer_login .vnt39m-login-meta .woocommerce-form-login__rememberme { font-size: inherit; }
}
@media (max-width: 380px) {
	.vnt39m #customer_login > .col { padding-right: 12px !important; padding-left: 12px !important; }
	.vnt39m #customer_login .vnt39m-login-meta { gap: 6px; font-size: .8rem; }
}