/* StudyWithMsPhuong — học tiếng Anh cho học sinh Việt Nam.
 *
 * Nguyên tắc:
 *   1. Chỉ một vật được nâng khỏi mặt giấy: thẻ từ vựng lật được. Mọi thành
 *      phần khác nằm phẳng, phân tách bằng kẻ mảnh chứ không bằng bóng đổ.
 *   2. Cặp từ (tiếng Anh ↔ nghĩa tiếng Việt) là khối lặp lại xuyên suốt.
 *   3. Bài học được đánh số vì chúng thật sự là một chuỗi có thứ tự.
 *   4. Phía học sinh rộng rãi; phía giáo viên yên tĩnh và dày thông tin.
 *
 * Màu chữ đã kiểm tương phản WCAG ở điểm xấu nhất của từng gradient: chữ
 * >= 4.5:1, viền nhập liệu và chữ lớn >= 3:1. Đo lại bằng
 * `python3 design/contrast-check.py` sau mỗi lần đổi màu.
 */

:root {
    --paper:      #ffffff;
    --paper-2:    #fff5f7;
    --surface:    #ffffff;
    --ink:        #2b1b2a;
    --ink-2:      #5a4657;
    --ink-muted:  #7a6374;
    --rule:       #f3d7df;
    --rule-2:     #efbfd1;
    --field:      #c47f97;

    --brand:        #d94f8f;
    --brand-deep:   #b93d73;
    --brand-tint:   #fff1f5;
    --brand-tint-2: #f9dfe9;
    --brand-pale:   #f7b1c9;

    /* Hồng đậm nhất, dùng cho mặt sau thẻ từ vựng. */
    --brand-night:  #6d2648;

    /* Sáu gradient chuẩn. Cần gradient thì lấy ở đây, đừng viết hex mới.
       Luật: tối đa 3 màu, các màu cách nhau không quá ~60 độ trên vòng màu,
       135deg cho thẻ và nút, 90deg cho gạch ngang, radial chỉ cho nền trang. */
    --grad-page:
        radial-gradient(circle at top left, rgba(255, 191, 214, 0.68), transparent 24%),
        radial-gradient(circle at right center, rgba(244, 214, 255, 0.52), transparent 20%),
        linear-gradient(180deg, #fffafc 0%, #fff4f7 42%, #ffffff 100%);
    --grad-action:      linear-gradient(135deg, #db2777 0%, #c026d3 52%, #e11d48 100%);
    --grad-hero:        linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 38%, #f5d0fe 100%);
    --grad-hero-button: linear-gradient(135deg, #f9a8d4 0% 18%, #f5d0fe 48%, #fbcfe8 100%);
    --grad-accent-bar:  linear-gradient(90deg, #f472b6 0%, #ec4899 100%);
    --grad-card-back:   linear-gradient(155deg, var(--brand-deep), var(--brand-night));

    /* Bảng điều khiển bên trái: nền hồng nhạt, chữ mực đậm. */
    --sb-bg:     #fceaf0;
    --sb-line:   #f4d7e4;
    --sb-text:   #2b1b2a;
    --sb-muted:  #5a4657;

    --good: #16a34a;  --good-ink: #1a7f37;  --good-bg: #eaf7ee;
    --warn: #f59e0b;  --warn-ink: #8a5300;  --warn-bg: #fdf5e7;
    --crit: #dc2626;  --crit-ink: #b3261e;  --crit-bg: #fdeeed;

    --shadow-sm: 0 1px 2px rgba(8, 57, 79, 0.06), 0 1px 3px rgba(8, 57, 79, 0.05);
    --shadow:    0 1px 3px rgba(8, 57, 79, 0.07), 0 6px 16px -6px rgba(8, 57, 79, 0.14);
    --shadow-lg: 0 2px 4px rgba(8, 57, 79, 0.08), 0 14px 32px -10px rgba(8, 57, 79, 0.22);

    --r-sm:   6px;
    --r:      8px;
    --r-card: 16px;
    --pill:   999px;

    --sidebar-w: 236px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--grad-page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.45;
    pointer-events: none;
}

body::before {
    left: -100px;
    top: 100px;
    background: rgba(255, 184, 206, 0.48);
}

body::after {
    right: -80px;
    bottom: 80px;
    background: rgba(245, 203, 255, 0.38);
}

a { color: var(--brand-deep); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

/* ---------- Khung ---------- */

.app {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
}

.app-main {
    background: #ffffff;
}

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 1px 0 0 var(--rule), 4px 0 16px -8px rgba(8, 57, 79, 0.18);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sb-line);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.brand-name { font-weight: 600; font-size: 1.05rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; }

.nav-group { margin: 16px 10px 6px; font-size: 0.8rem; font-weight: 400; color: var(--sb-muted); }
.nav-group:first-child { margin-top: 2px; }

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--r-sm);
    color: var(--sb-text);
    text-decoration: none;
    font-size: 0.94rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: var(--grad-accent-bar);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.nav-item svg {
    width: 17px; height: 17px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.8;
}

.nav-item:hover {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.nav-item:hover::after,
.nav-item.active::after {
    transform: scaleX(1);
}

.nav-item.active {
    background: var(--grad-hero);
    color: #5b1f3f;
    font-weight: 500;
}
.nav-item.active svg { opacity: 1; }

.sidebar-foot { border-top: 1px solid var(--sb-line); padding: 12px; }

.sidebar-user {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 6px; margin-bottom: 8px;
    border-radius: var(--r-sm); text-decoration: none; color: var(--sb-text);
    transition: background-color 0.2s ease;
}

.sidebar-user::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--grad-accent-bar);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.sidebar-user:hover { background: var(--brand-tint); }
.sidebar-user:hover::after { transform: scaleX(1); }

.avatar {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: none;
    border-radius: var(--pill); background: var(--brand);
    color: #fff; font-size: 0.85rem; font-weight: 600;
}

.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-text strong { font-size: 0.88rem; color: var(--ink); font-weight: 500; }
.sidebar-user-text span { font-size: 0.78rem; color: var(--sb-muted); }

.app-main { flex: 1; min-width: 0; }
.content { max-width: 940px; padding: 32px 32px 80px; }

/* ---------- Thanh trên cho khách ---------- */

.guestbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px;
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(123, 146, 164, 0.18);
    box-shadow: 0 10px 24px -24px rgba(15, 47, 61, 0.22);
}

.guestbar .brand {
    border-bottom: none;
    color: var(--ink);
    text-decoration: none;
}

.guestbar nav { display: flex; align-items: center; gap: 20px; }
.guestbar nav a { color: var(--sb-text); text-decoration: none; font-size: 0.94rem; }
.guestbar nav a:hover { color: var(--brand-deep); }
.guestbar nav a.button {
    color: #5b1f3f;
    background: var(--grad-hero);
    border: none;
    box-shadow: 0 10px 18px -12px rgba(244, 114, 182, 0.7);
}

.guest-content { margin: 0 auto; max-width: 900px; }

/* ---------- Chữ ----------
   Thang 1.25: 12.8 / 16 / 20 / 25 / 31.25px. Dòng văn bản giữ dưới 80 ký tự. */

h1 { font-size: 1.5625rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin: 36px 0 12px; }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }

p { max-width: 68ch; }

.hint { color: var(--ink-muted); font-size: 0.8rem; }
.hint code { background: var(--paper-2); border-radius: 3px; padding: 1px 5px; font-size: 0.9em; }

.back-link {
    display: inline-block; margin-bottom: 12px;
    color: var(--ink-muted); text-decoration: none; font-size: 0.85rem;
}

.back-link:hover { color: var(--brand-deep); }

/* ---------- Trang giới thiệu ----------
   Trang này chỉ giới thiệu, không kéo nội dung bài học ra ngoài. Khoảnh khắc
   chuyển động duy nhất nằm ở tiêu đề: từng chữ trượt lên khỏi mép dòng, như
   đang được viết ra. Chạy một lần khi tải trang rồi thôi. */

.intro {
    padding: 72px 0 8px;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: center;
    gap: 26px;
    padding: 32px 0 12px;
    position: relative;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: -40px 10% auto auto;
    width: 260px;
    height: 260px;
    background: rgba(255, 182, 206, 0.2);
    filter: blur(18px);
    border-radius: 50%;
    pointer-events: none;
}

.home-hero-copy {
    position: relative;
    z-index: 1;
}

.intro-title {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: clamp(2.8rem, 4.6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
    max-width: 15ch;
    margin: 14px 0 0;
    color: var(--ink);
    font-weight: 900;
}

.intro-title .word { display: inline-block; }

.intro-title .word > span {
    display: inline-block;
    animation: write 520ms cubic-bezier(0.22, 0.7, 0.25, 1) backwards;
}

.intro-title .word:nth-child(1) > span { animation-delay: 40ms; }
.intro-title .word:nth-child(2) > span { animation-delay: 110ms; }
.intro-title .word:nth-child(3) > span { animation-delay: 180ms; }
.intro-title .word:nth-child(4) > span { animation-delay: 250ms; }
.intro-title .word:nth-child(5) > span { animation-delay: 320ms; }
.intro-title .word:nth-child(6) > span { animation-delay: 390ms; }
.intro-title .word:nth-child(7) > span { animation-delay: 460ms; }
.intro-title .word:nth-child(8) > span { animation-delay: 460ms; }
.intro-title .word:nth-child(9) > span { animation-delay: 530ms; }
.intro-title .word:nth-child(10) > span { animation-delay: 600ms; }
.intro-title .word:nth-child(11) > span { animation-delay: 670ms; }

@keyframes write {
    from { opacity: 0; transform: translateY(0.28em); }
    to   { opacity: 1; transform: translateY(0); }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--pill);
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(236, 72, 153, 0.18);
    color: var(--brand-deep);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 12px 30px -20px rgba(236, 72, 153, 0.38);
}

.eyebrow-soft {
    background: rgba(255, 245, 247, 0.94);
    color: var(--brand-deep);
}

.intro-lead {
    color: var(--ink-2);
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 18px 0 0;
    max-width: 44ch;
}

.intro .lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0 0;
}

