/* 
===================================================
   CUSTOM CSS CHO GIAO DIỆN LÁ SỐ BÁT TỰ
===================================================
- File này được tạo riêng để bác dễ dàng tùy chỉnh CSS thủ công mà không cần chạy lệnh compile của Tailwind.
- File này đã được nhúng sẵn vào trang Lập Lá Số và Luận Giải VIP.
- Để CSS đè được lên hệ thống, bác nên thêm !important vào thuộc tính nếu cần thiết.
- Tips: Dùng Inspect Element (F12) để chọn tên Class hoặc ID chính xác.
*/

/* Đổi màu nền bao quanh (Ví dụ) */
#output-wrapper {
    /* background-color: #f8fafc !important; */
}

/* Đổi màu chữ của danh sách các Đại Vận */
#sidebar-left .dv-item {
    /* border-color: #f59e0b !important; */
}

/* Chỉnh lại độ đậm nhạt của chữ trong khung Tứ Trụ */
#main-content h3 {
    /* color: #333 !important; */
}

/* Fix lỗi Tailwind Tree-shaking cắt mất màu cho 5 hành (dùng cho hàm getBgColor) */
.badge-kim {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

.badge-moc {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

.badge-thuy {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

.badge-hoa {
    background-color: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

.badge-tho {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.bg-amber-300 {
    background-color: #f7f3290a !important;
}

#output-wrapper ::-webkit-scrollbar {
    width: 6px !important;
    height: 8px !important;
    /* Độ dày của thanh cuộn ngang */
}

/* Đây là màu của "Cái Rãnh" (đường ray chạy phía dưới) */
#output-wrapper ::-webkit-scrollbar-track {
    background-color: #f1f5f9 !important;
    /* Xám cực nhạt, gần như hòa vào nền trắng */
    border-radius: 4px !important;
}

/* Đây là màu của "Thanh Trượt" (cục kéo chạy qua chạy lại) */
#output-wrapper ::-webkit-scrollbar-thumb {
    background-color: #f59e0b !important;
    /* Màu Vàng cam (Amber-500) đặc trưng */
    border-radius: 4px !important;
}

/* Khi bác đưa con trỏ chuột lên chạm vào thanh kéo (Nó sẽ đổi màu đậm hơn rực rỡ hơn xíu) */
#output-wrapper ::-webkit-scrollbar-thumb:hover {
    background-color: #d97706 !important;
    /* Vàng hổ phách tối hơn (Amber-600) */
}

@media screen and (max-width: 500px) {
    #luu-nien-title {
        max-width: 200px;
    }
}

/* ===================================================
   STYLING CHO AI RENDER MARKDOWN (Nhìn Premium)
=================================================== */
.marked-content {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

/* Tiêu đề cấp 3 (###) */
.marked-content h3 {
    color: #b45309 !important; /* amber-700 */
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px dashed #fcd34d !important; /* amber-300 */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.marked-content h3::before {
    content: '✨' !important;
    font-size: 1.1rem !important;
}

/* Chữ in đậm (**) */
.marked-content strong {
    color: #020617 !important; /* slate-950 */
    font-weight: 700 !important;
    background: linear-gradient(120deg, #fffbeb 0%, #ffffff 100%) !important; /* amber-50 */
    padding: 2px 6px !important;
    border-radius: 6px !important;
    border-bottom: 2px solid #fde68a !important; /* amber-200 */
}

/* Đoạn văn (p) */
.marked-content p {
    margin-bottom: 1rem !important;
}

/* Danh sách (ul, li) */
.marked-content ul {
    list-style-type: none !important;
    padding-left: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

.marked-content li {
    margin-bottom: 0.75rem !important;
    position: relative !important;
    padding-left: 1.75rem !important;
}

.marked-content li::before {
    content: '✦' !important;
    color: #f59e0b !important; /* amber-500 */
    position: absolute !important;
    left: 0 !important;
    font-size: 0.9rem !important;
    top: 1px !important;
}