/* ===========================================================================
   F&B Agent Master — Design System « Làm chủ AI · bứt phá cạnh tranh »
   Nguồn CSS DUY NHẤT cho espace élève (dashboard /hoc, trang bài, 8 trang con).
   Nạp qua <link rel="stylesheet" href="/lib/fnb-ds.css"> (hợp CSP style-src 'self').
   Font self-host (CSP font-src 'self' — KHÔNG dùng Google Fonts).
   Vai màu: cream=nền(ấm) · vert=hành động/làm chủ(lạnh) · amber=tiền/giá trị(ấm)
            · rouge=cảnh báo/rủi ro/mất mát(nóng) · jaune=điểm sáng hiếm.
   =========================================================================== */

/* ---- Fonts self-host (đồng bộ functions/_helpers/fonts.js) ---- */
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-Black.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-BlackItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Overlock';src:url('/lib/ds-obobun-v1/fonts/OverlockVU-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:'Linotte';src:url('/lib/ds-obobun-v1/fonts/Linotte-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Linotte';src:url('/lib/ds-obobun-v1/fonts/Linotte-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Linotte';src:url('/lib/ds-obobun-v1/fonts/Linotte-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

/* ---- Tokens : light (bare :root) ---- */
:root{
  --ground:#E7DBC3; --paper:#F5EFE0; --paper-2:#FBF7EE;
  --ink:#1F3A1E; --body:#2B3326; --muted:#5E5B4A;
  --vert:#578223; --vert-strong:#446619; --vert-pale:#8BA888;
  --jaune:#F2C94C; --brun:#C9A479; --rouge:#A13425; --orange:#B4732A;
  --amber:#C77A1F; --amber-2:#E8A23A; --amber-ink:#8A5210;
  --on-vert:#FFFFFF;
  --hairline:rgba(31,58,30,.15);
  --panel:#1F3A1E; --panel-2:#16290F; --on-panel:#F1E8D2; --on-panel-soft:#C7CBB4;
  --shadow:0 1px 0 rgba(31,58,30,.05);
  --r:6px;
  --f-disp:'Overlock','Arial Black',sans-serif;
  --f-body:'Linotte','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  /* Compat: token cũ mà 5 trang con (cai-dat/danh-gia/demarrage/gioi-thieu/hoa-don) còn dùng.
     Giá trị cố định (light) → trang legacy giữ nguyên vẻ ngoài, không lệ thuộc theme. */
  --blanc:#FFFFFF; --cream:#EDE2CC; --noir:#1C1C1C;
  --vert-med:#578223; --vert-deep:#1F3A1E;
  --gris-light:#F5F0E8; --gris-med:#5E5B4A;
  --font-corps:var(--f-body); --font-titre:var(--f-disp);
}
/* ---- Tokens : dark (OS) — chỉ ghi đè token, guard để lựa chọn light thắng ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141E0D; --paper:#1E2A16; --paper-2:#26331C;
    --ink:#EAD9B0; --body:#E4DCC8; --muted:#A99F86;
    --vert:#8DB755; --vert-strong:#A6CB6E; --vert-pale:#5f7a4a;
    --jaune:#F2C94C; --brun:#6E5E3F; --rouge:#E5705F; --orange:#D69A4E;
    --amber:#E8A23A; --amber-2:#F0B45A; --amber-ink:#F0B45A;
    --on-vert:#10240A;
    --hairline:rgba(234,217,176,.16);
    --panel:#0F1A0A; --panel-2:#080F05; --on-panel:#F1E8D2; --on-panel-soft:#B7BC9F;
    --shadow:0 1px 0 rgba(0,0,0,.3);
  }
}
/* ---- Tokens : dark (toggle thủ công thắng cả 2 chiều) ---- */
:root[data-theme="dark"]{
  --ground:#141E0D; --paper:#1E2A16; --paper-2:#26331C;
  --ink:#EAD9B0; --body:#E4DCC8; --muted:#A99F86;
  --vert:#8DB755; --vert-strong:#A6CB6E; --vert-pale:#5f7a4a;
  --jaune:#F2C94C; --brun:#6E5E3F; --rouge:#E5705F; --orange:#D69A4E;
  --amber:#E8A23A; --amber-2:#F0B45A; --amber-ink:#F0B45A;
  --on-vert:#10240A;
  --hairline:rgba(234,217,176,.16);
  --panel:#0F1A0A; --panel-2:#080F05; --on-panel:#F1E8D2; --on-panel-soft:#B7BC9F;
  --shadow:0 1px 0 rgba(0,0,0,.3);
}

/* ---- Base ---- */
*{box-sizing:border-box;}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--f-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--f-disp);color:var(--ink);text-wrap:balance;margin:0;line-height:1.12;}
p{margin:0;}
a{color:inherit;}
svg{display:block;}
.ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ic.sm{width:15px;height:15px;}
:focus-visible{outline:2px solid var(--vert);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---- Topbar (brand moment) ---- */
.topbar{background:var(--panel);color:var(--on-panel);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(0,0,0,.2);}
.topbar-in{max-width:1160px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:26px;}
.brand{font-family:var(--f-disp);font-weight:900;font-size:20px;color:var(--on-panel);text-decoration:none;}
.brand em{color:var(--jaune);font-style:normal;}
.topnav{display:flex;gap:22px;margin-left:8px;}
.topnav a{color:var(--on-panel-soft);text-decoration:none;font-weight:700;font-size:14.5px;}
.topnav a.on,.topnav a:hover{color:var(--on-panel);}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.iconbtn{background:transparent;border:1px solid rgba(241,232,210,.3);color:var(--on-panel);width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;cursor:pointer;}
.iconbtn:hover{background:rgba(241,232,210,.1);}
.logout{color:var(--on-panel-soft);text-decoration:none;font-weight:700;font-size:14px;}
.logout:hover{color:var(--on-panel);}

/* ---- Layout ---- */
.wrap{max-width:1160px;margin:0 auto;padding:34px 24px 90px;}
.wrap-narrow{max-width:820px;margin:0 auto;padding:34px 20px 90px;}

/* ---- Eyebrow (kicker đỏ) + titres ---- */
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--rouge);}
h1{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.1rem,4.6vw,3rem);letter-spacing:-.5px;color:var(--ink);}
h2{font-family:var(--f-disp);font-weight:700;font-size:1.3rem;color:var(--ink);}

