@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@500;700&display=swap');

:root {
    --text-gold: #fff5cc;
    --text-white: #ffffff;
}

body {
    background: #1a0525;
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    color: var(--text-white);
}

.app-container {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.img-container {
    position: relative;
    width: 100%;
    margin-bottom: -4px;
}

.img-bg {
    width: 100%;
    display: block;
    height: auto;
}

.data-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    /* Centered by default */
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    z-index: 100;
}

/* --- Form --- */
.input-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    background: transparent;
    border: none;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #2a0a3b;
    text-transform: uppercase;
    outline: none;
    z-index: 15;
}

#full-name {
    top: 48%;
    font-size: 1.3rem;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

#birth-day {
    top: 53.5%;
    font-size: 1.2rem;
}

.btn-calculate-overlay {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 30px;
    background: rgba(42, 10, 59, 0.8);
    color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    z-index: 20;
}

/* --- HOUSE DIAGRAM --- */
.house-num {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.house-big {
    font-size: 2.2rem;
}

.house-med {
    font-size: 1.2rem;
    line-height: 1.2;
    white-space: nowrap;
}

.house-small {
    font-size: 1.0rem;
}

/* Roof */
/* Roof */
#house-duong-doi {
    top: 24%;
    left: 32%;
    font-size: 2.2rem;
}

#house-truong-thanh {
    top: 24%;
    left: 65%;
    font-size: 2.2rem;
}

/* Center (Flower) - Sứ Mệnh */
#house-su-menh {
    left: 51.15% !important;
    top: 48.32% !important;
    /* Adjusted */
    font-size: 2.8rem;
    color: #fff;
    text-shadow: 0 0 5px #ff0000;
}

/* --- Petals (Clockwise) --- */

/* 12 o'clock: Ket Noi NT & NC */
#house-ket-noi {
    top: 37%;
    left: 50%;
    font-size: 1.8rem;
}

/* 1:30: Can Bang */
#house-can-bang {
    top: 39%;
    left: 60%;
    font-size: 1.8rem;
}

/* 3:00: Thai Do */
#house-thai-do {
    top: 44%;
    left: 68%;
    font-size: 2rem;
    color: #fff;
}

/* 4:30: Nhan Cach */
#house-nhan-cach {
    top: 55%;
    left: 66%;
    font-size: 2rem;
    color: #fff;
}

/* 6:00: Ket Noi DD & SM */
#house-ket-noi-sm {
    top: 60%;
    left: 50%;
    font-size: 2rem;
}

/* 7:30: Ngay Sinh */
#house-ngay-sinh {
    top: 60%;
    left: 40%;
    font-size: 2rem;
}

/* 9:00: Dinh Huong */
#house-dinh-huong {
    top: 55%;
    left: 31%;
    font-size: 2rem;
    display: block;
    color: #fff;
}

/* 10:30: So Thieu */
#house-missing {
    top: 44%;
    left: 30%;
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
    white-space: nowrap;
}

/* Pinnacles & Challenges - FORMATTING */
.pin-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    white-space: nowrap;
}

.pin-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
}

.pin-age {
    font-size: 0.85rem;
    font-weight: bold;
    margin-left: 2px;
    color: #ffd700;
}

/* Pinnacles (Left Stack) - Vertical Spacing */
/* UPDATED COORDINATES per REQUEST (Attempt 2) */
#house-pin-4 {
    left: 96px !important;
    top: 237.609px !important;
    width: auto;
    text-align: center;
}

#house-pin-3 {
    left: 96px !important;
    top: 325.875px !important;
    width: auto;
    text-align: center;
}

#house-pin-2 {
    left: 96px !important;
    top: 414.141px !important;
    width: auto;
    text-align: center;
}

#house-pin-1 {
    left: 96px !important;
    top: 502.391px !important;
    width: auto;
    text-align: center;
}

/* Challenges (Right Stack) - Vertical Spacing */
/* UPDATED COORDINATES per REQUEST (Attempt 2) */
#house-chal-4 {
    left: 388.797px !important;
    top: 237.609px !important;
    width: auto;
    text-align: center;
    right: auto;
}

#house-chal-3 {
    left: 388.797px !important;
    top: 325.875px !important;
    width: auto;
    text-align: center;
    right: auto;
}

#house-chal-2 {
    left: 388.797px !important;
    top: 414.141px !important;
    width: auto;
    text-align: center;
    right: auto;
}

#house-chal-1 {
    left: 388.797px !important;
    top: 502.391px !important;
    width: auto;
    text-align: center;
    right: auto;
}

