/*
Theme Name: VehicleNest
Theme URI: https://vehiclenest.com/
Author: Intelligent Solutions Tech
Description: VehicleNest's own theme, rebuilt from scratch in the style of the original vehiclenest.com. Classic PHP templates, no page builder, no required plugins.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: vehiclenest
*/

:root {
  --font-heading: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Old vehiclenest.com look (SmartMag, Mag Studio demo) */
  --sm-accent: #de4333;
  --sm-accent-hover: #c5301f;
  --sm-label: #0a0a0a;
  --sm-rule: #152b4b;
  --sm-top: #0a0505;
  --sm-bg: #ffffff;
  --sm-bg-alt: #f6f6f6;
  --sm-card: #ffffff;
  --sm-header: #ffffff;
  --sm-text: #161616;
  --sm-body: #3b3b3b;
  --sm-muted: #707070;
  --sm-border: #e6e6e6;
  --sm-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}

html.sm-dark {
  --sm-bg: #151516;
  --sm-bg-alt: #1e1e20;
  --sm-card: #1e1e20;
  --sm-header: #151516;
  --sm-text: #f1f1f1;
  --sm-body: #cfcfcf;
  --sm-muted: #9b9b9b;
  --sm-border: #2e2e31;
  --sm-rule: #5b6f92;
  --sm-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Site frame ---------- */
.sm-site { background: var(--sm-bg); color: var(--sm-body); font-family: var(--font-body); }
.sm-wrap { width: 100%; max-width: 1192px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.sm-muted { color: var(--sm-muted); }
.sm-admin { background: #fff; color: #161616; }
.sm-spinner { border-color: var(--sm-border); border-top-color: var(--sm-accent); }
.sm-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }

.sm-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--sm-accent); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; padding: 0 18px; min-height: 40px; border-radius: 4px; transition: background 0.2s; white-space: nowrap; }
.sm-btn:hover { background: var(--sm-accent-hover); color: #fff; }
.sm-btn:disabled { opacity: 0.6; }
.sm-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--sm-text); border-radius: 4px; transition: color 0.2s; }
.sm-icon-btn:hover { color: var(--sm-accent); }

