/* ════════════════════════════════════════════════════════
   ROADMAP — /lo-trinh-cua-toi (display, builder, print)
   100% design tokens. Brand: teal/emerald/cyan/amber/locked.
════════════════════════════════════════════════════════ */

.rm-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-12);
}

/* ── Header ── */
.rm-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.rm-head h1 {
    font-size: var(--fs-h2-desktop); font-weight: var(--fw-bold);
    color: var(--color-ink); margin: 0 0 4px;
}
.rm-head h1 .rm-head__icon { color: var(--color-accent); margin-right: 8px; }
.rm-head p  { color: var(--color-muted); font-size: var(--fs-body); margin: 0; }
.rm-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ── Track tabs ── */
.rm-tabs {
    display: flex; gap: var(--space-1);
    border-bottom: 1.5px solid var(--color-border);
    margin-bottom: var(--space-5);
}
.rm-tab {
    padding: 12px 20px;
    font-size: 14px; font-weight: var(--fw-semibold);
    color: var(--color-muted);
    background: transparent; border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer; text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
    display: inline-flex; align-items: center; gap: 8px;
    position: relative;
}
.rm-tab:hover { color: var(--color-ink); }
.rm-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.rm-tab__icon {
    width: 22px; height: 22px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    background: var(--color-soft); color: var(--color-muted);
}
.rm-tab[data-track="foundation"] .rm-tab__icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-tab[data-track="ielts"]      .rm-tab__icon { background: var(--color-primary-soft);   color: var(--color-primary); }
.rm-tab[data-track="toeic"]      .rm-tab__icon { background: var(--color-warning-soft);   color: var(--color-warning); }
.rm-tab__badge {
    font-size: 10px; font-weight: var(--fw-bold);
    padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--color-soft); color: var(--color-muted);
}
.rm-tab.is-active .rm-tab__badge { background: var(--color-primary); color: var(--color-on-dark); }
.rm-tab__soon {
    font-size: 9px; font-weight: var(--fw-extrabold);
    padding: 1px 6px; border-radius: var(--radius-pill);
    background: var(--color-warning-soft); color: var(--color-warning);
    text-transform: uppercase; letter-spacing: .04em;
}

/* ══ Empty state ══ */
.rm-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
}
.rm-empty__icon {
    width: 72px; height: 72px; border-radius: var(--radius-xl);
    background: var(--color-primary-soft); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-4); font-size: 32px;
}
.rm-empty__icon[data-tone="secondary"] { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-empty__icon[data-tone="warning"]   { background: var(--color-warning-soft);   color: var(--color-warning); }
.rm-empty h3 {
    font-size: 22px; font-weight: var(--fw-bold);
    color: var(--color-ink); margin: 0 0 var(--space-2);
}
.rm-empty p {
    font-size: 15px; color: var(--color-muted);
    max-width: 480px; margin: 0 auto var(--space-5); line-height: 1.55;
}

/* ── Soon badge for IELTS/TOEIC ── */
.rm-soon-banner {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: var(--radius-pill);
    background: var(--color-warning-soft); color: var(--color-warning);
    font-size: 12.5px; font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
}

/* ══ Active roadmap card ══ */
.rm-summary {
    display: grid; grid-template-columns: 1fr auto;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
    align-items: start;
}
.rm-summary__title {
    font-size: 20px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); margin: 0 0 6px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rm-summary__chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: var(--fw-semibold);
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
}
.rm-summary__meta {
    color: var(--color-text); font-size: 14px;
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
}
.rm-summary__meta b { color: var(--color-ink); font-weight: var(--fw-bold); }
.rm-summary__progress {
    margin-top: var(--space-3);
    background: color-mix(in srgb, var(--color-on-dark) 50%, transparent);
    border-radius: var(--radius-pill);
    overflow: hidden; height: 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.rm-summary__progress-bar {
    height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width var(--dur-base) var(--ease);
}
.rm-summary__progress-label {
    margin-top: 6px; font-size: 12px; color: var(--color-muted);
    display: flex; justify-content: space-between;
}
.rm-summary__progress-label b { color: var(--color-ink); font-weight: var(--fw-bold); }

.rm-summary__actions {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}

/* ── Stat strip ── */
.rm-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.rm-stat-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.rm-stat-card__lbl {
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 4px;
}
.rm-stat-card__val {
    font-size: 22px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.rm-stat-card__sub {
    font-size: 12px; color: var(--color-muted); margin-top: 4px;
}

/* ══ Timeline (theo tuần) ══ */
.rm-timeline {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}
.rm-timeline__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line);
}
.rm-timeline__title {
    font-size: 16px; font-weight: var(--fw-bold); color: var(--color-ink); margin: 0;
}

/* Type filter chips */
.rm-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-type-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: var(--fw-semibold);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface); color: var(--color-muted);
    cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.rm-type-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rm-type-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

/* Week group */
.rm-week {
    margin-bottom: var(--space-5);
}
.rm-week:last-child { margin-bottom: 0; }
.rm-week__head {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.rm-week__num {
    width: 36px; height: 36px; flex-shrink: 0;
    background: var(--color-primary-soft); color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: var(--fw-extrabold);
}
.rm-week.is-current .rm-week__num { background: var(--color-primary); color: var(--color-on-dark); }
.rm-week.is-done .rm-week__num    { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-week__title { font-size: 14px; font-weight: var(--fw-bold); color: var(--color-ink); }
.rm-week__meta  { font-size: 12px; color: var(--color-muted); margin-top: 1px; }

/* Days within week — nested structure */
.rm-days { display: flex; flex-direction: column; gap: 12px; }

/* ── Day card ── */
.rm-day {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--dur-fast) var(--ease);
}
.rm-day.is-current { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.rm-day.is-done    { background: var(--color-secondary-soft); border-color: color-mix(in srgb, var(--color-secondary) 35%, transparent); }
.rm-day.is-overdue { border-style: dashed; border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-border)); }

.rm-day__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
}
.rm-day.is-done .rm-day__head { background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-bg)); }
.rm-day.is-current .rm-day__head { background: var(--color-primary-soft); }

