:root{font-family:system-ui,'Segoe UI',Arial,sans-serif;color:#26325a;background:#f1f4ff}*{box-sizing:border-box}body{margin:0}.app{display:grid;grid-template-columns:230px 1fr;min-height:100dvh}.rail{background:#fff;box-shadow:4px 0 22px #717ed010;padding:25px 16px;display:flex;flex-direction:column;gap:9px}.brand{display:flex;align-items:center;gap:9px;font-size:29px;font-weight:900;color:#6555e9;line-height:1.1;margin-bottom:32px}.brand span{font-size:19px}.nav{border:0;border-radius:14px;background:transparent;text-align:left;padding:15px;font-size:15px;font-weight:750;color:#67718c;cursor:pointer}.nav:hover,.nav.selected{background:#eeeaff;color:#5646cd}.rail-bottom{margin-top:auto;display:grid;gap:15px;color:#8189a3}main{padding:26px 36px;min-width:0;display:flex;flex-direction:column;max-height:100dvh;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}h1{font-size:clamp(23px,2.2vw,34px);margin:4px 0;color:#32356c;letter-spacing:-.8px}h2{margin:0 0 14px;font-size:22px}.eyebrow{color:#9686d5;font-weight:850;letter-spacing:1.4px}.pill{border-radius:99px;padding:10px 17px;background:#fff;color:#6e5add;font-weight:700;white-space:nowrap}#view{overflow-y:auto;flex:1;min-height:0;padding:1px 2px 25px}.hero{display:grid;grid-template-columns:1.4fr .7fr;align-items:center;background:linear-gradient(115deg,#8068ed,#af7df0 70%,#f093c2);color:#fff;border-radius:28px;padding:29px 34px;min-height:190px}.hero h2{font-size:30px;line-height:1.25;margin:0 0 10px}.hero p{line-height:1.6;margin:0}.mascot{font-size:100px;text-align:center;filter:drop-shadow(0 6px 2px #8661b5)}.section-title{margin:27px 0 15px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:#fff;border-radius:21px;padding:22px;box-shadow:0 4px 20px #727cd10b;min-width:0}.card strong{font-size:18px}.card p,.muted{color:#78829e;line-height:1.55}.big{font-size:34px;font-weight:900;color:#5e4fde;margin:11px 0}.iconbox{font-size:39px;margin-bottom:9px}button{cursor:pointer;font:inherit}button.primary{background:#6b56e9;color:white;border:none;border-radius:12px;padding:12px 19px;font-weight:800}button.secondary{background:#f0ebff;color:#604ce0;border:0;border-radius:12px;padding:11px 17px;font-weight:700}button.ghost{background:transparent;border:1px solid #e2e1ef;border-radius:12px;padding:10px}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:15px}input,select{width:100%;font:inherit;border:1px solid #dcdff0;border-radius:12px;padding:13px;margin:5px 0 13px;background:#fff}label{font-size:13px;font-weight:800;color:#55617e}.form-card{max-width:540px;margin:auto}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.lesson-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.lesson{display:grid;text-align:left;gap:6px;background:white;border:1px solid #e9eafb;padding:15px;border-radius:16px;min-height:115px}.lesson span{color:#8c79ed;font-weight:850}.lesson b{font-size:14px}.lesson:disabled{opacity:.5;cursor:default}.option{display:block;width:100%;text-align:left;background:#f5f6fe;border:1px solid #e4e6f5;border-radius:12px;padding:14px;margin:9px 0}.option.chosen{background:#e6dcff;border-color:#8668ec}.tag{display:inline-block;background:#f4dfff;color:#8250af;padding:5px 9px;border-radius:9px;font-size:12px;font-weight:800}.error{background:#ffefed;color:#a73e3e;padding:12px;border-radius:12px;margin-bottom:12px}.ok{background:#ebfaef;color:#2c7850;padding:12px;border-radius:12px}.detail{background:#f8f8ff;padding:12px;border-radius:12px;margin:10px 0}table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden}td,th{padding:12px;text-align:left;border-bottom:1px solid #eeeef6}th{color:#777c9d;font-size:13px}#notice:empty{display:none}@media(max-width:1000px){.app{grid-template-columns:72px 1fr}.rail{padding:20px 7px}.brand span,.rail-bottom,.nav{font-size:0}.brand{font-size:30px;justify-content:center}.nav{font-size:23px;text-align:center}.grid{grid-template-columns:repeat(2,1fr)}.lesson-list{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.app{display:block}.rail{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;justify-content:space-around;padding:7px}.brand,.rail-bottom{display:none}.nav{padding:8px;font-size:21px}main{padding:20px 13px;max-height:none;overflow:visible}#view{overflow:visible}header{align-items:flex-start}.pill{font-size:11px;padding:8px}.hero{grid-template-columns:1fr auto;padding:21px;min-height:150px}.hero h2{font-size:22px}.mascot{font-size:50px}.grid,.split{grid-template-columns:1fr}.lesson-list{grid-template-columns:repeat(2,1fr)}h1{font-size:24px}}


/* VQTH commercial experience: mobile-first polished design */
:root{font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;color:#213058;background:#f6f8ff}
body{background:radial-gradient(circle at 92% 1%,#ebe4ff 0,transparent 34%),#f6f8ff}
.app{grid-template-columns:245px minmax(0,1fr)}
.rail{background:#ffffff;border-right:1px solid #e9eaf9;box-shadow:none;padding:28px 16px;gap:8px}
.brand{padding:8px 8px 16px;margin-bottom:16px;color:#5b46cb}
.brand span{font-size:20px;letter-spacing:-.4px}
.nav{display:flex;align-items:center;min-height:52px;border-radius:13px;transition:background .16s,color .16s}
.nav.selected{background:#edeaff;box-shadow:inset 3px 0 0 #6950df}
.rail-bottom{font-size:12px;border-top:1px solid #eceef8;padding-top:20px}
main{max-height:100dvh;padding:27px clamp(18px,3vw,50px) 12px}
header{margin-bottom:22px}
h1{font-size:clamp(24px,2.8vw,36px);letter-spacing:-1px;color:#242d5a}
h2{letter-spacing:-.4px;color:#2d3167}
.eyebrow{color:#6d55dc;font-size:11px}
.pill{font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis;border:1px solid #e8e5fc;box-shadow:0 4px 18px #4d3cad0b}
#view{scrollbar-color:#c5b9ee transparent}
.hero{background:linear-gradient(115deg,#513ec2 0%,#8068e8 56%,#bd86db 100%);border-radius:26px;min-height:260px;box-shadow:0 15px 38px #6955db25;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:#ffffff14;right:4%;top:-180px;pointer-events:none}
.hero h2{font-size:clamp(26px,3.1vw,43px);max-width:560px;letter-spacing:-1px}
.hero p{max-width:530px;color:#f5f1ff}
.mascot{position:relative;font-size:clamp(90px,10vw,150px);filter:drop-shadow(0 10px 4px #3b29804f)}
.card,.lesson{border:1px solid #edf0fa;box-shadow:0 6px 22px #3444830a}
.card{padding:24px}
.grid{gap:18px}
.card .big{font-size:clamp(27px,3vw,36px)}
.card p{font-size:14px}
.lesson{transition:transform .15s,box-shadow .15s,border-color .15s}
.lesson:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 9px 25px #4e3ccc18;border-color:#b8aaf1}
.lesson:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffca68;outline-offset:2px}
button.primary{background:#644bdd;box-shadow:0 6px 15px #6049d229;min-height:46px}
button.primary:hover{background:#5138cc}
button.secondary{background:#f0edff;color:#5139c0}
.section-title{margin:27px 0 16px}
.option{min-height:50px}
.option:hover{border-color:#a99bee}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0 5px;color:#8791aa;font-size:11px;line-height:1.5;border-top:1px solid #e8eaf4}
.marketing-badges{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}
.marketing-badges span{border:1px solid #e7e3ff;background:white;color:#5444af;border-radius:40px;padding:8px 13px;font-size:12px;font-weight:750}
.value-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:17px 0}
.value-row .value-item{background:white;border:1px solid #eeeffb;border-radius:16px;padding:17px}
.value-row strong{display:block;color:#4637a2;font-size:22px}
.value-row span{font-size:12px;color:#6e7894}
.premium-plan{outline:2px solid #8062ef;position:relative}
.premium-plan:before{content:"Gợi ý";position:absolute;right:15px;top:-14px;background:#644bdd;color:white;border-radius:20px;padding:5px 13px;font-size:12px;font-weight:800}
.price-subtitle{font-size:13px;color:#7b829b}
.plan-features{list-style:none;padding:0;line-height:2;color:#56617e;font-size:14px}
.plan-features li:before{content:"✓ ";color:#33a473;font-weight:900}
#notice{position:relative;z-index:2}
@media(max-width:1050px){.app{grid-template-columns:78px minmax(0,1fr)}.rail{padding:18px 7px}.brand{justify-content:center;font-size:28px;padding:0}.brand span,.rail-bottom{display:none}.nav{font-size:24px;justify-content:center;padding:12px;font-weight:400}.hero{min-height:230px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
 .app{display:block}
 .rail{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:7px 5px;background:#fffefef5;backdrop-filter:blur(12px);box-shadow:0 6px 20px #36356912;gap:2px;border-bottom:1px solid #e6e5f3}
 .brand,.rail-bottom{display:none}
 .nav{display:block;min-height:48px;padding:9px 2px;font-size:23px;text-align:center}
 .nav.selected{box-shadow:inset 0 -3px 0 #6950df}
 main{padding:18px 14px 10px;max-height:none;overflow:visible}
 header{gap:8px;margin-bottom:17px}
 h1{font-size:24px;line-height:1.2}
 .eyebrow{font-size:10px}
 .pill{max-width:37%;font-size:10px;padding:7px 9px}
 .hero{grid-template-columns:minmax(0,1fr) 74px;padding:22px 18px;min-height:230px;border-radius:20px}
 .hero h2{font-size:25px}
 .hero p{font-size:13px}
 .mascot{font-size:65px}
 .grid,.split,.value-row{grid-template-columns:1fr}
 .card{padding:19px}
 .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-footer{padding-bottom:25px}
 table{display:block;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* PREMIUM JOURNEY - interactive primary school map */
.premium-journey,.premium-rewards{background:#fff;border:1px solid #e6e7f8;box-shadow:0 10px 35px #4e45a50c;border-radius:25px;margin:22px 0;padding:23px;overflow:hidden}
.premium-journey{background:linear-gradient(175deg,#faf8ff 0%,#f3f7ff 100%)}
.premium-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.premium-section-head h2{margin:5px 0 17px;font-size:clamp(18px,2vw,23px)}
.premium-kicker{font-size:11px;font-weight:900;letter-spacing:1.3px;color:#8560c5}
.premium-label,.premium-count{font-size:12px;color:#7158bc;background:#fff;border:1px solid #e4dbff;border-radius:20px;padding:7px 11px}
.premium-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;position:relative;padding:12px 4px 10px}
.premium-path{position:absolute;top:65px;left:8%;right:8%;border-top:4px dashed #c9b9ef;z-index:0}
.premium-stop{position:relative;z-index:1;background:#fff;min-width:0;min-height:170px;border:2px solid #e6e2f8;border-radius:20px;padding:12px 6px 16px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#4c4c83;box-shadow:0 6px 13px #5f45a90d;transition:transform .2s,border-color .2s,box-shadow .2s}
.premium-stop:nth-of-type(even){transform:translateY(12px)}
.premium-stop:hover{border-color:#a38ff2;box-shadow:0 11px 20px #5f45a927}
.premium-stop.active{border-color:#7457dc;background:#f3efff}
.premium-stop-number{font-size:10px;color:#9182bf;font-weight:900;letter-spacing:1px}
.premium-stop-icon{font-size:36px;display:flex;align-items:center;justify-content:center;background:#f1f5ff;width:66px;height:66px;border-radius:50%;box-shadow:inset 0 0 0 3px #fff}
.premium-stop.active .premium-stop-icon{background:#e8ddff}
.premium-stop strong{font-size:14px;color:#4e3b96}
.premium-stop small{font-size:11px;line-height:1.35;color:#79819c;text-align:center}
.premium-map-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:23px}
.premium-guide{display:flex;align-items:center;gap:13px;flex:1;min-width:190px}
.premium-guide-face{display:flex;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center;background:#ffeddc;font-size:35px;flex-shrink:0;border:2px solid #ffd2a6;animation:premium-float 3s ease-in-out infinite}
.premium-guide p{font-size:13px;line-height:1.6;color:#5d6381;margin:0}
.premium-medals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.premium-medal{border:1px solid #e8e8f5;border-radius:18px;padding:17px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff}
.premium-medal.earned{background:linear-gradient(180deg,#fff9e5,#fff);border-color:#f6d685}
.premium-medal.locked .premium-medal-icon{filter:grayscale(.8);opacity:.55}
.premium-medal-icon{width:62px;height:62px;display:grid;place-items:center;background:#f8f3ff;border-radius:50%;font-size:32px}
.premium-medal strong{font-size:12px}
.premium-medal span{font-size:11px;color:#8a8fa8}
.premium-note{font-size:11px;color:#818aa1;line-height:1.55;margin:13px 0 0}
@keyframes premium-float{50%{transform:translateY(-5px)}}
@media(max-width:980px){.premium-map{grid-template-columns:repeat(3,minmax(0,1fr))}.premium-path{display:none}.premium-medals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.premium-journey,.premium-rewards{padding:16px;border-radius:18px}.premium-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.premium-stop{min-height:147px;border-radius:15px;padding:9px 5px}.premium-stop:nth-of-type(even){transform:none}.premium-stop-icon{width:54px;height:54px;font-size:28px}.premium-stop strong{font-size:12px}.premium-stop small{font-size:10px}.premium-map-bottom .primary{width:100%}.premium-guide-face{width:49px;height:49px;font-size:27px}.premium-medals{gap:8px}.premium-medal{padding:12px 4px}}
@media(prefers-reduced-motion:reduce){.premium-guide-face{animation:none}}

/* Premium v2: compact learning world and original fox mascot */
:root{--game-purple:#6045ca;--game-border:#e9e5f8}
main{padding-top:22px}
#view{scroll-padding-top:8px}
.hero{min-height:210px;padding:24px 30px;grid-template-columns:minmax(0,1fr) 220px;isolation:isolate}
.hero h2{margin:8px 0;font-size:clamp(25px,2.7vw,35px)}
.hero p{font-size:14px}
.premium-mascot{height:190px;display:flex;align-items:center;justify-content:center;align-self:end;filter:none;z-index:1}
.premium-mascot img{width:190px;height:200px;object-fit:contain;filter:drop-shadow(0 9px 13px #30207666);animation:fox-bob 3.6s ease-in-out infinite}
.premium-grades{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px}
.premium-grades .lesson{min-height:105px;padding:13px}
.section-title{margin:20px 0 12px}
.marketing-badges{margin:12px 0;gap:7px}
.marketing-badges span{padding:6px 10px;font-size:11px}
.premium-journey,.premium-rewards{padding:18px 21px;margin:17px 0;border-radius:19px}
.premium-section-head h2{font-size:20px;margin:3px 0 12px}
.premium-map{gap:9px;padding:4px 0}
.premium-path{top:49px;left:7%;right:7%;border-top:3px dashed #cdbbeb}
.premium-stop{min-height:125px;padding:9px 4px 8px;border-radius:15px;gap:4px}
.premium-stop:nth-of-type(even){transform:translateY(5px)}
.premium-stop-number{font-size:9px}
.premium-stop-icon{width:47px;height:47px;font-size:24px}
.premium-stop strong{font-size:12px}
.premium-stop small{font-size:10px}
.premium-map-bottom{margin-top:15px}
.premium-guide-face{width:57px;height:57px;background:#fff0da;overflow:hidden;animation:fox-bob 3.6s ease-in-out infinite}
.premium-guide-face img{width:57px;height:59px;object-fit:contain;transform:scale(1.3) translateY(5px)}
.premium-medals{gap:9px}
.premium-medal{padding:10px 5px;border-radius:13px;gap:5px}
.premium-medal-icon{width:48px;height:48px;font-size:27px}
.premium-medal strong{font-size:12px}
.premium-medal span{font-size:10px}
.premium-note{margin-top:9px}
.premium-stop.active{background:#eee7ff;box-shadow:0 7px 22px #795ad62b}
.premium-stop:focus-visible{outline:3px solid #f0bf51;outline-offset:2px}
.premium-medal.earned{border-color:#ecc968}
@keyframes fox-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:1199px){
.premium-grades{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero{grid-template-columns:minmax(0,1fr) 170px}
.premium-mascot img{width:155px;height:185px}
}
@media(max-width:750px){
main{padding-top:16px}
.hero{grid-template-columns:minmax(0,1fr) 85px;min-height:172px;padding:17px 15px}
.hero h2{font-size:clamp(20px,5vw,27px)}
.hero p{font-size:12px}
.premium-mascot{height:125px}
.premium-mascot img{width:100px;height:136px}
.premium-grades{grid-template-columns:repeat(2,minmax(0,1fr))}
.premium-journey,.premium-rewards{padding:13px;margin:12px 0}
.premium-section-head h2{font-size:17px}
.premium-label{display:none}
.premium-map{grid-template-columns:repeat(2,minmax(0,1fr))}
.premium-stop{min-height:115px}
.premium-stop:nth-of-type(even){transform:none}
.premium-path{display:none}
.premium-stop-icon{height:43px;width:43px}
.premium-medals{grid-template-columns:repeat(2,minmax(0,1fr))}
.premium-map-bottom{gap:8px;margin-top:10px}
.premium-guide p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.premium-mascot img,.premium-guide-face{animation:none}}

/* Lesson quests: separate from official marks and progress */
.quest-banner{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:18px;background:linear-gradient(112deg,#fff8ea,#f0eaff 75%,#e9f3ff);border:1px solid #e7dcfa;margin:13px 0 12px;min-height:100px;position:relative;overflow:hidden}
.quest-fox{width:73px;height:80px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 5px #674db433)}
.quest-intro{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.quest-eyebrow{font-size:10px;letter-spacing:.8px;font-weight:900;color:#7658ca}
.quest-intro strong{font-size:clamp(17px,2.1vw,22px);color:#3e317d;line-height:1.3}
.quest-intro small{font-size:12px;line-height:1.5;color:#66748f}
.quest-stars{background:#fff;border:1px solid #f1d88f;border-radius:30px;font-weight:900;font-size:12px;padding:7px 11px;color:#8c5812;white-space:nowrap}
.quest-progress-caption{font-size:12px;color:#777fa0;margin:0 0 15px;line-height:1.55}
.quest-progress span,.quest-progress i{transition:background .2s ease}
.result-quest{border-radius:19px;background:linear-gradient(120deg,#fff8db,#f0e9ff);padding:18px;display:flex;align-items:center;gap:12px;margin:14px 0;border:1px solid #eddba9}
.result-quest .result-fox{width:82px;height:84px;object-fit:contain;flex-shrink:0}
.result-quest strong{display:block;font-size:17px;color:#463478}
.result-quest p{font-size:13px;color:#636b85;line-height:1.6;margin:6px 0 0}
.result-stars{font-size:28px;letter-spacing:5px;margin:5px 0}
@media(max-width:600px){
.quest-banner{padding:9px;gap:7px;min-height:87px;border-radius:14px}
.quest-fox{width:51px;height:64px}
.quest-intro strong{font-size:16px}
.quest-intro small{font-size:10px}
.quest-eyebrow{font-size:9px}
.quest-stars{font-size:10px;padding:6px 7px}
.result-quest{padding:12px}
.result-quest .result-fox{width:58px;height:67px}
.result-quest strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.quest-progress span,.quest-progress i{transition:none}}


/* Parent progress analytics: responsive, read-only learning insights */
.vq-progress-report{margin-top:20px}
.vq-progress-report h2{margin:0 0 7px;font-size:1.3rem}
.vq-progress-report h3{margin:21px 0 10px;font-size:1.05rem}
.vq-progress-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}
.vq-progress-stats>div{border:1px solid #e6e2fa;border-radius:13px;padding:13px;background:#f8f7ff;min-width:0}
.vq-progress-stats span{font-size:12px;color:#71718d;display:block;line-height:1.4}
.vq-progress-stats strong{font-size:23px;display:block;margin-top:5px;color:#563cc3;overflow-wrap:anywhere}
.vq-progress-note{background:#f6f5ff;border-left:3px solid #7460df;padding:12px 14px;border-radius:9px;line-height:1.7;margin-top:14px}
.vq-progress-weeks{display:flex;justify-content:space-around;align-items:flex-end;gap:12px;min-height:170px;padding:12px;background:#faf9ff;border-radius:13px}
.vq-progress-week{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;flex:1;min-width:0;font-size:12px}
.vq-progress-week small{color:#7b7d97;font-size:11px}
.vq-progress-bar{height:95px;width:35px;max-width:100%;background:#e6e2f5;border-radius:7px;display:flex;align-items:flex-end;overflow:hidden}
.vq-progress-bar span{background:#7962e9;width:100%;border-radius:7px 7px 0 0}
.vq-grade-progress,.vq-progress-weak{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.vq-grade-progress>div,.vq-progress-weak>div{border:1px solid #ece9f9;border-radius:10px;padding:12px;line-height:1.6}
.vq-progress-weak p{margin:5px 0 0}
@media(max-width:650px){.vq-progress-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.vq-grade-progress,.vq-progress-weak{grid-template-columns:1fr}.vq-progress-weeks{gap:5px;padding:9px}.vq-progress-week small{font-size:10px}}


/* VQTH fullscreen dashboard: preserve legible content via tabs/pages, not clipping. */
html,body{width:100%;height:100%;overflow:hidden}
.app{height:100dvh;min-height:0;overflow:hidden}
.rail{height:100dvh;min-height:0;overflow:hidden}
main{height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;
 padding:clamp(10px,1.7vh,20px) clamp(12px,2.2vw,34px) 8px}
header{flex-shrink:0;margin-bottom:clamp(6px,1.1vh,12px)}
h1{font-size:clamp(19px,2.1vw,29px);line-height:1.18}
#view{flex:1;min-height:0;overscroll-behavior:contain;padding-bottom:8px}
.hero{min-height:0;padding:clamp(13px,2vh,22px) clamp(16px,2vw,28px);
  grid-template-columns:minmax(0,1fr) clamp(85px,13vw,170px)}
.hero h2{font-size:clamp(21px,2.4vw,31px);margin:3px 0 6px}
.hero p{font-size:clamp(12px,1.15vw,14px);line-height:1.4}
.hero .actions{margin-top:10px}
.premium-mascot{height:clamp(90px,15vh,135px)}
.premium-mascot img{height:100%;width:100%;object-fit:contain}
.marketing-badges{margin:8px 0;gap:6px}
.marketing-badges span{padding:5px 9px}
.vq-home-tabs,.vq-grade-tabs{display:flex;flex-wrap:wrap;gap:7px}
.vq-home-tabs{margin:10px 0}
.vq-view-tab,.vq-grade-tab{border:1px solid #ddd6fa;border-radius:11px;
 background:#fff;color:#5b49ae;font-weight:800;padding:9px 14px;min-height:40px}
.vq-view-tab.active,.vq-grade-tab.active{background:#654bdd;color:#fff;border-color:#654bdd}
.vq-home-panel .section-title{margin:10px 0}
.vq-home-panel .premium-journey,.vq-home-panel .premium-rewards{margin:4px 0;
 padding:clamp(10px,1.5vh,16px)}
.vq-home-panel .premium-stop{min-height:clamp(90px,15vh,115px)}
.vq-home-panel .premium-stop-icon{height:40px;width:40px;font-size:23px}
.premium-grades .lesson{min-height:clamp(80px,13vh,105px)}
.vq-learn-toolbar{padding:12px 16px;margin-bottom:10px}
.vq-learn-topline{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.vq-learn-topline strong{flex:1;min-width:145px;font-size:15px;color:#403282}
.vq-learn-topline label{font-size:12px}
.vq-learn-topline select{width:auto;min-width:110px;max-width:210px;margin:0;padding:8px}
.vq-grade-tabs{margin-top:9px}
.vq-grade-tab{min-height:34px;padding:7px 13px;font-size:13px}
.vq-paged-lessons{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.vq-paged-lessons .lesson{min-height:clamp(90px,15vh,128px);padding:12px;gap:3px}
.vq-paged-lessons .lesson span{font-size:15px}
.vq-paged-lessons .lesson b{font-size:13px;line-height:1.32;display:-webkit-box;
 -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vq-paged-lessons .lesson small{font-size:11px}
.vq-page-controls{display:flex;justify-content:center;align-items:center;
 gap:13px;margin:12px 0 4px;font-size:13px;color:#5b6083}
.vq-page-controls button{min-height:37px}
@media(max-height:740px) and (min-width:681px){
 .brand{margin-bottom:4px}.rail{padding-top:13px}.nav{min-height:43px;padding:10px}
 .hero{padding:12px 18px}.hero h2{font-size:23px}
 .premium-grades .lesson{min-height:72px;padding:9px}
 .section-title{margin:9px 0}
 .vq-paged-lessons .lesson{min-height:86px;padding:9px}
 .vq-home-panel .premium-map-bottom{margin-top:6px}
}
@media(max-width:680px){
 .app{display:flex;flex-direction:column;height:100dvh}
 .rail{flex:none;height:auto;max-height:none;position:relative;top:auto;z-index:20;
  display:flex;gap:4px;justify-content:space-around;padding:5px 7px}
 .nav{font-size:22px;min-height:42px;padding:5px 8px}
 main{flex:1;min-height:0;height:auto;max-height:none;overflow:hidden;
  padding:8px 10px 5px}
 header{margin-bottom:7px;align-items:center}
 header .eyebrow{font-size:9px}
 h1{font-size:clamp(17px,4.6vw,22px)}
 #view{min-height:0;overflow-y:auto;padding:2px 2px 6px}
 .hero{grid-template-columns:minmax(0,1fr) 80px;padding:10px 12px;min-height:0;border-radius:16px}
 .hero h2{font-size:clamp(18px,4.5vw,23px)}
 .hero p{font-size:11px}
 .premium-mascot{height:90px}
 .premium-mascot img{height:100%;width:100%}
 .hero .actions{margin-top:7px}
 .hero .primary{min-height:34px;padding:8px 10px;font-size:12px}
 .marketing-badges{gap:4px;margin:6px 0}
 .marketing-badges span{font-size:10px;padding:3px 7px}
 .vq-home-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:7px 0}
 .vq-view-tab{font-size:11px;min-height:37px;padding:7px 3px}
 .vq-home-panel .premium-grades{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .premium-grades .lesson{min-height:70px;padding:8px}
 .premium-grades .lesson b{font-size:11px}
 .section-title{font-size:16px;margin:8px 0}
 .vq-learn-toolbar{padding:9px;margin-bottom:8px}
 .vq-learn-topline{gap:6px}
 .vq-learn-topline strong{font-size:13px;min-width:100px}
 .vq-learn-topline select{min-width:95px;max-width:145px;padding:7px;font-size:12px}
 .vq-learn-topline label{display:none}
 .vq-grade-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:6px}
 .vq-grade-tab{font-size:11px;padding:6px 0;min-height:31px}
 .vq-paged-lessons{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .vq-paged-lessons .lesson{min-height:clamp(82px,15vh,112px);padding:9px}
 .vq-paged-lessons .lesson span{font-size:13px}
 .vq-paged-lessons .lesson b{font-size:12px;-webkit-line-clamp:3}
 .vq-page-controls{margin:7px 0;gap:8px;font-size:11px}
 .vq-page-controls button{padding:8px 10px;min-height:32px}
 .vq-home-panel .premium-map{grid-template-columns:repeat(3,minmax(0,1fr))}
 .vq-home-panel .premium-stop{min-height:86px;padding:5px 2px}
 .vq-home-panel .premium-stop-icon{height:32px;width:32px;font-size:19px}
 .vq-home-panel .premium-stop small{display:none}
 .vq-home-panel .premium-guide p{font-size:11px}
}
@media(max-width:380px){.marketing-badges span:nth-child(n+3){display:none}
 .vq-paged-lessons .lesson{min-height:84px}}
/* Avoid clipping on exceptionally short/zoomed screens or long learning explanations. */
@media(max-height:560px){#view{overflow-y:auto}}

/* Privacy links remain visible without obscuring the study viewport. */
.vq-privacy-footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  flex:0 0 auto;padding:5px 2px 1px;font-size:11px;color:#7783a0}
.vq-privacy-footer a,.vq-privacy-shortcut a{color:#5540bc;text-decoration:underline;
 text-underline-offset:3px}
.vq-privacy-shortcut{margin:4px 0 8px;font-size:12px}
.vq-privacy-check{display:block;font-size:12px;line-height:1.55;color:#424b72;
 margin:9px 0}
.vq-privacy-check input{vertical-align:middle}
@media(max-width:680px){
 .vq-privacy-footer{font-size:10px;gap:5px;justify-content:center;padding:4px 0}
 .vq-privacy-shortcut{font-size:11px}
}

/* Free-trial/payment transparency; compact enough for existing single-screen layout. */
.vq-payment-policy{padding:12px 15px;margin:10px 0 0;border:1px solid #cbd8f5;
 background:#f0f5ff;border-radius:14px;color:#303f70;font-size:13px;line-height:1.45}
.vq-payment-policy p{margin:5px 0}
.vq-payment-policy a,.vq-payment-history-shortcut a{color:#5540b2;text-decoration:underline;text-underline-offset:3px}
.vq-payment-agree{display:block;font-size:12px;line-height:1.5;margin:9px 0;
 color:#37466b}
.vq-payment-agree input{width:auto;display:inline-block;vertical-align:middle;margin-right:5px}
.vq-payment-history-shortcut{margin:8px 2px 2px;font-size:12px}
@media(max-width:680px){
 .vq-payment-policy{padding:9px 11px;font-size:11px}
 .vq-payment-agree{font-size:11px}
 .vq-payment-history-shortcut{font-size:11px}
}