/* Say Piano – màn Khu rừng (#/map): bản đồ rừng cuộn ngang, mỗi bài một nút.
 * JS: student/screens/khu-rung.js (+ student/nen-khu-rung.js nền v3, student/hop-nhac.js Hộp nhạc). Thiết kế nền v3: docs/thiet-ke/khu-rung/nen-v3/
 * (mỗi Vùng một bảng màu; .kr--dem / .kr--ngay / .kr--giang-sinh). Nạp SAU khung-ngang.css, game.css, kinh-te.css.
 * Android cũ: ảnh nền đã làm mờ sẵn lúc build (tools/tao-nen-khu-rung.py) – KHÔNG bộ lọc làm mờ lúc chạy; hiệu ứng chỉ
 * transform/opacity; lớp kr--nhe (máy yếu / giảm chuyển động) bỏ parallax, đốm sáng nhấp nháy, nhân vật nảy. Không giãn khoảng cách chữ. */

/* ---------- khung: bản đồ tràn cả vùng bên phải thanh dọc; thanh trên (chip) nổi trên bản đồ ---------- */
.scr--kr .scr__khung { position: relative; padding-left: 0; padding-right: 0; }
.scr--kr .scr__top { position: absolute; z-index: 7; top: 0; right: 0; left: auto; padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 0 0;
  min-height: 0; pointer-events: none; }
