/* ============================================================
   MITN — Sản phẩm bán chạy (bestsellers)
   Bổ sung riêng cho trang: eyebrow hero, toolbar filter/sort,
   trạng thái rỗng. Lưới sản phẩm + product card dùng lại
   row/col Flatsome + .mitn-product-card đã load site-wide,
   không cần định nghĩa lại ở đây.
   ============================================================ */

.mitn-bestsellers .page-hero { position: relative; overflow: hidden; }
.mitn-bestsellers .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 88% 18%, rgba(221, 51, 51, 0.16), transparent 45%);
  pointer-events: none;
}
.mitn-bestsellers .page-hero > .policy-container { position: relative; }

.mitn-bsl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-star, #f5a623);
  margin-bottom: var(--s-2);
}
.mitn-bsl-eyebrow svg { width: 14px; height: 14px; }

/* ── TOOLBAR ── */
.mitn-bsl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-6) 0 var(--s-5);
}

/* flex-basis: 100% — luôn chiếm trọn 1 dòng riêng của flex container toolbar,
   để hộp sắp xếp luôn bị đẩy xuống dòng dưới, không bao giờ "chia dòng" với
   hàng pill (tránh trường hợp flexbox coi cả khối pill nhiều dòng + sortbox
   là chung 1 dòng ngoài, khiến sortbox bị canh giữa theo chiều dọc và đè
   lên hàng pill thứ 2). */
.mitn-bsl-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: 1 1 100%; }

/* Nút mở popup lọc — chỉ hiện trên mobile (xem media query bên dưới) */
.mitn-bsl-filter-trigger {
  display: none;
  align-items: center;
  gap: var(--s-2);
  height: 42px;
  padding: 0 var(--s-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  cursor: pointer;
}
.mitn-bsl-filter-trigger svg { width: 18px; height: 18px; flex-shrink: 0; }

.mitn-bsl-filter {
  height: 38px;
  padding: 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-body);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.mitn-bsl-filter:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.mitn-bsl-filter.is-active { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: #fff; }

.mitn-bsl-sortbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  /* margin-top tách hẳn khỏi khối pill (có thể dài 2-3 dòng), để không bị
     dính sát/"dồn" ngay dưới hàng pill cuối. */
  margin-top: var(--s-2);
}

/* label kế thừa "display:block" từ style label toàn site (form WooCommerce),
   khiến nó thành flex item co giãn được và bị vỡ dòng "Sắp xếp:" thành
   "Sắp" + "xếp:" khi flexbox tính toán lại độ rộng. Ép về 1 dòng. */
.mitn-bsl-sortbox label {
  white-space: nowrap;
  flex-shrink: 0;
}
.mitn-bsl-sortbox select {
  height: 38px;
  padding: 0 var(--s-8) 0 var(--s-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-base);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--s-2) center;
  background-size: 16px;
}
.mitn-bsl-sortbox select:focus {
  outline: none;
  border-color: var(--color-border-strong, var(--color-border-default));
}

/* ── POPUP LỌC DANH MỤC (mobile) ── */
.mitn-bsl-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.mitn-bsl-modal.mitn-bsl-modal--open { display: block; }

.mitn-bsl-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.5);
}

.mitn-bsl-modal__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-base, #fff);
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  animation: mitnBslModalSlideUp var(--duration-fast, 0.18s) ease-out;
}
@keyframes mitnBslModalSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.mitn-bsl-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.mitn-bsl-modal__header h2 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}
.mitn-bsl-modal__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.mitn-bsl-modal__list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  overflow-y: auto;
}
.mitn-bsl-modal__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-body);
  text-align: left;
  cursor: pointer;
}
.mitn-bsl-modal__item.is-active { color: var(--color-brand-primary); }
.mitn-bsl-modal__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

body.mitn-bsl-modal-locked { overflow: hidden; }

/* ── GRID ── */
.mitn-bsl-grid { padding-bottom: 0; }
.mitn-bsl-grid.mitn-bsl-grid--loading { opacity: 0.5; pointer-events: none; transition: opacity var(--duration-fast, 0.15s); }

/* ── PHÂN TRANG ── */
#mitnBslPagination { padding-bottom: var(--s-10); }
#mitnBslPagination:empty { display: none; }

.mitn-bsl-empty {
  display: none;
  width: 100%;
  text-align: center;
  padding: var(--s-12) 0;
  color: var(--color-text-subtle, var(--color-text-muted));
}
.mitn-bsl-empty--show { display: block; }
.mitn-bsl-empty svg { width: 46px; height: 46px; margin: 0 auto var(--s-3); opacity: 0.4; }

.mitn-bsl-none {
  text-align: center;
  padding: var(--s-12) 0;
  color: var(--color-text-subtle, var(--color-text-muted));
  font-size: var(--fs-base);
}

@media (max-width: 767px) {
  .mitn-bsl-toolbar { flex-direction: column; align-items: stretch; }
  .mitn-bsl-filters { display: none; }
  .mitn-bsl-filter-trigger { display: inline-flex; }
  .mitn-bsl-sortbox { justify-content: space-between; }
  .mitn-bsl-sortbox select { flex: 1; }
}