/* ============================================================================================================================
   BÉ ĐỌC VUI — HỆ GIAO DIỆN. Danh mục lớp + ví dụ HTML: app/css/CAC-LOP.md (sửa tên lớp ở đây thì sửa tệp đó).
   Nguồn thiết kế: thiet-ke/DESIGN.md + 13 màn Stitch. Chuẩn 1280×800 ngang; chạy 960×540 → 2000×1200 và màn dọc.
   Luật cứng: Chromium 83 (không gap trong flex, aspect-ratio, inset, :is/:where/:has, dvh, translate:/rotate:/scale: riêng, @layer…),
   không viền, chữ ≥ 20px, chạm ≥ 80px, không màu đỏ. Màu hex CHỈ nằm ở :root; nơi khác dùng biến.
   ============================================================================================================================ */
@import url(fonts.css);

/* ---------------------------------------------------------------------------------------------------------------------
   1. TOKEN
   --------------------------------------------------------------------------------------------------------------------- */
:root {
  /* Màu — chỉ giao diện sáng (trẻ em, một chế độ) */
  --nhan: #6C42EC;          /* tím thương hiệu: nút chính, trạng thái chọn, vòng mic */
  --nhan-nhat: #EDE8FF;     /* tím nhạt: vùng nhấn nhẹ, huy hiệu */
  --nhan-dam: #4527B8;      /* tím đậm: đang bấm, chữ nhấn */
  --oai-huong: #EFEAFF;     /* nền nút phụ, viên chip */
  --nhan-ep: #DCD2FF;       /* nút phụ khi đang bấm, cột % thường */
  --nen: #F4F1FF;           /* nền màn */
  --nen-sang: #FAF8FF;      /* vệt sáng rất nhẹ ở đỉnh màn */
  --the: #FFFFFF;           /* thẻ trắng */
  --giay: #FFFDF7;          /* giấy ấm sau trang sách */
  --chu: #2A2255;           /* mực: chữ chính */
  --chu-phu: #6F6A93;       /* chữ phụ */
  --vang: #FFC83D;          /* vàng thưởng: CHỈ sao, hộp quà, hoa giấy */
  --vang-nhat: #FFF0C2;     /* nền vòng tiến độ quà */
  --mint: #2FC795;          /* xanh "nghe tốt": CHỈ dấu tích nhỏ */
  /* Bảng học: bảng xanh viết phấn / bảng trắng viết bút lông xanh (như lớp học) */
  --bang-xanh: #2E6B52;
  --bang-xanh-toi: #245641;
  --phan: #F7F6EE;
  --go: #A47B53;
  --bang-trang: #FBFBF8;
  --nhom: #C9CDD6;
  --muc-xanh: #1F4FD1;
  /* Trong suốt (không dùng color-mix) */
  --nhan-mo: rgba(var(--nhan-rgb), .16);
  --nhan-mo-2: rgba(var(--nhan-rgb), .28);
  --goc-net: rgba(var(--nhan-rgb), .6);
  --lop-mo: rgba(var(--chu-rgb), .52);
  --kinh: rgba(var(--kinh-rgb), .8);
  /* Bộ RGB để viết màu trong suốt: rgba(var(--nhan-rgb), .2). KHÔNG viết rgba(số…) trực tiếp ngoài :root. */
  --nhan-rgb: 108, 66, 236;
  --nhan-dam-rgb: 69, 39, 184;
  --chu-rgb: 42, 34, 85;
  --vang-rgb: 255, 200, 61;
  --muc-rgb: 31, 79, 209;
  --phan-rgb: 247, 246, 238;
  --kinh-rgb: 244, 241, 255;
  --oai-rgb: 240, 233, 255;
  --trang-rgb: 255, 255, 255;
  --den-rgb: 0, 0, 0;
  /* Màu theo môn (tính cùng độ chói: chữ trắng trên màu đậm ≥ 5,1:1; xem thiet-ke/thuong-hieu/NGHIEN-CUU.md §2.2). Mỗi môn LUÔN kèm biểu tượng riêng. */
  --mon-tv: #6C42EC; --mon-tv-nhat: #EDE8FF; --mon-tv-dam: #4527B8; --mon-tv-rgb: 108, 66, 236;   /* Tiếng Việt */
  --mon-ta: #007C6D; --mon-ta-nhat: #D1F6EE; --mon-ta-dam: #00594E; --mon-ta-ep: #C2E4DD; --mon-ta-rgb: 0, 124, 109;   /* Tiếng Anh */
  --mon-toan: #27759D; --mon-toan-nhat: #D4F2FF; --mon-toan-dam: #1C5471; --mon-toan-ep: #C5E1ED; --mon-toan-rgb: 39, 117, 157;   /* Toán */
  --mon-tnxh: #1F7E3F; --mon-tnxh-nhat: #DBF5DF; --mon-tnxh-dam: #165A2D; --mon-tnxh-ep: #CBE3CF; --mon-tnxh-rgb: 31, 126, 63;   /* Tự nhiên và Xã hội */
  --mon-dd: #C4366C; --mon-dd-nhat: #FFE2EB; --mon-dd-dam: #8D264D; --mon-dd-ep: #EDD2DA; --mon-dd-rgb: 196, 54, 108;   /* Đạo đức */
  --mon-an: #CB1895; --mon-an-nhat: #FFE3F3; --mon-an-dam: #92116B; --mon-an-ep: #EDD3E1; --mon-an-rgb: 203, 24, 149;   /* Âm nhạc */
  --mon-mt: #C14500; --mon-mt-nhat: #FFE5D9; --mon-mt-dam: #8A3100; --mon-mt-ep: #EDD4C9; --mon-mt-rgb: 193, 69, 0;   /* Mĩ thuật */
  /* Chuyển động & lớp: dùng thay cho số viết trần */
  --t-nhanh: .12s; --t-vua: .22s; --t-cham: .5s;
  --z-man: 0; --z-thanh: 5; --z-lv: 20; --z-lop-mo: 50; --z-hop: 60; --z-am: 85; --z-bay: 90;
  /* Hình khối */
  --bo-nut: 28px;
  --bo-the: 32px;
  --bo-bong: 36px;
  --bo-trang: 20px;
  --bo-vien: 999px;
  --bong: 0 8px 24px rgba(var(--nhan-dam-rgb), .12);
  --bong-nut: 0 10px 24px rgba(var(--nhan-rgb), .34);
  --bong-hop: 0 18px 48px rgba(var(--chu-rgb), .24);
  /* Phông */
  --ff-chu: 'Andika', 'Segoe UI', Roboto, 'Noto Sans', sans-serif;      /* chữ đọc: chữ cái, vần, từ, câu */
  --ff-nut: 'Baloo 2', 'Andika', 'Segoe UI', Roboto, sans-serif;        /* nút, tiêu đề, số */
  /* Cỡ chữ: tên = px ở 1280×800, co theo rem nhưng KHÔNG BAO GIỜ dưới 20px */
  --cs-20: max(20px, 1rem);
  --cs-24: max(20px, 1.2rem);
  --cs-28: max(20px, 1.4rem);
  --cs-32: max(22px, 1.6rem);
  --cs-40: max(26px, 2rem);
  --cs-48: max(32px, 2.4rem);
  --cs-56: max(36px, 2.8rem);
  --cs-72: max(40px, 3.6rem);
  --cs-84: max(48px, 4.2rem);
  --cs-160: max(80px, 8rem);
  /* Kích thước chạm & bố cục */
  --m: 2rem;                          /* lề ngoài 40px */
  --tt-cao: max(72px, 3.6rem);        /* thanh trên + nút tròn thanh trên */
  --co-cham: max(80px, 4rem);         /* mục tiêu chạm tối thiểu */
  --nut-cao: max(96px, 4.8rem);       /* nút chính */
  --ease-nay: cubic-bezier(.34, 1.56, .64, 1);
}

/* Một cuốn sách đặt data-mon="ta" (… hoặc toan, tnxh, dd, an, mt) trên gốc màn: mọi nút chính, quầng chạm, vòng mic đổi sang màu môn.
   Tiếng Việt là mặc định (không cần thuộc tính). Kệ sách và Góc ba mẹ KHÔNG đặt → luôn tím thương hiệu. */
