/* ==========================================================
   [VPP KHÁNH NGỌC] KHÔNG MÀN HÌNH NÀO DẠNG CHUNG
   ========================================================== */
/* HOME TAB */
.listingtab-layout8 {
    margin-top: 50px !important; /* Có thể đổi thành 20px hoặc 15px tùy ý muốn sát hơn */
}
/* 1. Thu nhỏ khoảng cách trên và dưới của toàn bộ khối */
.listingtab-layout8 {
    margin-bottom: 10px !important;
}

/* 2. Tùy chỉnh màu chữ và màu nền cho tiêu đề (modtitle) */
.listingtab-layout8 h3.modtitle,
.listingtab-layout8 h3.modtitle a,
.listingtab-layout8 h3.modtitle span {
    color: #118a0a!important;        /* Màu chữ tiêu đề (anh có thể đổi mã màu tùy ý) */
    font-size: 24px !important;    /* Tăng cỡ chữ to lên (anh có thể đổi thành 22px, 26px tùy ý) */
    font-weight: 700 !important;   /* Làm chữ đậm rõ nét (700 tương đương chữ đậm/bold) */
    margin-bottom: 10px !important;
}

/*  HOME TAB  LINE */
.layout-8.common-home #content .module h3.modtitle span::after {
  width: 150px  !important; 
  background-color: #118a0a  !important; 
  left: 33%  !important; 
}
/*  HOME TAB  COMBOBOX*/
.layout-8 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox {
    border: 1px solid #118a0a !important; /* Thay đổi mã màu viền tại đây */
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: 30px !important; 
}

/* Tùy chỉnh nút Xem thêm HOME (Load more) */
.listingtab-layout8 .ltabs-loadmore-btn,
.so-listing-tabs .ltabs-loadmore-btn {
    background-color: #118a0a !important; /* Màu xanh thương hiệu */
    border-radius: 20px !important;       /* Bo tròn viền 20px */
    color: #ffffff !important;            /* Chữ màu trắng */
    border: none !important;
    padding: 8px 25px !important;
    font-size: 16px;
    margin-top: 30px;
}

/* Hiệu ứng khi rê chuột vào nút Xem thêm */
.listingtab-layout8 .ltabs-loadmore-btn:hover,
.so-listing-tabs .ltabs-loadmore-btn:hover {
    background-color: #0e6f08 !important; /* Xanh đậm hơn một chút khi hover */
    color: #ffffff !important;
}
/* page cart */ 
#shopping-cart h2, 
#shopping-cart p, 
#shopping-cart #accordion {
    display: none !important;
}
/* page cart */ 
#checkout-total .text-end {
  font-size: 14px;
}
#checkout-total tr td.text-end:nth-child(2) {
    font-weight: 700 !important;
}



/* ======================= BEGIN DANH SACH THEM MOI TACH RA FILE FOOTER17================= */

.typefooter-17 {
  margin-top: 20px !important;
  background-color: #118a0a;
}
.typefooter-17 .footer-middle2 .intro h4 {
  color: #fff !important;
}
.typefooter-17 .footer-middle2 .mid2-title {
  color: #fff !important;
}
.typefooter-17 .footer-middle2 .mid2-content a {
  color: #fff;
  font-weight: bold;
}
.typefooter-17 .copyright-w {
  color: #fff;
}
/* MRSANG CODE FOODTER*/
#collapse-footer .footer-middle2 .intro p
{
  color: #fff;
}


/*DANH SACH THEM MOI HEADER 8 */

