/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*---- cursor mouse ----*/
.antra-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    contain: layout style size;
    pointer-events: none;
    will-change: transform;
    -ms-transition: opacity .3s,color .4s;
    -o-transition: opacity .3s,color .4s;
    -moz-transition: opacity .3s,color .4s;
    -webkit-transition: opacity .3s,color .4s;
    transition: opacity .3s,color .4s
}

.antra-cursor:before {
    background: #a61f1f;
}

.antra-cursor:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    display: block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -ms-transition: transform .3s ease-in-out,opacity .1s,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out,-o-transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out,opacity .1s,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out,-o-transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out,opacity .1s,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out,-o-transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out,opacity .1s,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out,-o-transform .3s ease-in-out;
    transition: transform .3s ease-in-out,opacity .1s,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out,-o-transform .3s ease-in-out
}

.antra-cursor:is(.-normal) {
    mix-blend-mode: normal
}

.antra-cursor:is(.-normal):before {
    background: currentColor
}

.antra-cursor:is(.-text) {
    mix-blend-mode: normal;
}

@supports (mix-blend-mode: exclusion) {
    .antra-cursor.-exclusion,.antra-cursor.-opaque {
        mix-blend-mode:exclusion
    }
}

@supports (mix-blend-mode: exclusion) {
    .antra-cursor.-exclusion:before,.antra-cursor.-opaque:before {
        background:#fff
    }
}


.antra-cursor:is(.-text) .antra-cursor-text {
    opacity: 1;
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

.antra-cursor:is(.-text):before {
    background: currentColor
}

.antra-cursor:is(.-inverse) {
    color: #fff
}

.antra-cursor:is(.-visible):before {
    -ms-transform: scale(.2);
    -o-transform: scale(.2);
    -moz-transform: scale(.2);
    -webkit-transform: scale(.2);
    transform: scale(.2)
}

.antra-cursor:is(.-visible):is(.-active):before {
    -ms-transform: scale(.23);
    -o-transform: scale(.23);
    -moz-transform: scale(.23);
    -webkit-transform: scale(.23);
    transform: scale(.23);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s
}

.antra-cursor:is(.-pointer):before {
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

.antra-cursor:is(.-text):before {
    background: #000;
    opacity: .8;
    backdrop-filter: blur(10);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.antra-cursor:is(.-text):is(.-active):before {
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s
}

.antra-cursor:is(.-opaque):before {
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.antra-cursor:is(.-opaque):is(.-active):before {
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.antra-cursor:is(.-lg):before {
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2)
}

.antra-cursor:is(.-hidden):before {
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

.antra-cursor-text {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -.01em;
    -ms-transform: scale(0) rotate(10deg);
    -o-transform: scale(0) rotate(10deg);
    -moz-transform: scale(0) rotate(10deg);
    -webkit-transform: scale(0) rotate(10deg);
    transform: scale(0) rotate(10deg);
    -ms-transition: opacity .4s,transform .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
    -o-transition: opacity .4s,transform .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
    -moz-transition: opacity .4s,transform .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
    -webkit-transition: opacity .4s,transform .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
    transition: opacity .4s,transform .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s
}

/*----- Page account -----*/
/* avatar account */
.avatar-info .company {
    font-size: 12px;
    color: #a71e25;
}

.avatar-info .name span {
    color: #888;
    font-size: 13px;
}

.avatar-info .name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.avatar-info {
    margin-left: 12px;
}

.avatar-upload span.icon {
    background: #000;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
}

.custom-account-avatar .avatar-upload {
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: pointer;
}

.custom-account-avatar .avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.avatar-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
}

.custom-account-avatar {
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
}
/*---------*/
.woocommerce-account .notice-success {
    border: 1px solid #b3b3b3;
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 30px;
    border-radius: 10px;
    background-color: #fbe5e5;
    font-size: 20px;
}

p.accout-type {
    font-size: 16px;
    padding-top: 10px;
    margin-bottom: 0;
}

.tab-account {
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    height: 100%;
}
/*--------*/
/*! CSS Used keyframes */
@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.5) skew(1deg);
        -webkit-opacity: 0.1;
    }
    30% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        -webkit-opacity: 0.5;
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: 0.1;
    }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: 0.6;
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        opacity: 0.6;
    }
    100% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: 0.6;
    }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}
/*--- css icon social ---*/
:root {
    --main-call-icon-color: #a82228;
    --main-call-icon-blur-color:rgba(168, 34, 40, 0.7);
}
.hotline-phone-ring-wrap {
    position: fixed;
    bottom: 68px;
    right: -13px;
    z-index: 10;
}
.hotline-phone-ring {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility 0.5s;
    right: 0;
    bottom: 0;
    display: block;
}
.hotline-phone-ring-circle {
    width: 110px;
    height: 110px;
    top: 0;
    left: 0;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;

    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition: all 0.5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    opacity: 0.5;
}

