/* ================================================
   Title With Category Plugin — Flatsome Compatible
   Khớp bản thiết kế: Tiêu đề | Pills | --- | Tất cả
   ================================================ */

/* Bao ngoài: reset margin của flatsome section-title-container */
.title-with-cat-container {
    margin-bottom: 0;
    padding: 0;
}

/* Row chính: dùng flexbox, border dưới = đường kẻ xám */
.title-with-cat-container .section-title {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    border: none;
    position: relative;
}

/* Override Flatsome default section-title pseudo-elements */
.title-with-cat-container .section-title::before,
.title-with-cat-container .section-title::after {
    display: none !important;
}

/* <b> dùng làm spacer (flex-grow để đẩy "Tất cả" sang phải) */
.title-with-cat-container .section-title>b {
    flex: 1 1 auto;
    min-width: 12px;
    display: block;
    height: 0;
    background: none;
    border: none;
}

/* ---- Tiêu đề chính ---- */
.title-with-cat-container .section-title-main {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
    display: inline-block;
    /* Gạch đỏ chỉ dưới chữ tiêu đề, không kéo dài */
    border-bottom: none;
    padding-bottom: 8px;
    margin-right: 14px;
    /* Đẩy border-bottom xuống thêm 2px để đè lên đường kẻ xám */
    margin-bottom: -12px;
}

/* ---- Danh sách category pills ---- */
.title-with-cat-container .section-title-cats {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.title-with-cat-container .section-title-cats li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.title-with-cat-container .section-title-cats li a {
    display: inline-block;
    padding: 4px 14px;
    background-color: #f1f2f4;
    color: #444444;
    font-size: 13px;
    font-weight: 400;
    border-radius: 20px;
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.title-with-cat-container .section-title-cats li a:hover {
    background-color: #8b1d24;
    color: #ffffff;
}

/* ---- Nút "Tất cả ›" ---- */
.title-with-cat-container .section-title>a.title-with-cat-view-all {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: #8b1d24;
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    transition: color 0.2s ease;
}

.title-with-cat-container .section-title>a.title-with-cat-view-all:hover {
    text-decoration: underline;
    color: #a8242c;
}

/* ================================================
   Mobile Responsive (≤ 768px)
   ================================================ */
@media (max-width: 768px) {
    .title-with-cat-container .section-title {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        padding-bottom: 8px;
    }

    /* Dòng 1: Tiêu đề + Nút "Tất cả" */
    .title-with-cat-container .section-title-main {
        font-size: 16px;
        padding-bottom: 6px;
        margin-right: 0;
        flex: 1 1 auto;
    }

    /* Spacer ẩn trên mobile */
    .title-with-cat-container .section-title>b {
        display: none;
    }

    /* "Tất cả" lên dòng 1, canh phải */
    .title-with-cat-container .section-title>a.title-with-cat-view-all {
        margin-left: auto;
        align-self: flex-start;
        padding-top: 2px;
    }

    /* Dòng 2: Pills cuộn ngang */
    .title-with-cat-container .section-title-cats {
        order: 10;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 8px 0 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }

    .title-with-cat-container .section-title-cats::-webkit-scrollbar {
        display: none;
    }
}