.typeheader-8 {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.03);   /* Tạo hiệu ứng bóng đổ nhẹ cho header nổi bật */
}
.typeheader-8 .header-top {
  min-height: 48px;
  background-color: #fff !important;
}
.typeheader-8 .navbar-logo {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.typeheader-8 .search-header-w #sosearchpro .search {
  width: 350px !important;
}
.typeheader-8 .shopping_cart .btn-shopping-cart .shopcart .shopcart-inner {
  margin-left: 5px;
}
.typeheader-8 .shopping_cart .btn-shopping-cart .shopcart .shopcart-inner .total-shopping-cart .items_carts {
  color: #118a0a !important;
  font-weight: 700;
}
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li {
  margin-right: 15px !important;
}
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li > a {
  color: #118a0a !important;
  /* font-size: 14px; CÓ TRONG CODE GỐC NHƯNG BỎ ĐI */
  /* font-weight: 500; CÓ TRONG CODE GỐC NHƯNG BỎ ĐI */
}

.typeheader-8 .container-megamenu.horizontal ul.megamenu > li > a strong {
  font-weight: 700 !important;
  font-size: 15px;
}
/* Hiệu ứng khi hover vào các mục menu: nền xanh, chữ trắng và bo góc 4 cạnh */
/* 2. Đặt khoảng trống trái/phải và bo góc cố định trên thẻ LI */
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li {
    padding: 0px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

/* 3. Khi HOVER vào thẻ LI: đổi nền LI thành màu xanh, đổi chữ bên trong thành màu trắng */
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li:hover,
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li.active {
    background-color: #118a0a !important;
}
/* 3. Khi HOVER vào thẻ LI: đổi nền LI thành màu xanh, đổi chữ bên trong thành màu trắng */
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li:hover > a,
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li:hover > a strong,
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li.active > a,
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li.active > a strong {
    color: #ffffff !important;
}

/* Cố định mép trái của menu con bám sát mục cha, bỏ giới hạn bên phải để nó tự giãn nội dung */
.typeheader-8 .container-megamenu.horizontal ul.megamenu > li {
    position: relative !important;
}

.typeheader-8 .container-megamenu.horizontal ul.megamenu > li .sub-menu {
    left: 0 !important;
    right: unset !important; /* Bỏ ép bên phải để menu con tự do mở rộng */
    width: max-content !important; /* Tự động co giãn theo nội dung bên trong */
    min-width: 330px !important;   /* Đặt độ rộng tối thiểu cho đẹp mắt */
}
.typeheader-8 .header-top-left,
.typeheader-8 .header-top-right{
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.03);
  letter-spacing: 0.3px !important; /* Khoảng cách giữa các ký tự, anh có thể tăng lên 1px hoặc 1.5px cho vừa mắt */
  word-spacing: 1px !important;     /* Khoảng cách giữa các từ nếu muốn chữ cách xa nhau hơn */
  color: #777676;
}

/*DANH SACH THEM MOI LAYOUT 8/ PINK.CSS */

.modal-content .modal-header{
  padding: 20px 15px 5px 15px !important;
}
.modal-content .modal-body{
  padding: 15px 15px 20px 15px;
}

.container-megamenu.horizontal .title-feature, .container-megamenu.horizontal ul.megamenu .title-submenu, .container-megamenu.horizontal ul.megamenu li .sub-menu .content .static-menu a.main-menu, .container-megamenu.horizontal ul.megamenu .subcategory a.title-submenu {
  /*font-weight: bold; CÓ TRONG CODE GỐC*/
  font-size: 12px !important;
  /*font-size: 1.6rem; CÓ TRONG CODE GỐC*/
}
.price {
  color: #f64b4b !important;
}
.price .price-new, .price span.price {
  color: #f64b4b !important;
}
.products-list .product-grid .product-item-container .right-block h4 {
  font-weight: 600 !important;
  height: 40px;
  white-space: normal !important;
  /*white-space: nowrap;CÓ TRONG CODE GỐC*/
  text-transform: capitalize;
}
.products-list .product-grid .product-item-container .right-block h4 a {
  color: #118a0a !important;
}
.product_page_price .price-new {
  font-size: 25px !important;
}
/* Ẩn khối chia sẻ mạng xã hội và thẻ tags trên trang chi tiết sản phẩm, mút mua ngay, yêu thích, so sánh */
.content-product-right .form-group.social-share,
.content-product-right #tab-tags,
.content-product-right .btn-checkout,
.content-product-right .add-to-links {
    display: none !important;
}
.product-view .content-product-right .title-product h1 {
  color: #504e4e !important;
  font-weight: 600 !important;
}
.product-view .content-product-right .box-review {
  display: none;
}
.product-view .content-product-right .product-box-desc .stock
{
  display: none;
}
producttab .tabsslider.horizontal-tabs .nav-tabs {
  padding: 5px !important;
}
/* Ẩn tab thứ 2 và thứ 3 trong khung tab sản phẩm */
.producttab .nav-tabs li:nth-child(2),
.producttab .nav-tabs li:nth-child(3) {
    display: none !important;
}
.producttab .tabsslider.horizontal-tabs .nav-tabs li a {
  padding: 10px 25px !important;
}
.product-detail .producttab .tab-content .product-property-title {
  display:none !important;
}
/* foodter */ 
.button-toggle a {
  font-weight: 600 !important;
  color: #fff !important;
}
/*====================== mod title ========================*/
.layout-8.common-home #content .price, .layout-8.common-home #content .price .price-new, .layout-8.common-home #content .price span.price {
  color: #f64b4b !important;
  font-weight: 700 !important;
}
/*=====================END THEM MOI====================*/


