/* TOEIC Buổi Tối — bài học hôm nay (#day-N) và lịch 12 tuần (#calendar). [v-day]
   Chỉ có class tiền tố day-; màu lấy từ token của css/app.css (tự đúng ở cả theme sáng và tối). */

/* ───────────────────────── 1. Chữ dùng chung ───────────────────────── */
.day-lead { font-size: var(--fs-lg); line-height: 1.6; max-width: 68ch; }
.day-note { font-size: var(--fs-sm); color: var(--muted); max-width: 68ch; }
.day-note b { color: var(--ink); }
.day-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.day-actions .btn { flex: 1 1 220px; white-space: normal; }
.day-callout-body { display: grid; gap: var(--s2); justify-items: start; }

/* ───────────────────────── 2. Trang ngày: 5 câu trả lời + các bước ───────────────────────── */
.day-hub { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.day-hub > * { min-width: 0; }

.day-brief { gap: 0; padding: 0; }
.day-brief-toggle {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 56px; padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-lg); background: none; color: var(--ink); font: inherit; text-align: left;
}
button.day-brief-toggle { cursor: pointer; }
button.day-brief-toggle:hover { background: var(--surface-2); }
.day-brief-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); }
.day-brief-hint { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.day-brief-toggle > .icon { flex: none; color: var(--muted); transition: transform 0.15s; }
.day-brief[data-open="1"] .day-brief-toggle > .icon { transform: rotate(180deg); }
.day-brief[data-open="0"] .day-brief-body { display: none; }
.day-brief-body { display: grid; margin: 0; padding: 0 var(--s4) var(--s2); }
.day-brief-row { display: grid; gap: 6px; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.day-brief-q { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.day-brief-a { display: grid; gap: var(--s2); margin: 0; min-width: 0; }
.day-brief-what { display: grid; gap: var(--s2); }
.day-brief-what li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.day-brief-what .tag { justify-self: start; }
.day-brief-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.day-brief-note { font-size: var(--fs-sm); color: var(--muted); max-width: 68ch; }

.day-hub .step-sub, .day-sum-cols .step-sub { text-wrap: pretty; }
.day-cta { display: grid; gap: 6px; }
.day-cta-info { font-size: var(--fs-sm); color: var(--muted); text-align: center; }

@media (max-width: 899px) {
  /* nút chính luôn trong tầm ngón tay: dính ngay trên thanh tab */
  .day-cta {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 5;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--s2) var(--gutter) var(--s3);
    background: var(--bg); border-top: 1px solid var(--line);
  }
}
@media (min-width: 900px) {
  .day-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 364px); grid-template-rows: auto 1fr; grid-template-areas: "brief steps" "brief cta"; gap: var(--s5) var(--s6); align-items: start; }
  .day-hub > .day-brief { grid-area: brief; }
  .day-hub-steps { grid-area: steps; }
  .day-cta { grid-area: cta; }
  .day-brief-toggle { padding-inline: var(--s5); }
  .day-brief-body { padding-inline: var(--s5); }
}

