/*
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.   ***************/
@media (max-width: 846px) {
	li.img-thuong-hieu img {
    width: 61px !important;
    height: auto !important;
}
	ul.nav-menu-mobile > li > ul.sub-menu > li.menu-item-has-children:last-child {
    margin-bottom: 32px;
}
     li.menu-item.menu-item-type-taxonomy p.text-sub-menu {
        margin: 0;
        font-weight: 400;
    }
		li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-item-design-default.has-dropdown.has-icon-left.active {
    background: white;
		
}
    /* Menu Header Mobile */
    .menu-mobile-header {
        padding: 5px 10px;
        background-color: var(--primary-color);
    }

    .menu-mobile-header .logo img.header-logo-sticky {
        display: block !important;
    }

    .menu-mobile-header input[type=search] {
        box-shadow: none !important;
        border: 0;
        border-radius: 10px 0 0 10px;
        font-size: 14px;
    }

    ul#menu-menu-mobile-bottom li a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        color: #848788;
    }

    ul#menu-menu-mobile-bottom li.active a {
        color: #0e0e0e;
    }

    .menu-mobile-header button.ux-search-submit {
        min-height: 33px;
        border-radius: 0 10px 10px 0 !important;
    }

    .menu-mobile-header .live-search-results {
        position: absolute;
        background: #fff;
        border-radius: 0 0 10px 10px;
        -webkit-box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
        box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    }

    /* Menu Mobile Section */
    .menu-mobile-section {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 93%;
        background: #ffffff;
        z-index: 999;
        display: none;
    }

    ul.sub-menu.nav-sidebar-ul.children {
        margin: 0;
    }

    .list-menu-mobile {
        width: 100%;
        height: 100%;
        position: relative;
        overflow-y: auto;
    }

    .main-menu-mobile {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background: #F3F4F6;
    }

    ul.nav-menu-mobile {
        height: max-content;
        padding: 0;
        margin: 0;
    }

    ul.nav-menu-mobile > li {}

    ul.nav-menu-mobile li a {
        color: #000;
        font-size: 11px;
        font-weight: 700;
    }

    ul.nav-menu-mobile li a img {
        width: 35px;
        height: 35px;
    }

    ul.nav-menu-mobile > li > a > img {
        width: 26px;
        height: 26px;
		margin-top: 10px;
    }

    ul.nav-menu-mobile > li > a {
        width: 80px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px;
/*         -webkit-box-shadow: rgba(60, 64, 67, 0.1) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        box-shadow: rgba(60, 64, 67, 0.1) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
        text-decoration: none;
        position: relative;
        text-align: center;
        font-size: 12px;
    }

    /* Background Colors for Menu Items */
li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-design-default.has-dropdown.has-icon-left.active {
    background: white;
    box-shadow: none;
}

    /* Sub-menu Styles */
    ul.nav-menu-mobile > li > ul.sub-menu {
        width: calc(100% - 80px);
        height: 100%;
        display: none;
        float: left;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        background: #ffffff;
        -webkit-box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
        box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
        overflow-y: auto;
        z-index: 1;
    }

    ul.nav-menu-mobile > li.active > ul.sub-menu {
        padding: 15px 0 0 10px;
        margin-top: 0;
        background: white;
        box-shadow: none;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li {
        width: calc((100% - 30px) / 3);
        min-height: 85px;
        float: left;
        margin: 30px 10px 10px 0;
        padding: 5px;
        border: 1px solid #E5E7EB;
        border-radius: 1rem;
        background: #ffffff;
        position: relative;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li.menu-item-has-children {
        width: calc(100% - 10px);
		margin: 10px 0 0 0;
    }
li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.has-icon-left {
    margin: 0;
	
}
    ul.nav-menu-mobile > li > ul.sub-menu > li > a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        text-align: center;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li.menu-item-has-children > a {
        align-items: flex-start;
        padding: 5px 10px;
        font-size: 14px;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li > ul.sub-menu {
        padding: 0;
		margin: 0;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li > ul.sub-menu > li {
        width: calc((100% - 10px) / 3);
        min-height: unset;
        margin-bottom: 10px;
        display: inline-block;
    }

    ul.nav-menu-mobile > li > ul.sub-menu > li > ul.sub-menu > li > a {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        position: relative;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .menu-mobile-section .search-mobile-header {
        margin-right: auto;
        margin-left: 10px;
    }

    .menu-mobile-section li {
        list-style: none;
        margin-bottom: 0;
    }

    ul#menu-menu-mobile-bottom li a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .footer-menu-mobile {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 99999;
        display: block;
        background: white;
    }

    i.fa-light.fa-xmark {
        position: absolute;
        right: 0;
        z-index: 999;
        margin: 10px;
        cursor: pointer;
        font-size: 21px;
        background: var(--primary-color);
        color: white;
        padding: 1px 5px 1px 5px;
        border-radius: 5px;
    }

    ul#menu-menu-mobile-bottom {
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }

    ul#menu-menu-mobile-bottom li {
        margin: 0 5px;
    }

    .list-menu-mobile ul.sub-menu.nav-dropdown-simple {
        margin: 0;
    }

    ul#menu-menu-mobile-bottom {
        margin: 0;
    }

    ul#menu-menu-mobile-bottom li {
        margin: 0 5px;
        border: none;
        cursor: pointer;
    }

    .menu-mobile-section.active {
        display: block;
        z-index: 99999;
    }
}


