/* Hallmark · checked: 2026-11-10 · genre: playful (inferred: trẻ 5–8 tuổi) · scope: app · surface: map of worlds
 * theme: brand "Lớp cờ thầy Hiệp" (be.css: Nunito, khối xanh ngọc, nút dày có gờ) · locked: DESIGN.md, docs/HALLMARK.md
 * signature: quân trên bìa sách (Tốt, Mã) đứng trên ô đang làm, giữa tám vùng đất đổi theo từng bậc
 * built: the project · redesign: full (bản đồ Leo bậc), restyle tokens (màn giải, mục thầy) · v2.0.0 */
/* Hallmark · critique: bản cũ là một nền ô cờ xanh đơn điệu suốt 185 ô; bản này cho mỗi bậc một vùng đất có nền, lối đi và cảnh vật riêng để trẻ thấy mình đang đi một hành trình */
/* Hallmark · waive 11 · .lb-canh, .lb-bien-vung img dùng ảnh PNG Fluent Emoji 3D (public/leo-bac/canh/) · đó là tranh cảnh vật của bản đồ cho trẻ, không phải icon chức năng; cùng nguồn đã chốt ở public/trang-tri/NGUON.md */
/* Hallmark · waive 24b · khoảng cách 5, 6, 10, 14, 18, 22px · thang khoảng cách của Lớp cờ thầy Hiệp là thang của be.css (cùng các giá trị này), giữ để đường Leo bậc của Step 1, Step 2 khớp các tab khác *
/* Hallmark · answered F7 · thẻ, biển và nút bo tròn dày là kiểu riêng của Lớp cờ thầy Hiệp (be.css), người dùng chọn 2026-11-10 */
/* Hallmark · reworded "Step 1 · Chương 1" to "Step 1, chương 1", "6 bậc · 0 bậc đã leo xong" to "Đã leo 0/6 bậc", "Bắt đầu · Trang 3" to "Bắt đầu trang 3", chương "Bàn cờ · Nước đi của các quân · Quân Tốt" to "Bàn cờ, nước đi của các quân, quân Tốt" · 63 names the middle dot */

/* Tab "Leo bậc" (public/leo-bac.js, leo-bac-giai.js). Đường câu đố theo mẫu "Puzzles" của Chess.com (ss/puzzles1.jpg,
   ss/puzzles2.jpg), làm sinh động theo ss/leobac.jpg (người dùng 2026-11-10): mỗi bậc là một VÙNG ĐẤT (rừng cây, núi đá,
   đồi tuyết, đáy biển, sa mạc, lâu đài, vũ trụ, vườn hoa) có nền, lối đi chấm dấu chân và cảnh vật 3D hai bên đường
   (public/leo-bac/canh/, Fluent Emoji MIT). Ô bài là khối dày nhìn nghiêng; quân trên bìa sách đứng ở ô đang làm; tranh
   nét của chính trang sách treo bên đường. Màn giải: bàn cờ của Dashboard (ban-co-cg.css) + lưới nút phủ trên bàn. */

