/*
Theme Name: Tokyo-SuShi
Description: This is a child theme for Flatsome Theme
Author: ThietKeWebChuyen.Com
Template: flatsome
Version: 3.0
*/

:root{
    --button-size:38px;
    --width-btn-submit: 70px;
    --width-checkbox:22px;
    --size-text-search-placeholder-desktop:13px;
    --size-text-search-placeholder-mobile:8px;
    --size-text-search-line-height-mobile:11px;
}


/* fonts */
@font-face {
    font-family: 'Valky';
    src: url("fonts/Valky.otf") format("opentype");
}
.fonts_Valky{
    font-family: 'Valky';
}

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
background: #888; 
}
::-webkit-scrollbar-thumb:hover {
background: #555; 
}



/* header */
#masthead .header-nav{
    display: block;
}
#masthead .header-nav .menu-item{
    width: 25%;
    margin: 0px;
    padding: 0px;
    float: left;
}
#masthead .header-nav .menu-item > a{
    display: block;
    padding: 7px 0px;
    font-weight: normal;
}


.flex-col.flex-right{
    width: 30%;
}
.header-nav.nav-right > li{
    margin: 0px;
    display: block;
    padding: 0px;
    text-align: right;
}
.header-nav.nav-right > li a{
    background: transparent !important;
}


.search-field::-webkit-input-placeholder{
    font-style: italic;
    font-size: var(--size-text-search-placeholder-desktop)
 }
.search-field:-moz-placeholder{
    font-style: italic;
    font-size: var(--size-text-search-placeholder-desktop)
}
.search-field::-moz-placeholder {
    font-style: italic;
    font-size: var(--size-text-search-placeholder-desktop)
}
.search-field:-ms-input-placeholder {
    font-style: italic;
    font-size: var(--size-text-search-placeholder-desktop)
}
.Blockslider .text-1 p{
    margin: 0px;
    font-size: 68px;
}
.Blockslider .col{
    padding-bottom: 10px;
}
.Blockslider .text-2 p{
    line-height: 15px;
}
.Blockslider .tabsSearch li.active > a{
    background-color: white !important;
    color: black !important;
}
.Blockslider .tabsSearch li:first-child > a{
    padding: 0px 15px;
}
.Blockslider .tabsSearch li a{
    border: 1px solid white;
    font-weight: normal;
}
.Blockslider .tabsSearch li{
    margin-right: 10px;
}


.button.btnNutTron , .button.btnNutTron i{
    margin: 0px !important;
    padding: 0px !important;
}
.button.btnNutTron{
    position: relative;
    text-align: center;
    display: inline-block;
    justify-content: center;
    vertical-align: middle;
    background: transparent !important;
    height: auto;
    line-height: 0px;
    padding: 2px !important;
}

.button.btnNutTron > i{
    text-align: center;
    border: 1px solid white;
    border-radius: 50%;
    padding: 10px !important;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    transition: transform .3s;
}
.button.btnNutTron > span{
    border: 1px solid white;
    border-radius: 20px;
    padding: 6px 12px;
    margin-left: 10px;
    position: relative;
}
.button.btnNutTron > i::after{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    will-change: transform;
    visibility: hidden;
    content: "";
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
    transform: translate(-100%,0);
    transition: transform .3s;
    background: var(--primary-color);
}
.button.btnNutTron:hover > i::after{
    visibility: visible;
    transform: translate(0,0);
}
.button.btnNutTron > i::before{
    overflow: hidden;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
}
.button.btnNutTron:hover > i::before{
    animation: swipe .6s;
}


.banner.khongnen{
    background: transparent !important;
}



