main.rong { max-width: 1200px; }
.thanh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 8px 12px; }
.thanh button { margin: 0; padding: 7px 12px; }
.thanh button:disabled { opacity: .45; cursor: default; }
.thanh input[type=number] { width: 4.5em; padding: 6px; text-align: center; }
.thanh .ngan { width: 1px; height: 24px; background: var(--vien); margin: 0 4px; }
.so { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.khung { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; height: 70vh; min-height: 420px; }
#cotNho { overflow-y: auto; background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 8px; }
#cotNho .nho { display: block; width: 100%; margin-bottom: 10px; padding: 4px; border: 2px solid transparent;
  border-radius: 6px; background: none; cursor: pointer; text-align: center; font-size: 12px; color: var(--chu); }
#cotNho .nho canvas { width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0/.25); }
#cotNho .nho.dang { border-color: var(--nhan); }
#vung { overflow: auto; background: #e3e7ee; border: 1px solid var(--vien); border-radius: 10px; padding: 16px; text-align: center; position: relative; }
#vung.keo { outline: 3px dashed var(--nhan); outline-offset: -8px; }
#trang { background: #fff; box-shadow: 0 2px 14px rgb(0 0 0/.25); max-width: none; }
.tha { margin: 12vh auto 0; max-width: 34ch; color: #44505f; }
@media (max-width: 640px) {
  .khung { grid-template-columns: 1fr; height: auto; }
  #cotNho { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; }
  #cotNho .nho { width: 84px; flex: none; margin: 0; }
  #vung { height: 65vh; }
}