.button {
    transition: all 0.25s ease;
}

.button.primary {
    background: var(--grad-hero-button);
    border: none;
    color: #5b1f3f;
    box-shadow: 0 18px 30px -18px rgba(244, 114, 182, 0.7);
}

.button.primary:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 22px 38px -16px rgba(244, 114, 182, 0.6);
}

.button.block {
    width: 100%;
}

.button.secondary {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(244, 114, 182, 0.28);
    color: var(--ink);
}

.button.secondary:hover {
    background: rgba(255, 241, 245, 0.96);
    border-color: rgba(236, 72, 153, 0.38);
    color: var(--brand-deep);
}

.home-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 24px 0 0;
    color: var(--ink-2);
    font-size: 0.9rem;
}

.home-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--pill);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px -22px rgba(15, 47, 61, 0.4);
}

.home-trust li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.13);
    color: var(--good-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.home-panel {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 18px 0 8px;
}

.float-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 35px -22px rgba(236, 72, 153, 0.45);
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(14px);
    animation: floatBadge 4.5s ease-in-out infinite;
}

/* Ba thẻ nổi và chiếc điện thoại dưới đây là hình minh hoạ của trang giới
   thiệu, không phải thành phần giao diện, nên được miễn luật "chỉ dùng sáu
   gradient chuẩn" trong design/design-system.md. Đừng nhân bản cách viết này
   sang các trang khác. */
