:root{--ink:#243b40;--muted:#738185;--cyan:#42caea;--peach:#fde0d0;--coral:#fd827b;--line:#e5eaea;--paper:#fcfdfb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1496b3;outline-offset:4px}button{border:0}button:hover,a:hover{color:#097e96}.wrap{max-width:1200px;margin:auto;padding-left:36px;padding-right:36px}.skip{position:absolute;top:-100px;left:15px;z-index:5;padding:12px;background:white}.skip:focus{top:10px}header{border-bottom:1px solid var(--line);background:#fff}.nav{height:94px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:1.25rem;line-height:1.3;letter-spacing:-.5px}.brand>span>b{display:block}.dot{color:#f58579}.brand img{border-radius:50%;background:#e9f9fa}nav{display:flex;align-items:center;gap:35px;font-size:1rem;font-weight:600}.nav-pill{padding:11px 18px;background:#edf7f6;border-radius:8px}.nav-pill span{margin-left:15px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:487px;align-items:center;gap:35px;padding-top:45px;padding-bottom:50px}.kicker,.overline{font-size:0.875rem;letter-spacing:1.8px;font-weight:700}.kicker{display:flex;align-items:center;gap:8px}.kicker>span{width:7px;height:7px;border-radius:50%;background:var(--coral)}h1,h2,h3,p{margin-top:0}.hero h1{position:relative;font-size:3.75rem;line-height:1.17;letter-spacing:-2.7px;margin:22px 0 25px;font-weight:750}.hero h1>span{color:#259caf}.hero h1 svg{position:absolute;bottom:-11px;left:173px;width:270px;height:16px;fill:none;stroke:var(--peach);stroke-width:7;z-index:-1}.hero p{font-size:1.0625rem;color:#6a7d80;line-height:1.9;margin-bottom:26px}.primary{background:var(--ink);color:#fff;padding:13px 22px;border-radius:8px;display:inline-flex;align-items:center;gap:32px;font-size:1rem;font-weight:600}.primary:hover{background:#116e80;color:white}.hero-note{margin-top:23px;display:flex;gap:11px;align-items:center;font-size:0.875rem;color:var(--muted)}.hero-note>span{color:#f68b7e;font-size:1.25rem}.hero-note i{font-style:normal}.hero-visual{position:relative;height:350px;display:grid;place-items:center}.orbit{position:absolute;border:1px dashed #d6e6e4;border-radius:50%;height:320px;width:360px;transform:rotate(-22deg)}.orbit-two{height:255px;width:415px;transform:rotate(32deg)}.mascot{border-radius:50%;background:#e4f5f4;width:285px;height:285px;display:grid;place-items:center;overflow:hidden}.mascot img{width:270px;height:270px;transform:translateY(16px)}.float{position:absolute;z-index:1;background:white;box-shadow:0 8px 25px #304c4710;border:1px solid #e9eeee;border-radius:12px}.float-math{top:33px;left:13px;transform:rotate(-11deg);padding:10px 18px;font-family:Georgia,serif;font-size:1.4375rem}.float-book{right:5px;top:76px;padding:12px 18px;background:#fef0e7;font-family:Georgia,serif;font-size:1.75rem;transform:rotate(8deg)}.float-book small{display:block;font:9px sans-serif}.float-note{bottom:13px;right:20px;display:flex;gap:13px;align-items:center;padding:13px 20px;color:#279ab0;font-size:1.375rem;transform:rotate(-4deg)}.float-note>span{font-size:0.875rem;line-height:1.8;color:var(--ink)}.spark{position:absolute;color:var(--coral)}.spark-one{font-size:2.125rem;top:5px;right:91px}.spark-two{font-size:1.625rem;bottom:48px;left:50px}.subject-section{background:#f1f7f5;border-block:1px solid #e8efed}.subject-row{display:flex;align-items:center;gap:35px;padding-top:28px;padding-bottom:28px}.overline{color:#83918d;font-size:0.8125rem;letter-spacing:1.4px}.subject-row h2{font-size:1.1875rem;margin:6px 0 0;letter-spacing:-.6px;white-space:nowrap}.subject-picks{display:flex;gap:12px;flex:1;justify-content:space-between}.subject-pick{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:0.875rem;background:none;white-space:nowrap;padding:0 5px}.subject-pick>span{width:42px;height:42px;border:1px solid #dfebe6;background:#fff;border-radius:12px;display:grid;place-items:center;font-size:1.375rem;font-family:Georgia,serif}.subject-pick:nth-child(2n)>span{background:#fff1e8}.library{padding-top:52px;padding-bottom:52px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-heading h2{font-size:1.875rem;letter-spacing:-1.1px;margin:6px 0 0}.section-heading p{font-size:0.9375rem;color:var(--muted);margin-bottom:6px}.library-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px}aside h3{font-size:0.9375rem;margin-bottom:12px}.category-list{display:flex;flex-direction:column;gap:3px;max-height:422px;overflow:auto;padding-right:5px;scrollbar-width:thin}.category{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:9px 10px;border-radius:6px;font-size:0.875rem;background:transparent}.category small{font-size:0.875rem;color:#99a5a3}.category.active{background:#e7f5f5;color:#147e92;font-weight:600}.aside-note{margin-top:25px;padding:20px;background:#fcf1e9;border-radius:9px}.aside-note>span{color:#e49977;font-size:1.75rem}.aside-note h3{font-size:1.125rem;margin:8px 0;line-height:1.6}.aside-note p{font-size:0.875rem;color:#8f8178;margin:0}.filter-bar{display:flex;gap:10px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;background:white;flex:1;min-width:0;padding:0 12px;gap:8px}.search span{font-size:1.5625rem;color:#99a8a8}input{width:100%;min-width:0;padding:10px 0;border:0;background:transparent;font-size:0.9375rem}select{border:1px solid var(--line);background:white;border-radius:7px;padding:10px;font-size:0.875rem;max-width:100%}.result-meta{display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;color:var(--muted);margin:18px 0}.result-meta select{border:0;background:transparent;padding:0 5px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}.card{border:1px solid var(--line);border-radius:10px;background:white;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #284e4010}.card-link{flex:1}.card-art{height:130px;position:relative;overflow:hidden;padding:14px 17px}.tone-0{background:#e5f3f2;color:#3a8887}.tone-1{background:#fcece3;color:#b98a6a}.tone-2{background:#edf0fa;color:#8684b0}.tone-3{background:#f4f2df;color:#9e985b}.art-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:1.5px}.art-symbol{position:absolute;left:28px;top:35px;font-family:Georgia,serif;font-size:3.375rem;line-height:1.3;transform:rotate(-8deg)}.art-grade{position:absolute;right:17px;bottom:13px;font-size:3.25rem;line-height:1;font-weight:200;opacity:.55;letter-spacing:-2px}.art-grade small{display:block;font-size:0.75rem;text-align:center;letter-spacing:2px;margin-top:5px}.card-content{padding:16px 16px 10px}.eyebrow{display:flex;gap:8px;align-items:center;font-size:0.8125rem;color:#718a89;font-weight:600}.card h3{font-size:1.0625rem;line-height:1.5;margin:9px 0;letter-spacing:-.25px}.card p{font-size:0.875rem;color:#84908f;line-height:1.8;margin:0}.card-bottom{padding:0 16px 15px;display:flex;flex-direction:column;gap:12px}.tags{display:flex;flex-wrap:wrap;gap:5px}.tag{font-size:0.8125rem;padding:3px 7px;background:#f2f6f5;border-radius:4px;color:#748986}.card-bottom>span{font-size:0.8125rem;color:#91a09c;border-top:1px solid #f0f3f2;padding-top:10px}#active-filters:empty{display:none}#active-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}#active-filters button{font-size:0.875rem;padding:6px 10px;border-radius:5px;background:#e4f4f4}#empty{text-align:center;padding:50px 15px}#empty>span{font-size:3.125rem;color:#9bb8b5}#empty h3{font-size:1.3125rem}#empty p{color:var(--muted)}[hidden]{display:none!important}.about{margin-bottom:45px;background:#eef6f3;border-radius:12px;padding-top:30px;padding-bottom:30px;display:flex;gap:28px;align-items:center}.about-icon{font-size:3.4375rem;color:#81b8a5}.about h2{font-size:1.5625rem;letter-spacing:-.8px;margin:7px 0}.about p{font-size:0.9375rem;color:#7b8f89;margin:0}.about>a{margin-left:auto;border:1px solid #c5dcd5;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:1.375rem}footer{border-top:1px solid var(--line);min-height:90px;display:flex;justify-content:space-between;align-items:center;gap:20px}footer .small{font-size:1rem;font-weight:700}footer p,footer>span{font-size:0.875rem;color:#8b9996;margin:0}.article-wrap{max-width:850px;padding-top:40px;padding-bottom:60px}.back{font-size:0.9375rem;color:#62827f}.article-heading{margin-top:40px;border-bottom:1px solid var(--line);padding-bottom:30px}.article-heading h1{font-size:2.625rem;line-height:1.25;letter-spacing:-1.3px;margin:16px 0}.article-heading>p{color:var(--muted);font-size:1.25rem}.article-meta{font-size:0.9375rem;color:var(--muted);display:flex;gap:12px;margin-bottom:15px}.article-heading .tag{font-size:0.9375rem}.prose{font-size:1.1875rem;line-height:1.9;padding-top:30px;overflow-wrap:anywhere}.prose h2{font-size:1.5625rem;margin-top:35px}.prose h3{font-size:1.25rem;margin-top:28px}.prose a{color:#128099;text-decoration:underline}.prose blockquote{background:#eef7f5;border-left:3px solid #42caea;margin:25px 0;padding:15px 22px}.prose blockquote p{margin:0}.prose img{max-width:100%}.prose pre{padding:18px;overflow:auto;background:#edf2f0;border-radius:8px}.prose table{display:block;width:fit-content;max-width:100%;overflow:auto;border-collapse:collapse;margin:24px auto}.prose td,.prose th{border:1px solid var(--line);padding:8px 15px;text-align:left}.prose details{padding:16px;background:#f1f7f5;border-radius:8px;margin:20px 0}.prose summary{cursor:pointer;font-weight:600}.katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0}.article-end{margin-top:40px;padding:25px;text-align:center;background:#fcf0e6;border-radius:8px;color:#8d7664;font-size:1rem}.related{margin-top:35px}.related h2{font-size:1.375rem}.related a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}@media(min-width:1450px){.wrap{max-width:1280px}.hero{min-height:520px}.hero h1{font-size:4.125rem}.card-art{height:150px}}@media(max-width:950px){.wrap{padding-left:24px;padding-right:24px}.hero h1{font-size:3rem}.hero h1 svg{left:135px;width:210px}.hero-visual{transform:scale(.85)}.subject-row{display:block}.subject-picks{margin-top:20px}.library-layout{grid-template-columns:155px minmax(0,1fr);gap:20px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading p{display:none}.about{margin-inline:24px}.filter-bar{flex-wrap:wrap}.search{flex-basis:100%}}@media(max-width:620px){.nav{height:78px}.brand{font-size:1.0625rem}.brand img{width:38px;height:38px}nav{gap:0}nav a{display:none}nav a:first-child{display:block;font-size:0.875rem}.hero{grid-template-columns:1fr;padding-top:32px;gap:0;padding-bottom:22px}.hero h1{font-size:3.0625rem}.hero p{font-size:1rem}.hero-visual{height:310px;transform:scale(.9);margin-top:15px}.hero-note{font-size:0.8125rem}.kicker{font-size:0.8125rem;letter-spacing:1px}.subject-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.subject-row h2{font-size:1.3125rem}.library{padding-top:33px}.section-heading h2{font-size:1.6875rem}.library-layout{display:block}.category-list{flex-direction:row;overflow:auto;max-height:none;gap:7px;padding-bottom:10px;margin-bottom:20px}.category{flex-shrink:0;border:1px solid var(--line);font-size:0.875rem}.category small{display:none}aside>h3,.aside-note{display:none}.cards{gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}.card-content{padding:12px}.card h3{font-size:1rem}.card p{font-size:0.875rem}.card-bottom{padding:0 12px 12px}.card-art{height:112px;padding:12px}.art-symbol{font-size:2.6875rem;left:16px}.art-grade{font-size:2.4375rem;right:12px}.art-label{font-size:0.75rem;letter-spacing:.8px}.about{padding:25px 20px;gap:12px}.about-icon{display:none}.about h2{font-size:1.3125rem}.about>a{flex-shrink:0;width:35px;height:35px}.about p br{display:none}footer{flex-wrap:wrap;padding-block:24px;gap:8px}footer>span{width:100%}.article-heading h1{font-size:1.9375rem}.article-heading>p{font-size:1.125rem}.prose{font-size:1.125rem}.article-heading .eyebrow{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,footer,.back,.related{display:none}.article-wrap{max-width:none}.prose details{display:block}} @media(max-width:620px){.hero{overflow:hidden}.cards{grid-template-columns:1fr}.card-art{height:140px}.card-content{padding:18px 18px 12px}.card h3{font-size:1.25rem}.card p{font-size:1rem}.card-bottom{padding:0 18px 18px}.eyebrow,.tag{font-size:0.875rem}.card-bottom>span{font-size:0.875rem}.art-symbol{font-size:3.4375rem;left:28px}.art-grade{font-size:3.4375rem;right:25px}.art-label{font-size:0.8125rem}} @media(max-width:620px){.hero h1{font-size:2.5rem;letter-spacing:-1.8px}.hero h1 svg{left:95px;width:210px}} /* Roomier reading layout for larger type. */ .library-layout{grid-template-columns:220px minmax(0,1fr)} .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .card h3{font-size:1.3125rem;line-height:1.5} .card p{font-size:1rem;line-height:1.75;color:#617571} .card-content{padding:20px 20px 14px} .card-bottom{padding:0 20px 20px} .category{padding:11px 12px} .category small{font-size:0.8125rem} .filter-bar{flex-wrap:wrap} .search{flex-basis:100%} input,select{font-size:1rem} .hero-note{flex-wrap:wrap} .subject-row{flex-wrap:wrap} .subject-picks{min-width:0;flex-wrap:wrap;gap:18px} .prose{font-size:1.1875rem;line-height:1.9} footer{flex-wrap:wrap;padding-top:22px;padding-bottom:22px} @media(max-width:950px){.library-layout{grid-template-columns:185px minmax(0,1fr)}.cards{grid-template-columns:1fr}nav{gap:18px}.nav-pill{padding:10px 12px}} @media(max-width:620px){.library-layout{display:block}.cards{grid-template-columns:1fr}.subject-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.subject-pick{white-space:normal;text-align:center}.nav{gap:10px}.brand{font-size:1.0625rem;gap:8px}nav a:first-child{font-size:0.875rem}.hero-note{font-size:0.8125rem;gap:8px}.kicker{font-size:0.6875rem}.prose{font-size:1.125rem}.article-heading .eyebrow{font-size:0.875rem}.article-heading .tag{font-size:0.875rem}} .footer-link{font-size:0.9375rem;font-weight:700;text-decoration:none} /* Embedded lesson media and practice questions. */ .lesson-video{margin:30px 0}.lesson-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#e8f2f1}.lesson-video figcaption{font-size:0.875rem;color:#617571;margin-top:10px} .quiz{margin:30px 0;padding:24px;border:1px solid #d8e7e3;border-radius:12px;background:#f5faf8}.quiz fieldset{border:0;margin:0;padding:0;min-width:0}.quiz legend{font-size:1.25rem;font-weight:650;padding:0;margin-bottom:16px;width:100%}.quiz-option{display:flex;align-items:baseline;gap:12px;padding:12px 14px;border:1px solid #d8e7e3;border-radius:8px;background:white;margin:10px 0;cursor:pointer}.quiz-option:has(input:checked){border-color:#19859c;background:#e8f7f8}.quiz-option input{width:18px;height:18px;flex-shrink:0;accent-color:#17849b}.quiz-text{display:block;font-size:1rem}.quiz-text input{display:block;width:100%;background:white;border:1px solid #adc7c0;border-radius:8px;padding:12px;margin:8px 0 16px}.quiz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.quiz-reset{background:white;border:1px solid #adc7c0;border-radius:8px;padding:10px 18px}.quiz-feedback{margin:16px 0 0;font-weight:600}.quiz-feedback:empty{display:none}.quiz[data-result="correct"] .quiz-feedback{color:#176943}.quiz[data-result="incorrect"] .quiz-feedback{color:#a34424}.quiz-explanation{border-top:1px solid #d8e7e3;margin-top:16px;padding-top:16px;font-size:1.0625rem}@media(max-width:620px){.quiz{padding:18px}.quiz legend{font-size:1.125rem}} nav.breadcrumb{display:flex;flex-wrap:wrap;gap:8px 12px}nav.breadcrumb a,nav.breadcrumb a:first-child{display:inline;font-size:inherit}nav.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}nav.breadcrumb>span{color:var(--muted)} .library-sections{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}.library-sections a,.library-sections a:first-child{display:block;padding:10px 18px;border:1px solid var(--line);border-radius:9px;font-size:1.0625rem;background:#f1f7f5}.library-sections a.active{background:var(--ink);color:#fff}.entertainment h1{font-size:2.25rem;margin:10px 0}.entertainment .section-heading p{display:block;max-width:650px;line-height:1.8}.entertainment-empty{padding:36px 22px;text-align:center;background:#fff1e8;border-radius:14px}.entertainment-empty p{color:var(--muted)} @media(max-width:620px){footer.wrap{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;padding-block:28px;text-align:center}footer.wrap>p,footer.wrap>a{margin:0;max-width:100%}footer.wrap>.brand{justify-content:center}} .prose img[src*="assets/latex/"]{display:block;width:auto;min-width:min(100%,320px);height:auto;max-width:100%;max-height:none;margin:24px auto;object-fit:contain} /* Answer labels already provide list markers in converted LaTeX exercises. */ .prose ul.answer-options{list-style:none;padding-left:0} .exam-wrap{max-width:960px;padding-top:35px;padding-bottom:60px}.exam-wrap>h1{margin-top:24px;font-size:2.25rem;line-height:1.3}.exam-policy{font-size:0.9375rem;color:#617571}.exam-warning,#storage-warning{padding:16px;border-radius:8px;background:#fff0d8;color:#765021}.exam-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:8px}#exam-timer{font-size:1.5rem;font-variant-numeric:tabular-nums}#exam-nav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}#exam-nav a{display:grid;place-items:center;border:1px solid #bad1cb;border-radius:6px;width:38px;height:38px}#exam-nav a.answered{background:#d8f1eb;color:#1d6150}.exam-question{scroll-margin-top:100px;padding:24px;margin:24px 0;border:1px solid var(--line);border-radius:12px;background:white}.exam-question fieldset{min-width:0;border:0;padding:0;margin:12px 0}.exam-question legend{font-size:1rem;font-weight:600}.exam-question input[type=text]{border:1px solid #adc7c0;border-radius:7px;padding:12px;margin:8px 0}.exam-question .truefalse-row{border-top:1px solid var(--line);padding:14px 0}.truefalse-row>label{display:inline-flex;gap:8px;align-items:center;margin-right:26px}.truefalse-row input{width:18px;height:18px}.quiz-option p{margin:0}.exam-review{margin-top:20px;padding:18px;border-radius:8px;background:#eef7f4}.exam-card h2{font-size:1.4375rem}.exam-card .primary{margin:18px 0 4px}.exam-question .prose{padding-top:0}#exam-result .back{display:inline-block;margin:15px}.exam-question img{background:var(--paper)}@media(max-width:620px){.exam-toolbar{flex-wrap:wrap}.exam-toolbar .primary{padding:10px 14px}.exam-wrap>h1{font-size:1.75rem}.exam-question{padding:16px}header nav a[href$="de-kiem-tra/"]{display:inline;margin-left:12px;font-size:0.875rem}} /* Exam actions and timer should be easy to spot while practising. */ .exam-card .primary,.article-wrap > p > .primary{display:flex;justify-content:center;align-items:center;width:min(100%,280px);margin:22px auto 6px;padding:15px 24px;background:var(--coral);box-shadow:0 8px 18px #fd827b40;font-size:1.0625rem;font-weight:750} .exam-card .primary:hover,.article-wrap > p > .primary:hover{background:#e96968;color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px #fd827b55} .exam-toolbar{background:#e8f7f5;border:2px solid var(--cyan);box-shadow:0 8px 22px #42caea30;padding:16px 18px} #exam-timer{display:inline-flex;align-items:center;justify-content:center;min-width:112px;padding:8px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:1.75rem;font-weight:800;letter-spacing:1px;box-shadow:inset 0 0 0 2px #ffffff30} #exam-timer::before{content:'⏱';font-size:1.125rem;margin-right:8px;color:var(--peach)} .exam-toolbar .primary{background:var(--ink);padding:12px 20px} .exam-toolbar .primary:hover{background:#116e80} @media(max-width:620px){.exam-toolbar{gap:10px}.exam-toolbar #exam-progress{order:3;width:100%;font-size:0.875rem}.exam-toolbar .primary{padding:11px 14px}.exam-card .primary,.article-wrap > p > .primary{width:100%}} .confetti-canvas{position:fixed;inset:0;z-index:20;pointer-events:none} .exam-nav-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;padding:8px 0;border-bottom:1px solid #e5efec}.exam-nav-group strong{width:100%;font-size:0.8125rem;color:#52716d}.exam-nav-group a{margin:0} .menu-toggle{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .go-top{position:fixed;right:24px;bottom:24px;z-index:15;width:48px;height:48px;border:1px solid #b9ddd5;border-radius:50%;background:var(--ink);color:#fff;font-size:1.625rem;line-height:1;box-shadow:0 8px 20px #243b4030;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}.go-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.go-top:hover{background:#116e80;color:#fff;transform:translateY(-2px)} @media(max-width:620px){.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;margin-left:auto;padding:9px;border:1px solid #c4e1dc;border-radius:8px;background:#edf7f6}.menu-toggle span{display:block;width:22px;height:2px;margin:auto;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}header nav#site-menu{display:none;position:absolute;top:78px;left:16px;right:16px;z-index:10;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:#fff;border:1px solid #d4e8e3;border-radius:10px;box-shadow:0 12px 26px #243b4020}body.menu-open header nav#site-menu{display:flex}header nav#site-menu a{display:block;padding:12px 14px;font-size:0.9375rem}header nav#site-menu .nav-pill{margin-top:3px;text-align:center}} /* Stronger visual separation between the main learning areas. */ header{box-shadow:0 2px 14px #243b4010} .hero{background:linear-gradient(135deg,#ffffff 0%,#f5fbfa 100%);border-radius:0 0 20px 20px} .subject-section{background:linear-gradient(135deg,#e6f7f6 0%,#f8f4ec 100%);border-block:1px solid #cfe7e1;box-shadow:0 8px 24px #243b400b} .subject-pick>span{border-color:#c4e1dc;box-shadow:0 3px 8px #243b4012} .library{background:#fff;border-radius:18px;margin-top:34px;margin-bottom:34px;padding-top:44px;padding-bottom:58px;box-shadow:0 10px 30px #243b400a} .card{box-shadow:0 5px 16px #243b4010;border-color:#d7e7e3} .card:hover{box-shadow:0 12px 28px #243b4020;border-color:#b8d8d1} .about{background:linear-gradient(135deg,#fff0e7 0%,#f2f8f2 100%);border:1px solid #f1d9c7;box-shadow:0 8px 24px #243b400d} .article-wrap{background:#fff;border-radius:18px;margin-top:30px;margin-bottom:35px;padding-top:38px;box-shadow:0 10px 30px #243b400a} .exam-wrap{background:#fff;border:1px solid #d8e9e4;border-radius:18px;box-shadow:0 10px 30px #243b400c} .exam-question{box-shadow:0 4px 14px #243b400c;border-color:#cfe3de} .about-brand,.brand.small{font-weight:800;background:linear-gradient(90deg,#1598b3 0 42%,var(--ink) 58% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.about-contact{margin-top:12px!important;font-size:1rem!important}.about-contact a{color:#147e92;font-weight:800;text-decoration:none;letter-spacing:.4px}.about-contact a:hover{text-decoration:underline} .exam-catalog-search{display:flex;margin-bottom:16px} .exam-question>h3{margin:0 0 18px;padding:11px 16px;border-left:5px solid var(--coral);border-radius:8px;background:#fff0e7;color:#a34e42;font-size:1.375rem;line-height:1.35;letter-spacing:-.2px}.exam-time-warning{margin:0 0 14px;padding:13px 16px;border:2px solid #f0ae54;border-radius:10px;background:#fff5dd;color:#79501b;font-weight:700;box-shadow:0 4px 14px #f0ae5430}.exam-time-warning:not([hidden]){animation:time-warning-pulse 1.8s ease-in-out infinite}@keyframes time-warning-pulse{50%{box-shadow:0 4px 20px #f0ae5460}} .exam-groups{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.exam-groups button{padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:#edf7f6}.exam-groups button.active{background:var(--ink);color:white}.exam-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0}.exam-filter{display:flex;flex-direction:column;gap:6px;font-size:0.875rem}.exam-filter select{width:100%}#exam-reset{margin-bottom:22px}.exam-question textarea{display:block;width:100%;resize:vertical;min-height:160px;padding:12px;margin:10px 0;border:1px solid #adc7c0;border-radius:8px;font:inherit;background:#fff}.proof-done{display:flex;gap:10px;align-items:center;font-size:1rem}.proof-done input{width:18px;height:18px} .nav-exams{position:relative}.nav-exams summary{cursor:pointer;white-space:nowrap}.nav-submenu{position:absolute;top:calc(100% + 12px);left:0;z-index:12;min-width:200px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px #243b4020}.nav-submenu a{display:block;padding:10px 12px;border-radius:6px}.nav-submenu a:hover{background:#edf7f6} @media(max-width:950px){header{position:relative;z-index:10}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;margin-left:auto;padding:9px;border:1px solid #c4e1dc;border-radius:8px;background:#edf7f6}.menu-toggle span{display:block;width:22px;height:2px;margin:auto;background:var(--ink);border-radius:2px}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}header nav#site-menu{display:none;position:absolute;top:100%;left:16px;right:16px;z-index:10;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:#fff;border:1px solid #d4e8e3;border-radius:10px;box-shadow:0 12px 26px #243b4020;max-height:calc(100dvh - 110px);overflow:auto;text-align:left}body.menu-open header nav#site-menu{display:flex}header nav#site-menu a,header nav#site-menu .nav-pill,header nav#site-menu .nav-exams summary{display:block;width:100%;margin:0;padding:12px 14px;text-align:left;font-size:1rem;line-height:1.5}header nav#site-menu .nav-pill{margin-top:6px}header nav#site-menu .nav-exams summary::after{content:' ▾'}header nav#site-menu .nav-exams summary::-webkit-details-marker{display:none}header nav#site-menu .nav-submenu{position:static;min-width:0;margin:0 14px 8px;padding:0 0 0 10px;border:0;border-left:2px solid #cfe3de;border-radius:0;box-shadow:none}header nav#site-menu .nav-submenu a{font-size:0.9375rem}.nav-exams{width:100%}} @media(max-width:620px){.library{margin-top:20px;border-radius:14px}.article-wrap{margin-top:16px;border-radius:14px}.hero{border-radius:0 0 14px 14px}} .hero h1 .hero-accent{color:#1598b3} .exam-toolbar #exam-timer{min-width:0;padding:2px 0;border-radius:0;background:transparent;color:var(--ink);font-size:1.375rem;box-shadow:none;letter-spacing:.5px}.exam-toolbar #exam-timer::before{font-size:1rem;margin-right:5px;color:#d88665} @media(max-width:620px){.wrap{padding-left:14px;padding-right:14px}.exam-wrap{padding-left:14px;padding-right:14px}.exam-toolbar #exam-timer{font-size:1.25rem}.exam-toolbar{padding:10px 12px}} .exam-toolbar{gap:6px;padding:10px 12px}.exam-toolbar #exam-progress{margin-inline:4px}.exam-question fieldset{margin:8px 0}.exam-question .quiz-option{gap:8px;padding:8px 10px;margin:6px 0}.exam-question .truefalse-row{padding:9px 0} .brand-name{color:#1598b3;font-weight:800} .nav-pill{background:#d8f1ef;border:1px solid #b6ddd8;box-shadow:0 4px 12px #243b4012;color:#146d76}.nav-pill:hover{background:#c7e9e7;color:#0e5c67} /* Tăng tương phản giữa các khu vực, vẫn giữ bảng màu của logo. */ :root{--muted:#5f7478;--line:#cbdedb;--paper:#f4f8f6} header{border-bottom-color:#bfd6d2;box-shadow:0 3px 16px #243b4018}.hero{background:linear-gradient(135deg,#fff 0%,#eaf7f5 100%)}.subject-section{background:linear-gradient(135deg,#d5f0ee 0%,#f7eadf 100%);border-color:#b7d9d4}.library{box-shadow:0 12px 34px #243b4015}.card{border-color:#c5dcd7;box-shadow:0 6px 18px #243b4018}.about{border-color:#e7c8b2;box-shadow:0 10px 28px #243b4018}.article-wrap,.exam-wrap{box-shadow:0 12px 34px #243b4015;border-color:#bfd9d4}.category.active{background:#d3eeee;color:#0b6d7c}.tag{background:#e2f0ed;color:#456f70}.exam-question{border-color:#bdd7d1;box-shadow:0 5px 18px #243b4016} /* Góc giải trí: cùng bảng màu xanh ngọc và cam của website. */ .fun-page{padding-top:36px;padding-bottom:60px;min-height:65vh}.fun-page h1{font-size:clamp(30px,5vw,46px);margin:22px 0 12px}.fun-page>.breadcrumb{display:flex;flex-wrap:wrap;gap:8px}.fun-intro{color:var(--muted);max-width:720px}.fun-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0 44px}.fun-tile{display:flex;justify-content:space-between;gap:12px;padding:24px;border:1px solid #9fcfca;border-radius:16px;background:#ddf1ee;color:#165c64;font-weight:750;text-decoration:none}.fun-tile:hover{background:#c7e9e5}.fun-player{max-width:850px;margin:28px auto;background:#fff;border:1px solid #b7d4ce;border-top:5px solid #168798;border-radius:20px;padding:30px;box-shadow:0 10px 30px #243b4012}.fun-filters{display:flex;flex-wrap:wrap;gap:16px}.fun-filters label{display:grid;gap:6px;flex:1;min-width:0;font-weight:650}.fun-filters select,.riddle-form input{width:100%;min-width:0;background:#fff;border:1px solid #9dbfbb;border-radius:10px;padding:12px;font:inherit;color:inherit}.fun-count,.fun-help{font-size:.85rem;color:var(--muted)}.fun-content{padding:24px;background:#edf7f4;border-radius:14px;overflow-wrap:anywhere}.fun-content .fun-text{white-space:pre-line;line-height:1.8;margin:16px 0;font-size:1.12rem}.fun-content blockquote{border:0;padding:0;font-size:1.4rem!important;font-weight:550}.fun-author{text-align:right;color:#126779;font-weight:650}.fun-label{display:inline-block;font-size:.8rem;font-weight:700;color:#146574;background:#d2eae5;padding:4px 12px;border-radius:30px}.fun-content h2{font-size:1.6rem;line-height:1.35}.jokes{border-top-color:#c77543}.jokes .fun-content{background:#fff7eb;border-left:4px solid #d79258}.jokes .fun-text{font-size:1rem}.tips .fun-content{background:#eef2fb}.riddle-form{display:grid;gap:12px;margin-top:24px}.riddle-form button{justify-self:start}.riddle-result{padding:16px;margin-top:16px;border-radius:12px;border:1px solid #6bb6a4;background:#e7f6ee}.riddle-result.incorrect{background:#fff0e6;border-color:#d7a47a}.riddle-result p{margin-bottom:0;white-space:pre-line}.fun-next{margin-top:22px}.fun-error{color:#a22f24}.fun-player button:disabled{opacity:.55;cursor:wait}.fun-page .back{display:inline-block;margin-top:16px}footer .footer-quote{flex:1;max-width:520px;white-space:normal;text-align:center;line-height:1.6;font-size:.85rem;overflow-wrap:anywhere}footer{gap:24px}.fun-player :focus-visible,.fun-tile:focus-visible{outline:3px solid #167e91;outline-offset:3px} @media(max-width:620px){.fun-page{padding-top:24px}.fun-tiles{grid-template-columns:1fr;gap:10px}.fun-tile{padding:18px}.fun-player{padding:16px;border-radius:14px;margin:24px 0}.fun-content{padding:16px}.fun-filters{flex-direction:column}.fun-content .fun-text{font-size:1rem}.fun-content blockquote{font-size:1.15rem!important}.fun-next{width:100%;justify-content:center}footer .footer-quote{flex:auto;width:100%;max-width:100%}} /* Màu vui tươi cho câu đố và truyện, nét thư thái cho danh ngôn. */ .fun-player.riddles{border-color:#81cbd6;border-top-color:#1598b3;background:linear-gradient(145deg,#e2f8fb,#fffdf3 75%);box-shadow:0 8px 0 #c5e9ec,0 16px 32px #16788a12} .riddles .fun-content{background:#fff8d9;border:2px dashed #d5b754;border-radius:22px 22px 22px 6px;color:#51441e} .riddles .fun-text{font-weight:650} .riddles .primary{background:#147e92;color:#fff;border:1px solid #0d6c80;box-shadow:0 4px 0 #0c5a69} .riddles .primary:hover{background:#106a7c} .riddles .fun-next{background:#ffe199;color:#514019;border-color:#d1a743;box-shadow:0 4px 0 #d1a743} .riddles .fun-next:hover{background:#ffd477} .riddles .riddle-form input{border-color:#80bec7} .fun-player.jokes{border-color:#e6af87;border-top-color:#e87e58;background:linear-gradient(145deg,#fff0df,#fff8ef 70%,#fce5e0);box-shadow:0 8px 0 #f2d1bb,0 16px 32px #9c572012} .jokes .fun-content{background:#fffdf5;border:1px solid #e8c999;border-left:5px solid #edac40;border-radius:8px 22px 22px 22px} .jokes .fun-content h2{color:#984025;font-weight:800} .jokes .fun-label{background:#ffdf98;color:#62450e} .jokes .primary{background:#ad482b;color:#fff;border:1px solid #933a22;box-shadow:0 4px 0 #81341e} .jokes .primary:hover{background:#943b24} .jokes .fun-filters select{border-color:#d5ac88} .fun-tile[href$="do-vui-tieng-anh.html"]{background:#d8f4f8;border-color:#8bcbd5;color:#116677} .fun-tile[href$="truyen-cuoi-tieng-anh.html"]{background:#ffe5c6;border-color:#e0b17c;color:#874522} .fun-tile[href$="do-vui-tieng-anh.html"]:hover{background:#bdeaf1} .fun-tile[href$="truyen-cuoi-tieng-anh.html"]:hover{background:#ffd5a4} .quotes .fun-content{background:linear-gradient(135deg,#f3f8f4,#fff8ec);border:1px solid #d5dfce;padding:32px} .quotes .fun-content blockquote.fun-text{font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;font-size:clamp(1.4rem,2.6vw,1.85rem)!important;font-style:italic;font-weight:400;line-height:1.65;letter-spacing:.01em;color:#315e60;padding-left:20px;border-left:3px solid #d5ac67;margin:26px 0} .quotes .fun-author{font-size:.95rem;letter-spacing:.03em;color:#866133} @media(max-width:620px){.quotes .fun-content{padding:20px 16px}.quotes .fun-content blockquote.fun-text{padding-left:14px;font-size:1.35rem!important}.riddles .primary,.jokes .primary{margin-bottom:4px}} /* Mỗi chuyên mục một sắc độ, giữ chữ đậm dễ đọc. */ .fun-count{display:none} .fun-filters:not(:empty){margin-bottom:20px} .riddles .fun-content .fun-text{font-size:1.25rem;line-height:1.75} .fun-tile[href$="cau-do-iq.html"]{background:#eae4f6;border-color:#beb0dc;color:#605080} .fun-tile[href$="chuyen-vui.html"]{background:#fbe1e5;border-color:#dfabb8;color:#934659} .fun-tile[href$="danh-ngon.html"]{background:#fff0cb;border-color:#d9bf80;color:#7a5a20} .fun-tile[href$="meo-hoc-tap.html"]{background:#dcf1e6;border-color:#9bcbb0;color:#28664b} .fun-tile[href$="cau-do-iq.html"]:hover{background:#ddd3ef} .fun-tile[href$="chuyen-vui.html"]:hover{background:#f6cdd6} .fun-tile[href$="danh-ngon.html"]:hover{background:#ffe6aa} .fun-tile[href$="meo-hoc-tap.html"]:hover{background:#c8e8d7} .fun-page:has(.quotes) h1{color:#7a5a20} .fun-player.quotes{border-color:#ddca96;border-top-color:#b78d3e;background:#fffdf6} .quotes .fun-content{background:#fff7e3;border-color:#e4d4a9} .quotes .primary{background:#806022;color:#fff}.quotes .primary:hover{background:#694e1b} .fun-page:has(.tips) h1{color:#28664b} .fun-player.tips{border-color:#a7cfb8;border-top-color:#438968;background:#f6fcf8} .tips .fun-content{background:#e2f3e9}.tips .fun-label{background:#c7e7d4;color:#245b42} .tips .primary{background:#317452;color:#fff}.tips .primary:hover{background:#255d41} .fun-page:has(.riddles) h1{color:#116677}.fun-page:has(.jokes) h1{color:#984025} .fun-cau-do-iq h1{color:#605080} .fun-cau-do-iq .card-art{background:#eae4f6;color:#605080} .fun-chuyen-vui h1{color:#934659} .fun-chuyen-vui .card-art{background:#fbe1e5;color:#934659} @media(max-width:620px){ .wrap{padding-left:8px;padding-right:8px} .article-wrap,.exam-wrap{padding-left:8px;padding-right:8px} .fun-player{padding:10px;margin:20px 0} .fun-content,.quotes .fun-content{padding:14px 10px} .riddles .fun-content .fun-text{font-size:1.15rem} .fun-filters:not(:empty){margin-bottom:14px} } .display-bar{border-bottom:1px solid var(--line);background:var(--paper)} .display-controls{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding-top:8px;padding-bottom:8px;font-size:14px;flex-wrap:wrap} .display-controls button{min-height:38px;min-width:40px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14px} .display-controls button:last-child{margin-left:8px}.display-controls button:disabled{opacity:.4;cursor:default} html[data-theme="dark"]{color-scheme:dark;--ink:#e3eeed;--muted:#a9bfbd;--line:#405b60;--paper:#142328} html[data-theme="dark"] body{background:var(--paper);color:var(--ink)} html[data-theme="dark"] :is(header,.nav-submenu,header nav#site-menu,.card,.article-wrap,.exam-wrap,.exam-question,.quiz,.quiz-option,.fun-player,.display-controls button,input,select,textarea,.search,.menu-toggle){background:#1d3238;color:var(--ink);border-color:var(--line);box-shadow:none} html[data-theme="dark"] :is(.hero,.subject-section,.about,.aside-note,.prose blockquote,.prose pre,.prose details,.exam-toolbar,.article-end,.fun-content,.quotes .fun-content,.tips .fun-content,.jokes .fun-content,.riddles .fun-content){background:#213b40;color:var(--ink);border-color:#49686a;box-shadow:none} html[data-theme="dark"] :is(.fun-page h1,.jokes .fun-content h2,.quotes .fun-content blockquote.fun-text,.fun-author,.prose a,.brand-name,.hero h1 span){color:#8edce5} html[data-theme="dark"] :is(.tag,.fun-label,.category.active,.nav-pill,.fun-tile,.card-art){background:#29474b;color:#d9eeee;border-color:#54787a} html[data-theme="dark"] :is(.fun-tile[href$="cau-do-iq.html"],.fun-cau-do-iq .card-art){background:#38334e;color:#ded2fc} html[data-theme="dark"] :is(.fun-tile[href$="chuyen-vui.html"],.fun-chuyen-vui .card-art){background:#4c303b;color:#ffd7df} html[data-theme="dark"] :is(.fun-tile[href$="truyen-cuoi-tieng-anh.html"],.jokes .fun-content){background:#47392c;color:#ffead7} html[data-theme="dark"] :is(.fun-tile[href$="danh-ngon.html"],.quotes .fun-content){background:#403d2c;color:#ffebbc} html[data-theme="dark"] :is(.fun-tile[href$="meo-hoc-tap.html"],.tips .fun-content){background:#254338;color:#d8f1df} html[data-theme="dark"] .riddles .fun-content{background:#393d29;color:#f4edcb} html[data-theme="dark"] :is(.riddle-result,.quiz-option:has(input:checked)){background:#244b3c;color:#dcf7e7;border-color:#68b58e} html[data-theme="dark"] .riddle-result.incorrect{background:#513b31;color:#ffe4d4;border-color:#d29b74} html[data-theme="dark"] :is(.about-brand,.brand.small){background:none;color:#8edce5;-webkit-text-fill-color:currentColor} html[data-theme="dark"] .prose img[src*="assets/latex/"],html[data-theme="dark"] .exam-question img[src*="assets/latex/"]{filter:invert(1) hue-rotate(180deg);background:#fff} html[data-theme="dark"] a:hover{color:#9de7ef} @media(max-width:620px){.display-controls{justify-content:center}.nav{min-height:80px;height:auto;padding-top:12px;padding-bottom:12px}} html[data-theme="dark"] :is(.primary,.go-top,.library-sections a.active){background:#236c7a;color:#fff;border-color:#5a9ba4} html[data-theme="dark"] :is(.hero p,.card p,.about p,.aside-note p,.exam-policy,.back,.eyebrow,.overline,.exam-nav-group strong,.lesson-video figcaption,footer p){color:#b4c9c6} html[data-theme="dark"] :is(.float,.subject-pick>span,#exam-nav a){background:#29474b;color:#d9eeee;border-color:#54787a} html[data-theme="dark"] :is(.exam-warning,#storage-warning){background:#493e2b;color:#f2dba9} html[data-theme="dark"] .quiz[data-result="correct"] .quiz-feedback{color:#8ee0ac} html[data-theme="dark"] .quiz[data-result="incorrect"] .quiz-feedback{color:#ffb8a1} /* Công cụ nằm trong menu; thông tin phụ gọn để ưu tiên nội dung. */ .nav{gap:14px}header nav{gap:18px}.display-controls{padding:0;flex-wrap:nowrap;gap:3px;flex-shrink:0}.display-controls button{padding:4px 7px;min-width:32px;font-size:13px}.display-controls button:last-child{margin-left:2px}.display-controls [data-size]{font-size:12px} .article-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin:14px 0;font-size:.78rem;color:var(--muted)}.article-meta .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}.article-meta .tag{padding:0;background:none;color:inherit;font-size:inherit;font-weight:400}.article-heading .eyebrow{font-size:.78rem;font-weight:500}.exam-meta,.exam-policy{font-size:.8rem;color:var(--muted);line-height:1.6;margin:8px 0}.exam-card .card-content>p{font-size:.8rem}.article-end{text-align:left;font-size:.95rem}.article-end>a{font-size:.8rem;font-weight:700}.article-end p{margin:10px 0 0;line-height:1.8} .exam-warning{background:#fff0d1;color:#794008;border:1px solid #dea04b;border-left:5px solid #c77813;font-weight:600}.exam-warning::before{content:'⚠ ';font-size:1.1em} .exam-toolbar{background:#e3f0ef;border:1px solid #a9c9c7;box-shadow:0 3px 12px #243b4012}.exam-toolbar #submit-exam{background:#356d77;color:#fff;border:1px solid #285862;box-shadow:none}.exam-toolbar #submit-exam:hover{background:#285862} .sort-controls{display:flex;gap:6px;flex-shrink:0}.sort-controls button{min-width:40px;min-height:38px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:.8rem;color:var(--muted)}.sort-controls button[aria-pressed="true"]{background:#e0f0ef;color:#256570;border-color:#97bfbd}.result-meta{gap:12px;flex-wrap:wrap} html[data-theme="dark"] .library{background:#1d3238;box-shadow:none} html[data-theme="dark"] .library-sections a{background:#29474b;color:#d9eeee} html[data-theme="dark"] .exam-warning{background:#523c1e;color:#ffe0a0;border-color:#b8822d;border-left-color:#efb953} html[data-theme="dark"] .exam-toolbar{background:#29454c;border-color:#577780;box-shadow:0 3px 12px #0002} html[data-theme="dark"] .exam-toolbar #submit-exam{background:#426e78;color:#f1fbfc;border-color:#75959c} html[data-theme="dark"] .exam-toolbar #submit-exam:hover{background:#507f88} html[data-theme="dark"] .prose img[src*="assets/latex/"],html[data-theme="dark"] .exam-question img[src*="assets/latex/"]{filter:invert(1) hue-rotate(180deg);background:#fff;mix-blend-mode:screen} html[data-theme="dark"] .sort-controls button[aria-pressed="true"]{background:#34575e;color:#e5f5f6} @media(max-width:1100px) and (min-width:951px){header nav{gap:10px;font-size:.85rem}.nav{gap:8px}.nav-pill{padding:10px}.nav-pill span{margin-left:4px}} @media(max-width:950px){header nav .display-controls{justify-content:flex-start;border-top:1px solid var(--line);padding:12px 14px;margin-top:6px}.display-controls button{min-width:40px;min-height:40px}} @media(max-width:620px){.about{margin-inline:0;padding-inline:8px;max-width:100%;border-radius:14px}.article-meta{font-size:.75rem;gap:6px 12px}.exam-meta,.exam-policy{font-size:.75rem}.article-heading{padding-bottom:18px}} /* Trò chơi dùng bảng màu dịu và trạng thái có mô tả bằng chữ. */ .fun-tile[href$="games.html"]{background:#dcebf9;border-color:#a1bdd8;color:#355c80}.game-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.game-tabs button,.game-panel button:not(.primary){padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:#e7f1ef;color:#285e63}.game-tabs button[aria-pressed="true"]{background:#317787;color:#fff}.game-panel{max-width:760px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px;margin:24px auto}.game-panel[hidden]{display:none}.game-panel button:disabled{opacity:.5;cursor:default}.game-panel p{line-height:1.7}.number-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;border-radius:14px;background:#a7c4c3;max-width:400px;touch-action:none;user-select:none}.number-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:#dce7e4;color:#31555c;font-size:clamp(1rem,5vw,1.7rem);font-weight:800}.number-cell[data-level="1"]{background:#f3f6e7}.number-cell[data-level="2"]{background:#f7e9c9}.number-cell[data-level="3"]{background:#f6c998}.number-cell[data-level="4"]{background:#efa37d}.number-cell[data-level="5"]{background:#e68470;color:#402329}.number-cell[data-level="6"],.number-cell[data-level="7"]{background:#97d4c1}.number-cell[data-level="8"],.number-cell[data-level="9"]{background:#69b8c4;color:#173b45}.number-cell[data-level="10"],.number-cell[data-level="11"]{background:#3b7588;color:#fff}.game-directions{display:flex;gap:8px;margin-top:14px}.game-directions button{flex:1;max-width:90px}.river-scene{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:16px;background:#e2f2f8;border-radius:14px;margin:20px 0}.river-scene h3{font-size:1rem}.river-scene p{font-size:.9rem}.game-panel select{padding:10px;max-width:100%;margin:10px}.word-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:340px;margin:6px 0}.word-cell{aspect-ratio:1;display:grid;place-items:center;font-size:1.4rem;font-weight:750;border-radius:6px;color:#fff}.word-cell.correct{background:#36754d}.word-cell.present{background:#8a681b}.word-cell.absent{background:#59686c}.word-entry{display:flex;gap:8px;margin:10px 0}.word-entry input{min-width:0;width:180px;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:1.1rem;text-transform:uppercase}.word-entry button{padding:10px 18px}.game-panel [role="status"]{min-height:2em;margin-top:16px} html[data-theme="dark"] .game-panel{background:#1d3238}html[data-theme="dark"] .river-scene{background:#29474b}html[data-theme="dark"] .game-tabs button,html[data-theme="dark"] .game-panel button:not(.primary){background:#31535b;color:#e3f2f1}html[data-theme="dark"] .game-tabs button[aria-pressed="true"]{background:#3d7c8b}html[data-theme="dark"] .fun-tile[href$="games.html"]{background:#2c4055;color:#d2e7fc} @media(max-width:620px){.game-panel{padding:14px 10px}.river-scene{padding:10px;gap:6px}.river-scene>span{font-size:.8rem}.game-panel select{margin-left:0}.number-board{gap:6px;padding:8px}.game-tabs button{padding:9px 12px;font-size:.85rem}} /* Công cụ hiển thị gọn, không khung. */ header .display-controls button,html[data-theme="dark"] header .display-controls button{background:transparent;border:0;box-shadow:none;border-radius:6px;color:var(--ink)} header .display-controls button:hover{background:#1598b315}header .display-controls button:focus-visible{outline:2px solid #1598b3} #game-numbers{text-align:center}#game-numbers .number-board{margin-inline:auto}#game-numbers .game-directions{justify-content:center} html[data-theme="dark"] .exam-question>h3{background:#2c4347;color:#cae4e0;border-left-color:#82ada9;box-shadow:none} html[data-theme="dark"] .prose h3{color:#cae4e0} html[data-theme="dark"] .exam-toolbar{background:#35565f;border-color:#72909a;box-shadow:0 4px 14px #0003} html[data-theme="dark"] .exam-toolbar #exam-timer{color:#f0f8f7}html[data-theme="dark"] .exam-toolbar #exam-timer::before{color:#c6dcd9} html[data-theme="dark"] .exam-toolbar #submit-exam{background:#547b85;border-color:#96b2b9;color:#fff} /* Lưới sáu lượt và bàn phím có gợi ý màu. */ #game-words{max-width:600px;text-align:center}#game-words>p:first-of-type{font-size:.85rem;color:var(--muted)} .word-board{width:min(100%,320px);margin:24px auto;display:grid;gap:6px}.word-board .word-row{margin:0;max-width:none;gap:6px} .word-board .word-cell{border:2px solid #c5cecc;border-radius:2px;background:transparent;color:var(--ink);font-size:1.75rem;line-height:1;font-weight:800} .word-board .word-cell.filled{border-color:#7f9392}.word-board .word-cell.correct{background:#538350;border-color:#538350;color:#fff}.word-board .word-cell.present{background:#a58a35;border-color:#a58a35;color:#fff}.word-board .word-cell.absent{background:#647071;border-color:#647071;color:#fff} .word-keyboard{margin:20px auto 0;max-width:500px;display:grid;gap:7px}.keyboard-row{display:flex;justify-content:center;gap:5px} #game-words .word-key{padding:0;min-width:0;flex:1;max-width:43px;height:52px;border:0;border-radius:5px;background:#d8dfdf;color:#263f42;font-size:.9rem;font-weight:750;touch-action:manipulation} #game-words .word-key.wide{flex:1.5;max-width:64px;font-size:1.15rem}#game-words .word-key.correct{background:#538350;color:#fff}#game-words .word-key.present{background:#a58a35;color:#fff}#game-words .word-key.absent{background:#647071;color:#fff}#game-words .word-key:disabled{opacity:1;cursor:default} .word-hint{font-size:.75rem;color:var(--muted);margin:12px 0}.word-reveal{animation:word-turn .35s ease both}@keyframes word-turn{from{transform:rotateX(80deg);opacity:.5}to{transform:rotateX(0);opacity:1}} #word-status{font-size:.85rem;line-height:1.6} html[data-theme="dark"] .word-board .word-cell.empty,html[data-theme="dark"] .word-board .word-cell.filled{border-color:#648086;color:#edf5f4} html[data-theme="dark"] #game-words .word-key:not(.correct):not(.present):not(.absent){background:#597075;color:#fff} @media(max-width:620px){.word-board{max-width:280px;margin:20px auto}.word-board .word-cell{font-size:1.5rem}.keyboard-row{gap:4px}#game-words .word-key{height:48px;font-size:.8rem}.word-keyboard{gap:6px}} @media(prefers-reduced-motion:reduce){.word-reveal{animation:none}} .word-help{font-size:.8rem;color:var(--muted)}.word-help summary{cursor:pointer;list-style-position:inside}.word-help p{margin:10px 0}.word-board{margin-block:18px}.word-hint{margin-block:8px}#game-words{scroll-margin-top:12px}#game-words h2{margin-bottom:8px} .river-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none} #game-river{max-width:900px;padding:26px;background:linear-gradient(145deg,#fffdf5,#f1faf7)}.river-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.river-heading h2{margin:6px 0 12px}.river-counter{flex-shrink:0;padding:5px 12px;border-radius:20px;background:#e3f1ea;color:#33654f;font-size:.85rem;font-weight:700}.river-intro{font-size:.95rem;color:var(--muted)} .river-world{position:relative;height:370px;border:1px solid #9fcab9;border-radius:20px;overflow:hidden;isolation:isolate;margin:24px 0}.river-landscape{position:absolute;inset:0;width:100%;height:100%}.river-bank{position:absolute;top:18px;width:29%;text-align:center;z-index:2}.river-bank.bank-left{left:1%}.river-bank.bank-right{right:1%}.river-bank h3{display:inline-block;background:#fffdf0e8;padding:4px 14px;border-radius:20px;color:#315342;font-size:.9rem;margin:0 0 12px}.river-characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0 5px} #game-river .river-character{min-width:0;padding:5px 2px;background:#ffffffdc;border:2px solid transparent;border-radius:12px;color:#305046;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.75rem;line-height:1.3;box-shadow:0 3px 7px #23482718;touch-action:manipulation}#game-river .river-character svg{display:block;width:100%;height:68px;filter:drop-shadow(0 2px 1px #0001)}#game-river .river-character:disabled{opacity:1;cursor:default}#game-river .river-character[aria-pressed="true"]{border-color:#b37d25;background:#fff2c7}#game-river .river-character[aria-pressed="true"] svg{opacity:.35}#game-river .river-character:not(:disabled):hover{border-color:#557f5e;transform:translateY(-2px)} .river-vessel{position:absolute;width:27%;height:135px;left:12%;bottom:24px;transition:left .65s ease-in-out;z-index:3;pointer-events:none}.river-world[data-side="1"] .river-vessel{left:61%}.river-vessel svg{position:absolute;overflow:visible}.river-boat{width:100%;height:60px;bottom:0;left:0}.river-farmer{width:38%;height:105px;bottom:28px;left:10%}.river-cargo{width:43%;height:80px;bottom:35px;right:6%}.river-oar{width:67%;height:24px;bottom:15px;left:38%;transform:rotate(-24deg);transform-origin:15% 50%}.is-crossing .river-oar{animation:river-row .4s ease-in-out infinite alternate}@keyframes river-row{to{transform:rotate(8deg)}} .river-controls{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap}.river-controls>div{display:grid;gap:6px;flex:1}.river-controls label{font-size:.85rem;font-weight:650}.river-controls #river-passenger{margin:0;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.river-controls .primary{justify-content:center;min-height:48px;gap:8px}.river-help{font-size:.8rem;color:var(--muted);margin:14px 0}.game-panel #river-status{padding:12px 16px;border-radius:12px;background:#e6f2ed;color:#305f4a;font-size:.9rem}.game-panel #river-status[data-result="won"]{background:#d8f0d8;color:#285b33}.game-panel #river-status[data-result="lost"]{background:#fff0d5;color:#7a4818} html[data-theme="dark"] #game-river{background:#1d3238}html[data-theme="dark"] .river-counter{background:#304e46;color:#cbe4d6}html[data-theme="dark"] .river-world{border-color:#567f74}html[data-theme="dark"] .river-landscape{filter:brightness(.7) saturate(.7)}html[data-theme="dark"] #game-river .river-character{background:#e5eddf;color:#28443b}html[data-theme="dark"] #game-river .river-character[aria-pressed="true"]{background:#efe0b8}html[data-theme="dark"] .river-controls #river-passenger{background:#294249;color:var(--ink)}html[data-theme="dark"] #river-status{background:#294c40;color:#d6eddd}html[data-theme="dark"] #river-status[data-result="lost"]{background:#513d29;color:#ffe0b5} @media(max-width:620px){#game-river{padding:16px 10px}.river-world{height:345px;border-radius:14px;margin:18px 0}.river-bank{width:30%;top:12px}.river-bank h3{padding:4px 8px;font-size:.75rem;margin-bottom:8px}.river-characters{grid-template-columns:1fr;gap:5px;padding:0 3px}#game-river .river-character{flex-direction:row;gap:3px;padding:3px;font-size:.65rem;text-align:left}#game-river .river-character svg{width:44%;height:49px;flex-shrink:0}.river-vessel{height:100px;width:37%;left:3%;bottom:22px}.river-world[data-side="1"] .river-vessel{left:59%}.river-farmer{height:79px;bottom:21px}.river-cargo{height:57px;bottom:28px}.river-boat{height:45px}.river-oar{height:18px}.river-controls{align-items:stretch}.river-controls>div,.river-controls .primary{width:100%;flex:auto}.river-heading .overline{font-size:.65rem;letter-spacing:1px}.river-heading h2{font-size:1.25rem}.river-counter{font-size:.75rem;padding:4px 9px}} @media(prefers-reduced-motion:reduce){.river-vessel{transition:none}.is-crossing .river-oar{animation:none}} .puzzle-levels{display:flex;align-items:center;gap:10px;margin:12px 0}.puzzle-levels label{font-size:.85rem;white-space:nowrap}.game-panel .puzzle-levels select{margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:9px;min-width:0;max-width:100%;font-size:.9rem}.puzzle-instructions,#river-mission,#water-mission{font-size:.85rem;line-height:1.7}#river-mission,#water-mission{font-weight:650} .scene-tools{position:absolute;right:10px;top:10px;display:flex;gap:7px;z-index:6}.game-panel .scene-tools button{border:0;border-radius:50%;background:#fffdf0df;color:#335b59;width:36px;height:36px;padding:0;font-size:1.3rem}.scene-tools button[hidden]{display:none} .river-bank{top:52px}#game-river .river-character,html[data-theme="dark"] #game-river .river-character{background:transparent;border:0;box-shadow:none;border-radius:0;color:#173e30}#game-river .river-character:not(:disabled):hover{border:0;filter:brightness(1.12)}#game-river .river-character:focus-visible{outline:3px solid #f1c56e;outline-offset:2px}.river-character span{background:#f5fff0b8;border-radius:6px;padding:2px 4px}.river-vessel svg{pointer-events:none} #game-river #river-cross{position:absolute;inset:0;z-index:4;pointer-events:auto;width:100%;height:100%;border:0;padding:0;background:transparent;box-shadow:none;border-radius:45%;cursor:pointer}#game-river #river-cross:focus-visible{outline:3px dashed #fff;outline-offset:5px}#game-river #river-cross:disabled{cursor:default} #game-river #river-unload{position:absolute;z-index:5;pointer-events:auto;right:6%;bottom:35px;width:43%;height:80px;background:transparent;padding:0;border:0;box-shadow:none}#game-river #river-unload[hidden]{display:none}#river-unload .river-cargo{inset:0;width:100%;height:100%} #game-water{max-width:760px;background:linear-gradient(135deg,#fff,#eaf7fb)}.water-world{position:relative;border:1px solid #a4c9db;border-radius:20px;background:linear-gradient(#e5f5fb 0 72%,#c3e4e6 72% 76%,#e2eee8 76%);padding:48px 20px 12px;margin:20px 0}.water-fixtures{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-panel .water-fixture{background:transparent;border:0;padding:0;color:#315868;width:100px;flex-shrink:0;display:grid;justify-items:center;font-size:.8rem}.water-fixture svg{width:100%;height:85px}.water-target{display:grid;text-align:center;gap:4px;color:#315868;font-size:.8rem}.water-target strong{font-size:1.3rem;color:#1e7584}.water-jugs{display:flex;justify-content:center;align-items:end;gap:36px;margin:24px 0 8px}.game-panel .water-jug{width:190px;max-width:43%;padding:6px;background:none;border:2px solid transparent;border-radius:16px;color:#2e6070;display:grid;text-align:center;gap:4px}.water-jug svg{width:100%;height:190px;overflow:visible;filter:drop-shadow(0 5px 3px #2e718620)}.water-jug[data-jug="1"] svg{height:155px}.water-jug strong{font-size:1rem}.water-jug>span{font-size:.85rem}.game-panel .water-jug[aria-pressed="true"]{border-color:#2b9ab0;background:#ffffff70}.water-selection{text-align:center;color:#315868;font-size:.8rem;min-height:2.5em;margin-top:16px}.water-world .jug-glass{fill:#fff;stroke:#45aaf2;stroke-width:4;stroke-linejoin:round;rx:12;opacity:.95}.water-world .jug-handle{fill:none;stroke:#45aaf2;stroke-width:6;stroke-linecap:round}.water-world .water{fill:#2bcbba;opacity:.75;transition:height .3s,y .3s}.water-world .eye{fill:#2d98da}.water-world .smile{stroke:#2d98da;stroke-width:2.5;fill:none;stroke-linecap:round}#water-status{font-size:.9rem;padding:12px;background:#e3f1f0;border-radius:10px}#water-status[data-result="won"]{background:#dcefd8;color:#275b33}#water-status[data-result="lost"]{background:#ffefd5;color:#7b501e} html[data-theme="dark"] #game-water{background:#1d3238}html[data-theme="dark"] .water-world{background:linear-gradient(#294754 0 72%,#385c60 72% 76%,#314940 76%);border-color:#527984}html[data-theme="dark"] #game-water .water-fixture,html[data-theme="dark"] #game-water .water-jug{background:transparent;color:#d5ebeb}html[data-theme="dark"] #game-water .water-jug[aria-pressed="true"]{background:#49656a55;border-color:#8bced5}html[data-theme="dark"] :is(.water-target,.water-target strong,.water-selection){color:#d5ebeb}html[data-theme="dark"] #water-status{background:#2b4548;color:#d5ebeb}html[data-theme="dark"] #water-status[data-result="won"]{background:#2a4f3b;color:#d5f4da}html[data-theme="dark"] #water-status[data-result="lost"]{background:#51402b;color:#ffe4bb} @media(max-width:620px){.river-bank{top:55px}#game-river #river-unload{height:57px;bottom:28px}.water-world{padding:45px 8px 8px}.water-fixtures{gap:5px}.game-panel .water-fixture{width:75px}.water-fixture svg{height:66px}.water-target strong{font-size:1.05rem}.water-jugs{gap:16px}.water-jug svg{height:160px}.water-jug[data-jug="1"] svg{height:130px}.water-selection{font-size:.75rem}#game-water{padding:16px 10px}} @media(prefers-reduced-motion:reduce){.water-world .water{transition:none}} #game-water .water-fixture{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}#game-water .water-jug{background:transparent;border:2px solid transparent;box-shadow:none}#game-water .water-jug[aria-pressed="true"]{background:#ffffff55;border-color:#2b9ab0}#game-water .water-fixture:disabled,#game-water .water-jug:disabled{opacity:1}#game-water .water-fixture svg{filter:drop-shadow(0 2px 1px #22556618)}#game-water .water-fixture:not(:disabled):hover svg{transform:translateY(-3px)} /* Open introduction and direct-manipulation puzzle scenes. */ .about{margin:0 auto 45px;padding-block:56px;border:0;border-radius:0;box-shadow:none;background:linear-gradient(135deg,#fff 0%,#eaf7f5 100%);gap:32px} .about h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.3;letter-spacing:-.6px} html[data-theme="dark"] .about{border:0;box-shadow:none;background:linear-gradient(135deg,#1d3238,#213b40)} #river-mission,#water-mission{font-size:1.03rem;font-weight:750;line-height:1.65;background:#e4f3ed;color:#255e55;border-left:4px solid #2e9887;border-radius:0 12px 12px 0;padding:14px 18px;margin:14px 0} #water-mission{background:#e4f1fa;border-color:#438caf;color:#285971} html[data-theme="dark"] #river-mission{background:#294c43;color:#def2e4;border-color:#82baa5} html[data-theme="dark"] #water-mission{background:#294650;color:#d9edf7;border-color:#77b4d4} .river-world{height:440px}.river-bank{top:62px;width:30%}.river-characters{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:0} #game-river .river-character{display:block;padding:0;min-height:52px;position:relative} #game-river .river-character svg{width:100%;height:66px} .river-vessel{height:150px;width:34%;left:7%;bottom:20px;transition:left 1s ease-in-out} .river-world[data-side="1"] .river-vessel{left:59%} .river-farmer{left:1%;width:30%} #game-river #river-cross{inset:auto 0 0;height:32%;border-radius:0 0 45% 45%} #river-cargo{position:absolute;bottom:42px;left:30%;width:68%;height:80px;display:flex;align-items:end;z-index:5;pointer-events:none} #game-river .river-passenger{flex:1;min-width:0;height:78px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:auto} #river-cargo svg{position:static;width:100%;height:100%;filter:drop-shadow(0 2px 1px #0003)} #game-river .river-passenger:disabled{opacity:1} .is-crossing .river-boat{animation:boat-bob .35s ease-in-out infinite alternate} .is-crossing .river-oar{animation:river-row .35s ease-in-out infinite alternate} .is-crossing .river-vessel::after{content:"";position:absolute;width:65%;height:15px;bottom:-5px;left:18%;border-bottom:3px solid #c5f4ff;border-radius:50%;animation:wake .5s infinite} .is-munching{z-index:4;animation:munch .8s ease-in-out 2} .is-eaten{animation:eaten 1.6s ease-in forwards} @keyframes boat-bob{to{transform:translateY(4px) rotate(1deg)}} @keyframes wake{to{transform:scaleX(1.3);opacity:.15}} @keyframes munch{50%{transform:translate(var(--chase-x),var(--chase-y)) rotate(-9deg)}75%{transform:translate(var(--chase-x),var(--chase-y)) rotate(8deg)}} @keyframes eaten{40%{transform:scale(1)}65%{transform:scale(.8) rotate(12deg)}100%{transform:scale(0);opacity:0}} #game-water{max-width:900px} .water-world{padding:52px 18px 20px;min-height:345px} .water-decoration{width:70px;height:60px;opacity:.65} .water-jugs{gap:12px;margin:28px 0 5px;align-items:end} #game-water .water-jug,html[data-theme="dark"] #game-water .water-jug{flex:1;width:auto;max-width:170px;min-width:0;padding:0 4px;border:0;border-radius:0;background:transparent;transition:transform .25s,filter .25s;position:relative} #game-water .water-jug svg{height:var(--jug-size,170px);width:100%;transition:transform .45s;transform-origin:50% 80%} #game-water .water-jug[aria-pressed="true"],html[data-theme="dark"] #game-water .water-jug[aria-pressed="true"]{border:0;background:transparent;transform:translateY(-14px);filter:drop-shadow(0 8px 6px #238aab55)} #game-water .water-jug strong{font-size:.95rem;font-weight:750} #game-water .water-jug:focus-visible{outline:2px dashed #218cb1;outline-offset:5px} #game-water .water-jug.is-pouring svg{transform:rotate(var(--tilt,22deg)) translateY(-8px)} #game-water .water-jug.is-filling svg{animation:jug-fill .8s ease-in-out} .water-world .water{transition:height .7s ease-in-out,y .7s ease-in-out} #water-stream{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;opacity:0} #water-stream.flowing{opacity:1} #water-stream path{fill:none;stroke:#39b6d9;stroke-width:6;stroke-linecap:round;stroke-dasharray:8 8;animation:water-flow .45s linear infinite} @keyframes water-flow{to{stroke-dashoffset:-32}} @keyframes jug-fill{50%{transform:translateY(3px) rotate(2deg)}} @media(max-width:620px){ .about{margin-inline:auto;padding:35px 8px;gap:12px}.about h2{font-size:1.6rem} #river-mission,#water-mission{padding:12px;font-size:.95rem} .river-world{height:450px}.river-world.is-crowded{height:510px}.river-bank{width:32%;top:68px}.river-characters{grid-template-columns:repeat(2,minmax(0,1fr))} #game-river .river-character svg{height:53px;width:100%} .river-vessel{width:43%;left:0;height:130px}.river-world[data-side="1"] .river-vessel{left:56%} #river-cargo{height:68px;bottom:32px;left:28%;width:70%}#game-river .river-passenger{height:62px} .water-world{padding:52px 6px 16px;min-height:310px}.water-jugs{gap:2px} #game-water .water-jug svg{height:var(--jug-mobile-size,135px)}.water-jugs:has(> :nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;justify-items:center} .water-jugs:has(> :nth-child(4)) .water-jug{width:100%;max-width:130px} #game-water .water-jug strong{font-size:.85rem} } @media(prefers-reduced-motion:reduce){ .is-crossing .river-boat,.is-crossing .river-vessel::after,.is-munching,.is-eaten,#water-stream path,#game-water .water-jug.is-filling svg{animation:none} #game-water .water-jug,#game-water .water-jug svg,.water-world .water,.river-vessel{transition:none} .is-eaten{opacity:.3} } /* Calm, rounded navigation with a continuous hover path into submenus. */ header{position:relative;z-index:20;background:#ffffffed;border-bottom:1px solid #c8e0dd;box-shadow:0 4px 24px #24494e09} header .nav{min-height:88px} header #site-menu{gap:8px} header #site-menu>a:not(.nav-pill),header .nav-exams>summary{padding:10px 12px;border-radius:12px;transition:background .18s,color .18s} header .nav-exams>summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer} header .nav-exams>summary::-webkit-details-marker{display:none} header .nav-exams>summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s} header .nav-exams[open]>summary::after{transform:rotate(225deg) translate(-2px,-1px)} header #site-menu>a:not(.nav-pill):hover,header .nav-exams[open]>summary,header .nav-exams>summary:hover{background:#e3f2f1;color:#167481} header .nav-exams>summary:focus-visible{outline:2px solid #2699aa;outline-offset:3px} header .nav-submenu{top:calc(100% + 8px);min-width:220px;padding:8px;border:1px solid #d1e4df;border-radius:16px;box-shadow:0 16px 40px #193f4926;background:#fff} header .nav-submenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px} header .nav-submenu a{font-size:.92rem;font-weight:550;border-radius:10px;padding:10px 14px;transition:background .18s,color .18s} header .nav-submenu a:hover,header .nav-submenu a:focus-visible{background:#e6f4f1;color:#126b75} header .nav-exams[open] .nav-submenu{animation:menu-reveal .16s ease-out} header .nav-pill{border-radius:999px;background:#cfece7;border-color:#b2d9d2;box-shadow:none;white-space:nowrap} header .display-controls{margin-left:5px;padding-left:8px;border-left:1px solid var(--line)} @keyframes menu-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} html[data-theme="dark"] header{background:#1d3238;border-color:#3c5d61;box-shadow:0 4px 24px #0002} html[data-theme="dark"] header .nav-submenu{background:#243e44;border-color:#49686a;box-shadow:0 16px 40px #0004} html[data-theme="dark"] header :is(.nav-exams[open]>summary,.nav-exams>summary:hover,.nav-submenu a:hover,.nav-submenu a:focus-visible){background:#31565e;color:#c0edf0} html[data-theme="dark"] header #site-menu>a:not(.nav-pill):hover{background:#31565e;color:#c0edf0} @media(max-width:1100px) and (min-width:951px){header #site-menu{gap:2px}header #site-menu>a:not(.nav-pill),header .nav-exams>summary{padding:9px 7px}header .nav-pill{padding:9px 12px}} @media(max-width:950px){ header .nav{min-height:78px}header nav#site-menu{left:8px;right:8px;padding:10px;border-radius:18px;gap:3px} header nav#site-menu .nav-exams>summary{display:flex;justify-content:space-between;border-radius:11px} header nav#site-menu .nav-exams>summary::after{content:"";margin-right:5px} header nav#site-menu .nav-submenu{margin:3px 8px 8px;padding:6px;border:0;border-radius:12px;background:#eff7f5} header nav#site-menu .nav-submenu::before{display:none} header nav#site-menu .nav-pill{border-radius:12px} header nav#site-menu .display-controls{border-left:0;margin-left:0;padding:10px 14px} html[data-theme="dark"] header nav#site-menu .nav-submenu{background:#243e44} } .game-panel [data-puzzle-sound] svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .game-panel [data-puzzle-sound]{display:grid;place-items:center} #river-mission,#water-mission{border:1px solid #9bcdbf;border-radius:16px;background:linear-gradient(120deg,#d7eee3,#edf7e9);box-shadow:0 5px 15px #2f705d15;color:#234f43;padding:17px 20px;font-weight:750} #water-mission{border-color:#94c5dc;background:linear-gradient(120deg,#d7ebf8,#e7f6f6);box-shadow:0 5px 15px #24628218;color:#234f68} html[data-theme="dark"] #river-mission{border:1px solid #629d87;background:linear-gradient(120deg,#305b4c,#29473e);box-shadow:0 5px 18px #0002;color:#e3f7e9} html[data-theme="dark"] #water-mission{border:1px solid #649bb1;background:linear-gradient(120deg,#315769,#294750);box-shadow:0 5px 18px #0002;color:#e3f5ff} #game-water .water-jug[aria-pressed="true"],html[data-theme="dark"] #game-water .water-jug[aria-pressed="true"]{transform:translateY(-28px);filter:brightness(1.12) drop-shadow(0 0 10px #53d5edb0) drop-shadow(0 12px 7px #238aab45);background:transparent;border:0} #game-water .water-jug[aria-pressed="true"] strong{color:#087c99} html[data-theme="dark"] #game-water .water-jug[aria-pressed="true"] strong{color:#b0f2ff} .water-jugs{margin-top:42px} @media(max-width:620px){#river-mission,#water-mission{padding:14px 15px}.water-jugs:has(> :nth-child(4)){row-gap:38px}} @media(prefers-reduced-motion:reduce){header .nav-exams[open] .nav-submenu{animation:none}} /* Edge-to-edge mobile navigation; the close control remains in the header. */ header .menu-toggle,html[data-theme="dark"] header .menu-toggle{border:0;background:transparent;box-shadow:none;border-radius:0} .game-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .game-title-row h2,#game-words .game-title-row h2{margin:0} .game-panel .game-sound,html[data-theme="dark"] .game-panel .game-sound{width:40px;height:40px;padding:9px;background:transparent;border:0;box-shadow:none;color:var(--ink);flex-shrink:0} @media(max-width:950px){ body.menu-open{overflow:hidden} body.menu-open header{position:fixed;inset:0 0 auto;z-index:100;background:#fff;box-shadow:none} body.menu-open header nav#site-menu{position:fixed;top:var(--mobile-nav-height,88px);bottom:0;left:0;right:0;max-height:none;width:100%;margin:0;padding:16px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;background:#fff} header nav#site-menu .nav-submenu,html[data-theme="dark"] header nav#site-menu .nav-submenu{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0 0 8px 14px;padding:0} header nav#site-menu .display-controls{margin-top:auto;padding-top:16px} html[data-theme="dark"] body.menu-open header,html[data-theme="dark"] body.menu-open header nav#site-menu{background:#1d3238} } /* Results stay inside each game, with finite, reduced-motion-aware animation. */ .number-scene{position:relative;max-width:400px;margin-inline:auto;border-radius:14px;overflow:hidden} .number-scene .number-board{margin:0} .game-result{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#ecf6efeb;backdrop-filter:blur(5px);overflow:auto;border-radius:inherit} .game-result[hidden]{display:none} .result-card{position:relative;text-align:center;width:100%;max-width:360px;animation:result-enter .45s ease-out} .result-art{width:88px;height:88px;margin:0 auto 12px;animation:result-pop .75s ease-out} .result-art svg{width:100%;height:100%} .game-result h3{font-size:1.6rem;line-height:1.2;color:#24634b;margin:0 0 12px} .game-result p{font-size:.95rem;line-height:1.6;color:#335c51;margin:0 0 18px} .result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px} .game-panel .result-actions button{background:#2f7965;color:#fff;border:0;padding:10px 16px;border-radius:12px;font-size:.9rem;min-height:42px} .game-panel .result-actions [data-result-dismiss]{background:transparent;color:#47695d;font-size:.8rem} .game-panel .result-actions button[hidden]{display:none} .game-result[data-outcome="lost"]{background:#fbefe7eb} .game-result[data-outcome="lost"] h3{color:#885239} .game-result[data-outcome="lost"] p{color:#735a4d} .game-result[data-outcome="lost"] .result-art{animation:result-sway .7s ease-in-out} .game-result[data-outcome="lost"] .result-actions button:not([data-result-dismiss]){background:#966446} .result-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden} .result-confetti i{position:absolute;top:-20px;left:calc(var(--i)*5%);width:8px;height:13px;background:#56b89c;border-radius:2px;animation:result-fall 2s calc(var(--i)*.035s) ease-in both} .result-confetti i:nth-child(3n){background:#efba51} .result-confetti i:nth-child(3n+1){background:#ee9580} .game-result[data-outcome="lost"] .result-confetti{display:none} @keyframes result-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes result-pop{0%{transform:scale(.3) rotate(-12deg)}60%{transform:scale(1.12) rotate(5deg)}100%{transform:scale(1) rotate(0)}} @keyframes result-sway{25%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}85%{transform:rotate(-3deg)}} @keyframes result-fall{to{top:110%;transform:translateX(20px) rotate(500deg);opacity:0}} html[data-theme="dark"] .game-result{background:#203d36ed} html[data-theme="dark"] .game-result h3{color:#bef0d2} html[data-theme="dark"] .game-result p{color:#d1e6dc} html[data-theme="dark"] .game-result[data-outcome="lost"]{background:#42342ced} html[data-theme="dark"] .game-result[data-outcome="lost"] h3{color:#ffd6b5} html[data-theme="dark"] .game-result[data-outcome="lost"] p{color:#ecd6c6} html[data-theme="dark"] .game-panel .result-actions [data-result-dismiss]{background:transparent;color:#c8ded2} @media(max-width:620px){.game-result{padding:12px}.result-art{width:64px;height:64px;margin-bottom:8px}.game-result h3{font-size:1.3rem}.game-result p{font-size:.85rem;margin-bottom:12px}.game-panel .result-actions button{font-size:.8rem;padding:8px 12px}} @media(prefers-reduced-motion:reduce){.result-card,.result-art,.game-result[data-outcome="lost"] .result-art{animation:none}.result-confetti{display:none}} /* In-scene instructions and deliberately paced water/rowing motion. */ .game-panel .scene-guidance{position:relative;z-index:7;text-transform:uppercase;font-weight:800;letter-spacing:.45px;line-height:1.55;text-align:center;border:0;box-shadow:none} .game-panel .water-fixtures #water-status{flex:1;min-width:0;min-height:94px;margin:0;padding:14px 12px;background:transparent;color:#276c7c;border:0;border-radius:0;font-size:.85rem;display:grid;align-content:center} .game-panel .river-world #river-status{position:absolute;top:54px;left:12px;right:12px;margin:0;min-height:58px;padding:12px 16px;border-radius:0;background:transparent;color:#295d56;border:0;font-size:.85rem} .river-world{height:510px}.river-bank{top:144px} .river-vessel{transition:left var(--trip-duration,2600ms) cubic-bezier(.35,0,.3,1)} .is-crossing .river-oar{animation:rowing-stroke .9s ease-in-out infinite} .is-crossing .river-farmer{animation:rowing-lean .9s ease-in-out infinite;transform-origin:50% 90%} .is-crossing .river-boat{animation:boat-bob .9s ease-in-out infinite alternate} .is-crossing .river-vessel::after{animation:wake 1.2s infinite} .river-ripples{position:absolute;left:68%;bottom:3px;width:45%;height:25px;opacity:0;pointer-events:none} .is-crossing .river-ripples{opacity:1} .river-ripples i{position:absolute;inset:0;border:2px solid #c0f3ff;border-radius:50%;animation:rowing-ripple .9s ease-out infinite;transform:scale(.2);opacity:0} .river-ripples i:nth-child(2){animation-delay:.3s}.river-ripples i:nth-child(3){animation-delay:.6s} @keyframes rowing-stroke{0%,100%{transform:rotate(-26deg) translateY(-4px)}35%{transform:rotate(5deg) translateY(5px)}60%{transform:rotate(12deg) translateY(1px)}80%{transform:rotate(-15deg) translateY(-7px)}} @keyframes rowing-lean{40%{transform:rotate(4deg) translateX(2px)}80%{transform:rotate(-3deg)}} @keyframes rowing-ripple{15%{opacity:.8}100%{transform:scale(1.3);opacity:0}} .water-world .water{transition:height var(--pour-duration,1750ms) .25s linear,y var(--pour-duration,1750ms) .25s linear} #game-water .water-jug svg{transition:transform .4s ease-in-out} #game-water .water-jug.is-pouring{z-index:8} #game-water .water-jug.is-pouring svg{transform:translate(var(--pour-x,0px),var(--pour-y,-8px)) rotate(var(--tilt,22deg))} #game-water .water-jug.is-filling svg{animation:jug-fill 1.1s ease-in-out 2} #water-stream{z-index:6;transition:opacity .12s} #water-stream.flowing{animation:stream-appear .25s step-end} #water-stream path{stroke-dasharray:none;animation:none} #water-stream .stream-body{stroke:#27add1;stroke-width:7;opacity:.75} #water-stream .stream-highlight{stroke:#c2f4ff;stroke-width:2;stroke-dasharray:6 12;animation:water-flow .9s linear infinite} .stream-landing{fill:#a2edff;stroke:#53c3db;stroke-width:1.5} .stream-landing ellipse{fill:none;animation:landing-ripple .7s ease-out infinite;transform-box:fill-box;transform-origin:center} .stream-landing ellipse:nth-child(2){animation-delay:.35s} .stream-landing circle{animation:landing-drop .7s ease-out infinite;transform-box:fill-box;transform-origin:center} .stream-landing circle:last-child{animation-delay:.25s} @keyframes stream-appear{from{opacity:0}to{opacity:1}} @keyframes landing-ripple{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}} @keyframes landing-drop{from{transform:translateY(6px);opacity:1}to{transform:translateY(-5px);opacity:0}} html[data-theme="dark"] .game-panel .water-fixtures #water-status,html[data-theme="dark"] .game-panel .river-world #river-status{background:transparent;color:#c6edf0;border:0} @media(max-width:620px){ .water-fixtures{gap:5px;align-items:center}#game-water .water-fixture{width:48px} .game-panel .water-fixtures #water-status{font-size:.73rem;padding:10px 8px;min-height:108px;letter-spacing:.25px} .game-panel .river-world #river-status{font-size:.75rem;left:8px;right:8px;padding:10px;min-height:66px} .river-world{height:530px}.river-world.is-crowded{height:590px}.river-bank{top:150px} } @media(prefers-reduced-motion:reduce){ .river-vessel,.water-world .water,#game-water .water-jug svg{transition:none} .is-crossing .river-oar,.is-crossing .river-farmer,.river-ripples i,#water-stream.flowing,#water-stream .stream-highlight,.stream-landing ellipse,.stream-landing circle{animation:none} .river-ripples{display:none} } /* Labels share the glass centerline; volume remains below the vessel. */ .water-jug .jug-on-can{font-family:inherit;font-size:13px;font-weight:750;fill:#235970;letter-spacing:.15px;font-variant-numeric:tabular-nums} .water-jug .jug-below-can{font-family:inherit;font-size:13px;font-weight:750;fill:#315f6c} #game-water .water-jug svg{height:calc(var(--jug-size,170px)*1.22)} @media(max-width:620px){#game-water .water-jug svg{height:calc(var(--jug-mobile-size,135px)*1.22)}} html[data-theme="dark"] .water-jug .jug-below-can{fill:#d1ecec} .game-panel .scene-guidance{font-weight:700;letter-spacing:.6px} .game-panel .river-world #river-status{text-shadow:0 1px 2px #ffffff60} html[data-theme="dark"] .game-panel .river-world #river-status{color:#153f3b;text-shadow:0 1px 2px #ffffff40} /* Unframed puzzle scenes fill the available page width. */ #game-river,#game-water,html[data-theme="dark"] :is(#game-river,#game-water){max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #game-river .river-world,#game-water .water-world{width:100%;border:0;border-radius:0;box-shadow:none} #game-water .water-jugs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));align-items:end;justify-items:center;gap:24px;max-width:850px;margin:48px auto 10px} #game-water .water-jug{width:100%;max-width:180px;justify-self:center} #game-water .water-jug svg{display:block;margin-inline:auto;overflow:visible} html[data-theme="dark"] .hero{background:linear-gradient(135deg,#1b3039,#254550)} html[data-theme="dark"] .subject-section{background:#30493d;border-block:1px solid #567361} html[data-theme="dark"] .subject-row{background:transparent} @media(max-width:620px){ .hero,html[data-theme="dark"] .hero{border-radius:0} #game-river .river-world,#game-water .water-world{width:calc(100% + 16px);margin-inline:-8px} #game-water .water-jugs{gap:16px 8px} #game-water .water-jugs:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px} } /* Clear separation between the introduction and subject navigation, at every width. */ .hero,html[data-theme="dark"] .hero{border-radius:0} .about,html[data-theme="dark"] .about{border-radius:22px;overflow:hidden} .subject-section{background:#f3dfc9;border-block:1px solid #d8b897;box-shadow:none} .subject-row{background:transparent} .subject-section .overline{color:#856445} .subject-picks{flex-wrap:wrap;gap:18px;justify-content:space-evenly} html[data-theme="dark"] .subject-section{background:#4b4034;border-color:#79644e} html[data-theme="dark"] .subject-section .overline{color:#dcc2a4} @media(max-width:620px){.about,html[data-theme="dark"] .about{border-radius:16px}} #game-river #river-farmer-cross{position:absolute;left:1%;bottom:28px;width:30%;height:105px;z-index:4;pointer-events:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #river-farmer-cross:focus-visible{outline:2px dashed #245f66;outline-offset:3px} @media(max-width:620px){#game-river #river-farmer-cross{height:79px;bottom:21px}} /* Original SVG shapes and colours, with only lightly rounded corners. */ .water-world .jug-glass{rx:8px;ry:8px;fill:#fff;stroke:#45aaf2;stroke-width:4;opacity:.95} .water-world .jug-handle{stroke:#45aaf2;stroke-width:6;stroke-linecap:round} .water-world .water{fill:#2bcbba;opacity:.75;rx:5px;ry:5px} .water-world .eye{fill:#2d98da} .water-world .smile{stroke:#2d98da}