/* ═══════════════════════════════════════════════════════════════════
   vocab-level-widget.css — thẻ "Vốn từ của em" trên trang chủ + màn đo X-Lex
   Dùng token của theme.css, không hard-code màu. Xem vocab-level-widget.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Thẻ trên trang chủ ─────────────────────────────────────────── */
.lgvl-panel {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;
}
.lgvl-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.lgvl-title { font-weight: 700; color: var(--text); font-size: 1rem; }
.lgvl-spacer { flex: 1 1 auto; }
.lgvl-btn {
  appearance: none; cursor: pointer;
  background: var(--grad); color: #fff; border: 0;
  border-radius: 99px; padding: 9px 16px;
  font: inherit; font-weight: 600; font-size: .88rem;
  min-height: 40px;                        /* chạm được trên điện thoại */
}
.lgvl-btn.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--border2); font-weight: 500;
  padding: 7px 12px; min-height: 36px; font-size: .8rem;
}
.lgvl-btn:hover { filter: brightness(1.08); }

/* Số to + trình độ */
.lgvl-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.lgvl-size { font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.lgvl-size small { font-size: .95rem; font-weight: 600; color: var(--dim); margin-left: 4px; }
.lgvl-level {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surf3); border: 1px solid var(--border2);
  border-radius: 99px; padding: 4px 12px;
  font-weight: 700; color: var(--teal-text); font-size: .9rem;
}
.lgvl-sub { color: var(--dim); font-size: .8rem; margin-bottom: 14px; line-height: 1.5; }

/* D7 — banner đậm "gauge bắt buộc" (levels_05_gauge_fixes.sql, cờ theo lớp). */
.lgvl-required {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--yellow) 16%, var(--surf));
  border: 1px solid var(--yellow);
  border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 12px;
  font-weight: 700; color: var(--text); font-size: .85rem;
}
.lgvl-required .lgvl-btn { margin-left: auto; }

/* D4 — trục thứ hai "đã thuộc trong app" (không bao giờ giảm), tách khỏi hero. */
.lgvl-inapp { color: var(--dim); font-size: .8rem; margin-bottom: 10px; }

