/* --- Định nghĩa Biến Màu (Giữ nguyên) --- */
:root {
    --primary-accent-color: #E2A248;
    --primary-accent-text: #000000;
    /* ... Các biến màu intensity khác ... */
    --intensity-high-bg: var(--primary-accent-color);
    --intensity-high-text: var(--primary-accent-text);
    --intensity-medium-high-bg: #E2A248;
    --intensity-medium-high-text: #000000;
    --intensity-medium-bg: #EDC66E;
    --intensity-medium-text: #2c3e50;
    --intensity-low-bg: #EDC66E;
    --intensity-low-text: #34495e;
    --intensity-very-low-bg: #EDC66E;
    --intensity-very-low-text: #000000;
    --intensity-lowest-bg: #EDC66E;
    --intensity-lowest-text: #7f8c8d;
}

/* --- CSS cho Personality Card (Tích hợp Accordion) --- */
.personality-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Bỏ min-height để card co giãn theo nội dung */
    /* min-height: 320px; */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden; /* Giữ overflow hidden cho card */
    margin-bottom: 1rem; /* Thêm khoảng cách giữa các card */
}

    .personality-card .card-header {
        /* Giữ nguyên flex để căn chỉnh title, badge, icon */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        cursor: pointer; /* Thêm cursor pointer */
        /* Transition cho màu nền nếu cần */
        transition: background-color 0.3s ease;
    }

    .personality-card .card-header-content {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Khoảng cách giữa title và badge */
    }


    .personality-card .card-header h5 {
        margin-bottom: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    /* --- CSS Màu Header theo Intensity (Giữ nguyên) --- */
    .personality-card.intensity-high .card-header {
        background-color: #E2A248;
        color: #000;
    }

    .personality-card.intensity-medium-high .card-header {
        background-color: #E2A248;
        color: #000;
    }

    .personality-card.intensity-medium .card-header {
        background-color: #E2A248;
        color: #000;
    }
    /* Điều chỉnh nếu cần */
    .personality-card.intensity-low .card-header {
        background-color: #EDC66E;
        color: #34495e;
    }
    /* Điều chỉnh nếu cần */
    .personality-card.intensity-very-low .card-header {
        background-color: #EDC66E;
        color: #000;
    }
    /* Điều chỉnh nếu cần */
    .personality-card.intensity-lowest .card-header {
        background-color: #F8F9FA;
        color: #7f8c8d;
    }
    /* Màu khác biệt cho lowest */


    /* --- CSS Badge trong Header (Giữ nguyên và tinh chỉnh) --- */
    .personality-card .card-header .badge {
        font-size: 0.85em; /* Hơi nhỏ hơn */
        padding: 0.35em 0.6em;
        border-radius: 0.25rem;
        font-weight: 500; /* Giảm độ đậm */
        /* Màu mặc định cho badge (có thể là màu của text header) */
        background-color: #ECB14E;
        color: inherit; /* Kế thừa màu từ header */
        border: 1px solid rgba(0,0,0,0);
    }

    /* Tùy chỉnh màu badge cho các nền cụ thể nếu cần để dễ đọc hơn */
    .personality-card.intensity-medium .card-header .badge,
    .personality-card.intensity-low .card-header .badge,
    .personality-card.intensity-very-low .card-header .badge,
    .personality-card.intensity-lowest .card-header .badge {
    }
    /* Ví dụ cho nền tối nếu cần */
    /* .personality-card.intensity-high .card-header .badge,
.personality-card.intensity-medium-high .card-header .badge {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
} */


    /* --- CSS cho Icon Accordion --- */
    .personality-card .card-header .collapse-icon {
        font-size: 1.1rem;
        transition: transform 0.25s ease-in-out;
        color: inherit; /* Kế thừa màu từ header */
    }

    /* Icon khi card ĐÓNG (header có class .collapsed) */
    .personality-card .card-header.collapsed .collapse-icon::before {
        content: "\f282"; /* Bootstrap Icons: chevron-down */
        font-family: 'bootstrap-icons'; /* Đảm bảo font family đúng */
    }

    /* Icon khi card MỞ (header KHÔNG có class .collapsed) */
    .personality-card .card-header:not(.collapsed) .collapse-icon::before {
        content: "\f286"; /* Bootstrap Icons: chevron-up */
        font-family: 'bootstrap-icons'; /* Đảm bảo font family đúng */
        /* transform: rotate(-180deg); */ /* Thêm nếu muốn xoay */
    }


    /* --- CSS cho Card Body và Table bên trong --- */
    .personality-card .card-body {
        padding: 0; /* Bỏ padding mặc định của card-body vì table sẽ có padding riêng */
        /* flex-grow: 1; Bỏ nếu không cần body luôn chiếm hết không gian */
    }

/* Định dạng Table bên trong Card Body */
.personality-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0; /* Bỏ margin của table */
    background-color: #fff; /* Đảm bảo nền trắng */
}

    .personality-table td {
        padding: 12px 15px; /* Giảm padding một chút */
        vertical-align: top;
        border: none;
        border-bottom: 1px dotted #e9ecef; /* Border nhạt hơn */
        line-height: 1.55;
        word-break: break-word;
        font-size: 0.9rem; /* Giảm font size table */
    }

        .personality-table td:first-child {
            width: 38%; /* Điều chỉnh tỉ lệ cột */
            font-weight: 500; /* Giảm độ đậm */
            color: #495057; /* Màu chữ label */
            border-right: 1px solid #e9ecef; /* Border phải nhạt hơn */
            padding-right: 15px;
        }

        .personality-table td:last-child {
            color: #212529; /* Màu chữ value */
            padding-left: 15px;
        }

    /* Loại bỏ border dưới cùng cho hàng cuối cùng của table */
    .personality-table tbody tr:last-child td {
        border-bottom: none;
    }


/* Bỏ CSS cho .description-item và hr nếu không còn dùng */
/* .personality-card .description-item { ... } */
/* .personality-card hr { ... } */