.hotline-phone-ring-wrap .hotline-phone-ring-circle {
    border: 2px solid var(--main-call-icon-color);
}

.zalo-ring-wrap .hotline-phone-ring-circle {
    border: 2px solid #1564a7;
}

.hotline-phone-ring-circle-fill {
    width: 80px;
    height: 80px;
    top: 16px;
    left: 16px;
    position: absolute;
    background-color: var(--main-call-icon-blur-color);
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all 0.5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.hotline-phone-ring-wrap .hotline-phone-ring-circle-fill {
    background-color: var(--main-call-icon-blur-color);
}

.zalo-ring-wrap .hotline-phone-ring-circle-fill {
    background-color: rgba(21,100,167,.7);
}

.hotline-phone-ring-img-circle {
    background-color: var(--main-call-icon-color);
    width: 50px;
    height: 50px;
    top: 31px;
    left: 31px;
    position: absolute;
    background-size: 20px;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotline-phone-ring-wrap .hotline-phone-ring-img-circle {
    background-color: var(--main-call-icon-color);
}

.zalo-ring-wrap .hotline-phone-ring-img-circle {
    background-color: #1564a7;
}

.hotline-phone-ring-img-circle .pps-btn-img {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.hotline-bar {
    position: absolute;
    background: var(--main-call-icon-color);
    height: 45px;
    width: 165px;
    line-height: 40px;
    border-radius: 3px;
    padding-right: 10px;
    background-size: 100%;
    cursor: pointer;
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    z-index: 9;
    border-radius: 50px;
    right: 47px;
    bottom: 31px;
}
.hotline-bar > a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-indent: 14px;
    letter-spacing: 1px;
    display: block;
    line-height: 45px;
    font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
    color: #fff;
}
span.background-zalo-ib,
span.background-call {
    width: 31px;
    height: 31px;
    background-size: cover;
}
span.background-call {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMA/fnwB9f2sUzq5dLDrDUi+t27jWpmXzALBOHNtJ6Dd1hUR0I9OB8Cx5mSiH1wGxkWEaWjUGLgVpsAAAFWSURBVDjLdZPpkoIwEIQn4RIFFA+8EURBXY+98v6vtrkYki38fqWmO0yqZwCDJjnsvHASbuPsC3oYjBhC4vF/+RwRxhwHLTRfm/I4IL4WkcA19CHrIVqB5pmqSjixHVetf3pMcnkVxHYMpL7Sr9/zngvbkDYAbZFs5JumtuMXOKrB8AMER9swFfno8wIkI8vg8zAifT4IebmjzGIJY/Nrruczmww7UN/lBoaJYeO5PjnshC8wmKOB58ANyYTZFFDq+5xKDHUjxvSDT60h6QypGM76nNU8/ZnSh7wirugR3KAjl5WYn4RX7wJ5QEfUhvN0ZAvFHfWEqJw4c2YgJyIjUx0Ezc50XOSl9U2Gpzd3JdwI2eaPu6rMcOFZLyH+HftenRSgedE+nZbQMuvT/SPqtRrQ9krM/icl4hpGA4AKl2GUudDxzbdJ+d0ySCn14gosgiCB9/wB7hZ8KfMqBEkAAAAASUVORK5CYII=);
}
span.background-zalo-ib {
    background-image: url(data:image/png;base64,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);
}
.zalo-ring-wrap {
    position: fixed;
    right: -14px;
    bottom: 180px;
    z-index: 10;
}
/*---- popup all page ----*/
.text.txt-discount-02 p {
    font-weight: bold;
    text-transform: capitalize;
}

.mfp-bg.mfp-ready {
    opacity: 0.95!important;
}

.mfp-content .mfp-close {
    color: #fff;
    opacity: 1;
}

.text.txt-discount p {
    width: 70px;
    height: 70px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 10%;
    font-weight: 700;
}

.mfp-content .lightbox-content.lightbox-white {
    background-color: rgba(255, 255, 255, 0);
    box-shadow: none;
}
/*------ page dang nhap/dang ky -----*/
.avatar-info .name span {
    display: none;
}

.woocommerce-account .nav.nav-vertical li.active a {
    color: #a9232a;
    font-size: 15px;
}
/*--- Lưu ý thành viên - đại lý --*/
.membership-notice {
    background: #fffbe6;
    border-left: 4px solid #f0c000;
    padding: 15px 20px;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    border-radius: 6px;
}

.notice-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #cc8800;
}

