/* ==========================================================
 * FILE MỚI: binh-giai-caitien.css
 * CHỨA GIAO DIỆN NÂNG CẤP CHO PHẦN HIỂN THỊ SAO
 * ========================================================== */

/* THAY THẾ BẰNG KHỐI MÃ NÀY */

/* --- 1. Khung chứa các nhóm sao (Đã bỏ đường kẻ) --- */
.stars-section {
    margin-top: 1.5rem; /* Giữ lại khoảng cách trên để tách các mục */
    padding-top: 0; /* Bỏ phần đệm ở trên */
    border-top: none; /* Quan trọng: Bỏ hoàn toàn đường kẻ */
}
/* Không cần .dark .stars-section nữa vì không có border-top để đổi màu */
.stars-section-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1e3a8a; /* blue-900 */
}
.dark .stars-section-title {
    color: #93c5fd; /* blue-300 */
}

/* --- 2. Giao diện chung cho các "viên" sao --- */
.star-item {
    position: relative;
    cursor: help;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.star-item:hover {
    transform: translateY(-2px) scale(1.02);
    z-index: 10;
}
.main-stars-grid, .sub-stars-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* --- 3. Giao diện cho CHÍNH TINH --- */
.main-star-item {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1px solid;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
}
.main-star-item:hover {
     box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.1);
}
.main-star-item i {
    font-size: 1.25rem;
}

/* --- 4. Giao diện cho PHỤ TINH --- */
.sub-star-item {
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
}
 .sub-star-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
}

/* THAY THẾ BẰNG ĐOẠN MÃ NÀY */
.the-dung {
    font-size: 1rem; /* TO HƠN: Tăng lên 1rem cho gần bằng tên sao */
    font-weight: 600; /* Giảm độ đậm một chút để không lấn át tên sao */
    margin-left: 0.25rem; /* SÁT HƠN: Giảm khoảng cách chỉ còn một chút */
    padding: 0;
    border-radius: 0;
    line-height: 1;
    text-transform: none;
    background-color: transparent;
    color: inherit;
    opacity: 0.9; /* Tăng độ rõ nét lên một chút */
}


/* --- 6. Giao diện cho TOOLTIP --- */
.star-tooltip {
    visibility: hidden; opacity: 0;
    background-color: #1f2937; /* gray-800 */
    color: #f9fafb; /* gray-50 */
    text-align: left;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    min-width: 250px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.star-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    margin-left: -5px; border-width: 5px; border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}
