/* ── Overlay base — PHẢI CÓ position:fixed để không ảnh hưởng layout ── */
.overlay{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.5);
  z-index:500;
  align-items:flex-end;
  justify-content:center;
}
.overlay.show{display:flex !important;}

/* ══════════════════════════════════ TOKENS */
:root{
  --em:#10b981;--eml:#d1fae5;--emd:#059669;
  --or:#f97316;--orl:#ffedd5;
  --vi:#1E88E5;--vil:#E3F2FD;
  --bl:#3b82f6;--bll:#dbeafe;
  --ye:#f59e0b;--yel:#fef3c7;
  --ro:#f43f5e;--rol:#ffe4e6;
  --bg:#f8fafc;--tx:#1e293b;--mu:#64748b;--border:#e2e8f0;
  --sp:#10b981;--sl:#d1fae5;--sga:#059669;--sgb:#34d399;
  --r:12px;--r2:18px;--r3:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}::-webkit-scrollbar{display:none;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--tx);max-width:480px;margin:0 auto;overflow-x:hidden;min-height:100vh;}

/* ── SCREENS */
.screen{display:none;padding-bottom:90px;}
.screen.active{display:block;}
#screen-onboard,#screen-select{padding-bottom:0;}

/* ── BOTTOM NAV */
#bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:white;border-top:2px solid var(--border);display:none;z-index:100;}
.nb{flex:1;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:#94a3b8;cursor:pointer;border:none;background:none;font-family:'Nunito',sans-serif;transition:color .2s;}
.nb.on{color:var(--sp);}
.nb i{font-size:19px;transition:transform .2s;}
.nb.on i{transform:scale(1.15);}

/* ── FAB BACK */
#fab-back{position:fixed;bottom:96px;right:16px;width:46px;height:46px;border-radius:50%;background:white;border:2px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.14);display:none;align-items:center;justify-content:center;font-size:17px;color:var(--tx);cursor:pointer;z-index:99;}
#fab-back.show{display:flex;}

/* ── HEADER */
.hdr{background:white;padding:12px 16px 10px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;}
.logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--sga),var(--sgb));display:flex;align-items:center;justify-content:center;color:white;font-size:17px;font-weight:900;flex-shrink:0;}
.htitle{font-size:17px;font-weight:900;}
.hbadge-pro{font-size:9px;font-weight:900;background:linear-gradient(135deg,#f59e0b,#f97316);color:white;padding:2px 6px;border-radius:6px;letter-spacing:.5px;}
.hsub{font-size:10px;color:var(--mu);font-weight:600;}
.streak-chip{margin-left:auto;background:var(--orl);color:var(--or);padding:5px 10px;border-radius:20px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:4px;flex-shrink:0;}
.kid-sw{display:flex;align-items:center;gap:5px;cursor:pointer;background:#f1f5f9;border-radius:20px;padding:4px 9px 4px 4px;flex-shrink:0;}
.kid-sw-av{width:26px;height:26px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:14px;background:linear-gradient(135deg,#42A5F5,#1E88E5);}
.kid-sw-av img{width:100%;height:100%;object-fit:cover;}
.kid-sw-name{font-size:11px;font-weight:800;color:var(--tx);max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── ONBOARDING */
#screen-onboard{background:linear-gradient(160deg,#0D47A1 0%,#1E88E5 60%,#1565C0 100%);min-height:100vh;}
.ob-step{display:none;padding:0;color:white;min-height:100vh;flex-direction:column;}
.ob-step.active{display:flex;flex-direction:column;}
.ob-logo{font-size:48px;text-align:center;margin-bottom:16px;}
.ob-title{font-size:24px;font-weight:900;text-align:center;margin-bottom:8px;}
.ob-sub{font-size:14px;opacity:.8;font-weight:600;text-align:center;margin-bottom:28px;line-height:1.6;}
.ob-progress{display:flex;gap:6px;justify-content:center;margin-bottom:32px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s;}
.ob-dot.on{background:white;width:24px;border-radius:4px;}
.ob-card{background:rgba(255,255,255,.12);border-radius:var(--r2);padding:16px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);margin-bottom:12px;}
.ob-interest-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.ob-interest-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 12px;color:white;cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;text-align:left;transition:all .2s;display:flex;align-items:center;gap:6px;}
.ob-interest-btn .ico{font-size:16px;}
.ob-interest-btn.sel{background:rgba(255,255,255,.28);border-color:white;}
.ob-interest-btn:active{transform:scale(.97);}
.ob-q{font-size:15px;font-weight:800;margin-bottom:14px;line-height:1.5;}
.ob-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.ob-opt{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:var(--r);padding:9px 12px;color:white;cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;text-align:left;display:flex;align-items:center;gap:8px;transition:all .2s;}
.ob-opt.sel{background:rgba(255,255,255,.25);border-color:white;}
.ob-opt:active{transform:scale(.98);}
.ob-opt-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.5);flex-shrink:0;transition:all .2s;}
.ob-opt.sel .ob-opt-dot{background:white;border-color:white;}
.ob-ec-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.ob-ec-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 14px;color:white;cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;transition:all .2s;}
.ob-ec-btn.sel{background:rgba(255,255,255,.25);border-color:white;}
.ob-btn{width:100%;padding:14px;border:none;border-radius:var(--r2);font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;background:white;color:#1E88E5;transition:all .2s;}
.ob-btn:active{transform:scale(.98);}
.ob-btn:disabled{opacity:.5;cursor:not-allowed;}
.ob-sel-count{font-size:12px;opacity:.7;text-align:center;margin-bottom:12px;font-weight:700;}

/* ── SELECT KID */
#screen-select{background:linear-gradient(160deg,#1565C0 0%,#1E88E5 55%,#42A5F5 100%);min-height:100vh;}
.sel-hdr{padding:48px 24px 20px;text-align:center;color:white;}
.sel-hdr .ico{font-size:44px;margin-bottom:12px;}
.sel-hdr h1{font-size:25px;font-weight:900;margin-bottom:4px;}
.sel-hdr p{font-size:13px;opacity:.8;font-weight:600;}
.kid-cards{display:flex;flex-wrap:wrap;gap:12px;padding:0 18px 32px;justify-content:center;}
.kid-card{width:calc(50% - 6px);background:rgba(255,255,255,.14);border-radius:20px;padding:18px 12px;text-align:center;cursor:pointer;border:2px solid rgba(255,255,255,.22);transition:all .2s;position:relative;backdrop-filter:blur(8px);}
.kid-card:active{transform:scale(.96);}
.kid-card.add-card{border-style:dashed;border-color:rgba(255,255,255,.35);}
.kc-av{font-size:40px;line-height:1;margin-bottom:8px;display:block;}
.kc-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);margin:0 auto 8px;display:block;}
.kc-name{font-size:14px;font-weight:900;color:white;}
.kc-stats{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;margin-top:3px;}
.kc-del{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.8);cursor:pointer;z-index:2;}

/* ── CARDS & SECTIONS */
.card{background:white;border-radius:var(--r2);margin:0 16px 12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.card-flush{background:white;border-radius:var(--r2);margin:-14px 16px 14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.09);}
.sec-lbl{font-size:11px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:1.5px;padding:14px 16px 8px;}

/* ── SUBJECT TABS */
.stabs{display:flex;gap:10px;padding:14px 16px 0;}
.stab{flex:1;border:2.5px solid var(--border);border-radius:var(--r);padding:10px 8px;text-align:center;cursor:pointer;transition:all .2s;background:white;font-family:'Nunito',sans-serif;}
.stab .ti{font-size:20px;display:block;margin-bottom:3px;}
.stab .tn{font-size:12px;font-weight:800;color:var(--mu);}
.stab .tp{font-size:10px;font-weight:700;color:var(--mu);margin-top:2px;}
.stab.am{border-color:var(--em);background:var(--eml);}
.stab.am .tn{color:var(--emd);}
.stab.av{border-color:var(--vi);background:var(--vil);}
.stab.av .tn{color:var(--vi);}
.stab.ae{border-color:#f59e0b;background:#fef3c7;}
.stab.ae .tn{color:#d97706;}

/* ── PROGRESS BAR */
.pbw{margin:14px 16px 0;background:var(--border);border-radius:10px;height:10px;overflow:hidden;}
.pbf{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--sga),var(--sgb));transition:width .6s cubic-bezier(.4,0,.2,1);}
.plbl{margin:5px 16px 14px;font-size:12px;font-weight:700;color:var(--mu);display:flex;justify-content:space-between;}