.notice-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.notice-item {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.membership-info strong {
    color: #0073aa;
}

.reseller-info strong {
    color: #c0392b;
}
/*------*/
table.table-user-role {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.table-user-role thead {
    background-color: #f7f9fc;
}

table.table-user-role tr > th {
    padding: 20px 20px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e0e6ed;
}

.table-user-role tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #eceff4;
}

.table-user-role tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.table-user-role tbody tr:hover {
    background-color: #f0f4f8;
}

.table-user-role td:first-child {
    font-weight: 600;
    color: #0073aa;
}

.woocommerce-account .tab-content-account .woocommerce-MyAccount-content p a {
    color: #a82228 !important;
    font-size: 18px!important;
}

.automatewoo-birthday-section .automatewoo-birthday-section__already-set-text {
    display: none;
}

.password-input .show-password-input {
    display: none;
}

.account-popup .fluentform label.ff-el-image-input-src {
    width: 50px;
    height: 50px;
}
.account-popup .account-register-inner .ff-default .ff_btn_style:hover {
    background-color: #85181e;
    opacity: 1;
}

.account-popup .account-register-inner .ff-btn.ff-btn-submit {
    background-color: #a71e25;
}

.account-popup .account-register-inner .ff-default .ff-el-form-control {
    box-shadow: none;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    font-family: 'Roboto Condensed';
}

.account-popup .account-register-inner .ff-default .ff-el-form-control:focus {
    border: 1px solid #a71e25;
}

.account-page {
    padding: 80px 0;
    background: linear-gradient(-90deg, #a71e25, transparent);
}

.head-login {
    margin-bottom: 20px;
    text-align: center;
}

.head-login span {
    font-size: 13px;
}

.head-login .txt-head {
    font-size: 27px;
    font-weight: 500;
    padding-top: 20px;
}

.head-login img {
    width: 150px;
    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

#login-form-popup {
    border-radius: 15px;
    max-width: 700px;
}

.frasers-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.frasers-tab {
    padding: 9px 22px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid transparent;
    transition: border 0.2s;
}

.frasers-tab.active {
    border-bottom: 2px solid #a61e25;
    color: #a61e25;
}

.frasers-tab-content {
    display: none;
}
.frasers-tab-content.active {
    display: block;
    width: 700px;
    margin: 0 auto;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.2);
    padding: 60px 40px;
    border-radius: 15px;
}
/*-----css cart, checkout ------*/
.section-cart h1 {
    text-transform: uppercase;
}

.section-cart {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(-90deg, #a71e25, transparent);
}
/*---- css contact ------*/
.form-contactus .ff-default .ff-el-form-control:focus {
    border:1px solid #a82228;
}
.form-contactus .ff-el-group  .ff-btn.ff-btn-submit {
    background-color: #a82228;
}

.form-contactus .ff-default .ff-el-form-control {
    border-radius: 0px;
    box-shadow: none;
}
/*------ animation trang chu */
.hidden-on-load {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}
/*---- single product ------*/
.single.single-product .product-gallery-stacked.product-gallery-grid-layout .flickity-slider {
    gap: 0;
}

.single.single-product .product-gallery-stacked.product-gallery-grid-layout .flickity-slider > div {
    border: 1px solid #eceff1;
}

.single.single-product button.ux-buy-now-button.button.primary {
    width: 100%;
    font-size: 20px;
    margin-top: 18px;
}
.single.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    position: relative;
}

.single.single-product .product-stacked-info {
    padding: 0 31px;
}

.single.single-product .product-footer {
    max-width: 1190px;
    margin: 0 auto;
}

.single.single-product .product-main {
    padding: 0;
}

.single.single-product .product-main .product-info {
    padding: 0;
    border-left: 1px solid #eceff1;
}

form.cart {
    position: relative;
}

.product-wishlist {
    position: absolute;
    right: 54px;
    top: 4px;
    border: 1px solid #000;
    padding: 7px 12px;
}

.single-product .cart,
.single-product .yith-wcwl-add-button {
    display: inline-block;
    vertical-align: middle;
}

.single-product .yith-wcwl-add-button {
    margin-left: 10px;
}

.overlay-refund {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: none;
}

.popup-refund {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #000;
    z-index: 999999999;
    display: none;
}

.stack-single button.close-size.close-size-2 {
    top: 10px;
    right: 10px;
    padding: 0 15px;
}

html.noscroll,
body.noscroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
}

.freeship-text,
.refund-text {
   cursor: pointer;
}

.popup-freeship.active,
.overlay-freeship.active,
.overlay-refund.active,
.popup-refund.active {
    display: block;
}

.overlay-freeship {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    display: none;
    z-index: 99999;
}

.popup-freeship {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 150px;
    background: #fff;
    border: 1px solid #000;
    z-index: 999999999999999999999999999999999999999999999999999999999;
    display: none;
}

