@font-face {
    font-family: "Monsterrat-Regular";
    src: url("../fonts/Montserrat/Montserrat-Regular.ttf");
}

@font-face {
    font-family: "Monsterrat-Bold";
    src: url("../fonts/Montserrat/Montserrat-Bold.ttf");
}

@font-face {
    font-family: "Monsterrat-Medium";
    src: url("../fonts/Montserrat/Montserrat-Medium.ttf");
}

@font-face {
    font-family: "Monsterrat-SemiBold";
    src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf");
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Monsterrat-Regular';
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

body::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

.main{
    overflow: hidden;
    position: relative;
}

/* HEADER START CSS */
.header {
    position: fixed;
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.header .header-desk .logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .header-desk {
    box-shadow: 0px 0px 5px 0px gainsboro;
    padding: .5rem 0;
}

.header .header-desk .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem;
}

.header p {
    padding: 0;
    margin: 0;
}

.header ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.header ul li {
    list-style: none;
    margin-right: 1.5rem;
}

.header a {
    font-family: "Monsterrat-Medium";
    text-decoration: none;
    color: #3C3C3B;
    font-size: 1rem;
}

.header a.active {
    font-family: "Monsterrat-Bold";
    color: #F59508;
}

.header a:hover {
    color: #F59508;
}

.header .header-menu.header-menu-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.booking-now {
    margin-left: 2.5rem;
    transition: .3s ease-in-out;
}

.booking-now:hover {
    transition: .3s ease-in-out;
    transform: scale(1.05);
}

.booking-now a {
    box-shadow: 1px 2px 6px 0 #0000004d;
    display: block;
    width: max-content;
    color: white;
    background-color: #F59508;
    padding: 0.75rem 1.5rem;
    border-radius: 3rem;
    font-family: "Monsterrat-Medium";
    text-decoration: none;
    line-height: normal;
}

.booking-now a:hover {
    color: white;
}

.header .header-mob {
    display: none;
}

@media (max-width: 769px) {
    .header .header-desk {
        display: none;
    }

    .header .header-mob {
        display: block;
    }

    .header .header-mob .menu-set {
        padding: .35rem 0;
        box-shadow: 0px 0px 5px 0px gainsboro;
        position: relative;
        z-index: 2;
    }

    .header .header-mob .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .booking-now {
        margin-left: 0;
    }

    .header .booking-now a {
        padding: 0.45rem 1rem;
    }

    .header-mob .btn-mobile {
        position: relative;
        transition: 0.5s ease-in-out;
    }

    .header-mob .btn-mobile .item_menu {
        position: relative;
        background-color: black;
        width: 2.25rem;
        height: .35rem;
        margin: 5px 0px;
        border-radius: 15px;
        transition: 0.5s ease-in-out;
    }

    .header-mob .btn-mobile.active .item_menu.center {
        opacity: 0;
        transition: 0.5s ease-in-out;
    }

    .header-mob .btn-mobile.active .item_menu.top {
        transform: translate3d(0px, 10.5px, 0px) rotate(45deg);
        transition: 0.5s ease-in-out;
    }

    .header-mob .btn-mobile.active .item_menu.bottom {
        transform: translate3d(0px, -10.5px, 0px) rotate(-45deg);
        transition: 0.5s ease-in-out;
    }

    .header-mob ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 2rem;
    }

    .header-mob ul li {
        margin: .5rem 12px;
    }

    .header-mob .menu-move {
        position: fixed;
        top: 2rem;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0.7;
        height: 100vh;
        min-height: 100vh;
        transform: translateX(-100%);
        transition: 0.5s ease-in-out;
        background-color: white;
    }

    .header-mob .menu-move.active {
        transform: translateX(0);
        opacity: 1;
        transition: 0.5s ease-in-out;
    }

}

/* HEADER END CSS */


/* MAIN START CSS */

.main-page .banner-main {
    background-color: white;
}

.main-page .img-mob {
    display: none;
}

.flatpickr-day {
    font-size: 0.8rem !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #F59508 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #F59508 !important;
    border-color: #F59508 !important;
}

.flatpickr-day.today {
    border-color: #F59508 !important;
}