[data-mon="ta"] {
  --nhan: var(--mon-ta); --nhan-nhat: var(--mon-ta-nhat); --nhan-dam: var(--mon-ta-dam); --nhan-rgb: var(--mon-ta-rgb);
  --oai-huong: var(--mon-ta-nhat); --nhan-ep: var(--mon-ta-ep);
  --nhan-mo: rgba(var(--mon-ta-rgb), .16); --nhan-mo-2: rgba(var(--mon-ta-rgb), .28); --goc-net: rgba(var(--mon-ta-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-ta-rgb), .34);
}
[data-mon="toan"] {
  --nhan: var(--mon-toan); --nhan-nhat: var(--mon-toan-nhat); --nhan-dam: var(--mon-toan-dam); --nhan-rgb: var(--mon-toan-rgb);
  --oai-huong: var(--mon-toan-nhat); --nhan-ep: var(--mon-toan-ep);
  --nhan-mo: rgba(var(--mon-toan-rgb), .16); --nhan-mo-2: rgba(var(--mon-toan-rgb), .28); --goc-net: rgba(var(--mon-toan-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-toan-rgb), .34);
}
[data-mon="tnxh"] {
  --nhan: var(--mon-tnxh); --nhan-nhat: var(--mon-tnxh-nhat); --nhan-dam: var(--mon-tnxh-dam); --nhan-rgb: var(--mon-tnxh-rgb);
  --oai-huong: var(--mon-tnxh-nhat); --nhan-ep: var(--mon-tnxh-ep);
  --nhan-mo: rgba(var(--mon-tnxh-rgb), .16); --nhan-mo-2: rgba(var(--mon-tnxh-rgb), .28); --goc-net: rgba(var(--mon-tnxh-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-tnxh-rgb), .34);
}
[data-mon="dd"] {
  --nhan: var(--mon-dd); --nhan-nhat: var(--mon-dd-nhat); --nhan-dam: var(--mon-dd-dam); --nhan-rgb: var(--mon-dd-rgb);
  --oai-huong: var(--mon-dd-nhat); --nhan-ep: var(--mon-dd-ep);
  --nhan-mo: rgba(var(--mon-dd-rgb), .16); --nhan-mo-2: rgba(var(--mon-dd-rgb), .28); --goc-net: rgba(var(--mon-dd-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-dd-rgb), .34);
}
[data-mon="an"] {
  --nhan: var(--mon-an); --nhan-nhat: var(--mon-an-nhat); --nhan-dam: var(--mon-an-dam); --nhan-rgb: var(--mon-an-rgb);
  --oai-huong: var(--mon-an-nhat); --nhan-ep: var(--mon-an-ep);
  --nhan-mo: rgba(var(--mon-an-rgb), .16); --nhan-mo-2: rgba(var(--mon-an-rgb), .28); --goc-net: rgba(var(--mon-an-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-an-rgb), .34);
}
[data-mon="mt"] {
  --nhan: var(--mon-mt); --nhan-nhat: var(--mon-mt-nhat); --nhan-dam: var(--mon-mt-dam); --nhan-rgb: var(--mon-mt-rgb);
  --oai-huong: var(--mon-mt-nhat); --nhan-ep: var(--mon-mt-ep);
  --nhan-mo: rgba(var(--mon-mt-rgb), .16); --nhan-mo-2: rgba(var(--mon-mt-rgb), .28); --goc-net: rgba(var(--mon-mt-rgb), .6);
  --bong-nut: 0 10px 24px rgba(var(--mon-mt-rgb), .34);
}

/* ---------------------------------------------------------------------------------------------------------------------
   2. NỀN TẢNG
   --------------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }

/* Nền ngoài vùng an toàn (hai bên tai thỏ, thanh Home): cùng dải chuyển sắc với .man để không thấy đường tách.
   Dùng ::before của <html> (cùng hệ toạ độ đã thu nhỏ của sân khấu ảo), không dùng nền gốc của canvas vì canvas không bị transform. */
html::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  background-color: var(--nen);
  background-image: linear-gradient(180deg, var(--nen-sang) 0, var(--nen) 42%);
}
/* Điện thoại: <body> bị đẩy vào trong bởi vùng an toàn nên .man ngắn hơn khung; căn dải chuyển sắc của .man theo CẢ khung (--vh, --sk-t do san-khau.js đặt). */
html[data-san-khau] .man {
  background-size: 100% calc(var(--vh) * 100);
  background-position: 0 calc(var(--sk-t, 0px) * -1);
  background-repeat: no-repeat;
}

/* 1rem = 20px ở 1280×800. Co theo cạnh NGẮN hơn của cửa sổ để khung 64×40 rem luôn lọt, sàn 14px để màn dọc nhỏ không teo. */
html { font-size: clamp(14px, min(1.5625vw, 2.5vh), 36px); -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--ff-chu);
  font-size: var(--cs-20);
  line-height: 1.4;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

button {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; touch-action: manipulation; outline: 0;
}
button:focus, input:focus { outline: 0; }

input {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
  -webkit-user-select: text; user-select: text;
  outline: 0;
}

img { -webkit-user-drag: none; }

/* Biểu tượng SVG từ bt(): không chặn chạm của nút cha */
.bt { display: inline-block; flex: none; vertical-align: middle; pointer-events: none; }

/* ---------------------------------------------------------------------------------------------------------------------
   3. TIỆN ÍCH BỐ CỤC (flex `gap` không có ở Chromium < 84 → dùng margin; --k = khoảng cách)
   --------------------------------------------------------------------------------------------------------------------- */
.an { display: none !important; }
.giua { text-align: center; margin-left: auto; margin-right: auto; align-self: center; }

.dong { display: flex; align-items: center; }
.dong > * + * { margin-left: var(--k, 1rem); }
.cot { display: flex; flex-direction: column; min-height: 0; }
.cot > * + * { margin-top: var(--k, 1rem); }
.co-gian { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* Dải cuộn ngang bằng ngón tay, bắt dính từng phần tử (chọn linh vật, dải trang…) */
.cuon-ngang {
  display: flex; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.cuon-ngang::-webkit-scrollbar { display: none; }
/* Khung nội dung cuộn dọc (màn thấp như 960×540 mà nhiều hàng, vd. Góc ba mẹ). Không dùng justify-content: center ở đây — nội dung dài sẽ tràn mất đầu. */
.cuon-doc { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.cuon-doc::-webkit-scrollbar { display: none; }
.noi-dung.cuon-doc { justify-content: flex-start; }
.cuon-ngang > * { flex: none; scroll-snap-align: center; }
.cuon-ngang > * + * { margin-left: var(--k, 1rem); }

/* ---------------------------------------------------------------------------------------------------------------------
   4. HOẠT HÌNH (chỉ transform/opacity để GPU yếu vẫn mượt)
   --------------------------------------------------------------------------------------------------------------------- */
@keyframes nhap-nhay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }                  /* gợi ý bấm vào đây */
@keyframes nay {                                                                                             /* nảy lên, tiếp đất bẹp nhẹ */
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-.9rem) scale(.97, 1.04); }
  55% { transform: translateY(0) scale(1.05, .94); }
  75% { transform: translateY(-.25rem) scale(1, 1); }
}
@keyframes gon-song { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }  /* vòng gợn lan ra */
@keyframes bat-ra {                                                                                           /* bật ra: dùng một lần, giữ trạng thái cuối */
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.28) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes nhap-nhay-nho { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }                                   /* chỉ báo đang đọc: chớp nhẹ */
@keyframes xoay-nhe { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }              /* lắc lư nhẹ */
@keyframes hien-dan { from { opacity: 0; } to { opacity: 1; } }
@keyframes truot-len { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes quang-nhap-nhay { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }

.nhap-nhay { animation: nhap-nhay 1.5s ease-in-out infinite; }
.nhap-nhay.dang-bam { animation: none; }

/* ---------------------------------------------------------------------------------------------------------------------
   5. MÀN + BỐ CỤC HAI VÙNG
   --------------------------------------------------------------------------------------------------------------------- */
.man {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 0;                                   /* ngữ cảnh xếp lớp riêng: lớp linh vật toàn cục (#lop-lv, z-index 20) luôn nổi trên mọi thứ trong màn, kể cả .lop-mo */
  display: flex; flex-direction: column;
  padding: 1.4rem var(--m) var(--m);
  overflow: hidden;
  background-color: var(--nen);
  background-image: linear-gradient(180deg, var(--nen-sang) 0, var(--nen) 42%);
  animation: hien-dan .22s ease-out both;
}

.man-luoi {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 1.6rem var(--m);
}
.man-luoi > * { min-width: 0; min-height: 0; }

.noi-dung { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }

.vung-lv {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-width: 0; min-height: 0;
}
.vung-lv > .bong-thoai { flex: none; align-self: stretch; margin-bottom: 1.4rem; }
.lv-san { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.lv-san::before {                                    /* bóng đổ dưới chân linh vật */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 1%; height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--nhan-dam-rgb), .2), rgba(var(--nhan-dam-rgb), 0));
}
/* Canvas linh vật (loi-3d.js đặt class nha-cv và kích thước px cố định): cho co lại vừa vùng, không méo */
.vung-lv .nha-cv, .lv-san .nha-cv { position: relative; display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.lv-nho {
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: max(72px, 3.6rem); height: max(72px, 3.6rem);
  border-radius: 50%; background: var(--the); box-shadow: var(--bong);
}
.lv-nho .nha-cv { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------------------------------------------------
   6. THANH TRÊN
   --------------------------------------------------------------------------------------------------------------------- */
.thanh-tren { flex: none; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: var(--tt-cao); margin-bottom: 1rem; }
/* Viết nhanh: đúng BA con trực tiếp (trái · giữa · phải, con phải có thể là <span> rỗng) → con giữa luôn nằm chính giữa thanh dù hai bên rộng khác nhau.
   Cách có nhóm .tt-trai/.tt-giua/.tt-phai cũng đúng (nhóm giữa cũng được căn giữa tuyệt đối). */
.thanh-tren > :nth-child(2):nth-last-child(2) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tt-trai, .tt-giua, .tt-phai { display: flex; align-items: center; min-width: 0; }
.tt-trai { flex: 1 1 0; justify-content: flex-start; }
.tt-giua { flex: 0 1 auto; justify-content: center; }
.tt-phai { flex: 1 1 0; justify-content: flex-end; }
.tt-trai > * + *, .tt-giua > * + *, .tt-phai > * + * { margin-left: .9rem; }

.tt-logo { display: inline-flex; align-items: center; margin-left: .9rem; }
/* Logo bấm được (về trang chủ chọn sách): vùng chạm ≥ 64px, không khung, nhún nhẹ khi bấm */
.tt-logo-bam { display: inline-flex; align-items: center; justify-content: center; min-width: max(64px, 3.2rem); min-height: max(64px, 3.2rem); padding: 0 .3rem; border-radius: var(--bo-vien); background: transparent; transition: transform var(--t-vua) var(--ease-nay); }
.tt-logo-bam:active, .tt-logo-bam.dang-bam { transform: scale(.93); }
.tt-logo-bam .tt-logo { margin-left: 0; }
/* Tiêu đề màn nằm ở nhóm giữa của thanh trên (thay cho .chip.lon viết tay ở từng màn) */
.tieu-man { display: inline-flex; align-items: center; min-height: max(64px, 3.2rem); padding: .5rem 1.8rem; border-radius: var(--bo-vien); background: var(--nhan-nhat); color: var(--nhan); font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-32); line-height: 1.1; white-space: nowrap; }
.tieu-man .bt { width: 1.6rem; height: 1.6rem; margin-right: .6rem; }
.logo-ngang { display: inline-flex; align-items: center; }
.logo-ngang .tt-ten { margin-left: .6rem; }
.tt-ten { font-family: var(--ff-nut); font-weight: 700; font-size: max(26px, 1.8rem); line-height: 1; color: var(--nhan); white-space: nowrap; }

/* Nút tròn 72px; vùng chạm thật lớn hơn 12px mỗi chiều nhờ ::after (nhìn 72, chạm 84 ≥ 80) */
.tt-nut {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tt-cao); height: var(--tt-cao);
  border-radius: 50%; background: var(--the); color: var(--nhan); box-shadow: var(--bong);
  font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); line-height: 1;
  transition: transform .1s ease-out, background-color .15s;
}
.tt-nut::after { content: ""; position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; border-radius: 50%; }
.tt-nut .bt { width: 1.7rem; height: 1.7rem; }
.tt-nut.nhat { background: var(--oai-huong); box-shadow: none; }
.tt-nut.tim { background: var(--nhan); color: var(--the); }

