body {
    background-color: #faf6f1;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #3b2b26;
}

.hero {
    background: linear-gradient(135deg, #6b4423, #8a5a3b);
    color: #fff;
    border-radius: 16px;
    padding: 60px 30px;
    margin-bottom: 30px;
}

.card-service {
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transition: transform .15s ease;
    height: 100%;
}
.card-service:hover {
    transform: translateY(-4px);
}

.badge-status-pending { background-color: #f0ad4e; }
.badge-status-confirmed { background-color: #5bc0de; }
.badge-status-completed { background-color: #5cb85c; }
.badge-status-cancelled { background-color: #d9534f; }

.btn-brand {
    background-color: #6b4423;
    color: #fff;
    border: none;
}
.btn-brand:hover {
    background-color: #543319;
    color: #fff;
}

.auth-card {
    max-width: 480px;
    margin: 20px auto;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ===================== Tối ưu cho điện thoại (màn hình dưới 576px) ===================== */
@media (max-width: 576px) {
    .hero {
        padding: 28px 16px;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    .hero h1 {
        font-size: 1.5rem;
    }
    .hero p.fs-5 {
        font-size: 0.95rem !important;
    }
    .navbar-brand img {
        height: 32px !important;
    }
    .card, .card-service {
        border-radius: 12px;
    }
    h2.fw-bold {
        font-size: 1.35rem;
    }
    h3.fw-bold {
        font-size: 1.2rem;
    }
    /* Nút liên hệ nổi thu nhỏ lại một chút để không chiếm quá nhiều diện tích màn hình nhỏ */
    body > div[style*="position:fixed"][style*="right:20px"] a {
        width: 46px !important;
        height: 46px !important;
    }
    .table-responsive table {
        font-size: 0.85rem;
    }
    .container.py-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Các nút trong khối hero luôn xuống dòng gọn gàng, không bị tràn ngang trên màn hình hẹp */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Ô tìm kiếm trên navbar: full width khi menu mở trên điện thoại, giới hạn width trên desktop */
.navbar-search-box {
    width: 100%;
}
@media (min-width: 992px) {
    .navbar-search-box {
        width: auto;
        max-width: 260px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* Tên nhân viên luôn viết hoa chữ cái đầu mỗi từ, đồng nhất kiểu chữ dù admin/nhân viên gõ hoa/thường lẫn lộn */
.staff-name {
    text-transform: capitalize;
}

/* Hiệu ứng nhấp nháy nhẹ nhàng nhắc nhở dùng chat khi có đơn vừa xác nhận, chưa nhắn tin */
@keyframes chat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(13, 110, 253, 0); }
}
.chat-reminder {
    animation: chat-pulse 1.8s infinite;
}

/* Màu chữ/icon khi mục đang được chọn trên thanh menu cố định dưới cùng (điện thoại) */
.text-brand {
    color: #6b4423 !important;
}

/* ===== Widget "Chat khu vực" (group chat theo khu vực, nhiều cửa sổ mini cùng lúc) ===== */
#areaChatRoot { position: fixed; left: 16px; bottom: 140px; z-index: 1055; }
@media (min-width: 992px) { #areaChatRoot { bottom: 24px; } }

/* Nút dạng "viên thuốc" có icon + CHỮ để khách hiểu ngay là bấm vào để chat, không phải đoán qua icon.
   Thêm hiệu ứng toả sáng nhấp nháy nhẹ (area-chat-pulse) để thu hút ánh nhìn mà không gây khó chịu. */
#areaChatLauncherBtn {
  height: 50px; padding: 0 16px 0 14px; border-radius: 999px; background: #6b4423; border: none;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  color: #fff; font-size: 20px; position: relative; white-space: nowrap;
  animation: area-chat-pulse 2.6s ease-in-out infinite;
}
.area-chat-launcher-text { font-size: 13.5px; font-weight: 700; }
@keyframes area-chat-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.3), 0 0 0 0 rgba(107,68,35,.55); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,.3), 0 0 0 9px rgba(107,68,35,0); }
}
.area-chat-badge {
  position: absolute; top: -4px; right: -4px; background: #dc3545; color: #fff; border-radius: 999px;
  font-size: 11px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Bong bóng gợi ý tự hiện 1 lần cho người mới, giải thích rõ chức năng của nút bên cạnh */
#areaChatTooltip {
  position: absolute; left: 0; bottom: 60px; width: max-content; max-width: 220px;
  background: #fff; color: #333; font-size: 12.5px; line-height: 1.4; padding: 10px 12px;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s;
}
#areaChatTooltip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#areaChatTooltip::after {
  content: ''; position: absolute; left: 20px; bottom: -6px; width: 12px; height: 12px;
  background: #fff; transform: rotate(45deg);
}

#areaChatPanel {
  position: absolute; left: 0; bottom: 60px; width: min(320px, 88vw); max-height: 70vh;
  background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column;
}
.area-chat-panel-head { background: #6b4423; color: #fff; padding: 10px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.area-chat-panel-body { padding: 12px; overflow-y: auto; }
.area-chat-close-x { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; }
.area-chat-room-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.area-chat-room-row:hover { background: #f7f3ee; }

/* Dock các cửa sổ chat mini: đặt NGAY PHÍA TRÊN nút launcher (không đặt cạnh bên) để không phụ thuộc
   bề rộng nút (nút giờ là pill có chữ, rộng hơn hình tròn cũ) và vẫn đủ chỗ ngang trên điện thoại. */
#areaChatDock {
  position: fixed; left: 16px; bottom: 204px; z-index: 1054; display: flex; flex-direction: row; gap: 10px;
  align-items: flex-end; max-width: calc(100vw - 32px); overflow-x: auto; padding-bottom: 2px;
}
@media (min-width: 992px) { #areaChatDock { bottom: 88px; } }

.area-chat-win {
  width: min(270px, 78vw); flex: 0 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.28);
  overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start;
}
.area-chat-win-head {
  background: #6b4423; color: #fff; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.area-chat-win-controls { display: flex; gap: 4px; }
.area-chat-win-controls button { background: rgba(255,255,255,.15); border: none; color: #fff; width: 22px; height: 22px; border-radius: 5px; font-size: 12px; }
/* Giới hạn theo vh để không tràn màn hình ở điện thoại nằm ngang / màn hình thấp */
.area-chat-win-body { display: flex; flex-direction: column; height: min(340px, 56vh); }
.area-chat-win-collapsed .area-chat-win-body { display: none; }
.area-chat-messages { flex: 1; overflow-y: auto; padding: 8px; background: #f7f3ee; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 480px) {
  #areaChatRoot { left: 10px; bottom: 120px; }
  #areaChatDock { left: 10px; bottom: 184px; gap: 8px; max-width: calc(100vw - 20px); scroll-snap-type: x proximity; }
  #areaChatLauncherBtn { height: 46px; padding: 0 13px 0 11px; font-size: 18px; }
  .area-chat-launcher-text { font-size: 12.5px; }
}



.area-chat-bubble-wrap { display: flex; }
.area-chat-bubble-wrap.me { justify-content: flex-end; }
.area-chat-bubble-wrap.other { justify-content: flex-start; }
.area-chat-bubble { max-width: 85%; padding: 6px 9px; border-radius: 10px; font-size: 12.5px; white-space: pre-line; }
.area-chat-bubble-wrap.me .area-chat-bubble { background: #6b4423; color: #fff; }
.area-chat-bubble-wrap.other .area-chat-bubble { background: #fff; color: #333; border: 1px solid #e5ddd3; }
.area-chat-sender { font-weight: 700; font-size: 11px; margin-bottom: 2px; opacity: .85; }
.area-chat-role-tag { background: #eadfce; color: #6b4423; border-radius: 4px; padding: 0 4px; font-size: 9px; }
.area-chat-time { font-size: 9.5px; opacity: .7; margin-top: 2px; }
.area-chat-img { max-width: 170px; max-height: 170px; border-radius: 8px; display: block; cursor: pointer; }
.area-chat-img-note { font-size: 9.5px; opacity: .8; margin-top: 2px; }
.area-chat-img-hidden { font-size: 11.5px; font-style: italic; opacity: .8; }

.area-chat-preview { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f0e8dd; }
.area-chat-preview-img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.area-chat-input-bar { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee; }
.area-chat-attach-btn { border: 1px solid #ddd; background: #fff; border-radius: 6px; width: 34px; }

/* Banner "Chốt nhận khách" trong cửa sổ chat khu vực */
.area-chat-claim-banner { padding: 8px; }
.area-chat-claim-banner.success { background: #e6f7ee; color: #146c43; font-size: 12px; padding: 8px; text-align: center; }
.area-chat-claim-banner.closed { background: #f8d7da; color: #842029; font-size: 12px; padding: 8px; text-align: center; }

/* Nút "Hỗ trợ cài đặt AI" ở góc dưới phải: thu gọn chữ trên màn hình rất nhỏ để không bị tràn ngang */
@media (max-width: 380px) {
  #installAiToggleBtn span { font-size: 12px; }
  #installAiToggleBtn { padding: 0 11px 0 10px; height: 40px; }
  #installAiToggleBtn i { font-size: 17px; }
}