/* La Kinh Phong Thủy — Phong Thủy Trạch Cát */

.lk-wrap {
    --lk-font: "Noto Sans", "Segoe UI", system-ui, Tahoma, Arial, sans-serif;
    --lk-red: #8b0000;
    --lk-gold: #d4af37;
    --lk-blue: #1565c0;
    --lk-paper: #fffdf5;
    max-width: 1100px;
    margin: 24px auto 40px;
    font-family: var(--lk-font);
    color: #333;
}

.lk-header {
    text-align: center;
    margin-bottom: 28px;
    padding: 20px 16px;
    background: linear-gradient(180deg, #fff9f0 0%, var(--lk-paper) 100%);
    border: 2px solid var(--lk-gold);
    border-radius: 4px;
}

.lk-header-symbol {
    font-size: 2rem;
    color: var(--lk-red);
    line-height: 1;
}

.lk-header h2 {
    margin: 8px 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lk-red);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lk-header p {
    margin: 0;
    font-size: .9rem;
    color: #555;
}

.lk-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .lk-layout {
        grid-template-columns: 1fr;
    }
}

.lk-compass-stage {
    background: var(--lk-paper);
    border: 2px solid var(--lk-gold);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: crosshair;
    user-select: none;
}

.lk-compass-svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.lk-son-txt {
    font-size: 9px;
    font-weight: 700;
    fill: var(--lk-blue);
    font-family: var(--lk-font);
}

.lk-h8-txt {
    font-size: 8px;
    font-weight: 600;
    fill: #666;
    font-family: var(--lk-font);
}

.lk-quai-txt {
    font-size: 14px;
    fill: var(--lk-red);
}

.lk-yin-yang {
    font-size: 18px;
    fill: #fff;
}

.lk-n-label {
    font-size: 11px;
    font-weight: 800;
    fill: var(--lk-red);
    font-family: var(--lk-font);
}

.lk-sector-tot {
    fill: rgba(46, 125, 50, 0.22);
    stroke: none;
}

.lk-sector-xau {
    fill: rgba(198, 40, 40, 0.18);
    stroke: none;
}

.lk-sector-neutral {
    fill: transparent;
}

.lk-compass-hint {
    margin: 12px 0 0;
    font-size: .8rem;
    color: #666;
}

.lk-panel {
    background: var(--lk-paper);
    border: 1px solid var(--lk-gold);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.lk-panel-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lk-red);
    border-bottom: 1px solid var(--lk-gold);
    padding-bottom: 8px;
}

.lk-field {
    margin-bottom: 14px;
}

.lk-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.lk-range {
    width: 100%;
    accent-color: var(--lk-red);
}

.lk-select,
.lk-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--lk-font);
    font-size: .9rem;
    background: #fff;
}

.lk-check-label {
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
}

.lk-radio-row label {
    display: inline-block;
    margin-right: 16px;
    font-weight: 500;
    cursor: pointer;
}

.lk-bt-fields.lk-is-hidden {
    display: none;
}

.lk-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lk-result-wide {
    grid-column: 1 / -1;
}

.lk-result-item .lk-lbl {
    display: block;
    font-size: .72rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lk-result-item strong {
    font-size: .95rem;
    color: #222;
}

.lk-badge-tot {
    color: #2e7d32;
    font-weight: 700;
}

.lk-badge-xau {
    color: #c62828;
    font-weight: 700;
}

.lk-badge-neutral {
    color: #555;
}

.lk-bt-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #ddd;
}

.lk-bt-lists h4 {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 700;
}

.lk-bt-tot h4 { color: #2e7d32; }
.lk-bt-xau h4 { color: #c62828; }

.lk-bt-lists ul {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: .78rem;
    line-height: 1.5;
}

.lk-bt-lists li span {
    font-weight: 600;
}

.lk-footer-note {
    text-align: center;
    font-size: .75rem;
    color: #888;
    margin-top: 20px;
}

/* Form kiểu tuvivietnam / HVL */
.lk-form-hvl {
    background: #f3ead8;
    border: 1px solid #c9b896;
    padding: 20px 22px;
    margin-bottom: 20px;
}

.lk-form-grid-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .lk-form-grid-top {
        grid-template-columns: 1fr;
    }
}

.lk-fs {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lk-fs legend {
    font-weight: 800;
    font-size: .82rem;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
    padding: 0;
}

.lk-fs-full {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #d4c4a8;
}

.lk-fs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 10px;
}

.lk-fs-lbl {
    font-size: .85rem;
    font-weight: 600;
    min-width: 100px;
}

.lk-fs-row-split .lk-radio {
    margin-right: 12px;
}

.lk-date-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: .82rem;
}

.lk-date-group label {
    font-weight: 500;
}

.lk-input-xs {
    width: 4.2em;
    text-align: center;
    padding: 4px 6px;
}

.lk-input-sm {
    max-width: 120px;
}

