:root{--bg:#F4F8FF;--bg2:#E8F0FF;--white:#fff;--ink:#050E2A;--muted:#4A5880;--muted2:#7A88AA;--border:#DCE4F4;--border2:#C4D0EC;--blue:#1248D4;--lblue:rgba(18,72,212,.08);--blueb:rgba(18,72,212,.2);--blue2:#1E5AFF;--dblue:#0A2A8A;--teal:#0898A0;--lteal:rgba(8,152,160,.08);--tealb:rgba(8,152,160,.2);--green:#1A8A40;--lgreen:rgba(26,138,64,.08);--greenb:rgba(26,138,64,.2);--amber:#C87C08;--lamber:rgba(200,124,8,.08);--amberb:rgba(200,124,8,.2);--red:#C02828;--lred:rgba(192,40,40,.08);--redb:rgba(192,40,40,.2);--purple:#6A28C0;--lpurple:rgba(106,40,192,.08);--purpleb:rgba(106,40,192,.2);--orange:#C85808;--lorange:rgba(200,88,8,.08);--orangeb:rgba(200,88,8,.2);--sh:0 2px 14px rgba(5,14,42,.07);--sh2:0 8px 36px rgba(5,14,42,.13)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6;font-size:13.5px}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ---- nav (static, shared with index.html) ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:600;background:rgba(244,248,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:62px;box-shadow:var(--sh)}
.nav-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.nav-ico{width:36px;height:36px;border-radius:9px;object-fit:cover;display:block}
.nav-logo{font-size:19px;font-weight:900;color:var(--dblue)}.nav-logo span{color:var(--blue2)}.nav-logo .ext{font-size:11px;font-weight:500;color:var(--muted2)}
.nav-c{display:flex;gap:2px}
.nl{padding:7px 12px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-radius:7px;transition:all .18s;background:none;border:none;font-family:"Be Vietnam Pro",sans-serif;text-decoration:none;display:inline-block}
.nl:hover{color:var(--blue);background:var(--lblue)}
.nav-r{display:flex;gap:10px;align-items:center}
.nav-hl{font-size:13.5px;font-weight:800;color:var(--blue)}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:"Be Vietnam Pro",sans-serif;box-shadow:0 3px 14px rgba(18,72,212,.28);transition:all .18s;text-decoration:none;display:inline-block}
.btn-blue:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---- footer (shared with index.html) ---- */
footer{background:var(--ink);padding:44px 48px 24px}
.ftin{max-width:1260px;margin:0 auto}
.fttop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.ftlogo{font-size:20px;font-weight:900;color:#fff;margin-bottom:6px}.ftlogo span{color:#80C0FF}
.ftbp{font-size:12.5px;color:rgba(255,255,255,.35);line-height:1.7;max-width:280px;margin-bottom:14px}
.fttags{display:flex;gap:6px;flex-wrap:wrap}
.fttag{font-size:11px;padding:3px 10px;border-radius:4px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
.ftct{font-size:11px;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.ftlnks{display:flex;flex-direction:column;gap:8px}
.ftlnks a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .18s;cursor:pointer}
.ftlnks a:hover{color:#fff}
.ftdiv{height:1px;background:rgba(255,255,255,.08);margin-bottom:18px}
.ftbot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.ftcopy{font-size:12px;color:rgba(255,255,255,.22)}
.ftdisc{font-size:11px;color:rgba(255,255,255,.15);max-width:540px;line-height:1.6}

/* ---- article shell ---- */
.art-wrap{max-width:1260px;margin:0 auto;padding:98px 48px 60px}
.crumb{font-size:12px;color:var(--muted2);margin-bottom:16px;display:flex;gap:6px;flex-wrap:wrap}
.crumb a{color:var(--muted2);text-decoration:none}.crumb a:hover{color:var(--blue)}
.art-badge{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:var(--blue);background:var(--lblue);border:1px solid var(--blueb);border-radius:20px;padding:5px 14px;display:inline-block;margin-bottom:14px}
.art-title{font-size:32px;font-weight:900;line-height:1.22;letter-spacing:-.4px;color:var(--ink);max-width:900px;margin-bottom:14px}
.art-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted2);margin-bottom:22px}
.art-cover-ph{border-radius:16px;height:280px;display:flex;align-items:center;justify-content:center;font-size:72px;margin-bottom:22px;box-shadow:var(--sh)}
.art-cover{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin-bottom:22px;box-shadow:var(--sh);display:block}
.art-body img{max-width:100%;height:auto;border-radius:12px;display:block;margin:20px 0;box-shadow:var(--sh)}
.art-body figure{margin:20px 0}
.art-body figcaption{font-size:12px;color:var(--muted2);text-align:center;margin-top:8px}
.nt1{background:linear-gradient(135deg,#EDF2FF,#C8D8FF)}.nt2{background:linear-gradient(135deg,#E0F8F0,#A0E8CC)}
.nt3{background:linear-gradient(135deg,#FFF8E0,#FFE8A0)}.nt4{background:linear-gradient(135deg,#FFE8EE,#FFC0CC)}
.nt5{background:linear-gradient(135deg,#F0E8FF,#D8B0FF)}.nt6{background:linear-gradient(135deg,#E8F8FF,#A0D8FF)}
.art-lead{font-size:16px;color:var(--muted);line-height:1.85;max-width:820px;margin-bottom:32px;font-weight:500}

.art-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start}
.art-toc{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--sh)}
.art-toc-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.art-toc ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.art-toc a{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:7px;border-left:2px solid transparent;transition:all .15s}
.art-toc a:hover{color:var(--blue);background:var(--lblue)}
.art-toc a.on{color:var(--blue);background:var(--lblue);border-left-color:var(--blue);font-weight:700}
.art-toc li.toc-sub a{padding-left:20px;font-size:12px;font-weight:500}

.art-body{max-width:760px;font-size:15px;color:var(--ink);line-height:1.85}
.art-body h2{font-size:23px;font-weight:900;letter-spacing:-.3px;color:var(--ink);margin:34px 0 14px;scroll-margin-top:80px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:17.5px;font-weight:800;color:var(--ink);margin:24px 0 10px;scroll-margin-top:80px}
.art-body p{color:var(--muted);margin-bottom:14px}
.art-body ul,.art-body ol{color:var(--muted);margin:0 0 14px 20px}
.art-body li{margin-bottom:6px}
.art-body strong{color:var(--ink)}
.art-body a{color:var(--blue);font-weight:600}
.art-body blockquote{border-left:3px solid var(--blue);background:var(--lblue);padding:12px 16px;border-radius:0 8px 8px 0;font-size:13.5px;color:var(--muted);margin:0 0 14px}
.art-body table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:13px}
.art-body th{background:var(--blue);color:#fff;padding:9px 12px;text-align:left;font-weight:700}
.art-body td{padding:9px 12px;border:1px solid var(--border);color:var(--muted)}
.art-body tr:nth-child(even) td{background:var(--bg2)}
.art-content-ph{border:1.5px dashed var(--border2);border-radius:10px;padding:16px;font-size:12.5px;color:var(--muted2);background:var(--bg2)}

.art-cta{margin-top:30px;background:linear-gradient(135deg,var(--blue),var(--dblue));border-radius:16px;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.art-cta-text{color:#fff;font-size:15px;font-weight:700;max-width:400px}
.art-cta-text span{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.65);margin-top:4px}
.art-cta-btn{background:#fff;color:var(--blue);padding:12px 22px;border-radius:9px;font-size:13.5px;font-weight:800;text-decoration:none;white-space:nowrap}

.art-related{margin-top:48px;max-width:760px;margin-left:266px}
.art-related-title{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.art-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.art-related-item{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px;text-decoration:none;box-shadow:var(--sh);transition:all .18s;display:block}
.art-related-item:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--border2)}
.art-related-cat{font-size:10px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.art-related-name{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4}

@media (max-width:980px){
  nav{padding:0 20px}.nav-c{display:none}
  .art-wrap{padding:88px 20px 44px}
  .art-layout{grid-template-columns:1fr}
  .art-toc{position:static;margin-bottom:22px}
  .art-body{max-width:none}
  .art-related{margin-left:0;max-width:none}
  .art-related-grid{grid-template-columns:1fr}
  .art-title{font-size:25px}
  .fttop{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fttop{grid-template-columns:1fr}
  .art-cover-ph{height:180px;font-size:52px}
}