.flatpickr-current-month input.cur-year {
    font-size: .9rem !important;
    color: #F59508 !important;
}

span.flatpickr-weekday {
    color: #F59508 !important;
}

.main-page .banner-main {
    position: relative;
}

.main-page .banner-main .content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.main-page .banner-main .content .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.banner-main .content .content-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 12.5rem auto;
}

.banner-main .content .content-top h1 {
    text-transform: uppercase;
    font-family: "Monsterrat-Bold";
    color: #3FC2BF;
}

.select-datetime {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 4.5rem auto;
    background-color: white;
    border-radius: .2rem;
    box-shadow: 1px 2px 6px 0 #0000004d;
}

.select-datetime .item-select {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .5rem 2rem;
}

.select-datetime .item-select svg {
    width: 2.3rem;
    height: 2.3rem;
    margin-right: .5rem;
}

.select-datetime .item-select p {
    margin: 0;
}

.select-datetime .item-select p label {
    font-size: 13px;
    color: #525252;
}

.select-datetime .item-select input {
    background-color: transparent;
    outline: none;
    border: none;
    color: black;
    font-size: 14px;
}

.select-datetime .item-select select {
    outline: none;
    border: none;
    font-size: 14px;
    background-color: transparent;
}

.search {
    box-shadow: 1px 2px 6px 0 #0000004d;
    display: block;
    width: max-content;
    color: white;
    background-color: #F59508;
    font-family: "Monsterrat-Medium";
    text-decoration: none;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search a {
    margin: 0;
    font-family: "Monsterrat-Bold";
    color: white;
    font-size: 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TAB ONE START */
.tab-one {
    padding: 5rem 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(223, 248, 255, 1) 24%, rgba(223, 248, 255, 1) 84%, rgba(255, 255, 255, 1) 100%);
}

.tab-one .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 5rem;
}

.title h1 {
    text-transform: uppercase;
    font-family: "Monsterrat-Bold";
    color: #063375;
    margin: 0;
}

.title .line {
    width: 8rem;
    height: .2rem;
    background-color: #F59508;
}

.tab-one .desc p {
    font-family: "Monsterrat-Medium";
    margin: .3rem 0;
    padding: 0;
}

/* TAB TWO START */
.tab-two .container {
    margin: 3rem auto;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-two .content-left .desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 3rem;
    margin: 3rem 0;
}

.tab-two .content-left .desc .item-desc b {
    font-size: 2.5rem;
}

