/* ERP page styles — trang "Phần mềm quản lý doanh nghiệp ERP".
   Kế thừa nguyên design system trang dịch vụ (đồng bộ với services/website-design):
   accent đỏ #e31d22 + nút primary var(--site-primary), glass card.
   Static CSS, browser-cacheable. Nạp qua @push('styles') + ?v=filemtime. */

.service-page {
    color: #0f172b;
    background: #fff;
}

/* .service-container: geometry chuẩn (1280 + gutter 16/24/32) định nghĩa ở public/css/app.css */

.service-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 22px;
    border-radius: 999px;
    color: #ed1c24;
    background: #fff;
    border: 1px solid rgba(237, 28, 36, .28);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.service-eyebrow--solid {
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #e31d22, #c9151b);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(227, 29, 34, .18);
}

.service-eyebrow--solid::before {
    content: '★';
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.service-section-title {
    margin-top: 10px;
    color: #0f172b;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.24;
    font-weight: 900;
}

.service-section-text {
    margin-top: 9px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.service-hero {
    position: relative;
    overflow: hidden;
    /* padding-top do header.css (.service-hero → 120px) quản lý — nguồn duy nhất */
    padding-bottom: 56px;
    background:
        radial-gradient(circle at 88% 48%, rgba(var(--site-primary-rgb, 59, 79, 232), .08) 0 15%, transparent 36%),
        linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.service-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
}

.service-hero h1 {
    margin: 16px 0 18px;
    max-width: 620px;
    font-size: clamp(30px, 3.35vw, 44px);
    line-height: 1.13;
    font-weight: 900;
    letter-spacing: 0;
}

.service-hero h1 span {
    display: block;
    color: #e31d22;
}

.service-lead {
    max-width: 570px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

.service-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 34px 0 30px;
}

.service-feature {
    min-width: 0;
}

.service-icon,
.service-feature__icon,
.service-card__icon,
.service-process__icon,
.service-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #e31d22;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
}

.service-icon svg,
.service-feature__icon svg,
.service-card__icon svg,
.service-process__icon svg,
.service-benefit__icon svg {
    width: 21px;
    height: 21px;
}

.service-feature h3 {
    margin: 10px 0 2px;
    font-size: 13px;
    font-weight: 900;
}

.service-feature p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.service-btn:hover {
    transform: translateY(-1px);
}

.service-btn--primary {
    color: #fff;
    font-weight: 600;
    background: var(--site-primary, #3B4FE8);
    box-shadow: 0 10px 24px rgba(var(--site-primary-rgb, 59, 79, 232), .3);
}

.service-btn--primary:hover {
    background: var(--site-primary-dark, #2B3FD9);
}

.service-btn--outline {
    color: var(--site-primary, #3B4FE8);
    background: #fff;
    border: 1.5px solid var(--site-primary, #3B4FE8);
}

.service-btn--outline:hover {
    background: var(--site-primary-soft, #eef2ff);
}

.service-hero-visual {
    position: relative;
    min-height: 425px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-hero-visual::before {
    content: '';
    position: absolute;
    inset: 7% 2% 1% 18%;
    border-radius: 50%;
    background: #eef4ff;
    z-index: 0;
}

.service-hero-visual::after {
    content: '';
    position: absolute;
    right: 0;
    top: 18%;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(circle, rgba(var(--site-primary-rgb, 59, 79, 232), .2) 1.3px, transparent 1.3px);
    background-size: 16px 16px;
    z-index: 0;
}

.service-hero-visual img {
    position: relative;
    z-index: 2;
    width: min(100%, 640px);
    border-radius: 18px;
    filter: drop-shadow(0 30px 40px rgba(15, 23, 43, .12));
}

.service-section {
    padding: 58px 0;
}

.service-section--tight {
    padding-top: 42px;
}

.service-intro-grid {
    display: grid;
    grid-template-columns: minmax(360px, .74fr) minmax(0, 1.26fr);
    gap: 42px;
    align-items: stretch;
}

.service-photo-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 460px;
    border-radius: 14px;
    border: 1px solid #e8eef7;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15, 23, 43, .08);
}

.service-photo-card img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    object-position: center;
}

.service-rating {
    position: absolute;
    left: 34px;
    bottom: 24px;
    width: 250px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.service-rating span {
    display: block;
    color: #0f172b;
    font-size: 12px;
    font-weight: 900;
}

.service-rating strong {
    color: #0f172b;
    font-size: 21px;
    font-weight: 900;
}

.service-stars {
    color: #fbbf24;
    font-size: 18px;
    letter-spacing: 0;
}

.service-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.service-card {
    min-height: 168px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 16px;
    box-shadow: 0 20px 58px rgba(15, 23, 43, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: #fecaca;
    box-shadow: 0 24px 60px rgba(227, 29, 34, .08);
}

.service-card__icon.tone-blue {
    color: #0ea5e9;
    background: #eff6ff;
    border-color: #dbeafe;
}

.service-card__icon.tone-orange {
    color: #f97316;
    background: #fff7ed;
    border-color: #fed7aa;
}

.service-card__icon.tone-purple {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.service-card__icon.tone-green {
    color: #059669;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.service-card h3 {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 900;
}

.service-card p {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.62;
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #e31d22;
    font-size: 12px;
    font-weight: 900;
}

.service-section-header {
    max-width: 690px;
    margin: 0 auto 36px;
    text-align: center;
}

.service-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.service-process__item {
    position: relative;
    text-align: center;
}

.service-process__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 34px;
    left: calc(50% + 46px);
    width: calc(100% - 68px);
    border-top: 2px dotted #f59b9b;
}

.service-process__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 29px;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #e31d22;
}

.service-process__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #fff;
    border-color: #f5a3a3;
}

.service-process__step {
    color: #e31d22;
    font-size: 21px;
    font-weight: 900;
}

.service-process h3 {
    margin: 9px 0 7px;
    font-size: 13px;
    font-weight: 900;
}

.service-process p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
}

.service-projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.service-project-card {
    display: block;
    overflow: hidden;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 20px 58px rgba(15, 23, 43, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-project-card:hover {
    color: inherit;
    border-color: #f3f4f6;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    transform: translateY(-4px);
}

.service-project-shot {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    height: auto;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #eef2ff;
}

.service-project-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.service-project-card:hover .service-project-shot img {
    transform: scale(1.05);
    filter: saturate(1.04);
}

.service-project-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: rgba(255, 255, 255, .52);
    color: #0f172b;
    box-shadow: 0 8px 22px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.service-project-card__body {
    display: grid;
    gap: 8px;
    padding: 16px 16px 18px;
}

.service-project-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    color: #111;
}

.service-project-card p {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
}

.service-center-action {
    margin-top: 28px;
    text-align: center;
}

.service-cta {
    padding: 20px 0 72px;
}

.service-cta-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    padding: 26px 34px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 45%, rgba(255, 255, 255, .16), transparent 24%),
        linear-gradient(135deg, #e31d22 0%, #c9151b 100%);
    box-shadow: 0 26px 70px rgba(227, 29, 34, .24);
}

.service-cta-card img {
    width: 100%;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .18));
}

.service-cta-card h2 {
    color: #fff;
    font-size: clamp(22px, 3vw, 31px);
    font-weight: 900;
    line-height: 1.25;
}

.service-cta-card p {
    margin-top: 9px;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1.7;
}

.service-cta-actions {
    display: flex;
    gap: 12px;
}

.service-cta-actions .service-btn--primary {
    color: #e31d22;
    background: #fff;
    box-shadow: none;
}

.service-cta-actions .service-btn--outline {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
}

.service-benefits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.service-benefit {
    padding: 22px 14px;
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.service-benefit__icon {
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #fff5f5;
}

.service-benefit h3 {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 900;
}

.service-benefit p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

/* ============================================================
   ERP-specific — kế thừa token glass/accent ở trên
   ============================================================ */

/* Lưới phân hệ (8 module) */
.erp-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

/* Danh sách gạch đầu dòng có tick đỏ (dùng ở section "ERP là gì") */
.erp-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    padding: 0;
}

.erp-list li {
    position: relative;
    padding-left: 32px;
    list-style: none;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.6;
}

.erp-list li strong {
    color: #0f172b;
    font-weight: 800;
}

.erp-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
    color: #e31d22;
    font-size: 11px;
    font-weight: 900;
}

/* Gói dịch vụ ERP */
.erp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.erp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    box-shadow: 0 20px 58px rgba(15, 23, 43, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.erp-plan:hover {
    transform: translateY(-4px);
    border-color: #fecaca;
}

.erp-plan--featured {
    border-color: transparent;
    background: linear-gradient(135deg, #e31d22 0%, #c9151b 100%);
    box-shadow: 0 26px 70px rgba(227, 29, 34, .24);
}

.erp-plan__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: #e31d22;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.erp-plan__name {
    color: #0f172b;
    font-size: 16px;
    font-weight: 900;
}

.erp-plan__price {
    margin: 12px 0 4px;
    color: #0f172b;
    font-size: 26px;
    font-weight: 900;
}

.erp-plan__price span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.erp-plan__desc {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
}

.erp-plan__features {
    display: grid;
    gap: 10px;
    margin: 18px 0 22px;
    padding: 0;
}

.erp-plan__features li {
    position: relative;
    padding-left: 24px;
    list-style: none;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.5;
}

.erp-plan__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #e31d22;
    font-weight: 900;
}

.erp-plan .service-btn {
    margin-top: auto;
    width: 100%;
}

/* Biến thể nổi bật (nền đỏ) — đảo màu chữ & nút cho tương phản */
.erp-plan--featured .erp-plan__name,
.erp-plan--featured .erp-plan__price,
.erp-plan--featured .erp-plan__price span,
.erp-plan--featured .erp-plan__desc,
.erp-plan--featured .erp-plan__features li {
    color: #fff;
}

.erp-plan--featured .erp-plan__features li::before {
    color: #fff;
}

.erp-plan--featured .service-btn--primary {
    color: #e31d22;
    background: #fff;
    box-shadow: none;
}

/* Case study — chỉ số kết quả */
.erp-case__metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.erp-case__metric strong {
    color: #e31d22;
    font-size: 22px;
    font-weight: 900;
}

.erp-case__metric span {
    color: #64748b;
    font-size: 12px;
}

/* Fallback khi trình duyệt không hỗ trợ backdrop-filter → nền gần đặc */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .service-rating,
    .service-project-badge,
    .service-card,
    .service-project-card,
    .service-benefit,
    .erp-plan {
        background: rgba(255, 255, 255, .93);
    }

    .erp-plan--featured {
        background: linear-gradient(135deg, #e31d22 0%, #c9151b 100%);
    }
}

@media (max-width: 1023px) {

    .service-hero-grid,
    .service-intro-grid,
    .service-cta-card {
        grid-template-columns: 1fr;
    }

    .service-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-modules,
    .service-process,
    .service-projects,
    .service-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-plans {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .service-process__item::before,
    .service-process__item::after {
        display: none;
    }

    .service-cta-card {
        text-align: center;
    }

    .service-cta-card img {
        max-width: 260px;
        margin: 0 auto;
    }

    .service-cta-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .service-hero {
        padding-bottom: 44px;
    }

    .service-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card-grid,
    .erp-modules,
    .service-process,
    .service-projects,
    .service-benefits {
        grid-template-columns: 1fr;
    }

    .service-hero-visual {
        top: 30px;
        min-height: 240px;
    }

    .service-hero-visual::after {
        display: none;
    }

    .service-photo-card,
    .service-photo-card img {
        min-height: 260px;
    }

    .service-rating {
        left: 16px;
        right: 16px;
        width: auto;
    }

    .service-section {
        padding: 46px 0;
    }

    .service-hero-visual img {
        filter: none;
    }
}

/* ============================================================
   Nền wash mềm cho vài section — phá cảm giác "trắng đều lặp khuôn".
   Lõi wash tông site, 2 mép fade về trong suốt (hiện nền trắng của trang)
   → KHÔNG tạo đường kẻ ở điểm chạm (theo liquid-glass §4b).
   ============================================================ */
.erp-soft {
    background:
        linear-gradient(180deg,
            rgba(var(--site-primary-rgb, 59, 79, 232), 0) 0,
            rgba(var(--site-primary-rgb, 59, 79, 232), .045) 130px,
            rgba(var(--site-primary-rgb, 59, 79, 232), .045) calc(100% - 130px),
            rgba(var(--site-primary-rgb, 59, 79, 232), 0) 100%);
}

/* ============================================================
   ANIMATIONS — chỉ transform/opacity (GPU), nhẹ, không reflow → an toàn
   tốc độ tải & SEO. Kích hoạt qua .erp-anim trên <html> (script ở <head>
   chỉ thêm class khi hỗ trợ IntersectionObserver & KHÔNG prefers-reduced-motion).
   Không JS / giảm chuyển động → nội dung hiện đầy đủ ngay (không ẩn, không flash).
   ============================================================ */

/* Hero orbs — quầng sáng động trang trí (nằm sau nội dung, aria-hidden) */
.erp-orbs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.erp-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(34px);
    opacity: .55;
    will-change: transform;
}

.erp-orb--1 {
    width: 320px;
    height: 320px;
    top: -60px;
    right: 4%;
    background: radial-gradient(circle at 32% 30%, rgba(var(--site-primary-rgb, 59, 79, 232), .4), transparent 70%);
}

.erp-orb--2 {
    width: 260px;
    height: 260px;
    bottom: -50px;
    left: -40px;
    background: radial-gradient(circle at 32% 30%, rgba(227, 29, 34, .2), transparent 70%);
}

.service-hero .service-container {
    position: relative;
    z-index: 1;
}

/* Scroll-reveal (chỉ áp dụng dưới màn hình đầu; hero KHÔNG dùng để giữ LCP nhanh) */
.erp-anim [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.erp-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Hero entrance — KHÔNG đụng H1/lead (giữ LCP). Chỉ chip tính năng, nút, ảnh. */
@keyframes erpFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.erp-anim .service-hero .service-feature {
    animation: erpFadeUp .6s both;
}

.erp-anim .service-hero .service-feature:nth-child(1) {
    animation-delay: .05s;
}

.erp-anim .service-hero .service-feature:nth-child(2) {
    animation-delay: .13s;
}

.erp-anim .service-hero .service-feature:nth-child(3) {
    animation-delay: .21s;
}

.erp-anim .service-hero .service-feature:nth-child(4) {
    animation-delay: .29s;
}

.erp-anim .service-hero .service-actions {
    animation: erpFadeUp .6s .34s both;
}

/* Hero visual có thể là phần tử LCP → chỉ trượt (transform), KHÔNG mờ opacity,
   để ảnh vẫn được paint ngay từ đầu (không trì hoãn LCP / Core Web Vitals). */
@keyframes erpRiseUp {
    from {
        transform: translateY(24px);
    }

    to {
        transform: none;
    }
}

.erp-anim .service-hero-visual {
    animation: erpRiseUp .7s .12s both;
}

/* Orbs chỉ chuyển động khi .erp-anim (giảm chuyển động → đứng yên) */
.erp-anim .erp-orb--1 {
    animation: erpFloat 9s ease-in-out infinite;
}

.erp-anim .erp-orb--2 {
    animation: erpFloat 11s ease-in-out .6s infinite;
}

@keyframes erpFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -22px, 0);
    }
}