/* ── WEEK CARDS */
.wc{background:white;border-radius:var(--r2);padding:13px 15px;margin:0 16px 10px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;border:2px solid transparent;transition:all .2s;position:relative;overflow:hidden;}
.wc:active{transform:scale(.98);}
.wc.done{border-color:var(--sl);}
.wc.done::after{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--sp);}
.wnum{width:42px;height:42px;border-radius:13px;background:#f1f5f9;color:var(--mu);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;transition:all .2s;}
.wc.done .wnum{background:var(--sp);color:white;}
.winfo{flex:1;}
.wtitle{font-size:13px;font-weight:800;color:var(--tx);line-height:1.35;}
.wpills{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
.rp{font-size:10px;font-weight:800;padding:2px 6px;border-radius:7px;background:var(--orl);color:var(--or);}
.wchk{width:26px;height:26px;border-radius:50%;background:#f1f5f9;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .2s;}
.wc.done .wchk{background:var(--sp);color:white;}

/* ── DETAIL */
#dhdr{background:linear-gradient(135deg,var(--sga),var(--sgb));padding:16px 18px 28px;color:white;position:relative;overflow:hidden;}
#dhdr::before{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.1);}
.backbtn{background:rgba(255,255,255,.2);border:none;color:white;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;margin-bottom:10px;}
#dwnum{font-size:11px;font-weight:700;opacity:.8;letter-spacing:.8px;text-transform:uppercase;}
#dtitle{font-size:18px;font-weight:900;margin-top:3px;line-height:1.35;}
.dpills{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap;}
.dpill{background:rgba(255,255,255,.22);color:white;padding:3px 9px;border-radius:9px;font-size:11px;font-weight:800;}
/* detail sections */
.ds{background:white;border-radius:20px;margin:-13px 16px 13px;padding:15px 15px 13px;box-shadow:0 4px 14px rgba(0,0,0,.09);}
.dsh{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.dsi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.dsi.y{background:var(--yel);}.dsi.b{background:var(--bll);}
.dst{font-size:13px;font-weight:800;color:var(--tx);}
.dss{font-size:11px;color:var(--mu);font-weight:600;}
.sumtxt{font-size:13px;line-height:1.75;color:#334155;font-weight:600;padding:0;margin:0;}
.sumtxt li{list-style:none;padding:3px 0;display:flex;gap:7px;}
.sumtxt li::before{content:"•";color:var(--sp);font-size:15px;line-height:1.4;flex-shrink:0;}
/* quiz grading */
.qdopen{background:#f8fafc;border-radius:13px;padding:12px 13px;margin-bottom:9px;border-left:4px solid var(--sp);transition:all .22s;}
.qdopen.ans-ok{background:var(--eml);border-left-color:var(--em);}
.qdopen.ans-no{background:#fee2e2;border-left-color:#ef4444;}
.qnum{font-size:10px;font-weight:800;color:var(--sp);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.qdopen.ans-ok .qnum{color:var(--emd);}.qdopen.ans-no .qnum{color:#dc2626;}
.qtxt{font-size:13px;font-weight:700;color:var(--tx);line-height:1.6;}
.qhint{font-size:11px;color:var(--mu);font-weight:600;margin-top:5px;font-style:italic;}
.grade-row{display:flex;gap:7px;margin-top:8px;}
.gbtn{flex:1;padding:8px 0;border-radius:10px;border:2px solid var(--border);font-size:12px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;background:white;}
.gbtn:active{transform:scale(.97);}
.gbtn.ok{background:var(--eml);border-color:var(--em);color:var(--emd);}
.gbtn.no{background:#fee2e2;border-color:#ef4444;color:#dc2626;}
.gbtn.sel-ok{background:var(--em);border-color:var(--em);color:white;}
.gbtn.sel-no{background:#ef4444;border-color:#ef4444;color:white;}
.score-summary{background:linear-gradient(135deg,var(--sga),var(--sgb));color:white;border-radius:14px;padding:15px;margin-top:11px;text-align:center;display:none;}
.sc-num{font-size:34px;font-weight:900;line-height:1;}
.sc-lbl{font-size:12px;font-weight:700;opacity:.9;margin-top:3px;}
.sc-msg{font-size:11px;opacity:.8;margin-top:4px;}
/* complete btn */
.cbtn{width:100%;padding:14px;background:linear-gradient(135deg,var(--sga),var(--sgb));color:white;border:none;border-radius:var(--r2);font-size:15px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 5px 16px rgba(16,185,129,.35);transition:all .2s;font-family:'Nunito',sans-serif;}
.cbtn:active{transform:scale(.97);}
.cbtn.done{background:linear-gradient(135deg,#64748b,#94a3b8);box-shadow:none;}

/* ── PROFILE */
.phdr{background:linear-gradient(135deg,#0D47A1,#1E88E5,#42A5F5);padding:14px 20px 30px;color:white;text-align:center;}
.pav-lg{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid rgba(255,255,255,.4);margin:0 auto 7px;overflow:hidden;}
.pav-lg img{width:100%;height:100%;object-fit:cover;}
.pname{font-size:17px;font-weight:900;}
.psub{font-size:11px;opacity:.8;font-weight:600;margin-top:2px;}
.srow{display:flex;gap:8px;margin:-18px 16px 14px;}
.sc{flex:1;background:white;border-radius:14px;padding:12px 7px;text-align:center;box-shadow:0 4px 13px rgba(0,0,0,.09);}
.sn{font-size:20px;font-weight:900;}
.sl2{font-size:9px;color:var(--mu);font-weight:700;margin-top:2px;line-height:1.3;}
.spc{background:white;border-radius:15px;margin:0 16px 11px;padding:13px 15px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.spch{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.spci{font-size:19px;}.spcn{font-size:13px;font-weight:900;color:var(--tx);}
.spcp{font-size:12px;font-weight:700;margin-left:auto;}
.spbw{background:var(--border);border-radius:7px;height:7px;overflow:hidden;}
.spbf{height:100%;border-radius:7px;transition:width .6s;}
/* weight bars */
.weight-row{display:flex;gap:6px;margin:0 16px 11px;}
.weight-bar{flex:1;border-radius:12px;padding:10px 8px;text-align:center;}
.weight-bar .wb-num{font-size:18px;font-weight:900;}
.weight-bar .wb-lbl{font-size:10px;font-weight:700;margin-top:2px;opacity:.8;}
.weight-bar .wb-sub{font-size:9px;opacity:.7;margin-top:1px;}
/* chart */
.chcard{background:white;border-radius:20px;margin:0 16px 14px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.cht{font-size:15px;font-weight:900;color:var(--tx);margin-bottom:3px;}
.chs{font-size:11px;color:var(--mu);font-weight:600;margin-bottom:12px;}
.emc{text-align:center;padding:16px;color:var(--mu);font-size:13px;font-weight:600;}
.emc i{font-size:32px;display:block;margin-bottom:8px;opacity:.35;}
.rleg{margin-top:8px;}
.rleg-item{display:none;}
.rleg-dot{width:8px;height:8px;border-radius:50%;}
/* career cards */
.tcc{background:white;border-radius:14px;margin:0 16px 10px;padding:12px 13px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid transparent;}
.tcc.r1{border-color:#fbbf24;}.tcc.r2{border-color:#94a3b8;}.tcc.r3{border-color:#d97706;}
.rb{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;}
.rb1{background:var(--yel);color:#d97706;}.rb2{background:#f1f5f9;color:#64748b;}.rb3{background:var(--yel);color:#92400e;}.rbn{background:var(--eml);color:var(--emd);}
.career-why{font-size:11px;color:var(--mu);font-weight:600;margin-top:3px;line-height:1.4;}
/* insight */
.insight-card{background:linear-gradient(135deg,#0D47A1,#1E88E5);border-radius:18px;margin:0 16px 14px;padding:18px;color:white;}
.insight-title{font-size:13px;font-weight:800;opacity:.8;margin-bottom:8px;letter-spacing:.5px;}
.insight-text{font-size:14px;font-weight:700;line-height:1.7;}

/* ── TAB: THẤU HIỂU */
.bq-card{background:white;border-radius:var(--r2);margin:0 16px 12px;padding:15px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid var(--border);}
.bq-card.ans{border-color:var(--eml);}
.bq-week{font-size:10px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.bq-q{font-size:13px;font-weight:800;color:var(--tx);line-height:1.5;margin-bottom:10px;}
.bq-btns{display:flex;gap:8px;}
.bq-btn{flex:1;padding:9px;border-radius:11px;border:2px solid var(--border);font-size:13px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;background:white;transition:all .15s;}
.bq-btn:active{transform:scale(.97);}
.bq-btn.yes{border-color:var(--em);color:var(--emd);}
.bq-btn.no-b{border-color:#94a3b8;color:#64748b;}
.bq-btn.sel-yes{background:var(--em);border-color:var(--em);color:white;}
.bq-btn.sel-no{background:#94a3b8;border-color:#94a3b8;color:white;}
.bq-prog-wrap{background:var(--border);border-radius:8px;height:6px;overflow:hidden;margin:0 16px 8px;}
.bq-prog-fill{height:100%;background:linear-gradient(90deg,var(--em),#34d399);border-radius:8px;transition:width .5s;}
.bq-prog-lbl{font-size:11px;font-weight:700;color:var(--mu);margin:0 16px 14px;display:flex;justify-content:space-between;}

/* ── MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal-box{background:white;border-radius:24px 24px 0 0;padding:22px 18px 40px;width:100%;max-width:480px;animation:slideUp .3s ease;max-height:92vh;overflow-y:auto;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-title{font-size:17px;font-weight:900;color:var(--tx);margin-bottom:4px;text-align:center;}
.modal-sub{font-size:12px;color:var(--mu);font-weight:600;text-align:center;margin-bottom:14px;}
.av-tabs{display:flex;border:2px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:13px;}
.av-tab{flex:1;padding:8px;font-size:12px;font-weight:800;text-align:center;cursor:pointer;border:none;background:white;font-family:'Nunito',sans-serif;color:var(--mu);transition:all .2s;}
.av-tab.on{background:var(--em);color:white;}
.av-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:14px;}
.av-preview{width:76px;height:76px;border-radius:50%;border:3px solid var(--em);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;background:#f1f5f9;cursor:pointer;}
.av-preview img{width:100%;height:100%;object-fit:cover;}
.av-preview-hint{font-size:10px;color:var(--mu);font-weight:700;}
.avatar-grid{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:13px;}
.av-opt{width:42px;height:42px;border-radius:11px;background:#f1f5f9;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:all .15s;}
.av-opt:active{transform:scale(.93);}
.av-opt.sel{border-color:var(--em);background:var(--eml);}
.photo-upload-area{border:2.5px dashed var(--border);border-radius:14px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:13px;}
.photo-upload-area:hover{border-color:var(--em);background:var(--eml);}
.photo-upload-area i{font-size:28px;color:var(--mu);display:block;margin-bottom:7px;}
.photo-upload-area p{font-size:12px;font-weight:700;color:var(--mu);margin:0 0 2px;}
.photo-upload-area small{font-size:10px;color:#94a3b8;}
.photo-preview-wrap{text-align:center;margin-bottom:13px;}
.photo-preview{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--em);}
.photo-change{margin-top:6px;font-size:11px;font-weight:700;color:var(--em);cursor:pointer;}
.name-input{width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:13px;font-size:15px;font-weight:700;font-family:'Nunito',sans-serif;outline:none;color:var(--tx);margin-bottom:12px;}
.name-input:focus{border-color:var(--em);}
.modal-btn{width:100%;padding:13px;background:linear-gradient(135deg,#059669,#34d399);color:white;border:none;border-radius:15px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;}

/* ── FOOTER */
.footer{background:white;border-top:2px solid var(--border);padding:20px 20px 32px;margin:10px 0 0;}
.footer-logo{font-size:13px;font-weight:900;color:var(--tx);margin-bottom:8px;}
.footer-text{font-size:11px;color:var(--mu);font-weight:600;line-height:1.7;}
.footer-copy{font-size:10px;color:#94a3b8;margin-top:10px;font-weight:700;}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.footer-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:7px;background:#f1f5f9;color:var(--mu);}

/* ── ANIMATIONS */
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes confetti{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-110px) rotate(360deg);opacity:0}}
.pop-anim{animation:pop .4s cubic-bezier(.4,0,.2,1);}
.confetti-piece{position:fixed;pointer-events:none;z-index:9999;animation:confetti .8s ease-out forwards;border-radius:2px;}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:#1e293b;color:white;padding:9px 16px;border-radius:11px;font-size:12px;font-weight:700;z-index:200;white-space:nowrap;animation:fadeUp .3s ease;pointer-events:none;max-width:300px;text-align:center;}

/* ── GOOGLE LOGIN SCREEN */
#screen-login{background:linear-gradient(160deg,#0D47A1 0%,#1E88E5 60%,#1565C0 100%);height:100vh;max-height:100vh;overflow-y:auto;display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px 24px;}
#screen-login.active{display:flex;}
.login-logo{font-size:56px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;}
.login-title{font-size:26px;font-weight:900;color:white;margin-bottom:6px;text-align:center;}
.login-sub{font-size:14px;color:rgba(255,255,255,.75);font-weight:600;text-align:center;margin-bottom:32px;line-height:1.6;}
.google-btn{background:white;border:none;border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;color:#1e293b;width:100%;max-width:320px;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:all .2s;margin-bottom:12px;}
.google-btn:active{transform:scale(.97);}
.google-ico{width:24px;height:24px;background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.login-skip{color:rgba(255,255,255,.6);font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;margin-top:8px;}
.login-input-wrap{width:100%;max-width:320px;margin-bottom:12px;}
.login-input{width:100%;padding:13px 16px;border:2px solid rgba(255,255,255,.3);border-radius:14px;font-size:14px;font-weight:700;font-family:'Nunito',sans-serif;background:rgba(255,255,255,.15);color:white;outline:none;}
.login-input::placeholder{color:rgba(255,255,255,.5);}
.login-input:focus{border-color:white;}
.login-confirm-btn{width:100%;max-width:320px;padding:14px;background:white;color:#1E88E5;border:none;border-radius:16px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;margin-bottom:8px;}
.user-chip{background:rgba(255,255,255,.15);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;color:white;font-size:13px;font-weight:700;margin-bottom:24px;border:1px solid rgba(255,255,255,.25);}
.user-chip-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#42A5F5,#1E88E5);display:flex;align-items:center;justify-content:center;font-size:14px;}

/* ── WEEK LOCK */
.wc.locked{opacity:.45;cursor:not-allowed;}
.wc.locked:active{transform:none;}
.lock-icon{font-size:18px;flex-shrink:0;color:#94a3b8;}
.wc.locked .wchk{background:#f1f5f9;}
.unlock-hint{font-size:10px;color:#94a3b8;font-weight:700;margin-top:2px;}

/* ── EC MANAGEMENT (Tab Thấu hiểu) */
.ec-section{background:white;border-radius:var(--r2);margin:0 16px 12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.ec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ec-title{font-size:14px;font-weight:900;color:var(--tx);}
.ec-add-btn{background:var(--em);color:white;border:none;border-radius:10px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;display:flex;align-items:center;gap:5px;}
.ec-chips{display:flex;flex-wrap:wrap;gap:7px;}
.ec-chip{display:flex;align-items:center;gap:5px;background:var(--eml);border-radius:20px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--emd);}
.ec-chip-del{cursor:pointer;color:var(--emd);opacity:.6;font-size:11px;}
.ec-chip-del:hover{opacity:1;}
.ec-empty{font-size:12px;color:var(--mu);font-weight:600;font-style:italic;}
/* EC Add Modal */
.ec-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;align-items:flex-end;justify-content:center;}
.ec-modal.show{display:flex;}
.ec-modal-box{background:white;border-radius:24px 24px 0 0;padding:22px 18px 40px;width:100%;max-width:480px;animation:slideUp .3s ease;}
.ec-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ec-opt{background:#f1f5f9;border:2px solid transparent;border-radius:20px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;}
.ec-opt.sel{border-color:var(--em);background:var(--eml);color:var(--emd);}
.ec-opt-custom{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:12px;font-size:14px;font-weight:700;font-family:'Nunito',sans-serif;outline:none;color:var(--tx);margin-bottom:12px;}
.ec-opt-custom:focus{border-color:var(--em);}
.ec-save-btn{width:100%;padding:13px;background:linear-gradient(135deg,#059669,#34d399);color:white;border:none;border-radius:15px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;}

/* ── BQ: only show current + next unanswered */
.bq-current-card{background:white;border-radius:20px;margin:0 16px 14px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.09);border:2px solid var(--em);}
.bq-current-label{font-size:10px;font-weight:800;color:var(--em);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.bq-week-badge{display:inline-flex;align-items:center;gap:5px;background:var(--eml);border-radius:8px;padding:3px 9px;font-size:11px;font-weight:800;color:var(--emd);margin-bottom:8px;}
.bq-question-txt{font-size:14px;font-weight:800;color:var(--tx);line-height:1.55;margin-bottom:12px;}
.bq-note-input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:12px;font-family:'Nunito',sans-serif;color:var(--mu);margin-bottom:12px;resize:none;outline:none;}
.bq-note-input:focus{border-color:var(--em);}
.bq-answer-btns{display:flex;gap:8px;}
.bq-ans-btn{flex:1;padding:10px;border-radius:12px;border:2px solid var(--border);font-size:13px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;background:white;transition:all .15s;}
.bq-ans-btn.yes{border-color:var(--em);color:var(--emd);background:var(--eml);}
.bq-ans-btn.nope{border-color:#94a3b8;color:#64748b;}
.bq-ans-btn:active{transform:scale(.97);}
.bq-done-summary{background:white;border-radius:var(--r2);margin:0 16px 12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;gap:10px;}
.bq-done-ico{font-size:22px;}
.bq-done-info{flex:1;}
.bq-done-title{font-size:13px;font-weight:800;color:var(--tx);}
.bq-done-sub{font-size:11px;color:var(--mu);font-weight:600;margin-top:2px;}
.bq-done-check{width:28px;height:28px;border-radius:50%;background:var(--em);color:white;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}

/* ── PDF BUTTON */
.pdf-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#dc2626,#ef4444);color:white;border:none;border-radius:14px;padding:12px 18px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;width:calc(100% - 32px);margin:0 16px 14px;justify-content:center;box-shadow:0 4px 14px rgba(220,38,38,.3);}
.pdf-btn:active{transform:scale(.97);}
/* PDF hidden report */
#pdf-report{display:none;position:fixed;left:-9999px;top:0;width:210mm;background:white;font-family:'Nunito',sans-serif;padding:24px;}

/* ── PARENT PROFILE PANEL */
.parent-panel{background:white;border-radius:var(--r2);margin:0 16px 12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid var(--border);}
.parent-panel-hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.parent-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border);}
.parent-av img{width:100%;height:100%;object-fit:cover;}
.parent-av-placeholder{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1E88E5,#1565C0);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.parent-name{font-size:15px;font-weight:900;color:var(--tx);}
.parent-email{font-size:11px;color:var(--mu);font-weight:600;margin-top:2px;}
.parent-actions{display:flex;gap:8px;flex-wrap:wrap;}
.parent-action-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;border:2px solid var(--border);background:white;font-family:'Nunito',sans-serif;transition:all .15s;}
.parent-action-btn:active{transform:scale(.97);}
.parent-action-btn.danger{border-color:#fecaca;color:#dc2626;background:#fff5f5;}
.parent-action-btn.sync{border-color:var(--bll);color:var(--bl);background:#f0f9ff;}
.parent-action-btn.info{border-color:var(--eml);color:var(--emd);background:#f0fdf4;}
.sync-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-left:auto;}
.sync-badge.ok{background:var(--eml);color:var(--emd);}
.sync-badge.pending{background:var(--yel);color:#92400e;}
.sync-badge.off{background:#f1f5f9;color:#64748b;}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;display:inline-block;}

/* ── LOGIN – updated styles */
.login-state-chip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:8px 16px;display:flex;align-items:center;gap:10px;margin-bottom:20px;max-width:320px;width:100%;}
.login-state-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.login-state-av img{width:100%;height:100%;object-fit:cover;}
.login-state-av-ph{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#42A5F5,#1E88E5);display:flex;align-items:center;justify-content:center;font-size:17px;}
.login-state-info{flex:1;}
.login-state-name{font-size:13px;font-weight:800;color:white;}
.login-state-email{font-size:10px;color:rgba(255,255,255,.7);font-weight:600;}


/* ── ONBOARD STICKY LAYOUT */
.ob-scroll{flex:1;overflow-y:auto;padding:20px 18px 8px;-webkit-overflow-scrolling:touch;}
.ob-footer{padding:12px 22px 24px;background:transparent;flex-shrink:0;}
.ob-title{font-size:22px;font-weight:900;text-align:center;margin-bottom:6px;}
.ob-sub{font-size:13px;opacity:.8;font-weight:600;text-align:center;margin-bottom:20px;line-height:1.6;}
.ob-progress{display:flex;gap:6px;justify-content:center;margin-bottom:20px;}
.ob-logo{font-size:40px;text-align:center;margin-bottom:12px;}
.ob-q{font-size:13px;font-weight:800;margin-bottom:10px;line-height:1.5;opacity:.95;}

/* ── ONBOARD name input */
.ob-name-input{width:100%;padding:14px 18px;border:2px solid rgba(255,255,255,.35);border-radius:16px;font-size:18px;font-weight:800;font-family:'Nunito',sans-serif;background:rgba(255,255,255,.15);color:white;outline:none;margin-bottom:18px;text-align:center;}
.ob-name-input::placeholder{color:rgba(255,255,255,.45);}
.ob-name-input:focus{border-color:white;background:rgba(255,255,255,.2);}

/* ── TUTORIAL OVERLAY */
.tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:500;display:none;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:24px;}
.tutorial-overlay.show{display:flex;}
.tutorial-box{background:white;border-radius:24px;padding:24px 22px;width:calc(100% - 32px);max-width:440px;margin-bottom:8px;animation:slideUp .35s ease;}
.tut-step{display:none;}.tut-step.active{display:block;}
.tut-icon{font-size:40px;text-align:center;margin-bottom:10px;}
.tut-title{font-size:17px;font-weight:900;color:#1e293b;margin-bottom:6px;text-align:center;}
.tut-desc{font-size:14px;color:#64748b;font-weight:600;line-height:1.65;text-align:center;}
.tut-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 16px;}
.tut-dot{width:7px;height:7px;border-radius:50%;background:#e2e8f0;transition:all .3s;}
.tut-dot.on{background:#1E88E5;width:20px;border-radius:4px;}
.tut-btn{width:100%;padding:13px;background:linear-gradient(135deg,#1E88E5,#1565C0);color:white;border:none;border-radius:14px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;}
.tut-skip{text-align:center;margin-top:10px;font-size:12px;color:#94a3b8;font-weight:700;cursor:pointer;}

/* ── SHARE MODAL */
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:none;align-items:flex-end;justify-content:center;}
.share-overlay.show{display:flex;}
.share-box{background:white;border-radius:24px 24px 0 0;padding:22px 18px 40px;width:100%;max-width:480px;animation:slideUp .3s ease;}
.share-preview{border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.15);}
.share-btns{display:flex;flex-direction:column;gap:8px;}
.share-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;border:2px solid #e2e8f0;font-size:14px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;background:white;transition:all .15s;}
.share-btn:active{transform:scale(.97);}
.share-btn.zalo{border-color:#0068ff;color:#0068ff;background:#f0f7ff;}
.share-btn.fb{border-color:#1877f2;color:#1877f2;background:#f0f5ff;}
.share-btn.copy{border-color:#10b981;color:#059669;background:#f0fdf4;}
.share-btn.dl{border-color:#f59e0b;color:#d97706;background:#fffbeb;}
#share-canvas{display:none;}

/* ═══════════════════ V6 – HAPPINESS SYSTEM ═══════════════════ */
:root{
  --heart:#f43f5e;--heartl:#ffe4e6;
  --joy:#f59e0b;--joyl:#fef3c7;
  --calm:#10b981;--calml:#d1fae5;
  --zen:#1565C0;--zenl:#E3F2FD;
}

/* FAB happiness button */
#fab-happy{
  position:fixed;bottom:100px;right:16px;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#f43f5e,#f97316);
  border:none;color:white;font-size:24px;
  box-shadow:0 6px 20px rgba(244,63,94,.45);
  cursor:pointer;z-index:98;display:none;
  align-items:center;justify-content:center;
  animation:pulse-heart 2s infinite;
}
#fab-happy.show{display:flex;}
@keyframes pulse-heart{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Heart happiness indicator */
.heart-widget{display:none;}
.heart-icon{font-size:32px;transition:all .5s;filter:drop-shadow(0 2px 4px rgba(244,63,94,.4));}
.heart-icon.dim{filter:grayscale(.7) opacity(.5);}
.heart-info{flex:1;}
.heart-title{font-size:13px;font-weight:900;color:var(--tx);}
.heart-sub{font-size:11px;color:var(--mu);font-weight:600;margin-top:2px;}
.heart-score{font-size:20px;font-weight:900;color:var(--heart);}

/* Weekly happiness progress */
.happy-progress-wrap{background:white;border-radius:16px;margin:0 16px 12px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.happy-prog-title{font-size:12px;font-weight:800;color:var(--mu);margin-bottom:10px;display:flex;justify-content:space-between;}
.happy-prog-bar{background:#f1f5f9;border-radius:10px;height:12px;overflow:hidden;margin-bottom:8px;}
.happy-prog-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#f43f5e,#f97316,#fbbf24);transition:width .6s cubic-bezier(.4,0,.2,1);}
.happy-milestones{display:flex;justify-content:space-between;}
.happy-ms{text-align:center;font-size:10px;font-weight:700;}
.happy-ms.done{color:var(--heart);}
.happy-ms.cur{color:var(--or);font-weight:900;}
.happy-ms.todo{color:#94a3b8;}

/* Happiness check-in modal */
.happy-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:none;align-items:flex-end;justify-content:center;}
.happy-modal.show{display:flex;}
.happy-modal-box{background:white;border-radius:24px 24px 0 0;padding:24px 18px 40px;width:100%;max-width:480px;animation:slideUp .3s ease;}
.happy-type-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
.happy-type-btn{border:2px solid var(--border);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;background:white;font-family:'Nunito',sans-serif;transition:all .2s;}
.happy-type-btn:active{transform:scale(.95);}
.happy-type-btn.sel{border-color:var(--heart);background:var(--heartl);}
.happy-type-ico{font-size:28px;display:block;margin-bottom:6px;}
.happy-type-lbl{font-size:11px;font-weight:800;color:var(--tx);}
.happy-type-pts{font-size:10px;color:var(--mu);font-weight:700;margin-top:2px;}
.happy-photo-area{border:2.5px dashed var(--border);border-radius:16px;padding:20px;text-align:center;cursor:pointer;margin-bottom:14px;transition:all .2s;}
.happy-photo-area:hover{border-color:var(--heart);background:var(--heartl);}
.happy-photo-preview{width:100%;max-height:200px;object-fit:cover;border-radius:12px;display:none;}
.happy-note-input{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:12px;font-size:13px;font-family:'Nunito',sans-serif;margin-bottom:12px;outline:none;resize:none;}
.happy-note-input:focus{border-color:var(--heart);}
.happy-save-btn{width:100%;padding:13px;background:linear-gradient(135deg,#f43f5e,#f97316);color:white;border:none;border-radius:16px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;}
.happy-ai-msg{background:linear-gradient(135deg,#1E88E5,#1565C0);color:white;border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:13px;font-weight:700;line-height:1.65;display:none;}
.happy-ai-msg.show{display:block;}

/* Happiness memories list */
.happy-memory-card{background:white;border-radius:16px;margin:0 16px 10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07);}
.happy-mem-img{width:100%;height:140px;object-fit:cover;}
.happy-mem-body{padding:12px 14px;}
.happy-mem-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.happy-mem-msg{font-size:12px;color:var(--tx);font-weight:700;line-height:1.55;}
.happy-mem-pts{font-size:11px;font-weight:800;color:var(--heart);margin-top:4px;}
.happy-mem-date{font-size:10px;color:var(--mu);font-weight:600;}

/* ═══════════════════ V6 – CAREER MAP ═══════════════════ */
.cmap-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:0;}
.cmap-tab{flex:1;padding:12px 8px;text-align:center;font-size:12px;font-weight:800;color:var(--mu);cursor:pointer;border:none;background:none;font-family:'Nunito',sans-serif;border-bottom:3px solid transparent;transition:all .2s;}
.cmap-tab.on{color:var(--bl);border-bottom-color:var(--bl);}
.career-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.career-row:active{background:#f8fafc;}
.career-rank{width:30px;text-align:center;font-size:13px;font-weight:900;color:var(--mu);}
.career-rank.r1{color:#f59e0b;}.career-rank.r2{color:#94a3b8;}.career-rank.r3{color:#d97706;}
.career-ico-lg{font-size:24px;flex-shrink:0;}
.career-info{flex:1;}
.career-name-lg{font-size:13px;font-weight:800;color:var(--tx);}
.career-field{font-size:11px;color:var(--mu);font-weight:600;margin-top:2px;}
.career-salary{font-size:12px;font-weight:800;color:var(--em);}
.career-match{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;}
.career-match.yes{background:var(--eml);color:var(--emd);}
.career-detail-panel{background:#f8fafc;border-left:3px solid var(--bl);padding:12px 14px;margin:0 16px;border-radius:0 0 12px 12px;display:none;font-size:12px;color:var(--tx);font-weight:600;line-height:1.65;}
.career-detail-panel.show{display:block;}

/* ═══════════════════ V6 – WEEK JUMP ═══════════════════ */
.week-jump-card{background:linear-gradient(135deg,#1E88E5,#1565C0);border-radius:16px;margin:0 16px 12px;padding:16px;color:white;}
.week-jump-title{font-size:14px;font-weight:900;margin-bottom:4px;}
.week-jump-sub{font-size:12px;opacity:.8;font-weight:600;margin-bottom:12px;}
.week-jump-info{background:rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px;font-weight:700;}
.week-jump-btn{background:white;color:#1E88E5;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;}

/* ═══════════════════ V6 – MINDFULNESS FOOTER ═══════════════════ */
.mindful-footer{background:linear-gradient(135deg,#0D47A1,#1565C0);padding:24px 20px 36px;margin-top:8px;text-align:center;color:white;}
.mindful-quote{font-size:14px;font-weight:700;opacity:.85;line-height:1.7;margin-bottom:12px;font-style:italic;}
.mindful-copy{font-size:11px;opacity:.55;font-weight:700;}

/* Screen: Happiness */
/* screen-happy merged into screen-connect */
/* Screen: Career Map */
#screen-map{padding-bottom:90px;}

/* Nav 4 items */
#bnav{display:none;}


/* Main screens: tối thiểu đủ nội dung, không ép 100vh */
#screen-home,#screen-connect,#screen-profile,#screen-map{
  min-height:calc(100vh - 60px);
}

#interest-grid-compact{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px;}

/* ═══════════════════════════════════════════════════════════════
   FIX v813 — Onboarding: nút "Tiếp tục" luôn ghim đáy màn hình
   (append override — không sửa CSS gốc theo quy tắc dự án)
   Trước đây .ob-step chỉ có min-height:100vh → nội dung dài đẩy
   footer xuống dưới màn hình, phải cuộn cả trang mới thấy nút.
   ═══════════════════════════════════════════════════════════════ */
.ob-step.active{height:100vh;height:100dvh;overflow:hidden;}
.ob-footer{background:linear-gradient(to top, rgba(13,71,161,.60) 55%, transparent);}

/* ══════════════════════════════════════════════════════
   OBS QUEST v816 — Tab Quan sát bố cục danh sách việc
   (APPEND ONLY — không sửa block cũ. Sự thật vĩnh viễn #11)
   ══════════════════════════════════════════════════════ */

/* Thẻ tiến độ gộp đầu trang */
.obs-hero{background:linear-gradient(135deg,#1E88E5,#0D47A1);border-radius:18px;padding:14px 16px;color:white}
.obs-hero-top{display:flex;align-items:center;gap:12px}
.obs-hero-ico{font-size:28px;line-height:1;flex-shrink:0}
.obs-hero-txt{flex:1;min-width:0}
.obs-hero-title{font-size:13.5px;font-weight:900;line-height:1.35}
.obs-hero-sub{font-size:11px;font-weight:700;opacity:.85;margin-top:2px}
.obs-hero-pct{font-size:16px;font-weight:900;flex-shrink:0}
.obs-hero-bar{margin-top:10px;height:6px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.obs-hero-fill{height:100%;background:#AEEA00;border-radius:6px;transition:width .6s}

/* Thẻ việc — 1 dòng: icon | nội dung | 1 nút */
.quest-row{display:flex;align-items:center;gap:10px;background:white;border:1.5px solid var(--border);border-radius:14px;padding:12px;margin-bottom:8px}
.quest-row.featured{border:2px solid #1E88E5;box-shadow:0 2px 10px rgba(30,136,229,.12)}
.quest-row.locked{opacity:.68;background:#f8fafc}
.quest-row.done-state{border:1.5px solid #AEEA00;background:#fbfff0}
.quest-ico{font-size:22px;line-height:1;flex-shrink:0;width:30px;text-align:center}
.quest-info{flex:1;min-width:0}
.quest-title{font-size:13px;font-weight:900;color:var(--tx);line-height:1.35}
.quest-sub{font-size:11px;font-weight:700;color:var(--mu);margin-top:2px}
.quest-lock{font-size:10.5px;font-weight:800;color:var(--mu);flex-shrink:0;white-space:nowrap}
.quest-btn{flex-shrink:0;background:linear-gradient(135deg,#1E88E5,#1565C0);color:white;border:none;border-radius:11px;padding:9px 16px;font-size:12.5px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;display:inline-flex;align-items:center}
.quest-btn:active{transform:scale(.96)}
.quest-btn.ghost{background:white;color:#1E88E5;border:1.5px solid #1E88E5}

/* Lịch sử thu gọn */
.bq-history-head{display:flex;align-items:center;justify-content:space-between;background:white;border:1.5px solid var(--border);border-radius:14px;padding:11px 14px;font-size:12.5px;font-weight:800;color:var(--mu);cursor:pointer;user-select:none}
.bq-history-head:active{background:#f8fafc}
#bq-history-items{margin-top:8px}

/* Chi tiết câu quan sát khi mở từ thẻ việc — nối liền với thẻ featured phía trên */
#bq-detail .bq-current-card{margin:-6px 0 12px;border-top-left-radius:0;border-top-right-radius:0;border-color:#1E88E5;box-shadow:0 2px 10px rgba(30,136,229,.12)}

/* Segmented pill tab Hạnh phúc / Quan sát (OBS QUEST v816) */
.ctab-seg{display:flex;background:#f1f5f9;border-radius:13px;padding:4px;gap:4px}
.ctab-seg-btn{flex:1;padding:9px 4px;background:transparent;border:none;border-radius:10px;font-size:12.5px;font-weight:900;color:var(--mu);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s}
.ctab-seg-btn:active{transform:scale(.97)}

/* ═══════════════════════════════════════════════════════════════
   PHƯƠNG ÁN B · DESIGN TOKENS DÙNG CHUNG (append v818, GĐ 0.5)
   Chuẩn bị cho GĐ 1–5. v818 CHƯA dùng class nào — chỉ dọn màu tím.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --kp-blue:#1E88E5; --kp-blue-mid:#1565C0; --kp-blue-deep:#0D47A1; --kp-blue-lite:#42A5F5;
  --kp-coral:#FF7043; --kp-lime:#AEEA00;
  --kp-blue-soft:#E3F2FD; --kp-blue-soft2:#E1F5FE; --kp-blue-border:#90CAF9;
  --kp-teal:#26A69A; --kp-rose:#EC407A;
  --kp-grad-hero:linear-gradient(135deg,#1E88E5,#0D47A1);
  --kp-grad-btn:linear-gradient(135deg,#1E88E5,#1565C0);
  --kp-grad-deep:linear-gradient(135deg,#0D47A1,#1565C0);
  --kp-r-hero:18px; --kp-r-card:14px; --kp-r-btn:11px;
  --kp-tap:44px; --kp-gap:8px;
  --kp-shadow:0 2px 10px rgba(30,136,229,.12);
}
/* Hero card dùng chung (tổng quát hóa .obs-hero cho mọi màn) */
.kp-hero{background:var(--kp-grad-hero);border-radius:var(--kp-r-hero);padding:14px 16px;color:#fff;margin:0 16px 12px}
.kp-hero-bar{margin-top:10px;height:6px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.kp-hero-fill{height:100%;background:var(--kp-lime);border-radius:6px;transition:width .6s}
/* Tab pill dùng chung */
.kp-pills{display:flex;gap:6px;padding:0 16px 10px}
.kp-pill{flex:1;min-height:var(--kp-tap);border:1.5px solid var(--border,#e2e8f0);background:#fff;border-radius:999px;font:800 12.5px 'Nunito',sans-serif;color:#546E7A;cursor:pointer}
.kp-pill.on{background:var(--kp-grad-btn);color:#fff;border-color:transparent}
.kp-pill:active{transform:scale(.97)}
/* CTA coral — tối đa 1 khối/màn */
.kp-cta{min-height:var(--kp-tap);background:var(--kp-coral);color:#fff;border:none;border-radius:var(--kp-r-btn);font:900 13px 'Nunito',sans-serif;padding:0 18px;cursor:pointer}
.kp-cta:active{transform:scale(.97)}


/* ═══════════════════════════════════════════════════════════════
   GĐ1 · SKIN SẠCH-GỌN (tham khảo Duolingo) — HỌC TẬP + CHI TIẾT
   append v819 — chỉ override, không sửa block cũ
   ═══════════════════════════════════════════════════════════════ */
body{background:#FAFCFF}
/* Ami chào phụ huynh */
.kp-greet{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 2px}
.kp-greet-mascot{width:44px;height:44px;border-radius:50%;background:#F1F8E9;border:2px solid #DCEDC8;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.kp-greet-bubble{background:white;border:2px solid #e2e8f0;border-radius:16px;border-top-left-radius:4px;padding:10px 14px;font-size:13.5px;font-weight:800;color:#334155;line-height:1.55}
/* Hero */
.kp-home-hero{background:white;border:2px solid #e2e8f0;border-radius:18px;margin:10px 16px 12px;padding:14px 16px 16px}
.kp-hero-row{display:flex;align-items:center;justify-content:space-between}
.kp-hero-week{font-size:17px;font-weight:900;color:#0f172a}
.kp-home-hero .pbw{height:8px;background:#eef2f7;margin:12px 0 0}
.kp-home-hero .pbf{background:var(--kp-lime)}
.kp-home-hero .kp-cta{width:100%}
/* Nút 3D */
.kp-btn3d{border:none;border-bottom:4px solid rgba(0,0,0,.25);border-radius:14px;font-size:14.5px;transition:transform .1s,border-bottom-width .1s}
.kp-btn3d:active{transform:translateY(3px);border-bottom-width:1px}
/* Pill môn học */
.kp-subj-pills{padding:2px 16px 8px}
.kp-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.25}
.kp-pill-cnt{font-size:10px;font-weight:800;opacity:.7}
/* Thẻ tuần */
.wc{box-shadow:none;border:2px solid #e2e8f0;border-radius:16px;padding:14px 15px}
.wc.done{background:#FBFDF7;border-color:#DCEDC8}
.wc.locked{background:#f8fafc}
/* Chi tiết bài */
.ds{box-shadow:none;border:2px solid #e2e8f0;border-radius:18px}
.cbtn{background:var(--kp-coral);box-shadow:none;border-bottom:4px solid #E64A19;border-radius:14px;min-height:50px;transition:transform .1s,border-bottom-width .1s}
.cbtn:active{transform:translateY(3px);border-bottom-width:1px}
.cbtn.done{border-bottom-color:transparent}


/* ═══ GĐ2 · MINIGAME: thẻ đáp án 3D + phản hồi chọn · append v820 ═══ */
.kpg-ans{min-height:64px;border-bottom-width:4px !important;transition:transform .1s,border-color .15s,background .15s;font-family:'Nunito',sans-serif;width:100%;text-align:left}
.kpg-ans:active{transform:translateY(2px);border-bottom-width:2px !important}
.kpg-ans span:first-child{font-size:38px !important}
.kpg-ans.picked{border-color:#AEEA00 !important;background:#F9FBE7 !important}
.confetti-piece{z-index:10000}


/* ═══ GĐ3 · MÀN HỒ SƠ: nhóm section + viền sạch + nút 3D · append v821 ═══ */
.sec-lbl{display:flex;align-items:center;gap:10px}
.sec-lbl::after{content:'';flex:1;height:2px;background:#eef2f7;border-radius:2px}
.chcard{box-shadow:none;border:2px solid #e2e8f0}
.parent-panel{box-shadow:none}
.pdf-btn{box-shadow:none;border-bottom:4px solid rgba(0,0,0,.22);transition:transform .1s,border-bottom-width .1s}
.pdf-btn:active{transform:translateY(3px);border-bottom-width:1px}


/* ═══ GĐ3b · NÚT GÓC HEADER HỒ SƠ · append v822 ═══ */
.phdr{position:relative}
.kp-hdr-corner{position:absolute;top:12px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);border-radius:999px;min-height:38px;padding:0 13px;font-size:12px;font-weight:800;color:white;cursor:pointer;user-select:none}
.kp-hdr-corner:active{transform:scale(.94)}
.kp-hdr-left{left:12px;font-size:16px}
.kp-hdr-right{right:12px}
.kp-chip-lbl{max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════════════════════════════════════════════════════════
   GĐ4 · MÀN HƯỚNG ĐI (screen-map) — append v824
   Chỉ override, không sửa block cũ. Không đụng engine/dữ liệu.
   ═══════════════════════════════════════════════════════════════ */

/* Tab pill của màn Hướng đi: nhãn 1 dòng, không dùng biến thể 2 dòng
   (.kp-pill mặc định đang là flex-column cho pill có số đếm) */
.cmap-pills .kp-pill{flex-direction:row;gap:4px;padding:0 6px;font-size:12px}

/* Bong bóng Ami: chừa khoảng thở trước danh sách nghề */
#riasec-match-hint{padding-bottom:12px}
#riasec-match-hint .kp-greet-bubble{flex:1}

/* Thẻ nghề: dòng danh sách → card viền sạch (bỏ bóng đổ, bỏ đường kẻ) */
#career-map-list{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
#career-map-list .career-row{
  background:#fff;
  border:2px solid #e2e8f0;
  border-bottom:2px solid #e2e8f0;   /* đè border-bottom 1px của block cũ */
  border-radius:16px;
  min-height:64px;
  padding:12px 14px;
  gap:10px;
}
#career-map-list .career-row:active{background:#F5FAFF;transform:scale(.99)}
#career-map-list .career-name-lg{font-size:14px;line-height:1.35}
#career-map-list .career-field{font-size:11.5px;margin-top:3px}
#career-map-list .career-salary{font-size:13px}
#career-map-list .career-ico-lg{font-size:26px}
#career-map-list .career-rank{width:26px;font-size:15px}

/* Badge "★ Gợi ý khám phá": xuống dòng gọn, không phá chiều cao thẻ */
#career-map-list .career-match{display:inline-block;margin-top:3px;white-space:nowrap}

/* Panel chi tiết: bám vào thẻ vừa mở, bo khớp 16px */
#career-map-list .career-detail-panel{
  margin:-2px 0 0;
  border:2px solid var(--kp-blue-border,#90CAF9);
  border-left:4px solid var(--kp-blue,#1E88E5);
  background:#F5FAFF;
  border-radius:16px;
  padding:13px 15px;
}

/* ═══════════════════════════════════════════════════════════════
   GĐ5 · ĐĂNG NHẬP + ONBOARDING + OVERLAY NÂNG CẤP — append v825
   Phương án 1: login/onboard GIỮ nền xanh đậm (cửa vào có nghi thức
   riêng), chỉ chuẩn hoá hình dạng. Overlay nâng cấp lật sang nền trắng.
   ═══════════════════════════════════════════════════════════════ */

/* ── A. MÀN ĐĂNG NHẬP ───────────────────────────────────────── */
/* Nút 3D trên nền tối: viền dưới đậm thay bóng đổ */
.google-btn{box-shadow:none;border-bottom:4px solid #B0BEC5}
.google-btn:active{transform:translateY(2px);border-bottom-width:2px}
.login-confirm-btn{border-bottom:4px solid #90CAF9;transition:transform .08s,border-bottom-width .08s}
.login-confirm-btn:active{transform:translateY(2px);border-bottom-width:2px}
/* Nút phụ: viền trắng mờ, không tranh chú ý với nút chính */
.login-confirm-btn.login-ghost{
  background:transparent;color:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.45);border-bottom-width:4px;
}
/* Bỏ gạch chân, tăng độ rõ cho lối "dùng thử" */
.login-skip{text-decoration:none;color:rgba(255,255,255,.85);border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:2px}

/* ── B. ONBOARDING ──────────────────────────────────────────── */
/* Thanh tiến trình: dùng lại .ob-progress/.ob-dot có sẵn, chỉnh cho khớp
   kích thước cũ (28x5) thay vì chấm tròn 8px */
.ob-progress{margin-bottom:16px;gap:5px}
.ob-dot{width:28px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
.ob-dot.on{width:28px;background:#fff}

/* Bong bóng Ami biến thể nền tối */
.kp-greet.kp-greet-dark{padding:0 0 18px;justify-content:center}
.kp-greet-dark .kp-greet-bubble{
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.95);text-align:left;max-width:300px;
}
.kp-greet-dark .kp-greet-bubble b{color:#fff}

/* Nút chính onboarding: 3D lún khi bấm */
.ob-btn{border-bottom:4px solid #90CAF9;transition:transform .08s,border-bottom-width .08s}
.ob-btn:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}

/* Vùng chạm to hơn + bo khớp chuẩn 16px */
.ob-opt{border-radius:16px;min-height:48px;padding:11px 14px}
.ob-interest-btn{border-radius:16px;min-height:48px;padding:10px 14px}
.ob-ec-btn{border-radius:16px;min-height:44px}

/* ── C. OVERLAY NÂNG CẤP (nền trắng, chuẩn Duolingo) ────────── */
.up-plan{border-radius:16px;padding:14px 16px;background:#fff}
/* Nút CTA chính = khối coral DUY NHẤT của overlay */
.up-cta{
  width:100%;padding:14px;background:var(--kp-coral,#FF7043);color:#fff;
  border:none;border-bottom:4px solid #E64A19;border-radius:16px;
  font-size:15px;font-weight:900;cursor:pointer;font-family:inherit;
  transition:transform .08s,border-bottom-width .08s;
}
.up-cta:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.up-cta:disabled{opacity:.6;cursor:not-allowed}
/* Nút phụ: viền, không nền */
.up-cta2{
  width:100%;padding:12px;background:transparent;color:#1E88E5;
  border:2px solid #BBDEFB;border-bottom-width:4px;border-radius:16px;
  font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;
}
.up-cta2:active{transform:translateY(2px);border-bottom-width:2px}
/* Ô kỳ hạn: JS gán màu bằng inline style nên CHỈ chỉnh hình dạng ở đây */
#up-period-month,#up-period-hk,#up-period-year{border-radius:14px;min-height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.45}

/* ═══════════ GĐ5: Tinh gọn màn Học tập (v827) ═══════════ */
/* Avatar bé ở header trái (thay logo) — đồng bộ với Hồ sơ qua updateKidUI */
.kp-hdr-av{width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,#42A5F5,#1E88E5);flex-shrink:0;cursor:pointer}
.kp-hdr-av img{width:100%;height:100%;object-fit:cover}
/* Nút đổi bé góc phải rút gọn còn chevron */
.kid-sw-slim{background:none;padding:4px 6px;margin-left:auto}
/* Lời chào Ami: thu thành 1 dòng mảnh */
.kp-greet.kp-greet-slim{padding:8px 16px 0;align-items:center}
.kp-greet-slim .kp-greet-mascot{width:auto;height:auto;background:none;border:none;font-size:16px;flex-shrink:0}
.kp-greet-slim .kp-greet-bubble{background:none;border:none;border-radius:0;padding:0;font-size:13px;font-weight:600;color:var(--mu);line-height:1.4}
/* Hero: 2 nút cùng hàng (Tiếp tục học + Vườn Nội lực) */
.kp-hero-actions{display:flex;gap:8px}
.kp-home-hero .kp-hero-actions .kp-cta{width:auto;flex:1;min-width:0}
.kp-garden-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#EAF3DE;border:1.5px solid #C0DD97;border-radius:var(--kp-r-btn);min-height:var(--kp-tap);padding:0 10px;cursor:pointer;font-family:'Nunito',sans-serif}
.kp-garden-btn:active{transform:scale(.97)}
.kp-garden-btn-ico{font-size:20px;line-height:1;flex-shrink:0}
.kp-garden-btn-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;overflow:hidden}
.kp-garden-btn-txt b{font-size:12px;font-weight:900;color:#27500A;white-space:nowrap}
.kp-garden-btn-txt em{font-size:10px;font-style:normal;font-weight:700;color:#639922;white-space:nowrap}

/* ═══════════ GĐ5: Tinh gọn tab Đồng hành (v828) ═══════════ */
/* Mốc thanh Hạnh phúc tuần dạng chấm trên đường ngang */
.happy-ms{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#e2e8f0;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 1px #e2e8f0;z-index:2}
.happy-ms.done{background:#AEEA00;box-shadow:0 0 0 1px #9ccc00}
.happy-ms.cur{background:#fff;box-shadow:0 0 0 2px #AEEA00}
.happy-ms.todo{background:#e2e8f0;box-shadow:0 0 0 1px #e2e8f0}
/* Mốc cuối = huy hiệu (không phải chấm) */
.happy-ms-reward{width:auto;height:auto;border:none;background:none!important;box-shadow:none!important;font-size:18px;left:auto;top:50%;transform:translateY(-50%);z-index:3}
.happy-ms-reward.todo,.happy-ms-reward.cur{filter:grayscale(1);opacity:.45}
.happy-ms-reward.done{filter:none;opacity:1}

/* ══════════════════════════════════════════════════════════════
   v829 · Tinh gọn tab QUAN SÁT (A2 + B1) — APPEND ONLY
   A2: giữ header nền xanh nhưng làm mỏng lại (override .obs-hero*)
   B1: nút "Trả lời" câu quan sát = nút cam DUY NHẤT của tab;
       nút redirect ("Học ngay"/"Học tiếp") để ghost, không cam.
   ══════════════════════════════════════════════════════════════ */

/* A2 — obs-hero mảnh hơn (chỉ giảm padding/kích thước, giữ nền xanh) */
.obs-hero{padding:11px 14px;border-radius:16px}
.obs-hero-ico{font-size:22px}
.obs-hero-title{font-size:13px}
.obs-hero-sub{font-size:10.5px;margin-top:1px}
.obs-hero-pct{font-size:15px}
.obs-hero-bar{margin-top:8px;height:5px}

/* B1 — nút cam chủ đạo cho câu quan sát tuần này */
.quest-btn.primary{background:#FF7043;box-shadow:0 3px 0 #e2572c}
.quest-btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #e2572c}

/* Thẻ chứa nút cam đổi accent xanh → cam cho đồng bộ (chỉ áp cho thẻ câu hỏi
   đang mở — thẻ redirect user-mới đã bỏ class .featured nên không bị ảnh hưởng) */
.quest-row.featured{border-color:#FF7043;box-shadow:0 2px 10px rgba(255,112,67,.14)}
#bq-detail .bq-current-card{border-color:#FF7043;box-shadow:0 2px 10px rgba(255,112,67,.14)}

/* ── v831 · Badge chỉnh sửa trên avatar Hồ sơ ── */
.pav-wrap .pav-lg{margin:0}
.pav-edit-badge{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:#FF7043;border:2px solid white;display:flex;align-items:center;justify-content:center;font-size:10px;pointer-events:none}

/* ── v832 · Hồ sơ P3: 2 nút Chia sẻ/PDF cùng 1 hàng + cam/ghost ── */
.pdf-btn-row{display:flex;gap:8px;margin:0 16px 14px}
.pdf-btn-row .pdf-btn{width:auto;flex:1;margin:0;padding:12px 10px}
.pdf-btn.cta{background:#FF7043}
.pdf-btn.ghost{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-bottom:1.5px solid #e2e8f0}

/* ══════════ v834 · Login tinh gọn (progressive email) ══════════ */
.login-email-link{margin-top:14px;font-size:13px;font-weight:800;color:rgba(255,255,255,.9);
  cursor:pointer;border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:2px;user-select:none}
.login-email-link:active{opacity:.7}
.login-reg-link{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.78);text-align:center;
  margin-top:2px;cursor:pointer}
.login-reg-link b{color:#fff;text-decoration:underline}

/* ═══ v839: Ami Hỏi Nhỏ — khung tròn emoji đáp án (APPEND, không sửa block cũ) ═══ */
.kpg-emoji{width:66px;height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border:2px solid #e5e9f0;border-radius:50%;line-height:1;transition:background .15s,border-color .15s}
.kpg-ans:hover .kpg-emoji{background:#E3F2FD;border-color:#90CAF9}
.kpg-ans.picked .kpg-emoji{background:#F1F8E9;border-color:#AEEA00}