/* ==========================================================================
   AI Live Sensei Classroom — Paper Deck
   Trình chiếu toàn màn hình, bảng màu giấy be, chuyển cảnh kiểu Remotion.

   Bố cục: chỉ 3 dải ngang, không cột phụ.
     .deck-top     — danh tính bài học (mỏng)
     .deck-stage   — sân khấu, chiếm toàn bộ phần còn lại
     .deck-bottom  — điều khiển trình chiếu

   Nhịp chuyển động:
     - Chuyển cảnh: easeOutQuint (0.22, 1, 0.36, 1) — bung nhanh, hãm mượt.
     - Nhấn mạnh:   spring nhẹ (0.34, 1.4, 0.5, 1), không nảy quá đà.
     - Thẻ nội dung vào sân khấu theo bậc thang ~45ms.
   ========================================================================== */

:root {
  --paper:        #f0ebe1;
  --paper-deep:   #e7dfd1;
  --surface:      #faf7f2;
  --surface-hi:   #ffffff;
  --line:         #e5dbcb;
  --line-strong:  #d3c5af;
  --ink:          #1f1d19;
  --ink-2:        #2e2a24;
  --muted:        #6b6355;
  --faint:        #8c8272;

  --accent:       #c96442;
  --accent-deep:  #a9492b;
  --sage:         #6b8a5e;
  --sage-deep:    #4f6d45;
  --gold:         #c0952f;
  --clay:         #c25a4c;
  --clay-deep:    #ac4739;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.5, 1);

  --shadow-card:  0 1px 2px rgba(74, 56, 34, .05), 0 6px 16px -8px rgba(74, 56, 34, .16);
  --shadow-bar:   0 -1px 0 var(--line), 0 -10px 30px -18px rgba(74, 56, 34, .3);

  --top-h:        56px;
  --bottom-h:     68px;
}

/* ==========================================================================
   0. VỎ ỨNG DỤNG
   ========================================================================== */

html, body { height: 100%; }

body.deck {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* deck không cuộn — chỉ sân khấu cuộn */
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 500px at 10% -10%, rgba(201, 100, 66, .06), transparent 62%),
    radial-gradient(800px 500px at 94% 0%,  rgba(107, 138, 94, .05), transparent 60%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ruby, .font-serif {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
}
ruby rt {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  letter-spacing: .02em;
  user-select: none;
}

/* --------------------------------------------------------------------------
   CHỈ BÔI ĐEN ĐƯỢC CHỮ NHẬT

   Khoá bôi đen toàn vùng nội dung, rồi mở lại đúng những thẻ có chữ Nhật
   (đánh dấu bằng .jp-sel sau mỗi lần render). Kéo chuột ngang qua phần tiếng
   Việt thì trình duyệt bỏ qua, nên vùng chọn luôn sạch chữ Nhật — bấm loa là
   đọc đúng thứ cần đọc, không lẫn nghĩa tiếng Việt hay tên nhãn.
   -------------------------------------------------------------------------- */
.deck-content {
  user-select: none;
  -webkit-user-select: none;
}
.deck-content .jp-sel {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
/* Furigana nằm trong vùng chọn sẽ cho ra "私わたし" — loại hẳn khỏi vùng bôi đen */
.deck-content .jp-sel rt {
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   1. THANH TRÊN
   ========================================================================== */

.deck-top {
  height: var(--top-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 242, .82);
  backdrop-filter: blur(12px);
  z-index: 30;
}

.deck-mark {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px -5px rgba(201, 100, 66, .8);
}

.deck-level {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-deep);
  background: rgba(201, 100, 66, .12);
  border: 1px solid rgba(201, 100, 66, .26);
  padding: 2px 8px;
  border-radius: 6px;
}

.deck-lesson-no {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}

.deck-lesson-select,
.deck-level-select {
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  max-width: 300px;
  text-overflow: ellipsis;
}
.deck-lesson-select:hover,
.deck-level-select:hover { border-color: var(--line-strong); background: var(--surface-hi); }
.deck-level-select { max-width: 74px; font-family: ui-monospace, monospace; font-weight: 700; }

.deck-wave {
  display: flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px;
  border-radius: 99px;
  background: var(--paper-deep);
}
.wave-bar {
  width: 3px; height: 5px;
  border-radius: 99px;
  background: var(--line-strong);
  transition: background-color .25s var(--ease-out);
}
.wave-bar.active {
  background: var(--accent) !important;
  animation: pulseBar .85s var(--ease-out) infinite;
}
@keyframes pulseBar {
  0%, 100% { height: 5px;  opacity: .55; }
  50%      { height: 18px; opacity: 1; }
}

/* ==========================================================================
   2. SÂN KHẤU
   ========================================================================== */

.deck-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 'clip' cắt gọn mà KHÔNG tạo vùng cuộn ngang ẩn — 'hidden' vẫn cho
     scrollIntoView đẩy lệch cả sân khấu sang trái. */
  overflow: hidden;
  overflow: clip;

  /* Quyền sáng ấm ở hai góc.
     Trước đây là hai thẻ riêng có filter: blur(80px) — mỗi thẻ tạo một layer GPU,
     làm cả sân khấu không được vẽ trên máy yếu hoặc khi cửa sổ bị che.
     Dùng gradient nền cho cùng hiệu ứng mà không sinh layer nào. */
  background-image:
    radial-gradient(520px 420px at 100% 0%,   rgba(201, 100, 66, .14), transparent 70%),
    radial-gradient(480px 400px at 0% 100%,   rgba(107, 138, 94, .13), transparent 70%);
}

.deck-canvas {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 28px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.deck-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Vùng cuộn của từng chương — cao theo màn hình thay vì cố định px */
.deck-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

/* Phụ đề sân khấu — ghi chú của tool highlight_element */
.deck-caption {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 12px; font-style: italic;
  pointer-events: none;
}

/* Bảng sửa lỗi nổi trên sân khấu */
.deck-errdock {
  position: absolute;
  left: 50%; bottom: 44px;
  transform: translateX(-50%);
  z-index: 5;
  width: min(760px, calc(100% - 48px));
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(194, 90, 76, .45);
  background: rgba(252, 243, 240, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px -20px rgba(120, 50, 40, .5);
  animation: dockIn .34s var(--ease-spring) both;
}
@keyframes dockIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.deck-errcell {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
.deck-errcell-ok { border-color: rgba(107, 138, 94, .4); }
.deck-errlabel {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--faint); margin-bottom: 2px;
}
.deck-errnote {
  margin-top: 10px;
  font-size: 12px; font-style: italic;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .6);
  border-left: 3px solid var(--clay);
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
}

/* ==========================================================================
   3. CHUYỂN CẢNH
   ========================================================================== */

.slide-fade-enter { animation: sceneIn .5s var(--ease-out) both; }

/* Khong dung filter: blur() o day: moi khung hinh blur bat GPU tao layer rieng,
   tren may yeu se lam ca san khau khong kip ve. Chi opacity + dich chuyen la du muot. */
@keyframes sceneIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.slide-fade-enter > * { animation: blockIn .48s var(--ease-out) both; }
.slide-fade-enter > *:nth-child(1) { animation-delay: .05s; }
.slide-fade-enter > *:nth-child(2) { animation-delay: .12s; }
.slide-fade-enter > *:nth-child(3) { animation-delay: .19s; }

@keyframes blockIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.slide-fade-enter > * > * { animation: cardIn .46s var(--ease-out) both; }
.slide-fade-enter > * > *:nth-child(1)   { animation-delay: .10s; }
.slide-fade-enter > * > *:nth-child(2)   { animation-delay: .145s; }
.slide-fade-enter > * > *:nth-child(3)   { animation-delay: .19s; }
.slide-fade-enter > * > *:nth-child(4)   { animation-delay: .235s; }
.slide-fade-enter > * > *:nth-child(5)   { animation-delay: .28s; }
.slide-fade-enter > * > *:nth-child(6)   { animation-delay: .325s; }
.slide-fade-enter > * > *:nth-child(7)   { animation-delay: .37s; }
.slide-fade-enter > * > *:nth-child(8)   { animation-delay: .415s; }
.slide-fade-enter > * > *:nth-child(n+9) { animation-delay: .46s; }

@keyframes cardIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.99); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-zoom-in { animation: zoomIn .28s var(--ease-spring) both; }

/* ==========================================================================
   4. THANH DƯỚI
   ========================================================================== */

.deck-bottom {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--bottom-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: rgba(250, 247, 242, .9);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-bar);
  z-index: 30;
  flex-wrap: wrap;
}

