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

/*************** ADD CUSTOM CSS HERE.   ***************/


/* =============================
   HIỂN THỊ GIÁ SẢN PHẨM ĐẸP – CAO CẤP
   Flatsome Theme (Archive + Trang chủ)
   ============================= */

/* Tiêu đề DANH MỤC SẢN PHẨM */
#woocommerce_product_categories-3 .widget-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

/* Danh mục cấp lớn */
#woocommerce_product_categories-3 > ul.product-categories > li > a {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

/* Danh mục con */
#woocommerce_product_categories-3 ul.children > li > a {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Mục đang được chọn: Sản phẩm */
#woocommerce_product_categories-3 ul.product-categories > li.current-cat > a {
    font-size: 15px !important;
}

/* Thu nhỏ khoảng cách giữa các dòng */
#woocommerce_product_categories-3 ul.product-categories li {
    margin-bottom: 0 !important;
}

#woocommerce_product_categories-3 ul.product-categories li > a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* Sắp xếp lại bộ lọc giá */
.field-price .price_slider_wrapper {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
        "price"
        "slider"
        "button";
    row-gap: 12px;
}

/* Thanh trượt nằm dưới dòng giá */
.field-price .price_slider {
    grid-area: slider;
    margin: 0 8px 8px !important;
}

/* Tách nút và dòng giá khỏi khối cha */
.field-price .price_slider_amount {
    display: contents !important;
}

/* Dòng giá nằm trên thanh trượt */
.field-price .price_label {
    grid-area: price;
    width: 100%;
    margin: 14px 0 0px !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #657062;
}

.field-price .price_label span {
    font-size: 15px !important;
    font-weight: 600;
    color: #263224;
}

/* Nút lọc nằm dưới thanh trượt */
.field-price .price_slider_amount .button {
    grid-area: button;
    justify-self: start;
    float: none !important;
    margin: 0 !important;
}

/* Ẩn phần tử xóa float mặc định */
.field-price .price_slider_amount .clear {
    display: none !important;
}

/* Tiêu đề */
.field-price .widget-title,
.field-price > h2,
.field-price > h3 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e6df;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: #263224;
}

/* Khoảng cách khu vực thanh giá */
.field-price .price_slider_wrapper {
    padding-top: 5px;
}

/* Nền thanh kéo */
.field-price .price_slider_wrapper .ui-widget-content {
    height: 5px;
    border: none;
    border-radius: 20px;
    background: #dfe5dc;
}

/* Phần giá đang chọn */
.field-price .ui-slider .ui-slider-range {
    background: #53664f;
    border-radius: 20px;
}

