/* ============================================================
   journey.css — Hành trình lên Mặt Trăng

   Nối tiếp style.css: giai đoạn 2-4, Thử Thách và Cửa Hàng.
   Dùng lại đúng bộ biến màu khai báo ở :root trong style.css,
   không thêm tông màu mới — vũ trụ vẫn phải là một tông tối.
   ============================================================ */

.btn.sm{padding:8px 14px;font-size:.86rem;border-radius:10px}

/* Thanh báo đồng bộ kẹt. Cố ý chắn ngang đáy màn hình và dùng màu đỏ:
   mất tiến độ là chuyện lớn, không thể để lọt qua một cái chấm nhỏ. */
.sync-warn{position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  background:linear-gradient(180deg,rgba(255,122,133,.96),rgba(200,60,72,.98));
  color:#2A0006;box-shadow:0 -8px 26px rgba(0,0,0,.4)}
.sync-warn>span{font-size:1.4rem;line-height:1}
.sync-warn div{flex:1;min-width:0}
.sync-warn b{display:block;font-family:"Baloo 2",sans-serif;font-size:.95rem}
.sync-warn small{display:block;font-size:.78rem;opacity:.85}
.sync-warn .btn{flex:0 0 auto;background:#2A0006;color:#FFD8DC;border:none}
@media (max-width:520px){
  .sync-warn{flex-wrap:wrap;padding:10px 13px}
  .sync-warn .btn{width:100%}
}
.hero.tight{margin-bottom:12px}

/* ---------------- Thử Thách ---------------- */
.mode.m-trial{border-color:rgba(201,166,255,.42);
  background:linear-gradient(160deg,rgba(201,166,255,.14),rgba(255,255,255,.03))}
.mode.m-trial:hover{border-color:#C9A6FF}
.tag.t-trial{color:#C9A6FF;border-color:rgba(201,166,255,.5);background:rgba(201,166,255,.12)}
.qcard.trial{border-color:rgba(201,166,255,.35);box-shadow:inset 0 0 0 1px rgba(201,166,255,.12)}

.tt-clock{position:relative;width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--panel-2);
  border:2.5px solid rgba(201,166,255,.55);font-variant-numeric:tabular-nums}
.tt-clock span{font-family:"Baloo 2",sans-serif;font-size:1.05rem;font-weight:800;color:#C9A6FF}
.tt-clock.urgent{border-color:var(--red);animation:ttPulse .9s ease-in-out infinite}
.tt-clock.urgent span{color:var(--red)}
@keyframes ttPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

.tt-score{margin-left:auto;flex:0 0 auto;font-weight:800;font-size:.86rem;color:#C9A6FF;
  background:rgba(201,166,255,.12);border:1px solid rgba(201,166,255,.35);
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.medal.gem{background:radial-gradient(circle at 35% 30%,#E4D2FF,#8A6BD0)}
.trial-done.fail .medal{background:var(--panel-2);border:2px solid var(--line)}
.gift-box.dim{opacity:.9;border-color:var(--line)}

/* ---------------- Ví tiền ---------------- */
.wallet{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.w-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.9rem;
  padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.w-chip.gem{color:#C9A6FF;border-color:rgba(201,166,255,.45);background:rgba(201,166,255,.1)}
/* Hộp quà chưa mở — cố ý nhấp nháy để bé không bỏ quên phần thưởng */
.w-chip.box{color:var(--gold);border-color:rgba(255,201,120,.55);
  background:rgba(255,201,120,.12);cursor:pointer;font:inherit;font-weight:800;
  animation:rvPulse 1.9s ease-in-out infinite}
.w-chip.box:hover{background:rgba(255,201,120,.22)}
@keyframes rvPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,201,120,.5)}
  55%{box-shadow:0 0 0 7px rgba(255,201,120,0)}}
.toast.tap{cursor:pointer}
/* Dải "em có hộp quà" ở trang chủ — sáng lên khi còn hộp chưa mở */
.jn-strip.box-ready{border-color:rgba(255,201,120,.6);background:rgba(255,201,120,.1)}
.jn-strip.box-ready .jn-ic{animation:rvNudge 2.6s ease-in-out infinite}

/* Bảng "hộp quà lượt này / vì sao chưa có" ở màn kết quả Thử Thách.
   Dòng được hộp sáng vàng, dòng giải thích để màu nhạt. */
.tt-hop-ds li{align-items:flex-start;line-height:1.45}
.tt-hop-ds li span:first-child{font-size:1.15rem;line-height:1.2;flex:0 0 auto;margin-right:8px}
.tt-hop-ds li.co{color:var(--gold);font-weight:700}
.tt-hop.dim .gift-head b{color:var(--muted)}
.tt-hop .link.sm{margin-top:8px}

/* ================= BỐ TRÍ CĂN CỨ (base.js) ================= */
/* Đồ đặt vào ô: ảnh thật, kích cỡ theo dải xa/gần (--sz) */
.ma-slot{position:absolute;transform:translate(-50%,0);width:calc(9% * var(--sz,1));
  aspect-ratio:1;border-radius:14%;overflow:hidden;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));
  /* Không tô nền tối: ảnh đã có mặt nạ tròn, nền tối thêm thành một
     cái đĩa đen đè lên mặt đất sáng (thấy rõ ở ô góc trái khi chụp). */
  background:none}
.ma-slot img{width:100%;height:100%;object-fit:cover;display:block;
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 78%)}
.ma-slot i{display:none;font-style:normal;font-size:clamp(14px,2.6vw,28px);line-height:1;
  position:absolute;inset:0;display:none;place-items:center}
.ma-slot.no-img img{display:none}
.ma-slot.no-img i{display:grid}
/* Sao của thiết bị: viền sáng dần theo sao, để nâng sao NHÌN THẤY được
   ngay trên tranh chứ không chỉ là con số trong kho. */
.ma-slot.sao2{filter:drop-shadow(0 0 4px rgba(143,216,255,.7)) drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.ma-slot.sao3{filter:drop-shadow(0 0 6px rgba(201,166,255,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.ma-slot.sao4{filter:drop-shadow(0 0 8px rgba(255,201,120,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.ma-slot.sao5{filter:drop-shadow(0 0 10px rgba(123,224,192,1)) drop-shadow(0 0 18px rgba(255,201,120,.7))
  drop-shadow(0 3px 6px rgba(0,0,0,.7));animation:sao5 2.4s ease-in-out infinite}
@keyframes sao5{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,0) scale(1.06)}}
/* Hàng sao riêng của món trong kho báu và màn lật hộp */
.rv-sao{color:var(--gold);font-weight:800;letter-spacing:1px;font-size:.9rem;margin-top:3px}
.rv-sao span{color:var(--muted);opacity:.6}
.rv-sao.lon{font-size:1.6rem;margin:2px 0 6px;animation:rvPop .55s cubic-bezier(.2,1.5,.4,1)}
.rv-item.sao5{border-color:rgba(123,224,192,.8);box-shadow:0 0 26px -6px rgba(123,224,192,.55)}

/* Ô bấm được khi đang ở chế độ Bố trí */
.ma-o{position:absolute;transform:translate(-50%,0);width:calc(9% * var(--sz,1));aspect-ratio:1;
  border-radius:50%;border:2px dashed rgba(143,216,255,.7);background:rgba(143,216,255,.12);
  cursor:pointer;padding:0;animation:oNhay 1.6s ease-in-out infinite}
.ma-o.co{border-style:solid;border-color:rgba(255,201,120,.9);background:rgba(255,201,120,.12)}
.ma-o:hover{background:rgba(143,216,255,.3)}
@keyframes oNhay{0%,100%{box-shadow:0 0 0 0 rgba(143,216,255,.45)}50%{box-shadow:0 0 0 6px rgba(143,216,255,0)}}
/* Công trình nhiều cấp (SVG đè lên ảnh nền) */
.ma-cong{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* Thanh vật liệu */
.tile-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 4px}
.tile-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.88rem;
  padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-variant-numeric:tabular-nums}

/* Bảng công trình */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:22px}
.bp-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.bp-card.max{border-color:rgba(255,201,120,.6)}
.bp-head{display:flex;align-items:center;gap:10px}
.bp-head .bp-ic{font-size:1.7rem;line-height:1}
.bp-head b{display:block}
.bp-head small{color:var(--muted)}
.bp-cap{margin-left:auto;font-weight:800;color:var(--gold);white-space:nowrap}
.bp-bar{height:8px;border-radius:999px;background:var(--deep);overflow:hidden;margin:10px 0 8px}
.bp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold))}
.bp-need{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bp-need span{font-size:.82rem;padding:3px 9px;border-radius:999px;background:var(--deep);border:1px solid var(--line)}
.bp-need span.du{border-color:rgba(74,222,155,.5);color:var(--green)}
.bp-need span.thieu{border-color:rgba(255,122,133,.5)}

/* Gói vật liệu */
.goi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.goi-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  font:inherit;color:var(--text);cursor:pointer;padding:12px 10px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line)}
.goi-card:hover{border-color:var(--blue)}
.goi-card .goi-ic{font-size:1.9rem;line-height:1}
.goi-card small{color:var(--gold);font-weight:700}

/* Chọn món để đặt vào ô */
.pick-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pick-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  font:inherit;color:var(--text);cursor:pointer;padding:10px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line)}
.pick-card:hover{border-color:var(--gold)}
.pick-card.dang{border-color:rgba(74,222,155,.6)}
.pick-card .art-ic{width:64px;height:64px;border-radius:12px}
.pick-card b{font-size:.85rem;line-height:1.25}
.pick-card small{color:var(--muted);font-size:.75rem}

