/* Trang Tài khoản (đăng nhập / đăng ký + trang sau khi đăng nhập): dùng chung cho bán hàng của theme và WooCommerce. */
/* ---------- Trang Tài khoản ---------- */
.cs-theme-wat-acc { max-width: 1000px; margin: 0 auto; }
.cs-theme-wat-acc__msg { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid; border-radius: var(--csw-input-radius, 0); font-size: .95rem; }
.cs-theme-wat-acc__msg.is-error { border-color: #e0b4b4; background: #fff6f6; color: #9f3a38; }
.cs-theme-wat-acc__msg.is-success { border-color: #a3c293; background: #fcfff5; color: #2c662d; }
.cs-theme-wat-acc__auth { display: grid; gap: 2rem; max-width: 460px; margin: 0 auto; }
.cs-theme-wat-acc__auth.has-register { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: none; }
.cs-theme-wat-acc__box { padding: 1.75rem; border: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); border-radius: var(--csw-card-radius, 0); }
.cs-theme-wat-acc__box.is-narrow { max-width: 460px; margin: 0 auto; }
.cs-theme-wat-acc__box h2 { margin-top: 0; }
.cs-theme-wat-acc__form .cs-theme-wat-btn { margin-top: .5rem; }
.cs-theme-wat-acc__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.cs-theme-wat-acc__check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.cs-theme-wat-acc__check input { width: auto; min-height: 0; }
.cs-theme-wat-acc__note { margin: 0 0 1rem; font-size: .9rem; color: color-mix(in srgb, var(--csw-text) 65%, transparent); }
.cs-theme-wat-acc__back { margin: 1rem 0; font-size: .92rem; }
.cs-theme-wat-acc__wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.cs-theme-wat-acc__nav ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); }
.cs-theme-wat-acc__nav li { border-bottom: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); }
.cs-theme-wat-acc__nav a { display: block; padding: .8rem 0; color: inherit; text-decoration: none; }
.cs-theme-wat-acc__nav a:hover { text-decoration: underline; }
.cs-theme-wat-acc__nav a.is-active { font-weight: 600; }
.cs-theme-wat-acc__main > p:first-child { margin-top: 0; }
.cs-theme-wat-acc__sub { margin: 2rem 0 1rem; font-size: 1.1rem; }
.cs-theme-wat-acc__orders { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cs-theme-wat-acc__orders th, .cs-theme-wat-acc__orders td { padding: .75rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--csw-text) 10%, transparent); text-align: left; vertical-align: middle; }
.cs-theme-wat-acc__orders th { font-weight: 600; font-size: .85rem; color: color-mix(in srgb, var(--csw-text) 70%, transparent); }
.cs-theme-wat-acc__orders td:last-child { text-align: right; }
.cs-theme-wat-acc__orders a { color: inherit; }
.cs-theme-wat-acc__view { display: inline-block; padding: .35rem .9rem; border: 1px solid color-mix(in srgb, var(--csw-text) 25%, transparent); border-radius: var(--csw-btn-radius, 0); text-decoration: none; font-size: .9rem; }
.cs-theme-wat-acc__view:hover { border-color: var(--csw-text); }
.cs-theme-wat-acc__pager { display: flex; justify-content: space-between; margin-top: 1rem; }
.cs-theme-wat-acc__empty { padding: 1.5rem; border: 1px dashed color-mix(in srgb, var(--csw-text) 20%, transparent); text-align: center; }
.cs-theme-wat-acc__address { font-style: normal; line-height: 1.7; }
.cs-theme-wat-acc__fieldset { margin: 1.5rem 0 1rem; padding: 1rem 1.25rem .25rem; border: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); }
.cs-theme-wat-acc__fieldset legend { padding: 0 .4rem; font-weight: 600; }
@media (max-width: 749px) {
	.cs-theme-wat-acc__wrap { grid-template-columns: 1fr; gap: 1.5rem; }
	.cs-theme-wat-acc__nav ul { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
	.cs-theme-wat-acc__nav li { border: 0; }
	.cs-theme-wat-acc__nav a { padding: .45rem .8rem; border: 1px solid color-mix(in srgb, var(--csw-text) 15%, transparent); border-radius: var(--csw-btn-radius, 0); font-size: .9rem; }
	.cs-theme-wat-acc__nav a.is-active { border-color: var(--csw-text); }
	.cs-theme-wat-acc__box { padding: 1.25rem; }
	.cs-theme-wat-acc__orders thead { display: none; }
	.cs-theme-wat-acc__orders tr { display: block; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--csw-text) 10%, transparent); }
	.cs-theme-wat-acc__orders td { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
	.cs-theme-wat-acc__orders td[data-label]::before { content: attr(data-label); font-weight: 600; text-align: left; }
}

