/* Góc Mầm non — trò vui thêm (assets/mn2.js) */
.mn-t-card { background: #FFD9E8; } .mn-t-memory { background: #D9F0FF; } .mn-t-balloon { background: #FFE6B8; } .mn-t-feed { background: #E3F6D8; }
.mn-t-paint { background: #F3E3FF; grid-column: 1 / -1; min-height: 110px; flex-direction: row; gap: 14px; }

.mn-chips2 { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.mn-chip2 { border: 0; background: #F3EDE3; border-radius: 999px; padding: 6px 12px; font: 800 14px Nunito, sans-serif; color: #3B2A14; cursor: pointer; }
.mn-chip2.on { background: #FF9F1C; color: #fff; }

/* the hinh */
.mn-card { position: relative; display: block; width: 100%; max-width: 300px; height: 330px; margin: 0 auto; border: 0; background: none; perspective: 900px; cursor: pointer; }
.mn-card > span { position: absolute; inset: 0; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  backface-visibility: hidden; transition: transform .45s; box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.mn-card-face { background: #FFF4D6; }
.mn-card-back { background: #fff; transform: rotateY(180deg); border: 4px solid #FFE0B0; }
.mn-card.flip .mn-card-face { transform: rotateY(180deg); } .mn-card.flip .mn-card-back { transform: rotateY(360deg); }
.mn-card-back b { font: 900 30px 'Baloo 2', Nunito, sans-serif; color: #2B2D42; }
.mn-card-back em { font: 900 28px 'Baloo 2', Nunito, sans-serif; color: #2BA84A; font-style: normal; }
.mn-card-star { position: absolute; top: 12px; right: 14px; font-style: normal; font-size: 26px; }
.mn-swatch.big { width: 140px; height: 140px; }
.mn-card .mn-shape { width: 140px; height: 140px; }

/* lat tim cap */
.mn-mem { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(2, 1fr); }
.mn-mem-6 { grid-template-columns: repeat(3, 1fr); } .mn-mem-8 { grid-template-columns: repeat(4, 1fr); }
.mn-mcard { position: relative; aspect-ratio: 3 / 4; border: 0; background: none; padding: 0; perspective: 600px; cursor: pointer; }
.mn-mcard > span { position: absolute; inset: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform .35s; }
.mn-mfront { background: #FF9F1C; font-size: 42px; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.mn-mback { background: #fff; border: 4px solid #F0E6D8; transform: rotateY(180deg); }
.mn-mcard.up .mn-mfront { transform: rotateY(180deg); } .mn-mcard.up .mn-mback { transform: rotateY(360deg); }
.mn-mcard.got .mn-mback { border-color: #2BA84A; background: #E7F8E3; animation: mn-pop .4s; }
.mn-mcard .mn-em { font-size: 46px; } .mn-mcard .mn-shape { width: 60px; height: 60px; }

/* bong bay */
.mn-sky { position: relative; height: 420px; margin-top: 12px; border-radius: 24px; overflow: hidden; background: linear-gradient(#BEE3FF, #EAF6FF); touch-action: manipulation; }
.mn-bal { position: absolute; bottom: -120px; width: 74px; height: 92px; border: 0; border-radius: 50% 50% 48% 48%; cursor: pointer; animation: mn-rise linear forwards;
  box-shadow: inset -10px -12px 0 rgba(0,0,0,.12); }
.mn-bal::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 40px; background: rgba(0,0,0,.25); }
.mn-bal b { font: 900 34px 'Baloo 2', Nunito, sans-serif; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.3); }
.mn-bal.pop { animation: mn-burst .35s forwards !important; }
@keyframes mn-rise { to { transform: translateY(-560px); } }
@keyframes mn-burst { to { transform: scale(1.8); opacity: 0; } }

/* cho thu an */
.mn-animal { width: 190px; height: 190px; margin: 14px auto 4px; border-radius: 50%; background: #FFF1D0; display: flex; align-items: center; justify-content: center; border: 5px dashed #F2C879; }
.mn-animal.yum { animation: mn-pop .5s 2; border-style: solid; border-color: #2BA84A; }
.mn-animal .mn-em.xl { font-size: 110px; }
.mn-foods { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.mn-food { width: 96px; height: 96px; border: 4px solid #F0E6D8; background: #fff; border-radius: 24px; cursor: grab; touch-action: none; }
.mn-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .85; transform: scale(1.1); border: 4px solid #FF9F1C; background: #fff; border-radius: 24px; height: 96px; }

/* to mau */
.mn-paint { background: #fff; border-radius: 24px; padding: 8px; margin-top: 12px; border: 4px solid #F0E6D8; }
.mn-paint svg { display: block; width: 100%; height: auto; max-height: 340px; touch-action: manipulation; }
.mn-paint [data-r] { cursor: pointer; }
.mn-paint.small { max-width: 220px; margin: 10px auto; }
.mn-pal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.mn-col { width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #E6DED2; cursor: pointer; }
.mn-col.on { box-shadow: 0 0 0 4px #2B2D42; transform: scale(1.1); }

/* so sticker */
.mn-album-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; border: 0; border-radius: 20px; padding: 12px 14px; background: #FFF0C2; font: inherit; text-align: left; cursor: pointer; }
.mn-album-btn .mn-em { font-size: 40px; }
.mn-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.mn-stk { aspect-ratio: 1; border: 4px dashed #E6DED2; background: #FBF8F3; border-radius: 22px; font-size: 54px; cursor: pointer; }
.mn-stk.own { border-style: solid; border-color: #FFD36B; background: #fff; }
.mn-unlock { background: #fff; border-radius: 20px; padding: 14px; }
.mn-gift-wrap { margin: 10px 0; }
.mn-gift { border: 0; background: none; font-size: 86px; cursor: pointer; animation: mn-wiggle 1.2s infinite; }
@keyframes mn-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.mn-stk-get { font-size: 96px; animation: mn-pop .6s; }
.mn-rep p { margin: 6px 0; font-size: 15px; line-height: 1.45; }