/* ============================= */
/* Border-radius từng góc (desktop) */
/* ============================= */

/* Góc trên trái */
.rounded-tl-0    { border-top-left-radius:    0 !important; }
.rounded-tl-sm   { border-top-left-radius:    0.125rem !important; }
.rounded-tl      { border-top-left-radius:    0.25rem !important; }
.rounded-tl-md   { border-top-left-radius:    0.375rem !important; }
.rounded-tl-lg   { border-top-left-radius:    0.5rem !important; }
.rounded-tl-xl   { border-top-left-radius:    1rem !important; }
.rounded-tl-full { border-top-left-radius: 9999px !important; }

/* Góc trên phải */
.rounded-tr-0    { border-top-right-radius:    0 !important; }
.rounded-tr-sm   { border-top-right-radius:    0.125rem !important; }
.rounded-tr      { border-top-right-radius:    0.25rem !important; }
.rounded-tr-md   { border-top-right-radius:    0.375rem !important; }
.rounded-tr-lg   { border-top-right-radius:    0.5rem !important; }
.rounded-tr-xl   { border-top-right-radius:    1rem !important; }
.rounded-tr-full { border-top-right-radius: 9999px !important; }

/* Góc dưới phải */
.rounded-br-0    { border-bottom-right-radius:    0 !important; }
.rounded-br-sm   { border-bottom-right-radius:    0.125rem !important; }
.rounded-br      { border-bottom-right-radius:    0.25rem !important; }
.rounded-br-md   { border-bottom-right-radius:    0.375rem !important; }
.rounded-br-lg   { border-bottom-right-radius:    0.5rem !important; }
.rounded-br-xl   { border-bottom-right-radius:    1rem !important; }
.rounded-br-full { border-bottom-right-radius: 9999px !important; }

/* Góc dưới trái */
.rounded-bl-0    { border-bottom-left-radius:    0 !important; }
.rounded-bl-sm   { border-bottom-left-radius:    0.125rem !important; }
.rounded-bl      { border-bottom-left-radius:    0.25rem !important; }
.rounded-bl-md   { border-bottom-left-radius:    0.375rem !important; }
.rounded-bl-lg   { border-bottom-left-radius:    0.5rem !important; }
.rounded-bl-xl   { border-bottom-left-radius:    1rem !important; }
.rounded-bl-full { border-bottom-left-radius: 9999px !important; }


/* ============================= */
/* Border-radius từng góc (mobile) */
/* ============================= */
@media (max-width: 780px) {
  /* Góc trên trái */
  .mbl-rounded-tl-0    { border-top-left-radius:    0 !important; }
  .mbl-rounded-tl-sm   { border-top-left-radius:    0.125rem !important; }
  .mbl-rounded-tl      { border-top-left-radius:    0.25rem !important; }
  .mbl-rounded-tl-md   { border-top-left-radius:    0.375rem !important; }
  .mbl-rounded-tl-lg   { border-top-left-radius:    0.5rem !important; }
  .mbl-rounded-tl-xl   { border-top-left-radius:    1rem !important; }
  .mbl-rounded-tl-full { border-top-left-radius: 9999px !important; }

  /* Góc trên phải */
  .mbl-rounded-tr-0    { border-top-right-radius:    0 !important; }
  .mbl-rounded-tr-sm   { border-top-right-radius:    0.125rem !important; }
  .mbl-rounded-tr      { border-top-right-radius:    0.25rem !important; }
  .mbl-rounded-tr-md   { border-top-right-radius:    0.375rem !important; }
  .mbl-rounded-tr-lg   { border-top-right-radius:    0.5rem !important; }
  .mbl-rounded-tr-xl   { border-top-right-radius:    1rem !important; }
  .mbl-rounded-tr-full { border-top-right-radius: 9999px !important; }

  /* Góc dưới phải */
  .mbl-rounded-br-0    { border-bottom-right-radius:    0 !important; }
  .mbl-rounded-br-sm   { border-bottom-right-radius:    0.125rem !important; }
  .mbl-rounded-br      { border-bottom-right-radius:    0.25rem !important; }
  .mbl-rounded-br-md   { border-bottom-right-radius:    0.375rem !important; }
  .mbl-rounded-br-lg   { border-bottom-right-radius:    0.5rem !important; }
  .mbl-rounded-br-xl   { border-bottom-right-radius:    1rem !important; }
  .mbl-rounded-br-full { border-bottom-right-radius: 9999px !important; }

  /* Góc dưới trái */
  .mbl-rounded-bl-0    { border-bottom-left-radius:    0 !important; }
  .mbl-rounded-bl-sm   { border-bottom-left-radius:    0.125rem !important; }
  .mbl-rounded-bl      { border-bottom-left-radius:    0.25rem !important; }
  .mbl-rounded-bl-md   { border-bottom-left-radius:    0.375rem !important; }
  .mbl-rounded-bl-lg   { border-bottom-left-radius:    0.5rem !important; }
  .mbl-rounded-bl-xl   { border-bottom-left-radius:    1rem !important; }
  .mbl-rounded-bl-full { border-bottom-left-radius: 9999px !important; }
}

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


}

