body {
            padding-top: 80px;
            /* เผื่อที่ให้ navbar fixed-top */
            background: #fbf4f5;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Sarabun", sans-serif;
        }

        .navbar {
            backdrop-filter: blur(10px);
        }

        .navbar-brand span {
            font-size: 0.8rem;
            font-weight: 500;
        }

        .brand-badge {
            font-size: 0.65rem;
            letter-spacing: 0.08em;
        }

        .hero-card {
            border: 0;
            border-radius: 0rem;
            background: linear-gradient(135deg, rgb(116, 4, 19), rgb(218, 128, 140));
            color: #fff;
            box-shadow: 0 18px 45px rgba(185, 27, 41, 0.267);
            overflow: hidden;
        }

        .hero-badge {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 999px;
            padding: 0.35rem 0.9rem;
            font-size: 0.8rem;
        }

        .hero-year-badge {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            padding: 0.3rem 0.8rem;
            font-size: 0.75rem;
        }

        .hero-card h1 {
            font-weight: 700;
        }

        .hero-card p.lead {
            font-size: 0.98rem;
            opacity: 0.95;
        }

        .hero-illustration {
            opacity: 0.15;
            font-size: 6rem;
        }

        .section-title {
            font-weight: 700;
            font-size: 20px;
        }

        .section-subtitle {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .card-step {
            border-radius: 1.25rem;
            transition: all 0.15s ease-in-out;
        }

        .card-step:hover {
            transform: translateY(-4px);
            box-shadow: 0 0.75rem 2.5rem rgba(15, 23, 42, 0.12);
        }

        .step-number {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: #fff;
            font-size: 1rem;
        }

        .btn-step {
            font-size: 0.85rem;
            border-radius: 999px;
            padding-inline: 1rem;
        }

        .info-box {
            background: #ffffff;
            border-radius: 1.25rem;
            border-left: 4px solid rgb(15, 97, 72);
        }

        .info-box ul {
            padding-left: 1.2rem;
            font-size: 0.9rem;
        }

        footer {
            font-size: 0.8rem;
        }

        footer p {
            margin-bottom: 0.15rem;
        }

        /* เปลี่ยนสีตอน hover */
        .dropdown-menu .dropdown-item:hover {
            background-color: #f0f0f0 !important;
            /* สีเทาอ่อน */
            color: #000 !important;
        }

        /* เปลี่ยนสีตอน active (ตอนคลิก) */
        .dropdown-menu .dropdown-item:active {
            background-color: #ffe082 !important;
            /* สีเหลืองอ่อน */
            color: #000 !important;
        }

        .btn-lg-custom {
            padding: 0.75rem 1.5rem;      /* สูงขึ้น + กว้างขึ้น */
            font-size: 1rem;              /* ขยายตัวอักษร */
            border-radius: 999px;         /* วงรีสวย */
        }
        .back-btn.active {
            background-color: #13915c !important;
            color: #fff !important;
            border-color: #13915c !important;
        }
        .back-btn.active i {
            color: #fff !important;
        }