/* ───────────────────────── 3. Thanh bước (trong từng bước) ───────────────────────── */
.day-rail-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.day-rail-list > li { position: relative; min-width: 0; }
.day-rail-list > li + li::before {
  content: ""; position: absolute; top: 21px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; border-radius: 1px; background: var(--line);
}
.day-rail-item {
  position: relative; display: grid; justify-items: center; gap: 4px; width: 100%; min-height: 48px; padding: 4px 2px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--muted); font: inherit; cursor: pointer;
}
.day-rail-item:hover { background: var(--surface-2); }
.day-rail-dot {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.day-rail-dot .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.day-rail-label { max-width: 100%; font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-rail-item.is-done .day-rail-dot { background: var(--pencil); border-color: var(--pencil); color: var(--on-pencil); }
.day-rail-item.is-pass .day-rail-dot { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.day-rail-item.is-fail .day-rail-dot { border-color: var(--warn); border-width: 2px; color: var(--warn-ink); }
.day-rail-item.is-current .day-rail-dot { border-color: var(--brand); border-width: 2px; color: var(--brand); }
.day-rail-item.is-active { color: var(--ink); }
.day-rail-item.is-active .day-rail-label { font-weight: 600; }
.day-rail-item.is-active .day-rail-dot { box-shadow: 0 0 0 4px var(--brand-soft); }

/* ───────────────────────── 4. Thẻ từ vựng (bước 1 và phiên ôn thẻ) ───────────────────────── */
.day-words, .day-srs { display: grid; gap: var(--s4); max-width: 640px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.day-words-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.day-words-count { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-word {
  display: grid; align-content: start; gap: var(--s3); min-height: 268px; padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0;
}
.day-word-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; }
.day-word-text { min-width: 0; font-family: var(--font-en); font-size: 2.1rem; font-weight: 600; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
.day-word-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.day-word-vi { font-size: var(--fs-xl); font-weight: 600; line-height: 1.35; }
.day-word-ex { display: flex; align-items: flex-start; gap: var(--s2); padding-top: var(--s3); border-top: 1px dashed var(--line-strong); }
.day-word-ex > .btn { flex: none; margin-left: -6px; }
.day-word-ex-body { display: grid; gap: 2px; flex: 1; min-width: 0; padding-top: 6px; }
.day-word-ex-en { font-size: 1.16rem; }
.day-word-ex-vi { font-size: 0.95rem; color: var(--muted); }
.day-word-note { padding-left: 10px; border-left: 3px solid var(--mark); font-size: var(--fs-sm); }
.day-words-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
.day-words-nav .btn { min-height: 52px; }
.day-words-nav .btn:first-child { min-width: 128px; }
@media (max-width: 899px) {
  /* nút chuyển từ / chấm thẻ luôn trong tầm ngón tay: dính ngay trên thanh tab */
  .day-words-nav, .day-srs-actions {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 5;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--s2) var(--gutter) var(--s3);
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .app.is-focus .day-words-nav, .app.is-focus .day-srs-actions { bottom: env(safe-area-inset-bottom, 0px); }
}
.day-words-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
.day-words-pass { font-size: var(--fs-sm); color: var(--muted); }
.day-words-foot .btn { margin-left: calc(-1 * var(--s3)); white-space: normal; text-align: left; }

.day-srs-ask { color: var(--muted); }
.day-srs-actions { display: grid; }
.day-srs-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.day-srs-grade { flex-direction: column; gap: 1px; min-height: 58px; padding: 6px var(--s2); white-space: normal; }
.day-srs-grade-sub { font-size: var(--fs-xs); font-weight: 500; opacity: 0.85; }
@media (min-width: 640px) { .day-srs-grades { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────────────────────── 5. Bài giảng, lời dẫn trước khi làm bài ───────────────────────── */
.day-lesson-top { display: grid; gap: var(--s3); justify-items: start; }
.day-lesson-top .btn { margin-left: calc(-1 * var(--s3)); white-space: normal; text-align: left; }
.day-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); max-width: 720px; }
.day-next > div { flex: 1 1 240px; min-width: 0; }
.day-next .btn { flex: 0 1 auto; white-space: normal; }

.day-intro { max-width: 640px; gap: var(--s4); }
.day-intro-lead { font-size: var(--fs-lg); line-height: 1.6; }
.day-intro-focus { font-size: var(--fs-sm); color: var(--muted); }
.day-intro-focus b { font-weight: 600; color: var(--ink); }
.day-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--s2); }
.day-fact { display: grid; align-content: start; gap: 2px; padding: var(--s3); border-radius: var(--r-md); background: var(--sunken); min-width: 0; }
.day-fact-val { font-size: var(--fs-xl); line-height: 1.15; overflow-wrap: anywhere; }
.day-fact-val small { margin-left: 3px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.day-fact-label { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); line-height: 1.35; }
.day-rules { display: grid; gap: var(--s2); }
.day-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); }
.day-rules .icon { margin-top: 4px; color: var(--muted); }
.day-intro-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.day-intro-actions .btn { flex: 1 1 200px; white-space: normal; }

/* ───────────────────────── 6. Ngày ôn: tự đánh giá, lời khuyên ───────────────────────── */
.day-checklist { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); max-width: 720px; }
.day-checklist li + li { border-top: 1px solid var(--line); }
.day-checklist .check { display: flex; width: 100%; padding: var(--s2) var(--s4); }
.day-tips { display: grid; gap: var(--s2); padding-left: var(--s4); list-style: disc; }

