/* Bé học ngoại ngữ cùng Robot — giao diện cho trẻ em:
   chữ to, nút to, ít chữ, màu nền tối để hình robot phát sáng nổi bật. */
:root{
  --bg:#0b1220;
  --bg2:#111a2b;
  --card:#18243a;
  --line:#26344f;
  --txt:#eef3ff;
  --muted:#93a3c0;
  --cyan:#4fe3f0;
  --cyan-soft:#7ff0fa;
  --green:#3ddc97;
  --amber:#ffc857;
  --pink:#ff7eb6;
  --r:20px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% -10%, #14263f 0%, var(--bg) 60%);
  color:var(--txt); overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- màn hình ---------- */
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
  max-width:720px; margin:0 auto; overflow-y:auto;
  /* chừa lề an toàn cho iPhone tai thỏ */
  padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          14px calc(14px + env(safe-area-inset-left));
}
.screen.active{display:flex; animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Chuyển giữa Phiên dịch và Bé học ---------- */
.appnav{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px}
.app-tab{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 8px; border-radius:14px; border:2px solid var(--line);
  background:var(--card); color:var(--muted); text-decoration:none;
}
.app-tab span{font-size:19px; line-height:1.1}
.app-tab b{font-size:13.5px; color:var(--txt); font-weight:700}
.app-tab small{font-size:10.5px; line-height:1.3; text-align:center}
.app-tab.active{border-color:var(--cyan); background:rgba(79,227,240,.09)}
.app-tab.active b{color:var(--cyan)}
@media (max-width:380px){
  .app-tab small{display:none}
  .app-tab{flex-direction:row; gap:7px; padding:11px 8px}
}

/* ---------- trang chủ ---------- */
.home-head{text-align:center; padding:6px 0 4px}
.home-head h1{font-size:26px; margin:6px 0 4px; line-height:1.25; font-weight:800}
.home-head h1 span{color:var(--cyan)}
.home-head .sub{margin:0; color:var(--muted); font-size:13.5px}

.lang-pick{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:12px 0 14px; flex-wrap:wrap;
}
.lang-pick label{color:var(--muted); font-size:14px}
.lang-pick select{
  padding:11px 14px; border-radius:14px; border:2px solid var(--line);
  background:var(--card); color:var(--txt); font-size:16px; font-weight:600;
}

.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mode-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 12px; border-radius:var(--r); border:2px solid var(--line);
  background:var(--card); color:var(--txt); cursor:pointer; text-align:center;
  transition:transform .12s, border-color .2s;
}
.mode-card:active{transform:scale(.96)}
.mode-card:hover{border-color:var(--cyan)}
.mc-ico{font-size:34px; line-height:1}
.mode-card b{font-size:16px}
.mode-card small{font-size:11.5px; color:var(--muted); line-height:1.45}
.need-key{
  position:absolute; top:8px; right:8px; font-size:9.5px; font-style:normal;
  background:rgba(255,200,87,.15); color:var(--amber);
  border:1px solid rgba(255,200,87,.4); padding:2px 6px; border-radius:99px;
}
.mode-card.ready .need-key{background:rgba(61,220,151,.15); color:var(--green); border-color:rgba(61,220,151,.4)}