.deck-chapters {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.deck-chapters::-webkit-scrollbar { display: none; }

.chapter {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.chapter i { font-size: 11px; opacity: .8; }
.chapter:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.chapter.is-active {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 12px -5px rgba(201, 100, 66, .9);
}
.chapter.is-active i { opacity: 1; }

.deck-nav { display: flex; align-items: center; gap: 5px; }
.deck-counter {
  font-family: ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
  min-width: 74px; text-align: center; white-space: nowrap;
}

.deck-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-wrap: wrap;
}

/* --- nút --- */
.ctl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease-spring), background-color .18s var(--ease-out),
              border-color .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.ctl:active:not(:disabled) { transform: scale(.97); }
.ctl:disabled { cursor: not-allowed; opacity: .5; }

.ctl-go      { background: var(--sage-deep); color: #fff; box-shadow: 0 5px 14px -7px rgba(79, 109, 69, .9); }
.ctl-go:hover:not(:disabled) { background: #5c7d50; }

.ctl-pause   { background: var(--gold); color: var(--ink); box-shadow: 0 5px 14px -7px rgba(192, 149, 47, .9); }
.ctl-pause:hover:not(:disabled) { background: #cfa23a; }

.ctl-resume  { background: var(--accent); color: #fff; box-shadow: 0 5px 14px -7px rgba(201, 100, 66, .9); }
.ctl-resume:hover:not(:disabled) { background: var(--accent-deep); }

.ctl-warn    { background: transparent; color: #8f6a1c; border-color: rgba(192, 149, 47, .5); }
.ctl-warn:hover:not(:disabled) { background: rgba(192, 149, 47, .14); }

.ctl-ghost   { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.ctl-ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface-hi); }

.ctl-connect { background: var(--accent); color: #fff; box-shadow: 0 5px 14px -7px rgba(201, 100, 66, .9); }
.ctl-connect:hover:not(:disabled) { background: var(--accent-deep); }
.ctl-connect.is-live { background: var(--clay-deep); box-shadow: 0 5px 14px -7px rgba(172, 71, 57, .9); }
.ctl-connect.is-live:hover { background: #963c30; }

.ctl-next {
  background: var(--accent); color: #fff;
  box-shadow: 0 5px 16px -6px rgba(201, 100, 66, .95);
  animation: nudge 1.6s var(--ease-out) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

.ctl-icon {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-hi);
  color: var(--muted);
  font-size: 13px; cursor: pointer;
  transition: transform .16s var(--ease-spring), color .18s var(--ease-out),
              border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.ctl-icon:hover { color: var(--accent-deep); border-color: rgba(201, 100, 66, .45); }
.ctl-icon:active { transform: scale(.94); }
.ctl-icon-sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }

/* ==========================================================================
   5. ĐANG THU ÂM CÂU HỎI
   ========================================================================== */

.deck-recording {
  position: absolute;
  top: -44px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid rgba(172, 71, 57, .45);
  background: rgba(252, 243, 240, .97);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -14px rgba(120, 50, 40, .55);
  font-size: 11.5px; font-weight: 600; color: var(--clay-deep);
  animation: dockIn .26s var(--ease-spring) both;
}
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--clay-deep);
  animation: recBlink 1.1s var(--ease-out) infinite;
}
@keyframes recBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }

.deck-micbar { width: 92px; height: 5px; border-radius: 99px; background: var(--paper-deep); overflow: hidden; }
.deck-micbar > div {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--sage), var(--gold), var(--accent));
  transition: width .075s linear;
}
.deck-micpct { font-family: ui-monospace, monospace; font-weight: 700; min-width: 30px; }

/* ==========================================================================
   6. Ô GÕ CÂU HỎI
   ========================================================================== */

.deck-chatdock {
  position: fixed;
  left: 50%; bottom: calc(var(--bottom-h) + 14px);
  transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: 9px;
  width: min(680px, calc(100vw - 32px));
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(250, 247, 242, .97);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px -20px rgba(74, 56, 34, .55);
  animation: dockIn .26s var(--ease-spring) both;
}
.deck-chatinput {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink);
}
.deck-chatinput:focus { outline: none; }
.deck-chatinput::placeholder { color: var(--faint); }

