/* =========================================
   1. GLOBAL SCROLLBAR (DARK MODE SUPPORT)
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Dark Mode Scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b; /* Slate-800 */
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569; /* Slate-600 */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* Slate-500 */
}

/* =========================================
   2. SWIPER SLIDER CUSTOMIZATION
   ========================================= */
.at-hero-swiper {
    padding-bottom: 40px !important; /* Chừa chỗ cho pagination */
}

.at-hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    width: 8px;
    height: 8px;
    transition: all 0.3s;
}

.at-hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
    background: #f97316; /* Primary Orange */
}

/* Hiệu ứng bóng mờ cho text trên slider */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.text-shadow-md {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* =========================================
   3. DARK MODE TRANSITIONS
   ========================================= */
body, header, footer, .card, .input, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}



/* Heart Button Animation */
.js-follow-btn i {
    transition: color 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.js-follow-btn.followed i {
    color: #ef4444; /* Red-500 (Màu đỏ trái tim) */
}

.js-follow-btn:active i {
    transform: scale(1.2); /* Hiệu ứng "đập" nhẹ khi click */
}

.dark .js-follow-btn.followed i {
    color: #f87171; /* Red-400 (Đỏ sáng hơn cho chế độ tối) */
}

/* ẨN TRIỆT ĐỂ NÚT TRẢ LỜI & SỬA BÌNH LUẬN
   Sử dụng !important và nhiều selector để đảm bảo override mọi style khác.
*/
.comment-reply-link,
.comment-edit-link,
.reply,
a.comment-edit-link,
a.comment-reply-link,
.comment-list .reply,
.comment-list .edit-link,
.comments-area .reply,
.comments-area .comment-edit-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}


/* Heart Button Animation */
.js-follow-btn i {
    transition: color 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.js-follow-btn.followed i {
    color: #ef4444; /* Red-500 (Màu đỏ trái tim) */
}

.js-follow-btn:active i {
    transform: scale(1.2); /* Hiệu ứng "đập" nhẹ khi click */
}

.dark .js-follow-btn.followed i {
    color: #f87171; /* Red-400 (Đỏ sáng hơn cho chế độ tối) */
}

/* ẨN TRIỆT ĐỂ NÚT TRẢ LỜI & SỬA BÌNH LUẬN
   Sử dụng !important và nhiều selector để đảm bảo override mọi style khác.
*/
.comment-reply-link,
.comment-edit-link,
.reply,
a.comment-edit-link,
a.comment-reply-link,
.comment-list .reply,
.comment-list .edit-link,
.comments-area .reply,
.comments-area .comment-edit-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* =========================================
   4. PAGINATION STYLES (PHÂN TRANG)
   ========================================= */
.navigation.pagination {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.navigation.pagination h2 {
    display: none; /* Ẩn tiêu đề screen reader */
}

.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Style chung cho các nút */
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px; /* Bo góc mềm mại */
    font-weight: 600;
    font-size: 14px;
    color: #64748b; /* Slate-500 */
    background-color: transparent;
    border: 1px solid transparent; /* Border ẩn để tránh nhảy layout khi hover */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    line-height: 1;
}

/* Hover State */
.navigation.pagination a.page-numbers:hover {
    color: #f97316; /* Primary Orange */
    background-color: #fff7ed; /* Orange-50 */
    border-color: #ffedd5; /* Orange-100 */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1);
}

/* Active / Current Page */
.navigation.pagination .page-numbers.current {
    background-color: #f97316; /* Primary */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
    border-color: #f97316;
    pointer-events: none; /* Không click được trang hiện tại */
}

/* Dots (...) */
.navigation.pagination .page-numbers.dots {
    min-width: auto;
    border: none;
    background: transparent;
    color: #94a3b8; /* Slate-400 */
    letter-spacing: 2px;
}

/* Icons (Next/Prev) */
.navigation.pagination .page-numbers i {
    font-size: 14px;
}

/* --- DARK MODE PAGINATION --- */
.dark .navigation.pagination .page-numbers {
    color: #94a3b8; /* Slate-400 */
}

.dark .navigation.pagination a.page-numbers:hover {
    color: #f97316;
    background-color: #1e293b; /* Slate-800 */
    border-color: #334155; /* Slate-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark .navigation.pagination .page-numbers.current {
    background-color: #f97316;
    color: #ffffff;
    border-color: #f97316;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}