/* Header Custom Styles */
:root {
  --header-bg: var(--gradient-primary, linear-gradient(to right, #0f0c29, #302b63, #24243e));
  --header-text: var(--color-text-secondary, rgba(255, 255, 255, 0.9));
  --header-hover: var(--color-text-primary, #fff);
  --header-accent: var(--color-primary, #7c3aed);
  --header-menu-bg: var(--color-bg-secondary, rgba(17, 24, 39, 0.95));
  --header-border: var(--color-border-primary, rgba(124, 58, 237, 0.3));
  --header-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
  --header-transition: var(--transition-default, all 0.3s ease);
}

/* Header Container */
header.custom-header {
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  transition: var(--header-transition);
  padding: 0.75rem 0;
}

/* Logo Styling */
header.custom-header .logo-container {
  display: flex;
  align-items: center;
}

header.custom-header .logo-container img {
  transition: transform 0.3s ease;
}

header.custom-header .logo-container:hover img {
  transform: scale(1.1);
}

header.custom-header .logo-text {
  font-weight: 800;
  background: var(--gradient-secondary, linear-gradient(90deg, #fff, #7c3aed));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: var(--header-transition);
  letter-spacing: 0.5px;
}

/* Navigation Menu */
header.custom-header nav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

header.custom-header nav li {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative; /* Quan trọng cho việc định vị dropdown */
}

header.custom-header nav a {
  color: var(--header-text);
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: var(--header-transition);
  display: inline-block;
}

/* Underline effect for nav links */
header.custom-header nav a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--header-accent);
  transition: var(--header-transition);
}

header.custom-header nav a:hover {
  color: var(--header-hover);
}

header.custom-header nav a:hover:after {
  width: 100%;
}

/* Active link state */
header.custom-header nav a.active {
  color: var(--header-hover);
}

header.custom-header nav a.active:after {
  width: 100%;
}

/* Dropdown Toggle Button - Chung cho cả PC và Mobile */
header.custom-header button.dropdown-toggle {
  display: flex;
  align-items: center;
  color: var(--header-text);
  font-weight: 500;
  position: relative;
  transition: var(--header-transition);
  background: transparent;
  border: none;
  cursor: pointer;
}

header.custom-header button.dropdown-toggle:hover {
  color: var(--header-hover);
}

/* Add down arrow to dropdown toggle */
header.custom-header button.dropdown-toggle::after {
  content: '▼';
  font-size: 0.7em;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Hiệu ứng khi hover */
header.custom-header button.dropdown-toggle:hover::after {
  transform: translateY(2px);
}

/* Hiệu ứng khi mở dropdown */
header.custom-header button.dropdown-toggle.open::after {
  transform: rotate(180deg);
  margin-top: 2px;
}

/* Dropdown Menu - Style chung */
header.custom-header .dropdown-menu {
  background: rgba(24, 18, 48, 0.98); /* Màu nền giống mobile */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--header-border);
  padding: 0.5rem 0;
  z-index: 100;
  min-width: 180px;
  transition: opacity 0.2s ease, background 0.2s;
}

header.custom-header .dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ensure dropdown menus with hidden class are actually hidden */
header.custom-header .dropdown-menu.hidden {
  display: none !important;
}

/* Default state for dropdowns */
header.custom-header .dropdown-menu {
  display: block;
}

/* Style cho nút "Xem thêm" */
header.custom-header .more-menu-container {
  position: relative;
}

/* Style đặc biệt cho menu dropdown trên Desktop (chỉ từ 1024px trở lên) */
@media (min-width: 1024px) {
  header.custom-header .more-menu-container .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Đảm bảo luôn dùng transform này */
    margin-top: 0;
    width: 240px; /* Chiều rộng giống mobile */
    min-width: 180px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
    background: var(--header-bg) !important; /* Sử dụng màu nền của header để hợp với theme */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.12);
    border: 2px solid var(--color-primary); /* Sử dụng biến màu chính */
    border-radius: 0.5rem;
    padding: 0.5rem 0;
  }
  
  /* Thêm lại style cho ul trong dropdown menu */
  header.custom-header .dropdown-menu ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0; /* Đảm bảo không có padding */
    margin: 0; /* Đảm bảo không có margin */
  }
  
  /* Đường ngăn cách full width cho PC */
  header.custom-header .dropdown-menu li:not(:last-child) {
    position: relative;
    padding-bottom: 1px;
  }
  
  /* Tạo đường viền full width */
  header.custom-header .dropdown-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border-secondary);
  }
  
  /* Loại bỏ đường viền dưới cho các liên kết trên PC */
  header.custom-header .dropdown-menu li a {
    border-bottom: none !important;
  }
}

