/* CHXN page: "Tài khoản" (page-tai-khoan.php) — WooCommerce's own
   [woocommerce_my_account] shortcode markup, styled to match the rest of
   the site (card look, pill buttons, green accents) since it previously
   rendered completely bare. */

.chxn-account-wrap {
	/* longhand, not shorthand — this element also carries ".chxn-container"
	   (page-tai-khoan.php), and a same-specificity shorthand "padding"
	   declaration overwrites ALL 4 sides of an earlier one, silently
	   zeroing out chxn-container's own side padding (see pages/shop.css's
	   ".chxn-shop-layout" for the original diagnosis of this bug shape). */
	padding-top: 24px;
	padding-bottom: 56px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.chxn-account-title {
	font-size: 26px;
	font-weight: 800;
	margin: 6px 0 20px;
}

/* bare "Đăng nhập"/"Đăng ký" <h2> WooCommerce prints right above the form
   (myaccount/form-login.php) — no class of its own to hook, only inherits
   base.css's generic h2 reset (font-weight/color, margin:0). Giving it a
   little breathing room here instead of relying on the login card's own
   top margin keeps the 3 stacked pieces (page title → this heading → the
   card) reading as one rhythm instead of 2 unrelated gaps. */
.woocommerce > h2:first-child {
	font-size: 18px;
	margin: 0 0 14px;
}

/* ---- logged-out: login / register forms ---- */
.woocommerce-form-login,
.woocommerce-form-register {
	/* WC core's own "form.login,form.register" rule sets "margin:2em 0"
	   (assets/css/woocommerce.css) — replaced here so the card sits right
	   under the "Đăng nhập" heading above instead of floating 32px below
	   it with no visual relation. */
	margin: 0;
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: var(--chxn-radius-card);
	padding: 30px 32px;
}
.u-column1.col-1,
.u-column2.col-2 {
	width: 100%;
	float: none;
}
h2.woocommerce-form-register-heading,
.woocommerce-account-fields h2 {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 16px;
}
.woocommerce-form-row {
	margin: 0 0 16px;
}
.woocommerce-form-row label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--chxn-ink);
	margin: 0 0 6px;
}
.woocommerce-form-row label .required {
	color: var(--chxn-red);
	text-decoration: none;
}
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text,
.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="email"],
.woocommerce-form-row input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	background: var(--chxn-bg);
	border: 1.5px solid var(--chxn-line);
	border-radius: 9px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--chxn-ink);
	box-shadow: none;
}
.woocommerce-form-login .input-text:focus,
.woocommerce-form-register .input-text:focus {
	outline: none;
	border-color: var(--chxn-green);
}

/* WooCommerce's password-visibility toggle (assets/js/frontend/
   woocommerce.js injects "<button class="show-password-input">" into
   ".password-input", no icon/size of its own — it was falling through to
   base.css's generic bare-"button" reset (pill radius only), rendering as
   a tiny unstyled gray sliver. Positioned as an eye glyph inside the
   field instead; JS toggles the "display-password" class on click, no
   markup change needed. */
.password-input {
	position: relative;
	display: block;
}
.show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0 !important;
	border: 0;
	background-color: transparent !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369756e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126b48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.6 21.6 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.6 21.6 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.woocommerce-form-login .input-text#password,
.woocommerce-form-register .input-text#reg_password {
	padding-right: 40px;
}
.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 400 !important;
	color: var(--chxn-ink-2);
}
/* WooCommerce's actual submit-button class here is ".woocommerce-button"
   (lowercase b — ".woocommerce-Button" with a capital B is a different
   class used elsewhere, e.g. account-content pay/view-order links).
   WooCommerce's own core CSS ships a classic-theme fallback button style
   (".woocommerce:where(...) button.button{background-color:#e9e6ed}",
   gated behind "wc_block_theme_has_styles_for_element('button')" being
   false — always the case for a hand-written classic theme with no
   theme.json) at specificity (0,2,1); matching the tag selector here
   too is needed to reach the same specificity and win on source order. */
.woocommerce-form-login button.woocommerce-button,
.woocommerce-form-register button.woocommerce-button,
.woocommerce-form-row button.woocommerce-button {
	background: var(--chxn-green);
	color: #fff;
	border: 0;
	border-radius: var(--chxn-radius-pill);
	padding: 12px 28px;
	font-size: 14.5px;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
}
.woocommerce-form-login button.woocommerce-button:hover,
.woocommerce-form-register button.woocommerce-button:hover {
	background: var(--chxn-green-d);
}
.woocommerce-LostPassword {
	margin-top: 16px;
	font-size: 13.5px;
}
.woocommerce-LostPassword a {
	color: var(--chxn-green-d);
	font-weight: 600;
}
.u-column1.col-1 {
	margin-bottom: 24px;
}

/* ---- logged-in: nav + content dashboard ---- */
.woocommerce-MyAccount-navigation-link {
	list-style: none;
}
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: start;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: var(--chxn-radius-card);
	padding: 10px;
}
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--chxn-ink-2);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--chxn-bg);
	color: var(--chxn-ink);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--chxn-green-l);
	color: var(--chxn-green-d);
}
.woocommerce-MyAccount-content {
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: var(--chxn-radius-card);
	padding: 26px 28px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--chxn-ink-2);
}
.woocommerce-MyAccount-content .woocommerce-button {
	background: var(--chxn-green);
	color: #fff;
	border: 0;
	border-radius: var(--chxn-radius-pill);
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	text-transform: none;
}
.woocommerce-MyAccount-content .woocommerce-button:hover {
	background: var(--chxn-green-d);
}
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--chxn-line);
	font-size: 13.5px;
	text-align: left;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status.order-status {
	font-weight: 600;
}
.woocommerce-MyAccount-content address {
	font-style: normal;
	line-height: 1.8;
}
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.woocommerce-Address {
	border: 1px solid var(--chxn-line);
	border-radius: 12px;
	padding: 16px 18px;
}
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.woocommerce-Address-title h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--chxn-ink);
	margin: 0;
}

@media (max-width: 750px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}