/*
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.   ***************/
/* body,
body p,
body a,
body span,
body div,
body li,
body ul,
body ol,
body strong,
body b {
    font-family: "Times New Roman", Georgia, serif !important;
} */

ul.header-nav.header-nav-main.nav.nav-left {
    display: flex;
    justify-content: flex-end;
}

.header-nav.nav-right {
    justify-content: flex-start !important;
}

.header-nav.nav-right>li {
    margin-left: 0 !important;
}

.header-nav.nav-right>li.cart-item {
    margin-left: auto !important;
}

.header-nav-main a.nav-top-link {
    font-size: 24px;
    font-weight: 600;
    font-family: "Times New Roman", Georgia, serif !important;
}

ul.header-nav.header-nav-main {
    display: flex;
    gap: 24px;
}

.section-footer span.ux-menu-link__text {
    color: rgb(137, 137, 137);
    font-size: 14px;
}

.section-footer span.ux-menu-link__text:hover {
    color: #ae1a19;
}

.section-footer a.ux-menu-link__link.flex {
    margin-bottom: -8px;
}

.menu-info .ux-menu-link__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #898989;
    transition: color 0.3s ease;
}

.menu-info .ux-menu-link__text::before {
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;

    background-color: #898989;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='black' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='black' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    transition: background-color 0.3s ease;
}


.menu-info .ux-menu-link:hover .ux-menu-link__text::before {
    background-color: #ae1a19;
}

.menu-blog-post .ux-menu-link__text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #898989;
    transition: color 0.3s ease;
}

.menu-blog-post .ux-menu-link__text::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #898989;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}


.menu-blog-post .ux-menu-link:hover .ux-menu-link__text::before {
    background-color: #ae1a19;
}


.cf7-subscribe-form {
    display: flex;
    max-width: 602px;
}

.cf7-subscribe-field input[type="email"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: none;
    background: #e5e5e5;
    color: #333;
    font-size: 16px;
    outline: none;
}

.cf7-subscribe-button input[type="submit"] {
    height: 50px;
    padding: 0 25px;
    border: none;
    background: #650301;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}

.cf7-subscribe-button input[type="submit"]:hover {
    background: #4e0504;
}

.cf7-subscribe-field,
.cf7-subscribe-button {
    margin: 0;
}

.cf7-subscribe-field {
    flex: 1;
}

.section-footer {
    border-bottom: 1px solid #ddd;
}


.copyright-footer {
    color: #898989;
}

.dark .payment-icons .payment-icon {
    background-color: #AE1A19;
    opacity: 1;
}


.product-small.box .box-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-small.box .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-small.box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-small.box .box-text {
    flex-grow: 1;
}

p.name.product-title.woocommerce-loop-product__title a {
    font-size: 17px;
    color: #000;
    min-height: 48px;
}

span.woocommerce-Price-amount.amount {
    color: #ae1a19;
    font-size: 22px;
}

.product-small.box {
    transition: all 0.25s ease;
}

.product-small.box:hover {
    transform: translateY(-3px);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.12);
}

.product-small.box .box-image img {
    transition: all 0.3s ease;
}

.product-small.box:hover .box-image img {
    transform: scale(1.03);
}

.img-effect {
    position: relative;
}

.img-effect .img-inner {
    position: relative;
}

.img-effect::before,
.img-effect::after,
.img-effect .img-inner::before,
.img-effect .img-inner::after {
    content: "";
    position: absolute;
    background: #fff;
    z-index: 10;
    transition: all .45s ease;
}

.img-effect::before {
    top: 15%;
    left: 15%;
    width: 0;
    height: 2px;
}

.img-effect::after {
    bottom: 15%;
    left: 15%;
    width: 0;
    height: 2px;
}

.img-effect .img-inner::before {
    top: 15%;
    left: 15%;
    width: 2px;
    height: 0;
}

.img-effect .img-inner::after {
    top: 15%;
    right: 15%;
    width: 2px;
    height: 0;
}


.img-effect:hover::before {
    width: 80%;
    left: 10%;
}

.img-effect:hover::after {
    width: 80%;
    left: 10%;
}

.img-effect:hover .img-inner::before {
    height: 80%;
    top: 10%;
}

.img-effect:hover .img-inner::after {
    height: 80%;
    top: 10%;
}

span.widget-title.shop-sidebar {
    background: #DDDDDD;
    padding: 15px 20px;
    display: block;
    margin-bottom: 20px;
}

.widget .is-divider {
    display: none;
}

.header-main {
    box-shadow: 0px -8px 38px 0px rgba(66, 66, 66, 0.23);
}


.hd-breadcrumb {
    font-size: 16px;
    color: #777;
}

.hd-breadcrumb a {
    color: #777;
    text-decoration: none;
}

.hd-breadcrumb a:hover {
    color: #AE1A19;
}

.hd-breadcrumb .sep {
    margin: 0 8px;
    color: #999;
}

.hd-breadcrumb .current {
    color: #AE1A19;
    font-weight: 500;
}


.hd-contact-form {
    width: 100%;
}

.hd-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.hd-form-label {
    width: 140px;
    font-size: 15px;
    color: #333;
}

.hd-form-label .required {
    color: red;
}

.hd-form-field {
    flex: 1;
}

.hd-contact-form input[type="text"],
.hd-contact-form input[type="email"],
.hd-contact-form textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 12px;
    font-size: 15px;
    background: #fff;
}

.hd-contact-form textarea {
    height: 140px;
}

.hd-form-submit {
    justify-content: flex-end;
}

.hd-contact-form input[type="submit"] {
    background: #AE1A19;
    color: #fff;
    border: none;
    padding: 6px 28px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
    transition: .2s;
    display: flex;
    margin: 0px;
}

.hd-contact-form input[type="submit"]:hover {
    background: #6c0f0f;
}

.text-blog-relate h4.uppercase {
    background: #DDDDDD;
    padding: 12px 20px;
}

.blog-small .col.post-item {
    margin-bottom: -33px;
}

h5.post-title.is-large a {
    color: #000;
}

h5.post-title.is-large a:hover {
    color: #AE1A19;
}


.blog-big h5.post-title.is-large a {
    font-size: 18px;
}

a.button.is-underline,
h1.entry-title {
    color: #AE1A19;
}

/* Tab bình thường */
.product-tabs li {
    border-top: none !important;
    background: #AE1A19;
    margin-right: 5px;
}

/* link trong tab */
.product-tabs li a {
    color: #fff !important;
    padding: 10px 20px;
    display: block;
}

/* tab active */
.product-tabs li.active {
    background: #AE1A19 !important;
}

/* bỏ border-top mặc định của flatsome */
.product-tabs.nav-line li a {
    border-top: none !important;
}

/* hover */
.product-tabs li:hover {
    background: #8f1615;
}

/* optional: bo góc */
.product-tabs li {
    border-radius: 4px 4px 0 0;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}