/* ==========================================================
   Vertical Mega Menu – vmegamenu.css
   Author: DienNT – https://thienvi.com
   ========================================================== */

/* ---------- CSS Variables (overridden by inline style) ---------- */
.vmm-wrapper {
    --vmm-bg:         #ffffff;
    --vmm-text:       #222222;
    --vmm-title:      #1a1a2e;
    --vmm-hover-bg:   #f0f4ff;
    --vmm-hover-bar:  #4361ee;
    --vmm-panel-bg:   #f8f9fc;
    --vmm-radius:     10px;
    --vmm-anim:       220ms cubic-bezier(.4,0,.2,1);
    --vmm-panel-w:    420px;
    --vmm-panel-zindex: 9999;
    --vmm-cat-font-size:    14px;
    --vmm-cat-font-weight:  600;
    --vmm-sub-font-size:    12.5px;
    --vmm-sub-font-weight:  600;
    --vmm-head-font-size:   15px;
    --vmm-head-font-weight: 700;

    position:         relative;
    width:            100%;
    max-width:        280px;
    font-family:      inherit;
    background:       var(--vmm-bg);
    border-radius:    var(--vmm-radius);
    box-sizing:       border-box;
}

/* Shadow modifier */
.vmm-wrapper.vmm--shadow {
    box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
}

/* ===== LIST ===== */
.vmm-list {
    list-style:  none;
    margin:      0;
    padding:     8px 0;
}

/* ===== ITEM ===== */
.vmm-item {
    position: relative;
}

/* SEPARATOR */
.vmm--separators .vmm-item + .vmm-item {
    border-top: 1px solid rgba(0,0,0,.07);
}

/* ===== LINK ===== */
.vmm-link {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         10px 16px;
    color:           var(--vmm-text);
    text-decoration: none;
    border-radius:   calc(var(--vmm-radius) - 2px);
    margin:          2px 8px;
    position:        relative;
    overflow:        hidden;
    transition:      background var(--vmm-anim), color var(--vmm-anim);
    cursor:          pointer;
}

/* Left bar accent on hover */
.vmm-link::before {
    content:    '';
    position:   absolute;
    left:       0; top: 50%;
    transform:  translateY(-50%) scaleY(0);
    width:      3px;
    height:     70%;
    border-radius: 0 3px 3px 0;
    background: var(--vmm-hover-bar);
    transition: transform var(--vmm-anim);
}

.vmm-item:hover > .vmm-link,
.vmm-item.vmm-item--active > .vmm-link {
    background: var(--vmm-hover-bg);
    color:      var(--vmm-title);
}

.vmm-item:hover > .vmm-link::before,
.vmm-item.vmm-item--active > .vmm-link::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---- Thumbnail / Icon ---- */
.vmm-link__img,
.vmm-link__icon,
.vmm-link__noimg {
    flex-shrink: 0;
    width:  48px;
    height: 48px;
    border-radius: 8px;
    overflow:   hidden;
    display:    flex;
    align-items:     center;
    justify-content: center;
    background: rgba(0,0,0,.04);
    transition: transform var(--vmm-anim), box-shadow var(--vmm-anim);
}

.vmm-link__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.vmm-link__icon i,
.vmm-link__noimg i {
    font-size: 22px;
    color: var(--vmm-hover-bar);
}