/* Bên trong toà nhà */
.room{position:relative;width:100%;aspect-ratio:900/420;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.08),transparent 60%),var(--room,#1B2440)}
.room::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
/* Cửa sổ nhìn ra Trái Đất — để CAO và MỎNG (top 5%, cao 16%) cho khỏi
   đè lên hàng ô phía sau. Bản đầu để top 14% cao 26% thì che mất nửa
   hàng sau — bắt được khi chụp màn hình 01/09. */
.room::after{content:"";position:absolute;left:8%;right:8%;top:5%;height:16%;border-radius:12px;
  border:2px solid rgba(143,216,255,.35);pointer-events:none;
  background:radial-gradient(circle at 70% 40%,#8FD8FF 0 5%,transparent 6%),
             linear-gradient(180deg,#0B1120,#1A2B4E)}
.room-slot{position:absolute;z-index:1;transform:translate(-50%,0);width:calc(14% * var(--sz,1));aspect-ratio:1;
  border-radius:16px;display:grid;place-items:center;cursor:pointer;padding:0;font:inherit;color:inherit;
  border:2px dashed rgba(143,216,255,.5);background:rgba(143,216,255,.08)}
.room-slot.co{border-style:solid;border-color:rgba(255,201,120,.7);background:rgba(11,17,32,.35);overflow:hidden}
.room-slot .art-ic{width:100%;height:100%;border:0;border-radius:0;background:none}
.room-slot .art-ic i{font-size:clamp(18px,3.4vw,34px)}
.room-slot:hover{border-color:var(--gold)}

/* ---------------- Chọn độ dài lượt Thử Thách ---------------- */
.tp-grid{display:grid;gap:12px;margin-top:6px}
.tp-card{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;
  text-align:left;font:inherit;color:var(--text);cursor:pointer;
  padding:16px 18px;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);transition:transform .16s,border-color .16s}
.tp-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.tp-ic{grid-row:1/4;font-size:2.3rem;line-height:1}
.tp-card b{font-size:1.05rem}
.tp-n{color:var(--gold);font-weight:700;font-size:.88rem}
.tp-card small{color:var(--muted);line-height:1.45}

/* ================= KHO THIẾT BỊ BÍ ẨN ================= */
.rv-head{text-align:center;margin-bottom:18px}
.rv-bar{position:relative;height:30px;margin:16px auto 0;max-width:460px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden;
  display:flex;align-items:center}
.rv-fill{position:absolute;inset:0 auto 0 0;
  background:linear-gradient(90deg,rgba(143,216,255,.5),rgba(255,201,120,.6));
  transition:width .5s ease}
.rv-bar b{position:relative;margin-left:auto;padding-right:14px;font-size:1.05rem;color:var(--gold)}
.rv-bar b span{color:var(--muted);font-weight:700;font-size:.85rem}

.rv-boxes{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-bottom:18px}
.rv-box{flex:1 1 200px;max-width:280px;text-align:center;padding:16px 14px;
  border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.rv-box.co.rv-bac {border-color:rgba(143,216,255,.55);background:rgba(143,216,255,.08)}
.rv-box.co.rv-vang{border-color:rgba(255,201,120,.6); background:rgba(255,201,120,.09)}
.rv-box.het{opacity:.55}
.rv-box-ic{font-size:2.6rem;line-height:1}
.rv-box.co .rv-box-ic{animation:rvNudge 2.6s ease-in-out infinite}
@keyframes rvNudge{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-9deg)}96%{transform:rotate(9deg)}}
.rv-box-n{font-weight:800;margin-top:4px}
.rv-box-c{color:var(--muted);font-size:.85rem;margin:2px 0 10px}

.rv-how{margin:0 auto 20px;max-width:620px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.rv-how summary{cursor:pointer;font-weight:800}
.rv-src{list-style:none;padding:0;margin:12px 0 4px;display:grid;gap:11px}
.rv-src li{display:flex;gap:11px;align-items:flex-start}
.rv-src-ic{font-size:1.3rem;line-height:1.2;flex:0 0 auto}
.rv-src small{display:block;color:var(--muted);font-size:.83rem;margin-top:1px}

.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px}
.rv-item{padding:14px;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);text-align:center}
.rv-item.kin{opacity:.5;border-style:dashed}
.rv-item.hang-thuong{border-color:rgba(143,216,255,.42)}
.rv-item.hang-hiem  {border-color:rgba(201,166,255,.5)}
.rv-item.hang-huyen {border-color:rgba(255,201,120,.62);
  box-shadow:0 0 22px -6px rgba(255,201,120,.4)}
.rv-item.vua{animation:rvNew 1.6s ease-out 2}
@keyframes rvNew{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}}

