@import "/tokens.css";   /* bảng màu — nguồn duy nhất, phải đứng đầu file */

/* ═══════════════════════════════════════════════════════════════
   Cẩm Thư 锦书 — theme dùng chung cho toàn bộ landing (jinshu.io)
   NGUỒN DUY NHẤT cho: top bar · footer · nút · nền động · reveal.
   (Bảng màu ở tokens.css.) Mỗi trang chỉ giữ CSS riêng của nó.
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.78;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.han{font-family:"Songti SC","STSong","Noto Serif SC","PingFang SC",serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* ── top bar ───────────────────────────────────────────────────── */
/* min-height giữ chỗ để header inject không làm nhảy layout (CLS) */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:13.5px;min-height:78px}
[data-header]{min-height:78px}
[data-footer]{min-height:150px}
.top nav a[aria-current=page]{color:var(--ink)}
.top .home{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:700;font-size:18px}
.top .home:hover{text-decoration:none}
.top .home .mk{font-family:"Songti SC","STSong","Noto Serif SC",serif;color:#fff;font-size:25px;line-height:1;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#d0483a,#a5301f);border-radius:12px;box-shadow:0 6px 16px rgba(165,48,31,.28)}
.top nav a{color:var(--muted);margin-left:16px}
.top nav a:not(.enter):hover{color:var(--ink);text-decoration:none}
.top nav a.enter{background:var(--accent);color:#fff;padding:7px 15px;border-radius:20px;font-weight:700;
  transition:background .15s ease,transform .15s ease}
.top nav a.enter:hover{background:var(--accent-deep);text-decoration:none;transform:translateY(-1px)}

/* ── nút ───────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:30px;
  font-weight:700;font-size:15px;border:1.5px solid transparent;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:hover{text-decoration:none;background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(165,48,31,.28)}
.btn-ghost{display:inline-block;background:transparent;color:var(--ink);padding:12px 26px;border-radius:30px;
  font-weight:700;font-size:15px;border:1.5px solid rgba(42,39,35,.38);
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn-ghost:hover{text-decoration:none;background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── footer ────────────────────────────────────────────────────── */
footer{color:var(--muted);font-size:13px;text-align:center;padding:34px 0 60px}
footer .fseal{font-family:"Songti SC","Noto Serif SC",serif;color:var(--gold);font-size:26px;display:block;margin-bottom:10px}
footer a{color:var(--muted);text-decoration:underline}

/* ── icon hệ thống: line-icon (Lucide) — CÙNG BỘ với dashboard app ──
   Thêm data-ic="tên" vào ô icon; theme.js thay bằng SVG. Emoji để lại
   làm dự phòng khi không có JS. Nét mảnh, tô theo màu chu sa. */
.glyph{display:inline-block;width:1em;height:1em;vertical-align:-.14em;color:var(--accent);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════════════════════════════════════
   NỀN — vùng đọc để SẠCH (chỉ một lớp gradient giấy rất mượt, cố định
   nên không nhấp nháy). Tranh sơn thuỷ đời Đường dồn xuống CHÂN TRANG
   (.horizon) và đàn nhạn ở đỉnh (.scene-top) — cả hai CUỘN theo trang
   nên đọc không bị hoa mắt. theme.js chèn các lớp này.
   ══════════════════════════════════════════════════════════════ */
body{position:relative}                 /* mốc neo cho .scene-top / .horizon */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#faf7f0 0%,#f7f2e8 60%,#f3edE1 100%)}
.scene-top,.horizon{position:absolute;left:0;right:0;z-index:0;overflow:hidden;pointer-events:none}
/* dải núi mực mờ ở đáy trang — mép trên loãng dần vào giấy cho liền mạch */
.horizon{bottom:0;height:min(44vh,400px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);
          mask-image:linear-gradient(180deg,transparent,#000 34%)}
.shan{position:absolute;inset:0;width:100%;height:100%}

/* ── Hero: dải tranh 《千里江山图》 pan chậm ở chân hero (như mở cuộn)
   + mây + đàn nhạn ở trời. Vùng chữ phía trên để giấy trơn, sạch. ── */
.scene-top{top:0;height:min(94vh,680px)}
.scroll{position:absolute;left:0;right:0;bottom:0;height:min(48vh,320px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 44%);
          mask-image:linear-gradient(180deg,transparent,#000 44%)}
.scroll::before{content:"";position:absolute;inset:0;
  background:url(/img/qianli-hero.jpg) 0% bottom/cover no-repeat;
  filter:sepia(.3) saturate(.82) brightness(1.05) contrast(.96);
  opacity:.55;animation:unroll 80s ease-in-out infinite alternate}
@keyframes unroll{from{background-position-x:0%}to{background-position-x:100%}}
.cloud{position:absolute;border-radius:50%;background:rgba(150,128,96,.1);filter:blur(18px);will-change:transform}
.cloud.c1{width:290px;height:46px;top:70px;left:-56px;animation:cloud1 66s ease-in-out infinite}
.cloud.c2{width:360px;height:54px;top:170px;right:-72px;animation:cloud2 86s ease-in-out infinite}
.cloud.c3{width:210px;height:38px;top:262px;left:32%;opacity:.7;animation:cloud1 76s ease-in-out infinite reverse}
@keyframes cloud1{0%,100%{transform:translateX(0)}50%{transform:translateX(4vw)}}
@keyframes cloud2{0%,100%{transform:translateX(0)}50%{transform:translateX(-4vw)}}
.flock{position:absolute;top:52px;left:0;width:100%;height:44px;animation:flyAcross 40s linear infinite}
.goose{position:absolute;top:0;width:16px;height:9px;opacity:.55;animation:flap 1.9s ease-in-out infinite}
.goose::before,.goose::after{content:"";position:absolute;top:0;left:50%;width:9.5px;height:2px;
  background:#6b5f4c;border-radius:2px;transform-origin:0 50%}
.goose::before{transform:rotate(28deg)}
.goose::after{transform:rotate(152deg)}
.goose:nth-child(1){left:0;top:0}
.goose:nth-child(2){left:20px;top:9px}
.goose:nth-child(3){left:40px;top:18px}
.goose:nth-child(4){left:-20px;top:9px}
.goose:nth-child(5){left:-40px;top:18px}
.goose:nth-child(2),.goose:nth-child(4){animation-delay:.25s}
.goose:nth-child(3),.goose:nth-child(5){animation-delay:.5s}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes flyAcross{0%{transform:translate(102vw,0)}100%{transform:translate(-22vw,20vh)}}

/* ── con dấu 印: chỉ hiện lúc vào trang, giữ mộc — không bóng kính ── */
.hero .seal{animation:sealIn 1s cubic-bezier(.2,.8,.25,1) both}
@keyframes sealIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.hero h1,.hero .py,.hero .kicker,.hero>.btn,.hero>div{animation:rise .8s ease both}
.hero h1{animation-delay:.12s}.hero .py{animation-delay:.22s}
.hero .kicker{animation-delay:.32s}.hero>.btn{animation-delay:.42s}.hero>div{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── hiện dần khi cuộn tới (thêm class "reveal", hoặc "reveal stag" cho lưới) ── */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.stag>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.stag.in>*{opacity:1;transform:none}
.js .reveal.stag.in>*:nth-child(2){transition-delay:.06s}
.js .reveal.stag.in>*:nth-child(3){transition-delay:.12s}
.js .reveal.stag.in>*:nth-child(4){transition-delay:.18s}
.js .reveal.stag.in>*:nth-child(5){transition-delay:.24s}
.js .reveal.stag.in>*:nth-child(6){transition-delay:.3s}

/* tôn trọng người tắt hiệu ứng chuyển động */
@media(prefers-reduced-motion:reduce){
  .cloud,.flock,.goose,.scroll::before,.hero .seal,
  .hero h1,.hero .py,.hero .kicker,.hero>.btn,.hero>div{animation:none!important}
  .js .reveal,.js .reveal.stag>*{opacity:1!important;transform:none!important;transition:none}
  .flock{display:none}
}

/* ── mobile: header gọn + núi thấp hơn ── */
@media(max-width:560px){
  .top .home{white-space:nowrap}
  .top nav a:not(.enter){display:none}
  .flock{display:none}                 /* bỏ đàn nhạn trên mobile — đỡ tốn GPU */
  .horizon{height:min(34vh,280px)}     /* núi thấp, chừa hero thoáng */
}