/* ===========================================================
   /how-to-work-with-us/ 与 /blog/ —— 对标 topnovocup 版式（Poppins 体系）
   只作用于 .tn-site 内部，不影响站点其它页
   =========================================================== */

.tn-site {
  font-family: Poppins, "Manrope", system-ui, sans-serif;
  color: #584545;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.tn-site *,
.tn-site *::before,
.tn-site *::after { box-sizing: border-box; }

.tn-sec { padding: 58px 0; }
.tn-sec--gray { background: #eef0f2; }
.tn-sec--navy { background: #0f323e; color: #fff; }
.tn-sec--tight { padding: 40px 0; }

.tn-wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.tn-wrap--wide { max-width: 1420px; }

/* ---------- 标题组 ---------- */
.tn-head { text-align: center; margin-bottom: 38px; }
.tn-kicker {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #909090;
}
.tn-h1, .tn-h2 {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.28;
  font-weight: 600;
  color: #4f4f4f;
  letter-spacing: -0.005em;
}
.tn-lead {
  margin: 0 auto;
  max-width: 780px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #6c6c6c;
}
.tn-head--left { text-align: left; }
.tn-head--left .tn-lead { margin: 0; }

/* ---------- 三列卡片 ---------- */
.tn-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.tn-card {
  background: #fff;
  border-radius: 5px;
  padding: 30px 24px 28px;
  text-align: center;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}
.tn-card .tn-ico { display: block; margin: 0 auto 16px; width: 46px; height: 46px; }
.tn-card .tn-ico svg { width: 100%; height: 100%; }
.tn-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #4f4f4f;
}
.tn-card p { margin: 0; font-size: 13.2px; line-height: 1.75; color: #6c6c6c; }
.tn-card p a { color: #0f7f9c; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 运输方式（左图右文） ---------- */
.tn-ship {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  background: #fff;
  border-radius: 5px;
  padding: 26px 26px 22px;
  margin-bottom: 26px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}
.tn-ship:last-child { margin-bottom: 0; }
.tn-ship-media .tn-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #f2f5f7;
  border-radius: 3px;
  overflow: hidden;
}
.tn-ship-media .tn-shot img { width: 100%; height: 100%; object-fit: cover; }
.tn-ship-media .tn-shot svg { width: 104px; height: 104px; opacity: 0.85; }
.tn-shot-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 9px;
  background: #0f323e;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tn-ship-cap { margin: 12px 0 0; text-align: center; }
.tn-ship-cap strong { display: block; font-size: 14px; font-weight: 600; color: #4f4f4f; }
.tn-ship-cap span { display: block; margin-top: 3px; font-size: 12.4px; color: #8b8b8b; }

.tn-ship-body h4 {
  margin: 0 0 6px;
  font-size: 13.4px;
  font-weight: 700;
  color: #3f3f3f;
}
.tn-ship-body h4:not(:first-child) { margin-top: 16px; }
.tn-ship-body p,
.tn-ship-body li { margin: 0 0 6px; font-size: 13.2px; line-height: 1.68; color: #6c6c6c; }
.tn-ship-body ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 深底横条 ---------- */
.tn-strip { background: #0f323e; color: #fff; padding: 34px 0; }
.tn-strip .tn-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
}
.tn-strip h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; color: #fff; }
.tn-strip ul { margin: 0; padding: 0; list-style: none; }
.tn-strip li { font-size: 13.2px; line-height: 1.95; color: #cfdde3; }
.tn-btn-light {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 3px;
  background: #fff;
  color: #0f323e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.tn-btn-light:hover { background: #e8f2f5; }

/* ---------- 付款 ---------- */
.tn-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.tn-pay-copy h2 {
  margin: 0 0 14px;
  font-size: 27px;
  line-height: 1.3;
  font-weight: 600;
  color: #4f4f4f;
}
.tn-pay-copy h4 { margin: 18px 0 6px; font-size: 13.6px; font-weight: 700; color: #3f3f3f; }
.tn-pay-copy p { margin: 0 0 10px; font-size: 13.4px; line-height: 1.78; color: #6c6c6c; }
.tn-pay-copy a { color: #0f7f9c; }

.tn-frame { position: relative; }
.tn-frame img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tn-frame::before {
  content: "";
  position: absolute;
  inset: -16px -16px auto auto;
  width: 62%;
  height: 72%;
  background: #0f323e;
  border-radius: 2px;
  z-index: 0;
}
.tn-frame img { position: relative; z-index: 1; }

.tn-paycards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.tn-paycard {
  background: #0f323e;
  border-radius: 5px;
  padding: 24px 22px 22px;
  color: #e3edf1;
}
.tn-paycard h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: #fff; }
.tn-paycard .tn-sub { margin: 0 0 10px; font-size: 12.2px; font-weight: 600; color: #8fcfe2; }
.tn-paycard p { margin: 0 0 8px; font-size: 12.6px; line-height: 1.72; color: #d5e2e8; }
.tn-paycard h5 {
  margin: 12px 0 4px;
  font-size: 12.2px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.tn-paycard ul { margin: 0; padding: 0; list-style: none; }
.tn-paycard li { font-size: 12.6px; line-height: 1.7; color: #d5e2e8; }

/* ---------- 底部长条 CTA ---------- */
.tn-cta { background: #0f323e; padding: 66px 22px 70px; text-align: center; }
.tn-cta h2 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #2facd4;
}
.tn-cta p { margin: 0 auto; max-width: 760px; font-size: 16px; line-height: 1.72; color: #c9dde4; }

/* ---------- 博客：侧栏 + 三列卡片 ---------- */
.tn-blog { padding: 46px 0 60px; }
.tn-blog-head { margin: 0 0 36px; padding: 0 0 26px; border-bottom: 1px solid #e4e6e6; }
.tn-blog-head .tn-kicker { margin: 0 0 9px; }
.tn-blog-head h1 {
  margin: 0 0 11px;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #0f323e;
}
.tn-blog-lead { margin: 0; max-width: 840px; font-size: 14.5px; line-height: 1.78; color: #5d6b6b; }
.tn-blog-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 46px; align-items: start; }

.tn-side { position: sticky; top: 96px; }
.tn-side h3 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d9d9d9;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4f4f4f;
}
.tn-side-list { margin: 0 0 8px; padding: 0; list-style: none; }
.tn-side-list a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid #ededed;
  font-size: 13.4px;
  color: #4f4f4f;
  text-decoration: none;
}
.tn-side-list a:hover { color: #0f7f9c; }

.tn-help { text-align: center; padding: 26px 4px 0; }
.tn-help img {
  object-position: 58% 32%;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  display: block;
}
.tn-help h4 {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4f4f4f;
  line-height: 1.5;
}
.tn-help p { margin: 0 0 16px; font-size: 12.8px; line-height: 1.7; color: #6c6c6c; }
.tn-help .tn-btn-light { background: #0f323e; color: #fff; }
.tn-help .tn-btn-light:hover { background: #17414f; }

.tn-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.tn-post { display: flex; flex-direction: column; }
.tn-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f1f1;
}
.tn-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tn-post:hover .tn-thumb img { transform: scale(1.03); }
.tn-date {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  padding: 4px 0 5px;
  background: #2facd4;
  color: #fff;
  text-align: center;
  line-height: 1.05;
}
.tn-date b { display: block; font-size: 15px; font-weight: 600; }
.tn-date span { display: block; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.tn-post h2 {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.36;
  font-weight: 600;
  color: #4f4f4f;
}
.tn-post h2 a { color: inherit; text-decoration: none; }
.tn-post h2 a:hover { color: #0f7f9c; }
.tn-post .tn-rule { width: 44px; height: 1px; background: #cfcfcf; margin: 11px 0; }
.tn-post p { margin: 0; font-size: 13.6px; line-height: 1.62; color: #584545; }

.tn-blog-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #e7e7e7;
  font-size: 12.8px;
  color: #8b8b8b;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .tn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-paycards { grid-template-columns: 1fr; }
  .tn-blog-row { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
  .tn-pay { grid-template-columns: 1fr; gap: 34px; }
  .tn-pay .tn-frame { order: -1; }
}

@media (max-width: 820px) {
  .tn-sec { padding: 42px 0; }
  .tn-blog-head { margin-bottom: 26px; padding-bottom: 20px; }
  .tn-blog-head h1 { font-size: 25px; }
  .tn-blog-lead { font-size: 14px; }
  .tn-blog-row { grid-template-columns: 1fr; }
  .tn-side { position: static; }
  .tn-help { display: grid; grid-template-columns: 96px 1fr; gap: 16px; text-align: left; align-items: center; }
  .tn-help img { width: 96px; height: 96px; margin: 0; grid-row: span 2; }
  .tn-help h4, .tn-help p { grid-column: 2; }
  .tn-help .tn-btn-light { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
  .tn-ship { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .tn-strip .tn-wrap { grid-template-columns: 1fr; gap: 20px; }
  .tn-cta h2 { font-size: 24px; }
  .tn-h1, .tn-h2, .tn-pay-copy h2 { font-size: 23px; }
}

@media (max-width: 560px) {
  .tn-cards { grid-template-columns: 1fr; }
  .tn-posts { grid-template-columns: 1fr; }
  .tn-card { padding: 26px 20px; }
}

/* ---------- 两列图文（门到门） ---------- */
.tn-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 46px; }
.tn-twocol > div { position: relative; padding-left: 62px; }
.tn-twocol .tn-ico { position: absolute; left: 0; top: 2px; width: 40px; height: 40px; }
.tn-twocol .tn-ico svg { width: 100%; height: 100%; }
.tn-twocol h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #4f4f4f; line-height: 1.5; }
.tn-twocol p { margin: 0 0 10px; font-size: 13.4px; line-height: 1.75; color: #6c6c6c; }
.tn-twocol h4 { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: #3f3f3f; }
.tn-twocol ul { margin: 0; padding: 0; list-style: none; }
.tn-twocol li { font-size: 13.2px; line-height: 1.8; color: #6c6c6c; }

@media (max-width: 820px) {
  .tn-twocol { grid-template-columns: 1fr; gap: 28px; }
}

/* 站内全局会把标题设成衬线体，这里统一压回 Poppins */
.tn-site h1, .tn-site h2, .tn-site h3, .tn-site h4, .tn-site h5, .tn-site h6,
.tn-site p, .tn-site li, .tn-site a, .tn-site strong, .tn-site span, .tn-site b {
  font-family: Poppins, "Manrope", system-ui, sans-serif;
}
.tn-site h1, .tn-site h2, .tn-site h3, .tn-site h4, .tn-site h5 { font-weight: 600; letter-spacing: -0.003em; }

/* 运输方式左侧面板：深底 + 图标 + 船期数字（没有物流实拍图，用信息面板替代空图框） */
.tn-ship-media .tn-shot--panel {
  background: linear-gradient(150deg, #0f323e 0%, #174453 100%);
  padding: 26px 22px;
  flex-direction: column;
  gap: 14px;
}
.tn-ship-media .tn-shot--panel svg { width: 74px; height: 74px; color: rgba(255, 255, 255, 0.9); opacity: 1; }
.tn-shot-tag { background: #2facd4; color: #08303a; }
.tn-stat { text-align: center; color: #fff; }
.tn-stat b { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.tn-stat span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9fd0e0; }
/* === CTA-BAND-TN-20261029 === */
.tn-cta{position:relative;background:radial-gradient(125% 135% at 50% -20%,#1b4a5c 0%,#123845 48%,#0d2c36 100%);padding:104px 24px 96px;text-align:center}
.tn-cta:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(168,224,240,.5),transparent)}
.tn-cta h2{margin:0 auto 22px;max-width:27ch;color:#f2f8fa;font-family:Fraunces,"Songti SC","SimSun",Georgia,serif;font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.16;letter-spacing:-.005em}
.tn-cta p{margin:0 auto;max-width:780px;font-size:clamp(16px,1.3vw,19px);line-height:1.66;color:#c9dde4}
.tn-cta .tn-cta-button{display:inline-flex;align-items:center;justify-content:center;margin:44px auto 0;min-height:60px;padding:18px 46px;border:2px solid rgba(242,248,250,.9);border-radius:3px;background:transparent;color:#f2f8fa;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.tn-cta .tn-cta-button:hover{background:#f2f8fa;border-color:#f2f8fa;color:#123845}
.tn-cta .tn-cta-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 34px;margin:50px auto 0;padding:0;max-width:960px;list-style:none}
.tn-cta .tn-cta-trust li{position:relative;color:#9fc0cb;font-size:12.5px;letter-spacing:.02em;line-height:1.5}
.tn-cta .tn-cta-trust li+li:before{content:"";position:absolute;left:-18px;top:50%;width:3px;height:3px;border-radius:50%;background:#4d7b8a;transform:translateY(-50%)}
@media (max-width:860px){
.tn-cta{padding:72px 20px 64px}
.tn-cta h2{max-width:none}
.tn-cta .tn-cta-button{width:100%;max-width:340px;min-height:56px;padding:16px 24px;letter-spacing:.1em}
.tn-cta .tn-cta-trust{gap:8px 24px;margin-top:36px}
.tn-cta .tn-cta-trust li+li:before{left:-13px}
}
/* === /CTA-BAND-TN-20261029 === */

/* ===========================================================
   长文正文页（/blog/*）—— 对标 topnovocup 文章页版式
   大图页头 + 窄栏正文 + 目录 + 青头表格
   =========================================================== */

.tn-ah {
  position: relative;
  padding: 84px 0 44px;
  background-color: #12222a;
  background-size: cover;
  background-position: center 42%;
  text-align: center;
  overflow: hidden;
}
.tn-ah::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 26, 33, .72) 0%, rgba(9, 26, 33, .58) 45%, rgba(9, 26, 33, .84) 100%);
}
.tn-ah-in { position: relative; max-width: 860px; margin: 0 auto; padding: 0 22px; }
.tn-ah-kick {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fd3e6;
}
.tn-ah h1 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.tn-ah-meta {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* 正文窄栏 */
.tn-sec--art { padding-top: 30px; }
.tn-abody {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 22px 0;
  font-size: 14.2px;
  line-height: 1.85;
  color: #5b5b5b;
}
.tn-abody > p { margin: 0 0 18px; }
.tn-abody strong { color: #3a3a3a; font-weight: 600; }
.tn-abody a { color: #177e9c; text-decoration: underline; text-underline-offset: 2px; }
.tn-abody a:hover { color: #0f323e; }

.tn-abody h2 {
  margin: 42px 0 14px;
  font-size: 24px;
  line-height: 1.32;
  font-weight: 600;
  color: #2f2f2f;
  scroll-margin-top: 90px;
}
.tn-abody h3 {
  margin: 30px 0 10px;
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #333;
  scroll-margin-top: 90px;
}

/* 目录 */
.tn-toc {
  margin: 0 0 8px;
  padding: 20px 24px 18px;
  background: #f7f8f9;
  border: 1px solid #e7eaec;
  border-radius: 2px;
}
.tn-toc-h {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.tn-toc-h span { font-size: 11px; font-weight: 400; color: #9aa3a7; margin-left: 6px; }
.tn-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.tn-toc > ol > li { counter-increment: toc; margin: 0 0 3px; font-size: 13px; line-height: 1.55; }
.tn-toc > ol > li > a { color: #2f8fae; text-decoration: none; }
.tn-toc > ol > li > a::before { content: counter(toc) " "; color: #2f8fae; margin-right: 3px; }
.tn-toc ol ol { margin: 2px 0 4px; padding-left: 22px; list-style: none; counter-reset: toc2; }
.tn-toc ol ol li { counter-increment: toc2; margin: 0 0 2px; font-size: 12.5px; }
.tn-toc ol ol li a { color: #2f8fae; text-decoration: none; }
.tn-toc ol ol li a::before { content: counter(toc) "." counter(toc2) " "; margin-right: 3px; }
.tn-toc a:hover { text-decoration: underline; }

/* 列表 */
.tn-aul, .tn-aol { margin: 0 0 18px; padding-left: 24px; }
.tn-aul { list-style: disc outside; }
.tn-aol { list-style: decimal outside; }
.tn-aul li, .tn-aol li { margin: 0 0 7px; padding-left: 4px; }
.tn-aul li::marker, .tn-aol li::marker { color: #2facd4; font-weight: 600; }

/* 表格：青头 + 隔行浅底，无竖线 */
.tn-atable { margin: 0 0 20px; overflow-x: auto; }
.tn-atable table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.65; }
.tn-atable thead th {
  padding: 11px 12px;
  background: #2facd4;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
}
.tn-atable tbody td {
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #e9ecee;
  vertical-align: top;
  color: #5b5b5b;
}
.tn-atable tbody tr:nth-child(even) td { background: #f7f8f9; }
.tn-atable tbody td:first-child { color: #3d3d3d; font-weight: 500; }
.tn-atable .tn-td-note { display: block; margin-top: 8px; font-size: 12px; color: #8a969b; }

/* 提示块 */
.tn-note {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: #f4f9fb;
  border-left: 3px solid #2facd4;
  font-size: 13.4px;
  line-height: 1.8;
}
.tn-note b.tn-note-l {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #177e9c;
}
.tn-note p { margin: 0 0 8px; }
.tn-note p:last-child { margin-bottom: 0; }

/* 算式块 */
.tn-calc {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: #0f323e;
  color: #eaf4f7;
  font-size: 13px;
  line-height: 1.9;
}
.tn-calc .tn-calc-l {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fd3e6;
}
.tn-calc .tn-calc-row { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dotted rgba(255,255,255,.18); padding: 3px 0; }
.tn-calc .tn-calc-row:last-of-type { border-bottom: 0; }
.tn-calc .tn-calc-row b { font-weight: 600; color: #fff; }
.tn-calc .tn-calc-out { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.24); font-size: 14px; }
.tn-calc .tn-calc-out b { color: #6fd0ea; }

/* 相关文章 */
.tn-rel { margin: 52px 0 0; padding-top: 32px; border-top: 1px solid #e7eaec; }
.tn-rel h2 { margin: 0 0 18px !important; font-size: 19px !important; }
.tn-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tn-rel-card { display: block; text-decoration: none !important; }
.tn-rel-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #dfe4e6; }
.tn-rel-card h3 {
  margin: 10px 0 6px !important;
  font-size: 13.6px !important;
  line-height: 1.45 !important;
  color: #2f2f2f !important;
}
.tn-rel-card p { margin: 0; font-size: 12.2px; line-height: 1.6; color: #7b8488; }

/* 底部询价 */
.tn-acta { margin: 46px 0 0; padding: 30px 28px; background: #eef0f2; text-align: center; }
.tn-acta h2 { margin: 0 0 10px !important; font-size: 20px !important; }
.tn-acta p { margin: 0 auto 18px; max-width: 560px; font-size: 13.4px; }
.tn-acta a.tn-btn-light { display: inline-block; }

@media (max-width: 900px) {
  .tn-ah { padding: 62px 0 34px; }
  .tn-ah h1 { font-size: 25px; }
  .tn-abody h2 { font-size: 20px; margin-top: 34px; }
  .tn-rel-grid { grid-template-columns: 1fr; gap: 22px; }
  .tn-atable table { font-size: 12.4px; }
  .tn-atable thead th, .tn-atable tbody td { padding: 9px 9px; }
}

@media (max-width: 620px) {
  .tn-abody { font-size: 13.8px; padding-top: 28px; }
  .tn-toc { padding: 16px 16px 14px; }
}

/* 手机：宽表改竖排，避免左右滑 */
@media (max-width: 620px) {
  .tn-atable.tn-stack { overflow-x: visible; }
  .tn-stack table, .tn-stack thead, .tn-stack tbody, .tn-stack tr, .tn-stack td { display: block; width: 100%; }
  .tn-stack thead { display: none; }
  .tn-stack tr { padding: 10px 0; border-bottom: 1px solid #e9ecee; }
  .tn-stack tbody tr:nth-child(even) td { background: transparent; }
  .tn-stack td { padding: 1px 0 !important; border: 0 !important; }
  .tn-stack td:first-child { font-weight: 600; color: #2f2f2f; }
  .tn-stack td:not(:first-child)::before { content: attr(data-l) " · "; color: #9aa3a7; font-size: 11px; }
}

/* ============================================================
   美容层 2026-10-29（只加细节，不改版式骨架）
   ============================================================ */

/* 1. 锚点跳转别被吸顶导航盖住 */
.tn-abody h2, .tn-abody h3 { scroll-margin-top: 104px; }

/* 2. 正文：小节之间给呼吸，段落下沿收紧，读起来不散 */
.tn-abody h2 { margin: 2.5em 0 0.75em; }
.tn-abody h3 { margin: 2em 0 0.6em; }
.tn-abody > p { margin: 0 0 1.05em; }
.tn-abody > p + .tn-atable { margin-top: 1.5em; }
.tn-abody .tn-atable + p { margin-top: 1.6em; }

/* 3. 表头更稳，行悬停给反馈，长表不刺眼 */
.tn-atable thead th { letter-spacing: 0.07em; }
.tn-atable tbody tr { transition: background 0.18s; }
.tn-atable tbody tr:hover td { background: #f2f7f9; }

/* 4. 正文内链：默认就有下划线，颜色只压一级 */
.tn-abody p a, .tn-abody li a { color: #0f6f8a; text-decoration-color: #a9cfdb; text-underline-offset: 3px; }
.tn-abody p a:hover, .tn-abody li a:hover { text-decoration-color: currentColor; }

/* 5. 首段（Quick Answer 之后）稍微放大，给读者一个进入点 */
.tn-abody h2:first-of-type + p { font-size: 1.06em; color: #2c3f46; }

/* 6. 提示块与算式块：圆角统一，左侧色条加粗一点 */
.tn-note { border-left-width: 3px; border-radius: 0 8px 8px 0; }
.tn-calc { border-radius: 10px; }

/* 7. 博客卡片：标题等高、缩略图悬停放大、卡片微抬 */
.tn-post h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.72em; }
.tn-post p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tn-post .tn-thumb { overflow: hidden; }
.tn-post .tn-thumb img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tn-post:hover .tn-thumb img { transform: scale(1.045); }
.tn-post .tn-date { box-shadow: 0 6px 14px rgba(15, 50, 62, 0.16); }

/* 8. 相关阅读卡：悬停轻抬 + 图片微放大 */
.tn-rel-card { transition: transform 0.25s, box-shadow 0.25s; }
.tn-rel-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23, 63, 53, 0.09); }
.tn-rel-card img { transition: transform 0.45s; }
.tn-rel-card:hover img { transform: scale(1.03); }

/* 9. 目录：当前阅读小节高亮（脚本驱动，没有脚本时无副作用） */
.tn-toc a.is-active { color: #0f7f9c; font-weight: 600; }
.tn-toc a { transition: color 0.15s; }

/* 10. 文章头图：渐变再压一点，标题永远读得清 */
.tn-ah::after { background: linear-gradient(180deg, rgba(9, 36, 44, 0.42), rgba(9, 36, 44, 0.72)); }

/* 11. 手机：卡片标题不用限高，避免截断半句 */
@media (max-width: 560px) {
  .tn-post h2 { min-height: 0; -webkit-line-clamp: 3; }
  .tn-abody h2 { margin-top: 2em; }
}