@font-face {
            font-family: 'Sarabun', sans-serif;
        }

        body,
        div,
        p {
            font-family: 'Sarabun', sans-serif;
            font-size: 16px;
        }

        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        /* unvisited link */
        a:link {
            color: #19BBAF;
            text-decoration: none;
        }

        /* visited link */
        a:visited {
            color: #19BBAF;
            text-decoration: none;
        }

        /* mouse over link */
        a:hover {
            color: #19BBAF;
            text-decoration: none;
        }

        /* selected link */
        a:active {
            color: #19BBAF;
            text-decoration: none;
        }

        .btn {
            border: 2px solid black;
            background-color: rgb(255, 255, 255);
            color: #19BBAF;
            border-color: #2c2d2d;
            padding: 8px 8px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 5px;
        }

        .btn:hover {
            background: #19BBAF;
            color: white;
            border-color: #19BBAF;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        /* ===== Modern Responsive + Green Gradient Theme ===== */
        :root {
            --brand-1: #057b30;
            /* emerald-600 */
            --brand-2: #22c55e;
            /* emerald-500 */
            --brand-3: #86efac;
            /* emerald-300 */
            --ink: #0f172a;
        }

        body {
            min-height: 100vh;
            background: radial-gradient(1200px 600px at 20% 10%, rgba(134, 239, 172, .55), transparent 60%),
                radial-gradient(900px 500px at 80% 20%, rgba(34, 197, 94, .35), transparent 55%),
                linear-gradient(135deg, var(--brand-1), var(--brand-2));
            color: var(--ink);
        }

        header .navbar {
            background: linear-gradient(135deg, rgba(6, 78, 59, .92), rgba(6, 78, 59, .92));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(255, 255, 255, .25);
        }

        .page-shell {
            background: rgba(255, 255, 255, .86);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: 1.25rem;
            box-shadow: 0 1.25rem 2.5rem rgba(2, 6, 23, .18);
            padding: 1.25rem;
        }

        @media (min-width: 992px) {
            .page-shell {
                padding: 2rem;
            }
        }

        .card {
            border: 0;
            border-radius: 1.25rem;
            overflow: hidden;
            box-shadow: 0 .75rem 1.5rem rgba(2, 6, 23, .10);
            transition: transform .18s ease, box-shadow .18s ease;
            height: 100%;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 1.25rem 2.5rem rgba(2, 6, 23, .16);
        }

        .card img {
            object-fit: cover;
        }

        .card-text a {
            font-weight: 700;
        }

        .btn {
            border-radius: .9rem;
            font-weight: 600;
        }

        .btn-outline-secondary {
            border-color: rgba(15, 23, 42, .25);
            color: rgba(15, 23, 42, .85);
        }

        .btn-outline-secondary:hover {
            background: rgba(22, 163, 74, .12);
            border-color: rgba(22, 163, 74, .35);
            color: rgba(15, 23, 42, .95);
        }

        a:link,
        a:visited,
        a:hover,
        a:active {
            color: #0f766e;
        }

        .section-title {
            font-weight: 800;
            letter-spacing: -.02em;
        }

        /* Make grid cards truly responsive */
        .row-cols-1>* {
            display: flex;
        }

        /* Footer */
        footer {
            background: rgba(255, 255, 255, .75);
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: 1.25rem;
            padding-inline: 1rem;
        }