/* Trang "Tài khoản của tôi" — màn hình Đăng nhập / Tạo tài khoản. * * Template gốc của WooCommerce đổ 2 form nằm cạnh nhau thành 2 cột (.u-columns > .u-column1 + * .u-column2, di sản từ theme Storefront cũ). Bố cục đó đặt 2 lời kêu gọi hành động ngang hàng * nhau nên khách phải đọc cả 2 khối mới biết mình cần khối nào, và trên mobile form Đăng ký bị * đẩy khuất khỏi màn hình đầu. Đã thay bằng MỘT card có 2 tab — xem * woocommerce/myaccount/form-login.php. * * Token dùng lại từ design system sẵn có: accent-2 xanh cho nút chính (giống "Thêm vào giỏ * hàng"), accent-1 đỏ cho link và gạch chân tab đang mở (giống .bjj-red-link), bo góc 4px + * shadow nhẹ giống card sản phẩm (shop-archive.css), input cao 48px giống ô tìm kiếm ở header. * * bjjfightgear.com KHÔNG dùng được làm tham chiếu — họ đã chuyển sang Shopify Customer Accounts * (redirect hẳn sang shopify.com, không còn giao diện riêng theo theme để đo). Bố cục 1 card / * 2 tab dưới đây theo mô hình chung của các shop thời trang VN (Coolmate, Routine). */ /* PHẠM VI ÁP DỤNG — vì sao mỗi luật ở mục 1-9 đều mở đầu bằng :is(.woocommerce-account, .bjj-login-dialog): Cùng một card đăng nhập được dùng ở HAI chỗ: trang /tai-khoan (body có class .woocommerce-account) và popup mở từ icon tài khoản trên header (, xuất hiện ở mọi trang nên body KHÔNG có .woocommerce-account). Dùng :is() chứ không tách thành 2 nhóm selector riêng vì :is() lấy specificity của nhánh nặng nhất — cả hai nhánh đều là 1 class nên độ nặng y hệt bản cũ. Điều này quan trọng: gần như mọi luật ở dưới đều đang phải thắng sát nút một luật của woocommerce.css / woocommerce-layout.css, hạ specificity dù chỉ một bậc là hỏng hàng loạt. */ /* ========================================================================== 1. Khung ngoài ========================================================================== */ :is(.woocommerce-account, .bjj-login-dialog) .bjj-auth { max-width: 460px; margin: 40px auto 64px; padding: 0 25px; } /* Notice của các màn tài khoản KHÁC (quên mật khẩu, đặt lại mật khẩu) vẫn in thành dải rời phía trên form theo mặc định của WooCommerce — ép cùng bề rộng để nó thẳng hàng với card. Riêng màn Đăng nhập/Đăng ký thì notice đã được form-login.php dời hẳn vào trong card (.bjj-auth__notices ngay dưới), nên rule này không còn chạm tới nó nữa. :not(.logged-in) là bắt buộc — khi đã đăng nhập, cùng khối notice đó phục vụ trang tài khoản rộng 1120px, bó nó về 460px sẽ thành một dải hẹp lạc lõng giữa trang. */ .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:not(:empty) { max-width: 460px; margin: 32px auto 0; padding: 0 25px; } /* VÌ SAO NOTICE NẰM TRONG PANEL: mặc định WooCommerce in nó thành một dải rời bên trên card, cách form một khoảng trắng — ở popup thì dải đó còn rơi hẳn ra ngoài popup. Thông báo lỗi phải nằm sát thứ gây ra lỗi mới đọc được như một khối, và phải biến mất khi khách đổi sang tab kia (lỗi đăng nhập không có việc gì treo trên form đăng ký) — xem chú thích $bjj_notices_panel trong form-login.php. Nằm trong panel nên KHÔNG cần padding ngang: panel đã có sẵn 32px. */ :is(.woocommerce-account, .bjj-login-dialog) .bjj-auth__notices { margin-bottom: 20px; } /* Trung hoà luật "dải rời" ở ngay trên: trên trang /tai-khoan, cái wrapper giờ nằm TRONG card vẫn khớp selector đó (vẫn là .woocommerce-notices-wrapper trên body .woocommerce-account) nên ăn thêm max-width 460px + padding 25px, đẩy alert thụt vào so với ô nhập ngay dưới nó. Phải kèm .bjj-auth cho đủ (0,4,0) — bằng đúng luật kia và đứng sau nó, chứ (0,3,0) là thua. */ :is(.woocommerce-account, .bjj-login-dialog) .bjj-auth .bjj-auth__notices .woocommerce-notices-wrapper { max-width: none; margin: 0; padding: 0; } /* woocommerce_output_all_notices() luôn in ra
kể cả khi không có notice nào, và div đó chứa vài ký tự xuống dòng nên KHÔNG khớp :empty. Bắt theo "có banner con hay không" mới đúng, nếu không trang lúc bình thường vẫn dính 20px padding thừa. */ :is(.woocommerce-account, .bjj-login-dialog) .bjj-auth__notices:not(:has(.wc-block-components-notice-banner)) { display: none; } /* Dáng thẻ cho từng notice. WooCommerce (bản có block-theme support) đã tự bọc notice cổ điển (wc_add_notice) thành .wc-block-components-notice-banner.is-error/is-success/is-info — KHÔNG còn ra