/* nxv-css */ .nxv-result { margin: 0 0 18px; padding: 14px 18px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; } .nxv-result.is-ok { background: #e8f7ee; border: 1px solid #bfe6cd; color: #17803d; } .nxv-result.is-err { background: #FAF5EE; border: 1px solid #E4D5C3; color: #793F22; } .nxv-status { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; } .nxv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #FBF7F1; color: #793F22; font-size: 12px; font-weight: 700; line-height: 1.3; } .nxv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .nxv-status.is-ok .nxv-badge { background: #e8f7ee; color: #17803d; } .nxv-btn { min-height: 0 !important; padding: 7px 14px !important; margin: 0 !important; background: var(--vnacc-accent, #C67930) !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; } .nxv-btn:hover { filter: brightness(1.07); } .nxv-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(38, 28, 21, .55); } .nxv-modal[hidden] { display: none; } .nxv-modal-box { width: 100%; max-width: 440px; padding: 24px; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(38, 28, 21, .28); animation: nxvIn .18s ease; } @keyframes nxvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .nxv-modal-t { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 700 !important; color: #342A22 !important; } .nxv-modal-p { margin: 0 0 10px !important; color: #5B5147; font-size: 14px; line-height: 1.6; } .nxv-modal-left { margin: 0 0 18px !important; color: #83786C; font-size: 13px; } .nxv-modal-act { display: flex; gap: 10px; justify-content: flex-end; } .nxv-no, .nxv-yes { min-height: 0 !important; padding: 10px 18px !important; margin: 0 !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; border: 0 !important; } .nxv-no { background: #F7F5F2 !important; color: #5B5147 !important; } .nxv-yes { background: var(--vnacc-accent, #C67930) !important; color: #fff !important; } .nxv-modal-msg { margin: 14px 0 0 !important; font-size: 13.5px; line-height: 1.55; } .nxv-modal-msg.is-ok { color: #17803d; } .nxv-modal-msg.is-err { color: #d63638; } /* ---------- Trang đăng nhập / đăng ký ---------- Flatsome thay template form-login.php của WooCommerce và dùng lớp riêng: khung bọc là "#customer_login.col2-set.row", hai cột là ".col-1" và ".col-2" chứ không phải ".u-column1/.u-column2". Vì vậy các quy tắc dưới đây bắt cả hai bộ lớp. */ .woocommerce-account:not(.logged-in) .woocommerce, .woocommerce-account:not(.logged-in) .account-container { max-width: 940px; margin: 0 auto !important; } .woocommerce-account:not(.logged-in) #customer_login { display: grid !important; grid-template-columns: 1fr; gap: 22px; margin: 0 !important; align-items: start; } @media (min-width: 850px) { .woocommerce-account:not(.logged-in) #customer_login { grid-template-columns: 1fr 1fr; } } .woocommerce-account:not(.logged-in) #customer_login > .col-1, .woocommerce-account:not(.logged-in) #customer_login > .col-2, .woocommerce-account:not(.logged-in) #customer_login > .u-column1, .woocommerce-account:not(.logged-in) #customer_login > .u-column2 { width: 100% !important; max-width: none !important; flex: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* Bỏ đường kẻ dọc giữa hai cột của theme, lưới ở trên đã lo khoảng cách */ .woocommerce-account:not(.logged-in) #customer_login.row-divided > .col + .col { border-left: 0 !important; } .woocommerce-account:not(.logged-in) .account-login-inner, .woocommerce-account:not(.logged-in) .account-register-inner { padding: 26px !important; background: #fff !important; border: 1px solid #EDEAE7 !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(53, 39, 28, .06) !important; } .woocommerce-account:not(.logged-in) #customer_login h3, .woocommerce-account:not(.logged-in) #customer_login h2 { margin: 0 0 14px !important; padding-bottom: 12px; border-bottom: 2px solid #F6F4F1; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .3px; } .woocommerce-account:not(.logged-in) #customer_login .form-row { margin-bottom: 14px !important; } .woocommerce-account:not(.logged-in) #customer_login label { font-size: 13.5px !important; font-weight: 600 !important; color: #5B5147 !important; } .woocommerce-account:not(.logged-in) #customer_login input[type="text"], .woocommerce-account:not(.logged-in) #customer_login input[type="email"], .woocommerce-account:not(.logged-in) #customer_login input[type="tel"], .woocommerce-account:not(.logged-in) #customer_login input[type="password"] { width: 100% !important; height: auto !important; min-height: 46px !important; margin-bottom: 0 !important; padding: 0 14px !important; background: #FCFAF9 !important; border: 1.5px solid #EEEAE5 !important; border-radius: 10px !important; box-shadow: none !important; font-size: 14.5px !important; } .woocommerce-account:not(.logged-in) #customer_login input:focus { background: #fff !important; border-color: var(--vnacc-accent, #C67930) !important; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__submit, .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register__submit { width: 100% !important; min-height: 48px !important; margin: 4px 0 0 !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme { margin: 4px 0 14px !important; display: block; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword { margin: 14px 0 0 !important; font-size: 13.5px; } .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper, .woocommerce-account:not(.logged-in) .vnacc-notices-row, .woocommerce-account:not(.logged-in) .woocommerce-error, .woocommerce-account:not(.logged-in) .woocommerce-message, .woocommerce-account:not(.logged-in) .woocommerce-info, .woocommerce-account:not(.logged-in) .vnacc-notice { width: 100% !important; max-width: 470px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .woocommerce-account:not(.logged-in) .woocommerce-error, .woocommerce-account:not(.logged-in) .woocommerce-message, .woocommerce-account:not(.logged-in) .woocommerce-info { list-style: none !important; padding-left: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Khoảng cách tới khung nhập bên dưới: gom về một chỗ duy nhất là 16px của khung thông báo. Theme đặt lề dưới cho lớp bọc, WooCommerce đặt thêm lề cho thẻ danh sách, cộng lại thành một khoảng hở cao hơn hẳn trang đăng ký. */ .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper, .woocommerce-account:not(.logged-in) .vnacc-notices-row { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } .woocommerce-account:not(.logged-in) .woocommerce-error, .woocommerce-account:not(.logged-in) .woocommerce-message, .woocommerce-account:not(.logged-in) .woocommerce-info { margin-top: 0 !important; margin-bottom: 0 !important; } .woocommerce-account:not(.logged-in) .vnacc-notice { margin: 0 auto 16px !important; } .woocommerce-account:not(.logged-in) #customer_login > .vnacc-notice { margin-bottom: 16px !important; } .woocommerce-account:not(.logged-in) #customer_login { margin-top: 0 !important; } /* Flatsome in thông báo ở một khối RIÊNG nằm ngoài .woocommerce, khối đó có đệm và chiều cao tối thiểu của theme — đây mới là chỗ sinh ra khoảng hở cao. Các lượt trước tôi chỉ dọn khối bên trong .woocommerce nên không chạm tới nó. */ /* Chừa khoảng thở PHÍA TRÊN thông báo (dưới thanh menu), và cắt khoảng trống phía dưới. Bản trước tôi đặt lề bằng 0 cả hai phía nên thông báo dính luôn vào thanh menu. */ .woocommerce-account:not(.logged-in) .message-wrapper, .woocommerce-account:not(.logged-in) .message-container, .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 34px auto 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Mọi lớp bọc giữa thông báo và khung đăng nhập đều không được thêm khoảng trống nữa */ .woocommerce-account:not(.logged-in) .woocommerce { padding-top: 0 !important; margin-top: 0 !important; } .woocommerce-account:not(.logged-in) #customer_login > .col-1, .woocommerce-account:not(.logged-in) #customer_login > .col-2, .woocommerce-account:not(.logged-in) .account-login-inner, .woocommerce-account:not(.logged-in) .account-register-inner { margin-top: 0 !important; } .woocommerce-account:not(.logged-in) .message-wrapper:empty, .woocommerce-account:not(.logged-in) .message-container:empty, .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty { display: none !important; } .woocommerce-account:not(.logged-in) .message-container::before, .woocommerce-account:not(.logged-in) .message-container > i { display: none !important; content: none !important; } .woocommerce-account:not(.logged-in) .woocommerce-error li, .woocommerce-account:not(.logged-in) .woocommerce-message li, .woocommerce-account:not(.logged-in) .woocommerce-info li { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Tách trang: trang Tài khoản chỉ còn khung Đăng nhập */ .woocommerce-account:not(.logged-in) #customer_login { grid-template-columns: 1fr !important; max-width: 470px; margin: 0 auto !important; } .woocommerce-account:not(.logged-in) #customer_login > .col-2, .woocommerce-account:not(.logged-in) #customer_login > .u-column2 { display: none !important; } .nxv-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 470px; margin: 16px auto 0; padding: 16px; background: #FBFAF8; border: 1px dashed #E8E3DD; border-radius: 12px; color: #5B5147; font-size: 14px; } .nxv-cta-btn { padding: 9px 18px; border-radius: 9px; background: var(--vnacc-accent, #C67930); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; } .nxv-cta-btn:hover { filter: brightness(1.07); color: #fff !important; } /* ---------- Thông báo trên trang đăng ký ---------- Module Tài khoản đã trang trí thông báo nhưng phạm vi của nó gắn với lớp "woocommerce-account" của thẻ body — trang đăng ký là trang thường nên không có lớp đó, thông báo sẽ trơ về kiểu mặc định của theme. Dựng lại cùng một phong cách ở đây. */ /* Khung thông báo — bản sao đúng của khung dùng ở trang đăng nhập, để hai trang giống nhau. Hai biểu tượng vẽ bằng SVG nhúng thẳng nên không cần file ảnh nào. */ .nxv-regpage .vnacc-notice { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left; margin: 0 0 16px; background: linear-gradient(135deg, #f0fbf4, #e2f5e9); border: 1px solid #bfe6cf; border-left: 5px solid #1e9e5a; border-radius: 12px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(30,158,90,.10); animation: nxvNoticeIn .45s cubic-bezier(.2,.8,.2,1) both; } .nxv-regpage .vnacc-notice::before { content: ""; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #1e9e5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 0 0 6px rgba(30,158,90,.14); animation: nxvNoticePop .5s .15s cubic-bezier(.2,.8,.2,1.4) both; } .nxv-regpage .vnacc-notice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .nxv-regpage .vnacc-notice-title { font-size: 15.5px; font-weight: 800; color: #146c3e; line-height: 1.35; } .nxv-regpage .vnacc-notice-text { font-size: 13.5px; font-weight: 400; color: #3f5f4c; line-height: 1.6; } .nxv-regpage .vnacc-notice.vnacc-notice--warn { background: linear-gradient(135deg, #FCF9F5, #F8F2E9); border-color: #E4D5C3; border-left-color: #9A502B; box-shadow: 0 6px 18px rgba(154,80,43,.10); } .nxv-regpage .vnacc-notice.vnacc-notice--warn::before { background: #9A502B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 0 0 6px rgba(154,80,43,.14); } .nxv-regpage .vnacc-notice--warn .vnacc-notice-title { color: #773E22; } .nxv-regpage .vnacc-notice--warn .vnacc-notice-text { color: #6b4a3a; } @keyframes nxvNoticePop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .nxv-regpage .vnacc-notice, .nxv-regpage .vnacc-notice::before { animation: none; } } /* Khối thông báo của theme trên trang này không còn nội dung, ẩn cho khỏi chiếm chỗ */ .nxv-regpage .message-wrapper:empty, .nxv-regpage .woocommerce-notices-wrapper:empty { display: none !important; } /* Thông báo rộng đúng bằng khung nhập bên dưới */ .nxv-regpage .vnacc-notice { max-width: 470px; margin-left: auto; margin-right: auto; } /* ---------- Thông báo trong trang tài khoản (đã đăng nhập) ---------- Ví dụ: thiếu trường khi lưu địa chỉ, cập nhật thông tin tài khoản. Những thông báo này do WooCommerce in thẳng dạng ul.woocommerce-error nên trơ về kiểu mặc định. Dựng lại cho giống khung ở trang đăng nhập và đăng ký. Điều kiện :not(:has(.vnacc-notice)) để không trang trí đè lên những thông báo đã được module khác dựng sẵn thành thẻ — nếu đè sẽ thành khung lồng khung. */ .woocommerce-account.logged-in .woocommerce-error:not(:has(.vnacc-notice)), .woocommerce-account.logged-in .woocommerce-message:not(:has(.vnacc-notice)), .woocommerce-account.logged-in .woocommerce-info:not(:has(.vnacc-notice)) { position: relative !important; display: block !important; list-style: none !important; width: 100% !important; margin: 0 0 16px !important; padding: 15px 18px 15px 56px !important; box-sizing: border-box !important; border-radius: 12px !important; font-size: 13.8px !important; line-height: 1.6 !important; text-align: left !important; min-height: 0 !important; animation: nxvNoticeIn .35s cubic-bezier(.2, .8, .2, 1) both; } .woocommerce-account.logged-in .woocommerce-error:not(:has(.vnacc-notice))::before, .woocommerce-account.logged-in .woocommerce-message:not(:has(.vnacc-notice))::before, .woocommerce-account.logged-in .woocommerce-info:not(:has(.vnacc-notice))::before { content: '' !important; position: absolute !important; left: 16px !important; top: 15px !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 14px !important; } .woocommerce-account.logged-in .woocommerce-error li, .woocommerce-account.logged-in .woocommerce-message li, .woocommerce-account.logged-in .woocommerce-info li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-account.logged-in .woocommerce-error li + li { margin-top: 5px !important; } .woocommerce-account.logged-in .woocommerce-error:not(:has(.vnacc-notice)) { background: linear-gradient(135deg, #FCF9F5, #F8F2E9) !important; border: 1px solid #E4D5C3 !important; border-left: 5px solid #9A502B !important; color: #773E22 !important; box-shadow: 0 6px 18px rgba(154, 80, 43, .10) !important; } .woocommerce-account.logged-in .woocommerce-error:not(:has(.vnacc-notice))::before { background-color: #9A502B !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E") !important; box-shadow: 0 0 0 5px rgba(154, 80, 43, .13) !important; } .woocommerce-account.logged-in .woocommerce-message:not(:has(.vnacc-notice)) { background: linear-gradient(135deg, #f0fbf4, #e2f5e9) !important; border: 1px solid #bfe6cf !important; border-left: 5px solid #1e9e5a !important; color: #146c3e !important; box-shadow: 0 6px 18px rgba(30, 158, 90, .10) !important; } .woocommerce-account.logged-in .woocommerce-message:not(:has(.vnacc-notice))::before { background-color: #1e9e5a !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; box-shadow: 0 0 0 5px rgba(30, 158, 90, .13) !important; } .woocommerce-account.logged-in .woocommerce-info:not(:has(.vnacc-notice)) { background: linear-gradient(135deg, #FCFAF7, #F8F3ED) !important; border: 1px solid #EDE0CE !important; border-left: 5px solid var(--vnacc-accent, #C67930) !important; color: #604531 !important; box-shadow: 0 6px 18px rgba(198, 121, 48, .10) !important; } .woocommerce-account.logged-in .woocommerce-info:not(:has(.vnacc-notice))::before { background-color: var(--vnacc-accent, #C67930) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.4h.01'/%3E%3C/svg%3E") !important; box-shadow: 0 0 0 5px rgba(198, 121, 48, .13) !important; } .woocommerce-account.logged-in .woocommerce-error .button, .woocommerce-account.logged-in .woocommerce-message .button { float: none !important; display: inline-block !important; margin: 8px 0 0 !important; min-height: 0 !important; padding: 7px 14px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; } /* Khung nhắc ở trang Đơn hàng dùng lại kiểu thông báo chung */ .nxv-orders-note { display: flex; align-items: flex-start; gap: 13px; max-width: none; margin: 0 0 18px; padding: 15px 18px; border-radius: 12px; font-size: 13.8px; line-height: 1.6; background: linear-gradient(135deg, #FCFAF7, #F8F3ED); border: 1px solid #EDE0CE; border-left: 5px solid var(--vnacc-accent, #C67930); color: #604531; box-shadow: 0 6px 18px rgba(198, 121, 48, .09); } .nxv-orders-note .nxv-note-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--vnacc-accent, #C67930) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.4h.01'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 5px rgba(198, 121, 48, .13); } .nxv-lock-note { display: block; margin-top: 6px; color: #A1968C; font-size: 12.5px; line-height: 1.5; } @keyframes nxvNoticeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .nxv-reg { max-width: 470px; margin: 0 auto; } .nxv-reg .woocommerce-form-register { padding: 26px !important; background: #fff !important; border: 1px solid #EDEAE7 !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(53, 39, 28, .06) !important; } .nxv-reg label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: #5B5147; } .nxv-reg input[type="text"], .nxv-reg input[type="email"], .nxv-reg input[type="password"] { width: 100%; height: auto !important; min-height: 46px; margin-bottom: 0 !important; padding: 0 14px !important; background: #FCFAF9 !important; border: 1.5px solid #EEEAE5 !important; border-radius: 10px !important; box-shadow: none !important; font-size: 14.5px; } .nxv-reg input:focus { background: #fff !important; border-color: var(--vnacc-accent, #C67930) !important; } .nxv-reg .form-row { margin-bottom: 14px !important; } .nxv-reg .woocommerce-form-register__submit { width: 100%; min-height: 48px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; }