/* Micro-interaction: icon nảy nhẹ khi hover card (transform → rẻ) */
.service-card__icon,
.service-benefit__icon,
.service-process__icon {
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.service-card:hover .service-card__icon {
    transform: translateY(-2px) scale(1.05);
}

.service-benefit:hover .service-benefit__icon {
    transform: scale(1.06);
}

.service-process__item:hover .service-process__icon {
    transform: translateY(-3px);
}

/* An toàn tuyệt đối cho người bật "giảm chuyển động" (belt-and-suspenders) */
@media (prefers-reduced-motion: reduce) {
    .erp-orb {
        animation: none !important;
    }

    .erp-anim [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   BỐ CỤC BESPOKE — phá nhịp "eyebrow giữa → H2 giữa → lưới đều".
   Bento bất đối xứng, editorial split, dải số liệu, case feature.
   Vẫn dùng token glass + accent như phần trên (không màu/ font mới).
   ============================================================ */

/* Header canh trái — xen kẽ với header canh giữa cho bớt khuôn */
.service-section-header--left {
    max-width: 660px;
    margin: 0 0 30px;
    text-align: left;
}

/* --- Bento phân hệ (1 tile lớn + 1 tile rộng, còn lại vuông) --- */
.erp-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(148px, auto);
    grid-auto-flow: row dense;
    gap: 16px;
    margin-top: 26px;
}

.erp-bento__tile {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    box-shadow: 0 20px 58px rgba(15, 23, 43, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.erp-bento__tile:hover {
    transform: translateY(-4px);
    border-color: #fecaca;
    box-shadow: 0 24px 60px rgba(227, 29, 34, .1);
}

.erp-bento__tile h3 {
    margin: 14px 0 7px;
    font-size: 15px;
    font-weight: 900;
    color: #0f172b;
}

.erp-bento__tile p {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
}

.erp-bento__tile:hover .service-card__icon {
    transform: translateY(-2px) scale(1.05);
}

.erp-bento__tile--wide {
    grid-column: span 2;
}

.erp-bento__tile--big {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: space-between;
}

.erp-bento__tile--big {
    background:
        radial-gradient(120% 120% at 100% 0, rgba(227, 29, 34, .1), transparent 46%),
        rgba(255, 255, 255, .6);
    border-color: #ffd9d9;
}

.erp-bento__tile--big h3 {
    font-size: 20px;
}

.erp-bento__tile--big p {
    font-size: 13.5px;
    max-width: 44ch;
}

.erp-bento__tag {
    align-self: flex-start;
    margin-top: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff1f1;
    color: #e31d22;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* --- Editorial split (Lợi ích): tiêu đề trái + danh sách đánh số phải --- */
.erp-split {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 48px;
    align-items: start;
}

.erp-split__aside {
    position: sticky;
    top: 96px;
}

.erp-split__aside .service-section-title {
    margin-top: 12px;
}

.erp-split__aside .service-actions {
    margin-top: 22px;
}

.erp-split__main {
    display: grid;
    gap: 14px;
}

.erp-benefit-row {
    display: grid;
    grid-template-columns: auto 46px 1fr;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 43, .06), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: transform .22s ease, border-color .22s ease;
}

.erp-benefit-row:hover {
    transform: translateX(6px);
    border-color: #fecaca;
}

.erp-benefit-row__num {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: rgba(227, 29, 34, .28);
    font-variant-numeric: tabular-nums;
}

.erp-benefit-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #e31d22;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
}

.erp-benefit-row__icon svg {
    width: 22px;
    height: 22px;
}

.erp-benefit-row h3 {
    font-size: 14.5px;
    font-weight: 900;
    color: #0f172b;
    margin-bottom: 3px;
}

.erp-benefit-row p {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.55;
}

/* --- Dải số liệu full-width --- */
.erp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 20px 58px rgba(15, 23, 43, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

.erp-stat {
    padding: 26px 24px;
    text-align: center;
    border-left: 1px solid rgba(15, 23, 43, .07);
}

.erp-stat:first-child {
    border-left: 0;
}

.erp-stat strong {
    display: block;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 900;
    line-height: 1;
    color: #e31d22;
}

.erp-stat span {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12.5px;
}

/* --- Case feature (1 lớn + 2 nhỏ) --- */
.erp-cases {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 6px;
}

.erp-cases__feature {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    box-shadow: 0 20px 58px rgba(15, 23, 43, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: transform .22s ease, border-color .22s ease;
}

.erp-cases__feature:hover {
    transform: translateY(-4px);
    border-color: #fecaca;
}

.erp-case-shot {
    position: relative;
    overflow: hidden;
    background: #eef2ff;
}

.erp-cases__feature .erp-case-shot {
    aspect-ratio: 16 / 9;
}

.erp-case-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.erp-cases__feature:hover .erp-case-shot img,
.erp-case-mini:hover .erp-case-shot img {
    transform: scale(1.05);
}

.erp-case-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    color: #0f172b;
    border: 1px solid rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    font-size: 11px;
    font-weight: 800;
}

.erp-case-body {
    padding: 20px 22px;
    display: grid;
    gap: 8px;
}

.erp-case-body h3 {
    font-size: 17px;
    font-weight: 900;
    color: #0f172b;
}

.erp-case-body p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.erp-case-mini {
    display: grid;
    grid-template-columns: 116px 1fr;
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 43, .06), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: transform .22s ease, border-color .22s ease;
}

.erp-case-mini:hover {
    transform: translateY(-3px);
    border-color: #fecaca;
}

.erp-case-mini .erp-case-shot {
    height: 100%;
    min-height: 116px;
}

.erp-case-mini__body {
    padding: 14px 16px;
    display: grid;
    gap: 5px;
    align-content: center;
}

.erp-case-mini__body h3 {
    font-size: 14px;
    font-weight: 900;
    color: #0f172b;
}

.erp-case-mini__body p {
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.5;
}

.erp-case-metric {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.erp-case-metric strong {
    color: #e31d22;
    font-size: 20px;
    font-weight: 900;
}

.erp-case-metric span {
    color: #64748b;
    font-size: 11.5px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .erp-bento__tile,
    .erp-benefit-row,
    .erp-stats,
    .erp-cases__feature,
    .erp-case-mini,
    .erp-case-badge {
        background: rgba(255, 255, 255, .93);
    }
}

@media (max-width: 1023px) {
    .erp-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-bento__tile--big {
        grid-column: span 2;
        grid-row: span 1;
    }

    .erp-bento__tile--wide {
        grid-column: span 2;
    }

    .erp-split {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .erp-split__aside {
        position: static;
    }

    .erp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-stat:nth-child(odd) {
        border-left: 0;
    }

    .erp-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(15, 23, 43, .07);
    }

    .erp-cases {
        grid-template-columns: 1fr;
    }

    .erp-cases__feature {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .erp-bento {
        grid-template-columns: 1fr;
    }

    .erp-bento__tile--big,
    .erp-bento__tile--wide {
        grid-column: auto;
        grid-row: auto;
    }

    .erp-stats {
        grid-template-columns: 1fr;
    }

    .erp-stat {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 43, .07);
    }

    .erp-stat:first-child {
        border-top: 0;
    }

    .erp-benefit-row {
        grid-template-columns: auto 40px 1fr;
        gap: 12px;
        padding: 16px;
    }

    .erp-case-mini {
        grid-template-columns: 92px 1fr;
    }
}

/* ============================================================
   QUY TRÌNH TRIỂN KHAI — timeline có "dòng chảy" qua từng mũi tên.
   Không .erp-anim (giảm chuyển động / no-JS) → track + chevron TĨNH.
   Có .erp-anim → vệt sáng chạy tuần tự node1→node5 + chevron nhấp nháy.
   ============================================================ */
.erp-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    margin-top: 26px;
}

/* Vệt sáng "comet" chạy XUYÊN SUỐT timeline: node1 → lướt qua từng mũi tên → node5,
   rồi lặp lại. Đi "sau" node (z-index thấp hơn) nên tự mờ đi khi qua node → cảm giác
   nhảy từ mũi tên này sang mũi tên kia. Chỉ hiện khi .erp-anim (no-JS/giảm chuyển động → ẩn). */
.erp-flow__runner {
    display: none;
    position: absolute;
    z-index: 1;
    top: 34px;
    /* trùng tâm đường nối */
    left: calc(10% - 9px);
    /* tâm node đầu (5 cột) */
    right: calc(10% - 9px);
    /* tâm node cuối */
    height: 3px;
    pointer-events: none;
}

.erp-anim .erp-flow__runner {
    display: block;
}

.erp-flow__runner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    /* Đoạn sáng dạng LINE — glow NHẸ để không lem vào node */
    background: rgba(227, 29, 34, .95);
    box-shadow: 0 0 8px 1px rgba(227, 29, 34, .45);
    animation: erpTravelX 10s ease-in-out infinite;
    will-change: left;
}

/* Đi LẦN LƯỢT: dừng ở mỗi node (≈nửa nhịp) rồi mới trượt êm sang node kế.
   ease-in-out ở mỗi chặng → tăng/giảm tốc mượt, có chủ đích (không lướt xuyên một mạch). */
/* LINE chỉ chạy TRONG connector (đầu connector → mũi tên), KHÔNG vào node.
   Băng qua node thì opacity 0 (nhảy vô hình sang connector kế). */
/* Chạy LIÊN TỤC (không khựng) + mờ dần khi đi hết mũi tên → mượt, không "đơ".
   Fade khi về cuối nên dù đi tới sát node cũng không thấy "lố" (đã tan biến). */
@keyframes erpTravelX {
    0% {
        left: 6%;
        opacity: 0;
    }

    2% {
        left: 6%;
        opacity: 1;
    }

    17% {
        left: 17%;
        opacity: 1;
    }

    21% {
        left: 20%;
        opacity: 0;
    }

    /* mờ HẾT trước mép node 2 (không lem) */
    22% {
        left: 31%;
        opacity: 0;
    }

    /* nhảy vô hình sang connector 2 */
    24% {
        left: 31%;
        opacity: 1;
    }

    42% {
        left: 42%;
        opacity: 1;
    }

    46% {
        left: 45%;
        opacity: 0;
    }

    /* mờ HẾT trước mép node 3 */
    47% {
        left: 56%;
        opacity: 0;
    }

    49% {
        left: 56%;
        opacity: 1;
    }

    67% {
        left: 67%;
        opacity: 1;
    }

    71% {
        left: 70%;
        opacity: 0;
    }

    /* trước node 4 */
    72% {
        left: 81%;
        opacity: 0;
    }

    74% {
        left: 81%;
        opacity: 1;
    }

    92% {
        left: 92%;
        opacity: 1;
    }

    96% {
        left: 95%;
        opacity: 0;
    }

    /* trước node 5 */
    100% {
        left: 95%;
        opacity: 0;
    }
}

/* Hiệu ứng NODE khi chấm tới: vòng "ping" lan toả ra ngoài viền node rồi mờ dần.
   Dùng ::after (tách khỏi node → không đè icon, không đụng hover). Delay = đúng lúc
   chấm đến từng node → khoá pha với comet (cùng 10s, không lệch). */
.erp-flow__node::after {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    /* RA SAU icon + badge số → không cắt .erp-flow__num */
    border-radius: 999px;
    border: 2px solid rgba(227, 29, 34, .9);
    box-shadow: 0 0 16px 3px rgba(227, 29, 34, .4);
    /* glow TĨNH (không animate) → không repaint */
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Line tới node → vòng viền bừng sáng + toả glow, GIỮ suốt lúc line khựng lại
   (local 3%→14% ≈ cửa sổ dừng của line), rồi tắt khi line đi tiếp. */
/* Chỉ animate opacity + transform (GPU) → mượt, KHÔNG repaint như box-shadow */
@keyframes erpNodePing {
    0% {
        opacity: 0;
        transform: scale(.82);
    }

    3% {
        opacity: 1;
        transform: scale(1);
    }

    /* bừng sáng khi comet tới */
    9% {
        opacity: 1;
        transform: scale(1.04);
    }

    /* giữ nhẹ */
    16% {
        opacity: 0;
        transform: scale(1.4);
    }

    /* lan ra + mờ dần */
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

/* Delay dịch sớm ~0.3s so với lúc line tới tâm node → vòng sáng bừng lúc line vừa chạm,
   không còn cảnh "line qua rồi node mới sáng". */
.erp-anim .erp-flow__node::after {
    animation: erpNodePing 10s ease-out infinite;
}

/* nth-of-type (đếm theo thẻ <div>) — BỎ QUA span.erp-flow__runner đứng đầu,
   nếu dùng nth-child sẽ lệch 1 bước (node sáng lệch sang bước trước). */
.erp-anim .erp-flow__step:nth-of-type(1) .erp-flow__node::after {
    animation-delay: 0s;
}

.erp-anim .erp-flow__step:nth-of-type(2) .erp-flow__node::after {
    animation-delay: 1.6s;
}

.erp-anim .erp-flow__step:nth-of-type(3) .erp-flow__node::after {
    animation-delay: 4.1s;
}

.erp-anim .erp-flow__step:nth-of-type(4) .erp-flow__node::after {
    animation-delay: 6.6s;
}

.erp-anim .erp-flow__step:nth-of-type(5) .erp-flow__node::after {
    animation-delay: 9.1s;
}

.erp-flow__step {
    position: relative;
    text-align: center;
}

.erp-flow__node {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #e31d22;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 10px 26px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: transform .25s ease, box-shadow .25s ease;
}

.erp-flow__node svg {
    width: 28px;
    height: 28px;
}

.erp-flow__step:hover .erp-flow__node {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(227, 29, 34, .2);
}

.erp-flow__num {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #e31d22, #c9151b);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(227, 29, 34, .35);
}

.erp-flow__body h3 {
    font-size: 14px;
    font-weight: 900;
    color: #0f172b;
    margin-bottom: 6px;
}

.erp-flow__body p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

/* Đường nối ngang (track + lớp vệt sáng chạy) giữa 2 node */
.erp-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 34px;
    /* tâm node (68/2) */
    left: calc(50% + 42px);
    width: calc(100% - 86px);
    /* kết thúc trước node, chừa khoảng hở rõ với node */
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(227, 29, 34, .3), rgba(227, 29, 34, .14));
}

/* Mũi tên sát node (tip chạm mép node), z-index:3 nên che comet ở đoạn cuối → comet
   như "chui vào" node thay vì trôi qua khoảng trống. */
.erp-flow__step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 27.5px;
    left: calc(150% - 54px);
    /* lùi khỏi node → tip cách mép node một khoảng */
    z-index: 3;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #e31d22;
}

/* (Chuyển động do .erp-flow__runner đảm nhiệm — 1 vệt sáng chạy xuyên suốt timeline,
   không còn nhấp nháy rời rạc từng đoạn.) */

/* Timeline DỌC cho tablet/mobile — comet chạy xuống */
@media (max-width: 1023px) {
    .erp-flow {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .erp-flow__step {
        display: grid;
        grid-template-columns: 68px 1fr;
        gap: 25px;
        text-align: left;
        padding-bottom: 65px;
    }

    .erp-flow__node {
        margin: 0;
    }

    .erp-flow__body {
        padding-top: 6px;
    }

    .erp-flow__step:not(:last-child)::after {
        top: 74px;
        left: 32px;
        /* tâm node theo trục X */
        width: 3px;
        height: calc(100% - 74px);
        background: linear-gradient(180deg, rgba(227, 29, 34, .3), rgba(227, 29, 34, .14));
    }

    .erp-flow__step:not(:last-child)::before {
        top: auto;
        bottom: 14px;
        left: 27px;
        right: auto;
        border-top: 9px solid #e31d22;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 0;
    }

    /* Comet chạy DỌC theo rail (top → bottom) trên mobile */
    .erp-flow__runner {
        top: 34px;
        bottom: 34px;
        left: 32px;
        right: auto;
        width: 3px;
        height: auto;
    }

    .erp-flow__runner::before {
        top: 0;
        left: 50%;
        width: 4px;
        height: 34px;
        animation-name: erpTravelY;
    }
}

@keyframes erpTravelY {
    0% {
        top: 6%;
        opacity: 0;
    }

    3% {
        top: 6%;
        opacity: 1;
    }

    17% {
        top: 17%;
        opacity: 1;
    }

    21% {
        top: 20%;
        opacity: 0;
    }

    22% {
        top: 31%;
        opacity: 0;
    }

    24% {
        top: 31%;
        opacity: 1;
    }

    42% {
        top: 42%;
        opacity: 1;
    }

    46% {
        top: 45%;
        opacity: 0;
    }

    47% {
        top: 56%;
        opacity: 0;
    }

    49% {
        top: 56%;
        opacity: 1;
    }

    67% {
        top: 67%;
        opacity: 1;
    }

    71% {
        top: 70%;
        opacity: 0;
    }

    72% {
        top: 81%;
        opacity: 0;
    }

    74% {
        top: 81%;
        opacity: 1;
    }

    92% {
        top: 92%;
        opacity: 1;
    }

    96% {
        top: 95%;
        opacity: 0;
    }

    100% {
        top: 95%;
        opacity: 0;
    }
}

/* Giảm chuyển động → ẩn comet (đường nối + mũi tên vẫn hiển thị tĩnh) */
@media (prefers-reduced-motion: reduce) {

    .erp-flow__step::after,
    .erp-flow__step::before,
    .erp-flow__node::after {
        animation: none !important;
    }

    .erp-flow__runner {
        display: none !important;
    }
}