/* Bottom Row (Rectangles) */
#house-tu-duy {
    top: 71%;
    left: 16%;
    font-size: 2rem;
    color: #fff;
}

#house-dam-me {
    top: 71%;
    left: 33%;
    font-size: 1.4rem;
    color: #fff;
    width: 15%;
    word-wrap: break-word;
}

#house-linh-hon {
    top: 71%;
    left: 50%;
    font-size: 2rem;
    color: #fff;
}

#house-tiem-thuc {
    top: 71%;
    left: 67%;
    font-size: 2rem;
    color: #fff;
}

#house-nam-hien-tai {
    top: 71%;
    left: 83%;
    font-size: 2rem;
    color: #fff;
}

/* Bottom Arrows (Period Cycles) */
.house-period {
    /* Container styling */
    color: #fff;
    text-align: center;
}

.house-tiny {
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
}

.period-val {
    font-size: 1.8rem;
    font-weight: 700;
}

/* UPDATED COORDINATES per REQUEST (Attempt 2) */
#house-period-1 {
    left: 168px !important;
    top: 543.125px !important;
}

#house-period-2 {
    left: 278.391px !important;
    top: 543.125px !important;
}

#house-period-3 {
    left: 384px !important;
    top: 543.125px !important;
}

/* --- TRIANGLE --- */
#tri-duyen {
    top: 25%;
    left: 50%;
    font-size: 2rem;
    color: #fff5cc;
}

#tri-nhan {
    top: 69%;
    left: 25%;
    font-size: 2rem;
    color: #fff5cc;
}

#tri-qua {
    top: 69%;
    left: 77%;
    font-size: 2rem;
    color: #fff5cc;
}

/* --- MATRIX --- */
.matrix-val {
    font-size: 1.8rem;
    font-weight: bold;
}

.matrix-white {
    color: #fff;
    margin: 0 2px;
}

.matrix-gold {
    color: #ffd700;
    text-shadow: 0 0 2px #000;
    margin: 0 2px;
}

#mat-3 {
    top: 32%;
    left: 30%;
}

#mat-6 {
    top: 32%;
    left: 50%;
}

#mat-9 {
    top: 32%;
    left: 73%;
}

#mat-2 {
    top: 46%;
    left: 30%;
}

#mat-5 {
    top: 46%;
    left: 50%;
}

#mat-8 {
    top: 46%;
    left: 73%;
}

#mat-1 {
    top: 60%;
    left: 30%;
}

#mat-4 {
    top: 60%;
    left: 50%;
}

#mat-7 {
    top: 60%;
    left: 73%;
}

/* --- CHART (Wave) --- */
.chart-month-val {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-weight: 700;
    font-size: 1.1rem;
    transform: translate(-50%, -50%);
    z-index: 200;
    /* Ensure on top */
}

#chart-m1 {
    top: 10%;
    left: 5%;
}

#chart-m2 {
    top: 10%;
    left: 13%;
}

#chart-m3 {
    top: 10%;
    left: 21%;
}

#chart-m4 {
    top: 10%;
    left: 29%;
}

#chart-m5 {
    top: 10%;
    left: 37%;
}

#chart-m6 {
    top: 10%;
    left: 45%;
}

#chart-m7 {
    top: 10%;
    left: 53%;
}

#chart-m8 {
    top: 10%;
    left: 61%;
}

#chart-m9 {
    top: 10%;
    left: 69%;
}

#chart-m10 {
    top: 10%;
    left: 77%;
}

#chart-m11 {
    top: 10%;
    left: 85%;
}

#chart-m12 {
    top: 10%;
    left: 93%;
}

/* --- Period Cycles (Arrows) --- */
/* The arrows are images or drawn. We need text INSIDE them. */
/* Previous CSS might have placed them above. */

#period-arrow-1-text,
#period-arrow-2-text,
#period-arrow-3-text {
    position: absolute;
    top: 65%;
    /* Move DOWN to overlap arrow body properly */
    transform: translate(-50%, -50%);
    /* Center */
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #cc0000;
    /* Force RED for visibility */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
    /* Enhance visibility */
    width: 100px;
    line-height: 1.3;
    z-index: 9999;
    /* Force On Top */
}

#period-arrow-1-text {
    left: 18%;
}

#period-arrow-2-text {
    left: 50%;
}

#period-arrow-3-text {
    left: 82%;
}

/* --- Pinnacles (Chặng) & Challenges (Thách thức) --- */
/* Left Column (Chặng) */
/* They should be strictly inside the yellow column on the left */
#house-pin-4 {
    top: 35%;
    left: 20%;
}

