/* --- START OF FILE style.css --- */

/* === CSS Variables (Biến CSS) === */


:root {
    /* Ngũ Hành Colors - Dùng cho nền/viền nhẹ nhàng */
    --wuxing-thuy: #e0f2f7; /* Light Blue */
    --wuxing-moc:  #e8f5e9; /* Light Green */
    --wuxing-hoa:  #ffebee; /* Light Red/Pink */
    --wuxing-tho:  #fff8e1; /* Light Yellow/Sand */
    --wuxing-kim:  #f5f5f5; /* Light Gray */
    --wuxing-thuy-border: #b3e5fc;
    --wuxing-moc-border:  #c8e6c9;
    --wuxing-hoa-border:  #ffcdd2;
    --wuxing-tho-border:  #ffecb3;
    --wuxing-kim-border:  #e0e0e0;

    /* Text & Link Colors */
    --text-dark: #212529;        /* Gần đen */
    --text-primary: #495057;     /* Xám đậm */
    --text-muted: #6c757d;      /* Xám nhạt */
    --text-light: #f8f9fa;      /* Gần trắng */
    --text-white: #ffffff;
    --link-color: #0d6efd;       /* Blue */
    --link-hover-color: #0a58ca; /* Darker Blue */

    /* Background Colors */
    --background-body: #f4f7f6; /* Nền chính, hơi trắng ngà */
    --background-container: #ffffff;
    --background-controls: #ffffff;
    --background-visualization: #fdfdfd; /* Nền khu vực đồ họa */
    --background-results: #ffffff;
    --background-modal: #ffffff;
    --background-input: #ffffff;
    --background-code: #f1f3f5;     /* Nền cho code (nếu có) */
    --background-la-pan: #f0f0f0;  /* Nền La Bàn */
    --background-chart: #ffffff;  /* Nền Tinh Bàn */
    --background-trach-nhat: #f0f8ff; /* Nền khu Trạch Nhật (AliceBlue) */
    --background-calendar: #ffffff;
    --background-calendar-othermonth: #f8f9fa; /* Nền ngày tháng khác */
    --background-calendar-today-cell: #e7f1ff; /* Nền ô ngày hôm nay */
    --background-calendar-selected-cell: #0a58ca; /* Nền ô ngày được chọn (Darker Blue) */
    --background-calendar-goodday-cell: var(--wuxing-moc); /* Nền ô ngày tốt */
    --background-dongtho-section: #f8f9fa; /* Nền khu Động Thổ */
    --background-dongtho-ages: #e7f1ff;   /* Nền dropdown tuổi ĐT */
    --background-dongtho-month-list: #ffffff;
    --background-layout-suggestion: #f8f9fa; /* Nền sơ đồ gợi ý */
    --background-tooltip: rgba(0, 0, 0, 0.8); /* Nền tooltip (nếu có) */

    /* Border Colors */
    --border-color: #dee2e6;       /* Màu viền chung */
    --border-input: #ced4da;      /* Viền input thường */
    --border-input-focus: #86b7fe; /* Viền input khi focus */
    --border-highlight: #adb5bd;   /* Viền nhấn mạnh nhẹ */
    --border-trach-nhat: #b0e0e6; /* Viền khu Trạch Nhật (PowderBlue) */
    --border-calendar: var(--border-color);
    --border-calendar-day: var(--border-calendar);
    --border-calendar-today: var(--primary-blue);
    --border-calendar-selected: var(--primary-blue-dark);
    --border-calendar-goodday-left: var(--success-green); /* Viền trái ngày tốt */
    --border-dongtho-section: var(--border-color);
    --border-dongtho-ages: #b8daff;
    --border-dongtho-month-list: var(--border-color);
    --border-layout-suggestion: #ced4da;
    --la-pan-border-color: #ccc;   /* Viền ngoài La Bàn */

    /* Semantic Colors (Màu ngữ nghĩa) */
    --primary-blue: #0d6efd;
    --primary-blue-dark: #0b5ed7;
    --danger-red: #dc3545;
    --danger-red-dark: #bb2d3b;
    --success-green: #198754;
    --success-green-dark: #157347;
    --warning-orange: #ffc107;
    --warning-orange-dark: #d39e00; /* Darker yellow */
    --info-cyan: #0dcaf0;
    --info-cyan-dark: #0aa8c7; /* Darker cyan */
    --purple-mid: #6f42c1;       /* Tím trung bình */
    --kiep-sat-color: #fd7e14;    /* Orange for Kiếp Sát text */
    --kiep-sat-border: var(--danger-red); /* Border for Kiếp Sát label */
    --neutral-gray: #6c757d;

    /* Star Timeliness & Quality Colors (Màu Vượng/Suy, Tốt/Xấu) */
    /* Text Colors */
    --status-wang-color: var(--danger-red-dark);
    --status-sheng-color: var(--success-green-dark);
    --status-tui-color: #a07400; /* Darker Yellow/Brown */
    --status-sha-color: var(--text-dark);
    --status-si-color: var(--text-muted);
    --quality-very_good-color: var(--success-green-dark);
    --quality-good-color: #2a9d8f; /* Teal */
    --quality-neutral-color: var(--neutral-gray);
    --quality-bad-color: var(--danger-red-dark);
    --quality-very_bad-color: #8B0000; /* DarkRed */

    /* Background/Border Colors (Dùng cho status-text, du-nien-name, etc.) */
    --status-wang-bg: #f8d7da; --status-wang-border: #f5c2c7;
    --status-sheng-bg: #d1e7dd; --status-sheng-border: #badbcc;
    --status-tui-bg: #fff3cd; --status-tui-border: #ffe69c;
    --status-sha-bg: #e2e3e5; --status-sha-border: #d3d6d8;
    --status-si-bg: #f8f9fa; --status-si-border: #e9ecef;
    --quality-very_good-bg: var(--status-sheng-bg); --quality-very_good-border: var(--status-sheng-border);
    --quality-good-bg: #e0f2f1; --quality-good-border: #b2dfdb; /* Light Teal */
    --quality-neutral-bg: var(--status-si-bg); --quality-neutral-border: var(--status-si-border);
    --quality-bad-bg: var(--status-wang-bg); --quality-bad-border: var(--status-wang-border);
    --quality-very_bad-bg: #dc354533; --quality-very_bad-border: var(--danger-red); /* Semi-transparent red */

    /* Shadows & Effects */
    --box-shadow-light: 0 .125rem .25rem rgba(0,0,0,.075);
    --box-shadow-medium: 0 .5rem 1rem rgba(0,0,0,.15);
    --box-shadow-modal: 0 .5rem 1rem rgba(0,0,0,.15);
    --focus-ring-color: rgba(13, 110, 253, 0.25);      /* Vòng focus mặc định */
    --focus-ring-valid-color: rgba(25, 135, 84, 0.25); /* Vòng focus hợp lệ */
    --modal-backdrop-color: rgba(0, 0, 0, 0.5);       /* Nền mờ modal */

    /* Font & Sizing */
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --base-font-size: 16px;
    --base-line-height: 1.6;
    --border-radius: 0.25rem;
    --border-radius-lg: 0.3rem;
    --border-radius-xl: 0.5rem;
    /* La Pan Font Sizes */
    --la-pan-font-size-degree: 0.85em;
    --la-pan-font-size-mountain: 0.9em;
    --la-pan-font-size-mansion: 0.75em;
    --la-pan-font-size-hex-num: 0.8em;
    --la-pan-font-size-hex-symbol: 1em;
    --la-pan-font-size-trigram: 1em;
    /* Chart Font Sizes */
    --chart-font-size-main-star: 1.3em;
    --chart-font-size-period-star: 1.5em;
    --chart-font-size-annual-star: 1.2em;
    --chart-font-size-palace-name: 1.5em;

    /* La Pan Palace Colors (Nền màu cung) */
    --palace-n: var(--wuxing-thuy);
    --palace-ne: var(--wuxing-tho);
    --palace-e: var(--wuxing-moc);
    --palace-se: var(--wuxing-moc);
    --palace-s: var(--wuxing-hoa);
    --palace-sw: var(--wuxing-tho);
    --palace-w: var(--wuxing-kim);
    --palace-nw: var(--wuxing-kim);

    /* Layout Suggestion Colors */
    --suggestion-good-bg: var(--wuxing-moc);
    --suggestion-good-border: var(--success-green);
    --suggestion-good-text: var(--success-green-dark);
    --suggestion-avoid-bg: var(--wuxing-hoa);
    --suggestion-avoid-border: var(--danger-red);
    --suggestion-avoid-text: var(--danger-red-dark);
}

.tinh-ban-title { color: #4CAF50; }
.la-ban-title { color: #03c90acb; }
.ket-qua-title { color: #4CAF50; }
.phan-tich-title { color: #4CAF50; }
.dong-tho-title { color: #e99a08ed; }
.tong-quan-title { color: #4CAF50; }

.layout-suggestion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 1rem 0; background: var(--border-color); padding: 4px; border-radius: var(--border-radius); }
.suggestion-cell { background: white; padding: 10px; text-align: center; border-radius: 4px; min-height: 80px; display: flex; flex-direction: column; gap: 8px; }
.suggestion-cell .palace-code { font-weight: 600; color: var(--text-primary); font-size: 0.9em; }
.suggestion-icons { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 24px; }
.suggestion-icons i { cursor: pointer; transition: transform 0.2s ease; }
.suggestion-icons i:hover { transform: scale(1.2); }
.suggestion-icons .good { color: var(--success-green); }
.suggestion-icons .bad { color: var(--danger-red); }
.layout-suggestion-legend { display: flex; justify-content: center; gap: 20px; margin-top: 10px; font-size: 0.9em; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-item.good i { color: var(--success-green); }
.legend-item.bad i { color: var(--danger-red); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family-sans-serif); margin: 0; padding: 20px; background-color: var(--background-body); color: var(--text-primary); line-height: var(--base-line-height); font-size: var(--base-font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--text-dark); }
h1 { font-size: calc(1.375rem + 1.5vw); text-align: center; margin-bottom: 2rem; color: var(--primary-blue-dark); display: flex; align-items: center; justify-content: center; gap: 0.5em;}
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }
h2 { font-size: calc(1.3rem + 0.6vw); text-align: center; margin-top: 2rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.75rem; color: var(--primary-blue); display: flex; align-items: center; justify-content: center; gap: 0.6em; }
@media (min-width: 1200px) { h2 { font-size: 2rem; } }
h3 { font-size: calc(1.25rem + 0.3vw); margin-top: 1.75rem; margin-bottom: 1.25rem; color: var(--primary-blue-dark); display: flex; align-items: center; gap: 0.5em; }
h3 i { width: 1.1em; text-align: center; }
@media (min-width: 1200px) { h3 { font-size: 1.5rem; } }
h4 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1rem; color: var(--primary-blue); border-bottom: 1px dashed var(--border-highlight); padding-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5em; }
h4 i { width: 1.1em; text-align: center; }
h5 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.75rem; font-weight: 600; color: var(--text-dark); display: flex; align-items: center; gap: 0.5em; }
h5 i { width: 1.1em; text-align: center; }
h6 { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-muted); }
p { margin-top: 0; margin-bottom: 1rem; }
a { color: var(--link-color); text-decoration: none; transition: color 0.15s ease-in-out; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border-color); margin: 1.75rem 0; }
em { font-style: italic; color: var(--text-muted); }
strong { font-weight: 600; }
pre { display: block; padding: 1rem; font-size: 0.9em; color: var(--text-dark); background-color: var(--background-code); border: 1px solid var(--border-color); border-radius: var(--border-radius); font-family: var(--font-family-monospace); white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; }
ul, ol { padding-left: 1.5rem; margin-top: 0; margin-bottom: 1rem; }
li { margin-bottom: 0.3rem; }
i.fa-solid, i.fas, i.fa-regular, i.far { margin-right: 0.4em; width: 1.1em; text-align: center; vertical-align: middle; }
.clickable { cursor: pointer; }
.error-text { color: var(--danger-red-dark); font-style: italic; }

.container { display: grid; grid-template-columns: minmax(280px, 1fr) 1.5fr minmax(300px, 1fr); gap: 30px; max-width: 1800px; margin: 20px auto; background-color: var(--background-container); padding: 30px; border-radius: var(--border-radius-xl); box-shadow: var(--box-shadow-medium); border: 1px solid var(--border-color); }

.controls { grid-column: 1 / 2; padding: 25px; border-right: 1px solid var(--border-color); background-color: var(--background-controls); border-radius: var(--border-radius); overflow-y: auto; max-height: calc(100vh - 100px); }
.input-group { margin-bottom: 1.25rem; }
.input-group label { display: flex; align-items: center; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary); font-size: 0.95em; gap: 0.6em; }
.input-group label i { color: var(--primary-blue); }
.input-group select, .input-group input[type="number"], .input-group input[type="text"], .input-group input[type="date"] { display: block; width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--border-input); border-radius: var(--border-radius); font-size: 1em; background-color: var(--background-input); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; line-height: 1.5; color: var(--text-primary); }
.input-group input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.input-group input[type="number"]::-webkit-outer-spin-button, .input-group input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-group select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 2.5rem; }
.input-group select optgroup { font-weight: bold; color: var(--primary-blue-dark); background-color: #f0f0f0; font-style: normal; }
.input-group select:hover, .input-group input:hover { border-color: var(--border-highlight); }
.input-group select:focus, .input-group input:focus { border-color: var(--border-input-focus); box-shadow: 0 0 0 0.2rem var(--focus-ring-color); outline: none; }
#trach-nhat-date:focus, #trach-nhat-activity:focus, #trach-nhat-tuoi:focus, #dong-tho-year-select:focus, #dong-tho-age-select:focus, #dong-tho-location-select:focus { border-color: var(--success-green); box-shadow: 0 0 0 0.2rem var(--focus-ring-valid-color); }
.input-group select.valid { border-color: var(--success-green); }
.input-group select.valid:focus { box-shadow: 0 0 0 0.2rem var(--focus-ring-valid-color); }
button { display: inline-flex; align-items: center; justify-content: center; background-color: var(--primary-blue); color: var(--text-white); padding: 0.7rem 1.25rem; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 1em; font-weight: 500; margin-right: 0.75rem; margin-top: 0.5rem; transition: all 0.2s ease; box-shadow: var(--box-shadow-light); vertical-align: middle; gap: 0.5em; }
button:hover:not(:disabled) { background-color: var(--primary-blue-dark); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); box-shadow: var(--box-shadow-light); }
button:disabled { background-color: var(--text-muted); cursor: not-allowed; opacity: 0.65; box-shadow: none; }
#explanation-button { background-color: var(--success-green); }
#explanation-button:hover:not(:disabled) { background-color: var(--success-green-dark); }
#print-report-button { background-color: var(--purple-mid); }
#print-report-button:hover:not(:disabled) { background-color: #5a2d91; }
#analyze-loan-dau-button { background-color: var(--warning-orange); color: var(--text-dark); }
#analyze-loan-dau-button:hover:not(:disabled) { background-color: var(--warning-orange-dark); }
#analyze-layout-button { background-color: var(--info-cyan); color: var(--text-dark); }
#analyze-layout-button:hover:not(:disabled) { background-color: var(--info-cyan-dark); }
#analyze-facing-water-button { background-color: #6610f2; }
#analyze-facing-water-button:hover:not(:disabled) { background-color: #520dc2; }

#thong-tin-nang-cao-section { margin-top: 2rem; border-top: 1px dashed var(--border-highlight); padding-top: 1.5rem; }
#thong-tin-nang-cao-section h3 { text-align: left; border-bottom: none; margin-bottom: 1rem; font-size: 1.3em; color: var(--purple-mid); }
#thong-tin-nang-cao-section h3 i { color: var(--purple-mid); }
#thong-tin-nang-cao-section > p { text-align: left; margin-top: -1rem; margin-bottom: 1.5rem; font-style: italic; color: var(--text-muted); font-size: 0.9em; }
.input-group-container { margin-bottom: 1.5rem; padding: 1.2rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); background-color: #fdfdfd; }
.input-group-container legend { font-weight: 600; padding: 0 0.5em; color: var(--primary-blue-dark); font-size: 1.1em; display: flex; align-items: center; gap: 0.4em; margin-left: 5px; margin-bottom: 0.75rem; }
.input-group-container .input-group { margin-bottom: 1rem; }
.input-group-container .input-group:last-child { margin-bottom: 0; }
.input-group small { display: block; margin-top: 5px; font-size: 0.85em; color: var(--text-muted); line-height: 1.4; }
.input-group small i { color: var(--info-cyan); margin-right: 4px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px 15px; margin-top: 5px; }
.checkbox-grid span, .checkbox-grid label { display: flex; align-items: center; font-size: 0.95em; gap: 0.5em; }
.checkbox-grid input[type="checkbox"] { width: 1.1em; height: 1.1em; cursor: pointer; accent-color: var(--primary-blue); }
.checkbox-grid label { cursor: pointer; margin-bottom: 0; font-weight: normal; }
.radio-group { display: flex; gap: 1.5rem; margin-top: 0.3rem; }
.radio-group span { display: flex; align-items: center; gap: 0.5em; }
.radio-group input[type="radio"] { cursor: pointer; width: 1.1em; height: 1.1em; accent-color: var(--primary-blue); }
.radio-group label { margin-bottom: 0; font-weight: normal; cursor: pointer; }
.thuy-phap-openings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px 20px; margin-top: 10px; }
.thuy-phap-openings-grid > div { padding: 10px; border: 1px solid #eee; border-radius: var(--border-radius); background-color: #f8f9fa; }
.thuy-phap-openings-grid strong { display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-blue); font-size: 1em; }
.thuy-phap-openings-grid span { display: block; margin-bottom: 5px; }
.thuy-phap-openings-grid input[type="checkbox"] { margin-right: 8px; width: 1.1em; height: 1.1em; cursor: pointer; accent-color: var(--primary-blue); vertical-align: middle; }
.thuy-phap-openings-grid label { cursor: pointer; font-size: 0.95em; vertical-align: middle; }

