/* Tro choi tu choi o nha — Do min, Keo tha */

/* ══════════════ DO MIN ══════════════
   Mau so theo do min co dien, lay tu bien --fg-* nen che do toi tu sang len. */
.tn-domin {
  --tn-dm-1: var(--fg-blue-600); --tn-dm-2: var(--fg-green-600); --tn-dm-3: var(--fg-red-600); --tn-dm-4: var(--fg-indigo-600);
  --tn-dm-5: var(--fg-orange-600); --tn-dm-6: var(--fg-teal-600); --tn-dm-7: var(--fg-gray-900); --tn-dm-8: var(--fg-gray-600);
}
.tn-domin .tn-san { align-items: center; justify-content: center; }
.tn-dm-dem { font-size: .95rem; font-weight: 800; color: var(--fg-gray-900); background: var(--color-gray-100); border-radius: 999px; padding: 2px 12px; font-variant-numeric: tabular-nums; }
.tn-dm-goi { font-size: .95rem; font-weight: 700; color: var(--fg-gray-700); }
.tn-dm-goi:empty { display: none; }
.tn-dm-khung { position: relative; width: min(100%, 420px); }
.tn-dm-luoi {
  display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; padding: 8px;
  border-radius: 18px; background: var(--color-gray-200);
}
.tn-dm-o {
  aspect-ratio: 1 / 1; min-width: 44px; min-height: 44px; padding: 0; border: none; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-weight: 900; font-size: clamp(1.2rem, 5.5vw, 1.75rem); line-height: 1;
  background: linear-gradient(160deg, #86d9a3 0%, #3f9d6c 100%); color: #fff; box-shadow: 0 4px 0 #2a6e4b;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: transform .08s ease, box-shadow .08s ease;
}
.tn-dm-o:active:not(.is-mo):not(.is-no) { transform: translateY(3px); box-shadow: 0 1px 0 #2a6e4b; }
.tn-dm-o:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; position: relative; z-index: 1; }
.tn-dm-o.is-chon { box-shadow: 0 0 0 3px var(--tn-vang), 0 4px 0 #2a6e4b; }
.tn-dm-o.is-co { background: linear-gradient(160deg, #ffd27a 0%, #e0960c 100%); box-shadow: 0 4px 0 #a86a07; }
.tn-dm-o.is-mo, .tn-dm-o.is-no, .tn-dm-o.is-lo, .tn-dm-o.is-cosai { cursor: default; }
.tn-dm-o.is-mo {
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-gray-300); color: var(--fg-gray-900);
  animation: tnDmMo .28s ease both;
}
.tn-dm-o.n1 { color: var(--tn-dm-1); } .tn-dm-o.n2 { color: var(--tn-dm-2); } .tn-dm-o.n3 { color: var(--tn-dm-3); } .tn-dm-o.n4 { color: var(--tn-dm-4); }
.tn-dm-o.n5 { color: var(--tn-dm-5); } .tn-dm-o.n6 { color: var(--tn-dm-6); } .tn-dm-o.n7 { color: var(--tn-dm-7); } .tn-dm-o.n8 { color: var(--tn-dm-8); }
.tn-dm-o.is-no { background: #e5484d; box-shadow: inset 0 0 0 2px #a8262b; animation: tnDmNo .45s ease both; }
.tn-dm-o.is-lo { background: var(--color-red-50); box-shadow: inset 0 0 0 2px var(--fg-red-600); }
.tn-dm-o.is-cosai { background: var(--color-gray-100); color: var(--fg-red-600); box-shadow: inset 0 0 0 1px var(--color-gray-300); }
@keyframes tnDmMo { from { transform: scale(.55); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes tnDmNo { 0% { transform: scale(.6); } 50% { transform: scale(1.25); } 100% { transform: none; } }
.tn-dm-meo { margin: 0; text-align: center; font-size: .82rem; font-weight: 600; color: var(--fg-text-muted); }

/* Lop phu cau hoi tren bai min */
.tn-dm-phu {
  position: absolute; inset: -6px; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 22px; background: rgba(20, 16, 14, .45);
}
.tn-dm-hop {
  width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px;
  background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-md); padding: 12px;
  animation: tnDmHop .2s ease both;
}
.tn-dm-hop-tit { text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--fg-text-muted); }
.tn-dm-hop-de { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.tn-dm-hop .tn-hoi-zh { font-size: clamp(1.7rem, 7vw, 2.3rem); }
.tn-dm-huy { align-self: center; padding: 8px 16px; font-size: .9rem; min-height: 44px; }
.tn-dm-huy:disabled { opacity: .5; cursor: default; }
@keyframes tnDmHop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.tn-dm-nutco { min-height: 44px; }
.tn-dm-nutco.is-bat { background: var(--tn-vang); color: #4a2c08; box-shadow: 0 4px 0 var(--tn-vang-dam); }
.tn-dm-nutco:disabled { opacity: .5; cursor: default; }

/* ══════════════ KEO THA ══════════════ */
.tn-kt-so { font-size: .85rem; font-weight: 800; color: var(--fg-text-muted); background: var(--color-gray-100); border-radius: 999px; padding: 2px 10px; }
.tn-kt-goi { font-size: .95rem; font-weight: 700; color: var(--fg-gray-700); }
.tn-kt-ban { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tn-kt-chu {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: flex-start;
  min-height: 84px; padding: 10px; border-radius: 18px; background: var(--color-gray-100);
}
.tn-kt-chu.nhac { animation: tnLac .35s ease; }
.tn-kt-the {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 76px; min-height: 64px; padding: 8px 12px; border: none; border-radius: 14px; cursor: grab; font: inherit;
  background: var(--color-surface); color: var(--fg-gray-900);
  box-shadow: inset 0 0 0 2px var(--color-gray-200), 0 4px 0 var(--color-gray-300);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s ease, background .15s ease;
}
.tn-kt-zh { font-family: var(--font-hanzi); font-size: clamp(1.4rem, 5.5vw, 1.9rem); font-weight: 700; line-height: 1.1; }
.tn-kt-py { font-size: .8rem; font-weight: 600; color: var(--fg-pinyin); }
.tn-kt-the:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
.tn-kt-the.is-chon { background: var(--color-gold-50); box-shadow: inset 0 0 0 3px var(--tn-vang), 0 4px 0 var(--tn-vang-dam); }
.tn-kt-the.is-keo {
  z-index: 30; cursor: grabbing; transition: none;
  box-shadow: inset 0 0 0 3px var(--tn-b), 0 16px 28px -8px rgba(0, 0, 0, .4);
}
.tn-kt-the.is-sai { box-shadow: inset 0 0 0 3px var(--fg-red-600), 0 4px 0 var(--color-red-800); }

.tn-kt-nghia { display: flex; flex-direction: column; gap: 8px; }
.tn-kt-o {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 14px;
  font: inherit; text-align: left; cursor: pointer; border-radius: 14px; border: 2px dashed var(--color-gray-300);
  background: var(--color-surface); color: var(--fg-gray-900); -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.tn-kt-o:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
.tn-kt-vn { font-weight: 700; font-size: clamp(.98rem, 2.8vw, 1.1rem); line-height: 1.3; word-break: break-word; }
.tn-kt-em { font-size: 1.15em; }
.tn-kt-dich { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-hanzi); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--fg-green-600); }
.tn-kt-dich:empty { display: none; }
.tn-kt-dich small { font-family: inherit; font-size: .62rem; font-weight: 600; color: var(--fg-pinyin); }
.tn-kt-nghia.dang-chon .tn-kt-o:not(.is-dung) { border-color: var(--tn-c); }
.tn-kt-o.is-tren { border-style: solid; border-color: var(--tn-b); background: rgba(47, 124, 246, .14); }
.tn-kt-o.is-dung {
  cursor: default; border-style: solid; border-color: var(--color-green-600); background: var(--color-green-50);
  animation: tnKtVao .35s ease;
}
.tn-kt-o.is-loi { border-style: solid; border-color: var(--fg-red-600); animation: tnLac .35s ease; }
@keyframes tnKtVao { 50% { transform: scale(1.03); } }

@media (min-width: 640px) {
  .tn-kt-ban { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .tn-kt-chu { align-self: stretch; align-content: center; }
}
@media (max-width: 400px) {
  .tn-kt-the { min-width: 68px; padding: 6px 10px; }
  .tn-dm-luoi { gap: 5px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-dm-o, .tn-dm-o.is-mo, .tn-dm-o.is-no, .tn-dm-hop, .tn-kt-chu.nhac, .tn-kt-o.is-dung, .tn-kt-o.is-loi { animation: none !important; transition: none !important; }
  .tn-kt-the { transition: none; }
}