/* ============================================================
   KEGA – Nông Trại Duy Anh Web
   Giao diện cho trẻ em: màu tươi, nút to bo tròn, hoạt hình nhẹ.
   ============================================================ */

:root {
	--troi-tren: #63c8f5;
	--troi-duoi: #b6ecff;
	--co-1: #7ed957;
	--co-2: #4fb32e;
	--nau: #8b5a2b;
	--vang: #ffd83d;
	--cam: #ff9f1c;
	--hong: #ff6b9d;
	--tim: #9b5de5;
	--do: #ef476f;
	--xanhla: #06b96b;
	--chu: #3b2a1e;
	--trang: #fffdf7;
	--vien: 4px solid #ffffff;
	--do-bong: 0 6px 0 rgba(0,0,0,.16), 0 10px 24px rgba(0,0,0,.18);
	--font: 'Baloo 2', 'Segoe UI Rounded', 'SF Pro Rounded', Nunito, Quicksand,
	        'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.an { display: none !important; }

/* Trang cao ĐÚNG một màn hình và không bao giờ cuộn: cảnh nền chỉ có một bức
   vừa khít khung nhìn, nội dung dài (học bài, cửa hàng) cuộn bên trong .khung. */
html, body { height: 100%; }
html { background: var(--troi-duoi); }

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 600;
	color: var(--chu);
	overflow: hidden;
	overscroll-behavior: contain;
}

button, input { font-family: inherit; font-weight: inherit; color: inherit; }

/* ---------------- Cảnh nền ---------------- */
/* MỘT bức tranh SVG cố định, phủ kín khung nhìn, nằm dưới mọi thứ.
   Không có lớp nào khác vẽ trời hay cỏ nữa; mọi nút bấm nổi thẳng lên tranh. */
.canh {
	position: fixed; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	display: block; pointer-events: none;
}
.canh-nang { transform-origin: 900px 104px; animation: thoNang 6s ease-in-out infinite; }
@keyframes thoNang { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.canh-may  { animation: troi1 linear infinite; }
.canh-may1 { animation-duration: 70s; }
.canh-may2 { animation-duration: 95s;  animation-delay: -30s; }
.canh-may3 { animation-duration: 120s; animation-delay: -70s; opacity: .8; }
@keyframes troi1 { to { transform: translateX(1520px); } }

/* ============================================================
   MÀN HÌNH ĐĂNG NHẬP
   ============================================================ */
.man-cong { position: relative; z-index: 2; display: grid; place-items: center; height: 100%; overflow-y: auto; padding: 20px 14px 40px; }
body.da-vao .man-cong { display: none; }

.cong-hop {
	width: min(440px, 100%);
	background: var(--trang);
	border: var(--vien);
	border-radius: 32px;
	padding: 22px 22px 26px;
	box-shadow: 0 14px 0 rgba(0,0,0,.12), 0 24px 50px rgba(0,0,0,.22);
	animation: nhayVao .5s cubic-bezier(.2,1.4,.5,1) both;
}
@keyframes nhayVao { from { opacity: 0; transform: translateY(30px) scale(.94); } }

.cong-thu { display: flex; justify-content: center; gap: 4px; font-size: 38px; margin-bottom: 4px; }
.cong-thu span { animation: nhun 1.7s ease-in-out infinite; }
.cong-thu span:nth-child(2) { animation-delay: .15s; }
.cong-thu span:nth-child(3) { animation-delay: .3s; }
.cong-thu span:nth-child(4) { animation-delay: .45s; }
.cong-thu span:nth-child(5) { animation-delay: .6s; }
@keyframes nhun { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(-6deg); } }