.tt-so-sao {
  flex: none; display: inline-flex; align-items: center;
  height: var(--tt-cao); padding: 0 1.4rem 0 1.1rem;
  border-radius: var(--bo-vien); background: var(--the); box-shadow: var(--bong);
  font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-32); line-height: 1; color: var(--chu);
}
.tt-so-sao .bt { width: 1.7rem; height: 1.7rem; margin-right: .5rem; color: var(--vang); }

/* Hộp quà trong vòng tiến độ: --tien 0..1 (JS đặt style.setProperty('--tien', 0.4)); .day = đã đầy, nhún nhảy mời bấm */
.vong-qua {
  --co: var(--tt-cao);
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--co); height: var(--co); border-radius: 50%;
  background: conic-gradient(var(--vang) calc(var(--tien, 0) * 360deg), var(--vang-nhat) calc(var(--tien, 0) * 360deg));
  transition: transform .1s ease-out;
}
.vong-qua::before { content: ""; position: absolute; left: 11%; top: 11%; right: 11%; bottom: 11%; border-radius: 50%; background: var(--the); }
.vong-qua::after { content: ""; position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; border-radius: 50%; }
.vong-qua .bt { position: relative; z-index: 1; width: 48%; height: 48%; color: var(--vang); }
.vong-qua.lon { --co: max(160px, 8rem); }
.vong-qua.day { animation: nay 1.6s ease-in-out infinite; }
.vong-qua.day .bt { animation: xoay-nhe 1.2s ease-in-out infinite; }

/* ---------------------------------------------------------------------------------------------------------------------
   7. NÚT
   --------------------------------------------------------------------------------------------------------------------- */
.nut, .nut-chinh, .nut-phu, .nut-tron {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--co-cham); padding: 0 2rem;
  border-radius: var(--bo-nut);
  background: var(--oai-huong); color: var(--nhan);
  font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); line-height: 1.1; white-space: nowrap;
  transition: transform .1s ease-out, background-color .15s, box-shadow .15s;
}
.nut .bt, .nut-chinh .bt, .nut-phu .bt { width: 1.8rem; height: 1.8rem; }
/* Khoảng cách biểu tượng–chữ: lề ĐỐI XỨNG hai bên biểu tượng. Chữ trần (text node) không phải phần tử con nên :first-child/:last-child
   không phân biệt được "biểu tượng + chữ" với "chỉ biểu tượng"; lề đối xứng đúng cả hai (biểu tượng đứng riêng vẫn nằm chính giữa). */
.nut .bt, .nut-chinh .bt, .nut-phu .bt { margin: 0 .8rem; }
.nut.rong, .nut-chinh.rong, .nut-phu.rong { display: flex; width: 100%; }

.nut-chu { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nut-chu small { font-family: var(--ff-chu); font-weight: 400; font-size: var(--cs-20); line-height: 1.2; opacity: .9; }

/* Nút chính: MỘT cái mỗi màn. Tím, cao 96px, biểu tượng đứng đầu, bóng tím. */
.nut-chinh {
  min-height: var(--nut-cao); padding: 0 2.6rem;
  border-radius: var(--bo-vien);
  background: var(--nhan); color: var(--the);
  box-shadow: var(--bong-nut);
  font-size: var(--cs-32);
}
.nut-chinh .bt { width: 2rem; height: 2rem; }

.nut-phu { background: var(--oai-huong); color: var(--nhan); }

.nut-tron { width: var(--co-cham); height: var(--co-cham); min-height: 0; padding: 0; border-radius: 50%; }
.nut-tron .bt { width: 2rem; height: 2rem; margin: 0; }
.nut-tron.lon { width: var(--nut-cao); height: var(--nut-cao); }
.nut-tron.lon .bt { width: 2.4rem; height: 2.4rem; }
.nut-tron.chinh { background: var(--nhan); color: var(--the); box-shadow: var(--bong-nut); }
.nut-tron.trang { background: var(--the); box-shadow: var(--bong); }
.nut-tron.mep-trai, .nut-tron.mep-phai { position: absolute; top: 50%; margin-top: calc(var(--co-cham) / -2); z-index: 4; }
.nut-tron.mep-trai { left: .6rem; }
.nut-tron.mep-phai { right: .6rem; }
.nut-tron.goc { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; }

/* Đang bấm: bam() trong ui/dom.js thêm .dang-bam (pointer); :active cho chuột/chạm trực tiếp */
.tt-nut:active, .tt-nut.dang-bam,
.nut:active, .nut.dang-bam, .nut-chinh:active, .nut-chinh.dang-bam, .nut-phu:active, .nut-phu.dang-bam, .nut-tron:active, .nut-tron.dang-bam,
.vong-qua:active, .vong-qua.dang-bam, .vong-mic:active, .vong-mic.dang-bam { transform: scale(.95); }
.nut:active, .nut.dang-bam, .nut-phu:active, .nut-phu.dang-bam, .nut-tron:active, .nut-tron.dang-bam { background: var(--nhan-ep); }
.nut-chinh:active, .nut-chinh.dang-bam, .nut-tron.chinh:active, .nut-tron.chinh.dang-bam {
  background: var(--nhan-dam); box-shadow: 0 4px 12px rgba(var(--nhan-rgb), .3);
}
.nut-tron.trang:active, .nut-tron.trang.dang-bam { background: var(--the); }

.nut[disabled], .nut.tat, .nut-chinh[disabled], .nut-chinh.tat, .nut-phu[disabled], .nut-phu.tat, .nut-tron[disabled], .nut-tron.tat {
  opacity: .45; pointer-events: none; box-shadow: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
   8. CHỮ
   --------------------------------------------------------------------------------------------------------------------- */
.tieu-de { margin: 0; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-40); line-height: 1.15; color: var(--chu); }
.tieu-de.tim { color: var(--nhan); }
.chu-phu { color: var(--chu-phu); }
.nhan-o { display: block; margin: 0 0 .6rem .4rem; font-family: var(--ff-nut); font-weight: 600; font-size: var(--cs-24); line-height: 1.2; color: var(--chu-phu); }
.ghi-chu { display: flex; align-items: center; margin-top: .8rem; font-size: var(--cs-20); line-height: 1.35; color: var(--chu-phu); }
.ghi-chu .bt { width: 1.2rem; height: 1.2rem; margin-right: .5rem; }

/* Chữ khổng lồ của thẻ luyện đọc. line-height ≥ 1.2 để dấu (ế, ộ…) không bị cắt. */
.chu-to { margin: 0; font-family: var(--ff-chu); font-weight: 400; font-size: var(--cs-160); line-height: 1.2; letter-spacing: .01em; text-align: center; color: var(--chu); overflow-wrap: break-word; }
.chu-to.vua { font-size: max(20px, var(--co-chu, 5rem)); }   /* cỡ do JS tính (sach-the.js vuaChu): to nhất mà vẫn vừa bảng sau khi tự xuống dòng */
.chu-to.dai { font-size: var(--cs-84); }          /* từ ghép / 2 tiếng (6–12 ký tự) */
.chu-to.rat-dai { font-size: var(--cs-56); }      /* cụm từ / câu ngắn (13–20 ký tự) */
.chu-to.cau { font-size: var(--cs-40); line-height: 1.3; }   /* câu dài (> 20 ký tự, tới ~45): vài dòng vẫn lọt thẻ */
.chu-vua { font-family: var(--ff-chu); font-size: var(--cs-72); line-height: 1.2; }

.tu-khen {
  margin: 0; text-align: center;
  font-family: var(--ff-nut); font-weight: 700; font-size: max(48px, 4.2rem); line-height: 1.1; letter-spacing: .01em;
  color: var(--nhan);
  animation: bat-ra .6s var(--ease-nay) both;
}

/* ---------------------------------------------------------------------------------------------------------------------
   9. BÓNG THOẠI (linh vật nói)
   --------------------------------------------------------------------------------------------------------------------- */
.bong-thoai {
  position: relative; display: flex; align-items: center; max-width: 100%;
  padding: 1rem 1.7rem 1rem 1.1rem;
  background: var(--the); border-radius: var(--bo-bong); box-shadow: var(--bong);
  font-size: var(--cs-28); line-height: 1.35; color: var(--chu);
}
.bt-loa {
  position: relative; flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: max(56px, 2.8rem); height: max(56px, 2.8rem); margin-right: 1rem;
  border-radius: 50%; background: var(--nhan-nhat); color: var(--nhan);
}
.bt-loa::after { content: ""; position: absolute; left: -14px; top: -14px; right: -14px; bottom: -14px; border-radius: 50%; }   /* chạm 84px */
.bt-loa .bt { width: 1.4rem; height: 1.4rem; }
.bt-chu { flex: 1 1 auto; min-width: 0; white-space: pre-line; }   /* \n = xuống dòng (hướng dẫn Tiếng Anh: lệnh Anh rồi lời Việt) */
.bt-chu b, .bt-chu strong { color: var(--nhan); font-weight: 700; }

/* Đuôi = hình vuông xoay 45° trùng màu bong bóng, nửa nằm trong (vô hình) nửa nhô ra */
.bong-thoai.duoi-duoi::after, .bong-thoai.duoi-trai::after, .bong-thoai.duoi-phai::after {
  content: ""; position: absolute; width: 1.3rem; height: 1.3rem; background: var(--the); transform: rotate(45deg);
}
.bong-thoai.duoi-duoi::after { bottom: -.65rem; left: var(--duoi-x, 50%); margin-left: -.65rem; border-radius: 0 0 .4rem 0; }
.bong-thoai.duoi-trai::after { left: -.65rem; top: var(--duoi-y, 50%); margin-top: -.65rem; border-radius: 0 0 0 .4rem; }
.bong-thoai.duoi-phai::after { right: -.65rem; top: var(--duoi-y, 50%); margin-top: -.65rem; border-radius: 0 .4rem 0 0; }

/* ---------------------------------------------------------------------------------------------------------------------
   10. THẺ
   --------------------------------------------------------------------------------------------------------------------- */
.the { position: relative; min-width: 0; padding: 1.6rem; background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong); }

