/* ==========================================================================
   Vplace - Giải pháp Hybrid — style.css
   Prefix class: vpgp-  (Vplace Giải Pháp) — tách biệt hoàn toàn với các
   plugin Vplace khác (vp-, vpb-, vpg-) để không xung đột CSS khi cài
   song song trên cùng site.
   Không set font-family riêng — kế thừa font của theme (Flatsome hay
   theme bất kỳ) để đồng bộ toàn site; chỉ set độ đậm/kích thước.
   ========================================================================== */

:root{
	--vpgp-accent:#ff6a1a;
	--vpgp-accent-2:#ffb066;
	--vpgp-dark:#0a1a33;
	--vpgp-dark-2:#0f2452;
	--vpgp-light-bg:#f4f7fb;
	--vpgp-text-dark:#0b1830;
	--vpgp-white:#ffffff;
	--vpgp-muted:#6b7690;
	--vpgp-radius-lg:20px;
	--vpgp-radius-md:14px;
	--vpgp-ease:cubic-bezier(.19,1,.22,1);
	--vpgp-shadow-sm:0 2px 8px rgba(10,26,51,.06), 0 1px 2px rgba(10,26,51,.05);
	--vpgp-shadow-md:0 14px 34px rgba(10,26,51,.12), 0 4px 10px rgba(10,26,51,.06);
	--vpgp-shadow-lg:0 28px 60px rgba(10,26,51,.22), 0 10px 20px rgba(10,26,51,.10);
}

.vpgp-page{ overflow-x:clip; color:var(--vpgp-text-dark); }
.vpgp-page *{ box-sizing:border-box; }
.vpgp-page img{ max-width:100%; display:block; }
.vpgp-page a{ text-decoration:none; }

.vpgp-container{
	max-width:1200px;
	margin:0 auto;
	padding:0 24px;
}

/* ---------- Reveal-on-scroll (an toàn: mặc định LUÔN hiển thị) ---------- */
.vpgp-reveal{ opacity:1; transform:none; }
.vpgp-reveal.vpgp-pre{
	opacity:0;
	transform:translateY(32px);
	transition:opacity .8s var(--vpgp-ease), transform .8s var(--vpgp-ease);
	transition-delay:var(--vpgp-delay,0ms);
}
.vpgp-reveal.vpgp-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
	.vpgp-reveal.vpgp-pre{ transition:none; opacity:1; transform:none; }
}

/* ---------- Khối chung ---------- */
.vpgp-section{ padding:96px 0; position:relative; }
.vpgp-section--dark{ background:linear-gradient(180deg,var(--vpgp-dark) 0%,var(--vpgp-dark-2) 100%); color:var(--vpgp-white); }
.vpgp-section:not(.vpgp-section--dark){ background:var(--vpgp-light-bg); }
.vpgp-section:nth-of-type(odd):not(.vpgp-section--dark){ background:var(--vpgp-white); }

.vpgp-section__head{ max-width:720px; margin:0 auto 56px; text-align:center; }
.vpgp-section__head h2{
	font-size:clamp(24px,3.4vw,36px);
	font-weight:800;
	letter-spacing:.02em;
	margin:0 0 14px;
	line-height:1.25;
	color:inherit;
}
.vpgp-section__head p{ margin:0; font-size:16px; color:var(--vpgp-muted); line-height:1.6; }
.vpgp-section__head--light p{ color:rgba(255,255,255,.72); }

.vpgp-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--vpgp-accent-2);
	background:rgba(255,106,26,.12);
	border:1px solid rgba(255,106,26,.35);
	padding:8px 16px;
	border-radius:999px;
	margin:0 0 20px;
}