/* RIÊNG HOME PRODUCE FEATURED */
   #so_listing_tabs_161 {
	padding-left: 20px;
    padding-right: 20px;
   }
   #so_listing_tabs_161 .ltabs-items-inner .ltabs-item {
    padding: 0 15px;       /* Khoảng hở giữa các sản phẩm theo chiều ngang */
    margin-bottom: 30px;  /* Khoảng cách giữa các hàng sản phẩm trên và dưới */
   }
   #so_listing_tabs_161 .ltabs-items-inner .ltabs-item .item-inner{
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.03);; /* Thêm đường SHADOW ngang mờ mờ ở dưới SP*/
   }
   #so_listing_tabs_161 .ltabs-items-inner .ltabs-item .item-inner .right-block{
    padding: 15px 12px 30px 12px !important;
   }





/* ==========================================================
   [VPP KHÁNH NGỌC] HỆ THỐNG BREAKPOINT CHUẨN - PHỦ KÍN TỪNG PIXEL @media 
   ========================================================== */

@media (min-width: 576px) and (max-width: 991px) {
    /* TRANG CATALOG Cột bên trái: 20% */
    .product-filter-top .row  .view-mode {
        width: 35% !important;
    }
    /* Cột bên phải: 80% */
    .product-filter-top .short-by-show  {
        width: 65% !important;
    }
}

@media (min-width: 1004px) and (max-width: 3840px) {
/* LÀM RIÊNG HOME TAB  MENU*/
/* Trạng thái mặc định: Viền xanh, nền trắng, chữ tối */
.listingtab-layout8 .ltabs-tabs-container .ltabs-tabs li.ltabs-tab span.ltabs-tab-label {
    display: inline-block !important;
    border: 1px solid #118a0a !important; /* Thay đổi mã màu viền tại đây */
    border-radius: 20px !important;
    padding: 15px 25px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #504f4f !important;
}
/* Trạng thái khi Hover hoặc được Chọn: Nền xanh, chữ trắng */
.listingtab-layout8 .ltabs-tabs-container .ltabs-tabs li.ltabs-tab:hover span.ltabs-tab-label,
.listingtab-layout8 .ltabs-tabs-container .ltabs-tabs li.ltabs-tab.ltabs-tab-selected span.ltabs-tab-label {
    background-color: #118a0a !important;
    color: #ffffff !important;
    border: 1px solid #118a0a !important; /* Thay đổi mã màu viền tại đây */
}

/* Bắt chính xác thẻ đang được chọn thông qua class tab-sel */
.listingtab-layout8 .ltabs-tabs-container .ltabs-tabs li.ltabs-tab.tab-sel,
.listingtab-layout8 .ltabs-tabs-container .ltabs-tabs li.ltabs-tab.tab-sel span.ltabs-tab-label {
    background-color: #118a0a !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #118a0a !important; /* Thay đổi mã màu viền tại đây */
}
 .listingtab-layout8 .so-listing-tabs .ltabs-wrap .ltabs-tabs-container .ltabs-tabs-wrap ul.ltabs-tabs li.ltabs-tab {
    margin-top: 15px !important;
}
 .listingtab-layout8 .so-listing-tabs .ltabs-wrap .ltabs-tabs-container .ltabs-tabs-wrap ul.ltabs-tabs {
    margin-bottom: 15px !important;
}
}


