/* Compact Bazi UI Styles */
.bazi-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.bazi-table th, .bazi-table td { text-align: center; vertical-align: middle; border: 1px solid #e0e0e0; padding: 0.25rem 0.4rem; font-size: 0.98rem; transition: box-shadow 0.2s, border-color 0.2s; }
.bazi-table td:not([data-polarity]) { background-color: #fff !important; }
.bazi-table td[data-polarity] { /* This cell's background is set by JavaScript */ }
.bazi-table td[data-polarity="Dương"] { background: #006400; color: #fff; }
.bazi-table td[data-polarity="Âm"] { background: #228B22; color: #fff; }
.bazi-table tr:nth-child(2) td[data-polarity="Dương"] { background: #B22222; }
.bazi-table tr:nth-child(2) td[data-polarity="Âm"] { background: #E97451; }
.bazi-table tr:nth-child(3) td[data-polarity="Dương"] { background: #8B4513; }
.bazi-table tr:nth-child(3) td[data-polarity="Âm"] { background: #D2B48C; color: #232526; }
.bazi-table tr:nth-child(4) td[data-polarity="Dương"] { background: #696969; }
.bazi-table tr:nth-child(4) td[data-polarity="Âm"] { background: #A9A9A9; color: #232526; }
.bazi-table tr:nth-child(5) td[data-polarity="Dương"] { background: #00008B; }
.bazi-table tr:nth-child(5) td[data-polarity="Âm"] { background: #4682B4; }
.bazi-table td[data-polarity]:hover, .bazi-table td:first-child:hover { box-shadow: 0 0 8px 2px #7f5af0, 0 0 0 2px #7f5af0; border-color: #7f5af0; z-index: 2; position: relative; cursor: pointer; }
.bazi-table th { background: #232526; color: #fff; font-weight: 700; letter-spacing: 1px; }
.bazi-table td:first-child { background: #f8fafc; font-weight: 600; color: #232526; }
#explanation-container { margin-top: 1rem; }
#explanation-box { border-radius: 12px; background: rgba(255,255,255,0.7); box-shadow: 0 4px 16px 0 rgba(31,38,135,0.10); backdrop-filter: blur(4px); border: 1px solid rgba(127,90,240,0.10); min-height: 80px; font-size: 0.98rem; transition: box-shadow 0.2s; padding: 0.7rem 1rem; }
#explanation-box h1 { font-size: 1.2rem; font-weight: 800; margin: 0.7rem 0 0.4rem 0; color: #7f5af0; line-height: 1.2; }
#explanation-box h2 { font-size: 1.08rem; font-weight: 700; margin: 0.6rem 0 0.3rem 0; color: #6246ea; line-height: 1.25; }
#explanation-box h3 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.2rem 0; color: #232526; line-height: 1.3; }
#explanation-box h4 { font-size: 0.98rem; font-weight: 600; margin: 0.3rem 0 0.1rem 0; color: #232526; line-height: 1.35; }
#explanation-box h5, #explanation-box h6 { font-size: 0.95rem; font-weight: 500; margin: 0.2rem 0 0.1rem 0; color: #232526; line-height: 1.4; }
#explanation-box blockquote { border-left: 4px solid #7f5af0; padding-left: 0.7rem; color: #7f5af0; font-style: italic; background: rgba(127,90,240,0.07); margin: 0.5rem 0; }
#explanation-box ul, #explanation-box ol { margin-left: 1rem; margin-bottom: 0.2rem; }
.moc-duong { color: #006400 !important; font-weight: bold; font-size: 1rem; } .bg-moc-duong { background-color: #006400; }
.moc-am   { color: #228B22 !important; font-weight: bold; font-size: 1rem; } .bg-moc-am { background-color: #228B22; }
.hoa-duong { color: #B22222 !important; font-weight: bold; font-size: 1rem; } .bg-hoa-duong { background-color: #B22222; }
.hoa-am   { color: #E97451 !important; font-weight: bold; font-size: 1rem; } .bg-hoa-am { background-color: #E97451; }
.tho-duong { color: #8B4513 !important; font-weight: bold; font-size: 1rem; } .bg-tho-duong { background-color: #8B4513; }
.tho-am   { color: #D2B48C !important; font-weight: bold; font-size: 1rem; } .bg-tho-am { background-color: #D2B48C; }
.kim-duong { color: #696969 !important; font-weight: bold; font-size: 1rem; } .bg-kim-duong { background-color: #696969; }
.kim-am   { color: #A9A9A9 !important; font-weight: bold; font-size: 1rem; } .bg-kim-am { background-color: #A9A9A9; }
.thuy-duong { color: #00008B !important; font-weight: bold; font-size: 1rem; } .bg-thuy-duong { background-color: #00008B; }
.thuy-am   { color: #4682B4 !important; font-weight: bold; font-size: 1rem; } .bg-thuy-am { background-color: #4682B4; }
.bazi-table td.selected { outline: 2px solid #7f5af0; outline-offset: -2px; box-shadow: 0 0 4px 1px #7f5af0; z-index: 3; position: relative; }
#explanation-box table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; background: white; }
#explanation-box th, #explanation-box td { border: 1px solid #e0e0e0; padding: 0.25rem 0.4rem; text-align: left; }
#explanation-box th { background: #f3f4f6; font-weight: 600; }
#aspect-tabs { margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; }
#aspect-tabs .aspect-tab { background: #f3f4f6; color: #232526; border: none; border-radius: 8px; padding: 0.3rem 0.7rem; font-weight: 600; font-size: 0.95rem; margin: 0; box-shadow: none; transition: background 0.15s, color 0.15s; outline: none; min-width: 70px; text-align: center; letter-spacing: 0.01em; }
#aspect-tabs .aspect-tab.bg-blue-600,
#aspect-tabs .aspect-tab.active { background: #2563eb !important; color: #fff !important; }
#aspect-tabs .aspect-tab:hover:not(.active):not(.bg-blue-600) { background: #e0e7ff; color: #1e40af; }
.bazi-table tr:nth-child(even) td { background: none !important; }
button[type="submit"], .btn-calc, .w-full.bg-blue-600 { background: #2563eb !important; color: #fff !important; border: none !important; font-weight: 600; box-shadow: none !important; padding: 0.5rem 1rem !important; font-size: 1rem !important; }
button[type="submit"]:hover, .btn-calc:hover, .w-full.bg-blue-600:hover { background: #1d4ed8 !important; } 

.than-color { background: #2563eb !important; color: #fff !important; }
.tam-color { background: #0ea5e9 !important; color: #fff !important; }
.tri-color { background: #6366f1 !important; color: #fff !important; }
.menh-color { background: #f59e42 !important; color: #fff !important; }
.hanh-color { background: #22c55e !important; color: #fff !important; }
.van-color { background: #a21caf !important; color: #fff !important; }
.nghiep-color { background: #64748b !important; color: #fff !important; }
.quanhe-color { background: #2563eb !important; color: #fff !important; }
.sumenh-color { background: #f43f5e !important; color: #fff !important; }