/* ==========================================================
 * FILE CSS ĐẦY ĐỦ CHO TAB "CHỌN LÁ SỐ ĐẸP"
 * Bao gồm: Giao diện kết quả, Giao diện form, Nút bấm & Panel đóng/mở
 * ========================================================== */

/* * PHẦN 1: GIAO DIỆN KẾT QUẢ TÌM KIẾM & KẾT QUẢ ĐÃ LƯU (CODE GỐC)
 * ================================================================= */

/* --- Cấu trúc lưới chứa các thẻ kết quả (TỐI ƯU 3 CỘT) --- */
.results-grid {
    display: grid;
    gap: 1.5rem; /* Giảm gap một chút để có thêm không gian */
    grid-template-columns: 1fr; /* Mặc định 1 cột cho màn hình nhỏ nhất */
}

/* 2 cột cho màn hình từ 768px trở lên (máy tính bảng) */
@media (min-width: 768px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 cột cho màn hình từ 1280px trở lên (màn hình desktop lớn) */
@media (min-width: 1280px) {
    .results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Khung chính của mỗi thẻ kết quả (danh thiếp) --- */
.result-item {
    background-color: #FFFFFF;
    color: #343A40;
    border-radius: 0.75rem;
    border: 1px solid #E9ECEF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dark .result-item {
    background-color: #2c3e50; /* Màu nền dark mode mới */
    border-color: #34495e;
    color: #ecf0f1;
}
.result-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- Phần đầu thẻ (Header) - MÀU XANH CHỦ ĐẠO MỚI --- */
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    border-radius: 0.75rem 0.75rem 0 0;
}
.dark .result-header {
    background: linear-gradient(135deg, #4f46e5, #312e81);
}

/* Chỉnh màu chữ cho Ngày tháng và Giờ */
.result-item-date {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fcd34d; /* Màu vàng giống ảnh mẫu */
}
.dark .result-item-date {
    color: #facc15;
}

.date-al {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.gio-group {
    align-items: flex-end; /* Căn phải cho nhóm giờ */
    text-align: right;
}

.gio-text {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.gioi-tinh-label {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem; /* Tăng một chút padding cho rõ ràng hơn */
    font-size: 0.85rem; /* Tăng nhẹ kích thước chữ */
    font-weight: bold; /* Chữ đậm */
    color: #ffffff; /* Chữ màu trắng */
    background-color: #60a5fa; /* Màu xanh dương tươi sáng */
    border-radius: 9999px;
    margin-top: 0.2rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Thêm hiệu ứng bóng nhẹ */
}
.dark .gioi-tinh-label {
    background-color: #2563eb; /* Màu xanh dương đậm hơn cho dark mode */
    color: #f0f9ff; /* Chữ màu trắng nhạt hơn cho dark mode */
}
.result-header p {
    margin: 0;
    padding: 0.1rem 0;
    line-height: 1.4;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.result-header .result-item-date {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.result-header i {
    margin-right: 0.6rem;
}
.result-header .gioi-tinh-label {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 2px 10px;
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Phần thân thẻ (Body) --- */
.result-body {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Tăng khoảng cách cho thoáng */
    flex-grow: 1;
    padding: 1.5rem; /* Tăng padding cho thoáng */
}
.result-info-line {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}
.dark .result-info-line {
    border-bottom-color: #34495e;
}
.result-info-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.result-info-line i.fa-fw {
    color: #3b82f6; /* Màu icon xanh dương */
    font-size: 1rem;
    width: 18px;
    text-align: center;
    margin-top: 0.15rem;
}
.dark .result-info-line i.fa-fw {
    color: #60a5fa;
}

.info-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
}
.info-container-column { /* Dùng cho các mục có danh sách sao dài */
    display: flex;
    flex-direction: column;
}
.result-info-line .info-label {
    font-weight: 700;
    color: #1e3a8a;
    margin-right: 0.5rem; /* Tạo khoảng cách giữa label và content */
    flex-shrink: 0; /* Ngăn không cho label bị co lại */
}
.dark .result-info-line .info-label {
    color: #93c5fd; /* Màu tiêu đề xanh nhạt cho dark mode */
}
.result-info-line .info-content {
    color: #1f2937;
    font-weight: 500;
}
.dark .result-info-line .info-content {
    color: #ecf0f1;
}
.info-content.star-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}
.highlight-star {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- PHẦN CUỐI THẺ (FOOTER) - TỐI ƯU HÓA --- */
.result-footer {
    padding: 0.75rem 1rem; /* Giảm padding một chút */
    border-top: 1px solid #E9ECEF;
    display: flex;
    justify-content: flex-end; /* Căn phải */
    align-items: center;
    gap: 0.5rem; /* Tạo khoảng cách đều giữa các nút */
    background-color: #f9fafb;
}
.dark .result-footer {
    border-color: #34495e;
    background-color: #2c3e50;
}
/* --- CHUNG CHO CÁC NÚT --- */
.result-footer button {
    height: 38px; /* Đặt chiều cao cố định cho các nút */
    padding: 0 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 9999px; /* Bo tròn */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    border: 1px solid transparent;
}

/* --- 1. NÚT LƯU (TIỆN ÍCH - ICON ONLY) --- */
.save-result-btn {
    width: 38px; /* Đặt chiều rộng bằng chiều cao để tạo hình tròn */
    padding: 0; /* Bỏ padding chữ */
    background-color: #e5e7eb;
    color: #4b5563;
    font-size: 1rem; /* Kích thước icon */
}
.dark .save-result-btn {
    background-color: #4b5563;
    color: #e5e7eb;
}
.save-result-btn:hover {
    background-color: #d1d5db;
}
.dark .save-result-btn:hover {
    background-color: #6b7280;
}
/* Ẩn chữ "Lưu", chỉ giữ lại icon */
.save-result-btn .fa-heart {
    margin-right: 0 !important;
}

/* --- 3. NÚT XEM LÁ SỐ (HÀNH ĐỘNG CHÍNH - SOLID) --- */
.view-laso-btn {
    background-color: #2563eb; /* Màu xanh dương đậm */
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}
.dark .view-laso-btn {
    background-color: #3b82f6;
}
.view-laso-btn:hover {
    background-color: #1d4ed8;
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

/* --- MÀU SẮC CHO CÁC CHÍNH TINH --- */
.tu-vi-sao, .thien-phu-sao { color: #ff9900 !important; }
.dark .tu-vi-sao, .dark .thien-phu-sao { color: #ffb84d !important; }
.liem-trinh-sao, .thai-duong-sao { color: red; }
.dark .liem-trinh-sao, .dark .thai-duong-sao { color: #ef4444; }
.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: #828282; }
.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: #4ade80; }
.that-sat-sao { color: #828282; }
.dark .that-sat-sao { color: #94a3b8; }

/* --- MÀU SẮC CHO CÁC SAO PHỤ TINH --- */
.phu-tinh-green { color: #16a34a; }
.dark .phu-tinh-green { color: #22c55e; }
.phu-tinh-red { color: #ef4444; }
.dark .phu-tinh-red { color: #f87171; }
.phu-tinh-black { color: #1e293b; }
.dark .phu-tinh-black { color: #d1d5db; }
.phu-tinh-gray { color: #6b7280; }
.dark .phu-tinh-gray { color: #9ca3af; }
.phu-tinh-orange { color: #f97316; }
.dark .phu-tinh-orange { color: #fb923c; }
.phu-tinh-silver { color: #A0A0A0; }
.dark .phu-tinh-silver { color: #C0C0C0; }
.phu-tinh-custom-orange { color: #ff9900 !important; }
.dark .phu-tinh-custom-orange { color: #ffb84d !important; }

/* --- MÀU SẮC CHO ĐẤT TRÀNG SINH --- */
.trang-sinh-highlight {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff !important;
}
.trang-sinh-tot { background-color: #16a34a; }
.dark .trang-sinh-tot { background-color: #22c55e; }
.trang-sinh-binh-thuong { background-color: #0284c7; }
.dark .trang-sinh-binh-thuong { background-color: #38bdf8; }
.trang-sinh-xau { background-color: #ef4444; }
.dark .trang-sinh-xau { background-color: #f87171; }

/* --- GIAO DIỆN KẾT QUẢ ĐÃ LƯU --- */
.saved-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
}
.saved-item-card {
    background-color: #fffaf0;
    border: 1px solid #fde68a;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.dark .saved-item-card {
    background-color: #450a0a;
    border-color: #7f1d1d;
}
.saved-item-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    border-color: #f59e0b;
}
.saved-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-bottom: 2px solid #f59e0b;
    font-size: 1rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.dark .saved-card-header {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-bottom-color: #fca5a5;
}
.delete-saved-btn {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fee2e2;
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: bold;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}
.delete-saved-btn:hover {
    background-color: #ffffff;
    color: #dc2626;
    transform: scale(1.1) rotate(90deg);
}
.saved-card-body {
    padding: 1.25rem;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex-grow: 1;
}
.saved-card-body p {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
}
.saved-card-body i.fa-fw {
    color: #b91c1c;
    margin-top: 3px;
    width: 16px;
    text-align: center;
}
.dark .saved-card-body i.fa-fw {
    color: #fca5a5;
}
.saved-card-body p strong {
    font-weight: 600;
    color: #991b1b;
    flex-shrink: 0;
}
.dark .saved-card-body p strong {
    color: #fde68a;
}
.saved-card-body p span {
    color: #1e293b;
    word-break: break-word;
}
.dark .saved-card-body p span {
    color: #f1f5f9;
}

/* --- HIỆU ỨNG LÀM NỔI BẬT CARD KHI QUAY LẠI --- */
@keyframes highlight-pulse { 0% { border-color: #3b82f6; background-color: #eff6ff; } 50% { border-color: #1d4ed8; background-color: #dbeafe; } 100% { border-color: #3b82f6; background-color: #eff6ff; } }
.dark @keyframes highlight-pulse { 0% { border-color: #60a5fa; background-color: rgba(59, 130, 246, 0.1); } 50% { border-color: #93c5fd; background-color: rgba(59, 130, 246, 0.2); } 100% { border-color: #60a5fa; background-color: rgba(59, 130, 246, 0.1); } }
.result-item.highlight-return {
    border-width: 2px;
    border-style: solid;
    animation: highlight-pulse 1s ease-in-out 2;
}


/* * PHẦN 2: GIAO DIỆN BẢNG ĐIỀU KHIỂN & BỐ CỤC FORM (CẬP NHẬT 1)
 * ================================================================= */
.filter-panel {
    background-color: #FFFFFF;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow: hidden; /* Đảm bảo bo góc cho header */
}
.dark .filter-panel {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
}

.filter-panel-header {
    background-color: #f9fafb; /* gray-50 */
    padding: 0.75rem 1.25rem; /* 12px 20px */
    font-size: 1.125rem; /* 18px */
    font-weight: 600; /* semibold */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    color: #111827; /* gray-900 */
}
.dark .filter-panel-header {
    background-color: #374151; /* gray-700 */
    border-bottom-color: #4b5563; /* gray-600 */
    color: #f9fafb; /* gray-50 */
}
.filter-panel-header i {
    color: #4f46e5; /* indigo-600 */
}
.dark .filter-panel-header i {
    color: #818cf8; /* indigo-400 */
}

.filter-panel-body {
    padding: 1.25rem; /* 20px */
}

/* * PHẦN 3: NÚT BẤM MỚI & PANEL ĐÓNG/MỞ (CẬP NHẬT 2)
 * ================================================================= */

/* --- Thiết kế lại nút bấm --- */
.btn-primary, .btn-secondary {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.btn-primary {
    background-color: #16a34a; /* green-600 */
    color: #FFFFFF;
}
.btn-primary:hover {
    background-color: #15803d; /* green-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.btn-secondary {
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
    border-color: #d1d5db; /* gray-300 */
}
.dark .btn-secondary {
    background-color: #4b5563; /* gray-600 */
    color: #e5e7eb; /* gray-200 */
    border-color: #6b7280; /* gray-500 */
}
.btn-secondary:hover {
    background-color: #e5e7eb; /* gray-200 */
    border-color: #9ca3af; /* gray-400 */
    transform: translateY(-2px);
}
.dark .btn-secondary:hover {
    background-color: #6b7280; /* gray-500 */
}

/* --- Nút bấm nhỏ cho các hành động phụ --- */
.btn-action-xs {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s;
}
.btn-action-xs:hover {
    filter: brightness(0.95);
}


/* --- CSS cho panel Nâng cao có thể đóng/mở --- */
.advanced-option-panel summary {
    cursor: pointer;
    outline: none;
    list-style: none; /* Ẩn mũi tên mặc định của details */
}

/* Thêm icon mũi tên tùy chỉnh */
.advanced-option-panel summary::after {
    content: '▼';
    float: right;
    transition: transform 0.2s;
    font-size: 0.8rem;
    margin-left: 1rem;
}

.advanced-option-panel[open] > summary::after {
    transform: rotate(180deg);
}

.advanced-option-panel summary::-webkit-details-marker {
    display: none; /* Ẩn mũi tên trên trình duyệt Chrome/Safari */
}

/* Thêm lại border bottom khi panel được mở ra */
.advanced-option-panel[open] > summary {
    border-bottom: 1px solid #e5e7eb;
}
.dark .advanced-option-panel[open] > summary {
    border-bottom-color: #4b5563;
}

/* ==========================================================
 * FILE CSS BỔ SUNG CHO TÍNH NĂNG "XEM NHANH" (QUICK VIEW)
 * ========================================================== */

/* --- Styling cho Modal Popup --- */
#quick-view-modal.visible {
    display: flex;
    opacity: 1;
}
#quick-view-modal.visible #quick-view-modal-content {
    transform: scale(1);
}

/* --- Styling cho Lá số Thu nhỏ (MINI LASO) --- */
/* Nguyên tắc: Sao chép cấu trúc từ laso.css nhưng giảm kích thước */
.mini-laso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 2px solid #6b7280;
    aspect-ratio: 1 / 1; /* Giữ cho lá số luôn vuông */
    font-size: 8px; /* Giảm kích thước chữ cơ bản */
    line-height: 1.3;
}
.dark .mini-laso-grid {
    border-color: #9ca3af;
}

.mini-cung {
    border: 1px solid #d1d5db;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3px;
    overflow: hidden;
}
.dark .mini-cung {
    border-color: #4b5563;
}

.mini-cung-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.mini-cung-ten {
    color: #1e3a8a;
}
.dark .mini-cung-ten {
    color: #93c5fd;
}

.mini-chinh-tinh {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2px;
}

.mini-phu-tinh-tot, .mini-phu-tinh-xau {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 3px;
    margin-top: 2px;
}
.mini-phu-tinh-tot span {
    color: #15803d;
}
.dark .mini-phu-tinh-tot span {
    color: #4ade80;
}
.mini-phu-tinh-xau span {
    color: #b91c1c;
}
.dark .mini-phu-tinh-xau span {
    color: #f87171;
}

.mini-cung-footer {
    position: absolute;
    bottom: 2px;
    left: 3px;
    font-weight: bold;
    color: #4f46e5;
}
.dark .mini-cung-footer {
    color: #818cf8;
}

/* --- 2. NÚT XEM NHANH (HÀNH ĐỘNG PHỤ - OUTLINE) --- */
.quick-view-btn {
    background-color: transparent; /* Nền trong suốt */
    border-color: #8b5cf6; /* Màu viền tím */
    color: #8b5cf6; /* Màu chữ tím */
}
.dark .quick-view-btn {
    border-color: #a78bfa;
    color: #a78bfa;
}
.quick-view-btn:hover {
    background-color: rgba(139, 92, 246, 0.1); /* Hiệu ứng nền mờ khi hover */
    box-shadow: none;
}

.mini-tuan-triet {
    color: #ef4444; /* Màu đỏ */
    font-weight: bold;
    font-size: 9px;
    text-transform: uppercase;
}

.dark .mini-tuan-triet {
    color: #f87171;
}

/* ========================================================== */
/* == CSS MỚI CHO CẢNH BÁO "PHÁ CỤC" == */
/* ========================================================== */
.phacuc-warning {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-left: 4px solid #f59e0b; /* Viền vàng đậm */
    background-color: #fffbeb; /* Nền vàng rất nhạt */
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.dark .phacuc-warning {
    border-color: #d97706;
    background-color: rgba(245, 158, 11, 0.1);
}
.phacuc-warning .icon {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 2px;
}
.phacuc-warning .text-content {
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.5;
}
.dark .phacuc-warning .text-content {
    color: #fef3c7;
}
.phacuc-warning .text-content strong {
    font-weight: 700;
}
.phacuc-warning .text-content .pha-tinh {
    color: #dc2626; /* Màu đỏ cho sao xấu */
    font-weight: bold;
    text-transform: uppercase;
}
.dark .phacuc-warning .text-content .pha-tinh {
    color: #f87171;
}

/* ========================================================== */
/* == CSS MỚI CHO PHÂN LOẠI KẾT QUẢ TỰ ĐỘNG == */
/* ========================================================== */
.tier-group {
    margin-bottom: 2.5rem;
}

.tier-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.tier-icon {
    font-size: 2rem;
    line-height: 1;
}

.tier-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.tier-description {
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
}

/* Màu sắc cho từng loại */
.tier-thuong-cach {
    background-color: #fef3c7; /* bg-amber-100 */
    border-color: #fcd34d; /* border-amber-300 */
    color: #92400e; /* text-amber-800 */
}
.dark .tier-thuong-cach {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: #f59e0b;
    color: #fef3c7;
}

.tier-trung-cach {
    background-color: #dbeafe; /* bg-blue-100 */
    border-color: #93c5fd; /* border-blue-300 */
    color: #1e40af; /* text-blue-800 */
}
.dark .tier-trung-cach {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #dbeafe;
}

.tier-thu-cach {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-color: #d1d5db; /* border-gray-300 */
    color: #4b5563; /* text-gray-600 */
}
.dark .tier-thu-cach {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: #4b5563;
    color: #d1d5db;
}

/* ========================================================== */
/* == BỔ SUNG: TẠO KIỂU CHO NHÃN CUNG CON GIÁP TRÊN THẺ KẾT QUẢ == */
/* ========================================================== */
.cung-chi-highlight {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #374151;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    vertical-align: middle;
}

.dark .cung-chi-highlight {
    color: #f3f4f6;
    background-color: #4b5563;
    border-color: #6b7280;
}

/* Điều chỉnh cho chú thích cách cục */
.cach-cuc-description {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem; /* Khoảng cách với ô chọn */
    line-height: 1.4; /* Tăng khoảng cách giữa các dòng */
}

/* Điều chỉnh cho chú thích cách cục giáp mệnh (nếu có) */
.giap-menh-description {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Thêm khoảng cách dưới cho các ô select có description */
.has-description {
    margin-bottom: 0.5rem;
}

/* Thêm khoảng cách giữa các nhóm tùy chọn chính */
.option-group {
    margin-bottom: 2.5rem; /* Hoặc 24px */
}

/* Màu cho icon và tiêu đề mới */
.fa-heartbeat {
    color: #4f46e5;
}
.fa-crown {
    color: #3f51b5;
}
.fa-spa {
    color: #9c27b0;
}
.dark .fa-heartbeat {
    color: #818cf8;
}
.dark .fa-crown {
    color: #a5b4fc;
}
.dark .fa-spa {
    color: #c084fc;
}

/* ========================================================== */
/* == CSS BỔ SUNG CHO BỐ CỤC FORM MỚI == */
/* ========================================================== */

/* Định dạng cho mỗi phần logic trong form (vd: Tiêu Chí, Nâng cao...) */
.form-section {
    padding: 1.5rem; /* 24px */
    border-top: 1px solid #e5e7eb; /* gray-200 */
}
.dark .form-section {
    border-top-color: #374151; /* gray-700 */
}

/* Định dạng cho tiêu đề của mỗi phần */
.section-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600; /* semibold */
    color: #111827; /* gray-900 */
    margin-bottom: 1.25rem; /* 20px */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}
.dark .section-title {
    color: #f9fafb; /* gray-50 */
}

/* Điều chỉnh lại khoảng cách của chú thích cách cục để đẹp hơn */
.cach-cuc-description, .giap-menh-description {
    font-size: 0.8rem; /* 13px */
    color: #6b7280; /* gray-500 */
    margin-top: 0.5rem; /* 8px */
    line-height: 1.4;
    font-style: italic;
    min-height: 2.5rem; /* Giữ chiều cao ổn định */
}
.dark .cach-cuc-description, .dark .giap-menh-description {
     color: #9ca3af; /* gray-400 */
}

/* ========================================================== */
/* == CSS MỚI CHO TÍNH NĂNG LUẬN GIẢI AI == */
/* ========================================================== */

.ai-suggestion-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #f3e8ff; /* bg-purple-100 */
    color: #7e22ce; /* text-purple-700 */
    border: 1px solid #d8b4fe; /* border-purple-300 */
}
.dark .ai-suggestion-btn {
    background-color: rgba(168, 85, 247, 0.1);
    color: #d8b4fe;
    border-color: #a855f7;
}
.ai-suggestion-btn:hover {
    background-color: #e9d5ff; /* bg-purple-200 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(126, 34, 206, 0.1);
}
.ai-suggestion-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ai-suggestion-text {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #faf5ff; /* bg-purple-50 */
    border-left: 4px solid #a855f7; /* border-purple-500 */
    border-radius: 4px;
    font-size: 0.9rem;
    color: #581c87; /* text-purple-900 */
    line-height: 1.6;
    animation: fadeIn 0.5s ease-in-out;
    white-space: pre-wrap; /* Giúp giữ lại các định dạng xuống dòng */
}
.dark .ai-suggestion-text {
    background-color: #2e104e;
    color: #e9d5ff;
    border-color: #c084fc;
}
.ai-suggestion-text strong {
    color: #7e22ce;
}
.dark .ai-suggestion-text strong {
    color: #f5d0fe;
}
.ai-suggestion-text .loading-spinner {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 3px solid rgba(126, 34, 206, 0.3);
    border-radius: 50%;
    border-top-color: #7e22ce;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

.hidden { display: none; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}