/* WISDOM App v2 — design system theo sách in (Q3 đã duyệt) */
:root{
  --navy:#1d2b3a; --paper:#fcfdfb; --gold:#f0c945; --gold-deep:#c99b1f; --coral:#ff5a3a;
  --slate:#4a5566; --line:#e4e2dc; --ink:#1a1a1a; --wash:#f5f4ef;
  --w:#e8871e; --i:#2f7fc1; --s:#3a9463; --d:#c0504d; --o:#8064a2; --m:#c9a227;
  --w-t:#fdf3e6; --i-t:#eaf2f9; --s-t:#eaf5ee; --d-t:#f9ecec; --o-t:#f2eef6; --m-t:#faf5e2;
  --r-gen:#3a9463; --r-tut:#2f7fc1; --r-spa:#c0504d;
  --nav-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:15.5px;}
button{font:inherit;cursor:pointer;border:none;background:none;}
a{color:inherit;}

/* boot */
#boot{position:fixed;inset:0;background:var(--navy);z-index:99;display:flex;align-items:center;justify-content:center;transition:opacity .35s;}
#boot.gone{opacity:0;pointer-events:none;}
.bootlogo{color:var(--gold);font-weight:900;letter-spacing:.3em;font-size:22px;text-align:center;}
.boottag{color:#c9d2dc;font-size:13px;text-align:center;margin-top:6px;}

/* layout */
.page{max-width:680px;margin:0 auto;padding:16px 18px calc(var(--nav-h) + 28px);}
@media(min-width:900px){
  .page{max-width:860px;padding-top:76px;}
}
.fade{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* top bar (mobile: per-screen) */
.tb{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.tb .lg{font-weight:900;letter-spacing:.1em;font-size:15px;color:var(--navy);}
.tb .bk{font-weight:800;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:4px;}
.tb .rr{font-size:12px;color:var(--slate);}

/* bottom nav mobile / top nav desktop (Q1 đã duyệt) */
.nav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);background:#fff;border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom);}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:var(--slate);font-weight:600;}
.nav button.on{color:var(--navy);font-weight:800;}
.nav .ico{width:22px;height:22px;border-radius:7px;background:#e9e7e1;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav button.on .ico{background:var(--gold);}
.nav .mid .ico{width:44px;height:44px;border-radius:50%;background:var(--gold);margin-top:-22px;box-shadow:0 3px 10px rgba(29,43,58,.25);font-size:17px;}
@media(min-width:900px){
  .nav{top:0;bottom:auto;height:56px;border-top:none;border-bottom:1px solid var(--line);justify-content:center;gap:6px;padding:0 14px;}
  .nav button{flex:0 0 auto;flex-direction:row;gap:7px;padding:0 16px;font-size:13.5px;}
  .nav .mid .ico{width:26px;height:26px;margin-top:0;border-radius:8px;box-shadow:none;}
  .nav .brand{display:flex!important;align-items:center;font-weight:900;letter-spacing:.12em;color:var(--navy);margin-right:auto;font-size:15px;}
}
.nav .brand{display:none;}

/* atoms */
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);font-weight:800;}
h1.big{font-size:27px;line-height:1.2;margin:4px 0 6px;color:var(--navy);}
h2.h{font-size:19px;margin:22px 0 8px;color:var(--navy);}
h3.h{font-size:15.5px;margin:14px 0 6px;}
.sub{color:var(--slate);font-size:13.5px;}
.tiny{color:var(--slate);font-size:12.5px;}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0;}
.btn{display:block;width:100%;text-align:center;border-radius:13px;padding:13px;font-weight:800;font-size:15px;margin:10px 0;}
.btn.gold{background:var(--gold);color:var(--navy);}
.btn.navy{background:var(--navy);color:#fff;}
.btn.ghost{background:#fff;border:1.6px solid var(--navy);color:var(--navy);}
.btn.sm{display:inline-block;width:auto;padding:7px 14px;font-size:13px;margin:4px 6px 4px 0;border-radius:10px;}
.chip{display:inline-block;border-radius:99px;padding:3px 12px;font-size:12px;font-weight:800;color:#fff;}
.rolechip{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:2px 9px;font-size:11px;font-weight:800;color:#fff;vertical-align:1px;}
.stars{color:var(--gold-deep);letter-spacing:1.5px;font-size:13px;}
.qm{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#e9e7e1;color:var(--slate);font-size:11px;font-weight:800;align-items:center;justify-content:center;vertical-align:2px;margin-left:3px;}
hr.div{border:none;border-top:1px solid var(--line);margin:18px 0;}
.notice{background:var(--navy);color:#fff;border-radius:12px;padding:11px 14px;font-size:13px;margin:10px 0;}
.notice b{color:var(--gold);}

/* filter chips */
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.fchip{border:1.4px solid var(--line);border-radius:99px;padding:5px 13px;font-size:12.5px;background:#fff;font-weight:700;color:var(--slate);}
.fchip.on{background:var(--navy);color:#fff;border-color:var(--navy);}

/* progress + likert */
.prog{height:6px;background:#ecebe5;border-radius:3px;margin:10px 0;overflow:hidden;}
.prog i{display:block;height:6px;border-radius:3px;transition:width .3s;}
.qcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:12px 0;font-size:16.5px;font-weight:700;line-height:1.5;min-height:96px;}
.lik{display:block;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;margin:7px 0;font-size:14.5px;background:#fff;font-weight:600;color:var(--ink);}
.lik.sel{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:800;}

/* profile bars & radar */
.bar{display:flex;align-items:center;gap:9px;margin:7px 0;}
.bar .lbl{width:96px;font-size:12.5px;font-weight:800;flex-shrink:0;}
.bar .tr{flex:1;height:11px;background:#ecebe5;border-radius:6px;position:relative;overflow:hidden;}
.bar .tr i{display:block;height:11px;border-radius:6px;transition:width .7s ease;}
.bar .tr u{position:absolute;top:0;bottom:0;width:1.5px;background:#fff;}
.bar .val{width:30px;text-align:right;font-size:12.5px;font-weight:800;}
.lvl{display:inline-block;border-radius:6px;padding:1px 8px;font-size:10.5px;font-weight:800;margin-left:6px;}
.radarbox{display:flex;justify-content:center;margin:6px 0;}

/* lessons */
.lcard{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-left:5px solid var(--slate);border-radius:12px;padding:12px 14px;margin:9px 0;}
.lcard .t{font-weight:800;font-size:15px;color:var(--ink);}
.lmeta{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap;align-items:center;}
.mchip{border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:800;color:#fff;}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:14px 0 12px;overflow-x:auto;}
.tabs button{padding:8px 12px;font-size:13px;font-weight:700;color:var(--slate);white-space:nowrap;}
.tabs button.on{color:var(--navy);border-bottom:3px solid var(--gold);margin-bottom:-2px;}
.wstep{display:flex;gap:10px;margin:12px 0;}
.wstep .n{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.wstep .who{font-size:11px;font-weight:800;color:var(--coral);letter-spacing:.03em;}
.wstep .act{font-size:14px;font-weight:600;}
.wstep .meta{font-size:12.5px;color:var(--slate);margin-top:2px;}
.pblock{background:#f1f0ec;border-radius:11px;padding:12px 13px;margin:10px 0;font-size:13px;}
.pblock .ptxt{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;margin:7px 0;}
.pblock .pnote{font-size:12px;color:var(--slate);}
.pfor{display:inline-block;background:var(--navy);color:#fff;border-radius:5px;padding:1px 8px;font-size:10.5px;font-weight:800;margin-right:6px;}
.esrow{display:flex;gap:10px;margin:9px 0;font-size:13.5px;}
.esrow b{flex-shrink:0;width:52px;font-size:12px;}
.locrow{display:flex;gap:10px;margin:9px 0;font-size:13.5px;}
.locrow b{flex-shrink:0;width:84px;font-size:12px;}
.ministory{background:var(--s-t);border-radius:11px;padding:11px 13px;font-size:13.5px;margin:10px 0;}
.spirit{font-style:italic;background:#faf9f5;border-left:3px solid #ccc;padding:8px 13px;margin:10px 0;font-size:14px;border-radius:0 8px 8px 0;}

/* help sheet */
.sheetbg{position:fixed;inset:0;background:rgba(20,26,34,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:#fff;border-radius:18px 18px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));max-width:680px;width:100%;max-height:70vh;overflow:auto;animation:up .22s ease;}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:900px){.sheetbg{align-items:center;}.sheet{border-radius:18px;max-width:520px;}}
.sheet h4{font-size:15px;margin-bottom:6px;color:var(--navy);}
.sheet .x{float:right;font-size:20px;color:var(--slate);padding:0 4px;}

/* forms */
.inp{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font:inherit;font-size:14.5px;background:#fff;margin:6px 0;}
textarea.inp{min-height:110px;resize:vertical;}
.ck{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--slate);margin:8px 0;}
.ck input{margin-top:3px;}
.story{background:#f4f8f4;border-radius:11px;padding:11px 14px;font-size:13.5px;margin:8px 0;}

/* chapter hub */
.vid{height:170px;border-radius:14px;background:linear-gradient(135deg,#2C3858,var(--s));position:relative;margin:10px 0;}
.vid::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;}
.ws{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:7px 0;}
.ws .fi{background:var(--navy);color:#fff;border-radius:6px;font-size:10.5px;font-weight:800;padding:3px 7px;}
.building{border:1.6px dashed var(--line);border-radius:12px;padding:14px;color:var(--slate);font-size:13.5px;text-align:center;margin:10px 0;}

/* pillars row */
.pillrow{display:flex;gap:6px;margin:10px 0;}
.pillrow button{flex:1;height:40px;border-radius:9px;color:#fff;font-weight:800;font-size:14px;}

/* guide */
.gstep{display:flex;gap:10px;margin:10px 0;font-size:14px;}
.gstep .n{width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
details.acc{background:#fff;border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:0 14px;}
details.acc summary{padding:12px 0;font-weight:800;font-size:14.5px;cursor:pointer;list-style:none;color:var(--navy);}
details.acc summary::after{content:"›";float:right;transform:rotate(90deg);color:var(--slate);}
details.acc[open] summary::after{transform:rotate(-90deg);}
details.acc .bd{padding:0 0 13px;font-size:13.5px;color:#33312e;}