.badge-one {
    top: 12px;
    left: 10px;
    transform: translateX(-10px);
    background: linear-gradient(135deg, rgba(255, 241, 245, 0.94), rgba(255, 255, 255, 0.9));
}

.badge-two {
    top: 110px;
    right: 14px;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.9));
    animation-delay: 0.8s;
}

.badge-three {
    bottom: 36px;
    left: 30px;
    background: linear-gradient(135deg, rgba(243, 232, 255, 0.96), rgba(255, 255, 255, 0.9));
    animation-delay: 1.5s;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.phone-mockup {
    width: min(100%, 390px);
    background: linear-gradient(160deg, #1d2732 0%, #101c2a 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 36px;
    padding: 14px 12px 16px;
    box-shadow: 0 30px 70px -32px rgba(15, 23, 42, 0.75), inset 0 1px 0 rgba(255,255,255,0.18);
    position: relative;
    z-index: 1;
}

.phone-notch {
    width: 118px;
    height: 18px;
    background: rgba(9, 14, 20, 0.9);
    border-radius: 0 0 16px 16px;
    margin: 0 auto 12px;
}

.phone-screen {
    background: linear-gradient(180deg, #fffafc 0%, #fff4f7 100%);
    border-radius: 26px;
    padding: 16px 14px 18px;
    min-height: 420px;
    border: 1px solid rgba(25, 52, 67, 0.06);
}

.screen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.screen-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-deep);
    background: rgba(11, 110, 147, 0.09);
}

.screen-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.lesson-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 22px;
    padding: 16px 16px 18px;
    box-shadow: 0 24px 38px -30px rgba(15, 47, 61, 0.52);
}