/* [1]. Màn hình cực lớn / Ultra-wide (Từ 1900px trở lên) */
@media (min-width: 1900px) {
 
    /* HEADER Biến khung tổng #header thành mốc định vị gốc (Anchor) */
    #header.typeheader-8 {
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        width: 100% !important;
    }

    /* 2. Buộc logo bám chặt từ đỉnh tuyệt đối (top: 0) của khung tổng */
    #header.typeheader-8 .navbar-logo {
       width: 200px !important;
        position: absolute !important;
        top: 0 !important;
        left: 50px !important; /* Bám sát mép trái của khung 1920px */
        height: 100% !important; /* Phủ kín toàn bộ chiều cao từ header-top xuống hết header-bottom */
        background: #ffffff !important; /* Nền trắng che phần giao nhau */
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    #header.typeheader-8 .navbar-logo img {
        max-width: 85% !important;
        max-height: 85% !important;
        object-fit: contain !important;
        image-rendering: -webkit-optimize-contrast; /* Giúp chống mờ, tăng độ nét */
    }

    /* 3. Khoét khoảng trống bên trái cho thanh trên (header-top) */
    #header.typeheader-8 .header-top {
        padding-left: 280px !important; /* Tránh để chữ bị logo che khuất */
        box-sizing: border-box !important;
    }

    #header.typeheader-8 .header-top .header-top-left {
        padding-left: 0 !important;
    }

    /* 4. Khoét khoảng trống bên trái cho thanh menu chính (header-bottom) */
    #header.typeheader-8 .header-bottom {
        padding-left: 265px !important;
        box-sizing: border-box !important;
    }

    #header.typeheader-8 .header-bottom .main-menu {
        padding-left: 0 !important;
    }


    /* Sửa fix ko cho phủ rộng  BANNER*/
    .common-home .so-page-builder {
        width: 100% !important;
        max-width: 100% !important;
    }
   .common-home .so-page-builder #sohomepage-slider1{
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        float: none !important;
    }
    /* Sửa HEADER fix ko cho phủ rộng */
    /* Gom khung header tối đa 1920px, căn giữa và reset khoảng đệm chuẩn */
    .typeheader-8 .header-top, 
    .typeheader-8 .header-bottom {
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Đưa logo về đúng vị trí chuẩn trong hàng Flexbox */
    .typeheader-8 .navbar-logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        margin: 0 !important;
        width: 200px !important;
        height: 105px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .typeheader-8 .navbar-logo img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
   /* Code tinh chỉnh thêm cho Danh mục, Tìm kiếm, Giỏ hàng... ở đây */
    /* Tinh chỉnh khối Menu (.main-menu) nằm ở giữa */
    .typeheader-8 .header-bottom .main-menu {
        flex: 1 !important;
        max-width: none !important;
        width: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        display: flex !important;
        align-items: center !important;
        width: 43% !important; /* Làm hỏng submenu nên phải code submenu ở dưới */
        flex: 0 0 43% !important; /* Làm hỏng submenu nên phải code submenu ở dưới */
        max-width: 43% !important; /* Làm hỏng submenu nên phải code submenu ở dưới */
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*Tinh chỉnh khối bên phải chứa Tìm kiếm & Giỏ hàng (.bottom-right) */
    .typeheader-8 .header-bottom .bottom-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-direction: row-reverse !important; /* Đảo vị trí: Tìm kiếm nằm trái, Giỏ hàng nằm phải */
        gap: 15px !important; /* Khoảng cách giữa ô tìm kiếm và giỏ hàng */
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        padding-top: 5px !important;
        padding-left: 0px !important;
        padding-right: 15px !important;
        width: 57% !important;
        flex: 0 0 57% !important;
        max-width: 57% !important;
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
       width: 720px !important;
      border: 1px solid #118a0a !important;
    }
   /* ẩn viền nút ô tìm kiếm  */
    .typeheader-8 .search-header-w #sosearchpro .search .input-group-btn {
         line-height: 0px !important;
    }

    /* 1. Thiết lập thanh header-top thành flex dàn đều hai phía */
    .typeheader-8 .header-top {
        padding-left: 250px !important; /* Khoảng cách này bằng chiều rộng logo (200px) cộng thêm khoảng hở */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. Giải phóng tỷ lệ cột cứng của khối bên trái (.header-top-left) */
    .typeheader-8 .header-top .header-top-left {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 60% !important;
    }

    /* 3. Giải phóng tỷ lệ cột cứng và canh lề phải cho khối bên phải (.header-top-right) */
    .typeheader-8 .header-top .header-top-right {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important; /* Khoảng cách giữa các phần tử bên phải */
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 40% !important;
    }

}


