Exclude Mega Menu from CSS Affecting Submenus

My Enfold site uses both submenus and a mega menu. I want all drop-down menus to have a solid red 6px border across the bottom. I can achieve that on the submenus with the following:

.sub-menu li:last-child {
border-bottom: 6px solid #cc0000 !important;
}

And on the mega menu with the following:

.avia_mega_div {
border-bottom: 6px solid #cc0000 !important;
}

The problem is that the submenu CSS results in an additional unwanted border at the bottom of each column of the mega menu.

See the screenshots here and here for additional context. They show the submenu looking correct with a border at the bottom, and then the mega menu with the correct border across the bottom and the unwanted borders at the bottom of each column.

How do I exclude the mega menu from inheriting the CSS attribute for the regular submenus?