:root {
  /* ô bài */
  --lb-o-vang: #f6d77a; --lb-o-vang-dam: #c9932e; --lb-o-chu: #4a2c00;
  --lb-o-vang2: #f7cf5c; --lb-o-vang2-dam: #b77f17;
  --lb-xanh: #7ccb5b; --lb-xanh-dam: #3f8f2c; --lb-xanh-chu: #2d7a1c; --lb-xanh-toi: #173d0f;
  --lb-cam: #ff9f7a; --lb-cam-dam: #c9532f; --lb-cam-toi: #5a1d07;
  --lb-dang: #fff6c9;
  --lb-trang: #fffef9;
  --lb-khoa-mat: rgb(255 255 255 / .62); --lb-khoa-suon: rgb(30 44 52 / .28); --lb-khoa-chu: #4a5a63;
  /* bóng và ánh */
  --lb-bong-nhe: rgb(0 0 0 / .12); --lb-bong: rgb(0 0 0 / .22); --lb-bong-dam: rgb(0 0 0 / .3);
  --lb-sang-nhe: rgb(255 255 255 / .28); --lb-sang: rgb(255 255 255 / .45); --lb-sang-dam: rgb(255 255 255 / .75);
  --lb-che: rgb(0 0 0);   /* màu mặt nạ hoà hai vùng (chỉ dùng kênh alpha) */
  /* giấy, khung tranh, biển */
  --lb-giay: #fffaf0; --lb-khung: #e5b543; --lb-khung-dam: #a8741a; --lb-bien-goc: #e8dcc2;
  --lb-xam: #d7dde0; --lb-xam-chu: #56636b; --lb-xam-dam: #b3bcc1;
  --lb-sao: #f6c445; --lb-sao-vien: #c48a12;
  --lb-nhac: #fff3cf; --lb-nhac-vien: #f0d58a;
  --lb-tien: #4cc46a; --lb-tien-dam: #2f9a4b;
  /* màn giải */
  --lb-o-di: rgb(255 241 105 / .28); --lb-ky: #5b2bb5; --lb-chon: #fff1e4; --lb-chon-vien: rgb(226 98 11 / .25);
  --lb-dung-nen: #dff5e3; --lb-dung-vien: #a9ddb4; --lb-sai-nen: #ffe4ea; --lb-sai-vien: #f2b3c3;
  --lb-dang-chu: #2a2200; --lb-dang-vien: #d9b500;
  /* mục thầy */
  --lb-thay-vien: #b9c6cd; --lb-thay-chu: #7b8b93; --lb-thay-dang: #fff1c4; --lb-thay-dang-chu: #5a3a00;
  --lb-chan-bong: rgb(20 48 61 / .18);

  /* tám vùng đất: đỉnh, đáy, hai lớp hoa văn, lối đi, chấm dấu chân, chữ biển tên */
  --lbv-rung-dinh: #8fd16f; --lbv-rung-day: #4f9e46; --lbv-rung-van: #5aa84b; --lbv-rung-van2: #9fd57c;
  --lbv-rung-duong: #e9d39b; --lbv-rung-cham: #a87a3a; --lbv-rung-chu: #24511a;
  --lbv-nui-dinh: #d6cfc0; --lbv-nui-day: #9d9282; --lbv-nui-van: #857a6b; --lbv-nui-van2: #ece6da;
  --lbv-nui-duong: #f2eadb; --lbv-nui-cham: #7d6f5b; --lbv-nui-chu: #4a3f30;
  --lbv-tuyet-dinh: #f7fcff; --lbv-tuyet-day: #c6e2f5; --lbv-tuyet-van: #ffffff; --lbv-tuyet-van2: #a9d0ec;
  --lbv-tuyet-duong: #ffffff; --lbv-tuyet-cham: #7fb0d4; --lbv-tuyet-chu: #1f5a85;
  --lbv-bien-dinh: #49b5dc; --lbv-bien-day: #19628f; --lbv-bien-van: rgb(255 255 255 / .35); --lbv-bien-van2: rgb(255 255 255 / .16);
  --lbv-bien-duong: #f1dfab; --lbv-bien-cham: #c09449; --lbv-bien-chu: #0f4a6e;
  --lbv-sa-mac-dinh: #ffe3a6; --lbv-sa-mac-day: #eeb45a; --lbv-sa-mac-van: #e3a14a; --lbv-sa-mac-van2: #fff0c9;
  --lbv-sa-mac-duong: #fff4da; --lbv-sa-mac-cham: #c9862a; --lbv-sa-mac-chu: #6b3f00;
  --lbv-lau-dai-dinh: #e1d4f8; --lbv-lau-dai-day: #a690e2; --lbv-lau-dai-van: #f3ecff; --lbv-lau-dai-van2: #9479dc;
  --lbv-lau-dai-duong: #fbf7ff; --lbv-lau-dai-cham: #8a68d4; --lbv-lau-dai-chu: #43308f;
  --lbv-vu-tru-dinh: #3d4296; --lbv-vu-tru-day: #171a45; --lbv-vu-tru-van: #ffffff; --lbv-vu-tru-van2: #ffe14d;
  --lbv-vu-tru-duong: #5a60c4; --lbv-vu-tru-cham: #ffe14d; --lbv-vu-tru-chu: #23266b;
  --lbv-vuon-hoa-dinh: #ffe6f0; --lbv-vuon-hoa-day: #f6aecb; --lbv-vuon-hoa-van: #ffffff; --lbv-vuon-hoa-van2: #ffd84d;
  --lbv-vuon-hoa-duong: #fff8cf; --lbv-vuon-hoa-cham: #e57fa6; --lbv-vuon-hoa-chu: #8a2453;
}

.man-leo-bac { padding-bottom: 24px; }
.lb-cho { margin: 24px 0; font-weight: 800; color: var(--muc2); }
.lb-cho.loi { color: var(--xau); }

/* --- đầu trang ------------------------------------------------------------------------------------------------------ */
.lb-dau { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px; }
.lb-dau h1 { text-wrap: balance; display: flex; align-items: center; gap: 10px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); color: var(--muc); }
.lb-dau h1 img { filter: drop-shadow(0 3px 0 var(--lb-bong-nhe)); }
.lb-chon-sach { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--the); box-shadow: var(--bong); }
.lb-chon-sach button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; min-width: 96px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: transparent;
  font: 900 1rem/1 var(--chu-to); color: var(--muc2);
}
.lb-chon-sach button img { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 var(--lb-bong-nhe)); }
.lb-chon-sach button[aria-checked="true"] { background: var(--nhan); color: var(--nhan-chu); box-shadow: inset 0 -3px 0 var(--nhan-dam); }
.lb-chon-sach button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.lb-loi-thay { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 12px; }
.lb-loi-thay img { flex: none; }
.lb-loi-thay p {
  position: relative; margin: 0 0 14px; padding: 10px 14px; border-radius: 16px; background: var(--the); box-shadow: var(--bong);
  font-size: .95rem; font-weight: 700; color: var(--muc); max-width: 62ch; text-wrap: pretty;
}
.lb-loi-thay p::before {
  content: ""; position: absolute; left: -9px; bottom: 14px; border: 9px solid transparent; border-right-color: var(--the); border-left: 0;
}
.lb-bao { margin: 0 0 10px; font-weight: 800; color: var(--muc); min-height: 0; }
.lb-bao:empty { display: none; }
.lb-bao:not(:empty) { padding: 10px 14px; border-radius: 14px; background: var(--lb-nhac); box-shadow: inset 0 -3px 0 var(--lb-nhac-vien); }

