/*
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.   ***************/
:root {
    --white: #fff;
    --black: #000;
    --red: #D60101;
    --red-2: #b20000;
    --text-1: #1d1c1c;
    --global-palette1: #1d1c1c;
    --global-palette2: #d50032;
    --border1: #e6e6e6;
    --cl1: #0070ff;
    --cl2: #0038a8;
    --cl3: #021144;
    --cl4: #d9f9ac;
    --cl5: #323f4b;
    --cl6: #5497f4;
    --grey: #f5f7fa;
    --dark-grey: #9aa5b1;
}

body, html {
    font-size: 16px; /* Chuẩn nền tảng */
    line-height: 1.6; /* Tăng line-height để text thoáng, dễ đọc */
    background-color: #fff !important;
    color: #333; /* Màu chữ xám đậm sang hơn đen thuần */
}

body {
    font-family: 'Quicksand', sans-serif !important;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Tinh chỉnh tiêu đề: Font chữ mỏng (Light/Regular) tạo cảm giác cao cấp */
h1, .h1, .banner h1,
h2, .h2, .banner h2,
h3, .h3, .banner h3,
h4, .h4, .banner h4,
.heading-font {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300 !important; /* Mỏng tạo sự tinh tế */
    letter-spacing: 0.05em; /* Giãn chữ một chút cho sang */
    text-transform: uppercase; /* Thường dùng cho trang sức */
    margin-bottom: 1rem;
}

h1, .h1, .banner h1 {
    font-size: 2.5rem; /* Lớn và nổi bật cho Banner */
    line-height: 1.2;
}

h2, .h2, .banner h2 {
    font-size: 2rem; /* Cho các tiêu đề mục lớn */
    line-height: 1.3;
    /* text-align: center; */
}

h3, .h3, .banner h3 {
    font-size: 1.5rem; /* Tên sản phẩm hoặc tiêu đề phụ */
    font-weight: 400 !important;
}

h4, .h4, .banner h4 {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
}

/* Đoạn văn bản mô tả */
p {
    font-size: 1rem;
    /* color: #666; */
    /* font-weight: 300; */
    margin-bottom: 1rem;
}

.bold {
    font-weight: 600;
}

.pt-20 {
    padding-top: 20px !important;
}

/* a:where(:not(.wp-element-button)) {
    text-decoration: none;
    background-size: 100% .0625rem;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in
} */

/* Cách hiện đại, sạch, hiệu suất cao nhất */
.a1 {
    /* position: relative; */
    text-decoration: none;
    display: inline-block;
    /* hoặc inline-flex nếu link có icon */
}

.a1::after {
    /* Dùng ::after để tránh conflict nếu ::before đã dùng */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* full width ngay từ đầu */
    bottom: -0.15em;
    /* điều chỉnh khoảng cách */
    height: 1px;
    background-color: var(--fs-color-primary);

    transform: scaleX(0);
    /* ẩn bằng scale */
    transform-origin: left;
    /* bung từ giữa – quan trọng nhất! */
    transition: transform 0.2s ease-in;
    -webkit-transition: transform 0.2s ease-in;
}

.a1:hover::after {
    transform: scaleX(1);
    /* bung ra full */
}

/* .pswp__bg {
    background: #fff !important;
}

button.pswp__button, button.pswp__button--arrow--left::before, button.pswp__button--arrow--right::before, button.pswp__button:hover {
    background-color: #000 !important;
} */

.header {
    -webkit-box-shadow: 0 .0625rem 0 0 rgba(0, 0, 0, .15);
    box-shadow: 0 .0625rem 0 0 rgba(0, 0, 0, .15);
}


.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a {
    font-weight: normal !important;
}

.nav>li>a {
    font-size: 1rem !important;
}

.header-main .social-icons, .header-main .cart-icon strong, .header-main .menu-title, .header-main .header-button > .button.is-outline, .header-main .nav > li > a > i:not(.icon-angle-down) {
    color: var(--add-to-wishlist-icon-color, #000);
}

.header-bottom i[class^=icon-] {
    line-height: 0;
}

@media (min-width: 48rem) {
    .header-bottom {
        /* margin-top: .95rem; */
    }

    .nav>li {
        padding: 1rem .9375rem 1rem !important;
        margin: 0 !important;
    }

    .nav>li>a {

        display: block;
        position: relative;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
        -webkit-transition-property: opacity;
        transition-property: opacity;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-text-stroke-width: 0;
    }

    .nav>li>a>i {
        font-size: 100% !important;
    }

    .nav>li.header-divider {
        height: .1rem;
        position: relative;
        vertical-align: middle;
        border-left: .0625rem solid;
        padding: 1.25rem 0 0 0 !important;
        margin: 0 0 .25rem !important;
    }

    /* .nav>li>a:before {
        background-color: #d50032;
        content: " ";
        height: .1875rem;
        position: absolute;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
        -webkit-transition-property: width;
        transition-property: width;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        width: 0;
    }

    .nav>li>a:hover:before {
        left: .725rem;
        right: auto;
        width: calc(100% - 1.45rem);
    } */

    .san-pham li>a:before {
        top: auto !important;
    }

    .nav-line-bottom>li>a:before,
    .nav-line-grow>li>a:before,
    .nav-line>li>a:before,
    .san-pham li>a:before {
        background-color: #d50032 !important;
        content: " ";
        height: .1875rem !important;
        position: absolute;
        bottom: 0;
        left: 0;
        /* ← bắt đầu từ trái */
        width: 100%;
        opacity: 0;
        /* hoặc dùng transform/scale */

        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease-in;
        -webkit-transition: transform 0.2s ease-in;
    }

    .nav-line-bottom>li>a:hover:before,
    .nav-line-bottom>li.current-dropdown>a:before,
    .nav-line-grow>li>a:hover:before,
    .nav-line>li>a:hover:before,
    .san-pham li>a:hover:before,
    .san-pham li.active>a:before {
        transform: scaleX(1);
    }

    .header:not(.transparent) .header-bottom-nav.nav > li > a:hover, .header:not(.transparent) .header-bottom-nav.nav > li.active > a, .header:not(.transparent) .header-bottom-nav.nav > li.current > a, .header:not(.transparent) .header-bottom-nav.nav > li > a.active, .header:not(.transparent) .header-bottom-nav.nav > li > a.current,
    .nav-line-bottom>li.current-dropdown>a,
    .san-pham li.active>a {
        -webkit-text-stroke-width: .0625rem;
    }

    .header-wrapper.stuck {
        box-shadow: 0 .0625rem 0 0 rgba(0, 0, 0, .15) !important;
    }

    .nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
        font-size: inherit;
    }
}

#breadcrumbs {
    text-transform: uppercase;
}

