/* File: assets/css/global.css */


/* ============================================================
   ROOT (CHUẨN - dùng đúng biến bạn đưa, KHÔNG thêm biến mới)
============================================================ */

:root {
    /* TYPOGRAPHY --------------------- */
    --id4-font-main: 'Open Sans';
    --id4-font-weight-big-bold: 900;
    --id4-font-weight-small-bold: 700;
    --id4-font-weight-title: 600;
    --id4-font-weight-desript: 400;
    /* COLORS ------------------------- */
    --id4-container-color-xam: #f5f5f7;
    --id4-button-color: #2e3192;
    --id4-bordrer-color: #2e3192;
    /* SCALE -------------------------- */
    --id4-unit: 1rem;
    /* FONT SIZES --------------------- */
    --id4-font-size-title: calc(var(--id4-unit) * 2);
    --id4-font-size-desription: calc(var(--id4-unit) * 1);
    --id4-font-size-button: calc(var(--id4-unit) * 0.875);
    /* LAYOUT SIZES ------------------- */
    --id4-container-width: calc(var(--id4-unit) * 68.75);
    --id4-header-height: calc(var(--id4-unit) * 5);
    /* SPACING ------------------------ */
    --id4-spacing-block: calc(var(--id4-unit) * 2.5);
    --id4-spacing-sm: calc(var(--id4-unit) * 0.5);
    --id4-spacing-md: calc(var(--id4-unit) * 1);
    --id4-spacing-lg: calc(var(--id4-unit) * 2);
    /* TEXT COLORS -------------------- */
    --id4-color-text-title: #2e3192;
    --id4-color-text-desription: #000000;
    /* RADIUS ------------------------- */
    --id4-border-radius-card: calc(var(--id4-unit) * 1.75);
    --id4-border-radius-card-small: calc(var(--id4-unit) * 1);
    /* MISC --------------------------- */
    --id4-text-indent: calc(var(--id4-unit) * 1.5625);
    /* ARROW -------------------------- */
    --arrow-width: calc(var(--id4-unit) * 2.5);
    --arrow-height: calc(var(--id4-unit) * 2.1875);
    --arrow-border-width: 3px;
    /* BUTTON PADDING ----------------- */
    --id4-padding-height-button: calc(var(--id4-unit) * 0.625);
    --id4-padding-width-button: calc(var(--id4-unit) * 2.5);
    /* GAP ---------------------------- */
    --id4-gap: calc(var(--id4-unit) * 1.25);
    --id4tv-shadow: 0 calc(var(--id4-unit) * 0.625) calc(var(--id4-unit) * 0.625) rgba(0, 0, 0, .10);
}


/* BREAKPOINT SCALE */

@media (max-width: 768px) {
    :root {
        --id4-unit: 0.9375rem;
    }
}

@media (min-width: 1536px) {
    :root {
        --id4-unit: 1.0625rem;
    }
}


/* ============================================================
   COMPONENT: id4_solution_
============================================================ */

.id4_solution_wrapper {
    padding: calc(var(--id4-spacing-block) * 2) 0;
    background-color: var(--id4-container-color-xam);
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.id4_solution_wrapper *,
.id4_solution_wrapper *::before,
.id4_solution_wrapper *::after {
    box-sizing: border-box;
}


/* Background */

.id4_solution_background {
    width: 100%;
    /* padding: 80px 20px; */
    display: flex;
    justify-content: center;
    background-position: center top;
}

.id4_solution_container {
    max-width: var(--id4-container-width);
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* Layout */

.id4_solution_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--id4-spacing-block) * 2);
}


/* Content */

.id4_solution_col_content {
    flex: 1;
    max-width: calc(var(--id4-unit) * 37.5);
}

.id4_solution_brand {
    color: var(--id4-color-text-title);
    font-size: var(--id4-font-size-title);
    font-weight: var(--id4-font-weight-title);
    text-transform: uppercase;
    display: block;
}