.rm-day__num {
    font-size: 13px; font-weight: var(--fw-extrabold);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 4px 10px; border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.rm-day.is-done .rm-day__num    { background: var(--color-secondary); color: var(--color-on-dark); }
.rm-day.is-current .rm-day__num { background: var(--color-primary); color: var(--color-on-dark); }
.rm-day.is-overdue .rm-day__num { background: var(--color-warning-soft); color: var(--color-warning); }

.rm-day__date {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 13px; color: var(--color-ink); font-weight: var(--fw-bold);
}
.rm-day__date span {
    font-size: 11.5px; color: var(--color-muted);
    font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: .04em;
}
.rm-day__summary {
    flex: 1; min-width: 0;
    font-size: 12px; color: var(--color-muted);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-day__progress {
    font-size: 11.5px; font-weight: var(--fw-bold);
    color: var(--color-muted);
    background: var(--color-soft);
    padding: 3px 10px; border-radius: var(--radius-pill);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.rm-day.is-done .rm-day__progress { background: var(--color-secondary); color: var(--color-on-dark); }

/* ── Task list inside day ── */
.rm-day__tasks { display: flex; flex-direction: column; }
.rm-task {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none; color: inherit;
    transition: all var(--dur-fast) var(--ease);
    cursor: pointer;
    position: relative;
}
.rm-task:last-child { border-bottom: none; }
.rm-task:hover {
    background: var(--color-primary-soft);
    transform: translateX(2px);
}
.rm-task:hover .rm-task__title { color: var(--color-primary); }
.rm-task.is-done .rm-task__title {
    text-decoration: line-through; color: var(--color-muted);
}

/* Decorative icon (left) hidden — đã clean cho professional look */
.rm-task__icon { display: none; }

.rm-task__body { min-width: 0; }
.rm-task__title {
    font-size: 14px; font-weight: var(--fw-semibold);
    color: var(--color-ink); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rm-task__sub {
    font-size: 11px; color: var(--color-muted); margin-top: 2px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.rm-task__type {
    font-size: 10.5px; font-weight: var(--fw-semibold);
    color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.rm-task__check {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-muted); font-size: 12px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    padding: 0;
    position: relative; z-index: 1;
}
.rm-task__check::before {
    content: ''; position: absolute; inset: -10px;  /* bigger hit area */
}
.rm-task__check:hover {
    border-color: var(--color-secondary);
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
    transform: scale(1.1);
}
.rm-task__check i { opacity: .3; }
.rm-task__check:hover i { opacity: 1; }
.rm-task.is-done .rm-task__check i { opacity: 1; }
.rm-task.is-done .rm-task__check {
    background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-dark);
}
.rm-task.is-done .rm-task__check:hover {
    background: var(--color-warning); border-color: var(--color-warning);
}

/* Legacy flat items (keep for backward compat — shouldn't be needed) */
.rm-items { display: flex; flex-direction: column; gap: 8px; }

.rm-item {
    display: grid;
    grid-template-columns: 88px 36px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none; color: inherit;
    cursor: pointer;
}
.rm-item:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rm-item.is-done {
    background: var(--color-secondary-soft);
    border-color: color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
.rm-item.is-done .rm-item__title { text-decoration: line-through; color: var(--color-muted); }
.rm-item.is-locked-relaxed {
    opacity: .8;
    border-style: dashed;
}

.rm-item__date {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--color-muted); font-weight: var(--fw-semibold);
}
.rm-item__date b { color: var(--color-ink); display: block; font-size: 13px; font-weight: var(--fw-extrabold); }

.rm-item__icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: var(--color-soft); color: var(--color-muted);
    flex-shrink: 0;
}
.rm-item__icon[data-type="vocab_set"] { background: var(--color-primary-soft);   color: var(--color-primary); }
.rm-item__icon[data-type="review"]    { background: var(--color-accent-soft);    color: var(--color-accent); }
.rm-item__icon[data-type="grammar"]   { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-item__icon[data-type="phonics"]   { background: var(--color-warning-soft);   color: var(--color-warning); }
.rm-item__icon[data-type="final_test"] {
    background: var(--color-warning); color: var(--color-on-dark);
}

.rm-item__body { min-width: 0; }
.rm-item__title {
    font-size: 14px; font-weight: var(--fw-semibold);
    color: var(--color-ink); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rm-item__sub {
    font-size: 11.5px; color: var(--color-muted); margin-top: 2px;
    display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.rm-item__sub i { font-size: 10px; }

.rm-item__status {
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    padding: 3px 9px; border-radius: var(--radius-pill);
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--color-soft); color: var(--color-muted);
    flex-shrink: 0; white-space: nowrap;
}
.rm-item.is-done .rm-item__status {
    background: var(--color-secondary); color: var(--color-on-dark);
}
.rm-item.is-current .rm-item__status {
    background: var(--color-primary); color: var(--color-on-dark);
}
.rm-item.is-locked-relaxed .rm-item__status {
    background: var(--color-warning-soft); color: var(--color-warning);
}

/* ══════════════════════════════════════════════════
   BUILDER WIZARD
══════════════════════════════════════════════════ */
.rmb-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-12);
}

.rmb-head {
    text-align: center; margin-bottom: var(--space-6);
}
.rmb-head h1 {
    font-size: clamp(24px, 3.5vw, 34px); font-weight: var(--fw-extrabold);
    color: var(--color-ink); margin: 0 0 8px; letter-spacing: -.02em;
}
.rmb-head p { color: var(--color-muted); font-size: 15px; margin: 0; }

/* Step indicator */
.rmb-steps {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: var(--space-6);
    overflow-x: auto;
    padding-bottom: 4px;
}
.rmb-step {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.rmb-step__num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-soft); color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: var(--fw-extrabold);
    border: 1.5px solid var(--color-border);
    transition: all var(--dur-fast) var(--ease);
}
.rmb-step.is-current .rmb-step__num {
    background: var(--color-primary); color: var(--color-on-dark);
    border-color: var(--color-primary);
}
.rmb-step.is-done .rmb-step__num {
    background: var(--color-secondary); color: var(--color-on-dark);
    border-color: var(--color-secondary);
}
.rmb-step__label {
    font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-muted);
    white-space: nowrap;
}
.rmb-step.is-current .rmb-step__label { color: var(--color-ink); }
.rmb-step__sep {
    width: 24px; height: 1.5px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Step body */
.rmb-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
}
.rmb-card__title {
    font-size: 18px; font-weight: var(--fw-bold);
    color: var(--color-ink); margin: 0 0 4px;
}
.rmb-card__sub {
    font-size: 14px; color: var(--color-muted);
    margin: 0 0 var(--space-4);
}

/* Choice grid (level / goal / words/day) */
.rmb-choices {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rmb-choice {
    cursor: pointer;
    padding: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: all var(--dur-fast) var(--ease);
    text-align: center;
    position: relative;
}
.rmb-choice:hover { border-color: var(--color-primary); }
.rmb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rmb-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.rmb-choice__code {
    font-size: 18px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); letter-spacing: -.02em;
    margin-bottom: 2px;
}
.rmb-choice__lbl {
    font-size: 12px; color: var(--color-muted);
    font-weight: var(--fw-semibold);
}
.rmb-choice:has(input:checked) .rmb-choice__lbl { color: var(--color-primary); }

/* Days-of-week picker */
.rmb-days { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rmb-day {
    cursor: pointer;
    width: 64px; height: 64px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: all var(--dur-fast) var(--ease);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative;
}
.rmb-day input { position: absolute; opacity: 0; pointer-events: none; }
.rmb-day:hover { border-color: var(--color-primary); }
.rmb-day:has(input:checked) {
    background: var(--color-primary); color: var(--color-on-dark);
    border-color: var(--color-primary);
}
.rmb-day__name {
    font-size: 11px; font-weight: var(--fw-semibold);
    color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.rmb-day:has(input:checked) .rmb-day__name { color: var(--color-on-dark); }
.rmb-day__num {
    font-size: 16px; font-weight: var(--fw-extrabold);
    margin-top: 2px;
}

/* Folder grid */
.rmb-folder-section { margin-bottom: var(--space-3); }
.rmb-folder-section h4 {
    font-size: 11.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 var(--space-2);
}
.rmb-folder-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rmb-folder {
    cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: all var(--dur-fast) var(--ease);
    position: relative;
}
.rmb-folder input { position: absolute; opacity: 0; pointer-events: none; }
.rmb-folder:hover { border-color: var(--color-primary); }
.rmb-folder:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.rmb-folder__icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--color-soft); color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.rmb-folder__icon[data-color="primary"]   { background: var(--color-primary-soft);   color: var(--color-primary); }
.rmb-folder__icon[data-color="secondary"] { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rmb-folder__icon[data-color="accent"]    { background: var(--color-accent-soft);    color: var(--color-accent); }
.rmb-folder__icon[data-color="warning"]   { background: var(--color-warning-soft);   color: var(--color-warning); }
.rmb-folder__icon[data-color="locked"]    { background: var(--color-locked-soft);    color: var(--color-locked-deep); }
.rmb-folder__body { min-width: 0; flex: 1; overflow: hidden; }
.rmb-folder__name {
    font-size: 13px; font-weight: var(--fw-bold); color: var(--color-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.rmb-folder__meta {
    font-size: 11.5px; color: var(--color-muted); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmb-folder__check {
    width: 22px; height: 22px; border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 11px;
    flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.rmb-folder:has(input:checked) .rmb-folder__check {
    background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark);
}

/* Toggle module (grammar/phonics) */
.rmb-toggle-row {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.rmb-toggle {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    position: relative;
}
.rmb-toggle:hover { border-color: var(--color-primary); }
.rmb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rmb-toggle:has(input:checked) {
    border-color: var(--color-primary); background: var(--color-primary-soft);
}
.rmb-toggle__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-soft); color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.rmb-toggle:has(input:checked) .rmb-toggle__icon { background: var(--color-primary); color: var(--color-on-dark); }
.rmb-toggle__body { flex: 1; min-width: 0; }
.rmb-toggle__title {
    font-size: 14.5px; font-weight: var(--fw-bold); color: var(--color-ink);
    margin: 0 0 2px;
}
.rmb-toggle__desc {
    font-size: 12.5px; color: var(--color-muted); line-height: 1.5;
}
.rmb-toggle__check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 11px;
    flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.rmb-toggle:has(input:checked) .rmb-toggle__check {
    background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark);
}

/* Footer nav */
.rmb-foot {
    display: flex; gap: var(--space-2); justify-content: space-between;
    margin-top: var(--space-4);
}
.rmb-foot__right { display: flex; gap: var(--space-2); }

/* Summary preview at last step */
.rmb-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.rmb-summary__row {
    padding: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-line);
}
.rmb-summary__lbl {
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 4px;
}
.rmb-summary__val {
    font-size: 14px; font-weight: var(--fw-bold); color: var(--color-ink);
}
@media (max-width: 540px) {
    .rmb-summary { grid-template-columns: 1fr; }
}

/* Plan estimate */
.rmb-estimate {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4); margin-bottom: var(--space-4);
    text-align: center;
}
.rmb-estimate__big {
    font-size: 28px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); letter-spacing: -.02em;
    margin: 0 0 4px;
}
.rmb-estimate__big em { font-style: normal; color: var(--color-primary); }
.rmb-estimate__sub { font-size: 13px; color: var(--color-text); }

/* ══════════════════════════════════════════════
   Mode picker modal (vocab/review tasks)
══════════════════════════════════════════════ */
.rm-mode-modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: min(560px, 95vw);
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    animation: rmModeIn .18s var(--ease);
}
@keyframes rmModeIn {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.rm-mode-modal__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-line);
    flex-shrink: 0;
}
.rm-mode-modal__head-left { flex: 1; min-width: 0; }
.rm-mode-modal__eyebrow {
    display: inline-block;
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.rm-mode-modal__title {
    font-size: 18px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); margin: 0 0 4px;
    line-height: 1.3; letter-spacing: -.01em;
}
.rm-mode-modal__sub {
    font-size: 13px; color: var(--color-muted); margin: 0; line-height: 1.4;
}
.rm-mode-modal__close {
    width: 36px; height: 36px;
    background: var(--color-soft); border: none;
    border-radius: var(--radius-md);
    color: var(--color-muted); font-size: 14px;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast) var(--ease);
}
.rm-mode-modal__close:hover {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.rm-mode-grid {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
}

.rm-mode-btn {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-align: left;
    font-family: inherit;
    color: var(--color-text);
    width: 100%;
}
.rm-mode-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.rm-mode-btn__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-soft); color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.rm-mode-btn[data-tone="primary"]   .rm-mode-btn__icon { background: var(--color-primary-soft);   color: var(--color-primary); }
.rm-mode-btn[data-tone="secondary"] .rm-mode-btn__icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-mode-btn[data-tone="accent"]    .rm-mode-btn__icon { background: var(--color-accent-soft);    color: var(--color-accent); }
.rm-mode-btn[data-tone="warning"]   .rm-mode-btn__icon { background: var(--color-warning-soft);   color: var(--color-warning); }
.rm-mode-btn[data-tone="locked"]    .rm-mode-btn__icon { background: var(--color-locked-soft);    color: var(--color-locked-deep); }