.rv-art{display:grid;place-items:center;aspect-ratio:1;margin-bottom:9px;
  border-radius:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--panel-2),var(--deep))}
.rv-q{font-size:2.6rem;font-weight:800;color:var(--muted)}
/* Ảnh kho báu vẽ to hơn ảnh Cửa Hàng — đây là thứ đáng khoe */
.art-ic.rv-img{width:100%;height:100%;border:0;border-radius:0;background:none}
.art-ic.rv-img i{font-size:3.4rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.rv-ten{font-weight:800;font-size:.97rem}
.rv-hang{font-size:.8rem;font-weight:700;margin-top:2px}
.rv-mo{color:var(--muted);font-size:.83rem;line-height:1.45;margin-top:7px}
.rv-ngay{color:var(--muted);font-size:.76rem;margin-top:7px;opacity:.8}

/* --- lúc mở hộp --- */
.rv-open{text-align:center;padding:52px 0}
.rv-shake{font-size:5.4rem;line-height:1;animation:rvShake .42s ease-in-out infinite}
@keyframes rvShake{0%,100%{transform:rotate(-11deg) scale(1)}
  50%{transform:rotate(11deg) scale(1.09)}}
.rv-reveal{text-align:center;padding:26px 0}
.rv-big{width:min(280px,74vw);aspect-ratio:1;margin:8px auto 14px;border-radius:20px;
  overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,var(--panel-2),var(--deep));
  animation:rvPop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes rvPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.rv-reveal.hang-hiem  .rv-big{box-shadow:0 0 44px -8px rgba(201,166,255,.75)}
.rv-reveal.hang-huyen .rv-big{box-shadow:0 0 60px -6px rgba(255,201,120,.85)}
.rv-reveal .rv-big .art-ic.rv-img i{font-size:6.5rem}
.rv-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ---------------- Dải Hành Trình ở trang chủ ---------------- */
.jn-strip{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  color:var(--text);cursor:pointer;margin-top:12px;padding:13px 16px;border-radius:var(--r);
  background:linear-gradient(120deg,rgba(143,216,255,.1),var(--panel));
  border:1px solid rgba(143,216,255,.3);transition:transform .16s,border-color .16s}
.jn-strip:hover{transform:translateY(-2px);border-color:#8FD8FF}
.jn-strip.soon{background:var(--panel);border-color:var(--line);opacity:.82}
.jn-ic{font-size:2rem;line-height:1;flex:0 0 auto}
.jn-txt{flex:1;min-width:0}
.jn-txt b{font-family:"Baloo 2",sans-serif;font-size:1.02rem}
.jn-txt small{color:var(--muted);font-size:.8rem;display:block}
.jn-txt .st-bar{margin:7px 0 5px;height:7px}

.jn-sealed{text-align:center;padding:44px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r)}
.jn-lock{font-size:3rem;margin-bottom:8px}

/* ---------------- Dải 4 giai đoạn ---------------- */
.ph-strip{display:flex;gap:8px;margin:0 0 16px;overflow-x:auto;padding-bottom:4px}
.ph{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:.84rem}
.ph b{font-weight:700}
.ph.done{color:var(--cyan);border-color:rgba(123,224,192,.35)}
.ph.now{color:var(--gold);border-color:var(--gold);background:rgba(255,201,120,.12);font-weight:800}

/* ---------------- Tranh tàu & căn cứ ---------------- */
.ship-svg,.moon-svg{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.st-art.ship{background:transparent}

/* Ảnh AI toàn cảnh, có SVG nằm sẵn bên dưới làm đường lui.
   Bình thường ẩn SVG; ảnh 404 thì JS gắn .no-img và đảo lại. */
.moon-art{position:relative;border-radius:var(--r-sm);overflow:hidden;line-height:0}
.moon-art img{display:block;width:100%;height:auto}
.moon-art-fallback{display:none}
.moon-art.no-img img{display:none}
.moon-art.no-img .moon-art-fallback{display:block}

/* Đồ trang trí mua ở Cửa Hàng, vẽ đè lên ảnh nền.
   Không thể sinh ảnh cho mọi tổ hợp đồ trang trí nên phải chồng lớp. */
.ma-d{position:absolute;line-height:1;font-size:clamp(14px,2.4vw,25px);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8));pointer-events:none}
/* Rải đều xuống dải tiền cảnh, tránh đè lên công trình ở dải giữa. */
.ma-astro  {left:16%;  bottom:13%;font-size:clamp(18px,3.2vw,32px)}
.ma-flag   {left:7%;   bottom:21%}
.ma-sign   {left:26%;  bottom:25%}
.ma-lamp   {left:35%;  bottom:11%}
.ma-bench  {left:44%;  bottom:13%}
.ma-path   {left:50%;  bottom:4%; opacity:.8}
.ma-rovi   {left:55%;  bottom:9%}
.ma-balloon{left:62%;  bottom:23%}
.ma-cat    {left:69%;  bottom:10%}
.ma-dog    {left:77%;  bottom:13%}
.ma-turtle {left:86%;  bottom:8%}
.ma-bird   {right:31%; top:38%}
.ma-dish   {right:23%; top:55%}
.ma-statue {right:11%; bottom:22%}
/* Dải thứ hai (26/08). Mười bốn chốt cũ đã chiếm hết dải bottom 4-25%,
   nên lớp mới xếp cao hơn một bậc — bottom 28-34% — và nhỏ hơn một chút
   cho ra vẻ ở xa. Diều thì treo hẳn lên trời. */
