/*@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500&display=swap";:root {
    --main-bg-color: #fc3;
}*/


/*@font-face {
    font-family: VNF-Futura-Regular;
    src: url(./ResourceWeb/data/data/fonts/VNF-Futura-20Regular.ttf)
}*/

/*@font-face {
    font-family: iCielAltusSerif;
    src: url(./ResourceWeb/data/data/fonts/iCielAltusSerif.otf)
}*/

.font-content {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.App {
    /* font-family: font_Cafeta,Helvetica,Arial; */
    background-color: #fff;
    font-size: 16px;
    color: #111;
    font-weight: 300;
    min-width: 300px;
    /* font-family: 'Mulish', sans-serif; */
    font-family: 'Roboto';
}

.App .back-drop {
    display: none
}

.App .back-drop.open {
    display: block
}

.App .btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle
}

.App .dropdown-menu.show {
    display: block
}

.App .nav-link {
    display: block;
    padding: .5rem 1rem
}

.App .nav-link img {
    width: 100%
}

.ant-message {
    top: 9px
}

.ant-message .ant-message-notice {
    padding: 0
}

.ant-message .ant-message-notice .ant-message-notice-content {
    border-radius: 0;
    border: 1px solid #ccc;
    background-color: #f3afb3;
    width: 100%;
    max-width: 500px;
    text-align: left
}

.ant-message .ant-message-notice .ant-message-notice-content .ant-message-custom-content {
    font-size: 20px;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    color: #1b1b1b
}

.ant-message .ant-message-notice .ant-message-notice-content .ant-message-custom-content i {
    width: 15px;
    font-size: 20px;
    top: 0;
    width: 20px
}

.dropdown-custom {
    width: 100%;
    position: relative
}

.dropdown-custom .btn-custom {
    text-transform: uppercase;
    width: 100%;
    border: none;
    font-size: 22px;
    font-family: font_Cafeta;
    border-radius: 0;
    background: #fc3;
    box-shadow: none;
    padding: 8px 5px;
    text-align: center;
    cursor: pointer
}

.dropdown-custom .btn-custom:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: 0;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    font-size: 45px
}

.dropdown-custom ul {
    width: 100%;
    padding: 0
}

.dropdown-custom ul li {
    font-size: 25px;
    font-family: font_Cafeta;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    cursor: pointer
}

.dropdown-custom ul li:hover {
    background-color: #3f3f3f;
    color: #fff
}

.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    will-change: transform;
    position: absolute;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #1b1b1b;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15)
}

.dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

@media screen and (min-width: 767px) {
    .ant-notification {
        margin-left:50%!important;
        transform: translateX(-50%)
    }
}

.ant-notification {
    width: 100%!important;
    max-width: 500px!important;
    left: 0;
    top: 0!important
}

.ant-notification .ant-notification-notice {
    border-radius: 0;
    padding: 12px;
    width: auto
}

.ant-notification .ant-notification-notice .ant-notification-notice-content {
    color: #000;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-message {
    font-weight: 600
}

.ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-description,.ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-message {
    font-size: 18px;
    margin-left: 40px
}

.ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-close {
    right: 15px
}

.ant-notification .error {
    background: #f3afb3
}

.ant-notification .success {
    background: rgba(166,239,184,.9)
}

.ant-notification .ant-notification-hook-holder,.ant-notification .ant-notification-notice {
    max-width: 100%
}

.ant-notification .error-location {
    background-color: #fdf4b6
}

.ant-notification .error-location.ant-notification-notice .ant-notification-notice-content {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    color: #222
}

.ant-notification .error-location.ant-notification-notice .ant-notification-notice-description {
    margin-left: 0;
    padding: 0 15px;
    font-size: 14px;
    text-align: center
}

@media only screen and (min-width: 768px) {
    .ant-notification .error-location.ant-notification-notice .ant-notification-notice-description {
        font-size:16px
    }
}

.ant-notification .error-location .ant-notification-notice-close {
    right: 10px;
    top: 5px
}

.ant-notification .error-location__icon img {
    width: 16px;
    height: 16px
}

.ant-modal-title {
    font-family: Oswald;
    font-size: 22px
}

.background-spin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,.45)
}

.background-spin .ant-spin .ant-spin-dot-item {
    background: #fc3
}

.background-spin .ant-spin-text {
    color: #fc3
}

.background-spin .center-middle {
    top: 45%;
    border-radius: 50%
}

.loading {
    width: 55px;
    height: 55px;
    background: #fff
}

.fixed {
    position: fixed
}

.flex {
    display: flex
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.space-between {
    justify-content: space-between;
}

.item-center {
    align-items: center;
}

.item-baseline {
    align-items: baseline;
}

.content-center-middle {
    display: flex;
    justify-content: center;
    align-items: center
}

.center-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.ant-tabs-nav {
    margin-bottom: 0!important
}

@media screen and (max-width: 768px) {
    .dropdown-custom .btn-custom {
        font-size:6.1vw
    }

    .ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-description,.ant-notification .ant-notification-notice .ant-notification-notice-content .ant-notification-notice-message {
        font-size: 4.5vw
    }
    .layout__banner .banner__wrapper{
        min-height: 3em;
        /* background: linear-gradient(to bottom, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 80%); */
        bottom: 0px !important;
        background: rgba(1, 1, 1, 0.6);
        padding: 1% 0 1% 0 !important;
    }
    .mobile_hidden{
        display: none;
    }
    .footer-bottom {
    display: inline-block;
    margin-bottom: 35px;
    width: 100%;
    }
    .nav-bar .menu-item-text{
        font-family: monospace;
    }
    .box_search button{
        width: 38px !important;
    }
    .box_search input {
        width: 100%;
        border: 0px solid #fff !important;
        font-size: 15px;
        font-weight: 400;
        padding: 5px 40px 5px 5px !important;
        box-sizing: border-box;
        border-radius: 10px 10px 10px 10px;
        outline: none;
        background: #fff !important;
    }
    .menu-button {
        backdrop-filter: blur(100px);
        background: antiquewhite;
        padding: 5px;
        border-radius: 28px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-right: 3px;
    }
}

.ant-modal-content {
    border-radius: 0!important
}

.ant-modal-content .ant-modal-header {
    padding: 10px 24px;
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    font-family: Oswald
}

.ant-modal-content .ant-modal-body {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    color: #111;
    font-size: 16px
}

.ant-modal-content .ant-modal-close-x {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ant-modal-content .ant-modal-close-x img {
    margin: auto
}

.see-all {
    font-size: 14px;
    font-family: HelveticaVn-LtCn;
    font-weight: 700;
    cursor: pointer;
    color: #111
}

.btn-color-1 {
    background-color: #500400 !important;
    background-color: var(--main-bg-color)!important;
    color: #333 !important;
}

.btn-color-1,.btn-color-1:active {
    border-color: #500400 !important;
    border-color: var(--main-bg-color)!important;
}

.btn-color-1:active {
    background-color: #ccc!important
}

.btn-color-1:focus {
    background-color: #fc3!important;
    background-color: var(--main-bg-color)!important
}

.btn-color-1:focus,.btn-color-1:hover {
    border-color: #fc3!important;
    border-color: var(--main-bg-color)!important
}

.btn-color-1:hover {
    background-color: #000;
    color: #000!important
}

.shadown {
    box-shadow: 0 1px 6px 0 rgba(32,33,36,.28)
}

.bg-30s {
    background-color: #fc3
}

.cl-30s {
    color: #fc3
}

.cl-white {
    color: #fff
}

.cl-ccc {
    color: #ccc
}

.bg-e8 {
    background-color: #e8e8e8
}

.bg-ccc {
    background-color: #ccc
}

.br-2 {
    border-radius: 2px
}

.br-4 {
    border-radius: 4px
}

.w-100 {
    width: 100%
}

.placehoder {
    background-color: #e3e3e3
}

.mg-10 {
    margin: 10px
}

.mg-top-20 {
    margin-top: 20px
}

.mg-top-10 {
    margin-top: 10px
}

.mg-top-15 {
    margin-top: 15px
}

.mg-left-15 {
    margin-left: 15px
}

.mg-right-15 {
    margin-right: 15px
}

.mb-30 {
    margin-bottom: 30px
}

.padding-5 {
    padding: 5px
}

.padding-10 {
    padding: 10px
}

.padding-8 {
    padding: 8px
}

.h1 {
    font-size: 20px;
    font-family: Oswald
}

.h2 {
    font-size: 18px
}

.h3 {
    font-size: 16px
}

.h4 {
    font-size: 14px
}

.bold {
    font-weight: 700
}

.btn {
    /* font-family: Oswald; */
}

.btn,.pointer {
    cursor: pointer
}

.f-be {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.f-oswald {
    font-family: Oswald
}

.fb_dialog {
    z-index: 90!important
}

#fb-root {
    height: 0;
    overflow: hidden
}

.bot-message {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #ebf7ef;
    border: 1px solid #c1e4ca;
    box-sizing: border-box;
    border-radius: 8px;
    width: calc(100% + 40px);
    z-index: 1;
    margin-left: -30px;
    padding: 8px
}

.bot-message__normal {
    width: 100%;
    margin-left: 0
}

.bot-message__reception {
    flex-direction: row-reverse
}

.bot-message__reception img {
    margin-right: 0!important;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    margin-left: 5px
}

.bot-message__reception .avatar {
    width: 55px;
    display: flex
}

.bot-message__reception .avatar .reception-avatar {
    display: inline-block;
    background-color: #f7f7f7;
    width: 55px;
    height: 55px;
    background-size: cover;
    background-position: top;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15)
}

.bot-message__reception .content {
    width: auto
}

.bot-message .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.bot-message .content__header {
    text-align: left
}

.bot-message .content__header .label {
    font-weight: 700;
    color: #3d3d3d;
    font-size: 14px
}

.bot-message .content__header .name {
    font-size: 14px
}

.bot-message .content p,.bot-message .content span {
    text-align: left
}

.bot-message img {
    width: 55px;
    height: 100%;
    margin-right: 10px;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15)
}

.bot-message p,.bot-message span {
    padding: 0 5px;
    font-weight: 300;
    font-size: 12px;
    margin: 0
}

.bot-message p,.bot-message span,.f-be-pro {
    font-family: URW-DIN-Arabic,sans-serif
}

.bg-f7f7f7 {
    background-color: #f7f7f7
}

.border-f7f7f7 {
    border-color: #f7f7f7
}

.color-a3a3a3 {
    color: #a3a3a3
}

.color-111111 {
    color: #111
}

.color-red-f46969 {
    color: #f46969
}

.border-red-f46969 {
    border-color: #f46969
}

.bg-red-ea1601 {
    background-color: #ea1601
}

.ping-fast {
    animation: ping .5s cubic-bezier(0,0,.2,1) infinite
}

.bg-green-eaf6ee {
    background-color: #eaf6ee
}

.border-gray-bababa {
    border-color: #bababa
}

.bg-red-fd8b7c {
    background-color: #fd8b7c
}

.bg-green-11b14b {
    background-color: #11b14b
}

.color-green-11b14b {
    color: #11b14b
}

.border-gray-e8 {
    border-color: #e8e8e8
}

.bg-gray-e8 {
    background-color: #e8e8e8
}

.border-gray-d1 {
    border-color: #d1d1d1
}

.border-gray-a3 {
    border-color: #a3a3a3
}

.bg-FFF4B6 {
    background-color: #fff4b6
}

img {
    display: inline
}

.layout {
    /* font-family: 'URW-DIN-Arabic',sans-serif; */
    font-weight: 300;
    /* background-color: #fff; */
    margin: 40px 0 30px;
    /* font-family: 'Mulish', sans-serif; */
    font-family: 'Roboto';
}

.layout__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 15px;
}

.layout__head .head__title {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 8px;
    /* text-transform: uppercase; */
    color: #014258;
    /* font-family: 'Playfair Display'; */
    /* color: #222; */
    font-family: 'Roboto';
}

.head__title {}

.layout__head .head__sub-title {
    font-size: 15px;
    color: #a6a6a6;
    text-transform: none;
    /* font-family: URW-DIN-Arabic,sans-serif; */
    font-weight: 300;
    /* font-family: URW DIN; */
    font-family: 'Roboto';
}

