/* ==========================================================
   page-shell.css — KHUNG DÙNG CHUNG của các trang nội dung (không phải game).

   Nạp giữa common.css và css/<trang>.css:
     css/common.css → css/page-shell.css → css/<trang>.css

   Chứa những thứ mọi trang nội dung đều cần, để không phải copy giữa các trang:
     · nền (starfield + nebula) và .wrap
     · header .hub-top (nút về, tag, ví tt, đổi ngôn ngữ)
     · .hero (eyebrow + h1 + mô tả)
     · khối kính .panel + nhãn .panel-tag
     · nút lọc .seg, ô trạng thái .banner, ô rỗng .empty
     · lưới thống kê .kv

   ⚠️ games.html / learn.html / library.html có bản copy RIÊNG của phần header +
   nền trong css của chúng (viết trước file này). Nên chuyển sang dùng file này,
   nhưng đó là việc dọn dẹp riêng — làm chung với một tính năng mới thì lúc hỏng
   không biết lỗi ở đâu.
   ========================================================== */

:root{
  --bg:#0b0f19; --bg2:#0d1322;
  --cyan:#38bdf8; --purple:#c084fc; --green:#4ade80; --amber:#fb923c; --red:#ef4444;
  --brd:rgba(120,160,255,.18); --brd-on:rgba(120,160,255,.4);
  --glass:linear-gradient(180deg, rgba(15,23,42,.62), rgba(13,19,34,.5));
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Share Tech Mono", ui-monospace, "Consolas", monospace;
  --jelly:cubic-bezier(.34,1.56,.64,1);
}
html,body{min-height:100%;}
body{min-height:100vh;overflow-x:hidden;
  background:radial-gradient(ellipse at 50% -10%, #16204a 0%, var(--bg2) 46%, var(--bg) 100%);}
a{text-decoration:none;}
:focus-visible{outline:2px solid var(--cyan);}

.starfield{opacity:.7;background-image:
    radial-gradient(1.3px 1.3px at 20% 30%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 80% 20%, #dcecff, transparent),
    radial-gradient(1px 1px at 60% 70%, #cfe0ff, transparent),
    radial-gradient(1.1px 1.1px at 40% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 55%, #bcd0ff, transparent);
  animation:drift 160s linear infinite, tw 5s ease-in-out infinite;}
.nebula{filter:blur(10px);opacity:.7;background:
    radial-gradient(closest-side at 18% 24%, rgba(192,132,252,.22), transparent 70%),
    radial-gradient(closest-side at 82% 22%, rgba(56,189,248,.18), transparent 70%),
    radial-gradient(closest-side at 60% 82%, rgba(74,222,128,.12), transparent 70%);}

.wrap{position:relative;z-index:10;max-width:1120px;margin:0 auto;padding:0 clamp(14px,3vw,30px) 70px;}

/* ============ HEADER ============ */
.hub-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0 12px;
  background:linear-gradient(180deg, rgba(11,15,25,.9), rgba(11,15,25,.2));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.back-btn{letter-spacing:.08em;padding:9px 14px;transition:background .18s,transform .12s,box-shadow .2s;}
.back-btn:hover{box-shadow:0 0 18px -6px rgba(56,189,248,.7);}
/* `min-width:max-content` là BẮT BUỘC. Có `flex:1` + `overflow:hidden` thì kích cỡ
   tối thiểu tự động của flex item về 0, nên trên màn 390px cái nhãn bị bóp còn
   "[ …" — không đọc được gì (thấy trên ảnh chụp). Với min-width:max-content thì
   nhãn giữ nguyên bề rộng chữ và các thứ sau nó tự xuống dòng, đúng như trước. */
.hub-tag{flex:1;min-width:max-content;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;white-space:nowrap;}
.currency{padding:7px 13px;}
.gem{width:26px;height:26px;box-shadow:0 0 16px rgba(192,132,252,.8), inset 0 0 10px rgba(192,132,252,.5);
  animation:gemPulse 2.4s ease-in-out infinite;}
.gem img{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(192,132,252,.95));}
@keyframes gemPulse{0%,100%{box-shadow:0 0 13px rgba(192,132,252,.55), inset 0 0 8px rgba(192,132,252,.4);}
  50%{box-shadow:0 0 24px rgba(192,132,252,1), inset 0 0 13px rgba(192,132,252,.7);}}
.currency .c-val{font-size:16px;}
/* Nút ngôn ngữ dùng bản CHUNG ở css/common.css (gộp 19/08/2026 — trước đó sáu file
   chép lại rule này và lệch thành 6 kiểu chip khác nhau). */
.lang-switch{background:rgba(8,14,38,.6);border:1px solid var(--brd);}

/* ============ HERO ============ */
.hero{text-align:center;padding:20px 0 6px;}
.hero .eyebrow{font-size:12px;color:var(--cyan);}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,4.2vw,36px);margin:8px 0 0;
  line-height:1.15;text-shadow:0 2px 30px rgba(95,150,255,.35);}
.hero p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:10px auto 0;max-width:620px;}

/* ============ KHỐI KÍNH ============ */
.panel{position:relative;border-radius:18px;padding:22px 20px 20px;border:1px solid rgba(56,189,248,.28);
  background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 56px -26px rgba(0,0,0,.78), inset 0 0 34px -20px rgba(120,220,255,.6);}
.panel-tag{position:absolute;top:-10px;left:18px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  background:var(--bg);border:1px solid rgba(56,189,248,.42);padding:3px 10px;border-radius:999px;
  box-shadow:0 0 14px rgba(56,189,248,.35);}
.panel-tag .led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);
  animation:blink 1.6s steps(1,end) infinite;}
.panel h2{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0 0 14px;
  display:flex;align-items:center;gap:9px;}
.panel h2 .ic{font-size:19px;line-height:1;}

/* ============ NÚT LỌC (segmented) ============ */
.seg{display:flex;flex-wrap:wrap;gap:6px;}
.seg button{cursor:pointer;border:1px solid var(--brd);background:rgba(8,14,38,.55);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  transition:background .16s,color .16s,border-color .16s,transform .12s;}
.seg button:hover{color:var(--ink);border-color:var(--brd-on);}
.seg button:active{transform:scale(.95);}
.seg button.on{color:#04060f;border-color:transparent;background:linear-gradient(120deg,var(--cyan),var(--purple));}
.seg button .n{font-family:var(--font-mono);font-size:10.5px;opacity:.8;margin-left:5px;}

/* Hàng bộ lọc: nhãn nhỏ + một hoặc nhiều dãy .seg. Dùng ở achievements.html và
   specimen-vault.html (chuyển từ css/achievements.css sang đây ngày 29/07/2026). */
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 0;}
.filters .lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);}

/* Dòng mô tả phụ trong .panel (khác .hero p vì không canh giữa, không giới hạn 620px) */
.panel-sub{color:var(--ink-soft);font-size:13.2px;line-height:1.6;margin:-4px 0 14px;}

/* ============ DẢI THÔNG BÁO TRẠNG THÁI ============
   Dùng khi trang đang hiện SỐ CŨ trong máy vì không gọi được server. Hiện số cũ
   mà không nói gì là đánh lừa người dùng. */
.banner{display:none;align-items:center;gap:10px;margin:16px 0 0;padding:11px 14px;border-radius:14px;
  border:1px solid rgba(251,146,60,.42);background:rgba(38,22,8,.5);color:#ffd7a6;
  font-size:13.2px;line-height:1.5;}
.banner.show{display:flex;}
.banner .ic{font-size:17px;line-height:1;flex:none;}
.banner a{color:#ffe3bd;text-decoration:underline;text-underline-offset:3px;}

/* Nhãn chỉ dành cho trình đọc màn hình (ô nhập đã có placeholder nhìn thấy được,
   nhưng placeholder KHÔNG thay được <label> với trình đọc màn hình). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============ Ô RỖNG ============ */
.empty{text-align:center;color:var(--ink-faint);font-size:13.5px;padding:26px 10px;line-height:1.6;}
.empty .ic{display:block;font-size:30px;margin-bottom:8px;opacity:.75;}

/* ============ LƯỚI THỐNG KÊ ============ */
/* minmax 172px, KHÔNG phải 148px: ở 148px màn desktop xếp được 4 cột và nhãn dài
   bị cắt hết đuôi ("LƯỢT HUẤN LUY…", "HÀNH TINH ĐÃ …") — nhìn ảnh chụp mới thấy. */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px;}
.kv .cell{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;
  border:1px solid var(--brd);background:rgba(15,23,42,.44);transition:transform .3s var(--jelly),border-color .25s;}
.kv .cell:hover{transform:translateY(-3px);border-color:var(--brd-on);}
.kv .cell .ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.34);}
.kv .cell .b{display:flex;flex-direction:column;line-height:1.18;min-width:0;}
.kv .cell .v{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:#fff;}
.kv .cell .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ============ NÚT CHÍNH ============ */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;
  padding:11px 18px;border-radius:13px;font-family:var(--font-display);font-weight:700;font-size:14px;
  color:#04060f;background:linear-gradient(120deg,var(--cyan),var(--purple));
  box-shadow:0 12px 24px -12px rgba(95,211,255,.8);transition:transform .28s var(--jelly),filter .18s;}
.pbtn:hover{filter:brightness(1.08);transform:translateY(-2px);}
.pbtn:active{transform:scale(.95);}
.pbtn:disabled{cursor:default;filter:grayscale(.6) brightness(.8);transform:none;box-shadow:none;}
.pbtn.ghost{background:rgba(255,255,255,.06);border:1px solid var(--brd);color:var(--ink);box-shadow:none;}
.pbtn.ghost:hover{background:rgba(255,255,255,.12);border-color:var(--brd-on);}

/* Toast dùng chung (khung ở common.css, đây chỉ đặt vị trí + màu) */
.toast{top:80px;transform:translateX(-50%) translateY(-10px);z-index:70;
  padding:12px 18px;font-size:13.5px;background:rgba(13,20,48,.94);
  border:1px solid rgba(95,211,255,.5);box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  transition:opacity .28s var(--ease),transform .28s var(--ease);}
@media (max-width:560px){ .toast{top:auto;bottom:18px;} }

/* Vùng chạm 44px trên thiết bị cảm ứng — lý do và cảnh báo ghi ở `css/common.css`.
   Đo trên iPad: nút lọc `.seg` cao 25–32px, `.pbtn` cao 40–43px. */
@media (pointer: coarse){
  .seg button{min-height:44px;}
  .pbtn{min-height:44px;}
}

/* ══════════════ KHỐI "MỞ RỘNG" TRONG TRÌNH ĐỌC BÀI ══════════════
   Dựng bởi `js/more-box.js`, dùng chung cho CẢ HAI trình đọc (library.html và
   learn.html) — đó là lý do nó nằm ở đây chứ không ở css/library.css: hai bản
   chép tay cho cùng một khối là thứ sẽ trôi khỏi nhau, đúng cái đã xảy ra với
   hai mảng ARTICLES riêng trước 09/08/2026.

   ⚠️ TÔNG TÍM, KHÔNG PHẢI TÔNG CHÍNH CỦA TRANG. Phần Mở rộng là thứ THÊM, không
      phải phần bài học bắt buộc; cho nó cùng tông cyan với thân bài là nói rằng
      trẻ phải đọc nốt. Tím = "còn nữa nếu bạn muốn". */
.mb{margin:18px 0 0;padding:14px 16px;border-radius:14px;
  background:rgba(143,123,255,.09);border:1px solid rgba(143,123,255,.34);}
.mb[hidden]{display:none;}
.mb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mb-h{margin:0;font-family:var(--font-display);font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:#c9b6ff;flex:1 1 auto;min-width:max-content;}
.mb-btn{flex:none;cursor:pointer;border-radius:999px;padding:8px 14px;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  background:rgba(143,123,255,.18);border:1px solid rgba(143,123,255,.5);
  color:#e6dcff;transition:filter .18s,transform .18s var(--ease);}
.mb-btn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.mb-btn:active{transform:scale(.96);}
/* ⚠️ `display` của tác giả THẮNG `display:none` mà trình duyệt áp cho `[hidden]`,
   nên PHẢI khai lại — bẫy này dự án đã trả giá chín lần, xem `js/more-box.js`. */
.mb-body{display:block;margin-top:10px;}
.mb-body[hidden]{display:none;}
.mb-body p{margin:0 0 10px;font-size:14.5px;line-height:1.75;color:var(--ink-soft);}
.mb-body p:last-child{margin-bottom:0;}
.mb-note{font-size:12px;color:var(--ink-faint);font-style:italic;}
@media (pointer: coarse){ .mb-btn{min-height:44px;} }