body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    background-color: #eeeeee;
    color: #333;
    margin: 0;
    padding: 1em;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    gap: 20px;
}

.form-section {
    width: 100%;
    max-width: 450px;
    flex-shrink: 0;
}

.hidden { display: none; }
#hidden {
    display: none;
}
#result-container {
    width: 960px;
    height: 750px;
    display: flex;
    justify-content: center;
    background-color: #f5f5ed;
}

#chart-wrapper {
    position: relative;
    width: 1085px; 
    height: 832px;
    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: 832px;
    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);
    width: 900px;
    height: 660px;
    padding: 100px;
    background-image: url("background_02.jpg");
    background-color: #f0f0f0;
}
#arrow-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

@media (min-width: 1220px) {
    .container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    #chart-wrapper {
        transform: scale(0.9);
        width: 1085px;
        height: 832px; 
    }
    .form-section {
        flex: 0 0 450px;
    }
   
}
.form-container {text-align: center; width: 100%; box-sizing: border-box; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#tuvi-form { display: grid; grid-template-columns: auto 1fr; gap: 12px 10px; align-items: center; }
#tuvi-form label { text-align: left; font-weight: bold; }
select, input[type="text"], input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px;}
#form-logo { display: block; margin: 0 auto 15px auto; width: 150px; }
.calendar-toggle { display: flex; align-items: center; }
.date-select-group, .time-select-group { display: flex; gap: 5px; }
#gio_chi_display { font-weight: bold; color: #0056b3; }
#submit-btn { grid-column: 1 / -1; background-color: #007bff; padding: 12px; font-size: 1em; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
#submit-btn:hover { background-color: #0056b3; }
.action-buttons { grid-column: 1 / -1; display: flex; gap: 10px; }
.action-buttons button { flex-grow: 1; padding: 12px; font-size: 1em; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
#download-btn {
    grid-column: 1 / -1;
    background-color: #28a745;
    color: white;
    padding: 12px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer; 
    font-weight: bold;      
    margin-top: 15px;         
    width: 100%;              
    box-sizing: border-box;  
    text-align: center;
    transition: background-color 0.2s;
}

#download-btn:hover {
background-color: #218838; 
}

.palace { position: relative; border: 1.5px solid #1d1d1d; display: flex; flex-direction: column; padding: 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; }
#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; }
#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; font-weight: bold; font-size: 1.1em; }
.ten-cung { font-weight: bold; color: #000000; font-size: 1.1em; }
.palace-name { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: left; font-weight: bold; padding: 5px 0; font-size: 0.95em; }
.palace-content { font-size: 0.9em; text-align: left; }
.sao-container { display: flex; flex-wrap: wrap; gap: 0 5px; }
.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; }