/* @media screen and (max-width: 1440px) { */
    #breadcrumbs {
        padding: 0 1rem;
        margin: 1rem 0;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    #breadcrumbs p {
        margin-bottom: 0;
    }
/* } */


.widget_wpc_filters_widget a:hover {
    text-decoration: underline !important;
}

.wpc-filters-main-wrap input[type=checkbox], .wpc-filters-main-wrap input[type=radio] {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    border: .0625rem solid var(--global-palette1) !important;
    border-radius: 0 !important;
}

.wpc-filters-main-wrap input[type=checkbox]:after {
    left: .3rem !important;
    top: 0 !important;
    /* border: 2px solid var(--global-palette1) !important; */
}


.footer-1, .footer-2 {
    border-top: none;
}

.footer-1>.row, .footer-2>.row {
    border-top: .0625rem solid #e6e6e6;
    padding-left: 2rem;
    padding-right: 2rem;
}

.footer-1 .widget, .footer-2 .widget {
    margin-bottom: 0 !important;
}

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

.footer ul.menu>li {
    margin-bottom: .7rem;
}

.footer ul.menu>li+li {
    border-top: none !important;
}

.footer a, #breadcrumbs a, .p-item-info-list a span, .product-footer li a, a.wpc-toggle-a
, .header-main .menu-item a
, .san-pham a {
    text-transform: uppercase;
    background-size: 0 .0625rem;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background-position: 0 100%;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    background-image: -webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor));
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    padding-bottom: .25em;
    position: relative;
    -webkit-transition-property: opacity, color, background-size;
    transition-property: opacity, color, background-size;
}

.product-footer li a {
    padding-bottom: 0 !important;
}

.product-footer .nav-outline>li>a {
    border-radius: 0 !important;
}

.footer a:hover, #breadcrumbs a:hover, .p-item-info-list a:hover span, .product-footer li:not(.active) a:hover, a.wpc-toggle-a:hover
, .header-main .menu-item a:hover {
    background-size: 100% .0625rem;
    opacity: .6;
    text-decoration: none !important;
}

.wpcf7 form {
    margin-bottom: 0;
}

