/* =============================================================
   FIX MENU CON (.nav-item.dropdown)
   -------------------------------------------------------------
   Nguyên nhân lỗi:
   - Thẻ <a class="nav-link dropdown-toggle"> trong _header.php
     KHÔNG có data-bs-toggle="dropdown" => Bootstrap không bao giờ
     gắn class .show cho .dropdown-menu => menu con luôn display:none.
   - index.css cũng không có rule hover nào cho .nav-item.dropdown,
     nên desktop cũng không mở được.

   Cách xử lý:
   - Desktop (>= 992px): mở bằng hover thuần CSS, link cha vẫn bấm
     được để vào trang danh mục.
   - Mobile (< 992px, offcanvas): mở bằng click, do Bootstrap xử lý
     (đã thêm data-bs-toggle="dropdown" trong sources/_header.php).
   ============================================================= */

/* ------------------------- DESKTOP ------------------------- */
@media (min-width: 992px) {

    .main-nav .navbar-nav .nav-item.dropdown {
        position: relative;
    }

    .main-nav .navbar-nav .nav-item.dropdown > .dropdown-menu {
        display: block;                 /* luôn render, ẩn bằng opacity */
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }

    .main-nav .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
    .main-nav .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu,
    .main-nav .navbar-nav .nav-item.dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Vùng đệm vô hình: chuột đi từ link cha xuống menu không bị mất hover */
    .main-nav .navbar-nav .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    /* Menu cấp 3: mục cuối danh sách lật sang trái nếu tràn mép phải */
    .main-nav .navbar-nav .nav-item.dropdown:nth-last-child(-n+2) .dropdown_menu_sub ul {
        left: auto;
        right: 100%;
        border-radius: 5px 0 0 5px;
    }
}

/* -------------------------- MOBILE ------------------------- */
@media (max-width: 991.98px) {

    .offcanvas-body .nav-item.dropdown > .dropdown-menu {
        display: none;
    }

    .offcanvas-body .nav-item.dropdown > .dropdown-menu.show {
        display: block;
    }

    /* Menu cấp 3 xổ dọc theo chiều dọc thay vì bay ra ngoài màn hình */
    .offcanvas-body .dropdown_menu_sub {
        position: static;
    }

    .offcanvas-body .dropdown_menu_sub ul {
        display: block;
        position: static;
        border: none;
        padding-left: 17px;
        background-color: transparent;
    }

    .offcanvas-body .dropdown_menu_sub li a {
        color: #605c5c !important;
        text-transform: capitalize !important;
    }

    .offcanvas-body .dropdown_menu_sub:hover > a {
        background-color: transparent;
    }

    /* Mũi tên caret xoay khi menu đang mở */
    .offcanvas-body .nav-link.dropdown-toggle::after {
        transition: transform .2s ease;
    }

    .offcanvas-body .nav-item.dropdown.show > .nav-link.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}