/* Màn hình lớn (Từ 1800px đến 1899px) */
@media (min-width: 1800px) and (max-width: 1899px) {

    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .typeheader-8 .search-header-w #sosearchpro .search {
        width: 540px !important;
        border: 1px solid #118a0a !important;
    }
    .typeheader-8 .header-top .header-top-left {
        padding-left: 30px !important;
    }
}


@media (min-width: 1600px) and (max-width: 1799px) {

    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 56% !important;
        flex: 0 0 56% !important;
        max-width: 56% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 44% !important;
        flex: 0 0 44% !important;
        max-width: 44% !important;
    }

    .typeheader-8 .search-header-w #sosearchpro .search {
        width: 360px !important;
        border: 1px solid #118a0a !important;
    }
    .typeheader-8 .header-top .header-top-left {
        padding-left: 30px !important;
    }
}


@media (min-width: 1440px) and (max-width: 1599px) {

    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 55% !important;
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    .typeheader-8 .search-header-w #sosearchpro .search {
        width: 300px !important;
        border: 1px solid #118a0a !important;
    }
    /* Ẩn trọn vẹn mục Tin tức dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-tin-tuc-mn1),
     .typeheader-8 ul.megamenu .menu-tin-tuc-mn1 {
        display: none !important;
    }
    .typeheader-8 .header-top .header-top-left {
        padding-left: 30px !important;
    }
}

@media (min-width: 1366px) and (max-width: 1439px) {

    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 60% !important;
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 40% !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    .typeheader-8 .search-header-w #sosearchpro .search {
        width: 223px !important;
        border: 1px solid #118a0a !important;
    }
    /* Ẩn trọn vẹn mục Tin tức dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-tin-tuc-mn1),
     .typeheader-8 ul.megamenu .menu-tin-tuc-mn1 {
        display: none !important;
    }
    .typeheader-8 .header-top .header-top-left {
        padding-left: 30px !important;
    }
}


@media (min-width: 1200px) and (max-width: 1365px) {

    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 57% !important;
        flex: 0 0 57% !important;
        max-width: 57% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 43% !important;
        flex: 0 0 43% !important;
        max-width: 43% !important;
    }
    .typeheader-8 .search-header-w .icon-search{
        display: none !important;
    }
    .typeheader-8 .search-header-w{
      position: absolute !important;
      top: -28px !important;
      right: 170px !important;
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 180px !important;
        border: 1px solid #118a0a !important;
    }
     /* Ẩn trọn vẹn mục Tin tức dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-tin-tuc-mn1),
     .typeheader-8 ul.megamenu .menu-tin-tuc-mn1 {
        display: none !important;
    }
     /* Ẩn trọn vẹn mục Giới thiệu dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-gioi-thieu-mn1),
     .typeheader-8 ul.megamenu .menu-gioi-thieu-mn1 {
        display: none !important;
    }
    .typeheader-8 .header-top .header-top-left {
        padding-left: 30px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

  .product-view .content-product-right .box-info-product .cart .btn {
    width: 200px;
  }
    /* . Khung menu chính */
    .typeheader-8 .header-bottom .main-menu {
        width: 57% !important;
        flex: 0 0 57% !important;
        max-width: 57% !important;
    }

    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }

    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 43% !important;
        flex: 0 0 43% !important;
        max-width: 43% !important;
    }
    .typeheader-8 .search-header-w .icon-search{
        display: none !important;
    }
    .typeheader-8 .search-header-w{
      position: absolute !important;
      top: -28px !important;
      right: 160px !important;
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 160px !important;
        border: 1px solid #118a0a !important;
    }
     /* Ẩn trọn vẹn mục Tin tức dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-tin-tuc-mn1),
     .typeheader-8 ul.megamenu .menu-tin-tuc-mn1 {
        display: none !important;
    }
     /* Ẩn trọn vẹn mục Giới thiệu dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-gioi-thieu-mn1),
     .typeheader-8 ul.megamenu .menu-gioi-thieu-mn1 {
        display: none !important;
    }
     /* Ẩn trọn vẹn mục liên hệ dù class nằm ở li hay a */
     .typeheader-8 ul.megamenu li:has(.menu-lien-he-mn1),
     .typeheader-8 ul.megamenu .menu-lien-he-mn1 {
        display: none !important;
    }
    .typeheader-8 .header-top .header-top-left {
        width: 50% !important;
        padding-left: 30px !important;
    }
    .typeheader-8 .header-top .header-top-right {
        width: 50% !important;
    }
   .typeheader-8 .header-top ul.top-link li.hidden-md {
        display: inline-block !important;
    }
}



