/* Trang chủ AI Teacher chạy thật trong /pet-3d.
   Màn hình dựng ở kích thước lô-gíc cố định (điện thoại 390×844, máy tính 1440×900)
   rồi phóng vừa khung nhìn — giống hệt cách bản mô phỏng ở /home-ai-teachers dựng,
   nên không phải viết lại giao diện cho co giãn. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#140C26;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#stage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--s,1));
  transform-origin:center;width:var(--w,390px);height:var(--h,844px);overflow:hidden;
  background:#fff;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
/* thanh chuyển bản — nổi dưới đáy, bấm được bằng ngón tay */
#nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:flex;gap:6px;
  background:rgba(20,12,38,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:5px;max-width:calc(100vw - 20px);overflow:auto}
#nav a{flex:none;color:#D9CFF2;text-decoration:none;font:700 12.5px 'Open Sans',sans-serif;
  padding:7px 13px;border-radius:999px;white-space:nowrap}
#nav a.on{background:#fff;color:#2A1A55}
#nav a:hover:not(.on){color:#fff}
#hide{position:fixed;right:12px;bottom:14px;z-index:50;width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(20,12,38,.82);color:#D9CFF2;
  font:700 15px 'Open Sans',sans-serif;cursor:pointer}
body.bare #nav{display:none}
@media (max-width:620px){#nav{bottom:8px}#hide{bottom:8px}}

/* ── Giao diện trong khung (.hx) ─────────────────────────────────────────── */
.hx{position:absolute;inset:0;overflow:hidden;font-family:'Open Sans',-apple-system,sans-serif;color:#2A1A55;-webkit-font-smoothing:antialiased;text-align:left;line-height:1.35}
.hx *{box-sizing:border-box}
:where(.hx) button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.hx img{display:block}
.hx .bl{font-family:'Baloo 2','Open Sans',sans-serif}
.hx svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hx svg.f{fill:currentColor;stroke:none}
.space{background:radial-gradient(900px 520px at 78% -8%,#8A4BF0 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,#5326B8 0%,transparent 60%),linear-gradient(160deg,#24104F 0%,#341479 50%,#4E1F9C 100%);color:#fff}
.space::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.6px 1.6px at 18px 24px,#fff,transparent),radial-gradient(1.2px 1.2px at 90px 70px,#fff,transparent),radial-gradient(2px 2px at 150px 140px,#E9DDFF,transparent),radial-gradient(1.3px 1.3px at 60px 160px,#fff,transparent);
  background-size:190px 190px}
.sky{background:radial-gradient(260px 90px at 18% 22%,#fff 0%,transparent 70%),radial-gradient(320px 100px at 86% 38%,#fff 0%,transparent 70%),linear-gradient(180deg,#C9B4FF 0%,#EDE2FF 42%,#FFE6F2 100%)}
.sea{background:radial-gradient(300px 90px at 15% 30%,rgba(255,255,255,.85) 0%,transparent 70%),radial-gradient(360px 110px at 80% 70%,rgba(255,255,255,.75) 0%,transparent 70%),linear-gradient(180deg,#86CCFB 0%,#AFC0FF 48%,#E8C2F0 100%)}
.adult{background:#F6F4FB;color:#241B3A}

.sbar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0;font-weight:700;font-size:15px;flex:none}
.sbar b{font-weight:700}
.sbar .bt{display:flex;gap:6px;align-items:center}
.sbar .bt i{display:block;width:24px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative}
.sbar .bt i::after{content:"";position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:2px}

.pill{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:15.5px;white-space:nowrap}
.pill.w{background:#fff;color:#3B2475;box-shadow:0 3px 0 rgba(60,30,120,.12)}
.pill .fl{color:#FF8A1F}.pill .co{color:#F5B915}
.ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#FFB36B,#FF5C8A);color:#fff;font:800 19px 'Baloo 2',sans-serif;display:flex;align-items:center;justify-content:center;flex:none;border:3px solid rgba(255,255,255,.7)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:20px;background:linear-gradient(180deg,#FFCD45,#FF9A1F);color:#4A2300!important;font:800 21px 'Baloo 2',sans-serif;box-shadow:0 6px 0 #D8720A;height:64px}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 #D8720A}
.blob{border-radius:22px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.c-bingo{background:#FFDDE6}.c-pip{background:#FFF0B3}.c-mochi{background:#FFE6EE}.c-bao{background:#E5ECF3}.c-lumi{background:#FFE1EF}.c-kiko{background:#FFE4CF}.c-draco{background:#FFDCCF}.c-bolt{background:#DCEAF6}
.lock{filter:grayscale(1);opacity:.5}
.toast{position:absolute;left:50%;bottom:110px;transform:translate(-50%,20px);background:#241B3A;color:#fff;font-weight:700;font-size:16px;padding:13px 20px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;z-index:30;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* V1 · Lớp học Pet */
.k-top{display:flex;align-items:center;gap:16px;height:88px;padding:0 44px;position:relative;z-index:2}
.logo{font:800 32px/1 'Baloo 2',sans-serif;letter-spacing:.5px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.logo small{font:700 13px 'Open Sans',sans-serif;opacity:.7;margin-left:6px;letter-spacing:0;text-shadow:none}
.knav{display:flex;gap:6px;margin-left:30px}
.knav button{display:flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:16px;font-weight:800;font-size:16.5px;color:rgba(255,255,255,.85)}
.knav button.on{background:#fff;color:#5A23A8;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.k-top .sp{flex:1}
.v1d{position:absolute;top:88px;left:44px;right:44px;bottom:24px;display:grid;grid-template-columns:610px minmax(0,1fr);gap:34px;align-items:center;z-index:1}
.plan{background:#fff;color:#2A1A55;border-radius:30px;padding:28px;box-shadow:0 10px 0 rgba(15,0,50,.28);display:flex;flex-direction:column;gap:18px}
.greet{display:flex;gap:18px;align-items:center}
.greet .blob{width:170px;height:170px;flex:none}
.greet .blob img{height:162px}
.greet h2{font:800 38px/1.1 'Baloo 2',sans-serif;margin:0 0 8px;color:#2A1A55}
.greet p{margin:0;font-size:18px;color:#5B4A86;line-height:1.45}
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:14px;border:2px solid #EEE8FA;border-radius:20px;padding:13px 16px;background:#FBF9FF}
.step.on{border-color:#8B4FE0;background:#F6F0FF}
.step .num{width:34px;height:34px;border-radius:50%;background:#EEE8FA;color:#5A23A8;font:800 17px 'Baloo 2',sans-serif;display:flex;align-items:center;justify-content:center;flex:none}
.step.on .num{background:#8B4FE0;color:#fff}
.step .ph{width:62px;height:62px;flex:none;border-radius:17px}
.step .ph img{height:58px}
.step .tx{flex:1;min-width:0}
.step .tx b{display:block;font-size:19px;font-weight:800;color:#2A1A55}
.step .tx span{font-size:15px;color:#6E6390}
.step .tx em{font-style:normal;font-weight:700;color:#C2410C;background:#FFEFD9;border-radius:6px;padding:1px 7px;font-size:13px;margin-left:4px}
.step .go{height:42px;padding:0 18px;border-radius:14px;background:linear-gradient(180deg,#FFCD45,#FF9A1F);color:#4A2300;font-weight:800;font-size:15px;box-shadow:0 4px 0 #D8720A}
.step .mn{font-size:14px;font-weight:700;color:#8A80A8}
.prog{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#6E6390;font-weight:600}
.prog .bar{flex:1;height:10px;border-radius:6px;background:#EEE8FA;overflow:hidden}
.prog .bar i{display:block;height:100%;width:8%;background:#8B4FE0;border-radius:6px}
.team h3{font:800 30px/1.1 'Baloo 2',sans-serif;margin:6px 0 4px}
.team>p{margin:0 0 16px;font-size:16.5px;color:rgba(255,255,255,.78)}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tc{background:#fff;color:#2A1A55;border-radius:24px;padding:10px 10px 14px;text-align:center;box-shadow:0 6px 0 rgba(15,0,50,.25);position:relative;transition:transform .15s}
.tc:hover{transform:translateY(-3px)}
.tc .blob{height:150px;border-radius:18px}
.tc .blob img{height:142px}
.tc b{display:block;font:800 22px/1.2 'Baloo 2',sans-serif;margin-top:8px}
.tc span{display:block;font-size:14px;color:#6E6390;font-weight:600}
.tc .lv{display:flex;align-items:center;gap:7px;margin:8px 4px 0;font-size:12.5px;font-weight:800;color:#8B4FE0}
.tc .lv i{flex:1;height:8px;border-radius:5px;background:#EEE8FA;position:relative;overflow:hidden}
.tc .lv i::after{content:"";position:absolute;inset:0;width:var(--p);background:#8B4FE0;border-radius:5px}
.tc .tag{position:absolute;top:16px;left:16px;background:#E8603C;color:#fff;font-size:12px;font-weight:800;border-radius:8px;padding:2px 8px}
.tc .lk{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:#2A1A55;color:#fff;display:flex;align-items:center;justify-content:center}
.tc .lk svg{width:16px;height:16px}
.hw{display:flex;align-items:center;gap:14px;margin-top:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:22px;padding:14px 16px}
.hw .ic{width:48px;height:48px;border-radius:15px;background:#FFCD45;color:#4A2300;display:flex;align-items:center;justify-content:center;flex:none}
.hw .tx{flex:1;min-width:0}
.hw .tx b{display:block;font-size:17.5px}
.hw .tx span{font-size:14.5px;color:rgba(255,255,255,.78)}
.hw button{height:44px;padding:0 18px;border-radius:14px;background:#fff;color:#5A23A8;font-weight:800;font-size:15px}
.side{position:absolute;top:0;right:0;bottom:0;width:430px;background:#fff;color:#2A1A55;z-index:20;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.7,.3,1);box-shadow:-20px 0 50px rgba(15,0,50,.35);padding:26px;display:flex;flex-direction:column;gap:14px}
.side.on{transform:none}
.mask{position:absolute;inset:0;background:rgba(15,0,40,.45);z-index:19;opacity:0;visibility:hidden;transition:.25s}
.mask.on{opacity:1;visibility:visible}
.side .x,.sheet .x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#F1ECFA;color:#5A23A8;display:flex;align-items:center;justify-content:center}
.side .blob{height:230px;border-radius:26px}
.side .blob img{height:220px}
.side h3,.sheet h3{font:800 30px/1.1 'Baloo 2',sans-serif;margin:4px 0 0}
.side .role,.sheet .role{font-size:15px;font-weight:700;color:#8B4FE0}
.say{background:#F6F0FF;border-radius:18px;padding:14px 16px;font-size:16.5px;line-height:1.45;color:#3B2475;position:relative}
.acts3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.acts3 button{height:86px;border-radius:18px;background:#F4F0FC;color:#4B2C93;font-weight:800;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.acts3 button.pri{background:linear-gradient(180deg,#FFCD45,#FF9A1F);color:#4A2300;box-shadow:0 5px 0 #D8720A}

/* V1 điện thoại */
.m-head{display:flex;align-items:center;gap:10px;padding:2px 16px 12px}
.m-head h2{font:800 24px/1 'Baloo 2',sans-serif;margin:0;flex:1}
.m-head .pill{height:36px;font-size:14px;padding:0 11px;gap:5px}
.m-head .pill svg{width:18px;height:18px}
.m-scroll{position:absolute;top:106px;left:0;right:0;bottom:84px;overflow-y:auto;padding:0 16px 20px;scrollbar-width:none}
.m-scroll::-webkit-scrollbar{display:none}
.mplan{background:#fff;color:#2A1A55;border-radius:26px;padding:16px;box-shadow:0 7px 0 rgba(15,0,50,.28);display:flex;flex-direction:column;gap:11px}
.mplan .greet .blob{width:88px;height:88px;border-radius:20px}
.mplan .greet .blob img{height:84px}
.mplan .greet h2{font-size:23px;margin:0 0 3px}
.mplan .greet p{font-size:15px}
.mplan .step{padding:8px 10px;gap:10px;border-radius:16px}
.mplan .step .num{width:28px;height:28px;font-size:15px}
.mplan .step .ph{width:46px;height:46px;border-radius:13px}
.mplan .step .ph img{height:42px}
.mplan .step .tx b{font-size:15.5px}
.mplan .step .tx span{font-size:13px}
.mplan .step .tx em{font-size:12px;display:inline-block;margin:2px 0 0}
.mplan .cta{height:56px;font-size:19px;border-radius:18px}
.msec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.msec h3{font:800 22px/1 'Baloo 2',sans-serif;margin:0}
.msec a{font-size:14px;font-weight:700;color:#FFD66B}
.hrow{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.hrow .tc{flex:none;width:132px;border-radius:20px}
.hrow .tc .blob{height:98px;border-radius:15px}
.hrow .tc .blob img{height:92px}
.hrow .tc b{font-size:18.5px}
.hrow .tc span{font-size:13px}
.hrow .tc .tag{top:14px;left:14px;font-size:11px}
.m-scroll .hw{margin-top:12px;padding:12px;gap:11px;border-radius:18px}
.m-scroll .hw .ic{width:42px;height:42px;border-radius:13px}
.m-scroll .hw .tx b{font-size:15.5px}
.m-scroll .hw .tx span{font-size:13px}
.m-scroll .hw button{height:38px;padding:0 13px;font-size:13.5px}
.bnav{position:absolute;left:0;right:0;bottom:0;height:84px;background:#fff;border-radius:24px 24px 0 0;display:flex;padding:8px 6px 16px;z-index:5;box-shadow:0 -6px 20px rgba(15,0,50,.18)}
.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9A90B8;font-size:12.5px;font-weight:700}
.bnav button svg{width:25px;height:25px}
.bnav button.on{color:#6A2FC0;font-weight:800}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;color:#2A1A55;border-radius:28px 28px 0 0;z-index:20;padding:22px 18px 30px;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;gap:12px}
.sheet.on{transform:none}
.sheet .hd{display:flex;gap:14px;align-items:center}
.sheet .hd .blob{width:110px;height:110px;border-radius:22px;flex:none}
.sheet .hd .blob img{height:104px}
.sheet h3{font-size:26px}
.sheet .say{font-size:15.5px}
.sheet .acts3 button{height:74px;font-size:14px}

/* V2 · Bạn đồng hành */
.stones{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 14px 5px 6px;box-shadow:0 4px 0 rgba(90,40,170,.12)}
.stones .st{width:38px;height:38px;border-radius:50%;border:3px solid #E7DFF8;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:#F6F0FF;flex:none}
.stones .st img{height:32px}
.stones .st.on{border-color:#8B4FE0;box-shadow:0 0 0 3px #E2D2FF}
.stones .st.done{border-color:#2EC27E}
.stones .ln{width:14px;height:3px;border-radius:2px;background:#E7DFF8}
.stones.sm{gap:3px;padding:4px 10px 4px 4px}
.stones.sm .st{width:34px;height:34px}
.stones.sm .st img{height:28px}
.stones.sm .ln{width:8px}
.stones.sm b{font-size:15px;margin-left:3px}
.stones b{font:800 17px 'Baloo 2',sans-serif;color:#5A23A8;margin-left:6px}
.stones small{font-size:13px;color:#7A6E9C;font-weight:700;margin-left:2px}
.ibtn{width:46px;height:46px;border-radius:50%;background:#fff;color:#5A23A8;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(90,40,170,.14);flex:none}
.bub{position:absolute;background:#fff;border-radius:26px;padding:16px 20px;color:#2A1A55;font:700 20px/1.35 'Baloo 2',sans-serif;box-shadow:0 8px 0 rgba(90,40,170,.12);z-index:3}
.bub::after{content:"";position:absolute;bottom:-14px;left:50%;margin-left:-14px;border:14px solid transparent;border-bottom:0;border-top-color:#fff}
.bub .who{display:block;font:800 13px 'Open Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8B4FE0;margin-bottom:3px}
.bub .spk{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;background:#F1ECFA;color:#6A2FC0;display:flex;align-items:center;justify-content:center}
.bub .spk svg{width:19px;height:19px}
.buddy{position:absolute;z-index:2;filter:drop-shadow(0 18px 18px rgba(90,40,170,.18));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.visit{position:absolute;z-index:4;display:flex;align-items:flex-end;gap:4px}
.visit img{animation:peek 2.8s ease-in-out infinite;transform-origin:bottom center}
@keyframes peek{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg)}}
.visit .mini{background:#fff;border-radius:16px 16px 4px 16px;padding:9px 12px;font:700 15px/1.25 'Baloo 2',sans-serif;color:#2A1A55;box-shadow:0 5px 0 rgba(90,40,170,.12);margin-bottom:80px;max-width:150px}
.chipsk{position:absolute;display:flex;gap:8px;justify-content:center;z-index:4}
.chipsk button{height:42px;padding:0 16px;border-radius:999px;background:#fff;color:#4B2C93;font-weight:800;font-size:15px;box-shadow:0 4px 0 rgba(90,40,170,.12);white-space:nowrap}
.ctrl{position:absolute;display:flex;align-items:flex-end;justify-content:center;gap:34px;z-index:4}
.ctrl .c{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:15px;color:#4B2C93}
.ctrl .c button{width:66px;height:66px;border-radius:50%;background:#fff;color:#6A2FC0;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(90,40,170,.16)}
.ctrl .c button svg{width:28px;height:28px}
.ctrl .c.mic button{width:98px;height:98px;background:linear-gradient(180deg,#FF6FA3,#F0377A);color:#fff;box-shadow:0 7px 0 #B81F5A,0 0 0 8px rgba(255,111,163,.18)}
.ctrl .c.mic button svg{width:42px;height:42px}
.ctrl .c.mic.lis button{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 7px 0 #B81F5A,0 0 0 20px rgba(255,111,163,.25)}}
.waves{display:flex;gap:4px;align-items:center;height:20px}
.waves i{width:4px;border-radius:2px;background:#F0377A;animation:wv .8s ease-in-out infinite}
.waves i:nth-child(2){animation-delay:.1s}.waves i:nth-child(3){animation-delay:.2s}.waves i:nth-child(4){animation-delay:.3s}.waves i:nth-child(5){animation-delay:.4s}
@keyframes wv{0%,100%{height:5px}50%{height:20px}}
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pick button{display:flex;flex-direction:column;align-items:center;gap:4px;font:800 15px 'Baloo 2',sans-serif;color:#2A1A55}
.pick .blob{width:100%;height:80px;border-radius:18px}
.pick .blob img{height:74px}
.pick button.on .blob{box-shadow:0 0 0 3px #8B4FE0}
.pick small{font:600 12px 'Open Sans',sans-serif;color:#7A6E9C;margin-top:-3px}
.k2top{position:absolute;top:0;left:0;right:0;height:84px;display:flex;align-items:center;gap:14px;padding:0 36px;z-index:5}
.k2top .logo{color:#6A2FC0;text-shadow:none}
.k2top .grown{height:44px;padding:0 16px;border-radius:14px;border:2px solid #D9CCF5;color:#5A23A8;font-weight:800;font-size:14.5px;background:rgba(255,255,255,.6)}
.chat{position:absolute;top:100px;right:36px;bottom:36px;width:500px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border-radius:30px;padding:22px;display:flex;flex-direction:column;gap:12px;z-index:4;box-shadow:0 10px 0 rgba(90,40,170,.1)}
.chat h3{font:800 24px/1 'Baloo 2',sans-serif;margin:0}
.tl{display:flex;flex-direction:column;gap:8px}
.tl div{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:9px 12px;font-weight:700;font-size:15.5px}
.tl div .blob{width:44px;height:44px;border-radius:12px;flex:none}
.tl div .blob img{height:40px}
.tl div span{flex:1}
.tl div small{font-size:13px;color:#8A80A8;font-weight:700}
.tl div.done{opacity:.6}
.tl div.on{box-shadow:0 0 0 2px #8B4FE0}
.msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px;border-top:2px dashed #E7DFF8;padding-top:12px}
.msg{max-width:84%;padding:11px 14px;border-radius:18px;font-size:16px;line-height:1.4;font-weight:600}
.msg.p{background:#fff;color:#2A1A55;border-bottom-left-radius:6px}
.msg.k{background:#8B4FE0;color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.msg b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8B4FE0;margin-bottom:2px}
.hold{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 14px;font-size:14.5px;color:#7A6E9C;font-weight:700}
.hold i{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#FF6FA3,#F0377A);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hold i svg{width:18px;height:18px}

/* V3 · Đảo AI Teacher */
.isl{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:2}
.isl>button{position:relative;display:block}
.isl>button img{width:100%;filter:drop-shadow(0 16px 14px rgba(40,30,110,.22));transition:transform .2s}
.isl>button:hover img{transform:translateY(-5px)}
.isl .lb{margin-top:-6px;background:#fff;border-radius:14px;padding:5px 12px;text-align:center;box-shadow:0 4px 0 rgba(40,30,110,.15);white-space:nowrap}
.isl .lb b{font:800 17px/1.1 'Baloo 2',sans-serif;color:#2A1A55}
.isl .lb span{display:block;font-size:12.5px;font-weight:700;color:#7A6E9C}
.isl .stars{display:flex;gap:2px;justify-content:center;color:#F5B915;margin-top:2px}
.isl .stars svg{width:13px;height:13px}
.isl .stars svg.o{color:#DDD6EE}
.isl .pin{position:absolute;top:-30px;left:50%;margin-left:-22px;width:44px;height:44px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:linear-gradient(135deg,#FFCD45,#FF8A1F);box-shadow:0 5px 0 #D8720A;display:flex;align-items:center;justify-content:center;z-index:3;animation:pinb 1.6s ease-in-out infinite}
.isl .pin b{transform:rotate(45deg);font:800 21px 'Baloo 2',sans-serif;color:#4A2300}
@keyframes pinb{50%{margin-top:-6px}}
.isl.today>button::before{content:"";position:absolute;left:8%;right:8%;bottom:12%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,90,.75),transparent);z-index:-1}
.isl.locked img{filter:grayscale(1) opacity(.55) drop-shadow(0 16px 14px rgba(40,30,110,.18))}
.isl .lkb{position:absolute;top:40%;left:50%;margin:-22px 0 0 -22px;width:44px;height:44px;border-radius:50%;background:#2A1A55;color:#fff;display:flex;align-items:center;justify-content:center;z-index:3}
.mapsvg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hud{position:absolute;top:0;left:0;right:0;height:88px;display:flex;align-items:center;gap:14px;padding:0 36px;z-index:6}
.hud .logo{color:#fff}
.quest{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.9);border-radius:999px;padding:7px 18px 7px 8px;box-shadow:0 4px 0 rgba(40,30,110,.14);color:#2A1A55}
.quest .qi{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#FFCD45,#FF8A1F);color:#4A2300;display:flex;align-items:center;justify-content:center}
.quest b{font:800 17px 'Baloo 2',sans-serif}
.quest .bar{width:150px;height:10px;border-radius:6px;background:#EEE8FA;overflow:hidden}
.quest .bar i{display:block;height:100%;width:6%;background:#8B4FE0}
.quest small{font-size:13.5px;font-weight:700;color:#7A6E9C}
.guide{position:absolute;display:flex;align-items:flex-end;gap:6px;z-index:5}
.guide img{height:150px}
.guide .mini{background:#fff;border-radius:20px 20px 20px 4px;padding:12px 16px;font:700 17px/1.3 'Baloo 2',sans-serif;color:#2A1A55;box-shadow:0 5px 0 rgba(40,30,110,.14);max-width:290px;margin-bottom:96px}
.icard{position:absolute;z-index:8;background:#fff;color:#2A1A55;border-radius:26px;padding:16px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 0 rgba(40,30,110,.16),0 20px 40px rgba(40,30,110,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:.22s}
.icard.on{opacity:1;transform:none;pointer-events:auto}
.icard .blob{width:110px;height:110px;flex:none;border-radius:20px}
.icard .blob img{height:104px}
.icard h4{margin:0;font:800 24px/1.1 'Baloo 2',sans-serif}
.icard p{margin:3px 0 10px;font-size:14.5px;color:#6E6390;line-height:1.4}
.icard .row{display:flex;gap:8px}
.icard .row button{height:44px;padding:0 16px;border-radius:14px;font-weight:800;font-size:15px;background:#F1ECFA;color:#5A23A8}
.icard .row button.pri{background:linear-gradient(180deg,#FFCD45,#FF9A1F);color:#4A2300;box-shadow:0 4px 0 #D8720A}
.icard .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#F1ECFA;color:#5A23A8;display:flex;align-items:center;justify-content:center}
.icard .x svg{width:16px;height:16px}
.mmap{position:absolute;top:104px;left:0;right:0;bottom:84px;overflow-y:auto;scrollbar-width:none}
.mmap::-webkit-scrollbar{display:none}
.mmap .inner{position:relative;height:1640px}
.mhud{position:absolute;top:46px;left:12px;right:12px;height:52px;display:flex;align-items:center;gap:8px;z-index:6}
.mhud .quest{flex:1;padding:5px 12px 5px 5px;gap:8px}
.mhud .quest .qi{width:32px;height:32px}
.mhud .quest b{font-size:15px}
.mhud .quest .bar{width:auto;flex:1}
.mhud .pill{height:40px;font-size:14px;padding:0 11px}

/* Người lớn: phụ huynh, giáo viên */
.ahead{height:76px;background:#fff;border-bottom:1px solid #ECE7F5;display:flex;align-items:center;gap:16px;padding:0 32px;position:relative;z-index:3}
.alogo{font:800 26px/1 'Baloo 2',sans-serif;color:#6A2FC0}
.alogo small{font:600 14px 'Open Sans',sans-serif;color:#7A6E9C;margin-left:6px}
.sw{display:flex;align-items:center;gap:9px;height:44px;border:1px solid #E3DCF1;border-radius:12px;padding:0 12px 0 6px;font-weight:700;font-size:14.5px;color:#241B3A;background:#fff}
.sw .av{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#FFB36B,#FF5C8A);color:#fff;font:800 15px 'Baloo 2',sans-serif;display:flex;align-items:center;justify-content:center}
.sw svg{width:16px;height:16px;color:#8A80A8}
.roles{display:inline-flex;background:#F1ECFA;border-radius:12px;padding:4px;gap:2px}
.roles button{height:36px;padding:0 14px;border-radius:9px;font-weight:700;font-size:14px;color:#5E5480}
.roles button.on{background:#fff;color:#5A23A8;box-shadow:0 1px 3px rgba(60,30,120,.15)}
.ahead .sp{flex:1}
.aav{width:42px;height:42px;border-radius:50%;background:#E9E2F7;color:#5A23A8;font-weight:800;display:flex;align-items:center;justify-content:center}
.amain{position:absolute;top:76px;left:0;right:0;bottom:0;padding:26px 32px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;overflow:hidden}
.acol{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:#fff;border:1px solid #ECE7F5;border-radius:20px;padding:20px 22px}
.card h4{margin:0 0 12px;font-size:17px;font-weight:800;color:#241B3A;display:flex;align-items:center;justify-content:space-between}
.card h4 a{font-size:13.5px;color:#6A2FC0;font-weight:700}
.coai{display:flex;gap:18px;border:0;background:linear-gradient(135deg,#F3ECFF,#FFF0F6);position:relative}
.coai .blob{width:96px;height:96px;flex:none;border-radius:22px}
.coai .blob img{height:90px}
.coai .eb{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8B4FE0}
.coai h3{margin:2px 0 8px;font-size:20px;font-weight:800}
.coai p{margin:0 0 14px;font-size:15.5px;line-height:1.55;color:#3D3358}
.coai p b{color:#241B3A}
.abtns{display:flex;gap:8px;flex-wrap:wrap}
.abtns button{height:42px;padding:0 16px;border-radius:12px;font-weight:700;font-size:14.5px;border:1px solid #DCD3EE;background:#fff;color:#3B2475;display:inline-flex;align-items:center;gap:7px}
.abtns button svg{width:18px;height:18px}
.abtns button.pri{background:#6A2FC0;border-color:#6A2FC0;color:#fff}
.abtns button.ok{background:#E6F7EE;border-color:#BFE8D0;color:#15803D}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:#fff;border:1px solid #ECE7F5;border-radius:16px;padding:14px 16px}
.kpi b{display:block;font-size:27px;font-weight:800;color:#241B3A;font-variant-numeric:tabular-nums}
.kpi span{font-size:13.5px;color:#7A6E9C;font-weight:600}
.kpi em{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:#15803D;margin-top:2px}
.trow{display:grid;grid-template-columns:minmax(0,1.6fr) 70px 82px minmax(0,1.2fr) minmax(0,1.3fr);gap:12px;align-items:center;padding:9px 0;border-top:1px solid #F1EDF8;font-size:14px}
.trow:first-of-type{border-top:0}
.trow .who{display:flex;align-items:center;gap:10px;min-width:0}
.trow .who .blob{width:44px;height:44px;border-radius:12px;flex:none}
.trow .who .blob img{height:40px}
.trow .who b{display:block;font-size:15px}
.trow .who span{display:block;font-size:12.5px;color:#7A6E9C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .n{font-weight:700;font-variant-numeric:tabular-nums}
.trow .mb{display:flex;align-items:center;gap:8px;font-weight:700;font-variant-numeric:tabular-nums}
.trow .mb i{flex:1;height:8px;border-radius:5px;background:#EEE8FA;position:relative;overflow:hidden}
.trow .mb i::after{content:"";position:absolute;inset:0;width:var(--p);background:#8B4FE0;border-radius:5px}
.trow .lt{color:#7A6E9C;font-size:13px}
.trow.off{opacity:.55}
.ready{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ready .blob{width:72px;height:72px;border-radius:18px;flex:none}
.ready .blob img{height:66px}
.ready b{display:block;font-size:34px;font-weight:800;line-height:1}
.ready span{font-size:13.5px;color:#7A6E9C;font-weight:600}
.sk{display:grid;grid-template-columns:130px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:14px;margin:8px 0;font-weight:600}
.sk i{height:9px;border-radius:5px;background:#EEE8FA;position:relative;overflow:hidden}
.sk i::after{content:"";position:absolute;inset:0;width:var(--p);background:#E8603C;border-radius:5px}
.sk b{text-align:right;font-variant-numeric:tabular-nums}
.set{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid #F1EDF8;font-size:14.5px;font-weight:600}
.set:first-of-type{border-top:0}
.set small{display:block;font-size:12.5px;color:#7A6E9C;font-weight:500}
.seg{display:inline-flex;background:#F1ECFA;border-radius:10px;padding:3px}
.seg button{height:30px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;color:#5E5480}
.seg button.on{background:#fff;color:#5A23A8;box-shadow:0 1px 3px rgba(60,30,120,.15)}
.tg{width:46px;height:28px;border-radius:999px;background:#D9D3E8;position:relative;transition:.2s;flex:none}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:#6A2FC0}
.tg.on::after{left:21px}
.sug{background:#fff;border:1px solid #ECE7F5;border-radius:18px;padding:14px 18px;display:flex;gap:14px;transition:.25s}
.sug .blob{width:58px;height:58px;border-radius:15px;flex:none}
.sug .blob img{height:54px}
.sug .bd{flex:1;min-width:0}
.sug b{display:block;font-size:16.5px;font-weight:800;margin-bottom:3px}
.sug p{margin:0 0 10px;font-size:14px;color:#5E5480;line-height:1.5}
.sug p em{font-style:normal;font-weight:700;color:#3B2475}
.sug .ft{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stack{display:flex;margin-right:6px}
.stack i{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;font-style:normal;font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
.stack i:first-child{margin-left:0}
.sug.done{background:#F2FBF6;border-color:#CDEBD9}
.sug.done .abtns{display:none}
.sug .okl{display:none;font-weight:700;color:#15803D;font-size:14px}
.sug.done .okl{display:block}
.hl{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 2px}
.hl h3{margin:0;font-size:21px;font-weight:800}
.hl span{font-size:13.5px;color:#7A6E9C;font-weight:600}
.trow2{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #F1EDF8}
.trow2:first-of-type{border-top:0}
.trow2 .blob{width:44px;height:44px;border-radius:12px;flex:none}
.trow2 .blob img{height:40px}
.trow2 .tx{flex:1;min-width:0}
.trow2 .tx b{display:block;font-size:15px}
.trow2 .tx span{display:block;font-size:12.5px;color:#7A6E9C}
.trow2 .ct{font-size:13px;font-weight:700;color:#3B2475;text-align:right;white-space:nowrap}
.trow2.off .blob,.trow2.off .tx{opacity:.5}
.mini3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini3 div{background:#F8F6FC;border-radius:14px;padding:12px}
.mini3 b{display:block;font-size:22px;font-weight:800}
.mini3 span{font-size:12.5px;color:#7A6E9C;font-weight:600}
/* người lớn trên điện thoại */
.am .ahead{height:auto;padding:4px 16px 12px;flex-wrap:wrap;gap:10px;border:0;background:transparent}
.am .ahead .alogo{font-size:23px;flex:1}
.am .roles{width:100%;display:flex}
.am .roles button{flex:1}
.am .sw{width:100%;height:46px}
.am .mbody{position:absolute;top:196px;left:0;right:0;bottom:84px;overflow-y:auto;padding:4px 14px 20px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.am .mbody::-webkit-scrollbar{display:none}
.am .card{padding:16px}
.am .coai{flex-direction:column;gap:10px}
.am .coai .top{display:flex;gap:12px;align-items:center}
.am .coai .blob{width:64px;height:64px;border-radius:16px}
.am .coai .blob img{height:60px}
.am .coai h3{font-size:17px;margin:0}
.am .coai p{font-size:14.5px;margin:0 0 4px}
.am .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.am .kpi{padding:12px 14px}
.am .kpi b{font-size:24px}
.am .bnav{background:#fff;box-shadow:0 -1px 0 #ECE7F5;border-radius:0}
.am .sug{padding:14px;gap:11px}
.am .sug .blob{width:48px;height:48px;border-radius:13px}
.am .sug .blob img{height:44px}
.am .sug b{font-size:15.5px}
.am .sug p{font-size:13.5px}
.am .abtns button{height:40px;padding:0 13px;font-size:14px}

/* ── 3b · Bên trong mỗi đảo (#/dao-ai-teacher/<pet>) ─────────────────────── */
.isle{background:radial-gradient(420px 120px at 18% 26%,rgba(255,255,255,.7) 0%,transparent 70%),radial-gradient(380px 120px at 84% 78%,rgba(255,255,255,.6) 0%,transparent 70%),linear-gradient(180deg,var(--t1) 0%,var(--t2) 100%)}
.isle [hidden]{display:none!important}
.ihead{position:absolute;left:0;right:0;top:0;height:88px;display:flex;align-items:center;gap:14px;padding:0 36px;z-index:6}
.iback{display:flex;align-items:center;gap:4px;height:46px;padding:0 18px 0 10px;border-radius:999px;background:#fff;color:#2A1A55;font:800 16px 'Open Sans',sans-serif;box-shadow:0 4px 0 rgba(40,30,110,.14)}
.iback svg{transform:rotate(180deg)}
.ititle b{display:block;font:800 26px/1.15 'Baloo 2','Open Sans',sans-serif;color:#2A1A55}
.ititle span{font-size:14px;font-weight:700;color:#6E6390}
.ihead .sp{flex:1}
.istage{position:absolute;left:50px;top:104px;width:660px;bottom:40px}
.iimg{position:absolute;left:30px;right:30px;bottom:30px;width:600px;filter:drop-shadow(0 22px 20px rgba(40,30,110,.22));animation:ifl 5s ease-in-out infinite}
.iimg.lockd{filter:grayscale(1) opacity(.6) drop-shadow(0 22px 20px rgba(40,30,110,.18))}
@keyframes ifl{50%{transform:translateY(-8px)}}
.ibub{position:absolute;left:40px;right:40px;top:6px;background:#fff;border-radius:22px;padding:16px 20px;font:700 19px/1.35 'Open Sans',sans-serif;color:#2A1A55;box-shadow:0 10px 24px rgba(40,30,110,.14);z-index:2}
.ibub::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
.ilist{position:absolute;right:56px;top:104px;width:640px;bottom:30px;overflow:auto;padding:4px 6px 20px}
.ilist h3{margin:4px 0 12px;font:800 20px 'Baloo 2','Open Sans',sans-serif;color:#2A1A55}
.lcard{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:14px 16px;margin:0 0 14px;box-shadow:0 6px 18px rgba(40,30,110,.1)}
.lcard .ln{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font:800 17px 'Open Sans',sans-serif}
.lcard.done .ln{background:#2FBF71}
.lcard .ln svg{width:20px;height:20px}
.lcard .le{width:58px;height:58px;flex:none;border-radius:18px;background:var(--t2);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.04)}
.lcard .lt{flex:1;min-width:0}
.lcard .lt b{display:flex;align-items:center;gap:8px;font:800 19px/1.2 'Open Sans',sans-serif;color:#2A1A55}
.lcard .lt small{display:block;font-size:13.5px;font-weight:600;color:#7A6E9C;margin-top:2px}
.lcard .lst{display:flex;gap:2px;margin-top:4px;color:#F5B915}.lcard .lst svg{width:16px;height:16px}.lcard .lst svg.o{color:#E3DDF1}
.qtag{font:800 11.5px 'Open Sans',sans-serif;color:#7A3D00;background:linear-gradient(135deg,#FFD866,#FFA53D);border-radius:999px;padding:2px 9px}
.lcard .go,.lx .go{flex:none;background:var(--ac);color:#fff;font:800 16px 'Open Sans',sans-serif;border-radius:14px;padding:11px 20px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.lcard .go:active,.lx .go:active{transform:translateY(3px);box-shadow:none}
.lx .go.sec{background:#fff;color:#2A1A55;box-shadow:0 4px 0 rgba(40,30,110,.14);border:2px solid #EEE8FA}
.lcard.locked{opacity:.65}
.lcard .lck{display:flex;align-items:center;gap:5px;font:800 13px 'Open Sans',sans-serif;color:#5C5378;background:#EFEBF7;border-radius:12px;padding:8px 12px}.lcard .lck svg{width:16px;height:16px}
.qbox{background:#fff;border-radius:22px;padding:14px 16px;box-shadow:0 6px 18px rgba(40,30,110,.1)}
.qbox>b{display:block;font:800 18px 'Open Sans',sans-serif;margin-bottom:6px}
.qrow{display:flex;align-items:center;gap:12px;width:100%;padding:8px 6px;border-radius:14px;text-align:left}
.qrow:hover{background:#F6F2FF}
.qrow .qn{width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(135deg,#FFCD45,#FF8A1F);color:#4A2300;display:flex;align-items:center;justify-content:center;font:800 15px 'Open Sans',sans-serif}
.qrow.ok .qn{background:#2FBF71;color:#fff}.qrow .qn svg{width:17px;height:17px}
.qrow img{width:44px;height:44px;object-fit:contain}
.qrow>span:nth-of-type(2){flex:1}
.qrow b{display:block;font-size:15.5px}.qrow small{font-size:12.5px;color:#7A6E9C;font-weight:600}
.isl .pin.done{background:linear-gradient(135deg,#5BE09A,#21A862);box-shadow:0 5px 0 #17824A}

/* điện thoại */
.imb .ihead{top:44px;height:62px;padding:0 12px;gap:8px}
.imb .iback{height:40px;padding:0 12px 0 6px;font-size:14px}
.imb .ititle b{font-size:18px}.imb .ititle span{display:none}
.imb .pill{height:36px;padding:0 10px;font-size:14px;gap:5px}.imb .pill svg{width:18px;height:18px}
.imb .istage{left:0;right:0;top:106px;width:auto;height:250px;bottom:auto}
.imb .iimg{width:230px;left:50%;margin-left:-115px;right:auto;bottom:0}
.imb .ibub{left:14px;right:14px;top:0;padding:10px 14px;font-size:14px;border-radius:16px}
.imb .ilist{left:12px;right:12px;top:360px;width:auto;bottom:0;padding:0 2px 90px}
.imb .lcard{padding:12px;gap:10px;border-radius:20px;margin-bottom:10px}
.imb .lcard .ln{width:30px;height:30px;font-size:15px}
.imb .lcard .le{width:46px;height:46px;font-size:26px;border-radius:14px}
.imb .lcard .lt b{font-size:16px;flex-wrap:wrap;gap:4px 6px}
.imb .lcard .lt small{font-size:12px}
.imb .lcard .go{padding:9px 14px;font-size:14.5px}

/* trình chơi bài */
.lx{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--t2),#fff 70%)}
.ltop{display:flex;align-items:center;gap:18px;height:84px;padding:0 40px;flex:none}
.lx-x{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 0 rgba(40,30,110,.14);display:flex;align-items:center;justify-content:center;color:#5C5378}
.lbar{flex:1;height:16px;border-radius:9px;background:rgba(40,30,110,.1);overflow:hidden}
.lbar i{display:block;height:100%;border-radius:9px;background:var(--ac);transition:width .35s}
.lnum{font:800 16px 'Open Sans',sans-serif;color:#5C5378}
.lbody{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr;gap:30px;padding:6px 60px 0}
.lteach{text-align:center;align-self:start}
.lteach img{width:220px;margin:0 auto;filter:drop-shadow(0 10px 14px rgba(40,30,110,.2))}
.lteach b{display:block;margin-top:6px;font:800 17px 'Open Sans',sans-serif;color:#5C5378}
.lteach img.hop{animation:lhop .6s}.lteach img.shk{animation:lshk .45s}
@keyframes lhop{35%{transform:translateY(-22px)}}
@keyframes lshk{20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.lcard2{background:#fff;border-radius:30px;padding:28px 32px;box-shadow:0 14px 40px rgba(40,30,110,.12);align-self:start;max-height:100%;overflow:auto}
.qq{display:flex;align-items:center;gap:14px;font:800 27px/1.25 'Open Sans',sans-serif;color:#2A1A55}
.spk{width:56px;height:56px;flex:none;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.spk svg{width:28px;height:28px}
.vis{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0 4px}
.vimg{height:170px;width:auto;filter:drop-shadow(0 8px 10px rgba(40,30,110,.18))}
.vbig{font-size:84px;line-height:1.1;letter-spacing:4px}
.opts{display:grid;gap:16px;margin-top:18px}
.opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.opts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{border-radius:22px;border:3px solid #EEE7FF;background:#FBF9FF;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 0 #E6DEFA;min-height:96px;transition:transform .1s}
.opt:hover{transform:translateY(-2px)}
.opt.pic{min-height:170px}
.opt img{height:116px;width:auto;object-fit:contain}
.opt .em{font-size:66px;line-height:1}
.opt .sw{width:92px;height:92px;border-radius:50%;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}
.opt .ol{font:700 16px 'Open Sans',sans-serif;color:#5C5378;visibility:hidden}
.opt.ok .ol,.opt.no .ol,.opt.show .ol{visibility:visible}
.opt .ot{font:800 19px 'Open Sans',sans-serif;color:#2A1A55}
.opt .ot.big{font-size:27px}
.opt.ok{border-color:#2FBF71;background:#EBFFF3;box-shadow:0 4px 0 #A9EBC6}
.opt.no{border-color:#FF6B6B;background:#FFF1F1;box-shadow:0 4px 0 #FFC2C2;animation:lshk .4s}
.slots{display:flex;justify-content:center;gap:10px;margin:18px 0 4px}
.slot{width:58px;height:66px;border-bottom:5px solid #DCD3F1;display:flex;align-items:flex-end;justify-content:center;font:800 40px/1 'Open Sans',sans-serif;color:var(--ac);padding-bottom:6px}
.slot.on{border-color:var(--ac)}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.tile{min-width:62px;height:62px;padding:0 16px;border-radius:16px;background:#fff;border:3px solid var(--ac);color:#2A1A55;font:800 28px 'Open Sans',sans-serif;box-shadow:0 4px 0 rgba(40,30,110,.14)}
.tile.wdt{font-size:22px}
.tile.used{opacity:.2;pointer-events:none}
.sent{min-height:70px;margin-top:18px;border:3px dashed #E2D9F5;border-radius:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px}
.sent .wd{background:var(--ac);color:#fff;border-radius:12px;padding:8px 14px;font:800 22px 'Open Sans',sans-serif}
.sent .ph{color:#A79DC4;font-weight:700}
.undo{display:block;margin:12px auto 0;font:700 14px 'Open Sans',sans-serif;color:#7A6E9C;text-decoration:underline}
.sayw{text-align:center;font:800 56px/1.1 'Open Sans',sans-serif;color:#2A1A55;margin-top:6px}
.tip{text-align:center;color:#6E6390;font-weight:600;font-size:16px;margin-top:6px}
.sbtns{display:flex;justify-content:center;gap:14px;margin-top:20px}
.sb{display:flex;align-items:center;gap:8px;height:60px;padding:0 26px;border-radius:999px;font:800 19px 'Open Sans',sans-serif}
.sb svg{width:26px;height:26px}
.sb.lis{background:#fff;border:3px solid #E6DEFA;color:#2A1A55}
.sb.mic{background:linear-gradient(135deg,#FF7AA8,#E2386E);color:#fff;box-shadow:0 4px 0 #B8235A,0 0 0 calc(var(--lv,0) * 16px) rgba(255,92,142,.25)}
.sb.mic.on{background:linear-gradient(135deg,#FF5C8E,#C41E5A)}
.heard{text-align:center;margin-top:12px;color:#6E6390;font-weight:700}
.page{text-align:center}
.page .vis{margin:0 0 10px}
.ptext{font:800 32px/1.45 'Open Sans',sans-serif;color:#2A1A55;margin:6px 0 16px}
.ptext span{cursor:pointer;border-radius:6px}.ptext span:hover{background:var(--t2)}
.page .sb{margin:0 auto}
.lfoot{flex:none;height:100px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 60px}
.lfoot .fb{flex:1;font:800 23px 'Open Sans',sans-serif}
.lfoot .fb.ok{color:#21A862}.lfoot .fb.no{color:#E8364F}
.lfoot .go{padding:15px 34px;font-size:19px}
.lend{margin:auto;text-align:center;padding:20px}
.lend img{width:200px;margin:0 auto}
.ls3{display:flex;justify-content:center;gap:8px;color:#F5B915;margin-top:6px}.ls3 svg{width:54px;height:54px}.ls3 svg.o{color:#E3DDF1}
.lend h3{margin:8px 0 4px;font:800 36px 'Baloo 2','Open Sans',sans-serif;color:#2A1A55}
.lend p{margin:0;color:#6E6390;font-weight:700;font-size:17px}
.lrw{display:flex;justify-content:center;gap:10px;margin:14px 0 18px;flex-wrap:wrap}
.lrw span{display:flex;align-items:center;gap:6px;background:#fff;border-radius:14px;padding:9px 14px;font:800 17px 'Open Sans',sans-serif;box-shadow:0 4px 0 rgba(40,30,110,.1)}
.lrw svg{width:22px;height:22px;color:#F5B915}
.lbt{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.imb .lx .ltop{margin-top:44px;height:58px;padding:0 14px;gap:12px}
.imb .lx-x{width:40px;height:40px}
.imb .lbody{display:block;padding:0 14px;overflow:auto}
.imb .lteach{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.imb .lteach img{width:64px;margin:0}
.imb .lteach b{margin:0;font-size:15px;text-align:left}
.imb .lcard2{padding:16px 14px;border-radius:24px}
.imb .qq{font-size:20px;gap:10px}
.imb .spk{width:46px;height:46px}.imb .spk svg{width:24px;height:24px}
.imb .vimg{height:110px}.imb .vbig{font-size:54px}
.imb .opts{gap:8px;margin-top:12px}
.imb .opt{padding:10px 6px;border-radius:18px;min-height:70px}
.imb .opt.pic{min-height:116px}
.imb .opt img{height:72px}.imb .opt .em{font-size:44px}.imb .opt .sw{width:62px;height:62px}
.imb .opt .ol{font-size:13px}.imb .opt .ot{font-size:15px}.imb .opt .ot.big{font-size:22px}
.imb .slot{width:42px;height:52px;font-size:30px}
.imb .tile{min-width:50px;height:52px;font-size:24px;padding:0 12px}.imb .tile.wdt{font-size:18px}
.imb .sent .wd{font-size:17px;padding:6px 10px}
.imb .sayw{font-size:40px}
.imb .sb{height:52px;padding:0 18px;font-size:16px}
.imb .ptext{font-size:22px}
.imb .lfoot{height:auto;padding:12px 14px 78px;gap:10px}
.imb .lfoot .fb{font-size:17px}
.imb .lfoot .go{padding:12px 22px;font-size:16px}
.imb .lend img{width:140px}.imb .ls3 svg{width:42px;height:42px}.imb .lend h3{font-size:28px}
/* chỉnh sau lần chụp đầu */
.ibub{top:270px}
.imb .ibub{top:0}
.lend .ls3 svg.i{width:54px;height:54px}.imb .lend .ls3 svg.i{width:42px;height:42px}
.lx .spk svg.i{width:28px;height:28px}.lx .sb svg.i{width:26px;height:26px}
.idk .ilist{top:120px}
.idk .lcard{padding:18px 20px;margin-bottom:16px}
.idk .lcard .le{width:68px;height:68px;font-size:38px;border-radius:20px}
.idk .lcard .lt b{font-size:21px}
.idk .lcard .lt small{font-size:14.5px}
.idk .lcard .lst svg.i{width:18px;height:18px}
.imb .ititle b{font-size:16px;line-height:1.15}