.star-item:hover .star-tooltip {
    visibility: visible; opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.star-tooltip strong { color: #a5b4fc; } /* indigo-300 */
.star-tooltip p { margin-bottom: 0.25rem; }
.star-tooltip p:last-child { margin-bottom: 0; }
.tooltip-the-dung { display: inline-block; padding: 2px 6px; border-radius: 4px; font-weight: 600; margin-left: 4px;}

/* DÁN ĐỂ THAY THẾ TOÀN BỘ KHỐI MÃ MÀU CŨ TRONG FILE binh-giai-caitien.css */

/* --- 7. Bảng màu cho 14 Chính Tinh (Đồng bộ với Lá Số Gốc) --- */

/* NHÓM SAO MÀU CAM/VÀNG (Hành Thổ) */
/* Áp dụng cho: TỬ VI, THIÊN PHỦ */
.sao-color-tu-vi,
.sao-color-thien-phu {
    background-color: #fffbeb; /* amber-50 */
    border-color: #fcd34d; /* amber-300 */
    color: #b45309; /* amber-700 */
}
.dark .sao-color-tu-vi,
.dark .sao-color-thien-phu {
    background-color: #78350f; /* amber-900 */
    border-color: #f59e0b; /* amber-500 */
    color: #fef3c7; /* amber-100 */
}

/* NHÓM SAO MÀU ĐỎ (Hành Hỏa) */
/* Áp dụng cho: LIÊM TRINH, THÁI DƯƠNG */
.sao-color-liem-trinh,
.sao-color-thai-duong {
    background-color: #fee2e2; /* red-100 */
    border-color: #fca5a5; /* red-300 */
    color: #991b1b; /* red-800 */
}
.dark .sao-color-liem-trinh,
.dark .sao-color-thai-duong {
    background-color: #7f1d1d; /* red-900 */
    border-color: #f87171; /* red-400 */
    color: #fee2e2; /* red-100 */
}

/* NHÓM SAO MÀU XANH LỤC (Hành Mộc) */
/* Áp dụng cho: THIÊN CƠ, THIÊN LƯƠNG, THAM LANG */
.sao-color-thien-co,
.sao-color-thien-luong,
.sao-color-tham-lang {
    background-color: #f0fdf4; /* green-50 */
    border-color: #bbf7d0; /* green-200 */
    color: #15803d; /* green-700 */
}
.dark .sao-color-thien-co,
.dark .sao-color-thien-luong,
.dark .sao-color-tham-lang {
    background-color: #166534; /* green-900 */
    border-color: #4ade80; /* green-400 */
    color: #dcfce7; /* green-100 */
}

/* NHÓM SAO MÀU XÁM/ĐEN (Hành Thủy & Kim) */
/* Áp dụng cho: THIÊN ĐỒNG, VŨ KHÚC, THÁI ÂM, CỰ MÔN, THIÊN TƯỚNG, THẤT SÁT, PHÁ QUÂN */
.sao-color-thien-dong,
.sao-color-vu-khuc,
.sao-color-thai-am,
.sao-color-cu-mon,
.sao-color-thien-tuong,
.sao-color-that-sat,
.sao-color-pha-quan {
    background-color: #f1f5f9; /* slate-100 */
    border-color: #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
}
.dark .sao-color-thien-dong,
.dark .sao-color-vu-khuc,
.dark .sao-color-thai-am,
.dark .sao-color-cu-mon,
.dark .sao-color-thien-tuong,
.dark .sao-color-that-sat,
.dark .sao-color-pha-quan {
    background-color: #334155; /* slate-700 */
    border-color: #64748b; /* slate-500 */
    color: #f1f5f9; /* slate-100 */
}

/* --- Màu sắc chung cho các loại sao khác --- */
/* SÁT TINH */
.sao-color-sat-tinh { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.dark .sao-color-sat-tinh { background-color: #7f1d1d; border-color: #f87171; color: #fee2e2; }
/* DÁN ĐOẠN MÃ NÀY ĐỂ THAY THẾ KHỐI MÃ CŨ */

/* CÁT TINH (Màu xanh dương mới) */
.sao-color-cat-tinh {
    background-color: #e0f2fe; /* sky-100 */
    border-color: #7dd3fc; /* sky-300 */
    color: #0369a1; /* sky-700 */
}
.dark .sao-color-cat-tinh {
    background-color: #0c4a6e; /* sky-900 */
    border-color: #38bdf8; /* sky-400 */
    color: #e0f2fe; /* sky-100 */
}

/* Đồng bộ màu icon của Cát tinh với màu chữ */
.sao-color-cat-tinh i {
    color: #38bdf8; /* sky-400 */
}
.dark .sao-color-cat-tinh i {
    color: #7dd3fc; /* sky-300 */
}

/* DÁN VÀO CUỐI FILE binh-giai-caitien.css */

/* --- 8. Giao diện cho Vòng Tràng Sinh --- */
.sao-color-trang-sinh-tot {
    background-color: #f0fdf4; /* green-50 */
    border-color: #bbf7d0; /* green-200 */
    color: #15803d; /* green-700 */
}
.dark .sao-color-trang-sinh-tot {
    background-color: #166534; /* green-900 */
    border-color: #4ade80; /* green-400 */
    color: #dcfce7; /* green-100 */
}

.sao-color-trang-sinh-kha {
    background-color: #fffbeb; /* amber-50 */
    border-color: #fcd34d; /* amber-300 */
    color: #b45309; /* amber-700 */
}
.dark .sao-color-trang-sinh-kha {
    background-color: #78350f; /* amber-900 */
    border-color: #f59e0b; /* amber-500 */
    color: #fef3c7; /* amber-100 */
}

.sao-color-trang-sinh-xau {
    background-color: #fef2f2; /* red-50 */
    border-color: #fecaca; /* red-200 */
    color: #991b1b; /* red-800 */
}
.dark .sao-color-trang-sinh-xau {
    background-color: #7f1d1d; /* red-900 */
    border-color: #f87171; /* red-400 */
    color: #fee2e2; /* red-100 */
}

/* --- 9. ĐỒNG BỘ MÀU ICON CHO 14 CHÍNH TINH --- */

/* THAY THẾ BẰNG ĐOẠN MÃ NÀY */

/* NHÓM SAO MÀU CAM/VÀNG (Hành Thổ) - Icon color */
/* Áp dụng cho: TỬ VI, THIÊN PHỦ */
.sao-color-tu-vi i,
.sao-color-thien-phu i {
    color: #b45309; /* Màu cam/vàng đồng bộ với màu chữ */
}
.dark .sao-color-tu-vi i,
.dark .sao-color-thien-phu i {
    color: #fcd34d; /* Màu vàng sáng hơn cho nền tối, tạo điểm nhấn */
}