.layout__head .head__text-view-all {
    align-self: center;
    color: #014258;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: baseline
}

.layout__head .head__text-view-all span {
    display: none
}

.layout__head .head__text-view-all img {
    margin-left: 12px;
    height: 12px
}

.layout__head .head__text-view-all:hover {
    text-decoration: underline
}

.layout__banner {
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.layout__banner .banner__media {
    border-radius: 4px;
    overflow: hidden
}

.layout__banner .banner__wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* color: #014258; */
    z-index: 3;
    padding: 0 5px;
    color: #fff;
}

.layout__banner .banner__title {
    /* font-family: Oswald; */
    font-weight: 500;
    font-size: 18px;
}

.layout__banner .banner__text {
    font-size: 14px
}

.layout__banner .banner__button {
    background: #fc3;
    color: #000;
    border-radius: 4px;
    padding: 6px 30px;
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s
}

.layout__list .list__item {
    padding: 12px 0px 12px 20px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    position: relative;
}

.list__item_not_left_not_right {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.list__padding_format {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.layout__list .list__item:before {
    content: "";
    background-image: none;
    background-size: contain;
    transform: translateY(-50%);
    right: 5px
}

.layout__list .list__item .item__media {
    margin-right: 15px;
    /* flex: 0 0 80px; */
    /* height: 100%; */
    border-radius: 4px;
    position: relative;
    /* overflow: hidden; */
    justify-content: space-between;
}

.layout__list .list__item .item__media img {
    width: 100%;
}

.layout__list .list__item .item__media:before {
    transition: all .3s ease-in;
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40
}

.content-service{

/* background: #F8F8F8; */
}
.content-service .service-left{

flex: 0 0 65px !important;

max-height: 95px;
}
.content-service .service-right{

}

.content-service .item__title{
}


.layout__list .list__item .item__title {
    color: #014258;
    font-weight: 500;
    font-size: 16px;
    /* color: #e80003; */
}

.layout__list .list__item .item__subTitle,.layout__list .list__item .item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.layout__list .list__item .item__subTitle {
    color: #686868;
    font-weight: 300;
}

.layout__list .list__item .item__content {
    display: flex;
    align-self: center;
    flex-flow: column;
    font-size: 15px;
}

.layout__blog {
    position: relative
}

.layout__blog .blog__media {
    /* border-radius: 5px; */
    overflow: hidden;
}

.layout__blog .blog__media img {
    transition: all .2s ease-in-out;
    width: 100%;
    /* max-height: 400px; */
}

.layout__blog .blog__title {
    color: #111;
    font-weight: 500;
    font-size: 16px;
    padding-top: 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* font-family: be vietnam pro,sans-serif; */
}

.layout__blog .blog__subTitle {
    color: #686868;
    font-size: 14px;
}

.layout .swiper_button {
    display: none;
}
.layout .swiper_button:after{
    font-size: 12px;
        display: flex
}

.layout .border-none {
    border: none
}

.layout .container {
    max-width: 1200px;
    padding: 0 15px;
    margin: auto;
    width: 100%
}

@media(min-width: 768px) {
    .layout {
        margin: 1em 0;
    }

    .layout__head {
        padding: 0 0 20px
    }

    .layout__head .head__title {
        font-size: 24px;
    }

    .layout__head .head__sub-title {
        font-size: 18px;
        color: #333;
        margin-bottom: 15px;
    }

    .layout__head .head__text-view-all span {
        display: block;
        font-family: 'Roboto';
        padding: 5px 10px;
        border: 1px solid;
        border-radius: 5px;
    }

    .layout__banner {
        margin-bottom: 0px;
        width: 100%;
    }

    .layout__banner .banner__media {
        border-radius: 8px
    }

    .layout__banner .banner__media img {
        transition: all .2s ease-in-out;
        width: 100%;
    }

    .layout__banner .banner__wrapper {
        bottom: 0%;
        width: 100%;
        padding: 1% 0% 1% 0%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.6) 30%);
        /* background: rgba(255,255,255,0.85); */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        /* backdrop-filter: blur(30px); */
    }

    .layout__banner .banner__title {
        font-size: 20px;
    }

    .layout__banner .banner__text {
        font-size: 15px;
        margin-bottom: -1em;
    }

    .layout__banner .banner__button {
        padding: 12px 30px;
        font-size: 16px;
        border-radius: 8px
    }

    .layout__banner .banner__button:hover {
        background-color: #f7d778
    }

    .layout__banner.hover .banner__media:hover img {
        transform: scale(1.04)
    }

    .layout__list .list__item {
        border-top: 0;
        padding-right: 0em;
        width: 100%;
    }

    .layout__list .list__item:hover img {
        transform: scale(1.1)
    }

    .layout__list .list__item:before {
        content: none
    }

    .layout__list .list__item .item__media {
        /* flex: 0 0 100px; */
        border-radius: 8px;
    }

    .layout__list .list__item .item__media img {
        transition: all .2s ease-in-out
    }

    .layout__list .list__item .item__title span {
        display: block
    }

    .layout__blog .blog:hover img {
        transform: scale(1.05)
    }

    .layout__blog .blog__media {
        border-radius: 0px;
    }

    .layout__blog .blog__title {
        color: #111;
        font-size: 15px;
        /* font-weight: bold; */
        margin-bottom: 0px;
        line-height: 22px;
        text-transform: uppercase;
    }

    .layout__blog .blog__subTitle {
        font-size: 14px;
        font-weight: 300;
    }

    .layout .swiper_button {
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        /* background: rgba(95,95,95,.7); */
        color: #333;
        cursor: pointer;
        border-color: transparent;
        backdrop-filter: blur(40px);
        border: 1px solid #333;
    }
    .layout .swiper_button .swiper-button-next:after, .swiper-button-prev:after{
        font-size: 12px;
        display: flex
    }

    .layout .swiper_button .swiper_button_icon {
        font-size: 12px;
        display: flex
    }

    .layout .swiper_button.button_prev {
        top: calc(50% - 20px);
        left: -20px
    }

    .layout .swiper_button.button_next {
        top: calc(50% - 20px);
        right: -20px
    }

    .layout .swiper_button_disable {
        background-color: #d1d1d1;
        color: #5f5f5f;
        cursor: not-allowed
    }

    .layout .swiper_button_disable:hover {
        color: #5f5f5f;
        border-color: transparent
    }
}

.top-product-v2 .swiper-pagination-progressbar {
    background-color: #3d3d3d
}

.top-product-v2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: #fc3
}

.top-product-v2 .top_product_v2_wrap {
    position: relative;
    /* margin-top: 24px; */
    color: #000;
    box-shadow: 0 8px 8px -2px #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px;
    height: auto;
}

.top-product-v2 .top_product_v2_wrap .top_product_content {
    padding-top: 0px;
    padding-bottom: 10px;
    background: none;
    border-radius: 6px;
}