.id4_solution_title {
    color: var(--id4-color-text-title);
    font-size: var(--id4-font-size-title);
    font-weight: var(--id4-font-weight-title);
    margin: 0 0 var(--id4-spacing-lg) 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.id4_solution_desc p {
    margin: 0 0 calc(var(--id4-unit) * 0.9375) 0;
    font-size: var(--id4-font-size-desription);
    color: var(--id4-color-text-desription);
    font-weight: var(--id4-font-weight-desript);
    text-align: justify;
    text-indent: var(--id4-text-indent);
}


/* Buttons */

.id4_solution_actions {
    margin-top: calc(var(--id4-unit) * 1.5625);
    display: flex;
    gap: var(--id4-gap);
    flex-wrap: wrap;
}

.id4_solution_btn {
    padding: var(--id4-padding-height-button) var(--id4-padding-width-button);
    border-radius: calc(var(--id4-unit) * 3.125);
    cursor: pointer;
    font-family: var(--id4-font-main);
    font-size: var(--id4-font-size-button);
    font-weight: var(--id4-font-weight-small-bold);
    transition: all .2s ease;
    display: inline-block;
    background-color: var(--id4-button-color);
    color: #fff;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.id4_solution_btn_primary {
    border: 2px solid var(--id4-button-color);
}

.id4_solution_btn_primary:hover {
    background-color: #252d7a;
    border-color: #252d7a;
    transform: translateY(-2px);
}

.id4_solution_btn_outline {
    background-color: transparent;
    color: var(--id4-button-color) !important;
    border: 2px solid var(--id4-button-color);
}

.id4_solution_btn_outline:hover {
    background-color: rgba(49, 60, 163, 0.05);
}


/* Stats */

.id4_solution_stats {
    display: flex;
    gap: calc(var(--id4-spacing-block) * 1.25);
    padding-top: calc(var(--id4-spacing-block) * 1);
}

.id4_solution_stat_item {
    display: flex;
    flex-direction: column;
}

.id4_solution_stat_num {
    font-size: calc(var(--id4-unit) * 2);
    font-weight: var(--id4-font-weight-small-bold);
    color: var(--id4-color-text-title);
}

.id4_solution_stat_label {
    font-size: calc(var(--id4-unit) * 0.875);
    font-weight: var(--id4-font-weight-title);
    margin-top: -10px;
}


/* Image */

.id4_solution_col_image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.id4_solution_col_image img {
    max-width: 100%;
    height: auto;
    display: block;
    animation: id4_solution_floatIn 1s ease-out;
}

@keyframes id4_solution_floatIn {
    from {
        opacity: 0;
        transform: translateY(calc(var(--id4-unit) * 1.25));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   RESPONSIVE
============================================================ */


/* Tablet */

@media (max-width: 992px) {
    .id4_solution_wrapper {
        padding: 80px 0;
    }

    .id4_solution_row {
        flex-direction: column;
        gap: calc(var(--id4-spacing-lg) * 1.25);
    }

    .id4_solution_col_content {
        max-width: 100%;
        order: 2;
    }

    .id4_solution_col_image {
        order: 1;
        width: 100%;
    }

    .id4_solution_stats {
        flex-wrap: wrap;
        gap: calc(var(--id4-spacing-lg) * 1);
    }
}


/* Mobile */

@media (max-width: 600px) {
    .id4_solution_wrapper {
        padding: 80px 20px;
    }

    .id4_solution_title {
        font-size: calc(var(--id4-unit) * 1.75);
    }

    /* Buttons: 1 hàng */
    .id4_solution_actions {
        flex-direction: row;
        width: 100%;
        gap: var(--id4-spacing-sm);
    }

    .id4_solution_btn {
        flex: 1;
        text-align: center;
        white-space: normal;
    }

    /* Stats: 1 hàng + CANH GIỮA */
    .id4_solution_stats {
        font-family: var(--id4-font-main);
        color: var(--id4-color-text-title);
        flex-wrap: nowrap;
        justify-content: center;
        /* canh giữa cả hàng */
        align-items: center;
        /* canh giữa theo trục dọc */
        gap: var(--id4-spacing-lg);
        /* giữ khoảng cách đẹp */
    }

    .id4_solution_stat_item {
        flex: 0 0 auto;
        /* không kéo giãn, giữ gọn */
        text-align: center;
        /* canh giữa nội dung từng item */
    }

    @media (max-width: 600px) {

        /* reset margin mặc định (thường là do thẻ p) */
        .id4_solution_stat_num,
        .id4_solution_stat_label,
        .id4_solution_stat_item p {
            margin: 0;
        }

        /* làm số sát hơn */
        .id4_solution_stat_num {
            line-height: 1.05;
        }

        /* giảm khoảng cách giữa số và chữ */
        .id4_solution_stat_label {
            margin-top: calc(var(--id4-unit) * -0.85);
            /* ~2px */
            line-height: 1.1;
        }
    }

    .id4_solution_stat_num {
        font-size: calc(var(--id4-unit) * 1.5);
    }

    .id4_solution_stat_label {
        font-size: calc(var(--id4-unit) * 0.85);
        white-space: nowrap;
    }
}


/* Mobile nhỏ */

@media (max-width: 380px) {
    .id4_solution_actions {
        flex-direction: column;
    }

    .id4_solution_btn {
        width: 100%;
    }

    .id4_solution_stats {
        flex-direction: column;
    }

    .id4_solution_stat_item {
        text-align: center;
    }
}