/* =========================================================
   baogia.css — UI cho nút nổi + form popup + dropdown tỉnh
   ========================================================= */

/* ====================== NÚT NỔI (không dùng id) ====================== */
.baogia-float-btn{
    position: fixed;
    bottom: 30px;
    top: auto;
    right: 80px;
    /* transform: translateY(-50%) rotate(180deg); */
    transform-origin: right center;
    z-index: 1055;
    display: inline-block;
    color: #fff;
    padding: 12px 8px;
    border-radius: 0px 8 8 0px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    /* writing-mode: vertical-rl; */
    text-orientation: mixed;
    letter-spacing: 2px;
    text-align: center;
}

.baogia-float-btn:hover{ background:#0056b3; box-shadow:0 8px 24px rgba(0,0,0,.18); text-decoration:none; }
.baogia-float-btn em{ margin-right:6px; font-size:1.35em; vertical-align:middle; }

/* Mobile */
@media (max-width: 991px){
  .baogia-float-btn{
    top: auto;
    bottom: 20px;
    right: 0;
    transform: none;
    writing-mode: horizontal-tb; /* về ngang cho dễ bấm trên mobile */
    border-radius: 8px;
    padding: 14px 14px;
  }
}

/* =============== FORM POPUP (Modal) & Trạng thái lỗi =============== */
#baogiaModal .baogia-result{ margin-top:10px; }
#baogiaModal .invalid-feedback{ font-size:13px; }

/* Trạng thái lỗi (đồng bộ với JS nhưng đưa về CSS để dễ quản lý) */
.is-invalid{
  border-color:#dc3545 !important;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;
}
.form-group.has-error .input-group > .form-control{ border-color:#dc3545 !important; }
.form-group.has-error .input-group{ border-color:#dc3545; }

/* Nút submit khi đang disabled do reCAPTCHA */
#baogiaModal .btn[disabled],
#baogiaModal .btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* ================== Ô ĐỊA CHỈ: Autocomplete tỉnh ================== */
/* Bao ngoài input để định vị dropdown (đặt thêm class này vào group) */
.baogia-province-wrap{
  position: relative;
  overflow: visible; /* để danh sách không bị cắt */
}

/* Hộp gợi ý: bám ngay dưới input, KHÔNG che input */
.baogia-province-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none; /* JS sẽ bật tắt */
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  z-index: 1070; /* cao hơn modal (Bootstrap modal ~1050) */
  margin-top: 30px;
  font-size: 13px;
}

/* Item trong danh sách */
.baogia-province-suggest li{
  display: block;
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.25;
  border-bottom: 1px solid #f3f5f8;
  color: #212529;
  user-select: none;
}
.baogia-province-suggest li:last-child{ border-bottom: none; }
.baogia-province-suggest li:hover,
.baogia-province-suggest li.active{
  background: #f5f7fb;
}

/* Trạng thái “không có kết quả” */
.baogia-province-suggest .empty{
  padding: 10px 12px;
  color: #6c757d;
  cursor: default;
}

/* Responsive: thu gọn chiều cao list ở màn hình nhỏ */
@media (max-width: 575px){
  .baogia-province-suggest{ max-height: 220px; }
}

/* ================== TINH CHỈNH KHÁC (nhẹ) ================== */
/* Giảm khoảng trống khi input group có icon */
.input-group .input-group-addon em.fa{ min-width: 16px; text-align: center; }

/* Ẩn margin mặc định của danh sách UL nếu có */
.baogia-province-suggest{ list-style: none; }

/* ============== (Tuỳ chọn) Giữ tương thích CSS cũ ============== */
/* Nếu còn phần tử cũ dùng id #baogiaButton, vô hiệu hoá layout cố định
   để tránh xung đột. Có thể xoá hẳn block này nếu đã gỡ HTML cũ. */
#baogiaButton, #baogiaButton .panel, #baogiaButton .ctb{ position: static !important; width: auto !important; right: auto !important; bottom: auto !important; }
#baogiaButton .panel{ display: none !important; }
#baogiaButton .btn{ font-weight: 600; }



/* Tùy chỉnh cho nút gửi báo giá */
#baogiaSubmitBtn {
    /* Nền gradient và đổ bóng */
    background: linear-gradient(45deg, #FF5722, #FFC107); /* Màu cam đến vàng */
    border: none;
    box-shadow: 0 8px 15px rgba(255, 87, 34, 0.4); /* Đổ bóng mạnh mẽ hơn */
    color: white; /* Chữ trắng */
    font-size: 1.25rem; /* Chữ to hơn */
    font-weight: bold; /* Chữ đậm */
    padding: 15px 30px; /* Đệm lớn hơn */
    border-radius: 8px; /* Bo tròn góc */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    text-transform: uppercase; /* Chữ in hoa */
    letter-spacing: 1px; /* Khoảng cách chữ */
    position: relative; /* Dùng cho hiệu ứng hover */
    overflow: hidden; /* Ẩn các hiệu ứng tràn ra ngoài */
    transform: scale(1); /* Kích thước ban đầu */
}

/* Hiệu ứng khi di chuột vào (Hover) */
#baogiaSubmitBtn:hover {
    background: linear-gradient(45deg, #FFC107, #FF5722); /* Đổi chiều gradient hoặc màu */
    box-shadow: 0 12px 20px rgba(255, 87, 34, 0.6); /* Đổ bóng mạnh hơn nữa */
    transform: scale(1.05); /* Phóng to nút một chút */
    cursor: pointer; /* Đảm bảo con trỏ thành hình bàn tay */
}

/* Hiệu ứng khi nhấn giữ (Active/Click) */
#baogiaSubmitBtn:active {
    transform: scale(0.98); /* Nhấn chìm nút xuống một chút */
    box-shadow: 0 5px 10px rgba(255, 87, 34, 0.3); /* Đổ bóng nhỏ hơn */
}

/* Hiệu ứng nhấp nháy (Attention-grabbing effect) */
/* Thêm class này khi cần nút nhấp nháy, ví dụ khi trang vừa tải xong */
#baogiaSubmitBtn.blink {
    animation: pulse 1.5s infinite; /* Hiệu ứng phập phồng */
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 8px 15px rgba(255, 87, 34, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 12px 20px rgba(255, 87, 34, 0.6); }
    100% { transform: scale(1); box-shadow: 0 8px 15px rgba(255, 87, 34, 0.4); }
}

/* Tùy chỉnh icon */
#baogiaSubmitBtn i.fa {
    margin-right: 8px; /* Khoảng cách giữa icon và chữ */
    animation: bounce 2s infinite; /* Icon nảy nhẹ */
    display: inline-block; /* Đảm bảo animation hoạt động */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* Nếu nút bị disabled */
#baogiaSubmitBtn:disabled {
    background: #ccc !important; /* Màu xám */
    box-shadow: none !important;
    cursor: not-allowed !important; /* Con trỏ cấm */
    transform: scale(1) !important; /* Không có hiệu ứng phóng to */
    animation: none !important; /* Bỏ hiệu ứng nhấp nháy */
}

/* Căn giữa dọc + ngang cho modal báo giá (BS3) */
#baogiaModal.modal {
  text-align: center;
  padding-left: 0 !important; /* Ghi đè một số style mặc định */
}

@media screen and (min-width: 768px) {
  #baogiaModal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

#baogiaModal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}