.scr--kr .scr__top > * { pointer-events: auto; }
.scr--kr .scr__top > .scr__spacer { display: none; }
.scr--kr .scr__main { position: static; padding: 0; }
.scr--kr .scr__body { position: static; }
.kr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.kr { position: absolute; inset: 0; overflow: hidden; background: #0C1230; color: var(--ink); --kr-vang: #FFE58A; --kr-nhan: #FFD23F;
  /* đường đi: màu vệt + độ mờ (đêm) */
  --kr-duong: #fff; --kr-duong-op: .1; --kr-hao-op: .05; --kr-khoa1: rgba(122, 132, 168, .94); --kr-khoa2: rgba(58, 67, 102, .94); --kr-khoa-ic: #E8ECF8; }
.kr--ngay { background: #6DB46A; --kr-duong: #F6E7C4; --kr-duong-op: .78; --kr-hao-op: .22; --kr-khoa1: rgba(201, 211, 230, .96); --kr-khoa2: rgba(127, 140, 171, .96); }
.kr--giang-sinh { background: #E6EEF8; --kr-duong: #fff; --kr-duong-op: .8; --kr-hao-op: .2; }
.kr--giang-sinh .kr-dl--bong { opacity: .3; }

/* ---------- nền v3: trời + hai lớp ô lặp (parallax chỉ transform) + lớp trên (mép lá, đốm sáng, tuyết) ---------- */
.kr-nen, .kr-tren { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kr-tren { z-index: 4; }
.kr-canh, .kr-canh-tren { position: absolute; inset: 0; transition: opacity .6s ease; }
.kr-canh.is-moi, .kr-canh-tren.is-moi { opacity: 0; }
.kr-troi__c { position: absolute; left: 0; top: 0; display: block; }
.kr-lop { position: absolute; left: 0; top: 0; height: 100%; background-repeat: repeat-x; background-position: 0 0; }
.kr-xa, .kr-gan { will-change: transform; }
.kr--nhe .kr-xa, .kr--nhe .kr-gan { will-change: auto; }
.kr-anh-troi, .kr-nang { width: 100%; background-repeat: no-repeat; background-position: right top; background-size: auto 100%; }
.kr-tien { position: absolute; top: 0; bottom: 0; background-repeat: no-repeat; background-position: 0 0; background-size: auto 100%; opacity: .9; }
.kr-tien--trai { left: 0; }
.kr-tien--phai { right: 0; transform: scaleX(-1); }
.kr-tuyet { position: absolute; left: 0; top: 0; z-index: 1; display: block; }
.kr::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(2, 6, 20, .45) 100%); }
.kr--ngay::after { background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 65%, rgba(10, 40, 20, .18) 100%); }
.kr--nhe::after { display: none; }

/* cuộn gốc */
.kr-cuon { position: absolute; inset: 0; z-index: 3; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; }
.kr-cuon::-webkit-scrollbar { display: none; }
.kr-the-gioi { position: relative; height: 100%; }
.kr-duong { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
/* mỗi lớp đường là một <g> tô đặc + độ mờ chung (khúc gối nhau không đậm lên) */
.kr-d { fill: none; stroke-linecap: round; }
.kr-dl--bong { opacity: .22; transform: translateY(4px); }
.kr-dl--bong .kr-d { stroke: #000; stroke-width: 22px; }
.kr-dl--hao { opacity: var(--kr-hao-op); }
.kr-dl--hao .kr-d { stroke: var(--kr-duong); stroke-width: 34px; }
.kr-dl--nen { opacity: var(--kr-duong-op); }
.kr-dl--nen .kr-d { stroke: var(--kr-duong); stroke-width: 17px; }
.kr-dl--sang { opacity: .28; }
.kr-dl--sang .kr-d { stroke: var(--kr-nhan); stroke-width: 15px; }
.kr-dl--di { opacity: .9; }
.kr-dl--di .kr-d { stroke: var(--kr-nhan); stroke-width: 6px; }

/* một Cửa = một khối; nút nhận chạm */
.kr-doan { position: absolute; top: 0; height: 100%; pointer-events: none; }

/* biển "Cửa N · tên" trên dây khuông */
.kr-bien { position: absolute; z-index: 1; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px;
  border-radius: 11px; background: #7A5434; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: none; }
.kr-bien b { flex: none; height: 24px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; background: rgba(0, 0, 0, .16);
  color: #FFE3B0; font-size: 11.5px; }
.kr-bien span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kr-bien.is-dang-hoc { background: #FFD966; color: #3A2400; box-shadow: 0 0 0 4px rgba(255, 229, 138, .25); }
.kr-bien.is-dang-hoc b { color: #7A4A00; }
.kr-bien.is-khoa { background: #34236E; color: #C9C3E0; }
.kr-bien.is-khoa b { color: #8E88AE; }
.kr-bien__sao { flex: none; width: 18px; height: 18px; margin-left: -2px; }   /* trong biển, sau tên (không chìa ra góc) */
.kr-bien__sao path { fill: #FFD23F; stroke: #A86F00; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- nút bài: khối cầu 3D, tâm đúng giữa đường (left/top = toạ độ trên đường) ----------
 * xong: màu nhấn của vùng + dấu tích nổi; hiện tại: cầu trắng lớn, số, vòng + quầng màu nhấn; mở: cầu trắng nhỏ, số;
 * khoá: kính mờ, ổ khoá nổi. Bóng mềm dưới khối (::before). */
.kr-nut { position: absolute; z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; border-radius: 50%; background: none;
  pointer-events: auto; cursor: pointer; color: #fff; font: inherit; -webkit-tap-highlight-color: transparent; }
.kr-nut::before { content: ""; position: absolute; left: 9px; right: 9px; bottom: -3px; height: 11px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); }
.kr-nut__mat { position: absolute; inset: 5px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .3) 100%),
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 32%), var(--kr-nhan);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); }
.kr-nut__mat::before { content: ""; position: absolute; left: 22%; right: 22%; top: 7%; height: 30%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }
.kr-nut__mat > * { position: relative; }
.kr-nut__mat b { font-size: 21px; font-weight: 800; line-height: 1; color: #1A2348; text-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
.kr-ic { width: 25px; height: 25px; display: block; }
/* mở (chưa phải bài hiện tại): cầu trắng nhỏ, viền màu nhấn mảnh */
.kr-nut.is-mo .kr-nut__mat { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(30, 40, 80, .22) 100%),
    radial-gradient(circle at 40% 30%, #FFFFFF 0%, #F1F3FA 62%, #C9D0E4 100%);
  box-shadow: inset 0 0 0 2.5px var(--kr-nhan); }
.kr-nut.is-mo .kr-nut__mat b { font-size: 19px; }
/* khoá: kính mờ (không làm mờ phía sau: tô sẵn màu trong suốt nhẹ) */
.kr-nut.is-khoa .kr-nut__mat { inset: 7px; color: var(--kr-khoa-ic);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25) 100%), radial-gradient(circle at 40% 30%, var(--kr-khoa1) 0%, var(--kr-khoa2) 100%);
  box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .22); }
.kr-nut.is-khoa .kr-nut__mat::before { opacity: .35; }
.kr-nut.is-khoa .kr-ic { width: 21px; height: 21px; }
/* hiện tại: cầu trắng lớn + số, vòng màu nhấn, quầng sáng (::after, giữa tâm) */
.kr-nut.is-hien-tai { width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 3; }
.kr-nut.is-hien-tai .kr-nut__mat { inset: 4px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(30, 40, 80, .2) 100%),
    radial-gradient(circle at 40% 30%, #FFFFFF 0%, #F1F3FA 65%, #C9D0E4 100%);
  box-shadow: inset 0 0 0 3px var(--kr-nhan); }
.kr-nut.is-hien-tai .kr-nut__mat::before { opacity: .9; }
.kr-nut.is-hien-tai .kr-nut__mat b { font-size: 24px; }
.kr-nut.is-hien-tai::after { content: ""; position: absolute; z-index: -1; inset: -7px; border-radius: 50%; background: var(--kr-nhan); opacity: .2;
  box-shadow: none; }
.kr-nut:focus-visible, .kr-tt:focus-visible { outline: none; }
.kr-nut:focus-visible .kr-nut__mat, .kr-nut.is-chon .kr-nut__mat { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38), 0 0 0 3px #fff, 0 0 0 6px rgba(255, 229, 138, .5); }
.kr-nut.is-hien-tai.is-chon .kr-nut__mat, .kr-nut.is-hien-tai:focus-visible .kr-nut__mat { box-shadow: inset 0 0 0 3px var(--kr-nhan); }
.kr-nut:active .kr-nut__mat { transform: scale(.95); }

/* sao trên nút */
.kr-sao { position: absolute; left: 50%; top: -22px; width: 54px; height: 22px; margin-left: -27px; overflow: visible; pointer-events: none; }
.kr-sao__i { fill: #33435E; stroke: #4A5B78; stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.kr-sao__i.is-co { fill: #FFD23F; stroke: #A86F00; }
.kr-sao__i.is-moi { opacity: 0; }
.kr-sao__i.is-bat { animation: kr-sao-bat .52s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes kr-sao-bat { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.6) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* nhân vật dẫn đứng trên nút hiện tại */
.kr-nv { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); pointer-events: none; line-height: 0; }
.kr-nv > svg, .kr-nv > .nv3d { display: block; height: auto; animation: kr-nay 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes kr-nay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.kr--nhe .kr-nv > svg, .kr--nhe .kr-nv > .nv3d { animation: none; }

/* ---------- thử thách: cửa vòm ---------- */
.kr-tt { position: absolute; z-index: 2; width: 92px; height: 90px; margin: -60px 0 0 -46px; padding: 0; border: 0; background: none; pointer-events: auto;
  cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.kr-vom { width: 92px; height: 90px; display: block; overflow: visible; }
.kr-vom__khung { fill: #6B4A2E; }
.kr-vom__la { fill: #2F9152; }
.kr-vom__la2 { fill: #7FDB8C; }
.kr-vom__cua { fill: var(--tone-d, #C9650A); }
.kr-tt.is-xong .kr-vom__cua, .kr-tt.is-mo .kr-vom__cua, .kr-tt.is-hien-tai .kr-vom__cua { fill: #F2902A; }
.kr-tt.is-khoa .kr-vom__khung { fill: #2A3550; }
.kr-tt.is-khoa .kr-vom__la { fill: #2B4A45; }
.kr-tt.is-khoa .kr-vom__la2 { fill: #3A5C57; }
.kr-tt.is-khoa .kr-vom__cua { fill: #1A2236; }
.kr-tt__khoa { position: absolute; left: 50%; top: 50px; width: 22px; height: 22px; margin-left: -11px; color: #8EA0BF; }
.kr-tt__khoa .kr-ic { width: 22px; height: 22px; }
.kr-tt__nhan { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); height: 21px; padding: 0 10px; border-radius: 11px;
  display: inline-flex; align-items: center; background: #FFD966; color: #3A2400; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #B87A0C; }
.kr-tt.is-khoa .kr-tt__nhan { background: #34236E; color: #AFA6C8; box-shadow: inset 0 0 0 1px #4E3C8C; }
/* ban ngày: cửa vòm / cổng / biển chưa mở dịu lại (gỗ xám xanh, lá xanh) thay khối tối của đêm */
.kr--ngay .kr-tt.is-khoa .kr-vom__khung, .kr--ngay .kr-cong.is-khoa .kr-cong__cot { fill: #6E7A96; }
.kr--ngay .kr-tt.is-khoa .kr-vom__la, .kr--ngay .kr-cong.is-khoa .kr-cong__la { fill: #3F7D52; }
.kr--ngay .kr-tt.is-khoa .kr-vom__la2 { fill: #8CC79A; }
.kr--ngay .kr-tt.is-khoa .kr-vom__cua { fill: #4A5574; }
.kr--ngay .kr-tt.is-khoa .kr-tt__nhan, .kr--ngay .kr-bien.is-khoa, .kr--ngay .kr-cong.is-khoa .kr-cong__bien { background: #55617F; color: #E6E9F3; }
.kr--ngay .kr-bien.is-khoa b, .kr--ngay .kr-cong.is-khoa .kr-cong__bien small { color: #C9CFE0; }
.kr-tt .kr-sao { top: -12px; width: 60px; margin-left: -30px; }
.kr-tt.is-chon .kr-tt__nhan, .kr-tt:focus-visible .kr-tt__nhan { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255, 229, 138, .45); }
.kr-tt.is-hien-tai .kr-vom { transform-origin: 50% 100%; }
.kr-tt.is-hien-tai::before { content: ""; position: absolute; z-index: -1; left: -14px; right: -14px; bottom: -8px; height: 30px; border-radius: 50%;
  border: 2.5px solid rgba(255, 229, 138, .75); box-shadow: none; }

/* ---------- cổng vùng ---------- */
.kr-cong { position: absolute; z-index: 1; width: 120px; height: 124px; margin: -110px 0 0 -60px; pointer-events: none; }
.kr-cong__svg { width: 120px; height: 124px; display: block; overflow: visible; }
.kr-cong__cot { fill: #5A3E2A; }
.kr-cong__la { fill: #2F9152; }
.kr-cong.is-khoa .kr-cong__cot { fill: #3A3448; }
.kr-cong.is-khoa .kr-cong__la { fill: #2B4A45; }
.kr-cong__bien { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); min-width: 96px; padding: 4px 12px 5px; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; background: #7A5434; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  text-align: center; white-space: nowrap; }
.kr-cong__bien small { font-size: 9.5px; font-weight: 700; color: #FFE3B0; line-height: 1.2; }
.kr-cong__bien b { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25; }
.kr-cong.is-khoa .kr-cong__bien { background: #3C3550; }
.kr-cong.is-khoa .kr-cong__bien small { color: #AFA6C8; }
.kr-cong.is-khoa .kr-cong__bien b { color: #D9D3EE; }
.kr-nhay { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); height: 40px; padding: 0 16px 0 10px; border: 1.5px dashed rgba(255, 255, 255, .65);
  border-radius: 19px; display: inline-flex; align-items: center; gap: 6px; background: #FFD966; color: #3A2400; font: inherit; font-size: 14px; font-weight: 700;
  white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 5px rgba(255, 229, 138, .22);
  -webkit-tap-highlight-color: transparent; }
.kr-nhay::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #FFD966; }
.kr-nhay__ic { line-height: 0; color: #7A4A00; }
.kr-nhay:active { transform: translateX(-50%) scale(.96); }
.kr-nhay:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255, 229, 138, .6); }

/* ---------- Hộp nhạc trên bản đồ (lớp .cd-hop dùng chung game.css/kinh-te.css – ở đây không filter) ---------- */
.kr-hop { position: absolute; z-index: 2; transform: translate(-50%, -62%); }
.kr .cd-hop { position: relative; }
.kr .cd-hop::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.kr .cd-hop svg { position: relative; }
.kr .cd-hop.is-khoa svg { filter: none; opacity: .55; }
.kr .cd-hop.is-vang:not(.is-khoa) .cd-hop__svg { filter: none; }
.kr .cd-hop.is-vang:not(.is-khoa)::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 58, .45), rgba(255, 210, 58, 0) 70%); }
.kr .cd-hop.is-cho::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 229, 138, .4), rgba(255, 229, 138, 0) 70%); }
.kr--nhe .cd-hop.is-cho svg { animation: none; }

/* ---------- đốm sáng mềm (bokeh / đom đóm – số và màu theo vùng, game/nen-rung.js dsDom): gradient tròn, chỉ đổi opacity ---------- */
.kr-dom { position: absolute; inset: 0; }
.kr-dom i { position: absolute; border-radius: 50%; opacity: .5; animation: kr-dom 3s ease-in-out infinite alternate; }
@keyframes kr-dom { from { opacity: .18; } to { opacity: .7; } }
.kr--ngay .kr-dom i { opacity: .4; }
.kr--nhe .kr-dom i { animation: none; }

/* ---------- thẻ đầu: vùng ở tâm khung ---------- */
.kr-dau { position: absolute; z-index: 6; left: 12px; top: calc(var(--safe-t) + 10px); max-width: min(44%, 380px); display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 9px 8px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); pointer-events: none; }
.kr-dau__so { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 700;
  color: var(--tone-on); background: var(--tone); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5); }
.kr-dau__txt { min-width: 0; }
.kr-dau__k { margin: 0; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-dau__t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-dau__thanh { display: block; width: 150px; max-width: 100%; height: 7px; margin-top: 5px; border-radius: 4px; background: rgba(255, 255, 255, .92); overflow: hidden; }
.kr-dau__thanh > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-progress); }

/* ---------- thẻ nút đang chọn (bóng thoại) ---------- */
.kr-the { position: absolute; z-index: 6; left: 0; top: 0; display: flex; align-items: center; gap: 14px; max-width: min(380px, 62%); min-width: 220px;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: #FFFDF6; color: #0F004E; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
  transition: opacity .15s ease; }
.kr-the[hidden] { display: none; }
.kr-the.is-an { opacity: 0; pointer-events: none; }
.kr-the__txt { flex: 1; min-width: 0; }
.kr-the__k { margin: 0; font-size: 12px; font-weight: 700; color: #6A5F94; line-height: 1.3; }
.kr-the__t { margin: 2px 0 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kr-the__nhac { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #6A5F94; }
.kr-the__choi, .kr-the__on { flex: none; height: 40px; border: 0; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; color: #fff; cursor: pointer; background: var(--nut-xanh); box-shadow: 0 4px 0 var(--nut-xanh-bd);
  -webkit-tap-highlight-color: transparent; }
.kr-the__choi { width: 60px; }
.kr-the__choi .ico { fill: #fff; stroke: #fff; stroke-width: 2.5; }
.kr-the__on { padding: 0 18px; font-size: 15px; }
.kr-the__choi:active, .kr-the__on:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--nut-xanh-bd); }
.kr-the__choi:focus-visible, .kr-the__on:focus-visible { outline: none; box-shadow: 0 4px 0 var(--nut-xanh-bd), 0 0 0 3px #0F004E; }
.kr-the__mui { position: absolute; width: 16px; height: 16px; background: #FFFDF6; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; }
.kr-the[data-huong="duoi"] .kr-the__mui { top: 100% !important; }
.kr-the[data-huong="trai"] .kr-the__mui { left: 0 !important; }
.kr-the[data-huong="phai"] .kr-the__mui { left: 100% !important; }

/* ---------- mini map: Chặng + các Vùng ---------- */
.kr-mini { position: absolute; z-index: 6; left: 12px; bottom: calc(var(--safe-b) + 10px); display: flex; align-items: center; gap: 0; padding: 3px 5px;
  border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line); }
/* nút ‹ › và chấm vùng: vùng chạm 40×40 px, hình tròn nhìn thấy giữ cỡ cũ (34 / 30 px) nhờ viền trong suốt + nền chỉ tô phần đệm */
.kr-mini__mt { width: 40px; height: 40px; border: 3px solid transparent; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kr-mini__mt.is-het { opacity: .3; cursor: default; }
.kr-mini__lb { padding: 0 4px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.kr-mini__v { position: relative; width: 40px; height: 40px; border: 5px solid transparent; border-radius: 50%; display: grid; place-items: center; font: inherit; font-size: 14px;
  font-weight: 700; color: var(--tone-on); background: var(--tone); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kr-mini__v.is-khoa { background: rgba(255, 255, 255, .1); color: #8F9FC0; }
.kr-mini__v.is-cur { border-color: #FFE58A; box-shadow: inset 0 0 0 2.5px #0B1530; }
.kr-mini .kr-mini__mt, .kr-mini .kr-mini__v { background-clip: padding-box; }      /* sau các khai báo background: chỉ tô phần trong viền */
.kr-mini__ln { width: 10px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .18); }
.kr-mini__mt:focus-visible, .kr-mini__v:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255, 229, 138, .8); }
.kr-mini__mt:active, .kr-mini__v:active { transform: scale(.94); }

.kr-ghichu { position: absolute; z-index: 6; right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); max-width: 40%; display: flex; gap: 6px; align-items: center;
  margin: 0; padding: 6px 12px; border-radius: 14px; background: var(--glass); color: var(--ink-2); font-size: 12.5px; }

/* màn thấp (≤ 370 px): nút, thẻ nhỏ lại một chút */
@media (max-height: 370px) {
  .kr-dau { padding: 6px 12px 7px 6px; border-radius: 16px; }
  .kr-dau__so { width: 34px; height: 34px; font-size: 17px; }
  .kr-dau__t { font-size: 15px; }
  .kr-dau__thanh { width: 120px; }
  .kr-nut { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .kr-nut.is-hien-tai { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .kr-mini { padding: 2px 4px; }
  .kr-mini__mt { border-width: 5px; }                      /* nhìn thấy 30 px, chạm 40 px */
  .kr-mini__v { border-width: 6.5px; font-size: 13px; }    /* nhìn thấy 27 px, chạm 40 px */
  .kr-the { padding: 8px 8px 8px 14px; }
  .kr-the__t { font-size: 15px; }
}

/* giảm chuyển động */
html.po-giam .kr-sao__i.is-bat, html.po-giam .kr-nv > svg, html.po-giam .kr-nv > .nv3d, html.po-giam .kr-dom i { animation: none; }
html.po-giam .kr-the, html.po-giam .kr-canh, html.po-giam .kr-canh-tren { transition: none; }

/* ---------- hộp thoại Hộp nhạc khổ ngang: hộp trái, chữ + quà phải ---------- */
.cd-hopmo[open] { width: min(100% - 32px, 600px); max-height: calc(100dvh - 24px); display: grid; grid-template-columns: 190px 1fr; align-items: center;
  gap: 4px 20px; padding: 18px 22px; text-align: left; overflow-y: auto; }
.cd-hopmo[open] .cd-hopmo__hop { margin: 0; align-self: center; }
.cd-hopmo[open] .cd-hopmo__hop .cd-hop__svg { width: 168px; height: 168px; }
.cd-hopmo__phai { min-width: 0; }
.cd-hopmo[open] .cd-hopmo__t { margin-top: 0; }
.cd-hopmo[open] .cd-qua { align-items: flex-start; }
.cd-hopmo[open] .cd-hopmo__sau { margin: 6px 0 0; }
@media (max-height: 420px) {
  .cd-hopmo[open] { grid-template-columns: 140px 1fr; padding: 14px 18px; }
  .cd-hopmo[open] .cd-hopmo__hop .cd-hop__svg { width: 128px; height: 128px; }
  .cd-hopmo[open] .cd-hopmo__t { font-size: 20px; }
  .cd-hopmo[open] .cd-hopmo__p { margin-bottom: 8px; font-size: 14px; }
  .cd-hopmo[open] .cd-hopmo__goiy { margin-bottom: 10px; font-size: 13px; }
}

/* ---------- hồ sơ học theo sách (người lớn): danh sách "Lộ trình" cũ trong khung ngang ---------- */
.scr--ngang.scr--map .chap__head { background: var(--night); padding-top: 6px; }
.scr--ngang.scr--map .chap__band .chap__title { color: var(--navy); }
.scr--ngang.scr--map .chap__band .chap__sub { color: var(--navy-70); }

/* thẻ nút (giữ lâu): sao tốt nhất + điểm cao nhất */
.kr-the__diem { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #6A5F94; }
.kr-the__sao { display: inline-flex; gap: 1px; line-height: 0; }
.kr-the__sao svg { fill: #D9D2EE; }
.kr-the__sao svg.is-co { fill: #FFC93C; }
/* tip "Chạm bài…" trên bản đồ: không đè thanh Chặng/Vùng ở góc trái dưới */
.kr > .po-tip-cham { max-width: min(420px, calc(100% - 340px)); }