/**
 * Vân Thôn Retreat — Landing 2 (Nếp sống dưỡng lão xanh).
 *
 * Bản landing thứ hai, KHÁC với landing.css (trang page 316):
 *   - nav gọn: chỉ logo + nút đặt lịch, không có menu
 *   - phần Thực chứng là 3 lời chứng khách hàng, không phải ảnh công chứng
 *   - không có mục Chính sách giữ chỗ, Bảng quy hoạch, Cao tốc
 *
 * Hai bản dùng nhiều class trùng tên (.nfe-item, .loc-card, .faq-item…) nhưng giá
 * trị khác nhau, nên mỗi bản có namespace riêng: .vt-lp cho bản cũ, .vt-lp2 cho
 * bản này. Không bao giờ được dùng chung một wrapper.
 *
 * JS dùng chung assets/js/landing-deck.js (nó bám .vt-deck / .faq-list / .reveal
 * / .vt-lp-nav nên không phụ thuộc namespace).
 */

.vt-lp2 *, .vt-lp2 *::before, .vt-lp2 *::after{box-sizing: border-box; margin: 0; padding: 0;}
:root{--forest: #1C2B1A;
  --forest-mid: #2D4229;
  --forest-light: #3D5A38;
  --earth: #E8DCC8;
  --earth-deep: #D4C4A8;
  --gold: #B8942A;
  --gold-light: #D4AE42;
  --cream: #F7F3ED;
  --text-dark: #1A1A1A;
  --text-mid: #4A4A4A;
  --text-light: #7A7A7A;
  --white: #FFFFFF;}
html{scroll-behavior: smooth;}
.vt-lp2{font-family: 'Lato', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;}
/* ─── NAV ─── */
.vt-lp2 nav{position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  transition: background 0.4s, backdrop-filter 0.4s;}
.vt-lp2 nav.scrolled{background: rgba(28, 43, 26, 0.95);
  backdrop-filter: blur(8px);}
.vt-lp2 .nav-logo{font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;}
.vt-lp2 .nav-logo span{color: var(--gold-light); font-style: italic;}
.vt-lp2 .nav-cta{font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--forest);
  background: var(--gold-light);
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;}
.vt-lp2 .nav-cta:hover{background: var(--gold);}
/* ─── HERO ─── */
.vt-lp2 .hero{position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest);}
.vt-lp2 .hero-bg{position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1C2B1A 0%, #2D4229 30%, #3D5A38 55%, #2A3D28 75%, #1C2B1A 100%);}
.vt-lp2 .hero-texture{position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    radial-gradient(ellipse 60% 80% at 70% 40%, #5A8A50 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 70%, #4A7A42 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 85% 80%, #6A9A60 0%, transparent 50%);}
.vt-lp2 .hero-mist{position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(247,243,237,0.12) 0%, transparent 100%);}
.vt-lp2 .hero-overlay{position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28,43,26,0.75) 0%, transparent 60%);}
.vt-lp2 .hero-content{position: relative;
  z-index: 2;
  padding: 0 48px 80px;
  max-width: 680px;
  animation: heroIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;}
@keyframes vtlpHeroIn{from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }}
.vt-lp2 .hero-eyebrow{font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;}
.vt-lp2 .hero-eyebrow::before{content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-light);}
.vt-lp2 .hero-title{font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 24px;}
.vt-lp2 .hero-title em{font-style: italic; color: var(--earth);}
/* Phần in nghiêng tự xuống dòng (thay cho <br>), để khi ẩn phần chữ thẳng
   thì phần in nghiêng không bị một dòng trống phía trên. */
.vt-lp2 :where(.hero-title em){display: block;}

/* Công tắc Hiện/Ẩn theo thiết bị ở tab Kiểu của mọi widget LP2.
   Elementor có sẵn .elementor .elementor-hidden-* nhưng không !important, nên thua
   các rule display của theme như .vt-lp2 .hero-eyebrow{display:flex}.
   Mốc màn hình khớp breakpoint mặc định của Elementor (767 / 1024). */
@media (min-width: 1025px){ .vt-lp2 .elementor-hidden-desktop{display: none !important;} }
@media (min-width: 768px) and (max-width: 1024px){ .vt-lp2 .elementor-hidden-tablet{display: none !important;} }
@media (max-width: 767px){ .vt-lp2 .elementor-hidden-mobile{display: none !important;} }
.vt-lp2 .hero-lead{font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  margin-bottom: 40px;
  max-width: 520px;}
.vt-lp2 .hero-actions{display: flex; align-items: center; gap: 24px; flex-wrap: wrap;}
.vt-lp2 .btn-primary{display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--forest);
  background: var(--gold-light);
  padding: 14px 32px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;}
.vt-lp2 .btn-primary:hover{background: var(--gold); transform: translateY(-1px);}
.vt-lp2 .btn-ghost{font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;}
.vt-lp2 .btn-ghost:hover{color: var(--earth); border-color: var(--earth);}
.vt-lp2 .hero-stats{position: absolute;
  bottom: 0; right: 0;
  z-index: 2;
  display: flex;
  background: rgba(28,43,26,0.88);
  backdrop-filter: blur(4px);}
.vt-lp2 .stat-item{padding: 20px 32px;
  border-left: 1px solid rgba(255,255,255,0.1);
  text-align: center;}
.vt-lp2 .stat-num{font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;}
.vt-lp2 .stat-label{font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  margin-top: 4px;}
/* ─── SECTION COMMONS ─── */
.vt-lp2 section{padding: 96px 48px;}
.vt-lp2 .container{max-width: 1080px; margin: 0 auto;}
.vt-lp2 .section-eyebrow{font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 16px;}
.vt-lp2 .section-title{font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: 20px;}
.vt-lp2 .section-lead{font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 600px;}
/* ─── QUOTE BREAK ─── */
.vt-lp2 .quote-break{background: var(--forest); padding: 80px 48px; text-align: center;}
.vt-lp2 .quote-mark{font-family: 'Playfair Display', serif;
  font-size: 5rem;
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.4;
  display: block;
  margin-bottom: 24px;}
.vt-lp2 .quote-text{font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 24px;}
.vt-lp2 .quote-sub{font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--gold-light);}
/* Biến thể nền kem — thay cho inline style của bản HTML gốc */
.vt-lp2 .quote-break--light{background: var(--earth-deep); padding: 64px 48px;}
.vt-lp2 .quote-break--light .quote-mark{color: var(--forest); opacity: 0.25;}
.vt-lp2 .quote-break--light .quote-text{color: var(--forest); font-size: clamp(1.1rem, 2.2vw, 1.6rem);}
.vt-lp2 .quote-break--light .quote-sub{color: var(--forest-mid);}
/* ─── LOCATION ─── */
.vt-lp2 .location-section{background: var(--white);}
.vt-lp2 .location-grid{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 56px;}
.vt-lp2 .location-map{background: var(--forest-mid); aspect-ratio: 4/3; position: relative; overflow: hidden;}
.vt-lp2 .location-map svg{width: 100%; height: 100%;}
.vt-lp2 .location-cards{display: flex; flex-direction: column; gap: 20px;}
.vt-lp2 .loc-card{display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  border-left: 3px solid var(--earth-deep);
  background: var(--cream);
  transition: border-color 0.2s;}
.vt-lp2 .loc-card:hover{border-color: var(--gold);}
.vt-lp2 .loc-icon{width: 40px;
  height: 40px;
  background: var(--forest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;}
.vt-lp2 .loc-title{font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 6px;}
.vt-lp2 .loc-desc{font-size: 0.88rem; line-height: 1.65; color: var(--text-mid);}
/* ─── NOT FOR EVERYONE ─── */
.vt-lp2 .nfe-section{background: var(--forest);}
.vt-lp2 .nfe-section .section-title{color: var(--earth);}
.vt-lp2 .nfe-section .section-lead{color: rgba(255,255,255,0.65);}
.vt-lp2 .nfe-section .section-eyebrow{color: var(--gold-light);}
.vt-lp2 .nfe-grid{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  margin-top: 56px;
  background: rgba(255,255,255,0.06);}
.vt-lp2 .nfe-item{padding: 32px 28px;
  background: var(--forest);
  border-top: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;}
.vt-lp2 .nfe-item:hover{border-color: var(--gold); background: var(--forest-mid);}
.vt-lp2 .nfe-x{font-size: 1.1rem; color: var(--gold); margin-bottom: 12px; display: block;}
.vt-lp2 .nfe-title{font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--earth);
  margin-bottom: 8px;
  line-height: 1.4;}
.vt-lp2 .nfe-desc{font-size: 0.82rem; line-height: 1.65; color: rgba(255,255,255,0.5);}
/* ─── PRODUCT ─── */
.vt-lp2 .product-section{background: var(--cream);}
.vt-lp2 .product-hero-text{font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--forest-mid);
  line-height: 1.7;
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 40px 0;
  max-width: 640px;}
.vt-lp2 .product-specs{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  margin-top: 48px;
  background: var(--earth-deep);}
.vt-lp2 .spec-item{background: var(--white); padding: 36px 28px;}
.vt-lp2 .spec-num{font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1;
  margin-bottom: 8px;}
.vt-lp2 .spec-unit{font-size: 0.85rem; color: var(--gold); font-weight: 700;}
.vt-lp2 .spec-unit--small{font-size: 0.7rem;}
.vt-lp2 .spec-label{font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.5;
  margin-top: 6px;}
.vt-lp2 .legal-badge{display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 16px 24px;
  background: var(--forest);
  color: var(--earth);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;}
.vt-lp2 .legal-badge .check{font-size: 1rem; color: var(--gold-light);}
/* ─── SOCIAL PROOF ─── */
.vt-lp2 .proof-section{background: var(--white);}
.vt-lp2 .proof-grid{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 56px;}
.vt-lp2 .proof-card{border: 1px solid var(--earth-deep);
  padding: 32px 28px;
  position: relative;
  background: var(--cream);}
.vt-lp2 .proof-card::before{content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.3;
  line-height: 1;
  position: absolute;
  top: 12px; left: 20px;}
