/* ============================================================
   Phi Đội Ngữ Pháp — truclinh.space
   Chủ đề: phiêu lưu vũ trụ. Đây là thiết kế MỘT tông tối cố ý
   (vũ trụ mà sáng thì hỏng), nên không có biến thể nền sáng —
   nhưng mọi màu đều khai báo tường minh để trang không mượn
   màu của trình duyệt trong bất kỳ trường hợp nào.
   ============================================================ */

:root{
  --void:#070B18;
  --deep:#0C1426;
  --panel:#131E36;
  --panel-2:#1A2745;
  --line:#27365B;
  --line-soft:#1E2B4A;

  --text:#E8EEFB;
  --muted:#8FA1C4;

  --blue:#6EA8FE;
  --cyan:#7BE0C0;
  --gold:#FFC978;
  --pink:#FF9EB5;
  --green:#4ADE9B;
  --red:#FF7A85;

  --r:16px;
  --r-sm:11px;
  --shadow:0 10px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:'Baloo 2','Nunito','Segoe UI',system-ui,sans-serif;font-weight:600;margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:clamp(1.5rem,4.4vw,2.1rem)}
h3{font-size:1.02rem}
p{margin:0}
a{color:var(--blue)}

/* ---------------- NỀN VŨ TRỤ ----------------
   Ảnh nền thật đặt ở assets/bg.jpg. Ảnh gốc rất sáng và nhiều chi tiết
   (cực quang, thiên hà, tia sáng) nên PHẢI có lớp phủ tối đè lên, không
   thì chữ trên đó đọc không nổi. Lớp phủ nằm ở .sky::after.        */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#070B18}
/* Lớp ảnh nằm riêng ở ::before để chỉnh sáng/mờ được mà không đụng
   tới lớp phủ. inset âm để mép ảnh không hở khi làm mờ. */
.sky::before{content:'';position:absolute;inset:-10px;
  background:#070B18 url('../assets/bg.jpg') center center / cover no-repeat;
  filter:brightness(.72) saturate(1.05)}
/* Lớp phủ: đậm dần xuống dưới để phần thân trang (nhiều chữ) tối hơn
   phần đầu trang, mà ảnh vẫn hiện rõ ở khoảng giữa. */
.sky::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 6%, rgba(7,11,24,.18), rgba(7,11,24,.6) 70%),
    linear-gradient(180deg, rgba(7,11,24,.34) 0%, rgba(7,11,24,.55) 50%, rgba(5,8,16,.8) 100%)}

/* Ảnh nền đã đầy sao rồi nên tắt bớt lớp sao vẽ tay và các vệt tinh vân
   CSS — chồng lên nhau chỉ làm rối mắt. Giữ lại một lớp sao mờ cho có
   chút chuyển động. */
.s2, .s3, .nebula{display:none}
.s1{opacity:.35}
.stars{position:absolute;inset:-60%;background-repeat:repeat}
.s1{
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px,#fff,transparent),
    radial-gradient(1.2px 1.2px at 130px 90px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.6px 1.6px at 70px 170px,rgba(174,203,255,.9),transparent),
    radial-gradient(1.1px 1.1px at 190px 40px,rgba(255,255,255,.7),transparent);
  background-size:220px 220px;animation:drift 150s linear infinite}
.s2{
  background-image:
    radial-gradient(1px 1px at 40px 60px,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 160px 140px,rgba(255,220,180,.7),transparent),
    radial-gradient(1.3px 1.3px at 100px 20px,rgba(255,255,255,.5),transparent);
  background-size:300px 300px;animation:drift 240s linear infinite}
.s3{
  background-image:radial-gradient(.9px .9px at 80px 110px,rgba(255,255,255,.4),transparent);
  background-size:160px 160px;animation:drift 380s linear infinite}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-220px,-220px,0)}}