/* --- bản đồ --------------------------------------------------------------------------------------------------------- */
.lb-ban-do {
  --lb-o: var(--lb-o-vang); --lb-o-dam: var(--lb-o-vang-dam);
  --lb-dx: 50px;
  position: relative; margin: 0 auto; max-width: 880px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: var(--lbv-rung-day);
  box-shadow: inset 0 0 0 4px var(--lb-bong-nhe), var(--bong-noi);
}
.lb-ban-do.sach-s2 { --lb-o: var(--lb-o-vang2); --lb-o-dam: var(--lb-o-vang2-dam); }

/* bộ biến của từng vùng: dùng chung cho dải nền, lối đi (svg) và biển tên vùng */
.vung-rung { --v-dinh: var(--lbv-rung-dinh); --v-day: var(--lbv-rung-day); --v-van: var(--lbv-rung-van); --v-van2: var(--lbv-rung-van2); --v-duong: var(--lbv-rung-duong); --v-cham: var(--lbv-rung-cham); --v-chu: var(--lbv-rung-chu); --v-o1: 133px; --v-r1: 3px; --v-o2: 176px; --v-r2: 5px; }
.vung-nui { --v-dinh: var(--lbv-nui-dinh); --v-day: var(--lbv-nui-day); --v-van: var(--lbv-nui-van); --v-van2: var(--lbv-nui-van2); --v-duong: var(--lbv-nui-duong); --v-cham: var(--lbv-nui-cham); --v-chu: var(--lbv-nui-chu); --v-o1: 106px; --v-r1: 4px; --v-o2: 208px; --v-r2: 9px; }
.vung-tuyet { --v-dinh: var(--lbv-tuyet-dinh); --v-day: var(--lbv-tuyet-day); --v-van: var(--lbv-tuyet-van); --v-van2: var(--lbv-tuyet-van2); --v-duong: var(--lbv-tuyet-duong); --v-cham: var(--lbv-tuyet-cham); --v-chu: var(--lbv-tuyet-chu); --v-o1: 72px; --v-r1: 2.5px; --v-o2: 144px; --v-r2: 3px; }
.vung-bien { --v-dinh: var(--lbv-bien-dinh); --v-day: var(--lbv-bien-day); --v-van: var(--lbv-bien-van); --v-van2: var(--lbv-bien-van2); --v-duong: var(--lbv-bien-duong); --v-cham: var(--lbv-bien-cham); --v-chu: var(--lbv-bien-chu); --v-o1: 121px; --v-r1: 4px; --v-o2: 240px; --v-r2: 8px; }
.vung-sa-mac { --v-dinh: var(--lbv-sa-mac-dinh); --v-day: var(--lbv-sa-mac-day); --v-van: var(--lbv-sa-mac-van); --v-van2: var(--lbv-sa-mac-van2); --v-duong: var(--lbv-sa-mac-duong); --v-cham: var(--lbv-sa-mac-cham); --v-chu: var(--lbv-sa-mac-chu); --v-o1: 91px; --v-r1: 2px; --v-o2: 192px; --v-r2: 3px; }
.vung-lau-dai { --v-dinh: var(--lbv-lau-dai-dinh); --v-day: var(--lbv-lau-dai-day); --v-van: var(--lbv-lau-dai-van); --v-van2: var(--lbv-lau-dai-van2); --v-duong: var(--lbv-lau-dai-duong); --v-cham: var(--lbv-lau-dai-cham); --v-chu: var(--lbv-lau-dai-chu); --v-o1: 114px; --v-r1: 3px; --v-o2: 160px; --v-r2: 2.5px; }
.vung-vu-tru { --v-dinh: var(--lbv-vu-tru-dinh); --v-day: var(--lbv-vu-tru-day); --v-van: var(--lbv-vu-tru-van); --v-van2: var(--lbv-vu-tru-van2); --v-duong: var(--lbv-vu-tru-duong); --v-cham: var(--lbv-vu-tru-cham); --v-chu: var(--lbv-vu-tru-chu); --v-o1: 87px; --v-r1: 1.5px; --v-o2: 208px; --v-r2: 2.5px; }
.vung-vuon-hoa { --v-dinh: var(--lbv-vuon-hoa-dinh); --v-day: var(--lbv-vuon-hoa-day); --v-van: var(--lbv-vuon-hoa-van); --v-van2: var(--lbv-vuon-hoa-van2); --v-duong: var(--lbv-vuon-hoa-duong); --v-cham: var(--lbv-vuon-hoa-cham); --v-chu: var(--lbv-vuon-hoa-chu); --v-o1: 98px; --v-r1: 3px; --v-o2: 153px; --v-r2: 4px; }

