.menu{width:100%;background: #004ea2;}
.menu-main{width:92%;display:flex;list-style:none;margin-left:4%;}

.menu-main > li{/*   position: relative; */}
.menu-main > li > a{font:bold 14px Helvetica;text-transform:uppercase;color:#fff;padding:18px 9px 18px 9px;display:block;text-decoration:none;letter-spacing:0px;}
.menu-main > li > a:hover{background:red;}

/* MEGA MENU */
.mega-menu{position:absolute;width:90%;background:#fdeeee;display:none;left:5%;border-top:2px solid red;z-index:20;}
.has-mega:hover .mega-menu{display: flex;}

/* MEGA MENU */
.submenu{position:absolute;width:90%;background:#fdeeee;display:none;left:5%;}
.submenu-bottom{position:absolute;width:90%;background:#fdeeee;display:none;left:5%;}
.mega-menu-chil:hover .submenu{display: block;}
.mega-menu-chil:hover .submenu-bottom{display: block;}
.mega-menu-chil > .submenu-chil:hover > a{color:red;}

/* CỘT CHUNG */
.col{list-style:none;min-width:33%;border-right:1px solid #ddd;padding: 15px;position:relative;}
    /*.col li{position:relative;}*/
    .col .level1{display: block;padding:10px 10px 10px 10px;text-decoration:none;color:#000;font:bold 15px Helvetica;text-transform:uppercase;padding-left:22px;}
    .col .level1:hover{color:red;}

/* CỘT 2 + 3 ẨN BAN ĐẦU */
.col-2,
.col-3 {width:33%;position:absolute;top:0;left:100%;background:#fdeeee;display:none;height:100%;}

/* HOVER CỘT 1 → CỘT 2 */
.col-1 > .has-sub:hover > .col-2 {display: block;}

/* HOVER CỘT 2 → CỘT 3 */
.col-2 > .has-sub:hover > .col-3 {display: block;}

/* Hover bình thường */
.col a:hover{color: red;}

/* GIỮ ACTIVE cột 1 khi sang cột 2 */
.col-1 > .has-sub:hover > a{color:red;font-weight:bold;}
.col-2 > .has-sub:hover > a{color:red;font-weight:bold;}

/* Ẩn toàn bộ menu con */
.col ul.col-1 {display:none;position:absolute;top:0;left:100%;}
.col ul.col-2{display:none;position: absolute;width:100%;max-height:93%;top: 0;left: 90%;}
    .col ul.col-2 li{float:left;width:100%;}
    .col ul.col-2 li a{float:left;width:100%;display: block;padding:12px 10px 12px 10px;text-decoration:none;color:#000;font:bold 15px Helvetica;text-transform:uppercase;padding-left:22px;}
    .col ul.col-2 li a:hover{color:red;}

.col ul.col-3{display:none;position:absolute;width:75%;max-height:93%;top:0;left: 100%;}
    .col ul.col-3 li{float:left;width:100%; margin-bottom:5px;}
    .col ul.col-3 li a{float:left;width:100%;display: block;padding:10px 10px 10px 10px;text-decoration:none;color:#000;font:bold 15px Helvetica;
                       text-transform:uppercase;padding-left:22px;line-height:22px;}
    .col ul.col-3 li a:hover{color:red;}

.col ul.col-4{display:none;position:inherit;width:80%;top:0;left:0;height:280px;overflow-x:auto;}
    .col ul.col-4 li{float:left;width:80%;}
    .col ul.col-4 li a{float:left;width:100%;display: block;padding:10px 10px 10px 10px;text-decoration:none;color:#000;font:bold 15px Helvetica;text-transform:inherit;padding-left:22px;}
    .col ul.col-4 li a:hover{color:red;}

/* Hover cấp nào → mở cấp đó */
.has-sub:hover > ul{display:block;}

/* Active màu cho các cấp */
.col-1 > .has-sub:hover > a,
.col-2 > .has-sub:hover > a,
.col-3 > .has-sub:hover > a {color:red;font-weight:bold;}
.has-sub > a{position:relative;padding-right:25px;}

/* Mũi tên */
.has-sub > a {position: relative;padding-left: 22px; /* chừa chỗ cho mũi tên */}

/* Mũi tên trước chữ */
.has-sub > a::before{content:"❯";position:absolute;left:3px;top:46%;transform:translateY(-50%);color: currentColor; /* ăn màu theo chữ */transition: transform 0.2s ease, color 0.2s ease;}
.col a:hover{color:red;}

/* Giữ đỏ cột 1 + cột 2 */
.col-1 > .has-sub:hover > a,
.col-2 > .has-sub:hover > a{color:red;font-weight:bold;}



/* reset */
.mega-menu-chil{position:relative;}
.menu-main > li:hover{background:red;}
.menu-main > li.mega-menu-chil:hover{background:red;color:white;}
.menu-main > li.mega-menu-chil:hover .link-menu{color:white;}

/* submenu */
.submenu{position:absolute;width:300px;top:100%;left:0;background:#fdeeee;display:none;border:solid 1px #f48c8c;border-top:2px solid red;list-style:none;
            z-index:2;}
    .submenu li{float:left;width:100%;border-bottom:dotted 1px #f48c8c;}
    .submenu li .links{float:left;width:90%;padding:12px 15px;color:#000;text-decoration:none;font:bold 15px Helvetica;text-transform:capitalize;line-height:22px;}
    .submenu li .links:hover{color:red;}

.submenu-bottom{position:absolute;width:300px;top:100%;left:0;background:#fdeeee;display:none;border-top:2px solid red;list-style:none;}
    .submenu-bottom li{float:left;width:100%;border-bottom:solid 1px #f48c8c;}
    .submenu-bottom li .links{float:left;width:90%;padding:12px 15px;color:#000;text-decoration:none;font:bold 15px Helvetica;text-transform:uppercase;}
    .submenu-bottom li .links:hover{color:red;}

    .submenu-bottom .submenu-level2{position:absolute;width:300px;bottom:-45px;left:100%;background:#fdeeee;display:none;border:solid 1px #f48c8c;
                              border-top:2px solid red;list-style:none;z-index:11;}
    .submenu-bottom li:hover .submenu-level2{display:block;color:red;}

    .submenu-bottom .submenu-level2 li{float:left;width:100%;border-bottom:dotted 1px #f48c8c;}
    .submenu-bottom .submenu-level2 li .links{float:left;width:90%;padding:12px 15px;color:#000;text-decoration:none;font:bold 15px Helvetica;text-transform:uppercase;}
    .submenu-bottom .submenu-level2 li .links:hover{color:red;}


/* menu khác cấp 2 */
.submenu-chil .submenu-level2{position:absolute;width:300px;bottom:-45px;left:100%;background:#fdeeee;display:none;border:solid 1px #f48c8c;
                              border-top:2px solid red;list-style:none;}
.submenu-chil:hover > .submenu-level2{display:block;color:red;}

    .submenu-chil .submenu-level2 li{float:left;width:100%;border-bottom:dotted 1px #f48c8c;}
    .submenu-chil .submenu-level2 li .links{float:left;width:90%;padding:12px 15px;color:#000;text-decoration:none;font:bold 15px Helvetica;text-transform:uppercase;}
    .submenu-chil .submenu-level2 li .links:hover{color:red;}




/* --------------- mobile menu ICON HAMBURGER ------------------ */
.wrap-menu-mobile{float:left;width:35px;height:0 auto;}
.menu-toggle{float:left;width:35px;height:19px;position:relative;background:none;border:none;cursor:pointer;z-index:1001;margin:15px 0px 0px 0px;
                display:inherit;}
.menu-toggle span{position:absolute;width:100%;height:4px;background:#000;left:0;transition:.3s;}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 8px; }
.menu-toggle span:nth-child(3) { bottom: 0; }

/* MENU MOBILE */
.mobile-menu{position:fixed;top:0;left:-100%;width:100%;height:100%;background:#fff;overflow-y:auto;transition:.3s;z-index:1000;padding-top:60px;}
.mobile-menu.open{left:0;}
.mobile-menu ul{list-style:none;padding:0;margin:0;}
.mobile-menu li{border-bottom:1px solid #eee;}

.mobile-menu a,.mobile-menu span{display:block;padding:14px;cursor:pointer;font:15px Helvetica-bold;text-transform:uppercase;}
.mobile-menu a:hover,.mobile-menu span:hover{color:red;}

/* submenu */
.mobile-menu ul ul{display:none;background:#f9f9f9;}

.mobile-menu li.open > ul {display:block;}

/* chỉ hiện trên mobile */
@media (min-width: 992px) {
  .menu-toggle,
  .mobile-menu{display:none;}
}
/* trạng thái mở menu */
.menu-toggle.active span:nth-child(1){transform:rotate(45deg);top:7px;}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform: rotate(-45deg);bottom:8px;}





@media (min-width: 1821px) 
{
    .menu-main{width:80%;display:flex;list-style:none;margin-left:10%;}
    .menu-main > li > a{font:bold 15px Helvetica;padding:18px 10px 18px 10px;}
}
@media (min-width: 1440px) and (max-width: 1820px) 
{
}      
@media (min-width: 1024px) and (max-width: 1440px) 
{   
}        
@media (min-width: 768px) and (max-width: 1023px) 
{
}
@media (min-width: 480px) and (max-width: 767px) 
{
}
@media (max-width: 479px) 
{
}