.top-product-v2 .top_product_v2_wrap .top_product_content:hover .top_product_button_sell {
    opacity: .8
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_image {
    position: relative;
    /* padding-top: 100%; */
    height: auto
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_image img {
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des {
    padding: 0px 10px;
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_title {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    min-height: 41px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: 10px;
    margin-bottom: 10px;
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_price_sale {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 8px;
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_price {
    font-family: 'Roboto';
    font-size: 14px;
    color: #767676;
    margin-bottom: 0;
    margin-right: 8px;
    margin-top: 5px;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_button_sell {
    color: #1D464A;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 10px;
    border: 1px solid #1D464A;
    width: auto;
    display: inline-block;
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_button_sell:hover {
    opacity: .8
}

.top-product-v2 .top_product_v2_wrap .top_product_content .top_product_button_sell .top_product_button_sell_text {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
    text-transform: uppercase;
    color: #1D464A;
    padding: 5px 6px;
}

@media screen and (max-width: 1200px) {
    .top-product-v2 .top_product_v2_wrap {
        margin-top:24px
    }

    .top-product-v2 .top_product_v2_wrap:after {
        padding-bottom: 0
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content {
        position: relative
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des {
        padding: 12px
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_title {
        font-size: 15px;
        line-height: 20px;
        max-height: 62px;
        margin-bottom: 5px
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_price_sale {
        font-size: 18px
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_des .top_product_des_price {
        font-size: 15px;
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_button_sell {
        padding: 6px 8px;
    }

    .top-product-v2 .top_product_v2_wrap .top_product_content .top_product_button_sell .top_product_button_sell_text {
        font-size: 14px
    }
    .category_slide{
        display: block;
    }
    .category_slide .list__item{

display: block;

padding: 0px 0px !important;
}
    
    .category_slide .layout__list .list__item:before {
        content: "";
        background-image: url(../images/chevronRightV3.aee16f24.svg);
        background-size: contain;
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 5px;
    }
    .category_slide .item__media {

text-align: center;

margin: 0px;

margin-right: 0px !important;

}

    .category_slide .item__content {

text-align: center;

}
    .category_slide .list__item .item__media img{
        width: auto;
        margin: auto;
    }
    
}
.home_store_v2 {
    /* background-color: #fff; */
    padding: 40px 0;
}

.home_store_v2 .home_store_container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 15px
}

.product_background_color .home_store_v2:nth-child(n + 1) {
    background: linear-gradient(180deg,#f2f2f2 0,#fafafa 100%);
}
.product_background_color .home_store_v2:nth-child(n + 2) {
    background: linear-gradient(180deg,#f2f2f2 0,#fafafa 100%);
}
.product_background_color .home_store_v2:nth-child(n + 3) {
    background: linear-gradient(180deg,#f2f2f2 0,#fafafa 100%);
}
.product_background_color .home_store_v2:nth-child(n + 4) {
    background-color: whitesmoke;
}



.home_store_v2 .home_store_container .home_store_title {
    margin-bottom: 30px;
    align-items: center;
    cursor: pointer
}

.home_store_v2 .home_store_container .home_store_title .title {
    font-family: Oswald;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    display: block;
    text-transform: uppercase
}

.home_store_v2 .home_store_container .home_store_title .title__description {
    font-size: 16px;
    color: #a6a6a6;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.home_store_v2 .home_store_container .home_store_title .pointer {
    margin-bottom: 0;
    font-weight: 700
}

.home_store_v2 .home_store_container .button-more {
    display: flex;
    align-items: center;
    cursor: pointer
}

.home_store_v2 .home_store_container .button-more span {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    font-style: italic;
    text-decoration: underline
}

.home_store_v2 .home_store_container .button-more img {
    width: 28px;
    height: 28px
}

.home_store_v2 .home_store_container .home_store_banner>img {
    width: 100%
}

.home_store_v2 .home_store_container .home_store_banner__service {
    display: flex;
    align-items: center;
    justify-content: center
}

.home_store_v2 .home_store_container .home_store_banner__service .service-item {
    margin-top: 15px;
    display: flex;
    align-items: center
}

.home_store_v2 .home_store_container .home_store_banner__service .service-item:not(:last-child) {
    margin-right: 50px
}

.home_store_v2 .home_store_container .home_store_banner__service .service-item img {
    width: 24px;
    height: 24px;
    margin-right: 3px
}

.home_store_v2 .home_store_container .home_store_banner__service .service-item span {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 16px
}

.home_store_v2 .home_store_container .home_store_top_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 8px;
    position: relative
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_title {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button {
    width: 40px;
    height: 40px;
    background: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button:first-child {
    margin-right: 8px
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button:hover {
    color: #40a9ff
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button .store_icon_button {
    font-size: 12px;
    display: flex
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_left_button {
    left: -20px
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_right_button {
    right: -20px
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button_disable {
    background: #f5f5f5;
    color: #5f5f5f;
    cursor: not-allowed;
    border: none
}

.home_store_v2 .home_store_container .home_store_top_content .home_store_top_button_disable:hover {
    color: #5f5f5f;
    border-color: transparent
}

.home_store_v2 .home_store_container .home_store_button {
    background-color: #fc3;
    border-radius: 4px;
    padding: 10px;
    max-width: 570px;
    margin: 24px auto auto;
    text-align: center
}

.home_store_v2 .home_store_container .home_store_button a {
    font-family: Oswald;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    color: #000
}

.home_store_v2 .home_store_container .home_store_button:hover {
    cursor: pointer;
    opacity: .7
}

.item-end {
    align-items: flex-end
}

@media screen and (max-width: 768px) {
    .home_store_v2 {
        margin:30px 0
    }

    .home_store_v2 .home_store_container .home_store_title {
        padding: 0 15px
    }

    .home_store_v2 .home_store_container .home_store_top_content .home_store_top_title {
        font-weight: 700
    }

    .home_store_v2 .home_store_container .home_store_button {
        margin-top: 40px
    }

    .home_store_v2 .home_store_container .button-more span {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    .home_store_v2 .home_store_container .home_store_title {
        padding:0 15px
    }

    .home_store_v2 .home_store_container .home_store_top_content .home_store_top_title {
        font-weight: 700
    }

    .home_store_v2 .home_store_container .home_store_button {
        margin-top: 40px
    }
    .nav-bar {
        /* justify-content: flex-end !important; */
        padding: 0px;
    }
    .nav-bar .nav-bar__menu{
        overflow-y: auto;
        height: 100%;
        padding: 1em;
        background: #014258;
    }
    .nav-bar .menu-item-text{
        color: #e7be71 !important;
    }
    /*Category Top*/
    .category{
        /* background: linear-gradient(-45deg, #fff, #ffeef8, #ffeef8, #fff); */
        box-shadow: 0 2px 8px hsla(0,0%,77.6%,.25);
        background: #fff !important;
        z-index: 9999;
        padding: 5px 0px;
        position: relative;
    }
    .category .category__container {
        max-width: 1200px;
        width: 100%;
        /* padding: 0px 5px; */
        margin: auto;
        color: #000;
    }

    .category-detail .category__head {
        box-shadow: 0 0px 13px -9px !important;
        /* display: flex; */
        background-color: #e7be71 !important;
        position: initial  !important;
        min-width: 35%;
        z-index: 999;
        top: 0px !important;
        border-radius: 0px !important;
        padding: 0px 0px 0px 0px !important;
        display: inline-block !important;
        width: 100%;
        /* backdrop-filter: blur(100px); */
    }

    .category-detail:hover .category__head {
        box-shadow: 0 4px 8px hsla(0,0%,77.6%,.25);
        /* display: flex; */
        background-color: #fff;
        position: relative !important;
        min-width: 35%;
        z-index: 90;
        top: 40px;
        display: inline-block;
        border-radius: 6px;
        padding: 0px 10px 0px 10px;
    }

    /* .category-detail::hover .category__head .head__buttonBack .button {
        cursor: pointer;
        background: #f7f7f7;
        border-radius: 4px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center
    } */

    .category-detail .category__head .head__buttonBack .button img {
        width: 24px
    }

    .category-detail .category__head .head__title {
        font-family: 'Baloo Chettan 2';
        font-size: 10px;
        /* text-align: center; */
        flex: 1 1;
        color: #333;
        /* width:auto; */
    }

    .category-detail .category__head .head__title a {
        color: #333;
        font-size: 16px;
        border-bottom: 1px solid #014258 !important;
        padding: 10px;
        display: block;
    }

    .category-detail::hover .category__head .head__button {
        display: flex;
        margin: 0 -6px
    }

    /*End Category Top*/

    .list__item_not_left_not_right {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

}

@media screen and (max-width: 480px) {
    .home_store_v2 .home_store_container .home_store_top_content .home_store_top_button {
        display:none
    }

    .home_store_v2 .home_store_container .home_store_banner__service .service-item {
        margin-top: 5px
    }

    .home_store_v2 .home_store_container .home_store_banner__service .service-item:not(:last-child) {
        margin-right: 15px
    }

    .home_store_v2 .home_store_container .home_store_banner__service .service-item img {
        width: 15px;
        height: 15px
    }

    .home_store_v2 .home_store_container .home_store_banner__service .service-item span {
        font-size: 10px
    }
}

.media {
    padding-bottom: 30px
}

.media__head {
    padding: 15px 0
}

.media img {
    width: 100%
}

.media__modal.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 92;
    background: rgba(0,0,0,.5)
}

.media__full {
    display: none
}

.media__full.block {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 500px
}

.media__wrapper .wrapper__img {
    position: relative;
    padding-top: 150%;
    border-radius: 4px;
    overflow: hidden
}

.media__wrapper .wrapper__img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.media__modal .ant-modal-body {
    position: relative
}

.media__modal .ant-modal-content {
    background-color: transparent;
    box-shadow: none
}

.media__modal .swiper-slide .wrapper__img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.media__modal .ant-modal-close {
    top: -10px
}

.media__modal .ant-modal-close .ant-modal-close-x span {
    color: #fff
}

.media__modal .swiper_button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(95,95,95,.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.media__modal .swiper_button .anticon {
    color: #fff
}

.media__modal .swiper_button .anticon svg {
    width: 12px;
    height: 12px
}

.media__modal .swiper_button_disable {
    display: none
}

.media__modal .swiper_button.button_prev {
    left: 0
}

.media__modal .swiper_button.button_next {
    right: 0
}

@media screen and (min-width: 769px) {
    .media {
        padding-bottom:40px
    }

    .media__head {
        padding: 0 0 30px
    }

    .media__modal .swiper_button {
        width: 40px;
        height: 40px
    }

    .media__modal .swiper_button .anticon svg {
        width: 16px;
        height: 16px
    }

    .media__wrapper .wrapper__img {
        border-radius: 8px
    }

    .media__wrapper .wrapper__img img {
        transition: all .2s ease-in-out
    }

    .media__wrapper .wrapper__img:hover img {
        transform: scale(1.04)
    }
}

.banner-embed-youtube .ant-modal-content {
    background-color: transparent
}

.banner-embed-youtube .ant-modal-content .ant-modal-body {
    padding: 0
}

.banner-embed-youtube .ant-modal-content .ant-modal-close-x {
    color: #fff;
    background-color: rgba(0,0,0,.7);
    height: 30px;
    width: 30px;
    line-height: 30px
}

.banner-embed-youtube .ant-modal-content .player {
    display: flex;
    text-align: center;
    justify-content: center;
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

.banner-embed-youtube .ant-modal-content .player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.home .home__slide {
    position: relative;
    /* box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); */
    /* background: #edf0f3; */
    padding: 1em 0em 0.5em 0em;
    /* background: url('../images/line-decor.png') #f2f2f2; */
    /* background-position: bottom center; */
    /* padding-bottom: 92px; */
    background-repeat: no-repeat;
    background: #f2f2f2;
}

.home .home__slide .swiper-button-next,.home .home__slide .swiper-button-prev {
    background-image: none
}

.home .home__slide .swiper-pagination-bullet-active {
    background: #1b1b1b
}

.home .home__slide .swiper-slide img {
    width: 100%;
    border-radius: 6px;
}

.home .home__slide .swiper-container {
    position: relative;
    border-radius: 5px 5px 0 0;
    margin-top: -5px;
    /* min-height: 12em; */
}

.home .home__slide .swiper-container .ic-next,.home .home__slide .swiper-container .ic-prev {
    position: absolute;
    top: 50%;
    z-index: 1;
    cursor: pointer
}

.home .home__slide .swiper-container .ic-next {
    right: 20px
}

.home .home__slide .swiper-container .ic-prev {
    left: 20px
}

.home .home__slide .swiper-button-custom {
    /* background: linear-gradient(-45deg, #ffeef8, #fff, #fff, #ffeef8); */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background: #EED982; */
    backdrop-filter: blur(30px);
    border: 1px solid #333;
}

.home .home__slide .swiper-button-custom:after {
    font-size: 10px;
    color: #1D464A;
    font-weight: 700
}

.home .phone-null {
    width: 100%;
    animation-name: setBorder;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards
}

.home .phone-null::-webkit-input-placeholder {
    color: #3d0505
}

.home .phone-null:-ms-input-placeholder {
    color: #3d0505
}

.home .phone-null::-ms-input-placeholder {
    color: #3d0505
}

.home .phone-null::placeholder {
    color: #3d0505
}

.home .btn-action {
    border-radius: 6px;
    padding: 0 5px;
    font-size: 18px;
    cursor: pointer;
    font-family: 'Oswald';
}

.home__form-input {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    /* background: linear-gradient(-45deg, #f6e1b5, #f6e1b5, #fac860, #e8a001); */
    max-width: 545px;
    border-radius: 8px;
    padding: 10px 15px;
    position: relative;
    z-index: 91;
    bottom: 0;
    margin: -30px auto 0;
    background: linear-gradient(-45deg, #A8232E, #DA0530, #DA0530, #a8232d);
    /* box-shadow: 0px 0px 4px 0px #ddd; */
    /* border: solid 1px #a8232d; */
}

.home__form-input .form-input__slogan {
    color: #fff;
    padding-bottom: 5px
}

.home__form-input .form-input__slogan .slogan__title {
    text-transform: uppercase;
    font-family: Oswald;
    font-size: 20px;
    /* font-family: 'URW DIN'; */
}

.home__form-input .form-input__slogan .slogan__text {
    font-size: 14px
}

.home__form-input .form-input__form .form__input {
    flex: auto;
    margin-right: 10px
}

.home__form-input .form-input__form .form__input input {
    height: 100%;
    border-radius: 6px;
    width: 100%;
    padding-left: 10px;
    font-size: 15px;
    /* border: 1px solid transparent; */
    height: 42px;
    /* font-family: URW-DIN-Arabic,sans-serif; */
    font-family: 'Be Vietnam Pro';
    font-weight: 600
}

.home__form-input .form-input__form .form__input input:active,.home__form-input .form-input__form .form__input input:focus,.home__form-input .form-input__form .form__input input:hover {
    outline-style: none;
    box-shadow: none
}

.home .banner-slogan {
    background: #000;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    color: #fff;
    padding: 8px 0 13px
}

@media(min-width: 768px) {
    .home .home__slide .swiper-container {
        border-radius:0;
        margin-top: 0;
        border-radius: 10px;
    }

    .home .home__slide .swiper-button-custom {
        width: 45px;
        height: 45px
    }

    .home .home__slide .swiper-button-custom:after {
        font-size: 15px
    }

    .home .btn-action {
        padding: 0 12px;
        font-size: 22px;
    }

    .home__form-input {
        position: absolute;
        bottom: 25px;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 15px 20px
    }

    .home__form-input .form-input__slogan {
        padding-bottom: 15px
    }

    .home__form-input .form-input__slogan .slogan__title {
        font-size: 24px
    }

    .home__form-input .form-input__slogan .slogan__text {
        font-size: 18px;
        color: #fff;
    }

    .home__form-input .form-input__form .form__input input {
        padding-left: 15px;
        height: 54px;
        font-size: 20px
    }
}

@media only screen and (max-width: 1200px) and (min-width:768px) {
    .home .home__slide {
        margin-bottom: 0px;
    }

    .home__form-input {
        bottom: -82px
    }
}

@media only screen and (max-width: 545px) {
    .home__form-input {
        margin-left:5px;
        margin-right: 5px
    }
}

@keyframes setBorder {
    0% {
        border: 1px solid transparent
    }

    to {
        border: 1px solid red
    }
}

.modal-confirm {
    font-family: Be
}

.modal-confirm .ant-modal-content {
    text-align: center;
    color: #2e2d2d;
    border-radius: 2px
}

.modal-confirm .ant-modal-content .ant-modal-header {
    border: none
}

.modal-confirm .ant-modal-content .ant-modal-header .ant-modal-title {
    font-size: 25px;
    font-family: Oswald;
    font-weight: 700;
    margin-top: 15px
}

.modal-confirm .ant-modal-content .ant-modal-body {
    padding: 12px 24px
}

.modal-confirm .ant-modal-content .ant-modal-body .right {
    padding: 5px 20px;
    background: #fc3;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 10px
}

.modal-confirm .ant-modal-content .ant-modal-body .left {
    padding: 5px 20px;
    cursor: pointer
}

.modal-confirm .ant-modal-content .ant-modal-body .h2 {
    font-family: Oswald
}

@media screen and (max-width: 767px) {
    .modal-confirm .ant-modal-content .ant-modal-header .ant-modal-title {
        font-size:22px
    }

    .modal-confirm .ant-modal-content .ant-modal-body {
        font-size: 16px
    }

    .modal-confirm .ant-modal-content .ant-modal-footer button {
        font-size: 25px
    }
}

.list-booking-infomation .container {
    max-width: 1200px;
    padding: 0 15px;
    margin: auto;
    width: 100%
}

.list-booking-infomation .title {
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: Oswald;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 0
}

.list-booking-infomation .booking-info {
    background: #fff;
    color: #fff;
    font-family: Be;
    font-size: 16px
}

.list-booking-infomation .booking-info .content {
    background: rgba(0,0,0,.8);
    border-radius: 10px;
    padding: 20px
}

.list-booking-infomation .booking-info .content .time-to {
    margin-bottom: 16px
}

.list-booking-infomation .booking-info .content .item {
    display: flex;
    align-items: center
}

.list-booking-infomation .booking-info .content .item:not(:last-child) {
    margin-bottom: 6px
}

.list-booking-infomation .booking-info .content .item span {
    min-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.list-booking-infomation .booking-info .content img {
    width: 22px;
    margin-right: 16px
}

.list-booking-infomation .booking-info .action {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 15px
}

.list-booking-infomation .booking-info .action .button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    color: #000;
    font-family: Be;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 5px 20px;
    cursor: pointer;
    transition: all .3s;
    border: 1px solid rgba(0,0,0,.13)
}

.list-booking-infomation .booking-info .action .button:hover {
    background: #fc3;
    border-color: #fc3
}

.list-booking-infomation .booking-info .action .button:not(:last-child) {
    margin-right: 18px
}

.list-booking-infomation .booking-info .action .button-disable {
    background-color: red;
    cursor: not-allowed
}

.list-booking-infomation .booking-info .action .button-disable:hover {
    background-color: red
}

.list-booking-infomation .swiper_button {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    border-color: transparent;
    top: 50%;
    transform: translateY(calc(50% - 47px))
}

.list-booking-infomation .swiper_button .swiper_button_icon {
    font-size: 12px;
    display: flex
}

.list-booking-infomation .swiper_button.button_prev {
    left: -25px
}

.list-booking-infomation .swiper_button.button_next {
    right: -25px
}

.list-booking-infomation .swiper_button_disable {
    background-color: #d1d1d1;
    color: #5f5f5f;
    cursor: not-allowed
}

.list-booking-infomation .swiper_button_disable:hover {
    color: #5f5f5f;
    border-color: transparent
}

.list-booking-infomation .swiper-pagination {
    display: inline-table;
    top: 5px;
    left: inherit;
    right: 5px;
    color: #fff;
    width: auto;
    background: #767676;
    border-radius: 4px;
    padding: 5px;
    font-family: be;
    font-size: 10px
}

.list-booking-infomation .booking-canceled {
    opacity: .7;
    cursor: not-allowed
}

@media screen and (max-width: 768px) {
    .list-booking-infomation .title {
        padding-top:15px;
        padding-bottom: 15px;
        font-size: 24px
    }

    .list-booking-infomation .booking-info {
        background: #fff;
        flex-direction: column;
        padding: 0;
        border-radius: 0;
        font-size: 14px
    }

    .list-booking-infomation .booking-info .content {
        padding: 28px 14px
    }

    .list-booking-infomation .booking-info .content .time-to {
        margin-bottom: 14px
    }

    .list-booking-infomation .booking-info .content .item {
        display: flex;
        align-items: center
    }

    .list-booking-infomation .booking-info .content .item:not(:last-child) {
        margin-bottom: 6px
    }

    .list-booking-infomation .booking-info .content img {
        width: 20px;
        margin-right: 12px
    }

    .list-booking-infomation .booking-info .action {
        display: flex;
        margin-top: 10px
    }

    .list-booking-infomation .booking-info .action .button {
        font-size: 12px;
        flex: 1 1;
        padding: 6px
    }

    .list-booking-infomation .booking-info .action .button:not(:last-child) {
        margin-bottom: 0;
        margin-right: 8px
    }

    .list-booking-infomation .swiper_button {
        display: none
    }
}

.modal-redirect-to-booking {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 14px
}

.modal-redirect-to-booking .content {
    text-align: center
}

.modal-redirect-to-booking .content .title {
    font-weight: 500;
    font-size: 18px
}

.modal-redirect-to-booking .content>div {
    padding-bottom: 10px
}

.modal-redirect-to-booking .btn {
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px
}

.modal-redirect-to-booking .btn a {
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 20px
}

@media screen and (min-width: 768px) {
    .list-booking-infomation .booking-info .content .item span {
        min-height:26px
    }
}

.skeleton-loading {
    margin: 40px 0
}

.skeleton-loading .loading__banner {
    margin: 15px 0;
    display: block
}

.skeleton-loading .loading__banner .ant-skeleton-avatar {
    width: 100%;
    min-height: 200px
}

.skeleton-loading .loading__media .ant-skeleton-avatar {
    width: 70px;
    height: 70px;
    margin-right: 15px
}

.skeleton-loading .mobile-hide {
    display: none
}

@media screen and (min-width: 768px) {
    .skeleton-loading {
        margin:40px 0
    }

    .skeleton-loading .loading__banner {
        margin: 15px 0 30px
    }

    .skeleton-loading .loading__banner .ant-skeleton-avatar {
        min-height: 300px
    }

    .skeleton-loading .loading__media .ant-skeleton-avatar {
        width: 100px;
        height: 100px
    }

    .skeleton-loading .mobile-hide {
        display: block
    }
}

.home {
    background-color: #fff;
    /* padding: 5px 0px 0px; */
    width: 100%;
}

.home .container {
    max-width: 1200px;
    /* padding: 0 15px; */
    margin: auto;
    width: 100%
}

.popup-banner-home {
    padding: 0
}

.popup-banner-home .ant-modal-content {
    margin: 0 15px;
    border-radius: 5px!important;
    overflow: hidden
}

.popup-banner-home .ant-modal-content .ant-modal-body {
    padding: 0
}

.popup-banner-home .ant-modal-content .ant-modal-close {
    top: 7px;
    right: 7px
}

.popup-banner-home .ant-modal-content .ant-modal-close .ant-modal-close-x {
    width: 30px;
    height: 30px;
    background-color: hsla(0,0%,93.3%,.8);
    border-radius: 50%
}

.popup-banner-home .ant-modal-footer {
    display: none
}

.footer-v3 {
    /* background: linear-gradient(-45deg, #ffeef8, #fff, #fff, #ffeef8); */
    /* font-family: 'URW-DIN-Arabic'; */
    position: relative;
    width: auto;
    /* background: #edf0f3; */
    background: url('../images/footer-eclipse-new.png');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 136px;
}

.footer-v3:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    /* background: rgb(255,255,255); */
    /* background: linear-gradient(-45deg, #A8232E, #DA0530, #DA0530, #a8232d); */
    height: 0px;
    z-index: 1;
    right: 0;
    /* clip-path: ellipse(50% 20% at 50% 50%); */
    box-shadow: 0px 0px 0px 0px;
}

.footer-v3__container {
    padding: 0;
    margin-bottom: 1em;
    max-width: 1200px;
    width: auto;
    margin: auto;
    color: #333;
}

.footer-v3 .float-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 90px;
    right: 25px;
    background: linear-gradient(-45deg, #fabd03, #fabd03, #fabd03, #fabd03);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
    border-radius: 30px;
    z-index: 90;
    /* background: linear-gradient(-45deg, #A8232E, #DA0530, #DA0530, #a8232d); */
    /* background: linear-gradient(-45deg, #ddd, #fff, #ddd, #fff); */
}

.footer-v3 .float-button .icon {
    font-size: 24px;
    color: #fff;
}

.footer-top__column-service {
    padding: 15px;
    display: none
}

.footer-top__column-service .service-time__label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
    /* font-family: 'Playfair Display'; */
    /* font-family: 'Mulish', sans-serif; */
    color: #014258;
}

.footer-top__column-service .service-time__detail {
    font-size: 18px;
    font-family: 'Dosis';
}

.footer-top__column-service .hotline-service__label {
    display: block;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #fabd05;
    text-transform: uppercase
}

.footer-top__column-app {
    display: none;
    color: #222!important;
    padding: 15px
}
.app-info__label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: 'Roboto';
    /* font-family: 'Playfair Display'; */
    color: #ff;
    /* font-family: 'Inspiration'; */
    /* font-family: 'Baloo Tamma 2'; */
    color: #014258;
}

.app-info__detail {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Dosis';
}

.app-badge {
    display: flex;
    margin-top: 30px;
    flex-direction: row
}

.app-badge .badge-item {
    margin-right: 15px;
}

.app-badge .badge-item img {
    max-height: 40px;
}

.social-info,.social-info .app-badge {
    margin-top: 15px;
    /* color: #fff; */
    font-family: 'Be Vietnam Pro';
    justify-content: flex-start;
}

.social-info .app-badge .img_backgroud {
    background: linear-gradient(-45deg, #fff5c4 , #fbc773, #fff5c4, #fff5c4);
    border-radius: 50%;
    display: flex;
    padding: 5px;
    font-size: 1.8em;
    justify-content: space-between;
    /* border: 1px solid #e5a63d; */
    width: 50px;
    height: 50px;
    text-align: center;
}

.social-info .app-badge .img_backgroud i {
    color: #014258;
    max-width: 35px;
    max-height: 35px;
    margin: auto;
}

.footer-top__column-info {
    padding: 15px;
}

.footer-top .footer__info {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 3px
}

.footer-top .footer__info-item {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    /* font-family: 'Mulish', sans-serif; */
    /* font-family: 'Oswald'; */
    font-family: be vietnam pro,sans-serif;
    margin-top: 10px;
}

.footer-top .footer__info-item .info-item__text {
    color: #222 !important;
    font-weight: 300;
    font-size: 16px;
    display: inline-grid;
    /* font-family: 'Mulish', sans-serif; */
    line-height: 1.8em;
    font-family: be vietnam pro,sans-serif;
}

.footer-top .footer__info-item .title {
    font-weight: 500;
    font-size: 16px;
    /* font-family: URW DIN; */
    /* font-family: 'Mulish', sans-serif; */
    font-family: be vietnam pro,sans-serif;
    /* font-family: 'Oswald'; */
    /* color: #222; */
}

.footer-top .footer__logo {
    width: 30%;
    margin-bottom: 12px
}

.footer-top .footer__ca {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;
    height: auto;
}

.footer-top .footer__ca .moit-icon {
    max-height: 60px;
    margin-right: 10px
}

.footer-top .footer__ca .dmca-icon {
    height: 40px
}

.footer-bottom {
    background: #014258;
    padding: 15px;
}

.footer-bottom .copyright {
    display: none
}

.footer-bottom .footer-nav {
    color: #333;
    font-size: 16px;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 10px
}

.footer-bottom .footer-nav__item {
    margin-bottom: 10px
}

.footer-bottom .footer-nav__item a {
    color: #690203;
}

.footer-bottom .footer-nav-social {
    display: block
}

.footer-bottom__app-badge {
    display: flex
}

.footer-bottom__app-badge .badge-item img {
    height: 40px
}

.footer-bottom__app-badge .badge-item:last-child {
    margin-left: 15px
}

.footer-bottom .list-cate{
    color: #690203;
}
.footer-bottom .list-cate a{
    color: #690203;
}



.app-cash {
    display: none;
    margin-top: 15px
}

.app-cash .app-cash__label {
    color: #fff !important;
}

.app-cash .app-cash__list {
    display: flex;
    flex-direction: row;
    align-items: center
}

.app-cash .app-cash__list .app-cash__item {
    margin-right: 20px
}

.footer-hotline {
    padding: 10px 15px
}

.footer-copyright {
    padding: 15px
}

.copyright {
    display: block;
    text-align: center;
    color: #EED982;
    font-size: 14px
}

.social-list {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row
}

.social-list .social-item {
    margin-top: 15px;
    margin-right: 10px
}

.button-hotline {
    border: 1px solid #014258!important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 12px;
    /* background: linear-gradient(-45deg, #fff5c4 , #fbc773, #fff5c4, #fff5c4); */
    /* background: #1D464A; */
}

.button-hotline span {
    color: #014258!important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    margin-left: 10px;
    font-family: 'Dosis';
    /* font-family: 'Mulish', sans-serif; */
}

@media only screen and (min-width: 769px) {
    .app-cash {
        display:block
    }

    .footer-copyright,.footer__logo {
        display: none
    }

    .footer-top {
        display: flex;
        flex-direction: row
    }

    .footer-top__column-app,.footer-top__column-info {
        width: 33%;
        padding: 35px 15px 15px
    }

    .footer-top__column-app {
        display: inline-block;
    }

    .footer-top__column-app .social-info {
        margin-top: 45px
    }

    .footer-top__column-service {
        width: 33%;
        padding: 35px 15px 15px;
        display: inline-block
    }

    .footer-top__column-service .button-hotline {
        padding: 5px;
        margin-top: 26px;
    }

    .footer-top__column-service .button-hotline span {
        font-size: 19px;
    }

    .footer-hotline {
        display: none
    }

    .footer-bottom {
        margin-top: 2rem;
        /* border-top: 1px solid #e77388; */
        display: flex;
        /* background: linear-gradient(-45deg, #A8232E, #DA0530, #DA0530, #a8232d); */
        justify-content: space-between
    }

    .footer-bottom .copyright {
        display: inline-block;
        width: 30%
    }

    .footer-bottom__app-badge {
        display: none
    }

    .footer-bottom .footer-nav {
        width: 70%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center
    }

    .footer-bottom .footer-nav__item>a {
        margin-right: 30px
    }

    .footer-bottom .footer-nav-social {
        display: none
    }

    .social-list .social-item {
        margin-top: 0
    }

    .footer-v3 .float-button {
        bottom: 95px
    }

    .zalo-chat-custom {
        bottom: 165px!important
    }
}

.zalo-chat-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 65px;
    right: 25px;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
    z-index: 90;
    cursor: pointer;
    background-color: #fabd03;
    font-size: 24px
}

.zalo-chat-custom img {
    width: 40px;
    height: 40px
}

.zalo-chat-custom .icon-close {
    transform: scale(1)
}

.show-btn-wrapper {
    width: 0;
    height: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 90
}

.show-btn-wrapper.toggle {
    z-index: 92
}

.show-btn-wrapper .zalo-chat-custom2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 55px;
    position: fixed;
    bottom: 115px;
    right: 15px;
    border-radius: 30px;
    z-index: 89;
    cursor: pointer
}

.show-btn-wrapper .zalo-chat-custom2 div {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    color: #fff;
    margin-right: 10px;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-style: normal;
    line-height: 26px
}

.show-btn-wrapper .zalo-chat-custom2 img {
    width: 48px;
    height: auto
}

.show-btn-wrapper .float-button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 55px;
    position: fixed;
    bottom: 57px;
    right: 71px;
    border-radius: 30px;
    z-index: 90
}

.show-btn-wrapper .float-button2 a {
    flex: 0 0 48px
}

.show-btn-wrapper .float-button2 div {
    width: 100%;
    text-align: right;
    color: #fff;
    margin-right: 10px;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-style: normal;
    line-height: 26px
}

.show-btn-wrapper .float-button2 .icon {
    font-size: 18px;
    color: #000
}

.show-btn-wrapper .float-button2 img {
    width: 48px;
    height: 48px
}

.show-btn-wrapper .float-button3 {
    display: flex;
    position: fixed;
    bottom: -15px;
    right: 110px;
    z-index: 90;
    width: 100%;
    height: 55px;
    justify-content: flex-end
}

.show-btn-wrapper .float-button3 div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    margin-right: 10px;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-style: normal;
    line-height: 26px
}

.show-btn-wrapper .float-button3 .icon {
    font-size: 18px;
    color: #000
}

.show-btn-wrapper .float-button3 .btn-main {
    background: #fc3;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center
}

.zalo-chat-custom-no-active {
    transform: scale(0);
    transform-origin: bottom right
}

.zalo-chat-custom-active,.zalo-chat-custom-no-active {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .3s ease;
    bottom: 70px;
    right: 40px
}

.zalo-chat-custom-active {
    transform: scale(1);
    transform-origin: bottom right
}

.modal-checkbooking {
    color: #000
}

.modal-checkbooking .notfound-booking {
    text-align: center;
    margin-top: 20px
}

.modal-checkbooking .notfound-booking .alert {
    color: #e54d3e
}

.modal-checkbooking .notfound-booking .booking {
    padding: 8px 0;
    cursor: pointer
}

.modal-checkbooking .notfound-booking .booking div {
    color: #000;
    font-weight: 700;
    margin-right: 10px;
    text-decoration: underline;
    display: inline
}

.modal-checkbooking .ant-modal-content {
    box-shadow: 0 4px 8px hsla(0,0%,77.6%,.25);
    border-radius: 4px!important
}

.modal-checkbooking .ant-modal-body {
    padding: 32px
}

.modal-checkbooking .title {
    font-family: Oswald;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase
}

.modal-checkbooking .sub-title {
    margin-top: 24px;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-align: center
}

@media only screen and (max-width: 768px) {
    .modal-checkbooking .ant-modal-body {
        padding:12px 24px
    }

    .modal-checkbooking .title {
        font-size: 20px
    }

    .modal-checkbooking .sub-title {
        margin-top: 12px;
        font-size: 16px;
        text-align: left
    }
}

.modal-checkbooking .ant-modal-title {
    font-size: 20px;
    font-family: Oswald
}

.modal-checkbooking .text {
    margin: 10px 0;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #1b1b1b;
    line-height: 30px
}

.modal-checkbooking .text .link-booking {
    padding: 4px;
    background: #fc3;
    color: #1b1b1b;
    font-weight: 600;
    border-radius: 5px
}

.modal-checkbooking .text .default {
    font-size: 18px;
    font-weight: 300
}

.modal-checkbooking .text .cus_phone {
    font-weight: 400;
    text-transform: capitalize
}

.modal-checkbooking .text .name {
    text-transform: capitalize
}

.modal-checkbooking .box {
    display: flex;
    justify-content: space-between;
    font-size: 20px
}

.modal-checkbooking .box input {
    width: 70%;
    font-size: 18px
}

.modal-checkbooking .box .action-check {
    font-family: Oswald;
    width: 28%;
    background: #fc3;
    color: #fff;
    margin-left: 2%;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    height: 40px;
    color: #111;
    border-radius: 5px
}

.modal-checkbooking .images {
    display: flex;
    justify-content: center
}

.modal-checkbooking .images img {
    cursor: pointer
}

.modal-checkbooking .action {
    padding: 5px;
    display: flex;
    justify-content: center
}

.modal-checkbooking .action a,.modal-checkbooking .action div {
    color: #1b1b1b;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 2px 12px;
    cursor: pointer
}

.modal-checkbooking .action div {
    margin-left: 10px
}

.modal-checkbooking .loading {
    position: absolute;
    left: 40px;
    bottom: 32px;
    background-color: transparent;
    height: 48px;
    display: flex;
    align-self: center;
    align-items: center
}

@media screen and (max-width: 767px) {
    .modal-checkbooking .text {
        font-size:16px
    }

    .modal-checkbooking .text .default {
        font-size: 4vw
    }

    .modal-checkbooking .box input {
        font-size: 16px
    }

    .modal-checkbooking .loading {
        bottom: 12px
    }
}

.input_phone {
    margin-top: 24px;
    width: 100%;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 10px 12px
}

.input_phone .ant-input-prefix:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 49px;
    display: block;
    border-left: 1px solid #d9d9d9;
    transition: all .3s;
    content: ""
}

.input_phone .ant-input-prefix {
    margin-right: 12px
}

.input_phone .icon_phone {
    width: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -12px;
    margin-top: -10px;
    margin-bottom: -10px;
    height: 48px
}

.input_phone .icon_phone img {
    width: 20px;
    height: 20px
}

.input_phone .ant-input {
    font-family: Oswald;
    font-style: normal;
    font-weight: 400;
    font-size: 18px
}

.content_input_phone {
    margin-bottom: 0
}

.content_input_phone .ant-form-item-explain {
    min-height: 0
}

.error_input {
    border: 1px solid red
}

.error_input:focus,.error_input:hover {
    border-color: red!important
}

.error_input.ant-input-affix-wrapper-focused,.error_input:focus {
    box-shadow: 0 0 0 2px rgba(255,77,79,.2)!important
}

@media only screen and (max-width: 768px) {
    .input_phone {
        margin-top:12px
    }
}

.button_booking {
    position: relative;
    margin-top: 16px;
    cursor: pointer
}

.button_booking:hover {
    opacity: .7
}

.button_booking .button {
    font-family: Oswald;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    background: #fc3;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 10px
}

.button_booking .button .button_text {
    text-transform: none;
    font-family: be;
    font-weight: 400;
    font-size: 16px
}

.button_booking .icon_next {
    position: absolute;
    top: 12px;
    right: 16px
}

@media only screen and (max-width: 768px) {
    .button_booking {
        margin-top:12px
    }

    .button_booking .button .button_text {
        font-size: 12px
    }
    .nav-bar__menu {
        position: fixed;
        top: 0;
        bottom: 0;
        background: #014258;
        width: 100%;
        padding: 1rem;
        right: -100%;
        z-index: 99;
    }

    .nav-bar__menu.active {
        right: 0;
        transition: all .3s
    }

    .nav-bar__close {
        display: inline-block;
        background-color: #f7f7f7;
        border-radius: 4px;
        margin: auto;
        position: absolute;
        top: 1.5rem;
        right: 25px
    }
}

.new-header {
    /* background: linear-gradient(-45deg, #EED982, #EED982, #FFFAE6, #fff); */
    /* box-shadow: 0 2px 8px hsla(0,0%,77.6%,.25); */
    /* border-bottom: 1px solid #eee; */
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    position: relative;
    background: #014258;
}
.new-header:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    /* background: #e7be71; */
    /* background: radial-gradient(circle, #DA0530 0%, rgba(255,255,255,1) 100%); */
    height: 12px;
    z-index: 1;
    right: 0;
    clip-path: ellipse(50% 15% at 50% 50%);
}
.new-header__container {
    padding: 0;
    margin: auto;
    max-width: 1200px;
}

.nav-bar {
    /* overflow: hidden; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 0px;
}

.nav-bar__menu {
    position: fixed;
    top: 0px;
    bottom: 0;
    /* background: linear-gradient(-45deg, #fff, #edf0f3, #fff, #edf0f3); */
    /* width: 100%; */
    padding: 0px;
    right: -100%;
    z-index: 9999;
    /* overflow: auto; */
    /* background: #014258; */
    /* backdrop-filter: blur(90px); */
}

.nav-bar__menu.active {
    right: 0;
    transition: all .3s;
}

.nav-bar__close {
    display: inline-block;
    background-color: #f7f7f7;
    border-radius: 4px;
    margin: auto;
    position: absolute;
    top: 1.5rem;
    cursor: pointer;
    right: 10px;
}

.nav-bar__close img {
    padding: 10px
}

.nav-bar__logo {
    display: inline-block;
    margin: 2em 10px 1em 10px;
}

.nav-bar__logo img {
    max-width: 100%;
}

.nav-bar__logo-main img {
    max-height: 100%;
    max-width: 100px;
    /* max-width: 100%; */
    /* position: absolute; */
    z-index: 99;
    top: 0;
    /* background: linear-gradient(-45deg, #fff, #ffeef8, #fff, #ffeef8); */
    /* border-radius: 0px 0px 15px 15px; */
    /* box-shadow: 0px 0px 5px 0px #ddd; */
}

.category__container .nav-bar__logo-main img {
    max-height: 100%;
    max-width: 100px;
    /* max-width: 100%; */
    /* position: absolute; */
    z-index: 99;
    top: 0;
    /* background: linear-gradient(-45deg, #fff, #ffeef8, #fff, #ffeef8); */
    /* border-radius: 0px 0px 15px 15px; */
    /* box-shadow: 0px 0px 5px 0px #ddd; */
    background: #fff;
}
.nav-bar__action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* height: 100%; */
    width: auto;
    float: right;
}

.nav-bar__action .service-time {
    text-align: left;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'URW DIN';
}

.nav-bar__action .service-time__label {
    /* display: block; */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
}

.nav-bar__action .service-time__detail {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

.nav-bar .menu {
    padding-left: 0
}

.nav-bar .menu-item {
    list-style: none;
    box-shadow: 0 0px 3px rgba(0,0,0,.12);
    border-radius: 4px;
    padding-top: 0;
    display: flex;
    align-items: center;
    position: relative;
    line-height: 20px;
    margin: 0 0px 0px;
}

.nav-bar .menu-item-text {
    /* font-family: Montserrat; */
    font-weight: 500;
    /* text-transform: uppercase; */
    font-size: 18px;
    color: #014258;
    /* font-feature-settings: "ss01" on; */
    /* font-family: 'Amatic SC'; */
    /* font-family: 'Mulish', sans-serif; */
    /* font-family: Philosopher; */
    font-family: 'Baloo Chettan 2';
    /* font-family: 'Baloo Tamma 2'; */
}

.nav-bar .menu-item .icon--mb {
    margin-right: 12px;
    width: 24px;
    height: 24px
}

.nav-bar .menu-item.booking {
    display: block
}

.nav-bar .menu a {
    display: flex;
    align-items: center;
    padding: 0.6em 0.6em;
    /* width: 100%; */
    /* position: relative; */
}

.nav-bar .menu a:after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    /* background-image: url(../images/chevronRight.5746f99f.svg); */
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px
}

.nav-bar .menu-action {
    padding: 0 10px
}

.nav-bar .menu-action__button {
    display: inline-block;
    background-color: #fc3;
    border-radius: 4px;
    color: #000;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    font-family: Oswald;
    padding: .6rem;
    width: 100%
}

.menu-button {
    margin-left: 10px;
    font-size: 1.3em;
    backdrop-filter: blur(100px);
    background: antiquewhite;
    padding: 5px;
    border-radius: 28px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 3px;
}

.booking-button {
    /*font-family: Oswald;*/
    border: 1px solid #000;
    border-radius: 5px;
    flex-direction: row;
    justify-content: center;
    padding: 2px 12px;
    display: none;
    font-family: URW-DIN-Arabic,sans-serif;
}

.booking-button span {
    white-space: nowrap;
    text-transform: uppercase;
    margin-left: 8px;
    font-size: 16px;
    color: #000
}

.login-button {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 2px 12px;
    margin-left: 15px;
    cursor: pointer
}

.login-button span {
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    margin-left: 8px;
    font-size: 14px;
    color: #270100;
}

.login-button img {
    width: 16px
}

.nav-bar__hotine {

margin: 5px 5px;
}

.hotline-button {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0px 7px;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    margin-left: 5px;
}

.hotline-button span {
    /* font-weight: 700; */
    white-space: nowrap;
    text-transform: uppercase;
    margin-left: 0px;
    font-size: 12px;
    color: #a8232d;
    font-family: 'URW DIN';
}

.hotline-button img {
    width: auto;
}

.booknow-button {
    /* background: linear-gradient(-45deg, #fff5c4 , #fbc773, #fff5c4, #fff5c4); */
    border: 1px solid #014258c;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 2px 6px;
    cursor: pointer;
    background: #014258;
    color: #fff;
}

.booknow-button span {
    font-weight: 700;
    white-space: nowrap;
    text-transform: initial;
    margin-left: 0px;
    font-size: 16px;
    color: #fff5c4;
    font-family: 'Baloo Chettan 2';
}

.booknow-button img {
    width: 16px
}

.menu-topup {
    font-family: URW-DIN-Arabic,sans-serif;
    color: #111
}

.menu-topup,.menu-topup .ant-dropdown-menu-item,.menu-topup .ant-dropdown-menu-submenu-title {
    font-weight: 300
}

@media only screen and (min-width: 1025px) {
    .login-button {
        background-color: gold;
        font-family: Oswald;
        border-color: transparent
    }

    .login-button span {
        font-size: 16px
    }

    .login-button img {
        width: 22px
    }

    .booking-button {
        display: flex
    }

    .nav-bar__logo-main {
        width: auto;
        padding: 0px 1em 0px 1em;
    }

    .nav-bar__menu {
        width: auto;
        position: initial;
        /* transition: none; */
        left: 0;
        /* margin-left: 0px; */
        /* z-index: 999; */
        /* position: relative; */
        margin: 0px 0px;
    }

    .nav-bar .menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0em;
        margin: 0px;
        list-style-type: none;
        position: relative;
        height: 100%;
    }

    .nav-bar .menu .menu-item {
        box-shadow: none;
        margin: 0;
        padding: 0px 3px;
    }

    .nav-bar .menu .menu-item .icon--mb {
        display: none
    }

    .nav-bar .menu .menu-item a {
        font-size: 16px;
        padding: 5px 10px;
    }

    .nav-bar .menu .menu-item a:after {
        content: none
    }

    .menu-action,.menu-button,.nav-bar .menu .lucky-wheel,.nav-bar .menu .menu-item.booking,.nav-bar__close,.nav-bar__logo {
        display: none
    }
}

.modal-form-login {
    color: #000
}

.modal-form-login .ant-modal-header {
    text-align: center;
    border: none;
    padding: 0
}

.modal-form-login .ant-modal-header .ant-modal-title {
    font-size: 24px;
    padding-top: 24px
}

.modal-form-login .ant-modal-header .ant-modal-title span {
    display: block;
    padding-top: 10px
}

.modal-form-login .ant-input-affix-wrapper:focus {
    box-shadow: none
}

.modal-form-login .ant-input-affix-wrapper:hover {
    border-right-width: 2px!important
}

.modal-form-login .ant-input-affix-wrapper-focused {
    box-shadow: none;
    border-right-width: 2px!important
}

.modal-form-login .ant-input-affix-wrapper-focused:hover {
    border-right-width: 2px!important
}

.modal-form-login .ant-modal-content {
    border-radius: 4px!important
}

.modal-form-login .form-login {
    color: #111;
    max-width: 400px;
    margin: auto;
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.modal-form-login .form-login .header-form {
    font-size: 16px;
    margin-bottom: 25px;
    text-align: center
}

.modal-form-login .form-login .btn-back button {
    margin-top: 20px;
    height: 32px;
    font-size: 15px
}

.modal-form-login .form-login input {
    font-size: 15px;
    height: 48px;
    border-radius: 4px;
    border: 2px solid #a3a3a3;
    color: #222
}

.modal-form-login .form-login input:focus {
    box-shadow: none;
    border-right-width: 2px!important
}

.modal-form-login .form-login input:hover {
    border-right-width: 2px!important
}

.modal-form-login .form-login .ant-input-password {
    border-radius: 4px;
    border: 2px solid #a3a3a3;
    padding: 0
}

.modal-form-login .form-login .ant-input-password input {
    padding: 0 11px;
    height: 44px;
    border: none
}

.modal-form-login .form-login .ant-input-password input:focus {
    box-shadow: none
}

.modal-form-login .form-login .ant-input-password .ant-input-suffix {
    padding-right: 11px;
    color: #5f5f5f
}

.modal-form-login .form-login .forgot-password {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: right;
    text-decoration: underline
}

.modal-form-login .form-login .forgot-password span {
    cursor: pointer
}

.modal-form-login .form-login .content-otp {
    text-align: center
}

.modal-form-login .form-login .content-otp .error__message {
    margin: -15px 0 0;
    padding: 0
}

.modal-form-login .form-login .text {
    font-size: 16px;
    text-align: center;
    margin: 0 20px 20px
}

.modal-form-login .form-login .text .text__phone {
    margin-bottom: 15px;
    font-weight: 600
}

.modal-form-login .form-login .login-form-button {
    width: 100%;
    border-radius: 4px;
    height: 48px;
    font-family: Oswald;
    font-size: 18px;
    margin-top: 5px
}

.modal-form-login .form-login .button-register {
    text-align: center;
    font-size: 14px;
    margin-top: 15px
}

.modal-form-login .form-login .button-register button {
    background-color: transparent;
    color: #000;
    border: none;
    box-shadow: none
}

.modal-form-login .form-login .button-register button span {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    font-weight: 600
}

.modal-form-login .form-login .input-otp>div {
    justify-content: space-between
}

.modal-form-login .form-login .input-otp input {
    width: 48px!important;
    height: 48px;
    border: 2px solid #a3a3a3;
    border-radius: 4px;
    color: #222;
    font-size: 16px;
    margin-bottom: 16px
}

.modal-form-login .form-login .sendOTP {
    margin-bottom: 25px;
    font-size: 14px
}

.modal-form-login .form-login .sendOTP__count {
    color: #e54d3e
}

.modal-form-login .form-login .sendOTP__resend {
    margin-left: auto;
    text-decoration: underline;
    cursor: pointer
}

.modal-form-login .form-login .error__message {
    color: #ff4d4f;
    font-size: 12px;
    margin: -20px 0 0;
    padding-left: 5px
}

.modal-form-login .form-login .input__birthDay {
    box-shadow: none;
    width: 100%;
    border-radius: 4px;
    border: 2px solid #a3a3a3;
    color: #222;
    border-right-width: 2px!important;
    padding: 4px 11px;
    height: 48px
}

.modal-form-login .form-login .input__birthDay input {
    border: none
}

.modal-form-login .form-login .button__back {
    background-color: transparent;
    border: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    height: auto
}

.modal-form-login .form-login .form__validate .ant-form-item-explain {
    font-size: 12px;
    padding-left: 5px;
    display: flex;
    align-items: center
}

.modal-form-login .form-login .form__validate .ant-form-item:last-child {
    margin-bottom: 0
}

.modal-form-login .form-login .form__validate .ant-form-item-has-error .ant-input-password,.modal-form-login .form-login .form__validate .ant-form-item-has-error .input__birthDay,.modal-form-login .form-login .form__validate .ant-form-item-has-error input {
    border-color: #ff4d4f
}

.form-login-V2 .form__text {
    text-align: center;
    margin-bottom: 30px
}

.form-login-V2 .form__getPassword {
    font-size: 14px;
    margin-bottom: 25px;
    padding: 0;
    text-align: right
}

.form-login-V2 .form__getPassword span {
    cursor: pointer;
    text-decoration: underline
}

.form-login-V2 .form__input {
    margin-bottom: 25px
}

.form-login-V2 .form__input-pin {
    margin-bottom: 0
}

.form-login-V2 .form__input-pin>div {
    justify-content: space-between
}

.form-login-V2 .form__input-pin input {
    width: 48px!important;
    margin-bottom: 25px
}

.form-login-V2 .form__button {
    width: 100%;
    border-radius: 4px;
    height: 48px;
    font-family: Oswald;
    font-size: 18px
}

.form-login-V2 .form__message {
    color: #e54d3e;
    font-size: 12px;
    margin-top: -20px;
    padding: 0 5px 5px
}

.form-login-V2 .sendOTP {
    margin-bottom: 25px;
    font-size: 14px
}

.form-login-V2 .sendOTP__count {
    color: #e54d3e
}

.form-login-V2 .sendOTP__resend {
    text-decoration: underline;
    cursor: pointer
}

.form-login-V2 .sendOTP__resend.hide {
    cursor: default;
    text-decoration: none;
    padding-right: 5px;
    color: #a3a3a3
}

.form-login-V2 input {
    height: 48px;
    border-radius: 4px;
    border: 2px solid #a3a3a3;
    color: #222
}

.form-login-V2 input::-webkit-input-placeholder {
    color: #a3a3a3
}

.form-login-V2 input:-ms-input-placeholder {
    color: #a3a3a3
}

.form-login-V2 input::-ms-input-placeholder {
    color: #a3a3a3
}

.form-login-V2 input::placeholder {
    color: #a3a3a3
}

.form-login-V2 input:focus {
    box-shadow: none
}

.form-login-V2 input:focus,.form-login-V2 input:hover {
    border-right-width: 2px!important;
    border-color: #a3a3a3
}

.form-login-V2 .btn-back {
    position: absolute;
    top: 20px;
    width: 32px;
    height: 32px;
    background: #e5e5e5;
    display: flex;
    justify-content: center;
    border-radius: 50%
}

.form-login-V2 .btn-color-skip {
    border: 2px solid #000;
    border-radius: 4px;
    margin-right: 18px;
    background: #fff;
    color: #222
}

.ShineMember2020v3 {
    background-color: #fff
}

.ShineMember2020v3 .sm-v3__header {
    background-color: #fffdeb;
    box-shadow: 0 4px 8px hsla(0,0%,77.6%,.25);
    position: relative
}

.ShineMember2020v3 .sm-v3__header .button-back {
    z-index: 1;
    position: absolute;
    top: 15px;
    left: 15px;
    cursor: pointer
}

.ShineMember2020v3 .sm-v3__header .button-back img {
    width: 40px;
    height: 40px
}

.ShineMember2020v3 .sm-v3__content {
    padding: 15px
}

.ShineMember2020v3 .sm-v3__title {
    font-family: Oswald;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.ShineMember2020v3 .sm-v3__desc {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 16px;
    margin-top: 10px
}

.ShineMember2020v3 .sm-v3__media {
    width: 100%;
    margin-top: 40px;
    padding: 15px
}

.ShineMember2020v3 .sm-v3__tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px
}

.ShineMember2020v3 .sm-v3__tabs .tab__item {
    flex: 1 1;
    padding: 15px;
    cursor: pointer
}

.ShineMember2020v3 .sm-v3__tabs .tab__item.active {
    border-bottom: 4px solid #000
}

.ShineMember2020v3 .sm-v3__tabs .tab__item.active .tab-item__icon {
    background-color: #000;
    transition: all .3s
}

.ShineMember2020v3 .sm-v3__tabs .tab__item.active .tab-item__title {
    color: #000;
    transition: all .3s
}

.ShineMember2020v3 .sm-v3__tabs .tab__item .tab-item__icon {
    display: inline-block;
    padding: 10px;
    background-color: #f0b000;
    width: 40px;
    height: 40px;
    border-radius: 20px
}

.ShineMember2020v3 .sm-v3__tabs .tab__item .tab-item__title {
    font-family: Oswald;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 10px;
    color: #a3a3a3
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action {
    background-color: #000;
    margin: 15px;
    border-radius: 4px;
    padding: 15px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .action {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 0
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .action__desc {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    color: #fff;
    font-size: 12px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .action__price {
    font-family: Oswald;
    color: #fc3
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn {
    background-color: #fc3;
    text-align: center;
    font-family: Oswald;
    font-size: 18px;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    padding: 8px 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn img {
    margin-right: 10px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn .anticon {
    margin-right: 5px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn:before {
    position: absolute;
    inset: -1px;
    z-index: 1;
    display: none;
    background: #fff;
    border-radius: inherit;
    opacity: .35;
    transition: opacity .2s;
    content: "";
    pointer-events: none
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn.button-loading {
    pointer-events: none
}

.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn.button-loading:before {
    display: block
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo {
    padding: 0 15px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__title {
    font-family: Oswald;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__list {
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item {
    width: 100%;
    display: block;
    border-radius: 4px;
    padding-bottom: 20px;
    display: flex
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .icon {
    width: 15%;
    text-align: center;
    padding: 12px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .icon-bg {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 25px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content {
    width: 85%;
    padding: 8px 15px;
    margin: 0
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content__header {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 600;
    color: #000;
    font-size: 14px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content__detail {
    margin-top: 8px
}

.ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content__detail p {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #5f5f5f
}

.confirm-buy-shine-member {
    max-width: 100%
}

.confirm-buy-shine-member .ant-modal-body {
    padding: 16px
}

.confirm-buy-shine-member .ant-modal-content {
    margin: 0 15px;
    border-radius: 6px!important
}

.confirm-buy-shine-member .ant-modal-confirm-content {
    text-align: center
}

.confirm-buy-shine-member .ant-modal-confirm-body>.anticon+.ant-modal-confirm-title+.ant-modal-confirm-content {
    margin-left: 0
}

.confirm-buy-shine-member .ant-modal-confirm-body .ant-modal-confirm-title {
    text-align: center
}

.confirm-buy-shine-member .ant-modal-confirm-btns .ant-btn-primary {
    background-color: #fc3;
    border-color: #fc3;
    color: #000
}

.confirm-buy-shine-member .ant-modal-confirm-btns {
    text-align: center;
    float: inherit
}

.confirm-buy-shine-member .ant-modal-confirm-btns .ant-btn {
    border-radius: 4px;
    min-width: 80px;
    text-transform: uppercase;
    font-family: oswald;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 4px 0 rgba(99,99,99,.2)
}

.confirm-buy-shine-member .ant-modal-confirm-btns .ant-btn:hover {
    color: #000;
    opacity: .8
}

.confirm-buy-shine-member .icon {
    background-color: #fc3;
    margin: 0 auto 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.confirm-buy-shine-member .anticon.anticon-notification {
    color: #fc3;
    display: block;
    float: inherit;
    margin-bottom: 5px
}

@media screen and (min-width: 768px) {
    .ShineMember2020v3 .sm-v3__header .content {
        max-width:1200px;
        margin: auto
    }

    .ShineMember2020v3 .sm-v3__tabs {
        max-width: 500px;
        margin-top: -50px
    }

    .ShineMember2020v3 .sm-v3__content {
        max-width: 424px
    }

    .ShineMember2020v3 .sm-v3__media {
        padding: 30px
    }

    .ShineMember2020v3 .sm-v3__shine .content {
        max-width: 1200px;
        margin: auto
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn,.ShineMember2020v3 .sm-v3__shine .content .shine__action .shine-btn:before {
        max-width: 300px
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__action .action__desc {
        font-size: 16px
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__action .action__price {
        font-size: 20px
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__list {
        justify-content: flex-start
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item {
        width: 33.33%
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content__header {
        font-size: 16px
    }

    .ShineMember2020v3 .sm-v3__shine .content .shine__promo .promo__item .content__detail p {
        font-size: 14px
    }
}
@media screen and (max-width: 768px) {

    .nav-bar__logo-main img {
        max-height: 130px;
        max-width: 100%;
        padding: 0px 8px 0px 6px;
    }
    .booknow-button {
        background: linear-gradient(-45deg, #fff, #fff, #fff, #fff);
        border: 1px solid #014258;
        border-radius: 5px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        padding: 2px 10px;
        cursor: pointer;
        color: #014258;
        margin-left: 5px;
    }
    .booknow-button span {
        font-weight: 700;
        white-space: normal;
        text-transform: math-auto;
        margin-left: 0px;
        font-size: 16px;
        color: #014258;
        /* font-family: 'URW-DIN-Arabic'; */
        /* font-family: 'Mulish', sans-serif; */
        display: inherit;
        font-family: be vietnam pro,sans-serif;
    }

    .footer-bottom__icon-app{
        /* background: linear-gradient(-45deg, #A8232E, #DA0530, #DA0530, #a8232d); */
        display: flex !important;
        justify-content: space-around;
        padding: 15px 0 0;
        position: fixed;
        bottom: 0px;
        width: 100% !important;
        z-index: 20;
        box-shadow: 4.76712px -1.19178px 5.9589px rgba(250,150,94,.15);
        background: rgb(255, 255, 255, 0.95);
        /* border-top: 1px solid #DA0530; */
        border-radius: 30px;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        top: unset !important;
        right: unset !important;
    }
    .footer-bottom__icon-app .icon_detail{
        /* background: linear-gradient(-45deg, #ddd, #fff, #ddd, #fff); */
        color: #e80003;
        display: block;
        text-align: center;
        align-content: center;
        line-height: 1.5;
        font-size: 18px;
        color: #222;
        margin-bottom: 5px;
        padding: 0 10px 5px;
    }
    .footer-bottom__icon-app .icon_detail span{
        width: auto;
        display: block !important;
        font-size: 0.6em;
        margin-top: 5px;
    }

}
.footer-bottom__icon-app{
    display: grid;
    /* background: #edf0f3; */
    padding: 0;
    z-index: 999;
    cursor: pointer;
    padding: 15px 0 0;
    position: fixed;
    right: 5px;
    box-shadow: 4.76712px -1.19178px 5.9589px #edf0f3;
    border-radius: 5px;
    margin: auto;
    top: 45%;
    backdrop-filter: blur(10px);
}
.footer-bottom__icon-app .icon_detail{
    /* background: linear-gradient(-45deg, #ddd, #fff, #ddd, #fff); */
    color: #e80003;
    display: block;
    align-content: center;
    line-height: 1.5;
    font-size: 18px;
    color: #222;
    margin-bottom: 5px;
    padding: 0 10px 5px;
    text-align: center;
    align-items: center;
}
.footer-bottom__icon-app .icon_detail span{
    width: auto;
    display: none;
    font-size: 0.6em;
    margin-top: 5px;
}
.footer-bottom__icon-app .icon_detail img{
    width: 39px;
    height: 39px;
    margin: auto;
}
.container {
    max-width: 1200px;
    margin: 0 auto
}

.shinemember {
    font-family: URW-DIN-Arabic,sans-serif;
    font-weight: 300
}

.shinemember__button {
    text-align: center;
    color: #98750a;
    font-weight: 700;
    width: 100%;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    cursor: pointer
}

.shinemember__button:hover {
    background-color: #98750a;
    color: #fff
}

.shinemember .text-silver {
    background: linear-gradient(90deg,#4a4a4a,#b5b5b5 42.19%,#cdcdcd 57.81%,#4a4a4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.shinemember .text-gold {
    background: linear-gradient(90deg,#816000,#d9b342 42.19%,#fc3 57.81%,#816000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bg-FFFDEB {
    background-color: #fffdeb
}
/*location core*/

.location_core{

}
.location_core .blog{
    position: relative;
}
.location_core .blog .blog__title{
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: linear-gradient(-45deg, #ffeef8, #fff, #ffeef8, #ffeef8);
    color: #e77388;
    padding: 1em;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
/*partnert*/

.partner {
    display: flex;
    padding: 0;
    flex-direction: column;
}
.partner .swiper-slide{
    width: auto;
}
.partner .blog{
    display: flex;
    width: calc(100%/7);
    cursor: pointer;
    height: 120px;
    /* margin: 5px; */
    display: flex;
    padding: 5px;
    width: 157px;
    align-items: center;
    /* border-radius: 10px; */
    justify-content: center;
    flex-wrap: wrap;
}

.partner .blog .blog__media{
    cursor: pointer;
    margin: 8px;
    display: flex;
    padding: 10px;
    align-items: center;
}
.partner .blog .blog__media img{
    width: auto;
    height: auto;
    position: relative;
}
/*layout service*/
.layout-service{
    background: url('../images/line-decor.png') #fff;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 92px;
    margin-bottom: 1em;
    margin: 0px 0px 1em 0em;
}
.layout-service .layout__head .head__title{

}
.layout-service{

}
.layout-service{

}

/*layout-blog*/
.layout-blog{
    background-repeat: no-repeat;
    background-position: top center;
    padding: 1em 0 1em 0;
    margin: 0px;
}
.layout-blog .layout__head .head__title{

}
.layout-blog{

}
.product_background_color{
    background:#f2f2f2;
}

.nav-bar-top{
    padding: 5px 15px;
    height: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.nav-bar__hotine_top{
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    /* align-items: center; */
    padding: 0;
    margin: 0px 10px 0px 0px;
    list-style-type: none;
    font-weight: bold;
}
.nav-bar__top_menu{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    /* padding: 0; */
    /* margin: 0; */
    /* list-style-type: none; */
    width: 100%;
}
.hotline_text{
    color: #333;
    font-size: 15px;
}
.background_top_header{
    background: radial-gradient(circle, #e1b93f 0%, #fae5bf 100%);
}

.content__description{
    line-height: 1.55;
    margin-bottom: 15px;
    justify-content: space-between;
    text-align: justify;
    font-size: 16px;
}
.moreless-button{
    color: #333;
    display: inline-block;
    margin-bottom: 15px !important;
}

.footer-bottom__icon-app .icon_detail .arcu-item-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0084ff;
    margin-right: 10px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}
.box_search {
    position: relative;
    z-index: 90;
    width: 100%;
}

.box_search input {
    width: 100%;
    color: #C69E4F;
    font-size: 15px;
    font-weight: 400;
    padding: 7px 70px 8px 10px;
    box-sizing: border-box;
    border-radius: 10px 10px 10px 10px;
    outline: none;
    background: #fff !important;
}
.box_search button {
    cursor: pointer;
    border: none;
    position: absolute;
    top: 0px;
    right: 0;
    height: 100%;
    width: 55px;
    /* background: linear-gradient(-45deg, #fff5c4 , #fbc773, #fff5c4, #fff5c4); */
    /* background: #F5C116; */
    border-radius: 0px 10px 10px 0px;
    background: #e7be71;
}
.box_search button i {
    color: #1D464A;
    font-size: 18px;
}

.box_right_header  {
    display: flex;
    justify-content: left;
    align-items: center;
}
.box_right_header i {
    display: block;
    color: #e7be71;
    font-size: 20px;
    margin-bottom: 3px;
    position: relative;
    display: inline;
}

.box_right_header a {
    font-size: 12px;
    color: #603a16;
    line-height: 1.5;
}

.box_cart, .box_like, .box_user {
    text-align: center;
    position: inherit;
    align-items: center;
    display: flex;
}

.box_cart .cart_qty {
    background: #fff;
    width: 20px;
    height: 20px;
    /* color: #1D464A; */
    font-size: 10px;
    border-radius: 100%;
    font-weight: 600;
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    padding-top: 3px;
    color: #DA0530;
    box-sizing: border-box;
}
.box_cart p {
    margin: 0px;
    font-size: 12px;
    color: #fff;
    min-width: 52px;
}


.box_suggest {
    margin-top: 10px;
}

.box_search a {
    font-size: 13px;
    display: inline-block;
    margin-right: 5px;
}
.cart{
    display: flex;
    justify-content: space-between;
    margin: auto;
    height: 100%;
    align-items: center;
    background: #014258;
    border-radius: 38px;
    padding: 8px 8px 6px 6px;
    margin-right: 5px;
}

.checkcode-button {
    background: linear-gradient(-45deg, #EED982 , #EED982, #EED982, #EED982);
    /* border: 1px solid #1D464A; */
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 3px;
    cursor: pointer;
    text-align: center;
    line-height: 0.8;
    background: #e7be71;
    color: #1D464A;
    /* font-size: 16px; */
    font-weight: 600;
    font-family: 'Baloo Chettan 2';
}
.checkcode-button span{
    color: #014258;
    font-weight: 500;
    font-family: 'Roboto';
    font-size: 11px;
    padding-left: 3px;
    min-width: 78px;
    display: block;
    line-height: 1.2;
    text-align: left;
}

.checkcode-button i{
    color: #014258;
    /* width: 100%; */
    text-align: center;
    font-size: 23px;
    align-items: center;
    float: left;
    padding: 3px;
}
/*Category Top*/
.category{
    /* background: linear-gradient(-45deg, #fff, #ffeef8, #ffeef8, #fff); */
    box-shadow: 0 2px 8px hsla(0,0%,77.6%,.25);
    background: #e7be71;
    z-index: 9999;
    /* backdrop-filter: blur(90px); */
    position: relative;
    overflow: visible;
}
.category .category__container {
    max-width: 1200px;
    width: 100%;
    /* padding: 0px 5px; */
    margin: auto;
    color: #000;
    position: relative;
}

.category-detail .category__head {
    box-shadow: 0 4px 8px hsla(0,0%,77.6%,.25);
    display: flex;
    background-color: #e7be71;
    position: absolute;
    min-width: 35%;
    z-index: 90;
    top: 40px;
    display: none;
    border-radius: 6px;
    /*padding: 0px 10px 0px 10px;*/
}

.category-detail:hover .category__head {
    box-shadow: 0 4px 8px hsla(0,0%,77.6%,.25);
    /* display: flex; */
    background-color: #e7be71;
    position: absolute;
    min-width: 35%;
    z-index: 90;
    top: 2.9em;
    display: inline-block;
    border-radius: 0px 0px 6px 6px;
    /*padding: 0px 10px 0px 10px;*/
}

.category-detail::hover .category__head .head__buttonBack .button {
    cursor: pointer;
    background: #f7f7f7;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center
}

.category-detail .category__head .head__buttonBack .button img {
    width: 24px
}

.category-detail .category__head .head__title {
    font-family: 'Baloo Chettan 2';
    font-size: 10px;
    /* text-align: center; */
    flex: 1 1;
    color: #014258;
    /* width:auto; */
}

.category-detail .category__head .head__title a {
    color: #014258;
    font-size: 16px;
    font-weight:600;
    border-bottom: 1px solid #f7f7f7;
    padding: 10px;
    display: block;
}

.category-detail::hover .category__head .head__button {
    display: flex;
    margin: 0 -6px
}

/*End Category Top*/

/*breadcrumbs*/
.breadcrumbs{

z-index: 0;

position: relative;
}
.breadcrumbs .breadcrumb-item{z-index: 1;}
.breadcrumbs .breadcrumb-item li{
    background: none;
    font-size: 14px;
    display: initial;
    color: #3b1417;
    padding: 5px 0px;
    border-radius: 22px;
    box-shadow: none;
    font-family: 'Roboto';
}
.breadcrumbs .breadcrumb-item li i{
    font-size: 8px;
    color: #4d6f1b;
    margin-left: 3px;
    margin-right: 3px;
}
.breadcrumbs .breadcrumb-item a{
    color: rgba(0, 0, 0, 0.9);
}

.top_product_des_price_sale {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 0;
    color: #ff0000;
    margin: 0px 0px 0px 0px;
}

.top_product_des_price {
    /* font-family: 'Baloo Chettan 2'; */
    font-size: 16px;
    color: #767676;
    margin-bottom: 0;
    margin-right: 8px;
    /* margin-top: 10px; */
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through
}
.unit{
    color: #111;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0px;
    width: 50%;
    border-radius: 8px;
    /* margin-top: 0.5em; */
}
.code{
    color: #222;
    font-size: 13px;
    font-weight: 400;
    padding: 0px;
    /* width: 50%; */
    overflow: hidden;
    max-height: 49px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.catelogy{

}

.catelogy .treeMenu{
    border: 1px solid #edf0f3;
    /* padding: 0.6em; */
    border-radius: 10px;
    background: linear-gradient(-45deg, #fff, #fff, #fff, #fff);
}

.catelogy .treeMenu li{
    width: 100%;
    font-size: 1em;
    display: block;
    position: relative;
    padding: 0em 0em 0.5em 0em;
    /* border-bottom: 1px solid #eee; */
    line-height: 2;
    align-items: center;
    justify-content: center;
}

.catelogy .treeMenu h3{
    font-size: 1.1em;
    /* margin: 0px; */
    border-bottom: 1px solid #edf0f3;
    padding-bottom: 0.5em;
    background: #edf0f3;
    padding: 0em 0.5em 0 0.5em;
    border-radius: 10px 10px 0px 0px;
    /* border-bottom: 1px solid #1D464A; */
    color: #1D464A;
}

.catelogy .treeMenu li a{
    /* color: rgba(0, 0, 0, 1); */
    font-weight: 500;
    padding-left: 0.5em;
    color: #1D464A;
}

.catelogy .treeMenu li .fa-angle-down{
    top: 0.2em;
    position: absolute;
    right: 5px;
    background: #F5C116;
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 0.8em;
}

.catelogy .treeMenu li .fa-caret-right{
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.6em;
}

.catelogy .treeMenu li .treeChildren{
    width: 100%;
    /* display: block; */
    /* padding-left: 1em; */
    background: linear-gradient(-45deg, #eee, #eee, #fff, #fff);
    margin-top: 0.8em;
    border-radius: 0px;
    /* padding-bottom: 0.3em; */
}

.catelogy .treeMenu li .treeChildren li {
    width: auto;
    /* background: linear-gradient(-45deg, #edf0f3, #edf0f3, #edf0f3, #edf0f3); */
    /* border-radius: 10px; */
    padding: 0.2em 0em 0.2em 1em;
    /* box-shadow: 0px 0px 1px; */
}

.catelogy .treeMenu li .treeChildren a{
    /* color: rgba(0, 0, 0, 1); */
    font-size: 1em;
    color: #1D464A;
}

.page_nav{
    
} 

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    margin-left: 1em;
}

.pagination li{
    display: inline;
    
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #363636;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 5px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #1D464A;
    border: 1px solid #1D464A;
    margin-left: -1px;
    border-radius: 25px;
    min-width: 35px;
    min-height: 35px;
    text-align: center;
    backdrop-filter: blur(10px);
    background: none;
    margin-right: 5px;
}
.page_nav .pagination .active{
    background: #1D464A;
    color: #fff;
}
.page_nav .pagination .active a{
    background: #1D464A;
    color: #fff;
}
.page_nav .pagination .thenativePaginationStart {

}
.page_nav .pagination .pagination_previous{
}
.page_nav .pagination .pagination_next{

}

.popup_hidden{
    display: none !important;
}
.popup_show{
    display: flex !important;
}
.background_popup_show{
    background: rgba(0, 0, 0, .6);
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.box-popup-cart {
    width: auto;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 3.5em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 99;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.box-popup-cart .panel-default > .panel-heading {
    color: #014258;
    /* background-color: #014258; */
    border-color: #ddd;
    font-size: 16px;
    padding: 6px;
    border-bottom: 1px solid #014258;
    font-weight: 500;
}
.panel-body {
    padding: 6px;
    color: #014258;
}
.panel {
    /* margin-bottom: 20px; */
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    backdrop-filter: blur(100px);
}
.close {
    float: right;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #014258;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    /* opacity: .2; */
    width: 25px;
    height: 25px;
    background: #ccc;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}
.minicar-body {
    display: grid;
    grid-template-columns: 86px auto;
    grid-gap: 10px;
}
.minicar-content {
    font-size: 12px;
    color: #777;
}
.minicar-content {
    font-size: 12px;
    color: #777;
}
.payment-popup {
    margin: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.payment-popup {
    margin: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.itemCart{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 5px 0px;
}
.itemCart .image{
    display: inline-flex;
    width: 20%;
    justify-content: space-around;
}
.itemCart .info{
    display: flex;
    width: 80%;
}
.itemCart .detail{
    justify-content: space-between;
    margin: 0px 10px;
    width: 100%;
}
.itemCart .itemTitle{
    font-size: 12px;
}
.itemCart .itemPrice{
    float: left;
}
.itemCart .itemPrice .price{
    color: #da2128;  
    font-size: 15px;
    margin: 0px 5px;
    font-weight: 500;
}

.itemCart .itemPrice .qty{
    font-weight: 500;
    font-size: 14px;
    color: #333;
}
.justAddedTotal{
    color: #333;
    text-align: right;
    font-weight: 500;
    padding-top: 1em;
}
.justAddedPrice{
    color: #e80003;
    font-weight: 500;
}
.miniCartButtons{
    /* background: #fff; */
    padding: 0.5em 0;
    border-top: 1px solid #014258;
}
.btn-popup-goto-cart{
    /* color: #014258; */
    padding: 0.5em;
    margin: auto;
}
.miniCart{  
    max-height: 260px;
    overflow-y: scroll;
}
.removeCart{
    color: #333;
    font-size: 10px;
    margin-left: 5px;
}
.layout__list .list_item_product {
    padding: 12px 0px 12px 20px;
    display: flex;
    align-items: center;
    position: relative;
}