/* Lớp riêng cho bộ sinh bài TƯ DUY HÌNH ẢNH (web/js/gen/visual.js) — tiền tố .vs- */

/* khối khai báo hoạ tiết dùng chung: không chiếm chỗ nhưng vẫn được vẽ (không dùng display:none) */
.vs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.vs-fig { display: block; max-width: 100%; height: auto; }

/* hàng hình: dãy khung, phép chồng, hình + gương */
.vs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  margin: 10px 0 6px;
}
.vs-row.vs-col { flex-direction: column; gap: 4px; }
.vs-ex {
  background: #f4f7ff;
  border: 1.5px dashed #9fb3e6;
  border-radius: 12px;
  padding: 6px 6px 2px;
  margin: 8px 0;
}
.vs-ex .vs-row { margin: 2px 0; }
.vs-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #3557a8;
  background: #fff;
  border: 1.5px solid #9fb3e6;
  border-radius: 8px;
  padding: 1px 7px;
}

.vs-cell { margin: 0; text-align: center; }
.vs-cell figcaption { font-size: 12px; color: #444; margin-top: 2px; line-height: 1.2; }
.vs-op { font-size: 26px; font-weight: 800; color: #333; padding: 0 2px; margin-bottom: 14px; }

.vs-q { font-weight: 700; margin: 6px 0 2px; text-align: center; }

/* ma trận 3×3 (hình chồng nét) */
.vs-matrix {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 0;
  margin: 10px auto 6px;
  width: max-content;
  border: 2.5px solid #333;
  border-radius: 6px;
  overflow: hidden;
  background: #fffaf0;
}
.vs-mc { padding: 5px; border-right: 1.5px solid #9a9a9a; border-bottom: 1.5px solid #9a9a9a; }
.vs-mc:nth-child(3n) { border-right: 0; }
.vs-mc:nth-last-child(-n + 3) { border-bottom: 0; }

/* phương án là hình: chữ cái và hình nằm cạnh nhau, căn giữa */
.choice .vs-fig { display: inline-block; vertical-align: middle; }
.choices .choice:has(.vs-fig) { padding: 6px 10px; }

.vs-mline { flex: 0 0 auto; }

@media (max-width: 420px) {
  .vs-row { gap: 6px 4px; }
  .vs-op { font-size: 22px; }
}

@media print {
  .vs-fig { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}