/* v9.0.2 */
/* ============================================================================
RESULTS TABLE RENDERER v8.3.2 CSS (Deep Teal - Đồng bộ styles v8.3.2-1)
MoldCutterSearch System
Updated: 2026-02-11

Mục tiêu:
- Đồng bộ table với token màu Deep Teal từ file styles (ui-accent / ui-*).
- Chữ rõ, tối hơn nhưng KHÔNG dùng font-weight quá đậm (tránh cảm giác “bold”).
- Giữ đầy đủ UI: sticky header, sticky columns khi .unlocked, filter popup,
  sort/filter state, pagination, mobile, print.
- Fix popup filter: nền trắng đặc, không trong suốt.

Ghi chú:
- File này chỉ lo phần TABLE. Màu/Font tổng thể nằm ở styles-v8.3.2-1.css.
============================================================================ */

/* ===== Local tokens (fallback nếu token global chưa có) ===== */
.results-table-wrapper{
  --rt-surface: var(--ui-surface, #ffffff);
  --rt-surface-2: var(--ui-surface-2, #f8fafc);
  --rt-border: var(--ui-border, #e6e9f0);

  --rt-text: var(--text-primary, #0f172a);
  --rt-text-2: var(--text-secondary, #111827);
  --rt-muted: var(--text-muted, #475569);

  /* Deep Teal accent comes from styles-v8.3.2-1.css via --ui-accent */
  --rt-accent: var(--ui-accent, #0F766E);
  --rt-accent-hover: var(--ui-accent-hover, #0A5C56);
  --rt-accent-soft: var(--ui-accent-soft, rgba(15, 118, 110, 0.16));

  --rt-link: var(--ui-link, #2563eb);
  --rt-link-hover: var(--ui-link-hover, #1d4ed8);

  --rt-success: var(--ui-success, #16a34a);
  --rt-warning: var(--ui-warning, #f59e0b);
  --rt-danger: var(--ui-danger, #ef4444);
  --rt-info: var(--ui-info, #0284c7);

  --rt-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.08);
  --rt-shadow-md: 0 22px 60px rgba(2, 6, 23, 0.22);
}

/* ===== TABLE WRAPPER ===== */
.results-table-wrapper{
  display: none;
  background: var(--rt-surface);
  border-radius: 14px;
  box-shadow: var(--rt-shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(2, 6, 23, 0.06);
}

.results-table-wrapper.active{
  display:flex;
  flex-direction:column;
  flex: 0 0 auto;     /* không ép thành khung cao cố định */
  min-height: auto;
}

/* ===== TABLE SCROLL CONTAINER ===== */
.table-scroll-container{
  overflow-x: hidden;     /* mặc định không cuộn ngang khi LOCK */
  overflow-y: visible;    /* bỏ cuộn dọc nội bộ, để cuộn dọc ở results-container */
  flex: 0 0 auto;
  min-height: auto;
  max-height: none;       /* đảm bảo không bị giới hạn chiều cao */
  position: relative;
  background: var(--rt-surface);
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
}

/* Khi unlocked - allow horizontal scroll */
.table-scroll-container.unlocked{
  overflow-x: auto;
}

/* Custom scrollbar */
.table-scroll-container::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.table-scroll-container::-webkit-scrollbar-track{
  background: rgba(71, 85, 105, 0.10);
}

.table-scroll-container::-webkit-scrollbar-thumb{
  background: rgba(71, 85, 105, 0.40);
  border-radius: 999px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover{
  background: rgba(71, 85, 105, 0.60);
}

/* ===== TABLE STRUCTURE ===== */
.results-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: var(--rt-surface);
  min-width: 1100px;
}

/* ===== STICKY HEADER ===== */
.results-table thead{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rt-surface);
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.08);
}

.results-table thead::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rt-accent);
}

/* ===== TABLE HEADER CELLS ===== */
.results-table th{
  padding: 10px 8px;
  text-align: left;
  font-weight: 650; /* rõ nhưng không “bold” */
  font-size: 11px;
  color: rgba(17, 24, 39, 0.92);
  white-space: nowrap;
  position: relative;
  background: var(--rt-surface);
  border-right: 1px solid var(--rt-border);
  border-bottom: 1px solid var(--rt-border);
}

.results-table th:last-child{ border-right: none; }

.th-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ===== Sticky columns rules =====
   - LOCKED: không sticky
   - UNLOCKED: sticky trái (checkbox + id) và sticky phải (actions)
*/
.results-table th.col-checkbox,
.results-table th.col-id,
.results-table th.col-actions,
.results-table td.col-checkbox,
.results-table td.col-id,
.results-table td.col-actions{
  position: relative;
}

/* Fixed widths (để tránh nhảy) */
.table-scroll-container.unlocked .results-table th.col-checkbox,
.table-scroll-container.unlocked .results-table td.col-checkbox{
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

.table-scroll-container.unlocked .results-table th.col-id,
.table-scroll-container.unlocked .results-table td.col-id{
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  text-align: center;
}

/* Sticky LEFT */
.table-scroll-container.unlocked .results-table th.col-checkbox,
.table-scroll-container.unlocked .results-table td.col-checkbox{
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--rt-surface);
}

.table-scroll-container.unlocked .results-table th.col-id,
.table-scroll-container.unlocked .results-table td.col-id{
  position: sticky;
  left: 50px;
  z-index: 20;
  background: var(--rt-surface);
}

/* Sticky RIGHT (actions) */
.table-scroll-container.unlocked .results-table th.col-actions,
.table-scroll-container.unlocked .results-table td.col-actions{
  position: sticky;
  right: 0;
  z-index: 20;
  background: var(--rt-surface);
}

/* Selected row sticky columns */
.table-scroll-container.unlocked .results-table tbody tr.selected td.col-checkbox,
.table-scroll-container.unlocked .results-table tbody tr.selected td.col-id,
.table-scroll-container.unlocked .results-table tbody tr.selected td.col-actions{
  background: var(--rt-accent-soft);
}

/* Hover row sticky columns */
.table-scroll-container.unlocked .results-table tbody tr:hover td.col-checkbox,
.table-scroll-container.unlocked .results-table tbody tr:hover td.col-id,
.table-scroll-container.unlocked .results-table tbody tr:hover td.col-actions{
  background: rgba(15, 118, 110, 0.07);
}

/* Header sticky columns keep solid */
.table-scroll-container.unlocked .results-table thead th.col-checkbox,
.table-scroll-container.unlocked .results-table thead th.col-id,
.table-scroll-container.unlocked .results-table thead th.col-actions{
  background: var(--rt-surface);
}

/* ===== TABLE CELLS ===== */
.results-table td{
  padding: 10px 8px;
  font-size: 11px;
  color: rgba(17, 24, 39, 0.86);
  vertical-align: middle;
  border-bottom: 1px solid var(--rt-border);
}

.results-table tbody tr:last-child td{ border-bottom: none; }

/* ===== ROW STATES ===== */
.results-table tbody tr{
  cursor: pointer;
  transition: background 0.15s;
}

.results-table tbody tr:hover{
  background: rgba(15, 118, 110, 0.06);
}

.results-table tbody tr.selected{
  background: var(--rt-accent-soft);
}

/* Checkbox column */
.results-table td.col-checkbox{ text-align: center; }

.results-table input[type="checkbox"]{
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--rt-accent);
}

/* ===== Optimized column widths ===== */
.results-table .col-code{ width: 140px; min-width: 140px; }
.results-table .col-name{ width: 280px; min-width: 200px; }
.results-table .col-dimensions{ width: 140px; min-width: 130px; }
.results-table .col-location{ width: 120px; min-width: 110px; }
.results-table .col-type{ width: 90px; }
.results-table .col-date{ width: 110px; }
.results-table .col-status{ width: 130px; }
.results-table .col-actions{ width: 60px; text-align: center; }

/* ===== Highlighted columns ===== */
.results-table td.highlight-code{
  font-weight: 700; /* nổi bật nhưng không quá đậm */
  color: var(--rt-accent-hover);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.results-table td.highlight-dimensions{
  color: var(--rt-success);
  font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.results-table td.highlight-location{
  color: var(--rt-link);
  font-weight: 650;
}

/* Phân biệt nhanh Mold/Cutter theo màu chữ cột Mã (Code) */
.results-table tbody tr[data-type="mold"] td.highlight-code{
  color: var(--mold-color, #0891B2);
}

.results-table tbody tr[data-type="cutter"] td.highlight-code{
  color: var(--cutter-color, #EA580C);
  font-weight: 800;
}

/* ===== TYPE BADGE ===== */
.table-type-badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.10);
}

.table-type-badge.mold{ background: var(--mold-color, #0891B2); }
.table-type-badge.cutter{ background: var(--cutter-color, #EA580C); }

/* ===== STATUS BADGE ===== */
.table-status-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.08);
}

.table-status-badge.in{
  background: rgba(22, 163, 74, 0.12);
  color: #14532d;
  border-color: rgba(22, 163, 74, 0.22);
}

.table-status-badge.out{
  background: rgba(239, 68, 68, 0.10);
  color: #7f1d1d;
  border-color: rgba(239, 68, 68, 0.22);
}

.table-status-badge.audit{
  background: rgba(2, 132, 199, 0.12);
  color: #075985;
  border-color: rgba(2, 132, 199, 0.22);
}

.table-status-badge.disposed{
  background: rgba(100, 116, 139, 0.12);
  color: #334155;
  border-color: rgba(100, 116, 139, 0.22);
}

.table-status-badge.returned{
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.24);
}

.table-status-badge.no-history,
.table-status-badge.unknown{
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.78);
  border-color: rgba(15, 23, 42, 0.10);
}

/* ===== ACTION BUTTON ===== */
.table-action-btn{
  padding: 6px 10px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  background: var(--rt-accent);
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.table-action-btn:hover{
  background: var(--rt-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(2,6,23,0.14);
}

.table-action-btn:active{ transform: translateY(0); }

/* ===== COLUMN FILTER BUTTON ===== */
.column-filter-btn{
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  padding: 4px 8px;
  cursor: pointer;
  color: rgba(17, 24, 39, 0.85);
  font-size: 11px;
  line-height: 1;
  transition: background 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.column-filter-btn:hover{
  background: rgba(15, 118, 110, 0.10);
  border-color: rgba(15, 118, 110, 0.35);
  transform: translateY(-1px);
  color: var(--rt-accent-hover);
}

.column-filter-btn.active{
  background: var(--rt-accent-soft);
  color: var(--rt-accent-hover);
  border-color: rgba(15, 118, 110, 0.35);
  font-weight: 700; /* tránh 900 */
}

/* ===== FILTER POPUP ===== */
.filter-popup{
  position: fixed;
  width: 280px;
  max-height: 450px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: var(--rt-shadow-md);
  border: 1px solid rgba(2,6,23,0.18);
  z-index: 12000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mix-blend-mode: normal;
  filter: none;
  animation: filterPopupFadeIn 0.18s ease;
}

@keyframes filterPopupFadeIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.filter-popup *{
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.filter-popup-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--rt-accent), var(--rt-accent-hover));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.filter-popup-title{
  font-weight: 650;
  font-size: 13px;
}

.filter-popup-close{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
}

.filter-popup-close:hover{
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.filter-popup-body{
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  background: #fff;
}

.filter-popup-body::-webkit-scrollbar{ width: 6px; }
.filter-popup-body::-webkit-scrollbar-track{ background: rgba(71,85,105,0.10); }
.filter-popup-body::-webkit-scrollbar-thumb{ background: rgba(71,85,105,0.40); border-radius: 999px; }

.filter-sort-section{
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-sort-btn{
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  font-size: 12px;
  color: rgba(17,24,39,0.86);
  text-align: left;
  font-weight: 600;
}

.filter-sort-btn:hover{
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.35);
  color: var(--rt-accent-hover);
  transform: translateY(-1px);
}

.filter-divider{
  height: 1px;
  background: var(--rt-border);
  margin: 12px 0;
}

.filter-values-section{ padding: 0 12px; }

.filter-search{ margin-bottom: 8px; }

.filter-search-input{
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  font-size: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: rgba(17,24,39,0.90);
}

.filter-search-input:focus{
  outline: none;
  border-color: rgba(15, 118, 110, 0.60);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.filter-select-all{
  padding: 8px 0;
  border-bottom: 1px solid var(--rt-border);
  margin-bottom: 8px;
}

.filter-select-all label{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 650;
  font-size: 12px;
  color: rgba(17,24,39,0.86);
}

.filter-select-all input[type="checkbox"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--rt-accent);
}

.filter-values-list{
  max-height: 200px;
  overflow-y: auto;
}

.filter-values-list::-webkit-scrollbar{ width: 6px; }
.filter-values-list::-webkit-scrollbar-thumb{ background: rgba(71,85,105,0.40); border-radius: 999px; }

.filter-value-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
  border-radius: 10px;
  margin-bottom: 2px;
}

.filter-value-item:hover{ background: rgba(15, 23, 42, 0.04); }

.filter-value-item input[type="checkbox"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--rt-accent);
}

.filter-value-item span{
  flex: 1;
  word-break: break-word;
  color: rgba(17,24,39,0.86);
}

.filter-popup-footer{
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--rt-border);
  background: #F8FAFC;
}

.filter-clear-btn,
.filter-apply-btn{
  flex: 1;
  padding: 8px 16px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
  font-size: 12px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.filter-clear-btn{
  background: #fff;
  color: rgba(17,24,39,0.86);
  border-color: var(--rt-border);
}

.filter-clear-btn:hover{ background: rgba(15, 23, 42, 0.04); }

.filter-apply-btn{
  background: var(--rt-accent);
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

.filter-apply-btn:hover{
  background: var(--rt-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(2,6,23,0.16);
}

/* ===== EMPTY STATE ===== */
.empty-state{
  text-align: center;
  padding: 60px 20px;
  color: var(--rt-muted);
}

.empty-state p{
  font-size: 14px;
  margin-top: 8px;
}

/* ===== Pagination (giữ selector như cũ để không lệch logic app.js) ===== */
.pagination button{
  padding: 8px 12px;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  background: var(--rt-surface);
  color: rgba(17,24,39,0.86);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.pagination button:hover:not(:disabled){
  background: var(--rt-accent);
  color: #fff;
  border-color: var(--rt-accent);
  transform: translateY(-1px);
}

.pagination button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pagination button.active{
  background: var(--rt-accent);
  color: #fff;
  border-color: var(--rt-accent);
}

.pagination-info{
  font-size: 12px;
  font-weight: 650;
  color: rgba(17,24,39,0.82);
  padding: 0 10px;
}

.page-input-group{
  display: flex;
  gap: 6px;
  align-items: center;
}

.page-input-group input{
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
  color: rgba(17,24,39,0.90);
}

.page-input-group input:focus{
  outline: none;
  border-color: rgba(15, 118, 110, 0.60);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.page-input-group .btn-go-page{
  padding: 6px 12px;
  background: var(--rt-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
  transition: background 0.15s, transform 0.15s;
}

.page-input-group .btn-go-page:hover{
  background: var(--rt-accent-hover);
  transform: translateY(-1px);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px){
  .results-table{ font-size: 11px; min-width: 0; width: 100%; }

  .results-table th,
  .results-table td{
    padding: 8px 6px;
    font-size: 11px;
  }

  .results-table th{ font-size: 10px; }
  .th-content{ gap: 4px; }

  .column-filter-btn{
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 999px;
  }

  /* Khi LOCK (tức là KHÔNG có .unlocked): ẩn vài cột để dễ đọc */
  .table-scroll-container:not(.unlocked) th.col-type,
  .table-scroll-container:not(.unlocked) td.col-type,
  .table-scroll-container:not(.unlocked) th.col-date,
  .table-scroll-container:not(.unlocked) td.col-date{
    display: none;
  }

  /* Checkbox sizes */
  .results-table th.col-checkbox,
  .results-table td.col-checkbox{ width: 40px; }

  .results-table input[type="checkbox"]{
    width: 14px;
    height: 14px;
  }

  /* Column widths */
  .results-table .col-id{ width: 45px; }
  .results-table .col-code{ min-width: 100px; }
  .results-table .col-name{ min-width: 150px; }
  .results-table .col-dimensions{ min-width: 100px; }
  .results-table .col-location{ min-width: 80px; }
  .results-table .col-type{ width: 70px; }

  /* Badges */
  .table-type-badge{ font-size: 9px; padding: 3px 7px; }
  .table-status-badge{ font-size: 9px; padding: 3px 7px; }

  /* Filter popup - smaller */
  .filter-popup{
    width: calc(100vw - 40px);
    max-width: 300px;
    max-height: calc(100vh - 100px);
  }

  /* Scroll container height */
  .table-scroll-container{
    max-height: none;
  }

  /* Pagination mobile: 1 dòng */
  .pagination{
    padding: 8px 6px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: hidden;
  }

  .pagination button{
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-width: 32px;
    flex-shrink: 0;
  }

  .pagination .pagination-info{
    font-size: 11px !important;
    padding: 0 6px !important;
    white-space: nowrap;
  }

  .page-input-group{ gap: 4px !important; }

  .page-input-group input{
    width: 45px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  .page-input-group .btn-go-page{
    padding: 6px 8px !important;
    font-size: 14px !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print{
  .results-table thead{
    background: var(--rt-accent) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .results-table th{
    color: #fff !important;
    background: var(--rt-accent) !important;
    border-right: 1px solid rgba(255,255,255,0.25) !important;
  }

  .results-table tbody tr{ page-break-inside: avoid; }

  /* Hide checkboxes and filter buttons in print */
  .results-table td.col-checkbox,
  .results-table th.col-checkbox,
  .column-filter-btn,
  .col-actions{
    display: none !important;
  }

  /* Hide filter popup */
  .filter-popup{ display: none !important; }

  /* Simplify borders */
  .results-table tbody tr{ border-bottom: 1px solid #ddd !important; }
}

/* ===== THM 
NH DNG CT NO. (STT) V CT ID (
 DI) ===== */
.results-table th.col-no, .results-table td.col-no {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
}
.table-scroll-container.unlocked .results-table th.col-no,
.table-scroll-container.unlocked .results-table td.col-no {
  position: sticky;
  left: 50px;
  z-index: 20;
  background: var(--rt-surface);
}
.table-scroll-container.unlocked .results-table tbody tr.selected td.col-no {
  background: var(--rt-accent-soft);
}
.table-scroll-container.unlocked .results-table tbody tr:hover td.col-no {
  background: rgba(15, 118, 110, 0.07);
}
.table-scroll-container.unlocked .results-table thead th.col-no {
  background: var(--rt-surface);
}

/* 
m bo id nm t)
nh (static) v 
  cui */
.table-scroll-container.unlocked .results-table th.col-id,
.table-scroll-container.unlocked .results-table td.col-id {
  position: static !important;
  background: transparent !important;
  width: 60px;
}

@media (max-width: 768px){
  /* n ct ID trn mobile 
 tit kim din tch */
  .results-table th.col-id, .results-table td.col-id { display: none !important; }
  .table-scroll-container.unlocked .results-table th.col-id,
  .table-scroll-container.unlocked .results-table td.col-id { display: none !important; }
  
  .results-table .col-no { width: 35px; min-width: 35px; }
  .table-scroll-container.unlocked .results-table th.col-no,
  .table-scroll-container.unlocked .results-table td.col-no {
    left: 40px; /* Checkbox trn mobile l 40px */
  }
}