/*
 * Navigation - Main Nav & Category Menu
 * Menu ngang và menu dọc danh mục
 * Màu chủ đạo: Dark + Gold sang trọng
 */

.main-nav {
    background: linear-gradient(135deg, #2766AB 0%, #0d233a 100%);
    height: 54px;
    position: relative;
    z-index: var(--z-dropdown);
}

.main-nav .container {
    display: flex;
    height: 100%;
    align-items: center;
}

/* Menu ngang chính (Trang chủ, Sản phẩm, Tin tức, Liên hệ) */
.main-menu-horizontal {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: var(--space-md);
    gap: var(--space-xs);
}

.main-menu-horizontal li a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-lg);
    height: 54px;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all var(--duration-fast) var(--ease-out);
}

.main-menu-horizontal li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #D4B896;
}

.main-menu-horizontal li a i {
    font-size: 14px;
    color: #D4B896;
}

/* Category Menu Wrapper */
.cat-menu-wrapper {
    position: relative;
    width: var(--sidebar-w);
    height: 100%;
}

.cat-menu-title {
    background: linear-gradient(135deg, #B8956C 0%, #D4B896 50%, #B8956C 100%);
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    gap: var(--space-sm);
    transition: all var(--duration-fast) var(--ease-out);
}

.cat-menu-title i:first-child {
    font-size: 16px;
}

.cat-menu-title .arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform var(--duration-normal) var(--ease-out);
}

.cat-menu-wrapper:hover .cat-menu-title .arrow,
.cat-menu-wrapper.menu-open .cat-menu-title .arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.cat-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--duration-normal) var(--ease-out),
                visibility var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
    z-index: var(--z-dropdown);
    overflow-y: auto;
}

/* Trang chủ - Menu dropdown cao bằng banner */
body.home .cat-menu-dropdown,
body.front-page .cat-menu-dropdown {
    /* Tính toán: (container - sidebar) * 7/16 (theo aspect ratio 16:7 của banner) */
    /* 1400px - 280px = 1120px; 1120px * 7/16 = 490px */
    min-height: calc((var(--container) - var(--sidebar-w)) * 7 / 16);
    max-height: none;
    display: flex;
    flex-direction: column;
}

body.home .cat-menu-dropdown ul,
body.front-page .cat-menu-dropdown ul {
    flex: 1;
}

/* Show on hover */
.cat-menu-wrapper:hover .cat-menu-dropdown,
.cat-menu-wrapper.menu-open .cat-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu Items */
.cat-menu-dropdown ul {
    list-style: none;
}

.cat-menu-dropdown ul li {
    position: relative;
}

.cat-menu-dropdown ul li a {
    display: flex;
    align-items: center;
    padding: 12px var(--space-lg);
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease-out);
    gap: var(--space-sm);
}

.cat-menu-dropdown ul li a:hover {
    background: var(--gold-50);
    color: #B8956C;
    padding-left: calc(var(--space-lg) + 6px);
}

.cat-menu-dropdown ul li a i {
    width: 20px;
    color: var(--gray-400);
    font-size: 14px;
    transition: color var(--duration-fast) var(--ease-out);
}

.cat-menu-dropdown ul li a:hover i {
    color: #B8956C;
}

.cat-menu-dropdown .sub-arrow {
    margin-left: auto;
    font-size: 11px;
    color: var(--gray-400);
    transition: transform var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.cat-menu-dropdown ul li:hover > a .sub-arrow {
    transform: translateX(3px);
    color: #B8956C;
}

/* Primary Menu Items (Special Links) */
.menu-item-primary a {
    background: var(--gold-50) !important;
    color: #B8956C !important;
    font-weight: 600 !important;
}

.menu-item-primary a:hover {
    background: var(--gold-100) !important;
}

/* Submenu Flyout */
.cat-menu-dropdown .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 240px;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 0 8px 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all var(--duration-normal) var(--ease-out);
    z-index: var(--z-dropdown);
}

.cat-menu-dropdown li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cat-menu-dropdown .sub-menu li a {
    font-weight: 400;
    font-size: 13px;
}

/* ========== MENU MỞ (class menu-open từ JS) ========== */
.cat-menu-wrapper.menu-open .cat-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cat-menu-wrapper.menu-open .cat-menu-title .arrow {
    transform: rotate(180deg);
}