/* Hang Khủng Long (js/hang.js), màn mở quà, và phép của món đồ khi bé làm đúng (js/phu-kien.js).
   iPad xoay ngang: cảnh hang bên trái (khủng long, bát quả mọng, bạn bè), bảng Tủ đồ, Bạn bè, Cúp bên phải.
   Màn dọc hay điện thoại: cảnh ở trên, bảng ở dưới. Mọi bộ chọn có tiền tố hk-, mq-, pk-. */

/* ---------- Nút Hang trên bản đồ ---------- */
.nut-hang { position: relative; }
.nut-hang svg { width: 22px; height: 22px; }
.nut-hang-moi { position: absolute; top: -8px; right: -10px; background: var(--do); color: #fff; border-radius: 999px; font-size: 13px; line-height: 1; padding: 4px 8px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.bd-ban { pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .nut-hang-moi:not(.hidden) { animation: hkNay 1.4s ease-in-out infinite; }
  @keyframes hkNay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
}

/* ---------- Cảnh hang ---------- */
.man-hang { background: #6b3f1d; }
.hk-nen { position: absolute; inset: 0; background: #d9925a center / cover no-repeat; }
.hk-nen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 35% 55%, rgba(0,0,0,0) 45%, rgba(60,25,5,.35) 100%); }
.hk-ten { position: absolute; z-index: 3; top: calc(18px + var(--an-toan-tren)); left: calc(92px + var(--an-toan-trai)); background: rgba(255,255,255,.94); border-radius: 999px; padding: 4px 22px; font-size: 26px; font-weight: 800; color: var(--ink); box-shadow: var(--bong); }
.hk-canh { position: absolute; left: 0; top: 0; bottom: 0; right: 38%; }
.hk-kl { position: absolute; z-index: 2; left: 50%; bottom: 14%; height: 70%; aspect-ratio: 3 / 4; transform: translateX(-50%); border: 0; background: none; padding: 0; display: flex; align-items: flex-end; justify-content: center; }
.hk-kl img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 10px rgba(60,25,5,.35)); }
.hk-bat { position: absolute; z-index: 2; left: 6%; bottom: 10%; width: 15%; aspect-ratio: 2 / 1.3; border: 0; background: none; padding: 0; }
.hk-chen { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(#fff, #efe6ff); border-radius: 12% 12% 50% 50% / 10% 10% 90% 90%; box-shadow: inset 0 -6px 0 #d9ccf5, 0 6px 10px rgba(60,25,5,.3); }
.hk-bat img { position: absolute; width: 42%; bottom: 40%; }
.hk-bat img:nth-of-type(1) { left: 4%; }
.hk-bat img:nth-of-type(2) { left: 29%; bottom: 55%; }
.hk-bat img:nth-of-type(3) { left: 54%; }
.hk-noi { position: absolute; z-index: 3; left: calc(18px + var(--an-toan-trai)); top: calc(92px + var(--an-toan-tren)); max-width: min(360px, 44%); background: #fff; border-radius: 22px; padding: 12px 18px; font-size: 20px; font-weight: 700; line-height: 1.3; box-shadow: var(--bong); }
.hk-noi:empty { display: none; }
.hk-ban { position: absolute; inset: 0; pointer-events: none; }
.hk-ban-mot { position: absolute; z-index: 1; border: 0; background: none; padding: 0; pointer-events: auto; display: flex; align-items: flex-end; }
.hk-ban-mot img { height: 100%; width: auto; filter: drop-shadow(0 8px 6px rgba(60,25,5,.3)); }
.hk-ban-mot.vi-0 { right: 2%; bottom: 20%; height: 25%; }
.hk-ban-mot.vi-1 { right: 18%; bottom: 33%; height: 18%; }
.hk-ban-mot.vi-2 { left: 4%; bottom: 36%; height: 16%; }
.hk-dang-mac { position: absolute; z-index: 3; left: 50%; bottom: calc(12px + var(--an-toan-duoi)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; border: 0; background: rgba(255,255,255,.95); border-radius: 999px; padding: 6px 20px 6px 8px; min-height: 56px; box-shadow: var(--bong); text-align: left; white-space: nowrap; }
.hk-dang-mac img { width: 44px; height: 44px; object-fit: contain; }
.hk-dang-mac span { display: grid; line-height: 1.1; }
.hk-dang-mac small { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.hk-dang-mac b { font-size: 19px; }
.hk-dang-mac.trong { padding-left: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .hk-kl.nhun, .hk-ban-mot.nhun { animation: hkNhun .6s ease; }
  @keyframes hkNhun { 30% { transform: translateX(-50%) translateY(-7%) scale(1.03); } 60% { transform: translateX(-50%) scale(.98); } }
  .hk-ban-mot.nhun { animation-name: hkNhunBan; }
  @keyframes hkNhunBan { 30% { transform: translateY(-10%); } 60% { transform: none; } }
  .hk-noi.nhun { animation: hkNoi .35s ease; }
  @keyframes hkNoi { from { transform: scale(.85); opacity: .4; } }
  .hk-kl img.lac { transform-origin: 50% 90%; animation: lac 2.6s ease-in-out infinite; }
}

/* ---------- Bảng Tủ đồ, Bạn bè, Cúp ---------- */
.hk-bang { position: absolute; z-index: 4; right: calc(16px + var(--an-toan-phai)); top: calc(16px + var(--an-toan-tren)); bottom: calc(16px + var(--an-toan-duoi)); width: calc(38% - 24px); background: #fff; border-radius: 28px; box-shadow: var(--bong); display: flex; flex-direction: column; overflow: hidden; }
.hk-tab-hang { display: flex; gap: 4px; padding: 10px 10px 0; background: var(--tim-nhat); }
.hk-tab { position: relative; flex: 1; border: 0; background: transparent; border-radius: 18px 18px 0 0; padding: 10px 6px 8px; font-size: 19px; font-weight: 800; color: var(--ink-2); min-height: 50px; }
.hk-tab.chon { background: #fff; color: var(--tim); }
.hk-cham-moi { position: absolute; top: 8px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--do); }
.hk-bang-than { flex: 1; overflow-y: auto; padding: 12px 14px 16px; -webkit-overflow-scrolling: touch; }
.hk-phu { font-size: 16px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.hk-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hk-o { position: relative; aspect-ratio: 1; border-radius: 20px; border: 3px solid #ece6fa; background: #fbf9ff; padding: 6px 4px 24px; display: flex; align-items: center; justify-content: center; }
.hk-o img { max-width: 82%; max-height: 100%; object-fit: contain; }
.hk-o span { position: absolute; left: 3px; right: 3px; bottom: 4px; font-size: 13px; font-weight: 800; line-height: 1.1; color: var(--ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-o.khoa img { filter: brightness(0); opacity: .16; }
.hk-o.khoa span { color: #b3abcc; }
.hk-o.dang { border-color: var(--vang); background: var(--vang-nhat); }
.hk-o:active { transform: scale(.96); }
.hk-moi { position: absolute; top: -8px; right: -6px; background: var(--do); color: #fff; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; padding: 2px 8px; }
.hk-dau { position: absolute; top: 4px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--xanh); color: #fff; font-style: normal; font-weight: 800; font-size: 15px; line-height: 24px; text-align: center; }
.hk-cup { background: color-mix(in srgb, var(--mau, #c7a24a) 10%, #fff); border-color: color-mix(in srgb, var(--mau, #c7a24a) 30%, #fff); }
.hk-cup.khoa { background: #f6f4fb; border-color: #ece6fa; }
.hk-sao { position: absolute; top: 3px; right: 6px; font-style: normal; font-size: 13px; color: #f4a300; letter-spacing: -1px; }

/* ---------- Thẻ món đồ ---------- */
.hk-lop { position: absolute; inset: 0; z-index: 10; background: rgba(26,11,61,.55); display: grid; place-items: center; padding: 16px; }
.hk-the { width: min(640px, 100%); display: grid; grid-template-columns: 38% 1fr; gap: 20px; align-items: center; }
.hk-the-hinh { aspect-ratio: 1; border-radius: 26px; background: radial-gradient(circle, #fff7d9, #ffe09a); display: grid; place-items: center; }
.hk-the-hinh img { width: 80%; height: 80%; object-fit: contain; }
.hk-the-hinh.khoa { background: #efeaf8; }
.hk-the-hinh.khoa img { filter: brightness(0); opacity: .18; }
.hk-the h2 { font-size: 30px; line-height: 1.1; margin-bottom: 8px; }
.hk-dong { display: flex; gap: 10px; align-items: baseline; font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.hk-dong b { flex: none; min-width: 5.6em; color: var(--tim); font-size: 16px; }
.hk-the .nut-hang { grid-column: 1 / -1; }
.hk-the .nut { font-size: 20px; min-height: 52px; padding: 10px 22px; }

/* ---------- Màn mở quà ---------- */
.man-qua { display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #8a6ae6, #3b2787 72%); color: #fff; text-align: center; }
.mq-khung { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(680px, 100%); }
.mq-tieu-de { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.05; color: #fff; -webkit-text-stroke: 7px #4a3494; paint-order: stroke; text-shadow: 0 5px 0 #4a3494; }
.mq-hop { position: relative; border: 0; background: none; padding: 0; width: min(300px, 40vh); aspect-ratio: 1; }
.mq-hop img, .mq-vat img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,0,0,.3)); }
.mq-goi { font-size: 22px; font-weight: 700; }
.mq-vat { position: relative; width: min(280px, 38vh); aspect-ratio: 1; display: grid; place-items: center; }
.mq-vat img { width: 86%; height: 86%; }
.mq-kl { width: min(320px, 42vh); }
.mq-kl img { width: 100%; height: 100%; }
.mq-tia { position: absolute; inset: -18%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,230,140,.32) 0 10deg, rgba(255,230,140,0) 10deg 22deg); }
.mq-chu { font-size: 21px; font-weight: 700; line-height: 1.35; max-width: 34em; }
.mq-phep { background: rgba(255,255,255,.14); border-radius: 18px; padding: 10px 16px; }
.mq-phep b { color: #ffd166; }
.man-qua .nut-trang { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .mq-hop img { animation: mqLac 1.5s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes mqLac { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } 85% { transform: rotate(-4deg); } }
  .mq-tia { animation: xoay 14s linear infinite; }
  .mq-vat img { animation: mqHien .8s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes mqHien { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Phép của món đồ khi bé làm đúng ---------- */
.pk-phep { position: fixed; z-index: 60; left: calc(18px + var(--an-toan-trai)); bottom: calc(110px + var(--an-toan-duoi)); width: 96px; height: 96px; pointer-events: none; }
.pk-phep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.pk-phep-hat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pk-phep-hat i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--m); opacity: 0; box-shadow: 0 0 6px var(--m); }
.pk-phep.chay img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both; }
.pk-phep.chay .pk-phep-hat i { animation: pkHat .9s ease-out both; animation-delay: calc(.12s + var(--t)); }
@keyframes pkBat { 0% { transform: translateY(60px) scale(.3); opacity: 0; } 18% { transform: translateY(0) scale(1.15); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-20px) scale(.9); opacity: 0; } }
@keyframes pkHat { 0% { transform: rotate(var(--g)) translateX(10px) scale(1); opacity: 1; } 100% { transform: rotate(var(--g)) translateX(78px) scale(.3); opacity: 0; } }
/* Mỗi phép một kiểu chuyển động riêng cho món đồ */
.pk-phep.chay.hu-bay img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkBay .35s ease-in-out .2s 3 alternate; }
@keyframes pkBay { from { transform: skewX(-10deg) rotate(-6deg); } to { transform: skewX(10deg) rotate(6deg); } }
.pk-phep.chay.hu-lua img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkLua .12s linear .2s 8 alternate; }
@keyframes pkLua { from { transform: scaleY(1) ; filter: drop-shadow(0 0 6px #ff6b35) brightness(1); } to { transform: scaleY(1.12) translateY(-4%); filter: drop-shadow(0 0 16px #ffd166) brightness(1.2); } }
.pk-phep.chay.hu-lap-lanh img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkLap .25s ease-in-out .25s 4 alternate; }
@keyframes pkLap { from { filter: drop-shadow(0 0 4px #fff3b0) brightness(1); } to { filter: drop-shadow(0 0 18px #ffd166) brightness(1.35); } }
.pk-phep.chay.hu-chay img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkChay .5s ease-in .5s both; }
@keyframes pkChay { to { transform: translateX(220px) rotate(8deg); opacity: 0; } }
.pk-phep.chay.hu-loe img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkLoe .3s ease-out .25s 3; }
@keyframes pkLoe { 50% { filter: drop-shadow(0 0 22px #ffffff) brightness(1.5); transform: scale(1.12); } }
.pk-phep.chay.hu-reo img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkReo .08s linear .2s 10 alternate; }
@keyframes pkReo { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.pk-phep.chay.hu-sang img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkSang .4s ease-in-out .2s 3 alternate; }
@keyframes pkSang { to { filter: drop-shadow(0 0 22px #ffc2e2) brightness(1.3); transform: scale(1.08); } }
.pk-phep.chay.hu-giat img { animation: pkBat 1.4s cubic-bezier(.2,1.4,.4,1) both, pkGiat .14s ease-in-out .25s 6 alternate; }
@keyframes pkGiat { from { transform: rotate(0) translateY(0); } to { transform: rotate(-10deg) translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .pk-phep.chay img { animation: pkMo 1.4s linear both !important; }
  @keyframes pkMo { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------- Màn dọc, điện thoại ---------- */
@media (orientation: portrait), (max-width: 760px) {
  /* Nền chỉ phủ phần cảnh phía trên để tấm thảm nằm ngay dưới chân khủng long, không bị bảng che */
  .hk-nen { bottom: 43%; background-position: 38% 100%; }
  .hk-canh { right: 0; bottom: 46%; }
  .hk-kl { height: 66%; bottom: 14%; }
  .hk-noi { top: calc(80px + var(--an-toan-tren)); max-width: 60%; font-size: 17px; padding: 10px 14px; }
  .hk-ten { font-size: 21px; left: 50%; transform: translateX(-50%); }
  .hk-bang { left: calc(12px + var(--an-toan-trai)); right: calc(12px + var(--an-toan-phai)); width: auto; top: 55%; bottom: calc(12px + var(--an-toan-duoi)); }
  .hk-luoi { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hk-dang-mac { bottom: 8px; min-height: 48px; }
  .hk-the { grid-template-columns: 1fr; gap: 12px; }
  .hk-the-hinh { width: 44%; justify-self: center; }
  .hk-the h2 { font-size: 24px; text-align: center; }
  .hk-dong { font-size: 16px; }
  .pk-phep { width: 72px; height: 72px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .hk-ten { font-size: 20px; top: 12px; }
  .hk-noi { top: 70px; font-size: 16px; }
  .hk-o span { font-size: 11px; }
  .hk-tab { font-size: 16px; min-height: 42px; }
  .mq-chu { font-size: 17px; }
}

/* ---------- Chương Hang Khủng Long trong trang Cách chơi ---------- */
.hd-hang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.hd-hang-o { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border-radius: 16px; padding: 8px 4px 6px; box-shadow: 0 2px 6px rgba(34,26,59,.1); }
.hd-hang-o img { width: 64%; aspect-ratio: 1; object-fit: contain; }
.hd-hang-o small { font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--ink-2); }
.hd-hang-o.khoa img { filter: brightness(0); opacity: .16; }
.hd-hang-o.khoa small { color: #b3abcc; }

/* Text occupies content-sized rows, never the dinosaur's drawing surface. */
.man-hang { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-rows: auto minmax(350px, 1fr); gap: 14px; padding: calc(16px + var(--an-toan-tren)) 16px 16px; overflow-y: auto; }
.hk-header { grid-column: 1; grid-row: 1; padding-left: 76px; position: relative; z-index: 3; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.hk-ten { position: static; transform: none; font-size: 26px; max-width: 100%; line-height: 1.2; }
.hk-noi { position: static; max-width: 100%; font-size: 20px; overflow-wrap: anywhere; }
.hk-canh { position: relative; inset: auto; grid-row: 2; grid-column: 1; min-height: 350px; }
.hk-kl { height: 82%; bottom: 14%; max-width: 80%; }
.hk-bang { position: relative; inset: auto; grid-column: 2; grid-row: 1 / 3; width: 100%; }
@media (orientation: portrait), (max-width: 760px) {
  .man-hang { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 330px minmax(300px, auto); }
  .hk-header { padding-left: 66px; }
  .hk-ten { font-size: 21px; padding: 6px 14px; }
  .hk-noi { font-size: 17px; padding: 10px 14px; }
  .hk-canh { grid-row: 2; min-height: 0; }
  .hk-kl { height: 88%; bottom: 12%; }
  .hk-bang { grid-column: 1; grid-row: 3; }
  .hk-nen { bottom: 0; }
}

/* Đồ trang trí hang (đổi bằng quả mọng, F-18) */
.hk-trang-tri { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hk-tt-dat { position: absolute; font-size: clamp(34px, 6vw, 64px); line-height: 1; filter: drop-shadow(0 6px 4px rgba(60,25,5,.3)); }
.hk-tt .hk-tt-bieu { font-size: 44px; line-height: 1; font-weight: 400; }
.hk-tt.chua-du { opacity: .55; }
.hk-tt.doi-duoc { border-color: #ffd79a; background: #fff8ea; }
.hk-qua { width: 22px; height: 22px; vertical-align: -5px; }
@media (prefers-reduced-motion: no-preference) { .hk-tt-dat { animation: hkNhun .6s ease; } }