.lesson-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lesson-tag,
.lesson-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lesson-tag {
    color: var(--brand-deep);
    background: rgba(59, 130, 246, 0.08);
    padding: 6px 10px;
}

.lesson-status {
    color: var(--good-ink);
    background: rgba(22, 163, 74, 0.12);
    padding: 5px 9px;
}

.lesson-word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.lesson-label {
    margin: 0 0 4px;
    color: var(--ink-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-word-row h3 {
    margin: 0;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: -0.06em;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--ink);
    font-weight: 800;
}

.flower-wrap {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff7ef 0%, #ffe7b5 100%);
    box-shadow: inset 0 0 0 1px rgba(218, 151, 52, 0.18);
}

.flower-petal {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #ffb5c7 0%, #f78bb6 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(236, 112, 162, 0.18);
}

.flower-petal.petal-1 { transform: translate(-50%, -80%) rotate(0deg); }
.flower-petal.petal-2 { transform: translate(-20%, -50%) rotate(90deg); }
.flower-petal.petal-3 { transform: translate(-80%, -50%) rotate(180deg); }
.flower-petal.petal-4 { transform: translate(-50%, -20%) rotate(270deg); }

.flower-core {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f6c444;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(246, 196, 68, 0.18);
}

.lesson-meaning {
    margin-top: 12px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--brand-deep);
}

.example-box {
    margin-top: 16px;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.09);
    padding: 10px 12px;
}

.example-label {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--brand-deep);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.example-box p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.84rem;
}

.mini-stack {
    position: relative;
    padding-top: 18px;
    min-height: 90px;
}

.mini-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 24px -20px rgba(15, 47, 61, 0.4);
}

.mini-card-one {
    left: 0;
    bottom: 8px;
}

.mini-card-two {
    right: 0;
    bottom: -8px;
}

.mini-label {
    color: var(--ink-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mini-card strong {
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--ink);
}

.section-heading {
    margin-top: 52px;
    margin-bottom: 18px;
}

.section-heading h2 {
    max-width: 22ch;
    margin: 12px 0 0;
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 12px;
}

.home-note {
    margin: 22px auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--ink-2);
    font-size: 0.95rem;
}

.feature-card {
    position: relative;
    padding: 22px 18px;
    border: 1px solid rgba(244, 114, 182, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 32px -28px rgba(236, 72, 153, 0.28), inset 0 1px 0 rgba(255,255,255,0.55);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(236, 72, 153, 0.32);
    box-shadow: 0 22px 40px -26px rgba(236, 72, 153, 0.28);
}

.feature-card:hover .feature-icon {
    transform: translateY(-2px) scale(1.08) rotate(-6deg);
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(251,146,60,0.14));
    font-size: 1.6rem;
    margin-bottom: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    transition: transform 0.25s ease;
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 1.12rem;
}

.feature-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.7;
}

body.modal-open {
    overflow: hidden;
}

.login-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.login-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.login-modal-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 420px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 28px;
    padding: 26px 22px 20px;
    box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.6);
}

.login-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(148, 163, 184, 0.12);
    color: var(--ink);
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.login-modal-header {
    margin-bottom: 18px;
}

.login-modal-header .eyebrow {
    padding-left: 10px;
    padding-right: 10px;
}

