:root {
--green-dark: #0a3d2c;
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
--white: #ffffff;
--text-gray: #444;
--radius: 20px;
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; color: var(--text-gray); line-height: 1.8; overflow-x: hidden; background: #fff; }

h1, h2, h3, h4, .logo-text { font-family: 'Playfair Display', serif; color: var(--green-dark); }

/* --- HEADER & NAVIGATION (Fix Logo & Menu 1 Line) --- */
header {
background: var(--green-dark);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.nav-container {
max-width: 1500px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-box { display: flex; align-items: center; text-decoration: none; white-space: nowrap; }
.logo-text { color: #f9dfa1; font-size: 20px; font-weight: 700; font-style: italic; }

.nav-menu { display: flex; list-style: none; gap: 8px; align-items: center; }
.nav-menu li a {
background: var(--gold-gradient);
color: var(--green-dark) !important;
text-decoration: none;
font-size: 10px; /* Small font size as requested */
font-weight: 700;
padding: 8px 15px;
border-radius: 50px;
text-transform: uppercase;
transition: var(--transition);
display: inline-block;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.nav-menu li a:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* Burger Menu (Mobile Fix) */
.burger { display: none; color: #f9dfa1; font-size: 26px; cursor: pointer; }

/* --- SECTIONS --- */
section { padding: 100px 0; width: 100%; border-bottom: 1px solid #f0f0f0; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 25px; }
.sec-title { text-align: center; margin-bottom: 60px; }
.sec-title h2 { font-size: 45px; margin-bottom: 15px; font-style: italic; position: relative; display: inline-block; }
.sec-title h2::after { content: ''; width: 100px; height: 3px; background: var(--gold-gradient); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 10px; }

.content-flex { display: flex; flex-wrap: wrap; gap: 50px; align-items: center; }
.text-box { flex: 1; min-width: 400px; text-align: justify; font-size: 16px; }
.img-box { flex: 1; min-width: 400px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 5px solid #fff; }
.img-box img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); display: block; }
.img-box:hover img { transform: scale(1.08); }

/* Hero Full Screen */
.hero {
height: 100vh;
background: linear-gradient(rgba(10, 61, 44, 0.4), rgba(10, 61, 44, 0.4)), url('images/vinhomeshocmon.jpg') center/cover;
display: flex; align-items: center; justify-content: center; text-align: center; color: white;background-size: 100% 100%;
animation: moveAndZoom 15s ease-in-out infinite alternate;
}
@keyframes moveAndZoom {
0% {
background-size: 100%;
background-position: 0% 50%;
}
100% {
background-size: 120%; /* Phóng to lên 120% */
background-position: 100% 50%; /* Di chuyển từ trái sang phải */
}
}
.hero-content h1 { font-size: clamp(35px, 6vw, 70px); color: #f9dfa1; margin-bottom: 20px; font-style: italic; }

/* --- AMENITIES TABS --- */
.tabs-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tab-btn {
padding: 12px 25px;
background: var(--white);
border: 2px solid #d4af37;
color: var(--green-dark);
cursor: pointer;
border-radius: 50px;
font-weight: 700;
font-family: inherit;
transition: var(--transition);
text-transform: uppercase;
font-size: 12px;
}
.tab-btn.active, .tab-btn:hover { background: var(--gold-gradient); border-color: transparent; box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); }
.tab-content { display: none; animation: fadeIn 0.8s ease forwards; }
.tab-content.active { display: block; }

/* --- PRODUCT MENU --- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-top: 40px; }
.product-card { background: #fdfdfd; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: var(--transition); border: 1px solid #eee; }
.product-card:hover { transform: translateY(-10px); }
.p-info { padding: 25px; }
.p-info h4 { margin-bottom: 15px; font-size: 22px; }
.p-list { list-style: none; font-size: 14px; color: #555; }
.p-list li { margin-bottom: 8px; border-bottom: 1px dashed #ddd; padding-bottom: 5px; }

/* --- GALLERY LIGHTBOX --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.gallery-item { height: 200px; border-radius: 15px; overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gallery-item:hover img { transform: scale(1.15); filter: brightness(0.8); }

#lightbox {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95);
display: none; justify-content: center; align-items: center; z-index: 10000; padding: 40px;
}
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; border: 3px solid #f9dfa1; }
.close-lb { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 50px; cursor: pointer; }

/* --- VR360 --- */
#vr-viewer { width: 100%; height: 600px; background: #000; border-radius: var(--radius); margin-top: 30px; }

/* --- FORM --- */
.form-wrap {
max-width: 1300px; margin: 0 auto; background: #fff; padding: 50px;
border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); border: 1px solid rgba(212, 175, 55, 0.2);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
input, textarea {
width: 100%; padding: 15px 20px; border: 1px solid #eee; border-radius: 12px;
background: #fdfdfd; font-family: inherit; outline: none; transition: var(--transition);
}
input:focus, textarea:focus { border-color: #d4af37; box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); }
.submit-btn {
width: 100%; padding: 18px; border: none; border-radius: 50px;
background: var(--gold-gradient); color: var(--green-dark);
font-weight: 700; text-transform: uppercase; cursor: pointer; transition: var(--transition);
margin-top: 20px; font-size: 16px;
}
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4); }

/* --- FOOTER --- */
footer { background: var(--green-dark); color: #ecf0f1; padding: 80px 0 40px; }
.footer-line { border-top: 1px solid rgba(255,255,255,0.3); margin: 40px 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 50px; }
.footer-col h4 { color: #f9dfa1; font-size: 22px; margin-bottom: 20px; }
.footer-col p, .footer-col li { font-size: 14px; margin-bottom: 12px; list-style: none; }
.contact-info i { color: #f9dfa1; margin-right: 12px; width: 20px; }
.footer-col a { font-size: 14px; margin-bottom: 12px; list-style: none;color:#fff;text-decoration:none; }
/* Mobile Menu Animation */
@media (max-width: 1200px) {
.nav-menu {
position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
background: var(--green-dark); flex-direction: column; padding: 100px 20px;
transition: 0.5s; box-shadow: -5px 0 20px rgba(0,0,0,0.5);
}
.nav-menu.active { right: 0; }
.nav-menu li { width: 100%; }
.nav-menu li a { width: 100%; text-align: center; font-size: 14px; }
.burger { display: block; }
.hero-content h1 { font-size: 35px; }
.content-flex { flex-direction: column; }
.form-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
:root {
--primary-gold: #d4af37;
--light-gold: #f9f295;
--dark-bg: #0a0a0b;
--glass-bg: rgba(255, 255, 255, 0.05);
--transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-wrapper {
position: relative;
display: inline-block;
margin-top: 15px;
}
.btn-wrapper a 
{
text-decoration: none;
display: block;
}
.glow-button {
position: relative;
padding: 8px 45px;
font-size: 18px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
background: #00000087;
border: 2px solid var(--primary-gold);
border-radius: 50px;
cursor: pointer;
z-index: 1;
overflow: hidden;
transition: var(--transition);
}

/* Hiệu ứng tia sáng chạy qua */
.glow-button::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}

.glow-button:hover::before {
left: 100%;
}

.glow-button:hover {
color: #000;
background: var(--primary-gold);
box-shadow: 0 0 30px var(--primary-gold);
transform: scale(1.05);
}

/* Hào quang tỏa ra xung quanh nút */
.glow-effect {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50px;
background: var(--primary-gold);
filter: blur(20px);
opacity: 0.6;
z-index: -1;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { transform: scale(0.9); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 0.3; }
100% { transform: scale(0.9); opacity: 0.6; }
}

/* --- 3. POPUP SANG TRỌNG --- */
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 9999;
}

.overlay.active {
opacity: 1;
visibility: visible;
}

.popup-card {
position: relative;
width: 100%;
max-width: 100%;
background: var(--glass-bg);
border: 1px solid rgba(212, 175, 55, 0.3);
text-align: center;
color: white;
transform: translateY(50px) scale(0.8);
transition: var(--transition);
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
height: 100%;
}

.overlay.active .popup-card {
transform: translateY(0) scale(1);
}


:root {
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
--vinhomes-green: #0a3d2c;
--white: #ffffff;
}


/* Lớp phủ Popup */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
/* Ban đầu ẩn đi */
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}

/* Trạng thái khi popup hiển thị */
.popup-overlay.active {
opacity: 1;
visibility: visible;
}

/* Container Form (Contact Card) */
.contact-card {
background: var(--vinhomes-green);
width: 90%;
max-width: 500px;
padding: 50px 40px;
border-radius: 5px;
border: 1px solid rgba(212, 175, 55, 0.3);
box-shadow: 0 25px 50px rgba(0,0,0,0.6);
position: relative;
transform: scale(0.7);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popup-overlay.active .contact-card {
transform: scale(1);
}

/* Nút tắt Popup */
.close-popup {
position: absolute;
top: 15px;
right: 15px;
color: #f9dfa1;
font-size: 24px;
cursor: pointer;
transition: 0.3s;
z-index: 1001;
}

.close-popup:hover {
transform: rotate(90deg);
color: white;
}

/* Hiệu ứng viền vàng trên cùng */
.contact-card::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 4px;
background: var(--gold-gradient);
}

.header-box {
text-align: center;
margin-bottom: 30px;
}

.header-box h2 {
color: #f9dfa1;
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}

.header-box p {
color: #ffffff;
font-weight: 300;
font-size: 0.95rem;
}

/* Input Styles */
.form-group {
position: relative;
margin-bottom: 20px;
}

.form-group i {
position: absolute;
left: 15px;
top: 15px;
color: #d4af37;
}

.form-control {
width: 100%;
padding: 12px 15px 12px 45px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 4px;
color: white;
font-size: 1rem;
transition: all 0.4s;
}

.form-control:focus {
outline: none;
border-color: #f9dfa1;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Nút bấm nổi bật (CTA) */
.btn-submit {
width: 100%;
padding: 16px;
border: none;
border-radius: 4px;
background: var(--gold-gradient);
color: #0a3d2c;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
font-size: 1rem;
margin-top: 10px;
}

.btn-submit:hover {
transform: scale(1.02);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* Hiệu ứng Shimmer */
.btn-submit::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 20%;
height: 200%;
background: rgba(255, 255, 255, 0.4);
transform: rotate(30deg);
animation: shimmer 3s infinite;
}

@keyframes shimmer {
0% { left: -60%; }
20% { left: 120%; }
100% { left: 120%; }
}

.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 20px;
color: #eee;
font-size: 0.8rem;
}

.checkbox-group input {
margin-right: 10px;
accent-color: #d4af37;
}

@media (max-width: 600px) {
.contact-card {
padding: 40px 25px;
}
.header-box h2 { font-size: 1.4rem; }
}
@media (max-width: 603px) {
.img-box
{
min-width: 100%;
}
.text-box
{
 min-width: 100%;
}
.hero
{
background-size: cover !important;
}
.tab-btn
{
width: 100%;
}
.sec-title h2 {
font-size: 33px;
}
}

:root {
--vinhomes-green: #0a3d2c;
--gold-primary: #d4af37;
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
--bg-light: #f4f7f6;
--text-dark: #333;
}



.table-header {
text-align: center;
margin-bottom: 30px;
}

.table-header h2 {
color: var(--vinhomes-green);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
font-size: 1.8rem;
}

.table-header p {
color: #666;
font-style: italic;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;

overflow: hidden;
border-radius: 8px;
}

thead {
background-color: #0a3d2c !important;
color: white;
}

th {
padding: 15px;
text-align: left;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
}

td {
padding: 15px;
border-bottom: 1px solid #eee;
vertical-align: middle;
}

tbody tr:hover {
background-color: #f9fbf9;
}

/* Progress Bar */
.progress-container {
width: 100%;
background: #e0e0e0;
border-radius: 10px;
height: 8px;
position: relative;
margin-top: 5px;
}

.progress-bar {
height: 100%;
border-radius: 10px;
background: var(--gold-gradient);
transition: width 1s ease-in-out;
}

.percent-text {
font-size: 0.85rem;
font-weight: bold;
color: var(--vinhomes-green);
display: block;
margin-bottom: 4px;
}

/* Status Badges */
.badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}

.status-done { background: #d4edda; color: #155724; }
.status-doing { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; display: block;font-size: 13px;
min-width: 179px;    text-align: center;}
.status-plan { background: #e2e3e5; color: #383d41; }

/* Icon styling */
.item-name {
font-weight: 600;
color: var(--vinhomes-green);
align-items: center;
gap: 10px;
}

.item-name i {
color: var(--gold-primary);
width: 20px;
}

/* Mobile Responsive (Card View) */
@media screen and (max-width: 768px) {
.container { padding: 15px; }

thead { display: none; } /* Ẩn tiêu đề bảng trên mobile */

table, tbody, tr, td {
display: block;
width: 100%;
}

tr {
margin-bottom: 20px;
border: 1px solid var(--gold-primary);
border-radius: 10px;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

td {
text-align: right;
padding-left: 50%;
position: relative;
border-bottom: 1px inset #eee;
}

td:last-child { border-bottom: none; }

/* Tạo nhãn tiêu đề giả bằng pseudo-element */
td::before {
content: attr(data-label);
position: absolute;
left: 15px;
width: 45%;
text-align: left;
font-weight: bold;
color: var(--vinhomes-green);
text-transform: uppercase;
font-size: 0.8rem;
}

}
:root {
--vinhomes-green: #0a3d2c;
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
--gold-dark: #b8860b;
--bg-glass: rgba(255, 255, 255, 0.95);
}
.item-name { justify-content: flex-end; }
.progress-container { margin-left: auto; width: 100%; }
.legal-container {
max-width: 1250px;
margin: 40px auto;
background: var(--bg-glass);
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.3);
}

.legal-header {
background: var(--vinhomes-green);
color: white;
padding: 30px;
text-align: center;
position: relative;
}

.legal-header h2 {
margin: 0;
text-transform: uppercase;
letter-spacing: 3px;
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.8rem;
}

.legal-header p {
margin-top: 10px;
opacity: 0.8;
font-weight: 300;
}

/* Table Style */
.legal-table {
width: 100%;
border-collapse: collapse;
background: white;
}

.legal-table thead {
background: #f8fcfb !important;
}

.legal-table th {
padding: 18px 15px;
text-align: left;
color: var(--vinhomes-green);
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
border-bottom: 2px solid #e9ecef;
}

.legal-table td {
padding: 20px 15px;
border-bottom: 1px solid #eee;
color: #444;
font-size: 0.95rem;
line-height: 1.5;
}

.legal-table tr:last-child td {
border-bottom: none;
}

.legal-table tr:hover {
background-color: #fdfbf4;
}

/* Badge Status */
.status-badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #c8e6c9;
}

.status-badge i {
margin-right: 5px;
}

/* Document Link */
.doc-link {
color: var(--gold-dark);
text-decoration: none;
font-weight: 600;
transition: 0.3s;
}

.doc-link:hover {
text-decoration: underline;
color: var(--vinhomes-green);
}

/* Icon styling */
.icon-box {
color: var(--gold-dark);
margin-right: 10px;
width: 20px;
text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.legal-table thead {
    display: none; /* Ẩn tiêu đề bảng */
}

.legal-table, .legal-table tbody, .legal-table tr, .legal-table td {
    display: block;
    width: 100%;
}

.legal-table tr {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

.legal-table td {
    text-align: right;
    padding: 12px 15px;
    position: relative;
    border-bottom: 1px dashed #eee;
}

.legal-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    text-align: left;
    font-weight: 700;
    color: var(--vinhomes-green);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.legal-table td:last-child {
    border-bottom: none;
}
}
/* Toàn bộ CSS được đóng gói với class riêng biệt để tránh trùng lặp */
.xyz-premium-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Hiệu ứng nút bấm tỏa sáng */
.xyz-premium-button {
position: relative;
padding: 16px 45px;
font-size: 18px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(45deg, #ff3d00, #ffeb3b);
background-size: 200% 200%;
border: none;
border-radius: 12px;
cursor: pointer;
outline: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 61, 0, 0.4);
animation: xyz-premium-gradient-animation 3s ease infinite;
}

/* Hiệu ứng hào quang tỏa sáng xung quanh nút */
.xyz-premium-button::after {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(45deg, #ff3d00, #ffeb3b, #ff3d00);
background-size: 400%;
border-radius: 15px;
opacity: 0.7;
filter: blur(12px);
animation: xyz-premium-glow-animation 20s linear infinite;
}

/* Hiệu ứng khi đang chạy đếm ngược (vô hiệu hóa nút) */
.xyz-premium-button:disabled {
background: #555 !important;
cursor: not-allowed;
box-shadow: none;
}
.xyz-premium-button:disabled::after {
display: none;
}

.xyz-premium-button:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 61, 0, 0.6);
}

/* Khu vực hiển thị mã code sau khi xong */
.xyz-premium-result-box {
margin-top: 25px;
padding: 15px 30px;
border: 2px dashed #ff3d00;
background-color: #fff4f1;
color: #d32f2f;
font-size: 22px;
font-weight: bold;
border-radius: 8px;
display: none; /* Ẩn mặc định */
animation: xyz-premium-fade-in 0.5s ease-out;
}

/* Các Keyframes hiệu ứng */
@keyframes xyz-premium-gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes xyz-premium-glow-animation {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}

@keyframes xyz-premium-fade-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
:root {
--primary-green: #0a3d2c;
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
--text-color: #333;
}
.faq-section { max-width: 1250px; margin: 100px auto; padding: 40px 20px; background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.faq-header { text-align: center; margin-bottom: 40px; }
.faq-header h2 { color: var(--primary-green); font-size: 2rem; text-transform: uppercase; letter-spacing: 1px; }
.faq-header .divider { width: 80px; height: 4px; background: var(--gold-gradient); margin: 10px auto; border-radius: 2px; }

/* Grid 2 cột */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.faq-item { 
background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 10px; cursor: pointer;
transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-item:hover { border-color: #d4af37; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(10, 61, 44, 0.1); }

.faq-item span { color: var(--primary-green); font-weight: 600; font-size: 0.95rem; line-height: 1.4; }

.faq-item i { 
background: var(--gold-gradient); width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: var(--primary-green); font-style: normal; font-weight: bold;
}

/* Modal Styles */
.faq-modal {
display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
}

.modal-content {
background-color: #fff; margin: 10% auto; padding: 0; width: 90%; max-width: 600px;
border-radius: 15px; overflow: hidden; position: relative; animation: slideDown 0.4s ease;
}

@keyframes slideDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.modal-header { background: var(--primary-green); color: #fff; padding: 20px; position: relative; }
.modal-header h3 { margin: 0; font-size: 1.2rem; padding-right: 30px; color: #f9dfa1; }

.close-btn {
position: absolute; right: 20px; top: 15px; color: #fff; font-size: 28px;
font-weight: bold; cursor: pointer; transition: 0.3s;
}
.close-btn:hover { color: #d4af37; }

.modal-body { padding: 30px; line-height: 1.8; color: var(--text-color); font-size: 1.05rem; }

/* Responsive */
@media (max-width: 768px) {
.faq-grid { grid-template-columns: 1fr; }
}
/* CSS Scoped với tiền tố xnt-vhgp- */
.xnt-vhgp-analysis-wrapper {background: #fff;
color: #333;
line-height: 1.6;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 80px; }
.xnt-vhgp-container { max-width: 1300px; margin: 0px auto; padding: 40px 20px; }

.xnt-vhgp-hero { background: #0a3d2c; color: #fff; padding: 60px 20px; text-align: center; border-bottom: 5px solid #d4af37; }
.xnt-vhgp-main-title { 
font-size: 2.2rem; margin: 0; font-weight: 800;
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.xnt-vhgp-subtitle { font-size: 1.1rem; opacity: 0.9; margin-top: 15px; }

.xnt-vhgp-section-heading { color: #0a3d2c; display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 25px; }
.xnt-vhgp-section-heading span { width: 40px; height: 3px; background: linear-gradient(135deg, #d4af37 0%, #d4af37 100%); }

/* Table Styles */
.xnt-vhgp-table-responsive { overflow-x: auto; background: #fdfdfd; border-radius: 10px; padding: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.xnt-vhgp-price-table { width: 100%; border-collapse: collapse; min-width: 100%; }
.xnt-vhgp-price-table th { background: #0a3d2c; color: #f9dfa1; padding: 15px; text-align: left; }
.xnt-vhgp-price-table td { padding: 15px; border-bottom: 1px solid #eee; }
.xnt-vhgp-up-trend { color: #27ae60; font-weight: bold; }
.xnt-vhgp-note { font-size: 0.85rem; color: #777; font-style: italic; margin-top: 10px; }

/* Grid & Cards */
.xnt-vhgp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.xnt-vhgp-card { 
border: 1px solid #eef0f2; padding: 25px; border-radius: 12px; cursor: pointer;
transition: 0.3s; position: relative; background: #fff;
}
.xnt-vhgp-card:hover { transform: translateY(-5px); border-color: #d4af37; box-shadow: 0 10px 20px rgba(10,61,44,0.1); }
.xnt-vhgp-card h3 { color: #0a3d2c; font-size: 1.1rem; margin-top: 0; }
.xnt-vhgp-btn { color: #b8860b; font-weight: bold; font-size: 0.9rem; margin-top: 10px; text-transform: uppercase; }

/* Verdict */
.xnt-vhgp-verdict { 
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%); 
padding: 40px; border-radius: 20px; margin-top: 50px; color: #0a3d2c;
}
.xnt-vhgp-verdict h2 { margin-top: 0; text-align: center; font-size: 1.6rem; margin-bottom: 20px;font-family: 'Playfair Display', serif;
color: var(--green-dark);font-style: italic;font-size: 45px;}
.xnt-vhgp-verdict-item { background: rgba(255,255,255,0.4); padding: 15px; border-radius: 10px; margin-bottom: 10px; border-left: 5px solid #0a3d2c; }

/* Modal */
.xnt-vhgp-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.xnt-vhgp-modal-content { background: #fff; margin: 8% auto; width: 90%; max-width: 650px; border-radius: 15px; overflow: hidden; position: relative; animation: xntFadeUp 0.4s; }
@keyframes xntFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.xnt-vhgp-modal-header { background: #0a3d2c; padding: 20px; color: #f9dfa1; }
.xnt-vhgp-modal-body { padding: 30px; line-height: 1.8; font-size: 1.05rem; }
.xnt-vhgp-close { position: absolute; right: 20px; top: 15px; color: #fff; font-size: 30px; cursor: pointer; }
.xnt-vhgp-highlight { color: #0a3d2c; font-weight: bold; border-bottom: 2px solid #d4af37; }

@media (max-width: 768px) {
.xnt-vhgp-main-title { font-style: italic;
font-size: 45px; }
.xnt-vhgp-grid { grid-template-columns: 1fr; }
}
.vgp-2025-wrapper {
max-width: 1250px;
margin: 100px auto;
color: #333;
}

.vgp-2025-header {
background-color: #0a3d2c;
padding: 30px;
text-align: center;
border-radius: 8px 8px 0 0;
border-bottom: 4px solid #d4af37;
}

.vgp-2025-header h2 {
margin: 0;
color: #fff;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 1px;
}

.vgp-2025-header p {
color: #f9dfa1;
margin-top: 10px;
font-style: italic;
}

.vgp-2025-table-container {
overflow-x: auto;
background: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.vgp-2025-table {
width: 100%;
border-collapse: collapse;
min-width: 100%;
}

.vgp-2025-table thead tr {
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
}

.vgp-2025-table th {
padding: 15px;
color: #0a3d2c;
text-transform: uppercase;
font-size: 14px;
text-align: left;
}

.vgp-2025-table td {
padding: 15px;
border-bottom: 1px solid #eee;
font-size: 15px;
}

.vgp-2025-table tr:hover {
background-color: #f1f5f3;
}

.vgp-2025-tag-green {
background-color: #0a3d2c;
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}

.vgp-2025-price {
color: #b38b00;
font-weight: 700;
font-size: 16px;
}

.vgp-2025-btn {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
color: #0a3d2c;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
text-align: center;
transition: transform 0.2s;
border: none;
cursor: pointer;
}

.vgp-2025-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

.vgp-2025-footer {
margin-top: 15px;
font-size: 13px;
color: #666;
text-align: right;
}

@media (max-width: 768px) {
.vgp-2025-header h2 { font-size: 18px; }
.vgp-2025-table th, .vgp-2025-table td { padding: 10px; font-size: 13px; }
}
/* Scoped CSS với tiền tố vgp-rental-2025- */
.vgp-rental-2025-container {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
max-width: 1250px;
margin: 0px auto;
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border: 1px solid #e0e0e0;
}

/* Header Section */
.vgp-rental-2025-header {
background-color: #0a3d2c;
padding: 40px 20px;
text-align: center;
position: relative;
}

.vgp-rental-2025-header h2 {
color: #fff;
margin: 0;
font-size: 26px;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.vgp-rental-2025-header .vgp-rental-2025-period {
display: inline-block;
margin-top: 15px;
padding: 6px 20px;
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
color: #0a3d2c;
font-weight: 800;
border-radius: 50px;
font-size: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Highlight Stats for Investors */
.vgp-rental-2025-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: #eee;
border-bottom: 1px solid #eee;
}

.vgp-rental-2025-stat-item {
background: #fff;
padding: 20px;
text-align: center;
}

.vgp-rental-2025-stat-item label {
display: block;
font-size: 12px;
color: #666;
text-transform: uppercase;
margin-bottom: 5px;
}

.vgp-rental-2025-stat-item span {
font-size: 20px;
font-weight: 700;
color: #0a3d2c;
}

.vgp-rental-2025-stat-item i {
color: #27ae60;
font-style: normal;
font-size: 14px;
margin-left: 5px;
}

/* Table Section */
.vgp-rental-2025-body {
padding: 25px;
overflow-x: auto;
}

.vgp-rental-2025-table {
width: 100%;
border-collapse: collapse;
}

.vgp-rental-2025-table thead th {
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
color: #0a3d2c;
padding: 15px;
text-align: left;
font-size: 14px;
text-transform: uppercase;
}

.vgp-rental-2025-table td {
padding: 18px 15px;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
color: #333;
}

.vgp-rental-2025-type {
font-weight: 700;
color: #0a3d2c;
}

.vgp-rental-2025-price-range {
/*   font-family: 'Courier New', Courier, monospace;
font-weight: 600;*/
color: #b38b00;
}

.vgp-rental-2025-roi-tag {
background: #eafaf1;
color: #27ae60;
padding: 4px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
}

/* Expert Analysis Box */
.vgp-rental-2025-analysis {
margin: 20px;
padding: 20px;
background: #fdfaf0;
border-left: 5px solid #d4af37;
border-radius: 4px;
}

.vgp-rental-2025-analysis h4 {
margin: 0 0 10px 0;
color: #0a3d2c;
font-size: 17px;
}

.vgp-rental-2025-analysis p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #555;
}

/* CTA Section */
.vgp-rental-2025-footer {
padding: 25px;
text-align: center;
background: #f9f9f9;
}

.vgp-rental-2025-btn {
display: inline-block;
padding: 14px 35px;
background: #0a3d2c;
color: #ffffff;
text-decoration: none;
font-weight: bold;
border-radius: 8px;
transition: all 0.3s ease;
border: 2px solid #0a3d2c;
}

.vgp-rental-2025-btn:hover {
background: transparent;
color: #0a3d2c;
}

/* Responsive */
@media (max-width: 768px) {
.vgp-rental-2025-stats {
grid-template-columns: 1fr;
}
.vgp-rental-2025-header h2 {
font-size: 20px;
}
}
/* Scoped CSS để tránh xung đột - vgp-compare-2026- */
.vgp-compare-2026-wrapper {
max-width: 1250px;
margin: 40px auto;
padding: 0 0px;
color: #333;
}

.vgp-compare-2026-header {
text-align: center;
margin-bottom: 30px;
}

.vgp-compare-2026-header h2 {
color: #0a3d2c;
font-size: 28px;
text-transform: uppercase;
margin-bottom: 10px;
}

.vgp-compare-2026-header p {
font-style: italic;
color: #666;
}

.vgp-compare-2026-table-container {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid #e0e0e0;
}

.vgp-compare-2026-table {
width: 100%;
border-collapse: collapse;
min-width: 850px;
background: #fff;
}

/* Header bảng sử dụng Gradient vàng */
.vgp-compare-2026-table thead tr {
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
}

.vgp-compare-2026-table th {
padding: 20px 15px;
color: #0a3d2c;
font-weight: 800;
text-transform: uppercase;
font-size: 14px;
text-align: center;
border: 1px solid rgba(0,0,0,0.05);
}

.vgp-compare-2026-table td {
padding: 18px 15px;
border: 1px solid #eee;
vertical-align: middle;
font-size: 14px;
line-height: 1.5;
}

/* Làm nổi bật dòng Vinhomes Hóc Môn */
.vgp-compare-2026-highlight {
background-color: #f0f7f4; /* Xanh cực nhẹ */
}

.vgp-compare-2026-project-name {
font-weight: 700;
color: #0a3d2c;
font-size: 16px;
}

.vgp-compare-2026-tag {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
margin-top: 5px;
}

.vgp-compare-2026-tag-main {
background: #0a3d2c;
color: #fff;
}

.vgp-compare-2026-price {
color: #b38b00;
font-weight: 700;
font-size: 16px;
}

.vgp-compare-2026-check {
color: #27ae60;
font-weight: bold;
}

/* Chú thích phía dưới */
.vgp-compare-2026-footer-note {
margin-top: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
color: #555;
line-height: 2;
}

@media (max-width: 768px) {
.vgp-compare-2026-header h2 { font-size: 20px; }
}
/* Scoped CSS - vgp-v3- */
.vgp-v3-wrapper {  }
.vgp-v3-card { max-width: 1300px; margin: auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #eee; overflow: hidden; }
.vgp-v3-header { background: #0a3d2c; padding: 25px; text-align: center; color: #fff; }
.vgp-v3-header h3 { margin: 0; font-size: 20px; letter-spacing: 1px;color:#fff; }
.vgp-v3-header p { margin: 5px 0 0; color: #f9dfa1; font-size: 13px; }

.vgp-v3-body { padding: 25px; }
.vgp-v3-input-box { margin-bottom: 20px; flex: 1; }
.vgp-v3-input-box label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: bold; color: #444; }
.vgp-v3-input-box input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; outline: none; transition: 0.3s; font-size: 16px; }
.vgp-v3-input-box input:focus { border-color: #d4af37; box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
.vgp-v3-row { display: flex; gap: 15px; }

.vgp-v3-btn-calc { 
width: 100%; padding: 15px; border: none; border-radius: 6px; 
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
color: #0a3d2c; font-weight: 700; cursor: pointer; font-size: 16px; 
}
.vgp-v3-btn-calc:hover { opacity: 0.9; transform: translateY(-1px); }

/* Modal Popup */
.vgp-v3-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); }
.vgp-v3-modal-content { background: #fff; margin: 2% auto; width: 95%; max-width: 1100px; border-radius: 12px; height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.vgp-v3-modal-header { background: #0a3d2c; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; }
.vgp-v3-modal-header h4 { color: #f9dfa1; margin: 0; }
.vgp-v3-close { color: #fff; font-size: 30px; cursor: pointer; }

.vgp-v3-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; overflow-y: auto; flex: 1; }
.vgp-v3-col { display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 8px; }
.vgp-v3-col-title { background: #f8fcfb; padding: 10px; text-align: center; font-weight: bold; color: #0a3d2c; border-bottom: 2px solid #d4af37; }
.vgp-v3-table-area { height: 100%; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; padding: 12px; border-bottom: 1px solid #eee; }
td { padding: 12px; border-bottom: 1px solid #f9f9f9; }


@media (max-width: 768px) {
.vgp-v3-modal-grid { grid-template-columns: 1fr; }
.vgp-v3-row { flex-direction: column; gap: 0; }
}
/* Scoped CSS - vgp-rev-2026- */
.vgp-rev-2026-section {

max-width: 1250px;
margin: 50px auto;
padding: 50px 20px;
background-color: #fcfcfc;
border-radius: 5px;
}

.vgp-rev-2026-title {
text-align: center;
margin-bottom: 40px;
}

.vgp-rev-2026-title h2 {
color: #0a3d2c;
font-size: 28px;
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
display: inline-block;
padding-bottom: 15px;
}

.vgp-rev-2026-title h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
border-radius: 2px;
}

.vgp-rev-2026-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.vgp-rev-2026-card {
background: #fff;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
border-top: 5px solid #0a3d2c;
transition: transform 0.3s ease;
position: relative;
}

.vgp-rev-2026-card:hover {
transform: translateY(-10px);
border-top-color: #d4af37;
}

.vgp-rev-2026-quote {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
color: rgba(10, 61, 44, 0.1);
font-family: serif;
}

.vgp-rev-2026-info {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.vgp-rev-2026-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #d4af37 0%, #f9dfa1 50%, #d4af37 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #0a3d2c;
margin-right: 15px;
font-size: 18px;
}

.vgp-rev-2026-meta h4 {
margin: 0;
color: #0a3d2c;
font-size: 17px;
}

.vgp-rev-2026-meta span {
font-size: 12px;
color: #b38b00;
font-weight: 600;
text-transform: uppercase;
}

.vgp-rev-2026-content {
font-size: 14.5px;
line-height: 1.6;
color: #555;
font-style: italic;
text-align: justify;
}

.vgp-rev-2026-stars {
margin-top: 15px;
color: #f9dfa1;
}

/* Mobile Responsive */
@media (max-width: 992px) {
.vgp-rev-2026-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
.vgp-rev-2026-grid { grid-template-columns: 1fr; }
.vgp-rev-2026-title h2 { font-size: 22px; }
}
/* Scoped CSS with prefix vhhm- to avoid conflicts */
.vhhm-main-wrapper {
line-height: 1.6;
color: #333;
max-width: 100%;
margin: 0px auto;
border: 1px solid #e0e0e0;
background-color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-radius: 5px;
margin-top: 30px;
}

.vhhm-header-banner {
background-color: #0a3d2c;
color: #ffffff;
padding: 40px 30px;
text-align: center;
border-bottom: 4px solid #c5a059;
}

.vhhm-header-banner h1 {
margin: 0;
font-size: 26px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: #fff;
}

.vhhm-header-banner p {
margin-top: 10px;
font-size: 16px;
color: #c5a059;
font-weight: 500;
}

.vhhm-content-padding {
padding: 30px;
}

/* Project Info Grid */
.vhhm-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}

@media (max-width: 600px) {
.vhhm-info-grid { grid-template-columns: 1fr; }
}

.vhhm-info-item {
display: flex;
align-items: flex-start;
background: #f9fbf9;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #0a3d2c;
}

.vhhm-info-item i {
color: #0a3d2c;
font-size: 1.2rem;
margin-right: 15px;
margin-top: 5px;
}

.vhhm-info-text strong {
display: block;
color: #0a3d2c;
text-transform: uppercase;
font-size: 0.85rem;
margin-bottom: 3px;
}

/* Highlight Section */
.vhhm-timeline-box {
background-color: #0a3d2c;
color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
margin: 30px 0;
}

.vhhm-timeline-box b {
color: #c5a059;
font-size: 1.1rem;
}

/* Section Styling */
.vhhm-section-title {
color: #0a3d2c;
font-size: 1.4rem;
border-bottom: 2px solid #0a3d2c;
display: inline-block;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: 700;
}

.vhhm-intro-text {
text-align: justify;
margin-bottom: 30px;
font-style: italic;
}

/* Products list */
.vhhm-product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
list-style: none;
padding: 0;
margin-bottom: 30px;
}

.vhhm-product-list li {
background: #f1f1f1;
padding: 12px 20px;
border-radius: 4px;
font-weight: 600;
display: flex;
align-items: center;
}

.vhhm-product-list li::before {
content: "◆";
color: #c5a059;
margin-right: 10px;
}

/* Features List */
.vhhm-feature-item {
display: flex;
margin-bottom: 15px;
}

.vhhm-feature-item i {
color: #27ae60;
margin-right: 12px;
font-size: 1.2rem;
}

/* Potentials Box */
.vhhm-potential-box {
border: 2px dashed #0a3d2c;
padding: 20px;
background-color: #f0f4f2;
border-radius: 10px;
margin-top: 30px;
}

.vhhm-footer-quote {
text-align: center;
padding: 30px;
background-color: #0a3d2c;
color: #fff;
font-size: 1.1rem;
font-weight: 300;
line-height: 1.8;
}

.vhhm-gold-text {
color: #c5a059;
font-weight: bold;
}
/* Scoped Styles with vh-invest- prefix */
.vh-invest-container {
line-height: 1.7;
color: #2c3e50;
max-width: 100%;
margin: 30px auto;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border: 1px solid #e0e0e0;
}

/* Header Section */
.vh-invest-header {
background-color: #0a3d2c;
padding: 40px 30px;
text-align: center;
color: #ffffff;
}

.vh-invest-header i {
font-size: 40px;
color: #c5a059;
margin-bottom: 15px;
}

.vh-invest-header h2 {
margin: 0;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.4;
color: #fff;
}

/* Opening Statement */
.vh-invest-intro {
padding: 30px;
background: #fdfdfd;
text-align: center;
border-bottom: 1px solid #eee;
}

.vh-invest-intro p {
font-size: 18px;
margin: 0;
color: #444;
font-weight: 500;
}

.vh-invest-highlight-text {
color: #0a3d2c;
font-weight: bold;
border-bottom: 2px solid #c5a059;
}

/* Main Content */
.vh-invest-body {
padding: 30px;
}

.vh-invest-card {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
padding: 20px;
background: #f9fbfb;
border-radius: 8px;
transition: transform 0.3s ease;
}

.vh-invest-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(10, 61, 44, 0.1);
}

.vh-invest-icon-box {
background: #0a3d2c;
color: #fff;
min-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
font-size: 20px;
}

.vh-invest-details strong {
display: block;
font-size: 18px;
color: #0a3d2c;
margin-bottom: 8px;
text-transform: uppercase;
}

.vh-invest-details ul {
margin: 0;
padding-left: 18px;
color: #555;
}

.vh-invest-details li {
margin-bottom: 5px;
}

/* Insight Box */
.vh-invest-insight {
background: #0a3d2c;
color: #ffffff;
padding: 25px;
border-radius: 8px;
text-align: center;
margin-top: 10px;
}

.vh-invest-insight i {
font-size: 24px;
color: #c5a059;
margin-bottom: 10px;
}

.vh-invest-insight p {
font-style: italic;
font-size: 17px;
margin: 0;
}

/* CTA Section */
.vh-invest-footer {
padding: 30px;
text-align: center;
background: #f4f7f6;
}

.vh-invest-cta-btn {
display: inline-block;
background: #0a3d2c;
color: #f9dfa1;
padding: 12px 30px;
text-decoration: none;
font-weight: bold;
border-radius: 50px;
text-transform: uppercase;
border: 2px solid #f9dfa1;
transition: 0.3s;
}

.vh-invest-cta-btn:hover {
background: #c5a059;
color: #0a3d2c;
}

@media (max-width: 600px) {
.vh-invest-card { flex-direction: column; text-align: center; }
.vh-invest-icon-box { margin: 0 auto 15px auto; }
.vh-invest-header h2 { font-size: 20px; }
}
/* Scoped CSS with prefix vhm-vip- to prevent conflicts */
:root {
    --vhm-primary: #0a3d2c;
    --vhm-gold: #b38b00;
    --vhm-light-bg: #f4f7f5;
    --vhm-text: #2c3e50;
}

.vhm-vip-wrapper {
    color: var(--vhm-text);
    max-width: 100%;
    margin: 20px auto;
    background: #fff;
    line-height: 1.6;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 5px;
        overflow: hidden;
}

/* Banner & Header */
.vhm-vip-banner {
    background-color: var(--vhm-primary);
    color: #fff;
    padding: 50px 30px;
    text-align: center;
    border-bottom: 5px solid var(--vhm-gold);
    position: relative;
}

.vhm-vip-banner h1 {
    margin: 0;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.vhm-vip-banner i {
    font-size: 40px;
    color: var(--vhm-gold);
    margin-bottom: 15px;
}

/* Investment Rationale Section */
.vhm-vip-section {
    padding: 40px 30px;
}

.vhm-vip-quote {
    text-align: center;
    font-size: 18px;
    font-style: italic;
    border-left: 4px solid var(--vhm-gold);
    background: var(--vhm-light-bg);
    padding: 20px;
    margin-bottom: 30px;
}

.vhm-vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.vhm-vip-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
    border-top: 3px solid var(--vhm-primary);
}

.vhm-vip-card:hover {
    box-shadow: 0 5px 15px rgba(10, 61, 44, 0.1);
    transform: translateY(-5px);
}

.vhm-vip-card i {
    color: var(--vhm-gold);
    font-size: 24px;
    margin-bottom: 10px;
}

.vhm-vip-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--vhm-primary);
    text-transform: uppercase;
}

/* Project Status Section */
.vhm-vip-status {
    background: var(--vhm-primary);
    color: #fff;
    padding: 40px 30px;
    text-align: center;
}

.vhm-vip-badge {
    display: inline-block;
    background: var(--vhm-gold);
    color: var(--vhm-primary);
    padding: 5px 20px;
    font-weight: bold;
    border-radius: 50px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Connectivity List */
.vhm-vip-location-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 25px 0;
}

.vhm-vip-location-item {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 12px;
    border-radius: 6px;
}

.vhm-vip-location-item i {
    color: var(--vhm-primary);
    margin-right: 12px;
    width: 20px;
}

/* Footer & CTA */
.vhm-vip-footer {
    padding: 40px 30px;
    text-align: center;
    background: var(--vhm-light-bg);
}

.vhm-vip-btn {
    display: inline-block;
    background: var(--vhm-primary);
    color: var(--vhm-gold);
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    border: 2px solid var(--vhm-gold);
    transition: 0.3s;
}

.vhm-vip-btn:hover {
    background: var(--vhm-gold);
    color: var(--vhm-primary);
}

.vhm-vip-hashtags {
    margin-top: 25px;
    font-size: 13px;
    color: #777;
    line-height: 2;
}

@media (max-width: 600px) {
    .vhm-vip-location-list { grid-template-columns: 1fr; }
    .vhm-vip-banner h1 { font-size: 20px; }
}
.vhm-loc-container {

    max-width: 100%;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}

/* Header section */
.vhm-loc-header {
    background-color: #0a3d2c;
    color: #ffffff;
    padding: 30px 20px;
    text-align: center;
    border-bottom: 4px solid #c5a059;
}

.vhm-loc-header h2 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.vhm-loc-header p {
    margin: 10px 0 0;
    opacity: 0.8;
    font-weight: 300;
    font-size: 15px;
}

/* Content Grid */
.vhm-loc-body {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background-color: #fff;
}

@media (max-width: 600px) {
    .vhm-loc-body {
        grid-template-columns: 1fr;
    }
}

/* Location Item Card */
.vhm-loc-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f4f7f5;
    border-radius: 8px;
    border: 1px solid #efefef;
    transition: all 0.3s ease;
}

.vhm-loc-card:hover {
    background: #fff;
    border-color: #c5a059;
    box-shadow: 0 4px 12px rgba(10, 61, 44, 0.1);
    transform: translateY(-2px);
}

.vhm-loc-icon {
    min-width: 50px;
    height: 50px;
    background-color: #0a3d2c;
    color: #c5a059;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}

.vhm-loc-info {
    flex-grow: 1;
}

.vhm-loc-destination {
    display: block;
    font-weight: 700;
    color: #0a3d2c;
    font-size: 15px;
    margin-bottom: 2px;
}

.vhm-loc-distance {
    font-size: 14px;
    color: #555;
    display: block;
}

.vhm-loc-time {
    font-size: 13px;
    color: #c5a059;
    font-weight: 600;
    margin-top: 3px;
    display: inline-block;
}

/* Footer/Summary */
.vhm-loc-footer {
    background-color: #f9fbf9;
    padding: 20px 30px;
    border-top: 1px solid #eee;
    text-align: center;
    font-style: italic;
    color: #666;
    font-size: 14px;
}

.vhm-loc-highlight {
    color: #0a3d2c;
    font-weight: bold;
}
  /* Reset cơ bản cho component để tránh ảnh hưởng từ CSS bên ngoài */
  .pht-promo-wrapper {
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    max-width: 1300px;
    margin: 20px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    color: #333333;
    line-height: 1.6;
  }
  .pht-promo-wrapper * {
    box-sizing: border-box;
  }
  .pht-promo-title {
    color: #8e1c1c;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .pht-promo-lead {
    font-size: 16px;
    color: #1976d2;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #e0e0e0;
  }
  .pht-promo-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }
  .pht-promo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
  }
  .pht-promo-icon {
    color: #d4af37;
    font-size: 16px;
    line-height: 1.5;
    flex-shrink: 0;
  }
  .pht-promo-highlight {
    font-weight: 700;
    color: #222222;
  }
  .pht-promo-summary {
    font-style: italic;
    font-size: 15px;
    color: #444444;
    padding: 16px;
    background-color: #f8f9fa;
    border-left: 4px solid #1976d2;
    margin-bottom: 28px;
    border-radius: 0 8px 8px 0;
  }
  .pht-promo-cta-box {
    background: linear-gradient(135deg, #8e1c1c 0%, #a72323 100%);
    color: #ffffff;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(142, 28, 28, 0.25);
  }
  .pht-promo-cta-text {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
  }
  .pht-promo-cta-subtext {
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
    color: #fce4ec;
  }
  
  /* Responsive cho thiết bị di động */
  @media (max-width: 600px) {
    .pht-promo-wrapper {
      padding: 20px;
    }
    .pht-promo-title {
      font-size: 20px;
    }
    .pht-promo-cta-text {
      font-size: 16px;
    }
  }

    .pht-vsp-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    max-width: 1300px;
    margin: 0 auto;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .pht-vsp-container * {
    box-sizing: border-box;
  }
  
  /* Header Color Block */
  .pht-vsp-main-title {
    background-color: #8e1c1c;
    color: #ffffff;
    padding: 24px 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.5px;
  }
  .pht-vsp-intro {
    background-color: #f4f6f8;
    padding: 20px 25px;
    border-left: 5px solid #1976d2;
    font-size: 16px;
    margin-bottom: 30px;
    color: #444444;
    font-style: italic;
  }
  
  /* Các section nội dung */
  .pht-vsp-section {
    margin-bottom: 35px;
    padding: 0 25px;
  }
  .pht-vsp-heading {
    display: flex;
    align-items: center;
    color: #1976d2;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 10px;
  }
  .pht-vsp-heading-icon {
    margin-right: 12px;
    color: #d4af37;
    font-size: 22px;
  }
  
  /* Cấu trúc List */
  .pht-vsp-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pht-vsp-list-item {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-size: 15px;
  }
  .pht-vsp-list-item::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 0;
    color: #d4af37;
    font-size: 14px;
  }
  .pht-vsp-highlight {
    font-weight: 700;
    color: #8e1c1c;
  }
  
  /* Grid Layout cho các thẻ Card */
  .pht-vsp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .pht-vsp-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #1976d2;
    padding: 20px;
    border-radius: 6px;
    transition: transform 0.2s ease;
  }
  .pht-vsp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(25, 118, 210, 0.1);
  }
  .pht-vsp-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 15px;
    text-transform: uppercase;
  }

  /* Responsive Mobile */
  @media (max-width: 600px) {
    .pht-vsp-main-title {
      font-size: 20px;
      padding: 18px 15px;
    }
    .pht-vsp-intro {
      padding: 15px;
      font-size: 15px;
    }
    .pht-vsp-section {
      padding: 0 15px;
    }
    .pht-vsp-heading {
      font-size: 18px;
    }
  }

    /* Container tổng */
  .pht-vsp-desc-wrapper {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    max-width: 1300px;
    margin: 0px auto;
    background: #ffffff;
    color: #333333;
    line-height: 1.7;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .pht-vsp-desc-wrapper * {
    box-sizing: border-box;
  }

  /* Phần Tiêu đề chính */
  .pht-vsp-desc-header {
    background: linear-gradient(90deg, #8e1c1c 0%, #b32424 100%);
    color: #ffffff;
    padding: 25px 20px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
  }

  /* Đoạn giới thiệu chung */
  .pht-vsp-desc-intro {
    background-color: #f8f9fa;
    padding: 25px 30px;
    font-size: 15.5px;
    color: #444444;
    border-bottom: 1px solid #eeeeee;
  }
  .pht-vsp-desc-intro p {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: justify;
  }
  .pht-vsp-desc-intro p:last-child {
    margin-bottom: 0;
  }

  /* Khu vực nội dung chính */
  .pht-vsp-desc-body {
    padding: 30px;
  }
  
  /* Tiêu đề mục lớn */
  .pht-vsp-desc-section-title {
    color: #1976d2;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d4af37;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Box từng phân khu nhỏ */
  .pht-vsp-desc-group {
    margin-bottom: 30px;
  }
  .pht-vsp-desc-group:last-child {
    margin-bottom: 0;
  }
  .pht-vsp-desc-group-title {
    background-color: #e3f2fd;
    color: #1976d2;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid #8e1c1c;
    margin-bottom: 15px;
  }

  /* Danh sách liệt kê */
  .pht-vsp-desc-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pht-vsp-desc-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 15px;
  }
  .pht-vsp-desc-item::before {
    content: "✓";
    position: absolute;
    left: 8px;
    top: 2px;
    color: #d4af37;
    font-size: 16px;
    font-weight: 900;
  }
  .pht-vsp-desc-highlight {
    font-weight: 700;
    color: #8e1c1c;
  }

  /* Responsive Mobile */
  @media (max-width: 600px) {
    .pht-vsp-desc-header {
      font-size: 18px;
      padding: 20px 15px;
    }
    .pht-vsp-desc-intro, .pht-vsp-desc-body {
      padding: 20px 15px;
    }
    .pht-vsp-desc-section-title {
      font-size: 18px;
    }
  }
     .vhp-layout {
     	max-width: 1300px;
     	margin: 30px auto;
        box-sizing: border-box;
    }

    .vhp-thumbnail {
        width: 100%;
        cursor: zoom-in;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        margin-top: 30px;
    }

    .vhp-thumbnail:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .vhp-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* Popup Modal */
    .vhp-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 999999;
        overflow: hidden;
    }

    .vhp-close-btn {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 40px;
        cursor: pointer;
        z-index: 1000000;
        line-height: 1;
    }

    /* Khu vực chứa ảnh để bắt sự kiện kéo thả */
    .vhp-drag-area {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
    }

    .vhp-drag-area:active {
        cursor: grabbing;
    }

    .vhp-full-image {
        max-width: 90vw;
        max-height: 90vh;
        transform-origin: center;
        will-change: transform;
        /* Transition chỉ mượt khi zoom. Khi kéo sẽ bị tắt qua class .vhp-dragging */
        transition: transform 0.15s ease-out; 
    }

    /* Tắt hoàn toàn độ trễ khi đang kéo ảnh */
    .vhp-dragging {
        transition: none !important; 
    }

    /* Các nút điều khiển */
    .vhp-controls {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
        z-index: 1000000;
    }

    .vhp-controls button {
        background: rgb(89 88 88 / 69%);
        color: white;
        border: 1px solid white;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        backdrop-filter: blur(5px);
        font-family: Arial, sans-serif;
    }

    .vhp-controls button:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Nền đen che phủ toàn màn hình */
    .vhp-yt-overlay {
        display: none; /* Ẩn mặc định */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999999;
        justify-content: center;
        align-items: center;
    }

    /* Hộp chứa nội dung video */
    .vhp-yt-wrapper {
        position: relative;
        width: 90%;
        max-width: 900px;
        background: #000;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* Nút đóng (Dấu X) */
    .vhp-yt-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: #fff;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
        transition: color 0.2s;
    }

    .vhp-yt-close:hover {
        color: #ff4d4d;
    }

    /* Vùng chứa Iframe giữ tỷ lệ 16:9 chuẩn của YouTube */
    .vhp-yt-iframe-container {
        position: relative;
        padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
    }

    .vhp-yt-iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }



      /* --- BIẾN MÀU & BỐ CỤC CHUNG --- */
        .vsp-clear-wrapper {
            --vsp-primary: #0a3d2c;
            --vsp-gradient: linear-gradient(45deg, #ff3d00, #ffeb3b);
            
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 15px;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
            /* Không nền để chìm vào background xanh chạy động của web */
        }

        .vsp-layout-grid {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 50px;
        }

        /* --- CỘT TRÁI: THÔNG TIN (TRONG SUỐT) --- */
        .vsp-info-side {
            flex: 1 1 500px;
            color: #ffffff;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        }

        .vsp-info-side h1 {
            font-size: 2.4rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            border-left: 5px solid #ffeb3b;
            padding-left: 18px;
            line-height: 1.3;
            font-weight: 800;
        }

        .vsp-info-desc {
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(8px);
            padding: 25px;
            border-radius: 12px;
            font-size: 1.05rem;
            line-height: 1.7;
            margin-bottom: 30px;
            text-align: justify;
            text-shadow: none;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .vsp-btn-row {
            display: flex;
            gap: 15px;
        }

        .vsp-btn-glow {
            padding: 14px 35px;
            background: var(--vsp-gradient);
            color: #fff;
            text-decoration: none;
            font-weight: 800;
            border-radius: 30px;
            text-transform: uppercase;
            transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 5px 15px rgba(255, 61, 0, 0.3);
            text-shadow: none;
            letter-spacing: 1px;
        }

        .vsp-btn-glow:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(255, 61, 0, 0.6);
            color: #fff;
        }

        /* --- CỘT PHẢI: FORM ĐĂNG KÝ --- */
        .vsp-form-side {
            flex: 1 1 400px;
            max-width: 500px;
            position: relative;
            z-index: 1;
        }

        /* Viền phát sáng nổi bật */
        .vsp-form-side::before {
            content: "";
            position: absolute;
            top: -4px; left: -4px; right: -4px; bottom: -4px;
            background: var(--vsp-gradient);
            z-index: -1;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
            animation: vspPulse 3s infinite alternate;
        }

        @keyframes vspPulse {
            0% { opacity: 0.8; }
            100% { opacity: 1; }
        }

        .vsp-form-inner {
            background: #ffffff;
            padding: 35px 30px;
            border-radius: 16px;
        }

        .vsp-tabs {
            display: flex;
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 30px;
        }

        .vsp-tab-btn {
            flex: 1;
            background: none;
            border: none;
            padding: 12px 5px;
            font-size: 1.05rem;
            font-weight: 700;
            color: #999;
            cursor: pointer;
            transition: 0.3s;
            position: relative;
        }

        .vsp-tab-btn::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 0; right: 0;
            height: 3px;
            background: var(--vsp-primary);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .vsp-tab-btn.active {
            color: var(--vsp-primary);
        }

        .vsp-tab-btn.active::after {
            transform: scaleX(1);
        }

        .vsp-tab-content {
            display: none;
            animation: vspFadeUp 0.4s ease forwards;
        }

        .vsp-tab-content.active {
            display: block;
        }

        /* Tối ưu UI Form với Floating Labels */
        .vsp-floating-input {
            position: relative;
            margin-bottom: 22px;
        }

        .vsp-floating-input input {
            width: 100%;
            padding: 24px 15px 8px 15px; /* Chừa không gian cho label trượt lên */
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            background: #f8fbfb;
            box-sizing: border-box;
            outline: none;
            transition: all 0.3s ease;
            color: #222;
            font-weight: 500;
        }

        .vsp-floating-input input:focus {
            border-color: var(--vsp-primary);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(10, 61, 44, 0.1);
        }

        .vsp-floating-input label {
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            color: #777;
            font-size: 1rem;
            pointer-events: none;
            transition: all 0.25s ease;
        }

        /* Hiệu ứng trượt label lên trên khi click hoặc khi có dữ liệu */
        .vsp-floating-input input:focus ~ label,
        .vsp-floating-input input:not(:placeholder-shown) ~ label {
            top: 14px;
            font-size: 0.75rem;
            color: var(--vsp-primary);
            font-weight: 700;
        }

        .vsp-submit {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            margin-top: 10px;
        }

        .vsp-submit-booking {
            background: var(--vsp-primary);
            color: #fff !important;
        }
        
        .vsp-submit-booking:hover {
            background: #06281d;
            box-shadow: 0 8px 20px rgba(10, 61, 44, 0.3);
            transform: translateY(-2px);
        }

        .vsp-submit-ctv {
            background: var(--vsp-gradient);
            color: #000;
        }

        .vsp-submit-ctv:hover {
            box-shadow: 0 8px 20px rgba(255, 61, 0, 0.4);
            color: #fff;
            transform: translateY(-2px);
        }

        @keyframes vspFadeUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* MOBILE RESPONSIVE */
        @media (max-width: 768px) {
            .vsp-layout-grid { flex-direction: column; gap: 40px; }
            .vsp-info-side h1 { font-size: 1.8rem; text-align: center; }
            .vsp-btn-row { flex-direction: column; text-align: center; }
            .vsp-form-side { width: 100%; }
            .vsp-form-inner { padding: 25px 20px; }
            .hero
            {
            	height: auto;
            }
        }
          .item_slider_vinhomes {
        display: inline-block;
        position: relative;
        padding: 5px 15px;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(45deg, #ff3d00, #ffeb3b);
        background-size: 200% 200%;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        outline: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(255, 61, 0, 0.4);
        animation: xyz-premium-gradient-animation 3s ease infinite;
        user-select: none;
        text-align: center;
        margin: auto;
        display: block; 
        width: calc(100% / 3 - 20px); 
        max-width: 1300px; 
        margin: 0px 10px; 
        float: left;
        margin-top: 15px;
    }



  /* HỆ THỐNG GIAO DIỆN NHÀ ĐẦU TƯ - PREFIX: vsp-pro- */
    .vsp-pro-container {
        max-width: 1300px;
        margin: 50px auto;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* Khung bao ngoài đẳng cấp */
    .vsp-pro-wrapper {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-top: 5px solid #1a365d;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    }

    /* Tiêu đề lớn */
    .vsp-pro-main-title {
        text-align: center;
        color: #1a365d;
        font-size: 26px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 40px;
        letter-spacing: 1px;
        position: relative;
    }
    .vsp-pro-main-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: #c5a059;
        margin: 15px auto 0;
    }

    /* Hệ thống Grid 2 cột */
    .vsp-pro-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Thẻ Item bài viết */
    .vsp-pro-item {
        display: flex;
        align-items: center;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 20px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .vsp-pro-item:hover {
        background: #1a365d;
        border-color: #1a365d;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(26, 54, 93, 0.15);
    }

    /* Badge Chuyên sâu nổi bật */
    .vsp-pro-badge {
        background: #e53e3e; /* Đỏ nổi bật */
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 4px;
        text-transform: uppercase;
        margin-right: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tiêu đề bài viết trong item */
    .vsp-pro-text {
        color: #1a365d;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        transition: color 0.2s;
    }

    .vsp-pro-item:hover .vsp-pro-text {
        color: #ffffff;
    }

    /* Cơ chế Ẩn/Hiện (Checkbox Hack) */
    #vsp-pro-toggle { display: none; }

    /* Mặc định chỉ hiện 6 bài đầu (3 hàng x 2 cột) */
    .vsp-pro-extra {
        display: none;
    }

    /* Khi check vào nút Xem thêm -> Hiện các hàng tiếp theo */
    #vsp-pro-toggle:checked ~ .vsp-pro-grid .vsp-pro-extra {
        display: flex;
        animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Nút Xem thêm */
    .vsp-pro-btn {
        display: block;
        width: 200px;
        margin: 40px auto 0;
        padding: 12px;
        background: #fff;
        border: 2px solid #c5a059;
        color: #c5a059;
        text-align: center;
        border-radius: 6px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        font-size: 13px;
    }

    .vsp-pro-btn:hover {
        background: #c5a059;
        color: #fff;
    }

    /* Đổi chữ nút bấm */
    #vsp-pro-toggle:checked ~ .vsp-pro-btn::after { content: "THU GỌN BÀI VIẾT"; }
    #vsp-pro-toggle:not(:checked) ~ .vsp-pro-btn::after { content: "XEM THÊM PHÂN TÍCH"; }

    /* Responsive */
    @media (max-width: 800px) {
        .vsp-pro-grid { grid-template-columns: 1fr; }
        .vsp-pro-wrapper { padding: 25px; }
        .vsp-btn-glow
        {
        	display: block;
        	margin-bottom: 10px;
        }
    }
    /* Container chính phủ toàn màn hình */
.vh-sqh-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
    display: none; /* Mặc định ẩn */
    overflow: hidden;
}

/* Nút đóng chuyên dụng */
.vh-sqh-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #ff3d00, #ffeb3b);
    border: none;
    border-radius: 50%;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}

.vh-sqh-close-btn:hover {
    transform: scale(1.1);
}

/* Iframe hiển thị quy hoạch */
.vh-sqh-iframe-container {
    width: 100%;
    height: 100%;
    border: none;
}

/* Hiệu ứng mượt mà khi mở */
.vh-sqh-open {
    display: block !important;
    animation: vhSqhFadeIn 0.3s ease-out;
}

@keyframes vhSqhFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}