/* ============================================================
   TYGA — เมนูหลัก / เมนูสินค้า (mega menu + submenu)
   Breakpoint เดียวคือ 768px ให้ตรงกับจุดที่ Bootstrap 3
   ยุบ navbar เป็นปุ่ม MENU  (.navbar-toggle display:none @768)
   ============================================================ */

.mega-dropdown {
    position: relative;
}

.mega-dropdown > .menu-toggle {
    cursor: pointer;
}

.mega-dropdown > .menu-toggle .fa-angle-down {
    transition: transform .2s ease;
}

.mega-dropdown.open > .menu-toggle .fa-angle-down {
    transform: rotate(180deg);
}

/* ---------- แผงหมวดหมู่ (คอลัมน์ซ้าย) ---------- */

.mega-dropdown-menu {
    width: 280px;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    /* ห้ามตั้ง position ตรงนี้ ต้องปล่อยให้เป็น absolute ตาม .dropdown-menu ของ Bootstrap
       ไม่งั้นแผงจะกลับเข้า flow แล้วดันเนื้อหาลง + ถ่างปุ่ม "สินค้าทั้งหมด" ให้กว้างตามแผง
       (absolute เป็น containing block ให้ .submenu ที่ absolute อยู่แล้ว) */
}

/* แต่ละแถว = ลิงก์ + ปุ่มลูกศร + submenu (ใช้ flex จะได้ไม่ต้อง absolute ปุ่ม) */
.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    float: none;
    width: auto;
}

.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li + li {
    border-top: 1px solid #f0f0f0;
}

/* บนมือถือหัวข้อ "สินค้าทั้งหมด" ทำหน้าที่เปิด-ปิด accordion อย่างเดียว
   ลิงก์ไปหน้ารวมสินค้าจึงย้ายมาเป็นแถวแรกในแผงแทน (เดสก์ท็อปไม่ต้องใช้) */
.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li.mobile-only {
    display: none;
}

/* flex-basis ต้องเป็น 0 ไม่ใช่ auto ไม่งั้นหมวดชื่อยาวจะดันปุ่มลูกศรตกบรรทัด */
.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li > a {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    display: block;
    width: auto;
    padding: 10px 15px;
    color: #000;
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    background: none;
}

/* ปุ่มลูกศรเปิด submenu — ชิดขวาสุด ให้ลูกศรตรงแนวกับ padding ขวาของแถว (15px) */
.mega-dropdown-menu .submenu-btn {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    min-width: 34px;
    padding: 0 15px 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    text-align: right;
    cursor: pointer;
}

.mega-dropdown-menu .submenu-btn:focus {
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: -2px;
}

.mega-dropdown-menu .submenu-btn i {
    transition: transform .2s ease;
}

/* ---------- submenu (คอลัมน์ขวา) ---------- */

.mega-dropdown-menu .submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu .submenu > li > a {
    display: block;
    padding: 10px 20px;
    color: #000;
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
}

.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu .submenu > li > a:hover,
.navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu .submenu > li > a:focus {
    background: #f1f1f1;
    color: #000;
}

/* ============================================================
   DESKTOP / TABLET  (>= 768px)
   ============================================================ */

