/* Plugin: Xem Huong Xay Nha */
.vxhx-shortcode-wrap { position: relative; box-sizing: border-box; }
.vxhx-form { display: flex; flex-wrap: wrap; gap: 15px; margin: 0 0 24px; }
.vxhx-field { display: flex; flex-direction: column; flex: 1 1 220px; }
.vxhx-field label { font-weight: 600; margin-bottom: 6px; }
.vxhx-field input, .vxhx-field select { height: 42px; padding: 0 12px; border-radius: 99px !important; border: 1px solid #ddd; box-sizing: border-box; }
.vxhx-submit { align-self: flex-end; }
.vxhx-submit .vxhx-btn { height: 42px; padding: 0 24px; border-radius: 999px; background: #901018; color: #fff; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
.vxhx-submit .vxhx-btn:hover { background: #000; }

/* Result Styles */
.vxhx-result-container { width: 100%; max-width: none; margin: 0 auto; box-sizing: border-box; }
.vxhx-result-header { margin-bottom: 20px; }
.vxhx-main-content { display: flex; gap: 30px; margin-bottom: 30px; align-items: flex-start; }
.vxhx-compass-wrapper { flex: 0 0 auto; min-width: 0; }
.vxhx-compass-wrapper > div { margin: 0 !important; }
#vxhx-result { position: relative; min-height: 40px; }
#vxhx-result.vxhx-loading { min-height: 400px; opacity: 0.7; }
#vxhx-result.vxhx-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #d32f2f;
    border-radius: 50%;
    animation: vxhx-spin 1s linear infinite;
    z-index: 100;
}
#vxhx-result.vxhx-loading::after {
    content: 'Đang tính toán hướng xây nhà...';
    position: absolute;
    top: calc(50% + 50px);
    left: 50%;
    transform: translateX(-50%);
    color: #d32f2f;
    font-weight: 600;
    font-size: 16px;
    z-index: 100;
}
@keyframes vxhx-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.vxhx-text-content { flex: 1; min-width: 0; }
.vxhx-text-content h4 { margin-top: 0; }
.vxhx-advice-section { margin-top: 30px; }
@media (max-width: 768px) {
    .vxhx-main-content { flex-direction: column; gap: 20px; }
    .vxhx-compass-wrapper { width: 100%; }
    .vxhx-compass-wrapper > div { text-align: center; }
}