Spaces:
Sleeping
Sleeping
| /* Bảng xanh, phấn trắng, vở ô ly, mực tím — bảng màu lấy từ lớp học Việt Nam. */ | |
| :root{ | |
| --bang:#1E3A32; --bang-hi:#27483E; --go:#6E4A2C; --go-dark:#523620; | |
| --phan:#EFEDE2; --phan-mo:#B9C7BE; --vang:#E8C547; | |
| --tim:#5B3FA8; --tim-nhat:#EDE7FB; --tim-vien:#C9B8F0; | |
| --giay:#FBFAF3; --oly:#CBDCEA; --do:#C6362E; | |
| --muc:#2C2A33; --muc-mo:#6E6A78; | |
| --r:10px; | |
| --dock-h:min(34vh, 300px); | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| html{-webkit-text-size-adjust:100%} | |
| body{ | |
| font-family:"Be Vietnam Pro",system-ui,"Segoe UI",sans-serif; | |
| background:var(--giay); | |
| background-image:linear-gradient(var(--oly) 1px,transparent 1px), | |
| linear-gradient(90deg,var(--oly) 1px,transparent 1px); | |
| background-size:26px 26px; | |
| color:var(--muc); | |
| } | |
| button,select{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} | |
| :focus-visible{outline:2.5px solid var(--tim);outline-offset:2px} | |
| .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} | |
| /* Bảng ăn hết chỗ còn lại, hỏi đáp neo dưới đáy và tự cuộn bên trong. */ | |
| .app{ | |
| height:100dvh;padding:14px;gap:12px; | |
| display:grid;grid-template-rows:1fr auto; | |
| } | |
| /* ---------------- bảng ---------------- */ | |
| .stage{display:flex;flex-direction:column;min-height:0;gap:10px} | |
| .board{ | |
| flex:1;min-height:0; | |
| background:var(--go);border-radius:16px;padding:11px; | |
| box-shadow:0 3px 0 var(--go-dark),0 14px 34px rgba(40,26,12,.22); | |
| display:flex;flex-direction:column; | |
| } | |
| .board__face{ | |
| position:relative;flex:1;min-height:0; | |
| background:var(--bang); | |
| background-image:radial-gradient(ellipse at 30% 22%,var(--bang-hi),var(--bang) 72%); | |
| border-radius:7px;overflow:hidden;display:flex;flex-direction:column; | |
| } | |
| .board__rail{ | |
| height:9px;background:linear-gradient(#8A6038,#5A3B21); | |
| border-radius:0 0 5px 5px;margin:0 12px;flex:none; | |
| } | |
| .board__head{position:absolute;top:16px;left:24px;right:150px;pointer-events:none} | |
| .board__lesson{ | |
| font-family:"Patrick Hand",cursive;font-size:14px;letter-spacing:.14em; | |
| text-transform:uppercase;color:var(--phan-mo);opacity:.75; | |
| } | |
| .board__title{ | |
| font-family:"Patrick Hand",cursive;font-size:20px;color:var(--vang); | |
| border-bottom:2px solid rgba(232,197,71,.38);padding-bottom:4px; | |
| display:inline-block;margin-top:2px; | |
| } | |
| .board__title:empty{display:none} | |
| /* Nhãn cho biết bài này lấy từ đâu — soạn sẵn thì tức khắc, AI thì phải chờ. */ | |
| .badge{ | |
| position:absolute;top:18px;right:20px;font-size:11.5px;font-weight:600; | |
| letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px; | |
| background:rgba(0,0,0,.3);color:var(--phan-mo); | |
| } | |
| .badge--ready{background:rgba(232,197,71,.18);color:var(--vang)} | |
| /* Bảng là hình chữ nhật rộng: hình ghim bên trái, lập luận chồng dòng bên phải. */ | |
| .board__slot{ | |
| flex:1;min-height:0; | |
| display:flex;align-items:stretch;gap:26px; | |
| padding:78px 34px 16px 196px;color:var(--phan); | |
| } | |
| .pane{min-width:0;display:flex} | |
| /* Hình được ưu tiên chỗ, và luôn ăn hết chiều cao còn lại. */ | |
| .pane--figure{flex:1.2 1 0;align-items:center;justify-content:center} | |
| .pane--figure:empty{display:none} | |
| .pane--figure svg{max-width:100%;max-height:100%;width:100%;height:auto;color:var(--phan)} | |
| .pane--work{ | |
| flex:1 1 0;flex-direction:column;justify-content:flex-start; | |
| gap:10px;overflow-y:auto;scrollbar-width:thin; | |
| padding-right:4px; | |
| } | |
| /* Không có hình thì lập luận trải giữa bảng, chữ to hẳn lên. */ | |
| .no-figure .pane--work{align-items:center;justify-content:safe center;font-size:1.28em} | |
| .is-empty .pane--work{align-items:center;justify-content:safe center} | |
| .board__hint{ | |
| font-family:"Patrick Hand",cursive;font-size:clamp(19px,2.1vw,26px); | |
| line-height:1.5;text-align:center;color:var(--phan-mo);max-width:22ch; | |
| } | |
| /* Dòng cũ nhỏ và mờ đi, nhưng vẫn đọc được — đó là cả điểm của việc giữ lại. */ | |
| .line{ | |
| font-family:"Patrick Hand",cursive;font-size:clamp(15px,1.35vw,19px);line-height:1.45; | |
| opacity:.5;transform-origin:left center;transition:opacity .35s ease,font-size .35s ease; | |
| width:100%; | |
| } | |
| .line--now{opacity:1;font-size:clamp(19px,1.85vw,26px)} | |
| .line .katex{font-size:1.55em;color:var(--phan)} | |
| .line--box{ | |
| border:2px solid rgba(232,197,71,.55);border-radius:9px; | |
| padding:8px 14px;background:rgba(232,197,71,.08); | |
| } | |
| .line--box.line--now{border-color:var(--vang)} | |
| .sect{ | |
| font-family:"Patrick Hand",cursive;font-size:14px;letter-spacing:.1em; | |
| text-transform:uppercase;color:var(--vang);opacity:.8; | |
| border-top:1px dashed rgba(232,197,71,.35);padding-top:9px;margin-top:4px;width:100%; | |
| } | |
| .sect:first-child{border-top:none;padding-top:0;margin-top:0} | |
| .ink{animation:write .85s ease-out both} | |
| @keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}} | |
| /* ---------------- nhân vật ---------------- */ | |
| .teacher{ | |
| position:absolute;left:10px;bottom:0; | |
| height:min(64%,300px);width:auto;pointer-events:none; | |
| } | |
| .teacher svg{display:block;height:100%;width:auto} | |
| .bob{animation:bob 3.4s ease-in-out infinite;transform-origin:100px 250px} | |
| @keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1deg)}} | |
| .eyes{animation:blink 5s infinite;transform-origin:center} | |
| @keyframes blink{0%,95.5%,100%{transform:scaleY(1)}97.5%{transform:scaleY(.08)}} | |
| .mouth{transition:rx .07s ease,ry .07s ease,cy .07s ease} | |
| .arm{transform-origin:66px 196px;transition:transform .45s ease} | |
| .teacher.is-writing .arm{transform:rotate(-42deg)} | |
| /* ---------------- phụ đề ---------------- */ | |
| .caption{ | |
| flex:none;margin:0 14px 14px 200px;min-height:50px; | |
| background:rgba(0,0,0,.26);border-left:3px solid var(--vang); | |
| padding:11px 16px;color:var(--phan);font-size:15px;line-height:1.5; | |
| } | |
| .caption:empty{display:none} | |
| /* ---------------- điều khiển ---------------- */ | |
| .ctrl{display:flex;gap:9px;flex-wrap:wrap;align-items:center;flex:none} | |
| .ctrl__step{font-size:13px;color:var(--muc-mo);font-variant-numeric:tabular-nums} | |
| .btn{ | |
| border:1.5px solid var(--tim-vien);background:#fff;color:var(--tim); | |
| border-radius:999px;padding:9px 17px;font-size:14px;font-weight:500;transition:.15s; | |
| } | |
| .btn:hover:not(:disabled){background:var(--tim-nhat);border-color:var(--tim)} | |
| .btn:disabled{opacity:.4;cursor:not-allowed} | |
| .btn--main{background:var(--tim);color:#fff;border-color:var(--tim);font-weight:600} | |
| .btn--main:hover:not(:disabled){background:#4A3190;color:#fff} | |
| .speed{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muc-mo)} | |
| .speed input{width:74px;accent-color:var(--tim)} | |
| .note{flex-basis:100%;font-size:12.5px;color:var(--muc-mo);line-height:1.4} | |
| .note--err{color:var(--do)} | |
| .note:empty{display:none} | |
| /* ---------------- hỏi đáp ---------------- */ | |
| .dock{ | |
| flex:none;height:var(--dock-h); | |
| background:#fff;border:1.5px solid var(--tim-vien);border-radius:14px; | |
| display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden; | |
| } | |
| .dock__topics{padding:14px 16px;min-height:0;display:flex;flex-direction:column;gap:11px} | |
| .dock__ask{ | |
| padding:14px 16px;border-left:1.5px solid #EDE9F7; | |
| min-height:0;display:flex;flex-direction:column;gap:10px; | |
| } | |
| .tabs{display:flex;gap:6px;flex-wrap:wrap;flex:none} | |
| .tab{ | |
| border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500; | |
| color:var(--muc-mo);border:1.5px solid transparent;transition:.15s; | |
| } | |
| .tab:hover{background:var(--tim-nhat);color:var(--tim)} | |
| .tab[aria-selected="true"]{background:var(--tim);color:#fff;font-weight:600} | |
| .chips{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;overflow-y:auto;min-height:0;flex:1} | |
| .chips .btn{padding:7px 13px;font-size:13px} | |
| .askrow{display:flex;gap:8px;align-items:stretch;flex:none} | |
| .ask{ | |
| flex:1;border:1.5px solid var(--tim-vien);border-radius:var(--r); | |
| padding:10px 12px;font-family:inherit;font-size:14.5px;color:var(--muc); | |
| resize:none;background:var(--giay); | |
| } | |
| .ask:focus{outline:none;border-color:var(--tim);background:#fff} | |
| .btn--send{flex:none;align-self:stretch} | |
| .log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5} | |
| .log__i{padding:8px 11px;border-radius:9px;background:var(--tim-nhat);color:#3B2A73} | |
| .log__i--me{background:var(--giay);border:1.5px solid #E4E0D2;color:var(--muc)} | |
| .log__i b{ | |
| display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em; | |
| opacity:.65;margin-bottom:2px;font-weight:600; | |
| } | |
| /* ---------------- màn hẹp ---------------- */ | |
| @media(max-width:820px){ | |
| :root{--dock-h:auto} | |
| .app{height:auto;min-height:100dvh;grid-template-rows:auto auto} | |
| .stage{min-height:66vh} | |
| .board__slot{flex-direction:column;gap:12px;padding:70px 16px 12px} | |
| .pane--figure{flex:0 0 auto;max-height:42vh} | |
| .pane--figure svg{max-height:42vh} | |
| .pane--work{flex:1 1 auto} | |
| .line--now{font-size:18px} | |
| .line{font-size:14px} | |
| .caption{margin:0 12px 12px} | |
| .teacher{height:150px;left:2px;opacity:.92} | |
| .dock{grid-template-columns:1fr} | |
| .dock__ask{border-left:none;border-top:1.5px solid #EDE9F7} | |
| .chips{max-height:150px} | |
| .log{max-height:170px} | |
| } | |
| @media(prefers-reduced-motion:reduce){ | |
| .bob,.eyes,.ink{animation:none} | |
| .mouth,.arm{transition:none} | |
| } | |