/* 27/09 anh Nam: toàn bộ giao diện dùng được trên điện thoại. Bundle React không có mã nguồn → lớp phủ CSS + mobile.js.
   ≤ 900px: menu trái thành ngăn kéo (nút ☰), nội dung full chiều ngang, bảng cuộn ngang trong khung, thanh công cụ xuống dòng. */
@media (max-width: 900px) {
  #root > div > div.flex.h-full > aside, #root aside.w-60 {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 1000; width: 280px !important; max-width: 86vw;
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(15,23,42,.25);
  }
  body.sg-nav-open #root aside.w-60 { transform: none; }
  .sg-nav-back { position: fixed; inset: 0; background: rgba(15,23,42,.38); z-index: 999; display: none; }
  body.sg-nav-open .sg-nav-back { display: block; }
  .sg-nav-btn { position: fixed; top: 7px; left: 8px; z-index: 998; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0;
    background: #fff; color: #0f172a; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
  body.sg-nav-open .sg-nav-btn { display: none; }
  /* khung nội dung */
  #root header.border-b { padding: 10px 12px 10px 56px !important; min-height: 52px; flex-wrap: wrap; gap: 6px; }
  #root header h1 { font-size: 1.05rem !important; }
  #root main.flex-1 { padding: 12px !important; }
  #root .min-w-52, #root .min-w-56, #root .min-w-60, #root .min-w-64, #root .min-w-72, #root .min-w-80 { min-width: 0 !important; }
  #root .max-w-56 { max-width: 100% !important; }
  #root main .flex:not(.flex-col) { flex-wrap: wrap; }
  #root main input, #root main select, #root main textarea { max-width: 100%; }
  /* ô tìm kiếm chiếm nguyên dòng, bộ lọc xuống dưới */
  #root main .relative.flex-1, #root main form.relative.flex-1 { flex: 1 1 100% !important; }
  /* bảng: cuộn ngang trong khung, không đẩy cả trang */
  #root main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #root main table th, #root main table td { white-space: nowrap; }
  #root main table td .truncate, #root main table td p { white-space: normal; }
  /* hộp thoại / popup chiếm gần hết màn hình */
  #root [role="dialog"] > div, #root .fixed.inset-0 > div { max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 24px); overflow: auto; }
  /* dòng cài đặt: nhãn trên, nút chọn xuống dưới; khung không vượt màn hình */
  #root main .justify-between { flex-wrap: wrap; row-gap: 8px; }
  #root main .grid > *, #root main .rounded-xl, #root main .rounded-2xl { min-width: 0; max-width: 100%; }
  #root main .inline-flex { flex-wrap: wrap; }
  /* lưới tự dựng (style inline) và khối con: được co theo màn hình, không giữ bề rộng nội dung */
  #root main div { min-width: 0; }
  #root main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* thẻ số liệu xếp 2 cột */
  #root main .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}