@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f7f9ff;--paper:#fff;--ink:#25324d;--muted:#71809a;--line:#e8edf5;--brand:#ff8a45;--brand-dark:#eb6f31;--purple:#7364d8;--blue:#4f94e9;--green:#32ae88;--danger:#df5c73;--shadow:0 14px 44px rgba(43,58,91,.07)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nunito,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}h1,h2,h3,h4,p{margin-top:0}h1{font-size:2rem;line-height:1.23}h2{font-size:1.45rem}h3{font-size:1.1rem}p{line-height:1.6}small,.small{font-size:.83rem}.muted{color:var(--muted)}.hidden{display:none!important}.loading-screen{height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:4rem}.loading-screen p{font-size:1.1rem;font-weight:800;color:var(--muted)}.btn{border:0;border-radius:15px;padding:11px 19px;background:#f0f3fb;font-weight:900;color:#34405a;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:.14s;box-shadow:none}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}.btn:active{transform:translateY(0)}.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px #ff8a452b}.btn.secondary{background:#efeafe;color:#6559bc}.btn.green{background:#e6f8f1;color:#108761}.btn.danger{background:#fff0f1;color:#c1445b}.btn.outline{background:#fff;border:1px solid var(--line)}.btn.sm{padding:7px 11px;font-size:.8rem;border-radius:10px}.btn:disabled{opacity:.45;cursor:not-allowed}.pill{font-weight:900;background:#eef3ff;color:#5b6a95;padding:6px 12px;border-radius:99px;font-size:.76rem;display:inline-block}.pill.good{background:#e1f7ed;color:#17835e}.pill.orange{background:#fff0e5;color:#cc7134}.pill.purple{background:#f0eafa;color:#7151b4}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label,label{font-size:.91rem;font-weight:800}.input,select,textarea,input[type=text],input[type=password],input[type=date],input[type=number]{border:1px solid #dfe5ee;border-radius:13px;padding:12px 13px;color:var(--ink);background:#fff;outline:none;max-width:100%}input:focus,textarea:focus,select:focus{border-color:#ffa66d;box-shadow:0 0 0 3px #ff8a451b}textarea{width:100%;resize:vertical;min-height:95px}.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:28px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;overflow:auto}.brand{display:flex;gap:12px;align-items:center;padding:4px 8px}.brand-icon{font-size:2rem;background:#fff1df;width:52px;height:52px;display:grid;place-items:center;border-radius:18px}.brand-name{font-size:1.05rem;font-weight:900;line-height:1.1}.brand-sub{font-size:.73rem;color:var(--muted);font-weight:800;margin-top:4px}.nav-group-label{font-size:.7rem;text-transform:uppercase;color:#a0aac1;letter-spacing:1.2px;font-weight:900;padding:3px 13px}.nav-list{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;text-align:left;width:100%;padding:12px 13px;border-radius:13px;display:flex;align-items:center;gap:12px;font-weight:900;color:#596680}.nav-item:hover,.nav-item.active{background:#fff1e5;color:#d76f39}.nav-emoji{font-size:1.32rem}.nav-bottom{margin-top:auto}.main{padding:27px clamp(18px,4vw,58px) 60px;max-width:1600px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:26px}.topbar .small{font-weight:800}.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.avatar{height:42px;width:42px;display:grid;place-items:center;background:#f0eaff;border-radius:15px;font-size:1.45rem}.greeting{font-size:.91rem;color:var(--muted);font-weight:900}.hero{border-radius:29px;overflow:hidden;position:relative;padding:30px 32px;background:linear-gradient(105deg,#ffe6c7 0%,#fff2dd 54%,#f2dfff 100%);display:flex;align-items:center;justify-content:space-between;min-height:220px;gap:22px;margin-bottom:26px}.hero:after{content:'✦ ✧';position:absolute;right:22%;top:18px;font-size:3rem;color:#ffd09d;opacity:.8}.hero h1{font-size:clamp(1.5rem,3vw,2.5rem);margin:8px 0 8px;max-width:640px}.hero p{margin:0 0 17px;color:#736674;font-weight:700;max-width:550px}.hero-art{font-size:clamp(5rem,10vw,9rem);line-height:1;transform:rotate(-12deg);filter:drop-shadow(0 18px 14px #dd9e8933)}.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:23px;box-shadow:var(--shadow)}.card.plain{box-shadow:none}.card h3{margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:12px 0 16px}.section-head h2{margin:0}.tile{display:flex;flex-direction:column;gap:10px;min-height:172px;position:relative;overflow:hidden;transition:.16s;cursor:pointer}.tile:hover{transform:translateY(-3px);border-color:#ffd4b5}.tile .tile-icon{height:58px;width:58px;border-radius:18px;display:grid;place-items:center;font-size:2rem;background:#f2ebff}.tile.blue .tile-icon{background:#e5f3ff}.tile.orange .tile-icon{background:#fff0de}.tile.green .tile-icon{background:#e5f8ee}.tile h3{margin:0}.tile p{margin:0;font-size:.86rem;color:var(--muted)}.tile-foot{margin-top:auto;color:#a0a7b7;font-weight:900;font-size:.76rem}.stats{display:flex;gap:15px;flex-wrap:wrap}.stat{flex:1;min-width:145px;background:#fff;border-radius:18px;padding:18px;border:1px solid var(--line)}.stat .num{font-size:2rem;font-weight:900;line-height:1.3}.stat .label{font-size:.82rem;font-weight:800;color:var(--muted)}.child-card{display:flex;gap:17px;align-items:center}.child-card .big-avatar{width:75px;height:75px;border-radius:23px;background:#ecf4ff;display:grid;place-items:center;font-size:2.75rem}.child-card.giao .big-avatar{background:#fff0ea}.child-card h3{margin:0 0 5px}.child-card .small{color:var(--muted);font-weight:700}.progress{height:9px;border-radius:10px;background:#edf1f9;overflow:hidden}.progress>div{height:100%;border-radius:10px;background:linear-gradient(90deg,#ff8a45,#ffc16e);transition:width .2s}.split{display:flex;align-items:center;justify-content:space-between;gap:12px}.activity{border-bottom:1px solid var(--line);padding:12px 0;display:flex;align-items:center;gap:12px}.activity:last-child{border:0}.activity .act-icon{display:grid;place-items:center;width:41px;height:41px;background:#f1f4fd;border-radius:13px;font-size:1.4rem}.activity .act-body{flex:1}.activity .act-body strong{display:block}.activity .act-body small{color:var(--muted)}.empty{text-align:center;border:2px dashed #dfe6f3;border-radius:18px;padding:32px 20px;color:var(--muted)}.empty .em{font-size:2.8rem;margin-bottom:8px}.page-title{margin:0 0 8px;font-size:1.85rem}.page-sub{color:var(--muted);font-weight:700;margin:0 0 25px}.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.two-panels{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:20px}.chip{border:1px solid #e3e8f2;background:#fff;padding:8px 12px;border-radius:99px;font-weight:800;font-size:.86rem;display:inline-flex;align-items:center;gap:7px}.chip.active{background:#fff1e6;color:#cb7037;border-color:#ffd0aa}.notice{padding:12px 15px;border-radius:14px;background:#eaf4ff;color:#305b94;margin:12px 0;font-weight:800}.notice.danger{background:#fff0f2;color:#b83c53}.notice.success{background:#e8f7ec;color:#26784a}.toast{position:fixed;bottom:26px;right:26px;z-index:999;background:#25324d;color:#fff;padding:14px 22px;border-radius:14px;box-shadow:0 12px 34px #25324d44;max-width:400px}.typing-panel .prompt{background:#f4f6fd;border-radius:18px;padding:22px;font-size:1.52rem;line-height:2.3;word-wrap:break-word;font-weight:900;letter-spacing:.5px}.typing-panel .prompt .right{background:#dcf8e8;color:#26875b;border-radius:4px}.typing-panel .prompt .wrong{background:#ffdbdd;color:#c44a57;border-radius:4px}.typing-panel .prompt .current{border-bottom:3px solid #ff943f}.typing-input{width:100%;border:2px solid #dce4f2;outline:0;padding:17px;border-radius:14px;font-size:1.18rem;line-height:1.6;margin-top:16px}.keyboard{display:flex;flex-direction:column;gap:5px;align-items:center;margin:18px auto}.kb-row{display:flex;justify-content:center;gap:5px;width:100%}.key{flex:1;max-width:64px;min-width:20px;border:1px solid #dce4f3;border-radius:9px;display:grid;place-items:center;padding:10px 2px;background:#fff;color:#74819b;font-weight:900;box-shadow:0 2px 0 #e6eaf3}.key.lit{background:#ffb36d;color:#fff;border-color:#ffb36d;box-shadow:0 2px 0 #dd9451}.key.special{flex:4;max-width:230px}.palette{display:flex;gap:7px;flex-wrap:wrap}.swatch{height:31px;width:31px;border:3px solid #fff;border-radius:11px;box-shadow:0 0 0 1px #ced6e4;cursor:pointer}.swatch.active{box-shadow:0 0 0 3px #46567b}.drawing-wrap{position:relative;max-width:100%;touch-action:none;background:#fff;border:2px solid #e2e6f1;border-radius:17px;overflow:hidden}.drawing-wrap canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}.toolrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:10px 0}.tool-button{border:1px solid #e1e6ef;background:#fff;border-radius:12px;padding:9px 12px;font-weight:900}.tool-button.active{background:#fff1e4;color:#b95b1e;border-color:#ffc395}.template-thumb{border:2px solid #e6ebf3;background:#fff;padding:8px 10px;border-radius:12px;font-weight:900}.template-thumb.active{border-color:#ff9b4d;background:#fff5eb}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}.gallery-card{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f4f6fa}.gallery-card .detail{padding:12px}.gallery-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-root{min-height:310px;font-size:1.07rem;background:#fff}.ql-editor{min-height:310px;font-family:Nunito,Arial,sans-serif;font-size:1.12rem;line-height:1.8}.ql-toolbar.ql-snow{border-radius:14px 14px 0 0;border-color:#dfe5ee}.ql-container.ql-snow{border-radius:0 0 14px 14px;border-color:#dfe5ee}.editor-fallback{width:100%;min-height:310px;padding:20px;border-radius:12px}.game-stage{height:350px;position:relative;border:2px solid #e3eaf8;background:linear-gradient(#e4f4ff,#f8fcff);border-radius:22px;overflow:hidden;outline:none;user-select:none}.game-stage:focus{border-color:#9bc7ff}.bubble{position:absolute;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.65rem;box-shadow:inset -5px -9px 0 #00000010,0 8px 18px #00000012;animation:floaty 2s ease-in-out infinite alternate}.star-target{position:absolute;font-size:3rem;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 7px 4px #00000013)}@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-12px)}}.robot-grid{display:grid;grid-template-columns:repeat(5,minmax(44px,72px));gap:6px;justify-content:center}.robot-cell{aspect-ratio:1;border-radius:13px;background:#edf1fb;display:grid;place-items:center;font-size:1.8rem}.robot-cell.wall{background:#b8c3d6}.robot-cell.goal{background:#ddf9e9}.robot-cell.robot{background:#fff1dd;box-shadow:inset 0 0 0 2px #ffb877}.login-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(ellipse at top left,#ffeddb 0,transparent 35%),radial-gradient(ellipse at bottom right,#e6e1ff 0,transparent 40%),#f7f9ff}.login-card{width:min(100%,470px);padding:32px;border-radius:28px;background:#fff;border:1px solid #eee;box-shadow:0 22px 65px #29355f15}.login-card .logo-big,.setup-card .logo-big{font-size:4rem}.login-card h1,.setup-card h1{margin:8px 0}.login-card p,.setup-card p{color:var(--muted)}.login-card label,.setup-card label{display:block;margin:14px 0 5px}.login-card input,.setup-card input{display:block;width:100%;margin-top:6px}.login-card button{width:100%;margin-top:10px}.setup-page{background:var(--bg);padding:25px;min-height:100vh;display:flex;justify-content:center;align-items:center}.setup-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:35px;width:min(100%,650px)}.setup-card .btn{margin:15px 0}.field-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.modal-overlay{position:fixed;inset:0;background:#17223f9e;z-index:200;display:grid;place-items:center;padding:15px}.modal{background:white;border-radius:24px;padding:26px;width:min(100%,520px);max-height:90vh;overflow-y:auto;box-shadow:0 35px 75px #17223f40}.modal h2{margin-top:0}.modal-buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.table-scroll{overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;color:var(--muted);font-size:.8rem;padding:12px}.data-table td{padding:11px 12px;border-top:1px solid var(--line);font-size:.89rem}.data-table tr:hover td{background:#fcfdff}.award{font-size:2.3rem;line-height:1}.desc-box{white-space:pre-wrap;line-height:1.7;color:#55647c}.lesson-tab{border-radius:13px;background:#f3f5fc;padding:12px;font-weight:900;border:1px solid transparent}.lesson-tab.active{background:#fff0e1;border-color:#ffc994;color:#c3672f}.float-right{margin-left:auto}@media(max-width:1050px){.col-3{grid-column:span 6}.col-4{grid-column:span 6}.col-5,.col-7{grid-column:span 12}.two-panels{grid-template-columns:1fr}}@media(max-width:780px){.shell{display:block}.sidebar{position:relative;height:auto;padding:13px;gap:11px}.brand{padding:3px 8px}.nav-group-label{display:none}.nav-list{display:flex;flex-direction:row;overflow:auto;gap:4px}.nav-item{white-space:nowrap;width:auto;padding:10px}.nav-bottom{margin-top:0}.sidebar .btn{display:none}.main{padding:19px 15px 60px}.hero{padding:21px;border-radius:21px;min-height:185px}.hero-art{font-size:4rem}.col-3,.col-4,.col-6,.col-5,.col-7,.col-8{grid-column:span 12}.grid{gap:12px}.card{padding:17px}.topbar{margin-bottom:15px}.page-title{font-size:1.5rem}.typing-panel .prompt{font-size:1.16rem;padding:15px;line-height:2}.key{font-size:.72rem;padding:7px 1px;border-radius:6px}.game-stage{height:310px}.robot-grid{grid-template-columns:repeat(5,minmax(41px,58px))}}@media(max-width:400px){.hero-art{display:none}.hero{min-height:180px}.topbar-right .pill{display:none}.kb-row{gap:2px}.key{padding:7px 0}.game-stage{height:260px}}