/**
 * DANANG MEDIA — danangmedia-header.css  v2.0
 *
 * Desktop: Navigation đẹp với active indicator, dropdown glassmorphism
 * Mobile:  Full-screen overlay, hamburger animation, accordion submenu
 *
 * Load order: flatsome-style → danangmedia-style → danangmedia-header
 */

/* ══════════════════════════════════════════════════════════════
   LOCAL TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  --dmh-red:     var(--clr-primary,      #E8401A);
  --dmh-red-d:   var(--clr-primary-dark, #C73212);
  --dmh-red-l:   #FFF3EF;
  --dmh-org:     #F7931E;
  --dmh-grad:    linear-gradient(135deg, #E8401A 0%, #F7931E 100%);
  --dmh-dark:    #0A0F1A;
  --dmh-border:  #E8EDF4;
  --dmh-white:   #FFFFFF;
  --dmh-ease:    cubic-bezier(.16, 1, .3, 1);
  --dmh-spring:  cubic-bezier(.34, 1.56, .64, 1);
  --dmh-dur:     .24s;
  --dmh-dur-f:   .14s;
  --dmh-sh-red:  0 6px 24px rgba(232, 64, 26, .30);
  --dmh-h-top:   34px;
  --dmh-h-main:  70px;
}


/* ══════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════ */
.header-top-inner,
#header .header-top {
  background:    var(--dmh-dark) !important;
  border-bottom: none !important;
  min-height:    var(--dmh-h-top) !important;
}

.header-top-inner .nav-top > li > a {
  color:       rgba(255, 255, 255, .60) !important;
  font-size:   11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition:  color var(--dmh-dur-f) !important;
  padding:     0 10px !important;
}
.header-top-inner .nav-top > li > a:hover {
  color: #fff !important;
}

/* Hotline trong topbar nổi bật */
.header-top-inner .nav-top > li.dm-hotline > a {
  color:       var(--dmh-org) !important;
  font-weight: 700 !important;
}
.header-top-inner .nav-top > li.dm-hotline > a:hover {
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════
   MAIN HEADER BAR
   ══════════════════════════════════════════════════════════════ */
#header .header-main,
.header-main {
  background:    var(--dmh-white) !important;
  border-bottom: 1px solid var(--dmh-border) !important;
  box-shadow:    none !important;
  min-height:    var(--dmh-h-main) !important;
  transition:    background var(--dmh-dur), box-shadow var(--dmh-dur) !important;
}

/* Sticky: frosted glass */
.header-wrapper.stuck .header-main {
  background:    rgba(255, 255, 255, .92) !important;
  box-shadow:    0 1px 0 rgba(0,0,0,.06), 0 4px 24px rgba(0,0,0,.07) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  backdrop-filter:         saturate(180%) blur(16px) !important;
}


/* ══════════════════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════════════════ */
#header .logo-image img {
  transition: transform var(--dmh-dur) var(--dmh-spring),
              opacity   var(--dmh-dur-f) !important;
}
#header .logo-image:hover img {
  transform: scale(1.05) !important;
  opacity:   .9 !important;
}


/* ══════════════════════════════════════════════════════════════
   ██████  DESKTOP NAV  ██████
   ══════════════════════════════════════════════════════════════ */

/* Item wrapper */
.header-main .nav > li {
  position: relative !important;
}

/* Link */
.header-main .nav > li > a {
  font-family:    'Baloo 2', 'Nunito', sans-serif !important;
  font-size:      13.5px !important;
  font-weight:    700 !important;
  color:          #1e293b !important;
  letter-spacing: .01em !important;
  padding:        8px 14px !important;
  border-radius:  8px !important;
  position:       relative !important;
  transition:     color var(--dmh-dur-f),
                  background var(--dmh-dur-f) !important;
}

/* Hover bg */
.header-main .nav > li > a:hover {
  color:      var(--dmh-red) !important;
  background: var(--dmh-red-l) !important;
}

/* Active page */
.header-main .nav > li.current-menu-item > a,
.header-main .nav > li.current-menu-ancestor > a {
  color:      var(--dmh-red) !important;
  background: var(--dmh-red-l) !important;
}

