﻿/* KHÔNG ẨN nội dung nào – chỉ giúp co giãn + cuộn ngang + sidebar mobile */
:root{ --font-base:14px; --font-table:13px; --font-small:12px; --topbar-h:46px }
*{ box-sizing:border-box }
body{ margin:0; font-family:"Times New Roman",Times,serif; font-size:var(--font-base) }

/* Bảng tự có thanh cuộn ngang khi hẹp */
.card{ overflow-x:auto }
table{ width:100%; border-collapse:separate; table-layout:fixed }
table th, table td{ white-space:nowrap }

/* Sidebar/topbar phổ thông (không đụng CSS cũ của bạn – chỉ bổ sung) */
.btn-burger{ display:none; margin-right:8px; width:38px; height:32px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer }

/* ≤1200px: sidebar thu nhỏ (KHÔNG ẩn link, chỉ ẩn chữ nếu thiếu chỗ) */
@media (max-width:1200px){
  :root{ --font-base:13px; --font-table:12px; --font-small:11.5px }
  .sidebar{ width:64px }
  .sidebar a{ justify-content:center }
  .sidebar a span{ display:none }
  .main-content{ margin-left:64px !important; } /* giữ bố cục hiện tại */
}

/* ≤992px: bớt cứng colgroup để bảng linh hoạt */
@media (max-width:992px){
  .right-container{ display:none }          /* chừa chỗ cho tiêu đề/ô tìm kiếm */
  .search-container{ max-width:220px }
  col{ width:auto !important; }
}

/* ≤768px: sidebar off-canvas (vẫn đầy đủ menu, chỉ trượt vào/ra) */
@media (max-width:768px){
  :root{ --topbar-h:50px; --font-base:13px; --font-table:12px; --font-small:11px }
  .btn-burger{ display:inline-block }
  .logo span{ display:none }                 /* để không đè nhau, nội dung vẫn đủ */
  .search-container{ max-width:unset; flex:1; margin-left:auto }

  .sidebar{
    position:fixed; left:0; top:var(--topbar-h); bottom:0;
    width:230px; transform:translateX(-100%);
    transition:transform .2s ease; z-index:1001;
    box-shadow:2px 0 6px rgba(0,0,0,.18)
  }
  .sidebar.open{ transform:translateX(0) }
  .main-content{ margin-left:0 !important; }
}

/* ≤480px: giảm padding ô bảng */
@media (max-width:480px){
  .top-bar{ padding:0 8px }
  .btn, select, input{ font-size:var(--font-small) }
  table th, table td{ padding:5px 6px }
}
