/* CO-CHU-0311 */
/* Bài giảng do Giáo viên AI điều khiển, bản v2 (29/10/2026). Trang ẩn, không gắn menu.
   Nhận diện RQX: đỏ, xanh navy, vàng; Poppins; chữ Hán Microsoft YaHei / Noto Sans SC.
   Ba tầng màu: chữ Hán navy đậm, pinyin đỏ, tiếng Việt xám. */
:root {
  --red: #2B6CC8; --red-d: #1A519E; --navy: #1f2f5c; --gold: #f2b632; --ink: #1d2433; --mute: #5d6678;
  --bg: #f6f3ee; --card: #fff; --line: #e6dfd4; --hl: #ffe08a; --ok: #1f8a4c;
  --vi: "Poppins", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --zh: "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif;
  --tw: 0px; /* chỗ dành cho khung cô giáo ở màn rộng */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--vi); color: var(--ink); background: var(--bg); overflow: hidden; }
button { font-family: inherit; }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--red); color: #fff; min-height: 44px; }
.brand { color: #fff; font-weight: 800; text-decoration: none; letter-spacing: .5px; }
.tb-nav-btns { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-nav-btn { appearance: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.45); transition: background .15s, transform .15s; }
.tb-nav-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.tb-nav-btn.tb-nav-home { background: var(--gold); color: #3a2a00; border-color: #fff; }
.tb-nav-btn.tb-nav-home:hover { background: #ffe08a; }
@media (max-width: 640px) { .tb-nav-btn { font-size: 12.5px; padding: 3px 8px; } }
.ttl { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-no { margin-left: 10px; font-weight: 500; opacity: .85; font-size: .9em; }
.badge-ai { background: var(--gold); color: #3a2a00; font-size: 13.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.mode-live-chip, .mode-review-chip { font-size: 13.5px; font-weight: 600; white-space: nowrap; background: rgba(0,0,0,.18); padding: 3px 9px; border-radius: 99px; }
.mode-live-chip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4F98FF; margin-right: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.5); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
body.mode-live .mode-review-chip, body.mode-review .mode-live-chip { display: none; }

.stage-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; padding-right: var(--tw); }
.stage { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 14px 24px 64px; max-width: 1040px; margin: 0 auto; }
.slide { animation: fadeIn .35s ease; display: flex; flex-direction: column; min-height: 100%; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-top { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .6px; }
.s-chap { color: var(--red); }
.s-no { margin-left: auto; color: var(--mute); font-weight: 600; }
.s-logo { font-family: var(--zh); background: var(--red); color: #fff; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 18px; }
.s-title { font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; color: var(--navy); margin: 6px 0 2px; line-height: 1.25; }
.s-sub { margin: 0 0 12px; color: var(--mute); font-size: 17.5px; }
.s-body { flex: 1; }
.s-foot { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: #8a8f9c; }
.s-els { display: flex; flex-direction: column; gap: 10px; }
.s-els.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

.el { transition: opacity .45s ease, transform .45s ease; }
.el.pending { opacity: 0; transform: translateY(8px); pointer-events: none; }
.el.gone { display: none; }
.el.focus { box-shadow: 0 0 0 3px rgba(242, 182, 50, .55); border-radius: 12px; }

.zh { font-family: var(--zh); color: var(--navy); font-weight: 700; }
.py { color: var(--red); font-weight: 500; }
.vi { color: var(--mute); }
.mix { font-family: var(--vi); }
body.no-py .py { display: none !important; }
body.no-vi .vi { display: none !important; }
/* Gạch chân theo lời giảng nằm DƯỚI dòng chữ, không gạch xuyên qua chữ */
mark.hl { background: transparent; color: inherit; border-radius: 3px; padding: 0 1px; transition: background .3s, box-shadow .3s; }
mark.hl.on { background: var(--hl); color: var(--red-d); box-shadow: inset 0 -3px 0 var(--gold); text-decoration: none; }
.lb { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--red-d); text-transform: uppercase; letter-spacing: .4px; }

.e-tag { align-self: center; background: #fff1d6; color: #8a5a00; font-weight: 700; padding: 4px 12px; border-radius: 99px; font-size: 15.5px; }
.e-hero { text-align: center; margin: 4px 0; display: flex; flex-direction: column; align-items: center; }
.e-hero .big { font-size: clamp(60px, 10vw, 104px); color: var(--red); line-height: 1.1; }
.e-hero .py { font-size: 24px; }
.e-hero .vi { font-size: 19px; }
.e-text { font-size: 19px; line-height: 1.6; text-align: center; max-width: 760px; margin: 4px auto; }
.e-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.e-meta span { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-weight: 600; font-size: 16px; color: var(--navy); }
.e-goal { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.e-goal .n, .e-example .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; }
.e-goal .g-vi { font-weight: 600; font-size: 17.5px; margin-bottom: 4px; }
.e-goal .zh { font-size: 21px; }
.e-compare { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.e-compare ul { margin: 8px 0 0; padding-left: 20px; font-size: 18px; line-height: 1.7; }
.e-compare .mid, .e-next .mid { font-size: 34px; display: block; margin-top: 6px; }
.e-compare .c-note { margin-top: 6px; font-size: 17.5px; }
.e-think { grid-column: 1 / -1; background: #fff8e6; border: 1px dashed #e5c46e; border-radius: 14px; padding: 12px 16px 12px 44px; position: relative; font-size: 17.5px; line-height: 1.55; }
.e-think::before { content: "💭"; position: absolute; left: 14px; top: 11px; }

.e-wordcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.e-wordcard .wc-head { display: flex; gap: 14px; align-items: center; }
.e-wordcard .wc-zh { font-size: 54px; line-height: 1; }
.e-wordcard .wc-meta { display: flex; flex-direction: column; gap: 3px; }
.e-wordcard .wc-meta .py { font-size: 21px; }
.e-wordcard .pos { font-size: 14px; color: #8a6d3b; background: #fff6e3; border-radius: 6px; padding: 1px 7px; align-self: flex-start; }
.e-wordcard .wc-vi { font-size: 17.5px; }
.e-wordcard .mtc { grid-row: 1 / span 2; grid-column: 2; }
.e-wordcard .wc-ex { grid-column: 1; background: #fbf9f5; border-left: 4px solid var(--gold); border-radius: 10px; padding: 7px 11px; display: flex; flex-direction: column; }
.e-wordcard .wc-ex .zh { font-size: 21px; }
.e-wordcard .wc-ex .py { font-size: 16px; }
.e-wordcard .wc-ex .vi { font-size: 16px; }
.e-wordcard .wc-note { grid-column: 1 / -1; font-size: 16px; color: #3f4a5e; background: #eef3fb; border-radius: 10px; padding: 6px 10px; }
.e-wordcard.compact .wc-zh { font-size: 44px; }
.mtc { width: 104px; height: 104px; background: #fff; border: 2px solid #AEC4E2; border-radius: 10px; position: relative; overflow: hidden; display: grid; place-items: center;
  background-image: linear-gradient(#D0DEF1 1px, transparent 1px), linear-gradient(90deg, #D0DEF1 1px, transparent 1px), linear-gradient(45deg, transparent 49.6%, #DFE8F5 49.6%, #DFE8F5 50.4%, transparent 50.4%), linear-gradient(-45deg, transparent 49.6%, #DFE8F5 49.6%, #DFE8F5 50.4%, transparent 50.4%);
  background-size: 50% 50%, 50% 50%, 100% 100%, 100% 100%; background-position: -1px -1px; }
.mtc-ch { font-family: var(--zh); font-size: 70px; color: #e6dccf; line-height: 1; }
.mtc-ch.done { color: var(--navy); }
.mtc svg { position: absolute; inset: 0; }

.e-scene { color: var(--mute); font-style: italic; font-size: 17.5px; padding-left: 26px; position: relative; }
.e-scene::before { content: "📍"; position: absolute; left: 0; font-style: normal; }
.e-bubble { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.e-bubble.side-R { flex-direction: row-reverse; align-self: flex-end; }
.e-bubble .av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--zh); font-weight: 700; font-size: 19px; }
.e-bubble .bb { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 8px 13px; display: flex; flex-direction: column; }
.e-bubble.side-L .bb { border-bottom-left-radius: 4px; }
.e-bubble.side-R .bb { border-bottom-right-radius: 4px; }
.e-bubble .who { font-size: 14px; color: var(--mute); font-weight: 600; }
.e-bubble .who .zh { font-size: 14px; color: inherit; }
.e-bubble .line { font-size: 22px; }
.e-bubble .py { font-size: 15.5px; }
.e-bubble .vi { font-size: 16px; }
.c-red .av { background: var(--red); } .c-navy .av { background: var(--navy); } .c-gold .av { background: #c98a00; }
.c-red .bb { border-color: #C1D5F1; } .c-navy .bb { border-color: #c5cde3; } .c-gold .bb { border-color: #f0d49a; }
.e-bubble.playing .bb { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,182,50,.45); }

.e-formula { background: #fff; border: 2px solid var(--red); border-radius: 14px; padding: 10px 16px; }
.e-formula .f { font-size: 22px; font-weight: 700; color: var(--navy); margin: 2px 0; }
.e-formula .f-note { font-size: 17px; color: #3f4a5e; line-height: 1.5; }
.e-example { display: flex; gap: 10px; background: #fbf9f5; border-left: 4px solid var(--gold); border-radius: 10px; padding: 7px 12px; align-items: flex-start; }
.e-example .n { width: 24px; height: 24px; font-size: 14.5px; background: var(--navy); margin-top: 3px; }
.e-example > div { display: flex; flex-direction: column; }
.e-example .zh { font-size: 21px; }
.e-example .py, .e-example .vi { font-size: 16px; }
.e-warn { background: #EEF5FF; border: 1px solid #BDD3F3; border-radius: 12px; padding: 9px 14px; }
.e-warn .w-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.e-warn .zh { font-size: 21px; }
.e-warn .wrong { text-decoration: line-through; text-decoration-color: rgba(43, 108, 200, .6); color: #365A8D; }
.tag-x, .tag-o { font-size: 13.5px; font-weight: 700; color: #fff; border-radius: 6px; padding: 1px 7px; }
.tag-x { background: var(--red); } .tag-o { background: var(--ok); }
.e-warn .w-vi { font-size: 16px; color: #3f4a5e; }

.e-hanzi { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.e-hanzi .mtc { width: 128px; height: 128px; flex: none; }
.e-hanzi .mtc-ch { font-size: 88px; }
.hz-info { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; }
.hz-info .hz-ch { font-size: 26px; }
.hz-info b { color: var(--navy); }
.hz-cap { font-size: 13px; color: var(--mute); }
.e-review { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.e-review .rv, .e-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.e-names { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-review .rv > div, .e-names > div { display: flex; flex-direction: column; align-items: center; background: #fbf9f5; border-radius: 10px; padding: 6px; }
.e-review .zh, .e-names .zh { font-size: 28px; }
.e-note, .e-instr, .e-para { grid-column: 1 / -1; background: #eef8f1; border: 1px solid #bfe3cb; border-radius: 12px; padding: 9px 14px; font-size: 17.5px; line-height: 1.55; }
.e-instr { background: #fff6e3; border-color: #f0d49a; }
.e-para { background: var(--card); border-color: var(--line); font-size: 17.5px; }
.e-sum { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 17px; line-height: 1.5; }
.e-sum .zh { font-size: 21px; }
.e-homework { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; }
.e-homework ol { margin: 6px 0 0; padding-left: 20px; font-size: 17.5px; line-height: 1.6; }
.e-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff8e6; border: 1px solid #f0d49a; border-radius: 14px; padding: 10px 16px; }
.e-next .mid { margin: 0; font-size: 26px; }

.e-quiz .q, .e-order .q { font-size: 19px; font-weight: 600; margin: 2px 0 10px; }
.e-quiz .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.e-quiz .opt, .e-match button, .e-order .tile { font-size: 20px; padding: 11px 10px; background: #fff; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; font-family: var(--zh); color: var(--navy); }
.e-quiz .opt:disabled, .e-match button:disabled, .e-order .tile:disabled { cursor: default; }
.e-quiz .opt:not(:disabled):hover, .e-match button:not(:disabled):hover, .e-order .tile:not(:disabled):hover { border-color: var(--gold); }
.e-quiz .opt.right, .e-match .ok { border-color: var(--ok); background: #e9f7ee; }
.e-quiz .opt.wrong, .e-match .bad { border-color: var(--red); background: #EBF2FD; }
.e-quiz .explain { margin-top: 8px; background: #eef3fb; border-radius: 10px; padding: 7px 11px; font-size: 16px; }
.e-quiz .listen { margin-bottom: 8px; background: #fff6e3; border: 1px solid #f0d49a; border-radius: 99px; padding: 5px 13px; cursor: pointer; font-size: 15.5px; }
.e-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e-match .m-col { display: flex; flex-direction: column; gap: 8px; }
.e-match .m-l { display: flex; flex-direction: column; align-items: center; padding: 6px; }
.e-match .m-l .py { font-size: 14.5px; }
.e-match .m-r { font-family: var(--vi); font-size: 18px; color: var(--ink); }
.e-match .sel { border-color: var(--navy); background: #eef1f9; }
.e-order .o-ans { min-height: 50px; border: 2px dashed var(--line); border-radius: 12px; padding: 7px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 22px; }
.e-order .o-ans.ok { border-color: var(--ok); background: #e9f7ee; } .e-order .o-ans.bad { border-color: var(--red); background: #EBF2FD; }
.e-order .o-right { font-size: 17px; margin-left: auto; }
.e-order .o-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0; }
.e-order .tile.used { opacity: .35; }
.e-order .o-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.e-order .o-reset { background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; cursor: pointer; }

.pointer { position: absolute; left: 50%; top: 40%; z-index: 30; pointer-events: none; transition: left .7s cubic-bezier(.3,.8,.3,1), top .7s cubic-bezier(.3,.8,.3,1), opacity .3s; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.pointer.on { opacity: 1; }
.pointer.tap svg { animation: tap .5s ease; }
@keyframes tap { 50% { transform: scale(.82); } }

.caption { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; max-width: min(820px, 92%); background: rgba(29, 36, 51, .88); color: #fff; padding: 7px 14px; border-radius: 10px; font-size: 17px; line-height: 1.45; z-index: 20; text-align: center; }
.caption.chip { background: var(--gold); color: #3a2a00; font-weight: 700; }
.ask-box { position: absolute; left: 50%; transform: translateX(-50%); bottom: 54px; z-index: 25; width: min(560px, 94%); background: #fff; border: 2px solid var(--gold); border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 12px 14px; text-align: center; }
.ak-text { font-weight: 600; margin-bottom: 9px; }
.ak-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ak-btns button { border: 1px solid var(--line); background: #faf8f4; border-radius: 99px; padding: 9px 16px; font-weight: 600; cursor: pointer; font-size: 17px; }
.ak-btns .pri { background: var(--red); color: #fff; border-color: var(--red); }
.ak-btns .mic { background: #eef1f9; border-color: #c5cde3; }
.ask-box.listening .mic { background: var(--navy); color: #fff; animation: blink 1s infinite; }
.ak-heard { font-size: 14.5px; color: var(--mute); margin-top: 6px; min-height: 0; }
.qa-note { position: absolute; left: 14px; top: 10px; z-index: 26; width: min(380px, 92%); background: #fff; border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.16); padding: 10px 12px; font-size: 16px; line-height: 1.5; }
.qa-note .qa-h { font-weight: 700; color: var(--red-d); margin-bottom: 4px; }
.qa-note .q { background: #f4f1ea; border-radius: 10px; padding: 5px 9px; margin: 5px 0 5px 30px; }
.qa-note .a { background: #fff6e3; border-radius: 10px; padding: 6px 9px; margin: 5px 30px 5px 0; display: flex; flex-direction: column; }
.qa-note .a .zh { font-size: 19px; }
.qa-note .qa-x { margin-top: 4px; border: 1px solid var(--line); background: #faf8f4; border-radius: 8px; padding: 3px 10px; cursor: pointer; }

.start-cover { position: fixed; inset: 0; background: rgba(246, 243, 238, .95); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.start-box { max-width: 540px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.start-kicker { color: var(--red-d); font-weight: 700; margin: 0; font-size: 15.5px; }
.start-box h1 { margin: 2px 0 4px; font-size: 25px; color: var(--navy); }
.start-box p { color: var(--mute); line-height: 1.55; margin: 0 0 6px; }
.btn-start { background: var(--red); color: #fff; border: 0; border-radius: 99px; font-size: 19px; font-weight: 700; padding: 12px 28px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-start:hover { background: var(--red-d); }
.btn-sec { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 99px; font-size: 17px; font-weight: 600; padding: 9px 20px; cursor: pointer; text-decoration: none; }

.chapbar { display: flex; gap: 4px; padding: 6px 10px; background: #fff; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; padding-right: calc(10px + var(--tw)); }
.chapbar::-webkit-scrollbar { display: none; }
.chapbar .cb-short { display: none; }
.chapbar .cb { flex: 1 0 auto; border: 0; background: #f3efe8; color: var(--mute); border-radius: 8px; padding: 5px 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chapbar .cb.past { background: #DFE9F7; color: var(--red-d); }
.chapbar .cb.on { background: var(--red); color: #fff; }
body.mode-review .chapbar .cb { cursor: pointer; }
body.mode-live .chapbar .cb { cursor: default; pointer-events: none; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 7px 10px; background: #fff; border-top: 1px solid var(--line); padding-right: calc(10px + var(--tw)); }
.review-ctl { display: contents; }
.controls button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 70px; height: 50px; padding: 4px 8px; background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); }
.controls button:hover { border-color: var(--gold); }
.controls .ic { font-size: 19px; line-height: 1; font-weight: 700; }
.controls .lb { font-size: 12.5px; color: var(--mute); white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 500; }
.controls button[aria-pressed="false"] { opacity: .55; }
.controls #cMute[aria-pressed="false"] { opacity: 1; }
.controls #cMute[aria-pressed="true"] { opacity: .55; }
.controls button.hand { background: #fff1d6; border-color: #f0d49a; min-width: 110px; }
.controls .seek { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; max-width: 360px; font-size: 13.5px; color: var(--mute); }
.controls .seek input { flex: 1; accent-color: var(--red); }
.progress { height: 4px; background: #eee6d8; }
.progress div { height: 100%; width: 0; background: var(--red); transition: width .3s; }

/* Khung cô giáo: kiểu cửa sổ gọi video (mục 8.4). Chuyển động chỉ dùng transform, không vẽ lại ảnh. */
.teacher { position: fixed; right: 14px; bottom: calc(var(--ctl-h, 104px) + 8px); z-index: 60; background: #1d2433; border-radius: 16px; box-shadow: 0 8px 26px rgba(0,0,0,.22); overflow: hidden; touch-action: none; user-select: none; transition: left .45s ease, top .45s ease, width .25s ease; }
.teacher.dragging { transition: none; cursor: grabbing; }
.teacher .t-face { position: relative; overflow: hidden; background: #d9cdbb; cursor: grab; }
.teacher .t-cam { position: absolute; inset: 0; }
.teacher img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teacher.webcam .t-cam { animation: cam 5.5s ease-in-out infinite; transform-origin: 50% 90%; will-change: transform; }
.teacher.webcam .t-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(0,0,0,.25); }
@keyframes cam { 0%, 100% { transform: scale(1.02) translate(0, 0) rotate(0); } 50% { transform: scale(1.025) translate(1px, -2px) rotate(.4deg); } }
.t-live { display: none; position: absolute; left: 8px; top: 8px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 7px; }
.t-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2877E6; margin-right: 5px; }
.teacher.webcam .t-live { display: block; }
body.mode-review .t-live { display: none !important; }
@media (prefers-reduced-motion: reduce) { .teacher.webcam .t-cam, .mode-live-chip i { animation: none; } }
.teacher.size-l { width: 220px; }
.teacher.size-l .t-face { height: 220px; }
.teacher.size-s { width: 150px; }
.teacher.size-s .t-face { height: 150px; }
.teacher.size-s .t-name { font-size: 11px; }
.teacher.size-s .t-live { font-size: 10.5px; }
.teacher.size-c { width: 84px; border-radius: 50%; background: transparent; box-shadow: none; overflow: visible; }
.teacher.size-c .t-face { height: 84px; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.25); border: 3px solid #fff; }
.teacher.size-c .t-live { display: none; }
.teacher.size-c .t-bar { position: absolute; left: -8px; right: -8px; bottom: -14px; background: transparent; padding: 0; justify-content: center; }
.teacher.size-c .t-name { background: var(--gold); color: #3a2a00; border-radius: 99px; padding: 1px 7px; font-size: 11px; }
.teacher.size-c .t-btns { position: absolute; top: -92px; right: -6px; }
.teacher.size-c .t-btns button { width: 22px; height: 22px; font-size: 12.5px; }
.t-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 6px 5px 9px; background: var(--ink); color: #fff; cursor: grab; }
.t-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-name b { color: var(--gold); }
.t-btns { display: flex; gap: 4px; flex-shrink: 0; }
.t-btns button { width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; padding: 0; font-size: 14.5px; }
.teacher.talking .t-face { box-shadow: inset 0 0 0 3px rgba(242, 182, 50, .85); }
.teacher[hidden], .t-show[hidden] { display: none; }
.t-show { position: fixed; right: 12px; bottom: calc(var(--ctl-h, 104px) + 8px); z-index: 60; background: var(--ink); color: #fff; border: 0; border-radius: 99px; padding: 8px 14px; cursor: pointer; font-size: 14.5px; }

.hand-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 94vw); max-height: 80vh; z-index: 80; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; }
.hp-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--red); color: #fff; }
.hp-head button { background: transparent; border: 0; color: #fff; font-size: 19px; cursor: pointer; }
.hp-log { padding: 12px 14px; overflow-y: auto; flex: 1; min-height: 90px; font-size: 17px; line-height: 1.5; }
.hp-log .q { background: #f4f1ea; border-radius: 10px; padding: 6px 10px; margin: 6px 0 6px 40px; }
.hp-log .a { background: #fff6e3; border-radius: 10px; padding: 8px 10px; margin: 6px 40px 6px 0; }
.hp-log .a .zh { font-size: 21px; display: block; }
.hp-log .err { background: #EEF5FF; border: 1px solid #BDD3F3; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.hp-hint { color: var(--mute); margin: 0; }
.hp-form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
.hp-form input { flex: 1; min-width: 0; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; }
.hp-form button { background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.hp-resume { margin: 0 12px 12px; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: #faf8f4; cursor: pointer; font-weight: 600; }

.app.is-full { position: fixed; inset: 0; z-index: 40; background: var(--bg); }

/* Màn rộng: chừa cột phải cho khung cô giáo để không che slide */
@media (min-width: 1100px) {
  :root { --tw: 244px; }
  .teacher:not(.dragging) { right: 12px; }
}
@media (max-width: 860px) { .s-els.grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .stage { padding: 10px 12px 64px; }
  .topbar { padding: 6px 10px; gap: 6px; }
  .ttl { font-size: 15px; }
  .mode-live-chip { font-size: 0; padding: 4px 6px; }
  .mode-live-chip i { margin: 0; }
  .badge-ai { font-size: 12.5px; padding: 2px 7px; }
  .s-title { font-size: 21px; }
  .s-sub { font-size: 15.5px; margin-bottom: 8px; }
  .controls { gap: 4px; padding: 5px 6px; }
  .controls button { min-width: 0; flex: 1 1 0; height: 44px; padding: 2px; }
  .controls button.hand { min-width: 0; flex: 1.4 1 0; }
  .controls .lb { font-size: 10.5px; }
  .controls .ic { font-size: 18px; }
  .controls .seek { flex-basis: 100%; max-width: none; order: -1; }
  .chapbar .cb { display: none; }
  .chapbar .cb-short { display: block; font-size: 14px; font-weight: 700; color: var(--red-d); padding: 2px 4px; }
  .e-hero .big { font-size: 72px; }
  .e-text { font-size: 18px; }
  .e-wordcard { grid-template-columns: 1fr; }
  .e-wordcard .mtc { grid-row: auto; grid-column: 1; justify-self: center; width: 92px; height: 92px; }
  .e-wordcard .mtc-ch { font-size: 62px; }
  .e-wordcard .wc-zh { font-size: 44px; }
  .e-bubble { max-width: 96%; }
  .e-bubble .line { font-size: 20px; }
  .e-hanzi { flex-direction: column; align-items: center; }
  .e-review .rv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-quiz .opts { grid-template-columns: 1fr; }
  .e-quiz .opt { font-size: 18px; padding: 9px 6px; }
  .caption { font-size: 14.5px; }
  .ask-box { bottom: 8px; }
  /* Khung cô giáo neo ở dải riêng phía trên thanh chương: không đè slide */
  body.t-docked .app { padding-bottom: 0; }
  body.t-docked .stage-wrap { margin-bottom: var(--dock-h, 112px); }
  .teacher.dock { position: fixed; left: 8px; right: auto; top: auto; bottom: calc(var(--ctl-h, 104px) + 4px); }
  .teacher.dock.size-s { width: 104px; } .teacher.dock.size-s .t-face { height: 82px; }
  .teacher.dock.size-l { width: 132px; } .teacher.dock.size-l .t-face { height: 82px; }
  .teacher.dock .t-bar { padding: 3px 4px 3px 6px; }
  .teacher.dock .t-name { font-size: 10.5px; }
  /* Đo 29/10/2026 (CPU chậm 4 lần như điện thoại): chuyển động thở làm việc của trình duyệt tăng khoảng 45%,
     khung neo trên điện thoại chỉ 104 px nên gần như không thấy chuyển động: tắt chuyển động, giữ khung webcam */
  .teacher.webcam .t-cam { animation: none; will-change: auto; }
}

/* ---------- Lớp 30 phút (29/10/2026 tối): ô giọng cô, bảng dưới ô cô, chấm đọc theo ---------- */
.t-voice { display: none; }
body.voice-only .teacher .t-cam { display: none; }
body.voice-only .teacher .t-face { background: linear-gradient(160deg, #1b2f63, #2c4a8f); }
body.voice-only .teacher .t-voice { display: flex; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 10%; }
.t-voice .av { width: 46%; max-width: 72px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1b2f63; font: 700 clamp(18px, 3.2vw, 34px)/1 "Noto Sans SC", sans-serif; box-shadow: 0 0 0 5px rgba(242,182,50,.25); }
.t-voice .wave { display: flex; align-items: center; gap: 4px; height: 20%; min-height: 12px; }
.t-voice .wave i { width: 5px; height: 25%; border-radius: 3px; background: rgba(255,255,255,.5); }
.teacher.talking .t-voice .wave i { background: var(--gold); animation: vwave .9s ease-in-out infinite; }
.teacher.listening .t-voice .wave i { background: #5fd38a; animation: vwave 1.2s ease-in-out infinite; }
.teacher.talking .t-voice .av { animation: vpulse 1.2s ease-in-out infinite; }
.teacher.listening .t-voice .av { background: #5fd38a; }
.t-voice .wave i:nth-child(2) { animation-delay: -.2s !important; } .t-voice .wave i:nth-child(3) { animation-delay: -.5s !important; }
.t-voice .wave i:nth-child(4) { animation-delay: -.1s !important; } .t-voice .wave i:nth-child(5) { animation-delay: -.4s !important; }
.t-voice .wave i:nth-child(6) { animation-delay: -.7s !important; } .t-voice .wave i:nth-child(7) { animation-delay: -.3s !important; }
@keyframes vwave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes vpulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(242,182,50,.25); } 50% { box-shadow: 0 0 0 12px rgba(242,182,50,.1); } }
body.voice-only .teacher.size-l .t-face { height: 118px; }
body.voice-only .teacher.size-s .t-face { height: 86px; }
.teacher.listening .t-face { box-shadow: inset 0 0 0 3px rgba(95,211,138,.95); }
.t-panel { background: #f8f5ef; color: var(--ink); padding: 7px; display: grid; gap: 6px; cursor: default; }
.teacher.size-c .t-panel { display: none; }
body.mode-review .tp-clock, body.mode-review .tp-pace, body.mode-review .tp-mic { display: none; }
.tp-clock { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.tp-clock span { display: block; font-size: 11px; color: var(--mute); }
.tp-clock b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tp-clock.late b { color: var(--red); }
.tp-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: #e8e1d5; overflow: hidden; }
.tp-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.tp-clock.late .tp-bar i { background: var(--red); }
.tp-pace { font-size: 12px; color: #2e8b57; font-weight: 600; min-height: 13px; }
.tp-pace.slow { color: #b8860b; }
.tp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tp-btns button { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 4px 6px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font: 600 11.5px/1.15 Arial, sans-serif; overflow: hidden; }
.tp-btns .ic { font-size: 17px; }
.tp-btns .tp-mic { grid-column: 1 / -1; }
.tp-mic.listen { background: #e7f6ec; border-color: #7cc99a; color: #1f6b3d; }
.tp-mic.rec { background: #EAF2FD; border-color: #3B83E8; color: #1E5CB3; animation: recpulse 1s ease-in-out infinite; }
.tp-mic.off { background: #f1f1f1; color: #777; text-decoration: line-through; }
.tp-mic.na { background: #f6f3ee; color: #999; }
.tp-mic .lvl { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; transform: scaleX(0); }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 131, 232, .35); } 50% { box-shadow: 0 0 0 5px rgba(59, 131, 232, 0); } }
.tp-btns #cHand { background: #fff1d6; border-color: #f0d49a; }
.tp-btns #cMute[aria-pressed="true"] { opacity: .55; }
.heard-box { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 31; max-width: min(92%, 560px); background: #fff; border: 2px solid var(--gold); border-radius: 14px; padding: 8px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.15); text-align: center; }
.heard-box .hb-h { font-size: 14px; color: var(--mute); font-weight: 600; }
.heard-box .hb-syl { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.heard-box .hb-syl span { display: inline-flex; flex-direction: column; align-items: center; padding: 3px 7px; border-radius: 8px; background: #e7f6ec; }
.heard-box .hb-syl span.bad { background: #EAF2FD; }
.heard-box .hb-syl b { font-size: 24px; line-height: 1.1; color: #1f6b3d; }
.heard-box .hb-syl span.bad b { color: #2B6CC8; }
.heard-box .hb-syl i { font-style: normal; font-size: 13.5px; color: var(--mute); }
.heard-box .hb-tip { margin-top: 5px; font-size: 14.5px; color: #1E5CB3; }
.hp-form .hp-mic { flex: 0 0 auto; width: 40px; }
.hand-panel.listening .hp-mic { background: #EAF2FD; animation: recpulse 1s ease-in-out infinite; }
@media (max-width: 640px) {
  body .teacher.teacher.dock { left: 6px; right: 6px; width: auto; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto 1fr; }
  body .teacher.teacher.dock .t-face { grid-row: 1 / 3; height: auto; min-height: 70px; }
  body .teacher.teacher.dock .t-bar { grid-column: 2; }
  body .teacher.teacher.dock .t-panel { grid-column: 2; padding: 5px; gap: 4px; grid-template-columns: auto 1fr; align-items: center; }
  body .teacher.teacher.dock .tp-clock { grid-template-columns: auto auto; gap: 0 8px; }
  body .teacher.teacher.dock .tp-clock b { font-size: 15.5px; }
  body .teacher.teacher.dock .tp-pace { display: none; }
  body .teacher.teacher.dock .tp-btns { grid-template-columns: 1.4fr 1fr 1fr; }
  body .teacher.teacher.dock .tp-btns .tp-mic { grid-column: auto; }
  body .teacher.teacher.dock .tp-btns .lb { font-size: 10.5px; }
  .heard-box .hb-syl b { font-size: 21px; }
}
.tp-btns button { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) {
  body .teacher.teacher.dock .t-live { display: none; }
  body .teacher.teacher.dock .tp-btns { grid-template-columns: 1.5fr 1.3fr .55fr; }
  body .teacher.teacher.dock #cMute .lb { display: none; }
  body .teacher.teacher.dock .tp-btns button { min-height: 38px; padding: 3px 4px; }
}

/* ---------- Bản chính thức (29/10/2026 tối, YEU-CAU.md mục 14): ô chat, ô cô gọn, nâng đồ hoạ, hình cô bật mặc định ---------- */
:root { --sh1: 0 1px 2px rgba(29,36,51,.06), 0 4px 14px rgba(29,36,51,.07); --sh2: 0 10px 30px rgba(29,36,51,.16); --r: 14px; }
/* 14.3 đồ hoạ: thanh trên đỏ chuyển sắc, nền ấm, nút bo tròn có bóng nhẹ */
.topbar { background: linear-gradient(90deg, var(--red-d), var(--red) 55%, #3C7DD8); box-shadow: 0 2px 10px rgba(26, 81, 158, .25); position: relative; z-index: 5; }
.brand { background: #fff; color: var(--red); border-radius: 8px; padding: 2px 8px; font-size: 15.5px; letter-spacing: 1px; }
.badge-ai { box-shadow: 0 1px 0 rgba(0,0,0,.12); }
body { background: radial-gradient(1200px 600px at 20% -10%, #fffaf1 0%, var(--bg) 60%); }
.e-wordcard, .e-bubble, .e-quiz, .e-example { box-shadow: var(--sh1); }
.caption { border-radius: 12px; box-shadow: var(--sh2); }
/* thanh chương: chương đã học có dấu ✓, chương đang học đỏ đậm có vạch vàng */
.chapbar { gap: 5px; padding: 7px 10px; background: #fffdf9; }
.chapbar .cb { border-radius: 99px; padding: 5px 11px; position: relative; transition: background .25s, color .25s; }
.chapbar .cb.past { background: #E7EFFB; color: var(--red-d); }
.chapbar .cb.past::before { content: "✓ "; font-weight: 800; }
.chapbar .cb.on { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(43, 108, 200, .35); }
.chapbar .cb.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 1px; height: 3px; border-radius: 3px; background: var(--gold); }
.controls { background: #fffdf9; }
.controls button { border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(29,36,51,.06); transition: border-color .2s, transform .1s; }
.controls button:active { transform: scale(.97); }
.progress { height: 4px; background: #efe8dc; }
.progress #progBar { background: linear-gradient(90deg, var(--gold), var(--red)); }

/* 14.4 hình cô: nền tĩnh + lớp người (bản tách nền mục 12.6), cùng khung nên luôn khớp nhau */
.teacher .t-cam { animation: none !important; }
.teacher .t-cam img, .teacher .tc-body { position: absolute; inset: 0; }
.teacher .t-cam img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; user-select: none; pointer-events: none; }
.teacher .tc-body { transform-origin: 50% 88%; will-change: transform; }
.teacher .tc-body img { opacity: 0; } .teacher .tc-body img.on { opacity: 1; }
.teacher { border-radius: var(--r); box-shadow: var(--sh2); background: var(--navy); }
.teacher.talking .t-face { box-shadow: inset 0 0 0 3px rgba(242,182,50,.9); }
.teacher.listening .t-face { box-shadow: inset 0 0 0 3px rgba(95,211,138,.95); }
.t-bar { background: var(--navy); padding: 4px 6px 4px 9px; }
.t-live { background: rgba(43, 108, 200, .85); border-radius: 99px; }

/* 14.2 bảng dưới ô cô: đồng hồ, nhịp, tiến độ; nút biểu tượng có chú thích */
.t-panel { background: #fffdf9; padding: 7px 8px 8px; gap: 5px; }
.tp-clock { grid-template-columns: auto auto 1fr; align-items: end; gap: 2px 12px; }
.tp-clock > div { display: flex; flex-direction: column; }
.tp-clock b { font-size: 18px; color: var(--navy); }
.tp-bar { grid-column: 1 / -1; height: 6px; background: #efe8dc; }
.tp-bar i { background: linear-gradient(90deg, var(--gold), #e9962f); }
.tp-row { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; min-height: 14px; }
.tp-pace { font-size: 12px; min-height: 0; white-space: nowrap; }
.tp-pace:not(:empty)::before { content: "● "; }
.tp-prog { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 5px; }
.tp-btns .tp-mic { grid-column: auto; }
.tp-btns button { flex-direction: column; gap: 1px; min-height: 44px; padding: 4px 2px 5px; border-radius: 11px; font-size: 11px; font-weight: 600; box-shadow: 0 1px 2px rgba(29,36,51,.06); }
.tp-btns .ic { font-size: 18px; line-height: 1.1; }
.tp-btns .lb { font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tp-btns button:hover { border-color: var(--gold); }
.tp-btns #cHand { background: #fff4dc; border-color: #f0d49a; color: #7a5200; }
.tp-btns .tp-chat { background: #eef2fb; border-color: #c9d3ee; color: var(--navy); }
.tp-chat .dot { position: absolute; top: 4px; right: calc(50% - 17px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
/* trạng thái mic dễ nhận: nghe = xanh có chấm nháy, ghi = đỏ nhịp, tắt = xám có gạch chéo */
.tp-mic.listen { background: #e5f5ea; border-color: #7cc99a; color: #17633a; }
.tp-mic.listen .ic::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: #2fb463; vertical-align: top; animation: blink 1.6s ease-in-out infinite; }
.tp-mic.rec { background: #E6F0FD; border-color: var(--red); color: #1B54A3; }
.tp-mic.off { background: #eeeeee; border-color: #d6d6d6; color: #777; text-decoration: none; }
.tp-mic.off .ic { filter: grayscale(1); opacity: .6; position: relative; }
.tp-mic.off .ic::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #1E5CB3; transform: rotate(-40deg); }
.tp-mic .lvl { height: 3px; border-radius: 3px; }

/* 14.1 ô chat */
.chat { position: fixed; z-index: 70; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); overflow: hidden; }
.ch-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; background: linear-gradient(90deg, var(--navy), #2c4a8f); color: #fff; }
.ch-head b { font-size: 15px; white-space: nowrap; }
.ch-sub { flex: 1; min-width: 0; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-x { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 15.5px; flex-shrink: 0; }
.ch-log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #faf7f1; overscroll-behavior: contain; }
.ch-hint { margin: 0; font-size: 13.5px; color: var(--mute); background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.cm { max-width: 88%; display: flex; flex-direction: column; gap: 2px; animation: fadeIn .25s ease; }
.cm.co { align-self: flex-start; }
.cm.me { align-self: flex-end; align-items: flex-end; }
.cm-b { padding: 7px 10px; border-radius: 14px; font-size: 15px; line-height: 1.45; word-break: break-word; }
.cm.co .cm-b { background: #fff; border: 1px solid #f0e2c4; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(29,36,51,.05); }
.cm.me .cm-b { background: var(--navy); color: #fff; border-top-right-radius: 4px; }
.cm .zh { font-family: var(--zh); font-size: 20px; color: var(--navy); font-weight: 700; }
.cm .py { color: var(--red); font-weight: 600; }
.cm-tag { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #a26f00; margin-bottom: 2px; }
.cm.k-word .cm-b { background: #fff8e6; border-color: #f2d48a; }
.cm.k-score .cm-b { background: #f4fbf6; border-color: #bfe3cb; }
.cm.k-bu .cm-b, .cm.k-err .cm-b { background: #EFF6FF; border-color: #BDD3F3; }
.cm.k-err .cm-b { color: #17488C; }
.cm-syl { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-syl span { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 6px; border-radius: 7px; background: #e5f5ea; }
.cm-syl span b { font-family: var(--zh); font-size: 20px; line-height: 1.15; color: #17633a; }
.cm-syl span i { font-style: normal; font-size: 12.5px; color: var(--mute); }
.cm-syl span.bad { background: #E6F0FD; }
.cm-syl span.bad b { color: var(--red); }
.cm-tip { margin-top: 3px; font-size: 14px; color: #1B54A3; }
.cm-meta { font-size: 12px; color: #8a8f9c; display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.cm-say { border: 1px solid var(--line); background: #fff; border-radius: 99px; height: 24px; min-width: 30px; padding: 0 7px; cursor: pointer; font-size: 13.5px; line-height: 1; }
.cm-say:hover { border-color: var(--gold); }
.cm-say.on { background: var(--gold); border-color: var(--gold); }
.cm-say.busy { opacity: .5; cursor: progress; }
.cm-say.fail { opacity: .4; }
.cm.typing .cm-b { display: flex; gap: 4px; padding: 10px 12px; }
.cm.typing i { width: 6px; height: 6px; border-radius: 50%; background: #c9b48a; animation: blink 1s ease-in-out infinite; }
.cm.typing i:nth-child(2) { animation-delay: -.33s; } .cm.typing i:nth-child(3) { animation-delay: -.66s; }
.ch-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); background: #fff; }
.ch-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 99px; padding: 9px 13px; font: 500 14px var(--vi); outline: none; background: #faf7f1; }
.ch-form input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(242,182,50,.2); }
.ch-form button { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(43, 108, 200, .35); }

/* Màn rộng: cột phải = ô cô (trên) + ô chat (dưới); slide chừa đúng cột này */
@media (min-width: 1100px) {
  :root { --tw: 336px; }
  .teacher.col { top: 54px; right: 12px; bottom: auto; width: 312px; }
  .teacher.col.size-l .t-face { height: 176px; }
  .teacher.col.size-s .t-face { height: 112px; }
  body.voice-only .teacher.col .t-face { height: 92px; }
  .chat { right: 12px; width: 312px; top: var(--chat-top, 54px); bottom: calc(var(--ctl-h, 104px) + 8px); border-radius: var(--r); }
  .ch-x, .tp-btns .tp-chat { display: none; }
}
/* Màn hẹp hơn: ô chat là ngăn kéo lên từ dưới, mở bằng nút 💬 dưới ô cô (có chấm báo tin mới) */
@media (max-width: 1099px) {
  .chat { left: 0; right: 0; bottom: 0; height: min(64dvh, 560px); border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .28s ease, visibility 0s .28s; visibility: hidden; z-index: 90; }
  body.chat-open .chat { transform: none; visibility: visible; transition: transform .28s ease; }
  .ch-head { position: relative; padding-top: 13px; }
  .ch-head::before { content: ""; position: absolute; left: 50%; top: 4px; width: 36px; height: 4px; margin-left: -18px; border-radius: 3px; background: rgba(255,255,255,.4); }
  .ch-form input { font-size: 18px; } /* iOS không phóng to khi gõ */
}
@media (min-width: 700px) and (max-width: 1099px) { .chat { left: auto; width: 440px; right: 12px; } }
/* Điện thoại: ô cô neo dưới; hình cô cắt khuôn mặt (ô 84 px quá nhỏ để thấy cả người và bàn) */
@media (max-width: 640px) {
  body .teacher.teacher.dock { grid-template-columns: 84px 1fr; }
  body .teacher.teacher.dock .t-face { min-height: 84px; }
  .teacher.dock .t-cam img { inset: auto; left: -104%; top: -26%; width: 284%; height: 284%; object-fit: fill; max-width: none; }
  .teacher.dock .tc-body { transform-origin: 50% 45%; }
  body .teacher.teacher.dock .t-panel { grid-template-columns: auto 1fr; }
  body .teacher.teacher.dock .tp-row { display: none; }
  body .teacher.teacher.dock .tp-clock { grid-template-columns: auto; gap: 0; }
  body .teacher.teacher.dock .tp-clock > div { flex-direction: row; gap: 4px; align-items: baseline; }
  body .teacher.teacher.dock .tp-clock span { font-size: 10px; }
  body .teacher.teacher.dock .tp-clock b { font-size: 14.5px; }
  body .teacher.teacher.dock .tp-bar { display: none; }
  body .teacher.teacher.dock .tp-btns { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  body .teacher.teacher.dock .tp-btns button { min-height: 40px; padding: 3px 1px; }
  body .teacher.teacher.dock #cMute .lb { display: block; }
  body .teacher.teacher.dock .tp-btns .lb { font-size: 10px; }
  .brand { font-size: 13.5px; padding: 1px 6px; }
  .chapbar .cb.on::after { display: none; }
}
.tp-btns .lb { text-transform: none; letter-spacing: 0; color: inherit; font-weight: 600; display: block; }
@media (max-width: 640px) { .teacher.dock .t-cam img { top: -20%; } }
@media (max-width: 640px) {
  .teacher.dock .t-cam img { left: -101%; top: -40%; width: 270%; height: 270%; }
  body .teacher.teacher.dock .tp-btns { grid-auto-flow: row; grid-template-columns: 1.4fr 1fr 1fr 1.15fr; }
}

/* ---------- Lớp 45 phút (29/10/2026 đêm, mục 16): ôn bài cũ, luyện phản xạ, bài tập 4 kỹ năng ---------- */
.kind-onbai .s-els { display: flex; flex-direction: column; gap: 10px; }
.e-onloi { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: 14px; padding: 10px 14px; }
.e-onloi .n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; }
.e-onloi .ol-h { font-weight: 600; font-size: 18px; }
.e-onloi .ol-sk { display: inline-block; background: #eef1f9; color: var(--navy); border-radius: 99px; padding: 1px 9px; font-size: 14.5px; margin-right: 4px; }
.e-onloi .ol-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 5px 0 3px; font-size: 17px; }
.e-onloi .ol-sai { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1px; }
.e-onloi .ol-dung { color: var(--ok); font-weight: 600; } .e-onloi .ol-dung .zh { font-size: 21px; }
.e-onloi .ol-note { font-size: 15.5px; color: #555; }
.e-onloi.hieu { border-left-color: var(--ok); } .e-onloi.chua { border-left-color: var(--gold); background: #fffaf0; }
.kind-onbai .e-note { background: #fff6e3; border: 1px dashed #e0b453; border-radius: 10px; padding: 6px 12px; font-size: 15.5px; }
.e-phanxa { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.e-phanxa .lb { display: block; font-size: 13.5px; font-weight: 700; color: #888; text-transform: uppercase; }
.e-phanxa .zh { font-size: 24px; display: block; } .e-phanxa .px-a .zh { color: var(--red); }
.kind-phanxa .s-els { display: flex; flex-direction: column; gap: 9px; }
.e-baitap { grid-column: 1 / -1; }
.e-baitap .bt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.e-baitap .bt-sk { grid-column: 1 / -1; font-weight: 700; color: var(--navy); font-size: 17px; margin-top: 4px; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.e-baitap .bt-it { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.e-baitap .bt-it.ok { border-color: var(--ok); background: #f1faf4; } .e-baitap .bt-it.bad { border-color: var(--red); background: #F4F9FF; }
.e-baitap .bt-it.na { border-color: #bbb; } .e-baitap .bt-it.chua-dang { box-shadow: 0 0 0 4px rgba(242,181,61,.55); }
.e-baitap .bt-q { font-size: 17px; margin-bottom: 7px; }
.e-baitap .bt-zh { font-size: 26px; display: block; margin-bottom: 6px; }
.e-baitap .bt-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.e-baitap button { font: inherit; cursor: pointer; border: 2px solid var(--line); background: #fff; border-radius: 11px; padding: 7px 12px; color: var(--navy); }
.e-baitap button:disabled { cursor: default; }
.e-baitap button:not(:disabled):hover { border-color: var(--gold); }
.e-baitap .bt-opt.sel { border-color: var(--navy); background: #eef1f9; font-weight: 600; }
.e-baitap .bt-opt.right { border-color: var(--ok); background: #e9f7ee; }
.e-baitap .bt-nghe, .e-baitap .bt-rec { background: #fff6e3; border-color: #f0d49a; border-radius: 99px; margin-bottom: 7px; }
.e-baitap .bt-doc .zh { font-size: 26px; margin-right: 8px; } .e-baitap .bt-pydoc { font-size: 14.5px; color: var(--red); margin-left: 6px; }
.e-baitap .bt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.e-baitap .bt-st { font-size: 15px; color: #555; }
.e-baitap .bt-ans { min-height: 44px; border: 2px dashed var(--line); border-radius: 11px; padding: 5px 9px; display: flex; gap: 6px; align-items: center; font-size: 22px; margin-bottom: 7px; }
.e-baitap .bt-tiles { display: flex; flex-wrap: wrap; gap: 7px; } .e-baitap .bt-tile { font-size: 21px; } .e-baitap .bt-tile.used { opacity: .35; }
.e-baitap .bt-net { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8 linear-gradient(transparent 49.5%, #eadfce 49.5%, #eadfce 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #eadfce 49.5%, #eadfce 50.5%, transparent 50.5%); touch-action: none; }
.e-baitap .bt-go { font: inherit; font-size: 19px; width: 100%; max-width: 260px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; }
.e-baitap .bt-kq { margin-top: 7px; font-size: 16px; font-weight: 600; } .e-baitap .bt-it.ok .bt-kq { color: var(--ok); } .e-baitap .bt-it.bad .bt-kq { color: var(--red); }
.e-baitap .bt-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.e-baitap .bt-nop { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; padding: 10px 26px; font-size: 18px; }
.e-baitap .bt-nop:disabled { opacity: .55; }
.e-baitap .bt-dem { font-size: 15.5px; color: #555; }
@media (max-width: 760px) { .e-baitap .bt-list { grid-template-columns: 1fr; } .e-phanxa { grid-template-columns: 1fr; } }

/* ---------- v3 (30/10/2026, YEU-CAU.md mục 15, 16.1, 16.10, 16.11; việc P4) ----------
   Màu chủ đạo xanh lá theo web RQX: #0B6CF3 cho viền, thanh tiến độ, biểu tượng (UI, tương phản 3,7:1 với nền trắng);
   chữ hoặc nền nút có chữ dùng tông đậm cùng họ #1E7B23 (5,4:1 với trắng, đạt WCAG AA chữ nhỏ); chữ đậm #1C3128 (13:1).
   Nền sáng, không nền tối. Đỏ chỉ cho nút Lưu / Tạm nghỉ và chữ sai (#2B6CC8, 5,3:1). Vàng chỉ để nhấn nhẹ. */
:root {
  --g: #0B6CF3; --g-d: #1E7B23; --g-dd: #17631B; --g-bg: #EEF8EE; --g-bg2: #F6FBF5; --g-line: #CFE8CF; --ink2: #1C3128;
  --red: #1E7B23; --red-d: #17631B; --navy: #1C3128; --bad: #2B6CC8; --bad-d: #1B54A3; --save: #286AC6;
  --bg: #F6FBF5; --line: #DCE9DA; --mute: #4F5D55; --ink: #1C3128;
}
body { background: #F6FBF5; color: var(--ink2); }
/* thanh trên: nền trắng, logo xanh */
.topbar { background: #fff; color: var(--ink2); box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(28,49,40,.06); }
.brand { background: var(--g-d); color: #fff; }
.mode-live-chip, .mode-review-chip { background: var(--g-bg); color: var(--g-dd); border: 1px solid var(--g-line); }
.mode-live-chip i { background: var(--g); box-shadow: 0 0 0 2px rgba(11, 108, 243,.25); }
.badge-ai { background: #FFF3CF; color: #5A4300; border: 1px solid #F2D27A; box-shadow: none; }
/* chữ sai giữ đỏ */
.e-quiz .opt.wrong, .e-match .bad, .e-order .o-ans.bad, .e-baitap .bt-it.bad { border-color: var(--bad); }
.tag-x { background: var(--bad-d); }
.cm-syl span.bad b, .heard-box .hb-syl span.bad b, .e-onloi .ol-sai, .e-baitap .bt-it.bad .bt-kq { color: var(--bad); }
.cm-tip, .heard-box .hb-tip { color: var(--bad-d); }
.tp-mic.off .ic::after { background: #6B6B6B; }
/* phụ đề: nền sáng; CC mặc định tắt (chip trạng thái vẫn hiện) */
.caption { background: rgba(255,255,255,.97); color: var(--ink2); border: 1px solid var(--g-line); box-shadow: 0 6px 20px rgba(28,49,40,.14); }
.caption.chip { background: #FFF3CF; color: #4A3700; border-color: #F2D27A; }
body:not(.cc-on) .caption:not(.chip) { display: none; }
/* khung cô và ô chat: nền sáng */
.teacher, .teacher.col { background: #fff; border: 1px solid var(--line); }
.t-bar { background: #fff; color: var(--ink2); border-top: 1px solid var(--line); }
.t-name b { color: var(--g-d); }
.t-btns button { background: var(--g-bg); color: var(--ink2); border: 1px solid var(--g-line); }
.t-live { background: rgba(255,255,255,.92); color: var(--ink2); }
.t-live i { background: var(--g); }
.teacher.talking .t-face { box-shadow: inset 0 0 0 3px rgba(11, 108, 243,.9); }
.teacher.t-yield { visibility: hidden; }
body.voice-only .teacher .t-face { background: linear-gradient(160deg, #E4F4E4, #CFE8CF); }
.t-voice .av { color: var(--ink2); }
.t-voice .wave i { background: rgba(28,49,40,.35); }
.ch-head { background: var(--g-bg); color: var(--ink2); border-bottom: 1px solid var(--g-line); }
.ch-head b { color: var(--g-dd); }
.ch-sub { opacity: 1; color: var(--mute); }
.ch-x { background: #fff; color: var(--ink2); border: 1px solid var(--g-line); }
.ch-log { background: #FAFDF9; }
.cm.me .cm-b { background: var(--g-d); color: #fff; }
.cm.co .cm-b { border-color: var(--g-line); }
.ch-form button { background: var(--g-d); box-shadow: 0 2px 6px rgba(30,123,35,.3); }
.ch-form input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(11, 108, 243,.18); }
.t-show { position: static; background: #fff; color: var(--g-dd); border: 1px solid var(--g-line); padding: 3px 9px; font-size: 13.5px; font-weight: 600; flex-shrink: 0; }
body > .t-show { position: fixed; right: 10px; bottom: calc(var(--ctl-h, 64px) + 10px); z-index: 61; box-shadow: 0 4px 12px rgba(28,49,40,.15); padding: 7px 12px; }
.hp-head { background: var(--g-bg); color: var(--ink2); border-bottom: 1px solid var(--g-line); }
.hp-head button { color: var(--ink2); }
.start-cover { background: rgba(246,251,245,.96); }
.ask-box, .qa-note { border-color: var(--g); }
.ak-btns .mic { background: var(--g-bg); border-color: var(--g-line); }
.ask-box.listening .mic { background: var(--g-d); color: #fff; }
.e-baitap .bt-sk { border-bottom-color: var(--g); }
/* toàn màn hình: góc phải trên ô bài giảng */
.stage-full { position: absolute; top: 10px; right: calc(var(--tw) + 14px); z-index: 22; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink2); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(28,49,40,.1); }
.stage-full:hover { border-color: var(--g); color: var(--g-d); }
.stage .s-top { padding-right: 44px; }

/* thanh lệnh duy nhất dưới cùng (kiểu Google Meet, màu RQX) */
.chapbar, .controls { padding-right: 10px; }
.cmdbar.controls { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; padding: 7px 12px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(28,49,40,.05); }
.progress { display: none; }
.cb-clock { display: grid; grid-template-columns: auto auto auto auto; align-items: center; column-gap: 5px; row-gap: 3px; flex: 0 0 auto; }
.cb-clock .ck-ic { font-size: 18px; color: var(--g-d); }
.cb-clock b { font-size: 21px; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.cb-clock .ck-lim { font-size: 13.5px; color: var(--mute); }
.cb-clock .tp-pace { font-size: 13px; font-weight: 700; color: var(--g-dd); background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.cb-clock .tp-pace:empty { display: none; }
.cb-clock .tp-pace::before { content: none; }
.cb-clock .tp-pace.slow { color: #6B4A00; background: #FFF3CF; border-color: #F2D27A; }
.cb-clock .tp-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: #E3EEE2; overflow: hidden; }
.cb-clock .tp-bar i { display: block; height: 100%; width: 0; background: var(--g); }
.tp-clock.late b { color: var(--ink2); }
.cb-prog { flex: 1 1 auto; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.cp-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--mute); white-space: nowrap; }
.cp-chap { overflow: hidden; text-overflow: ellipsis; }
.cp-chap b { color: var(--g-dd); }
.cb-prog .tp-prog { font-size: 13.5px; color: var(--mute); }
.cmdbar .chapbar { display: flex; gap: 3px; padding: 0; background: transparent; border: 0; overflow: hidden; }
.cmdbar .chapbar .cb-short { display: none !important; }
.cmdbar .chapbar .cb { display: block; flex: 1 1 0; min-width: 0; height: 7px; padding: 0; border-radius: 4px; background: #E3EEE2; font-size: 0; color: transparent; box-shadow: none; }
.cmdbar .chapbar .cb::before, .cmdbar .chapbar .cb::after { content: none !important; }
.cmdbar .chapbar .cb.past { background: var(--g); }
.cmdbar .chapbar .cb.on { background: linear-gradient(90deg, var(--g) 50%, #A8D8AA 50%); box-shadow: 0 0 0 1.5px var(--g-dd); }
body.mode-review .cmdbar .chapbar .cb { height: 10px; cursor: pointer; }
.cmdbar .review-ctl { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.cmdbar .review-ctl button { min-width: 0; height: 40px; padding: 0 9px; flex-direction: row; gap: 4px; border-radius: 99px; }
.cmdbar .review-ctl .seek { min-width: 120px; }
.cmdbar .review-ctl .seek input { accent-color: var(--g); }
.cb-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.cmdbar .cbtn { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--g-line); background: var(--g-bg); color: var(--ink2); cursor: pointer; box-shadow: none; transition: background .15s, border-color .15s, transform .1s; }
.cmdbar .cbtn:hover { background: #E1F2E1; border-color: var(--g); }
.cmdbar .cbtn:focus-visible { outline: 3px solid rgba(11, 108, 243,.45); outline-offset: 2px; }
.cmdbar .cbtn:active { transform: scale(.95); }
.cmdbar .cbtn .ic { font-size: 20px; line-height: 1; font-weight: 700; }
.cmdbar .cbtn .ic.cc { font-size: 14px; font-weight: 800; border: 2px solid currentColor; border-radius: 4px; padding: 1px 3px; }
.cmdbar .cbtn .lb { display: none; }
.cmdbar .cbtn[aria-pressed="true"]#cCC, .cmdbar #cPause[aria-pressed="true"] { background: var(--g-d); border-color: var(--g-d); color: #fff; }
.cmdbar #cMute[aria-pressed="true"] { background: #F1F3F1; border-color: #D4D9D4; }
.cmdbar .cbtn.hand { background: #FFF6DA; border-color: #F2D27A; }
.cmdbar .cbtn.menu-only { display: none !important; }
.cmdbar .cbtn.save { width: auto; border-radius: 99px; padding: 0 16px 0 13px; background: var(--save); border-color: var(--save); color: #fff; }
.cmdbar .cbtn.save .lb { display: inline; font-size: 15px; font-weight: 700; white-space: nowrap; color: #fff; }
.cmdbar .cbtn.save:hover { background: #1F57A6; }
.cmdbar .cbtn .dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 2px #fff; }
/* mic: nghe = xanh; ghi = xanh đậm nhịp; tắt = xám có gạch */
.cmdbar .tp-mic.listen { background: var(--g-d); border-color: var(--g-d); color: #fff; }
.cmdbar .tp-mic.listen .ic::after { position: absolute; top: 6px; right: 6px; margin: 0; background: #B9F2BC; }
.cmdbar .tp-mic.rec { background: var(--g-dd); border-color: var(--g-dd); color: #fff; animation: recpulse 1s ease-in-out infinite; }
.cmdbar .tp-mic.off, .cmdbar .tp-mic.na { background: #F1F3F1; border-color: #D4D9D4; color: #555; }
.cmdbar .tp-mic .lvl { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: #B9F2BC; transform-origin: left; transform: scaleX(0); }
.cmdbar .tp-mic .lb { display: none; }
/* chú thích khi rê chuột (kiểu Meet) */
.cmdbar .cbtn[data-tip]:hover::after, .cmdbar .cbtn[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink2); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; z-index: 95; }
.cmdbar .cbtn.save[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.cmdbar .cb-more .cbtn[data-tip]:hover::after { left: 0; transform: none; }
.cmdbar .tp-mic.listen .ic::after { content: ""; }
.cb-vol { display: inline-flex; align-items: center; gap: 4px; }
.cb-vol input { width: 74px; accent-color: var(--g); }
.cb-more { position: relative; }
.more-menu { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 96; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(28,49,40,.18); padding: 6px; display: flex; flex-direction: column; }
.more-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; border: 0; background: transparent; color: var(--ink2); border-radius: 8px; padding: 0 10px; font: 600 14px var(--vi); cursor: pointer; text-align: left; }
.more-menu button:hover { background: var(--g-bg); }
.more-menu .ic { width: 22px; text-align: center; font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--ctl-h, 64px) + 12px); transform: translateX(-50%); z-index: 97; background: #fff; color: var(--ink2); border: 1px solid var(--g); border-radius: 99px; padding: 7px 16px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px rgba(28,49,40,.15); }
body.is-paused .stage { opacity: .75; }
/* màn rộng: cột phải ô cô + chat, slide chừa đúng cột */
@media (min-width: 1100px) {
  .teacher.col { top: 54px; }
  .chat { bottom: calc(var(--ctl-h, 64px) + 8px); }
}
@media (max-width: 1280px) { .cb-vol input { display: none; } }
@media (max-width: 1099px) {
  .stage-full { right: 12px; }
  .ch-head::before { background: rgba(28,49,40,.25); }
  .teacher { right: 10px; bottom: calc(var(--ctl-h, 64px) + 10px); }
  .teacher.size-l { width: 168px; } .teacher.size-l .t-face { height: 120px; }
}
@media (max-width: 860px) {
  .cmdbar.controls { flex-wrap: wrap; row-gap: 6px; }
  .cb-clock { order: 1; }
  .cb-prog { order: 2; flex-basis: 40%; }
  .cb-btns { order: 3; width: 100%; justify-content: center; margin-left: 0; }
}
/* Điện thoại: chỉ hiện Mic, Giơ tay, Sticker, Lưu (và ⋯); còn lại vào menu ⋯. Khung cô nhỏ nổi góc phải, kéo được */
@media (max-width: 640px) {
  .cmdbar.controls { gap: 6px; padding: 6px 8px; }
  .cb-clock { grid-template-columns: auto auto auto; column-gap: 4px; }
  .cb-clock b { font-size: 18px; }
  .cb-clock .ck-lim { font-size: 12.5px; }
  .cb-clock .tp-pace { font-size: 12px; padding: 0 6px; }
  .cb-prog { min-width: 0; flex: 1 1 0; }
  .cp-row { font-size: 12.5px; }
  .cp-chap b { font-weight: 700; }
  .cb-btns { gap: 10px; }
  #cPause, #cCC, #cTraTu, .cb-vol { display: none !important; }
  .cmdbar .cbtn { width: 46px; min-width: 46px; height: 46px; }
  .cmdbar .cbtn.save { padding: 0 14px 0 12px; }
  .cmdbar .cbtn[data-tip]:hover::after { display: none; }
  .teacher, .teacher.dock { position: fixed; left: auto; right: 8px; top: auto; bottom: calc(var(--ctl-h, 110px) + 8px); width: 104px !important; border-radius: 14px; }
  .teacher .t-face, .teacher.size-l .t-face, .teacher.size-s .t-face { height: 112px !important; min-height: 0; }
  .teacher .t-cam img { inset: auto; left: -60%; top: -6%; width: 220%; height: 220%; object-fit: fill; max-width: none; }
  .teacher .t-bar { padding: 2px 3px 2px 6px; }
  .teacher .t-name { font-size: 10.5px; }
  .teacher .t-name b { display: none; }
  .teacher #tSize { display: none; }
  .teacher .t-btns button { width: 26px; height: 26px; }
  .teacher .t-live { font-size: 10px; padding: 1px 6px; }
  body.t-docked .stage-wrap { margin-bottom: 0; }
  .stage-full { width: 30px; height: 30px; top: 8px; right: 8px; font-size: 17px; }
  .stage .s-top { padding-right: 38px; }
}
/* Menu ⋯: hàng ngang (không theo kiểu nút xếp dọc cũ của .controls) */
.cmdbar .more-menu button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; opacity: 1; }
.cmdbar .more-menu button:hover { background: var(--g-bg); }
.cmdbar .more-menu .lb { display: inline; font-size: 15.5px; font-weight: 600; color: var(--ink2); }
body:not(.mode-review) #reviewCtl { display: none; }
/* Điện thoại: hàng 1 đồng hồ + tiến độ, hàng 2 năm nút tròn chia đều, Lưu đỏ cuối hàng; không tràn ngang */
@media (max-width: 640px) {
  .cmdbar.controls { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: visible; flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  .cmdbar .cb-prog { flex: 1 1 0; min-width: 0; }
  .cmdbar .cp-row { min-width: 0; overflow: hidden; }
  .cmdbar .cp-row > span { overflow: hidden; text-overflow: ellipsis; }
  .cmdbar .cb-btns { box-sizing: border-box; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0; flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .cmdbar .cbtn, .cmdbar .cbtn.hand { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; flex-direction: row; border-radius: 50%; }
  .cmdbar .cbtn.save { flex: 0 1 auto; width: auto; min-width: 0; padding: 0 12px 0 10px; gap: 4px; border-radius: 99px; overflow: hidden; }
  .cmdbar .cbtn.save .lb { font-size: 14px; }
  .cmdbar .cbtn.save .ic { font-size: 17px; }
  .cmdbar .more-menu { max-width: calc(100vw - 24px); }
}
@media (max-width: 340px) { .cmdbar .cbtn.save .lb { display: none; } .cmdbar .cbtn.save { flex: 0 0 44px; width: 44px; padding: 0; border-radius: 50%; } }

/* ===== 30/10/2026 tổng hợp 2/3: Hỏi cô gộp vào ô chat, mic và giơ tay trong ô chat, sticker vào chat, bài tập 4 kỹ năng ===== */
.hand-panel { display: none !important; }
.ch-handbar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #FFF6DB; border-bottom: 1px solid #F2D58A; color: #3D2E00; font-size: 14.5px; line-height: 1.35; }
.ch-handbar[hidden] { display: none; }
.ch-handbar span { flex: 1; min-width: 0; }
.ch-handbar .hp-resume { margin: 0; flex: 0 0 auto; padding: 7px 12px; border-radius: 99px; border: 0; background: var(--g-d); color: #fff; font-weight: 700; cursor: pointer; font-size: 14.5px; }
.ch-form { align-items: center; }
.ch-form .ch-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--g-line); background: var(--g-bg); color: var(--ink2); font-size: 18px; cursor: pointer; box-shadow: none; display: grid; place-items: center; padding: 0; }
.ch-form .ch-ic:hover { border-color: var(--g); }
.ch-form .ch-ic:focus-visible, .ch-form .ch-send:focus-visible, .ch-handbar .hp-resume:focus-visible { outline: 3px solid #0B5FCC; outline-offset: 2px; }
body.hand-up .chat { box-shadow: 0 0 0 3px #F2C94C inset; }
.cm.k-giang { align-self: stretch; max-width: 100%; }
.cm.k-giang .cm-b { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #4A5A52; font-size: 14px; padding: 2px 4px; border-left: 3px solid var(--g-line) !important; border-radius: 0; }
.cm.k-giang .cm-meta { display: none; }
.cm.k-st .cm-b { padding: 4px 8px; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.cm.k-st .cm-stch { font-size: 22px; line-height: 1; }
.cm.k-st .cm-stimg { width: 40px; height: 40px; }
.cm.k-stdap .cm-b { font-style: italic; }
.cm.typing .cm-b { align-items: center; }
.cm.typing .ty-lb { margin-left: 6px; font-size: 14px; color: #4A5A52; }
.cmdbar .cbtn.on { background: #FFE9A8; }
body.slide-chua #cChat::after { content: "❓"; position: absolute; top: -4px; right: -4px; font-size: 13.5px; }
/* bài tập cuối buổi: 4 chip tiến độ theo kỹ năng, nút Nộp bài xanh (đỏ chỉ dành cho Lưu và câu sai) */
.e-baitap .bt-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; position: sticky; top: 0; z-index: 2; background: var(--g-bg2); padding: 4px 0; }
.e-baitap .bt-chip { border: 1px solid var(--g-line); background: #fff; color: var(--ink2); border-radius: 99px; padding: 3px 10px; font-size: 14.5px; }
.e-baitap .bt-chip b { color: var(--g-dd); }
.e-baitap .bt-chip.xong { background: var(--g-d); border-color: var(--g-d); color: #fff; }
.e-baitap .bt-chip.xong b { color: #fff; }
.e-baitap .bt-nop { background: var(--g-d); border-color: var(--g-d); color: #fff; }
.e-baitap .bt-dem { color: #3F4F47; font-size: 15.5px; }
/* ôn bài cũ: chưa có lỗi thật của buổi trước thì ghi rõ đây là ví dụ mẫu */
body.on-mau .e-onloi .ol-h::after { content: "Dữ liệu mẫu"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: #EEF1F4; color: #3F4F47; font-size: 13.5px; font-weight: 600; vertical-align: middle; }
.e-onloi .ol-sk { background: var(--g-bg); color: var(--g-dd); }
@media (max-width: 640px) {
  .ch-handbar { font-size: 14px; }
  .ch-form { gap: 5px; padding: 6px; }
  .ch-form .ch-ic, .ch-form button { width: 40px; height: 40px; }
}

/* 30/10/2026 (deploy t_f52f54740e2f): bảng sticker nằm trong .controls nên ô sticker bị luật ".controls button" (min-width 70px, cao 50px) kéo rộng, tràn khỏi khung. Trả ô sticker về kích thước của sticker.css. */
.controls .rqx-st-panel button { min-width: 0; width: auto; height: 38px; padding: 0; gap: 0; flex: none; flex-direction: row; background: transparent; border: 1px solid transparent; border-radius: 10px; box-shadow: none; }
.controls .rqx-st-panel button:hover { background: var(--st-tint); border-color: var(--st-green); }
.controls .rqx-st-panel .rqx-st-ppitem { height: 48px; }
@media (max-width: 480px) { .controls .rqx-st-panel button { height: 36px; } .controls .rqx-st-panel .rqx-st-ppitem { height: 44px; } }

/* 30/10/2026: chữ tạm khi học viên đang nói vào mic, chỉ ở ô nhập, dạng mờ (chưa vào ô hội thoại) */
#chatInput.stt-tam { color: #8a8a8a; font-style: italic; }
#chatInput.stt-tam::placeholder { color: #0B6CF3; font-style: italic; opacity: 1; }

/* Vòng điểm phát âm 0-100 (30/10/2026) */
.heard-box .hb-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.heard-box .hb-main { min-width: 0; }
.diem-vong { position: relative; flex: none; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }
.diem-vong svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.diem-vong circle { fill: none; stroke-width: 6; }
.diem-vong .nen { stroke: #e3ece6; }
.diem-vong .chay { stroke: var(--mau, #1f9d55); stroke-linecap: round; }
.diem-vong b { position: relative; font-size: 21px; line-height: 1; color: var(--mau, #1f9d55); font-variant-numeric: tabular-nums; }
.diem-vong i { position: relative; font-style: normal; font-size: 10.5px; color: var(--mute, #6b7c72); }
.diem-vong.nho { float: right; width: 44px; height: 44px; margin: 0 0 4px 8px; }
.diem-vong.nho b { font-size: 15.5px; }
.diem-vong.nho i { font-size: 9px; }
@media (max-width: 600px) { .diem-vong:not(.nho) { width: 54px; height: 54px; } .diem-vong:not(.nho) b { font-size: 18px; } }
/* Nhãn mức điểm (mục 16.18): Đọc lại, Gần đạt, Đạt, Rất tốt, Tuyệt vời, Như người bản xứ; màu theo điểm như vòng */
.muc-nhan { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 0.92em; line-height: 1.5; color: #fff; background: var(--mau, #1f9d55); white-space: nowrap; }
.muc-nhan.m-doc_lai { background: #fff; color: var(--mau, #3A7CD9); box-shadow: inset 0 0 0 1.5px var(--mau, #3A7CD9); }

/* ---------- MỘT mic, ô "Bạn", chat thu gọn (30/10/2026, QUY-TRINH-DAY-HOC.md mục 1-3) ---------- */
/* Bốn trạng thái micState trên nút mic: Tắt xám, Lượt của bạn xanh #0B6CF3, Đang chấm xanh đậm nhấp nháy nhẹ, Bạn tự bật xanh viền */
.cmdbar .tp-mic.ms-luot { background: var(--g); border-color: var(--g); color: #fff; animation: none; }
.cmdbar .tp-mic.ms-cham { background: var(--g-dd); border-color: var(--g-dd); color: #fff; animation: msBlink 1.4s ease-in-out infinite; }
.cmdbar .tp-mic.ms-tu-bat { background: #fff; border: 2px solid var(--g); color: var(--g-d); }
.cmdbar .tp-mic.ms-tu-bat .ic::after { background: var(--g); }
.cmdbar .tp-mic.ms-tu-bat .lvl { background: var(--g); }
@keyframes msBlink { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }

.ban-tile { position: fixed; z-index: 60; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--g-line); border-radius: var(--r); box-shadow: 0 6px 18px rgba(28,49,40,.12); color: var(--ink2); --lv: 0; }
.ban-tile.ms-luot, .ban-tile.ms-cham { border-color: var(--g); box-shadow: 0 0 0 2px rgba(11, 108, 243,.25), 0 6px 18px rgba(28,49,40,.12); }
.ban-tile.ms-tu-bat { border: 2px solid var(--g); }
.bt-face { position: relative; flex: 0 0 60px; width: 60px; height: 60px; }
.bt-av, .bt-face video { position: absolute; left: 7px; top: 7px; width: 46px; height: 46px; border-radius: 50%; }
.bt-av { display: grid; place-items: center; background: var(--g-bg); font-size: 25px; line-height: 1; }
.bt-face video { object-fit: cover; transform: scaleX(-1); background: #1c3128; }
.bt-face video[hidden], .ban-tile.cam-on .bt-av { display: none; }
.bt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.bt-ring circle { fill: none; }
.bt-ring .lv { stroke: var(--g); stroke-width: calc(2px + var(--lv) * 7px); opacity: calc(.2 + var(--lv) * .8); transition: stroke-width .08s linear; }
.ban-tile.ms-tat .bt-ring .lv, .ban-tile.ms-na .bt-ring .lv { stroke: #A9B3AB; stroke-width: 2px; opacity: .45; }
.bt-ring .cd { stroke: #F2B632; stroke-width: 5px; stroke-linecap: round; opacity: 0; }
.ban-tile.dem .bt-ring .cd { opacity: 1; }
.bt-cd { position: absolute; right: -4px; bottom: -3px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 99px; background: var(--g); color: #fff; font-size: 12.5px; line-height: 20px; text-align: center; }
.bt-cd[hidden] { display: none; }
.bt-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bt-meta b { font-size: 15px; color: var(--g-dd); }
.bt-meta span { font-size: 14px; color: #5b6b62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ban-tile.ms-luot .bt-meta span, .ban-tile.ms-cham .bt-meta span, .ban-tile.ms-tu-bat .bt-meta span { color: var(--g-d); font-weight: 700; }
.ban-tile.ms-cham .bt-meta span { animation: msBlink 1.4s ease-in-out infinite; }
.bt-cam { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--g-line); background: var(--g-bg); cursor: pointer; font-size: 17px; padding: 0; }
.bt-cam:not(.on) { filter: grayscale(1); opacity: .7; }
.bt-cam:focus-visible { outline: 3px solid #0B5FCC; outline-offset: 2px; }
body.mode-review .ban-tile { display: none; }
@media (min-width: 1100px) {
  .ban-tile { right: 12px; width: 312px; top: var(--ban-top, 278px); }
}
@media (max-width: 1099px) {
  .ban-tile { right: 10px; bottom: calc(var(--ctl-h, 64px) + 160px); width: 64px; height: 64px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .ban-tile .bt-meta { display: none; }
  .ban-tile .bt-cam { position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; font-size: 12.5px; }
  .ban-tile .bt-face { flex-basis: 60px; }
}
@media (prefers-reduced-motion: reduce) { .cmdbar .tp-mic.ms-cham, .ban-tile.ms-cham .bt-meta span { animation: none; } }

/* 31/10/2026 (việc t_e0eec86943ea): khối bố cục 20.8 bên dưới bị rơi mất khi viết lại file lúc đổi giao diện màu (bản 6ee2775d),
   nên bản demo quay về chat cột phải + thanh lệnh ngang đáy. Ghép lại nguyên văn từ bai-giang-ai.css.bak-2026-10-31-b00 để khớp ảnh anh duyệt. */
/* ---------- 31/10/2026: Đổi vị trí ô hội thoại (#chat) và ô phím chức năng (#cmdbar), sắp xếp lại bố cục ---------- */
/* Màn rộng (>= 1100px):
   - Trái (rộng calc(100vw - var(--tw))): trên là bảng slide (#stage), dưới là ô hội thoại (#chat) rộng thoáng suốt chiều ngang dưới slide.
   - Phải (rộng 320px): trên là khung cô (#teacher), giữa là ô Bạn (#banTile), dưới là bảng phím chức năng & tiến độ (#cmdbar).
   Màn hẹp (<= 1099px):
   - Hàng cuối cùng là ô hội thoại (#chat) luôn hiện, ngay phía trên là hàng phím chức năng (#cmdbar), trên nữa là slide + khung cô nhỏ góc phải. */
.ch-grow { display: none; flex: 0 0 auto; border: 1px solid var(--g-line); background: #fff; color: var(--g-dd); border-radius: 99px; padding: 3px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ch-grow:focus-visible { outline: 3px solid #0B5FCC; outline-offset: 2px; }
/* Câu học viên NÓI: bong bóng viền xanh có 🎙, khác câu gõ (nền xanh đậm) */
.cm.me.voice .cm-b { background: #fff; color: var(--ink2); border: 1.5px solid var(--g); }
.cm-mic { margin-right: 3px; }

@media (min-width: 1100px) {
  :root { --tw: 344px; --chat-h: 212px; }
  body.chat-open { --chat-h: 272px; }
  .stage-wrap { padding-right: 0; margin-right: var(--tw); margin-bottom: calc(var(--chat-h, 212px) + 16px); }
  .stage { padding: 12px 22px 24px; }
  .heard-box, .ask-box { bottom: 12px; }
  .caption { bottom: 8px; }
  .toast { left: calc((100vw - var(--tw)) / 2); bottom: calc(var(--chat-h, 212px) + 12px); }

  /* Ô hội thoại rộng dưới bảng slide */
  .chat, body:not(.chat-open) .chat {
    left: 12px;
    right: calc(var(--tw) + 4px);
    bottom: 10px;
    top: auto;
    width: auto;
    height: var(--chat-h, 212px);
    max-height: none;
    border-radius: var(--r);
  }
  body:not(.chat-open) .ch-log { flex: 1 1 auto; max-height: none; }
  body:not(.chat-open) .ch-log > *:not(:nth-last-child(-n+2)) { display: flex; }
  .ch-log { padding: 8px 14px; gap: 6px; }
  .cm { max-width: 82%; }
  .ch-form { padding: 6px 12px; gap: 8px; }
  .ch-grow { display: inline-block; }

  /* Cột phải: Khung cô -> Ô Bạn -> Ô phím chức năng */
  .teacher.col { top: 52px; right: 12px; width: 320px; }
  .teacher.col.size-l { width: 320px; }
  .teacher.col.size-l .t-face { height: 168px; }
  .teacher.col.size-s { width: 320px; }
  .teacher.col.size-s .t-face { height: 118px; }
  .ban-tile { right: 12px; width: 320px; top: var(--ban-top, 260px); padding: 7px 10px; }

  .cmdbar.controls {
    position: fixed;
    left: auto;
    right: 12px;
    width: 320px;
    top: var(--cmd-top, 340px);
    bottom: 10px;
    z-index: 65;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--g-line);
    border-radius: var(--r);
    box-shadow: var(--sh1);
    box-sizing: border-box;
    overflow: visible;
  }
  .cmdbar .cb-clock {
    width: 100%;
    justify-content: space-between;
    padding: 5px 8px;
    background: var(--g-bg2);
    border: 1px solid var(--g-line);
    border-radius: 10px;
    box-sizing: border-box;
  }
  .cmdbar .cb-prog {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 5px 8px;
    background: var(--g-bg2);
    border: 1px solid var(--g-line);
    border-radius: 10px;
    box-sizing: border-box;
  }
  .cmdbar .cb-btns {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
  }
  .cmdbar .cbtn, .cmdbar .cbtn.hand {
    width: 100%;
    min-width: 0;
    height: 36px;
    border-radius: 10px;
    padding: 0 8px;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
  }
  .cmdbar .cbtn.tp-mic { padding: 0 8px; }
  .cmdbar .cbtn.tp-mic .lb { display: inline; max-width: none; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: inherit; font-weight: 700; }
  .cmdbar #cHand::after, .cmdbar #cPause::after, .cmdbar #cSticker::after, .cmdbar #cTraTu::after, .cmdbar #cCC::after {
    content: attr(data-m);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmdbar .cb-vol {
    width: 100%;
    height: 36px;
    padding: 0 6px 0 4px;
    border-radius: 10px;
    background: var(--g-bg);
    border: 1px solid var(--g-line);
    justify-content: flex-start;
    gap: 4px;
    box-sizing: border-box;
  }
  .cmdbar .cb-vol .cbtn { width: 28px; min-width: 28px; height: 28px; padding: 0; border: 0; background: transparent; flex: 0 0 28px; }
  .cmdbar .cb-vol input { display: block !important; width: 100%; min-width: 0; flex: 1 1 auto; }
  .cmdbar .cb-more { display: flex; width: 100%; }
  .cmdbar #cMore { width: 100%; border-radius: 10px; }
  .cmdbar #cMore::after { content: "Thêm"; font-size: 13.5px; font-weight: 700; }
  .cmdbar .cbtn.save {
    grid-column: 1 / -1;
    width: 100%;
    height: 36px;
    justify-content: center;
    border-radius: 10px;
  }
  .cmdbar .more-menu { left: auto; right: 0; bottom: calc(100% + 8px); }
  body.mode-review .cmdbar .review-ctl { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; }
  body.mode-review .cmdbar .review-ctl .seek { flex: 1 1 100%; }

  /* Khi bật bảng Duyệt nhanh (?duyet=1): thu gọn khung cô + ô Bạn + ô phím chức năng để nhường chỗ giữa cột phải */
  body.dn-has:not(.dn-gon) .teacher.col.size-l .t-face, body.dn-has:not(.dn-gon) .teacher.col.size-s .t-face { height: 108px; }
  body.dn-has:not(.dn-gon) .ban-tile { padding: 4px 8px; }
  body.dn-has:not(.dn-gon) .bt-face { flex: 0 0 46px; width: 46px; height: 46px; }
  body.dn-has:not(.dn-gon) .bt-av, body.dn-has:not(.dn-gon) .bt-face video { left: 5px; top: 5px; width: 36px; height: 36px; font-size: 21px; }
  body.dn-has:not(.dn-gon) .cmdbar.controls { top: auto; bottom: 10px; gap: 4px; padding: 6px 8px; }
  body.dn-has:not(.dn-gon) .cmdbar .cb-clock, body.dn-has:not(.dn-gon) .cmdbar .cb-prog { padding: 3px 7px; }
  body.dn-has:not(.dn-gon) .cmdbar .cb-btns { gap: 4px; }
  body.dn-has:not(.dn-gon) .cmdbar .cbtn, body.dn-has:not(.dn-gon) .cmdbar .cbtn.hand, body.dn-has:not(.dn-gon) .cmdbar .cb-vol, body.dn-has:not(.dn-gon) .cmdbar .cbtn.save { height: 28px; }
  body.dn-has.dn-gon .cmdbar.controls { top: calc(var(--cmd-top, 340px) + 45px); bottom: 10px; gap: 5px; padding: 7px 10px; }
  body.dn-has.dn-gon .cmdbar .cbtn, body.dn-has.dn-gon .cmdbar .cbtn.hand, body.dn-has.dn-gon .cmdbar .cb-vol, body.dn-has.dn-gon .cmdbar .cbtn.save { height: 32px; }
}

/* Màn hẹp (<= 1099px): ô hội thoại ở đáy màn hình, thanh phím chức năng nằm ngay phía trên ô hội thoại */
@media (max-width: 1099px) {
  :root { --chat-h: 146px; }
  body.chat-open { --chat-h: 228px; }
  .stage-wrap { margin-bottom: var(--ctl-h, 230px); }
  .stage { padding: 8px 12px 16px; }
  .ask-box, .heard-box { top: 8px; bottom: auto; }
  .caption { bottom: 6px; }
  .chat {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: var(--chat-h, 146px);
    max-height: calc(100dvh - 180px);
    transform: none;
    visibility: visible;
    transition: none;
    border-radius: 14px 14px 0 0;
    border-top: 1.5px solid var(--g-line);
    box-shadow: 0 -4px 16px rgba(28,49,40,.1);
    z-index: 70;
  }
  .ch-head { padding: 4px 10px; }
  .ch-head::before { display: none; }
  .ch-sub { display: none; }
  .ch-grow { display: inline-block; padding: 2px 8px; font-size: 13px; margin-left: auto; }
  .ch-x { display: none; }
  body.chat-open .ch-x { display: inline-grid; width: 26px; height: 26px; font-size: 14.5px; }
  .ch-log { padding: 4px 10px; gap: 4px; }
  .cm .cm-b { padding: 5px 9px; font-size: 14.5px; }
  .cm-meta { font-size: 12px; margin-top: 1px; }
  .ch-form { padding: 4px 8px; gap: 5px; }
  .ch-form input { padding: 6px 10px; font-size: 15px; }
  .ch-form .ch-ic, .ch-form button { width: 34px; height: 34px; }

  .cmdbar.controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--chat-h, 146px) + 2px);
    z-index: 68;
    border-top: 1px solid var(--g-line);
    border-bottom: 1px solid var(--g-line);
    box-shadow: 0 -4px 12px rgba(28,49,40,.08);
  }
  .teacher, .teacher.dock { right: 8px; bottom: calc(var(--ctl-h, 230px) + 6px); transition: none; }
  .toast { bottom: calc(var(--ctl-h, 230px) + 8px); }
}

@media (max-width: 640px) {
  .cmdbar.controls { gap: 4px 6px; padding: 4px 8px; }
  .cmdbar .cbtn, .cmdbar .cbtn.hand { flex: 0 0 38px; width: 38px; min-width: 38px; height: 38px; }
  .cmdbar .cbtn.save { height: 38px; padding: 0 10px 0 8px; }
  .teacher, .teacher.dock { width: 96px !important; bottom: calc(var(--ctl-h, 224px) + 6px); }
  .teacher .t-face, .teacher.size-l .t-face, .teacher.size-s .t-face { height: 96px !important; }
}

/* Bản ảnh thật (demo=1): ẩn ảnh cô tự tạo ngay từ lúc tải trang, khung chờ là ảnh cô Quỳnh Như thật (head đặt html.demo-pre) */
html.demo-pre .teacher .t-cam { visibility: hidden; }
html.demo-pre .teacher .t-face { background: #d9cdbb url(/bai-giang-ai/video/hsk1-b01-demo/co-ngoi-nghe.jpg) center/cover; }

/* ---------- 31/10/2026: 4 giao diện màu để học viên lựa chọn (Mặc định theo màu trang web, Kem ấm, Xanh lam, Ban đêm) ---------- */
:root {
  --g: #2D5BD7; --g-d: #1E3A8A; --g-dd: #0B1B3F; --g-bg: #E8EFFF; --g-bg2: #F3F6FC; --g-line: #CBD5E1; --ink2: #1F2937;
  --red: #105DC8; --red-d: #1A519E; --navy: #0B1B3F; --bad: #2B6CC8; --bad-d: #1B54A3; --save: #286AC6;
  --bg: #F6F8FC; --card: #FFFFFF; --line: #E2E8F0; --mute: #64748B; --ink: #1F2937; --gold: #F2B705; --ok: #12A150;
}
body { background: linear-gradient(180deg, #EEF3FF 0%, #F6F8FC 320px); background-color: #F6F8FC; color: var(--ink2); }
body:not([data-theme]) .topbar { background: linear-gradient(135deg, #0B1B3F 0%, #13285C 55%, #1E3A8A 100%); color: #FFFFFF; box-shadow: 0 2px 14px rgba(11, 27, 63, .16); }
body:not([data-theme]) .brand { background: linear-gradient(135deg, #105DC8, #0A418E); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
body:not([data-theme]) .mode-live-chip, body:not([data-theme]) .mode-review-chip { background: rgba(255, 255, 255, .14); color: #E5ECFF; border: 1px solid rgba(255, 255, 255, .24); }
body:not([data-theme]) .mode-live-chip i { background: #22C55E; box-shadow: 0 0 0 2px rgba(34, 197, 94, .35); }
body:not([data-theme]) .badge-ai { background: #F2B705; color: #0B1B3F; border: 1px solid #FFD25A; }
body:not([data-theme]) .topbar .theme-bar { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
body:not([data-theme]) .topbar .theme-btn { color: #E5ECFF; }
body:not([data-theme]) .topbar .theme-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .32); }
body:not([data-theme]) .topbar .theme-btn.on { background: #FFFFFF; color: #0B1B3F; border-color: #F2B705; }
body:not([data-theme]) .ch-log { background: #F8FAFC; }
body:not([data-theme]) .start-cover { background: rgba(246, 248, 252, .96); }
body:not([data-theme]) .btn-start { background: var(--g-d); }
body:not([data-theme]) .btn-start:hover { background: var(--g-dd); }
body:not([data-theme]) .start-kicker { color: var(--g-d); }
body:not([data-theme]) .teacher.talking .t-face { box-shadow: inset 0 0 0 3px rgba(45, 91, 215, .9); }
body:not([data-theme]).voice-only .teacher .t-face { background: linear-gradient(160deg, #DCE7FF, #BBD0FF); }
body:not([data-theme]) .ch-form button { background: var(--g-d); box-shadow: 0 2px 6px rgba(30, 58, 138, .28); }
body:not([data-theme]) .ch-form input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(45, 91, 215, .18); }
body:not([data-theme]) .cb-clock .tp-bar, body:not([data-theme]) .cmdbar .chapbar .cb { background: #E2E8F0; }
body:not([data-theme]) .cmdbar .chapbar .cb.past { background: var(--g); }
body:not([data-theme]) .cmdbar .chapbar .cb.on { background: linear-gradient(90deg, var(--g) 50%, #93B4F8 50%); box-shadow: 0 0 0 1.5px var(--g-dd); }
body:not([data-theme]) .cmdbar .cbtn:hover { background: #DCE7FF; border-color: var(--g); }
body:not([data-theme]) .cmdbar .tp-mic.off, body:not([data-theme]) .cmdbar .tp-mic.na { background: #F1F5F9; border-color: #CBD5E1; color: #475569; }
.sv-nav { border-color: var(--g-line) !important; }
.sv-nav .sv-b { background: var(--g-d) !important; }
.sv-nav .sv-b.sv-hoc { background: var(--g-dd) !important; }
.sv-nav .sv-n { color: var(--ink2) !important; }
.theme-bar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 99px; background: var(--g-bg2); border: 1px solid var(--g-line); flex-shrink: 0; }
.theme-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 99px; border: 1px solid transparent; background: transparent; color: var(--ink2); font: 600 11.5px/1 var(--vi); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.theme-btn:hover { background: var(--g-bg); border-color: var(--g-line); }
.theme-btn.on { background: var(--card); border-color: var(--g); color: var(--g-dd); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.theme-btn:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
.th-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; border: 1.5px solid rgba(0,0,0,.18); box-sizing: border-box; }
.theme-btn[data-theme="mac-dinh"] .th-dot { background: linear-gradient(135deg, #F6F8FC 45%, #13285C 55%); }
.theme-btn[data-theme="kem-am"] .th-dot { background: linear-gradient(135deg, #FAF3E6 45%, #2466C2 55%); }
.theme-btn[data-theme="xanh-lam"] .th-dot { background: linear-gradient(135deg, #EFF6FF 45%, #1D6FE8 55%); }
.theme-btn[data-theme="ban-dem"] .th-dot { background: linear-gradient(135deg, #0F172A 45%, #38BDF8 55%); border-color: rgba(255,255,255,.4); }

.start-themes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--g-bg2); border: 1px solid var(--g-line); width: 100%; }
.start-themes .st-lb { font-size: 14px; font-weight: 700; color: var(--mute); margin-right: 2px; }
.start-themes .theme-btn { height: 30px; padding: 0 10px; font-size: 14px; background: var(--card); border-color: var(--line); }
.start-themes .theme-btn.on { border-color: var(--g); border-width: 1.5px; background: var(--g-bg); color: var(--g-dd); }

@media (max-width: 900px) {
  .theme-bar .th-lb { display: none; }
  .theme-bar .theme-btn { width: 24px; height: 24px; padding: 0; justify-content: center; }
  .theme-bar .th-dot { width: 14px; height: 14px; flex-basis: 14px; }
}
@media (max-width: 420px) {
  .theme-bar { gap: 2px; padding: 2px 3px; }
  .theme-bar .theme-btn { width: 22px; height: 22px; }
}

/* Giao diện 1: Kem ấm Thư phòng (kem-am) - nền giấy tuyên chỉ ngà ấm, chữ nâu mực tàu, điểm nhấn đỏ son hổ phách */
body[data-theme="kem-am"] {
  --g: #2466C2; --g-d: #164F9E; --g-dd: #0B397A; --g-bg: #F4E8D4; --g-bg2: #FCF8F0; --g-line: #DFC8A6; --ink2: #2B1D14;
  --red: #164F9E; --red-d: #0B397A; --navy: #0E213B; --bad: #2B6CC8; --bad-d: #1A519E; --save: #1C5DB9;
  --bg: #FAF3E6; --card: #FFFDF8; --line: #E4D2B6; --mute: #6B5243; --ink: #2B1D14; --hl: #FDE68A; --gold: #D97706;
  background: #FAF3E6; color: #2B1D14;
}
body[data-theme="kem-am"] .py, body[data-theme="kem-am"] .cm .py { color: #2A65B8; }
body[data-theme="kem-am"] .topbar, body[data-theme="kem-am"] .cmdbar.controls, body[data-theme="kem-am"] .chat,
body[data-theme="kem-am"] .teacher, body[data-theme="kem-am"] .t-bar, body[data-theme="kem-am"] .ban-tile,
body[data-theme="kem-am"] .start-box, body[data-theme="kem-am"] .ask-box, body[data-theme="kem-am"] .heard-box,
body[data-theme="kem-am"] .more-menu, body[data-theme="kem-am"] .stage-full { background: var(--card); color: var(--ink2); }
body[data-theme="kem-am"] .ch-log { background: #F7EFE2; }
body[data-theme="kem-am"] .cm.co .cm-b { background: #FFFDF9; border-color: #E4D2B6; color: #2B1D14; }
body[data-theme="kem-am"] .ch-form { background: #FFFDF8; }
body[data-theme="kem-am"] .ch-form input { background: #F7EFE2; color: #2B1D14; border-color: #DFC8A6; }
body[data-theme="kem-am"] .start-cover { background: rgba(250, 243, 230, .95); }

/* Giao diện 2: Xanh lam Thanh thiên (xanh-lam) - nền xanh băng sáng mát mắt, chữ xanh navy đậm, điểm nhấn xanh biển */
body[data-theme="xanh-lam"] {
  --g: #1D6FE8; --g-d: #1557C0; --g-dd: #0E3F91; --g-bg: #E1EEFE; --g-bg2: #F4F8FF; --g-line: #BBD6F7; --ink2: #0F2540;
  --red: #1557C0; --red-d: #0E3F91; --navy: #0C2447; --bad: #2B6CC8; --bad-d: #1A519E; --save: #286AC6;
  --bg: #EFF6FF; --card: #FFFFFF; --line: #C7DDF8; --mute: #476282; --ink: #0F2540; --hl: #FDE68A; --gold: #F59E0B;
  background: #EFF6FF; color: #0F2540;
}
body[data-theme="xanh-lam"] .py, body[data-theme="xanh-lam"] .cm .py { color: #2B6DC9; }
body[data-theme="xanh-lam"] .topbar, body[data-theme="xanh-lam"] .cmdbar.controls, body[data-theme="xanh-lam"] .chat,
body[data-theme="xanh-lam"] .teacher, body[data-theme="xanh-lam"] .t-bar, body[data-theme="xanh-lam"] .ban-tile,
body[data-theme="xanh-lam"] .start-box, body[data-theme="xanh-lam"] .ask-box, body[data-theme="xanh-lam"] .heard-box,
body[data-theme="xanh-lam"] .more-menu, body[data-theme="xanh-lam"] .stage-full { background: var(--card); color: var(--ink2); }
body[data-theme="xanh-lam"] .ch-log { background: #F5F9FF; }
body[data-theme="xanh-lam"] .cm.co .cm-b { background: #FFFFFF; border-color: #C7DDF8; color: #0F2540; }
body[data-theme="xanh-lam"] .ch-form { background: #FFFFFF; }
body[data-theme="xanh-lam"] .ch-form input { background: #F0F6FF; color: #0F2540; border-color: #BBD6F7; }
body[data-theme="xanh-lam"] .start-cover { background: rgba(239, 246, 255, .95); }

/* Giao diện 3: Ban đêm Dịu mắt (ban-dem) - nền xanh đen tuyết tùng chống mỏi mắt, chữ trắng bạc & vàng kem sáng */
body[data-theme="ban-dem"] {
  --g: #1056B9; --g-d: #054196; --g-dd: #6EE7B7; --g-bg: #243247; --g-bg2: #152033; --g-line: #334155; --ink2: #F1F5F9;
  --red: #34D399; --red-d: #6EE7B7; --navy: #FEF08A; --bad: #71A9F8; --bad-d: #448BEF; --save: #2672DC;
  --bg: #0F172A; --card: #1E293B; --line: #334155; --mute: #CBD5E1; --ink: #F1F5F9; --hl: #422006; --gold: #FBBF24; --ok: #34D399;
  background: #0F172A; color: #F1F5F9;
}
body[data-theme="ban-dem"] .py, body[data-theme="ban-dem"] .cm .py, body[data-theme="ban-dem"] .e-baitap .bt-pydoc { color: #FDBA74; }
body[data-theme="ban-dem"] .topbar, body[data-theme="ban-dem"] .cmdbar.controls, body[data-theme="ban-dem"] .chat,
body[data-theme="ban-dem"] .teacher, body[data-theme="ban-dem"] .t-bar, body[data-theme="ban-dem"] .ban-tile,
body[data-theme="ban-dem"] .start-box, body[data-theme="ban-dem"] .ask-box, body[data-theme="ban-dem"] .heard-box,
body[data-theme="ban-dem"] .qa-note, body[data-theme="ban-dem"] .more-menu, body[data-theme="ban-dem"] .toast,
body[data-theme="ban-dem"] .stage-full, body[data-theme="ban-dem"] .ch-grow, body[data-theme="ban-dem"] .ch-x,
body[data-theme="ban-dem"] .t-show, body[data-theme="ban-dem"] .btn-sec { background: #1E293B; color: #F1F5F9; border-color: #334155; }
body[data-theme="ban-dem"] .badge-ai { background: #3B2F13; color: #FDE68A; border-color: #854D0E; }
body[data-theme="ban-dem"] .caption { background: rgba(15, 23, 42, .95); color: #F8FAFC; border-color: #334155; }
body[data-theme="ban-dem"] .caption.chip { background: #3B2F13; color: #FDE68A; border-color: #854D0E; }
body[data-theme="ban-dem"] .ch-log { background: #131C2E; }
body[data-theme="ban-dem"] .ch-hint { background: #1E293B; color: #CBD5E1; border-color: #334155; }
body[data-theme="ban-dem"] .cm.co .cm-b { background: #1E293B; border-color: #334155; color: #F1F5F9; }
body[data-theme="ban-dem"] .cm.me .cm-b { background: #054196; color: #FFFFFF; }
body[data-theme="ban-dem"] .cm.me.voice .cm-b { background: #17253B; color: #F1F5F9; border-color: #1056B9; }
body[data-theme="ban-dem"] .cm.k-word .cm-b { background: #262318; border-color: #854D0E; }
body[data-theme="ban-dem"] .cm.k-score .cm-b { background: #131D2A; border-color: #062B5F; }
body[data-theme="ban-dem"] .cm.k-bu .cm-b, body[data-theme="ban-dem"] .cm.k-err .cm-b { background: #161F2C; border-color: #1D467F; color: #A5C9FC; }
body[data-theme="ban-dem"] .cm.k-giang .cm-b { color: #CBD5E1; }
body[data-theme="ban-dem"] .cm-syl span, body[data-theme="ban-dem"] .heard-box .hb-syl span { background: #131D2A; }
body[data-theme="ban-dem"] .cm-syl span b, body[data-theme="ban-dem"] .heard-box .hb-syl b { color: #6EE7B7; }
body[data-theme="ban-dem"] .cm-syl span.bad, body[data-theme="ban-dem"] .heard-box .hb-syl span.bad { background: #172231; }
body[data-theme="ban-dem"] .cm-syl span.bad b, body[data-theme="ban-dem"] .heard-box .hb-syl span.bad b { color: #A5C9FC; }
body[data-theme="ban-dem"] .cm-say { background: #243247; color: #F1F5F9; border-color: #334155; }
body[data-theme="ban-dem"] .ch-form { background: #1E293B; border-top-color: #334155; }
body[data-theme="ban-dem"] .ch-form input { background: #0F172A; color: #F8FAFC; border-color: #334155; }
body[data-theme="ban-dem"] .ch-handbar { background: #3B2F13; border-bottom-color: #854D0E; color: #FDE68A; }
body[data-theme="ban-dem"] .e-wordcard .wc-ex, body[data-theme="ban-dem"] .e-example,
body[data-theme="ban-dem"] .e-review .rv > div, body[data-theme="ban-dem"] .e-names > div { background: #152033; }
body[data-theme="ban-dem"] .e-wordcard .wc-note, body[data-theme="ban-dem"] .e-quiz .explain,
body[data-theme="ban-dem"] .e-note { background: #17253B; color: #E2E8F0; border-color: #334155; }
body[data-theme="ban-dem"] .e-wordcard .pos, body[data-theme="ban-dem"] .e-tag,
body[data-theme="ban-dem"] .e-think, body[data-theme="ban-dem"] .e-instr, body[data-theme="ban-dem"] .e-next { background: #272215; color: #FDE68A; border-color: #713F12; }
body[data-theme="ban-dem"] .e-warn { background: #161F2C; border-color: #1D467F; color: #CAE0FE; }
body[data-theme="ban-dem"] .e-warn .w-vi { color: #E2E8F0; }
body[data-theme="ban-dem"] .e-meta span, body[data-theme="ban-dem"] .e-formula,
body[data-theme="ban-dem"] .e-quiz .opt, body[data-theme="ban-dem"] .e-match button,
body[data-theme="ban-dem"] .e-order .tile, body[data-theme="ban-dem"] .e-baitap button,
body[data-theme="ban-dem"] .e-baitap .bt-chip:not(.xong), body[data-theme="ban-dem"] .e-baitap .bt-go,
body[data-theme="ban-dem"] .ak-btns button:not(.pri) { background: #1E293B; color: #F1F5F9; border-color: #334155; }
body[data-theme="ban-dem"] .e-formula .f-note, body[data-theme="ban-dem"] .e-onloi .ol-note,
body[data-theme="ban-dem"] .e-baitap .bt-st, body[data-theme="ban-dem"] .e-baitap .bt-dem,
body[data-theme="ban-dem"] .bt-meta span { color: #CBD5E1; }
body[data-theme="ban-dem"] .e-quiz .opt.right, body[data-theme="ban-dem"] .e-match .ok,
body[data-theme="ban-dem"] .e-order .o-ans.ok, body[data-theme="ban-dem"] .e-baitap .bt-it.ok,
body[data-theme="ban-dem"] .e-baitap .bt-opt.right { background: #131D2A; border-color: #1056B9; }
body[data-theme="ban-dem"] .e-quiz .opt.wrong, body[data-theme="ban-dem"] .e-match .bad,
body[data-theme="ban-dem"] .e-order .o-ans.bad, body[data-theme="ban-dem"] .e-baitap .bt-it.bad { background: #161F2C; border-color: #71A9F8; }
body[data-theme="ban-dem"] .mtc, body[data-theme="ban-dem"] .e-baitap .bt-net { background-color: #152033; border-color: #475569; }
body[data-theme="ban-dem"] .mtc-ch { color: #334155; }
body[data-theme="ban-dem"] .mtc-ch.done { color: #FEF08A; }
body[data-theme="ban-dem"] .cmdbar .cbtn.hand { background: #3B2F13; border-color: #854D0E; color: #FDE68A; }
body[data-theme="ban-dem"] .cmdbar .tp-mic.off, body[data-theme="ban-dem"] .cmdbar .tp-mic.na { background: #1E293B; border-color: #475569; color: #94A3B8; }
body[data-theme="ban-dem"] .cmdbar .chapbar .cb { background: #334155; }
body[data-theme="ban-dem"] .cmdbar .chapbar .cb.past { background: var(--g); }
body[data-theme="ban-dem"] .cb-clock .tp-bar { background: #334155; }
body[data-theme="ban-dem"] .diem-vong .nen { stroke: #334155; }
body[data-theme="ban-dem"] .muc-nhan.m-doc_lai { background: #1E293B; }
body[data-theme="ban-dem"] .start-cover { background: rgba(15, 23, 42, .95); }

/* Câu hội thoại cần đọc (đóng vai, đọc theo bóng thoại): chữ và viền đỏ, nền hồng nhạt (anh dặn 31/10/2026) */
.e-bubble.vai-doc { opacity: 1 !important; transform: none !important; }
.e-bubble.vai-doc .bb { border-color: #206DD9 !important; background: #F2F7FE !important; box-shadow: 0 0 0 3px rgba(32, 109, 217, .25), 0 6px 18px rgba(32, 109, 217, .18) !important; }
.e-bubble.vai-doc .zh.line, .e-bubble.vai-doc .zh.line * { color: #206DD9 !important; }
.e-bubble.vai-doc .zh.line { font-weight: 700; }
.e-bubble.vai-doc .py { color: #1859B4 !important; }

/* Xem slide online (?xem=slide, 31/10/2026, Bài 0): chỉ còn slide và thanh lật trang */
body[data-slide-view] #cmdbar, body[data-slide-view] .progress, body[data-slide-view] #teacher, body[data-slide-view] #banTile,
body[data-slide-view] #chat, body[data-slide-view] #tShow, body[data-slide-view] .mode-live-chip, body[data-slide-view] #cFull { display: none !important; }
body[data-slide-view] .stage-wrap { margin: 0 !important; padding: 0 0 68px !important; }
body[data-slide-view] .stage .s-top { padding-right: 0; }
.sv-nav { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #cfe5cf; border-radius: 99px; padding: 6px 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-width: calc(100vw - 16px); }
.sv-nav .sv-b { border: 0; background: #0B6CF3; color: #fff; font: 600 14px/1 Arial, sans-serif; padding: 9px 14px; border-radius: 99px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sv-nav .sv-b:disabled { opacity: .4; cursor: default; }
.sv-nav .sv-hoc { background: #0f5f14; }
.sv-nav .sv-n { font: 600 14px/1 Arial, sans-serif; color: #1d3b22; min-width: 48px; text-align: center; }
@media (max-width: 480px) { .sv-nav .sv-b { padding: 8px 10px; font-size: 14.5px; } .sv-nav { gap: 5px; } }

/* ========== CẬP NHẬT 31/10/2026 V2 (14 MỤC CHỈNH SỬA GIAO DIỆN & TƯƠNG TÁC) ========== */
/* Mục 10: Xóa dòng chân trang trên slide */
.s-foot { display: none !important; }

/* Mục 3: Luôn dùng khung cô Quỳnh Như thật, ẩn ảnh vẽ tự tạo */
.teacher .t-cam { display: none !important; }
.teacher .t-face { background: #d9cdbb url(/bai-giang-ai/video/hsk1-b01-demo/co-ngoi-nghe.jpg) center/cover; }

/* Mục 9: Dòng chạy chữ hướng dẫn Tra từ khi gặp từ mới */
.vocab-marquee {
  position: relative;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: linear-gradient(90deg, #FFFBEB 0%, #FEF3C7 50%, #FFFBEB 100%);
  border-bottom: 1.5px solid #F59E0B;
  color: #0F3B78;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11, 108, 243, 0.12);
}
.vocab-marquee[hidden] { display: none !important; }
.vocab-marquee .vm-inner {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.vocab-marquee .vm-track {
  display: inline-block;
  padding-left: 100%;
  animation: rqxMarquee 24s linear infinite;
}
.vocab-marquee:hover .vm-track { animation-play-state: paused; }
@keyframes rqxMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.vocab-marquee .vm-chip {
  flex: 0 0 auto;
  border: 1px solid #D97706;
  background: #F59E0B;
  color: #FFFFFF;
  font: 700 12px/1 var(--vi);
  padding: 5px 10px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.vocab-marquee .vm-chip:hover { background: #B45309; }

/* Mục 6: Thanh ghi chú giới hạn Tạm dừng tối đa 3 phút */
.pause-banner {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 14px;
  background: linear-gradient(90deg, #F2F7FE 0%, #E2EEFE 100%);
  border-bottom: 2px solid #448BEF;
  color: #1B4F99;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 8px rgba(38, 114, 220, 0.15);
}
.pause-banner[hidden] { display: none !important; }
.pause-banner .pb-ic { font-size: 18px; flex: 0 0 auto; }
.pause-banner .pb-txt { line-height: 1.35; }
.pause-banner .pb-cd {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2672DC;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Mục 14: Hộp câu hỏi "Slide này hơi nhiều chữ..." màu nổi bật + đếm ngược 5s + ghi chú 3 phút */
.ask-box {
  background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 100%) !important;
  border: 2.5px solid #D97706 !important;
  color: #0F3B78 !important;
  box-shadow: 0 14px 34px rgba(180, 83, 9, 0.28), 0 0 0 4px rgba(251, 191, 36, 0.28) !important;
  padding: 14px 16px !important;
}
.ask-box .ak-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ask-box .ak-text {
  margin-bottom: 0;
  font-size: 17.5px;
  font-weight: 800;
  color: #0F3B78 !important;
}
.ask-box .ak-cd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: 99px;
  background: #D97706;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(11, 108, 243, 0.35);
}
.ask-box .ak-cd[hidden],
.ask-box .ak-btns button[hidden],
.ask-box .ak-pause-note[hidden] {
  display: none !important;
}
.ask-box .ak-btns button {
  background: #FFFFFF !important;
  color: #0F3B78 !important;
  border: 1.5px solid #D97706 !important;
  font-weight: 700;
}
.ask-box .ak-btns button.pri {
  background: #B45309 !important;
  color: #FFFFFF !important;
  border-color: #92400E !important;
}
.ask-box .ak-pause-note {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(226, 238, 254, 0.92);
  border: 1px solid #71A9F8;
  color: #1B4F99;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* Mục 13: Nút ⋯ (Thêm) khi mở ra không bị các khung khác che mất */
.cmdbar.controls.menu-open {
  z-index: 125 !important;
}
@media (min-width: 1100px) {
  .cmdbar .cb-more { position: static; }
  .cmdbar .more-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    bottom: calc(100% + 6px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    z-index: 210;
    box-shadow: 0 14px 36px rgba(11, 27, 63, 0.28);
    border: 1.5px solid var(--g);
  }
}
@media (max-width: 1099px) {
  .cmdbar .more-menu {
    z-index: 210;
    max-height: 68vh;
    overflow-y: auto;
    box-shadow: 0 14px 36px rgba(11, 27, 63, 0.28);
    border: 1.5px solid var(--g);
  }
}

/* Mục 12: Màu nền ô chat khác biệt rõ với màu Khung bài giảng + Nút Đóng/mở ô chat */
.chat {
  background: #E2ECFF;
  border: 1.5px solid #93B4F8;
}
body:not([data-theme]) .chat {
  background: #E2ECFF;
  border-color: #93B4F8;
}
body:not([data-theme]) .ch-head {
  background: linear-gradient(90deg, #13285C 0%, #1E3A8A 100%);
  color: #FFFFFF;
  border-bottom: 1px solid #1E3A8A;
}
body:not([data-theme]) .ch-head b { color: #FFFFFF; }
body:not([data-theme]) .ch-sub { color: #DBEAFE; }
body:not([data-theme]) .ch-log {
  background: #EBF2FF;
}
body:not([data-theme]) .ch-form {
  background: #DCE8FF;
  border-top: 1px solid #B6CEFC;
}
body:not([data-theme]) .ch-form input {
  background: #FFFFFF;
  border-color: #93B4F8;
}
.ch-grow {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: #0B1B3F;
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.ch-grow:hover { background: #FFFFFF; transform: translateY(-1px); }

/* Trạng thái Đóng ô chat (body.chat-collapsed): thu gọn chỉ còn thanh tiêu đề 40px, nhường chỗ cho slide */
body.chat-collapsed {
  --chat-h: 40px !important;
}
body.chat-collapsed .chat {
  height: 40px !important;
  min-height: 40px !important;
}
body.chat-collapsed .ch-log,
body.chat-collapsed .ch-form,
body.chat-collapsed .ch-handbar {
  display: none !important;
}
@media (min-width: 1100px) {
  body.chat-collapsed .stage-wrap {
    margin-bottom: 56px !important;
  }
}

/* Mục 8: Sửa 2 giao diện màu phụ (kem-am & xanh-lam) khác biệt hẳn nhau */
.theme-btn[data-theme="kem-am"] .th-dot { background: linear-gradient(135deg, #F6E3BA 45%, #18427C 55%); }
.theme-btn[data-theme="xanh-lam"] .th-dot { background: linear-gradient(135deg, #D1FAE5 45%, #043478 55%); }

/* Giao diện phụ 1: Hoàng Kim Cổ Điển (kem-am) - Đỏ rượu vang & Vàng hoàng gia ấm áp */
body[data-theme="kem-am"] {
  --g: #B45309; --g-d: #215092; --g-dd: #163664; --g-bg: #F5E0B7; --g-bg2: #FBF0D9; --g-line: #D4AC6E; --ink2: #0E213B;
  --red: #215092; --red-d: #163664; --navy: #10284A; --bad: #2B6CC8; --bad-d: #1A519E; --save: #1B4F99;
  --bg: #F6E6C6; --card: #FFFDF7; --line: #DEC08F; --mute: #6E472B; --ink: #0E213B; --hl: #FDE68A; --gold: #D97706;
  background: linear-gradient(180deg, #F2D9A7 0%, #F7E9CC 340px);
  background-color: #F7E9CC;
  color: #0E213B;
}
body[data-theme="kem-am"] .topbar {
  background: linear-gradient(135deg, #12315C 0%, #1D467F 55%, #124B9A 100%) !important;
  color: #FEF3C7 !important;
  box-shadow: 0 2px 12px rgba(18, 49, 92, 0.25);
}
body[data-theme="kem-am"] .brand { background: #F59E0B; color: #0A2345; }
body[data-theme="kem-am"] .topbar .theme-bar { background: rgba(255, 255, 255, 0.14); border-color: rgba(254, 243, 199, 0.3); }
body[data-theme="kem-am"] .topbar .theme-btn { color: #FEF3C7; }
body[data-theme="kem-am"] .topbar .theme-btn.on { background: #FEF3C7; color: #12315C; border-color: #F59E0B; }
body[data-theme="kem-am"] .stage {
  background: #FFFDF8;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #E6CCA0;
}
body[data-theme="kem-am"] .chat {
  background: #EBD2A4 !important;
  border: 1.5px solid #C89D54 !important;
}
body[data-theme="kem-am"] .ch-head {
  background: linear-gradient(90deg, #163664 0%, #215092 100%) !important;
  color: #FEF3C7 !important;
}
body[data-theme="kem-am"] .ch-head b { color: #FEF3C7 !important; }
body[data-theme="kem-am"] .ch-sub { color: #FDE68A !important; }
body[data-theme="kem-am"] .ch-log { background: #F2DFBA !important; }
body[data-theme="kem-am"] .ch-form { background: #E6C994 !important; border-top-color: #C89D54 !important; }
body[data-theme="kem-am"] .ch-form input { background: #FFFDF9 !important; color: #0E213B !important; border-color: #C89D54 !important; }

/* Giao diện phụ 2: Ngọc Lục Bảo Rừng Trúc (xanh-lam) - Xanh ngọc lục bảo tươi mát, khác biệt hoàn toàn với Mặc định và Hoàng Kim */
body[data-theme="xanh-lam"] {
  --g: #054196; --g-d: #043478; --g-dd: #06244E; --g-bg: #D1FAE5; --g-bg2: #ECFDF5; --g-line: #6EE7B7; --ink2: #061B39;
  --red: #043478; --red-d: #06244E; --navy: #06244E; --bad: #2B6CC8; --bad-d: #1A519E; --save: #1C5DB9;
  --bg: #D8F8E8; --card: #F7FFFA; --line: #86EFAC; --mute: #1F395E; --ink: #061B39; --hl: #FEF08A; --gold: #D97706;
  background: linear-gradient(180deg, #B9F3D8 0%, #DEFCEB 340px);
  background-color: #DEFCEB;
  color: #061B39;
}
body[data-theme="xanh-lam"] .topbar {
  background: linear-gradient(135deg, #02132C 0%, #06244E 55%, #043478 100%) !important;
  color: #ECFDF5 !important;
  box-shadow: 0 2px 12px rgba(6, 78, 59, 0.25);
}
body[data-theme="xanh-lam"] .brand { background: #1056B9; color: #02132C; }
body[data-theme="xanh-lam"] .topbar .theme-bar { background: rgba(255, 255, 255, 0.14); border-color: rgba(209, 250, 229, 0.3); }
body[data-theme="xanh-lam"] .topbar .theme-btn { color: #ECFDF5; }
body[data-theme="xanh-lam"] .topbar .theme-btn.on { background: #ECFDF5; color: #06244E; border-color: #1056B9; }
body[data-theme="xanh-lam"] .stage {
  background: #F4FFF9;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #A7F3D0;
}
body[data-theme="xanh-lam"] .chat {
  background: #B6EED2 !important;
  border: 1.5px solid #34D399 !important;
}
body[data-theme="xanh-lam"] .ch-head {
  background: linear-gradient(90deg, #06244E 0%, #043478 100%) !important;
  color: #ECFDF5 !important;
}
body[data-theme="xanh-lam"] .ch-head b { color: #ECFDF5 !important; }
body[data-theme="xanh-lam"] .ch-sub { color: #A7F3D0 !important; }
body[data-theme="xanh-lam"] .ch-log { background: #CCF5E1 !important; }
body[data-theme="xanh-lam"] .ch-form { background: #A7F3D0 !important; border-top-color: #34D399 !important; }
body[data-theme="xanh-lam"] .ch-form input { background: #FFFFFF !important; color: #061B39 !important; border-color: #34D399 !important; }

/* Giao diện Ban đêm: tách biệt rõ màu nền #chat với #stage */
body[data-theme="ban-dem"] .stage {
  background: #0F172A;
}
body[data-theme="ban-dem"] .chat {
  background: #1A2742 !important;
  border: 1.5px solid #3B82F6 !important;
}
body[data-theme="ban-dem"] .ch-head {
  background: linear-gradient(90deg, #1E293B 0%, #1D4ED8 100%) !important;
  color: #F8FAFC !important;
}
body[data-theme="ban-dem"] .ch-log { background: #162238 !important; }
body[data-theme="ban-dem"] .ch-form { background: #1E2E4D !important; }

/* Mục 2: Biểu tượng mic kèm vòng tròn lắng nghe đếm ngược ngay cạnh câu cần đọc */
.sp-zh-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-mic-ind,
.vai-mic-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 11px 4px 7px;
  border-radius: 99px;
  background: #ECFDF5;
  border: 2px solid #1056B9;
  color: #062B5F;
  font: 700 13px/1 var(--vi);
  box-shadow: 0 0 0 4px rgba(59, 139, 247, 0.22);
  vertical-align: middle;
  transition: transform .15s, background .15s, border-color .15s;
}
.sp-mic-ind[hidden],
.vai-mic-badge[hidden] { display: none !important; }
.sp-mic-ind.listening,
.vai-mic-badge.listening {
  background: #1056B9;
  color: #FFFFFF;
  border-color: #043478;
  animation: spMicPulse 1.1s ease-in-out infinite;
}
@keyframes spMicPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 139, 247, 0.35), 0 0 0 7px rgba(59, 139, 247, 0.15); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(59, 139, 247, 0.45), 0 0 0 12px rgba(59, 139, 247, 0.22); transform: scale(1.04); }
}
.sp-mic-ind .smi-ring,
.vai-mic-badge .smi-ring {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
}
.sp-mic-ind .smi-ring svg,
.vai-mic-badge .smi-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sp-mic-ind .smi-ring circle,
.vai-mic-badge .smi-ring circle {
  fill: none;
  stroke-width: 3.5;
}
.sp-mic-ind .smi-ring .bg,
.vai-mic-badge .smi-ring .bg {
  stroke: rgba(255, 255, 255, 0.35);
}
.sp-mic-ind .smi-ring .fg,
.vai-mic-badge .smi-ring .fg {
  stroke: #FDE047;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.sp-mic-ind .smi-ic,
.vai-mic-badge .smi-ic {
  position: relative;
  font-size: 15.5px;
  line-height: 1;
}
.sp-mic-ind .smi-cd,
.vai-mic-badge .smi-cd {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14.5px;
}

/* Mục 7: Camera học viên hiển thị rõ trong ô Bạn */
.ban-tile.cam-on .bt-face video {
  display: block !important;
  z-index: 2;
  object-fit: cover;
  transform: scaleX(-1);
  border: 2px solid var(--g);
}
.ban-tile.cam-on .bt-cam.on {
  background: var(--g);
  color: #FFFFFF;
  border-color: var(--g-d);
  filter: none;
  opacity: 1;
}

/* ========== CẬP NHẬT 31/10/2026 V3 (PHẢN HỒI HỌC VIÊN TRẢI NGHIỆM BÀI DEMO) ========== */
/* 1. Trang bắt đầu nằm gọn trong vùng slide để học viên nhìn thấy ngay toàn bộ giao diện lớp học trước khi bấm Bắt đầu */
.start-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 45 !important;
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(2px);
  padding: 12px !important;
  overflow-y: auto;
}
.start-box {
  max-width: 480px;
  padding: 20px 20px 18px;
  gap: 8px;
  box-shadow: 0 18px 42px rgba(11, 27, 63, 0.24);
}
.start-box p#startDesc {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.btn-tour {
  font-size: 15px;
  padding: 7px 16px;
}

/* 2. Ẩn lời giảng kịch bản (k-giang) trong #chatLog mặc định để khung chat gọn, chỉ hiện khi bấm nút "📜 Lời giảng" */
body:not(.show-script) #chatLog .cm.k-giang {
  display: none !important;
}
.ch-script-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}
.ch-script-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.ch-script-btn[aria-pressed="true"] {
  background: #FDE047;
  color: #0B1B3F;
  border-color: #F59E0B;
  font-weight: 700;
}
.ch-head .ch-grow {
  margin-left: 4px;
}

/* 3. Note hướng dẫn giao diện (Coachmark 4 bước tại vị trí Mic, Ô chat, Giơ tay, Tạm dừng) */
.tour-note {
  position: fixed;
  z-index: 220;
  width: min(330px, calc(100vw - 24px));
  background: #FFFBEB;
  color: #1F2937;
  border: 2px solid #F59E0B;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.28), 0 0 0 4px rgba(245, 158, 11, 0.22);
  font-size: 15px;
  line-height: 1.45;
  transition: top .2s ease, left .2s ease;
}
.tour-note[hidden] { display: none !important; }
.tour-note .tn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tour-note .tn-step {
  font-size: 13.5px;
  font-weight: 800;
  color: #B45309;
  background: #FEF3C7;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid #FCD34D;
}
.tour-note .tn-skip {
  border: 0;
  background: transparent;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.tour-note .tn-skip:hover { color: #0F172A; }
.tour-note .tn-body {
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8px;
}
.tour-note .tn-bar {
  height: 4px;
  border-radius: 2px;
  background: #FDE68A;
  overflow: hidden;
  margin-bottom: 8px;
}
.tour-note .tn-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #D97706;
  transition: width 0.1s linear;
}
.tour-note .tn-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.tour-note .tn-btn {
  border: 1px solid #D97706;
  background: #FFFFFF;
  color: #92400E;
  font: 700 12.5px/1 var(--vi);
  padding: 6px 12px;
  border-radius: 99px;
  cursor: pointer;
}
.tour-note .tn-btn.pri {
  background: #D97706;
  color: #FFFFFF;
}
.tour-note .tn-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.tour-hl {
  position: relative;
  z-index: 215 !important;
  box-shadow: 0 0 0 3px #F59E0B, 0 0 0 8px rgba(245, 158, 11, 0.38) !important;
  animation: tourPulse 1.1s ease-in-out infinite !important;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 3px #F59E0B, 0 0 0 7px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 4px #D97706, 0 0 0 12px rgba(245, 158, 11, 0.5); }
}

/* 4. Nút mic chủ động (Ấn giữ để nói / Bấm khi đọc xong) và trạng thái đang thu giọng */
.sp-mic-ind,
.vai-mic-badge {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.sp-mic-ind.recording,
.vai-mic-badge.recording {
  background: #2672DC !important;
  border-color: #1B4F99 !important;
  color: #FFFFFF !important;
  animation: recpulse 0.85s ease-in-out infinite !important;
}
.sp-card .sp-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.sp-card .sp-b.sp-hold-mic {
  background: #FEF3C7;
  border: 1.5px solid #D97706;
  color: #92400E;
  font-weight: 700;
  user-select: none;
  touch-action: none;
}
.sp-card .sp-b.sp-hold-mic.manual-on {
  background: #FFFBEB;
  border: 2px solid #D97706;
  color: #0F3B78;
  box-shadow: 0 0 0 3px rgba(11, 108, 243, 0.22);
}
.sp-card .sp-b.sp-hold-mic.holding,
.sp-card .sp-b.sp-hold-mic.recording {
  background: #2672DC;
  border-color: #1B4F99;
  color: #FFFFFF;
  animation: recpulse 0.85s ease-in-out infinite;
}
.sp-card .sp-k.manual-on {
  color: #B45309 !important;
  font-weight: 800;
}
.sp-card .sp-k.recording {
  color: #2672DC !important;
  font-weight: 800;
}
.sp-mic-ind.manual-on:not(.recording),
.vai-mic-badge.manual-on:not(.recording) {
  background: #FFFBEB !important;
  border-color: #D97706 !important;
  color: #92400E !important;
}
.sp-py[data-lv="1"],
.sp-py[data-lv="2"],
.sp-py[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========== CẬP NHẬT 01/11/2026 V4 (GIAO DIỆN MỚI ĐÃ DUYỆT + ĐIỀU KHIỂN ĐỌC CHẬM, LOA TỪNG CÂU, KHUNG BẢNG GIƠ TAY) ========== */
/* 1. Ẩn hộp thoại chat cố định (#chat) ở chế độ học trực tiếp để dành trọn không gian cho bài giảng */
body.mode-live:not(.show-chat-legacy) #chat,
body.mode-live:not(.show-chat-legacy) #cChat {
  display: none !important;
}
@media (min-width: 1100px) {
  body.mode-live:not(.show-chat-legacy) .stage-wrap {
    margin-bottom: 10px !important;
  }
}

/* 2. Bố cục .stage-wrap dạng cột để dòng trạng thái chờ (#askBox, #pauseBanner, #askTipsBar, #bottomMicDock, #handBoard) tự động kéo xuống dưới cùng, không che mất chữ bài học */
.stage-wrap {
  display: flex !important;
  flex-direction: column !important;
}
.stage-wrap > .vocab-marquee {
  flex: 0 0 auto;
}
.stage-wrap > .stage {
  flex: 1 1 0;
  height: auto !important;
  min-height: 0;
  width: 100%;
  padding-bottom: 18px !important;
}
.bottom-center-dock {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 34;
  box-sizing: border-box;
}
.bottom-center-dock:not(:has(> :not([hidden]))) {
  display: none !important;
}

/* 3. Biểu tượng SVG Micro mới tự động thích ứng với 4 màu phông bài học */
:root,
body:not([data-theme]),
body[data-theme="mac-dinh"] {
  --mic-on-bg: #16A34A;
  --mic-on-fg: #FFFFFF;
  --mic-on-ring: rgba(22, 163, 74, 0.26);
  --mic-off-bg: #F1F5F9;
  --mic-off-fg: #475569;
  --mic-off-border: #CBD5E1;
  --mic-slash-bg: #F1F5F9;
  --mic-slash-color: #2672DC;
}
body[data-theme="kem-am"] {
  --mic-on-bg: #B45309;
  --mic-on-fg: #FFFBEB;
  --mic-on-ring: rgba(180, 83, 9, 0.28);
  --mic-off-bg: #F5E6C8;
  --mic-off-fg: #6E472B;
  --mic-off-border: #D4AC6E;
  --mic-slash-bg: #F5E6C8;
  --mic-slash-color: #1B4F99;
}
body[data-theme="xanh-lam"] {
  --mic-on-bg: #043478;
  --mic-on-fg: #ECFDF5;
  --mic-on-ring: rgba(4, 120, 87, 0.28);
  --mic-off-bg: #D1FAE5;
  --mic-off-fg: #062B5F;
  --mic-off-border: #6EE7B7;
  --mic-slash-bg: #D1FAE5;
  --mic-slash-color: #2672DC;
}
body[data-theme="ban-dem"] {
  --mic-on-bg: #1056B9;
  --mic-on-fg: #061428;
  --mic-on-ring: rgba(59, 139, 247, 0.32);
  --mic-off-bg: #1E293B;
  --mic-off-fg: #94A3B8;
  --mic-off-border: #475569;
  --mic-slash-bg: #1E293B;
  --mic-slash-color: #71A9F8;
}
.rqx-mic-svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
}
#cMic .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#cMic .rqx-mic-svg {
  width: 20px;
  height: 20px;
}
.cmdbar .tp-mic.off,
.cmdbar .tp-mic.na {
  background: var(--mic-off-bg) !important;
  color: var(--mic-off-fg) !important;
  border-color: var(--mic-off-border) !important;
}
.cmdbar .tp-mic.ms-luot,
.cmdbar .tp-mic.ms-cham,
.cmdbar .tp-mic.ms-tu-bat {
  background: var(--mic-on-bg) !important;
  color: var(--mic-on-fg) !important;
  border-color: var(--mic-on-bg) !important;
  box-shadow: 0 0 0 3px var(--mic-on-ring) !important;
}
.cmdbar .tp-mic.ms-luot .lb,
.cmdbar .tp-mic.ms-cham .lb,
.cmdbar .tp-mic.ms-tu-bat .lb {
  color: var(--mic-on-fg) !important;
}

/* 4. Nút ✋ Giơ tay màu cam đậm nổi bật */
.cmdbar .cbtn.hand,
.controls button.hand {
  background: linear-gradient(135deg, #0C68EA 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #0C58C2 !important;
  box-shadow: 0 3px 10px rgba(12, 104, 234, 0.32) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
.cmdbar .cbtn.hand .lb,
.cmdbar .cbtn.hand .ic,
.controls button.hand .lb,
.controls button.hand .ic {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.cmdbar .cbtn.hand.on,
body.hand-up .cmdbar .cbtn.hand {
  background: linear-gradient(135deg, #0C58C2 0%, #124B9A 100%) !important;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.55), 0 4px 14px rgba(12, 88, 194, 0.4) !important;
}

/* 5. Cụm Mic và điều khiển Mic ở vị trí giữa và cuối trang (#bottomMicDock) */
.bottom-mic-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card, #FFFFFF);
  border: 2px solid var(--mic-on-bg, #16A34A);
  border-radius: 999px;
  padding: 7px 14px 7px 9px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 0 0 3px var(--mic-on-ring);
  max-width: min(760px, 98%);
  box-sizing: border-box;
}
.bottom-mic-dock[hidden] { display: none !important; }
.bottom-mic-dock.is-off {
  border-color: var(--mic-off-border, #CBD5E1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.bmd-mic-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 44px;
  padding: 0;
  transition: transform .15s, background .2s;
}
.bmd-mic-btn.is-on {
  background: var(--mic-on-bg);
  color: var(--mic-on-fg);
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.32);
}
.bmd-mic-btn.is-off {
  background: var(--mic-off-bg);
  color: var(--mic-off-fg);
  border-color: var(--mic-off-border);
}
.bmd-mic-btn.is-on .bmd-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--mic-on-bg);
  opacity: 0.55;
  animation: bmdPulse 1.35s ease-out infinite;
  pointer-events: none;
}
@keyframes bmdPulse {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.24); opacity: 0; }
}
.bmd-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
  flex: 1 1 auto;
}
.bmd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bmd-status {
  font-size: 14px;
  font-weight: 800;
  color: var(--mic-on-bg);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bottom-mic-dock.is-off .bmd-status {
  color: var(--mute);
}
.bmd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2672DC;
  display: inline-block;
  animation: blink 0.9s infinite;
}
.bottom-mic-dock.is-off .bmd-dot {
  background: #94A3B8;
  animation: none;
}
.bmd-waves {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
}
.bmd-waves i {
  display: inline-block;
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: var(--mic-on-bg);
  animation: bmdWave 0.65s ease-in-out infinite alternate;
}
.bmd-waves i:nth-child(2) { animation-delay: .12s; height: 14px; }
.bmd-waves i:nth-child(3) { animation-delay: .24s; height: 8px; }
.bmd-waves i:nth-child(4) { animation-delay: .36s; height: 13px; }
.bmd-waves i:nth-child(5) { animation-delay: .18s; height: 9px; }
.bmd-waves i:nth-child(6) { animation-delay: .30s; height: 12px; }
.bottom-mic-dock.is-off .bmd-waves { display: none; }
@keyframes bmdWave {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); }
}
.bmd-timer {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bmd-timer b {
  color: #2672DC;
  font-size: 15px;
}
.bmd-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}
.bmd-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mic-on-bg) 0%, #F59E0B 75%, #2672DC 100%);
  border-radius: 99px;
  transition: width 0.1s linear;
}
.bmd-sub {
  font-size: 12.5px;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmd-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.bmd-done-btn {
  border: 1.5px solid #2672DC;
  background: #F2F7FE;
  color: #1C5DB9;
  font: 800 12px/1 var(--vi);
  padding: 8px 12px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
}
.bmd-done-btn:hover {
  background: #2672DC;
  color: #FFFFFF;
}
.bmd-hold-btn {
  border: 1.5px solid #D97706;
  background: #FFFBEB;
  color: #92400E;
  font: 700 11.5px/1 var(--vi);
  padding: 7px 10px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
}
.bmd-hold-btn.holding,
.bmd-hold-btn.recording {
  background: #2672DC;
  color: #FFFFFF;
  border-color: #1B4F99;
}

/* 6. Hiệu ứng chữ cần đọc trên slide đổi sang màu đỏ và chạy màu Karaoke trực tiếp trên slide */
.stage .sp-c {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  padding: 0 1px;
  cursor: pointer;
  transition: color .18s, background .18s, transform .18s, box-shadow .18s;
}
.stage .sp-c:hover {
  background: rgba(245, 158, 11, 0.22);
  box-shadow: inset 0 -2px 0 #D97706;
}
.stage .sp-c.hl-on {
  background: var(--hl);
  color: var(--red-d);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.el.reading-now {
  border-color: #2672DC !important;
  box-shadow: 0 0 0 3px rgba(38, 114, 220, 0.22), 0 8px 22px rgba(38, 114, 220, 0.14) !important;
}
.el.reading-now .wc-zh,
.el.reading-now .zh.big,
.el.reading-now .zh.hlz,
.el.reading-now .wc-zh .sp-c,
.e-bubble.vai-doc .zh.line,
.e-bubble.vai-doc .zh.line .sp-c,
.e-bubble.vai-doc .hk-zh .sp-c {
  color: #2672DC !important;
}
.stage .sp-c.kr-done {
  color: #1C5DB9 !important;
  box-shadow: inset 0 -3px 0 #2672DC;
}
.stage .sp-c.kr-curr {
  color: #2672DC !important;
  background: rgba(254, 240, 138, 0.85);
  transform: translateY(-2px) scale(1.06);
  box-shadow: inset 0 -4px 0 #2672DC;
}
body[data-theme="ban-dem"] .stage .sp-c.kr-curr {
  background: rgba(250, 204, 21, 0.25);
  color: #A5C9FC !important;
}

/* 7. Biểu tượng loa 🔊 (.inline-spk) ở từng câu / từng từ trên slide */
.wc-py-row,
.wc-ex-top,
.ex-zh-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.inline-spk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1.5px solid #CBD5E1;
  background: #F8FAFC;
  color: #1E293B;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  vertical-align: middle;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.inline-spk:hover {
  background: #FEF3C7;
  border-color: #D97706;
  color: #92400E;
  transform: scale(1.06);
}
.inline-spk.playing {
  background: #16A34A !important;
  border-color: #15803D !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.28);
}
body.ask-time-on .inline-spk {
  background: #FFFBEB;
  border-color: #D97706;
  color: #92400E;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
  animation: spkNotice 1.5s ease-in-out infinite;
}
@keyframes spkNotice {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
body[data-theme="ban-dem"] .inline-spk {
  background: #1E293B;
  border-color: #475569;
  color: #F1F5F9;
}
body[data-theme="ban-dem"].ask-time-on .inline-spk {
  background: #3B2F13;
  border-color: #F59E0B;
  color: #FDE68A;
}

/* 8. Khung bảng câu hỏi giơ lên cho giáo viên đọc (#handBoard) */
.hand-board {
  width: min(680px, 98%);
  background: #FFFCF5;
  border: 3.5px solid #C89D66;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 5px 0 #A67B44, 0 12px 28px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  animation: boardRaise .22s cubic-bezier(.2, 1.3, .4, 1);
}
.hand-board[hidden] { display: none !important; }
@keyframes boardRaise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
body[data-theme="ban-dem"] .hand-board {
  background: #1E293B;
  border-color: #D97706;
  box-shadow: 0 5px 0 #92400E, 0 12px 28px rgba(0, 0, 0, 0.45);
}
.hb-history {
  max-height: 82px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(245, 232, 204, 0.45);
  border-radius: 10px;
  border: 1px dashed #D4AC6E;
}
.hb-history[hidden] { display: none !important; }
body[data-theme="ban-dem"] .hb-history {
  background: rgba(15, 23, 42, 0.55);
  border-color: #475569;
}
.hb-hist-item {
  font-size: 14px;
  color: #5C4028;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.35;
}
body[data-theme="ban-dem"] .hb-hist-item {
  color: #E2E8F0;
}
.hb-hist-item .hbi-time {
  font-size: 12.5px;
  color: #8C6D4F;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.hb-hist-item .hbi-q {
  font-weight: 600;
}
.hand-board .hb-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.hand-board #chatInput {
  flex: 1 1 auto;
  height: 42px;
  border-radius: 11px;
  border: 1.5px solid #D6B88A !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  padding: 0 14px;
  font: 600 14px/1.3 var(--vi);
  outline: none;
}
.hand-board #chatInput::placeholder {
  color: #9CA3AF;
  font-weight: 500;
  opacity: 0.85;
}
.hand-board #chatInput:focus {
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(11, 108, 243, 0.18);
}
body[data-theme="ban-dem"] .hand-board #chatInput {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #475569 !important;
}
body[data-theme="ban-dem"] .hand-board #chatInput::placeholder {
  color: #64748B;
}
.hand-board .hb-send {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 0;
  background: linear-gradient(135deg, #0C68EA 0%, #D97706 100%);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
}

/* 9. Dòng trạng thái chờ (#askBox) kéo xuống dưới cùng + Điều khiển tốc độ đọc + Mục Tips cuối trang (#askTipsBar) */
.bottom-center-dock .ask-box {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(940px, 99%) !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.18) !important;
  margin: 0 !important;
}
.ask-box .ak-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ask-box .ak-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
}
.ask-box .ak-text {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}
.ak-speed-bar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid #F59E0B;
  border-radius: 99px;
  padding: 3px 8px;
}
.ak-speed-bar .aks-lb {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F3B78;
  margin-right: 2px;
}
.ak-speed-bar .aks-btn {
  border: 1px solid #FCD34D;
  background: #FFFFFF;
  color: #0F3B78;
  font: 700 11.5px/1 var(--vi);
  padding: 5px 9px;
  border-radius: 99px;
  cursor: pointer;
}
.ak-speed-bar .aks-btn.on {
  background: #D97706;
  color: #FFFFFF;
  border-color: #B45309;
}
.ask-box .ak-btns button {
  padding: 6px 13px !important;
  font-size: 15px !important;
}
.ask-tips-bar {
  width: min(940px, 99%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #60A5FA;
  color: #000000;
  border-radius: 11px;
  padding: 5px 12px;
  font-size: 11.2px; /* 80% cua 14px */
  font-style: italic;
  line-height: 1.35;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12);
  box-sizing: border-box;
}
.ask-tips-bar[hidden] { display: none !important; }
.ask-tips-bar .atb-badge {
  flex: 0 0 auto;
  background: #2563EB;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 10.4px; /* 80% cua 13px */
  font-style: italic;
  padding: 2px 7px;
  border-radius: 99px;
}
.ask-tips-bar *:not(.atb-badge) { color: #000000; font-style: italic; }
body[data-theme="ban-dem"] .ask-tips-bar *:not(.atb-badge) { color: #DBEAFE; }
body[data-theme="ban-dem"] .ask-tips-bar {
  background: #172554;
  border-color: #3B82F6;
  color: #DBEAFE;
}
.bottom-center-dock .pause-banner {
  width: min(940px, 99%);
  border-radius: 12px;
  border: 1.5px solid #448BEF;
}
/* Khi đang Giơ tay (hand-up / hand-active): Cụm Mic và Khung bảng hỏi (#handBoard) xếp ngang cùng 1 hàng gọn đẹp */
.bmd-timer[hidden],
.bmd-bar[hidden],
.bmd-sub[hidden],
.bmd-actions[hidden],
.bottom-mic-dock.hand-mode .bmd-timer,
.bottom-mic-dock.hand-mode .bmd-bar,
.bottom-mic-dock.hand-mode .bmd-sub,
.bottom-mic-dock.hand-mode .bmd-actions {
  display: none !important;
}
.bottom-mic-dock.hand-mode .bmd-info {
  min-width: 0 !important;
}
body.hand-up .bottom-center-dock,
body.hand-active .bottom-center-dock {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
@media (max-width: 640px) {
  body.hand-up .bottom-center-dock,
  body.hand-active .bottom-center-dock {
    flex-wrap: wrap;
  }
}
.bottom-mic-dock.hand-mode {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 280px !important;
  padding: 8px 16px 8px 10px !important;
  border-radius: 16px !important;
}
body.hand-up .hand-board,
body.hand-active .hand-board {
  flex: 1 1 520px;
  max-width: 680px;
}
/* Ẩn hộp #spCard nổi khi chỉ dùng cho đọc từ/câu (chỉ hiện khi spQuiz có class .sp-quiz-mode) */
.sp-card:not(.sp-quiz-mode) {
  display: none !important;
}
/* Nổi bật khung hội thoại vai-doc và hiệu ứng Karaoke chữ đỏ trên cả slide hoạt hình (.hh-on) */
body .stage .e-bubble.vai-doc {
  border: 2.5px solid #2672DC !important;
  background: #F5F9FF !important;
  box-shadow: 0 0 0 3px rgba(38, 114, 220, 0.2), 0 8px 20px rgba(38, 114, 220, 0.15) !important;
}
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc {
  background: #121D2D !important;
  border-color: #448BEF !important;
}
body .stage .e-bubble.vai-doc .zh,
body .stage .e-bubble.vai-doc .zh .k-w,
body .stage .e-bubble.vai-doc .zh .sp-c {
  color: #2672DC !important;
}
body .stage .sp-c.kr-done,
body .stage .e-bubble.vai-doc .sp-c.kr-done {
  color: #1B4F99 !important;
  background: rgba(226, 238, 254, 0.72);
  box-shadow: inset 0 -3px 0 #2672DC;
}
body .stage .sp-c.kr-curr,
body .stage .e-bubble.vai-doc .sp-c.kr-curr {
  color: #1C5DB9 !important;
  background: #FEF08A !important;
  transform: translateY(-2px) scale(1.08);
  box-shadow: inset 0 -4px 0 #2672DC;
}

/* ========== CẬP NHẬT 01/11/2026 V5 (8 MỤC CHỈNH SỬA GIAO DIỆN & TƯƠNG TÁC) ========== */

/* 1. Bảng màu Mặc định (bỏ hoàn toàn màu vàng chanh) + 2 giao diện Web thịnh hành (Kem Bắc Âu & Tím Lavender) + Ban đêm */
:root,
body:not([data-theme]),
body[data-theme="mac-dinh"] {
  --g: #0284C7;
  --g-d: #0369A1;
  --g-dd: #0C4A6E;
  --g-bg: #E0F2FE;
  --g-bg2: #F0F9FF;
  --g-line: #BAE6FD;
  --ink2: #0F172A;
  --red: #0369A1;
  --red-d: #0C4A6E;
  --navy: #0F172A;
  --gold: #0284C7;
  --hl: #E0F2FE;
  --bg: #EEF4FA;
  --card: #FFFFFF;
  --line: #CBD5E1;
  --mute: #475569;
  --ink: #0F172A;
  --ok: #0B6CF3;
  --stage-bg: #FFFFFF;
  --stage-border: #CBD5E1;
}
body:not([data-theme]),
body[data-theme="mac-dinh"] {
  background: linear-gradient(180deg, #E6F0FA 0%, #F1F5F9 360px) !important;
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}
body:not([data-theme]) .topbar,
body[data-theme="mac-dinh"] .topbar {
  background: linear-gradient(135deg, #0B1B3F 0%, #1E3A8A 55%, #0369A1 100%) !important;
  color: #FFFFFF !important;
}
body:not([data-theme]) .badge-ai,
body[data-theme="mac-dinh"] .badge-ai {
  background: rgba(224, 242, 254, 0.18) !important;
  color: #E0F2FE !important;
  border: 1px solid rgba(186, 230, 253, 0.45) !important;
}
body:not([data-theme]) .topbar .theme-btn.on,
body[data-theme="mac-dinh"] .topbar .theme-btn.on {
  background: #FFFFFF !important;
  color: #0B1B3F !important;
  border-color: #38BDF8 !important;
}
body:not([data-theme]) .t-name b,
body[data-theme="mac-dinh"] .t-name b {
  color: #7DD3FC !important;
}
body:not([data-theme]) .caption.chip,
body[data-theme="mac-dinh"] .caption.chip {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

/* Giao diện Đậm 1 (kem-am): Ngọc Lục Bảo Đậm (Deep Emerald & Sage Teal - nền xanh ngọc đậm rõ nét, dịu mắt) */
.theme-btn[data-theme="kem-am"] .th-dot {
  background: linear-gradient(135deg, #7698C7 45%, #06244E 55%) !important;
}
body[data-theme="kem-am"] {
  --g: #043478;
  --g-d: #062B5F;
  --g-dd: #02132C;
  --g-bg: #99B9E6;
  --g-bg2: #C2D6F2;
  --g-line: #2D73D4;
  --ink2: #02132C;
  --red: #062B5F;
  --red-d: #02132C;
  --navy: #02132C;
  --gold: #043478;
  --hl: #99B9E6;
  --bg: #A7BEDF;
  --card: #ECF4FE;
  --line: #4F85D1;
  --mute: #11315E;
  --ink: #02132C;
  --ok: #054196;
  --stage-bg: #D2DFF2;
  --stage-border: #2D73D4;
  --mic-on-bg: #043478;
  --mic-on-fg: #FFFFFF;
  --mic-on-ring: rgba(4, 120, 87, 0.34);
  --mic-off-bg: #99B7E2;
  --mic-off-fg: #06244E;
  --mic-off-border: #3B8BF7;
  background: linear-gradient(180deg, #7698C7 0%, #A7BEDF 360px) !important;
  background-color: #A7BEDF !important;
  color: #02132C !important;
}
body[data-theme="kem-am"] .topbar {
  background: linear-gradient(135deg, #02132C 0%, #06244E 55%, #043478 100%) !important;
  color: #ECFDF5 !important;
  box-shadow: 0 3px 14px rgba(2, 44, 34, 0.32) !important;
}
body[data-theme="kem-am"] .brand {
  background: #1056B9 !important;
  color: #02132C !important;
}
body[data-theme="kem-am"] .badge-ai {
  background: rgba(167, 243, 208, 0.22) !important;
  color: #D1FAE5 !important;
  border: 1px solid rgba(110, 231, 183, 0.5) !important;
}
body[data-theme="kem-am"] .topbar .theme-btn {
  color: #D1FAE5 !important;
}
body[data-theme="kem-am"] .topbar .theme-btn.on {
  background: #ECFDF5 !important;
  color: #02132C !important;
  border-color: #34D399 !important;
}
body[data-theme="kem-am"] .stage {
  background: #D2DFF2 !important;
  border: 1.5px solid #2D73D4 !important;
  box-shadow: 0 10px 28px rgba(6, 78, 59, 0.14), inset 0 0 0 1px #5E98EA !important;
}
body[data-theme="kem-am"] .e-wordcard,
body[data-theme="kem-am"] .e-bubble .bb,
body[data-theme="kem-am"] .e-example,
body[data-theme="kem-am"] .e-goal,
body[data-theme="kem-am"] .e-compare,
body[data-theme="kem-am"] .e-hanzi,
body[data-theme="kem-am"] .e-formula {
  background: #ECF4FE !important;
  border-color: #5E98EA !important;
}
body[data-theme="kem-am"] .cmdbar.controls,
body[data-theme="kem-am"] .classin-toolbar {
  background: #BDCFE9 !important;
  border-color: #2D73D4 !important;
}
body[data-theme="kem-am"] .vocab-marquee {
  background: #99B7E2 !important;
  border-bottom-color: #3B8BF7 !important;
  color: #02132C !important;
}
body[data-theme="kem-am"] .py,
body[data-theme="kem-am"] .cm .py {
  color: #062B5F !important;
}
body[data-theme="kem-am"] .chat {
  background: #A7C0E3 !important;
  border: 1.5px solid #3B8BF7 !important;
}
body[data-theme="kem-am"] .ch-head {
  background: linear-gradient(90deg, #02132C 0%, #043478 100%) !important;
  color: #ECFDF5 !important;
}
body[data-theme="kem-am"] .ch-log {
  background: #C4D6EF !important;
}
body[data-theme="kem-am"] .ch-form {
  background: #99B7E2 !important;
  border-top-color: #3B8BF7 !important;
}

/* Giao diện Đậm 2 (xanh-lam): Tím Hoàng Gia Đậm (Deep Royal Indigo & Violet - nền tím lam đậm cá tính, nổi bật) */
.theme-btn[data-theme="xanh-lam"] .th-dot {
  background: linear-gradient(135deg, #938DF2 45%, #311B70 55%) !important;
}
body[data-theme="xanh-lam"] {
  --g: #4338CA;
  --g-d: #3730A3;
  --g-dd: #1E1048;
  --g-bg: #C3BFFA;
  --g-bg2: #D8D5FC;
  --g-line: #818CF8;
  --ink2: #1E1048;
  --red: #3730A3;
  --red-d: #1E1048;
  --navy: #1E1048;
  --gold: #4338CA;
  --hl: #C3BFFA;
  --bg: #B8B5F8;
  --card: #F1EFFE;
  --line: #818CF8;
  --mute: #3730A3;
  --ink: #1E1048;
  --ok: #0B6CF3;
  --stage-bg: #DDD9FE;
  --stage-border: #818CF8;
  --mic-on-bg: #4338CA;
  --mic-on-fg: #FFFFFF;
  --mic-on-ring: rgba(67, 56, 202, 0.34);
  --mic-off-bg: #C3BFFA;
  --mic-off-fg: #311B70;
  --mic-off-border: #6366F1;
  background: linear-gradient(180deg, #938DF2 0%, #B8B5F8 360px) !important;
  background-color: #B8B5F8 !important;
  color: #1E1048 !important;
}
body[data-theme="xanh-lam"] .topbar {
  background: linear-gradient(135deg, #1E1048 0%, #311B70 55%, #4338CA 100%) !important;
  color: #EEF2FF !important;
  box-shadow: 0 3px 14px rgba(30, 16, 72, 0.34) !important;
}
body[data-theme="xanh-lam"] .brand {
  background: #6366F1 !important;
  color: #FFFFFF !important;
}
body[data-theme="xanh-lam"] .badge-ai {
  background: rgba(199, 210, 254, 0.24) !important;
  color: #E0E7FF !important;
  border: 1px solid rgba(165, 180, 252, 0.5) !important;
}
body[data-theme="xanh-lam"] .topbar .theme-btn {
  color: #E0E7FF !important;
}
body[data-theme="xanh-lam"] .topbar .theme-btn.on {
  background: #EEF2FF !important;
  color: #1E1048 !important;
  border-color: #818CF8 !important;
}
body[data-theme="xanh-lam"] .stage {
  background: #DDD9FE !important;
  border: 1.5px solid #818CF8 !important;
  box-shadow: 0 10px 28px rgba(49, 27, 112, 0.16), inset 0 0 0 1px #A5B4FC !important;
}
body[data-theme="xanh-lam"] .e-wordcard,
body[data-theme="xanh-lam"] .e-bubble .bb,
body[data-theme="xanh-lam"] .e-example,
body[data-theme="xanh-lam"] .e-goal,
body[data-theme="xanh-lam"] .e-compare,
body[data-theme="xanh-lam"] .e-hanzi,
body[data-theme="xanh-lam"] .e-formula {
  background: #F1EFFE !important;
  border-color: #A5B4FC !important;
}
body[data-theme="xanh-lam"] .cmdbar.controls,
body[data-theme="xanh-lam"] .classin-toolbar {
  background: #CBC7FC !important;
  border-color: #818CF8 !important;
}
body[data-theme="xanh-lam"] .vocab-marquee {
  background: #B4AFFA !important;
  border-bottom-color: #6366F1 !important;
  color: #1E1048 !important;
}
body[data-theme="xanh-lam"] .py,
body[data-theme="xanh-lam"] .cm .py {
  color: #3730A3 !important;
}
body[data-theme="xanh-lam"] .chat {
  background: #C1BCFA !important;
  border: 1.5px solid #6366F1 !important;
}
body[data-theme="xanh-lam"] .ch-head {
  background: linear-gradient(90deg, #1E1048 0%, #4338CA 100%) !important;
  color: #EEF2FF !important;
}
body[data-theme="xanh-lam"] .ch-log {
  background: #D5D1FD !important;
}
body[data-theme="xanh-lam"] .ch-form {
  background: #B4AFFA !important;
  border-top-color: #6366F1 !important;
}

/* Giao diện Ban đêm (ban-dem): làm dịu mọi điểm nhấn vàng chanh sang xanh cyan dịu mắt */
body[data-theme="ban-dem"] {
  --stage-bg: #111C30;
  --stage-border: #334155;
  --navy: #E2E8F0;
  --gold: #38BDF8;
  --hl: rgba(56, 189, 248, 0.2);
}
body[data-theme="ban-dem"] .badge-ai {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #BAE6FD !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* Loại bỏ toàn bộ nền vàng chanh trên các thẻ phụ, hộp hỏi thời gian, thanh hướng dẫn, loa từng câu */
.el.focus,
.e-wordcard.focus {
  border-color: var(--g, #0284C7) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18), 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  background: var(--card, #FFFFFF) !important;
}
.e-wordcard .wc-ex,
.e-example {
  background: var(--g-bg2, #F0F9FF) !important;
  border-left: 4px solid var(--g, #0284C7) !important;
}
.e-wordcard .pos,
.e-tag {
  background: var(--g-bg, #E0F2FE) !important;
  color: var(--g-dd, #0C4A6E) !important;
  border: 1px solid var(--g-line, #BAE6FD) !important;
}
.e-think,
.e-instr,
.e-next {
  background: var(--g-bg2, #F0F9FF) !important;
  border: 1px solid var(--g-line, #BAE6FD) !important;
  color: var(--ink, #0F172A) !important;
}
.inline-spk:hover,
body.ask-time-on .inline-spk {
  background: var(--g-bg, #E0F2FE) !important;
  border-color: var(--g, #0284C7) !important;
  color: var(--g-dd, #0C4A6E) !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18) !important;
}
.ask-box {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
  border: 2px solid #0284C7 !important;
  color: #0C4A6E !important;
  box-shadow: 0 10px 26px rgba(2, 132, 199, 0.15) !important;
}
.ask-box .ak-text {
  color: #0C4A6E !important;
}
.ask-box .ak-cd {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}
.ask-box .ak-btns button {
  background: #FFFFFF !important;
  color: #0C4A6E !important;
  border: 1.5px solid #0284C7 !important;
}
.ask-box .ak-btns button.pri {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0369A1 !important;
}
.ak-speed-bar {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid #7DD3FC !important;
}
.ak-speed-bar .aks-lb {
  color: #0C4A6E !important;
}
.ak-speed-bar .aks-btn {
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
}
.ak-speed-bar .aks-btn.on {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0369A1 !important;
}
.tour-note {
  background: #F0F9FF !important;
  border: 2px solid #0284C7 !important;
  color: #0F172A !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22), 0 0 0 4px rgba(2, 132, 199, 0.18) !important;
}
.tour-note .tn-step {
  color: #0369A1 !important;
  background: #E0F2FE !important;
  border-color: #7DD3FC !important;
}
.tour-note .tn-bar {
  background: #BAE6FD !important;
}
.tour-note .tn-bar i {
  background: #0284C7 !important;
}
.tour-note .tn-btn {
  border-color: #0284C7 !important;
  color: #0369A1 !important;
}
.tour-note .tn-btn.pri {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

/* 5. Khung bài giảng (#stage) có bo viền rõ và hơi bo tròn góc */
.stage-wrap > .stage {
  border: 2px solid var(--stage-border, #CBD5E1) !important;
  border-radius: 18px !important;
  background: var(--stage-bg, #FFFFFF) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  margin: 8px auto 6px !important;
  width: calc(100% - 20px) !important;
  max-width: 1040px !important;
  padding: 16px 24px 24px !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .stage-wrap > .stage {
    width: calc(100% - 12px) !important;
    margin: 6px auto 4px !important;
    padding: 12px 14px 18px !important;
    border-radius: 14px !important;
  }
}

/* 2. Các chữ Hán trong bài: KHÔNG khoanh tròn, KHÔNG gạch chân, KHÔNG dùng màu đỏ, dùng gam màu nhẹ khác với nền và chữ thường */
.e-hero .big {
  color: var(--navy, #0F172A) !important;
}
.py {
  color: #475569 !important;
}
body[data-theme="ban-dem"] .py {
  color: #94A3B8 !important;
}
.sp-c.pen::after,
.hk.hh-chi::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
mark.hl,
mark.hl.on,
.stage .sp-c,
.stage .sp-c:hover,
.stage .sp-c.hl-on,
.stage .sp-c.kr-done,
.stage .sp-c.kr-curr,
.stage .sp-c.pen,
.hk,
.hk.on,
.hk.hh-chi {
  box-shadow: none !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.stage .sp-c {
  border-radius: 6px;
  padding: 1px 3px;
}
.stage .sp-c:hover {
  background: #E0F2FE !important;
  color: #0369A1 !important;
}
mark.hl.on,
.stage .sp-c.hl-on,
.hk.on .hk-zh,
.hk.hh-chi .hk-zh {
  background: #E0F2FE !important;
  color: #0284C7 !important;
  border-radius: 6px;
  padding: 1px 4px;
}
.el.reading-now,
body .stage .e-bubble.vai-doc,
.e-bubble.vai-doc .bb {
  border: 2px solid #38BDF8 !important;
  background: #F0F9FF !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.14) !important;
}
body[data-theme="ban-dem"] .el.reading-now,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc,
body[data-theme="ban-dem"] .e-bubble.vai-doc .bb {
  background: #172554 !important;
  border-color: #38BDF8 !important;
}
.el.reading-now .wc-zh,
.el.reading-now .zh.big,
.el.reading-now .zh.hlz,
.el.reading-now .wc-zh .sp-c,
body .stage .e-bubble.vai-doc .zh,
body .stage .e-bubble.vai-doc .zh.line,
body .stage .e-bubble.vai-doc .zh .k-w,
body .stage .e-bubble.vai-doc .zh .sp-c,
body .stage .e-bubble.vai-doc .hk-zh,
body .stage .e-bubble.vai-doc .hk-zh .sp-c {
  color: #0284C7 !important;
}
body .stage .e-bubble.vai-doc .py,
body .stage .e-bubble.vai-doc .hk-py {
  color: #0369A1 !important;
}
body[data-theme="ban-dem"] .el.reading-now .wc-zh,
body[data-theme="ban-dem"] .el.reading-now .wc-zh .sp-c,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .zh,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .zh .sp-c,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .hk-zh {
  color: #7DD3FC !important;
}
body .stage .sp-c.kr-done,
body .stage .e-bubble.vai-doc .sp-c.kr-done {
  color: #0369A1 !important;
  background: #E0F2FE !important;
  box-shadow: none !important;
}
body .stage .sp-c.kr-curr,
body .stage .e-bubble.vai-doc .sp-c.kr-curr {
  color: #0957C3 !important;
  background: #DBEAFE !important;
  transform: translateY(-1px) scale(1.04);
  box-shadow: none !important;
}
body[data-theme="ban-dem"] .stage .sp-c.kr-done,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .sp-c.kr-done {
  color: #7DD3FC !important;
  background: rgba(56, 189, 248, 0.18) !important;
}
body[data-theme="ban-dem"] .stage .sp-c.kr-curr,
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .sp-c.kr-curr {
  color: #5E98EA !important;
  background: rgba(11, 108, 243, 0.25) !important;
}
.stage .sp-c.pen,
.sp-card .sp-c.pen {
  color: #4F46E5 !important;
  background: #EDE9FE !important;
  border-radius: 6px;
  box-shadow: none !important;
}

/* 3. Khung bảng câu hỏi khi Giơ tay (#handBoard): giữ mở trong lúc cô trả lời, hiển thị trạng thái và câu trả lời của cô */
.hand-board {
  background: #F8FAFC !important;
  border: 2.5px solid var(--g, #0284C7) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
  padding: 10px 14px !important;
}
body[data-theme="ban-dem"] .hand-board {
  background: #1E293B !important;
  border-color: #38BDF8 !important;
}
.hb-history {
  max-height: 150px !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  gap: 6px !important;
}
body[data-theme="ban-dem"] .hb-history {
  background: #0F172A !important;
  border-color: #334155 !important;
}
.hb-hist-item {
  font-size: 14.5px !important;
  color: #0F172A !important;
  line-height: 1.45 !important;
}
.hb-hist-item.co-ans {
  background: #E0F2FE;
  border-left: 3px solid #0284C7;
  padding: 5px 8px;
  border-radius: 6px;
  color: #0C4A6E !important;
}
body[data-theme="ban-dem"] .hb-hist-item {
  color: #E2E8F0 !important;
}
body[data-theme="ban-dem"] .hb-hist-item.co-ans {
  background: rgba(2, 132, 199, 0.2);
  border-left-color: #38BDF8;
  color: #E0F2FE !important;
}
.hb-status {
  font-size: 14px;
  font-weight: 600;
  color: #0369A1;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  border-radius: 8px;
  padding: 5px 10px;
  line-height: 1.35;
}
.hb-status[hidden] {
  display: none !important;
}
body[data-theme="ban-dem"] .hb-status {
  background: #172554;
  border-color: #0284C7;
  color: #BAE6FD;
}
.hand-board #chatInput {
  border: 1.5px solid #94A3B8 !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}
.hand-board #chatInput:focus {
  border-color: var(--g, #0284C7) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}
.hand-board .hb-send {
  background: linear-gradient(135deg, #0284C7 0%, #1E3A8A 100%) !important;
  color: #FFFFFF !important;
}

/* 4. Khi bật Camera học viên (body.cam-split / .ban-tile.cam-on): chia đôi màn hình 50/50 - Camera học viên ở BÊN TRÁI, Camera giáo viên ở BÊN PHẢI */
@media (min-width: 1100px) {
  body.cam-split {
    --tw: 384px;
  }
  /* Giáo viên ở BÊN PHẢI (right: 12px) */
  body.cam-split .teacher.col,
  body.cam-split .teacher.col.size-l,
  body.cam-split .teacher.col.size-s {
    top: 52px !important;
    right: 12px !important;
    left: auto !important;
    width: 178px !important;
    border-radius: 14px !important;
  }
  body.cam-split .teacher.col .t-face,
  body.cam-split .teacher.col.size-l .t-face,
  body.cam-split .teacher.col.size-s .t-face {
    height: 168px !important;
  }
  /* Học viên ở BÊN TRÁI (right: 198px) */
  body.cam-split .ban-tile.cam-on {
    top: 52px !important;
    right: 198px !important;
    left: auto !important;
    width: 178px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #1D2433 !important;
    border: 2px solid var(--g, #0284C7) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22) !important;
  }
  body.cam-split .ban-tile.cam-on .bt-face {
    flex: 0 0 168px !important;
    width: 100% !important;
    height: 168px !important;
    border-radius: 0 !important;
  }
  body.cam-split .ban-tile.cam-on .bt-face video {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
  }
  body.cam-split .ban-tile.cam-on .bt-ring {
    display: none !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta {
    padding: 5px 34px 5px 9px !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
    width: 100% !important;
    min-height: 30px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta b {
    color: #7DD3FC !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta span {
    color: #E2E8F0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body.cam-split .ban-tile.cam-on .bt-cam {
    position: absolute !important;
    right: 5px !important;
    bottom: 3px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13.5px !important;
    z-index: 4 !important;
  }
  body.cam-split .cmdbar.controls {
    width: 364px !important;
    right: 12px !important;
  }
}
@media (max-width: 1099px) {
  /* Giáo viên ở BÊN PHẢI (right: 8px) */
  body.cam-split .teacher,
  body.cam-split .teacher.dock {
    right: 8px !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(var(--ctl-h, 110px) + 8px) !important;
    width: calc(50vw - 12px) !important;
    max-width: 210px !important;
    border-radius: 14px !important;
  }
  body.cam-split .teacher .t-face,
  body.cam-split .teacher.size-l .t-face,
  body.cam-split .teacher.size-s .t-face {
    height: 128px !important;
  }
  /* Học viên ở BÊN TRÁI (left: 8px) */
  body.cam-split .ban-tile.cam-on {
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--ctl-h, 110px) + 8px) !important;
    width: calc(50vw - 12px) !important;
    max-width: 210px !important;
    height: auto !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #1D2433 !important;
    border: 2px solid var(--g, #0284C7) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22) !important;
  }
  body.cam-split .ban-tile.cam-on .bt-face {
    flex: 0 0 128px !important;
    width: 100% !important;
    height: 128px !important;
    border-radius: 0 !important;
  }
  body.cam-split .ban-tile.cam-on .bt-face video {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
  }
  body.cam-split .ban-tile.cam-on .bt-ring {
    display: none !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta {
    display: flex !important;
    padding: 4px 30px 4px 8px !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta b {
    color: #7DD3FC !important;
    font-size: 12px !important;
  }
  body.cam-split .ban-tile.cam-on .bt-meta span {
    color: #E2E8F0 !important;
    font-size: 10.5px !important;
  }
  body.cam-split .ban-tile.cam-on .bt-cam {
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    left: auto !important;
    top: auto !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 12.5px !important;
    z-index: 4 !important;
  }
}
body.cam-split .ban-tile.cam-on .bt-av {
  font-size: 46px !important;
}

/* 8. Dòng chữ chạy (#vocabMarquee): KHÔNG in đậm, giảm tốc độ chạy và giảm số lần lặp lại (chỉ chạy 2 lần) */
.vocab-marquee {
  background: var(--g-bg2, #F0F9FF) !important;
  border-bottom: 1px solid var(--g-line, #BAE6FD) !important;
  color: var(--ink, #0F172A) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.vocab-marquee .vm-track,
.vocab-marquee .vm-track * {
  font-weight: 400 !important;
}
.vocab-marquee .vm-track {
  animation: rqxMarquee 45s linear 2 forwards !important;
}
.vocab-marquee .vm-chip {
  background: var(--g, #0284C7) !important;
  border-color: var(--g-d, #0369A1) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
body[data-theme="ban-dem"] .vocab-marquee {
  background: #172554 !important;
  border-bottom-color: #1E3A8A !important;
  color: #E2E8F0 !important;
}


/* 9. Thanh công cụ lớp học ảo ClassIn (#classinToolbar), Sổ ghi chú, Bảng viết chữ Hán & Huy hiệu Cúp thưởng */
.classin-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px 10px;
  margin: 0 0 6px 0;
  background: var(--card, #FFFFFF);
  border: 1.5px solid var(--g-line, #BAE6FD);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  z-index: 26;
}
.classin-toolbar .ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink2, #1E293B);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.classin-toolbar .ct-btn:hover {
  background: var(--g-bg, #E0F2FE);
  color: var(--g-d, #0369A1);
}
.classin-toolbar .ct-btn.on {
  background: var(--g, #0284C7);
  color: #FFFFFF;
  border-color: var(--g-d, #0369A1);
}
.classin-toolbar .ct-ic {
  font-size: 14.5px;
  line-height: 1;
}
.classin-toolbar .ct-sep {
  width: 1px;
  height: 18px;
  background: var(--line, #CBD5E1);
  margin: 0 2px;
}
.classin-toolbar .ct-zoom {
  padding: 3px 7px;
  background: var(--g-bg2, #F8FAFC);
  border-color: var(--line, #CBD5E1);
}
.classin-toolbar .ct-zoom-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--mute, #475569);
  min-width: 36px;
  text-align: center;
}
body[data-theme="ban-dem"] .classin-toolbar {
  background: #1E293B;
  border-color: #334155;
}
body[data-theme="ban-dem"] .classin-toolbar .ct-btn {
  color: #E2E8F0;
}
body[data-theme="ban-dem"] .classin-toolbar .ct-btn.on {
  background: #0284C7;
  color: #FFFFFF;
}
@media (max-width: 760px) {
  .classin-toolbar .ct-lb { display: none; }
  .classin-toolbar .ct-zoom .ct-lb { display: inline; }
}

/* Tô sáng gam màu nhẹ (Pen & Highlighter) trên chữ Hán / thẻ câu: KHÔNG khoanh tròn, KHÔNG gạch chân, KHÔNG màu đỏ */
#stage .ct-soft-hl {
  background: var(--g-bg, #E0F2FE) !important;
  color: var(--g-d, #0369A1) !important;
  border-radius: 6px;
  padding: 0 4px;
  box-shadow: none !important;
  text-decoration: none !important;
}
body[data-theme="kem-am"] #stage .ct-soft-hl {
  background: #DBEAFE !important;
  color: #0957C3 !important;
}
body[data-theme="xanh-lam"] #stage .ct-soft-hl {
  background: #EDE9FE !important;
  color: #4338CA !important;
}
body[data-theme="ban-dem"] #stage .ct-soft-hl {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #7DD3FC !important;
}

/* Nhãn ghi chú chữ ghim trên bài giảng (Text tool & Moving tool) */
.ct-text-pin {
  position: absolute;
  z-index: 32;
  background: var(--g-bg2, #F0F9FF);
  color: var(--ink, #0F172A);
  border: 1.5px solid var(--g, #0284C7);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  cursor: grab;
  user-select: none;
  max-width: 240px;
}
.ct-text-pin:active { cursor: grabbing; }
body[data-theme="ban-dem"] .ct-text-pin {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #38BDF8;
}

/* Con trỏ Laser chỉ bài theo thời gian thực */
.classin-laser-dot {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 20%, #0284C7 65%, rgba(2, 132, 199, 0) 100%);
  box-shadow: 0 0 12px 4px rgba(2, 132, 199, 0.65);
  pointer-events: none;
  z-index: 95;
  transform: translate(-50%, -50%);
}

/* Ngăn Sổ ghi chú (ClassIn Notes) & Bảng viết chữ Hán (Sketch Board) */
.classin-drawer,
.classin-sketch {
  position: absolute;
  top: 92px;
  right: 18px;
  width: min(360px, calc(100vw - 32px));
  background: var(--card, #FFFFFF);
  color: var(--ink, #0F172A);
  border: 2px solid var(--g, #0284C7);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  z-index: 65;
}
.cd-head, .cs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}
.cd-actions, .cs-samples, .cs-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd-btn, .cs-word, .cd-x {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--line, #CBD5E1);
  background: var(--g-bg2, #F8FAFC);
  color: var(--ink2, #1E293B);
  cursor: pointer;
}
.cd-btn.pri, .cs-word.on {
  background: var(--g, #0284C7);
  color: #FFFFFF;
  border-color: var(--g-d, #0369A1);
}
.cd-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line, #CBD5E1);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14.5px;
  background: var(--bg, #F8FAFC);
  color: var(--ink, #0F172A);
  resize: vertical;
}
.cd-foot {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--mute, #64748B);
}
.cs-canvas-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1.5px solid var(--line, #CBD5E1);
  border-radius: 12px;
  background: #FFFFFF linear-gradient(transparent 49.5%, #E2E8F0 49.5%, #E2E8F0 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #E2E8F0 49.5%, #E2E8F0 50.5%, transparent 50.5%);
  overflow: hidden;
  margin-bottom: 8px;
}
.cs-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 108px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.22);
  pointer-events: none;
  user-select: none;
}
#csCanvas {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* Huy hiệu Cúp thưởng trên ô Bạn (#banTile) */
.bt-cup {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(2, 132, 199, 0.14);
  color: var(--g-d, #0369A1);
  font-size: 12.5px;
  font-weight: 700;
}
.bt-cup i { font-style: normal; }
body[data-theme="ban-dem"] .bt-cup {
  background: rgba(56, 189, 248, 0.2);
  color: #7DD3FC;
}

/* 10. Bộ công cụ ClassIn nâng cấp: Bảng màu Bút & Tô sáng, Canvas vẽ tự do trên slide, Ô nhập chữ trực tiếp, Hộp công cụ (Toolbox), Đồng hồ, Xúc xắc, Bảng phụ & Nút Mic tiếng Trung */
.ct-pen-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(2, 132, 199, 0.06);
  padding: 2px 6px 2px 2px;
  border-radius: 9px;
}
.ct-colors {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ct-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: var(--sw, #0284C7);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ct-swatch.on {
  transform: scale(1.22);
  box-shadow: 0 0 0 2px var(--ink, #0F172A);
}
.classin-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 28;
  touch-action: none;
}
.classin-draw-canvas.active {
  pointer-events: auto;
  cursor: crosshair;
}
.ct-inline-editor {
  position: absolute;
  z-index: 38;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card, #FFFFFF);
  border: 2px solid var(--g, #0284C7);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}
.ct-inline-editor input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink, #0F172A);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  width: 170px;
}
.ct-inline-editor button {
  border: 0;
  border-radius: 6px;
  background: var(--g, #0284C7);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
}
.classin-toolbox-pop {
  width: min(390px, calc(100vw - 28px));
}
.ctb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ctb-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--line, #CBD5E1);
  background: var(--g-bg2, #F8FAFC);
  color: var(--ink, #0F172A);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.ctb-item:hover {
  border-color: var(--g, #0284C7);
  background: var(--g-bg, #E0F2FE);
  transform: translateY(-1px);
}
.ctb-item .ctb-ic {
  font-size: 19px;
  line-height: 1.1;
}
.ctb-item b {
  font-size: 14px;
  font-weight: 700;
}
.ctb-item small {
  font-size: 12.5px;
  color: var(--mute, #475569);
}
.classin-widget {
  position: absolute;
  top: 96px;
  left: 20px;
  width: 248px;
  background: var(--card, #FFFFFF);
  color: var(--ink, #0F172A);
  border: 2px solid var(--g, #0284C7);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  padding: 10px 12px;
  z-index: 66;
  text-align: center;
}
.ctm-display {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--g-d, #0369A1);
  margin: 4px 0 8px;
  letter-spacing: 1px;
}
.ctm-presets {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.cdc-body {
  padding: 6px 0;
}
.cdc-face {
  font-size: 44px;
  line-height: 1.1;
  margin-bottom: 4px;
  transition: transform 0.25s;
}
.cdc-face.rolling {
  transform: rotate(360deg) scale(1.15);
}
.cdc-word {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink, #0F172A);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cbb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.cbb-chip {
  border: 1px solid var(--g-line, #BAE6FD);
  background: var(--g-bg, #E0F2FE);
  color: var(--g-d, #0369A1);
  border-radius: 99px;
  padding: 3px 9px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.cbb-chip:hover {
  background: var(--g, #0284C7);
  color: #FFFFFF;
}

/* Nút Mic thu âm & Chọn ngôn ngữ (Trung/Việt) trong bảng Giơ tay (#handBoard) */
.hb-mic-btn,
.hb-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hb-mic-btn {
  border: 1.5px solid var(--g, #0284C7);
  background: var(--g-bg, #E0F2FE);
  color: var(--g-d, #0369A1);
}
.hb-mic-btn.listening {
  background: #054196 !important;
  border-color: #043478 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.28);
}
.hb-lang-btn {
  border: 1.5px solid var(--line, #CBD5E1);
  background: var(--card, #FFFFFF);
  color: var(--ink2, #1E293B);
  padding: 0 8px;
  font-size: 13.5px;
}
.hb-lang-btn[data-lang="zh"] {
  border-color: #0284C7;
  background: #E0F2FE;
  color: #0369A1;
}


/* 01/11/2026 demo moi: nut Mic + chon ngon ngu trong bang Gio tay khong bi bop tron, de chu doc ro */
.hand-board .hb-form .hb-mic-btn,
.hand-board .hb-form .hb-lang-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  line-height: 1 !important;
}
.hand-board .hb-form .hb-lang-btn { font-size: 13.5px !important; }
.hand-board .hb-form .hb-send { flex: 0 0 auto !important; }
.hand-board .hb-form #chatInput { flex: 1 1 auto !important; min-width: 120px !important; }

/* ============ 01/11/2026: Thẻ tổng kết cuối buổi "Từ cần ôn lại" ============ */
.done-review { text-align: left; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 12px; background: rgba(127, 127, 127, .08); }
.done-review[hidden] { display: none; }
.done-review .dr-h { margin: 0 0 2px; font-size: 18px; line-height: 1.3; }
.done-review .dr-sub { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; opacity: .85; }
.dr-list { list-style: none; margin: 0; padding: 0; max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.dr-it { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; border-radius: 10px; background: rgba(127, 127, 127, .12); }
.dr-zh { font-size: 22px; line-height: 1.2; }
.dr-py { font-size: 14.5px; opacity: .85; }
.dr-diem { margin-left: auto; font-size: 14.5px; font-weight: 700; color: var(--mau, #2672DC); }
.dr-play { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 99px; padding: 4px 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; min-height: 32px; }
.dr-play:hover { background: rgba(127, 127, 127, .18); }

/* ============ 01/11/2026: sửa theo kết quả kiểm 390px và tương phản (WCAG AA 4.5:1 chữ thường, 3:1 chữ lớn) ============ */
/* Điện thoại: khung cô nổi cao khoảng 130px che dòng cuối của slide. Chừa chỗ để cuộn dòng cuối lên trên khung cô. */
@media (max-width: 640px) {
  .stage-wrap > .stage, .stage { padding-bottom: 150px !important; }
}
/* Thanh trên: chip "Giáo viên AI by RQX", chip "Đang học trực tiếp", nhãn giao diện, chữ trắng trên nền sẫm hơn */
body:not([data-theme]) .topbar .badge-ai, body[data-theme="mac-dinh"] .topbar .badge-ai, body[data-theme="kem-am"] .topbar .badge-ai, body[data-theme="xanh-lam"] .topbar .badge-ai { background: rgba(4, 12, 32, .58) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .5) !important; }
body .topbar .mode-live-chip, body .topbar .mode-review-chip { background: rgba(8, 20, 48, .4); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
body[data-theme="xanh-lam"] .topbar .brand { background: #4338CA !important; color: #fff !important; }
body[data-theme="ban-dem"] .topbar .brand { background: #043478; color: #fff; }
body[data-theme="ban-dem"] .topbar .badge-ai { background: #3B2F13; color: #FDE68A; border-color: #854D0E; }
body:not([data-theme]) .caption:not(.chip) { background: #0369A1 !important; }
/* Ban đêm: hội thoại. Chữ pinyin/Hán của từng từ (.hk) và chữ cái đầu tên vai (.av) đang dùng màu cho nền sáng, khung vai đang đọc (.bb) vẫn nền hồng nhạt */
body[data-theme="ban-dem"] .hk-zh { color: #E2E8F0; }
body[data-theme="ban-dem"] .hk-py { color: #FDBA74; }
body[data-theme="ban-dem"] .hk.on, body[data-theme="ban-dem"] .hk.hh-chi { background: #0C4A6E; }
body[data-theme="ban-dem"] .hk.on .hk-zh, body[data-theme="ban-dem"] .hk.hh-chi .hk-zh { color: #7DD3FC; }
body[data-theme="ban-dem"] .hk.on .hk-py, body[data-theme="ban-dem"] .hk.hh-chi .hk-py { color: #BAE6FD; }
body[data-theme="ban-dem"] .hk.da .hk-zh { color: #5E98EA; }
body[data-theme="ban-dem"] .e-bubble .av { color: #0F172A; }
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .bb { background: #121D2D !important; border-color: #448BEF !important; }
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .py, body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .hk-py { color: #A5C9FC !important; }
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .hk-zh, body[data-theme="ban-dem"] .stage .e-bubble.vai-doc .hk-zh .sp-c { color: #7DD3FC !important; }

/* 01/11/2026 - Kiem 390px: khung co + o hoc vien che 20-36% the tu va loi hoi thoai. Thu gon tren dien thoai. */
@media (max-width: 600px) {
  .classin-toolbar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 6px !important; }
  .classin-toolbar::-webkit-scrollbar { display: none; }
  .classin-toolbar .ct-btn { flex: 0 0 auto; }
  .classin-toolbar { flex-shrink: 0 !important; }
  body:not(.cam-split) .teacher, body:not(.cam-split) .teacher.size-l, body:not(.cam-split) .teacher.size-s { width: 88px !important; border-radius: 14px !important; }
  body:not(.cam-split) .teacher .t-face { height: 88px !important; }
  body:not(.cam-split) .teacher .t-name, body:not(.cam-split) .teacher .t-live { display: none !important; }
  /* Khoang trong duoi thanh dieu khien (giu cho bang Gio tay / Mic) dang bo khong: dua khung co va o Ban xuong do, khong de len chu bai */
  body.mode-live:not(.cam-split) .teacher { top: auto !important; left: auto !important; right: 8px !important; bottom: 10px !important; }
  body.mode-live:not(.cam-split) .ban-tile:not(.cam-on) { top: auto !important; left: auto !important; right: 106px !important; bottom: 14px !important; }
}

/* 01/11/2026 - Bang Gio tay tren dien thoai: 2 hang (Noi + Trung/Viet, roi o nhap + Gui), khong bi cat */
@media (max-width: 600px) {
  .hand-board form.hb-form { display: grid !important; grid-template-columns: 1fr 1fr 52px !important; grid-template-areas: "mic lang lang" "in in send" !important; gap: 6px !important; }
  .hand-board form.hb-form > * { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
  .hand-board form.hb-form #hbMicBtn { grid-area: mic; border-radius: 12px !important; height: 40px !important; }
  .hand-board form.hb-form #hbLangBtn { grid-area: lang; border-radius: 12px !important; height: 40px !important; }
  .hand-board form.hb-form #chatInput { grid-area: in; height: 44px !important; }
  .hand-board form.hb-form .hb-send { grid-area: send; height: 44px !important; border-radius: 12px !important; }
}
/* 01/11: one compact toolbar, readable dialogue, restored frame. */
body .classin-toolbar { position:relative!important; top:auto!important; right:auto!important; width:100%!important; max-width:100%!important; height:auto!important; flex-direction:row!important; flex-wrap:nowrap!important; overflow-x:auto!important; gap:3px!important; padding:4px 6px!important; flex-shrink:0; box-sizing:border-box; }
body .classin-toolbar .ct-btn { flex:0 0 auto; padding:5px 7px; min-height:34px; }
body .classin-toolbar .ct-lb { font-size:12.5px; }
body .classin-toolbar .ct-sep { flex:0 0 1px; }
body .stage-wrap > #stage { border:2px solid var(--frame, #557b9e)!important; border-radius:18px!important; box-shadow:0 5px 18px #10284422!important; overflow:auto; box-sizing:border-box; }
body .stage .s-top { display:none!important; }
body #vocabMarquee { display:block!important; flex-shrink:0; }
body .vocab-marquee .vm-track { animation:vm-scroll 65s linear infinite; font-weight:400; }
@keyframes vm-scroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
body .stage .e-bubble { padding:0!important; min-height:0!important; }
body .stage .e-bubble .bb { padding:5px 9px!important; width:auto!important; max-width:95%!important; }
body .stage .e-bubble .who { font-size:13.5px!important; line-height:1.15!important; margin:0 0 2px!important; display:flex; align-items:center; gap:4px; }
body .stage .e-bubble .who small { font-size:11px; font-weight:400; }
body .stage .e-bubble .zh.line { display:inline-flex; font-size:21px!important; vertical-align:middle; }
body .stage .e-bubble .vi { display:inline; margin:0 0 0 8px; font-size:13.5px!important; line-height:1.3; font-style:normal; }
body .stage .e-bubble .hk-py { font-size:11px!important; }
body .stage .s-els { gap:5px; }
body .stage .e-scene.hh-host { position:relative!important; top:auto!important; }
body .stage .hh-scene svg { height:92px!important; }
body .stage .hh-nho .hh-scene svg { height:58px!important; }
body .stage .reading-now .sp-c.kr-curr, body .stage .vai-doc .sp-c.kr-curr { color:#0369a1!important; background:#bae6fd!important; border-radius:4px; box-shadow:0 0 0 2px #38bdf866!important; animation:read-pulse .65s ease-in-out infinite alternate; }
body .stage .reading-now .sp-c.kr-done, body .stage .vai-doc .sp-c.kr-done { color:#0957C3!important; background:#DBEAFE!important; }
body[data-theme="ban-dem"] .stage .sp-c.kr-curr { color:#082f49!important; }
@keyframes read-pulse { to { background:#7dd3fc; } }
@media(prefers-reduced-motion:reduce) { body .vocab-marquee .vm-track, body .stage .sp-c.kr-curr { animation:none!important; } }

body #classinToolbar #cmdBtns { display:flex!important; flex:0 0 auto; flex-wrap:nowrap!important; position:static!important; gap:3px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; }
body #classinToolbar .cbtn { width:32px!important; min-width:32px!important; height:34px!important; padding:4px!important; border-radius:8px!important; }
body #classinToolbar .cbtn .lb, body #classinToolbar .cb-vol input { display:none!important; }
body #classinToolbar .cb-vol { display:flex; }
body #classinToolbar .ct-lb { display:none!important; }
body #classinToolbar .ct-zoom .ct-lb { display:inline!important; }
body #classinToolbar .ct-btn { min-width:30px!important; }

body .vocab-marquee .vm-track { animation:vm-scroll 65s linear infinite!important; }
body .stage .e-bubble .bb { display:grid!important; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 8px; }
body .stage .e-bubble .who { grid-column:1 / -1; }
body .stage .e-bubble .zh.line { grid-column:1; grid-row:2; }
body .stage .e-bubble .vi { grid-column:2; grid-row:2; margin:0!important; align-self:end; }
body .stage .e-bubble:not(.hh-line) .bb > .py { grid-column:1 / -1; grid-row:3; font-size:12.5px; }
@media(prefers-reduced-motion:reduce) { body .vocab-marquee .vm-track { animation:none!important; } }

/* ============ 01/11/2026 V19: Dải công cụ dọc bên phải khung slide + Bảng chat tương tác ở khung dưới bên phải ============ */
body.mode-live:not(.show-chat-legacy) #cmdbar #chat,
body #cmdbar #chat {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
body #cmdbar #chat .ch-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  min-height: 32px !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
}
body #cmdbar #chat .ch-head b {
  font-size: 13.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body #cmdbar #chat .ch-head .ch-script-btn {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 8px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
body #cmdbar #chat .ch-head .ch-sub,
body #cmdbar #chat .ch-head .ch-grow,
body #cmdbar #chat .ch-head .ch-x {
  display: none !important;
}
body #cmdbar #chat .ch-log {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
body #cmdbar #chat .ch-log .cm {
  max-width: 96% !important;
  font-size: 14px !important;
}
body #cmdbar #chat .ch-log .ch-hint {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}
body #cmdbar #chat #handBoard {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--g-line, #BAE6FD) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
body #cmdbar #chat #hbHistory {
  display: none !important;
}
body #cmdbar #chat #hbStatus:not([hidden]) {
  display: block !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  line-height: 1.3 !important;
}
body #cmdbar #chat #handBoard form.hb-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr 36px !important;
  grid-template-areas: "mic lang lang" "in in send" !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body #cmdbar #chat #handBoard form.hb-form > * {
  min-width: 0 !important;
  margin: 0 !important;
}
body #cmdbar #chat #handBoard form.hb-form #hbMicBtn {
  grid-area: mic !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 6px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
}
body #cmdbar #chat #handBoard form.hb-form #hbLangBtn {
  grid-area: lang !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
body #cmdbar #chat #handBoard form.hb-form #chatInput {
  grid-area: in !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
body #cmdbar #chat #handBoard form.hb-form .hb-send {
  grid-area: send !important;
  width: 36px !important;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: 15.5px !important;
  padding: 0 !important;
}

@media (min-width: 1100px) {
  body .stage-wrap,
  body.mode-live:not(.show-chat-legacy) .stage-wrap,
  body.chat-collapsed .stage-wrap {
    margin-right: var(--tw, 344px) !important;
    margin-bottom: 10px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body .stage-wrap > #vocabMarquee {
    margin-right: 0 !important;
    width: 100% !important;
  }
  body .stage-wrap > #stage {
    width: calc(100% - 68px) !important;
    max-width: none !important;
    margin: 8px 58px 6px 10px !important;
  }
  body #cFull.stage-full {
    top: 46px !important;
    right: 68px !important;
  }
  body .classin-toolbar {
    position: fixed !important;
    top: 82px !important;
    bottom: 10px !important;
    right: calc(var(--tw, 344px) + 2px) !important;
    left: auto !important;
    width: 46px !important;
    max-width: 46px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    gap: 2px !important;
    padding: 5px 3px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    z-index: 58 !important;
    box-sizing: border-box !important;
  }
  body .classin-toolbar::-webkit-scrollbar {
    display: none !important;
  }
  body .classin-toolbar .ct-pen-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
  }
  body .classin-toolbar .ct-colors:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, 12px) !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 3px !important;
    width: 34px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    background: var(--g-bg2, #F0F9FF) !important;
  }
  body .classin-toolbar .ct-swatch {
    width: 11px !important;
    height: 11px !important;
    border-width: 1.5px !important;
  }
  body .classin-toolbar .ct-btn,
  body #classinToolbar .cbtn,
  body #classinToolbar .cbtn.hand,
  body #classinToolbar .cbtn.save {
    width: 36px !important;
    min-width: 36px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 27px !important;
  }
  body .classin-toolbar .ct-sep {
    width: 26px !important;
    height: 1px !important;
    flex: 0 0 1px !important;
    margin: 2px 0 !important;
  }
  body .classin-toolbar .ct-zoom-val {
    font-size: 10.5px !important;
    min-width: 0 !important;
    line-height: 1.1 !important;
    padding: 1px 0 !important;
  }
  body #classinToolbar #cmdBtns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
  }
  body #classinToolbar .cb-more,
  body #classinToolbar .cb-vol {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body #classinToolbar .cbtn::after {
    content: none !important;
    display: none !important;
  }
  body .classin-drawer,
  body .classin-sketch {
    right: 64px !important;
    top: 48px !important;
  }
}

@media (max-width: 1099px) {
  body .cmdbar.controls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    z-index: 68 !important;
    box-sizing: border-box !important;
  }
  body.mode-live:not(.show-chat-legacy) #cmdbar #chat,
  body #cmdbar #chat {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body #cmdbar #chat .ch-log {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: 44px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
  }
  body.hand-up #cmdbar #chat .ch-log {
    max-height: 92px !important;
  }
  body .stage-wrap {
    margin-bottom: var(--ctl-h, 210px) !important;
  }
}

@media (max-width: 600px) {
  body:not(.cam-split) .cmdbar .cb-clock,
  body:not(.cam-split) .cmdbar .cb-prog {
    width: calc(100% - 134px) !important;
    max-width: calc(100% - 134px) !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body #cmdbar #chat .ch-head {
    padding: 3px 8px !important;
    min-height: 26px !important;
  }
  body #cmdbar #chat .ch-log {
    max-height: 34px !important;
    min-height: 26px !important;
    padding: 3px 6px !important;
  }
  body #cmdbar #chat .ch-log .ch-hint {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    padding: 3px 6px !important;
  }
  body #cmdbar #chat #handBoard {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  body #cmdbar #chat #handBoard form.hb-form #hbMicBtn,
  body #cmdbar #chat #handBoard form.hb-form #hbLangBtn {
    height: 26px !important;
    font-size: 12.5px !important;
  }
  body #cmdbar #chat #handBoard form.hb-form #chatInput,
  body #cmdbar #chat #handBoard form.hb-form .hb-send {
    height: 30px !important;
    font-size: 13.5px !important;
  }
  body.mode-live:not(.cam-split) .teacher,
  body:not(.cam-split) .teacher {
    width: 62px !important;
    border-radius: 10px !important;
    top: auto !important;
    left: auto !important;
    right: 8px !important;
    bottom: 6px !important;
    z-index: 72 !important;
  }
  body:not(.cam-split) .teacher .t-face {
    height: 54px !important;
  }
  body:not(.cam-split) .teacher .tp-btns,
  body:not(.cam-split) .teacher .t-bar {
    display: none !important;
  }
  body.mode-live:not(.cam-split) .ban-tile:not(.cam-on),
  body:not(.cam-split) .ban-tile:not(.cam-on) {
    width: 52px !important;
    height: 52px !important;
    top: auto !important;
    left: auto !important;
    right: 76px !important;
    bottom: 8px !important;
    z-index: 72 !important;
  }
  body:not(.cam-split) .ban-tile:not(.cam-on) .bt-face {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  body:not(.cam-split) .ban-tile:not(.cam-on) .bt-av {
    left: 4px !important;
    top: 4px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 21px !important;
  }
  body .stage-wrap {
    margin-bottom: 194px !important;
  }
  body .stage-wrap > .stage,
  body .stage {
    padding-bottom: 16px !important;
  }
}

/* ============ 02/11/2026: Chế độ Giao diện Điện thoại (Mobile Portrait Mode) ============ */
body.layout-phone {
  overflow-x: hidden !important;
}
body.layout-phone .tb-nav-layout {
  background: var(--pri, #1b73e8) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
}
body.layout-phone .stage-wrap {
  margin-right: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 210px !important;
  width: 100% !important;
}
body.layout-phone #stage {
  max-width: 100% !important;
  width: 100% !important;
  padding: 10px 12px 24px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
body.layout-phone .s-title {
  font-size: 21px !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}
body.layout-phone .s-els.grid-2 {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
body.layout-phone .teacher:not(.dragging) {
  position: fixed !important;
  top: 48px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: 84px !important;
  max-width: 84px !important;
  z-index: 70 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
body.layout-phone .teacher .t-face {
  height: 84px !important;
  border-radius: 14px !important;
}
body.layout-phone .teacher .t-panel {
  display: none !important;
}
body.layout-phone .teacher .t-name {
  font-size: 10.5px !important;
  padding: 2px 4px !important;
}
body.layout-phone #classinToolbar {
  position: fixed !important;
  top: 48px !important;
  left: 8px !important;
  width: auto !important;
  max-width: calc(100% - 104px) !important;
  overflow-x: auto !important;
  display: flex !important;
  flex-direction: row !important;
  padding: 3px 6px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 69 !important;
}
body.layout-phone #classinToolbar #cmdBtns {
  flex-direction: row !important;
  gap: 4px !important;
}
body.layout-phone .cmdbar.controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 8px !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
  z-index: 80 !important;
}
body.layout-phone #cmdbar #chat {
  max-height: 140px !important;
}
body.layout-phone #cmdbar #chat .ch-log {
  max-height: 80px !important;
}

/* 03/11/2026: chu trình cuối buổi: bài về nhà (Minh Hà nhắc qua Zalo) + gợi ý luyện thêm */
#doneCover .start-box { max-height: calc(100vh - 40px); overflow-y: auto; }
.done-hw, .done-goiy { width: 100%; text-align: left; margin: 6px 0 4px; padding: 12px 14px; border: 1px solid rgba(127,127,127,.35); border-radius: 12px; background: rgba(127,127,127,.06); }
.done-hw[hidden], .done-goiy[hidden] { display: none; }
.done-hw h2, .done-goiy h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.done-hw .hw-due { margin: 0 0 6px; font-size: 14.5px; opacity: .8; }
.done-hw ol { margin: 4px 0 10px 18px; padding: 0; font-size: 15.5px; line-height: 1.5; }
.done-hw .hw-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.done-hw .hw-f input[type=text], .done-hw .hw-f input[type=tel] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(127,127,127,.45); border-radius: 8px; font: inherit; background: transparent; color: inherit; }
.done-hw .hw-ok { grid-column: 1 / -1; font-size: 14.5px; display: flex; gap: 6px; align-items: flex-start; }
.done-hw .hw-btn { grid-column: 1 / -1; padding: 10px 12px; border: 0; border-radius: 10px; background: #2B69C0; color: #fff; font-weight: 600; cursor: pointer; font: inherit; }
.done-hw .hw-btn[disabled] { opacity: .6; cursor: default; }
.done-hw .hw-msg { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; }
.done-hw .hw-msg.err { color: #2B69C0; }
.done-hw .hw-code { font-family: ui-monospace, monospace; font-size: 19px; letter-spacing: 2px; font-weight: 700; }
.done-goiy ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.done-goiy li a { display: block; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(127,127,127,.3); text-decoration: none; color: inherit; font-size: 15.5px; line-height: 1.4; }
.done-goiy li a:hover { background: rgba(127,127,127,.1); }
.done-goiy li small { display: block; opacity: .75; }
.done-goiy .gy-tip { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; opacity: .85; }
@media (max-width: 520px) { .done-hw .hw-f { grid-template-columns: 1fr; } }

/* 03/11/2026: 2 nút chọn giọng tiếng Việt mẫu (Bắc / Nam) cho bài tiếng Việt */
.giong-vi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.giong-vi button { border: 1px solid var(--line, #d9d9d9); background: #fff; color: inherit; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; line-height: 1.3; }
.giong-vi button .gz { font-family: "Noto Sans SC", sans-serif; font-weight: 700; }
.giong-vi button.on { background: var(--red, #105DC8); border-color: var(--red, #105DC8); color: #fff; }
body:not([data-theme]) .giong-vi button.on { background: var(--g-d, #1f6f50); border-color: var(--g-d, #1f6f50); }
.giong-vi.giong-top { flex: 0 0 auto; margin: 0 8px; }
.giong-vi.giong-start { justify-content: center; margin: 4px auto 14px; }
.giong-vi .giong-lb { width: 100%; text-align: center; font-size: 14px; opacity: .8; }
@media (max-width: 640px) { .giong-vi.giong-top .gv { display: none; } .giong-vi button { padding: 3px 9px; } }

/* 03/11/2026: nút mic ẩn lúc cô đang nghe (bỏ nút Xong) */
.hb-mic-btn[hidden], .hand-board .hb-form .hb-mic-btn[hidden] { display: none !important; }

/* ---------- 03/11/2026: giao diện Mặc định xanh đậm hơn (anh Hạnh yêu cầu) ---------- */
body:not([data-theme]) {
  --g: #1E40AF; --g-d: #172E7A; --g-dd: #0A1736; --g-bg: #DCE6FB; --g-bg2: #E4EBF8; --g-line: #A9BCE3;
  --bg: #DDE6F6; --line: #C5D3EC; --mute: #4A5A78;
  background: linear-gradient(180deg, #1E3A8A 0%, #2747A3 90px, #C7D6F2 300px, #DDE6F6 640px); background-color: #DDE6F6;
}
body:not([data-theme]) .topbar { background: linear-gradient(135deg, #07122E 0%, #0B1B4A 55%, #142C78 100%); }
body:not([data-theme]) .start-cover { background: rgba(214, 226, 246, .97); }
body:not([data-theme]) .ch-log { background: #EEF3FC; }
body:not([data-theme]) .cmdbar .cbtn:hover { background: #C9D8F5; }
.theme-btn[data-theme="mac-dinh"] .th-dot { background: linear-gradient(135deg, #C7D6F2 45%, #0B1B4A 55%); }

/* ---------- 03/11/2026: chống tràn ngang trên điện thoại / máy tính bảng ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.topbar { min-width: 0; max-width: 100vw; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.topbar::-webkit-scrollbar { display: none; }
.topbar .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.cmdbar.controls { max-width: 100vw; box-sizing: border-box; }
@media (max-width: 1099px) {
  .topbar .badge-ai { display: none; }
  .cmdbar .cb-btns { flex-wrap: wrap; min-width: 0; max-width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .topbar .mode-live-chip, .topbar .mode-review-chip { display: none !important; }
}
body.layout-phone .topbar .mode-live-chip, body.layout-phone .topbar .mode-review-chip, body.layout-phone .topbar .badge-ai { display: none !important; }
body.layout-phone .topbar .ttl { display: none; }
body.layout-phone .topbar .tb-nav-btn { font-size: 12.5px; padding: 3px 8px; }
body.layout-phone .cmdbar.controls { width: 100%; left: 0; right: 0; }
body.layout-phone #classinToolbar { max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
.giong-vi.giong-top button, body .giong-vi.giong-top button { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.5) !important; color: #fff !important; }
.giong-vi.giong-top button.on, body .giong-vi.giong-top button.on { background: #e8b923 !important; border-color: #e8b923 !important; color: #14214f !important; font-weight: 700; }

/* ---------- 04/11/2026: thu nhỏ ô bắt đầu học (.start-box) và font chữ còn 80% ---------- */
.start-box {
  max-width: 384px;
  padding: 16px 16px 14px;
  gap: 6px;
  border-radius: 14px;
}
.start-kicker {
  font-size: 12.5px;
}
.start-box h1 {
  font-size: 20px;
  margin: 2px 0 3px;
  line-height: 1.25;
}
.start-box p,
.start-box p#startDesc {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 3px;
}
.start-themes {
  gap: 5px;
  margin: 3px 0 6px;
  padding: 6px 8px;
  border-radius: 10px;
}
.start-themes .st-lb {
  font-size: 11.5px;
}
.start-themes .theme-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
}
.start-themes .th-dot {
  width: 10px;
  height: 10px;
  flex-basis: 10px;
}
.start-box .btn-start {
  font-size: 15px;
  padding: 9px 22px;
}
.start-box .btn-sec {
  font-size: 13.5px;
  padding: 7px 16px;
}
.start-box .btn-tour {
  font-size: 12px;
  padding: 6px 13px;
}
.start-box .giong-vi.giong-start {
  margin: 2px auto 8px;
}
.start-box .giong-vi.giong-start .giong-lb,
.start-box .giong-vi.giong-start button {
  font-size: 11.5px;
}

/* ---------- 04/11/2026 V20: khung cô Quỳnh Như theo ảnh anh Hạnh ----------
   Hàng dưới hình cô: 琼茹老师 · 06:20 / 30:00 · 📷 · ⤢ · ✕ (nút camera cho học viên bật).
   Bảng chat tương tác kéo dài hết cột phải, đáy bảng chỉ còn MỘT dòng nhập. */
.t-btns .t-cam-btn { display: inline-flex; align-items: center; justify-content: center; }
.t-btns .t-cam-btn svg { display: block; }
.t-btns .t-cam-btn.on { background: #0B6CF3 !important; color: #fff !important; border-color: #0B6CF3 !important; }

/* Đồng hồ nằm trong hàng tên cô (chỉ khi màn rộng và chưa chia đôi camera, JS tự chuyển) */
html body .teacher .t-bar.has-clock { gap: 6px; }
html body .teacher .t-bar.has-clock .t-name { flex: 0 0 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
html body .teacher .t-bar.has-clock .t-name b { display: none; }
html body .teacher .t-bar.has-clock #tpClock {
  display: flex !important; align-items: baseline; gap: 4px; flex: 1 1 auto; min-width: 0;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  position: static !important; width: auto !important; height: auto !important;
}
html body .teacher .t-bar.has-clock #tpClock .ck-ic,
html body .teacher .t-bar.has-clock #tpClock .tp-pace,
html body .teacher .t-bar.has-clock #tpClock .tp-bar { display: none !important; }
html body .teacher .t-bar.has-clock #tpClock b { font-size: 17px !important; line-height: 1 !important; color: inherit !important; font-weight: 800; }
html body .teacher .t-bar.has-clock #tpClock .ck-lim { font-size: 12px !important; color: inherit !important; opacity: .7; }
html body .teacher .t-bar.has-clock #tpClock.late b { color: #4889E5 !important; }
html body .teacher .t-bar.has-clock .t-btns { margin-left: auto; }

@media (min-width: 1100px) {
  /* Ô "Bạn" chỉ hiện khi bật camera (chia đôi 50/50, bạn bên trái); chưa bật thì nhường chỗ cho bảng chat */
  html body:not(.cam-split) #banTile { display: none !important; }
  html body #cmdbar #chat { flex: 1 1 auto !important; min-height: 0 !important; }
  html body #cmdbar #chat .ch-log { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; }
}

/* Đáy bảng chat: một dòng duy nhất [🎤][ô nhập][➤], bỏ dòng nhắc và nút phụ */
html body #cmdbar #chat #hbStatus,
html body #cmdbar #chat #hbHistory,
html body #cmdbar #chat #hbLangBtn { display: none !important; }
html body #cmdbar #chat #handBoard { padding: 6px 8px !important; gap: 0 !important; }
html body #cmdbar #chat #handBoard form.hb-form {
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important;
  grid-template-columns: none !important; grid-template-areas: none !important;
}
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn {
  flex: 0 0 34px !important; width: 34px !important; height: 34px !important; padding: 0 !important;
  border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn[hidden] { display: none !important; }
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn::before { content: "🎤"; font-size: 16px; line-height: 1; }
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn.rec::before { content: "⏹"; }
html body #cmdbar #chat #handBoard form.hb-form #chatInput {
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 34px !important; font-size: 14px !important;
}
html body #cmdbar #chat #handBoard form.hb-form .hb-send { flex: 0 0 38px !important; width: 38px !important; height: 34px !important; }

/* ---------- 04/11/2026 V20b: bảng chat không còn chú thích khi nói, dòng nhập không còn mic ---------- */
html body #cmdbar #chat #hbStatus,
html body #cmdbar #chat #hbStatus:not([hidden]),
html body #cmdbar #chat .ch-log .ch-hint,
html body #cmdbar #chat #handBar > span,
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn,
html body #cmdbar #chat #handBoard form.hb-form #hbMicBtn:not([hidden]) { display: none !important; }
html body #cmdbar #chat #handBar:not([hidden]) { justify-content: flex-end !important; padding: 4px 8px !important; min-height: 0 !important; background: transparent !important; border: 0 !important; }
html body #cmdbar #chat #handBar .hp-resume { font-size: 13px !important; padding: 4px 12px !important; height: auto !important; }

/* ---------- 04/11/2026: thay Ngọc Lục Bảo (kem-am) bằng Xanh Dương theo ảnh anh Hạnh (#0055CF -> #0565EF -> #2B83FB) ---------- */
html .theme-btn[data-theme="kem-am"] .th-dot { background: linear-gradient(135deg, #2B83FB 45%, #0055CF 55%) !important; }
html body[data-theme="kem-am"] {
  --g: #0565EF; --g-d: #0055CF; --g-dd: #032E73;
  --g-bg: #CFE2FE; --g-bg2: #E3EEFF; --g-line: #7FB2FC;
  --ink2: #0A1E45; --red: #0055CF; --red-d: #032E73; --navy: #032E73; --gold: #0565EF;
  --hl: #CFE2FE; --bg: #DCE9FD; --card: #F5F9FF; --line: #9FC4FB; --mute: #2E4E86; --ink: #0A1E45; --ok: #0565EF;
  --stage-bg: #FFFFFF; --stage-border: #7FB2FC;
  --mic-on-bg: #0565EF; --mic-on-fg: #FFFFFF; --mic-on-ring: rgba(5, 101, 239, .34);
  --mic-off-bg: #CFE2FE; --mic-off-fg: #032E73; --mic-off-border: #2B83FB;
  background: linear-gradient(180deg, #A9CCFD 0%, #DCE9FD 360px) !important;
  background-color: #DCE9FD !important; color: #0A1E45 !important;
}
html body[data-theme="kem-am"] .topbar { background: linear-gradient(90deg, #0055CF 0%, #0565EF 50%, #2B83FB 100%) !important; color: #FFFFFF !important; box-shadow: 0 3px 14px rgba(0, 85, 207, .3) !important; }
html body[data-theme="kem-am"] .brand { background: #FFFFFF !important; color: #0055CF !important; }
html body[data-theme="kem-am"] .badge-ai, html body[data-theme="kem-am"] .topbar .badge-ai { background: rgba(255, 255, 255, .18) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .45) !important; }
html body[data-theme="kem-am"] .topbar .theme-btn { color: #EAF2FF !important; }
html body[data-theme="kem-am"] .topbar .theme-btn.on { background: #FFFFFF !important; color: #0055CF !important; border-color: #FFFFFF !important; }
html body[data-theme="kem-am"] .stage { background: #FFFFFF !important; border: 1.5px solid #7FB2FC !important; box-shadow: 0 10px 28px rgba(0, 85, 207, .12), inset 0 0 0 1px #CFE2FE !important; }
html body[data-theme="kem-am"] .e-wordcard, html body[data-theme="kem-am"] .e-bubble .bb, html body[data-theme="kem-am"] .e-example,
html body[data-theme="kem-am"] .e-goal, html body[data-theme="kem-am"] .e-compare, html body[data-theme="kem-am"] .e-hanzi,
html body[data-theme="kem-am"] .e-formula { background: #F5F9FF !important; border-color: #9FC4FB !important; }
html body[data-theme="kem-am"] .cmdbar.controls, html body[data-theme="kem-am"] .classin-toolbar { background: #E3EEFF !important; border-color: #9FC4FB !important; }
html body[data-theme="kem-am"] .vocab-marquee { background: #CFE2FE !important; border-bottom-color: #7FB2FC !important; color: #0A1E45 !important; }
html body[data-theme="kem-am"] .py, html body[data-theme="kem-am"] .cm .py { color: #0055CF !important; }
html body[data-theme="kem-am"] .chat { background: #E3EEFF !important; border: 1.5px solid #7FB2FC !important; }
html body[data-theme="kem-am"] .ch-head { background: linear-gradient(90deg, #0055CF 0%, #2B83FB 100%) !important; color: #FFFFFF !important; }
html body[data-theme="kem-am"] .ch-log { background: #F5F9FF !important; }
html body[data-theme="kem-am"] .ch-form { background: #E3EEFF !important; border-top-color: #9FC4FB !important; }
html body[data-theme="kem-am"] #stage .ct-soft-hl { background: #DCEBFF !important; color: #0055CF !important; }

/* ---------- 04/11/2026: cột phải màn rộng xếp sát hơn (hàng tên cô, thanh Chương, Bảng chat) ---------- */
@media (min-width: 1100px) {
  html body #cmdbar.cmdbar.controls { padding: 4px 5px !important; gap: 4px !important; row-gap: 4px !important; }
  html body #cmdbar .cb-prog { padding: 3px 8px !important; gap: 2px !important; }
  html body #cmdbar #chat { margin: 0 !important; }
}

/* ---------- 04/11/2026: hình cô còn 90% chiều cao (168 -> 151px) để ô chat cao hết mức;
   chia đôi camera: bỏ hàng cúp + nút camera dưới ô Bạn, hai khung cao bằng nhau ---------- */
@media (min-width: 1100px) {
  html body .teacher.col .t-face,
  html body .teacher.col.size-l .t-face,
  html body .teacher.col.size-s .t-face,
  html body.cam-split .teacher.col .t-face,
  html body.cam-split .teacher.col.size-l .t-face,
  html body.cam-split .teacher.col.size-s .t-face { height: 151px !important; }
  html body.cam-split .ban-tile.cam-on {
    height: var(--t-h, 186px) !important; box-sizing: border-box !important; border-width: 1px !important;
  }
  html body.cam-split .ban-tile.cam-on .bt-face { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
  html body.cam-split .ban-tile.cam-on .bt-cup,
  html body.cam-split .ban-tile.cam-on .bt-cam { display: none !important; }
  html body.cam-split .ban-tile.cam-on .bt-meta {
    flex: 0 0 33px !important; min-height: 0 !important; height: 33px !important;
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    gap: 6px !important; padding: 0 9px !important; overflow: hidden !important; white-space: nowrap !important;
  }
  html body.cam-split .ban-tile.cam-on .bt-meta span { overflow: hidden !important; text-overflow: ellipsis !important; }
}

/* ---------- 04/11/2026 V21: khung chat giảm 1 cỡ chữ (theo ảnh anh Hạnh) ---------- */
html body #chat .ch-log .cm-b { font-size: 14px !important; }
html body #chat .ch-log .cm .zh { font-size: 18px !important; }
html body #chat .ch-log .cm-meta { font-size: 11px !important; }
html body #chat .ch-log .cm.k-giang .cm-b { font-size: 13px !important; }
html body #chat .ch-log .cm.k-st .cm-b { font-size: 13.5px !important; }
html body #chat .ch-log .cm-tip { font-size: 13px !important; }
html body #chat .ch-log .cm-syl span b { font-size: 18px !important; }
@media (max-width: 900px) {
  html body #chat .ch-log .cm-b { font-size: 13.5px !important; }
}

/* ---------- 04/11/2026 V21: dòng Tips không chui dưới thanh công cụ dọc bên phải bảng ---------- */
@media (min-width: 901px) {
  html body .bottom-center-dock .ask-tips-bar { width: min(940px, calc(100% - 130px)) !important; }
}

/* ---------- 04/11/2026 V22: bút/tẩy trên canvas thật sự nhận chuột/chạm (JS dùng lớp pen-active) ---------- */
.classin-draw-canvas.pen-active { pointer-events: auto; cursor: crosshair; }
.classin-draw-canvas.eraser-active { cursor: cell; }

/* ===== RÀ SOÁT MÀU 04/11/2026: tối đa 3 màu (trung tính, xanh dương #0B6CF3, đỏ nhấn). Báo cáo: bao-cao/ra-soat-mau-2026-11-04.md ===== */
html body .tb-nav-btn.tb-nav-home { background: #FFFFFF !important; color: #0450C2 !important; }
html body .tb-nav-btn.tb-nav-home:hover { background: #E7F0FE !important; }
html body .e-onloi .ol-dung { color: #0450C2 !important; }
html body .mode-live-chip i { background: #105DC8 !important; box-shadow: 0 0 0 2px rgba(16, 93, 200, .3) !important; }

/* 05/11/2026 (anh dặn): chữ học viên cần đọc tô ĐỎ cho dễ nhìn; mic đang nghe/thu âm cũng chuyển ĐỎ */
.el.reading-now, body .stage .el.reading-now { border-color: #DC2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .22), 0 8px 22px rgba(220, 38, 38, .14) !important; }
.el.reading-now .wc-zh, .el.reading-now .zh.big, .el.reading-now .zh.hlz, .el.reading-now .wc-zh .sp-c, .el.reading-now .zh, .el.reading-now .zh .sp-c,
.e-bubble.vai-doc .zh.line, .e-bubble.vai-doc .zh.line *, .e-bubble.vai-doc .hk-zh .sp-c,
body .stage .e-bubble.vai-doc .zh, body .stage .e-bubble.vai-doc .zh .k-w, body .stage .e-bubble.vai-doc .zh .sp-c { color: #DC2626 !important; }
.e-bubble.vai-doc .py, .el.reading-now .py { color: #B91C1C !important; }
.e-bubble.vai-doc .bb, body .stage .e-bubble.vai-doc { border-color: #DC2626 !important; background: #FEF2F2 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .2), 0 8px 20px rgba(220, 38, 38, .14) !important; }
body[data-theme="ban-dem"] .stage .e-bubble.vai-doc { background: #2A1414 !important; border-color: #F87171 !important; }
body .stage .sp-c.kr-done, body .stage .e-bubble.vai-doc .sp-c.kr-done, .stage .sp-c.kr-done { color: #B91C1C !important; background: rgba(254, 226, 226, .7); box-shadow: inset 0 -3px 0 #DC2626; }
body .stage .sp-c.kr-curr, body .stage .e-bubble.vai-doc .sp-c.kr-curr, .stage .sp-c.kr-curr { color: #DC2626 !important; box-shadow: inset 0 -4px 0 #DC2626; }
.tp-mic.listen, .tp-mic.rec, .cmdbar .tp-mic.listen, .cmdbar .tp-mic.rec, body .teacher .tp-mic.listen, body .teacher .tp-mic.rec { background: #DC2626 !important; border-color: #B91C1C !important; color: #fff !important; }
.tp-mic.rec, .cmdbar .tp-mic.rec { animation: recpulse 1s ease-in-out infinite; }
.tp-mic.listen .ic::after, .cmdbar .tp-mic.listen .ic::after { background: #fff !important; }
.ban-tile.ms-luot, .ban-tile.ms-cham { box-shadow: 0 0 0 3px #DC2626 !important; }
.ban-tile .cd, #banCd, .smi-cd { display: none !important; }
#bottomMicDock { display: none !important; }
.cmdbar .tp-mic.ms-luot, .cmdbar .tp-mic.ms-cham, .tp-mic.ms-luot, .tp-mic.ms-cham { background: #DC2626 !important; border-color: #B91C1C !important; color: #fff !important; }
.ban-tile.ms-luot, .ban-tile.ms-cham { border-color: #DC2626 !important; }
.ban-tile.ms-luot .bt-meta span, .ban-tile.ms-cham .bt-meta span { color: #DC2626 !important; }
/* 05/11/2026: bài tập cuối buổi - thanh 4 kỹ năng không đè lên tiêu đề nhóm câu nữa; ô thứ tự nét cạnh ô viết; nhắc câu chưa làm */
.e-baitap .bt-skills { position: static !important; margin-bottom: 12px !important; }
.e-baitap .bt-sk { scroll-margin-top: 12px; }
.e-baitap .bt-net-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.e-baitap .bt-net-mau-w { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.e-baitap .bt-net-mau-w figcaption { font-size: 13px; color: #5d6678; display: flex; align-items: center; gap: 6px; }
.e-baitap .bt-net-mau { width: 150px; height: 150px; border: 1px solid #f3c2c2; border-radius: 10px; background: #fff8f8 linear-gradient(transparent 49.5%, #f2dada 49.5%, #f2dada 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #f2dada 49.5%, #f2dada 50.5%, transparent 50.5%); }
.e-baitap .bt-net-xem { font-size: 12px; padding: 2px 8px; }
.e-baitap .bt-tile:not(.zh) { font-family: inherit; font-size: 20px; letter-spacing: .02em; }
.e-baitap .bt-it.bt-thieu { outline: 2.5px solid #DC2626; outline-offset: 2px; border-radius: 10px; }
.e-baitap .bt-nhac { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; font-size: 15px; line-height: 1.5; }
.e-baitap .bt-nhac a { color: #B91C1C; font-weight: 600; }
body[data-theme="ban-dem"] .e-baitap .bt-nhac { background: #2A1414; border-color: #7F1D1D; color: #FECACA; }
/* 05/11/2026: cửa sổ Hoàn thành bài học mở to bằng cả khung bài học, có nút Quay lại / Đóng */
#doneCover { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
#doneCover .start-box { max-width: none !important; width: 100% !important; max-height: none !important; height: 100%; border-radius: 0 !important; margin: 0; overflow-y: auto; padding: 14px clamp(14px, 4vw, 48px) 28px !important; justify-content: flex-start; }
#doneCover .start-box > *:not(.done-nav) { width: 100%; max-width: 860px; }
#doneCover .start-box > .btn-start, #doneCover .start-box > .btn-sec { width: auto; }
#doneCover .done-nav { position: sticky; top: -14px; z-index: 3; width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 8px; background: inherit; }
.done-nav-btn { border: 1px solid #cbd5e1; background: #fff; color: #1f2f5c; border-radius: 999px; padding: 7px 16px; font-size: 15px; font-weight: 600; cursor: pointer; }
.done-nav-btn:hover { background: #f1f5f9; }
.done-open { position: absolute; right: 14px; bottom: 14px; z-index: 44; border: 0; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 700; color: #fff; background: #1E5CB3; box-shadow: 0 8px 22px rgba(11, 27, 63, .28); cursor: pointer; }
body[data-theme="ban-dem"] .done-nav-btn { background: #1e293b; color: #e2e8f0; border-color: #475569; }
/* 05/11/2026: cô nhìn xuống như đang đọc sách khi học viên im lặng lâu */
.teacher .t-doc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .35s ease; }
.teacher .t-doc.on { opacity: 1; }
.teacher .t-doc.t-cui { transition: none; } /* khung cúi đầu: đổi tức thì từng khung, chỉ mờ dần khi tắt hẳn */
.teacher .t-doc.t-cui.mo { transition: opacity .35s ease; }
.teacher.size-c .t-doc { border-radius: 50%; }
body.voice-only .teacher .t-doc { display: none; }

/* 05/11/2026 (rà buổi 1 HSK): chữ học viên đọc SAI được GẠCH CHÂN xanh đậm, khớp lời cô "chữ cô gạch chân".
   Đỏ chỉ dành cho chữ đang cần đọc (vai-doc, reading-now, kr-curr) và mic đang thu, nên chữ sai không dùng đỏ. */
body .stage .sp-c.pen,
body .sp-card .sp-c.pen {
  color: #2B6CC8 !important;
  background: #EAF2FD !important;
  text-decoration: underline !important;
  text-decoration-color: #2B6CC8 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 6px !important;
  text-decoration-skip-ink: none !important;
  border-radius: 6px;
}
body .heard-box .hb-syl span.bad b,
body .cm-syl span.bad b {
  color: var(--bad) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
body[data-theme="ban-dem"] .stage .sp-c.pen,
body[data-theme="ban-dem"] .sp-card .sp-c.pen {
  color: #A5C9FC !important;
  background: #172231 !important;
  text-decoration-color: #A5C9FC !important;
}

/* 05/11/2026: nút micro trên thanh "Bảng chat tương tác" */
.ch-head .ch-mic { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75); background: #fff; color: #1f3a7a; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.ch-head .ch-mic svg { width: 22px; height: 22px; flex: none; }
.ch-head .ch-mic.on, .ch-head .ch-mic.ms-luot, .ch-head .ch-mic.ms-cham { background: #e0322f; border-color: #e0322f; color: #fff; animation: chMicPulse 1.2s ease-in-out infinite; }
.ch-head .ch-mic.ms-na { opacity: .75; }
@keyframes chMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,50,47,.55); } 50% { box-shadow: 0 0 0 7px rgba(224,50,47,0); } }
@media (prefers-reduced-motion: reduce) { .ch-head .ch-mic.on { animation: none; } }
/* chatMic nam trong .controls: chan kieu nut cot doc + mo 0.55 cua .controls button */
.controls #chatMic.ch-mic, body #cmdbar #chat .ch-head #chatMic.ch-mic { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-width: 0 !important; width: auto !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 12px 0 8px !important; border-radius: 999px !important; opacity: 1 !important; line-height: 1 !important; font-size: 13.5px !important; flex: 0 0 auto !important; margin: 0 !important; }
.controls #chatMic.ch-mic svg { width: 20px !important; height: 20px !important; display: block; }
.controls #chatMic.ch-mic span { display: inline !important; }
.controls #chatMic.ch-mic.ms-na { opacity: .75 !important; }
/* 05/11/2026: nut Am luong chung canh nut micro tren thanh chat; tin cua co khong hien nut loa (tru tin cham phat am: nghe mau ban ngu) */
.controls #chatVol.ch-vol, body #cmdbar #chat .ch-head #chatVol.ch-vol, .ch-head .ch-vol { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 34px !important; min-width: 34px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; border: 2px solid rgba(255,255,255,.75) !important; background: #fff !important; color: #1f3a7a !important; opacity: 1 !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.controls #chatVol.ch-vol.off { background: #f1f3f6 !important; }
.controls #chatVol.ch-vol[aria-expanded="true"] { outline: 2px solid #ffd54a; outline-offset: 1px; }
.ch-volpop { position: fixed; z-index: 9000; display: flex; align-items: center; gap: 8px; width: min(260px, calc(100vw - 16px)); box-sizing: border-box; padding: 10px 12px; background: #fff; color: #1f3a7a; border: 1px solid #d6dce8; border-radius: 14px; box-shadow: 0 8px 24px rgba(15,30,60,.25); font: 700 14px/1 system-ui, sans-serif; }
.ch-volpop[hidden] { display: none !important; }
.ch-volpop .ch-vm { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid #d6dce8; border-radius: 50%; background: #f5f7fb; font-size: 17px; line-height: 1; cursor: pointer; }
.ch-volpop input[type="range"] { flex: 1 1 auto; min-width: 0; height: 32px; margin: 0; accent-color: #2b63d9; touch-action: none; }
.ch-volpop b { flex: 0 0 auto; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.cm.co:not(.k-score) .cm-say { display: none !important; }

/* ===== 05/11/2026 (anh Hanh): tren dien thoai bo dong ho, thanh tien do, nut Quan tri duoi bang chat; bang chat dai ra.
   Nen bang chat sang mau nhat: trang xam (Mac dinh, Xanh Duong), vang nhat (Tim Hoang Gia, Ban dem). ===== */
body.layout-phone #cmdbar #tpClock, body.layout-phone #cmdbar .cb-prog, body.layout-phone #qtBtn { display: none !important; }
html body.layout-phone.mode-live #cmdbar aside#chat, html body.layout-phone:not(.x-none) #cmdbar aside#chat { height: clamp(170px, 32vh, 300px) !important; max-height: none !important; flex: 0 0 auto !important; }
body.layout-phone #cmdbar #chat .ch-log { max-height: none !important; flex: 1 1 auto !important; min-height: 0 !important; }

html body #cmdbar #chat { --cbg: #F3F4F6; --cline: #DCE0E6; --cink: #1E293B; --cmute: #64748B; }
html body[data-theme="xanh-lam"] #cmdbar #chat, html body[data-theme="ban-dem"] #cmdbar #chat { --cbg: #FFF8E1; --cline: #EBDCAE; --cink: #2B2414; --cmute: #7A6A45; }
html body #cmdbar #chat, html body #cmdbar #chat .ch-log, html body #cmdbar #chat #handBoard { background: var(--cbg) !important; color: var(--cink) !important; }
html body #cmdbar #chat #handBoard { border-top: 1px solid var(--cline) !important; }
html body #cmdbar #chat .ch-log .ch-hint { background: #fff !important; color: var(--cmute) !important; border-color: var(--cline) !important; }
html body #cmdbar #chat .ch-log .cm.co .cm-b { background: #fff !important; color: var(--cink) !important; border: 1px solid var(--cline) !important; }
html body #cmdbar #chat .ch-log .cm.me .cm-b { background: #1E4FB8 !important; color: #fff !important; border: 0 !important; }
html body #cmdbar #chat .ch-log .cm.me.voice .cm-b { background: #fff !important; color: var(--cink) !important; border: 1.5px solid #1E4FB8 !important; }
html body #cmdbar #chat .ch-log .cm.k-word .cm-b { background: #FFF3D1 !important; border-color: #EBCB7A !important; }
html body #cmdbar #chat .ch-log .cm.k-score .cm-b { background: #EEF9F1 !important; border-color: #BFE3CB !important; }
html body #cmdbar #chat .ch-log .cm.k-bu .cm-b, html body #cmdbar #chat .ch-log .cm.k-err .cm-b { background: #EAF2FF !important; border-color: #BDD3F3 !important; color: #17488C !important; }
html body #cmdbar #chat .ch-log .cm.k-giang .cm-b { background: transparent !important; border: 0 !important; color: #475569 !important; }
html body #cmdbar #chat .ch-log .cm-meta { color: var(--cmute) !important; }
html body #cmdbar #chat .ch-log .cm .zh { color: #102A6B !important; }
html body #cmdbar #chat .ch-log .cm.me .zh { color: #fff !important; }
html body #cmdbar #chat .ch-log .cm .py { color: #B4231A !important; }
html body #cmdbar #chat .ch-log .cm.me .py { color: #FFE08A !important; }
html body #cmdbar #chat .ch-log .cm.typing .ty-lb { color: var(--cmute) !important; }
html body #cmdbar #chat #chatInput { background: #fff !important; color: var(--cink) !important; border-color: var(--cline) !important; }
html body #cmdbar #chat #chatInput::placeholder { color: #8A94A6 !important; }
html body #cmdbar #chat #chatInput.stt-tam::placeholder { color: #0B6CF3 !important; }
html body[data-theme="ban-dem"] #cmdbar #chat .ch-head .ch-script-btn { opacity: 1 !important; color: #fff !important; background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.5) !important; }

/* 05/11/2026 (kiểm hsk1-nm2/nm3 khổ 360-390px): câu thoại dài làm vỡ bong bóng gọn. Từ đánh dấu (mark.hl) bị co trong hàng
   flex không xuống dòng nên 你好 tách thành 2 dòng, còn lời Việt ở cột phải bị ép còn 0px và tràn thành cột chữ hẹp.
   Sửa: câu Trung được xuống dòng giữa các chữ, từ đánh dấu giữ nguyên một khối; màn hẹp thì lời Việt xuống dưới pinyin
   và câu Trung chảy như chữ thường (display:block) để dấu đóng như ” 。！ không bị đẩy ra đầu dòng mới. */
body .stage .e-bubble .zh.line { flex-wrap:wrap; max-width:100%; min-width:0; }
body .stage .e-bubble .zh.line > mark.hl { flex:none; display:inline-flex; white-space:nowrap; }
body .stage .e-bubble .bb { grid-template-columns:auto minmax(6.5em,1fr); }
@media (max-width: 600px) {
  body .stage .e-bubble .bb { grid-template-columns:minmax(0,1fr); }
  body .stage .e-bubble .zh.line { display:block; line-break:strict; }
  body .stage .e-bubble .zh.line .sp-c, body .stage .e-bubble .zh.line > mark.hl { display:inline; }
  body .stage .e-bubble .vi { grid-column:1; grid-row:4; align-self:start; }
}

/* 06/11/2026 (anh Hạnh): nút Giơ tay và Tạm dừng & Lưu luôn hiện rõ, có chữ, nổi ở hai góc dưới khung slide.
   Chỉ bổ sung CSS, không đổi cấu trúc trang. Điện thoại: nằm ngay trên bảng chat, không còn bị khung cô che hay trôi khỏi màn hình. */
html body #cHand#cHand.cbtn, html body #cSave#cSave.cbtn {
  position: fixed !important; z-index: 70 !important; bottom: 22px !important; top: auto !important;
  display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
  width: auto !important; min-width: 0 !important; max-width: none !important; height: 40px !important; min-height: 0 !important;
  flex: none !important; margin: 0 !important; padding: 0 15px !important; gap: 6px !important;
  border-radius: 999px !important; border-width: 2px !important; border-style: solid !important;
  font-size: 14.5px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: 0 3px 12px rgba(20, 30, 60, .25) !important; transform: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important;
}
html body #cHand#cHand.cbtn .lb, html body #cSave#cSave.cbtn .lb { display: inline !important; text-transform: none !important; letter-spacing: 0 !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; }
html body #cHand#cHand.cbtn .ic, html body #cSave#cSave.cbtn .ic { display: inline !important; font-size: 18px !important; line-height: 1 !important; }
html body #cHand#cHand.cbtn::after, html body #cHand#cHand.cbtn::before, html body #cSave#cSave.cbtn::after, html body #cSave#cSave.cbtn::before { content: none !important; display: none !important; }
html body #cHand#cHand.cbtn { right: calc(var(--tw, 0px) + 74px) !important; left: auto !important; background: #FFE39A !important; border-color: #D9A93A !important; color: #5E3D00 !important; }
html body #cHand#cHand.cbtn.on, html body.hand-up #cHand#cHand.cbtn { background: #F59E0B !important; border-color: #B45309 !important; color: #fff !important; }
html body #cSave#cSave.cbtn { left: 26px !important; right: auto !important; background: #1D4ED8 !important; border-color: #1E3A8A !important; color: #fff !important; }
html body #cHand#cHand.cbtn:hover, html body #cSave#cSave.cbtn:hover { filter: brightness(1.06); }
html body.layout-phone #cHand#cHand.cbtn, html body.layout-phone #cSave#cSave.cbtn { bottom: calc(clamp(170px, 32vh, 300px) + 20px) !important; height: 38px !important; padding: 0 13px !important; font-size: 13.5px !important; }
html body.layout-phone #cHand#cHand.cbtn { right: 10px !important; }
html body.layout-phone #cSave#cSave.cbtn { left: 10px !important; }
/* Màn Bắt đầu hoặc cửa sổ Đã lưu/Hoàn thành đang mở thì ẩn hai nút nổi (trừ lúc hướng dẫn đang chỉ vào nút) để không che nút của cửa sổ */
html body:has(#startCover:not([hidden])) #cHand#cHand.cbtn:not(.tour-hl), html body:has(#startCover:not([hidden])) #cSave#cSave.cbtn:not(.tour-hl),
html body:has(#doneCover:not([hidden])) #cHand#cHand.cbtn:not(.tour-hl), html body:has(#doneCover:not([hidden])) #cSave#cSave.cbtn:not(.tour-hl) { display: none !important; }
/* backdrop-filter của thanh công cụ làm position:fixed của hai nút bám theo thanh (trôi khỏi màn hình), nên tắt ở khổ điện thoại */
html body #classinToolbar:has(#cHand) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* 06/11/2026: con trỏ đặt bên trái phần tử thì quay mũi sang trái (lật cả khung, không đổi kích thước) */
.pointer.flip { transform: scaleX(-1); }

/* 07/11/2026 logo chốt (anh Hạnh): mọi logo dùng 1 ảnh /img/logo-rqx-chinese.png, giữ link cũ */
.logo-img { display: inline-flex !important; align-items: center; gap: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; line-height: 0 !important; flex: 0 0 auto; min-width: 0; }
.logo-img .rqx-logo-img { display: block; height: 42px; width: auto; max-width: none; border-radius: 0; object-fit: contain; }
.logo-img:hover .rqx-logo-img { filter: brightness(1.03); }
footer .logo-img .rqx-logo-img, .ft-brand .logo-img .rqx-logo-img { height: 50px; }
@media (max-width: 1300px) { .logo-img .rqx-logo-img { height: 38px; } }
@media (max-width: 640px) { .logo-img .rqx-logo-img { height: 36px; } footer .logo-img .rqx-logo-img, .ft-brand .logo-img .rqx-logo-img { height: 44px; } }
@media (max-width: 360px) { .logo-img .rqx-logo-img { height: 32px; } }

/* 08/11/2026 khoá tiếng Việt: bấm mic thì nút 举手 nháy nhắc (học viên không tự bật mic) */
@keyframes rqxNhacTay { 0%, 100% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(11, 108, 243, .28); } }
.cmdbar .cbtn.hand.nhac { animation: rqxNhacTay .6s ease-in-out 3; }

/* 08/11/2026 02:40 (anh Hạnh, ảnh Zalo giao diện điện thoại cô Quỳnh Như):
   1. Nút Tạm dừng & Lưu lên góc trên bên phải, cùng hàng thanh công cụ.
   2. Nút Giơ tay xuống hàng ô nhập của bảng chat (cạnh nút Gửi), biểu tượng ✋ to hơn.
   3. Khung slide kéo xuống sát bảng chat: hết chỗ hai nút cũ, phần dưới slide không còn bị bảng chat che.
   4. Chữ nghe được lúc đang nói hiện MỜ; máy chuẩn xong mới hiện rõ để học viên sửa rồi bấm Gửi
      (lớp .stt-tam có từ 30/10 nhưng bị dòng màu chữ của bảng chat 05/11 đè mất). */
html body #cmdbar #chat #chatInput.stt-tam { color: #9AA3B2 !important; font-style: italic !important; }
html body #cmdbar #chat #chatInput { transition: color .25s ease; }
html body.layout-phone #classinToolbar { max-width: calc(100% - 112px) !important; z-index: 85 !important; }
html body.layout-phone .stage-wrap { margin-bottom: var(--ctl-h, 300px) !important; }
html body.layout-phone #cSave#cSave.cbtn {
  top: 51px !important; bottom: auto !important; right: 6px !important; left: auto !important;
  height: 40px !important; max-width: 98px !important; padding: 0 6px !important; gap: 4px !important;
  font-size: 11.5px !important; line-height: 1.12 !important; white-space: normal !important; border-radius: 12px !important;
}
html body.layout-phone #cSave#cSave.cbtn .lb { white-space: normal !important; width: 62px !important; max-width: 62px !important; text-align: left !important; font-size: 11px !important; }
html body.layout-phone #cSave#cSave.cbtn .ic { font-size: 16px !important; }
html body.layout-phone #cHand#cHand.cbtn {
  z-index: 86 !important; bottom: 10px !important; top: auto !important; right: 61px !important; left: auto !important;
  width: 54px !important; height: 46px !important; padding: 2px 0 1px !important; gap: 0 !important;
  flex-direction: column !important; border-radius: 14px !important; font-size: 10.5px !important; line-height: 1.05 !important;
}
html body.layout-phone #cHand#cHand.cbtn .ic { font-size: 25px !important; line-height: 1 !important; }
html body.layout-phone #cmdbar #chat #handBoard form.hb-form #chatInput { margin-right: 58px !important; }
html body.layout-phone .teacher:not(.dragging) { top: 96px !important; }