/* ── Active pill indicator (bottom of link) ── */
.header-main .nav > li > a::before {
  content:    '' !important;
  display:    block !important;
  position:   absolute !important;
  bottom:     2px !important;
  left:       50% !important;
  transform:  translateX(-50%) scaleX(0) !important;
  width:      calc(100% - 20px) !important;
  height:     2.5px !important;
  border-radius: 999px !important;
  background: var(--dmh-grad) !important;
  transition: transform var(--dmh-dur) var(--dmh-ease) !important;
}
.header-main .nav > li > a:hover::before,
.header-main .nav > li.current-menu-item > a::before,
.header-main .nav > li.current-menu-ancestor > a::before {
  transform: translateX(-50%) scaleX(1) !important;
}

/* Loại bỏ ::after sparkle từ style.css chỉ trong nav chính */
.header-main .nav > li > a::after {
  display: none !important;
  content: none !important;
}

/* Focus visible */
.header-main .nav > li > a:focus-visible {
  outline:        2px solid var(--dmh-red) !important;
  outline-offset: 2px !important;
}


/* ══════════════════════════════════════════════════════════════
   DROPDOWN MENU — glassmorphism
   ══════════════════════════════════════════════════════════════ */
.header-main .nav .sub-menu {
  position:    absolute !important;
  top:         calc(100% + 10px) !important;
  left:        0 !important;
  min-width:   220px !important;
  background:  rgba(255, 255, 255, .97) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter:         blur(20px) saturate(180%) !important;
  border:        1px solid rgba(232, 64, 26, .10) !important;
  border-top:    2px solid var(--dmh-red) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow:    0 16px 48px rgba(0, 0, 0, .12),
                 0 4px  12px rgba(232, 64, 26, .06) !important;
  padding:       6px !important;
  overflow:      hidden !important;

  /* Animate in */
  opacity:    0 !important;
  transform:  translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity   var(--dmh-dur) var(--dmh-ease),
              transform var(--dmh-dur) var(--dmh-ease) !important;
}

/* Show on hover */
.header-main .nav > li:hover > .sub-menu,
.header-main .nav > li:focus-within > .sub-menu {
  opacity:        1 !important;
  transform:      translateY(0) !important;
  pointer-events: auto !important;
}

/* Dropdown items */
.header-main .nav .sub-menu > li { margin: 0 !important; }

.header-main .nav .sub-menu > li > a {
  display:     flex !important;
  align-items: center !important;
  gap:         10px !important;
  padding:     9px 14px !important;
  border-radius: 8px !important;
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       #334155 !important;
  transition:  background var(--dmh-dur-f),
               color      var(--dmh-dur-f),
               padding-left var(--dmh-dur-f) !important;
  white-space: nowrap !important;
}

/* Arrow icon before dropdown items */
.header-main .nav .sub-menu > li > a::before {
  content:      '›' !important;
  font-size:    16px !important;
  line-height:  1 !important;
  color:        var(--dmh-red) !important;
  opacity:      0 !important;
  transform:    translateX(-4px) !important;
  transition:   opacity   var(--dmh-dur-f),
                transform var(--dmh-dur-f) !important;
  flex-shrink:  0 !important;
}

.header-main .nav .sub-menu > li > a:hover {
  background:   var(--dmh-red-l) !important;
  color:        var(--dmh-red) !important;
  padding-left: 18px !important;
}

.header-main .nav .sub-menu > li > a:hover::before {
  opacity:   1 !important;
  transform: translateX(0) !important;
}

/* Divider between groups */
.header-main .nav .sub-menu > li.menu-item-has-children > a {
  font-weight: 700 !important;
  color:       var(--dmh-dark) !important;
  font-size:   11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding-top: 12px !important;
  color:       #94a3b8 !important;
}


/* ══════════════════════════════════════════════════════════════
   CTA / CART BUTTON
   ══════════════════════════════════════════════════════════════ */
