/* ------------------------------------------------------------------
   NT paslaugos (puslapis 453). Dizainas: "NT Paslaugos v2".
   Eksportas buvo React komponentas su inline stiliais; cia jis
   isverstas i paprasta HTML ir sita stiliu lakšta, kad visos 26
   situacijos butu HTML'e ir jas matytu tiek Google, tiek DI paieskos.
   ------------------------------------------------------------------ */

.vt-sv {
  --sv-ink:    #1a1a1a;
  --sv-body:   #555555;
  --sv-navy:   #2c3e5e;
  --sv-navy-2: #3a537d;
  --sv-blue:   #3f7ab0;
  --sv-blue-h: #5b93c4;
  --sv-pale:   #8db4d8;
  --sv-cream:  #faf9f7;
  --sv-line:   #e6e3dd;

  color: var(--sv-body);
  font-size: 16px;
  line-height: 1.65;
}

/* Toks pat plotis kaip kituose puslapiuose (pvz. karjeros): per visa ploti
   su 47px parastemis, o ne siauras centruotas stulpelis. */
.vt-sv-wrap { max-width: none; margin: 0; padding: 0 47px; }

/* ---------- Hero ---------- */

/* Astros antraste yra position:absolute, todel hero pats pasilieka vieta.
   Zemiau 921px juosta tampa mobili ir uztenka gerokai maziau. */
.vt-sv-hero { background: var(--sv-cream); padding: 208px 0 54px; }
@media (max-width: 921px) { .vt-sv-hero { padding-top: 100px; } }

.vt-sv-crumbs { font-size: 13px; color: #8a959f; margin-bottom: 26px; }
.vt-sv-crumbs a { color: #8a959f; text-decoration: none; }
.vt-sv-crumbs a:hover { color: var(--sv-blue); }
.vt-sv-crumbs span { padding: 0 6px; }
.vt-sv-crumbs-now { color: var(--sv-ink); font-weight: 600; padding-left: 0 !important; }

.vt-sv-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sv-blue); margin: 0 0 14px;
}
.vt-sv-h1 {
  font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--sv-blue);
  letter-spacing: .01em; margin: 0 0 12px;
}
.vt-sv-lead {
  font-size: 30px; line-height: 1.3; font-weight: 700; color: var(--sv-ink);
  margin: 0 0 28px; max-width: 24ch;
}
.vt-sv-intro {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 46px;
  max-width: 980px;
}
.vt-sv-intro p { margin: 0 0 14px; }
.vt-sv-intro p:last-child { margin-bottom: 0; }

/* ---------- Situaciju pasirinkimas ---------- */

.vt-sv-pick { background: var(--sv-cream); padding: 10px 0 64px; }

.vt-sv-h2 {
  font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--sv-ink);
  margin: 0 0 18px;
}

/* ------------------------------------------------------------------
   Auditorijos perjungiklis, 2026-10-12. Dizainas "NT Paslaugos v2 (1)".
   Buvo dvi plonos juostelės po brūkšniu, dabar dvi kortelės su ikona,
   paaiškinimu ir žyma. Aktyvi tamsiai mėlyna, neaktyvi balta su rėmu.
   Būseną ir toliau rodo ta pati .is-on klasė, todėl paslaugos.js
   nekeičiamas. Žymos tekstas ir ikona keičiasi kartu su būsena, todėl
   abu variantai guli HTML'e, o rodomas tik vienas: kitaip juos tektų
   perpiešti JavaScriptu.
   ------------------------------------------------------------------ */
.vt-sv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.vt-sv-tab {
  appearance: none; margin: 0; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: 6px;
  border: 2px solid var(--sv-line); background: #fff;
  transition: border-color .15s, background .15s;
}
.vt-sv-tab:hover { border-color: var(--sv-blue); }
.vt-sv-tab.is-on { background: var(--sv-navy); border-color: var(--sv-navy); }

.vt-sv-tab__ico {
  width: 46px; height: 46px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eef3f8; color: var(--sv-blue);
}
.vt-sv-tab.is-on .vt-sv-tab__ico { background: rgba(141, 180, 216, .18); color: var(--sv-pale); }
.vt-sv-tab__ico svg { display: block; }

