/* 🎯 Định vị đáp án — tô bằng chứng + cặp paraphrase (tông light skeuo, hợp bộ hiện có) */

:root{
  --alp-ev:#e7e0ff; --alp-ev-line:#8b6ff0;
  --alp-c1:#cdebd6; --alp-c2:#ffe0b3; --alp-c3:#cfe4ff;
  --alp-c4:#ffd6e2; --alp-c5:#e5dcc3; --alp-c6:#d5f0ee;
}

/* ── highlight trong bài đọc ───────────────────────────────── */
.alpha-highlightable-content mark.alp-ev,
.alpha-highlightable-content mark.alp-kw{
  background:transparent; color:inherit; padding:0;
  border-radius:3px; transition:background-color .18s ease, box-shadow .18s ease;
}
/* mặc định TẮT — chỉ sáng khi bật Định vị cho đúng câu */
.alp-on mark.alp-ev[data-q]{ background:var(--alp-ev); box-shadow:0 0 0 1px rgba(139,111,240,.25); }
.alp-on mark.alp-kw.alp-c1{ background:var(--alp-c1) }
.alp-on mark.alp-kw.alp-c2{ background:var(--alp-c2) }
.alp-on mark.alp-kw.alp-c3{ background:var(--alp-c3) }
.alp-on mark.alp-kw.alp-c4{ background:var(--alp-c4) }
.alp-on mark.alp-kw.alp-c5{ background:var(--alp-c5) }
.alp-on mark.alp-kw.alp-c6{ background:var(--alp-c6) }

/* nháy khi vừa nhảy tới */
@keyframes alpFlash{ 0%,100%{box-shadow:0 0 0 1px rgba(139,111,240,.25)} 40%{box-shadow:0 0 0 4px rgba(139,111,240,.45)} }
.alp-flash{ animation:alpFlash .9s ease 2 }

/* ── ô SỐ CÂU đứng trước chỗ tô ─────────────────────────────
   Ô vuông bo góc, nền fill tím, số trắng — bấm được để nhảy tới câu bên phải. */