/* [4]. Màn hình từ 768px đến 991px (Tablet ngang / iPad) */
@media (min-width: 768px) and (max-width: 991px) {
    /* HEADER */
   .typeheader-8 .header-top ul.top-link li.hidden-md {
        display: inline-block !important;
    }
   .typeheader-8 .header-top ul.top-link li.hidden-md .xin-chao {
        display: none;
    }
   .typeheader-8 .search-header-w .icon-search{
        display: none !important;
    }
    .typeheader-8 .search-header-w{
      position: absolute !important;
      top: -28px !important;
      right: 160px !important;
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 160px !important;
        border: 1px solid #118a0a !important;
    }
    .typeheader-8 .header-bottom .main-menu {
        width: 15% !important;
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }
    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 85% !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin-bottom: 15px;
    }
   /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul,
    ul.megamenu li .sub-menu .content .static-menu .menu ul a{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    .typeheader-8 .container-megamenu.horizontal ul.megamenu > li.menu-danh-muc-mn1.active { 
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 250px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 290px !important;
        border: 1px solid #118a0a !important;
        margin-right: 15px;
    }
}

/* [5]. Màn hình từ 480px đến 767px (Tablet dọc / Điện thoại lớn) */
@media (min-width: 480px) and (max-width: 767px) {
    /* HEADER */
    .typeheader-8 .header-top ul.top-link li.hidden-md {
        display: inline-block !important;
    }
   .typeheader-8 .header-top ul.top-link li.hidden-md .xin-chao {
        display: none;
    }
   .typeheader-8 .search-header-w .icon-search{
        display: none !important;
    }
  /* Thu nhỏ kích thước logo theo ý muốn */
  .typeheader-8 .navbar-logo img {
    max-width: 220px !important; /* Anh có thể tăng/giảm số này (vd: 120px hoặc 160px) cho vừa mắt */
    width: 100% !important;
    height: auto !important;
   }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 240px !important;
        border: 1px solid #118a0a !important;
    }
  /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul,
    ul.megamenu li .sub-menu .content .static-menu .menu ul a{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    .typeheader-8 .container-megamenu.horizontal ul.megamenu > li.menu-danh-muc-mn1.active { 
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 250px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    .typeheader-8 .header-bottom .main-menu {
        width: 15% !important;
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }
    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 85% !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin-bottom: 15px;
    }
  .typeheader-8 .search-header-w{
      position: absolute !important;
      top: -35px !important;
      right: 220px !important;
    }
   /* ẩn viền nút ô tìm kiếm  */
   .typeheader-8 .search-header-w #sosearchpro .search .input-group-btn {
         line-height: 0px !important;
    }
}

