/* RESET */
:root{
    --container:1280px;
    --gutter:20px;
}


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

body{
    font-family:'Inter',sans-serif;
    background:#f5f0e7;
    color:#2d241d;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 20px;
}



/* =========================================
   HEADER PREMIUM
========================================= */

.site-header{

    position:sticky;

    top:0;

    z-index:9999;

    width:100%;

    background:#7a350f;

    box-shadow:
    0 2px 12px rgba(0,0,0,0.08);
}



/* CONTAINER */

.header-container{

    max-width:1280px;

    margin:0 auto;

    height:86px;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}



/* LOGO */

.header-logo{

    display:flex;

    align-items:center;
}

.header-logo img{

    width:165px;

    display:block;
}



/* DESKTOP MENU */

.desktop-menu{

    display:flex;

    align-items:center;

    gap:42px;
}

.desktop-menu a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#e8bf67;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    letter-spacing:0.5px;

    transition:0.3s;
}

.desktop-menu a:hover{

    opacity:0.8;
}

.desktop-menu i{

    font-size:10px;
}



/* RIGHT */

.header-right{

    display:flex;

    align-items:center;

    gap:18px;
}



/* LANG */

.header-lang{

    display:flex;

    align-items:center;

    gap:10px;
}

.header-lang img{

    width:28px;

    height:20px;

    object-fit:cover;

    cursor:pointer;
}



/* SEARCH */

.mobile-search{

    background:none;

    border:none;

    color:#e8bf67;

    font-size:22px;

    cursor:pointer;
}



/* BOOK BUTTON */

.header-book{

    height:50px;

    padding:0 34px;

    border-radius:12px;

    background:#c69d52;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:0.3s;
}

.header-book:hover{

    opacity:0.92;
}



/* MOBILE TOGGLE */

.mobile-toggle{

    display:none;

    background:none;

    border:none;

    color:#e8bf67;

    font-size:28px;

    cursor:pointer;
}



/* MOBILE MENU */

.mobile-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#f6f1e6;

    padding:26px 22px 34px;

    border-top:
    1px solid rgba(0,0,0,0.05);
}



/* ACTIVE */

.mobile-menu.active{

    display:block;
}



/* MOBILE NAV */

.mobile-nav{

    display:flex;

    flex-direction:column;

    gap:28px;
}

.mobile-nav a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#8b4a1d;

    text-decoration:none;

    font-size:18px;

    letter-spacing:0.4px;
}

.mobile-nav i{

    font-size:12px;
}



/* MOBILE LANG */

.mobile-lang{

    margin-top:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;
}

.mobile-lang img{

    width:34px;

    height:24px;

    object-fit:cover;
}



/* =========================================
   MOBILE
========================================= */

@media(max-width:992px){

    .desktop-menu{

        display:none;
    }

    .header-book{

        display:none;
    }

    .mobile-toggle{

        display:block;
    }

    .header-container{

        height:74px;
    }

    .header-logo img{

        width:145px;
    }

}



@media(max-width:768px){

    .header-container{

        padding:0 16px;
    }

    .header-right{

        gap:14px;
    }

    .header-lang img{

        width:26px;

        height:18px;
    }

    .mobile-search{

        font-size:20px;
    }

    .mobile-toggle{

        font-size:26px;
    }

}


/* =========================================================
   HERO BANNER / SLIDER
========================================================= */

.hero-slider-wrap{

    width:100%;

    max-width:1280px;

    margin:18px auto 0;

    padding:0 18px;

    box-sizing:border-box;
}



/* SLIDER */

.hero-slider{

    width:100%;

    position:relative;

    border-radius:28px;
}



/* WRAPPER */

.hero-slider .swiper-wrapper{

    height:auto !important;
}



/* SLIDE */

.hero-slider .swiper-slide{

    border-radius:28px;

    overflow:hidden;
}



/* IMAGE */

.hero-slider .swiper-slide img{

    width:100%;

    height:620px;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}



/* HOVER */

.hero-slider .swiper-slide:hover img{

    transform:scale(1.03);
}



/* PAGINATION */

.hero-slider .swiper-pagination{

    position:absolute;

    left:0;

    bottom:16px !important;

    width:100%;

    z-index:20;
}

.hero-slider .swiper-pagination-bullet{

    width:8px;

    height:8px;

    background:#fff;

    opacity:.5;

    transition:.3s;
}

.hero-slider .swiper-pagination-bullet-active{

    width:26px;

    border-radius:999px;

    background:#c79b4b;

    opacity:1;
}



/* ARROWS */

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next{

    width:54px;

    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    box-shadow:0 4px 20px rgba(0,0,0,.15);

    transition:.25s ease;
}