/* Thẻ luyện đọc: ảnh ở trên + chữ khổng lồ; nút loa .nut-tron.goc nằm ở góc */
.the-doc {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 1rem 1rem 1.2rem; background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
}
.the-doc > .khung-anh { flex: 1 1 auto; min-height: 6rem; }
.the-doc > .chu-to { flex: none; }
/* BẢNG HỌC (thẻ chữ): mặc định BẢNG XANH kẻ ô, chữ phấn trắng; nút góc phải đổi sang BẢNG TRẮNG kẻ ô, chữ bút lông xanh. Khung gỗ / khung nhôm bằng bóng đổ trong (không viền). */
.the-doc.bang-xanh, .the-doc.bang-trang { padding: 1.4rem; }
.the-doc.bang-xanh {
  background-color: var(--bang-xanh);
  background-image: radial-gradient(ellipse at 30% 22%, rgba(var(--trang-rgb), .13), rgba(var(--trang-rgb), 0) 62%), linear-gradient(rgba(var(--phan-rgb), .15) 1px, rgba(var(--phan-rgb), 0) 1px), linear-gradient(90deg, rgba(var(--phan-rgb), .15) 1px, rgba(var(--phan-rgb), 0) 1px);
  background-size: auto, 3.4rem 3.4rem, 3.4rem 3.4rem;
  box-shadow: inset 0 0 0 .6rem var(--go), inset 0 0 0 .7rem rgba(var(--den-rgb), .22), inset 0 0 2rem rgba(var(--den-rgb), .38), var(--bong);
}
.the-doc.bang-xanh .chu-to { color: var(--phan); font-weight: 400; text-shadow: 0 0 .45rem rgba(var(--phan-rgb), .45), .035em .03em 0 rgba(var(--phan-rgb), .12); }
.the-doc.bang-trang {
  background-color: var(--bang-trang);
  background-image: linear-gradient(rgba(var(--muc-rgb), .17) 1px, rgba(var(--muc-rgb), 0) 1px), linear-gradient(90deg, rgba(var(--muc-rgb), .17) 1px, rgba(var(--muc-rgb), 0) 1px);
  background-size: 3.4rem 3.4rem, 3.4rem 3.4rem;
  box-shadow: inset 0 0 0 .55rem var(--nhom), inset 0 0 0 .65rem rgba(var(--den-rgb), .10), inset 0 0 1.2rem rgba(var(--den-rgb), .08), var(--bong);
}
.the-doc.bang-trang .chu-to { color: var(--muc-xanh); font-weight: 400; text-shadow: .03em .03em .02em rgba(var(--muc-rgb), .30); }
/* Chân bảng: nút nhỏ (tốc độ đọc mẫu · đổi bảng) nằm DƯỚI bảng, dồn về phía mép phải nhưng cách xa nút ghi âm */
.chan-bang { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: .5rem .2rem 0; }
.chan-bang > * + * { margin-left: .8rem; }
.nhom-toc { display: inline-flex; align-items: center; }
.nhom-toc > * + * { margin-left: .4rem; }
.nut-nho { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; min-width: 2.6rem; padding: 0 .9rem; border: 0; border-radius: var(--bo-vien); background: var(--oai-huong); color: var(--nhan); font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); line-height: 1; cursor: pointer; }
.nut-nho[aria-pressed="true"] { background: var(--nhan); color: var(--the); }
.nut-nho:active { background: var(--nhan-ep); }
.nut-bang { padding: 0; width: 2.6rem; }
.nut-bang .cham-mau { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(90deg, var(--bang-xanh) 50%, var(--bang-trang) 50%); }   /* nửa xanh nửa trắng: đổi qua lại */
.nut-cai-thien { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 21; padding: 0; width: 2.8rem; height: 2.8rem; opacity: .85; }
.bang-xanh .nut-cai-thien { background: rgba(var(--phan-rgb), .2); color: var(--phan); }
.bang-trang .nut-cai-thien { background: rgba(var(--muc-rgb), .12); color: var(--muc-xanh); }


.khung-anh { position: relative; width: 100%; overflow: hidden; background: var(--giay); border-radius: var(--bo-trang); }
.khung-anh > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ảnh cắt từ trang sách là <canvas> (catThe, cao 320px): phải thấy TRỌN hình nên contain. Đặt tuyệt đối để cỡ gốc của canvas không chống lưng
   khung — khung co giãn theo chỗ còn lại của thẻ (.the-doc > .khung-anh có flex + min-height). Cần cha cho chiều cao (vd. .the-doc). */
.khung-anh > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------------------------------------------------
   11. VÒNG MIC (160px). --muc 0..1 = âm lượng đang nghe, làm vòng phồng ra
   --------------------------------------------------------------------------------------------------------------------- */
.vong-mic {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: max(112px, 8rem); height: max(112px, 8rem);
  border-radius: 50%; background: var(--nhan); color: var(--the); box-shadow: var(--bong-nut);
  transition: transform .12s ease-out, opacity .2s;
}
.vong-mic.lon { width: max(150px, 10rem); height: max(150px, 10rem); }
.vong-mic .bt { position: relative; z-index: 1; width: 42%; height: 42%; }
.vong-mic::before, .vong-mic::after {                       /* hai vòng gợn: chỉ chạy khi .dang-nghe */
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 50%; background: var(--nhan-mo-2); opacity: 0; pointer-events: none;
}
.vong-mic.dang-nghe::before { animation: gon-song 2s ease-out infinite; }
.vong-mic.dang-nghe::after { animation: gon-song 2s ease-out 1s infinite; }
.vong-mic .muc {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--muc, 0) * 2.2rem) var(--nhan-mo);
  transition: box-shadow .09s linear;
}

/* ---------------------------------------------------------------------------------------------------------------------
   12. SAO (chỉ vẽ sao ĐÃ ĐẠT — không có sao rỗng trong vòng học)
   --------------------------------------------------------------------------------------------------------------------- */
