/* BF365 global header + footer */
/* T3 — co chu theo bac chieu cao: sm 40/12 · md 44/14 · lg 52/16 · xl 56/16.
* Nhung nut duoc ghim o file nay cao dung bac nhung co chu thi khong. Phan lon
* KHONG co luat font-size nao cua theme: chung dang an theo `button{font-size:1rem}`
* trong stylesheet inline cua Astra — 16px o desktop va 14,592px tu 921px tro xuong
* (Astra dat html{font-size:91.2%}). Mot class don la (0,1,0), du thang type selector
* (0,0,1) do, nen khong can !important moi.
* Icon role va link-button KHONG ghim, dung pham vi da chot. */
/*
* Canonical design tokens: assets/css/tokens.css (enqueued as bf365-tokens).
* --bf365-* values below are compatibility aliases / UI-scale extensions.
*
* Phase 11B1: --bf365-white is a fixed accessible light value (inverse /
* on-primary / legacy white surfaces). It must NOT track --bf-bg-main /
* --bf-surface-page, or primary-button text would break when surfaces darken.
* Aliases stay on :root so they remain defined even if data-bf-theme="dark"
* is temporarily applied for inspection.
*/
:root {
--bf365-red: var(--bf-color-red, #e60012);
--bf365-red-dark: var(--bf-color-red-dark, #c9000f);
--bf365-black: var(--bf-color-primary, #050505);
--bf365-white: var(--bf-on-primary, #ffffff);
--bf365-text: var(--bf-text-main, #111111);
--bf365-muted: var(--bf-text-muted, #666666);
--bf365-border: var(--bf-border, #e5e7eb);
--bf365-bg-soft: var(--bf-bg-soft, #f7f7f8);
--bf365-success: var(--bf-color-green, #16a34a);
/* Container tokens: canonical values in tokens.css */
/* Radius scale */
--bf365-radius-sm: var(--bf-radius-sm, 8px);
--bf365-radius-md: var(--bf-radius-md, 12px);
--bf365-radius-lg: var(--bf-radius-lg, 18px);
--bf365-radius-xl: var(--bf-radius-xl, 24px);
--bf365-section-gap-desktop: var(--bf-section-gap-desktop, 56px);
--bf365-section-gap-tablet: 44px;
--bf365-section-gap-mobile: var(--bf-section-gap-mobile, 32px);
--bf365-block-gap: 24px;
/* Ecommerce page shell — Product Detail + Archive */
--bf365-page-top-gap-desktop: 24px;
--bf365-page-top-gap-tablet: 20px;
--bf365-page-top-gap-mobile: 14px;
--bf365-page-bottom-gap-desktop: 0px;
--bf365-page-bottom-gap-tablet: 0px;
--bf365-page-bottom-gap-mobile: 0px;
--bf365-footer-gap-desktop: 0px;
--bf365-footer-gap-mobile: 0px;
/* Typography scale */
--bf365-h1-size: clamp(32px, 4vw, 72px);
--bf365-h1-line: 1.02;
--bf365-h2-size: clamp(24px, 2.4vw, 42px);
--bf365-h2-line: 1.15;
--bf365-h3-size: clamp(17px, 1.4vw, 22px);
--bf365-h3-line: 1.3;
--bf365-h4-size: clamp(15px, 1.1vw, 18px);
--bf365-h4-line: 1.35;
--bf365-body-size: clamp(15px, 0.35vw + 14px, 17px);
--bf365-body-line: 1.6;
--bf365-meta-size: clamp(12px, 0.2vw + 11px, 14px);
--bf365-meta-line: 1.45;
--bf365-control-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
--bf365-control-shadow-hover: 0 8px 22px rgba(230, 0, 18, 0.28);
}
/*
* Phase 11B2 — dark chrome bridges for aliases used by this stylesheet.
* Do NOT remap --bf-bg-main / --bf-text-main globally (page CSS migrates later).
* --bf365-white / --bf365-black stay fixed for inverse text and action chrome.
*/
[data-bf-theme="dark"] {
color-scheme: dark;
--bf365-text: var(--bf-text-primary);
--bf365-muted: var(--bf-text-muted-dark-ready);
--bf365-border: var(--bf-border-default);
--bf365-bg-soft: var(--bf-surface-muted);
}
html[data-bf-theme="dark"] body {
background-color: var(--bf-surface-page);
color: var(--bf-text-primary);
}
/* ── BF365 UI controls — reset theme / WooCommerce button defaults ─────── */ button.bf-carousel-arrow,
button.bf365-carousel-arrow,
button.bf-pill-toggle,
button.bf-link-action,
button.bf-home-section__link,
button.bf-btn,
.bf-btn {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
line-height: inherit;
}
button.bf-link-action {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
/* BF365 text buttons: override Astra inline button{border-radius:4px}
These four are text buttons with no background and no border, so Astra's 4px
paints nothing -- this only removes an off-scale value from the system, and
lines their focus ring up with the 8px step. Measured: 0 pixels change.
.bf-size-selector__guide-cta is deliberately excluded: it draws a border-top
as a divider, and rounding would visibly curve the ends of that line. */
.bf-home-section__link,
.bf-filter-drawer__clear,
.bf-size-selector__guide-link,
.bf-product-card__reveal-toggle {
border-radius: var(--bf-radius-sm);
}
/* ── BF365 shared container ─────────────────────────────────────────────── */
.bf-container,
.bf365-container,
.bf-shop,
.bf-pdp,
.bf-cart,
.bf-checkout,
.bf-account__inner,
.bf-order-received,
.bf-wishlist-page:not(.bf-wishlist-page--account) {
width: 100%;
max-width: var(--bf365-container-max);
margin-inline: auto;
padding-inline: var(--bf365-container-gutter-mobile);
box-sizing: border-box;
}
@media (min-width: 768px) {
.bf-container,
.bf365-container,
.bf-shop,
.bf-pdp,
.bf-cart,
.bf-checkout,
.bf-account__inner,
.bf-order-received,
.bf-wishlist-page:not(.bf-wishlist-page--account) {
padding-inline: var(--bf365-container-gutter-tablet);
}
}
@media (min-width: 1024px) {
.bf-container,
.bf365-container,
.bf-shop,
.bf-pdp,
.bf-cart,
.bf-checkout,
.bf-account__inner,
.bf-order-received,
.bf-wishlist-page:not(.bf-wishlist-page--account) {
padding-inline: var(--bf365-container-gutter-desktop);
}
}
/* Astra shell — BF365 containers own gutters.
* Archive body classes must be listed here too, otherwise Astra's fixed-width
* .ast-container keeps wrapping .bf-shop and the archive stops resizing/reflowing
* fluidly the way single-product and static pages do. */
body.single-product .site-content > .ast-container,
body.post-type-archive-product .site-content > .ast-container,
body.tax-product_cat .site-content > .ast-container,
body.tax-product_tag .site-content > .ast-container,
body.tax-product_brand .site-content > .ast-container,
body.woocommerce-cart .site-content > .ast-container,
body.woocommerce-checkout .site-content > .ast-container,
body.woocommerce-account .site-content > .ast-container,
body.woocommerce-order-received .site-content > .ast-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
body.bf365-wishlist-page .site-content > .ast-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/*
* Blog + static pages: let the BF365 1440 container own the width/gutters.
* Astra wraps these in .site-content > .ast-container (~1240px + padding), which
* squeezed the layout and doubled the gutters. Neutralizing it here gives blog
* archive, single post, and every static page (incl. outlet) one shared rhythm.
*/
body.bf365-blog-archive .site-content > .ast-container,
body.bf365-blog-single .site-content > .ast-container,
body.bf365-static-page .site-content > .ast-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* Ecommerce page shell — shared top rhythm, flush footer (PDP + Archive) */
body.single-product #content.site-content,
body.single-product.ast-separate-container #content.site-content,
body.single-product.ast-plain-container #content.site-content,
body.post-type-archive-product #content.site-content,
body.post-type-archive-product.ast-separate-container #content.site-content,
body.post-type-archive-product.ast-plain-container #content.site-content,
body.tax-product_cat #content.site-content,
body.tax-product_cat.ast-separate-container #content.site-content,
body.tax-product_cat.ast-plain-container #content.site-content,
body.tax-product_tag #content.site-content,
body.tax-product_tag.ast-separate-container #content.site-content,
body.tax-product_tag.ast-plain-container #content.site-content,
body.tax-product_brand #content.site-content,
body.tax-product_brand.ast-separate-container #content.site-content,
body.tax-product_brand.ast-plain-container #content.site-content {
padding-top: 0;
padding-bottom: 0;
}
body.single-product .bf-pdp,
body.post-type-archive-product .bf-shop,
body.tax-product_cat .bf-shop,
body.tax-product_tag .bf-shop,
body.tax-product_brand .bf-shop {
/* Cap PDP + Archive to the shared BF365 container, exactly like static/blog.
* This 0,2,0 rule intentionally outranks archive.css `.bf-shop{max-width:100%}`
* (0,1,0). padding-inline still comes from the shared `.bf-container` rule, so
* the container stays fluid below the cap and centered above it. */
width: 100%;
max-width: var(--bf365-container-max);
margin-inline: auto;
box-sizing: border-box;
padding-top: var(--bf365-page-top-gap-mobile);
padding-bottom: var(--bf365-page-bottom-gap-mobile);
}
@media (min-width: 768px) {
body.single-product .bf-pdp,
body.post-type-archive-product .bf-shop,
body.tax-product_cat .bf-shop,
body.tax-product_tag .bf-shop,
body.tax-product_brand .bf-shop {
padding-top: var(--bf365-page-top-gap-tablet);
padding-bottom: var(--bf365-page-bottom-gap-tablet);
}
}
@media (min-width: 1024px) {
body.single-product .bf-pdp,
body.post-type-archive-product .bf-shop,
body.tax-product_cat .bf-shop,
body.tax-product_tag .bf-shop,
body.tax-product_brand .bf-shop {
padding-top: var(--bf365-page-top-gap-desktop);
padding-bottom: var(--bf365-page-bottom-gap-desktop);
}
}
body.single-product .bf-site-footer,
body.post-type-archive-product .bf-site-footer,
body.tax-product_cat .bf-site-footer,
body.tax-product_tag .bf-site-footer,
body.tax-product_brand .bf-site-footer {
margin-top: var(--bf365-footer-gap-desktop);
}
@media (max-width: 767px) {
body.single-product .bf-site-footer,
body.post-type-archive-product .bf-site-footer,
body.tax-product_cat .bf-site-footer,
body.tax-product_tag .bf-site-footer,
body.tax-product_brand .bf-site-footer {
margin-top: var(--bf365-footer-gap-mobile);
}
}
@media (max-width: 767px) {
body.single-product {
--bf365-page-bottom-gap-mobile: 24px;
--bf365-footer-gap-mobile: 16px;
}
}
/* ── BF365 Design System — typography, sections, ecommerce UI ──────────── */
/* Page / section titles (semantic h1–h4 within BF365 shells) */
.bf365-heading,
.bf-cart__title,
.bf-checkout__title,
.bf-account__title,
.bf-wishlist-page__title,
.bf-shop__hero-title,
.bf-product-summary__title {
margin: 0;
font-weight: var(--bf-weight-black);
color: var(--bf365-text);
letter-spacing: -0.03em;
}
.bf365-heading--h1,
.bf-cart__title,
.bf-checkout__title,
.bf-account__title,
.bf-wishlist-page__title,
.bf-shop__hero-title,
.bf-product-summary__title {
font-size: var(--bf365-h1-size);
line-height: var(--bf365-h1-line);
}
.bf365-heading--h2,
.bf365-section-title,
.bf-home-section__title,
.bf-home-weekly-deals__title,
.bf-home-seo__title,
.bf-section-heading,
.bf-archive-reviews__title,
.bf-cart__totals-title {
margin: 0;
font-size: var(--bf365-h2-size);
line-height: var(--bf365-h2-line);
font-weight: var(--bf-weight-black);
letter-spacing: -0.02em;
color: var(--bf365-text);
}
.bf365-heading--h3,
.bf365-section-subtitle,
.bf-product-card__title,
.bf-home-needs__title,
.bf-home-weekly-deals__name,
.bf-home-articles__title,
.bf-home-why__title,
.bf-home-categories__label,
.bf-wishlist-item__title {
margin: 0;
font-size: var(--bf365-h3-size);
line-height: var(--bf365-h3-line);
font-weight: var(--bf-weight-bold);
color: var(--bf365-text);
}
.bf365-heading--h4 {
margin: 0;
font-size: var(--bf365-h4-size);
line-height: var(--bf365-h4-line);
font-weight: var(--bf-weight-bold);
color: var(--bf365-text);
}
.bf365-text-muted {
color: var(--bf365-muted);
font-size: var(--bf365-meta-size);
line-height: var(--bf365-meta-line);
}
/* Section spacing system */
.bf365-section,
.bf-home-section {
padding-block: 0;
}
.bf365-section + .bf365-section,
.bf-home-section + .bf-home-section {
margin-top: var(--bf365-section-gap-mobile);
}
/* Homepage uses flex gap on .bf-home — avoid double spacing */
.bf-home .bf-home-section + .bf-home-section {
margin-top: 0;
}
.bf365-section--compact {
margin-top: calc(var(--bf365-section-gap-mobile) * 0.65);
}
.bf365-section--flush {
margin-top: 0;
}
.bf365-section__header,
.bf-home-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bf-space-4);
margin-bottom: var(--bf365-block-gap);
}
.bf365-section__title {
margin: 0;
}
.bf365-section__actions {
display: inline-flex;
align-items: center;
gap: var(--bf-space-2);
flex-shrink: 0;
}
@media (min-width: 768px) {
.bf365-section + .bf365-section,
.bf-home-section + .bf-home-section {
margin-top: var(--bf365-section-gap-tablet);
}
.bf365-section--compact {
margin-top: calc(var(--bf365-section-gap-tablet) * 0.65);
}
}
@media (min-width: 1024px) {
.bf365-section + .bf365-section,
.bf-home-section + .bf-home-section {
margin-top: var(--bf365-section-gap-desktop);
}
.bf365-section--compact {
margin-top: calc(var(--bf365-section-gap-desktop) * 0.65);
}
}
/* Product card / price / badge (shared ecommerce patterns) */
.bf-product-card {
border-radius: var(--bf365-radius-md);
}
.bf-product-card__brand,
.bf-product-card__meta {
font-size: var(--bf365-meta-size);
font-weight: var(--bf-weight-black);
text-transform: uppercase;
color: var(--bf365-muted);
}
.bf-product-card__title {
margin: var(--bf-space-1) 0 var(--bf-space-2);
font-size: var(--bf365-h3-size);
line-height: var(--bf365-h3-line);
font-weight: var(--bf-weight-bold);
}
.bf-product-card__price,
.bf-card-price {
font-size: clamp(15px, 0.4vw + 14px, 17px);
font-weight: var(--bf-weight-black);
line-height: 1.2;
}
.bf-card-price__sale,
.bf-card-price__sale .amount,
.bf-card-price__sale .woocommerce-Price-amount,
.bf-product-card__price ins,
.bf-product-card__price .amount {
color: var(--bf365-red);
text-decoration: none;
font-weight: var(--bf-weight-black);
}
.bf-card-price__regular del,
.bf-card-price__regular .amount,
.bf-product-card__old-price {
color: var(--bf365-muted);
font-weight: var(--bf-weight-medium);
text-decoration: line-through;
font-size: var(--bf365-meta-size);
}
/* B1: LUAT THANG duy nhat cho .bf-badge-sale — nen, chu, bo goc, co chu.
* Bon luat con lai (components.css, blog.css, product.css x2) chi con DINH VI.
* global.css nap sau components.css (bf365-global phu thuoc bf365-components) nen
* voi cung do dac hieu `.bf-badge-sale`, luat nay thang — do la ly do no la cho dat
* dinh nghia, khong phai components.css.
* Bo goc: badge nay bam goc anh o ca hai cho dung (do hinh hoc: de len ![]()
18/18,
* tam cach goc 37-50px) nen theo bac sm 8. Co chu: doi tu --bf365-meta-size, von la
* clamp(12px, 0.2vw + 11px, 14px), sang --bf-text-xs co dinh 12px — mot badge khong
* nen doi co chu theo be rong man hinh. */
.bf-badge-sale {
background: var(--bf365-red);
color: var(--bf365-white);
border-radius: var(--bf-radius-sm);
padding: var(--bf-space-1) var(--bf-space-2);
font-size: var(--bf-text-xs);
font-weight: var(--bf-weight-black);
line-height: 16px;
}
.bf-product-card__sold,
.bf-card-sold-count {
color: var(--bf365-muted);
font-size: var(--bf365-meta-size);
font-weight: var(--bf-weight-semibold);
}
/* Forms — shared field styling within BF365 pages */
.bf365-field,
.bf-cart input.input-text,
.bf-cart textarea,
.bf-cart select,
.bf-checkout input.input-text,
.bf-checkout textarea,
.bf-checkout select,
.bf-account input.input-text,
.bf-account textarea,
.bf-account select,
.bf-shop input.input-text,
.bf-pdp input.input-text,
.bf-pdp textarea,
.bf-pdp select {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--bf365-border);
border-radius: var(--bf365-radius-sm);
padding: 10px 14px;
font-size: var(--bf365-body-size);
line-height: var(--bf365-body-line);
color: var(--bf-text-primary) !important;
background: var(--bf-surface-input) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bf365-field:focus-visible,
.bf-cart input.input-text:focus-visible,
.bf-cart textarea:focus-visible,
.bf-cart select:focus-visible,
.bf-checkout input.input-text:focus-visible,
.bf-checkout textarea:focus-visible,
.bf-checkout select:focus-visible,
.bf-account input.input-text:focus-visible,
.bf-account textarea:focus-visible,
.bf-account select:focus-visible,
.bf-shop input.input-text:focus-visible,
.bf-pdp input.input-text:focus-visible,
.bf-pdp textarea:focus-visible,
.bf-pdp select:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 1px;
border-color: var(--bf365-red);
}
.bf365-field::placeholder,
.bf-cart input.input-text::placeholder,
.bf-cart textarea::placeholder,
.bf-checkout input.input-text::placeholder,
.bf-checkout textarea::placeholder,
.bf-account input.input-text::placeholder,
.bf-account textarea::placeholder,
.bf-shop input.input-text::placeholder,
.bf-pdp input.input-text::placeholder,
.bf-pdp textarea::placeholder {
color: var(--bf-text-muted-dark-ready);
opacity: 1;
}
.bf365-field:disabled,
.bf-cart input.input-text:disabled,
.bf-cart textarea:disabled,
.bf-cart select:disabled,
.bf-checkout input.input-text:disabled,
.bf-checkout textarea:disabled,
.bf-checkout select:disabled,
.bf-account input.input-text:disabled,
.bf-account textarea:disabled,
.bf-account select:disabled,
.bf-shop input.input-text:disabled,
.bf-pdp input.input-text:disabled,
.bf-pdp textarea:disabled,
.bf-pdp select:disabled {
background: var(--bf-disabled-bg);
color: var(--bf-disabled-text);
cursor: not-allowed;
}
.bf365-field:-webkit-autofill,
.bf365-field:-webkit-autofill:hover,
.bf365-field:-webkit-autofill:focus,
.bf-cart input.input-text:-webkit-autofill,
.bf-checkout input.input-text:-webkit-autofill,
.bf-account input.input-text:-webkit-autofill,
.bf-shop input.input-text:-webkit-autofill,
.bf-pdp input.input-text:-webkit-autofill,
.bf-site-header__search input.bf-site-header__search-input:-webkit-autofill,
.bf-mobile-search__form .bf-mobile-search__input:-webkit-autofill,
.bf-site-footer .bf-site-footer__newsletter input.bf-site-footer__newsletter-input:-webkit-autofill {
-webkit-text-fill-color: var(--bf-text-primary);
caret-color: var(--bf-text-primary);
box-shadow: 0 0 0 1000px var(--bf-surface-input) inset;
transition: background-color 99999s ease-out;
}
/* WooCommerce notices — BF365 palette */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
border-radius: var(--bf365-radius-md);
border: 1px solid var(--bf365-border);
border-left-width: 4px;
font-size: var(--bf365-body-size);
line-height: var(--bf365-body-line);
}
.woocommerce-message,
.woocommerce-info {
border-left-color: var(--bf365-black);
background: var(--bf-surface-muted);
color: var(--bf-text-primary);
}
.woocommerce-error {
border-left-color: var(--bf365-red);
background: var(--bf-color-red-soft, #fff5f5);
color: var(--bf-text-primary);
border-color: var(--bf-border-default);
}
/* Notice icon / check mark — BF365 (red/black), never blue. */
.woocommerce-message::before,
.woocommerce-info::before {
color: var(--bf365-black);
}
.woocommerce-error::before {
color: var(--bf365-red);
}
/*
* Buttons inside WooCommerce notices ("Xem giỏ hàng" / view-cart, etc.).
* WooCommerce/Astra style .woocommerce a.button (0,2,1) with a blue accent that
* outranks BF365 variant classes, so scope + !important here to force the BF365
* black → red button system. Notice content, links and undo remain untouched.
*/
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notices-wrapper a.button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward,
.woocommerce-notices-wrapper a.wc-forward,
.wc-block-components-notice-banner a.button {
background-color: var(--bf365-black) !important;
border: 1px solid var(--bf365-black) !important;
color: var(--bf365-white) !important;
background-image: none !important;
text-shadow: none !important;
box-shadow: none !important;
border-radius: var(--bf365-radius-md) !important;
font-weight: var(--bf-weight-bold) !important;
}
.woocommerce-message a.button:hover,
.woocommerce-message a.button:focus-visible,
.woocommerce-info a.button:hover,
.woocommerce-info a.button:focus-visible,
.woocommerce-error a.button:hover,
.woocommerce-error a.button:focus-visible,
.woocommerce-notices-wrapper a.button:hover,
.woocommerce-notices-wrapper a.button:focus-visible,
.woocommerce-message a.wc-forward:hover,
.woocommerce-message a.wc-forward:focus-visible,
.woocommerce-notices-wrapper a.wc-forward:hover,
.woocommerce-notices-wrapper a.wc-forward:focus-visible,
.wc-block-components-notice-banner a.button:hover,
.wc-block-components-notice-banner a.button:focus-visible {
background-color: var(--bf365-red) !important;
border-color: var(--bf365-red) !important;
color: var(--bf365-white) !important;
}
/* Native undo / restore-item link ("Hoàn tác?") — BF365 red text link, not blue. */
.woocommerce-message a.restore-item,
.woocommerce-info a.restore-item,
.woocommerce-notices-wrapper a.restore-item {
color: var(--bf365-red) !important;
font-weight: var(--bf-weight-bold);
text-decoration: underline;
}
.woocommerce-message a.restore-item:hover,
.woocommerce-message a.restore-item:focus-visible,
.woocommerce-info a.restore-item:hover,
.woocommerce-info a.restore-item:focus-visible,
.woocommerce-notices-wrapper a.restore-item:hover,
.woocommerce-notices-wrapper a.restore-item:focus-visible {
color: var(--bf365-black) !important;
}
/* SEO content blocks */
.bf365-seo-content,
.bf-home-seo__content,
.bf-archive-seo__content {
max-width: 860px;
font-size: var(--bf365-body-size);
line-height: var(--bf365-body-line);
color: var(--bf365-text);
}
.bf365-seo-content p,
.bf-home-seo__content p,
.bf-archive-seo__content p {
margin: 0 0 1em;
}
.bf365-seo-content p:last-child,
.bf-home-seo__content p:last-child,
.bf-archive-seo__content p:last-child {
margin-bottom: 0;
}
.bf365-seo-content ul,
.bf-home-seo__content ul,
.bf-archive-seo__content ul {
margin: 0 0 1em;
padding-left: 1.25em;
}
/* Breadcrumb / pagination — focus states */
.bf-breadcrumb a:focus-visible,
.bf-pagination a:focus-visible,
.bf-pagination button:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
}
/* ── Carousel arrows (shared) ───────────────────────────────────────────── */ .bf-carousel-arrow,
.bf365-carousel-arrow,
button.bf-carousel-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--bf-radius-pill);
background-color: var(--bf365-black);
color: var(--bf365-white);
box-shadow: var(--bf365-control-shadow);
cursor: pointer;
flex-shrink: 0;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease,
opacity 0.2s ease,
box-shadow 0.2s ease;
}
.bf-carousel-arrow:hover:not(:disabled),
button.bf-carousel-arrow:hover:not(:disabled),
.bf-carousel-arrow:focus-visible:not(:disabled),
button.bf-carousel-arrow:focus-visible:not(:disabled) {
background-color: var(--bf365-red);
border-color: var(--bf365-red);
color: var(--bf365-white);
box-shadow: var(--bf365-control-shadow-hover);
}
.bf-carousel-arrow:active:not(:disabled),
button.bf-carousel-arrow:active:not(:disabled) {
transform: scale(0.96);
}
.bf-carousel-arrow:focus-visible,
button.bf-carousel-arrow:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
}
.bf-carousel-arrow:disabled,
button.bf-carousel-arrow:disabled {
background-color: var(--bf365-black);
border-color: rgba(255, 255, 255, 0.14);
color: var(--bf365-white);
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
.bf-carousel-arrow[hidden] {
display: none;
}
.bf-carousel-arrow__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
pointer-events: none;
}
.bf-carousel-arrow__icon svg {
display: block;
width: 20px;
height: 20px;
}
/* ── BF365 button system (source of truth) ──────────────────────────────── */ .bf-btn:focus-visible,
.bf365-btn:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
}
/*
* Astra sets `button:focus { outline: 0 }` globally (main.min.css).
* Restore BF365 red :focus-visible rings on component controls that are
* not `.bf-btn` (icon buttons, PDP purchase, drawers, size chips, etc.).
* Scoped to confirmed BF365 classnames — not a broad `button {}` reset. */ .bf-site-header__icon-btn:focus-visible,
.bf-theme-pref-desktop__trigger:focus-visible,
.bf-mobile-drawer__close:focus-visible,
.bf-mobile-drawer__submenu-toggle:focus-visible,
.bf-filter-drawer__apply:focus-visible,
.bf-filter-drawer__clear:focus-visible,
.bf-product-card__wishlist:focus-visible,
.bf-product-card__cart:focus-visible,
.bf-product-card__size-chip:focus-visible,
.bf-product-card__reveal-toggle:focus-visible,
.bf-size-option:focus-visible,
.bf-size-selector__guide-link:focus-visible,
.bf-size-selector__guide-cta:focus-visible,
.bf-customer-proof__filter:focus-visible,
.bf-customer-proof__view-all:focus-visible,
.bf-product-info-card__toggle:focus-visible,
.bf-product-story__tab:focus-visible,
.bf-sticky-atc__btn:focus-visible,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button:focus-visible,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:focus-visible,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn:focus-visible,
.woocommerce-cart .bf-cart--empty .return-to-shop .button:focus-visible,
.bf-account .show-password-input:focus-visible {
outline: 2px solid var(--bf365-red, #e60012);
outline-offset: 2px;
}
.bf-btn--primary {
background-color: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--primary:hover:not(:disabled) {
background-color: var(--bf365-red);
border-color: var(--bf365-red);
color: var(--bf365-white);
}
/* --- Interaction states (Lo A, 2026-09-05) -------------------------------
* Astra emits, inline in :
* button:focus, button:hover, ... { background-color: var(--ast-global-color-1) }
* at (0,1,1) = rgb(4, 92, 180). Every :focus rule in this theme set only
* `outline: none`, and several :hover rules set only border-color/color, so
* Astra owned the BACKGROUND of 288 of 392 rendered buttons. Measured with CDP
* CSS.forcePseudoState, transitions disabled -- reading computed style without
* disabling them returns mid-transition blends and undercounts badly.
* The rules below are (0,2,0) or (0,3,0) -- a class plus pseudo-classes -- so
* they win on specificity alone. No !important is added and none is removed.
* `:focus:not(:hover)` restores the RESTING colour: scoping it that way lets the
* :hover rule keep priority by construction instead of by source order.
* Colour only -- no radius, height, padding, font-size or weight is touched. */
.bf-btn:disabled,
.bf-btn[disabled],
.bf-btn.is-disabled {
background-color: var(--bf-disabled-bg);
border-color: var(--bf-disabled-bg);
color: var(--bf-disabled-text);
cursor: not-allowed;
}
.bf-btn--primary:focus:not(:hover):not(:disabled) {
background-color: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--primary:active:not(:disabled) {
background-color: var(--bf365-red-dark);
border-color: var(--bf365-red-dark);
}
/* Hero CTA — alias BF365 primary button (pill shape kept in home.css) */
.bf-home-hero__cta.bf-btn--primary {
background-color: var(--bf365-black);
border: 1px solid var(--bf365-black);
color: var(--bf365-white);
}
.bf-home-hero__cta.bf-btn--primary:hover,
.bf-home-hero__cta.bf-btn--primary:focus-visible {
background-color: var(--bf365-red);
border-color: var(--bf365-red);
color: var(--bf365-white);
}
.bf-btn--outline {
background-color: var(--bf-surface-elevated);
border-color: var(--bf-border-default);
color: var(--bf-text-primary);
}
.bf-btn--outline:hover:not(:disabled) {
background-color: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--outline:focus:not(:hover):not(:disabled) {
background-color: var(--bf-surface-elevated);
border-color: var(--bf-border-default);
color: var(--bf-text-primary);
}
.bf-btn--outline:active:not(:disabled) {
background-color: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--red {
background: var(--bf365-red);
border-color: var(--bf365-red);
color: var(--bf365-white);
}
.bf-btn--red:hover:not(:disabled) {
background: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--red:focus:not(:hover):not(:disabled) {
background: var(--bf365-red);
border-color: var(--bf365-red);
color: var(--bf365-white);
}
.bf-btn--red:active:not(:disabled) {
background: var(--bf365-red-dark);
border-color: var(--bf365-red-dark);
}
.bf-btn--ghost {
background: transparent;
border-color: transparent;
color: var(--bf-text-primary);
}
.bf-btn--ghost:hover:not(:disabled) {
background: transparent;
color: var(--bf365-red);
}
.bf-btn--ghost:focus:not(:hover):not(:disabled) {
background: transparent;
border-color: transparent;
color: var(--bf-text-primary);
}
.bf-btn--ghost:active:not(:disabled) {
background: transparent;
color: var(--bf365-red-dark);
}
.bf-btn--dark {
background: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--dark:hover:not(:disabled) {
background: var(--bf365-red);
border-color: var(--bf365-red);
}
.bf-btn--dark:focus:not(:hover):not(:disabled) {
background: var(--bf365-black);
border-color: var(--bf365-black);
color: var(--bf365-white);
}
.bf-btn--dark:active:not(:disabled) {
background: var(--bf365-red-dark);
border-color: var(--bf365-red-dark);
}
.bf-link-action,
.bf-btn--link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-bold);
color: var(--bf-text-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.bf-link-action:hover,
.bf-link-action:focus-visible,
.bf-btn--link:hover,
.bf-btn--link:focus-visible {
color: var(--bf365-red);
}
.bf-link-action:focus-visible,
.bf-btn--link:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
border-radius: var(--bf-radius-sm);
}
.bf-pill-toggle,
button.bf-pill-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bf-space-2);
min-height: 44px;
padding: var(--bf-space-3) 22px;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-pill);
background-color: var(--bf-surface-elevated);
color: var(--bf-text-primary);
font: inherit;
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-bold);
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.bf-pill-toggle:hover:not(:disabled),
button.bf-pill-toggle:hover:not(:disabled) {
border-color: var(--bf365-red);
background-color: var(--bf365-red);
color: var(--bf365-white);
box-shadow: 0 8px 22px rgba(230, 0, 18, 0.2);
}
.bf-pill-toggle:focus-visible,
button.bf-pill-toggle:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
}
.bf-pill-toggle:active:not(:disabled),
button.bf-pill-toggle:active:not(:disabled) {
border-color: var(--bf365-red-dark);
background-color: var(--bf365-red-dark);
color: var(--bf365-white);
}
.bf-pill-toggle.is-expanded,
button.bf-pill-toggle.is-expanded {
border-color: var(--bf365-black);
background-color: var(--bf365-black);
color: var(--bf365-white);
box-shadow: var(--bf365-control-shadow);
}
.bf-pill-toggle.is-expanded:hover:not(:disabled),
button.bf-pill-toggle.is-expanded:hover:not(:disabled) {
border-color: var(--bf365-red);
background-color: var(--bf365-red);
color: var(--bf365-white);
}
.bf-pill-toggle:disabled,
button.bf-pill-toggle:disabled {
border-color: var(--bf-border-default);
background: var(--bf-disabled-bg);
color: var(--bf-disabled-text);
cursor: not-allowed;
box-shadow: none;
}
.bf-pill-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.bf-pill-toggle__icon svg {
display: block;
width: 18px;
height: 18px;
}
.bf-pill-toggle.is-expanded .bf-pill-toggle__icon {
transform: rotate(180deg);
}
.bf365-topbar {
--bf365-topbar-speed: 28s;
--bf365-topbar-gap: clamp(24px, 4vw, 48px);
overflow: hidden;
background: var(--bf-bg-dark, #050505);
color: var(--bf-text-inverse, #fff);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bf365-topbar__viewport {
overflow: hidden;
width: 100%;
min-height: 44px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.bf365-topbar__viewport::-webkit-scrollbar {
display: none;
}
.bf365-topbar__track {
display: inline-flex;
align-items: center;
flex-shrink: 0;
min-width: max-content;
min-height: 44px;
white-space: nowrap;
will-change: transform;
}
.bf365-topbar__group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--bf365-topbar-gap);
padding-right: var(--bf365-topbar-gap);
}
.bf365-topbar__item {
flex: 0 0 auto;
min-width: 0;
}
.bf365-topbar__link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--bf-space-2);
min-width: 0;
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease;
}
.bf365-topbar__link:hover {
opacity: 0.88;
}
.bf365-topbar__link--text {
cursor: default;
}
.bf365-topbar__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--bf-color-red, #e60012);
}
.bf365-topbar__icon svg {
display: block;
width: 18px;
height: 18px;
}
.bf365-topbar__text {
min-width: 0;
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-semibold);
line-height: 1.2;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.bf365-topbar__viewport {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bf365-topbar__track {
transform: none !important;
will-change: auto;
}
.bf365-topbar__group {
padding-right: 0;
}
}
.bf-site-header {
position: sticky;
top: 0;
z-index: 120;
background: var(--bf-surface-elevated);
border-bottom: 1px solid var(--bf-border-default);
}
.admin-bar .bf-site-header {
top: 32px;
}
.bf-site-header__inner {
min-height: var(--bf-header-height-desktop, 84px);
}
.bf365-header__desktop {
display: grid;
/*
* Two rows: logo | search | actions on top, the menu across the full
* container width beneath. The menu used to sit in a middle track of a
* four-column row and needed 1028-1242px inside a track that was only
* 423-722px wide, so it ran over the search field and the account/wishlist/
* cart icons at every desktop width and past the page edge below 1187px.
* Giving it a row of its own is the only arrangement where all ten items fit
* on one line without shrinking, hiding or dropping any of them.
*
* Areas rather than source order: all four children are already direct grid
* items, so nothing in header.php had to move. Each `grid-area` below is
* scoped with `>` on purpose — .bf-site-header__logo is used three times in
* that template (desktop, mobile, drawer) and an unscoped rule would reach
* the mobile header's own grid placement.
*/
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"logo search actions"
"nav nav nav";
align-items: center;
gap: clamp(10px, 1.2vw, 18px);
min-height: var(--bf-header-height-desktop, 84px);
}
.bf365-header__desktop > .bf-site-header__logo {
grid-area: logo;
}
.bf365-header__desktop > .bf-site-header__search {
grid-area: search;
}
.bf365-header__desktop > .bf-site-header__actions--desktop {
grid-area: actions;
}
.bf365-header__desktop > .bf-site-header__nav {
grid-area: nav;
}
.bf365-header__mobile {
display: none;
}
/*
* No min-width here. The declaration that used to sit at this spot
* (`min-width: 0`) was dead code, and measurably so: forcing it back to
* `min-width: auto !important` moved nothing — page scrollWidth 1187 -> 1187,
* nav box 423.41px -> 423.41px. A grid item only gets an automatic minimum
* size when the track's min function is `auto`, and this nav sits in
* `minmax(0, 1fr)` (see .bf365-header__desktop below), whose min is already 0.
*
* It is recorded rather than silently deleted because it read as "the shrink
* problem is handled here" and it was not; the menu overflowed its nav by up
* to 552px while this line sat here looking responsible.
*/
.bf-site-header__menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px clamp(8px, 0.9vw, 14px);
margin: 0;
padding: 0;
list-style: none;
}
/*
* The narrow band where ten items cannot share one line.
*
* Numbers re-measured 2026-09-05 against the current build. The previous
* version of this comment was written when the desktop gutter was 56px and
* survived a `git checkout` that restored this file verbatim, so it quoted four
* figures that no longer hold (56px gutter, a 1140px threshold, a 116px gap and
* a 912px column). Those are all corrected below.
*
* Ten need 1028,38px at the 12px floor of clamp(12px, 0.9vw, 14px). The
* content column is the viewport minus 2x24px of gutter, so the nav is 976px at
* 1024px — short by 52,38px. Measured every pixel from 1024 to 1145:
*
* 1024-1076 the row genuinely wraps to two lines (53 widths)
* 1077 and up it fits on one line and this rule is a no-op
*
* The media query runs to 1139px rather than 1076px and that is harmless:
* flex-wrap: wrap PERMITS wrapping, it does not force it, so above 1077px the
* row simply does not use the permission. Narrowing the upper bound would buy
* nothing and would need re-measuring the day an item is added or renamed.
*
* DO NOT remove this rule while the menu has ten top-level items. Measured when
* it was briefly removed (ee512a85, at nine items): with ten items the row runs
* 52,38px past the nav at 1024px, and the page only reports a scrollbar from
* 1051px down. A clean documentElement.scrollWidth is not proof the menu fits.
* flex-wrap is nowrap by default here, so the failure mode is a silent overflow
* past the nav edge, not a visible second line.
*
* Dropping or merging a top-level item is the site owner's call, not a layout
* decision — and it is the only lever that removes this band outright: at nine
* items the row needed 964,34px and fitted at every width from 1024 up.
*/
@media (min-width: 1024px) and (max-width: 1139px) {
.bf-site-header__menu {
flex-wrap: wrap;
}
}
.bf-site-header__menu > li {
flex-shrink: 0;
}
.bf-site-header__logo {
display: inline-flex;
align-items: center;
font-size: 28px;
font-weight: var(--bf-weight-black);
letter-spacing: -0.03em;
line-height: 1;
white-space: nowrap;
}
.bf-site-logo__image {
display: block;
width: auto;
max-width: 180px;
max-height: 52px;
height: auto;
object-fit: contain;
}
.bf-site-footer__logo.bf-site-logo--image .bf-site-logo__image {
max-width: 160px;
max-height: 48px;
}
.bf-site-header__logo-bf {
color: var(--bf-text-primary);
}
.bf-site-header__logo-365 {
color: var(--bf-color-red, #e60012);
}
.bf-site-header__menu a {
font-size: clamp(12px, 0.9vw, 14px);
font-weight: var(--bf-weight-black);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bf-text-primary);
white-space: nowrap;
transition: color 0.2s ease;
}
.bf-site-header__menu a:hover,
.bf-site-header__menu .current-menu-item > a,
.bf-site-header__menu .is-current > a {
color: var(--bf-color-red, #e60012);
}
/* ==========================================================================
Desktop mega menu
========================================================================== */
/*
* The panel is anchored here, not on the .
*
* Anchoring to the item is the obvious choice and it is wrong at every width
* this site is used at. Measured with the panel absolutely positioned at
* `left: 0` of its own , counting how many of the ten branches then run
* past the right edge of the viewport:
*
* 1024 1139 1280 1440 1920
* 300px 2/10 2/10 1/10 1/10 0/10
* 600px 5/10 4/10 4/10 4/10 2/10
* 1328px 10/10 10/10 10/10 9/10 8/10
*
* Even a 300px panel overflows at 1440, with 4.94px of margin — one more
* character in the last label, or a different menu gap, and it breaks. And the
* overflow is invisible: Astra sets `body { overflow-x: hidden }` at top level,
* so the part that runs off is neither drawn nor reachable, and no scrollbar
* appears to say so. Anchoring to the nav instead measured 0 overflow at all
* five widths, and at 1920 the panel stops at the 1440px container edge rather
* than running out to the screen edge.
*
* `position: relative` is required, not optional: without it the nearest
* positioned ancestor is header.bf-site-header, and the panel then spans the
* whole viewport and loses the container gutter.
*/
.bf-site-header__nav {
position: relative;
}
@media (min-width: 1024px) {
.bf-site-header__menu .sub-menu {
/*
* top: 100% of the nav, so the panel opens below the whole menu. In the
* 1024-1139px band where the menu wraps to two rows, that means below both
* rows, and the row-two items stay clickable. bf365.vn anchors its mega to
* a hard `top: 38px` instead and covers its own second row: at 1440 the
* last two of their nine top-level items sit under the open panel and
* cannot be clicked at all.
*
* The nav bottom edge is the menu bottom edge, so the gap between an item
* and the panel is zero and no hover bridge is needed.
*/
position: absolute;
top: 100%;
/*
* Offset inside the nav, published by positionMegaArrow() in global.js so
* the panel sits under the item it belongs to. Still anchored to the NAV:
* the containing block does not move, so `top: 100%` keeps clearing both
* rows in the 1024-1139 wrap band. The JS clamps the value to
* nav width minus panel width, so it cannot push the panel out.
* Falls back to 0 — the previous behaviour — if the script never runs.
*/
left: var(--bf-mega-panel-x, 0px);
z-index: 130;
/*
* Shrink to the list rather than stretch to the container. A branch with
* three items in a 1328px-wide white panel is the same mistake as a border
* drawn around a 600px photo across a full-width card: the box stops
* describing its contents and starts reading as a bug. Width comes from
* the column count below, so it is always well inside the container — the
* widest case measures 834px border-box against 912px of column at 1024px,
* which is the narrowest the container ever gets.
*/
width: max-content;
max-width: 100%;
/*
* Ceiling, then scroll. 460px is roughly 60% of the 761px measured under
* the header at 1440x900, chosen so it still fits the laptop case: a real
* 1440x900 window has about 621px below the header once browser chrome is
* subtracted, and a 720px-tall window about 581px. The vh term handles
* anything shorter than that. Overflow goes HERE and never on
* .bf-site-header__nav — any overflow value other than visible on the nav
* would clip this panel, and `overflow-x: hidden; overflow-y: visible` is
* not a thing (CSS Overflow 3: visible alongside hidden computes to auto).
*/
max-height: min(460px, calc(100vh - 200px));
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: var(--bf-space-5) var(--bf-space-2);
list-style: none;
background: var(--bf-surface-elevated);
border: 1px solid var(--bf-border);
border-radius: var(--bf-radius-md);
box-shadow: var(--bf-shadow-soft);
/*
* Hidden with visibility rather than display, for two reasons: display
* cannot be transitioned, and visibility:hidden already takes the 101
* links out of both the tab order and the accessibility tree, which is
* what makes :focus-within safe to rely on below.
*
* The delays are the point. Opening is immediate. Closing waits 150ms at
* full opacity before it starts to fade, so the pointer can leave the item
* and travel into a panel up to 460px tall without the panel vanishing
* underneath it. bf365.vn closes in about 1ms and gives no such grace; a
* diagonal mouse path across a neighbouring item is enough to lose it.
*/
visibility: hidden;
opacity: 0;
transition:
opacity var(--bf-duration-fast) var(--bf-ease) 150ms,
visibility 0s linear 270ms;
}
.bf-site-header__menu > li:hover > .sub-menu,
.bf-site-header__menu > li:focus-within > .sub-menu,
.bf-site-header__menu > li.is-mega-open > .sub-menu {
visibility: visible;
opacity: 1;
transition:
opacity var(--bf-duration-fast) var(--bf-ease) 0s,
visibility 0s linear 0s;
}
/*
* The notch that ties the panel to the item being hovered.
*
* Drawn on the NAV, not on the panel and not on the , and neither is
* an accident. The panel is a scroll container (overflow-y: auto above),
* so anything positioned outside its padding box is clipped and anything
* inside it scrolls away with the links. The would be the natural
* anchor, but giving it `position: relative` makes it the panel's
* containing block, which is the change eb33cc25 rejected on measurement.
* The nav is already positioned, has no overflow by deliberate choice, and
* is the same coordinate space the JS measures in.
*
* A 12px square rotated 45 degrees, half above the panel edge and half
* below it. Its background matches the panel so the lower half disappears
* into it; only border-top and border-left are drawn, which after the
* rotation are the two edges forming the point.
*/
.bf-site-header__nav.has-mega-arrow::after {
content: "";
position: absolute;
top: 100%;
left: var(--bf-mega-arrow-x, 50%);
z-index: 131;
width: 12px;
height: 12px;
margin-top: -6px;
transform: translateX(-50%) rotate(45deg);
background: var(--bf-surface-elevated);
border-top: 1px solid var(--bf-border);
border-left: 1px solid var(--bf-border);
border-top-left-radius: 2px;
pointer-events: none;
}
/*
* The notch fades with the panel, on the same delays, so it never outlives
* the thing it points at. Values copied from the panel rule above rather
* than shortened: a faster notch reads as a flicker at the moment the
* pointer crosses between two items.
*/
.bf-site-header__nav::after {
opacity: 0;
transition: opacity var(--bf-duration-fast) var(--bf-ease) 150ms;
}
.bf-site-header__nav.has-mega-arrow::after {
opacity: 1;
transition: opacity var(--bf-duration-fast) var(--bf-ease) 0s;
}
@media (prefers-reduced-motion: reduce) {
.bf-site-header__nav::after,
.bf-site-header__nav.has-mega-arrow::after {
transition: none;
}
}
/*
* Columns from the item count, so nothing here has to name a menu item.
* Menu item IDs are not stable on this site — "Bài viết" was already
* deleted and recreated with a new ID — and the branches are nowhere near
* these boundaries: the counts are 3, 5, 6, 7, 7, 13, 14, 16 and 32.
*
* 32, not 30: :has() counts children, and two of the Adidas branch's
* children are the group headings inserted by bf365_mega_menu_group_headings().
* It makes no difference today, since 30 and 32 are both over 25 and the
* closest real branch is 16 — but a heading added to a 23- or 24-item branch
* later would tip it into three columns for no visible reason.
*
* >= 13 items -> 2 columns (Giày theo size 13, Nike 14, Quần áo theo size 16)
* >= 25 items -> 3 columns (Giày Adidas 30, plus its 2 group headings)
*
* Grid, not multi-column, and the reason is the max-height above.
*
* This was multi-column first, because reading down a column and then
* across is the better order for a list. It had to go, because a
* multi-column box cannot scroll: clamp its height and it does not overflow
* downwards into the scroller, it adds another column and overflows
* SIDEWAYS, past a right edge that has no scrollbar because the panel only
* ever scrolls on Y. Measured on the 30-item branch: at a 657px window it
* was fine, at 656px one item was drawn at x=1070 against a content edge of
* 816 and elementFromPoint could not reach it, and at 560px thirteen items
* were gone including the whole Sneakers group and its heading. scrollHeight
* equalled clientHeight the entire time, so nothing announced it — the
* items were simply not there any more. 1366x768 with a bookmarks bar lands
* inside that range.
*
* Grid rows stack downwards, so overflow-y: auto does what it says. The
* cost is reading order: across a row, then down. For a list of category
* names that is a fair trade for content that cannot silently vanish, and
* it suits the group headings better — a heading spans the full width as a
* band rather than sitting at the top of one column.
*
* column-gap is 0 and the gutter lives in each link's padding instead, so
* that a tinted group band reads as one rectangle rather than three tinted
* cells with gaps punched between them.
*/
.bf-site-header__menu .sub-menu {
display: grid;
grid-template-columns: 272px;
column-gap: 0;
align-content: start;
}
.bf-site-header__menu .sub-menu:has(> li:nth-child(13)) {
grid-template-columns: repeat(2, 272px);
}
.bf-site-header__menu .sub-menu:has(> li:nth-child(25)) {
grid-template-columns: repeat(3, 272px);
}
/*
* Second-level links are ordinary reading text and have to say so
* explicitly. `.bf-site-header__menu a` above is a descendant selector with
* no `>`, so without these lines all 101 of them would inherit the top-level
* treatment: uppercase, weight 800, and white-space: nowrap. Uppercase is the
* part that actually bites: 101 Vietnamese category names in caps, with their
* diacritics stacked, are not scannable.
*
* white-space: normal is insurance and has never yet been needed — the
* longest label in the whole menu is "Giày Nike Air chính hãng" at 24
* characters, which fits one line in a 272px column with 9px to spare. Do not
* describe it as fixing wrapping; nothing currently wraps.
*/
.bf-site-header__menu .sub-menu a {
display: block;
padding: 5px 16px;
font-family: var(--bf-font-body);
font-size: 14px;
font-weight: var(--bf-weight-medium);
line-height: 1.45;
letter-spacing: normal;
text-transform: none;
white-space: normal;
color: var(--bf-text-primary);
}
.bf-site-header__menu .sub-menu a:hover,
.bf-site-header__menu .sub-menu a:focus-visible {
color: var(--bf-color-red, #e60012);
}
/*
* Group heading. Injected by bf365_mega_menu_group_headings() above the two
* runs of price bands inside "Giày Adidas", which otherwise show
* "Dưới 1 triệu", "Từ 1 - 2 triệu" and "Trên 2 triệu" twice each with
* nothing to tell the running shoes from the sneakers. It carries no href,
* so it is neither focusable nor clickable: a label, not a link.
*/
.bf-site-header__menu .sub-menu > li.bf-mega__group {
grid-column: 1 / -1;
}
/*
* A group needs a visible end, not just a visible start. Everything under a
* heading reads as belonging to it, so the four Adidas technology lines that
* follow the running price bands looked like running price bands. Tinting
* the heading and its own items makes the group one band with an edge on
* both sides; what comes after is plainly outside it.
*
* A rule under the last item was tried instead and does not survive the
* grid: the run occupies one row, so a border on its last cell underlines a
* third of the group.
*/
.bf-site-header__menu .sub-menu > li.bf-mega__group,
.bf-site-header__menu .sub-menu > li.bf-mega__grouped {
background: var(--bf-surface-muted);
}
.bf-site-header__menu .sub-menu > li.bf-mega__group > a {
padding-top: var(--bf-space-3);
padding-bottom: 4px;
font-size: 12px;
font-weight: var(--bf-weight-semibold);
letter-spacing: var(--bf-tracking-wide, 0.06em);
text-transform: uppercase;
color: var(--bf-text-secondary);
cursor: default;
}
.bf-site-header__menu .sub-menu > li.bf-mega__group > a:hover {
color: var(--bf-text-secondary);
}
/*
* Escape closes the open panel. It cannot do that by removing focus alone,
* because the pointer may still be resting on the item and :hover would
* reopen it at once. global.js puts this class on the nav instead, and takes
* it off again on the next focusin or when the pointer leaves the nav.
*
* The selector is long on purpose. Written as
* `.bf-site-header__nav.is-mega-suppressed .sub-menu` it was a pure no-op:
* (0,3,0) against the three opening rules at (0,3,1), which each carry a
* `li` type selector. Toggling the class by hand moved nothing in any of the
* three open states, and the opacity and transition declarations under it
* were dead for the same reason. Escape appeared to work — the class landed,
* aria-expanded went to false — while the panel stayed on screen, so the
* only thing it actually achieved was to make aria lie.
*/
.bf-site-header__nav.is-mega-suppressed .bf-site-header__menu > li > .sub-menu {
visibility: hidden;
opacity: 0;
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bf-site-header__menu .sub-menu,
.bf-site-header__menu > li:hover > .sub-menu,
.bf-site-header__menu > li:focus-within > .sub-menu,
.bf-site-header__menu > li.is-mega-open > .sub-menu {
transition: none;
}
}
.bf-site-header__search {
position: relative;
display: flex;
align-items: center;
gap: 0;
/*
* `min-width: 0` was removed from here: dead in the same way as the one on
* .bf-site-header__nav. Measured — `min-width: auto !important` left the box
* at 143.36px, unchanged. This element is grid track 3,
* `clamp(130px, 14vw, 200px)`, which is a definite length; a definite track
* is not sized from its item, so the item's own minimum never applies.
*/
min-height: 48px;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md, 12px);
background: var(--bf-surface-input);
box-shadow: none;
}
.bf-site-header__search:focus-within {
border-color: var(--bf365-red, var(--bf-color-red, #e60012));
box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
outline: none;
}
/*
* (0,3,1) — KHÔNG dừng ở (0,2,1). `.woocommerce input[type="search"]` của
* `woocommerce-grid.min.css` cũng là (0,2,1) và cũng khai `border-radius`,
* nên ở (0,2,1) luật này chỉ HOÀ và thắng nhờ thứ tự nạp (child theme nạp
* sau plugin). Thế hoà đó gãy im lặng nếu ai đổi thứ tự enqueue — và nó chỉ
* gãy trên trang WooCommerce, tức đúng hai trang, đúng kiểu sai lệch dễ bị
* đọc thành "cache ấm".
*
* `.bf365-header__desktop` là tổ tiên ĐÚNG, không phải một class tiện tay:
* `class="bf-site-header__search"` chỉ xuất hiện MỘT lần trong toàn theme
* (`template-parts/global/header.php:82`) và nằm trong khối desktop đó.
*/
/*
* 46 = 48 − 2 viền của hộp bao. Ô tìm kiếm nào cũng cao ĐÚNG 48 ở mép
* ngoài; trước lượt này hộp bao header đo ra 50 vì ô nhập đã là 48 rồi
* cộng thêm viền.
*
* Bo LỆCH: đây là cặp dính liền (ô nhập + nút), nên ô nhập chỉ bo hai góc
* TRÁI và bo đúng 11 = 12 − 1 (bề dày viền hộp bao), để đường cong trong
* và ngoài đồng tâm. `border-radius: inherit` cũ cho ô nhập bo cả bốn góc
* 12 — chồng lên góc phải của nút.
*
* CỠ CHỮ 14 GIỮ NGUYÊN, và nó KHÔNG vi phạm luật 16px: Safari trên iOS chỉ
* tự phóng trang khi ô nhập được focus có cỡ chữ < 16px, mà ô này nằm trong
* `.bf365-header__desktop` — ẩn hoàn toàn dưới 1024px. Ba ô còn lại (overlay,
* trang tìm kiếm, 404) đều 16px, và chúng mới là ba ô người dùng điện thoại
* chạm tới.
*/
.bf365-header__desktop .bf-site-header__search input.bf-site-header__search-input {
flex: 1 1 auto;
min-width: 0;
height: 46px;
padding: 0 14px 0 var(--bf-space-4);
border: 0;
border-radius: calc(var(--bf-radius-md, 12px) - 1px) 0 0 calc(var(--bf-radius-md, 12px) - 1px);
background-color: transparent !important;
background-image: none !important;
font: inherit;
font-size: var(--bf-text-sm);
color: var(--bf-text-primary) !important;
-webkit-appearance: none;
appearance: none;
}
.bf-site-header__search input.bf-site-header__search-input::placeholder {
color: var(--bf-text-muted-dark-ready);
opacity: 1;
}
.bf-site-header__search input.bf-site-header__search-input::-webkit-search-decoration,
.bf-site-header__search input.bf-site-header__search-input::-webkit-search-cancel-button,
.bf-site-header__search input.bf-site-header__search-input::-webkit-search-results-button,
.bf-site-header__search input.bf-site-header__search-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
/*
* `border` phải nằm ở ĐÂY, không chỉ ở luật nghỉ. Astra phát ba luật inline
* cho `input[type="search"]:focus` ở (0,2,1), trong đó có
* `border-style: dotted; border-width: thin; border-color: #046BD2`.
*
* (0,4,1) chứ không (0,3,1): `.woocommerce input[type="search"]:focus` cũng
* là (0,3,1). Và khi luật nghỉ đã lên (0,3,1) thì luật trạng thái BẮT BUỘC
* phải cao hơn nó — đúng cạm bẫy đã làm hỏng góc bo của ô overlay lượt này.
*/
.bf365-header__desktop .bf-site-header__search input.bf-site-header__search-input:focus {
outline: none;
box-shadow: none;
border: 0;
}
.bf-site-header__search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 46px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0 calc(var(--bf-radius-md, 12px) - 1px) calc(var(--bf-radius-md, 12px) - 1px) 0;
background: transparent;
color: var(--bf-text-muted-dark-ready);
cursor: pointer;
}
.bf-site-header__search-btn:hover,
.bf-site-header__search-btn:focus-visible {
color: var(--bf-color-red, #e60012);
}
.bf-site-header__search-btn:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: -2px;
}
.bf-site-header__search-btn:hover {
background: transparent;
}
.bf-site-header__search-btn:focus:not(:hover) {
background: transparent;
color: var(--bf-text-muted-dark-ready);
}
.bf-site-header__search-btn:active {
background: transparent;
color: var(--bf-color-red, #e60012);
}
.bf-site-header__search-btn svg {
width: 18px;
height: 18px;
}
.bf-site-header__actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.bf-site-header__actions--desktop {
gap: clamp(6px, 0.8vw, 10px);
}
.bf-site-header__action {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
/* WCAG 2.5.8: the icon-and-label stack came to 42px, two short. */
min-height: 44px;
min-width: clamp(44px, 3.6vw, 52px);
flex-shrink: 0;
font-size: var(--bf-text-2xs);
font-weight: var(--bf-weight-bold);
color: var(--bf-text-primary);
transition: color 0.2s ease;
}
.bf-site-header__action:hover {
color: var(--bf-color-red, #e60012);
}
.bf-site-header__action:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: 2px;
border-radius: var(--bf-radius-md, 12px);
}
.bf-site-header__action:active {
color: var(--bf-color-red-dark, #c9000f);
}
.bf-site-header__action-icon svg {
width: 22px;
height: 22px;
}
.bf-site-header__action-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bf-site-header__action-indicator {
position: absolute;
top: -1px;
right: -3px;
width: 7px;
height: 7px;
border: 1.5px solid var(--bf-on-primary, #fff);
border-radius: 50%;
background: var(--bf-color-red, #e60012);
}
.bf-site-header__cart-count {
position: absolute;
top: -4px;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
/* B2 bac 18 = line-height 12px + padding doc 3px x2. Bo height: chieu cao phai
* la KET QUA CONG, khong phai so ep. Do lai: 18px truoc = 18px sau, 0 pixel doi. */
line-height: 12px;
padding: 3px 5px;
border-radius: var(--bf-radius-pill);
background: var(--bf-color-red, #e60012);
color: var(--bf-on-primary, #fff);
font-size: var(--bf-text-2xs);
font-weight: var(--bf-weight-black);
}
.bf-site-header__cart-count.is-empty,
.bf-site-header__cart-count[hidden],
.bf-site-header__wishlist-count.is-empty,
.bf-site-header__wishlist-count[hidden] {
display: none !important;
}
.bf-site-header__wishlist-count {
position: absolute;
top: -4px;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
line-height: 12px;
padding: 3px 5px;
border-radius: var(--bf-radius-pill);
background: var(--bf-color-red, #e60012);
color: var(--bf-on-primary, #fff);
font-size: var(--bf-text-2xs);
font-weight: var(--bf-weight-black);
}
.bf-site-header__icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--bf-radius-md);
background: transparent;
color: var(--bf-text-primary);
cursor: pointer;
text-decoration: none;
appearance: none;
-webkit-appearance: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.bf-site-header__icon-btn svg {
width: 22px;
height: 22px;
}
.bf-site-header__icon-btn:hover {
color: var(--bf-color-red, #e60012);
background: var(--bf-surface-muted);
}
.bf-site-header__icon-btn:focus:not(:hover) {
background: transparent;
border-color: transparent;
color: var(--bf-text-primary);
}
.bf-site-header__icon-btn:active {
background: var(--bf-border-default);
color: var(--bf-color-red, #e60012);
}
/* Mobile search drawer (right-side panel) */
.bf-mobile-search {
position: fixed;
inset: 0;
z-index: 210;
pointer-events: none;
visibility: hidden;
}
.bf-mobile-search.is-open {
pointer-events: auto;
visibility: visible;
}
.bf-mobile-search__overlay {
position: absolute;
inset: 0;
background: var(--bf-overlay);
opacity: 0;
transition: opacity 0.25s ease;
}
.bf-mobile-search.is-open .bf-mobile-search__overlay {
opacity: 1;
}
.bf-mobile-search__panel {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
gap: var(--bf-space-4);
width: 100%;
max-width: 420px;
height: 100%;
padding: calc(12px + env(safe-area-inset-top, 0px))
calc(16px + env(safe-area-inset-right, 0px))
calc(16px + env(safe-area-inset-bottom, 0px))
16px;
background: var(--bf-surface-elevated);
box-shadow: -12px 0 40px var(--bf-shadow-color);
transform: translateX(100%);
transition: transform 0.26s ease;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.bf-mobile-search.is-open .bf-mobile-search__panel {
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.bf-mobile-search__overlay,
.bf-mobile-search__panel {
transition: none;
}
}
.bf-mobile-search__head {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
}
.bf-mobile-search__title {
margin: 0;
font-size: var(--bf-text-lg);
font-weight: var(--bf-weight-black);
line-height: 1.2;
color: var(--bf-text-primary);
}
.bf-mobile-search__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md, 12px);
background: var(--bf-surface-elevated);
color: var(--bf-text-primary);
cursor: pointer;
}
.bf-mobile-search__close:hover {
background: var(--bf-surface-muted);
border-color: var(--bf-border-strong-dark-ready);
color: var(--bf-text-primary);
}
.bf-mobile-search__close:focus {
outline: none;
}
.bf-mobile-search__close:focus:not(:hover) {
background: var(--bf-surface-elevated);
border-color: var(--bf-border-default);
color: var(--bf-text-primary);
}
.bf-mobile-search__close:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: 2px;
}
.bf-mobile-search__close svg {
width: 20px;
height: 20px;
}
.bf-mobile-search__form {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 48px;
grid-template-rows: 46px auto;
align-items: stretch;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
min-height: 48px;
margin: 0;
gap: 0;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md, 12px);
background: var(--bf-surface-input);
box-shadow: none;
box-sizing: border-box;
overflow: visible;
}
.bf-mobile-search__form:focus-within {
border-color: var(--bf365-red, var(--bf-color-red, #e60012));
box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
outline: none;
}
/*
* (0,3,1), và HÀNG RÀO Ở ĐÂY LÀ WOOCOMMERCE CHỨ KHÔNG PHẢI ASTRA.
* `woocommerce-grid.min.css` khai
* .woocommerce input[type="search"], .woocommerce-page input[type="search"]
* { border-radius: 0; border-color: var(--ast-border-color) }
* ở (0,2,1), thắng luật cũ (0,2,0) của theme. Nó chỉ nạp trên trang
* WooCommerce — nên bo góc của ô nhập này đọc ra 0 trên ĐÚNG hai trang
* collection và product, và đúng 11 trên bốn trang còn lại. Một sai lệch
* chỉ-hai-trang như thế rất dễ bị đọc thành "cache" hoặc "đo sai".
*/
.bf-mobile-search .bf-mobile-search__form input.bf-mobile-search__input {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: none;
min-width: 0;
height: 100%;
min-height: 0;
margin: 0;
padding: 0 var(--bf-space-3) 0 14px;
border: 0;
border-radius: calc(var(--bf-radius-md, 12px) - 1px) 0 0 calc(var(--bf-radius-md, 12px) - 1px);
background: transparent;
font: inherit;
font-size: var(--bf-text-base);
line-height: 1.25;
color: var(--bf-text-primary);
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.bf-mobile-search__form .bf-mobile-search__input::placeholder {
color: var(--bf-text-muted-dark-ready);
opacity: 1;
}
.bf-mobile-search__form .bf-mobile-search__input::-webkit-search-decoration,
.bf-mobile-search__form .bf-mobile-search__input::-webkit-search-cancel-button,
.bf-mobile-search__form .bf-mobile-search__input::-webkit-search-results-button,
.bf-mobile-search__form .bf-mobile-search__input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
/*
* (0,4,1). Ở (0,2,0) luật này THUA luật inline `input[type="search"]:focus`
* (0,2,1) của Astra trên MỌI thuộc tính viền — đo được trên 6/6 trang: ô
* nhập overlay vẽ viền 1px KIỂU CHẤM khi có focus, màu #046BD2 (xanh Astra)
* trên 4 trang và xám trên 2 trang còn lại. Đây là lỗi nhìn thấy được,
* không phải chuyện lý thuyết.
*
* Vì sao (0,4,1) chứ không dừng ở (0,3,1): `.woocommerce input[type="search"]:focus`
* cũng là (0,3,1), nên (0,3,1) chỉ HOÀ và thắng nhờ thứ tự nạp.
*/
.bf-mobile-search .bf-mobile-search__form input.bf-mobile-search__input:focus {
outline: none;
box-shadow: none;
border: 0;
}
.bf-mobile-search__form .bf-mobile-search__submit {
grid-column: 2;
grid-row: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
min-width: 44px;
height: 100%;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0 calc(var(--bf-radius-md, 12px) - 1px) calc(var(--bf-radius-md, 12px) - 1px) 0;
background: var(--bf365-black, #111111);
color: var(--bf365-white, #ffffff);
cursor: pointer;
flex: none;
}
.bf-mobile-search__form .bf-mobile-search__submit:hover,
.bf-mobile-search__form .bf-mobile-search__submit:active {
background: var(--bf365-red, var(--bf-color-red, #e60012));
color: var(--bf365-white, #ffffff);
}
.bf-mobile-search__form .bf-mobile-search__submit:focus {
outline: none;
}
.bf-mobile-search__form .bf-mobile-search__submit:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: -2px;
}
.bf-mobile-search__form .bf-mobile-search__submit svg {
width: 18px;
height: 18px;
}
.bf-mobile-search__hint {
margin: 0;
font-size: var(--bf-text-sm);
line-height: 1.5;
color: var(--bf-text-muted-dark-ready);
}
.bf-mobile-search__form.is-live-search-open + .bf-mobile-search__hint,
.bf-mobile-search.is-live-search-active .bf-mobile-search__hint {
display: none;
}
/* Live results span full width below the compact input/button row. */
.bf-mobile-search__form .bf-live-search,
.bf-mobile-search__form .bf-mobile-search__results {
position: static;
top: auto;
left: auto;
right: auto;
z-index: auto;
grid-column: 1 / -1;
grid-row: 2;
flex: none;
width: 100%;
max-height: min(55vh, 360px);
margin: 0;
border: 0;
border-top: 1px solid var(--bf-border-default);
border-radius: 0;
box-shadow: none;
background: transparent;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bf-mobile-search__form.is-live-search-open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/*
* Ô nhập vào đây CÙNG. Từ lượt này nó bo góc dưới-trái 11px, nên khi bảng
* kết quả mở ra bên dưới và hộp bao vuông hai góc dưới lại, góc cong của ô
* nhập sẽ thò ra. Trước lượt này ô nhập bo 0 nên không ai phải nghĩ tới.
*
* Nhánh ô nhập phải là (0,4,1), KHÔNG phải (0,3,0): luật nghỉ của chính ô
* nhập vừa được nâng lên (0,3,1) để thắng WooCommerce, nên một luật trạng
* thái viết theo lối cũ sẽ thua luật nghỉ của chính nó. Đo được: bo góc
* dưới-trái vẫn 11px trên 3/3 trang khi bảng đã mở. Nâng độ đặc hiệu của
* luật nghỉ thì PHẢI nâng mọi luật trạng thái đi kèm.
*/
.bf-mobile-search .bf-mobile-search__form.is-live-search-open input.bf-mobile-search__input,
.bf-mobile-search__form.is-live-search-open .bf-mobile-search__submit {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
body.bf-mobile-search-open {
overflow: hidden;
}
/* Live search results panel */
.bf-live-search {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 140;
max-height: min(70vh, 420px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--bf-border-default);
border-radius: 0 0 var(--bf-radius-md, 12px) var(--bf-radius-md, 12px);
background: var(--bf-surface-elevated);
box-shadow: var(--bf-shadow-card, 0 8px 24px var(--bf-shadow-color));
}
.bf-live-search[hidden] {
display: none !important;
}
.bf-live-search__body {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.bf-live-search__state {
padding: var(--bf-space-4) 14px;
color: var(--bf-text-muted-dark-ready);
font-size: var(--bf-text-sm);
line-height: 1.4;
}
.bf-live-search__state.is-error {
color: var(--bf-color-red, #e60012);
}
.bf-live-search__section {
min-width: 0;
border-top: 1px solid var(--bf-border-default);
}
.bf-live-search__section:first-child {
border-top: 0;
}
/*
* Bỏ đệm DỌC của hàng bao, giữ đệm ngang. Link "Xem thêm" trong hàng này
* cao 40 (bậc `sm`), nên `10px` trên + `6px` dưới đẩy cả hàng lên 56 —
* cao hơn cả một mục kết quả, và đó là chiều cao không ai chọn.
* Nay hàng cao ĐÚNG 40, bằng chính phần tử cao nhất trong nó.
*
* Đệm dọc ở đây là thừa theo cấu tạo: hàng là flex `align-items: center`
* và phần tử cao nhất của nó đã tự mang vùng chạm 40px của mình.
*/
.bf-live-search__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bf-space-3);
padding: 0 14px;
}
.bf-live-search__section-title {
margin: 0;
font-size: var(--bf-text-2xs);
font-weight: var(--bf-weight-black);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bf-text-muted-dark-ready);
}
/*
* 40 = bậc `sm` của thang nút. Đây là link chữ nên nó không lấy bậc 44:
* nó nằm cùng hàng với tiêu đề nhóm trong `.bf-live-search__section-head`,
* và 44 sẽ đẩy hàng tiêu đề cao hơn cả một mục kết quả.
*
* `inline-flex` an toàn Ở ĐÂY dù nó biến link thành hộp nguyên vẹn không
* ngắt dòng được: nhãn là "Xem thêm", hai từ, và nó là `flex: 0 0 auto`
* trong một hàng chỉ có hai phần tử. Đừng chép mẫu này sang breadcrumb —
* ở đó nó đã hỏng vì tên danh mục dài tới 95,8% bề rộng cột.
*/
.bf-live-search__more {
flex: 0 0 auto;
font-size: var(--bf-text-xs);
font-weight: var(--bf-weight-bold);
color: var(--bf-color-red, #e60012);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 40px;
}
.bf-live-search__more:hover,
.bf-live-search__more:focus-visible {
text-decoration: underline;
}
.bf-live-search__more:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: 2px;
}
.bf-live-search__list {
margin: 0;
padding: 0 0 6px;
list-style: none;
}
.bf-live-search__option {
display: flex;
align-items: center;
gap: var(--bf-space-3);
width: 100%;
min-width: 0;
padding: var(--bf-space-2) 14px;
border: 0;
background: transparent;
color: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.bf-live-search__option:hover,
.bf-live-search__option.is-active,
.bf-live-search__option:focus-visible {
background: var(--bf-surface-muted);
outline: none;
}
.bf-live-search__thumb {
flex: 0 0 auto;
width: 48px;
height: 48px;
overflow: hidden;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-sm, 8px);
background: var(--bf-surface-media);
}
.bf-live-search__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bf-live-search__thumb--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--bf-text-muted-dark-ready);
font-size: var(--bf-text-2xs);
}
.bf-live-search__meta {
flex: 1 1 auto;
min-width: 0;
}
.bf-live-search__title {
display: block;
margin: 0;
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-bold);
line-height: 1.35;
color: var(--bf-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bf-live-search__excerpt {
display: -webkit-box;
margin: 2px 0 0;
overflow: hidden;
color: var(--bf-text-muted-dark-ready);
font-size: var(--bf-text-xs);
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.bf-live-search__prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin-top: var(--bf-space-1);
}
.bf-live-search__price {
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-black);
color: var(--bf-color-red, #e60012);
}
.bf-live-search__price--regular {
font-size: var(--bf-text-xs);
font-weight: var(--bf-weight-semibold);
color: var(--bf-text-muted-dark-ready);
text-decoration: line-through;
}
.bf-site-header__menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md);
background: var(--bf-surface-elevated);
color: var(--bf-text-primary);
cursor: pointer;
}
.bf-site-header__menu-toggle svg {
width: 20px;
height: 20px;
}
/* Mobile navigation drawer — full-screen, opens from the left */
.bf-mobile-drawer {
position: fixed;
inset: 0;
z-index: 220;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
pointer-events: none;
visibility: hidden;
}
.bf-mobile-drawer.is-open {
pointer-events: auto;
visibility: visible;
}
.bf-mobile-drawer__overlay {
position: absolute;
inset: 0;
background: var(--bf-overlay);
opacity: 0;
transition: opacity 0.24s ease;
}
.bf-mobile-drawer.is-open .bf-mobile-drawer__overlay {
opacity: 1;
}
.bf-mobile-drawer__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 0;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
padding: 0;
background: var(--bf-surface-elevated);
box-shadow: none;
transform: translateX(-100%);
transition: transform 0.26s ease;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.bf-mobile-drawer.is-open .bf-mobile-drawer__panel {
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.bf-mobile-drawer__overlay,
.bf-mobile-drawer__panel {
transition: none;
}
}
.bf-mobile-drawer__head {
position: sticky;
top: 0;
z-index: 1;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: var(--bf-space-2);
min-height: 56px;
padding: calc(10px + env(safe-area-inset-top, 0px))
calc(12px + env(safe-area-inset-right, 0px))
10px
calc(12px + env(safe-area-inset-left, 0px));
border-bottom: 1px solid var(--bf-border-default);
background: var(--bf-surface-elevated);
box-sizing: border-box;
}
.bf-mobile-drawer__head-spacer {
grid-column: 1;
width: 44px;
height: 44px;
}
.bf-mobile-drawer__head .bf-mobile-drawer__logo,
.bf-mobile-drawer__head .bf-site-header__logo {
grid-column: 2;
justify-self: center;
max-width: min(160px, 46vw);
}
.bf-mobile-drawer__head .bf-mobile-drawer__logo .bf-site-logo__image,
.bf-mobile-drawer__head .bf-site-header__logo .bf-site-logo__image {
max-height: 40px;
max-width: 100%;
}
.bf-mobile-drawer__close {
grid-column: 3;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md);
background: var(--bf-surface-elevated);
color: var(--bf-text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.bf-mobile-drawer__close:hover {
background: var(--bf-surface-muted);
border-color: var(--bf-border-strong-dark-ready);
color: var(--bf-text-primary);
}
.bf-mobile-drawer__close:focus {
outline: none;
}
.bf-mobile-drawer__close:focus:not(:hover) {
background: var(--bf-surface-elevated);
border-color: var(--bf-border-default);
color: var(--bf-text-primary);
}
.bf-mobile-drawer__close svg {
width: 18px;
height: 18px;
}
.bf-mobile-drawer__nav {
flex: 1 1 auto;
min-height: 0;
padding: var(--bf-space-2) var(--bf-space-4) var(--bf-space-4);
box-sizing: border-box;
}
.bf-mobile-drawer__footer {
flex: 0 0 auto;
position: sticky;
bottom: 0;
z-index: 1;
margin-top: auto;
padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--bf-border-default);
background: var(--bf-surface-elevated);
box-sizing: border-box;
}
/* Theme preference — segmented control in mobile drawer footer */
.bf-theme-pref {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.bf-theme-pref__legend {
margin: 0 0 10px;
padding: 0;
font-size: var(--bf-text-xs);
font-weight: var(--bf-weight-black);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bf-text-muted-dark-ready);
}
.bf-theme-pref__options {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: var(--bf-space-1);
border: 1px solid var(--bf-border-default);
border-radius: 14px;
background: var(--bf-surface-muted);
box-sizing: border-box;
}
.bf-theme-pref__option {
position: relative;
flex: 1 1 calc(33.333% - 6px);
min-width: 0;
margin: 0;
cursor: pointer;
}
.bf-theme-pref__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.bf-theme-pref__label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: var(--bf-space-2) 10px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--bf-text-primary);
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-bold);
line-height: 1.2;
text-align: center;
box-sizing: border-box;
transition: none;
}
.bf-theme-pref__input:checked + .bf-theme-pref__label,
.bf-theme-pref__option.is-selected .bf-theme-pref__label {
background: var(--bf365-black, var(--bf-color-primary, #050505));
border-color: var(--bf365-black, var(--bf-color-primary, #050505));
color: var(--bf-on-primary, #fff);
}
.bf-theme-pref__option:focus-within .bf-theme-pref__label {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: 2px;
}
.bf-theme-pref__input:focus {
outline: none;
}
.bf-theme-pref__input:focus:not(:focus-visible) + .bf-theme-pref__label {
outline: none;
}
@media (max-width: 359px) {
.bf-theme-pref__option {
flex: 1 1 100%;
}
}
/* Desktop theme preference — compact trigger + anchored panel */
.bf-theme-pref-desktop {
display: none;
position: relative;
flex-shrink: 0;
}
.bf-theme-pref-desktop__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--bf-radius-md);
background: transparent;
color: var(--bf-text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.bf-theme-pref-desktop__trigger:hover {
color: var(--bf-color-red, #e60012);
background: var(--bf-surface-muted);
}
.bf-theme-pref-desktop__trigger:focus {
outline: none;
}
.bf-theme-pref-desktop__trigger:focus:not(:hover) {
background: transparent;
border-color: transparent;
color: var(--bf-text-primary);
}
.bf-theme-pref-desktop__trigger:active {
background: var(--bf-border-default);
color: var(--bf-color-red, #e60012);
}
.bf-theme-pref-desktop__trigger:focus-visible {
outline: 2px solid var(--bf-color-red, #e60012);
outline-offset: 2px;
}
.bf-theme-pref-desktop__icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
.bf-theme-pref-desktop__icon {
display: block;
width: 22px;
height: 22px;
}
.bf-theme-pref-desktop__icon--dark {
display: none;
}
html[data-bf-theme='dark'] .bf-theme-pref-desktop__icon--light {
display: none;
}
html[data-bf-theme='dark'] .bf-theme-pref-desktop__icon--dark {
display: block;
}
.bf-theme-pref-desktop__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 150;
width: min(260px, calc(100vw - 24px));
padding: var(--bf-space-3);
border: 1px solid var(--bf-border-default);
border-radius: 14px;
background: var(--bf-surface-elevated);
box-shadow: var(--bf-shadow-card, 0 8px 24px var(--bf-shadow-color));
box-sizing: border-box;
}
.bf-theme-pref-desktop__panel[hidden] {
display: none !important;
}
.bf-theme-pref-desktop__panel .bf-theme-pref__legend {
margin-bottom: var(--bf-space-2);
}
.bf-theme-pref-desktop__panel .bf-theme-pref__options {
flex-direction: column;
flex-wrap: nowrap;
gap: var(--bf-space-1);
}
.bf-theme-pref-desktop__panel .bf-theme-pref__option {
flex: 1 1 auto;
}
.bf-theme-pref-desktop__panel .bf-theme-pref__label {
justify-content: flex-start;
padding-left: var(--bf-space-3);
padding-right: var(--bf-space-3);
text-align: left;
}
@media (min-width: 1024px) {
.bf-theme-pref-desktop {
display: block;
}
}
@media (max-width: 1023px) {
.bf-theme-pref-desktop,
.bf-theme-pref-desktop__panel {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
.bf-mobile-drawer__menu {
margin: 0;
padding: 0;
list-style: none;
}
.bf-mobile-drawer__menu > .bf-mobile-drawer__item + .bf-mobile-drawer__item,
.bf-mobile-drawer__menu > li + li {
border-top: 1px solid var(--bf-border-default);
}
.bf-mobile-drawer__item-row {
display: flex;
align-items: stretch;
gap: var(--bf-space-1);
min-width: 0;
}
.bf-mobile-drawer__link,
.bf-mobile-drawer__menu a {
display: block;
flex: 1 1 auto;
min-width: 0;
padding: 14px var(--bf-space-1);
font-size: var(--bf-text-base);
font-weight: var(--bf-weight-bold);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--bf-text-primary);
text-decoration: none;
}
.bf-mobile-drawer__link:hover,
.bf-mobile-drawer__menu a:hover {
color: var(--bf-color-red, #e60012);
}
.bf-mobile-drawer__submenu-toggle {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--bf-radius-md);
background: transparent;
color: var(--bf-text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
/* Lo A, phan bo sot (2026-09-06).
* Bon ho nay bi bo do chinh BO DO cua Lo A, khong phai do luat CSS: bo do doc
* trang thai "nghi" NGAY SAU khi mo drawer/overlay, luc nut dong dang GIU FOCUS,
* nen no doc ra xanh Astra; roi bo loc "chi tinh la bi chiem khi nghi KHAC xanh"
* lai loai chung ra. Hai loi cong lai thanh mot diem mu hoan hao: bao 0/392.
* Do lai co buoc blur + dua chuot ra goc truoc khi doc nghi: 4 ho, 68 luot.
* Cung mau nhu Lo A: (0,2,0) tro len, `:focus:not(:hover)` tra ve mau NGHI,
* khong them !important. */
.bf-mobile-drawer__submenu-toggle:hover {
color: var(--bf-color-red, #e60012);
background: var(--bf-surface-muted);
}
.bf-mobile-drawer__submenu-toggle:focus:not(:hover) {
background: transparent;
color: var(--bf-text-primary);
}
.bf-mobile-drawer__submenu-toggle:focus {
outline: none;
}
.bf-mobile-drawer__submenu-chevron {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.bf-mobile-drawer__submenu-toggle[aria-expanded="true"] .bf-mobile-drawer__submenu-chevron {
transform: rotate(180deg);
}
.bf-mobile-drawer__submenu {
margin: 0;
padding: 0 0 var(--bf-space-2) var(--bf-space-3);
list-style: none;
border-top: 0;
}
.bf-mobile-drawer__submenu[hidden] {
display: none !important;
}
.bf-mobile-drawer__submenu .bf-mobile-drawer__link,
.bf-mobile-drawer__submenu a {
padding: var(--bf-space-3) var(--bf-space-1);
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-semibold);
text-transform: none;
letter-spacing: 0;
color: var(--bf-text-muted-dark-ready);
}
.bf-mobile-drawer__submenu .bf-mobile-drawer__item + .bf-mobile-drawer__item,
.bf-mobile-drawer__submenu > li + li {
border-top: 1px solid var(--bf-border-default);
}
@media (prefers-reduced-motion: reduce) {
.bf-mobile-drawer__submenu-chevron {
transition: none;
}
}
body.bf-mobile-drawer-open {
overflow: hidden;
}
/* Footer — dark shell */
.bf-site-footer {
--bf-footer-border: rgba(255, 255, 255, 0.1);
--bf-footer-text: rgba(255, 255, 255, 0.72);
--bf-footer-text-muted: rgba(255, 255, 255, 0.58);
margin-top: var(--bf-section-gap-desktop, 56px);
background: var(--bf365-black);
border-top: 0;
color: var(--bf-footer-text);
}
.bf-site-footer__main {
padding: var(--bf-space-12) 0 var(--bf-space-10);
}
.bf-site-footer__grid {
display: grid;
grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(0, 1fr)) minmax(240px, 1.3fr);
gap: 0;
align-items: start;
}
.bf-site-footer__brand,
.bf-site-footer__col {
min-width: 0;
padding: 0 clamp(16px, 2vw, 28px);
}
.bf-site-footer__brand {
padding-left: 0;
}
.bf-site-footer__col + .bf-site-footer__col {
border-left: 1px solid var(--bf-footer-border);
}
.bf-site-footer__logo {
display: inline-flex;
margin-bottom: var(--bf-space-4);
font-size: var(--bf-text-3xl);
font-weight: var(--bf-weight-black);
letter-spacing: -0.03em;
line-height: 1;
text-decoration: none;
}
.bf-site-footer .bf-site-header__logo-bf {
color: var(--bf365-white);
}
.bf-site-footer .bf-site-header__logo-365 {
color: var(--bf365-red);
}
.bf-site-footer__description,
.bf-site-footer__sale,
.bf-site-footer__promise {
margin: 0 0 6px;
max-width: 280px;
font-size: var(--bf-text-sm);
line-height: 1.55;
color: var(--bf-footer-text);
}
.bf-site-footer__promise {
margin-bottom: var(--bf-space-4);
/* This line carries two of the five policies, so it is the one footer line
* worth keeping on a single row. At 14px it needs ~350px and a 375px phone
* gives it 343 — measured, it wraps there and fits at 390px. A hair of
* negative tracking buys the 7px back; the alternative was holding this one
* string at 13px while the rest of the theme moved to the scale.
*
* It still wraps at 360px, where only 328px is available and no amount of
* tracking closes the gap — measured down to -0.02em. That is left alone on
* purpose: shrinking text below 14px on the narrowest screen to save a line
* break is the wrong trade, and desktop already renders this on two lines
* because of the 280px max-width above. `balance` makes those two lines an
* even pair instead of a long line with one orphaned word. */
letter-spacing: -0.01em;
text-wrap: balance;
}
.bf-site-footer__social {
margin: 0 0 var(--bf-space-5);
}
.bf-site-footer__social-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.bf-site-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--bf-footer-border);
border-radius: var(--bf-radius-pill);
color: var(--bf365-white);
background: rgba(255, 255, 255, 0.04);
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.bf-site-footer__social-link svg {
width: 18px;
height: 18px;
}
.bf-site-footer__social-link:hover,
.bf-site-footer__social-link:focus-visible {
color: var(--bf365-red);
border-color: var(--bf365-red);
background: rgba(255, 255, 255, 0.08);
}
.bf-site-footer__social-link.is-inactive {
opacity: 0.55;
cursor: default;
}
.bf-site-footer__copyright {
margin: 0;
max-width: 280px;
font-size: var(--bf-text-xs);
line-height: 1.45;
color: var(--bf-footer-text-muted);
}
/* Legal link sharing the copyright line — quieter than the copyright itself. */
.bf-site-footer__legal {
display: block;
margin-top: var(--bf-space-1);
font-size: var(--bf-text-2xs);
}
.bf-site-footer__legal a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.bf-site-footer__legal a:hover,
.bf-site-footer__legal a:focus-visible {
color: var(--bf-footer-text);
}
.bf-site-footer__col-title {
margin: 0 0 var(--bf-space-4);
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-black);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bf365-white);
}
.bf-site-footer__links,
.bf-site-footer__contact {
margin: 0;
padding: 0;
list-style: none;
}
.bf-site-footer__links li + li {
margin-top: 10px;
}
.bf-site-footer__links a {
font-size: var(--bf-text-sm);
line-height: 1.45;
color: var(--bf-footer-text);
text-decoration: none;
transition: color 0.2s ease;
}
.bf-site-footer__links a:hover,
.bf-site-footer__links a:focus-visible {
color: var(--bf365-red);
}
.bf-site-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.bf-site-footer__contact-item + .bf-site-footer__contact-item {
margin-top: var(--bf-space-3);
}
.bf-site-footer__contact-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-top: 1px;
color: var(--bf365-red);
}
.bf-site-footer__contact-icon svg {
width: 18px;
height: 18px;
}
.bf-site-footer__contact-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bf-site-footer__contact-value {
font-size: var(--bf-text-sm);
font-weight: var(--bf-weight-bold);
line-height: 1.45;
color: var(--bf365-white);
}
a.bf-site-footer__contact-value {
text-decoration: none;
/* WCAG 2.5.8. The anchor computes to display:block because it is a flex
* item, so align-items has nothing to act on and min-height alone would
* leave the text against the top edge. Padding grows the target and
* centres the text in one move, and the matching negative margin keeps
* the footer exactly the height it was — the hit area grows without the
* layout moving a pixel. */
padding: 12px 0;
margin: -12px 0;
}
a.bf-site-footer__contact-value:hover,
a.bf-site-footer__contact-value:focus-visible {
color: var(--bf365-red);
}
.bf-site-footer__newsletter-text {
margin: 0 0 14px;
font-size: var(--bf-text-sm);
line-height: 1.55;
color: var(--bf-footer-text);
}
.bf-site-footer__newsletter {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--bf-space-2);
margin-bottom: 18px;
}
/*
* O NHAP THU NAM cua theme, va no theo DUNG dac ta cua lo O Nhap: cao 48 o mep
* ngoai, bo 12. Truoc luot nay no khai cung `height: 42px` — lech ca thang o nhap
* (48) lan nguong vung bam 44 — va no co mat tren CA 12 TRANG × 4 moc, 48 ban ghi.
* Lo O Nhap chi gom "bon o tim kiem" nen o nay dung ngoai pham vi luc do.
*
* CO CHU LEN 16 vi LUAT 16px: Safari iOS tu phong trang khi mot o nhap duoc focus
* co co chu < 16px. O nay nam o footer, hien tren dien thoai o moi trang — dung
* loai o ma luat do sinh ra de bao ve. (O tim kiem header duoc phep giu 14 vi no
* `display: none` hoan toan duoi 1024px; o nay thi khong.)
*
* DA GO BA `!important`, va do truoc khi go chu khong go roi moi do. Liet ke ung
* vien trong CSSOM cho tung thuoc tinh tren chinh phan tu nay:
* background-color : KHONG co luat tac gia nao khac -> !important thua
* background-image : KHONG co luat tac gia nao khac -> !important thua
* color : doi thu manh nhat la `input[type="email"]` cua Astra o
* (0,1,1); luat nay la (0,3,1) nen no da thang san -> thua
* Ba khai bao deu thuoc nhom "tan du tu luc chua co he token", khong chan gi ca.
* Autofill van duoc lo rieng boi luat `:-webkit-autofill` ngay phia tren.
*/
.bf-site-footer .bf-site-footer__newsletter input.bf-site-footer__newsletter-input {
width: 100%;
min-width: 0;
height: 48px;
padding: 0 14px;
border: 1px solid var(--bf-border-default);
border-radius: var(--bf-radius-md, 12px);
background-color: var(--bf-surface-input);
background-image: none;
font-size: var(--bf-text-base);
line-height: 1.4;
color: var(--bf-text-primary);
box-sizing: border-box;
}
.bf-site-footer .bf-site-footer__newsletter input.bf-site-footer__newsletter-input::placeholder {
color: var(--bf-text-muted-dark-ready);
opacity: 1;
}
.bf-site-footer .bf-site-footer__newsletter input.bf-site-footer__newsletter-input:focus-visible {
outline: 2px solid var(--bf365-red);
outline-offset: 2px;
border-color: var(--bf365-red);
}
/* Nut di theo O NHAP, khong theo thang nut: 48 de hai thu cung hang khong lech.
Co chu van ghim 14 (bac md) — cung nguyen tac da chot o lo O Nhap. */
.bf-site-footer__newsletter-btn {
padding: 0 18px;
font-size: var(--bf-text-sm);
letter-spacing: 0.03em;
white-space: nowrap;
height: 48px;
}
.bf-site-footer__newsletter-btn:focus-visible {
outline: 2px solid var(--bf365-white);
outline-offset: 2px;
}
.bf-site-footer__newsletter.is-loading .bf-site-footer__newsletter-btn {
opacity: 0.72;
cursor: wait;
}
.bf-site-footer__newsletter.is-loading .bf-site-footer__newsletter-input {
opacity: 0.9;
}
.bf-footer-newsletter__message {
margin: 10px 0 0;
font-size: var(--bf-text-xs);
line-height: 1.45;
}
.bf-footer-newsletter__message.is-success {
color: var(--bf365-success);
}
.bf-footer-newsletter__message.is-error {
color: var(--bf365-red);
}
.bf-site-footer__payments {
display: flex;
flex-wrap: wrap;
gap: var(--bf-space-2);
}
.bf-site-footer__payment-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 30px;
padding: 0 10px;
border: 1px solid var(--bf-footer-border);
border-radius: var(--bf-radius-sm);
background: rgba(255, 255, 255, 0.08);
font-size: var(--bf-text-2xs);
font-weight: var(--bf-weight-black);
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.78);
}
@media (min-width: 1024px) {
.bf-mobile-search,
.bf-mobile-drawer {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.bf365-header__mobile {
display: none !important;
}
body.bf-mobile-search-open,
body.bf-mobile-drawer-open {
overflow: auto;
}
}
@media (min-width: 1024px) and (max-width: 1280px) {
.bf365-header__desktop {
/*
* Same two-row shape as the base rule; only the gap tightens. The old
* four-column value here is gone — it would have put the menu back in a
* middle track and undone the row below 1281px, which is exactly the band
* where the overflow used to be worst.
*/
gap: 10px;
}
.bf-site-header__menu {
gap: var(--bf-space-1) var(--bf-space-2);
}
.bf-site-header__action {
min-width: 44px;
}
}
@media (max-width: 1023px) {
.bf365-header__desktop {
display: none !important;
}
.bf365-header__mobile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: var(--bf-space-1);
flex-wrap: nowrap;
min-height: var(--bf-header-height-mobile, 64px);
width: 100%;
}
.bf-site-header__inner {
min-height: var(--bf-header-height-mobile, 64px);
}
.bf-site-header__actions--mobile-start {
grid-column: 1;
justify-self: start;
justify-content: flex-start;
gap: 0;
min-width: 0;
}
.bf365-header__mobile > .bf-site-header__logo {
grid-column: 2;
justify-self: center;
align-items: center;
min-width: 0;
min-height: 44px;
max-width: min(120px, 28vw);
font-size: 22px;
}
.bf365-header__mobile > .bf-site-header__logo .bf-site-logo__image {
max-width: 100%;
max-height: 36px;
}
.bf-site-header__actions--mobile-end {
grid-column: 3;
justify-self: end;
justify-content: flex-end;
gap: 0;
min-width: 0;
}
.bf-site-header__actions--mobile {
flex: 0 0 auto;
gap: 0;
}
.bf365-header__mobile .bf-site-header__icon-btn {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.bf365-header__mobile .bf-site-header__icon-btn svg {
width: 20px;
height: 20px;
}
.bf365-header__mobile .bf-site-header__cart-count,
.bf365-header__mobile .bf-site-header__wishlist-count {
top: 2px;
right: 2px;
}
.bf365-header__mobile .bf-site-header__action-indicator {
top: 6px;
right: 6px;
}
.bf-site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px var(--bf-space-5);
}
.bf-site-footer__brand,
.bf-site-footer__col {
padding: 0;
border-left: 0;
}
.bf-site-footer__brand {
grid-column: 1 / -1;
padding-bottom: var(--bf-space-2);
border-bottom: 1px solid var(--bf-footer-border);
}
.bf-site-footer__col + .bf-site-footer__col {
border-left: 0;
padding-top: var(--bf-space-1);
}
.bf-site-footer__col--newsletter {
grid-column: 1 / -1;
padding-top: var(--bf-space-2);
border-top: 1px solid var(--bf-footer-border);
}
}
@media (max-width: 767px) {
.bf365-topbar__viewport {
min-height: 40px;
}
.bf365-topbar__text {
font-size: var(--bf-text-xs);
}
.admin-bar .bf-site-header {
top: 46px;
}
.bf-site-footer__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--bf-space-6);
}
.bf-site-footer__main {
padding: var(--bf-space-8) 0 28px;
}
.bf-site-footer__brand {
padding-bottom: var(--bf-space-3);
}
.bf-site-footer__col--newsletter {
padding-top: var(--bf-space-3);
}
.bf-site-footer__newsletter {
grid-template-columns: minmax(0, 1fr);
}
.bf-site-footer__newsletter-btn {
width: 100%;
}
.bf-site-footer__description,
.bf-site-footer__sale,
.bf-site-footer__promise,
.bf-site-footer__copyright {
max-width: none;
}
}