.rm-mode-btn:hover[data-tone="primary"]   .rm-mode-btn__icon { background: var(--color-primary);   color: var(--color-on-dark); }
.rm-mode-btn:hover[data-tone="secondary"] .rm-mode-btn__icon { background: var(--color-secondary); color: var(--color-on-dark); }
.rm-mode-btn:hover[data-tone="accent"]    .rm-mode-btn__icon { background: var(--color-accent);    color: var(--color-on-dark); }
.rm-mode-btn:hover[data-tone="warning"]   .rm-mode-btn__icon { background: var(--color-warning);   color: var(--color-on-dark); }
.rm-mode-btn:hover[data-tone="locked"]    .rm-mode-btn__icon { background: var(--color-locked);    color: var(--color-on-dark); }

.rm-mode-btn__body {
    min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.rm-mode-btn__name {
    font-size: 14.5px; font-weight: var(--fw-bold);
    color: var(--color-ink); line-height: 1.3;
}
.rm-mode-btn__desc {
    font-size: 12.5px; color: var(--color-muted); line-height: 1.4;
}

.rm-mode-btn__arrow {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-soft); color: var(--color-muted);
    font-size: 11px; flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.rm-mode-btn:hover .rm-mode-btn__arrow {
    background: var(--color-primary); color: var(--color-on-dark);
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .rm-mode-modal__head { padding: var(--space-4); }
    .rm-mode-grid { padding: var(--space-3) var(--space-4) var(--space-4); }
    .rm-mode-btn { padding: 10px 12px; gap: 10px; }
    .rm-mode-btn__icon { width: 40px; height: 40px; }
    .rm-mode-btn__desc { display: none; }
}

/* Confirm modal (delete) */
.rm-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: color-mix(in srgb, var(--color-ink) 45%, transparent);
    z-index: 200;
    align-items: center; justify-content: center;
}
.rm-modal-overlay.is-open { display: flex; }
.rm-modal {
    background: var(--color-surface); border-radius: var(--radius-xl);
    padding: var(--space-6); width: min(420px, 95vw);
    box-shadow: var(--shadow-lg);
}
.rm-modal h3 {
    font-size: 17px; font-weight: var(--fw-bold);
    color: var(--color-ink); margin: 0 0 var(--space-2);
}
.rm-modal p {
    font-size: 14px; color: var(--color-muted);
    margin: 0 0 var(--space-4); line-height: 1.55;
}
.rm-modal__actions {
    display: flex; gap: var(--space-2); justify-content: flex-end;
}

/* ───────── Catchup modal — premium polished look ───────── */
.rm-modal--catchup {
    width: min(440px, 95vw);
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, .25);
}
.rm-catchup-hero {
    /* Solid primary teal — accessible contrast white > 4.5:1 */
    background: var(--color-primary);
    color: #fff;
    padding: 28px 24px 22px;
    text-align: center;
    position: relative;
}
.rm-catchup-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
    background: linear-gradient(to bottom, transparent, var(--color-surface, #fff));
    pointer-events: none;
}
.rm-catchup-hero__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 1.5px solid rgba(255, 255, 255, .35);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 21px; margin-bottom: 12px;
    color: #fff;
}
.rm-catchup-hero h3 {
    color: #fff !important;
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.01em;
}
.rm-catchup-hero__sub {
    margin: 0;
    font-size: 13.5px;
    color: #fff !important;     /* crisp white — fix grey-looking subtitle */
    opacity: .95;
    line-height: 1.5;
    max-width: 320px;
    margin-left: auto; margin-right: auto;
    font-weight: var(--fw-medium, 500);
}

.rm-catchup-body { padding: 16px 22px 4px; }

