/* SÁCH BÀI TẬP TIẾNG ANH (man/ta-muc-luc.js, ta-unit.js, ta-bai.js + bai-tap/*). Màu nhấn do data-mon="ta" (xanh ngọc) đặ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ỤC LỤC: lưới 16 Unit
   --------------------------------------------------------------------------------------------------------------------- */
.ta-luoi-unit { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; overflow-x: hidden; padding: .3rem .2rem 2rem; }
.ta-o-unit { position: relative; flex: none; width: calc(25% - 1rem); margin: 0 .5rem .7rem; 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); }
.ta-o-unit:active, .ta-o-unit.dang-bam { transform: scale(.96); }
.ta-o-unit.hien-tai { background: var(--nhan-nhat); box-shadow: 0 0 0 .35rem var(--nhan-mo), var(--bong); }
.ta-un-so { font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-40); line-height: 1; color: var(--nhan); }
.ta-un-ten { margin-top: .1rem; min-height: 2.3em; font-size: var(--cs-20); line-height: 1.15; color: var(--chu); }
.ta-un-tien { width: 100%; height: .6rem; margin-top: .4rem; border-radius: var(--bo-vien); background: var(--nhan-nhat); overflow: hidden; }
.ta-o-unit.hien-tai .ta-un-tien { background: var(--the); }
.ta-un-tien-day { display: block; height: 100%; width: calc(var(--tien, 0) * 100%); border-radius: var(--bo-vien); background: var(--nhan); }
.ta-un-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); }
.ta-un-sao .bt { margin-right: .3rem; }
.ta-trong { margin: 2rem auto; font-size: var(--cs-28); color: var(--chu-phu); text-align: center; }

/* ---------------------------------------------------------------------------------------------------------------------
   TRANG UNIT: đường đi 7 bài
   --------------------------------------------------------------------------------------------------------------------- */
.ta-unit-the { height: 100%; display: flex; flex-direction: column; padding: 1.6rem 1.8rem 1.4rem; }
.ta-unit-dau { display: flex; align-items: center; flex: none; }
.ta-unit-dau .chip { margin-right: 1rem; }
.ta-unit-ten { font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-40); line-height: 1.1; color: var(--chu); }
.ta-duong { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; }
.ta-duong::before { content: ""; position: absolute; left: 3rem; right: 3rem; top: 50%; height: .5rem; margin-top: -2.4rem; border-radius: var(--bo-vien); background: var(--nhan-nhat); }
.ta-nut-bai { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }   /* 7 bài chia đều bề rộng thẻ: không bao giờ tràn ra khỏi khung */
.ta-nb-vong { width: min(5rem, 6.2vw); height: min(5rem, 6.2vw); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--the); color: var(--nhan); font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-32); box-shadow: var(--bong); }
.ta-nut-bai.xong .ta-nb-vong { background: var(--nhan-nhat); }
.ta-nut-bai.xong .ta-nb-vong .bt { color: var(--mint); }
.ta-nut-bai.hien-tai .ta-nb-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; }
.ta-nb-nhan { margin-top: .5rem; max-width: 100%; font-size: var(--cs-20); line-height: 1.2; text-align: center; color: var(--chu-phu); overflow-wrap: break-word; }
.ta-nut-bai.hien-tai .ta-nb-nhan { color: var(--nhan); font-weight: 700; }
.ta-nb-sao { min-height: 1.6rem; margin-top: .2rem; display: flex; }
.ta-unit-chan { flex: none; display: flex; align-items: center; }
.ta-nut-tiep { flex: none; }
.ta-nhac { margin-left: 1.4rem; font-size: var(--cs-20); line-height: 1.3; color: var(--chu-phu); }

/* ---------------------------------------------------------------------------------------------------------------------
   MÀN LÀM BÀI: sân bên trái, câu lệnh + linh vật + nút bên phải
   --------------------------------------------------------------------------------------------------------------------- */
