/* AgriConnect — Nguồn cung (/nguon-cung). Khung hero dùng chung ở base.css (.ac-hero*). */

/* ---------- Hero visual: cụm ảnh quanh minh hoạ ---------- */
.ac-cluster {
    position: relative;
}

.ac-cluster__base {
    aspect-ratio: 4 / 3.4;
    width: 100%;
    border-radius: var(--ac-radius-lg);
}

.ac-cluster__thumbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ac-cluster__thumb {
    position: absolute;
    width: 74px;
    height: 74px;
    border: 3px solid #fff;
    box-shadow: var(--ac-shadow);
    font-size: 9px;
}

.ac-cluster__thumb--1 { top: 4%;  left: 40%; }
.ac-cluster__thumb--2 { top: 14%; left: 68%; }
.ac-cluster__thumb--3 { top: 38%; left: 82%; }
.ac-cluster__thumb--4 { top: 60%; left: 70%; }
.ac-cluster__thumb--5 { top: 74%; left: 42%; }
.ac-cluster__thumb--6 { top: 54%; left: 16%; }

.ac-cluster__quote {
    position: relative;
    z-index: 2;
    margin: -30px 16px 0;
    padding: 16px 18px;
    font-size: 13px;
    font-style: italic;
    color: var(--ac-ink);
}

/* ---------- 4 thông tin hữu ích ---------- */
.ac-supply-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.ac-supply-feature-card {
    padding: 24px 20px;
}

.ac-supply-feature-card i {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ac-bg-mint-2);
    color: var(--ac-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.ac-supply-feature-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ac-supply-feature-card p {
    font-size: 13px;
    color: var(--ac-muted);
    margin: 0;
}

/* ---------- Timeline nguồn gốc dữ liệu (ảnh người thật) ---------- */
.ac-photo-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
}

.ac-photo-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 132px;
    text-align: center;
}

.ac-photo-flow__img {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    font-size: 9px;
}

.ac-photo-flow__step h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.ac-photo-flow__step p {
    font-size: 11px;
    color: var(--ac-muted);
    margin: 0;
}

.ac-photo-flow__arrow {
    color: #c7d9cd;
    font-size: 18px;
    flex-shrink: 0;
}

/* ---------- 5 câu hỏi quan trọng ---------- */
.ac-question-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 28px;
    align-items: center;
    margin-top: 32px;
}

.ac-question-visual {
    aspect-ratio: 4 / 3.4;
}

.ac-question-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ac-question-card {
    padding: 18px 16px;
}

.ac-question-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ac-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ac-question-card i {
    color: var(--ac-primary-dark);
    font-size: 16px;
    margin-left: 6px;
}

.ac-question-card h4 {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ac-question-card p {
    font-size: 11.5px;
    color: var(--ac-muted);
    margin: 0;
}

/* ---------- Phân tầng dữ liệu rõ ràng và an toàn ---------- */
.ac-privacy-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 32px;
}

.ac-compare-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

.ac-compare-card {
    flex: 1;
    min-width: 220px;
    padding: 18px;
    border-left-width: 3px;
    border-left-style: solid;
}

.ac-compare-card--positive {
    border-left-color: var(--ac-primary);
}

.ac-compare-card--negative {
    border-left-color: var(--ac-danger);
}

.ac-compare-card h4 {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-compare-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ac-compare-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    margin-bottom: 8px;
}

.ac-compare-card--positive li i {
    color: var(--ac-primary);
}

.ac-compare-card--negative li i {
    color: var(--ac-danger);
}

.ac-compare-card li i {
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

.ac-handshake-card {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ac-handshake-card i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ac-bg-mint-2);
    color: var(--ac-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ac-handshake-card h4 {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.ac-handshake-card p {
    font-size: 12px;
    color: var(--ac-muted);
    margin: 0;
}

.ac-privacy-photo {
    position: relative;
    aspect-ratio: 4 / 5;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .ac-supply-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ac-question-grid,
    .ac-privacy-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767px) {
    .ac-supply-feature-grid,
    .ac-question-cards {
        grid-template-columns: 1fr;
    }

    .ac-cluster__thumb {
        width: 56px;
        height: 56px;
    }
}