.rm-catchup-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 14px;
}
.rm-catchup-stat {
    text-align: center;
    background: var(--color-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 12px 8px;
    transition: border-color var(--dur-fast, .15s) var(--ease);
}
.rm-catchup-stat:hover { border-color: var(--color-primary-soft) }
.rm-catchup-stat__val {
    font-size: 24px;
    font-weight: var(--fw-extrabold);
    color: var(--color-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rm-catchup-stat__val--shift { color: var(--color-primary) }
.rm-catchup-stat__lbl {
    font-size: 10.5px;
    font-weight: var(--fw-bold, 700);
    color: var(--color-muted);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rm-catchup-timeline {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 4px 14px;
    margin-bottom: 12px;
}
.rm-catchup-tl-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 0;
}
.rm-catchup-tl-row + .rm-catchup-tl-row { border-top: 1px dashed var(--color-line) }
.rm-catchup-tl-label { font-size: 12.5px; color: var(--color-muted); font-weight: var(--fw-semibold) }
.rm-catchup-tl-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: var(--fw-bold); color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.rm-catchup-tl-arrow i { color: var(--color-primary); font-size: 10px }
.rm-catchup-tl-from {
    text-decoration: line-through;
    color: var(--color-warning);
    font-weight: var(--fw-semibold);
    opacity: .8;
}
.rm-catchup-tl-to { color: var(--color-secondary); font-weight: var(--fw-bold) }

.rm-catchup-note {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12.5px;
    color: var(--color-text);
    background: var(--color-accent-soft);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.rm-catchup-note i { color: var(--color-accent-hover); padding-top: 2px; font-size: 13px }
.rm-catchup-note strong { color: var(--color-ink); font-weight: var(--fw-bold) }

.rm-modal--catchup .rm-modal__actions {
    padding: 4px 22px 20px;
    gap: 10px;
}
.rm-modal--catchup .rm-modal__actions .btn {
    min-height: 42px;
    font-weight: var(--fw-bold);
}
.rm-modal--catchup .rm-modal__actions .btn-primary {
    flex: 1;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.rm-modal--catchup .rm-modal__actions .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* ───────── Reusable confirm/alert modal ───────── */
.rm-modal--alert {
    width: min(380px, 92vw);
    padding: 28px 26px 22px;
    text-align: center;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, .25);
}
.rm-alert__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin: 0 auto 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.rm-alert__icon[data-tone="danger"] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}
.rm-alert__icon[data-tone="success"] {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
}
.rm-modal--alert h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: var(--fw-extrabold);
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
.rm-modal--alert .rm-alert__body {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text);
    max-width: 300px;
    margin-left: auto; margin-right: auto;
}
.rm-modal--alert .rm-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.rm-modal--alert .rm-modal__actions .btn {
    min-height: 42px;
    min-width: 100px;
    font-weight: var(--fw-bold);
}
.rm-modal--alert .rm-modal__actions .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.rm-modal--alert .rm-modal__actions .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

@media (max-width: 540px) {
    .rm-modal--alert {
        width: 100% !important; max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        align-self: flex-end;
        padding: 24px 20px 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .rm-alert__icon { width: 56px; height: 56px; font-size: 22px }
    .rm-modal--alert h3 { font-size: 16px }
    .rm-modal--alert .rm-alert__body { font-size: 13px; margin-bottom: 18px }
    .rm-modal--alert .rm-modal__actions { flex-direction: column-reverse }
    .rm-modal--alert .rm-modal__actions .btn { width: 100%; min-height: 46px }
}

/* Mobile bottom-sheet for catchup */
@media (max-width: 540px) {
    .rm-modal--catchup {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        align-self: flex-end;
    }
    .rm-catchup-hero { padding: 22px 18px 20px }
    .rm-catchup-hero__icon { width: 46px; height: 46px; font-size: 18px }
    .rm-catchup-hero h3 { font-size: 17px }
    .rm-catchup-hero__sub { font-size: 13px }
    .rm-catchup-body { padding: 14px 16px 4px }
    .rm-catchup-stats { gap: 6px }
    .rm-catchup-stat { padding: 10px 4px }
    .rm-catchup-stat__val { font-size: 20px }
    .rm-catchup-stat__lbl { font-size: 9.5px }
    .rm-catchup-timeline { padding: 4px 12px }
    .rm-modal--catchup .rm-modal__actions {
        padding: 4px 16px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        flex-direction: column-reverse;
    }
    .rm-modal--catchup .rm-modal__actions .btn { width: 100%; justify-content: center }
}

/* ══════════════════════════════════════════════════
   STUDY PAGE — /lo-trinh-cua-toi/hoc
══════════════════════════════════════════════════ */
.rm-study-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-12);
}

.rm-study-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: var(--fw-semibold);
    color: var(--color-muted); text-decoration: none;
    padding: 6px 0;
    margin-bottom: var(--space-3);
    transition: color var(--dur-fast) var(--ease);
}
.rm-study-back:hover { color: var(--color-primary); }

/* Hero */
.rm-study-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
    align-items: center;
}
@media (max-width: 768px) { .rm-study-hero { grid-template-columns: 1fr; } }

.rm-study-hero__main { min-width: 0; }
.rm-study-hero__eyebrow {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12.5px; font-weight: var(--fw-semibold);
    color: var(--color-muted);
    margin-bottom: 8px;
}
.rm-study-hero__chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 11.5px;
}
.rm-study-hero__title {
    font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--fw-extrabold);
    color: var(--color-ink); margin: 0 0 12px;
    letter-spacing: -.01em; line-height: 1.25;
}
.rm-study-hero__badges {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.rm-study-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: var(--fw-semibold);
    background: var(--color-surface); color: var(--color-muted);
    border: 1px solid var(--color-border);
}
.rm-study-badge--primary   { background: var(--color-primary-soft);   color: var(--color-primary);   border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.rm-study-badge--secondary { background: var(--color-secondary-soft); color: var(--color-secondary); border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent); }
.rm-study-badge--accent    { background: var(--color-accent-soft);    color: var(--color-accent);    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.rm-study-badge--warning   { background: var(--color-warning-soft);   color: var(--color-warning);   border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }

.rm-study-progress-wrap {
    height: 8px; background: var(--color-surface);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    overflow: hidden;
}
.rm-study-progress-bar {
    height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width var(--dur-base) var(--ease);
}
.rm-study-progress-label {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--color-text);
    margin-top: 6px;
}
.rm-study-progress-label b { color: var(--color-ink); font-weight: var(--fw-bold); }

.rm-study-hero__side {
    display: flex; flex-direction: column; gap: 8px;
    flex-shrink: 0;
}

/* Tùy chỉnh */
.rm-study-customize {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.rm-study-customize__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: var(--fw-bold); color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.rm-study-customize__title i { color: var(--color-primary); }
.rm-study-customize__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.rm-study-cust-group label {
    display: block;
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 6px;
}
.rm-study-cust-group select {
    width: 100%; height: 36px; padding: 0 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-ink);
    font-size: 13px; font-family: var(--font-sans);
    cursor: pointer;
}
.rm-study-cust-group select:focus { outline: none; border-color: var(--color-primary); }

/* Mode picker grid */
.rm-study-modes { margin-bottom: var(--space-5); }
.rm-study-modes__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: var(--fw-bold);
    color: var(--color-ink); margin-bottom: var(--space-3);
}
.rm-study-modes__title i { color: var(--color-primary); }
.rm-study-modes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.rm-study-mode {
    position: relative;
    display: flex; flex-direction: column;
    gap: 6px;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
    overflow: hidden;
    min-height: 130px;
}
.rm-study-mode::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: var(--color-border);
    transition: background var(--dur-fast) var(--ease);
}
.rm-study-mode:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.rm-study-mode[data-tone="primary"]::before   { background: var(--color-primary); }
.rm-study-mode[data-tone="secondary"]::before { background: var(--color-secondary); }
.rm-study-mode[data-tone="accent"]::before    { background: var(--color-accent); }
.rm-study-mode[data-tone="warning"]::before   { background: var(--color-warning); }
.rm-study-mode[data-tone="locked"]::before    { background: var(--color-locked); }

.rm-study-mode__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-soft); color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 6px;
    transition: all var(--dur-fast) var(--ease);
}
.rm-study-mode[data-tone="primary"]   .rm-study-mode__icon { background: var(--color-primary-soft);   color: var(--color-primary); }
.rm-study-mode[data-tone="secondary"] .rm-study-mode__icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.rm-study-mode[data-tone="accent"]    .rm-study-mode__icon { background: var(--color-accent-soft);    color: var(--color-accent); }
.rm-study-mode[data-tone="warning"]   .rm-study-mode__icon { background: var(--color-warning-soft);   color: var(--color-warning); }
.rm-study-mode[data-tone="locked"]    .rm-study-mode__icon { background: var(--color-locked-soft);    color: var(--color-locked-deep); }

.rm-study-mode:hover[data-tone="primary"]   .rm-study-mode__icon { background: var(--color-primary);   color: var(--color-on-dark); }
.rm-study-mode:hover[data-tone="secondary"] .rm-study-mode__icon { background: var(--color-secondary); color: var(--color-on-dark); }
.rm-study-mode:hover[data-tone="accent"]    .rm-study-mode__icon { background: var(--color-accent);    color: var(--color-on-dark); }
.rm-study-mode:hover[data-tone="warning"]   .rm-study-mode__icon { background: var(--color-warning);   color: var(--color-on-dark); }
.rm-study-mode:hover[data-tone="locked"]    .rm-study-mode__icon { background: var(--color-locked);    color: var(--color-on-dark); }

.rm-study-mode__name {
    font-size: 15px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); line-height: 1.25;
}
.rm-study-mode__desc {
    font-size: 12.5px; color: var(--color-muted); line-height: 1.45;
    flex: 1;
}
.rm-study-mode__xp {
    align-self: flex-start;
    font-size: 10.5px; font-weight: var(--fw-extrabold);
    padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--color-warning-soft); color: var(--color-warning);
    letter-spacing: .04em;
}

