{# ══ THANH CHUYỂN TRANG BÁO CÁO (dùng chung 4 trang) ═══════════════════════
   Trước 29/07/2026: 4 thẻ xếp NGANG trong khung `overflow-x-auto` → trên điện
   thoại rộng 479px trong khung 374px, mục "📊 Lợi nhuận" BỊ KHUẤT, phải vuốt
   ngang mới thấy (đo thật ở 390px).
   Nay: LƯỚI 2 cột trên điện thoại · 4 cột trên máy tính → luôn thấy đủ 4 mục,
   không bao giờ phải vuốt. Định nghĩa MỘT chỗ, 4 trang cùng include.
#}
<nav class="bc-tabs" aria-label="Các loại báo cáo">
  {% set _tabs = [
    ('/reports',          '📈', 'Kinh doanh', 'Doanh thu · lãi gộp'),
    ('/bao-cao-tai-chinh','💼', 'Tài chính',  'Báo cáo quản trị · tham khảo'),
    ('/inventory/report', '📦', 'Kho',        'Tồn kho · giá trị'),
    ('/bao-cao-loi-nhuan','📊', 'Lợi nhuận',  'Theo loại hàng'),
    ('/bao-cao-chi-nhanh','🏢', 'Chi nhánh',  'Từng CN · tổng hợp'),
    ('/bao-cao-tuan-thu', '⚖️', 'Tuân thủ',   '400 triệu · 20 triệu · bảng kê'),
  ] %}
  {% for duong_dan, hinh, ten, mo_ta in _tabs %}
  <a href="{{ duong_dan }}" class="bc-tab{{ ' bc-tab-on' if request.path == duong_dan else '' }}">
    <span class="bc-tab-ic">{{ hinh }}</span>
    <span class="bc-tab-txt">
      <span class="bc-tab-ten">{{ ten }}</span>
      <span class="bc-tab-mo">{{ mo_ta }}</span>
    </span>
  </a>
  {% endfor %}
</nav>

<style>
  .bc-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; margin-bottom: 16px;
  }
  @media (min-width: 900px) { .bc-tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
  .bc-tab {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; border-radius: 14px;
    background: #fff; border: 1px solid #e9e9ee;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    min-width: 0; transition: transform .08s, box-shadow .15s, border-color .15s;
  }
  .bc-tab:active { transform: scale(.985); }
  .bc-tab:hover  { border-color: #f0c674; box-shadow: 0 3px 10px rgba(0,0,0,.07); }
  .bc-tab-ic { font-size: 19px; line-height: 1; flex: 0 0 auto; }
  .bc-tab-txt { display: flex; flex-direction: column; min-width: 0; }
  .bc-tab-ten {
    font-weight: 800; font-size: 13.5px; color: #1f2937; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bc-tab-mo {
    font-size: 10.5px; color: #9aa0aa; line-height: 1.3; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Mục ĐANG XEM — nền đỏ đô như header app */
  .bc-tab-on {
    background: linear-gradient(135deg, #4a0000, #8b0000);
    border-color: transparent; box-shadow: 0 4px 14px rgba(74,0,0,.28);
  }
  .bc-tab-on .bc-tab-ten { color: #fff; }
  .bc-tab-on .bc-tab-mo  { color: rgba(255,255,255,.72); }
  .bc-tab-on:hover { border-color: transparent; }
  /* Màn hình rất hẹp: bỏ dòng mô tả cho gọn, giữ đủ 4 mục */
  @media (max-width: 360px) {
    .bc-tab-mo { display: none; }
    .bc-tab { padding: 11px 10px; }
  }
  /* ── Bộ lọc báo cáo: gọn trên điện thoại, 1 hàng trên máy tính ── */
  .bc-lbl { display:block; font-size:11px; font-weight:700; color:#8a8a8e;
            text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
  .bc-loc { display:flex; flex-direction:column; gap:12px; }
  .bc-loc-ngay  { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .bc-loc-nhanh { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .bc-chip {
    padding:9px 4px; border-radius:11px; border:1px solid #ecdcbf; background:#fffdf7;
    font-size:12.5px; font-weight:700; color:#b45309; white-space:nowrap;
    transition:background .12s, transform .07s;
  }
  .bc-chip:active { transform:scale(.96); }
  .bc-chip:hover  { background:#fef3c7; }
  .bc-chip-xam { color:#6b7280; border-color:#e5e7eb; background:#fafafa; }
  .bc-loc-nut { display:grid; grid-template-columns:1fr; gap:8px; }
  .bc-lien-ket {
    flex:1 1 auto; text-align:center; padding:9px 14px; border-radius:12px;
    border:1px solid #e5e7eb; background:#fff; font-size:13px; font-weight:700;
    color:#15803d; white-space:nowrap;
  }
  .bc-lien-ket-vang { color:#b45309; }
  .bc-lien-ket:hover { background:#f9fafb; }
  @media (min-width: 720px) {
    .bc-loc { flex-direction:row; align-items:flex-end; gap:14px; }
    .bc-loc-ngay  { grid-template-columns:170px 170px; }
    .bc-loc-nhanh { grid-template-columns:repeat(4,auto); }
    .bc-loc-nut   { grid-template-columns:auto auto; align-items:end; margin-left:auto; }
    .bc-lien-ket  { flex:0 0 auto; }
  }
  /* Lưới ô lọc nhiều tiêu chí (trang Lợi nhuận): 1 cột trên ĐT, tự chia cột rộng */
  .bc-loc-o { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
  .bc-o-rong { grid-column:1/-1; }
  @media (min-width:720px){ .bc-o-rong { grid-column:auto; } }
</style>