/* ---------- Nút bấm ---------- */
.vpgp-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:15px 28px;
	border-radius:999px;
	font-weight:700;
	font-size:15px;
	line-height:1;
	transition:transform .35s var(--vpgp-ease), box-shadow .35s var(--vpgp-ease), background-color .3s ease;
	white-space:nowrap;
}
.vpgp-btn__icon{ width:16px; height:16px; transition:transform .35s var(--vpgp-ease); }
.vpgp-btn--accent{
	background:linear-gradient(135deg,var(--vpgp-accent),#ff8a3d);
	color:#fff;
	box-shadow:0 10px 24px rgba(255,106,26,.35), 0 2px 6px rgba(255,106,26,.25);
}
.vpgp-btn--accent:hover{
	transform:translateY(-3px);
	box-shadow:0 18px 34px rgba(255,106,26,.45), 0 4px 10px rgba(255,106,26,.3);
}
.vpgp-btn--accent:hover .vpgp-btn__icon{ transform:translateX(4px); }
.vpgp-btn--ghost{
	background:rgba(255,255,255,.06);
	color:#fff;
	border:1.5px solid rgba(255,255,255,.4);
	backdrop-filter:blur(4px);
}
.vpgp-btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-3px); }

/* ---------- Media / placeholder ---------- */
.vpgp-media{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.vpgp-placeholder{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:140px;
	background:linear-gradient(135deg,rgba(10,26,51,.06),rgba(10,26,51,.02));
	color:var(--vpgp-muted);
	font-size:13px;
	font-weight:600;
	text-align:center;
	padding:16px;
}
.vpgp-section--dark .vpgp-placeholder,
.vpgp-hero__bg .vpgp-placeholder,
.vpgp-cta__bg .vpgp-placeholder{
	background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
	color:rgba(255,255,255,.55);
}
.vpgp-placeholder__label{ position:relative; z-index:1; max-width:80%; }
.vpgp-placeholder__corner{ position:absolute; width:18px; height:18px; border:2px solid currentColor; opacity:.5; }
.vpgp-placeholder__corner--tl{ top:10px; left:10px; border-right:none; border-bottom:none; }
.vpgp-placeholder__corner--tr{ top:10px; right:10px; border-left:none; border-bottom:none; }
.vpgp-placeholder__corner--bl{ bottom:10px; left:10px; border-right:none; border-top:none; }
.vpgp-placeholder__corner--br{ bottom:10px; right:10px; border-left:none; border-top:none; }

/* ---------- Card với hiệu ứng chiều sâu khi hover ---------- */
.vpgp-card{
	border-radius:var(--vpgp-radius-md);
	background:var(--vpgp-white);
	box-shadow:var(--vpgp-shadow-sm);
	transition:transform .45s var(--vpgp-ease), box-shadow .45s var(--vpgp-ease), border-color .45s var(--vpgp-ease);
	will-change:transform;
}
.vpgp-card:hover{ transform:translateY(-10px); box-shadow:var(--vpgp-shadow-lg); }
.vpgp-card--dark{
	background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.vpgp-card--dark:hover{ box-shadow:0 26px 54px rgba(0,0,0,.5); border-color:var(--vpgp-accent); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.vpgp-hero{
	position:relative;
	min-height:min(760px,100vh);
	display:flex;
	align-items:center;
	color:#fff;
	overflow:hidden;
	background:var(--vpgp-dark);
}
.vpgp-hero__bg{ position:absolute; inset:0; z-index:0; }
.vpgp-hero__bg-img{ width:100%; height:100%; object-fit:cover; border-radius:0; opacity:.75; }
.vpgp-hero__bg .vpgp-placeholder{ height:100%; min-height:100%; border-radius:0; }
.vpgp-hero__overlay{
	position:absolute; inset:0;
	background:linear-gradient(115deg, var(--vpgp-dark) 12%, rgba(10,26,51,.88) 38%, rgba(10,26,51,.55) 66%, rgba(10,26,51,.35) 100%);
}
.vpgp-hero__inner{ position:relative; z-index:1; padding-top:72px; padding-bottom:72px; max-width:820px; }
.vpgp-hero__title{
	font-size:clamp(32px,5.4vw,58px);
	font-weight:900;
	line-height:1.08;
	letter-spacing:.01em;
	margin:0 0 18px;
	text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.vpgp-hero__subtitle{ font-size:clamp(16px,2vw,21px); font-weight:600; margin:0 0 10px; color:#fff; }
.vpgp-hero__desc{ font-size:15px; color:rgba(255,255,255,.72); margin:0 0 34px; max-width:560px; }
.vpgp-hero__ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:52px; }
.vpgp-hero__stats{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(255,255,255,.18); padding-top:28px; }
.vpgp-stat{ display:flex; align-items:center; gap:12px; padding-right:36px; margin-right:36px; border-right:1px solid rgba(255,255,255,.18); }
.vpgp-stat:last-child{ border-right:none; margin-right:0; padding-right:0; }
.vpgp-stat__icon{ width:22px; height:22px; color:var(--vpgp-accent-2); flex-shrink:0; }
.vpgp-stat__num{ font-size:20px; font-weight:800; line-height:1; }
.vpgp-stat__label{ font-size:12px; color:rgba(255,255,255,.65); grid-column:2; }
.vpgp-stat{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.vpgp-stat__icon{ grid-row:1/3; }

/* ==========================================================================
   2. DẢI TÍNH NĂNG NHANH
   ========================================================================== */
.vpgp-badges{ background:var(--vpgp-dark-2); position:relative; z-index:2; }
.vpgp-badges__row{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
}
.vpgp-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:26px 16px;
	border-right:1px solid rgba(255,255,255,.08);
	color:#fff;
	transition:background-color .3s ease;
}
.vpgp-badge:last-child{ border-right:none; }
.vpgp-badge:hover{ background:rgba(255,255,255,.05); }
.vpgp-badge__icon{
	display:inline-flex;
	width:26px; height:26px;
	color:var(--vpgp-accent-2);
	flex-shrink:0;
	transition:transform .4s var(--vpgp-ease);
}
.vpgp-badge:hover .vpgp-badge__icon{ transform:scale(1.18) rotate(-6deg); }
.vpgp-badge__text{ font-size:14px; font-weight:700; }

/* ==========================================================================
   3. MỘT KHÔNG GIAN – MỌI ĐIỂM CẦU
   ========================================================================== */
.vpgp-s3__layout{
	display:grid;
	grid-template-columns:1fr 1.35fr 1fr auto;
	gap:20px;
	align-items:stretch;
}
.vpgp-s3__col{ display:flex; flex-direction:column; gap:20px; }
.vpgp-s3__card{ overflow:hidden; position:relative; }
.vpgp-s3__card .vpgp-media{ aspect-ratio:4/3; }
.vpgp-s3__card-label{
	position:absolute; left:14px; bottom:14px; right:14px;
	color:#fff; font-size:13px; font-weight:700;
	text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.vpgp-s3__card::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(10,26,51,0) 45%,rgba(10,26,51,.75) 100%);
	pointer-events:none;
}
.vpgp-s3__center{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
	min-height:340px;
}
.vpgp-s3__center-img{ position:absolute; inset:0; }
.vpgp-s3__center::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(10,26,51,0) 40%,rgba(10,26,51,.82) 100%);
}
.vpgp-s3__center-label{
	position:relative; z-index:1; padding:22px;
	color:#fff; font-size:17px; font-weight:800;
}
.vpgp-s3__globe{
	width:150px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	text-align:center;
	padding:18px 10px;
	border-radius:var(--vpgp-radius-md);
	background:linear-gradient(160deg,var(--vpgp-dark),var(--vpgp-dark-2));
	color:#fff;
	box-shadow:var(--vpgp-shadow-md);
}
.vpgp-s3__globe-icon{ width:38px; height:38px; color:var(--vpgp-accent-2); animation:vpgp-spin 14s linear infinite; }
.vpgp-s3__globe p{ font-size:11px; font-weight:700; letter-spacing:.03em; margin:0; line-height:1.5; }
@keyframes vpgp-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){ .vpgp-s3__globe-icon{ animation:none; } }

