/**
 * Cát Decor — catdecor-header.css v6.1
 *
 * CSS-only enhancements cho Flatsome native header.
 * KHÔNG override display:none, KHÔNG ẩn header gốc.
 * Flatsome xử lý layout — ta chỉ tô đẹp thêm.
 *
 * Mục lục:
 *   1. CSS Variables
 *   2. Scroll shadow
 *   3. Nav links
 *   4. Dropdown cấp 2
 *   5. Dropdown cấp 3
 *   6. Mega menu
 *   7. Mobile menu
 *   8. Cart badge
 */

/* ══════════════════════════════════════════════════
   1. CSS VARIABLES
══════════════════════════════════════════════════ */
:root {
  --cdh-rose:   #e8477c;
  --cdh-rose-d: #c73268;
  --cdh-rose-l: rgba(232,71,124,.08);
  --cdh-ink:    #1a1a2e;
  --cdh-line:   #f0f0f0;
  --cdh-fast:   .18s;
  --cdh-mid:    .28s;
  --cdh-ease:   cubic-bezier(.4,0,.2,1);
}


/* ══════════════════════════════════════════════════
   2. SCROLL SHADOW
   JS thêm .cdh-scrolled vào #header khi scroll > 10px
══════════════════════════════════════════════════ */
#header {
  transition: box-shadow var(--cdh-mid) var(--cdh-ease);
}

#header.cdh-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.08) !important;
}


/* ══════════════════════════════════════════════════
   3. NAV LINKS (cấp 1)
══════════════════════════════════════════════════ */
#header .nav > li > a,
#header .main-nav > li > a {
  font-weight:     700 !important;
  letter-spacing:  .01em;
  transition:      color var(--cdh-fast), background var(--cdh-fast) !important;
  border-radius:   6px;
  padding:         6px 10px !important;
}

#header .nav > li > a:hover,
#header .main-nav > li > a:hover {
  color:      var(--cdh-rose)      !important;
  background: var(--cdh-rose-l)    !important;
}

/* Active / current */
#header .nav > li.current-menu-item > a,
#header .nav > li.current-menu-ancestor > a {
  color:      var(--cdh-rose) !important;
}


/* ══════════════════════════════════════════════════
   4. DROPDOWN CẤP 2
══════════════════════════════════════════════════ */
#header .sub-menu {
  border:        1px solid var(--cdh-line) !important;
  border-radius: 10px !important;
  box-shadow:    0 8px 28px rgba(0,0,0,.10) !important;
  padding:       8px !important;
  min-width:     200px !important;
}

#header .sub-menu li a {
  border-radius: 6px !important;
  padding:       8px 14px !important;
  font-size:     14px !important;
  transition:    background var(--cdh-fast), padding-left var(--cdh-fast) !important;
  color:         var(--cdh-ink) !important;
}

#header .sub-menu li a:hover {
  background:  var(--cdh-rose-l)  !important;
  color:       var(--cdh-rose)    !important;
  padding-left: 18px              !important;
}


/* ══════════════════════════════════════════════════
   5. DROPDOWN CẤP 3
══════════════════════════════════════════════════ */
#header .sub-menu .sub-menu {
  left: 100% !important;
  top:  0    !important;
}

#header .sub-menu .sub-menu li a::before {
  content: '›  ';
  color:   var(--cdh-rose);
}


/* ══════════════════════════════════════════════════
   6. MEGA MENU
══════════════════════════════════════════════════ */
#header .mega-menu .nav-column > .nav-column-title,
#header .mega-menu .mega-menu-title {
  font-size:      11px !important;
  font-weight:    800 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--cdh-rose) !important;
  padding:        0 0 6px !important;
  border-bottom:  2px solid var(--cdh-rose-l);
  margin-bottom:  4px !important;
}


/* ══════════════════════════════════════════════════
   7. MOBILE MENU
══════════════════════════════════════════════════ */
@media (max-width: 849px) {
  /* Cấp 2: indent */
  #mobile-menu .sub-menu li a,
  .mobile-menu .sub-menu li a {
    padding-left: 30px !important;
    font-size:    14px !important;
  }

  /* Cấp 3: indent sâu hơn + prefix */
  #mobile-menu .sub-menu .sub-menu li a,
  .mobile-menu .sub-menu .sub-menu li a {
    padding-left: 46px !important;
  }

  #mobile-menu .sub-menu .sub-menu li a::before,
  .mobile-menu .sub-menu .sub-menu li a::before {
    content: '› ';
    color:   var(--cdh-rose);
  }
}


/* ══════════════════════════════════════════════════
   8. CART BADGE
══════════════════════════════════════════════════ */
.cart-count:empty,
.cdh-cart-badge:empty { display: none; }


/* ══════════════════════════════════════════════════
   9. SEARCH BAR — CSS only, Flatsome xử lý logic
══════════════════════════════════════════════════ */

/* Wrapper input search của Flatsome */
.search-form,
.header-search-form,
[class*="search-form"] {
  position: relative;
}

/* Input field */
.search-field,
input[type="search"],
.header-search-form input[type="search"],
.search-form input[type="search"] {
  width:            100%;
  padding:          10px 44px 10px 18px;
  border:           2px solid #f0e6f5;
  border-radius:    999px;
  font-size:        14px;
  color:            #333;
  background:       #fff;
  outline:          none;
  transition:       border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}

.search-field:focus,
input[type="search"]:focus {
  border-color: var(--cdh-rose, #e8477c);
  box-shadow:   0 0 0 3px rgba(232,71,124,.10);
}

/* Placeholder */
.search-field::placeholder,
input[type="search"]::placeholder {
  color: #b0a8b9;
  font-size: 13px;
}

/* Nút submit */
.search-submit,
.search-form button[type="submit"],
.header-search-form button[type="submit"] {
  position:      absolute;
  right:         6px;
  top:           50%;
  transform:     translateY(-50%);
  width:         32px;
  height:        32px;
  border:        none;
  border-radius: 50%;
  background:    var(--cdh-rose, #e8477c);
  color:         #fff;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     14px;
  transition:    background .2s, transform .15s;
}

.search-submit:hover,
.search-form button[type="submit"]:hover {
  background: #c73268;
  transform:  translateY(-50%) scale(1.08);
}

/* Icon search bên trong nút (nếu Flatsome dùng svg/icon) */
.search-submit svg,
.search-form button[type="submit"] svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Search overlay / dropdown của Flatsome */
.search-box,
.header-search-dropdown {
  border-radius:  12px;
  box-shadow:     0 8px 32px rgba(0,0,0,.12);
  border:         1px solid #f0e6f5;
  overflow:       hidden;
}

/* Kết quả search live */
.search-results-dropdown li,
.live-search-results li {
  border-bottom: 1px solid #fdf0f5;
  transition: background .15s;
}

.search-results-dropdown li:hover,
.live-search-results li:hover {
  background: #fff5f8;
}

.search-results-dropdown li:last-child,
.live-search-results li:last-child {
  border-bottom: none;
}

/* Mobile: full-width */
@media (max-width: 767px) {
  .search-field,
  input[type="search"] {
    font-size: 16px; /* tránh zoom iOS */
    padding: 11px 44px 11px 16px;
  }
}