.login-modal-header h3 {
    margin: 12px 0 0;
    font-size: clamp(1.7rem, 2.5vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.login-modal form {
    display: grid;
    gap: 14px;
}

.login-modal label {
    display: block;
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 600;
}

.login-modal input {
    margin-top: 8px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 12px 14px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.login-modal input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.login-modal .button.primary {
    margin-top: 8px;
}

.login-modal-hint {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 860px) {
    .home-hero {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .intro-title {
        font-size: 2.3rem;
    }

    .panel-window {
        min-height: 380px;
    }

    .mini-card-one {
        left: 12px;
        bottom: 12px;
    }

    .mini-card-two {
        right: 12px;
        bottom: 12px;
    }

    .home-trust {
        gap: 8px;
    }
}
/* ---------- Cặp từ ----------
   Khối lặp lại của cả sản phẩm: từ tiếng Anh như một mẫu vật, nghĩa tiếng Việt
   như lời chú. Dùng ở danh sách từ vựng và các trang xem lại bài. */

.pair { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pair-term { font-weight: 600; letter-spacing: -0.005em; }
.pair-gloss { color: var(--ink-2); }

.pair-gloss::before {
    content: "";
    display: inline-block;
    width: 14px; height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--rule-2);
}

.pair-example {
    display: block; color: var(--ink-muted);
    font-size: 0.85rem; font-style: italic; margin-top: 2px;
}

/* ---------- Nút ---------- */

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--grad-action);
    color: #fff; border: 1px solid transparent;
    border-radius: var(--r); padding: 8px 18px;
    font: inherit; font-size: 0.92rem; font-weight: 500;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 12px 20px -16px rgba(236, 72, 153, 0.88);
}

.button:hover { filter: brightness(1.03); border-color: transparent; }
.button.secondary { background: transparent; color: var(--brand-deep); border-color: var(--rule-2); box-shadow: none; }
.button.secondary:hover { background: var(--brand-tint); border-color: var(--brand-pale); }
.button.ghost { background: var(--surface); color: var(--brand-deep); border-color: var(--rule-2); box-shadow: none; }
.button.ghost:hover { background: var(--brand-tint); border-color: var(--brand-pale); }
.button.block { width: 100%; }
.button.small { padding: 5px 12px; font-size: 0.84rem; }

.link-button {
    background: none; border: none; padding: 0;
    font: inherit; font-size: 0.85rem; color: var(--brand-deep); cursor: pointer;
}

.link-button:hover { text-decoration: underline; }
.link-button.danger { color: var(--crit-ink); }

.inline-form { display: inline; margin: 0; }

/* ---------- Biểu mẫu ---------- */

label { display: block; font-size: 0.85rem; color: var(--ink-2); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="datetime-local"], textarea, select {
    display: block; width: 100%; margin-top: 5px; padding: 8px 11px;
    border: 1px solid var(--field); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 0.94rem;
}

textarea { resize: vertical; }

input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 3px var(--brand-tint-2);
}

.form-card {
    background: #ffffff; border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 26px; max-width: 420px;
}

.content {
    background: #ffffff;
}

.form-card label, .admin-form label { margin-bottom: 16px; }

.admin-form { max-width: 460px; margin: 0 0 28px; }
.admin-form label.checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.admin-form label.checkbox input { width: auto; margin-top: 4px; }

.row-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.row-form input { margin-top: 0; width: 150px; font-size: 0.84rem; padding: 5px 9px; }

/* ---------- Thông báo ---------- */

.form-error, .form-notice {
    border-left: 3px solid; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 9px 14px; font-size: 0.88rem; margin: 0 0 16px; max-width: 68ch;
}

.form-error { background: var(--crit-bg); border-color: var(--crit); color: var(--crit-ink); }
.form-notice { background: var(--good-bg); border-color: var(--good); color: var(--good-ink); }

/* ---------- Giáo trình ----------
   Đánh số vì bài học đi theo thứ tự beginner đến advanced, không phải trang trí. */

.syllabus { list-style: none; margin: 0; padding: 0; }
.syllabus > li { border-top: 1px solid var(--rule); }
.syllabus > li:last-child { border-bottom: 1px solid var(--rule); }

.syllabus a {
    position: relative;
    display: flex; align-items: baseline; gap: 18px;
    padding: 18px 8px; text-decoration: none; color: var(--ink);
}

.syllabus a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 2px;
    border-radius: 999px;
    background: var(--grad-accent-bar);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.syllabus a:hover { background: var(--paper-2); }
.syllabus a:hover::after { transform: scaleX(1); }

.syllabus-num {
    flex: none; width: 2ch;
    font-size: 1.05rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--brand-deep);
}

.syllabus-body { flex: 1; min-width: 0; }
.syllabus-title { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.syllabus-desc { display: block; color: var(--ink-2); font-size: 0.9rem; max-width: 60ch; }
.syllabus-meta { flex: none; display: flex; align-items: center; gap: 8px; align-self: center; }

/* ---------- Lộ trình học tập ----------
   Một đường dọc nối các bước, chấm tròn đánh dấu từng bài học. */

.roadmap { list-style: none; margin: 0 0 8px; padding: 0; }

.roadmap-step {
    position: relative;
    display: flex; gap: 16px;
    padding: 16px 8px 16px 0;
}

/* đường nối giữa các chấm, trừ bước cuối */
.roadmap-step:not(:last-child)::before {
    content: "";
    position: absolute; left: 15px; top: 46px; bottom: -2px;
    width: 2px; background: var(--rule-2);
}

.roadmap-num {
    flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-tint); color: var(--brand-deep);
    font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
    border: 2px solid var(--brand-tint-2);
}

