/* ================================================================
   VƯỜN MÂY — khu chơi Toán trên mây (Toán Thầy Trung SN · Math360Skill)
   Học sinh lớp 3→12 chơi game trắc nghiệm Toán, thi lấy thưởng.
   Toàn bộ class trong file này dùng tiền tố .vm- và chỉ có hiệu lực
   bên trong .vm-wrap (ngoại lệ duy nhất: .vm-blocker là lớp phủ
   toàn màn hình khi phát hiện học sinh rời màn thi).
   Không @import, không url() ảnh ngoài — thuần CSS + gradient + SVG.
   ================================================================ */


/* ================================================================
   1. BIẾN MÀU RIÊNG KHU VƯỜN MÂY (khai báo cục bộ trong .vm-wrap)
   ================================================================ */
.vm-wrap{
  /* Bảng màu chủ đạo do đề bài quy định */
  --vm-sky:#38BDF8; --vm-sky2:#818CF8; --vm-mint:#34D399; --vm-sun:#FBBF24;
  --vm-rose:#FB7185; --vm-violet:#A78BFA; --vm-ink:#0F172A; --vm-soft:#F1F5F9;
  --vm-card:rgba(255,255,255,.82); --vm-glass:blur(14px);

  /* Biến phụ trợ suy ra từ bảng màu trên */
  --vm-muted:#64748B;
  --vm-border:rgba(255,255,255,.6);
  --vm-border-soft:rgba(255,255,255,.38);
  --vm-shadow:0 10px 30px rgba(56,189,248,.16), 0 2px 8px rgba(15,23,42,.06);
  --vm-shadow-lg:0 22px 48px rgba(129,140,248,.24), 0 6px 16px rgba(15,23,42,.10);
  --vm-shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);
  --vm-bg1:#E0F2FE; --vm-bg2:#EDE9FE; --vm-bg3:#FCE7F3;

  /* Thang nhịp thị giác dùng chung (bo góc / khoảng cách / cỡ chữ) —
     sửa 1 chỗ ở đây là đổi đồng loạt cả khu, không phải sửa từng nơi */
  --vm-r-sm:12px; --vm-r-md:16px; --vm-r-lg:20px; --vm-r-xl:22px; --vm-r-hero:24px; --vm-r-btn:14px;
  --vm-gap-xs:8px; --vm-gap-sm:10px; --vm-gap-md:14px; --vm-gap-lg:20px;
  --vm-pad-card:18px; --vm-pad-hero:26px 28px;

  /* Khung tổng thể của khu */
  position:relative; display:block; isolation:isolate; overflow:hidden;
  min-height:480px; border-radius:var(--vm-r-xl); padding:22px;
  color:var(--vm-ink); font-family:inherit; -webkit-font-smoothing:antialiased;
  background:linear-gradient(160deg, var(--vm-bg1) 0%, var(--vm-bg2) 55%, var(--vm-bg3) 100%);
}

/* Reset nhẹ chỉ trong phạm vi khu Vườn Mây */
.vm-wrap *{ box-sizing:border-box; overflow-wrap:break-word; }
.vm-wrap img, .vm-wrap svg{ max-width:100%; display:block; }
.vm-wrap button{ font-family:inherit; }
.vm-wrap :focus-visible{ outline:3px solid var(--vm-sky2); outline-offset:2px; border-radius:6px; }

/* ---------- Chế độ tối: đè lại toàn bộ biến màu ---------- */
html[data-theme="dark"] .vm-wrap{
  --vm-ink:#E2E8F0; --vm-muted:#94A3B8;
  --vm-card:rgba(30,41,59,.72); --vm-soft:#1E293B;
  --vm-border:rgba(255,255,255,.12); --vm-border-soft:rgba(255,255,255,.07);
  --vm-shadow:0 10px 30px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --vm-shadow-lg:0 24px 52px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.4);
  background:linear-gradient(160deg, #0B1220 0%, #101B30 55%, #16233B 100%);
}


/* ================================================================
   2. NỀN TRỜI — MÂY TRÔI + SAO LẤP LÁNH
   ================================================================ */
.vm-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* Mây vẽ hoàn toàn bằng border-radius + box-shadow, không dùng ảnh */
.vm-cloud{
  position:absolute; left:-30%; width:160px; height:54px;
  background:#FFFFFF; border-radius:60px; opacity:.75;
  box-shadow:
    -36px 12px 0 -6px #FFFFFF, 36px 10px 0 -8px #FFFFFF,
    -12px -16px 0 -12px #FFFFFF, 18px -18px 0 -16px #FFFFFF;
  animation:vm-drift linear infinite;
  will-change:transform;
}
html[data-theme="dark"] .vm-cloud{
  background:#2A3B57; opacity:.32;
  box-shadow:
    -36px 12px 0 -6px #2A3B57, 36px 10px 0 -8px #2A3B57,
    -12px -16px 0 -12px #2A3B57, 18px -18px 0 -16px #2A3B57;
}

