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

.header-nav > li > a {
  font-size: 1.2rem;
}

.nav > li {
  margin: 0 10px;
}

@media (max-width: 1530px) {
  .header-nav > li {
    margin: 0 10px;
  }
}

@media (max-width: 1400px) {
  .header-nav > li {
    margin: 0 8px;
  }
}

@media (max-width: 1300px) {
  .header-nav > li {
    margin: 0 3px;
  }
}

@media (max-width: 1200px) {
  .header-nav > li {
    margin: 0 -1px;
  }
}

@media (max-width: 1301px) {
  .header-nav > li > a {
    font-size: 1.1rem;
  }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .header-nav > li > a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 1em !important;
  }
}

/* 2. Đối với màn hình từ 1100px trở xuống: Ép chuyển hẳn sang giao diện Mobile */
@media (max-width: 1100px) {
  /* Ẩn TOÀN BỘ các khối được đánh dấu là desktop-only */
  #header .hide-for-medium,
  #header .nav-desktop,
  #header .flex-col.flex-left.hide-for-medium,
  #header .flex-col.flex-right.hide-for-medium {
    display: none !important;
  }

  /* Hiển thị các khối mobile */
  #header .show-for-medium,
  #header .mobile-nav {
    display: flex !important;
  }

  /* Đảm bảo hàng (row) trong header không bị vỡ layout */
  #header .header-inner.flex-row {
    flex-wrap: nowrap !important;
  }
}