:root { --bg:#F3F1EA; --card:#FBFAF6; --s2:#ECE9E0; --fg:#262521; --muted:#6E6B62;
        --accent:#C15F3C; --hl:#D97757; --ok:#3F7E4B; --err:#BB4430;
        --coral:#C15F3C; --coral2:#D97757; --teal:#3E8E7E; --violet:#E0996F;
        /* Hai tông thêm cho thẻ bộ từ vựng, để 4 thẻ không cùng một sắc cam. */
        --sky:#4A7796; --gold:#94721F; }

/* ---- Trang chủ: hero + thống kê + huy hiệu ---- */
.home-hero { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px; }
.hero-main { background:
    radial-gradient(120% 140% at 100% 0%, rgba(217,119,87,.10), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(193,95,60,.07), transparent 55%), var(--card);
  border:1px solid #E3E0D6; border-radius:18px; padding:22px 24px; }
.hero-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--coral); }
.hero-main h1 { font-size:1.6rem; margin:.3rem 0 .4rem; }
.hero-main p { color:var(--muted); max-width:52ch; margin:0; }
.xpbar { margin-top:18px; }
.xpbar .lab { display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-bottom:6px; }
.xpbar .track { height:9px; background:var(--s2); border-radius:99px; overflow:hidden; }
.xpbar .track > i { display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--accent)); transition:width .9s ease; }
.hero-side { display:flex; flex-direction:column; gap:12px; }
.hero-box { flex:1; display:flex; align-items:center; gap:14px; background:var(--card);
  border:1px solid #E3E0D6; border-radius:16px; padding:14px 16px; }
.hero-box .flame { font-size:2rem; animation:flick 1.5s ease-in-out infinite; }
.hero-box .big { font-size:1.6rem; }
.hero-box .sub { color:var(--muted); font-size:.82rem; }
@keyframes flick { 0%,100%{ transform:scale(1) rotate(-2deg);} 50%{ transform:scale(1.12) rotate(2deg);} }
.goal-box { position:relative; }
.goal-edit { margin-left:auto; }
.goal-edit > summary { list-style:none; cursor:pointer; font-size:1.1rem; opacity:.7; }
.goal-edit > summary::-webkit-details-marker { display:none; }
.goal-edit > summary:hover { opacity:1; }
.goal-edit[open] > summary { opacity:1; }
.goal-form { position:absolute; right:0; top:calc(100% + 6px); z-index:6; width:230px;
  background:var(--card); border:1px solid #E3E0D6; border-radius:12px; padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.4); }
.goal-lab { font-size:.78rem; color:var(--muted); font-weight:600; margin-bottom:8px; }
.goal-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.goal-chip { border:1px solid #E3E0D6; background:var(--s2); color:var(--fg);
  border-radius:9px; padding:.35rem .6rem; cursor:pointer; font-weight:700; }
.goal-chip.on, .goal-chip:hover { border-color:var(--teal); color:var(--teal); }
.goal-custom { display:flex; gap:6px; }
.goal-custom input { flex:1; width:100%; padding:.4rem .5rem; border-radius:8px;
  border:1px solid #E3E0D6; background:var(--bg); color:var(--fg); }
.goal-custom button { background:var(--teal); color:#ffffff; border:0; font-weight:700;
  padding:.4rem .8rem; border-radius:8px; cursor:pointer; }
.ring { position:relative; width:76px; height:76px; flex:none; }
.ring .ring-val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums; }

.home-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stile { background:var(--card); border:1px solid #E3E0D6; border-radius:14px; padding:14px 16px; }
.stile .k { font-size:.78rem; color:var(--muted); font-weight:600; }
.stile .v { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px; }

.badges-head { font-weight:700; margin:0 2px 10px; }
/* Huy hiệu: LUÔN gọn trên 1 hàng, tự co theo bề rộng màn hình (không xuống dòng). */
.badges-row { display:flex; flex-wrap:nowrap; gap:clamp(4px,1.5vw,14px); margin-bottom:22px; }
.hbadge { flex:1 1 0; min-width:0; text-align:center; }
.hbadge .disc { width:100%; max-width:56px; aspect-ratio:1; margin:0 auto 6px;
  border-radius:50%; display:grid; place-items:center;
  font-size:clamp(1rem,4.4vw,1.5rem); background:var(--s2); border:1px solid #E3E0D6; }
.hbadge.got .disc { background:linear-gradient(135deg,#ffc04a,#ffe08a); border-color:transparent;
  box-shadow:0 6px 14px rgba(255,192,74,.4); }
.hbadge .bl { font-size:clamp(.56rem,2.3vw,.72rem); font-weight:600; color:var(--muted);
  line-height:1.15; overflow-wrap:anywhere; }
.hbadge.locked { opacity:.4; }
.add-title { font-size:1.2rem; }
@media (max-width:820px){ .home-hero{ grid-template-columns:1fr; } .home-stats{ grid-template-columns:repeat(2,1fr); } }

/* ---- Smartphone: màn hình chính gọn tối đa (bớt padding, nhỏ font) ---- */
@media (max-width:560px){
  /* padding của main: xem body.page-wide main gần .video-layout (phải đặt sau) */
  .home-hero { gap:8px; margin-bottom:10px; }
  .hero-main { padding:13px 14px; border-radius:14px; }
  .hero-eyebrow { font-size:.62rem; letter-spacing:.1em; }
  .hero-main h1 { font-size:1.12rem; margin:.2rem 0 .3rem; }
  .hero-main p { font-size:.82rem; line-height:1.45; }
  .xpbar { margin-top:12px; }
  .xpbar .lab { font-size:.72rem; margin-bottom:4px; }

  .hero-side { gap:8px; }
  .hero-box { padding:10px 11px; gap:9px; border-radius:13px; }
  .hero-box .flame { font-size:1.5rem; }
  .hero-box .big { font-size:1.3rem; }
  .hero-box .sub { font-size:.72rem; }
  .ring, .ring svg { width:58px; height:58px; }
  .ring-val { font-size:.78rem; }

  .home-stats { gap:8px; margin-bottom:12px; }
  .stile { padding:9px 11px; border-radius:11px; }
  .stile .k { font-size:.68rem; }
  .stile .v { font-size:1.28rem; }

  .badges-head { font-size:.92rem; margin-bottom:7px; }
  .badges-row { margin-bottom:14px; }

  h2 { font-size:1.1rem; }
  .add-title { font-size:1rem; }
  .add-form { gap:.4rem; margin-bottom:1rem; }

  .channel-group > summary { padding:0; gap:.4rem; font-size:.92rem; }
  .channel-thumb { width:24px; height:24px; }
  .channel-group .see-all { font-size:.78rem; padding:.1rem .3rem; }
  .channel-swiper { padding:.6rem .1rem 1.2rem; }
  .card-title { font-size:.84rem; line-height:1.3; }
  .card-body { padding:.5rem .6rem .65rem; gap:.4rem; }
}
* { box-sizing: border-box; }
input, textarea, select, button { font-family: inherit; }
body { margin:0;
       font-family: "__Inter_66a37f", "__Inter_Fallback_66a37f", "Inter", "Noto Sans JP", system-ui, "Segoe UI", sans-serif;
       background:var(--bg); color:var(--fg); line-height:1.6;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
nav { display:flex; gap:1.2rem; align-items:center; padding:.8rem 1.5rem;
      background:var(--card); border-bottom:1px solid #E3E0D6; }
nav a { color:var(--fg); text-decoration:none; }
nav a:hover { color:var(--accent); }
.brand { font-weight:700; display:inline-flex; align-items:center; gap:.4rem; }
.brand-logo { width:26px; height:26px; display:block; }
nav .nav-user { margin-left:auto; color:var(--muted); }
.nav-toggle { display:none; }
.nav-burger { display:none; }
.nav-links { display:flex; align-items:center; gap:1.2rem; flex:1; }
@media (max-width:560px){
  nav { flex-wrap:wrap; gap:.5rem; padding:.5rem .7rem; }
  .nav-burger { display:block; margin-left:auto; font-size:1.55rem; line-height:1;
    cursor:pointer; color:var(--fg); padding:0 .3rem; user-select:none; }
  .nav-links { display:none; width:100%; flex-direction:column;
    align-items:flex-start; gap:.2rem; }
  .nav-toggle:checked ~ .nav-links { display:flex; }
  .nav-links .nav-user { margin-left:0; }
  .nav-links a { padding:.4rem 0; width:100%; }
}
/* Menu chọn ngôn ngữ học (header) */
.lang-picker { position:relative; }
.lang-picker > summary { list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  padding:.3rem .6rem; border:1px solid #E3E0D6; border-radius:999px;
  background:var(--bg); }
.lang-picker > summary::-webkit-details-marker { display:none; }
.lang-picker > summary:hover { border-color:var(--accent); color:var(--accent); }
.lang-picker img { border-radius:2px; display:block; }
.lp-caret { font-size:.7rem; color:var(--muted); }
.lang-picker[open] .lp-caret { transform:rotate(180deg); }
.lang-list { position:absolute; top:calc(100% + .45rem); left:0; z-index:40;
  min-width:250px; padding:.35rem; background:var(--card);
  border:1px solid #E3E0D6; border-radius:14px;
  box-shadow:0 14px 34px rgba(23,33,54,.16); }
.lang-item { display:flex; align-items:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:10px; }
.lang-item:hover { background:var(--bg); }
.lang-item.is-active { background:var(--bg); font-weight:700; }
.li-name { display:flex; flex-direction:column; line-height:1.25; }
.li-name small { color:var(--muted); font-size:.72rem; font-weight:400; }
.li-count { margin-left:auto; font-size:.74rem; color:var(--muted); white-space:nowrap; }
.li-count.is-soon { color:var(--hl); font-weight:600; }
@media (max-width:560px){
  .lang-picker { width:100%; }
  .lang-picker > summary { width:100%; justify-content:flex-start; }
  .lang-list { position:static; width:100%; min-width:0; margin-top:.35rem;
    box-shadow:none; }
  .nav-links .lang-item { padding:.5rem .6rem; }   /* thắng .nav-links a ở trên */
}

/* Nút Góp ý nổi bật */
.nav-cta { background:var(--hl); color:#fff !important;
  padding:.35rem .8rem; border-radius:999px; font-weight:700;
  box-shadow:0 2px 8px rgba(217,119,87,.35); }
.nav-cta:hover { filter:brightness(1.05); color:#fff !important; }
.nav-badge { background:#fff; color:var(--hl); border-radius:999px; padding:0 .4rem;
  font-size:.75rem; font-weight:800; }

/* Góp ý */
.fb-new { display:flex; flex-direction:column; gap:.6rem; max-width:640px; margin-bottom:1.5rem; }
.fb-new input, .fb-new textarea, .fb-reply textarea { padding:.6rem .8rem; border-radius:8px;
  border:1px solid #E3E0D6; background:var(--card); color:var(--fg); font-size:1rem; }
.fb-new button, .fb-reply button { align-self:flex-start; background:var(--hl); border:0;
  padding:.55rem 1.1rem; border-radius:8px; color:#ffffff; font-weight:700; cursor:pointer; }
.fb-list { list-style:none; padding:0; }
.fb-list li { display:flex; align-items:center; gap:.7rem; padding:.7rem;
  border-bottom:1px solid #E3E0D6; flex-wrap:wrap; }
.fb-list a { color:var(--accent); text-decoration:none; margin-right:auto; font-weight:500; }
.fb-who, .fb-time { color:var(--muted); font-size:.85rem; }

.fb-thread { display:flex; flex-direction:column; gap:.7rem; max-width:720px; margin:1rem 0; }
.fb-msg { display:flex; }
.fb-msg.mine { justify-content:flex-end; }
.fb-bubble { max-width:80%; background:var(--card); border:1px solid #E3E0D6;
  border-radius:12px; padding:.55rem .8rem; }
.fb-msg.mine .fb-bubble { background:#EAF2EA; border-color:#B5D0B5; }
.fb-sender { font-size:.8rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.fb-admin { background:var(--accent); color:#fff; font-size:.65rem; font-weight:800;
  padding:0 .35rem; border-radius:6px; }
.fb-body { white-space:pre-wrap; word-wrap:break-word; margin:.25rem 0; }
.fb-when { font-size:.72rem; color:var(--muted); text-align:right; }
.fb-reply { display:flex; flex-direction:column; gap:.5rem; max-width:720px; margin-top:1rem; }
/* ================= Auth (đăng nhập / đăng ký / quên mật khẩu) ================= */
body.auth-page { background:#EEF0F3; }
body.auth-page nav, body.auth-page .site-footer { display:none; }
body.auth-page main { max-width:none; padding:0; }
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
/* Nút quay về trang chủ: auth-page ẩn nav nên cần lối thoát riêng */
.auth-home { position:fixed; top:18px; left:18px; z-index:20;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:999px; background:#fff; border:1px solid #e3e6ec;
  color:#161b26; text-decoration:none; font-size:.9rem; font-weight:600;
  box-shadow:0 6px 18px rgba(23,33,54,.10); transition:background .15s, box-shadow .15s; }
.auth-home:hover { background:#f6f7f9; box-shadow:0 8px 22px rgba(23,33,54,.16); }
.auth-home svg { width:17px; height:17px; }
@media (max-width:560px){
  .auth-home { top:10px; left:10px; padding:.5rem; }
  .auth-home span { display:none; }
}
.auth-card { width:100%; max-width:430px; background:#fff; border-radius:22px;
  padding:2.2rem 2.1rem 1.7rem; box-shadow:0 24px 60px rgba(23,33,54,.14); }
.auth-card h1 { text-align:center; font-size:2rem; font-weight:800; letter-spacing:-.02em;
  color:#161b26; margin:.1rem 0 .1rem; }
.auth-sub { text-align:center; color:#8b93a1; font-size:.94rem; margin:.1rem 0 1.5rem; }
.auth-form { display:flex; flex-direction:column; gap:.85rem; margin-top:1.4rem; }
.auth-card h1 + .auth-form { margin-top:1.6rem; }

.field { position:relative; display:flex; align-items:center; }
.field .ic { position:absolute; left:14px; display:flex; color:#9aa3b0; pointer-events:none; }
.field .ic svg { width:19px; height:19px; }
.field input { width:100%; padding:.82rem .95rem .82rem 44px; font-size:1rem; color:#1a2233;
  background:#fff; border:1px solid #DEE2E8; border-radius:12px;
  transition:border-color .15s ease, box-shadow .15s ease; }
.field input::placeholder { color:#a2aab6; }
.field input:focus { outline:0; border-color:#4A90E2; box-shadow:0 0 0 3px rgba(74,144,226,.16); }
.field.has-eye input { padding-right:46px; }
.field .eye { position:absolute; right:8px; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:0; background:transparent; color:#9aa3b0; cursor:pointer; border-radius:8px; }
.field .eye svg { width:19px; height:19px; }
.field .eye:hover { color:#5b6472; }
.field .eye .eye-off { display:none; }
.field.reveal .eye .eye-open { display:none; }
.field.reveal .eye .eye-off { display:flex; }

.auth-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin:.15rem 0 .3rem; font-size:.92rem; flex-wrap:nowrap; }
@media (max-width:430px){ .auth-row { font-size:.82rem; gap:.4rem; } .remember { gap:.35rem; } }
.remember { display:flex; align-items:center; gap:.5rem; color:#3d4655; cursor:pointer; user-select:none; }
.remember input { width:17px; height:17px; accent-color:#2563eb; cursor:pointer; }
.link-strong { color:#161b26; font-weight:700; text-decoration:none; }
.link-strong:hover { text-decoration:underline; }
.link-accent { color:var(--accent); font-weight:700; text-decoration:none; }
.link-accent:hover { text-decoration:underline; }

.btn-primary-dark { background:#111827; color:#fff; border:0; padding:.9rem; border-radius:12px;
  font-weight:700; font-size:1rem; cursor:pointer; transition:background .15s ease, transform .08s ease; }
.btn-primary-dark:hover { background:#232c3b; }
.btn-primary-dark:active { transform:translateY(1px); }

.auth-or { display:flex; align-items:center; gap:.85rem; margin:1.15rem 0;
  color:#a2aab6; font-size:.76rem; font-weight:700; letter-spacing:.12em; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:#E6E9EE; }

.btn-google { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%;
  padding:.8rem; background:#fff; border:1px solid #DEE2E8; border-radius:12px;
  color:#3d4655; font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn-google:hover { background:#F7F8FA; border-color:#cfd5dd; box-shadow:0 2px 10px rgba(23,33,54,.06); }
.btn-google svg { width:19px; height:19px; }

.auth-foot { text-align:center; margin-top:1.3rem; color:#6b7280; font-size:.94rem; }
.auth-form button[disabled] { opacity:.6; cursor:progress; }

/* ---- Ô chống bot Cloudflare Turnstile (xem app/turnstile.py) ----
   min-height giữ sẵn chỗ để nút "Đăng nhập" không nhảy khi widget hiện ra. */
.ts-box { display:flex; justify-content:center; min-height:65px; }
.ts-warn { margin:-.4rem 0 0; text-align:center; font-size:.85rem; color:var(--err, #BB4430); }
/* Widget rộng cố định 300px — màn hẹp hơn thì thu nhỏ cho khỏi tràn thẻ. */
@media (max-width:360px){
  .ts-box { transform:scale(.85); transform-origin:top center; min-height:56px; }
}

/* ---- Modal đăng nhập: hiện ngay tại trang đang xem, không rời trang ---- */
.am-overlay { position:fixed; inset:0; z-index:2100; display:flex; align-items:center;
  justify-content:center; padding:1.1rem; overflow-y:auto;
  background:rgba(16,22,35,.55); opacity:0; transition:opacity .18s ease; }
.am-overlay.show { opacity:1; }
.am-overlay[hidden] { display:none; }
.am-card { position:relative; margin:auto; padding-top:2.6rem;
  transform:translateY(10px) scale(.98); transition:transform .18s ease; }
.am-overlay.show .am-card { transform:none; }
.am-close { position:absolute; top:12px; right:14px; border:0; background:transparent;
  color:#9aa3b0; font-size:1.1rem; line-height:1; cursor:pointer;
  padding:.35rem .5rem; border-radius:8px; }
.am-close:hover { color:#3d4655; background:#f1f3f6; }
.am-h { text-align:center; font-size:1.6rem; font-weight:800; letter-spacing:-.02em;
  color:#161b26; margin:0 0 .1rem; }
.am-h + .auth-form { margin-top:1.5rem; }
.am-view[hidden] { display:none; }
.am-msg { margin-bottom:1rem; padding:.6rem .85rem; border-radius:10px; font-size:.92rem;
  background:#FBEEE7; border:1px solid #E8CBB9; color:#8A4B2F; }
.am-msg[hidden] { display:none; }
.am-msg.ok { background:#E9F7EE; border-color:#B7E0C4; color:#256B3D; }
@media (max-width:430px){ .am-card { padding-left:1.4rem; padding-right:1.4rem; } }

.flash { background:#FBEEE7; border:1px solid #E8CBB9; color:#8A4B2F;
  padding:.6rem 1rem; border-radius:8px; margin-bottom:1rem; }
.flash p { margin:.2rem 0; }
body.auth-page .flash { max-width:430px; margin:0 auto -0.6rem; border-radius:12px; }
main { max-width:900px; margin:0 auto; padding:1.5rem; }
@media (max-width:560px){ main { padding:5px; } }   /* smartphone: gọn padding */

/* 🐼 Panda mascot */
.panda-widget { position:fixed; right:16px; bottom:16px; z-index:9999;
  width:112px; height:112px; pointer-events:none; }
.panda { position:absolute; right:4px; bottom:2px; width:98px; height:98px;
  transform-origin:50% 100%; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  cursor:pointer; pointer-events:auto;
  animation:panda-bob 3s ease-in-out infinite; }
.panda svg { width:100%; height:100%; display:block; }
@keyframes panda-bob { 0%,100%{ transform:translateY(0) rotate(0); }
  50%{ transform:translateY(-6px) rotate(-3deg); } }
.panda.eating { animation:panda-chew .2s ease-in-out 3; }
@keyframes panda-chew { 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.18,.82); } }
.panda.happy { animation:panda-happy 1.1s cubic-bezier(.3,1.4,.5,1); }
@keyframes panda-happy {
  0%{ transform:scale(1) rotate(0) translateY(0); }
  30%{ transform:scale(1.28) rotate(-11deg) translateY(-20px); }
  55%{ transform:scale(1.1) rotate(11deg) translateY(0); }
  78%{ transform:scale(1.16) rotate(-6deg) translateY(-9px); }
  100%{ transform:scale(1) rotate(0) translateY(0); } }
/* Bấm vào panda -> lắc lư + nhảy tưng vui vẻ */
.panda.poke { animation:panda-poke .9s cubic-bezier(.3,1.5,.5,1); }
@keyframes panda-poke {
  0%{ transform:scale(1) rotate(0); }
  18%{ transform:scale(1.16,.86) rotate(-12deg); }
  40%{ transform:scale(.94,1.08) rotate(12deg) translateY(-14px); }
  60%{ transform:scale(1.06,.96) rotate(-8deg) translateY(0); }
  80%{ transform:rotate(5deg) translateY(-6px); }
  100%{ transform:scale(1) rotate(0); } }
.panda.poke .mouth-happy { display:inline; }
.panda.poke .mouth-normal { display:none; }
.panda .mouth-happy { display:none; }
.panda.happy .mouth-happy { display:inline; }
.panda.happy .mouth-normal { display:none; }

.panda-food { position:absolute; right:64px; bottom:50px; font-size:30px; opacity:0; }
.panda-food.toss { animation:panda-toss .56s ease-in forwards; }
@keyframes panda-toss {
  0%{ opacity:1; transform:translate(-26px,-24px) scale(1) rotate(0); }
  75%{ opacity:1; transform:translate(6px,6px) scale(.8) rotate(160deg); }
  100%{ opacity:0; transform:translate(10px,14px) scale(.25) rotate(210deg); } }

.panda-ring { position:absolute; right:8px; bottom:8px; width:84px; height:84px;
  border-radius:50%; border:4px solid var(--accent); opacity:0; }
.panda-ring.go { animation:panda-ring .7s ease-out; }
@keyframes panda-ring { 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(2); opacity:0; } }

.panda-bubble { position:absolute; right:80px; bottom:74px; background:#fff; color:#e8590c;
  font-weight:800; font-size:.8rem; padding:.22rem .55rem; border-radius:14px; opacity:0;
  box-shadow:0 2px 8px rgba(0,0,0,.35); white-space:nowrap; }
.panda-bubble.go { animation:panda-bubble 1.4s ease; }
@keyframes panda-bubble { 0%{ opacity:0; transform:translateY(8px) scale(.5); }
  18%{ opacity:1; transform:translateY(0) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translateY(-8px); } }

.panda-particle { position:absolute; right:40px; bottom:52px; font-size:20px; pointer-events:none;
  animation:panda-burst .95s ease-out forwards; }
@keyframes panda-burst { 0%{ opacity:0; transform:translate(0,0) scale(.3) rotate(0); }
  15%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--tx),var(--ty)) scale(1.3) rotate(var(--rot)); } }

@media (prefers-reduced-motion: reduce){ .panda { animation:none; } }
@media (max-width:560px){ .panda-widget{ width:88px; height:88px; } .panda{ width:76px; height:76px; } }

/* Footer */
.site-footer { margin-top:2.5rem; padding:1.6rem 1rem 2rem; text-align:center;
  color:var(--muted); border-top:1px solid #E3E0D6; font-size:.95rem; }
.site-footer p { margin:0; display:inline-flex; align-items:center; gap:.45rem;
  flex-wrap:wrap; justify-content:center; }
.heart { font-size:1.25rem; line-height:1; display:inline-block;
  background:linear-gradient(45deg,#ff8787,#ff2d55,#ff6b9d);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#ff2d55;
  filter:drop-shadow(0 1px 3px rgba(255,45,85,.5));
  animation:heartbeat 1.5s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform:scale(1); }
  12% { transform:scale(1.3); }
  24% { transform:scale(1); }
  36% { transform:scale(1.18); }
  50% { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) { .heart { animation:none; } }
h1 { font-size:1.4rem; }

.add-form { display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.add-form input[type=text] { flex:1; min-width:240px; padding:.6rem;
  border-radius:8px; border:1px solid #E3E0D6; background:var(--card); color:var(--fg); }
.add-form select, .add-form button, button { padding:.6rem .9rem; border-radius:8px;
  border:1px solid #E3E0D6; background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--accent); }

/* Ô chỉnh WORKER_URL ở trang nhập channel (ghi thẳng vào .env) */
.worker-form { margin:0 0 1.4rem; padding:.8rem .9rem; border:1px solid #E3E0D6;
  border-radius:12px; background:var(--card); }
.worker-form label { display:block; font-size:.85rem; font-weight:700;
  margin-bottom:.4rem; }
.worker-form label small { font-weight:400; color:var(--muted); }
.worker-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.worker-row input { flex:1; min-width:220px; padding:.6rem; border-radius:8px;
  border:1px solid #E3E0D6; background:var(--bg); color:var(--fg);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem; }
.worker-now { margin:.5rem 0 0; font-size:.85rem; color:var(--muted); }
.worker-now code { background:var(--s2); padding:.1rem .35rem; border-radius:6px; }

.channel-group { margin-bottom:1rem; border-radius:10px;
  background:transparent; overflow:hidden; }
.channel-group > summary { cursor:pointer; padding:0; font-weight:600;
  list-style:none; display:flex; align-items:center; gap:.6rem;
  background:var(--s2); border-radius:8px; }
.channel-group > summary::-webkit-details-marker { display:none; }
.channel-group > summary::before { content:"▸"; color:var(--muted); font-size:3em; line-height:1; }
.channel-group[open] > summary::before { content:"▾"; }
.channel-group > summary a { color:var(--fg); text-decoration:none; }
.channel-group .count { margin-left:auto; font-size:.8rem; color:var(--muted);
  background:#E3E0D6; padding:.1rem .5rem; border-radius:20px; }
.channel-thumb { width:28px; height:28px; border-radius:50%; object-fit:cover;
  flex:none; border:1px solid #E3E0D6; }
.channel-group .see-all { margin-left:auto; font-size:.85rem; font-weight:700;
  color:var(--accent); text-decoration:none; white-space:nowrap; padding:.15rem .4rem;
  border-radius:8px; }
.channel-group .see-all:hover { background:var(--s2); text-decoration:underline; }

/* ---- Trang riêng của channel ---- */
.crumb { margin:0 0 .8rem; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--accent); }
.channel-head { display:flex; align-items:center; gap:14px; margin-bottom:1.2rem; }
.channel-avatar { width:64px; height:64px; border-radius:16px; object-fit:cover;
  flex:none; border:1px solid #E3E0D6; }
.channel-head h1 { margin:0; }
.channel-sub { color:var(--muted); font-size:.9rem; margin-top:.2rem; }
.channel-sub a { color:var(--accent); text-decoration:none; }
.card-grid { display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.channel-group--recent { border-color:var(--accent); }
.channel-group--recent > summary { color:var(--accent); font-size:1.05rem; }

/* ---- Swiper carousel theo channel ---- */
.channel-swiper { padding:1rem .3rem 1.6rem; }
.channel-swiper .swiper-slide { height:auto; }
.channel-swiper .swiper-slide .card { height:100%; }
.channel-swiper .swiper-button-prev, .channel-swiper .swiper-button-next {
  width:40px; height:40px; border-radius:50%; background:rgba(17,22,32,.8);
  box-shadow:0 2px 10px rgba(0,0,0,.45); top:44%;
  --swiper-navigation-color:var(--accent); }
.channel-swiper .swiper-button-prev:after,
.channel-swiper .swiper-button-next:after { font-size:17px; font-weight:800; }
.channel-swiper .swiper-button-disabled { opacity:0; pointer-events:none; }
.card { background:#fff; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.card-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card-thumb { position:relative; aspect-ratio:16/9; background:#000; }
.card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card-thumb-ph { width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:2rem; color:#fff; }

/* overlay pills trên thumbnail */
.card-views { position:absolute; top:8px; left:8px; background:rgba(17,22,32,.82);
  color:#fff; font-size:.72rem; font-weight:600; padding:.16rem .55rem; border-radius:999px; }
.card-dur { position:absolute; bottom:8px; right:8px; background:rgba(17,22,32,.82);
  color:#fff; font-size:.72rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; }
.card-source { position:absolute; bottom:8px; left:8px; background:#fff; color:#e5484d;
  font-size:.72rem; font-weight:700; padding:.14rem .55rem; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* Nhãn cấp độ (CEFR / JLPT / HSK) — pill pastel, góc phải-trên */
.lvl { font-weight:800; font-size:.72rem; padding:.18rem .6rem; border-radius:999px;
  background:#e9ecef; color:#495057; }
.card-thumb .lvl { position:absolute; top:8px; right:8px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.lvl-A1, .lvl-A2, .lvl-N5, .lvl-N4, .lvl-HSK1, .lvl-HSK2 { background:#d3f9d8; color:#2b8a3e; }
.lvl-B1, .lvl-B2, .lvl-N3, .lvl-N2, .lvl-HSK3, .lvl-HSK4 { background:#d0ebff; color:#1971c2; }
.lvl-C1, .lvl-C2, .lvl-N1, .lvl-HSK5, .lvl-HSK6 { background:#ffe3e3; color:#e03131; }

.card-body { padding:.7rem .85rem .9rem; display:flex; flex-direction:column; gap:.55rem; }
.card-title { font-weight:600; font-size:.95rem; line-height:1.35; color:#1a2433;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em; }                       /* luôn cao bằng 2 dòng -> card đều nhau */
.card-status { min-height:1.5rem; display:flex; align-items:center; }
.card-progrow { display:flex; align-items:center; gap:.5rem; width:100%; }
.card .progress { flex:1; height:7px; background:#e9ecef; border-radius:999px; overflow:hidden; }
.card .progress-bar { height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#C15F3C,#E0996F); transition:width .4s ease; }
.card .progress-bar.done { background:linear-gradient(90deg,#2f9e44,#63e6be); }
.progress-num { font-size:.72rem; color:#868e96; font-weight:600; white-space:nowrap; }
.card-body .badge { align-self:flex-start; }

/* Admin chọn cấp độ bài học bằng tay (CEFR/JLPT/HSK tuỳ ngôn ngữ của bài). */
.level-pick { display:flex; align-items:center; gap:.4rem; margin:0;
  padding:.1rem .85rem .5rem; font-size:.78rem; font-weight:600; color:#868e96; }
.level-pick select { font-size:.78rem; padding:.28rem .4rem; border-radius:9px;
  border:1px solid #dee2e6; background:#f1f3f5; color:#495057; cursor:pointer; }
.level-pick select:hover { background:#e9ecef; }

.card-admin { display:flex; gap:.5rem; padding:0 .85rem .85rem; }
.card-admin form { flex:1; margin:0; }
.card-admin button { width:100%; font-size:.8rem; padding:.4rem; border-radius:10px;
  border:1px solid #dee2e6; background:#f1f3f5; color:#495057; }
.card-admin button:hover { background:#e9ecef; }
.btn-danger { border:1px solid #ffc9c9; color:#e03131; background:#fff5f5; }
.btn-danger:hover { background:#ffe3e3; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.page-head h1 { margin:.2rem 0; }

@media (max-width: 520px) {
  main { padding:5px; }
  .card-title { font-size:.84rem; }
  nav { gap:.7rem; padding:.55rem .7rem; flex-wrap:wrap; }
}

.video-list { list-style:none; padding:0; margin:0; }
.video-list li { padding:.7rem; border-bottom:1px solid #E3E0D6;
  display:flex; align-items:center; gap:.8rem; }
.video-list .thumb { width:120px; aspect-ratio:16/9; object-fit:cover;
  border-radius:6px; flex-shrink:0; background:#000; }
.video-list .v-info { display:flex; flex-direction:column; gap:.25rem; margin-right:auto; min-width:0; }
.video-list .v-sub { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.video-list .channel { color:var(--muted); font-size:.85rem; }
.video-list a { color:var(--accent); text-decoration:none; }
.badge { font-size:.75rem; padding:.15rem .5rem; border-radius:20px; background:#E3E0D6; }
.badge-done { background:var(--ok); }
.badge-error { background:var(--err); }
.lang { font-size:.75rem; color:var(--muted); }
.empty { color:var(--muted); }

/* Trang chủ: ngôn ngữ chưa có bài học nào */
.lang-empty { max-width:560px; margin:2.5rem auto; padding:2rem 1.5rem;
  text-align:center; background:var(--card); border:1px solid #E3E0D6;
  border-radius:18px; }
.le-emoji { font-size:2.6rem; line-height:1; }
.lang-empty h3 { margin:.6rem 0 .3rem; font-size:1.15rem; }
.lang-empty p { color:var(--muted); margin:.3rem 0 1rem; }
.le-actions { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.le-btn { display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .95rem; border:1px solid #E3E0D6; border-radius:999px;
  background:var(--bg); font-weight:600; text-decoration:none; }
.le-btn:hover { border-color:var(--accent); color:var(--accent); }
.le-admin { font-size:.85rem; margin-top:1.2rem; }

.status-box { padding:1rem; background:var(--card); border-radius:10px; margin:1rem 0; }
.yt-wrap { position:relative; width:100%; aspect-ratio:16/9; margin:1rem 0;
  background:#000; border-radius:10px; overflow:hidden; }
.yt-wrap iframe, .yt-wrap #yt-player { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Che hẳn video bằng lớp phủ đục + hình dễ thương */
.yt-cover { position:absolute; inset:0; z-index:3; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  cursor:pointer; text-align:center; color:#fff;
  background:linear-gradient(135deg,#5b7cfa 0%,#9775fa 50%,#f783ac 100%); }
.yt-wrap.covered .yt-cover { display:flex; }
.yt-cover .cover-art { font-size:4.5rem; line-height:1; animation:bob 2.6s ease-in-out infinite; }
.yt-cover p { margin:0; font-weight:700; font-size:1.15rem; opacity:.95; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

/* Bố cục 2 cột: trái video (sticky, lớn hơn), phải script + dictation (hẹp hơn) */
body.page-wide main { max-width:1680px; padding:1rem 1.1rem; }
/* Điện thoại: sát lề để dành chỗ cho nội dung. Phải khai báo SAU dòng trên:
   cùng độ đặc hiệu, mà @media không cộng thêm specificity -> thứ tự quyết định. */
@media (max-width:560px){ body.page-wide main { padding:5px; } }
.video-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:1rem; align-items:start; }
.col-left { position:sticky; top:.6rem; }
.col-left .yt-wrap { margin:.4rem 0; }
.video-tools { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.speed-ctl { display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9rem; }

/* ---- Smartphone: màn học/luyện chép gọn tối đa ---- */
@media (max-width:560px){
  .page-head h1 { font-size:1rem; }
  .v-meta { display:none; }

  .video-tools { gap:.35rem; margin:.3rem 0; }
  .video-tools button, .video-tools select, #toggle-blur {
    padding:.28rem .45rem; font-size:.72rem; }
  /* Toggle bản dịch được JS dời xuống hàng này: đẩy sát phải và giữ nguyên kích
     thước (không ăn theo padding của các nút chữ ở trên). */
  .video-tools .tr-toggle { margin-left:auto; padding:0; }
  .speed-ctl { font-size:.72rem; gap:.2rem; }

  .toolbar { margin-bottom:0; }
  .col-right .dictation { padding:.45rem; }
  .dict-goal { padding:4px; margin-bottom:0; }
  .dict-instruction { display:none; }

  /* Điều khiển câu: 1 hàng, nút chỉ còn icon, counter cùng dòng */
  .dict-controls { gap:.3rem; flex-wrap:nowrap; margin:.35rem 0; }
  .dict-counter { font-size:.72rem; white-space:nowrap; }
  .dictation .lbl { display:none; }        /* ẩn nhãn -> nút chỉ hiện icon */
  .dict-controls button { padding:.3rem .5rem; font-size:1rem; }

  #dict-input { font-size:.9rem; padding:.4rem .5rem; min-height:4.5rem; line-height:1.4; }

  .dict-actions { gap:.3rem; margin-top:.35rem; }
  .dict-actions button { padding:.32rem .55rem; font-size:1rem; }
}
.speed-ctl select { padding:.35rem .5rem; border-radius:8px; border:1px solid #E3E0D6;
  background:var(--card); color:var(--fg); }
.login-cta { margin-top:1rem; text-align:center; border-radius:14px; padding:1.3rem 1rem;
  background:linear-gradient(135deg,#FBF3EE,#F3EDE4); border:1px solid #E8CBB9; }
.login-cta p { margin:0 0 .9rem; }
.cta-btns { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.cta-btns a { text-decoration:none; padding:.55rem 1.2rem; border-radius:10px; font-weight:700; }
.cta-login { background:var(--accent); color:#ffffff; }
.cta-register { border:1px solid #3a4b5c; color:var(--fg); }
.col-right .transcript { max-height:74vh; padding:.3rem; }
.col-right .toolbar { margin-bottom:.6rem; }
.col-right .dictation { padding:.75rem; }
@media (max-width: 960px) {
  .video-layout { grid-template-columns:1fr; gap:1rem; }
  .col-left, .col-right { min-width:0; }
  .col-left { position:static; }
  .col-right .transcript { max-height:55vh; }
}
.toolbar { display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.mode-tabs { display:inline-flex; gap:3px; padding:3px; border-radius:11px;
  background:var(--card); border:1px solid #E3E0D6; }
.mode-tab { border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-weight:700; font-size:.9rem; padding:.42rem .75rem; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-width:0;
  transition:background .15s ease, color .15s ease; }
.mode-tab .tab-ic { line-height:1; font-size:1.2rem; }   /* tab chỉ có icon, không có chữ */
.mode-tab:hover { color:var(--fg); }
.mode-tab.active[data-mode="script"] { background:var(--accent); color:#ffffff; }
.mode-tab.active[data-mode="dictation"] { background:#2f9e44; color:#fff; }
.mode-tab.active[data-mode="shadowing"] { background:#1098ad; color:#fff; }
.mode-tab.active[data-mode="content"] { background:#f08c00; color:#fff; }
/* Tab chỉ còn icon -> mỗi chế độ một nền nhẹ riêng để phân biệt khi chưa chọn.
   (.mode-tab.active[...] đặc hiệu hơn nên vẫn thắng khi tab được chọn) */
.mode-tab[data-mode="dictation"] { color:#2b8a3e; background:rgba(47,158,68,.12); }
.mode-tab[data-mode="shadowing"] { color:#0c7d8f; background:rgba(16,152,173,.12); }
.mode-tab[data-mode="content"] { color:#e07d0a; background:rgba(240,140,0,.12); }
.mode-tab[data-mode="quiz"] { color:#6741d9; background:rgba(103,65,217,.12); }

/* Modal nội dung bài học */
.modal { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal[hidden] { display:none; }   /* tôn trọng thuộc tính hidden (nếu không modal luôn hiện) */
.modal-box { background:var(--card); border:1px solid #E3E0D6; border-radius:14px;
  width:100%; max-width:860px; max-height:88vh; overflow:hidden; padding:0;
  display:flex; flex-direction:column; }
.modal-body { flex:1 1 auto; overflow-y:auto; padding:1rem 1.15rem; min-height:0; }
#content-editor { background:#fff; color:#1a2433; min-height:300px; }
.ql-toolbar.ql-snow { position:sticky; top:0; z-index:2; background:#f1f3f5;
  border-radius:8px 8px 0 0; }
.ql-container.ql-snow { font-size:1rem; }
.content-view { white-space:normal; line-height:1.7; }
.content-view h1, .content-view h2, .content-view h3 { margin:.6em 0 .3em; }
.content-view p { margin:.5em 0; }
.content-view a { color:var(--accent); }
.content-view ul, .content-view ol { padding-left:1.4em; margin:.5em 0; }
.content-view blockquote { border-left:3px solid var(--accent); margin:.5em 0;
  padding-left:.8em; color:var(--muted); }
.content-view pre, .content-view code { background:#EFEBE0; padding:.2em .4em; border-radius:6px; }
.modal-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.15rem; border-bottom:1px solid #E3E0D6; }
.modal-head h3 { margin:0; }
.modal-x { background:transparent; border:0; color:var(--muted); font-size:1.3rem; cursor:pointer; line-height:1; }
.modal-actions { flex:0 0 auto; display:flex; gap:.6rem; padding:.8rem 1.15rem;
  border-top:1px solid #E3E0D6; }
.btn-save { background:#2f9e44; color:#fff; border:0; padding:.55rem 1.1rem;
  border-radius:8px; font-weight:600; cursor:pointer; }
@media (max-width:560px) {
  .modal { padding:.4rem; }
  .modal-head, .modal-body, .modal-actions { padding-left:.7rem; padding-right:.7rem; }
  .modal-head { padding-top:.6rem; padding-bottom:.6rem; }
  .modal-body { padding-top:.7rem; padding-bottom:.7rem; }
  .modal-actions { padding-top:.6rem; padding-bottom:.6rem; }
  .modal-box { max-height:95vh; }
}

@media (max-width:560px) {
  .mode-tabs { display:flex; width:100%; min-width:0; }
  .mode-tab { flex:1; min-width:0; text-align:center; padding:.5rem .2rem; }
  .toolbar-right { font-size:.8rem; gap:.5rem; }
  .toolbar-right .btn-ghost { padding:.3rem .5rem; }
}
.hint { color:var(--muted); font-size:.85rem; }

.play-progress { height:4px; background:var(--s2); border-radius:99px;
  overflow:hidden; margin:0 0 .7rem; }
.play-progress > i { display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#C15F3C,#E0996F); transition:width .15s linear; }

.transcript { max-height:60vh; overflow-y:auto; padding:.5rem; }
/* Nhật/Trung: bắt trình duyệt theo luật kinsoku (không để 、。ゃゅょ đứng đầu dòng)
   và xuống dòng theo cụm từ thay vì cắt bừa giữa từ. `auto-phrase` hiện chỉ
   Chrome/Edge hiểu; trình duyệt khác bỏ qua nhưng vẫn giữ được line-break. */
.transcript:lang(ja), .transcript:lang(zh) { line-break:strict; word-break:auto-phrase; }
.seg { position:relative; padding:.35rem .5rem; border-radius:8px; cursor:pointer; margin-bottom:.2rem; }
.seg:hover { background:#ECE9E0; }
.seg.active { background:rgba(217,119,87,.10); box-shadow:inset 3px 0 0 var(--accent); }
.word { cursor:pointer; padding:0 1px; border-radius:3px;
  text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:text-decoration-color .18s ease, color .18s ease; }
.word:hover { background:var(--accent); color:#fff; }
.word.saved { background:var(--ok); color:#fff; }
/* Đang phát: gạch chân màu tự nhiên (accent), hiện/ẩn mượt (không giật) */
.word.word-active { text-decoration-color:var(--accent); color:var(--accent); font-weight:600; }
/* Đang bấm giữ để tra từ: nền mờ báo "đã nhận", nhả tay trước 450ms thì mất */
.word.word-hold { background:rgba(217,119,87,.22); }
/* Cảm ứng: chặn menu "Sao chép / Tra cứu" của máy khi giữ lâu để tra từ
   (máy tính vẫn bôi đen chép chữ bình thường). Áp cho transcript và mọi khối
   có data-lookup (IELTS Reading, quiz, nội dung bài học...). */
@media (pointer:coarse) {
  .transcript .word, [data-lookup] {
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
}
/* bản dịch tiếng Việt dưới mỗi câu (ẩn mặc định, bật bằng toggle) */
.seg-tr { display:none; margin-top:3px; color:var(--teal); font-size:.9em;
  font-style:italic; padding-left:2px; }
.transcript.show-tr .seg-tr { display:block; }
.dict-tr-toggle { display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.88rem; cursor:pointer; margin:2px 0 6px;
  user-select:none; }
.dict-tr-toggle input { accent-color:var(--teal); cursor:pointer; }
.dict-tr:empty { display:none; }
.dict-tr { margin:2px 0 10px; padding:8px 12px; border-radius:8px;
  background:rgba(18,185,166,.1); border-left:3px solid var(--teal);
  color:var(--teal); font-style:italic; }
.toolbar-right { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
/* Bản dịch: toggle chỉ có icon "translate". Lúc tắt vẫn có nền nhạt để thấy đây
   là nút bấm được; lúc bật thì nền + nét icon chuyển sang màu bản dịch (teal). */
.tr-toggle { width:30px; height:30px; padding:0; border:0; border-radius:8px;
  background:var(--s2); color:var(--muted); line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .12s ease, color .12s ease; }
.tr-toggle .ic-tr { width:18px; height:18px; display:block; }
.tr-toggle:hover { background:#E3E0D6; color:var(--fg); }
.tr-toggle.on { background:rgba(62,142,126,.16); color:var(--teal); }   /* teal = màu bản dịch */

/* Admin: chọn cách chia lại câu (LLM hay luật BudouX) — 2 ô dính nhau, ô đang
   chọn nổi lên như một tab. Đặt ngay cạnh nút "Cải thiện transcript". */
.tx-mode { display:inline-flex; padding:2px; gap:2px; border-radius:9px;
  background:var(--s2); }
.tx-m { padding:.24rem .5rem; border:0; border-radius:7px; background:none;
  color:var(--muted); font-size:.72rem; font-weight:600; line-height:1.4;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease; }
.tx-m:hover { color:var(--fg); }
.tx-m.on { background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.12); }

.dictation { background:var(--card); padding:1rem; border-radius:10px; }
/* Shadowing: câu hiển thị lớn, dễ đọc để lặp lại */
.shadow-text { font-size:1.5rem; line-height:1.6; margin:.6rem 0 .2rem; min-height:2.2em;
  color:var(--fg); }
.shadow-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.shadow-toggles { display:flex; gap:.8rem; flex-wrap:wrap; }

/* ---- Kiểm tra phát âm (Web Speech) ---- */
.say-zone { display:flex; flex-direction:column; align-items:center; gap:.55rem;
  margin:1.1rem 0 .2rem; }
.mic-btn { position:relative; width:78px; height:78px; border:0; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 25%, #26b3c9, #0b7285);
  box-shadow:0 10px 24px rgba(16,152,173,.38), inset 0 1px 2px rgba(255,255,255,.35);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; }
.mic-btn:hover { transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(16,152,173,.5), inset 0 1px 2px rgba(255,255,255,.35); }
.mic-btn:active { transform:scale(.97); }
.mic-btn:disabled { background:#c7c3b8; box-shadow:none; cursor:not-allowed; transform:none; }
.mic-ico { position:relative; z-index:2; font-size:2rem; line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mic-rings { position:absolute; inset:0; z-index:1; pointer-events:none; }
.mic-rings i { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.7);
  opacity:0; }
/* Đang thu: nút đỏ + sóng lan toả */
.mic-btn.recording { background:radial-gradient(120% 120% at 30% 25%, #ff6b6b, #c92a2a);
  box-shadow:0 10px 26px rgba(224,49,49,.5), inset 0 1px 2px rgba(255,255,255,.35); }
.mic-btn.recording .mic-rings i { animation:mic-wave 1.8s ease-out infinite; }
.mic-btn.recording .mic-rings i:nth-child(2){ animation-delay:.6s; }
.mic-btn.recording .mic-rings i:nth-child(3){ animation-delay:1.2s; }
@keyframes mic-wave { 0% { transform:scale(1); opacity:.6; }
  100% { transform:scale(2.1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .mic-btn.recording .mic-rings i { animation:none; } }
.say-status { color:var(--muted); font-size:.9rem; text-align:center; min-height:1.2em; }
.say-status.err { color:var(--err); }

/* Thẻ kết quả: vòng % + danh sách từ */
.score-card { display:flex; align-items:center; gap:1.1rem; margin-top:.9rem;
  padding:.9rem 1rem; border-radius:14px; background:var(--s2);
  border:1px solid #E8CBB9; animation:score-in .28s ease both; }
.score-card[hidden] { display:none; }
@keyframes score-in { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
.score-ring { position:relative; width:104px; height:104px; flex:none; }
.score-ring svg { width:104px; height:104px; }
.score-ring .ring-bg { fill:none; stroke:#E3E0D6; stroke-width:9; }
.score-ring .ring-fg { fill:none; stroke:#2f9e44; stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1), stroke .3s ease; }
.score-card.good .ring-fg { stroke:#2f9e44; }
.score-card.mid  .ring-fg { stroke:#f08c00; }
.score-card.low  .ring-fg { stroke:#e8590c; }
.ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; }
.ring-num b { font-size:1.7rem; font-weight:800; color:var(--fg); }
.ring-num span { font-size:.8rem; color:var(--muted); margin-left:1px; }
.score-side { min-width:0; flex:1; }
.score-caption { font-weight:800; font-size:1.05rem; margin-bottom:.4rem; }
.score-card.good .score-caption { color:#2e7d32; }
.score-card.mid  .score-caption { color:#c76a00; }
.score-card.low  .score-caption { color:#c92a2a; }
.score-words { display:flex; flex-wrap:wrap; gap:.3rem; }
.score-words .w { font-size:.9rem; padding:.12rem .5rem; border-radius:20px; line-height:1.5;
  border:1px solid transparent; }
.score-words .w.ok { background:rgba(47,158,68,.14); color:#2e7d32; }
.score-words .w.miss { background:rgba(224,49,49,.10); color:#c92a2a; border-color:rgba(224,49,49,.35); }
.score-heard { margin-top:.45rem; color:var(--muted); font-size:.82rem; font-style:italic; }
.score-heard:empty { display:none; }
@media (max-width:560px){
  .score-card { gap:.8rem; padding:.7rem; }
  .score-ring, .score-ring svg { width:84px; height:84px; }
  .ring-num b { font-size:1.4rem; }
}
.dict-controls { display:flex; gap:.5rem; margin:.5rem 0; flex-wrap:wrap; align-items:center; }
.dict-counter { margin-left:auto; color:var(--muted); font-size:.9rem; }
#dict-input { width:100%; min-height:8.5rem; padding:.7rem .8rem; border-radius:8px;
  border:1px solid #E3E0D6; background:var(--bg); color:var(--fg);
  font-size:1.25rem; line-height:1.5; }
.dict-actions { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.btn-ghost { background:transparent; }
#dict-check { background:transparent; border:1px solid #3F7E4B; color:#2E6B3A; font-weight:700; }
#dict-check:hover { background:#EAF2EA; border-color:#2E6B3A; }
#dict-reveal { background:transparent; border:1px solid var(--accent); color:var(--accent); }
#dict-reveal:hover { background:#F7E7DF; border-color:var(--accent); }
#dict-hint { background:transparent; border:1px solid #C08A2E; color:#8A6014; font-weight:600; }
#dict-hint:hover { background:#F5EEDC; border-color:#8A6014; }
#dict-skip { background:transparent; border:1px dashed #C4763A; color:#A85A22; }
#dict-skip:hover { background:#F6EADD; border-color:#A85A22; }
#dict-loop.on { background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(193,95,60,.22); }
#dict-result { margin-top:.8rem; }
#dict-result .reveal { color:#2E6B3A; font-weight:600; background:#EAF2EA;
  padding:.5rem .7rem; border-radius:8px; }
#dict-result .correct { color:#2E7D46; font-weight:800; font-size:1.2rem;
  letter-spacing:.02em; animation:pop .3s ease; }
@keyframes pop { 0% { transform:scale(.85); opacity:0; } 100% { transform:scale(1); opacity:1; } }
#dict-next.ready { background:var(--ok); color:#fff; border-color:var(--ok);
  box-shadow:0 0 0 3px rgba(47,158,68,.35); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 3px rgba(47,158,68,.35); }
  50% { box-shadow:0 0 0 6px rgba(47,158,68,.15); } }
.diff-ok { color:var(--ok); }
.diff-miss { color:var(--err); }
.diff-hint { color:#8A6014; }   /* ký tự đầu đúng được gợi ý */

/* Dòng "Đáp án:" — từ chưa xong được CHE bằng thanh phủ (giấu hẳn chữ) kèm bấm để hiện.
   Chữ thật luôn nằm trong DOM để cố định bề rộng -> bấm hiện/ẩn KHÔNG đổi width, chữ sau không dịch. */
.ans-line { line-height:2.1; }
.mask-word { cursor:pointer; user-select:none; border-radius:6px;
  transition:background .12s ease; }
.mask-word .mw-real { color:transparent; background:var(--muted); border-radius:5px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  transition:color .12s ease, background .12s ease; }
.mask-word:hover .mw-real { background:#8d8a80; }
.mask-word.revealed .mw-real { color:var(--accent); background:transparent; }
.ans-full { color:var(--fg); }

/* 🎯 Mục tiêu ngày — hiện ngay trong Luyện chép, cập nhật khi gõ đúng câu */
.dict-goal { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--s2); border:1px solid #E8CBB9; border-radius:10px;
  padding:.45rem .75rem; margin-bottom:.7rem; font-size:.9rem; }
.dg-label { font-weight:700; color:var(--accent); }
.dg-count { font-variant-numeric:tabular-nums; font-weight:700; }
.dg-track { flex:1; min-width:90px; height:8px; background:var(--card);
  border-radius:99px; overflow:hidden; }
.dg-track > i { display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#C15F3C,#E0996F); transition:width .5s ease; }
.dg-done { color:var(--ok); font-weight:700; }

.v-meta { color:var(--muted); font-size:.9rem; margin-top:-.5rem; }
.v-meta a { color:var(--accent); text-decoration:none; }
.desc { margin-top:1rem; background:var(--card); border-radius:10px; padding:.5rem 1rem; }
.desc summary { cursor:pointer; color:var(--muted); }
.desc pre { white-space:pre-wrap; word-wrap:break-word; font-family:inherit; margin:.5rem 0 0; }

/* ---- Nhập theo channel ---- */
.batch-bar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--card); border:1px solid #E3E0D6; border-radius:10px;
  padding:.7rem 1rem; margin-bottom:1rem; position:sticky; top:0; z-index:5; }
.batch-bar button { margin-left:auto; background:var(--hl); border:0; font-weight:700; color:#ffffff; }
.ch-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.ch-item { display:flex; align-items:center; gap:.8rem; padding:.5rem .7rem;
  background:var(--card); border:1px solid #E3E0D6; border-radius:10px; }
.ch-rank { color:var(--muted); font-weight:700; width:1.6rem; text-align:right; flex-shrink:0; }
.ch-thumb { width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:6px;
  flex-shrink:0; background:#000; }
.ch-info { min-width:0; margin-right:auto; }
.ch-title { display:block; color:var(--fg); text-decoration:none; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ch-title:hover { color:var(--accent); }
.ch-meta { color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.ch-action { flex-shrink:0; }
.ch-check { color:var(--muted); font-size:.9rem; cursor:pointer; }
.ch-status { text-decoration:none; }
@media (max-width:620px){ .ch-thumb{ width:84px; } .ch-rank{ display:none; } }

.vocab-table { width:100%; border-collapse:collapse; }
.vocab-table th, .vocab-table td { text-align:left; padding:.5rem;
  border-bottom:1px solid #E3E0D6; vertical-align:top; }
.vocab-table .w { font-weight:600; }
/* Sổ từ vựng: tab lọc ngôn ngữ (cùng kiểu .mode-tabs ở trang bài học),
   cột số thứ tự không tiêu đề, nút xoá dạng icon */
.vocab-tabs { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px;
  margin:.6rem 0 1rem; border:1px solid #E3E0D6; border-radius:11px;
  background:var(--card); }
.vf { padding:.42rem .8rem; border:0; border-radius:8px; background:transparent;
  color:var(--muted); font-size:.9rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background .15s ease, color .15s ease; }
.vf i { font-style:normal; font-size:.82em; opacity:.6; }
.vf:hover { color:var(--fg); }
.vf.on { background:var(--accent); color:#fff; }
.vf.on i { opacity:.85; }
.vocab-table .vt-no { width:2.4rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.vocab-table .vt-act { width:2.6rem; text-align:right; }
.vocab-table .del { padding:.25rem .4rem; border:0; border-radius:8px;
  background:none; font-size:1rem; line-height:1; cursor:pointer; opacity:.55;
  transition:opacity .12s ease, background .12s ease; }
.vocab-table .del:hover { opacity:1; background:rgba(200,60,60,.12); }
.vocab-table .del:disabled { opacity:.3; cursor:default; }

/* ---- Sổ từ vựng: chế độ học (ôn SRS + 3 game) ---- */
.vocab-modes { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.vm { padding:.45rem .75rem; border:1px solid #E3E0D6; border-radius:999px;
  background:var(--card); color:var(--muted); font-size:.88rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.vm:hover { color:var(--fg); border-color:var(--accent); }
.vm.on { background:var(--accent); border-color:var(--accent); color:#fff; }

#vc-play { margin-top:.4rem; }
.vg-head { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem;
  border:1px solid #E3E0D6; border-radius:11px 11px 0 0; background:var(--card);
  font-weight:700; font-size:.92rem; }
.vg-head .vg-prog { margin-left:auto; color:var(--muted); font-weight:600;
  font-variant-numeric:tabular-nums; }
.vg-head .vg-score { color:var(--muted); font-weight:600; }
.vg-note { padding:.45rem .7rem; border:1px solid #E3E0D6; border-top:0;
  color:var(--muted); font-size:.85rem; background:var(--card); }
.vg-msg { padding:1.2rem; border:1px dashed #E3E0D6; border-radius:12px;
  color:var(--muted); line-height:1.6; text-align:center; }
.vg-done { padding:2rem 1rem; text-align:center; border:1px solid #E3E0D6;
  border-radius:12px; background:var(--card); }
.vg-big { font-size:2.6rem; line-height:1; }
.vg-done p { margin:.7rem 0 1.1rem; }
.vg-done .btn-primary-dark, .srs-acts .btn-primary-dark { padding:.7rem 1.5rem; }

/* thẻ ôn tập kiểu Anki */
.srs-card { padding:2rem 1rem; border:1px solid #E3E0D6; border-top:0;
  border-radius:0 0 12px 12px; background:var(--card); text-align:center; }
.srs-word { font-size:1.9rem; font-weight:700; word-break:break-word; }
.srs-back { margin-top:1rem; padding-top:1rem; border-top:1px dashed #E3E0D6; }
.srs-def { font-size:1.05rem; }
.srs-ctx { margin-top:.5rem; color:var(--muted); font-size:.9rem; font-style:italic; }
.srs-acts { display:flex; justify-content:center; gap:.6rem; margin-top:1.4rem; }
.srs-acts button { padding:.55rem 1.1rem; border-radius:10px; font-weight:700;
  cursor:pointer; font-size:.95rem; }

/* 4 mức chấm kiểu Anki: tên mức, khoảng cách hẹn lại, phím tắt.
   Grid 4 cột chứ không phải flex-wrap: luôn nằm đúng một hàng, kể cả trên điện
   thoại hẹp — xuống dòng thì cặp nút bị lệch tầm ngón cái, dễ bấm nhầm.
   Mỗi mức một sắc riêng lấy từ bảng màu chung: đỏ đất -> hổ phách -> xanh lá ->
   xanh mòng két, nhìn là đoán được mức nặng nhẹ mà không cần đọc chữ. */
.srs-grades { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem;
  width:100%; max-width:32rem; margin:0 auto; }
.srs-acts .vg-g { display:flex; flex-direction:column; align-items:center;
  gap:.14rem; min-width:0; padding:.5rem .3rem .42rem; border:1px solid;
  border-radius:11px; line-height:1.25; font-size:.92rem;
  transition:transform .1s ease, box-shadow .12s ease, background .12s ease; }
.srs-acts .vg-g:hover { transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(38,37,33,.10); }
.srs-acts .vg-g:active { transform:none; box-shadow:none; }
.srs-acts .vg-g b { font-weight:700; }
/* Khoảng cách hẹn lại: chữ nhỏ, nhạt hơn tên mức, không bao giờ xuống dòng. */
.srs-acts .vg-g i { font-style:normal; font-size:.74rem; font-weight:600;
  font-variant-numeric:tabular-nums; opacity:.78; white-space:nowrap; }
.srs-acts .vg-g kbd { font-size:.6rem; padding:0 .3rem; border-radius:4px;
  font-weight:700; color:inherit; background:rgba(38,37,33,.07); }

.srs-acts .vg-g1 { background:#FAEBE6; border-color:#E6C2B6; color:#A63A22; }
.srs-acts .vg-g1:hover { background:#F5DED5; }
.srs-acts .vg-g2 { background:#F8F0DE; border-color:#E4D3A9; color:#8A6014; }
.srs-acts .vg-g2:hover { background:#F2E7CB; }
/* "Được" là mức mặc định (phím Space) -> viền dày hơn để mắt bám vào; trừ lại
   1px padding cho bốn nút cao bằng nhau. */
.srs-acts .vg-g3 { background:#E7F1E9; border:2px solid #B4D2BA; color:#2E6B3A;
  padding:calc(.5rem - 1px) .3rem calc(.42rem - 1px); }
.srs-acts .vg-g3:hover { background:#DAEADD; }
.srs-acts .vg-g4 { background:#E4F0ED; border-color:#AAD0C8; color:#2F6F62; }
.srs-acts .vg-g4:hover { background:#D5E8E3; }

.srs-show kbd { margin-left:.45rem; font-size:.66rem; padding:.05rem .3rem;
  border-radius:4px; background:rgba(255,255,255,.22); font-weight:700; }

/* trắc nghiệm */
.vg-q { padding:1.5rem 1rem; border:1px solid #E3E0D6; border-top:0;
  background:var(--card); text-align:center; font-size:1.6rem; font-weight:700;
  word-break:break-word; }
.vg-opts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.6rem; }
.vg-opt { padding:.75rem .8rem; border:1px solid #E3E0D6; border-radius:11px;
  background:var(--card); color:var(--fg); font-size:.95rem; text-align:left;
  cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.vg-opt:hover { border-color:var(--accent); }
.vg-opt.ok { border-color:#2f7d4f; background:rgba(47,125,79,.14); }
.vg-opt.no { border-color:#c0523f; background:rgba(192,82,63,.14); }

/* ghép từ */
.mt-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.6rem; }
.mt-col { display:flex; flex-direction:column; gap:.5rem; }
.mt-cell { padding:.7rem .7rem; border:1px solid #E3E0D6; border-radius:11px;
  background:var(--card); color:var(--fg); font-size:.92rem; text-align:left;
  cursor:pointer; transition:opacity .2s ease, border-color .12s ease; }
.mt-cell:hover { border-color:var(--accent); }
.mt-cell.sel { border-color:var(--accent); background:rgba(217,119,87,.14); }
.mt-cell.bad { border-color:#c0523f; background:rgba(192,82,63,.14); }
.mt-cell.gone { opacity:.18; pointer-events:none; }

/* bắn phi thuyền */
.sh-target { padding:.6rem .7rem; border:1px solid #E3E0D6; border-top:0;
  background:var(--card); text-align:center; font-size:1.05rem; }
.sh-field { position:relative; height:340px; overflow:hidden;
  border:1px solid #E3E0D6; border-top:0; border-radius:0 0 12px 12px;
  background:linear-gradient(#12131d, #232640); }
.sh-ship { position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  font-size:1.7rem; line-height:1; transition:left .12s ease; }
.sh-b { position:absolute; padding:.4rem .3rem; border:1px solid #6f7bd1;
  border-radius:9px; background:rgba(60,70,130,.85); color:#fff;
  font-size:.78rem; line-height:1.2; text-align:center; cursor:pointer;
  overflow:hidden; }
.sh-b:hover { border-color:#fff; }
.sh-b.boom { border-color:#f0a; background:rgba(240,80,140,.9); }
.sh-bullet { position:absolute; width:3px; height:14px; margin-left:-1px;
  border-radius:2px; background:#ffd35c; transition:top .2s linear; }

@media (max-width:620px) {
  .vg-opts { grid-template-columns:1fr; }
  /* Ghép từ vẫn giữ 2 cột (từ | nghĩa) vì xếp chồng thì hết ghép được. */
  .mt-grid { gap:.4rem; }
  .mt-cell { padding:.55rem .45rem; font-size:.82rem; }
  .srs-word { font-size:1.5rem; }
  .vg-q { font-size:1.3rem; padding:1.1rem .8rem; }
  .sh-field { height:280px; }
  /* 4 nút chấm vẫn giữ đúng một hàng; bù lại thu nhỏ chữ và bỏ gợi ý phím tắt
     (điện thoại làm gì có bàn phím rời để bấm 1..4). */
  .srs-card { padding:1.5rem .6rem; }
  .srs-grades { gap:.35rem; }
  .srs-acts .vg-g { padding:.45rem .15rem; font-size:.8rem; }
  .srs-acts .vg-g3 { padding:calc(.45rem - 1px) .15rem; }
  .srs-acts .vg-g i { font-size:.66rem; }
  .srs-acts .vg-g kbd, .srs-show kbd { display:none; }
}
/* Máy hẹp (360px trở xuống): nhãn dài nhất là "11,9 tháng" — thu chữ thêm một
   nấc để nó không tràn ra khỏi cột. */
@media (max-width:400px) {
  .srs-grades { gap:.28rem; }
  .srs-acts .vg-g { padding:.45rem .1rem; font-size:.75rem; }
  .srs-acts .vg-g3 { padding:calc(.45rem - 1px) .1rem; }
  .srs-acts .vg-g i { font-size:.61rem; }
}

/* Lịch sử đăng nhập: user-agent hiện bản rút gọn, hover mới xem đầy đủ (title). */
.ua { border-bottom:1px dotted var(--muted); cursor:help; }

/* ---- Trang admin: đặt cấp độ hàng loạt ---- */
.lvl-filter { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem;
  margin:1rem 0; padding:.8rem; border:1px solid #E3E0D6; border-radius:12px;
  background:var(--card); }
.lvl-filter label { display:flex; flex-direction:column; gap:.25rem;
  font-size:.8rem; font-weight:700; color:var(--muted); }
.lvl-filter select, .lvl-filter input { padding:.4rem .5rem; border-radius:9px;
  border:1px solid #dee2e6; background:#fff; color:var(--fg); font-size:.9rem;
  max-width:270px; }
.lvl-filter button { background:var(--accent); color:#fff; border:0; padding:.45rem 1rem;
  border-radius:9px; font-weight:700; cursor:pointer; }
.lvl-clear { align-self:center; font-size:.85rem; color:var(--muted); }

.lvl-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin:0 0 .8rem; padding:.6rem .8rem; border-radius:12px;
  background:#FBEEE7; border:1px solid #E8CBB9; font-size:.88rem; }
.lvl-bulk select { padding:.35rem .5rem; border-radius:9px; border:1px solid #dcc3b3;
  background:#fff; color:var(--fg); }
.lvl-bulk button { background:#111827; color:#fff; border:0; padding:.4rem .9rem;
  border-radius:9px; font-weight:700; cursor:pointer; }
.lvl-bulk .hint { flex:1 1 100%; margin:0; }

.lvl-table td, .lvl-table th { vertical-align:middle; }
.lvl-table .lvl-sel { width:100%; padding:.32rem .4rem; border-radius:9px;
  border:1px solid #dee2e6; background:#fff; color:var(--fg); font-weight:700; }
.lvl-table .lvl-sel.lvl-dirty { border-color:#f59f00; background:#fff9db; }
.lvl-table tr.lvl-missing .lvl-sel { border-color:#ffc9c9; background:#fff5f5; }
.lvl-table tr.lvl-on { background:#f1f3f5; }
.lvl-table .lvl-ch { font-size:.82rem; color:var(--muted); }
.lvl-table a { color:var(--accent); text-decoration:none; }
.lvl-table a:hover { text-decoration:underline; }
.lvl-save { position:sticky; bottom:0; padding:.8rem 0; background:var(--bg); }
.lvl-save button { background:#2f9e44; color:#fff; border:0; padding:.6rem 1.4rem;
  border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer; }
@media (max-width:700px){
  .lvl-table .lvl-ch, .lvl-table th:nth-child(4),
  .lvl-table td:nth-child(5), .lvl-table th:nth-child(5) { display:none; }
  .lvl-filter select, .lvl-filter input { max-width:none; width:100%; }
  .lvl-filter label { flex:1 1 100%; }
}

/* ===================== Quiz (Kiểm tra) ===================== */
.quiz-wrap { max-width:760px; margin:0 auto; }
.quiz-head { text-align:center; margin-bottom:1rem; position:relative; }
.quiz-head h1 { margin:.2rem 0 .1rem; font-size:1.6rem; }
.quiz-sub { color:var(--muted); margin:0; }
.quiz-back { position:absolute; left:0; top:.3rem; color:var(--accent); font-weight:600; text-decoration:none; }
.quiz-muted { color:var(--muted); font-size:.92rem; }
.quiz-card { background:var(--card); border:1px solid #E3E0D6; border-radius:14px;
  padding:1.2rem 1.3rem; margin-bottom:1rem; }
.quiz-card .btn-primary-dark { width:100%; margin-top:.6rem; }
.quiz-regen { width:100%; margin-top:.5rem; }

.quiz-intro-row { display:flex; gap:1rem; text-align:center; margin-bottom:.4rem; }
.quiz-intro-row > div { flex:1; background:var(--s2); border-radius:12px; padding:.7rem; }
.quiz-intro-row b { display:block; font-size:1.5rem; color:var(--fg); }
.quiz-intro-row span { font-size:.8rem; color:var(--muted); }

.quiz-progress { height:8px; background:var(--s2); border-radius:6px; overflow:hidden; margin-bottom:.4rem; }
.quiz-progress i { display:block; height:100%; width:0; background:var(--accent);
  border-radius:6px; transition:width .3s ease; }
.quiz-count { text-align:right; color:var(--muted); font-size:.85rem; margin-bottom:.5rem; }

.q-type { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:#0c7d8f; background:rgba(16,152,173,.12); padding:.15rem .6rem; border-radius:20px; margin-bottom:.7rem; }
.q-src { font-size:1.2rem; font-weight:600; line-height:1.5; color:var(--fg); }
.q-vi { color:var(--muted); font-size:.95rem; margin-top:.2rem; }
.q-options { display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.q-opt { display:flex; align-items:center; gap:.6rem; text-align:left; width:100%;
  padding:.75rem .9rem; border:1.5px solid #E3E0D6; border-radius:12px; background:#fff;
  font-size:1rem; color:var(--fg); cursor:pointer; transition:border-color .12s, background .12s; }
.q-opt:hover { border-color:var(--accent); }
.q-opt.selected { border-color:var(--accent); background:rgba(193,95,60,.08); }
.q-mark { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--s2); font-weight:700; font-size:.85rem; }
.q-opt.selected .q-mark { background:var(--accent); color:#fff; }
.q-fill { width:100%; margin-top:1rem; padding:.8rem .9rem; font-size:1.05rem;
  border:1.5px solid #E3E0D6; border-radius:12px; background:#fff; color:var(--fg); }
.q-fill:focus { outline:0; border-color:var(--accent); }

/* margin-bottom cho bằng .quiz-card: nếu không, hàng nút Trước/Tiếp dính sát
   thẻ "Lịch sử làm bài" ngay bên dưới. */
.quiz-nav { display:flex; gap:.6rem; margin-bottom:1rem; }
.quiz-nav button { flex:1; }

/* Kết quả */
.quiz-score-card { display:flex; align-items:center; gap:1.2rem; }
.quiz-score-card.good .ring-fg { stroke:#2f9e44; }
.quiz-score-card.mid  .ring-fg { stroke:#f08c00; }
.quiz-score-card.low  .ring-fg { stroke:#e8590c; }
.quiz-score-card.good .score-caption { color:#2e7d32; }
.quiz-score-card.mid  .score-caption { color:#c76a00; }
.quiz-score-card.low  .score-caption { color:#c92a2a; }
.quiz-score-card .score-side { flex:1; }
.quiz-score-card .btn-primary-dark { width:auto; padding:.6rem 1.4rem; }

.q-rev { border:1px solid #E3E0D6; border-left-width:4px; border-radius:10px;
  padding:.7rem .9rem; margin-bottom:.6rem; background:var(--card); }
.q-rev.ok { border-left-color:#2f9e44; }
.q-rev.bad { border-left-color:#e8590c; }
.q-rev-h { font-size:1.02rem; line-height:1.45; }
.q-rev-badge { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:#fff; font-size:.8rem; margin-right:.3rem; vertical-align:middle; }
.q-rev.ok .q-rev-badge { background:#2f9e44; }
.q-rev.bad .q-rev-badge { background:#e8590c; }
.q-rev-a { font-size:.92rem; margin-top:.35rem; }
.q-rev-x { font-size:.9rem; margin-top:.4rem; color:#5b6472; background:var(--s2);
  padding:.5rem .7rem; border-radius:8px; }
.q-listen { font-size:.82rem; color:var(--accent); text-decoration:none; font-weight:600; margin-left:.3rem; }
.q-good { color:#2e7d32; font-weight:600; }
.q-mid { color:#c76a00; font-weight:600; }
.q-low { color:#c92a2a; font-weight:600; }

.quiz-history table { width:100%; border-collapse:collapse; font-size:.92rem; }
.quiz-history th, .quiz-history td { text-align:left; padding:.45rem .3rem; border-bottom:1px solid #EEEBE2; }
.quiz-history th { color:var(--muted); font-weight:600; }

/* Quiz: thu gọn cụm số liệu trên điện thoại + dẫn chứng/bản dịch */
@media (max-width:560px){
  .quiz-intro-row { gap:.5rem; }
  .quiz-intro-row > div { padding:.5rem .3rem; border-radius:10px; }
  .quiz-intro-row b { font-size:1.15rem; }
  .quiz-intro-row span { font-size:.7rem; }
}
.q-evi { margin-top:.5rem; font-size:.92rem; color:var(--fg); background:var(--s2);
  padding:.5rem .7rem; border-radius:8px; }
.q-evi b { color:#0c7d8f; }
.q-evi-vi { font-size:.88rem; color:var(--muted); margin-top:.15rem; }
.q-tr { color:var(--muted); font-weight:400; }

/* ============ Video panda (Premium) ============ */
/* Vương miện thay cho lượt view ở góc trái trên của thẻ */
.card-crown { position:absolute; top:6px; left:6px; font-size:1.25rem; line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.card-link.locked { cursor:pointer; }

/* Checkbox gán panda (thẻ video + bảng user) */
.panda-toggle { display:inline; margin:0 0 .35rem; }
.panda-toggle label { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem;
  font-weight:700; color:#a4761b; cursor:pointer; }
.panda-toggle input { accent-color:#e0a11a; cursor:pointer; }

/* Modal Premium — bắt mắt & vui vẻ */
.pm-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center;
  justify-content:center; padding:1.2rem; background:rgba(28,22,10,.55);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .2s ease; }
.pm-overlay.show { opacity:1; }
.pm-overlay[hidden] { display:none; }
.pm-card { position:relative; width:100%; max-width:400px; text-align:center;
  background:linear-gradient(160deg,#fff 0%,#FFF6E6 100%);
  border:1px solid #F1D9A6; border-radius:22px; padding:2rem 1.6rem 1.6rem;
  box-shadow:0 24px 60px rgba(60,40,0,.28);
  transform:translateY(12px) scale(.96); transition:transform .25s cubic-bezier(.2,1.3,.4,1); }
.pm-overlay.show .pm-card { transform:none; }
.pm-close { position:absolute; top:12px; right:14px; border:0; background:transparent;
  font-size:1.1rem; color:#b9a06a; cursor:pointer; line-height:1; }
.pm-emoji { position:relative; display:inline-block; font-size:3.4rem; line-height:1; margin-bottom:.4rem; }
.pm-emoji .pm-crown { position:absolute; top:-14px; right:-10px; font-size:1.9rem;
  transform:rotate(14deg); animation:pm-bounce 1.6s ease-in-out infinite; }
@keyframes pm-bounce { 0%,100%{ transform:rotate(14deg) translateY(0); } 50%{ transform:rotate(14deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .pm-emoji .pm-crown { animation:none; } }
.pm-card h2 { margin:.2rem 0 .5rem; font-size:1.5rem; color:#9a6a00; }
.pm-card p { color:#6b5a3a; line-height:1.6; margin:0 0 1.2rem; }
.pm-actions { display:flex; flex-direction:column; gap:.55rem; }
.pm-actions .btn-primary-dark { background:linear-gradient(135deg,#E0A11A,#C1791F); }
.pm-actions .btn-primary-dark:hover { background:linear-gradient(135deg,#f0af22,#d4862a); }
.pm-actions .btn-ghost { border:1px solid #E3D5B0; }

/* Trang lỗi 403 */
.err-wrap { max-width:520px; margin:3rem auto; text-align:center; }
.err-emoji { font-size:3.5rem; }
.err-wrap h1 { margin:.4rem 0; }
.err-wrap p { color:var(--muted); line-height:1.6; margin:.3rem 0; }
.err-sub { margin-bottom:1.2rem !important; }
.err-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }

/* ===================== Tra từ (word lookup) ===================== */
.word { cursor:pointer; }
.word-search-fab { position:fixed; z-index:1500; display:none; width:30px; height:30px; padding:0;
  border:0; border-radius:50%; background:var(--accent); color:#fff; font-size:.85rem; line-height:30px;
  cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.28); }
.word-search-fab:hover { filter:brightness(1.06); }

.wl-pop { position:fixed; z-index:1600; width:300px; max-width:calc(100vw - 16px);
  background:var(--card); border:1px solid #E3E0D6; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px rgba(20,30,50,.22); }
.wl-head { display:flex; align-items:center; gap:.4rem; padding:.65rem .9rem;
  border-bottom:1px solid #EEEBE2; background:var(--s2); }
.wl-word { flex:1; font-size:1.15rem; color:var(--fg); word-break:break-word; }
.wl-spk, .wl-x { border:0; background:transparent; cursor:pointer; font-size:1rem; color:var(--muted); padding:2px 5px; }
.wl-spk:hover, .wl-x:hover { color:var(--fg); }
.wl-body { padding:.8rem .9rem; max-height:60vh; overflow:auto; }
.wl-loading { color:var(--muted); padding:.4rem 0; }
.wl-err { color:#c92a2a; padding:.4rem 0; }
/* Nhãn khi nghĩa đến từ nguồn dự phòng (DeepSeek lỗi) */
.wl-alt { margin:.1rem 0 .5rem; padding:.35rem .5rem; border-radius:8px;
  background:#FDF3E3; color:#8a5a1b; font-size:.8rem; line-height:1.35; }
.wl-sub { color:var(--muted); font-size:.9rem; margin-bottom:.6rem; }
.wl-sec { margin-bottom:.7rem; }
.wl-lb { display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#0c7d8f; margin-bottom:.25rem; }
.wl-sec ul { margin:0; padding-left:1.1rem; }
.wl-sec li { margin:.12rem 0; }
.wl-ex { font-style:italic; }
.wl-exvi { color:var(--muted); font-size:.92rem; margin-top:.15rem; }
.wl-foot { font-size:.85rem; color:var(--muted); border-top:1px solid #EEEBE2; padding-top:.5rem; margin-bottom:.7rem; }
.wl-save { width:100%; }
.wl-save:disabled { opacity:.7; cursor:default; }

.wl-toast { position:fixed; left:50%; bottom:26px; z-index:1700;
  transform:translateX(-50%) translateY(12px); background:#1f2937; color:#fff;
  padding:.6rem 1.1rem; border-radius:999px; font-weight:600; font-size:.92rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; }
.wl-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== IELTS Reading ===================== */
.rd-list-wrap, .rd-detail { max-width:820px; margin:0 auto; }
.rd-count { color:var(--muted); margin-top:-.3rem; }
.rd-empty { color:var(--muted); background:var(--s2); padding:1rem 1.2rem; border-radius:12px; }
.rd-empty code { background:rgba(0,0,0,.06); padding:.05rem .35rem; border-radius:5px; }

.rd-list { display:flex; flex-direction:column; gap:.5rem; }
.rd-item { display:flex; align-items:center; gap:.9rem; padding:.75rem 1rem; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid #E3E0D6; border-radius:12px; transition:border-color .12s, box-shadow .12s; }
.rd-item:hover { border-color:var(--accent); box-shadow:0 3px 12px rgba(20,30,50,.06); }
.rd-item-num { flex:none; width:64px; font-weight:700; font-size:.82rem; color:var(--muted); }
.rd-item-body { flex:1; min-width:0; }
.rd-item-en { font-weight:600; color:var(--fg); }
.rd-item-vi { color:var(--muted); font-size:.9rem; }
.rd-badge { flex:none; font-size:.7rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; }
.rd-badge.free { background:rgba(47,158,68,.14); color:#2f9e44; }
.rd-badge.pro { background:rgba(224,161,26,.16); color:#a4761b; }

.rd-pager { display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:1.4rem 0; }
.rd-pager a { color:var(--accent); font-weight:600; text-decoration:none; }
.rd-pager a:hover { text-decoration:underline; }
.rd-pager .disabled { color:var(--muted); opacity:.45; }
.rd-pageinfo { color:var(--muted); font-size:.9rem; }

.rd-back { color:var(--accent); font-weight:600; text-decoration:none; }
.rd-head { margin:.6rem 0 1rem; }
.rd-lnum { color:var(--muted); font-size:.9rem; margin-bottom:.2rem; }
.rd-head h1 { margin:.1rem 0; font-size:1.5rem; line-height:1.3; }
.rd-title-vi { color:var(--muted); margin:.15rem 0 0; }

.rd-source { font-size:.78rem; color:#5b6472; background:#EAF4FB; border:1px solid #CFE6F5;
  border-radius:8px; padding:.4rem .7rem; margin:0 auto 1rem; text-align:center; }
.rd-source a { color:#2b7fc4; text-decoration:none; }
.rd-source a:hover { text-decoration:underline; }

.rd-modes { display:flex; width:max-content; max-width:100%; margin:0 auto 1.2rem; gap:2px;
  padding:4px; background:var(--s2); border:1px solid #E3E0D6; border-radius:12px; }
.rd-modes button { border:0; background:transparent; color:var(--muted); border-radius:9px;
  padding:.45rem 1.1rem; font-weight:700; cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s; }
.rd-modes button:hover { color:var(--fg); }
.rd-modes button.active { background:var(--card); color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.14); }

.rd-content .rd-row { margin-bottom:.85rem; padding-bottom:.85rem; border-bottom:1px solid #F0EDE4; }
.rd-en { color:var(--fg); line-height:1.65; }
.rd-vi { color:var(--muted); line-height:1.65; margin-top:.15rem; }
.rd-content.mode-en .rd-vi { display:none; }
.rd-content.mode-vi .rd-en { display:none; }
.rd-content.mode-col .rd-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start; }
.rd-content.mode-col .rd-vi { margin-top:0; }
@media (max-width:560px){
  /* Ưu tiên nội dung: thu gọn lề 2 bên tối đa */
  body.reading-page main { padding:4px 3px; }
  .rd-detail { max-width:none; }
  .rd-head { margin:.4rem 0 .7rem; }
  .rd-head h1 { font-size:1.25rem; }
  /* GIỮ 2 cột ở điện thoại: giảm gap + cỡ chữ để vừa màn hình */
  .rd-content.mode-col .rd-row { grid-template-columns:1fr 1fr; gap:.5rem; }
  .rd-content.mode-col .rd-en, .rd-content.mode-col .rd-vi { font-size:1.2rem; line-height:1.5; }
  .rd-content .rd-row { margin-bottom:.6rem; padding-bottom:.6rem; }
  .rd-modes button { padding:.4rem .7rem; }
  .rd-item-num { width:52px; }
}

.rd-vocab { margin-top:2rem; background:var(--s2); border-radius:12px; padding:1rem 1.2rem; }
.rd-vocab h2 { margin:.2rem 0 .6rem; font-size:1.15rem; }
.rd-vocab ul { margin:0; padding-left:1.1rem; }
.rd-vocab li { margin:.3rem 0; line-height:1.5; }
.rd-ipa { color:var(--muted); font-size:.9rem; }

/* Nghe từng câu: icon lặp nằm sát góc trên-phải câu đang phát; padding-right
   vừa đủ bằng bề rộng icon để chữ không bao giờ chạy xuống dưới nó. */
.seg-actions { position:absolute; top:0; right:0; z-index:3; display:none; gap:4px; }
.seg.active .seg-actions { display:flex; }
.seg.active { padding-right:24px; }
/* Không viền, không tô nền: chỉ có nét icon. Đổ bóng bằng drop-shadow (bám theo
   hình vẽ, khác box-shadow đổ theo khung vuông) để icon nổi khỏi nền câu. */
.seg-act { width:24px; height:24px; padding:0; border:0; background:none;
  color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:color .12s ease; }
.seg-act .ic-loop { width:16px; height:16px; display:block;
  filter:drop-shadow(0 1px 1.5px rgba(38,37,33,.3));
  transition:filter .12s ease; }
.seg-act:hover { color:var(--fg); }
.seg-act:hover .ic-loop { filter:drop-shadow(0 1px 3px rgba(38,37,33,.45)); }
.seg-act.on { color:var(--accent); }
/* bật: nét đậm hơn + quay chậm để biết câu đang được lặp */
.seg-act.on .ic-loop { stroke-width:2.6; animation:seg-loop-spin 3s linear infinite; }
@keyframes seg-loop-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .seg-act.on .ic-loop { animation:none; }
}
@media (max-width:560px){
  .seg-act { width:26px; height:26px; }                   /* dễ bấm hơn trên điện thoại */
  .seg-act .ic-loop { width:18px; height:18px; }
  .seg.active { padding-right:28px; }
}

/* ==================== Bộ từ vựng (TOEIC / Oxford / IELTS / sổ tay) ========= */
.ws-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); }
/* Nền thẻ = lớp màu tông pha rất nhạt trên nền giấy (xem khối "Tông màu" bên
   dưới). Giữ ở mức ~9% -> nhìn ra ngay bộ nào là bộ nào mà chữ vẫn đạt AA. */
.ws-card { display:flex; flex-direction:column; gap:.55rem; padding:18px 18px 16px;
  border:1px solid #E3E0D6; border-left:5px solid var(--tone, var(--teal)); border-radius:14px;
  background:linear-gradient(135deg, var(--tint, transparent),
             var(--tint2, transparent) 62%), var(--card);
  color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ws-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(38,37,33,.09); }
.ws-card h2 { margin:0; font-size:1.12rem; }
/* Cả thẻ là một link (::after phủ kín), riêng hàng nút nổi lên trên để bấm được. */
.ws-card { position:relative; }
.ws-link { color:inherit; text-decoration:none; }
.ws-link::after { content:""; position:absolute; inset:0; border-radius:14px; }
.ws-act { position:relative; z-index:1; margin-top:.6rem;
  display:flex; align-items:center; min-height:2.1rem; }
.ws-act .btn-primary-dark { padding:.5rem .9rem; font-size:.85rem; text-decoration:none; }
.ws-due { color:var(--coral); }
.ws-top { display:flex; align-items:center; justify-content:space-between; }
.ws-emoji { font-size:1.7rem; line-height:1; }
.ws-count { font-size:.78rem; font-weight:700; color:var(--muted);
  background:var(--s2); border-radius:99px; padding:.2rem .6rem; }
.ws-desc { margin:0; color:var(--muted); font-size:.87rem; line-height:1.5; flex:1; }
.ws-foot { margin-top:.3rem; }
.ws-track { height:7px; background:var(--s2); border-radius:99px; overflow:hidden; margin-bottom:5px; }
.ws-track i { display:block; height:100%; border-radius:99px; background:var(--tone, var(--teal));
  transition:width .6s ease; }
.ws-num { font-size:.76rem; color:var(--muted); font-weight:600; }
/* Tông màu theo từng bộ: --tone cho vạch trái + thanh tiến độ, --tint/--tint2
   là hai điểm dừng của lớp nền. Bốn tông khác hẳn nhau về sắc (xanh lá / đất /
   xanh dương / vàng) nên phân biệt được cả khi in trắng đen. */
.ws-teal   { --tone:var(--teal);   --tint:rgba(62,142,126,.09);  --tint2:rgba(62,142,126,.02); }
.ws-coral  { --tone:var(--coral);  --tint:rgba(193,95,60,.09);   --tint2:rgba(193,95,60,.02); }
.ws-sky    { --tone:var(--sky);    --tint:rgba(74,119,150,.09);  --tint2:rgba(74,119,150,.02); }
.ws-mine   { --tone:var(--gold);   --tint:rgba(148,114,31,.09);  --tint2:rgba(148,114,31,.02); }

/* Ghi chú hạn mức sổ tay (100 từ / 3000 từ với Panda). Khi đầy -> viền + chữ
   màu cảnh báo để user hiểu vì sao nút lưu không còn tác dụng. */
.quota-note { margin:.5rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.6; }
.quota-note.is-full { color:var(--err); font-weight:600; }
.quota-note a { color:var(--accent); }

/* ---- trang chi tiết một bộ ---- */
/* Đầu trang chi tiết dùng lại đúng tông của thẻ ngoài danh sách (--tone/--tint
   do class ws-* đặt) để vào trang không bị mất mạch màu. */
.wd-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:1rem;
  background:linear-gradient(135deg, var(--tint, transparent),
             var(--tint2, transparent) 62%), var(--card);
  border:1px solid #E3E0D6; border-left:5px solid var(--tone, var(--teal)); border-radius:14px; }
.wd-head-main { flex:1; min-width:210px; }
.wd-head h1 { margin:0; font-size:1.3rem; }
.wd-src { margin:.25rem 0 0; font-size:.8rem; color:var(--muted); }
.wd-src a { color:var(--muted); }
.wd-prog { min-width:170px; }

.wd-nav { display:flex; gap:.9rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:.9rem; }
.wd-secs { display:flex; flex-wrap:wrap; gap:4px; padding:3px; border:1px solid #E3E0D6;
  border-radius:11px; background:var(--card); }
.wd-sec { padding:.42rem .8rem; border-radius:8px; color:var(--muted);
  font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.wd-sec:hover { color:var(--fg); }
.wd-sec.on { background:var(--accent); color:#fff; }
.wd-pick { display:flex; flex-direction:column; gap:3px; }
.wd-pick select { padding:.5rem .6rem; border:1px solid #E3E0D6; border-radius:9px;
  background:var(--card); color:var(--fg); font-size:.9rem; max-width:min(100%, 340px); }

.wd-bar { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin:.2rem 0 .6rem; }
.wd-title { margin:0; font-size:1.05rem; }
.wd-bar .btn-primary-dark { padding:.55rem 1rem; font-size:.88rem; text-decoration:none; }
.wd-bar .btn-primary-dark:disabled { opacity:.45; cursor:default; }
.wd-acts { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.wd-study { text-decoration:none; white-space:nowrap; }
.wd-head .wd-study { padding:.55rem 1rem; font-size:.88rem; }
/* Là thẻ <a> nên phải tự vẽ viền (button đã có sẵn từ style chung). */
.wd-acts a.btn-ghost { padding:.52rem .9rem; font-size:.88rem; border-radius:10px;
  border:1px solid var(--accent); color:var(--accent); font-weight:600; }
.wd-acts a.btn-ghost:hover { background:#F7E7DF; }
/* Khoảng cách ôn cạnh mỗi từ; tới hạn thì đổi sang màu nhấn cho nổi. */
.wd-box { display:inline-block; margin-left:.35rem; padding:.05rem .35rem;
  border-radius:99px; background:var(--s2); color:var(--muted); font-size:.66rem;
  font-weight:800; white-space:nowrap; vertical-align:middle; }
.wd-box.due { background:var(--coral); color:#fff; }
.wd-wrap { overflow-x:auto; }

.wd-table td { vertical-align:top; }
.wd-table .wd-w { min-width:9.5rem; }
.wd-table .w { font-size:1.02rem; }
.wd-cefr { display:inline-block; margin-left:.35rem; padding:.05rem .35rem; border-radius:5px;
  background:var(--s2); color:var(--muted); font-size:.66rem; font-weight:800; vertical-align:middle; }
.wd-ipa { display:block; color:var(--muted); font-size:.82rem; }
.wd-pos { display:block; color:var(--muted); font-size:.75rem; font-style:italic; }
.wd-mean { min-width:12rem; }
.wd-vi { display:block; font-weight:600; }
.wd-en { display:block; color:var(--muted); font-size:.82rem; margin-top:.15rem; }
.wd-ex { min-width:13rem; color:var(--muted); font-size:.85rem; }
.wd-exvi { display:block; font-size:.8rem; opacity:.85; }
.wd-table tr.is-saved { background:rgba(63,126,75,.06); }
.wd-save { width:1.9rem; height:1.9rem; border:1px solid #E3E0D6; border-radius:8px;
  background:var(--card); color:var(--accent); font-size:1rem; font-weight:700;
  line-height:1; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.wd-save:hover:not(:disabled) { background:#F7E7DF; border-color:var(--accent); }
.wd-save:disabled { color:var(--ok); border-color:transparent; background:none; cursor:default; }

.wd-pager { display:flex; justify-content:space-between; gap:.7rem; margin:1.1rem 0 .5rem; }
.wd-pager a { padding:.55rem .9rem; border:1px solid #E3E0D6; border-radius:10px;
  background:var(--card); color:var(--fg); text-decoration:none; font-size:.88rem;
  font-weight:600; }
.wd-pager a:hover { border-color:var(--accent); color:var(--accent); }

@media (max-width:620px){
  .wd-ex { display:none; }                 /* điện thoại: ưu tiên từ + nghĩa */
  .wd-nav { gap:.6rem; }
  .wd-pick select { max-width:100%; }
  .wd-head h1 { font-size:1.15rem; }
}
.wd-empty { color:var(--muted); font-size:.8rem; font-style:italic; opacity:.75; }