*{box-sizing:border-box;}
:root{--kyyeu-accent:#2E5FA8; --kyyeu-heading-font:'Patrick Hand','Caveat',cursive; --kyyeu-heading-scale:1;
      --ink-red:#D63A3A; --ink-blue:#2E5FA8; --paper-line:#B8CFE8;}
html{background:#FCFBF4;}
body{margin:0; color:#2A2E36; font-family:'Literata',serif; line-height:1.8; overflow-x:hidden;
  background:var(--kyyeu-bg,#FCFBF4);}
.wrap{max-width:720px; margin:0 auto; position:relative; z-index:3;}
@media (prefers-reduced-motion: reduce){ .handwriting{border-right:none !important;} }

/* GIẤY Ô LY */
.paper-bg{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(214,58,58,.22) 0 1.5px, transparent 1.5px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(184,207,232,.5) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(184,207,232,.28) 27px 28px);
  background-position:64px 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, repeat;}

.cover{padding:44px 22px 26px; text-align:center; position:relative; z-index:3;}
.notebook-header{max-width:460px; margin:0 auto 26px; display:flex; align-items:baseline; gap:12px;
  font-family:var(--kyyeu-heading-font); font-size:19px; color:var(--ink-blue);}
.nb-subject{white-space:nowrap;}
.nb-line{flex:1; border-bottom:1.5px dotted var(--paper-line);}
.nb-class{white-space:nowrap;}

.cover-photo{position:relative; width:180px; height:180px; margin:0 auto 26px;}
.cover-photo img{width:100%; height:100%; object-fit:cover; border:8px solid #fff; border-radius:3px;
  box-shadow:0 12px 26px rgba(42,46,54,.18); transform:rotate(-1.5deg);}
.photo-clip{position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:26px; height:34px;
  border:3px solid #8A9AA8; border-radius:12px 12px 3px 3px; border-bottom:none;}

/* KHU VỰC TẬP VIẾT — CHỮ HIỆN DẦN */
.writing-area{position:relative; max-width:520px; margin:0 auto 18px; padding:14px 0;}
.guide-lines{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 22%, var(--paper-line) 22%, var(--paper-line) calc(22% + 1px), transparent calc(22% + 1px),
    transparent 50%, rgba(184,207,232,.55) 50%, rgba(184,207,232,.55) calc(50% + 1px), transparent calc(50% + 1px),
    transparent 78%, var(--paper-line) 78%, var(--paper-line) calc(78% + 1px), transparent calc(78% + 1px));}
.handwriting{position:relative; font-family:var(--kyyeu-heading-font); font-weight:700;
  font-size:calc(52px * var(--kyyeu-heading-scale)); margin:0; color:var(--ink-blue);
  white-space:nowrap; overflow:hidden; display:inline-block;
  border-right:3px solid rgba(46,95,168,.7); animation:caretBlink .9s step-end infinite;}
@keyframes caretBlink{0%,100%{border-color:rgba(46,95,168,.7);} 50%{border-color:transparent;}}

/* DÒNG TẬP VIẾT: MẪU + BÉ VIẾT LẠI */
.practice-line{max-width:520px; margin:0 auto 20px; text-align:left;}
.pl-model,.pl-copy{margin:0 0 6px; font-family:var(--kyyeu-heading-font); font-size:22px; padding-left:10px;
  border-bottom:1.5px dotted var(--paper-line); padding-bottom:6px;}
.pl-model{color:rgba(46,95,168,.32);}
.pl-copy{color:var(--ink-blue); transform:rotate(-.4deg);}

.cover-meta{margin:0 0 6px; font-size:13.5px; color:#6A727E;}
.teacher-name{margin:0 0 20px; font-family:var(--kyyeu-heading-font); font-size:17px; color:var(--ink-red);}
.grade-stamp{display:inline-block; font-family:var(--kyyeu-heading-font); font-size:30px; color:var(--ink-red);
  border:3px solid var(--ink-red); border-radius:50%; width:104px; height:104px; line-height:98px;
  transform:rotate(-11deg); opacity:.88;}

.section{padding:52px 24px 8px; position:relative; z-index:3;}
.section-head{text-align:center; margin-bottom:28px;}
.section h2{font-family:var(--kyyeu-heading-font); font-weight:700;
  font-size:calc(34px * var(--kyyeu-heading-scale)); color:var(--ink-blue); margin:0 0 4px;}
.section .sub{font-size:12.5px; color:#7A828E;}

/* ẢNH DÁN BĂNG DÍNH */
.paper-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.taped-photo{margin:0; position:relative; background:#fff; padding:10px 10px 4px; border-radius:2px;
  box-shadow:0 10px 22px rgba(42,46,54,.16); opacity:0; transform:translateY(16px) rotate(0);
  transition:opacity .8s ease var(--d), transform .8s cubic-bezier(.2,.9,.3,1) var(--d);}
.taped-photo.pasted{opacity:1; transform:translateY(0) rotate(var(--tilt));}
.tp-tape{position:absolute; top:-9px; width:40px; height:17px; background:rgba(230,224,196,.86);
  box-shadow:0 1px 3px rgba(0,0,0,.1);}
.tp-tape.left{left:6px; transform:rotate(-22deg);}
.tp-tape.right{right:6px; transform:rotate(20deg);}
.taped-photo img{width:100%; height:120px; object-fit:cover; display:block;}
.taped-photo figcaption{text-align:center; font-family:var(--kyyeu-heading-font); font-size:16px;
  color:var(--ink-blue); padding:8px 2px 4px;}
@media(max-width:600px){.paper-gallery{grid-template-columns:repeat(2,1fr);}}

.see-full{text-align:center; margin:32px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-size:20px; color:var(--ink-red); text-decoration:none;
  border-bottom:2px solid rgba(214,58,58,.4);}

/* THỜI KHÓA BIỂU */
.schedule{width:100%; max-width:560px; margin:0 auto; border-collapse:collapse; background:rgba(255,255,255,.86);
  box-shadow:0 10px 24px rgba(42,46,54,.1);}
.schedule th{background:var(--ink-blue); color:#fff; font-family:var(--kyyeu-heading-font); font-weight:700;
  font-size:17px; padding:10px 14px; text-align:left;}
.schedule td{padding:11px 14px; border-bottom:1px dashed var(--paper-line); font-size:13.5px;
  opacity:0; transform:translateX(-8px); animation:rowIn .6s ease var(--d) forwards;}
@keyframes rowIn{to{opacity:1; transform:translateX(0);}}
.schedule tr:last-child td{border-bottom:none;}
.sc-no{width:44px; font-family:var(--kyyeu-heading-font); font-size:18px; color:var(--ink-red);}
.sc-subject{color:#2A2E36; font-weight:500;}
.sc-real{font-family:var(--kyyeu-heading-font); font-size:17px; color:var(--ink-red);}

/* BẢNG SAO THÀNH TÍCH */
.star-board{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:600px; margin:0 auto;}
.star-cell{background:#fff; border:2px solid var(--paper-line); border-radius:8px; padding:16px 12px; text-align:center;
  opacity:0; transform:scale(.9); animation:starIn .55s cubic-bezier(.3,1.5,.4,1) var(--d) forwards;}
@keyframes starIn{to{opacity:1; transform:scale(1);}}
.sc-star{display:block; font-size:26px; color:#F2B62E; margin-bottom:6px;}
.star-cell strong{display:block; font-size:13.5px; color:#2A2E36; margin-bottom:3px;}
.sc-note{font-family:var(--kyyeu-heading-font); font-size:15px; color:var(--ink-red);}
@media(max-width:520px){.star-board{grid-template-columns:repeat(2,1fr);}}

/* LỜI PHÊ */
.comment-list{max-width:540px; margin:0 auto;}
.comment-row{background:rgba(255,255,255,.9); border-left:4px solid var(--ink-red); padding:16px 20px;
  margin-bottom:14px; box-shadow:0 6px 14px rgba(42,46,54,.08);}
.comment-row p{margin:0 0 8px; font-family:var(--kyyeu-heading-font); font-size:19px; color:var(--ink-red); line-height:1.6;}
.comment-row cite{font-style:normal; font-size:12.5px; color:#6A727E;}

.share{margin:56px 24px 30px; padding:40px 26px; text-align:center; background:#2A3038; color:#F2F4F6;
  border-radius:6px; position:relative; z-index:3;
  box-shadow:0 16px 34px rgba(42,46,54,.28), inset 0 0 60px rgba(0,0,0,.3);}
.share::before{content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.14); pointer-events:none;}
.share h2{font-family:var(--kyyeu-heading-font); font-weight:700; font-size:32px; margin:0 0 8px; color:#fff;}
.share p{font-size:13px; margin:0 0 20px; color:#A8B0B8;}
#qrcode{background:#fff; display:inline-block; padding:9px; border-radius:4px; margin-bottom:16px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:12.5px;}
.link-row code{background:rgba(255,255,255,.1); padding:7px 13px; border-radius:3px;}
.link-row button{background:#F2B62E; color:#2A3038; border:none; padding:7px 15px; border-radius:3px;
  font-size:12px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:11.5px; color:#7A828E; padding:0 20px 44px; position:relative; z-index:3;}

/* ============ TÍNH NĂNG ĐẶC BIỆT ============ */

/* 1. BẢNG ĐEN PHẤN TRẮNG — CHỮ VIẾT DẦN */
.chalkboard{max-width:560px; margin:0 auto; background:#2E4038; border-radius:6px; padding:34px 30px;
  box-shadow:0 16px 34px rgba(42,46,54,.3), inset 0 0 70px rgba(0,0,0,.34);
  border:12px solid #8A6F4E; position:relative; min-height:170px;}
.chalkboard::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px;
  background:#6A5238; border-radius:0 0 4px 4px;}
.cb-text{font-family:var(--kyyeu-heading-font); font-size:27px; color:#F2F4F0; line-height:1.7;
  text-shadow:0 0 6px rgba(255,255,255,.24); min-height:80px;}
.cb-caret{display:inline-block; width:2px; height:26px; background:#F2F4F0; vertical-align:middle;
  animation:chalkBlink .8s step-end infinite;}
@keyframes chalkBlink{0%,100%{opacity:1;} 50%{opacity:0;}}
.cb-dust{position:absolute; bottom:6px; left:0; right:0; height:16px; pointer-events:none;
  background:radial-gradient(ellipse 30% 100% at 20% 100%, rgba(255,255,255,.14), transparent 70%),
             radial-gradient(ellipse 26% 100% at 68% 100%, rgba(255,255,255,.1), transparent 70%);}
.cb-eraser{position:absolute; right:24px; bottom:-10px; width:56px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#D8CFA8,#A89878); box-shadow:0 3px 7px rgba(0,0,0,.3); cursor:pointer;
  transition:transform .3s ease;}
.cb-eraser:hover{transform:translateY(-3px);}

/* 2. BẢNG CỬU CHƯƠNG KỶ NIỆM */
.times-table{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:560px; margin:0 auto;}
.tt-cell{background:rgba(255,255,255,.9); border:2px solid var(--paper-line); border-radius:6px;
  padding:14px 12px; text-align:center; cursor:pointer; transition:transform .3s cubic-bezier(.3,1.5,.4,1), border-color .3s ease;}
.tt-cell:hover{transform:translateY(-4px); border-color:var(--ink-red);}
.tt-eq{font-family:var(--kyyeu-heading-font); font-size:21px; color:var(--ink-blue); margin-bottom:4px;}
.tt-mean{font-size:12px; color:#6A727E; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .4s ease, max-height .4s ease;}
.tt-cell.solved .tt-mean{opacity:1; max-height:70px;}
.tt-cell.solved{border-color:var(--ink-red); background:#FFF8F4;}
@media(max-width:520px){.times-table{grid-template-columns:repeat(2,1fr);}}

/* 3. HỘP BÚT — CHỌN DỤNG CỤ ĐỔI MÀU MỰC TOÀN TRANG */
.pencil-case{max-width:520px; margin:0 auto; background:#8A6F4E; border-radius:14px; padding:18px;
  box-shadow:0 12px 26px rgba(42,46,54,.24); display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.pc-tool{width:110px; text-align:center; cursor:pointer; transition:transform .35s cubic-bezier(.3,1.5,.4,1);}
.pc-tool:hover{transform:translateY(-6px);}
.pc-body{height:74px; width:16px; margin:0 auto 8px; border-radius:3px 3px 2px 2px; position:relative;}
.pc-body::before{content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:13px solid #E8D8B8;}
.pc-body::after{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:5px solid #3A3A3A;}
.pc-name{font-size:11.5px; color:#F2E8D4; font-weight:600;}
.pc-tool.active .pc-body{box-shadow:0 0 0 3px rgba(255,255,255,.65);}
.ink-preview{max-width:520px; margin:16px auto 0; background:rgba(255,255,255,.9); border-radius:8px;
  padding:18px 22px; border-left:4px solid var(--ink-blue); transition:border-color .5s ease;}
.ink-preview p{margin:0; font-family:var(--kyyeu-heading-font); font-size:21px; transition:color .5s ease;}