.hidden { display: none; }
#hidden { display: none; }
#result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#chart-wrapper {
    position: relative;
    width: 1085px !important; 
    height: 800px !important;
    min-height: 800px !important;
    min-width: 1085px !important;
    background-color: #F2EBE1 !important;
    border: none !important;
    padding: 0 !important;
    transform-origin: top center;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out, height 0.2s ease-in-out; 
}

#chart-grid {
    position: relative;
    width: 1085px;
    height: 800px;
    background-color: #F2EBE1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#palace-layer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 225px);
    grid-template-rows: repeat(4, 160px);
    justify-content: center;
    align-content: center;
    width: 1085px;
    height: 800px;
    padding: 0;
    box-sizing: border-box;
}

#arrow-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.palace { position: relative; border: 1.5px solid #1d1d1d; display: flex; flex-direction: column; padding: 15px 5px 5px 5px; }
.chinh-tinh-container { display: flex; justify-content: center; align-items: center; gap: 5px; }
.sao-ten-column { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.sao-hoa-column { display: flex; flex-direction: column; align-items: center; }
.hoa-hieu { text-align:center; display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; border: 1.5px solid#FF0000; color: #FF0000; border-radius: 50%; font-size: 14px; font-weight: bold; }
.hoa-hieu-wrapper { height: 1.6em; display: flex; align-items: center; }

.cung-ty { grid-area: 1 / 1; } .cung-ngo { grid-area: 1 / 2; } .cung-mui { grid-area: 1 / 3; } .cung-than { grid-area: 1 / 4; }
.cung-thin { grid-area: 2 / 1; } .cung-dau { grid-area: 2 / 4; }
.cung-mao { grid-area: 3 / 1; } .cung-tuat { grid-area: 3 / 4; }
.cung-dan { grid-area: 4 / 1; } .cung-suu { grid-area: 4 / 2; }
.cung-ty-bottom { grid-area: 4 / 3; } .cung-hoi { grid-area: 4 / 4; }

.chart-outer-wrapper { overflow: hidden !important; }

#center-info { grid-area: 2 / 2 / 4 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 1.5px solid #1d1d1d; font-size: 1.0em; line-height: 1.1; background-color: #F2EBE1; color: #000000 !important; }
#center-info h3 { margin: 5px 0 10px 0; font-size: 1.2em; color: rgb(37, 1, 196); }
#center-info-table, #center-summary-table { text-align: left; width: 100%; border-collapse: collapse;font-weight: bold; }
#center-info-table td, #center-summary-table td { padding: 2px; }
.center-divider { width: 80%; border: 0; border-top: 1px solid #ccc; margin: 5px 0; }
.palace-header { display: flex; justify-content: space-between; align-items: flex-start; font-weight: bold; font-size: 0.95em; white-space: nowrap; overflow: hidden; }
.ten-cung { font-weight: bold; color: #000000; font-size: 1em; white-space: nowrap; padding: 0 2px; }
.cung-can-chi { white-space: nowrap; }
.dai-van-text { white-space: nowrap; color: #666; }
.palace-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.stars { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 2px; }
.stars-chinh { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.stars-phu { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; width: 100%; font-size: 0.9em; margin-top: 2px; }
.sao-line { text-align: center; width: 100%; }
.palace-footer { position: relative; display: flex; justify-content: space-between; font-size: 0.85em; margin-top: auto; }
.hanh-kim { color: #808080; } .hanh-moc { color: #008000; } .hanh-thuy { color: #000000; } .hanh-hoa { color: #FF0000; } .hanh-tho { color: #DAA520; }
.sao { margin: 0 2px; }
.vong-thai-tue { display: block; font-size: 1.1em; font-weight: bold; color: #000000; position: absolute; bottom: 5px; right: 5px; }
.tuoi { transform: translateX(-60%); text-align: left; color: blue; }

/* === BẮC PHÁI - TỨ HÓA CIRCLES === */
.hoa-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 16.5px;
    font-weight: bold;
    margin-left: 4px;
    vertical-align: middle;
    background-color: #DAA520;
    border: 1px solid #DAA520;
}
.hoa-A { background-color: #DAA520; } /* Gold/Yellow */
.hoa-B { background-color: #DAA520; } /* Yellow */
.hoa-C { background-color: #DAA520; } /* Yellow */
.hoa-D { background-color: #DAA520; } /* Yellow */

.sao-prefix-duong { color: #a00; font-weight: bold; }
.sao-prefix-am { color: #000; font-weight: bold; }

/* === BẮC PHÁI - CENTER INFO LAYOUT === */
.center-title { color: #1a56db; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; text-align: center; }
.center-table { font-size: 0.9em; width: 100%; font-weight: bold; }
.center-table td { padding: 2px 5px; }
.tuoi-blue { color: #1a56db; font-weight: bold; }
.center-main { display: flex; width: 100%; height: 100%; position: relative; justify-content: center; align-items: center; }
.center-content { width: 100%; max-width: 350px; }
.center-separator { border-top: 1px solid #ccc; margin: 8px 0; }
.val-bold { font-weight: bold; }