.txtSanPham p{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.txtSanPham p::before{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    will-change: transform;
    visibility: hidden;
    content: "";
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
    transform: translate(-100%,0);
    transition: transform .3s;
    background: var(--primary-color);
}
.txtSanPham:hover{
    cursor: pointer;
}
.txtSanPham:hover p::before{
    visibility: visible;
    transform: translate(0,0);
}
.txtSanPham p{
    margin: 0px;
    border: 1px solid white;
    border-radius: 60px;
    padding: 20px;
    font-size: 25px;
}
.txtSanPham.txtSanPham_2 p{
    padding: 9px 22px;
    font-size: 17px;
    display: inline-block;
}



.marginbottom-0 p{
    margin-bottom: 0px;
}
.marginbottom-40 p{
    margin-bottom: 40px;
}



span.gachngangfooter{
    display: inline-block;
    margin: 30px 0px;
    height: 1px;
    width: 50%;
    background: white;
}



.FooterIndex::before{
    content: '';
    position: absolute;
    top: -150px;
    left: -10%;
    background: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/bg-footer.jpg) no-repeat;
    width: 500px;
    height: 800px;
    background-size: 68%;
    opacity: 0.7;
}



.frmFooter{
    text-align: center;
    position: relative;
    display: block;
    font-size: 15px;
}
.frmFooter input[type="email"]{
    background: transparent;
}
.frmFooter input[type="email"]::placeholder {
    text-align: center; 
 }
 .frmFooter input[type="email"]::-webkit-input-placeholder {
    text-align: center;
 }
 .frmFooter input[type="email"]:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
 }
 .frmFooter input[type="email"]::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
 }
 .frmFooter input[type="email"]:-ms-input-placeholder {  
    text-align: center; 
 }
.frmFooter input[type="submit"]{
    display: block;
    width: 100%;
    border: none;
    color: black !important;
    background: white !important;
}
.frmFooter input[type="submit"]:hover{
    background: var(--primary-color) !important;
    color: white !important;
}


.absolute-footer{
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    font-size: 9px;
}


/* sidebar */
.sidebar-wrapper .widget , .shop-sidebar .widget {
    margin-bottom: 10px;
}
.sidebar-wrapper .widget_media_image img , #shop-sidebar .widget_media_image img{
    height: 70px;
    width: 70px;
}
.sidebar-wrapper .widget_nav_menu li+li , #shop-sidebar .widget_nav_menu li+li{
    border: none;
}
.sidebar-wrapper .widget_nav_menu li > a , #shop-sidebar .widget_nav_menu li > a{
    display: block;
    margin: 0px;
    padding: 5px 0px;
    transition: transform .3s;
}
.sidebar-wrapper .widget_nav_menu li:hover > a , #shop-sidebar .widget_nav_menu li:hover > a , .widget_nav_menu li.current-menu-item a{
    color: var(--primary-color) !important;
}



.tax-product_cat .shop-page-title{
    display: none !important;
}



.page_savoir_faire::before{
    content: '';
    background: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/z4375714838502_0c9fbe1b099a9ed610fb991f58994433.jpg) no-repeat;
    position: absolute;
    top: 35%;
    right: 0px;
    width: 600px;
    height: 600px;
    background-size: 100%;
}
.page_savoir_faire::after{
    content: '';
    background: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/z4375714899733_31aa546e0d7a30a55286daf09f6e1d90-e1686567859358.jpg) no-repeat;
    position: absolute;
    bottom: 0px;
    left: -150px;
    width: 300px;
    height: 300px;
    opacity: 0.5;
    background-size: 100%;
}




.frmLienHe input[type="text"] , .frmLienHe input[type="tel"] , .frmLienHe input[type="email"] , .frmLienHe textarea{
    border-radius: 20px;
    background: transparent;
    box-shadow: none ;
}
.frmLienHe textarea{
    border-radius: 50px;
    resize: none;
    padding: 15px 38px;
}
.frmLienHe input[type="checkbox"]{
    height: var(--width-checkbox);
    width: var(--width-checkbox);
    vertical-align: middle;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
}
.frmLienHe input[type="submit"]{
    border-radius: 20px;
    background: #d9d9d9 !important;
    padding-left: var(--width-btn-submit);
    padding-right: var(--width-btn-submit);
    margin-bottom: 0px;
    font-weight: normal;
    font-size: 14px;
    color: black !important;
}
.frmLienHe input[type="submit"]:hover{
    background: var(--primary-color) !important;
    color: white !important;
}
.frmLienHe textarea::placeholder {
    text-align: center;
 }
 .frmLienHe textarea::-webkit-input-placeholder {
    text-align: center;
 }
 .frmLienHe textarea:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
 }
