/* ===== Bảng màu & font chủ đạo - Nhà đất Dương Gia ===== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root {
  --brown-900: #3A2418;
  --brown-earth: #5C3A21;
  --orange-600: #C1620B;
  --amber-500: #E0A035;
  --cream-100: #FBF3E8;
  --brown-100: #EFE1D3;
  --ink-800: #2B2320;
  --text-muted: #6B5B4F;

  --status-pending: #B8860B;
  --status-approved: #3F7D4C;
  --status-rejected: #A83A3A;

  --nav-height: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Be Vietnam Pro', sans-serif;
  background: var(--cream-100);
  color: var(--ink-800);
  line-height: 1.5;
}

/* ===== Khung app duy nhất, giới hạn chiều rộng như 1 điện thoại, canh giữa màn hình ===== */
.app-shell {
  max-width: 640px;
  margin: 0 auto;
  background: var(--cream-100);
  min-height: 100vh;
  position: relative;
}
@media (min-width: 700px) {
  body { background: var(--brown-100); }
  .app-shell {
    box-shadow: 0 0 0 1px var(--brown-100), 0 8px 30px rgba(58, 36, 24, 0.10);
  }
}

/* ===== Thanh tiêu đề trên cùng ===== */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--brown-earth);
  border-bottom: 1px solid var(--brown-earth);
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-bar a.back-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.top-bar .top-bar-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* ===== Nội dung trang ===== */
.page-wrap {
  padding: 20px 16px 24px;
  padding-bottom: calc(var(--nav-height) + 24px + env(safe-area-inset-bottom));
}
.page-wrap.co-bottom-bar {
  padding-bottom: calc(var(--nav-height) + 90px + env(safe-area-inset-bottom));
}
/* Trang có nút hành động sát đáy màn hình (đi kèm .bottom-action-bar.sat-day) */
.page-wrap.co-bottom-bar.co-sat-day {
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.section-card {
  background: #fff;
  border: 1px solid var(--brown-100);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
}
.section-card.sensitive {
  border: 1px solid #E3C7A8;
  background: #FFF9F0;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown-900);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Khối con bên trong 1 nhóm lớn, nền nhạt hơn, có tiêu đề nhỏ */
.field-group {
  background: var(--cream-100);
  border: 1px solid var(--brown-100);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.field-group:last-child { margin-bottom: 0; }
.field-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.field-group .form-input, .field-group textarea {
  background: #fff;
}

/* ===== Form chung ===== */
.form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.form-input, select.form-input, textarea.form-input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--brown-100);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink-800);
  margin-bottom: 16px;
}
.form-input:focus { outline: none; border-color: var(--orange-600); }
.form-input.error {
  border-color: var(--status-rejected);
  background: #FBEDED;
}
.field-error-text {
  display: block;
  font-size: 12px;
  color: var(--status-rejected);
  margin-top: -12px;
  margin-bottom: 16px;
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5B4F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
textarea.form-input { resize: vertical; min-height: 90px; }

.btn-primary {
  background: var(--orange-600);
  color: var(--cream-100);
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
.btn-primary:hover { background: #A8540A; }

.alert-error {
  background: #F3E1E1;
  color: var(--status-rejected);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.notice-banner {
  background: #FBF0DC;
  color: #8A6A0B;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

/* Ô mật khẩu có nút con mắt ẩn/hiện */
.password-wrapper {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--brown-100);
  border-radius: 10px;
  margin-bottom: 16px;
}
.password-wrapper:focus-within { border-color: var(--orange-600); }
.password-wrapper .form-input {
  border: none;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.password-wrapper .form-input:focus { outline: none; }
.toggle-password {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-password:hover { color: var(--orange-600); }
.toggle-password svg { width: 18px; height: 18px; display: block; }

/* Lưới 2 cột cho các field ngắn */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.form-grid > div.full {
  grid-column: 1 / -1;
}
@media (max-width: 380px) {
  .row-2, .form-grid { grid-template-columns: 1fr; flex-direction: column; gap: 0; }
}
.row-2 { display: flex; gap: 12px; }
.row-2 > div { flex: 1; }

/* Đông/Tây tứ trạch, ghi chú tự động */
.tu-trach-note {
  font-size: 12px;
  color: var(--orange-600);
  font-weight: 500;
  margin-top: -12px;
  margin-bottom: 16px;
  display: none;
}

/* Chip chọn nhiều (Điểm mạnh, Công năng, Tiện ích...) */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-group input[type="checkbox"] { display: none; }
.chip-group label {
  border: 1px solid var(--brown-100);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink-800);
  cursor: pointer;
  background: #fff;
}
.chip-group input[type="checkbox"]:checked + label {
  background: var(--orange-600);
  border-color: var(--orange-600);
  color: #fff;
  font-weight: 600;
}

input[type="file"] {
  font-size: 13px;
  padding: 10px;
}
.file-input-note { font-size: 11px; color: var(--text-muted); margin-top: -10px; margin-bottom: 16px; }

.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 20px; font-weight: 700; color: var(--brown-900); }
.page-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ===== Thanh nút hành động riêng của từng trang (VD nút Gửi), nằm ngay trên nav bar ===== */
.bottom-action-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--brown-100);
  padding: 12px 16px;
  z-index: 25;
}
/* Biến thể cho trang không có nav bar dưới: nút sát đáy màn hình, cách mép khoảng 10px */
.bottom-action-bar.sat-day {
  bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

/* ===== Nav bar dưới cùng, dùng chung toàn app (nền nâu đất, đồng bộ với thanh trên) ===== */
/* Chiều cao = 60px phần icon + khoảng trống an toàn sát đáy (vạch Home iPhone),
   để icon luôn nằm giữa theo chiều dọc, không bị tràn lên trên */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 640px;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  background: var(--brown-earth);
  border-top: 1px solid var(--brown-earth);
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--brown-100);
  font-size: 11px;
}
.bottom-nav a.active { color: var(--amber-500); font-weight: 600; }
.bottom-nav .nav-icon { font-size: 18px; line-height: 1; }
.bottom-nav .nav-center { position: relative; flex: 1; display: flex; justify-content: center; }
.bottom-nav .nav-center .nav-center-btn {
  position: absolute;
  top: -22px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--orange-600);
  border: 3px solid var(--cream-100);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(58, 36, 24, 0.35);
  text-decoration: none;
}
.bottom-nav .nav-center-btn.active { background: var(--amber-500); color: var(--brown-900); }
.bottom-nav .nav-center .nav-label {
  position: absolute;
  top: 30px;
  font-size: 11px;
  color: var(--amber-500);
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Tab con trong 1 trang (VD: Chờ duyệt / Chờ duyệt sửa / Lịch sử) ===== */
.tab-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab-pills a {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--brown-100);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-pills a.active {
  background: var(--orange-600);
  color: #fff;
  border-color: var(--orange-600);
}

/* Badge số đếm nhỏ, cạnh link/tab */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--status-rejected);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* Thẻ 1 tin trong danh sách duyệt */
.listing-card {
  border: 1px solid var(--brown-100);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
}
.listing-card .listing-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brown-900);
  margin-bottom: 4px;
}
.listing-card .listing-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.pending { background: #FBF0DC; color: var(--status-pending); }
.status-pill.approved { background: #E4EFE4; color: var(--status-approved); }
.status-pill.rejected { background: #F3E1E1; color: var(--status-rejected); }
.status-pill.da_coc { background: #FBE3CF; color: var(--orange-600); }
.status-pill.da_chot { background: #E1EAF5; color: #1F4E8C; }
.status-pill.tam_ngung { background: var(--brown-100); color: var(--text-muted); }

.action-row { display: flex; gap: 8px; margin-top: 10px; }
.action-row form { flex: 1; }
.btn-approve, .btn-reject {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-approve { background: var(--status-approved); color: #fff; }
.btn-reject { background: #fff; color: var(--status-rejected); border: 1px solid var(--status-rejected); }

.reject-box {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--brown-100);
}
.reject-box textarea {
  min-height: 60px;
}

/* ===== Quản lý người dùng ===== */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--brown-100);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.search-box input {
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  background: transparent;
  color: var(--ink-800);
}
.user-card {
  background: #fff;
  border: 1px solid var(--brown-100);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.user-card-top { display: flex; gap: 10px; align-items: flex-start; }
.avatar-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brown-900); color: var(--amber-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.user-name { font-size: 14px; font-weight: 700; color: var(--ink-800); }
.user-email { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
.role-badge, .status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
}
.role-badge.chuyen_gia, .role-badge.chuyen_vien { background: #FBF0DC; color: #8A6A0B; }
.role-badge.tong_giam_doc { background: #FCE4D4; color: #A8460B; }
.role-badge.truong_phong_phap_ly { background: #DCEAF7; color: #1F5C8A; }
.role-badge.team_leader { background: #E6DCF5; color: #5B3B9E; }
.role-badge.giam_doc_vung { background: #F5DCE6; color: #9E3B6E; }
.status-badge.hoat_dong { background: #E4EFE4; color: var(--status-approved); }
.status-badge.khoa { background: #F3E1E1; color: var(--status-rejected); }
.status-badge.cho_duyet { background: #FBF0DC; color: var(--status-pending); }
.user-actions {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--brown-100);
}
.btn-mini {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--cream-100); border: 1px solid var(--brown-100); border-radius: 8px;
  padding: 7px; font-size: 11px; color: var(--ink-800); font-family: inherit;
  cursor: pointer; text-decoration: none; flex: 1;
}
.btn-mini.danger { background: #F3E1E1; border-color: #E3BEBE; color: var(--status-rejected); flex: 0 0 34px; }
.btn-mini.success { background: #E4EFE4; border-color: #C7DEC7; color: var(--status-approved); }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stat-card { background: #fff; border: 1px solid var(--brown-100); border-radius: 12px; padding: 12px 6px; text-align: center; }
.stat-card .stat-number { font-size: 20px; font-weight: 700; color: var(--brown-900); }
.stat-card .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.menu-wrap { position: relative; flex-shrink: 0; }
.menu-trigger {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--brown-100);
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--text-muted);
}
.menu-dropdown {
  display: none; position: absolute; right: 0; top: 38px; background: #fff;
  border: 1px solid var(--brown-100); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(58,36,24,0.12); min-width: 170px; z-index: 40; overflow: hidden;
}
.menu-dropdown.open { display: block; }
.menu-dropdown a, .menu-dropdown button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 13px; color: var(--ink-800); background: none; border: none;
  text-decoration: none; font-family: inherit; cursor: pointer;
}
.menu-dropdown a:hover, .menu-dropdown button:hover { background: var(--cream-100); }
.menu-dropdown .danger-item { color: var(--status-rejected); }
.menu-dropdown .divider { border-top: 1px solid var(--brown-100); margin: 4px 0; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--brown-100); background: #fff; font-size: 13px;
  color: var(--ink-800); text-decoration: none;
}
.pagination a.active, .pagination span.active { background: var(--orange-600); color: #fff; border-color: var(--orange-600); }

/* ===== Danh sách & Chi tiết Nguồn nhà đã duyệt ===== */
.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-row select { margin-bottom: 0; }

.property-card {
  display: flex; gap: 12px; align-items: flex-start;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--brown-100); border-radius: 14px;
  padding: 12px; margin-bottom: 12px;
}
.property-card .property-thumb {
  width: 88px; height: 88px; border-radius: 10px; object-fit: cover;
  flex-shrink: 0; background: var(--cream-100);
}
.property-card .no-img {
  width: 88px; height: 88px; border-radius: 10px; background: var(--cream-100);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--text-muted); font-size: 10px; flex-shrink: 0; padding: 4px;
}
.property-card-body { flex: 1; min-width: 0; }
.property-title {
  font-size: 13px; font-weight: 700; color: var(--ink-800);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.property-location {
  font-size: 11px; color: var(--text-muted); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.property-price { font-size: 15px; font-weight: 700; color: var(--orange-600); margin-bottom: 6px; }
.property-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.property-agent { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.status-pill.con_hang { background: #E4EFE4; color: var(--status-approved); }
.status-pill.da_ban, .status-pill.da_cho_thue { background: var(--brown-100); color: var(--text-muted); }

.tag-chip {
  display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px;
  background: var(--cream-100); color: var(--ink-800); border: 1px solid var(--brown-100); margin: 0 6px 6px 0;
}

.gallery-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: var(--cream-100); }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; }
.gallery-thumbs img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  border: 2px solid transparent; cursor: pointer;
}
.gallery-thumbs img.active { border-color: var(--orange-600); }

.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--brown-100); font-size: 13px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .kv-label { color: var(--text-muted); }
.kv-row .kv-value { font-weight: 600; color: var(--ink-800); text-align: right; }

/* ===== Popup đang tải thông tin lên máy chủ (kèm thanh tiến độ) ===== */
.popup-tai-len {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(58, 36, 24, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.popup-tai-len.hien { display: flex; }
.popup-tai-len-hop {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}
.popup-tai-len-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown-900);
  margin-bottom: 16px;
}
.thanh-tai-len {
  height: 10px;
  background: var(--brown-100);
  border-radius: 5px;
  overflow: hidden;
}
.thanh-tai-len-chay {
  height: 100%;
  width: 0;
  background: var(--orange-600);
  border-radius: 5px;
  transition: width 0.2s ease;
}
.popup-tai-len-phan-tram {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Chu bao loi nam duoi o, khong de len vien (o co margin-bottom:0) */
.form-input.error[style*="margin-bottom:0"] + .field-error-text {
  margin-top: 6px;
  margin-bottom: 12px;
}