/* [6]. Màn hình điện thoại lớn / Phablet (Dưới 480px trở xuống) */
@media (min-width: 400px) and (max-width: 479px) {
   /* HEADER */
  /* Thu nhỏ kích thước logo theo ý muốn */
  .typeheader-8 .navbar-logo img {
    max-width: 220px !important; /* Anh có thể tăng/giảm số này (vd: 120px hoặc 160px) cho vừa mắt */
    width: 100% !important;
    height: auto !important;
   }
   .typeheader-8 .search-header-w .icon-search{
        display: none !important;
    }
    .typeheader-8 .search-header-w #sosearchpro .search {
        display: inline !important;
        width: 150px !important;
        border: 1px solid #118a0a !important;
    }
  /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul,
    ul.megamenu li .sub-menu .content .static-menu .menu ul a{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    .typeheader-8 .container-megamenu.horizontal ul.megamenu > li.menu-danh-muc-mn1.active { 
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 250px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    .typeheader-8 .header-bottom .main-menu {
        width: 15% !important;
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }
    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 85% !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin-bottom: 15px;
    }
  .typeheader-8 .search-header-w{
      position: absolute !important;
      top: -35px !important;
      right: 220px !important;
    }
   /* ẩn viền nút ô tìm kiếm  */
   .typeheader-8 .search-header-w #sosearchpro .search .input-group-btn {
         line-height: 0px !important;
    }
}

/* [7]. Màn hình điện thoại rất nhỏ / Đời cũ (320px) */
@media (max-width: 399px) {
   /* HEADER */
    .typeheader-8 .header-top .header-top-right {
        width:80% !important;
    }
   .typeheader-8 .header-top .header-top-left {
        width: 20% !important;
    }
  /* Thu nhỏ kích thước logo theo ý muốn */
  .typeheader-8 .navbar-logo img {
    max-width: 220px !important; /* Anh có thể tăng/giảm số này (vd: 120px hoặc 160px) cho vừa mắt */
    width: 100% !important;
    height: auto !important;
   }
   
    .typeheader-8 .search-header-w #sosearchpro .search {
        width: 150px !important;
        border: 1px solid #118a0a !important;
    }
  /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    ul.megamenu li .sub-menu .content .static-menu .menu ul,
    ul.megamenu li .sub-menu .content .static-menu .menu ul a{
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 550px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    /* Giải phóng sub-menu khỏi giới hạn bóp méo của khung cha */
    .typeheader-8 .container-megamenu.horizontal ul.megamenu > li.menu-danh-muc-mn1.active { 
        max-width: none !important;     /* Xóa bỏ giới hạn max-width 100% của theme */
        min-width: 250px !important;    /* Đảm bảo độ rộng tối thiểu an toàn */
        width: auto !important;         /* Cho phép tự co giãn theo nội dung cấu hình trong Admin */
    }
    .typeheader-8 .header-bottom .main-menu {
        width: 15% !important;
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }
    /*  Khung bên phải chứa Tìm kiếm & Giỏ hàng */
    .typeheader-8 .header-bottom .bottom-right {
        width: 85% !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin-bottom: 15px;
    }
  .typeheader-8 .search-header-w{
      position: absolute !important;
      top: 7px !important;
      right: 180px !important;
    }
   /* ẩn viền nút ô tìm kiếm  */
   .typeheader-8 .search-header-w #sosearchpro .search .input-group-btn {
         line-height: 0px !important;
    }
}