@import 'base/_variables.css';
@import 'components/_buttons.css';
@import 'components/_modals.css';
@import 'layout/_header.css';
@import 'layout/_sidebar.css';
/* Tùy chỉnh Fancybox */
:root {
    --fancybox-accent-color: #0046ba; /* Màu chủ đạo của web */
}

/* Hiệu ứng hover cho thẻ Card bài viết */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
    }

/* Hiệu ứng zoom ảnh khi hover */
.zoom-img {
    transition: transform 0.5s ease;
}

.hover-card:hover .zoom-img {
    transform: scale(1.05);
}

/* Cắt dòng text quá dài (Line Clamp) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Màu hover cho link danh mục */
.hover-primary:hover {
    color: #0d6efd !important; /* Bootstrap Primary Color */
    padding-left: 5px;
    transition: all 0.2s;
}


/* Nền backdrop tối hơn chút cho sang */
.fancybox__backdrop {
    background: rgba(11, 17, 32, 0.95);
}

/* Chỉnh màu thanh thumbnail */
.fancybox__thumbs {
    background: #fff;
}

/* Chỉnh viền ảnh thumb đang chọn */
.fancybox__thumb.is-selected {
    border-color: var(--fancybox-accent-color);
}

/* Chỉnh màu nút bấm */
.fancybox__toolbar {
    --f-button-color: #fff;
    --f-button-hover-color: var(--fancybox-accent-color);
    --f-button-bg: rgba(0,0,0,0.2);
    --f-button-hover-bg: #fff;
}

/* Caption (Chú thích ảnh) */
.fancybox__caption {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}