/*
Theme Name: An Hương Vân
Theme URI: https://anhuongvan.com
Author: Dev@dearjose.com
Author URI: https://anhuongvan.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Version: 1.0.0
Requires at least: 5.2
Tested up to: 6.3
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

An Hương Vân, Copyright 2024-2033 Dearjose
An Hương Vân is distributed under the terms of the GNU GPL

An Hương Vân is based on Underscores http://underscores.me/, (C) 2012-2022 Automattic, Inc.

Actual CSS can be found in /assets/css/ folder.
*/
* {
    box-sizing: border-box;
}
html, body {overscroll-behavior: none;}
body {
    margin: 0 !important;
}

body {
    font-family: 'Chivo Mono';
    font-size: 14px;
    line-height: 20px;
    color: #1D1D1D;
    background-color: #FFFCF3;
}

body a {
    text-decoration: none;
    color: #1D1D1D;
}
::-moz-selection { /* Code for Firefox */
    color: #FFFFFF;
    background: #1D1D1D;
}

::selection {
    color: #FFFFFF;
    background: #1D1D1D;
}

.overflow-disable, .overflow-disable-cart, .scroll-disable {
    overflow: hidden;
}
/* .scroll-disable{
    overflow-x: scroll;
    overflow-y: hidden !important;
} */
/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-disable::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll-disable{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.main {
    position: relative;
}

.container-main {
    margin-bottom: 80px;
}

/* Margin , Padding */
.margin-right-5 {
    margin-right: 5px;
}

.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}
.mobile-toggle-home{
    display: none;
}

/* Mobile */

.mobile-toggle, .mobile-toggle-home {
    display: none;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 40px;
    text-indent: -9999px;
    position: absolute;
    left: 20px;
    top: 20px;
    background: url(src/images/mobile-toggle-dark.svg) transparent no-repeat center;
    background-size: contain;
    cursor: pointer;
    outline: none;
    z-index: 10;
}

.mode-light .mobile-toggle, .mode-light .mobile-toggle-home{
    background: url(src/images/mobile-toggle-dark.svg) transparent no-repeat center;
    background-size: contain;
}

.mobile-toggle-close, .btn-close-zoom {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    background: url(src/images/close-dark.svg) transparent no-repeat center;
    background-size: contain;
    cursor: pointer;
    outline: none;
}
.btn-close-zoom{
    position: fixed;
    top: 92px;
    right: 16px;
    z-index: 21;
}

.mode-light .mobile-toggle-close {
    background: url(src/images/close-light.png) transparent no-repeat center;
    background-size: contain;
}

.show-menu-close {
    background-color: #FFFCF3;
}

.user-icon {
    height: 24px;
    width: 24px;
    background: url(src/images/profile-icon.svg) transparent no-repeat center;
    background-size: contain;
}

.cart-icon {
    height: 24px;
    width: 24px;
    background: url(src/images/cart-icon.svg) transparent no-repeat center;
    background-size: contain;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 240px;
    opacity: 0;
    transition: .5s ease;
    background-color: #FFFCF3;
}



/* Layer */
.layer-blur,
.layer-blur-2 {
    filter: blur(10px);
    /* background-color: #FFFFFF; */
}

.layer-menu-active {
    filter: blur(0);
    top: 0;
    background-color: #FFFCF3;
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
}

/* Cart */
.wrap-header-cart {
    position: fixed;
    z-index: 1200;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.0);
    visibility: hidden;
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.s-full {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
}

.header-cart {
    position: fixed;
    z-index: 1100;
    width: calc(100%/3);
    height: 100vh;
    top: 0;
    right: calc(-100%/3);
    background-color: #FFFCF3;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    transition: all 0.4s linear;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 10px 0px 10px;
    border-left: 1px solid #1D1D1D
}

.show-header-cart {
    visibility: visible;
    background-color: #FFFCF31A;
}

.show-header-cart .header-cart {
    right: 0;
}

.header-cart-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-bottom: 24px;
    border-bottom: 0.5px solid #1D1D1D;
}

.cart-title span {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    text-align: left;
}

.cart-description {
    font-size: 12px;
}

.cart-description a {
    border-bottom: 0.5px solid #1D1D1D;
}

.btn-close {
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 40px;
    text-indent: -9999px;
    left: 20px;
    top: 60px;
    background: url(src/images/close-dark.png) transparent no-repeat center;
    background-size: contain;
    cursor: pointer;
    outline: none;
    margin-left: auto;
}

.cart-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.wrap-summary {
    display: flex;
    flex-direction: column;
}

.summary-title {
    display: flex;
    flex-direction: row;
}

.summary-title .price {
    margin-left: auto;
    text-align: right;
}

.header-cart-buttons {
    height: 30px;
    background-color: #1D1D1D;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-cart-buttons a {
    font-weight: 500;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
}