.vt-sv-tab__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vt-sv-tab__ttl { font-size: 17px; font-weight: 700; color: var(--sv-ink); }
.vt-sv-tab__sub { font-size: 13.5px; line-height: 1.4; color: var(--sv-body); font-weight: 400; }
.vt-sv-tab.is-on .vt-sv-tab__ttl { color: #fff; }
.vt-sv-tab.is-on .vt-sv-tab__sub { color: #c3cede; }
.vt-sv-cnt { font: inherit; color: inherit; margin: 0; }

.vt-sv-tab__tag {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  padding: 11px 18px; border-radius: 6px;
  background: var(--sv-blue); color: #fff;
}
.vt-sv-tab.is-on .vt-sv-tab__tag { background: rgba(255, 255, 255, .16); }
.vt-sv-tag-on, .vt-sv-tag-ico-on { display: none; }
.vt-sv-tab.is-on .vt-sv-tag-off, .vt-sv-tab.is-on .vt-sv-tag-ico-off { display: none; }
.vt-sv-tab.is-on .vt-sv-tag-on { display: inline; }
.vt-sv-tab.is-on .vt-sv-tag-ico-on { display: block; }

.vt-sv-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 30px; align-items: start; }

.vt-sv-side { background: var(--sv-navy); border-radius: 8px; overflow: hidden; padding: 18px 0 10px; }
.vt-sv-side-h {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sv-pale); margin: 0 0 10px; padding: 0 22px;
}
.vt-sv-items { list-style: none; margin: 0; padding: 0; }
.vt-sv-items li { margin: 0; }
.vt-sv-item {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  appearance: none; background: none; border: 0; border-radius: 0; margin: 0;
  padding: 11px 22px; font: inherit; font-size: 14px; line-height: 1.45;
  color: #cfdbea; text-align: left; cursor: pointer;
  border-left: 3px solid transparent;
}
.vt-sv-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.vt-sv-item.is-on { background: var(--sv-navy-2); color: #fff; font-weight: 600; border-left-color: var(--sv-pale); }
.vt-sv-num { font-size: 11px; font-weight: 700; color: var(--sv-pale); padding-top: 3px; min-width: 16px; }
.vt-sv-item.is-on .vt-sv-num { color: #fff; }

.vt-sv-panels { background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; }
.vt-sv-panel { padding: 34px 38px 30px; }
.vt-sv-panel[hidden] { display: none; }
.vt-sv-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sv-blue); margin-bottom: 10px;
}
.vt-sv-h3 { font-size: 25px; line-height: 1.3; font-weight: 700; color: var(--sv-ink); margin: 0 0 18px; }
/* 2026-10-12: teksto juosta baigdavosi gerokai anksciau uz korteles krasta,
   todel desineje likdavo tuscia vieta, o ilgesni tekstai bereikalingai
   issitempdavo i apacia. Dabar pastraipa uzima visa korteles ploti. */
.vt-sv-panel p { margin: 0 0 15px; max-width: none; }
.vt-sv-note { color: var(--sv-blue); font-weight: 600; }
/* 2026-10-12: dalis situaciju turi salygu sarasa, kuris viena pastraipa su
   kabliataskiais skaitosi sunkiai. Zenkliukas toks pat kaip mokymu puslapyje. */
.vt-sv-list { list-style: none; margin: 0 0 15px; padding: 0; }
.vt-sv-list li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; }
.vt-sv-list li::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 9px; background: var(--sv-blue); }
.vt-sv-panel a { color: var(--sv-blue); text-decoration: underline; text-underline-offset: 3px; }