/* dải nền của một vùng: màu chuyển từ đáy lên đỉnh + hai lớp chấm hoa văn (cỏ, sỏi, tuyết, bọt, cát, sao…) */
.lb-vung {
  --v-cham1: radial-gradient(circle, var(--v-van) 0 var(--v-r1), transparent calc(var(--v-r1) + .5px));
  --v-cham2: radial-gradient(circle, var(--v-van2) 0 var(--v-r2), transparent calc(var(--v-r2) + .5px));
  position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  /* mỗi ô lặp có vài chấm ở vị trí lệch nhau nên nhìn như rải ngẫu nhiên, không thành lưới */
  background-image: var(--v-cham1), var(--v-cham1), var(--v-cham1), var(--v-cham2), var(--v-cham2), linear-gradient(to top, var(--v-day), var(--v-dinh));
  background-size: var(--v-o1) var(--v-o1), var(--v-o1) var(--v-o1), var(--v-o1) var(--v-o1), var(--v-o2) var(--v-o2), var(--v-o2) var(--v-o2), auto;
  background-position:
    calc(var(--v-o1) * .14) calc(var(--v-o1) * .22), calc(var(--v-o1) * .61) calc(var(--v-o1) * .47),
    calc(var(--v-o1) * .33) calc(var(--v-o1) * .83), calc(var(--v-o2) * .78) calc(var(--v-o2) * .15),
    calc(var(--v-o2) * .27) calc(var(--v-o2) * .64), 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}
.lb-vung.hoa { -webkit-mask-image: linear-gradient(to top, transparent, var(--lb-che) 80px); mask-image: linear-gradient(to top, transparent, var(--lb-che) 80px); }
/* đáy biển: thêm vệt nắng chiếu chéo */
.lb-vung.vung-bien::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(100deg, var(--lbv-bien-van2) 0 46px, transparent 46px 150px);
}

/* lối đi: một đoạn cong mỗi bậc, nền đường + chấm dấu chân; viewBox x theo đơn vị --lb-dx nên co giãn theo khổ */
.lb-loi { position: absolute; top: 0; left: calc(50% - 3 * var(--lb-dx)); width: calc(6 * var(--lb-dx)); z-index: 0; overflow: visible; pointer-events: none; }
.lb-loi path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.lb-loi .nen-loi { stroke: var(--v-duong); stroke-width: 30px; opacity: .85; }
.lb-loi .cham-loi { stroke: var(--v-cham); stroke-width: 5px; stroke-dasharray: 1 14; }
.lb-loi .khoa { opacity: .45; }

/* cảnh vật: hình 3D hai bên đường. Gần: theo --x (đơn vị --lb-dx). Xa: rìa trái/phải theo --ben, sâu vào rìa theo --j */
.lb-canh {
  --c: 52px;
  position: absolute; z-index: 1; width: var(--c); height: auto; pointer-events: none; user-select: none;
  left: calc(50% + var(--x, 0) * var(--lb-dx)); translate: -50% 0; transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 3px var(--lb-bong));
}
.lb-canh.c1 { --c: 44px; }
.lb-canh.c3 { --c: 62px; }
.lb-canh.lat { scale: -1 1; }
.lb-canh.xa { display: none; left: calc(50% + var(--ben) * (2 * var(--lb-dx) + 84px + var(--j) * (50% - 2 * var(--lb-dx) - 140px))); }
.lb-canh.dong { animation: lb-lac 3.4s ease-in-out infinite alternate; }
@keyframes lb-lac { from { rotate: -4deg; } to { rotate: 4deg; } }

/* biển tên vùng ở đầu mỗi bậc */
.lb-bien-vung {
  position: absolute; left: 10px; z-index: 3; margin: 0; max-width: calc(50% - 30px); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; padding: 4px 12px 6px 4px; border-radius: 14px;
  background: var(--lb-giay); color: var(--v-chu); font: 900 .95rem/1.1 var(--chu-to);
  box-shadow: inset 0 -4px 0 var(--lb-bien-goc), 0 6px 14px var(--lb-bong);
}
.lb-bien-vung img { flex: none; width: 32px; height: 32px; }