/* Word list */
.rm-study-wordlist {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.rm-study-wordlist__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-line);
}
.rm-study-wordlist__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: var(--fw-bold); color: var(--color-ink);
}
.rm-study-wordlist__title i { color: var(--color-primary); }
.rm-study-wordlist__count {
    font-size: 11.5px; font-weight: var(--fw-bold);
    padding: 2px 9px; border-radius: var(--radius-pill);
    background: var(--color-primary-soft); color: var(--color-primary);
}
.rm-study-wordlist__search {
    position: relative;
    flex: 0 1 260px; min-width: 200px;
}
.rm-study-wordlist__search i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-muted); font-size: 12px; pointer-events: none;
}
.rm-study-wordlist__search input {
    width: 100%; height: 34px; padding: 0 12px 0 32px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg); color: var(--color-ink);
    font-size: 13px;
}
.rm-study-wordlist__search input:focus { outline: none; border-color: var(--color-primary); }

.rm-study-wordlist__body { padding: 0; }
.rm-study-word {
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    gap: 12px;
    align-items: center;
    padding: 12px var(--space-5);
    border-bottom: 1px solid var(--color-line);
    transition: background var(--dur-fast) var(--ease);
}
.rm-study-word:last-child { border-bottom: none; }
.rm-study-word:hover { background: var(--color-bg); }
.rm-study-word.is-known { background: var(--color-secondary-soft); }
.rm-study-word.is-known .rm-study-word__title { text-decoration: line-through; opacity: .8; }

.rm-study-word__num {
    font-size: 11.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted);
    background: var(--color-soft);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.rm-study-word__main { min-width: 0; }
.rm-study-word__top {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 3px;
}
.rm-study-word__title {
    font-size: 16px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); letter-spacing: -.01em;
}
.rm-study-word__ipa {
    font-family: var(--font-mono); font-size: 12.5px;
    color: var(--color-warning);
}
.rm-study-word__pos {
    font-size: 11px; color: var(--color-muted); font-style: italic;
}
.rm-study-word__cefr {
    font-size: 10px; font-weight: var(--fw-extrabold);
    padding: 1px 7px; border-radius: 4px;
    background: var(--color-primary-soft); color: var(--color-primary);
}
.rm-study-word__meaning {
    font-size: 13px; color: var(--color-text); line-height: 1.4;
    margin-bottom: 3px;
}
.rm-study-word__example {
    font-size: 12px; color: var(--color-muted); font-style: italic;
    line-height: 1.4;
    background: var(--color-bg); padding: 5px 9px;
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--color-warning);
}
.rm-study-word__example i {
    font-size: 9px; opacity: .6; margin-right: 4px;
}

.rm-study-word__known {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface); color: transparent;
    cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast) var(--ease);
    padding: 0;
}
.rm-study-word__known:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.rm-study-word.is-known .rm-study-word__known {
    background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-dark);
}

@media (max-width: 640px) {
    .rm-study-hero { padding: var(--space-4); }
    .rm-study-customize { padding: var(--space-3) var(--space-4); }
    .rm-study-modes__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .rm-study-mode { min-height: 110px; padding: var(--space-3); }
    .rm-study-mode__name { font-size: 14px; }
    .rm-study-mode__desc { font-size: 11.5px; }
    .rm-study-wordlist__head { padding: var(--space-3) var(--space-4); }
    .rm-study-word { padding: 10px var(--space-4); grid-template-columns: 28px 1fr 28px; }
}

/* ══════════════════════════════════════════════════
   PRINT — professional document layout with watermark
══════════════════════════════════════════════════ */
.rm-print-page {
    max-width: 920px; margin: 0 auto;
    padding: var(--space-5);
}
.rm-print-toolbar {
    display: flex; gap: var(--space-2); justify-content: space-between;
    align-items: center; flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg); border-radius: var(--radius-md);
    border: 1px solid var(--color-line);
}
.rm-print-doc {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 40px 44px;
    overflow: hidden;
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, .08);
}

