@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  
  body { font-family: 'Inter', sans-serif; background-color: #f8fafc; margin: 0; }

  /* Tùy chỉnh thanh cuộn chuyên nghiệp */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

  /* Cấu trúc Table chuyên sâu */
  .table-wrapper {
    position: relative;
    height: calc(100vh - 220px); /* Tự động tính chiều cao để bảng luôn cố định trong màn hình */
    overflow: auto; /* Cho phép cuộn cả ngang và dọc bên trong khung này */
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
  }

  table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }

  /* Sticky Header - Luôn dính trên cùng của .table-wrapper */
  thead th {
    position: sticky !important;
    top: 0;
    z-index: 50 !important;
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap;
  }

  /* Sticky Cột bên trái (Mã TX) */
  .sticky-col-left {
    position: sticky !important;
    left: 0;
    z-index: 40 !important;
    background-color: white;
    border-right: 1px solid #e2e8f0 !important;
  }
  thead th.sticky-col-left { z-index: 60 !important; background-color: #f1f5f9 !important; }

  /* Sticky Cột bên phải (Hành động) */
  .sticky-col-right {
    position: sticky !important;
    right: 0;
    z-index: 40 !important;
    background-color: white;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -2px 0 5px rgba(0,0,0,0.03);
  }
  thead th.sticky-col-right { z-index: 60 !important; background-color: #f1f5f9 !important; }

  /* Xử lý chân trang chuyên nghiệp */
  .pagination-bar {
    position: sticky;
    bottom: 0;
    z-index: 70;
    background-color: white;
    border-top: 1px solid #e2e8f0;
    padding: 12px 20px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05); /* Tạo bóng đổ che dữ liệu bên dưới */
  }

  .menu-item.active { background-color: #e6f8f6; color: #00B6A4; font-weight: 600; }
  .view-section { display: none; }
  .view-section.active { display: block; }

  /* Giao diện Dạng Thẻ (Card) cho Mobile */
  @media (max-width: 768px) {
    .table-wrapper table, .table-wrapper thead, .table-wrapper tbody, .table-wrapper th, .table-wrapper td, .table-wrapper tr {
      display: block;
    }
    .table-wrapper thead tr { display: none; } /* Ẩn header gốc */
    .table-wrapper tr { 
      margin-bottom: 1rem; 
      border: 1px solid #e2e8f0; 
      border-radius: 0.75rem; 
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .table-wrapper td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem !important;
      border-bottom: 1px dashed #f1f5f9;
      text-align: right;
    }
    .table-wrapper td::before {
      content: attr(data-label);
      float: left;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      font-size: 0.65rem;
      margin-right: 1rem;
    }
    .table-wrapper td:last-child { border-bottom: 0; justify-content: flex-end; }
    .sticky-col-left, .sticky-col-right { position: static !important; box-shadow: none !important; border: none !important; background: transparent !important; }
  }

/* Khóa rớt dòng cho toàn bộ tiêu đề và dữ liệu trong bảng */
  .table-wrapper th, 
  .table-wrapper td {
    white-space: nowrap !important;
  }