.roadmap-step.is-done .roadmap-num {
    background: var(--good-bg); color: var(--good-ink); border-color: var(--good-bg);
}

.roadmap-step.is-next .roadmap-num {
    background: var(--brand-deep); color: #fff; border-color: var(--brand-pale);
}

.roadmap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.roadmap-title {
    font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none;
    margin-right: 8px;
}

.roadmap-title:hover { color: var(--brand-deep); }

.roadmap-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.roadmap-checks li { color: var(--ink-muted); font-size: 0.88rem; }
.roadmap-checks li.done { color: var(--good-ink); }
.roadmap-checks a { color: inherit; }

/* ---------- Nhãn ---------- */

.level-badge, .done-badge, .todo-badge {
    display: inline-block; padding: 2px 11px; border-radius: var(--pill);
    font-size: 0.76rem; font-weight: 500; white-space: nowrap;
}

.level-badge { background: var(--brand-tint); color: var(--brand-deep); }
.done-badge { background: var(--good-bg); color: var(--good-ink); }
.todo-badge { background: var(--crit-bg); color: var(--crit-ink); }

.status-online { color: var(--good-ink); font-weight: 500; }
.status-offline { color: var(--ink-muted); }
.status-never { color: var(--warn-ink); }
.row-never { background: var(--warn-bg); }

/* ---------- Bảng: phẳng, dày thông tin ---------- */

.table-scroll { overflow-x: auto; margin-bottom: 24px; }

.admin-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    font-size: 0.9rem; overflow: hidden;
}

.table-scroll .admin-table { margin-bottom: 0; }

.admin-table th, .admin-table td {
    text-align: left; padding: 10px 14px;
    border-bottom: 1px solid var(--rule); vertical-align: top;
}

.admin-table th {
    background: var(--paper-2); font-size: 0.84rem;
    font-weight: 600; color: var(--ink-2); white-space: nowrap;
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--paper); }
.admin-table tbody tr.is-me { background: var(--brand-tint); }
.admin-table tbody tr.is-me:hover { background: var(--brand-tint-2); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dải chỉ số ----------
   Một tấm duy nhất chia bằng kẻ dọc, không phải bốn thẻ rời có bóng đổ. */

.stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    overflow: hidden; margin-bottom: 8px;
}

.stat-tile { padding: 16px 18px; border-left: 1px solid var(--rule); }
.stat-tile:first-child { border-left: none; }

.stat-label { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 2px; }

/* Số lớn dùng chữ số tỉ lệ tự nhiên; tabular-nums chỉ dành cho cột trong bảng. */
.stat-value {
    display: block; font-size: 1.75rem; font-weight: 600;
    line-height: 1.2; letter-spacing: -0.02em;
}

.stat-value small { font-size: 0.9rem; font-weight: 400; color: var(--ink-muted); }

/* Thanh đo: phần đầy và phần rỗng lấy từ cùng một dải xanh biển. */
.meter {
    height: 6px; border-radius: var(--pill);
    background: var(--brand-tint-2); overflow: hidden; margin-top: 10px;
}

.meter > span { display: block; height: 100%; border-radius: var(--pill); background: var(--brand); }
.meter.is-complete > span { background: var(--good); }

/* ---------- Danh sách phẳng ---------- */

.progress-list { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--rule); }
.progress-list > li { padding: 12px 8px; border-bottom: 1px solid var(--rule); font-size: 0.94rem; }
.progress-list ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 0.88rem; }
.progress-list ul li { padding: 1px 0; }

.row-split {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}

.figure { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Thẻ từ vựng ----------
   Vật duy nhất được nâng khỏi mặt giấy. */

.flashcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.flashcard { perspective: 1200px; height: 158px; cursor: pointer; }

.flashcard-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }

.flashcard-front, .flashcard-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 18px; text-align: center; border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
}

.flashcard-front {
    background: var(--surface); border: 1px solid var(--rule);
    font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em;
}

.flashcard-back {
    transform: rotateY(180deg);
    background: var(--grad-card-back);
    color: #fff; font-size: 1.05rem;
}

.flashcard-back .example {
    color: var(--brand-tint); font-size: 0.84rem; font-style: italic; margin: 8px 0 0;
}

/* Mỗi thẻ từ vựng có nút nghe máy đọc mẫu ở dưới. Nút nằm ngoài phần lật nên
   bấm nút không làm thẻ quay. */