/* ==========================================================================
   7. BẢNG CẤU HÌNH
   ========================================================================== */

.deck-settings {
  position: fixed;
  top: calc(var(--top-h) + 10px); right: 16px;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(74, 56, 34, .6);
  animation: panelIn .26s var(--ease-spring) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.deck-field { display: block; margin-bottom: 11px; }
.deck-field > span {
  display: block;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); margin-bottom: 4px;
}
.deck-field select,
.deck-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-hi);
  font: inherit; font-size: 13px; color: var(--ink);
}
.deck-field select:focus,
.deck-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, .15);
}


/* ==========================================================================
   8. THÔNG BÁO
   ========================================================================== */

.deck-toasts {
  position: fixed;
  top: calc(var(--top-h) + 12px); left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: rgba(250, 247, 242, .97);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -16px rgba(74, 56, 34, .55);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  animation: toastIn .3s var(--ease-spring) both;
}
.toast.is-out { animation: toastOut .3s var(--ease-out) both; }
.toast i { flex: 0 0 auto; }
.toast-error { border-color: rgba(194, 90, 76, .5); color: #8b3628; }
.toast-error i { color: var(--clay); }
.toast-info i { color: var(--accent); }

@keyframes toastIn  { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* ==========================================================================
   9. RỌI SÁNG (tool highlight_element)
   ========================================================================== */

.hl-grammar {
  background: rgba(107, 138, 94, .16); color: #33512b;
  border-radius: 6px; padding: 1px 5px;
  box-shadow: 0 0 0 1px rgba(107, 138, 94, .42);
  animation: grammarPulse 1.8s var(--ease-out) infinite;
}
.hl-vocab {
  background: rgba(192, 149, 47, .18); color: #6d5214;
  border-radius: 6px; padding: 1px 5px;
  box-shadow: 0 0 0 1px rgba(192, 149, 47, .45);
  animation: vocabPulse 1.8s var(--ease-out) infinite;
}
.hl-warning {
  background: rgba(194, 90, 76, .16); color: #8b3628;
  border-radius: 6px; padding: 1px 5px;
  box-shadow: 0 0 0 1px rgba(194, 90, 76, .5);
  animation: warningPulse 1.1s var(--ease-out) infinite;
}
.hl-reading-inline {
  background: rgba(201, 100, 66, .16); color: var(--accent-deep);
  border-radius: 6px; padding: 1px 5px;
  box-shadow: 0 0 0 1px rgba(201, 100, 66, .48);
  animation: readingPulse 1.35s var(--ease-out) infinite;
}

.reading-focus {
  background: linear-gradient(180deg, rgba(201, 100, 66, .10), rgba(201, 100, 66, .04)) !important;
  border-color: rgba(201, 100, 66, .55) !important;
  box-shadow: 0 0 0 1px rgba(201, 100, 66, .3), 0 14px 30px -16px rgba(201, 100, 66, .65) !important;
  transform: translateZ(0) scale(1.012);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.hl-card-grammar {
  border-color: rgba(107, 138, 94, .6) !important;
  box-shadow: 0 0 0 1px rgba(107, 138, 94, .26), 0 14px 30px -16px rgba(107, 138, 94, .6) !important;
}
.hl-card-vocab {
  border-color: rgba(192, 149, 47, .62) !important;
  box-shadow: 0 0 0 1px rgba(192, 149, 47, .28), 0 14px 30px -16px rgba(192, 149, 47, .62) !important;
}
.hl-card-warning {
  border-color: rgba(194, 90, 76, .66) !important;
  box-shadow: 0 0 0 1px rgba(194, 90, 76, .3), 0 14px 30px -16px rgba(194, 90, 76, .66) !important;
}

.reading-badge-indicator {
  animation: fadeInBadge .3s var(--ease-spring) both;
  background: var(--accent) !important;
  color: #fff !important;
}
@keyframes fadeInBadge { from { opacity: 0; transform: translateY(-4px) scale(.9); } to { opacity: 1; transform: none; } }

@keyframes readingPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(201,100,66,.48); } 50% { box-shadow: 0 0 0 1px rgba(201,100,66,.48), 0 0 16px -2px rgba(201,100,66,.5); } }
@keyframes grammarPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(107,138,94,.42); } 50% { box-shadow: 0 0 0 1px rgba(107,138,94,.42), 0 0 16px -2px rgba(107,138,94,.45); } }
@keyframes vocabPulse   { 0%,100% { box-shadow: 0 0 0 1px rgba(192,149,47,.45); } 50% { box-shadow: 0 0 0 1px rgba(192,149,47,.45), 0 0 16px -2px rgba(192,149,47,.5); } }
@keyframes warningPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(194,90,76,.5); }  50% { box-shadow: 0 0 0 1px rgba(194,90,76,.5), 0 0 16px -2px rgba(194,90,76,.55); } }

