/**
 * Khối Slide item — CSS tự chứa, dùng được ở mọi theme.
 *
 * Không đụng tới class của theme (about__item, owl-carousel...) để tránh xung đột.
 * Màu bám theo biến --primary-color của theme; theme nào không khai thì rơi về màu mặc định.
 */
.sl-block {
    --sl-primary: var(--primary-color, #1a4b8c);
    --sl-radius: 12px;
    --sl-gap: 24px;
    --sl-cols: 4;
}

.sl-block__head {
    margin-bottom: 28px;
}

.sl-block__head h2 {
    font-weight: 700;
    margin: 0 0 10px;
}

.sl-block__head p {
    margin: 0;
    color: #6b7280;
    max-width: 900px;
}

/* ── Slider ───────────────────────────────────────────────────────────────── */

.sl-slider {
    position: relative;
}

.sl-slider__viewport {
    overflow: hidden;
}

.sl-slider__track {
    display: flex;
    gap: var(--sl-gap);
    transition: transform 0.45s ease;
    will-change: transform;
}

.sl-slider__item {
    /* mỗi item chiếm 1/cols, trừ phần gap chia đều */
    flex: 0 0 calc((100% - (var(--sl-cols) - 1) * var(--sl-gap)) / var(--sl-cols));
    max-width: calc((100% - (var(--sl-cols) - 1) * var(--sl-gap)) / var(--sl-cols));
}

/* Nút điều hướng */
.sl-slider__nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: all .2s;
}

.sl-slider__nav:hover {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: #fff;
}

.sl-slider__nav[disabled] {
    opacity: .35;
    cursor: default;
}

.sl-slider__nav[disabled]:hover {
    background: #fff;
    border-color: #e5e7eb;
    color: #374151;
}

.sl-slider__nav--prev {
    left: -18px;
}

.sl-slider__nav--next {
    right: -18px;
}

.sl-slider__nav.is-hidden {
    display: none;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

/* Cùng biến --sl-cols với slider nên số cột đổi theo breakpoint y hệt nhau */
.sl-grid {
    display: grid;
    grid-template-columns: repeat(var(--sl-cols), minmax(0, 1fr));
    gap: var(--sl-gap);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.sl-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: var(--sl-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s, transform .25s;
}

a.sl-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

.sl-card__thumb {
    position: relative;
    padding-top: 66%; /* 3:2 */
    background: #f3f4f6;
}

.sl-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-card__body {
    padding: 18px 20px 22px;
}

.sl-card__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
}

.sl-card__desc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 14px;
}

.sl-card__desc-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c4c8ce;
}

.sl-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-card__tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sl-primary);
    background: #eef3fa; /* fallback cho trình duyệt chưa hỗ trợ color-mix */
    background: color-mix(in srgb, var(--sl-primary) 12%, #fff);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .sl-block { --sl-cols: 3; }
}

@media (max-width: 991px) {
    .sl-block { --sl-cols: 2; }
}

@media (max-width: 575px) {
    .sl-block {
        --sl-cols: 1;
        --sl-gap: 16px;
    }

    .sl-slider__nav--prev { left: 4px; }
    .sl-slider__nav--next { right: 4px; }
}