.home-foot{margin-top:auto; padding-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.ghost{
  background:transparent; border:2px solid var(--line); color:var(--muted);
  padding:11px 16px; min-height:44px; border-radius:14px; font-size:14px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.ghost.link{color:var(--muted)}

/* ---------- thanh tiêu đề ---------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.bar h2{font-size:18px; margin:0; font-weight:700}
.back{
  width:44px; height:44px; flex:none; border-radius:14px; font-size:22px;
  background:var(--card); border:2px solid var(--line); color:var(--txt); cursor:pointer;
}
.progress{color:var(--muted); font-size:14px; font-weight:700; min-width:44px; text-align:right}

/* ---------- chủ đề ---------- */
.topic-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.topic-card{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 10px;
  border-radius:var(--r); border:2px solid var(--line); background:var(--card);
  color:var(--txt); cursor:pointer;
}
.topic-card:active{transform:scale(.96)}
.topic-card .ti{font-size:36px}
.topic-card b{font-size:15px}
.topic-card small{font-size:11px; color:var(--muted)}

/* ---------- sân khấu robot ---------- */
.stage{display:flex; flex-direction:column; align-items:center; gap:6px; margin:2px 0 10px}
.robot-wrap{width:190px; max-width:52vw}
.robot-wrap.small{width:120px; margin:0 auto}
.bubble{
  background:var(--card); border:2px solid var(--line); border-radius:18px;
  padding:10px 16px; margin:0; font-size:15px; text-align:center; max-width:100%;
  min-height:22px;
}

/* ---------- thẻ từ ---------- */
.card{
  background:var(--card); border:2px solid var(--line); border-radius:var(--r);
  padding:16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.card .emoji{font-size:58px; line-height:1}
.card .word{font-size:34px; font-weight:800; color:var(--cyan); letter-spacing:.5px}
.card .mean{font-size:16px; color:var(--muted)}
.speaker{
  margin-top:8px; background:transparent; border:2px solid var(--cyan);
  color:var(--cyan); padding:8px 16px; border-radius:14px; font-size:14px; cursor:pointer;
}

/* ---------- lưới chọn tranh ---------- */
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pick-btn{
  padding:22px 10px; border-radius:var(--r); border:3px solid var(--line);
  background:var(--card); cursor:pointer; font-size:52px; line-height:1.1;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--txt);
}
.pick-btn small{font-size:13px; color:var(--muted)}
.pick-btn.right{border-color:var(--green); background:rgba(61,220,151,.12)}
.pick-btn.wrong{border-color:var(--pink); background:rgba(255,126,182,.12)}

/* ---------- chấm điểm ---------- */
.score{text-align:center; margin-top:10px}
.stars{font-size:32px; letter-spacing:4px; min-height:38px}
.stars.big{font-size:42px}
.score p{margin:4px 0 0; font-size:15px}
.score .heard{font-size:12.5px; color:var(--muted); font-style:italic}

/* ---------- điều khiển ---------- */
.controls{margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:10px}
.mic{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px; border-radius:22px; border:none; cursor:pointer;
  background:linear-gradient(135deg, #2ec5d3, #4fe3f0); color:#06202a;
  font-size:19px; font-weight:800;
}
.mic:disabled{opacity:.45}
.mic.on{background:linear-gradient(135deg, #ff7eb6, #ff9ec8); color:#3a0d22; animation:pulse 1.1s infinite}
.mic-ico{font-size:24px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.next, .primary{
  padding:16px; border-radius:20px; border:none; cursor:pointer;
  background:var(--green); color:#04231a; font-size:17px; font-weight:800;
}

/* ---------- gợi ý câu nên nói ---------- */
.hint-box{
  margin-top:10px; padding:12px 14px; border-radius:var(--r);
  border:2px dashed var(--cyan); background:rgba(79,227,240,.07);
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
}
.hint-box small{color:var(--muted); font-size:12px}
.hint-box b{font-size:21px; color:var(--cyan); line-height:1.35}
.hint-box span{font-size:13.5px; color:var(--muted)}

/* ---------- báo cáo cuối buổi ---------- */
.done-wrap{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:4px}
.done-wrap h2{font-size:26px; margin:0; color:var(--green)}
.done-wrap p{margin:0; color:var(--muted); font-size:14px}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 12px}
.stat{
  background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:12px 6px; text-align:center;
}
.stat b{display:block; font-size:24px; color:var(--cyan)}
.stat small{font-size:11px; color:var(--muted); line-height:1.3; display:block; margin-top:2px}

.bars{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.bar-row{display:flex; align-items:center; gap:9px; font-size:13px}
.bar-row .bw{flex:1; height:11px; background:var(--bg2); border-radius:99px; overflow:hidden}
.bar-row .bf{height:100%; border-radius:99px; background:var(--green)}
.bar-row .bf.mid{background:var(--amber)}
.bar-row .bf.low{background:var(--pink)}
.bar-row .bl{width:74px; color:var(--muted); flex:none}
.bar-row .bn{width:26px; text-align:right; color:var(--muted); flex:none}

.lists{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.list-box{background:var(--card); border:2px solid var(--line); border-radius:16px; padding:11px 12px}
.list-box.good{border-color:rgba(61,220,151,.45)}
.list-box.weak{border-color:rgba(255,200,87,.45)}
.list-box h4{margin:0 0 7px; font-size:12.5px; color:var(--muted); font-weight:700}
.list-box ul{margin:0; padding-left:16px}
.list-box li{font-size:14px; margin-bottom:4px; line-height:1.4}
.list-box li.empty{color:var(--muted); list-style:none; margin-left:-16px}

.ai-note{
  background:var(--card); border:2px solid var(--cyan); border-radius:16px;
  padding:13px 14px; margin-bottom:12px; font-size:14px; line-height:1.6;
}
.ai-note h4{margin:12px 0 5px; font-size:12.5px; color:var(--cyan); text-transform:uppercase; letter-spacing:.04em}
.ai-note h4:first-child{margin-top:0}
.ai-note ul{margin:0; padding-left:18px}
.ai-note li{margin-bottom:3px}
.ai-note .khen{font-size:15.5px; color:var(--green); font-weight:600}
.ai-note .parent{border-top:1px dashed var(--line); margin-top:11px; padding-top:9px; color:var(--muted); font-size:13.5px}

.done-actions{display:flex; flex-direction:column; gap:9px; margin-top:auto; padding-top:6px}
.done-actions button{width:100%}
.mode-card.wide{grid-column:1 / -1}

/* ---------- THANH MENU HỌC ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  background:rgba(17,26,43,.96); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter:blur(8px);
}
.tab{
  background:transparent; border:none; cursor:pointer; color:var(--muted);
  font-size:10.5px; font-weight:600; padding:5px 2px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.15;
}
.tab span{font-size:20px; line-height:1}
.tab.active{color:var(--cyan); background:rgba(79,227,240,.1)}
.tab:active{transform:scale(.94)}
/* chừa chỗ cho thanh menu, tránh nút bị che */
.screen{padding-bottom:76px}

/* ---------- TẬP VIẾT ---------- */
/* Màn tập viết dài hơn các màn khác — thu gọn robot và thẻ từ để bé
   không phải cuộn mới thấy nút kiểm tra. */
.screen.compact .robot-wrap{width:112px}
/* Trên điện thoại, màn viết cần chỗ hơn cần robot — giấu robot, giữ lại lời nhắc */
@media (max-height:820px){
  .screen.compact .robot-wrap{display:none}
}
.screen.compact .stage{gap:3px; margin-bottom:6px}
.screen.compact .bubble{padding:7px 12px; font-size:13.5px}
.screen.compact .card{padding:9px; gap:1px}
.screen.compact .card .emoji{font-size:36px}
.screen.compact .card .word{font-size:24px}
.screen.compact .card .mean{font-size:14px}
.screen.compact .card .speaker{margin-top:5px; padding:6px 13px; font-size:13px}

.write{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.write-tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wt{
  padding:11px; border-radius:14px; border:2px solid var(--line);
  background:var(--card); color:var(--muted); font-size:14px; font-weight:700; cursor:pointer;
}
.wt.active{border-color:var(--cyan); color:var(--cyan); background:rgba(79,227,240,.09)}

.pad-wrap{position:relative; border-radius:var(--r); overflow:hidden; border:2px solid var(--line); background:#f7f9ff}
.pad-wrap::after{                       /* dòng kẻ giữa như vở tập viết */
  content:''; position:absolute; left:6%; right:6%; top:50%; height:0;
  border-top:2px dashed #c3ccdf; pointer-events:none;
}
#pad{display:block; width:100%; height:auto; touch-action:none; cursor:crosshair}
.pad-guide{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:64px; font-weight:800; color:rgba(20,40,80,.14); pointer-events:none;
  letter-spacing:2px; text-align:center; padding:0 10px;
}
.pad-guide.on{display:flex}
.pad-tools{display:flex; gap:8px}
.ghost.sm{flex:1; padding:9px 6px; font-size:12.5px; border-radius:12px}

#wType input{
  width:100%; padding:16px; border-radius:16px; border:2px solid var(--line);
  background:var(--card); color:var(--txt); font-size:26px; font-weight:700;
  text-align:center; letter-spacing:1px;
}
#wType input:focus{outline:none; border-color:var(--cyan)}
.type-hint{margin-top:8px; text-align:center; font-size:22px; letter-spacing:7px; color:var(--muted); min-height:26px; font-weight:700}

.check{
  padding:16px; border-radius:20px; border:none; cursor:pointer;
  background:var(--cyan); color:#06202a; font-size:17px; font-weight:800;
}
.check:disabled{opacity:.5}

/* ---------- ROBOT (SVG) ---------- */
.robot{width:100%; height:auto; overflow:visible; animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.r-glow{filter:drop-shadow(0 0 10px rgba(79,227,240,.75))}

/* mắt: mặc định cười (cung), khi "chú ý" thì mở tròn */
.eye-open{opacity:0}
.robot.attentive .eye-open{opacity:1}
.robot.attentive .eye-smile{opacity:0}

/* chớp mắt */
.robot.attentive .eyes{animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

/* miệng khi nói */
.robot.talking .mouth{animation:talk .28s ease-in-out infinite alternate}
@keyframes talk{from{transform:scaleY(.6)}to{transform:scaleY(1.5)}}

/* đèn ngực */
.chest{animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.85}50%{opacity:1}}
.robot.listening .chest{animation:beat .7s ease-in-out infinite}
.robot.listening .ear{fill:var(--pink)}

/* ăn mừng */
.robot.happy{animation:hop .5s ease 3}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-16px) rotate(-5deg)}60%{transform:translateY(-6px) rotate(5deg)}}
.robot.happy .arm-l{transform-origin:78px 128px; animation:wave .4s ease 4 alternate}
@keyframes wave{from{transform:rotate(0)}to{transform:rotate(-22deg)}}

@media (max-width:400px){
  .home-head h1{font-size:22px}
  .card .word{font-size:28px}
  .pick-btn{font-size:44px}
}

/* Màn thấp: gom trang chủ lại cho bé đỡ phải cuộn tìm chế độ */
@media (max-height:680px){
  .home-head{padding:0}
  .home-head .robot-wrap{width:58px}
  .home-head h1{font-size:17px; line-height:1.15; margin:2px 0 0}
  .home-head h1 br{display:none}            /* gom tiêu đề về một dòng */
  .home-head .sub{display:none}
  .appnav{margin-bottom:4px}
  .app-tab{padding:8px}
  .home-foot{padding-top:8px}
  .lang-pick{margin:6px 0 8px}
  .mode-grid{gap:8px}
  .mode-card{padding:12px 10px}
  .mc-ico{font-size:26px}
  .mode-card b{font-size:14px}
  .mode-card small{display:none}
  .mode-card.wide small{display:block; font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .robot,.robot *{animation:none !important}
}

/* Thuoc tinh hidden phai thang moi class co display — neu khong, cac khoi
   duoc lenh an van hien ra va chiem cho (loi da gap voi luoi chon tranh,
   khung goi y, nut micro, nut on tu kho). */
[hidden]{display:none !important}