/* nhatdx-vmenu-styles */

        .nhatdx-vmenu {
            border: 1px solid var(--nhatdx-line, #EFECE7); border-radius: 12px; background: #fff;
            overflow: visible;
        }
        .nhatdx-vmenu { border-radius: var(--nxvm-r, 12px); }
        .nhatdx-vmenu.nxvm-bd { position: relative; }
        /* Dùng ::before — ::after của khung menu đã dành cho vệt mờ mép phải ở màn hình nhỏ */
        .nhatdx-vmenu.nxvm-bd::before {
            content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
            box-shadow: inset 0 0 0 var(--nxvm-bw, 1px) var(--nxvm-bc, #E9E1CF);
        }
        .nhatdx-vmenu-title { border-radius: calc(var(--nxvm-r, 12px) - 1px) calc(var(--nxvm-r, 12px) - 1px) 0 0; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li:first-child > a { border-radius: calc(var(--nxvm-r, 12px) - 1px) calc(var(--nxvm-r, 12px) - 1px) 0 0; }
        .nhatdx-vmenu-title + ul.nhatdx-vmenu-list > li:first-child > a { border-radius: 0; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li:last-child > a { border-radius: 0 0 calc(var(--nxvm-r, 12px) - 1px) calc(var(--nxvm-r, 12px) - 1px); }
        .nhatdx-vmenu-title {
            padding: 12px 16px; background: var(--nhatdx-primary, #C67930); color: #fff;
            font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li {
            margin: 0 !important; padding: 0 !important; list-style: none !important;
            border-bottom: 1px solid #F4F3F1;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li:last-child { border-bottom: 0; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a {
            display: flex !important; align-items: center; gap: 9px;
            padding: 12px 16px !important; font-size: 13.5px !important; font-weight: 700 !important;
            color: var(--nhatdx-ink, #342A22) !important; text-transform: none !important;
            letter-spacing: normal !important; transition: background .15s, padding-left .15s, color .15s;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a::before {
            content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
            background: var(--nhatdx-primary, #C67930); opacity: .55;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a:hover,
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li.current-menu-item > a {
            background: #FBF9F6 !important; padding-left: 20px !important;
            color: var(--nhatdx-primary, #C67930) !important;
        }

        .nhatdx-vmenu ul.nhatdx-vmenu-list > li { position: relative; }


        .nhatdx-vmenu ul.nhatdx-vmenu-list > li.menu-item-has-children > a::after {
            content: ""; margin-left: auto; flex: 0 0 13px; width: 13px; height: 13px; opacity: .55;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23342A22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
            transition: opacity .15s;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li.menu-item-has-children:hover > a::after { opacity: 1; }

        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu {
            position: absolute !important; left: 100% !important; top: -6px !important;
            min-width: 236px; margin: 0 !important; padding: 8px 0 !important;
            background: #fff; border: 1px solid var(--nhatdx-line, #EFECE7); border-radius: 12px;
            box-shadow: 0 12px 34px rgba(35, 27, 21, .16);
            list-style: none !important; z-index: 60;
            opacity: 0; visibility: hidden; transform: translateX(-8px);
            transition: opacity .18s ease, transform .18s ease, visibility .18s;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li:hover > ul.sub-menu,
        .nhatdx-vmenu ul.nhatdx-vmenu-list > li:focus-within > ul.sub-menu {
            opacity: 1; visibility: visible; transform: translateX(0);
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li { margin: 0 !important; border: 0 !important; list-style: none !important; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li a {
            display: block !important; padding: 9px 18px !important;
            font-size: 13.5px !important; font-weight: 500 !important; white-space: nowrap;
            color: var(--nhatdx-ink, #342A22) !important; transition: background .15s, padding-left .15s, color .15s;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li a:hover {
            background: #FBF9F6 !important; padding-left: 22px !important;
            color: var(--nhatdx-primary, #C67930) !important;
        }


        /* ---------- Cấp 3 và cấp 4 ----------
           Cấp 3: một bảng bay nữa, mở sang phải bảng cấp 2 (hoặc sang trái nếu sát mép màn hình).
           Cấp 4: không bay thêm nữa mà xếp thụt vào ngay trong bảng cấp 3 — thêm một bảng nữa là
           chuột phải rê qua ba chặng mới tới nơi, rất dễ rớt. */
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li { position: relative; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu {
            position: absolute !important; left: 100% !important; top: -8px !important;
            min-width: 232px; margin: 0 !important; padding: 8px 0 !important;
            opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity .16s, transform .16s, visibility .16s;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li:hover > ul.sub-menu,
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu li:focus-within > ul.sub-menu {
            opacity: 1; visibility: visible; transform: translateX(0);
        }
        /* Mở sang TRÁI khi bảng con sẽ lòi ra ngoài màn hình (lớp do JS gắn) */
        .nhatdx-vmenu li.nxvm-flip > ul.sub-menu {
            left: auto !important; right: 100% !important;
        }
        /* Cấp 4: danh sách thụt trong bảng cấp 3, có vạch dẫn màu vàng cho dễ phân biệt cấp */
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu ul.sub-menu {
            position: static !important; opacity: 1 !important; visibility: visible !important;
            transform: none !important; min-width: 0; box-shadow: none !important; border: 0 !important;
            margin: 2px 0 6px 18px !important; padding: 0 0 0 10px !important;
            border-left: 2px solid rgba(198,124,60,.55) !important; background: transparent !important;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu ul.sub-menu li a {
            padding: 6px 12px 6px 4px !important; font-size: 13px !important; font-weight: 500 !important;
            color: #6B6157 !important; text-transform: none !important;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu ul.sub-menu li a::before {
            content: "–"; margin-right: 6px; color: #C67C3C; font-weight: 700;
        }
        /* Mục còn cấp con trong bảng bay: mũi tên chỉ sang phải */
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu > li.menu-item-has-children > a::after {
            content: ""; margin-left: auto; flex: 0 0 12px; width: 12px; height: 12px; opacity: .5;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23342A22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/12px no-repeat;
        }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu > li.menu-item-has-children > a { display: flex !important; align-items: center; }
        /* Cấp 3 có con (tức có cấp 4) thì không cần mũi tên, vì cấp 4 nằm ngay bên dưới */
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu > li.menu-item-has-children > a::after { content: none !important; }
        .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu ul.sub-menu > li.menu-item-has-children > a {
            font-weight: 700 !important; color: #342A22 !important;
        }

        .nhatdx-vmenu.is-right ul.nhatdx-vmenu-list ul.sub-menu {
            left: auto !important; right: 100% !important; transform: translateX(8px);
        }
        .nhatdx-vmenu.is-right ul.nhatdx-vmenu-list > li:hover > ul.sub-menu { transform: translateX(0); }


        @media (max-width: 1024px) {
            .nhatdx-vmenu-title { display: none; }
            .nhatdx-vmenu {
                position: relative; border: 0; border-radius: 0; background: transparent;
                padding: 2px 0;
            }

            /* Màn hình nhỏ menu thành dải nút ngang, không còn khung → bỏ viền */
            .nhatdx-vmenu.nxvm-bd::before { display: none !important; }

            .nhatdx-vmenu::after {
                content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
                background: linear-gradient(270deg, #fff 12%, rgba(255,255,255,0));
                pointer-events: none; z-index: 3;
            }

            .nhatdx-vmenu ul.nhatdx-vmenu-list {

                display: flex !important;
                flex-direction: row !important;
                flex-flow: row nowrap !important;
                flex-wrap: nowrap !important;
                gap: 6px;
                padding: 2px 30px 2px 0 !important;
                overflow-x: auto; overflow-y: hidden;
                scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
            }
            .nhatdx-vmenu ul.nhatdx-vmenu-list::-webkit-scrollbar { height: 0; width: 0; display: none; }


            .nhatdx-vmenu ul.nhatdx-vmenu-list > li {
                flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important;
                border: 0 !important; scroll-snap-align: start;
                width: auto !important; max-width: none !important; min-width: 0 !important;
            }


            .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a {
                display: inline-flex !important; align-items: center; gap: 0 !important;
                flex: 0 0 auto !important; flex-grow: 0 !important;
                width: auto !important; max-width: none !important; min-width: 0 !important;
                padding: 7px 14px !important; border-radius: 999px !important;
                background: #F6F3EF; border: 1px solid #EEEAE4;
                font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.35 !important;
                color: var(--nhatdx-ink, #342A22) !important; white-space: nowrap;
            }

            .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a::before,
            .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a::after { display: none !important; content: none !important; }

            .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a:hover,
            .nhatdx-vmenu ul.nhatdx-vmenu-list > li.current-menu-item > a,
            .nhatdx-vmenu ul.nhatdx-vmenu-list > li.current-menu-parent > a {
                padding-left: 14px !important;
                background: var(--nhatdx-primary, #C67930) !important;
                border-color: var(--nhatdx-primary, #C67930) !important;
                color: #fff !important;
            }

            .nhatdx-vmenu ul.nhatdx-vmenu-list ul.sub-menu { display: none !important; }
        }

        @media (max-width: 480px) {
            .nhatdx-vmenu ul.nhatdx-vmenu-list { gap: 5px; }
            .nhatdx-vmenu ul.nhatdx-vmenu-list > li > a { padding: 6px 12px !important; font-size: 12px !important; }
        }