/* =========================================================================
   VINHOMES GREEN PARADISE — POPUP FORM (redesign 2026-07)
   Bảng màu lấy từ logo: #003619 xanh rêu · #00A62A ngọc lục bảo · #C18F10→#FECE59 gold
   File độc lập, enqueue từ flatsome-child/functions.php (handle: vgp_popup_css)
   ========================================================================= */

:root{
  --vgp-g900:#00220E;
  --vgp-g800:#003619;
  --vgp-g700:#054A24;
  --vgp-g600:#0A6231;
  --vgp-emerald:#00A62A;
  --vgp-gold-d:#B8860B;
  --vgp-gold:#E0AC3A;
  --vgp-gold-l:#FECE59;
  --vgp-cream:#FFFCF5;
  --vgp-ink:#16281D;
  --vgp-muted:#71857A;
  --vgp-line:#E4E9E4;
}

/* ---------------------------------------------------------------- OVERLAY */
.pum-overlay.vgp-overlay,
#pum-4075.pum-overlay{
  background:radial-gradient(120% 130% at 50% 0%, rgba(5,74,36,.62) 0%, rgba(0,26,11,.90) 100%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(115%);
  backdrop-filter:blur(7px) saturate(115%);
  padding:24px 16px !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
/* PUM set display:block inline khi mở → cần !important để ép flex */
.pum-overlay.vgp-overlay.pum-active,
#pum-4075.pum-overlay.pum-active{
  display:flex !important;
  align-items:center;
  justify-content:center;
}

/* Vô hiệu hoá khung mặc định của PUM theme, .vgp-popup mới là "card" thật */
.pum-overlay.vgp-overlay .pum-container,
#pum-4075 .pum-container{
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  margin:auto !important;
  transform:none !important;
  width:min(960px,100%) !important;
  max-width:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.pum-overlay.vgp-overlay .pum-content,
#pum-4075 .pum-content{ padding:0 !important; margin:0 !important; outline:none !important; }
.pum-overlay.vgp-overlay .pum-title,
#pum-4075 .pum-title{ display:none !important; }

/* ------------------------------------------------------------ NÚT ĐÓNG (×) */
.pum-overlay.vgp-overlay .pum-close,
#pum-4075 .pum-close{
  position:absolute !important;
  top:14px !important; right:14px !important; left:auto !important; bottom:auto !important;
  width:38px !important; height:38px !important;
  padding:0 !important;
  font-size:0 !important; line-height:0 !important; text-shadow:none !important;
  border:1px solid rgba(0,54,25,.14) !important;
  border-radius:50% !important;
  background:#fff !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 4px 14px -4px rgba(0,40,18,.30) !important;
  cursor:pointer;
  z-index:6;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.pum-overlay.vgp-overlay .pum-close::before,
#pum-4075 .pum-close::before{
  content:"";
  position:absolute; inset:0;
  background:no-repeat center/16px 16px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054A24' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.pum-overlay.vgp-overlay .pum-close:hover,
#pum-4075 .pum-close:hover{
  background:var(--vgp-gold) !important;
  border-color:var(--vgp-gold-l) !important;
  transform:rotate(90deg);
}
.pum-overlay.vgp-overlay .pum-close:hover::before,
#pum-4075 .pum-close:hover::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003619' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ============================================================ CARD CHÍNH */
.vgp-popup{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  border-radius:22px;
  overflow:hidden;
  background:var(--vgp-cream);
  box-shadow:0 34px 80px -20px rgba(0,26,11,.62), 0 0 0 1px rgba(255,255,255,.10);
  font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--vgp-ink);
  text-align:left;
  isolation:isolate;
}
.vgp-popup *,
.vgp-popup *::before,
.vgp-popup *::after{ box-sizing:border-box; }
.vgp-popup p{ margin:0; }

/* ------------------------------------------------------- CỘT TRÁI (BRAND) */
.vgp-popup__aside{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:38px 32px 32px;
  background:
    radial-gradient(115% 85% at 50% -12%, rgba(224,172,58,.28) 0%, rgba(224,172,58,0) 58%),
    linear-gradient(168deg,#0A6231 0%,#054A24 38%,#003619 72%,#00220E 100%);
  color:#fff;
  overflow:hidden;
}
/* vân sáng chéo rất nhẹ */
.vgp-popup__aside::before{
  content:"";
  position:absolute; inset:-40% -20% auto -20%; height:150%;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px);
  pointer-events:none;
}
/* quầng gold dưới đáy */
.vgp-popup__aside::after{
  content:"";
  position:absolute; left:-30%; bottom:-45%; width:160%; height:70%;
  background:radial-gradient(closest-side, rgba(254,206,89,.20), rgba(254,206,89,0) 70%);
  pointer-events:none;
}
.vgp-popup__aside > *{ position:relative; z-index:1; }