/* ---- Cards « paper » ---- */
.card,.paper{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:18px;}
.card h2,.paper h3{font-size:18px;font-weight:700;margin-bottom:7px;color:var(--ink);}
.card p,.paper p{color:var(--body);font-size:16.5px;}
.card.why{background:var(--paper-2);}
.aside{background:var(--paper-2);}
.aside .tag{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--brun);}
.note{color:var(--muted);font-size:.9rem;margin-top:8px;}

/* ---- Section markers HIỂU / LÀM / CHỨNG MINH ---- */
.sec{margin-top:52px;}
.sec-head{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--hairline);margin-bottom:22px;}
.sec-no{font-family:var(--f-disp);font-weight:900;font-size:clamp(2rem,5vw,2.7rem);color:var(--amber);line-height:.8;font-variant-numeric:tabular-nums;}
.sec-title{font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink);}
.sec-title small{display:block;font-family:var(--f-body);font-weight:600;letter-spacing:0;text-transform:none;font-size:14px;color:var(--muted);margin-top:3px;}
.grid2{display:grid;grid-template-columns:1fr;gap:18px;max-width:760px;}

/* ---- Outcome + valeur (giá trị bài) ---- */
.outcome{display:flex;gap:13px;align-items:flex-start;margin-top:18px;padding:15px 18px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--vert);border-radius:var(--r);}
.outcome .lbl{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--vert);white-space:nowrap;margin-top:3px;}
.outcome p{font-size:16px;color:var(--body);}
.outcome b{color:var(--ink);}
.headmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--muted);}
.headmeta span{display:flex;align-items:center;gap:6px;}
.atout{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--vert);background:color-mix(in srgb,var(--vert) 13%,transparent);border-radius:20px;padding:4px 11px;}
.valeur{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 20px;background:var(--paper-2);border:1px solid var(--hairline);border-left:3px solid var(--amber);border-radius:var(--r);max-width:760px;}
.valeur .ic{color:var(--amber);margin-top:3px;}
.valeur .vt{font-size:15.5px;color:var(--body);}
.valeur .vt b{color:var(--ink);}
.valeur .save{color:var(--amber);font-weight:800;}
.valeur .disc{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;}
.risk-tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;font-weight:800;color:var(--rouge);background:color-mix(in srgb,var(--rouge) 11%,transparent);border-radius:20px;padding:5px 12px;}
.feu{display:inline-flex;gap:5px;vertical-align:middle;margin-left:9px;}
.feu i{width:11px;height:11px;border-radius:50%;}
.feu .g{background:var(--vert);} .feu .a{background:var(--amber);} .feu .r{background:var(--rouge);}

