/* ===============================
   Ngôi Nhà Phù Thủy AstrologySeek
   Professional Astrology CSS
   =============================== */

body {
    background: radial-gradient(circle at top, #10162f, #050816);
    color: #e6e6f0;
    font-family: 'Segoe UI', 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.2em;
    color: #ffd36a;
}

h2 {
    font-size: 1.6em;
    color: #9adfff;
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 30px;
}

.chart-wrapper {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.astro-wheel {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: conic-gradient(
        #1b3b6f 0deg 90deg,
        #8b1e1e 90deg 180deg,
        #4b3b1f 180deg 270deg,
        #1e5b3b 270deg 360deg
    );
    box-shadow: 0 0 40px rgba(100,180,255,0.3);
    position: relative;
}

.house-number {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.planet {
    position: absolute;
    font-size: 22px;
    text-shadow: 0 0 6px rgba(255,255,255,0.7);
}

.aspect-line {
    stroke: rgba(255,255,255,0.35);
    stroke-width: 1.2;
}

.aspect-conjunction { stroke: #ffffff; }
.aspect-opposition { stroke: #ff5f5f; }
.aspect-trine { stroke: #5fffd7; }
.aspect-square { stroke: #ffcc5f; }

.info-panel {
    background: rgba(15,20,50,0.65);
    border-radius: 16px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

.info-panel table {
    width: 100%;
    border-collapse: collapse;
}

.info-panel th,
.info-panel td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.info-panel th {
    color: #ffd36a;
    text-align: left;
}

.footer {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    margin-top: 40px;
}