/* ==========================================================================
   Bison – Thanh điều hướng đáy màn hình (mobile < 850px)
   Trang chủ · Gọi (tròn đen) · Zalo (tròn đỏ) · Giỏ hàng (có số)
   ========================================================================== */
.bc-nav { display: none; }

@media (max-width: 849px) {
  .bc-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 995;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* Trang chủ · Gọi · Danh mục · Zalo · Giỏ hàng */
    padding: 0 4px env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #E3E3E3;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .bc-nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 62px; padding: 6px 2px 7px;
    color: #141414; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .bc-nav__item:hover, .bc-nav__item:focus { color: #141414; }
  .bc-nav__item:focus-visible { outline: 3px solid #C8161D; outline-offset: -3px; border-radius: 8px; }
  .bc-nav__ico { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
  .bc-nav__label { font-size: 12px; font-weight: 600; line-height: 1.1; white-space: nowrap; }

  /* Ô đang xem (chỉ Trang chủ): chữ + icon đỏ, vạch đỏ phía trên */
  .bc-nav__item.is-active, .bc-nav__item.is-active:hover { color: #C8161D; }
  .bc-nav__item.is-active .bc-nav__label { font-weight: 700; }
  .bc-nav__item.is-active::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px;
    border-radius: 0 0 3px 3px; background: #C8161D; transform: translateX(-50%);
  }

  /* Gọi + Zalo: vòng tròn màu */
  .bc-nav__item--call .bc-nav__ico, .bc-nav__item--zalo .bc-nav__ico { border-radius: 50%; color: #fff; }
  .bc-nav__item--call .bc-nav__ico { background: #141414; }
  .bc-nav__item--zalo .bc-nav__ico { background: #C8161D; }
  .bc-nav__item--zalo .bc-nav__label, .bc-nav__item--zalo:hover { color: #C8161D; }
  .bc-nav__item--zalo .bc-nav__label { font-weight: 700; }

  /* Danh mục (giữa thanh): ô vuông đen bo góc để nổi bật giữa 2 nút tròn Gọi / Zalo */
  .bc-nav__item--cat .bc-nav__ico { border-radius: 10px; background: #141414; color: #fff; width: 36px; height: 32px; }
  .bc-nav__item--cat .bc-nav__label { font-weight: 700; }

  /* Số sản phẩm trong giỏ */
  .bc-nav__count {
    position: absolute; top: -3px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 2px solid #fff;
    background: #C8161D; color: #fff; font: 700 11px/14px 'Be Vietnam Pro', system-ui, sans-serif; text-align: center;
    box-sizing: border-box;
  }
  .bc-nav__count.is-empty { display: none; }

  /* Chừa chỗ cho thanh; đẩy các nút cố định sẵn có của Flatsome lên trên thanh */
  body.bc-nav-on { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body.bc-nav-on .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  body.bc-nav-on .category-filtering.show-for-medium { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-nav * { transition: none !important; }
}