/* THANH ĐIỀU HƯỚNG ĐÁY (điện thoại) — KIỂU DÁNG DÙNG CHUNG cho cả hai bộ dựng:
     · trang công khai (Blade)  → nạp bằng <link> trong layout.blade.php & layout-fb.blade.php
     · ứng dụng /app (React)    → MobileTabBar.tsx import thẳng tệp NÀY

   Trước 30/08/2026 mỗi bên tự viết kiểu riêng: bản công khai lục ngọc theo brand, còn bản /app
   vẫn đỏ theo chủ đề cũ (chú thích trong chính nó ghi "vàng kim trên nền lục ngọc" nhưng code
   lại đỏ) — bước từ trang công khai vào /app là thanh dưới đổi màu và đổi luôn cả thứ tự tab.
   Nay chỉ còn MỘT tệp này. Sửa màu/kích thước ở đây là cả hai nơi đổi theo.

   Danh sách tab (nhãn · icon · đích) KHÔNG nằm ở đây mà ở
   backend/resources/shared/mobile-tabbar.json — cũng dùng chung cho cả hai. */

.m-tabbar { display: none; }

@media (max-width: 767px) {
  .m-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 1150;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    /* Nền NỔI tông LỤC NGỌC + VÀNG KIM theo brand (đồng bộ topbar) */
    background: linear-gradient(100deg, #00702f 0%, #008a3c 55%, #00a247 100%);
    border-top: 2px solid #7fc79f;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, .45);
  }

  .m-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 0 8px; font-size: 11px; font-weight: 600; line-height: 1;
    color: #cfe9d9; text-decoration: none; -webkit-tap-highlight-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    /* Bản React dựng bằng <button> nên phải gỡ kiểu mặc định của nút. */
    background: none; border: 0; font-family: inherit; cursor: pointer;
  }

  .m-tab-ic { width: 22px; height: 22px; display: inline-flex; }
  .m-tab-ic svg { width: 22px; height: 22px; }
  .m-tab.is-active { color: #fff; }

  /* Nút giữa NỔI lên trên thanh — viền kem tách khỏi nền lục ngọc. */
  .m-tab-center { color: #fff; }
  .m-tab-fab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-top: -22px; border-radius: 50%;
    background: #1c8a4e; color: #fff; border: 4px solid #f4f5f7;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55);
  }
  .m-tab-fab svg { width: 26px; height: 26px; }
  .m-tab-center:active .m-tab-fab { transform: scale(.95); }
}