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

.palace-cell {
    border: 1px solid var(--border-color, #bdc3c7);
    padding: 10px;
    min-height: 180px;
    background: var(--bg-secondary, #fff);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.palace-cell.center {
    background: var(--bg-tertiary, #fdfefe);
    border: 2px solid #f39c12;
}

/* Grid Layout internal 3x3 for elements */
.cell-elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    font-size: 0.85rem;
}

.element-box {
    padding: 2px 5px;
    border-radius: 3px;
}

.elem-mon {
    background: rgba(142, 68, 173, 0.2);
    color: #9b59b6;
}

.elem-tinh {
    background: rgba(41, 128, 185, 0.2);
    color: #3498db;
}

.elem-than {
    background: rgba(211, 84, 0, 0.2);
    color: #e67e22;
    font-weight: bold;
}

.elem-ky {
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    font-weight: bold;
    grid-column: span 2;
    text-align: center;
}

.palace-footer {
    border-top: 1px dashed var(--border-color, #eee);
    margin-top: 5px;
    padding-top: 5px;
    font-size: 0.8rem;
    color: var(--text-muted, #7f8c8d);
    text-align: center;
}

.direction-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.nature-dai_cat { color: #1abc9c; font-weight: bold; }
.nature-cat { color: #27ae60; font-weight: bold; }
.nature-trung { color: #f39c12; }
.nature-hung { color: #e74c3c; font-weight: bold; }
.nature-dai_hung { color: #c0392b; font-weight: bold; }
.nature-cat_hung { color: #e67e22; }

.elem-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--border-color, #eee);
}
.elem-row:last-child { border-bottom: none; }
.elem-row .elem-label {
    font-weight: 600;
    min-width: 40px;
    font-size: 0.82rem;
}
.elem-row .elem-name {
    font-weight: bold;
}
.elem-row .elem-han {
    color: var(--text-muted, #95a5a6);
    font-size: 0.78rem;
}
.elem-row .elem-meaning {
    color: var(--text-muted, #555);
    font-size: 0.82rem;
}
.elem-row .elem-score {
    font-size: 0.78rem;
    margin-left: auto;
}
.elem-score.positive { color: #27ae60; }
.elem-score.negative { color: #e74c3c; }

.app-badge {
    display: inline-block;
    background: rgba(36, 113, 163, 0.2);
    color: #3498db;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    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-Mộc, .hanh-Moc { background: #d5f5e3; color: #1e8449; }
.hanh-Thủy, .hanh-Thuy { background: #d6eaf8; color: #2874a6; }
.hanh-Hỏa, .hanh-Hoa { background: #fadbd8; color: #cb4335; }
.hanh-Thổ, .hanh-Tho { background: #f9e79f; color: #7d6608; }

.combined-box {
    background: rgba(243, 156, 18, 0.1);
    border-left: 3px solid #f39c12;
    padding: 10px 14px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary, #444);
}
.combined-box.nature-cat, .combined-box.nature-dai_cat {
    background: rgba(39, 174, 96, 0.1);
    border-left-color: #27ae60;
}
.combined-box.nature-hung, .combined-box.nature-dai_hung {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
}

.palace-cell .palace-short-meaning {
    font-size: 0.72rem;
    color: var(--text-muted, #666);
    margin-top: 4px;
    border-top: 1px dashed var(--border-color, #ddd);
    padding-top: 3px;
    text-align: center;
}

/* 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; }
.table-light { background-color: var(--bg-tertiary); color: var(--text-primary); }
.table { color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); }