/* =========================================================
   MCD Menu Style - Horizontal Adaptation
   Adapted from Vertical Style to Horizontal for OOS2026
   Theme Color: #0d6efd (Bootstrap Primary)
   ========================================================= */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Main Container */
.main-nav {
    width: 100%;
    background: #fff; /* หรือสีพื้นหลัง Header */
}

.mcd-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #FFF;
    border-radius: 0;
    display: flex; /* เปลี่ยนเป็น Flex เพื่อให้เป็นแนวนอน */
    justify-content: flex-end; /* จัดชิดขวา หรือ flex-start ชิดซ้าย */
    flex-wrap: wrap;
    width: auto;
}

.mcd-menu li {
    position: relative;
    float: none; /* ยกเลิก float เดิม */
}

/* Link Style */
.mcd-menu li a {
    display: block;
    text-decoration: none;
    padding: 15px 20px; /* ปรับความสูง */
    color: #555;
    text-align: left;
    height: auto;
    border-bottom: none; /* เอาเส้นคั่นแนวนอนออก */
    border-right: 1px solid #f0f0f0; /* เส้นคั่นแนวตั้งแทน */
    position: relative;
    transition: all 300ms linear;
}

/* Icon Style */
.mcd-menu li a i {
    float: left;
    font-size: 20px;
    margin: 0 10px 0 0;
    color: #0d6efd; /* สีธีม */
    transition: all 300ms linear;
}

/* Text Style */
.mcd-menu li a strong {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    transition: all 300ms linear;
}

.mcd-menu li a small {
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: normal;
    transition: all 300ms linear;
}

/* Hover Effects (Animation from Source) */
.mcd-menu li:hover > a {
    color: #0d6efd;
    background: #f8f9fa;
}

.mcd-menu li:hover > a i {
    opacity: 1;
    animation: moveFromTop 300ms ease-in-out;
}

.mcd-menu li:hover a strong {
    opacity: 1;
    animation: moveFromLeft 300ms ease-in-out;
}

.mcd-menu li:hover a small {
    opacity: 1;
    animation: moveFromRight 300ms ease-in-out;
}

/* Active State */
.mcd-menu li a.active {
    position: relative;
    color: #0d6efd;
    border: 0;
    box-shadow: none;
    border-top: 4px solid #0d6efd; /* เส้น active อยู่ด้านบนแทน */
}

/* =========================================================
   Dropdown Menu (Sub-menu) - Horizontal Logic
   ========================================================= */
.mcd-menu li ul {
    position: absolute;
    height: auto;
    min-width: 250px;
    padding: 0;
    margin: 0;
    background: #FFF;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    z-index: 1000;
    
    /* Level 1 Dropdown: ลงมาด้านล่าง */
    top: 100%; 
    left: 0;
    border-top: 4px solid #0d6efd;
    border-left: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.mcd-menu li ul:before {
    content: "";
    position: absolute;
    top: -9px;
    left: 20px; /* ลูกศรชี้ขึ้น */
    border-bottom: 5px solid #0d6efd;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0;
}

/* Show Dropdown on Hover */
.mcd-menu li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%; /* ตำแหน่งแสดงผล */
}

/* Dropdown Item Style */
.mcd-menu li ul li {
    float: none;
    display: block;
    width: 100%;
}

.mcd-menu li ul li a {
    padding: 12px 15px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #EEE;
    display: flex;
    align-items: center;
}
.mcd-menu li ul li a strong {
    font-size: 13px;
    text-transform: none;
}
.mcd-menu li ul li a i {
    font-size: 16px;
    margin-right: 10px;
}

/* Level 2 Sub-dropdown: ออกไปทางขวา */
.mcd-menu li ul li ul {
    left: 100%;
    top: 0;
    border-top: 0;
    border-left: 4px solid #0d6efd;
}
.mcd-menu li ul li ul:before {
    top: 15px;
    left: -9px; /* ลูกศรชี้ซ้าย */
    border-right: 5px solid #0d6efd;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
    top: 0;
    left: 100%;
}

/* =========================================================
   Animations Keyframes (Keep Original)
   ========================================================= */
@keyframes moveFromTop {
    from { opacity: 0; transform: translateY(200%); }
    to { opacity: 1; transform: translateY(0%); }
}
@keyframes moveFromLeft {
    from { opacity: 0; transform: translateX(200%); }
    to { opacity: 1; transform: translateX(0%); }
}
@keyframes moveFromRight {
    from { opacity: 0; transform: translateX(-200%); }
    to { opacity: 1; transform: translateX(0%); }
}

/* =========================================================
   Mobile Responsive (แก้ไข Sub-menu ล้นจอ)
   ========================================================= */
@media only screen and (max-width: 991px) {
    .mcd-menu {
        display: block;
        width: 100%;
    }

    /* ปรับ Link ในมือถือ */
    .mcd-menu li a {
        border-right: 0;
        border-bottom: 1px solid #EEE;
        position: relative;
    }

    /* จัดการ Dropdown ทุกระดับชั้น (Level 1, 2, 3...) */
    .mcd-menu li ul,
    .mcd-menu li ul li ul {
        position: relative !important; /* บังคับไม่ให้ลอย */
        top: 0 !important;
        left: 0 !important; /* บังคับชิดซ้าย ไม่ให้เด้งไปขวา */
        width: 100%;
        min-width: unset;
        opacity: 1;
        visibility: visible;
        display: none; /* ซ่อนไว้ก่อน (รอ Hover หรือ JS สั่งเปิด) */
        box-shadow: none;
        border-top: 0;
        border-left: 4px solid #0d6efd; /* เส้นสีธีมด้านซ้าย */
        margin-left: 0;
    }

    /* ซ่อนลูกศรชี้ (Arrow) ทั้งหมดในมือถือ */
    .mcd-menu li ul:before,
    .mcd-menu li ul li ul:before {
        display: none;
    }

    /* การแสดงผลเมื่อ Hover หรือ Active */
    .mcd-menu li:hover > ul {
        display: block;
    }

    /* จัดย่อหน้า (Indentation) ให้ดูมีระดับชั้น */
    .mcd-menu li ul li a {
        padding-left: 30px; /* เมนูย่อยชั้น 1 ขยับเข้า */
        background: #f9f9f9;
    }
    
    .mcd-menu li ul li ul li a {
        padding-left: 50px; /* เมนูย่อยชั้น 2 ขยับเข้าอีก */
        background: #f0f0f0;
        border-left: 2px solid #ddd; /* เพิ่มเส้นคั่นจางๆ */
    }

    /* Icon ในมือถือปรับให้เล็กลงหน่อย */
    .mcd-menu li a i {
        font-size: 18px;
    }
}