:root {
            --yellow: #F5C400;
            --yellow-light: #FFF8E1;
            --dark: #1a1a1a;
            --bs-font-sans-serif: 'Kanit', sans-serif;
        }

        body {
            font-family: 'Kanit', sans-serif;
        }

        
        /* เฉพาะ CSS ที่ Bootstrap utility ทำไม่ได้ */

        /* Navbar */
        .top-navbar {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }

        .brand-icon {
            background: var(--yellow);
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }

        .nav-link:hover {
            background: var(--yellow-light) !important;
            border-radius: 20px;
        }

        .btn-apply {
            background: var(--yellow) !important;
        }

        /* Hero */
        .hero-section {
            background: url('img/banner.png') center/cover no-repeat;
            min-height: 520px;
        }

        .hero-wave {
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 90px;
            background: #fff;
            border-radius: 50% 50% 0 0 / 60px 60px 0 0;
        }

        .hero-badge {
            background: rgba(0, 0, 0, 0.1);
        }

        /* Float animation */
        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        .hero-emoji {
            position: absolute;
            font-size: 38px;
            animation: float 3s ease-in-out infinite;
        }

        .e1 {
            top: 8%;
            left: 0%;
            animation-delay: 0s;
        }

        .e2 {
            top: 15%;
            right: -2%;
            animation-delay: .5s;
        }

        .e3 {
            bottom: 25%;
            left: -3%;
            animation-delay: 1s;
        }

        /* Icon nav */
        .icon-nav-item {
            transition: transform .2s;
        }

        .icon-nav-item:hover {
            transform: translateY(-4px);
        }

        .icon-box {
            width: 56px;
            height: 56px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Branch timeline divider */
        @media (min-width: 768px) {
            .section-divider::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 0;
                bottom: 0;
                width: 3px;
                background: linear-gradient(to bottom, transparent, var(--yellow) 20%, var(--yellow) 80%, transparent);
                transform: translateX(-50%);
                border-radius: 2px;
                z-index: 0;
            }
        }

        .branch-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--yellow);
            border: 4px solid #fff;
            box-shadow: 0 0 0 3px var(--yellow);
            z-index: 2;
        }

        /* Branch card overlay */
        .branch-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 50px 18px 14px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
            color: #fff;
            font-size: 13px;
            font-weight: 500;
        }

        /* Lifestyle waves */
        .lifestyle-section {
            background: linear-gradient(180deg, #fffde0 0%, var(--yellow) 15%, var(--yellow) 85%, #fffde0 100%);
        }

        .lifestyle-section::before {
            content: '';
            position: absolute;
            top: -30px;
            left: 0;
            right: 0;
            height: 80px;
            background: #fff;
            border-radius: 0 0 50% 50% / 0 0 80px 80px;
        }

        .lifestyle-section::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 90px;
            background: rgb(248 247 250) !important;
            border-radius: 50% 50% 0 0 / 80px 80px 0 0;
        }

        /* Footer */
        .foot-links li a {
            color: #888;
            text-decoration: none;
            font-size: 13px;
            transition: color .2s;
        }

        .foot-links li a:hover {
            color: var(--yellow);
        }

        .social-icons a {
            color: #888;
            font-size: 22px;
            transition: color .2s;
        }

        .social-icons a:hover {
            color: var(--yellow);
        }

        .footer-bottom {
            border-top: 1px solid #2e2e2e;
        }

        .footer-icon {
            background: var(--yellow);
            width: 46px;
            height: 46px;
            border-radius: 12px;
        }

        .site-footer h6 {
            border-bottom: 2px solid var(--yellow);
            display: inline-block;
        }