.vi-hd{position: fixed;top:0;left:0;width:100%;background:#fff;height:74px;z-index:10;padding-top: 15px;padding-bottom: 7px;}
.vi-hd .main, .vi-hdm .menu-top .main{padding: 0 10px;}
.vi-hd .logo{height:24px;width:auto;}
.vi-hd img{max-height:60px;width:auto;}
.vi-hd .main > div{position: relative;}
.vi-hd .head-icon-a{padding: 8px 20px;cursor: pointer;position: relative;}
.vi-hd .head-icon-a .top-name{font-size: 16px;margin-left: 2px;}
.vi-hd .head-icon-a:hover::before {
    content: '';
    border-radius: 30px;
    border: 1px solid var(--color-primary-active, #F1E9F5);
    background: var(--color-primary-active, #F1E9F5);
    display: block;
    position: absolute;
    left: 0;
    padding: 12px 16px;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
} 
.head-icon-a:active,
.head-icon-a.active{color: var(--color-primary, #712799);}
.vi-hd .head-icon-a:active::before,
.vi-hd .head-icon-a.active::before {
    content: '';
    border-radius: 30px;
    border: 1px solid var(--color-primary, #712799);
    background: var(--color-primary-active, #F1E9F5);
    display: block;
    position: absolute;
    left: 0;
    padding: 12px 16px;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.head-icon-a:active svg,
.head-icon-a.active svg{
    --icon-light-color: var(--color-primary-30, #D4BEE0);
    --icon-border-color: var(--color-primary, #712799);
}

/*user*/
.vi-hd .head-user {flex-wrap: nowrap;}
.top-user.active i{transform: rotate(180deg);}
.vi-hd .top-icon .iconfont,.vi-hd .top-icon .icon{font-size:28px;height:28px;line-height:28px;width:28px;color:#333;}
.vi-hd .top-icon > a,.vi-hd .top-icon > div{height:50px;width: auto;}
.vi-hd .sign-box{position: absolute; z-index: 10; top: calc(100% + 11px); left: auto; background: #fff;min-width: 144px;max-width:275px;width:max-content;border-radius: 12px;box-shadow: 0px 0px 8px 0px var(--color-primary-border, #E3D4EB);}
.vi-hd .sign-box::before{width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #fff; content: ""; position: absolute; top:-10px; left: 50%;transform: translateX(-50%);}
.vi-hd .sign-box::after{width: 0;height: 0;border-left: 11px solid transparent;border-right: 11px solid transparent;border-bottom: 11px solid var(--color-primary-border, #E3D4EB);content: ""; position: absolute;top: -12px;left: 50%;transform: translateX(-50%);z-index: -1;filter: blur(2px);-webkit-filter: blur(2px);}
.vi-hd .sign-user{color: #999;font-size: 12px;line-height: 1;}
.vi-hd .sign-list{padding:14px 0;font-size:16px;}
.vi-hd .sign-list li{color: #333;font-size:16px;position: relative;}
.vi-hd .sign-user-top{margin-top: 28px;}
.vi-hd .sign-user-top::before{content:'';height:1px;width:calc(100% - 40px);display:block;background-color:#eee;border-radius:4px;position:absolute;left:20px;top:-14px}
.vi-hd .sign-list li:hover{background: var(--color-primary-active, #F1E9F5);}
.vi-hd .sign-list li a{color: #333;font-size:16px;padding:14px 20px;display: block;}
.vi-hd .sign-in{width: 100%;height:30px;line-height:30px;text-align: center;border-radius: 30px;color: #fff;background: #333;margin-bottom: 14px;font-size: 14px;}
.vi-hd .sign-up{font-size:12px;color:#333;text-decoration: underline;}
.vi-hd .sign-out{font-size:14px;color:#333;line-height:1;}
.vi-hd #sign-order-total{min-width: 16px; height: 16px;padding:1px 3px; background: var(--color-primary, #712799); border-radius: 8px;color:#fff;font-size:12px;line-height: 1;border: 1px solid #fff;display: inline-block;text-align: center;margin: 1.5px 0 1.5px 12px;vertical-align: top;}
.vi-hd .submenu-cart-num{display: inline-flex;align-items: center;justify-content: center;position: relative;top: -1px;left: 0px;}
.vi-hd .cart-num{min-width: 20px;padding:2.5px 5px;height: 20px; background: var(--color-primary, #712799); border-radius:10px;color:#fff;font-size:15px;line-height: 1;top:-8px;left:16px;box-shadow: 0 0 0 1.25px #fff; font-weight: 700;}

/*menu*/
.vi-hdm{position: fixed;top:74px;left:0;width:100%;background:#fff;z-index:9;}
.vi-hdm .menu-top{width:100%;height: 100%;background:#fff;border-bottom: 1px solid var(--color-primary-border, #E3D4EB); }
.vi-hdm .top-menu{height:55px;width: 100%;gap: 8px;}
.vi-hdm .top-menu .mi{color:#333;height:100%;position: relative;font-size: 16px;margin: 0 20px;}
.vi-hdm .menu-box{overflow: hidden;background: #fff;border-radius:0 0 28px 28px;}
.vi-hdm .sub-menu{padding:40px 0 60px;height:100%;margin: 0 -16px;width: calc(100% + 32px);}
.vi-hdm .sub-menu-item{margin-right:32px; border-right: 1px solid var(--color-primary-border, #E3D4EB);height: 100%;padding-right: 32px;}
.vi-hdm .sub-menu-item:last-child{border-right:0;padding-right:0;margin-right: 0;}
.vi-hdm .sub-menu .smi{font-size:16px;}
.vi-hdm .menu-box-img{width:275px;}
.vi-hdm .menu-box-img img{height:auto;}
.vi-hdm .mi.active a{color:var(--color-primary, #712799);font-weight: bold;}
.vi-hdm .smi a{display: inline-block;padding: 12px 16px;font-size: 16px;line-height: 16px;border: 1px solid transparent;transition: all 0.1s linear;border-radius: 20px;}
.vi-hdm .smi.active a:hover{border-color: var(--color-primary-active, #F1E9F5); background-color: var(--color-primary-active, #F1E9F5);}
.vi-hdm .smi.active a:active{background-color: var(--color-primary-active, #F1E9F5);border-radius: 20px;border-color: var(--color-primary, #712799);color:var(--color-primary, #712799);font-weight: 700;}
.vi-hdm .mi.active::after{content:"";width:100%; height:2px; background: var(--color-primary, #712799); position:absolute; bottom:0; left:0;}


.vi-hdm .menu-top .feast-other-category.active .nav_bar-item .unactive-image{display: none;}
.vi-hdm .menu-top .feast-other-category.active .nav_bar-item .active-image{display: block !important;}
.vi-hdm .menu-top .nav_bar-item .active-image{display: none;}
.vi-hdm .nav_bar-item .item-image{width: auto;height: 32px;max-width: 160px;object-fit: contain;}
.vi-hdm .menu-content{width: 100%;height: 100%;background:#fff;}
.vi-hdm .top-menu .feast-category.active .nav_bar-item .unactive-image{display: none;}
.vi-hdm .menu-top .feast-category.active .nav_bar-item .active-image{display: block !important;}

.search-box *::-webkit-scrollbar{width: 6px;height: 6px;background-color: #eee;}
.search-box *::-webkit-scrollbar-track{background-color: #fff;}
.search-box *::-webkit-scrollbar-thumb{background-color: #eee;}

/*search*/
.vi-hd .search-div{display: flex;align-items: center;justify-content: flex-start;width: 300px;margin-left: 20px;margin-right: 46px;}
.vi-hd .search-div .search-content,
.search-box .search-content{height: 44px;border-radius: 22px;border: 1px solid var(--color-primary-border, #E3D4EB);background: var(--color-primary-bg, #F8F4FA);padding: 3px;position: relative;}
.vi-hd .search-div .search-content .search-input,
.search-box .search-content .search-input{border: none;height: 36px;padding: 0 13px;}
.vi-hd .search-div .search-content .ga_yang_search,
.search-box .search-content .ga_yang_search{cursor: pointer;width: 36px;height: 36px;background-color: var(--color-primary, #712799);color: #fff;border-radius: 50%;line-height: 1;text-align: center;padding: 6px;}

.search-box{position: fixed; z-index: 99; top: 0; right: 0; background: rgba(0,0,0,0.5);width: 100%;top: 0;left: 0;height: 100%;}
.search-box .search-container{border-radius: 0 0 28px 28px;max-height: 600px;height: 56%;overflow: hidden;background-color: #fff;}
.search-box .search-wrapper{margin: 20px 0 12px;}
.search-box .search-content{flex: 1;margin-left: 40px;}
.search-box .search-content .search-input{flex: 1;}
.search-box .search-box-scroll{height: 100%;overflow: auto !important;padding:0 0 20px;scrollbar-width: none;-ms-overflow-style: none;}
.search-box .vi-hds{position: relative;height: calc(100% - 76px);padding-top: 20px;}
.search-box .vi-hds .content{height: 100%;}
.icon-search-cancel{
    width: 20px;
    height: 20px;
    font-size: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23999999'/%3E%3Cpath d='M13.4728 6.52734L6.52832 13.4718' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M13.4728 13.4718L6.52832 6.52734' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.search-box-close{display: none;position: absolute;background-size: 20px 20px;top: 3px;right: 79px;z-index: 1;width: 20px;height: 36px;user-select: none;}
.search-input-close{opacity: 0;width: 20px;height: 36px;background-size: 20px 20px;background-repeat: no-repeat;background-position: center;z-index: 1;margin-right: 20px;cursor: pointer;user-select: none;}

.vi-hds{padding:0;width: 100%;max-width: 1200px;margin: 0 auto;background-color: #fff;}
.vi-hds .main{background: #fff;padding: 12px;height: 100%;}
.vi-hds .iconfont{-webkit-text-stroke-width: 0px;}
.vi-hds .top{height:45px;justify-content: space-between;margin-bottom: 10px;}
.vi-hds .search-content{flex: 1;}
.vi-hds .left{width:calc(100% - 78px);margin:0;background:#fff;}
.vi-hds .line{height:19px;width:1px;background:#ababab;}
.vi-hds input.value{width:100%;height:50px;border:1px solid #D5D5D5;margin:0 auto;padding:0 12px;background:none;outline:none;border-radius:4px 0 0 4px;font-size:14px;border-right: 0;}
.vi-hds input::placeholder{color:#999;}
.vi-hds input.value:focus,.vi-hds input.value:hover{border-color: #333;transition: all 0.2s;}
.vi-hds .content .clear{margin-left: 30px;font-size:14px;color:#333;line-height: 1;text-decoration: underline;}
.vi-hds .content .clear:hover,.vi-hd .top-user .iconfont:hover,.vi-hd .top-search .iconfont:hover{cursor: pointer;}
.vi-hds .content .clear:hover{color: #333;}
.vi-hds .history{overflow: hidden;}
.vi-hds .history + .history{margin-top: 20px;}
.vi-hds .history .title{font-size:16px;margin-bottom: 16px;}
.vi-hds .list{margin:0 -6px;width: 100%;}
.vi-hds .list li{padding: 12px 16px;border-radius: 22px;background-color: var(--color-primary-bg, #F8F4FA);margin: 0 6px 12px;max-width: calc(100% - 70px);font-size: 14px;line-height: 1;display: inline-block;transition: all 0.2s ease;cursor: pointer;}
.vi-hds .list li.search-hot{padding: 11px 15px;border: 1px solid var(--color-primary-bg, #F8F4FA);}
.vi-hds .list li:hover{background-color: var(--color-primary-active, #F1E9F5);}
.vi-hds .list li>span{font-size: 16px;}
.vi-hds .slist{max-height: 106px;overflow: hidden;position: relative;}
.vi-hds .olist li .list-icon{width:16px;height: 16px;object-fit: contain;margin-right: 2px;display: inline-block;vertical-align: bottom;}

.vi-hds .product-list{padding: 0;}
.vi-hds .search-product-list{display: grid;-ms-grid-columns: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);gap: 20px 16px;}
.vi-hds .product-list .list-item{width: auto;margin:0;width:100%;background-color: transparent;}
.vi-hds .product-list .list-item .list-item-div .image{width: 100%;padding-bottom: 100%;}
.vi-hds .product-list .list-item .list-item-div .posr{margin-top: 8px;}
.vi-hds .product-list .list-item .list-item-div .posr .rank{padding: 0;margin-top: 8px;}
.vi-hds .product-list .list-item-div .posr .product-name{font-size: 16px;height: unset;margin-top: 0;}
.vi-hds .product-list .rank{padding: 10px 0;}
.vi-hds .left-box{max-width: 488px;}
.vi-hds .product-history{max-width: 590px;}

.vi-hds .association{position: absolute;top: 0;left: 0;background: #fff;z-index: 1;padding-top: 20px;}
.vi-hds .association-title{font-size:16px;margin-top: 20px;margin-bottom: 2px;}
.vi-hds .association-words-item{cursor: pointer;padding: 14px 0;}
.vi-hds .association-item-icon{font-size: 14px; width: 16px;height: 16px; line-height: 16px; color: #999;margin-right: 4px;}
.vi-hds .association-item-text{font-size: 16px;line-height: 1;color: #999;}
.vi-hds .association-item-text .active{font-size: 16px;line-height: 1;color: var(--color-primary, #712799);background-color: var(--color-primary-active, #F1E9F5);}
.vi-hds .association-words-item:hover .association-item-icon{color: #333;}
.vi-hds .association-words-item:hover .association-item-text{color: #333;text-decoration: underline;}
.vi-hds .more-history{padding: 12px 0;margin: 0 6px 12px;width: auto;font-size: 14px;display: flex;display: -ms-flexbox;align-items: center;justify-content: center;cursor: pointer;}
.vi-hds .more-history span{color:#333}
.vi-hds .more-history .iconfont{line-height: 1;font-size: 14px;}
.vi-hds .history-content .slist li{overflow: hidden;min-height: 27px;}
.vi-hds .history-content .slist li .list-item-text{overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;height: 100%;}

/*checkout header*/
.vc-hd{padding:12px 16px 11px 16px;position:fixed;top:0;left:0;width:100%;background:#fff;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);}
.vc-hd .title{height:27px;font-size:16px;font-weight:bold;}
.vc-hd .h-menu{width: 27px; text-align: center; font-weight: bold; margin-left: 12px;}
.vc-quickbox{background: rgba(0,0,0,0.8);width:100%;}
.vc-quickbox .qb-title,.vc-quickbox .qb-menu,.vc-quickbox a{color:#D4D4D4;text-align: center;}
.vc-quickbox .qb-title{font-size:16px;color:#fff;height:30px;}
.vc-quickbox .qb-title .iconfont{font-size:20px;}
.qb-title,.qb-menu{margin:20px 12px;}
.vc-quickbox .itemicon{width: 60px; height: 60px; margin: 0 auto; background: rgba(70,212,203,0.5); border-radius: 10px;}
.vc-quickbox .itemicon .iconfont{font-size:20px;}
.qb-menu .itemtext{margin-top:8px;height:20px;line-height:20px;}

.wrapper.scroll .container{margin-top:130px;}
.wrapper .container{margin-top:130px;}
.sticky-top{top:150px;}

@media only screen and (max-width:1100px){
    .vi-hd .top-icon > a .top-name,.vi-hd .top-icon > div .top-name{
        display: none;
    }
    .vi-hd .search-user-div{margin-left: 0.4rem;}
    .vi-hd .search-user-div .search-content .search-input{width: 6rem;}
    .vi-hd .head-user{width: auto;margin-left: 1.2rem;}
}

.cursor-pointer{cursor: pointer;}
.support-website-url{position:fixed;background-color:#d9d9d9;text-align:center;height:40px;padding:10px 0;width:100%;top:0;z-index:10}
.right-layout .product-price .old{color: #999;} 
.unCustom-dialog .dialog-footer{display: flex;}
.unCustom-dialog .dialog-main .dialog-footer .dialog-btn0{display: flex;align-items: center;justify-content: center;}

.buy-now-buttton{width: 100%;border-radius: 30px;padding: 6px 0; margin-top: 12px;min-height: 38px;border: 1px solid #333}
.buy-now-buttton:hover{background-color: #f6f6f6;}
.buy-now-buttton-disable{opacity: 0.3;cursor: not-allowed;pointer-events: none;}
.buy-now-buttton .buy-now-buttton-content{display: flex;justify-content: center;align-items: center;flex-direction: column;color: #333;min-height: 38px;}
.buy-now-buttton .buy-now-buttton-content .content-top{font-weight: 700;font-size: 18px;text-align: center;}
.buy-now-buttton .buy-now-buttton-content .content-bottom{font-weight: 400;font-size: 12px;text-align: center;color:#999}
.buy-now-unCustom-dialog .dialog-footer{display: flex;}
.buy-now-unCustom-dialog .dialog-btn1{background-color: var(--color-primary, #712799) !important;border: none !important;padding: 5px !important;display: flex !important;justify-content: center;align-items: center;}
.buy-now-unCustom-dialog .dialog-btn1 .content-top{font-weight: 700;font-size: 18px;text-align: center;color: #fff;}
.buy-now-unCustom-dialog .dialog-btn1 .content-bottom{font-weight: 400;font-size: 14px;text-align: center;color:#ffedd7}

.head-login-iframe-box{position:fixed;z-index: 20;height: 100vh;width:100vw;top: 0;}
#headLgoinIframe{background: transparent;width: 100%;height: 100vh;right: 0;z-index: 21;position: fixed;top: 0;}
.head-no-notice-top{margin-top:116px;}
.free-shipping-cart{background-color: #E3F3E3;font-size: 14px;padding:5px 7px;color: #486948;width: auto;line-height: 1;border-radius: 22px;border: 1px solid #BEE2AD;margin-left: 10px;} 

/* min-cart */
.outline-div{border-radius:12px;box-shadow:0px 0px 8px 0px var(--color-primary-border,#E3D4EB);opacity:0;visibility:hidden;transition:opacity 0.3s ease-in-out;}
.outline-div .min-cart-title{text-align:center;width:100%;text-align:center;color:#333;font-size:20px;font-style:normal;font-weight:700;padding:13px 0;position:relative;background-color:#ffffff}
.outline-div .min-cart-title .title-close{position:absolute;width:24px;height:24px;transform:translateY(-50%);top:50%;right:20px}
.outline-div .min-guid .triangle{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:0}
.outline-div .min-guid .triangle-filter{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #E3D4EB;position:absolute;filter:blur(2px);left:0;z-index:-10}
.outline-div .min-guid{position:absolute;width:15px;height:8px;top:-8px;right:60px}
.outline-div .min-guid img{width:100%}
.outline-div-show{opacity:1;visibility:visible}
.outline-div .min-cart{border-radius:0 0 12px 12px}
.outline-div .min-cart .free-shipping-tooltip.fixed{width:500px !important;top:50px !important}


/* foot css */
.vi-ft{background-color:var(--color-primary-bg, #F8F4FA);color:#333;width:100%;border-radius: 28px 28px 0px 0px;padding: 40px 0 32px;min-width: 800px;}
.vi-ft a{display: block;}
.vi-ft a:hover{color: var(--color-primary, #712799);}
.vi-ft .footer-top{flex-wrap: nowrap;}
.vi-ft .footer-top,.vi-ft .footer-bottom{padding-left:30px;padding-right:30px;}
.vi-ft .footer-menu-item .title{font-size:16px;font-weight: bold;}
.vi-ft .footer-menu-item .title,.vi-ft .footer-menu-item .f-item{margin-bottom: 20px;}
.vi-ft .footer-menu-item .f-item:last-child{margin-bottom: 0;}
.vi-ft .footer-right{max-width: 364px;}
.vi-ft .f-item{font-size: 14px;color:#333;}
.foot-contact-pay{padding:40px 0;}
.vi-ft .subscribe-content{position: relative;}
.subscribe-box{height: 44px;border-radius: 22px;padding:2px;border: 1px solid var(--color-primary-border, #E3D4EB);background: #FFF;overflow: visible;margin-top: 10px;}
.subscribe-box .form-text{display: table;margin: 0 auto;width: auto;position: relative;width: 100%;}
.subscribe-email{height: 38px;background-color: transparent;width: auto;font-size: 16px;border:none;flex:1 1 auto;}
.subscribe-box .subscribe-btn{width: auto;min-width: 105px;padding: 10px 10px;font-size: 16px;border-radius: 20px;height: 38px;font-weight: 400;}
.subscribe-modal .dialog-btn-box .close{min-width: 120px;}
.subscribe-modal .dialog-btn-box .subscribe-sign-btn{flex: 1.73;}
.subscribe-success-toast{position: absolute;}
.subscribe-success-toast .dialog__toast.dialog-main{bottom: -20px !important;top: auto !important;transform: translate(0px, 100%) !important;}
.subscribe-modal .dialog-main--auto.dialog-main{left: 50% !important;top: 50% !important;transform: translate(-50%, -50%) !important;}
.vi-ft .contact{padding-bottom:38px;}
.vi-ft .contact a{margin:0 10px;}
.vi-ft .contact a:first-child{margin-left:0;}
.vi-ft .contact a:last-child{margin-right:0;}
.vi-ft .contact .icon{font-size: 40px;border-radius: 50%;overflow: hidden;width: 40px;height: 40px;color: var(--color-primary,#712799);}
.vi-ft .sealimg{width:auto;max-height:2rem;margin-bottom:0;}
.vi-ft .creditimg{width:auto;max-height:2rem;}
.vi-ft .pay{row-gap: 8px;margin-left: 20px;flex-shrink: 1;}
.vi-ft .pay img{width:auto;height:32px;margin:0 2px;}
.vi-ft .footer-bottom{padding-top: 40px;margin-top: 40px;border-top: 2px solid var(--color-primary-active,#F1E9F5);}
.vi-ft .rights>*{font-size: 12px;}
.certificate-container{margin: 36px 0 0;}
.certificate-container .title{font-size: 14px;height:auto;margin: 0 auto 12px;}
.certificate-slide-item{width: 100%;}
.certificate-slide-item img{height: auto; width: 100%;mix-blend-mode: multiply;background-color: transparent !important;}
.certificate-slide-item img.lazy-loading,.certificate-slide-item img.lazyloading{mix-blend-mode: normal;}
@media only screen and (max-width: 1199px){
    .vi-ft .footer-top{flex-wrap: wrap;row-gap: 40px;}
}