.hang-sao { --co-sao: 2.6rem; display: flex; align-items: center; justify-content: center; }
.hang-sao.lon { --co-sao: 3.8rem; }
.hang-sao.nho { --co-sao: 1.5rem; }
.hang-sao > .sao + .sao { margin-left: .4rem; }
.hang-sao.nho > .sao + .sao { margin-left: .15rem; }

.sao { position: relative; flex: none; display: inline-block; width: var(--co-sao, 2.6rem); height: var(--co-sao, 2.6rem); color: var(--vang); }
.sao > .bt { display: block; width: 100%; height: 100%; }
/* <span class="sao"></span> trống vẫn ra ngôi sao tròn trịa nhờ mặt nạ (nếu bên trong đã có svg từ bt('sao') thì không áp dụng) */
.sao:empty::before {
  content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.7L14.65 9.26L20.75 10.06L16.28 14.29L17.41 20.34L12 17.4L6.59 20.34L7.72 14.29L3.25 10.06L9.35 9.26Z' fill='black' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.7L14.65 9.26L20.75 10.06L16.28 14.29L17.41 20.34L12 17.4L6.59 20.34L7.72 14.29L3.25 10.06L9.35 9.26Z' fill='black' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* sao vừa đạt: bật ra (đặt style="animation-delay:.2s" để các sao nổ lần lượt) */
.sao.moi { animation: bat-ra .6s var(--ease-nay) both; }

/* ---------------------------------------------------------------------------------------------------------------------
   13. CHIP + CHẤM BƯỚC
   --------------------------------------------------------------------------------------------------------------------- */
.chip {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(56px, 2.8rem); padding: .4rem 1.4rem;
  border-radius: var(--bo-vien); background: var(--oai-huong); color: var(--nhan);
  font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-24); line-height: 1.1; white-space: nowrap;
  transition: transform .1s ease-out, background-color .15s;
}
.chip + .chip { margin-left: 1rem; }
.chip .bt { width: 1.2rem; height: 1.2rem; margin-right: .4rem; }
.chip.chon { background: var(--nhan); color: var(--the); box-shadow: var(--bong-nut); }
.chip.lon { min-height: max(64px, 3.2rem); padding: .5rem 1.8rem; font-size: var(--cs-32); background: var(--nhan-nhat); }
.chip.lon .bt { width: 1.6rem; height: 1.6rem; margin-right: .6rem; }
button.chip::after, .chip.bam::after { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }   /* chip bấm được: chạm ≥ 80px */
.chip:active, .chip.dang-bam { transform: scale(.95); }

.cham-buoc { flex: none; display: inline-flex; align-items: center; height: max(40px, 2rem); padding: 0 1.1rem; border-radius: var(--bo-vien); background: var(--the); box-shadow: var(--bong); }
.cham { flex: none; width: .7rem; height: .7rem; border-radius: var(--bo-vien); background: var(--nhan-ep); transition: width .2s, background-color .2s; }
.cham + .cham { margin-left: .55rem; }
.cham.xong { background: var(--nhan); }
.cham.chon { width: 2.1rem; background: var(--nhan); }

/* ---------------------------------------------------------------------------------------------------------------------
   14. Ô NHẬP TÊN
   --------------------------------------------------------------------------------------------------------------------- */
.o-nhap {
  display: block; width: 100%; height: max(112px, 6rem); padding: 0 2rem;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
  font-family: var(--ff-chu); font-weight: 400; font-size: var(--cs-72); line-height: 1.2; color: var(--chu);
  caret-color: var(--nhan);
  transition: box-shadow .15s;
}
.o-nhap.dai { font-size: var(--cs-48); }          /* tên dài: JS bật khi > ~12 ký tự */
.o-nhap::placeholder { color: var(--chu-phu); opacity: .45; }
.o-nhap:focus { box-shadow: 0 10px 28px rgba(var(--nhan-rgb), .3); }

/* ---------------------------------------------------------------------------------------------------------------------
   15. CHỌN GIỌNG + CHỌN LINH VẬT
   --------------------------------------------------------------------------------------------------------------------- */
.hang-the { display: flex; align-items: stretch; }
.hang-the > * + * { margin-left: 1.4rem; }

.the-giong {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.4rem 1rem 1.3rem;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
  transition: transform .12s ease-out, background-color .15s;
}
.tg-anh { flex: none; width: max(96px, 6.4rem); height: max(96px, 6.4rem); overflow: hidden; border-radius: 50%; background: var(--oai-huong); }
.tg-anh > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-ten { margin-top: .8rem; font-family: var(--ff-nut); font-weight: 600; font-size: var(--cs-28); line-height: 1.2; color: var(--chu); }
.tg-chu { width: 100%; margin-top: .6rem; padding: .2rem 0; border-radius: var(--bo-trang); background: var(--nen); font-family: var(--ff-chu); font-size: var(--cs-84); line-height: 1.25; text-align: center; color: var(--chu); }
.the-giong .nut-tron { margin-top: .9rem; }
.tg-tich {
  position: absolute; right: -.5rem; top: -.5rem; z-index: 2; display: none; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--nhan); color: var(--the); box-shadow: var(--bong-nut);
}
.tg-tich .bt { width: 1.6rem; height: 1.6rem; }
.the-giong.chon { background: var(--nhan-nhat); }
.the-giong.chon > .tg-tich { display: flex; }
.the-giong.chon .tg-ten, .the-giong.chon .tg-chu { color: var(--nhan); }
.the-giong.chon .tg-chu { background: var(--the); }
.the-giong:active, .the-giong.dang-bam { transform: scale(.97); }

/* Mỗi linh vật trong dải cuộn: ô giữa (.chon) to và rõ, hai bên nhỏ và mờ */
.lv-chon {
  position: relative; display: flex; flex-direction: column; align-items: center;
  transform: scale(.72); transform-origin: 50% 100%; opacity: .55;
  transition: transform .25s var(--ease-nay), opacity .2s;
}
.lv-chon.chon { transform: scale(1); opacity: 1; }
.lv-chon .chip { margin-top: .6rem; background: var(--the); box-shadow: var(--bong); }

/* Ô linh vật ở bước chọn của màn Hồ sơ (ho-so.js: <button class="the o-lv">; JS bật/tắt .chon). Ô đang chọn: nền tím nhạt + vòng mờ + hơi to hơn. */
.the.o-lv { transition: transform .12s var(--ease-nay), background-color .15s, box-shadow .15s; }
.the.o-lv.chon { background: var(--nhan-nhat); box-shadow: 0 0 0 .4rem var(--nhan-mo), var(--bong); transform: scale(1.06); }
.the.o-lv:active, .the.o-lv.dang-bam { transform: scale(.96); }

/* ---------------------------------------------------------------------------------------------------------------------
   16. MỤC LỤC BÀI
   --------------------------------------------------------------------------------------------------------------------- */
.luoi-bai {
  display: grid; min-height: 0; padding: .3rem; align-content: start;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: max(150px, 9.4rem);
  gap: .8rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.luoi-bai::-webkit-scrollbar { display: none; }

.o-bai {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .6rem .3rem;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
  font-family: var(--ff-chu); color: var(--chu);
  transition: transform .1s ease-out, background-color .15s;
}
.ob-so {
  position: absolute; left: .7rem; top: .7rem;
  display: flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem;
  border-radius: var(--bo-vien); background: var(--nhan-nhat); color: var(--nhan-dam);
  font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); line-height: 1;
}
.ob-chu { font-size: var(--cs-48); line-height: 1.2; text-align: center; }
.ob-chu.nho { font-size: var(--cs-32); }
.o-bai .hang-sao { --co-sao: 1.3rem; margin-top: .3rem; min-height: 1.3rem; }
.ob-xong {
  position: absolute; right: .7rem; top: .7rem; z-index: 1; display: none; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--mint); color: var(--the);
}
.ob-xong .bt { width: 1.1rem; height: 1.1rem; }
.o-bai.xong > .ob-xong { display: flex; }
.o-bai.hien-tai { background: var(--nhan-nhat); color: var(--nhan); box-shadow: 0 0 0 .4rem var(--nhan-mo), var(--bong); }
.o-bai.hien-tai .ob-so { background: var(--nhan); color: var(--the); }
.o-bai:active, .o-bai.dang-bam { transform: scale(.96); }

/* ---------------------------------------------------------------------------------------------------------------------
   17. KẾT QUẢ: HÀNG LƯỢT ĐỌC + CỘT %
   --------------------------------------------------------------------------------------------------------------------- */
.hang-luot {
  display: flex; align-items: center; min-height: max(96px, 5.2rem);
  padding: .7rem 1.4rem .7rem 1rem;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
}
.hang-luot + .hang-luot { margin-top: .9rem; }
.hl-anh { flex: none; width: max(88px, 4.6rem); height: max(64px, 3.4rem); margin-right: 1.4rem; overflow: hidden; border-radius: 1rem; background: var(--giay); }
.hl-anh > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-chu { flex: 1 1 auto; min-width: 0; font-family: var(--ff-chu); font-weight: 700; font-size: var(--cs-48); line-height: 1.2; color: var(--chu); }
.hl-cot { flex: none; display: flex; align-items: flex-end; margin: 0 1.6rem; }
.hang-luot > .nut-tron + .nut-tron { margin-left: .8rem; }

