/* ==========================================
   DESKTOP HEADER - CASSIOPEIA
   Mẫu 3 | Sportsbook Philadelphia
   Chỉ áp dụng từ 992px trở lên
   ========================================== */

@media (min-width: 992px) {

    /* Header chính */
    header.container-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        padding: 14px 40px !important;
        background: linear-gradient(
            110deg,
            #102b50,
            #183b65
        ) !important;
        min-height: 120px !important;
    }

    /* Khu vực logo */
    header.container-header > .grid-child:not(.container-nav) {
        flex: 0 0 290px !important;
        width: 290px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header .navbar-brand {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header a.brand-logo {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1.15 !important;
        text-decoration: none !important;
    }

    header.container-header a.brand-logo span {
        display: block !important;
        font-size: 0 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    header.container-header a.brand-logo span::before {
        content: "SPORTSBOOK";
        display: block;
        color: #ffffff;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    header.container-header a.brand-logo span::after {
        content: "PHILADELPHIA";
        display: block;
        color: #29a9ff;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    /* Khu vực điều hướng */
    header.container-header > .grid-child.container-nav {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header .container-nav nav.navbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ẩn hamburger trên desktop */
    header.container-header .navbar-toggler {
        display: none !important;
    }

    /* Danh sách menu nằm ngang */
    header.container-header .navbar-collapse {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header .navbar-collapse .mod-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    header.container-header .navbar-collapse .metismenu-item {
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Các liên kết menu */
    header.container-header .navbar-collapse .metismenu-item > a,
    header.container-header .navbar-collapse .metismenu-item > button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 46px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition:
            background-color 0.2s ease,
            color 0.2s ease !important;
    }

    /* Hiệu ứng hover */
    header.container-header .navbar-collapse .metismenu-item > a:hover,
    header.container-header .navbar-collapse .metismenu-item > button:hover {
        color: #29a9ff !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

    /* Mục đang được chọn */
    header.container-header .navbar-collapse .metismenu-item.current > a,
    header.container-header .navbar-collapse .metismenu-item.active > a,
    header.container-header .navbar-collapse .metismenu-item > a[aria-current="page"] {
        color: #ffffff !important;
        background: #079ff0 !important;
    }

    /* Menu con, ví dụ Reviews */
    header.container-header .navbar-collapse .metismenu-item > ul {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 1000 !important;
        display: block !important;
        min-width: 210px !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        list-style: none !important;
        background: #102b50 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    }

    header.container-header .navbar-collapse .metismenu-item > ul a {
        display: block !important;
        padding: 10px 12px !important;
        color: #ffffff !important;
        font-size: 15px !important;
        text-decoration: none !important;
        border-radius: 6px !important;
    }

    header.container-header .navbar-collapse .metismenu-item > ul a:hover {
        color: #29a9ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

/* Laptop: thu nhỏ logo và khoảng cách menu */
@media (min-width: 992px) and (max-width: 1199px) {

    header.container-header {
        gap: 12px !important;
        padding: 12px 20px !important;
        min-height: 100px !important;
    }

    header.container-header > .grid-child:not(.container-nav) {
        flex-basis: 240px !important;
        width: 240px !important;
    }

    header.container-header a.brand-logo span::before,
    header.container-header a.brand-logo span::after {
        font-size: 26px !important;
    }

    header.container-header .navbar-collapse .mod-menu {
        gap: 2px !important;
    }

    header.container-header .navbar-collapse .metismenu-item > a,
    header.container-header .navbar-collapse .metismenu-item > button {
        padding: 9px 8px !important;
        font-size: 14px !important;
    }
}