/* ============================================================
   TRANG CHỦ (landing) - Master NLP & Chữa Lành · VFC
   Dùng token VFC trong styles.css. Tông editorial dark-luxury.
   ============================================================ */
#home{display:none}
#home.show{display:block}

/* ---- Header ---- */
.lh{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px clamp(16px,4vw,40px);background:rgba(244,239,230,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.lh-brand{display:flex;align-items:center;gap:10px;min-width:0}
.lh-brand img{width:38px;height:38px;object-fit:contain;flex:none}
.lh-brand b{font-family:'Lora',serif;font-size:1.02rem;color:var(--a);line-height:1.1}
.lh-brand small{display:block;font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft)}
.lh-actions{display:flex;gap:10px;flex:none}
.lbtn{font-family:inherit;cursor:pointer;border-radius:999px;font-weight:600;font-size:.9rem;
  padding:9px 18px;transition:.16s;white-space:nowrap;border:1px solid transparent}
.lbtn.ghost{background:transparent;color:var(--a);border-color:var(--a)}
.lbtn.ghost:hover{background:var(--a);color:#fff}
/* nút Đăng nhập trên header: thêm chút nền sáng cho rõ trên nền ivory */
.lh .lbtn.ghost{background:#fffdf8}
.lbtn.solid{background:var(--a);color:#fff;border-color:var(--a)}
.lbtn.solid:hover{filter:brightness(1.08)}
.lbtn.gold{background:var(--e);color:#2b2010;border-color:var(--e)}
.lbtn.gold:hover{filter:brightness(1.05)}
.lh .lbtn{padding:8px 14px;font-size:.84rem}

/* ---- Hero ---- */
.lhero{position:relative;overflow:hidden;color:#f3ece0;
  background:linear-gradient(150deg,#27331f,#1b3426 60%,#16271c);
  border-radius:0 0 32px 32px}
.lhero::after{content:"";position:absolute;right:-12%;top:-20%;width:46vw;height:46vw;border-radius:50%;
  background:radial-gradient(circle,rgba(197,155,39,.18),transparent 62%);pointer-events:none}
.lhero-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,84px) clamp(20px,5vw,48px) clamp(48px,7vw,80px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.lhero-eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light,#dfb978);font-weight:700;margin-bottom:18px}
.lhero h1{font-family:'Lora',serif;font-weight:700;font-size:clamp(2.1rem,1.2rem+3.6vw,3.6rem);
  line-height:1.12;color:#faf9f5;margin-bottom:8px;letter-spacing:.005em}
.lhero h1 i{font-style:italic;color:#e7c987;font-weight:600}
.lhero .sub2{font-family:'Lora',serif;font-size:clamp(1.05rem,.9rem+.7vw,1.45rem);color:#e7c987;margin-bottom:16px;font-style:italic}
.lhero-lede{font-size:1.04rem;line-height:1.7;color:rgba(250,249,245,.82);max-width:46ch;margin-bottom:26px;font-weight:300}
.lhero-cta{display:flex;gap:12px;flex-wrap:wrap}
.lquote{margin-top:24px;border-left:3px solid var(--e);padding:10px 0 10px 18px;
  font-family:'Lora',serif;font-style:italic;font-size:1.02rem;line-height:1.6;color:rgba(250,249,245,.9);max-width:52ch}
.lquote cite{display:block;font-style:normal;font-size:.82rem;color:var(--gold-light,#dfb978);margin-top:8px;letter-spacing:.02em}
.lhero-photo{position:relative}
.lhero-photo img{width:100%;border-radius:20px;display:block;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);border:1px solid rgba(231,201,135,.25)}

/* ---- Section chung ---- */
.lsec{max-width:1100px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,5vw,40px)}
.lsec h2{font-family:'Lora',serif;font-size:clamp(1.6rem,1.1rem+1.8vw,2.5rem);color:var(--a);line-height:1.2;margin-bottom:14px}
.lsec .lead{font-size:1.08rem;line-height:1.75;color:var(--ink);max-width:60ch;margin-bottom:8px}
.lsec .lead b{color:var(--c)}

/* ---- Pain (block xanh đậm) ---- */
.lpain{background:linear-gradient(160deg,#22301c,#1b3426);color:#f3ece0;border-radius:26px;
  max-width:1100px;margin:0 auto;padding:clamp(34px,5vw,56px) clamp(24px,5vw,48px)}
.lpain h2{font-family:'Lora',serif;font-size:clamp(1.5rem,1.1rem+1.6vw,2.3rem);color:#faf9f5;line-height:1.25;margin-bottom:16px;max-width:24ch}
.lpain p{font-size:1.06rem;line-height:1.8;color:rgba(250,249,245,.82);max-width:62ch}

/* ---- 3 giá trị ---- */
.lvals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.lval{background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--e);
  border-radius:18px;padding:26px 24px;box-shadow:var(--shadow)}
.lval .vi{font-size:1.6rem;color:var(--e);margin-bottom:12px;line-height:1}
.lval h3{font-family:'Lora',serif;font-size:1.22rem;color:var(--a);margin-bottom:8px;line-height:1.3}
.lval p{font-size:.98rem;line-height:1.7;color:var(--ink-soft)}

/* ---- 3 cấp độ ---- */
.llevels{display:grid;gap:16px;margin-top:8px}
.llv{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:24px 26px;box-shadow:var(--shadow)}
.llv .lv-no{font-family:'Lora',serif;font-size:2.4rem;font-weight:700;color:var(--e);line-height:1;min-width:48px}
.llv h3{font-family:'Lora',serif;font-size:1.3rem;color:var(--a);margin-bottom:6px}
.llv p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);max-width:64ch}
.llv .lv-tag{font-size:.78rem;font-weight:700;color:var(--d);background:#f3e2bd;padding:6px 14px;border-radius:999px;white-space:nowrap}

/* ---- Founder (block xanh đậm) ---- */
.lfounder{background:linear-gradient(155deg,#26321e,#16271c);color:#f3ece0;border-radius:28px;
  max-width:1100px;margin:0 auto;padding:clamp(34px,5vw,56px) clamp(24px,5vw,48px)}
.lf-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,46px);align-items:start}
.lf-photo img{width:100%;border-radius:18px;display:block;border:1px solid rgba(231,201,135,.3);box-shadow:0 18px 44px -18px rgba(0,0,0,.55)}
.lf-eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:#dfb978;font-weight:700;margin-bottom:8px}
.lf-name{font-family:'Lora',serif;font-size:clamp(1.8rem,1.3rem+1.4vw,2.4rem);color:#faf9f5;margin-bottom:4px}
.lf-role{color:#e7c987;font-weight:600;font-size:.98rem;margin-bottom:18px}
.lf-creds{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.lf-creds li{position:relative;padding-left:24px;line-height:1.55;font-size:.98rem;color:rgba(250,249,245,.88)}
.lf-creds li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--e)}
.lf-quote{font-family:'Lora',serif;font-style:italic;font-size:1.08rem;line-height:1.7;color:#faf9f5;border-left:3px solid var(--e);padding-left:18px;margin-bottom:14px}
.lf-sign img{width:170px;display:block;filter:brightness(0) invert(1);opacity:.92;margin-bottom:2px}
.lf-sign .nm{font-family:'Lora',serif;color:#e7c987}

/* ---- CTA cuối ---- */
.lcta{text-align:center;max-width:760px;margin:0 auto;padding:clamp(48px,7vw,84px) 24px}
.lcta h2{font-family:'Lora',serif;font-size:clamp(1.7rem,1.2rem+1.8vw,2.6rem);color:var(--a);margin-bottom:10px;line-height:1.2}
.lcta p{color:var(--ink-soft);font-size:1.06rem;line-height:1.7;margin-bottom:24px}
.lcta .lhero-cta{justify-content:center}

/* ---- Footer ---- */
.lfoot{text-align:center;padding:30px 20px 44px;color:var(--ink-soft);font-size:.86rem;border-top:1px solid var(--line)}
.lfoot b{color:var(--a)}

/* ---- Reveal nhẹ khi cuộn ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---- Nút quay lại trang chủ trong modal auth ---- */
#welcome .auth-back{background:none;border:none;color:var(--ink-soft);font-size:.85rem;cursor:pointer;
  font-family:inherit;display:block;margin:14px auto 0}

@media(max-width:860px){
  .lhero-in{grid-template-columns:1fr;gap:26px}
  .lhero-photo{order:-1;max-width:340px;margin:0 auto}
  .lf-grid{grid-template-columns:1fr;gap:22px}
  .lf-photo{max-width:280px;margin:0 auto}
  .lvals{grid-template-columns:1fr}
  .llv{grid-template-columns:auto 1fr;gap:16px}
  .llv .lv-tag{grid-column:1 / -1;justify-self:start;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* ===== 40 chuyên đề (thẻ gập) ===== */
.cd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
@media(max-width:760px){.cd-grid{grid-template-columns:1fr}}
.cd{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}
.cd[open]{box-shadow:var(--shadow);border-color:var(--gold-light,#dfb978)}
.cd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;
  padding:16px 18px;font-family:'Lora',serif;color:var(--a);font-size:1.04rem;line-height:1.35}
.cd summary::-webkit-details-marker{display:none}
.cd-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--a);color:#fff;font-size:.82rem;font-weight:700;font-family:'Inter',system-ui,sans-serif}
.cd-t{flex:1}
.cd-x{flex:none;width:18px;height:18px;position:relative;opacity:.5;transition:transform .25s ease}
.cd-x::before,.cd-x::after{content:"";position:absolute;background:var(--a);border-radius:2px}
.cd-x::before{top:8px;left:2px;width:14px;height:2px}
.cd-x::after{top:2px;left:8px;width:2px;height:14px;transition:opacity .25s ease}
.cd[open] .cd-x{transform:rotate(90deg)}
.cd[open] .cd-x::after{opacity:0}
.cd-body{padding:2px 18px 18px;border-top:1px solid var(--line)}
.cd-row{font-size:.97rem;line-height:1.62;color:var(--ink-soft);margin-top:12px}
.cd-lb{display:inline-block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:2px 9px;border-radius:20px;margin-right:8px;vertical-align:1px}
.cd-lb.prob{background:#f4e4dd;color:#a9542f}
.cd-lb.ben{background:#e4eede;color:#4d6b39}
.cd-lb.uniq{background:#f3e9d4;color:#937322}
.cd-row:last-child{color:var(--ink);font-style:italic}
