/* ======================================= */
/* FILE CSS DÀNH RIÊNG CHO LÁ SỐ      */
/* ======================================= */

.laso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 800px;
    height: 1120px;
     border: 1px solid #a9a9a9; /* Sửa ở đây */
    margin: auto;
    position: relative; /* Thêm thuộc tính này để định vị cho Triệt */
	
}

.laso-container {
    position: relative;
    width: 800px;
    height: 1120px;
    margin: auto;
}

.laso-cung {
    border: 1px solid #a9a9a9; /* Sửa ở đây */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding: 12px 8px;
    font-size: 1rem;
    position: relative;
}

.cung-name {
    font-weight: 700;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11; 
    padding: 0 2px; 
    background-color: transparent; /* Thay đổi ở đây */
}

.dark .cung-name {
    background-color: transparent; /* Và thay đổi cả ở đây */
}

.laso-center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    border: 1px solid #a9a9a9; /* Sửa ở đây */
    padding: 20px 10px 10px 25px; 
    display: flex; 
    flex-direction: column;
	position: relative; /* <<< THÊM DÒNG NÀY VÀO */
}

.laso-center-title {
    color: red;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Thay thế các khối CSS cũ cho laso-center-content bằng toàn bộ khối này */
.laso-center-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    padding: 0 5px; /* Thêm chút đệm cho thoáng */
	position: relative; /* <<< THÊM DÒNG NÀY */
    z-index: 2;         /* <<< VÀ DÒNG NÀY */
}

.laso-center-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.7;
}

.laso-center-content td {
    vertical-align: top;
    padding: 1px 0;
}

.laso-center-content .label-cell {
    font-weight: 700;
    text-align: left; /* Căn lề TRÁI */
    white-space: nowrap;
     color: #000000; /* <<< Đổi thành màu đen */
    padding-right: 15px; /* Khoảng cách giữa nhãn và dấu hai chấm */
}

.dark .laso-center-content .label-cell {
    color: #9ca3af;
}

.laso-center-content .value-cell {
    text-align: left;
    font-weight: 500;
    color: #000000;
}

.dark .laso-center-content .value-cell {
    color: #ffffff;
}

.laso-center-content .value-cell-center {
    text-align: center;
    font-weight: bold;
    padding-top: 4px;
}

.laso-center-footer {
    font-size: 12px;
    color: #9ca3af; 
    text-align: center;
    margin-top: auto;
    padding-top: 16px;
    opacity: 0.9;
}

.dark .laso-center-footer {
    color: #6b7280;
}

/* ========================================================== */
/* CODE MỚI: CHÈN ẢNH NỀN BÁT QUÁI VÀO KHUNG TRUNG TÂM      */
/* ========================================================== */
.laso-center::before {
    content: ''; /* Bắt buộc phải có để pseudo-element hiển thị */
    position: absolute; /* Định vị tuyệt đối so với .laso-center */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* --- Các thuộc tính cho ảnh nền --- */
    background-image: url('./img/batquai.png'); /* Đường dẫn tới ảnh của anh */
    background-size: contain; /* Co ảnh lại để nằm gọn trong khung, không bị cắt */
    background-position: center; /* Căn ảnh ra giữa */
    background-repeat: no-repeat; /* Không lặp lại ảnh */

    /* --- Thuộc tính quan trọng nhất: Làm mờ ảnh nền --- */
    /*opacity: 0.45; /* Anh có thể điều chỉnh số này từ 0.1 đến 0.3 để có độ mờ ưng ý */

    /* Đảm bảo lớp nền này nằm dưới lớp nội dung (z-index: 1 < 2) */
    z-index: 1; 
}

/* Dán hoặc thay thế bằng đoạn code này */
.laso-center-summary {
    text-align: center; /* <<< Căn giữa nội dung */
    margin-top: 10px; 
    margin-bottom: 5px;
}

