/* ============================================================
   Vua Mắm — Đăng nhập / Đăng ký + Tài khoản
   ============================================================ */

/* ---------- Auth (login/register) ---------- */
.vm-auth-wrap { max-width: 940px; margin: 0 auto; padding: 46px 28px 70px; }

.vm-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(74, 16, 14, 0.1);
}

.vm-auth__side {
	background: radial-gradient(130% 130% at 20% 20%, #a5291f, #8a1e1b 48%, #5c1210);
	color: #fff;
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vm-wordmark--auth { margin-bottom: 26px; }
.vm-wordmark--auth span { color: #fff; font-size: 28px; }

/* Logo tròn thật trên dải auth (thay wordmark tạm) */
.vm-auth__logo { display: inline-flex; margin-bottom: 22px; }
.vm-auth__logo img { height: 68px; width: auto; display: block; }

.vm-auth__script { font-family: var(--vm-font-script); font-size: 26px; color: #f4c9a6; }

.vm-auth__side h2 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.25;
	margin: 6px 0 14px;
}

.vm-auth__side p { font-size: 14.5px; line-height: 1.75; color: #f6ddd3; }

.vm-auth__perks { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.vm-auth__perks > div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #fbeee6; }

.vm-auth__main { padding: 40px 38px; }

.vm-auth__tabs {
	display: flex;
	gap: 4px;
	background: var(--vm-cream);
	border-radius: 12px;
	padding: 4px;
	margin-bottom: 26px;
}

.vm-auth__tabs button {
	flex: 1;
	height: 42px;
	border-radius: 9px;
	color: var(--vm-ink-3);
	font-weight: 700;
	font-size: 14.5px;
	transition: background 0.15s, color 0.15s;
}

.vm-auth__tabs button.is-active { background: #fff; color: var(--vm-red); box-shadow: 0 2px 8px rgba(74, 16, 14, 0.08); }

.vm-auth__pane { display: none; }
.vm-auth__pane.is-active { display: block; }

.vm-auth__form { display: flex; flex-direction: column; gap: 16px; }

.vm-auth__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.vm-auth__lost { color: var(--vm-red); font-weight: 600; }

.vm-auth__submit {
	height: 52px;
	border-radius: 12px;
	background: var(--vm-red);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	box-shadow: 0 12px 26px rgba(138, 30, 27, 0.24);
	margin-top: 4px;
	transition: background 0.2s;
}

.vm-auth__submit:hover { background: var(--vm-red-hover); }

.vm-auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12.5px; color: var(--vm-ink-4); }
.vm-auth__or span { flex: 1; height: 1px; background: #eee0c6; }

.vm-auth__socials { display: flex; gap: 12px; }

.vm-auth__socials button {
	flex: 1;
	height: 48px;
	border: 1px solid var(--vm-line-2);
	border-radius: 11px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #3a2c25;
	transition: background 0.15s;
}

.vm-auth__socials button:hover { background: var(--vm-cream); }

/* WC password strength meter (giữ nhưng style lại) */
.vm-auth .woocommerce-password-strength {
	font-size: 12.5px;
	padding: 8px 12px;
	border-radius: 9px;
	background: var(--vm-cream);
	color: var(--vm-ink-2);
}

.vm-auth .woocommerce-password-strength.strong { background: var(--vm-green-bg); color: var(--vm-green); }
.vm-auth .woocommerce-password-strength.bad, .vm-auth .woocommerce-password-strength.short { background: var(--vm-error-bg); color: var(--vm-error); }
.vm-auth .woocommerce-password-hint { font-size: 12px; color: var(--vm-ink-4); display: block; margin-top: 6px; }

/* Nút hiện/ẩn mật khẩu của WC */
.vm-auth .password-input { position: relative; display: block; width: 100%; }
.vm-auth .show-password-input {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.vm-auth .show-password-input::after { content: '👁'; opacity: 0.45; }

/* ---------- Quên mật khẩu / đặt lại mật khẩu ---------- */
.vm-lost-wrap { max-width: 560px; margin: 0 auto; padding: 56px 28px 80px; }

.vm-lost {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 22px;
	padding: 44px 40px;
	text-align: center;
	box-shadow: 0 24px 56px rgba(74, 16, 14, 0.1);
}

.vm-lost__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--vm-cream);
	color: var(--vm-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.vm-lost__icon.is-sent { background: var(--vm-green-bg); color: var(--vm-green); }

.vm-lost h1 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 28px;
	color: var(--vm-ink);
	margin-bottom: 10px;
}

.vm-lost__desc { font-size: 14.5px; line-height: 1.75; color: var(--vm-ink-2); margin-bottom: 24px; }

.vm-lost__form { display: flex; flex-direction: column; gap: 16px; text-align: left; }

.vm-lost__hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	background: var(--vm-bg);
	border: 1px dashed var(--vm-line-2);
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vm-ink-3);
	margin-bottom: 22px;
}

.vm-lost__hint svg { flex: none; margin-top: 2px; color: var(--vm-gold-2); }

.vm-lost__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vm-lost__btns .vm-btn { height: 48px; }

.vm-lost__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 22px;
	color: var(--vm-red);
	font-weight: 600;
	font-size: 13.5px;
}

.vm-lost .woocommerce-error, .vm-lost .woocommerce-message, .vm-lost .woocommerce-info { text-align: left; }

@media (max-width: 640px) {
	.vm-lost { padding: 30px 20px; }
	.vm-lost-wrap { padding: 30px 16px 60px; }
}

/* ---------- Account layout ---------- */
.vm-acct > .vm-container { padding-top: 34px; padding-bottom: 70px; }

.vm-acct__grid {
	display: grid;
	grid-template-columns: 288px 1fr;
	gap: 30px;
	align-items: start;
	padding-top: 34px;
	padding-bottom: 70px;
}

.vm-acct__side {
	position: sticky;
	top: 108px;
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(74, 16, 14, 0.05);
	float: none;
	width: auto;
}

.vm-acct__me {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 24px;
	background: linear-gradient(135deg, #8a1e1b, #641210);
	color: #fff;
}

.vm-acct__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vm-font-head);
	font-weight: 700;
	font-size: 22px;
	flex: none;
}

.vm-acct__me-meta { min-width: 0; }
.vm-acct__me-name { font-weight: 700; font-size: 16px; }
.vm-acct__me-mail { font-size: 12.5px; color: #f2c9bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vm-acct__nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.vm-acct__nav ul, .vm-acct__nav li { list-style: none; margin: 0; padding: 0; }

.vm-acct__navitem, .vm-acct__logout {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--vm-ink-2);
	transition: background 0.15s, color 0.15s;
}

.vm-acct__navitem:hover { background: var(--vm-cream); color: var(--vm-red); }
.vm-acct__navitem.is-active { background: var(--vm-cream); color: var(--vm-red); font-weight: 700; }

.vm-acct__logout { color: #b3453e; font-weight: 600; margin-top: 4px; }
.vm-acct__logout:hover { background: #fbeceb; }

.vm-acct__content { width: auto; float: none; min-width: 0; }

.vm-acct__stack { display: flex; flex-direction: column; gap: 20px; }
.vm-acct__stack-sm { display: flex; flex-direction: column; gap: 16px; }

/* Banner chào */
.vm-acct__hello {
	background: radial-gradient(130% 170% at 85% 20%, #a5291f, #8a1e1b 50%, #5c1210);
	border-radius: 18px;
	padding: 28px 30px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.vm-acct__hello-title { font-family: var(--vm-font-head); font-weight: 800; font-size: 24px; }
.vm-acct__hello-sub { font-size: 14px; color: #f2c9bd; margin-top: 6px; }

.vm-acct__hello-btn {
	background: #fff;
	color: var(--vm-red);
	border-radius: 11px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
	transition: background 0.15s;
}

.vm-acct__hello-btn:hover { background: var(--vm-cream); }

/* Stats */
.vm-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.vm-stat { background: #fff; border: 1px solid var(--vm-line); border-radius: 16px; padding: 20px; }

.vm-stat__icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--vm-cream);
	color: var(--vm-red);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vm-stat__num { font-family: var(--vm-font-head); font-weight: 800; font-size: 26px; color: var(--vm-ink); margin-top: 12px; }
.vm-stat__label { font-size: 13px; color: var(--vm-ink-3); margin-top: 2px; }

/* Card chung */
.vm-acct__card { background: #fff; border: 1px solid var(--vm-line); border-radius: 18px; padding: 24px 26px; }

.vm-acct__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vm-acct__card-head h2 { font-family: var(--vm-font-head); font-weight: 700; font-size: 19px; }
.vm-acct__card-head a { color: var(--vm-red); font-weight: 600; font-size: 13.5px; }

.vm-acct__h2 { font-family: var(--vm-font-head); font-weight: 700; font-size: 22px; margin-bottom: 18px; }
.vm-acct__hint { font-size: 13.5px; color: var(--vm-ink-3); margin: -12px 0 18px; }

.vm-acct__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vm-acct__save { margin-top: 22px; align-self: flex-start; }

.vm-acct__none { color: var(--vm-ink-3); font-size: 14.5px; padding: 14px 0; }
.vm-acct__none a { color: var(--vm-red); font-weight: 600; }

/* Đơn gần đây */
.vm-acct__rorder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 0;
	border-top: 1px solid #f5ecda;
	flex-wrap: wrap;
}

.vm-acct__rorder-left { display: flex; align-items: center; gap: 12px; }
.vm-acct__rorder-left .thumb { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--vm-cream); position: relative; display: block; flex: none; }
.vm-acct__rorder-left .thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-acct__rorder-left .code { font-weight: 600; font-size: 14px; color: var(--vm-ink); }
.vm-acct__rorder-left .sub { font-size: 12px; color: var(--vm-ink-4); }
.vm-acct__rorder-right { display: flex; align-items: center; gap: 16px; }
.vm-acct__rorder-right .total { font-weight: 800; color: var(--vm-red); font-size: 15px; }

/* Badge trạng thái */
.vm-obadge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.vm-obadge--done { color: #3f7d3b; background: #eaf6ea; }
.vm-obadge--ship { color: #2a6fb0; background: #e6f0fa; }
.vm-obadge--proc { color: #b06a1a; background: #fbeeda; }
.vm-obadge--cancel { color: #b3453e; background: #fbeceb; }

/* Orders page */
.vm-acct__orders-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vm-acct__orders-head h2 { font-family: var(--vm-font-head); font-weight: 700; font-size: 22px; }

.vm-ochips { display: flex; gap: 8px; flex-wrap: wrap; }

.vm-ochip {
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid var(--vm-line-2);
	background: #fff;
	color: var(--vm-ink-2);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: all 0.15s;
}

.vm-ochip:hover { border-color: var(--vm-red); color: var(--vm-red); }
.vm-ochip.is-active { background: var(--vm-red); border-color: var(--vm-red); color: #fff; font-weight: 700; }

.vm-ocard {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(74, 16, 14, 0.04);
}

.vm-ocard[hidden] { display: none; }

.vm-ocard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 22px;
	border-bottom: 1px solid var(--vm-line);
	background: #fdfaf3;
	flex-wrap: wrap;
}

.vm-ocard__id { display: flex; align-items: center; gap: 10px; color: var(--vm-red); }
.vm-ocard__id .code { font-weight: 700; font-size: 14.5px; color: var(--vm-ink); }
.vm-ocard__id .dot { width: 4px; height: 4px; border-radius: 50%; background: #d8c4a4; }
.vm-ocard__id .date { font-size: 12.5px; color: var(--vm-ink-4); }

.vm-ocard__items { padding: 4px 22px; }

.vm-ocard__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid #f5ecda;
}

.vm-ocard__item:last-child { border-bottom: 0; }
.vm-ocard__item .thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex: none; background: var(--vm-cream); position: relative; display: block; }
.vm-ocard__item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-ocard__item .meta { flex: 1; min-width: 0; }
.vm-ocard__item .name { font-weight: 600; font-size: 14.5px; color: var(--vm-ink); }
.vm-ocard__item .sub { font-size: 12.5px; color: var(--vm-ink-4); margin-top: 3px; }
.vm-ocard__item .line { font-weight: 700; font-size: 14px; color: var(--vm-ink-2); }

.vm-ocard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 22px;
	background: #fdfaf3;
	border-top: 1px solid var(--vm-line);
	flex-wrap: wrap;
}

.vm-ocard__total { font-size: 13.5px; color: var(--vm-ink-3); }
.vm-ocard__total strong { font-weight: 800; font-size: 16.5px; color: var(--vm-red); }

.vm-ocard__acts { display: flex; align-items: center; gap: 10px; }
.vm-ocard__acts a { font-size: 13px; border-radius: 9px; padding: 9px 16px; font-weight: 600; transition: all 0.15s; }
.vm-ocard__acts .is-view { color: var(--vm-ink-2); border: 1px solid var(--vm-line-2); background: #fff; }
.vm-ocard__acts .is-view:hover { background: var(--vm-cream); color: var(--vm-red); }
.vm-ocard__acts .is-buy { color: #fff; background: var(--vm-red); font-weight: 700; padding: 9px 18px; }
.vm-ocard__acts .is-buy:hover { background: var(--vm-red-hover); }

.vm-acct__empty {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 16px;
	padding: 54px 20px;
	text-align: center;
	color: var(--vm-ink-4);
	font-size: 14.5px;
}

.vm-acct__empty svg { margin-bottom: 12px; }
.vm-acct__empty[hidden] { display: none; }

/* Sổ địa chỉ */
.vm-addr {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 16px;
	padding: 22px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.vm-addr__name { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.vm-addr__default { background: var(--vm-green-bg); color: var(--vm-green); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.vm-addr__lines { font-size: 13.5px; color: var(--vm-ink-3); line-height: 1.6; }

.vm-addr__edit {
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: var(--vm-red);
	border: 1px solid var(--vm-line-2);
	border-radius: 9px;
	padding: 8px 14px;
	background: #fff;
	transition: background 0.15s;
}

.vm-addr__edit:hover { background: var(--vm-cream); }

.vm-addr__add {
	height: 52px;
	border: 1.5px dashed #d8b98a;
	border-radius: 14px;
	background: #fff;
	color: var(--vm-red);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 0.15s;
}

.vm-addr__add:hover { background: var(--vm-cream); }

/* Form sửa địa chỉ (WC form-row) — style giống checkout */
.vm-acct__content .form-row { margin: 0 0 16px; padding: 0; }
.vm-acct__content .form-row label { display: block; font-size: 13px; color: var(--vm-ink-3); margin-bottom: 6px; font-weight: 500; }
.vm-acct__content .form-row .required { color: var(--vm-red); text-decoration: none; }
.vm-acct__content .form-row .optional { display: none; }

.woocommerce-MyAccount-content .form-row input.input-text {
	width: 100%;
	height: 48px;
	border: 1px solid var(--vm-line-2);
	border-radius: var(--vm-r-input);
	padding: 0 15px;
	font-size: 14.5px;
	outline: none;
	background: #fff;
	color: var(--vm-ink);
	transition: border-color 0.15s, box-shadow 0.15s;
	appearance: none;
}

.woocommerce-MyAccount-content .form-row input.input-text:focus { border-color: var(--vm-red); box-shadow: 0 0 0 3px rgba(138, 30, 27, 0.09); }

.vm-acct__content .woocommerce-address-fields { background: #fff; border: 1px solid var(--vm-line); border-radius: 18px; padding: 26px; }
.vm-acct__content .woocommerce-address-fields .button, .vm-acct__content button.button {
	height: 48px;
	padding: 0 30px;
	border-radius: 11px;
	border: 0;
	background: var(--vm-red);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.vm-acct__content .woocommerce-address-fields .button:hover { background: var(--vm-red-hover); }

/* Trang xem chi tiết đơn (view-order) */
.vm-acct__content .woocommerce-order-details, .vm-acct__content .woocommerce-customer-details {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	padding: 24px 26px;
	margin-top: 18px;
}

.vm-acct__content .woocommerce-order-details h2, .vm-acct__content .woocommerce-customer-details h2 {
	font-family: var(--vm-font-head);
	font-size: 19px;
	margin-bottom: 14px;
}

.vm-acct__content table.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vm-acct__content table.shop_table th, .vm-acct__content table.shop_table td { padding: 11px 8px; border-bottom: 1px solid var(--vm-line); text-align: left; }
.vm-acct__content table.shop_table tfoot th { color: var(--vm-ink-3); font-weight: 600; }
.vm-acct__content address { font-style: normal; color: var(--vm-ink-2); line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.vm-acct__grid { grid-template-columns: 1fr; }
	.vm-acct__side { position: static; }
	.vm-stats4 { grid-template-columns: repeat(2, 1fr); }

	/* Đăng nhập/đăng ký: panel đỏ thu thành dải gọn (logo + slogan), form lên ngay tầm mắt */
	.vm-auth { grid-template-columns: 1fr; }
	.vm-auth__side {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 22px;
	}
	.vm-auth__side h2, .vm-auth__side > p, .vm-auth__perks { display: none; }
	.vm-auth__logo { margin-bottom: 0; }
	.vm-auth__logo img { height: 46px; }
	.vm-auth__script { font-size: 21px; line-height: 1.2; text-align: right; }
}

@media (max-width: 640px) {
	.vm-auth__main { padding: 28px 20px; }
	.vm-auth-wrap { padding: 24px 16px 50px; }
	.vm-acct__2col { grid-template-columns: 1fr; }
	.vm-ocard__foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.vm-stats4 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.vm-stat { padding: 14px; }
	.vm-stat__num { font-size: 21px; }
}