.ma-swing  {left:12%;  bottom:31%; font-size:clamp(12px,2vw,21px)}
.ma-fox    {left:21%;  bottom:34%; font-size:clamp(12px,2vw,21px)}
.ma-rabbit {left:31%;  bottom:30%; font-size:clamp(12px,2vw,21px)}
.ma-penguin{left:41%;  bottom:33%; font-size:clamp(12px,2vw,21px)}
.ma-pond   {left:58%;  bottom:30%; font-size:clamp(12px,2vw,21px)}
.ma-tree   {left:66%;  bottom:34%; font-size:clamp(12px,2vw,21px)}
.ma-owl    {left:74%;  bottom:31%; font-size:clamp(12px,2vw,21px)}
.ma-kite   {right:38%; top:14%;    font-size:clamp(12px,2vw,21px)}

/* ---------------- Ô biểu tượng có ảnh AI ----------------
   Ảnh nằm trên, emoji nằm dưới. Ảnh hỏng thì .no-img đảo lại. */
.art-ic{position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:52px;height:52px;border-radius:12px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line-soft)}
.art-ic img{width:100%;height:100%;object-fit:cover;display:block}
.art-ic i{display:none;font-style:normal;font-size:1.5rem;line-height:1}
.art-ic.no-img img{display:none}
.art-ic.no-img i{display:block}
.art-ic.si-ic{width:58px;height:58px}
.mod-row.built .art-ic{border-color:rgba(74,222,155,.45)}
.mod-row.next  .art-ic{border-color:var(--gold)}
.mod-row.lock  .art-ic{opacity:.5}

/* ---------------- Giai đoạn 2: ba đồng hồ ---------------- */
.prep-grid{display:grid;gap:12px;margin:16px 0}
.prep-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.prep-row.full{border-color:rgba(74,222,155,.45);
  background:linear-gradient(120deg,rgba(74,222,155,.09),var(--panel))}
.prep-head{display:flex;align-items:center;gap:12px}
.prep-ic{font-size:1.7rem;line-height:1;flex:0 0 auto}
.prep-head b{font-family:"Baloo 2",sans-serif;font-size:1.02rem;display:block}
.prep-head small{color:var(--muted);font-size:.8rem;line-height:1.45;display:block}
.prep-pct{margin-left:auto;font-family:"Baloo 2",sans-serif;font-size:1.3rem;font-weight:800;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.prep-row.full .prep-pct{color:var(--green)}
.prep-bar{height:11px;border-radius:999px;background:var(--panel-2);overflow:hidden;
  margin:12px 0 10px;border:1px solid var(--line-soft)}
.prep-bar>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .4s ease}
.prep-row.full .prep-bar>span{background:linear-gradient(90deg,var(--cyan),var(--green))}
.prep-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prep-foot small{flex:1;min-width:150px}
.prep-ok{color:var(--green);font-size:1.3rem;font-weight:800}
.prep-hint{margin:10px 0 0;font-size:.82rem;color:var(--muted);
  border-top:1px dashed var(--line-soft);padding-top:9px}

.launch{margin:8px 0 18px;text-align:center;padding:26px 20px;border-radius:var(--r);
  background:var(--panel);border:1px dashed var(--line)}
.launch h2{font-family:"Baloo 2",sans-serif;margin:0 0 6px;font-size:1.2rem}
.launch.ready{border:1px solid var(--gold);
  background:radial-gradient(120% 130% at 50% 0,rgba(255,201,120,.16),var(--panel))}
