/* Ô chạm để chọn (thay droplist trên web học). <select> thật vẫn nằm trong DOM nhưng ẩn. */
body.kid select.blank.ts-src { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; pointer-events: none !important; overflow: hidden; }
body.kid .tapsel {
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: 56px; min-height: 52px; max-width: 100%; padding: 4px 14px; margin: 0 3px;
  font: 800 26px/1.15 'Baloo 2', 'Nunito', system-ui, sans-serif; color: var(--ink);
  background: #fff; border: 3px solid var(--brand2); border-bottom-width: 5px; border-radius: 16px;
  box-shadow: 0 3px 0 rgba(17, 138, 178, .18); cursor: pointer; text-align: center; overflow-wrap: anywhere; word-break: normal;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .1s, box-shadow .15s, border-color .15s, background .15s;
}
body.kid .tapsel.ts-two { min-width: 64px; }
body.kid .tapsel.long { font-size: 22px; padding: 4px 12px; }
body.kid .tapsel .ts-val { display: block; max-width: 11em; }
body.kid .tapsel.empty { color: var(--brand2); background: var(--soft); border-style: dashed; border-bottom-style: dashed; }
/* dấu hiệu "chạm được": mũi tên nhỏ ở góc (nhiều lựa chọn) hoặc vòng xoay (2 lựa chọn) */
body.kid .tapsel .ts-cue { position: absolute; right: 4px; bottom: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--brand2); opacity: .7; }
body.kid .tapsel.ts-two .ts-cue { width: auto; height: auto; border: 0; right: 5px; bottom: 1px; opacity: .65; font: 700 12px/1 'Nunito', sans-serif; color: var(--brand2); font-style: normal; }
body.kid .tapsel.ts-two .ts-cue::before { content: '⇄'; }
body.kid .tapsel.empty.ts-two .ts-cue { animation: tsnudge 1.6s ease-in-out infinite; }
@keyframes tsnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
body.kid .tapsel:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 3px; }
body.kid .tapsel:focus-visible, body.kid .ts-opt:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 194, 61, .65); }
body.kid .tapsel.open { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(255, 194, 61, .55); }
body.kid .tapsel.pop { animation: tspop .22s ease-out; }
@keyframes tspop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
body.kid .tapsel.ok { border-color: var(--mint); background: #e6f8f1; box-shadow: 0 0 0 3px rgba(31, 180, 136, .25); }
body.kid .tapsel.bad { border-color: var(--bad, #e63946); background: #fdecee; box-shadow: 0 0 0 3px rgba(230, 57, 70, .2); }
body.kid .tapsel.shown { border-color: #f4a261; background: #fff4e6; }
body.kid .tapsel.need { border-color: var(--brand); background: #fff0f4; animation: tsneed .4s; }
@keyframes tsneed { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
body.kid .tapsel:disabled { cursor: default; opacity: 1; }
body.kid .tapsel:disabled .ts-cue { display: none; }
@media (pointer: coarse) and (min-width: 700px) { body.kid .tapsel { font-size: 28px; min-height: 58px; min-width: 70px; } body.kid .tapsel.long { font-size: 24px; } }
@media (max-width: 699px) { body.kid .tapsel { font-size: 24px; min-height: 52px; } body.kid .tapsel.long { font-size: 20px; } }

/* bảng chọn nổi */
.tapsel-pop {
  position: fixed; z-index: 9999; display: grid; gap: 8px; padding: 10px; max-width: calc(100vw - 16px);
  background: #fff; border: 3px solid var(--brand2, #1683c9); border-radius: 20px; box-shadow: 0 14px 34px -8px rgba(60, 40, 20, .45);
  animation: tspopin .14s ease-out;
}
@keyframes tspopin { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.tapsel-pop .ts-opt {
  min-width: 52px; min-height: 56px; padding: 6px 12px; font: 800 26px/1.15 'Baloo 2', 'Nunito', system-ui, sans-serif; color: var(--ink, #2d2a4a);
  background: var(--soft, #fff1d6); border: 3px solid transparent; border-bottom: 5px solid #f0d9a8; border-radius: 14px; cursor: pointer;
  overflow-wrap: anywhere; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tapsel-pop .ts-opt:active { transform: translateY(2px); border-bottom-width: 3px; }
.tapsel-pop .ts-opt.on { background: #dff1fb; border-color: var(--brand2, #1683c9); }
@media (max-width: 699px) { .tapsel-pop .ts-opt { font-size: 22px; } }