*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  :root{
    --bg:#FFF6E9; --bg2:#FFEBD2; --card:#FFFFFF;
    --ink:#3A2A1C; --mut:#7A6350; --line:#F0DCC2;
    --yellow:#FFC83D; --yellow-hi:#FFD766; --yellow-pick:#FFEFC2;
    --N:#FF8A3D; --Nsoft:#FFD3B5;
    --L:#2FBFA8; --Lsoft:#BDEDE5;
    --red:#E8243F; --pink:#FF9BB3; --purple:#C98FE0; --sky:#CFEDFF;
    --shadow:0 5px 0 rgba(58,42,28,.9), 0 12px 26px rgba(58,42,28,.12);
  }
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--ink);
    font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
    display:flex;align-items:flex-start;justify-content:center;padding:14px;
    background-image:
      radial-gradient(560px 320px at 6% 0%, var(--bg2) 0%, transparent 60%),
      radial-gradient(560px 340px at 96% 100%, #FFE1EA 0%, transparent 58%);
  }
  .app{width:100%;max-width:1040px}
  .card{
    background:var(--card);border:3px solid var(--ink);border-radius:30px;padding:24px 22px;
    box-shadow:0 6px 0 rgba(58,42,28,.14), 0 16px 32px rgba(58,42,28,.10);position:relative;overflow:hidden
  }
  .card::after{content:"";position:absolute;inset:6px;border-radius:24px;border:2px dashed #FFE2B8;pointer-events:none}
  h1{font-family:"Baloo 2",cursive;font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.4px}
  h2{font-family:"Baloo 2",cursive;font-size:22px;font-weight:700}
  .sub{color:var(--mut);font-size:14px;margin-top:6px;line-height:1.6}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .grow{flex:1 1 180px}
  .hidden{display:none!important}
  .mono{font-variant-numeric:tabular-nums}
  .spacer{flex:1}

  button{
    font-family:"Baloo 2",cursive;font-size:16px;font-weight:700;
    border:3px solid var(--ink);background:#fff;color:var(--ink);
    padding:11px 20px;border-radius:999px;cursor:pointer;
    box-shadow:0 4px 0 var(--ink);transition:transform .08s, box-shadow .08s
  }
  button:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
  button.pri{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow))}
  button.mint{background:linear-gradient(180deg,#8CEADA,var(--L));color:#0c3b34}
  button.ghost{box-shadow:0 3px 0 #D9C3A6;border-color:#D9C3A6;color:var(--mut);font-size:14px;padding:9px 16px}
  button.sm{font-size:13px;padding:7px 14px;box-shadow:0 3px 0 var(--ink)}
  button:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

  .topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .topbar .mini{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
  .topbar .mini img{width:120%;height:120%;object-fit:contain}
  .navtitle{font-family:"Baloo 2",cursive;font-weight:700;font-size:16px}

  /* ===== MAP ===== */
  .hero{display:flex;gap:16px;align-items:flex-start}
  .mas-lg{flex:0 0 96px;width:96px;height:96px}
  .mas-lg img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(58,42,28,.18))}
  .bubble{
    position:relative;background:var(--Nsoft);border:3px solid var(--ink);border-radius:20px;
    padding:11px 15px;font-size:13.5px;line-height:1.55;margin-top:4px
  }
  .bubble::before{content:"";position:absolute;left:-10px;top:16px;width:15px;height:15px;background:var(--Nsoft);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}

  .changlist{display:flex;flex-direction:column;gap:16px;margin-top:18px}
  .chang{border:3px solid var(--ink);border-radius:24px;background:#fff;box-shadow:0 5px 0 rgba(58,42,28,.12);overflow:hidden}
  .chang.locked{opacity:.55}
  .chang-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
  .chang-ic{width:52px;height:52px;border-radius:16px;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
  .chang-ic img{width:100%;height:120%;object-fit:contain}
  .chang-info b{display:block;font-family:"Baloo 2",cursive;font-size:17px}
  .chang-info span{font-size:12.5px;color:var(--mut)}
  .chang-stars{font-family:"Baloo 2",cursive;font-weight:700;font-size:14px;color:var(--red);white-space:nowrap}
  .chang-body{display:flex;gap:14px;padding:4px 18px 18px;overflow-x:auto}
  .node{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
  .node .dot{width:58px;height:58px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:"Baloo 2",cursive;font-weight:800;font-size:20px;background:#fff;box-shadow:0 4px 0 rgba(58,42,28,.18);position:relative}
  .node.done .dot{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow))}
  .node.test .dot{border-color:var(--red);width:64px;height:64px}
  .node.locked .dot{background:#F2ECE1;color:#C7B9A6;box-shadow:none;border-color:#D9C3A6}
  .node .stars{font-size:11px;letter-spacing:1px;color:var(--yellow);text-shadow:0 1px 0 var(--ink)}
  .node .lb{font-size:10.5px;color:var(--mut);text-align:center;line-height:1.2}

  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;
    padding:10px 18px;border-radius:999px;font-size:13.5px;font-family:"Baloo 2",cursive;font-weight:700;
    box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

  /* ===== PROFILE ===== */
  .prof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin:16px 0}
  .pst{background:var(--bg2);border:3px solid var(--ink);border-radius:18px;padding:12px;text-align:center}
  .pst b{display:block;font-family:"Baloo 2",cursive;font-size:24px}
  .pst span{font-size:11px;color:var(--mut)}
  .panel{border:3px solid var(--ink);border-radius:20px;padding:14px 16px;margin-top:14px;background:#fff}
  .panel h3{font-family:"Baloo 2",cursive;font-size:15px;margin-bottom:8px}
  .errbar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12.5px}
  .errbar .lbl{width:92px;flex:none;color:var(--mut)}
  .errbar .track{flex:1;height:16px;background:#F2ECE1;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
  .errbar .fill{height:100%}
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .badge{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;background:#F2ECE1;overflow:hidden}
  .badge.on{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow))}
  .badge img{width:100%;height:120%;object-fit:contain}
  .nameedit{border:3px solid var(--ink);border-radius:14px;padding:8px 12px;font:15px "Be Vietnam Pro",sans-serif;background:#fff;width:200px}

  /* ===== LISTEN exercise ===== */
  .quiz-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .progress-pips{display:flex;gap:5px;flex:1}
  .progress-pips i{flex:1;height:10px;border-radius:6px;background:#F2ECE1;border:2px solid var(--ink)}
  .progress-pips i.on{background:var(--yellow)}
  .listen-card{text-align:center;padding:30px 10px}
  .sound-btn{width:96px;height:96px;border-radius:50%;background:linear-gradient(180deg,var(--yellow-hi),var(--yellow));border:4px solid var(--ink);font-size:40px;box-shadow:0 6px 0 var(--ink);cursor:pointer;margin:0 auto}
  .sound-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
  .choice-row{display:flex;gap:16px;justify-content:center;margin-top:26px}
  .choice{width:150px;padding:18px 10px;border:4px solid var(--ink);border-radius:22px;background:#fff;cursor:pointer;font-family:"Baloo 2",cursive;font-weight:800;font-size:30px;box-shadow:0 5px 0 var(--ink)}
  .choice.L{color:var(--L)} .choice.N{color:var(--N)}
  .choice:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
  .choice.correct{background:var(--Lsoft)!important}
  .choice.wrong{background:#FFD9E0!important}
  .fb{margin-top:16px;font-family:"Baloo 2",cursive;font-weight:700;font-size:16px;min-height:24px}

  /* ===== HOLD exercise (đồng hồ mũi) ===== */
  .holdwrap{text-align:center}
  .hold-letter{font-family:"Baloo 2",cursive;font-size:70px;font-weight:800;margin:6px 0}
  .meter{margin-top:10px;display:flex;align-items:center;gap:10px}
  .bar{position:relative;flex:1;height:26px;background:#fff;border:3px solid var(--ink);border-radius:999px;overflow:hidden}
  .bar i.fill{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,var(--L),var(--yellow),var(--N));transition:width .05s linear}
  .bar .zone{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.0);border:3px dashed rgba(58,42,28,.35)}
  .holdring{width:140px;height:140px;margin:14px auto;position:relative}
  .holdring svg{transform:rotate(-90deg)}
  .holdring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Baloo 2",cursive;font-size:30px;font-weight:800}

  /* ===== WORD flashcard ===== */
  .wordcard{text-align:center;padding:34px 10px}
  .wordcard .big{font-family:"Baloo 2",cursive;font-size:52px;font-weight:800}
  .wordcard .hint{color:var(--mut);font-size:14px;margin-top:6px}
  .wordcard .say{margin-top:22px;font-size:14px;color:var(--mut)}
  .mic-pulse{width:88px;height:88px;border-radius:50%;border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;margin:18px auto;font-size:34px;background:#fff}
  .mic-pulse.listening{animation:pulse 1s ease-in-out infinite;background:var(--Lsoft)}
  @keyframes pulse{50%{box-shadow:0 0 0 10px rgba(47,191,168,.18)}}

  /* ===== GAME (runner) ===== */
  .hud{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
  .pill{font-family:"Baloo 2",cursive;font-weight:700;font-size:14px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 rgba(58,42,28,.15)}
  .pill b{color:var(--red)}
  .target{font-family:"Baloo 2",cursive;font-size:28px;font-weight:800;line-height:1.05;padding:6px 18px;border-radius:18px;background:linear-gradient(180deg,var(--yellow-pick),var(--yellow-hi));border:3px solid var(--ink);box-shadow:0 4px 0 rgba(58,42,28,.18)}
  .target small{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:11.5px;font-weight:500;color:var(--mut)}
  canvas{width:100%;display:block;border-radius:22px;border:3px solid var(--ink);touch-action:none;box-shadow:0 5px 0 rgba(58,42,28,.18)}
  .tip{margin-top:10px;font-size:12.5px;color:var(--mut);line-height:1.6}
  .kbd{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 6px;font-weight:700;box-shadow:0 2px 0 var(--ink)}

  /* ===== RESULT ===== */
  .stars-big{font-size:46px;letter-spacing:6px;text-align:center;margin:4px 0 2px}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0}
  .st{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px;text-align:center;box-shadow:0 4px 0 rgba(58,42,28,.15)}
  .st b{display:block;font-family:"Baloo 2",cursive;font-size:26px}
  .st span{font-size:11px;color:var(--mut)}
  .st.a{background:var(--yellow-pick)}.st.b{background:var(--Lsoft)}.st.c{background:var(--Nsoft)}


  /* ===== TABS ===== */
  .tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .tab{font-family:"Baloo 2",cursive;font-weight:700;font-size:15px;border:3px solid var(--ink);background:#fff;border-radius:999px;padding:8px 18px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
  .tab.on{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow))}

  /* ===== GAME HOME ===== */
  .mas-bob{animation:bob 2.4s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-6px)}}
  .tipbox{display:flex;gap:12px;align-items:center;background:var(--sky);border:3px solid var(--ink);border-radius:20px;padding:10px 14px;margin-top:16px;font-size:13.5px;line-height:1.55}
  .tipbox img{width:54px;height:54px;object-fit:contain;flex:none}
  .mangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:16px}
  .man{border:3px solid var(--ink);border-radius:20px;background:#fff;padding:14px;cursor:pointer;box-shadow:0 4px 0 rgba(58,42,28,.18);position:relative;text-align:left}
  .man b{display:block;font-family:"Baloo 2",cursive;font-size:17px}
  .man span{font-size:12.5px;color:var(--mut);line-height:1.5}
  .man .best{position:absolute;right:12px;top:10px;font-family:"Baloo 2",cursive;font-weight:700;font-size:12px;color:var(--red)}
  .man.on{background:var(--yellow-pick);border-width:4px}
  .man.locked{background:#F2ECE1;border-color:#D9C3A6;box-shadow:none;cursor:not-allowed}
  .man.locked b,.man.locked span{color:#B8A891}
  .playrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
  .playrow .pri{font-size:19px;padding:13px 28px}

  /* ===== GAME RESULT ===== */
  .wtags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .wtag{font-family:"Baloo 2",cursive;font-weight:700;font-size:16px;border:3px solid var(--ink);border-radius:999px;padding:3px 14px;background:#FFE3EA}
  table.wt{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;font-size:13.5px;border:3px solid var(--ink);border-radius:16px;overflow:hidden}
  table.wt th{background:var(--bg2);font-family:"Baloo 2",cursive;text-align:left;padding:7px 10px;font-size:13px}
  table.wt td{padding:7px 10px;border-top:2px solid #F0DCC2}
  table.wt tr.miss td{background:#FFF0F3}
  .lt{display:inline-block;min-width:24px;text-align:center;font-family:"Baloo 2",cursive;font-weight:800;border-radius:8px;padding:0 6px;color:#fff}
  .lt.L{background:var(--L)} .lt.N{background:var(--N)}

  @media (prefers-reduced-motion:reduce){ .mas-bob{animation:none} .mic-pulse.listening{animation:none} }


  /* ===== BỘ TỪ CỦA TÔI ===== */
  .wedit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
  .winput{border:3px solid var(--ink);border-radius:14px;padding:9px 12px;font:15px "Be Vietnam Pro",sans-serif;background:#fff;min-width:0}
  .gatepick{display:inline-flex;border:3px solid var(--ink);border-radius:999px;overflow:hidden;flex:none}
  .gatepick button{border:0;border-radius:0;box-shadow:none;padding:7px 14px;font-size:16px;background:#fff}
  .gatepick button.on.L{background:var(--L);color:#fff}
  .gatepick button.on.N{background:var(--N);color:#fff}
  .gatepick button:active{transform:none}
  .wlist{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-height:360px;overflow:auto;padding-right:4px}
  .witem{display:flex;gap:10px;align-items:center;border:3px solid var(--ink);border-radius:16px;padding:8px 10px;background:#fff}
  .witem .w{font-family:"Baloo 2",cursive;font-weight:800;font-size:19px;min-width:110px}
  .witem .h{flex:1;font-size:13px;color:var(--mut)}
  .witem .del{border:0;box-shadow:none;background:none;font-size:18px;padding:4px 8px;color:var(--mut)}
  textarea.winput{width:100%;min-height:90px;resize:vertical}
  .wcount{font-family:"Baloo 2",cursive;font-weight:700}


  /* ===== DINO GAME (người lớn) ===== */
  .dhead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
  .dhead h1{font-size:34px}
  .modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
  .opt{border:3px solid var(--ink);border-radius:20px;padding:13px 15px;background:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(58,42,28,.15)}
  .opt b{display:block;font-family:"Baloo 2",cursive;font-size:16px}
  .opt span{font-size:12.5px;color:var(--mut);line-height:1.5}
  .opt.on{background:var(--yellow-pick);border-width:4px}
  .opt.off{opacity:.5;cursor:not-allowed}
  .howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:16px}
  .howto div{background:var(--bg2);border:3px solid var(--ink);border-radius:18px;padding:11px 13px;font-size:13px;line-height:1.5}
  .howto b{font-family:"Baloo 2",cursive;font-size:22px;color:var(--red);margin-right:6px}
  .scorebar{display:flex;gap:16px;justify-content:flex-end;align-items:center;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-weight:700;font-size:17px;color:var(--mut)}
  .scorebar .cur{color:var(--ink)}
  .lives{font-size:18px;letter-spacing:2px}
  .say-card{border:3px solid var(--ink);border-radius:22px;background:#fff;padding:14px 18px;margin:12px 0;min-height:112px;box-shadow:0 5px 0 rgba(58,42,28,.15);transition:background .2s}
  .say-card .lbl{font-size:12px;color:var(--mut);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
  .say-card .sent{font-family:"Baloo 2",cursive;font-weight:800;font-size:44px;line-height:1.25;margin-top:2px}
  .say-card .sent .k{padding:0 3px;border-radius:7px}
  .say-card .sent .k.L{color:#147a6b;background:var(--Lsoft)}
  .say-card .sent .k.N{color:#a8501a;background:var(--Nsoft)}
  .say-card .sent .k.got{outline:3px solid var(--ink)}
  .say-card .sent .k.bad{background:#FFD6DF;color:var(--red);text-decoration:underline wavy var(--red);text-underline-offset:5px}
  .say-card .heard{font-size:13.5px;color:var(--mut);margin-top:6px;min-height:20px}
  .say-card.ok{background:#E6F8F3}
  .say-card.miss{background:#FFF0F3}
  .dcanvas{width:100%;display:block;border-radius:22px;border:3px solid var(--ink);background:#FFFDF8}
  .listen-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#C9B8A6;margin-right:6px;vertical-align:middle}
  .listen-dot.on{background:var(--red);box-shadow:0 0 0 4px rgba(232,36,63,.18)}
  .reslist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .resrow{border:3px solid var(--ink);border-radius:16px;padding:9px 12px;background:#fff;font-size:14px}
  .resrow.miss{background:#FFF0F3}
  .resrow .s{font-family:"Baloo 2",cursive;font-weight:700;font-size:17px}
  .resrow .h{color:var(--mut);font-size:12.5px;margin-top:2px}
  .note{font-size:12px;color:var(--mut);line-height:1.55;margin-top:12px}

  @media(max-width:560px){ h1{font-size:24px} .mas-lg{flex-basis:70px;width:70px;height:70px} .choice{width:120px;font-size:24px} }