/* Sửa lại cách CSS áp dụng cho đường ngăn cách */
@media (min-width: 1024px) {
  /* Loại bỏ đường viền dưới mặc định cho Desktop */
  header.custom-header .dropdown-menu li:not(:last-child) a {
    border-bottom: none !important;
  }

  /* Tạo đường viền full width cho Desktop */
  header.custom-header .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid var(--color-border-secondary);
  }

  /* Điều chỉnh lại padding và margin cho các mục menu trên Desktop */
  header.custom-header .dropdown-menu li a {
    margin: 0;
    padding: 0.85rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Các mục trong dropdown menu của PC - Đặt ngoài media query để ưu tiên cao hơn */
header.custom-header .dropdown-menu li a {
  padding: 0.85rem 1.5rem; /* Padding giống mobile */
  font-size: 1rem;
  display: block;
  border-radius: 0.25rem;
  margin: 0.25rem 0.6rem;
  color: var(--color-text-primary); /* Sử dụng biến màu văn bản chính */
  font-weight: 500;
  text-align: center; /* Căn giữa giống mobile */
  transition: var(--header-transition);
  /* Bỏ white-space: nowrap để tránh lỗi hiển thị */
}

header.custom-header .dropdown-menu li a:hover,
header.custom-header .dropdown-menu li a:active {
  background-color: rgba(124, 58, 237, 0.2); /* Màu giống mobile */
}

/* Thêm đường phân cách giữa các mục */
header.custom-header .dropdown-menu li:not(:last-child) a {
  border-bottom: 1px solid var(--color-border-secondary); /* Sử dụng biến màu viền thứ cấp */
}

/* Style đặc biệt cho menu dropdown trên Mobile và Tablet */
@media (max-width: 1023px) {
  header.custom-header .more-menu-container .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: 0.5rem 0;
    background: var(--color-bg-secondary) !important; /* Sử dụng biến màu nền thứ cấp */
    border-radius: 0.5rem;
    border: 2px solid var(--color-primary); /* Sử dụng biến màu chính */
    box-shadow: var(--shadow-lg); /* Sử dụng biến đổ bóng */
    overflow: hidden;
  }

  header.custom-header .dropdown-menu li a {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    display: block;
    border-radius: 0.25rem;
    margin: 0.25rem 0.6rem;
    color: var(--color-text-primary); /* Sử dụng biến màu văn bản chính */
    font-weight: 500;
  }

  header.custom-header .dropdown-menu li a:hover,
  header.custom-header .dropdown-menu li a:active {
    background-color: var(--overlay-medium); /* Sử dụng biến overlay đậm vừa */
  }

  /* Thêm đường phân cách giữa các mục */
  header.custom-header .dropdown-menu li:not(:last-child) a {
    border-bottom: 1px solid var(--color-border-secondary); /* Sử dụng biến màu viền thứ cấp */
  }
}

/* Mobile menu visibility control */
header.custom-header .mobile-nav {
  display: none; /* Ẩn menu mobile ban đầu */
}

header.custom-header .mobile-nav.active {
  display: block; /* Hiển thị khi được kích hoạt */
}

/* Đảm bảo hiển thị chỉ trên desktop */
@media (min-width: 1024px) {
  header.custom-header .mobile-nav {
    display: block !important; /* Luôn hiển thị trên desktop */
  }
}

/* Ẩn navigation trên tablet và mobile */
@media (max-width: 1023px) {
  header.custom-header .mobile-nav {
    display: none !important; /* Ẩn navigation trên tablet và mobile */
  }

  header.custom-header .mobile-nav.active {
    display: block !important; /* Hiển thị khi mobile/tablet menu được kích hoạt */
  }
}

/* Vị trí chung cho dropdown */
header.custom-header .more-menu-container {
  position: relative;
}

