/* Chạm theo thứ tự (Sua.wireOrder) + kéo thả nối hai cột — chỉ web học (body.kid) */
:root { --ord-b: #118ab2; }

/* dòng trả lời */
.ordk { --ord-ok: var(--ok, #06a77d); --ord-bad: var(--bad, #ef476f); }
.ord-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.ord-line { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; min-width: 0; padding: 8px; border-radius: 14px; background: #f1faff; border: 2px dashed #9bd0ff; }
.ord-slot { min-width: 52px; min-height: 48px; padding: 4px 12px; border-radius: 10px; border: 2px dashed #b7dcf3; background: #fff; font: inherit; font-size: 22px; font-weight: 700; color: #0b4f6c; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ord-slot:disabled { cursor: default; opacity: 1; color: #0b4f6c; }
.ord-slot:not(.full) { cursor: default; }
.ord-slot.full { border-style: solid; border-color: var(--ord-b); background: #e3f6ff; }
.ord-slot.need { border-color: #ffb703; background: #fff7d6; }
.ord-slot.ok { border-color: var(--ord-ok); background: #e6fff6; }
.ord-slot.bad { border-color: var(--ord-bad); background: #ffeceb; }
.ord-slot.shown { border-color: #f4a261; background: #fff3e6; }
.ord-reset { flex: none; min-height: 44px; padding: 6px 14px; border-radius: 99px; border: 2px solid #ffd166; background: #fff8e1; font: inherit; font-weight: 800; font-size: 16px; color: #8a5a00; cursor: pointer; }
.ord-reset:disabled { opacity: .45; cursor: default; }

/* các tiếng / số để chạm */
.ordk.vt-sent .vt-tok input { display: none; }
.ordk.vt-sent { margin-top: 4px; }
.ordk .ord-tok { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; }
.ordk .ord-tok:active { transform: scale(.94); }
.ordk .vt-tok.ord-tok span { min-height: 40px; display: flex; align-items: center; }
.ordk .vt-tok.used { opacity: .28; pointer-events: none; }
.ordk .vt-tok.used span { border-style: dashed; }
/* dạng số: khối .q gốc ẩn đi, thay bằng nhóm nút */
.ordwrap.ordk > .q { display: none; }
.ordwrap.ordk .oblanks { display: none; }
.ord-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 6px; font-size: 20px; }
.ord-lab { font-weight: 600; }
button.ord-tok { min-width: 56px; min-height: 52px; padding: 4px 14px; border-radius: 12px; border: 2px solid #9bd0ff; background: #e3f6ff; font: inherit; font-size: 24px; font-weight: 800; color: #0b4f6c; box-shadow: 0 3px 0 #9bd0ff; }
button.ord-tok.used { opacity: .25; box-shadow: none; border-style: dashed; pointer-events: none; }
.ordwrap.ordk .ansline { margin-top: 6px; }

/* kéo thả để nối (core.js: pointer events) */
.tapmatch .mrow { touch-action: none; }
.tapmatch.dragging, .tapmatch.dragging * { cursor: grabbing; }
.tapmatch .mrow.dragsrc { border-color: var(--brand2, #118ab2); box-shadow: 0 0 0 3px #b9e6fb; }
.tapmatch .mrow.drop { border-color: #ffb703; box-shadow: 0 0 0 3px #ffe08a; background: #fffbe8; }
svg.mdragline { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; overflow: visible; }
svg.mdragline line { stroke: #118ab2; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 8; }
/* điện thoại (xếp dọc): trang phải cuộn được, chỉ nhãn tròn là chỗ kéo */
@media (max-width: 560px) {
  .tapmatch .mrow { touch-action: pan-y; }
  .tapmatch .mpick, .tapmatch .mlet { touch-action: none; }
  .tapmatch .mpick { min-width: 44px; height: 44px; }
  .tapmatch .mright .mlet { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 99px; background: #e3f6ff; }
}
@media (max-width: 480px) {
  .ord-slot { min-width: 44px; padding: 4px 8px; font-size: 19px; }
  .ordk .vt-tok span { font-size: 19px; padding: 4px 9px; }
}