/* =============================================
   PRODUCTS SECTION - Clean & Simple
   ============================================= */

.products-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* === PRODUCTS PAGE HERO TYPOGRAPHY (STANDARDIZED) === */
.products-page-hero {
    background: linear-gradient(135deg, #0a3d7a 0%, #0a6bc1 60%, #1a9be8 100%);
    padding: 70px 20px 50px;
}

.products-page-hero__breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
    font-size: 15px;
}

.products-page-hero__breadcrumb .breadcrumb-item,
.products-page-hero__breadcrumb .breadcrumb-item.active {
    color: #ffffff;
}

.products-page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #c8e4fb;
}

.products-page-hero__breadcrumb .breadcrumb-item a {
    color: #90c8f0;
    text-decoration: none;
}

.products-page-hero__breadcrumb .breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.products-page-hero__title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.products-page-hero__subtitle {
    color: #c8e4fb;
    font-size: 18px;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .products-page-hero {
        padding: 52px 16px 34px;
    }

    .products-page-hero__breadcrumb {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .products-page-hero__title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .products-page-hero__subtitle {
        font-size: 14px;
    }
}

/* Section Header */
.section-header {
    text-align: center;
    padding: 22px 20px 16px;
    background: linear-gradient(135deg, rgba(237,244,255,0.80) 0%, rgba(248,251,255,0.50) 60%, rgba(255,255,255,0) 100%);
    border-radius: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(214,232,255,0.70);
}

.products-section .section-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase !important;
    color: #0a6bc1 !important;
    background: transparent !important;
    padding: 6px 18px;
    border-radius: 40px;
    margin: 0 auto 14px auto;
    border: 1.5px solid #0a6bc1 !important;
    box-shadow: none;
    width: fit-content;
}

.products-section .section-title {
    font-size: 35px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 10px 0;
    line-height: 1.2;
    text-transform: uppercase;
    display: block;
}

.products-section .section-title::after {
    display: none;
}

.products-section .section-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Category Filter */
.category-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 20px 0;
}

/* Mobile select — ẩn trên desktop */
.category-filter--select {
    display: none;
    margin-bottom: 24px;
    padding: 0 4px;
}
.category-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #0a6bc1;
    border-radius: 10px;
    background: #fff;
    color: #1a3a5c;
    font-size: 16px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a6bc1' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10,107,193,.12);
}
.category-select:focus {
    outline: none;
    border-color: #0856a0;
    box-shadow: 0 0 0 3px rgba(10,107,193,.2);
}

@media (max-width: 767px) {
    /* Ẩn pills, hiện select */
    .category-filter--pills {
        display: none !important;
    }
    .category-filter--select {
        display: block;
    }
}

