/* Chợ Khủng Long (vùng 9): quầy hàng, khay tiền, ví của bé, tờ tiền SVG, lời giải và bài học tiền Việt Nam.
   Mọi bộ chọn bắt đầu bằng ck-. Tờ tiền vẽ bằng SVG trong js/cau-tien.js. */

.ck-san { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; touch-action: none; -webkit-user-select: none; user-select: none; }
.ck-to-svg { display: block; width: 100%; height: auto; }

/* ---------- Quầy hàng ---------- */
.ck-quay { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 27%, 330px); grid-template-rows: minmax(0, 1fr) clamp(96px, 15.5vh, 132px); column-gap: 8px; }
.ck-ke { grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 3; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); padding: 4px 8px 10px; }
.ck-san[data-ban="nut"] .ck-ke { grid-row: 1 / 3; padding-bottom: 6px; }
.ck-san[data-ban="nut"] .ck-quay { grid-template-rows: minmax(0, 1fr) 40px; }
.ck-san[data-ban="nut"] .ck-ban { padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ck-ke.moi > * { animation: ckHien .45s both cubic-bezier(.2,1.3,.4,1); }
  .ck-ke.moi > *:nth-child(2) { animation-delay: .12s; }
  .ck-ke.moi > *:nth-child(3) { animation-delay: .24s; }
  @keyframes ckHien { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
}

.ck-nguoi { grid-area: 1 / 2 / 3 / 3; position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.ck-nguoi-hinh { display: block; height: 70%; width: auto; max-width: 96%; object-fit: contain; object-position: bottom; margin-bottom: clamp(48px, 8vh, 70px); transform: scaleX(-1); filter: drop-shadow(0 10px 10px rgba(0,0,0,.3)); }
.ck-bong { position: absolute; z-index: 4; top: 0; left: 0; right: 0; background: #fff; color: var(--ink); border-radius: 22px; padding: 10px 14px; font-size: clamp(17px, 1.85vw, 22px); font-weight: 800; line-height: 1.25; text-align: center; box-shadow: 0 5px 0 rgba(34,26,59,.14), 0 10px 22px rgba(0,0,0,.22); }
.ck-bong::after { content: ""; position: absolute; left: 50%; bottom: -15px; margin-left: -10px; border: 11px solid transparent; border-top: 16px solid #fff; border-bottom: 0; }
.ck-bong.sai { color: var(--do-dam); box-shadow: 0 0 0 4px #f6b9c8, 0 10px 22px rgba(0,0,0,.22); }
.ck-bong.dung { color: var(--xanh-dam); box-shadow: 0 0 0 4px var(--xanh), 0 10px 22px rgba(0,0,0,.22); }
@media (prefers-reduced-motion: no-preference) { .ck-bong.nay { animation: ckNay .4s cubic-bezier(.2,1.6,.4,1); } @keyframes ckNay { from { transform: scale(.85); opacity: .3; } to { transform: none; opacity: 1; } } }

.ck-ban { grid-area: 2 / 1 / 3 / 3; position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 14px 12px; border-radius: 20px;
  background: linear-gradient(180deg, #d99b5c 0, #c07f45 16%, #9d6035 17%, #8c5230 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 8px 0 rgba(60,30,10,.35), 0 12px 20px rgba(0,0,0,.25); }
.ck-khay { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 18px; border: 4px solid #fff;
  background: linear-gradient(#b6ece2, #86d3c6); box-shadow: inset 0 4px 10px rgba(0,60,50,.22); transition: box-shadow .2s, background .2s; }
.ck-ban.ck-nhan .ck-khay { background: linear-gradient(#e2fbf5, #b6ece2); box-shadow: 0 0 0 6px rgba(255,209,102,.9), inset 0 4px 10px rgba(0,60,50,.2); }
.ck-khay.dung { background: linear-gradient(#c9f8e4, #86e6bf); box-shadow: 0 0 0 6px rgba(6,214,160,.6), inset 0 4px 10px rgba(0,60,50,.15); }
.ck-khay.sai { background: linear-gradient(#ffe3ea, #ffc9d6); }
.ck-khay-goi { font-size: clamp(17px, 1.9vw, 22px); font-weight: 800; color: rgba(12,80,70,.75); text-align: center; }
.ck-khay-to { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 100%; }
.ck-to-khay { width: clamp(92px, 11.5vw, 136px); flex: none; }
.ck-to-khay + .ck-to-khay { margin-left: -14px; }
.ck-khay-to.dong .ck-to-khay + .ck-to-khay { margin-left: -44px; }
.ck-khay-to.rat-dong .ck-to-khay + .ck-to-khay { margin-left: -64px; }
.ck-to-khay:nth-child(odd) { transform: rotate(-3deg); }
.ck-to-khay:nth-child(even) { transform: rotate(2.5deg) translateY(4px); }
@media (prefers-reduced-motion: no-preference) { .ck-to-khay.vua-dat { animation: ckVao .35s cubic-bezier(.2,1.5,.4,1); } @keyframes ckVao { from { opacity: .2; transform: translateY(40px) scale(.8); } } }
.ck-tong { flex: none; align-self: center; background: #fff; color: var(--ink); border-radius: 99px; padding: 8px 20px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; white-space: nowrap; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.ck-khay.dung + .ck-tong { background: var(--xanh-nhat); color: var(--xanh-dam); box-shadow: 0 0 0 4px var(--xanh), 0 4px 0 rgba(0,0,0,.18); }
.ck-san[data-ban="nut"] .ck-khay { visibility: hidden; }

/* Món hàng có thẻ giá */
.ck-mon { position: relative; flex: none; width: clamp(160px, 22vw, 236px); aspect-ratio: 1 / 1; max-height: 96%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 30px;
  background: radial-gradient(circle at 50% 42%, #fff 0 50%, #ffeacb 100%); box-shadow: 0 6px 0 rgba(90,50,20,.22), 0 14px 26px rgba(0,0,0,.25); }
.ck-mon-hinh { font-size: clamp(64px, 9.5vw, 108px); line-height: 1.05; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
.ck-mon-ten { font-size: clamp(17px, 1.9vw, 23px); font-weight: 800; color: #6b4a22; line-height: 1.1; text-align: center; padding: 0 8px; }
.ck-the-gia { position: absolute; top: -14px; right: -38px; transform: rotate(8deg); display: flex; align-items: center; background: var(--cam); color: #fff; border: 3px solid #fff; border-radius: 10px 16px 16px 10px; padding: 5px 16px 5px 30px; font-size: clamp(21px, 2.6vw, 30px); font-weight: 800; white-space: nowrap; box-shadow: 0 4px 0 var(--cam-dam), 0 8px 14px rgba(0,0,0,.25); }
.ck-the-gia i { position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.ck-khach-dua { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ck-khach-dua b, .ck-doi-o b { font-size: clamp(18px, 2.2vw, 26px); font-weight: 800; color: #fff; background: rgba(34,26,59,.62); padding: 2px 16px; border-radius: 99px; white-space: nowrap; }
.ck-to-lon { width: clamp(170px, 24vw, 270px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.ck-to-vua { width: clamp(140px, 18vw, 210px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.ck-to-to { width: clamp(250px, 36vw, 400px); filter: drop-shadow(0 10px 12px rgba(0,0,0,.3)); transform: rotate(-3deg); }

/* Đổi tiền: tờ cần đổi = ? tờ */
.ck-doi { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 30px); width: 100%; }
.ck-doi-o { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ck-doi-nho { display: flex; align-items: center; }
.ck-doi-nho .ck-to-nho { width: clamp(84px, 10vw, 120px); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.ck-doi-nho .ck-to-nho + .ck-to-nho { margin-left: -34px; transform: translateY(14px) rotate(4deg); }
.ck-dau { font-size: clamp(48px, 6.5vw, 76px); font-weight: 800; line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--tim); paint-order: stroke; }

/* Tờ tiền người bán cầm (đọc tờ) */
.ck-cam-to { position: relative; }
.ck-hoi { position: absolute; right: -26px; top: -30px; width: 64px; height: 64px; border-radius: 50%; background: var(--tim); color: #fff; font-size: 42px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 5px 0 var(--tim-dam); }

/* Kệ hàng trang trí */
.ck-ke-go { display: flex; flex-direction: column; gap: 14px; }
.ck-ke-tang { display: flex; gap: clamp(14px, 3vw, 34px); justify-content: center; padding: 0 22px; border-bottom: 14px solid #b8783f; border-radius: 0 0 6px 6px; box-shadow: 0 10px 12px -6px rgba(0,0,0,.35); }
.ck-ke-tang span { font-size: clamp(40px, 5.5vw, 62px); line-height: 1.1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); }

/* Đống tiền lẫn lộn: chạm từng tờ để đánh dấu và đếm */
.ck-dong { position: relative; width: min(100%, 680px); height: 100%; min-height: 200px; }
.ck-dong-to { position: absolute; width: 23%; min-width: 96px; padding: 0; border: 0; background: none; border-radius: 12px; transform: translate(-50%, -50%) rotate(var(--xoay, 0deg)); filter: drop-shadow(0 6px 6px rgba(0,0,0,.28)); transition: transform .15s; }
.ck-dong-to:active { transform: translate(-50%, -50%) rotate(var(--xoay, 0deg)) scale(.96); }
.ck-dong-to svg { display: block; width: 100%; height: auto; pointer-events: none; border-radius: 12px; }
.ck-dong-to.danh-dau svg { box-shadow: 0 0 0 5px var(--vang), 0 0 0 9px rgba(106,75,196,.55); }
.ck-dem-so { position: absolute; left: -12px; top: -14px; width: 38px; height: 38px; border-radius: 50%; background: var(--tim); color: #fff; font-size: 22px; font-weight: 800; display: grid; place-items: center; border: 3px solid #fff; transform: rotate(calc(-1 * var(--xoay, 0deg))); }

/* Tờ tiền kéo được */
.ck-to { display: block; padding: 0; border: 0; background: none; border-radius: 12px; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ck-to svg, .ck-to-rong svg, .ck-chong svg { display: block; width: 100%; height: auto; pointer-events: none; }
.ck-to:focus-visible { outline: 4px solid var(--vang); outline-offset: 3px; }
.ck-to.dang-keo { opacity: .3; }
.ck-to-bay { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; filter: drop-shadow(0 14px 14px rgba(0,0,0,.38)); will-change: transform; }
.ck-to-bay svg { display: block; width: 100%; height: auto; }

/* ---------- Ví, hộp tiền lẻ, ngăn kéo ---------- */
.ck-duoi { min-height: 0; min-width: 0; }
.ck-vi { position: relative; display: flex; align-items: center; gap: 14px; padding: 30px 16px 14px; border-radius: 26px; background: linear-gradient(#8f5a36, #6c3f25); box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 8px 0 rgba(40,20,5,.35), 0 12px 22px rgba(0,0,0,.3); }
.ck-vi::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,228,196,.35); border-radius: 20px; pointer-events: none; }
.ck-vi.ck-nhan { box-shadow: 0 0 0 6px rgba(255,209,102,.9), 0 8px 0 rgba(40,20,5,.35); }
.ck-vi-nhan { position: absolute; left: 24px; top: 8px; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: #f6dcc0; }
.ck-ngan { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; gap: clamp(10px, 1.8vw, 22px); justify-content: center; align-items: flex-end; }
.ck-ngan-o { position: relative; flex: 0 1 clamp(112px, 15.5vw, 190px); min-width: 0; padding: 8px 8px 0 0; }
.ck-ngan-o > .ck-to, .ck-ngan-o > .ck-to-rong { position: relative; z-index: 2; width: 100%; }
.ck-ngan-o > .ck-to { filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); transition: transform .12s; }
.ck-ngan-o > .ck-to:active { transform: translateY(-4px) scale(1.04); }
.ck-chong { position: absolute; left: 0; right: 8px; bottom: 0; z-index: 1; opacity: .9; }
.ck-chong.c1 { transform: translate(5px, -5px); }
.ck-chong.c2 { transform: translate(10px, -10px); }
.ck-to-rong { display: block; opacity: .22; filter: grayscale(1); }
.ck-dem { position: absolute; z-index: 3; right: -6px; top: -10px; min-width: 46px; height: 36px; padding: 0 8px; border-radius: 99px; background: #fff; color: #7a4a2a; font-size: 20px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.ck-ngan-o.het .ck-dem { background: #eadfd4; color: #9b8a7a; }
.ck-ngan-o.ck-bo { opacity: .28; }
.ck-ngan-o.ck-bo::after { content: "✕"; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--do); font-size: 56px; font-weight: 800; }
.ck-ngan-o.goi > .ck-to { box-shadow: 0 0 0 5px var(--vang), 0 0 18px 6px rgba(255,209,102,.8); }
@media (prefers-reduced-motion: no-preference) { .ck-ngan-o.goi > .ck-to { animation: ckGoi 1.1s ease-in-out infinite; } @keyframes ckGoi { 50% { transform: translateY(-6px); } } }
.ck-nut-tra { flex: none; position: relative; z-index: 1; min-width: 170px; }
.ck-nut-tra:disabled { opacity: .5; }

/* ---------- Nút đáp án ---------- */
.ck-chon { display: flex; gap: clamp(12px, 2vw, 22px); justify-content: center; align-items: stretch; flex-wrap: wrap; padding: 4px 0 6px; }
.ck-nut-chon { flex: 0 1 230px; min-width: 150px; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 24px; border: 4px solid #e6e0f5; background: #fff; color: var(--ink); box-shadow: 0 7px 0 #cfc5ea, 0 10px 22px rgba(0,0,0,.28); transition: transform .12s, box-shadow .12s, opacity .3s; }
.ck-nut-chon b { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.ck-nut-chon.co-hinh b { font-size: clamp(18px, 2vw, 24px); }
.ck-chon-hinh { display: block; width: 100%; max-width: 200px; }
.ck-nut-chon:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #cfc5ea; }
.ck-nut-chon.dung { border-color: var(--xanh); background: var(--xanh-nhat); }
.ck-nut-chon.sai { border-color: var(--do); background: var(--do-nhat); }
.ck-nut-chon.gach { opacity: .45; }
.ck-nut-chon.gach b { text-decoration: line-through; text-decoration-color: var(--do); text-decoration-thickness: 4px; }

/* ---------- Đúng rồi ---------- */
.ck-dung { position: absolute; left: 36%; top: 40%; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 30px; border-radius: 28px; background: #fff; text-align: center; pointer-events: none; box-shadow: 0 0 0 8px rgba(6,214,160,.45), var(--bong); max-width: 92%; }
.ck-dung b { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.12; color: var(--xanh-dam); }
.ck-dung span { font-size: clamp(18px, 2vw, 24px); font-weight: 800; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .ck-dung:not(.hidden) { animation: ckDung .45s cubic-bezier(.2,1.5,.4,1); } @keyframes ckDung { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } } }

/* ---------- Lời giải (màn "Gần đúng rồi") và hình của đề ---------- */
.ck-giai { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 200px; }
.ck-giai-to { width: 220px; }
.ck-giai-pt { font-size: 24px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.25; }
.ck-hinh-de { display: block; width: 100%; height: auto; }

/* ---------- Bài học 30 giây ---------- */
.ck-bh-bon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); width: 100%; max-width: 860px; }
.ck-bh-cot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ck-bh-cot .ck-to-svg { filter: drop-shadow(0 5px 6px rgba(0,0,0,.2)); }
.ck-bh-cot b { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1; }
.ck-bh-cot small { font-size: clamp(14px, 1.6vw, 18px); font-weight: 800; color: var(--ink-2); }
.ck-bh-hang { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 28px); flex-wrap: wrap; }
.ck-bh-to { display: block; width: clamp(150px, 20vw, 220px); filter: drop-shadow(0 6px 8px rgba(0,0,0,.22)); }
.ck-bh-to.to { width: clamp(240px, 34vw, 380px); }
.ck-bh-to.nho { width: clamp(120px, 15vw, 170px); }
.ck-bh-nhan { display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; color: var(--cam-dam); line-height: 1.1; }
.ck-bh-nhan small { font-size: clamp(18px, 2.2vw, 24px); color: var(--ink-2); }
.ck-bh-dau { font-size: clamp(38px, 5vw, 56px); font-weight: 800; color: var(--tim); }
.ck-bh-mon { width: clamp(140px, 17vw, 190px); margin-right: 30px; }
.ck-bh-mon .ck-the-gia { font-size: clamp(18px, 2.2vw, 24px); right: -44px; }
.ck-bh-khach { display: flex; flex-direction: column; align-items: center; gap: 6px; width: clamp(170px, 22vw, 240px); }
.ck-bh-khach b { font-size: 20px; color: var(--ink-2); }
.ck-bh-dem { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ck-bh-moc { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--ink); background: #fff; border: 3px solid #ffd79a; border-radius: 16px; padding: 2px 12px; }
.ck-bh-buoc { display: flex; flex-direction: column; align-items: center; width: clamp(90px, 11vw, 120px); }
.ck-bh-buoc small { font-size: 18px; font-weight: 800; color: var(--xanh-dam); }

/* ---------- Màn hình dọc, cửa sổ hẹp, màn hình thấp ---------- */
@media (orientation: portrait), (max-width: 820px) {
  .ck-quay { grid-template-columns: minmax(0, 1fr) clamp(150px, 30%, 250px); grid-template-rows: minmax(0, 1fr) clamp(96px, 12vh, 132px); }
  .ck-ke { flex-wrap: wrap; align-content: center; }
  .ck-vi { flex-wrap: wrap; justify-content: center; }
  .ck-nut-tra { flex: 1 1 100%; max-width: 360px; }
  .ck-the-gia { right: -22px; }
  .ck-mon { width: clamp(150px, 26vw, 220px); }
}
@media (max-height: 640px) and (orientation: landscape) {
  .ck-quay { grid-template-rows: minmax(0, 1fr) 88px; }
  .ck-vi { padding-top: 24px; }
  .ck-ngan-o { flex-basis: clamp(96px, 12vw, 150px); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-ke.moi > *, .ck-bong.nay, .ck-to-khay.vua-dat, .ck-dung, .ck-ngan-o.goi > .ck-to { animation: none !important; }
}