/* =========================================================
   VIET SERVICE — main.css
   Design tokens inspired by the brand mark: deep navy (trust,
   officialdom) + flag red + gold ring, on a warm "document paper"
   background. Signature motif: the passport/visa stamp — a dashed
   circular seal used in the hero, and perforated "form edge" dividers
   on the pricing sheet.
   ========================================================= */

:root{
  --navy: #0B1F3A;
  --navy-2: #14294A;
  --navy-soft: #1E3963;
  --red: #C8102E;
  --red-dark: #970C22;
  --gold: #C69A2E;
  --gold-light: #E7C368;
  --paper: #FBF7EF;
  --paper-2: #F3EBD8;
  --ink: #262421;
  --ink-soft: #665F53;
  --line: #E3D8BC;
  --white: #FFFFFF;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 12px 32px -16px rgba(11,31,58,0.28);
  --shadow-sm: 0 4px 14px -8px rgba(11,31,58,0.22);
  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); line-height:1.15; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
table{ border-collapse: collapse; width:100%; }

.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.skip-link{ left:8px; top:-60px; z-index:10000; background:var(--navy); color:#fff; padding:10px 16px; border-radius:6px; position:fixed; transition: top .2s; }
.skip-link:focus{ top:8px; }

:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

.vs-container{ max-width: var(--container); margin:0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.vs-btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding: 12px 22px; border-radius: 999px; font-weight:600; font-size:.95rem;
  border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.vs-btn .dashicons{ font-size:18px; width:18px; height:18px; }
.vs-btn-primary{ background: var(--red); color:#fff; box-shadow: var(--shadow-sm); }
.vs-btn-primary:hover{ background: var(--red-dark); transform: translateY(-1px); }
.vs-btn-ghost{ background: transparent; color: var(--navy); border-color: var(--navy); }
.vs-btn-ghost:hover{ background: var(--navy); color:#fff; }
.vs-btn-outline{ background: transparent; color: var(--navy); border-color: var(--line); }
.vs-btn-outline:hover{ border-color: var(--navy); }
.vs-btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.vs-btn-outline-light:hover{ border-color:#fff; }
.vs-btn-light{ background:#fff; color: var(--navy); }
.vs-btn-light:hover{ background: var(--gold-light); }
.vs-btn-lg{ padding: 15px 28px; font-size: 1rem; }
.vs-btn-block{ width:100%; margin-bottom:10px; }

/* ---------- Top bar ---------- */
.vs-topbar{ background: var(--navy); color: rgba(255,255,255,.85); font-size:.85rem; }
.vs-topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px; gap:12px; flex-wrap:wrap; }
.vs-topbar-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vs-topbar-info a{ color:#fff; display:inline-flex; align-items:center; gap:4px; }
.vs-topbar-sep{ opacity:.5; }
.vs-topbar-social{ display:flex; align-items:center; gap:14px; }
.vs-topbar .dashicons{ font-size:16px; width:16px; height:16px; vertical-align:-3px; }

/* ---------- Header ---------- */
.vs-header{ background: var(--white); position: sticky; top:0; z-index: 900; border-bottom: 1px solid var(--line); }
.vs-header-inner{ display:flex; align-items:center; gap:20px; padding: 12px 20px; }
.vs-brand{ margin-right:auto; }
.vs-brand img{ max-height: 56px; width:auto; }
.vs-brand-text{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; color: var(--navy); }
.vs-menu{ display:flex; gap: 26px; }
.vs-menu a{ font-weight:600; font-size:.95rem; color: var(--ink); position:relative; padding: 6px 0; }
.vs-menu a:hover{ color: var(--red); }
.vs-header-cta{ display:flex; align-items:center; gap:10px; }
.vs-menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.vs-menu-toggle span{ width:24px; height:2px; background: var(--navy); border-radius:2px; }

.vs-breadcrumb{ padding: 14px 0; font-size:.85rem; color: var(--ink-soft); }
.vs-breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; }
.vs-breadcrumb li:not(:last-child)::after{ content:'/'; margin-left:6px; color: var(--line); }
.vs-breadcrumb a:hover{ color: var(--red); }

/* ---------- Section base ---------- */
.vs-section{ padding: 72px 0; }
.vs-section:nth-of-type(even){ background: var(--paper-2); }
.vs-eyebrow{ font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-size:.78rem; font-weight:700; color: var(--red); margin: 0 0 10px; }
.vs-section-head{ max-width: 680px; margin: 0 auto 44px; text-align:center; }
.vs-section-head-left{ text-align:left; margin: 0 0 32px; }
.vs-section-head h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.vs-section-cta{ text-align:center; margin-top:36px; }
.vs-empty-note{ text-align:center; color: var(--ink-soft); background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; }

/* ---------- Hero ---------- */
.vs-hero{ background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; position:relative; overflow:hidden; }
.vs-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image: radial-gradient(circle at 20% 20%, #fff 1px, transparent 1px), radial-gradient(circle at 60% 70%, #fff 1px, transparent 1px);
  background-size: 60px 60px, 90px 90px;
}
.vs-hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; padding: 64px 20px 40px; position:relative; z-index:1; }
.vs-hero .vs-eyebrow{ color: var(--gold-light); }
.vs-hero h1{ color:#fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom:.4em; }
.vs-hero-desc{ color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 54ch; }
.vs-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin: 22px 0; }
.vs-hero .vs-btn-ghost{ color:#fff; border-color: rgba(255,255,255,.5); }
.vs-hero .vs-btn-ghost:hover{ background:#fff; color: var(--navy); }
.vs-hero-badges{ display:flex; flex-direction:column; gap:10px; margin-top: 20px; }
.vs-hero-badges li{ display:flex; align-items:center; gap:8px; color: rgba(255,255,255,.85); font-size:.92rem; }
.vs-hero-badges .dashicons{ color: var(--gold-light); }

.vs-hero-media{ position:relative; }
.vs-hero-media img{ border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.vs-hero-placeholder{ aspect-ratio: 4/3.3; background: var(--navy-soft); border-radius: var(--radius); display:flex; align-items:center; justify-content:center; border: 1px dashed rgba(255,255,255,.3); }
.vs-hero-placeholder .dashicons{ font-size:64px; width:64px; height:64px; color: rgba(255,255,255,.35); }

/* signature stamp motif */
.vs-hero-stamp{
  position:absolute; top:-18px; right:-14px; z-index:2; width:110px; height:110px; border-radius:50%;
  border: 2px dashed var(--gold-light); display:flex; align-items:center; justify-content:center; text-align:center;
  transform: rotate(-14deg); background: rgba(11,31,58,.55); backdrop-filter: blur(2px);
}
.vs-hero-stamp span{ font-family: var(--font-display); font-weight:700; color: var(--gold-light); font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; }

.vs-trust-bar{ background: rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.12); position:relative; z-index:1; }
.vs-trust-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 20px; }
.vs-trust-item{ text-align:center; }
.vs-trust-num{ display:block; font-family: var(--font-display); font-weight:800; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--gold-light); }
.vs-trust-label{ display:block; font-size:.82rem; color: rgba(255,255,255,.75); margin-top:4px; }

/* ---------- Pillars (service groups) ---------- */
.vs-pillar-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:24px; }
.vs-pillar-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; transition: box-shadow .2s, transform .2s; }
.vs-pillar-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.vs-pillar-card h3{ font-size:1.15rem; border-bottom: 2px solid var(--gold); display:inline-block; padding-bottom:6px; }
.vs-pillar-desc{ font-size:.9rem; color: var(--ink-soft); }
.vs-pillar-card ul{ margin: 14px 0 18px; display:flex; flex-direction:column; gap:8px; }
.vs-pillar-card ul a{ font-size:.92rem; color: var(--ink); }
.vs-pillar-card ul a:hover{ color: var(--red); }
.vs-pillar-link{ font-weight:700; color: var(--red); font-size:.9rem; }
.vs-pillar-link:hover{ text-decoration: underline; }

/* ---------- Process ---------- */
.vs-process-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.vs-process-step{ position:relative; padding-top: 8px; }
.vs-process-step:not(:last-child)::after{
  content:''; position:absolute; top:26px; left: 60%; width: 80%; height:2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  display:none;
}
@media (min-width: 900px){ .vs-process-step:not(:last-child)::after{ display:block; } }
.vs-process-num{ display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background: var(--navy); color: var(--gold-light); font-family: var(--font-display); font-weight:800; font-size:1.1rem; margin-bottom:14px; }
.vs-process-step h3{ font-size:1.05rem; }
.vs-process-step p{ font-size:.92rem; color: var(--ink-soft); }

/* ---------- Pricing sheet ---------- */
.vs-price-sheet{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 24px; }
.vs-price-group{
  background: var(--white); border-radius: var(--radius); padding: 24px 26px 8px; position:relative;
  border: 1px solid var(--line);
}
.vs-price-group::before{
  content:''; position:absolute; top:0; left:24px; right:24px; height:0;
  border-top: 2px dashed var(--gold);
}
.vs-price-group h3{ font-size:1.05rem; margin-bottom:12px; color: var(--navy); }
.vs-price-table td{ padding: 10px 0; border-bottom: 1px dashed var(--line); font-size:.92rem; vertical-align:top; }
.vs-price-table tr:last-child td{ border-bottom:0; }
.vs-price-name a{ font-weight:600; color: var(--ink); }
.vs-price-name a:hover{ color: var(--red); }
.vs-price-time{ color: var(--ink-soft); white-space:nowrap; padding-left:10px !important; font-size:.82rem; }
.vs-price-amount{ font-weight:800; color: var(--red); text-align:right; white-space:nowrap; font-family: var(--font-display); }
.vs-price-footnote{ margin-top: 24px; text-align:center; font-size:.82rem; color: var(--ink-soft); }

/* ---------- Why choose us ---------- */
.vs-why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:24px; }
.vs-why-card{ padding: 8px; }
.vs-why-num{ font-family: var(--font-display); font-size:2rem; font-weight:800; color: var(--gold); display:block; margin-bottom:6px; }
.vs-why-card h3{ font-size:1.05rem; }
.vs-why-card p{ font-size:.92rem; color: var(--ink-soft); }

/* ---------- Testimonials (CSS marquee) ---------- */
.vs-testimonials{ overflow:hidden; }
.vs-testimonial-track{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vs-testimonial-scroller{ display:flex; gap:20px; width:max-content; animation: vs-scroll 60s linear infinite; }
.vs-testimonials:hover .vs-testimonial-scroller{ animation-play-state: paused; }
@keyframes vs-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.vs-testimonial-card{ width: 320px; flex: 0 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.vs-stars{ color: var(--gold); letter-spacing:2px; font-size:1rem; }
.vs-testimonial-service{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--red); font-weight:700; margin: 6px 0 10px; }
.vs-testimonial-text{ font-size:.92rem; color: var(--ink); min-height: 70px; }
.vs-testimonial-author{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.vs-testimonial-author img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.vs-avatar-fallback{ width:40px; height:40px; border-radius:50%; background: var(--navy); color: var(--gold-light); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display); }
.vs-testimonial-author strong{ display:block; font-size:.88rem; }
.vs-testimonial-author span{ display:block; font-size:.75rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.vs-faq-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items:start; }
.vs-faq-list{ display:flex; flex-direction:column; gap:12px; }
.vs-faq-item{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 20px; }
.vs-faq-item summary{ cursor:pointer; list-style:none; padding: 14px 0; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:10px; color: var(--navy); }
.vs-faq-item summary::-webkit-details-marker{ display:none; }
.vs-faq-icon{ font-family: var(--font-display); font-size:1.3rem; color: var(--red); transition: transform .2s; }
.vs-faq-item[open] .vs-faq-icon{ transform: rotate(45deg); }
.vs-faq-item p{ padding-bottom: 16px; color: var(--ink-soft); font-size:.92rem; }

/* ---------- Contact / form ---------- */
.vs-contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items:start; }
.vs-contact-methods{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.vs-contact-methods li{ display:flex; gap:12px; align-items:flex-start; }
.vs-contact-methods .dashicons{ color: var(--red); margin-top:2px; }
.vs-contact-methods strong{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.vs-contact-methods a:hover{ color: var(--red); }

.vs-form-wrap{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.vs-form-row{ margin-bottom: 18px; }
.vs-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-form label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color: var(--navy); }
.vs-form .req{ color: var(--red); }
.vs-form input[type=text], .vs-form input[type=email], .vs-form input[type=tel], .vs-form select, .vs-form textarea, .vs-form input[type=file]{
  width:100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); font-family: inherit; font-size:.95rem; color: var(--ink);
}
.vs-form input:focus, .vs-form select:focus, .vs-form textarea:focus{ outline: none; border-color: var(--navy); background:#fff; }
.vs-form .desc{ font-size:.78rem; color: var(--ink-soft); margin-top:4px; }
.vs-giayto-hint{ font-size:.82rem; color: var(--navy); background: var(--paper-2); border-radius: var(--radius-sm); padding:10px 12px; margin-top:8px; }
.vs-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; }
.vs-form-privacy{ font-size:.78rem; color: var(--ink-soft); margin-top:12px; }
.vs-alert{ padding:14px 18px; border-radius: var(--radius-sm); margin-bottom:20px; font-size:.92rem; }
.vs-alert-success{ background:#E9F6EC; color:#1E6B32; border:1px solid #BEE3C6; }
.vs-alert-error{ background:#FBEAEA; color:#9E2626; border:1px solid #F3C6C6; }

/* ---------- CTA band ---------- */
.vs-cta-band{ background: linear-gradient(120deg, var(--red) 0%, var(--red-dark) 100%); color:#fff; }
.vs-cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 40px 20px; flex-wrap:wrap; }
.vs-cta-band h2{ color:#fff; font-size:1.5rem; margin-bottom:.2em; }
.vs-cta-band p{ color: rgba(255,255,255,.85); margin:0; }
.vs-cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.vs-footer{ background: var(--navy); color: rgba(255,255,255,.75); font-size:.9rem; }
.vs-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 56px 20px 30px; }
.vs-footer-col h3{ color:#fff; font-size:1rem; margin-bottom: 16px; font-family: var(--font-body); text-transform:uppercase; letter-spacing:.06em; }
.vs-footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.vs-footer-col a:hover{ color: var(--gold-light); }
.vs-footer-name{ color:#fff; font-family: var(--font-display); font-size:1.3rem; }
.vs-footer-brand img{ max-height:60px; margin-bottom:14px; }
.vs-footer-social{ display:flex; gap:14px; margin-top:16px; }
.vs-footer-social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.vs-footer-social a:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.vs-footer-contact li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.vs-footer-contact .dashicons{ color: var(--gold-light); margin-top:2px; }
.vs-footer-widgets{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding: 0 20px 30px; border-top:1px solid rgba(255,255,255,.1); padding-top:30px; }
.footer-widget-title{ color:#fff; font-size:.95rem; }
.vs-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.vs-footer-bottom-inner{ padding: 18px 20px; font-size:.8rem; text-align:center; }

.vs-mobile-callbar{ display:none; }

/* ---------- Service single ---------- */
.vs-service-hero{ background: var(--navy-2); color:#fff; padding: 48px 0; }
.vs-service-hero .vs-eyebrow{ color: var(--gold-light); }
.vs-service-hero h1{ color:#fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.vs-service-hero-inner{ display:grid; grid-template-columns: 1.3fr .7fr; gap:32px; align-items:center; }
.vs-service-lead{ color: rgba(255,255,255,.82); }
.vs-service-meta{ display:flex; gap: 28px; margin: 18px 0 22px; flex-wrap:wrap; }
.vs-service-meta .label{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,.6); }
.vs-service-meta .value{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.3rem; color: var(--gold-light); }
.vs-service-thumb img{ border-radius: var(--radius); }

.vs-service-body{ display:grid; grid-template-columns: 1fr 320px; gap: 44px; padding: 48px 20px; }
.vs-service-checklist{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.vs-service-checklist h2{ font-size:1.05rem; }
.vs-service-checklist ul{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.vs-service-checklist li{ display:flex; gap:8px; font-size:.9rem; align-items:flex-start; }
.vs-service-checklist .dashicons{ color: var(--gold); margin-top:2px; }
.vs-service-contactcard{ background: var(--paper-2); border-radius: var(--radius); padding: 22px; }
.vs-service-contactcard h2{ font-size:1rem; margin-bottom:14px; }

.vs-related-title{ text-align:center; margin-bottom: 26px; }
.vs-related-grid{ padding-bottom: 60px; }
.vs-service-card{ display:block; background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.vs-service-card:hover{ box-shadow: var(--shadow); }
.vs-service-card .dashicons{ font-size:26px; width:26px; height:26px; color: var(--red); }
.vs-service-card h3{ font-size:1rem; margin: 10px 0 6px; }
.vs-service-card p{ font-size:.85rem; color: var(--ink-soft); }

/* ---------- Service archive ---------- */
.vs-archive-header{ background: var(--paper-2); padding: 56px 0 30px; }
.vs-archive-header h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.vs-archive-desc{ max-width:60ch; color: var(--ink-soft); }
.vs-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 24px; }
.vs-filter-btn{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:.85rem; font-weight:600; color: var(--ink); }
.vs-filter-btn.is-active, .vs-filter-btn:hover{ background: var(--navy); color:#fff; border-color: var(--navy); }
.vs-service-card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.vs-service-card-price{ display:inline-block; margin-top:12px; font-weight:800; color: var(--red); font-family: var(--font-display); }
.vs-back-link{ font-weight:700; color: var(--navy); }
.vs-back-link:hover{ color: var(--red); }

/* ---------- Blog / posts ---------- */
.vs-page-header{ background: var(--paper-2); padding: 48px 0 30px; }
.vs-page-header h1{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.vs-page-thumb{ margin: -10px 0 30px; }
.vs-page-thumb img{ border-radius: var(--radius); width:100%; aspect-ratio:16/8; object-fit:cover; }
.vs-prose{ max-width: 760px; margin: 0 auto; padding: 20px; }
.vs-prose h2{ margin-top:1.4em; }
.vs-prose p, .vs-prose li{ font-size:1.02rem; color: var(--ink); }
.vs-prose a{ color: var(--red); text-decoration:underline; }
.vs-prose img{ border-radius: var(--radius-sm); }

.vs-post-layout{ display:grid; grid-template-columns: 1fr 280px; gap: 44px; padding: 20px 20px 60px; }
.vs-post-layout .vs-post-content{ padding:0; max-width:none; }
.vs-post-sidebar .widget{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.vs-post-list{ display:flex; flex-direction:column; gap:26px; }
.vs-post-card{ display:grid; grid-template-columns: 220px 1fr; gap:22px; background:var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.vs-post-card-thumb img{ height:100%; object-fit:cover; }
.vs-post-card-body{ padding: 18px 18px 18px 0; }
.vs-post-card-body h2{ font-size:1.15rem; }
.vs-post-card-body h2 a:hover{ color: var(--red); }
.vs-post-taxonomy{ margin-top:24px; }
.vs-tags a{ display:inline-block; background: var(--paper-2); border-radius:999px; padding:5px 12px; font-size:.78rem; margin-right:6px; }

/* Comments */
.vs-comments{ max-width:760px; margin:0 auto; padding: 0 20px 60px; }
.vs-comments-title{ font-size:1.3rem; }
.vs-comment-list > li{ border-top:1px solid var(--line); padding: 18px 0; }
.comment-form input, .comment-form textarea{ width:100%; padding:11px 14px; border-radius: var(--radius-sm); border:1px solid var(--line); margin-bottom:14px; font-family:inherit; }
.comment-form .form-submit input{ width:auto; background: var(--red); color:#fff; border:0; padding:11px 24px; border-radius:999px; font-weight:700; }

.vs-404{ text-align:center; padding: 100px 0; }
.vs-404 .vs-hero-actions{ justify-content:center; }
.vs-404 form{ margin-top: 30px; max-width:420px; margin-inline:auto; display:flex; gap:8px; }
.vs-404 input[type=search]{ flex:1; padding:11px 14px; border-radius:999px; border:1px solid var(--line); }
.vs-404 button{ background:var(--navy); color:#fff; border:0; border-radius:999px; padding:11px 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .vs-hero-inner{ grid-template-columns:1fr; }
  .vs-hero-media{ order:-1; }
  .vs-service-hero-inner{ grid-template-columns:1fr; }
  .vs-service-body{ grid-template-columns:1fr; }
  .vs-contact-grid{ grid-template-columns:1fr; }
  .vs-faq-inner{ grid-template-columns:1fr; }
  .vs-post-layout{ grid-template-columns:1fr; }
  .vs-footer-grid{ grid-template-columns: 1fr 1fr; }
  .vs-footer-widgets{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .vs-topbar-info span:nth-child(2){ display:none; }
  .vs-header-cta .vs-btn-ghost{ display:none; }
  .vs-menu-toggle{ display:flex; }
  .vs-nav{ position:fixed; inset: 0 0 0 auto; width: min(320px,86vw); background:#fff; transform: translateX(100%); transition: transform .25s ease; padding: 90px 26px 30px; overflow-y:auto; box-shadow: -12px 0 30px rgba(0,0,0,.15); z-index: 950; }
  .vs-nav.is-open{ transform: translateX(0); }
  .vs-menu{ flex-direction:column; gap:4px; }
  .vs-menu a{ display:block; padding: 12px 0; border-bottom:1px solid var(--line); }
  .vs-trust-grid{ grid-template-columns: repeat(2,1fr); }
  .vs-process-steps{ grid-template-columns:1fr; }
  .vs-form-grid{ grid-template-columns:1fr; }
  .vs-cta-band-inner{ flex-direction:column; text-align:center; }
  .vs-footer-grid{ grid-template-columns:1fr; padding-bottom:90px; }
  .vs-footer-widgets{ grid-template-columns:1fr; }
  .vs-post-card{ grid-template-columns:1fr; }
  .vs-post-card-body{ padding: 4px 18px 18px; }
  .vs-mobile-callbar{
    display:flex; align-items:center; justify-content:center; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:980;
    background: var(--red); color:#fff; font-weight:700; padding: 14px 16px; text-align:center;
    box-shadow: 0 -6px 18px rgba(0,0,0,.18);
  }
  body{ padding-bottom: 58px; }
}

@media (max-width:480px){
  .vs-trust-grid{ grid-template-columns: 1fr 1fr; }
  .vs-hero-stamp{ width:84px; height:84px; top:-10px; right:-10px; }
  .vs-hero-stamp span{ font-size:.78rem; }
}