/* === CẤU HÌNH BIẾN MÀU SẮC (THEME) === */
:root {
    /* Chế độ Sáng */
    --neo-black: #121212;
    --neo-white: #e6e3dd;
    --neo-shadow: #121212;
    --bg-pattern: #e6e3dd;
}

/* Chế độ Tối */
.dark {
    --neo-black: #e6e3dd;
    --neo-white: #1d1a1a;
    --neo-shadow: #e6e3dd;
    --bg-pattern: #2b2828; 
}

/* === CẤU HÌNH CHUNG === */
.bg-dots {
    background-color: var(--bg-pattern);
    background-image: radial-gradient(var(--neo-black) 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background-color 0.3s ease;
}

body {
    background-color: var(--bg-pattern);
    /* Giảm kích thước ảnh nền để load nhanh hơn nếu cần */
}

/* === CÁC CLASS TIỆN ÍCH (UTILITIES) === */
.neo-box {
    border: 3px solid var(--neo-black);
    box-shadow: 5px 5px 0px 0px var(--neo-shadow);
    transition: all 0.2s ease;
}

.neo-button {
    border: 3px solid var(--neo-black);
    box-shadow: 4px 4px 0px 0px var(--neo-shadow);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    /* Ngăn user bôi đen text trong nút */
    user-select: none; 
}

.neo-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px 0px var(--neo-shadow);
}

.neo-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px 0px transparent;
}

/* === SEARCH STYLES === */
.search-input {
    border: 4px solid var(--neo-black);
    background-color: var(--neo-white);
    color: var(--neo-black);
    box-shadow: 4px 4px 0px 0px var(--neo-shadow);
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    box-shadow: 6px 6px 0px 0px var(--neo-shadow);
    transform: translate(-2px, -2px);
}

/* === ANIMATION === */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in {
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* === TYPOGRAPHY BÀI VIẾT (Giữ nguyên cho các trang detail sau này) === */
.article-content {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75;
}