/* Shared N4 page design (2026-10-15), used by reading and listening pages: cream page, breadcrumb icons,
   hero illustration with motto, heading icons. Section files add their own card and colour rules. */
#main-container:has(#r4-app),body:has(#r4-app),#main-container:has(#l4-app),body:has(#l4-app){background:#f9f5f2}
.n4ui-icon{flex:none;width:20px;height:20px;vertical-align:-4px}
.n4ui-crumb-home{display:inline-flex;align-items:center;color:#9a6243!important}
.n4ui-crumb-home .n4ui-icon{width:18px;height:18px}
.n4ui-crumb-sep{color:#b3a79c;font-size:15px;line-height:1}
.n4ui-hero-art{position:absolute;top:-44px;right:-10px;width:min(42%,480px);pointer-events:none;user-select:none;z-index:0}
.n4ui-hero-art img{display:block;width:100%;height:auto}
.n4ui-hero-motto{position:absolute;top:52%;right:1%;margin:0;color:#3b3734}
.n4ui-hero-motto span{display:block;font:600 21px/1.6 "Klee One","Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em}
.n4ui-hero-motto em{display:block;margin-top:2px;font:italic 12.5px/1.4 Georgia,"Times New Roman",serif;color:#716b66}
@media(max-width:1000px){.n4ui-hero-art{width:44%;top:-20px}.n4ui-hero-motto span{font-size:18px}}
@media(max-width:760px){.n4ui-hero-art{display:none}}
/* Lesson navigation of every N5–N3 practice page (2026-10-17), same look as the N4/N3 vocabulary and grammar lessons:
   «Bài trước · list · Bài sau» cards, then the earlier and later lessons with their progress. */
.n4ui-lesson-links{--n4ui-line:#ece3da;--n4ui-shadow:0 1px 2px rgba(80,50,30,.04),0 6px 18px rgba(80,50,30,.05);clear:both;margin:22px 0 0;color:#2b3446;font:14px/1.5 "Segoe UI",Arial,sans-serif;text-align:left}
.n4ui-lesson-links .n4ui-lesson-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch;margin:0;padding:0;border:0}
.n4ui-lesson-links .n4ui-lesson-nav>a{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 18px;background:#fff;border:1px solid var(--n4ui-line);border-radius:12px;box-shadow:var(--n4ui-shadow);color:#2b3446;text-align:left;text-decoration:none}
.n4ui-lesson-links .n4ui-lesson-nav>a:hover{border-color:#e6b1ab;text-decoration:none}
.n4ui-lesson-links .n4ui-lesson-nav a>span{min-width:0}
.n4ui-lesson-links .n4ui-lesson-nav strong{display:block;color:#cd2f39;font-size:14px;font-weight:700}
.n4ui-lesson-links .n4ui-lesson-nav strong+span{display:block;overflow:hidden;color:#5d6876;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.n4ui-lesson-links .n4ui-lesson-nav>.n4ui-lesson-nav-next{justify-content:flex-end;text-align:right}
.n4ui-lesson-links .n4ui-icon-left,.n4ui-lesson-links .n4ui-icon-right{width:24px;height:24px;color:#cd2f39;vertical-align:middle}
.n4ui-lesson-links .n4ui-lesson-nav>.n4ui-lesson-nav-list{flex-direction:column;justify-content:center;gap:4px;padding:6px 14px;background:transparent;border:0;box-shadow:none;color:#b0603f;font-size:13px;text-align:center}
.n4ui-lesson-links .n4ui-icon-grid{width:24px;height:24px;color:#c58d76;vertical-align:middle}
.n4ui-lesson-links .n4ui-related-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 0;min-width:0}
.n4ui-lesson-links .n4ui-related{min-width:0;margin:0;padding:18px 20px 20px;background:#fff;border:1px solid var(--n4ui-line);border-radius:14px;box-shadow:var(--n4ui-shadow)}
.n4ui-lesson-links .n4ui-related:only-child{grid-column:1/-1}
.n4ui-lesson-links .n4ui-related:only-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.n4ui-lesson-links .n4ui-related-lists .n4ui-related h2{display:flex;align-items:center;gap:8px;border-left:4px solid #c50018;padding:1px 0 1px 11px;margin:0 0 14px;font:600 18px/1.3 "Segoe UI",Arial,sans-serif;letter-spacing:0;text-transform:none;color:#1f2552}
.n4ui-lesson-links .n4ui-related ul{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.n4ui-lesson-links .n4ui-related li{padding:0;margin:0;list-style:none}
.n4ui-lesson-links .n4ui-related a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;align-items:center;padding:10px 12px 10px 14px;min-height:58px;border:1px solid #e9e6e4;border-radius:10px;background:#fff;color:#173447;text-decoration:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.n4ui-lesson-links .n4ui-related a::after{content:"\203A";grid-column:3;grid-row:1/span 2;font-size:24px;line-height:1;color:#a3b1b5}
.n4ui-lesson-links .n4ui-related a:hover,.n4ui-lesson-links .n4ui-related a:focus-visible{background:#faf9f7;border-color:#bda996;box-shadow:0 2px 10px #173b2d12;color:#173447;text-decoration:none}
.n4ui-lesson-links .n4ui-related a:hover::after{color:#915d2a}
.n4ui-lesson-links .n4ui-related-label,.n4ui-lesson-links .n4ui-related-title{grid-column:1;min-width:0}
.n4ui-lesson-links .n4ui-related-label{font-size:13px;font-weight:700;color:#915d2a}
.n4ui-lesson-links .n4ui-related a.is-label-only .n4ui-related-label{grid-row:1/span 2;font-size:15px}
.n4ui-lesson-links .n4ui-related-title{font-size:15px;line-height:1.45;color:#173447;overflow-wrap:anywhere}
.n4ui-lesson-links .n4ui-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}
.n4ui-lesson-links .n4ui-related-state:empty{display:none}
.n4ui-lesson-links .n4ui-related-state.is-done{background:#e6f4ec;color:#176a49;font-weight:600}
.n4ui-lesson-links .n4ui-related-state.is-draft{background:#fff3dd;color:#8a5300}
@media(max-width:760px){
 .n4ui-lesson-links .n4ui-lesson-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .n4ui-lesson-links .n4ui-lesson-nav>.n4ui-lesson-nav-list{grid-column:1/-1;grid-row:2;flex-direction:row;padding:8px}
 .n4ui-lesson-links .n4ui-lesson-nav>a{padding:12px}
 .n4ui-lesson-links .n4ui-related-lists{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
 .n4ui-lesson-links .n4ui-related:only-child ul{grid-template-columns:minmax(0,1fr)}
 .n4ui-lesson-links .n4ui-related{padding:14px 12px}
 .n4ui-lesson-links .n4ui-related a{min-height:54px;padding:9px 10px 9px 12px}
}