:root {
    --primary: #e67e22;
    --dark: #2c3e50;
    --white: rgba(255, 255, 255, 0.95);
}

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    background-color: #333;
    background-size: cover;
    background-attachment: fixed;
    transition: background-image 1.2s ease-in-out;
}

.bg-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
    z-index: -1;
}

.header {
    margin: 20px auto;
    width: 90%;
    height: 70px;
    background: var(--white);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    position: sticky; top: 20px; z-index: 100;
}

.logo { font-size: 24px; font-weight: 800; color: var(--dark); }
.logo span { color: var(--primary); }

.nav { list-style: none; display: flex; gap: 25px; }
.nav a { text-decoration: none; color: var(--dark); font-weight: 600; transition: 0.3s; }
.nav a:hover { color: var(--primary); }

.boxinfo {
    width: 90%;
    max-width: 600px;
    background: var(--white);
    margin: 100px auto;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    transition: 0.5s all ease;
}

.boxinfo.expanded {
    max-width: 800px;
    margin-top: 50px;
    margin-bottom: 0;
}

.text { font-size: 42px; color: var(--dark); margin-bottom: 10px; }
.description { font-size: 18px; color: #666; line-height: 1.8; }

/* Nội dung chi tiết */
.more-details {
    display: none;
    margin-top: 30px;
    text-align: left;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 15px;
}

.more-details section { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.more-details h3 { color: var(--primary); margin-bottom: 10px; }
.place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-weight: 500; }
.price-tag { background: #fdf2e9; padding: 10px; border-radius: 10px; color: var(--primary); font-weight: bold; }

.btn-more {
    background: var(--primary);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .header { width: 95%; padding: 0 15px; }
    .nav { display: none; } /* Ẩn menu trên mobile để tinh gọn */
    .text { font-size: 30px; }
    .boxinfo { padding: 30px; }
}