/* --------------------------------------------------------------------------
   5. About Intro — pages/gioi_thieu_page.md §5
   Layout 2 cột: ảnh chân dung bên trái (khối hình học trang trí phía sau,
   dùng --gold-100/--navy-800 sẵn có) + badge & card giới thiệu bên phải.
   Không thêm màu mới ngoài tokens.css hiện có.
   -------------------------------------------------------------------------- */
.about-intro {
    background-color: var(--color-surface);
    padding-block: var(--space-12);
}

@media (min-width: 768px) {
    .about-intro {
        padding-block: var(--space-16);
    }
}

.about-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1024px) {
    .about-intro__grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: var(--space-12);
        align-items: center;
    }
}

/* ---- Media: ảnh chân dung + khối hình học trang trí ---- */
.about-intro__media {
    position: relative;
    max-width: 420px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .about-intro__media {
        margin-inline: 0;
    }
}

/* Khối bo tròn phía sau (gold-100) — mô phỏng blob trang trí trong ảnh mẫu,
   giữ trong palette gold sẵn có thay vì cam. */
.about-intro__media::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-6));
    left: calc(-1 * var(--space-6));
    width: 72%;
    height: 55%;
    background-color: var(--gold-100);
    border-radius: var(--radius-lg);
    z-index: -1;
}

/* Khối hình học chéo phía sau (navy-800) — thay cho mảng tối hình học
   trong ảnh mẫu, dùng navy để nhất quán với brand primary. */
.about-intro__media::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--space-4));
    bottom: calc(-1 * var(--space-4));
    width: 55%;
    height: 42%;
    background-color: var(--navy-800);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: -1;
}

.about-intro__media-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-alt);
}

.about-intro__media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Badge "Về chúng tôi" + đường trang trí có dot ---- */
.about-intro__badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.about-intro__badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    color: var(--navy-800);
    background-color: var(--color-surface);
}

.about-intro__badge-decor {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    max-width: 100%;
    margin-top: var(--space-3);
}

.about-intro__badge-decor-line {
    flex: 1;
    height: var(--border-width-sm);
    background-color: var(--color-border-strong);
}

.about-intro__badge-decor-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-action-accent);
}

/* ---- Card giới thiệu ---- */
.about-intro__card {
    padding: var(--space-8);
    background-color: var(--card-bg);
    border: var(--border-width-sm) solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.about-intro__card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

.about-intro__card p + p {
    margin-top: var(--space-4);
}

.about-intro__highlight {
    color: var(--color-action-accent);
    font-weight: var(--font-weight-semibold);
}

.about-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (max-width: 479.98px) {
    .about-intro__card {
        padding: var(--space-6);
    }

    .about-intro__actions {
        flex-direction: column;
    }

    .about-intro__actions .button {
        width: 100%;
    }
}

.stat-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--card-bg);
    border: var(--border-width-sm) solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.stat-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-tinted);
    color: var(--color-action-primary);
}

.stat-item__icon svg {
    width: 22px;
    height: 22px;
}

.stat-item--accent .stat-item__icon {
    background-color: var(--gold-100);
    color: var(--gold-700);
}

.stat-item--success .stat-item__icon {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.stat-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 2px;
}

.stat-item__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.stat-item__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   6. Company Overview — pages/gioi_thieu_page.md §6
   -------------------------------------------------------------------------- */
.overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.overview__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 68ch;
}

.overview__block h2 {
    margin-bottom: var(--space-3);
}

.overview__block p {
    max-width: 68ch;
}

.overview__media {
    order: -1;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-alt);
    border: var(--border-width-sm) solid var(--color-border);
}

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

@media (min-width: 768px) {
    .overview {
        grid-template-columns: 1.35fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }

    .overview__media {
        order: 0;
    }
}

/* When no real image is available, the media column is simply omitted from
   the markup and .overview falls back to a single readable-width column
   (spec §6: "Nếu chưa có ảnh thật... giữ layout một cột text"). */
.overview:has(> .overview__content:only-child) {
    grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   7. Core Values — pages/gioi_thieu_page.md §7
   Not a sequence — no numbered markers, unlike How We Work below.
   -------------------------------------------------------------------------- */
#values-heading,
#process-heading {
    margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
    #values-heading,
    #process-heading {
        margin-bottom: var(--space-8);
    }
}

.values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.value-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--card-bg);
    border: var(--border-width-sm) solid var(--card-border);
    border-radius: var(--card-radius);
}

.value-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-tinted);
    color: var(--color-action-primary);
    flex-shrink: 0;
}

.value-card__icon svg {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
}

.value-card__title {
    font-size: var(--font-size-md);
}

.value-card__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

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

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

/* --------------------------------------------------------------------------
   8. How We Work — pages/gioi_thieu_page.md §8
   A real sequence — numbered markers carry meaning here.
   -------------------------------------------------------------------------- */
.process__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    counter-reset: none;
}

.process__item {
    display: flex;
    gap: var(--space-4);
    position: relative;
}

.process__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-action-primary);
    color: var(--color-text-on-brand);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.process__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19.5px;
    top: 40px;
    bottom: calc(-1 * var(--space-8));
    width: var(--border-width-sm);
    background-color: var(--color-border);
}

.process__body {
    padding-top: var(--space-1);
}

.process__title {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2);
}

.process__text {
    color: var(--color-text-secondary);
    max-width: 60ch;
}

@media (min-width: 1024px) {
    .process__list {
        flex-direction: row;
        gap: var(--space-6);
    }

    .process__item {
        flex: 1;
        flex-direction: column;
        gap: var(--space-4);
    }

    .process__item:not(:last-child)::before {
        left: 40px;
        top: 19.5px;
        right: calc(-1 * var(--space-6));
        bottom: auto;
        width: auto;
        height: var(--border-width-sm);
        left: 40px;
    }
}

/* --------------------------------------------------------------------------
   9. Trust / Assurance — reuses the same visual pattern as Contact Page's
   trust section; kept in this page-specific file since the trust markup
   itself lives inline per page (no shared component file for it).
   -------------------------------------------------------------------------- */
.trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.trust__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trust__icon {
    width: var(--icon-size-lg, 28px);
    height: var(--icon-size-lg, 28px);
    color: var(--color-action-accent);
}

.trust__item-title {
    font-size: var(--font-size-md);
}

.trust__item-text {
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .trust__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

/* --------------------------------------------------------------------------
   10. CTA Band — pages/gioi_thieu_page.md §10
   One primary CTA only — no competing secondary action (design_system.md §7).
   -------------------------------------------------------------------------- */
.cta-band {
    background-color: var(--color-surface-tinted);
    text-align: center;
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 60ch;
    margin-inline: auto;
}

.cta-band__text {
    color: var(--color-text-secondary);
}