/* 
===================================================
   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;
    }
}