/* Header — sticky, logo 2 dòng, search bar to, nav rời hàng dưới. Theo bố cục thật đã xem trực tiếp bjjfightgear.com (không chỉ audit CSS tĩnh): logo trái | search giữa | account+cart phải, hàng danh mục xuống dòng riêng. */ .bjj-site-header { position: sticky; top: 0; z-index: 999; } .bjj-header-top { align-items: center; } /* Logo — block core/site-logo, ảnh set qua Site Editor/Customize → Site Identity. Container của mình khớp đúng 1400px như site gốc nên dùng thẳng số đo px thật (cao 80px, rộng auto theo tỉ lệ ảnh thật admin upload — không ép cứng theo 1 tỉ lệ cố định). */ .bjj-logo { margin: 0; flex-shrink: 0; width: 240px !important; } .bjj-logo a { display: block; -webkit-user-drag: none; outline: none; } .bjj-logo a:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; border-radius: 2px; } .bjj-logo.wp-block-site-logo img { width: 100%; height: auto; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* Search bar — dropdown danh mục (theme) gắn vào form của plugin FiboSearch (ajax-search-for-woocommerce) qua hook 'dgwt/wcas/form', số liệu đo trực tiếp trên bản gốc: bar cao 48px radius 4px border 1px rgba(128,128,128,.2) shadow 0 2px 3px rgba(128,128,128,.11), select ~170px, input padding 15px 10px font-size 16px, nút xanh #1db121 width 54px. Toàn bộ style .dgwt-wcas-* dưới đây LÀ ghi đè CSS mặc định của plugin — không sửa file plugin. */ .bjj-product-search { display: flex; align-items: stretch; flex-grow: 1; max-width: 968px; height: 48px; border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 4px; box-shadow: 0 2px 3px rgba(128, 128, 128, 0.11); overflow: hidden; font-family: var(--wp--preset--font-family--open-sans); font-size: 16px; line-height: normal; } .bjj-product-search * { box-sizing: border-box; font-size: 16px; line-height: normal; } .bjj-product-search .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Wrapp/form/sf-wrapp của plugin vốn không phải flex (layout float) — ép về flex để dropdown danh mục (order:-1) + input + nút xếp ngang gọn trong 1 hàng như bản gốc. */ .bjj-product-search .dgwt-wcas-search-wrapp, .bjj-product-search .dgwt-wcas-search-form, .bjj-product-search .dgwt-wcas-sf-wrapp { display: flex !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; background: none !important; } .bjj-product-search .bjj-search-cat { order: -1; flex: 0 0 auto; width: 170px; max-width: 34%; height: 100%; border: none; border-right: 1px solid rgba(128, 128, 128, 0.2); background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px; color: var(--wp--preset--color--contrast); padding: 0 22px 0 12px; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .bjj-product-search input[type="search"].dgwt-wcas-search-input { flex: 1 !important; order: 0; width: auto !important; height: 100% !important; border: none !important; box-shadow: none !important; background: none !important; padding: 15px 10px !important; margin: 0 !important; transition: background-color var(--bjj-transition-base, 200ms) ease; } .bjj-product-search input[type="search"].dgwt-wcas-search-input:focus, .bjj-product-search .bjj-search-cat:focus { outline: none; background: var(--wp--preset--color--accent-5) !important; } .bjj-product-search .dgwt-wcas-search-submit { order: 1; flex: 0 0 54px; height: 100% !important; border-radius: 0 4px 4px 0 !important; background: var(--wp--preset--color--accent-2) !important; color: var(--wp--preset--color--base) !important; border: none !important; min-width: 54px; padding: 0 18px !important; display: flex !important; align-items: center; justify-content: center; transition: background-color var(--bjj-transition-base, 200ms) ease; } .bjj-product-search .dgwt-wcas-search-submit:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black) !important; } .bjj-product-search .dgwt-wcas-search-submit svg { width: 18px; height: 18px; fill: currentColor; } .bjj-product-search .dgwt-wcas-search-submit::before { display: none !important; content: none !important; } .bjj-product-search input[type="search"].dgwt-wcas-search-input::placeholder, .bjj-product-search input[type="search"].dgwt-wcas-search-input::-webkit-input-placeholder { font-style: normal; } /* Panel gợi ý live search — theme set underline mặc định cho , bản gốc không có */ .dgwt-wcas-suggestions-wrapp a { text-decoration: none; } .bjj-product-search .dgwt-wcas-preloader, .bjj-product-search .dgwt-wcas-voice-search { display: none !important; } /* Header action icons (account / mini-cart) */ .bjj-header-actions { flex-shrink: 0; } .bjj-header-actions .wc-block-mini-cart__button, .bjj-header-actions .wc-block-customer-account a { transition: color var(--bjj-transition-base, 200ms) ease; } .bjj-header-actions .wc-block-mini-cart__amount { display: none; } /* Badge số lượng trên icon giỏ hàng. Mặc định của WooCommerce là nền ĐEN (#1d1d1d) + chữ ĐỎ, cỡ 19px trên vòng tròn 28px — hai màu mạnh đặt cạnh nhau gây chói, và con số to gần bằng chính cái icon giỏ hàng nên nó tranh sự chú ý với logo lẫn thanh tìm kiếm. Đổi thành vòng tròn đỏ accent-1 + chữ trắng, thu nhỏ còn 18px/11px: cùng đỏ thương hiệu như nhãn SALE và nút CTA, nhưng vì diện tích nhỏ nên nó chỉ "báo hiệu" chứ không "hét". Selector kèm .wc-block-mini-cart__button để đủ nặng, khỏi phải dùng !important. */ .bjj-header-actions .wc-block-mini-cart__button .wc-block-mini-cart__badge { min-width: 18px; height: 18px; padding: 0 5px; border: 0; border-radius: 999px; /* !important là BẮT BUỘC ở 2 dòng màu này, không phải cho tiện: JS của mini-cart tự ghi inline style lên badge (đo được: style="background-color: rgb(255,255,255); color: rgb(206,34,25)"), nó dò màu từ ngữ cảnh xung quanh nên còn ĐỔI theo từng trang — lúc thì nền đen chữ đỏ, lúc nền trắng chữ đỏ. Inline style thắng mọi selector, chỉ !important mới đè được. Các thuộc tính còn lại trong khối này không bị JS ghi đè nên để bình thường. */ background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--base) !important; font-family: var(--wp--preset--font-family--open-sans); font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 0; text-align: center; box-sizing: border-box; } /* ========================================================================== Drawer giỏ hàng (mini-cart trượt ra từ mép phải) ========================================================================== */ /* Hai nút ở đáy drawer mặc định là Open Sans 18px/700, padding 16px 36px — cao tới 82px và chữ phải xuống 2 dòng vì padding ngang 36px ăn hết chỗ. Trong một drawer hẹp, hai khối chữ to như vậy át hẳn danh sách sản phẩm phía trên. Đưa về đúng quy ước nút của site (Montserrat 800 uppercase, bo góc 3px) nhưng cỡ nhỏ hơn nút trang chính vì bối cảnh hẹp hơn: 13px, padding ngang 14px để chữ đủ chỗ nằm gọn 1 dòng. */ .wc-block-mini-cart__footer-actions .wc-block-components-button, .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart, .wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout { padding: 12px 14px !important; border-radius: 3px !important; font-family: var(--wp--preset--font-family--montserrat) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: 0.3px !important; text-transform: uppercase; text-align: center; white-space: nowrap; /* WooCommerce vẽ viền nút bằng box-shadow inset 1px màu #1d1d1d chứ không bằng border. Nếu chỉ đặt border mà quên tắt shadow này thì nút phụ vẫn hiện viền ĐEN đậm chồng lên viền xám nhạt của mình — nhìn ra một khung đen thô, đúng thứ cần bỏ. */ box-shadow: none !important; } /* Nút "Xem giỏ hàng" là hành động phụ — viền mảnh, nền trắng, để nút "Tiến hành thanh toán" màu xanh giữ vai trò hành động chính duy nhất. */ .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart { background: var(--wp--preset--color--base) !important; border: 1px solid var(--wp--preset--color--accent-6) !important; color: var(--wp--preset--color--contrast) !important; } .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover { background: var(--wp--preset--color--accent-5) !important; border-color: var(--wp--preset--color--accent-3) !important; } .wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout { background: var(--wp--preset--color--accent-2) !important; color: var(--wp--preset--color--base) !important; border: 1px solid var(--wp--preset--color--accent-2) !important; } .wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black) !important; border-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black) !important; } .bjj-header-actions .wc-block-customer-account__link { display: inline-flex; align-items: center; color: var(--wp--preset--color--contrast); } .bjj-header-actions .wc-block-customer-account__link svg { width: 22px; height: 22px; } .bjj-header-actions .wc-block-customer-account__link:hover { color: var(--wp--preset--color--accent-1); } /* Hàng nav danh mục — tách riêng bên dưới, KHÔNG có viền (đối chiếu site gốc: không có gạch kẻ trên/dưới hàng category). Kéo lề trái -15px để chữ mục đầu tiên ("GI") thẳng hàng với mép trái logo — mục nav có padding-left 15px nên nếu không bù trừ sẽ bị lệch vào trong. */ .bjj-header-bottom { padding: 4px 0; } /* Lưu ý: class .bjj-nav nằm trên CẢ