/* ═══════════════════════════════════════════════════════════════
   Vimiss Brand Story Block (Câu chuyện thương hiệu)
   Frontend & Gutenberg Editor Styles
   ═══════════════════════════════════════════════════════════════ */

.vimiss-brand-story,
.vimiss-brand-story-editor-wrap {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 36px 0;
    font-family: inherit;
    container-type: inline-size;
}

/* ── Heading ── */
.vimiss-bs-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
    flex-wrap: nowrap;
}

.vimiss-bs-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(22px, 2.5vw, 28px);
    height: clamp(22px, 2.5vw, 28px);
}

.vimiss-bs-heading-icon img,
.vimiss-bs-heading-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.vimiss-bs-title {
    margin: 0;
    padding: 0;
    font-size: clamp(20px, 2.3vw, 28px);
    font-weight: 700;
    color: #17436b;
    line-height: 1.25;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* ── Content Paragraphs ── */
.vimiss-bs-content {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.68;
    color: #374151;
    margin: 0 0 28px 0;
}

.vimiss-bs-content p {
    margin: 0 0 16px 0;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: inherit;
}

.vimiss-bs-content p:last-child {
    margin-bottom: 0;
}

/* ── Stats Row (Giữ nguyên 1 hàng ngang, không xuống dòng) ── */
.vimiss-bs-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.8vw, 20px);
    flex-wrap: nowrap !important;
    margin-top: 24px;
    width: 100%;
    box-sizing: border-box;
}

.vimiss-bs-stat-item {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    flex: 1 1 0;
    min-width: 0;
}

.vimiss-bs-stat-icon {
    width: clamp(44px, 4.2vw, 68px);
    height: clamp(44px, 4.2vw, 68px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 1.2vw, 18px);
    overflow: hidden;
}

.vimiss-bs-stat-icon img,
.vimiss-bs-stat-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.vimiss-bs-stat-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex-shrink: 1;
}

.vimiss-bs-stat-num {
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    color: #D94751;
    margin: 0 0 2px 0;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.vimiss-bs-stat-label {
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 600;
    line-height: 1.25;
    color: #265E8A;
    white-space: nowrap;
    margin: 0;
}

/* ── Container Query: Tối ưu hoàn hảo khi đặt trong cột 50% (cạnh video YouTube) ── */
@container (max-width: 580px) {
    .vimiss-bs-title {
        font-size: clamp(18px, 4.5cqi, 24px);
        white-space: nowrap;
    }
    .vimiss-bs-heading {
        gap: 8px;
    }
    .vimiss-bs-heading-icon {
        width: 22px;
        height: 22px;
    }
    .vimiss-bs-content {
        font-size: 14.5px;
        line-height: 1.6;
        margin-bottom: 22px;
    }
    .vimiss-bs-stats {
        gap: 8px;
        flex-wrap: nowrap !important;
    }
    .vimiss-bs-stat-item {
        gap: 6px;
    }
    .vimiss-bs-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .vimiss-bs-stat-num {
        font-size: 20px;
    }
    .vimiss-bs-stat-label {
        font-size: 12.5px;
    }
}

@container (max-width: 420px) {
    .vimiss-bs-title {
        font-size: 17px;
        white-space: nowrap;
    }
    .vimiss-bs-heading-icon {
        width: 18px;
        height: 18px;
    }
    .vimiss-bs-stats {
        gap: 6px;
        flex-wrap: nowrap !important;
    }
    .vimiss-bs-stat-item {
        gap: 5px;
    }
    .vimiss-bs-stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .vimiss-bs-stat-num {
        font-size: 16px;
    }
    .vimiss-bs-stat-label {
        font-size: 11px;
    }
}

/* ── Media Query dự phòng cho các trình duyệt không hỗ trợ container query ── */
@media (max-width: 768px) {
    .vimiss-bs-title {
        font-size: clamp(18px, 4vw, 24px);
        white-space: nowrap;
    }
    .vimiss-bs-stats {
        flex-wrap: nowrap !important;
        gap: 8px;
    }
    .vimiss-bs-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .vimiss-bs-stat-num {
        font-size: 20px;
    }
    .vimiss-bs-stat-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .vimiss-bs-title {
        font-size: 16.5px;
        white-space: nowrap;
    }
    .vimiss-bs-stats {
        gap: 6px;
        flex-wrap: nowrap !important;
    }
    .vimiss-bs-stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }
    .vimiss-bs-stat-num {
        font-size: 15.5px;
    }
    .vimiss-bs-stat-label {
        font-size: 10.5px;
    }
}