.lb-o {
  position: absolute; left: calc(50% + var(--k, 0) * var(--lb-dx)); transform: translateX(-50%); z-index: 2;
  width: 86px; height: 62px; padding: 0 0 12px; border: 0; background: none; display: grid; place-items: center;
  color: var(--lb-o-chu); font: 900 1.45rem/1 var(--chu-to); -webkit-tap-highlight-color: transparent;
  --mat: var(--lb-o); --suon: var(--lb-o-dam);
}
/* mặt trên (hình thoi) + sườn dày bên dưới, như khối của Chess.com */
.lb-o::before, .lb-o::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.lb-o::after { top: 10px; background: var(--suon); z-index: -2; }
.lb-o::before {
  top: 0; z-index: -1;
  background: radial-gradient(closest-side, transparent 58%, var(--lb-sang-nhe) 60% 66%, transparent 68%), var(--mat);
}
.lb-o > b, .lb-o > svg { position: relative; text-shadow: 0 1px 0 var(--lb-sang); }
.lb-o > svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-o.dung { --mat: var(--lb-xanh); --suon: var(--lb-xanh-dam); color: var(--lb-trang); }
.lb-o.dung > svg { filter: drop-shadow(0 2px 0 var(--lb-bong)); }
.lb-o.sai { --mat: var(--lb-cam); --suon: var(--lb-cam-dam); color: var(--lb-trang); }
.lb-o.sai > svg { width: 26px; height: 26px; stroke-width: 3.2; }
.lb-o.khoa { --mat: var(--lb-khoa-mat); --suon: var(--lb-khoa-suon); color: var(--lb-khoa-chu); cursor: not-allowed; }
.lb-o.khoa > svg { width: 22px; height: 22px; stroke-width: 2.6; }
.lb-o.dang { --mat: var(--lb-dang); --suon: var(--lb-o-dam); }
.lb-o.dang::before {
  background: radial-gradient(closest-side, transparent 58%, var(--lb-o) 60% 70%, transparent 72%), var(--lb-dang);
}
.lb-o:not(.khoa):hover::before { filter: brightness(1.06); }
.lb-o:not(.khoa):active { transform: translate(-50%, 4px); }
.lb-o:focus-visible { outline: none; filter: drop-shadow(0 0 2px var(--lb-trang)) drop-shadow(0 0 3px var(--focus)) drop-shadow(0 0 3px var(--focus)); }

/* quân trên bìa sách đứng trên ô đang làm, nhún nhảy chờ bé; ảnh đại diện của bé gắn bên vai */
.lb-quan {
  position: absolute; left: 50%; bottom: calc(100% - 34px); translate: -50% 0; width: 80px; height: 80px;
  animation: lb-nhay 1.5s cubic-bezier(.3, 0, .3, 1) infinite;
}
.lb-quan::before {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 52px; height: 12px; translate: -50% 0; border-radius: 50%;
  background: var(--lb-bong); animation: lb-bong 1.5s cubic-bezier(.3, 0, .3, 1) infinite;
}
.lb-quan-hinh { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 var(--lb-bong-nhe)); }
.lb-quan-be {
  position: absolute; right: -16px; top: -6px; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden;
  border-radius: 50%; background: var(--lb-trang); box-shadow: 0 0 0 3px var(--lb-trang), 0 4px 10px var(--lb-bong);
}
.lb-quan-be img { width: 30px; height: 30px; object-fit: cover; }
.lb-quan-be b { font: 900 1rem/1 var(--chu-to); color: var(--nhan-dam); }
@keyframes lb-nhay { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-9px); } }
@keyframes lb-bong { 0%, 100% { scale: 1; } 45% { scale: .7; opacity: .6; } }

/* mốc bậc: tấm biển "Trang N" */
.lb-cong {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; width: min(330px, calc(100% - 28px)); min-height: 84px;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px 10px; border: 0; border-radius: 20px; text-align: left;
  background: var(--lb-giay); color: var(--muc); box-shadow: inset 0 -6px 0 var(--lb-bien-goc), 0 10px 22px var(--lb-bong);
}
.lb-cong-so {
  flex: none; display: grid; place-items: center; align-content: center; width: 62px; height: 62px; border-radius: 16px;
  background: var(--lb-o); color: var(--lb-o-chu); box-shadow: inset 0 -5px 0 var(--lb-o-dam);
}
.lb-cong-so small { font: 800 .78rem/1 var(--chu); }
.lb-cong-so b { font: 900 1.7rem/1 var(--chu-to); }
.lb-cong-chu { display: grid; gap: 4px; min-width: 0; }
.lb-cong-chu b { font: 900 1.05rem/1.2 var(--chu-to); }
.lb-cong-chu small { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .88rem; color: var(--mo); }
.lb-cong-chu svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
.lb-cong.xong .lb-cong-so { background: var(--lb-xanh); color: var(--lb-xanh-toi); box-shadow: inset 0 -5px 0 var(--lb-xanh-dam); }
.lb-cong.xong .lb-cong-chu small { color: var(--lb-xanh-chu); }
.lb-cong.xong .lb-cong-chu svg { fill: var(--lb-sao); stroke: var(--lb-sao-vien); }
.lb-cong.khoa { background: var(--lb-sang-dam); }
.lb-cong.khoa .lb-cong-so { background: var(--lb-xam); color: var(--lb-xam-chu); box-shadow: inset 0 -5px 0 var(--lb-xam-dam); }
.lb-cong:hover:not(.khoa) { filter: brightness(1.03); }
.lb-cong:focus-visible, .lb-chuong:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* biển đầu chương */
.lb-chuong {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; width: min(380px, calc(100% - 28px));
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px;
  background: var(--khoi); color: var(--lb-trang); box-shadow: inset 0 -6px 0 var(--khoi-dam), 0 12px 26px var(--lb-bong-dam);
}
.lb-chuong img { flex: none; width: 54px; height: auto; border-radius: 6px; box-shadow: 0 3px 8px var(--lb-bong-dam); background: var(--lb-trang); }
.lb-chuong small { font-weight: 800; font-size: .82rem; opacity: .9; }
.lb-chuong h2 { text-wrap: balance; font-size: 1.2rem; margin: 2px 0 4px; overflow-wrap: break-word; min-width: 0; }
.lb-chuong p { margin: 0; font-size: .88rem; font-weight: 700; color: var(--mo-khoi, var(--lb-sang-dam)); }

