/* ══════════════════════════════════════
     HERO WRAPPER
  ══════════════════════════════════════ */
  
    .hrs-hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: var(--space-9) 0;
        background: #080f1e;
        color: #ffffff;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .hrs-hero>.container {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    /* Background blobs */
    .hrs-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 70% at 5% 50%, rgba(13, 45, 94, 0.9) 0%, transparent 60%),
            radial-gradient(ellipse 50% 55% at 70% 20%, rgba(30, 15, 50, 0.65) 0%, transparent 55%),
            radial-gradient(ellipse 45% 50% at 90% 80%, rgba(80, 20, 40, 0.3) 0%, transparent 50%),
            radial-gradient(ellipse 35% 40% at 50% 100%, rgba(13, 45, 94, 0.5) 0%, transparent 60%);
        z-index: 0;
    }

    .hrs-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(74, 111, 165, 0.25), transparent);
    }

    /* ══════════════════════════════════════
     LAYOUT: left text + right dashboard
  ══════════════════════════════════════ */
    .hrs-inner {
        display: flex;
        gap: var(--space-8);
        align-items: center;
    }

    /* ══════════════════════════════════════
     LEFT COLUMN
  ══════════════════════════════════════ */
    .hrs-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        order: 1;
    }

    .hrs-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 7px var(--space-4);
        border: 1px solid rgba(74, 111, 165, 0.35);
        border-radius: var(--radius-full);
        background: rgba(74, 111, 165, 0.1);
        width: fit-content;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.7);
    }

    .hrs-badge svg {
        color: var(--coral-soft);
        flex-shrink: 0;
    }

    .hrs-headline {
        font-size: clamp(38px, 5vw, 60px);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.035em;
        color: #ffffff;
    }

    .hrs-headline .hrs-coral {
        color: var(--coral-soft);
    }

    .hrs-body {
        font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.52);
        max-width: 500px;
    }

    .hrs-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
        margin-top: var(--space-1);
    }

    .hrs-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        height: 52px;
        padding: 0 var(--space-6);
        border-radius: var(--radius-full);
        font-size: var(--text-base);
        font-weight: 700;
        cursor: pointer;
        border: none;
        text-decoration: none;
        white-space: nowrap;
        transition: transform var(--duration) var(--ease-out),
            box-shadow var(--duration) var(--ease-out),
            background var(--duration);
    }

    .hrs-btn:hover {
        transform: translateY(-2px);
    }

    .hrs-btn:active {
        transform: translateY(0);
    }

    .hrs-btn-primary {
        background: var(--coral);
        color: #fff;
        box-shadow: 0 4px 20px oklch(68% .17 22 / 38%);
    }

    .hrs-btn-primary:hover {
        background: var(--coral-soft);
        box-shadow: 0 8px 28px oklch(68% .17 22 / 52%);
    }

    .hrs-btn-ghost {
        background: rgba(255, 255, 255, 0.07);
        color: rgba(255, 255, 255, 0.85);
        border: 1.5px solid rgba(255, 255, 255, 0.14);
    }

    .hrs-btn-ghost:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .hrs-divider {
        height: 1px;
        background: linear-gradient(90deg, rgba(74, 111, 165, 0.22), transparent);
        margin-top: var(--space-1);
    }

    .hrs-stats {
        display: flex;
        gap: var(--space-7);
        padding-top: var(--space-1);
    }

    .hrs-stat-val {
        font-size: clamp(26px, 2.4vw, 36px);
        font-weight: 800;
        color: var(--coral-soft);
        letter-spacing: -0.025em;
        line-height: 1;
    }

    .hrs-stat-lbl {
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.42);
        margin-top: 4px;
        line-height: 1.4;
    }

    /* ══════════════════════════════════════
     RIGHT COLUMN — DASHBOARD
  ══════════════════════════════════════ */
    .hrs-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 14px;
        order: 2;
    }

    /* Shared card shell */
    .hrs-dc {
        background: rgba(13, 25, 50, 0.75);
        border: 1px solid rgba(74, 111, 165, 0.2);
        border-radius: var(--radius-xl);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }

    /* ── Card 1: Line chart ── */
    .hrs-dc-perf {
        padding: 20px 22px 14px;
    }

    .hrs-dc-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .hrs-dc-label {
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 3px;
    }

    .hrs-dc-big {
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .hrs-dc-big .hrs-pos {
        font-size: 16px;
        font-weight: 700;
        color: #38f0c0;
        margin-left: 8px;
    }

    .hrs-pulse {
        color: #38bdf8;
    }

    .hrs-linechart {
        width: 100%;
        display: block;
    }

    .hrs-xax {
        display: flex;
        justify-content: space-between;
        padding: 6px 2px 0;
    }

    .hrs-xax span {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.35);
    }

    /* ── Card row: gauge + 2 mini ── */
    .hrs-mid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    /* Gauge card */
    .hrs-dc-gauge {
        padding: 18px 18px 14px;
        display: flex;
        flex-direction: column;
    }

    .hrs-gauge-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 8px 0 4px;
    }

    .hrs-gauge-svg {
        display: block;
    }

    .hrs-gauge-center {
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        pointer-events: none;
    }

    .hrs-gauge-num {
        font-size: 34px;
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .hrs-gauge-sub {
        font-size: 12px;
        font-weight: 600;
        color: var(--coral-soft);
        margin-top: 2px;
    }

    /* Mini right col */
    .hrs-mini-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hrs-dc-mini {
        padding: 16px;
        flex: 1;
    }

    .hrs-mini-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .hrs-mini-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: rgba(74, 111, 165, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #90caf9;
    }

    .hrs-trend {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        font-weight: 700;
    }

    .hrs-trend.hrs-down {
        color: var(--coral-soft);
    }

    .hrs-trend.hrs-up {
        color: #4ade80;
    }

    .hrs-mini-val {
        font-size: 28px;
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .hrs-mini-val .hrs-pct {
        font-size: 22px;
    }

    .hrs-mini-desc {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.48);
        margin-top: 4px;
    }

    /* ── Card 3: Bar chart ── */
    .hrs-dc-bars {
        padding: 20px 22px 18px;
    }

    .hrs-bar-grid {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        height: 80px;
        margin: 14px 0 8px;
    }

    .hrs-bc {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: 100%;
        justify-content: flex-end;
    }

    .hrs-bar {
        width: 100%;
        border-radius: 6px 6px 0 0;
        background: rgba(144, 202, 249, 0.3);
        border: 1px solid rgba(144, 202, 249, 0.22);
        transition: background 0.2s;
        min-height: 8px;
    }

    /* Highlight one bar with coral */
    .hrs-bc:nth-child(3) .hrs-bar {
        background: rgba(232, 112, 96, 0.45);
        border-color: rgba(232, 112, 96, 0.35);
    }

    .hrs-bc:hover .hrs-bar {
        background: rgba(144, 202, 249, 0.52);
    }

    .hrs-bc:nth-child(3):hover .hrs-bar {
        background: rgba(232, 112, 96, 0.65);
    }

    .hrs-blbl {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        white-space: nowrap;
    }

    /* ══════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════ */
    @media (max-width: 1100px) {
        .hrs-inner {
            grid-template-columns: 1fr 1fr;
            gap: var(--space-6);
        }

        .hrs-headline {
            font-size: clamp(36px, 4vw, 56px);
        }
    }

    @media (max-width: 900px) {
        .hrs-inner {
            grid-template-columns: 1fr;
            gap: var(--space-7);
        }

        .hrs-right {
            order: -1;
        }

        .hrs-hero {
            padding: var(--space-7) 0;
            min-height: auto;
        }

        .hrs-body {
            max-width: 100%;
        }

        .hrs-stats {
            gap: var(--space-6);
        }
    }

    @media (max-width: 768px) {
        .hrs-hero>.container {
            padding: 0 var(--space-4);
        }

        .hrs-headline {
            font-size: clamp(34px, 7vw, 52px);
        }

        .hrs-mid {
            grid-template-columns: 1fr 1fr;
        }

        .hrs-stats {
            gap: var(--space-5);
            flex-wrap: wrap;
        }
    }

    @media (max-width: 540px) {
        .hrs-mid {
            grid-template-columns: 1fr;
        }

        .hrs-mini-col {
            flex-direction: row;
        }

        .hrs-dc-mini {
            flex: 1;
        }

        .hrs-actions {
            flex-direction: column;
        }

        .hrs-btn {
            width: 100%;
            height: 54px;
        }

        .hrs-stats>div {
            flex: 1;
        }
    }

    /* ══════════════════════════════════════════
       SECTION
       ══════════════════════════════════════════ */
    .section-van-de {
        background-color: var(--surface-page);
        padding: var(--space-9) 0;
        /* 80px */
    }

    /* ── Headline ── */
    .headline {
        font-size: var(--text-xl);
        font-weight: 800;
        line-height: 1.18;
        color: var(--navy-900);
        max-width: 780px;
        margin-bottom: var(--space-5);
    }

    /* ── Sub-copy ── */
    .sub-copy {
        font-size: var(--text-md);
        line-height: 1.75;
        color: var(--navy-300);
        max-width: 620px;
        margin-bottom: var(--space-8);
        /* 64px */
    }

    /* ══════════════════════════════════════════
       CARDS GRID
       ══════════════════════════════════════════ */
    .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    .card {
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        padding: var(--space-6) var(--space-6);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition:
            box-shadow var(--duration) var(--ease-out),
            transform var(--duration) var(--ease-out),
            border-color var(--duration) ease;
    }

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

    /* accent bar on hover */
    .card::before {
        content: '';
        display: block;
        width: 32px;
        height: 3px;
        border-radius: var(--radius-full);
        background: var(--coral);
        margin-bottom: var(--space-5);
        opacity: 0;
        transform: scaleX(0.4);
        transform-origin: left;
        transition:
            opacity var(--duration) ease,
            transform var(--duration) var(--ease-out);
    }

    .card:hover::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* ── Card icon ── */
    .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: var(--navy-100);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-5);
        transition: background-color var(--duration) ease;
    }

    .card:hover .card-icon {
        background-color: var(--coral-dim);
    }

    .card-icon svg {
        width: 22px;
        height: 22px;
        stroke: var(--navy-500);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke var(--duration) ease;
    }

    .card:hover .card-icon svg {
        stroke: var(--coral);
    }

    /* ── Card text ── */
    .card-title {
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--navy-900);
        margin-bottom: var(--space-2);
    }

    .card-desc {
        font-size: var(--text-md);
        line-height: 1.7;
        color: var(--navy-300);
    }

    /* ══════════════════════════════════════════
       RESPONSIVE
       ══════════════════════════════════════════ */

    /* Tablet: 2 cột */
    @media (max-width: 1024px) {
        .container {
            padding: 0 var(--space-6);
            /* 32px */
        }
    }

    @media (max-width: 860px) {
        .cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 820px) {
        .container {
            padding: 0 var(--space-4);
            /* 16px */
        }

        .hrs-inner {
            flex-direction: row-reverse;
        }

    }

    /* Mobile: 1 cột */
    @media (max-width: 580px) {
        .section-van-de {
            padding: var(--space-8) 0;
            /* 64px */
        }

        .container {
            padding: 0 var(--space-5);
            /* 24px */
        }

        .cards {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .card {
            padding: var(--space-5);
        }

        .sub-copy {
            margin-bottom: var(--space-7);
            /* 48px */
        }
    }

    /* Small mobile */
    @media (max-width: 430px) {
        .container {
            padding: 0 var(--space-4);
            /* 16px */
        }

        .hrs-inner {
            flex-direction: column-reverse;
        }

    }

    /* ══════════════════════════════════════════
       SECTION
       ══════════════════════════════════════════ */
    .section-giai-phap {
        padding: var(--space-9) 0;
        background: linear-gradient(160deg, #e8f0f9 0%, var(--surface-page) 60%);
    }

    /* ── 2-col layout ── */
    .gp-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-7);
        align-items: center;
    }

    /* ══════════════════════════════════════════
       LEFT COLUMN — TEXT
       ══════════════════════════════════════════ */

    .gp-headline {
        font-size: var(--text-xl);
        font-weight: 800;
        line-height: 1.18;
        color: var(--navy-900);
        margin-bottom: var(--space-5);
    }

    .gp-desc {
        font-size: var(--text-base);
        line-height: 1.75;
        color: var(--navy-300);
        margin-bottom: var(--space-6);
    }

    /* ── Checklist ── */
    .gp-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-7);
    }

    .gp-list li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        font-size: var(--text-base);
        color: var(--navy-700);
        line-height: 1.6;
    }

    /* circle-check icon */
    .gp-list li::before {
        content: '';
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        border-radius: 50%;
        border: 1.8px solid var(--coral-soft);
        background: var(--coral-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c0533a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E") center/12px no-repeat;
    }

    /* ── CTA buttons ── */
    .gp-cta {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 13px 22px;
        border-radius: var(--radius-full);
        font-size: var(--text-base);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--duration) var(--ease-out);
        text-decoration: none;
        border: none;
    }

    .btn-primary {
        background: var(--navy-900);
        color: #ffffff;
        box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
        background: var(--navy-700);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .btn-ghost {
        background: transparent;
        color: var(--navy-700);
        border: 1.5px solid var(--border-hover);
    }

    .btn-ghost:hover {
        border-color: var(--coral-soft);
        color: var(--coral);
        background: var(--coral-dim);
    }

    .btn-icon {
        font-size: 15px;
        opacity: 0.8;
    }

    /* ══════════════════════════════════════════
       RIGHT COLUMN — DASHBOARD CARD
       ══════════════════════════════════════════ */
    .dashboard-card {
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    /* ── Card header ── */
    .dc-header {
        padding: var(--space-5) var(--space-5) var(--space-3);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .dc-label {
        font-size: var(--text-sm);
        color: var(--navy-300);
        margin-bottom: var(--space-1);
    }

    .dc-value {
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 800;
        color: var(--navy-900);
        letter-spacing: -0.02em;
    }

    .dc-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--text-sm);
        font-weight: 600;
        color: #1a7a4a;
        background: #e6f4ed;
        padding: 4px 10px;
        border-radius: var(--radius-full);
        margin-top: 6px;
    }

    /* ── Chart area ── */
    .dc-chart {
        padding: 0 var(--space-5) var(--space-3);
        height: 200px;
        position: relative;
    }

    .dc-chart svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    /* grid lines */
    .chart-grid line {
        stroke: var(--navy-100);
        stroke-width: 1;
    }

    .chart-label {
        font-size: 11px;
        fill: var(--navy-300);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* area fill */
    .chart-area {
        fill: url(#areaGrad);
    }

    /* line stroke — coral accent */
    .chart-line {
        fill: none;
        stroke: var(--navy-700);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* hover dot */
    .chart-dot {
        fill: var(--surface-card);
        stroke: var(--coral);
        stroke-width: 2.5;
    }

    /* ── Divider ── */
    .dc-divider {
        height: 1px;
        background: var(--border);
        margin: 0 var(--space-5);
    }

    /* ── Stats row ── */
    .dc-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: var(--space-4) var(--space-5);
        gap: var(--space-3);
    }

    .dc-stat-label {
        font-size: var(--text-sm);
        color: var(--navy-300);
        margin-bottom: var(--space-1);
    }

    .dc-stat-value {
        font-size: var(--text-lg);
        font-weight: 800;
        color: var(--coral);
    }

    /* coral accent on first stat */
    .dc-stat:first-child .dc-stat-value {
        color: var(--coral);
    }

    /* ══════════════════════════════════════════
       RESPONSIVE
       ══════════════════════════════════════════ */
    @media (max-width: 1024px) {
        .container {
            padding: 0 var(--space-6);
        }

        .gp-grid {
            gap: var(--space-6);
        }
    }

    @media (max-width: 768px) {
        .gp-grid {
            grid-template-columns: 1fr;
            gap: var(--space-7);
        }

        /* chart comes after text on mobile */
        .gp-text {
            order: 1;
        }

        .gp-visual {
            order: 2;
        }

        .section-giai-phap {
            padding: var(--space-8) 0;
        }
    }

    @media (max-width: 580px) {
        .container {
            padding: 0 var(--space-5);
        }

        .gp-cta {
            flex-direction: column;
            align-items: stretch;
        }

        .btn {
            justify-content: center;
        }

        .dc-stats {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-2);
        }

        .dc-stat-value {
            font-size: var(--text-md);
        }
    }

    @media (max-width: 380px) {
        .container {
            padding: 0 var(--space-4);
        }
    }

    /* ══════════════════════════════════════════
       SECTION
       ══════════════════════════════════════════ */
    .section-hpa {
        padding: var(--space-9) 0;
        background: linear-gradient(155deg, #e8f0f9 0%, var(--surface-page) 55%);
    }

    .hpa-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-8);
        align-items: center;
    }

    /* ══════════════════════════════════════════
       LEFT — TEXT
       ══════════════════════════════════════════ */

    .hpa-headline {
        font-size: var(--text-xl);
        font-weight: 800;
        line-height: 1.2;
        color: var(--navy-900);
        margin-bottom: var(--space-5);
    }

    /* coral gradient on the percentage */
    .hpa-highlight {
        background: linear-gradient(90deg, var(--coral) 0%, var(--coral-soft) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hpa-desc {
        font-size: var(--text-base);
        line-height: 1.75;
        color: var(--navy-300);
        margin-bottom: var(--space-6);
    }

    /* checklist */
    .hpa-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .hpa-list li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        font-size: var(--text-base);
        color: var(--navy-700);
        line-height: 1.6;
    }

    .hpa-list li::before {
        content: '';
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        border-radius: 50%;
        border: 1.8px solid var(--coral-soft);
        background: var(--coral-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c0533a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E") center/12px no-repeat;
    }

    /* ══════════════════════════════════════════
       RIGHT — BAR CARDS
       ══════════════════════════════════════════ */
    .hpa-bars {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .bar-card {
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: var(--space-4) var(--space-5);
        transition: box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
    }

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

    .bar-meta {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: var(--space-2);
    }

    .bar-name {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--navy-900);
    }

    .bar-info {
        font-size: var(--text-sm);
        color: var(--navy-300);
    }

    /* track */
    .bar-track {
        height: 7px;
        border-radius: var(--radius-full);
        background: var(--navy-100);
        overflow: hidden;
    }

    /* fill — animated on load */
    .bar-fill {
        height: 100%;
        border-radius: var(--radius-full);
        background: linear-gradient(90deg, var(--coral) 0%, var(--coral-soft) 100%);
        width: 0%;
        /* starts at 0, JS sets target */
        transition: width 0.9s cubic-bezier(.4, 0, .2, 1);
    }

    /* ══════════════════════════════════════════
       ENTRANCE ANIMATIONS
       ══════════════════════════════════════════ */
    /* fade-up base */
    .anim-fade {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.55s ease,
            transform 0.55s var(--ease-out);
    }

    .anim-fade.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* stagger delays for bar cards */
    .bar-card:nth-child(1) {
        transition-delay: 0.05s;
    }

    .bar-card:nth-child(2) {
        transition-delay: 0.12s;
    }

    .bar-card:nth-child(3) {
        transition-delay: 0.19s;
    }

    .bar-card:nth-child(4) {
        transition-delay: 0.26s;
    }

    .bar-card:nth-child(5) {
        transition-delay: 0.33s;
    }

    .bar-card:nth-child(6) {
        transition-delay: 0.40s;
    }

    /* stagger for left col items */
    .hpa-eyebrow {
        transition-delay: 0.00s;
    }

    .hpa-headline {
        transition-delay: 0.08s;
    }

    .hpa-desc {
        transition-delay: 0.15s;
    }

    .hpa-list {
        transition-delay: 0.22s;
    }

    /* ══════════════════════════════════════════
       RESPONSIVE
       ══════════════════════════════════════════ */
    @media (max-width: 1024px) {
        .container {
            padding: 0 var(--space-6);
        }
    }

    @media (max-width: 768px) {
        .hpa-grid {
            grid-template-columns: 1fr;
            gap: var(--space-7);
        }

        .hpa-text {
            order: 1;
        }

        .hpa-bars {
            order: 2;
        }

        .section-hpa {
            padding: var(--space-8) 0;
        }
    }

    @media (max-width: 580px) {
        .container {
            padding: 0 var(--space-5);
        }

        .bar-card {
            padding: var(--space-3) var(--space-4);
        }
    }

    @media (max-width: 380px) {
        .container {
            padding: 0 var(--space-4);
        }
    }

    /* ══════════════════════════════════════════
       SECTION
       ══════════════════════════════════════════ */
    .section-quy-trinh {
        padding: var(--space-9) 0;
        background: var(--surface-page);
    }

    /* ── Header ── */
    .qt-header {
        text-align: center;
        margin-bottom: var(--space-8);
    }

    .qt-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-sm);
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: var(--space-4);
    }

    .qt-eyebrow::before {
        content: '';
        width: 18px;
        height: 2px;
        background: var(--coral);
        border-radius: var(--radius-full);
        flex-shrink: 0;
    }

    .hpa {
        font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
        font-weight: 800;
        color: var(--navy-900);
        line-height: 1.2;
    }

    /* ══════════════════════════════════════════
   5-CARD GRID  —  hàng 1: 3 card | hàng 2: 2 card căn giữa
   Dùng 6 cột ảo để chia đều
   ══════════════════════════════════════════ */
    .qt-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-5);
        position: relative;
    }

    .qt-card:nth-child(1) {
        grid-column: 1 / 3;
    }

    .qt-card:nth-child(2) {
        grid-column: 3 / 5;
    }

    .qt-card:nth-child(3) {
        grid-column: 5 / 7;
    }

    /* hàng 2: offset 1 cột để 2 card nằm giữa */
    .qt-card:nth-child(4) {
        grid-column: 2 / 4;
    }

    .qt-card:nth-child(5) {
        grid-column: 4 / 6;
    }

    /* ── Step card ── */
    .qt-card {
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: var(--space-5);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition:
            box-shadow var(--dur) ease,
            border-color var(--dur) ease,
            transform var(--dur) var(--ease-out);
    }

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

    .qt-card.is-active {
        border-color: var(--border-active);
        box-shadow: var(--shadow-md);
    }

    /* bottom coral accent line */
    .qt-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: var(--space-5);
        right: var(--space-5);
        height: 3px;
        border-radius: var(--radius-full) var(--radius-full) 0 0;
        background: linear-gradient(90deg, var(--coral), var(--coral-soft));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--ease-out);
    }

    .qt-card:hover::after,
    .qt-card.is-active::after {
        transform: scaleX(1);
    }

    /* ── Big step number (watermark) ── */
    .qt-num {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        font-size: 56px;
        font-weight: 900;
        color: var(--navy-100);
        line-height: 1;
        letter-spacing: -0.03em;
        pointer-events: none;
        transition: color var(--dur) ease;
        user-select: none;
    }

    .qt-card:hover .qt-num,
    .qt-card.is-active .qt-num {
        color: #dce8f5;
    }

    /* ── Icon circle ── */
    .qt-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--navy-100);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-6);
        margin-top: var(--space-2);
        transition: background var(--dur) ease;
    }

    .qt-card:hover .qt-icon,
    .qt-card.is-active .qt-icon {
        background: var(--coral-dim);
    }

    .qt-icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--navy-500);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke var(--dur) ease;
    }

    .qt-card:hover .qt-icon svg,
    .qt-card.is-active .qt-icon svg {
        stroke: var(--coral);
    }

    .qt-card:hover .qt-icon i,
    .qt-card.is-active .qt-icon i {
        color: var(--coral);
    }

    /* ── Text ── */
    .qt-title {
        font-size: var(--text-lg);
        /* tăng lên từ text-md */
        font-weight: 700;
        color: var(--navy-900);
        margin-bottom: var(--space-2);
        line-height: 1.3;
    }

    .qt-desc {
        font-size: var(--text-base);
        /* tăng lên từ text-sm */
        line-height: 1.75;
        color: var(--navy-300);
    }

    /* ── Arrow connector (desktop) ── */
    .qt-arrow {
        position: absolute;
        top: 50%;
        right: -14px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qt-arrow svg {
        width: 16px;
        height: 16px;
        stroke: var(--navy-100);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ══════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════ */
    .anim-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .5s ease, transform .5s var(--ease-out);
    }

    .anim-fade.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .qt-header {
        transition-delay: .00s;
    }

    .qt-card:nth-child(1) {
        transition-delay: .06s;
    }

    .qt-card:nth-child(2) {
        transition-delay: .14s;
    }

    .qt-card:nth-child(3) {
        transition-delay: .22s;
    }

    .qt-card:nth-child(4) {
        transition-delay: .30s;
    }

    .qt-card:nth-child(5) {
        transition-delay: .38s;
    }

    /* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

    /* Tablet: 2 + 2 + 1 */
    @media (max-width: 1024px) {
        .container {
            padding: 0 var(--space-6);
        }

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

        /* reset tất cả grid-column về auto */
        .qt-card:nth-child(n) {
            grid-column: auto;
        }

        /* card 5 một mình: chiếm 50% căn giữa */
        .qt-card:nth-child(5) {
            grid-column: 1 / 2;
            max-width: 100%;
            width: 50%;
            margin: 0 auto;
            /* đặt vào giữa 2 cột: span 2, margin auto */
            grid-column: 1 / 3;
            max-width: 50%;
        }

        .qt-arrow {
            display: none;
        }
    }

    /* Mobile: 1 cột */
    @media (max-width: 580px) {
        .container {
            padding: 0 var(--space-5);
        }

        .qt-grid {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        /* reset hết */
        .qt-card:nth-child(n) {
            grid-column: auto;
            max-width: 100%;
            width: 100%;
            margin: 0;
        }

        .section-quy-trinh {
            padding: var(--space-8) 0;
        }
    }

    @media (max-width: 380px) {
        .container {
            padding: 0 var(--space-4);
        }
    }

    /* ══════════════════════════════════════
     TESTIMONIALS SECTION
  ══════════════════════════════════════ */
    .testimonials {
        padding: var(--space-9) 0;
    }

    .section-heading {
        font-size: clamp(26px, 3vw, 42px);
        font-weight: 700;
        color: var(--navy-900);
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin-bottom: var(--space-7);
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    .testimonial-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        transition: box-shadow var(--duration) var(--ease-out),
            border-color var(--duration) var(--ease-out),
            transform var(--duration) var(--ease-out);
    }

    .testimonial-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-hover);
        transform: translateY(-2px);
    }

    .stars {
        display: flex;
        gap: var(--space-1);
    }

    .star {
        width: 18px;
        height: 18px;
        color: var(--coral);
    }

    .testimonial-quote {
        font-size: var(--text-base);
        color: var(--navy-300);
        line-height: 1.65;
        flex: 1;
    }

    .testimonial-author {
        border-top: 1px solid var(--border);
        padding-top: var(--space-4);
    }

    .author-name {
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--navy-700);
        margin-bottom: 2px;
    }

    .author-role {
        font-size: var(--text-sm);
        color: var(--navy-500);
    }

    /* ══════════════════════════════════════
     CTA SECTION
  ══════════════════════════════════════ */
    .cta-section {
        padding: 0 0 var(--space-9);
    }

    .cta-banner {
        background: linear-gradient(135deg, #0d2d5e 0%, #1a3a6e 50%, #2d1b4e 100%);
        border-radius: var(--radius-lg);
        padding: var(--space-8) var(--space-8);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .cta-content {
        flex: 1;
    }

    .cta-heading {
        font-size: clamp(22px, 2.8vw, 38px);
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-bottom: var(--space-3);
    }

    .cta-sub {
        font-size: var(--text-base);
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.5;
    }

    .cta-actions {
        display: flex;
        gap: var(--space-3);
        flex-shrink: 0;
        align-items: center;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        padding: 0 var(--space-6);
        border-radius: var(--radius-full);
        font-size: var(--text-base);
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: transform var(--duration) var(--ease-out),
            box-shadow var(--duration) var(--ease-out),
            background var(--duration) var(--ease-out);
        white-space: nowrap;
        text-decoration: none;
    }

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

    .btn:active {
        transform: translateY(0);
    }

    .btn-primary {
        background: var(--coral);
        color: #ffffff;
        box-shadow: 0 4px 16px oklch(68% .17 22 / 35%);
    }

    .btn-primary:hover {
        background: var(--coral-soft);
        box-shadow: 0 6px 20px oklch(68% .17 22 / 45%);
    }

    .btn-outline {
        background: transparent;
        color: #ffffff;
        border: 1.5px solid rgba(255, 255, 255, 0.35);
    }

    .btn-outline:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* ══════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════ */
    @media (max-width: 1024px) {
        .testimonials-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .container {
            padding: 0 var(--space-4);
        }

        .testimonials {
            padding: var(--space-7) 0;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .cta-section {
            padding: 0 0 var(--space-7);
        }

        .cta-banner {
            flex-direction: column;
            align-items: flex-start;
            padding: var(--space-6) var(--space-5);
            gap: var(--space-5);
        }

        .cta-actions {
            width: 100%;
            flex-direction: column;
        }

        .btn {
            width: 100%;
            height: 50px;
        }
    }

    @media (max-width: 480px) {
        .testimonials {
            padding: var(--space-6) 0;
        }

        .testimonial-card {
            padding: var(--space-5);
        }
    }

    /* Base state — ẩn trước khi animate */
    [data-animate] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.55s ease, transform 0.55s ease;
        will-change: opacity, transform;
    }

    /* Triggered state */
    [data-animate].is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ══════════════════════════════════════════
   LAYOUT GRID (2 CỘT LỚN)
   ══════════════════════════════════════════ */

    .diag-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    @media (min-width: 1024px) {
        .diag-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ══════════════════════════════════════════
   CARD COMPONENT (CHUYỂN THÀNH LAYOUT NGANG)
   ══════════════════════════════════════════ */
    .diag-card {
        background-color: var(--surface-card);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr;
        /* Mặc định mobile xếp dọc */
    }

    @media (min-width: 640px) {
        .diag-card {
            grid-template-columns: 38% 62%;
            /* Chia tỉ lệ Ảnh bên trái, Chữ bên phải y như mẫu */
        }
    }

    /* Hiệu ứng mờ dần (Fade out) của ảnh sang vùng chữ */
    .diag-card__media {
        position: relative;
        height: 240px;
        width: 100%;
    }

    @media (min-width: 640px) {
        .diag-card__media {
            height: 100%;
        }
    }

    .diag-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Lớp mặt nạ tạo hiệu ứng mờ dần sang bên phải */
    @media (min-width: 640px) {
        .diag-card__media::after {
            content: '';
            position: absolute;
            top: 0;
            right: -1px;
            bottom: 0;
            width: 60px;
            background: linear-gradient(to right, transparent, var(--surface-card));
            pointer-events: none;
        }
    }

    /* Vùng nội dung bên phải */
    .diag-card__body {
        padding: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Đẩy nút bấm luôn xuống đáy */
        background-color: var(--surface-card);
    }

    .diag-card__title {
        font-size: 20px;
        font-weight: 700;
        color: var(--brand-green-dark);
        line-height: 1.3;
        margin-bottom: 12px;
        text-transform: uppercase;
        /* Chữ in hoa theo thiết kế mẫu */
        letter-spacing: -0.01em;
    }

    .diag-card__desc {
        font-size: 15px;
        line-height: 1.5;
        color: var(--navy-300);
        margin-bottom: 24px;
    }

    /* ══════════════════════════════════════════
   CHART 1: STAT BOX (CÁ NHÂN)
   ══════════════════════════════════════════ */
    .stat-box {
        background-color: var(--surface-muted);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-bottom: 24px;
    }

    .stat-box__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .stat-box__label {
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-green-dark);
    }

    .stat-box__sub {
        font-size: 11px;
        color: #7a8b88;
        line-height: 1.3;
        margin-top: 2px;
    }

    .stat-box__value {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .stat-box__number {
        font-size: 28px;
        font-weight: 700;
        color: #1e3a5f;
        /* Màu xanh dương đậm chuẩn số chỉ số */
    }

    .stat-box__delta {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 700;
        color: var(--brand-green-main);
        background-color: var(--brand-green-light);
        padding: 3px 8px;
        border-radius: var(--radius-full);
    }

    .stat-box__delta svg {
        width: 10px;
        height: 10px;
    }

    .stat-box__chart {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ══════════════════════════════════════════
   CHART 2: RADAR CHART (DOANH NGHIỆP)
   ══════════════════════════════════════════ */
    .radar-chart {
        width: 100%;
        max-width: 240px;
        /* Thu nhỏ lại để vừa vặn layout ngang */
        height: auto;
        margin: 0 auto 24px auto;
        display: block;
        overflow: visible;
    }

    .radar-chart text {
        font-size: 11px;
        font-weight: 600;
        fill: #6a7b78;
    }

    /* ══════════════════════════════════════════
   BUTTONS / CTA
   ══════════════════════════════════════════ */
    .diag-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Đẩy mũi tên về bên phải giống hệt mẫu */
        padding: 12px 20px;
        border-radius: var(--radius-md);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all var(--duration) ease;
        width: 100%;
    }

    .diag-cta__label {
        text-transform: uppercase;
        /* In hoa nhãn nút */
        letter-spacing: 0.02em;

    }

    .diag-cta__icon,
    .diag-cta__arrow {
        display: inline-flex;
        align-items: center;

    }

    .diag-cta__icon svg,
    .diag-cta__arrow svg {
        width: 18px;
        height: 18px;

    }

    /* Nút 1: Trải nghiệm cá nhân (Outline) */
    .diag-cta--outline {
        background-color: transparent;
        border: 1.5px solid #007048;
        color: #007048;
    }

    .diag-cta--outline:hover {
        background-color: rgba(0, 133, 86, 0.05);
    }

    /* Nút 2: Chẩn đoán doanh nghiệp (Solid xanh lục) */
    .diag-cta--solid {
        background-color: #007048;
        border: 1.5px solid #007048;
        color: #ffffff;
    }

    .diag-cta--solid:hover {
        background-color: #007048;
        border-color: #007048;
    }

    /* --- 1. BIỂU ĐỒ ĐƯỜNG (PSI CÁ NHÂN) --- */
    .stat-box__chart polyline {
        stroke: #ff6b8b !important;
        /* Đường kẻ màu hồng */
        fill: none !important;
        /* Bỏ nền đen mặc định */
    }

    .stat-box__chart g,
    .stat-box__chart circle {
        fill: #d94665 !important;
        /* Các chấm điểm màu hồng đậm */
    }

    /* --- 2. BIỂU ĐỒ RADAR (DOANH NGHIỆP) --- */
    /* Phục hồi lưới mờ (Grid) */
    .radar-chart g[stroke] {
        stroke: rgba(12, 62, 56, 0.15) !important;
        fill: none !important;
    }

    /* Tô màu vùng data radar */
    .radar-chart polygon[fill] {
        fill: rgba(255, 107, 139, 0.25) !important;
        /* Nền hồng nhạt trong suốt */
        stroke: #ff6b8b !important;
        /* Viền hồng */
        stroke-width: 2.5px !important;
    }

    /* Tô màu các điểm chốt trên radar */
    .radar-chart g[fill] circle {
        fill: #ff6b8b !important;
    }

    /* Chỉnh lại màu chữ trên radar */
    .radar-chart text {
        fill: #5a6e6b !important;
    }