.launch-btn{font-family:"Baloo 2",sans-serif;font-size:1.25rem;padding:16px 42px;letter-spacing:.06em;
  background:linear-gradient(180deg,#FFD98F,#FF9E5E);color:#2A1400;border:none;
  box-shadow:0 10px 30px rgba(255,158,94,.45);animation:lgGlow 2.2s ease-in-out infinite}
@keyframes lgGlow{0%,100%{box-shadow:0 10px 30px rgba(255,158,94,.4)}
  50%{box-shadow:0 12px 40px rgba(255,158,94,.7)}}

/* ============================================================
   KHUNG CẢNH CHUYẾN BAY

   Sáu lớp chồng lên nhau. Màu lấy từ biến --sky1/--sky2/--neb/--star
   do JS gắn theo từng chặng, nên bay xa hơn là cả khung cảnh đổi tông.
   ============================================================ */
.fly-scene{position:relative;width:100%;aspect-ratio:900/420;overflow:hidden;
  border-radius:var(--r-sm);background:var(--sky2,#070B18);isolation:isolate}
.fly-scene>*{position:absolute;inset:0}

.fs-sky{background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 78%)}

/* Ảnh AI của chặng. Chưa sinh thì thẻ tự gỡ mình, lộ nền vẽ bên dưới. */
.fs-art{width:100%;height:100%;object-fit:cover;opacity:.92}

.fs-neb{background:
  radial-gradient(34% 42% at 16% 26%,var(--neb) 0%,transparent 66%),
  radial-gradient(26% 34% at 86% 70%,var(--neb) 0%,transparent 64%),
  radial-gradient(18% 24% at 62% 14%,var(--star) 0%,transparent 70%);
  opacity:.34;filter:blur(9px);mix-blend-mode:screen}

/* Thiên thể của chặng: Trái Đất lúc mới rời bến, Mặt Trăng lúc sắp tới */
.fs-body{inset:auto;left:var(--bx);top:var(--by);width:var(--br);height:var(--br);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--bc) 62%,#fff),var(--bc) 62%,
             color-mix(in srgb,var(--bc) 55%,#000) 100%);
  box-shadow:0 0 70px color-mix(in srgb,var(--bc) 40%,transparent)}

/* Viền khí quyển — thứ làm quả cầu ra dáng HÀNH TINH chứ không phải
   một vệt tròn mờ. Vẽ bằng vòng sáng lam ngay sát mép. */
.fs-body.atmo::before{content:'';position:absolute;inset:-5%;border-radius:50%;
  background:radial-gradient(circle,transparent 62%,rgba(143,216,255,.5) 78%,transparent 88%)}

/* Hố thiên thạch cho Mặt Trăng */
.fs-body.crater::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:.5;
  background:
    radial-gradient(circle at 30% 34%,rgba(0,0,0,.42) 0 4.5%,transparent 5%),
    radial-gradient(circle at 62% 26%,rgba(0,0,0,.35) 0 3%,transparent 3.4%),
    radial-gradient(circle at 46% 58%,rgba(0,0,0,.4)  0 6%,transparent 6.5%),
    radial-gradient(circle at 72% 66%,rgba(0,0,0,.3)  0 3.6%,transparent 4%),
    radial-gradient(circle at 22% 66%,rgba(0,0,0,.32) 0 4%,transparent 4.4%),
    radial-gradient(circle at 56% 82%,rgba(0,0,0,.28) 0 2.6%,transparent 3%)}

/* Viền nắng vàng hắt một bên — cho khối cầu có chiều sâu */
.fs-body.rim{box-shadow:0 0 70px color-mix(in srgb,var(--bc) 35%,transparent),
  inset -14px -10px 46px rgba(0,0,0,.45), inset 16px 12px 30px rgba(255,222,160,.32)}

.fs-body u{position:absolute;left:50%;top:50%;width:210%;height:30%;
  transform:translate(-50%,-50%) rotate(-16deg);border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--bc) 60%,#fff);opacity:.6;
  box-shadow:0 0 14px color-mix(in srgb,var(--bc) 50%,transparent)}

/* Hai lớp sao chạy ngược chiều tàu — thứ tạo cảm giác đang lao đi.
   Lớp gần chạy nhanh gấp đôi lớp xa, đó là hiệu ứng thị sai. */
.fs-stars i{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--star));display:block}
.fly-scene.moving .s-far  i{animation:fsFar  3.2s linear infinite}
.fly-scene.moving .s-near i{animation:fsNear 1.5s linear infinite}
.fly-scene.stalled .fs-stars i{opacity:.35!important}
@keyframes fsFar {from{transform:translateX(60vw)}to{transform:translateX(-70vw)}}
@keyframes fsNear{from{transform:translateX(70vw)}to{transform:translateX(-90vw)}}

/* Con tàu cao bằng 70% khung. Đo theo CHIỀU CAO chứ không theo chiều
   rộng: khung tàu là khung đứng, chặn theo chiều rộng thì nó thành bé tí. */
.fs-ship{display:grid;place-items:center;pointer-events:none}
.fs-ship svg{height:70%;width:auto;max-width:44%;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.65))
         drop-shadow(0 0 18px rgba(143,216,255,.25))}
.fly-scene.moving .fs-ship{animation:fsBob 3.4s ease-in-out infinite}
@keyframes fsBob{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

.fs-tag{inset:auto auto 12px 14px;display:flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;background:rgba(7,11,24,.72);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.fs-tag span{font-size:1.1rem;line-height:1}
.fs-tag b{font-family:"Baloo 2",sans-serif;font-size:.92rem;color:#fff}

.fs-dry{inset:auto 14px 12px auto;left:auto;padding:7px 14px;border-radius:999px;
  background:rgba(255,122,133,.9);color:#2A0006;font-weight:800;font-size:.82rem;
  height:fit-content}

@media (prefers-reduced-motion:reduce){
  .fly-scene.moving .fs-stars i,.fly-scene.moving .fs-ship{animation:none}
}

/* ---------------- Giai đoạn 3: chuyến bay ---------------- */
.fl-track{width:100%;margin:6px 0 2px}
.fl-bar{position:relative;height:13px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--line-soft)}
.fl-bar>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#8FD8FF);transition:width .5s ease}
.fl-ship{position:absolute;top:50%;transform:translate(-50%,-50%);font-style:normal;
  font-size:1.25rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:left .5s ease}
.fl-nums{margin-top:8px;text-align:center;font-variant-numeric:tabular-nums}
.fl-nums b{font-family:"Baloo 2",sans-serif;font-size:1.15rem}

/* Khung cảnh đặt trong màn Khởi hành và trong hộp quà cuối buổi */
.launch-stage,.gift-scene{margin:0 0 14px;border-radius:var(--r-sm);overflow:hidden}
.gift-scene{margin:10px 0 4px}
.gift-scene .moon-art img{border-radius:var(--r-sm)}

/* Đồng hồ km hiện NGAY TRONG lúc làm bài, để bé thấy tàu nhúc nhích
   từng câu một. Thiếu nó thì làm cả buổi vẫn tưởng tàu đứng im. */
.fly-hud{margin:2px 0 14px;padding:11px 14px;border-radius:var(--r-sm);
  background:linear-gradient(120deg,rgba(110,168,254,.13),var(--panel));
  border:1px solid rgba(143,216,255,.3);
  box-shadow:0 0 22px rgba(110,168,254,.12)}
.fly-hud .fl-bar{height:10px}
.fly-hud .fl-bar>span{box-shadow:0 0 12px rgba(143,216,255,.75)}
.fly-hud .fl-ship{animation:hudPulse 2.4s ease-in-out infinite}
@keyframes hudPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}
                    50%{transform:translate(-50%,-50%) scale(1.18)}}
.fly-hud small{display:block;margin-top:8px;text-align:center;color:var(--muted);
  font-size:.79rem;font-variant-numeric:tabular-nums}