/* ---------- Top bar ---------- */
.sm-topbar { display: none; background: var(--sm-top); color: #d9d9d9; height: 38px; font-size: 12px; }
@media (min-width: 768px) { .sm-topbar { display: block; } }
.sm-topbar-date { font-family: var(--font-heading); font-weight: 500; letter-spacing: 0.01em; }
.sm-topbar-link { color: #d9d9d9; font-family: var(--font-heading); font-weight: 500; }
.sm-topbar-link:hover { color: #fff; }
.sm-topbar .sm-social-icon { color: #d9d9d9; width: 28px; height: 28px; }
.sm-topbar .sm-social-icon:hover { color: #fff; }

/* ---------- Social ---------- */
.sm-social-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--sm-text); border-radius: 50%; transition: color 0.2s; }
.sm-social-icon:hover { color: var(--sm-accent); }
.sm-social-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sm-social-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; border-radius: 4px; padding: 14px 6px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; transition: filter 0.2s; }
.sm-social-tile:hover { filter: brightness(1.1); color: #fff; }
.sm-bg-facebook { background: #1a5dc8; }
.sm-bg-instagram { background: #c13584; }
.sm-bg-pinterest { background: #d4252b; }
.sm-bg-x { background: #111111; }
.sm-bg-linkedin { background: #0b66c2; }
.sm-bg-email { background: #505050; }
.sm-bg-copy { background: #8a8a8a; }

/* ---------- Category label, meta ---------- */
.sm-cat { display: inline-block; background: var(--sm-label); color: #fff; font-family: var(--font-heading); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 8px; border-radius: 3px; transition: background 0.2s; }
.sm-cat:hover { background: var(--sm-accent); color: #fff; }
.sm-cat-on-img { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.sm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--sm-muted); margin-top: 8px; }
.sm-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; margin-right: 10px; vertical-align: middle; }
.sm-meta-author { color: var(--sm-text); font-weight: 600; }
.sm-meta-light, .sm-meta-light .sm-meta-author { color: rgba(255, 255, 255, 0.85); }

/* ---------- Section heading (block head style "c") ---------- */
.sm-section { margin-top: 48px; }
.sm-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--sm-rule); margin-bottom: 24px; }
.sm-block-title { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--sm-text); padding-bottom: 10px; }
.sm-block-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; background: var(--sm-accent); }
.sm-hl { color: var(--sm-accent); }
.sm-view-all { font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-muted); padding-bottom: 10px; }
.sm-view-all:hover { color: var(--sm-accent); }

/* ---------- Thumbnails ---------- */
.sm-thumb { position: relative; overflow: hidden; border-radius: 6px; background: var(--sm-bg-alt); width: 100%; }
.sm-thumb img { transition: transform 0.4s ease; }
a:hover .sm-thumb img, .sm-ov:hover .sm-thumb img { transform: scale(1.04); }
.sm-ph { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px; background: linear-gradient(135deg, #1f3354 0%, #152b4b 45%, #0a0a0a 100%); }
.sm-ph::before { content: ""; position: absolute; right: -20%; bottom: 18%; width: 90%; height: 10px; background: var(--sm-accent); transform: rotate(-18deg); opacity: 0.85; }
.sm-ph span { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

/* Overlay card */
.sm-ov { position: relative; border-radius: 6px; overflow: hidden; background: #111; }
.sm-ov-link { display: block; height: 100%; }
.sm-ov-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82) 100%); pointer-events: none; border-radius: 6px; }
.sm-ov-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 2; pointer-events: none; }
.sm-ov-content a { pointer-events: auto; }
.sm-ov-title { font-family: var(--font-heading); font-weight: 600; color: #fff; line-height: 1.3; margin-top: 10px; font-size: 19px; }
.sm-ov-title a { color: #fff; }
.sm-ov-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sm-ov-lg .sm-ov-title { font-size: 26px; line-height: 1.25; }
.sm-ov-lg .sm-ov-content { padding: 26px; }
.sm-ov-sm .sm-ov-title { font-size: 16px; }
.sm-ov-sm .sm-ov-content { padding: 14px; }
.sm-fill, .sm-fill .sm-ov-link, .sm-fill .sm-thumb { height: 100%; }
@media (min-width: 1024px) { .sm-ov-lg .sm-ov-title { font-size: 32px; } }

/* Featured grid (grid-b): one large post and four smaller ones */
.sm-featgrid { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; grid-template-rows: 320px 190px 190px; }
.sm-featgrid .sm-fg-0 { grid-column: span 2; }
@media (min-width: 768px) {
  .sm-featgrid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; }
  .sm-featgrid .sm-fg-0 { grid-column: auto; grid-row: span 2; }
}
@media (max-width: 479px) {
  .sm-featgrid { grid-template-rows: 280px 170px 170px; }
  .sm-featgrid .sm-ov-sm .sm-ov-title { font-size: 14px; }
  .sm-featgrid .sm-ov-sm .sm-ov-content { padding: 10px; }
  .sm-featgrid .sm-ov-sm .sm-meta { display: none; }
}

/* Grid card */
.sm-grid-card .sm-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.32; color: var(--sm-text); margin-top: 14px; }
.sm-card-title a, .sm-list-title a, .sm-small-title a { color: var(--sm-text); transition: color 0.2s; }
.sm-card-title a:hover, .sm-list-title a:hover, .sm-small-title a:hover { color: var(--sm-accent); }
.sm-excerpt { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sm-body); }

/* List card */
.sm-list-card { display: grid; gap: 16px; }
.sm-list-title { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.3; margin-top: 10px; }
@media (min-width: 640px) { .sm-list-card { grid-template-columns: 42% 1fr; gap: 24px; align-items: start; } }

/* Small card */
.sm-small-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.sm-small-title { font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.35; }
.sm-small-card .sm-meta { margin-top: 4px; font-size: 12px; }
.sm-small-card .sm-ph span { display: none; }

/* Main + sidebar */
.sm-main-side { display: grid; gap: 48px; }
@media (min-width: 1024px) { .sm-main-side { grid-template-columns: minmax(0, 1fr) 336px; gap: 44px; } }

/* Focus grid */
.sm-focus-grid { display: grid; gap: 28px; }
.sm-focus-side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.sm-focus-side .sm-card-title { font-size: 16px; }
.sm-focus-main .sm-card-title { font-size: 24px; }
@media (min-width: 1024px) { .sm-focus-grid { grid-template-columns: 1.1fr 1fr; } }

/* Carousel */
.sm-carousel { position: relative; }
.sm-track { --c: 3; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--c) - 1) * 20px) / var(--c)); column-gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sm-track::-webkit-scrollbar { display: none; }
.sm-track[data-cols="4"] { --c: 4; }
.sm-slide { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1023px) { .sm-track, .sm-track[data-cols="4"] { --c: 2; } }
@media (max-width: 639px) { .sm-track, .sm-track[data-cols="4"] { grid-auto-columns: 80%; column-gap: 14px; } }
.sm-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--sm-card); color: var(--sm-text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; z-index: 5; transition: color 0.2s, background 0.2s; }
.sm-arrow:hover { background: var(--sm-accent); color: #fff; }
.sm-arrow-prev { left: 8px; }
.sm-arrow-next { right: 8px; }
@media (min-width: 1240px) { .sm-arrow-prev { left: -20px; } .sm-arrow-next { right: -20px; } }

/* Newsletter */
.sm-newsletter { background: var(--sm-bg-alt); border: 1px solid var(--sm-border); border-top: 3px solid var(--sm-accent); border-radius: 6px; padding: 36px 24px; text-align: center; }
.sm-newsletter-title { font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--sm-text); }
.sm-newsletter-text { margin: 8px auto 20px; max-width: 520px; color: var(--sm-body); font-size: 15px; }
.sm-newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; margin: 0 auto; }
.sm-newsletter-form input { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--sm-border); border-radius: 4px; background: var(--sm-bg); color: var(--sm-text); outline: none; }
.sm-newsletter-form input:focus { border-color: var(--sm-accent); }
.sm-newsletter-form .sm-btn { min-height: 44px; flex: 0 0 auto; }
.sm-newsletter-note { margin-top: 10px; font-size: 12px; color: var(--sm-muted); }

