/* Reading N5 = the Reading N4/N3 design (user 2026-10-17: «style N5 giống N4 hơn 99%»). Generated from
   reading-n4.css with the prefix r4 → r5; change reading-n4.css, then regenerate and keep the N5 additions at the end. */
.r5-app{--r5-ink:#18324b;--r5-muted:#607183;--r5-accent:#895828;--r5-border:#dce5e8;max-width:1280px;margin:0 auto;padding:24px 30px 48px;color:var(--r5-ink);font-family:Arial,"Noto Sans",sans-serif;line-height:1.6}
.r5-app *{box-sizing:border-box}.r5-app [hidden]{display:none!important}.r5-app a{color:var(--r5-accent)}.r5-app button,.r5-app input,.r5-app select{font:inherit}.r5-app button{cursor:pointer}.r5-app :focus-visible{outline:3px solid #df9e22;outline-offset:3px}.r5-app h1,.r5-app h2,.r5-app h3,.r5-app p{margin:0}.r5-app h1{font-size:36px;line-height:1.3;font-weight:700;letter-spacing:-.8px}.r5-app h2{font-size:21px;font-weight:700;line-height:1.4}.r5-app h3{font-size:20px;font-weight:700;line-height:1.45}.r5-app p{line-height:1.7}.r5-app small{font-size:13px}.r5-muted,.r5-footnote{color:var(--r5-muted);font-size:13px}.r5-footnote{margin-top:24px!important}
.r5-account{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12px;color:var(--r5-muted);min-height:24px;margin-bottom:18px}.r5-account a{font-weight:700;text-decoration:underline}.r5-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:1.7px;color:var(--r5-accent);margin-bottom:14px}.r5-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #d0c8c0;border-radius:8px;background:#fff;color:var(--r5-accent)!important;font-weight:700;font-size:14px;text-decoration:none!important}.r5-button:hover{background:#f7f4f0}.r5-button.r5-primary{color:#fff!important;background:var(--r5-accent);border-color:var(--r5-accent)}.r5-button.r5-primary:hover{background:#6c461f}.r5-button:disabled{opacity:.6;cursor:wait}.r5-link-button{background:none;border:0;color:var(--r5-accent);padding:6px 3px;text-decoration:underline;font-size:13px}.r5-hero{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:36px;border:1px solid #e9e3dd;border-radius:16px;background:linear-gradient(110deg,#faf8f5,#f9f6f4)}.r5-hero p{max-width:600px;margin:14px 0 22px;color:#506578;font-size:16px}.r5-stats{display:flex;gap:26px;flex-shrink:0;margin:0;padding:24px;border-left:1px solid #e0d9d3}.r5-stats div{display:flex;flex-direction:column;gap:8px}.r5-stats dt{font-size:12px;color:var(--r5-muted);font-weight:400;white-space:nowrap;order:2}.r5-stats dd{font-size:36px;line-height:1;font-weight:700;color:var(--r5-accent)}
.r5-path{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:24px 0 36px;padding:0 10px}.r5-path div{position:relative;padding-left:36px}.r5-path span{position:absolute;left:0;top:0;color:#a0968c;font-size:12px;font-weight:700}.r5-path strong{font-size:14px}.r5-path p{color:var(--r5-muted);font-size:13px}.r5-list-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:15px}.r5-list-heading p{color:var(--r5-muted);font-size:14px;margin-top:5px}.r5-list-count{color:var(--r5-muted);font-size:13px;white-space:nowrap}.r5-filters{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:12px;margin-bottom:24px}.r5-filters label{display:block;font-size:12px;font-weight:700}.r5-filters select,.r5-filters input{display:block;width:100%;min-height:44px;background:#fff;border:1px solid #c6d3db;border-radius:7px;padding:9px 10px;margin-top:6px;color:var(--r5-ink);font-size:14px;font-weight:400}.r5-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.r5-card{background:#fff;border:1px solid var(--r5-border);border-radius:12px;padding:22px;display:flex;flex-direction:column;box-shadow:0 2px 4px #18324b03}.r5-card:hover{border-color:#c0b2a5}.r5-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:22px}.r5-tag{display:inline-block;font-size:11px;padding:4px 9px;background:#f5f1ec;color:#6e4f30;border-radius:5px;font-weight:700;white-space:nowrap}.r5-kind-medium,.r5-kind-long{background:#eaf0fa;color:#395b92}.r5-kind-information{background:#fff3df;color:#835d21}.r5-state{font-size:11px;color:var(--r5-muted)}.r5-card-number{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#6f8190;margin-bottom:5px}.r5-card h3 a{color:var(--r5-ink)}.r5-card-goal{font-size:13px;color:var(--r5-muted);margin-top:10px!important;flex:1}.r5-card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--r5-muted);margin-top:20px}.r5-card-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid #edf0f3;font-size:12px}.r5-card-bottom>a{font-weight:700;white-space:nowrap}.r5-card-bottom>span{color:var(--r5-muted)}
.r5-breadcrumb{display:flex;gap:10px;font-size:13px;margin:0 0 22px}.r5-lesson-header{margin-bottom:24px}.r5-header-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px;font-size:12px;color:var(--r5-muted)}.r5-lesson-header p{color:var(--r5-muted);font-size:15px;margin-top:12px}.r5-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:12px 0;margin-bottom:16px;border-top:1px solid var(--r5-border);border-bottom:1px solid var(--r5-border);font-size:13px}.r5-toolbar>.r5-to-passage{margin-left:auto}.r5-checkbox{display:flex;gap:8px;align-items:center;margin:0;font-weight:400}.r5-checkbox input{width:18px;height:18px;accent-color:var(--r5-accent)}.r5-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:24px;align-items:stretch}.r5-passage-panel,.r5-questions-panel{background:#fff;border:1px solid var(--r5-border);border-radius:12px;padding:24px;min-width:0}.r5-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.r5-panel-heading h2{font-size:17px}.r5-panel-heading>span{font-size:12px;color:var(--r5-muted)}.r5-japanese{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;line-height:2.25;overflow-wrap:anywhere;line-break:strict;word-break:normal}.r5-passage{color:#1f2933;font-size:19.5px;line-height:2.25;scroll-margin-top:90px}.r5-passage p{font-size:inherit;line-height:inherit;margin:0 0 14px}.r5-passage rt{line-height:1.25}.r5-japanese ruby{ruby-align:center}.r5-japanese rt{font-size:.5em;font-weight:400;letter-spacing:0}.r5-hide-ruby rt{visibility:hidden}.r5-passage table{width:100%;border-collapse:collapse;font-size:16px;margin:15px 0;table-layout:fixed}.r5-passage caption{caption-side:top;color:var(--r5-ink);font-weight:700;font-size:16px;padding:8px 0}.r5-passage td,.r5-passage th{padding:9px 8px;border:1px solid #cbdadf;vertical-align:top;overflow-wrap:anywhere}.r5-passage th{background:#f7f4f2}.r5-instruction{color:var(--r5-muted);font-size:13px;margin-bottom:20px!important}.r5-question{border:0;border-top:1px solid var(--r5-border);padding:22px 0 0;margin:0 0 26px;min-width:0;scroll-margin-top:90px}.r5-question legend{border:0;color:var(--r5-ink);margin:0 0 15px;padding:0;width:100%;font-size:17px;font-weight:700;line-height:2.2;float:none}.r5-question-number{display:block;font-size:11px;letter-spacing:.7px;color:var(--r5-accent);line-height:1.5;margin:0 0 12px}.r5-choices{display:grid;gap:10px}.r5-choice{position:relative;display:flex;align-items:center;gap:10px;padding:12px;min-height:52px;background:#fff;border:1px solid #d5dfe4;border-radius:8px;margin:0;font-size:16px;font-weight:400;cursor:pointer;line-height:2}.r5-choice input{width:17px;height:17px;flex:none;margin:0;accent-color:var(--r5-accent)}.r5-choice-number{font-size:12px;color:var(--r5-muted);flex:none}.r5-choice:has(input:checked){background:#f8f6f3;border-color:var(--r5-accent)}.r5-choice:has(input:disabled){cursor:default}.r5-choice.is-correct,.r5-choice.is-correct:has(input:checked){background:#eef8f0;border-color:#3c8760}.r5-choice.is-wrong,.r5-choice.is-wrong:has(input:checked){background:#fff1ed;border-color:#bd563e}.r5-choice-feedback{font-size:11px;line-height:1.5;color:#2e6947;margin-left:auto;white-space:nowrap}.r5-choice.is-wrong .r5-choice-feedback{color:#9d3f2b}.r5-explanation{margin-top:18px;padding:18px;background:#faf7f5;border-radius:9px;font-size:14px}.r5-explanation h3{font-size:15px;margin-bottom:10px}.r5-explanation blockquote{padding:12px 14px;margin:10px 0 14px;border-left:3px solid #9f7f5f;background:#fff;color:var(--r5-ink);font-size:16px;line-height:1.9}.r5-explanation details{margin-top:12px}.r5-explanation summary,.r5-study summary{cursor:pointer;font-weight:700;padding:10px 0}.r5-explanation ul{padding-left:20px;margin:8px 0}.r5-explanation li{margin:8px 0}.r5-study{margin-top:22px;border-top:1px solid var(--r5-border);font-size:14px}.r5-study details{border-bottom:1px solid #edf0f3;padding:8px 0}.r5-study p{white-space:pre-line;margin:6px 0 14px}.r5-study dt{margin-top:12px;font-size:15px}.r5-study dd{font-size:13px;color:var(--r5-muted);margin:3px 0 10px}
.r5-submit-bar{display:flex;align-items:center;gap:15px;justify-content:space-between}.r5-submit-bar>span{font-size:11px;color:var(--r5-muted)}.r5-result{padding:24px;background:#f8f5f2;border:1px solid #e4dcd3;border-radius:10px;margin-top:24px;scroll-margin-top:85px}.r5-result h2{font-size:27px;margin-bottom:10px}.r5-result p{font-size:14px}.r5-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.r5-notice{padding:14px 18px;border-radius:8px;border:1px solid #e6ddd3;background:#f6f3f0;margin:12px 0 20px!important;font-size:14px}.r5-notice p{margin-bottom:10px}.r5-warning{background:#fff8e8;border-color:#e7cb84;color:#6e5013}.r5-navigation{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin-top:32px;padding-top:24px;border-top:1px solid var(--r5-border);font-size:14px;align-items:start}.r5-navigation>div:last-child{text-align:right}.r5-navigation small{display:block;color:var(--r5-muted);margin-bottom:5px}.r5-all-lessons{font-size:12px}.r5-history{margin-top:26px;padding:22px;background:#fff;border:1px solid var(--r5-border);border-radius:10px}.r5-history h2{font-size:16px;margin-bottom:12px}.r5-history ol{padding-left:22px;margin:0;font-size:13px;color:var(--r5-muted)}.r5-history li{padding:5px 0}.r5-empty-page{padding:60px 24px;background:#fff;border-radius:12px}.r5-empty-page p{margin:16px 0 24px}
.r5-lesson-page .r5-app{max-width:none}
/* Mixed sets: previous / next sets as cards below the lesson, like the Grammar N4 lesson lists. */
.r5-related-sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;min-width:0}
.r5-related{min-width:0;background:#fff;padding:18px 20px 20px;border:1px solid #ece3da;border-radius:14px;box-shadow:0 1px 2px rgba(80,50,30,.04),0 6px 18px rgba(80,50,30,.05)}
.r5-related:only-child{grid-column:1/-1}.r5-related:only-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.r5-app .r5-related h2{border-left:4px solid #c50018;padding:1px 0 1px 11px;margin:0 0 14px;font:600 18px/1.3 "Segoe UI",Arial,sans-serif;color:#1f2552}
.r5-related ul{display:grid;gap:8px;list-style:none;padding:0;margin:0}.r5-related li{padding:0;margin:0}
.r5-app .r5-related a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;align-items:center;min-height:58px;padding:10px 12px 10px 14px;border:1px solid #e9e6e4;border-radius:10px;background:#fff;color:#173447;text-decoration:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.r5-app .r5-related a::after{content:"\203A";grid-column:3;grid-row:1/span 2;font-size:24px;line-height:1;color:#a3b1b5}
.r5-app .r5-related a:hover,.r5-app .r5-related a:focus-visible{background:#faf9f7;border-color:#bda996;box-shadow:0 2px 10px #173b2d12;color:#173447}.r5-app .r5-related a:hover::after{color:#915d2a}
.r5-related-label,.r5-related-title{grid-column:1;min-width:0}.r5-related-label{font-size:13px;font-weight:700;color:#915d2a}.r5-related-title{font-size:15px;line-height:1.45;color:#173447;overflow-wrap:anywhere}
.r5-related-state{grid-column:2;grid-row:1/span 2;padding:3px 10px;border-radius:999px;background:#f5f1ed;font-size:12px;line-height:1.4;white-space:nowrap;color:#84674a}.r5-related-state:empty{display:none}
.r5-related-state.is-done{background:#e6f4ec;color:#176a49;font-weight:600}.r5-related-state.is-draft{background:#fff3dd;color:#8a5300}
@media(max-width:900px){.r5-related{padding:16px}}
@media(max-width:700px){.r5-related-sets{grid-template-columns:minmax(0,1fr);gap:10px}.r5-related:only-child ul{grid-template-columns:minmax(0,1fr)}.r5-related{padding:14px 12px}.r5-app .r5-related a{min-height:54px;padding:9px 10px 9px 12px}}
.r5-ad{margin:24px 0;min-width:0;overflow:hidden}
@media(max-width:1100px){.r5-app{padding:20px}.r5-hero{padding:28px;gap:20px}.r5-hero h1{font-size:30px}.r5-stats{padding:16px;gap:18px}.r5-stats dd{font-size:29px}.r5-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.r5-workspace{gap:16px}.r5-passage-panel,.r5-questions-panel{padding:20px}}
@media(max-width:767px){.r5-app{padding:15px 14px 35px}.r5-app h1{font-size:28px}.r5-hero{display:block;padding:24px 20px}.r5-hero p{font-size:14px}.r5-stats{justify-content:space-between;border-left:0;border-top:1px solid #e0d9d3;margin-top:25px;padding:20px 0 0}.r5-path{gap:12px;padding:0;margin:22px 0 28px}.r5-path div{padding-left:0}.r5-path span{position:static;display:block;margin-bottom:6px}.r5-path strong{font-size:12px}.r5-path p{font-size:11px}.r5-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.r5-workspace{display:block}.r5-passage-panel{margin-bottom:20px}.r5-passage-panel,.r5-questions-panel{padding:20px 17px}.r5-passage table{font-size:14px}.r5-passage td,.r5-passage th{padding:8px 5px}.r5-question legend{font-size:17px}.r5-toolbar{font-size:12px;gap:10px}.r5-toolbar>.r5-to-passage{font-size:12px}.r5-choice{font-size:16px}.r5-navigation{grid-template-columns:1fr 1fr;gap:16px}.r5-all-lessons{grid-row:2;grid-column:1/-1;text-align:center}.r5-panel-heading{gap:8px}.r5-panel-heading>span{font-size:11px}.r5-submit-bar{flex-wrap:wrap}.r5-submit-bar>span{width:100%}.r5-submit-bar .r5-button{width:100%}.r5-card{padding:20px}.r5-result-actions>.r5-button{width:100%}}
@media(max-width:480px){.r5-catalog{grid-template-columns:1fr}.r5-card-top{margin-bottom:16px}.r5-list-heading h2{font-size:20px}.r5-choice{gap:8px;padding:10px}.r5-choice-feedback{white-space:normal;max-width:52px}.r5-passage caption{font-size:14px}.r5-account{font-size:11px}}

/* Evidence is revealed only after grading; ruby annotations keep their original layout. */
.r5-evidence{background:#fff0a8;color:inherit;border-bottom:2px solid #a37300;scroll-margin-top:190px;padding:0}
.r5-evidence:focus{outline:2px solid #966d00;outline-offset:3px}
.r5-skill-tag,.r5-error-skill{font-size:13px;margin:10px 0!important}
.r5-skill-tag{color:#74502c}.r5-error-skill{color:#855020}
.r5-skill-feedback{margin-top:22px;border-top:1px solid var(--r5-border);padding-top:18px}
.r5-skill-feedback h3{font-size:18px;margin-bottom:10px}
.r5-skill-link{display:block;border:1px solid #d6cbc0;border-radius:7px;padding:10px 13px;margin-top:9px;background:#fff;line-height:1.5}
.r5-save-status{font-size:12px;color:var(--r5-muted);margin:0!important;padding:0 0 8px;line-height:1.5}

/* Group reading lessons in rows, using the same hierarchy as Grammar N4. */
.r5-kind-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.r5-kind-picker.r5-has-mixed{grid-template-columns:repeat(4,minmax(0,1fr))}
.r5-kind-picker button{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;min-height:88px;padding:16px;border:1px solid #ded9d4;border-radius:10px;background:#fff;color:var(--r5-ink);text-align:left;line-height:1.4}
.r5-kind-picker strong{font-size:15px}.r5-kind-picker span{font-size:13px;color:var(--r5-muted)}
.r5-kind-picker button:hover{border-color:var(--r5-accent);background:#faf8f6}
.r5-kind-picker [aria-pressed="true"]{border:2px solid var(--r5-accent);padding:15px;background:#f7f4f1;color:#744b22}
.r5-kind-instruction{font-size:14px;padding:12px 15px;border-left:3px solid #beab98;background:#f7f4f1;margin-bottom:18px!important}
.r5-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);margin-bottom:12px}
.r5-filters>label{min-width:0}
.r5-catalog-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px;color:var(--r5-muted);font-size:13px}
.r5-catalog-summary button{flex-shrink:0}
@media(max-width:600px){
    .r5-kind-picker,.r5-kind-picker.r5-has-mixed{grid-template-columns:minmax(0,1fr);gap:8px}
    .r5-kind-picker button{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:14px}
    .r5-kind-picker [aria-pressed="true"]{padding:13px}
    .r5-kind-picker span{white-space:nowrap}
    .r5-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
    .r5-filters label:last-child{grid-column:1/-1}
    .r5-catalog-summary{font-size:12px}
}
.r5-app .r5-catalog{display:block}
.r5-group+.r5-group{margin-top:34px}
.r5-group-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.r5-group-heading h2{scroll-margin-top:85px}
.r5-group-heading>span{color:var(--r5-muted);font-size:13px;white-space:nowrap}
.r5-group-lessons{display:grid;gap:12px}
.r5-app .r5-card{display:grid;grid-template-columns:minmax(0,1fr) 175px 170px;gap:22px;align-items:center;padding:22px;border-radius:13px;box-shadow:none}
.r5-card-content{min-width:0}
.r5-app .r5-card h3{font-size:19px}
.r5-app .r5-card h3 a{color:var(--r5-accent)}
.r5-app .r5-card-goal{margin-top:7px!important}
.r5-app .r5-card-meta{margin-top:9px;font-size:12px}
.r5-app .r5-card-top{justify-content:flex-start;flex-wrap:wrap;gap:7px 10px;margin:0}
.r5-app .r5-card-bottom{align-self:stretch;flex-direction:column;align-items:flex-end;justify-content:center;border-top:0;border-left:1px solid #edf0f3;margin:0;padding:0 0 0 18px;gap:5px;text-align:right}
.r5-card[data-state="done"] .r5-state{color:var(--r5-accent)}
.r5-card[data-state="draft"] .r5-state{color:#835d21}
.r5-stats{flex-wrap:wrap}
.r5-mixed-note{font-size:13px;color:var(--r5-muted);margin:12px 0!important}
.r5-kind-mixed{background:#edf3fc;color:#345782}
.r5-passage-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;scroll-margin-top:85px}
.r5-passage-links button{padding:7px 12px;border:1px solid var(--r5-border);border-radius:7px;background:#fff;color:var(--r5-accent);font-size:13px;line-height:1.5}.r5-passage-links button:hover{background:#f7f4f0}
.r5-workspace.r5-mixed-workspace{display:block}
.r5-mixed-workspace>.r5-questions-panel{border:0;border-radius:0;padding:0;background:none}
.r5-mixed-passage{margin-bottom:24px;padding:24px;background:#fff;border:1px solid var(--r5-border);border-radius:12px}
.r5-mixed-passage-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--r5-border);padding-bottom:14px;margin-bottom:20px}
.r5-mixed-passage-heading h3{font-size:18px}.r5-mixed-passage-heading>span{font-size:13px;color:var(--r5-muted);white-space:nowrap}
.r5-mixed-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.r5-mixed-columns>.r5-passage{min-width:0}
.r5-mixed-questions{min-width:0;border-top:1px solid var(--r5-border);padding-top:20px}.r5-mixed-questions .r5-question:first-child{border-top:0;padding-top:0}.r5-mixed-questions .r5-question:last-child{margin-bottom:0}
.r5-type-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.r5-type-scores>div{display:flex;flex-direction:column;gap:6px;padding:15px;border:1px solid var(--r5-border);border-radius:9px;background:#fff}
.r5-type-scores strong{font-size:14px}.r5-type-scores span{font-size:13px;color:var(--r5-muted)}
.r5-study #r5-translation h3{font-size:16px;margin:16px 0 8px}
@media(min-width:601px) and (max-width:850px){.r5-kind-picker.r5-has-mixed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.r5-mixed-passage{padding:18px}}
@media(max-width:480px){.r5-type-scores{grid-template-columns:minmax(0,1fr)}.r5-mixed-passage-heading h3{font-size:16px}}
@media(max-width:850px){
    .r5-app .r5-card{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:18px}
    .r5-card-content{grid-column:1/-1}
    .r5-app .r5-card h3{font-size:18px}
    .r5-app .r5-card-bottom{border:0;padding:0;max-width:165px}
}
@media(max-width:380px){
    .r5-filters{grid-template-columns:minmax(0,1fr)}
    .r5-app .r5-card{grid-template-columns:minmax(0,1fr)}
    .r5-app .r5-card-bottom{align-items:flex-start;text-align:left;max-width:none}
}

/* Match the Grammar N4 passage size on narrow screens. */
@media(max-width:700px){.r5-passage{font-size:18px}}

/* Wide source notices retain readable cells and scroll inside the passage on phones. */
.r5-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}.r5-table-scroll table{min-width:480px;margin:0;table-layout:auto}.r5-table-scroll:focus{outline:2px solid var(--r5-accent)}.r5-question-translation{color:var(--r5-muted);font-size:13px;margin-bottom:14px!important}.r5-passage h3{font-size:21px;line-height:1.8;margin:12px 0 20px}.r5-passage h4{font-size:18px;line-height:1.8;margin:20px 0 10px}.r5-passage li{margin:8px 0}

/* Match the question tools used by N4 vocabulary and grammar. */
#main-container:has(.r5-quick-tools){overflow-x:clip;overflow-y:visible}
.r5-quick-tools{position:sticky;top:60px;z-index:20;background:#fff;border-bottom:1px solid var(--r5-border);box-shadow:0 3px 5px #00000008;margin-bottom:18px;padding:0 12px}
.r5-progress-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.r5-progress-count{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.r5-progress-count progress{width:140px;height:6px;border:0;border-radius:6px;overflow:hidden;appearance:none;background:#ebe7e3;accent-color:var(--r5-accent)}
.r5-progress-count progress::-webkit-progress-bar{background:#ebe7e3}.r5-progress-count progress::-webkit-progress-value{background:var(--r5-accent)}.r5-progress-count progress::-moz-progress-bar{background:var(--r5-accent)}
.r5-quick-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.r5-quick-actions .r5-button{font-size:12px;min-height:40px;padding:6px 10px;border-radius:3px;color:var(--r5-ink)!important}
.r5-quick-actions #r5-quick-submit{background:#d9534f;border-color:#d43f3a;color:#fff!important}.r5-quick-actions #r5-quick-submit:hover{background:#c9302c;border-color:#ac2925}
.r5-question-jump{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d9d5d1;box-shadow:0 8px 20px #0002;padding:12px;max-height:min(55vh,340px);overflow-y:auto}
.r5-question-jump p{font-size:12px;color:#5b6f7c;margin:0 0 9px}
.r5-question-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(43px,1fr));gap:6px}
.r5-jump-button{display:flex;justify-content:center;align-items:center;gap:3px;min-height:42px;padding:4px;background:#fff;border:1px solid #c8d2d5;border-radius:3px;color:#173447;font-size:13px}
.r5-jump-button.is-answered{background:#edf3fb;border-color:#709acd}.r5-jump-button.is-correct{background:#ecf7f0;border-color:#72b995;color:#176a49}.r5-jump-button.is-wrong{background:#fff0ed;border-color:#da9f8c;color:#943820}
.r5-question,.r5-passage,.r5-passage-links,.r5-mixed-passage,#r5-unanswered{scroll-margin-top:150px}
@media(max-width:700px){
 .r5-progress-strip{flex-wrap:wrap;gap:6px;padding:7px 0}
 .r5-progress-count{width:100%;justify-content:space-between;gap:9px;font-size:12px}
 .r5-progress-count progress{flex:1;max-width:150px}
 .r5-quick-actions{width:100%}.r5-quick-actions .r5-button{flex:1 1 auto;padding:5px 6px}
 .r5-question,.r5-passage,.r5-passage-links,.r5-mixed-passage,#r5-unanswered{scroll-margin-top:180px}
}
/* A single type selector per viewport: buttons on desktop, a compact select on phones. */
@media(min-width:701px){.r5-filters .r5-kind-select{display:none}.r5-filters{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
@media(max-width:700px){.r5-kind-picker,.r5-kind-picker.r5-has-mixed{display:none}.r5-filters .r5-kind-select{display:flex}.r5-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.r5-filters label:last-child{grid-column:1/-1}}
@media(max-width:380px){.r5-filters{grid-template-columns:minmax(0,1fr)}}
/* Optional timed check: quiet entry point in the toolbar, countdown in the sticky progress strip. */
.r5-exam-start{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 12px;border:1px solid #d0c8c0;border-radius:8px;background:#fff;color:var(--r5-accent);font-weight:700;font-size:13px;line-height:1.2}
.r5-exam-start:hover{background:#f7f4f0}.r5-exam-start:disabled{opacity:.6;cursor:default}
.r5-exam-running{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-weight:700}
.r5-exam-timer{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#f3eeea;color:var(--r5-accent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.r5-exam-timer.is-low{background:#fff3dc;color:#8a5300}.r5-exam-timer.is-over{background:#fdecea;color:#b42318}
.r5-result .r5-result-exam{font-weight:700;color:var(--r5-ink);margin-bottom:6px}
.r5-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Two-column layouts keep the passage in view; --r5-strip-h is the sticky strip height measured by reading-n4.js. */
@media(min-width:768px){.r5-workspace:not(.r5-mixed-workspace)>.r5-passage-panel{position:sticky;top:calc(74px + var(--r5-strip-h,85px));align-self:start;max-height:calc(100vh - 90px - var(--r5-strip-h,85px));overflow-y:auto}.r5-quick-actions .r5-passage-jump{display:none}}
@media(min-width:1200px){.r5-mixed-columns{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.r5-mixed-columns>.r5-passage{position:sticky;top:calc(74px + var(--r5-strip-h,85px));max-height:calc(100vh - 90px - var(--r5-strip-h,85px));overflow-y:auto}.r5-mixed-questions{border-top:0;padding-top:0}}
.r5-daily-cta a{display:inline-block;margin-top:14px;font-weight:700}
/* Up to four strip buttons share one row down to 320px; content-sized so "Câu chưa làm" does not wrap. */
@media(max-width:360px){.r5-quick-actions{gap:4px}.r5-quick-actions .r5-button{padding:5px 4px;font-size:11.5px}}
.r5-imported{color:var(--r5-accent);font-weight:700}
/* N4 sections share the main site frame (vnjpclub.com: 1200px content, centred): vocabulary, grammar, reading and listening, list and lesson pages. */
.r5-app.r5-app,.r5-lesson-page .r5-app{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:clamp(12px,2.2vw,20px);padding-right:clamp(12px,2.2vw,20px)}
/* White page background like the main site, on N4 pages only. */
#main-container:has(#r5-app),body:has(#r5-app){background:#f9f5f2}
/* Japanese text set like the Minna reading lessons: question 1.15rem, choices 1.12rem, neutral ink. */
.r5-question legend>.r5-japanese{display:block;font-size:18.4px;font-weight:700;line-height:2.1;color:#1f2933}
.r5-choice>.r5-japanese{font-size:17.9px;line-height:1.9;color:#1f2933}
/* Text written with spaces between phrases (Minna 初級I style) breaks lines only at those spaces. */
.r5-spaced.r5-japanese,.r5-spaced .r5-japanese{word-break:keep-all;overflow-wrap:anywhere;word-spacing:.22em}
/* No one-character last lines where the browser supports it. */
.r5-passage,.r5-question legend>.r5-japanese,.r5-choice>.r5-japanese{text-wrap:pretty}
/* ===== Shared N4 page design (2026-10-15): cream page, serif titles with the red bar, hero art, white cards, red accents. ===== */
.r5-app.r5-app{--d-red:#cd2f39;--d-brown:#6f4b31;--d-brown-2:#9a6243;--d-navy:#1f2552;--d-ink:#2b3446;--d-line:#ece3da;--d-peach:#fcf4eb;--d-peach-line:#f0d9bd;--d-shadow:0 1px 2px rgba(80,50,30,.04),0 6px 18px rgba(80,50,30,.05)}
.r5-app .r5-breadcrumb{align-items:center;flex-wrap:wrap;gap:6px 9px;color:var(--d-ink)}
.r5-app .r5-breadcrumb a{color:var(--d-ink)}
.r5-app .r5-hero{position:relative;display:block;min-height:240px;margin:0 0 4px;padding:6px 0 22px;background:none;border:0;border-radius:0}
.r5-app .r5-hero>:not(.n4ui-hero-art){position:relative;z-index:1;max-width:58%}
.r5-app .r5-eyebrow{color:var(--d-brown-2)}
.r5-app .r5-hero h1,.r5-app .r5-lesson-header h1{margin:8px 0 10px;padding:2px 0 2px 18px;border-left:7px solid var(--d-red);font:600 36px/1.25 "Noto Serif","Times New Roman",Georgia,serif;letter-spacing:0;color:#151515}
.r5-app .r5-hero p{color:#5c6672}
.r5-app .r5-stats{display:flex;gap:10px 28px;margin:6px 0 0;padding:0;border:0}
.r5-app .r5-stats div{display:flex;flex-direction:row-reverse;align-items:baseline;gap:6px}
.r5-app .r5-stats dt{font-size:13px;color:#7b8794}
.r5-app .r5-stats dd{font:600 24px/1.2 "Noto Serif","Times New Roman",serif;color:var(--d-brown)}
.r5-app .r5-lesson-header{position:relative;min-height:190px;padding:4px 0 10px}
.r5-app .r5-lesson-header>:not(.n4ui-hero-art){position:relative;z-index:1;max-width:58%}
.r5-app .r5-lesson-header h1{font-size:34px}
.r5-app .r5-button.r5-primary{background:#d04f4d;border-color:#c64543;color:#fff!important}
.r5-app .r5-button.r5-primary:hover{background:#bb3f3d}
.r5-app .r5-path span{color:var(--d-red)}
.r5-app .r5-list-heading h2,.r5-app .r5-panel-heading h2{display:flex;align-items:center;gap:10px;color:var(--d-navy)}
.r5-app .r5-list-heading h2{font-size:22px}
.r5-app .r5-list-heading .n4ui-icon,.r5-app .r5-panel-heading .n4ui-icon{width:24px;height:24px;color:var(--d-red);fill:#fbe3e1}
.r5-app .r5-panel-heading .n4ui-icon-pencil{fill:none}
.r5-app .r5-kind-picker button{background:#fff;border:1px solid var(--d-line);border-radius:12px;box-shadow:var(--d-shadow)}
.r5-app .r5-kind-picker [aria-pressed="true"]{background:#fff6f1;border:2px solid var(--d-red);box-shadow:none}
.r5-app .r5-kind-picker [aria-pressed="true"] strong{color:#a7262f}
.r5-app .r5-kind-instruction{background:#fff;border:1px solid var(--d-line);border-left:4px solid var(--d-red);border-radius:10px}
.r5-app .r5-group-heading h2{display:flex;align-items:center;gap:10px;color:var(--d-navy)}
.r5-app .r5-group-heading h2::before{content:"";width:6px;height:22px;border-radius:2px;background:var(--d-red)}
.r5-app .r5-card{border:1px solid var(--d-line);border-radius:14px;box-shadow:var(--d-shadow)}
.r5-app .r5-card:hover{border-color:#e6b1ab}
.r5-app .r5-card h3 a,.r5-app .r5-card h2 a{color:var(--d-navy)}
.r5-app .r5-passage-panel,.r5-app .r5-questions-panel,.r5-app .r5-mixed-passage{border-color:var(--d-line);border-radius:14px;box-shadow:var(--d-shadow)}
.r5-app .r5-quick-tools{border-radius:12px;border:1px solid var(--d-line);box-shadow:var(--d-shadow)}
.r5-app .r5-progress-count progress{accent-color:#be5042}
.r5-app .r5-progress-count progress::-webkit-progress-value{background:#be5042}
@media(max-width:760px){
 .r5-app .r5-hero>:not(.n4ui-hero-art),.r5-app .r5-lesson-header>:not(.n4ui-hero-art){max-width:none}
 .r5-app .r5-hero,.r5-app .r5-lesson-header{min-height:0}
 .r5-app .r5-hero h1,.r5-app .r5-lesson-header h1{padding-left:12px;border-left-width:5px;font-size:26px}
}
/* ===== Options in the Minna «Kiểm tra» style (2026-10-15); one column (long options beside the passage). ===== */
.r5-app.r5-app{--q-ink:#1f2933;--q-muted:#5b6776;--q-line:#e1e7ef;--q-line-strong:#c9d4e0;--q-soft:#f5f8fb;--q-tint:#eef4fb;--q-accent:#16698f;--q-accent-soft:#e7f2f8;--q-glow:rgba(22,105,143,.16);--q-ok:#15803d;--q-ok-soft:#e8f6ed;--q-ng:#c62828;--q-ng-soft:#fdeeee;--q-shadow:0 1px 2px rgba(15,30,50,.05),0 4px 14px rgba(15,30,50,.05)}
.r5-app .r5-choice{position:relative;gap:10px;min-height:52px;padding:9px 14px;background:#fff;border:1.5px solid var(--q-line-strong);border-radius:12px}
.r5-app .r5-choice:hover{border-color:var(--q-accent);background:var(--q-tint)}
.r5-app .r5-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.r5-app .r5-choice:has(input:focus-visible){outline:3px solid var(--q-glow);outline-offset:2px}
.r5-app .r5-choice-number{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:var(--q-soft);color:var(--q-muted);font:800 13px/1 Arial,sans-serif}
.r5-app .r5-choice:has(input:checked){border-color:var(--q-accent);background:var(--q-accent-soft);box-shadow:0 0 0 2px var(--q-glow)}
.r5-app .r5-choice:has(input:checked) .r5-choice-number{background:var(--q-accent);color:#fff}
.r5-app .r5-choice.is-correct,.r5-app .r5-choice.is-correct:has(input:checked){border-color:var(--q-ok);background:var(--q-ok-soft);box-shadow:none}
.r5-app .r5-choice.is-correct .r5-choice-number,.r5-app .r5-choice.is-correct:has(input:checked) .r5-choice-number{background:var(--q-ok);color:#fff}
.r5-app .r5-choice.is-wrong,.r5-app .r5-choice.is-wrong:has(input:checked){border-color:var(--q-ng);background:var(--q-ng-soft);box-shadow:none}
.r5-app .r5-choice.is-wrong .r5-choice-number,.r5-app .r5-choice.is-wrong:has(input:checked) .r5-choice-number{background:var(--q-ng);color:#fff}
/* N3: four reading kinds + mixed sets = five cards */
@media(min-width:851px){.r5-kind-picker.r5-has-mixed:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:601px) and (max-width:850px){.r5-kind-picker.r5-has-mixed:has(>:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Lesson page < 1200px: passage above the questions, one column (user 2026-10-17) */
@media(max-width:1199px){.r5-workspace{display:block}.r5-workspace:not(.r5-mixed-workspace)>.r5-passage-panel{position:static;max-height:none;overflow:visible;margin-bottom:20px}.r5-quick-actions .r5-passage-jump{display:inline-flex}}

/* Passage and question cards line up with the lesson navigation cards below them: equal columns, 14px gap (user 2026-10-17). */
.r5-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:1199px){.r5-workspace:not(.r5-mixed-workspace)>.r5-passage-panel{margin-bottom:14px}}
/* Thin, see-through scrollbar for the pinned passage (user 2026-10-17). Chromium/Edge use the ::-webkit-scrollbar rules;
   the standard properties are set only where those are not supported, since they would override them. */
.r5-workspace>.r5-passage-panel::-webkit-scrollbar,.r5-mixed-columns>.r5-passage::-webkit-scrollbar{width:6px;height:6px}
.r5-workspace>.r5-passage-panel::-webkit-scrollbar-track,.r5-mixed-columns>.r5-passage::-webkit-scrollbar-track{background:transparent}
.r5-workspace>.r5-passage-panel::-webkit-scrollbar-thumb,.r5-mixed-columns>.r5-passage::-webkit-scrollbar-thumb{background:rgba(120,96,78,.28);border-radius:999px}
.r5-workspace>.r5-passage-panel:hover::-webkit-scrollbar-thumb,.r5-mixed-columns>.r5-passage:hover::-webkit-scrollbar-thumb{background:rgba(120,96,78,.48)}
.r5-workspace>.r5-passage-panel::-webkit-scrollbar-button,.r5-mixed-columns>.r5-passage::-webkit-scrollbar-button{display:none;width:0;height:0}
@supports not selector(::-webkit-scrollbar){.r5-workspace>.r5-passage-panel,.r5-mixed-columns>.r5-passage{scrollbar-width:thin;scrollbar-color:rgba(120,96,78,.35) transparent}}
/* ===== N5 additions ===== */
.r5-exam-start [data-exam-label]{pointer-events:none}