*{box-sizing:border-box;}
:root{--kyyeu-accent:#FF7BA8; --kyyeu-heading-font:'Quicksand',sans-serif; --kyyeu-heading-scale:1;
      --k-yellow:#FFD24D; --k-blue:#5EC8F0; --k-green:#7ED97A; --k-purple:#B98CF0; --k-orange:#FF9F5A;}
html{background:#FFF9EE;}
body{margin:0; color:#4A3A46; font-family:'Quicksand',sans-serif; font-weight:500; line-height:1.75; overflow-x:hidden;
  background:var(--kyyeu-bg,
    radial-gradient(circle at 12% 10%, rgba(255,210,77,.2), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(94,200,240,.2), transparent 34%),
    radial-gradient(circle at 20% 82%, rgba(126,217,122,.18), transparent 34%),
    linear-gradient(180deg,#FFFCF4 0%,#FFF4E8 50%,#FFEEF4 100%));}
.wrap{max-width:740px; margin:0 auto; position:relative; z-index:4;}
@media (prefers-reduced-motion: reduce){ .balloon,.cloud,.kid-frame{animation:none !important;} }

/* BONG BÓNG BAY */
.balloon-field{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.balloon{position:absolute; bottom:-90px; width:34px; height:44px; border-radius:50% 50% 48% 48%;
  animation:balloonUp linear forwards; opacity:.85;}
.balloon::after{content:""; position:absolute; top:100%; left:50%; width:1.5px; height:36px;
  background:rgba(120,100,110,.34); transform:translateX(-50%);}
@keyframes balloonUp{
  0%{transform:translateY(0) translateX(0) rotate(-3deg); opacity:0;}
  10%{opacity:.9;}
  100%{transform:translateY(-118vh) translateX(var(--bx,40px)) rotate(4deg); opacity:.5;}
}

/* CẦU VỒNG */
.rainbow-arc{position:fixed; top:-190px; left:50%; transform:translateX(-50%); width:660px; height:400px;
  z-index:0; pointer-events:none; border-radius:50%; opacity:.24;
  background:conic-gradient(from 180deg,
    transparent 0deg 40deg,#FF7BA8 40deg 46deg,#FF9F5A 46deg 52deg,#FFD24D 52deg 58deg,
    #7ED97A 58deg 64deg,#5EC8F0 64deg 70deg,#B98CF0 70deg 76deg, transparent 76deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 56%, #000 57%);
  mask:radial-gradient(circle, transparent 56%, #000 57%);}

/* MÂY */
.cloud{position:absolute; background:#fff; border-radius:50px; opacity:.85; z-index:1;
  box-shadow:0 6px 16px rgba(120,100,110,.1); animation:cloudFloat 16s ease-in-out infinite;}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%;}
.cloud.c1{width:78px; height:26px; top:22px; left:8%;}
.cloud.c1::before{width:34px; height:34px; top:-14px; left:12px;}
.cloud.c1::after{width:26px; height:26px; top:-9px; right:14px;}
.cloud.c2{width:60px; height:20px; top:64px; right:11%; animation-delay:-5s;}
.cloud.c2::before{width:26px; height:26px; top:-11px; left:10px;}
.cloud.c2::after{width:20px; height:20px; top:-7px; right:11px;}
.cloud.c3{width:50px; height:17px; top:150px; left:16%; animation-delay:-9s; opacity:.6;}
.cloud.c3::before{width:22px; height:22px; top:-9px; left:9px;}
.cloud.c3::after{width:17px; height:17px; top:-6px; right:9px;}
@keyframes cloudFloat{0%,100%{transform:translateX(0);} 50%{transform:translateX(26px);}}

.cover{padding:56px 22px 26px; text-align:center; position:relative; z-index:4;}
.eyebrow{font-size:12px; letter-spacing:.16em; color:var(--kyyeu-accent); font-weight:700; margin-bottom:22px;}
.cover-photo{position:relative; width:200px; height:200px; margin:0 auto 24px;}
.cover-photo img{width:100%; height:100%; object-fit:cover; border-radius:32px;
  border:7px solid #fff; box-shadow:0 14px 30px rgba(120,100,110,.2); transform:rotate(-2deg);}
.photo-star{position:absolute; font-size:26px; animation:starTwinkle 2.6s ease-in-out infinite;}
.photo-star.s1{top:-14px; right:-6px; color:var(--k-yellow);}
.photo-star.s2{bottom:-6px; left:-14px; color:var(--kyyeu-accent); animation-delay:.8s;}
.photo-star.s3{top:44%; right:-22px; color:var(--k-orange); animation-delay:1.6s;}
@keyframes starTwinkle{0%,100%{transform:scale(.85) rotate(-8deg); opacity:.75;} 50%{transform:scale(1.2) rotate(8deg); opacity:1;}}
.cover h1{font-family:var(--kyyeu-heading-font); font-weight:700;
  font-size:calc(42px * var(--kyyeu-heading-scale)); margin:0 0 8px; color:var(--kyyeu-accent);
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(255,123,168,.18);}
.cover-meta{margin:0 0 18px; font-size:14.5px; color:#8A7A86;}
.kid-badges{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.kid-badge{padding:8px 18px; border-radius:24px; font-size:13px; font-weight:700; color:#fff;}
.kid-badge.b1{background:var(--k-blue);} .kid-badge.b2{background:var(--k-green);}

.section{padding:50px 24px 8px; position:relative; z-index:4;}
.section-head{text-align:center; margin-bottom:28px;}
.section h2{font-family:var(--kyyeu-heading-font); font-weight:700;
  font-size:calc(28px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 6px;}
.section .sub{font-size:13px; color:#8A7A86;}

/* LỜI CÔ GIÁO */
.teacher-note{max-width:540px; margin:0 auto; background:#fff; border-radius:24px; padding:26px 28px;
  box-shadow:0 12px 28px rgba(120,100,110,.14); border:3px dashed var(--k-yellow); position:relative;}
.tn-badge{display:inline-block; background:var(--k-yellow); color:#6A4A10; font-size:12px; font-weight:700;
  padding:5px 14px; border-radius:16px; margin-bottom:12px;}
.teacher-note p{margin:0; font-size:15px; color:#4A3A46;}

/* ALBUM CÁC BÉ */
.kid-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.kid-frame{margin:0; position:relative; background:#fff; padding:8px 8px 4px; border-radius:16px; cursor:pointer;
  box-shadow:0 8px 20px rgba(120,100,110,.14); opacity:0; transform:translateY(16px) scale(.94);
  transition:opacity .7s ease var(--d), transform .7s cubic-bezier(.2,1.3,.4,1) var(--d);}
.kid-frame.popped{opacity:1; transform:translateY(0) scale(1) rotate(var(--tilt,-1.5deg));}
.kid-frame.c1{--tilt:-2.4deg; border-bottom:5px solid var(--kyyeu-accent);}
.kid-frame.c2{--tilt:1.8deg; border-bottom:5px solid var(--k-yellow);}
.kid-frame.c3{--tilt:-1.2deg; border-bottom:5px solid var(--k-blue);}
.kid-frame.c4{--tilt:2.2deg; border-bottom:5px solid var(--k-green);}
.kid-frame.c5{--tilt:-1.8deg; border-bottom:5px solid var(--k-purple);}
.kid-frame.c6{--tilt:1.4deg; border-bottom:5px solid var(--k-orange);}
.kid-frame.bounced{animation:kidBounce .7s cubic-bezier(.3,1.6,.4,1);}
@keyframes kidBounce{0%{transform:scale(1) rotate(var(--tilt));} 35%{transform:scale(1.14) rotate(0deg) translateY(-10px);} 100%{transform:scale(1) rotate(var(--tilt));}}
.kid-frame img{width:100%; height:92px; object-fit:cover; border-radius:10px; display:block;}
.kf-tape{position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-4deg); width:44px; height:16px;
  background:rgba(255,210,77,.72); border-radius:2px;}
.kid-frame figcaption{text-align:center; font-size:11px; color:#8A7A86; padding:6px 2px 2px; font-weight:600;}
@media(min-width:600px){.kid-frame img{height:118px;}}
@media(max-width:520px){.kid-gallery{grid-template-columns:repeat(2,1fr);}}

.see-full{text-align:center; margin:30px 0 0;}
.see-full a{display:inline-block; background:var(--kyyeu-accent); color:#fff; font-weight:700; font-size:14px;
  padding:12px 26px; border-radius:26px; text-decoration:none; box-shadow:0 8px 18px rgba(255,123,168,.32);
  transition:transform .3s ease;}
.see-full a:hover{transform:translateY(-3px) scale(1.03);}

/* ĐIỀU BÉ THÍCH */
.like-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:600px; margin:0 auto;}
.like-card{background:#fff; border-radius:20px; padding:18px 14px; text-align:center;
  box-shadow:0 8px 18px rgba(120,100,110,.12); transition:transform .35s cubic-bezier(.3,1.4,.4,1);}
.like-card:hover{transform:translateY(-6px) rotate(-2deg);}
.like-card.k1{border-top:5px solid var(--kyyeu-accent);} .like-card.k2{border-top:5px solid var(--k-yellow);}
.like-card.k3{border-top:5px solid var(--k-blue);} .like-card.k4{border-top:5px solid var(--k-green);}
.like-card.k5{border-top:5px solid var(--k-purple);}
.lc-emoji{display:block; font-size:30px; margin-bottom:8px; animation:starTwinkle 3s ease-in-out infinite;}
.like-card strong{display:block; font-size:14.5px; color:#4A3A46; margin-bottom:4px;}
.lc-what{font-size:12.5px; color:#8A7A86;}
@media(max-width:520px){.like-grid{grid-template-columns:repeat(2,1fr);}}

/* BÉ LỚN LÊN */
.growth-list{max-width:540px; margin:0 auto;}
.growth-row{display:grid; grid-template-columns:110px 1fr 110px; gap:12px; align-items:center; padding:12px 0;}
.gr-label{font-size:12.5px; color:#8A7A86; text-align:right;}
.gr-bar{height:16px; background:rgba(120,100,110,.1); border-radius:10px; overflow:hidden;}
.gr-fill{display:block; height:100%; width:0; border-radius:10px;
  background:linear-gradient(90deg,var(--k-yellow),var(--kyyeu-accent));
  transition:width 1.4s cubic-bezier(.2,.8,.3,1);}
.gr-fill.grown{width:var(--w);}
.gr-what{font-size:13px; color:#4A3A46; font-weight:600;}
@media(max-width:520px){.growth-row{grid-template-columns:1fr; text-align:center;} .gr-label{text-align:center;}}

/* LỜI NHẮN */
.kid-notes{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:600px; margin:0 auto;}
.kid-note{border-radius:20px; padding:18px 20px; box-shadow:0 8px 18px rgba(120,100,110,.12);}
.kid-note.n1{background:#FFF0F5;} .kid-note.n2{background:#FFF8E4;}
.kid-note.n3{background:#EAF7FF;} .kid-note.n4{background:#EEFBEC;}
.kid-note p{margin:0 0 8px; font-size:14px; color:#4A3A46;}
.kid-note cite{font-style:normal; font-size:13px; font-weight:700; color:var(--kyyeu-accent);}
@media(max-width:520px){.kid-notes{grid-template-columns:1fr;}}

.share{margin:54px 24px 30px; padding:40px 26px; text-align:center; border-radius:28px;
  background:linear-gradient(150deg,var(--kyyeu-accent),#F05A8A); color:#fff; position:relative; z-index:4;}
.share h2{font-family:var(--kyyeu-heading-font); font-weight:700; font-size:26px; margin:0 0 8px; color:#FFF4D8;}
.share p{font-size:13.5px; margin:0 0 20px; opacity:.92;}
#qrcode{background:#fff; display:inline-block; padding:10px; border-radius:16px; 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,.2); padding:8px 14px; border-radius:20px;}
.link-row button{background:var(--k-yellow); color:#6A4A10; border:none; padding:8px 16px; border-radius:20px;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:'Quicksand',sans-serif;}

.foot{text-align:center; font-size:12px; color:#8A7A86; padding:0 20px 44px; position:relative; z-index:4;}

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

/* 1. BẢNG BÉ NGOAN — DÁN SAO */
.star-chart{max-width:560px; margin:0 auto; background:#fff; border-radius:22px; padding:20px;
  box-shadow:0 12px 28px rgba(120,100,110,.14); border:3px solid var(--k-yellow);}
.sc-row{display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; padding:10px 0;
  border-bottom:2px dotted rgba(120,100,110,.14);}
.sc-row:last-child{border-bottom:none;}
.sc-kid{font-size:13.5px; font-weight:700; color:#4A3A46;}
.sc-stars{display:flex; gap:6px; flex-wrap:wrap;}
.sc-star-slot{width:26px; height:26px; border-radius:50%; border:2px dashed rgba(255,210,77,.65);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:transparent; cursor:pointer;
  transition:transform .3s cubic-bezier(.3,1.6,.4,1), border-color .3s ease;}
.sc-star-slot.filled{color:var(--k-yellow); border-color:transparent; border-style:solid;
  animation:starPop .5s cubic-bezier(.3,1.7,.4,1);}
@keyframes starPop{0%{transform:scale(0) rotate(-90deg);} 60%{transform:scale(1.4) rotate(10deg);} 100%{transform:scale(1) rotate(0);}}
.sc-hint{text-align:center; font-size:12px; color:#8A7A86; margin-top:12px;}

/* 2. HỘP ĐỒ CHƠI — BẤM MỞ KỶ NIỆM */
.toybox{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:560px; margin:0 auto;}
.toy{position:relative; aspect-ratio:1; border-radius:20px; cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  box-shadow:0 8px 18px rgba(120,100,110,.14); transition:transform .35s cubic-bezier(.3,1.5,.4,1);}
.toy:hover{transform:translateY(-5px) rotate(-3deg);}
.toy.t1{background:#FFE8F0;} .toy.t2{background:#FFF6DC;} .toy.t3{background:#E6F6FF;}
.toy.t4{background:#EAFBE6;} .toy.t5{background:#F4EAFE;} .toy.t6{background:#FFEEE0;}
.toy-face{transition:opacity .4s ease;}
.toy-memory{position:absolute; inset:0; background:rgba(255,255,255,.96); padding:10px;
  display:flex; align-items:center; justify-content:center; text-align:center; font-size:11.5px;
  color:#4A3A46; font-weight:600; line-height:1.5; opacity:0; transform:scale(.7); transition:opacity .4s ease, transform .4s cubic-bezier(.3,1.5,.4,1);}
.toy.opened .toy-face{opacity:0;}
.toy.opened .toy-memory{opacity:1; transform:scale(1);}
@media(max-width:520px){.toybox{grid-template-columns:repeat(3,1fr);}}

/* 3. BẢNG VẼ TỰ DO CHO BÉ */
.doodle-wrap{max-width:520px; margin:0 auto;}
.doodle-board{position:relative; height:200px; border-radius:20px; overflow:hidden; cursor:crosshair;
  background:#fff; border:4px solid var(--k-blue); box-shadow:0 10px 24px rgba(120,100,110,.14); touch-action:none;}
.doodle-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#B8AEB6; pointer-events:none; transition:opacity .4s ease; font-weight:600;}
.doodle-board.drawn .doodle-hint{opacity:0;}
.doodle-tools{display:flex; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap;}
.dt-color{width:34px; height:34px; border-radius:50%; border:3px solid #fff; cursor:pointer;
  box-shadow:0 4px 10px rgba(120,100,110,.2); transition:transform .3s cubic-bezier(.3,1.6,.4,1);}
.dt-color.active{transform:scale(1.25);}
.dt-clear{background:#fff; border:2px solid var(--k-blue); color:var(--k-blue); border-radius:20px;
  padding:8px 18px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:12.5px; cursor:pointer;}