/* ---------- Archives ---------- */
.sm-archive-head { padding: 26px 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--sm-border); }
.sm-archive-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--sm-text); margin-top: 10px; }
.sm-archive-label { font-size: 15px; font-weight: 500; color: var(--sm-muted); }
.sm-archive-desc { margin-top: 10px; max-width: 720px; color: var(--sm-body); }
.sm-archive-grid { display: grid; gap: 36px 28px; }
@media (min-width: 640px) { .sm-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sm-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sm-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--sm-border); border-radius: 4px; font-size: 13px; font-family: var(--font-heading); font-weight: 500; color: var(--sm-text); background: var(--sm-card); }
.sm-chip:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 44px; }
.sm-page { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sm-border); border-radius: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--sm-text); }
.sm-page:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-page.is-active { background: var(--sm-accent); border-color: var(--sm-accent); color: #fff; }
.sm-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sm-muted); }
.sm-breadcrumbs a { color: var(--sm-muted); }
.sm-breadcrumbs a:hover { color: var(--sm-accent); }
.sm-bc-current { color: var(--sm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.sm-404 { font-family: var(--font-heading); font-weight: 800; font-size: 120px; line-height: 1; color: var(--sm-accent); }

/* ---------- Single post ---------- */
.sm-single { max-width: 860px; margin: 0 auto; padding-top: 26px; }
.sm-single-head { margin-top: 22px; }
.sm-single-title { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1.22; color: var(--sm-text); letter-spacing: -0.005em; }
@media (min-width: 768px) { .sm-single-title { font-size: 40px; } }
.sm-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; font-size: 14px; color: var(--sm-muted); }
.sm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sm-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.sm-avatar-lg { width: 64px; height: 64px; font-size: 26px; }
.sm-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; }
.sm-share-label { font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-text); margin-right: 6px; }
.sm-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; height: 36px; padding: 0 12px; border-radius: 4px; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13px; transition: filter 0.2s; }
.sm-share-btn:hover { filter: brightness(1.12); color: #fff; }
.sm-single-featured { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; margin-top: 24px; background: var(--sm-bg-alt); }
.sm-single-body { margin-top: 30px; }

.sm-toc { border: 1px solid var(--sm-border); border-radius: 6px; background: var(--sm-bg-alt); padding: 14px 20px; margin-bottom: 28px; }
.sm-toc summary { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--sm-text); cursor: pointer; }
.sm-toc ol { list-style: decimal; padding-left: 22px; margin-top: 10px; }
.sm-toc li { margin: 6px 0; font-size: 15px; }
.sm-toc a { color: var(--sm-body); }
.sm-toc a:hover { color: var(--sm-accent); }

