/* BF365 Component CSS skeleton */




/*
 * `font-size` phai o day. Truoc luot nay cai VO NUT dung chung KHONG khai co chu
 * nao ca — T3 ghim theo tung ho chu khong ghim tren vo. Hau qua do duoc: trong
 * 112 ban ghi nut TU VE CHU (text node con ruot), 88 dat bac md 14 (78,6%), 24 ban
 * ghi lech va TAT CA deu doc 16px o >=1024 va 14,592px o <=921 — tuc roi thang vao
 * `1rem` roi cuoi `html{font-size:91.2%}` cua Astra. Mot nut moi them vao theme se
 * mac dinh lech thang neu vo khong so huu co chu.
 *
 * Bac md 14 la mac dinh cho vo. Cac bac khac ghi de o luat cua chinh chung, va
 * chung deu >= (0,1,0) hoac nap sau components.css nen van thang:
 *   - hang mua PDP (xl 16) khong mang class .bf-btn nen khong bi cham;
 *   - `.bf-home-hero__cta` cung (0,1,0) nhung home.css nap SAU components.css nen
 *     clamp(15px,1.15vw,18px) cua no van thang — da do lai de xac nhan, khong suy dien.
 */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--bf-radius-md);
  border: 1px solid transparent;
  font-weight: var(--bf-weight-black);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  font-size: var(--bf-text-sm);
}

/* Button color variants: global.css (bf365-global) is the source of truth.
   Keep only the shared .bf-btn layout shell here. */


.bf-product-card {
  position: relative;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  background: var(--bf-surface-elevated);
}

.bf-product-card__media {
  aspect-ratio: 1 / 1;
  background: var(--bf-surface-media);
}

.bf-product-card__body {
  padding: var(--bf-space-3);
}

.bf-product-card__brand {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
}

.bf-product-card__title {
  margin: var(--bf-space-1) 0 var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
}

.bf-product-card__price {
  color: var(--bf-color-red);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-black);
}

.bf-product-card__old-price {
  margin-left: 6px;
  color: var(--bf-text-muted-dark-ready);
  text-decoration: line-through;
  font-size: var(--bf-text-sm);
}

/* B1: chi con DINH VI. Nen/chu/bo goc/co chu do global.css:480 quyet dinh —
 * global.css nap sau file nay nen moi khai bao "hinh thuc" o day deu chet san.
 * `border-radius: var(--bf-radius-xs)` 6px o day chua bao gio duoc ve. */
.bf-badge-sale {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACCORDION <details> — một luật sở hữu hình thức cho cả sáu họ
 *
 * Trước 2026-09-06 sáu họ disclosure của theme nằm rải trong bốn file và lệch
 * nhau ở những chỗ không ai chọn:
 *   · bo góc 0 / 18px, mà 18 (--bf-radius-lg) không nằm trên thang 8/12/999
 *     mà lô button đã chốt;
 *   · cỡ chữ summary: 14px (PDP FAQ), 16px (FAQ trang tĩnh), và ba panel
 *     KHÔNG ghim gì cả nên chúng cưỡi rem của Astra — 16px desktop và
 *     14,592px từ 921px xuống, hai giá trị không ai chọn;
 *   · hai họ FAQ cùng vai trò mang hai tên class.
 *
 * Khối này ở components.css chứ không ở product/blog/page.css vì FAQ nay dùng
 * chung: .bf-faq__* phải với tới được cả PDP lẫn trang tĩnh, mà product.css
 * chỉ nạp trên trang sản phẩm.
 *
 * KHÔNG có luật nào của Astra chạm tới <details>/<summary> — quét 21
 * stylesheet, 3.558 luật trên /products/: 0 luật dùng chúng làm type selector.
 * Nên ở đây không cần !important và không cần mẫu :focus:not(:hover) của Lô A.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Panel bọc viền: why-price (PDP) · mục lục bài viết · mục lục outlet guide.
 * Ba luật cũ giống hệt nhau ngoài margin-top và box-shadow, nên hình thức về
 * một chỗ; hai thứ kia ở lại vì chúng là bố cục của từng trang. */
.bf-why-price,
.bf-blog-toc__details,
.bf-outlet-guide__toc {
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-elevated);
  overflow: hidden;
}

/* Danh sách FAQ — dùng chung PDP và trang tĩnh. Viền theo bản PDP: chỉ có
 * đường ngăn giữa các mục, không đóng khung trên/dưới. */
.bf-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bf-faq__item {
  border-bottom: 1px solid var(--bf-border-default);
  overflow: hidden;
}

