*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:#fff;
color:#222;
line-height:1.7;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(0,0,0,.35);
backdrop-filter:blur(12px);
transition:.3s;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height:65px;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
color:#fff;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#c9a96e;
}

.book-btn{
background:#c9a96e;
color:#fff;
padding:14px 28px;
border-radius:40px;
font-weight:600;
transition:.3s;
}

.book-btn:hover{
transform:translateY(-3px);
}

/* HERO */

.hero{
height:100vh;
position:relative;
overflow:hidden;
}

.hero img{
width:100%;
height:100%;
object-fit:cover;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.58);
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#fff;
z-index:2;
width:90%;
}

.rating-badge{
display:inline-block;
padding:12px 24px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
border-radius:50px;
margin-bottom:25px;
}

.hero h4{
color:#c9a96e;
letter-spacing:4px;
font-weight:500;
margin-bottom:15px;
}

.hero h1{
font-size:82px;
line-height:1.05;
font-weight:800;
margin-bottom:25px;
text-shadow:0 5px 25px rgba(0,0,0,.5);
}

.hero p{
font-size:20px;
max-width:700px;
margin:auto;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-gold{
background:#c9a96e;
color:#fff;
padding:15px 35px;
border-radius:40px;
font-weight:600;
}

.btn-outline{
border:2px solid #fff;
color:#fff;
padding:15px 35px;
border-radius:40px;
font-weight:600;
}

.btn-outline.dark{
color:#222;
border:2px solid #222;
}

/* SECTION */

section{
padding:110px 0;
}

.section-tag{
display:inline-block;
color:#c9a96e;
font-size:14px;
letter-spacing:3px;
font-weight:700;
margin-bottom:15px;
}

h2{
font-size:48px;
margin-bottom:25px;
}

/* ABOUT */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.about-grid img{
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.features{
list-style:none;
margin-top:20px;
}

.features li{
margin-bottom:12px;
}

/* ROOMS */

.rooms{
background:#f8f8f8;
}

.room-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.room-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
}

.room-card:hover{
transform:translateY(-8px);
}

.room-card img{
height:260px;
width:100%;
object-fit:cover;
}

.room-content{
padding:25px;
}



/* REVIEWS */

.reviews{
background:#111;
color:#fff;
}

.review-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.review-card{
background:#1b1b1b;
padding:30px;
border-radius:20px;
}

.stars{
color:#c9a96e;
font-size:22px;
margin-bottom:15px;
}

.review-card h4{
margin-top:20px;
color:#c9a96e;
}

.review-card span{
opacity:.7;
}

/* CONTACT */

.contact-info{
font-size:18px;
margin-bottom:25px;
}

.contact-info p{
margin-bottom:10px;
}

.map-wrap{
overflow:hidden;
border-radius:20px;
box-shadow:0 10px 35px rgba(0,0,0,.15);
}

/* FOOTER */

footer{
background:#0f0f0f;
color:#fff;
text-align:center;
padding:80px 20px;
}

footer h3{
color:#c9a96e;
margin-bottom:15px;
}

/* FLOAT */

.floating-call,
.floating-zalo{
position:fixed;
right:20px;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:24px;
z-index:999;
box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.floating-call{
bottom:95px;
background:#c9a96e;
}

.floating-zalo{
bottom:20px;
background:#0068ff;
}

/* MOBILE */

@media(max-width:991px){

.hero h1{
font-size:48px;
}

.about-grid{
grid-template-columns:1fr;
}

.room-grid{
grid-template-columns:1fr;
}

.review-grid{
grid-template-columns:1fr;
}


nav{
display:none;
}

.book-btn{
display:none;
}

h2{
font-size:34px;
}

}
.hero h1 {
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;

    background: linear-gradient(90deg, #d4af37, #ffffff, #c9a227);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* FLOATING BUTTONS */

.floating-call,
.floating-zalo,
.floating-facebook,
.floating-tiktok{
    position: fixed;
    right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 170px;
    height: 60px;

    padding: 8px 15px;

    background: #fff;
    border-radius: 50px;

    box-shadow: 0 5px 20px rgba(0,0,0,.2);

    z-index: 999;
    transition: all .3s ease;
}

/* Vị trí */

.floating-call{
    bottom: 20px;
}

.floating-zalo{
    bottom: 90px;
}

.floating-facebook{
    bottom: 160px;
}

.floating-tiktok{
    bottom: 230px;
}

/* Hover */

.floating-call:hover,
.floating-zalo:hover,
.floating-facebook:hover,
.floating-tiktok:hover{
    transform: translateX(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* Icon */

.floating-call img,
.floating-zalo img,
.floating-facebook img,
.floating-tiktok img{
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Text */

.floating-call span,
.floating-zalo span,
.floating-facebook span,
.floating-tiktok span{
    font-size: 15px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}

/* Mobile */

@media(max-width:768px){

    .floating-call,
    .floating-zalo,
    .floating-facebook,
    .floating-tiktok{
        min-width: 140px;
        height: 55px;
        right: 10px;
    }

    .floating-call img,
    .floating-zalo img,
    .floating-facebook img,
    .floating-tiktok img{
        width: 30px;
        height: 30px;
    }

    .floating-call span,
    .floating-zalo span,
    .floating-facebook span,
    .floating-tiktok span{
        font-size: 13px;
    }
}
.btn-outline:hover{
background:#fff;
color:#222;
transition:.3s;
}

.btn-outline.dark:hover{
background:#222;
color:#fff;
}