.vgp-aside__logo{
  display:block;
  width:min(190px,62%);
  height:auto;
  margin:0 0 20px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.vgp-aside__rule{
  width:56px; height:3px; border-radius:3px; margin:0 0 16px;
  background:linear-gradient(90deg,var(--vgp-gold-l),var(--vgp-gold-d));
}
.vgp-aside__title{
  margin:0 0 18px !important;
  font-size:23px; line-height:1.28; font-weight:700; letter-spacing:.2px;
  color:#fff; text-transform:none;
}
.vgp-aside__title span{
  display:block;
  background:linear-gradient(92deg,var(--vgp-gold-l) 0%,var(--vgp-gold) 45%,var(--vgp-gold-d) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.vgp-aside__list{
  margin:0 0 auto !important;
  padding:0 !important;
  list-style:none !important;
}
.vgp-aside__list li{
  position:relative;
  margin:0 0 12px;
  padding-left:29px;
  font-size:14px; line-height:1.5; font-weight:500;
  color:rgba(255,255,255,.90);
  list-style:none !important;
}
.vgp-aside__list li::before{
  content:"";
  position:absolute; left:0; top:1px;
  width:19px; height:19px; border-radius:50%;
  background:rgba(254,206,89,.16) no-repeat center/11px 11px
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FECE59' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px rgba(254,206,89,.34);
}
.vgp-aside__hotline{
  display:flex; align-items:center; gap:12px;
  margin-top:24px; padding:13px 16px;
  border-radius:14px;
  border:1px solid rgba(254,206,89,.30);
  background:rgba(0,34,14,.36);
  color:#fff !important;
  text-decoration:none !important;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.vgp-aside__hotline:hover{
  border-color:rgba(254,206,89,.70);
  background:rgba(0,34,14,.56);
  transform:translateY(-1px);
}
.vgp-aside__hotline i{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(140deg,var(--vgp-gold-l),var(--vgp-gold-d)) no-repeat center/16px 16px
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003619' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.94.36 1.86.7 2.73a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.35-1.27a2 2 0 0 1 2.11-.45c.87.34 1.79.57 2.73.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.vgp-aside__hotline em{ font-style:normal; display:block; min-width:0; }
.vgp-aside__hotline span{ display:block; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:rgba(255,255,255,.62); }
.vgp-aside__hotline strong{ display:block; font-size:19px; font-weight:700; letter-spacing:.4px; color:var(--vgp-gold-l); }

/* -------------------------------------------------------- CỘT PHẢI (FORM) */
.vgp-popup__main{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px 38px 32px;
  background:var(--vgp-cream);
}
.vgp-popup__main::before{
  content:"";
  position:absolute; right:0; top:0; width:190px; height:190px;
  background:radial-gradient(closest-side, rgba(0,166,42,.07), rgba(0,166,42,0) 70%);
  pointer-events:none;
}
.vgp-badge{
  display:inline-flex; align-items:center; align-self:flex-start; gap:7px;
  margin-bottom:14px; padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(184,134,11,.32);
  background:linear-gradient(180deg,#FFF7E4,#FDEFCF);
  font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:#8A6408;
}
.vgp-badge::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--vgp-emerald);
  box-shadow:0 0 0 3px rgba(0,166,42,.20);
}
.vgp-main__title{
  margin:0 0 10px !important;
  font-size:27px; line-height:1.22; font-weight:800; letter-spacing:-.2px;
  color:var(--vgp-g800);
  text-wrap:balance;
}
.vgp-main__sub{
  margin:0 0 22px !important;
  font-size:14px; line-height:1.6; color:var(--vgp-muted);
}

/* ------------------------------------------------------------ CONTACT FORM 7 */
.vgp-popup .wpcf7{ margin:0; }
.vgp-popup .wpcf7-form{ margin:0; }
.vgp-form p{ margin:0 !important; }
.vgp-form .wpcf7-form-control-wrap{ display:block; width:100%; }

.vgp-field{
  position:relative;
  margin-bottom:13px;
}
.vgp-field::before{
  content:"";
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px;
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  opacity:.85;
  pointer-events:none;
  z-index:2;
}
.vgp-i-user::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054A24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.vgp-i-phone::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054A24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.94.36 1.86.7 2.73a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.35-1.27a2 2 0 0 1 2.11-.45c.87.34 1.79.57 2.73.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.vgp-i-home::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054A24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 12 3l9 6.6V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }

.vgp-form input[type="text"],
.vgp-form input[type="tel"],
.vgp-form input[type="email"],
.vgp-form select{
  width:100% !important;
  height:52px !important;
  margin:0 !important;
  padding:0 16px 0 46px !important;
  font-family:inherit;
  font-size:15px !important;
  font-weight:500;
  color:var(--vgp-ink) !important;
  background:#fff !important;
  border:1.5px solid var(--vgp-line) !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(0,54,25,.04) !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none; appearance:none;
}
.vgp-form input::placeholder{ color:#9BA9A0; opacity:1; font-weight:400; }
.vgp-form input[type="text"]:focus,
.vgp-form input[type="tel"]:focus,
.vgp-form input[type="email"]:focus,
.vgp-form select:focus{
  outline:none !important;
  border-color:var(--vgp-emerald) !important;
  box-shadow:0 0 0 4px rgba(0,166,42,.13) !important;
}
.vgp-field:focus-within::before{ opacity:1; }

/* select + mũi tên riêng */
.vgp-select::after{
  content:"";
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  background:no-repeat center/18px 18px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054A24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:2;
}
.vgp-form select{ padding-right:44px !important; cursor:pointer; }

/* nút gửi */
.vgp-actions{ margin-top:18px; position:relative; }
.vgp-form input[type="submit"],
.vgp-form .vgp-submit{
  display:block;
  width:100% !important;
  height:54px !important;
  margin:0 !important;
  padding:0 18px !important;
  font-family:inherit;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.6px;
  text-transform:uppercase;
  line-height:1 !important;
  color:var(--vgp-g900) !important;
  background:linear-gradient(96deg,#FEDD86 0%,var(--vgp-gold-l) 26%,var(--vgp-gold) 62%,var(--vgp-gold-d) 100%) !important;
  background-size:180% 100% !important;
  background-position:0% 50% !important;
  border:0 !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px -8px rgba(184,134,11,.72), inset 0 1px 0 rgba(255,255,255,.55) !important;
  cursor:pointer;
  transition:background-position .45s ease, transform .18s ease, box-shadow .25s ease;
  text-shadow:none !important;
}
.vgp-form input[type="submit"]:hover,
.vgp-form .vgp-submit:hover{
  background-position:100% 50% !important;
  transform:translateY(-2px);
  box-shadow:0 16px 30px -10px rgba(184,134,11,.85), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.vgp-form input[type="submit"]:active,
.vgp-form .vgp-submit:active{ transform:translateY(0); }

.vgp-note{
  display:flex; align-items:flex-start; gap:8px;
  margin:14px 0 0 !important;
  font-size:12.5px; line-height:1.5; color:var(--vgp-muted);
}
.vgp-note::before{
  content:"";
  flex:0 0 auto; width:15px; height:15px; margin-top:1px;
  background:no-repeat center/15px 15px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A62A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* trạng thái CF7 */
.vgp-popup .wpcf7-not-valid-tip{
  display:flex; align-items:center; gap:5px;
  margin:5px 0 0 2px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  font-size:12px !important;
  font-weight:600;
  color:#C2331F !important;
}
.vgp-popup .wpcf7-not-valid-tip::before{
  content:"";
  flex:0 0 auto; width:13px; height:13px;
  background:no-repeat center/13px 13px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2331F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}
.vgp-popup .wpcf7-form-control.wpcf7-not-valid{
  border-color:#E1755F !important;
  box-shadow:0 0 0 4px rgba(226,90,60,.10) !important;
}
.vgp-popup .wpcf7-response-output{
  margin:16px 0 0 !important;
  padding:12px 14px !important;
  font-size:13.5px; line-height:1.5;
  border-width:1.5px !important;
  border-radius:12px !important;
}
.vgp-popup .wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--vgp-emerald) !important;
  background:rgba(0,166,42,.07);
  color:#046B2A;
}
.vgp-popup .wpcf7 form.invalid .wpcf7-response-output,
.vgp-popup .wpcf7 form.unaccepted .wpcf7-response-output,
.vgp-popup .wpcf7 form.failed .wpcf7-response-output{
  border-color:#E1755F !important;
  background:rgba(226,90,60,.07);
  color:#A93B26;
}
.vgp-popup .wpcf7-spinner{ position:absolute; right:16px; top:50%; transform:translateY(-50%); margin:0; }

/* ==================================================== TABLET / MOBILE ==== */
@media (max-width:860px){
  .pum-overlay.vgp-overlay,
  #pum-4075.pum-overlay{ padding:14px 12px !important; }

  .pum-overlay.vgp-overlay .pum-container,
  #pum-4075 .pum-container{ width:min(480px,100%) !important; }

  .vgp-popup{
    grid-template-columns:1fr;
    border-radius:18px;
  }
  .vgp-popup__aside{
    padding:26px 22px 22px;
    text-align:center;
    align-items:center;
  }
  .vgp-aside__logo{ width:118px; margin:0 auto 13px; }
  .vgp-aside__rule{ margin:0 auto 11px; width:48px; }
  .vgp-aside__title{ font-size:18px; margin-bottom:0 !important; }
  /* gọn màn hình nhỏ: ẩn list + hotline, dồn chỗ cho form */
  .vgp-aside__list{ display:none; }
  .vgp-aside__hotline{ display:none; }

  .vgp-popup__main{ padding:24px 20px 24px; }
  .vgp-badge{ margin-bottom:12px; }
  .vgp-main__title{ font-size:21px; }
  .vgp-main__sub{ font-size:13.5px; margin-bottom:18px !important; }

  .vgp-form input[type="text"],
  .vgp-form input[type="tel"],
  .vgp-form input[type="email"],
  .vgp-form select{
    height:50px !important;
    font-size:16px !important; /* chặn iOS auto-zoom */
  }
  .vgp-form input[type="submit"],
  .vgp-form .vgp-submit{ height:52px !important; font-size:14px !important; }

  /* nút đóng nằm trên nền xanh -> đảo màu */
  .pum-overlay.vgp-overlay .pum-close,
  #pum-4075 .pum-close{
    top:12px !important; right:12px !important; width:34px !important; height:34px !important;
    background:rgba(0,34,14,.42) !important;
    border-color:rgba(255,255,255,.34) !important;
    box-shadow:none !important;
  }
  .pum-overlay.vgp-overlay .pum-close::before,
  #pum-4075 .pum-close::before{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size:15px 15px;
  }
}

/* điện thoại nhỏ (360px / màn thấp) — nén lại để vừa 1 màn hình */
@media (max-width:400px){
  .vgp-popup{ border-radius:16px; }
  .vgp-popup__aside{ padding:18px 16px 16px; }
  .vgp-aside__logo{ width:104px; margin-bottom:10px; }
  .vgp-aside__rule{ margin-bottom:9px; }
  .vgp-aside__title{ font-size:17px; line-height:1.25; }
  .vgp-popup__main{ padding:18px 16px 20px; }
  .vgp-badge{ margin-bottom:10px; padding:5px 11px; font-size:10.5px; }
  .vgp-main__title{ font-size:19px; }
  .vgp-main__sub{ font-size:13px; line-height:1.5; margin-bottom:14px !important; }
  .vgp-field{ margin-bottom:10px; }
  .vgp-form input[type="text"],
  .vgp-form input[type="tel"],
  .vgp-form input[type="email"],
  .vgp-form select{ height:48px !important; padding-left:44px !important; }
  .vgp-actions{ margin-top:14px; }
  .vgp-form input[type="submit"],
  .vgp-form .vgp-submit{ height:50px !important; }
  .vgp-note{ margin-top:11px !important; font-size:11.5px; }
}

/* màn hình thấp: cho phép cuộn trong card */
@media (max-height:700px) and (min-width:861px){
  .vgp-popup__aside{ padding:28px 28px 24px; }
  .vgp-popup__main{ padding:28px 30px 26px; }
  .vgp-aside__logo{ width:150px; margin-bottom:14px; }
  .vgp-aside__title{ font-size:20px; margin-bottom:14px !important; }
  .vgp-main__title{ font-size:23px; }
}

/* hạn chế chuyển động */
@media (prefers-reduced-motion:reduce){
  .vgp-popup *,
  .pum-overlay.vgp-overlay .pum-close{ transition:none !important; }
}