.vocab-card { display: flex; flex-direction: column; gap: 8px; }

.card-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.tool-button {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface); border: 1px solid var(--rule-2);
    border-radius: var(--pill); padding: 4px 12px;
    font: inherit; font-size: 0.8rem; color: var(--brand-deep); cursor: pointer;
}

.tool-button:hover { background: var(--brand-tint); border-color: var(--brand-pale); }

/* display của class đè lên thuộc tính hidden của HTML, nên phải nói lại cho rõ. */
.tool-button[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .flashcard-inner { transition: none; }
    .intro-title .word > span { animation: none; }
    .float-badge { animation: none; }
    .button.primary:hover, .feature-card:hover, .syllabus a:hover::after { transform: none; }
}

/* ---------- Hộp thoại tạo bài tập ----------
   Bảng nổi phía trang quản trị: dày thông tin, gọn, khác với hộp đăng nhập
   vốn thoáng và mang tính giới thiệu. */

.dialog {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dialog.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.dialog-backdrop { position: absolute; inset: 0; background: rgba(43, 27, 42, 0.44); }

.dialog-panel {
    position: relative; z-index: 1;
    width: min(94vw, 560px); max-height: 92vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r-card); box-shadow: var(--shadow-lg);
    padding: 22px 22px 18px;
}

.dialog-panel h2 { margin: 0 0 4px; font-size: 1.3rem; }

.dialog-close {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border: none; border-radius: 50%;
    background: var(--paper-2); color: var(--ink);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}

.dialog-form { max-width: none; margin-top: 12px; }

.dialog-form textarea { font-family: inherit; }

.dialog-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

@media (max-width: 560px) {
    .dialog-row { grid-template-columns: 1fr; }
}

/* ---------- Bài tập luyện tập ---------- */

.exercise-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.exercise-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px 16px; background: var(--surface);
    border: 1px solid var(--rule); border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--ink);
}

.exercise-card:hover { border-color: var(--brand-pale); }
.exercise-card strong { font-size: 0.96rem; }

/* ---------- Góc mở rộng ---------- */

.fact-grid {
    display: grid; gap: 12px; margin-bottom: 8px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fact-card {
    padding: 16px 18px; background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2); border-radius: var(--r-card);
}

.fact-card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--brand-deep); }
.fact-card p { margin: 0 0 6px; color: var(--ink-2); font-size: 0.92rem; }
.fact-card a { color: var(--brand-deep); }

.lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 8px; }

/* ---------- Quiz & bài tập ---------- */

.quiz-form { margin-top: 6px; }

.quiz-question {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 18px 20px; margin: 0 0 12px;
}

.quiz-question legend { font-size: 0.84rem; font-weight: 500; color: var(--ink-muted); padding: 0 6px; }

.quiz-option {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 12px; margin-top: 5px;
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    font-weight: 400; cursor: pointer;
}

.quiz-option:hover { background: var(--brand-tint); border-color: var(--brand-pale); }
.quiz-option input { width: auto; margin: 4px 0 0; }

.exercise-prompt { font-size: 1.02rem; margin: 0 0 12px; }
.exercise-input { max-width: 420px; }

.countdown {
    display: inline-flex; align-items: baseline; gap: 12px;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 9px 18px; margin-bottom: 8px;
    position: sticky; top: 10px; z-index: 5;
}

.countdown-label { color: var(--ink-muted); font-size: 0.82rem; }

.countdown-value {
    font-size: 1.4rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--brand-deep);
}

.countdown.urgent { border-color: var(--crit); background: var(--crit-bg); }
.countdown.urgent .countdown-value { color: var(--crit-ink); }
.countdown.expired .countdown-value { font-size: 1rem; color: var(--crit-ink); }

.word-bank { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

.word-chip {
    background: var(--brand-tint); border: 1px solid var(--brand-tint-2); color: var(--brand-deep);
    border-radius: var(--pill); padding: 6px 14px;
    font: inherit; font-size: 0.94rem; cursor: pointer;
}

.word-chip:hover { background: var(--brand-tint-2); }
.word-chip:disabled { opacity: 0.35; cursor: default; }

/* ---------- Kết quả ---------- */

.result-summary { padding: 4px 0 20px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }

/* Con số duy nhất dẫn đầu trang. */
.score { font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 4px; }

.result-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }

.result-item {
    padding: 14px 8px 14px 16px; border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent; font-size: 0.94rem;
}