.vmm-item:hover .vmm-link__img,
.vmm-item:hover .vmm-link__icon {
    transform:  scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ---- Text block ---- */
.vmm-link__text {
    flex:    1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vmm-link__title {
    font-size:   var(--vmm-cat-font-size);
    font-weight: var(--vmm-cat-font-weight);
    color:       var(--vmm-title);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    transition:  color var(--vmm-anim);
}

.vmm-item:hover .vmm-link__title {
    color: var(--vmm-hover-bar);
}

.vmm-link__sub {
    font-size:   11.5px;
    color:       #888;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    margin-top:  1px;
}

/* ---- Arrow ---- */
.vmm-link__arrow {
    margin-left: auto;
    color: #bbb;
    font-size: 11px;
    transition: transform var(--vmm-anim), color var(--vmm-anim);
}

.vmm-item:hover .vmm-link__arrow {
    transform: translateX(3px);
    color: var(--vmm-hover-bar);
}

/* =================================================================
   MEGA PANEL
   ================================================================= */
.vmm-panel {
    position:   absolute;
    left:       100%;
    top:        0;
    width:      var(--vmm-panel-w);
    background: var(--vmm-panel-bg);
    border-radius: var(--vmm-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    z-index:    var(--vmm-panel-zindex);
    pointer-events: none;
    visibility: hidden;
}

/*
 * Active item – set by JS khi panel nằm ngoài bounds của item
 * (ví dụ: trong overlay 2-cột). Dùng class thay vì :hover
 * để panel không đóng khi chuột di chuyển sang phải.
 */
.vmm-item--has-sub.vmm-item--active > .vmm-link {
    background: var(--vmm-hover-bg);
    color:      var(--vmm-title);
}
.vmm-item--has-sub.vmm-item--active > .vmm-link::before {
    transform: translateY(-50%) scaleY(1);
}
.vmm-item--has-sub.vmm-item--active > .vmm-link .vmm-link__title {
    color: var(--vmm-hover-bar);
}
.vmm-item--has-sub.vmm-item--active > .vmm-link .vmm-link__arrow {
    transform: translateX(3px);
    color: var(--vmm-hover-bar);
}
/* Hiển panel cho mọi kiểu hover-effect */
.vmm-item--has-sub.vmm-item--active > .vmm-panel {
    opacity:        1 !important;
    visibility:     visible !important;
    pointer-events: auto !important;
    transform:      none !important;
}

/* ----- HOVER EFFECTS ----- */

/* 1. Slide (default) */
.vmm__hover--slide .vmm-panel {
    opacity:  0;
    transform: translateX(-12px);
    transition: opacity var(--vmm-anim), transform var(--vmm-anim), visibility var(--vmm-anim);
}
.vmm__hover--slide .vmm-item--has-sub:hover > .vmm-panel,
.vmm__hover--slide .vmm-item--has-sub:focus-within > .vmm-panel {
    opacity:   1;
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
}

/* 2. Fade */
.vmm__hover--fade .vmm-panel {
    opacity:  0;
    transition: opacity var(--vmm-anim), visibility var(--vmm-anim);
}
.vmm__hover--fade .vmm-item--has-sub:hover > .vmm-panel,
.vmm__hover--fade .vmm-item--has-sub:focus-within > .vmm-panel {
    opacity:  1;
    pointer-events: auto;
    visibility: visible;
}

/* 3. Scale */
.vmm__hover--scale .vmm-panel {
    opacity:  0;
    transform-origin: left center;
    transform: scaleX(.92);
    transition: opacity var(--vmm-anim), transform var(--vmm-anim), visibility var(--vmm-anim);
}
.vmm__hover--scale .vmm-item--has-sub:hover > .vmm-panel,
.vmm__hover--scale .vmm-item--has-sub:focus-within > .vmm-panel {
    opacity:   1;
    transform: scaleX(1);
    pointer-events: auto;
    visibility: visible;
}

/* 4. None */
.vmm__hover--none .vmm-panel {
    opacity: 0;
    transition: none;
}
.vmm__hover--none .vmm-item--has-sub:hover > .vmm-panel,
.vmm__hover--none .vmm-item--has-sub:focus-within > .vmm-panel {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* --- Panel Head --- */
.vmm-panel__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

.vmm-panel__cat-link {
    display:     flex;
    align-items: center;
    gap:         14px;
    text-decoration: none;
    color:       var(--vmm-title);
}

.vmm-panel__cat-link img {
    width:  60px; height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.vmm-panel__cat-link strong {
    font-size:   var(--vmm-head-font-size);
    font-weight: var(--vmm-head-font-weight);
    display:     block;
    color:       var(--vmm-title);
}

.vmm-panel__cat-link p {
    font-size:   12px;
    color:       #888;
    margin:      4px 0 0;
    line-height: 1.45;
}

/* --- Panel Grid --- */
.vmm-panel__grid {
    display:               grid;
    grid-template-columns: repeat( 3, 1fr ); /* fallback; giá trị thực được set qua inline style */
    gap:                   4px;
    list-style:            none;
    margin:                0;
    padding:               14px 12px;
}

/* --- Panel Sub Item --- */
.vmm-panel__item {}

.vmm-panel__link {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    text-align:     left;
    gap:            10px;
    padding:        10px 12px;
    border-radius:  8px;
    text-decoration:none;
    color:          var(--vmm-text);
    transition:     background var(--vmm-anim), transform var(--vmm-anim), box-shadow var(--vmm-anim);
}

.vmm-panel__link:hover {
    background: var(--vmm-hover-bg);
    transform:  translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.vmm-panel__img-wrap,
.vmm-panel__icon-wrap {
    width:   56px; height: 56px;
    border-radius: 10px;
    overflow: hidden;
    display:  flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.04);
    transition: transform var(--vmm-anim);
}

.vmm-panel__link:hover .vmm-panel__img-wrap,
.vmm-panel__link:hover .vmm-panel__icon-wrap {
    transform: scale(1.08);
}

.vmm-panel__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.vmm-panel__icon-wrap i {
    font-size: 24px;
    color: var(--vmm-hover-bar);
}

.vmm-panel__name {
    font-size:   var(--vmm-sub-font-size);
    font-weight: var(--vmm-sub-font-weight);
    color:       var(--vmm-title);
    line-height: 1.3;
}

.vmm-panel__desc {
    font-size:   11px;
    color:       #aaa;
    line-height: 1.4;
}

/* --- Panel Footer --- */
.vmm-panel__footer {
    padding:     12px 20px 14px;
    border-top:  1px solid rgba(0,0,0,.07);
    text-align:  right;
}

.vmm-panel__viewall {
    font-size:   13px;
    font-weight: 600;
    color:       var(--vmm-hover-bar);
    text-decoration: none;
    transition:  opacity var(--vmm-anim), letter-spacing var(--vmm-anim);
}

.vmm-panel__viewall:hover {
    opacity: .75;
    letter-spacing: .5px;
}

/* =================================================================
   MOBILE  ≤ 768px
   ================================================================= */
@media (max-width: 768px) {
    .vmm-wrapper {
        max-width: 100%;
    }

    .vmm-panel {
        position: static;
        width:     100%;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid rgba(0,0,0,.06);
        display:    none;
    }

    /* Override all hover effects for mobile */
    .vmm__hover--slide .vmm-panel,
    .vmm__hover--fade  .vmm-panel,
    .vmm__hover--scale .vmm-panel,
    .vmm__hover--none  .vmm-panel {
        opacity:    1;
        transform:  none;
        visibility: visible;
        transition: none;
    }

    .vmm-item.vmm-item--open > .vmm-panel {
        display: block;
        pointer-events: auto;
    }

    .vmm-item.vmm-item--has-sub > .vmm-link .vmm-link__arrow {
        transition: transform var(--vmm-anim);
    }

    .vmm-item.vmm-item--open > .vmm-link .vmm-link__arrow {
        transform: rotate(90deg);
        color: var(--vmm-hover-bar);
    }

    .vmm-panel__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}