@font-face { font-family: "Proxima Nova"; src: url("../pic/ProximaNova-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../pic/ProximaNova-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Magistral"; src: url("../pic/Magistral-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Magistral"; src: url("../pic/Magistral-ExtraBoldItalic.woff") format("woff"); font-weight: 800; font-style: italic; font-display: swap; }

.blog-module {
  --blog-ink: #162136;
  --blog-green: #009241;
  --blog-green-2: #009846;
  --blog-soft: #efefef;
  --blog-line: #d6d9e0;
  --blog-muted: #687082;
  --blog-pale-green: #def0d9;
  color: var(--blog-ink);
  font-family: "Proxima Nova", Arial, sans-serif;
  padding: 22px 0 80px;
}

.blog-module *, .blog-module *::before, .blog-module *::after { box-sizing: border-box; }
.blog-module img { display: block; max-width: 100%; }
.blog-module a { color: inherit; }
.blog-wrap { width: min(1260px, calc(100% - 40px)); margin: 0 auto; }
.blog-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.blog-module .breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; color: #737b89; font-size: 14px; }
.blog-module .breadcrumbs a { color: #596273; text-decoration: none; }
.blog-module .breadcrumbs a:hover { color: var(--blog-green); }
.article-page .breadcrumbs { display: block; white-space: normal; overflow: visible; }
.article-page .breadcrumbs > * { display: inline; }
.article-page .breadcrumbs > :not(:last-child) { margin-right: 9px; }
.article-page .breadcrumbs > :last-child { min-width: 0; max-width: 100%; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }

.blog-module .blog-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; overflow: hidden; padding: 80px 100px; border-radius: 24px; background: #3d4a3e; }
.blog-module .blog-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .4; pointer-events: none; }
.blog-module .blog-hero h1 { position: relative; z-index: 1; margin: 0; color: #fff; font-family: "Magistral", "Arial Black", Arial, sans-serif; font-size: 42px; line-height: 1.2; text-align: center; text-transform: none; }
.blog-module .blog-search { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; width: 100%; max-width: 600px; padding: 12px 12px 12px 24px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.blog-module .blog-search input { flex: 1 1 0; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--blog-ink); font: inherit; font-size: 16px; }
.blog-module .blog-search input::placeholder { color: #6b7280; }
.blog-module .blog-search button { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: var(--blog-green); color: #fff; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.blog-module .blog-search button:hover { background: #007f38; transform: scale(1.05); }
.blog-search-icon { width: 18px; height: 18px; }

.blog-module .blog-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 48px; row-gap: 60px; align-items: start; margin-top: 60px; }
.blog-module .blog-tabbar { grid-column: 1 / -1; order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0; }
.blog-module .blog-sidebar { grid-column: 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; position: sticky; top: 24px; overflow-y: auto; }
.blog-module .blog-main { grid-column: 2; display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.blog-tab { display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .2s ease, filter .2s ease; }
.blog-tab:hover { transform: translateY(-1px); filter: brightness(.97); }
.blog-tab.is-active { border-color: currentColor; }
.blog-tab, .blog-tag { background: var(--blog-accent-soft, var(--blog-pale-green)); color: var(--blog-accent, #009846); }

.blog-module .blog-cats { padding: 0; border: 0; border-radius: 0; background: transparent; }
.blog-module .blog-cats h2, .blog-module .blog-popular h2 { margin: 0 0 24px; color: var(--blog-ink); font-family: "Proxima Nova", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 26px; letter-spacing: -.32px; text-transform: uppercase; }
.blog-module .blog-cats ul, .blog-module .blog-popular ul { margin: 0; padding: 0; list-style: none; }
.blog-module .blog-cats ul { display: flex; flex-direction: column; gap: 4px; }
.blog-cat { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--blog-soft); color: var(--blog-muted); font-size: 16px; line-height: 1.2; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.blog-cat.is-active { border-bottom-color: var(--blog-ink); background: rgba(0,0,0,.05); color: var(--blog-ink); }
.blog-cat:hover { color: var(--blog-green); }
.blog-cat-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.blog-cat:not(.is-active) .blog-cat-icon { color: var(--blog-accent, var(--blog-muted)); }
.blog-cat-label { flex: 1 1 auto; }
.blog-cat-count { flex: 0 0 auto; color: inherit; font-size: 13px; }
.blog-module .blog-popular { padding: 32px 24px; border: 1px solid #eaf1f9; border-radius: 16px; background: #fff; }
.blog-module .blog-popular h2 { margin: 0; }
.blog-popular-item { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 16px; border-top: 1px solid #eaf1f9; }
.blog-popular-item:last-child { border-bottom: 1px solid #eaf1f9; }
.blog-popular-link { color: var(--blog-ink); font-size: 18px; line-height: 1.2; text-decoration: none; }
.blog-popular-link:hover { color: var(--blog-green); }
.blog-popular .blog-meta { align-items: flex-start; }

.blog-featured { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--blog-line); border-radius: 16px; background: #fff; }
.blog-featured-media { flex: 1 1 0; align-self: stretch; min-width: 0; overflow: hidden; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-featured--lead .blog-featured-media img { object-position: 80% center; }
.blog-featured:hover .blog-featured-media img, .blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-featured-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.blog-featured--lead .blog-meta { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
.blog-module .blog-featured-title { margin: 0; font-family: "Magistral", "Magistral  Bold", "Arial Black", Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: none; }
.blog-module .blog-featured-title a { text-transform: none; }
.blog-featured-title a, .blog-card-title a { text-decoration: none; }
.blog-featured-title a:hover, .blog-card-title a:hover { color: var(--blog-green); }
.blog-featured-text { margin: 0; color: var(--blog-ink); font-size: 18px; line-height: 1.4; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; }
.blog-module [hidden] { display: none !important; }
.blog-card-media { display: block; overflow: hidden; aspect-ratio: 300 / 147; border-radius: 16px; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.blog-module .blog-card-title { margin: 0; font-family: "Proxima Nova", Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: none; }
.blog-module .blog-card-title a { text-transform: none; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.blog-tag { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: filter .2s ease; }
.blog-tag:hover { filter: brightness(.96); }
.blog-date { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--blog-muted); font-size: 13px; line-height: 1.2; }
.blog-sep { flex: 0 0 auto; width: 5px; height: 5px; background: currentColor; opacity: .55; transform: rotate(45deg); }
.blog-view-item { display: inline-flex; align-items: center; gap: 5px; }
.blog-view-icon { width: 15px; height: 15px; }

.blog-section { padding: 48px 32px; border-radius: 16px; background: var(--blog-accent-soft, var(--blog-pale-green)); }
.blog-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.blog-module .blog-section-title { grid-column: 1 / -1; margin: 0 0 8px; color: var(--blog-ink); font-family: "Proxima Nova", Arial, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; text-transform: none; }
.blog-section-grid .blog-featured { grid-column: 1 / -1; }
.blog-loadmore { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid var(--blog-green); border-radius: 8px; background: transparent; color: var(--blog-green); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px; cursor: pointer; }
.blog-loadmore svg { width: 14px; height: 14px; transition: transform .25s ease; }
.blog-loadmore:hover { background: var(--blog-green); color: #fff; }
.blog-loadmore.is-expanded svg { transform: rotate(180deg); }
.blog-empty { padding: 70px 30px; border-radius: 20px; background: #f5f7f9; text-align: center; }
.blog-empty h1, .blog-empty h2 { margin-top: 0; font-family: "Magistral", Arial, sans-serif; }
.blog-empty .btn { display: inline-flex; margin-top: 15px; padding: 12px 20px; border-radius: 9px; background: var(--blog-green); color: #fff; text-decoration: none; }
.blog-ad { display: flex; align-items: center; gap: 20px; overflow: hidden; padding: 12px 32px; border-radius: 16px; background: var(--blog-soft); }
.blog-ad-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; color: inherit; text-decoration: none; }
.blog-ad-label { color: var(--blog-ink); font-size: 13px; letter-spacing: 1px; line-height: 1; }
.blog-ad-title { margin: 0; font-family: "Magistral", Arial, sans-serif; font-size: 24px; line-height: 1.2; }
.blog-ad-text { margin: 0; font-size: 18px; line-height: 1.4; }
.blog-ad-img { flex: 0 0 auto; width: 136px; height: 136px; object-fit: contain; }
.blog-news { overflow: hidden; padding: 96px 0; border-radius: 16px; background: #f3f4f5; }
.blog-news-inner { display: flex; flex-direction: column; gap: 48px; padding: 0 32px; }
.blog-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.blog-news-eyebrow { margin: 0 0 8px; color: var(--blog-green-2); font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.blog-news-title { margin: 0; font-family: "Magistral", Arial, sans-serif; font-size: 36px; line-height: 1.2; }
.blog-news-nav { display: flex; gap: 16px; }
.blog-news-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--blog-line); border-radius: 50%; background: #fff; color: var(--blog-ink); cursor: pointer; }
.blog-news-arrow:hover { border-color: var(--blog-green); background: var(--blog-green); color: #fff; }
.blog-news-track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.blog-news-track::-webkit-scrollbar { display: none; }
.blog-news-card { flex: 0 0 350px; min-width: 350px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); scroll-snap-align: start; }
.blog-news-card-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.blog-news-card-title a { text-decoration: none; }
.blog-news-card-title a:hover { color: var(--blog-green); }
.blog-news-card-text { margin: 0; color: var(--blog-muted); font-size: 14px; line-height: 1.4; }
.blog-news-more { display: inline-flex; align-items: center; gap: 8px; padding-top: 8px; color: var(--blog-green) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.blog-news-all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border: 1px solid var(--blog-line); border-radius: 8px; background: #fff; color: var(--blog-green) !important; font-size: 16px; font-weight: 700; text-decoration: none; }
.blog-news-all:hover { border-color: var(--blog-green); }
.blog-module h1, .blog-module h2, .blog-module h3, .blog-module h4 { text-transform: none; }
.blog-tail { display: flex; flex-direction: column; gap: 64px; margin-top: 80px; }
.blog-offers h2 { margin: 0 0 32px; color: var(--blog-ink); font-family: "Magistral", Arial, sans-serif; font-size: 34px; line-height: 1.2; }
.blog-offers-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 20px; min-height: 622px; }
.blog-offer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; padding: 32px; border-radius: 16px; background: #f3f4f5; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.blog-offer:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22,33,54,.12); }
.blog-offer span { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.blog-offer strong { color: var(--blog-ink); font-family: "Magistral", Arial, sans-serif; font-size: 24px; line-height: 1.2; }
.blog-offer em { display: block; color: var(--blog-green); font-style: normal; }
.blog-offer small { color: var(--blog-ink); font-size: 18px; line-height: 1.4; }
.blog-offer img { flex: 0 0 130px; width: 130px; height: 130px; object-fit: contain; }
.blog-offer-feature { grid-row: 1 / span 3; flex-direction: column; }
.blog-offer-feature img { align-self: center; flex-basis: auto; width: min(100%,556px); height: 300px; }
.blog-reserve { overflow: hidden; }
.blog-reserve iframe { display: block; width: 100%; height: 1px; border: 0; }
.blog-article-exchange { display: grid; gap: 48px; margin-top: 64px; }
.blog-exchange-steps h2 { margin: 0 0 32px; font: 700 32px/1.2 "Magistral", Arial, sans-serif; text-transform: none; }
.blog-steps-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 20px; }
.blog-step { display: flex; flex-direction: column; min-width: 0; gap: 40px; padding: 20px; border: 1px solid var(--blog-line); border-radius: 16px; background: #fff; }
.blog-step-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blog-pale-green); color: #000; font: italic 800 24px/1 "Magistral", Arial, sans-serif; }
.blog-step > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 20px; }
.blog-step h3 { margin: 0; font: 700 20px/1.2 "Proxima Nova", Arial, sans-serif; text-transform: none; }
.blog-step p { margin: 0; color: var(--blog-muted); font-size: 16px; line-height: 1.6; }
.blog-step .btn { white-space: normal; text-align: center; }
.article-body .article-cta { display: flex; align-items: center; gap: 24px; margin: 48px 0; padding: 32px; border-radius: 24px; background: var(--blog-soft); }
.article-cta-copy { flex: 1 1 0; min-width: 0; }
.article-cta-tag { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--blog-ink); color: #fff; font-size: 14px; }
.blog-module .article-body .article-cta-title { margin: 32px 0; font: 700 28px/1.2 "Magistral", Arial, sans-serif; color: var(--blog-ink); text-transform: none; }
.article-cta-title span { color: var(--blog-green); }
.article-body .article-cta ul { margin: 0 0 32px; }
.article-body .article-cta li { margin-bottom: 16px; }
.article-body .article-cta > img { flex: 0 1 38%; width: 38%; height: auto; margin: 0; border-radius: 0; }
.article-cta .btn { white-space: normal; text-align: center; }
.blog-step .btn, .article-cta .btn { display: inline-block; max-width: 100%; padding: 16px 20px; border-radius: 8px; background: var(--blog-green); color: #fff; font: 700 18px/1.2 "Proxima Nova", Arial, sans-serif; text-decoration: none; }
.blog-step .btn:hover, .article-cta .btn:hover { background: #087b3d; color: #fff; }

.article-hero { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 40px; }
.article-hero-head { display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 1000px; text-align: center; }
.blog-module .article-hero-title { margin: 0; color: var(--blog-ink); font-family: "Magistral", "Magistral  Bold", "Arial Black", Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; text-transform: none; }
.article-hero-lead { margin: 0; color: var(--blog-ink); font-size: 20px; line-height: 1.2; }
.article-hero-media { width: 100%; }
.article-hero-media img { width: 100%; height: 382px; object-fit: cover; border: 1px solid var(--blog-soft); border-radius: 24px; }
.article-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; width: 100%; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.article-meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--blog-muted); font-size: 14px; line-height: 1.2; }
.article-meta-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.article-share { position: relative; margin-left: auto; }
.article-share > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; list-style: none; border-radius: 8px; color: var(--blog-muted); font-size: 14px; cursor: pointer; }
.article-share > summary::-webkit-details-marker { display: none; }
.article-share-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.article-share-svg { width: 20px; height: 20px; color: var(--blog-ink); }
.article-share[open] .share-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(22,33,54,.16); }
.article-share:not([open]) > .share-list { display: none; }
.share-list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.share-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: var(--blog-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.share-btn:hover { border-color: var(--blog-green); background: var(--blog-green); color: #fff; }
.article-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); column-gap: 80px; align-items: start; margin-top: 60px; }
.article-aside { position: sticky; top: 24px; }
.article-toc { padding: 32px; border-radius: 16px; background: var(--blog-soft); }
.blog-module .article-toc-title { margin: 0 0 24px; color: var(--blog-ink); font-family: "Proxima Nova", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; text-transform: none; }
.article-toc-list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.blog-module .article-toc-list > li { margin: 0; padding: 0; list-style: none; }
.blog-module .article-toc-list > li::before { display: none; content: none; }
.article-toc-list a { display: flex; gap: 12px; align-items: flex-start; color: var(--blog-muted); font-size: 16px; font-weight: 400; line-height: 1.2; text-decoration: none; transition: color .2s ease; }
.article-toc-list a::before { content: ""; flex: 0 0 auto; width: 0; height: 0; margin-top: 2px; border-left: 8px solid var(--blog-green-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.article-toc-list a:hover { color: var(--blog-green); }
.article-toc-list a.is-active { color: var(--blog-ink); font-weight: 700; }
.article-body { min-width: 0; width: 100%; max-width: 100%; overflow-wrap: break-word; color: var(--blog-muted); font-size: 18px; line-height: 1.6; }
.blog-module .article-body p, .blog-module .article-body li { font-family: "Proxima Nova", Arial, sans-serif; }
.blog-module .article-body .article-intro { font-size: inherit; line-height: inherit; }
.blog-module .article-body h2, .blog-module .article-body h3, .blog-module .article-body h4 { color: var(--blog-ink); line-height: 1.2; text-transform: none; }
.blog-module .article-body h2 { margin: 56px 0 24px; font-family: "Magistral", "Magistral  Bold", "Arial Black", Arial, sans-serif; font-size: 28px; font-weight: 700; }
.blog-module .article-body h2:first-child { margin-top: 0; }
.blog-module .article-body h3 { margin: 36px 0 18px; font-family: "Magistral", "Magistral  Bold", "Arial Black", Arial, sans-serif; font-size: 22px; font-weight: 700; }
.blog-module .article-body h4 { font-family: "Proxima Nova", Arial, sans-serif; font-weight: 700; }
.article-body p { margin: 0 0 20px; }
.article-body a:not(.btn) { color: var(--blog-green); text-decoration: underline; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding: 0; }
.article-body ul { list-style: none; }
.article-body li { position: relative; margin-bottom: 12px; padding-left: 28px; }
.blog-module .article-body li { list-style: none; }
.blog-module .article-body li::marker { content: ""; }
.article-body ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 0; height: 0; border-left: 8px solid var(--blog-green-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.article-body ol { counter-reset: article-ol; list-style: none; }
.article-body ol > li { counter-increment: article-ol; }
.article-body ol > li::before { content: counter(article-ol) "."; position: absolute; left: 0; top: 0; color: var(--blog-ink); font-weight: 700; }
.article-body blockquote { margin: 30px 0; padding: 24px 32px; border-left: 4px solid var(--blog-green); border-radius: 0 16px 16px 0; background: var(--blog-soft); color: var(--blog-ink); font-size: 20px; line-height: 1.5; }
.article-body img { width: 100%; height: auto; margin: 28px auto; border-radius: 24px; }
.article-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 36px 0; }
.article-gallery-item { display: block; min-width: 0; overflow: hidden; border-radius: 18px; }
.article-gallery .article-gallery-item img { display: block; width: 100%; height: 240px; margin: 0; border-radius: 0; object-fit: cover; transition: transform .2s ease; }
.article-gallery-item:hover img { transform: scale(1.025); }
.article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.article-body th, .article-body td { padding: 12px 16px; border: 1px solid var(--blog-line); text-align: left; line-height: 1.4; }
.article-body th { background: var(--blog-soft); color: var(--blog-ink); }
.article-author { display: flex; align-items: center; gap: 32px; margin-top: 56px; padding: 32px; border: 1px solid var(--blog-line); border-radius: 16px; background: var(--blog-soft); }
.article-author-avatar { flex: 0 0 auto; width: 100px !important; height: 100px !important; margin: 0 !important; border-radius: 50% !important; object-fit: cover; }
.article-author-name { margin: 0 !important; color: var(--blog-ink); font-family: "Magistral", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; }
.article-author-role { margin: 6px 0 0 !important; color: var(--blog-muted); font-size: 18px; line-height: 1.34; }
.article-author-info { min-width: 0; }
.article-author-caption { margin: 0 0 8px !important; font-size: 14px; }
.article-social { margin-top: 36px; padding: 24px 0 30px; border-top: 1px solid var(--blog-line); border-bottom: 1px solid var(--blog-line); }
.article-social p { margin: 0 0 18px; color: var(--blog-muted); font-size: 16px; }
.article-social-links { display: flex; gap: 16px; }
.article-social-links .share-btn img { width: 30px; height: auto; max-height: 28px; margin: 0; border-radius: 0; object-fit: contain; }
.article-social-links .share-btn svg { width: 20px; height: 20px; }
.article-social-links .share-btn.is-copied { border-color: var(--blog-green); color: var(--blog-green); }
.blog-related { margin-top: 48px; }
.blog-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.blog-related-head h2 { margin: 0; font-family: "Magistral", "Magistral  Bold", "Arial Black", Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; }
.blog-related-track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.blog-related-track::-webkit-scrollbar { display: none; }
.blog-related-track > .blog-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 300px; scroll-snap-align: start; }
.blog-related-track { align-items: stretch; }
.blog-related .blog-card { height: auto; align-self: stretch; }
.blog-related .blog-card-body { flex: 1 1 auto; }
.blog-related .blog-tags { margin-top: auto; }

.blog-module:not(.article-page) { padding-bottom: 24px; }

@media (min-width: 961px) {
  .article-page .blog-related { margin-top: 24px; }
}

@media (max-width: 960px) {
  .blog-offers-grid { min-height: 0; }
  .blog-offer { padding: 22px; }
  .blog-offer img { flex-basis: 90px; width: 90px; height: 90px; }
  .blog-steps-grid { grid-template-columns: minmax(0,1fr); }
  .blog-offer-feature img { flex-basis: auto; width: min(100%,556px); height: 260px; }
  .blog-module .blog-grid { display: flex; flex-direction: column; align-items: stretch; gap: 48px; margin-top: 40px; }
  .blog-module .blog-sidebar, .blog-module .blog-main { display: contents; }
  .blog-module .blog-cats { order: 1; }
  .blog-module .blog-tabbar { order: 2; }
  .blog-module .blog-featured--lead { order: 3; }
  .blog-module .blog-popular { order: 4; }
  .blog-module .blog-section { order: 5; }
  .blog-module .blog-ad { order: 6; }
  .blog-module .blog-news { order: 7; }
  .blog-module .blog-cats h2 { display: none; }
  .blog-module .blog-cats ul { flex-direction: row; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--blog-soft); scrollbar-width: none; }
  .blog-module .blog-cats ul::-webkit-scrollbar { display: none; }
  .blog-cat { flex: 0 0 auto; padding: 12px 16px; border-bottom: 2px solid transparent; white-space: nowrap; }
  .blog-cat.is-active { border-bottom-color: var(--blog-ink); background: transparent; }
  .article-layout { display: flex; flex-direction: column; align-items: stretch; gap: 48px; margin-top: 40px; }
  .article-aside { position: static; width: 100%; min-width: 0; max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
  body.blog-page .header1_eye .bvi-open { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; font-size: 0; line-height: 0; }
  body.blog-page .header1_eye .header1_eye_icon { flex: 0 0 38px; }
  body.blog-page .footer_inform a, body.blog-page .footer_inform span { white-space: normal; overflow-wrap: anywhere; }
  .blog-tail { gap: 48px; margin-top: 60px; }
  .blog-offers h2 { font-size: 28px; }
  .blog-offers-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .blog-offer-feature { grid-row: auto; }
  .blog-offer-feature img { height: 210px; }
  .blog-module { padding-top: 14px; }
  .blog-module .breadcrumbs { flex-wrap: wrap; white-space: normal; overflow: visible; }
  .blog-module .breadcrumbs > * { flex-shrink: 0; }
  .blog-module .breadcrumbs > :last-child { flex-shrink: 1; min-width: 0; max-width: 100%; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
  .blog-module .breadcrumbs .breadcrumb-filter { display: none; }
  .blog-wrap { width: min(100% - 24px,1260px); }
  .blog-module .blog-hero { gap: 32px; padding: 48px 24px; border-radius: 16px; }
  .blog-module .blog-hero h1 { font-size: 30px; }
  .blog-module .blog-grid { gap: 40px; }
  .blog-module .blog-tabbar { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .blog-module .blog-tabbar::-webkit-scrollbar { display: none; }
  .blog-module .blog-tabbar .blog-tab { flex: 0 0 auto; }
  .blog-featured { flex-direction: column; align-items: stretch; }
  .blog-featured-media { order: 2; flex: none; align-self: auto; aspect-ratio: 16 / 9; }
  .blog-featured-body { flex: none; padding: 24px; }
  .blog-section { padding: 24px 16px; }
  .blog-ad { padding: 20px; }
  .blog-ad-img { width: 100px; height: 100px; }
  .blog-news { padding: 48px 0; }
  .blog-news-inner { gap: 32px; padding: 0 16px; }
  .blog-news-title { font-size: 28px; }
  .blog-news-card { flex-basis: 300px; min-width: 300px; }
  .article-hero { gap: 20px; padding-top: 24px; }
  .article-hero-head { gap: 20px; }
  .blog-module .article-hero-title { font-size: 28px; }
  .article-hero-lead { font-size: 16px; }
  .article-hero-media img { height: 300px; border-radius: 16px; }
  .article-share { display: none; }
  .article-hero-meta { flex-wrap: nowrap; gap: 10px; }
  .article-hero-meta .blog-tags { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
  .article-hero-meta .blog-tag { display: block; min-width: 0; padding: 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .article-meta { flex-wrap: nowrap; flex: 0 0 auto; gap: 10px; white-space: nowrap; }
  .article-meta-item { gap: 5px; font-size: 12px; }
  .article-meta-icon { width: 14px; height: 14px; }
  .blog-article-exchange { margin-top: 48px; gap: 32px; }
  .blog-step { padding: 24px; }
  .blog-exchange-steps h2 { font-size: 28px; }
  .article-body .article-cta { flex-direction: column; align-items: stretch; padding: 24px; gap: 24px; }
  .blog-module .article-body .article-cta-title { font-size: 24px; margin: 24px 0; }
  .article-body .article-cta > img { flex-basis: auto; width: min(100%,280px); align-self: center; }
  .article-body { font-size: 16px; }
  .article-gallery { grid-template-columns: 1fr; gap: 14px; }
  .article-gallery .article-gallery-item img { height: 220px; }
  .article-author { gap: 20px; padding: 24px; }
  .article-author-role { font-size: 16px; }
  .blog-related { margin-top: 40px; }
  .article-author { gap: 16px; padding: 20px; }
  .article-author-avatar { width: 72px !important; height: 72px !important; }
  .blog-related-track { gap: 16px; }
  .blog-related-track > .blog-card { flex: 0 0 min(78vw,320px); min-width: 0; }
}

@media (max-width: 480px) {
  .blog-section-grid { grid-template-columns: 1fr; }
  .blog-module .blog-search { gap: 8px; padding-left: 16px; }
}

@media (max-width: 360px) {
  .blog-module .blog-hero { padding: 40px 16px; }
  .blog-module .blog-hero h1 { font-size: 26px; }
  .blog-section-title { font-size: 24px; }
  .blog-module .article-hero-title { font-size: 24px; }
  .article-hero-media img { height: 240px; }
}
