/* Varianet service CTA */
.vng-service-cta {
  direction: rtl; text-align: right; color: #f7fbff;
  margin: clamp(2rem,5vw,4rem) clamp(.75rem,2.5vw,2rem);
  padding: clamp(1.25rem,4vw,3rem); border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 8% 12%,rgba(45,212,191,.18),transparent 34%),
              linear-gradient(125deg,#08182f,#10375e 58%,#10294a);
  box-shadow: 0 18px 46px rgba(8,24,47,.14);
}
.vng-service-cta__grid {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);
  gap:clamp(1.25rem,3.5vw,3rem); align-items:center; max-width:1240px;
  margin-inline:auto;
}
.vng-service-cta__eyebrow {
  display:inline-block; margin-bottom:.7rem; color:#8de4d7;
  font-size:.9rem; font-weight:700;
}
.vng-service-cta h2 {
  margin:0 0 .8rem; color:#fff; font-size:clamp(1.3rem,2.3vw,2rem);
  font-weight:800; line-height:1.8;
}
.vng-service-cta__copy { color:rgba(247,251,255,.86); line-height:2; margin:0; }
.vng-service-cta__actions { display:grid; gap:.75rem; }
.vng-service-cta__btn {
  display:flex; justify-content:center; align-items:center;
  min-height:49px; padding:.8rem 1rem; text-align:center;
  border:1px solid rgba(255,255,255,.28); border-radius:12px;
  color:#fff !important; background:rgba(255,255,255,.075);
  text-decoration:none !important; font-weight:700; line-height:1.8;
  transition:background-color .18s ease,border-color .18s ease;
}
.vng-service-cta__btn--primary {
  background:#fff; color:#092443 !important; border-color:#fff;
}
.vng-service-cta__btn:hover { border-color:#8de4d7; background:rgba(255,255,255,.15); }
.vng-service-cta__btn--primary:hover { background:#d7fff7; color:#092443 !important; }
.vng-service-cta__links {
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem;
  margin-top:1.5rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.vng-service-cta__links a {
  color:#d9f5ff !important; text-decoration:none !important;
  font-size:.93rem; font-weight:600; line-height:1.9;
}
.vng-service-cta__links a:hover { color:#8de4d7 !important; text-decoration:underline !important; }
.vng-service-cta a:focus-visible { outline:3px solid #8de4d7; outline-offset:3px; }
@media(max-width:760px) {
  .vng-service-cta { margin:2rem .75rem; padding:1.25rem 1rem; border-radius:19px; }
  .vng-service-cta__grid { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .vng-service-cta__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1rem; }
}
@media(prefers-reduced-motion:reduce) { .vng-service-cta__btn { transition:none; } }

/* Practical content sections added to service detail pages. */
.vng-service-detail-guide {
  direction: rtl; text-align: right; max-width: 1240px;
  margin: clamp(2rem,4vw,3.5rem) auto;
  padding: clamp(1.2rem,3.4vw,2.3rem);
  border: 1px solid #dce6ef; border-radius: 22px;
  color: #16324b;
  background: linear-gradient(145deg,#f7fafc 0%,#fff 78%);
  box-shadow: 0 12px 32px rgba(15,41,65,.055);
}
.vng-service-detail-guide__eyebrow {
  color: #147d80; font-size: .88rem; font-weight: 800;
}
.vng-service-detail-guide h2 {
  color: #102e4c; margin: .45rem 0 .8rem;
  font-size: clamp(1.25rem,2.1vw,1.75rem); font-weight: 800; line-height: 1.85;
}
.vng-service-detail-guide__intro {
  color: #40566a; line-height: 2.05; margin: 0;
}
.vng-service-detail-guide__grid {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(250px,.9fr);
  gap: 1rem; margin-top: 1.25rem;
}
.vng-service-detail-guide__panel {
  padding: 1.1rem 1.15rem; border: 1px solid #e1e9f0;
  border-radius: 15px; background: rgba(255,255,255,.88);
}
.vng-service-detail-guide h3 {
  color: #173e5f; font-size: 1.04rem; font-weight: 800;
  margin: 0 0 .7rem; line-height: 1.8;
}
.vng-service-detail-guide ul { margin: 0; padding-right: 1.25rem; }
.vng-service-detail-guide li {
  color: #40566a; padding-right: .12rem; margin: .4rem 0;
  line-height: 1.95;
}
.vng-service-detail-guide__panel p { color: #40566a; margin: 0; line-height: 2; }
.vng-service-detail-guide__related {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1.15rem; margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid #e1e9f0;
}
.vng-service-detail-guide__related strong {
  color: #173e5f; font-size: .92rem;
}
.vng-service-detail-guide__related a {
  color: #126a82; font-weight: 700; text-decoration: none;
  line-height: 1.9;
}
.vng-service-detail-guide__related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vng-service-detail-guide a:focus-visible {
  outline: 3px solid #159f9a; outline-offset: 3px;
}
@media(max-width:760px) {
  .vng-service-detail-guide { margin: 1.8rem .75rem; padding: 1rem; border-radius: 18px; }
  .vng-service-detail-guide__grid { grid-template-columns: minmax(0,1fr); }
  .vng-service-detail-guide__panel { padding: .95rem; }
}

/* VNG-SERVICE-MOBILE-FIX-20261027-A
   Scoped to pages that render the shared service CTA.
   Correct mobile width constraints instead of hiding horizontal overflow. */
body:has(.vng-service-cta) *,
body:has(.vng-service-cta) *::before,
body:has(.vng-service-cta) *::after {
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  body:has(.vng-service-cta) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  body:has(.vng-service-cta) main,
  body:has(.vng-service-cta) .container,
  body:has(.vng-service-cta) .container-fluid,
  body:has(.vng-service-cta) .service-detail-container,
  body:has(.vng-service-cta) .service-page-container,
  body:has(.vng-service-cta) .service-container,
  body:has(.vng-service-cta) .content-wrapper,
  body:has(.vng-service-cta) .main-content,
  body:has(.vng-service-cta) .sidebar,
  body:has(.vng-service-cta) .service-hero {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:has(.vng-service-cta) .container,
  body:has(.vng-service-cta) .container-fluid,
  body:has(.vng-service-cta) .service-detail-container,
  body:has(.vng-service-cta) .service-page-container,
  body:has(.vng-service-cta) .service-container {
    width: 100% !important;
    margin-inline: auto !important;
  }

  body:has(.vng-service-cta) .service-detail-container {
    padding: 1rem .75rem !important;
  }

  body:has(.vng-service-cta) .content-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    margin-inline: 0 !important;
  }

  body:has(.vng-service-cta) .main-content,
  body:has(.vng-service-cta) .sidebar {
    width: 100% !important;
    padding: 1rem !important;
  }

  body:has(.vng-service-cta) .service-hero {
    padding: 1.5rem 1rem !important;
    margin-inline: 0 !important;
  }

  body:has(.vng-service-cta) .service-hero h1 {
    font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  body:has(.vng-service-cta) .vng-service-cta,
  body:has(.vng-service-cta) .vng-service-detail-guide {
    width: auto;
    max-width: calc(100% - 1.5rem) !important;
    min-width: 0;
    margin-inline: auto !important;
  }

  body:has(.vng-service-cta) .vng-service-cta__grid,
  body:has(.vng-service-cta) .vng-service-detail-guide__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    max-width: 100%;
  }

  body:has(.vng-service-cta) img,
  body:has(.vng-service-cta) video,
  body:has(.vng-service-cta) iframe,
  body:has(.vng-service-cta) table {
    max-width: 100%;
  }

  body:has(.vng-service-cta) pre {
    max-width: 100%;
    overflow-x: auto;
  }

  body:has(.vng-service-cta) .content-wrapper,
  body:has(.vng-service-cta) .main-content,
  body:has(.vng-service-cta) .sidebar {
    overflow-wrap: anywhere;
  }
}