:root {
    --fj-black: #0b0c0d;
    --fj-white: #fff;
    --fj-viridian: #518F7A;
    --fj-gold: #c7a740;
    --fj-gray-900: #0f1113;
    --fj-gray-700: #374151;
    --fj-gray-500: #6b7280;
    --fj-gray-200: #e5e7eb;
    --fj-gray-100: #f3f4f6;
}

html,
body {
    font-family: 'Sarabun', 'Noto Sans Khmer', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
    background: var(--fj-gray-100);
    color: #111827;
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
    touch-action: manipulation; /* กัน gesture แปลก ๆ */
}

.safe-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), .75rem)
}

.safe-top {
    padding-top: max(env(safe-area-inset-top), .25rem)
}

.card {
    transition: transform .18s ease, box-shadow .18s ease
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08)
}

.glass {
    backdrop-filter: saturate(140%) blur(10px)
}

.ptr::before {
    content: "";
    display: block;
    height: 6px;
    width: 56px;
    background: #e5e7eb;
    border-radius: 999px;
    margin: .5rem auto
}

.nav-active {
    color: var(--fj-viridian)
}

/* .pulse-fjj {
    position: relative
}

.pulse-fjj::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    border: 2px solid rgba(81, 143, 122, .35);
    animation: pulse-fjj 1.6s infinite;
}


@keyframes pulse-fjj  {
    0% {
        transform: scale(.95);
        opacity: 1
    }

    100% {
        transform: scale(1.15);
        opacity: 0
    }
} */

.gold-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fj-gold), transparent)
}

* {
    -webkit-tap-highlight-color: transparent
}

@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0
    }

    60% {
        transform: scale(1.2);
        opacity: 1
    }

    100% {
        transform: scale(1)
    }
}

.badge-animate {
    animation: badgePop .4s ease-out
}

.bg-brand-grad {
    background: linear-gradient(145deg, var(--fj-viridian), #3c6f5f)
}

/* เพิ่ม focus ที่มองเห็นง่าย */
:focus-visible {
    outline: 3px solid var(--fj-viridian);
    outline-offset: 2px;
    border-radius: .5rem
}

/* กัน layout shift ส่วน header */
header .max-w-md {
    min-height: 48px;
}

/* ลด motion เมื่อผู้ใช้ตั้งค่า reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pulse::after {
        animation: none
    }
}

button,
a {
    touch-action: manipulation
}

#loadingOverlay.show {
    display: flex;
    animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}