/* CRM page styles — trang "Phần mềm CRM quản lý khách hàng".
   Kế thừa design system trang dịch vụ (đồng bộ services/website-design + erp):
   accent đỏ #e31d22 + nút primary var(--site-primary), glass card theo skill
   liquid-glass-ui. Bố cục CỐ TÌNH khác trang ERP (bento 3 cột, timeline DỌC
   ghost-number, feature 1+4, băng tích hợp chip) — cùng ngôn ngữ, khác nhịp.
   Static CSS, browser-cacheable. Nạp qua @push('styles') + ?v=filemtime. */

/* ============================================================
   BASE — hệ thống service-* dùng chung của trang dịch vụ (self-contained).
   ============================================================ */
.service-page { color: #0f172b; background: #fff; }

/* .service-container: geometry chuẩn (1280 + gutter) ở 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, .96fr) minmax(0, 1.04fr);
    gap: 54px;
    align-items: center;
}
.service-hero h1 {
    margin: 16px 0 18px;
    max-width: 640px;
    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: 580px; 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 {
    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 { 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-section { padding: 58px 0; }
.service-section--tight { padding-top: 42px; }
.service-section-header { max-width: 690px; margin: 0 auto 36px; text-align: center; }
.service-section-header--left { max-width: 660px; margin: 0 0 30px; text-align: left; }
.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); }

/* Nền wash mềm cho vài section — lõi 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ẻ (liquid-glass §4b). */
.crm-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%);
}

/* ============================================================
   1. HERO VISUAL — "board" CRM kính + 2 pill số liệu nổi (khác ERP: ERP để
   ảnh trong vòng tròn; CRM là panel kính có chip nổi ở 2 mép).
   ============================================================ */