.cong-ten {
	margin: 4px 0 6px; text-align: center; font-size: 34px; line-height: 1.05;
	font-weight: 800; color: var(--tim); letter-spacing: .5px;
}
.cong-ten b { color: var(--cam); font-size: 40px; -webkit-text-stroke: 1px rgba(0,0,0,.06); }
.cong-mota { margin: 0 0 16px; text-align: center; font-size: 15px; color: #6b5a4c; line-height: 1.45; }

.cong-tab { display: flex; gap: 8px; background: #f0ece3; padding: 5px; border-radius: 999px; margin-bottom: 16px; }
.tab-nut {
	flex: 1; border: 0; background: transparent; padding: 11px 8px; border-radius: 999px;
	font-size: 15.5px; font-weight: 700; cursor: pointer; color: #8a7a6c; transition: .18s;
}
.tab-nut.dang-chon { background: var(--tim); color: #fff; box-shadow: 0 4px 0 #7b3fd0; }

.cong-form { display: grid; gap: 13px; }
.cong-form.an { display: none; }
.cong-form label { display: grid; gap: 5px; font-size: 14.5px; color: #5c4a3d; font-weight: 700; }
.cong-form small { font-weight: 600; color: #9c8b7c; }
.cong-form input {
	border: 3px solid #e6dfd2; background: #fbf8f1; border-radius: 16px;
	padding: 13px 15px; font-size: 17px; outline: none; transition: .18s; min-width: 0;
}
.cong-form input:focus { border-color: var(--tim); background: #fff; box-shadow: 0 0 0 4px rgba(155,93,229,.18); }

.chon-avatar { border: 0; padding: 0; margin: 0; }
.chon-avatar legend { font-size: 14.5px; font-weight: 700; color: #5c4a3d; padding: 0 0 6px; }
.avatar-ds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avatar-ds button {
	border: 3px solid #e6dfd2; background: #fbf8f1; border-radius: 14px;
	font-size: 24px; padding: 6px 0; cursor: pointer; transition: .15s;
}
.avatar-ds button:hover { transform: translateY(-2px); }
.avatar-ds button.dang-chon { border-color: var(--cam); background: #fff4dc; transform: scale(1.08); }

.cong-loi { min-height: 20px; margin: 12px 0 0; text-align: center; color: var(--do); font-size: 14.5px; font-weight: 700; }

/* Nút to dùng chung */
.nut-to {
	border: 0; border-radius: 18px; padding: 15px 18px; font-size: 19px; font-weight: 800;
	color: #fff; cursor: pointer; background: linear-gradient(180deg, #ffb340, var(--cam));
	box-shadow: 0 6px 0 #d97706; transition: transform .1s, box-shadow .1s;
}
.nut-to:hover { filter: brightness(1.05); }
.nut-to:active { transform: translateY(5px); box-shadow: 0 1px 0 #d97706; }
.nut-to[disabled] { opacity: .55; cursor: not-allowed; }

.nut-nho {
	border: 0; background: #fff; border-radius: 999px; padding: 9px 16px;
	font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.14);
}
.nut-nho:active { transform: translateY(3px); box-shadow: none; }

/* ============================================================
   GAME
   ============================================================ */
/* Màn game cao đúng một khung nhìn: thanh trên, phần giữa, thanh dưới xếp dọc.
   Chỉ phần giữa (.khung) được cuộn khi nội dung dài; trang không bao giờ có
   thanh kéo dọc của riêng nó. */
.man-game { display: none; position: relative; z-index: 2; height: 100dvh; flex-direction: column; }
body.da-vao .man-game { display: flex; }

/* ---------- Thanh trên ----------
   Không có nền: từng nút, từng ô tiền tự có viên trắng của mình và nổi thẳng
   lên cảnh nền, không cần dải trắng nào chạy ngang màn hình. */
.thanh-tren {
	position: relative; z-index: 30; flex: none;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
	background: transparent;
}
.the-nguoi {
	display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
	background: #fff; border-radius: 999px; padding: 5px 14px 5px 5px;
	box-shadow: 0 3px 0 rgba(0,0,0,.12); max-width: 46%;
}
.the-avatar {
	width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px;
	background: linear-gradient(135deg, #ffe9a8, #ffd166); border-radius: 50%; flex: none;
}
.the-ten { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vi { display: flex; gap: 6px; margin-left: auto; }
.vi-o {
	background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 15px; font-weight: 800;
	box-shadow: 0 3px 0 rgba(0,0,0,.12); white-space: nowrap;
}
.vi-o b { color: var(--cam); }

/* Đồng hồ tiền giờ. Số chạy từng giây nên phải dùng chữ số ĐỀU BỀ NGANG
   (tabular-nums), không thì cả cái thanh trên giật qua giật lại mỗi giây. */
.vi-gio b { color: var(--tim); font-variant-numeric: tabular-nums; }
.vi-gio i { font-style: normal; font-weight: 700; font-size: .88em; opacity: .65; margin-left: 6px; }
body.het-tien .vi-gio { background: #ffe2e6; }
body.het-tien .vi-gio b { color: var(--do); }

/* Hết sạch tiền: mọi tab trừ Học bài đều mờ đi và không bấm vào được.
   Chỉ làm mờ thôi chứ không giấu — bé vẫn thấy chỗ mình sắp quay lại. */
.tab.tab-khoa { opacity: .35; filter: grayscale(1); }

/* Nhãn góc thẻ trong kho: "đầy rồi" phải đỏ để bé nhìn là biết đi thu ngay */
.shop-co.xau { background: #ffe2e6; color: var(--do); }
/* Hết tiền thì nhắn tin cũng không được nữa (máy chủ chặn), nên cất luôn cửa sổ
   chat đi cho bé khỏi gõ xong mới biết là không gửi được. */
body.het-tien #tam-su { display: none !important; }
.vi-o.nay { animation: dapManh .45s ease; }
@keyframes dapManh { 0%,100% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-4deg); } }

.nut-tron {
	width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: #fff;
	font-size: 19px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.nut-tron:active { transform: translateY(3px); box-shadow: none; }

/* ---------- Khung nội dung ---------- */
/* Cột nội dung hẹp cho dễ đọc, riêng trang Vườn thú thì rộng hơn vì khu vườn
   tràn hết chiều ngang, để dải trạng thái bên dưới không bị dồn cục vào giữa. */
/* .khung là phần giữa, chiếm hết chỗ còn lại và tự cuộn khi nội dung dài.
   Các trang chữ (học bài, cửa hàng…) nằm trong cột hẹp cho dễ đọc;
   riêng trang Vườn thú rộng hết màn hình và không cuộn. */
.khung {
	flex: 1 1 auto; min-height: 0; width: 100%;
	padding: 8px 12px 16px;
	overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain;
}
.trang { display: none; width: min(760px, 100%); margin: 0 auto; animation: hienLen .3s ease both; }
.trang.dang-mo { display: block; }
@keyframes hienLen { from { opacity: 0; transform: translateY(14px); } }

.khung:has(#trang-vuon.dang-mo) { padding: 0; overflow: hidden; }
#trang-vuon { width: 100%; animation: none; }
#trang-vuon.dang-mo {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tieu-de {
	margin: 4px 0 12px; font-size: 22px; font-weight: 800; color: #fff;
	text-shadow: 0 3px 0 rgba(0,0,0,.18); text-align: center;
}

/* ---------- Vườn thú ---------- */
/* ---------- Dải trạng thái gọn dưới khu vườn ----------
   Chỉ hiện thứ cần làm ngay. Chi tiết đầy đủ nằm trong hộp chăm thú. */
.vuon {
	display: flex;
	flex-wrap: nowrap;            /* một hàng duy nhất, nhiều bạn thì vuốt ngang */
	gap: 10px;
	padding: 6px 12px 10px;
	overflow-x: auto;
	scrollbar-width: none;
	flex: none;
}
.vuon::-webkit-scrollbar { display: none; }
/* ít thẻ thì gom vào giữa, nhiều thẻ thì bắt đầu từ mép trái để vuốt được hết */
.vuon > :first-child { margin-left: auto; }
.vuon > :last-child  { margin-right: auto; }
.thu-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
	width: 190px;
	padding: 7px 12px 7px 8px;
	border: 0;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.1);
	cursor: pointer;
	text-align: left;
	transition: transform .14s, box-shadow .14s;
}
.thu-chip:hover  { transform: translateY(-3px); box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.14); }
.thu-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

.chip-hinh {
	position: relative;
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 3px 2px rgba(0,0,0,.2));
}
.chip-mat {
	position: absolute; right: -6px; bottom: -3px;
	font-size: 14px; font-style: normal;
	filter: none;
}
.chip-noi { display: grid; gap: 1px; min-width: 0; flex: 1; }
.chip-noi b {
	font-size: 14px; font-weight: 800; color: var(--chu);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-noi i {
	font-style: normal; font-size: 11px; font-weight: 700; color: #8a7a6c;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-thanh {
	display: block; height: 5px; margin-top: 3px;
	border-radius: 999px; background: #eee6d8; overflow: hidden;
}
.chip-thanh u {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #ffd36b, var(--cam));
	transition: width .5s ease;
}
.thu-chip.chip-doi .chip-thanh u,
.thu-chip.chip-gap .chip-thanh u { background: linear-gradient(90deg, #ff9d7a, var(--do)); }

.chip-nhan {
	flex-shrink: 0;
	font-size: 11px; font-weight: 800;
	border-radius: 999px; padding: 3px 8px;
	white-space: nowrap;
}
.chip-nhan.chip-qua { background: var(--xanhla); color: #fff; }
.chip-nhan.chip-doi { background: #fff0d6; color: #b4610a; }
.chip-nhan.chip-gap { background: var(--do);   color: #fff; }

/* con sắp bỏ đi thì viền đỏ và nhấp nháy nhẹ */
.thu-chip.chip-gap {
	box-shadow: 0 0 0 3px var(--do), 0 3px 0 rgba(0,0,0,.12);
	animation: chip-nhac 1.5s ease-in-out infinite;
}
@keyframes chip-nhac { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.thu-chip.co-sp { box-shadow: 0 0 0 3px var(--xanhla), 0 3px 0 rgba(0,0,0,.12); }

.thu-chip.them {
	background: #ffffff;
	box-shadow: 0 0 0 3px var(--tim), 0 3px 0 rgba(0,0,0,.12);
}
.thu-chip.them .chip-noi b { color: var(--tim); }
.thu-chip.them .chip-hinh { font-size: 24px; color: var(--tim); filter: none; }

@media (prefers-reduced-motion: reduce) { .thu-chip.chip-gap { animation: none; } }

.vuon-goi {
	/* Nền viên thuốc để chữ luôn đọc được, dù phía sau là trời hay cỏ */
	flex: none;
	margin: 4px auto 2px; width: fit-content; max-width: 92%;
	text-align: center; font-size: 14px; font-weight: 800; line-height: 1.45;
	color: #4a5a3c; background: #ffffff;
	border-radius: 999px; padding: 6px 16px;
	box-shadow: 0 2px 0 rgba(0,0,0,.1);
}

/* ---------- Chọn môn ---------- */
.mon-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.the-mon {
	border: 0; cursor: pointer; border-radius: 24px; padding: 20px 12px; color: #fff;
	font-size: 18px; font-weight: 800; text-align: center; line-height: 1.25;
	box-shadow: 0 6px 0 rgba(0,0,0,.2), 0 12px 24px rgba(0,0,0,.16);
	transition: transform .14s;
}
.the-mon span { display: block; font-size: 44px; margin-bottom: 6px; }
.the-mon:hover { transform: translateY(-4px) rotate(-1.5deg); }
.the-mon:active { transform: translateY(3px); }
.the-mon.m0 { background: linear-gradient(160deg, #4cc9f0, #3a86ff); }
.the-mon.m1 { background: linear-gradient(160deg, #ff8fab, #ef476f); }
.the-mon.m2 { background: linear-gradient(160deg, #80ed99, #06b96b); }
.the-mon.m3 { background: linear-gradient(160deg, #ffca3a, #ff9f1c); }
.the-mon.m4 { background: linear-gradient(160deg, #c77dff, #7b2cbf); }
.the-mon.m5 { background: linear-gradient(160deg, #ff9fb2, #e5326b); }
.the-mon.m6 { background: linear-gradient(160deg, #6ee7f5, #0e7490); }
.the-mon.m7 { background: linear-gradient(160deg, #b8c4d9, #556987); }
.the-mon.m8 { background: linear-gradient(160deg, #ffb37a, #e85d04); }
.the-mon.m9 { background: linear-gradient(160deg, #a0e8af, #2d9e5f); }

.tien-do {
	margin-top: 16px; background: #ffffff; border-radius: 22px; padding: 14px 16px;
	display: grid; gap: 9px; box-shadow: 0 5px 0 rgba(0,0,0,.1);
}
.td-hang { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; }
.td-hang b { margin-left: auto; color: #6b5a4c; font-size: 13.5px; }
.td-thanh { flex: 1; height: 10px; border-radius: 999px; background: #e8e2d6; overflow: hidden; max-width: 46%; }
.td-thanh i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #80ed99, #06b96b); }

/* ---------- Câu hỏi ---------- */
.cau-tren { display: flex; align-items: center; margin-bottom: 10px; }
.chuoi {
	margin-left: auto; background: #fff; border-radius: 999px; padding: 8px 14px;
	font-size: 15px; font-weight: 800; box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.chuoi b { color: var(--cam); }
.chuoi.nong { background: #fff2cc; }
.chuoi.nay  { animation: dapManh .5s ease; }

.the-cau {
	background: var(--trang); border-radius: 28px; padding: 20px 18px;
	box-shadow: 0 8px 0 rgba(0,0,0,.13), 0 16px 34px rgba(0,0,0,.16);
}
.cau-mon { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; color: var(--tim); text-transform: uppercase; letter-spacing: .6px; }
.cau-hoi { margin: 0 0 18px; font-size: 21px; font-weight: 800; line-height: 1.4; }

.dap-ds { display: grid; gap: 10px; }
.dap {
	display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
	border: 3px solid #e8e1d4; background: #fbf8f1; border-radius: 18px;
	padding: 13px 15px; font-size: 16.5px; font-weight: 700; cursor: pointer;
	transition: transform .12s, border-color .15s, background .15s;
}
.dap i {
	flex: none; width: 30px; height: 30px; display: grid; place-items: center;
	background: #fff; border-radius: 50%; font-style: normal; font-weight: 800;
	font-size: 15px; color: #8a7a6c; box-shadow: inset 0 0 0 3px #e8e1d4;
}
.dap:hover:not(:disabled) { border-color: var(--tim); background: #faf5ff; transform: translateX(3px); }
.dap:disabled { cursor: default; }
.dap.dung   { border-color: var(--xanhla); background: #e7fbf1; animation: dapManh .45s ease; }
.dap.dung i { background: var(--xanhla); color: #fff; box-shadow: none; }
.dap.sai    { border-color: var(--do); background: #ffeef2; animation: lacDau .4s ease; }
.dap.sai i  { background: var(--do); color: #fff; box-shadow: none; }
@keyframes lacDau { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.ket-qua {
	margin-top: 14px; background: var(--trang); border-radius: 26px; padding: 18px;
	box-shadow: 0 8px 0 rgba(0,0,0,.13); text-align: center;
	animation: nhayVao .35s cubic-bezier(.2,1.4,.5,1) both;
}
.ket-qua.an { display: none; }
.kq-tieude { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.kq-tieude.tot { color: var(--xanhla); }
.kq-tieude.chua { color: var(--do); }
/* Trả lời sai: nêu thẳng đáp án đúng, đọc là thấy ngay */
.kq-dapan {
	margin: 0 0 10px;
	background: #eaf9ef;
	border: 3px solid #b7e7c6;
	border-radius: 16px;
	padding: 10px 14px;
	text-align: left;
}
.kq-dapan .kq-nhan {
	display: block;
	font-size: 12px;
	font-weight: 800;
	color: #2f8a55;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 2px;
}
.kq-dapan b {
	font-size: 16.5px;
	font-weight: 800;
	color: #17603a;
	line-height: 1.4;
}
.kq-giaithich {
	margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: #5c4a3d;
	background: #fff8e8; border-radius: 16px; padding: 12px 14px;
	text-align: left;
}
.ket-qua .nut-to { width: 100%; }

/* ---------- Cửa hàng ---------- */
.shop-ds {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px;
	margin-bottom: 24px;
}
.the-shop {
	position: relative; border: 0; cursor: pointer; text-align: center;
	background: var(--trang); border-radius: 24px; padding: 14px 10px;
	box-shadow: 0 6px 0 rgba(0,0,0,.13), 0 12px 24px rgba(0,0,0,.13);
	transition: transform .14s;
}
.the-shop:hover { transform: translateY(-4px); }
.the-shop:active { transform: translateY(2px); }
.the-shop.khoa { opacity: .58; }
.shop-hinh { font-size: 46px; line-height: 1; display: block; margin-bottom: 6px; }
.shop-ten { font-size: 15px; font-weight: 800; }
.shop-mota { font-size: 12.5px; font-weight: 600; color: #8a7a6c; min-height: 32px; margin: 3px 0 7px; line-height: 1.3; }
.shop-gia {
	display: inline-block; background: var(--vang); border-radius: 999px;
	padding: 5px 13px; font-size: 14.5px; font-weight: 800; box-shadow: 0 3px 0 #d99e00;
}
.shop-gia.mien-phi { background: var(--xanhla); color: #fff; box-shadow: 0 3px 0 #058c51; }
.shop-co {
	position: absolute; top: 8px; right: 8px; background: var(--xanhla); color: #fff;
	font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}

/* ---------- Thu hoạch ---------- */
.thu-hoach { margin-bottom: 12px; display: grid; }
.nut-thu {
	background: linear-gradient(180deg, #7ee08a, var(--xanhla));
	box-shadow: 0 6px 0 #04834b;
}
.nut-thu:active { box-shadow: 0 1px 0 #04834b; }

.the-sp {
	border-radius: 20px; padding: 13px 15px; margin-bottom: 14px;
	background: #f4f7f2; border: 3px solid #dfe8da;
}
.the-sp.san_sang { background: #e8fbef; border-color: #a7e8c0; }
.the-sp.doi { background: #fff4e6; border-color: #ffd9a8; }
.sp-tieude { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; color: #2f6b46; }
.the-sp.doi .sp-tieude { color: #9a5b12; }
.sp-than { margin: 0; font-size: 14px; font-weight: 600; color: #4b5a4f; line-height: 1.5; }
.sp-than b { color: #17603c; }
.the-sp .nut-thu { width: 100%; margin-top: 11px; padding: 12px; font-size: 16px; }

/* ---------- Thẻ tri thức trong hộp thoại ---------- */
.the-biet {
	background: linear-gradient(160deg, #eef7ff, #e4f0ff);
	border: 3px solid #cfe4fb; border-radius: 20px;
	padding: 13px 15px; margin-bottom: 14px;
}
.biet-tieude { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: #1d4ed8; }
.biet-kieu { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #44506b; }
.biet-kieu b { color: #7c2d12; }
.nhom-ds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vien-nhom {
	background: #fff; border: 2px solid #cfe4fb; border-radius: 999px;
	padding: 4px 11px; font-size: 12.5px; font-weight: 700; color: #35435e;
}
.biet-ds { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.biet-ds li { font-size: 13.8px; font-weight: 600; color: #3f4b63; line-height: 1.45; }

.ht-tieude-nho {
	margin: 0 0 7px; font-size: 14.5px; font-weight: 800; color: #5c4a3d;
}
.ht-tieude-nho small { font-weight: 600; color: #a0917f; }
.ht-tieude-nho.mo { color: #a0917f; margin-top: 12px; }
.ht-trong {
	margin: 0 0 12px; font-size: 13.8px; font-weight: 600; color: #8a7a6c;
	background: #f7f3ea; border-radius: 14px; padding: 11px 13px; line-height: 1.45;
}
.ht-mon.cam { border-style: dashed; }
.ht-gia {
	margin: 0 0 14px; text-align: center; font-size: 16px; font-weight: 700; color: #5c4a3d;
	background: #fff8e8; border-radius: 16px; padding: 12px;
}
.ht-gia b { color: var(--cam); font-size: 19px; }
.ht-gia small { color: #a0917f; font-weight: 600; }
.ht-nut { grid-template-columns: 1fr 1fr; }
.ht-nut .nut-to:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Hộp thoại tài khoản ---------- */
.toi-luoi {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px;
}
.toi-o {
	background: #fff8e8; border-radius: 16px; padding: 11px 10px; text-align: center;
}
.toi-o b { display: block; font-size: 16px; font-weight: 800; color: var(--cam); }
.toi-o span { font-size: 12px; font-weight: 700; color: #8a7a6c; }

.ht-form { display: grid; gap: 9px; margin-bottom: 14px; }
.ht-form input {
	border: 3px solid #e8e1d4; background: #fbf8f1; border-radius: 15px;
	padding: 12px 14px; font-size: 16px; outline: none; min-width: 0;
}
.ht-form input:focus { border-color: var(--tim); background: #fff; }
.ht-bao { margin: 0; font-size: 13.8px; font-weight: 700; text-align: center; min-height: 18px; }
.ht-bao.tot { color: var(--xanhla); }
.ht-bao.xau { color: var(--do); }

/* ---------- Cửa hàng: ghi chú và bộ lọc ---------- */
.shop-ghichu {
	margin: -4px 0 12px; text-align: center; font-size: 13.5px; font-weight: 600;
	color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); line-height: 1.45;
}
.shop-loc { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.loc-nut {
	border: 0; background: #ffffff; border-radius: 999px; cursor: pointer;
	padding: 9px 16px; font-size: 14px; font-weight: 800; color: #6b5a4c;
	box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.loc-nut.dang-chon { background: var(--tim); color: #fff; box-shadow: 0 3px 0 #7b3fd0; }
.shop-khu {
	grid-column: 1 / -1; margin: 6px 0 0; font-size: 17px; font-weight: 800; color: #fff;
	text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.shop-trong {
	grid-column: 1 / -1; text-align: center; color: #fff; font-weight: 700;
	text-shadow: 0 2px 0 rgba(0,0,0,.2); padding: 18px;
}
.shop-gia.thieu { background: #e5e0d6; color: #8a7a6c; box-shadow: 0 3px 0 #c4bdaf; }
.shop-canh {
	display: block; margin-top: 6px; font-size: 11.5px; font-weight: 800; color: #b91c1c;
}
.the-mon i {
	display: block; font-style: normal; font-size: 12.5px; font-weight: 700;
	opacity: .85; margin-top: 3px;
}
.the-mon[disabled] { opacity: .45; cursor: not-allowed; }
.td-ten { min-width: 96px; }
.td-tong {
	margin-top: 4px; padding-top: 10px; border-top: 2px dashed #e2dbcd;
	font-size: 14px; font-weight: 700; color: #6b5a4c; text-align: center;
}
.td-tong b { color: var(--cam); }
.vi-tien b { color: var(--xanhla); }

/* ---------- Bảng xếp hạng ---------- */
.bxh { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bxh li {
	display: flex; align-items: center; gap: 11px; background: var(--trang);
	border-radius: 20px; padding: 11px 15px; box-shadow: 0 5px 0 rgba(0,0,0,.12);
}
.bxh .hang { width: 30px; font-size: 17px; font-weight: 800; color: #b0a191; text-align: center; flex: none; }
.bxh .av { font-size: 26px; flex: none; }
.bxh .ten { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxh .so { margin-left: auto; font-size: 14.5px; font-weight: 800; color: var(--cam); white-space: nowrap; flex: none; }
.bxh li.top1 { background: linear-gradient(100deg, #fff4c2, #ffe9a0); }
.bxh li.top2 { background: linear-gradient(100deg, #f3f4f6, #e5e7eb); }
.bxh li.top3 { background: linear-gradient(100deg, #ffe6cc, #ffd6ad); }
.bxh li.toi  { outline: 4px solid var(--tim); }
.bxh li { cursor: pointer; transition: transform .14s; }
.bxh li:hover { transform: translateX(4px); }
.bxh li:active { transform: translateY(3px); box-shadow: none; }
.bxh .ten i { font-style: normal; font-size: 13px; color: var(--tim); }

/* Vườn thú của bạn khác */
.ban-luoi {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 9px; margin-bottom: 14px;
}
.ban-thu {
	background: #fff8e8; border-radius: 18px; padding: 11px 6px; text-align: center;
}
.ban-hinh {
	display: block; font-size: 38px; line-height: 1.1;
	filter: drop-shadow(0 5px 4px rgba(0,0,0,.16));
}
.ban-thu b {
	display: block; font-size: 13.5px; font-weight: 800; margin-top: 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ban-thu i { display: block; font-style: normal; font-size: 11.5px; color: #8a7a6c; }

/* ---------- Thanh dưới ---------- */
/* Thanh dưới cũng không có nền: bốn nút là bốn viên trắng nổi trên bãi cỏ */
.thanh-duoi {
	position: relative; z-index: 30; flex: none;
	display: flex; justify-content: center; gap: 8px;
	padding: 6px 8px max(8px, env(safe-area-inset-bottom));
	background: transparent;
}
.tab {
	border: 0; background: #ffffff; cursor: pointer; border-radius: 18px; padding: 6px 14px;
	font-size: 12px; font-weight: 800; color: #9c8b7c; display: grid; gap: 1px; transition: .15s;
	min-width: 84px; box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.tab:active { transform: translateY(3px); box-shadow: none; }
.tab span { font-size: 25px; line-height: 1.1; transition: transform .18s; }
.tab.dang-chon { background: var(--tim); color: #fff; box-shadow: 0 3px 0 #7b3fd0; }
.tab.dang-chon span { transform: scale(1.18) translateY(-1px); }
.tab-hoc { position: relative; }
.tab-hoc::after {
	content: ''; position: absolute; top: 6px; right: 22%; width: 9px; height: 9px;
	background: var(--do); border-radius: 50%; box-shadow: 0 0 0 3px #fff;
	animation: thoNang 1.6s ease-in-out infinite;
}
.tab-hoc.dang-chon::after { display: none; }

/* ---------- Hộp thoại ---------- */
.lop-phu {
	position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
	background: rgba(46,32,20,.62);
	animation: moLen .2s ease both;
}
.lop-phu.an { display: none; }
@keyframes moLen { from { opacity: 0; } }

.hop-thoai {
	width: min(400px, 100%); max-height: 88dvh; overflow-y: auto;
	background: var(--trang); border: var(--vien); border-radius: 30px; padding: 20px;
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
	animation: nhayVao .35s cubic-bezier(.2,1.4,.5,1) both;
}
.ht-dau { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ht-hinh {
	font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 5px rgba(0,0,0,.18));
	animation: nhun 2.2s ease-in-out infinite;
}
.ht-ten { font-size: 21px; font-weight: 800; margin: 0; }
.ht-lv { font-size: 13.5px; font-weight: 700; color: #8a7a6c; margin: 2px 0 0; }
.ht-dong { display: grid; gap: 6px; margin-bottom: 14px; }
.ht-nhan { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: #6b5a4c; }
.ht-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ht-mon {
	border: 3px solid #e8e1d4; background: #fbf8f1; border-radius: 16px; padding: 9px 4px;
	cursor: pointer; font-size: 12.5px; font-weight: 800; text-align: center;
}
.ht-mon b { display: block; font-size: 26px; font-weight: 500; }
.ht-mon i { font-style: normal; color: #a0917f; font-size: 11.5px; }
.ht-mon:hover:not(:disabled) { border-color: var(--cam); background: #fff6e4; }
.ht-mon:disabled { opacity: .42; cursor: not-allowed; }
.ht-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ht-nut .nut-to { padding: 12px 10px; font-size: 15.5px; }
.nut-xam { background: linear-gradient(180deg, #cfc6b8, #b3a898); box-shadow: 0 5px 0 #8f8574; }
.nut-xam:active { box-shadow: 0 1px 0 #8f8574; }
.nut-tim { background: linear-gradient(180deg, #b57bef, var(--tim)); box-shadow: 0 5px 0 #7b3fd0; }
.nut-tim:active { box-shadow: 0 1px 0 #7b3fd0; }

/* ---------- Thông báo bay lên ---------- */
.bay-ds {
	position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 80;
	display: grid; gap: 7px; justify-items: center; pointer-events: none;
	width: max-content; max-width: 92vw;
}
.bay {
	background: rgba(59,42,30,.92); color: #fff; border-radius: 999px; padding: 10px 20px;
	font-size: 15.5px; font-weight: 800; box-shadow: 0 8px 22px rgba(0,0,0,.3);
	animation: bayLen 2.4s ease forwards; text-align: center;
}
.bay.tot { background: linear-gradient(90deg, #06b96b, #04a35d); }
.bay.xau { background: linear-gradient(90deg, #ef476f, #d62f57); }
@keyframes bayLen {
	0% { opacity: 0; transform: translateY(14px) scale(.86); }
	12% { opacity: 1; transform: translateY(0) scale(1); }
	80% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-18px); }
}

/* ---------- Pháo giấy ---------- */
.phao { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.manh {
	position: absolute; width: 11px; height: 15px; border-radius: 2px;
	animation: roiXuong 1.5s ease-in forwards;
}
@keyframes roiXuong {
	0%   { opacity: 1; transform: translateY(0) rotate(0); }
	100% { opacity: 0; transform: translateY(105vh) rotate(760deg); }
}

/* ---------- Màn hình nhỏ ---------- */
/* Màn hình hẹp: thanh trên có tới 6 thứ nên tràn mất nút đăng xuất.
   Giấu ô ngôi sao (vẫn xem được trong hộp Của bé) và thu nhỏ mọi thứ lại. */
@media (max-width: 560px) {
	.thanh-tren { gap: 6px; padding-left: 8px; padding-right: 8px; }
	.the-nguoi { max-width: 34%; padding: 4px 10px 4px 4px; }
	.the-ten { font-size: 13px; }
	.vi { gap: 4px; }
	.vi-o { padding: 6px 9px; font-size: 13px; }
	.vi-cap { min-width: 62px; }
	.vi-o:not(.vi-cap):not(.vi-tien):not(.vi-gio) { display: none; }
	.vi-gio i { display: none; }   /* màn hình hẹp: giữ đồng hồ, bỏ số tiền cho khỏi tràn */
	.nut-tron { width: 34px; height: 34px; font-size: 15px; }
}

@media (max-width: 400px) {
	/* Máy bé nhất: tám tab vẫn phải đứng một hàng, không tab nào bị cắt chữ */
	.tab { font-size: 9px; letter-spacing: -.4px; }
	.tab span { font-size: 17px; }
	.cong-ten { font-size: 29px; }
	.cong-ten b { font-size: 34px; }
	.cau-hoi { font-size: 19px; }
	.the-mon { font-size: 16.5px; padding: 16px 8px; }
	.the-mon span { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   KINH TẾ THẬT: tuổi, cân nặng, khẩu phần, bao thức ăn
   ============================================================ */

/* Dòng giai đoạn lớn + tuổi dưới tên con vật trong vườn */

/* Ô số liệu trong hộp chăm thú: đã nuôi / cân nặng / khẩu phần / đã ăn */
.so-do {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 12px 0;
}
.so-o {
	background: #fff6e3;
	border: 3px solid #ffe6b8;
	border-radius: 14px;
	padding: 8px 10px;
	text-align: center;
}
.so-o b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--nau);
	line-height: 1.2;
}
.so-o span {
	font-size: 11px;
	font-weight: 700;
	color: #8a7a6c;
}

/* Nhắc còn thiếu bao nhiêu gam nữa là no */
.ht-canthem {
	margin: 4px 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cam);
	text-align: center;
}
.ht-canthem b { color: var(--do); }

/* Thẻ thức ăn trong cửa hàng: không còn là nút, các cỡ bao mới là nút */
.the-doan { cursor: default; }
.the-doan:hover { transform: none; }
.shop-gia small { font-size: 11px; font-weight: 700; opacity: .85; }

/* Xếp DỌC từng cỡ bao: cân nặng bên trái, tiền bên phải — số dài mấy cũng đủ chỗ,
   và bé đọc được thành câu "20 ki-lô-gam giá bốn mươi nghìn". */
.goi-ds {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 8px;
	width: 100%;
}
.goi-nut {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	font-family: var(--font);
	font-size: 13px;
	white-space: nowrap;
	font-weight: 800;
	color: var(--chu);
	background: var(--vang);
	border: none;
	border-radius: 11px;
	box-shadow: 0 3px 0 #d8ab00;
	padding: 7px 11px;
	cursor: pointer;
	line-height: 1.2;
}
.goi-nut i {
	font-style: normal;
	font-size: 12.5px;
	font-weight: 800;
	opacity: .82;
}
.goi-nut:hover { filter: brightness(1.06); }
.goi-nut:active { transform: translateY(2px); box-shadow: 0 1px 0 #d8ab00; }
.goi-nut.thieu {
	background: #e5e0d6;
	color: #8a7a6c;
	box-shadow: 0 3px 0 #c4bdaf;
}
.goi-nut:disabled { opacity: .5; cursor: not-allowed; }

/* Bảng tính tiền nuôi trước khi nhận nuôi */
.bang-nuoi {
	background: #f2fbf4;
	border: 3px solid #cdeed6;
	border-radius: 16px;
	padding: 12px 14px;
	margin: 12px 0;
}
.bn-dong {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #4a5a4e;
	padding: 4px 0;
}
.bn-dong b { white-space: nowrap; font-size: 14px; }
.bn-dong .am    { color: var(--do); }
.bn-dong .duong { color: #067a49; }
.bn-tong {
	border-top: 2px dashed #b9dfc6;
	margin-top: 4px;
	padding-top: 8px;
	font-size: 14px;
	color: var(--chu);
}
.bn-ghi {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: #6f7f74;
	line-height: 1.4;
}

/* ============================================================
   CẤP CỦA NGƯỜI CHƠI + LUẬT BỎ ĐÓI
   ============================================================ */

/* Thanh cấp trên đầu, kèm vạch tiến độ tới cấp sau */
.vi-cap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 3px;
	min-width: 74px;
}
.vi-cap b { font-size: 13px; line-height: 1.1; color: var(--tim); }
.cap-thanh {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: #e9e2f7;
	overflow: hidden;
}
.cap-thanh u {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tim), var(--hong));
	transition: width .5s ease;
}

/* Nhãn đếm ngược dưới thẻ thú sắp bỏ đi */
/* Viền đỏ bằng box-shadow vì thẻ thú không dùng border */
@keyframes nhac-doi {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
}

/* Dòng nhắc dưới vườn khi có bạn sắp bỏ đi */
.vuon-goi.gap {
	color: #fff;
	background: var(--do);
	border-radius: 14px;
	padding: 8px 14px;
	text-shadow: none;
}

/* Khối điều kiện nhận nuôi trong hộp thoại */
.mo-khoa {
	background: #f6f2ff;
	border: 3px solid #ddd0f5;
	border-radius: 16px;
	padding: 12px 14px;
	margin: 12px 0;
	text-align: left;
}
.mo-khoa b { display: block; font-size: 15px; margin-bottom: 3px; }
.mo-khoa .mk-khoa { color: #7a4fd0; }
.mo-khoa .mk-mo   { color: #067a49; }
.mo-khoa span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #6a5f7a;
	line-height: 1.5;
}
.mo-khoa .mk-that {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 2px dashed #ddd0f5;
	font-size: 12px;
	color: #8a7f99;
}
.mo-khoa .mk-that b { display: inline; font-size: inherit; color: var(--nau); }

/* ============================================================
   KHU VƯỜN SỐNG — một khu vườn thú thu nhỏ, tràn hết chiều ngang
   Không đóng khung: dùng chung bầu trời với nền trang, chỉ vẽ mặt đất.
   Toạ độ ao nước ở đây phải khớp với hằng số AO trong game.js.
   ============================================================ */
/* Sân chơi trong suốt: không vẽ gì cả, bãi cỏ là của cảnh nền phía sau.
   Nó chỉ là vùng để các bạn thú đi lại, chiếm hết chỗ giữa thanh trên
   và dải thẻ dưới đáy. */
.san {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	user-select: none;
	container-type: inline-size;
}

.san-canh { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cv { position: absolute; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }

/* bướm và ong bay lượn quanh vườn */
.cv-buom1 {
	left: 20%; bottom: 26%; font-size: 19px;
	animation: san-buom-bay 13s ease-in-out infinite;
}
.cv-buom2 {
	right: 22%; bottom: 30%; font-size: 15px;
	animation: san-buom-bay 17s ease-in-out infinite reverse;
}
@keyframes san-buom-bay {
	0%   { transform: translate(0, 0)        rotate(0deg); }
	20%  { transform: translate(30px, -22px) rotate(8deg); }
	40%  { transform: translate(66px, 6px)   rotate(-6deg); }
	60%  { transform: translate(34px, 26px)  rotate(5deg); }
	80%  { transform: translate(-14px, 8px)  rotate(-8deg); }
	100% { transform: translate(0, 0)        rotate(0deg); }
}

/* chim bay ngang trời */
.san-chim {
	position: absolute; top: 12%; left: -10%; font-size: 17px; z-index: 1;
	animation: san-bay 30s linear infinite 4s;
	pointer-events: none;
}
@keyframes san-bay {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(60cqw, -16px); }
	100% { transform: translate(125cqw, 8px); }
}

.san-lop { position: absolute; inset: 0; z-index: 4; }

/* ---------- Một bạn thú trong vườn ---------- */
.con {
	position: absolute;
	display: grid;
	justify-items: center;
	gap: 1px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	/* --sau = độ gần (0 xa, 1 gần), do JS đặt để phóng to nhỏ theo chiều sâu */
	--sau: .5;
	transform: translate(-50%, -50%) scale(calc(.78 + var(--sau) * .4));
	transform-origin: center bottom;
}
.con-hinh {
	position: relative;
	font-size: clamp(40px, 4.2cqw, 62px);
	line-height: 1;
	display: block;
	filter: drop-shadow(0 6px 4px rgba(0,0,0,.26));
	/* thở nhẹ khi đứng yên cho có sinh khí */
	animation: san-tho 3.2s ease-in-out infinite;
}
@keyframes san-tho {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}
/* bóng đổ dưới chân cho con vật đứng thật trên cỏ */
.con-hinh::after {
	content: '';
	position: absolute; left: 50%; bottom: -2px;
	width: 68%; height: 20%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(0,0,0,.26), transparent 72%);
	border-radius: 50%;
	z-index: -1;
}
.con.con-quay .con-hinh { scale: -1 1; }

/* bước đi: nhún người và nghiêng qua lại như đang bước */
.con { --nhip: .46s; }
.con.con-buoc .con-hinh { animation: san-buoc var(--nhip) ease-in-out infinite; }
@keyframes san-buoc {
	0%, 100% { transform: translateY(0)    rotate(-5deg); }
	25%      { transform: translateY(-7px) rotate(0deg); }
	50%      { transform: translateY(0)    rotate(5deg); }
	75%      { transform: translateY(-7px) rotate(0deg); }
}
/* cúi xuống mổ/gặm thức ăn */
.con.con-an .con-hinh { animation: san-cui .55s ease-in-out infinite; }
@keyframes san-cui {
	0%, 100% { transform: translateY(0)   rotate(0deg); }
	50%      { transform: translateY(7px) rotate(14deg); }
}
/* ngoái nhìn quanh khi rảnh rỗi */
.con.con-ngo .con-hinh { animation: san-ngo 2.2s ease-in-out; }
@keyframes san-ngo {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-13deg); }
	65%      { transform: rotate(13deg); }
}
/* ngủ gà ngủ gật khi đói lả */
.con.con-ngu .con-hinh { animation: san-ngu 3.4s ease-in-out infinite; }
@keyframes san-ngu {
	0%, 100% { transform: rotate(-8deg) translateY(2px); }
	50%      { transform: rotate(-14deg) translateY(5px); }
}
/* bơi trong hồ: nhấp nhô theo sóng */
.con.con-boi .con-hinh { animation: san-boi 2.1s ease-in-out infinite; }
@keyframes san-boi {
	0%, 100% { transform: translateY(0)    rotate(-3deg); }
	50%      { transform: translateY(-5px) rotate(3deg); }
}
/* vệt nước quanh chân khi đang bơi */
.con.con-boi .con-hinh::after {
	width: 40px; height: 11px; bottom: -4px;
	background: radial-gradient(ellipse, rgba(255,255,255,.75), transparent 70%);
}

/* ---------- Chim đang bay ----------
   Đặt SAU các dáng đi, bơi, gặm cỏ để dáng bay luôn thắng: con chim đang lượn
   giữa trời mà vẫn nhấc chân bước thì nhìn buồn cười. Trên trời cũng không có
   gì để đổ bóng, nên bỏ luôn vệt bóng dưới chân. */
.con.con-bay .con-hinh { animation: san-bay 1s ease-in-out infinite; }
@keyframes san-bay {
	0%, 100% { transform: translateY(0)    rotate(-7deg) scaleY(1); }
	50%      { transform: translateY(-9px) rotate(7deg)  scaleY(.92); }
}
.con.con-bay .con-hinh::after { opacity: 0; }
/* Trên trời thì tên và thanh no mờ bớt cho khỏi che mất bầu trời.
   Vườn đông (.san-dong) thì tên đã bị giấu hết rồi, đừng lôi tên chim ra lại. */
#san-lop:not(.san-dong) .con.con-bay .con-ten,
#san-lop:not(.san-dong) .con.con-bay .con-no { opacity: .55; }

.con-ten {
	font-size: 11px;
	font-weight: 800;
	color: #26421c;
	background: #ffffff;
	border-radius: 999px;
	padding: 1px 8px;
	white-space: nowrap;
	max-width: 96px;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.con-no {
	display: block;
	width: 42px;
	height: 5px;
	border-radius: 999px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.con-no i {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #ffd36b, var(--cam));
	transition: width .5s ease;
}
.con-doi .con-no i { background: linear-gradient(90deg, #ff9d7a, var(--do)); }

/* con vật sắp bỏ đi: nhấp nháy cho bé thấy ngay */
.con-gap .con-hinh { animation: san-keu-cuu 1.2s ease-in-out infinite !important; }
@keyframes san-keu-cuu {
	0%, 100% { opacity: 1;   transform: scale(1)    rotate(-6deg); }
	50%      { opacity: .58; transform: scale(1.09) rotate(6deg); }
}

/* ---------- Bong bóng cảm xúc ---------- */
.con-bong {
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 16px;
	line-height: 1.1;
	white-space: nowrap;
	box-shadow: 0 3px 0 rgba(0,0,0,.13);
	pointer-events: none;
	z-index: 4;
	animation: san-bong-tho 2.8s ease-in-out infinite;
}
@keyframes san-bong-tho {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(-3px); }
}
.con-bong i {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 800;
	color: #4b3a2c;
}
.con-bong::after {
	content: '';
	position: absolute; top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #fff;
}
.con-bong-moi { animation: san-bong-hien .34s cubic-bezier(.2,1.5,.5,1) both; }
@keyframes san-bong-hien {
	from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.65); }
}
.con-gap .con-bong { background: var(--do); }
.con-gap .con-bong i { color: #fff; }
.con-gap .con-bong::after { border-top-color: var(--do); }

/* ---------- Đĩa thức ăn thả xuống bãi cỏ ---------- */
.san-mon {
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 30px;
	z-index: 3;
	filter: drop-shadow(0 4px 3px rgba(0,0,0,.22));
	animation: san-mon-roi .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes san-mon-roi {
	from { opacity: 0; transform: translate(-50%, -190%) scale(.4); }
}
.san-mon-het { animation: san-mon-het .42s ease-in both; }
@keyframes san-mon-het {
	to { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
	.san *, .con * { animation: none !important; }
	.con { transition: none !important; }
}

@media (max-width: 560px) {
	.con-hinh { font-size: 38px; }
}

/* ---------- Ao nước (khớp đúng hằng số AO trong game.js) ----------
   Chỉ là cái khung rỗng đặt đúng chỗ; hình cái ao do SVG bên trong vẽ.
   Trước đây vẽ cả bằng nền CSS lẫn SVG nên thành HAI cái ao chồng nhau. */
.san-ao {
	position: absolute;
	left: 8%; top: 59%; width: 32%; height: 18%;
	z-index: 1;
	pointer-events: none;
}
.san-ao svg { width: 100%; height: 100%; display: block; }

/* Dòng ghi công tác giả nhạc nền — giấy phép Creative Commons BY bắt buộc
   phải nêu tên tác giả ở nơi người dùng nhìn thấy được. */
.cong-ghi {
	margin: 14px 0 0; text-align: center;
	font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #9c8b7c;
}

/* ---------- Bài tập nâng cao ----------
   Thưởng gấp hai chục lần câu hỏi thường nên phải nhìn ra ngay là loại khác:
   thẻ môn có viền vàng và huy chương ở góc. */
.bt-goi {
	margin: 0 auto 12px; width: fit-content; max-width: 92%;
	text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.5;
	color: #6b5a4c; background: #ffffff;
	border-radius: 16px; padding: 8px 16px;
	box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
.the-mon.the-bt {
	position: relative;
	box-shadow: 0 0 0 3px var(--vang), 0 6px 0 rgba(0,0,0,.2), 0 12px 24px rgba(0,0,0,.16);
}
.the-mon.the-bt::after {
	content: '🏅'; position: absolute; top: 6px; right: 8px; font-size: 20px;
}

/* Dải nhãn trên đầu câu hỏi khi đang làm bài tập nâng cao */
.cau-nhan {
	display: inline-block; margin-right: 6px;
	background: var(--vang); color: #6b4708;
	border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 800;
}
#hoc-cau.la-baitap .the-cau { box-shadow: 0 0 0 3px var(--vang), var(--do-bong); }
#hoc-cau.la-baitap .cau-hoi { font-size: 20px; line-height: 1.45; }

/* ---------- Học theo sách giáo khoa ---------- */
.sgk-ngay {
	margin: 0 auto 10px; width: fit-content; max-width: 94%;
	text-align: center; font-size: 13.5px; font-weight: 800; line-height: 1.5;
	color: #4a5a3c; background: #ffffff;
	border-radius: 999px; padding: 7px 16px;
	box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
.sgk-chon {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0 0 12px; font-size: 14px; font-weight: 800; color: #fff;
	text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.sgk-chon select {
	border: 0; border-radius: 999px; padding: 7px 14px;
	font-family: inherit; font-size: 14px; font-weight: 800; color: var(--chu);
	background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.12); cursor: pointer;
}
/* Thẻ môn của phần sách: thêm tên bài và vạch tiến độ của tuần */
.the-mon.the-sgk { padding-bottom: 14px; }
.the-mon .sgk-bai {
	display: block; font-size: 12.5px; font-weight: 700; opacity: .95;
	margin-top: 2px; line-height: 1.35;
}
.the-mon .sgk-thanh {
	display: block; height: 7px; margin-top: 8px;
	border-radius: 999px; background: rgba(0,0,0,.22); overflow: hidden;
}
.the-mon .sgk-thanh u {
	display: block; height: 100%; border-radius: 999px; background: #fff;
	transition: width .5s ease;
}
.the-mon.sgk-xong::after { content: '✅'; position: absolute; top: 6px; right: 8px; font-size: 20px; }
.the-mon.the-sgk { position: relative; }
.cau-nhan.cau-sgk { background: #cfe9ff; color: #14507e; }

/* ---------- Khu chợ ---------- */
.the-kho { cursor: default; }
.the-kho:hover { transform: none; }
.kho-nut { display: grid; gap: 6px; margin-top: 8px; }
.kho-nut .nut-nho { width: 100%; padding: 8px 6px; font-size: 13px; }
.nut-nm { background: linear-gradient(180deg, #7ee08a, var(--xanhla)); color: #fff; box-shadow: 0 3px 0 #04834b; }
.nut-nm.thieu { background: #e5e0d6; color: #8a7a6c; box-shadow: 0 3px 0 #c4bdaf; }
.shop-co.cu1 { background: var(--cam); }
.shop-co.cu2 { background: var(--do); }
.shop-co.tuoi { background: var(--xanhla); }
.shop-co.toi { background: var(--tim); }
.the-sap .shop-co { max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.the-sap.cua-toi { outline: 3px solid var(--tim); }
.rao-nhan { display: grid; gap: 4px; font-size: 13.5px; font-weight: 700; color: #6b5a4c; }
.rao-tong { margin: 0; text-align: center; font-size: 16px; font-weight: 800; color: #17603c; }

/* Cuộc mặc cả: người mua đứng trên, hội thoại ở giữa, nút bấm dưới */
.phien {
	background: var(--trang); border-radius: 24px; padding: 14px;
	box-shadow: 0 6px 0 rgba(0,0,0,.13), 0 12px 24px rgba(0,0,0,.13);
	margin-bottom: 18px;
}
.phien-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.phien-nm { font-size: 44px; line-height: 1; }
.phien-dau > div { flex: 1; min-width: 140px; }
.phien-dau b { display: block; font-size: 17px; }
.phien-dau i { font-style: normal; font-size: 12.5px; color: #8a7a6c; font-weight: 700; }
.phien-mon {
	background: var(--vang); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 800;
	box-shadow: 0 3px 0 #d99e00;
}
.phien-log {
	display: grid; gap: 7px; max-height: 240px; overflow-y: auto; padding: 8px;
	background: #f4f7f2; border-radius: 16px; margin-bottom: 10px;
}
.noi { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.noi span { background: #fff; border-radius: 14px; padding: 7px 11px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.noi.be { flex-direction: row-reverse; text-align: right; }
.noi.be span { background: #e8f0ff; }
.phien-gia { text-align: center; font-size: 15.5px; font-weight: 700; margin: 4px 0 10px; }
.phien-gia .to { font-size: 21px; color: #17603c; }
.phien-gia small { display: block; font-size: 12.5px; color: #8a7a6c; margin-top: 2px; }
.phien-nut { display: grid; gap: 8px; }
.phien-nut .nut-to { width: 100%; padding: 12px; font-size: 15.5px; }
.phien-hai { grid-template-columns: 1fr 1fr; }
.nut-do { background: linear-gradient(180deg, #ff8fa8, var(--do)); box-shadow: 0 5px 0 #b3244f; }
.nut-do:active { box-shadow: 0 1px 0 #b3244f; }
/* Bong bóng "đang nhắn…": ba chấm nhấp nháy như ứng dụng nhắn tin */
.dang-nhan span { display: inline-flex; gap: 4px; padding: 11px 13px; }
.dang-nhan i {
	width: 7px; height: 7px; border-radius: 50%; background: #a0917f; display: block;
	animation: chamNhay 1s ease-in-out infinite;
}
.dang-nhan i:nth-child(2) { animation-delay: .2s; }
.dang-nhan i:nth-child(3) { animation-delay: .4s; }
@keyframes chamNhay { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.phien-nut .nut-nho { justify-self: center; }
.phien-xong { border-radius: 16px; padding: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.phien-xong.tot { background: #e8fbef; color: #17603c; }
.phien-xong.xau { background: #fff0f3; color: #9d1f42; }

/* ---------- Hướng dẫn chơi ---------- */
.hd-muc {
	background: var(--trang); border-radius: 20px; margin-bottom: 10px;
	box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.1);
}
.hd-muc summary {
	cursor: pointer; padding: 13px 16px; font-size: 16.5px; font-weight: 800; list-style: none;
	display: flex; align-items: center; gap: 10px;
}
.hd-muc summary::-webkit-details-marker { display: none; }
.hd-muc summary::after { content: '▾'; margin-left: auto; color: #a0917f; transition: transform .2s; }
.hd-muc[open] summary::after { transform: rotate(180deg); }
.hd-muc summary span { font-size: 24px; }
.hd-than { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.55; color: #4b4038; }
.hd-than p { margin: 0 0 9px; }
.hd-than ul { margin: 0 0 9px; padding-left: 20px; }
.hd-than li { margin-bottom: 4px; }
.hd-than b { color: var(--nau); }
.hd-bang { overflow-x: auto; margin: 0 0 10px; }
.hd-bang table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.hd-bang th, .hd-bang td { padding: 5px 8px; border-bottom: 2px solid #efe9de; text-align: left; white-space: nowrap; }
.hd-bang th { background: #fff6e4; }
.cong-nut-hd { width: 100%; margin-top: 12px; }
.cong-hd-khung { width: min(760px, 100%); align-self: start; }
.cong-hd-khung .tieu-de { text-align: center; }
.cong-hd-khung a, .hd-cuoi a { color: var(--tim); font-weight: 800; }
/* Trang hướng dẫn mở riêng (huongdan.php): cuộn bình thường, không có cảnh nền */
body.trang-hd-rieng { overflow: auto; background: var(--troi-duoi); }
.hd-rieng { width: min(760px, 100%); margin: 0 auto; padding: 18px 14px 40px; }
.hd-cuoi { text-align: center; font-size: 18px; margin-top: 20px; }

/* CHÍN nút ở thanh dưới phải vừa màn 375px — mỗi lần thêm tab (Chơi cờ, Đố quả,
   Kho, rồi Bạn bè) là chật thêm, nên bóp chữ và khoảng cách lại chứ không cho
   xuống hàng hay tràn ngang.
   Cỡ chữ thật nằm ở dep.css (nạp sau nên đè lên đây); tab nào tên dài thì có
   sẵn một TÊN NGẮN riêng cho màn nhỏ — xem mục 35 của dep.css. Cắt cụt bằng ba
   chấm chỉ là lưới đỡ cuối cùng: "Vườn t…" thì bé đọc ra cái gì? */
@media (max-width: 560px) {
	.thanh-duoi { gap: 2px; padding-left: 2px; padding-right: 2px; }
	.tab {
		min-width: 0; flex: 1; padding: 6px 1px; font-size: 9.5px; letter-spacing: -.3px;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.tab span { font-size: 19px; }
	.nut-ra { display: none; }   /* đăng xuất vẫn có trong hộp tài khoản */
}