/* ---- Khối LÀM (hero) : prompt + copy ---- */
.faire{background:var(--panel);color:var(--on-panel);border-radius:10px;padding:30px 30px 32px;max-width:820px;box-shadow:0 18px 40px -24px rgba(0,0,0,.55);}
.faire .lead{color:var(--on-panel-soft);font-size:16px;max-width:60ch;}
.perso{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding:8px 13px;background:rgba(141,183,85,.16);border:1px solid rgba(141,183,85,.4);border-radius:20px;font-size:13px;color:var(--on-panel);}
.perso b{color:var(--jaune);font-weight:800;} .perso .chip{color:var(--on-panel-soft);}
.prompt{margin-top:18px;background:var(--panel-2);border:1px solid rgba(241,232,210,.14);border-radius:8px;overflow:hidden;}
.prompt-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid rgba(241,232,210,.12);font-size:12px;color:var(--on-panel-soft);font-weight:700;letter-spacing:.4px;}
.prompt-bar .dots{display:flex;gap:5px;margin-left:auto;}
.prompt-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(241,232,210,.22);}
.prompt pre,.kickoff pre{margin:0;padding:18px;font-family:var(--f-mono);font-size:13.5px;line-height:1.6;color:#E9E1CC;white-space:pre-wrap;max-height:420px;overflow:auto;}
.prompt pre .hl{color:var(--jaune);}
.copy-actions,.copyrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.btn{font-family:var(--f-body);font-weight:800;font-size:15.5px;border:none;border-radius:var(--r);padding:14px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .12s,background .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary,.copybtn{background:var(--vert);color:#fff;font-family:var(--f-body);font-weight:800;border:none;border-radius:var(--r);padding:14px 24px;cursor:pointer;font-size:15.5px;}
.btn-primary:hover,.copybtn:hover{background:var(--vert-strong);}
.btn-ghost-d{background:transparent;color:var(--on-panel);border:1px solid rgba(241,232,210,.34);}
.btn-ghost-d:hover{background:rgba(241,232,210,.1);}
.btn.ok-flash{background:var(--jaune);color:#3a2f00;}
.prompt-intro{font-size:.9rem;color:var(--on-panel-soft);margin-bottom:8px;}
.platform-guidance{background:#fff6d8;color:var(--noir,#1c1c1c);border-radius:10px;padding:12px 14px;font-size:.88rem;margin:12px 0;}

/* checklist « khi nào xong » + bí kíp */
.done-when{margin-top:26px;padding-top:24px;border-top:1px solid rgba(241,232,210,.14);}
.done-when .dw-t{font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--jaune);margin-bottom:14px;}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.check li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--on-panel);}
.check li .ic{color:var(--vert-pale);margin-top:2px;}
.bikip{margin-top:26px;padding:18px 20px 19px;background:rgba(232,162,58,.1);border:1px solid rgba(232,162,58,.34);border-left:3px solid var(--amber-2);border-radius:10px;}
.bikip .bt{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:700;font-size:16.5px;color:var(--amber-2);margin-bottom:13px;}
.bikip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.bikip li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--on-panel);line-height:1.5;}
.bikip li .ic{color:var(--amber-2);margin-top:3px;}
.bikip li em{color:var(--jaune);font-style:normal;font-weight:800;}

/* rescue */
.rescue{max-width:820px;margin-top:20px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--rouge);border-radius:var(--r);padding:20px 24px;}
.rescue summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:11px;font-family:var(--f-disp);font-weight:700;font-size:18px;color:var(--ink);}
.rescue summary::-webkit-details-marker{display:none;}
.rescue summary .ic{color:var(--rouge);}
.rescue summary .chev{margin-left:auto;transition:transform .2s;color:var(--muted);}
.rescue[open] summary .chev{transform:rotate(180deg);}
.rescue-body{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.fix{background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r);padding:13px 15px;}
.fix-q{font-weight:800;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:9px;}
.fix-p{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);margin-top:8px;background:var(--ground);border-radius:5px;padding:9px 11px;}
.fix .mini{margin-top:10px;background:transparent;border:1px solid var(--brun);color:var(--vert);font-weight:800;font-size:13px;border-radius:5px;padding:7px 13px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;}
.fix .mini:hover{background:var(--paper);}
.tg{margin-top:6px;display:inline-flex;align-items:center;gap:9px;color:var(--vert);font-weight:800;font-size:14px;background:transparent;border:none;cursor:pointer;padding:4px 0;}
.tg:hover{text-decoration:underline;}

