/*
Theme Name: Garden Plaza Saigon Hotel
Description: Garden Plaza Saigon Hotel Official Website
Text Domain: garden
Author: UX Themes
Template: flatsome
Version: 1.0
*/


:root{
    --primary-color: #011E41;
    --second-color: #B48E5E;
    /* --danger-color: #B50A0C; */

	--headline: #353535;
    --bg-gray: #F4eee7;
	--bg-white: #FFFFFF;
}


/*********** BASE CSS   ***********/
/*********** BASE CSS   ***********/
p{ font-size:16px}
b, strong { font-weight: 500; }
a.button{line-height: 2.2 !important;} /* Fix button line height */
a.button.has-icon, a.read-more { display: inline-flex ; align-items: center; gap: 5px; }
a.read-more svg path{ fill: var(--second-color);}
a.read-more:hover svg path{ fill: var(--primary-color);}
li{ margin-bottom:0}
svg.flickity-button-icon{background-color: rgba(180, 142, 94, 0.25);}
.bg-gray{ background-color:var(--bg-gray) !important}
.bg-white{ background-color:var(--bg-white) !important}
.d-flex{ display:flex;} .flex-inline{ display:inline-flex;}
.justify-content-start{ justify-content:flex-start !important}
.justify-space-between{ justify-content:space-between}
.align-items-center{ align-items:center !important}
.align-baseline{ align-items:baseline;}
.flex-column{ flex-direction:column !important}
.bg-white{ background-color:var(--bs-white-rgb) !important}
.vr{ display:inline-block;  align-self:stretch;  width:1px;  min-height:1em;  background-color:currentcolor;  opacity:.25}
.d-grid{ display:grid;}
.grid-cols-2{ grid-template-columns:repeat(2,1fr)} .grid-rows-2{ grid-template-rows:repeat(2,1fr)} .grid-gap-10{ gap:10px}
.mt-0{ margin-top:0 !important} .mt-1{ margin-top:0.25em !important} .mt-2{ margin-top:0.5em !important} .mt-4{ margin-top:1em !important}
.mb-0{ margin-bottom:0 !important} .mb-1{ margin-bottom:0.25em !important} .mb-2{ margin-bottom:0.5em !important} .mb-4{ margin-bottom:1em !important}
.ms-0{ margin-left:0} .ms-4{ margin-left:1em !important} .me-0{ margin-right:0} .me-4{ margin-right:1em !important}
.ps-0{ padding-left:0 !important} .ps-3{ padding-left:0.75em} .pe-3{ padding-right:0.75em} .pe-0{ padding-right:0 !important} .pb-0{ padding-bottom:0 !important} .pb-1{ padding-bottom:0.25em !important} .pb-2{ padding-bottom:0.5em !important} .pb-4{ padding-bottom:1em !important}
.fsm-2{ font-size:.9rem !important} .fsm-6{ font-size:.7rem !important}
.fw-semibold{ font-weight:500 !important} .fw-bold{ font-weight:700 !important} .fw-light{ font-weight:300 !important}
.letter-spacing-1{ letter-spacing:.125rem !important}
.text-center{ text-align:center} .text-start{ text-align:left} .text-end{ text-align:right}
.text-white{color: white !important}
.page-title .entry-title{ font-weight:300}
.img-round .img-inner, .img-round img{ border-radius:8px}
.button.is-rounded{ border-radius:99px}
.button.button-hover:hover{ background-color: var(--second-color) !important; color: white !important; }
.text-justify, .text-justify p{text-align:justify}
li strong, p strong{font-weight: bold;}

.head-title{
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}
    .sub-title, .banner .sub-title{font-family:'Nunito Sans',sans-serif;font-size:14px;color:var(--second-color);letter-spacing:3px;text-transform:uppercase;font-weight:600}
    
.ellipsis-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
        line-clamp: 2; 
    -webkit-box-orient: vertical;
}