/* Diagonal watermark — visible on screen lightly, persists in print */
.rm-print-watermark {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 0;
    overflow: hidden;
}
.rm-print-watermark img {
    width: 70%; max-width: 560px;
    opacity: .04;
    transform: rotate(-22deg);
    filter: grayscale(.4);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-doc > *:not(.rm-print-watermark) { position: relative; z-index: 1 }

/* Header — eyebrow + title + meta + logo block */
.rm-print-doc__head {
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 22px;
    align-items: flex-start;
}
.rm-print-doc__head::after {
    content: ''; display: block;
    grid-column: 1 / -1;
    height: 3px;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 60%, var(--color-secondary) 100%);
    border-radius: 99px;
    margin-top: -16px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-doc__eyebrow {
    font-size: 10.5px; font-weight: var(--fw-bold);
    color: var(--color-primary);
    text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: 8px;
}
.rm-print-doc__title {
    font-size: 26px; font-weight: var(--fw-extrabold);
    color: var(--color-ink);
    line-height: 1.2; letter-spacing: -0.015em;
    margin: 0 0 10px;
}
.rm-print-doc__meta { font-size: 12.5px; color: var(--color-muted); line-height: 1.6 }
.rm-print-doc__meta b { color: var(--color-ink); font-weight: var(--fw-bold); }
.rm-print-doc__dot { margin: 0 6px; color: var(--color-locked, #cbd5e1); }
.rm-print-doc__head-right {
    text-align: right; display: flex; flex-direction: column;
    align-items: flex-end; gap: 8px;
}
.rm-print-doc__logo { height: 36px; width: auto; max-width: 180px }
.rm-print-doc__code {
    font-family: var(--font-mono);
    font-size: 10.5px; color: var(--color-muted);
    letter-spacing: .08em;
    background: var(--color-soft);
    padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--color-line);
}

/* Info cards row */
.rm-print-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 26px;
}
.rm-print-info__cell {
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    position: relative;
}
.rm-print-info__cell--progress { grid-column: span 2 }
.rm-print-info__lbl {
    font-size: 9.5px; font-weight: var(--fw-extrabold);
    color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 4px;
}
.rm-print-info__val {
    font-size: 14px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); line-height: 1.3;
    letter-spacing: -0.01em;
}
.rm-print-info__val span {
    font-weight: var(--fw-medium, 500);
    color: var(--color-muted);
    font-size: 11.5px;
    margin-left: 2px;
    letter-spacing: 0;
}
.rm-print-info__bar {
    height: 4px; border-radius: 99px;
    background: var(--color-line);
    margin-top: 6px; overflow: hidden;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-info__bar > span {
    display: block; height: 100%;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    border-radius: 99px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Table */
.rm-print-table {
    width: 100%; border-collapse: collapse;
    font-size: 12.5px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rm-print-table thead th {
    background: var(--color-ink);
    color: var(--color-on-dark, #fff);
    text-align: left; padding: 10px 12px;
    font-size: 10.5px; font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .06em;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-table thead th:first-child { width: 36px; text-align: center }
.rm-print-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
}
.rm-print-table tbody tr:last-child td { border-bottom: 0 }
.rm-print-table tbody tr.is-week-divider td {
    background: linear-gradient(to right, var(--color-primary-soft), transparent);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary-hover);
    font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-line);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-table tbody tr.is-day-divider td {
    background: var(--color-soft) !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-ink) !important;
    border-top: 2px solid var(--color-line) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.rm-print-table .pcell-date {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--color-muted); white-space: nowrap;
}
.rm-print-table .pcell-type { white-space: nowrap; padding-right: 8px }
.rm-print-table .pcell-content { color: var(--color-text) }
.rm-print-meta { color: var(--color-muted); font-size: 11px }

/* Type chips — colored by category */
.rm-print-type {
    display: inline-block;
    padding: 2px 9px;
    font-size: 10px; font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .06em;
    border-radius: 4px;
    background: var(--color-soft);
    color: var(--color-muted);
    border: 1px solid var(--color-line);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-type[data-type="vocab_set"]        { background: var(--color-primary-soft);   color: var(--color-primary-hover); border-color: transparent }
.rm-print-type[data-type="grammar_theory"]   { background: var(--color-accent-soft);    color: var(--color-accent-deep);   border-color: transparent }
.rm-print-type[data-type="grammar_exercise"] { background: var(--color-secondary-soft); color: var(--color-secondary-deep);border-color: transparent }
.rm-print-type[data-type="grammar"]          { background: var(--color-accent-soft);    color: var(--color-accent-deep);   border-color: transparent }
.rm-print-type[data-type="phonics"]          { background: var(--color-warning-soft);   color: var(--color-warning-deep);  border-color: transparent }
.rm-print-type[data-type="review"]           { background: var(--color-locked-soft);    color: var(--color-locked-deep);   border-color: transparent }
.rm-print-type[data-type="final_test"]       { background: var(--color-warning-soft);   color: var(--color-warning-deep);  border-color: transparent }

/* Status checkbox */
.rm-print-table .pcell-status { width: 36px; text-align: center }
.rm-print-table .pcell-status .box {
    display: inline-block; width: 15px; height: 15px;
    border: 1.5px solid var(--color-locked, #94a3b8);
    border-radius: 4px;
}
.rm-print-table .pcell-status.is-done .box {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    position: relative;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rm-print-table .pcell-status.is-done .box::after {
    content: '✓';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}

/* Footer */
.rm-print-foot {
    margin-top: 28px; padding-top: 16px;
    border-top: 1px solid var(--color-line);
    display: flex; justify-content: space-between; gap: var(--space-3);
    font-size: 10.5px; color: var(--color-muted);
    align-items: center;
}
.rm-print-foot__left {
    display: flex; align-items: center; gap: 12px;
}
.rm-print-foot__logo {
    height: 22px; width: auto; opacity: .7;
}
.rm-print-foot code {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--color-soft);
    padding: 1px 6px; border-radius: 3px;
}
.rm-print-foot__right {
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    letter-spacing: .04em;
}

/* ─────── Mobile (<640px) ─────── */
@media (max-width: 640px) {
    .rm-print-page { padding: 12px }

    /* Toolbar — stack */
    .rm-print-toolbar {
        padding: 10px 12px;
        flex-direction: column; align-items: stretch;
        gap: 8px;
    }
    .rm-print-toolbar > .btn { width: 100%; justify-content: center; min-height: 42px }
    .rm-print-toolbar > div {
        order: -1;
        text-align: center; font-size: 11.5px !important;
        padding: 2px 0;
    }

    /* Document body padding compact */
    .rm-print-doc {
        padding: 22px 18px;
        border-radius: var(--radius-md);
    }
    .rm-print-watermark img { width: 90%; opacity: .05 }

    /* Header — stack title trên, logo dưới */
    .rm-print-doc__head {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-bottom: 14px;
        margin-bottom: 16px;
    }
    .rm-print-doc__head::after { margin-top: -12px; height: 3px }
    .rm-print-doc__eyebrow { font-size: 9.5px; margin-bottom: 6px }
    .rm-print-doc__title { font-size: clamp(18px, 5.5vw, 22px); margin-bottom: 8px }
    .rm-print-doc__meta { font-size: 12px; line-height: 1.7 }
    .rm-print-doc__dot { display: block; height: 0; margin: 0; opacity: 0 } /* dấu · ẩn → meta xuống dòng tự nhiên */
    .rm-print-doc__head-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .rm-print-doc__logo { height: 28px; max-width: 140px }
    .rm-print-doc__code { font-size: 10px; padding: 3px 8px }

    /* Info cards — 1 col on phone, 2 col on small tablet */
    .rm-print-info { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px }
    .rm-print-info__cell { padding: 10px 12px }
    .rm-print-info__cell--progress { grid-column: 1 / -1 }
    .rm-print-info__lbl { font-size: 9px }
    .rm-print-info__val { font-size: 13px }
    .rm-print-info__val span { font-size: 11px }

    /* Table — compact, hide date column */
    .rm-print-table { font-size: 12px }
    .rm-print-table thead th { padding: 8px 10px; font-size: 10px }
    .rm-print-table thead th.pcell-date,
    .rm-print-table tbody td.pcell-date { display: none }
    .rm-print-table tbody td { padding: 8px 10px }
    .rm-print-table tbody tr.is-week-divider td { padding: 7px 10px; font-size: 10.5px }
    .rm-print-table tbody tr.is-day-divider td { font-size: 10.5px !important; padding: 6px 10px !important }
    .rm-print-type {
        font-size: 9px; padding: 2px 7px;
        white-space: nowrap;
    }

    /* Footer stack */
    .rm-print-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        font-size: 10px;
        text-align: center;
    }
    .rm-print-foot__left { justify-content: center; flex-wrap: wrap; gap: 8px }
    .rm-print-foot__logo { height: 20px }
    .rm-print-foot__right { font-size: 11px }
}

@media (max-width: 380px) {
    /* iPhone SE / Galaxy Fold front — single column info */
    .rm-print-info { grid-template-columns: 1fr }
    .rm-print-info__cell--progress { grid-column: auto }
    .rm-print-doc { padding: 18px 14px }
}

/* ─────── @media print ─────── */
@media print {
    .rm-print-toolbar, .rm-no-print, nav, header, footer.site-footer { display: none !important; }
    body, html { background: #fff; margin: 0; padding: 0; }
    .rm-print-page { padding: 0; max-width: none; }
    .rm-print-doc {
        border: none; padding: 14mm 14mm;
        box-shadow: none; border-radius: 0;
    }
    .rm-print-watermark { position: fixed; inset: 0 }
    .rm-print-watermark img { opacity: .055 }
    .rm-print-table thead { display: table-header-group } /* repeat header on each page */
    .rm-print-table tbody tr { page-break-inside: avoid; break-inside: avoid }
    .rm-print-table tbody tr.is-week-divider,
    .rm-print-table tbody tr.is-day-divider { page-break-after: avoid; break-after: avoid }
    .rm-week, .rm-print-table { page-break-inside: auto }
    .rm-print-foot { page-break-inside: avoid }
    a, a:visited { color: inherit; text-decoration: none }
    @page {
        size: A4; margin: 12mm 10mm;
        @bottom-center {
            content: 'NAVSEnglish · Lộ trình học cá nhân hoá · Trang ' counter(page) ' / ' counter(pages);
            font-family: 'Inter', sans-serif; font-size: 9pt; color: #94a3b8;
        }
    }
}

/* ── Time grid picker (roadmap-builder Step 3) ── */
.rmb-tg-wrap {
    background: var(--color-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    user-select: none; -webkit-user-select: none;
}
.rmb-tg {
    display: grid;
    grid-template-columns: 36px repeat(18, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: var(--space-3);
    overflow-x: auto;
}
.rmb-tg__corner { background: transparent; }
.rmb-tg__hh {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 600;
    color: var(--color-muted);
    padding: 2px 0;
}
.rmb-tg__day {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--fw-bold);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    height: 32px;
}
.rmb-tg__cell {
    height: 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rmb-tg__cell:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.rmb-tg__cell.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary-deep);
}
.rmb-tg__cell.is-on:hover {
    background: var(--color-primary-hover);
}
.rmb-tg__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 13px;
    color: var(--color-muted);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.rmb-tg__summary i { color: var(--color-primary); }
.rmb-tg__summary b {
    color: var(--color-ink);
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
}

/* Mobile: scroll horizontal */
@media (max-width: 720px) {
    .rmb-tg { grid-template-columns: 32px repeat(18, 26px); }
    .rmb-tg__day, .rmb-tg__cell { height: 28px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ESSENTIAL UPGRADE: Daily plan / Per-type stats / Today highlight
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── "TUẦN HIỆN TẠI" badge ── */
.rm-week__now-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px;
    padding: 2px 9px;
    background: var(--color-primary);
    color: var(--color-on-dark);
    font-size: 9.5px; font-weight: var(--fw-extrabold);
    letter-spacing: .06em;
    border-radius: var(--radius-pill);
    vertical-align: middle;
    animation: rm-pulse 2s var(--ease) infinite;
}
.rm-week__now-badge i { font-size: 8px; }
@keyframes rm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

/* ── Today day card override (more prominent than is-current) ── */
.rm-day.is-today {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 3px var(--color-warning-soft);
    background: linear-gradient(135deg, var(--color-warning-soft) 0%, var(--color-surface) 60%);
}
.rm-day.is-today .rm-day__head {
    background: var(--color-warning-soft);
}
.rm-day.is-today .rm-day__num {
    background: var(--color-warning);
    color: var(--color-on-dark);
    font-weight: var(--fw-extrabold);
    letter-spacing: .04em;
    padding: 4px 10px;
    font-size: 11px;
}

/* ── Daily plan card ── */
.rm-daily-plan {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, color-mix(in srgb, var(--color-secondary-soft) 50%, transparent) 100%);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5);
    margin-bottom: var(--space-4);
    position: relative; overflow: hidden;
}
.rm-daily-plan::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
    pointer-events: none;
}
.rm-daily-plan__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-3); position: relative;
}
.rm-daily-plan__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--color-primary); color: var(--color-on-dark);
    font-size: 11px; font-weight: var(--fw-extrabold);
    text-transform: uppercase; letter-spacing: .06em;
}
.rm-daily-plan__chip i { font-size: 10px; }
.rm-daily-plan__chip--next { background: var(--color-warning); }
.rm-daily-plan__title {
    font-size: 20px; font-weight: var(--fw-extrabold);
    color: var(--color-ink); margin: 8px 0 0; letter-spacing: -.015em;
}
.rm-daily-plan__done {
    background: var(--color-secondary);
    color: var(--color-on-dark);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px; font-weight: var(--fw-bold);
}
.rm-daily-plan__items {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px; position: relative;
}
.rm-daily-plan__item {
    display: grid; grid-template-columns: 28px 36px 1fr auto;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none; color: var(--color-ink);
    transition: all var(--dur-fast) var(--ease);
}
.rm-daily-plan__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(-1px);
    color: var(--color-ink);
}
.rm-daily-plan__item-num {
    font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-align: center;
}
/* Decorative icon hidden cho clean look (đã có rm-daily-plan__item-cta thay vào) */
.rm-daily-plan__item-icon { display: none; }
.rm-daily-plan__item-body { min-width: 0; }
.rm-daily-plan__item-title {
    font-size: 14px; font-weight: var(--fw-bold);
    color: var(--color-ink); display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-daily-plan__item-meta {
    font-size: 11.5px; color: var(--color-muted); margin-top: 2px;
    display: block;
}
.rm-daily-plan__item-cta {
    font-size: 12px; font-weight: var(--fw-bold);
    color: var(--color-primary);
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.rm-daily-plan__item:hover .rm-daily-plan__item-cta {
    background: var(--color-primary); color: var(--color-on-dark);
}

/* Done state — full roadmap completion */
.rm-daily-plan--done {
    background: linear-gradient(135deg, var(--color-secondary-soft) 0%, var(--color-primary-soft) 100%);
    border-color: var(--color-secondary);
}
.rm-daily-plan__hero {
    display: flex; align-items: center; gap: var(--space-4);
    flex-wrap: wrap;
}
.rm-daily-plan__trophy { font-size: 56px; line-height: 1; }
.rm-daily-plan__sub { font-size: 14px; color: var(--color-muted); margin: 4px 0 0; }

/* ── Per-type stats bars ── */
.rm-type-stats {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
}
.rm-type-stats__head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}
.rm-type-stats__title {
    font-size: 12px; font-weight: var(--fw-extrabold);
    color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 6px;
}
.rm-type-stats__title i { color: var(--color-primary); font-size: 11px; }
.rm-type-stats__forecast {
    font-size: 12.5px; color: var(--color-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.rm-type-stats__forecast i { color: var(--color-warning); font-size: 11px; }
.rm-type-stats__forecast b { color: var(--color-ink); font-weight: var(--fw-extrabold); }
.rm-type-stats__body {
    display: flex; flex-direction: column; gap: 8px;
}
.rm-type-bar {
    display: grid; grid-template-columns: 130px 1fr 110px;
    align-items: center; gap: var(--space-3);
    font-size: 12.5px;
}
.rm-type-bar__lbl {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-ink); font-weight: var(--fw-semibold);
}
.rm-type-bar__emoji { font-size: 14px; }
.rm-type-bar__track {
    height: 8px; background: var(--color-line);
    border-radius: var(--radius-pill); overflow: hidden;
}
.rm-type-bar__fill {
    height: 100%; border-radius: var(--radius-pill);
    transition: width var(--dur-base) var(--ease);
}
.rm-type-bar__count {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--color-muted); text-align: right;
    font-variant-numeric: tabular-nums;
}
.rm-type-bar__count b { color: var(--color-ink); font-weight: var(--fw-extrabold); }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .rm-daily-plan { padding: var(--space-4); }
    .rm-daily-plan__title { font-size: 17px; }
    .rm-daily-plan__item { grid-template-columns: 24px 32px 1fr; gap: var(--space-2); padding: var(--space-3); }
    .rm-daily-plan__item-cta { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
    .rm-type-bar { grid-template-columns: 100px 1fr 80px; font-size: 11.5px; }
    .rm-type-bar__lbl { font-size: 11.5px; }
}

/* ── Collapsible timeline: show only current day by default ── */
.rm-timeline__filters { margin-top: var(--space-3); }
.rm-timeline.is-collapsed .rm-timeline__filters { display: none; }

/* Hide non-current weeks when collapsed */
.rm-timeline.is-collapsed .rm-week { display: none; }
.rm-timeline.is-collapsed .rm-week.is-current { display: block; }

/* Inside current week, hide all days except today (or fallback is-current day) */
.rm-timeline.is-collapsed .rm-week.is-current .rm-day { display: none; }
.rm-timeline.is-collapsed .rm-week.is-current .rm-day.is-today,
.rm-timeline.is-collapsed .rm-week.is-current .rm-day.is-current { display: block; }

/* Fallback: if no day matches (eg roadmap done) → show first day in current week */
.rm-timeline.is-collapsed .rm-week.is-current .rm-day:first-child { display: block; }
.rm-timeline.is-collapsed .rm-week.is-current .rm-day:first-child:not(.is-today):not(.is-current):has(~ .rm-day.is-today),
.rm-timeline.is-collapsed .rm-week.is-current .rm-day:first-child:not(.is-today):not(.is-current):has(~ .rm-day.is-current) { display: none; }

/* Hint message in collapsed state */
.rm-timeline.is-collapsed .rm-week.is-current::after {
    content: "💡 Đang xem ngày học hôm nay. Bấm \"Hiện toàn bộ\" để xem tất cả tuần.";
    display: block;
    text-align: center;
    font-size: 12px; color: var(--color-muted); font-style: italic;
    padding: var(--space-3);
    margin-top: var(--space-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-soft);
}

/* ─── Audit fixes: stat colors, modal sizing, gcal slots, toast ─── */

.rm-stat-card__val--success { color: var(--color-secondary); }
.rm-stat-card__val--warning { color: var(--color-warning); }

/* Filter chip count badge */
.rm-type-chip__count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: var(--color-soft);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.rm-type-chip.is-on .rm-type-chip__count {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* Empty filter result */
.rm-empty-filter {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    background: var(--color-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
    color: var(--color-muted);
}
.rm-empty-filter i { font-size: 32px; color: var(--color-muted); }
.rm-empty-filter p { margin: 0; font-size: var(--fs-body); }

/* Modal sizing + lead text */
.rm-modal--lg { max-width: 540px; }
.rm-modal__lead {
    font-size: 13.5px;
    color: var(--color-muted);
    margin-bottom: var(--space-3);
}
.rm-modal__actions--gcal { margin-top: var(--space-4); }

/* Gcal modal */
.rm-gcal-title-icon { color: var(--color-primary); }
.rm-gcal-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}
.rm-gcal-empty {
    text-align: center;
    color: var(--color-muted);
    padding: var(--space-6);
}
.rm-gcal-fallback {
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--color-warning-deep);
}
.rm-gcal-fallback__link {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.rm-gcal-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.rm-gcal-slot:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.rm-gcal-slot__day {
    font-weight: var(--fw-bold);
    font-size: 14px;
    width: 80px;
    color: var(--color-primary);
}
.rm-gcal-slot__time {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-ink);
}
.rm-gcal-slot__badge {
    font-size: 11px;
    color: var(--color-muted);
    background: var(--color-soft);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
}
.rm-gcal-slot__arrow { color: var(--color-primary); }

/* Toast (replaces alert()) */
.rm-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    z-index: 10000;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
    max-width: calc(100vw - 32px);
    text-align: center;
}
.rm-toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rm-toast--error    { background: var(--color-warning); color: #fff; }
.rm-toast--success  { background: var(--color-secondary); color: #fff; }
.rm-toast--info     { background: var(--color-primary); color: #fff; }

/* ─── Banner: catchup / paused ─── */
.rm-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
}
.rm-banner > i {
    font-size: 22px;
    flex-shrink: 0;
}
.rm-banner__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rm-banner__body strong {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--color-ink);
}
.rm-banner__body span {
    font-size: 12.5px;
    color: var(--color-muted);
}
.rm-banner--catchup {
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
}
.rm-banner--catchup > i { color: var(--color-warning-deep); }
.rm-banner--paused {
    background: var(--color-soft);
    border-color: var(--color-border);
}
.rm-banner--paused > i { color: var(--color-muted); }

/* Paused chip */
.rm-summary__chip--paused {
    background: var(--color-soft);
    color: var(--color-muted);
    border-color: var(--color-border);
}

/* Daily plan: "+N more" link */
.rm-daily-plan__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-3);
    margin-top: var(--space-2);
    background: var(--color-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rm-daily-plan__more:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    border-style: solid;
}
.rm-daily-plan__more i { font-size: 14px; }