.wpcf7 .form-flat input:not([type=submit]), .wpcf7 .form-flat select, .wpcf7 .form-flat textarea {
    border-radius: 0 !important;
    background-color: #fff;
    border-color: var(--global-palette1);
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.wpcf7 .form-flat input, .wpcf7 .form-flat button {
    border-radius: 0 !important;
}

.wpcf7-spinner {
    display: inline;
    margin: 0;
}

/* .wpcf7 .ml-half {
    margin-left: 0;
}

.wpcf7 .flex-row.form-flat .flex-col {
    padding-right: 0;
} */

@media (min-width: 48rem) {
    .footer-1>.row {
        padding-bottom: 5rem;
        padding-top: 5rem;
    }

    .footer-2>.row {
        padding-bottom: 3rem;
        padding-top: 2.75rem;
    }

    .footer span.widget-title {
        padding-bottom: 1.75rem;
        display: block;
    }
}

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


}

/* WOO  */
a.icon-remove, a.remove {
    border: 1px solid !important;
    font-size: 25px !important;
    font-weight: normal !important;
}

#cart-popup {
    background: #fff;
}

ul.product_list_widget li a:not(.remove) {
    color: var(--black);
}

.woocommerce-mini-cart-item .ux-mini-cart-qty {
    color: var(--black);
}

.widget_shopping_cart p.total {
    border-bottom: 1px solid var(--border1);
}

.woocommerce-mini-cart__buttons .button, .wpcf7 .button, .button.primary {
    /* display: block; */
    background-color: var(--global-palette1) !important;
    border: 1px solid var(--global-palette1) !important;
}

.woocommerce-mini-cart__buttons .button:hover, .wpcf7 .button:hover, .button.primary:hover {
    background-color: #fff !important;
    color: var(--global-palette1) !important;
    box-shadow: none !important;
}

.button.is-outline, input[type=button].is-outline, input[type=reset].is-outline, input[type=submit].is-outline {
    border: 1px solid !important;
}

.button.is-outline {
    line-height: 2.4em;
}

.page-checkout button[type=submit] {
    display: inline !important;
}

ul.wpc-filter-chips-list {
    margin-bottom: 0 !important;
}

/* .seohp-row-slider .flickity-prev-next-button .arrow, .seohp-row-slider .flickity-prev-next-button svg {
    fill: currentColor;
    border-color: currentColor;
    transition: all .3s;
}

.seohp-row-slider .flickity-prev-next-button:hover .arrow, .seohp-row-slider .flickity-prev-next-button:hover svg {
    fill: var(--fs-color-primary);
} */

@media (min-width: 850px) {
    /* .seohp-row-slider .flickity-prev-next-button.next {
        left: 100%;
        right: auto;
    } */
}

/* .seohp-row-slider .flickity-prev-next-button {
    opacity: 1;
    transform: translateX(0) !important;
} */


/* Mặc định trên Mobile: Hiển thị dạng Grid */
.seohp-row-slider {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Chia 2 cột tùy ý */
  gap: 10px;
}

/* Ẩn nội dung bổ trợ của Flickity khi ở dạng grid */
.seohp-row-slider:after {
  content: ''; /* Không kích hoạt Flickity */
  display: none;
}

.seohp-row-slider .flickity-prev-next-button {
    background-color: var(--white);
    bottom: 50%;
    top: 50%;
    width: 3rem;
    height: 3rem;
    opacity: 1;
}

.seohp-row-slider .flickity-prev-next-button.previous {
    left: 0;
    transform: inherit;
}

.seohp-row-slider .flickity-prev-next-button.next {
    right: 0;
    transform: inherit;
}

.seohp-row-slider .flickity-page-dots {
    bottom: 0;
}

.seohp-row-slider:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top:  0;
}

.seohp-row-slider.slider-nav-reveal .flickity-prev-next-button svg {
    margin-top: 0;
}

/* Trên PC (ví dụ từ 768px trở lên): Chuyển thành Slide */
@media screen and (min-width: 768px) {
  .seohp-row-slider, .seohp-row-slider-drag {
    display: block; /* Trả về block để Flickity hoạt động chuẩn */
  }

  .seohp-row-slider:after, .seohp-row-slider-drag:after {
    content: 'flickity'; /* Kích hoạt Flickity */
    display: none;
  }
}

.nav-sidebar.nav-vertical>li, .nav-sidebar.nav-vertical>li.menu-item.active, .nav-sidebar.nav-vertical>li.menu-item:hover {
    background-color: #fff;
}


/* Tắt transition mặc định của Flatsome khi đang scroll để tránh xung đột */
.zoom-on-scroll .bg, 
.zoom-on-scroll img {
    transition: transform 0.1s ease-out !important;
    will-change: transform;
}