.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover{

    transform:scale(1.08);

    background:#fff;
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after{

    font-size:18px;

    font-weight:700;

    color:#9c5a27;
}



/* POSITION */

.hero-slider .swiper-button-prev{

    left:18px;
}

.hero-slider .swiper-button-next{

    right:18px;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .hero-slider .swiper-slide img{

        height:460px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .hero-slider-wrap{

        margin-top:10px;

        padding:0 10px;
    }

    .hero-slider{

        border-radius:24px;
    }

    .hero-slider .swiper-slide{

        border-radius:24px;
    }

    .hero-slider .swiper-slide img{

        height:300px;
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next{

        width:46px;

        height:46px;
    }

    .hero-slider .swiper-button-prev{

        left:12px;
    }

    .hero-slider .swiper-button-next{

        right:12px;
    }

    .hero-slider .swiper-button-prev::after,
    .hero-slider .swiper-button-next::after{

        font-size:15px;
    }

    .hero-slider .swiper-pagination{

        bottom:10px !important;
    }

}






/*=====================================
=          HERO PREMIUM               =
=====================================*/





/*=====================================
=            SHOW HIDE                =
=====================================*/





/*=====================================
=          DESKTOP COLLAGE            =
=====================================*/





/* ITEM */





/* BIG */

.hero-big{

    grid-row:1 / 3;
}



/* IMAGE */

.hero-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s;
}

.hero-item:hover img{

    transform:scale(1.05);
}



/*=====================================
=            MOBILE SLIDER            =
=====================================*/

.hero-slider{

    position:relative;

    padding:0 14px;
}

.hero-slider .swiper-slide{

    overflow:hidden;

    border-radius:18px;

    height:520px;
}

.hero-slider img{

    width:100%;
    height:100%;

    object-fit:cover;
}



/* BUTTON */

.swiper-button-next,
.swiper-button-prev{

    width:46px !important;
    height:46px !important;

    border-radius:50%;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(10px);
}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:18px !important;

    color:#fff;
}



/* DOT */

.swiper-pagination-bullet{

    background:#fff !important;

    opacity:0.6;
}

.swiper-pagination-bullet-active{

    opacity:1;

    background:#b88d4d !important;
}



/*=====================================
=             MOBILE                  =
=====================================*/

@media(max-width:991px){

    .desktop-only{
        display:none !important;
    }

    .mobile-only{
        display:block !important;
    }

}


/*=====================================
=         HIGHLIGHT SECTION           =
=====================================*/

.highlight-section{

    padding:40px 0 20px;

    background:#f5f0e7;
}

.highlight-grid{

    width:100%;
    max-width:var(--container);

    margin:auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:
        2fr
        1fr;

    gap:24px;
}



/* BOX */

.highlight-box,
.location-box{

    background:#fff;

    border:1px solid #e7dfd3;

    border-radius:18px;

    padding:30px;

    margin-bottom:24px;
}

.highlight-box h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:#9b6532;

    margin-bottom:34px;
}



/* ITEMS */

.highlight-items{

    display:flex;
    flex-direction:column;
    gap:24px;
}

.highlight-item{

    display:flex;
    align-items:center;
    gap:18px;
}

.highlight-icon{

    width:58px;
    height:58px;

    border-radius:16px;

    background:#f3eee6;

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

    font-size:24px;

    color:#9b6532;

    flex-shrink:0;
}

.highlight-text{

    font-size:20px;
    line-height:1.7;

    color:#2d241d;

    font-weight:500;
}



/* FACILITY */

.facility-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    gap:18px;
}

.facility-item{

    font-size:17px;

    color:#2d241d;
}



/* ABOUT */

.about-highlight{

    font-size:18px;
    line-height:2;
}



/* MAP */

.map-box{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    display:block;

    margin-bottom:24px;
}

.map-box img{

    width:100%;

    height:260px;

    object-fit:cover;
}

.map-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.25);

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

.map-overlay span{

    background:#fff;

    padding:14px 22px;

    border-radius:999px;

    color:#2d241d;

    font-size:15px;
    font-weight:700;
}



/* LOCATION */

.location-rate{

    margin-bottom:28px;
}

.location-rate strong{

    display:block;

    font-size:30px;

    color:#9b6532;

    margin-bottom:10px;
}

.location-rate span{

    color:#666;
}

.location-list{

    display:flex;
    flex-direction:column;
    gap:18px;
}

.location-item{

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

    gap:20px;

    font-size:16px;

    padding-bottom:14px;

    border-bottom:1px solid #eee;
}



/* MOBILE */

@media(max-width:991px){

    .highlight-grid{

        grid-template-columns:1fr;
    }

    .facility-grid{

        grid-template-columns:
            1fr
            1fr;
    }

}