.fly-hud small b{color:var(--text)}
.fly-hud small b.up{color:var(--green)}

.fuel-panel{margin:16px 0;padding:15px 17px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line)}
.fuel-panel.low{border-color:rgba(255,201,120,.5);
  background:linear-gradient(120deg,rgba(255,201,120,.09),var(--panel))}
.fuel-panel.dry{border-color:var(--red);
  background:linear-gradient(120deg,rgba(255,122,133,.12),var(--panel))}
.fuel-head{display:flex;align-items:center;gap:12px}
.fuel-head>span{font-size:1.7rem;line-height:1}
.fuel-head b{font-family:"Baloo 2",sans-serif;font-size:1.02rem;display:block}
.fuel-head small{color:var(--muted);font-size:.81rem;line-height:1.45;display:block}
.fuel-panel.dry .fuel-head small{color:var(--red)}

.legs{display:grid;gap:9px;margin-bottom:20px}
.leg{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line-soft);opacity:.55}
.leg.done{opacity:1;border-color:rgba(123,224,192,.32)}
.leg.now{opacity:1;border-color:var(--gold);
  background:linear-gradient(120deg,rgba(255,201,120,.11),var(--panel))}
.leg-ic{font-size:1.4rem;line-height:1;flex:0 0 auto}
.leg>div{flex:1;min-width:0}
.leg b{font-family:"Baloo 2",sans-serif;font-size:.97rem;display:block}
.leg small{color:var(--muted);font-size:.79rem;line-height:1.45;display:block}
.leg-km{flex:0 0 auto;font-size:.8rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- Giai đoạn 4: căn cứ ---------------- */
.mod-list.wide{display:grid;gap:9px;margin-bottom:22px}
.st-chip.done{color:var(--green);border-color:rgba(74,222,155,.45)}

/* ---------------- Cửa Hàng ---------------- */
.shop-tabs{display:flex;gap:8px;margin:14px 0 6px;overflow-x:auto;padding-bottom:4px}
.shop-tab{flex:0 0 auto;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  padding:9px 16px;border-radius:999px;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);transition:.16s}
.shop-tab:hover{border-color:var(--blue);color:var(--text)}
.shop-tab.on{background:rgba(255,201,120,.14);border-color:var(--gold);color:var(--gold);font-weight:800}
.shop-blurb{margin:2px 0 12px;font-size:.84rem}

/* Thanh bộ sưu tập — cho cửa hàng một đích dài hơi, chứ không chỉ là
   chỗ tiêu điểm rồi thôi. */
.sh-collect{display:flex;align-items:center;gap:16px;margin:14px 0 4px;padding:14px 18px;
  border-radius:var(--r);background:linear-gradient(120deg,rgba(255,201,120,.1),var(--panel));
  border:1px solid rgba(255,201,120,.28)}
.sh-collect-txt{flex:1;min-width:0}
.sh-collect-txt b{font-family:"Baloo 2",sans-serif;font-size:1.02rem;display:block}
.sh-collect-txt small{color:var(--muted);font-size:.79rem}
.sh-collect .st-bar{margin:8px 0 6px;height:8px}
.sh-collect-n{flex:0 0 auto;font-family:"Baloo 2",sans-serif;font-size:1.9rem;font-weight:800;
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.sh-collect-n i{font-style:normal;font-size:.95rem;color:var(--muted)}

/* Lưới thẻ hàng: ảnh to hẳn lên, mỗi món một thẻ riêng */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:13px;margin-bottom:26px}
.sh-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .16s,border-color .16s}
.sh-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.sh-card.owned{border-color:rgba(74,222,155,.42)}

.sh-pic{position:relative;aspect-ratio:1;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,var(--panel-2),var(--deep))}
.sh-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sh-pic i{display:none;font-style:normal;font-size:3.4rem;line-height:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.sh-pic.no-img img{display:none}
.sh-pic.no-img i{display:block}
.sh-card.owned .sh-pic{filter:saturate(.75)}
.sh-tick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#05230F;
  font-weight:800;font-size:.9rem}
.sh-flag{position:absolute;top:8px;left:8px;font-size:.9rem;line-height:1;
  background:rgba(7,11,24,.7);border-radius:999px;padding:4px 7px}

.sh-body{flex:1;padding:12px 14px 6px}
.sh-body b{font-family:"Baloo 2",sans-serif;font-size:.97rem;display:block;margin-bottom:3px}
.sh-body small{color:var(--muted);font-size:.78rem;line-height:1.46;display:block}
.si-gives{display:inline-block;margin-top:7px;font-size:.72rem;font-weight:800;color:var(--cyan);
  background:rgba(123,224,192,.12);border:1px solid rgba(123,224,192,.3);
  padding:3px 9px;border-radius:999px}
.si-own{display:inline-block;margin-top:7px;font-size:.72rem;color:var(--muted)}

.sh-buy{margin:10px 14px 14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-have{margin:10px 14px 14px;text-align:center;color:var(--green);
  font-weight:800;font-size:.86rem}

/* ============================================================
   LUYỆN TỪ MỚI
   ============================================================ */
.mode.m-vocab{border-color:rgba(123,224,192,.42);
  background:linear-gradient(160deg,rgba(123,224,192,.14),rgba(255,255,255,.03))}
.mode.m-vocab:hover{border-color:var(--cyan)}
.tag.t-vocab{color:var(--cyan);border-color:rgba(123,224,192,.5);background:rgba(123,224,192,.12)}

.vc-list{display:grid;gap:12px;margin-bottom:20px}
.vc-card{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;font:inherit;
  color:var(--text);cursor:pointer;padding:15px 17px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);transition:transform .16s,border-color .16s}
.vc-card:hover{transform:translateY(-2px);border-color:var(--cyan)}
.vc-card.khoa{opacity:.62;cursor:not-allowed;background:var(--deep)}
.vc-card.khoa:hover{transform:none;border-color:var(--line)}
.vc-ic{flex:0 0 auto;font-size:1.9rem;line-height:1;margin-top:1px}
.vc-txt{flex:1;min-width:0}
.vc-txt b{font-family:"Baloo 2",sans-serif;font-size:1.06rem;display:block}
.vc-txt small{color:var(--muted);font-size:.8rem;display:block;margin-bottom:8px}
.vc-card .bar{height:8px}
.vc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:.79rem}
/* Cả cụm số nằm trên MỘT dòng. Để chữ tự ngắt thì ra kiểu
   "đã thuộc / 56 / 158 từ" xuống ba dòng, nhìn rời rạc. */
