/* ==========================================================
 * FILE MỚI: binh-giai.css
 * CHỨA TOÀN BỘ GIAO DIỆN CHO PHẦN BÌNH GIẢI
 * ========================================================== */

.binh-giai-main-title {
    font-size: 1.875rem; /* 3xl */
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #4f46e5; /* indigo-600 */
}
.dark .binh-giai-main-title {
    color: #a5b4fc; /* indigo-300 */
}

.binh-giai-cung-box {
    padding: 1rem;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #f9fafb; /* gray-50 */
}
.dark .binh-giai-cung-box {
    border-color: #374151; /* gray-700 */
    background-color: rgba(31, 41, 55, 0.5); /* gray-800 with transparency */
}

.binh-giai-cung-title {
    font-size: 1.25rem; /* xl */
	 font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    margin-bottom: 0.75rem;
     color: #4285F4; /* Google Blue */
}
.dark .binh-giai-cung-title {
    color: #5eead4; /* teal-400 */
}

.binh-giai-label {
    display: block;
    font-size: 0.875rem; /* sm */
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.binh-giai-sao-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sao-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid currentColor;
    opacity: 0.9;
    white-space: nowrap;
}

.binh-giai-info-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
    font-size: 0.875rem; /* sm */
    padding-top: 0.5rem;
}

@media (min-width: 640px) {
    .binh-giai-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.binh-giai-luan-giai-box {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #d1d5db; /* gray-300 */
}
.dark .binh-giai-luan-giai-box {
    border-color: #4b5563; /* gray-600 */
}

.binh-giai-luan-giai-item {
    font-size: 0.875rem; /* sm */
    color: #374151; /* gray-700 */
    margin-bottom: 0.75rem; /* Thêm khoảng cách giữa các luận giải */
}
.dark .binh-giai-luan-giai-item {
    color: #d1d5db; /* gray-300 */
}

/* === CSS MỚI: MÀU SẮC CHO CÁC PHẦN LUẬN GIẢI === */
.luan-giai-trang-sinh .font-semibold {
    color: #2563eb; /* blue-600 */
}
.dark .luan-giai-trang-sinh .font-semibold {
    color: #60a5fa; /* blue-400 */
}
.luan-giai-luu-han .font-semibold {
    color: red; /* purple-600 */
}
.dark .luan-giai-luu-han .font-semibold {
    color: #c084fc; /* purple-400 */
}

/* === CSS MỚI CHO HIỂN THỊ ĐẠI VẬN HIỆN TẠI === */
.active-dai-van-box {
    border-color: #10b981; /* emerald-500 */
    background-color: #ecfdf5; /* emerald-50 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .active-dai-van-box {
    border-color: #34d399; /* emerald-400 */
    background-color: #064e3b; /* emerald-900 */
}

.active-dai-van-row {
    background-color: #d1fae5 !important; /* emerald-100 */
}

.active-dai-van-box .binh-giai-cung-title {
    color: #047857; /* emerald-700 */
}

.dark .active-dai-van-box .binh-giai-cung-title {
    color: #a7f3d0; /* emerald-200 */
}

.binh-giai-cung-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.binh-giai-copy-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}


.binh-giai-copy-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0; /* Ngăn các nút bị co lại */
}

.binh-giai-copy-buttons button {
    background-color: #f3f4f6; /* gray-100 */
    border: 1px solid #d1d5db; /* gray-300 */
    color: #4b5563; /* gray-600 */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dark .binh-giai-copy-buttons button {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #d1d5db; /* gray-300 */
}

.binh-giai-copy-buttons button:hover {
    background-color: #e5e7eb; /* gray-200 */
    border-color: #9ca3af; /* gray-400 */
    color: #1f2937; /* gray-800 */
}

.dark .binh-giai-copy-buttons button:hover {
    background-color: #4b5563; /* gray-600 */
    border-color: #6b7280; /* gray-500 */
    color: #f9fafb; /* gray-50 */
}

