/* VỞ BÀI TẬP TOÁN 1 (man/toan-muc-luc.js, toan-tiet.js, toan-lam.js + bai-tap/toan/*). Màu nhấn do data-mon="toan" (xanh dương) đặt --nhan… trong app.css.
   Luật cứng như app.css: không viền, hex chỉ ở :root, rgba(var(--x-rgb), a), chữ ≥ 20px qua --cs-*, không đỏ, Chromium 83 (không gap trong flex, aspect-ratio, inset…). Màn làm bài dùng lại lớp .ta-bai-* của bai-tap.css. */

/* ---------- MỤC LỤC: 5 chủ đề, mỗi chủ đề một hàng thẻ bài */
.toan-mucluc { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .4rem 1.2rem 2.4rem; }
.toan-chu-de { display: flex; align-items: center; margin: 1rem 0 .6rem; }
.toan-chu-de .chip { margin-right: .9rem; }
.toan-cd-ten { font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); line-height: 1.15; color: var(--chu); }
.toan-hang-bai { display: flex; flex-wrap: wrap; }
.toan-o-bai { position: relative; flex: none; width: calc(25% - 1rem); margin: 0 .5rem .8rem; padding: .7rem 1rem .8rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border-radius: var(--bo-the); background: var(--the); box-shadow: var(--bong); transition: transform var(--t-vua) var(--ease-nay); }
.toan-o-bai:active, .toan-o-bai.dang-bam { transform: scale(.96); }
.toan-o-bai.hien-tai { background: var(--nhan-nhat); box-shadow: 0 0 0 .35rem var(--nhan-mo), var(--bong); }
.toan-o-bai.sap-co { opacity: .5; }
.toan-ob-so { font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-40); line-height: 1; color: var(--nhan); }
.toan-ob-ten { margin-top: .1rem; min-height: 2.5em; font-size: var(--cs-20); line-height: 1.2; color: var(--chu); }
.toan-ob-tien { width: 100%; height: .6rem; margin-top: .4rem; border-radius: var(--bo-vien); background: var(--nhan-nhat); overflow: hidden; }
.toan-o-bai.hien-tai .toan-ob-tien { background: var(--the); }
.toan-ob-tien-day { display: block; height: 100%; width: calc(var(--tien, 0) * 100%); border-radius: var(--bo-vien); background: var(--nhan); }
.toan-ob-sap { margin-top: .4rem; font-size: var(--cs-20); color: var(--chu-phu); }
.toan-ob-sao { position: absolute; right: .9rem; top: .8rem; display: inline-flex; align-items: center; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); color: var(--chu); }
.toan-ob-sao .bt { margin-right: .3rem; }

/* ---------- TRANG CÁC TIẾT của một bài */
.toan-tiet-the { height: 100%; display: flex; flex-direction: column; padding: 1.4rem 1.8rem 1.2rem; }
.toan-bai-dau { display: flex; align-items: center; flex: none; }
.toan-bai-dau .chip { margin-right: 1rem; }
.toan-bai-ten { font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-32); line-height: 1.1; color: var(--chu); }
.toan-ds-tiet { flex: 1; min-height: 0; overflow-y: auto; padding-top: .8rem; }
.toan-tiet { margin-bottom: 1rem; padding: .8rem 1.2rem 1rem; border-radius: var(--bo-the); background: var(--the); box-shadow: var(--bong); }
.toan-tiet.xong { background: var(--nhan-nhat); }
.toan-tiet.vua-xong { box-shadow: 0 0 0 .35rem var(--nhan-mo-2), var(--bong); animation: nay .5s var(--ease-nay); }
.toan-tiet-nhan { display: flex; align-items: center; justify-content: space-between; }
.toan-tiet-ten { font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-28); color: var(--nhan); }
.toan-tiet-sao { display: inline-flex; align-items: center; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); color: var(--chu); }
.toan-tiet-sao .bt { margin-right: .3rem; }
.toan-chuoi { display: flex; flex-wrap: wrap; margin-top: .4rem; }
.toan-nut-bt { flex: none; margin: .3rem .9rem .3rem 0; display: flex; flex-direction: column; align-items: center; }
.toan-nbt-vong { width: max(64px, 4.2rem); height: max(64px, 4.2rem); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nhan-nhat); color: var(--nhan); font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-32); }
.toan-nut-bt.xong .toan-nbt-vong { background: var(--nhan-mo-2); }
.toan-nut-bt.xong .toan-nbt-vong .bt { color: var(--mint); }
.toan-nut-bt.hien-tai .toan-nbt-vong { background: var(--nhan); color: var(--the); box-shadow: 0 0 0 .4rem var(--nhan-mo-2), var(--bong-nut); animation: nhap-nhay-nho 1.6s ease-in-out infinite; }
.toan-nbt-sao { min-height: 1.3rem; display: flex; }
.toan-tiet-chan { flex: none; display: flex; align-items: center; padding-top: .6rem; }
.toan-mung { margin-right: 1.4rem; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); line-height: 1.2; color: var(--nhan); }