#house-pin-3 {
    top: 48%;
    left: 20%;
}

#house-pin-2 {
    top: 61%;
    left: 20%;
}

#house-pin-1 {
    top: 74%;
    left: 20%;
}

/* Right Column (Challenge) */
#house-chal-4 {
    top: 35%;
    right: 20%;
    text-align: right;
}

/* Maybe center? */
#house-chal-3 {
    top: 48%;
    right: 20%;
    text-align: right;
}

#house-chal-2 {
    top: 61%;
    right: 20%;
    text-align: right;
}

#house-chal-1 {
    top: 74%;
    right: 20%;
    text-align: right;
}

.pin-cell {
    text-align: center;
    color: #fff;
}

.pin-val {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.pin-age {
    font-size: 0.9rem;
    color: #fff;
}

/* m11 and m12 already covered in the block above, removing these overrides or keeping them redundant is fine, but best to remove */

/* Old Year Label Removed/Modified */
.chart-year-label-simple {
    position: absolute;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffd700;
    /* Gold */
    /* No background per request */
    transform: translate(-50%, -100%);
    white-space: nowrap;
    z-index: 150;
    text-shadow: 0 0 2px #000;
}

/* Default positions for 9 years (Holding area) */
#chart-year-0 {
    top: 15%;
    left: 5%;
}

#chart-year-1 {
    top: 15%;
    left: 15%;
}

#chart-year-2 {
    top: 15%;
    left: 25%;
}

#chart-year-3 {
    top: 15%;
    left: 35%;
}

#chart-year-4 {
    top: 15%;
    left: 45%;
}

#chart-year-5 {
    top: 15%;
    left: 55%;
}

#chart-year-6 {
    top: 15%;
    left: 65%;
}

#chart-year-7 {
    top: 15%;
    left: 75%;
}

#chart-year-8 {
    top: 15%;
    left: 85%;
}

/* PDF Edit Elements */
.pdf-num {
    color: #cc0000;
    /* Red for high visibility in editing */
    font-size: 1.5rem;
    /* Reverted to base size */
    font-weight: bold;
    position: absolute;
    /* Force absolute */
    z-index: 1000;
    /* High z-index */
    cursor: grab;
    /* Removed background and permanent border per user request */
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    /* Transparent border to keep sizing */
    transition: border 0.2s;
}

.pdf-num:hover {
    border: 1px dashed rgba(255, 0, 0, 0.5);
    /* Only show border on hover for editing */
}

/* EXPORT MODE: Extra safety to ensure no borders during export */
body.pdf-export-mode .pdf-num {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Initial Staggered Positions for easier grabbing */
/* Initial Staggered Positions for easier grabbing */
/* GENERATED POSITIONS */
#house-su-menh {
    left: 51.15% !important;
    top: 48.47% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
}

#house-thai-do {
    left: 69.48% !important;
    top: 43.32% !important;
}

#house-nhan-cach {
    left: 69.9% !important;
    top: 53.92% !important;
}

#house-tiem-thuc {
    left: 69.06% !important;
    top: 70.12% !important;
}

#house-nam-hien-tai {
    left: 83.85% !important;
    top: 70.12% !important;
}

#house-pin-4-val {
    left: 96px !important;
    top: 237.609px !important;
}

#house-pin-4-age {
    left: 96px !important;
    top: 237.609px !important;
}

#house-pin-3-val {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-3-age {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-2-val {
    left: 96px !important;
    top: 414.141px !important;
}

#house-pin-2-age {
    left: 96px !important;
    top: 414.141px !important;
}

#house-pin-1-val {
    left: 96px !important;
    top: 502.391px !important;
}

#house-pin-1-age {
    left: 96px !important;
    top: 502.391px !important;
}

#house-chal-4-val {
    left: 388.797px !important;
    top: 237.609px !important;
}

#house-chal-4-age {
    left: 388.797px !important;
    top: 237.609px !important;
}

#house-chal-3-val {
    left: 388.797px !important;
    top: 325.875px !important;
}

#house-chal-3-age {
    left: 388.797px !important;
    top: 325.875px !important;
}

#house-chal-2-val {
    left: 388.797px !important;
    top: 414.141px !important;
}

#house-chal-2-age {
    left: 388.797px !important;
    top: 414.141px !important;
}

#house-chal-1-val {
    left: 388.797px !important;
    top: 502.391px !important;
}