/* Border radius utilities */

/* Không bo tròn: đường viền vuông góc 90° */
.rounded-0       { border-radius:   0 !important; }

/* Bo nhẹ: radius 0.125rem (2px) */
.rounded-sm      { border-radius:   0.125rem !important; }

/* Bo mặc định: radius 0.25rem (4px) */
.rounded         { border-radius:   0.25rem !important; }

/* Bo trung bình: radius 0.375rem (6px) */
.rounded-md      { border-radius:   0.375rem !important; }

/* Bo lớn: radius 0.5rem (8px) */
.rounded-lg      { border-radius:   0.5rem !important; }

/* Bo rất lớn: radius 1rem (16px) */
.rounded-xl      { border-radius:   1rem !important; }

/* Bo full: 50% (hoặc 9999px) để thành hình tròn hoàn hảo */
.rounded-full    { border-radius: 9999px !important; }


@media (max-width: 780px) {
  /* Mobile: cùng các mức bo tròn như trên, nhưng chỉ khi màn hình ≤ 780px */

  /* Không bo tròn */
  .mbl-rounded-0    { border-radius:   0 !important; }

  /* Bo nhẹ (2px) */
  .mbl-rounded-sm   { border-radius:   0.125rem !important; }

  /* Bo mặc định (4px) */
  .mbl-rounded      { border-radius:   0.25rem !important; }

  /* Bo trung bình (6px) */
  .mbl-rounded-md   { border-radius:   0.375rem !important; }

  /* Bo lớn (8px) */
  .mbl-rounded-lg   { border-radius:   0.5rem !important; }

  /* Bo rất lớn (16px) */
  .mbl-rounded-xl   { border-radius:   1rem !important; }

  /* Bo full (hình tròn) */
  .mbl-rounded-full { border-radius: 9999px !important; }
}


.background-white{
	background: white;	
}
/* Padding utilities */
.p-0  { padding:       0 !important; }
.pt-0 { padding-top:    0 !important; }
.pe-0 { padding-right:  0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-left:   0 !important; }
.py-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
.px-0 { padding-left:   0 !important; padding-right: 0 !important; }

/* Margin utilities */
.m-0  { margin:        0 !important; }
.mt-0 { margin-top:     0 !important; }
.me-0 { margin-right:   0 !important; }
.mb-0 { margin-bottom:  0 !important; }
.ms-0 { margin-left:    0 !important; }
.my-0 { margin-top:     0 !important; margin-bottom: 0 !important; }
.mx-0 { margin-left:    0 !important; margin-right:  0 !important; }


@media (max-width: 780px) {
  /* Padding */
  .mbl-p-0   { padding:0 !important; }
  .mbl-pt-0  { padding-top:    0 !important; }
  .mbl-pe-0  { padding-right:  0 !important; }
  .mbl-pb-0  { padding-bottom: 0 !important; }
  .mbl-ps-0  { padding-left:   0 !important; }
  .mbl-px-0  { padding-left:   0 !important; padding-right:  0 !important; }
  .mbl-py-0  { padding-top:    0 !important; padding-bottom: 0 !important; }

  /* Margin */
  .mbl-m-0   { margin:        0 !important; }
  .mbl-mt-0  { margin-top:     0 !important; }
  .mbl-me-0  { margin-right:   0 !important; }
  .mbl-mb-0  { margin-bottom:  0 !important; }
  .mbl-ms-0  { margin-left:    0 !important; }
  .mbl-mx-0  { margin-left:    0 !important; margin-right:   0 !important; }
  .mbl-my-0  { margin-top:     0 !important; margin-bottom:  0 !important; }
}
@media (min-width: 846px){
.footer-menu-mobile {
    display: none;
}
.menu-mobile-section {
    display: none;
}
	
}