/* ==========================================================================
   4. TRẢI NGHIỆM HYBRID TOÀN DIỆN
   ========================================================================== */
.vpgp-s4__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.vpgp-s4__card{ padding:32px 26px; text-align:left; }
.vpgp-s4__icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:14px;
	background:linear-gradient(135deg,rgba(255,106,26,.22),rgba(255,106,26,.06));
	color:var(--vpgp-accent-2);
	margin-bottom:18px;
	transition:transform .4s var(--vpgp-ease);
}
.vpgp-s4__icon svg{ width:26px; height:26px; }
.vpgp-s4__card:hover .vpgp-s4__icon{ transform:scale(1.12) rotate(-4deg); }
.vpgp-s4__card h3{ font-size:18px; font-weight:800; margin:0 0 8px; color:#fff; }
.vpgp-s4__card p{ font-size:14px; color:rgba(255,255,255,.66); margin:0; line-height:1.6; }

/* ==========================================================================
   5. CẤU HÌNH HYBRID PREMIUM
   ========================================================================== */
.vpgp-s5__layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:28px; align-items:start; }
.vpgp-s5__table-wrap{ overflow:hidden; }
.vpgp-s5__table{ width:100%; border-collapse:collapse; font-size:14px; }
.vpgp-s5__table thead th{
	text-align:left; padding:16px 18px;
	background:linear-gradient(135deg,var(--vpgp-dark),var(--vpgp-dark-2));
	color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
.vpgp-s5__table thead th:nth-child(2){ color:var(--vpgp-accent-2); text-align:center; }
.vpgp-s5__table tbody td{ padding:14px 18px; border-bottom:1px solid rgba(10,26,51,.08); vertical-align:top; }
.vpgp-s5__table tbody tr:last-child td{ border-bottom:none; }
.vpgp-s5__table tbody tr{ transition:background-color .25s ease; }
.vpgp-s5__table tbody tr:hover{ background:rgba(255,106,26,.05); }
.vpgp-s5__table tbody td:first-child{ font-weight:700; }
.vpgp-s5__value{ display:flex; align-items:center; gap:8px; justify-content:center; text-align:center; font-weight:700; white-space:nowrap; }
.vpgp-s5__check{ width:16px; height:16px; color:#1fb27a; flex-shrink:0; }
.vpgp-s5__table tbody td:last-child{ color:var(--vpgp-muted); }
.vpgp-s5__promo{
	position:sticky; top:24px;
	overflow:hidden;
	background:linear-gradient(160deg,var(--vpgp-dark) 0%,var(--vpgp-dark-2) 100%);
	color:#fff;
}
.vpgp-s5__promo-img{ aspect-ratio:4/3; }
.vpgp-s5__promo-body{ padding:26px; display:flex; flex-direction:column; gap:8px; }
.vpgp-s5__promo-body strong{ font-size:22px; font-weight:900; letter-spacing:.04em; }
.vpgp-s5__promo-body span{ font-size:12px; font-weight:700; color:var(--vpgp-accent-2); letter-spacing:.05em; text-transform:uppercase; }
.vpgp-s5__promo-body p{ margin:8px 0 0; font-size:13px; color:rgba(255,255,255,.66); line-height:1.6; }

/* ==========================================================================
   6. QUY TRÌNH VẬN HÀNH
   ========================================================================== */
.vpgp-s6__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; }
.vpgp-s6__step{ padding:30px 24px; text-align:left; position:relative; }
.vpgp-s6__num{
	display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:12px;
	background:linear-gradient(135deg,var(--vpgp-accent),#ff8a3d);
	color:#fff; font-weight:900; font-size:15px;
	margin-bottom:16px;
	box-shadow:0 10px 20px rgba(255,106,26,.3);
}
.vpgp-s6__step h3{ font-size:16px; font-weight:800; margin:0 0 8px; }
.vpgp-s6__step p{ font-size:13.5px; color:var(--vpgp-muted); margin:0; line-height:1.6; }

/* ==========================================================================
   7. THƯ VIỆN ẢNH TRẢI NGHIỆM
   ========================================================================== */
.vpgp-s7__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vpgp-s7__item{ position:relative; overflow:hidden; border-radius:var(--vpgp-radius-md); }
.vpgp-s7__img{ aspect-ratio:3/4; transition:transform .6s var(--vpgp-ease); }
.vpgp-s7__item:hover .vpgp-s7__img{ transform:scale(1.08); }
.vpgp-s7__item::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(10,26,51,0) 40%,rgba(10,26,51,.9) 100%);
}
.vpgp-s7__caption{
	position:absolute; left:16px; right:16px; bottom:16px; z-index:1;
	display:flex; flex-direction:column; gap:4px; color:#fff;
}
.vpgp-s7__caption strong{ font-size:14.5px; font-weight:800; }
.vpgp-s7__caption span{ font-size:12px; color:rgba(255,255,255,.72); }