.header-button .button,
.nav-bar .header-button .button {
  background:    var(--dmh-grad) !important;
  color:         #fff !important;
  border-radius: 999px !important;
  font-family:   'Baloo 2', sans-serif !important;
  font-weight:   800 !important;
  font-size:     13px !important;
  padding:       10px 22px !important;
  border:        none !important;
  box-shadow:    var(--dmh-sh-red) !important;
  letter-spacing: .02em !important;
  transition:    transform var(--dmh-dur) var(--dmh-spring),
                 box-shadow var(--dmh-dur) !important;
}
.header-button .button:hover,
.nav-bar .header-button .button:hover {
  transform:  translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(232, 64, 26, .45) !important;
  color:      #fff !important;
}

/* Cart icon */
.cart-icon .icon {
  transition: transform var(--dmh-dur) var(--dmh-spring) !important;
}
.cart-icon:hover .icon {
  transform: scale(1.15) rotate(-8deg) !important;
}
.cart-icon .cart-count {
  background:  var(--dmh-grad) !important;
  color:       #fff !important;
  font-size:   9px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  min-width:   16px !important;
  height:      16px !important;
  line-height: 16px !important;
  box-shadow:  0 2px 6px rgba(232, 64, 26, .40) !important;
}

/* Search box */
.search-field {
  border:        1.5px solid var(--dmh-border) !important;
  border-radius: 999px !important;
  padding:       7px 18px !important;
  font-size:     13.5px !important;
  background:    #f8fafc !important;
  transition:    border-color var(--dmh-dur-f),
                 background   var(--dmh-dur-f),
                 box-shadow   var(--dmh-dur-f) !important;
}
.search-field:focus {
  border-color: var(--dmh-red) !important;
  background:   #fff !important;
  outline:      none !important;
  box-shadow:   0 0 0 3px rgba(232, 64, 26, .12) !important;
}


/* ══════════════════════════════════════════════════════════════
   ██████  MOBILE HAMBURGER  ██████
   ══════════════════════════════════════════════════════════════ */

/* Nút hamburger */
.nav-icon,
.nav-icon-toggle {
  width:  42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--dmh-dur-f) !important;
}
.nav-icon:hover,
.nav-icon-toggle:hover {
  background: var(--dmh-red-l) !important;
}

/* 3 đường kẻ */
.nav-icon .lines,
.nav-icon .lines::before,
.nav-icon .lines::after {
  display:          block !important;
  width:            22px !important;
  height:           2px !important;
  border-radius:    2px !important;
  background-color: var(--dmh-dark) !important;
  transition:       transform .32s var(--dmh-ease),
                    opacity   .20s,
                    background .14s !important;
}
.nav-icon .lines { position: relative !important; }
.nav-icon .lines::before {
  content:   '' !important;
  position:  absolute !important;
  top:       -7px !important;
  left:      0 !important;
}
.nav-icon .lines::after {
  content:  '' !important;
  position: absolute !important;
  top:      7px !important;
  left:     4px !important; /* offset — más moderno */
  width:    18px !important;
}
.nav-icon:hover .lines,
.nav-icon:hover .lines::before,
.nav-icon:hover .lines::after {
  background-color: var(--dmh-red) !important;
}

/* Hamburger → X animation */
.mobile-menu-open .nav-icon .lines {
  background-color: transparent !important;
}
.mobile-menu-open .nav-icon .lines::before {
  transform:        rotate(45deg) translate(5px, 5px) !important;
  background-color: var(--dmh-red) !important;
}
.mobile-menu-open .nav-icon .lines::after {
  transform:        rotate(-45deg) translate(3px, -5px) !important;
  width:            22px !important;
  left:             0 !important;
  background-color: var(--dmh-red) !important;
}


/* ══════════════════════════════════════════════════════════════
   ██████  MOBILE MENU OVERLAY  v2.0  ██████
   Style: card items, cam gradient, chevron arrow, font tròn
   ══════════════════════════════════════════════════════════════ */