.result-item.right { border-left-color: var(--good); }
.result-item.wrong { border-left-color: var(--crit); }
.result-item p { margin: 3px 0; }
.result-prompt { font-weight: 600; margin: 0 0 5px !important; }
.mark-right { color: var(--good-ink); font-weight: 700; }
.mark-wrong { color: var(--crit-ink); font-weight: 700; }
.correct-answer { color: var(--good-ink); font-size: 0.88rem; }

/* ---------- Bài tập nộp ---------- */

.assignment-card {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 20px 22px; margin-bottom: 14px;
}

.assignment-card.expired { border-left: 3px solid var(--warn); }
.assignment-card .deadline { color: var(--ink-muted); font-size: 0.86rem; }
.assignment-card textarea { margin-bottom: 10px; }
.submitted-note { font-size: 0.86rem; color: var(--ink-muted); margin-bottom: 4px; }

blockquote {
    background: var(--paper-2); border-left: 3px solid var(--rule-2);
    margin: 10px 0; padding: 10px 16px; font-size: 0.92rem;
    color: var(--ink-2); white-space: pre-wrap; max-width: 68ch;
}

blockquote.feedback { background: var(--good-bg); border-left-color: var(--good); color: var(--ink); }

/* ---------- Sửa nhanh trong trang quản trị ---------- */

.row-edit { margin: 6px 0 0; }
.row-edit > summary { display: inline-block; cursor: pointer; color: var(--brand-deep); font-size: 0.84rem; }
.row-edit[open] > summary { margin-bottom: 10px; }

.row-edit .admin-form {
    background: var(--paper-2); border-radius: var(--r-sm);
    padding: 16px 18px; margin-bottom: 6px;
}

.row-actions, .order-cell { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-actions { margin-left: 10px; }
.order-cell .link-button { font-size: 0.9rem; line-height: 1; }

.grade-form { min-width: 200px; max-width: 250px; margin: 0; }
.grade-form label { margin-bottom: 10px; }

/* Chấm điểm ngay trong trang học viên: ô nhập rộng bằng thẻ bài nộp. */
.grade-inline { max-width: none; margin: 14px 0 0; }
.grade-inline label { margin-bottom: 10px; }
.grade-inline input[type="number"] { max-width: 180px; }
.grade-inline .hint { display: inline-block; margin-left: 10px; }

.submission-content {
    max-width: 290px; max-height: 130px; overflow: auto;
    white-space: pre-wrap; font-size: 0.86rem; color: var(--ink-2);
}

/* ---------- Màn hình hẹp ----------
   Dưới 900px sidebar thành thanh ngang cuộn được, không cần nút bật/tắt. */

@media (max-width: 900px) {
    .app { flex-direction: column; }

    .sidebar { width: 100%; flex: none; height: auto; position: static; }
    .brand { padding: 12px 16px; }

    .sidebar-nav {
        display: flex; align-items: center; gap: 4px;
        overflow-x: auto; padding: 8px 12px;
        border-top: 1px solid var(--sb-line);
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }

    .sidebar-nav::-webkit-scrollbar { display: none; }
    .nav-group { display: none; }
    .nav-item { margin-bottom: 0; white-space: nowrap; padding: 6px 12px; }

    .sidebar-foot {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 8px 12px;
    }

    .sidebar-user { margin-bottom: 0; }
    .sidebar-foot form { margin: 0; }
    .button.block { width: auto; }

    .content { padding: 22px 18px 60px; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.1rem; margin-top: 28px; }

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

    .intro { padding: 40px 0 4px; }
    .intro-title { font-size: 2rem; }
    .intro-lead { font-size: 1rem; }

    .exercise-list { grid-template-columns: 1fr; }
    .flashcard-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .flashcard { height: 140px; }

    .syllabus a { flex-wrap: wrap; gap: 6px 14px; padding: 14px 4px; }
    .syllabus-meta { align-self: auto; width: 100%; padding-left: calc(2ch + 14px); }

    .form-card, .admin-form, .grade-form { max-width: none; }

    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .stat-tile:nth-child(3) { border-left: none; }
    .stat-tile:nth-child(n + 3) { border-top: 1px solid var(--rule); }
    .stat-value { font-size: 1.5rem; }

    .admin-table { font-size: 0.86rem; }
    .admin-table th, .admin-table td { padding: 9px 11px; }
    .submission-content { max-width: 200px; }
}