/* ==========================================================================
   8. DỊCH VỤ BỔ SUNG
   ========================================================================== */
.vpgp-s8__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vpgp-s8__item{ overflow:hidden; text-align:center; }
.vpgp-s8__img{ aspect-ratio:4/3; }
.vpgp-s8__title{ display:block; padding:16px; font-size:14px; font-weight:800; }

/* ==========================================================================
   9. LỰA CHỌN LÝ TƯỞNG CHO
   ========================================================================== */
.vpgp-s9__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.vpgp-s9__item{
	display:flex; flex-direction:column; align-items:center; gap:14px;
	padding:30px 14px; text-align:center;
}
.vpgp-s9__icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:56px; height:56px; border-radius:50%;
	background:linear-gradient(135deg,rgba(255,106,26,.16),rgba(10,26,51,.05));
	color:var(--vpgp-accent);
	transition:transform .4s var(--vpgp-ease), background .3s ease;
}
.vpgp-s9__icon svg{ width:26px; height:26px; }
.vpgp-s9__item:hover .vpgp-s9__icon{ transform:scale(1.15) rotate(6deg); background:var(--vpgp-accent); color:#fff; }
.vpgp-s9__title{ font-size:13.5px; font-weight:700; }

/* ==========================================================================
   10. CTA CUỐI TRANG
   ========================================================================== */
.vpgp-cta{ position:relative; padding:120px 0; overflow:hidden; color:#fff; background:var(--vpgp-dark); }
.vpgp-cta__bg{ position:absolute; inset:0; z-index:0; }
.vpgp-cta__bg-img{ width:100%; height:100%; object-fit:cover; opacity:.6; }
.vpgp-cta__bg .vpgp-placeholder{ height:100%; border-radius:0; }
.vpgp-cta__inner{ position:relative; z-index:1; text-align:center; max-width:680px; }
.vpgp-cta__inner h2{ font-size:clamp(26px,4vw,40px); font-weight:900; margin:0 0 14px; }
.vpgp-cta__inner p{ font-size:16px; color:rgba(255,255,255,.75); margin:0 0 32px; }
.vpgp-cta__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:38px; }
.vpgp-cta__trust span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); }
.vpgp-cta__trust-icon{ width:16px; height:16px; color:#3fd18f; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
	.vpgp-s3__layout{ grid-template-columns:1fr 1fr; }
	.vpgp-s3__globe{ grid-column:1/3; width:100%; flex-direction:row; justify-content:center; }
	.vpgp-s4__grid,.vpgp-s6__grid,.vpgp-s7__grid,.vpgp-s8__grid{ grid-template-columns:repeat(2,1fr); }
	.vpgp-s9__grid{ grid-template-columns:repeat(3,1fr); }
	.vpgp-s5__layout{ grid-template-columns:1fr; }
	.vpgp-s5__promo{ position:static; }
	.vpgp-badges__row{ grid-template-columns:repeat(2,1fr); }
	.vpgp-badge{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
}

@media (max-width:720px){
	.vpgp-section{ padding:64px 0; }
	.vpgp-hero{ min-height:auto; padding:20px 0; }
	.vpgp-hero__inner{ padding-top:110px; padding-bottom:48px; }
	.vpgp-hero__stats{ gap:20px 0; }
	.vpgp-stat{ padding-right:20px; margin-right:20px; }
	.vpgp-s3__layout{ grid-template-columns:1fr; }
	.vpgp-s3__globe{ grid-column:auto; }
	.vpgp-s4__grid,.vpgp-s6__grid,.vpgp-s7__grid,.vpgp-s8__grid,.vpgp-s9__grid{ grid-template-columns:1fr 1fr; }
	.vpgp-s9__grid{ grid-template-columns:repeat(2,1fr); }
	.vpgp-cta{ padding:80px 0; }
}

@media (max-width:480px){
	.vpgp-hero__ctas{ flex-direction:column; align-items:stretch; }
	.vpgp-hero__ctas .vpgp-btn{ justify-content:center; }
	.vpgp-s4__grid,.vpgp-s6__grid,.vpgp-s7__grid,.vpgp-s8__grid,.vpgp-s9__grid{ grid-template-columns:1fr; }
	.vpgp-s5__table{ font-size:12.5px; }
	.vpgp-s5__table thead th,.vpgp-s5__table tbody td{ padding:10px 10px; }
}