/* Nền menu panel */
#main-menu,
.mobile-nav {
  background:   #fff !important;
  box-shadow:   -12px 0 48px rgba(0, 0, 0, .18) !important;
  font-family:  'Baloo 2', 'Nunito', sans-serif !important;
  border-left:  none !important;
}

/* Dải gradient cam-đỏ trên cùng */
#main-menu::before {
  content:    '' !important;
  display:    block !important;
  height:     5px !important;
  background: linear-gradient(90deg, #E8401A 0%, #F7931E 50%, #E8401A 100%) !important;
  background-size: 200% !important;
  animation:  dm-grad-slide 3s linear infinite !important;
  flex-shrink: 0 !important;
}
@keyframes dm-grad-slide {
  0%   { background-position: 0% }
  100% { background-position: 200% }
}

/* ── Wrapper padding cho items ── */
#main-menu .nav {
  padding: 10px 14px 20px !important;
}

/* Mỗi item — card style */
#main-menu .nav > li {
  border-bottom: none !important;
  margin:        0 0 6px 0 !important;
  border-radius: 12px !important;
  overflow:      hidden !important;
  background:    #f8fafc !important;
  border:        1.5px solid #eef2f7 !important;
  transition:    border-color .2s, box-shadow .2s !important;
}
#main-menu .nav > li:hover {
  border-color: rgba(247, 147, 30, .35) !important;
  box-shadow:   0 3px 12px rgba(247, 147, 30, .10) !important;
}
#main-menu .nav > li:last-child {
  margin-bottom: 0 !important;
}

/* Link chính mobile */
#main-menu .nav > li > a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  font-size:       15px !important;
  font-weight:     700 !important;
  color:           #1e293b !important;
  padding:         14px 16px !important;
  border-radius:   0 !important;
  letter-spacing:  .01em !important;
  border-bottom:   none !important;
  transition:      background .18s, color .18s !important;
  position:        relative !important;
}

/* Icon emoji từ JS — căn đều */
#main-menu .nav > li > a .dm-nav-icon {
  font-size:    16px !important;
  margin-right: 10px !important;
  opacity:      0.75 !important;
  flex-shrink:  0 !important;
}

/* Text của link — chiếm hết space còn lại */
#main-menu .nav > li > a span:not(.dm-nav-icon):not(.dm-chevron) {
  flex: 1 !important;
}

/* ── Chevron mũi tên ▼ bên phải ── */
#main-menu .nav > li.menu-item-has-children > a::after,
#main-menu .nav > li > a .dm-chevron {
  content:      '' !important;
  display:      inline-flex !important;
  align-items:  center !important;
  justify-content: center !important;
  width:        28px !important;
  height:       28px !important;
  border-radius: 50% !important;
  background:   rgba(247, 147, 30, .12) !important;
  color:        var(--dmh-org) !important;
  font-size:    13px !important;
  flex-shrink:  0 !important;
  margin-left:  auto !important;
  position:     static !important;
  transform:    none !important;
  /* Vẽ chevron bằng border */
  border-left:  2.5px solid var(--dmh-org) !important;
  border-bottom: 2.5px solid var(--dmh-org) !important;
  width:        9px !important;
  height:       9px !important;
  border-radius: 0 !important;
  background:   none !important;
  transform:    rotate(-45deg) translateY(-3px) !important;
  transition:   transform .28s var(--dmh-ease) !important;
  /* Override các style cũ */
  top:    auto !important;
  right:  auto !important;
  bottom: auto !important;
  left:   auto !important;
  opacity: 1 !important;
}

/* Bọc chevron trong circle */
#main-menu .nav > li.menu-item-has-children > a::after {
  box-shadow: none !important;
  margin-right: 4px !important;
}

/* Hover / active item */
#main-menu .nav > li > a:hover,
#main-menu .nav > li.current-menu-item > a {
  background: linear-gradient(135deg, rgba(232,64,26,.06) 0%, rgba(247,147,30,.08) 100%) !important;
  color:      var(--dmh-org) !important;
}

