/* css/hidden-mission.css — Nhiệm Vụ Ẩn: modal cuộn giấy tiên hiệp
   [Sub-sprint B 2026-07-29]
   Màu sắc HARDCODE có chủ đích (không dùng var(--xxx)) — cuộn giấy là 1 asset ảnh cố định
   màu (nền đen + giấy be/xám), không đổi theo theme sáng/tối của site, giống pattern các
   overlay ăn mừng khác dùng GIF nền cố định màu. */

.hm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998; /* Quy ước có sẵn (ai-lesson.css, ydh-dashboard.css, luyen-viet.css...) — ngay
                      dưới AI Buddy 100000, để buddy.show() lúc submit thành công vẫn nổi lên được */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,10,35,0.92) 0%, rgba(5,3,10,0.97) 100%);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 16px;
}
.hm-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.hm-scroll-wrap {
  position: relative;
  /* [Fix S149 — audit responsive] width cũ chỉ ràng buộc theo CHIỀU RỘNG (vw) — trên landscape rộng-
     nhưng-thấp, width có thể chạm trần 780px → height suy ra từ aspect-ratio (816:510≈1.6) vượt hẳn
     viewport thật, tràn cả nút đóng. Thêm số hạng thứ 3 tính "width tương ứng nếu bị giới hạn bởi
     CHIỀU CAO khả dụng" (trừ 32px padding overlay) — min() tự chọn số nhỏ nhất trong 3, không đụng
     transform (đã có rule cứng cấm ở comment dưới, sẽ phá mix-blend-mode). */
  width: min(94vw, 780px, calc((100vh - 32px) * 816 / 510));
  width: min(94vw, 780px, calc((100dvh - 32px) * 816 / 510));
  aspect-ratio: 816 / 510;
  /* [Fix nền đen — bản sửa lại 2026-07-29] TUYỆT ĐỐI không đặt transform/opacity(<1)/filter
     lên phần tử này — bất kỳ property nào trong nhóm đó tạo 1 stacking context MỚI, chặn
     mix-blend-mode của .hm-scroll-video (con) "nhìn xuyên" tới nền thật của .hm-overlay (ông).
     Bản đầu tiên dùng transform:scale() để tạo hiệu ứng "pop in" → đúng bẫy này → phải chèn
     tạm 1 lớp .hm-scroll-bg giả phía sau cho video có cái để hòa — nhưng lớp giả (gradient đặc
     màu) KHÔNG BAO GIỜ khớp 100% với nền thật của .hm-overlay (rgba bán trong suốt, lộ trang
     phía sau) → lộ khung hình chữ nhật mờ (Founder phát hiện qua ảnh chụp thật, đúng bug: chỉ
     "làm tối đi để hòa quyện" chứ không ẩn thật). Bỏ hẳn transform + lớp giả → blend-mode chạm
     THẲNG tới nền thật, khớp tuyệt đối vì là CÙNG 1 lớp sơn, không phải 2 lớp xấp xỉ nhau. */
}

.hm-scroll-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* Video H.264 không hỗ trợ kênh alpha — nền đen GIF gốc bị "nướng chết" vào từng frame khi
     convert mp4. mix-blend-mode:screen biến đen → trong suốt hoàn toàn (đo thật bằng Python
     PIL: nền video là (0,0,0) tuyệt đối), sáng/vàng giữ nguyên — composite THẲNG với nền thật
     của .hm-overlay phía sau (không qua lớp giả nào, xem comment .hm-scroll-wrap). */
  mix-blend-mode: screen;
}

.hm-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.hm-close:hover { background: rgba(220,60,60,0.75); }

