/* ===============================
   NGÂN SÁCH – CSS (đồng bộ, gọn, đẹp)
   - Filter dạng card
   - Table rõ ràng + hover
   - Mobile: filter 1 cột + table card (data-label)
   =============================== */

.body{
  background:#faf6f0;
  width:100%;
  min-height:100%;
  padding:32px 0;
}

/* ===== FILTER (CARD) ===== */
.vb-search-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}

.vb-search-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 16px;
  align-items:end;
}

.vb-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vb-field label{
  font-family:Inter, sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  color:rgba(48,48,48,1);
}

.vb-input{
  width:100%;
  height:40px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.vb-input:focus{
  border-color:#0d47a1;
  box-shadow:0 0 0 3px rgba(13,71,161,.15);
}

.vb-search-actions{
  display:flex;
  justify-content:flex-end;
}

.vb-btn-search{
  height:40px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid rgba(13,71,161,.18);
  background:rgba(13,71,161,.10);
  color:rgba(13,71,161,1);
  cursor:pointer;
  white-space:nowrap;

  font-family:Inter, sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;

  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}

.vb-btn-search:hover{
  background:rgba(13,71,161,.14);
  border-color:rgba(13,71,161,.25);
}

.vb-btn-search:active{
  transform:translateY(1px);
}

.vb-divider{
  border:none;
  border-top:1px solid rgba(48,48,48,.15);
  margin:16px 0 20px;
}

/* ===== TABLE WRAP ===== */
.vb-table-wrapper{
  background:#fff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  margin-bottom:24px;
}

.vb-table-wrapper{
  overflow-x:auto; /* desktop vẫn scroll nếu cần */
}

.vb-table{
  width:100%;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.vb-table thead{
  background:#f5f5f5;
}

.vb-table th,
.vb-table td{
  padding:12px 16px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
  overflow-wrap:anywhere;
}

.vb-table th{
  font-family:Inter, sans-serif;
  font-weight:700;
  font-size:14px;
  color:rgba(48,48,48,1);
}

.vb-table tbody tr:nth-child(even){
  background:#fafafa;
}

.vb-table tbody tr:hover{
  background:#eef4ff;
}

/* Link trong bảng */
.vb-table td a{
  color:#0f172a;
  text-decoration:none;
  display:block;
}

.vb-table td a:hover,
.vb-table td a:focus{
  color:#0d47a1;
  text-decoration:underline;
}

/* widths */
.col-stt{ width:70px; }
.col-tenbaocao{ min-width:280px; }
.col-nam{ width:120px; }
.col-bieumau{ width:150px; }
.col-soqd{ width:220px; }
.col-ngay{ width:150px; }
.col-chitiet{ width:190px; }

/* nút tải file (nếu RenderFileLinks dùng class này) */
.vb-btn-download{
  border:none;
  background:#e5f0ff;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:6px 10px;
  font-size:13px;
  text-decoration:none;
  color:#0d47a1;
  transition:background .15s ease;
}
.vb-btn-download:hover{
  background:#d0e4ff;
  text-decoration:none;
}
.vb-btn-download i{ margin-right:6px; }

/* ===== PAGINATION (optional) ===== */
.page{ margin-top:10px; }

/* ===== TABLET ===== */
@media (max-width: 991.98px){
  .vb-search-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .vb-search-actions{
    grid-column:span 2;
    justify-content:flex-end;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px){
  .body{ padding:16px 0; }

  .vb-search-box{
    border-radius:12px;
    padding:14px;
  }

  .vb-search-grid{
    grid-template-columns:1fr;
  }

  .vb-search-actions{
    grid-column:span 1;
    justify-content:flex-start;
  }

  .vb-btn-search{
    width:100%;
    justify-content:center;
  }

  /* Mobile: biến table thành cards dựa vào data-label */
  .vb-table-wrapper{
    overflow:visible;           /* bỏ scroll ngang */
    border-radius:12px;
  }

  .vb-table{
    min-width:0;
    width:100%;
  }

  .vb-table thead{
    display:none;
  }

  .vb-table tbody tr{
    display:block;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    padding:10px 12px;
  }

  .vb-table tbody tr:nth-child(even){
    background:#fff;
  }

  .vb-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:none;
  }

  .vb-table td::before{
    content:attr(data-label);
    font-weight:700;
    color:#475569;
    min-width:110px;
    flex:0 0 auto;
  }

  /* cell nội dung */
  .vb-table td a{
    text-align:right;
  }
}

/* Small mobile padding safe-area */
@media (max-width: 575.98px){
  .safe-area{ padding:0 12px; }
}
.vb-table th