.vt-lp2 .proof-text{font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-mid);
  padding-top: 20px;
  font-style: italic;}
.vt-lp2 .proof-name{font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  margin-top: 20px;}
.vt-lp2 .proof-role{font-size: 0.75rem; color: var(--text-light); margin-top: 3px;}
/* ─── FAQ ─── */
.vt-lp2 .faq-section{background: var(--forest);}
.vt-lp2 .faq-section .section-title{color: var(--earth);}
.vt-lp2 .faq-section .section-eyebrow{color: var(--gold-light);}
.vt-lp2 .faq-list{margin-top: 56px;}
.vt-lp2 .faq-item{border-bottom: 1px solid rgba(255,255,255,0.1);}
.vt-lp2 .faq-q{display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--earth);
  line-height: 1.5;
  transition: color 0.2s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;}
.vt-lp2 .faq-q:hover{color: var(--white);}
.vt-lp2 .faq-icon{flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--gold-light);
  transition: transform 0.3s, background 0.2s;
  margin-top: 2px;}
.vt-lp2 .faq-item.open .faq-icon{transform: rotate(45deg); background: var(--gold); color: var(--forest);}
.vt-lp2 .faq-a{max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;}
.vt-lp2 .faq-item.open .faq-a{max-height: 300px; padding-bottom: 28px;}
.vt-lp2 .faq-a-inner{font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.6);
  max-width: 680px;}
/* ─── CTA FINAL ─── */
.vt-lp2 .cta-section{background: var(--cream); text-align: center; padding: 120px 48px;}
.vt-lp2 .cta-section .section-eyebrow{text-align: center;}
.vt-lp2 .cta-section .section-title{margin: 0 auto 16px; max-width: 560px; text-align: center;}
.vt-lp2 .cta-section .section-lead{margin: 0 auto 48px; max-width: 480px; text-align: center;}
.vt-lp2 .cta-box{display: inline-flex; flex-direction: column; align-items: center; gap: 16px;}
.vt-lp2 .cta-phone{font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;}
.vt-lp2 .cta-phone:hover{color: var(--gold);}
.vt-lp2 .cta-note{font-size: 0.78rem; color: var(--text-light); letter-spacing: 0.08em; font-weight: 300;}
.vt-lp2 .cta-divider{width: 40px; height: 1px; background: var(--earth-deep);}
.vt-lp2 .cta-sites{display: flex; gap: 24px; font-size: 0.8rem; color: var(--text-light); align-items: center;}
.vt-lp2 .cta-sites a{color: var(--forest-mid); text-decoration: none; border-bottom: 1px solid var(--earth-deep); padding-bottom: 1px;}
.vt-lp2 .cta-sites a:hover{color: var(--gold); border-color: var(--gold);}
.vt-lp2 .cta-dot{color: var(--earth-deep);}
.vt-lp2 .btn-primary--cta{border: 0; cursor: pointer; font-family: 'Lato', sans-serif;}
/* ─── FOOTER ─── */
.vt-lp2 footer{background: var(--forest);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;}
.vt-lp2 .footer-brand{font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--earth);
  letter-spacing: 0.06em;}
.vt-lp2 .footer-note{font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
  max-width: 480px;
  line-height: 1.7;
  text-align: right;}
/* ─── REVEAL ANIMATION ─── */
.vt-lp2 .reveal{opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);}
.vt-lp2 .reveal.visible{opacity: 1; transform: translateY(0);}
.vt-lp2 .reveal-delay-1{transition-delay: 0.1s;}
.vt-lp2 .reveal-delay-2{transition-delay: 0.2s;}
.vt-lp2 .reveal-delay-3{transition-delay: 0.3s;}
.vt-lp2 .reveal-delay-4{transition-delay: 0.4s;}
@media (prefers-reduced-motion: reduce){
  .vt-lp2 .reveal{opacity: 1; transform: none; transition: none;}
  .vt-lp2 .hero-content{animation: none;}
}
/* ─── RESPONSIVE ─── */
@media (max-width: 768px){
  .vt-lp2 nav{padding: 16px 24px;}
  .vt-lp2 section{padding: 72px 24px;}
  .vt-lp2 .hero-content{padding: 0 24px 64px;}
  .vt-lp2 .hero-stats{position: static; flex-direction: row; justify-content: center; width: 100%;}
  .vt-lp2 .stat-item{padding: 16px 20px;}
  .vt-lp2 .location-grid{grid-template-columns: 1fr; gap: 40px;}
  .vt-lp2 footer{flex-direction: column; text-align: center;}
  .vt-lp2 .footer-note{text-align: center;}
  .vt-lp2 .cta-section{padding: 80px 24px;}
  .vt-lp2 .quote-break{padding: 64px 24px;}
}

/* ═══ KÉO THẺ (card deck) ═══
   Dưới 1024px: 4 nhóm thẻ chuyển từ lưới sang hàng ngang kéo được.
   Từ 1024px giữ nguyên lưới — màn rộng đủ chỗ, không cần kéo.
   Nền là scroll-snap của trình duyệt (vuốt cảm ứng chạy sẵn, không cần JS);
   landing-deck.js chỉ thêm kéo bằng chuột + chấm chỉ vị trí. */
.vt-lp2{--vt-card:78%;--vt-card-max:320px}
.vt-lp2 .vt-deck-dots{display:none}

@media (max-width:1023.98px){
  .vt-lp2 .vt-deck{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* .nfe-grid và .product-specs dùng background làm đường kẻ 2px giữa ô —
       tắt đi khi các ô tách rời thành thẻ, nếu không sẽ lòi dải màu chạy ngang. */
    background:none;
    grid-template-columns:none;
    margin-top:32px;
    padding-bottom:2px;
    cursor:grab;
  }
  .vt-lp2 .vt-deck::-webkit-scrollbar{display:none}

  .vt-lp2 .vt-deck > *{
    flex:0 0 var(--vt-card);
    max-width:var(--vt-card-max);
    min-width:0;
    scroll-snap-align:start;
  }

  .vt-lp2 .vt-deck.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
  .vt-lp2 .vt-deck.is-dragging *{pointer-events:none;user-select:none}

  /* Vị trí: bỏ 2 cột sớm hơn để hàng thẻ không bị bóp còn nửa màn hình */
  .vt-lp2 .location-grid{grid-template-columns:1fr;gap:36px}
  .vt-lp2 .location-grid .vt-deck{margin-top:0}
  .vt-lp2 .location-grid .vt-deck-dots{margin-top:0}

  /* ── Chấm chỉ vị trí ── */
  .vt-lp2 .vt-deck-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:18px;
  }
  .vt-lp2 .vt-deck-dot{
    width:7px;height:7px;padding:0;
    border:0;border-radius:50%;
    background:var(--earth-deep);
    opacity:.45;
    cursor:pointer;
    transition:opacity .25s,background .25s,width .25s;
  }
  .vt-lp2 .vt-deck-dot.is-active{opacity:1;background:var(--gold);width:20px;border-radius:4px}
  /* Trên nền tối đổi màu chấm cho thấy rõ */
  .vt-lp2 .nfe-section .vt-deck-dot{background:rgba(255,255,255,.35)}
  .vt-lp2 .nfe-section .vt-deck-dot.is-active{background:var(--gold-light)}

  /* Gợi ý kéo — tự mờ sau lần kéo đầu */
  .vt-lp2 .vt-deck-hint{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:.7rem;letter-spacing:.14em;color:var(--text-light);
    margin-top:10px;transition:opacity .4s;
  }
  .vt-lp2 .nfe-section .vt-deck-hint{color:rgba(255,255,255,.4)}
  .vt-lp2 .vt-deck-hint.is-gone{opacity:0}
}

@media (max-width:1023.98px) and (prefers-reduced-motion:reduce){
  .vt-lp2 .vt-deck{scroll-behavior:auto}
}

/* Mobile: bỏ kéo ngang — mỗi thẻ một hàng, hiện hết không cần vuốt.
   Kéo thẻ chỉ còn ở tablet (769–1023px). */
@media (max-width:768px){
  .vt-lp2 .vt-deck{
    flex-direction:column;
    gap:16px;
    overflow:visible;
    scroll-snap-type:none;
    cursor:auto;
  }
  .vt-lp2 .vt-deck > *{
    flex:0 0 auto;
    max-width:none;
    scroll-snap-align:none;
  }
  .vt-lp2 .vt-deck-dots,
  .vt-lp2 .vt-deck-hint{display:none}
}

/* ═══ NỀN TUỲ CHỌN CỦA SECTION ═══
   Widget tự vẽ nền riêng nên nền của Section/Column Elementor bị che.
   Nhóm class dưới đây cho widget nhận nền tự chọn ngay trong panel của nó,
   hoặc tự tắt nền để nhường lại cho Section Elementor phía sau. */
.vt-lp2 .vt-has-bg{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.vt-lp2 .vt-has-bg--fixed{background-attachment:fixed}
.vt-lp2 .vt-has-bg--contain{background-size:contain}
.vt-lp2 .vt-has-bg--auto{background-size:auto}
.vt-lp2 .vt-has-bg--tile{background-repeat:repeat}
/* Trong suốt: nhường nền cho Section Elementor bao ngoài */
.vt-lp2 .vt-bg-none{background:none}

/* Video nền — phủ kín như background-size:cover, không bắt chuột. */
.vt-lp2 .vt-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  z-index:0;
  pointer-events:none;
}
.vt-lp2 .vt-bg-dim{
  position:absolute;inset:0;
  background:#000;
  pointer-events:none;
  z-index:0;
}
/* Nội dung phải nằm trên video và lớp phủ. Liệt kê đích danh vì .hero dùng các
   lớp position:absolute riêng, không được đụng vào. */
.vt-lp2 .vt-has-bg > .container,
.vt-lp2 .vt-has-bg > .policy-inner,
.vt-lp2 .vt-has-bg > .footer-brand,
.vt-lp2 .vt-has-bg > .footer-note,
.vt-lp2 .vt-has-bg > .quote-mark,
.vt-lp2 .vt-has-bg > .quote-text,
.vt-lp2 .vt-has-bg > .quote-sub,
.vt-lp2 .vt-has-bg > blockquote,
.vt-lp2 .vt-has-bg > cite{position:relative;z-index:1}