@media(max-width:768px){

    .highlight-box,
    .location-box{

        padding:22px;
    }

    .highlight-box h2{

        font-size:32px;
    }

    .highlight-text{

        font-size:17px;
    }

    .facility-grid{

        grid-template-columns:1fr;
    }

    .map-box img{

        height:220px;
    }

}




/*=====================================
=         SERVICES SECTION            =
=====================================*/

.services-section{
     padding:10px 0 80px;
    background:#f5f0e7;
}

.services-wrapper{
    width:100%;
    max-width:var(--container);
    margin:auto;
    padding:0 20px;
}



/* HEADING */

.services-heading{
    margin-bottom:40px;
}

.services-subtitle{
    display:block;
    margin-bottom:18px;

    font-size:14px;
    letter-spacing:4px;

    color:#b37b3f;
    text-transform:uppercase;
}

.services-heading h2{
    font-family:'Playfair Display', serif;
    font-size:68px;
    font-weight:500;
    line-height:1.1;

    color:#a56a33;
    margin-bottom:20px;
}

.services-heading p{
    max-width:720px;

    font-size:18px;
    line-height:1.8;

    color:#4d3b2b;
}



/* GRID */
/* CHỈ HIỆN 4 Ô */

.services-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;
}



/* CARD */

.service-card{
    background:#f8f4ec;

    border-radius:22px;

    overflow:hidden;

    transition:0.4s;

    border:1px solid #eee1cf;
}

.service-card:hover{
    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}



/* IMAGE */
/* ẢNH HÌNH VUÔNG */

.service-thumb{
    width:100%;
    aspect-ratio:1/1;

    overflow:hidden;
}

.service-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:0.5s;
}

.service-card:hover img{
    transform:scale(1.06);
}



/* CONTENT */

.service-content{
    padding:26px 22px 28px;

    text-align:center;
}



/* TITLE */

.service-content h3{
    font-family:'Playfair Display', serif;

    font-size:20px;
    line-height:1.4;
    font-weight:500;

    color:#6d4721;

    min-height:50px;

    margin-bottom:14px;
}



/* TIME */

.service-time{
    font-size:17px;

    color:#7b532d;

    margin-bottom:14px;
}



/* CATEGORY */

.service-category{
    font-size:16px;

    color:#5b4a39;

    line-height:1.7;

    margin-bottom:18px;
}



/* PRICE */

.service-price{
    font-size:30px;

    font-family:'Playfair Display', serif;

    color:#a56a33;

    margin-bottom:22px;
}



/* BUTTON */

.service-btn{
    display:inline-flex;

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

    height:50px;

    padding:0 30px;

    border-radius:12px;

    background:#b08c4e;

    color:#fff;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    transition:0.3s;
}

.service-btn:hover{
    background:#946f36;
}



/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:900px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:768px){

    .services-heading h2{
        font-size:42px;
    }

    .services-grid{
        gap:16px;
    }

    .service-content{
        padding:20px 16px 24px;
    }

    .service-content h3{
        font-size:18px;

        min-height:auto;
    }

    .service-time{
        font-size:15px;
    }

    .service-category{
        font-size:15px;
    }

    .service-price{
        font-size:24px;
    }

    .service-btn{
        height:46px;

        padding:0 24px;

        font-size:15px;
    }

}


@media(max-width:540px){

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

}




/* =========================================
   FOOTER PREMIUM
========================================= */

.site-footer{

    position:relative;

    width:100vw;

    margin-left:calc(50% - 50vw);

    margin-right:calc(50% - 50vw);

    overflow:hidden;

    background:
    linear-gradient(
        rgba(120,62,25,0.82),
        rgba(120,62,25,0.82)
    ),
    url('/assets/images/footer-bg.jpg');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#ffffff;
}



/* OVERLAY */

.footer-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(120,62,25,0.35),
        rgba(120,62,25,0.35)
    );

    z-index:1;
}



/* CONTAINER */

.footer-container{

    position:relative;

    z-index:2;

    max-width:1280px;

    margin:0 auto;

    padding:
        95px
        40px
        75px;

    display:grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr;

    gap:95px;
}



/* LOGO */

.footer-logo{

    display:inline-block;

    margin-bottom:35px;
}

.footer-logo img{

    width:210px;

    display:block;
}



/* TEXT */

.footer-desc{

    font-size:18px;

    line-height:2;

    color:#ffffff;

    margin-bottom:38px;

    max-width:620px;
}

.footer-desc strong{

    font-weight:700;
}



/* HOTLINE */

.footer-hotline{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:20px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:45px;
}

.footer-hotline i{

    color:#ffffff;

    font-size:18px;
}



/* HEADING */

.footer-heading{

    font-family:'Playfair Display', serif;

    font-size:24px;

    letter-spacing:3px;

    color:#efc16e;

    text-transform:uppercase;

    margin-bottom:35px;

    font-weight:500;
}