/* ---------- MÀN LÀM BÀI: sân (trang vở phóng to) chiếm cả chiều cao bên trái; cột phải = linh vật + bàn phím số + nút.
   Bàn phím nằm TRONG cột phải (không còn dải đáy ăn chiều cao của sân), 4 cột × 3 hàng (0–3 / 4–7 / 8–10) hoặc ba nút dấu. */
.man-toan-lam .ta-bai-than { min-height: 0; }
.man-toan-lam .ta-bai-trai { padding: .5rem; margin-right: .9rem; }
.man-toan-lam .ta-bai-phai { flex: 0 0 27%; }
.man-toan-lam .ta-bai-phai > .vung-lv { min-height: 13rem; }
.man-toan-lam .ta-hang-nut { padding-top: .5rem; }
.toan-phim { flex: none; display: none; flex-wrap: wrap; align-content: flex-start; padding: .4rem .3rem .1rem; border-radius: var(--bo-the); background: var(--the); box-shadow: var(--bong); margin-top: .5rem; }
.toan-phim.mo { display: flex; animation: bt-ts-hien .22s ease-out; }
.toan-phim.khoa { opacity: .5; pointer-events: none; }
.toan-phim-nut { flex: 0 0 calc(25% - .4rem); width: calc(25% - .4rem); min-width: 0; height: 66px; margin: 0 .2rem .3rem; border-radius: var(--bo-vien); background: var(--nhan-nhat); color: var(--nhan); font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-28); line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform var(--t-nhanh), background var(--t-nhanh); }
.toan-phim-nut.dang-bam { transform: scale(.92); background: var(--nhan-ep); }
.toan-phim.p-dau .toan-phim-nut, .toan-phim.p-phep .toan-phim-nut { flex-basis: calc(33.333% - .4rem); width: calc(33.333% - .4rem); font-size: var(--cs-48); }
.bt-khoa { pointer-events: none; }
.toan-nut-goi-y { color: var(--nhan); }
/* nút "Bài tiếp / Về tiết" (xuất hiện khi làm xong): góc DƯỚI TRÁI của sân — như sách Tiếng Việt (Tiếp bên trái, hỗ trợ bên phải) */
.man-toan-lam .ta-bai-trai { position: relative; }
.toan-nut-tiep-trai { position: absolute; left: 1rem; bottom: 1rem; z-index: 6; }
/* màn dọc: sân to ở trên; cột phải thành hàng dưới (linh vật + bàn phím 6 cột × 2 hàng + nút) */
@media (orientation: portrait) {
  .toan-o-bai { width: calc(50% - 1rem); }
  .man-toan-lam .ta-bai-trai { margin-right: 0; margin-bottom: .8rem; }
  .man-toan-lam .ta-bai-phai { flex: 0 0 auto; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .man-toan-lam .ta-bai-phai > .vung-lv { flex: none; height: 9rem; }
  .toan-phim-nut { flex-basis: calc(16.666% - .4rem); width: calc(16.666% - .4rem); height: 60px; }
}

/* ---------- BÁO CÁO: kỹ năng */
.toan-kn { padding: .8rem 1.2rem; }
.toan-kn-hang { display: flex; align-items: center; padding: .35rem 0; }
.toan-kn-ten { flex: none; width: 9rem; font-size: var(--cs-20); color: var(--chu); }
.toan-kn-hang .kq-thanh-ngoai { flex: 1; min-width: 0; margin: 0 1rem; }
.toan-kn-so { flex: none; min-width: 3.4rem; text-align: right; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); color: var(--nhan); }
.toan-nen-on { display: flex; align-items: center; margin-top: .6rem; padding: .8rem 1.2rem; font-size: var(--cs-20); line-height: 1.3; color: var(--chu); background: var(--nhan-nhat); }
.toan-nen-on > span:first-child { flex: none; margin-right: .8rem; color: var(--nhan); }
.toan-nen-on.tot > span:first-child { color: var(--mint); }

/* bóng thoại của linh vật ở sách Toán gọn hơn: cột phải hẹp + bàn phím nên bóng không được tràn lên thanh trên */
html[data-mon="toan"] #lop-lv .bong-thoai { font-size: 21px; line-height: 1.28; padding: .65rem 1.1rem .65rem .9rem; }
html[data-mon="toan"] #lop-lv .bong-thoai .bt-loa { width: 2.6rem; height: 2.6rem; min-width: 0; margin-right: .6rem; }

.toan-bai-dau .toan-nut-lam-tiep { margin-left: auto; min-height: 0; height: max(64px, 3.4rem); padding: 0 1.6rem; }
.toan-bai-ten { min-width: 0; }

.toan-nut-nghe { display: flex; align-items: center; margin-right: auto; padding: 0 1.3rem 0 1rem; height: 64px; border-radius: var(--bo-vien); background: var(--nhan-nhat); color: var(--nhan); font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-24); }
.toan-nut-nghe .bt { margin-right: .5rem; }
html[data-san-khau="ngang"] .man.man-toan-lam .toan-nut-nghe { margin-right: 0; }