/* Trí Lữ App v3 — visual-first shell. Loaded only by /app-v2/. */

.app-shell {
  background: linear-gradient(180deg, #fbf7ef 0, #f5efe4 100%);
  overflow-x: hidden;
}

.app-header {
  position: sticky;
  top: 0;
  min-height: calc(62px + env(safe-area-inset-top));
  padding-top: max(9px, env(safe-area-inset-top));
  background: rgba(251, 247, 239, .9);
  backdrop-filter: blur(18px) saturate(1.2);
}

.brand-seal { width: 38px; height: 38px; border-radius: 13px; font-size: 15px; }
.app-brand strong { font-size: 17px; }
.app-brand small { display: none; }
.avatar-button { width: 40px; height: 40px; border-radius: 14px; }
.app-main { padding-inline: max(16px, env(safe-area-inset-right)); }
.app-view { padding-top: 18px; }
.app-view h1[tabindex="-1"]:focus { outline: none; }

.visual-greeting,
.visual-page-title,
.visual-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.visual-greeting { margin-bottom: 13px; }
.visual-greeting p { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.visual-greeting h1 { margin: 0; font: 650 clamp(25px, 7vw, 32px)/1.05 var(--serif); letter-spacing: -.025em; }
.visual-greeting h1 span { color: var(--red); }
.visual-streak { min-width: 87px; height: 44px; padding: 0 11px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #edc8bd; border-radius: 999px; background: #fff8f4; box-shadow: var(--shadow-sm); }
.visual-streak > span { font-size: 16px; }
.visual-streak strong { font-size: 17px; }
.visual-streak small { color: var(--muted); font-size: 12px; font-weight: 750; }

.visual-resume {
  height: min(66vw, 280px);
  min-height: 238px;
  padding: 0;
  border-radius: 27px;
  background: #18354b;
  box-shadow: 0 18px 42px rgba(23, 50, 77, .2);
}

.visual-resume > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-resume:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 34, .05) 18%, rgba(8, 24, 34, .86) 100%); pointer-events: none; }
.visual-resume-shade { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 48px; }
.visual-resume .card-kicker { color: #f5d78f; font-size: 12px; }
.visual-resume .resume-progress[hidden] { display: none !important; }
.visual-resume h2 { max-width: 75%; margin: 4px 0 10px; color: white; font: 650 clamp(25px, 7vw, 34px)/1.03 var(--serif); text-shadow: 0 2px 18px rgba(0, 0, 0, .24); }
.visual-play-button { width: max-content; min-height: 46px; padding: 0 15px 0 17px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; color: white; background: var(--red); box-shadow: 0 8px 22px rgba(129, 37, 23, .32); text-decoration: none; font-size: 13px; font-weight: 850; }
.visual-play-button svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.visual-hero-stats { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 11px; display: flex; gap: 7px; overflow: hidden; }
.visual-hero-stats span { min-width: 0; padding: 5px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; color: white; background: rgba(13, 35, 49, .68); backdrop-filter: blur(8px); font-size: 12px; font-weight: 750; }

.visual-section { margin-top: 22px; }
.visual-section-head { min-height: 44px; margin-bottom: 9px; }
.visual-section-head h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.visual-section-head > span,
.visual-section-head > button { min-height: 44px; padding: 0; border: 0; display: inline-flex; align-items: center; color: var(--red-dark); background: transparent; font-size: 12px; font-weight: 800; }
.visual-section-head > button { min-width: 44px; justify-content: center; }

.visual-quick-grid { gap: 8px; }
.visual-quick { position: relative; height: 86px; border-radius: 20px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-sm); }
.visual-quick:after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(6, 18, 25, .82)); }
.visual-quick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-quick strong { position: absolute; z-index: 2; left: 5px; right: 5px; bottom: 8px; margin: 0; color: white; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }

.visual-quiz-card { padding: 14px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); box-shadow: var(--shadow-sm); }
.visual-quiz-image { position: relative; width: min(48vw, 190px); aspect-ratio: 1; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #e8f6f7; }
.visual-quiz-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.visual-quiz-image button { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; border: 0; border-radius: 50%; color: white; background: rgba(23, 50, 77, .88); box-shadow: 0 6px 16px rgba(23, 50, 77, .22); font-size: 20px; cursor: pointer; }
.visual-quiz-card > strong { display: block; margin: 7px 0 9px; text-align: center; font: 700 25px/1.2 var(--jp); }
.visual-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.visual-answer-grid button { min-width: 0; min-height: 48px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #f8f3ea; font-size: 12px; font-weight: 800; cursor: pointer; }
.visual-answer-grid button.is-correct { color: white; background: var(--success); border-color: var(--success); }
.visual-answer-grid button.is-wrong { color: white; background: var(--danger); border-color: var(--danger); animation: visual-shake .22s ease; }
.visual-answer-grid button:disabled { opacity: .64; }
.visual-feedback { min-height: 19px; margin: 7px 0 -2px; color: var(--success); text-align: center; font-size: 12px; font-weight: 850; }
@keyframes visual-shake { 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }

.visual-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.visual-plan .plan-item { min-height: 118px; padding: 7px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; border-radius: 20px; text-align: center; overflow: hidden; position: relative; }
.visual-plan .plan-item img { width: 100%; min-height: 0; aspect-ratio: 1.35; border-radius: 14px; object-fit: cover; }
.visual-plan .task-copy strong { font-size: 12px; }
.visual-plan .task-check { position: absolute; top: 6px; right: 6px; width: 31px; height: 31px; border-radius: 50%; color: transparent; background: rgba(255, 255, 255, .9); }
.visual-plan .plan-item.is-done .task-check { color: white; background: var(--success); }
.visual-plan .plan-item.is-done .task-copy strong { text-decoration: none; }
.visual-plan .task-check svg { width: 17px; height: 17px; }
.visual-week .week-chart { height: 104px; }

.visual-page-title { min-height: 52px; margin-bottom: 13px; }
.visual-page-title h1 { margin: 0; font: 650 clamp(29px, 8vw, 39px)/1 var(--serif); letter-spacing: -.03em; }
.visual-page-title > span { color: rgba(220, 90, 59, .17); font: 800 45px/1 var(--jp); }

.learn-page-title { align-items: flex-start; margin-bottom: 17px; }
.learn-page-title .section-kicker { margin-bottom: 5px; }
.learn-page-title h1 { font-size: clamp(27px, 7.5vw, 36px); }
.learn-page-title p:last-child { max-width: 440px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.learn-picker + .learn-picker { margin-top: 19px; }
.learn-picker-head { min-height: 48px; margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.learn-picker-head > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: white; background: var(--red); font-size: 12px; font-weight: 900; }
.learn-picker-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.learn-picker-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.learn-level-switcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.learn-level-switcher button { min-width: 0; min-height: 50px; padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); box-shadow: 0 5px 16px rgba(23, 50, 77, .045); font-size: 13px; font-weight: 900; cursor: pointer; touch-action: manipulation; transition: transform .14s ease, color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.learn-level-switcher button.is-active { color: white; background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 20px rgba(23, 50, 77, .18); }
.learn-level-switcher button:active { transform: scale(.94); }

.learn-subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; view-transition-name: learn-subject-grid; }
.learn-subject-card { min-width: 0; min-height: 99px; padding: 11px; display: grid; grid-template-columns: 39px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease; }
.learn-subject-card:active { transform: scale(.965); }
.learn-subject-card:not(.is-locked):hover { border-color: #cbbca7; box-shadow: 0 10px 25px rgba(23, 50, 77, .1); }
.learn-subject-symbol { width: 39px; height: 39px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 13px; color: var(--red-dark); background: #fff0e9; font: 800 15px/1 var(--jp); }
.learn-subject-card:nth-child(2n) .learn-subject-symbol { color: #356b66; background: #edf6f3; }
.learn-subject-copy { min-width: 0; align-self: end; }
.learn-subject-copy strong, .learn-subject-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-subject-copy strong { font-size: 13px; }
.learn-subject-copy small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.learn-subject-status { align-self: start; margin-top: 5px; color: var(--red-dark); font-size: 12px; font-weight: 850; }
.learn-subject-card.is-locked { color: #7d878d; background: rgba(242, 237, 227, .74); box-shadow: none; cursor: not-allowed; opacity: .72; }
.learn-subject-card.is-locked .learn-subject-status { color: var(--muted); }

body.learn-sheet-open { overflow: hidden; }
.learn-book-sheet { position: fixed; z-index: 90; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.learn-book-sheet[hidden] { display: none !important; }
.learn-sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8, 20, 29, .52); opacity: 0; cursor: pointer; backdrop-filter: blur(2px); transition: opacity .18s ease; }
.learn-sheet-card { position: relative; width: min(100%, 720px); max-height: min(86dvh, 760px); padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border-radius: 25px 25px 0 0; color: var(--ink); background: #fbf7ef; box-shadow: 0 -18px 55px rgba(8, 20, 29, .24); opacity: 0; transform: translateY(24px); transition: transform .2s cubic-bezier(.2, .75, .25, 1), opacity .16s ease; }
.learn-book-sheet.is-open .learn-sheet-backdrop { opacity: 1; }
.learn-book-sheet.is-open .learn-sheet-card { opacity: 1; transform: none; }
.learn-sheet-handle { width: 42px; height: 4px; margin: 1px auto 10px; border-radius: 999px; background: #cfc5b7; }
.learn-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.learn-sheet-head .section-kicker { margin: 0 0 4px; }
.learn-sheet-head h2 { margin: 0; font: 650 26px/1.05 var(--serif); letter-spacing: -.02em; }
.learn-sheet-head > button { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); font-size: 25px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.learn-sheet-lead { margin: 9px 0 13px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.learn-book-list { display: grid; gap: 8px; }
.learn-book-row { min-height: 92px; padding: 12px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.learn-book-row.is-ready { border-color: #d8c8b3; box-shadow: var(--shadow-sm); }
.learn-book-row.is-locked { min-height: 76px; color: #727f86; background: #f0ebe2; opacity: .72; }
.learn-book-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--ink); font: 800 20px/1 var(--jp); }
.learn-book-row.is-ready:nth-child(2n) .learn-book-mark { background: var(--teal); }
.learn-book-row.is-locked .learn-book-mark { color: #7d878d; background: #dfd8cd; }
.learn-book-copy { min-width: 0; }
.learn-book-copy small, .learn-book-copy strong, .learn-book-copy span, .learn-book-copy b { display: block; }
.learn-book-copy small { color: var(--success); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.learn-book-row.is-locked .learn-book-copy small { color: var(--muted); }
.learn-book-copy strong { margin-top: 2px; font-size: 14px; line-height: 1.25; }
.learn-book-copy span { margin-top: 2px; overflow: hidden; color: var(--muted); font: 600 12px/1.35 var(--jp); text-overflow: ellipsis; white-space: nowrap; }
.learn-book-copy b { margin-top: 5px; color: var(--red-dark); font-size: 12px; font-weight: 800; }
.learn-book-actions { min-width: 122px; display: grid; gap: 5px; }
.learn-book-primary, .learn-book-index { min-height: 44px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 850; touch-action: manipulation; transition: transform .14s ease, opacity .14s ease; }
.learn-book-primary { color: white; background: var(--red); box-shadow: 0 7px 17px rgba(220, 90, 59, .2); }
.learn-book-index { min-height: 36px; color: var(--ink); background: #f0eae0; }
.learn-book-primary:active, .learn-book-index:active { transform: scale(.96); }
.learn-book-lock { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: #e3ddd4; font-size: 12px; font-weight: 850; }
[data-learning-link].is-opening { pointer-events: none; opacity: .58; transform: scale(.98); }

::view-transition-old(learn-subject-grid) { animation: learn-grid-out .11s ease both; }
::view-transition-new(learn-subject-grid) { animation: learn-grid-in .17s ease both; }
@keyframes learn-grid-out { to { opacity: 0; transform: translateY(3px); } }
@keyframes learn-grid-in { from { opacity: 0; transform: translateY(5px); } }

.visual-filter { margin-bottom: 10px; }
.visual-course-rail { margin-inline: -16px; padding: 0 16px 6px; display: flex; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.visual-course-rail::-webkit-scrollbar { display: none; }
.visual-course-rail .course-card { min-width: min(78vw, 320px); height: 194px; min-height: 0; padding: 0; display: block; border: 0; border-radius: 25px; overflow: hidden; scroll-snap-align: start; background: var(--ink); box-shadow: var(--shadow-md); position: relative; }
.visual-course-rail .course-card > img { width: 100%; height: 100%; object-fit: cover; }
.visual-course-rail .course-card:after { content: ""; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, rgba(5, 18, 27, .87)); }
.visual-course-overlay { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 13px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 9px; color: white; }
.visual-course-overlay b { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--red); font-size: 14px; }
.visual-course-overlay strong { font: 650 22px/1.05 var(--serif); }
.visual-course-overlay span { color: #e8eef0; font-size: 12px; font-weight: 750; }

.visual-mosaic,
.visual-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.visual-mosaic a,
.visual-mode-grid a { height: 126px; min-height: 0; padding: 0; display: block; border: 0; border-radius: 22px; overflow: hidden; background: var(--ink); position: relative; box-shadow: var(--shadow-sm); }
.visual-mosaic img,
.visual-mode-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.visual-mosaic a:after,
.visual-mode-grid a:after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(5, 18, 27, .82)); }
.visual-mosaic strong,
.visual-mode-grid strong { position: absolute; z-index: 2; left: 12px; bottom: 10px; color: white; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); font-size: 13px; }

.visual-exam-picker { border-radius: 27px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-md); }
.visual-exam-picker > img { width: 100%; height: 165px; display: block; object-fit: cover; }
.visual-exam-content { padding: 14px; color: white; }
.visual-exam-content h2 { margin: 0 0 9px; font-size: 15px; }
.visual-level-pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.visual-level-pills button { min-width: 0; min-height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; color: #e8eef0; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 850; cursor: pointer; }
.visual-level-pills button.is-active { color: white; background: var(--red); border-color: var(--red); }
#visualExamStart { min-height: 48px; margin-top: 9px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 14px; color: var(--ink); background: #f5d78f; text-decoration: none; font-size: 13px; font-weight: 850; }
#visualExamStart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.visual-mode-grid a { height: 112px; }
.recent-exams .empty-card { padding-block: 20px; }

.visual-lookup-hero { padding: 10px; border-radius: 25px; overflow: hidden; background: var(--ink); position: relative; box-shadow: var(--shadow-md); }
.visual-lookup-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.visual-lookup-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 30, 42, .1), rgba(12, 30, 42, .78)); }
.visual-lookup-hero > :not(img) { position: relative; z-index: 2; }
.visual-lookup-hero .lookup-types { background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
.visual-lookup-hero .lookup-types button { color: white; }
.visual-lookup-hero .lookup-types button.is-active { color: var(--ink); background: white; }
.visual-lookup-hero .lookup-form { margin-top: 78px; border: 0; box-shadow: none; }
.visual-lookup-hero .lookup-quota { margin-top: 4px; color: white; opacity: .86; }
.visual-query-chips { justify-content: center; margin-block: 11px; }
.lookup-history button { min-width: 44px; }
.visual-lookup-empty { min-height: 210px; display: grid; place-items: center; align-content: center; }
.visual-lookup-empty img { width: 118px; height: 118px; border-radius: 24px; object-fit: cover; }
.visual-lookup-empty strong { margin-top: 7px; }

.dictionary-card { position: relative; overflow: hidden; }
.dictionary-word strong { font-size: clamp(42px, 14vw, 62px); }
.dictionary-actions { margin-top: 14px; display: flex; gap: 7px; }
.dictionary-actions button,
.dictionary-actions summary { min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: #f7f1e7; list-style: none; font-size: 12px; font-weight: 800; cursor: pointer; }
.dictionary-actions details { display: contents; }
.dictionary-actions summary::-webkit-details-marker { display: none; }
.dictionary-example { display: none; }
.dictionary-card.is-revealed .dictionary-example { display: block; }

.visual-profile { min-height: 135px; padding-top: 40px; background: #fff url("../so-do-ngu-phap/assets/sumi-e-nen-sang.svg") center/cover; position: relative; overflow: hidden; }
.visual-profile:before { content: ""; position: absolute; inset: 0; background: rgba(255, 253, 248, .72); }
.visual-profile > * { position: relative; z-index: 1; }
.visual-profile .account-avatar { width: 62px; height: 62px; border-radius: 21px; }
.visual-stats { padding: 12px; gap: 8px; border: 0; background: transparent; }
.visual-stats div { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid #e8dfd1; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); }
.visual-stats div:nth-child(1) { border-color: #efb4a4; }
.visual-stats div:nth-child(2) { border-color: #aed2cd; }
.visual-stats div:nth-child(3) { border-color: #efd18d; }
.visual-stats strong { font-size: 23px; }
.visual-stats span { margin-top: 3px; }
.visual-settings { margin-top: 12px; }
.visual-account-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; background: transparent; }
.visual-account-links a { min-height: 94px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; border: 1px solid var(--line) !important; border-radius: 18px; background: var(--surface); }
.visual-account-links a > span:first-child { width: 41px; height: 41px; }
.visual-account-links strong { font-size: 12px; }
.switch input { width: 52px; height: 44px; margin: 0; }

@media (min-width: 540px) {
  .visual-resume { height: 310px; }
  .visual-plan .plan-item { min-height: 155px; }
  .visual-course-rail .course-card { min-width: 310px; }
  .learn-subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learn-sheet-card { padding-inline: 22px; }
  .visual-mosaic a, .visual-mode-grid a { height: 160px; }
}

@media (max-width: 480px) {
  .learn-book-row.is-ready { grid-template-columns: 46px minmax(0, 1fr); }
  .learn-book-actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .learn-book-actions > :only-child { grid-column: 1 / -1; }
  .learn-book-row.is-locked { grid-template-columns: 46px minmax(0, 1fr); }
  .learn-book-lock { grid-column: 2; justify-self: start; }
}

@media (max-width: 350px) {
  .app-main { padding-inline: 12px; }
  .visual-course-rail { margin-inline: -12px; padding-inline: 12px; }
  .visual-greeting h1 { font-size: 24px; }
  .visual-streak { min-width: 78px; padding-inline: 8px; }
  .visual-resume { min-height: 226px; }
  .visual-resume h2 { max-width: 84%; }
  .visual-quick { height: 78px; }
  .visual-answer-grid button { padding-inline: 3px; }
  .visual-plan .plan-item { min-height: 106px; padding: 5px; }
  .learn-level-switcher { gap: 4px; }
  .learn-level-switcher button { min-height: 48px; border-radius: 12px; }
  .learn-subject-grid { gap: 6px; }
  .learn-subject-card { min-height: 94px; padding: 9px; grid-template-columns: 35px minmax(0, 1fr); column-gap: 7px; }
  .learn-subject-symbol { width: 35px; height: 35px; border-radius: 11px; font-size: 14px; }
  .learn-sheet-card { padding-inline: 12px; }
  .visual-mosaic a, .visual-mode-grid a { height: 114px; }
  .visual-profile { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .visual-profile .account-avatar { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-resume video { display: none; }
  .visual-resume { background: #17324d url("../anh-art/p/tram-n5.webp") center/cover; }
  .learn-sheet-backdrop, .learn-sheet-card, .learn-level-switcher button, .learn-subject-card, .learn-book-primary, .learn-book-index { transition: none !important; }
}

/* 07/08: ba việc nhỏ dùng số Hán thay ảnh minh hoạ rời rạc — cùng một giọng chữ với site */
.visual-plan .tl-so { width: 100%; aspect-ratio: 1.35; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(27, 58, 107, .06); border: 1px solid var(--line);
  font-family: 'Noto Serif JP', serif; font-size: 30px; line-height: 1; font-weight: 400; color: var(--navy, #1B3A6B); }
.visual-plan .plan-item.is-done .tl-so { background: rgba(47, 122, 99, .10); color: var(--success, #2F7A63); }

/* 07/08: 4 the phan hoc dung ban khac chu - doi tam nhin de chu chinh khong bi nhan che */
#tlPhanHoc .quick-action img{object-position:50% 30%}

/* 09/08/2026: Cinema × Atlas V3. Trạng thái học thật thay cho ảnh nền trang trí. */
#view-today.is-active{display:flex;flex-direction:column}
#view-today>.visual-greeting{order:1}
#view-today>.visual-resume{order:2}
#view-today>.visual-plan-section{order:3}
#view-today>[aria-labelledby="quickTitle"]{order:4}
#view-today>.visual-challenge{order:5}
#view-today>#tl-khoi-dong{order:6}
#view-today>.visual-week{order:7}

.visual-resume{
  height:auto;min-height:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:26px;
  color:var(--ink);background:linear-gradient(155deg,var(--surface),var(--surface-soft));
  box-shadow:var(--shadow-md)
}
.visual-resume::before{content:"";position:absolute;inset:0 0 auto;width:100%;height:4px;background:linear-gradient(90deg,var(--gold),var(--red),var(--teal))}
.visual-resume::after{content:"道";inset:auto -18px -36px auto;width:auto;height:auto;color:color-mix(in srgb,var(--gold) 10%,transparent);background:none;font:700 150px/1 var(--jp);pointer-events:none}
.visual-resume-shade{position:relative;z-index:2;left:auto;right:auto;bottom:auto;padding:24px 20px 16px}
.visual-resume .card-kicker{margin:0;color:var(--red-dark);font-size:12px;font-weight:900;letter-spacing:.14em}
.visual-resume h2{max-width:100%;margin:8px 0 0;color:var(--ink);font:700 clamp(25px,7vw,36px)/1.08 var(--serif);text-shadow:none;text-wrap:balance}
.visual-resume .resume-meta{max-width:590px;margin:10px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.visual-resume .resume-progress[hidden],.resume-journey[hidden]{display:none!important}
.visual-play-button{width:100%;min-height:48px;margin-top:18px;padding:0 18px;justify-content:center;color:#fffaf0;background:var(--action-bg);box-shadow:0 10px 24px color-mix(in srgb,var(--red) 24%,transparent);font-size:14px}
.visual-play-button:hover{background:var(--action-hover)}
.visual-play-button svg{margin-left:3px}
.visual-hero-stats{position:relative;z-index:2;left:auto;right:auto;bottom:auto;padding:0 20px 18px;gap:8px;overflow:visible}
.visual-hero-stats span{padding:0;overflow:visible;color:var(--muted);background:transparent;backdrop-filter:none;font-size:12px}
.visual-hero-stats span+span::before{content:"·";margin-right:8px;color:var(--gold)}

.resume-journey{position:relative;margin:18px 0 0;padding:0;display:grid;gap:0;list-style:none}
.resume-journey::before{content:"";position:absolute;left:20px;top:22px;bottom:22px;width:1px;background:var(--line)}
.resume-journey li{position:relative;z-index:1;min-height:54px;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px}
.resume-journey li>span{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:var(--surface);font-size:12px;font-weight:900}
.resume-journey li.is-done>span{color:#0f2b21;border-color:var(--success);background:var(--success)}
.resume-journey li.is-done>span::after{content:"✓"}.resume-journey li.is-done>span{font-size:0}
.resume-journey li.is-done>span::after{font-size:15px}
.resume-journey li.is-current>span{color:#fffaf0;border-color:var(--action-bg);background:var(--action-bg);box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 12%,transparent)}
.resume-journey li>div{min-width:0;padding:8px 10px;border-radius:12px}
.resume-journey li.is-current>div{background:color-mix(in srgb,var(--red) 7%,transparent)}
.resume-journey b,.resume-journey small{display:block}
.resume-journey b{overflow:hidden;color:var(--ink);font-size:13px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.resume-journey small{margin-top:3px;color:var(--muted);font-size:12px;font-weight:750}
.resume-journey li.is-current small{color:var(--red-dark)}
.resume-journey.is-many{grid-template-columns:1fr 1fr;column-gap:14px}
.resume-journey.is-many::before{display:none}
.resume-journey.is-many li{min-height:50px;grid-template-columns:34px minmax(0,1fr)}
.resume-journey.is-many li>span{width:34px;height:34px}

.visual-plan-section{margin-top:22px}
.visual-plan{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:4px}
.visual-plan::before{content:"";position:absolute;left:16.5%;right:16.5%;top:28px;height:1px;background:var(--line)}
.visual-plan .plan-item{min-height:96px;padding:0 4px;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:8px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.visual-plan .tl-so{position:relative;z-index:2;width:48px;height:48px;aspect-ratio:1;border-radius:50%;background:var(--surface);font-size:20px}
.visual-plan .task-copy strong{font-size:12px;white-space:normal;text-align:center}
.visual-plan .task-check{z-index:3;top:0;right:calc(50% - 27px);width:21px;height:21px;border:2px solid var(--surface);box-shadow:none}
.visual-plan .task-check svg{width:13px;height:13px}
.visual-plan .plan-item.is-done{background:transparent;border:0}

.visual-quick-grid{gap:9px}
.visual-quick{height:auto;min-height:104px;padding:12px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none}
.visual-quick::after{display:none}
.visual-quick>.subject-visual{width:48px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;color:#fffaf0;background:var(--ink)}
.visual-quick>.subject-visual b{font:700 23px/1 var(--jp)}
.visual-quick>.subject-visual i{margin-top:6px;font:500 9px/1 var(--jp);opacity:.78}
.visual-quick>span:last-child{min-width:0}
.visual-quick strong{position:static;display:block;color:var(--ink);text-align:left;text-shadow:none;font-size:13px}
.visual-quick small{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:700}

html[data-mode="dark"] .app-shell{background:linear-gradient(180deg,#0b1322,#0d1727)}
html[data-mode="dark"] .visual-streak{border-color:var(--line);background:var(--surface)}
html[data-mode="dark"] .visual-resume{background:linear-gradient(155deg,#14243a,#0e1b2d)}
html[data-mode="dark"] .resume-journey li.is-done>span{color:#082016}
html[data-mode="dark"] .visual-quick>.subject-visual{background:#081524}
html[data-mode="dark"] .visual-plan .tl-so{color:var(--gold);border-color:var(--line);background:#10223a}
html[data-mode="dark"] .week-chart{background:var(--surface)}
html[data-mode="dark"] .week-bar{background:#40516a}
html[data-mode="dark"] .visual-answer-grid button{background:var(--surface-soft)}
html[data-mode="dark"] .visual-quiz-card,
html[data-mode="dark"] .learn-sheet-card,
html[data-mode="dark"] .visual-profile,
html[data-mode="dark"] .visual-account-links a{background:var(--surface)}
html[data-mode="dark"] .visual-profile::before{background:rgba(11,19,34,.78)}
html[data-mode="dark"] .visual-stats div{border-color:var(--line);background:var(--surface)}
html[data-mode="dark"] .dictionary-actions button,
html[data-mode="dark"] .dictionary-actions summary{background:var(--surface-soft)}
html[data-mode="dark"] .learn-book-index,
html[data-mode="dark"] .learn-book-lock{background:var(--surface-soft)}

@media(max-width:380px){
  .visual-resume-shade{padding:22px 16px 14px}
  .visual-hero-stats{padding-inline:16px}
  .resume-journey.is-many{grid-template-columns:1fr}
  .visual-quick{grid-template-columns:42px minmax(0,1fr);padding:10px}
  .visual-quick>.subject-visual{width:42px;height:58px}
}
.app-brand{min-height:44px}
.avatar-button{width:44px;height:44px}