.vt-sv-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 22px; }
.vt-sv-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--sv-blue); color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 700; padding: 13px 24px; border-radius: 6px;
}
.vt-sv-btn:hover { background: var(--sv-blue-h); color: #fff !important; }
.vt-sv-tel { font-size: 15px; font-weight: 700; color: var(--sv-ink) !important; text-decoration: none !important; }
.vt-sv-next {
  margin-left: auto; appearance: none; background: #fff; border: 1px solid var(--sv-line);
  border-radius: 6px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--sv-body); cursor: pointer;
}
.vt-sv-next:hover { border-color: var(--sv-pale); color: var(--sv-ink); background: #fff; }

/* ---------- Susijusios paieskos ---------- */

.vt-sv-rel { background: #fff; padding: 56px 0; border-top: 1px solid var(--sv-line); }
.vt-sv-rel-lead { max-width: 70ch; margin: 0 0 20px; }
.vt-sv-rel-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.vt-sv-rel-list li { margin: 0; }
.vt-sv-rel-list a {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--sv-line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--sv-navy); text-decoration: none; background: var(--sv-cream);
}
.vt-sv-rel-list a:hover { border-color: var(--sv-pale); color: var(--sv-blue); }

/* ---------- Uzbaigimas ---------- */

.vt-sv-close { background: var(--sv-cream); padding: 60px 0 76px; }
.vt-sv-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; align-items: start; }
.vt-sv-close p { margin: 0 0 14px; max-width: 60ch; }
.vt-sv-muted { color: #8a959f; }

.vt-sv-card { background: var(--sv-navy); border-radius: 8px; padding: 26px; }
.vt-sv-card-h {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sv-pale); margin: 0 0 16px !important;
}
.vt-sv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(141, 180, 216, .12); border: 1px solid rgba(141, 180, 216, .35);
  border-radius: 6px; padding: 15px 18px; margin-bottom: 10px; text-decoration: none !important;
}
.vt-sv-row:hover { background: rgba(141, 180, 216, .22); }
.vt-sv-row--cta { background: var(--sv-blue); border-color: var(--sv-blue); margin-bottom: 0; }
.vt-sv-row--cta:hover { background: var(--sv-blue-h); border-color: var(--sv-blue-h); }
.vt-sv-row-k { font-size: 13px; font-weight: 600; color: #c3cede; }
.vt-sv-row--cta .vt-sv-row-k { color: #dbe8f3; }
.vt-sv-row-v { font-size: 16px; font-weight: 700; color: #fff; text-align: right; overflow-wrap: anywhere; }

/* ---------- Planšetė ---------- */

@media (max-width: 1020px) {
  .vt-sv-wrap { padding: 0 30px; }
  .vt-sv-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 22px; }
  .vt-sv-panel { padding: 28px 26px 26px; }
  .vt-sv-close-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; }
}

/* ---------- Telefonas ---------- */

@media (max-width: 782px) {
  .vt-sv-wrap { padding: 0 20px; }
  .vt-sv-hero { padding: 92px 0 36px; }
  .vt-sv-h1 { font-size: 17px; }
  .vt-sv-lead { font-size: 23px; max-width: none; margin-bottom: 20px; }
  .vt-sv-intro { grid-template-columns: 1fr; gap: 14px; }
  .vt-sv-h2 { font-size: 21px; }

  /* Dvi kortelės salia 375px ekrane netelpa, todėl dedamos viena po kita,
     o žyma nusileidžia į savo eilutę per visą plotį. */
  .vt-sv-tabs { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .vt-sv-tab { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
  .vt-sv-tab__tag { margin-left: 0; width: 100%; justify-content: center; }

  /* Telefone sarasas virsta pasirinkimu, o po juo atsiveria tekstas. */
  .vt-sv-grid { grid-template-columns: 1fr; gap: 16px; }
  .vt-sv-side { padding: 14px 0 8px; }
  .vt-sv-side-h { padding: 0 16px; }
  .vt-sv-item { padding: 10px 16px; font-size: 13.5px; }

  .vt-sv-panel { padding: 24px 18px 22px; }
  .vt-sv-h3 { font-size: 20px; }
  .vt-sv-panel p { font-size: 15px; }
  .vt-sv-act { gap: 12px; }
  .vt-sv-btn { font-size: 14px; padding: 12px 18px; }
  .vt-sv-next { margin-left: 0; }

  .vt-sv-rel { padding: 40px 0; }
  .vt-sv-close { padding: 40px 0 52px; }
  .vt-sv-close-grid { grid-template-columns: 1fr; gap: 24px; }
  .vt-sv-card { padding: 20px; }
  .vt-sv-row-v { font-size: 15px; }
}



/* Nuoroda i atskira paslaugos puslapi. Teksto eiluteje jos nesimatydavo,
   tad padaryta mygtuku ir atskirta nuo teksto (2026-10-22). */
.vt-sv-panel .vt-sv-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--sv-blue);
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sv-blue) !important;
  text-decoration: none !important;
}
.vt-sv-panel .vt-sv-more:hover {
  background: var(--sv-blue);
  color: #fff !important;
}