/* =========================
   SCROLL MENU
========================= */
.scroll-menu {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* ลื่นบน iOS */
    scrollbar-width: none; /* Firefox ซ่อน scrollbar */
    scroll-snap-type: x mandatory; /* snap item */
}

/* ซ่อน scrollbar บน Chrome, Edge */
.scroll-menu::-webkit-scrollbar {
    display: none;
}

/* =========================
   MENU LIST
========================= */
.scroll-menu-list {
    display: inline-flex;
    gap: 10px;
    padding: 10px 15px;
    list-style: none;
}

/* =========================
   ITEM
========================= */
.scroll-menu-list li {
    flex: 0 0 auto; /* ห้าม item ยืด */
    scroll-snap-align: start; /* snap start */
}

/* =========================
   LINK
========================= */
.scroll-menu-list li a {
    display: block;
    padding: 8px 16px;
    background: #111;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s, color 0.25s;
}

/* HOVER */
.scroll-menu-list li a:hover {
    background: #ff4d6d;
    color: #fff;
}

/* ACTIVE */
.scroll-menu-list li.current-menu-item a {
    background: red;
    color: #fff;
}

/* เฉพาะมือถือ */
@media (max-width: 768px) {
	
	.scroll-menu-list {
    position: relative;
    z-index: 1;
}
	
    /* เงาซ้าย */
    .scroll-menu::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 100%;
        background: linear-gradient(to right, #0a0a0f, transparent);
        z-index: 5;
        pointer-events: none;
    }

    /* เงาขวา */
    .scroll-menu::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 100%;
        background: linear-gradient(to left, #0a0a0f, transparent);
        z-index: 5;
        pointer-events: none;
    }
}