.sm-faq-title { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--sm-text); margin-bottom: 16px; scroll-margin-top: 6rem; }
.sm-faq { border-top: 1px solid var(--sm-border); }
.sm-faq-item { border-bottom: 1px solid var(--sm-border); }
.sm-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; }
.sm-faq-q { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--sm-text); }
.sm-faq-item[open] .sm-faq-q { color: var(--sm-accent); }
.sm-faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 4px; background: var(--sm-bg-alt); color: var(--sm-text); display: inline-flex; align-items: center; justify-content: center; }
.sm-faq-a { padding: 0 0 18px; font-size: 16px; line-height: 1.7; color: var(--sm-body); }
.sm-faq-a p + p { margin-top: 10px; }

.sm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 32px; }
.sm-tags-label { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--sm-text); margin-right: 4px; }
.sm-author-box { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 22px; border: 1px solid var(--sm-border); border-radius: 6px; background: var(--sm-bg-alt); }
.sm-author-kicker { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-muted); }
.sm-author-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--sm-text); margin-top: 2px; }
.sm-author-name:hover, .sm-author-more:hover { color: var(--sm-accent); }
.sm-author-more { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--sm-body); }

/* ---------- Article body ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .vn-faq-plus { display: inline-flex; }
details > summary .vn-faq-minus { display: none; }
details[open] > summary .vn-faq-plus { display: none; }
details[open] > summary .vn-faq-minus { display: inline-flex; }

.prose-content { font-size: 17px; line-height: 1.75; color: var(--sm-body); overflow-wrap: break-word; }
.prose-content h1, .prose-content h2, .prose-content h3, .prose-content h4 { font-family: var(--font-heading); color: var(--sm-text); line-height: 1.3; scroll-margin-top: 6rem; }
.prose-content h1 { font-size: 30px; font-weight: 700; margin: 1.6em 0 0.6em; }
.prose-content h2 { font-size: 26px; font-weight: 700; margin: 1.7em 0 0.6em; }
.prose-content h3 { font-size: 21px; font-weight: 600; margin: 1.4em 0 0.5em; }
.prose-content h4 { font-size: 18px; font-weight: 600; margin: 1.2em 0 0.4em; }
.prose-content p { margin: 0 0 1.15em; }
.prose-content strong { color: var(--sm-text); font-weight: 600; }
.prose-content ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1.2em; }
.prose-content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1.2em; }
.prose-content li { margin: 0.4em 0; }
.prose-content li::marker { color: var(--sm-accent); }
.prose-content a { color: var(--sm-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose-content a:hover { color: var(--sm-accent-hover); }
.prose-content blockquote { border-left: 4px solid var(--sm-accent); background: var(--sm-bg-alt); padding: 14px 20px; margin: 0 0 1.2em; color: var(--sm-text); font-style: italic; border-radius: 0 6px 6px 0; }
.prose-content code { background: var(--sm-bg-alt); padding: 0.15em 0.4em; border-radius: 3px; font-family: var(--font-mono); font-size: 0.88em; color: var(--sm-text); }
.prose-content pre { background: #161616; color: #f1f1f1; padding: 1.1em; border-radius: 6px; overflow-x: auto; margin: 0 0 1.2em; }
.prose-content pre code { background: none; padding: 0; color: inherit; }
.prose-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.2em 0; }
.prose-content hr { border: 0; border-top: 1px solid var(--sm-border); margin: 2em 0; }
.prose-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.prose-content thead { background: var(--sm-label); }
.prose-content thead th { color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 600; padding: 11px 14px; text-align: left; border: 1px solid var(--sm-label); }
.prose-content tbody td { padding: 11px 14px; border: 1px solid var(--sm-border); vertical-align: top; }
.prose-content tbody tr:nth-child(even) { background: var(--sm-bg-alt); }

/* ---------- Footer ---------- */
.sm-footer { background: var(--sm-top); color: #b9b9b9; margin-top: auto; font-size: 14px; }
.sm-footer-upper { display: grid; gap: 36px; padding-top: 56px; padding-bottom: 44px; }
@media (min-width: 768px) { .sm-footer-upper { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-footer-about { grid-column: span 3; } }
@media (min-width: 1024px) { .sm-footer-upper { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .sm-footer-about { grid-column: auto; } }
.sm-footer-about p { line-height: 1.7; max-width: 380px; }
.sm-footer-head { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 16px; }
.sm-footer-link { color: #b9b9b9; transition: color 0.2s; }
.sm-footer-link:hover { color: #fff; }
.sm-footer .sm-social-icon { color: #d9d9d9; background: rgba(255, 255, 255, 0.07); margin-right: 4px; }
.sm-footer .sm-social-icon:hover { color: #fff; background: var(--sm-accent); }
.sm-footer-lower { border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; }
.sm-footer-lower a { color: #b9b9b9; }
.sm-footer-lower a:hover { color: #fff; }


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--sm-bg); color: var(--sm-body); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video { vertical-align: middle; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
.sm-main { display: block; flex: 1 0 auto; }

/* ---------- Header ---------- */
.sm-header { position: sticky; top: 0; z-index: 50; background: var(--sm-header); border-bottom: 1px solid var(--sm-border); box-shadow: var(--sm-shadow); }
.admin-bar .sm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sm-header { top: 0; } }
.sm-header-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.sm-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.sm-brand .vn-logo { height: 42px; width: auto; }
.sm-header-actions { display: flex; align-items: center; gap: 4px; position: relative; }
.sm-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--sm-text); transition: color .2s; }
.sm-icon-btn:hover { color: var(--sm-accent); }
.sm-only-desktop { display: none !important; }
.sm-nav { display: none; }
@media (max-width: 1023px) {
  .sm-header-main > .sm-only-mobile { order: 0; }
  .sm-brand { order: 1; position: absolute; left: 50%; transform: translateX(-50%); }
  .sm-header-main { position: relative; }
  .sm-header-actions { order: 2; margin-left: auto; }
}
@media (min-width: 1024px) {
  .sm-header-main { height: 76px; gap: 24px; }
  .sm-brand .vn-logo { height: 56px; }
  .sm-only-desktop { display: inline-flex !important; }
  .sm-only-mobile { display: none !important; }
  .sm-nav { display: flex; flex: 1; justify-content: center; align-self: stretch; }
}
.sm-nav > .menu { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.sm-nav > .menu > li { position: relative; display: flex; }
.sm-nav > .menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--sm-text); position: relative; transition: color .2s; }
.sm-nav > .menu > li > a:hover, .sm-nav > .menu > li.current-menu-item > a, .sm-nav > .menu > li.current-menu-ancestor > a, .sm-nav > .menu > li.current-menu-parent > a { color: var(--sm-accent); }
.sm-nav > .menu > li.current-menu-item > a::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px; height: 2px; background: var(--sm-accent); }
.sm-nav > .menu > li.menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 2px; }
.sm-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; list-style: none; margin: 0; padding: 8px 0; background: var(--sm-card); border-top: 2px solid var(--sm-accent); box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 60; }
.sm-nav li:hover > .sub-menu, .sm-nav li:focus-within > .sub-menu { display: block; }
.sm-nav .sub-menu a { display: block; padding: 9px 20px; font-family: var(--font-heading); font-weight: 500; font-size: 14px; color: var(--sm-text); }
.sm-nav .sub-menu a:hover, .sm-nav .sub-menu .current-menu-item > a { color: var(--sm-accent); background: var(--sm-bg-alt); }

.vn-logo { display: inline-block; height: var(--vn-logo-h, 56px); width: auto; }
.vn-logo-dark { display: none; }
html.sm-dark .vn-logo-light { display: none; }
html.sm-dark .vn-logo-dark { display: inline-block; }
.vn-i-sun { display: none; }
html.sm-dark .vn-i-sun { display: inline; }
html.sm-dark .vn-i-moon { display: none; }
.vn-logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; color: var(--sm-text); }
.vn-logo-text span { color: var(--sm-accent); }
.sm-footer .vn-logo-text { color: #fff; }

.sm-search-panel { position: absolute; top: calc(100% + 14px); right: 0; width: min(360px, calc(100vw - 32px)); background: var(--sm-card); border: 1px solid var(--sm-border); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px; z-index: 60; border-radius: 4px; }
.sm-search-panel[hidden] { display: none; }
.sm-search-form { display: flex; align-items: center; border: 1px solid var(--sm-border); border-radius: 4px; background: var(--sm-bg); }
.sm-search-form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 12px; color: var(--sm-text); outline: none; font-size: 15px; }
.sm-search-form input::placeholder { color: var(--sm-muted); }
.sm-search-form button { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--sm-accent); border-radius: 0 3px 3px 0; }
.sm-search-inline { max-width: 560px; margin-top: 18px; }

