/* ==========================================
  1. MARKDOWN CHUNG (CHAT & MODAL)
   ========================================== */

/* 1. Văn bản chung */
.md-rendered-content,
.chat-body,
.bot-message-content {    
    color: black;     
    font-size: 15.5px;   
    line-height: 1.7; 
}

/* 2. Tiêu đề (Headings) */
.md-rendered-content h1, .md-rendered-content h2, .md-rendered-content h3,
.chat-body h1, .chat-body h2, .chat-body h3,
.bot-message-content h1, .bot-message-content h2, .bot-message-content h3 { 
    font-size: 17px; 
    margin-top: 14px; 
    margin-bottom: 8px;
    font-weight: 600;
}


/* 3. Thẻ Code Inline */
.md-rendered-content code,
.chat-body code,
.bot-message-content code {     
    padding: 2px 6px; 
    border-radius: 8px; 
    color: #D01967;     
}

/* 4. Khối Code (Pre) */
.md-rendered-content pre,
.chat-body pre,
.bot-message-content pre {    
    overflow-x: auto; 
    border-radius: 20px;     
}

/* 5. BẢNG (TABLE) - Đã sửa lỗi viền trắng & dính chữ */
.md-rendered-content table,
.chat-body table,
.bot-message-content table { 
    border-collapse: collapse; 
    width: 100%; 
    margin: 16px 0; 
    display: table; /* Đổi lại thành table thay vì block */
    word-break: normal;
}

.md-rendered-content th, .md-rendered-content td,
.chat-body th, .chat-body td,
.bot-message-content th, .bot-message-content td { 
    border: 1px solid #cad2db; /* Đổi màu viền đậm hơn một chút cho rõ nét */
    padding: 8px 14px;
    text-align: left; 
    vertical-align: top;
    background-color: transparent;
}

.md-rendered-content th,
.chat-body th,
.bot-message-content th { 
    background-color: transparent; 
    font-weight: 600;
}

.md-rendered-content tr:nth-child(even),
.chat-body tr:nth-child(even),
.bot-message-content tr:nth-child(even) {
    background-color: transparent;
}

/* Container bọc ngoài bảng để cuộn ngang mượt mà */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* 6. Trích dẫn (Blockquote) */
.md-rendered-content blockquote,
.chat-body blockquote,
.bot-message-content blockquote { 
    border-left: 2px solid var(--primary-color, #0c826f);
    padding-left: 15px; 
    margin: 12px 0; 
    color: #32465a; 
    font-style: italic; 
    background-color: color-mix(in srgb, var(--primary-color, #0c826f) 2%, transparent);
    padding-top: 4px;
    padding-bottom: 4px;

    border-radius: 10px;
}

/* 7. Danh sách (Lists) */
.md-rendered-content ul, .md-rendered-content ol,
.chat-body ul, .chat-body ol,
.bot-message-content ul, .bot-message-content ol {
    padding-left: 20px;
    margin: 8px 0;
}

/* 8. Đường phân cách (Horizontal Rule - HR) */
.md-rendered-content hr,
.chat-body hr,
.bot-message-content hr {
    border: none;
    height: 1px;    
    background: color-mix(in srgb, #cad2db 60%, transparent);
    margin: 20px 0;            /* Tạo khoảng cách lề trên dưới thoáng mắt */
    opacity: 0.8;
}

/* ==========================================
  2. RIÊNG CHO MODAL
   ========================================== */
/* Chỉ áp dụng cho thẻ H1 nằm bên trong Modal */
.modal-container .md-rendered-content h1 {   
   
    /* CĂN NGANG VÀ ĐỊNH DẠNG HÌNH THỨC */
    display: inline-flex;
    align-items: center;
    gap: 6px; 
    width: fit-content;   
    margin-top: 0; 
    color: var(--primary-color) !important;
    background: color-mix(in srgb, #eaeaea 0%, transparent);
    padding: 5px 10px 5px 0px;
    border-radius: 10px;  
    font-size: 16px !important;

    /* CHUYỂN ĐỔI MỀM MẠI (TRANSITION) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hiệu ứng Rê chuột (Hover) mềm mại */
.modal-container .md-rendered-content h1:hover {    
    transform: translateY(-1px); /* Nổi nhẹ lên 1px khi di chuột */
}

/* Icon Sticker đính kèm */
.modal-container .md-rendered-content h1::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233f5368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    
    /* Chuyển đổi icon mềm mại khi rê chuột */
    transition: transform 0.3s ease;
}

/* Phóng to nhẹ icon sticker khi rê chuột vào H1 */
.modal-container .md-rendered-content h1:hover::before {
    transform: scale(1.1);
}