/* Nút tròn kéo giá */
.field-price .ui-slider .ui-slider-handle {
    width: 17px;
    height: 17px;
    top: -6px;
    margin-left: -8px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #53664f;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

/* Phần nút lọc và giá */
.field-price .price_slider_amount {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

/* Nút LỌC */
.field-price .price_slider_amount .button {
    float: none;
    min-height: 43px;
    padding: 10px 21px;
    border: none;
    border-radius: 9px;
    background: #53664f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.2s ease;
}

.field-price .price_slider_amount .button:hover {
    background: #374934;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Dòng hiển thị giá */
.field-price .price_label {
    float: none;
    text-align: right;
    color: #657062;
    font-size: 15px;
    line-height: 1.45;
}

.field-price .price_label span {
    color: #263224;
    font-weight: 700;
}


/* Bố cục giá: đặt trên 1 hàng, canh baseline */
.price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px;
}

/* GIÁ SALE – ĐỎ, TO, NỔI BẬT, ĐỨNG TRƯỚC */
.price ins {
    order: 1;
}
.price ins .woocommerce-Price-amount {
    color: #E53935 !important;  /* đỏ thương mại điện tử */
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}


/* GIÁ CŨ – NHỎ HƠN 50%, MÀU XÁM, ĐỨNG SAU */
.price del {
    order: 2;
    text-decoration: none !important; /* bỏ gạch thô mặc định */
    position: relative;
    opacity: .75;
}

/* Số tiền của giá cũ */
.price del .woocommerce-Price-amount {
    font-size: 80% !important;   /* nhỏ đúng 1/2 giá sale */
    color: #B3B3B3 !important;   /* xám nhẹ */
}

/* Ký hiệu ₫ của giá cũ cũng thu nhỏ */
.price del .woocommerce-Price-currencySymbol {
    font-size: 100% !important;
    opacity: .9;
}

/* Chữ “Giá niêm yết: ” trong del nếu có */
.price del span:first-child {
    font-size: 80% !important;
    color: #B3B3B3 !important;
    opacity: .75;
}


/* GẠCH GIÁ CŨ – MẢNH ĐẸP, SANG TRỌNG */
.price del:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    height: 1px;                /* độ dày */
    background: #B3B3B3;        /* màu gạch */
    transform: translateY(-50%);
    pointer-events: none;
}




/* Dàn menu chạy hết ngang nhưng KHÔNG ép mỗi mục bằng nhau */
.header-bottom .nav {
  display: flex;
  flex-wrap: nowrap;                 /* không cho xuống hàng */
  justify-content: space-between;    /* trải đều theo chiều ngang */
  gap: clamp(4px, 1vw, 16px);        /* khoảng cách linh hoạt */
  width: 100%;
}

.header-bottom .nav > li {
  flex: 0 0 auto;                    /* bỏ flex:1 để không bị hẹp */
  white-space: nowrap;               /* cấm xuống hàng trong từng mục */
}

.header-bottom .nav > li > a {
  display: block;
  padding: 10px 12px;
  white-space: nowrap;               /* chắc chắn không wrap text */
}

/* Submenu giữ bình thường */
.header-bottom .nav > li .sub-menu {
  width: auto;
  text-align: left;
}
/* Hai đường viền mảnh trên và dưới thanh menu */
.header-bottom {
  border-top: 1px solid #4b2e05;     /* viền trên */
  border-bottom: 1px solid #4b2e05;  /* viền dưới */
}

/* Nếu bạn muốn viền màu sáng hơn: dùng #d4b68c hoặc #e9ecef */



/* ===== Search field: bao phủ mọi biến thể của Flatsome ===== */
/* ===== Search field: bao phủ mọi biến thể của Flatsome ===== */
.header-search-form input[type="search"],
.header-search-form .search-field,
.searchform-wrapper input[type="search"],
.searchform input.search-field,
input[type="search"].search-field {
  background: #fff !important;
  border: 1.8px solid #e9ecef !important;   /* viền xám nhạt sang trọng */
  border-radius: 10px !important;            
  padding: 10px 16px !important;
  min-width: 260px !important;
  color: #2b2b2b !important;
  box-shadow: 0 2px 8px rgba(233, 236, 239, .3) !important;
  transition: all .25s ease !important;
}

.header-search-form input[type="search"]:focus,
.searchform input.search-field:focus {
  border-color: #ced4da !important; /* chuyển nâu khi focus */
  box-shadow: 0 3px 12px rgba(163,123,59,.18) !important;
  outline: none !important;
}

/* Placeholder */
.header-search-form input::placeholder,
.searchform input::placeholder {
  color: #9a9a9a !important;
  font-style: italic;
}

/* Icon kính lúp */
.header-search-form .ux-search-submit,
.searchform .ux-search-submit,
.searchform .button.icon,
.header-search .icon-search {
  color: #4b2e05 !important;
}
.header-search-form .ux-search-submit:hover,
.searchform .button.icon:hover,
.header-search .icon-search:hover {
  color: #a37b3b !important;
}

/* Dropdown search form */
.searchform-wrapper .searchform { 
  min-width: 320px !important; 
}
/* Tạo khoảng cách nhẹ giữa menu và phần nội dung */
.header-bottom {
  border-top: 1px solid #4b2e05;     /* viền trên */
  border-bottom: 1px solid #4b2e05;  /* viền dưới */
  margin-bottom: 8px;                /* khoảng cách dưới menu */
  background-color: #fff;            /* nền trắng để tách rõ với ảnh/banner */
}

/* Nếu muốn khoảng cách lớn hơn (ví dụ khi banner dính quá sát) */
@media (min-width: 768px) {
  .header-bottom {
    margin-bottom: 12px;
  }
}


@media (min-width: 850px) {
header#header .nav-dropdown {
        display: block;
}
header#header .nav-dropdown ul.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 250px;
        padding: 0;
        display: none !important;
        border-radius: 5px;
        -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
}
header#header .nav-dropdown ul.sub-menu a {
        white-space: normal;
        margin: 0;
        padding: 10px 15px;
        border: 0;
        font-weight: 400;
}
header#header .nav-dropdown li:hover > ul.sub-menu{
        display: block !important;
}
header#header .nav-dropdown li {
        border-right: 0;
        white-space: normal;
        width: 100%;
        display: block;
        position: relative;
}
header#header .nav-dropdown li.menu-item-has-children > a {
        font-weight: 400;
        text-transform: none;
        color: rgba(102,102,102,.85);
}
header#header .nav-dropdown li.active>a {
        color: #e82c2a;
}
	/* Hiện label giảm giá trên trang Shop */