/* ---------- Trang Tài khoản: kiểu giao diện ---------- */
.cs-theme-wat-acc__pv { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .85rem; color: color-mix(in srgb, var(--csw-text) 65%, transparent); }
.cs-theme-wat-acc__pv a { padding: .25rem .7rem; border: 1px solid color-mix(in srgb, var(--csw-text) 18%, transparent); border-radius: 999px; color: inherit; text-decoration: none; }
.cs-theme-wat-acc__pv a.is-active { border-color: var(--csw-text); color: var(--csw-text); font-weight: 600; }
.cs-theme-wat-acc__card { border: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); border-radius: var(--csw-card-radius, 0); background: var(--csw-bg); }
.cs-theme-wat-acc__submit { width: 100%; justify-content: center; }
.cs-theme-wat-acc-r { position: absolute; opacity: 0; pointer-events: none; }

/* Tab Đăng nhập / Đăng ký */
.cs-theme-wat-acc-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 1.75rem; border-bottom: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); }
.cs-theme-wat-acc-switch label { padding: .85rem .5rem; text-align: center; font-weight: 600; cursor: pointer; color: color-mix(in srgb, var(--csw-text) 55%, transparent); transition: color .2s ease; }
.cs-theme-wat-acc-switch::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--csw-text); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cs-theme-wat-acc-r.is-login:checked ~ .cs-theme-wat-acc-switch label:first-child,
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-switch label:last-child { color: var(--csw-text); }
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-switch::after { transform: translateX(100%); }
.cs-theme-wat-acc-r:focus-visible ~ .cs-theme-wat-acc-switch { outline: 2px solid color-mix(in srgb, var(--csw-text) 40%, transparent); outline-offset: 2px; }
.cs-theme-wat-acc-tabs .cs-theme-wat-acc-pane { display: none; }
.cs-theme-wat-acc-r.is-login:checked ~ .cs-theme-wat-acc-pane.is-login,
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-pane.is-reg { display: block; animation: cs-wat-acc-in .4s cubic-bezier(.2, .7, .2, 1) both; }
.cs-theme-wat-acc-tabs.cs-theme-wat-acc__card { max-width: 460px; margin: 0 auto; padding: 2rem 2rem 2.25rem; }