#masthead{background-color: rgba(255, 255, 255, 0.95);}
    #masthead .header-nav .lang-switch { display: flex ; gap: 5px; }
    #masthead .header-nav .lang-switch > * { opacity: 0.5; }
    #masthead .header-nav .lang-switch > *:hover, #masthead .header-nav .lang-switch > .active { opacity: 1; }

    #masthead .hide-for-medium.flex-grow{padding-right: 50px;}
    #masthead .hide-for-medium.flex-grow ul.header-nav.nav-left{justify-content: center !important;gap: 10px;}
    #masthead .hide-for-medium.flex-grow .header-main .nav > li > a{padding-bottom: 5px;}

    /*
    * Define Icons
    */
    [class*="icon_"], [class*="icons-"] {
        width: 24px;
        height: 24px;
        content: '';
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .icon_small{width: 16px !important;height: 16px !important;}
    .icon_bigger{width: 48px !important;height: 48px !important;}
        
        .icon_book_now{background-image: url(assets/icons/icon_book_now.svg);}
        .icon_room-size{background-image: url(assets/icons/icon-room-size.svg);}

    [class^="icons-footer_"]{width:16px;height:16px;margin-right:8px; }
        .icons-footer_email{background-image:url(assets/icons/icon-footer-email.svg)}
        .icons-footer_address{background-image:url(assets/icons/icon-footer-location.svg)}
        .icons-footer_hotline{background-image:url(assets/icons/icon-footer-phone.svg)}

.row.row-booking-form>.col{padding-bottom:0}
.booking-form{background-color:#ffff;padding:10px 15px;border: 1px var(--second-color) solid;}
    .booking-form form{margin:0}
    .booking-form .col{padding-bottom:0}
    /* .booking-form button{border: 1px var(--primary-color) solid;} */
    .booking-form input,
    .booking-form button,
    .booking-form select { margin-bottom: 0; }

    .booking-form input,
    .booking-form select {
        height: 2.25em;
        border: 0;
        font-size: 14px;
        /* background-color: var(--input-color); */
        border: 1px #ccc solid;
    }
    .booking-form label{font-size:13px;margin-bottom:0;color:var(--primary-color)}
    .booking-form button{color:#fff}

/*** === HOME CSS === ***/
    /**
    * Home Slider CSS
    */
    .banner .slider-title{font-size: 60px; font-weight: 500;text-shadow: 3px 3px 7px BLACK;}

    /*
    * Home Accommodation CSS
    */
    .rooms-slider{
        margin-bottom: 0;
        height: 600px;
    }
        .rooms-slider .room-item{
            position: relative;
        }
            .room-item .room-content{
                background-color: var(--bg-white);
                box-shadow: 0 2px 16px rgba(0,0,0,0.08);
                padding: 20px 15px;
            }
                .room-content .room-top-content{
                    display: flex ;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: center;
                }
                .room-content .room-title{
                    flex-basis: 70%;
                    flex-grow: 1;
                    margin: 0;
                    font-size: 20px;
                }
                .room-content .room-title a{
                    color: var(--primary-color);
                    text-decoration: none;
                }
                .room-content .room-title a:hover{
                    color: var(--second-color);
                }
    /**
    * Home Offers CSS
    */
    /* .home-blog-offers .box .box-text{} */
    .home-blog-offers .box-text .cat-label{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .home-blog-offers .box-text .post-title{
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .home-blog-offers .box-text .is-divider{display: none;}

    /*
    * Home Dining CSS
    */
    .section-dining{
        background: url(images/section-dining-bg.jpg) no-repeat left center;
        background-size: cover;
        display: flex;
        flex-direction: row;
    }
    .section-dining .vertical-box-dining {
        flex-basis: calc((100% - 1340px) / 2);
    }   
    .dining-item, .dining-exp-item, .meeting-event-item { overflow: hidden; }
    
        .dining-slider, .dining-exp-slider, .meeting-event-slider{height: 700px;}
        .dining-item .dining-content-box {padding-right: 4em;}
        .dining-item .dining-title {font-size: 26px; font-weight: 600;}

        .dining-item ..dining-image { height: 700px; aspect-ratio: 1200 / 800; }

        #dining-slider .flickity-prev-next-button { bottom: 0; opacity: 1; display: block; top: inherit; bottom: 15%; }
        #dining-slider .flickity-prev-next-button.previous { right: auto; left: 1em; }
        #dining-slider .flickity-prev-next-button.next { left: 65px; }
        
        .flickity-prev-next-button svg{border-radius: 0 !important; border: 0 !important; opacity: 0.8;background-color: #F4EEE7;}
        .flickity-prev-next-button svg, 
        .flickity-prev-next-button .arrow{fill: var(--second-color);transition: none;}
        .flickity-prev-next-button:hover svg{background-color: var(--second-color);opacity: 1;}
        .flickity-prev-next-button:hover .arrow{fill: white;}
    
    /*
    * Home Experiences CSS
    */
    .section-experiences{ display: flex; }
        .section-experiences .vertical-box-experiences {
            flex-basis: calc((100% - 1340px) / 2);
        }
        
        .dining-exp-item .dining-exp-content-box{padding-left: 2.6em;}
        .dining-exp-item .dining-exp-title{font-size: 26px; font-weight: 600;}

        #experiences-slider .flickity-prev-next-button { opacity: 1; display: block; top: inherit; bottom: 15%; }
        #experiences-slider .flickity-prev-next-button.previous { left: auto; right: calc(33% - 2.6rem - 15px); }
        #experiences-slider .flickity-prev-next-button.next { right: calc(33% - 2.6rem - 15px - 55px); }

    /*
    * Home Meeting Event CSS
    */
        .meeting-event-item .row .col:first-child { z-index: 99; }
        .meeting-event-item .meeting-event-content-box{
            padding: 40px;
            background-color: var(--second-color);
        }
        .meeting-event-item .event-image {
            transform: scale(1.15) translateX(-38px);
            display: block;
            width: 100%;
        }

        .meeting-event-item .meeting-event-title {font-size: 26px; font-weight: 600;}

        #meeting-event-slider .flickity-prev-next-button{opacity: 1; bottom: 15%;display: block; top: inherit;}
        #meeting-event-slider .flickity-prev-next-button.previous { right: auto; left: 1em; }
        #meeting-event-slider .flickity-prev-next-button.next { left: 4em; }


/*** === PAGE CSS === ***/
    h3.inpage-title, 
    .dining-content .dining-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 20px;
    }
    /*
    * Page Dining Page
    */
    .dinings-item{
        margin-top: 70px;
        margin-bottom: 70px;
        background-color: var(--bg-gray);
    }
    .dinings-item:nth-child(odd) .row { flex-flow: row-reverse; }
    .dinings-item .dining-content{ padding: 60px; }

    /*
    * Experiences Page
    */ 
    .experience-items{
        margin-top: 30px;
        margin-bottom: 30px;
    }
        .stack-garden-spa {
            padding-right: 50px;
            padding-left: calc((100vw - 1310px) / 2);
            height: 100%;
        }
        .row-small.pb-0>.col {padding-bottom: 0 !important;}
        .row-small.pb-0>.col:first-child {padding-left: 0;}
        .row-small.pb-0>.col:last-child { padding-right: 0; }

    /*
    * Our Policy Page
    */
    .policy-content{
        display: block;
        margin: 0 auto;
        background-color: var(--bg-white);
    }
        .policy-content .policy-item{
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .policy-content .policy-item strong, .policy-content .policy-item div{
            background-color: #F4F4F4;
        }
        .policy-content .policy-item strong{
            flex-basis: 25%;
            flex-shrink: 0;
            padding: 10px 10px 5px 30px;
            font-size: 18px;
            font-weight: 500;
        }
        .policy-content .policy-item div{
            flex-grow: 1;
            font-size: 16px;
            padding: 10px 10px 5px 30px;
            line-height: 1.5;
            margin-bottom: 0;
        }
        .policy-content .policy-item div ul{margin-bottom: 0;}


    /**
    * Accommodation Page
    */
    .rooms-suites-list{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .rooms-suites-list .room-suite-content{
        display: flex;
        flex-direction: column;
        background: rgba(217, 217, 217, 0.3);
        padding: 30px;
    }
        .room-suite-title{color: var(--primary-color); font-size: 26px;}
        .room-suite-size{
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .room-suite-description{margin: 20px 0 0;}
        .room-suite-content p{margin-bottom: 5px;}
        .room-suite-content .room-pricing { font-size: 28px; font-weight: 700; }
        .room-suite-content .room-pricing span { font-size: 18px; font-weight: 300 !important; }
        .room-suite-content .room-saveup span { font-size: 22px; color: var(--second-color); }

    .ux-menu.menu-rooms-page {
        flex-direction: row;
        justify-content: center;
        background-color: var(--bg-gray);
    }
        .ux-menu.menu-rooms-page .ux-menu-link a{
            padding: 7px 30px;
            line-height: 2;
            font-weight: 500;
        }
        .ux-menu.menu-rooms-page .ux-menu-link.active,
        .ux-menu.menu-rooms-page .ux-menu-link:hover {background-color: var(--second-color);}
        .ux-menu.menu-rooms-page .ux-menu-link.active a,
        .ux-menu.menu-rooms-page .ux-menu-link:hover a{color: white !important;}

/*** === SINGLE CSS === ***/
    /*
    * Single Accommodation CSS
    */    


/*** === FOOTER CSS === ***/
footer .section-footer{
    background-image: url(images/footer-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
footer .absolute-footer{display: none;}

    .menu-menu-footer-container ul#menu-menu-footer,
    .menu-copyright-menu-container ul#menu-copyright-menu { display: flex ; gap: 20px; }
    ul.sidebar-wrapper .widget.widget_nav_menu{margin-bottom: 0;}
    .menu-menu-footer-container ul#menu-menu-footer li+li,
    .menu-copyright-menu-container ul#menu-copyright-menu li+li{border: none !important;}
        

    footer .footer-title span{
        font-size: 16px;
        color: #777;
        text-transform: none;
    }

    footer ul.links-address{font-size:15px;margin-bottom:0}
    footer ul.links-address li{display:flex;align-items:baseline;margin-bottom:7px;list-style:none;margin-left:0}
    footer ul.links-address li:first-child{align-items:flex-start}
    footer ul.links-address li:first-child>i{margin-top:3px}

    footer ul.links-address li i { transform: translateY(3px); }

    /** Footer Subcribe Form **/
    input.wpcf7-form-control.border-second{border: 1px solid var(--second-color) !important; }
    .button.secondary-force{background-color: var(--second-color) !important; border: none !important;}

    footer .footer-copyright p, .menu-copyright-menu-container ul#menu-copyright-menu li{font-size: 14px;}
    footer .footer-copyright p, footer .footer-copyright .widget_text{margin-bottom: 0;}
    footer .footer-copyright .col{padding-bottom: 0 !important;}

/*** Special Popup ***/
.popup-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-content {
    max-width: 850px;
    max-height: 544px;
    background: white;
    padding: 0;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}
    .popup-content .popup-text{ padding: 30px 35px; }
        .popup-text .popup-title{font-size: 26px;}
        .popup-text p{text-align: justify;}
        .popup-text p strong{font-weight: bold;}
        .popup-text p.popup-subtitle{text-align: center;}
        .popup-text p.eng-sub{font-style: italic;}

.popup-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 7px 0;
    background-color: var(--second-color);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
}
    .popup-close:hover { background-color: var(--primary-color); }


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .head-title{font-size: 28px;}
    .dining-item .dining-title{font-size: 24px;}
    .section-dining .vertical-box-dining{display:none;}
    
    .dining-item, .dining-exp-item, .meeting-event-item{padding-left: 0;padding-right: 0;}
        .dining-item.col > .row {flex-direction: column-reverse;}
        
        .dining-content-box .gap-element, .dining-exp-content-box .gap-element {display: none !important;}
        .dining-item .dining-content-box, .dining-exp-item .dining-exp-content-box{padding: 15px;}
        
    #dining-slider .flickity-prev-next-button{bottom: 5%;}
    #dining-slider .flickity-prev-next-button.previous{left: 1em;}
    
    .meeting-event-item .meeting-event-content-box{padding: 20px 15px;}
    
    .menu-menu-footer-container ul#menu-menu-footer, .menu-copyright-menu-container ul#menu-copyright-menu{
        flex-wrap: wrap;gap: inherit; column-gap: 15px; 
    }
    .col.widget.widget_nav_menu, .col.widget.widget_text {padding: 0;}
    
    .popup-content .popup-text{padding: 30px 15px;}
    
}

@media only screen and (max-width: 1440px){
    .dining-slider, .dining-exp-slider, .meeting-event-slider{height: 570px;}
    .rooms-slider{height: 410px;}
}