/* ==========================================================================
   10. PHẢN HỒI BÀI TẬP
   ========================================================================== */

@keyframes roastShake {
  0%, 100%  { transform: translateX(0); }
  18%, 54%  { transform: translateX(-4px); }
  36%, 72%  { transform: translateX(4px); }
  86%       { transform: translateX(-2px); }
}
.roast-shake { animation: roastShake .5s var(--ease-out) 1; }

@keyframes flamePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(194, 90, 76, .5), 0 10px 26px -14px rgba(194, 90, 76, .8); }
  50%      { box-shadow: 0 0 0 1px rgba(194, 90, 76, .7), 0 12px 34px -12px rgba(176, 74, 62, .95); }
}
.flame-border { animation: flamePulse 1.5s var(--ease-out) infinite; }

.opt-locked { cursor: default !important; opacity: .92; }
.opt-locked:hover { transform: none; }

/* ==========================================================================
   11. CHI TIẾT
   ========================================================================== */

.custom-scrollbar::-webkit-scrollbar,
.deck-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track,
.deck-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb,
.deck-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.deck-scroll::-webkit-scrollbar-thumb:hover { background: #bfae93; }
.custom-scrollbar, .deck-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

#selectionSpeakerBadge { box-shadow: 0 10px 26px -10px rgba(201, 100, 66, .75); }

button:not(:disabled):not(.ctl):not(.ctl-icon):not(.chapter) {
  transition: transform .16s var(--ease-spring), background-color .18s var(--ease-out),
              border-color .18s var(--ease-out), color .18s var(--ease-out);
}
button:not(:disabled):not(.ctl):not(.ctl-icon):not(.chapter):active { transform: scale(.97); }

input:focus, select:focus { outline: none; }
::selection { background: rgba(201, 100, 66, .22); color: var(--ink); }

/* ==========================================================================
   12. MÀN HÌNH HẸP
   ========================================================================== */

@media (max-width: 980px) {
  :root { --bottom-h: 60px; }
  .deck-canvas { padding: 18px 16px 14px; }
  .deck-nav { display: none; }
  .chapter span { display: none; }
  .chapter { padding: 7px 10px; }
  .deck-lesson-select { max-width: 150px; }
  .deck-actions { gap: 6px; }
  .ctl { padding: 7px 11px; font-size: 11.5px; }
}

@media (max-width: 640px) {
  .ctl-go span, .ctl-warn span, .ctl-connect span, .ctl-ghost span { display: none; }
  .ctl { padding: 8px 11px; }
  .deck-top { padding: 0 12px; }
  .deck-recording { right: 8px; font-size: 10.5px; }
  .deck-micbar { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   13. SPOTLIGHT — rọi đèn sân khấu
   Mục đang được Sensei đọc bay từ vị trí của nó ra giữa màn hình, phóng to,
   nền phía sau mờ đi. Mỗi lúc chỉ một mục được rọi.
   ========================================================================== */

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;   /* chi thang the moi an chuot, phan con lai van bam duoc */
}
.spotlight.hidden { display: none; }

/* Thẻ neo sát mép trái, cao gần hết màn hình — đọc kỹ được mà vẫn thấy bài */
.spot-dock {
  position: absolute;
  left: 14px;
  top: 76px;
  bottom: 84px;
  width: min(360px, 38vw);
  display: flex;
  pointer-events: auto;
}
.spotlight.is-closing .spot-dock { opacity: 0; transition: opacity .2s var(--ease-out); }

.spot-dong {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.spot-dong:hover { color: var(--ink); border-color: var(--line-strong); }

/* Mũi tên nối thẻ với mục thật trong bài */
.spot-noi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.spot-noi-nen {
  fill: none;
  stroke: var(--surface, #fdfaf4);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .92;
}
.spot-noi-than,
.spot-noi-dau {
  fill: none;
  stroke: var(--accent, #b0791f);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
@keyframes spotNoiChay { to { stroke-dashoffset: 0; } }

.spot-card {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-y: auto;
  padding: 26px 22px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(60, 45, 28, .65);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* --- ảnh minh hoạ cỡ lớn --- */
.spot-image {
  margin: -6px 0 18px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--line);
}
.spot-image img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

/* --- từ vựng / một từ trong câu --- */
.spot-head {
  font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 6px;
}
.spot-head rt { font-size: .3em; color: var(--accent-deep); font-weight: 600; }

.spot-kanji {
  font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 4px 0 14px;
  text-shadow: 0 6px 18px rgba(74, 56, 34, .16);
}

.spot-sub {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  margin-bottom: 12px;
}
.spot-romaji { font-family: ui-monospace, monospace; font-size: 14px; color: var(--muted); }
.spot-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 99px;
  background: var(--paper-deep); color: var(--muted);
  border: 1px solid var(--line);
}
.spot-chip.is-key {
  background: rgba(201, 100, 66, .13);
  border-color: rgba(201, 100, 66, .4);
  color: var(--accent-deep);
}

.spot-speaker {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 10px;
}

/* --- câu --- */
.spot-sentence {
  font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 14px;
}
.spot-sentence.is-small { font-size: clamp(1.05rem, 2.6vw, 1.4rem); line-height: 1.9; margin-bottom: 6px; }
.spot-sentence rt { font-size: .38em; color: var(--muted); font-weight: 500; }

.stok { padding: 1px 3px; border-radius: 5px; }
.stok.is-key { background: rgba(201, 100, 66, .14); color: var(--accent-deep); }
.stok.is-focus {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 16px -7px rgba(201, 100, 66, .95);
}
.stok.is-focus rt { color: rgba(255, 255, 255, .85); }

.spot-meaning {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.6;
}
.spot-meaning.is-small { font-size: 13px; color: var(--muted); font-style: italic; }

.spot-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 10px 13px;
  border-radius: 11px; text-align: left;
  background: rgba(192, 149, 47, .1);
  border: 1px solid rgba(192, 149, 47, .32);
  font-size: 12.5px; color: #6d5214;
}
.spot-note i { margin-top: 2px; color: var(--gold); }

/* --- âm On / Kun --- */
.spot-readings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 16px 0 6px;
}
.spot-readings > div {
  padding: 10px 12px; border-radius: 11px;
  background: var(--surface-hi); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.spot-rlabel {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); margin-bottom: 3px;
}

.spot-words { margin-top: 16px; text-align: left; }
.spot-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 10px;
  background: var(--surface-hi); border: 1px solid var(--line);
  font-size: 14px;
}
.spot-row-jp { font-family: "Noto Serif JP", serif; font-weight: 600; color: var(--ink); }
.spot-row-jp em { font-style: normal; font-size: 12px; color: var(--muted); }
.spot-row-vi { font-size: 12.5px; color: var(--muted); text-align: right; }

/* --- sơ đồ cấu trúc câu: minh hoạ ngữ pháp bằng khối --- */
.spot-diagram { margin-top: 18px; }
.spot-diagram-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); margin-bottom: 9px;
}
.diagram {
  display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: center; gap: 5px;
}
.dblock {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 52px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
}
.dblock.is-key {
  background: rgba(201, 100, 66, .1);
  border-color: rgba(201, 100, 66, .45);
}
.dword {
  font-family: "Noto Serif JP", serif;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.dblock.is-key .dword { color: var(--accent-deep); }
.drole {
  font-size: 9.5px; font-weight: 600; line-height: 1.2;
  color: var(--muted); text-align: center; white-space: nowrap;
}
.dblock.is-key .drole { color: var(--accent); }
.dplus { align-self: center; font-size: 12px; color: var(--faint); }

/* --- bài tập --- */
.spot-question { font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.6; margin-bottom: 14px; }
.spot-opts { display: grid; gap: 7px; text-align: left; }
.spot-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 10px;
  background: var(--surface-hi); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.spot-opt > span {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--paper-deep); color: var(--muted);
  font: 700 11px ui-monospace, monospace;
}