.stack-single  .product-short-description p {
    font-weight: 400;
}

.product-footer .accordian-wrapper .accordion div .woocommerce-Reviews  #review_form .has-border {
    border: none;
}
.stack-single button.close-size {
    position: fixed;
    top: -22px;
    right: -31px;
    color: #000;
    font-size: 20px;
    background: #fff;
    border: 1px solid #000;
    padding: 0px 15px;
    cursor: pointer;
    z-index: 9999;
    margin: 0;
}

.stack-single .overlay-size.active,
.stack-single .popup-size.active {
    display: block;
}

.stack-single .overlay-size {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999999;
    display: none;
}

.stack-single .popup-size {
    position: fixed;
    width: 1000px;
    height: 400px;
    overflow-y: scroll;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999999;
    display: none;
}

.stack-single .rules-size span:last-child {
    font-size: 13px;
}

.stack-single .rules-size {
    border: 1px solid #000;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 20px;
}

.product-footer .accordian-wrapper .accordion .accordion-title .toggle {
    right: 0;
    left: auto;
}

.product-footer .accordian-wrapper .accordion div .accordion-title {
    font-weight: 600;
    z-index: 1;
}

/*.product-footer .accordian-wrapper .accordion div {*/
/*    padding: 20px 0;*/
/*}*/

.product-footer .accordian-wrapper {
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.stack-single .product-info .info-shipping span:last-child{
    text-decoration: underline;
    font-weight: bold;
}

.stack-single .product-info .info-shipping {
    margin-top: 20px;
}
.stack-single .product-info .notice-size span:last-child {
    font-size: 13px;
    font-weight: 300;
}
.stack-single .product-info .notice-size {
    border: 1px solid #000;
    padding: 10px 20px;
}
.stack-single .single_add_to_cart_button::before {
    position: absolute;
    content: "";
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
}

.stack-single .single_add_to_cart_button::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 6 Free";
    top: 7px;
    right: 5px;
    padding-right: 6px;
    background-image: url(/wp-content/uploads/2025/07/shopping-cart-01.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.stack-single .single_add_to_cart_button {
    background-color: #000;
    padding-right: 31px;
    line-height: 40px;
}

.stack-single .price.product-page-price {
    font-size: 16px;
}

.stack-single .product-title {
    text-transform: uppercase;
    font-size: 20px;
}
.stack-single .product-info .breadcrumbs {
    font-size: 13px;
}

.variations .ux-swatch--color, .variations .ux-swatch--image {
    width: 62px;
    height: 62px;
}
.single.single-product .stack-single .product-gallery product-gallery-slider img {
 filter: grayscale(100%)
}

.single.single-product .stack-single {
    max-width: 100% !important;
}
/*---- product archive ---*/
.yith-wcan-filters .yith-wcan-filter .price-slider.both .price-slider-min,
.yith-wcan-filters .yith-wcan-filter .price-slider.both .price-slider-max {
    width: 87px!important;
}

.archive .product-small:hover .box-text.box-text-products {
    position: absolute;
    background: #fff;
    z-index: 10;
    border: 1px solid #000;
    border-top: none;
}
.archive .category-page-title .page-title-inner div:last-child.flex-col {
    display: none;
}

.archive .product-small .box-text.box-text-products .ux-swatches.ux-swatches-in-loop {
    opacity: 0;
    height: 0;
}

.archive .product-small:hover .box-text.box-text-products .ux-swatches.ux-swatches-in-loop {
    opacity: 1;
    height: auto;
}

.recently-viewed-products > .view-products > .product-small.slick-slide {
    width: 25% !important;
}

.subcategories .slick-slide {
    min-width: unset;
}
/*-- Bộ lọc --*/
.filter-body .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label {
    padding: 7px 15px;
}
.filter-body .filter-title {
    font-size: 14px;
}

.filter-body .yith-wcan-filters .btn.yith-wcan-reset-filters {
    border: 1px solid #000;
    border-radius: 30px;
    background-color: #a61e25;
    color: #fff;
}

.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1002;
    width: 100%;
    height: 100%;
    display: none;
}

.filter-overlay.active {
    display: block;
}

.filter-head .close-filter i {
    font-size: 23px;
    color: #a71e25;
    cursor: pointer;
}

.filter-head span {
    font-size: 20px;
    font-weight: 800;
}

.filter-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf0f2;
}

.popup-filter {
    position: fixed;
    top: 0;
    right: -405px;
    transition: right 0.3s ease;
    z-index: 1003;
    width: 400px;
    height: 100%;
    background: #fff;
    border: 1px solid #edf0f2;
    padding: 40px;
    overflow-y: scroll;
}

.popup-filter.active {
    right: 0;
}
/*------*/
.filter-button:hover {
    opacity: 0.5;
}