.tab-two .content-left .desc .item-desc {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.tab-two .content-right {
    position: relative;
    padding: 0 1.5rem;
}

.tab-two .content-right .box-background {
    background-color: #063375;
    position: absolute;
    top: 0;
    left: 0;
    width: 7rem;
    height: 7rem;
    z-index: -1;
    border-radius: .2rem;
}

/* TAB THREE START */
.tab-three {
    position: relative;
    margin: 7rem auto;
    padding: 5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-three .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

/* 
.tab-three .content-right{
    position: absolute;
    right: 0;
    top: 0;
}
 */

.tab-three .booking-now {
    margin: 2rem 0;
}

.tab-three .item-slider-home {
    background-color: white;
    border: 1px solid #0000004d;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: .2rem;
    box-shadow: 1px 2px 6px 0 #0000004d;
}

.tab-three .item-slider-home .thumbnail {
    border-radius: .2rem .2rem 0 0;
    overflow: hidden;
    width: 100%;
    height: 15rem;
    background-size: cover;
    background-position: center;
}

.tab-three .item-slider-home .desc {
    padding: .5rem;
}

.item-slider-home .desc .title {
    margin-bottom: .25rem;
}

.item-slider-home .desc .title a {
    font-family: "Monsterrat-Bold";
    text-decoration: none;
    color: black;
}

.item-slider-home .desc .address {
    color: #F59508;
    font-family: "Monsterrat-Medium";
    margin-bottom: .1rem;
    display: block;
  	display: -webkit-box;
  	font-size: .8rem;
  	-webkit-line-clamp: 1;  /* số dòng hiển thị */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.tab-three .swiper {
    padding: 0 .5rem !important;
    padding-bottom: 1.5rem !important;
}

.tab-three .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    margin-bottom: -.5rem;
}

.item-slider-home .desc .price {
    color: #2A90D9;
    font-family: "Monsterrat-Bold";
    margin-bottom: .5rem;
    font-size: .9rem;
}

.item-slider-home .desc .detail-room {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-slider-home .desc .detail-room svg {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-bottom: 3px;
}

.item-slider-home .desc .detail-room .item-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .75rem;
}

.tab-three .swiper-pagination-bullet-active {
    background-color: #F59508 !important;
}

/* TAB FOUR START */
.tab-four .title {
    align-items: center;
    margin-bottom: 2rem;
}

.tab-four .title p {
    font-family: "Monsterrat-Medium";
}

.tab-four .title img {
    margin: auto;
    display: block;
    text-align: center;
}

.tab-four .content .content-left h2 {
    font-family: "Monsterrat-SemiBold";
    color: #545454;
}

.tab-four .booking-now {
    margin-left: 0;
    margin-top: 3rem;
}

.tab-four .content-left {
    padding-right: 2rem;
}

.tab-four .content-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tab-four .content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tab-four .content-right .item-content svg {
    width: 35px !important;
    height: 35px !important;
}

.tab-four .content-right .item-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 23%;
    min-height: 7.5rem;
    margin: 1%;
    padding: 1rem;
    background-color: white;
    border: 1px solid #0000004d;
    border-radius: .5rem;
    box-shadow: 1px 2px 6px 0 #0000004d;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.tab-four .content-right .item-content:hover {
    transition: .3s ease-in-out;
    transform: scale(1.03);
}

.tab-four .content-right .item-content p {
    color: #737373;
    text-align: center;
    font-family: "Monsterrat-Medium";
    margin: 0;
}

/* TAB FIVE START */
.tab-five {
    margin-top: 7rem;
    padding-bottom: 2rem;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 55%, rgba(255, 243, 231, 1) 100%);
}

.tab-five .title {
    align-items: center;
    margin-bottom: 3rem;
}

.tab-five .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-five .content .item-content {
    width: 30%;
    text-align: center;
}