/* ADDRESS */

.footer-address-list{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:24px;
}

.footer-address-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:17px;

    line-height:1.8;

    color:#ffffff;
}

.footer-address-list i{

    color:#ffffff;

    margin-top:7px;

    font-size:14px;

    flex-shrink:0;
}



/* LINKS */

.footer-links ul{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:24px;
}

.footer-links a{

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    transition:0.3s;
}

.footer-links a:hover{

    color:#efc16e;

    padding-left:6px;
}



/* SOCIAL */

.social-list{

    display:flex;

    gap:14px;

    margin-bottom:34px;
}

.social-list a{

    width:58px;

    height:58px;

    border-radius:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:rgba(255,255,255,0.12);

    border:1px solid rgba(255,255,255,0.08);

    transition:0.3s;
}

.social-list a:hover{

    background:#bf9952;

    transform:translateY(-3px);
}

.social-list i{

    color:#ffffff;

    font-size:20px;
}



/* MAP */

.footer-map{

    display:block;

    width:100%;

    border-radius:2px;

    overflow:hidden;
}

.footer-map img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;
}



/* COPYRIGHT */

.footer-bottom{

    position:relative;

    z-index:2;

    text-align:center;

    padding:28px 20px;

    border-top:1px solid rgba(255,255,255,0.08);

    color:rgba(255,255,255,0.75);

    font-size:14px;
}



/* MOBILE */

@media(max-width:1100px){

    .footer-container{

        grid-template-columns:1fr;

        gap:60px;
    }

}



@media(max-width:768px){

    .footer-container{

        padding:
            60px
            22px
            45px;
    }

    .footer-logo img{

        width:170px;
    }

    .footer-desc{

        font-size:15px;

        line-height:1.9;
    }

    .footer-hotline{

        font-size:16px;
    }

    .footer-heading{

        font-size:20px;
    }

    .footer-links a{

        font-size:15px;
    }

    .footer-address-list li{

        font-size:15px;
    }

    .social-list a{

        width:50px;

        height:50px;
    }

    .footer-map img{

        height:190px;
    }

}


/* ========================================
   HERO SLIDER FINAL
======================================== */

.hero-slider-wrap{

    width:100%;

    max-width:1280px;

    margin:18px auto 0;

    padding:0 20px;
}



/* SLIDER */

.hero-slider{
    width:100%;
    position:relative;
    border-radius:28px;
}



/* SLIDE */

.hero-slider .swiper-slide{

    border-radius:28px;

    overflow:hidden;
}



/* IMAGE */

.hero-slider .swiper-slide img{

    width:100%;

    height:620px;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;
}



/* HOVER */

.hero-slider .swiper-slide:hover img{

    transform:scale(1.03);
}



/* PAGINATION */

.hero-slider .swiper-pagination{

    bottom:18px !important;
}

.hero-slider .swiper-pagination-bullet{

    width:8px;
    height:8px;

    background:#fff;

    opacity:.55;
}

.hero-slider .swiper-pagination-bullet-active{

    width:24px;

    border-radius:999px;

    background:#c69d52;

    opacity:1;
}



/* ARROWS */

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next{

    width:52px;
    height:52px;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    box-shadow:0 4px 18px rgba(0,0,0,.12);
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after{

    font-size:18px;

    color:#8b4a1d;

    font-weight:700;
}



/* MOBILE */

@media(max-width:768px){

    .hero-slider-wrap{

        margin-top:12px;

        padding:0 12px;
    }

    .hero-slider{

        border-radius:22px;
    }

    .hero-slider .swiper-slide{

        border-radius:22px;
    }

    .hero-slider .swiper-slide img{

        height:340px;
    }

    .hero-slider .swiper-pagination{

        bottom:10px !important;
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next{

        width:42px;
        height:42px;
    }

    .hero-slider .swiper-button-prev{

        left:14px;
    }

    .hero-slider .swiper-button-next{

        right:14px;
    }

    .hero-slider .swiper-button-prev::after,
    .hero-slider .swiper-button-next::after{

        font-size:14px;
    }
}


/* =========================
   BACK TO TOP
========================= */

#backToTop{

    position:fixed;

    right:24px;
    bottom:24px;

    width:54px;
    height:54px;

    border:none;
    border-radius:50%;

    background:#b08c4e;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    z-index:9999;

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

    box-shadow:
    0 8px 24px rgba(0,0,0,0.15);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s;
}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

#backToTop:hover{

    background:#946f36;

    transform:translateY(-3px);
}

@media(max-width:768px){

    #backToTop{

        width:48px;
        height:48px;

        right:16px;
        bottom:16px;

        font-size:16px;
    }

}