.frmLienHe textarea::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
 }
.frmLienHe textarea:-ms-input-placeholder {  
    text-align: center; 
 }




.Allergenes_row{
    position: relative;
}
.Allergenes_row .BlockTextAllergenes{
    position: absolute;
    left: 0px;
    top: -100px;
    z-index: 1;
}


.Block_content_produits::before{
    content: '';
    background: url('https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/z4392709979774_e997c8ff917dad6cb04c90508403fd31.jpg') no-repeat;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 350px;
    background-size: 100%;
    background-position: left bottom;
    opacity: 0.5;
}
.Block_content_produits::after{
    content: '';
    background: url('https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/z4392709978341_63ae800e9eb904a16c11f5800413afa7.jpg') no-repeat;
    position: absolute;
    top: 580px;
    right: -40px;
    width: 350px;
    height: 350px;
    background-size: 100%;
    background-position: center center;
    opacity: 0.5;
}



/* hiệu ứng */
.xoay_tron img , .xoay_tron_hover:hover{
    animation: loading 2s infinite;
}
@keyframes loading {
    0 {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
@keyframes swipe { 
    0%{transform: translateX(-5px)}
    40% {transform: translateX(5px) } 
    60%{transform: translateX(-5px);}
    100% {transform: translateX(0)} 
}

/* css for mobile - thietkewebchuyen.com */
@media only screen and (max-width: 48em) {

    .Blockslider .bg.bg-loaded{
        background-image: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/slider-2.1.png) !important;
        background-size: 80% !important;
        background-position: right center;
    }
    .Blockslider .col {
        padding-bottom: 0px;
    }
    .Blockslider .text-1 p{
        font-size: 30px;
    }
    .Blockslider .text-2 p{
        font-size: 9px !important;
        line-height: var(--size-text-search-line-height-mobile);
    }
    .search-field::-webkit-input-placeholder{
        font-size: var(--size-text-search-placeholder-mobile)
     }
    .search-field:-moz-placeholder{
        font-size: var(--size-text-search-placeholder-mobile)
    }
    .search-field::-moz-placeholder {
        font-size: var(--size-text-search-placeholder-mobile)
    }
    .search-field:-ms-input-placeholder {
        font-size: var(--size-text-search-placeholder-mobile)
    }

    .Allergenes_row .BlockTextAllergenes{
        position: relative;
        left: unset;
        top: unset;
    }
    .Allergenes_row .BlockImageAllergenes{
        position: absolute;
        right: -51px;
        bottom: -280px;
        opacity: 0.5 !important;
    }

    .txtSanPham p {
        z-index: 6;
        padding: 20px;
        font-size: 17px;
        display: inline-block;
    }

    .section.gioi-thieu > .section-content{
        z-index: 2;
    }
    .section.gioi-thieu::after{
        content: '';
        background: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/bg-sushi-mobile.png) no-repeat;
        height: 100%;
        width: 100%;
        position: absolute;
        bottom: -224px;
        right: 0px;
        background-size: 97%;
        background-position: right bottom;
        z-index: 1;
    }

    .page_savoir_faire::before , .page_savoir_faire::after , .Block_content_produits::before , .Block_content_produits::after{
        display: none;
    }

    section.BlockMonAn .section-bg.bg-loaded , section.BlockImageshistories .section-bg.bg-loaded{
        background: transparent !important;
    }

    .FooterIndex::before {
        top: 0px;
        left: -10%;
        background: url(https://tokyo-sushi.s157.demo.xemwebmau.com/wp-content/uploads/2023/06/bg-footer.jpg) no-repeat;
        opacity: 0.5;
    }
    


}