.trach-nhat-container { background-color: var(--background-trach-nhat); padding: 20px; border-radius: var(--border-radius-lg); border: 1px solid var(--border-trach-nhat); }
.trach-nhat-input-group { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .trach-nhat-input-group { grid-template-columns: repeat(2, 1fr); } }

.thuy-phap-khau-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 10px; padding: 10px; border: 1px solid #eee; border-radius: var(--border-radius); background-color: #fdfdfd; }
.thuy-phap-khau-name { flex-grow: 1; }
.thuy-phap-khau-son { min-width: 200px; }
.thuy-phap-remove-khau-button { background-color: var(--danger-red); color: white; border: none; padding: 5px 10px; font-size: 1.2em; line-height: 1; cursor: pointer; border-radius: var(--border-radius); transition: background-color 0.2s ease; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.thuy-phap-remove-khau-button:hover { background-color: var(--danger-red-dark); }
#thuy-phap-add-khau-button { background-color: var(--success-green); display: inline-flex; align-items: center; gap: 0.5em; }
#thuy-phap-add-khau-button:hover { background-color: var(--success-green-dark); }
#thuy-phap-khau-list:empty::before { content: "(Chưa có vị trí Khí Khẩu nào được thêm)"; display: block; text-align: center; padding: 10px; color: var(--text-muted); font-style: italic; border: 1px dashed var(--border-color); border-radius: var(--border-radius); }

.visualization { grid-column: 2 / 3; padding: 25px; background-color: var(--background-visualization); border-radius: var(--border-radius); border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); overflow-y: auto; max-height: calc(100vh - 100px); }
.chart-instruction { font-size: 0.85em; color: var(--text-muted); text-align: center; margin-top: -0.5rem; margin-bottom: 1rem; }

#la-pan-container { width: 95%; max-width: 550px; aspect-ratio: 1 / 1; margin: 1.5rem auto; position: relative; border: 2.5px solid var(--primary-blue-dark); border-radius: 50%; background: radial-gradient(circle at 60% 40%, #f0f4fa 70%, #e3e7ef 100%); box-shadow: 0 4px 24px 0 rgba(13, 110, 253, 0.08), 0 1.5px 8px 0 rgba(0,0,0,0.07) inset, var(--box-shadow-light); overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

#palace-color-background,
.degree-ring-container,
.mountain-ring-container,
.lunar-mansion-ring-container,
.hexagram-ring-container,
.trigram-lines-container,
#compass-needle,
.house-representation {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

#palace-color-background { z-index: 1; opacity: 0.7; pointer-events: auto; filter: drop-shadow(0 0 8px rgba(13,110,253,0.08)); transition: opacity 0.3s; }
.hexagram-ring-container { z-index: 30 !important; transform: scale(1) !important; display: block !important; pointer-events: none; opacity: 1 !important; filter: drop-shadow(0 0 6px rgba(13,110,253,0.08)); }
.lunar-mansion-ring-container { z-index: 30 !important; transform: scale(0.92); pointer-events: none !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.04));}
.mountain-ring-container { z-index: 10 !important; transform: scale(1) !important; display: block !important; pointer-events: auto; opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.04));}
.degree-ring-container { z-index: 10 !important; transform: scale(0.98); pointer-events: none !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.04));}
#compass-needle { z-index: 20; }

/* ------ START SỬA CHỖ NÀY ------ */
.house-representation {
    display: none; /* JS sẽ đổi thành flex/block */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999 !important; /* LUÔN TRÊN CÙNG */
    pointer-events: none; /* Cho phép click xuyên qua container này */
}

#house-rect, .house-rect {
    position: absolute;
    border: 2px solid #ff0000;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: none;
    opacity: 1;
    transition: opacity 0.5s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    pointer-events: none; /* Không chặn click các phần tử bên trong */
}
.icon-placement-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 45%; height: 45%;
    border: 1.5px dashed rgba(13, 110, 253, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    display: block;
    background: transparent;
}

.hexagram-on-compass {
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 1.1em;
    font-weight: bold;
    color: #b36b00;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    z-index: 20;
}
/* ------ END SỬA CHỖ NÀY ------ */