.filter-button {
    border: 1px solid #000;
    cursor: pointer;
    margin: 0;
}

.tool-shop .filter {
    white-space: nowrap;
}

.tool-shop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

h1.title-shop {
    margin-bottom: 35px;
    text-transform: uppercase;
}

ul.subcategories li:hover a {
    color: #fff;
}

ul.subcategories li:hover {
    background-color: #000;
}

ul.subcaterelated {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
}

.product-box .ux-swatches-in-loop .ux-swatch.selected {
    border-bottom: 2px solid #000;
    box-shadow: none;
}

.product-box .ux-swatches-in-loop .ux-swatch {
    box-shadow: none;
}

.product-box .ux-swatches.ux-swatches-in-loop {
    gap: 4px;
    box-shadow: none;
}
.recently-viewed-products .products .product-small.box:hover .box-image  {
    border: 1px solid rgba(0, 0, 0, 1);
    border-bottom: none;
}

.recently-viewed-products .products {
    display: flex;
    flex-direction: row;
}

.recently-viewed-products .view-products > div {
    width: 25%;
}

.title-view,
.title-related {
    font-size: 22px;
    margin-top: 50px;
}

.products.row-small .product-small  .product-small.box:hover .box-image {
    border: 1px solid rgba(0, 0, 0, 1);
    border-bottom: none;
}

.product-small .box-text.box-text-products {
    padding: 10px;
}

.product-small .box-image {
    border: 1px solid rgba(235, 239, 240, 0.7);
}

.product-small .box-text.box-text-products .title-product {
    margin: 10px 0px 5px 0px;
    display: block;
    display: -webkit-box;
    min-height: 20px;
    -webkit-line-clamp: 2;
    visibility: visible;
    text-overflow: ellipsis;
    overflow:hidden;
    -webkit-box-orient: vertical;
}
.product-small .box-text.box-text-products p {
    color: #767677;
    margin-bottom: 0;
    padding: 0;
}

.product-small .box-text.box-text-products .title-product,
.product-small .box-text.box-text-products p {
    font-size: 14px;
    font-weight: 300;
}

ul.subcategories li {
    border: 1px solid #000;
    padding: 2px 15px;
    border-radius: 6px;
}

ul.subcategories {
    display: flex;
    gap: 22px;
    list-style: none;
}

.archive  .star-rating {
    display: none;
}
/*------ css about ----*/
.section.section-value {
   padding: 20px 0;
}

.section.section-story::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/wp-content/uploads/2025/07/panttern-sport.jpg');
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.2;
}

.section.section-story {
    position: relative;
    width: 100%;
    height: 100%;
}

.txt-desc p {
    text-align: justify;
}

.image-about {
    animation: bounceY 1s ease-in-out infinite;
}

.image-about img,
.image-about-02 img {
    border-radius: 15px;
}

.txt-about {
    text-align: justify;
}
/*--- single post ----*/
.desc-blog .block-sidebar .cover-sidebar {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 15px;
}

.desc-blog .block-content .entry-content {
    text-align: justify;
}

.desc-blog .row {
    margin-top: 60px;
}

.single-blog .rank-math-breadcrumb,
.single-blog .rank-math-breadcrumb a {
    color: #fff;
}
.single-blog .header-title h1 {
    color: #fff;
    z-index: 2;
}

.single-blog .header-title {
    position: relative;
    background: url("/wp-content/uploads/2025/07/bg-single-post.jpg");
    height: 500px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    align-items: center;
    z-index: 3;
}

.single-blog .header-title::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: -1;
}
/*----- css footer -----*/
.back-to-top.button {
    background: #a61e25;
    color: #fff;
}

.menu-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-mobile .menu-button img {
    width: 20px;
    height: 20px;

}

.menu-bar::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #f0f2fb;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.menu-bar {
    background: white;
    box-shadow: 0 10px 20px rgb(0 0 0 / 78%);
    padding: 16px 20px;
    display: flex;
    gap: 24px;
    justify-content: space-around;
    align-items: center;
    z-index: 1;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.menu-bar img {
    width: 30px;
    transition: 0.2s;
}

.menu-bar img.active {
    opacity: 1;
}

.menu-button {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom right, #a61e25, #f88f95);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 4px solid white;
}

.footer-mobile {
    display: none;
}

.menu-footer .ux-menu-link.flex .ux-menu-link__link {
    font-size: 14.4px;
}

.footer-wrapper .footer-inner {
    padding: 10px 0;
}

.footer-wrapper .absolute-footer {
    padding: 0;
}

.copyright-footer {
    border-top: 1px solid #ffffff26;
}

.copyright-footer .footer-inner span {
    color: #fff;
}