.vc-so{color:var(--muted);white-space:nowrap}
.vc-so b{color:var(--text);font-size:.92rem}
.vc-card.khoa .vc-so{white-space:normal}
.vc-card.khoa .vc-so b{color:var(--gold)}
.vc-blurb{margin:8px 0 0;font-size:.79rem;color:var(--muted);line-height:1.5}

.vc-note{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px;margin-bottom:24px}
.vc-note b{font-family:"Baloo 2",sans-serif;font-size:.98rem;display:block;margin-bottom:6px}
.vc-note ol{margin:0;padding-left:20px;color:var(--muted);font-size:.83rem;line-height:1.75}
.vc-note ol b{display:inline;font-size:.85rem;color:var(--text);margin:0}

/* Nút loa cho câu hỏi nghe — to và dễ bấm, bé sẽ bấm nhiều lần. */
.vc-loa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:0 0 12px;padding:14px 18px;border-radius:var(--r);font:inherit;cursor:pointer;
  background:linear-gradient(120deg,rgba(123,224,192,.18),var(--panel-2));
  border:1.5px solid rgba(123,224,192,.45);color:var(--text);transition:transform .14s}
.vc-loa:hover{transform:translateY(-2px);border-color:var(--cyan)}
.vc-loa:active{transform:translateY(1px)}
.vc-loa span{font-size:1.7rem;line-height:1}
.vc-loa b{font-family:"Baloo 2",sans-serif;font-size:1.02rem}

/* Bảng báo chạm mốc thưởng từ vựng */
.vc-moc{display:flex;align-items:flex-start;gap:13px;margin:14px 0 4px;padding:14px 17px;
  text-align:left;border-radius:var(--r);
  background:linear-gradient(120deg,rgba(255,201,120,.16),var(--panel));
  border:1px solid var(--gold)}
.vc-moc>span{font-size:1.8rem;line-height:1}
.vc-moc b{font-family:"Baloo 2",sans-serif;font-size:1.05rem;color:var(--gold);display:block}
.vc-moc small{color:var(--muted);font-size:.82rem;line-height:1.5;display:block;margin-top:3px}

/* Thẻ tra cứu hiện sau khi trả lời — đây mới là lúc bé thật sự nhớ từ,
   nên cho nó nổi bật hơn hẳn khối giải thích thường. */
.vc-the{margin:12px 0 4px;padding:13px 16px;border-radius:var(--r-sm);
  background:linear-gradient(120deg,rgba(123,224,192,.12),var(--panel-2));
  border:1px solid rgba(123,224,192,.32);line-height:1.6}
.vc-the b{font-family:"Baloo 2",sans-serif;font-size:1.25rem;color:var(--cyan)}
/* Dấu nhấn ˈ trong lời giải — tô vàng để bé nhìn ra ngay nó nằm ở đâu */
.vc-nhan{text-decoration:none;color:var(--gold);font-weight:800;
  background:rgba(255,201,120,.18);padding:0 3px;border-radius:3px}
.vc-the i{font-style:normal;color:var(--muted);font-size:.8rem}
.rev-item.vc-rev{line-height:1.6}
.rev-item.vc-rev b{font-family:"Baloo 2",sans-serif;font-size:1.05rem;color:var(--cyan)}
.rev-item.vc-rev i{font-style:normal;color:var(--muted);font-size:.78rem}

@media (max-width:520px){
  .vc-card{padding:13px 14px;gap:11px}
  .vc-ic{font-size:1.6rem}
}

/* ============================================================
   GHÉ THĂM BẠN

   Cố ý KHÔNG có màu vàng/bạc/đồng, không đánh số thứ hạng, không
   viền nổi bật cho ai. Mọi thẻ bạn trông giống hệt nhau — đây là đi
   xem nhà nhau, không phải xếp hạng. Xem chú thích đầu js/rewards.js.
   ============================================================ */
.fr-strip{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  color:var(--text);cursor:pointer;margin-top:12px;padding:13px 16px;border-radius:var(--r);
  background:linear-gradient(120deg,rgba(255,158,181,.1),var(--panel));
  border:1px solid rgba(255,158,181,.3);transition:transform .16s,border-color .16s}
.fr-strip:hover{transform:translateY(-2px);border-color:var(--pink)}

.fr-list{display:grid;gap:11px;margin-bottom:24px}
.fr-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  color:var(--text);cursor:pointer;padding:14px 16px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);transition:transform .16s,border-color .16s}
.fr-card:hover{transform:translateY(-2px);border-color:var(--blue)}
.fr-card.empty{opacity:.6;cursor:default}
.fr-card.empty:hover{transform:none;border-color:var(--line)}
.fr-av{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  font-size:1.5rem;background:var(--panel-2);border:1px solid var(--line-soft)}
.fr-av.big{width:70px;height:70px;font-size:2.2rem}
.fr-txt{flex:1;min-width:0}
.fr-txt b{font-family:"Baloo 2",sans-serif;font-size:1.04rem;display:block}
.fr-txt small{color:var(--muted);font-size:.81rem;display:block}
.fr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fr-chips span{font-size:.73rem;font-weight:700;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line-soft);padding:3px 9px;border-radius:999px}
.fr-art{flex:0 0 auto;width:98px;line-height:0}
.fr-art-img{width:100%;height:auto;border-radius:8px;display:block}
.fr-art-svg svg{width:100%;height:auto;display:block}

.fr-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.fr-head h1{font-family:"Baloo 2",sans-serif;margin:2px 0 4px;font-size:1.4rem}
.fr-head .lead{margin:0;font-size:.88rem}

.fr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin:16px 0 4px}
.fr-stats>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;text-align:center}
.fr-stats b{display:block;font-family:"Baloo 2",sans-serif;font-size:1.25rem;
  font-variant-numeric:tabular-nums}
.fr-stats span{color:var(--muted);font-size:.76rem}