/* Active item — left pill */
#main-menu .nav > li.current-menu-item {
  border-color:  var(--dmh-org) !important;
  border-left:   3px solid var(--dmh-org) !important;
  background:    #fff !important;
}
#main-menu .nav > li.current-menu-item > a {
  color:        var(--dmh-red) !important;
  padding-left: 14px !important;
}

/* Reset ::before sparks từ style.css */
#main-menu .nav > li > a::before {
  display:    none !important;
  content:    none !important;
  background: none !important;
  width:      auto !important;
  height:     auto !important;
  position:   static !important;
}

/* ── Mobile sub-menu (accordion trong card) ── */
#main-menu .nav .sub-menu {
  background:    #fff !important;
  border-top:    1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  padding:       6px 0 8px !important;
  border-left:   none !important;
  margin:        0 !important;
}

#main-menu .nav .sub-menu > li {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  margin:        0 !important;
}

#main-menu .nav .sub-menu > li > a {
  font-size:     13px !important;
  font-weight:   600 !important;
  color:         #475569 !important;
  padding:       9px 16px 9px 36px !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           8px !important;
  transition:    background .16s, color .16s, padding-left .16s !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  position:      relative !important;
}

/* Dấu chấm cam trước sub-item */
#main-menu .nav .sub-menu > li > a::before {
  content:       '' !important;
  display:       block !important;
  position:      absolute !important;
  left:          22px !important;
  top:           50% !important;
  transform:     translateY(-50%) !important;
  width:         5px !important;
  height:        5px !important;
  border-radius: 50% !important;
  background:    var(--dmh-org) !important;
  opacity:       0.45 !important;
  flex-shrink:   0 !important;
  transition:    opacity .16s, transform .16s !important;
  /* reset */
  border: none !important;
}
#main-menu .nav .sub-menu > li > a:hover::before {
  opacity:   1 !important;
  transform: translateY(-50%) scale(1.4) !important;
}
#main-menu .nav .sub-menu > li > a:hover {
  background:   rgba(247, 147, 30, .06) !important;
  color:        var(--dmh-red) !important;
  padding-left: 40px !important;
}

/* ── Mobile: nút CTA dưới cùng ── */
#main-menu .nav > li.menu-item-cta > a {
  margin:        12px 16px !important;
  padding:       12px 20px !important;
  background:    var(--dmh-grad) !important;
  color:         #fff !important;
  border-radius: 12px !important;
  font-weight:   800 !important;
  font-size:     14px !important;
  text-align:    center !important;
  justify-content: center !important;
  box-shadow:    var(--dmh-sh-red) !important;
  border-left:   none !important;
}
#main-menu .nav > li.menu-item-cta > a::before,
#main-menu .nav > li.menu-item-cta > a::after {
  display: none !important;
}
#main-menu .nav > li.menu-item-cta > a:hover {
  background:  var(--dmh-grad) !important;
  color:       #fff !important;
  transform:   none !important;
  box-shadow:  0 8px 24px rgba(232, 64, 26, .45) !important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — chỉ áp dụng < 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #header .header-main {
    min-height: 60px !important;
    padding:    0 12px !important;
  }

  /* Header cố định sticky mobile */
  .header-wrapper {
    position: sticky !important;
    top:      0 !important;
    z-index:  9000 !important;
  }

  /* Ẩn topbar trên mobile */
  #header .header-top {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #header *,
  #main-menu * {
    transition:  none !important;
    animation:   none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   LOGO OVERRIDE — 2026
   Dùng CSS content: url() để đổi logo không cần WP Customizer
   ══════════════════════════════════════════════════════════════ */
img.header_logo,
img.header-logo,
#logo img.header_logo,
#logo img.header-logo {
  content: url('https://danangmedia.net/wp-content/uploads/2026/03/LOGO-scaled.jpg') !important;
  max-height: 52px !important;
  width:  auto !important;
  object-fit: contain !important;
}

/* Logo version dark (sticky) */
img.header-logo-dark,
#logo img.header-logo-dark {
  content: url('https://danangmedia.net/wp-content/uploads/2026/03/LOGO-scaled.jpg') !important;
  max-height: 44px !important;
  width:  auto !important;
  object-fit: contain !important;
}