header.custom-header .more-menu-container .dropdown-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 180px;
}

/* Tạo style cho Desktop */
@media (min-width: 1024px) {
  header.custom-header nav {
    display: flex !important;
    align-items: center;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
  }

  header.custom-header nav ul {
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  header.custom-header nav li {
    height: 100% !important;
    position: relative;
    width: auto !important;
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
  }

  /* Links và buttons trên Desktop */
  header.custom-header nav a,
  header.custom-header nav button.dropdown-toggle {
    display: inline-block !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    width: auto !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
  }

  /* Button dropdown cho Desktop */
  header.custom-header button.dropdown-toggle {
    gap: 0.5rem;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }

  header.custom-header button.dropdown-toggle::after {
    margin-left: 0.25rem; /* Căn chỉnh mũi tên */
    font-size: 0.7em;
    transition: transform 0.2s ease;
  }

  /* Vị trí dropdown trên Desktop - Đặt nó nằm dưới chữ "Xem thêm" */
  header.custom-header .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%; /* Căn giữa theo nút */
    right: auto;
    margin-top: 0.5rem;
    min-width: 180px;
    width: 240px; /* Chiều rộng cố định */
    transform: translateX(-50%); /* Căn giữa */
  }

  /* Đảm bảo menu desktop không bị ảnh hưởng bởi CSS mobile */
  header.custom-header .mobile-nav {
    display: block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* Đảm bảo toggle button ẩn hoàn toàn trên desktop */
  header.custom-header #navbar-toggle {
    display: none !important;
  }

  /* Override mạnh mẽ cho desktop - đảm bảo menu luôn hiển thị đúng */
  header.custom-header .mobile-nav.active,
  header.custom-header .mobile-nav:not(.active) {
    display: block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
}

/* Tạo style cho Mobile và Tablet */
@media (max-width: 1023px) {
  header.custom-header nav {
    background: var(--header-menu-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--header-border);
    width: 100%;
    margin-top: 1rem;
  }
  
  header.custom-header nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  
  header.custom-header nav li {
    width: 100%;
    position: relative; /* Cần thiết cho mobile */
  }
  
  /* Link và button trên mobile */
  header.custom-header nav a, 
  header.custom-header button.dropdown-toggle {
    display: block;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    border-radius: 0.25rem;
    margin: 0;
    -webkit-tap-highlight-color: rgba(124, 58, 237, 0.2);
    touch-action: manipulation;
    z-index: 5;
  }
  
  header.custom-header nav a:hover,
  header.custom-header button.dropdown-toggle:hover {
    background-color: rgba(124, 58, 237, 0.1);
  }
  
  header.custom-header nav a:after {
    display: none;
  }
  
  /* Tăng kích thước vùng bấm */
  header.custom-header button.dropdown-toggle span {
    display: inline-block;
    width: calc(100% - 2rem);
  }
  
  /* Dropdown menu trên mobile - CHỈNH SỬA CHÍNH Ở ĐÂY */
  header.custom-header .dropdown-menu {
    position: relative !important; /* Thay vì static */
    left: 0 !important;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(124, 58, 237, 0.1); /* Màu nền nhẹ phù hợp với theme */
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    width: 100%; /* Chiếm trọn chiều rộng */
    z-index: 4;
  }
  
  /* Các mục trong dropdown menu trên mobile */
  header.custom-header .dropdown-menu li a {
    padding: 0.75rem 1.5rem;
    font-size: 0.95em;
    display: block;
    border-radius: 0.25rem;
    margin: 0.15rem 0.5rem;
  }
  
  header.custom-header .dropdown-menu li a:hover,
  header.custom-header .dropdown-menu li a:active {
    background-color: rgba(124, 58, 237, 0.2);
  }
  
  /* Button dropdown trên mobile */
  header.custom-header button.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header.custom-header button.dropdown-toggle::after {
    margin-left: 0;
    margin-right: 0.5rem;
    font-size: 0.8rem;
    flex-shrink: 0;
  }
} 

/* Mobile Toggle Button */
header.custom-header #navbar-toggle {
  color: var(--header-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  padding: 0.5rem;
  transition: var(--header-transition);
}

/* Override Tailwind lg:hidden để hiển thị toggle button trên tablet và mobile */
@media (max-width: 1023px) {
  header.custom-header #navbar-toggle {
    display: inline-flex !important; /* Hiển thị toggle button trên tablet và mobile */
  }
}