/* Mỗi lần đọc một cột: <i> = thân cột cao theo --cao (0..1), <span> = số % bên dưới. Cột tốt nhất tô tím đậm + chấm vàng. */
.cot-pt { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 3.5rem; margin: 0 .25rem; }
.cot-pt > i { position: relative; display: block; width: 2.2rem; height: calc(.8rem + var(--cao, 0) * 3.4rem); border-radius: 1.1rem 1.1rem .5rem .5rem; background: var(--nhan-ep); }
.cot-pt > span { margin-top: .3rem; font-size: var(--cs-20); line-height: 1.1; color: var(--chu-phu); }
.cot-pt.tot-nhat > i { background: var(--nhan); }
.cot-pt.tot-nhat > i::after { content: ""; position: absolute; left: 50%; top: -1rem; width: .65rem; height: .65rem; margin-left: -.325rem; border-radius: 50%; background: var(--vang); }
.cot-pt.tot-nhat > span { color: var(--nhan); font-weight: 700; }

/* ---------------------------------------------------------------------------------------------------------------------
   18. GÓC BA MẸ: HÀNG CÀI ĐẶT + THANH TRƯỢT
   --------------------------------------------------------------------------------------------------------------------- */
.hang-cai-dat {
  display: flex; align-items: center; min-height: max(104px, 5.2rem); padding: .6rem 1.6rem;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong);
}
.hang-cai-dat + .hang-cai-dat { margin-top: .8rem; }
.hcd-ten { flex: 0 0 36%; min-width: 0; display: flex; align-items: center; font-size: var(--cs-24); line-height: 1.3; color: var(--chu-phu); }
.hcd-ten .bt { width: 1.6rem; height: 1.6rem; margin-right: .8rem; }
.hcd-gia-tri { flex: none; margin-left: auto; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); line-height: 1.2; color: var(--chu); }
.hcd-nhom { display: flex; align-items: center; margin-left: auto; }
.hang-cai-dat .thanh-truot { flex: 1 1 auto; min-width: 0; margin: 0 1.4rem 0 .6rem; }
.hang-cai-dat .chip.gia-tri { min-width: 5.4rem; margin-left: 0; background: var(--nhan-nhat); }

/* input type=range. --pt (0%..100%) do JS đặt để tô phần đã kéo; thân cao 80px cho ngón tay, nút kéo 52px */
.thanh-truot { display: block; width: 100%; height: var(--co-cham); margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.thanh-truot::-webkit-slider-runnable-track {
  height: .8rem; border-radius: var(--bo-vien);
  background: linear-gradient(to right, var(--nhan) 0, var(--nhan) var(--pt, 0%), var(--oai-huong) var(--pt, 0%), var(--oai-huong) 100%);
}
.thanh-truot::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.6rem; height: 2.6rem; margin-top: calc((.8rem - 2.6rem) / 2);
  border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--the) 0, var(--the) 26%, var(--nhan) 29%);
  box-shadow: 0 4px 12px rgba(var(--nhan-dam-rgb), .35);
  transition: transform .1s;
}
.thanh-truot:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---------------------------------------------------------------------------------------------------------------------
   19. HỘP THOẠI + Ô CHỌN GAME
   --------------------------------------------------------------------------------------------------------------------- */
.lop-mo {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--m); background: var(--lop-mo);
  animation: hien-dan .22s ease-out both;
}
.hop-thoai {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(100%, 50rem); max-height: 100%; padding: 1.8rem 2.2rem 2rem; overflow-y: auto;
  background: var(--the); border-radius: var(--bo-the); box-shadow: var(--bong-hop);
  animation: truot-len .3s ease-out both;
}
.hop-thoai .bong-thoai { align-self: stretch; }

.the-game {
  flex: none; display: flex; flex-direction: column; align-items: center;
  min-width: max(120px, 7rem); padding: .5rem .8rem .6rem; border-radius: var(--bo-the);
  font-family: var(--ff-nut); font-weight: 600; font-size: var(--cs-24); line-height: 1.2; color: var(--chu-phu);
  transition: transform .1s ease-out, background-color .15s;
}
.the-game + .the-game { margin-left: 1.2rem; }
.game-hinh { display: flex; align-items: center; justify-content: center; width: max(88px, 4.8rem); height: max(88px, 4.8rem); margin-bottom: .4rem; overflow: hidden; border-radius: 50%; background: var(--oai-huong); color: var(--nhan); }
.game-hinh .bt { width: 2.4rem; height: 2.4rem; }
.game-hinh > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.the-game.chon { background: var(--nhan-nhat); color: var(--nhan); }
.the-game.chon .game-hinh { background: var(--the); box-shadow: var(--bong); }
.the-game:active, .the-game.dang-bam { transform: scale(.95); }

/* ---------------------------------------------------------------------------------------------------------------------
   20. TRANG SÁCH + ĐIỂM CHẠM
   --------------------------------------------------------------------------------------------------------------------- */
.trang-sach {
  position: relative; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .8rem; overflow: hidden;
  background: var(--giay); border-radius: var(--bo-trang); box-shadow: var(--bong);
}
/* Khung bọc đúng ảnh trang: --w/--h (px) do JS đặt theo tỉ lệ ảnh để vừa .trang-sach; chưa đặt thì ảnh tự co (object-fit: contain) */
.trang-anh { position: relative; flex: none; display: block; width: var(--w, auto); height: var(--h, auto); max-width: 100%; line-height: 0; }
.trang-anh > img, .trang-anh > canvas { display: block; width: 100%; height: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }

/* Quầng tím nhấp nháy quanh chữ/hình chạm được. Đặt bằng left/top/width/height (%) trong .trang-anh; .tam = toạ độ là TÂM. */
.diem-cham { position: absolute; padding: 0; border-radius: 1.2rem; background: transparent; cursor: pointer; }
.diem-cham.tam { min-width: var(--co-cham); min-height: var(--co-cham); transform: translate(-50%, -50%); }   /* không có w/h → hộp 80px quanh tâm */
.diem-cham.tron { border-radius: 50%; }
/* Hộp = ĐÚNG khung chữ/hình (left/top/width/height từ JS) nên quầng ::before ôm sát chữ. Vùng chạm ≥ 80px mở bằng ::after quanh TÂM khung:
   dùng min-width/min-height thì hộp nở sang phải/xuống dưới và quầng lệch khỏi chữ tới ~30px. */
/* vùng chạm do sach-trang.js chọn theo vị trí ngón tay (chonDiem) nên không cần ::after mở rộng */
.diem-cham::before {
  /* Chỉ 4 GÓC, nét mảnh đứt đoạn (không viền kín: viền đậm làm xấu trang sách). Mỗi góc = hai cánh ngắn vẽ bằng gradient lặp. */
  content: ""; position: absolute; left: -.5rem; top: -.4rem; right: -.5rem; bottom: -.4rem; border-radius: inherit; pointer-events: none;
  --a: 1.3rem; --t: 2px; --net: var(--goc-net);
  background-color: transparent;
  background-image:
    repeating-linear-gradient(90deg, var(--net) 0 4px, transparent 4px 7px), repeating-linear-gradient(180deg, var(--net) 0 4px, transparent 4px 7px),
    repeating-linear-gradient(90deg, var(--net) 0 4px, transparent 4px 7px), repeating-linear-gradient(180deg, var(--net) 0 4px, transparent 4px 7px),
    repeating-linear-gradient(90deg, var(--net) 0 4px, transparent 4px 7px), repeating-linear-gradient(180deg, var(--net) 0 4px, transparent 4px 7px),
    repeating-linear-gradient(90deg, var(--net) 0 4px, transparent 4px 7px), repeating-linear-gradient(180deg, var(--net) 0 4px, transparent 4px 7px);
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: var(--a) var(--t), var(--t) var(--a), var(--a) var(--t), var(--t) var(--a), var(--a) var(--t), var(--t) var(--a), var(--a) var(--t), var(--t) var(--a);
  background-repeat: no-repeat;
}
.diem-cham.tam::before { left: 0; top: 0; right: 0; bottom: 0; }
.diem-cham:active::before, .diem-cham.dang-bam::before { background-color: var(--nhan-mo); }
/* Hình/khung lớn: cánh góc dài hơn, vẫn không tô nền (nền tô che mất tranh và chữ trên trang) */
.diem-cham.to::before { --a: 2.2rem; }
.diem-cham.to:active::before, .diem-cham.to.dang-bam::before { background-color: var(--nhan-mo); }
/* Chữ/hình đang học trong bảng bên phải: cánh góc đậm hơn một chút, không nhấp nháy */
.diem-cham.dang-chon.dang-chon::before { animation: none; opacity: 1; --t: 3px; --net: var(--nhan); }
/* Trạng thái do sach-trang.js bật: .da-doc = bé đã đọc (dịu, đứng yên); .goi-y = chữ nên đọc tiếp (nhấp nháy).
   .goi-y đặt SAU .da-doc để thắng khi cả hai cùng có (đọc hết trang vẫn gợi ý chữ đầu). */