.menu-footer a,
.menu-footer a span,
.menu-footer a span:hover {
    color: #fff;
}
/*---- css blog archive -------*/
.blog-post-item:hover .post-thumbnail img {
    transform: scale(1.2);
    transition: 0.4s;
    border-radius: 15px;
}

.blog-post-item .post-thumbnail img {
    transition: 0.4s;
    border-radius: 15px;
}

.blog-post-item .post-thumbnail {
    overflow: hidden;
    border-radius: 15px;
}

.blog-pagination .page-numbers:hover {
    background-color: #a82228;
}

.blog-pagination .page-numbers.current {
    background-color: #a82228;
}

.blog-pagination .page-numbers {
    padding: 4px 15px;
    width: auto;
    height: auto;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}

.blog-pagination {
    text-align: center;
}

.blog-post-item h3.title {
    font-size: 16px;
    margin-top: 15px;
    display: block;
    display: -webkit-box;
    min-height: 28px;
    -webkit-line-clamp: 2;
    visibility: visible;
    text-overflow: ellipsis;
    overflow:hidden;
    -webkit-box-orient: vertical;
}

.blog-post-item p {
    font-size: 14px;
    display: block;
    display: -webkit-box;
    max-height: 74px;
    -webkit-line-clamp: 3;
    visibility: visible;
    text-overflow: ellipsis;
    overflow:hidden;
    -webkit-box-orient: vertical;
}

.section-blog {
    padding: 0 50px;
}

.blog-post-item {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    animation: slideUp 0.8s ease-out forwards;
}

.blog-post-item .label {
    position: absolute;
    top: 311px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 4px 15px;
    border-radius: 30px;
    border: 1px solid #fff;
    font-size: 13px;
}
.tab-blog .nav-simple li:first-child::before {
    position: absolute;
    content: "";
    height: 90%;
    width: 2px;
    top: 3px;
    right: -16px;
    background-color: #000;
}

.tab-blog .nav-simple {
    border: 2px solid #000;
    max-width: 246px;
    width: 100%;
    justify-content: space-between;
    border-radius: 15px;
    padding: 4px 12px;
}
/* -- css product slider home ---*/
.product-category .slick-slide {
    float: none!important;
    display: inline-block!important;
    width: auto;
    overflow: hidden;
}

.product-category .slick-prev ,
.view-products .slick-prev {
    left: 21px;
    z-index: 2;
    border: 1px solid #000;
    background: #fff;
    width: 48px;
    height: 48px;
}

.product-category .slick-next,
.view-products .slick-next {
    right: 21px;
    z-index: 2;
    border: 1px solid #000;
    background: #fff;
    width: 48px;
    height: 48px;
}