/* Ẩn toggle button chỉ trên desktop */
@media (min-width: 1024px) {
  header.custom-header #navbar-toggle {
    display: none !important; /* Ẩn toggle button trên desktop */
  }
}

header.custom-header #navbar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

header.custom-header #navbar-toggle svg {
  transition: transform 0.3s ease;
}

header.custom-header #navbar-toggle:hover svg {
  transform: scale(1.1);
}

/* Search bar styling */
.custom-search-container {
  margin-top: 1rem;
  position: relative;
}

.custom-search-container input {
  background: var(--search-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--search-border, var(--header-border));
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  padding-left: 2.75rem;
  width: 100%;
  color: var(--search-text, var(--header-text));
  transition: var(--header-transition);
  /* Thêm thuộc tính outline để loại bỏ outline mặc định */
  outline: none;
}

.custom-search-container input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--search-button-bg, var(--header-accent));
  /* Thay đổi box-shadow để phù hợp màu theme Deep Ocean */
  box-shadow: 0 0 0 2px var(--color-primary-light, rgba(14, 165, 233, 0.25));
  outline: none; /* Đảm bảo không có outline mặc định */
}

.custom-search-container .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--search-placeholder, rgba(255, 255, 255, 0.5));
  transition: var(--header-transition);
}

.custom-search-container input:focus + .search-icon {
  color: var(--header-accent);
}

.custom-search-container button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--search-button-bg, var(--header-accent));
  color: white;
  border-radius: 1.5rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: var(--header-transition);
}

.custom-search-container button:hover {
  background: var(--search-button-hover, rgba(124, 58, 237, 0.8));
  transform: translateY(-50%) scale(1.02);
} 

/* Hiệu ứng blur cho body khi menu mobile/tablet mở */
body.menu-blur main, body.menu-blur #main, body.menu-blur .main {
  filter: blur(6px) brightness(0.7);
  transition: filter 0.3s;
  pointer-events: none;
  user-select: none;
}

body.menu-blur {
  overflow: hidden;
}

/* Đảm bảo header và menu luôn nổi trên blur */
header.custom-header, .mobile-nav.active {
  position: relative;
  z-index: 200;
}

/* CSS cải tiến cho tablet - breakpoint từ 768px đến 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tăng kích thước font cho tablet để dễ đọc hơn */
  header.custom-header nav a,
  header.custom-header button.dropdown-toggle {
    font-size: 1.1rem;
    padding: 0.9rem 1.2rem;
  }

  /* Tăng kích thước vùng bấm cho tablet */
  header.custom-header nav li {
    min-height: 3.5rem;
  }

  /* Cải thiện dropdown menu cho tablet */
  header.custom-header .dropdown-menu li a {
    font-size: 1.05rem;
    padding: 1rem 1.8rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
  }

  /* Tăng kích thước toggle button cho tablet */
  header.custom-header #navbar-toggle {
    width: 2.8rem;
    height: 2.4rem;
    padding: 0.6rem;
  }

  header.custom-header #navbar-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/* CSS đặc biệt cho tablet landscape (1024x768) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  /* Giảm padding để tiết kiệm không gian trên tablet landscape */
  header.custom-header nav {
    padding: 0.8rem;
    margin-top: 0.8rem;
  }

  header.custom-header nav a,
  header.custom-header button.dropdown-toggle {
    padding: 0.7rem 1rem;
  }
}

/* OVERRIDE CUỐI CÙNG - Đảm bảo menu desktop luôn hoạt động đúng */
@media (min-width: 1024px) {
  /* Force desktop menu to always be visible and horizontal */
  header.custom-header .mobile-nav,
  header.custom-header .mobile-nav.active,
  header.custom-header #navbar-default {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  /* Force horizontal layout for desktop */
  header.custom-header nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    list-style: none !important;
  }

  /* Force proper link styling for desktop */
  header.custom-header nav li {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
  }

  header.custom-header nav a {
    display: inline-block !important;
    width: auto !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
}