#house-chal-1-age {
    left: 388.797px !important;
    top: 502.391px !important;
}

#house-period-1-val {
    left: 168px !important;
    top: 543.125px !important;
}

#house-period-1-age {
    left: 168px !important;
    top: 543.125px !important;
}

#house-period-2-val {
    left: 278.391px !important;
    top: 543.125px !important;
}

#house-period-2-age {
    left: 278.391px !important;
    top: 543.125px !important;
}

#house-period-3-val {
    left: 384px !important;
    top: 543.125px !important;
}

#house-period-3-age {
    left: 384px !important;
    top: 543.125px !important;
}

#p8-duong-doi {
    left: 15.94% !important;
    top: 27.43% !important;
    transform: translate(-50%, -50%) scale(2.15) !important;
}

#p8-linh-hon {
    left: 16.35% !important;
    top: 46.43% !important;
    transform: translate(-50%, -50%) scale(1.7) !important;
}

#p8-su-menh {
    left: 16.15% !important;
    top: 64.99% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#p8-nhan-cach {
    left: 16.35% !important;
    top: 83.25% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#p9-truong-thanh {
    left: 15.94% !important;
    top: 28.21% !important;
    transform: translate(-50%, -50%) scale(1.9) !important;
}

#p9-thai-do {
    left: 15.94% !important;
    top: 51.18% !important;
    transform: translate(-50%, -50%) scale(2.05) !important;
}

#p9-can-bang {
    left: 15.31% !important;
    top: 75.05% !important;
    transform: translate(-50%, -50%) scale(2.15) !important;
}

#p10-ket-noi {
    left: 15.94% !important;
    top: 26.48% !important;
    transform: translate(-50%, -50%) scale(2.2) !important;
}

#p10-missing {
    left: 15.73% !important;
    top: 41.65% !important;
    transform: translate(-50%, -50%) scale(1.3) !important;
}

#p10-dinh-huong {
    left: 15.73% !important;
    top: 55.64% !important;
    transform: translate(-50%, -50%) scale(1.95) !important;
}

#p10-ngay-sinh {
    left: 15.94% !important;
    top: 71.85% !important;
    transform: translate(-50%, -50%) scale(2.15) !important;
}

#p11-ket-noi-sm {
    left: 15.1% !important;
    top: 25.64% !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

#p11-tiem-thuc {
    left: 15.52% !important;
    top: 48.91% !important;
    transform: translate(-50%, -50%) scale(1.95) !important;
}

#p11-dam-me {
    left: 15.73% !important;
    top: 63.64% !important;
    transform: translate(-50%, -50%) scale(1.35) !important;
}

/* PDF Pages Specific Positions - END */

/* PDF Pages Specific Positions */
#p8-duong-doi {
    left: 15.94% !important;
    top: 27.43% !important;
    transform: translate(-50%, -50%) scale(2.15) !important;
}

#p8-linh-hon {
    left: 15.73% !important;
    top: 46.58% !important;
    transform: translate(-50%, -50%) scale(1.9) !important;
}

#p8-su-menh {
    left: 16.35% !important;
    top: 65.14% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#p8-nhan-cach {
    left: 15.94% !important;
    top: 83.11% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#p9-truong-thanh {
    left: 15.1% !important;
    top: 28.21% !important;
    transform: translate(-50%, -50%) scale(1.75) !important;
}

#p9-thai-do {
    left: 15.52% !important;
    top: 51.92% !important;
    transform: translate(-50%, -50%) scale(1.85) !important;
}

#p9-can-bang {
    left: 15.52% !important;
    top: 75.34% !important;
    transform: translate(-50%, -50%) scale(1.9) !important;
}

#p10-ket-noi {
    left: 15.94% !important;
    top: 26.77% !important;
    transform: translate(-50%, -50%) scale(1.7) !important;
}

#p10-missing {
    left: 16.15% !important;
    top: 41.5% !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
}

#p10-dinh-huong {
    left: 15.52% !important;
    top: 55.79% !important;
    transform: translate(-50%, -50%) scale(1.8) !important;
}

#p10-ngay-sinh {
    left: 15.94% !important;
    top: 72.14% !important;
    transform: translate(-50%, -50%) scale(1.85) !important;
}

#p11-ket-noi-sm {
    left: 15.31% !important;
    top: 25.64% !important;
    transform: translate(-50%, -50%) scale(1.9) !important;
}

#p11-tiem-thuc {
    left: 15.52% !important;
    top: 49.35% !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

#p11-dam-me {
    left: 15.52% !important;
    top: 64.38% !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* House Calendar Year (Black Text) */
