/* =========================================================================
   TẦM NHÌN — SỨ MỆNH — GIÁ TRỊ CỐT LÕI  (template-parts/vision.php)
   Phong cách: sạch thoáng — nền sáng, nhiều khoảng thở, bo góc lớn, viền
   mảnh thay vì đổ bóng nặng. Khối giá trị cốt lõi chạy hiệu ứng CUỘN DÍNH.
   Để riêng file này (không nhét vào style.css) cho dễ sửa và deploy gọn.
   ========================================================================= */

/* --- Khối mở đầu + 2 thẻ Tầm nhìn / Sứ mệnh --- */
.vs-intro{background:#fff;padding:96px 0 88px;}
.vs-lead{max-width:760px;margin:0 auto 64px;text-align:center;}
.vs-lead .eyebrow{
  display:inline-block;background:#eef4ea;border:1px solid #dbe7d5;color:var(--green-dark);
  padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px;
}
.vs-lead h2{
  font-size:38px;line-height:1.22;letter-spacing:-.02em;color:var(--green-dark);
  font-weight:800;margin-bottom:20px;
}
.vs-lead p{font-size:16.5px;line-height:1.75;color:var(--muted);max-width:640px;margin:0 auto;}

.vs-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.vs-statement{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s ease, transform .25s ease;
}
.vs-statement:hover{border-color:#cfe0c6;transform:translateY(-3px);}
.vs-statement-img{aspect-ratio:16/10;background:#eef2ea;overflow:hidden;}
.vs-statement-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.vs-statement:hover .vs-statement-img img{transform:scale(1.035);}
.vs-statement-body{padding:30px 32px 34px;}
.vs-label{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:12px;
}
.vs-statement h3{
  font-size:21px;line-height:1.35;letter-spacing:-.01em;color:var(--green-dark);
  font-weight:800;margin-bottom:12px;
}
.vs-statement p{font-size:14.8px;line-height:1.75;color:var(--muted);}

/* --- Khối 4 giá trị cốt lõi: section cao 4 màn để có quãng cuộn --- */
.vs-values{background:var(--bg);position:relative;height:340vh;}
.vs-sticky{
  position:sticky;
  /* Ghim NGAY DƯỚI header dính của site, không phải mép trên màn hình —
     nếu top:0 thì header (88px + thanh menu 52px) che mất tiêu đề khối.
     Chiều cao header do JS đo thật rồi gán vào --agv-header. */
  top:var(--agv-header,0px);
  min-height:calc(100vh - var(--agv-header,0px));
  display:flex;align-items:center;padding:44px 0 40px;overflow:hidden;
}
.vs-values-head{max-width:680px;margin-bottom:22px;}
.vs-values-head .eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:12px;
}
.vs-values-head h2{
  font-size:26px;line-height:1.25;letter-spacing:-.02em;color:var(--green-dark);
  font-weight:800;margin-bottom:8px;
}
.vs-values-head p{font-size:14.5px;color:var(--muted);}

.vs-stage-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;}

/* Sân khấu ảnh (đứng yên, ảnh mờ chồng mờ khi đổi giá trị) */
.vs-stage{
  position:relative;border-radius:18px;overflow:hidden;background:var(--green-dark);
  aspect-ratio:4/5;max-height:460px;border:1px solid var(--line);
}
.vs-stage-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);transition:opacity .75s ease, transform 1.1s ease;
}
.vs-stage-img.is-active{opacity:1;transform:scale(1);}
.vs-stage-caption{
  position:absolute;left:0;right:0;bottom:0;padding:64px 26px 24px;
  background:linear-gradient(to top,rgba(20,92,24,.94) 0%,rgba(20,92,24,.72) 45%,rgba(20,92,24,0) 100%);
  min-height:112px;
}
.vs-cap{
  position:absolute;left:26px;right:26px;bottom:24px;
  color:#fff;font-size:16px;font-weight:700;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease;
}
.vs-cap.is-active{opacity:1;transform:translateY(0);}