.loan-dau-report { font-family: "Times New Roman", serif; line-height: 1.5; margin: 20px; }
.report-header { text-align: center; margin-bottom: 30px; }
.report-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.report-date { font-style: italic; color: #666; }
/* .section đã được định nghĩa ở global, không cần lặp lại trừ khi muốn style khác */
.section-title { font-size: 18px; font-weight: bold; color: #2c3e50; margin-bottom: 15px; }
.analysis-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.analysis-table th, .analysis-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.analysis-table th { background-color: #f5f5f5; }
.severity { font-weight: bold; }
.severity.high { color: #e74c3c; }
.severity.medium { color: #f39c12; }
.severity.low { color: #27ae60; }
.recommendations { background-color: #f9f9f9; padding: 15px; border-radius: 5px; }
.recommendation-item { margin-bottom: 10px; }
.remediation-box { border: 1px solid #bdc3c7; padding: 15px; margin-top: 15px; border-radius: 5px; }

.la-pan-label { position: absolute; transform-origin: center center; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: auto !important; }
.palace-sector { transition: opacity 0.2s ease; cursor: pointer; }
.palace-sector:hover { opacity: 0.9 !important; }

#kiep-sat-arrow { position: absolute; left: 50%; top: 50%; width: 4px; height: 38%; background: linear-gradient(to top, var(--kiep-sat-color) 80%, transparent 100%); border-radius: 2px; transform-origin: center bottom; z-index: 30; pointer-events: auto; cursor: help; opacity: 0; display: none; box-shadow: 0 2px 6px rgba(253,126,20,0.15); transition: opacity 0.3s, filter 0.3s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
#kiep-sat-arrow::after { content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 18px solid var(--kiep-sat-color); filter: drop-shadow(0 2px 6px rgba(253,126,20,0.25)); }
#kiep-sat-arrow:hover { opacity: 1; filter: drop-shadow(0 4px 12px rgba(253,126,20,0.45)); }

.degree-tick { position: absolute; background-color: rgba(0,0,0,0.7) !important; height: 2px !important; transform-origin: left center; pointer-events: none; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,0.08); }
.degree-tick.major { background-color: var(--primary-blue-dark) !important; height: 3px !important; }
.degree-tick.medium { background-color: rgba(0,0,0,0.8) !important; height: 2.5px !important; }
.degree-marker { font-size: var(--la-pan-font-size-degree); color: var(--text-muted); padding: 2px; margin: 1px; font-family: 'Segoe UI', Arial, sans-serif; letter-spacing: 0.01em; text-shadow: 0 1px 2px #fff, 0 0 2px #e3e7ef; transition: color 0.2s; }
.degree-marker.cardinal { font-weight: bold; color: var(--primary-blue-dark); margin-top: -0.5em; font-size: 1.1em; text-shadow: 0 2px 6px #fff, 0 0 2px #e3e7ef; }

.mountain-label { font-family: 'Segoe UI Semibold', Arial, sans-serif; background: linear-gradient(90deg, #f8fafc 60%, #e3e7ef 100%); border: 1px solid #e0e7ef; box-shadow: 0 1px 4px rgba(13,110,253,0.04); transition: background 0.2s, color 0.2s, box-shadow 0.2s; padding: 3px 5px; font-size: var(--la-pan-font-size-mountain); color: var(--text-primary); font-weight: 500; cursor: pointer; position: absolute; transform-origin: center center; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: auto !important; margin: 2px; }
.mountain-label.duong { color: var(--danger-red-dark); font-weight: bold; }
.mountain-label.am { color: var(--text-dark); font-weight: bold; }
.mountain-label:hover { background: linear-gradient(90deg, #e3f2fd 60%, #bbdefb 100%); box-shadow: 0 2px 8px rgba(13,110,253,0.15); }
.mountain-label.duong:hover, .mountain-label.am:hover { background: linear-gradient(90deg, #e3f2fd 60%, #bbdefb 100%); box-shadow: 0 2px 8px rgba(13,110,253,0.15); }
.mountain-label.highlight-sitting { border: 2px solid var(--danger-red) !important; font-weight: bold !important; box-shadow: 0 2px 8px rgba(220,53,69,0.15) !important; background: linear-gradient(90deg, #ffeaea 60%, #ffd6d6 100%); color: var(--danger-red-dark); }
.mountain-label.highlight-facing { border: 2px solid var(--primary-blue) !important; font-weight: bold !important; box-shadow: 0 2px 8px rgba(13,110,253,0.15) !important; background: linear-gradient(90deg, #e3f2fd 60%, #bbdefb 100%); color: var(--primary-blue-dark); }
.mountain-label.hoang-tuyen-warning { border-color: var(--danger-red-dark) !important; text-decoration: line-through !important; background-color: rgba(255, 200, 200, 0.6) !important; cursor: help !important; }
.mountain-label.hoang-tuyen-warning:hover { background-color: rgba(255, 180, 180, 0.9) !important; box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3) !important; }
.hoang-tuyen-arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 48px solid orange; transform-origin: 50% 90%; z-index: 30; pointer-events: auto; cursor: pointer; opacity: 0.95; }
.mountain-label.highlight-kiep-sat { color: var(--warning-orange-dark) !important; background-color: rgba(255, 224, 178, 0.9) !important; border: 1px dashed var(--warning-orange-dark) !important; font-weight: bold !important; cursor: help !important; z-index: 15; }
.mountain-label.highlight-kiep-sat:hover { background-color: rgba(255, 204, 133, 1) !important; box-shadow: 0 2px 10px rgba(255, 165, 0, 0.4) !important; }

.khau-circle-container { position: absolute; top: 50%; left: 50%; width: 70%; height: 70%; border: 1px dashed rgba(0,0,0,0.1); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.lunar-mansion-label { font-size: 14px; font-weight: bold; color: #333; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); cursor: pointer !important; pointer-events: auto !important; white-space: nowrap; padding: 2px 4px; transition: all 0.2s ease; z-index: 31 !important; position: absolute; font-family: 'Segoe UI', Arial, sans-serif; background: rgba(255,255,255,0.7); border-radius: 3px; }
.lunar-mansion-label:hover { opacity: 0.8; background: #e3f2fd; color: var(--primary-blue-dark); }
.lunar-mansion-label.highlight-sitting-mansion { color: var(--danger-red-dark); font-weight: bold; }
.lunar-mansion-label.highlight-facing-mansion { font-size: 16px; font-weight: 700; text-shadow: 1px 1px 2px rgba(255, 255, 255, 1); }
.lunar-mansion-label.clickable { cursor: pointer; transition: opacity 0.2s ease; }
.lunar-mansion-label.clickable:hover { opacity: 0.8; }

.ki-khau-icon { position: absolute; font-size: 1.2em; color: var(--primary-blue-dark); background-color: rgba(255, 255, 255, 0.95); padding: 4px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 2; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; cursor: help; transform: translate(-50%, -50%); }
.ki-khau-icon.fa-door-open { color: var(--success-green-dark); }
.ki-khau-icon.fa-window-maximize { color: var(--info-cyan-dark); }
.ki-khau-icon.fa-door-closed { color: var(--warning-orange-dark); }
.ki-khau-icon.fa-arrow-up-right-from-square { color: var(--purple-mid); }
.ki-khau-icon:hover { transform: translate(-50%, -50%) scale(1.2) !important; background-color: rgba(255, 255, 255, 1); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

.hexagram-label {
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 1em;
    font-weight: bold;
    color: #b36b00;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    pointer-events: auto !important;
    cursor: pointer;
    user-select: none;
    z-index: 30;
}
 /* Màu sắc cho Icons trong Sơ đồ gợi ý */
.suggestion-cell.very_good { /* Hoặc .quality-very-good tùy bạn đặt tên class */
    background-color: var(--status-sheng-bg); /* Màu nền xanh lá nhạt */
    border-left: 5px solid var(--status-sheng-border); /* Viền trái để nhấn mạnh */
}
.suggestion-cell.good {
    background-color: var(--quality-good-bg); /* Màu nền teal nhạt */
    border-left: 5px solid var(--quality-good-border);
}
.suggestion-cell.neutral {
    background-color: var(--quality-neutral-bg); /* Màu nền xám nhạt */
    border-left: 5px solid var(--quality-neutral-border);
}
.suggestion-cell.bad {
    background-color: var(--quality-bad-bg); /* Màu nền đỏ nhạt */
    border-left: 5px solid var(--quality-bad-border);
}
.suggestion-cell.very_bad {
    background-color: var(--quality-very_bad-bg); /* Màu nền đỏ đậm hơn */
    border-left: 5px solid var(--quality-very_bad-border);
}
/* Điều chỉnh thêm màu chữ nếu cần để tương phản với nền */
.suggestion-cell.very_good .palace-code,
.suggestion-cell.good .palace-code {
    color: var(--success-green-dark);
}
.suggestion-cell.very_bad .palace-code,
.suggestion-cell.bad .palace-code {
    color: var(--danger-red-dark);
}
Us
.hexagram-label:hover { background: #e3f2fd; color: var(--danger-red-dark); z-index: 10; }
.hexagram-label.active { font-weight: bold; transform: translate(-50%, -50%) scale(1.2) rotate(var(--rotation-angle, 0deg)); background: #cce5ff; border-color: var(--primary-blue); }
.hexagram-label.active .hexagram-symbol { color: var(--primary-blue-dark); }
.hexagram-number {font-size: 1.1em;color: #ff0000;font-weight: bold; margin-bottom: 2px; display:block;text-shadow: 0 1px 2px #fff, 0 0 2px e3e7ef;}
.hexagram-symbol { font-size: 1.2em; font-family: 'Apple Symbols', 'Arial Unicode MS', sans-serif; }
.hexagram-keywords { font-size: 0.9em; color: var(--text-muted); }
.hexagram-placeholder em, .hexagram-error em { color: var(--text-muted); }
@media (max-width: 700px) { .hexagram-label { font-size: 0.85em !important; padding: 2px 4px !important; } }

.truong-sinh-label { font-size: 13px; font-weight: bold; color: #007bff; background: rgba(255,255,255,0.85); border-radius: 3px; padding: 2px 4px; position: absolute; z-index: 29; pointer-events: auto; transition: background 0.2s, color 0.2s; }
.truong-sinh-label:hover { background: #e3f2fd; color: #d90429; }
.truong-sinh-label.highlight-good-element { background: #d4f7d4; border-radius: 6px; }
.truong-sinh-label.highlight-bad-element { background: #ffd6d6; border-radius: 6px; }
.truong-sinh-label.highlight-good-year { outline: 2px solid #4caf50; }
.truong-sinh-label.highlight-bad-year { outline: 2px solid #f44336; }

.trigram-name-label { font-size: var(--la-pan-font-size-trigram); font-weight: bold; color: var(--primary-blue-dark); padding: 2px 4px; border-radius: 3px; cursor: pointer; z-index: 8; background: linear-gradient(90deg, #f8fafc 60%, #e3e7ef 100%); border: 1px solid #e0e7ef; box-shadow: 0 1px 4px rgba(13,110,253,0.04); transition: background 0.2s, color 0.2s; }
.trigram-name-label:hover { background: #e3f2fd; color: var(--primary-blue-dark); }
.trigram-name-label.clickable { cursor: pointer; transition: opacity 0.2s ease; }
.trigram-name-label.clickable:hover { opacity: 0.8; text-decoration: underline; }

#compass-needle-line { position: absolute; top: 50%; left: 50%; width: 3px; height: 90%; transform-origin: center center; transform: translate(-50%, -50%) rotate(0deg); background: linear-gradient(to bottom, var(--primary-blue) 50%, var(--danger-red) 50%); border-radius: 2px; box-shadow: 0 0 8px rgba(13,110,253,0.10); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s; }
#compass-needle-line::after { content: ''; position: absolute; top: 2px; left: -6px; width: 15px; height: 3px; background: var(--primary-blue); border-radius: 1px; box-shadow: 0 0 6px #0d6efd44; }
#compass-needle-line::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%) rotate(180deg); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--danger-red); width: 0; height: 0; filter: drop-shadow(0 2px 4px #dc354544); }

.flying-star-section { margin-top: 2.5rem; }
#flying-star-chart { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; max-width: 450px; aspect-ratio: 1 / 1; margin: 1rem auto; border: 2px solid var(--text-dark); position: relative; background-color: var(--background-chart); border-radius: var(--border-radius); }
.star-cell { border: 1px solid var(--border-color); display: grid; grid-template-areas: "mt . fc" ". pd ." "an . pl"; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; padding: 5px; text-align: center; position: relative; cursor: pointer; transition: background-color 0.2s ease; overflow: hidden; align-items: center; justify-items: center; }
.star-cell:hover { background-color: #f1f8ff; }
.mountain-star { grid-area: mt; font-size: var(--chart-font-size-main-star); font-weight: bold; justify-self: start; align-self: start; padding: 2px; }
.facing-star { grid-area: fc; font-size: var(--chart-font-size-main-star); font-weight: bold; justify-self: end; align-self: start; padding: 2px; }
.period-star { grid-area: pd; font-size: var(--chart-font-size-period-star); font-weight: bold; color: var(--text-dark); padding: 2px; align-self: center; }
.annual-star { grid-area: an; font-size: var(--chart-font-size-annual-star); font-weight: bold; color: var(--purple-mid); justify-self: start; align-self: end; padding: 2px; }
.palace-name { grid-area: pl; font-size: var(--chart-font-size-palace-name); color: var(--text-muted); font-weight: bold; justify-self: end; align-self: end; padding-bottom: 2px; padding-right: 4px; }
.mountain-star.status-wang, .facing-star.status-wang { color: var(--status-wang-color); }
.mountain-star.status-sheng, .facing-star.status-sheng { color: var(--status-sheng-color); }
.mountain-star.status-tui, .facing-star.status-tui { color: var(--status-tui-color); }
.mountain-star.status-sha, .facing-star.status-sha { color: var(--status-sha-color); text-decoration: line-through; }
.mountain-star.status-si, .facing-star.status-si { color: var(--status-si-color); }
.star-cell.formation-ws-wx { background-color: var(--status-sheng-bg); }
.star-cell.formation-ss-xs { background-color: var(--status-wang-bg); }
.star-cell.formation-st-dh .facing-star { background-color: var(--status-tui-bg); color: var(--text-dark); border-radius: 3px; padding: 0 3px; display: inline-block; border: 1px solid var(--status-tui-border); }
.star-cell.formation-st-ht .mountain-star { background-color: var(--status-tui-bg); color: var(--text-dark); border-radius: 3px; padding: 0 3px; display: inline-block; border: 1px solid var(--status-tui-border); }
#flying-star-chart.formation-fu-yin-chart { border: 3px dashed var(--danger-red); }
#flying-star-chart.formation-fan-yin-chart { border: 3px dotted var(--danger-red); }
.external-palace-name { position: absolute; font-size: 0.7em; color: var(--text-muted); font-weight: bold; background: var(--background-visualization); padding: 0 3px; user-select: none; }
.palace-name-nw { top: -0.8em; left: 0.5em; } .palace-name-n { top: -0.8em; left: 50%; transform: translateX(-50%); } .palace-name-ne { top: -0.8em; right: 0.5em; }
.palace-name-w { top: 50%; left: -1.5em; transform: translateY(-50%) rotate(-90deg); } .palace-name-e { top: 50%; right: -1.5em; transform: translateY(-50%) rotate(90deg); }
.palace-name-sw { bottom: -0.8em; left: 0.5em; } .palace-name-s { bottom: -0.8em; left: 50%; transform: translateX(-50%); } .palace-name-se { bottom: -0.8em; right: 0.5em; }
#chart-house-representation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 1; }
#chart-house-representation-rect { background: rgba(0, 123, 255, 0.12); border: 2px solid #007bff; border-radius: 6px; opacity: 1; transition: opacity 0.3s; }
.thanh-mon-highlight { border: 2.5px solid orange !important; box-shadow: 0 0 8px 2px rgba(255,165,0,0.25); position: relative; }
.thanh-mon-icon { position: absolute; top: 4px; right: 4px; z-index: 2; pointer-events: none; }
.formation-tag, .formation-tag.very_good, .formation-tag.very_bad, .formation-tag.good, .formation-tag.bad { display: inline !important; color: #d90429 !important; background: none !important; border: none !important; font-weight: bold !important; font-size: 1.08em !important; opacity: 1 !important; visibility: visible !important; }
#chart-notifications, #chart-notifications * { color: inherit !important; opacity: 1 !important; visibility: visible !important; }
.chart-notifications-container { margin-top: 1rem; padding: 10px; background-color: #f8f9fa; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 0.9em; }
.chart-notifications-container p { margin-bottom: 0.5rem; }
.chart-notifications-container hr { margin: 0.5rem 0; border-color: #eee; }
/* .formation-tag đã được style ở trên, đảm bảo !important nếu cần ghi đè */
.formation-tag.ws-wx { background-color: var(--success-green) !important; color:white !important; }
.formation-tag.ss-xs { background-color: var(--danger-red) !important; color:white !important; }
.formation-tag.st-dh, .formation-tag.st-ht { background-color: var(--warning-orange) !important; color: var(--text-dark) !important; }
.formation-tag.hop-thap { background-color: var(--primary-blue) !important; color:white !important; }
.formation-tag.thong-khi { background-color: var(--info-cyan) !important; color: var(--text-dark) !important; }
.formation-tag.phu-mau { background-color: var(--purple-mid) !important; color:white !important; }
.formation-tag.fu-yin { background-color: var(--neutral-gray) !important; color:white !important; }
.formation-tag.fan-yin { background-color: #343a40 !important; color:white !important; }
.hoang-tuyen-warning-section .hoang-tuyen-alert { color: var(--danger-red-dark); font-weight: bold; }
.poverty-relieving-info-section .poverty-relieving-header { color: var(--success-green-dark); font-weight: bold; }
.groundbreaking-marker { position: absolute; bottom: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7em; font-weight: bold; color: white; cursor: pointer; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.1s ease; }
.groundbreaking-marker:hover { transform: scale(1.1); }
.groundbreaking-marker.eliminated { background-color: var(--danger-red); }
.groundbreaking-marker.eliminated i { font-size: 1.2em; }
.groundbreaking-marker.suggestion { background-color: var(--success-green); }
.groundbreaking-marker.priority-1 { border: 1px solid gold; }
.groundbreaking-marker.priority-2 { opacity: 0.9; }
.groundbreaking-marker.priority-3 { opacity: 0.8; }
.groundbreaking-marker.priority-4 { opacity: 0.7; }

.calendar-container { margin-top: 2.5rem; background-color: var(--background-calendar); padding: 15px; border: 1px solid var(--border-calendar); border-radius: var(--border-radius-lg); }
.calendar-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1rem; }
.calendar-controls label { margin-bottom: 0; font-weight: 500; }
.calendar-controls input[type="month"] { padding: 0.4rem 0.6rem; font-size: 0.95em; border-radius: var(--border-radius); border: 1px solid var(--border-input); }
.calendar-controls button { padding: 0.4rem 0.8rem; font-size: 0.9em; margin: 0; background-color: var(--neutral-gray); }
.calendar-controls button:hover:not(:disabled) { background-color: #5a6268; }
#calendar-today { background-color: var(--primary-blue); }
#calendar-today:hover:not(:disabled) { background-color: var(--primary-blue-dark); }
#calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--border-calendar); border: 1px solid var(--border-calendar); }
.calendar-header { background-color: #e9ecef; padding: 8px 5px; text-align: center; font-weight: bold; font-size: 0.85em; }
.calendar-day { background-color: #fff; padding: 8px 5px; min-height: 70px; position: relative; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s ease; border: 1px solid transparent; border-left-width: 4px; overflow: hidden; }
.calendar-day:not(.other-month):not(.error):hover { background-color: #e7f1ff; }
.calendar-day.other-month { background-color: var(--background-calendar-othermonth); color: var(--text-muted); cursor: default; border-left-color: transparent; }
.calendar-day.today { background-color: var(--background-calendar-today-cell); border-color: var(--border-calendar-today); }
.calendar-day.selected { background-color: var(--background-calendar-selected-cell) !important; color: white; border-color: var(--border-calendar-selected) !important; font-weight: bold; }
.calendar-day.selected .day-number-lunar, .calendar-day.selected .calendar-almanac-icon { color: var(--text-light) !important; }
.calendar-day.good-day { border-left-color: var(--border-calendar-goodday-left); background-color: var(--background-calendar-goodday-cell); }
.calendar-day.error { background-color: #fff0f1; color: var(--danger-red); cursor: default; border-left-color: transparent; }
.day-number-solar { font-weight: bold; display: block; }
.day-number-lunar { display: block; font-size: 0.8em; color: var(--text-muted); margin-top: 2px; }
.calendar-loading { grid-column: 1 / -1; text-align: center; padding: 20px; color: var(--text-muted); }
.calendar-almanac-icon { position: absolute; bottom: 3px; right: 3px; font-size: 0.8em; color: var(--text-muted); opacity: 0.7; }
.calendar-almanac-icon.good { color: var(--success-green); opacity: 1; }
.calendar-almanac-icon.bad { color: var(--danger-red); opacity: 1; }
.calendar-day-info-area { margin-top: 1rem; padding: 15px; background-color: #f8f9fa; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 0.95em; cursor: pointer; min-height: 60px; transition: background-color 0.2s; }
.calendar-day-info-area:hover { background-color: #e9ecef; }
.calendar-day-info-area p { margin-bottom: 0.3rem; line-height: 1.4; }
.calendar-day-info-area strong { font-weight: 600; color: var(--text-dark); }
.calendar-detail-link { font-size: 0.9em; color: var(--link-color); text-decoration: underline; display: block; text-align: right; margin-top: 5px; }

.image-upload-area { margin-top: 1rem; }
.upload-grid { display: block; width: 100%; max-width: 100%; margin: 0 auto; }
.upload-box { position: relative; border: 2px dashed var(--border-input); border-radius: var(--border-radius-lg); padding: 10px; text-align: center; background-color: #f8f9fa; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; width: 100%; }
.upload-placeholder { color: var(--text-muted); font-size: 0.9em; z-index: 1; }
input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.image-preview { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; margin: 0 auto; object-fit: contain; transform-origin: center center; transition: transform 0.3s ease; }

.upload-box:hover { border-color: var(--primary-blue); background-color: #f0f0f0; }
.upload-box.dragover { border-color: var(--primary-blue); background-color: rgba(13, 110, 253, 0.05); }

.suggested-icon i { transition: transform 0.3s ease; display: inline-block; }
#layout-suggestion-diagram {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr); /* Đảm bảo 3 hàng */
    width: 100%;
    max-width: 450px; /* Hoặc kích thước bạn muốn */
    aspect-ratio: 1 / 1;
    margin: 1rem auto;
    border: 2px solid var(--border-layout-suggestion);
    background-color: var(--background-layout-suggestion);
    border-radius: var(--border-radius);
    /* Bỏ transform rotate ở đây */
}

.suggestion-cell {
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung trong ô */
    padding: 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Bỏ transform rotate ở đây */
}

.suggestion-cell .palace-code {
    font-size: 0.8em; /* Điều chỉnh kích thước chữ nếu cần */
    color: var(--text-muted);
    font-weight: bold;
    margin-bottom: 5px; /* Khoảng cách với icon */
    /* Bỏ transform rotate ở đây */
}

.suggestion-icons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Khoảng cách giữa các icon */
    justify-content: center;
    align-items: center;
    /* Bỏ transform rotate ở đây */
}
.suggested-icon.suggestion-good i {
    color: var(--success-green-dark, #157347);
}
.suggested-icon.suggestion-avoid i {
    color: var(--danger-red-dark, #bb2d3b);
}
/* === CSS ĐỂ DEBUG THỨ TỰ HIỂN THỊ Ô TRONG TINH BÀN ĐỒ === */
/* Thêm viền để dễ nhận biết từng ô */
#flying-star-chart .star-cell {
    border: 1px dashed blue !important; /* Thêm viền xanh cho mỗi ô */
    position: relative; /* Cần thiết để định vị ::before */
}

/* Hiển thị data-palace của từng ô để kiểm tra */
#flying-star-chart .star-cell[data-palace="NW"]::before {
    content: "HTML: NW"; /* Hiển thị mã cung từ data-palace */
    position: absolute;
    top: 2px;
    left: 2px;
    color: navy;
    font-size: 9px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1px 2px;
    border-radius: 2px;
    z-index: 10; /* Đảm bảo hiển thị trên các nội dung khác của ô */
}

/* CSS cho phần hiển thị kết quả Thủy Pháp Tam Hợp */
#tam-hop-analysis-section {
    margin-top: 2rem;
    padding: 15px;
    background-color: #f9f9f9; /* Màu nền nhẹ cho toàn bộ khu vực */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

#tam-hop-analysis-section h3 {
    text-align: center;
    color: var(--primary-blue-dark);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--primary-blue);
    padding-bottom: 0.5rem;
}

.tam-hop-result-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

.tam-hop-result-block h4 {
    font-size: 1.15em; /* To hơn một chút */
    color: var(--text-dark);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    border-bottom: 1px dashed var(--border-highlight);
    padding-bottom: 0.4rem;
}
.tam-hop-result-block h4 i {
    color: var(--primary-blue);
}


.tam-hop-result-block p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.tam-hop-hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 1.5rem 0;
}

.explanation-detail {
    font-size: 0.95em;
    margin-top: 10px;
    padding: 12px;
    border-left-width: 4px;
    border-left-style: solid;
    background-color: var(--background-code); /* Màu nền mặc định */
    border-radius: var(--border-radius);
    border-color: var(--border-highlight); /* Viền mặc định */
}
.explanation-detail h5 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.05em;
    color: var(--text-primary);
}

/* Style cho các mức độ quality (kế thừa từ status-text đã có hoặc định nghĩa mới) */
.explanation-detail.status-very_good { border-left-color: var(--status-wang-border); background-color: var(--status-wang-bg); }
.explanation-detail.status-good { border-left-color: var(--status-sheng-border); background-color: var(--status-sheng-bg); }
.explanation-detail.status-neutral { border-left-color: var(--status-si-border); background-color: var(--status-si-bg); }
.explanation-detail.status-bad { border-left-color: var(--status-tui-border); background-color: var(--status-tui-bg); } /* Ví dụ, bạn có thể đổi màu */
.explanation-detail.status-very_bad { border-left-color: var(--status-sha-border); background-color: var(--status-sha-bg); }


.keywords {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-style: italic;
}

.overall-assessment-block .status-text {
    font-size: 1.3em; /* To hơn cho đánh giá tổng thể */
    padding: 5px 10px;
    border-radius: var(--border-radius);
    border: 1px solid;
    display: inline-block;
}
.overall-assessment-block .status-text.very_good { border-color: var(--status-wang-border); background-color: var(--status-wang-bg); color: var(--status-wang-color); }
.overall-assessment-block .status-text.good { border-color: var(--status-sheng-border); background-color: var(--status-sheng-bg); color: var(--status-sheng-color); }
/* ... thêm cho neutral, bad, very_bad nếu cần màu nền riêng cho phần này ... */


.notes-block h5 {
    font-size: 1.05em;
    color: var(--primary-blue);
}
.tam-hop-notes-list {
    font-size: 0.9em;
    color: var(--text-muted);
    list-style-type: disc;
    padding-left: 20px;
}
.tam-hop-notes-list li {
    margin-bottom: 5px;
}

.error-block {
    border-left: 5px solid var(--danger-red);
    background-color: var(--wuxing-hoa); /* Màu nền đỏ nhạt */
    padding: 15px;
    border-radius: var(--border-radius);
}
.error-block h4 i {
    color: var(--danger-red-dark);
}
.error-block .error-text {
    color: var(--danger-red-dark);
    font-weight: normal;
}

.suggestion-cell:hover { background-color: rgba(0, 0, 0, 0.03); }
#layout-suggestion-diagram { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; max-width: 450px; aspect-ratio: 1 / 1; margin: 1rem auto; border: 2px solid var(--border-layout-suggestion); background-color: var(--background-layout-suggestion); transform-origin: center center; position: relative; border-radius: var(--border-radius); transition: transform 0.5s ease-out; }
.suggested-icon[data-suggestion-type="good"] { color: #28a745; border-color: #28a745; }
.suggested-icon[data-suggestion-type="bad"] { color: #dc3545; border-color: #dc3545; }
.suggestion-good .suggested-icon { color: var(--suggestion-good-text); text-shadow: 0 0 5px rgba(25, 135, 84, 0.2); }
.suggestion-avoid .suggested-icon { color: var(--suggestion-avoid-text); text-shadow: 0 0 5px rgba(220, 53, 69, 0.2); opacity: 0.7; }
.suggestion-good .suggested-icon:hover { transform: scale(1.2); text-shadow: 0 0 8px rgba(25, 135, 84, 0.3); }
.suggested-icon:hover { background-color: #f0f0f0; }
.suggestion-avoid .suggested-icon:hover { transform: scale(1.1); text-shadow: 0 0 8px rgba(220, 53, 69, 0.3); }
.suggested-icon .icon-label { font-size: 0.8em; }

.results { grid-column: 3 / 4; padding: 25px; background-color: var(--background-results); border-radius: var(--border-radius); overflow-y: auto; max-height: calc(100vh - 100px); }
.result-summary p { margin-bottom: 0.6rem; font-size: 0.95em; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;}
.result-summary strong { color: var(--text-dark); min-width: 150px; display: inline-flex; align-items: center; gap: 0.4em;}
.result-summary strong i { color: var(--primary-blue); width: 1.2em; }
#result-bat-trach-info strong i { color: var(--purple-mid) !important; }
#result-bat-trach-info .dong-tu { color: var(--success-green-dark); font-weight: bold; }
#result-bat-trach-info .tay-tu { color: var(--primary-blue-dark); font-weight: bold; }
.result-summary span { font-weight: 500; }
.result-summary .clickable-mansion { color: var(--link-color); text-decoration: underline; cursor: pointer; }
.result-summary .mansion-prop { font-style: italic; font-size: 0.9em; padding: 1px 4px; border-radius: 3px; border: 1px solid; }
.result-summary .mansion-prop.good { background-color: var(--wuxing-moc); color: var(--success-green-dark); border-color: var(--success-green); }
.result-summary .mansion-prop.bad { background-color: var(--wuxing-hoa); color: var(--danger-red-dark); border-color: var(--danger-red); }
.result-summary .mansion-prop.neutral { background-color: var(--wuxing-kim); color: var(--neutral-gray); border-color: var(--border-highlight); }

.result-hexagram, .overall-assessment { padding: 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #f8f9fa; margin-bottom: 1.5rem; }
.result-hexagram.clickable { cursor: pointer; transition: background-color 0.2s; }
.result-hexagram.clickable:hover { background-color: #e9ecef; }
.result-hexagram h3, .overall-assessment h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1.3em; border-bottom: none; }
.hexagram-title { font-size: 1.1em; margin-bottom: 0.3em; display: flex; align-items: center; justify-content: center; gap: 0.5em; }
#hexagram-info-display { padding: 5px; text-align: center; }
.overall-assessment h4 { font-size: 1.1em; margin-top: 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid #ddd; padding-bottom: 3px; color: var(--text-dark); gap: 0.5em; }
.overall-assessment p { margin-bottom: 0.6rem; font-size: 0.95em; line-height: 1.5; }
.overall-assessment .good { color: var(--success-green-dark); font-weight: 500; }
.overall-assessment .bad { color: var(--danger-red-dark); font-weight: 500; }
.overall-assessment .warning-text { color: var(--danger-red-dark); font-weight: bold; font-size: 0.95em; }
.overall-assessment .warning-text i { color: var(--danger-red); }

.dong-tho-analysis-container { margin-top: 2rem; background-color: var(--background-dongtho-section); padding: 15px; border: 1px solid var(--border-dongtho-section); border-radius: var(--border-radius-lg); }
.dong-tho-analysis-container h3 { text-align: center; border-bottom: none; margin-bottom: 1rem; gap: 0.5em; }
#dong-tho-age-selection-area { margin-bottom: 1rem; padding: 10px; background-color: var(--background-dongtho-ages); border: 1px solid var(--border-dongtho-ages); border-radius: var(--border-radius); }
.dong-tho-controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 0.5rem; }
.dong-tho-controls-grid label { font-size: 0.9em; margin-bottom: 3px; gap: 0.4em; }
.dong-tho-controls-grid select, .dong-tho-controls-grid input { font-size: 0.95em; padding: 0.5rem 0.8rem; }
#dong-tho-selected-age-info p { font-size: 0.9em; margin: 0.5rem 0 0 0; text-align: center; font-style: italic; }
#dong-tho-month-list-container { background-color: var(--background-dongtho-month-list); padding: 10px; border: 1px solid var(--border-dongtho-month-list); border-radius: var(--border-radius); min-height: 50px; }
#dong-tho-month-list-container p { margin-bottom: 0.5rem; font-weight: 500; }
ul.dong-tho-month-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
li.dong-tho-month-item { padding: 8px 5px; text-align: center; border: 1px solid var(--border-color); border-radius: var(--border-radius); cursor: pointer; font-size: 0.9em; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
li.dong-tho-month-item:hover { background-color: #e9ecef; border-color: var(--border-highlight); }
li.dong-tho-month-item.leap { font-style: italic; border-left: 3px solid var(--primary-blue); }
li.month-very_good { background-color: var(--quality-very_good-bg); color: var(--quality-very_good-color); border-color: var(--quality-very_good-border); font-weight: bold; }
li.month-good { background-color: var(--quality-good-bg); color: var(--quality-good-color); border-color: var(--quality-good-border); }
li.month-neutral { background-color: var(--quality-neutral-bg); color: var(--quality-neutral-color); border-color: var(--quality-neutral-border); }
li.month-bad { background-color: var(--quality-bad-bg); color: var(--quality-bad-color); border-color: var(--quality-bad-border); }
li.month-very_bad { background-color: var(--quality-very_bad-bg); color: var(--quality-very_bad-color); border-color: var(--quality-very_bad-border); font-weight: bold; }
li.dong-tho-month-item.error { color: var(--danger-red); border-color: var(--danger-red); background-color: var(--quality-bad-bg); cursor: default; }
li.dong-tho-month-item.error:hover { background-color: var(--quality-bad-bg); }

/* === Modal Styles === */
.modal {
    display: none;
    position: fixed;
    z-index: 10000 !important; /* TĂNG Z-INDEX VÀ THÊM !IMPORTANT */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--modal-backdrop-color);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal[style*="display: block"] { display: block !important; }
.modal-content { background-color: var(--background-modal); margin: 5% auto; padding: 25px 30px; border: 1px solid var(--border-highlight); width: 85%; max-width: 800px; border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-modal); position: relative; /* Đổi thành relative để JS có thể đặt left/top khi kéo */ cursor: grab; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(-20px); transition: transform 0.3s ease; }
.modal-content h2 { margin-top: 0; margin-bottom: 1.5rem; text-align: left; border-bottom: 1px solid var(--border-color); padding-bottom: 0.8rem; font-size: 1.6em; display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; cursor: grab; }
.modal-content h2 i { color: var(--primary-blue); }
.close-button { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; line-height: 1; cursor: pointer; transition: color 0.2s ease; background: none; border: none; padding: 0; z-index: 1; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; }
.explanation-content { flex-grow: 1; overflow-y: auto; padding-right: 10px; }
.modal-error p { color: var(--danger-red-dark); font-weight: bold; text-align: center; }
.interpretation-tabs { border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; }
.interpretation-tab { background-color: transparent; border: none; border-bottom: 3px solid transparent; padding: 0.8rem 1rem; cursor: pointer; font-size: 1em; color: var(--text-muted); transition: all 0.2s ease; gap: 0.5em; display: inline-flex; align-items: center;}
.interpretation-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); font-weight: 600; }
.interpretation-tab:hover:not(.active):not(:disabled) { color: var(--primary-blue-dark); border-bottom-color: #cdeaff; }
.interpretation-tab:disabled { color: #adb5bd; cursor: not-allowed; }
.interpretation-content-sections { position: relative; }
.interpretation-section { display: none; }
.interpretation-section.active { display: block; animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.interpretation-note { margin-top: 1.5rem; font-size: 0.9em; color: var(--text-muted); border-top: 1px dashed var(--border-highlight); padding-top: 1rem; flex-shrink: 0; }
.interpretation-note strong { color: var(--text-primary); }

.interpretation-tab[data-tab="thuy-phap"] i { color: #17a2b8; }
#content-thuy-phap ul, .thuy-phap-lai-bo-y-results ul { list-style: none; padding-left: 0; }
#content-thuy-phap li, .thuy-phap-lai-bo-y-results .thuy-phap-item-result { border: 1px solid #e0e0e0; border-radius: var(--border-radius); padding: 10px; margin-bottom: 10px; background-color: #f9f9f9; }
#content-thuy-phap li h5, .thuy-phap-lai-bo-y-results h5 { margin-top: 0; margin-bottom: 8px; font-size: 1.1em; color: var(--primary-blue-dark); display: flex; align-items: center; gap: 0.4em; }
#content-thuy-phap li strong, .thuy-phap-lai-bo-y-results strong { font-weight: 600; }
#content-thuy-phap .keywords, .thuy-phap-lai-bo-y-results .keywords { font-size: 0.9em; color: var(--text-muted); margin-bottom: 8px; }
#content-thuy-phap .vts-quality, .thuy-phap-lai-bo-y-results .vts-quality { font-weight: bold; padding: 1px 4px; border-radius: var(--border-radius); margin-left: 5px; font-size: 0.9em; border: 1px solid; display: inline-block; }
.vts-quality.good, .vts-quality.very_good { background-color: var(--quality-good-bg); color: var(--quality-good-color); border-color: var(--quality-good-border); }
.vts-quality.bad, .vts-quality.very_bad { background-color: var(--quality-bad-bg); color: var(--quality-bad-color); border-color: var(--quality-bad-border); }
.vts-quality.neutral, .vts-quality.binh { background-color: var(--quality-neutral-bg); color: var(--quality-neutral-color); border-color: var(--quality-neutral-border); }
.thuy-phap-lai-bo-y-results .vts-explanation p { margin-bottom: 0.5em; line-height: 1.5; }
.thuy-phap-lai-bo-y-results .vts-explanation ul { margin-top: 0.5em; padding-left: 1.5em; }
.thuy-phap-lai-bo-y-results .vts-explanation li { border: none; padding: 0; margin-bottom: 0.3em; background-color: transparent; }

.tab-content { padding: 15px; background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.info-message { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f8f9fa; border-left: 4px solid #17a2b8; border-radius: 4px; color: #495057; }
.info-message i { font-size: 1.2em; color: #17a2b8; }
.loading-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #6c757d; font-style: italic; }
.loading-placeholder i { color: #17a2b8; }
@keyframes spin { to { transform: rotate(360deg); } }
.fa-spin { animation: spin 1s linear infinite; }

/* Layout Analysis Modal - cũng cần z-index cao */
.layout-analysis-modal {
    display: none;
    position: fixed;
    z-index: 10000 !important; /* TĂNG Z-INDEX VÀ THÊM !IMPORTANT */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Nên dùng var(--modal-backdrop-color) */
}
.layout-analysis-modal .modal-content {
    background-color: #fff; /* var(--background-modal) */
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888; /* var(--border-highlight) */
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative; /* Đổi thành relative */
    border-radius: 8px; /* var(--border-radius-lg) */
    /* Các style khác như box-shadow, cursor đã có ở .modal-content chung */
}
.layout-analysis-modal .close-button { position: absolute; right: 10px; top: 10px; font-size: 28px; font-weight: bold; cursor: pointer; }
.layout-analysis-modal .modal-title { margin-top: 0; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.layout-analysis-modal .analysis-section { margin: 15px 0; }
.layout-analysis-modal .analysis-section h3 { color: #2c3e50; margin-bottom: 10px; }
.layout-analysis-modal .analysis-section ul { margin-left: 20px; margin-bottom: 15px; }
.layout-analysis-modal .analysis-section li { margin-bottom: 5px; }
.phi-tinh-analysis-section h4, .phi-tinh-analysis-section h5 { margin-top: 1rem; margin-bottom: 0.5rem; border-bottom: 1px dashed var(--border-highlight); padding-bottom: 0.3rem; }
.star-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.star-item { padding: 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #fdfdfd; }
.star-item h5 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05em; border-bottom: none; padding-bottom: 0; }
.star-value { font-weight: bold; }
.star-interpretation { font-size: 0.9em; color: var(--text-muted); line-height: 1.4; }
.interaction-section, .pair-interpretation-section, .phi-tinh-conclusion { margin-top: 1rem; }
.phi-tinh-conclusion p { font-weight: 500; }

#gia-chu-name { width: 100%; padding: 6px 12px; border: 1px solid #ced4da; border-radius: 4px; margin-bottom: 10px; }
#gia-chu-name:focus { border-color: var(--primary-blue); outline: none; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }
.text-good { color: var(--success-green-dark); font-weight: bold; }
.text-bad { color: var(--danger-red-dark); font-weight: bold; }
.text-warning { color: var(--warning-orange-dark); font-style: italic; }
.text-good-secondary { color: var(--success-green); font-style: italic; }

@media print {
    .print-section { display: block !important; page-break-after: always; }
    body { padding: 0; background-color: #fff; font-size: 15pt !important; color: #000; font-family: 'Times New Roman', serif; line-height: 1.6 !important; margin: 1.9cm !important; }
    .no-print { display: none !important; }
    .container { display: block !important; grid-template-columns: 1fr !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
    .controls, .visualization, .modal { display: none !important; }
    .results { grid-column: 1 / -1 !important; padding: 0 !important; border: none !important; background-color: #fff !important; max-height: none !important; overflow: visible !important; }
    h1, h2, h3, h4, h5, h6 { color: #000 !important; page-break-after: avoid !important; font-family: 'Times New Roman', serif; margin-top: 1em !important; margin-bottom: 0.5em !important; font-weight: bold !important; }
    h1 { font-size: 24pt !important; text-align: center !important; margin-bottom: 1.5em !important; }
    h2 { font-size: 18pt !important; border-bottom: 1px solid #333 !important; padding-bottom: 0.3em !important; }
    h3 { font-size: 16pt !important; }
    h4 { font-size: 15pt !important; font-style: normal !important; border-bottom: none !important; }
    h5 { font-size: 14pt !important; }
    h6 { font-size: 13pt !important; }
    p, li { margin-top: 0.3em !important; margin-bottom: 0.3em !important; line-height: 1.5 !important; font-size: 15pt !important; }
    .detailed-pair-interpretation ul li, .single-star-interpretation ul li, .bad-day-warnings-list li, .vts-explanation ul li, #content-bat-trach ul li, .loan-dau-palace-analysis ul li, .thuy-phap-lai-bo-y-results ul li, .daily-almanac-detail ul li, .dong-tho-month-detail ul li { font-size: 14pt !important; margin-bottom: 0.1em !important; }
    hr { border: 0; border-top: 1px dashed #ccc; margin: 1em 0 !important; }
    .print-page-break { page-break-before: always !important; }
    .status-text, .nap-am, .mansion-prop, .du-nien-name, .dong-tho-month-item, .formation-tag { background: none !important; border: none !important; padding: 0 !important; font-style: normal !important; display: inline !important; margin: 0 2px !important; color: #000 !important; font-weight: normal !important; font-size: 14pt !important; }
    .status-text.very_good, .status-text.good, .du-nien-name.very_good, .du-nien-name.good, .mansion-prop.good, li.month-very_good, li.month-good { font-weight: bold !important; }
    .status-text.very_bad, .status-text.bad, .du-nien-name.very_bad, .du-nien-name.bad, .mansion-prop.bad, li.month-very_bad, li.month-bad { font-weight: bold !important; }
    .nap-am { font-style: italic !important; }
    .clickable-mansion { text-decoration: none !important; }
    i.fa-solid, i.fas, i.fa-regular, i.far { display: none !important; }
    .bad-day-warnings-list { padding-left: 1.5em !important; list-style-type: disc !important; margin-top: 0.5em !important; }
    .bad-day-warnings-list li { margin-bottom: 0.2em !important; font-size: 14pt !important; }
    .bad-day-warnings-list li strong { font-weight: bold !important; }
    .detailed-pair-interpretation, .single-star-interpretation, .loan-dau-palace-analysis, .thuy-phap-item-result { border: 1px solid #eee !important; margin-top: 0.8em !important; padding: 0.8em !important; page-break-inside: avoid; background-color: #f9f9f9 !important; box-shadow: none !important; }
    .single-star-interpretation.very_good, .single-star-interpretation.good { border-left: 4px solid #28a745 !important; }
    .single-star-interpretation.very_bad, .single-star-interpretation.bad { border-left: 4px solid #dc3545 !important; }
    .single-star-interpretation.neutral, .single-star-interpretation.tui { border-left: 4px solid #6c757d !important; }
    .vts-quality { font-size: 14pt !important; }
    .image-preview-container-print { display: block !important; opacity: 1 !important; border: 1px solid #ccc !important; margin-top: 1em !important; margin-bottom: 1em !important; max-width: 95% !important; margin-left: auto !important; margin-right: auto !important; page-break-inside: avoid !important; text-align: center !important; background-color: #fff !important; box-shadow: none !important; }
    .image-preview-container-print p { font-size: 12pt !important; font-style: italic !important; text-align: center !important; margin-top: 0.5em !important; margin-bottom: 0 !important; }
    .image-preview-print { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; }
    button.clear-button.no-print { display: none !important; }
    ul.dong-tho-month-list { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 5px !important; padding: 0 !important; list-style: none !important; margin-top: 0.5em !important; }
    li.dong-tho-month-item { border: 1px solid #ccc !important; padding: 5px !important; font-size: 12pt !important; text-align: center !important; page-break-inside: avoid !important; margin-bottom: 0 !important; border-radius: 3px !important; color: #000 !important; font-weight: normal !important; background: none !important; border-left: 1px solid #ccc !important; }
    li.dong-tho-month-item.leap { font-style: italic !important; border-left: 3px solid #0d6efd !important; }
    li.month-very_good { border-left-color: #28a745 !important; }
    li.month-good { border-left-color: #20c997 !important; }
    li.month-bad { border-left-color: #dc3545 !important; }
    li.month-very_bad { border-left-color: #8B0000 !important; }
}

.print-options-content { max-width: 600px; padding: 20px; }
.print-mode-section { margin-bottom: 15px; }
#print-section-checkboxes { margin-left: 20px; padding: 10px; border-left: 3px solid #eee; }
.print-options-form label { display: block; margin-bottom: 8px; cursor: pointer; }
.modal-buttons { margin-top: 20px; text-align: center; }
.modal-buttons button { margin: 0 10px; min-width: 120px; }
.print-confirm-btn { background-color: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.print-cancel-btn { background-color: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }

.dong-tho-month-detail h3, .dong-tho-month-detail h4, .dong-tho-month-detail h5 { margin-top: 1rem; margin-bottom: 0.5rem; }
.dong-tho-month-detail h4 i, .dong-tho-month-detail h5 i { margin-right: 0.4em; color: var(--primary-blue); }
.dong-tho-month-detail ul { list-style: disc; padding-left: 20px; margin-bottom: 1rem; }
.dong-tho-month-detail ul li { margin-bottom: 0.3rem; }
.dong-tho-month-detail .points { font-style: italic; color: var(--text-muted); font-size: 0.9em; }
.dong-tho-summary-score { font-size: 1.2em; text-align: center; margin-bottom: 1rem; padding: 10px; background-color: #f0f8ff; border-radius: var(--border-radius); }
.dong-tho-final-note { margin-top: 1.5rem; font-style: italic; color: var(--text-muted); font-size: 0.9em; border-top: 1px dashed var(--border-color); padding-top: 1rem; }
.dong-tho-month-detail #additional-info-section h5 { color: var(--success-green-dark); }
.dong-tho-month-detail #additional-info-section ul { background-color: #f9f9f9; padding: 10px; border-radius: var(--border-radius); }

/* --- Định Nghĩa Animation Dòng Chảy Cơ Bản --- */
@keyframes water-flow-animation-base {
    to {
        stroke-dashoffset: -1000;
    }
}

/* --- Style Chung Cho Các Đường Dòng Chảy --- */
/* Bạn có thể thêm các style chung cho tất cả các path ở đây nếu cần */
.water-flow-path {
    fill: none;
    stroke-linecap: round;
    stroke-width: 9px;
    opacity: 3;
}

/* --- Style và Animation cho Từng Loại Dòng Chảy --- */

/* 1. Dòng Chảy Mạnh (Lai/Khu - VERY_GOOD hoặc GOOD) */
.water-flow-animated-strong {
    stroke-dasharray: 25 8; /* Nét dài, khoảng trống vừa -> cảm giác mạnh mẽ */
    animation: water-flow-animation-base 1.2s linear infinite;
}
.water-flow-animated-strong-khu { /* Có thể giống hệt hoặc tùy chỉnh nếu muốn khác */
    stroke-dasharray: 25 8;
    animation: water-flow-animation-base 1.2s linear infinite;
}

/* 2. Dòng Chảy Bình Thường (Lai/Khu - GOOD hoặc NEUTRAL) */
.water-flow-animated-normal {
    stroke-dasharray: 18 10;
    animation: water-flow-animation-base 1.8s linear infinite;
}
.water-flow-animated-normal-khu {
    stroke-dasharray: 18 10;
    animation: water-flow-animation-base 1.8s linear infinite;
}

/* 3. Dòng Chảy Nhẹ Nhàng (Lai/Khu - NEUTRAL) */
.water-flow-animated-gentle {
    stroke-dasharray: 12 12; /* Nét và khoảng trống cân bằng */
    animation: water-flow-animation-base 2.5s linear infinite;
}
.water-flow-animated-gentle-khu {
    stroke-dasharray: 12 12;
    animation: water-flow-animation-base 2.5s linear infinite;
}

/* 4. Dòng Chảy Yếu (Lai/Khu - BAD) */
.water-flow-animated-weak {
    stroke-dasharray: 7 15; /* Nét ngắn, khoảng trống dài -> cảm giác yếu */
    animation: water-flow-animation-base 3s linear infinite;
}
.water-flow-animated-weak-khu {
    stroke-dasharray: 7 15;
    animation: water-flow-animation-base 3s linear infinite;
}

/* 5. Dòng Chảy Rất Yếu/Tù Đọng (Lai - VERY_BAD) */
.water-flow-animated-very-weak {
    stroke-dasharray: 4 18; /* Nét rất ngắn, khoảng trống rất dài */
    animation: water-flow-animation-base 4s linear infinite;
    /* Có thể thêm opacity thấp hơn cho path này trong water_flow_styles.js */
}

/* 6. Dòng Chảy Hỗn Loạn (Khu - VERY_BAD) */
.water-flow-animated-chaotic-khu {
    stroke-dasharray: 3 7 6 4 2 5; /* Mẫu phức tạp, không đều */
    animation: water-flow-animation-base 2.8s linear infinite alternate;
    /* `alternate` làm cho animation chạy tới rồi chạy lui, có thể tạo cảm giác hỗn loạn hơn */
}

/* --- Style cho SVG Container (Giữ Nguyên) --- */
#water-flow-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Để click xuyên qua */
    z-index: 100000 !important;/* Đảm bảo nằm trên các vòng La Bàn khác, dưới các element tương tác cao hơn */
    overflow: visible; /* Để marker và filter không bị cắt */
}
/* --- Animation Keyframes for Water Flow --- */
@keyframes water-flow-animation-base {
    to {
        /* Di chuyển stroke-dashoffset để tạo cảm giác dòng chảy */
        stroke-dashoffset: -1000; /* Giá trị âm lớn để đảm bảo chuyển động liên tục */
    }
}

/* --- Style Chung Cho Các Đường Dòng Chảy (Lai/Khứ Thủy) --- */
.water-flow-path {
    fill: none; /* Dòng nước không có màu nền */
    stroke-linecap: round; /* Đầu nét bo tròn */
    /* Màu sắc, độ dày, nét đứt, opacity, filter, marker được đặt bởi JS dựa trên WATER_FLOW_STYLES */
    transition: opacity 0.4s ease-in-out, stroke 0.4s ease-in-out, stroke-width 0.3s ease-in-out;
    /* Animation được áp dụng bởi JS thông qua animationClass */
}

/* --- Animation cho Tốc độ Dòng Chảy --- */
/* Các class này được gán cho path từ JS */
.water-flow-animated-strong {
    animation-name: water-flow-animation-base;
    animation-duration: 1.2s; /* Nhanh */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.water-flow-animated-normal {
    animation-name: water-flow-animation-base;
    animation-duration: 1.8s; /* Vừa */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.water-flow-animated-gentle {
     animation-name: water-flow-animation-base;
     animation-duration: 2.5s; /* Chậm */
     animation-timing-function: linear;
     animation-iteration-count: infinite;
}
.water-flow-animated-weak {
     animation-name: water-flow-animation-base;
     animation-duration: 3s; /* Rất chậm */
     animation-timing-function: linear;
     animation-iteration-count: infinite;
}
.water-flow-animated-very-weak {
     animation-name: water-flow-animation-base;
     animation-duration: 4s; /* Cực chậm, gần như tù đọng */
     animation-timing-function: linear;
     animation-iteration-count: infinite;
}
.water-flow-animated-chaotic-khu {
     animation-name: water-flow-animation-base;
     animation-duration: 2.8s; /* Tốc độ vừa */
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate; /* Chạy tới lui tạo cảm giác bất ổn */
}


/* ================================= */
/* === WIND EFFECT STYLES & ANIMATIONS === */
/* ================================= */

/* --- Animation Keyframes for Wind Flow --- */
/* Đây là animation làm cho các nét đứt (stroke-dasharray) di chuyển. */
/* Tốc độ (animation-duration) sẽ được định nghĩa trong các class cụ thể bên dưới. */
@keyframes wind-blowing-animation {
    to {
        /* Di chuyển stroke-dashoffset một lượng lớn để animation chạy liên tục.
           Giá trị âm làm cho nét đứt di chuyển theo chiều của path. */
        stroke-dashoffset: 999; /* Giá trị này cần đủ lớn để đảm bảo nét đứt di chuyển hết chiều dài path trong 1 chu kỳ nếu path dài. */
    }
}

/* --- Style Chung Cho Các Đường Hiệu Ứng Gió --- */
/* Class này được gán cho tất cả các <path> gió. */
.wind-effect-path {
    fill: none; /* Quan trọng: Gió không có màu nền */
    stroke-linecap: round; /* Đầu nét bo tròn mềm mại */
    /* Màu sắc (stroke), độ dày (stroke-width), kiểu nét đứt (stroke-dasharray),
       độ trong suốt (opacity), filter (filter="url(#...)") sẽ được đặt động
       trực tiếp trên phần tử <path> bởi JavaScript dựa trên WIND_EFFECT_STYLES. */
    /* Transition cho sự thay đổi style (nếu có) */
    transition: opacity 0.4s ease-in-out, stroke 0.4s ease-in-out, stroke-width 0.3s ease-in-out;

    /* Áp dụng animation chung, nhưng duration và timing function sẽ bị ghi đè bởi các class cụ thể */
    animation-name: wind-blowing-animation;
    animation-timing-function: linear; /* Thường dùng linear cho hiệu ứng dòng chảy đều */
    animation-iteration-count: infinite; /* Lặp vô hạn */
    /* animation-delay được đặt bởi JS để các đường không chạy đồng bộ */
}

/* --- Style Riêng cho Tốc độ Animation của từng loại Gió --- */
/* Các class này được lấy từ `animationClass` trong WIND_EFFECT_STYLES */

.wind-blowing-gentle {
    animation-duration: 4s; /* Animation chậm -> gió nhẹ */
}

.wind-blowing-moderate {
    animation-duration: 2.5s; /* Animation tốc độ trung bình */
}

.wind-blowing-strong {
    animation-duration: 1.5s; /* Animation nhanh -> gió mạnh */
}

/* .wind-swirl-effect { ... } Nếu bạn có style animation riêng cho gió xoáy (chưa dùng trong ví dụ) */


/* --- Style cho Markers (Mũi Tên) --- */
/* Marker được định nghĩa trong <defs> của SVG. */
/* Các style này chỉ cần thiết nếu bạn muốn style bổ sung cho các path bên trong marker,
   hoặc để ẩn chúng khi in. Màu fill/stroke của mũi tên thường được định nghĩa trực tiếp trong <defs>. */

/* Ẩn mũi tên gió VÀ dòng nước trong chế độ in */
@media print {
    #water-flow-svg-overlay marker {
        display: none !important;
    }
    /* Đảm bảo các path gió và dòng nước cũng ẩn khi in */
    #water-flow-svg-overlay .wind-effect-path,
    #water-flow-svg-overlay .water-flow-path {
        display: none !important;
    }
    /* Nếu bạn muốn in các đường, hãy loại trừ class này khỏi quy tắc ẩn */
    /* .print-section #water-flow-svg-overlay .wind-effect-path { display: block !important; } */
}

/* Style cho Bảng Chọn Icon Loan Đầu */
#loan-dau-icon-palette-container {
    margin-bottom: 1rem;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #f9f9f9;
}

.ld-palette-icon {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
    background-color: #fff;
}

.ld-palette-icon i {
    font-size: 1.5em; /* Kích thước icon */
    margin-bottom: 4px;
    margin-right: 0; /* Reset margin từ rule chung của icon */
    color: var(--primary-blue);
}

.ld-palette-icon:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.ld-palette-icon.selected {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue-dark);
    font-weight: bold;
}
/* === KHU VỰC TẢI ẢNH LOAN ĐẦU (ĐÃ CẬP NHẬT) === */
/* ============================================= */

/* === KHỐI CSS MỚI - THAY THẾ TOÀN BỘ CÁC QUY TẮC CŨ === */
/* ========================================================= */

.upload-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    min-width: 250px;
    min-height: 250px;
    padding: 10px;
    /* QUAN TRỌNG: Đảm bảo nó là hình vuông để vòng tròn nội tiếp đúng */
    aspect-ratio: 1 / 1; 
}

/* Định dạng chung cho vòng tròn */
.inscribed-circle {
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Vòng tròn ngoài (100%) */
.outer-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* JS sẽ tính width/height */
}

/* Vòng tròn trong (70% của vòng ngoài) */
.inner-circle {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    /* JS sẽ tính width/height */
}
/* Container chứa ảnh (100% của vòng trong) */
.image-preview-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: none; /* Ban đầu ẩn đi */
    justify-content: center;
    align-items: center;
    cursor: crosshair;
    position: relative;
    z-index: 10; /* Cao hơn la bàn để nhận click */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}
/* Label và nút xóa cần position: absolute để nằm đè lên */
.upload-label, .clear-button {
    position: absolute;
    z-index: 20;
}

/* --- LỚP PHỦ BÁT QUÁI --- */

.bat-quai-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Đường kẻ chéo */
.bat-quai-overlay::before,
.bat-quai-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; 
    height: 1px; 
    background-color: rgba(0, 0, 0, 0.2);
    transform-origin: center;
}
.bat-quai-overlay::before { transform: translate(-50%, -50%) rotate(45deg); }
.bat-quai-overlay::after { transform: translate(-50%, -50%) rotate(135deg); }

/* Đường kẻ ngang và dọc */
.bat-quai-overlay .line {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
}
.bat-quai-overlay .line.vertical { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.bat-quai-overlay .line.horizontal { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }

/* Nhãn tên cung */
.bat-quai-overlay .palace-label {
    position: absolute;
    color: rgba(0, 0, 0, 0.7);
    font-size: 11px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1px 4px;
    border-radius: 3px;
}
/* Vị trí các nhãn tên cung (Bắc trên, Nam dưới) */
.palace-label.n { top: 3%; left: 50%; transform: translateX(-50%); }
.palace-label.s { bottom: 3%; left: 50%; transform: translateX(-50%); }
.palace-label.e { top: 50%; right: 3%; transform: translateY(-50%); }
.palace-label.w { top: 50%; left: 3%; transform: translateY(-50%); }
.palace-label.ne { top: 19%; right: 19%; }
.palace-label.nw { top: 19%; left: 19%; }
.palace-label.se { bottom: 19%; right: 19%; }
.palace-label.sw { bottom: 19%; left: 19%; }

/* --- CÁC MỐC ĐỘ SỐ (ĐÃ SỬA) --- */

/* ======================================================== */
/* === CSS CUỐI CÙNG CHO CÁC MỐC ĐỘ SỐ VÀ NHÃN BÁT QUÁI === */
/* ======================================================== */

/* Lớp phủ chứa tất cả các nhãn */
.bat-quai-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Các đường kẻ chia cung */
.bat-quai-overlay::before,
.bat-quai-overlay::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); transform-origin: center;
}
.bat-quai-overlay::before { transform: translate(-50%, -50%) rotate(45deg); }
.bat-quai-overlay::after { transform: translate(-50%, -50%) rotate(135deg); }
.bat-quai-overlay .line { position: absolute; background-color: rgba(0, 0, 0, 0.2); }
.bat-quai-overlay .line.vertical { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.bat-quai-overlay .line.horizontal { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }

/* Nhãn tên cung */
.bat-quai-overlay .palace-label {
    position: absolute; color: rgba(0, 0, 0, 0.7); font-size: 11px; font-weight: 500; background-color: rgba(255, 255, 255, 0.6); padding: 1px 4px; border-radius: 3px;
}
.palace-label.n { top: 3%; left: 50%; transform: translateX(-50%); }
.palace-label.s { bottom: 3%; left: 50%; transform: translateX(-50%); }
.palace-label.e { top: 50%; right: 3%; transform: translateY(-50%); }
.palace-label.w { top: 50%; left: 3%; transform: translateY(-50%); }
.palace-label.ne { top: 19%; right: 19%; }
.palace-label.nw { top: 19%; left: 19%; }
.palace-label.se { bottom: 19%; right: 19%; }
.palace-label.sw { bottom: 19%; left: 19%; }

/* --- CSS CHO CÁC MỐC ĐỘ SỐ (ĐÃ SỬA HOÀN CHỈNH) --- */

/* === CSS CHO LA BÀN TRONG KHU VỰC TẢI ẢNH (BẢN CẬP NHẬT ĐẦY ĐỦ) === */
/* ===================================================================== */
/* Hướng dẫn: Xóa toàn bộ các quy tắc CSS cũ cho .upload-box, .bat-quai-overlay, 
   .palace-label, .degree-markers và thay thế bằng khối này.
*/

.image-upload-area { 
    margin-top: 1rem; 
}

.upload-grid {
    display: block;
    width: 100%;
    max-width: 100%; /* Hoặc một giá trị cố định nếu muốn */
    margin: 0 auto;
}

/* 1. Container chính của ô tải ảnh */
.upload-box {
    position: relative;
    border: 2px dashed var(--border-input);
    border-radius: var(--border-radius-lg);
    padding: 10px;
    text-align: center;
    background-color: #f8f9fa;
    aspect-ratio: 1 / 1; /* Rất quan trọng: Giữ cho ô luôn vuông */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ẩn các phần thừa ra ngoài */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.upload-box:hover {
    border-color: var(--primary-blue);
}

/* 2. Label và Input tải file */
.upload-box .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 100; /* Luôn nằm trên cùng để nhận click */
}

.upload-box .upload-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    z-index: 1; /* Nằm dưới input file */
    transition: opacity 0.3s;
}

.upload-box.has-image .upload-label {
    opacity: 0;
    pointer-events: none;
}

.upload-box .upload-label i {
    font-size: 2em;
}

/* 3. Vòng tròn ngoài cùng (khung la bàn phụ) */
.upload-box .outer-circle {
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--la-pan-border-color);
    background: radial-gradient(circle at 60% 40%, #f7f9fc 70%, #e9edf3 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08), inset 0 1px 3px rgba(0,0,0,0.05);
}

/* 4. Container chứa tất cả các vòng la bàn chi tiết */
.upload-box .upload-compass-rings-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Cho phép click xuyên qua */
    z-index: 5;
}

/* 5. Style chung cho các vòng la bàn bên trong */
.upload-box .degree-ring-container,
.upload-box .mountain-ring-container,
.upload-box .truong-sinh-ring-container,
.upload-box .lunar-mansion-ring-container,
.upload-box .hexagram-ring-container,
.upload-box .trigram-lines-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Mặc định không cho tương tác */
}

/* Cho phép tương tác với vòng 24 Sơn trên la bàn phụ */
.upload-box .mountain-ring-container {
    pointer-events: auto;
}

/* 6. Điều chỉnh kích thước tương đối của các vòng cho la bàn phụ */
.upload-box .degree-ring-container { transform: scale(0.98); }
.upload-box .mountain-ring-container { transform: scale(1.0); }
.upload-box .lunar-mansion-ring-container { transform: scale(0.92); }
.upload-box .hexagram-ring-container { transform: scale(1.0); }
.upload-box .truong-sinh-ring-container { transform: scale(0.85); }
.upload-box .trigram-lines-container { z-index: 6; } /* Nằm trên nền màu */

/* 7. Điều chỉnh font chữ cho các nhãn trên la bàn phụ (nhỏ hơn la bàn chính) */
.upload-box .la-pan-label {
    padding: 1px 2px;
    border-radius: 2px;
    border-width: 0.5px;
    transform-origin: center center;
    background-color: rgba(255, 255, 255, 0.6);
}
.upload-box .degree-marker { font-size: 0.5em !important; }
.upload-box .degree-marker.cardinal { font-size: 0.6em !important; }
.upload-box .mountain-label { font-size: 0.6em !important; }
.upload-box .lunar-mansion-label { font-size: 0.55em !important; }
.upload-box .hexagram-label .hexagram-symbol { font-size: 0.7em !important; }
.upload-box .truong-sinh-label { font-size: 0.55em !important; }
.upload-box .trigram-name-label { font-size: 0.65em !important; }

/* 8. Vòng tròn trong cùng chứa ảnh */
.upload-box .inner-circle {
    width: 80%; /* 80% của vòng tròn ngoài */
    height: 80%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
    background-color: #e9ecef; /* Màu nền chờ khi chưa có ảnh */
}

.upload-box .image-preview-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: none; /* JS sẽ đổi thành flex khi có ảnh */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.upload-box .image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hoặc 'contain' tùy ý bạn */
    transform-origin: center center;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-box.has-image .image-preview-container {
    display: flex;
}

/* 9. Kim chỉ nam cho la bàn phụ */
.upload-box .upload-compass-needle {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20; /* Nằm trên các vòng, dưới ảnh */
}

.upload-box .upload-compass-needle-line {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; /* Mảnh hơn la bàn chính */
    height: 80%; /* Ngắn hơn một chút, không chạm hẳn viền */
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
    background: linear-gradient(to bottom, var(--primary-blue) 50%, var(--danger-red) 50%);
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-box .upload-compass-needle-line::after { /* Đầu kim xanh */
    content: '';
    position: absolute;
    top: 1px;
    left: -4px;
    width: 10px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 1px;
}

.upload-box .upload-compass-needle-line::before { /* Đuôi kim đỏ */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translate(-50%, 100%) rotate(180deg);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--danger-red);
    width: 0;
    height: 0;
}

/* 10. Nút xóa ảnh */
.upload-box .clear-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 20px;
    line-height: 26px;
    cursor: pointer;
    z-index: 101; /* Nằm trên tất cả */
    display: none; /* Chỉ hiện khi có ảnh */
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    text-align: center;
}

.upload-box .clear-button:hover {
    background-color: var(--danger-red);
    color: white;
}

.upload-box.has-image .clear-button {
    display: block;
}

/* 11. Các chú thích Loan Đầu */
.upload-box .loan-dau-annotations-for-image {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.8em;
    color: var(--text-muted);
    display: none; /* Chỉ hiện khi có ảnh */
    z-index: 10;
}

.upload-box.has-image .loan-dau-annotations-for-image {
    display: block;
}
.step-title {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 1.1em;
    color: var(--text-color-dark);
}


#loan-dau-icon-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#selected-loandau-icon-info {
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9em;
    min-height: 1.2em;
}

/* --- CSS cho Upload Box --- */
.upload-box {
    position: relative;
    /* Bỏ width và height cố định */
    /* width: 250px; */ 
    /* height: 250px; */
    
    /* Dùng aspect-ratio để nó luôn là hình vuông */
    aspect-ratio: 1 / 1; 

    border: 2px dashed var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Thêm transition để thay đổi kích thước mượt hơn nếu cần */
    transition: all 0.3s ease;
}

/* Container chứa các vòng la bàn - Nằm ở lớp giữa */
.upload-compass-rings-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none; /* Cho phép click xuyên qua */
}
.upload-compass-rings-container .la-pan-label {
    font-size: 7px; /* Chữ nhỏ hơn cho la bàn phụ */
}
.upload-compass-rings-container .degree-tick {
    height: 1px; /* Vạch mỏng hơn */
}

/* Container chứa các icon đã đặt */
.ld-placed-icons-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6; /* Cao hơn các vòng la bàn */
    pointer-events: none; /* Chỉ các icon con mới bắt sự kiện */
}

.ld-placed-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    font-size: 1.5em; /* Kích thước icon */
    color: #ff4757; /* Màu mặc định cho icon */
    text-shadow: 0 0 3px white;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ld-placed-icon:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Kim chỉ nam - Nằm trên cùng */
.upload-compass-needle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 15;
    pointer-events: none;
}
.upload-compass-needle-line {
    /* Copy style từ #compass-needle-line và điều chỉnh nếu cần */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 48%; /* Ngắn hơn một chút */
    background-color: var(--danger-red);
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
}

/* === CSS HÉT CHIA CUNG BÁT QUÁI TRÊN ẢNH === */
/* === CSS CHO TÍNH NĂNG ĐẶT ICON LOAN ĐẦU === */
/* ============================================== */

/* 1. Container cho các vùng click */
.upload-box .ld-palace-click-zones {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden; /* Quan trọng để clip-path hoạt động */
    z-index: 30; /* Nằm trên các vòng la bàn, dưới kim chỉ nam */
}

/* 2. Style cho một vùng click (một cung) */
.upload-box .ld-palace-zone {
    position: absolute;
    width: 50%; height: 50%;
    /* Đặt tâm xoay ở góc dưới bên phải */
    transform-origin: 100% 100%; 
    pointer-events: auto; /* Cho phép nhận sự kiện click */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.upload-box .ld-palace-zone:hover {
    background-color: rgba(13, 110, 253, 0.15); /* Highlight nhẹ khi hover */
}

/* 3. Dùng transform và clip-path để tạo 8 "miếng bánh" */
.upload-box .ld-palace-zone[data-palace="N"]  { top: 0; left: 50%; transform: rotate(22.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="NE"] { top: 0; left: 50%; transform: rotate(67.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="E"]  { top: 50%; left: 50%; transform: rotate(112.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="SE"] { top: 50%; left: 50%; transform: rotate(157.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="S"]  { top: 50%; left: 0; transform: rotate(202.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="SW"] { top: 50%; left: 0; transform: rotate(247.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="W"]  { top: 0; left: 0; transform: rotate(292.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.upload-box .ld-palace-zone[data-palace="NW"] { top: 0; left: 0; transform: rotate(337.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* 4. Container cho các icon đã đặt */
.upload-box .ld-placed-icons-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Container này không bắt click */
    z-index: 35; /* Nằm trên vùng click */
}

/* 5. Style cho một icon đã được đặt */
.upload-box .ld-placed-icon {
    position: absolute;
    transform: translate(-50%, -50%); /* Căn giữa icon vào tọa độ */
    font-size: 1.5em; /* Kích thước icon */
    color: var(--primary-blue-dark);
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
    pointer-events: auto; /* Icon có thể được click (để xóa) */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    opacity: 0; /* Hiện ra từ từ */
}

.upload-box .ld-placed-icon:hover {
    transform: translate(-50%, -50%) scale(1.2);
    color: var(--danger-red);
}
/* Trong file style.css */


/* Khi upload-box chưa có ảnh, không cho phép click */
.upload-box:not(.has-image) .image-preview-container {
    pointer-events: none;
    cursor: default;
}
.vts-table .cell-very_good { color: #155724; background-color: #d4edda; }
.vts-table .cell-good { color: #004085; background-color: #cce5ff; }
.vts-table .cell-bad { color: #721c24; background-color: #f8d7da; }
.vts-table .cell-very_bad { color: #fff; background-color: #721c24; font-weight: bold; }
.vts-table .cell-neutral { color: #383d41; background-color: #e2e3e5; }
.table-legend .legend-box { display: inline-block; width: 12px; height: 12px; border: 1px solid #ccc; margin-right: 4px; vertical-align: middle; }
.table-legend .highlight-lai { background-color: #90caf9; } /* Màu xanh highlight cho Lai */
.table-legend .highlight-khu { background-color: #ffe082; } /* Màu vàng highlight cho Khứ */
/* Container cho các sao đơn lẻ */
.stars-in-palace {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.single-star-interpretation {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #f8f9fa;
}

/* Container cho diễn giải cặp sao */
.detailed-pair-interpretation {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-left-width: 5px;
    border-radius: var(--border-radius);
    margin-top: 1rem;
}
.detailed-pair-interpretation.very_good { border-left-color: var(--success-green); }
.detailed-pair-interpretation.good { border-left-color: #19875480; }
.detailed-pair-interpretation.neutral { border-left-color: var(--secondary-color); }
.detailed-pair-interpretation.bad { border-left-color: #dc354680; }
.detailed-pair-interpretation.very_bad { border-left-color: var(--danger-red); }

.detailed-pair-interpretation h5 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.detailed-pair-interpretation h5 i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.interpretation-meta {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
}

.interpretation-description {
    margin-bottom: 1rem;
}

/* Chia cột cho Tốt/Xấu */
.good-bad-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.effects-column ul {
    list-style-type: none;
    padding-left: 0;
}
.effects-column li {
    padding-left: 1.2em;
    position: relative;
    margin-bottom: 0.5em;
}
.effects-column li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
}
.effects-column.good li::before {
    content: "\f00c"; /* icon check */
    color: var(--success-green);
}
.effects-column.bad li::before {
    content: "\f00d"; /* icon times */
    color: var(--danger-red);
}

.advice {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.advice i {
    color: #ffc107;
}

.impact-details p {
    margin-bottom: 0.5rem;
    font-size: 0.95em;
}
.impact-details p strong {
    display: inline-block;
    width: 150px; /* Căn chỉnh cho đẹp */
}
.impact-details p i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
    color: var(--primary-color);
}

/* Cách cục đặc biệt */
.formation-detail-item {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #eee;
    border-left-width: 4px;
    border-radius: 4px;
}
.formation-detail-item.very_good,
.formation-detail-item.good { border-left-color: var(--info-blue); }
.formation-detail-item.very_bad,
.formation-detail-item.bad { border-left-color: var(--warning-orange); }

.formation-detail-item p {
    font-size: 0.9em;
    margin-top: 5px;
    color: var(--text-muted);
}

/* 1. Wrapper chung cho các icon (nếu có nhiều icon trong một ô) */
.calendar-icons-wrapper {
    position: absolute; /* Định vị tuyệt đối so với ô .calendar-day */
    bottom: 3px;        /* Cách lề dưới của ô ngày */
    right: 3px;         /* Cách lề phải của ô ngày */
    display: flex;      /* Xếp các icon trên một hàng */
    gap: 4px;           /* Khoảng cách giữa các icon */
    align-items: center;/* Căn giữa các icon theo chiều dọc (nếu chiều cao khác nhau) */
}

/* 2. Style cơ bản cho tất cả các icon trong lịch */
.calendar-almanac-icon {
    font-size: 0.75em; /* Kích thước chung, có thể điều chỉnh */
    opacity: 0.85;     /* Độ trong suốt mặc định */
    line-height: 1;    /* Đảm bảo icon không làm thay đổi chiều cao dòng */
    /* Không cần position: absolute ở đây nữa nếu chúng nằm trong wrapper */
}

/* 3. Style cho icon ngày tốt chung (ngôi sao) */
.calendar-almanac-icon.good { /* Thường là class 'fa-star' */
    color: var(--success-green); /* Sử dụng biến CSS nếu có, hoặc màu cụ thể */
}

/* 4. Style cho icon ngày xấu/cảnh báo (tam giác) */
.calendar-almanac-icon.bad { /* Thường là class 'fa-triangle-exclamation' */
    color: var(--danger-red); /* Sử dụng biến CSS nếu có, hoặc màu cụ thể */
}

/* 5. Style cho icon ngày tiềm năng tốt cho hôn nhân (trái tim) */
.calendar-almanac-icon.marriage-good { /* Thường là class 'fa-heart' */
    color: #e91e63; /* Màu hồng đặc trưng */
    /* Bạn có thể thêm các style riêng nếu muốn nó nổi bật hơn nữa */
    /* Ví dụ: */
    /* font-size: 0.8em; */ /* Cho to hơn một chút */
    /* text-shadow: 0 0 3px rgba(233, 30, 99, 0.5); */
}

.day-evaluation-summary {
    text-align: center;
    padding: 12px 15px;
    background-color: #f0f8ff; /* AliceBlue, màu nền nhẹ nhàng */
    border: 1px solid #b0e0e6; /* PowderBlue, viền nhẹ */
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    font-size: 1.1em;
}

.day-evaluation-summary .status-text {
    font-size: 1.2em; /* Làm cho kết luận nổi bật hơn */
    padding: 3px 8px;
}

.evaluation-details-grid {
    display: grid;
    /* Dùng auto-fit để tự động chuyển thành 1 cột trên màn hình nhỏ */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.evaluation-column h5 {
    margin-top: 0;
    border-bottom: 2px solid; /* Dùng border-bottom để tạo đường kẻ chân */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.1em;
}

.evaluation-column.positive h5 {
    color: var(--success-green-dark);
    border-color: var(--success-green);
}

.evaluation-column.negative h5 {
    color: var(--danger-red-dark);
    border-color: var(--danger-red);
}

.evaluation-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95em;
}

.evaluation-column li {
    margin-bottom: 0.75rem;
    padding-left: 1.5em; /* Tạo khoảng trống cho icon */
    position: relative;
    line-height: 1.5;
}

/* Thêm icon check/cross cho từng mục */
.evaluation-column li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px; /* Căn chỉnh icon cho đẹp */
}

.evaluation-column.positive li::before {
    content: "\f058"; /* fa-circle-check */
    color: var(--success-green);
}

.evaluation-column.negative li::before {
    content: "\f057"; /* fa-circle-xmark */
    color: var(--danger-red);
}

.evaluation-column li strong {
    color: var(--text-dark);
    display: block; /* Tên yếu tố xuống một dòng riêng */
}

.evaluation-column li .reason {
    color: var(--text-muted);
    display: block; /* Lý do xuống dòng tiếp theo */
    font-style: italic;
    font-size: 0.9em;
}

.evaluation-column li .points {
    font-weight: bold;
    font-size: 0.9em;
    position: absolute;
    right: 0;
    top: 4px;
}

.evaluation-column.positive .points { color: var(--success-green-dark); }
.evaluation-column.negative .points { color: var(--danger-red-dark); }


/* === STYLE CHO CÁC KHỐI PHÂN TÍCH TRONG MODAL CHI TIẾT NGÀY (UI) === */
/* =================================================================== */

/* --- 1. Style cho phần Đánh giá công việc (Yếu Tố Thuận Lợi/Bất Lợi) --- */
.day-evaluation-summary {
    text-align: center;
    padding: 12px 15px;
    background-color: #f0f8ff; /* AliceBlue, màu nền nhẹ nhàng */
    border: 1px solid #b0e0e6; /* PowderBlue, viền nhẹ */
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    font-size: 1.1em;
}

.day-evaluation-summary .status-text {
    font-size: 1.2em; /* Làm cho kết luận nổi bật hơn */
    padding: 3px 8px;
}

.evaluation-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.evaluation-column h5 {
    margin-top: 0;
    border-bottom: 2px solid;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.1em;
}

.evaluation-column.positive h5 {
    color: var(--success-green-dark);
    border-color: var(--success-green);
}

.evaluation-column.negative h5 {
    color: var(--danger-red-dark);
    border-color: var(--danger-red);
}

.evaluation-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95em;
}

/* === PHẦN SỬA LỖI ICON CHE CHỮ === */
.evaluation-column li {
    display: flex; /* Sử dụng Flexbox để căn chỉnh các mục */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 0.6em; /* Khoảng cách giữa các mục */
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}

.evaluation-column li:last-child {
    border-bottom: none;
}

.evaluation-column .factor-icon i {
    font-size: 1.1em;
    width: 1.2em;
    text-align: center;
    margin: 0;
}

.evaluation-column.positive .factor-icon i {
    color: var(--success-green);
}

.evaluation-column.negative .factor-icon i {
    color: var(--danger-red);
}

.evaluation-column .factor-name {
    flex-grow: 1; /* Cho phép tên yếu tố co giãn để đẩy điểm số ra cuối */
    color: var(--text-dark);
    font-weight: 500;
}

.evaluation-column .factor-points {
    font-weight: bold;
    font-size: 0.9em;
    flex-shrink: 0;
}

.evaluation-column.positive .factor-points {
    color: var(--success-green-dark);
}

.evaluation-column.negative .factor-points {
    color: var(--danger-red-dark);
}
/* === KẾT THÚC PHẦN SỬA LỖI === */


/* --- 2. Style cho phần Cát Thần & Hung Thần --- */
.daily-stars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.stars-column h5 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1em;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.stars-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.stars-column li {
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    line-height: 1.4;
}

.stars-column li:hover {
    background-color: #f4f4f4;
}

.stars-column.good-stars h5 {
    color: var(--success-green-dark);
    border-color: var(--success-green);
}

.stars-column.good-stars li strong {
    color: var(--success-green-dark);
}

.stars-column.bad-stars h5 {
    color: var(--danger-red-dark);
    border-color: var(--danger-red);
}

.stars-column.bad-stars li .status-text {
    padding: 2px 6px;
    font-size: 0.9em;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
}
.stars-column.bad-stars .status-text.very_bad { 
    background-color: var(--quality-very_bad-bg); 
    border-color: var(--quality-very_bad-border); 
    color: var(--quality-very_bad-color);
}
.stars-column.bad-stars .status-text.bad { 
    background-color: var(--quality-bad-bg); 
    border-color: var(--quality-bad-border); 
    color: var(--quality-bad-color);
}


/* --- 3. Style cho phần Giờ Hoàng Đạo & Giờ Xuất Hành --- */
.hourly-almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.hourly-column h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-bottom: 2px solid;
    padding-bottom: 0.5rem;
}

.hourly-column.good-hours h6 {
    color: var(--success-green-dark);
    border-color: var(--success-green);
}
.hourly-column.bad-hours h6 {
    color: var(--danger-red-dark);
    border-color: var(--danger-red);
}

.hourly-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95em;
}

.hourly-column li {
    margin-bottom: 0.4rem;
}

.hourly-column li strong {
    font-weight: 600;
    color: var(--text-dark);
}

/* --- 4. Style cho phần Hướng Xuất Hành --- */
.xuat-hanh-directions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.direction-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.direction-item i {
    font-size: 1.3em;
    width: 1.2em;
    text-align: center;
}

.direction-item.hy-than { color: var(--primary-blue-dark); }
.direction-item.hy-than i { color: var(--primary-blue); }
.direction-item.tai-than { color: var(--success-green-dark); }
.direction-item.tai-than i { color: var(--success-green); }

.xuat-hanh-note {
    margin-top: 0.75rem;
    padding: 8px 12px;
    background-color: var(--quality-bad-bg);
    border-left: 4px solid var(--danger-red);
    border-radius: var(--border-radius);
    font-size: 0.95em;
}

.xuat-hanh-note .status-text {
    font-weight: 600;
}


.house-representation {
    display: none; /* JS sẽ đổi thành flex khi có dữ liệu */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 9;
    pointer-events: none;
}

#house-rect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--house-rotation, 0deg));
    border: 2px solid #ff0000;
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 8px;
    opacity: 0.8;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
#chart-house-representation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* JS sẽ đổi thành flex khi có dữ liệu */
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

#chart-house-representation-rect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--house-rotation, 0deg));
    background-color: rgba(0, 123, 255, 0.12);
    border: 2px solid #007bff;
    border-radius: 6px;
    opacity: 1;
    transition: opacity 0.3s, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Kết thúc phần CSS cho Upload Box và các thành phần liên quan --- */
/* --- Biến CSS (Giữ nguyên từ code của bạn) --- */
:root {
    /* Ngũ Hành Colors - Dùng cho nền/viền nhẹ nhàng */
    --wuxing-thuy: #e0f2f7; /* Light Blue */
    --wuxing-moc:  #e8f5e9; /* Light Green */
    --wuxing-hoa:  #ffebee; /* Light Red/Pink */
    --wuxing-tho:  #fff8e1; /* Light Yellow/Sand */
    --wuxing-kim:  #f5f5f5; /* Light Gray */
    --wuxing-thuy-border: #b3e5fc;
    --wuxing-moc-border:  #c8e6c9;
    --wuxing-hoa-border:  #ffcdd2;
    --wuxing-tho-border:  #ffecb3;
    --wuxing-kim-border:  #e0e0e0;

    /* Text & Link Colors */
    --text-dark: #212529;
    --text-primary: #495057;
    --text-muted: #6c757d;
    --text-light: #f8f9fa;
    --text-white: #ffffff;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;

    /* Background Colors */
    --background-body: #f4f7f6;
    --background-container: #ffffff;
    --background-controls: #ffffff;
    --background-visualization: #fdfdfd;
    --background-results: #ffffff;
    --background-modal: #ffffff;
    --background-input: #ffffff;
    --background-code: #f1f3f5;
    /* ... (giữ nguyên các biến background khác) ... */

    /* Border Colors */
    --border-color: #dee2e6;
    --border-input: #ced4da;
    --border-input-focus: #86b7fe;
    --border-highlight: #adb5bd;
    /* ... (giữ nguyên các biến border khác) ... */

    /* Semantic Colors */
    --primary-blue: #0d6efd;
    --primary-blue-dark: #0b5ed7;
    --danger-red: #dc3545;
    --danger-red-dark: #bb2d3b;
    --success-green: #198754;
    --success-green-dark: #157347;
    --warning-orange: #ffc107;
    --warning-orange-dark: #d39e00;
    --info-cyan: #0dcaf0;
    --info-cyan-dark: #0aa8c7;
    --purple-mid: #6f42c1;
    /* ... (giữ nguyên các biến semantic khác) ... */

    /* Star Timeliness & Quality Colors */
    --status-wang-color: var(--danger-red-dark);
    --status-sheng-color: var(--success-green-dark);
    --status-tui-color: #a07400;
    --status-sha-color: var(--text-dark);
    --status-si-color: var(--text-muted);
    --quality-very_good-color: var(--success-green-dark);
    --quality-good-color: #2a9d8f;
    --quality-neutral-color: var(--neutral-gray);
    --quality-bad-color: var(--danger-red-dark);
    --quality-very_bad-color: #8B0000;

    --status-wang-bg: #f8d7da; --status-wang-border: #f5c2c7;
    --status-sheng-bg: #d1e7dd; --status-sheng-border: #badbcc;
    --status-tui-bg: #fff3cd; --status-tui-border: #ffe69c;
    --status-sha-bg: #e2e3e5; --status-sha-border: #d3d6d8;
    --status-si-bg: #f8f9fa; --status-si-border: #e9ecef;
    --quality-very_good-bg: var(--status-sheng-bg); --quality-very_good-border: var(--status-sheng-border);
    --quality-good-bg: #e0f2f1; --quality-good-border: #b2dfdb;
    --quality-neutral-bg: var(--status-si-bg); --quality-neutral-border: var(--status-si-border);
    --quality-bad-bg: var(--status-wang-bg); --quality-bad-border: var(--status-wang-border);
    --quality-very_bad-bg: #dc354533; --quality-very_bad-border: var(--danger-red);

    /* ... (giữ nguyên các biến font, sizing, La Pan Palace Colors, Layout Suggestion Colors) ... */
}

/* --- Các style chung (Giữ nguyên) --- */
/* *, *::before, *::after { box-sizing: border-box; } ... */
/* body { ... } ... */
/* h1, h2, h3, h4, h5, h6 { ... } ... */
/* p, a, hr, em, strong, pre, ul, ol, li { ... } ... */
/* i.fa-solid, i.fas, i.fa-regular, i.far { ... } ... */
/* .clickable { ... } ... */
/* .error-text { ... } ... */

/* --- Container & Layout (Giữ nguyên) --- */
/* .container { ... } ... */
/* .controls { ... } ... */
/* .input-group { ... } ... */
/* .input-group label, .input-group select, .input-group input { ... } ... */
/* button { ... } ... */
/* ... (các style cho nút cụ thể) ... */
/* #thong-tin-nang-cao-section { ... } ... */
/* .input-group-container { ... } ... */
/* .input-group small, .checkbox-grid, .radio-group { ... } ... */
/* .trach-nhat-container, .trach-nhat-input-group { ... } ... */
/* .thuy-phap-khau-item, ... { ... } ... */ /* Giữ nguyên các style của Thủy Pháp Khí Khẩu Lại Bố Y */

/* --- Visualization (La Bàn, Tinh Bàn, Lịch, Upload Ảnh - Giữ nguyên) --- */
/* .visualization { ... } ... */
/* .chart-instruction { ... } ... */
/* #la-pan-container { ... } ... */
/* ... (tất cả các style chi tiết cho La Bàn: palace-color-background, degree-ring, mountain-label, kiep-sat-arrow, compass-needle, house-representation, etc.) ... */
/* .flying-star-section, #flying-star-chart, .star-cell, ... { ... } ... */
/* .calendar-container, .calendar-controls, #calendar-grid, .calendar-day, ... { ... } ... */
/* .image-upload-area, .upload-grid, .upload-box, ... { ... } ... */ /* Giữ nguyên các style upload ảnh */
/* .layout-suggestion-grid, .suggestion-cell, ... { ... } ... */ /* Giữ nguyên style Sơ đồ gợi ý */


/* === MODAL DIỄN GIẢI CHUNG (Giữ nguyên và đảm bảo các phần này được áp dụng) === */
.modal {
    display: none;
    position: fixed;
    z-index: 10000 !important;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: hidden; /* Đổi từ auto sang hidden để tránh 2 thanh cuộn */
    background-color: var(--modal-backdrop-color);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal[style*="display: block"] { display: block !important; } /* Đảm bảo modal hiện khi JS đặt display: block */

.modal-content {
    background-color: var(--background-modal);
    margin: 5% auto; /* Để tự căn giữa theo chiều ngang */
    padding: 25px 30px;
    border: 1px solid var(--border-highlight);
    width: 85%;
    max-width: 800px; /* Giới hạn chiều rộng tối đa */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-modal);
    position: fixed; /* Đổi thành fixed để dễ kéo thả và căn giữa */
    top: 50%;    /* Căn giữa theo chiều dọc */
    left: 50%;   /* Căn giữa theo chiều ngang */
    transform: translate(-50%, -50%) translateY(-20px); /* Căn giữa và hiệu ứng trượt vào */
    max-height: 90vh; /* Giới hạn chiều cao tối đa */
    display: flex;
    flex-direction: column;
    cursor: grab; /* Cho phép kéo */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Thêm opacity vào transition */
}
/* Khi modal được hiển thị (ví dụ bởi JS) */
.modal[style*="display: block"] .modal-content {
    transform: translate(-50%, -50%) translateY(0); /* Reset hiệu ứng trượt */
    opacity: 1;
}


.modal-content h2 {
    margin-top: 0; margin-bottom: 1.5rem; text-align: left;
    border-bottom: 1px solid var(--border-color); padding-bottom: 0.8rem;
    font-size: 1.6em; display: flex; align-items: center; gap: 0.5em;
    flex-shrink: 0; /* Ngăn header bị co lại */
    cursor: grab; /* Cho phép kéo từ header */
}
.modal-content h2 i { color: var(--primary-blue); }

.close-button {
    color: #aaa; position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold; line-height: 1; cursor: pointer;
    transition: color 0.2s ease; background: none; border: none; padding: 0;
    z-index: 1; /* Nằm trên các element khác trong modal-content */
}
.close-button:hover, .close-button:focus { color: black; text-decoration: none; }

/* Vùng nội dung chính của modal, cho phép cuộn nếu nội dung dài */
.explanation-content {
    flex-grow: 1;       /* Cho phép co giãn để chiếm không gian còn lại */
    overflow-y: auto;   /* Thêm thanh cuộn dọc khi nội dung dài */
    padding-right: 10px; /* Tạo khoảng trống cho thanh cuộn */
    min-height: 200px;  /* Chiều cao tối thiểu để modal không bị quá bé */
}

/* Tab điều hướng trong modal */
.interpretation-tabs {
    border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem;
    display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0;
}
.interpretation-tab {
    background-color: transparent; border: none; border-bottom: 3px solid transparent;
    padding: 0.8rem 1rem; cursor: pointer; font-size: 1em;
    color: var(--text-muted); transition: all 0.2s ease;
    gap: 0.5em; display: inline-flex; align-items: center;
}
.interpretation-tab.active {
    color: var(--primary-blue); border-bottom-color: var(--primary-blue); font-weight: 600;
}
.interpretation-tab:hover:not(.active):not(:disabled) {
    color: var(--primary-blue-dark); border-bottom-color: #cdeaff;
}
.interpretation-tab:disabled { color: #adb5bd; cursor: not-allowed; }

/* Các section nội dung của từng tab */
.interpretation-content-sections { position: relative; }
.interpretation-section {
    display: none; /* Mặc định ẩn */
    /* padding: 10px 0; */ /* Bỏ padding ở đây, để tab-content tự quản lý */
}
.interpretation-section.active {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Nội dung cụ thể của một tab */
.tab-content {
    padding: 0 5px 15px 5px; /* Thêm padding để nội dung không sát viền */
    /* background: #fff; */ /* Không cần thiết nếu modal-content đã có nền */
    /* border-radius: 5px; */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.05); */ /* Có thể bỏ nếu muốn đơn giản */
}
.tab-content h3, .tab-content h4 { /* Style cho các tiêu đề bên trong tab */
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--border-highlight);
}
.tab-content h3 { font-size: 1.3em; }
.tab-content h4 { font-size: 1.15em; }

.info-message, .loading-placeholder, .modal-error p {
    /* Giữ nguyên style của bạn cho các thông báo này */
}

/* --- CSS CHO PHẦN HIỂN THỊ CÁC CUNG VỊ TRỌNG YẾU (ĐÃ CẬP NHẬT TRƯỚC ĐÓ) --- */
.good-palaces-container {
    margin-top: 1.5rem;
    padding: 15px;
    background-color: #fdfdfd;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}
.good-palaces-container h3 {
    font-size: 1.25em;
    color: var(--primary-blue-dark);
    margin-top: 0; margin-bottom: 1.25rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-highlight);
    display: flex; align-items: center; gap: 0.6em;
}
.good-palaces-container h3 i.fa-wand-magic-sparkles { color: var(--warning-orange-dark); }
.good-palace-item { margin-bottom: 1rem; }
.good-palace-item:last-child { margin-bottom: 0; }
.good-palace-item strong {
    display: flex; align-items: center; gap: 0.6em;
    font-weight: 600; color: var(--text-primary); font-size: 1.05em;
    margin-bottom: 0.4em;
}
.good-palace-item strong i {
    width: 1.2em; text-align: center; font-size: 1.1em;
    color: var(--primary-blue); 
}
.good-palace-item strong i.fa-sack-dollar { color: var(--success-green); }
.good-palace-item strong i.fa-briefcase { color: var(--purple-mid); }
.good-palace-item strong i.fa-graduation-cap { color: var(--info-cyan); }
.good-palace-item strong i.fa-handshake-angle { color: #20c997; }
.good-palace-item strong i.fa-heart-pulse { color: var(--danger-red); }
.good-palace-item strong i.fa-users { color: #fd7e14; }
.good-palace-item strong i.fa-horse { color: #6610f2; }

.palace-list {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
    padding-left: calc(1.2em + 0.6em + 5px);
}
.palace-list:empty::before {
    content: "(Chưa có cung nào nổi bật)"; /* Hoặc content: attr(data-empty-text); */
    font-style: italic; color: var(--text-muted); font-size: 0.9em;
}
.palace-tag {
    background-color: var(--background-code); padding: 4px 10px;
    border-radius: var(--border-radius); font-size: 0.9em;
    border: 1px solid var(--border-color); cursor: help;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.palace-tag:hover { background-color: #e9ecef; border-color: var(--border-highlight); }
.palace-tag .palace-name { font-weight: 600; color: var(--text-dark); margin-right: 4px; }
.palace-tag .palace-type { color: var(--text-muted); font-size: 0.9em; }
.palace-type.type-very-good { color: var(--status-wang-color); font-weight: 500; }
.palace-type.type-good { color: var(--status-sheng-color); }


/* === CSS CHO CÁC KHỐI NỘI DUNG BÊN TRONG MODAL DIỄN GIẢI === */
.star-interpretation-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.star-name-header h3 {
    color: #2c3e50;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eee;
}

.star-interpretation-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.star-nature {
    margin-top: 0.8rem;
    color: #666;
}
/* --- 1. Khối "Special Palace Summary" (Tài Vị, Quan Lộc trong tab Lý Khí) --- */
.special-palace-summary {
    margin-bottom: 1rem;
    padding: 10px;
    background-color: var(--wuxing-tho); /* Nền vàng nhạt cho sự nổi bật */
    border: 1px solid var(--wuxing-tho-border);
    border-radius: var(--border-radius);
}
.special-palace-info {
    margin-bottom: 0.75rem;
}
.special-palace-info:last-child {
    margin-bottom: 0;
}
.special-palace-info h4 {
    font-size: 1.1em;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
    padding-bottom: 0; /* Bỏ gạch chân ở đây nếu tiêu đề khối đã có */
    border-bottom: none;
}
.special-palace-info h4 i {
    margin-right: 0.4em;
}
.special-palace-info p {
    font-size: 0.95em;
    margin-bottom: 0.25rem;
    line-height: 1.5;
}
.special-palace-info p strong i { /* Icon cho gợi ý */
    color: var(--primary-blue);
}

/* --- 2. Khối "Stars in Palace" (Các sao đơn lẻ trong tab Lý Khí) --- */
.stars-in-palace {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Điều chỉnh minmax */
    gap: 0.75rem; /* Giảm gap một chút */
    margin-top: 0.5rem; /* Giảm margin top */
    margin-bottom: 1rem;
}

.single-star-interpretation {
    padding: 0.75rem; /* Giảm padding */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fdfdfd; /* Hoặc var(--background-modal) nếu muốn đồng bộ */
    border-left-width: 4px; /* Giữ viền trái để nhấn mạnh */
    font-size: 0.95em; /* Hơi nhỏ hơn một chút */
}
/* Các class màu viền trái (very_good, good, bad, ...) giữ nguyên như bạn đã có */
.single-star-interpretation.very_good, .single-star-interpretation.good { border-left-color: var(--success-green); }
.single-star-interpretation.bad, .single-star-interpretation.very_bad { border-left-color: var(--danger-red); }
.single-star-interpretation.neutral { border-left-color: var(--neutral-gray); }
.single-star-interpretation.tui { border-left-color: var(--warning-orange); }


.single-star-interpretation strong:first-child { /* Style cho dòng tên sao (Số - Tên (Hành - Vượng/Suy)) */
    display: block;
    font-size: 1.05em; /* To hơn một chút so với text thường */
    color: var(--text-dark);
    margin-bottom: 0.3rem;
}
.single-star-interpretation p {
    margin-bottom: 0.25rem;
    font-size: 0.9em; /* Text diễn giải nhỏ hơn */
    line-height: 1.4;
}
.single-star-interpretation .keywords { /* Giữ nguyên */
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-style: italic;
}

/* --- 3. Khối "Detailed Pair Interpretation" (Diễn giải cặp Sơn-Hướng) --- */
.detailed-pair-interpretation {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-left-width: 5px; /* Viền trái dày hơn */
    border-radius: var(--border-radius);
    margin-top: 0.5rem; /* Giảm margin top */
    margin-bottom: 1rem;
}
/* Các class màu viền trái very_good, good, neutral, bad, very_bad cho khối này (bạn đã có) */
.detailed-pair-interpretation.very_good { border-left-color: var(--success-green-dark); background-color: var(--quality-very_good-bg); }
.detailed-pair-interpretation.good { border-left-color: var(--success-green); background-color: var(--quality-good-bg); }
.detailed-pair-interpretation.neutral { border-left-color: var(--neutral-gray); background-color: var(--quality-neutral-bg); }
.detailed-pair-interpretation.bad { border-left-color: var(--danger-red); background-color: var(--quality-bad-bg); }
.detailed-pair-interpretation.very_bad { border-left-color: var(--danger-red-dark); background-color: var(--quality-very_bad-bg); }

.detailed-pair-interpretation h5 { /* Tiêu đề cặp sao */
    font-size: 1.15em; /* To hơn một chút */
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.detailed-pair-interpretation h5 i { margin-right: 0.5em; }

.interpretation-meta { /* Loại, Nhóm */
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    gap: 1rem; /* Khoảng cách giữa Loại và Nhóm */
    flex-wrap: wrap;
}
.interpretation-meta .status-text { /* Class cho chữ Vượng/Suy/Tốt/Xấu */
    padding: 1px 5px;
    border-radius: var(--border-radius);
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
}
/* Màu cho status-text đã được định nghĩa trong :root, ví dụ: */
.status-text.very_good { border-color: var(--quality_very_good-border); background-color: var(--quality_very_good-bg); color: var(--quality_very_good-color); }
/* ... thêm cho good, neutral, bad, very_bad ... */


.interpretation-description { margin-bottom: 0.75rem; line-height: 1.5; }

.good-bad-columns { /* Chia cột Tốt cho/Xấu cho */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.effects-column ul { list-style-type: none; padding-left: 0; margin:0; }
.effects-column li {
    padding-left: 1.4em; /* Khoảng trống cho icon */
    position: relative;
    margin-bottom: 0.3em;
    font-size: 0.95em;
}
.effects-column li::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px;
}
.effects-column.good strong, .effects-column.good li::before { color: var(--success-green-dark); }
.effects-column.good li::before { content: "\f058"; } /* fa-circle-check */
.effects-column.bad strong, .effects-column.bad li::before { color: var(--danger-red-dark); }
.effects-column.bad li::before { content: "\f057"; } /* fa-circle-xmark */

.advice { /* Lời khuyên & Hóa giải */
    background-color: var(--wuxing-tho); /* Nền vàng nhạt */
    border: 1px solid var(--wuxing-tho-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.95em;
}
.advice strong i { color: var(--warning-orange-dark); }

.impact-details { /* Các ảnh hưởng chi tiết khác */
    font-size: 0.95em;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.impact-details strong i { margin-right: 0.4em; color: var(--primary-blue); }

/* --- 4. Khối "Formation Detail Item" (Cách cục cục bộ) --- */
.formation-detail-item {
    margin-top: 0.75rem;
    padding: 0.6rem;
    border: 1px solid var(--border-highlight);
    border-left-width: 4px;
    border-radius: var(--border-radius);
    background-color: var(--background-code);
}
.formation-detail-item.very_good, .formation-detail-item.good { border-left-color: var(--success-green); }
.formation-detail-item.very_bad, .formation-detail-item.bad { border-left-color: var(--danger-red); }
.formation-detail-item.neutral { border-left-color: var(--neutral-gray); }

.formation-detail-item strong { display: block; font-size: 1em; margin-bottom: 0.25rem; color: var(--text-dark); }
.formation-detail-item small { font-size: 0.85em; color: var(--text-muted); }
.formation-detail-item p { font-size: 0.9em; margin-top: 0.25rem; margin-bottom: 0; color: var(--text-primary); line-height: 1.4; }


/* === CSS CHO TAB "TỔNG HỢP" (Thêm vào nếu chưa có) === */
.final-assessment {
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    text-align: center;
}
.final-assessment h4 {
    margin-top: 0;
    font-size: 1.3em;
    border-bottom: none; /* Tiêu đề này không cần gạch chân */
    padding-bottom: 0;
}
/* Màu nền cho final-assessment dựa trên quality */
.final-assessment.very_good { background-color: var(--quality-very_good-bg); border: 1px solid var(--quality_very_good-border); }
.final-assessment.good { background-color: var(--quality-good-bg); border: 1px solid var(--quality-good-border); }
.final-assessment.neutral { background-color: var(--quality-neutral-bg); border: 1px solid var(--quality-neutral-border); }
.final-assessment.bad { background-color: var(--quality-bad-bg); border: 1px solid var(--quality-bad-border); }
.final-assessment.very_bad { background-color: var(--quality_very_bad-bg); border: 1px solid var(--quality_very_bad-border); }

.final-assessment .status-text { /* Cho chữ "Cung Đại Cát" to và rõ hơn */
    font-size: 1.1em;
    padding: 2px 6px;
}

.analysis-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.analysis-item {
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fdfdfd;
}
.analysis-item h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.05em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4em;
    border-bottom: none;
    padding-bottom: 0;
}
.analysis-item h5 i { color: var(--primary-blue); font-size: 0.9em; }
.analysis-item-content {
    font-size: 0.95em;
    line-height: 1.5;
}
.analysis-item-content ul {
    padding-left: 1.2em;
    margin-top: 0.3em;
    margin-bottom: 0;
}
.analysis-item-content li {
    margin-bottom: 0.2em;
}

.final-advice {
    margin-top: 1rem;
    padding: 0.8rem;
    background-color: var(--wuxing-tho);
    border: 1px solid var(--wuxing-tho-border);
    border-radius: var(--border-radius);
    font-size: 0.95em;
    line-height: 1.6;
}
.final-advice strong { color: var(--text-dark); }

/* --- Responsive cho Modal --- */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 2.5% auto;
        padding: 20px;
        max-height: 95vh;
    }
    .modal-content h2 { font-size: 1.4em; margin-bottom: 1rem; padding-bottom: 0.6rem;}
    .interpretation-tab { padding: 0.6rem 0.8rem; font-size: 0.9em; }
    .good-bad-columns { grid-template-columns: 1fr; } /* Chuyển thành 1 cột trên màn hình nhỏ */
    .analysis-details-grid { grid-template-columns: 1fr; }
}
/* =========================================== */
/* === RESPONSIVE CHO ĐIỆN THOẠI XOAY NGANG === */
/* =========================================== */

@media screen and (orientation: landscape) and (max-height: 600px) {
    body {
        padding: 5px;
        font-size: 12px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .container {
        grid-template-columns: 0.7fr 1.9fr 0.7fr;
        gap: 8px;
        padding: 8px;
        max-width: 100%;
        max-height: calc(100vh - 10px);
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .controls,
    .visualization,
    .results {
        max-height: calc(100vh - 10px - 16px);
        overflow-y: auto !important;
        padding: 8px;
        border: 1px solid #f0f0f0;
    }

    .visualization {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-y: auto !important; /* Đảm bảo cột giữa cuộn được nếu nội dung dài */
        /* background-color: rgba(0, 255, 0, 0.05) !important; */ /* DEBUG */
        /* border: 1px dashed green !important; */ /* DEBUG */
        min-height: 300px; /* <<-- THÊM: Đảm bảo cột có chiều cao tối thiểu */
    }

    .visualization .la-ban-title,
    .visualization .tinh-ban-title {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.25rem;
        width: 100%;
        text-align: center;
        flex-shrink: 0; /* Ngăn tiêu đề co lại */
    }
    .visualization .chart-instruction {
        font-size: 0.7em;
        margin-top: -0.1rem;
        margin-bottom: 0.4rem;
        flex-shrink: 0;
    }

    /* LA BÀN TRỰC QUAN */
    #la-pan-container {
        width: 95%; /* Để nó co giãn theo cột */
        max-width: 280px; /* GIỮ NGUYÊN GIÁ TRỊ NHỎ ĐỂ TEST */
        aspect-ratio: 1 / 1;
        margin-top: 0.2rem;
        margin-bottom: 0.4rem;
        position: relative;
        z-index: 5;
        overflow: visible !important; /* Để các phần tử con không bị cắt */
        flex-shrink: 0; /* Ngăn La Bàn bị co lại nếu nội dung cột dài */

        /* CSS DEBUG CHO LA BÀN CONTAINER */
        /* border: 3px solid red !important;  */
        /* background-color: rgba(255, 0, 0, 0.1) !important;  */
    }

    /* Đảm bảo các container con của la bàn cũng không bị ẩn */
    #la-pan-container > div {
        overflow: visible !important;
        /* CSS DEBUG CHO CÁC VÒNG CON */
        /* border: 1px dotted blue !important;  */
        /* background-color: rgba(0,0,255,0.05) !important; */
    }
    /* Để thấy các label dễ hơn khi debug */
    /* .la-pan-label { background-color: white !important; opacity: 1 !important; color: black !important; } */


    /* TINH BÀN ĐỒ (Giữ nguyên, có thể thêm flex-shrink) */
    .flying-star-section {
        width: 100%;
        margin-top: 0.4rem;
        flex-shrink: 0;
    }
    #flying-star-chart {
        width: 90%;
        max-width: 260px;
        aspect-ratio: 1 / 1;
        margin: 0.4rem auto;
    }
    #chart-notifications {
        font-size: 0.75em;
        padding: 6px;
        margin-top: 0.4rem;
        flex-shrink: 0;
    }
    .thanh-mon-info-area {
        font-size: 0.75em;
        padding: 6px;
        flex-shrink: 0;
    }

    /* ... (phần còn lại của CSS giữ nguyên) ... */
    /* TIÊU ĐỀ CỘT 1 & 3 */
    h1 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    h2 { font-size: 1.1rem; margin-bottom: 0.5rem; padding-bottom: 0.25rem; }
    h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    h4 { font-size: 0.85rem; margin-bottom: 0.3rem; }

    /* INPUTS & BUTTONS */
    .input-group { margin-bottom: 0.6rem; }
    .input-group label { font-size: 0.75em; margin-bottom: 0.15rem; }
    .input-group select, .input-group input[type="number"], .input-group input[type="text"], .input-group input[type="date"] { padding: 0.3rem 0.5rem; font-size: 0.75em; }
    button { padding: 0.35rem 0.7rem; font-size: 0.75em; }
    .input-group small { font-size: 0.65em; }

    /* FONT LA BÀN & TINH BÀN TRONG MEDIA QUERY */
    :root {
        --la-pan-font-size-degree: 0.45em;
        --la-pan-font-size-mountain: 0.48em;
        --la-pan-font-size-mansion: 0.4em;
        --la-pan-font-size-hex-num: 0.42em;
        --la-pan-font-size-hex-symbol: 0.6em;
        --la-pan-font-size-trigram: 0.5em;
        --chart-font-size-main-star: 0.7em;
        --chart-font-size-period-star: 0.85em;
        --chart-font-size-annual-star: 0.7em;
        --chart-font-size-palace-name: 0.85em;
    }

    /* MODAL */
    .modal-content { width: 92%; max-width: 420px; padding: 10px 15px; }
    .modal-content h2 { font-size: 1.1em; }
    .interpretation-tab { padding: 0.3rem 0.5rem; font-size: 0.75em; }

    /* BẢNG CHỌN ICON LOAN ĐẦU */
    .ld-palette-icon { padding: 2px 5px; font-size: 0.7em; }
    .ld-palette-icon i { font-size: 1em; }

    /* LA BÀN PHỤ TRONG UPLOAD BOX */
    .upload-box { min-width: 100px; min-height: 100px; padding: 3px; }
    .upload-box .upload-compass-rings-container .degree-marker { font-size: 0.25em !important; }
    .upload-box .upload-compass-rings-container .mountain-label { font-size: 0.3em !important; padding: 0.5px 1px !important; }
    .upload-box .upload-compass-rings-container .lunar-mansion-label { font-size: 0.28em !important; padding: 0.5px 1px !important; }
    .upload-box .upload-compass-rings-container .hexagram-label .hexagram-symbol { font-size: 0.45em !important; }
    .upload-box .upload-compass-rings-container .truong-sinh-label { font-size: 0.28em !important; padding: 0.5px 1px !important; }
    .upload-box .upload-compass-rings-container .trigram-name-label { font-size: 0.38em !important; padding: 0.5px 1px !important; }

    /* FIELDSET */
    .input-group-container { padding: 0.5rem; margin-bottom: 0.7rem; }
    .input-group-container legend { font-size: 0.85em; margin-bottom: 0.3rem; }

    /* TRẠCH NHẬT & LỊCH */
    .trach-nhat-container { padding: 10px; }
    .calendar-day { padding: 2px 1.5px; min-height: 40px; font-size: 0.65em; }
    .day-number-lunar { font-size: 0.6em; }
    .calendar-almanac-icon { font-size: 0.55em; }
    .calendar-day-info-area { padding: 6px; font-size: 0.75em; }
    .dong-tho-controls-grid select, .dong-tho-controls-grid input { font-size: 0.7em; padding: 0.25rem 0.4rem; }
    #dong-tho-selected-age-info p { font-size: 0.65em; }
    li.dong-tho-month-item { padding: 3px 2px; font-size: 0.65em; }

    /* KẾT QUẢ TEXT */
    .result-summary p { font-size: 0.75em; margin-bottom: 0.25rem; }
    .result-summary strong { min-width: 90px; }
    .result-hexagram, .overall-assessment { padding: 7px; margin-bottom: 0.6rem; }
    .result-hexagram h3, .overall-assessment h3 { font-size: 0.95em; }
}

/* --- ĐƯỜNG BAY CỦA PHI TINH --- */
/* SVG Overlay cho mũi tên */
.flying-arrows-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Đảm bảo nằm dưới các số sao và các element tương tác khác */
}

/* Style chung cho đường mũi tên SVG */
.flying-arrow-svg {
    stroke-linecap: round;
    animation-name: arrowFlowAnimation; /* Đã định nghĩa ở lần trước */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Keyframes cho animation di chuyển nét đứt */
@keyframes arrowFlowAnimation {
    to {
        stroke-dashoffset: -36; /* Giá trị này bằng tổng của stroke-dasharray (7+7)*2 */
    }
}

/* Nếu muốn mũi tên Sơn và Hướng có animation khác nhau một chút (ví dụ tốc độ) */
/* Bạn có thể tạo class riêng, ví dụ: */
.flying-arrow-svg.mountain-arrow-anim {
    animation-name: arrowFlowAnimation;
    animation-duration: 1.8s; /* Chậm hơn */
}
.flying-arrow-svg.facing-arrow-anim {
    animation-name: arrowFlowAnimation;
    animation-duration: 1.3s; /* Nhanh hơn */
}

#content-loan-dau-chuyen-sau .tab-content {
    padding: 15px 20px; /* Thêm padding cho dễ đọc */
    line-height: 1.65;
}

#content-loan-dau-chuyen-sau .tab-content h2 {
    text-align: center;
    color: var(--primary-blue-dark);
    margin-top: 0.5rem; /* Giảm margin top một chút nếu tiêu đề tab đã có */
    margin-bottom: 2rem;
    font-size: 1.6em; /* Kích thước tiêu đề chính của tab */
    border-bottom: 1px solid var(--border-highlight);
    padding-bottom: 0.8rem;
}
#content-loan-dau-chuyen-sau .tab-content h2 i {
    margin-right: 0.6em;
}

.loan-dau-section-block {
    margin-bottom: 2.5rem; /* Tăng khoảng cách giữa các section */
}
.loan-dau-section-block:last-child {
    margin-bottom: 1rem; /* Giảm margin cho section cuối */
}

.loan-dau-section-block h3 {
    font-size: 1.35em; /* Tăng kích thước tiêu đề section */
    color: var(--text-dark);
    margin-top: 0; /* Reset margin top cho h3 đầu tiên trong section */
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-highlight);
    display: flex;
    align-items: center;
}

.loan-dau-section-block h3 i.fa-solid { /* Đảm bảo chỉ áp dụng cho icon font awesome */
    margin-right: 0.6em;
    color: var(--primary-blue);
    font-size: 0.9em; /* Kích thước icon trong h3 */
}

.loan-dau-section-block p,
.loan-dau-section-block ul {
    margin-bottom: 1rem;
    font-size: 0.98em; /* Kích thước chữ chung trong tab */
}

.loan-dau-section-block ul {
    padding-left: 1.8rem; /* Thụt đầu dòng cho list */
    list-style-type: disc; /* Hoặc 'circle', 'square' tùy ý */
}
.loan-dau-section-block ul ul { /* List con */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    list-style-type: circle;
}

.loan-dau-section-block ul li {
    margin-bottom: 0.5rem;
}

.loan-dau-section-block ul li strong { /* Phần mô tả thế */
    font-weight: 600;
    color: var(--text-primary);
}
.loan-dau-section-block ul ul li em { /* Phần hóa giải */
    font-style: italic;
    color: var(--success-green-dark); /* Màu xanh cho gợi ý hóa giải */
}
.loan-dau-section-block ul ul li em::before { /* Icon cho phần hóa giải */
    content: "💡 "; /* Thêm icon bóng đèn */
    font-family: "Font Awesome 6 Free"; /* Đảm bảo font được áp dụng */
    font-weight: 900; /* Solid icon */
    margin-right: 4px;
    color: var(--warning-orange-dark); /* Màu vàng cho bóng đèn */
}


hr.section-separator-loan-dau {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px dashed var(--border-color);
}

/* --- CSS cho Accordion trong Tab Loan Đầu --- */
.accordion-loandau {
    margin-top: 1.5rem;
}

.accordion-item-loandau {
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    overflow: hidden; /* Quan trọng để max-height hoạt động đúng */
    background-color: #fff; /* Nền trắng cho từng item */
}

.accordion-button-loandau {
    background-color: #f8f9fa; /* Màu nền nhẹ cho button */
    color: var(--text-dark);
    cursor: pointer;
    padding: 14px 20px; /* Tăng padding */
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid transparent; /* Viền dưới mặc định trong suốt */
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-weight: 600;
    font-size: 1.1em; /* Kích thước chữ button */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Đẩy icon mũi tên sang phải */
}

.accordion-item-loandau:first-child .accordion-button-loandau {
    border-top-left-radius: calc(var(--border-radius) - 1px); /* Trừ đi độ dày viền của item */
    border-top-right-radius: calc(var(--border-radius) - 1px);
}
.accordion-item-loandau:last-child .accordion-button-loandau:not(.active) {
    border-bottom-left-radius: calc(var(--border-radius) - 1px);
    border-bottom-right-radius: calc(var(--border-radius) - 1px);
    border-bottom: none; /* Không có viền dưới cho button cuối cùng nếu nó không active */
}


.accordion-button-loandau i.fa-solid { /* Icon đầu dòng của button (nếu có) */
    margin-right: 10px;
    color: var(--primary-blue);
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.accordion-button-loandau::after { /* Icon mũi tên chỉ xuống/lên */
    content: '\f078'; /* Font Awesome down arrow (chevron-down) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Solid icon */
    margin-left: 15px; /* Khoảng cách với text */
    transition: transform 0.3s ease-out;
    font-size: 0.8em;
    color: var(--text-muted);
}

.accordion-button-loandau.active::after {
    transform: rotate(-180deg); /* Xoay mũi tên lên khi active */
}
.accordion-button-loandau.active {
    background-color: #eef3f8; /* Màu nền khi active */
    border-bottom-color: var(--border-highlight); /* Viền dưới đậm hơn khi active */
}
.accordion-button-loandau.active i.fa-solid {
    transform: rotate(15deg); /* Hiệu ứng nhỏ cho icon đầu dòng khi active */
}


.accordion-button-loandau:hover {
    background-color: #e9ecef; /* Màu nền khi hover */
}

.accordion-content-loandau {
    padding: 0 20px; /* Padding ngang cho nội dung */
    background-color: white;
    max-height: 0; /* Mặc định ẩn */
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out;
}

/* Style khi accordion được mở (JS sẽ set max-height) */
.accordion-button-loandau.active + .accordion-content-loandau {
    /* max-height sẽ được JS tính toán và gán */
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid var(--border-color); /* Viền trên cho content khi mở */
}

.accordion-content-loandau p, 
.accordion-content-loandau ul {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.accordion-content-loandau ul {
    padding-left: 1.8rem;
}
.accordion-content-loandau ul ul {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    padding-left: 1.5em;
}

.accordion-content-loandau ul ul li {
    font-size: 0.95em; /* Chữ trong list con nhỏ hơn một chút */
}

/* Style cho ghi chú chung trong tab Loan Đầu */
.interpretation-note {
    margin-top: 1.5rem;
    padding: 10px 15px;
    background-color: var(--wuxing-tho); /* Màu nền vàng nhạt */
    border: 1px solid var(--wuxing-tho-border);
    border-left-width: 4px; /* Viền trái để nhấn mạnh */
    border-radius: var(--border-radius);
    font-size: 0.9em;
    color: #543608; /* Màu chữ tối hơn cho dễ đọc trên nền vàng */
}
.interpretation-note em {
    color: inherit; /* Kế thừa màu chữ của thẻ cha */
}

/* --- END OF FILE style.css --- */