#house-calendar-year {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000000;
    top: 71%;
    left: 83%;
    z-index: 200;
}

.wave-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
}

#wave-p1 {
    top: 29%;
    left: 17%;
}

#wave-p2 {
    top: 31%;
    left: 25%;
}

#wave-p3 {
    top: 37%;
    left: 24%;
}

#wave-p4 {
    top: 42%;
    left: 33%;
}

#wave-p5 {
    top: 34%;
    left: 43%;
}

#wave-p6 {
    top: 24%;
    left: 51%;
}

#wave-p7 {
    top: 34%;
    left: 66%;
}

#wave-p8 {
    top: 27%;
    left: 77%;
}

#wave-p9 {
    top: 17%;
    left: 84%;
}

/* --- USER GENERATED POSITIONS (UPDATED) --- */
/* Added via "Export Code" feature */
#full-name {
    left: 58% !important;
    top: 47.9% !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
}

#birth-day {
    left: 55.29% !important;
    top: 50.85% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#calculate {
    left: 50.08% !important;
    top: 73.23% !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
}

#house-duong-doi {
    left: 34.87% !important;
    top: 27.88% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-truong-thanh {
    left: 65.92% !important;
    top: 27.44% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-su-menh {
    left: 70.92% !important;
    top: 62.79% !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
}

#house-ket-noi {
    left: 44.67% !important;
    top: 37.45% !important;
}

#house-can-bang {
    left: 57.79% !important;
    top: 37.16% !important;
}

#house-ngay-sinh {
    left: 42.58% !important;
    top: 61.17% !important;
}

#house-ket-noi-sm {
    left: 58.42% !important;
    top: 61.46% !important;
}

#house-dinh-huong {
    left: 31.33% !important;
    top: 54.24% !important;
}

#house-chal-1 {
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-thai-do {
    left: 68% !important;
    top: 43.05% !important;
}

#house-nhan-cach {
    left: 68% !important;
    top: 53.65% !important;
}

#house-missing {
    left: 32.58% !important;
    top: 43.49% !important;
}

#house-tu-duy {
    left: 17.37% !important;
    top: 70.45% !important;
}

#house-dam-me {
    left: 33.83% !important;
    top: 70% !important;
    transform: translate(-50%, -50%) scale(1.25) !important;
}

#house-linh-hon {
    left: 51.75% !important;
    top: 70.15% !important;
}

#house-tiem-thuc {
    left: 68.42% !important;
    top: 69.71% !important;
}

#house-nam-hien-tai {
    left: 83.83% !important;
    top: 70.45% !important;
}

#house-calendar-year {
    left: 87.17% !important;
    top: 66.17% !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
}

#house-pin-4-val {
    left: 96px !important;
    top: 237.613px !important;
}

#house-pin-4-age {
    left: 96px !important;
    top: 237.613px !important;
}

#house-pin-3-val {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-3-age {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-2-val {
    left: 96px !important;
    top: 414.138px !important;
}

#house-pin-2-age {
    left: 96px !important;
    top: 414.138px !important;
}

#house-pin-1-val {
    left: 96px !important;
    top: 502.4px !important;
}

#house-pin-1-age {
    left: 96px !important;
    top: 502.4px !important;
}

#house-chal-4-val {
    left: 388.8px !important;
    top: 237.613px !important;
}

#house-chal-4-age {
    left: 388.8px !important;
    top: 237.613px !important;
}

#house-chal-3-val {
    left: 388.8px !important;
    top: 325.875px !important;
}

#house-chal-3-age {
    left: 388.8px !important;
    top: 325.875px !important;
}

#house-chal-2-val {
    left: 388.8px !important;
    top: 414.138px !important;
}

#house-chal-2-age {
    left: 388.8px !important;
    top: 414.138px !important;
}

#house-chal-1-val {
    left: 388.8px !important;
    top: 502.4px !important;
}

#house-chal-1-age {
    left: 388.8px !important;
    top: 502.4px !important;
}

#house-period-1-val {
    left: 168px !important;
    top: 543.138px !important;
}

#house-period-1-age {
    left: 168px !important;
    top: 543.138px !important;
}

#house-period-2-val {
    left: 278.4px !important;
    top: 543.138px !important;
}

#house-period-2-age {
    left: 278.4px !important;
    top: 543.138px !important;
}

#house-period-3-val {
    left: 384px !important;
    top: 543.138px !important;
}

#house-period-3-age {
    left: 384px !important;
    top: 543.138px !important;
}