/* Cột 4 thẻ + đường tiến trình dọc */
.vs-track{position:relative;padding-left:38px;}
.vs-rail{position:absolute;left:5px;top:14px;bottom:14px;width:2px;background:#dde5d8;border-radius:2px;}
.vs-rail-fill{display:block;width:100%;height:0;background:var(--green);border-radius:2px;transition:height .2s linear;}
.vs-card{position:relative;padding:13px 0 13px 4px;opacity:.36;transform:translateY(10px) scale(.994);transition:opacity .45s ease, transform .45s ease;}
.vs-card.is-active{opacity:1;transform:translateY(0) scale(1);}
.vs-dot{
  position:absolute;left:-38px;top:20px;width:12px;height:12px;border-radius:50%;
  background:#dde5d8;box-shadow:0 0 0 4px var(--bg);transition:background .35s ease, box-shadow .35s ease;
}
.vs-card.is-active .vs-dot{background:var(--orange);box-shadow:0 0 0 4px rgba(254,155,5,.18);}
.vs-card-img{display:none;}
.vs-num{
  display:inline;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  color:var(--orange);margin-right:9px;vertical-align:2px;
}
.vs-card h3{display:inline;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:var(--green-dark);font-weight:800;}
.vs-chot{font-size:15px;font-weight:700;color:var(--ink);margin:7px 0 6px;}
.vs-desc{font-size:14.5px;line-height:1.68;color:var(--muted);max-width:52ch;}

/* Màn hình không cao (đa số laptop): siết thêm để khối vẫn lọt trọn phần
   màn hình còn lại sau khi trừ header dính. */
@media (min-width:1000px) and (max-height:1010px){
  .vs-sticky{padding:30px 0 26px;}
  .vs-values-head{margin-bottom:16px;}
  .vs-values-head h2{font-size:23px;}
  .vs-values-head p{display:none;}
  .vs-stage{max-height:400px;}
  .vs-card{padding:10px 0 10px 4px;}
  .vs-card h3{font-size:19.5px;}
  .vs-chot{font-size:14.5px;margin:6px 0 5px;}
  .vs-desc{font-size:14px;line-height:1.62;}
}

/* --- Dưới 1000px: bỏ hẳn cuộn dính, mỗi thẻ tự mang ảnh của nó --- */
@media (max-width:999px){
  .vs-values{height:auto;}
  .vs-sticky{position:static;min-height:0;padding:56px 0;display:block;}
  .vs-stage-grid{grid-template-columns:1fr;gap:0;}
  .vs-stage{display:none;}
  .vs-track{padding-left:0;}
  .vs-rail{display:none;}
  .vs-dot{display:none;}
  .vs-card{
    opacity:1;transform:none;padding:0;margin-bottom:22px;
    background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  }
  .vs-card-img{display:block;aspect-ratio:16/9;background:#eef2ea;overflow:hidden;}
  .vs-card-img img{width:100%;height:100%;object-fit:cover;}
  .vs-card-body{padding:22px 22px 24px;}
  .vs-num{display:block;margin:0 0 6px;vertical-align:baseline;}
  .vs-card h3{display:block;}
  .vs-desc{max-width:none;}
}

@media (max-width:820px){
  .vs-intro{padding:64px 0 56px;}
  .vs-lead{margin-bottom:44px;}
  .vs-lead h2{font-size:28px;}
  .vs-lead p{font-size:15.5px;}
  .vs-pair{grid-template-columns:1fr;gap:22px;}
  .vs-statement-body{padding:24px 22px 26px;}
  .vs-values-head h2{font-size:25px;}
}

@media (max-width:520px){
  .vs-lead h2{font-size:24px;}
  .vs-lead h2 br{display:none;}
  .vs-statement h3{font-size:19px;}
  .vs-card h3{font-size:20px;}
}

/* Người dùng tắt hiệu ứng chuyển động: mọi thứ hiện rõ, không chuyển cảnh. */
@media (prefers-reduced-motion: reduce){
  .vs-values{height:auto;}
  .vs-sticky{position:static;min-height:0;display:block;}
  .vs-card{opacity:1;transform:none;}
  .vs-stage-img,.vs-cap,.vs-statement,.vs-statement-img img,.vs-rail-fill{transition:none;}
}