/* =========================================================
   Vplace – Trang chủ (mẫu hội trường hybrid)
   ========================================================= */
:root{
	--vp-navy:#122051;
	--vp-navy-dark:#0c1638;
	--vp-blue:#2f56d9;
	--vp-blue-light:#eef2fd;
	--vp-text:#1c2536;
	--vp-text-muted:#6b7280;
	--vp-border:#e6e9f2;
	--vp-bg-muted:#f6f8fc;
	--vp-white:#ffffff;
	--vp-red:#e5484d;
	--vp-radius-lg:22px;
	--vp-radius-md:16px;
	--vp-radius-sm:10px;
	--vp-shadow:0 10px 30px rgba(18,32,81,.08);
	--vp-font-heading:'Playfair Display', Georgia, 'Times New Roman', serif;
	--vp-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vplace-home, .vplace-home *, .vplace-home *::before, .vplace-home *::after{ box-sizing:border-box; }

body.vplace-home{
	margin:0;
	font-family:var(--vp-font-body);
	color:var(--vp-text);
	background:var(--vp-white);
	-webkit-font-smoothing:antialiased;
}

.vplace-home img{ max-width:100%; display:block; }
.vplace-home :where(a){ text-decoration:none; color:inherit; }
.vplace-home ul{ list-style:none; margin:0; padding:0; }
.vplace-home svg{ width:1em; height:1em; }

.vp-container{
	max-width:1180px;
	margin:0 auto;
	padding:0 24px;
}

/* ---------- Buttons & badges ---------- */
.vp-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:14px 24px;
	border-radius:999px;
	font-weight:600;
	font-size:15px;
	line-height:1;
	border:1px solid transparent;
	cursor:pointer;
	white-space:nowrap;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vp-btn svg{ width:16px; height:16px; }
.vp-btn:hover{ transform:translateY(-1px); }
.vp-btn--dark{ background:var(--vp-navy); color:#fff; }
.vp-btn--dark:hover{ background:var(--vp-navy-dark); }
.vp-btn--outline{ background:#fff; color:var(--vp-navy); border-color:var(--vp-border); }
.vp-btn--outline:hover{ border-color:var(--vp-navy); }
.vp-btn--light{ background:#fff; color:var(--vp-navy); }
.vp-btn--block{ width:100%; justify-content:center; }

.vp-badge{
	display:inline-block;
	background:var(--vp-blue-light);
	color:var(--vp-blue);
	font-size:13px;
	font-weight:600;
	padding:6px 16px;
	border-radius:999px;
	margin-bottom:16px;
}
.vp-badge--center{ }

/* ---------- Section heads ---------- */
.vp-section{ padding:80px 0; }
.vp-section--muted{ background:var(--vp-bg-muted); }
.vp-section__head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.vp-section__head h2{
	font-family:var(--vp-font-heading);
	font-size:34px;
	line-height:1.25;
	margin:0;
	color:var(--vp-navy);
}
.vp-section__headrow{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	margin-bottom:40px;
}
.vp-section__head--left{ text-align:left; margin:0; }
.vp-link-arrow{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-weight:600;
	color:var(--vp-navy);
	white-space:nowrap;
}
.vp-link-arrow svg{ width:16px; height:16px; }

/* ---------- Hero ---------- */
.vp-hero{ padding:56px 0 72px; }
.vp-hero__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:56px;
	align-items:center;
}
.vp-hero__title{
	font-family:var(--vp-font-heading);
	font-size:46px;
	line-height:1.2;
	margin:0 0 18px;
	color:var(--vp-navy);
}
.vp-hero__desc{
	font-size:16px;
	line-height:1.7;
	color:var(--vp-text-muted);
	margin:0 0 32px;
	max-width:460px;
}
.vp-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.vp-hero__media{
	position:relative;
	border-radius:var(--vp-radius-lg);
	overflow:hidden;
	box-shadow:var(--vp-shadow);
}
.vp-hero__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.vp-live-badge{
	position:absolute;
	top:18px;
	right:18px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:#fff;
	color:var(--vp-red);
	font-size:13px;
	font-weight:700;
	padding:8px 14px;
	border-radius:999px;
	box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.vp-live-dot{
	width:8px; height:8px; border-radius:50%;
	background:var(--vp-red);
	animation:vp-pulse 1.4s infinite;
}
@keyframes vp-pulse{
	0%,100%{ opacity:1; }
	50%{ opacity:.35; }
}

/* ---------- Trust bar ---------- */
.vp-trust{ padding:36px 0; border-top:1px solid var(--vp-border); border-bottom:1px solid var(--vp-border); }
.vp-trust__inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.vp-trust__label{ font-size:13px; color:var(--vp-text-muted); margin:0; flex:0 0 auto; }
.vp-trust__list{
	display:flex !important;
	flex-wrap:nowrap !important;
	align-items:center;
	gap:28px;
	flex:1 1 auto;
	min-width:0;
	overflow-x:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
	padding:4px 0;
}
.vp-trust__list::-webkit-scrollbar{ display:none; }
.vp-trust__list li{
	display:flex !important;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	height:36px;
}
.vp-trust__list img{
	height:36px !important;
	width:auto !important;
	max-width:130px !important;
	max-height:36px !important;
	object-fit:contain !important;
	filter:grayscale(100%);
	opacity:.7;
	transition:opacity .15s ease, filter .15s ease;
}
.vp-trust__list img:hover{ filter:grayscale(0%); opacity:1; }

/* ---------- Feature cards ---------- */
.vp-features{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
}
.vp-feature-card{
	background:#fff;
	border:1px solid var(--vp-border);
	border-radius:var(--vp-radius-md);
	padding:32px 26px;
	box-shadow:var(--vp-shadow);
}
.vp-feature-card h3{ font-size:17px; margin:0 0 10px; color:var(--vp-navy); }
.vp-feature-card p{ font-size:14px; line-height:1.6; color:var(--vp-text-muted); margin:0; }

.vp-icon-circle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:52px; height:52px;
	border-radius:50%;
	background:var(--vp-blue-light);
	color:var(--vp-blue);
	margin-bottom:18px;
}
.vp-icon-circle svg{ width:24px; height:24px; }
.vp-icon-circle--sm{ width:40px; height:40px; margin-bottom:0; flex-shrink:0; }
.vp-icon-circle--sm svg{ width:18px; height:18px; }

/* ---------- Rooms ---------- */
.vp-rooms{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
}
.vp-room-card{
	background:#fff;
	border-radius:var(--vp-radius-md);
	overflow:hidden;
	box-shadow:var(--vp-shadow);
	display:flex;
	flex-direction:column;
}
.vp-room-card__image{ aspect-ratio:4/3; overflow:hidden; }
.vp-room-card__image img{ width:100%; height:100%; object-fit:cover; }
.vp-room-card__body{ padding:22px; display:flex; flex-direction:column; gap:14px; flex:1; }
.vp-room-card__body h3{ margin:0; font-size:18px; color:var(--vp-navy); }
.vp-room-card__body ul{ display:flex; flex-direction:column; gap:8px; flex:1; }
.vp-room-card__body ul li{
	display:flex; align-items:center; gap:8px;
	font-size:13px; color:var(--vp-text-muted);
}
.vp-room-card__body ul svg{ width:16px; height:16px; color:var(--vp-blue); flex-shrink:0; }

/* ---------- Services ---------- */
.vp-services__grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:56px;
	align-items:center;
}
.vp-services__content h2{
	font-family:var(--vp-font-heading);
	font-size:32px;
	color:var(--vp-navy);
	margin:0 0 32px;
}
.vp-services__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px; }
.vp-service-item{ display:flex; align-items:center; gap:14px; font-size:14px; font-weight:500; }
.vp-services__media{ border-radius:var(--vp-radius-lg); overflow:hidden; box-shadow:var(--vp-shadow); display:flex; }
.vp-services__media img{
	width:100% !important;
	height:auto !important;
	max-height:none !important;
	object-fit:contain !important;
	display:block;
	margin:0 auto;
}

/* ---------- Testimonials ---------- */
.vp-testimonials{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
}
.vp-testimonial-card{
	background:#fff;
	border-radius:var(--vp-radius-md);
	padding:30px 28px;
	box-shadow:var(--vp-shadow);
}
.vp-quote-icon{ display:inline-flex; color:var(--vp-blue); width:26px; height:26px; margin-bottom:14px; }
.vp-quote-icon svg{ width:100%; height:100%; }
.vp-testimonial-card p{
	font-size:14.5px; line-height:1.7; color:var(--vp-text);
	margin:0 0 22px;
	font-style:italic;
}
.vp-testimonial-author{ display:flex; align-items:center; gap:12px; }
.vp-testimonial-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.vp-testimonial-author div{ display:flex; flex-direction:column; }
.vp-testimonial-author strong{ font-size:14px; color:var(--vp-navy); }
.vp-testimonial-author span{ font-size:12.5px; color:var(--vp-text-muted); }

.vp-dots{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.vp-dots button{
	width:8px; height:8px; border-radius:50%;
	border:none; background:var(--vp-border); cursor:pointer; padding:0;
}
.vp-dots button.is-active{ background:var(--vp-navy); width:22px; border-radius:999px; }

/* ---------- CTA ---------- */
.vp-cta{ padding:0 0 90px; }
.vp-cta__inner{
	background:var(--vp-cta-bg, var(--vp-navy));
	border-radius:var(--vp-radius-lg);
	padding:48px 56px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px;
	flex-wrap:wrap;
	color:#fff;
}
.vp-cta__inner h2{ font-family:var(--vp-font-heading); font-size:26px; margin:0 0 10px; }
.vp-cta__inner p{ margin:0; color:rgba(255,255,255,.75); font-size:14.5px; max-width:420px; }
.vp-cta__actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.vp-cta__phone{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; }
.vp-cta__phone svg{ width:16px; height:16px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
	.vp-hero__grid{ grid-template-columns:1fr; }
	.vp-hero__title{ font-size:36px; }
	.vp-features{ grid-template-columns:repeat(2,1fr); }
	.vp-rooms{ grid-template-columns:repeat(2,1fr); }
	.vp-services__grid{ grid-template-columns:1fr; }
	.vp-services__media{ order:-1; }
	.vp-testimonials{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
	.vp-section{ padding:56px 0; }
	.vp-section__head h2{ font-size:26px; }
	.vp-hero__title{ font-size:30px; }
	.vp-features{ grid-template-columns:1fr; }
	.vp-rooms{ grid-template-columns:1fr; }
	.vp-services__list{ grid-template-columns:1fr; }
	.vp-section__headrow{ flex-direction:column; align-items:flex-start; }
	.vp-cta__inner{ padding:36px 26px; flex-direction:column; align-items:flex-start; }
	.vp-trust__inner{ flex-direction:column; align-items:flex-start; }
}