.ta-cham-tien { display: flex; align-items: center; padding: .6rem 1rem; border-radius: var(--bo-vien); background: var(--the); box-shadow: var(--bong); }
.ta-cham { width: .9rem; height: .9rem; border-radius: 50%; background: var(--nhan-ep); }
.ta-cham + .ta-cham { margin-left: .6rem; }
.ta-cham.xong { background: var(--nhan); }
.ta-cham.hien { width: 2.2rem; border-radius: var(--bo-vien); background: var(--nhan); }
.ta-bai-than { flex: 1; min-height: 0; display: flex; }
.ta-bai-trai { flex: 1 1 0; min-width: 0; min-height: 0; margin-right: 1.2rem; padding: 1rem; display: flex; border-radius: var(--bo-the); background: var(--the); box-shadow: var(--bong); }
.ta-bai-phai { flex: 0 0 31%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ta-bai-phai > .vung-lv { flex: 1; min-height: 0; }
.ta-hang-nut { flex: none; display: flex; align-items: center; justify-content: flex-end; padding-top: .8rem; }
.ta-hang-nut > * + * { margin-left: 1rem; }
.ta-nut-tiep.nhap-nhay { animation: nhap-nhay 1.4s ease-in-out infinite; }

/* MÀN DỌC: sân to chiếm gần cả chiều rộng ở trên; dưới là vùng linh vật (bóng thoại = câu hướng dẫn) rộng hết bề ngang, hàng nút nằm dưới cùng */
@media (orientation: portrait) {
  .ta-bai-than { flex-direction: column; }
  .ta-bai-trai { flex: 1 1 0; margin-right: 0; margin-bottom: 1rem; }
  .ta-bai-phai { flex: 0 0 auto; height: 30%; min-height: 16rem; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ta-bai-phai > .vung-lv { grid-column: 1; grid-row: 1; }
  .ta-bai-phai > .ta-hang-nut { grid-column: 1; grid-row: 2; justify-content: flex-end; padding-top: .6rem; }
  .ta-unit-the { padding: 1.4rem 1.2rem 1.2rem; }
  .ta-nb-vong { width: min(5rem, 10vw); height: min(5rem, 10vw); }
}

/* Sân: trang sách phóng to + lớp phủ */
.bt-san { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bt-san-trang { position: relative; flex: none; overflow: hidden; border-radius: var(--bo-trang); background: var(--giay); }
.bt-anh { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.bt-phu { position: absolute; left: 0; top: 0; right: 0; bottom: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.bt-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; }
.bt-tam { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); }
/* Phản hồi: nở dấu sáng khi đúng, rung nhẹ khi sai (không đỏ, không chữ tiêu cực), gợi ý nhấp nháy */
.bt-no { position: absolute; border-radius: var(--bo-trang); pointer-events: none; animation: bt-no .9s ease-out forwards; }
.bt-no.dung { background: rgba(var(--nhan-rgb), .28); }
.bt-no.sai { background: rgba(var(--chu-rgb), .12); }
.bt-rung { position: absolute; pointer-events: none; animation: bt-rung .45s ease-in-out; }
.bt-goi-y { position: absolute; border-radius: var(--bo-trang); pointer-events: none; background: rgba(var(--vang-rgb), .45); animation: nhap-nhay 1s ease-in-out infinite; }
@keyframes bt-no { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes bt-rung { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.4rem); } 75% { transform: translateX(.4rem); } }
/* Mừng xong bài: thẻ nổi giữa sân với hàng sao ĐÃ ĐẠT (không sao rỗng) */
.ta-chuc-mung-lop { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }   /* canh giữa bằng flex (không dùng transform: hoạt hoạ `nay` ghi đè transform làm thẻ lệch sang bên) */
.ta-chuc-mung { flex: none; max-width: 90%; padding: 1.6rem 2.6rem; border-radius: var(--bo-the); background: var(--the); box-shadow: var(--bong-hop); text-align: center; animation: nay .5s var(--ease-nay); transition: opacity .35s; }
.ta-chuc-mung.lui { opacity: 0; }
.ta-cm-chu { font-family: var(--ff-nut); font-weight: 800; font-size: var(--cs-56); line-height: 1.1; color: var(--nhan); }
.ta-cm-sao { display: flex; justify-content: center; margin-top: .6rem; }

/* hộp quà + đồng hồ đếm ở thanh trên các màn Tiếng Anh (cùng kiểu .vong-qua của sách Tiếng Việt) */
.ta-qua { display: flex; align-items: center; }
.ta-qua .dem-gio { margin-left: .5rem; }
@media (max-width: 900px) { .ta-qua .dem-gio { display: none; } }   /* máy đặt dọc: thanh trên hẹp, chỉ giữ vòng quà */