/* Mobile drawer */
.sm-drawer-wrap { position: fixed; inset: 0; z-index: 80; }
.sm-drawer-wrap[hidden] { display: none; }
.sm-drawer-backdrop { position: absolute; inset: 0; width: 100%; background: rgba(0,0,0,.55); }
.sm-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: var(--sm-card); padding: 18px 20px 28px; overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
.sm-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sm-drawer-top .vn-logo { height: 40px; width: auto; }
.sm-drawer-nav .menu { list-style: none; margin: 0; padding: 0; }
.sm-drawer-nav .menu > li { position: relative; border-bottom: 1px solid var(--sm-border); }
.sm-drawer-nav .menu > li > a { display: block; padding: 13px 40px 13px 0; font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--sm-text); }
.sm-drawer-nav a:hover, .sm-drawer-nav .current-menu-item > a { color: var(--sm-accent); }
.sm-drawer-nav .sub-menu { display: none; list-style: none; margin: 0; padding: 0 0 8px 12px; }
.sm-drawer-nav li.is-open > .sub-menu { display: block; }
.sm-drawer-nav .sub-menu a { display: block; padding: 8px 0; font-family: var(--font-heading); font-size: 15px; color: var(--sm-body); }
.sm-sub-toggle { position: absolute; right: 0; top: 6px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--sm-text); }
.sm-sub-toggle svg { transition: transform .2s; }
.is-open > .sm-sub-toggle svg { transform: rotate(180deg); }
.sm-drawer-links { display: flex; gap: 18px; margin-top: 18px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.sm-drawer-links a:hover { color: var(--sm-accent); }
.sm-drawer-foot { display: flex; align-items: center; justify-content: space-between; margin: 20px 0; }
.sm-btn-block { display: flex !important; width: 100%; justify-content: center; }

/* ---------- WordPress and template bits ---------- */
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 8px; top: 8px; z-index: 100; background: var(--sm-accent); color: #fff; padding: 10px 16px; border-radius: 4px; }
.sm-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.sm-topbar-right { display: flex; align-items: center; gap: 16px; }
.sm-social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sm-pb { padding-bottom: 56px; }
.sm-home { padding-top: 24px; }
@media (min-width: 768px) { .sm-home { padding-top: 32px; } }
.sm-stack > * + * { margin-top: 32px; }
.sm-stack-sm > * + * { margin-top: 20px; }
.sm-sidebar > * + * { margin-top: 40px; }
.sm-grid-media, .sm-list-media, .sm-small-media { position: relative; display: block; }
.sm-thumb .sm-thumb-img, .sm-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-ov .sm-thumb { border-radius: 6px; }
.sm-fill .sm-thumb { aspect-ratio: auto !important; }
.sm-social-tile span { display: block; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sm-count { margin-top: 14px; font-size: 14px; }
.sm-empty { padding: 40px 0; }
.sm-single-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-single-author { display: inline-flex; align-items: center; gap: 8px; color: var(--sm-text); font-weight: 600; }
.sm-single-author:hover { color: var(--sm-accent); }
.sm-read-time { display: inline-flex; align-items: center; gap: 5px; }
.sm-share-text { display: none; }
@media (min-width: 640px) { .sm-share-text { display: inline; } }
.sm-share-btn.is-done { background: #2e7d32 !important; }
.sm-share-bottom { margin-top: 32px; }
.sm-single-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-bc-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sm-bc-sep { color: var(--sm-muted); }
.sm-404-wrap { padding: 80px 16px; text-align: center; }
.sm-404-wrap .sm-archive-title { justify-content: center; }
.sm-404-wrap .sm-search-inline { margin: 24px auto; }
.sm-404-wrap p { margin-top: 10px; }
.sm-footer-about .vn-logo { height: 52px; width: auto; }
.sm-footer-about p { margin: 16px 0 20px; }
.sm-footer-list { list-style: none; margin: 0; padding: 0; }
.sm-footer-list li + li { margin-top: 10px; }
.sm-footer-list a { color: #b9b9b9; transition: color .2s; }
.sm-footer-list a:hover { color: #fff; }
.sm-footer-lower-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 20px; text-align: center; }
@media (min-width: 768px) { .sm-footer-lower-inner { flex-direction: row; text-align: left; } }
.sm-footer-lower .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.sm-pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sm-border); border-radius: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--sm-text); }
.sm-pagination a.page-numbers:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-pagination .page-numbers.current { background: var(--sm-accent); border-color: var(--sm-accent); color: #fff; }
.sm-pagination .page-numbers.dots { border: 0; min-width: 0; }
.sm-form-note { margin: 0 auto 14px; max-width: 480px; padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.sm-form-note-ok { background: #e8f5e9; color: #1b5e20; }
.sm-form-note-err { background: #fdecea; color: #b71c1c; }
.sm-contact .sm-form-note { margin: 0 0 16px; max-width: none; }
.sm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Content from the editor */
.prose-content > *:first-child { margin-top: 0; }
.prose-content figure { margin: 1.6em 0; }
.prose-content figure img, .prose-content p > img, .prose-content > img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; margin: 0 auto; border-radius: 6px; }
.prose-content figcaption { margin-top: 8px; font-size: 13px; color: var(--sm-muted); text-align: center; }
.prose-content .wp-block-table { overflow-x: auto; }
.prose-content .wp-block-table table { margin-bottom: 0; }
.prose-content .aligncenter { margin-left: auto; margin-right: auto; }
.prose-content .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.prose-content .alignright { float: right; margin: .3em 0 1em 1.4em; }
.prose-content iframe { max-width: 100%; }
.page .prose-content { max-width: 860px; }
.vn-faq { border-top: 1px solid var(--sm-border); margin: 0 0 1.6em; }
.vn-faq-item { border-bottom: 1px solid var(--sm-border); }
.vn-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--sm-text); }
.vn-faq-item > summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 4px; background: var(--sm-bg-alt); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; }
.vn-faq-item[open] > summary { color: var(--sm-accent); }
.vn-faq-item[open] > summary::after { content: "\2212"; }
.vn-faq-a { padding: 0 0 18px; font-size: 16px; }
.vn-faq-a p:last-child { margin-bottom: 0; }

/* Contact form */
.sm-contact { margin-top: 36px; border: 1px solid var(--sm-border); border-top: 3px solid var(--sm-accent); border-radius: 6px; background: var(--sm-bg-alt); padding: 28px 24px; max-width: 860px; }
.sm-contact-title { font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--sm-text); }
.sm-contact-intro { margin: 8px 0 20px; color: var(--sm-body); font-size: 15px; line-height: 1.6; }
.sm-contact-form { display: grid; gap: 16px; }
.sm-contact-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .sm-contact-row { grid-template-columns: 1fr 1fr; } }
.sm-contact-form label { display: grid; gap: 6px; }
.sm-contact-form label > span { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--sm-text); }
.sm-contact-form input, .sm-contact-form textarea { width: 100%; border: 1px solid var(--sm-border); border-radius: 4px; background: var(--sm-bg); color: var(--sm-text); padding: 10px 12px; font-size: 15px; outline: none; }
.sm-contact-form input:focus, .sm-contact-form textarea:focus { border-color: var(--sm-accent); }
.sm-contact-form textarea { resize: vertical; min-height: 140px; }
.sm-contact-form .sm-btn { justify-self: start; min-height: 44px; }

.prose-content .vn-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 6px; overflow: hidden; background: #000; }
.prose-content .vn-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }