/* nhan's css */

/* .hotel_info.hide,
.inform--header.hide
{
    display: none;
} */

body {
    position: relative;
}

@font-face {
    font-family: 'Graphik';
    src: url('$base/public/fonts/sabon_lT_std_roman/GraphikLight.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
    font-family: 'Karla';
    src: url('$base/public/fonts/karla/Karla-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */


/* body {
    font-family: 'Karla', sans-serif !important;
} */

@font-face {
    font-family: "Tex Regular";
    src: url('https://ibookingu5.myghs.com/views/nhan/fonts/webfonts/tex-gyre/TeXGyreAdventor-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html body[data-chain-alias='151'] {
    font-family: 'Tex Regular', sans-serif !important;
}

footer {
    padding: 16px 32px;
    background-color: black;
}


#destination i,
#datepicker i,
#rooms i,
#coupon i {
    color: var(--main-color) !important;
}

a {
    cursor: pointer;
    text-decoration: none !important;
}

:focus-visible {
    outline: none;
}

.static {
    overflow: hidden;
}

/* .hide {
    display: none;
} */

/* h5 {
    color: white !important;
} */

.footer__info--phone a,
.footer__info--mail a {
    text-decoration: none;
}

.footer__banner {
    display: block;
    margin: auto !important;
}

.footer__banner img {
    width: 100%;
}

/* hotel item */

.hotel_item--title {
    font-weight: 700;
    color: var(--title-color);
}

.hotel_item--description {
    border-bottom: solid 1px var(--sub-color);
}

.hotel_item--description-content {
    height: 50px;
    overflow: hidden;
}

.hotel_item--contact {
    margin: 10px 0px;
}

.hotel_item--show-content {
    font-weight: 700;
    color: var(--sub-color);
    margin-bottom: 5px;
    font-size: 14px;
}


.hotel_item--price {
    margin-top: 45px;
    line-height: 25px;
}

.hotel_item--price-value {
    font-size: 35px;
    text-align: center;
    line-height: 10px;
}

.hotel_item--discount-price-value {
    text-align: center;
    font-size: 20px;
    color: gray;
    font-weight: 500;
    text-decoration: line-through;
}

.hotel_item--facility {
    margin-top: 15px;
}

.hotel_info--service-item {

    text-align: center;
    margin: 8px 0px;

}

.hotel_item--more-info {
    text-decoration: none;
    display: block;
    text-align: center;
    border: 1px solid var(--main-color);
    color: white;
    padding: 10px 0px;
    font-weight: 700;
    background: var(--button-color);
    display: block;
    margin: auto;
    width: 75%;
}

.hotel_item--ratings {
    display: flex;
    gap: 10px;
    margin: 15px 0px;
}

.room_item {
    background: var(--bg-item);
    /* padding: 20px 30px; */
    /* box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2); */
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 20px;
}


.room_item--show-rates {

    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-top: auto;
    background: var(--main-color);
    color: var(--bg-color);
    border: solid 1px var(--main-color);
    font-weight: 600;
}


#room-tab {
    background: var(--bg-color);
    border: solid 1px transparent;
}

#rate_list {
    padding-left: 0;
}

.rate-active {
    background: #ccc !important;
    color: white !important;
    border: solid 1px #ccc !important;
}

.rate_item {
    border: solid 1px;
    padding: 30px 25px;
    /* background-color: var(--main-color); */
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 20px;
}

.rate_item--package-offer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}




.rate_item--regular-rate .rate_item--book-rate {
    background-color: var(--main-color);
    color: white;
    border: solid 1px var(--main-color);
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    min-width: 120px;
}


.rate_item--member-rate,
.rate_item--regular-rate {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rate_item--member-rate .rate_item--book-rate {
    background-color: black;
    color: white;
    border: solid 1px var(--main-color);
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    /* margin-left: auto; */
    border-radius: 20px;
}


/* HOtel detail page */

.room_action {
    background-color: var(--bg-color);
    margin: 15px 0px;
}

.room_list--total {
    padding: 15px;
}


.rate_list {
    margin-top: 20px;
}

/* .room_list {
    background: var(--bg-color);
    padding: 20px 30px;
} */

.hotel_info {
    background-color: var(--bg-item);
    /*padding: 20px 30px;*/
    /*margin-bottom: 20px;*/
    /* margin-top: 150px; */
    /* box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
    border: solid 1px rgba(0, 0, 0, .2); */
}

.hotel_info--warning {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ff851b;
    padding: 5px;
}

.hotel_info--warning-text p {
    font-size: 13px;
    color: #ff851b;
}

.hotel_info--contact {
    margin: 15px 0px;
}

.hotel_info--show-more {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
}

.hotel_info--show-more:hover>p,
.hotel_info--show-more:hover>i {
    color: var(--main-color);
}

.room_action--total {
    padding: 15px;
}

.room_item--max-person {
    display: flex;
    gap: 5px;
    align-items: center;
}

.room_item--description {
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* .languages:hover>#dropdown_language_modal,
.languages #dropdown_language_modal:hover {
    display: block !important;
} */

/* calendar */

.text-right {
    text-align: right;
}

.ui-datepicker-header {

    background: #b5121b !important;
    border: 1px solid #b5121b;
    color: #fff;
    font-weight: bold;
}

.ui-datepicker .ui-widget-header,
.ui-datepicker .ui-state-default {
    border: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border: none;
    background: none;
    text-align: center;
    line-height: 24px;
    top: 2px;
    font-family: 'themify';
    color: #333;
}

/* end calendar */
.slick-next:before {
    content: "\e649" !important;
    font-family: themify !important;
}

.slick-prev:before {
    font-family: themify !important;
    content: "\e64a" !important;
}

.room--bed {
    display: none;
}


.rate--mask {
    position: absolute;
    right: 0px;
    z-index: 1;
    top: 0;
    background: #000000cf;
    color: #fff;
    /* padding: 0 20px; */
    /*background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), #454545);*/
    padding-left: 50px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(253deg, rgba(0, 0, 0, 1) 0%, rgb(165 165 165) 67%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    bottom: 0;
    font-size: 14px;
    cursor: pointer;
    /* background: linear-gradient(253deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 68%, rgba(238, 238, 238, 0) 100%);*/
}


/* .status.success, .notification-bubble.success {
    color: #1B7943;
    background-color: #E2FFEE;
    border-color: #9BE8BC;
}

.status {
    border-radius: 0;
}

.status {
    padding: 12px 15px;
    border: 1px solid;
    border-radius: 4px;
    margin-bottom: 15px;
}

.status strong {
    font-weight: 700;
} */



/**
 * Status
 */

.status {
    padding: 12px 15px;
    border: 1px solid;
    border-radius: 4px;
    margin-bottom: 15px;
}

.status,
.notification-bubble.info {
    /*color: #218A9E;*/
    color: #2980b9;
    /*background-color: #C9EDF5;*/
    background-color: #EAF7FF;
    border-color: #C5D7E2;
}

.status.success,
.notification-bubble.success {
    color: #1B7943;
    background-color: #E2FFEE;
    border-color: #9BE8BC;
}

.status.warning,
.notification-bubble.warning {
    color: #E67E22;
    background-color: #FFF3DC;
    border-color: #FFEDCD;
}

.status.danger,
.status.error,
.notification-bubble.error,
.notification-bubble.danger {
    color: #C0392B;
    background-color: #F6D7D3;
    border-color: #F2CCC7;
}

.status.danger,
.status.error,
.notification-bubble.error,
.notification-bubble.danger{
    text-align: center;
}

.status.danger a,
.status.error a,
.notification-bubble.error a,
.notification-bubble.danger a{
    display: flex;
    justify-content: center;
}

.status button {
    display: block;
    width: 300px;
    border: 1px solid #fff;
    background: #b5121b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
}

.status strong {
    font-weight: 700;
}

#myCustomModal.my-modal {
    z-index: 50;
}


#myCustomModal button.primary,
#myCustomModal .button.primary {
    color: #FFF;
    background-color: var(--main-color);
    border-color: var(--main-color);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 1px solid #D4D4D4;
    border-radius: 3px;
    padding: 0 12px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none !important;

}

#myCustomModal .text-center h4 {
    font-size: 18px;
    color: #666;
}

#myCustomModal .text-center strong {
    font-weight: 700;
}


/* @media screen and (max-width: 995px) {

    .hotel_info {
        margin-top: 175px;
    }

} */


.booking--widget_overlay {

    position: absolute;
    background: black;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.7;
    display: none;

}

.booking--widget_mobile--navbar {

    background: white;
    position: fixed;
    top: 0;
    width: 57%;
    height: 100%;
    z-index: 50;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    overflow-y: scroll;
}

.booking--widget_mobile--navbar.show {

    transform: translateX(0);

}


.booking--widget_mobile--navbar--overlay {

    background: black;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 35;
    opacity: 0.7;
    display: none;
}

.booking--widget_mobile--navbar--overlay.show {

    display: block;

}

.navbar--menu {
    padding: 0;
    margin: 0;
}

.navbar--sub--menu,
.navbar--sub--menu_dropdown {
    padding: 10px 15px;
    list-style: none;
    /* border-bottom: 1px solid #636363; */
    border-top: 1px solid #636363;
    font-size: 18px;
}

.navbar--sub--menu a {
    display: block;
}

.navbar--sub--menu_dropdown .navbar--sub--menu {
    margin-left: 20px;
    display: none;
}

.navbar--sub--menu_dropdown.dropdown>.navbar--sub--menu {
    display: block;
}

.mobile--navbar--header {
    padding: 20px;
    background-color: white;
    display: flex;
    justify-content: end;
}


.navbar--sub--menu li {
    list-style: circle;
    font-size: 14px;
}

.navbar--sub--menu a {
    color: black;
}

.hotels--header--right {
    display: none;
    align-items: center;
}

.hotels--header--member_card {

    border: 1px solid var(--main-color);
    color: white;
    background-color: var(--main-color);
    padding: 10px 5px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
    font-size: 12px;
    max-width: 100px;
    /* display: none; */
}

.inform--header img {
    height: 90px;
}

@media screen and (max-width: 768px) {

    .hotel--logo--wrapper {
        flex-direction: column;
    }

}

@media screen and (max-width: 500px) {

    .my-modal-content {
        width: 85% !important;
    }

}

@media screen and (max-width: 400px) {

    .hotels--header--li .logo img {
        aspect-ratio: 3.5/1;
    }

    .hotels--header--right{
        justify-content: end;
    }

    .navbar--sub--menu_dropdown .navbar--sub--menu{
        margin-left: 0;
    }

}