.bf-faq__item:last-child {
  border-bottom: none;
}

.bf-faq__question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-primary);
  line-height: 1.4;
}

.bf-faq__question::-webkit-details-marker {
  display: none;
}

.bf-faq__question span {
  flex: 1;
}

.bf-faq__chevron {
  flex-shrink: 0;
  color: var(--bf-text-secondary);
  transition: transform 0.2s ease;
}

.bf-faq__item[open] .bf-faq__chevron {
  transform: rotate(180deg);
}

.bf-faq__answer {
  padding: 0 0 14px;
}

.bf-faq__answer p {
  margin: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  line-height: 1.6;
}

/* Cỡ chữ summary của ba panel. Không ghim thì chúng ăn theo luật rem của
 * Astra và đọc ra 16px / 14,592px tuỳ bề rộng — xem đầu khối. */
.bf-why-price__summary,
.bf-blog-toc__toggle,
.bf-outlet-guide__toc-toggle {
  font-size: var(--bf-text-base);
}

/* Trạng thái, theo mẫu Lô A. Ở đây không có hàng rào Astra nào để phá, nên
 * chỉ cần hover thật và một vòng focus thật. */
.bf-faq__question:hover,
.bf-why-price__summary:hover,
.bf-blog-toc__toggle:hover,
.bf-outlet-guide__toc-toggle:hover,
.bf-filter-drawer__section-toggle:hover {
  color: var(--bf-color-red);
}

/* Vòng focus ĐI VÀO TRONG (offset âm) là bắt buộc, không phải khẩu vị: cả năm
 * hộp bao ngoài đều có overflow: hidden, nên một vòng vẽ ra ngoài sẽ bị chính
 * hộp đó cắt mất và người dùng bàn phím không thấy gì. */
.bf-faq__question:focus-visible,
.bf-why-price__summary:focus-visible,
.bf-blog-toc__toggle:focus-visible,
.bf-outlet-guide__toc-toggle:focus-visible,
.bf-filter-drawer__section-toggle:focus-visible {
  outline: 2px solid var(--bf-color-red);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PHAN TRANG — một luật sở hữu hình thức cho cả hai họ
 *
 * Markup do WordPress và WooCommerce sinh ra; theme không đụng template nào của
 * chúng. Trước 2026-09-06 hai họ có hai bộ luật rời, và đo ra hai hình thức cho
 * cùng một vai trò: bo góc 8px (shop) và 12px (blog); padding 0 và 0 12px; dấu
 * "…" 22,09×44 trong suốt ở shop nhưng 44×44 nền trắng có viền ở blog; nút
 * trước/sau 44×44 ở shop nhưng 68,16×44 và 82,78×44 ở blog vì nó có chữ.
 *
 * Hai họ giữ hai tiền tố selector vì markup lõi khác nhau — shop là
 * ul > li > a, blog là div.nav-links > a — và vì luật này còn phải thắng
 * Astra ở nhánh shop. Nhưng chúng dùng CHUNG một khối khai báo.
 *
 * Chữ trong nút trước/sau và aria-label của nó KHÔNG làm được bằng CSS; chúng
 * đặt bằng filter trong inc/pagination.php, không override template.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bf-shop__archive-controls .woocommerce-pagination .page-numbers a,
.bf-shop__archive-controls .woocommerce-pagination .page-numbers span,
.bf-blog-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-elevated);
  box-shadow: none;
  color: var(--bf-text-primary);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bf-shop__archive-controls .woocommerce-pagination .page-numbers a:hover,
.bf-blog-archive__pagination a.page-numbers:hover {
  border-color: var(--bf-color-red);
  background: var(--bf-surface-elevated);
  color: var(--bf-color-red);
}