.woocommerce-shop .product-small,
.post-type-archive-product .product-small,
.tax-product_cat .product-small {
    position: relative !important;
}

/* Đưa label vào bên trong ảnh để không bị cắt */
.woocommerce-shop .badge-container,
.post-type-archive-product .badge-container,
.tax-product_cat .badge-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    right: auto !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 99 !important;
}

/* Kiểu label phần trăm */
.woocommerce-shop .badge-container .badge,
.post-type-archive-product .badge-container .badge,
.tax-product_cat .badge-container .badge {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.woocommerce-shop .badge-inner.on-sale,
.post-type-archive-product .badge-inner.on-sale,
.tax-product_cat .badge-inner.on-sale {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: 34px !important;
    min-width: 64px !important;
    padding: 0 13px !important;

    background: #e60023 !important;
    color: #ffffff !important;
    border-radius: 0 10px 10px 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
}

.woocommerce-shop .badge-inner.on-sale .onsale,
.post-type-archive-product .badge-inner.on-sale .onsale,
.tax-product_cat .badge-inner.on-sale .onsale {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
}

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

    /* Header chính */
    .header-main{
        min-height: 70px !important;
        padding: 0 !important;
    }

    /* Hàng header */
    .header-main .flex-row{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-wrap:nowrap !important;
    }

    /* Logo */
    .header-logo{
        flex:1 1 auto !important;
        text-align:center !important;
    }

    .header-logo img{
        max-height:50px !important;
        width:auto !important;
    }

    /* Menu icon */
    .mobile-nav{
        flex:0 0 auto !important;
    }

    /* Cart icon */
    .header-nav-main,
    .header-right{
        flex:0 0 auto !important;
    }

    /* Không cho phần tử rớt dòng */
    .header-main .flex-col{
        margin:0 !important;
        padding:0 !important;
    }

    /* Nếu có block lạ bị hiện */
    .header-main .ux-block{
        margin:0 !important;
    }
}
@media (max-width:849px){

    /* Hàng 1 */
    .single-product form.cart{
        display:flex !important;
        align-items:center !important;
        gap:12px !important;
        margin-bottom:12px !important;
    }

    .single-product form.cart .quantity{
        flex:0 0 120px !important;
        margin:0 !important;
    }

    .single-product form.cart .single_add_to_cart_button{
        flex:1 !important;
        margin:0 !important;
        white-space:nowrap !important;
    }

    /* Messenger */
    .single-product a[href*="m.me"].button,
    .single-product .ux-button[href*="m.me"],
    .single-product a[href*="facebook.com/messages"].button{
        display:flex !important;
        width:100% !important;
        justify-content:center !important;
        margin-top:12px !important;
    }

}
/* Điện thoại */
@media (max-width: 480px) {
    .field-price .price_slider_amount {
        grid-template-columns: 1fr;
    }

    .field-price .price_label {
        text-align: left;
    }

    .field-price .price_slider_amount .button {
        width: 100%;
    }
}
}