.tab-five .content .item-content .thumnail {
    border-radius: .6rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.tab-five .content .item-content p {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

/* BANNER FOOTER START */
.banner-footer {
    position: relative;
}

.banner-footer .content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.banner-footer .content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.banner-footer .content h2{
    font-family: "Monsterrat-Bold";
    color: white;
    text-align: center;
}

.banner-footer .content .booking-now{
    margin: 2rem 0 0 0;
}

.footer{
    padding-top: 5rem;
    background: #E0F9FF;
    background: linear-gradient(0deg, #E0F9FF 55%, rgba(255, 243, 231, 1) 100%);
}

.footer .item-footer .top{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 2rem;
}

.footer .item-footer .title{
    margin: 0;
}

.footer .item-footer .title h6{
    color: #3FC2BF;
    margin-left: .5rem;
    text-transform: uppercase;
    font-family: "Monsterrat-Bold";
}

.footer svg{
    width: 1rem !important;
    height: 1rem !important;
}

.footer p{
    margin: 0;
    margin-left: .2rem;
}

.footer .container{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer .item-content{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: .2rem 0;
}

.footer .item-content .left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer .item-content .left p{
    font-family: "Monsterrat-Medium";
}

.footer .item-footer .title h3{
    color: #063375;
    font-family: "Monsterrat-Bold";
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
}

.footer .content a{
    color: black;
    text-decoration: none;
    margin: .3rem 0;
    transition: 0.3s ease-in-out;
}

.footer .content a:hover{
    font-family: "Monsterrat-Medium";
    color: #063375;
    transition: 0.3s ease-in-out;
}

.footer .coppy-r{
    text-align: center;
    color: #545454;
    padding-bottom: 2rem;
    margin: 2rem auto 0rem auto;
    font-size: .8rem;
}

.footer .logo{
    margin-bottom: 10px;
}

.tab-five .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    margin-bottom: -.5rem;
}

.tab-five .swiper-pagination-bullet-active {
    background-color: #F59508 !important;
}

.tab-five .swiper {
    padding: 0 .5rem !important;
    padding-bottom: 1.5rem !important;
}

@media (max-width: 769px) {
    .main-page .img-mob {
        display: block;
    }

    .main-page .img-desk {
        display: none;
    }

    .banner-main .content .content-top{
        align-items: center;
        margin: 5.5rem auto;
    }

    .select-datetime .item-select svg{
        width: 30px;
        height: 30px;
    }

    .select-datetime .item-select input{
        font-size: .9rem;
        line-height: .9rem;
    }

    .banner-main .content .select-datetime .item-select{
        padding: .1rem 2rem;
    }

    .select-datetime .item-select select{
        font-size: .9rem;
    }

    .search button{
        font-size: .9rem;
    }

    .tab-two .content-left .logo{
        margin: 0 auto;
    }

    .tab-two .content-left .desc{
        padding: 0;
    }

    .tab-two .content-left p{
        text-align: center;
    }

    .tab-two .content-left .desc .item-desc b{
        font-size: 2rem;
    }

    .tab-four .title h1{
        text-align: center;
    }

    .tab-four .content-right{
        margin-top: 2rem;
        justify-content: space-between;
    }

    .tab-four .content-right .item-content{
        width: 32%;
        margin: 1% 0;
    }

    .tab-four .content-left{
        padding: 0;
    }

    .tab-five .title{
        margin-top: 2rem;
    }

    .tab-five .title h1{
        text-align: center;
    }

    .tab-five .content{
        flex-wrap: wrap;
    }

    .tab-five .content .item-content{
        width: 100%;
    }

    .tab-three{
        margin: 5rem auto;
    }

    .title{
        margin-bottom: 3rem;
    }

    .tab-four .content-right .item-content p{
        font-size: .8rem;
    }
}

/* MAIN END CSS */

/*  */
/*  */
/*  */
/*  */

/* ROOM PAGE START */

.room-page .main-page{
    margin: 6rem auto 3rem auto;
}

.room-page .main-page .content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.room-page .main-page .content .item-content{
    width: 31.5%;
    margin: .8%;
    background-color: white;
    box-shadow: 0px 0px 6px 0 #0000004d;
    overflow: hidden;
    border-radius: .15rem;
}

.room-page .content .item-content .thumnail-room{
    margin-bottom: 1.5rem;
    height: 15rem;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.room-page .content .item-content .desc-room{
    padding: 0 1rem 1rem 1rem;
}

.room-page .item-content{
    margin: 1.3% 0;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.room-page .item-content:hover{
    transform: scale(1.015);
    transition: 0.3s ease-in-out;
}

.room-page .item-content .desc-room .name a{
    font-family: "Monsterrat-Bold";
    text-decoration: none;
    color: #063375;
    font-size: 1.3rem;
}

.room-page .item-content .desc-room .price {
    color: #2A90D9;
    margin-bottom: 10px;
}

.room-page .item-content .desc-room .address{
    color: #F59508;
    font-family: "Monsterrat-Medium";
    margin: .2rem 0;
    font-size: .9rem;
    display: block;
  	display: -webkit-box;
  	line-height: 1.3;
  	-webkit-line-clamp: 1;  /* số dòng hiển thị */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.room-page .item-content .desc-room .detail-room {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.room-page .item-content .desc-room .detail-room svg {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    margin-bottom: 3px;
}

.room-page .item-content .desc-room .detail-room .item-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .9rem;
    margin: .2rem 0 .1rem 0; 
}

.room-page .item-content .desc-room .more-room {
    display: block;
  	display: -webkit-box;
  	line-height: 1.3;
  	-webkit-line-clamp: 3;  /* số dòng hiển thị */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
    margin: 0 0 10px 0;
    font-size: .9rem;
}

.room-page .item-content .desc-room .more-room p{
    margin: 0;
}

.room-page .item-content .desc-room .link-more a {
    box-shadow: 1px 2px 6px 0 #0000004d;
    display: block;
    width: max-content;
    color: white;
    background-color: #F59508;
    padding: 0.5rem 1rem;
    border-radius: 3rem;
    font-family: "Monsterrat-Medium";
    text-decoration: none;
    line-height: normal;
    margin-top: 1rem;
    font-size: .9rem;
}

.room-page .item-content .desc-room .link-more a {
    box-shadow: 1px 2px 6px 0 #0000004d;
    display: block;
    width: max-content;
    color: white;
    background-color: #F59508;
    padding: 0.5rem 1rem;
    border-radius: 3rem;
    font-family: "Monsterrat-Medium";
    text-decoration: none;
    line-height: normal;
    margin-top: 1rem;
    font-size: .9rem;
}

.nav-page{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 1rem auto;
}

.nav-page a{
    color: white;
    text-decoration: none;
    border: 1px solid #F59508;
    color: #F59508;
    width: 25px;
    height: 30px;
    border-radius: .2rem;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .1rem;
    line-height: normal;
    transition: 0.3s ease-in-out;
}

.nav-page a:hover{
    border: 1px solid #F59508;
    color: white;
    background-color: #F59508;
    transition: 0.3s ease-in-out;
}

.room-page .read-more a{
    display: flex;
    margin-top:25px;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    font-size: 80%;
}

.room-page .read-more a:hover{
    color: #F59508;
}

.room-page .read-more svg{
    width: 20px;
    height: 15px;
    margin-left: 10px;
}


.nav-page a.active{
    border: 1px solid #F59508;
    color: white;
    background-color: #F59508;
}

@media (max-width: 1200px) {
    .room-page .main-page .content .item-content{
        width: 48%;
        margin: 1% auto;
    }
}

@media (max-width: 767px) {
    .room-page .main-page .content .item-content{
        width: 100%;
        margin: 2% auto;
    }
}

/* ROOM PAGE END */

/*  */
/*  */
/*  */
/*  */

/* NEWS PAGE START */

/* BLOG PAGE START */

.blog-page{
    background-color: white;
}

.blog-page .header{
    position: unset;
}

.blog-page .banner {
    min-height: 200px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0;
    background-color: #e7edfc;
}

.blog-page .banner h1{
    color: #1b004f;
    font-weight: 700;
    font-family: "Jost Bold";
}

.blog-page .main{
    background-color: #f4f9ff;
}

.blog-page .content-blog{
    padding: 80px 0;
    margin: 3rem auto;
}

.blog-page .list-blog{
    /* display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(31.5%, 31.5%)); /* Chia cột theo tỷ lệ 32% */
    gap: 0 2.75%;
}

.blog-page .list-blog .item-blog{
    height: min-content;
    background-color: white;
    margin-bottom: 35px;
    height: 100%;
    box-shadow: 0px 0px 5px 0px gainsboro;
}

.blog-page .content-item .nav-link{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px 0;
}

.blog-page .content-item .nav-link a{
    text-decoration: none;
    color: #0064ff;
    font-size: 70%;
    font-weight: 900;
    font-family: "Jost Bold";
}

.blog-page .title{
    margin-bottom: 1rem;
}

.blog-page .content-item .nav-link .line{
    background-color: gray;
    width: 1px;
    margin: 0px 7px;
}

.blog-page .content-item {
    padding: 20px 25px;
}

.blog-page .content-item h2.title a{
    font-family: "Monsterrat-Bold";
    color: #063375;
    text-decoration: none;
    font-size: 1.5rem;
    display: block;
  	display: -webkit-box;
  	-webkit-line-clamp: 3;  /* số dòng hiển thị */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.blog-page .content-item .date{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 15px 0;
}

.blog-page .content-item .date p{
    margin: 0;
    font-size: 80%;
}

.blog-page .content-item .date .dot{
    width: 5px;
    height: 5px;
    border-radius: 15px;
    margin: 0px 10px;
    background-color: gray;
}

.blog-page .content-item .date a{
    text-decoration: none;
    color: #3C3C3B;
    font-weight: 700;
}

.blog-page .content-item .desc{
    display: block;
  	display: -webkit-box;
  	line-height: 1.3;
  	-webkit-line-clamp: 5;  /* số dòng hiển thị */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.blog-page .content-item .desc p{
    margin-bottom: 0 ;
}

.blog-page .content-item .read-more a{
    display: flex;
    margin-top:25px;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    font-size: 80%;
}

.blog-page .content-item .read-more a:hover{
    color: #F59508;
}

.blog-page .content-item .read-more svg{
    width: 20px;
    height: 15px;
    margin-left: 10px;
}

@media (max-width: 1025px) {
        
    .blog-page .list-blog {
        grid-template-columns: repeat(auto-fill, minmax(48.5%, 48.5%)); /* Chia cột theo tỷ lệ 32% */
        gap: 0 1.5%;
    }

    .blog-page .list-blog .item-blog p{
        text-align: left;
    }
    
}

@media (max-width: 571px) {
        
    .blog-page .list-blog {
        grid-template-columns: repeat(auto-fill, minmax(90%, 90%)); /* Chia cột theo tỷ lệ 32% */
        justify-content: center;
    }

}

/*  */
/*  */
/*  */
/*  */

/* CONTACT PAGE START */
.contact-page .banner{
    position: relative;
}

.contact-page .banner .content-banner{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contact-page .banner .content-banner h2{
    text-transform: uppercase;
    color: #0FB3AF;
    font-family: "Monsterrat-Bold";
    margin: auto;
    text-align: center;
}

.contact-page .content-banner .form-email{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 45px auto;
    border: 1px solid #F59508;
    background-color: white;
    border-radius: .3rem;
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px gainsboro;
}

.contact-page .content-banner .form-email input{
    border: none;
    width: 100%;
    outline: none;
    padding: 10px 10px;
    font-size: .9rem;
    background-color: white;
}

.contact-page .content-banner .form-email button{
    background-color: #F59508;
    color: white;
    border: none;
    outline: none;
    padding: 0 25px;
    font-family: "Monsterrat-Medium";
    font-size: .9rem;
}

.contact-page .main-form{
    margin: 5rem auto;
}

.contact-page .main-form .item-content{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: .2rem 0;
}

.contact-page .main-form .item-content .left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.contact-page .main-form .item-content .left p{
    font-family: "Monsterrat-Medium";
}

.contact-page .main-form p{
    margin: 0;
}

.contact-page .main-form .item-content svg{
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 3px;
}

.contact-page .content-right input{
    background-color: white;
    border: 1px solid gainsboro;
    outline: none;
    width: 100%;
    border-radius: .2rem;
    font-size: .9rem;
    padding: 3px 10px;
}

.contact-page .content-right h4{
    font-family: "Monsterrat-Bold";
    color: #063375;
    text-transform: uppercase;
}

.contact-page .content-right .item-form{
    margin-bottom: 7px;
}

.contact-page .content-main{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-page .content-main .content-left .detail-content{
    padding-right: 15px;
}

.contact-page .content-right .form-data{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-page .content-right label{
    font-size: 1rem;
}

.contact-page .content-right textarea{
    background-color: white;
    border: 1px solid gainsboro;
    outline: none;
    width: 100%;
    border-radius: .2rem;
    font-size: .9rem;
    padding: 3px 10px;
}

.contact-page .content-right button{
    background-color: #F59508;
    color: white;
    border: none;
    outline: none;
    padding: 7px 25px;
    border-radius: .2rem;
    font-family: "Monsterrat-Medium";
    font-size: .9rem;
}

.contact-page .content-left p{
    margin-bottom: 5px;
    font-size: .9rem;
}

.contact-page .content-left .logo{
    margin-bottom: 3rem;
}


@media (max-width: 767px) {
    .contact-page .content-left{
        margin-bottom: 45px;
    }

    .contact-page .content-left .logo{
        margin: auto;
        margin-bottom: 10px;
    }

    .contact-page .main-form .item-content{
        justify-content: center;
    }

}

/*  */
/*  */
/*  */
/*  */
/*  */

/* DETAIL ROOM PAGE */

.detail-page .main-page{
    margin: 5rem auto;
}

.detail-page .images .content-image{
    min-height: 450px;
    background-position: center;
    background-size: cover;
}

.detail-page .images {
    display: flex;
    margin-top: 7rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    min-height: 450px;
}

.detail-page .images .content-left{
    padding: 1px;
    height: 100%;
    border: 1px solid white;
}

.detail-page .images .content-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detail-page .images .content-right .item-images-right{
    border: 1px solid white;
    width: 50%;
    height: 225px;
    background-position: center;
    background-size: cover;
}

.detail-page .detail-room{
    margin: 3rem auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.detail-page .detail-room .title-room {
    font-family: "Monsterrat-Bold";
    color: #063375;
    font-size: 2rem;
    text-decoration: none;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-page .detail-room .title-desc{
    text-transform: uppercase;
    color: #3C3C3B;
    font-family: "Monsterrat-SemiBold";
    margin: 15px 0 10px 0;
    padding-bottom: 7px;
}

.detail-page .booking-form{
    padding-left: 1.5rem;
}

.detail-page .booking-form label{
    font-size: .9rem;
}

.detail-page .booking-form input{
    background-color: white;
    border: none;
    border-bottom: 1px solid #3C3C3B80;
    outline: none;
    width: 100%;
    font-size: .9rem;
    padding: 3px 5px;
    outline: none !important;
    margin: 0 0 10px 0;
}

.detail-page .booking-form select{
    background-color: white;
    border: none;
    border-bottom: 1px solid #3C3C3B80;
    outline: none;
    width: 100%;
    font-size: .9rem;
    padding: 3px 5px;
    outline: none !important;
    margin: 0 0 10px 0;
}

.detail-page .booking-form button {
    background-color: #F59508;
    color: white;
    border: none;
    outline: none;
    padding: 7px 25px;
    border-radius: .2rem;
    font-family: "Monsterrat-Medium";
    font-size: .9rem;
    width: 100%;
}

.detail-page .list-desc .item-desc{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.detail-page .list-desc .item-desc .left{
    width: 20%;
    color: #3C3C3B80;
}

.detail-page .list-desc .item-desc p{
    margin: 0;
    font-size: .9rem;
    margin-bottom: 10px;
}

.bold{
    font-weight: 700;
}

@media (max-width: 1200px) {
    .detail-page .detail-room .item-detail{
        width: 33%;
    }
}

@media (max-width: 769px) {
    .detail-page .detail-room .item-detail{
        width: 50%;
    }
        
    .detail-page .booking-form{
        padding-left: 0;
        margin-top: 2rem;
    }

}


/*  */
/*  */
/*  */
/*  */
/* DETAIL NEW PAGE */

.detail-new-page{
    margin: 5rem auto;
}

.detail-new-page .desc-blog{
    margin: 0 auto;
    padding-bottom: 15px;
}

.detail-new-page .docs-blog .nav-link{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px 0;
}

.detail-new-page .docs-blog .nav-link a{
    text-decoration: none;
    color: #0064ff;
    font-size: 70%;
    font-weight: 900;
}

.detail-new-page .docs-blog .nav-link .line{
    background-color: gray;
    width: 1px;
    margin: 0px 7px;
}

.detail-new-page .docs-blog h2.title {
    color: #1b004f;
    text-decoration: none;
    font-family: "Monsterrat-Bold";
    font-size: 28px;
}

.detail-new-page .docs-blog .date{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 20px 0;
}

.detail-new-page .docs-blog .date p{
    margin: 0;
    font-size: 80%;
}

.detail-new-page .docs-blog .date .dot{
    width: 5px;
    height: 5px;
    border-radius: 15px;
    margin: 0px 10px;
    background-color: gray;
}

.detail-new-page .docs-blog .date a{
    text-decoration: none;
    color: black;
}

.detail-new-page .content-docs-blog p{
    margin-bottom: 7px;
    text-align: left;
}

.detail-new-page .content-docs-blog img{
    margin: 25px auto;
    text-align: center;
    display: block;
    max-width: 100%;
}

.blog-page .list-blog .item-blog .thumnail{
    margin-bottom: 1.5rem;
    height: 15rem;
    width: 100%;
    background-size: cover;
    background-position: center;
}