/* =====================================================
   RESET & BASE
===================================================== */
img { width:auto; height:auto; max-width:100% }
a {
    text-decoration: none;
    color: #0041a1;
}
.navbar-nav,
.navbar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 16px;
    font-family: Arial;
    line-height: 1.6;
}
    .h1, h1 {
        font-size: 1.8rem;
    }
    .h2, h2 {
        font-size: 1.5rem;
    }
    .h3, h3 {
        font-size: 1.4rem;
    }
    .h4, h4 {
        font-size: 1.3rem;
    }
    .h5, h5 {
        font-size: 1.2rem;
    }
    .h6, h6 {
        font-size: 1.1rem;
    }
/* =====================================================
   DESKTOP DROPDOWN & MEGA MENU (>=992px)
===================================================== */
@media (min-width: 992px) {

    /* ---------- Dropdown base (GPU optimized) ---------- */
    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translate3d(0, 14px, 0);
        will-change: opacity, transform;

        transition:
            opacity .25s cubic-bezier(.4,0,.2,1),
            transform .35s cubic-bezier(.4,0,.2,1),
            visibility .25s;

        border: none;
        border-radius: 14px;
        padding: 10px 0;
        background: #fff;
        box-shadow: 0 20px 45px rgba(0,0,0,.12);
    }

    /* Hover active */
    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }

    /* Hover safe zone (chống rớt hover) */
    .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px;
    }

    /* ---------- Normal dropdown list ---------- */
    .dropdown-item {
        padding: 10px 22px;
        font-weight: 500;
        color: #333;
        background: transparent;
        transition: background .2s ease, color .2s ease;
    }

    .dropdown-item:hover {
        background: #f4f6f9;
        color: #0d6efd;
        text-decoration: none;
    }

    /* ---------- Mega menu ---------- */
    .mega-menu {
        width: 100%;
        left: 0;
        right: 0;
        padding: 32px;
        border-radius: 18px;
        background: #fff;
    }

    .mega-col {
        min-width: 220px;
    }

    .mega-title {
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 14px;
        color: #111;
    }

    .mega-item {
        display: block;
        padding: 6px 0;
        font-weight: 500;
        color: #444;
        transition: color .2s ease;
    }

    .mega-item:hover {
        color: #0d6efd;
        text-decoration: none;
    }
}

/* =====================================================
   MOBILE MENU (<=991px)
===================================================== */
@media (max-width: 991px) {

    /* ---------- Offcanvas base ---------- */
    .offcanvas-body {
        padding: 0;
    }

    .offcanvas .navbar-nav {
        width: 100%;
    }

    /* ---------- Level 0 item ---------- */
    .offcanvas .nav-item {
        position: relative;
    }

    .offcanvas .nav-link {
        padding: 14px 56px 14px 20px; /* chừa chỗ icon */
        display: block;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #eee;
        color: #111;
        background: #fff;
        text-decoration: none;
    }

    .offcanvas .nav-link:active {
        background: #f4f6f9;
    }

    /* ---------- Hide Bootstrap caret ---------- */
    .offcanvas .dropdown-toggle::after {
        display: none;
    }

    /* ---------- Toggle icon button ---------- */
    .ws-submenu-toggle {
        position: absolute;
        right: 0;
        top: 0;
        width: 56px;
        height: 100%;
        border: 0;
        background: transparent;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ws-submenu-toggle:active {
        transform: scale(.96);
    }

    /* Icon + / × */
    .ws-icon-open,
    .ws-icon-close {
        font-size: 26px;
        line-height: 1;
        font-weight: 400;
        color: #111;
    }

    .ws-icon-close {
        display: none;
    }

    /* Khi submenu mở */
    .nav-item.open > .ws-submenu-toggle .ws-icon-open {
        display: none;
    }

    .nav-item.open > .ws-submenu-toggle .ws-icon-close {
        display: inline;
                position: absolute;
        top: 10px
    }

    /* ---------- Submenu accordion ---------- */
    .offcanvas .dropdown-menu {
        display: none;
        position: static;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fafafa;
    }

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

    /* ---------- Sub item ---------- */
    .offcanvas .dropdown-item,
    .offcanvas .mega-item {
        display: block;
        padding: 12px 30px;
        font-size: 15px;
        font-weight: 500;
        color: #333;
        border-bottom: 1px solid #eee;
        background: #fafafa;
        text-decoration: none;
    }

    .offcanvas .dropdown-item:active,
    .offcanvas .mega-item:active {
        background: #f0f0f0;
    }

    /* ---------- Mega menu mobile: bỏ layout cột ---------- */
    .offcanvas .mega-menu {
        padding: 0;
        background: #fafafa;
    }

    .offcanvas .mega-col {
        padding: 0;
        margin: 0;
    }

    .offcanvas .mega-title {
        display: none; /* chỉ ẩn tiêu đề cột, KHÔNG ẩn item */
    }
}
/* =====================================================
   DESKTOP FIX – KHÔNG HIỆN ICON, CHO PHÉP HOVER
===================================================== */
@media (min-width: 992px) {

    /* Ẩn hoàn toàn nút toggle mobile */
    .ws-submenu-toggle {
        display: none !important;
    }

    /* Đảm bảo hover menu hoạt động */
    .navbar .nav-item:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }


.navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
        font-weight: 700;
        padding-left: 15px;
        padding-right: 15px;
    }


}