/* Learning Adventure - giao diện cho iPad (dọc và ngang). Dùng font hệ thống để chạy offline. */
:root {
  --kem: #fff4e1;
  --cam: #ffb74d;
  --cam-dam: #f57c00;
  --xanh: #4caf50;
  --xanh-nhat: #e8f5e9;
  --vang: #f9a825;
  --chu: #3e2723;
  --chu-nhat: #6d4c41;
  --trang: #ffffff;
  --may-1: #e3f2fd;
  --may-2: #bbdefb;
  --tim: #5e35b1;
  --nha-1: #2b2340;
  --nha-2: #3d3160;
  --bo: 18px;
  --bong: 0 4px 0 rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--chu);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--kem); }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: 0.5; cursor: default; }
#app { min-height: 100vh; min-height: 100dvh; }
img { -webkit-user-drag: none; }

.man {
  min-height: 100vh; min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 14px;
}
.tg-may { background: linear-gradient(180deg, #bfe3ff 0%, #e8f4ff 55%, #fff4e1 100%); }
.tg-nha { background: linear-gradient(180deg, #ede7f6 0%, #fff8ee 70%); }
h1, h2, h3 { margin: 0; }
h2 { font-size: 28px; }
p { margin: 0; line-height: 1.45; }

/* ---------- nút ---------- */
.nut {
  border: 0; border-radius: var(--bo); padding: 14px 22px; min-height: 56px;
  font-size: 20px; font-weight: 700; box-shadow: var(--bong);
  transition: transform 0.08s;
}
.nut:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.nut-chinh { background: var(--cam); color: #3e1f00; }
.nut-phu { background: var(--trang); color: var(--chu); border: 2px solid #f0dcc0; }
.nut-to { font-size: 26px; padding: 18px 36px; min-height: 72px; }
.nut-cao { background: #fff; border: 3px solid var(--cam); display: inline-flex; align-items: center; gap: 10px; }
.icon-nut { width: 44px; height: 44px; object-fit: contain; }
.nut-nho { border: 0; background: rgba(255, 255, 255, 0.85); border-radius: 14px; min-width: 48px; min-height: 48px; font-size: 18px; font-weight: 700; padding: 6px 12px; box-shadow: var(--bong); }
.nut-loa { border: 0; background: #fff3cd; border-radius: 50%; width: 44px; height: 44px; font-size: 20px; flex: none; box-shadow: var(--bong); margin-left: 8px; vertical-align: middle; }
.nut-goi-y { background: #fff8e1; border: 3px solid #ffe082; width: 100%; }
.nut-goi-y.sang { animation: nhapNhay 1.2s ease-in-out infinite; border-color: var(--vang); }
.nut-nghe, .nut-nghe-cham { background: #e1f5fe; border: 2px solid #81d4fa; }
.nut-mic { background: #fce4ec; border: 3px solid #f48fb1; font-size: 22px; min-width: 120px; }
.nut-mic.dang-ghi { background: #f48fb1; animation: nhapNhay 1s infinite; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.hang-nut.doc { flex-direction: column; align-items: stretch; }
@keyframes nhapNhay { 50% { transform: scale(1.04); } }

.chip { background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 17px; white-space: nowrap; box-shadow: var(--bong); }

/* ---------- chọn hồ sơ ---------- */
.man-ho-so { align-items: center; justify-content: center; background: linear-gradient(180deg, #ffe9c7, #fff4e1); }
.tieu-de-app { font-size: 40px; color: var(--cam-dam); letter-spacing: 0.5px; }
.loi-chao { font-size: 22px; }
.hang-the { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; width: 100%; }
.the-ho-so { flex: 1 1 340px; max-width: 440px; border-radius: 28px; padding: 18px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 10px; }
.the-ho-so.tg-may { background: linear-gradient(180deg, #cfeaff, #f5fbff); }
.the-ho-so.tg-nha { background: linear-gradient(180deg, #e1d7f5, #fff8ee); }
.the-ho-so-nut { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; }
.the-hinh { height: 230px; max-width: 100%; object-fit: contain; }
.the-chu { text-align: center; }
.the-the-gioi { font-size: 18px; font-weight: 700; color: var(--chu-nhat); }
.the-ten { font-size: 32px; font-weight: 800; }
.the-phu { font-size: 16px; color: var(--chu-nhat); }
.nut-sua-ten { align-self: center; border: 0; background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 10px 18px; font-size: 17px; min-height: 48px; }
.nut-phu-huynh { border: 0; background: transparent; color: var(--chu-nhat); font-size: 17px; min-height: 48px; text-decoration: underline; }

/* ---------- đặt tên ---------- */
.man-dat-ten { align-items: center; justify-content: center; }
.hop-dat-ten { background: #fff; border-radius: 28px; padding: 24px; width: min(520px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: stretch; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08); }
.hop-dat-ten h2 { text-align: center; }
.nv-vua { height: 140px; object-fit: contain; align-self: center; }
.o-nhap { display: flex; flex-direction: column; gap: 6px; font-size: 17px; font-weight: 600; }
.o-nhap input { font: inherit; font-size: 22px; padding: 12px 14px; border-radius: 14px; border: 2px solid #f0dcc0; min-height: 52px; background: #fffdf8; }

/* ---------- thanh trên ---------- */
.thanh-tren { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ten-the-gioi { font-size: 30px; text-align: center; color: var(--chu); }

/* ---------- bản đồ Lâu Đài Mây ---------- */
.ban-do { position: relative; flex: 1; min-height: 420px; border-radius: 28px; overflow: hidden; }
.ban-do-may { background: linear-gradient(180deg, #a7d8ff, #e9f6ff); }
.may { position: absolute; background: #fff; border-radius: 999px; opacity: 0.95; }
.may1 { width: 46%; height: 70px; left: 4%; bottom: 8%; }
.may2 { width: 40%; height: 64px; right: 6%; bottom: 14%; }
.may3 { width: 30%; height: 50px; left: 34%; top: 10%; opacity: 0.7; }
.lau-dai { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: 34%; height: 46%; filter: grayscale(calc(1 - var(--mau))) saturate(calc(0.4 + var(--mau))); }
.than-lau { position: absolute; left: 10%; right: 10%; bottom: 0; height: 52%; background: #f8bbd0; border-radius: 10px 10px 0 0; }
.thap { position: absolute; bottom: 30%; width: 22%; background: #ce93d8; border-radius: 8px 8px 0 0; }
.thap::before { content: ""; position: absolute; left: -15%; right: -15%; top: -34px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 36px solid #7e57c2; height: 0; margin: 0 auto; width: 0; left: 50%; transform: translateX(-50%); border-left-width: 24px; border-right-width: 24px; }
.thap-trai { left: 4%; height: 54%; }
.thap-giua { left: 39%; height: 72%; background: #90caf9; }
.thap-phai { right: 4%; height: 54%; }
.ghi-mau { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.tram { position: absolute; background: #fff; border-radius: 22px; padding: 12px 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1); min-width: 180px; text-align: center; }
.tram-ten { font-weight: 800; font-size: 19px; }
.tram-mon { font-size: 16px; color: var(--cam-dam); font-weight: 700; }
.tram-so { font-size: 14px; color: var(--chu-nhat); }
.tram-tat { opacity: 0.55; }
.tram-1 { left: 4%; bottom: 20%; }
.tram-2 { left: 50%; bottom: 4%; transform: translateX(-50%); }
.tram-3 { right: 4%; bottom: 26%; }
.ban-do-may .nv-ban-do { position: absolute; left: 3%; top: 4%; height: 40%; object-fit: contain; }

/* ---------- bản đồ Ngôi Nhà Bí Ẩn (nhà cắt lớp 6 phòng) ---------- */
.ban-do-nha { background: linear-gradient(180deg, #d1c4e9, #f3e5f5); display: flex; flex-direction: column; align-items: center; padding: 18px; }
.mai-nha { width: 0; height: 0; border-left: min(40vw, 380px) solid transparent; border-right: min(40vw, 380px) solid transparent; border-bottom: 70px solid #6d4c41; }
.nha { width: min(80vw, 760px); background: #8d6e63; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-radius: 0 0 12px 12px; }
.nha .tram, .phong { position: static; transform: none; min-width: 0; background: #fff8e1; border-radius: 12px; padding: 14px 10px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: center; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.08); }
.phong-khoa { background: #4e3b6b; color: #e0d7f0; }
.phong-khoa .tram-so { color: #cbbbe8; }
.phong-mo { background: #e1f5fe; }
.ban-do-nha .nv-ban-do { position: absolute; right: 2%; bottom: 2%; height: 30%; object-fit: contain; }
.hang-nut-ban-do { margin-top: 4px; }

/* ---------- màn câu hỏi ---------- */
.man-cau-hoi { gap: 12px; }
.thanh-muc-tieu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.85); border-radius: 20px; padding: 8px 12px; box-shadow: var(--bong); }
.muc-tieu-chu { font-weight: 800; font-size: 19px; flex: 1; min-width: 200px; }
.hang-hoa { display: flex; gap: 4px; }
.hoa { font-size: 24px; opacity: 0.25; filter: grayscale(1); }
.hoa-sang { opacity: 1; filter: none; color: #ec407a; }
.than-cau { display: grid; grid-template-columns: 1fr 260px; gap: 16px; flex: 1; align-items: start; }
.the-cau { background: #fff; border-radius: 26px; padding: 22px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nhan-dang { font-size: 15px; font-weight: 700; color: var(--cam-dam); text-transform: uppercase; letter-spacing: 0.5px; }
.de { font-size: 26px; font-weight: 700; line-height: 1.4; display: flex; align-items: flex-start; gap: 6px; }
.de span { flex: 1; }
.de-vi { font-size: 18px; color: var(--chu-nhat); font-style: italic; }
.bai-doc { background: #fffbf0; border-left: 6px solid var(--cam); border-radius: 12px; padding: 12px 14px; font-size: 20px; line-height: 1.55; display: flex; gap: 8px; align-items: flex-start; }
.bai-doc p { flex: 1; white-space: pre-line; }
.hinh-cau { max-height: 200px; max-width: 100%; object-fit: contain; align-self: center; }
.cot-phai { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.linh-vat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nv-cau { height: 150px; object-fit: contain; }
.bong-noi { background: #fff; border-radius: 18px; padding: 10px 14px; font-size: 17px; font-weight: 600; position: relative; box-shadow: var(--bong); text-align: center; }
.vung-goi-y { display: flex; flex-direction: column; gap: 8px; }
.bac-goi-y { background: #fffde7; border: 2px solid #ffe082; border-radius: 14px; padding: 10px 12px; font-size: 17px; }
.bac-goi-y.cu { opacity: 0.6; font-size: 15px; }
.bac-ten { font-weight: 800; color: #f57f17; font-size: 14px; }
.bac-4 { background: #e8f5e9; border-color: #a5d6a7; }

.khung-tra-loi { display: flex; flex-direction: column; gap: 14px; }
.ds-lua-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.ds-lua-chon.dai { grid-template-columns: 1fr; }
.lua-chon {
  background: #fff8ee; border: 3px solid #f0dcc0; border-radius: 20px; min-height: 84px; padding: 14px;
  font-size: 26px; font-weight: 800; box-shadow: var(--bong);
}
.ds-lua-chon.dai .lua-chon { font-size: 21px; min-height: 64px; text-align: left; }
.lua-chon:active:not(:disabled) { transform: translateY(2px); }
/* sai: khoanh viền vàng nét đứt, không đỏ, không dấu X */
.sai-vang { outline: 4px dashed var(--vang) !important; outline-offset: 3px; background: #fffde7 !important; }
.dung-xanh { background: var(--xanh-nhat) !important; border-color: var(--xanh) !important; }
.dap-an { background: var(--xanh-nhat) !important; border-color: var(--xanh) !important; outline: 3px solid var(--xanh); }
.loi-nhan { font-size: 20px; font-weight: 700; min-height: 30px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--chu-nhat); }
.loi-nhan .ly-do { font-weight: 500; font-size: 18px; flex-basis: 100%; }
.khen { color: #2e7d32; }

/* gõ */
.o-go { font-size: 40px; font-weight: 800; min-height: 72px; border: 3px solid #f0dcc0; border-radius: 18px; background: #fffdf8; display: flex; align-items: center; justify-content: center; letter-spacing: 2px; }
.ban-phim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; width: 100%; align-self: center; }
.phim { border: 0; background: #fff3e0; border-radius: 16px; min-height: 64px; font-size: 28px; font-weight: 800; box-shadow: var(--bong); }
.khung-go { align-items: stretch; }
.khung-go .nut-chinh { align-self: center; min-width: 200px; }
.o-go-chu { font: inherit; font-size: 28px; padding: 12px; border-radius: 16px; border: 3px solid #f0dcc0; }

/* kéo thả */
.hang-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.o-tha { border: 3px dashed #bcaaa4; border-radius: 18px; min-height: 110px; padding: 10px; background: #fafafa; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.o-gio { min-height: 150px; }
.o-ten { font-weight: 800; font-size: 19px; text-align: center; }
.o-noi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.khay-the { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 70px; padding: 10px; border-radius: 18px; background: #fff3e0; }
.the-keo { border: 3px solid #ffcc80; background: #fff; border-radius: 16px; padding: 10px 16px; min-height: 56px; font-size: 22px; font-weight: 800; touch-action: none; box-shadow: var(--bong); }
.the-keo.dang-chon, .ghep-trai.dang-chon { border-color: var(--cam-dam); background: #ffe0b2; transform: scale(1.05); }
.bong-keo { position: fixed; pointer-events: none; z-index: 50; transform: translate(-50%, -50%) scale(1.08); opacity: 0.9; }
.khung-keo .nut-chinh, .khung-ghep .nut-chinh { align-self: center; min-width: 200px; }

/* ghép */
.khung-ghep { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.khung-ghep .nut-chinh { grid-column: 1 / -1; }
.cot-ghep { display: flex; flex-direction: column; gap: 10px; }
.ghep-trai, .ghep-phai { border: 3px solid #f0dcc0; background: #fff; border-radius: 16px; min-height: 60px; padding: 10px 12px; font-size: 20px; font-weight: 700; box-shadow: inset 10px 0 0 var(--mau-cap, transparent), var(--bong); text-align: left; padding-left: 22px; }

/* nói */
.cau-mau { font-size: 28px; font-weight: 800; background: #f3e5f5; border-radius: 18px; padding: 16px; text-align: center; }
.trang-thai-ghi { font-size: 18px; color: var(--chu-nhat); text-align: center; }

/* ---------- chữa, thưởng ---------- */
.man-chua, .man-khoa, .man-cho { align-items: center; justify-content: center; text-align: center; }
.nv-to { height: 220px; object-fit: contain; }
.sao-to { font-size: 64px; color: #ffc107; letter-spacing: 6px; }
.can-luyen { background: #fff; border-radius: 18px; padding: 14px 18px; max-width: 560px; border: 3px dashed var(--vang); text-align: left; }
.can-luyen p { margin-top: 6px; }
.thuong { font-size: 20px; font-weight: 800; color: var(--tim); }
.nhac { color: var(--cam-dam); font-weight: 700; }

/* hộp thoại */
.hop-thoai { position: fixed; inset: 0; background: rgba(40, 30, 20, 0.45); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px; }
.hop-thoai-noi { background: #fff; border-radius: 28px; padding: 24px; width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.loi-hoi { font-size: 21px; font-weight: 700; }
.hop-thoai .hang-nut.doc { width: 100%; }

.thong-bao { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: #3e2723; color: #fff; padding: 12px 20px; border-radius: 16px; font-size: 18px; z-index: 60; max-width: 90vw; text-align: center; }

/* ---------- Cáo đói từ ---------- */
.doi-tu-than { display: grid; grid-template-columns: 300px 1fr; gap: 18px; flex: 1; align-items: start; }
.doi-tu-trai { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.doi-tu-phai { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 26px; padding: 20px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08); }
.tien-do-banh { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.banh { font-size: 28px; opacity: 0.25; filter: grayscale(1); }
.banh-an { opacity: 1; filter: none; }
.dem { font-weight: 800; margin-left: 8px; }
.ds-banh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.banh-tu { border: 3px solid #d7a86e; background: #ffe0b2; border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; box-shadow: 0 6px 0 rgba(120, 70, 20, 0.25); padding: 6px; word-break: break-word; }
.banh-hinh { font-size: 30px; }
.cay-tu { background: #f1f8e9; border-radius: 18px; padding: 12px; }
.cay-ten { font-weight: 800; margin-bottom: 6px; }
.la-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.la { border-radius: 12px 0 12px 0; padding: 4px 10px; font-size: 14px; font-weight: 700; }
.la-0 { background: #fff59d; }
.la-1 { background: #c5e1a5; }
.la-2 { background: #81c784; }
.la-3 { background: #388e3c; color: #fff; }
.chu-giai { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chu-giai .la { font-size: 12px; }

/* ---------- Góc phụ huynh ---------- */
.man-cong { align-items: center; justify-content: center; text-align: center; background: #f5f5f5; }
.phep-tinh { font-size: 44px; font-weight: 800; }
.man-cong .o-go { width: min(300px, 90vw); }
.man-phu-huynh { background: #f6f4f1; }
.ph-dau { display: flex; justify-content: space-between; align-items: center; }
.hang-tab { display: flex; gap: 10px; }
.tab { border: 2px solid #d7ccc8; background: #fff; border-radius: 999px; padding: 10px 18px; font-size: 17px; font-weight: 700; min-height: 48px; }
.tab-chon { background: var(--chu); color: #fff; border-color: var(--chu); }
.ph-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ph-the { background: #fff; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); }
.ph-the h3 { font-size: 18px; }
.ph-the ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.ph-rong { grid-column: 1 / -1; }
.nho { font-size: 14px; color: var(--chu-nhat); }
.so-to { font-size: 44px; font-weight: 800; color: var(--xanh); }
.dong-phut { display: grid; grid-template-columns: 90px 1fr 90px; gap: 8px; align-items: center; font-size: 15px; }
.dp-thanh { height: 12px; background: #eee; border-radius: 999px; overflow: hidden; }
.dp-day { display: block; height: 100%; background: var(--cam); }
.dp-so { text-align: right; }
.bang { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang th, .bang td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: center; }
.cai-dat { display: flex; flex-direction: column; gap: 10px; }
.cai-dat .o-nhap input { font-size: 18px; min-height: 44px; }
.nhom-bat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 600; }
.bat-tat { display: flex; gap: 8px; align-items: center; font-size: 16px; min-height: 44px; }
.bat-tat input { width: 24px; height: 24px; }
.ds-ghi-am li { list-style: none; margin-left: -18px; }

/* ---------- khổ dọc (iPad đứng) ---------- */
@media (max-width: 900px) {
  .than-cau { grid-template-columns: 1fr; }
  .cot-phai { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cot-phai .linh-vat { flex-direction: row; flex: 1 1 260px; }
  .nv-cau { height: 110px; }
  .nut-goi-y { width: auto; flex: 0 0 auto; }
  .vung-goi-y { flex-basis: 100%; }
  .doi-tu-than { grid-template-columns: 1fr; }
  .doi-tu-trai { flex-direction: row; }
  .doi-tu-trai .nv-to { height: 150px; }
  .ban-do { min-height: 520px; }
  .lau-dai { width: 52%; }
  .tram { min-width: 160px; }
  .tram-1 { bottom: 26%; }
  .tram-3 { bottom: 40%; }
}