body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f1f3f5;
}

h1 {
    font-weight: 700;
    /* Bold */
}

p {
    font-weight: 400;
    /* Regular */
}

.em {
    font-style: italic;
}


/* Theme Colors */
:root {
    --pink: #e83e8c;
    --dark-gray: #343a40;
}

/* Navbar */
.navbar {
    background-color: var(--dark-gray);
}

.navbar-brand span {
    color: var(--pink);
}

.nav-link,
.dropdown-item {
    font-weight: 400;
}

.dropdown-menu {
    border-radius: 0.75rem;
}

.dropdown-item:hover {
    background-color: #f8d7e6;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, #797979, #ff3b95);
    color: #fff;
    padding: 1rem 1rem;
}

/* Card */
.card {
    border-radius: 1rem;
    border: none;
}

.card h4 {
    color: var(--pink);
}

.form-control,
.form-select {
    border-radius: 0.5rem;
}

.btn-pink {
    background-color: var(--pink);
    color: #fff;
}

.btn-pink:hover {
    background-color: #d63384;
}

footer {
    background-color: #fff;
    font-size: 0.9rem;
    color: #6c757d;
}

.navbar-logo {
    height: 40px;
    /* ปรับตามต้องการ */
    width: auto;
    object-fit: contain;
}

.hero-logo-img {
    height: 200px;
    width: auto;
    object-fit: contain;
}

.glow-border {
    filter:
        /* ขอบสีขาว */
        drop-shadow(0 0 1px #fff)
        /* Glow ด้านนอก */
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
}

.popover {
    border-radius: 0.75rem;
    position: absolute;
}

/* จอเล็ก: ให้เรียงบน-ล่างอัตโนมัติ */
@media (max-width: 768px) {
    .hero-logo-img {
        height: 65px;
    }
}