/* ============================================
   menu.css - 菜單專用樣式 (壓縮優化版)
   包含：主菜單、下拉菜單、Mega菜單、響應式菜單、移動底部導航
   ============================================ */

/* ============================================
   1. 主菜單基本樣式
   ============================================ */
.main-menu>li{margin-right:14px;padding:3px 0}.main-menu>li:last-child{margin-right:0}
.main-menu>li>a{color:#0e0e0e;display:block;font-size:14px;font-weight:500;line-height:30px;text-transform:uppercase;padding:7px 25px;position:relative}
.main-menu>li:hover>a,.main-menu>li.active>a{color:#01386d}
.main-menu>li:hover>a:before,.main-menu>li.active>a:before{color:#01386d}

/* ============================================
   2. 下拉菜單 (Submenu)
   ============================================ */
.has-submenu{padding-right:10px;position:relative}
.has-submenu>a{position:relative}
.has-submenu>a:before{content:"";color:#01386d;font-size:14px;line-height:30px;font-family:"FontAwesome";position:absolute;right:11px;top:7px}
.has-submenu:hover>.submenu-nav{-webkit-transform:none;transform:none;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);opacity:1;visibility:visible;pointer-events:visible}
.has-submenu .submenu-nav{background-color:#111;border:none;border-bottom:none;padding:15px 0;position:absolute;left:-25px;top:100%;opacity:0;min-width:250px;pointer-events:none;transform:rotateX(-75deg);-webkit-transform:rotateX(-75deg);transform-origin:0% 0%;-webkit-transform-origin:0% 0%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:all .4s ease-out;-webkit-transition:all .4s ease-out;visibility:hidden;z-index:9999}
@media only screen and (max-width:1199px){.has-submenu .submenu-nav{min-width:210px}}
.has-submenu .submenu-nav:before{content:"";position:absolute;height:56px;width:100%;left:0;bottom:100%}
.has-submenu .submenu-nav>li{padding:10px 25px}
.has-submenu .submenu-nav>li a{color:#aaa;display:block;font-weight:400;font-size:14px;letter-spacing:inherit;text-transform:capitalize}
.has-submenu .submenu-nav>li a:hover{color:#fff}
.has-submenu .submenu-nav>li:hover>a{color:#fff}
.has-submenu .submenu-nav>li:hover:after{color:#fff !important}
.has-submenu .submenu-nav>li.has-submenu{position:relative}
.has-submenu .submenu-nav>li.has-submenu a:before{display:none}
.has-submenu .submenu-nav>li.has-submenu:hover>.submenu-nav{-webkit-transform:none;transform:none;opacity:1;visibility:visible;pointer-events:visible}
.has-submenu .submenu-nav>li.has-submenu:after{content:"";color:#707070;font-size:15px;line-height:1.2;font-family:"FontAwesome";position:absolute;right:25px;top:12px}
.has-submenu .submenu-nav>li.has-submenu .submenu-nav{left:100%;top:0}

/* ============================================
   3. Mega 菜單
   ============================================ */
.has-submenu .submenu-nav-mega{display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 50px;width:100%}
@media only screen and (max-width:1199px){.has-submenu .submenu-nav-mega{width:830px}}
.has-submenu .submenu-nav-mega .mega-menu-item{padding:0 !important;-ms-flex-preferred-size:25%;flex-basis:25%}
.has-submenu .submenu-nav-mega .mega-menu-item:last-child{border-right:0}
.has-submenu .submenu-nav-mega.colunm-two .mega-menu-item{-ms-flex-preferred-size:50%;flex-basis:50%}
.has-submenu.full-width{position:static}

/* ============================================
   4. Header 菜單佈局
   ============================================ */
.header-area .header-middle .contact-link{margin-right:0;position:relative;padding-left:46px}
@media only screen and (max-width:1199px){.header-area .header-middle .contact-link{display:block}}
@media only screen and (max-width:991px){.header-area .header-middle .contact-link{display:none}}
.header-area .header-middle .contact-link:before{content:"";display:inline-block;width:27px;height:27px;background:url(../img/icons/call.png) no-repeat;background-size:100%;position:absolute;left:0;top:-2px}
.header-area .header-middle .contact-link .contact-info .phone{font-size:16px;font-weight:300;margin-bottom:4px;display:block}
.header-area .header-middle .contact-link .contact-info .phone a{font-weight:600}
.header-area .header-middle .contact-link .contact-info .time-contact{color:#615d5d;font-size:14px;font-weight:300}

/* ============================================
   5. 響應式移動菜單 (SlickNav)
   ============================================ */
.res-mobile-menu{margin:0}
.res-mobile-menu .slicknav_btn{display:none}
.res-mobile-menu .slicknav_menu{background-color:#fff0;padding:0}
.res-mobile-menu .slicknav_nav{display:block !important}
.res-mobile-menu .slicknav_nav li{border-top:1px solid #eee;position:relative}
.res-mobile-menu .slicknav_nav li:last-child{border-bottom:0}
.res-mobile-menu .slicknav_nav li a{color:#1d1d1d;font-size:14px;font-weight:600;line-height:25px;padding:8px 20px;margin:0;text-transform:capitalize;position:relative;letter-spacing:0}
.res-mobile-menu .slicknav_nav li a .slicknav_arrow{background-color:#fff0;color:#1d1d1d;font-size:20px;display:block;text-align:center;margin:0;position:absolute;right:0;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);height:32px;line-height:34px;width:48px;border-radius:50%}
.res-mobile-menu .slicknav_nav li a a{padding:0}
.res-mobile-menu .slicknav_nav li a:hover{color:#01386d;background-color:#fff0}
.res-mobile-menu .slicknav_nav li img{display:none}
.res-mobile-menu .slicknav_nav li div{display:none}
.res-mobile-menu .slicknav_nav li ul{margin:0;padding-left:0}
.res-mobile-menu .slicknav_nav li ul li a{font-weight:300;padding-left:30px}
.res-mobile-menu .slicknav_nav li ul li ul li a{font-size:14px;padding-left:40px}
.res-mobile-menu .slicknav_nav .slicknav_parent .slicknav_item a{padding-left:0}
.res-mobile-menu .slicknav_nav .slicknav_open a>a{color:#01386d}
.res-mobile-menu .slicknav_nav .slicknav_open>.slicknav_item{position:relative}
.res-mobile-menu .slicknav_nav .slicknav_open>.slicknav_item .slicknav_arrow{color:#01386d;background-color:#fff0}
.res-mobile-menu .slicknav_nav .slicknav_open>ul>li>a>a{color:#5b5b5b}
.res-mobile-menu .slicknav_nav .slicknav_open>ul>li.slicknav_open>a>a{color:#01386d}

/* ============================================
   6. 響應式 Header 按鈕
   ============================================ */
.responsive-header .header-item .btn-menu{color:#0f0f0f;font-size:21px;height:30px;line-height:34px;background-color:#fff0;border:none;padding:0;margin:0;transition:all .4s ease-out;-webkit-transition:all .4s ease-out}
.responsive-header .header-item .btn-menu:hover{color:#01386d}
.responsive-header .header-item .btn-user{background-color:#fff0;border:none;color:#0f0f0f;font-size:24px;padding:0;height:30px;line-height:35px;transition:all .4s ease-out;-webkit-transition:all .4s ease-out}
.responsive-header .header-item .btn-user:hover{color:#01386d}
.responsive-header .header-item .btn-cart{background-color:#fff0;border:none;color:#0f0f0f;font-size:24px;padding:0;height:30px;line-height:35px;margin-left:14px;margin-right:14px;position:relative;padding-right:12px;display:inline-block;transition:all .4s ease-out;-webkit-transition:all .4s ease-out}
.responsive-header .header-item .btn-cart .item-count{background-color:#01386d;color:#fff;position:absolute;bottom:0;left:16px;display:inline-block;width:20px;height:20px;line-height:19px;font-size:11px;border-radius:100%;text-align:center}
.responsive-header .header-item .btn-cart:hover{color:#01386d}
.rightitem{padding-top:15%;text-align:right}

/* ============================================
   7. 菜單文字與圖標樣式
   ============================================ */
.bannertextwh a{color:#fff}

/* ============================================
   8. 移動底部導航 (Mobile Bottom Nav)
   ============================================ */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:1000}
.mobile-bottom-nav .nav-item{flex:1;text-align:center;padding:10px 0}
.mobile-bottom-nav .nav-item a{display:flex;flex-direction:column;align-items:center;color:#666;text-decoration:none;font-size:12px}
.mobile-bottom-nav .nav-item i{font-size:20px;margin-bottom:5px}
.mobile-bottom-nav .nav-item a.active{color:#01386d}

/* ============================================
   9. Header 頂部下拉菜單 (語言/貨幣/帳戶)
   ============================================ */
.header-area .header-top .theme-setting .dropdown-content,
.header-area .header-top .theme-currency .dropdown-content,
.header-area .header-top .theme-language .dropdown-content{-webkit-box-shadow:0 3px 25.5px 4.5px rgba(0,0,0,0.06);box-shadow:0 3px 25.5px 4.5px rgba(0,0,0,0.06);background-color:#fff;border-radius:0;border:none;left:auto;margin:0;min-width:130px;max-height:0;padding:0 15px;overflow:hidden;position:absolute;right:0;top:100%;text-align:initial;z-index:1;transition:all .4s ease-out;-webkit-transition:all .4s ease-out}
.header-area .header-top .theme-setting .dropdown-content li a,
.header-area .header-top .theme-currency .dropdown-content li a,
.header-area .header-top .theme-language .dropdown-content li a{border-bottom:1px solid #ebebeb;color:#0f0f0f;display:block;font-size:13px;font-weight:300;line-height:25px;padding:10px}
.header-area .header-top .theme-setting .dropdown-content li a:hover,
.header-area .header-top .theme-currency .dropdown-content li a:hover,
.header-area .header-top .theme-language .dropdown-content li a:hover{color:#01386d}
.header-area .header-top .theme-setting .dropdown-content li:last-child a,
.header-area .header-top .theme-currency .dropdown-content li:last-child a,
.header-area .header-top .theme-language .dropdown-content li:last-child a{border-bottom:none}
.header-area .header-top .theme-setting:hover .dropdown-content,
.header-area .header-top .theme-currency:hover .dropdown-content,
.header-area .header-top .theme-language:hover .dropdown-content{max-height:137px}
.header-area .header-top .theme-setting:hover:before,
.header-area .header-top .theme-currency:hover:before,
.header-area .header-top .theme-language:hover:before{position:absolute;content:"";width:130px;height:18px;right:0;bottom:-12px}

/* ============================================
   10. 菜單專屬樣式 (課程分類等)
   ============================================ */
.main-menu .has-submenu .submenu-nav-mega .mega-menu-item .mega-title a{font-weight:700;color:#f74b56;font-size:14px;border-bottom:1px solid #eee;padding-bottom:8px;margin-bottom:8px;display:inline-block}
.main-menu .has-submenu .submenu-nav-mega .mega-menu-item .course-count{font-size:11px;color:#999;margin-left:5px}
.main-menu .has-submenu .submenu-nav-mega .mega-menu-footer{border-top:1px solid #eee;margin-top:10px;padding-top:10px}
.main-menu .has-submenu .submenu-nav-mega .view-all-link{color:#f74b56;font-weight:600}
.main-menu .has-submenu .submenu-nav-mega .view-all-link:hover{color:#e03a45;text-decoration:underline}

/* ============================================
   11. 響應式調整
   ============================================ */
@media (max-width:1199px){.main-menu .has-submenu .submenu-nav-mega{left:-100px;right:auto;min-width:800px}}
@media (max-width:991px){.main-menu .has-submenu .submenu-nav-mega{left:-50px;min-width:600px}}
@media (min-width:992px){.mobile-bottom-nav{display:none}.navbar-expand-lg .navbar-nav .nav-link{padding-right:20px;padding-left:20px}}
@media only screen and (max-width:575px){.responsive-header .header-item .btn-cart{margin-right:14px}}
@media only screen and (max-width:479.98px){.header-area .header-top .theme-setting .dropdown-content{left:0;right:auto}}

/* ============================================
   修正第三層菜單樣式 (在 menu.css 中添加或覆蓋)
   ============================================ */

/* 第二層菜單中的 has-submenu 項目 */
.has-submenu .submenu-nav > li.has-submenu {
    position: relative;
}

/* 第三層菜單的箭頭指示器 */
.has-submenu .submenu-nav > li.has-submenu:after {
    content: "";
    color: #707070;
    font-size: 15px;
    line-height: 1.2;
    font-family: "FontAwesome";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

/* 第三層菜單 - 懸停時顯示 */
.has-submenu .submenu-nav > li.has-submenu:hover > .submenu-nav {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}

/* 第三層菜單 - 位置和樣式 */
.has-submenu .submenu-nav > li.has-submenu .submenu-nav {
    position: absolute;
    left: 100%;
    top: -15px;
    min-width: 220px;
    background-color: #111;
    padding: 15px 0;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    z-index: 10000;
}

/* 第三層菜單項目 */
.has-submenu .submenu-nav > li.has-submenu .submenu-nav > li {
    padding: 10px 25px;
}

.has-submenu .submenu-nav > li.has-submenu .submenu-nav > li a {
    color: #aaa;
    font-size: 14px;
    display: block;
    font-weight: 400;
    text-transform: capitalize;
}

.has-submenu .submenu-nav > li.has-submenu .submenu-nav > li a:hover {
    color: #fff;
}

/* 第三層菜單懸停時顯示 - 確保生效 */
.has-submenu .submenu-nav > li.has-submenu:hover .submenu-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* 防止第二層菜單 hover 時第三層閃爍 */
.has-submenu .submenu-nav > li.has-submenu .submenu-nav:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    left: -10px;
    top: 0;
}

.sub2{
	left:200px !important;
}