/*
 * CSS of taxonomy-real_cat.php, moved verbatim from its inline <style> blocks, in source order.
 * Loaded by kosmos_page_template_css (functions/actions.php).
 */

/* taxonomy-real_cat.php, <style> at line 175 */
    /* ==============================
       Reset & Variables
    ================================ */
    .real-project-wrap *, .real-project-wrap *::before, .real-project-wrap *::after {
        box-sizing: border-box;
    }

    :root {
        --red: #e8192c;
        --red-dark: #c8101f;
        --text: #1a1a1a;
        --text-light: #666;
        --text-muted: #999;
        --border: #e8e8e8;
        --bg: #f7f7f5;
        --white: #ffffff;
        --badge-new: #00b894;
        --badge-hot: #f39c12;
        --radius: 14px;
        --shadow: 0 2px 16px rgba(0,0,0,0.08);
        --shadow-hover: 0 8px 32px rgba(0,0,0,0.14);
    }

    /* ==============================
       Section 1 – Banner
    ================================ */
    .section.prod_1 {
        position: relative;
    }

    .prod_1 .cont .content p {
        margin-bottom: 0;
        color: #fff;
    }

    .section.prod_1 .banner-wrap {
        display: block;
        width: 100%;
        line-height: 0;
    }

    .section.prod_1 .banner-wrap img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .section.prod_1 .cont {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 15px;
        text-align: center;
    }

    .section.prod_1 .cont .title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #fff;
    }

    .section.prod_1 .cont .content {
        font-size: 16px;
        line-height: 1.6;
        color: #666;
    }

    /* ==============================
       Section Filter – Top Category Bar
    ================================ */
    .section-filter {
        padding: 30px 0 10px;
        background-color: #eeeeee;
    }

    .section-filter .grid-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .category-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .cat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        min-width: 160px;
        border: 1px solid #cfcfcf;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: #333;
        background: #f5f5f5;
        transition: all .2s ease;
        cursor: pointer;
        text-transform: uppercase;
    }

    .cat-item span {
        margin-left: 10px;
        font-weight: 500;
    }

    .cat-item:hover {
        background: #e31937;
        border-color: #fff;
        color: #fff;
        text-decoration: none;
    }

    .cat-item.active {
        background: #e31937;
        border-color: #fff;
        color: #fff;
    }

    .cat-item.active span {
        color: #fff;
    }

    /* ==============================
       Main Layout: Sidebar + Cards
    ================================ */
    .real-project-wrap {
        font-family: 'Be Vietnam Pro', sans-serif;
    }

    .real-project-wrap .rp-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 30px 0px 30px;
    }

    .real-project-wrap .rp-layout {
        display: grid;
        grid-template-columns: 268px 1fr;
        gap: 28px;
        align-items: start;
    }

    /* ===== SIDEBAR ===== */
    .rp-sidebar {
        background: var(--white);
        border-radius: var(--radius);
        padding: 18px 0px;
        position: sticky;
        top: 100px;
    }

    .filter-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 14px;
        letter-spacing: 0.02em;
    }

    .filter-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
    }

    .filter-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 6px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s;
        user-select: none;
    }

    /*
    .filter-item:hover {
        background: #fff0f1;
    }

    .filter-item.active {
        background: #fff0f1;
    }*/

    .filter-item input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border: 2px solid #ccc;
        border-radius: 3px;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.15s;
        position: relative;
        margin: 0;
    }

    .filter-item input[type="checkbox"]:checked {
        background: var(--red);
        border-color: var(--red);
    }

    .filter-item input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        left: 2px;
        top: -1px;
        width: 7px;
        height: 10px;
        border: 2px solid #fff;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }

    .filter-label {
        font-size: 13.5px;
        color: var(--text);
        flex: 1;
        cursor: pointer;
    }

    .filter-count {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 400;
    }

    /* Sub items (indented) */
    .filter-sub {
        padding-left: 22px;
    }

    .filter-sub .filter-item {
        padding: 4px 6px;
    }

    .filter-sub .filter-label {
        font-size: 13px;
        color: var(--text-light);
    }

    /* ===== CARDS GRID ===== */
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    /* ===== CARD ===== */
    .card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: box-shadow 0.25s, transform 0.25s;
        cursor: pointer;
        position: relative;
    }

    .card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-3px);
    }

    .card-action svg {
        width: 16px;
        height: 16px;
        color: var(--text);
    }
    
    .card-action {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        transition: background 0.15s;
    }

    .card-link-wrap {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .card-image-wrap {
        position: relative;
        overflow: hidden;
        /*aspect-ratio: 4/3;*/
    }

    .card-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .card:hover .card-image-wrap img {
        transform: scale(1.04);
    }

    /* Badge top-left */
    .badge-main {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 4px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        z-index: 2;
    }

    /* Before/After toggle */
    .before-after {
        position: absolute;
        bottom: 10px;
        left: 10px;
        display: flex;
        border-radius: 6px;
        overflow: hidden;
        z-index: 2;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ba-btn {
        padding: 4px 10px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .ba-btn.active {
        background: var(--red);
        color: #fff;
    }

    .ba-btn.inactive {
        background: rgba(255,255,255,0.88);
        color: var(--text);
    }

    /* Card body */
    .card-body {
        padding: 14px 16px 16px;
    }

    .card-subtitle {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .card-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .card-desc {
        font-size: 13px;
        color: var(--text-light);
        line-height: 1.55;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Tags */
    .card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;    
        justify-content: space-between;
    }


    .card-tags > * {
        flex: 1;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--text);
        background: #f3f3f1;
        border-radius: 8px;
        padding: 4px 10px;
        border: 1px solid var(--border);
    }

    .tag svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    /* Tag colors based on SVG icon colors */
    /* Purple - #8a2be2 */
    .tag.tag-tham-my,
    .tag.tag-bao-hanh,
    .tag.tag-dien-tich {
        background: #f3e8ff;
        border-color: #d8b4fe;
        color: #7e22ce;
    }

    /* Sienna/Brown */
    .tag.tag-chong-moi {
        background: #fef3e2;
        border-color: #f5d0a9;
        color: #a0522d;
    }

    /* Dark Orange - #ff8c00 */
    .tag.tag-de-lap,
    .tag.tag-uon-cong,
    .tag.tag-chong-tray {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #c2410c;
    }

    /* Medium Sea Green - #43cd80 */
    .tag.tag-ve-sinh,
    .tag.tag-eco-friendly {
        background: #f0fdf4;
        border-color: #86efac;
        color: #15803d;
    }

    /* Golden/Orange - #ecab53 */
    .tag.tag-ben-bi,
    .tag.tag-chiu-nang {
        background: #fffbeb;
        border-color: #fcd34d;
        color: #b45309;
    }

    /* Dodger Blue - #1e90ff */
    .tag.tag-chiu-mua,
    .tag.tag-chiu-nuoc,
    .tag.tag-chong-tham {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

    /* Firebrick Red - #c82e31 */
    .tag.tag-chong-nong,
    .tag.tag-chong-chay-lan,
    .tag.tag-vi-tri,
    .tag.tag-chong-uon-cong {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #b91c1c;
    }

    /* Default for tags without SVG (chong-cong-venh) */
    .tag.tag-chong-cong-venh {
        background: #f3f3f1;
        border-color: #e8e8e8;
        color: #1a1a1a;
    }

    /* Meta row */
    .card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        margin-bottom: 12px;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12.5px;
        color: var(--text-light);
    }

    .meta-item svg {
        width: 14px;
        height: 14px;
        color: var(--red);
    }

    /* CTA */
    .card-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 9px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        background: transparent;
        cursor: pointer;
        letter-spacing: 0.04em;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
        text-transform: uppercase;
        text-decoration: none;
    }

    .card-cta:hover {
        border-color: var(--red);
        color: var(--red);
        background: #fff0f1;
        text-decoration: none;
    }

    .card-cta svg {
        width: 15px;
        height: 15px;
        transition: transform 0.2s;
    }

    .card-cta:hover svg {
        transform: translateX(3px);
    }

    /* ===== LOAD MORE ===== */
    .load-more-wrap {
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

    .btn-load-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--red);
        color: #fff;
        font-family: 'Be Vietnam Pro', sans-serif;
        font-size: 15px;
        font-weight: 700;
        padding: 14px 40px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        letter-spacing: 0.04em;
        box-shadow: 0 4px 20px rgba(232,25,44,0.35);
        transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    }

    .btn-load-more:hover {
        background: var(--red-dark);
        box-shadow: 0 6px 28px rgba(232,25,44,0.45);
        transform: translateY(-1px);
    }

    .btn-load-more svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s;
    }

    .btn-load-more:hover svg {
        transform: translateY(2px);
    }

    .btn-load-more.loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .btn-load-more.loading svg {
        animation: spin 0.8s linear infinite;
    }

    /* GG Drive redirect state */
    .btn-load-more.btn-gg-drive {
        background: var(--red);
        box-shadow: 0 4px 20px rgba(37,99,235,0.35);
    }

    .btn-load-more.btn-gg-drive:hover {
        background: var(--red);
        box-shadow: 0 6px 28px rgba(37,99,235,0.45);
        transform: translateY(-1px);
    }

    .btn-load-more.btn-gg-drive:hover svg {
        transform: translateX(3px);
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* No results */
    .no-results {
        grid-column: 1 / -1;
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
        font-size: 16px;
    }
.rp-layout.no-sidebar {
    grid-template-columns: 1fr;
}
    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
        .cards-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 900px) {
        .real-project-wrap .rp-layout {
            grid-template-columns: 1fr;
        }

        .rp-sidebar {
            position: static;
        }
    }

    @media (max-width: 580px) {
        .cards-grid {
            grid-template-columns: 1fr;
        }

        .section.prod_1 .cont .title {
            font-size: 24px;
        }
    }