:root{--quiz-green:#173f34;--quiz-green-2:#286c56;--quiz-gold:#c8923d;--quiz-cream:#f6f1e5;--quiz-paper:#fffdf8;--quiz-ink:#17251f;--quiz-muted:#65716c;--quiz-line:#ded8ca;--quiz-red:#a43b32}
html{scroll-behavior:smooth}.quiz-page{background:#fbfaf6;color:var(--quiz-ink)}.quiz-page .topbar nav a.active{color:var(--quiz-green-2);border-bottom:2px solid var(--quiz-gold)}
.quiz-hero{position:relative;isolation:isolate;overflow:hidden;min-height:520px;padding:90px max(7vw,40px);display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:70px;background:#f7f3e8}.quiz-hero:before{content:"";position:absolute;z-index:-2;inset:0;background:url("/images/quiz/hero-study-history-v2.png") center/cover no-repeat;opacity:.88}.quiz-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(247,243,232,.98) 0%,rgba(247,243,232,.94) 43%,rgba(247,243,232,.25) 62%,rgba(247,243,232,.06) 100%)}.quiz-hero>div,.quiz-hero>aside{position:relative;z-index:1}.quiz-hero h1,.section-heading h2,.quiz-status h2,.quiz-result h2{font-family:"Playfair Display",serif}.quiz-hero h1{font-size:clamp(46px,6vw,84px);line-height:1.02;margin:16px 0 24px;max-width:900px}.quiz-hero h1 em{color:#347b61;font-style:normal}.quiz-hero p{font-size:18px;line-height:1.8;color:var(--quiz-muted);max-width:700px}.quiz-hero>a,.quiz-hero div>a{display:inline-flex;background:var(--quiz-green);color:#fff;text-decoration:none;padding:16px 24px;margin-top:18px;font-weight:700;border-radius:4px}.quiz-hero aside{display:grid;grid-template-columns:1fr 1fr;background:rgba(23,63,52,.96);color:#fff;padding:30px;gap:14px;border-radius:4px;box-shadow:20px 20px 0 rgba(200,146,61,.22)}.quiz-hero aside b{font-family:"Playfair Display",serif;font-size:38px;color:#e5bb72}.quiz-hero aside span{align-self:center;color:#dbe9e3}
.section-shell{max-width:1280px;margin:auto;padding:90px 38px}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}.section-heading h2{font-size:clamp(34px,4vw,52px);margin:8px 0}.section-heading p{max-width:420px;color:var(--quiz-muted);line-height:1.7}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:var(--quiz-gold)}
.grade-tabs{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.grade-tab{border:1px solid var(--quiz-line);background:#fff;padding:12px 22px;border-radius:999px;font:700 15px "Be Vietnam Pro",sans-serif;color:var(--quiz-ink);cursor:pointer}.grade-tab.active{background:var(--quiz-green);color:#fff;border-color:var(--quiz-green)}.mindmap-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mindmap-gallery.three{grid-template-columns:repeat(3,minmax(0,1fr))}.mindmap-open{position:relative;border:0;padding:0;background:#fff;cursor:zoom-in;overflow:hidden;box-shadow:0 12px 32px rgba(31,52,43,.1)}.mindmap-open:after{content:"⛶  Phóng lớn";position:absolute;right:12px;bottom:12px;padding:8px 11px;background:rgba(23,63,52,.9);color:#fff;font:700 12px "Be Vietnam Pro",sans-serif;border-radius:3px;opacity:0;transform:translateY(5px);transition:.2s}.mindmap-open:hover:after,.mindmap-open:focus:after{opacity:1;transform:none}.mindmap-open img{width:100%;display:block;border:1px solid var(--quiz-line);transition:transform .25s}.mindmap-open:hover img{transform:scale(1.015)}
#mindmap.section-shell{padding-bottom:55px}.bank-section{border-top:1px solid var(--quiz-line);padding-top:55px}.grade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grade-card{position:relative;text-align:left;border:1px solid var(--quiz-line);background:var(--quiz-paper);padding:25px;min-height:195px;cursor:pointer;transition:.2s;font:inherit}.grade-card:hover,.grade-card.active{transform:translateY(-4px);border-color:var(--quiz-gold);box-shadow:0 18px 40px rgba(35,57,48,.11)}.grade-card small{color:var(--quiz-gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.grade-card strong{display:block;font:700 38px "Playfair Display",serif;margin:10px 0}.grade-card span{color:var(--quiz-muted);line-height:1.6}.grade-card i{position:absolute;right:22px;bottom:19px;font-style:normal;font-size:25px;color:var(--quiz-green-2)}
.topic-panel{margin-top:30px;background:#eef3ee;padding:28px}.topic-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topic-panel h3{margin:0;font-size:23px}.topic-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.topic-button{display:flex;align-items:center;gap:16px;text-align:left;border:1px solid #d2ddd6;background:white;padding:18px;cursor:pointer;font:inherit}.topic-button:hover{border-color:var(--quiz-green-2)}.topic-button b{display:grid;place-items:center;flex:0 0 44px;height:44px;background:var(--quiz-green);color:#fff;border-radius:50%}.topic-button span{line-height:1.5;font-weight:700}.topic-button small{display:block;color:var(--quiz-muted);font-weight:500;margin-top:5px}
.quiz-workspace{padding-top:55px}.text-button{border:0;background:transparent;color:var(--quiz-green-2);font-weight:700;cursor:pointer;padding:0 0 24px}.quiz-status{display:flex;justify-content:space-between;gap:24px;align-items:center}.quiz-status h2{font-size:clamp(27px,3vw,42px);margin:7px 0}.quiz-status small{color:var(--quiz-muted)}.score-chip{flex:0 0 105px;height:105px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--quiz-green);color:#fff}.score-chip b{font-size:30px}.score-chip span{font-size:11px;text-transform:uppercase}.progress-track{height:8px;background:#e7e5dc;margin-top:28px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:var(--quiz-gold);transition:.25s}.progress-copy{display:flex;justify-content:space-between;color:var(--quiz-muted);font-size:13px;margin-top:9px}.question-card{margin-top:32px;background:#fff;border:1px solid var(--quiz-line);padding:clamp(24px,4vw,48px);box-shadow:0 20px 55px rgba(30,50,42,.08)}.question-number{color:var(--quiz-gold);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.15em}.question-card h3{font-size:clamp(20px,2.3vw,30px);line-height:1.5;margin:15px 0 28px}.answer-options{display:grid;gap:12px}.answer-option{display:flex;align-items:flex-start;gap:14px;text-align:left;border:1px solid var(--quiz-line);background:#fff;padding:16px 18px;cursor:pointer;font:500 15px/1.55 "Be Vietnam Pro",sans-serif}.answer-option b{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#f1eee5}.answer-option:hover:not(:disabled){border-color:var(--quiz-green-2);background:#f6faf7}.answer-option.correct{border-color:#3b8c68;background:#edf8f2}.answer-option.wrong{border-color:#c76056;background:#fff0ee}.answer-option:disabled{cursor:default;color:var(--quiz-ink)}.answer-feedback{margin-top:22px;border-left:4px solid var(--quiz-green-2);background:#f0f6f2;padding:18px 20px;line-height:1.7}.answer-feedback.wrong{border-color:var(--quiz-red);background:#fff2f0}.answer-feedback b{display:block;margin-bottom:6px}.primary-action,.secondary-action{border:0;padding:14px 22px;font:700 14px "Be Vietnam Pro",sans-serif;cursor:pointer}.primary-action{background:var(--quiz-green);color:#fff}.primary-action:disabled{opacity:.35;cursor:not-allowed}.question-card .primary-action{display:block;margin:25px 0 0 auto}.secondary-action{background:#ebe8de;color:var(--quiz-ink);margin-left:10px}
.quiz-result{text-align:center;max-width:850px}.result-icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 22px;border-radius:50%;background:var(--quiz-green);color:#fff;font-size:34px}.quiz-result h2{font-size:42px}.result-score{display:flex;justify-content:center;align-items:baseline;gap:15px;margin:24px}.result-score strong{font:800 72px "Playfair Display",serif;color:var(--quiz-green-2)}.quiz-result p{color:var(--quiz-muted);margin-bottom:28px}
.quiz-menu-toggle{display:none}.quiz-menu-toggle i{display:block;width:23px;height:2px;background:var(--quiz-green);margin:5px}
.mindmap-lightbox[hidden]{display:none}.mindmap-lightbox{position:fixed;z-index:9999;inset:0;background:rgba(8,19,15,.92);display:grid;place-items:center;padding:58px 35px 42px}.mindmap-lightbox img{display:block;max-width:min(1500px,96vw);max-height:84vh;object-fit:contain;background:#fff;box-shadow:0 25px 80px rgba(0,0,0,.45)}.mindmap-lightbox>button{position:absolute;right:25px;top:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:31px;cursor:pointer}.mindmap-lightbox p{position:absolute;bottom:12px;margin:0;color:#dce6e1;font-size:12px}
@media(max-width:950px){.quiz-page .topbar{position:relative}.quiz-menu-toggle{display:block;border:0;background:transparent}.quiz-page .topbar nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;z-index:30;padding:18px 24px;box-shadow:0 10px 22px rgba(0,0,0,.1)}.quiz-page .topbar nav.open{display:grid;gap:15px}.quiz-hero{grid-template-columns:1fr;padding-top:60px}.quiz-hero aside{grid-template-columns:auto 1fr;max-width:360px}.mindmap-gallery,.mindmap-gallery.three,.grade-cards,.topic-list{grid-template-columns:1fr}.section-heading{display:block}.section-heading p{max-width:none}.quiz-status{align-items:flex-start}.score-chip{width:82px;height:82px;flex-basis:82px}.section-shell{padding:65px 20px}}
@media(max-width:560px){.quiz-hero{padding:52px 22px;min-height:auto}.quiz-hero h1{font-size:43px}.quiz-page .topbar{padding-left:18px;padding-right:18px}.quiz-page .brand small{display:none}.question-card{padding:23px 17px}.secondary-action{margin:10px 0 0}.quiz-result div:last-child{display:grid}}