/* đích ở đỉnh đường */
.lb-dinh {
  position: absolute; left: 50%; translate: -50% 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 6px 18px 8px 8px; border-radius: 20px; background: var(--lb-giay); color: var(--muc);
  font: 900 1.05rem/1 var(--chu-to); box-shadow: inset 0 -5px 0 var(--lb-bien-goc), 0 10px 22px var(--lb-bong);
}

/* tranh của trang sách, đóng khung treo bên đường */
.lb-tranh {
  position: absolute; z-index: 1; margin: 0; max-width: min(240px, calc(50% - var(--lb-dx) - 26px)); padding: 7px;
  background: var(--lb-giay); border-radius: 6px;
  box-shadow: 0 0 0 4px var(--lb-khung), 0 0 0 7px var(--lb-khung-dam), 0 12px 22px var(--lb-bong-dam);
  transform: rotate(-4deg);
}
.lb-tranh.trai { right: calc(50% + var(--lb-dx) + 16px); }
.lb-tranh.phai { left: calc(50% + var(--lb-dx) + 16px); transform: rotate(3deg); }
.lb-tranh img { display: block; width: auto; max-width: 100%; height: auto; max-height: 150px; }
.lb-tranh.mo-nhat { opacity: .6; filter: grayscale(.6); }

/* chân: tiến độ + nút giải tiếp (dính đáy màn hình) */
.lb-chan {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 14px auto 0; max-width: 880px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--the); box-shadow: 0 -6px 22px var(--lb-chan-bong);
}
.lb-tien { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: baseline; }
.lb-tien b { font: 900 1.05rem/1 var(--chu-to); }
.lb-tien span { font-weight: 800; color: var(--mo); font-size: .9rem; }
.lb-thanh { grid-column: 1 / -1; display: block; height: 10px; border-radius: 999px; background: var(--nen2); overflow: hidden; }
.lb-thanh i { display: block; height: 100%; border-radius: inherit; background: var(--lb-tien); }
.lb-giai-tiep { flex: none; text-decoration: none; justify-content: center; white-space: nowrap; }
.lb-chan .lb-cho { margin: 0; flex: 1.4; font-size: .92rem; }

/* --- màn giải -------------------------------------------------------------------------------------------------------- */
.lb-top { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.lb-top .nut-tron { flex: none; display: grid; place-items: center; text-decoration: none; color: var(--muc); }
.lb-top .nut-tron svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-tieu { min-width: 0; }
.lb-tieu small { font-weight: 800; color: var(--muc2); font-size: .9rem; }
.lb-tieu h1 { text-wrap: balance; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); color: var(--muc); }