/* Ô hiện tại giữ nguyên hình thức cũ — cả hai họ vốn đã giống nhau ở đây. */
.bf-shop__archive-controls .woocommerce-pagination .page-numbers .current,
.bf-blog-archive__pagination .page-numbers.current {
  border-color: var(--bf-color-primary, #050505);
  background: var(--bf-color-primary, #050505);
  color: var(--bf-on-primary, #fff);
}

/* Dấu "…" không phải nút: giữ đúng ô 44×44 để hàng không so le, nhưng không
 * nền và không viền thì mới đọc ra là một chỗ ngắt chứ không phải một ô bấm
 * được. Trước đây shop để nó co lại 22,09px còn blog vẽ nó y như một nút. */
.bf-shop__archive-controls .woocommerce-pagination .page-numbers .dots,
.bf-blog-archive__pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* Mũi tên trước/sau: kích thước cố định để nút không phình theo nội dung. */
.bf-pagination__arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BREADCRUMB — một cách xử lý cho cả họ
 *
 * Cả họ dùng chung class .bf-breadcrumb nhưng được bọc trong sáu biến thể
 * (shop · product · blog archive · blog single · search · static page) và được
 * tô ở NĂM file CSS khác nhau. Luật này không đụng màu hay cỡ chữ của chúng —
 * nó lo đúng một thứ, và lo cho cả họ: VÙNG BẤM DỌC.
 *
 * Đo trước: mọi link breadcrumb cao 15px (cỡ chữ 12) hoặc 23,09px (cỡ chữ 14),
 * và padding trên/dưới bằng 0 ở tất cả. Hai link trong hàng đợi — 58×15
 * "Trang chủ" và 83×15 "SALE 60-80%" — chỉ là hai trong số đó, nên chúng được
 * xử lý cùng cả họ chứ không phải hai ngoại lệ riêng.
 *
 * ĐÍCH LÀ ≥ 24px, KHÔNG PHẢI 44px. 44 làm dải breadcrumb dày lên gần ba lần và
 * đẩy toàn bộ nội dung xuống — đó chính là lý do nó từng nằm trong danh sách
 * "KHÔNG sửa". 24px đủ để ngón tay không trượt sang link kế bên, mà dải chỉ dày
 * thêm khoảng 6px.
 *
 * DÙNG min-height CHỨ KHÔNG DÙNG padding, và đây là sai khác có đo: họ này có
 * HAI cỡ chữ, nên một giá trị padding cho ra hai chiều cao khác nhau.
 * --bf-space-1 (4px) cho 15+8 = 23px, KHÔNG đạt đích; --bf-space-2 (8px) cho
 * 31px, tức dày thêm 13px thay vì 6. min-height cho đúng 24 ở mọi biến thể bằng
 * một khai báo, và không đụng bề rộng nên hàng không giãn ngang.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * inline CHỨ KHÔNG inline-flex — đây là bản sửa của chính lượt trước, và lý do
 * là một phép đo trên CẢ 188 tên product_cat chứ không phải trên vài trang mẫu.
 *
 * Vẽ thật từng tên bằng đúng font và cỡ chữ của breadcrumb, ở cột 358px của
 * mốc 390: 4 tên rộng hơn 60% cột, đỉnh 342,89px = 95,8%.
 *   "Giày Sneakers Adidas Nike chính hãng giá dưới 1 triệu đồng"  342,89px
 *   "Giày chạy bộ Adidas Nike chính hãng giá dưới 1 triệu Đồng"   338,31px
 *   "Hàng trưng bày - Sale up 90% (Không đổi trả)"                268,44px
 *   "Áo khoác Adidas, Nike, Reebok, Puma"                         220,77px
 * Trên PDP, mục danh mục là một <a>. Với inline-flex nó là hộp NGUYÊN VẸN,
 * chữ bên trong không ngắt được — một tên như thế sẽ tràn. Với inline thì nó
 * ngắt dòng bình thường.
 *
 * Vùng bấm vẫn ≥ 24px: hộp inline không lấy chiều cao từ line-height, nhưng
 * padding dọc VẪN nở vùng vẽ và vùng bấm của nó. line-height: 24px trên hộp
 * bao lo phần còn lại — nó giãn các dòng ra đúng 24px nên vùng bấm đã nở của
 * hai dòng liền nhau không chồng lên nhau.
 */
/*
 * `display: block` VA `font-size` deu phai o day, va ly do la mot phep do.
 *
 * Chieu cao 24px cua link KHONG den tu `line-height` — the <a> la `display:
 * inline` nen chieu cao rect cua no = hop inline (do CO CHU quyet dinh) cong
 * dem doc 4,5+4,5. Co chu 12 cho 15+9 = 24; co chu 14 cho 18+9 = 27. Nghia la
 * "24px" chi dung chung nao ca ho dung MOT co chu.
 *
 * Va `display: block` phai o day vi hop bao la flex thi the <a> thanh flex
 * item: `display: inline` bi ep thanh block va dem doc CONG vao chieu cao
 * thay vi duoc line-height nuot — do la 33px do duoc o bien the shop.
 *
 * Sau khi gop: 28/28 to hop (7 trang co breadcrumb × 4 moc) cho link cao
 * dung 24px, mot `display`, mot co chu.
 */
.bf-breadcrumb {
  line-height: 24px;
  display: block;
  font-size: var(--bf-text-xs);
}

.bf-breadcrumb a {
  display: inline;
  padding-block: 4.5px;
}