.product-category .slick-next:before,
.view-products .slick-next:before {
    content: url('/wp-content/uploads/2025/07/arrow_next_right_icon.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.product-category .slick-prev:before,
.view-products .slick-prev:before {
    content: url('/wp-content/uploads/2025/07/arrow_back_left_icon.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.product-category .item:hover {
    border: 1px solid #000;
    transition: 0.4s;
}

.product-category .slick-prev:before,
.product-category .slick-next:before {
    color: #000;
}

.product-category .category-item {
    color: #767677;
    font-size: 13px;
    font-weight: 300;
    text-transform: capitalize;
    padding: 0 10px;
    height: 32px;
    -webkit-line-clamp: 1;
    visibility: visible;
    text-overflow: ellipsis;
    overflow:hidden;
    -webkit-box-orient: vertical;
}
.product-category {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    overflow: hidden;
    margin: -10px;
}

.product-category .item {
    width: calc((100% - 80px) / 4);
    margin: 10px;
}

.product-category .item img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(235, 239, 240, 0.7);
    margin-bottom: 10px;
}

.product-category .item .woocommerce-Price-amount {
    font-size: 14px;
    padding: 0 10px;
}

.product-category .item  .title-product {
    font-size: 14px;
    font-weight: 300;
    margin: 0 10px;
}
/*--------------------------------*/
body .col.small-12.large-12 {
    padding-left: 0;
    padding-right: 0;
}
/*---- css menu -----*/
.txt-heading-04 {
    font-size: 16px;
    font-weight: 600;
}

.header-search-form-wrapper input#woocommerce-product-search-field-0 {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.searchform-wrapper button.ux-search-submit.submit-button {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
/*--- css heading ----*/
.heading-1 h2 {
    background: #000;
    width: auto;
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 6px 20px;
    font-size: 18px;
}

.txt-style h2 {
    position: relative;
    transition: 0.4s;
}

.txt-style h2::after {
    content: "\f061";
    font-family: "FontAwesome";
    position: absolute;
    display: block;
    top: 13%;
    left: 70%;
    font-size: 20px;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    color: #a61e25;
}

.txt-style-2 h2::after {
    left: 83%;
}

.txt-style:hover h2::after {
    transform: translateX(10px);
    transition: 0.4s;
}
/*--- css trang chủ ---*/
.header-top .nav-small .nav>li>a,
.header-top .nav.nav-small>li>a {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    padding-right: 5px;
}

.heading-home img {
    width: 50px;
    height: 50px;
}

.heading-home-2 img {
    width: 100px;
}

.product-category .item {
    position: relative;
}

.wishlist-home a {
    width: 23px;
    height: 23px;
}

.wishlist-home {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 999;
}

.highlight-gradient div {
    font-weight: bold;
    background: linear-gradient(90deg, #ffe268, #76f6d4, #b2f25b);
    font-size: 33px;
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: gradient-shift 3s infinite linear;
}

.tab-category-product .nav-simple li.tab.active {
    background-color: #000;
}

.tab-category-product .nav-simple li.tab.active a span {
    color: #fff;
}

.latest-posts .post-item .desc {
    font-size: 14px;
    display: block;
    display: -webkit-box;
    max-height: 74px;
    -webkit-line-clamp: 3;
    visibility: visible;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-weight: 400;
    padding: 0 7px;
}

.latest-posts .post-item .title {
    font-size: 16px;
    margin-top: 15px;
    display: block;
    display: -webkit-box;
    min-height: 51px;
    -webkit-line-clamp: 2;
    visibility: visible;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    padding: 0 7px;
}

.latest-posts .post-item .image-thumbnail {
    overflow: hidden;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.latest-posts .post-item img {
    transition: 0.4s;
}

.latest-posts .post-item:hover img {
    transform: scale(1.2);
    transition: 0.4s;
}

.latest-posts .post-item img {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    object-fit: cover;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.latest-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.latest-posts .post-item {
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.desc-about-home {
    width: 50%;
    text-align: justify;
    margin: 40px auto;
}

.image-home-about .img-inner img {
    display: block;
    border-radius: 15px;
    margin: auto;
    text-align: center;
    width: 30%;
}

.tab-category-product .nav-simple li.tab:hover a span {
    color: #fff;
}

.tab-category-product .nav-simple li.tab:hover {
    background-color: #000;
}

.tab-category-product .nav-simple li.tab a span {
    font-weight: 300;
    color: #000;
}

.tab-category-product .nav-simple li.tab a span::after {
    position: absolute;
    content: "";
    top: 7px;
    right: 13px;
    background: url('/wp-content/uploads/2025/08/icon-football-2.png');
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
}

.tab-category-product .nav-simple li.tab {
    border: 1px solid #929396;
    padding: 0 52px 0 15px;
    position: relative;
}

.btn-register span {
    color: #000;
}

.btn-register::before {
    content: "";
    position: absolute;
    min-width: 178px;
    height: 42px;
    top: 0px;
    right: -5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    z-index: -1;
}

.btn-shopping::before {
    content: "";
    position: absolute;
    width: 117px;
    height: 41px;
    top: 2px;
    right: -6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    z-index: -1;
}

.btn-shopping span {
    color: #000;
    position: relative;
}

.txt-slider p {
    background-color: #fff;
    padding: 0 10px;
    display: inline-block;
}

.txt-slider h3 strong {
    background-color: #fff;
    padding: 0 10px;
}

button#toggleBtn,
button#toggleBtn02 {
    background: #a61e25;
    border-radius: 10px;
    line-height: 16px;
    display: flex;
    align-items: center;
    padding: 13px 20px;
}

.btn-video {
    position: absolute;
    top: -578px;
    right: -986px;
}

.video-banner {
    position: relative;
}

.sub-menu.nav-dropdown {
    border-radius: 10px;
}

.header-nav.header-nav-main {
    justify-content: center;
}

.image-menu-header img {
    border-radius: 15px;
}

.ux-menu.menu-mega .ux-menu-link .ux-menu-link__link span.ux-menu-link__text:hover {
    border-bottom: 1px solid rgba(119, 119, 119);
}

.ux-menu.menu-mega .ux-menu-link .ux-menu-link__link span.ux-menu-link__text {
    font-weight: 400;
    color: rgba(119, 119, 119);
}

.menu-child {
    margin: 0 auto !important;
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .product-wishlist {
        position: static;
        max-width: 44px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .product-wishlist {
        right: 390px;
    }

    .next-prev-thumbs li.has-dropdown:hover>.nav-dropdown, .no-js li.has-dropdown:hover>.nav-dropdown, li.current-dropdown>.nav-dropdown {
        left: -224px!important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
    .filter-button {
        display: none;
    }

    #main-menu .nav.nav-sidebar.nav-vertical .header-newsletter-item {
        display: none;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
      /*  --- Nút đăng nhập này chỉ hiển thị ở desktop ----  */
    .html_topbar_right {
        display: none !important;
    }
    /* --- Menu mobile ----   */
    #main-menu .nav.nav-sidebar.nav-vertical .header-newsletter-item {
        display: none;
    }
    /* --- accout page ----  */
    .woocommerce-account .tab-account {
        margin: 0 10px 20px 10px;
    }
    /* ---- Single Product ----   */
    .single.single-product .product-stacked-info {
        padding: 0 10px;
    }

    .single.single-product .product-main .product-info {
        padding: 10px;
    }

    .single-product .stack-single .popup-size {
        width: 100%;
        max-width: 400px;
    }

    .single-product .product-footer .accordian-wrapper .accordion-inner {
        padding: 0;
    }

    .single-product .product-wishlist {
        position: absolute;
        right: -3px;
    }

    .single-product .popup-refund {
        max-width: 500px;
        width: 100%;
    }
    .popup-freeship {
        width: 100%;
        height: auto;
    }

    .single-product .stack-single button.close-size {
        top: -50px;
        right: 0;
    }

    .stack-single button.close-size.close-size-2 {
        top: 2px;
        right: 5px;
        width: 35px;
        padding: 0;
        font-size: 15px;;
    }

    /* ---- Menu --- */
    .searchform-wrapper input {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
    /* ---- Footer ---- */
    .menu-container.footer-mobile {
        display: block;
    }

    .footer-action-buttons {
        display: none;
    }
    /* ---- Login ------ */
    .account-popup .frasers-tab {
        font-size: 14px;
    }

    .frasers-tab-content.active {
        width: 100%;
    }
    /*--- Popup discount ----*/
    .text.txt-discount-02 p {
        font-size: 18px;
    }

    .text.txt-discount p {
        width: 50px;
        height: 50px;
        font-size: 13px;
    }

    /* --- Archive product ----  */
    .filter-button {
        display: none;
    }

    .archive .popup-filter {
        width: 300px;
    }

    .tool-shop {
        flex-direction: column;
    }

    .tool-shop .filter {
        width: 100%;
        margin-bottom: 20px;
    }

    .title-view, .title-related {
        font-size: 22px;
    }

    .recently-viewed-products .view-products > div {
        width: 100%;
    }

    ul.subcategories {
        overflow-x: scroll;
    }

    ul.subcategories li {
        font-size: 14px;
        white-space: nowrap;
    }
    /*--- css home -----*/
    .tab-category-product > .nav.nav-simple .slick-prev:before,
    .frasers-tabs .slick-prev:before {
        content: url('/wp-content/uploads/2025/07/arrow_back_left_icon.svg');
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .tab-category-product > .nav.nav-simple .slick-next:before,
    .frasers-tabs .slick-next:before {
        content: url('/wp-content/uploads/2025/07/arrow_next_right_icon.svg');
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .tab-category-product {
        position: relative;
    }

    .tab-category-product > .nav.nav-simple .slick-prev,
    .frasers-tabs .slick-prev {
        left: 2px;
        z-index: 2;
        border: 1px solid #000;
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 2px 1px 5px #a71e25;
    }

    .tab-category-product > .nav.nav-simple .slick-next,
    .frasers-tabs .slick-next {
        right: 2px;
        z-index: 2;
        border: 1px solid #000;
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 2px 1px 5px #a71e25;
    }

    .tab-category-product .nav-simple li.tab {
        margin: 0 6px;
        height: 50px;
        border-radius: 10px;
    }

    .image-home-about .img-inner img {
        width: 70%;
    }

    .section.section-product-news,
    .section.section-product-hot,
    .section.section-category-product,
    .section.section-introduce{
        padding: 0 10px;
    }

    .latest-posts {
        grid-template-columns: repeat(1, 1fr);

    }

    .btn-shopping::before {
        width: 82px;
        height: 28px;
        top: 2px;
        right: -4px;
    }


    .desc-about-home {
        width: 100%;
        text-align: justify;
        margin: 20px auto;
    }
    /* --- css about ---  */
    .section.section-slogan {
        padding: 0px 10px;
    }
    /*  css blog mobile  */
    .heading-main h1 {
        font-size: 22px;
    }

    .section-blog {
        padding: 0 10px;
    }

    .wp-singular.page-template .tab-panels .blog-category-posts {
        grid-template-columns: repeat(1, 1fr)!important;
    }

}

/*--------------------------- Keyframe animation ------------------*/
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

/* keyframe about */
@keyframes circle {
    0% { clip-path: circle(75%); }
    100% { clip-path: circle(0%); }
}

@keyframes bounceY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }  /* Nhúng lên */
    100% { transform: translateY(0); }
}