@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap');

        :root {
            --nav-pad-y: 12px;
            --nav-pad-x: 40px;
            --logo-h: 80px;
            --logo-h-scrolled: 56px;
            --transition: 260ms cubic-bezier(.22, .61, .36, 1);
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: "Kanit", sans-serif;
            font-weight: 400;
            min-height: 200vh;
            background: linear-gradient(180deg, #fff 0, #f8fafc 40%, #eef2f7 100%);
        }

        /* ===== Navbar: ตรึงบนสุด, 3 คอลัมน์ (โลโก้ | เมนู | ค้นหา) ===== */
        nav#navbar {
            position: sticky;
            top: 0;
            z-index: 1000;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 35px;
            padding: var(--nav-pad-y) var(--nav-pad-x);
            background: rgba(255, 255, 255, .9);
            transition: padding var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
            backdrop-filter: none;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        }

        /* แค่ย่อ+เงา เบา ๆ */
        nav#navbar.scrolled {
            padding: 8px 28px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        }

        /* โลโก้ซ้าย */
        .logo {
            justify-self: start;
        }

        .logo img {
            height: 60px;
            transition: height var(--transition);
        }

        #navbar.scrolled .logo img {
            height: var(--logo-h-scrolled);
        }

        /* เมนู: ซ้ายตลอด ไม่ย้ายที่ */
        .nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 32px;
            align-items: center;
            justify-self: start;
            /* << ซ้ายตลอด */
        }

        .nav-links a {
            text-decoration: none;
            color: #000;
            font-size: 18px;
            white-space: nowrap;
            transition: color 160ms ease;
        }

        .nav-links a:hover {
            color: #ff066c;
        }

        /* ค้นหาขวาสุด */
        .search-box {
            justify-self: end;
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 999px;
            padding: 4px 10px;
            border: 1px solid rgba(59, 58, 58, .3);
            position: relative;
            transition: border-color var(--transition), background var(--transition);
        }

        #navbar.scrolled .search-box {
            background: rgba(255, 255, 255, .95);
            border-color: rgba(59, 58, 58, .2);
        }

        .search-box input {
            border: none;
            outline: none;
            background: transparent;
            padding: 8px 32px 8px 10px;
            border-radius: 999px;
            font-family: "Kanit", sans-serif;
            width: 220px;
        }

        .search-box button {
            background: #ff066c;
            color: #fff;
            border: none;
            padding: 8px 12px;
            margin-left: 6px;
            border-radius: 999px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .clear-btn {
            position: absolute;
            right: 74px;
            line-height: 1;
            cursor: pointer;
            font-size: 16px;
            color: #999;
            display: none;
            user-select: none;
        }

        /* Responsive เล็กน้อย */
        @media (max-width: 940px) {
            .nav-links {
                gap: 18px;
            }

            .nav-links a {
                font-size: 16px;
            }

            .search-box input {
                width: 170px;
            }
        }

        @media (max-width: 640px) {
            .nav-links {
                overflow: auto hidden;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .nav-links::-webkit-scrollbar {
                display: none;
            }

            .search-box input {
                width: 120px;
            }

            .clear-btn {
                right: 66px;
            }
        }