/* Tuition Studio V12.1 — giao diện chung của ba trang ứng dụng.
   Trước đây khối này được chép nguyên văn 10004 ký tự vào 3 trang
   (hash giống hệt nhau — đã đối chiếu). Sửa một màu phải nhớ sửa 3 chỗ. */

:root{--bg:#fff8df;--card:#fffdf7;--ink:#2d3548;--muted:#7b8495;--line:#eadfb8;--yellow:#f5c94a;--purple:#7567e8;--purple-soft:#eeeaff;--mint:#39b98b;--mint-soft:#e7f8f1;--blue:#4d8cf7;--blue-soft:#eaf2ff;--orange:#e59b38;--orange-soft:#fff0da;--pink:#d86ca4;--pink-soft:#fdeaf4;--red:#d75c68;--red-soft:#ffe9ec;--slate:#64748b;--shadow:0 18px 45px rgba(88,76,34,.10);--r:21px}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#fff7d7,#fffaf0 55%,#fff6dd);color:var(--ink);font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh}.side{position:sticky;top:0;height:100vh;background:rgba(255,253,247,.97);border-right:1px solid var(--line);padding:19px 14px;display:flex;flex-direction:column;gap:15px}.brand{display:flex;gap:10px;align-items:center;padding:3px 7px 10px}.logo{width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,#f6c94d,#8a76e8);color:#fff;display:grid;place-items:center;font-weight:950}.brand b{display:block}.brand small,.foot small{color:var(--muted);font-size:10px}.nav{display:grid;gap:4px}.nav a,.nav button{border:0;text-decoration:none;background:transparent;color:#667085;border-radius:12px;padding:9px 10px;font-weight:850;text-align:left}.nav a.on,.nav a:hover,.nav button:hover{background:#fff1b7;color:#715b0e}.foot{margin-top:auto;border:1px solid var(--line);border-radius:15px;padding:11px;background:#fff4c7}.main{min-width:0}.top{min-height:72px;position:sticky;top:0;z-index:20;background:rgba(255,248,223,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px}.top h1{margin:0;font-size:19px}.top small{color:var(--muted)}.topright,.toolbar,.actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.avatar{width:39px;height:39px;border-radius:13px;background:var(--purple-soft);color:#5f52c8;display:grid;place-items:center;font-weight:950}.sync{border:1px solid var(--line);background:#fffdf7;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:850}.dot{display:inline-block;width:8px;height:8px;background:var(--mint);border-radius:50%;margin-right:5px}.content{max-width:1580px;margin:auto;padding:20px 24px 70px}.hero{background:linear-gradient(120deg,#f6cc50,#f1b564 38%,#c88bd0 67%,#8172e6);color:#fff;border-radius:25px;padding:20px 22px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:16px;align-items:center}.hero h2{margin:4px 0 5px;font-size:25px}.hero p{margin:0;max-width:900px}.eyebrow{font-size:10px;font-weight:950;letter-spacing:.8px}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:14px 0}.stat,.card{background:#fffdf7;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}.stat{padding:11px}.stat label{font-size:9px;text-transform:uppercase;font-weight:950;color:var(--muted)}.stat strong{font-size:20px;display:block;margin:2px 0}.stat small{color:var(--muted);font-size:9px}.grid{display:grid;gap:14px}.two{grid-template-columns:1.18fr .82fr}.three{grid-template-columns:repeat(3,1fr)}.head{padding:14px 15px 10px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}.head h3{margin:0;font-size:15px}.head p{margin:2px 0 0;color:var(--muted);font-size:10px}.body{padding:0 15px 15px}.list{display:grid;gap:7px}.row{border:1px solid var(--line);border-radius:13px;background:#fffef9;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.row b{font-size:11px;display:block}.row small{font-size:9px;color:var(--muted);display:block}.tag{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:950;white-space:nowrap}.purple{background:var(--purple-soft);color:#5f52c8}.mint{background:var(--mint-soft);color:#267f64}.blue{background:var(--blue-soft);color:#3972c7}.orange{background:var(--orange-soft);color:#9e681f}.pink{background:var(--pink-soft);color:#a84d7b}.red{background:var(--red-soft);color:#b74551}.gray{background:#eef1f5;color:#667085}.btn{border:0;border-radius:11px;padding:8px 11px;font-weight:900}.btn.brand{background:var(--purple);color:#fff}.btn.mint{background:var(--mint);color:#fff}.btn.orange{background:var(--orange);color:#fff}.btn.red{background:var(--red);color:#fff}.btn.ghost{background:#f7f2e3;color:#596273;border:1px solid #e9dfc2}.btn.white{background:#fff;color:#5d56b7}.btn.sm{padding:6px 8px;font-size:10px}.sectiongap{margin-top:14px}.field{display:grid;gap:4px;margin-bottom:9px}.field label{font-size:9px;font-weight:900;color:#657080}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fffef9;border-radius:11px;padding:9px 10px;outline:none}.field textarea{min-height:80px;resize:vertical}.notice{border:1px solid #ecd77e;background:#fff6cd;border-radius:13px;padding:10px;color:#6e5a20;font-size:10px}.callout{border-left:4px solid var(--purple);background:#f8f6ff;border-radius:0 12px 12px 0;padding:9px 10px;font-size:10px}.progress-ring{--p:62;--tone:var(--purple);width:126px;height:126px;border-radius:50%;background:conic-gradient(var(--tone) calc(var(--p)*1%),#eee7cf 0);display:grid;place-items:center;position:relative}.progress-ring:before{content:"";position:absolute;inset:11px;background:#fffdf7;border:1px solid var(--line);border-radius:50%}.progress-ring>div{position:relative;text-align:center}.progress-ring strong{display:block;font-size:25px}.progress-ring small{font-size:9px;color:var(--muted)}.ringrow{display:grid;grid-template-columns:145px 1fr;gap:14px;align-items:center}.meter{height:8px;background:#eee8d2;border-radius:999px;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--purple))}.tabs{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fffdf7;border-radius:999px;padding:6px 9px;color:#6b7280;font-weight:850;font-size:10px}.chip.on{background:#fff0aa;color:#765c0d}.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}.quick button{border:1px solid var(--line);background:#fffdf7;border-radius:15px;padding:10px;font-weight:850;color:#596273}.quick span{display:block;font-size:20px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:800px}.table th,.table td{padding:9px 10px;border-bottom:1px solid #eee6cc;text-align:left;font-size:10px}.table th{background:#fff5cd;color:#716a55;font-size:9px}.modalbg{position:fixed;inset:0;background:rgba(35,35,30,.3);opacity:0;visibility:hidden;z-index:80}.modalbg.open{opacity:1;visibility:visible}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);width:min(800px,94vw);max-height:90vh;overflow:auto;background:#fffdf7;border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 80px rgba(35,34,28,.24);opacity:0;visibility:hidden;z-index:90}.modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}.modalhead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.modalbody{padding:14px 16px 20px}.x{border:0;background:#f3eee0;border-radius:9px;width:34px;height:34px}.toast{position:fixed;right:18px;bottom:18px;background:#2f3645;color:#fff;padding:10px 13px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.2s;z-index:120}.toast.show{opacity:1;transform:none}.question{border:1px solid var(--line);border-radius:13px;padding:10px;background:#fff}.option{display:block;border:1px solid #eee4bf;border-radius:10px;padding:7px 8px;margin-top:6px}.filelist{display:grid;gap:6px}.fileitem{border:1px solid var(--line);border-radius:11px;padding:8px;background:#fff;display:flex;justify-content:space-between;gap:8px}.feed{display:grid;gap:8px}.post{border:1px solid var(--line);border-radius:13px;padding:10px;background:#fff}.post.pin{background:#fff9db}.posthead{display:flex;justify-content:space-between;gap:8px}.post p{margin:6px 0}.comment{margin-top:6px;background:#f7f4e9;border-radius:9px;padding:6px 8px;font-size:10px}.chat{border:1px solid var(--line);border-radius:15px;overflow:hidden}.chatlog{height:250px;overflow:auto;padding:10px;background:#fff}.bubble{max-width:82%;border-radius:12px;padding:7px 9px;margin:6px 0;font-size:10px}.bubble.me{margin-left:auto;background:var(--purple-soft)}.bubble.them{background:#f2efe5}.chatsend{display:grid;grid-template-columns:1fr auto;gap:7px;border-top:1px solid var(--line);padding:8px}.chatsend input{border:0;outline:0;background:transparent}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.loginbox{width:min(520px,94vw);background:#fffdf7;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.day{min-height:92px;border:1px solid var(--line);border-radius:13px;padding:7px;background:#fff}.day.today{outline:3px solid rgba(245,201,74,.35)}.event{display:block;border-radius:8px;padding:4px 5px;font-size:8px;margin-top:4px}.event.lesson{background:var(--purple-soft)}.event.test{background:var(--mint-soft)}.event.sub{background:var(--pink-soft)}.event.deadline{background:var(--orange-soft)}@media(max-width:1050px){.two{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.quick{grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.app{grid-template-columns:1fr}.side{display:none}.content{padding:14px 12px 60px}.top{padding:9px 13px}.stats{grid-template-columns:1fr 1fr}.three{grid-template-columns:1fr}.hero{flex-direction:column;align-items:flex-start}.calendar{grid-template-columns:repeat(7,minmax(75px,1fr));overflow:auto}.ringrow{grid-template-columns:1fr}.progress-ring{margin:auto}}@media(max-width:520px){.stats,.quick{grid-template-columns:1fr}.topright .sync{display:none}}