/*
 * Stylesheet cho thanh điều hướng.
 * Phong cách sạch, hiện đại và hoạt ảnh mượt mà.
 */

/* ============ Phông chữ và biến màu ============ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Inter:wght@400;500;700&display=swap');

:root{
  --header-pad-desktop: 2rem 4rem;
  --header-pad-tablet: 1rem 2rem;
  --header-bg: transparent;
  --header-scrolled-bg: rgba(255,255,255,0.95);
  --header-ink-light: #fff;
  --header-ink-dark: #2c3e50;
  --accent: #ff6b6b;
  --dropdown-bg: #fff;
  --dropdown-shadow: rgba(2,6,23,0.12);
}

.header{
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  padding: var(--header-pad-desktop);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
  background: var(--header-bg);
  transition: background .28s ease, padding .2s ease, box-shadow .28s ease;
}

/* ============ Logo ============ */
.logo a{
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:1.8rem;
  color:var(--header-ink-light);
  text-decoration:none;
  text-shadow:0 2px 4px rgba(0,0,0,0.45);
  position:relative;
  overflow:hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1), color .2s ease;
}

.logo a::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition:left .6s cubic-bezier(.4,0,.2,1);
}

.logo a:hover{ transform: translateY(-2px) scale(1.03); color:#f8f9fa }
.logo a:hover::before{ left:100%; }

/* ============ Menu điều hướng ============ */
.navigation ul{ display:flex; gap:2rem; list-style:none; margin:0; padding:0 }

.navigation a{
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--header-ink-light);
  text-decoration:none;
  font-size:1rem;
  padding:.6rem 1rem; border-radius:22px; position:relative; overflow:hidden;
  transition: transform .32s cubic-bezier(.4,0,.2,1), color .2s ease, box-shadow .2s ease;
}

.navigation a::before{ content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; transform:translateX(-50%); background:linear-gradient(90deg,var(--accent),#4ecdc4); transition: width .36s cubic-bezier(.4,0,.2,1); }
.navigation a::after{ content:''; position:absolute; inset:0; background:linear-gradient(45deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); opacity:0; transition:opacity .32s ease, transform .32s ease; border-radius:22px; z-index:-1 }

.navigation a:hover{ transform: translateY(-3px) scale(1.03); color:#f8f9fa; box-shadow:0 8px 25px rgba(0,0,0,0.18) }
.navigation a:hover::before{ width:80% }
.navigation a:hover::after{ opacity:1; transform:scale(1.06) }

.navigation a.active{ background: rgba(255,255,255,0.12); box-shadow:0 4px 15px rgba(0,0,0,0.18) }
.navigation a.active::before{ width:80%; background: linear-gradient(90deg,#ffd700,#ff6b6b) }

/* ============ Menu đa cấp ============ */
.nav-item.has-children{ position:relative }
.nav-item.has-children > .nav-toggle{ 
  background:transparent; 
  border:0; 
  color:inherit; 
  cursor:pointer; 
  font:inherit; 
  padding:.6rem 1rem; 
  border-radius:22px; 
  display:inline-flex; 
  align-items:center; 
  gap:.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  font-size:1rem;
  text-decoration:none;
}
.nav-item.has-children > .nav-toggle::after{ content:"▾"; display:inline-block; font-size:.8rem; transform:translateY(-1px); transition: transform .18s ease }
.nav-item.has-children > .nav-toggle[aria-expanded="true"]::after{ transform:rotate(180deg) translateY(1px) }

.submenu{ 
  display:none;
  position:absolute; 
  left:0; 
  top:100%; 
  min-width:220px; 
  background:var(--dropdown-bg); 
  color:var(--header-ink-dark); 
  box-shadow:0 10px 30px var(--dropdown-shadow); 
  border-radius:10px; 
  padding:8px 6px; 
  z-index:1200; 
  opacity:0;
}
.submenu li{ display:block; margin:0 }
.submenu a{ display:block; padding:.6rem 1rem; color:var(--header-ink-dark); border-radius:8px }
.submenu a:hover{ background:rgba(0,0,0,0.04) }

/* show submenu on hover for desktop */
@media (min-width:993px){
  .nav-item.has-children:hover > .submenu{ display:block }
}

/* show submenu when toggle expanded (for keyboard & JS) */
.nav-toggle[aria-expanded="true"] + .submenu{ display:block }

/* nested submenu position (third level) */
.submenu .has-children{ position:relative }
.submenu .has-children > .submenu{ left:100%; top:0; }

/* ============ Menu di động ============ */
.mobile-menu-toggle{ display:none; cursor:pointer; z-index:1001; padding:.4rem; border-radius:8px }
.mobile-menu-toggle span{ display:block; width:25px; height:3px; background:var(--header-ink-light); margin:3px 0; border-radius:2px; transition: all .28s ease }

@media (max-width:992px){
    .header {
        padding: var(--header-pad-tablet);
        background: transparent !important;
    }
    
    .navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    
    .navigation.active {
        display: block;
    }
    
    .navigation ul {
        flex-direction: column;
        gap: 1rem;
        margin: 0;
        padding: 0;
    }
    
    .navigation a, .navigation .nav-toggle {
        color: #fff !important;
        text-shadow: none;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: block;
    }
    
    .navigation a:hover {
        color: #3498db !important;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
        background: #fff !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
        background: #fff !important;
    }

    .navigation .submenu{ position:static; background:transparent; box-shadow:none; padding:0; display:none }
    .navigation .submenu a, .navigation .submenu .nav-toggle{ padding-left:1.4rem }
    .nav-item.has-children.open > .submenu{ display:block }
    .nav-item.has-children > .nav-toggle{ width:100%; text-align:left; padding:.7rem 0 }
}

@media (max-width:768px){
  .logo a{ font-size:1.5rem }
}

/* Scrolled / dark theme styles */
.header.scrolled, .header.dark-theme{ background: var(--header-scrolled-bg); box-shadow: 0 4px 10px rgba(0,0,0,0.08) }
.header.scrolled .logo a, .header.scrolled .navigation a, .header.dark-theme .logo a, .header.dark-theme .navigation a { color: var(--header-ink-dark); text-shadow:none }
.header.scrolled .mobile-menu-toggle span, .header.dark-theme .mobile-menu-toggle span { background: var(--header-ink-dark) }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo a, .navigation a, .mobile-menu-toggle span{ transition: none }
}