.fr-topics{display:grid;gap:9px;margin-bottom:20px}
.fr-topic{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line-soft)}
.fr-topic-txt{flex:1;min-width:0}
.fr-topic-txt b{font-size:.92rem;display:block;margin-bottom:6px}
.fr-topic .bar{height:7px}
.fr-medal{flex:0 0 auto;width:34px;height:34px;border-radius:8px;object-fit:cover}

@media (max-width:520px){
  .fr-card{flex-wrap:wrap}
  .fr-art{width:100%;order:9}
  .fr-card .st-go{display:none}
  .fr-head{gap:12px}
  .fr-head h1{font-size:1.2rem}
  .fr-topic{flex-wrap:wrap}
  .fr-topic .rank-chip{margin-left:auto}
  .prep-head{flex-wrap:wrap}
  .prep-pct{margin-left:0}
  .prep-foot .btn{width:100%}
  .launch-btn{width:100%;font-size:1.1rem;padding:15px 20px}
  .sh-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .sh-body{padding:10px 11px 4px}
  .sh-body b{font-size:.9rem}
  .sh-body small{font-size:.73rem}
  .sh-buy,.sh-have{margin:8px 11px 11px;font-size:.8rem;padding:8px 10px}
  .sh-collect{padding:12px 14px;gap:12px}
  .sh-collect-n{font-size:1.5rem}
  .tt-clock{width:40px;height:40px}
  .tt-clock span{font-size:.92rem}
  .tt-score{width:100%;margin:6px 0 0;text-align:center}
  .wallet .w-chip{font-size:.82rem;padding:6px 11px}
  .leg{padding:10px 12px;gap:10px}
  .leg-km{display:none}
}

/* ================= HÀNH TRÌNH 2 — TỚI MẶT TRỜI (sun.js) ================= */
.w-chip.hk{color:#FFB37A;border-color:rgba(255,158,94,.5);background:rgba(255,158,94,.12)}
.jn-strip.ht2 .jn-ic{background:radial-gradient(circle at 40% 40%,#FFE9A8,#FF9E5E 70%);border-radius:50%}
.ma-pad{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.hk-note{display:flex;gap:12px;align-items:flex-start;background:rgba(255,158,94,.08);border:1px solid rgba(255,158,94,.35);
  border-radius:var(--r-sm);padding:12px 14px;margin:0 0 12px}
.hk-note>span{font-size:1.5rem;line-height:1}
.hk-note>div>b{display:block;margin-bottom:2px}
.hk-note small{color:var(--muted);line-height:1.45}
.dk-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:14px 0 18px}
.dk-panel.du{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,201,120,.25),0 8px 30px rgba(255,201,120,.12)}
.dk-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.dk-head>span{font-size:1.6rem;line-height:1}
.dk-head>div>b{display:block}
.dk-head small{color:var(--muted)}
.dk-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dk-list li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line)}
.dk-list li.ok{border-color:rgba(74,222,155,.45);background:rgba(74,222,155,.07)}
.dk-list li>div{flex:1;min-width:0}
.dk-list li>div>b{display:block;font-size:.95rem}
.dk-list li small{color:var(--muted);line-height:1.4}
.dk-ic{font-size:1.4rem;line-height:1}
.dk-tick{font-weight:900;font-size:1.2rem;color:#FF7A85}
.dk-list li.ok .dk-tick{color:var(--green)}
.mod-row .bp-need{margin-top:6px}

/* --- chuyến bay tới Mặt Trời --- */
.fl-bar.sun>span{background:linear-gradient(90deg,#FFC978,#FF9E5E,#FFF3C0)}
.fly-hud.sun{border-color:rgba(255,158,94,.4)}
.sun-scene .fs-body.rim{box-shadow:0 0 90px color-mix(in srgb,var(--bc) 55%,transparent),0 0 200px color-mix(in srgb,var(--bc) 30%,transparent)}
.sk-list{display:grid;gap:10px;margin:0 0 18px}
.sk-card{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px}
.sk-card.san{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,201,120,.2)}
.sk-card.xong{opacity:.85;border-color:rgba(74,222,155,.4)}
.sk-card.cho{opacity:.55}
.sk-ic{font-size:1.8rem;line-height:1;flex:0 0 auto}
.sk-txt{flex:1;min-width:0}
.sk-txt b{display:block;margin-bottom:2px}
.sk-txt small{color:var(--muted);line-height:1.45}
.sk-gate{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#FF7A85;border:1px solid rgba(255,122,133,.5);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.sk-chan{display:flex;gap:12px;align-items:center;background:rgba(255,122,133,.09);border:1px solid rgba(255,122,133,.45);
  border-radius:var(--r-sm);padding:12px 14px;margin:0 0 14px}
.sk-chan>span{font-size:1.6rem;line-height:1}
.sk-chan b{display:block}.sk-chan small{color:var(--muted)}
.leg.vt{border-style:dashed}
.leg-vt{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#C9A6FF;
  border:1px solid rgba(201,166,255,.5);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.leg-that{display:block;margin-top:4px;color:var(--cyan)}
.dh-doan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:0 0 16px;
  font-size:1.08rem;line-height:1.7;font-family:Georgia,"Times New Roman",serif}
.dh-form{display:grid;gap:12px}
.dh-cau{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin:0;background:var(--panel)}
.dh-cau legend{font-weight:800;padding:0 6px}
.dh-cau label{display:block;padding:6px 4px;cursor:pointer}
.dh-cau input{margin-right:8px}

/* --- Căn cứ Vành Nhật Hoa --- */
.w-chip.tn{color:#FFD98F;border-color:rgba(255,201,120,.5);background:rgba(255,201,120,.12)}
.hk-note .btn{flex:0 0 auto;align-self:center}
.bp-card.khoa{opacity:.6}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:0 0 20px}
.bt-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;text-align:center}
.bt-item .art-ic{width:100%;aspect-ratio:1;display:block;margin:0 auto 6px}
.bt-item small{display:block;font-size:.72rem;color:var(--muted);line-height:1.3}
.bt-item.hang-nhathoa{border-color:rgba(255,179,122,.6);box-shadow:0 0 12px rgba(255,158,94,.25)}
.rv-item.hang-nhathoa{border-color:rgba(255,179,122,.7);box-shadow:0 0 14px rgba(255,158,94,.3)}
.corona-art .moon-svg{display:block;width:100%;height:auto}