#tri-duyen {
    left: 50.29% !important;
    top: 25.53% !important;
}

#tri-nhan {
    left: 22.37% !important;
    top: 70.31% !important;
}

#mat-8 {
    transform: translate(-50%, -50%) scale(1.05) !important;
}

#chart-year-0 {
    left: 17.58% !important;
    top: 32.77% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#chart-year-1 {
    left: 29.67% !important;
    top: 33.3% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-2 {
    left: 25.29% !important;
    top: 40.23% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-3 {
    left: 33.42% !important;
    top: 39.78% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#chart-year-4 {
    left: 44.25% !important;
    top: 36.84% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-5 {
    left: 51.75% !important;
    top: 27.85% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-6 {
    left: 65.92% !important;
    top: 38.46% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-year-7 {
    left: 71.75% !important;
    top: 25.5% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-year-8 {
    left: 85.08% !important;
    top: 20.78% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-m1 {
    left: 61.96% !important;
    top: 55.6% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m2 {
    left: 70.5% !important;
    top: 61.79% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m3 {
    left: 73.21% !important;
    top: 69.89% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m4 {
    left: 70.29% !important;
    top: 77.84% !important;
    transform: translate(-50%, -50%) scale(1.35) !important;
}

#chart-m5 {
    left: 61.75% !important;
    top: 84.47% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m6 {
    left: 49.46% !important;
    top: 86.68% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m7 {
    left: 36.96% !important;
    top: 84.47% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m8 {
    left: 28.62% !important;
    top: 77.25% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m9 {
    left: 25.92% !important;
    top: 69.45% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m10 {
    left: 28.83% !important;
    top: 62.08% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m11 {
    left: 37.58% !important;
    top: 55.46% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m12 {
    left: 49.25% !important;
    top: 52.95% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#house-nhan-cach {
    left: 68% !important;
    top: 53.65% !important;
}

#house-missing {
    left: 32.58% !important;
    top: 43.49% !important;
}

#house-tu-duy {
    left: 17.37% !important;
    top: 70.45% !important;
}

#house-dam-me {
    left: 33.83% !important;
    top: 70% !important;
    transform: translate(-50%, -50%) scale(1.25) !important;
}

#house-linh-hon {
    left: 51.75% !important;
    top: 70.15% !important;
}

#house-tiem-thuc {
    left: 68.42% !important;
    top: 69.71% !important;
}

#house-nam-hien-tai {
    left: 83.83% !important;
    top: 70.45% !important;
}

#house-calendar-year {
    left: 87.17% !important;
    top: 66.17% !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
}

#house-pin-4-val {
    left: 96px !important;
    top: 237.613px !important;
}

#house-pin-4-age {
    left: 96px !important;
    top: 237.613px !important;
}

#house-pin-3-val {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-3-age {
    left: 96px !important;
    top: 325.875px !important;
}

#house-pin-2-val {
    left: 96px !important;
    top: 414.138px !important;
}

#house-pin-2-age {
    left: 96px !important;
    top: 414.138px !important;
}

#house-pin-1-val {
    left: 96px !important;
    top: 502.4px !important;
}

#house-pin-1-age {
    left: 96px !important;
    top: 502.4px !important;
}

#house-chal-4-val {
    left: 388.8px !important;
    top: 237.613px !important;
}

#house-chal-4-age {
    left: 388.8px !important;
    top: 237.613px !important;
}

#house-chal-3-val {
    left: 388.8px !important;
    top: 325.875px !important;
}

#house-chal-3-age {
    left: 388.8px !important;
    top: 325.875px !important;
}

#house-chal-2-val {
    left: 388.8px !important;
    top: 414.138px !important;
}

#house-chal-2-age {
    left: 388.8px !important;
    top: 414.138px !important;
}

#house-chal-1-val {
    left: 388.8px !important;
    top: 502.4px !important;
}

#house-chal-1-age {
    left: 388.8px !important;
    top: 502.4px !important;
}

#house-period-1-val {
    left: 168px !important;
    top: 543.138px !important;
}

#house-period-1-age {
    left: 168px !important;
    top: 543.138px !important;
}

#house-period-2-val {
    left: 278.4px !important;
    top: 543.138px !important;
}

#house-period-2-age {
    left: 278.4px !important;
    top: 543.138px !important;
}

#house-period-3-val {
    left: 384px !important;
    top: 543.138px !important;
}

#house-period-3-age {
    left: 384px !important;
    top: 543.138px !important;
}

