.palace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.palace-cell {
    border: 1px solid var(--border-color, #ddd);
    padding: 15px;
    min-height: 150px;
    background: var(--bg-secondary, #fff);
    position: relative;
}

.palace-cell.center {
    background: var(--bg-tertiary, #f8f9fa);
}

.palace-name {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: var(--text-primary, #2c3e50);
}

.palace-nature {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.8rem;
}

.nature-cat {
    color: #27ae60;
}

.nature-hung {
    color: #c0392b;
}

.than-item {
    display: block;
    margin: 2px 0;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9rem;
}

.than-cat {
    background-color: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
}

.than-hung {
    background-color: rgba(192, 57, 43, 0.2);
    color: #e74c3c;
}

.than-trung {
    background-color: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.palace-cell:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    cursor: pointer;
    border-color: var(--accent-blue);
}

.palace-meaning {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    margin-top: 6px;
    border-top: 1px dashed var(--border-color, #ddd);
    padding-top: 4px;
}

.detail-section {
    max-width: 800px;
    margin: 20px auto 0;
}

.detail-palace-card {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--border-color, #ddd);
    background: var(--bg-secondary, #fff);
}

.detail-palace-card.detail-cat { border-left-color: #27ae60; }
.detail-palace-card.detail-dai_cat { border-left-color: #1abc9c; }
.detail-palace-card.detail-hung { border-left-color: #e74c3c; }
.detail-palace-card.detail-dai_hung { border-left-color: #c0392b; }
.detail-palace-card.detail-trung { border-left-color: #f39c12; }
.detail-palace-card.detail-neutral { border-left-color: #bdc3c7; }

.than-detail {
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 4px;
    font-size: 0.88rem;
}

.field-badge {
    display: inline-block;
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    margin: 2px;
}

.ngu-hanh-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
}
.hanh-Kim { background: #fdebd0; color: #b9770e; }
.hanh-Moc { background: #d5f5e3; color: #1e8449; }
.hanh-Thuy { background: #d6eaf8; color: #2874a6; }
.hanh-Hoa { background: #fadbd8; color: #cb4335; }
.hanh-Tho { background: #f9e79f; color: #7d6608; }

/* Overrides cho bootstrap để tương thích dark theme */
body { background-color: var(--bg-primary); color: var(--text-primary); }
.card { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
.card-header { background-color: var(--bg-tertiary) !important; border-bottom-color: var(--border-color); }
.form-control { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); }
.form-control:focus { background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--accent-blue); box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25); }
.text-muted { color: var(--text-muted) !important; }