/* ── Thanh 6 bậc CEFR ───────────────────────────────────────────── */
.lgvl-bands { display: flex; gap: 4px; margin-bottom: 6px; }
.lgvl-band { flex: 1 1 0; min-width: 0; }
.lgvl-band-track {
  height: 26px; border-radius: var(--r2);
  background: var(--surf2); border: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.lgvl-band-fill {
  height: 100%; width: 0;
  background: var(--grad-accent);
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}
/* Bậc đã ĐẠT (≥80%) tô đậm hơn để mắt bắt được ngay ranh giới trình độ */
.lgvl-band.reached .lgvl-band-fill { background: var(--green); }
/* Tên và % phải DÍNH nhau ở mép trái của ô. Dùng space-between thì % của bậc
   này bị đẩy sát tên bậc kế bên, đọc thành "A1 … 100% A2" — không biết 100%
   là của ai (thấy rõ trên ảnh chụp lúc dựng). */
.lgvl-band-cap {
  display: flex; justify-content: flex-start; align-items: baseline;
  margin-top: 4px; gap: 5px;
}
.lgvl-band-name { font-size: .72rem; font-weight: 700; color: var(--text2); }
.lgvl-band.reached .lgvl-band-name { color: var(--green); }
.lgvl-band-pct { font-size: .66rem; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── Đường mốc thành tựu ────────────────────────────────────────── */
.lgvl-miles { margin-top: 16px; }
.lgvl-rail {
  display: flex; align-items: center;
  gap: 0; margin-bottom: 6px;
}
.lgvl-mile { flex: 1 1 0; text-align: center; position: relative; min-width: 0; }
/* đường nối chạy sau các chấm */
.lgvl-mile::before {
  content: ''; position: absolute; top: 9px; left: -50%; width: 100%;
  height: 2px; background: var(--border2);
}
.lgvl-mile:first-child::before { display: none; }
.lgvl-mile.done::before { background: var(--green); }
.lgvl-dot {
  position: relative; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  margin: 0 auto; display: grid; place-items: center;
  background: var(--surf2); border: 2px solid var(--border2);
  font-size: .6rem; line-height: 1;
}
.lgvl-mile.done .lgvl-dot { background: var(--green); border-color: var(--green); }
.lgvl-mile.next .lgvl-dot { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(32, 185, 185, .18); }
.lgvl-mile-lab {
  display: block; margin-top: 5px;
  font-size: .66rem; color: var(--dim); font-variant-numeric: tabular-nums;
}
.lgvl-mile.done .lgvl-mile-lab { color: var(--green); font-weight: 700; }
.lgvl-next-note { font-size: .8rem; color: var(--text2); margin-top: 8px; }

/* ── Trạng thái CHƯA ĐO ─────────────────────────────────────────── */
.lgvl-empty { text-align: center; padding: 6px 0 2px; }
.lgvl-empty-emoji { font-size: 2rem; }
.lgvl-empty-h { font-weight: 700; color: var(--text); margin: 6px 0 4px; }
.lgvl-empty-p { color: var(--dim); font-size: .84rem; line-height: 1.55; margin-bottom: 14px; }

/* ── Màn đo (overlay) ───────────────────────────────────────────── */
.lgvl-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lgvl-sheet {
  background: var(--surf); border: 1px solid var(--border2);
  border-radius: var(--r); box-shadow: var(--shadow);
  width: 100%; max-width: 720px; padding: 18px;
  margin: auto;
}
.lgvl-sheet h3 { margin: 0 0 6px; color: var(--text); font-size: 1.05rem; }
.lgvl-sheet .lgvl-help { color: var(--dim); font-size: .82rem; line-height: 1.6; margin-bottom: 14px; }
.lgvl-warn {
  background: var(--surf2); border: 1px solid var(--border2);
  border-radius: var(--r2); padding: 10px 12px;
  color: var(--text2); font-size: .8rem; line-height: 1.55; margin-bottom: 14px;
}

/* Lưới từ — bấm vào từ mình BIẾT */
.lgvl-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-bottom: 16px;
}
.lgvl-word {
  appearance: none; cursor: pointer; font: inherit;
  background: var(--surf2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--r2);
  padding: 11px 8px; min-height: 44px;
  font-size: .9rem; text-align: center;
  overflow-wrap: anywhere;
  transition: background .12s, border-color .12s, transform .08s;
}
.lgvl-word:active { transform: scale(.97); }
.lgvl-word.on {
  background: var(--teal-dark); border-color: var(--teal);
  color: #fff; font-weight: 600;
}
.lgvl-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: sticky; bottom: 0;
  background: var(--surf); padding-top: 12px;
  border-top: 1px solid var(--border);
}
.lgvl-count { color: var(--dim); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Kết quả sau khi đo */
.lgvl-res-size { font-size: 2.4rem; font-weight: 800; color: var(--text); text-align: center; }
.lgvl-res-lab { text-align: center; color: var(--dim); font-size: .85rem; margin-bottom: 16px; }
.lgvl-new-mile {
  background: var(--surf2); border: 1px solid var(--teal);
  border-radius: var(--r2); padding: 12px; margin-bottom: 14px;
  color: var(--text); font-size: .88rem; line-height: 1.6;
}

@media (max-width: 480px) {
  .lgvl-size { font-size: 1.7rem; }
  .lgvl-band-pct { display: none; }        /* hẹp quá thì bỏ %, giữ tên bậc */
  .lgvl-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}


/* ════════════════════════════════════════════════════════════════════
   TRỤC CHUNG · GẬP/MỞ · MỤC TIÊU  (31/08/2026)

   Trước đây có HAI thanh khác hệ quy chiếu chồng lên nhau (6 ô CEFR chia
   đều, mỗi ô tự chia 0–100%; và một hàng mốc 1.5k–8k cũng chia đều). Nay
   MỘT trục: bề rộng mỗi bậc tỉ lệ với số từ thật của bậc đó trong kho, mốc
   đặt đúng vị trí giá trị của nó trên chính trục ấy.

   MÀU: mỗi bậc một sắc riêng chạy từ lạnh sang ấm theo thứ tự A1→C2, truyền
   vào bằng --c1/--c2/--crgb đặt inline trong JS (BAND_COLOR) để hai nơi
   không phải giữ chung một danh sách màu. Nền ô dùng --crgb ở alpha thấp nên
   đọc được trên CẢ nền tối lẫn nền sáng; phần cuối file có vài chỗ nâng alpha
   riêng cho light mode vì nền trắng nuốt sắc nhạt.
   ════════════════════════════════════════════════════════════════════ */
.lgvl-body{margin-top:2px}
.lgvl-fold{padding:2px 9px;font-size:.9rem;line-height:1.2}

/* ── Hero ─────────────────────────────────────────────────────────── */
.lgvl-hero{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lgvl-size{color:var(--accent-text)}
.lgvl-level{
  background:rgba(var(--crgb,129,140,248),.16);
  border:1px solid rgba(var(--crgb,129,140,248),.45);
  color:var(--c2,#6366f1);font-weight:800;border-radius:999px;padding:3px 12px;font-size:.78rem}
.lgvl-gain{font-size:.72rem;font-weight:800;color:#0f766e;
  background:#5eead4;border-radius:999px;padding:3px 10px;
  align-self:center;cursor:help}

/* ── Trục ─────────────────────────────────────────────────────────── */
.lgvl-scale{margin:14px 0 4px}
.lgvl-axis{position:relative;display:flex;height:28px;margin-top:12px;background:transparent;
  border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.lgvl-seg{position:relative;min-width:0;overflow:hidden;cursor:pointer;outline:none;
  background:rgba(var(--crgb),.14);
  border-right:1px solid var(--bg)}
.lgvl-seg:first-child{border-radius:9px 0 0 9px}
.lgvl-seg:last-child{border-radius:0 9px 9px 0;border-right:0}
.lgvl-seg:hover{filter:brightness(1.12)}
.lgvl-seg:focus-visible{box-shadow:inset 0 0 0 2px var(--text)}
.lgvl-seg-fill{position:absolute;inset:0 auto 0 0;
  background:var(--c2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
/* Bậc ĐÃ ĐẠT (≥80%) được nhấn thêm bằng viền sáng mảnh phía trên — khác biệt
   phải thấy được cả khi người dùng không phân biệt được màu. */
.lgvl-seg.reached .lgvl-seg-fill{
  background:var(--c2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.lgvl-seg-lab{position:relative;display:block;text-align:center;line-height:28px;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none}
/* Mũi tên "em đang ở đây" nằm TRÊN thanh. Bản đầu là một đường xuyên suốt và
   nó cắt đôi nhãn bậc ("B1" bị xé làm hai) — nhìn thấy ngay khi dựng thử. */
.lgvl-here{position:absolute;top:-11px;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--text);transform:translateX(-6px);pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}

/* ── Hàng mốc ─────────────────────────────────────────────────────── */
.lgvl-mrow{position:relative;height:32px;margin-top:8px}
.lgvl-mk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:help}
.lgvl-mk-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);
  background:var(--surf2);font-size:.6rem;line-height:11px;text-align:center;color:#fff;
  transition:transform .15s}
.lgvl-mk.done .lgvl-mk-dot{border-color:transparent;
  background:#059669}
.lgvl-mk:hover .lgvl-mk-dot{transform:scale(1.18)}
.lgvl-mk-lab{font-size:.63rem;font-weight:600;color:var(--dim);white-space:nowrap}
.lgvl-mk.done .lgvl-mk-lab{color:#10b981}
.lgvl-legend{font-size:.68rem;color:var(--dim);line-height:1.55;margin-top:8px}
.lgvl-detail{font-size:.75rem;color:var(--dim);margin-top:2px}
.lgvl-detail.on{padding:8px 11px;border-radius:9px;margin-top:8px;
  background:rgba(129,140,248,.12);
  border:1px solid rgba(129,140,248,.28);color:var(--text)}

/* ── "Vì sao em ở mức này?" ───────────────────────────────────────────
   Chỉ dùng token CÓ THẬT của trang (--text/--dim/--border/--surf). Không
   dùng --ink: token đó không tồn tại trong LOGIelts, CSS sẽ im lặng rơi về
   fallback và ra chữ trắng trên nền trắng ở light mode. */
.lgvl-why{margin-top:14px;padding:11px 12px;border-radius:11px;
  background:rgba(129,140,248,.07);border:1px solid var(--border)}
.lgvl-why-h{font-size:.8rem;font-weight:800;color:var(--text);margin-bottom:6px}
.lgvl-why-rule{font-size:.74rem;color:var(--dim);line-height:1.55}
.lgvl-why-list{margin:9px 0 2px}
.lgvl-why-row{display:flex;gap:7px;align-items:flex-start;
  font-size:.76rem;line-height:1.5;padding:3px 0;color:var(--dim)}
.lgvl-why-ic{flex:none;width:1em;text-align:center;font-weight:800}
.lgvl-why-row.ok{color:var(--text)}
.lgvl-why-row.ok .lgvl-why-ic{color:#10b981}
/* Bậc đang dừng là dòng QUAN TRỌNG NHẤT của cả panel — nó trả lời câu hỏi
   "vì sao chưa lên bậc". Cho nó đậm hơn hẳn hai loại dòng kia. */
.lgvl-why-row.now{color:var(--text);font-weight:700}
.lgvl-why-row.now .lgvl-why-ic{color:#f59e0b}
.lgvl-why-row.later{opacity:.72}
.lgvl-why-conf{margin-top:8px;font-size:.7rem;color:var(--dim);line-height:1.5}
.lgvl-sugg:empty{display:none}            /* gọi hỏng ⇒ khối rỗng ⇒ không chiếm chỗ */
.lgvl-sugg{margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.lgvl-sugg-h{font-size:.77rem;font-weight:800;color:var(--text)}
.lgvl-sugg-t{font-size:.74rem;color:var(--dim);line-height:1.55;margin:4px 0 7px}
.lgvl-sugg-btn{display:inline-block;font-size:.76rem;font-weight:700;
  padding:7px 12px;border-radius:9px;text-decoration:none;color:var(--on-accent,#FBFAFE);
  background:var(--accent)}
.lgvl-sugg-btn:hover{filter:brightness(1.07)}
[data-theme="light"] .lgvl-why{background:rgba(129,140,248,.10)}

/* ── Mục tiêu ─────────────────────────────────────────────────────── */
.lgvl-goal{margin-top:14px;padding:11px 12px;border-radius:11px;
  background:rgba(129,140,248,.10);
  border:1px solid rgba(129,140,248,.26)}
.lgvl-goal-invite{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.78rem;color:var(--dim)}
.lgvl-goal-line{font-size:.83rem;line-height:1.6}
.lgvl-goal-line b{color:var(--accent-text);font-size:1.02rem}
.lgvl-goal-edit{margin-top:8px}
.lgvl-goal-form{font-size:.8rem}
.lgvl-goal-q{font-size:.75rem;font-weight:800;color:var(--dim);margin:9px 0 5px}
.lgvl-goal-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.lgvl-goal-err{font-size:.74rem;color:var(--red,#F2736B);margin-top:6px}
.lgvl-sel{flex:1;min-width:110px;background:var(--surf);border:1px solid var(--border);
  border-radius:var(--r2);padding:9px 11px;font-family:inherit;font-size:.8rem;color:var(--text)}
.lgvl-sel-w{width:100%}

/* ── Light mode ───────────────────────────────────────────────────────
   Nền trắng nuốt sắc alpha thấp, và chữ trắng trên gradient nhạt thì mờ.
   Ba chỗ phải nâng: nền ô chưa đạt, viền trục, và bóng chữ nhãn bậc. */
[data-theme="light"] .lgvl-seg{background:rgba(var(--crgb),.22)}
[data-theme="light"] .lgvl-axis{box-shadow:0 1px 3px rgba(15,23,42,.12)}
/* Nhan bac nam DE len ca phan da to lan phan chua to cua cung mot o, nen
   khong the chon mot mau hop voi ca hai. Nen dark mode: chu trang + quang
   toi; light mode: chu SLATE DAM + quang trang. Truoc khi vao day chu trang
   tren nen nhat cua light mode gan nhu mat hut (B1/B2/C1/C2 khong doc duoc)
   — chi nhin thay khi dung thu that o che do sang. */
[data-theme="light"] .lgvl-seg-lab{color:#0f172a;
  text-shadow:0 0 4px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.95)}
[data-theme="light"] .lgvl-mk-dot{background:#fff}
[data-theme="light"] .lgvl-goal{background:rgba(129,140,248,.14)}
[data-theme="light"] .lgvl-gain{color:#065f46}

@media (max-width:420px){
  .lgvl-seg-lab{font-size:.62rem}
  .lgvl-mk-lab{font-size:.58rem}
  .lgvl-axis{height:24px}
  .lgvl-seg-lab{line-height:24px}
}

/* ── 9E — thanh "% tới mục tiêu" (14/09/2026) ─────────────────────────
   HAI phần, PHẢI phân biệt được bằng mắt: phần đậm là SỐ ĐO (bài X-Lex),
   phần nhạt-sọc là ƯỚC LƯỢNG từ hoạt động học kể từ ngày đo. Gộp thành một
   màu là quay lại đúng cái sai mà thanh này sinh ra để tránh.
   Sọc chứ không chỉ nhạt màu: nhạt màu một mình thì ở màn hình kém tương
   phản (điện thoại ngoài nắng) hai phần trông y hệt nhau. */
.lgvl-prog{margin-top:12px}
.lgvl-prog-h{font-size:.9rem;font-weight:700;margin-bottom:6px}
.lgvl-prog-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;
  background:var(--surf2);border:1px solid var(--border)}
.lgvl-prog-m{background:#38bdf8}
.lgvl-prog-g{background:repeating-linear-gradient(135deg,
    rgba(129,140,248,.55) 0 5px, rgba(129,140,248,.22) 5px 10px)}
.lgvl-prog-t{margin-top:5px;font-size:.72rem;color:var(--dim)}
.lgvl-prog-k1{color:#818cf8}
.lgvl-prog-k2{color:rgba(129,140,248,.6)}
.lgvl-prog-note{margin-top:3px;font-size:.7rem;color:var(--dim);font-style:italic}
/* Light mode: nen thanh sang hon nen the ⇒ phan chua to phai DAM hon mot chut,
   khong thi thanh rong trong nhu... khong co thanh nao. */
[data-theme="light"] .lgvl-prog-bar{background:rgba(15,23,42,.08)}

/* Truc MINI — che do thu gon (14/09/2026). Cung ty le be rong va cung phan
   to nhu truc day du (xem miniScale trong JS): hai truc lech nhau la hoc sinh
   thay con so nhay khi gap/mo. Cao 14px, nhan 9px — vua du doc ma khong con
   la mot the chiem nua man hinh. */
.lgvl-mini{margin:8px 0 2px}
.lgvl-mini-axis{position:relative;display:flex;height:14px;border-radius:7px;
  box-shadow:0 1px 2px rgba(0,0,0,.16)}
.lgvl-mini-seg{position:relative;min-width:0;overflow:hidden;
  background:rgba(var(--crgb),.14);border-right:1px solid var(--bg)}
.lgvl-mini-seg:first-child{border-radius:7px 0 0 7px}
.lgvl-mini-seg:last-child{border-radius:0 7px 7px 0;border-right:0}
.lgvl-mini-fill{position:absolute;inset:0 auto 0 0;
  background:var(--c2)}
.lgvl-mini-seg.reached .lgvl-mini-fill{
  background:var(--c2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.lgvl-mini-lab{position:relative;display:block;text-align:center;line-height:14px;
  font-size:.55rem;font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.lgvl-mini-here{position:absolute;top:-7px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid var(--text);transform:translateX(-4px);pointer-events:none}
[data-theme="light"] .lgvl-mini-seg{background:rgba(var(--crgb),.22)}
[data-theme="light"] .lgvl-mini-lab{color:#0f172a;text-shadow:0 1px 2px rgba(255,255,255,.7)}
/* Duoi 380px nhan bac chen nhau ⇒ bo chu, giu mau (mau da la tin hieu). */
@media (max-width:380px){.lgvl-mini-lab{display:none}}

/* HUD QA8 mục 6.4 (23/09, luồng H — CSS-only, KHÔNG sửa vocab-level-widget.js
 * theo đúng ranh giới file: widget này thuộc luồng A). Thẻ nay còn mount
 * trong #hubRail — cột rộng 240–288px mặc định (biến --lg-rail-w, xem
 * index.html), hẹp hơn cả breakpoint 420/380px ở trên. Hai @media phía trên
 * đo theo VIEWPORT (luôn ≥1280px khi rail hiện — không bao giờ khớp), nên
 * ruột thẻ trong rail render y hệt bản desktop rộng ⇒ tràn/chật ở cột hẹp.
 * #hubRail đã có `container-type:inline-size` (index.html, khối CSS
 * #hubRailShell ≥1280px) nên soi được bằng @container theo bề rộng CONTAINER
 * thay vì viewport — mirror lại đúng hai luật trên, không đổi ngưỡng/hành vi,
 * chỉ đổi "theo cái gì" cho đúng ngữ cảnh rail. */
@container (max-width:420px){
  .lgvl-seg-lab{font-size:.62rem}
  .lgvl-mk-lab{font-size:.58rem}
  .lgvl-axis{height:24px}
  .lgvl-seg-lab{line-height:24px}
}
@container (max-width:380px){.lgvl-mini-lab{display:none}}