/* Trang chủ, trang hướng dẫn, màn hình chọn thư mục (mọi thứ trong .home). Trang đề dùng style.css. */
body.view-home { background:#f4f6fa; line-height:1.5; }
.home { --ink:#1d2433; --muted:#5b6475; --line:#dde2ec; --bg:#f4f6fa; --card:#fff; --acc:#2f6fde; --acc-soft:#e8f0fd;
        max-width:1040px; margin:0 auto; padding:28px 16px 48px; color:var(--ink); }
.home .hero h1 { margin:0; font-size:30px; color:var(--ink); }
.home .hero p { margin:6px 0 0; color:var(--muted); }
.home .tabs { display:flex; gap:10px; margin:24px 0 8px; flex-wrap:wrap; }
.home .tabs button { font:inherit; font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px;
                     padding:10px 18px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.home .tabs button em { font-style:normal; font-size:13px; color:var(--muted); background:var(--bg); border-radius:999px; padding:1px 8px; }
.home .tabs button[aria-selected="true"] { border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }
.home .tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:14px 0 0; }
.home .tools input[type=search] { font:inherit; font-size:15px; padding:8px 12px; border:1px solid var(--line); border-radius:10px;
                                   min-width:240px; margin-left:auto; background:var(--card); color:var(--ink); }
.home .chips { display:flex; flex-wrap:wrap; gap:8px; }
.home .chips button { font:inherit; font-size:14px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.home .chips button[aria-pressed="true"] { border-color:var(--acc); color:var(--acc); background:var(--acc-soft); font-weight:600; }
.home .group { margin-top:26px; }
.home .group header { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:12px; }
.home .group h3 { margin:0; font-size:21px; }
.home .group .count { font-size:13px; font-weight:600; color:var(--acc); background:var(--acc-soft); border-radius:999px; padding:1px 9px; }
.home .group header p { flex-basis:100%; margin:0; color:var(--muted); font-size:15px; }
.home .cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.home .card { display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--card); border:1px solid var(--line);
              border-radius:12px; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s; }
.home .card:hover { border-color:var(--acc); transform:translateY(-1px); }
.home .card .no { flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
                  font-weight:700; font-size:18px; color:var(--acc); background:var(--acc-soft); }
.home .card .txt { display:flex; flex-direction:column; min-width:0; }
.home .card b { font-weight:600; }
.home .card small { color:var(--muted); font-size:13px; }
.home .empty { color:var(--muted); }
.home .tip { margin-top:36px; padding:12px 16px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:14px; }
.home a { color:var(--acc); }
.home .card, .home .card:hover { color:inherit; }
/* màn hình chọn thư mục */
.home .connect { margin-top:24px; max-width:640px; }
.home .big-btn { font:inherit; font-weight:600; color:#fff; background:var(--acc); border:0; border-radius:999px; padding:10px 22px; cursor:pointer; }
.home .link-btn { font:inherit; background:none; border:0; color:var(--acc); text-decoration:underline; cursor:pointer; }
/* trang hướng dẫn */
.help-page h3 { margin:28px 0 8px; font-size:19px; }
.help-page table.t.help { width:100%; background:var(--card); font-size:14px; }
.help-page table.t.help td, .help-page table.t.help th { text-align:left; vertical-align:top; height:auto; white-space:pre-wrap; }
.help-page table.t.help th { background:var(--acc-soft); }
.help-page td.code { font-family:Consolas, "Courier New", monospace; font-size:13px; }
.help-page .swatches { display:flex; flex-wrap:wrap; gap:8px 16px; }
.help-page .swatch { display:inline-flex; align-items:center; gap:6px; font-family:Consolas, monospace; font-size:13px; }
.help-page .swatch i { width:18px; height:18px; border:1px solid var(--line); border-radius:4px; display:inline-block; }

/* lỗi nội dung (dòng Excel viết sai) — hiện ngay tại chỗ, kèm sheet + dòng */
.fl-error { margin:8px 0; padding:8px 12px; border:1.5px solid #c0392b; border-radius:6px; background:#fdecea; color:#8e2a1f; font-size:14px; }
.fl-error ul { margin:4px 0 0; padding-left:20px; }
/* thông báo "đã cập nhật" */
#toast { position:fixed; right:16px; bottom:16px; padding:8px 14px; border-radius:8px; background:#1d2433; color:#fff; font-size:14px;
         opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:10; }
#toast.show { opacity:.92; transform:none; }
@media print { #toast { display:none; } }
@media (max-width:600px) { .home .tools input[type=search] { min-width:0; width:100%; } }

/* ================= Giao diện cho bé (assets/app/home.js): trang chủ · trang môn · trò chơi; nút "Phụ huynh" bật công cụ người lớn ================= */
body.view-home { --ink:#1d2433; --muted:#5b6475; --line:#e3e7ef; background:#fdf8ef; }
.ha-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px max(16px, calc((100% - 1080px) / 2));
          background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.ha-top .logo { font-size:20px; font-weight:700; color:#1d2433; text-decoration:none; display:flex; align-items:center; gap:6px; }
.ha-top .logo b { color:#d9622b; }
.ha-top .logo-ico { font-size:24px; }
.back-btn { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#f4f6fa; border:1px solid var(--line); text-decoration:none; font-size:18px; }
.ha-top .grades { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto; }
.ha-top .glabel { font-size:13px; color:var(--muted); margin-right:4px; }
.gpill { font:inherit; font-size:13px; font-weight:600; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.gpill[aria-pressed="true"] { background:#2f6fde; border-color:#2f6fde; color:#fff; }
.gpill:disabled { opacity:.35; cursor:default; }
.ha-top .toplink { font-size:14px; color:#2f6fde; text-decoration:none; font-weight:600; }
.star-total { margin-left:auto; font-size:17px; font-weight:800; color:#b26a00; background:#fff4d6; border:2px solid #ffd56b; border-radius:999px; padding:2px 12px; }
.parent-btn { font:inherit; font-size:13px; font-weight:600; color:var(--muted); background:#f4f6fa; border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; }
.parent-btn[aria-pressed="true"] { color:#fff; background:#5b6475; border-color:#5b6475; }
.parent-btn { white-space:nowrap; }
@media (max-width:600px) {   /* điện thoại: nút Phụ huynh chỉ còn biểu tượng, thanh trên gọn một dòng */
  .parent-btn .pb-txt { display:none; }
  .parent-btn { font-size:18px; padding:3px 9px; }
  .ha-top { gap:8px; }
  .ha-top .logo { font-size:17px; gap:4px; }
  .ha-top .logo-ico { font-size:20px; }
  .star-total { font-size:15px; padding:2px 9px; }
}
.home2 { max-width:1080px; margin:0 auto; padding:18px 16px 48px; color:var(--ink); }

/* ---------- trang chủ ---------- */
.hero2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; background:linear-gradient(135deg, #fff1d6, #e3f1ff);
         border-radius:28px; padding:20px 26px; box-shadow:0 6px 24px rgba(47,111,222,.08); }
.hero2 .hello { margin:0; font-size:19px; color:#d9622b; font-weight:800; }
.hero2 h1 { margin:4px 0 14px; font-size:32px; line-height:1.15; color:#1d2433; }
.hero-hint { margin:0; font-size:17px; color:var(--muted); font-weight:600; }
.hero-btn { display:inline-block; background:#ff7043; color:#fff; font-size:17px; font-weight:800; text-decoration:none; padding:11px 22px; border-radius:999px;
            box-shadow:0 5px 0 #d84315; transition:transform .1s; }
.hero-btn:hover { transform:translateY(-2px); }
.hero-img { width:100%; max-height:220px; object-fit:contain; border-radius:20px; }
.hub-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:20px; }
.htile { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 16px 22px; border-radius:28px;
         text-decoration:none; color:var(--ink); background:var(--acc-soft); border:3px solid transparent; box-shadow:0 6px 0 color-mix(in srgb, var(--acc) 35%, white);
         transition:transform .12s, border-color .12s; }
.htile:hover { transform:translateY(-4px); border-color:var(--acc); }
.htile .ht-ico { font-size:58px; line-height:1; }
.htile b { font-size:24px; font-weight:800; color:var(--acc); }
.htile .ht-sub { font-size:14px; color:var(--muted); font-weight:600; }

/* ---------- trang một môn / trò chơi: băng tiêu đề trang trí theo môn ---------- */
.sbanner { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:18px 24px; border-radius:26px; color:#fff;
           background:var(--acc); box-shadow:0 6px 18px color-mix(in srgb, var(--acc) 30%, transparent); }
.sbanner .sb-ico { position:relative; font-size:46px; line-height:1; background:rgba(255,255,255,.25); border-radius:20px; padding:8px 10px; }
.sbanner h1 { position:relative; margin:0; font-size:28px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.sbanner p { position:relative; margin:2px 0 0; font-size:16px; opacity:.92; }
.sbanner .sb-stars { position:relative; margin-left:auto; font-size:18px; font-weight:800; background:rgba(255,255,255,.95); color:#b26a00; border-radius:999px; padding:4px 14px; white-space:nowrap; }
.sb-deco span { position:absolute; font-size:34px; opacity:.28; }
.sb-deco .d0 { right:14%; top:6px; transform:rotate(-12deg); } .sb-deco .d1 { right:26%; bottom:2px; font-size:28px; } .sb-deco .d2 { right:40%; top:2px; font-size:26px; transform:rotate(14deg); }
.sb-deco .d3 { right:52%; bottom:4px; } .sb-deco .d4 { right:64%; top:8px; font-size:24px; } .sb-deco .d5 { right:5%; bottom:-6px; font-size:40px; }
/* chọn lớp (chế độ của bé, trang môn): nút trong băng tiêu đề + bảng nút tròn ngay dưới băng */
.sbanner .sb-grade { position:relative; margin-left:auto; font:inherit; font-size:16px; font-weight:800; color:#fff; cursor:pointer; white-space:nowrap;
                     background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.7); border-radius:999px; padding:5px 14px; }
.sbanner .sb-grade b { font-size:19px; }
.sbanner .sb-grade:hover, .sbanner .sb-grade[aria-expanded="true"] { background:rgba(255,255,255,.35); }
.sbanner .sb-grade + .sb-stars { margin-left:0; }
.grade-panel { margin-top:12px; padding:16px 18px; border-radius:22px; background:#fff; border:2px solid var(--acc-soft, #e8f0fd); text-align:center; }
.grade-panel > b { display:block; font-size:18px; color:var(--acc); margin-bottom:12px; }
.grade-panel p { margin:12px 0 0; font-size:13px; color:var(--muted); }
.gchips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.gchip { position:relative; width:52px; height:52px; border-radius:50%; font:inherit; font-size:22px; font-weight:800; cursor:pointer;
         border:2.5px solid var(--acc); background:#fff; color:var(--acc); box-shadow:0 4px 0 color-mix(in srgb, var(--acc) 30%, white); }
.gchip.on { background:var(--acc); color:#fff; }
.gchip:disabled { cursor:default; border-color:#d3d8e0; color:#b7bfcc; background:#f6f7f9; box-shadow:0 4px 0 #e3e7ee; }
.gchip i { position:absolute; right:-6px; bottom:-4px; font-size:15px; font-style:normal; }
.theme-toan .sbanner { background:linear-gradient(120deg, #2f6fde, #4fa3f7); }
.theme-tv .sbanner { background:linear-gradient(120deg, #e0612b, #f6a04d); }
.theme-game .sbanner { background:linear-gradient(120deg, #8e44ad, #c56cf0); }
/* nền trang theo môn: hoa văn chữ số (Toán), chữ cái (Tiếng Việt), hình ghép (trò chơi) */
body.view-home:has(main.theme-toan) { background:#eef5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg font-family='Arial' font-size='22' font-weight='700' fill='%232f6fde' fill-opacity='.07'%3E%3Ctext x='12' y='34'%3E1%3C/text%3E%3Ctext x='92' y='52'%3E%2B%3C/text%3E%3Ctext x='48' y='96'%3E5%3C/text%3E%3Ctext x='122' y='118'%3E%3D%3C/text%3E%3Ctext x='20' y='146'%3E8%3C/text%3E%3Ctext x='92' y='150'%3E3%3C/text%3E%3C/g%3E%3C/svg%3E"); }
body.view-home:has(main.theme-tv) { background:#fff5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg font-family='Georgia' font-size='24' font-weight='700' fill='%23d9622b' fill-opacity='.08'%3E%3Ctext x='12' y='34'%3EA%3C/text%3E%3Ctext x='92' y='52'%3E%C4%83%3C/text%3E%3Ctext x='48' y='96'%3EB%3C/text%3E%3Ctext x='122' y='118'%3E%C3%AA%3C/text%3E%3Ctext x='20' y='146'%3Ec%3C/text%3E%3Ctext x='92' y='150'%3E%C6%A1%3C/text%3E%3C/g%3E%3C/svg%3E"); }
body.view-home:has(main.theme-game) { background:#f7efff; }

/* nhóm, bộ lọc */
.browser { margin-top:16px; background:#fff; border-radius:24px; padding:16px 18px 20px; border:1px solid var(--line); }
.gtabs { display:flex; gap:8px; flex-wrap:wrap; }
.gtab { font:inherit; font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:16px; border:2px solid transparent;
        background:#f4f6fa; color:var(--ink); cursor:pointer; }
.gtab .gt-ico { font-size:20px; line-height:1; }
.gtab[aria-selected="true"] { border-color:var(--acc); background:var(--acc-soft); color:var(--acc); }
.gdesc { color:var(--muted); margin:10px 2px 4px; font-size:14px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 2px; }
.chip { font:inherit; font-size:14px; font-weight:600; padding:5px 12px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.chip em { font-style:normal; color:var(--muted); font-size:12px; font-weight:600; }
.chip[aria-pressed="true"] { border-color:var(--acc); background:var(--acc); color:#fff; }
.chip[aria-pressed="true"] em { color:#fff; }
.ptools { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin:10px 0 0; padding:8px; border-radius:12px; background:#f4f6fa; }
.ptools select, .ptools input { font:inherit; font-size:14px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.ptools input { flex:1 1 220px; min-width:0; }
.btn-print-all { white-space:nowrap; text-decoration:none; font-size:14px; font-weight:700; padding:6px 12px; border-radius:10px; background:#fff; color:var(--acc); border:1.5px solid var(--acc); }
.btn-print-all:hover { background:var(--acc-soft); }

.stars-mini { font-size:16px; letter-spacing:1px; color:#ffb400; }
.stars-mini i { font-style:normal; color:#d9dee8; }
/* chế độ phụ huynh: danh sách đề (chỉ xem / in) */
.plbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 8px; font-size:14px; }
.pl-all { display:flex; align-items:center; gap:6px; font-weight:700; cursor:pointer; }
.pl-count { color:var(--muted); }
.pl-clear { font:inherit; font-size:13px; padding:5px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.plist { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.plrow { display:grid; grid-template-columns:28px 34px minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:9px 12px; background:#fff; border-top:1px solid var(--line); }
.plrow:first-child { border-top:0; }
.plrow:hover { background:#f8fafd; }
.plrow.on { background:var(--acc-soft); }
.pl-chk { display:grid; place-items:center; cursor:pointer; }
.pl-chk input, .pl-all input { width:17px; height:17px; accent-color:var(--acc); cursor:pointer; }
.pl-no { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--acc); background:var(--acc-soft); }
.pl-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-title { font-weight:700; color:var(--ink); text-decoration:none; line-height:1.3; }
.pl-title:hover { color:var(--acc); text-decoration:underline; }
.pl-meta { font-size:12.5px; color:var(--muted); }
.pl-meta code { font-size:12px; background:#f1f3f6; border-radius:5px; padding:0 4px; }
.pl-res { font-size:13px; color:var(--muted); white-space:nowrap; }
.pl-res.done { color:#2e7d32; font-weight:700; }
.pl-res.done .stars-mini { font-size:13px; }
.pl-res.doing { color:#e8590c; font-weight:700; }
.pl-act { display:flex; gap:6px; }
.pl-btn { white-space:nowrap; text-decoration:none; font-size:13px; font-weight:700; padding:6px 11px; border-radius:10px; border:1.5px solid var(--line); background:#fff; color:var(--ink); }
.pl-btn:hover { border-color:var(--acc); color:var(--acc); }
.pl-btn.pr { border-color:var(--acc); color:var(--acc); }
.pl-btn.pr:hover { background:var(--acc); color:#fff; }
@media (max-width:640px) {
  .plrow { grid-template-columns:24px 30px minmax(0, 1fr); row-gap:6px; }
  .pl-res { grid-column:3; white-space:normal; }
  .pl-act { grid-column:3; }
}

/* màn chờ trước khi làm bài (app.js startScreen): bấm Bắt đầu thì mới hiện đề và tính giờ */
.start-screen { display:grid; place-items:center; min-height:calc(100vh - 120px); padding:24px 16px 48px; }
.ss-card { width:min(100%, 440px); text-align:center; background:#fff; border-radius:28px; padding:28px 26px 24px; box-shadow:0 14px 40px rgba(30, 50, 90, .12); }
.ss-ico { font-size:56px; line-height:1; }
.ss-kicker { margin:10px 0 0; font-size:14px; font-weight:700; color:#5b6475; }
.ss-card h1 { margin:4px 0 2px; font-size:34px; color:#2f6fde; }
.ss-name { margin:0; font-size:17px; font-weight:700; color:#1d2433; }
.ss-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.ss-chips span { font-size:14px; font-weight:700; background:#eef4ff; color:#1d2433; border-radius:999px; padding:5px 12px; }
.ss-note { margin:14px 0 18px; font-size:15px; color:#5b6475; line-height:1.5; }
.ss-go { font:inherit; font-size:22px; font-weight:800; color:#fff; background:#ff7043; border:0; border-radius:999px; padding:13px 40px; cursor:pointer;
         box-shadow:0 6px 0 #d84315; transition:transform .1s; }
.ss-go:hover { transform:translateY(-2px); }
.ss-go:active { transform:translateY(3px); box-shadow:0 3px 0 #d84315; }
.ss-back { display:block; margin-top:16px; font-size:14px; font-weight:700; color:#5b6475; text-decoration:none; }
.ss-back:hover { color:#2f6fde; }

/* trò chơi */
.ggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.gcard { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:20px 12px 16px; border-radius:22px; background:var(--acc-soft); text-align:center; }
.gcard .gc-ico { font-size:44px; line-height:1.1; }
.gcard b { font-size:17px; color:var(--acc); }
.gcard .gc-desc { font-size:13px; color:var(--muted); }
.gcard.soon { filter:saturate(.75); }
a.gcard { text-decoration:none; transition:transform .12s, box-shadow .12s; box-shadow:0 5px 0 color-mix(in srgb, var(--acc) 30%, white); }
a.gcard:hover { transform:translateY(-3px); }
.gcard .gc-desc { margin-bottom:8px; }
/* margin-top:auto: nút Chơi luôn ở đáy thẻ — các thẻ cùng hàng thẳng nút dù mô tả dài ngắn khác nhau */
.gcard .gc-play { margin-top:auto; font-size:14px; font-weight:800; color:#fff; background:var(--acc); border-radius:999px; padding:5px 16px; }
/* trò chơi chạy trong iframe (games/<id>/index.html): khung trắng ở đây, iframe tự cao theo nội dung trò báo về */
.game-frame-box { padding:0; overflow:hidden; }
.game-frame { display:block; width:100%; min-height:420px; border:0; background:transparent; }
/* điện thoại: màn chơi gần như toàn màn hình — bỏ thanh trên cùng, băng tiêu đề chỉ còn một dòng mỏng (← biểu tượng tên trò) */
@media (max-width:600px) {
  .ha-top.on-game { display:none; }
  .home2.game-page { padding:8px 8px 16px; }
  .game-page .sbanner.small { padding:6px 10px; gap:10px; border-radius:16px; }
  .game-page .sbanner.small .sb-back { width:32px; height:32px; }
  .game-page .sbanner.small .sb-ico { font-size:22px; padding:3px 5px; border-radius:10px; }
  .game-page .sbanner.small h1 { font-size:18px; }
  .game-page .sbanner.small p, .game-page .sbanner .sb-deco { display:none; }
  .game-page .game-frame-box { margin-top:8px; border-radius:18px; }
  .game-page .game-frame { min-height:300px; }
}
.gcard .gc-soon { position:absolute; top:10px; right:10px; font-size:11px; font-weight:800; color:#fff; background:#b08bd0; border-radius:999px; padding:2px 8px; }
.gcard .gc-txt { display:flex; flex-direction:column; align-items:center; gap:4px; }
.gcard[hidden] { display:none; }
.gsearch { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:8px 14px; border:2px solid var(--acc-soft); border-radius:999px; background:#fff; }
.gsearch:focus-within { border-color:var(--acc); }
.gsearch input { flex:1; min-width:0; font:inherit; font-size:16px; border:0; outline:0; background:transparent; }
.gnone { text-align:center; color:var(--muted); font-size:15px; margin:10px 0 4px; }
/* điện thoại: mỗi trò một hàng gọn (biểu tượng · tên + mô tả · nút ▶) — nhiều trò không phải cuộn nhiều */
@media (max-width:600px) {
  .ggrid { grid-template-columns:1fr; gap:8px; }
  .gcard { flex-direction:row; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; text-align:left; }
  a.gcard { box-shadow:0 3px 0 color-mix(in srgb, var(--acc) 30%, white); }
  .gcard .gc-ico { font-size:32px; flex:none; width:40px; text-align:center; }
  .gcard .gc-txt { flex:1; min-width:0; align-items:flex-start; gap:1px; }
  .gcard b { font-size:16px; }
  .gcard .gc-desc { margin:0; font-size:12.5px; }
  .gcard .gc-play { margin:0; flex:none; display:grid; place-items:center; width:38px; height:38px; padding:0; font-size:15px; }
  .gcard .gc-pt { display:none; }
  .gcard .gc-soon { position:static; flex:none; }
}

/* khu phụ huynh */
.ppanel { margin-top:22px; background:#fff; border-radius:22px; padding:16px 20px; border:1px solid var(--line); }
.ppanel h3 { margin:0 0 10px; font-size:18px; }
.pstats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pstats div { background:#f4f6fa; border-radius:12px; padding:8px 14px; min-width:110px; }
.pstats b { display:block; font-size:20px; color:#2f6fde; }
.pstats span { font-size:13px; color:var(--muted); }
.ppanel ul { margin:0 0 8px; padding-left:20px; font-size:14px; }
.ppanel li { margin:4px 0; }
.home2 .muted { color:var(--muted); font-size:13px; }
.home2 .empty { color:var(--muted); padding:20px; }
@media (max-width:760px) {
  .hero2 { grid-template-columns:1fr; padding:18px; }
  .hero-img { display:none; }
  .hero2 h1 { font-size:26px; }
  .hub-tiles { grid-template-columns:1fr 1fr; gap:12px; }
  .htile { padding:18px 10px 16px; }
  .htile .ht-ico { font-size:44px; }
  .htile b { font-size:19px; }
  .sbanner { padding:14px 16px; gap:12px; }
  .sbanner .sb-ico { font-size:34px; }
  .sbanner h1 { font-size:22px; }
  .sbanner p { font-size:14px; }
  .sbanner .sb-stars { font-size:15px; padding:3px 10px; }
  .sbanner { flex-wrap:wrap; }
  .sbanner .sb-grade { font-size:14px; padding:4px 11px; }
  .gchip { width:44px; height:44px; font-size:19px; }
  .gchips { gap:8px; }
  .sb-deco { display:none; }
  .gtabs { flex-wrap:nowrap; gap:6px; }
  .gtab { flex:1 1 0; justify-content:center; flex-direction:column; gap:2px; font-size:13px; padding:7px 4px; text-align:center; }
  .browser { padding:12px; }
  .ha-top .grades { margin-left:0; flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:2px; }
  .gpill { flex:none; }
  .ptools input { min-width:0; flex:1 1 100%; order:-1; }
}

/* ---------- lời chào trang chủ (hero3) + bạn Cú Mèo (assets/img/hero-owl.svg) ---------- */
.hero3 { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:8px; padding:26px 30px 10px;
         border-radius:32px; background:radial-gradient(circle at 85% 15%, #fff8d6 0 60px, transparent 61px), linear-gradient(160deg, #cfeaff 0%, #e8f6ff 45%, #fff3dc 100%);
         box-shadow:0 8px 28px rgba(47,111,222,.12); border:3px solid #fff; }
.hero3::before, .hero3::after { content:""; position:absolute; border-radius:999px; background:rgba(255,255,255,.75); }
.hero3::before { width:150px; height:40px; left:-30px; bottom:24px; box-shadow:60px -18px 0 -6px rgba(255,255,255,.75); }
.hero3::after { width:110px; height:30px; left:42%; top:16px; box-shadow:40px -12px 0 -4px rgba(255,255,255,.7); }
.h3-txt { position:relative; z-index:1; padding-bottom:16px; }
.hero3 .hello { margin:0; display:inline-block; font-size:17px; font-weight:800; color:#d9622b; background:#fff; border-radius:999px; padding:4px 14px; box-shadow:0 3px 0 #ffd8b8; }
.hero3 h1 { margin:12px 0 12px; font-size:38px; line-height:1.12; color:#1d3b74; letter-spacing:-.5px; }
.h3-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.h3-badge { font-size:14px; font-weight:700; color:#33507a; background:rgba(255,255,255,.85); border-radius:999px; padding:4px 12px; }
.h3-badge.star { color:#b26a00; background:#fff4d6; }
.h3-art { position:relative; z-index:1; align-self:end; }
.h3-art img { display:block; width:100%; height:auto; max-height:300px; }
.h3-bubble { position:absolute; left:4%; top:6%; z-index:2; white-space:nowrap; font-size:15px; font-weight:800; color:#5b3a1e; background:#fff; border-radius:18px; padding:8px 14px;
             box-shadow:0 4px 12px rgba(0,0,0,.08); animation:bubble 3.2s ease-in-out infinite; }
.h3-bubble::after { content:""; position:absolute; right:22px; bottom:-10px; border:10px solid transparent; border-top-color:#fff; border-bottom:0; }
@keyframes bubble { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .h3-bubble { animation:none; } }
@media (max-width:760px) {
  .hero3 { grid-template-columns:1fr; padding:18px 18px 0; text-align:center; }
  .hero3 h1 { font-size:28px; }
  .h3-badges { justify-content:center; }
  .h3-txt { padding-bottom:4px; }
  .h3-art img { max-height:210px; margin:0 auto; }
  .h3-bubble { left:50%; top:-4px; transform:translateX(-50%); animation:none; font-size:13px; white-space:nowrap; padding:5px 12px; }
  .h3-art { padding-top:30px; }
  .hero3 { background:radial-gradient(circle at 96% 4%, #fff8d6 0 34px, transparent 35px), linear-gradient(160deg, #cfeaff 0%, #e8f6ff 45%, #fff3dc 100%); }
}

/* ---------- trang môn: ô "bộ đề" theo nhóm (giống trang trò chơi) ---------- */
.set-group { margin-top:22px; }
.set-group h2 { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0 4px; font-size:19px; font-weight:800; color:var(--ink); background:none; }
.set-group h2 span { font-size:24px; }
.set-group .gdesc { margin:-4px 4px 10px; }
.set-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:14px; }
.set-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 12px 14px; border-radius:22px; text-align:center;
            text-decoration:none; color:var(--ink); background:#fff; border:2px solid var(--tc-soft); box-shadow:0 5px 0 var(--tc-soft);
            transition:transform .12s, border-color .12s, box-shadow .12s; }
.set-tile:hover { transform:translateY(-3px); border-color:var(--tc); box-shadow:0 7px 0 var(--tc-soft); }
.set-tile .st-ico { font-size:40px; line-height:1.1; width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:var(--tc-soft); }
.set-tile b { font-size:16px; color:var(--tc); line-height:1.25; }
.set-tile .st-n { font-size:12px; color:var(--muted); font-weight:600; }
.set-tile .st-bar { width:80%; height:7px; margin-top:4px; border-radius:999px; background:#eef1f6; overflow:hidden; }
.set-tile .st-bar i { display:block; height:100%; background:var(--tc); border-radius:999px; }
.set-tile .st-done { position:absolute; top:8px; right:10px; font-size:20px; }
.browser.slim { padding:10px 14px; }
.browser.slim .ptools { margin:0; }
/* trang một bộ đề: băng tiêu đề nhỏ có nút quay lại môn */
.sbanner.small { padding:12px 18px; }
.sbanner.small .sb-ico { font-size:32px; padding:6px 8px; border-radius:16px; }
.sbanner.small h1 { font-size:23px; }
.sbanner.small p { font-size:14px; }
.sb-back { position:relative; display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; background:rgba(255,255,255,.9);
           color:var(--acc); font-size:22px; font-weight:800; text-decoration:none; }
.sb-back:hover { background:#fff; }
.sb-back svg { display:block; }
.pager { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:16px; }
.pager button { font:inherit; font-size:14px; font-weight:700; min-width:36px; height:36px; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.pager button[aria-pressed="true"] { background:var(--acc); border-color:var(--acc); color:#fff; }
.pager .pg-gap { align-self:center; color:var(--muted); font-weight:700; padding:0 2px; }
.pager .pg-info { align-self:center; margin-left:8px; font-size:13px; color:var(--muted); }
@media (max-width:760px) {
  .set-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .set-tile { padding:14px 8px 12px; }
  .set-tile .st-ico { font-size:32px; width:52px; height:52px; }
  .set-tile b { font-size:14px; }
}

/* ---------- "Con đường phiêu lưu" trong một bộ đề (giao diện của bé) ---------- */
.path-box { padding:10px 8px 24px; overflow:hidden; }
.path-wrap { display:flex; justify-content:center; }
.path { position:relative; }
.path-line { position:absolute; left:0; top:0; overflow:visible; }
.path-line path { fill:none; stroke-linecap:round; }
.path-line .pl-all { stroke:#dfe5ee; stroke-width:14; stroke-dasharray:2 22; }
.path-line .pl-done { stroke:var(--acc); stroke-width:10; opacity:.55; }
.pnode { position:absolute; width:68px; height:68px; border-radius:50%; display:grid; place-items:center; text-decoration:none; z-index:2;
         background:#fff; border:4px solid var(--acc); color:var(--acc); box-shadow:0 6px 0 color-mix(in srgb, var(--acc) 40%, white); transition:transform .12s; }
a.pnode:hover { transform:translateY(-3px) scale(1.04); }
.pn-no { font-size:24px; font-weight:800; }
.pnode.done { background:var(--acc); color:#fff; box-shadow:0 6px 0 color-mix(in srgb, var(--acc) 60%, black); }
.pnode.doing { background:#ff7043; border-color:#ff7043; color:#fff; box-shadow:0 6px 0 #d84315; }
.pnode.next { animation:pglow 1.6s ease-in-out infinite; }
@keyframes pglow { 0%,100% { box-shadow:0 6px 0 color-mix(in srgb, var(--acc) 40%, white), 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
                   50% { box-shadow:0 6px 0 color-mix(in srgb, var(--acc) 40%, white), 0 0 0 14px color-mix(in srgb, var(--acc) 0%, transparent); } }
.pnode.locked { background:#f1f3f6; border-color:#d3d8e0; color:#a3abb8; box-shadow:0 6px 0 #dfe3ea; cursor:not-allowed; }
.pnode.locked .pn-no { font-size:22px; }
.pn-stars { position:absolute; top:62px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.pn-stars .stars-mini { font-size:15px; letter-spacing:0; background:#fff; border-radius:999px; padding:0 5px; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.pn-title { position:absolute; top:50%; transform:translateY(-50%); width:150px; font-size:13px; font-weight:700; line-height:1.25; color:var(--ink); text-align:left; }
.pn-title.right { left:80px; }
.pn-title.left { right:80px; text-align:right; }
.pn-owl { position:absolute; z-index:3; font-size:34px; line-height:1; animation:bob 2.4s ease-in-out infinite; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.pn-say { position:absolute; z-index:3; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:800; line-height:1.4; pointer-events:none;
          color:#fff; background:var(--acc); border-radius:10px; padding:2px 9px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.pn-say::after { content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--acc); border-bottom:0; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.pseg { position:absolute; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; font-size:15px; font-weight:800; color:#fff; background:var(--acc);
        border-radius:12px; padding:5px 16px; box-shadow:0 3px 0 color-mix(in srgb, var(--acc) 60%, black); }
.pseg.locked { background:#b7bfcc; box-shadow:0 3px 0 #9aa3b2; }
.pdeco { position:absolute; font-size:30px; opacity:.55; z-index:1; }
.ptrophy { position:absolute; font-size:52px; line-height:1; filter:grayscale(.85) opacity(.5); z-index:2; }
.ptrophy.won { filter:none; animation:bob 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pnode.next, .pn-owl, .ptrophy.won { animation:none; } }
@media (max-width:420px) { .pn-title { width:96px; font-size:12px; } }

/* ---------- "Bộ đề" (Học kỳ, Thi nâng cao): tờ phiếu thi xếp thành dải cuộn ngang, làm lần lượt ---------- */
.deck-box { padding:16px 18px 22px; }
.deck-top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 16px; margin-bottom:16px; border-radius:18px; background:var(--acc-soft); }
.deck-info { display:flex; flex-direction:column; font-size:13px; color:var(--muted); }
.deck-info b { font-size:15px; color:var(--ink); }
.ticket { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 10px 14px; min-height:150px; text-decoration:none; color:var(--ink);
          background:#fff; border:1.5px solid #e3e7ef; border-top:6px solid var(--acc); border-radius:6px 6px 14px 14px;
          box-shadow:0 3px 0 #e8ecf3, 0 6px 14px rgba(0,0,0,.05); transform:rotate(var(--tilt, 0deg)); transition:transform .15s, box-shadow .15s; }
.ticket::after { content:""; position:absolute; right:0; bottom:0; width:22px; height:22px; border-radius:0 0 12px 0; background:linear-gradient(135deg, transparent 50%, #eef1f6 50%); }
.ticket:hover { transform:rotate(0) translateY(-4px); box-shadow:0 6px 0 #e8ecf3, 0 12px 22px rgba(0,0,0,.09); }
.tk-label { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tk-no { font-size:36px; font-weight:800; line-height:1; color:var(--acc); }
.tk-time { font-size:12px; color:var(--muted); font-weight:600; }
.tk-lines { display:flex; flex-direction:column; gap:5px; width:64%; margin:8px 0 4px; }
.tk-lines i { height:3px; border-radius:2px; background:#eef1f6; }
.tk-lines i:nth-child(2) { width:80%; }
.tk-lines i:nth-child(3) { width:55%; }
.ticket .stars-mini { font-size:15px; }
.tk-stamp { position:absolute; right:-8px; top:26px; transform:rotate(-14deg); font-size:16px; font-weight:800; color:#d6336c; border:2.5px solid #d6336c; border-radius:10px;
            padding:2px 7px; background:rgba(255,255,255,.88); font-family:"Comic Sans MS", "Segoe UI", sans-serif; }
.ticket.doing { border-top-color:#ff7043; }
.deck-types { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.deck-types button { font:inherit; font-size:14px; font-weight:700; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); padding:6px 14px; cursor:pointer; }
.deck-types button small { color:var(--muted); font-weight:600; margin-left:2px; }
.deck-types button[aria-pressed="true"] { background:var(--acc); border-color:var(--acc); color:#fff; }
.deck-types button[aria-pressed="true"] small { color:#fff; opacity:.85; }
.deck-hint { margin:4px 4px 0; font-size:13px; font-weight:600; color:var(--muted); }
/* dải đề: cuộn ngang (vuốt trên điện thoại, nút ‹ › trên máy tính); đề hiện tại tự nằm đầu tiên bên trái (placeStrip) */
.deck-strip-wrap { position:relative; }
.deck-strip { position:relative; display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
              padding:18px 8px 22px; scrollbar-width:thin; }
.deck-strip .ticket { flex:0 0 136px; }
.ds-nav { position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:40px; height:40px; display:grid; place-items:center; padding:0 0 3px;
          border-radius:50%; border:1.5px solid var(--line); background:rgba(255,255,255,.95); color:var(--acc); font-size:26px; font-weight:800; line-height:1;
          cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.ds-nav.prev { left:-12px; }
.ds-nav.next { right:-12px; }
.ds-nav:hover { border-color:var(--acc); }
@media (hover:none) { .ds-nav { display:none; } }   /* điện thoại, máy tính bảng: vuốt */
/* đề hiện tại: viền nổi + nút; đề phía sau: mờ, khoá */
.ticket.current { border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent), 0 6px 0 #e8ecf3; transform:none; }
.ticket.current.doing { border-top-color:#ff7043; }
.tk-cta { margin-top:2px; font-size:13px; font-weight:800; color:#fff; background:var(--acc); border-radius:999px; padding:3px 12px; }
.ticket.current.doing .tk-cta { background:#ff7043; }
.ticket.locked { opacity:.45; filter:grayscale(.85); cursor:not-allowed; box-shadow:none; }
.ticket.locked:hover { transform:rotate(var(--tilt, 0deg)); box-shadow:none; }
.tk-lock { font-size:22px; line-height:1; }
@media (max-width:760px) {
  .deck-strip .ticket { flex-basis:112px; }
  .deck-strip { gap:12px; }
  .ticket { min-height:112px; padding:12px 6px 10px; }
  .tk-no { font-size:28px; }
  .tk-lines { display:none; }
  .tk-stamp { font-size:13px; right:-6px; top:18px; padding:1px 5px; }
}