.filter-link {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #ddd;
    border-radius: 25px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-link:hover {
    background-color: #0a6bc1 !important;
    border-color: #0a6bc1 !important;
    color: #fff !important;
}

.filter-link.active {
    background-color: #0a6bc1;
    border-color: #0a6bc1;
    color: #fff;
}

/* === PRODUCTS FILTER 3-ROW LAYOUT === */
.products-page .products-filter-shell,
.product-filter-unified.products-filter-shell {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 32px;
    padding-left: 20px;
    padding-right: 20px;
}

.products-page .products-filter-row,
.product-filter-unified .products-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.products-page .products-filter-row--categories,
.product-filter-unified .products-filter-row--categories {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0 8px 6px;
}

.products-page .products-filter-row--categories .filter-link,
.product-filter-unified .products-filter-row--categories .filter-link {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    padding: 7px 16px;
}

.products-page .products-filter-row--brands,
.product-filter-unified .products-filter-row--brands {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 6px;
    background: linear-gradient(90deg, rgba(10, 107, 193, 0.05) 0%, rgba(10, 107, 193, 0.02) 100%);
    border: 1px solid rgba(10, 107, 193, 0.12);
    border-radius: 10px;
    padding: 5px 10px;
    align-items: center;
}

.products-page .products-filter-row--brands .filter-link,
.product-filter-unified .products-filter-row--brands .filter-link {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
    padding: 7px 16px;
}

/* === BRAND LOGO FILTER (SEO + UX) === */
.products-page .products-filter-row--brands .filter-link--brand,
.product-filter-unified .products-filter-row--brands .filter-link--brand {
    min-height: 54px;
    min-width: 110px;
    padding: 2px 4px;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    box-shadow: none;
}

.products-page .products-filter-row--brands .filter-link--brand img,
.product-filter-unified .products-filter-row--brands .filter-link--brand img {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 44px;
    height: auto;
    object-fit: contain;
    transform: scale(1.21);
    transform-origin: center;
}

.products-page .products-filter-row--brands .filter-link--brand:hover,
.products-page .products-filter-row--brands .filter-link--brand.active,
.product-filter-unified .products-filter-row--brands .filter-link--brand:hover,
.product-filter-unified .products-filter-row--brands .filter-link--brand.active {
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

.products-page .products-filter-row--brands .filter-link--brand.active img,
.product-filter-unified .products-filter-row--brands .filter-link--brand.active img {
    filter: drop-shadow(0 0 0.5px #0a6bc1) drop-shadow(0 2px 8px rgba(10, 107, 193, 0.28));
}

.products-page .products-filter-row--brands .brand-logo-text,
.product-filter-unified .products-filter-row--brands .brand-logo-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.products-filter-label {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #1a3a5c;
    min-width: 110px;
}

/* === BRAND REGION FILTER ROW === */
.products-page .products-filter-row--brand-regions,
.product-filter-unified .products-filter-row--brand-regions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    background: rgba(10, 107, 193, 0.03);
    border: 1px solid rgba(10, 107, 193, 0.10);
    border-radius: 10px;
}

.products-page .products-filter-row--brand-regions .filter-link--region,
.product-filter-unified .products-filter-row--brand-regions .filter-link--region {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 16px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    color: #1a3a5c;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.products-page .products-filter-row--brand-regions .filter-link--region:hover,
.products-page .products-filter-row--brand-regions .filter-link--region.active,
.product-filter-unified .products-filter-row--brand-regions .filter-link--region:hover,
.product-filter-unified .products-filter-row--brand-regions .filter-link--region.active {
    border-color: #0a6bc1;
    background: #0a6bc1;
    color: #fff;
}

.products-page .products-filter-row--advanced,
.product-filter-unified .products-filter-row--advanced {
    display: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    gap: 10px;
    padding-bottom: 6px;
}

.products-filter-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 170px;
}

.products-filter-control label {
    font-size: 14px;
    font-weight: 700;
    color: #1a3a5c;
}

.products-filter-control select {
    height: 38px;
    border: 1px solid #cfe1f5;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #1a1a2e;
    background: #fff;
}

.products-filter-control select:focus {
    outline: none;
    border-color: #0a6bc1;
    box-shadow: 0 0 0 3px rgba(10, 107, 193, 0.16);
}

.product-filter-item[hidden] {
    display: none !important;
}

.products-no-result {
    text-align: center;
    padding: 26px 16px 8px;
}

.products-no-result p {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 14px;
}

@media (max-width: 767px) {
    .products-page .products-filter-shell,
    .product-filter-unified.products-filter-shell {
        padding-top: 22px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .products-page .products-filter-row,
    .product-filter-unified .products-filter-row {
        margin-bottom: 10px;
    }

    .products-page .products-filter-row--brands .filter-link,
    .products-page .products-filter-row--categories .filter-link,
    .product-filter-unified .products-filter-row--brands .filter-link,
    .product-filter-unified .products-filter-row--categories .filter-link {
        font-size: 10px;
        padding: 7px 12px;
    }

    .products-page .products-filter-row--brands .filter-link--brand {
        min-width: 86px;
        min-height: 48px;
        padding: 2px 4px;
    }

    .products-page .products-filter-row--brands .filter-link--brand img {
        max-width: 109px;
        max-height: 36px;
    }

    .products-page .products-filter-row--brands .brand-logo-text {
        font-size: 13px;
    }

    .products-filter-control {
        flex-basis: 156px;
    }
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Mobile: 2 cột sản phẩm */
@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-info {
        padding: 10px 10px 12px;
    }
    .product-category-tag {
        font-size: 11px;
        padding: 2px 8px;
        margin-bottom: 5px;
    }
    .product-title {
        font-size: 13px;
        margin-bottom: 5px;
    }
    .product-price {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .product-desc {
        font-size: 12px;
        margin-bottom: 8px;
        -webkit-line-clamp: 2;
    }
    .product-actions {
        gap: 6px;
    }
    .product-link {
        padding: 7px 10px;
        font-size: 12px;
        flex: 1;
        justify-content: center;
    }
    .product-link-outline {
        display: none; /* Ẩn nút phụ để tiết kiệm không gian */
    }
    .product-image img {
        padding: 8px;
    }
    .badge-new,
    .badge-bestseller {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Product Card */
.product-card {
    background: #fff;
    border: 1px solid #dbeafe;
    border-top: 3px solid #0a6bc1;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-top-color 0.28s ease;
    box-shadow: 0 4px 16px rgba(10,107,193,0.10), 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 16px 48px rgba(10,107,193,0.22), 0 4px 16px rgba(10,107,193,0.10);
    transform: translateY(-7px);
    border-top-color: #1a9be8;
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f3f6fb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge overlay on product image */
.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.badge-new {
    display: inline-block;
    padding: 4px 12px;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(34,197,94,0.30);
}

.badge-bestseller {
    display: inline-block;
    padding: 4px 14px;
    background-color: #0a6bc1;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 25px;
    border: 1px solid #0a6bc1;
    letter-spacing: 0;
    box-shadow: none;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* Hiển thị toàn bộ sản phẩm, không crop */
    padding: 16px;              /* Tạo breathing room quanh ảnh sản phẩm */
    transition: transform 0.35s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category tag (e.g. "Máy Lọc Để Bàn") */
.product-category-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #0a6bc1;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 3px 12px;
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
    width: fit-content;
}

.product-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.product-title a {
    color: inherit;
    text-decoration: none;
}

.product-title a:hover {
    color: #0a6bc1;
}

.product-price {
    font-size: 18px;
    color: #0a6bc1;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.product-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc strong {
    color: #1a1a2e;
    font-weight: 700;
}

/* Product action buttons */
.product-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto;
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #0a6bc1;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.product-link:hover {
    background: #084a94;
    color: #fff;
    transform: translateY(-1px);
}

.product-link-outline {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: transparent;
    color: #0a6bc1;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid #0a6bc1;
    transition: all 0.25s ease;
}

.product-link-outline:hover {
    background: #0a6bc1;
    color: #fff;
    transform: translateY(-1px);
}

/* Section Footer */
.section-footer {
    text-align: center;
}

.view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 48px;
    background: linear-gradient(135deg, #0a6bc1, #1a9be8);
    color: #fff;
    text-decoration: none;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(10,107,193,0.30);
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.view-more-btn:hover {
    background: linear-gradient(135deg, #085da8, #0a6bc1);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(10,107,193,0.40);
}

.view-more-btn i {
    margin-left: 8px;
}

/* ── Product type badge (overlay góc dưới-trái của ảnh) ── */
.product-type-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

.badge-category {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.92);
    color: #0a6bc1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    line-height: 1.5;
    border: 1.5px solid #0a6bc1;
    text-decoration: none;   /* when used on <a> tags in detail pages */
}

/* ── Aliases cho may-loc-nuoc.php và các view tương thích ── */
.product-name { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px 0; line-height: 1.35; }
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: #0a6bc1; }
.product-subtitle { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 16px 0; flex: 1; }
.btn-product-detail {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: #0a6bc1;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
    margin-top: auto;
}
.btn-product-detail:hover { background: #084a94; color: #fff; }

/* ════════════════════════════════════════════════════════
   IONIZER PAGE — scoped styles (parent: .ionizer-grid / .ionizer-filter-bar)
   Chỉ ảnh hưởng đến trang máy lọc nước ion kiềm.
   Card base styles (border-radius, shadow…) vẫn từ .product-card gốc.
   ════════════════════════════════════════════════════════ */

/* Ionizer grid layout */
.ionizer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
@media (max-width: 576px) {
    .ionizer-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Filter link overrides — purple theme (scoped to ionizer filter bar) */
.ionizer-filter-bar .filter-link {
    border-color: #c4b5fd;
    color: #5b21b6;
    background: transparent;
    font-size: 13px;
    padding: 5px 14px;
}
.ionizer-filter-bar .filter-link:hover,
.ionizer-filter-bar .filter-link.active {
    background: #7c3aed !important;
    color: #fff !important;
    border-color: #7c3aed !important;
}
.ionizer-filter-bar .filter-link.plates-tag { border-color: #a78bfa; color: #6d28d9; }
.ionizer-filter-bar .filter-link.plates-tag:hover,
.ionizer-filter-bar .filter-link.plates-tag.active {
    background: #a855f7 !important;
    color: #fff !important;
    border-color: #a855f7 !important;
}

/* Ionizer card — purple color scheme */
.ionizer-grid .product-card {
    border-top-color: #7c3aed;
    border-color: #ede9fe;
}
.ionizer-grid .product-card:hover {
    box-shadow: 0 8px 28px rgba(124, 58, 237, .18), 0 4px 16px rgba(124, 58, 237, .08);
    border-top-color: #a855f7;
}
.ionizer-grid .product-image {
    background: #f5f3ff;
}
.ionizer-grid .product-title a { color: #1e1b4b; }
.ionizer-grid .product-title a:hover { color: #7c3aed; }
.ionizer-grid .product-price { color: #7c3aed; }
.ionizer-grid .product-link {
    background: linear-gradient(90deg, #5b21b6, #7c3aed);
    border-radius: 8px;
}
.ionizer-grid .product-link:hover {
    background: linear-gradient(90deg, #4c1d95, #5b21b6);
}
.ionizer-grid .product-link-outline {
    color: #7c3aed;
    border-color: #7c3aed;
}
.ionizer-grid .product-link-outline:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

/* Ionizer badge color overrides */
.ionizer-grid .badge-new        { background: #7c3aed; }
.ionizer-grid .badge-bestseller { background: #f59e42; border-color: #f59e42; }
.badge-feat {
    display: inline-block;
    padding: 4px 12px;
    background: #10b981;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ionizer attribute badges (form factor, plates, origin) */
.product-attr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 4px 0 6px;
}
.badge-form {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 50px;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 600;
    display: inline-block;
}
.badge-plates {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 50px;
    background: #f3e8ff;
    color: #7c3aed;
    font-weight: 600;
    display: inline-block;
}
.badge-origin {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Ionizer detail page — badge padding + bestseller amber (scoped via body_class) */
.ionizer-detail-page .badge-form,
.ionizer-detail-page .badge-plates {
    padding: 4px 12px;
    font-size: 13px;
}
.ionizer-detail-page .badge-bestseller {
    background: #fef3c7;
    color: #92400e;
    border-color: #fef3c7;
}

/* Detail pages — badge row wrapper (product-detail, wholehouse-detail) */
.detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════
   MAY LOC NUOC PAGE — filter bar & intro box
   ════════════════════════════════════════════════════════ */
.mln-filter-section { background: #f0f7ff; border-bottom: 1px solid #c3daf8; padding: 20px 0; }
.mln-axis-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; margin-bottom: 8px; }
.mln-intro { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 28px 32px; margin-bottom: 32px; }
.mln-intro h2 { font-size: 20px; font-weight: 700; color: #0a3d7a; margin: 0 0 8px; }
.mln-intro p { color: #6b7280; font-size: 14px; margin: 0; line-height: 1.6; }

/* badge-tech — shared between may-loc-nuoc and wholehouse listing pages */
.badge-tech { background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; display: inline-block; }

/* ════════════════════════════════════════════════════════
   WHOLEHOUSE PAGE — filter bar & intro box
   ════════════════════════════════════════════════════════ */
.wh-filter-section { background: #f8faff; border-bottom: 1px solid #e5eaf3; padding: 20px 0; }
.wh-axis-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; margin-bottom: 8px; }
.wh-intro { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 28px 32px; margin-bottom: 32px; }
.wh-intro h2 { font-size: 20px; font-weight: 700; color: #0a3d7a; margin: 0 0 8px; }
.wh-intro p { color: #6b7280; font-size: 14px; margin: 0; line-height: 1.6; }

/* space-tag variant of filter-link (used in wholehouse filter bar) */
.filter-link.space-tag { border-color: #7c3aed; color: #7c3aed; }
.filter-link.space-tag:hover,
.filter-link.space-tag.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* ════════════════════════════════════════════════════════
   SPACE CATEGORY PAGE — teal-themed product grid
   ════════════════════════════════════════════════════════ */
.space-tab {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
    background: transparent;
    transition: background .18s, color .18s;
}
.space-tab:hover,
.space-tab.active { background: #059669; color: #fff; border-color: #059669; }

.space-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
@media (max-width: 576px) {
    .space-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.space-product-grid .product-card { border-top-color: #0f9b7a; border-color: #d1fae5; }
.space-product-grid .product-card:hover { box-shadow: 0 8px 28px rgba(15,155,122,.18); border-top-color: #059669; }
.space-product-grid .product-image { background: #f0fdf4; }
.space-product-grid .product-price { color: #0a3d7a; }
.space-product-grid .product-link { background: linear-gradient(90deg, #0a3d7a, #0f9b7a); }
.space-product-grid .product-link:hover { background: linear-gradient(90deg, #082f61, #0a8569); }
.space-product-grid .product-link-outline { color: #0f9b7a; border-color: #0f9b7a; }
.space-product-grid .product-link-outline:hover { background: #0f9b7a; color: #fff; }

/* ════════════════════════════════════════════════════════
   IONIZER DETAIL PAGE — purple hover override
   (body_class = 'ionizer-detail-page' set by IonizerController)
   ════════════════════════════════════════════════════════ */
.ionizer-detail-page .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, .18) !important;
}

/* ════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGES — gallery, specs table, FAQ, related cards
   Shared by wholehouse-detail, ionizer-detail, and future detail pages.
   ════════════════════════════════════════════════════════ */
.detail-gallery { display: flex; gap: 8px; margin-bottom: 0; }
.detail-gallery img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.detail-gallery img.active,
.detail-gallery img:hover { border-color: #0a6bc1; }
.detail-main-img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 12px; background: #f3f6fb; padding: 20px; }
.spec-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.spec-table td:first-child { color: #374151; font-weight: 600; width: 40%; }
.spec-table td:last-child { color: #1e3a5f; }
.faq-item { border: 1px solid #e5eaf3; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.faq-q { padding: 14px 18px; font-weight: 600; cursor: pointer; background: #f8faff; color: #0a3d7a; display: flex; justify-content: space-between; align-items: center; }
.faq-a { padding: 14px 18px; font-size: 14px; color: #374151; line-height: 1.65; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-q { background: #eff6ff; }
.space-badge { display: inline-block; background: #f5f3ff; color: #7c3aed; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; margin: 2px 3px; }
.related-card { border: 1px solid #e5eaf3; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: box-shadow .15s; }
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.related-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 12px; background: #f3f6fb; }
.related-card-body { padding: 12px; }
.related-card-body h4 { font-size: 14px; font-weight: 700; color: #0a3d7a; margin: 0 0 4px; line-height: 1.3; }
.related-card-body p { font-size: 12px; color: #6b7280; margin: 0; }

/* === PRODUCT DESCRIPTION RICH TEXT === */
.product-description-text p { margin: 0 0 14px; }
.product-description-text h2 { font-size: 21px; font-weight: 700; color: #0a3d7a; margin: 24px 0 12px; }
.product-description-text h3 { font-size: 18px; font-weight: 700; color: #1a3a5c; margin: 20px 0 10px; }
.product-description-text h4 { font-size: 17px; font-weight: 600; color: #333; margin: 16px 0 8px; }
.product-description-text img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; display: block; }
.product-description-text ul { padding-left: 24px; margin: 10px 0 16px; list-style-type: disc; }
.product-description-text ol { padding-left: 24px; margin: 10px 0 16px; list-style-type: decimal; }
.product-description-text li { margin-bottom: 6px; display: list-item; }
.product-description-text table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.product-description-text table th,
.product-description-text table td { padding: 10px 14px; border: 1px solid #e0e0e0; }
.product-description-text table th { background: #f0f4f8; font-weight: 600; color: #0a3d7a; }
.product-description-text table tr:nth-child(even) { background: #f8f9fa; }
.product-description-text blockquote { border-left: 4px solid #0a6bc1; padding: 12px 20px; margin: 16px 0; background: #f0f7ff; color: #1a3a5c; font-style: italic; border-radius: 0 8px 8px 0; }
.product-description-text a { color: #0a6bc1; text-decoration: underline; }
.product-description-text a:hover { color: #084a94; }

/* ════════════════════════════════════════════════════════════════════
   SOLUTION PAGES — Giải Pháp Lọc Nước
   Scoped: .solution-hub-page   (hub)
           .solution-detail-page (detail)
   Prefix: .sp-
   ════════════════════════════════════════════════════════════════════ */

/* === SHARED UTILITIES === */
.sp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #0a3d7a, #0a6bc1);
    color: #fff; padding: 13px 26px; border-radius: 8px;
    font-weight: 600; font-size: 15px; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    border: none; cursor: pointer;
}
.sp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10,61,122,.3); color: #fff; }
.sp-btn-primary--large { padding: 16px 34px; font-size: 16px; }
.sp-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #fff;
    border: 2px solid rgba(255,255,255,.75); padding: 11px 24px; border-radius: 8px;
    font-weight: 600; font-size: 15px; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.sp-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.sp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.sp-badge--code    { background: #eff6ff; color: #1d4ed8; }
.sp-badge--capacity { background: #f0fdf4; color: #15803d; }
.sp-badge--people  { background: #fef9c3; color: #92400e; }
.sp-badge--warning { background: #fff7ed; color: #c2410c; }
.sp-section-inner  { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sp-section-header { text-align: center; margin-bottom: 40px; }
.sp-section-title  { font-size: 28px; font-weight: 800; color: #0a3d7a; margin: 0 0 12px; line-height: 1.2; }
.sp-section-subtitle { font-size: 16px; color: #4b5563; max-width: 680px; margin: 0 auto; line-height: 1.6; }
.sp-empty-state { text-align: center; padding: 60px 20px; color: #6b7280; }
.sp-empty-state i { font-size: 44px; margin-bottom: 16px; display: block; }

/* === HUB HERO === */
.solution-hub-page .sp-hub-hero {
    background: linear-gradient(135deg, #0a3d7a 0%, #0a6bc1 60%, #0891b2 100%);
    padding: 80px 20px 60px; color: #fff;
}
.sp-hub-hero__inner     { max-width: 1200px; margin: 0 auto; display: flex; gap: 48px; align-items: center; }
.sp-hub-hero__content   { flex: 1; }
.sp-hub-hero__badge     { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 20px; font-size: 15px; font-weight: 600; margin-bottom: 20px; }
.sp-hub-hero__title     { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0 0 16px; }
.sp-hub-hero__title-accent { color: #93c5fd; }
.sp-hub-hero__desc      { font-size: 18px; color: rgba(255,255,255,.85); line-height: 1.7; margin: 0 0 28px; max-width: 560px; }
.sp-hub-hero__cta       { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-hub-hero__visual    { flex: 0 0 320px; }
.sp-hub-hero__tds-demo  { background: rgba(255,255,255,.1); border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sp-tds-card            { background: rgba(255,255,255,.15); border-radius: 10px; padding: 14px 18px; text-align: center; min-width: 110px; }
.sp-tds-card--after     { background: rgba(34,197,94,.2); border: 1px solid rgba(34,197,94,.4); }
.sp-tds-card__label     { font-size: 13px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.sp-tds-card__value     { font-size: 28px; font-weight: 800; line-height: 1.1; }
.sp-tds-card__unit      { font-size: 15px; font-weight: 400; opacity: .75; }
.sp-tds-card__note      { font-size: 13px; opacity: .7; margin-top: 4px; }
.sp-tds-arrow           { display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,.7); font-size: 14px; }
@media (max-width: 1024px) {
    .sp-hub-hero__inner { flex-direction: column; }
    .sp-hub-hero__visual { flex: none; width: 100%; }
    .sp-hub-hero__title { font-size: 28px; }
}
@media (max-width: 576px) { .sp-hub-hero__title { font-size: 24px; } .sp-hub-hero__cta { flex-direction: column; } }

/* === STATS BAR === */
.solution-hub-page .sp-stats-bar {
    background: #fff; border-bottom: 1px solid #e5eaf3;
    padding: 20px 0; box-shadow: 0 2px 12px rgba(10,61,122,.06);
}
.sp-stats-bar__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; gap: 0; }
.sp-stat-item { flex: 1; text-align: center; padding: 10px 16px; border-right: 1px solid #e5eaf3; }
.sp-stat-item:last-child { border-right: none; }
.sp-stat-item__value { font-size: 26px; font-weight: 800; color: #0a3d7a; line-height: 1; }
.sp-stat-item__label { font-size: 16px; color: #6b7280; margin-top: 4px; }
@media (max-width: 576px) { .sp-stats-bar__inner { flex-wrap: wrap; } .sp-stat-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid #e5eaf3; } }

/* === SOLUTIONS GRID === */
.solution-hub-page .sp-solutions-section { padding: 70px 0; background: #f8faff; }
.sp-solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-solution-card {
    background: #fff; border: 1px solid #e5eaf3; border-radius: 14px;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    overflow: hidden; border-top: 4px solid #0a6bc1;
}
.sp-solution-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(10,61,122,.14); border-top-color: #0a3d7a; }
.sp-solution-card__icon { background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 24px; text-align: center; }
.sp-solution-card__icon i { font-size: 36px; color: #1d4ed8; }
.sp-solution-card__body { padding: 20px; flex: 1; }
.sp-solution-card__title { font-size: 18px; font-weight: 700; color: #0a3d7a; margin: 0 0 6px; }
.sp-solution-card__subtitle { font-size: 16px; color: #6b7280; margin: 0 0 10px; }
.sp-solution-card__desc { font-size: 16px; color: #4b5563; line-height: 1.65; }
.sp-solution-card__meta { padding: 12px 20px; background: #f8faff; display: flex; gap: 14px; flex-wrap: wrap; }
.sp-solution-card__meta-item { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #374151; }
.sp-solution-card__meta-item i { color: #0a6bc1; }
.sp-solution-card__footer { padding: 14px 20px; border-top: 1px solid #f1f5f9; }
.sp-solution-card__cta { font-size: 16px; font-weight: 600; color: #0a6bc1; display: flex; align-items: center; gap: 6px; }
@media (max-width: 992px) { .sp-solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .sp-solutions-grid { grid-template-columns: 1fr; } }

/* === WATER PROBLEMS SECTION === */
.solution-hub-page .sp-problems-section { padding: 70px 0; background: #fff; }
.sp-problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.sp-problem-card { border: 1px solid #f1f5f9; border-radius: 12px; padding: 20px; transition: box-shadow .15s; }
.sp-problem-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sp-problem-card__icon { font-size: 28px; color: #dc2626; margin-bottom: 12px; }
.sp-problem-card__title { font-size: 18px; font-weight: 700; color: #0a3d7a; margin: 0 0 8px; }
.sp-problem-card__indicator { margin: 0 0 10px; }
.sp-problem-card__desc { font-size: 16px; color: #4b5563; line-height: 1.65; margin: 0 0 10px; }
.sp-problem-card__standards { background: #f8faff; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; }
.sp-standard-row { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; margin-bottom: 2px; }
.sp-standard-label { font-weight: 700; color: #0a3d7a; min-width: 42px; flex-shrink: 0; }
.sp-standard-value { color: #374151; }
.sp-problem-card__solution { font-size: 16px; color: #374151; }
.sp-problems-cta { text-align: center; padding: 16px 0 0; }
.sp-problems-cta p { font-size: 16px; color: #374151; margin: 0 0 14px; }
@media (max-width: 992px) { .sp-problems-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .sp-problems-grid { grid-template-columns: 1fr; } }

/* === PROCESS STEPS === */
.solution-hub-page .sp-process-section { padding: 70px 0; background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%); }
.sp-process-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; position: relative; }
.sp-process-steps::before { content: ''; position: absolute; top: 40px; left: 40px; right: 40px; height: 2px; background: #dbeafe; z-index: 0; }
.sp-process-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; position: relative; z-index: 1; }
.sp-process-step__icon { width: 64px; height: 64px; background: #eff6ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 3px solid #fff; box-shadow: 0 0 0 3px #dbeafe; }
.sp-process-step__icon i { font-size: 20px; color: #1d4ed8; }
.sp-process-step__number { font-size: 13px; font-weight: 800; color: #9ca3af; letter-spacing: .12em; margin-bottom: 6px; }
.sp-process-step__title { font-size: 18px; font-weight: 700; color: #0a3d7a; margin: 0 0 6px; }
.sp-process-step__desc { font-size: 16px; color: #6b7280; line-height: 1.65; }
@media (max-width: 768px) { .sp-process-steps { flex-direction: column; gap: 20px; } .sp-process-steps::before { display: none; } .sp-process-step { flex-direction: row; text-align: left; gap: 16px; } .sp-process-step__icon { flex-shrink: 0; } }

/* === QUIZ CTA === */
.solution-hub-page .sp-quiz-cta-section { padding: 50px 0; background: #1e3a5f; }
.sp-quiz-cta-card { max-width: 900px; margin: 0 auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 36px 40px; display: flex; align-items: center; gap: 28px; }
.sp-quiz-cta-card__icon { font-size: 44px; color: #93c5fd; flex-shrink: 0; }
.sp-quiz-cta-card__content { flex: 1; }
.sp-quiz-cta-card__title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.sp-quiz-cta-card__desc { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.65; margin: 0; }
.sp-quiz-cta-card__actions { display: flex; gap: 12px; flex-direction: column; flex-shrink: 0; }
@media (max-width: 768px) { .sp-quiz-cta-card { flex-direction: column; text-align: center; padding: 28px 20px; } }

/* ── DETAIL PAGE ────────────────────────────────────────────────────── */

/* === BREADCRUMB === */
.solution-detail-page .sp-breadcrumb { padding: 12px 20px; background: #f8faff; border-bottom: 1px solid #e5eaf3; }
.sp-breadcrumb__list { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; font-size: 14px; }
.sp-breadcrumb__link { color: #0a6bc1; text-decoration: none; }
.sp-breadcrumb__link:hover { text-decoration: underline; }
.sp-breadcrumb__item--sep { color: #9ca3af; }
.sp-breadcrumb__item--current { color: #374151; font-weight: 600; }

/* === DETAIL HERO === */
.solution-detail-page .sp-detail-hero {
    background: linear-gradient(135deg, #0a3d7a 0%, #1d4ed8 100%);
    padding: 60px 20px 50px; color: #fff;
}
.sp-detail-hero__inner   { max-width: 1200px; margin: 0 auto; max-width: 760px; }
.sp-detail-hero__meta    { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sp-detail-hero__title   { font-size: 30px; font-weight: 800; margin: 0 0 10px; line-height: 1.15; }
.sp-detail-hero__title-name { color: #93c5fd; display: block; }
.sp-detail-hero__subtitle { font-size: 18px; color: rgba(255,255,255,.85); margin: 0 0 14px; }
.sp-detail-hero__desc    { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.7; margin: 0 0 26px; }
.sp-detail-hero__cta     { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 576px) { .sp-detail-hero__title { font-size: 24px; } .sp-detail-hero__cta { flex-direction: column; } }

/* === PID SECTION === */
.solution-detail-page .sp-pids-section { padding: 60px 0; background: #fff; }
.sp-pid-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.sp-pid-tab {
    border: 2px solid #e5eaf3; background: #f8faff; color: #374151;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 16px;
    cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px;
}
.sp-pid-tab--active,
.sp-pid-tab:hover { background: #0a3d7a; color: #fff; border-color: #0a3d7a; }
.sp-pid-panel { display: none; }
.sp-pid-panel--active { display: block; }

/* TDS bar */
.sp-pid-tds-bar { display: flex; align-items: center; gap: 16px; background: #f0f7ff; border-radius: 12px; padding: 18px 24px; margin-bottom: 24px; flex-wrap: wrap; }
.sp-pid-tds-item { text-align: center; }
.sp-pid-tds-item__label { font-size: 14px; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
.sp-pid-tds-item__value { font-size: 24px; font-weight: 800; color: #0a3d7a; }
.sp-pid-tds-item__value span { font-size: 14px; font-weight: 400; color: #6b7280; }
.sp-pid-tds-item__value--green { color: #15803d; }
.sp-pid-tds-arrow { font-size: 22px; color: #9ca3af; font-weight: 300; }

/* === VILLA / MANSION SYSTEM ARCHITECTURE DIAGRAM === */
.sp-arch-section { padding: 60px 0; background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%); }
.sp-arch-flow { display: flex; flex-direction: column; gap: 0; }

/* Layer card */
.sp-arch-layer {
    border: 2px solid #e5eaf3; border-radius: 16px; background: #fff;
    padding: 28px 24px 24px; box-shadow: 0 2px 16px rgba(10,61,122,.06);
    position: relative; margin-top: 10px;
}
.sp-arch-layer__label {
    position: absolute; top: -13px; left: 20px;
    padding: 3px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    color: #fff; letter-spacing: .5px; text-transform: uppercase;
}
.sp-arch-layer--1 { border-color: #93c5fd; }
.sp-arch-layer--1 .sp-arch-layer__label { background: #2563eb; }
.sp-arch-layer--2 { border-color: #67e8f9; }
.sp-arch-layer--2 .sp-arch-layer__label { background: #0891b2; }
.sp-arch-layer--3 { border-color: #fdba74; }
.sp-arch-layer--3 .sp-arch-layer__label { background: #ea580c; }
.sp-arch-layer--4 { border-color: #c4b5fd; }
.sp-arch-layer--4 .sp-arch-layer__label { background: #7c3aed; }
.sp-arch-layer--5 { border-color: #6ee7b7; }
.sp-arch-layer--5 .sp-arch-layer__label { background: #059669; }

/* Layer head */
.sp-arch-layer__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sp-arch-layer__icon {
    width: 48px; height: 48px; border-radius: 12px; background: #eff6ff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 20px; color: #2563eb;
}
.sp-arch-layer__icon--orange { background: #fff7ed; color: #ea580c; }
.sp-arch-layer__icon--blue   { background: #ecfeff; color: #0891b2; }
.sp-arch-layer__icon--purple { background: #f5f3ff; color: #7c3aed; }
.sp-arch-layer__icon--green  { background: #f0fdf4; color: #059669; }
.sp-arch-layer__title { font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 4px; }
.sp-arch-layer__sub   { font-size: 15px; color: #6b7280; margin: 0; line-height: 1.5; }

/* Options strip */
.sp-arch-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-arch-opts--parallel { align-items: flex-start; }
.sp-arch-opt {
    flex: 1 1 190px; min-width: 0;
    display: flex; gap: 12px; align-items: flex-start;
    background: #f8faff; border: 1.5px solid #e5eaf3; border-radius: 10px;
    padding: 14px 14px 36px;
    position: relative;
}
.sp-arch-opt i { font-size: 20px; flex-shrink: 0; margin-top: 3px; }
.sp-arch-opt--city    i { color: #3b82f6; }
.sp-arch-opt--well    i { color: #0891b2; }
.sp-arch-opt--dug     i { color: #78716c; }
.sp-arch-opt--tank    i { color: #6b7280; }
.sp-arch-opt--solar   i { color: #f59e0b; }
.sp-arch-opt--heatpump i { color: #10b981; }
.sp-arch-opt--boiler  i { color: #ef4444; }
.sp-arch-opt > div { display: flex; flex-direction: column; gap: 3px; }
.sp-arch-opt strong { font-size: 15px; font-weight: 700; color: #111827; }
.sp-arch-opt span   { font-size: 14px; color: #6b7280; display: block; }
.sp-arch-opt__note      { color: #9ca3af; font-size: 13px; font-style: italic; }
.sp-arch-opt__req       { background: #ecfeff; color: #0e7490; font-size: 13px; border-radius: 4px; padding: 2px 6px; }
.sp-arch-opt__warn-sm   { background: #fef2f2; color: #dc2626; font-size: 13px; border-radius: 4px; padding: 2px 6px; }
.sp-arch-opt__warn-inline { background: #fef2f2; color: #dc2626; font-size: 13px; border-radius: 4px; padding: 2px 6px; font-weight: 600; }
.sp-arch-opts-divider { font-size: 13px; font-weight: 600; color: #9ca3af; align-self: center; flex-shrink: 0; padding: 0 4px; }
.sp-arch-opt__detail { position: absolute; bottom: 10px; right: 14px; font-size: 12px; font-weight: 600; color: #0891b2; text-decoration: none; }
.sp-arch-opt__detail:hover { text-decoration: underline; color: #0e7490; }
/* Water source badge (water-source-detail.php) */
.ws-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.ws-badge--city  { background: #eff6ff; color: #3b82f6; }
.ws-badge--well  { background: #ecfeff; color: #0891b2; }
.ws-badge--dug   { background: #f5f5f4; color: #78716c; }
.ws-badge--tank  { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }
.ws-hero__icon-wrap { display: flex; align-items: center; justify-content: center;
    background: #f0f7ff; border-radius: 16px; min-height: 250px; }

/* Hot water notice bar */
.sp-arch-hotwater-notice {
    background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 8px;
    padding: 10px 14px; font-size: 14px; color: #78350f;
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px;
}
.sp-arch-hotwater-notice i { color: #d97706; flex-shrink: 0; margin-top: 2px; }

/* Filter modules grid */
.sp-arch-filter-modules { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-arch-module {
    flex: 1 1 180px; min-width: 0;
    background: #f8faff; border: 1.5px solid #e5eaf3; border-radius: 10px;
    padding: 14px 14px 36px; display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.sp-arch-module--required { border-color: #0a3d7a; background: #f0f7ff; }
/* Module header: chứa badge điều kiện */
.sp-arch-module__header { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
/* Module body: icon + content cùng hàng */
.sp-arch-module__body { display: flex; align-items: flex-start; gap: 10px; }
.sp-arch-module__body > i { font-size: 18px; color: #0891b2; flex-shrink: 0; margin-top: 3px; }
.sp-arch-module--required .sp-arch-module__body > i { color: #0a3d7a; }
/* Module content: tên sản phẩm / vị trí / mô tả */
.sp-arch-module__content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-arch-module__name { font-size: 13px; font-weight: 500; color: #6b7280; }
.sp-arch-module__pos  { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.4; }
.sp-arch-module__label { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.sp-arch-module__desc { font-size: 13px; color: #6b7280; line-height: 1.5; }
.sp-arch-module__detail { position: absolute; bottom: 10px; right: 14px; font-size: 12px; font-weight: 600; color: #0891b2; text-decoration: none; }
.sp-arch-module__detail:hover { text-decoration: underline; color: #0e7490; }
.sp-arch-module__link { font-size: 13px; font-weight: 500; color: #6b7280; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color .2s; }
.sp-arch-module__link:hover { color: #1d4ed8; text-decoration: underline; }
.sp-arch-module__link .fa-arrow-right { font-size: 10px; opacity: .6; }
.sp-arch-module__badge {
    font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px;
    background: #ecfeff; color: #0891b2;
    text-transform: uppercase; letter-spacing: .4px;
    text-align: center;
}
.sp-arch-module__badge--required,
.sp-arch-module__badge--city,
.sp-arch-module__badge--well,
.sp-arch-module__badge--hard,
.sp-arch-module__badge--bacteria,
.sp-arch-module__badge--ionizer  { background: #ecfeff; color: #0891b2; }

/* Smart management 2-col grid */
.sp-arch-smart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-arch-smart-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fdf4ff; border: 1.5px solid #e9d5ff; border-radius: 10px; padding: 14px;
}
.sp-arch-smart-item i { font-size: 18px; color: #7c3aed; flex-shrink: 0; margin-top: 2px; }
.sp-arch-smart-item strong { font-size: 15px; font-weight: 700; color: #111827; display: block; margin-bottom: 3px; }
.sp-arch-smart-item span { font-size: 14px; color: #6b7280; }

/* Floor distribution */
.sp-arch-floors { display: flex; flex-direction: column; gap: 12px; }
.sp-arch-floor { border-radius: 12px; overflow: hidden; border: 1.5px solid #bbf7d0; }
.sp-arch-floor--machine { border-color: #bfdbfe; }
.sp-arch-floor--ground  { border-color: #a7f3d0; }
.sp-arch-floor--upper   { border-color: #6ee7b7; }
.sp-arch-floor--special { border-color: #fed7aa; }
.sp-arch-floor__label {
    background: #059669; color: #fff; padding: 10px 18px;
    font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.sp-arch-floor--machine .sp-arch-floor__label { background: #1d4ed8; }
.sp-arch-floor--ground  .sp-arch-floor__label { background: #059669; }
.sp-arch-floor--upper   .sp-arch-floor__label { background: #047857; }
.sp-arch-floor--special .sp-arch-floor__label { background: #ea580c; }
.sp-arch-floor__rooms { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f0fdf4; }
.sp-arch-floor--machine .sp-arch-floor__rooms { background: #eff6ff; }
.sp-arch-floor--special .sp-arch-floor__rooms { background: #fff7ed; }
.sp-arch-room {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border-radius: 8px; padding: 12px 14px;
    border: 1px solid #d1fae5;
}
.sp-arch-floor--machine .sp-arch-room { border-color: #bfdbfe; }
.sp-arch-floor--special .sp-arch-room { border-color: #fed7aa; }
.sp-arch-room--pool { border-color: #bae6fd; border-width: 2px; }
.sp-arch-room i { font-size: 16px; color: #059669; flex-shrink: 0; margin-top: 2px; }
.sp-arch-floor--machine .sp-arch-room i { color: #1d4ed8; }
.sp-arch-floor--special .sp-arch-room i { color: #ea580c; }
.sp-arch-room strong { font-size: 15px; font-weight: 700; color: #111827; display: block; margin-bottom: 3px; }
.sp-arch-room span { font-size: 14px; color: #6b7280; }

/* Connector arrow between layers */
.sp-arch-connector { display: flex; flex-direction: column; align-items: center; padding: 0; }
.sp-arch-connector__line {
    display: block; width: 3px; height: 20px;
    background: linear-gradient(180deg, #93c5fd 0%, #0a6bc1 100%); border-radius: 2px;
}
.sp-arch-connector__arrow { font-size: 26px; color: #0a6bc1; line-height: 1; margin-top: -6px; }

/* Expert note */
.sp-arch-expert-note {
    margin-top: 18px; display: flex; gap: 14px; align-items: flex-start;
    background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px; padding: 16px;
}
.sp-arch-expert-note > i { font-size: 22px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.sp-arch-expert-note > div { font-size: 15px; color: #78350f; line-height: 1.75; }
.sp-arch-expert-note strong { display: block; color: #92400e; margin-bottom: 4px; }
.sp-arch-cta-link { color: #0a6bc1; font-weight: 700; text-decoration: none; }
.sp-arch-cta-link:hover { text-decoration: underline; }

/* Responsive — stack opts vertically on mobile */
@media (max-width: 768px) {
    .sp-arch-opts,
    .sp-arch-opts--parallel { flex-direction: column; }
    .sp-arch-opts-divider { align-self: flex-start; }
    .sp-arch-smart-grid { grid-template-columns: 1fr; }
    .sp-arch-filter-modules { flex-direction: column; }
    .sp-arch-layer__title { font-size: 18px; }
    .sp-arch-module { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .sp-arch-layer { padding: 22px 14px 18px; }
    .sp-arch-floor__label { font-size: 14px; padding: 8px 14px; }
}

/* Stages flow */
.sp-pid-stages-flow { margin-bottom: 24px; }
.sp-stages-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-stage-item {
    display: flex; align-items: flex-start; gap: 12px;
    background: #f8faff; border: 1px solid #e5eaf3; border-radius: 10px;
    padding: 14px; flex: 1; min-width: 180px; max-width: 220px;
    position: relative;
}
.sp-stage-item__number {
    width: 28px; height: 28px; background: #0a3d7a; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.sp-stage-item__body { flex: 1; }
.sp-stage-item__name { font-weight: 700; font-size: 15px; color: #0a3d7a; margin-bottom: 4px; line-height: 1.3; }
.sp-stage-item__removes { font-size: 14px; color: #374151; line-height: 1.4; margin-bottom: 2px; }
.sp-stage-item__removes i { color: #dc2626; }
.sp-stage-item__maintenance { font-size: 13px; color: #6b7280; }
.sp-stage-item__maintenance i { color: #0a6bc1; }
@media (max-width: 768px) { .sp-stages-list { flex-direction: column; } .sp-stage-item { max-width: 100%; } }

/* Cost bar */
.sp-pid-cost-bar { display: flex; flex-wrap: wrap; gap: 20px; background: #f8faff; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.sp-pid-cost-item { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.sp-pid-cost-item i { color: #0a6bc1; }
.sp-pid-cost-item__label { color: #6b7280; }
.sp-pid-cost-item__value { font-weight: 700; color: #0a3d7a; }
.sp-pid-cost-item__value small { font-size: 14px; font-weight: 400; color: #6b7280; }

/* Engineer note */
.sp-engineer-note { border: 1px solid #dbeafe; border-left: 4px solid #1d4ed8; border-radius: 0 8px 8px 0; padding: 14px 18px; background: #eff6ff; margin-bottom: 20px; }
.sp-engineer-note__header { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1d4ed8; margin-bottom: 8px; }
.sp-engineer-note__text { font-size: 16px; color: #1e3a5f; line-height: 1.7; margin: 0 0 8px; }
.sp-engineer-note__disclaimer { font-size: 14px; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.sp-pids-cta { text-align: center; padding: 28px 0 0; }
.sp-pids-cta p { font-size: 16px; color: #4b5563; margin: 0 0 14px; }

/* === VILLA WATER FLOW — SUMMARY FLOWCHART === */
.sp-flowchart-section { padding: 56px 0 48px; background: #f8faff; border-top: 2px solid #e5eaf3; }
.sp-flowchart-wrap { max-width: 1000px; margin: 0 auto; }

/* Diagram area: mainrow (left) + branches (right), flex-row */
.sp-fc-diagram {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Mainrow: source → arrow → filter → arrow → split */
.sp-fc-mainrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* Branches block (right of split) */
.sp-fc-branches {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}
.sp-fc-branch { display: flex; flex-direction: column; }
.sp-fc-branch__head {
    display: flex; flex-direction: row; align-items: center;
    gap: 0;
}

/* Nodes */
.sp-fc-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 110px;
    max-width: 145px;
    padding: 4px 2px;
}
.sp-fc-node__icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.sp-fc-node__label { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.35; }
.sp-fc-node__label span { font-size: 12px; font-weight: 400; color: #6b7280; display: block; margin-top: 2px; }

/* Node color variants */
.sp-fc-node--source .sp-fc-node__icon    { background: #eff6ff; color: #2563eb; }
.sp-fc-node--filter .sp-fc-node__icon    { background: #ecfeff; color: #0891b2; }
.sp-fc-node--hotwater .sp-fc-node__icon  { background: #fff7ed; color: #ea580c; }
.sp-fc-node--smart .sp-fc-node__icon     { background: #f5f3ff; color: #7c3aed; }
.sp-fc-node--drink .sp-fc-node__icon     { background: #f0fdf4; color: #059669; }
.sp-fc-node--laundry .sp-fc-node__icon   { background: #fafafa; color: #374151; }
.sp-fc-node--garden .sp-fc-node__icon    { background: #f0fdf4; color: #15803d; }
.sp-fc-node--dist .sp-fc-node__icon      { background: #fff7ed; color: #ea580c; }

/* Arrows */
.sp-fc-arrow--h {
    display: flex; align-items: center;
    width: 32px; flex-shrink: 0;
}
.sp-fc-arrow--h span {
    display: block; width: 100%; height: 2px;
    background: linear-gradient(90deg, #93c5fd 0%, #67e8f9 100%);
    position: relative;
}
.sp-fc-arrow--h span::after {
    content: '';
    position: absolute; right: -1px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left: 8px solid #67e8f9;
    width: 0; height: 0;
}
.sp-fc-branch--hot .sp-fc-arrow--h span {
    background: linear-gradient(90deg, #fed7aa 0%, #fb923c 100%);
}
.sp-fc-branch--hot .sp-fc-arrow--h span::after { border-left-color: #fb923c; }

/* Split dot */
.sp-fc-split {
    display: flex; align-items: center; justify-content: center;
    width: 18px; flex-shrink: 0;
}
.sp-fc-split__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #0891b2;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #0891b2;
}

/* Endpoint row (drink, laundry, garden) */
.sp-fc-endpoints {
    display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; align-items: flex-start;
}
.sp-fc-endpoints .sp-fc-node { min-width: 95px; max-width: 118px; }

/* Legend */
.sp-fc-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;
    margin-top: 24px;
    font-size: 13px; color: #374151;
    border-top: 1px solid #e5eaf3;
    padding-top: 16px;
}
.sp-fc-legend span { display: flex; align-items: center; gap: 6px; }
.sp-fc-legend__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sp-fc-legend__dot--blue   { background: #3b82f6; }
.sp-fc-legend__dot--orange { background: #ea580c; }
.sp-fc-legend__dot--cyan   { background: #0891b2; }

/* === QUICK-REF SVG DIAGRAM (biet-thu 6-stage) === */
.sp-fc-quickref {
    margin-top: 32px;
    border: 1px solid #c7d9f5;
    border-radius: 10px;
    background: #f0f6ff;
    padding: 20px 24px;
}
.sp-fc-quickref__label {
    font-size: 15px; font-weight: 600; color: #1e40af;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
.sp-fc-quickref__actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.sp-fc-quickref__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: background 0.18s;
}
.sp-fc-quickref__btn--view {
    background: #1d4ed8; color: #fff;
}
.sp-fc-quickref__btn--view:hover { background: #1e40af; color: #fff; }
.sp-fc-quickref__btn--dl {
    background: #fff; color: #1d4ed8;
    border: 2px solid #1d4ed8;
}
.sp-fc-quickref__btn--dl:hover { background: #eff6ff; }
.sp-fc-quickref__preview {
    margin: 0;
    text-align: center;
}
.sp-fc-quickref__preview img {
    max-width: 100%; height: auto;
    border: 1px solid #c7d9f5;
    border-radius: 8px;
}
.sp-fc-quickref__preview figcaption {
    margin-top: 10px;
    font-size: 13px; color: #6b7280;
    font-style: italic;
}

/* === FILTER STAGE DIAGRAM CARDS (fsd) ===
 * 6-stage inline grid, each card holds: badge, product image, title, specs, link.
 * Images set via Admin → Settings → "Sơ Đồ Lọc Nước (6 Giai Đoạn)"
 * ============================================= */

/* Outer grid — 6 cards horizontally with connecting arrows */
.fsd-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;                       /* gap handled by arrow / margin */
    align-items: stretch;
    margin: 20px 0 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Individual stage card */
.fsd-card {
    position: relative;
    flex: 1 1 128px;
    min-width: 128px;
    max-width: 180px;
    background: #fff;
    border: 1.5px solid #e0e7f0;
    border-radius: 12px;
    padding: 14px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 26px 0 0;  /* room for arrow pseudo; last child overrides below */
    transition: box-shadow .15s, transform .15s;
}
.fsd-card:last-child { margin-right: 0; }
.fsd-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); transform: translateY(-2px); }

/* Numbered badge (top right) */
.fsd-card__badge {
    position: absolute;
    top: -10px; right: -10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    z-index: 1;
}

/* Product image area */
.fsd-card__img-wrap {
    width: 100%;
    height: 100px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5fb;
}
.fsd-card__img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Placeholder (no image yet) */
.fsd-card__img-ph {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 28px;
    opacity: .45;
}
.fsd-card__img-ph span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #9ca3af;
}

/* Text body */
.fsd-card__body { width: 100%; text-align: center; }

.fsd-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
}
.fsd-card__sub {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 6px;
    line-height: 1.4;
}
.fsd-card__stat,
.fsd-card__removes {
    font-size: 12px;
    color: #374151;
    margin: 2px 0;
    line-height: 1.4;
}
.fsd-card__stat i,
.fsd-card__removes i { color: #6b7280; margin-right: 3px; }

.fsd-card__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    transition: color .12s;
}
.fsd-card__link:hover { color: #0f2d8a; text-decoration: underline; }
.fsd-card__link i { font-size: 10px; margin-left: 2px; }

/* Connecting arrow between cards (pseudo-element, hidden on last card) */
.fsd-card__arrow {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 1;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.fsd-card__arrow-cond {
    font-size: 9px;
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    padding: 1px 4px;
    white-space: nowrap;
    font-weight: 700;
}

/* Admin hint text below grid */
.fsd-admin-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 4px 0 0;
    text-align: right;
}
.fsd-admin-hint a { color: #6b7280; text-decoration: underline; }
.fsd-admin-hint a:hover { color: #1d4ed8; }

/* Responsive: 3 columns on tablet, full scroll on mobile */
@media (max-width: 900px) {
    .fsd-grid { flex-wrap: wrap; }
    .fsd-card { flex: 1 1 calc(33% - 20px); max-width: 100%; margin: 0 0 20px; }
    .fsd-card__arrow { display: none; }
}
@media (max-width: 540px) {
    .fsd-card { flex: 1 1 calc(50% - 12px); min-width: 130px; }
}

/* Mobile: stack vertically */
@media (max-width: 640px) {
    .sp-fc-diagram { flex-direction: column; align-items: flex-start; }
    .sp-fc-mainrow { flex-wrap: wrap; gap: 4px; }
    .sp-fc-arrow--h { width: 20px; }
    .sp-fc-node { min-width: 85px; max-width: 105px; }
    .sp-fc-node__icon { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
    .sp-fc-node__label { font-size: 13px; }
    .sp-fc-branches { padding-left: 20px; margin-top: 8px; }
    .sp-fc-branch__head { flex-wrap: wrap; gap: 4px; }
    .sp-fc-endpoints { gap: 6px; }
    .sp-fc-endpoints .sp-fc-node { min-width: 80px; }
}

/* === LINKED PROBLEMS === */
.solution-detail-page .sp-linked-problems-section { padding: 50px 0; background: #fff7ed; }
.sp-linked-problems-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sp-linked-problem-card { background: #fff; border: 1px solid #fed7aa; border-radius: 10px; padding: 18px; display: flex; gap: 14px; }
.sp-linked-problem-card__icon { font-size: 22px; color: #ea580c; flex-shrink: 0; }
.sp-linked-problem-card__title { font-size: 16px; font-weight: 700; color: #0a3d7a; margin: 0 0 4px; }
.sp-linked-problem-card__indicator { font-size: 14px; color: #ea580c; margin: 0 0 6px; }
.sp-linked-problem-card__solution-method { font-size: 15px; color: #374151; line-height: 1.55; }

/* === FAQ === */
.solution-detail-page .sp-faq-section { padding: 32px 0 60px; background: #f8faff; }
.sp-faq-list { max-width: 800px; margin: 0 auto; }
.sp-faq-item { border: 1px solid #e5eaf3; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sp-faq-item__toggle {
    width: 100%; border: none; background: #fff; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-weight: 600; font-size: 16px; color: #0a3d7a; cursor: pointer; text-align: left;
    transition: background .12s;
}
.sp-faq-item__toggle:hover { background: #eff6ff; }
.sp-faq-item__toggle[aria-expanded="true"] { background: #eff6ff; }
.sp-faq-item__chevron { flex-shrink: 0; transition: transform .2s; }
.sp-faq-item__toggle[aria-expanded="true"] .sp-faq-item__chevron { transform: rotate(180deg); }
.sp-faq-item__answer { padding: 14px 20px; background: #f8faff; font-size: 16px; color: #374151; line-height: 1.75; }

/* === OTHER SOLUTIONS === */
.solution-detail-page .sp-other-solutions { padding: 40px 0; background: #fff; }
.sp-other-solutions-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 20px; }
.sp-other-solution-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid #dbeafe; background: #eff6ff; color: #1d4ed8;
    padding: 9px 18px; border-radius: 24px; font-size: 16px; font-weight: 600;  
    text-decoration: none; transition: all .15s;
}
.sp-other-solution-pill:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.sp-other-solutions__hub-link { text-align: center; }

/* ===================================================================
   SOLUTION DETAIL — CONVERSION SECTIONS (sd-*)
   Checklist, 3 Config Tiers, Tech CTA Link, 5-Step Journey
   Scoped under .solution-detail-page (set via body_class)
=================================================================== */

/* === CHECKLIST SECTION === */
.solution-detail-page .sd-checklist-section { padding: 44px 0; background: #f0fdf4; }
.sd-checklist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sd-checklist__item {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1.5px solid #d1fae5; border-radius: 10px;
    padding: 13px 15px;
}
.sd-checklist__box {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid #10b981; background: #fff; margin-top: 2px;
}
.sd-checklist__content { display: flex; flex-direction: column; gap: 3px; }
.sd-checklist__content strong { font-size: 14px; color: #111827; font-weight: 700; }
.sd-checklist__content span { font-size: 13px; color: #6b7280; line-height: 1.45; }
.sd-checklist__cta { text-align: center; padding-top: 8px; }
.sd-checklist__cta p { font-size: 15px; color: #374151; margin: 0 0 16px; }

/* === 3 CONFIG TIERS === */
.solution-detail-page .sd-tiers-section { padding: 60px 0; background: #fff; }
.sd-tiers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-bottom: 24px;
}
.sd-tier {
    position: relative; border: 2px solid #e5e7eb; border-radius: 16px;
    padding: 28px 24px; display: flex; flex-direction: column; gap: 0;
    background: #fafafa;
}
.sd-tier--premium { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 4px 24px rgba(59,130,246,.13); }
.sd-tier--essential { border-color: #d1fae5; background: #f0fdf4; }
.sd-tier--signature { border-color: #fde68a; background: #fffbeb; }
.sd-tier__badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: #3b82f6; color: #fff; font-size: 13px; font-weight: 700;
    padding: 4px 16px; border-radius: 20px; white-space: nowrap;
}
.sd-tier__header { margin-bottom: 20px; }
.sd-tier__label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; margin-bottom: 6px; }
.sd-tier--premium .sd-tier__label { color: #2563eb; }
.sd-tier__price { font-size: 26px; font-weight: 800; color: #111827; line-height: 1.1; margin-bottom: 8px; }
.sd-tier__price span { font-size: 15px; font-weight: 500; color: #6b7280; }
.sd-tier__tagline { font-size: 14px; color: #4b5563; margin: 0; }
.sd-tier__modules { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sd-tier__modules li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: #374151; }
.sd-tier__modules .fa-check { color: #10b981; flex-shrink: 0; margin-top: 3px; }
.sd-tier__meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.sd-tier__meta span { font-size: 14px; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.sd-tier__cta {
    display: block; text-align: center; background: #f3f4f6; color: #374151;
    padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600;
    text-decoration: none; transition: all .15s;
}
.sd-tier__cta:hover { background: #e5e7eb; }
.sd-tier__cta--primary { background: #3b82f6; color: #fff; }
.sd-tier__cta--primary:hover { background: #2563eb; color: #fff; }
.sd-tiers__disclaimer {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    padding: 14px 20px; font-size: 15px; color: #92400e; display: flex; gap: 10px; align-items: flex-start;
}
/* Button variant of .sd-tier__cta */
button.sd-tier__cta { width: 100%; cursor: pointer; border: none; font-family: inherit; }

/* === TIER PACKAGE MODAL === */
.tier-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17,24,39,.55); backdrop-filter: blur(3px);
    z-index: 9900; display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.tier-modal-overlay[hidden] { display: none; }
body.tier-modal--open { overflow: hidden; }
.tier-modal {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 860px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.28); overflow: hidden;
}
.tier-modal__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 24px 28px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.tier-modal__heading { flex: 1; }
.tier-modal__badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.tier-modal__badge--essential { background: #d1fae5; color: #065f46; }
.tier-modal__badge--premium   { background: #dbeafe; color: #1d4ed8; }
.tier-modal__badge--signature { background: #fef3c7; color: #92400e; }
.tier-modal__title { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 4px; line-height: 1.2; }
.tier-modal__price { font-size: 26px; font-weight: 900; color: #1d4ed8; margin: 0; }
.tier-modal-overlay[data-tier-active="essential"] .tier-modal__price { color: #059669; }
.tier-modal-overlay[data-tier-active="premium"]   .tier-modal__price { color: #2563eb; }
.tier-modal-overlay[data-tier-active="signature"] .tier-modal__price { color: #d97706; }
.tier-modal__close {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid #e5e7eb; background: #f9fafb; color: #374151;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: all .15s; margin-top: 2px;
}
.tier-modal__close:hover { background: #f3f4f6; border-color: #d1d5db; }
.tier-modal__body { flex: 1; overflow-y: auto; padding: 0 28px 4px; }
.tier-modal__section { padding: 20px 0; border-bottom: 1px solid #f3f4f6; }
.tier-modal__section:last-child { border-bottom: none; }
.tier-modal__section-title {
    font-size: 12px; font-weight: 700; color: #6b7280; margin: 0 0 14px;
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: .06em;
}
/* Flow diagram */
.tier-modal__flow { display: flex; flex-direction: column; gap: 10px; }
.tier-modal__flow-main {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 8px; background: #f8faff; border-radius: 10px;
}
.tier-modal__flow-step {
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 1px solid #bfdbfe; border-radius: 8px;
    padding: 8px 10px; min-width: 76px; text-align: center; gap: 3px;
}
.tier-modal__flow-icon { font-size: 16px; color: #2563eb; }
.tier-modal__flow-name { font-size: 12px; font-weight: 600; color: #1e3a5f; line-height: 1.2; }
.tier-modal__flow-sub { font-size: 10px; color: #6b7280; }
.tier-modal__flow-arrow { font-size: 18px; color: #9ca3af; flex-shrink: 0; align-self: center; }
.tier-modal__flow-branch {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 4px 8px 4px 20px;
}
.tier-modal__flow-branch-label { font-size: 12px; color: #9ca3af; }
.tier-modal__flow-step--branch { background: #f0fdf4; border-color: #86efac; }
.tier-modal__flow-step--branch .tier-modal__flow-icon { color: #10b981; }
.tier-modal__flow-iot {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; color: #92400e;
    display: flex; align-items: center; gap: 8px;
}
/* Equipment table */
.tier-modal__equip-wrap { overflow-x: auto; }
.tier-modal__equip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tier-modal__equip-table th {
    background: #f3f4f6; color: #374151; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 12px; text-align: left; border: 1px solid #e5e7eb; white-space: nowrap;
}
.tier-modal__equip-table td {
    padding: 10px 12px; border: 1px solid #e5e7eb;
    vertical-align: top; color: #374151; line-height: 1.5;
}
.tier-modal__equip-table tr:nth-child(even) td { background: #f9fafb; }
.tier-modal__equip-table td strong { color: #111827; font-weight: 600; }
/* Footer */
.tier-modal__footer {
    padding: 14px 28px 20px; border-top: 1px solid #e5e7eb;
    flex-shrink: 0; background: #f9fafb;
}
.tier-modal__disclaimer {
    font-size: 13px; color: #6b7280; margin: 0 0 12px;
    display: flex; gap: 8px; align-items: flex-start; line-height: 1.5;
}
.tier-modal__disclaimer .fa-info-circle { color: #9ca3af; flex-shrink: 0; margin-top: 1px; }
.tier-modal__cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #1d4ed8; color: #fff; padding: 14px 28px; border-radius: 10px;
    font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s;
}
.tier-modal__cta-btn:hover { background: #1e40af; color: #fff; }
@media (max-width: 640px) {
    .tier-modal { max-height: 96vh; border-radius: 12px; }
    .tier-modal__header { padding: 16px 16px 14px; }
    .tier-modal__body { padding: 0 16px 4px; }
    .tier-modal__footer { padding: 12px 16px 16px; }
    .tier-modal__title { font-size: 19px; }
    .tier-modal__price { font-size: 22px; }
    .tier-modal__equip-table th:nth-child(2),
    .tier-modal__equip-table td:nth-child(2) { display: none; }
}

/* === TECH PAGE LINK CTA === */
.solution-detail-page .sd-tech-cta-section { padding: 32px 0; background: #f8faff; }
.sd-tech-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: #fff; border: 2px solid #bfdbfe; border-radius: 14px;
    padding: 24px 32px;
}
.sd-tech-cta__content { display: flex; align-items: center; gap: 16px; }
.sd-tech-cta__icon { font-size: 28px; color: #2563eb; flex-shrink: 0; }
.sd-tech-cta__title { font-size: 18px; font-weight: 700; color: #1e3a5f; margin: 0 0 4px; }
.sd-tech-cta__desc { font-size: 15px; color: #4b5563; margin: 0; }
.sd-tech-cta__btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    background: #1d4ed8; color: #fff; padding: 12px 24px; border-radius: 8px;
    font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s;
    white-space: nowrap;
}
.sd-tech-cta__btn:hover { background: #1e40af; color: #fff; }

/* === 5-STEP JOURNEY === */
.sd-journey-section { padding: 60px 0; background: #f8faff; }
.solution-detail-page .sd-journey-section { background: #fff; }
.sd-journey { list-style: none; margin: 0; padding: 0; counter-reset: journey-step; display: flex; flex-direction: column; gap: 0; }
.sd-journey__step {
    display: flex; gap: 24px; align-items: flex-start;
    padding: 24px 0; border-bottom: 1px dashed #e5e7eb;
}
.sd-journey__step:last-child { border-bottom: none; }
.sd-journey__num {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    background: #1d4ed8; color: #fff; font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.sd-journey__body { flex: 1; }
.sd-journey__title { font-size: 18px; font-weight: 700; color: #1e3a5f; margin: 0 0 6px; }
.sd-journey__desc { font-size: 16px; color: #374151; margin: 0 0 8px; line-height: 1.65; }
.sd-journey__time { font-size: 14px; color: #6b7280; display: inline-flex; align-items: center; gap: 6px; }

/* ===================================================================
   HERO BENEFIT PILLS (.sd-hero-benefits)
=================================================================== */
.sd-hero-benefits {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.sd-hero-benefits li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; color: rgba(255,255,255,.92); line-height: 1.5;
}
.sd-hero-benefits li i { color: #60a5fa; flex-shrink: 0; margin-top: 3px; }

/* ===================================================================
   TIER PROFILE BLOCK (.sd-tier__profile)
   "Phù hợp / Giải quyết / Nâng cấp" rows inside each tier
=================================================================== */
.sd-tier__profile {
    border-top: 1px dashed #e2e8f0; border-bottom: 1px dashed #e2e8f0;
    margin: 12px 0; padding: 10px 0; display: flex; flex-direction: column; gap: 7px;
}
.sd-tier__profile-item {
    display: flex; flex-direction: column; gap: 2px; font-size: 13px;
}
.sd-tier__profile-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #64748b;
}
.sd-tier__profile-item span:not(.sd-tier__profile-label) { color: #374151; line-height: 1.45; }
.sd-tier__profile-item--upgrade .sd-tier__profile-label { color: #9333ea; }
.sd-tier__profile-item--upgrade span:not(.sd-tier__profile-label) { color: #6b21a8; }
.sd-tier--essential .sd-tier__profile { border-color: #d1fae5; }
.sd-tier--premium .sd-tier__profile { border-color: #bfdbfe; }
.sd-tier--signature .sd-tier__profile { border-color: #e9d5ff; }
/* checklist premium items */
.sd-checklist__item--premium .sd-checklist__box { border-color: #818cf8; }
.sd-checklist__item--premium strong { color: #3730a3; }

/* ===================================================================
   CASE STUDIES (.sd-cases-section)
=================================================================== */
.sd-cases-section { padding: 64px 0 32px; background: #f8faff; }
.sd-cases { display: flex; flex-direction: column; gap: 24px; }
.sd-case {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 20px 22px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sd-case__tag {
    display: inline-block; background: #eff6ff; color: #1d4ed8;
    border: 1px solid #bfdbfe; border-radius: 20px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 12px; margin-bottom: 8px;
}
.sd-case__location {
    font-size: 13px; color: #6b7280; margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.sd-case__location i { color: #9ca3af; }
.sd-case__body {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start;
}
.sd-case__col-label {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #6b7280; margin-bottom: 4px;
}
.sd-case__col p { font-size: 14px; color: #374151; line-height: 1.6; margin: 0; }
.sd-case__col--result { background: #f0fdf4; border-radius: 8px; padding: 10px 12px; }
.sd-case__col--result .sd-case__col-label { color: #16a34a; }
.sd-case__col--result p { color: #166534; }

/* Dynamic case card: image row + content + detail link */
.sd-case__image { margin: -20px -22px 18px; border-radius: 12px 12px 0 0; overflow: hidden; }
.sd-case__img-link { display: block; }
.sd-case__img { width: 100%; height: 260px; object-fit: cover; display: block; }
.sd-case__content { }
.sd-case__detail-link {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 16px; color: #1d4ed8; font-size: 14px; font-weight: 600;
    text-decoration: none; transition: gap .2s;
}
.sd-case__detail-link:hover { gap: 10px; color: #1e40af; }
.sd-cases__all-link { text-align: center; margin-top: 28px; }
/* sp-btn-ghost override — inside light-bg cases section (fix white-on-white) */
.sd-cases__all-link .sp-btn-ghost {
    color: #1d4ed8;
    border-color: #3b82f6;
    background: transparent;
}
.sd-cases__all-link .sp-btn-ghost:hover {
    background: #eff6ff;
    color: #1e40af;
    border-color: #1d4ed8;
}
@media (max-width: 800px) {
    .sd-case__body { grid-template-columns: 1fr; }
    .sd-case__img { height: 200px; }
}

/* === PROJECT DETAIL: Case sections (Tình trạng / Giải pháp / Kết quả) === */
.proj-case-sections {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    margin: 28px 0 0;
}
.proj-case-section {
    background: #f8faff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px;
}
.proj-case-section--result { background: #f0fdf4; border-color: #bbf7d0; }
.proj-case-section__label {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #6b7280; margin-bottom: 6px;
}
.proj-case-section--result .proj-case-section__label { color: #16a34a; }
.proj-case-section__text { font-size: 14px; color: #374151; line-height: 1.65; margin: 0; }
.proj-case-section--result .proj-case-section__text { color: #166534; }

/* === PROJECT DETAIL: Gallery === */
.proj-gallery { margin-top: 32px; }
.proj-gallery__title {
    font-size: 18px; font-weight: 700; color: #1a1a2e;
    margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #0a6bc1;
}
.proj-gallery__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.proj-gallery__item { margin: 0; }
.proj-gallery__img {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: 8px; display: block; border: 1px solid #e2e8f0;
}
.proj-gallery__caption {
    font-size: 12px; color: #6b7280; text-align: center; margin-top: 6px;
    font-style: italic; line-height: 1.4;
}
@media (max-width: 640px) {
    .proj-case-sections { grid-template-columns: 1fr; }
    .proj-gallery__grid { grid-template-columns: 1fr; }
    .proj-gallery__img { height: 190px; }
}

/* === RESPONSIVE: Tiers (2-col tablet, 1-col mobile) === */
@media (max-width: 900px) {
    .sd-tiers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .sd-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sd-tiers { grid-template-columns: 1fr; }
    .sd-tech-cta { flex-direction: column; align-items: flex-start; }
    .sd-tech-cta__btn { width: 100%; justify-content: center; }
}

/* ===================================================================
   TECH PREVIEW DIAGRAM (.sd-tech-preview-section)
   Tóm tắt kiến trúc /ky-thuat — hiển thị dưới sd-tech-cta (VIL/MAN)
=================================================================== */
.sd-tech-preview-section { padding: 0 0 40px; background: #f8faff; }
.sd-tech-preview {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.sd-tp-intro { margin-bottom: 14px; }
.sd-tp-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 12px; border-radius: 20px;
}
/* 5-layer pipeline */
.sd-tp-arch {
    display: flex; align-items: stretch; overflow-x: auto;
    gap: 0; -webkit-overflow-scrolling: touch;
    margin-bottom: 16px; padding-bottom: 2px;
}
.sd-tp-layer {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 12px 10px; border-radius: 8px; min-width: 0; flex: 1;
}
.sd-tp-layer i { font-size: 20px; margin-bottom: 2px; }
.sd-tp-layer strong { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sd-tp-layer span { font-size: 13px; font-weight: 700; color: #1e293b; line-height: 1.35; }
.sd-tp-layer small { font-size: 11px; color: #64748b; line-height: 1.4; }
.sd-tp-layer--1 { background: #f0fdf4; } .sd-tp-layer--1 i { color: #16a34a; }
.sd-tp-layer--2 { background: #eff6ff; } .sd-tp-layer--2 i { color: #2563eb; }
.sd-tp-layer--3 { background: #fff7ed; } .sd-tp-layer--3 i { color: #ea580c; }
.sd-tp-layer--4 { background: #faf5ff; } .sd-tp-layer--4 i { color: #7c3aed; }
.sd-tp-layer--5 { background: #f0fdf4; } .sd-tp-layer--5 i { color: #059669; }
.sd-tp-sep { display: flex; align-items: center; padding: 0 5px; color: #cbd5e1; font-size: 20px; flex-shrink: 0; }
/* Mini flowchart */
.sd-tp-flow {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0; border-top: 1px solid #e2e8f0;
    margin-bottom: 14px; flex-wrap: wrap;
}
.sd-tp-flow__node {
    background: #2563eb; color: #fff; border-radius: 8px;
    padding: 8px 16px; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
}
.sd-tp-flow__arrow { font-size: 22px; color: #94a3b8; flex-shrink: 0; }
.sd-tp-flow__branches { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.sd-tp-flow__branch {
    display: flex; flex-direction: column; gap: 3px;
    padding: 8px 14px; border-radius: 8px; flex: 1; min-width: 160px;
}
.sd-tp-flow__branch i { margin-right: 4px; }
.sd-tp-flow__branch strong { font-size: 14px; font-weight: 700; }
.sd-tp-flow__branch small { font-size: 12px; opacity: .8; }
.sd-tp-flow__branch--hot { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.sd-tp-flow__branch--cold { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
/* Footer */
.sd-tp-footer {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    border-top: 1px solid #f1f5f9; padding-top: 12px;
}
.sd-tp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px;
    padding: 4px 12px; font-size: 12px; color: #475569;
}
.sd-tp-more {
    margin-left: auto; font-size: 14px; font-weight: 700; color: #2563eb;
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.sd-tp-more:hover { color: #1d4ed8; text-decoration: underline; }
@media (max-width: 700px) {
    .sd-tp-layer { min-width: 82px; padding: 10px 6px; }
    .sd-tp-layer span { font-size: 13px; }
    .sd-tp-layer small { display: none; }
    .sd-tp-sep { padding: 0 2px; font-size: 16px; }
    .sd-tp-flow { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sd-tp-flow__branches { flex-direction: column; }
    .sd-tp-footer { flex-direction: column; align-items: flex-start; }
    .sd-tp-more { margin-left: 0; }
}

/* ===================================================================
   SOLUTION TECHNICAL PAGE (.solution-technical-page)
   URL: /giai-phap/{slug}/ky-thuat
=================================================================== */
.solution-technical-page .st-intro {
    background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%);
    color: #fff; padding: 48px 0;
}
.st-intro__inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.st-intro__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); color: #e0f2fe;
    font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 20px;
    margin-bottom: 16px;
}
.st-intro__title { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.25; }
.st-intro__title-name { display: block; color: #93c5fd; }
.st-intro__desc { font-size: 16px; color: #bfdbfe; margin: 0 0 24px; line-height: 1.7; max-width: 700px; }
.st-intro__nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.st-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: #93c5fd; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: color .15s;
}

/* ============================================================
   === SD-JOURNEY DETAIL LINK — link into /quy-trinh/{slug}
   Scoped: .solution-detail-page (biet-thu journey section)
   ============================================================ */
.sd-journey__detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0077cc;
    text-decoration: none;
    transition: color .15s, gap .15s;
}
.sd-journey__detail-link:hover { color: #005fa3; gap: 10px; }
.sd-journey__detail-link i { font-size: 12px; }

/* ============================================================
   === PROCESS STEP PAGE — /quy-trinh/{slug}
   CSS prefix: ps- (process-step)
   Body class: process-step-page
   ============================================================ */

/* --- Step Indicator --- */
.ps-step-indicator {
    background: #f0f4f8;
    border-bottom: 1px solid #dde3ec;
    padding: 12px 0;
    overflow-x: auto;
}
.ps-step-indicator__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ps-step-indicator__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.ps-step-indicator__item:hover { background: #e2e8f0; color: #1e3a5f; }
.ps-step-indicator__item--active { background: #0077cc; color: #fff; }
.ps-step-indicator__item--active:hover { background: #005fa3; color: #fff; }
.ps-step-indicator__num { font-size: 15px; font-weight: 800; }
.ps-step-indicator__label { font-size: 12px; }
.ps-step-indicator__sep {
    width: 20px;
    height: 1px;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* --- Hero --- */
.ps-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #0077cc 100%);
    color: #fff;
    padding: 48px 0 40px;
}
.ps-hero__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.ps-hero__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.ps-hero__num {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}
.ps-hero__of { font-size: 16px; color: rgba(255,255,255,.6); }
.ps-hero__content { flex: 1; }
.ps-hero__title { font-size: 30px; font-weight: 800; margin: 0 0 12px; line-height: 1.25; }
.ps-hero__desc { font-size: 18px; color: rgba(255,255,255,.9); margin: 0 0 16px; line-height: 1.7; }
.ps-hero__meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ps-hero__time,
.ps-hero__timeline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 4px 12px;
}

/* === PS HERO IMAGE === */
.ps-hero-image { max-width: 960px; margin: 0 auto; padding: 32px 20px 0; }
.ps-hero-image__img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; }

/* === PS GALLERY === */
.ps-section--gallery { padding: 40px 0 16px; }
.ps-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ps-gallery__item { margin: 0; }
.ps-gallery__img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; display: block; }
.ps-gallery__caption { font-size: 13px; color: #666; text-align: center; margin-top: 8px; font-style: italic; line-height: 1.4; }
@media (max-width: 767px) {
    .ps-gallery { grid-template-columns: 1fr; }
    .ps-gallery__img { height: 200px; }
}

/* --- Generic section wrapper --- */
.ps-section { padding: 48px 0; }
.ps-section + .ps-section { padding-top: 0; }
.ps-section__inner { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.ps-section__title {
    font-size: 22px;
    font-weight: 700;
    color: #1e3a5f;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ps-section__title i { color: #0077cc; }
.ps-section__body { font-size: 16px; color: #374151; line-height: 1.75; margin: 0; }

/* --- Why (light blue bg) --- */
.ps-section--why { background: #f0f7ff; border-top: 3px solid #0077cc; }

/* --- Tools --- */
.ps-tools { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-tools__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: #f8faff; border-radius: 8px; border-left: 3px solid #0077cc; }
.ps-tools__name { font-size: 16px; font-weight: 600; color: #1e3a5f; }
.ps-tools__note { font-size: 14px; color: #6b7280; margin-left: auto; }

/* --- Customer checklist (ordered) --- */
.ps-items { padding-left: 24px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-item { font-size: 16px; color: #374151; line-height: 1.65; padding: 4px 0; }

/* --- Standards/Maintenance table --- */
.ps-section--table { background: #fafbff; }
.ps-table-wrap { overflow-x: auto; margin-top: 4px; }
.ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.ps-table th {
    background: #1e3a5f;
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}
.ps-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    vertical-align: top;
}
.ps-table tr:nth-child(even) td { background: #f0f4f8; }
.ps-table__note { margin-top: 10px; font-size: 13px; color: #6b7280; display: flex; align-items: flex-start; gap: 6px; }
.ps-table__note i { color: #0077cc; flex-shrink: 0; margin-top: 2px; }

/* --- Deliverables (highlight box) --- */
.ps-section--deliverables { background: #f0fff4; border-top: 3px solid #22c55e; }
.ps-deliverables { border-radius: 12px; padding: 28px 32px; background: #fff; border: 1px solid #bbf7d0; }
.ps-deliverables__title {
    font-size: 22px;
    font-weight: 700;
    color: #15803d;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ps-deliverables__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-deliverables__item { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: #374151; }
.ps-deliverables__item i { color: #22c55e; margin-top: 3px; flex-shrink: 0; }

/* --- Staff SOP (<details> collapsible) --- */
.ps-section--sop { background: #fffbeb; border-top: 3px solid #f59e0b; }
.ps-sop {
    border: 1px solid #fde68a;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.ps-sop__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
    cursor: pointer;
    background: #fffbeb;
    list-style: none;
    user-select: none;
}
.ps-sop__summary::-webkit-details-marker { display: none; }
.ps-sop__summary i { color: #f59e0b; }
.ps-sop__toggle-hint { font-size: 13px; font-weight: 400; color: #b45309; margin-left: auto; }
.ps-sop[open] .ps-sop__summary { border-bottom: 1px solid #fde68a; }
.ps-sop__body { padding: 20px 24px; }
.ps-sop__title { font-size: 17px; font-weight: 700; color: #78350f; margin: 0 0 14px; }
.ps-sop__checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-sop__item { padding: 2px 0; }
.ps-sop__label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #374151; cursor: pointer; }
.ps-sop__checkbox { margin-top: 3px; flex-shrink: 0; accent-color: #f59e0b; width: 16px; height: 16px; }
.ps-sop__notes {
    margin-top: 20px;
    padding: 14px 16px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 15px;
    color: #78350f;
    border-left: 3px solid #f59e0b;
}
.ps-sop__notes strong { display: block; margin-bottom: 6px; }
.ps-sop__notes p { margin: 0; line-height: 1.7; }

/* --- Step Navigation --- */
.ps-nav { background: #f8faff; border-top: 1px solid #e2e8ef; padding: 32px 0; }
.ps-nav__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.ps-nav__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 10px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dde3ec;
    color: #374151;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
    flex: 1;
    max-width: 320px;
}
.ps-nav__btn:hover { border-color: #0077cc; box-shadow: 0 2px 8px rgba(0,119,204,.12); }
.ps-nav__btn--next { justify-content: flex-end; margin-left: auto; }
.ps-nav__btn--cta { border-color: #0077cc; background: #0077cc; color: #fff; }
.ps-nav__btn--cta:hover { background: #005fa3; border-color: #005fa3; }
.ps-nav__btn span { display: flex; flex-direction: column; gap: 2px; }
.ps-nav__btn small { font-size: 12px; color: #6b7280; font-weight: 400; }
.ps-nav__btn--cta small { color: rgba(255,255,255,.8); }
.ps-nav__btn strong { font-size: 15px; font-weight: 700; color: #1e3a5f; }
.ps-nav__btn--cta strong { color: #fff; }
.ps-nav__btn i { font-size: 20px; color: #0077cc; flex-shrink: 0; }
.ps-nav__btn--cta i { color: #fff; }

/* --- CTA Section --- */
.ps-cta { padding: 56px 0; background: linear-gradient(135deg, #1e3a5f 0%, #0077cc 100%); text-align: center; }
.ps-cta__inner { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.ps-cta__title { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.ps-cta__desc { font-size: 17px; color: rgba(255,255,255,.9); margin: 0 0 28px; line-height: 1.7; }
.ps-cta__actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.ps-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
}
.ps-cta__btn:hover { opacity: .92; transform: translateY(-1px); }
.ps-cta__btn--primary { background: #f59e0b; color: #fff; }
.ps-cta__btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* --- Responsive: process-step page --- */
@media (max-width: 768px) {
    .ps-step-indicator__label { display: none; }
    .ps-hero__inner { flex-direction: column; gap: 16px; }
    .ps-hero__num { font-size: 40px; }
    .ps-hero__title { font-size: 22px; }
    .ps-hero__desc { font-size: 16px; }
    .ps-nav__inner { flex-direction: column; }
    .ps-nav__btn { max-width: 100%; }
    .ps-deliverables { padding: 20px 16px; }
    .ps-sop__body { padding: 16px; }
    .ps-cta__title { font-size: 22px; }
}
@media (max-width: 480px) {
    .ps-hero { padding: 32px 0 28px; }
    .ps-section__title { font-size: 18px; }
    .ps-item { font-size: 14px; }
    .ps-tools__item { flex-wrap: wrap; }
    .ps-tools__note { margin-left: 0; }
    .ps-table { font-size: 13px; }
    .ps-table th, .ps-table td { padding: 7px 10px; }
    .ps-cta__btn { width: 100%; justify-content: center; }
}
.st-back-link:hover { color: #fff; }
.st-back-nav { margin-top: 20px; }
.solution-technical-page .sp-arch-section,
.solution-technical-page .sp-flowchart-section,
.solution-technical-page .sp-pids-section,
.solution-technical-page .sp-linked-problems-section { display: block; }

@media (max-width: 600px) {
    .st-intro__title { font-size: 24px; }
    .st-intro__nav { flex-direction: column; align-items: flex-start; }
}

/* === BOTTOM CTA === */
.solution-detail-page .sp-bottom-cta { padding: 60px 0; background: linear-gradient(135deg, #0a3d7a, #0a6bc1); color: #fff; }
.sp-bottom-cta__card { max-width: 700px; margin: 0 auto; text-align: center; }
.sp-bottom-cta__title { font-size: 28px; font-weight: 800; margin: 0 0 14px; }
.sp-bottom-cta__desc { font-size: 16px; opacity: .85; line-height: 1.7; margin: 0 0 28px; }
.sp-bottom-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sp-bottom-cta__contact { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.sp-contact-link { color: rgba(255,255,255,.85); text-decoration: none; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.sp-contact-link:hover { color: #fff; }


/* =========================================================================
   FILTER COMPONENT DETAIL PAGE  (.fc-detail-page)
   Trang chi tiết thiết bị lọc  /thiet-bi-loc/{slug}
   ========================================================================= */

/* === BREADCRUMB === */
.incas-breadcrumb { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.incas-breadcrumb__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.incas-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.incas-breadcrumb__item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #64748b; }
.incas-breadcrumb__item + .incas-breadcrumb__item::before { content: '/'; color: #cbd5e1; }
.incas-breadcrumb__item a { color: #3b82f6; text-decoration: none; }
.incas-breadcrumb__item a:hover { text-decoration: underline; }
.incas-breadcrumb__current { color: #1e293b; font-weight: 500; }

/* === HERO === */
.fc-hero { background: #fff; padding: 48px 0 40px; }
.fc-hero__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fc-hero__image-wrap { border-radius: 12px; overflow: hidden; background: #f1f5f9; }
.fc-hero__image { width: 100%; height: auto; display: block; }
.fc-hero__image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; gap: 12px; color: #94a3b8; font-size: 14px; background: #f8fafc; }
.fc-hero__category { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #3b82f6; font-weight: 600; margin: 0 0 10px; }
.fc-hero__name { font-size: 28px; font-weight: 700; color: #1e293b; line-height: 1.3; margin: 0 0 16px; }
.fc-hero__desc { font-size: 16px; color: #475569; line-height: 1.7; margin: 0 0 20px; }
.fc-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 16px; margin-bottom: 24px; }
.fc-hero__badge--long { background: #f0fdf4; border-color: #bbf7d0; }
.fc-hero__badge-label { font-size: 13px; color: #64748b; }
.fc-hero__badge-value { font-size: 15px; font-weight: 700; color: #1d4ed8; }
.fc-hero__badge--long .fc-hero__badge-value { color: #15803d; }
.fc-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* === BUTTONS === */
.fc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, border-color .2s; cursor: pointer; border: 2px solid transparent; }
.fc-btn--primary { background: #1e40af; color: #fff; border-color: #1e40af; }
.fc-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.fc-btn--outline { background: transparent; color: #1e40af; border-color: #1e40af; }
.fc-btn--outline:hover { background: #eff6ff; }
.fc-btn--ghost { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.fc-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.fc-btn--lg { padding: 14px 32px; font-size: 16px; }

/* === GALLERY === */
.fc-gallery { padding: 24px 0; background: #f8fafc; }
.fc-gallery__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.fc-gallery__item img { width: 200px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; }

/* === VẬT LIỆU LỌC === */
.fc-media-block { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 32px 0; }
.fc-media-block__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.fc-media-block__title { font-size: 20px; font-weight: 700; color: #1e40af; margin: 0 0 12px; }
.fc-media-block__text { font-size: 16px; color: #334155; line-height: 1.7; margin: 0; }

/* === SPECS TABLE === */
.fc-specs { padding: 40px 0; background: #fff; }
.fc-specs__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.fc-specs__title { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 20px; }
.fc-specs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fc-specs-table tr { border-bottom: 1px solid #f1f5f9; }
.fc-specs-table tr:last-child { border-bottom: none; }
.fc-specs-table__label { width: 38%; padding: 12px 16px 12px 0; font-weight: 600; color: #475569; vertical-align: top; }
.fc-specs-table__value { padding: 12px 0; color: #1e293b; vertical-align: top; line-height: 1.6; }

/* === CONTENT BODY === */
.fc-content { padding: 40px 0; background: #f8fafc; }
.fc-content-body { max-width: 820px; margin: 0 auto; padding: 0 20px; font-size: 16px; color: #334155; line-height: 1.8; }
.fc-content-body h2 { font-size: 22px; font-weight: 700; color: #1e293b; margin: 32px 0 12px; }
.fc-content-body h2:first-child { margin-top: 0; }
.fc-content-body p { margin: 0 0 16px; }
.fc-content-body ul, .fc-content-body ol { margin: 0 0 16px; padding-left: 24px; }
.fc-content-body li { margin-bottom: 8px; }
.fc-content-body strong { color: #1e293b; }

/* === KNOWLEDGE ARTICLE BODY LISTS === */
.knowledge-article-body ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0 0 16px;
}

.knowledge-article-body ol {
    list-style: decimal;
    padding-left: 24px;
    margin: 0 0 16px;
}

.knowledge-article-body li {
    margin-bottom: 8px;
}

/* === CTA BOTTOM === */
.fc-cta-bottom { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); color: #fff; padding: 60px 0; text-align: center; }
.fc-cta-bottom__inner { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.fc-cta-bottom__title { font-size: 26px; font-weight: 700; margin: 0 0 14px; }
.fc-cta-bottom__desc { font-size: 16px; opacity: .85; line-height: 1.7; margin: 0 0 28px; }
.fc-cta-bottom__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* === PID stage item link (solution-detail.php) === */
.sp-stage-item__name--link { display: block; font-size: 15px; font-weight: 600; color: #1d4ed8; text-decoration: none; transition: color .2s; }
.sp-stage-item__name--link:hover { color: #1e40af; text-decoration: underline; }
.sp-stage-item__name--link .fa-arrow-right { font-size: 11px; opacity: .7; margin-left: 4px; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .fc-hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .fc-hero__name { font-size: 22px; }
    .fc-hero__desc { font-size: 15px; }
    .fc-specs-table__label { width: 45%; font-size: 14px; }
    .fc-specs-table__value { font-size: 14px; }
    .fc-content-body h2 { font-size: 18px; }
    .fc-content-body { font-size: 15px; }
    .fc-cta-bottom__title { font-size: 22px; }
    .fc-cta-bottom__btns { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .fc-hero { padding: 24px 0 20px; }
    .fc-hero__name { font-size: 20px; }
    .fc-hero__cta { flex-direction: column; }
    .fc-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SOLUTION TIER PAGES — .solution-tier-page
   /giai-phap/goi-essential | goi-premium | goi-signature
   ============================================================ */

/* === HERO === */
.solution-tier-page .st-hero {
    padding: 48px 0 40px;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: #fff;
    text-align: center;
}
.solution-tier-page .st-hero--premium {
    background: linear-gradient(135deg, #1a6b3a 0%, #0d3d22 100%);
}
.solution-tier-page .st-hero--signature {
    background: linear-gradient(135deg, #6b1a1a 0%, #3d0d0d 100%);
}
.solution-tier-page .st-hero__popular-badge {
    display: inline-block;
    background: #f59e0b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: .5px;
}
.solution-tier-page .st-hero__label-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}
.solution-tier-page .st-hero__label-wrap--stack {
    flex-direction: column;
    gap: 6px;
}
.solution-tier-page .st-hero__tier-label {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
}
.solution-tier-page .st-hero__popular-badge--inline {
    margin-bottom: 0;
    margin-left: 10px;
    vertical-align: middle;
    font-size: 12px;
    padding: 3px 10px;
}
.solution-tier-page .st-hero__tier-type {
    font-size: 15px;
    opacity: .75;
    font-weight: 400;
}
.solution-tier-page .st-hero__price {
    font-size: 28px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 10px;
}
.solution-tier-page .st-hero__tagline {
    font-size: 18px;
    opacity: .88;
    margin-bottom: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.solution-tier-page .st-hero__desc {
    font-size: 16px;
    opacity: .8;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto 28px;
}
.solution-tier-page .st-hero__cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.solution-tier-page .st-hero__note {
    font-size: 14px;
    opacity: .65;
}

/* === PROFILE GRID === */
.solution-tier-page .st-profile-section {
    padding: 48px 0;
    background: #f8f9fa;
}
.solution-tier-page .st-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.solution-tier-page .st-profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.solution-tier-page .st-profile-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}
.solution-tier-page .st-profile-card--for .st-profile-card__icon    { background: #e0f2fe; color: #0277bd; }
.solution-tier-page .st-profile-card--priority .st-profile-card__icon { background: #e8f5e9; color: #2e7d32; }
.solution-tier-page .st-profile-card--upgrade .st-profile-card__icon  { background: #fff3e0; color: #e65100; }
.solution-tier-page .st-profile-card__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #888;
    font-weight: 700;
    margin-bottom: 8px;
}
.solution-tier-page .st-profile-card__text {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
}
.solution-tier-page .st-profile-card__link {
    font-size: 15px;
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}
.solution-tier-page .st-profile-card__link:hover { text-decoration: underline; }

/* === HERO SYS-STRIP === */
.solution-tier-page .st-hero__sys-strip {
    margin-top: 28px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
}
.solution-tier-page .st-hero__sys-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
}
.solution-tier-page .st-hero__sys-comps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.solution-tier-page .st-hero__sys-comp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    color: rgba(255,255,255,0.95);
    font-size: 13px;
    font-weight: 600;
}
.solution-tier-page .st-hero__sys-arrow { color: rgba(255,255,255,0.4); font-size: 13px; }

/* === EQUIP CARDS === */
.solution-tier-page .st-equip-section { padding: 48px 0 40px; }
.solution-tier-page .st-equip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.solution-tier-page .st-equip-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}
.solution-tier-page .st-equip-card__ico {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.solution-tier-page .st-equip-card__body { flex: 1; }
.solution-tier-page .st-equip-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.solution-tier-page .st-equip-card__role { font-size: 14px; color: #444; margin: 0 0 12px; line-height: 1.45; }
.solution-tier-page .st-equip-card__meta { display: flex; flex-direction: column; gap: 6px; }
.solution-tier-page .st-equip-card__meta-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: #666;
}
.solution-tier-page .st-equip-card__meta-item i { color: #90a4ae; font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.solution-tier-page .st-equip-meta {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    background: #f0f7ff;
    border-radius: 10px;
    padding: 18px 24px;
}
.solution-tier-page .st-equip-meta__item { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #333; }
.solution-tier-page .st-equip-meta__item i { color: #1565c0; font-size: 17px; }

/* === BEFORE / AFTER === */
.solution-tier-page .st-before-after-section { padding: 48px 0; background: #fafbfc; }
.solution-tier-page .st-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.solution-tier-page .st-ba-col { border-radius: 12px; padding: 24px; }
.solution-tier-page .st-ba-col--before { background: #fff5f5; border: 1px solid #ffcdd2; }
.solution-tier-page .st-ba-col--after  { background: #f0fdf4; border: 1px solid #a7f3d0; }
.solution-tier-page .st-ba-col__hd {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.solution-tier-page .st-ba-col--before .st-ba-col__hd { color: #c62828; }
.solution-tier-page .st-ba-col--after  .st-ba-col__hd { color: #1b5e20; }
.solution-tier-page .st-ba-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.solution-tier-page .st-ba-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: #333; line-height: 1.4; }
.solution-tier-page .st-ba-col--before .st-ba-list li i { color: #e53935; font-size: 13px; margin-top: 3px; flex-shrink: 0; }
.solution-tier-page .st-ba-col--after  .st-ba-list li i { color: #43a047; font-size: 13px; margin-top: 3px; flex-shrink: 0; }

/* === INSTALL LAYOUTS === */
.solution-tier-page .st-layouts-section { padding: 48px 0 40px; }
.solution-tier-page .st-layouts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.solution-tier-page .st-layout-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.solution-tier-page .st-layout-card__ico {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #e3f2fd;
    color: #1565c0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.solution-tier-page .st-layout-card__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.solution-tier-page .st-layout-card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0; }
.solution-tier-page .st-layout-card__note {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: #1565c0;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.solution-tier-page .st-layout-card__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.solution-tier-page .st-layout-card__items li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #444; }
.solution-tier-page .st-layout-card__items li i { color: #1565c0; font-size: 12px; margin-top: 3px; flex-shrink: 0; }

/* === MID CTA === */
.solution-tier-page .st-mid-cta-section {
    padding: 40px 0;
    background: #f0f7ff;
}
.solution-tier-page .st-mid-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.solution-tier-page .st-mid-cta__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.solution-tier-page .st-mid-cta__desc {
    font-size: 16px;
    color: #555;
    max-width: 560px;
}
.solution-tier-page .st-mid-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1565c0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s, transform .1s;
}
.solution-tier-page .st-mid-cta__btn:hover { background: #1248a0; transform: translateY(-1px); }

/* === COMPARE GRID === */
.solution-tier-page .st-compare-section {
    padding: 56px 0;
    background: #f8f9fa;
}
.solution-tier-page .st-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.solution-tier-page .st-compare-card {
    background: #fff;
    border: 2px solid #e8eaed;
    border-radius: 14px;
    padding: 28px 22px;
    position: relative;
    transition: border-color .2s;
}
.solution-tier-page .st-compare-card--active {
    border-color: #1565c0;
    box-shadow: 0 4px 20px rgba(21,101,192,.12);
}
.solution-tier-page .st-compare-card__popular {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}
.solution-tier-page .st-compare-card__name {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.solution-tier-page .st-compare-card__price {
    font-size: 16px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 8px;
}
.solution-tier-page .st-compare-card__tagline {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
}
.solution-tier-page .st-compare-card__modules {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.solution-tier-page .st-compare-card__modules li {
    font-size: 14px;
    color: #444;
    padding: 4px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.solution-tier-page .st-compare-card__modules li .fas.fa-check { color: #2e7d32; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.solution-tier-page .st-compare-card__more { color: #888; font-style: italic; }
.solution-tier-page .st-compare-card__current {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #1565c0;
    border: 1px solid #1565c0;
    padding: 4px 12px;
    border-radius: 20px;
}
.solution-tier-page .st-compare-card__link {
    font-size: 15px;
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}
.solution-tier-page .st-compare-card__link:hover { text-decoration: underline; }

/* === FAQ === */
.solution-tier-page .st-faq-section {
    padding: 56px 0;
}
.solution-tier-page .st-faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.solution-tier-page .st-faq-item {
    border-bottom: 1px solid #e8eaed;
}
.solution-tier-page .st-faq-item__q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    line-height: 1.5;
}
.solution-tier-page .st-faq-item__icon {
    flex-shrink: 0;
    font-size: 14px;
    color: #1565c0;
    transition: transform .2s;
    margin-top: 3px;
}
.solution-tier-page .st-faq-item__q[aria-expanded="true"] .st-faq-item__icon { transform: rotate(180deg); }
.solution-tier-page .st-faq-item__a {
    padding: 0 0 20px;
}
.solution-tier-page .st-faq-item__a p {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
}

/* === PROCESS STEPS === */
.solution-tier-page .st-process-section {
    padding: 56px 0;
    background: #f8f9fa;
}
.solution-tier-page .st-process-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 720px;
    margin: 0 auto;
    counter-reset: process-step;
}
.solution-tier-page .st-process-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid #e8eaed;
}
.solution-tier-page .st-process-step:last-child { border-bottom: none; }
.solution-tier-page .st-process-step__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1565c0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solution-tier-page .st-process-step__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.solution-tier-page .st-process-step__desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* === FINAL CTA === */
.solution-tier-page .st-final-cta-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: #fff;
    text-align: center;
}
.solution-tier-page .st-final-cta__title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 14px;
}
.solution-tier-page .st-final-cta__desc {
    font-size: 17px;
    opacity: .85;
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.solution-tier-page .st-final-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* === TIER NAV === */
.solution-tier-page .st-tier-nav {
    padding: 28px 0;
    border-top: 1px solid #e8eaed;
    background: #fff;
}
.solution-tier-page .st-tier-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.solution-tier-page .st-tier-nav__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    transition: border-color .2s, background .2s;
    max-width: 280px;
}
.solution-tier-page .st-tier-nav__link:hover { border-color: #1565c0; background: #f0f7ff; }
.solution-tier-page .st-tier-nav__link--next { text-align: right; }
.solution-tier-page .st-tier-nav__dir {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}
.solution-tier-page .st-tier-nav__name {
    font-size: 15px;
    color: #1565c0;
    font-weight: 700;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .solution-tier-page .st-profile-grid { grid-template-columns: 1fr; }
    .solution-tier-page .st-compare-grid { grid-template-columns: 1fr; gap: 16px; }
    .solution-tier-page .st-mid-cta { flex-direction: column; text-align: center; }
    .solution-tier-page .st-mid-cta__desc { max-width: 100%; }
}
@media (max-width: 600px) {
    .solution-tier-page .st-hero__tier-label { font-size: 28px; }
    .solution-tier-page .st-hero__price { font-size: 22px; }
    .solution-tier-page .st-hero__tagline { font-size: 16px; }
    .solution-tier-page .st-hero__cta { flex-direction: column; align-items: center; }
    .solution-tier-page .st-equip-cards  { grid-template-columns: 1fr; }
    .solution-tier-page .st-ba-grid      { grid-template-columns: 1fr; }
    .solution-tier-page .st-layouts-grid { grid-template-columns: 1fr; }
    .solution-tier-page .st-equip-meta   { flex-direction: column; gap: 12px; }
    .solution-tier-page .st-hero__sys-comps { gap: 6px; }
    .solution-tier-page .st-hero__sys-comp  { font-size: 12px; padding: 5px 10px; }
    .solution-tier-page .st-tier-nav__inner { flex-direction: column; }
    .solution-tier-page .st-tier-nav__link { max-width: 100%; width: 100%; }
    .solution-tier-page .st-tier-nav__link--next { text-align: left; }
    .solution-tier-page .st-final-cta__title { font-size: 22px; }
    .solution-tier-page .st-final-cta__actions { flex-direction: column; align-items: center; }
}

/* === FLOW DIAGRAM — st-flow-section (vertical stepper, always visible) === */
.solution-tier-page .st-flow-section {
    padding: 64px 0 48px;
    background: #f8fafc;
}

/* Vertical stepper container */
.solution-tier-page .st-flow-steps {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
}

/* Each step row */
.solution-tier-page .st-flow-step {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Left column: number circle + connecting line */
.solution-tier-page .st-flow-step__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    flex-shrink: 0;
    padding-top: 14px;
}
.solution-tier-page .st-flow-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.solution-tier-page .st-flow-step__line {
    flex: 1;
    width: 2px;
    background: #d0dce8;
    margin: 6px 0 0;
    min-height: 20px;
}

/* Card body */
.solution-tier-page .st-flow-step__card {
    display: flex;
    gap: 14px;
    flex: 1;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 12px 14px;
    align-items: flex-start;
    transition: box-shadow 0.2s;
}
.solution-tier-page .st-flow-step__card:hover {
    box-shadow: 0 3px 16px rgba(21,101,192,0.09);
}
.solution-tier-page .st-flow-step--endpoint .st-flow-step__card {
    border-color: #a5d6a7;
    background: #f1f8f2;
}

/* Icon in card */
.solution-tier-page .st-flow-step__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* === FLOW STEP DUAL-COLUMN (left: process, right: suggested machines) === */
.solution-tier-page .st-flow-step__body {
    flex: 1;
    min-width: 0;
}
.solution-tier-page .st-flow-step__body--dual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 16px;
    align-items: start;
}

/* Text content */
.solution-tier-page .st-flow-step__content {
    flex: 1;
    min-width: 0;
}
.solution-tier-page .st-flow-step__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a2b4a;
    line-height: 1.3;
    margin-bottom: 4px;
}
.solution-tier-page .st-flow-step__removes {
    display: inline-block;
    font-size: 12px;
    color: #c62828;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 50px;
    padding: 2px 10px;
    margin-bottom: 7px;
    line-height: 1.6;
}
.solution-tier-page .st-flow-step__removes .fa-times-circle { margin-right: 4px; }
.solution-tier-page .st-flow-step__solves {
    font-size: 14px;
    color: #37474f;
    margin: 0 0 6px;
    line-height: 1.55;
}
.solution-tier-page .st-flow-step__models {
    font-size: 12px;
    color: #546e7a;
    margin: 0 0 7px;
    line-height: 1.4;
}
.solution-tier-page .st-flow-step__models .fa-tag { margin-right: 4px; color: #0277bd; }
.solution-tier-page .st-flow-step__change {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #e65100;
    background: #fff3e0;
    padding: 2px 10px;
    border-radius: 50px;
    white-space: nowrap;
}
.solution-tier-page .st-flow-step__change .fa-clock { margin-right: 4px; }

/* Compact meta line: models + change_months combined */
.solution-tier-page .st-flow-step__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    align-items: center;
    font-size: 12px;
    color: #607d8b;
    margin: 5px 0 0;
    line-height: 1.4;
}
.solution-tier-page .st-flow-step__meta span { display: inline-flex; align-items: center; gap: 3px; }
.solution-tier-page .st-flow-step__meta .fa-tag { color: #0277bd; }
.solution-tier-page .st-flow-step__meta .fa-clock { color: #e65100; }

.solution-tier-page .st-flow-step__machines {
    border: 1px solid #dbe8f5;
    background: #f6fbff;
    border-radius: 10px;
    padding: 12px;
}
.solution-tier-page .st-flow-step__machines-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f4b8a;
    margin: 0 0 8px;
}
.solution-tier-page .st-flow-step__machines-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.solution-tier-page .st-flow-step__machines-list li {
    font-size: 13px;
    color: #234;
    background: #ffffff;
    border: 1px solid #e2ecf7;
    border-radius: 8px;
    padding: 7px 9px;
    line-height: 1.45;
}

/* Branch block */
.solution-tier-page .st-flow-branch-block {
    max-width: 760px;
    margin: 8px auto 0;
    padding-left: 28px;
    border-left: 3px solid #0277bd;
}
.solution-tier-page .st-flow-branch-block__label {
    font-size: 13px;
    font-weight: 700;
    color: #0277bd;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.solution-tier-page .st-flow-branch-block__label .fa-code-branch { margin-right: 6px; }
.solution-tier-page .st-flow-branch-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.solution-tier-page .st-flow-branch-card {
    display: flex;
    gap: 12px;
    background: #f0f7ff;
    border: 1px solid #90caf9;
    border-radius: 10px;
    padding: 14px 16px;
    flex: 1;
    min-width: 220px;
    align-items: flex-start;
}
.solution-tier-page .st-flow-branch-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #daeeff;
    color: #0277bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.solution-tier-page .st-flow-branch-card__body { flex: 1; min-width: 0; }
.solution-tier-page .st-flow-branch-card__body strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 2px;
}
.solution-tier-page .st-flow-branch-card__sub {
    display: block;
    font-size: 12px;
    color: #0277bd;
    margin-bottom: 5px;
}
.solution-tier-page .st-flow-branch-card__solves {
    font-size: 13px;
    color: #37474f;
    margin: 0 0 5px;
    line-height: 1.5;
}
.solution-tier-page .st-flow-branch-card__models {
    font-size: 12px;
    color: #546e7a;
    margin: 0;
}
.solution-tier-page .st-flow-branch-card__models .fa-tag { margin-right: 4px; color: #0277bd; }

/* IoT badge */
.solution-tier-page .st-flow-iot {
    max-width: 760px;
    margin: 20px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1565c0 0%, #0277bd 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}
.solution-tier-page .st-flow-iot .fa-wifi { font-size: 16px; }

/* Responsive — flow */
@media (max-width: 600px) {
    .solution-tier-page .st-flow-step__card { padding: 14px 14px; gap: 10px; }
    .solution-tier-page .st-flow-step__icon { width: 38px; height: 38px; font-size: 17px; }
    .solution-tier-page .st-flow-step__name { font-size: 15px; }
    .solution-tier-page .st-flow-step__body--dual { grid-template-columns: 1fr; }
    .solution-tier-page .st-flow-branch-block { padding-left: 16px; }
    .solution-tier-page .st-flow-branch-card { min-width: 100%; }
}

/* === WATER SUPPLY DIAGRAM v2 — st-wdiag (dual-flow: cold + hot) === */
.solution-tier-page .st-wdiag-section {
    padding: 48px 0 40px;
    background: #f5f7fa;
}
.solution-tier-page .st-wdiag {
    max-width: 860px;
    margin: 0 auto;
}

/* ── Legend ── */
.solution-tier-page .st-wdiag__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: center;
    margin-bottom: 28px;
}
.solution-tier-page .st-wdiag__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}
.solution-tier-page .st-wdiag__legend-line {
    display: inline-block;
    width: 28px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Main pipeline (vertical: source → treatment → tank) ── */
.solution-tier-page .st-wdiag__main-pipe {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Vertical spine connector ── */
.solution-tier-page .st-wdiag__spine {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}
.solution-tier-page .st-wdiag__spine--green { background: #4caf50; }
.solution-tier-page .st-wdiag__spine--blue  { background: #2196f3; }

/* ── Zone (shared base) ── */
.solution-tier-page .st-wdiag__zone {
    width: 100%;
    max-width: 740px;
    border-radius: 12px;
    padding: 16px 20px;
    position: relative;
}
.solution-tier-page .st-wdiag__zone-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #78909c;
    margin-bottom: 8px;
}

/* ── Supply zone ── */
.solution-tier-page .st-wdiag__zone--supply {
    background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
    border: 2px solid #64b5f6;
}
.solution-tier-page .st-wdiag__supply-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.solution-tier-page .st-wdiag__supply-arrow {
    font-size: 18px;
    font-weight: 700;
    color: #90a4ae;
}
.solution-tier-page .st-wdiag__supply-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
}
.solution-tier-page .st-wdiag__supply-item i { font-size: 22px; color: #1565c0; }
.solution-tier-page .st-wdiag__supply-item span { font-size: 12px; color: #333; text-align: center; font-weight: 600; }
.solution-tier-page .st-wdiag__supply-item--source {
    background: #e3f2fd;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #90caf9;
}
.solution-tier-page .st-wdiag__supply-item--source i { color: #0277bd; }

/* ── Treatment zone ── */
.solution-tier-page .st-wdiag__zone--treatment {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border: 2px solid #ffcc02;
}
.solution-tier-page .st-wdiag__treat-stages {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.solution-tier-page .st-wdiag__treat-arrow {
    font-size: 20px;
    color: #bdbdbd;
    font-weight: 700;
}
.solution-tier-page .st-wdiag__treat-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}
.solution-tier-page .st-wdiag__treat-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.solution-tier-page .st-wdiag__treat-stage strong { font-size: 13px; color: #1a1a1a; text-align: center; }
.solution-tier-page .st-wdiag__treat-sub { font-size: 11px; color: #78909c; text-align: center; }

/* ── Tank zone ── */
.solution-tier-page .st-wdiag__zone--tank {
    background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%);
    border: 2px solid #90caf9;
    text-align: center;
}
.solution-tier-page .st-wdiag__tank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.solution-tier-page .st-wdiag__tank-icon {
    width: 52px;
    height: 52px;
    background: #1565c0;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.solution-tier-page .st-wdiag__tank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.solution-tier-page .st-wdiag__tank-info strong { font-size: 15px; color: #1a1a1a; }
.solution-tier-page .st-wdiag__tank-note { font-size: 12px; color: #78909c; }

/* ── Split indicator (between tank and dual flow) ── */
.solution-tier-page .st-wdiag__split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}
.solution-tier-page .st-wdiag__split-line {
    width: 60px;
    height: 4px;
    border-radius: 2px;
}
.solution-tier-page .st-wdiag__split-line--cold { background: #4caf50; }
.solution-tier-page .st-wdiag__split-line--hot { background: #e91e63; }
.solution-tier-page .st-wdiag__split-label {
    font-size: 12px;
    font-weight: 700;
    color: #78909c;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ═══ DUAL FLOW (side-by-side: cold + hot) ═══ */
.solution-tier-page .st-wdiag__dual-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 740px;
    margin: 0 auto;
}

/* ── Flow column (shared) ── */
.solution-tier-page .st-wdiag__flow {
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.solution-tier-page .st-wdiag__flow--cold {
    background: linear-gradient(180deg, #e8f5e9 0%, #fff 40%);
    border: 2px solid #81c784;
}
.solution-tier-page .st-wdiag__flow--hot {
    background: linear-gradient(180deg, #fce4ec 0%, #fff 40%);
    border: 2px solid #f48fb1;
}

/* ── Flow header ── */
.solution-tier-page .st-wdiag__flow-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.solution-tier-page .st-wdiag__flow-pipe {
    display: inline-block;
    width: 24px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.solution-tier-page .st-wdiag__flow-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.solution-tier-page .st-wdiag__flow--cold .st-wdiag__flow-title { color: #2e7d32; }
.solution-tier-page .st-wdiag__flow--hot .st-wdiag__flow-title { color: #c62828; }

/* ── Flow devices ── */
.solution-tier-page .st-wdiag__flow-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.solution-tier-page .st-wdiag__flow-device {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #333;
}
.solution-tier-page .st-wdiag__flow--cold .st-wdiag__flow-device i { color: #4caf50; }
.solution-tier-page .st-wdiag__flow--hot .st-wdiag__flow-device i { color: #e91e63; }

/* ── Heater (hot flow only) ── */
.solution-tier-page .st-wdiag__flow-heater {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #e91e63 0%, #c62828 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
}
.solution-tier-page .st-wdiag__flow-heater-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.solution-tier-page .st-wdiag__flow-heater-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.solution-tier-page .st-wdiag__flow-heater-info strong { font-size: 14px; }
.solution-tier-page .st-wdiag__flow-heater-info span { font-size: 12px; opacity: .85; }

/* ── Flow floors ── */
.solution-tier-page .st-wdiag__flow-floors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.solution-tier-page .st-wdiag__flow-floor {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.solution-tier-page .st-wdiag__flow-floor-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}
.solution-tier-page .st-wdiag__flow-fixtures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Fixture pills ── */
.solution-tier-page .st-wdiag__fixture {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #333;
    background: #f0faf0;
    padding: 4px 10px;
    border-radius: 16px;
}
.solution-tier-page .st-wdiag__fixture i { color: #4caf50; font-size: 12px; }
.solution-tier-page .st-wdiag__fixture--hot { background: #fef0f4; }
.solution-tier-page .st-wdiag__fixture--hot i { color: #e91e63; }

/* ── Branch pill ── */
.solution-tier-page .st-wdiag__branch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #e65100;
    background: #fff3e0;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px dashed #ff9800;
    margin-top: 6px;
}
.solution-tier-page .st-wdiag__branch i { color: #ff9800; font-size: 12px; }

/* ── Floor note ── */
.solution-tier-page .st-wdiag__floor-note {
    font-size: 12px;
    color: #78909c;
    font-style: italic;
    margin-top: 4px;
}

/* ── IoT note ── */
.solution-tier-page .st-wdiag__iot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1565c0 0%, #0277bd 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 20px;
}
.solution-tier-page .st-wdiag__iot .fa-wifi { font-size: 15px; }

/* ── Disclaimer ── */
.solution-tier-page .st-wdiag__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    color: #90a4ae;
    font-style: italic;
}
.solution-tier-page .st-wdiag__disclaimer i { margin-top: 2px; flex-shrink: 0; }

/* ── Responsive — water diagram ── */
@media (max-width: 768px) {
    .solution-tier-page .st-wdiag__dual-flow {
        grid-template-columns: 1fr;
    }
    .solution-tier-page .st-wdiag__zone { padding: 14px 16px; }
}
@media (max-width: 600px) {
    .solution-tier-page .st-wdiag-section { padding: 32px 0 28px; }
    .solution-tier-page .st-wdiag__zone { padding: 12px 14px; }
    .solution-tier-page .st-wdiag__tank-icon { width: 42px; height: 42px; font-size: 18px; }
    .solution-tier-page .st-wdiag__treat-stage { min-width: 64px; }
    .solution-tier-page .st-wdiag__treat-ico { width: 36px; height: 36px; font-size: 15px; }
    .solution-tier-page .st-wdiag__treat-stage strong { font-size: 12px; }
    .solution-tier-page .st-wdiag__supply-item i { font-size: 18px; }
    .solution-tier-page .st-wdiag__supply-item span { font-size: 11px; }
    .solution-tier-page .st-wdiag__fixture { font-size: 12px; padding: 3px 8px; }
    .solution-tier-page .st-wdiag__legend { gap: 10px 16px; }
    .solution-tier-page .st-wdiag__spine { height: 20px; }
    .solution-tier-page .st-wdiag__flow { padding: 14px 12px; }
    .solution-tier-page .st-wdiag__flow-heater { padding: 10px 12px; }
    .solution-tier-page .st-wdiag__flow-heater-icon { width: 36px; height: 36px; font-size: 16px; }
}


/* ===================================================================
   WATER DIAGRAM v3 — .wdiag__* component
   Scope: .wdiag (component-level, no page prefix)
   Used on: /giai-phap/goi-{tier}  AND  /so-do-cap-nuoc
   Typography: px (no rem/em — legacy root font conflict)
=================================================================== */

/* === BASE CONTAINER === */
.wdiag {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 20px 20px;
    margin: 32px 0;
    overflow: hidden;
}

/* === 1. CONTEXT BAR === */
.wdiag__context-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wdiag__context-tier {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.wdiag__context-tier--essential { background: #e3f2fd; color: #0277bd; }
.wdiag__context-tier--premium   { background: #e8f5e9; color: #1b5e20; }
.wdiag__context-tier--signature { background: #fce4ec; color: #880e4f; }
.wdiag__context-desc {
    flex: 1;
    font-size: 14px;
    color: #555;
}
.wdiag__context-badge {
    font-size: 13px;
    color: #888;
}

/* === 2. VIEW MODE TABS === */
.wdiag__view-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wdiag__view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    background: #fafafa;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wdiag__view-tab:hover { border-color: #1565c0; color: #1565c0; }
.wdiag__view-tab--active {
    background: #1565c0;
    border-color: #1565c0;
    color: #fff;
}
.wdiag__view-tab--active:hover { background: #0d47a1; }

/* === 3. LEGEND === */
.wdiag__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
}
.wdiag__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wdiag__legend-line {
    display: inline-block;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}
.wdiag__legend-line--dash {
    background: transparent !important;
    border-top: 3px dashed;
    height: 0;
    border-color: inherit;
}
.wdiag__legend-label { font-size: 13px; color: #444; }

/* === NODES (shared) === */
.wdiag__node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f5f5f5;
    border: 2px solid #e0e0e0;
    min-width: 90px;
    text-align: center;
    transition: box-shadow 0.15s, border-color 0.15s;
    user-select: none;
}
.wdiag__node--clickable {
    cursor: pointer;
    border-color: #1565c0;
}
.wdiag__node--clickable:hover,
.wdiag__node--clickable:focus {
    box-shadow: 0 0 0 3px rgba(21,101,192,0.18);
    outline: none;
    border-color: #0d47a1;
}
.wdiag__node--hidden { display: none !important; }
.wdiag__node-label { font-size: 13px; font-weight: 600; color: #333; line-height: 1.3; }
.wdiag__node-meta  { font-size: 11px; color: #888; }
.wdiag__node-sub   { font-size: 11px; color: #aaa; }
.wdiag__node i     { font-size: 20px; color: #1565c0; }

/* Node variants */
.wdiag__node--source  { background: #e3f2fd; border-color: #1565c0; }
.wdiag__node--source i { color: #0277bd; }
.wdiag__node--tank    { background: #e8f5e9; border-color: #2e7d32; }
.wdiag__node--tank i  { color: #2e7d32; }
.wdiag__node--heater  { background: #fce4ec; border-color: #c62828; }
.wdiag__node--heater i { color: #c62828; }

/* === 4. MAIN PIPE === */
.wdiag__main-pipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
}

/* Pipe arrows */
.wdiag__pipe-arrow {
    width: 3px;
    height: 28px;
    position: relative;
    margin: 2px auto;
}
.wdiag__pipe-arrow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid currentColor;
}
.wdiag__pipe-arrow--raw   { background: #2196f3; color: #2196f3; }
.wdiag__pipe-arrow--supply { background: #2196f3; color: #2196f3; }
.wdiag__pipe-arrow--clean  { background: #4caf50; color: #4caf50; }

/* Supply row */
.wdiag__supply-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 6px 0;
}

/* Treatment cluster */
.wdiag__treatment {
    border: 2px dashed #bdbdbd;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 6px 0;
    width: 100%;
    max-width: 640px;
}
.wdiag__treatment-grid {
    display: block;
}
.wdiag__treatment-grid--has-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 12px;
    align-items: start;
}
.wdiag__treatment-col--equip {
    border: 1px solid #d7e7f8;
    background: #f8fbff;
    border-radius: 10px;
    padding: 10px;
}
.wdiag__treatment-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    text-align: center;
}
.wdiag__treatment-label i { margin-right: 5px; color: #888; }
.wdiag__treatment-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.wdiag__treatment-equip-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 8px;
}
.wdiag__treatment-equip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wdiag__treatment-equip-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cfe0f2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: left;
    color: #1f3a5f;
    cursor: pointer;
}
.wdiag__treatment-equip-item i {
    color: #1565c0;
    font-size: 14px;
}
.wdiag__treatment-equip-item:hover {
    border-color: #90caf9;
    background: #f3f9ff;
}
.wdiag__treatment-equip-item strong {
    display: block;
    font-size: 13px;
    color: #1f3a5f;
    line-height: 1.4;
}
.wdiag__treatment-capability {
    color: #c62828;
    font-size: 12px;
    font-weight: 600;
}
.wdiag__treatment-equip-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #0d47a1;
    text-decoration: underline;
    margin-top: 2px;
}
.wdiag__treatment-equip-more:hover {
    color: #08306b;
}

/* === 5. SPLIT INDICATOR === */
.wdiag__split-indicator {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin: 8px 0 4px;
    height: 20px;
}
.wdiag__split-arrow {
    display: block;
    width: 3px;
    height: 20px;
    position: relative;
}
.wdiag__split-arrow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid currentColor;
}
.wdiag__split-arrow--cold { background: #4caf50; color: #4caf50; }
.wdiag__split-arrow--hot  { background: #e91e63; color: #e91e63; }

/* === DUAL FLOW === */
.wdiag__dual-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.wdiag__flow {
    border-radius: 10px;
    padding: 14px 14px 12px;
    background: #fafafa;
    border: 2px solid #e0e0e0;
}
.wdiag__flow--cold { border-color: #a5d6a7; background: #f1f8e9; }
.wdiag__flow--hot  { border-color: #f48fb1; background: #fce4ec; }

.wdiag__flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.wdiag__flow-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wdiag__flow-label { font-size: 14px; font-weight: 700; color: #333; }
.wdiag__flow-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Floors */
.wdiag__floors { display: flex; flex-direction: column; gap: 6px; }
.wdiag__floor {
    padding: 8px 10px;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #e0e0e0;
}
.wdiag__floor-name {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 4px;
}
.wdiag__floor-fixtures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wdiag__fixture {
    display: inline-block;
    padding: 2px 8px;
    background: #e8eaf6;
    border-radius: 10px;
    font-size: 12px;
    color: #3949ab;
}
.wdiag__flow--hot .wdiag__fixture {
    background: #fce4ec;
    color: #ad1457;
}
.wdiag__floor-branch {
    margin-top: 6px;
    font-size: 12px;
    color: #f57c00;
}
.wdiag__floor-branch i { margin-right: 4px; }

/* === 6. IoT NOTE === */
.wdiag__iot-note {
    background: #e3f2fd;
    border-left: 4px solid #1565c0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1565c0;
    margin: 10px 0;
}
.wdiag__iot-note i { margin-right: 6px; }

/* === 7. EQUIPMENT CATALOG === */
.wdiag__catalog {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #e3edf7;
    border-radius: 10px;
    background: #f9fcff;
}
.wdiag__catalog-title {
    margin: 0 0 10px;
    font-size: 16px;
    color: #1a237e;
    font-weight: 700;
}
.wdiag__catalog-title i { margin-right: 6px; color: #1565c0; }
.wdiag__catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.wdiag__catalog-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #d9e7f7;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    cursor: pointer;
}
.wdiag__catalog-card:hover {
    border-color: #90caf9;
    background: #f5faff;
}
.wdiag__catalog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.wdiag__catalog-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a237e;
}
.wdiag__catalog-name i { margin-right: 6px; color: #1565c0; }
.wdiag__catalog-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}
.wdiag__catalog-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.wdiag__catalog-badge--required { background: #e8f5e9; color: #2e7d32; }
.wdiag__catalog-badge--recommended { background: #fff8e1; color: #ef6c00; }
.wdiag__catalog-badge--optional { background: #f5f5f5; color: #616161; }
.wdiag__catalog-badge--core { background: #e3f2fd; color: #1565c0; }
.wdiag__catalog-badge--extended { background: #f3e5f5; color: #6a1b9a; }
.wdiag__catalog-desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #4e4e4e;
    line-height: 1.45;
}

/* === 8. CLOSING BLOCK === */
.wdiag__closing {
    background: #f3f8ff;
    border: 1.5px solid #1565c0;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 16px 0 8px;
}
.wdiag__closing-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.wdiag__closing-item > i {
    font-size: 22px;
    color: #1565c0;
    flex-shrink: 0;
}
.wdiag__closing-item > div {
    flex: 1;
}
.wdiag__closing-item > div strong {
    display: block;
    font-size: 15px;
    color: #1a237e;
    margin-bottom: 2px;
}
.wdiag__closing-item > div span { font-size: 13px; color: #555; }
.wdiag__closing-cta {
    display: inline-block;
    padding: 8px 18px;
    background: #1565c0;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.wdiag__closing-cta:hover { background: #0d47a1; color: #fff; }

/* === 9. POPUP === */
.wdiag__popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
}
.wdiag__popup[hidden] { display: none; }

.wdiag__popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.wdiag__popup-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 92vw);
    max-height: 82vh;
    background: #fff;
    border-radius: 14px;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 24px 22px 22px;
}
.wdiag__popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.wdiag__popup-close:hover { background: #eee; }

.wdiag__popup-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 36px;
}
.wdiag__popup-icon {
    font-size: 24px;
    color: #1565c0;
    flex-shrink: 0;
    margin-top: 2px;
}
.wdiag__popup-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1a237e;
    line-height: 1.3;
}
.wdiag__popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wdiag__popup-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}
.wdiag__popup-badge--required    { background: #e8f5e9; color: #2e7d32; }
.wdiag__popup-badge--recommended { background: #fff8e1; color: #f57f17; }
.wdiag__popup-badge--optional    { background: #f5f5f5; color: #757575; }
.wdiag__popup-badge--core        { background: #e3f2fd; color: #1565c0; }
.wdiag__popup-badge--extended    { background: #f3e5f5; color: #6a1b9a; }

.wdiag__popup-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wdiag__popup-section:last-child { border-bottom: none; margin-bottom: 0; }
.wdiag__popup-section--risk  { background: #fff8f8; border-radius: 8px; padding: 10px 12px; }
.wdiag__popup-section--value { background: #f1f8e9; border-radius: 8px; padding: 10px 12px; }
.wdiag__popup-section--talk  { background: #f3f8ff; border-radius: 8px; padding: 10px 12px; }

.wdiag__popup-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wdiag__popup-section-title i { margin-right: 5px; }

.wdiag__popup-desc,
.wdiag__popup-why,
.wdiag__popup-risk,
.wdiag__popup-value,
.wdiag__popup-specs,
.wdiag__popup-maintenance,
.wdiag__popup-placement { font-size: 14px; color: #444; margin: 0; line-height: 1.6; }

.wdiag__popup-talk {
    font-size: 14px;
    color: #1a237e;
    border-left: 3px solid #1565c0;
    padding-left: 12px;
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}

.wdiag__popup-talk-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0d47a1;
    text-decoration: underline;
}

.wdiag__popup-talk-link:hover,
.wdiag__popup-talk-link:focus {
    color: #002171;
}

.wdiag__popup-talk-links-title {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #0d47a1;
}

.wdiag__popup-talk-links {
    margin: 6px 0 0;
    padding-left: 18px;
}

.wdiag__popup-talk-links li {
    margin: 2px 0;
}

/* body scroll lock when popup open */
body.wdiag-popup-open { overflow: hidden; }

/* === 10. DISCLAIMER === */
.wdiag__disclaimer {
    font-size: 13px;
    color: #888;
    margin: 12px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.5;
}
.wdiag__disclaimer i { flex-shrink: 0; margin-top: 2px; }
.wdiag__disclaimer a { color: #1565c0; }

/* === STANDALONE PAGE TIER TABS === */
.wdiag-tier-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.wdiag-tier-tab {
    padding: 10px 24px;
    border-radius: 25px;
    border: 2px solid #ddd;
    background: #fafafa;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wdiag-tier-tab:hover { border-color: #1565c0; color: #1565c0; }
.wdiag-tier-tab--active.wdiag-tier-tab--essential { background: #e3f2fd; border-color: #0277bd; color: #0277bd; }
.wdiag-tier-tab--active.wdiag-tier-tab--premium   { background: #e8f5e9; border-color: #2e7d32; color: #2e7d32; }
.wdiag-tier-tab--active.wdiag-tier-tab--signature { background: #fce4ec; border-color: #880e4f; color: #880e4f; }

.wdiag-tier-panel[hidden] { display: none; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .wdiag__dual-flow { grid-template-columns: 1fr; }
    .wdiag__treatment-grid--has-right { grid-template-columns: 1fr; }
    .wdiag__split-indicator { gap: 30px; }
    .wdiag__popup-panel { width: min(480px, 95vw); padding: 18px 16px 16px; }
    .wdiag { padding: 16px 14px; }
    .wdiag__catalog-grid { grid-template-columns: 1fr; }
    .wdiag__context-bar { gap: 6px; }
    .wdiag-tier-tabs { gap: 6px; }
    .wdiag-tier-tab { padding: 8px 16px; font-size: 14px; }
}
@media (max-width: 480px) {
    .wdiag__view-tab span { display: none; }
    .wdiag__view-tab { padding: 6px 12px; }
    .wdiag__node-label { font-size: 12px; }
    .wdiag__popup-title { font-size: 16px; }
}

/* === TRAINING QUIZ PILOT === */
.training-quiz-page #questionTitle {
    font-size: 1.875rem; /* 150% of bootstrap h5 (1.25rem) */
    line-height: 1.35;
}

.training-quiz-page .quiz-option .card-body {
    font-size: 100%;
}

.training-quiz-page .quiz-option-label {
    font-size: 200%;
}

.training-quiz-page .quiz-option .card-body .small {
    font-size: 200%;
    line-height: 1.35;
}

/* === TRAINING FAQ TYPOGRAPHY STANDARD (INDEX + DETAIL) === */
.training-faq-index-page .container,
.training-faq-detail-page .container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.training-faq-index-page h1,
.training-faq-detail-page h1 {
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
}

.training-faq-index-page .answer-box,
.training-faq-detail-page .answer-box,
.training-faq-index-page p,
.training-faq-detail-page p,
.training-faq-index-page .form-control,
.training-faq-index-page .form-select,
.training-faq-index-page .page-link,
.training-faq-detail-page .training-knowledge-html,
.training-faq-detail-page .training-knowledge-html p,
.training-faq-detail-page .training-knowledge-html li,
.training-faq-detail-page .list-group-item a {
    font-size: 16px;
    line-height: 1.7;
}

.training-faq-index-page h2,
.training-faq-detail-page h2,
.training-faq-detail-page h3,
.training-faq-index-page .training-faq-card__title {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 700;
}

.training-faq-index-page .small,
.training-faq-detail-page .small,
.training-faq-index-page .form-label,
.training-faq-detail-page .breadcrumb,
.training-faq-index-page .badge,
.training-faq-detail-page .badge {
    font-size: 15px;
    line-height: 1.5;
}

.training-faq-detail-page .list-group-item {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 480px) {
    .training-faq-index-page h1,
    .training-faq-detail-page h1 {
        font-size: 24px;
    }

    .training-faq-index-page h2,
    .training-faq-detail-page h2,
    .training-faq-detail-page h3,
    .training-faq-index-page .training-faq-card__title {
        font-size: 18px;
    }

    .training-faq-index-page p,
    .training-faq-detail-page p,
    .training-faq-index-page .form-control,
    .training-faq-index-page .form-select,
    .training-faq-index-page .page-link,
    .training-faq-detail-page .training-knowledge-html,
    .training-faq-detail-page .training-knowledge-html p,
    .training-faq-detail-page .training-knowledge-html li,
    .training-faq-detail-page .list-group-item a {
        font-size: 14px;
    }

    .training-faq-index-page .small,
    .training-faq-detail-page .small,
    .training-faq-index-page .form-label,
    .training-faq-detail-page .breadcrumb,
    .training-faq-index-page .badge,
    .training-faq-detail-page .badge {
        font-size: 14px;
    }
}

/* ===================================================================
   PROJECT DETAIL PAGE (.ff_projectDetailPage)
   URL: /du-an-thuc-te/{slug}
   Typography dùng px — đồng bộ với chuẩn INCAS v2
=================================================================== */

/* --- Breadcrumb --- */
.proj-detail-page-wrap                   { container-type: inline-size; }
.proj-detail-breadcrumb                  { max-width: 1200px; margin: 0 auto; padding: 14px 15px; }
.proj-detail-breadcrumb .breadcrumb      { margin: 0; background: transparent; padding: 0; font-size: 14px; }

/* --- Outer layout --- */
.proj-detail-main   { max-width: 1200px; margin: 0 auto; padding: 20px 15px 60px; }
.proj-detail-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }

/* --- Article column --- */
.proj-detail-article { flex: 1; min-width: 0; }

/* --- Sidebar column --- */
.proj-detail-sidebar         { width: 300px; flex-shrink: 0; }
.proj-detail-sidebar__inner  { background: #f8fafc; border: 1px solid #e0e8f0; border-radius: 10px; padding: 20px; position: sticky; top: 80px; }
.proj-detail-sidebar__title  { font-size: 15px; font-weight: 700; color: #0a4a8c; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e0e8f0; }
.proj-detail-sidebar__empty  { color: #888; font-size: 14px; text-align: center; padding: 16px 0; }
.proj-detail-sidebar__link   { color: #0a6bc1; font-weight: 600; }

/* --- Article header --- */
.proj-detail-header   { margin-bottom: 22px; }
.proj-location-tag    { background: #e8f4fd; color: #0a6bc1; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; display: inline-block; margin-bottom: 8px; }
.proj-detail-h1       { font-size: 28px; font-weight: 700; color: #1a1a2e; margin: 10px 0 10px; line-height: 1.4; }
.proj-detail-subtitle { font-size: 16px; color: #666; margin: 0 0 14px; line-height: 1.6; }
.proj-detail-meta     { display: flex; gap: 18px; color: #aaa; font-size: 14px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; flex-wrap: wrap; }
.proj-detail-meta i   { margin-right: 4px; }

/* --- TDS / pH measurement widget --- */
.proj-tds-widget              { background: linear-gradient(135deg, #e8f4fd, #d0eaff); border: 1px solid #b3d4f5; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; }
.proj-tds-widget__title       { font-size: 16px; font-weight: 700; color: #0a4a8c; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.proj-tds-widget__title-icon  { background: #0a6bc1; color: #fff; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.proj-tds-widget__grid        { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.proj-tds-card                { flex: 1; min-width: 160px; text-align: center; background: #fff; border-radius: 10px; padding: 14px; }
.proj-tds-card__label         { font-size: 12px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.proj-tds-card__row           { display: flex; align-items: center; justify-content: center; gap: 10px; }
.proj-tds-card__val           { font-size: 26px; font-weight: 800; }
.proj-tds-card__val--before   { color: #e74c3c; }
.proj-tds-card__val--after    { color: #27ae60; }
.proj-tds-card__val--ph       { color: #e67e22; }
.proj-tds-card__unit          { font-size: 12px; color: #999; }
.proj-tds-card__arrow         { font-size: 20px; color: #0a6bc1; }
.proj-tds-card__reduction     { background: #e8faf0; color: #27ae60; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-top: 8px; }

/* --- Featured image figure --- */
.proj-detail-figure     { margin: 0 0 24px; }
.proj-detail-figure img { width: 100%; border-radius: 10px; max-height: 480px; object-fit: cover; }

/* --- Article body content --- */
.proj-detail-body { line-height: 1.85; color: #333; font-size: 16px; }

/* --- FAQ accordion --- */
.proj-faq-section        { margin-top: 36px; }
.proj-faq-section__title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #0a6bc1; }
.proj-faq-item           { border: 1px solid #e8edf5; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fafcff; }
.proj-faq-item summary   { font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: #1a1a2e; }
.proj-faq-item summary::-webkit-details-marker { display: none; }
.proj-faq-item__toggle   { font-size: 13px; color: #0a6bc1; margin-left: 10px; flex-shrink: 0; transition: transform .2s; }
details[open] .proj-faq-item__toggle { transform: rotate(180deg); }
.proj-faq-item__answer   { margin: 12px 0 0; color: #555; font-size: 15px; line-height: 1.7; }

/* --- CTA box --- */
.proj-cta-box          { background: #f0f8ff; border: 1px solid #b3d4f5; border-radius: 10px; padding: 20px 22px; margin-top: 36px; }
.proj-cta-box__title   { font-size: 16px; font-weight: 700; color: #0a4a8c; margin: 0 0 8px; }
.proj-cta-box__desc    { color: #555; font-size: 15px; margin: 0 0 14px; line-height: 1.6; }
.proj-cta-box__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.proj-cta-btn          { color: #fff; background: #0a6bc1; padding: 9px 20px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-block; transition: background .2s, transform .15s; }
.proj-cta-btn:hover    { background: #085da8; color: #fff; text-decoration: none; transform: translateY(-1px); }
.proj-cta-btn--outline { background: #fff; color: #0a6bc1; border: 1px solid #0a6bc1; }
.proj-cta-btn--outline:hover { background: #e8f4fd; color: #0a6bc1; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .proj-detail-sidebar              { width: 100%; }
    .proj-detail-sidebar__inner       { position: static; }
}
@media (max-width: 768px) {
    .proj-detail-h1                   { font-size: 22px; }
    .proj-tds-card__val               { font-size: 22px; }
    .proj-faq-section__title          { font-size: 20px; }
}
@media (max-width: 480px) {
    .proj-detail-h1                   { font-size: 20px; }
    .proj-detail-subtitle             { font-size: 15px; }
    .proj-detail-body                 { font-size: 15px; }
    .proj-faq-section__title          { font-size: 18px; }
    .proj-faq-item summary            { font-size: 15px; }
    .proj-cta-box__desc               { font-size: 14px; }
}

/* === PROJECT DETAIL: Sidebar related projects list === */
.proj-sidebar-list               { list-style: none; margin: 0; padding: 0; }
.proj-sidebar-item               { border-bottom: 1px solid #e8edf5; padding: 10px 0; }
.proj-sidebar-item:last-child    { border-bottom: none; }
.proj-sidebar-item__link         { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; transition: opacity .15s; }
.proj-sidebar-item__link:hover   { opacity: .8; text-decoration: none; }
.proj-sidebar-item__img          { width: 80px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.proj-sidebar-item__body         { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.proj-sidebar-item__title        { font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-sidebar-item__link:hover .proj-sidebar-item__title { color: #0a6bc1; }
.proj-sidebar-item__loc          { font-size: 12px; color: #888; }