.hidden-copy-area {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================
 * CODE MỚI: TẠO KHUNG NỔI BẬT CHO SAO LƯU HẠN
 * ========================================================== */

.luan-giai-luu-han {
    background-color: #ffebee; /* Màu nền đỏ nhạt */
    border-left: 4px solid #c0392b; /* Đường kẻ đỏ đậm */
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-top: 0.75rem !important;
}

/* Giao diện DARK MODE */
.dark .luan-giai-luu-han {
    background-color: rgba(168, 85, 247, 0.1); /* Màu nền tím trong suốt */
    border-left-color: #c084fc; /* Đường kẻ màu tím sáng hơn (purple-400) */
}

/* ==========================================================
 * GIAO DIỆN MỚI: KHUNG LUẬN GIẢI CUNG AN THÂN (V6.1 - NỀN XÁM CAO CẤP)
 * ========================================================== */

/* --- Giao diện Sáng (Light Mode) --- */
.than-cu-analysis-section {
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 0.5rem; /* bo góc */
    border: 1px solid #f1f5f9; /* Viền xám siêu nhạt (slate-100) */
    
    /* THAY ĐỔI: Nền xám chuyên nghiệp rất nhạt thay cho nền trắng */
    background-color: #f8fafc; /* (slate-50) */
    
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 5px 10px -5px rgba(0, 0, 0, 0.02);
}

.than-cu-analysis-title {
    font-family: 'EB Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0; /* Đường kẻ xám nhạt (slate-200) */
    display: flex;
    align-items: center;

    /* HIỆU ỨNG CHỮ CHUYỂN MÀU (GRADIENT) */
    background: linear-gradient(to right, #6d28d9, #be185d, #d97706); /* Tím -> Hồng -> Cam */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.than-cu-analysis-title .icon {
    /* Cho icon màu đầu tiên của dải màu gradient */
    color: #6d28d9; 
    margin-right: 1rem;
}

.than-cu-analysis-section p {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem; 
    line-height: 1.9;
    color: #1f2937; /* Màu chữ xám đen (gray-800) */
}

/* --- Giao diện Tối (Dark Mode) --- */
.dark .than-cu-analysis-section {
    border-color: #1f2937; /* gray-800 */
    background-color: #111827; /* Nền đen xám (gray-900) */
}

.dark .than-cu-analysis-title {
    border-bottom-color: #374151; /* gray-700 */
}

.dark .than-cu-analysis-title .icon {
    color: #8b5cf6; /* Màu tím sáng hơn */
}

.dark .than-cu-analysis-section p {
    color: #d1d5db; /* gray-300 */
}
/* ==========================================================
 * CODE MỚI: ICON CHO TỪNG CUNG (Sử dụng Font Awesome)
 * ========================================================== */

.binh-giai-cung-title .icon {
    margin-right: 0.5rem;
    font-size: 1.2em;
    vertical-align: middle;
}

.cung-menh-icon .icon { color: #3498db; }
.cung-phu-mau-icon .icon { color: #e74c3c; }
.cung-phuc-duc-icon .icon { color: #2ecc71; }
.cung-dien-trach-icon .icon { color: #8e44ad; }
.cung-quan-loc-icon .icon { color: #f1c40f; }
.cung-no-boc-icon .icon { color: #95a5a6; }
.cung-thien-di-icon .icon { color: #34495e; }
.cung-tat-ach-icon .icon { color: #e67e22; }
.cung-tai-bach-icon .icon { color: #27ae60; }
.cung-tu-tuc-icon .icon { color: #16a085; }
.cung-phu-the-icon .icon,
.cung-phu-quan-icon .icon { color: #e84393; }
.cung-huynh-de-icon .icon { color: #7f8c8d; }

/* === CSS MỚI: HIỂN THỊ ĐẸP HƠN CHO SAO LƯU HẠN === */

.binh-giai-luan-giai-item .luan-giai-luu-han {
    background-color: #ffebee; /* Màu nền đỏ nhạt */
    border-left: 4px solid #c0392b; /* Đường kẻ đỏ đậm */
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-top: 0.75rem;
}
.dark .binh-giai-luan-giai-item .luan-giai-luu-han {
    background-color: rgba(192, 57, 43, 0.1); /* Nền đỏ nhạt cho dark mode */
    border-left-color: #c0392b; /* Đường kẻ đỏ đậm cho dark mode */
}
.binh-giai-luan-giai-item .luan-giai-luu-han strong {
    color: #c0392b; /* Màu chữ đỏ đậm */
}

/* ==========================================================
 * KIỂU DÁNG ĐỒNG BỘ CHO TOÀN BỘ PHẦN BÌNH GIẢI (V3.0)
 * ========================================================== */

/* 2. Định dạng cho tiêu đề */
.binh-giai-cung-title {
    font-size: 1.25rem;      /* <-- Chỉnh CỠ CHỮ tiêu đề ở đây */
    font-weight: 700;        /* <-- Chỉnh ĐỘ ĐẬM (700 là đậm) */
    margin-bottom: 0.75rem;  /* <-- Chỉnh KHOẢNG CÁCH bên dưới tiêu đề */
    color: #4285F4;         /* <-- Chỉnh MÀU SẮC tiêu đề ở đây */
    display: flex;
    align-items: center;
}

.dark .binh-giai-cung-title {
    color: #a5b4fc;
}

.binh-giai-cung-title .icon {
    margin-right: 0.75rem;
    font-size: 1.2em;
    color: #4f46e5;
}

.dark .binh-giai-cung-title .icon {
    color: #a5b4fc;
}


/* ==========================================================
 * KIỂU DÁNG ĐỒNG BỘ CUỐI CÙNG
 * ========================================================== */

/* ==========================================================
 * KIỂU DÁNG ĐỒNG BỘ CUỐI CÙNG (DÙNG FONT GỐC)
 * ========================================================== */

/* --- KIỂU TIÊU ĐỀ (FONT GỐC, MÀU XANH) --- */
.binh-giai-cung-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #4285F4; /* Màu xanh dương gốc */
    display: flex;
    align-items: center;
}

.dark .binh-giai-cung-title {
    color: #5eead4;
}

.binh-giai-cung-title .icon {
    margin-right: 0.75rem;
    font-size: 1.2em;
    color: #4285F4; /* Cùng màu với chữ */
}

.dark .binh-giai-cung-title .icon {
    color: #5eead4;
}

/* --- KIỂU NỘI DUNG LUẬN GIẢI (FONT GỐC) --- */
.binh-giai-luan-giai-box p {
    font-size: 1rem; /* Cỡ chữ 16px, chuẩn cho font gốc */
    line-height: 1.7;
}