.laso-center-summary .summary-line {
    font-weight: bold; /* <<< In đậm chữ */
    font-size: 16px;
    line-height: 1.5;
}

/* --- MÀU SẮC CHO CÁC CUNG --- */
.cung-hoa { color: #ef4444; } 
.cung-tho { color: #f97116; } 
.cung-moc { color: #16a34a; } 
.cung-thuy { color: #1e293b; } 
.dark .cung-thuy { color: #f8fafc; } 
.cung-kim { color: #6b7280; } 
.dark .cung-kim { color: #d1d5db; } 

/* --- CSS CHO CÁC CUNG AN SAO (MỆNH, PHỤ MẪU,...) --- */
.cung-an-sao {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #000000;
}

.dark .cung-an-sao {
    color: #ffffff;
}

/* --- CSS CHO CÁC ĐƯỜNG TAM HỢP CHIẾU --- */
#tam-hop-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
	z-index: 5;
}

#tam-hop-svg line {
    stroke: #9ca3af;
    stroke-width: 1;
	z-index: 5;
}

.dark #tam-hop-svg line {
     stroke: #6b7280;
	 z-index: 5;
}

/* --- CSS CHO CUNG THÂN --- */
.cung-an-sao-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px; 
}

.than-cu-label {
    background-color: #DC2626;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

/* --- CSS CHO MÀU SẮC CỦA CỤC --- */
.cuc-hoa { color: #DC2626; }
.cuc-moc { color: #16a34a; }
.cuc-kim { color: #6b7280; }
.cuc-tho { color: #92400e; }
.cuc-thuy { color: #2563eb; }

/* --- CSS CHO SỐ ĐẠI VẬN --- */
.dai-van-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #1e293b;
}

.dark .dai-van-number {
    color: #f8fafc;
}


/* --- CSS CHO KHỐI SAO CHÍNH TINH VÀ PHỤ TINH --- */

.chinh-tinh-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 40px;
    margin-top: 6px;
}

.sao-chinh-tinh {
    font-size: 15px;
	font-weight: bold; /* <-- Dòng này để in đậm */
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.phu-tinh-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-grow: 1; 
    align-items: flex-start;
}

.phu-tinh-col {
    display: flex;
    flex-direction: column;
    width: 48%;
    gap: 1px;
}

.phu-tinh-col.col-right {
    align-items: flex-start; 
}

.sao-phu-tinh {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap; 
}

/* --- CSS CHO VÒNG TRÀNG SINH --- */
.vong-trang-sinh-sao {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #000000;
    font-weight: bold; /* <--- Thêm dòng này */
}

.dark .vong-trang-sinh-sao {
    color: #ffffff;
}

/* --- MÀU SẮC CHO CÁC CHÍNH TINH --- */
.sao-chinh-tinh.tu-vi-sao, .sao-chinh-tinh.thien-phu-sao {
    color: #ff9900 !important;
}
.dark .sao-chinh-tinh.tu-vi-sao, .dark .sao-chinh-tinh.thien-phu-sao {
    color: #ffb84d !important;
}

.liem-trinh-sao, .thai-duong-sao { 
    color: #EF4444; /* <-- Màu đỏ đậm tươi mới */
}
.dark .liem-trinh-sao, .dark .thai-duong-sao { 
    color: #F87171; 
}

.thien-dong-sao, .thai-am-sao, .cu-mon-sao, .thien-tuong-sao, .pha-quan-sao { color: #1e293b; }
.dark .thien-dong-sao, .dark .thai-am-sao, .dark .cu-mon-sao, .dark .thien-tuong-sao, .dark .pha-quan-sao { color: #d1d5db; }

.vu-khuc-sao { color: #E8E8E8; }
.dark .vu-khuc-sao { color: #9ca3af; }

.thien-co-sao, .thien-luong-sao, .tham-lang-sao { 
    color: #1ba21a;
}
.dark .thien-co-sao, .dark .thien-luong-sao, .dark .tham-lang-sao { 
    color: #22c55e;
}

.that-sat-sao { color: #E8E8E8; }
.dark .that-sat-sao { color: #94a3b8; }


/* --- MÀU SẮC CHO CÁC SAO PHỤ TINH --- */
.phu-tinh-green { color: #1ba21a; }
.dark .phu-tinh-green { color: #5dd55a; }

.phu-tinh-red { color: red; }
.dark .phu-tinh-red { color: #ff5252; }

.phu-tinh-black { color: #1e293b; }
.dark .phu-tinh-black { color: #d1d5db; }

.phu-tinh-gray { color: #acaca4; }
.dark .phu-tinh-gray { color: #c7c7bd; }

.phu-tinh-orange { color: orange; }
.dark .phu-tinh-orange { color: #ffc966; }

.phu-tinh-silver { color: #A0A0A0; }
.dark .phu-tinh-silver { color: #C0C0C0; }

/* --- CSS CHO SAO NĂM HẠN (TIỂU HẠN) --- */
.nam-han-sao {
    position: absolute;
    bottom: 12px;
    left: 10px;
    font-size: 11px;
    color: #b91c1c; /* red-700 */
    font-weight: bold;
}

.dark .nam-han-sao {
    color: #f87171; /* red-400 */
}

/* --- CSS CHO SAO THÁNG HẠN --- */
.thang-han-sao {
    position: absolute;
    bottom: 12px;
    right: 10px;
    font-size: 11px;
    color: #000000; /* indigo-600 */
    font-weight: bold;
}

.dark .thang-han-sao {
    color: #a5b4fc; /* indigo-300 */
}

/* --- CODE CẬP NHẬT: CSS CHO SAO TUẦN VÀ TRIỆT --- */
#sao-vong-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua */
    z-index: 10;
}

.sao-vong {
    position: absolute;
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 12px; 
    padding: 0px 14px;
    border-radius: 4px;
    transform: translate(-50%, -50%); 
    border: 1px solid #555;
    white-space: nowrap; 
}

/* ========================================================== */
/* CODE MỚI: CSS HỖ TRỢ XUẤT ẢNH CHO SAO TUẦN, TRIỆT      */
/* ========================================================== */
.sao-vong.sao-vong-for-canvas {
    /* Ghi đè các thuộc tính gây lỗi */
    transform: none !important;
    padding: 0 !important;

    /* Áp dụng lại các thuộc tính an toàn */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 24px;
    margin-left: -45px;
    margin-top: -12px;
}

/* --- MÀU CAM TÙY CHỈNH THEO YÊU CẦU (BỔ SUNG) --- */
.phu-tinh-custom-orange {
    color: #ff9900 !important;
}
.dark .phu-tinh-custom-orange {
    color: #ffb84d !important; /* Màu sáng hơn cho nền tối */
}
/* ========================================================== */
/* CODE MỚI: CSS CHO TÍNH NĂNG FOCUS VÀO CUNG (V1.0)      */
/* ========================================================== */

/* Thêm con trỏ chuột để người dùng biết là có thể click vào cung */
.laso-cung {
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Lớp này sẽ được thêm vào .laso-grid khi một cung bất kỳ được focus.
  Nó sẽ làm mờ tất cả các cung con (.laso-cung) bên trong.
*/
.laso-grid.has-focus .laso-cung {
    opacity: 0.3;
    filter: grayscale(80%);
}

/* Riêng cung nào có lớp .is-focused thì sẽ sáng lại bình thường,
  thậm chí nổi bật hơn với box-shadow và to hơn một chút.
*/
.laso-grid.has-focus .laso-cung.is-focused {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
    z-index: 20; /* Đảm bảo cung được chọn nổi lên trên các cung khác */
    /*box-shadow: 0 0 0 3px #3b82f6, 0 10px 20px rgba(0,0,0,0.2); /* Viền xanh và đổ bóng */
}

.dark .laso-grid.has-focus .laso-cung.is-focused {
    box-shadow: 0 0 0 3px #f59e0b, 0 10px 20px rgba(0,0,0,0.4); /* Viền màu vàng cam cho dark mode */
}

/* ========================================================== */
/* CODE MỚI: CSS CHO TÍNH NĂNG PHÂN TÍCH NHANH (V1.0)     */
/* ========================================================== */

/* --- Nút bấm Phân Tích Nhanh --- */
#phan-tich-nhanh-btn {
    background-color: #f59e0b; /* Màu vàng cam */
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
}

#phan-tich-nhanh-btn:hover {
    background-color: #d97706; /* Màu vàng cam đậm hơn khi hover */
}

/* ========================================================== */
/* CODE MỚI: CSS CHO KHUNG NỘI DUNG PHÂN TÍCH & BÌNH GIẢI (V1.2) */
/* ========================================================== */
.analysis-container {
    margin-top: 1.5rem; /* 24px */
    padding: 1.5rem; /* 24px */
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.5rem; /* 8px */
    background-color: #f9fafb; /* gray-50 */
}

.dark .analysis-container {
    border-color: #374151; /* gray-700 */
    background-color: #1f2937; /* gray-800 */
}

.analysis-container h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    color: #111827;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .analysis-container h3 {
    color: #f9fafb;
    border-bottom-color: #374151;
}

/* Lớp tiện ích để ẩn phần tử */
.hidden {
    display: none;
}

/* ================================================================= */
/* CSS HOÀN CHỈNH CHO TÍNH NĂNG PHÂN TÍCH NHANH (V4.1 - BẢN SỬA LỖI) */
/* ================================================================= */

/* --- 1. BIẾN MÀU & BỐ CỤC CHUNG --- */
:root {
    --hanh-kim: #6b7280; 
    --hanh-moc: #16a34a; 
    --hanh-thuy: #2563eb; 
    --hanh-hoa: #dc2626; 
    --hanh-tho: #f97316;
    --border-light: #e5e7eb;
    --border-dark: #374151;
}
.analysis-container {
    padding: 0;
    background-color: transparent;
    border: none;
}
.analysis-header {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}
.dark .analysis-header {
    color: #f9fafb;
    border-bottom-color: var(--border-dark);
}

/* --- 2. LƯỚI PHÂN TÍCH 12 CUNG --- */
.analysis-grid {
    display: grid;
    /* THAY ĐỔI: Sửa lỗi bố cục 2 cột bằng cách giảm minmax */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* --- 3. THẺ PHÂN TÍCH CHI TIẾT --- */
.analysis-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.dark .analysis-card {
    background-color: #242526;
    border-color: #444;
}
.card-header { text-align: center; margin-bottom: 1rem; }
.header-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.palace-name { font-size: 1.75rem; font-weight: 700; }
.score-tag { font-size: 0.85rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.score-good { background-color: #e7f7ef; color: #16a34a; }
.dark .score-good { background-color: #163426; color: #4ade80; }
.score-average { background-color: #eef2ff; color: #4f46e5; }
.dark .score-average { background-color: #282c57; color: #a5b4fc; }
.score-bad { background-color: #fee2e2; color: #dc2626; }
.dark .score-bad { background-color: #451a1a; color: #f87171; }
.palace-info { font-size: 1rem; color: #65676b; }
.dark .palace-info { color: #a8abaf; }

.card-content {
    display: grid;
    /* THAY ĐỔI: Chuyển từ 2 cột song song thành 1 cột duy nhất */
    grid-template-columns: 1fr; 
    gap: 1rem; /* Giảm khoảng cách một chút */
    border-top: 1px solid #e0e0e0; 
    padding-top: 1rem; 
    flex-grow: 1; 
}
.dark .card-content { border-color: #444; }
.content-title { font-weight: 700; margin-bottom: 0.75rem; font-size: 1rem; }

/* --- 4. DANH SÁCH SAO VÀ MÀU SẮC --- */
.sao-list-container {
    display: grid;
    /* THAY ĐỔI: Tăng từ 2 lên 3 cột để tận dụng chiều rộng mới */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem 1rem; /* Tăng khoảng cách ngang giữa các cột sao */
    font-size: 0.9rem;
}
/* (Các màu sao chi tiết giữ nguyên như file của anh) */
.sao-list-container .tu-vi-sao, .sao-list-container .thien-phu-sao, .sao-list-container .phu-tinh-custom-orange { color: #ff9900 !important; }
.dark .sao-list-container .tu-vi-sao, .dark .sao-list-container .thien-phu-sao, .dark .sao-list-container .phu-tinh-custom-orange { color: #ffb84d !important; }
.sao-list-container .liem-trinh-sao, .sao-list-container .thai-duong-sao, .sao-list-container .phu-tinh-red { color: #EF4444; }
.dark .sao-list-container .liem-trinh-sao, .dark .sao-list-container .thai-duong-sao, .dark .sao-list-container .phu-tinh-red { color: #F87171; }
.sao-list-container .thien-dong-sao, .sao-list-container .thai-am-sao, .sao-list-container .cu-mon-sao, .sao-list-container .thien-tuong-sao, .sao-list-container .pha-quan-sao, .sao-list-container .phu-tinh-black { color: #1e293b; }
.dark .sao-list-container .thien-dong-sao, .dark .sao-list-container .thai-am-sao, .dark .sao-list-container .cu-mon-sao, .dark .sao-list-container .thien-tuong-sao, .dark .sao-list-container .pha-quan-sao, .dark .sao-list-container .phu-tinh-black { color: #d1d5db; }
.sao-list-container .vu-khuc-sao, .sao-list-container .that-sat-sao, .sao-list-container .phu-tinh-gray { color: #6b7280; }
.dark .sao-list-container .vu-khuc-sao, .dark .sao-list-container .that-sat-sao, .dark .sao-list-container .phu-tinh-gray { color: #9ca3af; }
.sao-list-container .thien-co-sao, .sao-list-container .thien-luong-sao, .sao-list-container .tham-lang-sao, .sao-list-container .phu-tinh-green { color: #16a34a; }
.dark .sao-list-container .thien-co-sao, .dark .sao-list-container .thien-luong-sao, .dark .sao-list-container .tham-lang-sao, .dark .sao-list-container .phu-tinh-green { color: #4ade80; }

/* --- 5. BIỂU ĐỒ & CHÚ GIẢI --- */
.stacked-bar { 
    display: flex; 
    width: 100%; 
    height: 24px; 
    border-radius: 4px; 
    overflow: hidden; 
    margin-bottom: 0.75rem; 
    background-color: #e5e7eb; 
}
.dark .stacked-bar { 
    background-color: #4b5563; 
}

.stacked-bar-segment { 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-weight: bold; 
    /* THAY ĐỔI: Giảm cỡ chữ để vừa các ô nhỏ */
    font-size: 0.7rem; 
    overflow: hidden; 
    /* Thêm hiệu ứng để chữ rõ hơn */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* SỬA LỖI: Dùng trực tiếp mã màu, không qua biến */
.stacked-bar-segment.hanh-kim { background-color: #6b7280; }
.stacked-bar-segment.hanh-moc { background-color: #16a34a; }
.stacked-bar-segment.hanh-thuy { background-color: #2563eb; }
.stacked-bar-segment.hanh-hoa { background-color: #dc2626; }
.stacked-bar-segment.hanh-tho { background-color: #f97316; }

.hanh-analysis-text { 
    font-size: 0.95rem; 
    line-height: 1.7; 
    color: #374151; 
    margin-bottom: 1rem;
    
    /* THAY ĐỔI: Chia thành 2 cột */
    column-count: 2;
    column-gap: 1.5rem; /* Khoảng cách giữa 2 cột */
}
.dark .hanh-analysis-text { 
    color: #d1d5db; 
}

.cung-interpretation { 
    font-size: 0.95rem; 
    font-style: italic; 
    line-height: 1.6; 
    border-top: 1px solid #e0e0e0; 
    padding-top: 1rem; 
    margin-top: auto; 
}
.dark .cung-interpretation { 
    border-color: #444; 
}

/* --- 6. Ô TỔNG QUAN TRUNG TÂM --- */
/* (Phần này giữ nguyên, không cần thay đổi) */
.analysis-summary-panel { background-color: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 2rem; }
.dark .analysis-summary-panel { background-color: #242526; border-color: #444; }
.summary-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem 0; }
.summary-score-circle { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; }
.summary-score-circle::before { content: ""; position: absolute; width: 100px; height: 100px; background: #ffffff; border-radius: 50%; }
.dark .summary-score-circle::before { background: #242526; }
.summary-score-text { position: relative; font-size: 2.5rem; font-weight: 700; }
.summary-details { margin-top: 1.5rem; font-size: 0.95rem; line-height: 1.6; }
.summary-details strong { font-weight: 700; }
.summary-details .good-palace { color: #16a34a; font-weight: 700; }
.dark .summary-details .good-palace { color: #4ade80; }
.summary-details .bad-palace { color: #dc2626; font-weight: 700; }
.dark .summary-details .bad-palace { color: #f87171; }

/* --- 7. MÀU SẮC CHUNG CHO TEXT NGŨ HÀNH --- */
/* SỬA LỖI: Dùng trực tiếp mã màu, không qua biến */
.hanh-kim-text { color: #6b7280; font-weight: 500; }
.hanh-moc-text { color: #16a34a; font-weight: 500; }
.hanh-thuy-text { color: #2563eb; font-weight: 500; }
.hanh-hoa-text { color: #dc2626; font-weight: 500; }
.hanh-tho-text { color: #f97316; font-weight: 500; }
.dark .hanh-kim-text { color: #9ca3af; } .dark .hanh-moc-text { color: #4ade80; }
.dark .hanh-thuy-text { color: #60a5fa; } .dark .hanh-hoa-text { color: #f87171; }
.dark .hanh-tho-text { color: #fb923c; }
.interpretation.sinh { color: #16a34a; } .interpretation.khac { color: #dc2626; }
.interpretation.hoa { color: #6b7280; }
.dark .interpretation.sinh { color: #4ade80; } .dark .interpretation.khac { color: #f87171; }
.dark .interpretation.hoa { color: #9ca3af; }

/* --- 8. KHU VỰC PHÂN TÍCH BỔ SUNG (V3.0 - ĐƯỜNG KẺ NGĂN CÁCH) --- */
.supplementary-analysis-container { 
    margin-top: 2rem; 
    padding: 1.5rem; 
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background-color: #ffffff; 
}

.dark .supplementary-analysis-container {
    border-color: #444;
    background-color: #242526;
}

/* Giữ lại tiêu đề chung "Luận Giải Bổ Sung" */
.supplementary-analysis-container h3 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin: 0 0 1.5rem 0; 
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.dark .supplementary-analysis-container h3 {
    border-bottom-color: #374151; /* gray-700 */
}

/* CSS cho từng mục luận giải bên trong */
.old-phan-tich-item {
    display: flex;
    gap: 1rem;
}

/* TỰ ĐỘNG THÊM ĐƯỜNG KẺ VÀ KHOẢNG CÁCH CHO CÁC MỤC Ở SAU (V2.0 - GRADIENT) */
.old-phan-tich-item + .old-phan-tich-item {
    position: relative; /* Bắt buộc phải có để định vị cho đường kẻ */
    margin-top: 1.5rem; /* Tăng khoảng cách một chút cho thoáng */
    padding-top: 1.5rem;
    border-top: none; /* Bỏ đường kẻ cũ */
}

/* Tạo đường kẻ gradient mới bằng pseudo-element */
.old-phan-tich-item + .old-phan-tich-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%; /* Đường kẻ bắt đầu từ 10% chiều rộng */
    width: 80%; /* Chiều rộng của đường kẻ là 80% */
    height: 2px; /* Độ dày 2px như anh muốn */
    /* Tạo dải màu chuyển sắc từ trong suốt sang xanh và ngược lại */
    background: linear-gradient(to right, transparent, #3b82f6, transparent); 
    opacity: 0.5; /* Giảm độ đậm để trông tinh tế hơn */
}

/* Màu cho chế độ tối */
.dark .old-phan-tich-item + .old-phan-tich-item::before {
    background: linear-gradient(to right, transparent, #60a5fa, transparent);
}
.supplementary-analysis-container h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--border-light); }
.dark .supplementary-analysis-container h3 { border-bottom-color: var(--border-dark); }
.old-phan-tich-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.old-phan-tich-item:last-child { margin-bottom: 0; }
.old-phan-tich-item-icon { font-size: 1.75rem; width: 30px; text-align: center; margin-top: 2px; }
.old-phan-tich-item-content h4 { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.5rem 0; }
.old-phan-tich-item-content p, .old-phan-tich-item-content ul { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #374151; }
.dark .old-phan-tich-item-content p, .dark .old-phan-tich-item-content ul { color: #d1d5db; }
.old-phan-tich-item-content ul { padding-left: 1.25rem; }
.old-phan-tich-item-content .highlight { color: #c2410c; font-weight: 600; }
.dark .old-phan-tich-item-content .highlight { color: #fb923c; }
.old-phan-tich-item-content .highlight-green { color: #15803d; font-weight: 600; }
.dark .old-phan-tich-item-content .highlight-green { color: #4ade80; }


/* --- CODE KIỂM TRA DEBUG Phân Tích Ngũ Hành:--- */
.analysis-card .content-title {
    color: black !important;
}

/* ================================================================= */
/* CSS CHO TÍNH NĂNG LẬT THẺ XEM CHI TIẾT ĐIỂM (V1.1 - SỬA LỖI)       */
/* ================================================================= */

.analysis-card-container {
    perspective: 1000px;
    cursor: pointer;
    /* Thêm min-height để đảm bảo thẻ có chiều cao tối thiểu */
    min-height: 280px; 
}

.analysis-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d; /* <--- ĐÃ SỬA LỖI TẠI ĐÂY */
}

.analysis-card.is-flipped {
    transform: rotateY(180deg);
}

/* SỬA LỖI: Chỉ có mặt sau mới là absolute */
.card-front, .card-back {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.card-back {
    position: absolute; /* Mặt sau nằm đè lên mặt trước */
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.dark .card-back {
    background-color: #242526;
    border-color: #444;
}

.score-details-list {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.9rem;
}

.score-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.dark .score-detail-row {
    border-bottom-color: #374151;
}

.score-detail-row span:first-child {
    color: #4b5563;
    padding-right: 10px; /* Thêm khoảng cách */
}
.dark .score-detail-row span:first-child {
    color: #9ca3af;
}
.score-detail-row small {
    font-style: italic;
    opacity: 0.7;
}

.score-detail-row span:last-child {
    font-weight: bold;
    white-space: nowrap; /* Không xuống dòng */
}

.score-plus {
    color: #16a34a; /* Xanh lá */
}
.dark .score-plus {
    color: #4ade80;
}

.score-minus {
    color: #dc2626; /* Đỏ */
}
.dark .score-minus {
    color: #f87171;
}

.score-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 2px solid #d1d5db;
}
.dark .score-total-row {
    border-top-color: #4b5563;
}

/* ========================================================== */
/* CODE MỚI: CSS CHO BẢNG CHI TIẾT ĐIỂM DẠNG NHÓM (V2.0) */
/* ========================================================== */

/* Class mới cho container danh sách điểm */
.score-details-grouped {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Khoảng cách giữa các nhóm */
}

/* Định dạng cho từng nhóm (VD: nhóm sao tốt, sao xấu) */
.score-details-group {
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background-color: #fafafa;
}
.dark .score-details-group {
    border-color: #333;
    background-color: #2c2c2e;
}

/* Tiêu đề của mỗi nhóm (VD: ⭐ Các Sao Tốt) */
.score-group-header {
    font-weight: bold;
    padding: 8px 12px;
    background-color: #f1f5f9; /* gray-100 */
    border-bottom: 1px solid #e2e8f0; /* gray-200 */
    border-radius: 6px 6px 0 0;
    font-size: 0.95rem;
}
.dark .score-group-header {
    background-color: #374151; /* gray-700 */
    border-bottom-color: #4b5563; /* gray-600 */
}

/* Container chứa danh sách các dòng điểm trong 1 nhóm */
.score-group-list {
    padding: 4px 12px 8px 12px;
}

/* Tinh chỉnh lại dòng điểm để không có border */
.score-group-list .score-detail-row {
    border-bottom: none;
    padding: 4px 0;
}

/* CSS cho kết quả chuyển đổi lịch */
#conversion-result {
    color: #16a34a; /* green-600 */
    font-weight: bold;
    padding-top: 5px;
    line-height: 1.5;
}

.dark #conversion-result {
    color: #4ade80; /* green-400 */
}

.hidden {
    display: none;
}


/* ========================================================== */
/* CSS MỚI: MÀU SẮC CHO PHI HÓA (V1.0)                      */
/* ========================================================== */

.old-phan-tich-item-content .highlight-lộc {
    color: #16a34a; /* green-700 */
    font-weight: 700;
}
.dark .old-phan-tich-item-content .highlight-lộc {
    color: #4ade80; /* green-400 */
}

.old-phan-tich-item-content .highlight-quyền {
    color: #c026d3; /* fuchsia-600 */
    font-weight: 700;
}
.dark .old-phan-tich-item-content .highlight-quyền {
    color: #e879f9; /* fuchsia-400 */
}

.old-phan-tich-item-content .highlight-khoa {
    color: #2563eb; /* blue-600 */
    font-weight: 700;
}
.dark .old-phan-tich-item-content .highlight-khoa {
    color: #60a5fa; /* blue-400 */
}

.old-phan-tich-item-content .highlight-kỵ {
    color: #374151; /* gray-700 */
    font-weight: 700;
}
.dark .old-phan-tich-item-content .highlight-kỵ {
    color: #9ca3af; /* gray-400 */
}

/* ========================================================== */
/* CSS MỚI: HƯỚNG DẪN XEM PHI HÓA (V1.0)                   */
/* ========================================================== */
.phi-hoa-guide {
    border: 1px solid #e2e8f0; /* gray-200 */
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    background-color: #f8fafc; /* slate-50 */
}
.dark .phi-hoa-guide {
    border-color: #334155; /* slate-700 */
    background-color: #1e293b; /* slate-800 */
}

.phi-hoa-guide summary {
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    color: #1e40af; /* blue-800 */
    list-style-position: inside; /* Đưa mũi tên vào trong */
    transition: background-color 0.2s ease-in-out;
}

.phi-hoa-guide summary:hover {
    background-color: #eef2ff; /* indigo-50 */
}

.dark .phi-hoa-guide summary {
    color: #93c5fd; /* blue-300 */
}

.dark .phi-hoa-guide summary:hover {
    background-color: #312e81; /* indigo-900 */
}

.phi-hoa-guide .guide-content {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.dark .phi-hoa-guide .guide-content {
    border-top-color: #334155;
}

.phi-hoa-guide .guide-content p {
    margin-bottom: 0.75rem;
}
.phi-hoa-guide .guide-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}