/* กฎพื้นฐานเพื่อให้เว็บดูสะอาด */
body {
    background: radial-gradient(circle at top right, #1a0b12, #0f0f0f);
    min-height: 100vh;
    overflow-x: hidden;
}

/* 1. ปรับ Card ให้ดู Soft แต่ Edgy (Glassmorphism) */
.post-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 40px -15px rgba(0,0,0,0.6);
}

.post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 95, 162, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

/* 2. Glow Text ที่ไม่สว่างจนแสบตา */
.glow-text {
    background: linear-gradient(to right, #ff5fa2, #ffb2d5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 95, 162, 0.4));
}

/* 3. Animations ที่ดูลื่นขึ้น */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: scale(0.98) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-in {
    animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 4. จัดการ Scrollbar (ซ่อนแต่ยังเลื่อนได้ และเนียนตา) */
.custom-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.custom-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 5. ปุ่มหมวดหมู่ตอนเลือก */
.cat-btn {
    transition: all 0.2s ease;
}
.cat-btn.active {
    background: #ff5fa2 !important;
    color: white !important;
    border-color: #ff5fa2 !important;
    box-shadow: 0 4px 15px rgba(255, 95, 162, 0.4);
}

/* 6. ตัวปรับระยะ PostFeed */
#postFeed {
    padding-bottom: 120px;
}
/* --- ส่วนที่เพิ่มใหม่ --- */

/* สไตล์ Hashtag */
.hashtag {
    color: #ff5fa2;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 95, 162, 0.4);
    cursor: pointer;
    transition: all 0.2s;
}
.hashtag:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(255, 95, 162, 0.8);
}

/* ป้องกันการกระตุกของรูปภาพและไอคอน */
button {
    touch-action: manipulation; /* ช่วยให้กดบนมือถือง่ายขึ้น */
}