#tri-duyen {
    left: 49.67% !important;
    top: 26.21% !important;
}

#tri-nhan {
    left: 30.71% !important;
    top: 71.87% !important;
}

#chart-year-0 {
    left: 17.58% !important;
    top: 32.77% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#chart-year-1 {
    left: 29.67% !important;
    top: 33.3% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-2 {
    left: 25.29% !important;
    top: 40.23% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-3 {
    left: 33.42% !important;
    top: 39.78% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#chart-year-4 {
    left: 44.25% !important;
    top: 36.84% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-5 {
    left: 51.75% !important;
    top: 27.85% !important;
    transform: translate(-50%, -50%) scale(0.75) !important;
}

#chart-year-6 {
    left: 65.92% !important;
    top: 38.46% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-year-7 {
    left: 71.75% !important;
    top: 25.5% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-year-8 {
    left: 85.08% !important;
    top: 20.78% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

#chart-m1 {
    left: 49.25% !important;
    top: 53.39% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m2 {
    left: 61.75% !important;
    top: 55.75% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m3 {
    left: 70.08% !important;
    top: 61.64% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m4 {
    left: 73.42% !important;
    top: 70.04% !important;
    transform: translate(-50%, -50%) scale(1.35) !important;
}

#chart-m5 {
    left: 70.29% !important;
    top: 78.43% !important;
    transform: translate(-50%, -50%) scale(1.5) !important;
}

#chart-m6 {
    left: 61.75% !important;
    top: 84.18% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m7 {
    left: 49.87% !important;
    top: 87.27% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m8 {
    left: 37.17% !important;
    top: 84.18% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m9 {
    left: 28.62% !important;
    top: 77.25% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m10 {
    left: 25.92% !important;
    top: 69.6% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m11 {
    left: 28.83% !important;
    top: 62.08% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m12 {
    left: 37.58% !important;
    top: 55.75% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#birth-day {
    left: 55.29% !important;
    top: 50.85% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

#calculate {
    left: 50.08% !important;
    top: 73.23% !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
}

#house-duong-doi {
    left: 34.87% !important;
    top: 27.88% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-truong-thanh {
    left: 65.92% !important;
    top: 27.44% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-ket-noi {
    left: 44.67% !important;
    top: 37.45% !important;
}

#house-can-bang {
    left: 57.79% !important;
    top: 37.16% !important;
}

#house-ngay-sinh {
    left: 42.58% !important;
    top: 61.17% !important;
}

#house-ket-noi-sm {
    left: 58.42% !important;
    top: 61.46% !important;
}

#house-dinh-huong {
    left: 31.33% !important;
    top: 54.24% !important;
}

#house-chal-1 {
    transform: translate(-50%, -50%) scale(0.95) !important;
}

#house-thai-do {
    left: 68% !important;
    top: 43.05% !important;
}

#house-nhan-cach {
    left: 68% !important;
    top: 53.65% !important;
}

#house-missing {
    left: 32.58% !important;
    top: 43.49% !important;
}

#house-tu-duy {
    left: 17.37% !important;
    top: 70.45% !important;
}

#house-dam-me {
    left: 33.83% !important;
    top: 70% !important;
    transform: translate(-50%, -50%) scale(1.25) !important;
}

#house-linh-hon {
    left: 51.75% !important;
    top: 70.15% !important;
}

#house-tiem-thuc {
    left: 68.42% !important;
    top: 69.71% !important;
}

#house-nam-hien-tai {
    left: 83.83% !important;
    top: 70.45% !important;
}

#house-pin-4-val {
    left: 15.5% !important;
    top: 39.22% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#house-pin-4-age {
    left: 20.92% !important;
    top: 40.69% !important;
}

#house-pin-3-val {
    left: 15.5% !important;
    top: 46.58% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#house-pin-3-age {
    left: 20.92% !important;
    top: 47.17% !important;
}

#house-pin-2-val {
    left: 15.5% !important;
    top: 53.07% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#house-pin-2-age {
    left: 21.12% !important;
    top: 53.65% !important;
}

#house-pin-1-val {
    left: 15.5% !important;
    top: 58.66% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
}

#house-pin-1-age {
    left: 20.92% !important;
    top: 60.14% !important;
}

#house-chal-4-val {
    left: 80.92% !important;
    top: 41.28% !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

#house-chal-4-age {
    left: 85.92% !important;
    top: 42.46% !important;
}

#house-chal-3-val {
    left: 80.71% !important;
    top: 47.47% !important;
    transform: translate(-50%, -50%) scale(2.15) !important;
}