.crm-hero-visual {
    position: relative;
    min-height: 425px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crm-hero-visual::before {
    content: '';
    position: absolute;
    inset: 6% 4% 2% 12%;
    border-radius: 26px;
    background: #eef4ff;
    z-index: 0;
}
.crm-hero-visual::after {
    content: '';
    position: absolute;
    right: 2%;
    top: 12%;
    width: 168px;
    height: 168px;
    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;
}
.crm-hero-board {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 30px 64px rgba(15, 23, 43, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
.crm-hero-board img { width: 100%; height: auto; display: block; }
.crm-hero-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 16px 38px rgba(15, 23, 43, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
.crm-hero-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #e31d22;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
}
.crm-hero-chip__icon svg { width: 20px; height: 20px; }
.crm-hero-chip strong { display: block; font-size: 17px; font-weight: 900; color: #0f172b; line-height: 1; }
.crm-hero-chip span { display: block; margin-top: 3px; font-size: 11.5px; color: #64748b; }
.crm-hero-chip--1 { top: 20px; left: -14px; }
.crm-hero-chip--2 { bottom: 26px; right: -12px; }

/* ============================================================
   2. "CRM LÀ GÌ" — split: chữ + checklist TRÁI, media kính PHẢI (ERP để ảnh
   TRÁI trong intro → đảo bên cho khác nhịp).
   ============================================================ */
.crm-why {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: 46px;
    align-items: center;
}
.crm-checklist { display: grid; gap: 12px; margin-top: 20px; padding: 0; }
.crm-checklist li {
    position: relative;
    padding-left: 32px;
    list-style: none;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.6;
}
.crm-checklist li strong { color: #0f172b; font-weight: 800; }
.crm-checklist 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;
}
.crm-why-media {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    border-radius: 18px;
    border: 1px solid #e8eef7;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15, 23, 43, .08);
}
.crm-why-media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; object-position: center; }
.crm-why-media__label {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 8px 22px rgba(15, 23, 43, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
.crm-why-media__label strong { display: block; color: #0f172b; font-size: 14px; font-weight: 900; }
.crm-why-media__label span { display: block; margin-top: 3px; color: #64748b; font-size: 12px; line-height: 1.5; }

/* ============================================================
   3. DẢI SỐ LIỆU — băng ngang kính, 4 ô có vách ngăn (điểm nhấn không-card).
   ============================================================ */
.crm-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%);
}
.crm-stat { padding: 26px 24px; text-align: center; border-left: 1px solid rgba(15, 23, 43, .07); }
.crm-stat:first-child { border-left: 0; }
.crm-stat strong { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 900; line-height: 1; color: #e31d22; }
.crm-stat span { display: block; margin-top: 8px; color: #64748b; font-size: 12.5px; }

/* ============================================================
   4. PHÂN HỆ CRM — BENTO 3 CỘT (khác ERP dùng 4 cột): 1 tile lớn 2x2 góc
   trái-trên + 2 tile dọc phải + 3 tile hàng dưới → lấp kín 3x3, 6 phân hệ.
   ============================================================ */
.crm-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-auto-flow: row dense;
    gap: 16px;
    margin-top: 26px;
}
.crm-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;
}
.crm-bento__tile:hover {
    transform: translateY(-4px);
    border-color: #fecaca;
    box-shadow: 0 24px 60px rgba(227, 29, 34, .1);
}
.crm-bento__tile h3 { margin: 14px 0 7px; font-size: 15px; font-weight: 900; color: #0f172b; }
.crm-bento__tile p { color: #64748b; font-size: 12.5px; line-height: 1.6; }
.crm-bento__tile:hover .service-card__icon { transform: translateY(-2px) scale(1.05); }
.crm-bento__tile--big {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: space-between;
    background:
        radial-gradient(120% 120% at 100% 0, rgba(227, 29, 34, .1), transparent 46%),
        rgba(255, 255, 255, .6);
    border-color: #ffd9d9;
}
.crm-bento__tile--big h3 { font-size: 20px; }
.crm-bento__tile--big p { font-size: 13.5px; max-width: 46ch; }
.crm-bento__mini-list { display: grid; gap: 9px; margin-top: 16px; padding: 0; }
.crm-bento__mini-list li {
    position: relative;
    padding-left: 24px;
    list-style: none;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.5;
}
.crm-bento__mini-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e31d22;
}
.crm-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;
}

/* ============================================================
   5. LỢI ÍCH — feature "1 lớn + 4 nhỏ": 1 spotlight nền đỏ (span 2 hàng) +
   lưới 2x2 card kính (khác ERP: ERP dùng editorial split cho lợi ích).
   ============================================================ */
.crm-benefits {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 22px;
}
.crm-benefit-spotlight {
    grid-column: 1;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 30px 28px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(120% 120% at 100% 0, rgba(255, 255, 255, .14), transparent 44%),
        linear-gradient(135deg, #e31d22 0%, #c9151b 100%);
    box-shadow: 0 26px 70px rgba(227, 29, 34, .24);
}
.crm-benefit-spotlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
}
.crm-benefit-spotlight__icon svg { width: 26px; height: 26px; }
.crm-benefit-spotlight h3 { margin: 20px 0 10px; font-size: 20px; font-weight: 900; line-height: 1.25; }
.crm-benefit-spotlight p { color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.7; }
.crm-benefit-spotlight__metric { margin-top: 22px; }
.crm-benefit-spotlight__metric strong { font-size: 34px; font-weight: 900; line-height: 1; }
.crm-benefit-spotlight__metric span { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .82); }
.crm-benefit {
    padding: 22px 20px;
    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;
}
.crm-benefit:hover { transform: translateY(-3px); border-color: #fecaca; }
.crm-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #e31d22;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
    transition: transform .25s ease;
}
.crm-benefit:hover .crm-benefit__icon { transform: scale(1.06); }
.crm-benefit__icon svg { width: 21px; height: 21px; }
.crm-benefit h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 900; color: #0f172b; }
.crm-benefit p { color: #64748b; font-size: 12.5px; line-height: 1.55; }

/* ============================================================
   6. QUY TRÌNH — timeline DỌC editorial: tiêu đề trái sticky + các bước phải
   với số ghost lớn + rail dọc (khác ERP: ERP là timeline NGANG có comet).
   ============================================================ */
.crm-process {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}
.crm-process__aside { position: sticky; top: 96px; }
.crm-process__aside .service-actions { margin-top: 22px; }
.crm-process__steps { display: grid; gap: 0; }
.crm-process__step {
    position: relative;
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 22px;
    padding-bottom: 30px;
}
/* Rail dọc nối các node */
.crm-process__step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 32px;
    width: 2px;
    height: calc(100% - 66px);
    background: linear-gradient(180deg, rgba(227, 29, 34, .32), rgba(227, 29, 34, .1));
}
.crm-process__node {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    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;
}
.crm-process__node svg { width: 27px; height: 27px; }
.crm-process__step:hover .crm-process__node {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(227, 29, 34, .2);
}
.crm-process__body { position: relative; padding-top: 6px; }
.crm-process__ghost {
    position: absolute;
    top: -14px;
    right: 4px;
    z-index: 0;
    font-size: 66px;
    font-weight: 900;
    line-height: 1;
    color: rgba(227, 29, 34, .09);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.crm-process__body h3 { position: relative; z-index: 1; font-size: 16px; font-weight: 900; color: #0f172b; margin-bottom: 7px; }
.crm-process__body p { position: relative; z-index: 1; color: #64748b; font-size: 13px; line-height: 1.7; max-width: 52ch; }

/* ============================================================
   7. TÍCH HỢP — băng chip kính (shape mới, không có ở ERP).
   ============================================================ */
.crm-integrations {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 34px;
    align-items: center;
    padding: 34px;
    border-radius: 22px;
    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%);
}
.crm-integrations__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 4px 12px rgba(15, 23, 43, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.crm-chip:hover { transform: translateY(-2px); color: #e31d22; border-color: #fecaca; }
.crm-chip__icon { display: inline-flex; color: #e31d22; }
.crm-chip__icon svg { width: 17px; height: 17px; }

/* ============================================================
   8. CASE SPOTLIGHT — 1 card lớn placeholder (thay bằng case thật sau).
   ============================================================ */
.crm-case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 0;
    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, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
.crm-case__shot { position: relative; overflow: hidden; min-height: 300px; background: #eef2ff; }
.crm-case__shot img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.crm-case__badge {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 8px 22px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: #0f172b;
    font-size: 11px;
    font-weight: 800;
}
.crm-case__body { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.crm-case__body h3 { font-size: 20px; font-weight: 900; color: #0f172b; }
.crm-case__body p { margin-top: 10px; color: #475569; font-size: 13.5px; line-height: 1.7; }
.crm-case__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.crm-case__metric strong { display: block; font-size: 26px; font-weight: 900; color: #e31d22; line-height: 1; }
.crm-case__metric span { display: block; margin-top: 6px; font-size: 11.5px; color: #64748b; line-height: 1.4; }

/* ============================================================
   9. PLAN-COMPARE — CTA sang trang Bảng giá (không lặp nội dung bảng giá).
   ============================================================ */
.crm-plan-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 32px 36px;
    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%);
}
.crm-plan-compare h2 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 900; color: #0f172b; }
.crm-plan-compare p { margin-top: 8px; color: #64748b; font-size: 13.5px; line-height: 1.7; max-width: 60ch; }
.crm-plan-compare__tiers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.crm-plan-compare__tiers span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #fff1f1;
    border: 1px solid #ffe1e1;
    color: #e31d22;
    font-size: 12.5px;
    font-weight: 800;
}
.crm-plan-compare__cta { display: flex; flex-direction: column; gap: 10px; }
.crm-plan-compare--slim { margin-top: 22px; padding: 22px 30px; }
.crm-plan-compare--slim h2 { font-size: clamp(17px, 2.2vw, 21px); }

/* ============================================================
   9b. BẢNG GIÁ CRM — 3 gói glass. Featured (giữa) dùng VIỀN đỏ + thanh accent
   (KHÁC ERP/SaaS nền đỏ đặc) để giữ nhịp riêng của trang CRM.
   ============================================================ */
.crm-pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    margin-top: 24px;
}
.crm-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    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, border-color .22s ease, box-shadow .22s ease;
}
.crm-plan:hover { transform: translateY(-4px); border-color: #fecaca; }
.crm-plan--featured {
    border: 1.5px solid #e31d22;
    background:
        radial-gradient(130% 90% at 50% 0, rgba(227, 29, 34, .07), transparent 55%),
        rgba(255, 255, 255, .62);
    box-shadow: 0 26px 64px rgba(227, 29, 34, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.crm-plan--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e31d22, #c9151b);
}
.crm-plan__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e31d22, #c9151b);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(227, 29, 34, .28);
}
.crm-plan__name { color: #0f172b; font-size: 16px; font-weight: 900; }
.crm-plan__price { margin: 12px 0 4px; color: #0f172b; font-size: 26px; font-weight: 900; }
.crm-plan__price span { color: #64748b; font-size: 13px; font-weight: 700; }
.crm-plan__desc { color: #64748b; font-size: 12.5px; line-height: 1.6; }
.crm-plan__features { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; }
.crm-plan__features li {
    position: relative;
    padding-left: 24px;
    list-style: none;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.5;
}
.crm-plan__features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #e31d22; font-weight: 900; }
.crm-plan .service-btn { margin-top: auto; width: 100%; }

/* ============================================================
   FALLBACK — 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))) {
    .crm-hero-board, .crm-hero-chip, .crm-why-media__label,
    .crm-stats, .crm-bento__tile, .crm-benefit, .crm-process__node,
    .crm-integrations, .crm-chip, .crm-case, .crm-case__badge,
    .crm-plan-compare, .crm-plan { background: rgba(255, 255, 255, .93); }
    .crm-benefit-spotlight { background: linear-gradient(135deg, #e31d22 0%, #c9151b 100%); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
    .service-hero-grid,
    .service-cta-card { grid-template-columns: 1fr; }
    .service-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .crm-why { grid-template-columns: 1fr; gap: 28px; }
    .crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-stat:nth-child(odd) { border-left: 0; }
    .crm-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(15, 23, 43, .07); }

    .crm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-bento__tile--big { grid-column: span 2; grid-row: span 1; }

    .crm-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-benefit-spotlight { grid-column: 1 / -1; grid-row: auto; }

    .crm-process { grid-template-columns: 1fr; gap: 26px; }
    .crm-process__aside { position: static; }

    .crm-integrations { grid-template-columns: 1fr; gap: 22px; }
    .crm-case { grid-template-columns: 1fr; }
    .crm-plan-compare { grid-template-columns: 1fr; }
    .crm-pricing { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .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); }
    .crm-hero-visual { min-height: 300px; }
    .crm-hero-visual::after { display: none; }
    .crm-hero-chip { display: none; }
    .crm-why-media, .crm-why-media img { min-height: 260px; }
    .crm-stats { grid-template-columns: 1fr; }
    .crm-stat { border-left: 0; border-top: 1px solid rgba(15, 23, 43, .07); }
    .crm-stat:first-child { border-top: 0; }
    .crm-bento { grid-template-columns: 1fr; }
    .crm-bento__tile--big { grid-column: auto; grid-row: auto; }
    .crm-benefits { grid-template-columns: 1fr; }
    .crm-case__body { padding: 24px 22px; }
    .crm-case__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .service-section { padding: 46px 0; }
}

/* ============================================================
   ANIMATIONS — chỉ transform/opacity (GPU), nhẹ, không reflow. Kích hoạt qua
   .crm-anim trên <html> (script <head> chỉ thêm khi hỗ trợ IntersectionObserver
   & KHÔNG prefers-reduced-motion). Không JS / giảm chuyển động → hiện đủ ngay.
   ============================================================ */
.crm-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.crm-orb { position: absolute; border-radius: 999px; filter: blur(34px); opacity: .55; will-change: transform; }
.crm-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%);
}
.crm-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 — hero KHÔNG dùng (giữ LCP nhanh) */
.crm-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);
}
.crm-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 crmFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.crm-anim .service-hero .service-feature { animation: crmFadeUp .6s both; }
.crm-anim .service-hero .service-feature:nth-child(1) { animation-delay: .05s; }
.crm-anim .service-hero .service-feature:nth-child(2) { animation-delay: .13s; }
.crm-anim .service-hero .service-feature:nth-child(3) { animation-delay: .21s; }
.crm-anim .service-hero .service-feature:nth-child(4) { animation-delay: .29s; }
.crm-anim .service-hero .service-actions { animation: crmFadeUp .6s .34s both; }
/* Hero visual có thể là phần tử LCP → chỉ trượt (transform), KHÔNG opacity. */
@keyframes crmRiseUp { from { transform: translateY(24px); } to { transform: none; } }
.crm-anim .crm-hero-visual { animation: crmRiseUp .7s .12s both; }

.crm-anim .crm-orb--1 { animation: crmFloat 9s ease-in-out infinite; }
.crm-anim .crm-orb--2 { animation: crmFloat 11s ease-in-out .6s infinite; }
@keyframes crmFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -22px, 0); } }

/* An toàn cho người bật "giảm chuyển động" (belt-and-suspenders) */
@media (prefers-reduced-motion: reduce) {
    .crm-orb { animation: none !important; }
    .crm-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}