/* HERO */
.about-hero {
    padding: 40px 0 0px 0;
    position: relative;
}

    .about-hero h2 {
        color: #d4af37;
    }

/* INTRO */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-img img {
    width: 100%;
    border-radius: 12px;
}

/* STATS */
.about-stats {
    background: #2C3539;
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    text-align: center;
}

.stat-item h2 {
    color: #d4af37;
}

.stat-item p {
    color: #fff;
}

/* VALUES */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
}

.value-card {
    background: #2C3539;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
}

/* TIMELINE */
.timeline {
    margin-top: 30px;
    border-left: 2px solid #d4af37;
    padding-left: 20px;
}

.timeline-item {
    margin-bottom: 20px;
}

    .timeline-item span {
        color: #d4af37;
        font-weight: bold;
    }

/* reset khoảng cách chuẩn */
section.about-values {
    padding: 60px 0;
}

/* reset khoảng cách chuẩn */
section.about-intro {
    padding: 40px 0 40px 0;
}

/* reset khoảng cách chuẩn */
section.about-timeline {
    padding-bottom: 40px;
}

/* section nền tối hơn */
section.dark {
    background: #2C3539;
}

/* section nền nhẹ */
section.light {
    background: #2C3539;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

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

    .value-grid {
        grid-template-columns: 1fr;
    }
}