#house-chal-3-age {
    left: 85.92% !important;
    top: 48.65% !important;
}

#house-chal-2-val {
    left: 80.92% !important;
    top: 53.51% !important;
    transform: translate(-50%, -50%) scale(1.6) !important;
}

#house-chal-2-age {
    left: 86.12% !important;
    top: 54.24% !important;
}

#house-chal-1-val {
    left: 80.92% !important;
    top: 59.1% !important;
    transform: translate(-50%, -50%) scale(1.8) !important;
}

#house-chal-1-age {
    left: 85.92% !important;
    top: 60.72% !important;
}

#house-period-1-val {
    left: 35.71% !important;
    top: 83.11% !important;
    transform: translate(-50%, -50%) scale(1.95) !important;
}

#house-period-1-age {
    left: 35.92% !important;
    top: 80.46% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
}

#house-period-2-val {
    left: 58% !important;
    top: 82.67% !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

#house-period-2-age {
    left: 58.42% !important;
    top: 80.46% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
}

#house-period-3-val {
    left: 81.12% !important;
    top: 83.26% !important;
    transform: translate(-50%, -50%) scale(2.05) !important;
}

#house-period-3-age {
    left: 80.92% !important;
    top: 80.46% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
}

#tri-nhan {
    left: 23% !important;
    top: 69.72% !important;
}

/* NOTE: Year Label is usually dynamic. Position might be fixed here intentionally. */
#chart-year-label {
    left: 19.04% !important;
    top: 36.31% !important;
}

/* Chart Months - 12 Coins */
#chart-m1 {
    left: 49.25% !important;
    top: 53.39% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m2 {
    left: 61.75% !important;
    top: 55.75% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m3 {
    left: 70.08% !important;
    top: 61.64% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m4 {
    left: 73.42% !important;
    top: 70.04% !important;
    transform: translate(-50%, -50%) scale(1.35) !important;
}

#chart-m5 {
    left: 70.29% !important;
    top: 78.43% !important;
    transform: translate(-50%, -50%) scale(1.5) !important;
}

#chart-m6 {
    left: 61.75% !important;
    top: 84.18% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m7 {
    left: 49.87% !important;
    top: 87.27% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m8 {
    left: 37.17% !important;
    top: 84.18% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m9 {
    left: 28.62% !important;
    top: 77.25% !important;
    transform: translate(-50%, -50%) scale(1.55) !important;
}

#chart-m10 {
    left: 25.92% !important;
    top: 69.6% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
}

#chart-m11 {
    left: 28.83% !important;
    top: 62.08% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

#chart-m12 {
    left: 37.58% !important;
    top: 55.75% !important;
    transform: translate(-50%, -50%) scale(1.45) !important;
}

/* COMPATIBILITY MATRIX COMPACT STYLE */
#compatibility-table {
    width: 100%;
    table-layout: fixed;
    font-size: 9px;
}

#compatibility-table th,
#compatibility-table td {
    padding: 2px 1px !important;
    word-wrap: break-word;
    white-space: normal !important;
    text-align: center;
    vertical-align: middle;
}

#compatibility-table thead th {
    font-size: 9px;
    font-weight: bold;
}


/* COMPATIBILITY MATRIX COMPACT STYLE UPDATE v2 */
#compatibility-table {
    font-size: 10px !important;
}

#compatibility-table thead th {}

/* --- MOBILE PORTRAIT OPTIMIZATION --- */
@media screen and (max-width: 768px) {

    /* 1. Scale Container to Fit Screen */
    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px;
    }

    /* 2. Hide "Edit Mode" Button on Mobile */
    #btn-toggle-pdf-edit,
    #toggle-drag-mode,
    #export-positions,
    #reset-positions {
        display: none !important;
    }

    /* 3. Adjust Layout Scaling */
    /* Since we use % for spacing, layout should shrink naturally.
       However, fonts might be too big. */

    .data-overlay {
        transform: translate(-50%, -50%) scale(0.8);
        /* Shrink text slightly */
    }

    .house-big {
        font-size: 1.8rem !important;
        /* Smaller big numbers */
    }

    .house-num {
        font-size: 1rem !important;
    }

    /* Adjust Form Input size for mobile */
    .input-overlay {
        font-size: 1rem !important;
        width: 80% !important;
    }

    .btn-calculate-overlay {
        font-size: 0.8rem !important;
        padding: 8px 20px !important;
    }

    /* Fix Table scrolling on mobile */
    .table-responsive {
        overflow-x: auto;
    }
}