@media (min-width: 768px) {

    .mega-dropdown-menu {
        margin-top: 0;   /* สูงเท่าจำนวนหมวดจริง ไม่ต้องตั้ง min-height เผื่อ submenu อีกแล้ว */
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li:hover,
    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li.sub-open {
        background: #f8931c;
    }

    /* submenu ลอยออกด้านข้าง — อย่างน้อยสูงเท่าแผงหลัก แต่ยืดตามจำนวนหมวดย่อยได้
       (ใช้ min-height แทน bottom:-1px แผงหลักจะได้ไม่ต้องสูงค้างไว้เผื่อ submenu ที่ยาวที่สุด) */
    .mega-dropdown-menu .submenu {
        position: absolute;
        left: 100%;
        top: -1px;
        bottom: auto;
        min-height: calc(100% + 2px);
        max-height: 80vh;
        width: 250px;
        overflow-y: auto;
        border: 1px solid #ccc;
        border-left: 0;
        border-radius: 0 3px 3px 0;
        z-index: 1001;
    }

    /* ถ้าชนขอบขวาจอ ให้เด้งไปเปิดทางซ้ายแทน (JS ใส่คลาสให้) */
    .mega-dropdown-menu.flip-left .submenu {
        left: auto;
        right: 100%;
        border: 1px solid #ccc;
        border-right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* เปิดแผงหลักด้วย hover — เฉพาะเครื่องที่ hover ได้จริง */
    .mega-dropdown:hover > .mega-dropdown-menu,
    .mega-dropdown.open > .mega-dropdown-menu {
        display: block;
    }

    /* เปิด submenu ด้วย hover / โฟกัสคีย์บอร์ด / คลิก */
    .mega-dropdown-menu > li.has-sub:hover > .submenu,
    .mega-dropdown-menu > li.has-sub.sub-open > .submenu {
        display: block;
    }

    .mega-dropdown-menu > li.has-sub:hover > .submenu-btn i,
    .mega-dropdown-menu > li.has-sub.sub-open > .submenu-btn i {
        transform: translateX(2px);
    }

    /* ถ้าเมาส์อยู่บนแถวอื่น อย่าให้ submenu ที่คลิกค้างไว้ซ้อนทับกัน */
    .mega-dropdown-menu:hover > li.sub-open:not(:hover) > .submenu {
        display: none;
    }

    /* เดินเมนูด้วยคีย์บอร์ด (แยกออกมาเพราะเบราว์เซอร์เก่าไม่รู้จัก :focus-within) */
    .mega-dropdown:focus-within > .mega-dropdown-menu {
        display: block;
    }

    .mega-dropdown-menu > li.has-sub:focus-within > .submenu {
        display: block;
    }

    /* อุปกรณ์สัมผัส (ไม่มี hover) ให้ใช้การแตะเท่านั้น กัน submenu เด้งเอง */
    @media (hover: none) {
        .mega-dropdown:hover > .mega-dropdown-menu {
            display: none;
        }
        .mega-dropdown.open > .mega-dropdown-menu {
            display: block;
        }
        .mega-dropdown-menu > li.has-sub:hover > .submenu {
            display: none;
        }
        .mega-dropdown-menu > li.has-sub.sub-open > .submenu {
            display: block;
        }
    }
}

/* ============================================================
   MOBILE  (< 768px) — ทุกอย่างเป็น accordion ในแถบเมนูสีน้ำเงิน
   ============================================================ */

@media (max-width: 767px) {

    /* ให้เลื่อนดูเมนูยาว ๆ ได้เต็มจอ (ค่า default ของ BS3 คือ 340px) */
    .navbar-collapse {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }

    /* ลูกศรของหัวข้อ "สินค้าทั้งหมด" ไปชิดขวา ตรงแนวเดียวกับลูกศรของหมวดด้านล่าง (15px) */
    .navbar-default .navbar-nav > .mega-dropdown > .menu-toggle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-right: 15px;
    }

    .navbar-default .navbar-nav > .mega-dropdown > .menu-toggle .fa-angle-down {
        margin-left: auto;
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu {
        position: static;   /* มือถือให้ไหลอยู่ในแถบเมนู */
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: rgba(0, 0, 0, .18);
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li + li {
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li.mobile-only {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li > a {
        padding: 10px 15px 10px 30px;
        color: #fff;
        font-size: 14px;
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu > li > a:focus {
        color: #000;
        background: #f8931c;
    }

    .mega-dropdown-menu .submenu-btn {
        color: #fff;
        min-width: 40px;
        padding: 0 15px 0 6px;
    }

    /* submenu ไหลอยู่ในสายเดียวกัน (accordion) */
    .mega-dropdown-menu .submenu {
        position: static;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd;
    }

    .mega-dropdown-menu > li.has-sub.sub-open > .submenu {
        display: block;
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu .submenu > li > a {
        padding: 8px 15px 8px 45px;
        font-size: 14px;
        color: #000;
    }

    .navbar-default .navbar-nav > .mega-dropdown .mega-dropdown-menu .submenu > li + li > a {
        border-top: 1px solid #eee;
    }

    /* ลูกศรชี้ลง แล้วหมุนกลับตอนเปิด */
    .mega-dropdown-menu .submenu-btn i {
        display: inline-block;
        transform: rotate(90deg);
    }

    .mega-dropdown-menu > li.has-sub.sub-open > .submenu-btn i {
        transform: rotate(-90deg);
    }
}