/**
 * Megamenu 3 cấp, HNL Deals.
 *
 * Chỉ dùng token :root của theme cha, không hardcode màu (rule H2).
 * Không có style inline (rule H1).
 *
 * Lưu ý về breakpoint: theme cha chỉ hiện .header__nav từ 1024px trở lên,
 * dưới ngưỡng đó dùng .mobile-nav với walker riêng. Vì vậy phần panel
 * nằm trong @media (min-width: 1024px), còn phần dưới 1024px là style cho
 * cấp 3 trong mobile-nav, thứ mà theme cha không có (rule H4).
 */

/* ==========================================================================
   Desktop, từ 1024px: panel megamenu
   ========================================================================== */

@media (min-width: 1024px) {

    /* Theme cha để overflow:hidden và chỉ mở lại khi JS priority-nav chạy xong.
       Nếu JS lỗi thì panel bị cắt, nên ép mở ở đây cho chắc. */
    .header__nav {
        overflow: visible;
    }

    /* Panel bám theo .header__nav (đã position:relative sẵn), không bám <li> */
    .header__menu > .hnl-has-mega {
        position: static;
    }

    .hnl-mega {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: var(--z-dropdown);
        padding: var(--space-6) 0 var(--space-5);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-top: 2px solid var(--color-primary);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }

    .header__menu > .hnl-has-mega:hover > .hnl-mega,
    .header__menu > .hnl-has-mega:focus-within > .hnl-mega,
    .header__menu > .hnl-has-mega.is-open > .hnl-mega {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .hnl-mega__inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--space-6) var(--space-8);
        padding: 0 var(--space-4);
    }

    .hnl-mega__heading {
        display: block;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text);
        font-weight: var(--font-semibold);
        font-size: .9375rem;
        line-height: 1.3;
        text-decoration: none;
    }

    .hnl-mega__heading:hover,
    .hnl-mega__heading:focus-visible {
        color: var(--color-primary);
    }

    .hnl-mega__links {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hnl-mega__item {
        margin: 0;
    }

    .hnl-mega__link {
        display: block;
        padding: var(--space-1-5) 0;
        color: var(--color-text-secondary);
        font-size: .875rem;
        line-height: 1.4;
        text-decoration: none;
        transition: color .12s ease;
    }

    .hnl-mega__link:hover,
    .hnl-mega__link:focus-visible {
        color: var(--color-primary);
    }

    /* Cấp 4 trở đi không nằm trong thiết kế, thu lại cho khỏi vỡ nếu lỡ tạo */
    .hnl-mega__links--deep {
        padding-left: var(--space-3);
    }

    /* Nút toggle chỉ cần cho thiết bị cảm ứng, chuột dùng hover */
    .hnl-mega__toggle {
        display: none;
        padding: var(--space-1);
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
        line-height: 1;
    }

    /* Màn hình cảm ứng rộng (tablet ngang, laptop cảm ứng): hover không đáng tin,
       chuyển hẳn sang bấm nút. */
    @media (hover: none) {
        .hnl-mega__toggle {
            display: inline-flex;
            align-items: center;
        }

        .header__menu > .hnl-has-mega:hover > .hnl-mega {
            opacity: 0;
            visibility: hidden;
        }

        .header__menu > .hnl-has-mega.is-open > .hnl-mega {
            opacity: 1;
            visibility: visible;
        }
    }
}

/* ==========================================================================
   Dưới 1024px: theme cha ẩn .header__nav và dùng .mobile-nav.
   Walker mobile của theme cha render cấp 2 và cấp 3 bằng cùng một class,
   nên không phân biệt được đâu là danh mục đâu là bài. Phần dưới tách chúng ra.
   ========================================================================== */

@media (max-width: 1023.98px) {

    /* Panel desktop không bao giờ hiển thị ở đây, ẩn hẳn cho chắc */
    .hnl-mega,
    .hnl-mega__toggle {
        display: none;
    }

    /* Cấp 2 (danh mục con) làm tiêu đề nhóm */
    .mobile-nav__submenu--simple .mobile-nav__simple-list > li > a {
        font-weight: var(--font-medium);
        color: var(--color-text);
    }

    /* Cấp 3 (bài roundup) thụt vào, chữ nhỏ hơn, có vạch dẫn bên trái */
    .mobile-nav__simple-list .mobile-nav__simple-list {
        margin: var(--space-1) 0 var(--space-2);
        padding-left: var(--space-4);
        border-left: 2px solid var(--color-border-subtle);
        list-style: none;
    }

    .mobile-nav__simple-list .mobile-nav__simple-list > li > a {
        display: block;
        padding: var(--space-2) 0;
        color: var(--color-text-secondary);
        font-size: .875rem;
        font-weight: var(--font-normal);
        line-height: 1.4;
    }

    .mobile-nav__simple-list .mobile-nav__simple-list > li > a:hover,
    .mobile-nav__simple-list .mobile-nav__simple-list > li > a:focus-visible {
        color: var(--color-primary);
    }

    /* Theme cha vẽ dấu chấm dẫn trước link cấp 2, cấp 3 không cần */
    .mobile-nav__submenu--simple .mobile-nav__simple-list .mobile-nav__simple-list a:before {
        content: none;
    }
}

/* ==========================================================================
   Giảm chuyển động
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hnl-mega {
        transition: none;
    }
}