/* Hero có lớp gradient riêng (.hero-bg) vẽ đè lên nền của chính thẻ .hero.
   Khi chọn nền tự chọn thì tắt lớp đó đi, nếu không nền mới sẽ bị che hoàn toàn. */
.vt-lp2 .hero.vt-has-bg .hero-bg{display:none}

/* Tắt video trên điện thoại — ảnh thay thế (poster) vẫn hiện vì nó được đặt
   làm background-image của chính section. Tiết kiệm 3G/4G và pin cho khách. */
@media (max-width:768px){
  .vt-lp2 .vt-bg-video--desktop{display:none}
}
/* Người dùng chọn giảm chuyển động thì bỏ video, giữ ảnh thay thế. */
@media (prefers-reduced-motion:reduce){
  .vt-lp2 .vt-bg-video{display:none}
}

/* ═══ TINH CHỈNH MOBILE ═══
   Đặt sau mọi rule khác để thắng độ ưu tiên mà không cần !important.

   Lỗi gốc: .hero là flex hàng ngang (mặc định), nên ở màn hẹp khối chữ và khối
   số liệu nằm CẠNH NHAU. Chữ bị bóp lại, tràn lên trên rồi bị overflow:hidden
   cắt mất, còn hàng số liệu thì lòi ra ngoài mép phải. Phải xếp dọc lại. */