/* ---- Form CHỨNG MINH ---- */
.form,.wrap .lesson-form{max-width:760px;}
.step{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.step + .step{margin-top:16px;}
.step-lbl{display:flex;align-items:center;gap:11px;font-family:var(--f-disp);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px;}
.step-lbl .n{width:26px;height:26px;border-radius:50%;background:var(--vert);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;font-family:var(--f-body);flex:none;}
.step .hint{font-size:14px;color:var(--muted);margin-bottom:14px;}
.field-label{display:block;font-weight:700;color:var(--ink);margin:14px 0 6px;}
.field,textarea,input.evidence-input{width:100%;border:1px solid var(--brun);border-radius:var(--r);padding:13px 15px;font-family:var(--f-body);font-size:16px;background:var(--paper-2);color:var(--body);}
textarea,textarea.field{min-height:120px;resize:vertical;}
.field::placeholder,textarea::placeholder,input.evidence-input::placeholder{color:var(--muted);}
.field:focus,textarea:focus,input.evidence-input:focus{outline:2px solid var(--vert);outline-offset:1px;border-color:var(--vert);}
.uprow{display:flex;gap:11px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.up{background:transparent;border:1px dashed var(--brun);color:var(--vert);font-weight:800;font-size:14px;border-radius:var(--r);padding:11px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;}
.up:hover{background:var(--paper-2);}
.req{color:var(--rouge);}
.star-rating,.stars{display:flex;gap:5px;align-items:center;margin-top:2px;}
.star{background:none;border:none;cursor:pointer;font-size:30px;line-height:1;color:var(--brun);padding:1px 2px;transition:transform .1s,color .1s;}
.star:hover{transform:scale(1.15);}
.star.on{color:var(--jaune);}
.star-hint{margin-left:12px;font-size:14px;font-weight:700;color:var(--muted);}
.reveal{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s;}
.reveal.show{max-height:520px;opacity:1;margin-top:16px;}
.sats{display:flex;flex-direction:column;gap:9px;}
.submit,.btn-submit{margin-top:14px;background:var(--vert);color:#fff;border:none;border-radius:var(--r);padding:15px 30px;font-family:var(--f-disp);font-weight:700;font-size:1rem;cursor:pointer;}
.submit:hover,.btn-submit:hover{background:var(--vert-strong);}
.submit:disabled{opacity:.6;cursor:default;}
.submit-note{font-size:13.5px;color:var(--muted);}

/* feedback + badges + history (renderer-dependent) */
.feedback{margin-top:16px;padding:16px;border-radius:var(--r);display:none;}
.feedback.ok{display:block;background:color-mix(in srgb,var(--vert) 14%,var(--paper));border:1px solid var(--vert);}
.feedback.ko{display:block;background:color-mix(in srgb,var(--rouge) 12%,var(--paper));border:1px solid var(--rouge);}
.feedback.review{display:block;background:#fff6d8;color:#1c1c1c;border:1px solid #b98513;}
.passed-badge{display:inline-block;background:var(--vert);color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;margin-bottom:10px;}
.review-badge{display:inline-block;background:#fff0bd;color:#6b4a00;border:1px solid #b98513;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;margin-bottom:10px;}
.exam-notice{background:#fff6d8;color:#1c1c1c;border:1px solid #b98513;border-left:5px solid #b98513;border-radius:var(--r);padding:16px 18px;margin-bottom:18px;}
.exam-notice strong{color:var(--ink);}
.history-item{border-top:1px solid var(--hairline);padding:14px 0;}
.history-item:first-child{border-top:0;padding-top:0;}
.history-meta{font-size:.8rem;color:var(--muted);margin-bottom:6px;}
.history-content{white-space:pre-wrap;max-height:150px;overflow:auto;background:var(--paper-2);border-radius:8px;padding:10px;font-size:.86rem;}
.history-feedback{font-size:.86rem;margin-top:7px;color:var(--ink);}
.backlink{display:inline-block;margin-top:24px;color:var(--vert);text-decoration:none;font-weight:700;}

/* ---- Modal tốt nghiệp / bài học rút ra (renderer-dependent) ---- */
.grad-ov{position:fixed;inset:0;background:rgba(20,20,14,.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;overflow:auto;}
.grad-card{background:var(--paper);max-width:640px;width:100%;border-radius:16px;padding:34px 32px;box-shadow:0 24px 70px rgba(0,0,0,.45);border-top:6px solid var(--amber-2);}
.grad-h{font-family:var(--f-disp);font-weight:900;color:var(--ink);font-size:1.7rem;line-height:1.12;margin-bottom:14px;}
.grad-p{color:var(--body);line-height:1.62;margin:0 0 12px;}
.grad-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.grad-btn{display:inline-block;background:var(--paper-2);color:var(--ink);text-decoration:none;border:1px solid var(--hairline);border-radius:var(--r);padding:12px 20px;font-family:var(--f-disp);font-weight:700;cursor:pointer;font-size:.95rem;}
.grad-btn.primary{background:var(--vert);color:#fff;border-color:var(--vert);}
.grad-btn.primary:hover{background:var(--vert-strong);}
.grad-btn.ghost{background:transparent;border:none;color:var(--muted);}

/* ---- Locked / 404 ---- */
.locked-h{font-size:1.7rem;}

/* ===========================================================================
   DASHBOARD (/hoc)
   =========================================================================== */
.dash-head .greet{font-size:17px;color:var(--muted);margin-top:8px;max-width:60ch;}
.dash-head .greet b{color:var(--body);}
.toprow{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:28px;}
.continue{background:var(--panel);color:var(--on-panel);border-radius:10px;padding:26px 28px;text-decoration:none;display:flex;flex-direction:column;gap:6px;box-shadow:0 16px 34px -22px rgba(0,0,0,.5);}
.continue .k{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--jaune);}
.continue h2{color:var(--on-panel);font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:4px;}
.continue .desc{color:var(--on-panel-soft);font-size:15px;margin-top:6px;max-width:46ch;}
.continue .go{margin-top:16px;display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--on-panel);font-size:15px;}
.continue .go .ic{transition:transform .15s;}
.continue:hover .go .ic{transform:translateX(4px);}
.state{background:var(--paper);border:1px solid var(--hairline);border-radius:10px;padding:22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.tiles{display:flex;gap:8px;}
.tile{flex:1;text-align:center;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r);padding:12px 6px;}
.tile b{display:block;font-family:var(--f-disp);font-weight:900;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.tile span{font-size:11.5px;color:var(--muted);font-weight:700;display:block;margin-top:5px;}
.parcours-meter{margin-top:18px;}
.parcours-meter .lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:7px;}
.segs{display:flex;gap:5px;}
.segs i{height:8px;flex:1;border-radius:20px;background:var(--hairline);overflow:hidden;position:relative;}
.segs i b{position:absolute;inset:0;background:var(--vert);border-radius:20px;}
.att-line{margin-top:16px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.att-line b{color:var(--ink);font-weight:800;}
.blk{margin-top:44px;}
.blk-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;}
.blk-head h2{font-size:15px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink);}
.blk-head .sub{font-size:14px;color:var(--muted);}
.blk-head .spacer{flex:1;height:1px;background:var(--hairline);align-self:center;margin-left:6px;}
/* savings band */
.savings{display:grid;grid-template-columns:1.35fr 1fr;margin-top:22px;background:linear-gradient(100deg,var(--panel),var(--panel-2));color:var(--on-panel);border-radius:10px;overflow:hidden;box-shadow:0 16px 34px -24px rgba(0,0,0,.5);}
.savings-main{padding:26px 30px 22px;}
.savings-main .k{font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--jaune);}
.savings-main .big{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.6rem,7vw,3.6rem);color:var(--amber-2);line-height:1;margin-top:6px;font-variant-numeric:tabular-nums;}
.savings-main .cmp{color:var(--on-panel-soft);font-size:14.5px;margin-top:10px;max-width:44ch;}
.savings-main .cmp b{color:#fff;}
.savings-side{padding:24px 28px;border-left:1px solid rgba(241,232,210,.14);display:flex;flex-direction:column;justify-content:center;gap:8px;}
.savings-side .proj{font-size:13px;color:var(--on-panel-soft);}
.savings-side .proj b{font-family:var(--f-disp);font-weight:900;font-size:22px;color:var(--amber-2);display:block;line-height:1.1;}
.savings-side .growbar{display:flex;gap:4px;align-items:flex-end;height:38px;margin-top:2px;}
.savings-side .growbar i{flex:1;background:rgba(232,162,58,.55);border-radius:3px 3px 0 0;}
.savings-disc{grid-column:1/-1;padding:10px 30px;background:rgba(0,0,0,.2);font-size:11.5px;color:var(--on-panel-soft);}
/* arsenal */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;}
.liv{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.liv::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--vert);}
.liv .no{font-family:var(--f-disp);font-weight:700;font-size:12px;color:var(--muted);letter-spacing:.6px;}
.liv h3{font-size:17px;font-weight:700;margin:6px 0 0;line-height:1.2;color:var(--ink);}
.liv .meta{font-size:12.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px;}
.val-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:800;color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent);border-radius:20px;padding:4px 11px;}
.liv .open{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--vert);cursor:pointer;}
.liv .open:hover{gap:10px;}
.liv.ghost{background:transparent;border:1px dashed var(--brun);box-shadow:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted);min-height:120px;}
.liv.ghost::before{display:none;}
.liv.ghost .no{margin-bottom:6px;}
.liv.ghost p{font-size:13px;}
.export-bar{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r);padding:13px 16px;font-size:14px;color:var(--muted);}
.export-bar .ic{color:var(--brun);}
.export-bar b{color:var(--ink);}
.export-bar .lockpill{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted);background:var(--ground);border-radius:20px;padding:5px 12px;display:inline-flex;gap:6px;align-items:center;}
/* versus */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.vs-col{border-radius:8px;padding:20px 22px;border:1px solid var(--hairline);}
.vs-col.win{background:var(--paper);border-left:3px solid var(--vert);box-shadow:var(--shadow);}
.vs-col.lose{background:color-mix(in srgb,var(--rouge) 6%,transparent);border-color:color-mix(in srgb,var(--rouge) 30%,var(--hairline));border-left:3px solid var(--rouge);}
.vs-col .vk{font-family:var(--f-disp);font-weight:700;font-size:17px;color:var(--ink);display:flex;align-items:center;gap:9px;}
.vs-col.lose .vk{color:var(--muted);}
.vs-col ul{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.vs-col li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--body);}
.vs-col.lose li{color:var(--muted);}
.vs-col li .ic{color:var(--vert);margin-top:2px;}
.vs-col.lose li .ic{color:var(--rouge);}
.vs-col.lose .vk .ic{color:var(--rouge);}
.you-are{margin-top:14px;font-size:13.5px;font-weight:800;color:var(--vert);}
/* parcours phases */
.phase{background:var(--paper);border:1px solid var(--hairline);border-radius:8px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;}
.phase-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--hairline);}
.phase-head .pn{font-family:var(--f-disp);font-weight:900;font-size:26px;color:var(--amber);line-height:1;font-variant-numeric:tabular-nums;}
.phase-head .pt{flex:1;}
.phase-head .pt .k{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--vert);}
.phase-head .pt h3{font-size:19px;font-weight:700;margin-top:2px;color:var(--ink);}
.phase-head .cnt{font-family:var(--f-disp);font-weight:900;font-size:15px;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:20px;padding:5px 13px;font-variant-numeric:tabular-nums;}
.phase.lock .phase-head{opacity:.62;}
.rows{padding:8px 10px;}
.row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:5px;text-decoration:none;color:var(--body);}
.row:hover{background:var(--paper-2);}
.row .st{color:var(--vert-pale);}
.row.done .st{color:var(--vert);}
.row.cur{background:color-mix(in srgb,var(--jaune) 18%,transparent);}
.row.cur:hover{background:color-mix(in srgb,var(--jaune) 24%,transparent);}
.row.cur .st{color:var(--amber);}
.row.lock{opacity:.5;}
.row .rn{font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--muted);width:32px;flex:none;}
.row .rt{flex:1;font-weight:700;font-size:15.5px;min-width:0;}
.row .rs{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;}
.row .rs.badge-cur{color:var(--amber);}
.phase.collapsed .rows{display:none;}
.phase .peek{padding:12px 20px 15px;font-size:14px;color:var(--muted);}
/* bilan + rythme + setup */
.bilan{background:linear-gradient(100deg,var(--panel),var(--panel-2));color:var(--on-panel);border-radius:8px;padding:20px 24px;margin-bottom:14px;display:flex;gap:16px;align-items:flex-start;}
.bilan .ic{color:var(--jaune);margin-top:2px;}
.bilan .k{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--jaune);}
.bilan p{color:var(--on-panel);font-size:15.5px;margin-top:5px;max-width:72ch;}
.bilan p b{color:#fff;}
.rythme{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--vert-pale);border-radius:var(--r);padding:15px 20px;margin-top:16px;flex-wrap:wrap;}
.rythme .ic{color:var(--vert);}
.rythme .txt{flex:1;min-width:200px;font-size:14.5px;color:var(--body);}
.rythme .txt b{color:var(--ink);}
.rythme a{font-weight:800;color:var(--vert);font-size:13.5px;text-decoration:none;white-space:nowrap;}
.rythme a:hover{text-decoration:underline;}
.setup{display:flex;align-items:center;gap:13px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r);padding:14px 18px;margin-top:16px;text-decoration:none;color:var(--body);}
.setup .ic{color:var(--brun);}
.setup .t{flex:1;}
.setup .t b{color:var(--ink);font-weight:800;display:block;font-size:15px;}
.setup .t span{font-size:13px;color:var(--muted);}
.setup .arr{color:var(--vert);}
/* graduation hub (dashboard) */
.graduation-hub{background:var(--panel);color:var(--on-panel);border-radius:14px;padding:22px 24px;margin-bottom:18px;}
.graduation-hub h2{color:var(--amber-2);margin:4px 0 8px;}
.grad-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
.grad-link{display:inline-block;background:var(--paper);color:var(--ink);border-radius:9px;padding:10px 14px;text-decoration:none;font-weight:700;font-size:.88rem;}
.grad-link.primary{background:var(--jaune);color:#3a2f00;}
/* rgpd */
.rgpd{margin-top:40px;padding-top:18px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted);display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.rgpd button{background:transparent;border:1px solid color-mix(in srgb,var(--rouge) 45%,transparent);color:var(--rouge);border-radius:var(--r);padding:8px 14px;font-family:var(--f-body);font-weight:700;font-size:13px;cursor:pointer;}
.rgpd button:hover:not(:disabled){border-color:var(--rouge);color:var(--rouge);background:color-mix(in srgb,var(--rouge) 8%,transparent);}
.rgpd-msg{color:var(--vert);}
.page-foot{margin-top:26px;font-size:12.5px;color:var(--muted);font-family:var(--f-disp);font-weight:700;letter-spacing:.5px;text-align:center;}

/* ---- Responsive ---- */
@media (max-width:940px){
  .toprow{grid-template-columns:1fr;}
  .topnav{display:none;}
  .savings{grid-template-columns:1fr;}
  .savings-side{border-left:none;border-top:1px solid rgba(241,232,210,.14);}
  .versus{grid-template-columns:1fr;}
}
@media (max-width:520px){
  body{font-size:17px;}
  .wrap,.wrap-narrow{padding-left:16px;padding-right:16px;}
  .faire{padding:22px 18px 24px;}
  .outcome{flex-direction:column;gap:6px;}
}

/* ============================================================
   QA/QC patch — contrast WCAG AA, focus sur fond sombre, classes legacy
   ============================================================ */
/* Chữ vai vert → nét đậm hơn cho đủ contrast trên nền sáng */
.backlink,.liv .open,.tg,.up,.fix .mini,.rythme a,.you-are,.setup .arr{color:var(--vert-strong);}
/* Chữ/số vai amber → amber-ink tối hơn (amber gốc để nền/viền) */
.sec-no,.phase-head .pn,.valeur .save,.val-tag{color:var(--amber-ink);}
.valeur .ic{color:var(--amber-ink);}
/* Nút nền vert: chữ theo --on-vert (trắng ở sáng, tối ở dark) tránh chói theme tối */
.btn-primary,.copybtn,.submit,.btn-submit{color:var(--on-vert);}
.step-lbl .n{color:var(--on-vert);}
/* Sao chấm điểm: jaune trên cream vô hình → amber + viền đậm cho rõ (trường bắt buộc) */
.star.on{color:var(--amber);-webkit-text-stroke:1px var(--amber-ink);}
/* Vòng focus xanh vô hình trên mặt tối → jaune */
.topbar :focus-visible,.faire :focus-visible,.continue:focus-visible,.savings :focus-visible,.graduation-hub :focus-visible,.btn-ghost-d:focus-visible{outline-color:var(--jaune);}
/* Chống tràn ngang nếu prompt có URL/chuỗi dài */
.prompt pre,.kickoff pre{overflow-wrap:anywhere;}
/* .submit-row (renderer dùng) */
.submit-row{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* Class legacy cho trang con : .kickoff (khối lệnh nền tối) + ul.crit (checklist ✓) */
.kickoff{background:var(--panel);color:var(--on-panel);border-radius:10px;padding:18px 20px;margin:14px 0;}
.kickoff pre{background:var(--panel-2);border:1px solid rgba(241,232,210,.14);border-radius:8px;padding:14px;}
ul.crit{list-style:none;padding:0;margin:8px 0;}
ul.crit li{position:relative;padding:6px 0 6px 26px;color:var(--body);}
ul.crit li::before{content:'✓';position:absolute;left:0;color:var(--vert-strong);font-weight:900;}

/* ---- Điểm TB + mẹo cho người sau (peer tips) ---- */
.avg-rate{color:var(--muted);font-size:.86rem;letter-spacing:.5px;}
.avg-rate b{color:var(--vert-deep);font-weight:800;letter-spacing:0;}
.avg-rate.none{opacity:.75;}
.tips-read{margin-top:16px;}
.tips-h{font-family:var(--font-titre);font-weight:800;color:var(--vert-deep);font-size:1rem;margin-bottom:4px;}
.tips-sub{color:var(--muted);font-size:.86rem;margin:0 0 12px;}
.tips-list{display:flex;flex-direction:column;gap:10px;}
.tip{background:var(--paper-2);border:1px solid var(--hairline);border-radius:10px;padding:11px 13px;}
.tip-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:5px;}
.tip-who b{color:var(--vert-deep);}
.tip-grp{background:var(--vert-deep);color:var(--cream);font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:6px;margin-left:5px;}
.tip-date{color:var(--muted);font-size:.74rem;}
.tip-mine{color:var(--vert-med);font-weight:700;}
.tip-hid-lbl{color:var(--rouge);font-weight:800;}
.tip-body{margin:0;color:var(--body);font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.tip-hidden{opacity:.55;}
.tip-mod-row,.tip-own-row{margin-top:8px;display:flex;gap:10px;}
.tip-mod,.tip-edit,.tip-del{background:none;border:1px solid var(--hairline);border-radius:7px;padding:3px 10px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;color:var(--vert-med);}
.tip-mod:hover,.tip-edit:hover{background:var(--vert-med);color:var(--blanc);border-color:var(--vert-med);}
.tip-del{color:var(--rouge);} .tip-del:hover{background:var(--rouge);color:#fff;border-color:var(--rouge);}
.tips-more{margin-top:10px;} .tips-more summary{cursor:pointer;color:var(--vert-med);font-weight:700;font-size:.84rem;}
.tips-more .tips-list{margin-top:10px;}
.tips-empty{color:var(--muted);font-size:.88rem;font-style:italic;margin:0;}
.tips-write{background:var(--paper-2);border:1px dashed var(--hairline);border-radius:10px;padding:14px 16px;margin-top:18px;}
.tips-write textarea{width:100%;border:1px solid var(--hairline);border-radius:8px;padding:9px 11px;font:inherit;line-height:1.5;resize:vertical;min-height:70px;background:var(--blanc);color:var(--ink);}
.tips-wrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;}
.tips-note{color:var(--muted);font-size:.78rem;}
.tips-lock{color:var(--muted);font-size:.88rem;margin:0;}

/* ---- Bước 0 (cài máy): banner nhắc ở bài 1 khi chưa đánh dấu xong ---- */
.setup-banner{background:color-mix(in srgb,var(--jaune) 22%,var(--paper));border:1px solid var(--amber);border-radius:var(--r);padding:12px 16px;margin:14px 0 4px;font-size:15px;line-height:1.5;color:var(--ink);}
.setup-banner b{font-weight:800;}
.setup-banner a{color:var(--vert);font-weight:800;text-decoration:underline;}