/* Vùng nội dung — overlay lên đúng dải giấy trắng giữa khung hình cuộn giấy.
   [Fix mobile] justify-content:center KẾT HỢP overflow-y:auto là bẫy CSS flexbox kinh điển:
   khi nội dung cao hơn khung (câu sắp xếp nhiều từ + màn hình nhỏ), phần tràn NỬA TRÊN bị đẩy
   ra ngoài vùng scroll TỚI ĐƯỢC (center kéo content che khuất về cả 2 phía, nhưng overflow:auto
   chỉ cho cuộn xuống DƯỚI từ vị trí center, không cuộn NGƯỢC LÊN phần đã tràn phía trên) — câu
   hỏi/hướng dẫn ở đầu bị cắt mất hẳn, không cách nào xem lại. Dùng flex-start (neo trên) để
   LUÔN đọc được từ đầu, cuộn xuống nếu tràn — an toàn tuyệt đối, đánh đổi nhỏ: nội dung NGẮN
   (thông báo lỗi...) không còn nằm giữa khung mà neo lên trên (chấp nhận được, vẫn đẹp).
   [Fix lẹm đầu rồng 2026-07-29] Đo pixel THẬT (Python PIL) trên frame video tại PAUSE_AT: dải
   giấy trắng chạy y=138→379 (/510), nhưng đầu rồng trang trí THÒNG XUỐNG tới tận y≈140 — tức
   gần như CHẠM ĐÁY dải giấy. top:25% (127px) cũ nằm ngay TRONG vùng rồng → chữ đè lên rồng.
   Đẩy xuống top:32% (~163px) để có khoảng đệm ~23px dưới cằm rồng trước khi chữ bắt đầu.
   [Fix lẹm đáy 2026-07-29 #2] bottom:24% (~122px từ đáy) cũ CỐ Ý lỏng hơn mép giấy thật
   (mép giấy thật ở 510-379=131px từ đáy, tức 25,7%) để có thêm chiều cao — nhưng hệ quả: khi
   cuộn tới cuối (quiz 4 đáp án), phần overflow cuối cùng lộ ra ngoài mép giấy, đúng chỗ chỉ có
   nền tối/glow phía sau chứ KHÔNG phải giấy → nút trắng nổi bật lên nền tối, "lẹm miếng trắng"
   Founder phát hiện. Siết lại bottom:26% (an toàn hơn mép thật 25,7%) — đổi lại 1 chút chiều
   cao khả dụng để đảm bảo KHÔNG BAO GIỜ render ra ngoài mép giấy thật, dù phải cuộn nhiều hơn. */
/* [Fix lẹm/thanh cuộn thô 2026-07-29] Founder chụp màn hình thật (Windows Chrome) cho thấy
   thanh cuộn dọc mặc định (to, xám, chiếm chỗ layout thật — KHÁC hẳn overlay-scrollbar mảnh
   của Chromium headless dùng khi tôi tự test, nên trước đó không phát hiện ra) đứng quá sát
   viền phải cuộn giấy thật — đo pixel: right:7% cũ chỉ cách mép giấy thật ~7px, không đủ chỗ
   cho BẤT KỲ thanh cuộn nào (kể cả loại mảnh) mà không lấn vào khung trang trí. Nới lên 8%
   (vẫn là % tương đối theo khung video cố định, KHÔNG hardcode px) + tự vẽ lại thanh cuộn
   mảnh (~5px, xem 2 rule ::-webkit-scrollbar/scrollbar-* bên dưới) tạo đủ khoảng đệm an toàn. */
.hm-content {
  position: absolute;
  top: 32%;
  bottom: 26%;
  left: 8%;
  right: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 1.2vw, 10px);
  overflow-y: auto;
  overflow-x: hidden; /* nội dung luôn canh giữa vừa khít bề ngang — không cần cuộn ngang, ẩn hẳn phòng lệch 1px */
  color: #241a0f;
  text-align: center;
  padding: 4px 6px;
  /* Thanh cuộn mảnh, màu hòa với giấy cuộn (Firefox) — cặp với ::-webkit-scrollbar bên dưới cho Chrome/Edge/Safari */
  scrollbar-width: thin;
  scrollbar-color: rgba(74,58,32,0.45) transparent;
}
/* Chrome/Edge/Safari — thanh cuộn mảnh trong suốt khi không dùng tới, hiện mờ khi cuộn/hover,
   cùng tông màu chữ (#4a3a20) với nội dung cuộn giấy thay vì xám mặc định của hệ điều hành. */
.hm-content::-webkit-scrollbar { width: 5px; }
.hm-content::-webkit-scrollbar-track { background: transparent; }
.hm-content::-webkit-scrollbar-thumb {
  background: rgba(74,58,32,0.35);
  border-radius: 999px;
}
.hm-content::-webkit-scrollbar-thumb:hover { background: rgba(74,58,32,0.55); }

.hm-error, .hm-done-msg {
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.5;
}

.hm-instr {
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  font-weight: 700;
  color: #4a3a20;
}

.hm-vi-hint {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
  color: #6b5a3a;
  font-style: italic;
}