.lk-huong-row .lk-huong-hint {
    font-size: .8rem;
    color: #555;
}

.lk-radio, .lk-check {
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

.lk-banve-panel {
    margin: 10px 0 14px 24px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid #e0d4bc;
    border-radius: 6px;
}

.lk-banve-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lk-banve-lbl {
    font-size: .85rem;
    font-weight: 600;
}

.lk-banve-fname {
    font-size: .8rem;
    color: #555;
}

.lk-banve-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.lk-banve-tools-left,
.lk-banve-tools-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lk-banve-pick,
.lk-banve-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    background: #f5f5f5;
    font-family: var(--lk-font);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}

.lk-banve-pick:hover,
.lk-banve-reset:hover {
    background: #eeeeee;
}

.lk-banve-pick-active {
    border-color: #1565c0;
    background: #e3f2fd;
    color: #0d47a1;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, .15);
}

.lk-banve-pick-ico {
    font-size: 1rem;
    line-height: 1;
}

.lk-banve-opacity-lbl {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

#lk-banve-opacity {
    width: 120px;
    vertical-align: middle;
}

.lk-banve-note {
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: .8rem;
    color: #5d4037;
    line-height: 1.45;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
}

.lk-banve-status {
    margin: 0 0 10px;
    font-size: .82rem;
    color: #444;
    line-height: 1.45;
}

.lk-banve-stage-wrap {
    display: none;
    overflow: auto;
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
}

.lk-banve-stage-wrap.lk-banve-has-img {
    display: block;
}

.lk-banve-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: default;
}

.lk-banve-canvas.lk-banve-cursor-cross {
    cursor: crosshair;
}

.lk-disclaimer {
    margin: 14px 0 0;
    padding: 8px 12px;
    font-size: .78rem;
    color: #666;
    line-height: 1.45;
    text-align: center;
    background: rgba(255, 255, 255, .4);
    border-radius: 4px;
}

.lk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #d4c4a8;
}