@media (max-width: 640px) {
    .rm-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .rm-banner > i { align-self: center; }
}

/* ─────────────────────────────────────────────────────────
   Free tier — locked task variant
   ───────────────────────────────────────────────────────── */
.rm-task.is-locked-free {
    background: var(--color-locked-soft) !important;
    border-color: var(--color-locked) !important;
    position: relative;
}
.rm-task.is-locked-free .rm-task__icon {
    background: var(--color-locked) !important;
    color: #fff !important;
}
.rm-task.is-locked-free .rm-task__title,
.rm-task.is-locked-free .rm-task__sub,
.rm-task.is-locked-free .rm-task__type {
    color: var(--color-locked-deep) !important;
}
.rm-task.is-locked-free .rm-task__check {
    display: none;
}
.rm-task.is-locked-free:hover {
    background: color-mix(in srgb, var(--color-locked-soft) 70%, var(--color-locked) 8%) !important;
    border-color: var(--color-locked-deep) !important;
}

/* ════════════════════════════════════════════════════════
   MOBILE — /lo-trinh-cua-toi (listing page)
   Comprehensive mobile-first overrides
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .rm-page {
        padding: var(--space-4) var(--space-3) var(--space-10);
    }

    /* ── Header ── */
    .rm-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    .rm-head h1 {
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -.01em;
    }
    .rm-head h1 .rm-head__icon { margin-right: 6px; font-size: 18px; }
    .rm-head p {
        font-size: 13.5px;
        line-height: 1.45;
    }
    .rm-head-actions { gap: 8px; }
    .rm-head-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    /* ── Tabs (horizontal scroll if overflow) ── */
    .rm-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin-bottom: var(--space-4);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .rm-tabs::-webkit-scrollbar { display: none; }
    .rm-tab {
        padding: 10px 14px;
        font-size: 13px;
        flex-shrink: 0;
        gap: 6px;
    }
    .rm-tab__icon { width: 20px; height: 20px; font-size: 10px; }
    .rm-tab__badge { font-size: 9.5px; padding: 1px 6px; }

    /* ── Banner ── */
    .rm-banner { padding: var(--space-3); }
    .rm-banner > i { font-size: 20px; }
    .rm-banner__body strong { font-size: 13.5px; }
    .rm-banner__body span { font-size: 12px; }

    /* ── Summary card ── */
    .rm-summary {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    .rm-summary__title { font-size: 16.5px; gap: 6px; }
    .rm-summary__chip { font-size: 10.5px; padding: 2px 8px; }
    .rm-summary__meta {
        font-size: 13px;
        gap: 4px var(--space-3);
    }
    .rm-summary__progress { margin-top: var(--space-2); height: 8px; }
    .rm-summary__progress-label { font-size: 11.5px; }
    .rm-summary__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .rm-summary__actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12.5px;
    }

    /* ── Stats grid: 2 cols ── */
    .rm-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
    .rm-stat-card { padding: var(--space-3); }
    .rm-stat-card__lbl { font-size: 9.5px; }
    .rm-stat-card__val { font-size: 19px; }
    .rm-stat-card__sub { font-size: 11px; }

    /* ── Type stats bars ── */
    .rm-type-stats { padding: var(--space-3); }
    .rm-type-stats__head {
        gap: var(--space-2);
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-2);
    }
    .rm-type-stats__title { font-size: 11px; }
    .rm-type-stats__forecast { font-size: 11.5px; }
    .rm-type-bar {
        grid-template-columns: 88px 1fr 70px;
        gap: 8px;
    }
    .rm-type-bar__lbl { font-size: 12px; }
    .rm-type-bar__count { font-size: 11px; }

    /* ── Daily plan ── */
    .rm-daily-plan {
        padding: var(--space-3);
        border-radius: var(--radius-lg);
    }
    .rm-daily-plan__head {
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }
    .rm-daily-plan__chip { font-size: 10px; padding: 3px 9px; }
    .rm-daily-plan__title {
        font-size: 16px;
        margin: 6px 0 0;
    }
    .rm-daily-plan__item {
        grid-template-columns: 22px 32px 1fr;
        gap: 10px;
        padding: 10px 12px;
    }
    .rm-daily-plan__item-num { font-size: 12px; }
    .rm-daily-plan__item-icon { width: 32px; height: 32px; font-size: 12px; }
    .rm-daily-plan__item-title { font-size: 13.5px; }
    .rm-daily-plan__item-meta { font-size: 11px; }
    .rm-daily-plan__item-cta {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
        font-size: 11.5px;
        padding: 6px 10px;
    }
    .rm-daily-plan__hero { gap: var(--space-3); }
    .rm-daily-plan__trophy { font-size: 44px; }
    .rm-daily-plan__sub { font-size: 13px; }
    .rm-daily-plan__more { font-size: 12.5px; padding: 10px; }

    /* ── Timeline ── */
    .rm-timeline {
        padding: var(--space-3);
        border-radius: var(--radius-lg);
    }
    .rm-timeline__head {
        gap: var(--space-2);
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-3);
    }
    .rm-timeline__title { font-size: 14.5px; }
    .rm-timeline__head .btn { font-size: 12px; padding: 6px 10px; }
    .rm-timeline.is-collapsed .rm-week.is-current::after {
        font-size: 11.5px;
        padding: var(--space-2);
    }

    /* Type chips */
    .rm-type-chip { font-size: 11px; padding: 4px 10px; }
    .rm-type-chip__count { font-size: 10px; }

    /* Week head */
    .rm-week { margin-bottom: var(--space-4); }
    .rm-week__head { gap: var(--space-2); margin-bottom: var(--space-2); }
    .rm-week__num { width: 32px; height: 32px; font-size: 12px; }
    .rm-week__title { font-size: 13.5px; }
    .rm-week__meta { font-size: 11.5px; }
    .rm-week__now-badge {
        font-size: 9px;
        padding: 2px 7px;
        margin-left: 6px;
    }

    /* Day head — compact */
    .rm-day__head {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .rm-day__num { font-size: 11.5px; padding: 3px 9px; }
    .rm-day__date { font-size: 12.5px; gap: 5px; }
    .rm-day__date span { font-size: 10.5px; }
    .rm-day__summary {
        font-size: 11.5px;
        flex-basis: 100%;
        order: 3;
        white-space: normal;
    }
    .rm-day__progress { font-size: 11px; padding: 2px 8px; }

    /* Task: bỏ cột type label, tăng touch target */
    .rm-task {
        grid-template-columns: 28px 1fr 32px;
        gap: 10px;
        padding: 11px 12px;
    }
    .rm-task__type { display: none; }
    .rm-task__title { font-size: 13.5px; }
    .rm-task__sub { font-size: 10.5px; gap: 6px; }
    .rm-task__check { width: 32px; height: 32px; }

    /* Empty state */
    .rm-empty { padding: var(--space-8) var(--space-3); }
    .rm-empty__icon { width: 56px; height: 56px; font-size: 24px; }
    .rm-empty h3 { font-size: 18px; }
    .rm-empty p { font-size: 13.5px; max-width: 100%; }

    /* Modal */
    .rm-modal { padding: var(--space-5); }
    .rm-modal h3 { font-size: 16px; }
    .rm-modal p { font-size: 13.5px; }
    .rm-modal__actions .btn { flex: 1; justify-content: center; }
}

/* Very small screens (≤ 380px) — extra compact */
@media (max-width: 380px) {
    .rm-stats { grid-template-columns: 1fr; }
    .rm-summary__actions .btn { flex-basis: 100%; }
    .rm-tab { padding: 8px 12px; font-size: 12.5px; }
    .rm-day__date span { display: none; }
    .rm-type-bar { grid-template-columns: 76px 1fr 60px; }
}