/* ── Sắp xếp câu ─────────────────────────────────────────────────────── */
.hm-arrange-target {
  min-height: clamp(32px, 6vw, 44px);
  width: 100%;
  border: 1.5px dashed rgba(74,58,32,0.4);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: clamp(0.95rem, 3vw, 1.3rem);
  font-weight: 700;
}
.hm-arrange-target:empty::before {
  content: attr(data-empty);
  font-size: clamp(0.62rem, 1.5vw, 0.75rem);
  font-weight: 400;
  color: rgba(74,58,32,0.55);
  font-style: italic;
}
.hm-target-tok {
  padding: 2px 4px;
  border-bottom: 2px solid #b8842f;
}

.hm-arrange-pool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  width: 100%;
}
.hm-chip {
  font-family: inherit;
  font-size: clamp(0.85rem, 2.6vw, 1.1rem);
  font-weight: 700;
  padding: clamp(3px, 1vw, 7px) clamp(8px, 2vw, 14px);
  border-radius: 8px;
  border: 1px solid rgba(74,58,32,0.35);
  background: rgba(255,255,255,0.55);
  color: #241a0f;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.hm-chip:hover:not(.used) { transform: translateY(-2px); background: rgba(255,255,255,0.85); }
.hm-chip.used { opacity: 0.25; pointer-events: none; }

/* ── Điền chỗ trống ──────────────────────────────────────────────────── */
.hm-fill-sentence {
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.6;
}
.hm-blank-mark {
  display: inline-block;
  min-width: 2.2em;
  border-bottom: 2px solid #b8842f;
  color: #b8842f;
}
.hm-fill-input {
  width: min(240px, 80%);
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(74,58,32,0.4);
  background: rgba(255,255,255,0.6);
  color: #241a0f;
  font-family: inherit;
}
.hm-fill-input:focus { outline: none; border-color: #b8842f; background: rgba(255,255,255,0.9); }

/* ── Dịch câu ────────────────────────────────────────────────────────── */
.hm-source-vi { font-size: clamp(0.9rem, 2.6vw, 1.15rem); } /* câu nguồn tiếng Việt không cần cỡ chữ to như chữ Hán */
.hm-translate-input {
  width: 92%;
  max-width: 420px;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(74,58,32,0.4);
  background: rgba(255,255,255,0.6);
  color: #241a0f;
  resize: none;
}
.hm-translate-input:focus { outline: none; border-color: #b8842f; background: rgba(255,255,255,0.9); }
.hm-ai-feedback {
  font-size: clamp(0.75rem, 1.9vw, 0.9rem);
  color: #3a2c15;
  line-height: 1.55;
  max-width: 92%;
}
.hm-ai-tip {
  font-size: clamp(0.7rem, 1.7vw, 0.82rem);
  color: #6b5a3a;
  font-style: italic;
  line-height: 1.5;
}

/* ── Trắc nghiệm văn hóa - lịch sử ───────────────────────────────────── */
/* [Đo thật 2026-07-29] 4 option full-width + câu hỏi + instr cao hơn hẳn arrange/fillblank
   (vốn chỉ 1 dòng chip) — vùng giấy hiển thị chỉ ~215px, nội dung quiz đo được ~317px. Đã siết
   padding/gap tối đa có thể mà vẫn đọc được (KHÔNG đổi top/bottom của .hm-content — đó là toạ độ
   cố định theo hình học video, đổi riêng cho quiz sẽ lệch pattern chung mọi dạng bài). Còn dư
   vẫn cuộn được bình thường (.hm-content đã có overflow-y:auto từ trước, cùng cơ chế arrange
   câu dài) — chấp nhận được, không phải bug.*/
/* [Founder yêu cầu 2026-07-29] Chữ Hán gốc của thành ngữ/tục ngữ/thuật ngữ liên quan — xếp
   CÙNG 1 dòng với pinyin (flex, không tách dòng riêng) để không tốn thêm chiều cao quý giá. */
.hm-quiz-zh {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 800;
  color: #241a0f;
}
.hm-quiz-py {
  font-size: clamp(0.65rem, 1.5vw, 0.76rem);
  font-weight: 400;
  font-style: italic;
  color: #6b5a3a;
}
.hm-quiz-question {
  font-size: clamp(0.8rem, 2.1vw, 0.96rem);
  font-weight: 700;
  line-height: 1.35;
  max-width: 96%;
}
.hm-quiz-options {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.7vw, 5px);
  width: 100%;
  max-width: 480px;
}
.hm-quiz-opt {
  font-family: inherit;
  font-size: clamp(0.74rem, 1.8vw, 0.86rem);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: clamp(3px, 0.8vw, 5px) clamp(7px, 1.6vw, 10px);
  border-radius: 7px;
  border: 1.5px solid rgba(74,58,32,0.35);
  background: rgba(255,255,255,0.55);
  color: #241a0f;
  cursor: pointer;
  line-height: 1.25;
  transition: transform 0.12s ease, background 0.12s ease;
}
.hm-quiz-opt:hover:not(.picked) { transform: translateY(-1px); background: rgba(255,255,255,0.85); }
.hm-quiz-opt-letter {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(74,58,32,0.15);
  color: #4a3a20;
  font-weight: 700;
  font-size: 0.66rem;
  display: flex; align-items: center; justify-content: center;
}
.hm-quiz-opt.picked { cursor: default; }
.hm-quiz-opt.picked:not(.correct):not(.wrong) { opacity: 0.45; }
.hm-quiz-opt.correct { border-color: #1e7d32; background: rgba(30,125,50,0.18); }
.hm-quiz-opt.correct .hm-quiz-opt-letter { background: #1e7d32; color: #fff; }
.hm-quiz-opt.wrong { border-color: #b3261e; background: rgba(179,38,30,0.15); }
.hm-quiz-opt.wrong .hm-quiz-opt-letter { background: #b3261e; color: #fff; }
.hm-quiz-explain {
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  color: #3a2c15;
  line-height: 1.5;
  max-width: 94%;
}

/* ── Phát âm ─────────────────────────────────────────────────────────── */
.hm-mic-btn {
  font-family: inherit;
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  font-weight: 700;
  padding: clamp(6px, 1.4vw, 9px) clamp(14px, 3vw, 22px);
  border-radius: 999px;
  border: 1px solid rgba(74,58,32,0.35);
  background: rgba(255,255,255,0.55);
  color: #241a0f;
  cursor: pointer;
}
.hm-mic-btn:hover:not(:disabled) { background: rgba(255,255,255,0.85); }
.hm-mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hm-pron-result {
  font-size: clamp(0.75rem, 1.9vw, 0.9rem);
  line-height: 1.5;
  max-width: 92%;
}
.hm-pron-result--ok   { color: #1e7d32; }
.hm-pron-result--miss { color: #6b5a3a; }

/* ── Actions + result ────────────────────────────────────────────────── */
.hm-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.hm-done-btn, .hm-reset-btn {
  font-family: inherit;
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  padding: clamp(5px, 1.2vw, 8px) clamp(12px, 3vw, 20px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.hm-done-btn {
  background: linear-gradient(135deg, #d4a55c, #b8842f);
  color: #2a1a05;
  box-shadow: 0 3px 0 #8b5e1f, 0 5px 12px rgba(184,132,47,0.4);
}
.hm-done-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.hm-done-btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #8b5e1f; }
.hm-reset-btn {
  background: rgba(74,58,32,0.12);
  color: #4a3a20;
  border: 1px solid rgba(74,58,32,0.3);
}

.hm-result { font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 800; }
.hm-result--ok   { color: #1e7d32; }
.hm-result--miss { color: #6b5a3a; }
.hm-result-reward { display: block; font-size: clamp(0.85rem, 2.4vw, 1.05rem); color: #b8842f; margin-top: 4px; }
/* [Fix 2026-07-29] Quiz chọn sai KHÔNG thưởng — màu trung tính, KHÔNG dùng màu vàng của
   .hm-result-reward (dễ hiểu lầm vẫn có Linh Thạch dù chỉ là câu động viên suông). */
.hm-result-reward-miss { display: block; font-size: clamp(0.8rem, 2.2vw, 0.98rem); color: #6b5a3a; font-style: italic; margin-top: 4px; }
.hm-result-answer { font-size: clamp(0.72rem, 1.8vw, 0.88rem); color: #4a3a20; line-height: 1.5; }

/* [Fix 2026-07-29] KHÔNG override top/bottom/left/right riêng cho mobile — đây là % của
   .hm-scroll-wrap (khung tỉ lệ cố định 816:510, chỉ co giãn ĐỀU theo min(94vw,780px)), bố cục
   BÊN TRONG video (dải giấy/đầu rồng) không đổi tỉ lệ theo breakpoint → % phải giống hệt mọi
   kích thước màn hình. Bản cũ override 26%/26%/8%/8% khác hẳn desktop 32%/24%/7%/7% là lỗi tự
   tạo thêm (tái diễn đúng bug lẹm đầu rồng nhưng ở mobile). gap đã responsive qua clamp() ở rule gốc. */