.diem-cham.da-doc::before { animation: none; opacity: .45; }
.diem-cham.goi-y::before { animation: quang-nhap-nhay 1.1s ease-in-out infinite; opacity: 1; --t: 3px; --net: var(--nhan); }
/* Sao đã đạt: nằm NGOÀI góc trên-phải của khung, không đè chữ/hình */
.diem-sao { pointer-events: none; }
/* Dùng làm phần tử SVG (<ellipse>/<rect>/<circle> trong một <svg> phủ lên trang): quầng tô bằng fill thay vì ::before; cỡ ≥ 80px do JS đặt. */
svg .diem-cham {
  fill: var(--nhan-mo); stroke: var(--nhan-mo); stroke-width: 6px; stroke-linejoin: round;
  transform: none; transform-box: fill-box; transform-origin: 50% 50%;
  animation: quang-nhap-nhay 1.9s ease-in-out infinite; cursor: pointer; pointer-events: all;
}
svg .diem-cham:active, svg .diem-cham.dang-bam { fill: var(--nhan-mo-2); }
svg .diem-cham.da-doc { animation: none; opacity: .5; }
svg .diem-cham.goi-y { animation: quang-nhap-nhay 1.1s ease-in-out infinite; opacity: 1; fill: var(--nhan-mo-2); }


/* ---------------------------------------------------------------------------------------------------------------------
   20b. MÀN SÁCH (ngang): nửa TRÁI = trang SGK cao hết màn + lề trái 6rem (nhãn bài · BÌNH SAO · nút Tiếp ở GÓC DƯỚI TRÁI);
        nửa PHẢI = thanh trên + BẢNG HỌC (thẻ chữ) + hàng dưới: linh vật ở trái, lời khen giữa, loa + MIC ở GÓC DƯỚI PHẢI.
        Hai ngón cái cầm máy chạm tới nút hay dùng (Tiếp, mic) ở hai góc dưới. Bảng luôn bám theo trang/chữ hiện tại.
   --------------------------------------------------------------------------------------------------------------------- */
.man.man-sach { display: grid; grid-template-columns: var(--cot-sach, minmax(0, 56fr)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; }
.sach-trai { position: relative; min-width: 0; min-height: 0; }
.sach-trai > .trang-sach { position: absolute !important; left: 5.6rem; top: 0; right: 0; bottom: 0; width: auto !important; height: auto !important; padding: 0; border-radius: 0; box-shadow: var(--bong); }
.sach-trai .trang-anh > img { max-height: none; border-radius: 0 !important; }
.le-trang { position: absolute; left: 0; top: 0; bottom: 0; width: 5.6rem; display: flex; flex-direction: column; align-items: center; padding: .8rem 0 .8rem; z-index: 4; }
.nhan-bai { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5rem; padding: .5rem 0; border-radius: var(--bo-the); background: var(--nhan-nhat); color: var(--nhan-dam); font-family: var(--ff-nut); font-weight: 700; line-height: 1; text-align: center; }
.nhan-bai small { font-size: var(--cs-20); }
.nhan-bai b { font-size: var(--cs-40); }
.tiep-cho { flex: none; display: flex; align-items: flex-end; justify-content: center; min-height: 6.6rem; }
.nut-tiep-le { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5.2rem; min-height: 6.4rem; padding: .4rem .2rem; border-radius: var(--bo-the); background: var(--nhan); color: var(--the); box-shadow: var(--bong-nut); font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); line-height: 1.05; text-align: center; transition: transform .1s ease-out; }
.nut-tiep-le .bt { width: 2.6rem; height: 2.6rem; }
.nut-tiep-le:active, .nut-tiep-le.dang-bam { transform: scale(.94); }
.nut-tiep-le.nhap-nhay { animation: nhap-nhay 1.4s ease-in-out infinite; }
/* BÌNH THUỶ TINH ĐỰNG SAO: cột dọc, trong suốt như kính, nước vàng dâng theo độ đầy, sao xếp từ đáy lên */
.binh { flex: 1 1 auto; min-height: 0; width: 4.6rem; margin: .7rem 0 .6rem; display: flex; flex-direction: column; align-items: center; position: relative; }
.binh-nap { flex: none; width: 3.4rem; height: .9rem; border-radius: .5rem .5rem .2rem .2rem; background: var(--nhan-nhat); }
.binh-than {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%; margin-top: .15rem; overflow: hidden; border-radius: 1rem 1rem 1.9rem 1.9rem;
  background: linear-gradient(90deg, rgba(var(--trang-rgb), .75), rgba(var(--oai-rgb), .35) 45%, rgba(var(--trang-rgb), .6));
  box-shadow: inset 0 0 0 .18rem rgba(var(--nhan-rgb), .14), var(--bong);
}
.binh-than::after { content: ""; position: absolute; left: 10%; top: 6%; width: 11%; height: 70%; border-radius: 1rem; background: rgba(var(--trang-rgb), .7); pointer-events: none; }
.binh-nuoc { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, rgba(var(--vang-rgb), .35), rgba(var(--vang-rgb), .65)); transition: height .5s ease-out; }
.binh-sao { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.binh-ngoi { position: absolute; width: 20px; height: 20px; color: var(--vang); }
.binh-ngoi .bt { width: 100%; height: 100%; }
.binh-ngoi.moi { animation: bat-ra .45s var(--ease-nay) both; }
.binh-dem { position: absolute; left: 0; right: 0; bottom: .35rem; text-align: center; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); color: var(--nhan-dam); text-shadow: 0 0 .4rem rgba(var(--trang-rgb), .95); }
.binh.rung-binh .binh-than { animation: nay .26s ease-out; }
.binh-bay { position: fixed; z-index: 90; width: 40px; height: 40px; color: var(--vang); pointer-events: none; filter: drop-shadow(0 0 .35rem rgba(var(--vang-rgb), .9)); }
.binh-bay .bt { width: 100%; height: 100%; }
.sach-phai { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: .8rem .8rem .8rem .7rem; }
.sach-phai > .thanh-tren { margin-bottom: .6rem; }
.sach-bang { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 26%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 36%); gap: .6rem; }
.sach-bang > * { min-width: 0; min-height: 0; }
.the-cho { display: flex; flex-direction: column; position: relative; grid-column: 1 / -1; grid-row: 1; }
.the-cho > div { flex: 1 1 auto; min-height: 0; }
.sach-bang > .vung-lv { grid-column: 1; grid-row: 2; }
.dk-cho { display: flex; flex-direction: column; justify-content: flex-end; grid-column: 2; grid-row: 2; }
.hang-doc { display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; }
.hang-doc > * + * { margin-left: 1rem; }
.hang-doc .khen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; margin-bottom: 1rem; }
.hang-doc .nut-tron { flex: none; margin-bottom: .6rem; }
.cot-mic { flex: none; display: flex; flex-direction: column; align-items: center; }
.cot-mic .vong-mic { width: max(120px, 8.4rem); height: max(120px, 8.4rem); }
.dem-khoa { margin-top: .3rem; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-24); color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.vong-mic.khoa { opacity: .35; box-shadow: none; }
/* Bóng thoại nổi: nằm phía trên góc linh vật, đè lên mép dưới thẻ chữ thay vì bóp nhỏ con */
#lop-lv.bong-troi > .bong-thoai { position: absolute; left: auto; right: calc(100% - 5rem); top: .2rem; bottom: auto; width: max-content; max-width: min(12.5rem, 22vw) !important; margin: 0 !important; padding: .4rem .7rem .4rem .5rem; font-size: var(--cs-20); line-height: 1.2; --duoi-x: 86%; z-index: 2; box-shadow: var(--bong); }   /* nằm bên TRÁI con, đuôi chỉ xuống con: không đè hàng sao và chữ đánh giá ở bên phải */
/* Chữ linh vật chỉ để tham khảo (bé nghe là chính): nhỏ, nằm ngay TRÊN đầu linh vật trong khoảng trống dưới bảng — không đè bảng, không đè lời khen */
#lop-lv.bong-troi > .bong-thoai .bt-loa { width: 1.8rem; height: 1.8rem; min-width: 0; margin-right: .5rem; }
#lop-lv.bong-troi > .bong-thoai .bt-loa .bt { width: .95rem; height: .95rem; }
/* Hộp quà: số lượt chơi đã tích luỹ */
.vong-qua .so-luot { position: absolute; right: -4px; top: -4px; z-index: 2; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 1rem; background: var(--nhan); color: var(--the); font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-20); display: flex; align-items: center; justify-content: center; }
.vong-mic.tat { opacity: .45; box-shadow: none; }
/* Đồng hồ đếm ngược tới lượt chơi kế tiếp; mờ + dừng khi bé ngừng tương tác */
.chip.dem-gio { font-variant-numeric: tabular-nums; min-width: 5.2rem; justify-content: center; transition: opacity .2s; }
.chip.dem-gio.dung { opacity: .45; }
/* Hình đại diện của bé (emoji) ở góc trên các màn; khoá nhỏ báo "dành cho ba mẹ", vòng sáng chạy khi đang giữ */
.tt-nut.avatar { background: var(--the); color: var(--chu); }
.avatar .av-hinh { font-size: var(--cs-40); line-height: 1; }
.avatar .av-khoa { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nhan); color: var(--the); display: flex; align-items: center; justify-content: center; }
.avatar .av-khoa .bt { width: 1rem; height: 1rem; }
.avatar.dang-giu::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; background: var(--nhan-mo-2); animation: giu-vong 3s linear forwards; pointer-events: none; }
@keyframes giu-vong { from { transform: scale(1); opacity: .25; } to { transform: scale(1.55); opacity: .95; } }
.luoi-avatar { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.luoi-avatar > .o-avatar { margin: 4px; width: 4.2rem; height: 4.2rem; border-radius: 50%; font-size: var(--cs-40); display: flex; align-items: center; justify-content: center; background: var(--oai-huong); }
.luoi-avatar > .o-avatar.chon { background: var(--nhan-nhat); box-shadow: 0 0 0 .3rem var(--nhan); }

/* ---------------------------------------------------------------------------------------------------------------------
   21. GAME, LỚP PHỦ
   --------------------------------------------------------------------------------------------------------------------- */
.khung-game {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--nhan-nhat); border-radius: var(--bo-the);
}
.khung-game .game-cv { border-radius: var(--bo-trang); }

