/* --- 1. BIẾN HỆ THỐNG (Giữ nguyên prefix id4- cho biến) --- */

:root {
    --id4-font-main: 'Open Sans', sans-serif;
    --id4-font-weight-big-bold: 900;
    --id4-font-weight-small-bold: 700;
    --id4-font-weight-title: 600;
    --id4-font-weight-desript: 400;
    --id4-container-color-xam: #f5f5f7;
    --id4-button-color: #2e3192;
    --id4-bordrer-color: #2e3192;
    --id4-unit: 1rem;
    --id4-font-size-title: calc(var(--id4-unit) * 2);
    --id4-font-size-desription: calc(var(--id4-unit) * 1);
    --id4-container-width: calc(var(--id4-unit) * 68.75);
    --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-color-text-title: #2e3192;
    --id4-color-text-desription: #000000;
    --id4-color-text-secondary: #6b779a;
    --id4-border-radius-card: calc(var(--id4-unit) * 1.75);
    --id4-border-radius-card-small: calc(var(--id4-unit) * 1);
    --icon-box-size: calc(var(--id4-unit) * 5);
}


/* --- 2. CSS COMPONENT (Đã đổi tên Class) --- */


/* Container chính */

.id4-TBCLS-container {
    font-family: var(--id4-font-main);
    width: 100%;
    max-width: var(--id4-container-width);
    margin: 0 auto;
    text-align: center;
    padding: 80px 20px;
    box-sizing: border-box;
}


/* Reset box-sizing cho nội dung bên trong */

.id4-TBCLS-container * {
    box-sizing: border-box;
}


/* Tiêu đề */

.id4-TBCLS-title {
    color: var(--id4-color-text-title);
    font-size: var(--id4-font-size-title);
    font-weight: var(--id4-font-weight-title);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0;
}


/* Card bao ngoài */

.id4-TBCLS-card {
    background: #ffffff;
    border-radius: var(--id4-border-radius-card);
    box-shadow: 0 10px 40px rgba(179, 196, 219, 0.4);
    border: 1px solid rgba(229, 234, 243, 0.5);
    width: 100%;
    min-height: calc(var(--id4-unit) * 28);
    /* Flex setup */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}


/* Vùng click (Link) */

.id4-TBCLS-click-area {
    text-decoration: none;
    width: 100%;
    flex-grow: 1;
    /* Quan trọng để full height */
    /* Căn giữa nội dung */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--id4-spacing-block);
}


/* Hộp icon màu xám */

.id4-TBCLS-icon-box {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    background-color: var(--id4-container-color-xam);
    border-radius: var(--id4-border-radius-card-small);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--id4-spacing-md);
    transition: transform 0.2s ease, background-color 0.2s;
}


/* Dấu cộng */

.id4-TBCLS-plus-icon {
    position: relative;
    width: 30%;
    height: 30%;
}

.id4-TBCLS-plus-icon::before,
.id4-TBCLS-plus-icon::after {
    content: '';
    position: absolute;
    background-color: #aeb5bc;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s;
}

.id4-TBCLS-plus-icon::before {
    width: 100%;
    height: 4px;
}

.id4-TBCLS-plus-icon::after {
    height: 100%;
    width: 4px;
}


/* Text chính */

.id4-TBCLS-text-primary {
    color: var(--id4-color-text-title);
    font-weight: var(--id4-font-weight-small-bold);
    font-size: calc(var(--id4-font-size-desription) * 1.125);
    margin-bottom: var(--id4-spacing-sm);
}


/* Text phụ */

.id4-TBCLS-text-secondary {
    color: var(--id4-color-text-secondary);
    font-size: var(--id4-font-size-desription);
    font-weight: var(--id4-font-weight-desript);
}


/* Hover Effect */

.id4-TBCLS-click-area:hover .id4-TBCLS-icon-box {
    background-color: #eef1f5;
    transform: scale(1.05);
}

.id4-TBCLS-click-area:hover .id4-TBCLS-plus-icon::before,
.id4-TBCLS-click-area:hover .id4-TBCLS-plus-icon::after {
    background-color: var(--id4-button-color);
}


/* Responsive */

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

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

    .id4-TBCLS-card {
        min-height: calc(var(--id4-unit) * 20);
    }
}