.alp-no{
  display:none;                       /* chỉ hiện khi bật định vị */
  min-width:21px; height:21px; padding:0 5px; margin-right:6px;
  border-radius:4px;                  /* vuông vức, dứt khoát */
  background:#3b1e8f;                 /* tím đậm, đặc, không nhạt nhoà */
  color:#fff;
  font:800 12px/21px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:.01em; text-align:center;
  vertical-align:2px; cursor:pointer; user-select:none;
  box-shadow:0 1px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .12s ease, transform .1s ease, box-shadow .12s ease;
}
.alp-on .alp-no{ display:inline-block }
.alp-no:hover{ background:#2a1470; transform:translateY(-1px); box-shadow:0 3px 6px rgba(59,30,143,.4) }
.alp-no:active{ transform:translateY(0) }
.alp-no.on{ background:#0f172a; box-shadow:0 0 0 2px #a78bfa, 0 1px 0 rgba(0,0,0,.3) }

/* ── CHẾ ĐỘ TẬP TRUNG: làm mờ khối không chứa câu đang xem (giống DOL) ── */
.alp-focus [data-qs]{ transition:opacity .2s ease, filter .2s ease }
.alp-focus p, .alp-focus li, .alp-focus td, .alp-focus h3{
  opacity:.34; filter:grayscale(.55); transition:opacity .2s ease, filter .2s ease;
}
/* ⚠️ LOẠI TRỪ khối chứa GIẢI THÍCH của câu dragdrop/điền từ nhúng trong bài đọc:
   opacity đặt ở phần tử CHA đè cả cây con (con set opacity:1 cũng vô ích), nên phải
   miễn dim từ gốc bằng :has() — đoạn nào đang mở popup giải thích thì giữ nguyên.
   Không có :has() thì popup vẫn mờ như cũ, chấp nhận với trình duyệt cổ. */
.alp-focus p:has(.me-question-explanation, .alphaExplanationContent),
.alp-focus li:has(.me-question-explanation, .alphaExplanationContent),
.alp-focus td:has(.me-question-explanation, .alphaExplanationContent),
.alp-focus h3:has(.me-question-explanation, .alphaExplanationContent){
  opacity:1 !important; filter:none !important;
}
/* popup là div đứng riêng (không nằm trong p/li/td) thì tự nó cũng không được mờ */
.alp-focus .me-question-explanation, .alp-focus .alphaExplanationContent,
.alp-focus .me-question-explanation *, .alp-focus .alphaExplanationContent *{
  filter:none !important;
}
.alp-focus [data-qs].alp-hit{
  opacity:1; filter:none;
  background:rgba(139,111,240,.05); border-radius:8px;
  box-shadow:0 0 0 6px rgba(139,111,240,.05);
}

/* ── hộp Paraphrasing trong thẻ lời giải ───────────────────── */
.alp-para{
  margin:10px 0 4px; border:1px solid #e2e5ea; border-radius:10px; background:#fbfcfd;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.04); overflow:hidden;
}
.alp-para-head{
  display:flex; align-items:center; gap:8px; padding:8px 12px; font-weight:600; font-size:13px;
  color:#1f2937; background:linear-gradient(#f7f9fb,#eef2f6); border-bottom:1px solid #e2e5ea;
}
.alp-para-ico{ color:#6b7280 }
.alp-para-body{ padding:10px 12px; display:flex; flex-direction:column; gap:7px }
.alp-pair{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.alp-arrow{ color:#9aa1ab; font-size:12px }
.alp-chip{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:13px; line-height:1.7;
  border:1px solid rgba(0,0,0,.07);
}
.alp-chip.alp-c1{ background:var(--alp-c1) } .alp-chip.alp-c2{ background:var(--alp-c2) }
.alp-chip.alp-c3{ background:var(--alp-c3) } .alp-chip.alp-c4{ background:var(--alp-c4) }
.alp-chip.alp-c5{ background:var(--alp-c5) } .alp-chip.alp-c6{ background:var(--alp-c6) }

/* nút Định vị.
   ⚠️ Toàn bộ hình dạng nút nằm ở INLINE STYLE trong alpha-locate.php (mở đầu bằng
   `all:unset!important`) vì popup giải thích của theme ép cỡ chữ + màu rất mạnh.
   Ở đây CHỈ để lại hover/focus. Tuyệt đối không thêm lại `::before` — trước đây nó vẽ
   chấm thứ hai lạc chỗ (element không còn position:relative sau `all:unset`), nhìn như
   một viên xám dính bên cạnh chấm thật. Chấm trạng thái là <span class="alp-dot">. */
.alp-dinhvi:hover{ background:#f2f6ff !important }
.alp-dinhvi:focus-visible{ outline:2px solid #3b5bdb !important; outline-offset:2px !important }

/* chip cặp paraphrase cũng phải ghim màu chữ (popup ép trắng y hệt) */
.alp-chip{ color:#1f2937 !important; opacity:1 !important }
.alp-para-head{ color:#1f2937 !important }
.alp-arrow{ color:#9aa1ab !important }

/* ── DARK MODE ───────────────────────────────────────────────
   ⚠️ Theme có luật `html.ae-dark-mode.single-set_of_question * { color:… }` — dấu `*`
   ép TRẮNG mọi chữ, nên nền pastel sáng sẽ thành chữ-trắng-trên-nền-sáng = mất chữ.
   Cách chữa: trong dark KHÔNG dùng nền sáng nữa, đổi sang nền TỐI CÓ SẮC + chữ sáng,
   và ghi đè `color` bằng !important để thắng luật `*` kia. */

html.ae-dark-mode  .alp-on mark.alp-ev[data-q],
html.alpha-dark-mode .alp-on mark.alp-ev[data-q]{
  background:#39306b !important; color:#efeaff !important;
  box-shadow:0 0 0 1px rgba(167,139,250,.4) !important;
}
/* 6 màu bản tối — vẫn phân biệt được cặp paraphrase mà không chói */
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c1, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c1,
html.ae-dark-mode  .alp-chip.alp-c1,           html.alpha-dark-mode .alp-chip.alp-c1{ background:#14532d !important; color:#d7f7e2 !important }
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c2, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c2,
html.ae-dark-mode  .alp-chip.alp-c2,           html.alpha-dark-mode .alp-chip.alp-c2{ background:#7c3a12 !important; color:#ffe6c9 !important }
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c3, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c3,
html.ae-dark-mode  .alp-chip.alp-c3,           html.alpha-dark-mode .alp-chip.alp-c3{ background:#1e3a8a !important; color:#dbe8ff !important }
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c4, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c4,
html.ae-dark-mode  .alp-chip.alp-c4,           html.alpha-dark-mode .alp-chip.alp-c4{ background:#83184a !important; color:#ffdcea !important }
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c5, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c5,
html.ae-dark-mode  .alp-chip.alp-c5,           html.alpha-dark-mode .alp-chip.alp-c5{ background:#4d4420 !important; color:#f3ecd2 !important }
html.ae-dark-mode  .alp-on mark.alp-kw.alp-c6, html.alpha-dark-mode .alp-on mark.alp-kw.alp-c6,
html.ae-dark-mode  .alp-chip.alp-c6,           html.alpha-dark-mode .alp-chip.alp-c6{ background:#134e4a !important; color:#cdf3ef !important }

html.ae-dark-mode  .alp-chip, html.alpha-dark-mode .alp-chip{ border-color:rgba(255,255,255,.14) !important }

/* ô số: giữ tím đậm, viền sáng cho nổi trên nền đen */
html.ae-dark-mode  .alp-no, html.alpha-dark-mode .alp-no{
  background:#5b3ec8 !important; color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.5) !important;
}
html.ae-dark-mode  .alp-no.on, html.alpha-dark-mode .alp-no.on{
  background:#fff !important; color:#2a1470 !important;
  box-shadow:0 0 0 2px #a78bfa !important;
}

/* hộp Paraphrasing + nút */
html.ae-dark-mode  .alp-para, html.alpha-dark-mode .alp-para{ background:#161a20 !important; border-color:#2c323c !important }
html.ae-dark-mode  .alp-para-head, html.alpha-dark-mode .alp-para-head{
  background:linear-gradient(#20252e,#171b21) !important; border-color:#2c323c !important; color:#e8eaee !important;
}
html.ae-dark-mode  .alp-arrow, html.alpha-dark-mode .alp-arrow{ color:#8b93a1 !important }
/* ⚠️ Màu nút Định vị ở dark mode KHÔNG đặt được bằng CSS nữa: nút mang inline style
   `!important` (bắt buộc, xem alpha-locate.php) mà inline !important thắng cả stylesheet
   !important. Bảng màu dark nằm trong alpha-locate.js → MAU.toi, sơn lại bằng JS mỗi khi
   <html> đổi class dark. Thêm rule dark cho .alp-dinhvi ở đây là vô nghĩa. */

/* chế độ tập trung: nền đen mà mờ quá thì mất chữ — mờ nhẹ hơn, không xám hoá */
html.ae-dark-mode  .alp-focus p, html.ae-dark-mode  .alp-focus li,
html.ae-dark-mode  .alp-focus td, html.ae-dark-mode  .alp-focus h3,
html.alpha-dark-mode .alp-focus p, html.alpha-dark-mode .alp-focus li,
html.alpha-dark-mode .alp-focus td, html.alpha-dark-mode .alp-focus h3{
  opacity:.45; filter:none;
}
html.ae-dark-mode  .alp-focus [data-qs].alp-hit,
html.alpha-dark-mode .alp-focus [data-qs].alp-hit{
  background:rgba(124,92,232,.12); box-shadow:0 0 0 6px rgba(124,92,232,.12);
}

/* hộp chỉ có nút Định vị (câu không có cặp paraphrase) — gọn 1 dòng */
.alp-para-trong .alp-para-head{ border-bottom:none; border-radius:10px }
.alp-para-trong{ background:transparent; border-color:#e2e5ea }
html.ae-dark-mode .alp-para-trong{ background:transparent !important }