@media (max-width: 768px){

  /* ── Hero ── */
  .vt-lp2 .hero{
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    /* Chiều cao tự giãn theo nội dung — 100vh cứng làm tiêu đề dài bị cắt cụt.
       svh tính theo phần thực sự nhìn thấy, tránh thanh địa chỉ trình duyệt. */
    height: auto;
    min-height: 100svh;
    padding-top: 76px;          /* chừa chỗ cho thanh nav cố định */
  }
  .vt-lp2 .hero-content{
    width: 100%;
    max-width: none;
    padding: 0 24px 32px;
    margin-top: auto;           /* đẩy nội dung xuống đáy khi màn còn dư chỗ */
  }
  .vt-lp2 .hero-eyebrow{font-size: .64rem; letter-spacing: .16em; margin-bottom: 14px}
  .vt-lp2 .hero-eyebrow::before{width: 20px}
  .vt-lp2 .hero-title{
    font-size: clamp(1.75rem, 8.5vw, 2.4rem);
    line-height: 1.14;
    margin-bottom: 18px;
    text-wrap: balance;
  }
  .vt-lp2 .hero-lead{
    font-size: .95rem;
    line-height: 1.65;
    max-width: none;
    margin-bottom: 28px;
  }

  /* ── Nút: không cho vỡ chữ thành nhiều dòng, đủ lớn để bấm ── */
  .vt-lp2 .hero-actions{gap: 18px}
  .vt-lp2 .btn-primary{
    white-space: nowrap;
    padding: 13px 22px;
    font-size: .78rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .vt-lp2 .btn-ghost{white-space: nowrap; font-size: .78rem}

  /* ── Hàng số liệu: xuống dưới khối chữ, chia đều, không tràn ── */
  .vt-lp2 .hero-stats{
    position: static;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
  }
  .vt-lp2 .stat-item{
    flex: 1 1 0;
    min-width: 0;               /* cho phép co lại, nếu không flex item sẽ tràn */
    padding: 14px 8px;
  }
  .vt-lp2 .stat-item:first-child{border-left: 0}
  .vt-lp2 .stat-num{font-size: 1.02rem; line-height: 1.15}
  .vt-lp2 .stat-label{font-size: .58rem; letter-spacing: .04em; margin-top: 3px}

  /* ── Nav: logo và nút gọn lại, không rớt dòng ── */
  .vt-lp2 nav{padding: 12px 16px; gap: 12px}
  .vt-lp2 .nav-logo{font-size: .88rem; letter-spacing: .04em; white-space: nowrap}
  .vt-lp2 .nav-cta{
    white-space: nowrap;
    font-size: .68rem;
    letter-spacing: .06em;
    padding: 10px 14px;
    min-height: 40px;
    flex-shrink: 0;
  }

  /* ── Các section còn lại ── */
  .vt-lp2 .section-title{font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.18}
  .vt-lp2 .section-lead{font-size: .95rem}
  .vt-lp2 .product-hero-text{padding-left: 18px; margin: 28px 0; font-size: 1.05rem}

  /* Dải pháp lý: inline-flex làm chữ dài bị bó cứng, đổi sang flex thường */
  .vt-lp2 .legal-badge{
    display: flex;
    align-items: flex-start;
    margin-top: 28px;
    padding: 14px 16px;
    font-size: .82rem;
  }
  .vt-lp2 .legal-badge .check{margin-top: 1px}

  /* Dấu nháy trang trí của thẻ lời chứng — kéo vào trong cho khỏi chạm mép */
  .vt-lp2 .proof-card{padding: 28px 22px}
  .vt-lp2 .proof-card::before{font-size: 3rem; top: 10px; left: 16px}

  /* FAQ: chừa chỗ cho dấu + không bị chữ ép sát */
  .vt-lp2 .faq-q{font-size: .95rem; padding: 22px 0; gap: 12px}

  /* CTA cuối: số điện thoại và hàng link không được tràn ngang */
  .vt-lp2 .cta-phone{font-size: 1.7rem}
  .vt-lp2 .cta-box{width: 100%}
  .vt-lp2 .cta-sites{flex-wrap: wrap; justify-content: center; gap: 10px 16px}
  .vt-lp2 .cta-note{text-align: center; line-height: 1.5}

  /* Footer */
  .vt-lp2 footer{padding: 28px 24px; gap: 12px}
  .vt-lp2 .footer-note{font-size: .68rem}
}

/* Màn rất hẹp (iPhone SE ~375px và nhỏ hơn) */
@media (max-width: 380px){
  .vt-lp2 .stat-num{font-size: .92rem}
  .vt-lp2 .stat-label{font-size: .54rem}
  .vt-lp2 .stat-item{padding: 12px 5px}
  .vt-lp2 .nav-cta{font-size: .62rem; padding: 9px 11px}
  .vt-lp2 .nav-logo{font-size: .8rem}
  .vt-lp2 .hero-actions{flex-direction: column; align-items: flex-start; gap: 14px}
}

/* Logo dạng ảnh trong nav.
   Chiều cao do Elementor sinh ra từ control "Chiều cao logo" (có riêng cho
   máy tính / máy tính bảng / điện thoại), ở đây chỉ lo phần còn lại. */
.vt-lp2 .nav-logo img{
  display:block;
  width:auto;
  max-width:200px;
  height:34px;            /* dự phòng khi Elementor chưa sinh CSS */
  object-fit:contain;
  background: none;
}
.vt-lp2 .nav-logo--img{display:flex;align-items:center;min-width:0}
.vt-lp2 .nav-logo a{display:block;text-decoration:none;color:inherit}
.vt-lp2 .nav-logo a:hover{opacity:.85}
@media (max-width:768px){
  .vt-lp2 .nav-logo img{max-width:140px}
}
@media (max-width:380px){
  .vt-lp2 .nav-logo img{max-width:110px}
}
body:not(:has(.vtr-single__head--hero)):not(:has(.vt-lp2 .hero)) .vt-lp2 .vt-lp-nav {
    background: rgba(28, 43, 26, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* Trang không có ảnh bìa: chừa chỗ cho nav cố định, tránh nav che tiêu đề */
body:not(:has(.vtr-single__head--hero)):not(:has(.vt-lp2 .hero)) .vtr-main {
    padding-top: 72px;
}
@media (max-width: 768px) {
    body:not(:has(.vtr-single__head--hero)):not(:has(.vt-lp2 .hero)) .vtr-main {
        padding-top: 60px;
    }
}

/* Footer landing đứng sau nội dung bài viết — tách bằng đường viền trên cho rõ */
.vtr-body .vt-lp2 footer { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ═══ ĐẢO MÀU CHỮ KHI SECTION DÙNG NỀN ẢNH / VIDEO ═══
   Các section nền sáng được thiết kế với chữ xanh đậm trên nền kem hoặc trắng:
     .section-title      → var(--forest)
     .section-lead       → var(--text-mid)
     .product-hero-text  → var(--forest-mid)
   Đặt ảnh nền vào mà giữ nguyên thì chữ tối nằm trên ảnh tối — chìm nghỉm.
   Widget tự gắn .vt-bg-text--light khi chọn ảnh/GIF/video (đổi được trong
   mục Nền section → "Màu chữ trên nền này"). */

.vt-lp2 .vt-bg-text--light .section-title { color: #fff; }
.vt-lp2 .vt-bg-text--light .section-lead,
.vt-lp2 .vt-bg-text--light .product-hero-text,
.vt-lp2 .vt-bg-text--light .proof-intro { color: rgba(255,255,255,.82); }
.vt-lp2 .vt-bg-text--light .section-eyebrow { color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .product-hero-text { border-left-color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .plan-note,
.vt-lp2 .vt-bg-text--light .cta-note { color: rgba(255,255,255,.62); }
.vt-lp2 .vt-bg-text--light .cta-pre { color: rgba(255,255,255,.9); }
.vt-lp2 .vt-bg-text--light .cta-phone { color: #fff; }
.vt-lp2 .vt-bg-text--light .cta-phone:hover { color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .cta-sites a { color: rgba(255,255,255,.8); border-bottom-color: rgba(255,255,255,.35); }
.vt-lp2 .vt-bg-text--light .cta-sites a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .cta-divider { background: rgba(255,255,255,.3); }
.vt-lp2 .vt-bg-text--light .loc-title { color: #fff; }

/* Chữ đứng trực tiếp trên ảnh thì thêm bóng nhẹ cho tách nền,
   không áp cho chữ nằm trong thẻ có nền riêng. */
.vt-lp2 .vt-bg-text--light > .container > .section-title,
.vt-lp2 .vt-bg-text--light > .container > .section-lead,
.vt-lp2 .vt-bg-text--light > .container > .section-eyebrow,
.vt-lp2 .vt-bg-text--light > .container > .product-hero-text,
.vt-lp2 .vt-bg-text--light > .container > .proof-intro {
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* Chọn "Tối — giữ như thiết kế gốc": không đổi gì, chỉ để rõ ý định trong CSS */
.vt-lp2 .vt-bg-text--dark { /* giữ nguyên màu chữ gốc của section */ }
/* ═══ CHÍNH SÁCH GIỮ CHỖ ═══
   Port từ landing.css (.vt-lp) sang namespace .vt-lp2, đổi tên class tiêu đề
   cho khớp bản 2 (.section-eyebrow / .section-title thay vì .eyebrow / .sec-title).
   Nền tối nên chữ đã sáng sẵn — không cần .vt-bg-text--light như các section kem. */
.vt-lp2 .policy-section {
    background: linear-gradient(135deg, #1C2B1A 0%, #2D4229 100%);
    padding: 96px 48px;
}
.vt-lp2 .policy-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.vt-lp2 .policy-section .section-eyebrow { color: var(--gold-light); }
.vt-lp2 .policy-section .section-title { color: var(--earth); }
.vt-lp2 .policy-section .section-lead { color: rgba(255,255,255,.65); }

.vt-lp2 .policy-box {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(212,174,66,.25);
    padding: 40px;
    margin-top: 40px;
}
.vt-lp2 .policy-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 6px;
    line-height: 1.15;
}
.vt-lp2 .policy-sub { font-size: .9rem; color: rgba(255,255,255,.6); margin-bottom: 32px; }

.vt-lp2 .policy-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}
.vt-lp2 .pstep { padding: 22px 20px; background: rgba(255,255,255,.05); border-top: 2px solid var(--gold); }
.vt-lp2 .pstep-num {
    font-family: 'Playfair Display', serif;
    font-size: 2rem; font-weight: 700;
    color: var(--gold); line-height: 1; margin-bottom: 8px;
}
.vt-lp2 .pstep-t { font-size: .85rem; font-weight: 700; color: var(--earth); margin-bottom: 5px; }
.vt-lp2 .pstep-d { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.6; }

.vt-lp2 .policy-conditions { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
.vt-lp2 .pc-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    color: var(--gold); margin-bottom: 14px;
}
.vt-lp2 .pc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 0; margin: 0; }
.vt-lp2 .pc-list li {
    font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.55;
    display: flex; gap: 8px;
}
.vt-lp2 .pc-list li::before { content: '—'; color: var(--gold); flex-shrink: 0; }

.vt-lp2 .policy-cta {
    display: inline-flex; align-items: center;
    margin-top: 32px;
    font-size: .82rem; font-weight: 700; letter-spacing: .1em;
    font-family: 'Lato', sans-serif;
    color: var(--forest); background: var(--gold-light);
    border: 0; cursor: pointer;
    padding: 14px 32px; min-height: 48px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.vt-lp2 .policy-cta:hover { background: var(--gold); transform: translateY(-1px); }

/* 4 bước KHÔNG kéo ngang.
   Đây là quy trình có thứ tự 01→04, người đọc cần thấy đủ cả bốn để hình dung
   toàn bộ luồng. Bắt vuốt tìm từng bước thì mất mạch. Trên màn hẹp xếp dọc. */
@media (max-width: 900px) {
    .vt-lp2 .policy-steps { grid-template-columns: 1fr; gap: 14px; }
    .vt-lp2 .pstep { padding: 18px 18px; }
    .vt-lp2 .pstep-num { font-size: 1.6rem; margin-bottom: 4px; }
}

@media (max-width: 768px) {
    .vt-lp2 .policy-section { padding: 72px 24px; }
    .vt-lp2 .policy-box { padding: 22px 18px; margin-top: 28px; }
    .vt-lp2 .policy-headline { font-size: clamp(1.3rem, 6vw, 1.8rem); }
    .vt-lp2 .policy-sub { font-size: .85rem; margin-bottom: 24px; }
    .vt-lp2 .pc-list { grid-template-columns: 1fr; gap: 10px; }
    .vt-lp2 .pc-list li { font-size: .82rem; }
    .vt-lp2 .policy-conditions { padding-top: 20px; }
    .vt-lp2 .policy-cta {
        margin-top: 24px; width: 100%; justify-content: center;
        padding: 14px 20px; white-space: nowrap; font-size: .76rem;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   DỄ ĐỌC CHO NGƯỜI LỚN TUỔI
   ═══════════════════════════════════════════════════════════════════
   Khách của Vân Thôn phần lớn trên 50 tuổi. Bản thiết kế gốc theo gu
   tạp chí: chữ mảnh, nhỏ, độ mờ thấp — đẹp trên ảnh chụp, khó đọc thật.

   Ba thứ được sửa, KHÔNG đụng tới bố cục:
     1. Cỡ chữ  — mọi đoạn văn tối thiểu 1rem (16px), phần lớn lên 1.05–1.15rem
     2. Độ đậm  — bỏ font-weight 300, nét mảnh là thứ mắt lão thị khó bắt nhất
     3. Tương phản — độ mờ tối thiểu 0.72 trên nền tối, 0.78 với chữ phụ

   GIỮ NGUYÊN Playfair Display ở mọi tiêu đề, con số và câu trích dẫn —
   đó là chữ nhận diện của thương hiệu, chỉ tăng cỡ chứ không đổi font.
   ═══════════════════════════════════════════════════════════════════ */

.vt-lp2 { font-size: 17px; line-height: 1.75; }

/* ── Hero ── */
.vt-lp2 .hero-eyebrow { font-size: .82rem; letter-spacing: .16em; font-weight: 700; }
.vt-lp2 .hero-lead {
    font-size: 1.2rem;
    font-weight: 400;          /* 300 → 400 */
    line-height: 1.75;
    color: rgba(255,255,255,.9);
    max-width: 34em;
}
.vt-lp2 .stat-num { font-size: 1.75rem; }
.vt-lp2 .stat-label {
    font-size: .82rem;
    color: rgba(255,255,255,.78);   /* .55 → .78 */
    letter-spacing: .04em;
    line-height: 1.45;
}

/* ── Nút bấm: to hơn, dày hơn, đủ chỗ ngón tay ── */
.vt-lp2 .btn-primary,
.vt-lp2 .policy-cta {
    font-size: .95rem;
    letter-spacing: .08em;
    padding: 16px 34px;
    min-height: 52px;
}
.vt-lp2 .btn-ghost { font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.85); }
.vt-lp2 .nav-cta { font-size: .88rem; letter-spacing: .08em; padding: 13px 26px; min-height: 46px; }

/* ── Tiêu đề chung của section ── */
.vt-lp2 .section-eyebrow {
    font-size: .82rem;
    letter-spacing: .16em;     /* .22em quá thưa, mắt phải nhảy từng chữ */
    font-weight: 700;
}
.vt-lp2 .section-title { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.24; }
.vt-lp2 .section-lead {
    font-size: 1.15rem;
    font-weight: 400;          /* 300 → 400 */
    line-height: 1.8;
    color: #3D3D3D;            /* đậm hơn --text-mid */
    max-width: 36em;
}

/* ── Trích dẫn ── */
.vt-lp2 .quote-text { font-size: clamp(1.45rem, 2.9vw, 2.1rem); line-height: 1.62; }
.vt-lp2 .quote-sub { font-size: .9rem; font-weight: 400; letter-spacing: .1em; }

/* ── Vị trí ── */
.vt-lp2 .loc-card { padding: 26px; gap: 20px; }
.vt-lp2 .loc-icon { width: 46px; height: 46px; font-size: 1.15rem; }
.vt-lp2 .loc-title { font-size: 1.15rem; margin-bottom: 8px; }
.vt-lp2 .loc-desc { font-size: 1rem; line-height: 1.72; color: #3D3D3D; }

/* ── Không phù hợp (nền tối) ── */
.vt-lp2 .nfe-item { padding: 34px 30px; }
.vt-lp2 .nfe-x { font-size: 1.25rem; }
.vt-lp2 .nfe-title { font-size: 1.1rem; line-height: 1.42; margin-bottom: 10px; }
.vt-lp2 .nfe-desc {
    font-size: .98rem;
    line-height: 1.72;
    color: rgba(255,255,255,.76);   /* .5 → .76 */
}

/* ── Sản phẩm ── */
.vt-lp2 .product-hero-text { font-size: clamp(1.25rem, 2.1vw, 1.55rem); line-height: 1.72; }
.vt-lp2 .spec-item { padding: 38px 30px; }
.vt-lp2 .spec-num { font-size: 2.3rem; }
.vt-lp2 .spec-unit { font-size: 1rem; }
.vt-lp2 .spec-unit--small { font-size: .85rem; }
.vt-lp2 .spec-label { font-size: 1rem; line-height: 1.62; color: #3D3D3D; margin-top: 8px; }
.vt-lp2 .legal-badge { font-size: 1.02rem; line-height: 1.68; padding: 20px 26px; }
.vt-lp2 .legal-badge .check { font-size: 1.3rem; }

/* ── Chính sách giữ chỗ (nền tối) ── */
.vt-lp2 .policy-headline { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.vt-lp2 .policy-sub { font-size: 1.02rem; color: rgba(255,255,255,.78); line-height: 1.65; }
.vt-lp2 .pstep { padding: 26px 24px; }
.vt-lp2 .pstep-num { font-size: 2.2rem; }
.vt-lp2 .pstep-t { font-size: 1.02rem; margin-bottom: 8px; line-height: 1.4; }
.vt-lp2 .pstep-d { font-size: .95rem; line-height: 1.68; color: rgba(255,255,255,.74); }
.vt-lp2 .pc-title { font-size: .85rem; letter-spacing: .1em; }
.vt-lp2 .pc-list { gap: 12px 28px; }
.vt-lp2 .pc-list li { font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.78); }

/* ── Lời chứng ── */
.vt-lp2 .proof-card { padding: 36px 32px; }
.vt-lp2 .proof-text { font-size: 1.08rem; line-height: 1.82; color: #3D3D3D; padding-top: 24px; }
.vt-lp2 .proof-name { font-size: 1.05rem; margin-top: 22px; }
.vt-lp2 .proof-role { font-size: .9rem; color: #6A6A6A; margin-top: 5px; }

/* ── FAQ (nền tối) ── */
.vt-lp2 .faq-q { font-size: 1.2rem; line-height: 1.5; padding: 30px 0; }
.vt-lp2 .faq-icon { width: 30px; height: 30px; font-size: 1.1rem; }
.vt-lp2 .faq-a-inner {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,.8);    /* .6 → .8 */
}
/* Chữ to hơn → câu trả lời cao hơn, nới trần để không bị cắt */
.vt-lp2 .faq-item.open .faq-a { max-height: 900px; }

/* ── CTA cuối ── */
.vt-lp2 .cta-pre { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
.vt-lp2 .cta-lead { font-size: 1.15rem; font-weight: 400; line-height: 1.8; color: #3D3D3D; }
.vt-lp2 .cta-phone { font-size: 2.5rem; letter-spacing: .03em; }
.vt-lp2 .cta-note { font-size: .95rem; font-weight: 400; color: #5A5A5A; letter-spacing: .04em; }
.vt-lp2 .cta-sites { font-size: .98rem; }

/* ── Footer ── */
.vt-lp2 .footer-brand { font-size: 1.02rem; }
.vt-lp2 .footer-note {
    font-size: .88rem;
    line-height: 1.78;
    color: rgba(255,255,255,.62);   /* .35 → .62 */
}

/* ── Chấm và gợi ý kéo thẻ: to hơn cho dễ bấm ── */
.vt-lp2 .vt-deck-dot { width: 10px; height: 10px; }
.vt-lp2 .vt-deck-dot.is-active { width: 26px; }
.vt-lp2 .vt-deck-dots { gap: 10px; margin-top: 22px; }
.vt-lp2 .vt-deck-hint { font-size: .82rem; letter-spacing: .1em; }

/* ═══ MOBILE — vẫn to, chỉ thu khoảng đệm ═══ */
@media (max-width: 768px) {
    .vt-lp2 { font-size: 17px; }
    .vt-lp2 .hero-lead { font-size: 1.08rem; line-height: 1.7; }
    .vt-lp2 .section-lead,
    .vt-lp2 .cta-lead { font-size: 1.05rem; line-height: 1.72; }
    .vt-lp2 .loc-desc,
    .vt-lp2 .spec-label,
    .vt-lp2 .nfe-desc { font-size: .98rem; }
    /* Thẻ vị trí: icon · tiêu đề · đoạn văn — mỗi thứ một hàng */
    .vt-lp2 .loc-card { flex-direction: column; gap: 14px; }
    .vt-lp2 .proof-text { font-size: 1.02rem; line-height: 1.78; }
    .vt-lp2 .faq-q { font-size: 1.06rem; padding: 24px 0; }
    .vt-lp2 .faq-a-inner { font-size: 1rem; line-height: 1.8; }
    .vt-lp2 .cta-phone { font-size: 2rem; }
    .vt-lp2 .stat-num { font-size: 1.12rem; }
    .vt-lp2 .stat-label { font-size: .66rem; }
    .vt-lp2 .btn-primary,
    .vt-lp2 .policy-cta { font-size: .88rem; padding: 15px 24px; min-height: 50px; }
    .vt-lp2 .nav-cta { font-size: .74rem; padding: 11px 15px; min-height: 44px; }
    .vt-lp2 .footer-note { font-size: .82rem; }
}
/* ═══ TIN TỨC ═══
   Đặt giữa FAQ (nền tối) và CTA cuối (nền kem) nên dùng nền trắng —
   tạo nhịp nghỉ cho mắt sau một mảng tối dài.
   Cỡ chữ theo chuẩn dễ đọc đã đặt ở khối trên. */
.vt-lp2 .news-section { background: var(--white); padding: 96px 48px; }
.vt-lp2 .news-empty {
    padding: 28px; text-align: center;
    border: 2px dashed var(--earth-deep);
    color: var(--text-light); font-size: 1rem;
}

.vt-lp2 .news-grid { display: grid; gap: 28px; margin-top: 52px; }
.vt-lp2 .news-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vt-lp2 .news-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vt-lp2 .news-grid--4 { grid-template-columns: repeat(4, 1fr); }

.vt-lp2 .news-card {
    display: flex; flex-direction: column;
    background: var(--cream);
    border: 1px solid var(--earth-deep);
    overflow: hidden;
    transition: border-color .2s, transform .25s, box-shadow .25s;
}
.vt-lp2 .news-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(28,43,26,.10);
}

/* Ảnh 16:9, không bao giờ đẩy giãn thẻ */
.vt-lp2 .news-thumb {
    display: block; position: relative;
    aspect-ratio: 16 / 10;
    background: var(--forest-mid);
    overflow: hidden;
}
.vt-lp2 .news-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s var(--ease, ease);
}
.vt-lp2 .news-card:hover .news-thumb img { transform: scale(1.04); }
.vt-lp2 .news-thumb__blank {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; opacity: .45;
}

.vt-lp2 .news-body {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 26px 24px 24px;
    flex: 1;                 /* đáy các thẻ thẳng hàng dù tiêu đề dài ngắn khác nhau */
}
.vt-lp2 .news-cat {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold);
}
.vt-lp2 .news-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.36;
    color: var(--forest);
    margin: 0;
}
.vt-lp2 .news-title a { color: inherit; text-decoration: none; }
.vt-lp2 .news-title a:hover { color: var(--gold); }
.vt-lp2 .news-excerpt {
    font-size: 1rem;
    line-height: 1.7;
    color: #3D3D3D;
    margin: 0;
}
.vt-lp2 .news-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--earth-deep);
    font-size: .9rem; color: #6A6A6A;
}
.vt-lp2 .news-meta > * + *::before {
    content: "·"; margin-right: 14px; opacity: .6;
}

.vt-lp2 .news-foot { margin-top: 40px; text-align: center; }
.vt-lp2 .news-more {
    display: inline-flex; align-items: center;
    min-height: 52px; padding: 16px 34px;
    font-size: .95rem; font-weight: 700; letter-spacing: .08em;
    color: var(--forest); background: transparent;
    border: 1.5px solid var(--forest);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.vt-lp2 .news-more:hover { background: var(--forest); color: var(--cream); }

/* Nền ảnh/video → đảo màu chữ, nối tiếp cơ chế .vt-bg-text--light */
.vt-lp2 .vt-bg-text--light .news-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.vt-lp2 .vt-bg-text--light .news-title { color: #fff; }
.vt-lp2 .vt-bg-text--light .news-title a:hover { color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .news-excerpt { color: rgba(255,255,255,.82); }
.vt-lp2 .vt-bg-text--light .news-meta { color: rgba(255,255,255,.7); border-top-color: rgba(255,255,255,.14); }
.vt-lp2 .vt-bg-text--light .news-cat { color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .news-more { color: var(--gold-light); border-color: var(--gold-light); }
.vt-lp2 .vt-bg-text--light .news-more:hover { background: var(--gold-light); color: var(--forest); }

/* Tablet: 3–4 cột xuống 2 */
@media (max-width: 1023.98px) {
    .vt-lp2 .news-grid--3,
    .vt-lp2 .news-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: xếp dọc — ba bài là ba lựa chọn song song, khách cần thấy đủ
   để chọn, không phải vuốt tìm. Cùng lý do với khối 4 bước giữ chỗ. */
@media (max-width: 768px) {
    .vt-lp2 .news-section { padding: 72px 24px; }
    .vt-lp2 .news-grid,
    .vt-lp2 .news-grid--2,
    .vt-lp2 .news-grid--3,
    .vt-lp2 .news-grid--4 { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
    .vt-lp2 .news-thumb { aspect-ratio: 16 / 9; }
    .vt-lp2 .news-body { padding: 22px 20px 20px; gap: 9px; }
    .vt-lp2 .news-title { font-size: 1.12rem; }
    .vt-lp2 .news-excerpt { font-size: .98rem; }
    .vt-lp2 .news-meta { font-size: .86rem; }
    .vt-lp2 .news-foot { margin-top: 28px; }
    .vt-lp2 .news-more { width: 100%; justify-content: center; font-size: .88rem; padding: 15px 20px; }
}

/* ═══ KHÔNG PHÙ HỢP · ẢNH BANNER ═══
   Ảnh ngang nằm giữa đoạn dẫn và các thẻ. Mặc định hiện TRỌN ảnh theo tỉ lệ gốc:
   không đặt chiều cao nên height:100% của <img> tính ra auto. Muốn cắt theo khung
   cố định thì chọn tỉ lệ hoặc chiều cao trong widget. */
.vt-lp2 .nfe-banner {
    position: relative;
    overflow: hidden;
    background: var(--forest-mid);   /* giữ chỗ trong lúc ảnh chưa tải */
}
/* Selector dài là có lý do: Elementor có rule
   ".elementor .elementor-widget:not(…):not(…) figure{margin:0}" ưu tiên cao hơn,
   nó xoá sạch khoảng cách giữa đoạn dẫn và ảnh banner. */
.vt-lp2 .nfe-section figure.nfe-banner.nfe-banner.nfe-banner { margin: 56px 0 0; }
.vt-lp2 .nfe-banner img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
/* Banner liền với lưới thẻ — khe 2px trùng đường kẻ giữa các thẻ */
.vt-lp2 .nfe-banner + .nfe-grid { margin-top: 2px; }

/* Tablet: thẻ thành hàng kéo ngang, tách banner ra bằng đúng khe giữa các thẻ */
@media (max-width: 1023.98px) {
    .vt-lp2 .nfe-section figure.nfe-banner.nfe-banner.nfe-banner { margin-top: 40px; }
    .vt-lp2 .nfe-banner + .nfe-grid { margin-top: 14px; }
}

/* Mobile: thấp hơn cho đỡ chiếm màn; tuỳ chọn tràn sát mép (bù padding 24px của section) */
@media (max-width: 768px) {
    .vt-lp2 .nfe-section figure.nfe-banner.nfe-banner.nfe-banner { margin: 32px 0 0; }
    .vt-lp2 .nfe-banner--bleed { margin-left: -24px; margin-right: -24px; }
    .vt-lp2 .nfe-banner + .nfe-grid { margin-top: 16px; }
}

/* ═══ VỊ TRÍ · BẢN ĐỒ TO HƠN, KHÔNG BỊ CẮT ═══
   Trước: 2 cột bằng nhau + khung 4:3 cứng + object-fit:cover → bản đồ nhỏ và mất mép.
   Giờ: cột bản đồ rộng theo biến --loc-map-col (widget chỉnh, mặc định 58%),
   cột thẻ nhận phần còn lại. Ảnh tự tải mặc định cao theo tỉ lệ gốc. */
.vt-lp2 .location-map--image { aspect-ratio: auto; background: none; }
.vt-lp2 .location-map--image img {
    display: block;
    width: 100%;
    height: 100%;        /* khung tỉ lệ "auto" → height tự tính theo ảnh gốc */
    max-width: none;
    object-fit: contain;
}
.vt-lp2 .vt-zoom { display: block; position: relative; height: 100%; cursor: zoom-in; }
/* Nhãn "Phóng to" luôn hiện, nền vàng nổi trên bản đồ tối — khách lớn tuổi phải thấy ngay là bấm được */
.vt-lp2 .vt-zoom__hint {
    position: absolute; right: 14px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 18px;
    font-family: 'Lato', sans-serif;
    font-size: .92rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
    color: var(--forest); background: var(--gold-light);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    pointer-events: none;
    transition: background .2s, transform .2s;
}
/* Rule cũ ".location-map svg{width:100%;height:100%}" (cho bản đồ SVG) cũng trúng icon này
   → phải khoá lại cỡ bằng selector mạnh hơn, không thì kính lúp phình to bằng cả khung. */
.vt-lp2 .vt-zoom .vt-zoom__hint svg { width: 18px; height: 18px; flex-shrink: 0; }
.vt-lp2 .vt-zoom__hint { white-space: nowrap; width: auto; height: auto; }
.vt-lp2 .vt-zoom:hover .vt-zoom__hint,
.vt-lp2 .vt-zoom:focus-visible .vt-zoom__hint { background: #fff; transform: translateY(-2px); }
.vt-lp2 .vt-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (min-width: 1024px) {
    .vt-lp2 .location-grid {
        grid-template-columns: minmax(0, var(--loc-map-col, 58%)) minmax(0, 1fr);
        gap: var(--loc-gap, 48px);
    }
    /* Ẩn bản đồ thì thẻ chiếm trọn chiều ngang */
    .vt-lp2 .location-grid:not(:has(.location-map)) { grid-template-columns: 1fr; }
    /* Cột thẻ hẹp lại → thu đệm cho chữ còn chỗ */
    .vt-lp2 .location-cards { gap: 16px; }
    .vt-lp2 .loc-card { padding: 22px; gap: 16px; }
}

/* Tablet + mobile: ảnh trên (đủ bề ngang), thẻ dưới — lưới 1 cột đã đặt ở khối KÉO THẺ */
@media (max-width: 768px) {
    .vt-lp2 .location-grid { gap: 28px; margin-top: 36px; }
    .vt-lp2 .vt-zoom__hint { right: 10px; bottom: 10px; min-height: 40px; padding: 8px 14px; font-size: .82rem; gap: 6px; }
}

/* ═══ HỘP XEM ẢNH LỚN (landing-deck.js) ═══
   Gắn thẳng vào <body>, nằm ngoài .vt-lp2 nên không dùng namespace. */
.vt-lightbox-lock,
.vt-lightbox-lock body { overflow: hidden; }
.vt-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    display: none; flex-direction: column;
    background: rgba(12, 18, 11, .95);
}
.vt-lightbox.is-open { display: flex; }
.vt-lightbox__stage {
    position: relative;
    flex: 1; min-height: 0;
    display: flex;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 64px 20px 8px;
}
/* margin:auto căn giữa khi ảnh nhỏ hơn khung, và vẫn cuộn được tới mép khi ảnh to hơn */
.vt-lightbox__img {
    display: block; margin: auto;
    width: auto; height: auto;
    max-width: 100%;
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    cursor: zoom-in;
    opacity: 0; transition: opacity .3s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.vt-lightbox.is-loaded .vt-lightbox__img { opacity: 1; }
.vt-lightbox.is-error .vt-lightbox__img { display: none; }
.vt-lightbox.is-actual .vt-lightbox__img { max-width: none; max-height: none; cursor: zoom-out; }

.vt-lightbox__spin {
    position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #D4AE42;
    border-radius: 50%;
    animation: vtLightboxSpin .8s linear infinite;
}
.vt-lightbox.is-loaded .vt-lightbox__spin { display: none; }
@keyframes vtLightboxSpin { to { transform: rotate(360deg); } }

.vt-lightbox__close {
    position: absolute; z-index: 1;
    top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; line-height: 1; color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
}
.vt-lightbox__close:hover,
.vt-lightbox__close:focus-visible { background: #D4AE42; color: #1C2B1A; outline: none; }
.vt-lightbox__tip {
    margin: 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-family: 'Lato', sans-serif; font-size: .95rem; line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}
@media (max-width: 768px) {
    .vt-lightbox__stage { padding: 64px 8px 4px; }
    .vt-lightbox__tip { font-size: .85rem; }
}

/* ═══ LIÊN KẾT VÙNG ═══
   Nằm ngay sau section Vị trí (nền trắng, bản đồ trái) → mặc định nền kem, bản đồ phải.
   Cột chữ: ô khoảng cách trước (khách đọc lướt con số), ý chính sau.
   Không căn đều hai bên như file thiết kế — justify tạo khoảng trắng lởm chởm, khó đọc. */
.vt-lp2 .region-section { background: var(--cream); }
.vt-lp2 .region-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    margin-top: 48px;
}
.vt-lp2 .region-map { position: relative; }
.vt-lp2 .region-map img {
    display: block;
    width: 100%; height: auto; max-width: none;
    box-shadow: 0 18px 40px rgba(28, 43, 26, .18);
}
.vt-lp2 .region-map__empty {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 24px;
    border: 2px dashed var(--earth-deep);
    color: var(--text-light); font-size: 1rem; text-align: center;
}

.vt-lp2 .region-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}
.vt-lp2 .region-stat { padding: 16px 18px; background: var(--white); border-left: 3px solid var(--gold); }
.vt-lp2 .region-stat-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem; font-weight: 600; line-height: 1.05;
    color: var(--forest);
}
.vt-lp2 .region-stat-unit {
    margin-left: 4px;
    font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700;
    color: var(--gold);
}
.vt-lp2 .region-stat-label { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.5; color: #3D3D3D; }

.vt-lp2 .region-points { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.vt-lp2 .region-points li {
    position: relative;
    padding-left: 28px;
    font-size: 1.08rem; line-height: 1.78;
    color: #3D3D3D;
}
/* Dấu thoi vàng thay chấm tròn mặc định — cùng ngôn ngữ với đường kẻ vàng của thẻ */
.vt-lp2 .region-points li::before {
    content: '';
    position: absolute; left: 4px; top: .7em;
    width: 9px; height: 9px;
    background: var(--gold);
    transform: rotate(45deg);
}
.vt-lp2 .region-points strong { color: var(--forest); font-weight: 700; }

@media (min-width: 1024px) {
    .vt-lp2 .region-grid--map-left {
        grid-template-columns: minmax(0, var(--rg-map-col, 55%)) minmax(0, 1fr);
        gap: var(--rg-gap, 56px);
    }
    .vt-lp2 .region-grid--map-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--rg-map-col, 55%));
        gap: var(--rg-gap, 56px);
    }
    /* HTML luôn để bản đồ trước (mobile hiện bản đồ lên đầu), desktop đảo bằng order */
    .vt-lp2 .region-grid--map-right .region-map { order: 2; }
    .vt-lp2 .region-grid--no-map { grid-template-columns: 1fr; max-width: 760px; }
}

@media (max-width: 768px) {
    .vt-lp2 .region-grid { gap: 28px; margin-top: 32px; }
    .vt-lp2 .region-map img { box-shadow: 0 10px 24px rgba(28, 43, 26, .16); }
    .vt-lp2 .region-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
    /* Số ô lẻ thì ô cuối trải hết hàng, không bị hụt một nửa */
    .vt-lp2 .region-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .vt-lp2 .region-stat { padding: 14px; }
    .vt-lp2 .region-stat-num { font-size: 1.7rem; }
    .vt-lp2 .region-stat-label { font-size: .9rem; }
    .vt-lp2 .region-points { gap: 14px; }
    .vt-lp2 .region-points li { padding-left: 24px; font-size: 1rem; line-height: 1.72; }
    .vt-lp2 .region-points li::before { left: 3px; width: 8px; height: 8px; }
}

/* Nền ảnh / video → chữ sáng, nối tiếp cơ chế .vt-bg-text--light */
.vt-lp2 .vt-bg-text--light .region-points li { color: rgba(255, 255, 255, .86); }
.vt-lp2 .vt-bg-text--light .region-points strong { color: #fff; }
.vt-lp2 .vt-bg-text--light .region-stat { background: rgba(255, 255, 255, .1); }
.vt-lp2 .vt-bg-text--light .region-stat-num { color: #fff; }
.vt-lp2 .vt-bg-text--light .region-stat-label { color: rgba(255, 255, 255, .8); }
/* ═══ HERO · KHỐI CHỮ CĂN GIỮA BÊN TRÁI ═══
   Trước: chữ dính đáy (align-items:flex-end; mobile margin-top:auto) và dùng margin-bottom
   giữa các dòng → ẩn dòng cuối thì margin dòng trên còn lại, khối chữ lệch lên.
   Giờ: căn giữa theo chiều dọc + khoảng cách bằng flex gap. Dòng bị ẩn (display:none)
   không sinh gap nên ẩn dòng nào khối chữ vẫn nằm giữa. Đặt cuối file để thắng rule cũ. */
.vt-lp2 .hero {
    align-items: center;
    padding-top: 88px;                 /* chừa thanh nav cố định, để "giữa" là giữa phần nhìn thấy */
}
.vt-lp2 .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding: 48px 48px 72px;
    text-align: left;
}
.vt-lp2 .hero-content > * { margin-bottom: 0; }
.vt-lp2 .hero-eyebrow { margin-bottom: 0; }
.vt-lp2 .hero-title   { margin-bottom: 0; }
.vt-lp2 .hero-lead    { margin-bottom: 0; }
/* Nút cách đoạn trên xa hơn một chút — margin-top không đẩy lệch khi nút là dòng cuối */
.vt-lp2 .hero-actions { margin-top: 14px; }

/* Ẩn hết phần con (theo công tắc từng thiết bị) thì ẩn luôn thẻ cha,
   nếu không h1 / hàng nút rỗng vẫn chiếm một khoảng gap. Mốc khớp breakpoint Elementor. */
.vt-lp2 .hero-title:not(:has(> *)),
.vt-lp2 .hero-actions:not(:has(> *)) { display: none; }
@media (min-width: 1025px) {
    .vt-lp2 .hero-title:not(:has(> :not(.elementor-hidden-desktop))),
    .vt-lp2 .hero-actions:not(:has(> :not(.elementor-hidden-desktop))) { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .vt-lp2 .hero-title:not(:has(> :not(.elementor-hidden-tablet))),
    .vt-lp2 .hero-actions:not(:has(> :not(.elementor-hidden-tablet))) { display: none; }
}
@media (max-width: 767px) {
    .vt-lp2 .hero-title:not(:has(> :not(.elementor-hidden-mobile))),
    .vt-lp2 .hero-actions:not(:has(> :not(.elementor-hidden-mobile))) { display: none; }
}

/* Mobile: hero xếp dọc (chữ trên, hàng số liệu dưới). Khối chữ chiếm phần còn lại
   phía trên hàng số liệu và căn giữa trong phần đó, thay vì bị đẩy xuống đáy. */
@media (max-width: 768px) {
    .vt-lp2 .hero { justify-content: flex-start; padding-top: 72px; }
    .vt-lp2 .hero-content {
        flex: 1 1 auto;
        margin-top: 0;
        gap: 16px;
        padding: 32px 24px 40px;
    }
    .vt-lp2 .hero-actions { margin-top: 8px; }
}
/* ═══ "ẢNH ĐỨNG KHI CUỘN" TRÊN ĐIỆN THOẠI / TABLET ═══
   Safari iOS không hỗ trợ background-attachment:fixed — nó không bỏ qua mà tính
   background-size:cover theo CHIỀU CAO CẢ TRANG, nên ảnh bị phóng cực to và mờ.
   Giả lập lại: ảnh chuyển sang lớp ::before position:fixed đúng bằng màn hình (cover
   tính theo màn hình → nét), section dùng clip-path để lớp đó chỉ lộ trong phạm vi
   section. Máy tính giữ cách cũ (đang chạy tốt). Áp cho mọi section chọn chế độ này. */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
    .vt-lp2 .vt-has-bg--fixed {
        background-attachment: scroll;
        background-size: 0 0;             /* ẩn ảnh của chính section, ::before vẽ thay */
        isolation: isolate;               /* ::before z-index:-1 nằm dưới nội dung nhưng trên nền màu */
        -webkit-clip-path: inset(0);
        clip-path: inset(0);              /* cắt lớp fixed theo khung section */
    }
    .vt-lp2 .vt-has-bg--fixed::before {
        content: '';
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        height: 100lvh;                   /* khung nhìn lớn nhất — không hở đáy khi thanh địa chỉ thu lại */
        z-index: -1;
        background-image: inherit;        /* lấy đúng ảnh từ style inline của section */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
    }
}
/* ═══ THƯ VIỆN ẢNH (LP2 · Thư viện ảnh) ═══
   3 kiểu xếp: masonry (giữ tỉ lệ gốc), lưới đều (cùng tỉ lệ, ảnh cắt cover),
   mosaic (cứ 5 ảnh có 1 ô lớn 2x2). Số cột / khoảng cách / tỉ lệ do widget đặt
   qua biến --gal-cols / --gal-gap / --gal-ratio, có giá trị dự phòng ở đây. */
.vt-lp2 .gallery-section { background: var(--cream); }
.vt-lp2 .gallery-grid { --gal-cols: 4; --gal-gap: 10px; --gal-ratio: 4 / 3; --gal-row: 240px; margin: 0; }

/* Hàng đều (mặc định): bề rộng mỗi ảnh tỉ lệ thuận với --ar nên cùng một hàng thì
   chiều cao bằng nhau; khoảng hở ngang và dọc đều bằng --gal-gap. Không cắt ảnh. */
.vt-lp2 .gallery-grid--justified { display: flex; flex-wrap: wrap; gap: var(--gal-gap); }
.vt-lp2 .gallery-grid--justified .gallery-item {
    flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--gal-row));
    aspect-ratio: var(--ar, 1.5);
    min-width: 0;
}
.vt-lp2 .gallery-grid--justified .gallery-item img { height: 100%; object-fit: cover; }
.vt-lp2 .gallery-item { margin: 0; position: relative; overflow: hidden; background: var(--earth-deep); }
.vt-lp2 .gallery-item img { display: block; width: 100%; max-width: none; }
.vt-lp2 .gallery-empty {
    padding: 40px; text-align: center;
    border: 2px dashed var(--earth-deep);
    color: var(--text-light); font-size: 1rem;
}

/* Giá trị dự phòng của số cột theo màn hình — dùng khi Elementor chưa sinh --gal-cols
   (ví dụ widget đang để kiểu "hàng đều" nên control Số cột bị ẩn). */
@media (max-width: 1024px) { .vt-lp2 .gallery-grid { --gal-cols: 3; } }
@media (max-width: 767px)  { .vt-lp2 .gallery-grid { --gal-cols: 2; } }

/* Masonry bằng CSS columns — giữ nguyên tỉ lệ ảnh, không cắt mép */
.vt-lp2 .gallery-grid--masonry { column-count: var(--gal-cols); column-gap: var(--gal-gap); }
/* Selector dài bất thường là có lý do: Elementor có rule
   ".elementor .elementor-widget:not(…):not(…) figure{margin:0}" ưu tiên cao hơn, nó ép
   margin của <figure> về 0 nên các ảnh cùng cột dính sát nhau. Lặp class .gallery-item
   để vượt ưu tiên đó mà không phải dùng !important.
   Khoảng hở ngang do column-gap lo, khoảng hở dọc phải nhờ margin vì CSS columns
   không có row-gap giữa các phần tử. */
.vt-lp2 .gallery-grid.gallery-grid--masonry figure.gallery-item.gallery-item {
    break-inside: avoid;
    margin: 0 0 var(--gal-gap);
    aspect-ratio: var(--ar);          /* giữ chỗ sẵn, tránh nhảy layout khi ảnh tải */
}
.vt-lp2 .gallery-grid--masonry .gallery-item img { height: 100%; object-fit: cover; }

/* Lưới đều + mosaic: mọi ô cùng tỉ lệ, ảnh phủ kín khung */
.vt-lp2 .gallery-grid--grid,
.vt-lp2 .gallery-grid--mosaic {
    display: grid;
    grid-template-columns: repeat(var(--gal-cols), minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--gal-gap);
}
/* Mosaic: lấp chỗ trống bằng ảnh phía sau, tránh để lỗ hổng khi số ảnh lẻ */
.vt-lp2 .gallery-grid--mosaic { grid-auto-flow: row dense; }
.vt-lp2 .gallery-grid--grid .gallery-item,
.vt-lp2 .gallery-grid--mosaic .gallery-item { aspect-ratio: var(--gal-ratio); }
.vt-lp2 .gallery-grid--grid .gallery-item img,
.vt-lp2 .gallery-grid--mosaic .gallery-item img { height: 100%; object-fit: cover; }
/* Ô lớn chiếm 2x2. KHÔNG dùng aspect-ratio:auto — khi đó chiều cao ô lớn chạy theo
   kích thước gốc của ảnh, kéo giãn 2 hàng nó chiếm và đẩy các ảnh nhỏ cách nhau rất xa.
   Giữ nguyên tỉ lệ khung như ô nhỏ thì chiều cao ô lớn khớp đúng 2 hàng + khoảng hở. */
@media (min-width: 768px) {
    .vt-lp2 .gallery-grid--mosaic .gallery-item:nth-child(5n + 1) {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;           /* chiều cao do lưới quyết định: đúng 2 hàng + khoảng hở */
    }
    /* Ảnh trong ô lớn phải nằm ngoài luồng, nếu không chiều cao ảnh gốc sẽ kéo giãn 2 hàng
       nó chiếm và đẩy các ảnh nhỏ cách nhau rất xa. */
    .vt-lp2 .gallery-grid--mosaic .gallery-item:nth-child(5n + 1) > * { position: absolute; inset: 0; }
    .vt-lp2 .gallery-grid--mosaic .gallery-item:nth-child(5n + 1) img { width: 100%; height: 100%; object-fit: cover; }
}

/* Thẻ <a> bọc ảnh phải cao bằng ô để lớp phủ trùng khít khung */
.vt-lp2 .vt-zoom--tile { display: block; position: relative; height: 100%; cursor: zoom-in; }
.vt-lp2 .vt-zoom--tile img { transition: transform .5s ease; }
.vt-lp2 .vt-zoom--tile::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(28, 43, 26, .35);
    opacity: 0; transition: opacity .25s;
}
.vt-lp2 .vt-zoom__icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    color: var(--forest); background: var(--gold-light);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.vt-lp2 .vt-zoom--tile:hover img { transform: scale(1.05); }
.vt-lp2 .vt-zoom--tile:hover::after,
.vt-lp2 .vt-zoom--tile:focus-visible::after { opacity: 1; }
.vt-lp2 .vt-zoom--tile:hover .vt-zoom__icon,
.vt-lp2 .vt-zoom--tile:focus-visible .vt-zoom__icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vt-lp2 .vt-zoom--tile:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
/* Máy cảm ứng không có hover: hiện sẵn nút nhỏ ở góc cho biết bấm được */
@media (hover: none) {
    .vt-lp2 .vt-zoom__icon {
        top: auto; bottom: 8px; left: auto; right: 8px;
        transform: none; opacity: .92;
        width: 38px; height: 38px;
    }
    .vt-lp2 .vt-zoom__icon svg { width: 17px; height: 17px; }
}

/* Phần chữ dưới ảnh */
/* ── Phần chữ: vạch vàng dẫn, tiêu đề serif, dòng phụ in nghiêng, ý chính dạng thẻ ── */
.vt-lp2 .gallery-text { margin-top: 40px; }
.vt-lp2 .gallery-text--center { text-align: center; }
.vt-lp2 .gallery-text--center .section-lead { margin-left: auto; margin-right: auto; }
/* Vạch vàng ngắn phía trên — mở đầu khối chữ cho đỡ trống trải */
.vt-lp2 .gallery-text::before {
    content: '';
    display: block;
    width: 54px; height: 2px;
    background: var(--gold);
    margin-bottom: 22px;
}
.vt-lp2 .gallery-text--center::before { margin-left: auto; margin-right: auto; }
.vt-lp2 .gallery-text .section-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 12px; }
/* Dòng phụ dùng chữ serif in nghiêng — cùng ngôn ngữ với các câu trích dẫn của trang */
.vt-lp2 .gallery-text .section-lead {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.08rem, 1.9vw, 1.35rem);
    line-height: 1.6;
    color: var(--forest-mid);
}
/* Ý chính: 3 thẻ ngang hàng, viền vàng phía trên thay cho dấu chấm đầu dòng */
.vt-lp2 .gallery-points {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 30px;
    text-align: left;
}
.vt-lp2 .gallery-points li {
    position: relative;
    padding: 20px 22px;
    background: rgba(255, 255, 255, .72);
    border-top: 2px solid var(--gold);
    font-size: 1.02rem; line-height: 1.7;
    color: #3D3D3D;
}
.vt-lp2 .gallery-points strong { color: var(--forest); font-weight: 700; }

/* Nền ảnh / video → chữ sáng */
.vt-lp2 .vt-bg-text--light .gallery-points li { color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .1); }
.vt-lp2 .vt-bg-text--light .gallery-text .section-lead { color: rgba(255, 255, 255, .9); }
.vt-lp2 .vt-bg-text--light .gallery-points strong { color: #fff; }

@media (max-width: 768px) {
    .vt-lp2 .gallery-text { margin-top: 28px; }
    .vt-lp2 .gallery-text::before { margin-bottom: 16px; }
    .vt-lp2 .gallery-points { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
    .vt-lp2 .gallery-points li { font-size: 1rem; line-height: 1.7; padding: 16px 18px; }
}

/* ── Nút qua lại trong hộp xem ảnh (chỉ hiện khi mở cả bộ ảnh) ── */
.vt-lightbox__nav {
    position: absolute; top: 50%; z-index: 2;
    transform: translateY(-50%);
    display: none; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    font-size: 2.2rem; line-height: 1; color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.vt-lightbox.has-nav .vt-lightbox__nav { display: flex; }
.vt-lightbox__nav--prev { left: 12px; }
.vt-lightbox__nav--next { right: 12px; }
.vt-lightbox__nav:hover,
.vt-lightbox__nav:focus-visible { background: #D4AE42; color: #1C2B1A; outline: none; }
@media (max-width: 768px) {
    .vt-lightbox__nav { width: 44px; height: 44px; font-size: 1.8rem; }
    .vt-lightbox__nav--prev { left: 6px; }
    .vt-lightbox__nav--next { right: 6px; }
}

/* Danh sách ý chính khi căn giữa: căn giữa CẢ KHỐI, các dòng vẫn thẳng hàng trái với nhau.
   Trước đó mỗi <li> tự căn giữa nên dòng dài ngắn khác nhau làm dấu đầu dòng so le. */
/* Máy cảm ứng: nút phóng to nhỏ lại cho đỡ rối khi nhiều ảnh trên một màn */
@media (hover: none) {
    .vt-lp2 .vt-zoom--tile .vt-zoom__icon { width: 32px; height: 32px; opacity: .85; bottom: 6px; right: 6px; }
    .vt-lp2 .vt-zoom--tile .vt-zoom__icon svg { width: 15px; height: 15px; }
}

/* Chữ nằm trên ảnh (mặc định) → khoảng cách phải nằm DƯỚI khối chữ, không phải trên.
   .gallery-text lúc đó là con đầu tiên của .container. */
.vt-lp2 .gallery-text:first-child { margin-top: 0; margin-bottom: 40px; }
@media (max-width: 768px) {
    .vt-lp2 .gallery-text:first-child { margin-bottom: 26px; }
}

/* ═══ ĐƠN VỊ PHÁT TRIỂN ═══
   Nằm giữa Thực chứng (nền trắng) và Chính sách giữ chỗ (nền tối) nên dùng nền kem.
   Ảnh một bên, bên kia là logo · giới thiệu · con số · cam kết · nút. */
.vt-lp2 .dev-section { background: var(--cream); }
.vt-lp2 .dev-grid {
    --dev-col: 44%;
    --dev-gap: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 44px;
}
/* Ảnh: mặc định hiện trọn theo tỉ lệ gốc (không đặt chiều cao) — chọn tỉ lệ trong widget thì mới cắt */
.vt-lp2 .dev-media { position: relative; overflow: hidden; background: var(--earth-deep); }
.vt-lp2 .dev-media img {
    display: block;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center;
}

.vt-lp2 .dev-logo { margin-bottom: 18px; }
.vt-lp2 .dev-logo img { display: block; width: auto; max-width: 220px; height: 56px; object-fit: contain; }
.vt-lp2 .dev-brand {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 600; line-height: 1.3;
    color: var(--forest);
    margin-bottom: 10px;
}
.vt-lp2 .dev-desc { font-size: 1.08rem; line-height: 1.8; color: #3D3D3D; max-width: 56ch; }
.vt-lp2 .dev-desc strong { color: var(--forest); font-weight: 700; }

.vt-lp2 .dev-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 26px;
}
.vt-lp2 .dev-stat { padding: 14px 16px; background: var(--white); border-left: 3px solid var(--gold); }
.vt-lp2 .dev-stat-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem; font-weight: 600; line-height: 1.05;
    color: var(--forest);
}
.vt-lp2 .dev-stat-unit { margin-left: 4px; font-family: 'Lato', sans-serif; font-size: .95rem; font-weight: 700; color: var(--gold); }
.vt-lp2 .dev-stat-label { display: block; margin-top: 5px; font-size: .92rem; line-height: 1.5; color: #3D3D3D; }

.vt-lp2 .dev-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.vt-lp2 .dev-points li { position: relative; padding-left: 30px; font-size: 1.05rem; line-height: 1.75; color: #3D3D3D; }
/* Dấu tick vàng vẽ bằng CSS — cam kết nên dùng dấu tick thay chấm tròn */
.vt-lp2 .dev-points li::before {
    content: '';
    position: absolute; left: 7px; top: .5em;
    width: 7px; height: 13px;
    border: 2px solid var(--gold);
    border-top: 0; border-left: 0;
    transform: rotate(45deg);
}
.vt-lp2 .dev-points strong { color: var(--forest); font-weight: 700; }
.vt-lp2 .dev-cta { display: inline-flex; align-items: center; margin-top: 28px; }

@media (min-width: 1024px) {
    .vt-lp2 .dev-grid--media-left {
        grid-template-columns: minmax(0, var(--dev-col)) minmax(0, 1fr);
        gap: var(--dev-gap);
    }
    .vt-lp2 .dev-grid--media-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--dev-col));
        gap: var(--dev-gap);
    }
    /* HTML luôn để ảnh trước (điện thoại xem ảnh trước), desktop đảo bằng order */
    .vt-lp2 .dev-grid--media-right .dev-media { order: 2; }
    .vt-lp2 .dev-grid--no-media { grid-template-columns: 1fr; max-width: 820px; }
    /* Không có ảnh thì khối chữ đã hẹp sẵn 820px — bỏ trần 56ch để chữ không xuống dòng sớm */
    .vt-lp2 .dev-grid--no-media .dev-desc { max-width: none; }
}

@media (max-width: 768px) {
    .vt-lp2 .dev-grid { margin-top: 30px; gap: 24px; }
    .vt-lp2 .dev-logo { margin-bottom: 14px; }
    .vt-lp2 .dev-desc { font-size: 1rem; line-height: 1.75; }
    .vt-lp2 .dev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
    /* Số ô lẻ thì ô cuối trải hết hàng, không bị hụt một nửa */
    .vt-lp2 .dev-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .vt-lp2 .dev-stat-num { font-size: 1.6rem; }
    .vt-lp2 .dev-points { gap: 12px; margin-top: 20px; }
    .vt-lp2 .dev-points li { font-size: 1rem; padding-left: 26px; }
    .vt-lp2 .dev-cta { width: 100%; justify-content: center; margin-top: 22px; }
}

/* Nền ảnh / video → chữ sáng, nối tiếp cơ chế .vt-bg-text--light */
.vt-lp2 .vt-bg-text--light .dev-brand { color: #fff; }
.vt-lp2 .vt-bg-text--light .dev-desc,
.vt-lp2 .vt-bg-text--light .dev-points li { color: rgba(255, 255, 255, .86); }
.vt-lp2 .vt-bg-text--light .dev-desc strong,
.vt-lp2 .vt-bg-text--light .dev-points strong { color: #fff; }
.vt-lp2 .vt-bg-text--light .dev-stat { background: rgba(255, 255, 255, .1); }
.vt-lp2 .vt-bg-text--light .dev-stat-num { color: #fff; }
.vt-lp2 .vt-bg-text--light .dev-stat-label { color: rgba(255, 255, 255, .8); }