/* Ảnh bên trái */
.cs-theme-wat-acc-split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; max-width: 1000px; margin: 0 auto; }
/* Độ rộng khung (Cài đặt theme > Trang tài khoản): được tràn ra ngoài vùng nội dung hẹp của trang, chừa lề 1rem mỗi bên màn hình. */
.cs-theme-wat-main:has(:is(.cs-theme-wat-acc-split, .cs-theme-wat-acc-slide)) { overflow-x: clip; }
.cs-theme-wat-acc:has(> :is(.cs-theme-wat-acc-split, .cs-theme-wat-acc-slide)) { max-width: none; }
.cs-theme-wat-acc > :is(.cs-theme-wat-acc-split, .cs-theme-wat-acc-slide) { --acc-w: min(var(--csw-acc-w, 1000px), calc(100vw - 2rem)); width: var(--acc-w); max-width: none; margin: 0 0 0 calc(50% - var(--acc-w) / 2); }
.cs-theme-wat-acc-split__media { position: relative; min-height: max(560px, calc(var(--csw-acc-w, 1000px) * .56)); background: var(--csw-btn-bg, #121212) center / cover no-repeat; color: var(--csw-btn-text, #fff); }
.cs-theme-wat-acc-split__media[style]::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.cs-theme-wat-acc-split__text { position: absolute; left: 2.25rem; right: 2.25rem; bottom: 2.25rem; }
.cs-theme-wat-acc-split__media[style] .cs-theme-wat-acc-split__text { color: #fff; }
.cs-theme-wat-acc-split__text h2 { margin: 0 0 .5rem; color: inherit; font-size: 1.75rem; line-height: 1.2; }
.cs-theme-wat-acc-split__text p { margin: 0; opacity: .9; line-height: 1.6; }
.cs-theme-wat-acc-split__form { padding: 2.5rem 2.25rem; align-self: center; }

/* Trượt qua lại */
.cs-theme-wat-acc-slide { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; max-width: 1000px; margin: 0 auto; min-height: max(560px, calc(var(--csw-acc-w, 1000px) * .56)); }
.cs-theme-wat-acc-slide > .cs-theme-wat-acc-switch { display: none; }
.cs-theme-wat-acc-slide .cs-theme-wat-acc-pane { padding: 2.5rem 2.25rem; align-self: center; transition: opacity .45s ease, transform .6s cubic-bezier(.65, 0, .35, 1); }
.cs-theme-wat-acc-slide .cs-theme-wat-acc-pane h2 { margin-top: 0; }
.cs-theme-wat-acc-r.is-login:checked ~ .cs-theme-wat-acc-pane.is-reg { opacity: 0; transform: translateX(-20%); pointer-events: none; }
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-pane.is-login { opacity: 0; transform: translateX(20%); pointer-events: none; }
.cs-theme-wat-acc-slide__cover { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 2; display: grid; background: var(--csw-btn-bg, #121212) center / cover no-repeat; color: var(--csw-btn-text, #fff); transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.cs-theme-wat-acc-slide__cover[style]::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-slide__cover { transform: translateX(-100%); }
.cs-theme-wat-acc-slide__msg { grid-area: 1 / 1; position: relative; align-self: center; padding: 2.5rem; text-align: center; transition: opacity .35s ease .2s, transform .5s ease .15s; }
.cs-theme-wat-acc-slide__cover[style] .cs-theme-wat-acc-slide__msg { color: #fff; }
.cs-theme-wat-acc-slide__msg h3 { margin: 0 0 .75rem; color: inherit; font-size: 1.6rem; }
.cs-theme-wat-acc-slide__msg p { margin: 0 auto 1.5rem; max-width: 300px; opacity: .9; line-height: 1.6; }
.cs-theme-wat-acc-r.is-login:checked ~ .cs-theme-wat-acc-slide__cover .is-reg,
.cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-slide__cover .is-login { opacity: 0; transform: translateY(12px); pointer-events: none; transition-delay: 0s; }
.cs-theme-wat-acc-slide__btn { display: inline-block; padding: .7rem 2rem; border: 1px solid currentColor; border-radius: var(--csw-btn-radius, 0); font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cs-theme-wat-acc-slide__btn:hover { background: #fff; color: #121212; }

/* Nhãn nằm trong ô */
.cs-theme-wat-acc .cs-theme-wat-field.is-float { position: relative; }
.cs-theme-wat-acc .cs-theme-wat-field.is-float > label { position: absolute; left: .75rem; top: 23px; z-index: 1; margin: 0; padding: 0 .3rem; transform: translateY(-50%); background: var(--csw-bg); color: color-mix(in srgb, var(--csw-text) 60%, transparent); font-size: 1rem; line-height: 1.2; pointer-events: none; transition: top .18s ease, font-size .18s ease, color .18s ease; }
.cs-theme-wat-acc .cs-theme-wat-field.is-float:has(input:focus) > label,
.cs-theme-wat-acc .cs-theme-wat-field.is-float:has(input:not(:placeholder-shown)) > label { top: 0; font-size: .78rem; color: var(--csw-text); }

/* Hiệu ứng xuất hiện */
@keyframes cs-wat-acc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs-theme-wat-acc.is-anim .cs-theme-wat-acc__box, .cs-theme-wat-acc.is-anim .cs-theme-wat-acc__card { animation: cs-wat-acc-in .55s cubic-bezier(.2, .7, .2, 1) both; }
.cs-theme-wat-acc.is-anim .cs-theme-wat-acc__box + .cs-theme-wat-acc__box { animation-delay: .08s; }
.cs-theme-wat-acc.is-anim .cs-theme-wat-acc-split__text { animation: cs-wat-acc-in .7s cubic-bezier(.2, .7, .2, 1) .2s both; }

/* Sau khi đăng nhập: menu ngang + ô lối tắt */
.cs-theme-wat-acc__wrap.is-top { grid-template-columns: 1fr; gap: 1.75rem; }
.cs-theme-wat-acc__wrap.is-top .cs-theme-wat-acc__nav ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); }
.cs-theme-wat-acc__wrap.is-top .cs-theme-wat-acc__nav li { border: 0; }
.cs-theme-wat-acc__wrap.is-top .cs-theme-wat-acc__nav a { padding: .8rem 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; text-decoration: none; transition: border-color .2s ease; }
.cs-theme-wat-acc__wrap.is-top .cs-theme-wat-acc__nav a:hover { border-bottom-color: color-mix(in srgb, var(--csw-text) 30%, transparent); }
.cs-theme-wat-acc__wrap.is-top .cs-theme-wat-acc__nav a.is-active { border-bottom-color: var(--csw-text); }
.cs-theme-wat-acc__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin: 1.5rem 0 .5rem; }
.cs-theme-wat-acc__cardlink { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); border-radius: var(--csw-card-radius, 0); color: inherit; text-decoration: none; transition: border-color .2s ease; }
.cs-theme-wat-acc__cardlink:hover { border-color: var(--csw-text); }
.cs-theme-wat-acc__cardlink svg { width: 26px; height: 26px; margin-bottom: .4rem; }
.cs-theme-wat-acc__cardlink small { color: color-mix(in srgb, var(--csw-text) 60%, transparent); font-size: .85rem; line-height: 1.4; }

@media (max-width: 749px) {
	.cs-theme-wat-acc-split, .cs-theme-wat-acc-slide { grid-template-columns: 1fr; min-height: 0; }
	.cs-theme-wat-acc-split__media { min-height: 180px; }
	.cs-theme-wat-acc-split__text { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
	.cs-theme-wat-acc-split__text h2 { font-size: 1.35rem; }
	.cs-theme-wat-acc-split__form, .cs-theme-wat-acc-slide .cs-theme-wat-acc-pane { padding: 1.5rem 1.25rem; }
	.cs-theme-wat-acc-tabs.cs-theme-wat-acc__card { padding: 1.5rem 1.25rem; }
	/* Trượt: điện thoại dùng tab thay khung trượt. */
	.cs-theme-wat-acc-slide > .cs-theme-wat-acc-switch { display: grid; margin: 1rem 1.25rem 0; }
	.cs-theme-wat-acc-slide__cover { display: none; }
	.cs-theme-wat-acc-slide .cs-theme-wat-acc-pane { grid-area: auto; }
	.cs-theme-wat-acc-r.is-login:checked ~ .cs-theme-wat-acc-pane.is-reg, .cs-theme-wat-acc-r.is-reg:checked ~ .cs-theme-wat-acc-pane.is-login { display: none; }
	.cs-theme-wat-acc-slide .cs-theme-wat-acc-pane h2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-theme-wat-acc *, .cs-theme-wat-acc *::after { animation: none !important; transition: none !important; }
}

/* WooCommerce: đoạn chính sách riêng tư dưới form đăng ký, chữ nhỏ như ghi chú. */
.cs-theme-wat-acc .woocommerce-privacy-policy-text { margin: 0 0 1rem; font-size: .85rem; line-height: 1.55; color: color-mix(in srgb, var(--csw-text) 65%, transparent); }
.cs-theme-wat-acc .woocommerce-privacy-policy-text p { margin: 0; }
/* WooCommerce: bỏ khung viền / lề mặc định của form login, register (đã nằm trong khung của theme). */
.woocommerce .cs-theme-wat-acc form.login, .woocommerce .cs-theme-wat-acc form.register { margin: 0; padding: 0; border: 0; border-radius: 0; }

/* ---------- Kiểu: thẻ có logo / ảnh nền phủ kín / lợi ích bên trái ---------- */
.cs-theme-wat-acc-seg.cs-theme-wat-acc__card { width: 100%; max-width: clamp(360px, calc(var(--csw-acc-w, 1000px) * .46), 640px); margin: 0 auto; padding: 2.25rem 2rem 2rem; }
.cs-theme-wat-acc-seg__head { margin: 0 0 1.5rem; text-align: center; }
.cs-theme-wat-acc-seg__head h2 { margin: 0 0 .35rem; font-size: 1.4rem; line-height: 1.3; }
.cs-theme-wat-acc-seg__head p { margin: 0; font-size: .92rem; line-height: 1.55; color: color-mix(in srgb, var(--csw-text) 65%, transparent); }
/* Nút chuyển dạng viên: khối nền trượt sang tab đang chọn. */
.cs-theme-wat-acc-switch.is-seg { padding: 4px; margin: 0 0 1.5rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--csw-text) 7%, transparent); }
.cs-theme-wat-acc-switch.is-seg label { position: relative; z-index: 1; padding: .6rem .5rem; border-radius: 999px; font-size: .92rem; transition: color .25s ease; }
.cs-theme-wat-acc-switch.is-seg::after { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); height: auto; border-radius: 999px; background: var(--csw-bg); border: 1px solid color-mix(in srgb, var(--csw-text) 12%, transparent); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.cs-theme-wat-acc-solo { padding: 1rem 0; }
/* Ảnh nền phủ kín: tràn hết chiều ngang, sát dưới header, ẩn tiêu đề trang (thẻ đã có lời chào). */
.cs-theme-wat-main:has(.cs-theme-wat-acc-cover) { overflow-x: clip; }
.cs-theme-wat-section:has(.cs-theme-wat-acc-cover) { --csw-pt: 0px !important; --csw-pb: 0px !important; }
.cs-theme-wat-page-content:has(.cs-theme-wat-acc-cover) > .cs-theme-wat-page-content__title { display: none; }
.cs-theme-wat-acc:has(> .cs-theme-wat-acc-cover) { max-width: none; }
.cs-theme-wat-acc-cover { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(860px, calc(100vh - 100px)); padding: 4rem 1.25rem; background: var(--csw-btn-bg, #121212) center / cover no-repeat; }
.cs-theme-wat-acc-cover[style]::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.cs-theme-wat-acc-cover > .cs-theme-wat-acc__card { position: relative; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
@media (max-width: 749px) {
	.cs-theme-wat-acc-seg.cs-theme-wat-acc__card { padding: 1.75rem 1.25rem 1.5rem; }
	.cs-theme-wat-acc-cover { min-height: 0; padding: 2.5rem 1rem; }
	.cs-theme-wat-acc-cover > .cs-theme-wat-acc__card { border-radius: 12px; }
}
/* Khung rộng: form không kéo dài quá 440px, căn giữa trong nửa khung của nó. */
.cs-theme-wat-acc-slide .cs-theme-wat-acc-pane > *, .cs-theme-wat-acc-split__form > :not(input) { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
/* Khung đăng nhập luôn bo góc (không theo "bo góc thẻ" của theme, vốn có thể = 0); ảnh bên trong bị cắt theo góc. */
.cs-theme-wat-acc .cs-theme-wat-acc__card { border-radius: 16px; overflow: hidden; }
@media (max-width: 749px) { .cs-theme-wat-acc .cs-theme-wat-acc__card { border-radius: 12px; } }