/* ==========================================================
   missions.css — phần RIÊNG của missions.html (TRUNG TÂM NHIỆM VỤ · MOD-04).

   Khung chung (tokens, nền, `.wrap`, `.hub-top`, `.hero`, `.panel`, `.kv`,
   `.banner`, `.currency`, `.lang-switch`, `.pbtn`, `.toast`) ở `css/page-shell.css`;
   dòng "Chơi tiếp" ở `css/resume.css` — dùng chung với bản đồ. ĐỪNG chép sang đây.

   ⚠️⚠️ TRANG NÀY ĐỔI VAI 12/08/2026 (`docs/decisions/008`, việc còn treo số 1).
   Trước đó nó là một LƯỚI THẺ NHIỆM VỤ (`.mcard`, dựng giống `.gcard` của
   `games.html`). Nay nó là **CỬA TRƯỚC** của cả khu nhiệm vụ, và lưới thẻ đã chuyển
   xuống đúng tầng của nó là màn hành tinh (`mission-planet.html`):

     dashboard (MOD-04) → TRANG NÀY → bản đồ → hành tinh → cây chặng

   Vì sao bỏ lưới thẻ ở đây: bản đồ đã là chỗ chọn NƠI, mà mỗi nhiệm vụ thuộc về một
   nơi. Giữ cả hai là **hai đường vào cho cùng một nhiệm vụ** — đúng lỗi đã trả giá ở
   Sổ Tay Thuật Ngữ (04/08/2026, gỡ hẳn đường vào thứ hai): hai chỗ phải sửa mỗi lần
   đổi tên, và trẻ không nhận ra đó là một chỗ.

   ⚠️ THÊM MỘT TẦNG LÀ THÊM MỘT CÚ CHẠM — bù bằng dòng "Chơi tiếp" đặt TRÊN mọi nhóm.
      Từ dashboard tới chặng đang dở là **2 cú chạm**, ÍT hơn luồng cũ. Đó là lý do
      `.resume` nằm ngay đầu trang chứ không nằm dưới bảng tổng quan.

   Ở đây chỉ còn hai thứ trang này mới có:
     · `.sec-h`  đầu nhóm: tên nhóm + một con số ở mép phải
     · `.big`    thẻ lớn dẫn sang bản đồ
   ========================================================== */

/* Cỡ chữ hero to hơn khung chung một chút, y như games.css: đây là trang "chọn việc
   để làm", tiêu đề là thứ đầu tiên trẻ đọc. */
.hero h1{font-size:clamp(24px,4.4vw,38px);}
.hero p{max-width:600px;}

.panel + .panel{margin-top:22px;}
.resume{margin-top:22px;}

/* ============ ĐẦU NHÓM ============ */
.sec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.sec-t{font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.sec-m{flex:1;text-align:right;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);}

/* ============ THẺ LỚN DẪN SANG BẢN ĐỒ ============
   Nhóm chính tuyến chỉ có ĐÚNG MỘT lối đi, nên nó là một thẻ lớn chứ không phải một
   danh sách một dòng — một danh sách một phần tử đọc ra như danh sách bị lỗi. */
.big{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;
  text-decoration:none;min-height:48px;
  border:1px solid rgba(56,189,248,.4);background:rgba(14,28,56,.55);
  transition:border-color .18s, background .18s, transform .16s var(--jelly);}
.big:hover{border-color:var(--cyan);background:rgba(18,36,68,.72);}
.big:active{transform:scale(.99);}
.big .big-ic{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-size:27px;border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.1);}
.big .big-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35;}
.big .big-b b{font-family:var(--font-display);font-size:17px;color:#fff;}
.big .big-b span{margin-top:3px;font-size:13px;color:var(--ink-soft);}
.big .chev{flex:none;font-size:22px;line-height:1;color:var(--ink-faint);}
.big:hover .chev{color:var(--cyan);}

@media (max-width:520px){
  .big{padding:12px;gap:12px;}
  .big .big-ic{width:46px;height:46px;font-size:24px;}
  .big .big-b b{font-size:16px;}
  /* Con số của nhóm xuống hàng riêng — trên màn hẹp nó bị tên nhóm ép còn vài chục
     pixel và cắt mất đuôi. */
  .sec-m{flex-basis:100%;text-align:left;}
}

/* ===== Khung xương chống nhảy bố cục =====
   ⚠️⚠️ HAI Ô NÀY RỖNG Ở KHUNG SƠN ĐẦU TIÊN. `#daily` do `AstroQDaily.paint()` điền,
   `#ov` do trang này điền, cả hai sau khi ảnh chụp tiến độ về. Trên **mạng chậm**,
   ô rỗng nghĩa là hai panel bên dưới tụt xuống đúng lúc dữ liệu tới — đo được
   25/08/2026 bằng `scratchpad/probe_cls.py` (4G 9 Mbps/RTT 150ms + CPU ×4):
   CLS **0,1061** ở 768px (panel VIỆC HÔM NAY giãn 196→250px = đúng 54px của `#daily`,
   panel kế giãn 196→254px = đúng 58px của `#ov`) và 0,0701 ở 1440px.

   ⚠️ Hai con số là SÀN ĐO ĐƯỢC, không phải chiều cao đúng: quét bề rộng 1600→360px
      thì `#daily` cao 54px ở mọi mức ≥480px (74px ở ≤390px) và `#ov` cao 58px ở
      ≥520px (126px ở 480px, 194px ở ≤390px) — vì `.kv` là lưới `auto-fit` nên nó
      xuống dòng ở màn hẹp. Đặt SÀN chứ không đặt chiều cao đúng: sàn thấp hơn mọi
      giá trị thật nên không bao giờ chừa khoảng trống, mà vẫn cắt hết cú nhảy ở
      những bề rộng gây ra nó.
   ⚠️ An toàn khi dữ liệu chưa về: `AstroQDaily.paint()` LUÔN xuất `.dl-head` cộng
      một dòng chú (nhánh `!snap` hiện dấu "—" và nói rõ lý do), nên `#daily` không
      bao giờ rỗng thật — cái sàn này không tạo ra ô trống trong trạng thái nào. */
#daily{min-height:54px;}
#ov{min-height:58px;}