/* 5 biến thể mây: khác kích thước, độ mờ, tốc độ, vị trí */
.vm-cloud.c1{ top:6%;  width:120px; height:40px; opacity:.7;  animation-duration:62s; animation-delay:-6s; }
.vm-cloud.c2{ top:20%; width:190px; height:62px; opacity:.55; animation-duration:80s; animation-delay:-22s; }
.vm-cloud.c3{ top:38%; width:100px; height:34px; opacity:.8;  animation-duration:48s; animation-delay:-4s; }
.vm-cloud.c4{ top:58%; width:150px; height:50px; opacity:.5;  animation-duration:90s; animation-delay:-40s; }
.vm-cloud.c5{ top:76%; width:96px;  height:32px; opacity:.65; animation-duration:70s; animation-delay:-14s; }

/* Sao lấp lánh: một lớp chấm nhỏ vẽ bằng nhiều radial-gradient, nhấp nháy */
.vm-stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.vm-stars::before{
  content:""; position:absolute; inset:0; opacity:.45;
  animation:vm-twinkle 3.6s ease-in-out infinite;
  background-image:
    radial-gradient(2px 2px at 8%  18%, #fff 45%, transparent 65%),
    radial-gradient(1.5px 1.5px at 22% 52%, #fff 45%, transparent 65%),
    radial-gradient(2px 2px at 38% 12%, #fff 45%, transparent 65%),
    radial-gradient(1.5px 1.5px at 54% 38%, #fff 45%, transparent 65%),
    radial-gradient(2px 2px at 68% 62%, #fff 45%, transparent 65%),
    radial-gradient(1.5px 1.5px at 80% 22%, #fff 45%, transparent 65%),
    radial-gradient(2px 2px at 90% 78%, #fff 45%, transparent 65%),
    radial-gradient(1.5px 1.5px at 12% 82%, #fff 45%, transparent 65%),
    radial-gradient(1.5px 1.5px at 46% 88%, #fff 45%, transparent 65%),
    radial-gradient(2px 2px at 96% 46%, #fff 45%, transparent 65%);
}
html[data-theme="dark"] .vm-stars::before{ opacity:.85; filter:brightness(1.3); }
/* Sao rời do JS sinh (vuonmay.js) — chấm tròn nhấp nháy riêng lẻ, chỉ animate opacity (không giật khi cuộn) */
.vm-stars span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; opacity:.4; will-change:opacity;
  animation:vm-twinkle 3s ease-in-out infinite;
}
html[data-theme="dark"] .vm-stars span{ opacity:.8; }

/* Lớp nội dung thật sự, nổi trên nền trời */
.vm-content{ position:relative; z-index:2; }


/* ================================================================
   3. SẢNH — BANNER ĐẦU KHU
   ================================================================ */
.vm-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  border:1px solid var(--vm-border); border-radius:var(--vm-r-hero); padding:var(--vm-pad-hero);
  margin-bottom:20px; box-shadow:var(--vm-shadow), var(--vm-shadow-inset);
  animation:vm-fadeup .5s ease both;
}
html[data-theme="dark"] .vm-hero{ background:linear-gradient(135deg, rgba(30,41,59,.6), rgba(30,41,59,.25)); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vm-hero{ background:#F1F5F9; }
  html[data-theme="dark"] .vm-hero{ background:#1E293B; }
}
.vm-hero::before{
  content:""; position:absolute; top:-70px; right:-70px; width:230px; height:230px;
  border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,.35), transparent 70%);
  pointer-events:none;
}
.vm-hero::after{
  content:""; position:absolute; bottom:-80px; left:-40px; width:180px; height:180px;
  border-radius:50%; background:radial-gradient(circle, rgba(251,113,133,.22), transparent 70%);
  pointer-events:none;
}

.vm-title{
  position:relative; margin:0 0 6px; font-size:clamp(1.5rem, 4vw, 2.25rem);
  font-weight:900; letter-spacing:-.02em; line-height:1.2;
  color:var(--vm-ink); /* fallback BẮT BUỘC: luôn đọc rõ kể cả khi trình duyệt không hỗ trợ gradient-text */
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .vm-title{
    background:linear-gradient(135deg, var(--vm-sky) 0%, var(--vm-violet) 55%, var(--vm-rose) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}
.vm-sub{ position:relative; margin:0; color:var(--vm-muted); font-size:.98rem; font-weight:600; }


/* ================================================================
   4. LƯỚI CÁC KHU CHƠI
   ================================================================ */
.vm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--vm-gap-md); margin-top:18px; }

.vm-zone{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  background:var(--vm-card);
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); padding:var(--vm-pad-card);
  box-shadow:var(--vm-shadow), var(--vm-shadow-inset);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  animation:vm-fadeup .4s ease both;
}
/* Máy cũ không hỗ trợ backdrop-filter → đổi sang nền đặc, tránh lộ nền trời phía sau */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vm-zone{ background:#F8FAFC; }
  html[data-theme="dark"] .vm-zone{ background:#1E293B; }
}
.vm-zone::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; border-radius:var(--vm-r-lg) var(--vm-r-lg) 0 0;
  background:linear-gradient(90deg, var(--vm-sky), var(--vm-sky2));
}
/* Viền gradient mảnh 1px quanh thẻ, sáng dần khi hover */
.vm-zone::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.12) 45%, rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:opacity .25s ease;
}
html[data-theme="dark"] .vm-zone::after{ background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.04) 45%, rgba(255,255,255,.2)); }
.vm-zone:hover{ transform:translateY(-4px); box-shadow:var(--vm-shadow-lg); border-color:color-mix(in srgb, var(--vm-sky2) 45%, var(--vm-border)); }
.vm-zone:hover::after{ opacity:1; }
.vm-zone:active{ transform:translateY(-1px) scale(.98); box-shadow:var(--vm-shadow); }

/* 6 biến thể màu của khu chơi — dải trang trí góc trên + màu icon */
.vm-zone.z1::before{ background:linear-gradient(90deg, var(--vm-sky), var(--vm-sky2)); }
.vm-zone.z2::before{ background:linear-gradient(90deg, var(--vm-mint), #10B981); }
.vm-zone.z3::before{ background:linear-gradient(90deg, var(--vm-sun), #F59E0B); }
.vm-zone.z4::before{ background:linear-gradient(90deg, var(--vm-rose), #F43F5E); }
.vm-zone.z5::before{ background:linear-gradient(90deg, var(--vm-violet), #8B5CF6); }
.vm-zone.z6::before{ background:linear-gradient(90deg, var(--vm-sky2), var(--vm-rose)); }
.vm-zone.z1 .vm-zone-ic{ color:var(--vm-sky2); background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sky) 24%, #fff), color-mix(in srgb, var(--vm-sky2) 24%, #fff)); }
.vm-zone.z2 .vm-zone-ic{ color:#0F9A6C; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-mint) 24%, #fff), color-mix(in srgb, #10B981 24%, #fff)); }
.vm-zone.z3 .vm-zone-ic{ color:#B45309; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sun) 24%, #fff), color-mix(in srgb, #F59E0B 24%, #fff)); }
.vm-zone.z4 .vm-zone-ic{ color:#BE123C; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-rose) 24%, #fff), color-mix(in srgb, #F43F5E 24%, #fff)); }
.vm-zone.z5 .vm-zone-ic{ color:#6D28D9; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-violet) 24%, #fff), color-mix(in srgb, #8B5CF6 24%, #fff)); }
.vm-zone.z6 .vm-zone-ic{ color:#9333EA; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sky2) 24%, #fff), color-mix(in srgb, var(--vm-rose) 24%, #fff)); }

.vm-zone-ic{
  display:flex; align-items:center; justify-content:center; width:54px; height:54px;
  margin-bottom:12px; border-radius:16px; font-size:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(56,189,248,.22);
}
.vm-zone h3{ margin:0 0 4px; font-size:1.05rem; font-weight:800; color:var(--vm-ink); }
.vm-zone p{ margin:0; font-size:.85rem; line-height:1.5; color:var(--vm-muted); }

.vm-zone.locked{ cursor:not-allowed; opacity:.55; filter:grayscale(.15); }
.vm-zone.locked:hover{ transform:none; box-shadow:var(--vm-shadow); }
.vm-lock{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55); backdrop-filter:blur(4px); color:#fff; font-size:14px;
}


/* ================================================================
   5. NHÂN VẬT & BONG BÓNG THOẠI
   ================================================================ */
.vm-char{ display:flex; align-items:flex-end; gap:12px; }

.vm-char-svg{ position:relative; width:110px; min-width:96px; max-width:130px; animation:vm-float 3s ease-in-out infinite; }
.vm-char-svg svg, .vm-char-svg .vm-char-svg-in{ width:100%; height:auto; filter:drop-shadow(0 8px 14px rgba(15,23,42,.16)); display:block; }
.vm-char-svg::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:58%; height:12px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(15,23,42,.28), transparent 72%);
  transform:translateX(-50%);
}
.vm-char-svg.talk{ animation:vm-float 3s ease-in-out infinite, vm-bob .5s ease-in-out infinite; }

.vm-bubble{
  position:relative; max-width:320px; padding:12px 16px; border-radius:18px;
  background:var(--vm-card);
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  border:1px solid var(--vm-border); box-shadow:var(--vm-shadow);
  font-weight:600; line-height:1.5;
  animation:vm-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.vm-bubble::before{
  content:""; position:absolute; left:-9px; bottom:16px; width:18px; height:18px; background:inherit;
  border-left:1px solid var(--vm-border); border-bottom:1px solid var(--vm-border);
  border-radius:0 0 0 4px; transform:rotate(45deg);
}
.vm-bubble.ok{ border-color:var(--vm-mint); }
.vm-bubble.ok::before{ border-color:var(--vm-mint); }
.vm-bubble.no{ border-color:var(--vm-rose); }
.vm-bubble.no::before{ border-color:var(--vm-rose); }
.vm-bubble.think{ font-style:italic; font-weight:500; color:var(--vm-muted); }


/* ================================================================
   6. THẺ CÂU HỎI — DÙNG CHUNG MỌI LOẠI
   ================================================================ */
.vm-qcard{
  background:var(--vm-card);
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); padding:var(--vm-pad-card); margin-bottom:16px;
  box-shadow:var(--vm-shadow), var(--vm-shadow-inset); animation:vm-fadeup .35s ease both;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vm-qcard{ background:#F8FAFC; }
  html[data-theme="dark"] .vm-qcard{ background:#1E293B; }
}
.vm-qhead{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }

.vm-chip{
  display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px;
  background:var(--vm-soft); color:var(--vm-ink); font-weight:800; font-size:.78rem; white-space:nowrap;
}
.vm-chip.warn{ background:color-mix(in srgb, var(--vm-sun) 24%, #fff); color:#92400E; }
.vm-chip.ok{ background:color-mix(in srgb, var(--vm-mint) 24%, #fff); color:#065F46; }
html[data-theme="dark"] .vm-chip.warn{ background:color-mix(in srgb, var(--vm-sun) 26%, var(--vm-soft)); color:#FDE68A; }
html[data-theme="dark"] .vm-chip.ok{ background:color-mix(in srgb, var(--vm-mint) 26%, var(--vm-soft)); color:#6EE7B7; }

.vm-q{ font-size:1.06rem; line-height:1.75; font-weight:600; color:var(--vm-ink); }

.vm-bar{ width:100%; height:12px; margin-top:12px; border-radius:999px; background:rgba(148,163,184,.25); overflow:hidden; }
.vm-bar-fill{ height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg, var(--vm-sky), var(--vm-violet)); transition:width .3s linear; }
.vm-bar-fill.hot{ background:linear-gradient(90deg, var(--vm-sun), var(--vm-rose)); animation:vm-pulse 1s ease-in-out infinite; will-change:opacity; }


/* ================================================================
   7. LOẠI 1 — TRẮC NGHIỆM A/B/C/D & CHỌN NHIỀU
   ================================================================ */
.vm-opts{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
@media (min-width:560px){ .vm-opts{ grid-template-columns:1fr 1fr; } }

.vm-opt{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px;
  border:2px solid transparent; border-radius:14px;
  background:var(--vm-card);
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  font:inherit; font-weight:600; color:var(--vm-ink); text-align:left; cursor:pointer;
  transition:all .18s ease;
}
.vm-opt:hover{ border-color:var(--vm-sky); transform:translateX(3px); }
.vm-opt .lab{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:30px; height:30px;
  border-radius:50%; font-weight:800; color:var(--vm-sky2);
  background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sky) 22%, #fff), color-mix(in srgb, var(--vm-sky2) 22%, #fff));
}
.vm-opt.on{ border-color:var(--vm-violet); background:color-mix(in srgb, var(--vm-violet) 12%, var(--vm-card)); }
.vm-opt.ok{ border-color:var(--vm-mint); background:color-mix(in srgb, var(--vm-mint) 16%, var(--vm-card)); animation:vm-pop .35s cubic-bezier(.34,1.56,.64,1); }
.vm-opt.no{ border-color:var(--vm-rose); background:color-mix(in srgb, var(--vm-rose) 16%, var(--vm-card)); animation:vm-shake .4s ease; }
.vm-opt.dim{ opacity:.5; }


/* ================================================================
   8. LOẠI 2 — ĐÚNG / SAI (4 MỆNH ĐỀ)
   ================================================================ */
.vm-ds{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.vm-ds-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:12px 14px; border-radius:14px; background:var(--vm-card); border:1px solid var(--vm-border);
}
.vm-ds-row > span{ flex:1; min-width:180px; font-weight:600; line-height:1.5; }

.vm-ds-btn{
  padding:6px 16px; border:2px solid var(--vm-border); border-radius:999px; background:transparent;
  color:var(--vm-ink); font-weight:800; cursor:pointer; transition:.18s ease;
}
.vm-ds-btn.on{ border-color:transparent; color:#fff; }
/* Nút đầu hàng = "Đúng" (gradient mint), nút sau = "Sai" (gradient rose) */
.vm-ds-row .vm-ds-btn:first-of-type.on{ background:linear-gradient(135deg, var(--vm-mint), #059669); }
.vm-ds-row .vm-ds-btn:last-of-type.on{ background:linear-gradient(135deg, var(--vm-rose), #E11D48); }
.vm-ds-btn.ok{ border-color:var(--vm-mint); box-shadow:0 0 0 3px color-mix(in srgb, var(--vm-mint) 25%, transparent); }
.vm-ds-btn.no{ border-color:var(--vm-rose); animation:vm-shake .4s ease; }


/* ================================================================
   9. LOẠI 3 — ĐIỀN / TRẢ LỜI NGẮN
   ================================================================ */
.vm-blank{
  width:140px; max-width:100%; padding:10px 14px; border:2px solid var(--vm-border); border-radius:12px;
  background:rgba(255,255,255,.7); color:var(--vm-ink); font-size:1.1rem; font-weight:800;
  text-align:center; transition:.18s ease;
}
html[data-theme="dark"] .vm-blank{ background:rgba(15,23,42,.5); }
.vm-blank:focus{ outline:none; border-color:var(--vm-sky); box-shadow:0 0 0 4px color-mix(in srgb, var(--vm-sky) 22%, transparent); }
.vm-blank.ok{ border-color:var(--vm-mint); }
.vm-blank.no{ border-color:var(--vm-rose); animation:vm-shake .4s ease; }

.vm-keys{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vm-key{
  width:42px; height:42px; border:1px solid var(--vm-border); border-radius:10px;
  background:var(--vm-card); color:var(--vm-ink); font-weight:800; cursor:pointer; transition:.15s ease;
}
.vm-key:hover{ background:color-mix(in srgb, var(--vm-sky) 16%, var(--vm-card)); transform:translateY(-2px); }
.vm-key:active{ transform:translateY(0) scale(.94); }


/* ================================================================
   10. LOẠI 4 — KÉO THẢ
   ================================================================ */
.vm-dragzone{
  display:flex; flex-wrap:wrap; gap:10px; min-height:62px; padding:12px; border-radius:14px;
  background:rgba(255,255,255,.35); border:1px solid var(--vm-border-soft);
}
html[data-theme="dark"] .vm-dragzone{ background:rgba(15,23,42,.32); }

.vm-token{
  padding:8px 14px; border:2px solid var(--vm-border); border-radius:12px;
  background:linear-gradient(135deg, #FFFFFF, var(--vm-soft));
  box-shadow:0 3px 8px rgba(15,23,42,.08); font-weight:700; color:var(--vm-ink);
  cursor:grab; user-select:none; transition:.18s ease;
}
html[data-theme="dark"] .vm-token{ background:linear-gradient(135deg, #334155, var(--vm-soft)); }
.vm-token:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(15,23,42,.14); }
.vm-token.dragging{ opacity:.45; cursor:grabbing; transform:scale(1.06) rotate(2deg); }

.vm-drop{
  display:flex; align-items:center; justify-content:center; min-height:54px; min-width:96px;
  padding:6px 10px; border:2px dashed var(--vm-border); border-radius:12px;
  background:rgba(255,255,255,.25); color:var(--vm-muted); font-weight:600; font-size:.85rem;
  text-align:center; transition:.18s ease;
}
html[data-theme="dark"] .vm-drop{ background:rgba(15,23,42,.28); }
.vm-drop.over{ border-style:solid; border-color:var(--vm-sky); background:color-mix(in srgb, var(--vm-sky) 16%, transparent); transform:scale(1.03); }
.vm-drop.filled{ border-style:solid; border-color:var(--vm-mint); }
.vm-drop.ok{ background:color-mix(in srgb, var(--vm-mint) 22%, transparent); }
.vm-drop.no{ background:color-mix(in srgb, var(--vm-rose) 22%, transparent); animation:vm-shake .4s ease; }

.vm-droprow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:10px 0; font-size:1.05rem; font-weight:700; }


/* ================================================================
   11. LOẠI 5 — NỐI CỘT
   ================================================================ */
.vm-match{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:14px; }
.vm-match-col{ display:flex; flex-direction:column; gap:10px; }

.vm-match-item{
  position:relative; padding:10px 12px; border:1px solid var(--vm-border); border-radius:12px;
  background:var(--vm-card);
  backdrop-filter:var(--vm-glass); -webkit-backdrop-filter:var(--vm-glass);
  font-weight:600; cursor:pointer; transition:.18s ease;
}
.vm-match-col:first-child .vm-match-item::after{
  content:""; position:absolute; right:-7px; top:50%; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--vm-border); background:var(--vm-card); transform:translateY(-50%);
}
.vm-match-col:last-child .vm-match-item::after{
  content:""; position:absolute; left:-7px; top:50%; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--vm-border); background:var(--vm-card); transform:translateY(-50%);
}
.vm-match-item.on{ border-color:var(--vm-violet); animation:vm-glow 1.2s ease-in-out infinite; }
.vm-match-item.on::after{ background:var(--vm-violet); border-color:var(--vm-violet); }
.vm-match-item.done{ border-color:var(--vm-mint); background:color-mix(in srgb, var(--vm-mint) 14%, var(--vm-card)); }
.vm-match-item.done::after{ background:var(--vm-mint); border-color:var(--vm-mint); }
.vm-match-item.no{ border-color:var(--vm-rose); animation:vm-shake .4s ease; }

.vm-match-svg{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.vm-match-line{ fill:none; stroke-width:3; stroke-linecap:round; }


/* ================================================================
   12. LOẠI 6 — SẮP XẾP THỨ TỰ
   ================================================================ */
.vm-order{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.vm-order-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--vm-border); border-radius:12px; background:var(--vm-card);
  font-weight:600; cursor:grab; transition:.18s ease;
}
.vm-order-item.dragging{ opacity:.5; transform:scale(1.03); }
.vm-order-item.over{ border-top:4px solid var(--vm-sky); }

.vm-grip{ position:relative; flex:0 0 auto; width:16px; height:2px; border-radius:2px; background:#94A3B8; }
.vm-grip::before, .vm-grip::after{ content:""; position:absolute; left:0; width:16px; height:2px; border-radius:2px; background:#94A3B8; }
.vm-grip::before{ top:-6px; }
.vm-grip::after{ top:6px; }

.vm-order-no{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:26px; height:26px;
  border-radius:50%; background:var(--vm-soft); color:var(--vm-ink); font-size:.8rem; font-weight:800;
}


/* ================================================================
   13. LOẠI 7 — CHỌN Ô ĐÚNG TRÊN LƯỚI / TRẮC NGHIỆM HÌNH
   ================================================================ */
.vm-cells{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin-top:14px; }
.vm-cell{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1;
  border:2px solid transparent; border-radius:12px; background:var(--vm-card);
  box-shadow:0 2px 8px rgba(15,23,42,.06); font-weight:700; cursor:pointer; transition:.18s ease;
}
.vm-cell:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(15,23,42,.12); }
.vm-cell.on{ border-color:var(--vm-violet); background:color-mix(in srgb, var(--vm-violet) 12%, var(--vm-card)); }
.vm-cell.ok{ border-color:var(--vm-mint); background:color-mix(in srgb, var(--vm-mint) 16%, var(--vm-card)); animation:vm-pop .35s cubic-bezier(.34,1.56,.64,1); }
.vm-cell.no{ border-color:var(--vm-rose); background:color-mix(in srgb, var(--vm-rose) 16%, var(--vm-card)); animation:vm-shake .4s ease; }


/* ================================================================
   14. KẾT QUẢ, PHẦN THƯỞNG, XẾP HẠNG
   ================================================================ */
.vm-result{ padding:20px; text-align:center; }
.vm-score{
  margin:6px 0; font-size:3rem; font-weight:900; line-height:1.1;
  color:var(--vm-violet); /* fallback đọc được nếu trình duyệt không hỗ trợ gradient-text */
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .vm-score{
    background:linear-gradient(135deg, var(--vm-sky), var(--vm-violet), var(--vm-rose));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}

.vm-stars-row{ display:flex; justify-content:center; gap:10px; margin:14px 0; }
.vm-star{ font-size:2.2rem; color:#CBD5E1; transition:.3s ease; }
.vm-star.on{
  color:var(--vm-sun); /* fallback */
  animation:vm-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .vm-star.on{
    background:linear-gradient(135deg, var(--vm-sun), #F59E0B);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}
.vm-star.on:nth-child(1){ animation-delay:0s; }
.vm-star.on:nth-child(2){ animation-delay:.15s; }
.vm-star.on:nth-child(3){ animation-delay:.3s; }

.vm-gift{
  position:relative; overflow:hidden; margin:16px 0; padding:18px;
  border:2px solid var(--vm-sun); border-radius:18px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sun) 26%, #fff), color-mix(in srgb, var(--vm-rose) 18%, #fff));
}
html[data-theme="dark"] .vm-gift{
  background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sun) 34%, var(--vm-soft)), color-mix(in srgb, var(--vm-rose) 22%, var(--vm-soft)));
}
.vm-gift::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent);
  animation:vm-sheen 2.5s infinite;
}
.vm-coin{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:40px;
  padding:0 14px; border-radius:999px;
  background:linear-gradient(135deg, #FDE68A, var(--vm-sun), #B45309);
  box-shadow:0 4px 10px rgba(251,191,36,.45), inset 0 1px 0 rgba(255,255,255,.6);
  color:#78350F; font-weight:900; white-space:nowrap;
}

.vm-ledger{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.vm-led-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:10px 14px; border:1px solid var(--vm-border); border-radius:12px; background:var(--vm-card);
}
.vm-led-row .st{ padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:800; }
.vm-led-row .st.cho{ background:color-mix(in srgb, var(--vm-sun) 26%, #fff); color:#92400E; }
.vm-led-row .st.duyet{ background:color-mix(in srgb, var(--vm-mint) 26%, #fff); color:#065F46; }
.vm-led-row .st.huy{ background:#E2E8F0; color:#475569; }
html[data-theme="dark"] .vm-led-row .st.cho{ background:color-mix(in srgb, var(--vm-sun) 28%, var(--vm-soft)); color:#FDE68A; }
html[data-theme="dark"] .vm-led-row .st.duyet{ background:color-mix(in srgb, var(--vm-mint) 28%, var(--vm-soft)); color:#6EE7B7; }
html[data-theme="dark"] .vm-led-row .st.huy{ background:#334155; color:#CBD5E1; }

.vm-rank{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.vm-rank-row{
  display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px;
  padding:10px 14px; border:1px solid var(--vm-border); border-radius:12px; background:var(--vm-card);
}
.vm-rank-row.r1{ border-color:var(--vm-sun); background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sun) 32%, #fff), color-mix(in srgb, var(--vm-sun) 8%, #fff)); }
.vm-rank-row.r2{ border-color:#CBD5E1; background:linear-gradient(135deg, #E2E8F0, #F8FAFC); }
.vm-rank-row.r3{ border-color:#F0B27A; background:linear-gradient(135deg, #FBE0C8, #FFF3E8); }
html[data-theme="dark"] .vm-rank-row.r1{ background:linear-gradient(135deg, color-mix(in srgb, var(--vm-sun) 40%, var(--vm-soft)), color-mix(in srgb, var(--vm-sun) 12%, var(--vm-soft))); }
html[data-theme="dark"] .vm-rank-row.r2{ background:linear-gradient(135deg, #334155, #1E293B); }
html[data-theme="dark"] .vm-rank-row.r3{ background:linear-gradient(135deg, #4A3521, #2A1F15); }


/* ================================================================
   15. BẢO MẬT / CẢNH BÁO
   ================================================================ */
.vm-warn{
  padding:14px 18px; border:2px solid var(--vm-rose); border-radius:16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--vm-rose) 22%, #fff), color-mix(in srgb, var(--vm-rose) 8%, #fff));
  color:#9F1239; font-weight:800; animation:vm-shake .4s ease;
}
html[data-theme="dark"] .vm-warn{
  background:linear-gradient(135deg, color-mix(in srgb, var(--vm-rose) 30%, var(--vm-soft)), color-mix(in srgb, var(--vm-rose) 12%, var(--vm-soft)));
  color:#FDA4AF;
}

.vm-shield{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--vm-mint) 20%, #fff); color:#065F46; font-weight:800; font-size:.8rem;
}
.vm-shield::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--vm-mint); animation:vm-twinkle 1.4s ease-in-out infinite; }
html[data-theme="dark"] .vm-shield{ background:color-mix(in srgb, var(--vm-mint) 24%, var(--vm-soft)); color:#6EE7B7; }

/* Lớp phủ toàn màn hình — ngoại lệ duy nhất không nằm trong .vm-wrap */
.vm-blocker{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.vm-blocker-box{
  width:100%; max-width:420px; padding:26px; border-radius:20px; background:#FFFFFF;
  box-shadow:0 30px 60px rgba(0,0,0,.4); text-align:center;
  animation:vm-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
html[data-theme="dark"] .vm-blocker-box{ background:#1E293B; color:#E2E8F0; }


/* ================================================================
   16. NÚT
   ================================================================ */
.vm-btn{
  padding:12px 20px; border:none; border-radius:var(--vm-r-btn); background:var(--vm-card); color:var(--vm-ink);
  font:inherit; font-weight:800; font-size:.95rem; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vm-btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.vm-btn:active{ transform:translateY(0) scale(.97); }
.vm-btn.primary{ background:linear-gradient(135deg, var(--vm-sky), var(--vm-violet)); color:#fff; box-shadow:0 8px 18px rgba(129,140,248,.35); }
.vm-btn.gold{ background:linear-gradient(135deg, var(--vm-sun), #F59E0B); color:#78350F; box-shadow:0 8px 18px rgba(251,191,36,.35); }
.vm-btn.mint{ background:linear-gradient(135deg, var(--vm-mint), #059669); color:#fff; box-shadow:0 8px 18px rgba(52,211,153,.35); }
.vm-btn.ghost{ background:transparent; border:2px solid var(--vm-border); color:var(--vm-ink); box-shadow:none; }
.vm-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.vm-btn:disabled:hover{ transform:none; }

.vm-btnrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--vm-gap-sm); margin-top:16px; }


/* ================================================================
   17. KEYFRAMES
   ================================================================ */
@keyframes vm-drift{ from{ transform:translateX(0); } to{ transform:translateX(160vw); } }
@keyframes vm-twinkle{ 0%, 100%{ opacity:.25; } 50%{ opacity:.9; } }
@keyframes vm-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes vm-bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes vm-pop{
  0%{ transform:scale(.7); opacity:0; }
  70%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes vm-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
@keyframes vm-glow{
  0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--vm-violet) 45%, transparent); }
  50%{ box-shadow:0 0 0 8px transparent; }
}
@keyframes vm-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.6; } }
@keyframes vm-sheen{ 0%{ left:-60%; } 100%{ left:130%; } }
@keyframes vm-fadeup{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes vm-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }


/* ================================================================
   18. RESPONSIVE — MÀN HÌNH NHỎ (≤560px)
   ================================================================ */
@media (max-width:560px){
  .vm-wrap{ padding:14px; border-radius:18px; }
  .vm-hero{ padding:20px; }
  .vm-title{ font-size:1.35rem; }
  .vm-grid{ grid-template-columns:1fr; }
  .vm-char-svg{ width:72px; min-width:72px; }
  .vm-bubble{ max-width:220px; }
  .vm-match{ gap:18px; }
  .vm-opts{ grid-template-columns:1fr; }
  .vm-btn{ width:100%; min-height:44px; }
  .vm-btnrow{ flex-direction:column; align-items:stretch; }
  .vm-score{ font-size:2.4rem; }
  /* Vùng chạm tối thiểu 44px cho điện thoại (dễ chạm, không bấm nhầm) */
  .vm-opt, .vm-cell, .vm-ds-btn, .vm-key, .vm-zone, button.vm-chip{ min-height:44px; }
  .vm-key{ width:44px; }
}

/* ---------- ĐIỆN THOẠI RẤT NHỎ (≤380px) ---------- */
@media (max-width:380px){
  .vm-wrap{ padding:10px; border-radius:14px; }
  .vm-hero{ padding:16px; }
  .vm-title{ font-size:1.15rem; }
  .vm-sub{ font-size:.88rem; }
  .vm-zone{ padding:14px; }
  .vm-zone-ic{ width:44px; height:44px; font-size:22px; }
  .vm-score{ font-size:2rem; }
  .vm-char-svg{ width:58px; min-width:58px; }
  .vm-bubble{ max-width:170px; padding:10px 12px; font-size:.9rem; }
  .vm-btn{ padding:10px 14px; font-size:.88rem; }
}


/* ================================================================
   19. TÔN TRỌNG NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  .vm-wrap *, .vm-blocker, .vm-blocker-box, .vm-blocker *{ animation:none !important; transition:none !important; }
}


/* ================================================================
   20. IN / GIẤY — ẩn nền động, tiết kiệm mực khi in biên bản/kết quả
   ================================================================ */
@media print{
  .vm-wrap{ background:#fff !important; box-shadow:none !important; overflow:visible !important; }
  .vm-sky, .vm-stars, .vm-cloud{ display:none !important; }
  .vm-hero::before, .vm-hero::after, .vm-gift::before, .vm-zone::after{ display:none !important; }
  .vm-hero, .vm-zone, .vm-qcard, .vm-bubble, .vm-opt, .vm-ds-row, .vm-token, .vm-drop,
  .vm-match-item, .vm-order-item, .vm-cell, .vm-led-row, .vm-rank-row, .vm-gift, .vm-warn{
    background:#fff !important; box-shadow:none !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; border-color:#999 !important; color:#111 !important;
  }
  .vm-title, .vm-score, .vm-star.on{
    background:none !important; -webkit-text-fill-color:currentColor !important; color:#111 !important;
  }
  .vm-btn, .vm-btnrow{ display:none !important; }
}

/* ===== BỔ SUNG — các lớp phụ dùng trong vm_engine.js / vuonmay.js ===== */
.vm-wrap .vm-ds-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vm-wrap .vm-ds-txt{flex:1 1 260px;line-height:1.7}
.vm-wrap .vm-ds-btns{display:flex;gap:8px;flex-shrink:0}
.vm-wrap .vm-nhaprow{display:flex;justify-content:center;margin:14px 0}
.vm-wrap .vm-sol{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.55);line-height:1.85;font-size:.97rem}
html[data-theme="dark"] .vm-wrap .vm-sol{background:rgba(30,41,59,.55)}
.vm-wrap .vm-order-tx{flex:1 1 auto;line-height:1.7}
.vm-wrap .vm-order-mv{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.vm-wrap .vm-order-mv button{border:none;background:rgba(255,255,255,.6);color:var(--vm-ink);border-radius:8px;width:30px;height:22px;cursor:pointer;font-size:.7rem;line-height:1}
.vm-wrap .vm-order-mv button:hover{background:var(--vm-sky);color:#fff}
html[data-theme="dark"] .vm-wrap .vm-order-mv button{background:rgba(255,255,255,.14);color:var(--vm-ink)}
.vm-wrap .vm-order-item.ok{border-color:var(--vm-mint)}
.vm-wrap .vm-order-item.no{border-color:var(--vm-rose)}
.vm-wrap button.vm-chip{cursor:pointer;border:1px solid transparent}
.vm-wrap button.vm-chip:hover{border-color:var(--vm-sky)}
.vm-wrap .vm-rank-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}
.vm-wrap .vm-led-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vm-wrap .vm-led-row .l{flex:1 1 240px}
.vm-wrap .vm-match-item.no{border-color:var(--vm-rose)}
.vm-wrap .vm-hero .vm-char{margin-top:12px}
.vm-wrap ol,.vm-wrap ul{margin:8px 0}