.nebula{position:absolute;border-radius:50%;filter:blur(70px);opacity:.36}
.n1{width:52vw;height:52vw;left:-14vw;top:-10vw;background:radial-gradient(circle,#3A63C8,transparent 68%);animation:pulse 26s ease-in-out infinite}
.n2{width:44vw;height:44vw;right:-12vw;top:34vh;background:radial-gradient(circle,#7A3C9B,transparent 68%);animation:pulse 34s ease-in-out infinite reverse}
@keyframes pulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.46;transform:scale(1.12)}}

/* Chữ nằm TRỰC TIẾP trên ảnh nền (không có thẻ tối đỡ phía sau) thì cần
   bóng đổ, nếu không nó chìm vào chỗ cực quang sáng. Chữ nằm trong thẻ
   thì không cần vì thẻ đã có nền mờ tối rồi. */
.hero h1, .hero .lead, .eyebrow, .grid-title, .hall-note, .earn-note,
.th-intro, .sess-top .link, .count, .done h1, .done .lead{
  text-shadow:0 1px 14px rgba(5,8,16,.92), 0 1px 3px rgba(5,8,16,.85)}
.grid-title{color:#B9C9E6}

/* ---------------- KHUNG ---------------- */
.wrap{max-width:920px;margin:0 auto;padding:22px 18px 90px}
.wrap.narrow{max-width:680px}

.boot{min-height:80vh;display:grid;place-items:center;color:var(--muted);text-align:center;gap:10px}
.boot-rocket{font-size:2.6rem;animation:float 2.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------------- THANH TRÊN ---------------- */
.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;
  background:rgba(9,15,30,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--text);cursor:pointer;padding:4px;font:inherit}
.brand .rocket{font-size:1.35rem}
.brand b{display:block;font-family:'Baloo 2',sans-serif;font-size:1rem;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.06em}
.stats{display:flex;align-items:center;gap:7px}
.stat{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line-soft);
      border-radius:999px;padding:4px 11px;font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums}
.stat i{font-style:normal;font-size:.85rem}
.icon-btn{background:var(--panel);border:1px solid var(--line-soft);color:var(--muted);border-radius:50%;
          width:32px;height:32px;cursor:pointer;font-size:.95rem;line-height:1}
.icon-btn:hover{color:var(--text);border-color:var(--blue)}

/* ---------------- HERO ---------------- */
.hero{padding:26px 0 22px;text-align:center}
.eyebrow{color:var(--gold);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.hero h1{margin:8px 0 8px}
.lead{color:var(--muted);max-width:52ch;margin:0 auto}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ---------------- NÚT ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:800;cursor:pointer;text-decoration:none;
  border-radius:999px;padding:11px 22px;border:1px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#7FB4FF,#4B87E8);color:#08122A;box-shadow:0 6px 18px rgba(78,136,232,.4)}
.btn.primary:hover{box-shadow:0 8px 24px rgba(78,136,232,.55)}
.btn.primary:disabled{background:#2A3550;color:#7E8FB0;opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--blue);background:rgba(110,168,254,.12)}
.btn.danger{background:rgba(255,122,133,.14);border-color:rgba(255,122,133,.5);color:var(--red)}
.btn.file{position:relative;overflow:hidden}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;font-weight:700;text-decoration:none;padding:0}
.link:hover{text-decoration:underline}

/* ---------------- BẢN ĐỒ CHẶNG ---------------- */
.grid{display:grid;gap:13px;grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}

.card{
  display:flex;gap:15px;align-items:center;text-align:left;
  background:linear-gradient(160deg,var(--panel),var(--deep));
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:15px;font:inherit;color:var(--text);cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--shadow)}
.card.locked{opacity:.42;cursor:default;filter:saturate(.35)}
.card-txt{flex:1;min-width:0}
.card-txt h3{font-size:.98rem}
.card-txt p{color:var(--muted);font-size:.85rem;margin-top:1px}
.card-meta{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;margin-top:6px;color:var(--muted)}
.card-meta .due{color:var(--gold);font-weight:800}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:9px}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .5s ease}

/* hành tinh vẽ bằng CSS */
.planet{position:relative;width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center}
.planet-body{width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 33% 27%, var(--pa), var(--pb) 72%);
  box-shadow:inset -6px -8px 15px rgba(0,0,0,.5), 0 0 20px rgba(110,168,254,.22)}
.planet-ring{position:absolute;width:76px;height:21px;border-radius:50%;
  border:2px solid var(--pa);opacity:.55;transform:rotate(-22deg)}

/* ---------------- PHIÊN LÀM BÀI ---------------- */
.sess-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 12px}
.dots{display:flex;gap:5px;flex:1;justify-content:center;flex-wrap:wrap}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.dots i.done{background:var(--green)}
.dots i.now{background:var(--gold);box-shadow:0 0 0 3px rgba(255,201,120,.22)}
.count{color:var(--muted);font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums}

.qcard{background:linear-gradient(165deg,var(--panel),var(--deep));border:1px solid var(--line-soft);
       border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.qtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tag{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
     padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--line-soft)}
.tag.t-topic{color:var(--blue);border-color:rgba(110,168,254,.35)}
.tag.t-type{color:var(--cyan);border-color:rgba(123,224,192,.3)}

.q-stem{font-size:1.12rem;font-weight:700;line-height:1.55;margin-bottom:16px}
.blank{display:inline-block;min-width:74px;border-bottom:2.5px dashed var(--gold);margin:0 4px;vertical-align:baseline}

/* trắc nghiệm */
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
     background:rgba(255,255,255,.045);border:1.5px solid var(--line);border-radius:var(--r-sm);
     padding:12px 14px;color:var(--text);font:inherit;font-size:1rem;cursor:pointer;
     transition:border-color .14s,background .14s,transform .1s}
.opt:hover:not(:disabled){border-color:var(--blue);background:rgba(110,168,254,.1)}
.opt:active:not(:disabled){transform:scale(.995)}
.opt-key{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
         background:rgba(255,255,255,.09);font-weight:800;font-size:.8rem;color:var(--muted)}
