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

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



/* Badge Sale - Tăng kích thước nền badge cho phù hợp với số % */
.badge-container {margin:0}
.badge-circle-inside .badge-inner, .badge-circle .badge-inner {
    border-radius: 8px 30px 30px 0;
    background: #f00;
    position: relative;
    padding: 5px 10px;
}
.badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after {
    position: absolute;
    content: '';
    width: 3px;
    height: 15px;
    background: #8b0018;
    bottom: -5px;
    left: 0;
    z-index: -1;
    border-radius: 0 0 0 15px;
}
.badge {
    height: auto;
    min-height: 35px;
    width: auto;
    min-width: 75px;
    font-size: 16px;
    margin-left: -12px;
    margin-top: -10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 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;
}
}

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



}