.lk-btn {
    border: none;
    border-radius: 4px;
    padding: 10px 18px;
    font-family: var(--lk-font);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.lk-btn-primary {
    background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
}

.lk-btn-gold {
    background: linear-gradient(180deg, #f0d060 0%, #c9a020 100%);
    color: #3d2e00;
}

.lk-btn-red {
    background: linear-gradient(180deg, #ef5350 0%, #b71c1c 100%);
}

.lk-btn:hover {
    filter: brightness(1.05);
}

.lk-notice {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: .88rem;
}

.lk-notice-info {
    background: #e3f2fd;
    color: #0d47a1;
}

.lk-notice-warn {
    background: #fff8e1;
    color: #e65100;
}

.lk-notice-error {
    background: #ffebee;
    color: #b71c1c;
}

.lk-loading {
    text-align: center;
    padding: 16px;
    color: var(--lk-red);
    font-weight: 600;
}

.lk-output {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 3px solid var(--lk-gold);
}

.lk-is-hidden {
    display: none !important;
}

.lk-result-owner {
    text-align: center;
    margin: 0 0 16px;
    font-size: 1rem;
}

.lk-kmdq-panel {
    margin-top: 24px;
    padding: 18px 20px 24px;
    background: #f3ead8;
    border: 1px solid #c9b896;
    border-radius: 6px;
}

.lk-kmdq-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.lk-kmdq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.lk-kmdq-table th {
    text-align: left;
    font-weight: 700;
    padding: 10px 12px 10px 0;
    white-space: nowrap;
    vertical-align: middle;
    width: 1%;
}

.lk-kmdq-th-sub {
    font-weight: 600;
    padding-left: 8px;
    color: #444;
}

.lk-kmdq-table td {
    padding: 8px 6px;
    vertical-align: middle;
}

.lk-kmdq-select {
    width: 100%;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
    font-family: var(--lk-font);
    font-size: .88rem;
}

.lk-kmdq-select-sm {
    max-width: 5em;
}

.lk-kmdq-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lk-kmdq-inline label {
    font-weight: 600;
    font-size: .82rem;
}

.lk-kmdq-submit-row {
    text-align: center;
    margin-top: 18px;
    padding-top: 12px;
}

.lk-kmdq-result {
    margin-top: 20px;
    overflow-x: auto;
}

.lk-kmdq-result .kymon-wrap {
    margin: 0;
}

.lk-btn-active {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.45);
    transform: scale(1.02);
}

.lk-luan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.lk-luan-tab {
    font-size: .68rem;
    padding: 4px 8px;
    background: #eee;
    border-radius: 3px;
    color: #666;
}

.lk-luan-active {
    background: var(--lk-blue);
    color: #fff;
    font-weight: 700;
}

.lk-luan-soon {
    opacity: .65;
    cursor: help;
}

/* Tab luận giải v2 */
.lk-panels {
    margin-top: 20px;
    background: #fffdf8;
    border: 1px solid var(--lk-gold);
    border-radius: 6px;
    padding: 14px;
}

.lk-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 2px solid #e8dcc8;
    padding-bottom: 10px;
}

.lk-tab-btn {
    border: 1px solid #ccc;
    background: #f5f0e6;
    padding: 6px 10px;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    font-family: var(--lk-font);
}

.lk-tab-btn.lk-tab-active {
    background: var(--lk-blue);
    color: #fff;
    border-color: var(--lk-blue);
}

.lk-tab-pane h4 {
    margin: 0 0 10px;
    color: var(--lk-red);
    font-size: 1rem;
}

.lk-meta-line {
    font-size: .85rem;
    color: #444;
    margin-bottom: 12px;
}

.lk-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lk-ul-tot, .lk-ul-xau {
    margin: 0;
    padding-left: 18px;
    font-size: .85rem;
}

.lk-ul-tot { color: #2e7d32; }
.lk-ul-xau { color: #c62828; }

.lk-badge-tot { color: #2e7d32; font-weight: 700; }
.lk-badge-xau { color: #c62828; font-weight: 700; }
.lk-badge-trung { color: #666; }

.lk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.lk-table th, .lk-table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: left;
}

.lk-table-sm td { font-size: .78rem; }

.lk-row-hl { background: #fff8e1; font-weight: 700; }
.lk-row-cat { background: #e8f5e9; }
.lk-row-hung { background: #ffebee; }

.lk-9-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    max-width: 420px;
}

.lk-cell {
    border: 1px solid #bbb;
    padding: 8px 6px;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    min-height: 64px;
}

.lk-cell-vuong { background: #e3f2fd; border-color: #1565c0; }
.lk-cell-tuong { background: #e8f5e9; }
.lk-cell-tu { background: #fff3e0; }
.lk-cell-huu { background: #fafafa; }

.lk-cell-pal {
    display: block;
    font-size: .65rem;
    color: #666;
}

.lk-cell-star {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--lk-red);
}

.lk-cell-tt {
    display: block;
    font-size: .68rem;
    font-weight: 600;
}

.lk-vsh {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.lk-vsh-lbl {
    font-size: .6rem;
    color: #888;
}

.lk-9-combined .lk-cell { min-height: 52px; }

/* La kinh PRO — An La Kinh (HVL) */
.lk-pro-wrap {
    max-width: 1020px;
    margin: 0 auto;
    text-align: center;
}

.lk-pro-owner {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lk-red);
    margin: 0 0 12px;
}

.lk-pro-capture-source {
    position: absolute;
    left: -9999px;
    width: 1000px;
    pointer-events: none;
    visibility: hidden;
}

.lk-pro-capture-source:not(.lk-is-hidden) {
    position: static;
    left: auto;
    visibility: visible;
    pointer-events: auto;
}

.lk-pro-image-box {
    background: #faf8f5;
    border: 2px solid #222;
    border-radius: 2px;
    padding: 16px 12px;
    margin: 0 auto 8px;
    max-width: 1040px;
    min-height: 320px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.lk-pro-img-loading {
    margin: 80px 0;
    font-weight: 600;
    color: var(--lk-blue);
}

.lk-pro-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.lk-pro-stage {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.lk-pro-svg {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.lk-pro-deg { font-size: 9px; fill: #888; }
.lk-pro-sao { font-size: 8px; font-weight: 700; }
.lk-pro-son { font-size: 11px; font-weight: 800; fill: #111; }
.lk-pro-bt-main { font-size: 11px; font-weight: 800; }
.lk-pro-bt-sons { font-size: 8px; fill: #444; }
.lk-pro-dir { font-size: 9px; font-weight: 800; fill: #333; }
.lk-pro-quai { font-size: 10px; font-weight: 700; fill: var(--lk-red); }
.lk-pro-star-big { font-size: 28px; font-weight: 800; fill: #111; }
.lk-pro-star-sm { font-size: 14px; font-weight: 700; }
.lk-pro-c-blue { fill: #1565c0; }
.lk-pro-c-red { fill: #c62828; }

.lk-pro-toolbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 16px;
    flex-wrap: wrap;
}

.lk-pro-tool {
    border: none;
    border-radius: 4px;
    padding: 10px 28px;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: var(--lk-font);
}

.lk-pro-tool-dl { background: #1976d2; }
.lk-pro-tool-lg { background: #00897b; }
.lk-pro-tool-hd { background: #c62828; }

.lk-pro-luan {
    text-align: left;
    margin-top: 16px;
}

.lk-pro-guide {
    text-align: left;
    background: #fffdf8;
    border: 1px solid var(--lk-gold);
    padding: 16px 20px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: .88rem;
}

.lk-pro-guide h4 {
    margin: 0 0 10px;
    color: var(--lk-red);
}

.lk-pro-guide ul {
    margin: 0;
    padding-left: 20px;
}