.opt.picked{border-color:var(--blue);background:rgba(110,168,254,.16)}
.opt.picked .opt-key{background:var(--blue);color:#08122A}
.opt.right{border-color:var(--green);background:rgba(74,222,155,.15)}
.opt.right .opt-key{background:var(--green);color:#05261A}
.opt.wrong{border-color:var(--red);background:rgba(255,122,133,.14)}
.opt.wrong .opt-key{background:var(--red);color:#2A0A0E}
.opt:disabled{cursor:default}

/* điền chỗ trống */
.fill-box{display:flex}
.fill-input{flex:1;font:inherit;font-size:1.05rem;font-weight:700;color:var(--text);
  background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px}
.fill-input::placeholder{color:#5D6E92;font-weight:400}
.fill-input:focus{outline:none;border-color:var(--blue);background:rgba(110,168,254,.1)}
.fill-input.right{border-color:var(--green);background:rgba(74,222,155,.14)}
.fill-input.wrong{border-color:var(--red);background:rgba(255,122,133,.13)}

/* sắp xếp từ */
.ord-line{min-height:62px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
  border:2px dashed var(--line);border-radius:var(--r-sm);padding:11px;margin-bottom:14px;
  transition:border-color .2s,background .2s}
.ord-line.empty::before{content:'Bấm các từ bên dưới để xếp thành câu…';color:#5D6E92;font-size:.9rem}
.ord-line.right{border-color:var(--green);border-style:solid;background:rgba(74,222,155,.1)}
.ord-line.wrong{border-color:var(--red);border-style:solid;background:rgba(255,122,133,.09)}
.ord-bank{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-weight:800;font-size:.98rem;color:var(--text);cursor:pointer;
  background:linear-gradient(180deg,#233457,#1A2745);border:1.5px solid var(--line);
  border-radius:10px;padding:8px 13px;transition:transform .1s,border-color .14s,background .14s}
.chip:hover:not(:disabled){border-color:var(--blue);background:linear-gradient(180deg,#2A4370,#1E2E52)}
.chip:active:not(:disabled){transform:scale(.95)}
.chip:disabled{cursor:default;opacity:.85}
.ord-line .chip{background:linear-gradient(180deg,#2E4B7E,#22355C);border-color:#3C5A96}

/* ---------------- CHÂN: CHẤM ĐIỂM + GIẢI THÍCH ---------------- */
.qfoot{position:sticky;bottom:0;margin-top:16px;padding:14px 0 18px;display:flex;flex-direction:column;gap:12px}
.qfoot>.btn{align-self:stretch}
.qfoot.open{background:linear-gradient(180deg,rgba(7,11,24,0),rgba(7,11,24,.94) 22%);
  border-radius:var(--r);padding:16px;margin-top:14px;
  border:1px solid var(--line-soft);
  animation:rise .25s ease}
.qfoot.open.ok{border-color:rgba(74,222,155,.4);background:rgba(12,32,26,.95)}
.qfoot.open.no{border-color:rgba(255,122,133,.4);background:rgba(36,14,18,.95)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.verdict{display:flex;align-items:flex-start;gap:12px}
.v-icon{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.ok .v-icon{background:var(--green);color:#05261A}
.no .v-icon{background:var(--red);color:#2A0A0E}
.verdict b{font-family:'Baloo 2',sans-serif;font-size:1.06rem}
.v-ans{color:var(--muted);font-size:.92rem;margin-top:2px}
.v-ans b{font-family:'Nunito',sans-serif;color:var(--gold);font-size:.98rem}
.why{font-size:.95rem;line-height:1.65;color:#C9D6EE;border-left:3px solid var(--line);padding-left:12px}
.why b{color:#fff}
.foot-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.foot-btns .link{margin-right:auto;font-size:.85rem}

/* ---------------- KẾT QUẢ ---------------- */
.done{text-align:center;padding:26px 0}
.medal{font-size:3.4rem;animation:float 2.6s ease-in-out infinite}
.medal.gold{filter:drop-shadow(0 0 18px rgba(255,201,120,.55))}
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 4px}
.score>div{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:13px 8px}
.score b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.3rem;color:var(--gold)}
.score span{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.perfect{margin-top:22px;color:var(--green);font-weight:800}
.review{text-align:left;margin-top:26px}
.review h3{margin-bottom:10px;color:var(--red)}
.rev-item{background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--red);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:9px}
.rev-q{font-weight:700;margin-bottom:5px}
.rev-why{color:#C9D6EE;font-size:.9rem;line-height:1.6}

/* ---------------- CÀI ĐẶT ---------------- */
.panel{background:linear-gradient(165deg,var(--panel),var(--deep));border:1px solid var(--line-soft);
  border-radius:var(--r);padding:22px;margin-top:18px}
.panel h1{margin-bottom:16px}
.panel h3{margin:0 0 6px}
.panel hr{border:0;border-top:1px solid var(--line-soft);margin:22px 0 16px}
.panel .muted{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.panel .danger{color:var(--red)}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:.78rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.field input{width:100%;font:inherit;color:var(--text);background:rgba(255,255,255,.05);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 14px}
.field input:focus{outline:none;border-color:var(--blue)}
.check{display:flex;align-items:center;gap:9px;color:var(--muted);cursor:pointer}
code{font-family:Consolas,ui-monospace,monospace;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:.88em}

/* ---------------- ĐĂNG NHẬP ---------------- */
.login{max-width:400px;margin:8vh auto 0;text-align:center;
  background:linear-gradient(165deg,var(--panel),var(--deep));
  border:1px solid var(--line-soft);border-radius:22px;padding:34px 28px 30px;box-shadow:var(--shadow)}
.login-badge{font-size:3rem;margin-bottom:6px;animation:float 2.6s ease-in-out infinite}
.login h1{margin-bottom:6px}
.login .lead{margin-bottom:22px;font-size:.95rem}
.login-form{text-align:left;display:flex;flex-direction:column;gap:2px}
.login-msg{min-height:20px;font-size:.86rem;color:var(--red);font-weight:700;opacity:0;transition:opacity .2s}
.login-msg.show{opacity:1}
.btn.wide{width:100%}

/* ---------------- BA CHẾ ĐỘ HỌC ---------------- */
.modes{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:16px}
@media(min-width:720px){.modes{grid-template-columns:repeat(3,1fr)}}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:linear-gradient(160deg,var(--panel),var(--deep));
  border:1px solid var(--line-soft);border-radius:var(--r);padding:17px 18px;
  color:var(--text);font:inherit;cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.mode:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mode-ic{font-size:1.6rem;line-height:1}
.mode b{font-family:'Baloo 2',sans-serif;font-size:1.08rem}
.mode small{color:var(--muted);font-size:.83rem;line-height:1.5}
.m-random:hover{border-color:var(--gold)}
.m-topic:hover{border-color:var(--blue)}
.m-book:hover{border-color:var(--cyan)}

.quick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.grid-title{font-size:1.12rem;margin:0 0 12px;color:var(--muted);font-weight:600;
  letter-spacing:.02em;scroll-margin-top:70px}
.card.hot{border-color:rgba(255,201,120,.5)}
.flame{font-size:.85rem}

/* ---------------- SỔ TAY NGỮ PHÁP ---------------- */
.th-head{display:flex;align-items:center;gap:15px;margin:16px 0 6px}
.th-head h1,.th-head h2{font-size:1.35rem;margin:0}
.th-intro{margin-bottom:20px}
.th-scope{display:inline-flex;align-items:center;gap:7px;margin:2px 0 14px;
  font-size:.82rem;font-weight:700;color:var(--gold);
  background:rgba(255,201,120,.1);border:1px solid rgba(255,201,120,.3);
  border-radius:99px;padding:5px 13px}
.th-scope::before{content:'🎯'}
.th-sec{background:linear-gradient(165deg,var(--panel),var(--deep));
  border:1px solid var(--line-soft);border-radius:var(--r);padding:18px 20px;margin-bottom:13px}
.th-sec h3{color:var(--gold);margin-bottom:9px}
.th-use{font-size:.94rem;margin-bottom:10px;color:#C9D6EE}
.th-use b,.th-sig b{color:#fff}
.th-formula{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.28);
  border:1px solid var(--line-soft);border-left:3px solid var(--blue);
  border-radius:9px;padding:12px 14px;margin-bottom:11px;overflow-x:auto}
.th-formula code{font-family:Consolas,ui-monospace,monospace;font-size:.85rem;color:#BFD8FF;
  white-space:pre;background:none;padding:0}
.th-sig{font-size:.9rem;color:var(--muted);margin-bottom:11px}
.th-note{font-size:.88rem;color:var(--muted);line-height:1.6;margin-top:10px;
  border-left:2px solid var(--line);padding-left:11px}
.th-trap{margin-top:12px;background:rgba(255,122,133,.1);
  border:1px solid rgba(255,122,133,.3);border-radius:9px;padding:11px 13px}
.th-trap .tag{color:var(--red);border-color:rgba(255,122,133,.4);margin-bottom:6px;display:inline-block}
.th-trap p{font-size:.92rem;color:#F0D6D9}
.th-sec ul.ex{margin-top:4px}

/* danh sách ví dụ dùng chung cho sổ tay */
ul.ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
ul.ex li{display:flex;flex-direction:column;gap:1px;padding-left:16px;position:relative}
ul.ex li::before{content:'›';position:absolute;left:2px;top:-1px;color:var(--gold);font-weight:800}
ul.ex .en{color:#DCE9FF;font-weight:700;font-size:.96rem}
ul.ex .vi{color:var(--muted);font-size:.88rem;font-style:italic}

/* ---------------- CHỌN TỪ KHÁC LOẠI ---------------- */
.odd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.word-card{font:inherit;font-family:'Baloo 2',sans-serif;font-size:1.1rem;font-weight:600;
  color:var(--text);cursor:pointer;padding:16px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);border:1.5px solid var(--line);
  transition:border-color .14s,background .14s,transform .1s}
.word-card:hover:not(:disabled){border-color:var(--blue);background:rgba(110,168,254,.1)}
.word-card:active:not(:disabled){transform:scale(.97)}
.word-card.picked{border-color:var(--blue);background:rgba(110,168,254,.18)}
.word-card.right{border-color:var(--green);background:rgba(74,222,155,.16)}
.word-card.wrong{border-color:var(--red);background:rgba(255,122,133,.14)}
.word-card:disabled{cursor:default}

/* ---------------- TRỌNG ÂM ---------------- */
.stress-word{font-family:'Baloo 2',sans-serif;font-size:1.9rem;font-weight:600;
  text-align:center;letter-spacing:.02em;color:#DCE9FF;margin:2px 0 18px;
  padding:14px;border-radius:var(--r-sm);background:rgba(0,0,0,.26);
  border-left:3px solid var(--pink)}
.syl-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.syl{display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;cursor:pointer;
  padding:14px 8px;border-radius:var(--r-sm);color:var(--text);
  background:rgba(255,255,255,.045);border:1.5px solid var(--line);
  transition:border-color .14s,background .14s,transform .1s}
.syl-n{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.syl-t{font-family:'Baloo 2',sans-serif;font-size:1.25rem;font-weight:600}
.syl:hover:not(:disabled){border-color:var(--pink);background:rgba(255,158,181,.1)}
.syl:active:not(:disabled){transform:scale(.97)}
.syl.picked{border-color:var(--blue);background:rgba(110,168,254,.16)}
.syl.right{border-color:var(--green);background:rgba(74,222,155,.17)}
.syl.right .syl-t{color:var(--green)}
.syl.wrong{border-color:var(--red);background:rgba(255,122,133,.14)}
.syl:disabled{cursor:default}

/* thẻ từ trong dạng "chọn từ khác trọng âm" */
.stress-card{display:flex;flex-direction:column;gap:5px;padding:14px 10px}
.wc-plain{font-family:'Baloo 2',sans-serif;font-size:1.08rem;font-weight:600}
.wc-mark{font-size:.82rem;color:var(--muted);min-height:0;font-family:Consolas,ui-monospace,monospace}
.stress-card.shown .wc-mark{min-height:1.2em}
.wc-mark b{color:var(--gold);font-weight:800}
.wc-mark i{font-style:normal;opacity:.65;margin-left:4px}

/* ---------------- ĐÚNG HAY SAI ---------------- */
.tf-sentence{margin:0 0 16px;padding:15px 17px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.26);border-left:3px solid var(--gold);
  font-size:1.1rem;font-weight:700;color:#DCE9FF;line-height:1.5}
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tf-btn{display:flex;flex-direction:column;align-items:center;gap:7px;font:inherit;font-weight:800;
  color:var(--text);cursor:pointer;padding:17px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);border:1.5px solid var(--line);
  transition:border-color .14s,background .14s,transform .1s}
.tf-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:1.1rem;background:rgba(255,255,255,.09)}
.tf-btn.yes:hover:not(:disabled){border-color:var(--green);background:rgba(74,222,155,.1)}
.tf-btn.no:hover:not(:disabled){border-color:var(--red);background:rgba(255,122,133,.1)}
.tf-btn:active:not(:disabled){transform:scale(.98)}
.tf-btn.picked{border-color:var(--blue);background:rgba(110,168,254,.16)}
.tf-btn.right{border-color:var(--green);background:rgba(74,222,155,.16)}
.tf-btn.right .tf-icon{background:var(--green);color:#05261A}
.tf-btn.wrong{border-color:var(--red);background:rgba(255,122,133,.14)}
.tf-btn.wrong .tf-icon{background:var(--red);color:#2A0A0E}
.tf-btn:disabled{cursor:default}

/* ---------------- KHOÁ HÀNH TRÌNH ---------------- */
/* Mặc định = sai một câu: giọng nhắc nhở, màu vàng. Thêm .hard khi sai
   3 câu liên tiếp: giọng nặng hơn, màu đỏ. */
.lockbar{display:flex;gap:16px;align-items:flex-start;margin:16px 0 18px;
  background:rgba(255,201,120,.1);border:1px solid rgba(255,201,120,.38);
  border-radius:var(--r);padding:18px 20px}
.lock-ic{font-size:2rem;line-height:1}
.lockbar h1{font-size:1.3rem;color:var(--gold);margin-bottom:5px}
.lockbar p{color:#EDE2CE;font-size:.94rem}
.lockbar b{color:#fff}
.lockbar.hard{background:rgba(255,122,133,.1);border-color:rgba(255,122,133,.35)}
.lockbar.hard h1{color:var(--red)}
.lockbar.hard p{color:#EED6D9}

/* Nhắc trước ở màn hình chấm điểm rằng bấm Tiếp tục sẽ phải học lại */
.study-warn{margin-top:2px;font-size:.86rem;color:var(--gold);
  background:rgba(255,201,120,.09);border:1px solid rgba(255,201,120,.28);
  border-radius:var(--r-sm);padding:9px 12px;line-height:1.5}
.study-warn b{color:#fff}

.lock-timer{text-align:center;margin-bottom:22px}
/* Vòng xoay nằm ở lớp ::before, KHÔNG xoay cả khung — nếu xoay khung
   thì con số đếm ngược bên trong cũng nghiêng theo. */
.lock-ring{position:relative;width:132px;height:132px;margin:0 auto 10px;display:grid;place-items:center}
.lock-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,201,120,.4), rgba(110,168,254,.4), rgba(255,201,120,.4));
  animation:spin 8s linear infinite}
.lock-ring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--deep)}
.lock-ring span{position:relative;z-index:1;font-family:'Baloo 2',sans-serif;font-size:1.9rem;
  font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
/* Lớp .ready chứ KHÔNG phải .done — .done là lớp của màn hình kết quả
   (có text-align:center + padding) và sẽ đè lên vòng đếm ngược. */
.lock-ring.ready::before{animation:none;background:var(--green)}
.lock-ring.ready span{color:var(--green);font-size:1.35rem}
@keyframes spin{to{transform:rotate(360deg)}}
/* Thanh nút của màn hình học lại. Phải có nền, nếu để trong suốt thì
   nội dung phía trên trôi qua dưới nút, nhìn như bị lỗi. */
.lockfoot{position:sticky;bottom:0;margin-top:14px;padding:16px 0 14px;
  background:linear-gradient(180deg,rgba(7,11,24,0),var(--void) 42%)}

.tag.t-again{color:var(--gold);border-color:rgba(255,201,120,.4)}
.link.sm{font-size:.82rem;margin-top:8px;display:inline-block}

/* ---------------- THÔNG BÁO PHẦN THƯỞNG ---------------- */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:80;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:min(94vw,420px)}
.toast{display:flex;align-items:center;gap:12px;width:100%;
  background:rgba(19,30,54,.97);border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;box-shadow:var(--shadow);animation:toastIn .35s cubic-bezier(.2,1.3,.4,1)}
.toast.out{animation:toastOut .4s ease forwards}
.toast .t-ic{font-size:1.6rem;line-height:1;flex:0 0 auto}
.toast b{display:block;font-family:'Baloo 2',sans-serif;font-size:1rem}
.toast small{display:block;color:var(--muted);font-size:.82rem;line-height:1.4}
.toast.gift{border-color:rgba(255,201,120,.55);background:rgba(44,34,16,.97)}
.toast.gift b{color:var(--gold)}
.toast.badge{border-color:rgba(201,166,255,.6);background:rgba(36,26,54,.97)}
.toast.badge b{color:#D9BEFF}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ---------------- ĐÈN BÁO ĐỒNG BỘ ---------------- */
.sync-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  vertical-align:middle;background:var(--muted);flex:0 0 auto}
.sync-dot.s-ok{background:var(--green);box-shadow:0 0 6px rgba(74,222,155,.8)}
.sync-dot.s-pending{background:var(--gold);animation:blink 1.1s ease-in-out infinite}
.sync-dot.s-offline,.sync-dot.s-error{background:var(--red)}
.sync-dot.s-off{background:#4A5878}

.sync-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px}
.sync-box>div{flex:1;min-width:150px}
.sync-box b{display:block;font-size:.92rem}
.sync-box small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.sync-box.s-ok{border-color:rgba(74,222,155,.4);background:rgba(74,222,155,.08)}
.sync-box.s-offline,.sync-box.s-error{border-color:rgba(255,122,133,.4);background:rgba(255,122,133,.08)}
.sync-box .sync-dot{width:10px;height:10px;margin:0}

.stat.tap{cursor:pointer;font:inherit;font-weight:700;color:var(--text)}
.stat.tap:hover{border-color:var(--gold);color:var(--gold)}

/* ---------------- HỘP QUÀ Ở MÀN HÌNH KẾT QUẢ ---------------- */
.gift-box{margin:22px 0 6px;text-align:left;
  background:linear-gradient(160deg,rgba(255,201,120,.12),rgba(19,30,54,.6));
  border:1px solid rgba(255,201,120,.4);border-radius:var(--r);padding:16px 18px}
.gift-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gift-head span{font-size:1.5rem}
.gift-head b{font-family:'Baloo 2',sans-serif;font-size:1.25rem;color:var(--gold)}
.gift-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}
.gift-list li{display:flex;gap:10px;font-size:.9rem;color:#C9D6EE}
.gift-list li span{color:var(--gold);font-weight:800;min-width:26px;font-variant-numeric:tabular-nums}
.gift-next{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.gift-next.ready{color:var(--cyan);font-weight:700}
.gift-next b{color:#fff}

/* ---------------- TRẠM VŨ TRỤ ---------------- */
.station{width:100%;height:auto;display:block;overflow:visible}
.station .mod{animation:modIn .5s cubic-bezier(.2,1.2,.4,1) backwards}
@keyframes modIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.station .beacons circle{animation:blink 1.8s ease-in-out infinite}
.station .beacons circle:nth-child(2){animation-delay:.45s}
.station .beacons circle:nth-child(3){animation-delay:.9s}
.station .beacons circle:nth-child(4){animation-delay:1.35s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.station .gate{transform-origin:62px 250px;animation:gateSpin 14s linear infinite}
@keyframes gateSpin{to{transform:rotate(360deg)}}
.station .twinkle circle{animation:blink 3.2s ease-in-out infinite}
.station .twinkle circle:nth-child(2n){animation-delay:1.1s}
.station .twinkle circle:nth-child(3n){animation-delay:2.2s}
.station .planet-far{animation:driftY 12s ease-in-out infinite}
@keyframes driftY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.station .orbiter{transform-origin:210px 152px;animation:gateSpin 20s linear infinite}
.station .shuttle{animation:driftY 5s ease-in-out infinite}
/* Bản thu nhỏ ở trang chủ: bỏ hiệu ứng cho nhẹ máy */
.station.small .twinkle circle,.station.small .planet-far,
.station.small .orbiter,.station.small .shuttle,.station.small .gate{animation:none}

/* Sân khấu công trình: ảnh chiếm hết bề ngang, mọi thông tin gom vào
   MỘT thanh mỏng bên dưới để không ăn mất chỗ của hình. */
.st-stage{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;margin-bottom:20px;background:#070B18}
.st-art{position:relative;
  background:#070B18 url('../assets/nebula.jpg') center/cover no-repeat}
.st-art::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,24,.62),rgba(7,11,24,.78))}
.st-art .station{position:relative;display:block;width:100%;height:auto}

.st-bar-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 15px;background:rgba(9,15,30,.92);border-top:1px solid var(--line-soft)}
.st-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:.8rem;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.st-chip.pieces{color:var(--gold);border-color:rgba(255,201,120,.4);font-variant-numeric:tabular-nums}
.st-chip.done-chip{color:var(--cyan);border-color:rgba(123,224,192,.45)}
.st-prog{flex:1 1 190px;min-width:150px}
.st-prog small{display:block;color:var(--muted);font-size:.76rem;margin-top:5px}
.st-prog small b{color:var(--text)}
.st-build{flex:0 0 auto;padding:9px 16px;font-size:.85rem}
.st-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.st-bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--cyan));
  transition:width .6s cubic-bezier(.2,1,.3,1)}

/* Cách kiếm mảnh ghép gập lại, mở ra khi cần */
.earn-fold{margin-bottom:22px;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:11px 15px}
.earn-fold summary{color:var(--gold);font-size:.85rem;letter-spacing:.04em;text-transform:none}
.earn-fold[open] summary{margin-bottom:11px}

/* Khối chương */
.ch-block{margin-bottom:20px}
.ch-block.sealed{opacity:.55}
.ch-head{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.ch-ic{font-size:1.4rem;line-height:1}
.ch-head b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.02rem}
.ch-head small{display:block;color:var(--muted);font-size:.8rem}
.ch-head>div{flex:1;min-width:0}
.ch-count{font-weight:800;font-size:.85rem;color:var(--gold);font-variant-numeric:tabular-nums}

.st-strip{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--text);
  background:linear-gradient(160deg,rgba(201,166,255,.12),var(--deep));
  border:1px solid rgba(201,166,255,.3);border-radius:var(--r);padding:12px 16px;
  cursor:pointer;margin-bottom:16px;transition:transform .16s ease,border-color .16s}
.st-strip:hover{transform:translateY(-2px);border-color:var(--gold)}
.st-mini{width:110px;flex:0 0 auto}
.st-strip-txt{flex:1;min-width:0}
.st-strip-txt b{font-family:'Baloo 2',sans-serif;font-size:1.02rem}
.st-strip-txt small{color:var(--muted);font-size:.8rem}
.st-strip .st-bar{margin:7px 0 5px;height:7px}
.st-go{font-size:1.3rem;color:var(--muted)}

.earn{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:8px}
.earn>div{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px}
.earn b{display:block;font-family:'Baloo 2',sans-serif;color:var(--gold);font-size:1.05rem}
.earn span{display:block;color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:2px}
.earn-note{font-size:.84rem;color:var(--muted);margin:10px 0 26px}
.earn-note b{color:var(--cyan)}

.mod-list{display:flex;flex-direction:column;gap:7px}
@media(min-width:720px){.mod-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
/* Lớp trạng thái đặt tên là .built chứ KHÔNG phải .done — .done đã là
   lớp của màn hình kết quả (có text-align:center) và sẽ đè lên đây. */
.mod-row{display:flex;align-items:center;gap:13px;text-align:left;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 14px}
.mod-row.built{border-color:rgba(74,222,155,.35);background:rgba(74,222,155,.07)}
.mod-row.next{border-color:rgba(255,201,120,.5);background:rgba(255,201,120,.08)}
.mod-row.lock{opacity:.5}
.mod-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);font-weight:800;font-size:.85rem;color:var(--muted)}
.mod-row.built .mod-n{background:var(--green);color:#05261A}
.mod-row.next .mod-n{background:var(--gold);color:#2B1E06}
.mod-txt{flex:1;min-width:0}
.mod-txt b{font-size:.96rem}
.mod-txt small{display:block;color:var(--muted);font-size:.8rem}
.mod-cost{font-weight:800;font-size:.85rem;color:var(--gold);white-space:nowrap}
.mod-row.built .mod-cost{color:var(--green)}

/* ---------------- CẤP BẬC ---------------- */
.rank-chip{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--rk,var(--muted))}
.card.crowned{border-color:rgba(255,201,120,.5)}
.card{position:relative}
.card-medal{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;
  object-fit:cover;box-shadow:0 0 14px rgba(255,201,120,.5);border:1px solid rgba(255,201,120,.5)}

/* ---------------- SẢNH VINH DANH ---------------- */
.hall-note{font-size:.85rem;color:var(--muted);margin:-4px 0 14px;line-height:1.55}
.hall-note b{color:var(--gold)}
.hall{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:26px}
.medal-card{text-align:center;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:13px 11px}
.medal-card.got{border-color:rgba(255,201,120,.5);
  background:linear-gradient(165deg,rgba(255,201,120,.12),var(--deep))}
.medal-img{position:relative;width:88px;height:88px;margin:0 auto 9px}
.medal-img img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.42);transition:filter .4s ease}
.medal-card.got .medal-img img{filter:none;box-shadow:0 0 20px rgba(255,201,120,.45)}
.medal-card.got .medal-img{animation:medalFloat 4s ease-in-out infinite}
@keyframes medalFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.medal-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;opacity:.8}
.medal-card b{display:block;font-family:'Baloo 2',sans-serif;font-size:.9rem;line-height:1.25}
.medal-card small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.medal-rank{display:inline-block;margin-top:7px;font-size:.74rem;font-weight:800;color:var(--rk,var(--muted))}
.toast.medal{border-color:rgba(255,201,120,.6);background:rgba(46,34,14,.97)}
.toast.medal b{color:var(--gold)}
.t-medal{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 16px rgba(255,201,120,.55)}

.badge-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));margin-bottom:24px}
.badge{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:13px;text-align:center;opacity:.42;filter:grayscale(1)}
.badge.got{opacity:1;filter:none;border-color:rgba(201,166,255,.45);
  background:linear-gradient(165deg,rgba(201,166,255,.14),var(--deep))}
.b-ic{display:block;font-size:1.7rem;line-height:1;margin-bottom:6px}
.badge b{display:block;font-family:'Baloo 2',sans-serif;font-size:.9rem;line-height:1.25}
.badge small{display:block;color:var(--muted);font-size:.74rem;margin-top:3px;line-height:1.4}
.badge.got small{color:var(--cyan);font-weight:700}

/* ---------------- PHÁO GIẤY ---------------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:8px;height:13px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(680deg);opacity:.15}}

/* ---------------- TIÊU ĐIỂM BÀN PHÍM ---------------- */
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media (max-width:520px){
  .wrap{padding:16px 13px 80px}
  .qcard{padding:16px}
  .hide-sm{display:none}
  .login{margin-top:4vh;padding:26px 20px}
  .lockbar{flex-direction:column;gap:10px;padding:16px}
  .lock-ring{width:112px;height:112px}
  .lock-ring span{font-size:1.6rem}
  .th-sec{padding:15px 16px}
  .th-formula code{font-size:.78rem}
  .th-head h1,.th-head h2{font-size:1.15rem}
  .odd-grid{grid-template-columns:1fr}
  .word-card{padding:13px 12px}
  .st-mini{width:84px}
  .st-strip{padding:11px 13px;gap:11px}
  .st-next{flex-direction:column;align-items:stretch}
  .st-next .btn{width:100%}
  .toasts{bottom:14px}
  .score{grid-template-columns:1fr;gap:8px}
  .score>div{display:flex;align-items:baseline;justify-content:space-between;padding:10px 14px}
  .score b{font-size:1.1rem}
  .foot-btns{justify-content:stretch}
  .foot-btns .btn{flex:1}
  .foot-btns .link{width:100%;margin:0 0 4px}
}