/* ===== PathStudy design system · "Pixel Quest" =====
   Giao diện game pixel 8-bit: GÓC VUÔNG TUYỆT ĐỐI, viền tím đậm dày, bóng đổ
   đặc (không blur), bảng màu bão hoà lấy từ bộ pixel art tham chiếu.

   FONT — ba vai trò, đừng trộn lẫn:
   - --font  Be Vietnam Pro: thân bài, giáo trình dài. Đọc lâu không mỏi.
   - --display VT323: tiêu đề, nút, nav, nhãn. Font retro terminal và là font
     cổ điển HIẾM HOI CÓ ĐỦ DẤU TIẾNG VIỆT, nên dùng được cho chữ có dấu.
     VT323 nhỏ và mảnh hơn font thường → cỡ chữ phải tăng ~1.25 lần.
   - --pixel Press Start 2P: CHỈ cho số và nhãn ASCII (A/B/C/D, %, XP).
     Font này KHÔNG có dấu tiếng Việt — đừng đưa chữ có dấu vào.

   Mọi tên class giữ nguyên để không phải sửa 40+ template. */
:root {
    --bg: #dcefff;
    --surface: #ffffff;
    --surface-2: #eef7ff;
    --surface-3: #d6e8fb;
    --ink: #2e1b5b;
    --ink-2: #5a4a86;
    --ink-3: #8a7cae;

    /* Viền pixel: luôn là màu tím đậm, không phải xám nhạt. */
    --outline: #2e1b5b;
    --border: #2e1b5b;
    --border-strong: #2e1b5b;

    /* Bóng đổ đặc, lệch xuống-phải. KHÔNG blur — blur là phá chất pixel. */
    --lift: #2e1b5b;
    --lift-ink: #c9ddf2;

    --primary: #179cff;
    --primary-600: #0d87e4;
    --primary-700: #160059;
    --primary-lip: #2e1b5b;
    --primary-edge: #2e1b5b;
    --primary-soft: #cfe8ff;
    --primary-tint: #eaf5ff;
    --on-primary: #ffffff;

    /* màu "đi tiếp" — thanh tiến độ, hoàn thành, đáp án đúng.
       Lấy tinh thần pixel nhưng hạ độ chói để nhìn thân thiện, đỡ gắt mắt. */
    --go: #3fc46a;
    --go-shade: #228a45;

    --success: #1f8a4d;
    --success-soft: #d9f5e1;
    --success-lift: #2e1b5b;
    --warn: #8a6410;
    --warn-soft: #ffeeb5;
    --warn-lift: #2e1b5b;
    --danger: #c0493a;
    --danger-soft: #ffdcd5;
    --danger-lift: #2e1b5b;

    --ring-track: #c9ddf2;

    --shadow-sm: 2px 2px 0 var(--outline);
    --shadow: 4px 4px 0 var(--outline);
    --shadow-lg: 6px 6px 0 var(--outline);

    /* Pixel = không bo góc. Giữ biến để khỏi sửa 700 dòng, chỉ set về 0. */
    --r-sm: 0px;
    --r: 0px;
    --r-lg: 0px;
    --r-xl: 0px;
    --r-pill: 0px;

    --bw: 3px; /* viền pixel dày */

    --font: "Be Vietnam Pro", system-ui, "Segoe UI", Roboto, sans-serif;
    --display: "VT323", "Be Vietnam Pro", ui-monospace, monospace;
    --pixel: "Press Start 2P", "VT323", ui-monospace, monospace;
    --serif: "Lora", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
    /* "Game night": nền tím đêm, viền vẫn là tím-đen để giữ nét pixel. */
    :root {
        --bg: #140b2e;
        --surface: #241546;
        --surface-2: #2d1b55;
        --surface-3: #3a2470;
        --ink: #f2ecff;
        --ink-2: #c3b2e8;
        --ink-3: #9183bd;

        --outline: #0b0520;
        --border: #0b0520;
        --border-strong: #0b0520;

        --lift: #0b0520;
        --lift-ink: #1a0f38;

        --primary: #46b6ff;
        --primary-600: #6cc6ff;
        --primary-700: #cfe8ff;
        --primary-lip: #0b0520;
        --primary-edge: #0b0520;
        --primary-soft: #1d3a63;
        --primary-tint: #1a2c4d;
        --on-primary: #0b0520;

        --go: #10d000;
        --go-shade: #0a8a00;

        --success: #5cf24f;
        --success-soft: #11421a;
        --success-lift: #0b0520;
        --warn: #ffe14d;
        --warn-soft: #4a3a05;
        --warn-lift: #0b0520;
        --danger: #ff8a6b;
        --danger-soft: #4d1708;
        --danger-lift: #0b0520;

        --ring-track: #3a2470;

        --shadow-sm: 2px 2px 0 var(--outline);
        --shadow: 4px 4px 0 var(--outline);
        --shadow-lg: 6px 6px 0 var(--outline);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    /* Nền ô vuông kiểu bản đồ game — để RẤT nhạt, chữ vẫn phải đọc được. */
    background-color: var(--bg);
    background-image:
        repeating-conic-gradient(rgba(46, 27, 91, .035) 0 25%, transparent 0 50%);
    background-size: 24px 24px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Ảnh pixel phải giữ cạnh răng cưa. Chỉ áp cho mascot — ép cả <img> sẽ làm
   mọi ảnh thật (ảnh chụp, logo) bị rỗ. */
.mascot { image-rendering: pixelated; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    margin: 0; line-height: 1.22; text-wrap: balance;
    font-family: var(--display); font-weight: 700; letter-spacing: .01em;
}

p { margin: 0; }

button { font-family: inherit; }

/* Mascot pixel-art: giữ cạnh răng cưa, không làm mờ */
.mascot { image-rendering: pixelated; }

/* Dùng cho số/nhãn ASCII thôi (LV, %, XP, badge) */
.pixel { font-family: var(--pixel); letter-spacing: 0; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
}

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); }

