/* FengShui Pro Level 3 - Minimal modern UI */
:root{--fsp-primary:#111827;--fsp-radius:14px}
.fsp-wrap{max-width:980px;margin:18px auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.fsp-card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--fsp-radius);box-shadow:0 10px 25px rgba(0,0,0,.06);padding:18px;margin-bottom:14px}
.fsp-head h2{margin:0 0 6px;font-size:22px}
.fsp-head p{margin:0;color:#6b7280}
.fsp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.fsp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.fsp-form label{display:block;font-size:13px;color:#111827}
.fsp-form input,.fsp-form select{width:100%;margin-top:6px;padding:10px 10px;border:1px solid #e5e7eb;border-radius:12px;outline:none}
.fsp-form input:focus,.fsp-form select:focus{border-color:var(--fsp-primary);box-shadow:0 0 0 4px rgba(17,24,39,.08)}
.fsp-actions{display:flex;gap:12px;align-items:center;margin-top:14px}
.fsp-btn{background:var(--fsp-primary);color:#fff;border:none;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}
.fsp-btn:hover{opacity:.93}
.fsp-note{color:#6b7280;font-size:12px}
.fsp-result{margin-top:10px}
.fsp-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.fsp-badge{border:1px solid #e5e7eb;background:#f9fafb;border-radius:999px;padding:6px 10px;font-size:12px}
.fsp-box{border:1px solid #e5e7eb;background:#fafafa;border-radius:14px;padding:12px}
.fsp-box h4{margin:0 0 8px;font-size:14px}
.fsp-ul{margin:0;padding-left:18px}
.fsp-ul li{margin:6px 0}
.fsp-mini{margin:8px 0 0;color:#6b7280;font-size:12px}

/* tabs */
.fsp-tabs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.fsp-tab{border:1px solid #e5e7eb;background:#f9fafb;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:700}
.fsp-tab.is-active{background:var(--fsp-primary);color:#fff;border-color:var(--fsp-primary)}
.fsp-pane{display:none}
.fsp-pane.is-active{display:block}

@media (max-width:860px){
  .fsp-grid{grid-template-columns:1fr}
  .fsp-grid2{grid-template-columns:1fr}
}


/* ===== Extra UI for Xây nhà & Nội thất ===== */
.fsp-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;margin-left:8px;border:1px solid #ddd;}
.fsp-badge.good{border-color:#2e7d32;}
.fsp-badge.bad{border-color:#c62828;}
.fsp-muted{opacity:.8;font-size:12px;margin-top:8px;}
.fsp-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);opacity:0;z-index:999999;background:#111;color:#fff;padding:10px 14px;border-radius:12px;transition:all .25s ease;max-width:92vw;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.fsp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.fsp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width: 860px){.fsp-grid{grid-template-columns:1fr;}}
.fsp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.fsp-field input,.fsp-field select,.fsp-field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #ddd;}
.fsp-field textarea{min-height:90px;}
.fsp-actions{display:flex;gap:10px;align-items:center;}
.fsp-actions button{padding:10px 14px;border-radius:14px;border:1px solid #ddd;cursor:pointer;}


/* Improve tab contrast */
.fsp-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.fsp-tab{background:#f3f4f6;color:#111;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:600;}
.fsp-tab:hover{filter:brightness(.98);}
.fsp-tab.active{background:var(--fsp-primary,#111827);color:#fff;border-color:var(--fsp-primary,#111827);}


/* Fix tab contrast */
.fsp-tab{color:#111 !important;}
.fsp-tab.active{color:#fff !important;}

/* Tab color fixes */
.fsp-tabs .fsp-tab{color:#111 !important;background:#f3f4f6 !important;border:1px solid #e5e7eb !important;}
.fsp-tabs .fsp-tab.active{color:#fff !important;background:#111827 !important;border-color:#111827 !important;}

/* Ensure panes visibility for both markup styles */
.fsp-pane, .fsp-tab-content{display:none;}
.fsp-pane.active, .fsp-pane.is-active, .fsp-tab-content.active, .fsp-tab-content.is-active{display:block;}
/* Tab visuals */
.fsp-tabs .fsp-tab{color:#111 !important;background:#f3f4f6 !important;border:1px solid #e5e7eb !important;}
.fsp-tabs .fsp-tab.active, .fsp-tabs .fsp-tab.is-active{color:#fff !important;background:#111827 !important;border-color:#111827 !important;}

.fsp-inline-result{margin-top:12px;}