/* --- nút nghe --- */
.spot-speak {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 10px 20px;
  border: 0; border-radius: 99px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -9px rgba(201, 100, 66, .95);
}
.spot-speak:hover { background: var(--accent-deep); }
.spot-speak:active { transform: scale(.96); }

.spot-incontext {
  margin-top: 18px; padding: 14px;
  border-radius: 14px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .spot-card { padding: 22px 18px; border-radius: 20px; }
  .spot-readings { grid-template-columns: 1fr; }
  .spot-image img { max-height: 180px; }
}

/* ==========================================================================
   14. HÌNH MINH HOẠ VẼ TAY (js/illustrations.js)
   ========================================================================== */

.sensei-art {
  display: grid;
  place-items: center;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.sensei-art svg { display: block; width: 100%; height: 100%; }

/* Thu nhỏ trong thẻ từ vựng */
.sensei-art-sm { width: 56px; height: 56px; border-radius: 12px; padding: 4px; }
@media (min-width: 768px) { .sensei-art-sm { width: 64px; height: 64px; } }

/* Phóng lớn trong spotlight */
.sensei-art-lg {
  width: min(240px, 60vw);
  height: min(240px, 60vw);
  margin: -4px auto 18px;
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(160deg, var(--surface-hi), var(--paper-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.spot-origin { text-align: left; margin-top: -6px; margin-bottom: 14px; }
.spot-origin strong { color: var(--accent-deep); }

/* ==========================================================================
   15. LƯỚI AN TOÀN — giữ giao diện không vỡ khi Tailwind không nạp được
   Tailwind giờ nằm ở vendor/tailwind.js (local), nhưng nếu vì lý do gì đó
   tệp đó không chạy thì những khai báo dưới đây vẫn giữ được bộ khung:
   quan trọng nhất là .hidden — thiếu nó thì mọi lớp phủ hiện ra cùng lúc.
   ========================================================================== */

.hidden { display: none !important; }

[hidden] { display: none !important; }

/* Tiền tố -webkit- cho Safari: thiếu thì chỉ mất hiệu ứng mờ, không vỡ layout,
   nhưng thêm vào thì máy Mac/iPad nhìn giống hệt máy Windows. */
.deck-top,
.deck-bottom,
.deck-errdock,
.deck-chatdock,
.toast {
  -webkit-backdrop-filter: blur(12px);
}

/* Màn hình thấp (laptop 13", cửa sổ chia đôi): thu gọn chrome để sân khấu còn chỗ */
@media (max-height: 700px) {
  :root { --top-h: 48px; --bottom-h: 58px; }
  .deck-canvas { padding: 14px 20px 10px; }
  .spot-card { padding: 20px 22px; }
  .sensei-art-lg { width: min(170px, 42vw); height: min(170px, 42vw); }
  .spot-kanji { font-size: clamp(3.5rem, 11vw, 6rem); }
  .spot-head { font-size: clamp(1.9rem, 5.5vw, 3rem); }
  .spot-sentence { font-size: clamp(1.25rem, 3.4vw, 1.9rem); line-height: 1.7; }
}

@media (max-height: 560px) {
  .spot-diagram, .spot-note { display: none; }
  .spot-image img { max-height: 120px; }
}

/* Màn hình rất rộng: không để dòng chữ kéo dài quá tầm mắt */
@media (min-width: 1500px) {
  .deck-canvas { max-width: 1320px; }
}

/* ==========================================================================
   16. MÀN CHỌN BÀI HỌC
   Phủ toàn trang, cuộn dọc. Mỗi cấp độ là một dải, trong dải là lưới thẻ bài.
   ========================================================================== */

.picker {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 520px at 8% -12%,  rgba(201, 100, 66, .10), transparent 62%),
    radial-gradient(760px 480px at 96% 2%,   rgba(107, 138, 94, .09), transparent 60%),
    radial-gradient(900px 600px at 50% 112%, rgba(192, 149, 47, .07), transparent 64%);
  animation: pickerIn .34s var(--ease-out) both;
}
.picker.hidden { display: none; }

@keyframes pickerIn {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: none; }
}

/* ---------- thanh trên ---------- */
.picker-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 242, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.picker-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.picker-brand h1 {
  margin: 0;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
}
.picker-brand p {
  margin: 2px 0 0;
  font-size: 12px; color: var(--muted);
}

.picker-tools { display: flex; align-items: center; gap: 10px; }
.picker-search {
  display: flex; align-items: center; gap: 9px;
  width: min(360px, 52vw);
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-hi);
}
.picker-search i { color: var(--faint); font-size: 12px; }
.picker-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink);
}
.picker-search input:focus { outline: none; }
.picker-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, .14);
}

