.library-home .reader-hero{--hero-ease: cubic-bezier(.22,.61,.36,1);--hero-paper: #f5ecd9;position:relative;isolation:isolate;height:440px;min-height:440px;display:block;padding:34px 48px 76px;overflow:hidden;border:0;border-radius:10px;box-shadow:none;background:var(--hero-paper);color:var(--text);touch-action:pan-y}.library-home .reader-hero:before,.library-home .reader-hero:after{content:none}.reader-hero .hero-scenery{position:absolute;z-index:-2;inset:0;background:url(/art/thu-vien-thuy-mac.webp) right center/cover no-repeat;transform-origin:70% 50%;animation:hero-ken-burns 12s linear alternate infinite}.reader-hero .hero-paper{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#f5ecd9 0%,#f5ecd9f5 35%,#f5ecd9d9 55%,#f5ecd93b 75%,transparent)}.reader-hero .hero-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;height:100%;align-items:center}.reader-hero .hero-copy{max-width:560px;animation:none}.reader-hero .hero-copy h1{font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:10px 0 16px;color:inherit}.reader-hero .eyebrow{font-size:14px;color:#8b4430}.reader-hero .hero-author{font-size:14px;color:#705d48}.reader-hero .hero-summary{font-size:15px;line-height:1.75;max-width:52ch}.reader-hero .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px}.reader-hero .hero-visual{height:100%;display:grid;place-items:center}.reader-hero .hero-book{display:block;padding:0;width:220px;height:330px;aspect-ratio:2/3;transform:none;border-radius:var(--r-nho);box-shadow:0 8px 24px #3c28142e}.reader-hero .hero-book span{display:block;padding:0;margin:0;background:transparent;font:inherit}.reader-hero .hero-book img,.reader-hero .hero-cover-placeholder{display:block;width:100%;height:100%;border:0;border-radius:var(--r-nho);object-fit:contain;background:#f5ecd9;box-shadow:none;animation:none}.reader-hero .hero-cover-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;text-align:center;color:#f6ebd1;background:linear-gradient(140deg,#354d68,#182738);font:700 24px/1.4 var(--font-ui)}.reader-hero .hero-cover-placeholder small{font:italic 14px/1.5 var(--font-ui)}.reader-hero[data-phase=leaving] .hero-copy{animation:hero-copy-out .25s var(--hero-ease) both}.reader-hero[data-phase=leaving] .hero-book{animation:hero-book-out .35s var(--hero-ease) both}.reader-hero[data-phase=entering] .hero-book{animation:hero-book-in .6s var(--hero-ease) .15s both}.reader-hero[data-phase=entering] .hero-line{animation:hero-line-in .45s var(--hero-ease) calc(var(--line)*60ms) both}@keyframes hero-ken-burns{0%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes hero-copy-out{to{opacity:0;transform:translateY(calc(-12px * var(--slide-dir)))}}@keyframes hero-book-out{to{opacity:0;transform:translate(calc(24px * var(--slide-dir))) rotate(-4deg) scale(.96)}}@keyframes hero-book-in{0%{opacity:0;transform:translate(calc(40px * var(--slide-dir))) rotate(2deg) scale(.96)}to{opacity:1;transform:rotate(-4deg) scale(1)}}@keyframes hero-line-in{0%{opacity:0;transform:translateY(calc(16px * var(--slide-dir)))}to{opacity:1;transform:none}}.library-home .reader-hero .hero-switcher{position:absolute;left:42px;bottom:18px;z-index:2;display:flex;align-items:center;gap:2px;margin:0}.reader-hero .hero-switcher button{display:grid;place-items:center;min-width:32px;min-height:40px;padding:0;border:0;border-radius:6px;background:transparent;color:#825e2c;box-shadow:none;cursor:pointer}.reader-hero .hero-switcher button:disabled{opacity:.7;cursor:default}.reader-hero .hero-dot-track{display:block;position:relative;width:8px;height:8px;overflow:hidden;border-radius:12px;background:#c6b99f}.reader-hero .hero-dot[aria-pressed=true]{width:44px;background:transparent}.reader-hero .hero-dot[aria-pressed=true] .hero-dot-track{width:32px}.reader-hero .hero-progress{display:block;position:absolute;inset:0;background:#9f6b15;transform:scaleX(0);transform-origin:left}.reader-hero .hero-dot[aria-pressed=true] .hero-progress{animation:hero-progress 6s linear both}.reader-hero[data-running=false] .hero-dot[aria-pressed=true] .hero-progress{animation-play-state:paused}.reader-hero .hero-arrow{font:26px/1 var(--font-ui)}@keyframes hero-progress{to{transform:scaleX(1)}}:root[data-theme=toi] .reader-hero{--hero-paper: #18221f;color:#f0e8d8}:root[data-theme=toi] .reader-hero .hero-paper{background:linear-gradient(90deg,#18221f,#18221ff5 35%,#18221fde 55%,#18221f88 85%,#18221f55)}:root[data-theme=toi] .reader-hero .eyebrow,:root[data-theme=toi] .reader-hero .hero-author{color:#dac5a1}:root[data-theme=toi] .reader-hero .hero-summary,:root[data-theme=toi] .reader-hero .hero-actions>a:not(.button){color:#e4d8c4}:root[data-theme=toi] .reader-hero .hero-switcher button{color:#e6c691}:root[data-theme=toi] .reader-hero .hero-dot-track{background:#75654c}:root[data-theme=toi] .reader-hero .hero-progress{background:#dfaf5c}@media(max-width:767px){.library-home .reader-hero{height:700px;min-height:700px;padding:26px 24px 70px}.reader-hero .hero-body{display:grid;grid-template-columns:1fr;grid-template-rows:auto 190px;align-content:center;gap:24px}.reader-hero .hero-copy{width:100%;max-width:none}.reader-hero .hero-copy h1{font-size:28px}.reader-hero .hero-summary{font-size:14px}.reader-hero .hero-book{width:126.6667px;height:190px}.reader-hero .hero-cover-placeholder{font-size:17px;padding:12px}.reader-hero .hero-cover-placeholder small{font-size:11px}.library-home .reader-hero .hero-switcher{left:50%;transform:translate(-50%);bottom:14px}.reader-hero .hero-paper{background:linear-gradient(180deg,#f5ecd9f5,#f5ecd9d9 60%,#f5ecd933)}:root[data-theme=toi] .reader-hero .hero-paper{background:linear-gradient(180deg,#18221ff5,#18221fde 60%,#18221f88)}}@media(prefers-reduced-motion:reduce){:root .reader-hero .hero-scenery{animation:none!important;transform:none}:root .reader-hero .hero-book{transform:none}:root .reader-hero[data-phase=leaving] :is(.hero-copy,.hero-book){animation:hero-reduced-out .1s linear both!important}:root .reader-hero[data-phase=entering] :is(.hero-line,.hero-book){animation:hero-reduced-in .1s linear both!important}:root .reader-hero .hero-progress{animation:none!important;transform:scaleX(1)}@keyframes hero-reduced-out{to{opacity:0}}@keyframes hero-reduced-in{0%{opacity:0}to{opacity:1}}}@media(max-width:767px){.library-home .reader-hero{height:462px;min-height:462px;padding:0 18px 52px}.library-home .reader-hero .hero-body{display:flex;flex-direction:column;justify-content:flex-start;gap:0;height:100%}.library-home .reader-hero .hero-visual{order:-1;flex:none}.library-home .reader-hero .hero-visual--banner{position:relative;inset:auto;width:calc(100% + 36px);height:220px;margin:0 -18px;max-width:none;aspect-ratio:auto}.library-home .reader-hero .hero-visual--banner .hero-banner-art{position:absolute;inset:0;width:100%;height:100%;border-radius:10px 10px 0 0;object-position:center 40%;-webkit-mask-image:linear-gradient(#000 62%,#0000);mask-image:linear-gradient(#000 62%,#0000);-webkit-mask-size:auto;mask-size:auto}.library-home .reader-hero .hero-visual--banner[data-doc] .hero-banner-art{object-position:center 18%}.library-home .reader-hero .hero-visual:not(.hero-visual--banner):not(.hero-qua){height:210px;margin:0 -18px;padding-top:18px;place-items:start center}.library-home .reader-hero .hero-book{width:128px;height:192px}.library-home .reader-hero .hero-copy{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:-26px}.library-home .reader-hero:has(.hero-qua) .hero-copy{margin-top:24px;flex:none}.library-home .reader-hero:has(.hero-qua) .hero-actions{margin-top:14px;padding-top:0}.library-home .reader-hero .hero-copy :is(h1,.hero-author,.hero-summary,.eyebrow){text-shadow:0 0 2px var(--hero-paper),0 0 10px var(--hero-paper)}.reader-hero .eyebrow{font-size:12px;letter-spacing:.04em;margin:0}.library-home .reader-hero .hero-copy h1{font-size:23px;line-height:1.25;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.reader-hero .hero-author{font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-hero .hero-summary{font-size:14px;line-height:1.55;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.library-home .reader-hero .hero-actions{margin-top:auto;padding-top:12px;gap:14px;flex-wrap:nowrap}.library-home .reader-hero .hero-actions .button{min-height:42px;padding:0 14px;font-size:15px;white-space:nowrap}.library-home .reader-hero .hero-actions>a:not(.button){font-size:14px;white-space:nowrap}.library-home .reader-hero .hero-visual.hero-qua{order:1;flex:none;height:auto;margin:16px 0 0}.library-home .reader-hero .hero-qua-phieu{padding:10px 4px}.library-home .reader-hero .hero-switcher{left:50%;bottom:6px;transform:translate(-50%)}.reader-hero .hero-switcher .hero-arrow{display:none}.reader-hero .hero-switcher button{min-width:26px;min-height:40px}.reader-hero .hero-dot[aria-pressed=true]{width:40px}.reader-hero .hero-paper{background:linear-gradient(180deg,transparent 0,var(--hero-paper) 190px)}:root[data-theme=toi] .reader-hero .hero-paper{background:linear-gradient(180deg,transparent 0,var(--hero-paper) 190px)}.reader-hero .hero-scenery{opacity:.5}.reader-hero[data-phase=leaving] .hero-copy{animation:hero-copy-ngang-ra .26s var(--hero-ease) both}.reader-hero[data-phase=entering] .hero-line{animation:hero-line-ngang-vao .42s var(--hero-ease) calc(var(--line)*50ms) both}.reader-hero .hero-truc{position:absolute;top:0;bottom:18px;left:0;width:16px;margin-left:-8px;z-index:2;pointer-events:none;opacity:0;border-radius:8px;background:linear-gradient(90deg,#3d2213,#7a4a26 22%,#b77a43 45%,#e0ad6d 52%,#a26a37 64%,#5a3319 86%,#2e190d);box-shadow:3px 0 8px #3d261666}.reader-hero[data-phase=leaving] .hero-banner-art{animation:cuon-lai .48s cubic-bezier(.45,0,.55,1) both}.reader-hero[data-phase=entering] .hero-banner-art{animation:trai-ra .76s cubic-bezier(.3,.1,.25,1) both}.reader-hero[data-phase=leaving] .hero-truc{animation:truc-cuon .48s cubic-bezier(.45,0,.55,1) both}.reader-hero[data-phase=entering] .hero-truc{animation:truc-trai .76s cubic-bezier(.3,.1,.25,1) both}}@keyframes hero-copy-ngang-ra{to{opacity:0;transform:translate(calc(-28px * var(--slide-dir)))}}@keyframes hero-line-ngang-vao{0%{opacity:0;transform:translate(calc(28px * var(--slide-dir)))}to{opacity:1;transform:none}}@media(max-width:767px)and (prefers-reduced-motion:reduce){.reader-hero .hero-truc{display:none}}