/* ============================================================
   ECOMMERCE PAGE OVERRIDES
   ============================================================ */

/* ── Trust Section Override for Ecommerce Page ── */
.trust {
    /* background-color: #F6F7FB; */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3C!-- H dashed --%3E%3Cline x1='7' y1='0' x2='73' y2='0' stroke='%23BAD2FF' stroke-opacity='.4' stroke-width='1' stroke-dasharray='4 5'/%3E%3C!-- V dashed --%3E%3Cline x1='0' y1='7' x2='0' y2='73' stroke='%23BAD2FF' stroke-opacity='.4' stroke-width='1' stroke-dasharray='4 5'/%3E%3C!-- TL corner --%3E%3Cline x1='0' y1='0' x2='6' y2='0' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='0' y2='6' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- TR corner --%3E%3Cline x1='74' y1='0' x2='80' y2='0' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='80' y1='0' x2='80' y2='6' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- BL corner --%3E%3Cline x1='0' y1='74' x2='0' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='0' y1='80' x2='6' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- BR corner --%3E%3Cline x1='74' y1='80' x2='80' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='80' y1='74' x2='80' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C/svg%3E"); */
    background-size: 80px 80px;
    background-position: center;
    border-bottom: none;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-xl);
}

.trust::before,
.trust::after {
    background: linear-gradient(to right, #F6F7FB, transparent);
}

.trust::after {
    background: linear-gradient(to left, #F6F7FB, transparent);
}

.trust__title {
    color: var(--color-text-third);
    margin-bottom: var(--space-xl);
}

/* ══════════════════════════════════════════════════════════════
   ECOMMERCE CONTACT FORM OVERRIDES
   ══════════════════════════════════════════════════════════════ */

.contact__badge {
    color: #FF5722;
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0.6rem 2rem;
    background: #FFF3ED;
    border-radius: 3rem;
    display: inline-block;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.contact__title {
    color: var(--color-primary);
    margin-bottom: 2rem;
}

.contact__desc {
    font-size: 1.5rem;
}

.contact__contact-label {
    font-size: 1.6rem;
    font-weight: 600;
    color: #4A5568;
}

.contact__contact-item-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1rem;
}

.contact__contact-item-row--mt-2 {
    margin-top: 2rem;
}

.contact__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.contact__contact-type {
    font-size: 1.2rem;
    color: #8898aa;
}

.contact__contact-value {
    font-size: 2rem;
    font-weight: 600;
    color: #2D3748;
}

.contact__contact-value--email {
    font-size: 1.8rem;
    font-weight: 500;
}

.contact-form__label {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
    cursor: pointer;
    user-select: none;
}

.contact-form__required {
    color: #e53e3e;
    margin-left: 0.2rem;
}

.contact-form__submit {
    margin-top: 1rem;
    border-radius: 1rem;
}

/* ── Logos Bottom ── */
.contact__logos {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin-top: 6rem;
    flex-wrap: wrap;
}

.contact__logos-text {
    display: flex;
    flex-direction: column;
}

.contact__logos-count {
    color: #4A5568;
    font-weight: 600;
    font-size: 1.5rem;
}

.contact__logos-desc {
    color: #718096;
    font-size: 1.4rem;
}

.contact__logos-grid {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.contact__logo-img {
    object-fit: contain;
    width: auto;
}

/* Về mặt thị giác (optical sizing), các logo có tỷ lệ dài/rộng khác nhau 
   nên cần xét chiều cao riêng lẻ để chúng trông đều nhau */
.contact__logo-msd {
    height: 34px;
}

.contact__logo-sanofi {
    height: 46px;
    mix-blend-mode: multiply;
}

.contact__logo-kia {
    height: 20px;
}

.contact__logo-hdbank {
    height: 60px;
}

.contact__logo-cuckoo {
    height: 65px;
}

.contact__logo-nutifood {
    height: 48px;
}

.contact__title {
    font-size: clamp(3.2rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

@media (max-width: 900px) {
    .contact__logos {
        justify-content: center;
        flex-direction: column;
        gap: 2rem;
    }

    .contact__logos-text {
        align-items: center;
        text-align: center;
    }

    .contact__logos-grid {
        justify-content: center;
    }

    .ec-hero__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        justify-content: center;
    }
}