/* ---------- thân ---------- */
.picker-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 28px 60px;
}

.picker-level { margin-bottom: 38px; animation: blockIn .5s var(--ease-out) both; }
.picker-level:nth-child(1) { animation-delay: .04s; }
.picker-level:nth-child(2) { animation-delay: .09s; }
.picker-level:nth-child(3) { animation-delay: .14s; }
.picker-level:nth-child(4) { animation-delay: .19s; }
.picker-level:nth-child(5) { animation-delay: .24s; }

.picker-level-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.picker-level-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 15px;
  font: 800 18px/1 ui-monospace, monospace;
  letter-spacing: .02em;
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(74, 56, 34, .75);
}
.lv-n5 { background: linear-gradient(145deg, #6b8a5e, #4f6d45); }
.lv-n4 { background: linear-gradient(145deg, #2f8a87, #1f5c5c); }
.lv-n3 { background: linear-gradient(145deg, #c0952f, #9a7726); }
.lv-n2 { background: linear-gradient(145deg, #c96442, #a9492b); }
.lv-n1 { background: linear-gradient(145deg, #8a5e90, #5e3f63); }

.picker-level-title {
  margin: 0;
  font-size: 15px; font-weight: 800; color: var(--ink);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.picker-level-count {
  font: 600 11px ui-monospace, monospace;
  color: var(--muted);
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
}
.picker-level-desc { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- lưới thẻ bài ---------- */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

.lesson-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 15px;
  text-align: left;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  transition: transform .18s var(--ease-spring), border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.lesson-card:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 100, 66, .5);
  background: var(--surface-hi);
  box-shadow: 0 14px 30px -18px rgba(74, 56, 34, .55);
}
.lesson-card:active { transform: translateY(0) scale(.99); }

.lesson-no {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  font: 800 15px/1 ui-monospace, monospace;
  color: var(--accent-deep);
}
.lesson-card:hover .lesson-no { background: rgba(201, 100, 66, .12); border-color: rgba(201, 100, 66, .35); }

.lesson-main { flex: 1; min-width: 0; }
.lesson-title {
  font-size: 13px; font-weight: 700; line-height: 1.4;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-stats {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 7px;
}
.lesson-stat {
  font: 600 10px ui-monospace, monospace;
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--paper-deep);
}
.lesson-stat.is-thin { color: #8f6a1c; background: rgba(192, 149, 47, .14); }

/* Bài đang học */
.lesson-card.is-current {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(201, 100, 66, .10), rgba(201, 100, 66, .03));
}
.lesson-card.is-current .lesson-no { background: var(--accent); color: #fff; border-color: transparent; }
.lesson-now {
  position: absolute; top: 10px; right: 12px;
  font: 700 9px/1 ui-monospace, monospace;
  letter-spacing: .06em;
  color: var(--accent-deep);
}

.picker-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.picker-empty i { display: block; font-size: 26px; margin-bottom: 10px; color: var(--line-strong); }

@media (max-width: 720px) {
  .picker-top { padding: 14px 16px; }
  .picker-body { padding: 18px 16px 48px; }
  .picker-grid { grid-template-columns: 1fr; }
  .picker-search { width: 100%; }
  .picker-brand p { display: none; }
}

/* ==========================================================================
   17. TRẠNG THÁI ĐANG CHỜ — làm mờ nội dung cũ + thẻ báo đang chạy
   Dùng khi nhờ AI soạn bộ đề mới: người học thấy ngay là hệ thống đang làm
   việc chứ không phải treo, và không bấm nhầm vào đề cũ sắp bị thay.
   ========================================================================== */

.deck-content.is-busy {
  /* !important la BAT BUOC o day: #slideContent dang chay animation sceneIn voi
     fill: both, ma gia tri cuoi cua animation de len khai bao CSS thuong.
     Theo thu tu cascade, chi khai bao !important cua tac gia moi thang animation. */
  opacity: .3 !important;
  filter: blur(2px) !important;
  pointer-events: none;
  user-select: none;
  transition: opacity .25s var(--ease-out), filter .25s var(--ease-out);
}

.deck-busy {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.deck-busy-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100% - 48px));
  padding: 16px 22px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(250, 247, 242, .97);
  box-shadow: 0 20px 48px -22px rgba(74, 56, 34, .6);
  animation: dockIn .3s var(--ease-spring) both;
}

.deck-busy-card > i {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--accent);
}

.deck-busy-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.deck-busy-text strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.deck-busy-text span { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Nút đang khoá trong lúc chờ */
.ctl:disabled i { opacity: .6; }

/* ==========================================================================
   18. SPOTLIGHT TUONG TAC — chon dap an, bam the de mo
   ========================================================================== */

/* Dap an trong spotlight la NUT bam duoc, khong con la the tinh */
.spot-opt {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s var(--ease-spring), border-color .18s var(--ease-out),
              background-color .18s var(--ease-out);
}
.spot-opt:hover:not(.is-locked) {
  border-color: rgba(201, 100, 66, .5);
  background: var(--surface);
  transform: translateX(2px);
}
.spot-opt:active:not(.is-locked) { transform: scale(.99); }
.spot-opt.is-locked { cursor: default; }

.spot-opt.is-correct {
  border-color: var(--sage-deep);
  background: rgba(107, 138, 94, .14);
  color: #33512b;
  font-weight: 700;
}
.spot-opt.is-correct > span { background: var(--sage-deep); color: #fff; }

.spot-opt.is-wrong {
  border-color: var(--clay);
  background: rgba(194, 90, 76, .12);
  color: #8b3628;
}
.spot-opt.is-wrong > span { background: var(--clay-deep); color: #fff; }

.spot-result {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: 12px; text-align: left;
  font-size: 13px;
}
.spot-result.hidden { display: none; }
.spot-result strong { font-size: 14px; }
.spot-result span { color: var(--ink-2); line-height: 1.55; }
.spot-result.is-ok { background: rgba(107, 138, 94, .12); border: 1px solid rgba(107, 138, 94, .4); }
.spot-result.is-ok strong { color: #33512b; }
.spot-result.is-no { background: rgba(194, 90, 76, .1); border: 1px solid rgba(194, 90, 76, .4); }
.spot-result.is-no strong { color: #8b3628; }

/* The noi dung: bam vao la mo spotlight */
.deck-content [id^="voc-"],
.deck-content [id^="kan-"],
.deck-content [id^="ex-"],
.deck-content [id^="dia-"],
.deck-content [id^="card-"] { cursor: zoom-in; }

/* Anh lay tu Pixabay — ghi nguon o goc */
.spot-image-pix { position: relative; }
.spot-credit {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(31, 29, 25, .62);
  color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .03em;
}

/* ==========================================================================
   BẢNG PHẤN — Sensei viết, vẽ và khoanh đỏ lên màn hình
   ========================================================================== */

/* Lớp vẽ phủ kín màn hình. Nằm ĐÈ lên nội dung nhưng không ăn chuột, nên
   học viên vẫn bấm được vào thẻ bên dưới như thường. */
.bang-ve-lop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 35;            /* trên nội dung, dưới spotlight (60) và bảng chọn bài */
  pointer-events: none;
  overflow: visible;
}

.bang-duong {
  fill: none;
  stroke: #d64545;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .88;
  filter: drop-shadow(0 1px 1px rgba(214, 69, 69, .25));
}
.bang-net-gach_chan .bang-duong { stroke-width: 3; }
.bang-net-mui_ten .bang-duong { stroke: #b0791f; }

@keyframes bangVeRa { to { stroke-dashoffset: 0; } }
@keyframes bangHienSo { from { opacity: 0; } to { opacity: .75; } }

/* -------------------------------------------------------- viết chữ Hán */
.bang-kanji {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
}
.bang-kanji-o {
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  aspect-ratio: 1;
  max-width: 190px;
  margin: 0 auto;
}
.bang-kanji-svg { width: 100%; height: 100%; display: block; }

/* Ô kẻ như vở tập viết — để thấy nét nằm ở phần nào của ô */
.bang-kanji-ke line {
  stroke: rgba(255, 255, 255, .16);
  stroke-width: .7;
  stroke-dasharray: 3 3;
}
.bang-kanji-duong {
  fill: none;
  stroke: #fdfaf4;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bang-kanji-chiso {
  font-size: 7px;
  font-weight: 700;
  fill: #6ee7b7;
  opacity: 0;
  paint-order: stroke;
  stroke: rgba(15, 40, 30, .85);
  stroke-width: 2.2;
}
.bang-kanji-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.bang-kanji-ten {
  font-size: 13px;
  font-weight: 700;
  color: #fdfaf4;
}
.bang-kanji-lai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  color: #fdfaf4;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: background .15s ease;
}
.bang-kanji-lai:hover { background: rgba(255, 255, 255, .2); }

/* ------------------------------------------------------ bảng phấn tự do */
.bang-phan {
  position: fixed;
  right: 14px;
  top: 76px;
  bottom: 84px;
  width: min(320px, calc(100vw - 28px));
  z-index: 44;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  /* Xanh bảng học, hơi ngả vàng cho hợp tông be của cả app */
  background: linear-gradient(160deg, #2f4038, #26332d);
  border: 3px solid #7a5c38;
  box-shadow: 0 24px 60px -24px rgba(50, 38, 22, .75);
  animation: bangTruotVao .32s var(--ease-spring, ease-out) both;
}
@keyframes bangTruotVao {
  from { opacity: 0; transform: translateX(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.bang-phan.hidden { display: none; }

.bang-phan-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #efe6d2;
  background: rgba(0, 0, 0, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.bang-phan-nut { display: flex; gap: 4px; }
.bang-phan-nut button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: #efe6d2;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  font-size: 11px;
  transition: background .15s ease;
}
.bang-phan-nut button:hover { background: rgba(255, 255, 255, .2); }

.bang-phan-than {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

/* Chữ phấn: hơi nghiêng, viền mềm — không dùng font chữ tay vì phải tải thêm
   và nhiều font chữ tay vỡ dấu tiếng Việt. */
.bang-dong {
  color: #f4efe2;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .015em;
  margin-bottom: 7px;
  text-shadow: 0 0 6px rgba(255, 255, 255, .18);
  animation: bangChuHien .3s ease-out both;
}
@keyframes bangChuHien {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.bang-dong-dam {
  font-size: 17px;
  font-weight: 700;
  color: #ffe9a8;
  text-shadow: 0 0 8px rgba(255, 233, 168, .3);
}
.bang-dong-nhat { font-size: 12.5px; opacity: .72; }

@media (max-width: 860px) {
  /* Điện thoại: bảng nằm dưới đáy, không che mất bài học */
  .bang-phan {
    right: 8px;
    left: 8px;
    top: auto;
    bottom: 72px;
    width: auto;
    max-height: 46vh;
  }
}

.spot-viet-net { margin-bottom: 10px; }
.spot-viet-net .bang-kanji { background: rgba(60,45,28,.055); border-color: rgba(60,45,28,.12); }
.spot-viet-net .bang-kanji-o { background: rgba(60,45,28,.05); }
.spot-viet-net .bang-kanji-duong { stroke: #3b2f1e; }
.spot-viet-net .bang-kanji-ke line { stroke: rgba(60,45,28,.22); }
.spot-viet-net .bang-kanji-chiso { fill: #b0791f; stroke: rgba(253,250,244,.9); }
.spot-viet-net .bang-kanji-ten { color: #3b2f1e; }
.spot-viet-net .bang-kanji-lai { color: #5b4a33; background: rgba(60,45,28,.07); border-color: rgba(60,45,28,.16); }

/* Bảng mở thì thu hẹp sân khấu lại, không để bảng đè lên cột thẻ bên phải */
body.co-bang .deck-canvas {
  max-width: none;
  margin: 0;
  padding-right: calc(320px + 26px);
}
@media (max-width: 860px) {
  /* Điện thoại: bảng nằm dưới đáy nên chỉ cần chừa chiều cao, không chừa chiều ngang */
  body.co-bang .deck-canvas {
    padding-right: 28px;
    padding-bottom: calc(46vh + 16px);
  }
}

/* Thẻ trái mở thì đẩy sân khấu sang, không để thẻ đè lên bài học */
body.co-the-trai .deck-canvas {
  max-width: none;
  margin: 0;
  padding-left: calc(min(360px, 38vw) + 26px);
}

@media (max-width: 860px) {
  /* Điện thoại: không đủ bề ngang cho hai cột, thẻ xuống nằm dưới đáy.
     Mũi tên cũng tắt luôn — kéo ngang màn hình hẹp thì rối chứ không rõ hơn. */
  .spot-dock {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 72px;
    width: auto;
    max-height: 52vh;
  }
  body.co-the-trai .deck-canvas {
    padding-left: 28px;
    padding-bottom: calc(52vh + 16px);
  }
}