/* ========== Mobile-first enhancements ========== */
:root { --radius: 14px; }

.modal-bg { background: rgba(0,0,0,0.55); }
.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

/* Small thumbnails in table */
.thumb-img {
  width: 256px;
  height: 256px;
  object-fit: cover;
  border-radius: 0.5rem;
  background: #fff;
}

/* Mobile cards */
.card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 12px;
}
.card-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px #e5e7eb inset;
}
.card-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9ca3af;
  background: #f3f4f6;
}

/* Sticky table header for desktop */
#dataTable thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Improve tap targets on mobile */
button, select, input {
  touch-action: manipulation;
}

/* Typography tweaks */
@media (max-width: 480px) {
  h1 { font-size: 1.25rem; }
}

/* Spacing utilities to keep layout airy on small screens */
@media (max-width: 768px) {
  .filters { gap: 10px; }
}

/* Giữ nội dung không bị tràn ngang trên mobile */
body, html {
  max-width: 100%;
  overflow-x: hidden;
}

.card-row {
  width: 100%;       /* card full width trong mobile */
  max-width: 100%;   /* không tràn quá màn hình */
  box-sizing: border-box;
}

.card-thumb {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}