/* ===== Buttons — khối dày, bấm là lún ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--r);
    border: var(--bw) solid transparent;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
    white-space: nowrap;
}
.btn-primary {
    background: var(--primary); color: var(--on-primary);
    box-shadow: 4px 4px 0 var(--primary-lip);
}
.btn-primary:hover { background: var(--primary-600); }
.btn-ghost {
    background: var(--surface); color: var(--ink); border-color: var(--border-strong);
    box-shadow: 4px 4px 0 var(--lift);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-soft {
    background: var(--primary-soft); color: var(--primary-700);
    box-shadow: 4px 4px 0 var(--lift);
}
.btn-soft:hover { background: var(--primary-tint); }
/* CTA "đi tiếp" (làm bài / bắt đầu) — xanh lá cho cảm giác GO */
.btn-go { background: var(--go); color: #fff; box-shadow: 4px 4px 0 var(--go-shade); }
.btn-go:hover { filter: brightness(1.04); }
.btn:active { transform: translate(4px, 4px); box-shadow: none !important; }
.btn-lg { padding: 14px 24px; font-size: 17px; border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[disabled]:active { transform: none; }

/* ===== Cards ===== */
.card {
    background: var(--surface);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }
.panel { background: var(--surface-2); border: var(--bw) solid var(--border); border-radius: var(--r); }

/* ===== Pills / badges ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--ink-2);
}
.pill-done { background: var(--success-soft); color: var(--success); }
.pill-doing { background: var(--primary-soft); color: var(--primary-700); }
.pill-todo { background: var(--surface-3); color: var(--ink-3); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-sm);
    background: var(--surface); border: var(--bw) solid var(--border);
    box-shadow: 2px 2px 0 var(--lift);
    font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink-2);
}

/* ===== Icon tiles ===== */
.tile {
    width: 44px; height: 44px; border-radius: 0;
    display: grid; place-items: center; flex: none;
    background: var(--primary-soft); color: var(--primary-700);
    box-shadow: 2px 2px 0 var(--lift);
}
.tile svg { width: 22px; height: 22px; }
.tile-indigo { background: #e8ecff; color: #2e3aa1; }
.tile-rose { background: #ffe6ec; color: #c53a63; }
.tile-sky { background: #e2f1ff; color: #1f74c4; }
.tile-violet { background: #efe8ff; color: #7a4fd0; }
.tile-amber { background: #fdf0d6; color: #b9770a; }
.tile-green { background: #e2f6e9; color: #1a9257; }
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

/* ===== App shell ===== */
.shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
@supports (min-height: 100dvh) { .shell { min-height: 100dvh; } }

.sidebar {
    background: var(--surface);
    border-right: var(--bw) solid var(--border);
    padding: 20px 14px;
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 0; height: 100vh;
}
.brand {
    display: flex; align-items: center; gap: 10px; padding: 0 8px;
    font-family: var(--display); font-weight: 800; font-size: 25px;
}
.brand .logo {
    width: 36px; height: 36px; border-radius: 0; flex: none;
    background: var(--primary-soft); border: var(--bw) solid var(--primary);
    box-shadow: 3px 3px 0 var(--primary-lip);
    display: grid; place-items: center; overflow: hidden;
}
.brand .logo svg { width: 26px; height: 26px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 0;
    color: var(--ink-2); font-family: var(--display); font-weight: 700; font-size: 20px;
    position: relative;
}
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active {
    background: var(--primary-soft); color: var(--primary-700);
    box-shadow: 2px 2px 0 var(--lift);
}
.nav-badge {
    margin-left: auto; background: var(--primary); color: #fff;
    font-family: var(--pixel); font-size: 9px; padding: 4px 6px; border-radius: 0;
}
.nav-more { display: none; } /* chỉ bật ở mobile */
.lbl-sm { display: none; }   /* nhãn rút gọn, chỉ dùng cho bottom-bar */
.sidebar-foot { margin-top: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 28px; border-bottom: var(--bw) solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 {
    font-size: 25px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.topbar-brand { display: none; flex: none; }
.topbar-brand svg { width: 30px; height: 30px; }
.avatar {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    padding: 4px 12px 4px 4px; border-radius: var(--r-sm);
    border: var(--bw) solid var(--border); box-shadow: 2px 2px 0 var(--lift);
    background: var(--surface); font-family: var(--display); font-weight: 700; font-size: 18px;
}
.avatar .dot {
    width: 30px; height: 30px; border-radius: 0; background: var(--primary); color: #fff;
    display: grid; place-items: center; font-size: 14px; flex: none;
}
.content { padding: 28px; max-width: 1120px; width: 100%; margin: 0 auto; }

/* ===== Layout helpers ===== */
.row { display: flex; gap: 16px; }
.row-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.center { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grow { flex: 1; min-width: 0; }
.section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.section-head h2 { font-size: 27px; }

/* ===== Donut / ring ===== */
.ring {
    --p: 0; --size: 120px; --track: var(--ring-track); --fill: var(--primary);
    width: var(--size); height: var(--size); border-radius: 0; flex: none;
    background: conic-gradient(var(--fill) calc(var(--p) * 1%), var(--track) 0);
    display: grid; place-items: center; position: relative;
}
.ring::before { content: ""; position: absolute; inset: 12px; border-radius: 0; background: var(--surface); }
.ring .ring-label { position: relative; text-align: center; line-height: 1.1; }
.ring .ring-value { font-family: var(--display); font-size: 35px; font-weight: 800; }
.ring .ring-cap { font-size: 11px; color: var(--ink-2); }

/* ===== Bars — chia khối như thanh XP trong game ===== */
.bar {
    height: 14px; border-radius: 0; background: var(--ring-track);
    border: var(--bw) solid var(--border-strong); overflow: hidden;
}
.bar > span {
    display: block; height: 100%;
    background: repeating-linear-gradient(90deg,
        var(--primary) 0 10px,
        color-mix(in srgb, var(--primary) 82%, #000) 10px 13px);
}
.bar.green > span {
    background: repeating-linear-gradient(90deg, var(--go) 0 10px, var(--go-shade) 10px 13px);
}
.bar.warn > span {
    background: repeating-linear-gradient(90deg, var(--warn) 0 10px,
        color-mix(in srgb, var(--warn) 80%, #000) 10px 13px);
}
.metric { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; }
.metric .lab { font-family: var(--display); font-weight: 700; font-size: 18px; }
.metric .val {
    text-align: right; font-family: var(--pixel); font-size: 10px;
    font-variant-numeric: tabular-nums; color: var(--ink-2);
}

/* ===== Study path ===== */
.path { display: flex; flex-direction: column; }
.grade-header {
    align-self: flex-start;
    font-family: var(--display);
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary-700); background: var(--primary-soft);
    border: var(--bw) solid var(--primary); box-shadow: 3px 3px 0 var(--primary-lip);
    padding: 5px 14px; border-radius: var(--r-pill); margin: 22px 0 14px;
}
.grade-header:first-child { margin-top: 4px; }
.pnode { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.pnode .rail { display: flex; flex-direction: column; align-items: center; }
.pnode .marker {
    width: 42px; height: 42px; border-radius: 0; flex: none;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 20px;
    background: var(--surface); border: var(--bw) solid var(--border-strong); color: var(--ink-3);
    box-shadow: 3px 3px 0 var(--lift);
    z-index: 1;
}
.pnode .line { width: 4px; flex: 1; background: var(--border-strong); border-radius: 0; margin: 6px 0; }
.pnode:last-child .line { display: none; }
.pnode.done .marker { background: var(--go); border-color: var(--go-shade); box-shadow: 3px 3px 0 var(--go-shade); color: #fff; }
.pnode.done .line { background: var(--go); }
/* Mốc "đang học": dùng xanh brand thay vì vàng — vàng đọc như cảnh báo và
   đá nhau với .pill-warn (Premium). Xong = xanh lá, đang học = xanh dương. */
.pnode.doing .marker { background: var(--primary); border-color: var(--outline); box-shadow: 3px 3px 0 var(--outline); color: #fff; }
.pnode .body { padding-bottom: 20px; }
.module-card {
    background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r);
    padding: 15px 17px; box-shadow: 4px 4px 0 var(--lift);
}
.pnode.doing .module-card { border-color: var(--primary); box-shadow: 4px 4px 0 var(--primary-edge); }
.pnode.done .module-card { border-color: var(--success-lift); box-shadow: 4px 4px 0 var(--success-lift); }
.module-card.locked { opacity: .62; }
.sublist { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sublist li { font-size: 13px; color: var(--ink-2); position: relative; padding-left: 15px; }
.sublist li::before {
    content: ""; position: absolute; left: 2px; top: 8px;
    width: 6px; height: 6px; border-radius: 0; background: var(--ink-3);
}

/* ===== Sprite pixel trang trí =====
   .px-* chỉ quy định KÍCH THƯỚC; màu nằm trong chính sprite. */
.px-sm, .px-md, .px-lg, .px-xl, .px-badge { display: inline-flex; flex: none; line-height: 0; }
.px-sm svg { width: 22px; height: 22px; image-rendering: pixelated; }
.px-md svg { width: 32px; height: 32px; image-rendering: pixelated; }
.px-lg svg { width: 56px; height: 56px; image-rendering: pixelated; }
.px-xl svg { width: 72px; height: 72px; image-rendering: pixelated; }

/* Khung vuông cho sprite đứng đầu thẻ mục tiêu */
.px-badge {
    width: 46px; height: 46px; padding: 5px;
    background: var(--surface-2); border: var(--bw) solid var(--outline);
    box-shadow: 2px 2px 0 var(--outline);
}
.px-badge svg { width: 100%; height: 100%; image-rendering: pixelated; }

/* Dải nhân vật ở landing: nhân vật đứng trên một "mặt đất" chung, còn mây và
   sao thì bay lên trên cho có lớp. */
.px-scene { display: flex; align-items: flex-end; gap: 12px; margin-top: 22px; min-height: 74px; }
.px-scene .px-float { align-self: flex-start; }
.px-float { animation: pxFloat 3.2s ease-in-out infinite; }
@keyframes pxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ===== Mục lục lộ trình (gọn như mục lục SGK, 2 cột) =====
   Thay cho dãy thẻ to: 24 chương giờ nằm vừa 1-2 màn hình, học sinh quét mắt
   là thấy bài cần học. */
.toc {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px; align-items: start;
}
.toc-grade {
    grid-column: 1 / -1;
    margin: 18px 0 2px;
    font-family: var(--display); font-size: 17px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary-700); background: var(--primary-soft);
    border: var(--bw) solid var(--outline); box-shadow: 3px 3px 0 var(--outline);
    padding: 4px 12px; justify-self: start;
}
.toc-grade:first-child { margin-top: 2px; }

.toc-ch { padding: 6px 0 10px; min-width: 0; }

.toc-head {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--display); font-size: 21px; font-weight: 700;
    color: var(--primary-700); line-height: 1.25;
}
.toc-head:hover .toc-name { text-decoration: underline; }
.toc-head.is-off { color: var(--ink-3); }
.toc-no {
    flex: none; font-family: var(--pixel); font-size: 10px;
    color: var(--ink-3); padding-top: 2px;
}
.toc-name { min-width: 0; }
.toc-flag { flex: none; display: inline-flex; align-items: center; }
.toc-flag svg { width: 16px; height: 16px; }
.toc-flag.pct { font-family: var(--pixel); font-size: 9px; color: var(--primary); }

.toc-ch.done .toc-head { color: var(--success); }
.toc-ch.doing .toc-head { color: var(--primary); }
.toc-ch.doing { background: var(--primary-tint); box-shadow: -10px 0 0 var(--primary-tint), 10px 0 0 var(--primary-tint); }

.toc-sub { list-style: none; margin: 3px 0 0; padding: 0 0 0 26px; }
.toc-sub li { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.toc-sub li::before { content: "▪ "; color: var(--ink-3); }
.toc-sub a { color: var(--ink-2); }
.toc-sub a:hover { color: var(--primary); text-decoration: underline; }
.toc-sub .is-note { color: var(--ink-3); font-style: italic; }

/* Đề luyện của cả khối — một dòng duy nhất dưới nhãn khối */
.toc-exams {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 2px 0 6px;
}
.toc-exams-lab {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3);
}
.toc-exams a {
    display: inline-flex; align-items: center;
    padding: 3px 10px; font-size: 13px; font-weight: 600;
    color: var(--success); background: var(--success-soft);
    border: var(--bw) solid var(--outline); box-shadow: 2px 2px 0 var(--outline);
}
.toc-exams a:active { transform: translate(2px, 2px); box-shadow: none; }

@media (max-width: 760px) {
    .toc { grid-template-columns: 1fr; gap: 6px; }
    .toc-head { font-size: 19px; }
    .toc-ch.doing { box-shadow: none; padding-left: 8px; padding-right: 8px; }
}

/* ===== Chương bung ra trong lộ trình (module → phần học + đề) ===== */
.mod-detail { margin-top: 12px; border-top: var(--bw) solid var(--border); padding-top: 10px; }
.mod-detail > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--primary-700);
    padding: 6px 2px; border-radius: var(--r-sm);
}
.mod-detail > summary::-webkit-details-marker { display: none; }
.mod-detail > summary:hover { background: var(--primary-tint); }
.mod-detail > summary svg { width: 18px; height: 18px; flex: none; }
.mod-detail .mod-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.mod-detail[open] > summary { margin-bottom: 8px; }
.mod-detail-body { display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 6px; }
.mod-detail-h {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px;
}
.mod-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.mod-list li { font-size: 13.5px; color: var(--ink-2); }
.mod-exams { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-exams .chip:hover { border-color: var(--primary); color: var(--primary-700); }

/* ===== Giáo trình AI nạp sau ===== */
.plan-loading {
    display: flex; align-items: center; gap: 9px;
    margin-top: 12px; padding-top: 10px; border-top: var(--bw) solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.plan-spinner {
    width: 12px; height: 12px; flex: none;
    background: var(--primary);
    animation: planBlink .9s steps(2, start) infinite;
}
@keyframes planBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.plan-in { animation: planIn .35s ease; }
@keyframes planIn { from { opacity: .35; } to { opacity: 1; } }

/* ===== Xem lại bài làm (câu đúng/sai + lời giải của AI) ===== */
.rv-list { display: flex; flex-direction: column; gap: 10px; }
.rv-item {
    border: var(--bw) solid var(--border); border-radius: var(--r);
    background: var(--surface); box-shadow: 3px 3px 0 var(--lift); padding: 13px 15px;
}
.rv-item.rv-ok { border-color: var(--success-lift); box-shadow: 3px 3px 0 var(--success-lift); }
.rv-item.rv-bad, .rv-item.rv-skip { border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger-lift); }
.rv-head { display: flex; align-items: flex-start; gap: 10px; }
.rv-no {
    width: 26px; height: 26px; flex: none; border-radius: 0;
    background: var(--surface-3); color: var(--ink-2);
    display: grid; place-items: center; font-family: var(--pixel); font-size: 9px;
}
.rv-item.rv-ok .rv-no { background: var(--success-soft); color: var(--success); }
.rv-item.rv-bad .rv-no, .rv-item.rv-skip .rv-no { background: var(--danger-soft); color: var(--danger); }
.rv-q { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: pre-line; }
.rv-head .pill { flex: none; }
.rv-ans { margin: 10px 0 0 36px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rv-lab {
    display: inline-block; min-width: 92px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.rv-wrong { color: var(--danger); font-weight: 600; text-decoration: line-through; }
.rv-right { color: var(--success); font-weight: 700; }
.rv-ai { margin: 10px 0 0 36px; }
.rv-explain-out {
    margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm);
    background: var(--primary-tint); border: var(--bw) solid var(--primary-soft);
    font-size: 13.5px; line-height: 1.7; white-space: pre-line;
}
.rv-explain-out.rv-loading { color: var(--ink-2); font-style: italic; }
.rv-explain-out.rv-error { background: var(--danger-soft); border-color: var(--danger-lift); color: var(--danger); }
.rv-explain[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 640px) {
    .rv-ans, .rv-ai { margin-left: 0; }
    .rv-lab { min-width: 0; margin-right: 6px; }
}

/* ===== Landing: thẻ chọn mục tiêu ===== */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.goal-card {
    display: flex; flex-direction: column; gap: 9px; padding: 18px;
    background: var(--surface); border: var(--bw) solid var(--border);
    border-radius: var(--r); box-shadow: 4px 4px 0 var(--lift);
    transition: transform .08s ease, box-shadow .08s ease, border-color .12s ease;
}
.goal-card strong { font-family: var(--display); font-size: 22px; }
.goal-card:hover { border-color: var(--primary); box-shadow: 4px 4px 0 var(--primary-edge); }
.goal-card:active { transform: translate(4px, 4px); box-shadow: none; }
.goal-go {
    margin-top: auto; padding-top: 6px;
    font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--primary);
    display: inline-flex; align-items: center; gap: 6px;
}
.goal-go svg { width: 16px; height: 16px; }

/* ===== Tools grid (module support tools) ===== */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tool {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    padding: 14px; border-radius: var(--r); border: var(--bw) solid var(--border);
    background: var(--surface); color: var(--ink);
    box-shadow: 3px 3px 0 var(--lift);
    font-family: var(--display); font-weight: 700; font-size: 18px;
    transition: transform .08s ease, box-shadow .08s ease;
}
.tool:hover { border-color: var(--primary); background: var(--primary-tint); }
.tool:active { transform: translate(3px, 3px); box-shadow: none; }
.tool .tile { width: 38px; height: 38px; border-radius: 0; }

/* ===== Lesson sections ===== */
.lesson-hero {
    border-radius: var(--r-lg); padding: 24px 26px; color: #fff;
    background: var(--primary);
    border: var(--bw) solid var(--outline); box-shadow: 5px 5px 0 var(--outline);
    position: relative; overflow: hidden;
}
.lesson-hero .excerpt { font-family: var(--serif); font-size: 18px; line-height: 1.7; white-space: pre-line; font-style: italic; }
.lesson-hero .wave { position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px; opacity: .18; }
.sec {
    scroll-margin-top: 90px;
    border: var(--bw) solid var(--border); border-radius: var(--r);
    background: var(--surface); box-shadow: 4px 4px 0 var(--lift); overflow: hidden;
}
.sec-head { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: var(--bw) solid var(--border); }
.sec-head h3 { font-size: 21px; }
.sec-head .tile { width: 34px; height: 34px; border-radius: 0; }
.sec-head form { margin-left: auto; }
.sec-body { padding: 16px 18px; white-space: pre-line; color: var(--ink); }
.bm-btn {
    border: var(--bw) solid var(--border-strong); background: var(--surface); color: var(--ink-2);
    border-radius: var(--r-sm); padding: 6px 12px;
    font-family: var(--display); font-size: 17px; font-weight: 700;
    box-shadow: 3px 3px 0 var(--lift);
    cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.bm-btn:hover { border-color: var(--primary); color: var(--primary-700); }
.bm-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.bm-btn.saved { background: var(--success-soft); color: var(--success); border-color: var(--success-lift); box-shadow: 3px 3px 0 var(--success-lift); }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink-2); }
.field input, .field textarea, .field select, .textarea, .select {
    width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
    border: var(--bw) solid var(--border-strong); background: var(--surface); color: var(--ink);
    box-shadow: inset 0 2px 0 var(--lift-ink);
    font-family: inherit; font-size: 15px;
}
.field input:focus, .field textarea:focus, .field select:focus, .textarea:focus {
    outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.field .err { color: var(--danger); font-size: 13px; font-weight: 600; }

/* Input/select/textarea đứng ngoài .field (trang GV/admin) cũng theo cùng
   phong cách khối — nhưng KHÔNG ép width:100% để không phá các hàng flex. */
select,
textarea,
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=button]) {
    padding: 10px 12px; border-radius: var(--r-sm);
    border: var(--bw) solid var(--border-strong); background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 15px; max-width: 100%;
}
select:focus, textarea:focus,
input:not([type=radio]):not([type=checkbox]):not([type=file]):focus {
    outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}

/* ===== Auth / centered ===== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; }
@supports (min-height: 100dvh) { .auth-wrap { min-height: 100dvh; } }
.auth-card { width: 100%; max-width: 420px; }

/* ===== Quiz ===== */
.q-card {
    border: var(--bw) solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); padding: 18px 20px; box-shadow: 4px 4px 0 var(--lift);
}
.q-num { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--primary); letter-spacing: .04em; }
.q-text { font-weight: 600; margin: 6px 0 14px; }
.options { display: flex; flex-direction: column; gap: 9px; }
.option {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: var(--bw) solid var(--border-strong); border-radius: var(--r); cursor: pointer;
    background: var(--surface); box-shadow: 3px 3px 0 var(--lift);
    transition: transform .08s ease, box-shadow .08s ease, border-color .12s ease, background .12s ease;
}
.option:hover { border-color: var(--primary); background: var(--primary-tint); }
.option:active { transform: translate(3px, 3px); box-shadow: none; }
.option input { accent-color: var(--primary); width: 18px; height: 18px; }
.option.selected {
    border-color: var(--primary); background: var(--primary-tint);
    box-shadow: 3px 3px 0 var(--primary-edge);
}
.option .key {
    width: 28px; height: 28px; border-radius: 0; background: var(--surface-3);
    display: grid; place-items: center;
    font-family: var(--pixel); font-size: 10px; color: var(--ink-2); flex: none;
}
.option.selected .key { background: var(--primary); color: #fff; }

/* ===== Landing ===== */
.lp-nav { display: flex; align-items: center; gap: 16px; padding: 18px 28px; max-width: 1160px; margin: 0 auto; flex-wrap: wrap; }
.lp-nav .spacer { flex: 1; }
.lp-links { display: flex; gap: 22px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-2); }
.lp-links a:hover { color: var(--ink); }
.hero-wrap { max-width: 1160px; margin: 0 auto; padding: 30px 28px; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(32px, 5.2vw, 48px); letter-spacing: -.01em; }
.hero .lead { font-size: 17px; color: var(--ink-2); margin-top: 16px; max-width: 32ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.subject-tile {
    display: flex; flex-direction: column; gap: 10px; padding: 16px;
    border: var(--bw) solid var(--border); border-radius: var(--r);
    background: var(--surface); box-shadow: 4px 4px 0 var(--lift);
}
.subject-tile.soon { opacity: .7; }
.subject-tile .name { font-family: var(--display); font-weight: 800; font-size: 21px; }
.subject-tile .grade { font-size: 12px; color: var(--ink-3); }
.preview-card {
    background: var(--surface); border: var(--bw) solid var(--border-strong);
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 22px;
}

/* ===== Toast ===== */
.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    background: var(--ink); color: var(--surface); padding: 12px 20px;
    border-radius: var(--r); box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
    font-family: var(--display); font-weight: 700; font-size: 20px; z-index: 60;
    max-width: calc(100vw - 32px); text-align: center;
    animation: toastin .3s ease;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.banner {
    padding: 13px 16px; border-radius: var(--r); display: flex; gap: 12px; align-items: center;
    font-family: var(--display); font-weight: 700; flex-wrap: wrap;
    border: var(--bw) solid transparent;
}
.banner-success { background: var(--success-soft); color: var(--success); border-color: var(--success-lift); box-shadow: 3px 3px 0 var(--success-lift); }
.banner-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-lift); box-shadow: 3px 3px 0 var(--warn-lift); }
.banner-info { background: var(--primary-soft); color: var(--primary-700); border-color: var(--border-strong); box-shadow: 3px 3px 0 var(--lift); }

/* ===== Pick grid (choose subject) ===== */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.pick { position: relative; cursor: pointer; display: block; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick .pick-inner {
    display: flex; flex-direction: column; gap: 12px; padding: 17px; height: 100%;
    border: var(--bw) solid var(--border); border-radius: var(--r); background: var(--surface);
    box-shadow: 4px 4px 0 var(--lift);
    transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pick:active .pick-inner { transform: translate(4px, 4px); box-shadow: none; }
.pick:has(input:checked) .pick-inner,
.pick.is-picked .pick-inner {
    border-color: var(--primary); box-shadow: 4px 4px 0 var(--primary-edge); background: var(--primary-tint);
}
.pick.disabled { cursor: not-allowed; opacity: .6; }
.pick.disabled:active .pick-inner { transform: none; box-shadow: 4px 4px 0 var(--lift); }
.pick .check-dot {
    position: absolute; top: 13px; right: 13px; width: 24px; height: 24px; border-radius: 0;
    border: var(--bw) solid var(--border-strong); display: grid; place-items: center; color: transparent;
}
.pick:has(input:checked) .check-dot,
.pick.is-picked .check-dot { background: var(--go); border-color: var(--go-shade); color: #fff; }
.pick .check-dot svg { width: 14px; height: 14px; }

.stat-tile {
    border: var(--bw) solid var(--border); border-radius: var(--r); padding: 14px 16px;
    background: var(--surface); box-shadow: 3px 3px 0 var(--lift);
    display: flex; gap: 12px; align-items: center;
}
.stat-tile .k { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.stat-tile .v { font-family: var(--display); font-size: 22px; font-weight: 800; }

.branch { border-left: 4px solid var(--border-strong); border-radius: 0; padding-left: 16px; }
.branch.pass { border-color: var(--go); }
.branch.weak { border-color: var(--warn); }

hr.sep { border: none; border-top: var(--bw) solid var(--border); margin: 0; }

/* Câu nhận xét/động viên sau khi xem kết quả (Gen Z) */
.encourage {
    border-radius: var(--r); padding: 12px 16px; margin: 4px 0;
    font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.5;
    background: var(--primary-soft); color: var(--primary-700);
    border: var(--bw) solid var(--border-strong); box-shadow: 3px 3px 0 var(--lift);
}
.encourage:empty { display: none; } /* trống (JS chưa điền) thì ẩn hẳn */
.encourage.enc-in { animation: encourageIn .45s ease; }
.encourage--excellent, .encourage--great {
    background: var(--success-soft); color: var(--success);
    border-color: var(--success-lift); box-shadow: 3px 3px 0 var(--success-lift);
}
/* Chỉ animate transform — KHÔNG đụng opacity — để câu luôn hiện kể cả khi
   animation bị trình duyệt tạm dừng (tab ẩn). */
@keyframes encourageIn {
    from { transform: translateY(8px); }
    to   { transform: none; }
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */

/* --- Laptop nhỏ: thu sidebar, bớt padding --- */
@media (max-width: 1180px) {
    .shell { grid-template-columns: 216px 1fr; }
    .content { padding: 24px 22px; }
    .topbar { padding: 13px 22px; }
}

/* =======================================================================
   SIDEBAR THU GỌN (desktop có chuột): mặc định chỉ còn cột icon hẹp,
   trỏ chuột vào thì trượt rộng ra đè lên nội dung (không đẩy layout).
   Chỉ bật khi thiết bị THẬT SỰ có chuột — máy cảm ứng không hover được
   thì giữ nguyên sidebar đầy đủ.
   ======================================================================= */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    :root { --rail: 76px; --rail-open: 248px; }

    .shell { grid-template-columns: var(--rail) 1fr; }

    /* .sidebar là position:fixed nên KHÔNG còn chiếm ô lưới nào — phải đặt
       .main vào cột 2 thủ công, nếu không nó rơi vào cột 1 (rộng 76px). */
    .main { grid-column: 2; }

    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: var(--rail); height: auto; z-index: 30;
        overflow: hidden; white-space: nowrap;
        transition: width .18s ease, box-shadow .18s ease;
    }
    .sidebar:hover, .sidebar:focus-within {
        width: var(--rail-open);
        box-shadow: 10px 0 30px -22px rgba(29, 35, 64, .55);
    }

    /* Thu gọn: chỉ còn icon, căn giữa */
    .sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar .brand { justify-content: center; padding: 0; gap: 0; }
    .sidebar .brand > span:not(.logo) { display: none; }
    .sidebar .nav-item .lbl,
    .sidebar .nav-item .lbl-sm { display: none; }

    /* Badge co thành chấm nhỏ khi thu gọn */
    .sidebar .nav-badge {
        position: absolute; top: 4px; right: 14px; margin: 0;
        min-width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 0;
    }

    /* Mở ra: trả lại nhãn + căn trái */
    .sidebar:hover .nav-item,
    .sidebar:focus-within .nav-item { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
    .sidebar:hover .brand,
    .sidebar:focus-within .brand { justify-content: flex-start; padding: 0 8px; gap: 10px; }
    .sidebar:hover .brand > span:not(.logo),
    .sidebar:focus-within .brand > span:not(.logo) { display: inline; }
    .sidebar:hover .nav-item .lbl,
    .sidebar:focus-within .nav-item .lbl { display: inline; }
    .sidebar:hover .nav-badge,
    .sidebar:focus-within .nav-badge {
        position: static; margin-left: auto;
        min-width: 0; height: auto; padding: 4px 6px; font-size: 9px; border-radius: 0;
    }

    /* .lbl-sm chỉ dành cho bottom-bar mobile, desktop luôn dùng .lbl */
    .sidebar:hover .nav-item .lbl-sm,
    .sidebar:focus-within .nav-item .lbl-sm { display: none; }
}

/* --- Tablet/phone: sidebar -> bottom bar --- */
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        height: auto; max-height: 86vh; z-index: 40;
        flex-direction: column; gap: 0; padding: 0;
        border-right: none; border-top: var(--bw) solid var(--border-strong);
        box-shadow: 0 -4px 20px -14px rgba(29, 35, 64, .5);
    }
    .sidebar > .brand { display: none; }
    .sidebar-foot { display: none; }

    .nav {
        flex-direction: row; gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .nav-item {
        flex: 1 1 0; min-width: 0;
        flex-direction: column; gap: 4px; padding: 7px 4px;
        border-radius: 0; font-size: 11px; text-align: center;
    }
    .nav-item svg { width: 22px; height: 22px; }
    .nav-item .lbl, .nav-item .lbl-sm {
        font-size: 11px; line-height: 1.15; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* ô bottom-bar chỉ ~69px: nhãn dài đổi sang bản rút gọn cho khỏi bị cắt */
    .nav-item .lbl-long { display: none; }
    .nav-item .lbl-sm { display: block; }
    /* Mục phụ chỉ xuất hiện khi mở tấm "Thêm" */
    .nav-item:not(.np):not(.nav-more) { display: none; }
    .nav-more {
        display: flex; background: none; border: none; cursor: pointer;
        color: var(--ink-2); font-family: var(--display); font-weight: 700;
    }
    .nav-badge { position: absolute; top: 2px; right: 10px; margin: 0; }

    /* chừa chỗ cho bottom bar */
    .main { padding-bottom: 76px; }

    /* --- Tấm "Thêm" đang mở --- */
    body.nav-open .sidebar { overflow-y: auto; }
    body.nav-open .sidebar::before {
        content: ""; position: fixed; inset: 0;
        background: rgba(13, 17, 32, .5); z-index: -1;
    }
    body.nav-open .nav {
        flex-wrap: wrap; padding: 12px 10px 6px;
    }
    body.nav-open .nav-item { flex: 1 1 28%; max-width: 33.33%; }
    body.nav-open .nav-item:not(.np) { display: flex; }
    body.nav-open .sidebar-foot {
        display: block; margin-top: 0;
        padding: 4px 10px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: var(--bw) solid var(--border);
    }
    body.nav-open .sidebar-foot .nav-item { flex-direction: row; justify-content: center; max-width: none; }

    /* iOS tự phóng to trang khi focus ô nhập có font < 16px → ép đúng 16px.
       Selector phải đủ "nặng" để thắng rule input/select/textarea ở trên. */
    select, textarea,
    input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=button]),
    .field input, .field select, .field textarea, .textarea {
        font-size: 16px;
    }

    /* topbar gọn + hiện logo nhỏ */
    .topbar { padding: 11px 16px; gap: 10px; }
    .topbar-brand { display: grid; place-items: center; }
    .topbar h1 { font-size: 22px; }
    .avatar { padding: 4px; border-radius: 0; }
    .avatar .who { display: none; }

    .content { padding: 18px 16px 24px; }

    .hero { grid-template-columns: 1fr; gap: 28px; }
    .hero .lead { max-width: none; }
    .hero-wrap { padding: 20px 16px 32px; }
    .lp-nav { padding: 14px 16px; gap: 10px; }
    .lp-links { display: none; }

    .metric { grid-template-columns: 96px 1fr 46px; gap: 10px; }
    .card-pad { padding: 18px; }
    .lesson-hero { padding: 20px; }
    .sec-body, .sec-head { padding-left: 15px; padding-right: 15px; }
}

/* --- Điện thoại --- */
@media (max-width: 640px) {
    body { font-size: 15px; }
    .content { padding: 14px 13px 22px; }
    .card-pad { padding: 15px; }
    .section-head h2 { font-size: 24px; }

    /* nút/thao tác: dễ bấm bằng ngón tay, xếp dọc khi chật */
    .btn { padding: 12px 16px; }
    .btn-lg { padding: 13px 18px; font-size: 16px; }
    .hero-cta .btn, .hero-cta .btn-lg { flex: 1 1 100%; }

    .between { flex-wrap: wrap; }
    .row { flex-wrap: wrap; }

    /* Landing: brand chiếm hàng trên, 2 nút chia đôi hàng dưới — tránh cảnh
       "Đăng ký" rớt xuống một mình lệch sang trái. */
    .lp-nav { gap: 10px; }
    .lp-nav .spacer { display: none; }
    .lp-nav .brand { flex: 1 1 100%; }
    .lp-nav .btn { flex: 1 1 0; min-width: 0; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 14px; }
    .pick-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; }
    .subject-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

    .pnode { grid-template-columns: 34px 1fr; gap: 11px; }
    .pnode .marker { width: 34px; height: 34px; border-radius: 0; font-size: 13px; }
    .module-card { padding: 13px 14px; }

    .q-card { padding: 15px 15px; }
    .option { padding: 11px 12px; gap: 10px; }

    /* vùng chạm tối thiểu 44px cho nút nhỏ (ngón tay học sinh).
       Chỉ áp cho thứ BẤM ĐƯỢC — .pill/.chip là nhãn, ép cao sẽ phình layout. */
    .bm-btn, a.chip, button.chip { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    .sec-head { flex-wrap: wrap; row-gap: 8px; }
    .sec-head form { margin-left: 0; width: 100%; }
    .sec-head .bm-btn { width: 100%; justify-content: center; }

    /* metric: nhãn lên trên, thanh xuống dưới cho đỡ chật */
    .metric { grid-template-columns: 1fr auto; grid-template-areas: "lab val" "bar bar"; row-gap: 6px; }
    .metric .lab { grid-area: lab; }
    .metric .val { grid-area: val; }
    .metric > .bar { grid-area: bar; }

    .toast { left: 13px; right: 13px; transform: none; bottom: 88px; }
    @keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --- Máy nhỏ (360px trở xuống) --- */
@media (max-width: 400px) {
    .nav-item { font-size: 10px; padding: 6px 2px; }
    .nav-item .lbl { font-size: 10px; }
    .nav-item svg { width: 20px; height: 20px; }
    body.nav-open .nav-item { flex: 1 1 44%; max-width: 50%; }
    .ring { --size: 92px !important; }
    .ring .ring-value { font-size: 21px; }
}

/* --- Ngang trên điện thoại: bottom bar thấp lại --- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
    .nav-item { flex-direction: row; gap: 7px; padding: 6px 8px; }
    .nav-item .lbl { font-size: 11px; }
    .main { padding-bottom: 58px; }
}

/* --- Tôn trọng cài đặt giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .btn:active, .option:active, .tool:active, .bm-btn:active, .pick:active .pick-inner { transform: none; }
}

/* --- In ấn (học sinh in giáo trình) --- */
@media print {
    .sidebar, .topbar, .toast, .bm-btn { display: none !important; }
    .shell { display: block; }
    .main { padding: 0; }
    .content { max-width: none; padding: 0; }
    .card, .sec, .module-card, .q-card { box-shadow: none; border-color: #ccc; }
}