.lb-chuoi { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chuoi li {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font: 900 .9rem/1 var(--chu-to);
  background: var(--the); color: var(--muc2); box-shadow: inset 0 -3px 0 var(--vien);
}
.lb-chuoi li svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-chuoi li.dung { background: var(--lb-tien); color: var(--lb-xanh-toi); box-shadow: inset 0 -3px 0 var(--lb-tien-dam); }
.lb-chuoi li.sai { background: var(--lb-cam); color: var(--lb-cam-toi); box-shadow: inset 0 -3px 0 var(--lb-cam-dam); }
.lb-chuoi li.dang { background: var(--vang-nhan); color: var(--lb-dang-chu); box-shadow: inset 0 -3px 0 var(--lb-dang-vien), 0 0 0 3px var(--the); }

.lb-giai { display: grid; gap: 16px 22px; align-items: start; grid-template-columns: minmax(0, 600px) minmax(280px, 340px); justify-content: center; }
.lb-ban { position: relative; padding: 4px; border-radius: 14px; min-width: 0; }
.lb-ban .cg-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Đúng / sai: đổi màu viền sẵn có của bàn cờ, không bọc thêm vòng nữa (như Khởi động, người dùng 2026-11-10). */
.lb-ban cg-container { transition: box-shadow .2s ease; }
.lb-ban.ok { --khung: var(--lb-tien-dam); }
.lb-ban.sai { --khung: var(--xau); }

/* lưới nút phủ trên bàn: đánh dấu +, khoanh tròn, đặt ký hiệu, đặt quân */
.lb-luoi { position: absolute; inset: 4px; z-index: 5; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.lb-luoi button {
  position: relative; border: 0; padding: 0; background: transparent; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lb-luoi button:hover { background: var(--lb-o-di); }
.lb-luoi button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.lb-luoi .cong::after {
  content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 900 min(9vw, 3.4rem)/1 var(--chu-to); color: var(--muc); text-shadow: 0 0 3px var(--lb-trang), 0 0 6px var(--lb-trang);
}
.lb-luoi .tron::after {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; border: clamp(3px, .8vw, 5px) solid var(--xau);
  box-shadow: 0 0 0 2px var(--lb-sang-dam);
}
.lb-luoi .dich { box-shadow: inset 0 0 0 4px var(--vang); border-radius: 4px; }
.lb-luoi .ky b {
  position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(1.5rem, 6vw, 2.4rem)/1 var(--chu-to); color: var(--lb-ky);
  text-shadow: 0 0 3px var(--lb-trang), 0 0 6px var(--lb-trang);
}

.lb-phai { display: grid; gap: 12px; position: sticky; top: 84px; }
.lb-yc { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--khoi); color: var(--lb-trang); font-weight: 700; text-wrap: pretty;
  box-shadow: inset 0 -5px 0 var(--khoi-dam); }
.lb-de { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--the); box-shadow: inset 0 -4px 0 var(--vien), var(--bong); }
.lb-so { margin: 0; font-weight: 800; color: var(--mo); }
.lb-so b { color: var(--muc); }
.lb-dich { margin: 0; font-weight: 700; color: var(--muc); }
.lb-chu-giai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .9rem; font-weight: 700; color: var(--muc2); }
.mau-cong { font: 900 1.4rem/1 var(--chu-to); color: var(--muc); }
.mau-tron { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--xau); }
.lb-nut-hang { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-nut-hang > * { flex: 1; justify-content: center; }
.lb-kiem { justify-content: center; }

.lb-khay { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-nhat {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 14px 8px 8px; border: 2px solid var(--vien); border-bottom-width: 5px;
  border-radius: 16px; background: var(--the); font-weight: 800; color: var(--muc);
}
.lb-nhat img { width: 52px; height: 52px; }
.lb-nhat.ky b { display: grid; place-items: center; width: 40px; height: 40px; font: 900 1.7rem/1 var(--chu-to); color: var(--lb-ky); }
.lb-nhat[aria-pressed="true"] { border-color: var(--cta); background: var(--lb-chon); box-shadow: 0 0 0 3px var(--lb-chon-vien); }
.lb-nhat.da-dat:not([aria-pressed="true"]) { opacity: .55; }

.lb-ten-o { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-ten-o li { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--muc2); }
.lb-o-ten {
  min-width: 76px; min-height: 48px; border: 2px solid var(--vien); border-radius: 12px; background: var(--nen2);
  font: 900 1.35rem/1 var(--chu-to); color: var(--muc);
}
.lb-o-ten[aria-pressed="true"] { border-color: var(--cta); background: var(--lb-chon); }
.lb-phim { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.lb-phim button {
  min-height: 46px; padding: 0; border: 2px solid var(--vien); border-bottom-width: 4px; border-radius: 10px; background: var(--the);
  font: 900 1.15rem/1 var(--chu-to); color: var(--muc);
}
.lb-phim button:active { transform: translateY(2px); border-bottom-width: 2px; }

.lb-lua { display: grid; gap: 8px; }
.lb-lua button { justify-content: center; min-height: 52px; }

.lb-ket { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; color: var(--muc); }
.lb-ket:empty { display: none; }
.lb-ket:not(:empty) { padding: 12px 14px; border-radius: 16px; background: var(--the); box-shadow: var(--bong); }
.lb-ket svg { flex: none; width: 34px; height: 34px; padding: 5px; border-radius: 50%; fill: none; stroke: var(--lb-trang); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-ket span { flex: 1; min-width: 12ch; }
.lb-ket.dung { background: var(--lb-dung-nen); box-shadow: inset 0 -3px 0 var(--lb-dung-vien); }
.lb-ket.dung svg { background: var(--lb-tien-dam); }
.lb-ket.sai { background: var(--lb-sai-nen); box-shadow: inset 0 -3px 0 var(--lb-sai-vien); }
.lb-ket.sai svg { background: var(--xau); }
.lb-ket.nhac { background: var(--lb-nhac); box-shadow: inset 0 -3px 0 var(--lb-nhac-vien); }

/* xong bậc */
.lb-xong {
  max-width: 520px; margin: 10px auto; padding: 24px 20px; border-radius: 24px; text-align: center; display: grid; gap: 12px; justify-items: center;
  background: var(--the); box-shadow: inset 0 -6px 0 var(--vien), var(--bong-noi);
}
.lb-xong-sao { display: flex; gap: 6px; }
.lb-xong-sao svg { width: 46px; height: 46px; fill: var(--lb-sao); stroke: var(--lb-sao-vien); stroke-width: 1.5; stroke-linejoin: round; }
.lb-xong-sao svg:nth-child(2) { width: 60px; height: 60px; margin-top: -10px; }
.lb-xong h2 { text-wrap: balance; font-size: 1.6rem; color: var(--muc); }
.lb-xong p { margin: 0; font-weight: 700; color: var(--muc2); }
.lb-xong-tranh { margin: 0; width: min(260px, 80%); padding: 8px; background: var(--lb-giay); border-radius: 6px;
  box-shadow: 0 0 0 4px var(--lb-khung), 0 0 0 7px var(--lb-khung-dam), 0 10px 20px var(--lb-bong); transform: rotate(-2deg); }
.lb-xong-tranh img { display: block; width: 100%; height: auto; }
.lb-xong .nut-lon { text-decoration: none; justify-content: center; }

@media (min-width: 700px) {
  .lb-ban-do { --lb-dx: 78px; }
  .lb-canh { --c: 70px; }
  .lb-canh.c1 { --c: 58px; }
  .lb-canh.c3 { --c: 88px; }
  .lb-canh.xa { display: block; }
  .lb-bien-vung { left: 18px; font-size: 1.05rem; }
  .lb-bien-vung img { width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  .lb-giai { grid-template-columns: minmax(0, 1fr); }
  .lb-ban { margin: 0 -8px; }
  .lb-phai { position: static; }
  /* điện thoại: công cụ + nút Kiểm tra ngay dưới bàn, lời yêu cầu chung xuống cuối */
  .lb-ket { order: -2; }
  .lb-de { order: -1; }
}
@media (max-width: 600px) {
  /* chuỗi bài một hàng (12 ô vừa 351px), tên ô ba cột: công cụ lên gần bàn cờ hơn */
  .lb-chuoi { gap: 2px; margin-bottom: 10px; }
  .lb-chuoi li { width: 25px; height: 28px; border-radius: 7px; font-size: .8rem; }
  .lb-chuoi li svg { width: 15px; height: 15px; }
  .lb-top { margin-bottom: 8px; }
  .lb-ten-o { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-ten-o li { flex-direction: column; gap: 2px; }
  .lb-ten-o li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lb-o-ten { width: 100%; }
  .lb-de { padding: 12px; gap: 10px; }
}
@media (max-width: 420px) {
  .lb-loi-thay img { width: 56px; height: 56px; }
  .lb-loi-thay p { font-size: .88rem; }
  .lb-chan { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .lb-giai-tiep { padding-left: 14px; padding-right: 14px; font-size: 1rem; }
  .lb-chon-sach button { min-width: 0; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-quan, .lb-quan::before, .lb-canh.dong { animation: none; }
  .lb-ban cg-container { transition: none; }
  .lb-chuoi li.dang { transform: none; }
}

/* --- Bảng của thầy: mục Leo bậc (thay-leo-bac.js) ------------------------------------------------------------------- */
.lb-thay-form { display: grid; gap: 10px; margin: 0 0 16px; }
.lb-thay-form label[for] { font-weight: 800; }
.lb-thay-form select { min-height: 44px; max-width: 100%; padding: 0 10px; border: 2px solid var(--vien); border-radius: 12px; background: var(--the); font-weight: 700; }
.lb-thay-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-thay-bang th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--the); white-space: nowrap; text-align: left; }
.lb-thay-bang thead th { text-align: center; white-space: nowrap; }
.lb-thay-bang td { padding: 4px; text-align: center; }
.lb-thay-o {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 2px dashed var(--lb-thay-vien);
  background: transparent; color: var(--lb-thay-chu); font: 900 .78rem/1 var(--chu); vertical-align: middle;
}
.lb-thay-o svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-thay-o.mo { border: 2px solid var(--nhan); background: var(--nhan-nhat); }
.lb-thay-o.dang { border: 2px solid var(--lb-o-vang-dam); background: var(--lb-thay-dang); color: var(--lb-thay-dang-chu); }
.lb-thay-o.xong { border: 2px solid var(--lb-tien-dam); background: var(--lb-tien); color: var(--lb-xanh-toi); }
.lb-thay-o.dong { border-style: dashed; }
.lb-thay-o:hover { filter: brightness(1.05); }
.lb-thay-o:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb-thay-chu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: .86rem; font-weight: 700; color: var(--mo); }
.lb-thay-chu .lb-thay-o { width: 30px; height: 30px; font-size: .62rem; }
.lb-thay-form .gb-ai { min-width: 0; }          /* fieldset mặc định giữ min-content → tràn ngang trên điện thoại */
.lb-thay-form > * { min-width: 0; }
.lb-thay-form label[for] { font-size: .9rem; color: var(--muc2); }