/* ───────────────────────── 7. Kết quả, tin vui, tổng kết ngày ───────────────────────── */
.day-news { display: grid; max-width: 720px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.day-news-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); padding: var(--s3) var(--s4); }
.day-news-item + .day-news-item { border-top: 1px solid var(--line); }
.day-news-ico { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; color: var(--muted); }
.day-news-item.is-win .day-news-ico { border-radius: 50%; background: var(--mark); color: var(--on-mark); }
.day-news-item.is-win .day-news-ico .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.day-news-words { display: grid; gap: 2px; }
.day-wordchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.day-wordchips li { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sunken); font-size: var(--fs-sm); }
.day-wordchips li b { font-weight: 600; font-size: 1.05em; }
.day-wordchips li span { color: var(--muted); }

.day-done { max-width: 640px; gap: var(--s4); }
.day-done-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.day-done-head > div { display: grid; gap: 2px; min-width: 0; }
.day-done-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--pencil); color: var(--on-pencil); }
.day-done-ico.is-pass { background: var(--ok); color: var(--on-ok); }
.day-done-ico .icon { width: 26px; height: 26px; stroke-width: 2.4; }

.day-sum { gap: var(--s4); }
.day-sum-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.day-sum-cols { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.day-sum-side { display: grid; gap: var(--s5); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.day-todo { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.day-todo-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
.day-todo-item + .day-todo-item { border-top: 1px solid var(--line); }
.day-todo-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--sunken); color: var(--muted); }
.day-todo-main { display: grid; gap: 2px; min-width: 0; align-content: center; }
.day-todo-title { font-weight: 500; }
.day-todo-text { font-size: var(--fs-sm); color: var(--muted); }
.day-todo-act { grid-column: 2; justify-self: start; }
.day-mock-result { max-width: 640px; gap: var(--s4); }
.day-preview { justify-self: center; width: 100%; max-width: 560px; }
@media (min-width: 640px) {
  .day-sum-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .day-sum-cols { grid-template-columns: minmax(0, 364px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .day-actions .btn { flex: 0 1 auto; }
  .day-intro-actions .btn { flex: 0 1 auto; }
}

/* ───────────────────────── 8. Lịch 12 tuần ───────────────────────── */
.day-cal-lead { font-size: var(--fs-lg); line-height: 1.5; }
.day-cal-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.day-cal-stats > :last-child { grid-column: 1 / -1; }
.day-cal-stats .bar { margin-top: 6px; }
.day-cal-dates { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.day-cal-datelist { display: grid; gap: 4px; margin: 0; min-width: 0; }
.day-cal-date { display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--fs-sm); }
.day-cal-date dt { min-width: 92px; color: var(--muted); }
.day-cal-date dd { margin: 0; font-weight: 600; }
.day-cal-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.day-cal-actions .btn { flex: 1 1 220px; white-space: normal; }
.day-cal-form { display: grid; gap: var(--s5); }
.day-cal-form .btn { margin-left: calc(-1 * var(--s3)); white-space: normal; text-align: left; }

.day-cal-legend { display: grid; gap: var(--s2); }
.day-cal-legend-title { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.day-cal-legend-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.day-cal-legend-list li { display: inline-flex; align-items: center; gap: var(--s2); }

.day-cal-phase { display: grid; gap: var(--s4); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.day-cal-phase-head { display: grid; gap: 6px; padding-top: var(--s4); border-top: 2px solid var(--ink); }
.day-cal-phase-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.day-cal-phase-goal { max-width: 68ch; color: var(--muted); }

.day-cal-week { gap: var(--s3); padding: var(--s4) var(--s3); scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s3)); }
.day-cal-week.is-current { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.day-cal-week-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s3); padding-inline: var(--s1); }
.day-cal-week-title { display: grid; gap: 2px; min-width: 0; }
.day-cal-week-count { flex: none; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.day-cal-week-head .chip { flex: none; }
.day-cal-week-goal { padding-inline: var(--s1); font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; }
.day-cal-week-goal b { font-weight: 600; color: var(--ink); }
.day-cal-skip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3);
  padding: var(--s3); border: 1px solid var(--mark-line); border-radius: var(--r-md); background: var(--mark-soft);
}
.day-cal-skip p { flex: 1 1 220px; min-width: 0; }

/* ô ngày — mặc định (mobile, tuần đang gập): 7 ô nhỏ, chỉ có số ngày + ngày tháng */
.day-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.day-cal-days > li { min-width: 0; }
.day-cal-cell {
  display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 62px; padding: 6px 0 4px;
  border-radius: var(--r-md); color: var(--ink); text-decoration: none; min-width: 0;
}
a.day-cal-cell:hover { background: var(--surface-2); }
.day-cal-num {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.day-cal-cell.is-review .day-cal-num, .day-cal-cell.is-mock .day-cal-num { border-radius: 9px; }
.day-cal-cell.is-mock .day-cal-num { outline: 1.5px solid var(--line-strong); outline-offset: 2px; }
.day-cal-cell.is-open .day-cal-num { border-width: 2px; border-color: var(--brand); color: var(--brand); }
.day-cal-cell.is-doing .day-cal-num { border-width: 2px; border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.day-cal-cell.is-done .day-cal-num { border-color: var(--pencil); background: var(--pencil); color: var(--on-pencil); }
.day-cal-cell.is-passed .day-cal-num { border-color: var(--ok); background: var(--ok); color: var(--on-ok); }
.day-cal-cell.is-done.is-mock .day-cal-num { outline-color: var(--pencil); }
.day-cal-cell.is-passed.is-mock .day-cal-num { outline-color: var(--ok); }
.day-cal-cell.is-locked .day-cal-num { border-style: dashed; color: var(--muted); }
.day-cal-cell.is-locked.is-mock .day-cal-num { outline-style: dashed; }
.day-cal-cell.is-now .day-cal-num { box-shadow: 0 0 0 4px var(--brand-soft); }
.day-cal-main { display: grid; justify-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.day-cal-name, .day-cal-wd, .day-cal-state, .day-cal-cell .day-cal-todaytag { display: none; }
.day-cal-when { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.72rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-cal-cell.is-today .day-cal-dm { padding: 0 4px; border-radius: 4px; background: var(--mark); color: var(--on-mark); font-weight: 600; }
.day-cal-todaytag { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--mark); color: var(--on-mark); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.day-cal-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 var(--s3);
  border: 0; border-radius: var(--r-md); background: none; color: var(--brand); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.day-cal-toggle:hover { background: var(--brand-soft); }
.day-cal-toggle .icon { width: 18px; height: 18px; transition: transform 0.15s; }
.day-cal-week[data-open="1"] .day-cal-toggle .icon { transform: rotate(180deg); }


/* mobile, tuần đang mở: mỗi ngày một hàng đủ thông tin */
@media (max-width: 719px) {
  .day-cal-week[data-open="1"] .day-cal-days { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .day-cal-week[data-open="1"] .day-cal-days > li + li { border-top: 1px solid var(--line); }
  .day-cal-week[data-open="1"] .day-cal-cell {
    grid-template-columns: 36px minmax(0, 1fr) auto; justify-items: start; align-items: center; align-content: center; gap: var(--s3);
    min-height: 64px; padding: var(--s2) var(--s1);
  }
  .day-cal-week[data-open="1"] .day-cal-main { justify-items: start; }
  .day-cal-week[data-open="1"] .day-cal-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 1.35;
  }
  .day-cal-week[data-open="1"] .day-cal-when { font-size: var(--fs-xs); }
  .day-cal-week[data-open="1"] .day-cal-wd { display: inline; }
  .day-cal-week[data-open="1"] .day-cal-dm { display: none; }
  .day-cal-week[data-open="1"] .day-cal-cell .day-cal-todaytag { display: inline-block; }
  .day-cal-week[data-open="1"] .day-cal-state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; }
  .day-cal-week[data-open="1"] .day-cal-cell.is-passed .day-cal-state { color: var(--ok-ink); }
  .day-cal-week[data-open="1"] .day-cal-cell.is-doing .day-cal-state, .day-cal-week[data-open="1"] .day-cal-cell.is-open .day-cal-state { color: var(--brand); }
}

/* từ 720px: 7 ô đủ thông tin trên một hàng, không cần nút gập */
@media (min-width: 720px) {
  .day-cal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-cal-stats > :last-child { grid-column: auto; }
  .day-cal-actions .btn { flex: 0 1 auto; }
  .day-cal-week { padding: var(--s5); }
  .day-cal-week-head, .day-cal-week-goal { padding-inline: 0; }
  .day-cal-toggle { display: none; }
  .day-cal-days { gap: var(--s2); }
  .day-cal-cell {
    grid-template-rows: auto 1fr auto; justify-items: start; gap: 6px; height: 100%; min-height: 148px; padding: var(--s2);
    border: 1px solid var(--line); background: var(--surface);
  }
  a.day-cal-cell:hover { border-color: var(--ink); background: var(--surface-2); }
  .day-cal-cell.is-locked { background: none; border-style: dashed; }
  .day-cal-cell.is-now { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
  .day-cal-num { width: 32px; height: 32px; font-size: 0.9rem; }
  .day-cal-main { justify-items: start; align-content: start; gap: 4px; }
  .day-cal-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
  }
  .day-cal-name .icon, .day-cal-week[data-open="1"] .day-cal-name .icon { vertical-align: -2px; margin-right: 3px; }
  .day-cal-wd { display: inline; }
  .day-cal-dm { display: none; }
  .day-cal-cell .day-cal-todaytag { display: inline-block; font-size: 0.7rem; }
  .day-cal-state { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
  .day-cal-state .icon { width: 13px; height: 13px; flex: none; }
  .day-cal-cell.is-passed .day-cal-state { color: var(--ok-ink); }
  .day-cal-cell.is-doing .day-cal-state, .day-cal-cell.is-open .day-cal-state { color: var(--brand); }
}
@media (min-width: 900px) {
  .day-cal-week { scroll-margin-top: var(--s4); }
}
@media (max-width: 719px) {
  .day-cal-name .icon { vertical-align: -2px; margin-right: 4px; }
}

/* chú giải: ô mẫu thu nhỏ, dùng lại đúng màu của ô ngày (đặt cuối file để thắng kiểu ô ở mọi cỡ màn hình) */
.day-cal-legend-list .day-cal-swatch { display: inline-grid; min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.day-cal-legend-list .day-cal-swatch .day-cal-num { width: 20px; height: 20px; font-size: 0; }
.day-cal-legend-list .day-cal-swatch.is-review .day-cal-num, .day-cal-legend-list .day-cal-swatch.is-mock .day-cal-num { border-radius: 5px; }
.day-cal-legend-list .day-cal-swatch.is-now .day-cal-num { box-shadow: 0 0 0 3px var(--brand-soft); }