.header-cart-buttons:hover {
    background-color: #FFFCF3;
    border: 0.5px solid #1D1D1D;
}

.header-cart-buttons:hover a {
    color: #1D1D1D;
}

.header-cart-content {
    /* display: flex;
    flex-direction: column; */
    overflow-y: auto;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.header-cart-content::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.header-cart-content {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.header-cart-wrapitem {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 10px;
    /* height: 100%; */
    width: 100%;
}

.header-cart-wrapitem::-webkit-scrollbar {
    display: none;
}

.header-cart-wrapitem li {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.header-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-cart-item-img img {
    width: 110px;
    aspect-ratio: 2 / 3;
}

.header-cart-item-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
}

.quickcart-item-remove-btn {
    margin-top: auto;
    margin-bottom: 20px;
}

.quickcart-item-remove-btn a:hover {
    border-bottom: 0.5px solid #1D1D1D;
}

.header-cart-item-actions select {
    width: 76px;
    height: 20px;
    background: #FFFCF3;
    border: none;
    border-bottom: 1px solid;
    outline: none;
    border-radius: 0;
}

.info-quantity div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.info-quantity a {
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.error-message p a {
    display: none;
}

.error-message .swal-button {
    background-color: #1D1D1D;
}

.swal-button {
    background-color: #1D1D1D;
}

.swal-button:hover {
    background-color: #FFFCF3;
    color: #1D1D1D;
}

@media screen and (max-width: 600px) {
    .header-cart {
        width: 100%;
    }
}

/* End Cart */
/* Header left */
.all {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.menu,
.menu-others {
    position: relative;
    list-style: none;
    padding: 5px 0;
    width: auto;
    margin: 0;
    width: 200px;
    z-index: 5;
}
.menu-others a:hover{
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

.menu li {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    padding-left: 10px;
    position: relative;
}

.menu>li.current-menu-item::before,
.menu li.current-menu-parent::before,
.menu .sub-menu>li.current-menu-item::before,
.menu>li:has(.sub-menu li.current-product-parent)::before {
    content: '';
    position: absolute;
    left: -6px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #1D1D1D;
    opacity: 100% !important;
    z-index: 6;
}

.menu li.active,
li.current-menu-item>a,
li.current-menu-parent>a {
    opacity: 1 !important;
}

.menu li a,
.menu-others li a {
    text-decoration: none;
    color: #1D1D1D;
    display: block;
}

.menu-others li {
    text-align: left;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    padding-left: 0;
    position: relative;
    list-style: none;
}
.menu-others .list-social{
    margin-top: 12px;
}
.menu-others #follow-us.active .list-social{display: block;}

.menu .sub-menu {
    display: none;
    position: absolute;
    left: 200px;
    width: 300px;
    top: -10px;
    padding-left: 0;
    margin-left: 10px;
    list-style-type: none;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 6;
}

.menu-hide {
    transform: translateX(-300px) translateY(-50%);
    transition: all 0.75s ease 0s;
}

.menu-focused {
    transform: translateX(12px) translateY(-50%);
    transition: all 0.75s ease 0s;
}

.sub-menu::before {
    content: url(src/images/arrow-right-icon.svg);
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    position: absolute;
    left: -30px;
    top: 10px;
}

/* .menu li.current-menu-parent .sub-menu, .menu li.current-menu-item .sub-menu{
    display: block;
    top: 50%;
    transform: translateY(-50%);
} */
.region-show-menu-origin,
.region-show-menu,
.region-show-submenu {
    position: absolute;
    width: 10px;
    height: 100%;
    top: -10px;
    margin: 5px 0;
    left: -11px;
    cursor: pointer;
    z-index: 6;
}

.region-show-menu-origin {
    left: 0;
}

.region-show-menu-origin div,
.region-show-menu div,
.region-show-submenu div {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 2px;
    position: absolute;
    left: 9px;
    top: 0;
    cursor: pointer;
    z-index: 5;
    background: url(src/images/line.png) center;
    background-repeat: no-repeat;
    background-size: 2px 100%;
}

.region-show-menu-origin::before {
    content: url(src/images/arrow-right-icon.svg);
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-60%);
}

.sub-menu li {
    padding-left: 10px;
}

.menu li a,
.sub-menu li a {
    opacity: 0.3;
}

.menu>li:has(.sub-menu li.current-product-parent)>a {
    opacity: 1;
}
.all.menu-focused .menu>li>a{
    opacity: 1;
}
.menu > li:hover > a, .sub-menu > li:hover > a{
    opacity: 1;
}

/* .menu:hover > li:hover > .sub-menu {
    display: block;
} */

.wrap-menu-left {
    position: fixed;
    z-index: 1100;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.0);
    visibility: hidden;
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.menu-left {
    position: fixed;
    z-index: 1100;
    min-width: 500px;
    max-width: 60%;
    height: 100vh;
    top: 0;
    left: -100%;
    background-color: #FFFCF3;
    -webkit-transition: all 0.75s linear;
    -o-transition: all 0.75s linear;
    -moz-transition: all 0.75s linear;
    transition: all 0.75s linear;
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
    -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
    -o-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
    -ms-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 10px 0px 10px;
    border-left: 1px solid #1D1D1D
}

.show-menu-left {
    visibility: visible;
    background-color: #FFFCF31A;
    transition: visible 1s linear;
}

.show-menu-left .menu-left {
    left: 0;
}

.show-menu-left .wrap-product-details {
    width: 50%;
}

.tab-menu {
    display: none;
}

/* End menu left */
/* style footer element */
.footer-wrapper {
    background-color: #FFFCF3;
    display: grid;
    grid-gap: 32px;
    row-gap: 32px;
    grid-template-areas:
        "copyright section-location section-contact section-legals section-follow-us section-verify"
        "section-logo section-logo section-logo section-logo section-logo section-logo"
    ;
    grid-template-columns: fit-content;
    justify-items: stretch;
    max-height: min-content;
    width: inherit;
    border-top: 1px solid #1D1D1D;
    padding: 48px 10px 58px 10px;
}

.footer-wrapper h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.footer-wrapper .section-location {
    grid-area: section-location;
}

.footer-wrapper .section-contact {
    grid-area: section-contact;
}

.footer-wrapper .section-legals {
    grid-area: section-legals;
}

.footer-wrapper .section-verify {
    grid-area: section-verify;
    text-align: right;
}

.footer-wrapper .section-follow-us {
    grid-area: section-follow-us;
}

.footer-wrapper .copyright {
    grid-area: copyright;
}

.footer-wrapper .section-logo-bottom {
    grid-area: section-logo;
    margin-top: 48px;
}

.footer-wrapper .section-logo-bottom img {
    width: 100%;
    height: auto;
}

.sec-service {
    margin-top: 30px;
}

.footer-wrapper .section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 600px) {
    .footer-wrapper {
        grid-template-areas: "copyright" "section-location" "section-contact" "section-legals" "section-follow-us" "section-verify" "section-logo";
        padding: 24px 10px 24px 10px;
    }

    .footer-wrapper .section-verify {
        text-align: left;
    }
    .footer-wrapper .section-logo-bottom {
        margin-top: 8px;
    }
}

@media (min-width: 600px) and (max-width: 1200px) {
    .footer-wrapper {
        grid-template-areas:
            "copyright section-location section-verify"
            "copyright section-contact section-verify"
            "copyright section-legals section-verify"
            "copyright section-follow-us section-verify"
            "section-logo section-logo section-logo"
        ;
        padding: 24px 10px 27px 10px;
    }
}

@media (min-width: 1200px) and (max-width: 1900px) {
    .footer-wrapper {
        grid-template-areas:
            "copyright section-location section-contact section-verify"
            ". section-legals section-follow-us ."
            "section-logo section-logo section-logo section-logo"
        ;
        padding: 48px 10px 54px 10px;
    }
}

/* Header */
.header-top {
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    background: #FFFCF3;
}
.container-menu-desktop,
.container-menu-mobile {
    display: flex;
    flex-direction: row;
    height: 56px;
    align-items: center;
}

.container-menu-mobile {
    display: none;
}

.container-menu-desktop a {
    color: #1D1D1D;
}

.wrap-logo {
    margin-left: 32px;
}

.logo img {height: 12px;}

.wrap-menu {
    display: flex;
    margin-left: auto;
    padding-right: 30px;
    gap: 30px;
    font-size: 16px;
    align-items: center;
}

.wrap-layout {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.layout-icon:before {
    content: url(src/images/layout-icon.svg);
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
}

.layout-num {
    width: 24px;
    height: 24px;
    text-align: center;
    padding-top: 1px;
    box-sizing: border-box;
    cursor: pointer;
}

.layout-num.active {
    border: 1px solid #2D2D2D4D
}

.wrap-search {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    position: relative;
    border-bottom: 1px solid;
    padding-bottom: 4px;
    margin-bottom: -2px;
}

.input {
    box-sizing: border-box;
}

.input input {
    border: none;
    width: 400px;
    box-sizing: border-box;
    padding-top: 3px;
    background-color: #FFFCF3;
}

.input input::placeholder {
    font-size: 16px;
}

.input input:focus,
.input input:focus {
    outline: none;
}

.input .shadow {
    border-bottom: 1px solid;
    font-size: 1rem;
    height: 1.7em;
    left: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    touch-action: none;
    width: 100%;
}

.wrap-account a:before {
    content: url(src/images/search-icon.svg);
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

.icon-header-item {}

.search-icon {
    margin-right: 5px;
    opacity: 0.5;
}
.search-icon.active{
    opacity: 1;
}

.wrap-cart {
    margin-left: auto;
}

.wrap-cart a {
    position: relative;
}

.wrap-cart a:before {
    content: url(src/images/cart-icon.svg);
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

.wrap-cart a::after {
    content: attr(data-notify);
    text-align: center;
    display: block;
    position: absolute;
    top: -10px;
    left: 12px;
    min-width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
}

.cart-icon {}

.wrap-account {
    margin-left: auto;
}

.wrap-account a:before {
    content: url(src/images/profile-icon.svg);
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

.user-icon {}

@media screen and (max-width: 600px) {
    .container-menu-desktop {
        display: none;
    }

    .container-menu-mobile {
        display: flex;
        padding-left: 20px;
        gap: 20px;
    }

    .wrap-menu {
        padding-right: 20px;
    }

    .wrap-menu input {
        display: none;
    }

    .wrap-menu .wrap-search {
        border-bottom: none;
    }
    .wrap-search.search-active .input{display: block;}

    .wrap-search.search-active input {
        display: block;
        width: auto;
    }

    .wrap-menu .wrap-search.search-active {
        border-bottom: 1px solid;
    }

    .mobile-toggle {
        position: unset;
        width: 20px;
    }
    .wrap-menu-left{
        /* visibility: visible; */
        opacity: 0;
    }
}
.sold-out{
    color: #D64D4D;
}
.sold-out::before{
    content: '';
    background: url(src/images/line-sold-out.svg);
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    height: 1px;
    width: 30px;
}
.sold-out::after{
    content: '';
    background: url(src/images/line-sold-out.svg);
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    height: 1px;
    width: 30px;
}

/* Input customize */
.floating {
    border-bottom: 0.5px solid #FFFFFF;
}
  
.floating__input {
    background: transparent;
    border: none;
    outline: none;
    /* color: #FFFFFF; */
    font-weight: 300;
    height: 100%;
    width: 100%;
    font-size: 16px;
    padding-left: 9px;
}
  
  .floating__input::placeholder {
    color: transparent;
  }
  .floating__input:focus::placeholder{
    color: unset;
    opacity: 0.5;
    font-weight: 300;
  }
  
  .floating__label {
    display: block;
    position: relative;
    max-height: 0;
    font-weight: 400;
    pointer-events: none;
    opacity: 80%;
    padding-left: 9px;
  }
  
  .floating__label::before {
    content: attr(data-content);
    display: inline-block;
    filter: blur(0);
    backface-visibility: hidden;
    transform-origin: left top;
    transition: transform 0.2s ease;
    position: relative;
    bottom: -10px;
  }
  
  .floating__input:focus + .floating__label::after {
    /* transform: scale3d(1, 1, 1); */
    opacity: 1;
  }
  
  .floating__input:placeholder-shown + .floating__label::before {
    transform: translate3d(0, -2.2rem, 0) scale3d(1, 1, 1);
    opacity: 50%;
  }
  
  .floating__label::before,
  .floating__input:focus + .floating__label::before {
    transform: translate3d(0, -3.4rem, 0) scale3d(0.82, 0.82, 1);
    opacity: 80%;
  }
  .floating__label::after{
    opacity: 0.8;
  }
  
  /* .floating__input:focus + .floating__label::before {
    color: var(--color__accent);
  } */
  

/* Mobile */
@media screen and (max-width: 750px) {
    .all {
        padding: 0 16px;
        position: unset !important;
        transform: unset !important;
        margin-top: 100px;
    }

    .mobile-toggle, .mobile-toggle-home {
        display: block;
    }

    .has-annoucement .mobile-toggle {
        top: 20px;
    }

    .menu-left {
        width: 100%;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        left: 0;
    }

    .menu-left .container-menu-mobile {
        display: flex;
        padding-left: 20px;
        gap: 20px;
    }

    .tab-menu {
        display: flex;
        padding: 0 16px;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: 1px solid #2D2D2D33;
    }

    .tab-menu div {
        width: 50%;
        cursor: pointer;
        border-bottom: 1px solid #1D1D1D;
        margin-bottom: -1px;
    }

    .tab-menu div.deactive {
        opacity: 50%;
        border-bottom: none;
    }

    .menu-left .wrap-product-details {
        display: none;
    }

    .wrap-logo {
        margin-left: 0;
    }
    .container-main {
        margin-bottom: 20px;
    }
    .show-menu-left {
        opacity: 1;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 0.75s;
        background-color: #FFFCF31A;
    }

    @keyframes fadeInOpacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    #popup-menu-left .wrap-product-details{display: none;}
}