/* Máy đang đọc mẫu (micro bị bỏ qua): chỉ một biểu tượng loa NHỎ nhấp nháy ở góc trên phải bảng học — KHÔNG che chữ. Không chặn chạm. */
.mat-na-tai {
  position: absolute; right: 1rem; top: 1rem; width: 3.2rem; height: 3.2rem; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--the);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, visibility 0s .2s;
}
.mat-na-tai .bt { width: 2rem; height: 2rem; color: var(--nhan); }
.mat-na-tai.hien { opacity: 1; visibility: visible; transition: opacity .2s; animation: nhap-nhay-nho .8s ease-in-out infinite; }

/* Ăn mừng 4–5 sao (ui/an-mung.js): lớp phủ không chặn chạm; hạt/ giấy dùng token màu */
.am-lop { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 85; pointer-events: none; overflow: hidden; }
.am-vong { position: absolute; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, transparent 56%, var(--vang) 58%, var(--vang) 70%, transparent 72%); }
.am-hat { position: absolute; width: 24px; height: 24px; color: var(--vang); }
.am-hat .bt { width: 100%; height: 100%; }
.am-giay { position: absolute; width: 12px; height: 20px; border-radius: 3px; }
.am-c1 { background: var(--vang); } .am-c2 { background: var(--nhan); } .am-c3 { background: var(--mint); } .am-c4 { background: var(--muc-xanh); } .am-c5 { background: var(--nhan-ep); }
.am-nhoang { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--vang-nhat); opacity: 0; }
/* hàng sao 4–5 trong bảng: to hơn và nhún nhịp */
.hang-sao.hoan-ho > .sao { animation: bat-ra .6s var(--ease-nay) both, nhun-sao 1.1s ease-in-out .7s 3; }
@keyframes nhun-sao { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* Lớp trong suốt phủ cả màn, không chặn chạm: chỗ đặt canvas hoa giấy */
.lop-trong { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; }

/* ---------------------------------------------------------------------------------------------------------------------
   22. MÀN DỌC (≥ 600×960): linh vật lên trên, nội dung xuống dưới
   --------------------------------------------------------------------------------------------------------------------- */
@media (orientation: portrait) {
  .man-luoi { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 34fr) minmax(0, 66fr); }
  .man-luoi > .vung-lv { order: -1; }
  .man.man-sach { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 54fr) minmax(0, 46fr); }
  .sach-trai > .trang-sach { left: 0; }
  .le-trang { display: none; }
  .luoi-bai { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hang-the { flex-direction: column; }
  .hang-the > * + * { margin-left: 0; margin-top: 1rem; }
  .hang-luot { flex-wrap: wrap; }
  .hcd-ten { flex-basis: 100%; margin-bottom: .2rem; }
  .hang-cai-dat { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   23. GIẢM CHUYỂN ĐỘNG (cài đặt hệ thống "Remove animations"): tắt mọi chuyển động, trạng thái cuối vẫn đúng
   --------------------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  /* vòng gợn là một chuyển động → thay bằng một vòng tĩnh để bé vẫn biết máy đang nghe */
  .vong-mic.dang-nghe::before { animation: none !important; opacity: 1; transform: scale(1.35); background: var(--nhan-mo); }
  .nhap-nhay, .vong-qua.day, .vong-qua.day .bt, .diem-cham::before, svg .diem-cham, .mat-na-tai.hien { animation: none !important; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   6. CHUẨN HOÁ 4 MÀN: ho-so, chao, muc-luc, phan-thuong
   Thay style inline của bốn màn này bằng lớp. Tiền tố: hs- (Hồ sơ), chao- (Chào), mucluc- (Mục lục), pt- (Phần thưởng).
   px ở 1280×800 đổi sang rem (1rem = 20px) để co theo màn; cỡ chữ dùng token --cs-*. Giá trị động (--tre) vẫn đặt bằng style custom property.
   --------------------------------------------------------------------------------------------------------------------- */
/* ---- Hồ sơ: phần thân đặt tuyệt đối theo từng bước (bước 0 tên · 1 linh vật · 2 giọng + 3 micro) ---- */
.hs-noi-dung { position: absolute; left: 4%; top: 16%; width: 54%; bottom: 8%; display: flex; flex-direction: column; justify-content: center; }
.hs-noi-dung.hs-chon-lv { top: auto; width: 92%; bottom: 6%; justify-content: flex-end; }
.hs-noi-dung.hs-chon-giong { top: 20%; width: 56%; }
.nhan-o.hs-nhan-1 { margin-bottom: .5rem; }
.nhan-o.hs-nhan-2 { margin-top: .9rem; }
.luoi-avatar.hs-luoi-avatar { justify-content: flex-start; margin-top: .7rem; }
.hs-nut-tiep { margin-top: 1.4rem; }
.hs-nut-tiep.hs-nut-giua { align-self: center; }
.hs-hang-lv { display: flex; justify-content: center; align-items: flex-end; }
.the.hs-o-lv { margin: 0 .4rem; padding: .5rem; width: 6rem; }
.hs-o-lv-anh { display: block; width: 100%; }
.hs-o-lv-ten { text-align: center; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-24); }
.hs-hang-nut { display: flex; justify-content: center; margin-top: 1.1rem; }
.hs-hang-giong { display: flex; justify-content: center; }
.the-giong.hs-the-giong { margin: 0 .5rem; padding: 1.1rem .9rem; width: 10rem; text-align: center; }
.hs-giong-ten { margin-top: .5rem; font-family: var(--ff-nut); font-weight: 700; font-size: var(--cs-28); }
.vong-mic.hs-vong-mic { margin: 0 auto 1.2rem; }
.hs-ghi-chu { display: flex; justify-content: center; align-items: center; margin-top: 1.1rem; font-size: var(--cs-20); color: var(--chu-phu); }
.hs-ghi-chu-chu { margin-left: .5rem; }

/* ---- Chào ---- */
.the.chao-the { display: flex; align-items: center; padding: .9rem; }
.chao-anh-trang { display: block; height: 13rem; margin-right: 1.2rem; border-radius: var(--bo-trang); }
.chao-ten-bai { margin: .7rem 0; font-family: var(--ff-chu); font-weight: 700; font-size: var(--cs-48); }
.chao-bat-dau { font-family: var(--ff-nut); font-size: var(--cs-32); }
.chao-hang-nut { display: flex; align-items: center; }
.nut-chinh.chao-nut-chinh { margin-top: 1.3rem; }
.nut-tron.chao-nut-luoi { margin: 1.3rem 0 0 1rem; }

/* ---- Mục lục ---- */
.luoi-bai.mucluc-luoi { flex: 1; min-height: 0; overflow-x: hidden; padding-bottom: 2rem; }

/* ---- Phần thưởng ---- */
.lop-mo.pt-lop { justify-content: flex-start; padding-left: 2.5%; }       /* hộp thoại bên trái, linh vật bên phải */
.pt-qua { animation: bat-ra 600ms ease-out; }
.hop-thoai.pt-hop { max-width: 36rem; text-align: center; }
.hop-thoai.pt-hop-tro { padding: 1.4rem 1.2rem; }
.hang-hanh-dong { display: flex; justify-content: center; margin-top: 1.2rem; }
.hang-hanh-dong > * + * { margin-left: 1.2rem; }
.dong.pt-dong { justify-content: center; }
.pt-dong + .pt-dong { margin-top: .7rem; }
.the-game.pt-the-game { width: 10.75rem; min-width: 0; }
.game-hinh.game-hinh-emoji { font-size: var(--cs-56); line-height: 1; }
.tu-khen.game-ten { font-size: var(--cs-24); }
.khung-game.pt-khung-game { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--nen); }
.tt-nut.pt-nut-dong { position: absolute; right: .8rem; top: .8rem; z-index: var(--z-thanh); }
.bong-thoai.pt-bong-choi { position: absolute; right: 1rem; bottom: 1rem; z-index: var(--z-thanh); max-width: 46%; pointer-events: none; }
.pt-hang-sao .sao.moi { animation-delay: var(--tre, 0ms); }              /* các sao nổ lần lượt: JS đặt --tre */
.pt-nhac { margin: .9rem 0 0; font-size: var(--cs-28); color: var(--chu-phu); }