cũ - giữ định dạng dán
   vào từ Word/trang web, xem create_post.php) - CÙNG kiểu dáng với textarea
   cũ ở trên cho 2 chế độ (thường/nền màu), không lệch nhau. */
.composer-text-box .composer-rich-editor {
  width: 100%; min-height: 220px; border: none; background: transparent; outline: none;
  font-family: var(--font-body); padding: 16px; box-sizing: border-box; font-size: 18px; color: var(--ink-900);
}
.composer-text-box .composer-rich-editor:empty::before {
  content: attr(data-placeholder); color: var(--ink-500); pointer-events: none;
}
/* SỬA LỖI "danh sách lòi ra ngoài, mất định dạng": trình duyệt mặc định thụt
   lề <ul>/<ol> khá rộng (~40px) và không giới hạn chiều rộng - trong khung
   soạn thảo hẹp, danh sách bị TRÀN RA NGOÀI khung, nhìn vỡ layout. Giới hạn
   lại thụt lề vừa phải + đảm bảo nằm gọn trong khung. */
.composer-rich-editor ul, .composer-rich-editor ol {
  margin: 6px 0; padding-left: 22px; max-width: 100%; box-sizing: border-box;
}
.composer-rich-editor li { margin-bottom: 2px; word-break: break-word; }
.composer-text-box.has-bg .composer-rich-editor {
  color: #fff; font-size: 26px; font-weight: 700; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.3);
  min-height: 80px; padding: 0;
}
.composer-text-box.has-bg .composer-rich-editor:empty::before { color: rgba(255,255,255,.85); }
/* SỬA LỖI "nút Danh sách dư chữ, tràn ra ngoài khung vuông 30x30": B/I/U chỉ
   có 1 ký tự nên vừa khít ô vuông, nhưng "• Danh sách" dài hơn hẳn nên bị vỡ
   layout khi ép width cố định. Đổi sang min-width + padding ngang để nút tự
   giãn theo đúng độ dài chữ, không còn bị cắt/tràn chữ nữa. Đồng thời tách
   hẳn toolbar thành 1 dải riêng (nền xám nhạt, bo góc trên theo đúng bo góc
   của .composer-card, viền dưới) thay vì để nút nổi trơ trên nền trắng dính
   sát mép thẻ - có khoảng đệm rõ ràng ở 4 phía, nhìn chuyên nghiệp/hiện đại
   hơn, không còn cảm giác "dính viền". */
.composer-rich-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; margin: 0 -16px 10px;
  background: var(--page-bg); border-bottom: 1px solid var(--border);
}
.composer-rich-toolbar button {
  min-width: 34px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: #fff; cursor: pointer; box-sizing: border-box;
  font-size: 13px; font-weight: 600; color: var(--ink-700); font-family: var(--font-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.composer-rich-toolbar button:hover { background: var(--active-bg); border-color: var(--forest-500); color: var(--forest-700); }
.composer-rich-toolbar button:active { transform: scale(.94); }

/* ---------- Trang tạo bài viết (/create_post.php) - khung thẻ trắng nổi
   bật trên nền xám của app thay vì để mọi thứ bẹt phẳng không viền/không
   bóng đổ như trước (nhìn thiếu điểm nhấn, không khác gì nền trang) -
   dùng ĐÚNG ngôn ngữ thiết kế "thẻ trắng bo góc + đổ bóng nhẹ" đã áp dụng
   ở các nơi khác trong app (VD .side-calendar-card bên property.php) để
   đồng bộ toàn hệ thống. ---------- */
.composer-page { padding: 14px; }
.composer-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); overflow: hidden;
}
.composer-head {
  display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px;
  background: linear-gradient(180deg, var(--active-bg), rgba(232,245,233,0));
  border-bottom: 1px solid var(--border);
}
.composer-head .avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--white); }
.composer-visibility-select {
  -webkit-appearance: none; appearance: none;
  font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 5px 26px 5px 12px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2365676b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink-900); font-family: var(--font-body); font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer-visibility-select:hover { border-color: var(--forest-500); }
.composer-visibility-select:focus { outline: none; border-color: var(--forest-500); box-shadow: 0 0 0 3px var(--active-bg); }
.composer-body { padding: 0 18px 18px; }

/* Hàng 3 nút "Ảnh/Video · Check in · Gắn thẻ" - trước đây chỉ là <div
   style="display:flex;gap:8px"> dán thẳng ngay sát nút "Đăng" bên dưới
   (margin-bottom:0), nhìn dính chùm vào nhau. Giờ tách hẳn thành khối riêng
   có nền xám nhạt bao quanh + khoảng cách rõ ràng phía trên VÀ phía dưới
   trước khi tới nút "Đăng", đồng thời thêm hiệu ứng hover/nhấn cho từng nút
   để có cảm giác "bấm được" rõ ràng hơn thay vì phẳng lì. */
.composer-actions-row {
  display: flex; gap: 8px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
}
.composer-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 6px;
  cursor: pointer; font-weight: 600; font-size: 13.5px; background: var(--page-bg);
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.composer-action-btn:hover { background: var(--active-bg); border-color: var(--forest-500); }
.composer-action-btn:active { transform: scale(.96); }
.composer-action-btn.is-media { color: var(--forest-700); }
.composer-action-btn.is-checkin { color: var(--clay-600); }
.composer-action-btn.is-tag { color: #1877F2; }

/* Chừa khoảng cách RÕ RỆT giữa hàng 3 nút phía trên và nút "Đăng" phía dưới
   (trước đây .btn-continue có margin:0 nên dính sát luôn vào hàng nút trên) */
.composer-submit-wrap { margin-top: 16px; }

/* ---------- Mở rộng bộ phông nền bài viết (18 mẫu, không sao chép ảnh độc quyền) ---------- */
.bg-1  { background: linear-gradient(135deg,#a1c4fd,#c2e9fb); }
.bg-2  { background: linear-gradient(135deg,#6a82fb,#fc5c7d); }
.bg-3  { background: linear-gradient(135deg,#d3a17e,#f7e6d0); }
.bg-4  { background: linear-gradient(135deg,#8e2de2,#c0392b); }
.bg-5  { background: linear-gradient(135deg,#0f2027,#203a43,#2c5364); }
.bg-6  { background: linear-gradient(135deg,#bdc3c7,#8b8fa3); }
.bg-7  { background: linear-gradient(135deg,#ffafbd,#ffc3a0); }
.bg-8  { background: linear-gradient(135deg,#eb3349,#f45c43); }
.bg-9  { background: linear-gradient(135deg,#a8e063,#56ab2f); }
.bg-10 { background: #fdf1e7; }
.bg-11 { background: linear-gradient(135deg,#cfd9df,#e2ebf0); }
.bg-12 { background: linear-gradient(135deg,#a1ffce,#faffd1); }
.bg-13 { background: linear-gradient(135deg,#ffd452,#ffb75e); }
.bg-14 { background: radial-gradient(circle at 30% 30%, #3a1c71, #d76d77, #ffaf7b); }
.bg-15 { background: linear-gradient(135deg,#f3e7e9,#e3eeff); }
.bg-16 { background: linear-gradient(135deg,#ff9a9e,#fecfef); }
.bg-17 { background: linear-gradient(135deg,#f6d365,#fda085); }
.bg-18 { background: linear-gradient(135deg,#43cea2,#185a9d); }

/* ---------- Nút "Aa" mở màn hình chọn phông nền ---------- */
.aa-picker-btn {
  width: 40px; height: 40px; border-radius: 5px; border: none; cursor: pointer;
  background: linear-gradient(135deg,#ff2d78,#7b2ff7,#00c6ff,#ffce00);
  color: #fff; font-weight: 800; font-size: 15px; font-family: var(--font-body);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Màn hình chọn phông nền toàn màn hình ---------- */
.bg-picker-overlay {
  display: none; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 470px; background: var(--white); z-index: 260; overflow-y: auto;
}
.bg-picker-overlay.show { display: block; }
.bg-picker-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px;
}
.bg-picker-grid .bg-thumb {
  aspect-ratio: 1; border-radius: 10px; cursor: pointer; border: 3px solid transparent;
}
.bg-picker-grid .bg-thumb.selected { border-color: var(--forest-600); }
.bg-picker-grid .bg-thumb.none-thumb {
  background: var(--page-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-600); font-weight: 700;
}

/* ---------- Danh sách chọn người gắn thẻ ---------- */
.tag-user-row { position: relative; }
.tag-check-mark { display: none; color: var(--forest-600); font-weight: 800; font-size: 17px; }
.tag-user-row.tagged { background: rgba(47,92,68,.07); }
.tag-user-row.tagged .tag-check-mark { display: block; }
.tagged-chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--page-bg); border-radius: 5px;
  padding: 4px 10px 4px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-900);
}
/* .tagged-chip KHÔNG có <img> avatar thật nào (chỉ có icon 🏷️ + tên dạng
   chữ) - rule "img" ở đây từng là code thừa từ thiết kế cũ, GIỜ ĐÃ NGUY
   HIỂM: từ khi có Twemoji (footer.php), emoji 🏷️ tự động biến thành thẻ
   <img class="emoji"> - nếu còn rule này, icon 🏷️ sẽ bị ép cắt tròn 20x20
   méo mó. Xoá hẳn rule thừa/hại này. */
.tagged-chip button { border: none; background: none; color: var(--ink-600); cursor: pointer; font-size: 12px; padding: 0 2px; }

/* ---------- Trên màn hình đủ rộng (không chỉ riêng desktop to - cả laptop/
   cửa sổ trình duyệt cỡ vừa cũng tính): .checkin-overlay/.tagPickerOverlay/
   .bg-picker-overlay KHÔNG nên chiếm nguyên chiều cao màn hình (top:0;
   bottom:0) như mô phỏng "chuyển màn hình" trên di động nữa - nhìn "quá
   khổ" (1 dải trắng cao ngợp từ đầu tới cuối trình duyệt) so với phần còn
   lại của trang. Đổi thành 1 hộp thoại (modal) vừa phải, căn giữa MÀN
   HÌNH (cả ngang lẫn dọc), bo góc + đổ bóng, có lớp nền tối mờ phía sau
   (dùng box-shadow spread cực lớn thay vì thêm div nền riêng - đỡ phải
   sửa HTML/JS ở nhiều nơi đang dùng chung 2 class này). Y NGUYÊN hành vi
   full-màn-hình trên di động (không đụng gì tới CSS ở trên, chỉ áp dụng
   thêm từ đây trở lên).
   LƯU Ý: hạ mốc xuống 768px (thay vì 992px như phần bố cục 3 cột) - 1 khung
   tìm kiếm/gắn thẻ full-màn-hình vẫn "quá khổ" ngay cả trên cửa sổ trình
   duyệt cỡ vừa (laptop nhỏ, ~800-990px) dù chưa đủ rộng để bật bố cục 3
   cột - 2 việc này độc lập nhau nên dùng 2 mốc khác nhau là hợp lý. */
@media (min-width: 768px) {
  .checkin-overlay, .bg-picker-overlay {
    top: 50%; bottom: auto; left: 50%; margin: 0; transform: translate(-50%, -50%);
    width: 92%; max-width: 480px; height: auto; max-height: 80vh; border-radius: 16px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,.5), 0 20px 60px rgba(0,0,0,.3);
  }
}

/* ---------- Thanh chọn màu nền dàn ngang nhỏ gọn (dễ thương, không to) ---------- */
.quick-swatch-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; background: var(--page-bg); border-radius: 14px; margin: 10px 0; }
.composer-villa-panel { background: var(--page-bg); border-radius: 14px; padding: 14px; margin: 10px 0; }
.composer-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.composer-preview-grid img, .composer-preview-grid video { border-radius: 10px; }
.quick-swatch {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s;
}
.quick-swatch.selected { border-color: var(--ink-900); transform: scale(1.15); }
.quick-swatch.none-swatch {
  background: var(--page-bg); display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-600); border: 1px solid var(--border-strong);
}
.quick-swatch-more {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; cursor: pointer; border: none;
  background: var(--ink-900); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Reels: cuộn dọc full màn hình, mượt bằng scroll-snap gốc trình duyệt ---------- */
.reels-feed {
  height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; background: #000;
}
.reels-feed::-webkit-scrollbar { display: none; }
.reels-item {
  height: 100vh; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; display: flex; align-items: center; justify-content: center; background: #000;
}
.reels-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.reels-caption-wrap {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 24px; z-index: 3;
  transition: background .2s;
}
.reels-caption-wrap .reels-caption-backdrop {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); z-index: -1;
}
.reels-caption-wrap.expanded {
  bottom: 0; top: 0; padding-top: 70px; display: flex; flex-direction: column; justify-content: flex-end;
}
.reels-caption-wrap.expanded .reels-caption-backdrop { background: rgba(0,0,0,.72); }
.reels-caption-text {
  color: #fff; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6); line-height: 1.6; white-space: pre-line;
}
.reels-caption-toggle {
  display: block; margin-top: 8px; background: none; border: none; color: #fff; font-weight: 700;
  font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0;
}

/* ---------- Nút thoát Reels - luôn hiện rõ, z-index cao nhất trang ---------- */
.reels-back-btn {
  position: fixed; top: 16px; left: 50%; transform: translateX(calc(-235px + 16px));
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-decoration: none; z-index: 999; border: 1px solid rgba(255,255,255,.25);
}
@media (max-width: 470px) {
  .reels-back-btn { left: 16px; transform: none; }
}

/* ---------- Trình soạn thảo tiểu sử có định dạng ---------- */
.rich-toolbar { display: flex; gap: 6px; padding: 6px 0; flex-wrap: wrap; position: relative; }
.rich-toolbar button, .rich-color-btn {
  width: 32px; height: 32px; border-radius: 5px; border: 1px solid var(--border-strong);
  background: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); position: relative; overflow: hidden;
}
.rich-color-btn input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rich-editor {
  width: 100%; min-height: 100px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  margin-bottom: 18px; font-family: var(--font-body); font-size: 14px; box-sizing: border-box; outline: none;
}
.rich-editor ul, .rich-editor ol { padding-left: 20px; margin: 6px 0; }

/* ---------- Tab chọn chế độ tạo tin (chữ / ảnh-video) ---------- */
.story-mode-tab {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: #fff; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-600);
}
.story-mode-tab.active { background: var(--forest-600); color: #fff; border-color: var(--forest-600); }

/* ---------- Trang tạo tin (/create_story.php) - ĐỒNG BỘ với ngôn ngữ
   thiết kế "thẻ trắng bo góc + đổ bóng nhẹ" của .composer-card (trang Tạo
   bài viết) thay vì để mọi thứ trôi nổi trực tiếp trên nền xám của app
   (không viền/không bóng, nhìn thô/xấu, lệch hẳn phần còn lại) như trước.
   Tab chuyển chế độ (chữ/ảnh) vẫn đặt NGOÀI thẻ như 1 thanh điều hướng
   riêng, còn toàn bộ nội dung soạn tin nằm gọn trong .story-card. */
.story-composer-page { padding: 14px; }
.story-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); overflow: hidden; padding: 18px;
}

.story-mode-switch {
  display: flex; gap: 4px; background: var(--page-bg); border-radius: 12px;
  padding: 4px; margin-bottom: 14px;
}
.story-mode-switch .story-mode-tab {
  border: none; box-shadow: none; background: none; color: var(--ink-600);
}
.story-mode-switch .story-mode-tab.active {
  background: var(--white); color: var(--forest-700); box-shadow: 0 1px 4px rgba(0,0,0,.14); border-radius: 9px;
}

/* Khung chữ trên nền màu - ĐÚNG kích thước gốc (width:100% của cột chứa,
   max-height:420px, aspect-ratio:9/16), chỉ thêm bóng đổ + viền sáng mờ
   bên trong cho có chiều sâu, đỡ trông "dẹt" như 1 khối màu phẳng. */
.story-canvas {
  position: relative; width: 100%; max-height: 420px; aspect-ratio: 9/16;
  border-radius: 16px; overflow: hidden; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 26px; text-align: center;
}
.story-canvas::after {
  /* Viền tối rất nhẹ ở mép trong - giống hiệu ứng "khung máy" thật của story,
     giúp phân biệt rõ ranh giới canvas với nền trang dù màu nền trùng nhau. */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); pointer-events: none;
}
.story-preview-text {
  width: 100%; color: #fff; font-weight: 700; font-size: 21px; line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0,0,0,.32); word-break: break-word; white-space: pre-wrap;
}
.story-preview-text:empty::before {
  content: attr(data-placeholder); opacity: .75; font-weight: 600;
}

/* SỬA LỖI GỐC "ô màu nền không hiện": trước đây .story-swatch-row .swatch
   CHỈ có box-shadow, THIẾU HẲN width/height/border-radius nên các ô màu
   không có kích thước gì để hiện ra (co lại gần như biến mất) - bổ sung
   đầy đủ, ĐÚNG kiểu .swatch-picker .swatch đã ổn định ở nơi khác. Thêm nút
   "⊞ xem thêm" (dùng lại .quick-swatch-more có sẵn) để mở đủ 18 màu, không
   còn giới hạn cứng 8 màu như trước - khớp đúng số lượng màu nền đang có ở
   Tạo bài viết. */
.story-swatch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.story-swatch-row .swatch {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .15s;
}
.story-swatch-row .swatch.selected { border-color: var(--ink-900); transform: scale(1.1); }

.story-input {
  display: block; width: 100%; min-height: 60px; margin-top: 12px; padding: 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); font-family: var(--font-body); font-size: 14px;
  background: var(--white); box-sizing: border-box; resize: vertical; transition: border-color .15s, background .15s;
}
.story-input:focus { outline: none; border-color: var(--forest-500); background: var(--active-bg); }

/* Ô chọn ảnh/video - ĐÚNG kiểu gốc (khối auto-height theo padding, KHÔNG
   ép tỉ lệ 9:16 cứng), chỉ thêm icon lớn hơn + 2 dòng chữ (chính/phụ) +
   hiệu ứng hover cho có điểm nhấn thay vì viền chấm chấm trơ trọi. */
.story-media-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 60px 20px; border: 2px dashed var(--border-strong); border-radius: 14px;
  cursor: pointer; color: var(--forest-700);
  background: var(--page-bg); transition: border-color .15s, background .15s;
}
.story-media-dropzone:hover { border-color: var(--forest-500); background: var(--active-bg); }
.story-media-dropzone .story-dropzone-icon { font-size: 36px; }
.story-media-dropzone strong { font-size: 14px; font-weight: 700; }
.story-media-dropzone small { font-size: 12px; font-weight: 500; color: var(--ink-600); }

/* Khung xem trước ảnh/video đã chọn - ĐÚNG kiểu gốc (tự co theo
   max-height:420px + object-fit:contain, KHÔNG ép khung 9:16 cứng khiến
   ảnh ngang bị kéo méo) - bọc trong 1 khối "vừa khít nội dung"
   (display:inline-block) để bóng đổ/nút đổi ảnh bám sát đúng kích thước
   ảnh thật, không kéo giãn ra hết chiều ngang cột như khung chữ. */
.story-media-preview-frame {
  position: relative; display: inline-block; max-width: 100%; line-height: 0;
  border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.22); background: #000;
}
.story-media-preview-frame img, .story-media-preview-frame video {
  display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain;
}
.story-media-preview-frame img { cursor: pointer; }
.story-media-change-btn {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.story-compose-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.story-visibility-select {
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 11px 30px 11px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2365676b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.story-visibility-select:hover { border-color: var(--forest-500); }
.story-visibility-select:focus { outline: none; border-color: var(--forest-500); box-shadow: 0 0 0 3px var(--active-bg); }
.story-submit-btn { width: 100%; margin-top: 12px; }

/* ---------- Trình xem Story toàn màn hình ---------- */
.story-viewer { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 470px; background: #000; z-index: 400; overflow: hidden; }
.story-progress-row { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 5; }
.story-progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; }
.story-progress-fill { height: 100%; width: 0%; background: #fff; }
.story-viewer-header { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 10; pointer-events: none; }
.story-viewer-header a, .story-viewer-header button { pointer-events: auto; }
.story-viewer-name { color: #fff; font-weight: 700; font-size: 13.5px; text-shadow: 0 1px 3px rgba(0,0,0,.4); text-decoration: none; }
.story-viewer-time { color: rgba(255,255,255,.75); font-size: 12px; }
.story-close-btn { margin-left: auto; color: #fff; font-size: 20px; text-decoration: none; padding: 4px 8px; }
.story-slide-wrap {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.story-media { width: 100%; height: 100%; object-fit: contain; background: #000; }
.story-caption {
  position: absolute; bottom: 30px; left: 16px; right: 16px; color: #fff; text-align: center;
  font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.story-tap-zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 4; }
.story-tap-left { left: 0; }
.story-tap-right { right: 0; }

/* ---------- Tab tìm kiếm (Bạn bè / Bài viết) ---------- */
.search-tab {
  flex: 1; padding: 12px; border: none; background: none; font-family: var(--font-body);
  font-size: 13.5px; font-weight: 700; color: var(--ink-600); cursor: pointer;
}
.search-tab.active { color: var(--forest-700); border-bottom: 2px solid var(--forest-700); }

/* ---------- "Xem thêm" cho bài viết thường (nền trắng) ---------- */
.see-more-link-dark { color: var(--forest-700); font-weight: 700; cursor: pointer; }

/* ---------- "Đáng chú ý" - bài viết ghim trên trang cá nhân (tối đa 6, giống Facebook) ---------- */
.pinned-row-wrap { position: relative; }
.pinned-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 0 20px 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.pinned-row::-webkit-scrollbar { display: none; }
.pinned-card {
  flex-shrink: 0; min-width: 240px; background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none; scroll-snap-align: start;
  display: block; position: relative; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pinned-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); border-color: var(--forest-600); }
.pinned-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pinned-card-meta { min-width: 0; }
.pinned-card-name { font-size: 13px; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-card-date { font-size: 11px; color: var(--ink-600); }
.pinned-card-text { font-size: 13px; font-weight: 500; color: var(--ink-900); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Khung ảnh CỐ ĐỊNH chiều cao 120px đúng mẫu tham khảo (trước đây 100px) -
   giờ NẰM TRONG padding 14px của card (không sát viền nữa) nên ảnh tự bo
   góc riêng 8px thay vì dựa vào overflow:hidden của card như trước. */
.pinned-media-grid { display: grid; gap: 2px; height: 120px; grid-auto-rows: 1fr; border-radius: 8px; overflow: hidden; }
.pinned-media-grid.n1 { grid-template-columns: 1fr; }
.pinned-media-grid.n2 { grid-template-columns: 1fr 1fr; }
.pinned-media-grid.n3 { grid-template-columns: 1fr 1fr; }
.pinned-media-grid.n3 .pinned-media-tile:first-child { grid-column: span 2; }
.pinned-media-grid.n4 { grid-template-columns: 1fr 1fr; }
.pinned-media-tile { position: relative; background: #000; overflow: hidden; height: 100%; }
.pinned-media-tile img, .pinned-media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Trang cá nhân (user.php) - ảnh bìa/avatar/thống kê/tab ---------- */
/* QUAY VỀ đúng "chuẩn" chung toàn hệ thống (giống property.php/booking.php/
   notifications.php): NHIỀU THẺ CARD TÁCH RỜI, mỗi thẻ tự bo góc + đổ bóng
   riêng, cách nhau đều 20px - KHÔNG dùng kiểu "1 khối liền mạch duy nhất"
   (đã thử ở bản trước nhưng không đúng "chuẩn" đã thống nhất cho toàn site). */
.profile-info-card, .profile-pinned-card, .profile-feed-card {
  background: var(--white); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.1);
  overflow: hidden; margin-bottom: 20px;
}
.profile-pinned-card { padding: 14px 0 4px; overflow: visible; }
.profile-info-card .profile-section-title, .profile-pinned-card .profile-section-title { padding: 0 16px 10px; font-size: 16px; font-weight: 700; }

.profile-cover { width: 100%; aspect-ratio: 21/9; background-size: cover; background-position: center; background-color: var(--page-bg); position: relative; }
.profile-section { padding: 0 20px 24px; text-align: center; margin-top: -46px; position: relative; z-index: 2; }
.profile-avatar { width: 92px; height: 92px; margin: 0 auto 12px; border: 4px solid var(--white); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.profile-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--ink-900); }
.profile-bio { font-size: 14px; color: var(--ink-600); max-width: 340px; margin: 0 auto 16px; text-align: center; }

/* ---------- Khối thông tin minh bạch (họ tên/username/SĐT/email/ngày tham
   gia) - thẻ trắng bo góc riêng, tách bạch rõ ràng khỏi phần bio/story,
   mỗi dòng 1 icon + nhãn + giá trị canh đều nhau chuyên nghiệp, không phải
   chữ thường liệt kê. ---------- */
.profile-info-list {
  background: var(--page-bg); border-radius: 12px; padding: 4px 16px;
  max-width: 480px; margin: 0 auto 18px; text-align: left;
}
.profile-info-row {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.profile-info-label { font-size: 12.5px; color: var(--ink-600); font-weight: 600; width: 78px; flex-shrink: 0; }
.profile-info-value { font-size: 13.5px; color: var(--ink-900); font-weight: 600; word-break: break-word; min-width: 0; flex: 1; }
.profile-info-action {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--active-bg); margin-left: 6px; text-decoration: none; font-size: 13px;
  vertical-align: middle;
}
.profile-info-sub { display: block; font-size: 11px; color: var(--ink-600); font-weight: 500; margin-top: 1px; }
.profile-info-private-tag {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 8px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--page-bg); flex-shrink: 0; cursor: help;
}
.profile-info-private-tag::before { content: '🔒'; font-size: 10px; }

.profile-stats-row { display: flex; justify-content: center; gap: 32px; margin-bottom: 20px; }
.profile-stat-item { text-align: center; text-decoration: none; color: inherit; }
.profile-stat-item b { display: block; font-size: 18px; font-weight: 700; color: var(--ink-900); }
.profile-stat-item span { font-size: 12px; color: var(--ink-600); }
.profile-action-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.profile-btn {
  padding: 10px 24px; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: none;
}
.profile-btn-outline { background: var(--white); border: 1px solid var(--border-strong); color: var(--ink-900); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.profile-btn-outline:hover { background: var(--page-bg); }
.profile-btn-primary { background: var(--forest-600); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.profile-btn-primary:hover { background: var(--forest-700); }

.profile-section-title { font-size: 16px; font-weight: 700; padding: 0 16px 10px; }

.profile-tabs { display: flex; margin: 0; }
.profile-tab-item { flex: 1; text-align: center; padding: 14px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-600); text-decoration: none; border-bottom: 2px solid transparent; }
.profile-tab-item.active { color: var(--forest-700); border-bottom-color: var(--forest-700); }
.profile-tab-item:hover:not(.active) { background: var(--page-bg); }
.pinned-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 18px; }
.pinned-more-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pinned-colorful {
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden;
}
.pinned-colorful-text {
  color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,.25); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* ---------- Nút menu nhỏ (bỏ ghim/xoá) trên mỗi thẻ "Đáng chú ý" -
   dropdown được tạo động bằng JS gắn vào document.body (không lồng trong thẻ)
   để tránh bị chính overflow:hidden của thẻ cắt cụt mất, giống lỗi nút + trước đây */
.pinned-card-menu-btn {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.9); border: none;
  font-size: 14px; font-weight: 800; color: var(--ink-900); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.floating-menu-dropdown {
  position: fixed; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  border: 1px solid var(--border); overflow: hidden; min-width: 150px; z-index: 500;
}
.floating-menu-dropdown button, .floating-menu-dropdown a {
  display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 13px; font-family: var(--font-body);
  border: none; background: none; cursor: pointer; color: var(--ink-900); text-decoration: none; box-sizing: border-box;
  transition: background-color .12s ease;
}
.floating-menu-dropdown button:hover, .floating-menu-dropdown a:hover { background: var(--page-bg); }
.floating-menu-dropdown button.danger { color: #c0392b; }
.floating-menu-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* ---------- Popup danh sách người đã tương tác (giống Facebook thật) ---------- */
.reaction-list-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300;
  align-items: flex-end; justify-content: center;
}
.reaction-list-modal.show { display: flex; }
@media (min-width: 480px) { .reaction-list-modal.show { align-items: center; } }
.reaction-list-sheet {
  background: #fff; width: 100%; max-width: 470px; max-height: 75vh; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 480px) { .reaction-list-sheet { border-radius: 16px; max-height: 60vh; } }
.reaction-list-header {
  display: flex; align-items: center; border-bottom: 1px solid var(--border); padding: 10px 12px; gap: 8px;
}
.reaction-list-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.reaction-list-tabs::-webkit-scrollbar { display: none; }
.reaction-tab {
  flex-shrink: 0; padding: 8px 14px; border-radius: 5px; border: none; background: var(--page-bg);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-600); cursor: pointer; white-space: nowrap;
}
.reaction-tab.active { background: var(--forest-100, #e3f0e8); color: var(--forest-700); }
.reaction-list-close { border: none; background: none; font-size: 18px; color: var(--ink-600); cursor: pointer; padding: 4px 8px; flex-shrink: 0; }
.reaction-list-body { overflow-y: auto; flex: 1; }
.reaction-list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border);
}
.reaction-list-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--ink-900); }
.reaction-list-addfriend-btn {
  background: var(--forest-600); color: #fff; border: none; border-radius: 5px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); flex-shrink: 0;
}
.reaction-list-pending { font-size: 12px; color: var(--ink-600); font-weight: 600; flex-shrink: 0; }

/* ---------- Form OTA dùng chung cho mọi trang quản lý villa/đặt phòng
   (my_properties.php, properties.php, create_hold.php...) - trước đây mỗi
   trang tự định nghĩa riêng gây trùng lặp, giờ gộp 1 chỗ để trang nào cũng
   có sẵn, tránh tình trạng "dùng đúng tên class nhưng CSS bị vỡ" ---------- */
.ota-form-card { background:#fff; border-radius:16px; padding:24px; box-shadow:0 2px 16px rgba(0,0,0,.06); border:1px solid var(--border); }
.ota-form-collapsed { display:none; }
.ota-form-title { font-family:var(--font-display); color:var(--pine-800); margin:0 0 20px; font-size:18px; }
.ota-section-label { font-size:13px; font-weight:800; color:var(--forest-700); text-transform:uppercase; letter-spacing:.5px; margin:22px 0 12px; padding-top:14px; border-top:1px solid var(--border); }
.ota-section-label:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.ota-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.ota-grid-4 { grid-template-columns:repeat(4,1fr); }
.ota-field { margin-bottom:14px; }
.ota-field label { display:block; font-size:12.5px; font-weight:700; color:var(--ink-700); margin-bottom:5px; }
.ota-field input, .ota-field textarea, .ota-field select {
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--mist-300);
  background:#f7f8f5; font-family:var(--font-body); font-size:14px; box-sizing:border-box;
  transition:border-color .15s, background .15s;
}
.ota-field input:focus, .ota-field textarea:focus, .ota-field select:focus { outline:none; border-color:var(--forest-500); background:#fff; }
.ota-highlight { background:#fff8ec; border:1.5px solid #f0c674; border-radius:12px; padding:14px; }
.ota-hint { font-size:12px; color:var(--ink-600); margin-top:4px; }
.ota-media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; margin-bottom:12px; }
.ota-media-item { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#000; }
.ota-media-item img, .ota-media-item video { width:100%; height:100%; object-fit:cover; }
.ota-media-badge { position:absolute; top:4px; left:4px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:2px 5px; border-radius: 5px; }
.ota-media-delete { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; border:none; cursor:pointer; font-size:12px; }
.ota-media-cover-btn { position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.5); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; }
.ota-is-cover { outline: 3px solid #f0c674; outline-offset: -3px; }
.ota-is-cover .ota-media-cover-btn { background:#f0c674; }
.ota-is-cover::after { content:'Đại diện'; position:absolute; bottom:4px; left:4px; background:#f0c674; color:#3a2e0c; font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; }
.ota-file-input { width:100%; padding:12px; border:2px dashed var(--mist-300); border-radius:10px; font-size:13px; }
.ota-property-list { display:grid; gap:14px; }
.ota-property-card { display:flex; gap:14px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.05); border:1px solid var(--border); align-items:center; }
.ota-property-thumb { width:90px; height:70px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0; }
.ota-property-info { flex:1; }
.ota-property-title { font-weight:700; font-size:15px; color:var(--ink-900); }
.ota-property-meta { font-size:12.5px; color:var(--ink-600); margin:2px 0; }
.ota-property-price { font-weight:700; color:var(--forest-700); font-size:14px; margin-bottom:4px; }
.ota-property-actions { display:flex; flex-direction:column; gap:6px; }
@media (max-width: 640px) { .ota-grid, .ota-grid-4 { grid-template-columns:1fr; } }

/* ---------- Popup chi tiết dùng chung (sale_villas.php, bookings.php...) + phân trang ---------- */
.sv-detail-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:400; align-items:center; justify-content:center; padding:16px; }
.sv-detail-modal.show { display:flex; }
.sv-detail-sheet { background:#fff; border-radius:16px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; padding:24px; position:relative; }
.sv-detail-close { position:absolute; top:14px; right:14px; background:var(--page-bg); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; }
.pagination-bar { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:24px 0; }
.pagination-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius: 5px; background:#fff; border:1px solid var(--border); color:var(--ink-700); text-decoration:none; font-size:13px; font-weight:600; padding:0 8px; }
.pagination-btn.active { background:var(--forest-600); color:#fff; border-color:var(--forest-600); }
.pagination-btn:hover:not(.active) { background:var(--page-bg); }

/* ---------- SĐT/Zalo bấm gọi được (phone_action_links() trong helpers.php) - dùng ở mọi nơi hiện SĐT khách/Sale ---------- */
.phone-link { color:var(--forest-700); font-weight:700; text-decoration:none; }
.phone-link:hover { text-decoration:underline; }
.phone-zalo-link { text-decoration:none; font-size:15px; vertical-align:middle; }

/* ---------- Khung "Thổ địa" (Local Concierge) trên trang villa - property.php ---------- */
.concierge-card { margin:0 0 20px; background:linear-gradient(135deg,#e8f5e9 0%,#ffffff 100%); border:1px solid #c8e6c9; border-radius:12px; padding:20px; display:flex; align-items:center; gap:15px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.concierge-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid #c8e6c9; }
.concierge-info { flex:1; min-width:0; }
.concierge-badge { font-weight:700; font-size:15px; color:var(--forest-800); }
.concierge-stat { font-size:13px; color:var(--ink-600); margin-top:4px; }
.concierge-bio { font-size:13px; color:var(--ink-600); margin-top:6px; font-style:italic; line-height:1.5; }
.concierge-zalo-btn { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#0068ff; display:flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; }

/* ---------- Trang hồ sơ Thổ địa riêng (tho-dia.php) ---------- */
.td-hero {
  display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center;
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.1);
  margin-bottom: 20px;
}
.td-hero-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--forest-600); object-fit: cover; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(47,92,68,.2); }
.td-hero-badge { background: var(--forest-600); color: #fff; font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: 5px; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 6px; }
.td-hero-name { font-size: 28px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.td-hero-stat { font-size: 15px; color: var(--ink-600); margin-bottom: 4px; }
.td-hero-bio { font-size: 14px; color: var(--ink-600); font-style: italic; max-width: 360px; margin: 10px auto 0; line-height: 1.5; }
.td-zalo-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; background: #0068ff; color: #fff;
  font-weight: 600; padding: 12px 24px; border-radius: 5px; text-decoration: none; font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,104,255,.3); transition: transform .2s, box-shadow .2s;
}
.td-zalo-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,104,255,.4); }
.td-section-title { font-family:var(--font-display); color:var(--forest-800); font-size:16px; margin:24px 14px 12px; }
.td-villa-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 14px; }
.td-villa-card { display:block; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08); text-decoration:none; color:inherit; }
.td-villa-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.td-villa-info { padding:8px 10px; }
.td-villa-title { font-size:12.5px; font-weight:700; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-villa-area { font-size:11px; color:var(--ink-400); margin-top:2px; }
.td-review-list { padding:0 14px; display:flex; flex-direction:column; gap:10px; }
.td-review-card { background:#fff; border-radius:12px; padding:12px 14px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.td-review-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.td-review-stars { font-size:11px; }
.td-review-name { font-size:12.5px; font-weight:700; color:var(--ink-900); }
.td-review-comment { font-size:12.5px; color:var(--ink-700); line-height:1.5; }
.td-review-property { font-size:11px; color:var(--ink-400); margin-top:4px; }

/* =====================================================================
   MOBILE ADMIN LAYOUT FIX (2026) — CHỈ CSS THUẦN TUÝ, không đổi bất kỳ
   HTML/PHP/JS nào. Toàn bộ trang quản trị (Admin/Host/Sale) dùng chung
   includes/admin_header.php với .admin-shell (flex ngang) + .admin-nav
   (sidebar CỨNG 220px) + .admin-main - trên màn hình hẹp, sidebar 220px
   chiếm gần hết bề ngang, chỉ còn ~90-100px cho nội dung -> vỡ bố cục ở
   MỌI trang admin cùng lúc. Sửa 1 chỗ này là khắc phục được gốc rễ cho
   toàn bộ khu vực quản trị, không cần sửa từng trang riêng lẻ.
   ===================================================================== */
@media (max-width: 900px) {
  .admin-shell { flex-direction: column; min-height: auto; }

/* Sidebar dọc cứng -> thanh cuộn ngang mỏng ở trên cùng, vẫn giữ NGUYÊN
     toàn bộ link/badge/thứ tự - chỉ đổi CÁCH TRÌNH BÀY, không ẩn bớt mục
     nào (tránh làm mất chức năng khỏi tầm tay trên mobile). */
  .admin-nav {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    gap: 4px;
    align-items: center;
    scrollbar-width: thin;
  }
  .admin-nav .brand { flex-shrink: 0; margin: 0 8px 0 0; font-size: 15px; }
  .admin-nav a {
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 8px 12px;
    font-size: 13px;
  }

/* NHÓM MENU (accordion) trên thanh cuộn ngang mobile - ĐÂY LÀ NGUYÊN NHÂN
     GỐC RỄ của lỗi "menu cha không collapse/expand đúng": .admin-nav-group
     vốn thiết kế cho sidebar DỌC (submenu xổ THẲNG XUỐNG bên dưới, đẩy các
     mục sau dịch xuống) - nhưng ở đây .admin-nav đã bị đổi thành thanh
     NGANG (display:flex; flex-wrap:nowrap), khiến submenu "xổ xuống" không
     còn chỗ nào hợp lý để hiển thị, bị vỡ layout/ẩn mất. Sửa: nhóm trở
     thành 1 NÚT THẢ XUỐNG (dropdown) độc lập trong thanh ngang, submenu bung
     ra dạng lớp phủ (position:absolute) ngay dưới nút, không đẩy các mục
     khác - đúng hành vi "collapse/expand" mong đợi trên di động. */
  .admin-nav-group {
    position: relative; flex-shrink: 0; margin-bottom: 0;
  }
  .admin-nav-group-head {
    width: auto; white-space: nowrap; padding: 8px 12px; font-size: 13px;
    border-radius: 8px; background: rgba(255,255,255,.04);
  }
  .admin-nav-submenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
    min-width: 220px; max-width: 80vw; background: var(--forest-800);
    border: 1px solid rgba(255,255,255,.15); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 6px; margin: 0; border-left: none;
  }
  .admin-nav-submenu a { white-space: normal; }

.admin-main { padding: 16px; }
  .admin-main h1 { font-size: 19px; }
}

@media (max-width: 480px) {
  .admin-main { padding: 12px; }
  .ota-form-card { padding: 16px; }
}

/* ---------------------------------------------------------------------
   An toàn chung cho khu vực quản trị trên mobile - không phụ thuộc trang
   cụ thể nào, áp dụng cho MỌI bảng/ảnh có thể tràn ngang màn hình hẹp.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .admin-main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .admin-main img, .admin-main video { max-width: 100%; height: auto; }
  .admin-main pre, .admin-main code { max-width: 100%; overflow-x: auto; }
}

/* =====================================================================
   TRANG CHI TIẾT VILLA - bố cục 2 cột trên desktop rộng (2026)
   Trên mobile (mặc định): .detail-layout/-main/-side chỉ là <div> trơn,
   KHÔNG có CSS gì tác động - property.php hiển thị y hệt như trước khi
   thêm các khối bọc này (xếp dọc 1 cột, khung giá nổi cố định ở đáy).
   CHỈ áp dụng 2 cột khi màn hình đủ rộng để không lãng phí khoảng trắng
   2 bên như trước, đồng thời khung giá chuyển thành thẻ dính lề cạnh nội
   dung (kiểu Airbnb/Booking.com) thay vì nổi che ngang khắp màn hình.
   ===================================================================== */
@media (min-width: 992px) {
  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
  }
  .detail-layout-side { position: sticky; top: 90px; }

/* Khung giá: bỏ kiểu "nổi cố định đè ngang màn hình" của mobile, chuyển
     thành 1 thẻ bình thường dính lề trong cột phải - vẫn giữ NGUYÊN class
     .sticky-cta/.price-block/.btn-book nên không cần đổi gì bên trong. */
  .detail-layout-side .sticky-cta {
    position: static; left: auto; transform: none;
    width: 100%; max-width: none;
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    flex-direction: column; align-items: stretch; gap: 14px;
  }
  .detail-layout-side .sticky-cta a.btn-book { text-align: center; }
  .spacer-cta { display: none; } /* không cần chừa chỗ nữa vì khung giá không còn nổi cố định. LƯU Ý: .spacer-cta giờ nằm SAU .detail-layout (không còn lồng trong .detail-layout-main nữa - xem property.php), nên chọn thẳng .spacer-cta chứ không còn ".detail-layout-main .spacer-cta" (sẽ không khớp được nữa, khiến khoảng đệm này lại vô tình xuất hiện thừa trên desktop). */
}

/* =====================================================================
   KHUNG 3 CỘT DESKTOP (2026) — áp dụng cho MỌI trang qua includes/header.php
   + includes/footer.php (.page-shell-3col bọc quanh .app-shell). Trên
   mobile mặc định 2 cột trái/phải ẨN HẲN (display:none) - .page-shell-3col
   không có CSS gì tác động, .app-shell hiển thị y hệt giao diện cũ, KHÔNG
   đổi gì trên điện thoại. Chỉ từ 992px trở lên mới hiện đủ 3 cột.
   ===================================================================== */
.global-sidebar-left, .global-sidebar-right { display: none; }

/* ====================================================================
   Nội dung BÊN TRONG 2 cột trái/phải (.gsb-menu-item, .gsb-contact-item,
   .gsb-ad-item...) - TRƯỚC ĐÂY nằm lồng trong @media (min-width:992px)
   cùng với phần ĐỊNH VỊ cột (.page-shell-3col, sticky...), khiến các class
   này HOÀN TOÀN KHÔNG CÓ style gì khi hiện lại trên di động (drawer "☰"
   gộp 2 cột vào xem - includes/header.php). Tách hẳn ra khỏi media query,
   áp dụng KHÔNG ĐIỀU KIỆN (mọi kích thước màn hình) - vì bản thân việc ẨN/
   HIỆN container cha (.global-sidebar-left/-right) đã đủ để kiểm soát
   responsive rồi, phần NỘI DUNG BÊN TRONG không cần phải phụ thuộc thêm
   vào media query nào nữa.
   ==================================================================== */

/* --- Cột trái: menu điều hướng chính (đúng thông số mẫu tham khảo) --- */
.gsb-menu-item {
  display: flex; align-items: center; gap: 15px; padding: 6px 15px; border-radius: 8px;
  font-weight: 500; font-size: 15px; color: var(--ink-900); text-decoration: none; margin-bottom: 2px;
}
.gsb-menu-item:hover { background: rgba(0,0,0,.05); }
.gsb-menu-item.active { background: var(--active-bg); color: var(--forest-700); font-weight: 700; }
.gsb-menu-icon { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
.gsb-menu-item-profile { font-weight: 700; }
.gsb-menu-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gsb-divider { height: 1px; background: var(--border); margin: 12px 4px; }

/* Nhịp khoảng cách THỐNG NHẤT cho mọi "đoạn ngắt" trong cột trái - dùng
   ĐÚNG 12px xuyên suốt (khớp với .gsb-divider ở trên) thay vì mỗi chỗ một
   con số khác nhau (14px/15px...) gây lệch nhịp khi nhìn tổng thể. */
.gsb-villa-suggest-title {
  margin: 0 0 8px; padding: 0 15px; font-size: 13px; font-weight: 700;
  color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px;
}
.gsb-footer-links.gsb-sidebar-footer-links {
  margin-top: 12px; padding: 12px 15px 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.gsb-footer-links.gsb-sidebar-footer-links a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-600);
  text-decoration: none; transition: background .15s, color .15s;
}
.gsb-footer-links.gsb-sidebar-footer-links a:hover { background: var(--active-bg); color: var(--forest-700); }
.gsb-footer-links.gsb-sidebar-footer-links a::before { flex-shrink: 0; opacity: .7; font-size: 13px; }
.gsb-footer-links.gsb-sidebar-footer-links a:hover::before { opacity: 1; }
.gsb-footer-links.gsb-sidebar-footer-links a[href*="about"]::before { content: "ℹ️"; }
.gsb-footer-links.gsb-sidebar-footer-links a[href*="privacy"]::before { content: "🔒"; }
.gsb-footer-links.gsb-sidebar-footer-links a[href*="terms"]::before { content: "📜"; }
.gsb-footer-links.gsb-sidebar-footer-links a[href*="refund"]::before { content: "💸"; }

/* --- Khối "đáng tin cậy": logo + tên hộ kinh doanh + địa chỉ + nút Zalo OA
   --- đặt cuối cột trái. Thiết kế: nền be nhạt tương phản nhẹ với nền xám
   chung (--page-bg) để khối này "nổi" lên như 1 tấm danh thiếp/con dấu xác
   thực, không trộn lẫn vào các link điều hướng phía trên - đúng cảm giác
   "thông tin pháp lý, đáng tin" thay vì chỉ là dòng chữ nhỏ mờ nhạt cuối
   trang như trước. */
.gsb-trust-card {
  margin: 14px 15px 18px; padding: 16px 14px 14px;
  background: linear-gradient(180deg, #fbfaf7 0%, #f5f2ea 100%);
  border: 1px solid var(--border); border-radius: 12px;
}
.gsb-trust-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gsb-trust-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.gsb-trust-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--forest-800); letter-spacing: .1px; }
.gsb-trust-brand-sub { font-size: 10.5px; color: var(--ink-500); margin-top: 1px; }
.gsb-trust-info { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--border-strong); }
.gsb-trust-info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 11.5px; line-height: 1.55; color: var(--ink-600); }
.gsb-trust-info-icon { flex-shrink: 0; width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.gsb-trust-info-row a { color: var(--forest-700); font-weight: 600; }
.gsb-trust-info-row a:hover { text-decoration: underline; }
/* Nút Zalo OA - bọc thêm khung riêng để không bị lệch cỡ so với thiết kế
   chung (widget nhúng của Zalo có kích thước cố định do họ kiểm soát) */
.gsb-trust-zalo { display: flex; justify-content: center; margin-bottom: 10px; min-height: 36px; max-width: 100%; overflow: hidden; }
.gsb-trust-zalo iframe { max-width: 100% !important; }
.gsb-trust-copyright { font-size: 10px; color: var(--ink-400); text-align: center; line-height: 1.5; }

/* --- Cột phải: widget gợi ý + villa nổi bật + hỗ trợ (đúng mẫu tham khảo) --- */
.gsb-widget { margin-bottom: 20px; }
.gsb-widget-title { font-weight: 600; font-size: 15px; margin-bottom: 15px; color: var(--ink-600); padding: 0 2px; }
.gsb-widget-text { font-size: 12.5px; color: var(--ink-600); line-height: 1.6; margin: 0 0 10px; }
.gsb-widget-cta { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--forest-700); text-decoration: none; }
.gsb-widget-cta:hover { text-decoration: underline; }
.gsb-footer-links { display: flex; gap: 14px; font-size: 11.5px; padding: 4px 6px; flex-wrap: wrap; }
.gsb-footer-links a { color: var(--ink-500); text-decoration: underline; }

/* Gợi ý cho bạn - hàng liên hệ avatar tròn + tên (đúng mẫu tham khảo) */
.gsb-contact-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-radius: 8px;
  text-decoration: none; color: var(--ink-900); transition: .15s;
}
.gsb-contact-item:hover { background: rgba(0,0,0,.05); padding-left: 5px; }
.gsb-contact-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gsb-contact-item span { font-weight: 500; font-size: 14px; }
.gsb-contact-role { font-weight: 400; font-size: 12px; color: var(--ink-500); }

/* Chấm tròn trạng thái online (xanh lá)/offline (xám) đè lên góc dưới-phải
   avatar - kiểu Messenger/Facebook chuẩn, dùng CHUNG cho mọi nơi hiện danh
   sách người dùng kèm avatar (xem render_online_dot() trong helpers.php).
   Class ".avatar-status-wrap" dùng CHUNG được cho cả avatar dạng <img>
   (gsb-contact-item) LẪN avatar dạng <div class="avatar"> nền background-image
   (friend_list.php, tag picker...) - chỉ cần bọc ngoài. */
.avatar-status-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.online-status-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid var(--white); box-sizing: border-box;
}
.online-status-dot.is-online { background: #31a24c; }
.online-status-dot.is-offline { background: #bcc0c4; }

/* ---------- Widget "Điểm tích luỹ"/"Mã giảm giá" (thay cho "Gợi ý cho
   bạn" xoay vòng villa cũ, không công bằng khi kho villa lớn) ---------- */
.gsb-loyalty-widget {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink-900); transition: background .15s;
}
.gsb-loyalty-widget:hover { background: rgba(0,0,0,.04); }
.gsb-loyalty-widget-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.gsb-loyalty-widget-points .gsb-loyalty-widget-icon { background: #fdf0e6; }
.gsb-loyalty-widget-sale .gsb-loyalty-widget-icon { background: #e8f0fe; }
.gsb-loyalty-widget-title { font-weight: 700; font-size: 14px; }
.gsb-loyalty-widget-sub { font-size: 12px; color: var(--ink-500); margin-top: 1px; }

/* Villa Nổi Bật / ảnh quảng cáo - ảnh THUẦN bo góc TRÊN (khớp với khung
   card .gsb-ad-item bọc ngoài, không bo hết 4 góc nữa vì phần chữ bên
   dưới giờ nằm CHUNG 1 khung viền, không phải khối rời). */
.gsb-featured-card {
  position: relative; display: block; overflow: hidden; height: 140px;
}
.gsb-featured-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Widget "Gợi ý cho bạn" (villa ngẫu nhiên, cột trái) */
.gsb-villa-suggest-list { display: flex; flex-direction: column; gap: 2px; }
.gsb-villa-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px;
  text-decoration: none; color: var(--ink-900); transition: background-color .15s;
}
.gsb-villa-suggest-item:hover { background: rgba(0,0,0,.05); }
.gsb-villa-suggest-item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--page-bg); }
.gsb-villa-suggest-info { min-width: 0; }
.gsb-villa-suggest-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsb-villa-suggest-price { font-size: 11.5px; color: var(--forest-700); font-weight: 700; margin-top: 1px; }

/* Biển "chờ quảng cáo" khi chưa có quảng cáo nào đang chạy */
.gsb-ad-empty { text-align: center; padding: 18px 8px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.gsb-ad-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .6; }
.gsb-ad-empty-text { font-size: 12px; color: var(--ink-500); line-height: 1.6; margin-bottom: 10px; }

/* Widget "Quảng cáo tài trợ" - MỖI quảng cáo là 1 THẺ RIÊNG có viền + đổ
   bóng nhẹ (không chỉ đường kẻ phân cách như trước) - đúng khung ảnh mẫu:
   ảnh bo góc trên, khối chữ trắng bên dưới (mark tài trợ nhỏ màu xám,
   tiêu đề đậm đen, địa điểm xám, giá xanh lá đậm) trong CÙNG 1 khung viền.
   Toàn bộ thẻ là 1 link lớn (không có nút CTA riêng, giống hệt mẫu). ------ */
.gsb-ad-item {
  display: block; border-radius: 8px; background: var(--white);
  border: 1px solid var(--border); overflow: hidden; margin-bottom: 15px;
  transition: transform .2s, box-shadow .2s;
}
.gsb-ad-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.gsb-ad-item-link { display: block; text-decoration: none; color: inherit; }
.gsb-ad-btn {
  display: block; text-align: center; padding: 9px; margin: 0 10px 10px;
  background: var(--active-bg); color: var(--forest-800); font-weight: 700; font-size: 12.5px;
  border: none; border-radius: 5px; text-decoration: none;
}
.gsb-ad-btn:hover { background: #dcefe3; }
.gsb-sponsored-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--forest-600); margin-bottom: 8px;
}
.gsb-ad-caption { font-size: 13px; color: var(--ink-800); line-height: 1.5; margin: 8px 0; }
.gsb-ad-detail { background: var(--page-bg); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.gsb-ad-detail-title { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.gsb-ad-detail-meta { font-size: 12px; color: var(--ink-600); margin-bottom: 6px; }
.gsb-ad-detail-specs { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-600); margin-bottom: 6px; flex-wrap: wrap; }
.gsb-ad-detail-price { font-weight: 700; color: var(--forest-700); font-size: 13px; }
.gsb-ad-detail-post-content { font-size: 12.5px; color: var(--ink-700); line-height: 1.5; margin: 0; }

/* Khối chữ NGAY DƯỚI ảnh - đúng kiểu mẫu tham khảo (title/địa điểm/giá) */
.gsb-ad-info { padding: 10px; }
.gsb-ad-info-title { font-weight: 600; font-size: 14px; color: var(--ink-900); margin-bottom: 4px; }
.gsb-ad-info-loc { font-size: 12.5px; color: var(--ink-600); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.gsb-ad-info-price { font-weight: 700; font-size: 13px; color: var(--forest-700); }

@media (min-width: 992px) {
  .page-shell-3col {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    align-items: start;
  }
  /* Trang tự khai báo $wide_shell = true (VD property.php) cần nhiều chỗ
     hơn cho nội dung (ảnh lớn + khung giá riêng bên cạnh) - nhường luôn chỗ
     của cột phải cho nội dung đó thay vì hiện 2 khung "bên phải" cạnh nhau
     gây rối mắt (footer.php cũng không render .global-sidebar-right khi
     $wide_shell bật, xem includes/footer.php). */
  .page-shell-3col.shell-wide {
    grid-template-columns: 280px minmax(0, 900px);
  }

.global-sidebar-left, .global-sidebar-right {
    display: block;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
  .global-sidebar-left::-webkit-scrollbar, .global-sidebar-right::-webkit-scrollbar { width: 5px; }
  .global-sidebar-left::-webkit-scrollbar-thumb, .global-sidebar-right::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; }
  .global-sidebar-left:hover::-webkit-scrollbar-thumb, .global-sidebar-right:hover::-webkit-scrollbar-thumb { background: #ccc; }
  .global-sidebar-left, .global-sidebar-right { scrollbar-color: transparent transparent; }
  .global-sidebar-left:hover, .global-sidebar-right:hover { scrollbar-color: #ccc transparent; }

/* .app-shell giờ LẤP ĐẦY đúng cột giữa của lưới 3 cột (không còn tự giới
     hạn max-width/căn giữa/đổ bóng riêng như trên mobile) */
  .app-shell, .app-shell.app-shell-wide {
    max-width: 100%; margin: 0; box-shadow: none; padding-bottom: 24px;
    min-width: 0; /* QUAN TRỌNG: mặc định CSS Grid để item con co giãn theo
    "min-content" của NỘI DUNG BÊN TRONG (VD lịch nhiều tháng min-width:320px/
    tháng ở booking.php) - khiến cả cột lưới 1fr bị ép rộng ra theo, phá vỡ
    tỉ lệ 3 cột trái/giữa/phải dù bên trong ĐÃ CÓ overflow-x:auto riêng. Đặt
    min-width:0 ở đây buộc trình duyệt tôn trọng đúng độ rộng cột lưới đã
    định (1fr), phần nào tràn thì tự cuộn ngang bên trong, không đẩy phá cột. */
  }
  body { background: var(--page-bg); }

/* --------------------------------------------------------------------
     HEADER ĐÓNG BĂNG (fixed) chạy full ngang toàn màn hình, nằm TRÊN cả
     3 cột - giống hệt tinh thần mẫu tham khảo the_chill_dalat_redesign.html
     (.navbar position:fixed). .topbar vốn nằm bên trong .app-shell (chỉ ở
     cột giữa), nhưng position:fixed sẽ tự thoát ra khỏi ràng buộc của lưới
     3 cột cha, tự căn theo TOÀN BỘ khung nhìn (viewport) - không cần đổi vị
     trí đặt thẻ trong HTML.
     -------------------------------------------------------------------- */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    width: 100%;
    padding: 12px 28px;
  }
  /* 3 phần cân đối: logo (trái, rộng cố định) - ô tìm kiếm (giữa, tự canh
     giữa nhờ 2 bên rộng bằng nhau) - icon-group (phải, rộng cố định bằng
     bên trái) - giống đúng tỉ lệ nav-left/nav-center/nav-right của mẫu
     tham khảo. Trước đây ô tìm kiếm nằm LỒNG bên trong icon-group nên
     không thể canh giữa thật được (luôn lệch về phía phải) - đã tách ra
     làm phần tử con riêng của .topbar (xem includes/header.php). */
  .topbar .brand-logo { flex: 0 0 260px; display: flex; align-items: baseline; gap: 8px; }
  .brand-logo-main { display: block; }
  .brand-logo-domain { display: inline; font-family: var(--font-script); font-size: 18px; color: var(--ink-500); }
  .topbar .icon-group { flex: 0 0 260px; justify-content: flex-end; gap: 10px; }
  /* .topbar-search-wrap giờ là phần tử con TRỰC TIẾP của .topbar (bọc quanh
     nút + dropdown kết quả) - phải đặt flex:1 ở ĐÂY để chiếm đúng khoảng
     giữa còn lại và canh giữa nút bên trong nó, KHÔNG đặt trực tiếp lên nút
     .topbar-search-btn nữa (nó giờ nằm lồng bên trong wrap, không còn là
     con trực tiếp của .topbar để flex ngang hàng với logo/icon-group). */
  .topbar-search-wrap { flex: 1 1 auto; max-width: 600px; margin: 0 auto; }
  /* QUAN TRỌNG: phải viết ".topbar .topbar-search-btn" (2 lớp, không phải 1
     lớp ".topbar-search-btn") để độ đặc hiệu CSS đủ THẮNG rule gốc
     ".topbar .icon-btn" (dòng ~80, quy định width:38px/border-radius:50%/
     background:transparent) - nếu chỉ viết 1 lớp, rule gốc vẫn thắng dù
     nằm phía TRÊN trong file, vì CSS ưu tiên độ đặc hiệu cao hơn trước,
     không phải "ai viết sau thắng" khi độ đặc hiệu khác nhau. Đây chính là
     lỗi khiến ô tìm kiếm mất khung, chữ tràn ra ngoài "trơ trọi" trước đó. */
  .topbar .topbar-search-btn {
    width: 100%; height: 42px; border-radius: 5px;
    background: var(--page-bg); justify-content: flex-start; gap: 10px;
    padding: 0 18px; color: var(--ink-600); font-size: 13.5px; font-weight: 500;
  }
  .topbar .topbar-search-btn:hover { background: #e4e6eb; }
  .topbar-search-icon { font-size: 15px; flex-shrink: 0; }
  .topbar-search-label { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-search-dropdown { width: 100%; left: 0; }
  /* Chừa đúng khoảng trống phía trên bằng chiều cao header đóng băng, để
     nội dung/cột trái/cột phải không bị header đè lên lúc mới vào trang. */
  .page-shell-3col { padding-top: 78px; }
  .global-sidebar-left, .global-sidebar-right { top: 78px; max-height: calc(100vh - 98px); }

/* Nút ☰ mở menu trượt mobile không còn cần thiết khi đã có sidebar trái
     cố định luôn hiện sẵn - ẩn đi cho gọn (menu trượt vẫn tồn tại trong
     HTML, chỉ không có nút bấm nào gọi tới trên desktop). */
  .topbar > .icon-btn:first-child { display: none; }

/* Thanh điều hướng dưới (bottom-nav) chỉ dành cho mobile - trên desktop
     đã có sidebar trái làm điều hướng chính, ẩn taskbar dưới cho gọn giống
     mẫu tham khảo (.bottom-nav chỉ hiện <768px ở file mẫu). */
  .bottom-nav { display: none; }
  .app-shell { padding-bottom: 24px; } /* không cần chừa chỗ bottom-nav nữa */

/* Cột giữa giờ rộng 680px (thay vì ~430px như mobile) - nới cỡ vài khối
     cho thoáng đúng tỉ lệ mẫu tham khảo, KHÔNG đổi cấu trúc/hành vi gì. */
  .fb-story-card { width: 100px; height: 160px; }
  .composer, .stories, .post { margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------------------
     TRANG KHÁM PHÁ (explore.php) trên desktop rộng - lưới 2 CỘT CỐ ĐỊNH
     (theo đúng yêu cầu - không dùng auto-fill co giãn), đồng thời làm lại
     thanh tiêu đề/tìm kiếm cho thoáng và chuyên nghiệp hơn (trước đây các
     khối vốn thiết kế cho mobile hẹp bị kéo giãn thô trong khung desktop
     rộng, nhìn rối).
     --------------------------------------------------------------------- */
  .explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 4px 4px 16px; }
  .explore-section-header-full { grid-column: 1 / -1; }
  .explore-result-count { padding: 0 4px 10px; }
}

/* Mark tin cậy cạnh tên villa/tác giả (Sale/Host đã đăng ký hợp lệ) - icon
   tick tròn (kiểu Twitter/X verified) + CHỮ "Sale/Host được xác minh" gói
   chung thành 1 huy hiệu dạng viên nhỏ, nền nhạt cùng tông màu icon (xanh lá
   cho Sale, xanh dương cho Host) - chuyên nghiệp, dễ nhận biết hơn hẳn kiểu
   chữ thường trôi nổi cạnh tên hay icon trơn không chú thích. */
.trust-badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin-left: 6px; padding: 2px 9px 2px 6px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.3;
}
.trust-badge-sale { color: #1e8e3e; background: rgba(30,142,62,.1); }
.trust-badge-host { color: #1a73e8; background: rgba(26,115,232,.1); }
.trust-badge-label { line-height: 1; }

/* ==========================================================================
   TRANG THÔNG TIN/PHÁP LÝ (about.php, privacy.php, terms.php,
   refund_policy.php) - trước đây mỗi trang chỉ có <h3>/<p>/<ul> với style
   inline rời rạc, nhìn như văn bản Word dán vào web, không tạo được cảm giác
   chuyên nghiệp/đáng tin cho 1 nền tảng có xử lý tiền thật (đặt cọc). Bộ
   class .legal-* bên dưới dùng CHUNG cho cả 4 trang - đổi 1 chỗ, áp dụng
   đồng bộ mọi nơi, không phải sửa rải rác từng trang.
   ========================================================================== */

/* Khối mở đầu - icon tròn nổi bật + tiêu đề + mô tả ngắn, thay cho việc lao
   thẳng vào nội dung ngay dưới thanh topbar cụt lủn như trước */
.legal-hero {
  text-align: center; padding: 32px 20px 26px;
  background: linear-gradient(180deg, #fbfaf7 0%, var(--page-bg) 100%);
  border-bottom: 1px solid var(--border);
}
.legal-hero-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--forest-700); display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 4px 14px rgba(31,61,46,.25);
}
.legal-hero h1 {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--forest-800); margin: 0 0 6px;
}
.legal-hero p {
  font-size: 13.5px; color: var(--ink-600); line-height: 1.6; max-width: 460px; margin: 0 auto;
}
.legal-hero-meta {
  display: inline-block; margin-top: 14px; padding: 4px 14px; border-radius: 20px;
  background: #fff; border: 1px solid var(--border-strong); font-size: 11.5px; color: var(--ink-500);
}

.legal-body { max-width: 640px; margin: 0 auto; padding: 24px 20px 8px; }

/* Mỗi mục là 1 "card" riêng biệt, số thứ tự trong badge tròn - dễ quét mắt
   hơn hẳn 1 khối văn bản dài liên tục, và tạo cảm giác nội dung được tổ chức
   nghiêm túc/uy tín thay vì chỉ dán text thô */
.legal-section {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 20px 18px; margin-bottom: 14px;
}
.legal-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.legal-section-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: var(--forest-100); color: var(--forest-700); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.legal-section h3 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  color: var(--forest-800); margin: 0;
}
.legal-section p, .legal-section li { font-size: 13.5px; line-height: 1.7; color: var(--ink-900); }
.legal-section ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-section p { margin: 0 0 6px; }
.legal-section p:last-child, .legal-section ul:last-child { margin-bottom: 0; }
.legal-section a { color: var(--forest-700); font-weight: 600; }
.legal-section a:hover { text-decoration: underline; }

/* Khối cảnh báo/nhấn mạnh bên trong 1 mục (VD lưu ý quan trọng) - tách biệt
   hẳn khỏi văn bản thường bằng nền + viền màu hổ phách, không dùng lẫn với
   .alert-error (đó là báo lỗi form, đây là ghi chú chính sách) */
.legal-note {
  background: #fff8ec; border: 1px solid #f0c674; border-radius: 10px;
  padding: 12px 14px; margin-top: 10px; font-size: 12.5px; color: #7a5a12; line-height: 1.6;
}

/* Khối liên hệ cuối trang - card riêng nổi bật, có nút Zalo thật (không chỉ
   link chữ xanh nhỏ) để tạo hành động rõ ràng, đúng tinh thần "thu hút bằng
   niềm tin" thay vì kết thúc trang bằng 1 dòng chữ đơn điệu */
.legal-contact-card {
  background: linear-gradient(135deg, var(--forest-700), var(--forest-800));
  border-radius: 16px; padding: 24px 22px; text-align: center; color: #fff; margin: 6px 0 18px;
}
.legal-contact-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin: 0 0 6px; color: #fff; }
.legal-contact-card p { font-size: 13px; color: rgba(255,255,255,.85); margin: 0 0 16px; line-height: 1.6; }
.legal-contact-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--forest-800);
  font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 30px; text-decoration: none;
}
.legal-contact-btn:hover { opacity: .92; }

/* Link chéo qua các trang pháp lý khác - dạng viên nhỏ thay vì chuỗi link
   gạch dưới nối tiếp nhau khó phân biệt điểm bắt đầu/kết thúc */
.legal-crosslinks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 24px; }
.legal-crosslinks a {
  font-size: 12px; font-weight: 600; color: var(--forest-700); background: var(--forest-100);
  padding: 7px 14px; border-radius: 20px; text-decoration: none;
}
.legal-crosslinks a:hover { background: var(--active-bg); }

/* ==========================================================================
   HOÀN TẤT HỒ SƠ (complete_profile.php) - trước đây toàn bộ style viết tay
   inline rời rạc (padding/border lặp lại ở từng input), giờ gom về class
   .cp-* dùng chung + thêm thanh chỉ báo bước (steps) để khách biết đang ở
   đâu trong quy trình, đỡ cảm giác "hỏi cung" đột ngột khi mới đăng nhập
   xong đã bị chặn lại yêu cầu điền thêm. ========================================================================== */
.cp-wrap { max-width: 460px; margin: 0 auto; padding: 28px 20px 40px; }
.cp-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 28px 24px 26px; box-shadow: 0 2px 16px rgba(20,30,25,.06);
}
.cp-icon {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  box-shadow: 0 6px 16px rgba(31,61,46,.22);
}
.cp-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--forest-800); margin: 0 0 6px; text-align: center; }
.cp-desc { font-size: 13.5px; color: var(--ink-600); line-height: 1.6; text-align: center; margin: 0 0 22px; }

/* Thanh chỉ báo bước - 3 chấm nối liền, chấm đã qua/đang ở tô màu forest,
   chấm chưa tới màu nhạt - cho khách thấy rõ còn bao xa mới xong, giảm cảm
   giác "không biết còn hỏi gì nữa" */
.cp-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 24px; }
.cp-steps .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background .2s; }
.cp-steps .cp-line { width: 28px; height: 2px; background: var(--border-strong); }
.cp-steps .cp-dot.done, .cp-steps .cp-line.done { background: var(--forest-600); }
.cp-steps .cp-dot.active { background: var(--forest-700); box-shadow: 0 0 0 4px var(--active-bg); }

.cp-field { margin-bottom: 16px; }
.cp-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-600); display: block; margin-bottom: 6px; }
.cp-field input {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--border-strong);
  font-family: var(--font-body); font-size: 15.5px; box-sizing: border-box; background: #fbfbfa;
  transition: border-color .15s, background .15s;
}
.cp-field input:focus { outline: none; border-color: var(--forest-500); background: #fff; }
.cp-field-status { font-size: 12px; margin-top: 5px; min-height: 15px; }

.cp-otp-input {
  width: 100%; padding: 14px; border-radius: 10px; border: 1.5px solid var(--border-strong);
  font-family: var(--font-body); font-size: 26px; text-align: center; letter-spacing: 10px;
  box-sizing: border-box; background: #fbfbfa; font-weight: 700; color: var(--forest-800);
}
.cp-otp-input:focus { outline: none; border-color: var(--forest-500); background: #fff; }

.cp-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 12px rgba(31,61,46,.25); transition: opacity .15s, transform .1s;
}
.cp-btn:hover { opacity: .93; }
.cp-btn:active { transform: scale(.98); }

.cp-hint { font-size: 11.5px; color: var(--ink-400); text-align: center; margin-top: 16px; line-height: 1.6; }
.cp-links { text-align: center; margin-top: 18px; font-size: 13px; }
.cp-links button { background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.cp-links .cp-link-primary { color: var(--forest-700); font-weight: 700; }
.cp-links .cp-link-muted { color: var(--ink-600); text-decoration: underline; }
.cp-links .cp-sep { color: var(--ink-400); }

/* ==========================================================================
   CHỈNH SỬA TRANG CÁ NHÂN (edit_profile.php) - trước đây toàn bộ input dùng
   style inline lặp lại, nút "Đổi ảnh" chỉ là chữ nổi trên ảnh bìa không rõ
   ràng. Giờ gom về .ep-* + dùng lại tinh thần card của .cp-card (đã áp dụng
   ở complete_profile.php) để đồng bộ toàn site.
   ========================================================================== */
.ep-cover-wrap { position: relative; width: 100%; aspect-ratio: 2.7/1; background-size: cover; background-position: center; background-color: var(--page-bg); }
.ep-cover-edit-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,30,25,.62); backdrop-filter: blur(2px); color: #fff; padding: 9px 16px;
  border-radius: 24px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.25);
}
.ep-avatar-block { text-align: center; margin-top: -46px; margin-bottom: 20px; position: relative; z-index: 2; }
.ep-avatar {
  width: 92px; height: 92px; margin: 0 auto 10px; border: 4px solid #fff; border-radius: 50%;
  background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.ep-avatar-edit-label { color: var(--forest-700); font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

.ep-body { max-width: 600px; margin: 0 auto; padding: 0 20px 30px; }
.ep-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(20,30,25,.05); }
.ep-card-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--forest-800); text-transform: uppercase; letter-spacing: .3px; margin: 0 0 16px; display: flex; align-items: center; gap: 7px; }

.ep-field { margin-bottom: 16px; }
.ep-field:last-child { margin-bottom: 0; }
.ep-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-600); display: block; margin-bottom: 6px; }
.ep-field input, .ep-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border-strong);
  font-family: var(--font-body); font-size: 14.5px; box-sizing: border-box; background: #fbfbfa; transition: border-color .15s, background .15s;
}
.ep-field input:focus, .ep-field textarea:focus { outline: none; border-color: var(--forest-500); background: #fff; }
.ep-field input:disabled {
  background: var(--page-bg); color: var(--ink-600); border-color: var(--border); cursor: not-allowed;
}
.ep-field-hint { font-size: 11.5px; color: var(--ink-400); margin-top: 6px; line-height: 1.5; }

/* Trạng thái "đã xác minh" - badge nhỏ xanh cạnh nhãn thay vì chỉ có ghi chú
   chữ mờ bên dưới, giúp khách nhận ra ngay đây là dữ liệu đáng tin/khoá cứng */
.ep-verified-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--forest-700); background: var(--forest-100); padding: 2px 8px; border-radius: 10px; margin-left: 6px;
}
.ep-verified-badge.ep-badge-warn { color: #a06a12; background: #fff3d6; }

.ep-add-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: stretch; }
.ep-add-row input { flex: 1; }
.ep-add-btn {
  padding: 0 20px; border-radius: 10px; border: none; color: #fff;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  font-family: var(--font-display); font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 10px rgba(31,61,46,.22); transition: opacity .15s, transform .1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.ep-add-btn:hover { opacity: .92; }
.ep-add-btn:active { transform: scale(.97); }
.ep-add-btn.verify { background: linear-gradient(135deg, var(--forest-700), var(--forest-900, #14261c)); }
/* Nút "Xác minh ngay" đứng riêng lẻ (không nằm trong .ep-add-row cạnh ô
   input) - trước đây chỉ kế thừa .ep-add-btn với padding ngang, KHÔNG có
   chiều cao/padding dọc riêng nên bị bẹt/lệch khi đứng 1 mình, nhìn như lỗi
   CSS. Giờ có class riêng, cao đầy đủ như 1 nút hành động thật sự. */
.ep-reverify-btn {
  padding: 11px 22px; border-radius: 10px; border: none; color: #fff;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(31,61,46,.22); transition: opacity .15s, transform .1s;
  display: inline-flex; align-items: center; gap: 6px;
}
.ep-reverify-btn:hover { opacity: .92; }
.ep-reverify-btn:active { transform: scale(.97); }
.ep-add-msg { font-size: 12px; margin-bottom: 8px; min-height: 16px; }
.ep-add-otp-row { display: none; gap: 8px; margin-bottom: 4px; }
.ep-add-otp-row input { flex: 1; letter-spacing: 4px; text-align: center; font-size: 16px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border-strong); font-family: var(--font-body); box-sizing: border-box; background: #fbfbfa; }
.ep-add-otp-row input:focus { outline: none; border-color: var(--forest-500); background: #fff; }

.ep-save-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 12px rgba(31,61,46,.25); transition: opacity .15s, transform .1s;
}
.ep-save-btn:hover { opacity: .93; }
.ep-save-btn:active { transform: scale(.98); }

/* ==========================================================================
   KHỐI "TIỀN CỌC ĐỀ NGHỊ" TRÊN booking.php - TÁCH RIÊNG khỏi bảng giá thường,
   nổi bật hẳn (nền hổ phách nhạt, số to) để khách thấy NGAY và RÕ RÀNG số
   tiền cần chuyển TRƯỚC khi bấm sang bước tiếp theo, thay vì ẩn trong 1 dòng
   nhỏ giữa bảng giá (hoặc trước đây còn bị ẩn HẲN với đơn đặt trực tiếp
   không qua Sale).
   ========================================================================== */
.deposit-highlight-box {
  background: linear-gradient(135deg, #fff8ec, #fff3d6); border: 1.5px solid #f0c674;
  border-radius: 14px; padding: 16px 18px; margin: 14px 0; text-align: center;
}
.deposit-highlight-label {
  font-size: 12px; font-weight: 700; color: #8a6d1e; text-transform: uppercase; letter-spacing: .3px;
}
.deposit-highlight-amount {
  font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #a06a12; margin-top: 6px;
}
.deposit-highlight-note { font-size: 11.5px; color: #8a6d1e; margin-top: 8px; line-height: 1.5; }

/* ==========================================================================
   BANNER NHẮC XÁC MINH LẠI (verify-reminder-banner) - hiện ở đầu app-shell
   khi tài khoản có email/SĐT ĐÃ CÓ GIÁ TRỊ nhưng CHƯA qua OTP (khác cổng
   chặn cứng "thiếu hẳn thông tin" ở complete_profile.php) - CHỈ NHẮC, không
   chặn thao tác, nên thiết kế rõ ràng/bắt mắt để không bị bỏ qua nhưng
   không dùng màu đỏ báo lỗi gắt (đây không phải lỗi của khách).
   ========================================================================== */
.verify-reminder-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 1px;
  padding: 12px 16px; background: linear-gradient(90deg, #fff8ec, #fff3d6);
  border-bottom: 1px solid #f0c674; text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.verify-reminder-banner:hover { background: linear-gradient(90deg, #fff3d6, #ffe9b3); }
.verify-reminder-icon { font-size: 20px; flex-shrink: 0; }
.verify-reminder-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.verify-reminder-text b { font-size: 13.5px; color: #7a5a12; }
.verify-reminder-text span { font-size: 12px; color: #8a6d1e; }
.verify-reminder-arrow { font-size: 18px; color: #a06a12; flex-shrink: 0; font-weight: 700; }
@media (max-width: 480px) {
  .verify-reminder-text b { font-size: 12.5px; }
  .verify-reminder-text span { font-size: 11px; }
}

/* Ô ghi chú khách tự nhập lúc đặt phòng (booking.php) */
.guest-note-box { margin: 14px 0; }
.guest-note-box label { font-size: 13px; font-weight: 700; color: var(--ink-700); display: block; margin-bottom: 6px; }
.guest-note-box textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--border-strong);
  font-family: var(--font-body); font-size: 14px; box-sizing: border-box; resize: vertical; min-height: 54px;
  background: #fbfbfa; transition: border-color .15s, background .15s;
}
.guest-note-box textarea:focus { outline: none; border-color: var(--forest-500); background: #fff; }

/* ==========================================================================
   KÝ HỢP ĐỒNG (partner_register.php) - bảng ký tên tay bằng canvas.
   ========================================================================== */
.contract-box { background: #fbfaf7; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.contract-box-notice {
  font-size: 12.5px; color: var(--ink-700); line-height: 1.6; background: #fff8ec;
  border: 1px solid #f0c674; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
.signature-pad-wrap {
  position: relative; width: 100%; height: 180px; background: #fff;
  border: 1.5px dashed var(--border-strong); border-radius: 10px; overflow: hidden; touch-action: none;
}
.signature-pad-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.signature-pad-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-400); font-size: 14px; pointer-events: none;
}
.signature-pad-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.signature-clear-btn {
  background: none; border: 1px solid var(--border-strong); border-radius: 20px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-700); cursor: pointer;
}
.signature-clear-btn:hover { background: var(--page-bg); }
.signature-status { font-size: 12.5px; font-weight: 700; }

/* ==========================================================================
   VĂN BẢN HỢP ĐỒNG (partner_register.php + admin/partner_approvals.php) -
   con dấu VUÔNG đúng chuẩn Hộ Kinh Doanh (không dùng dấu tròn - hình thức đó
   chỉ dành cho doanh nghiệp/tổ chức có tư cách pháp nhân) + khối chữ ký 2
   BÊN (Sàn / Sale-Host) kiểu chữ ký điện tử chuyên nghiệp.
   ========================================================================== */
.contract-document {
  background: #fffdf8; border: 1px solid #e8e2d0; border-radius: 12px;
  padding: 24px 22px; max-height: 480px; overflow-y: auto; font-size: 13.5px; color: var(--ink-800); line-height: 1.7;
}
.contract-document h4 { font-family: var(--font-display); font-size: 16px; color: var(--forest-800); margin: 0 0 10px; text-align: center; }
.contract-document p { margin: 0 0 12px; }
.contract-document-body { margin-bottom: 20px; }

/* ---- Hàng chữ ký 2 bên - Sàn (trái) / Sale-Host (phải) ---- */
.contract-signee-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-top: 18px; border-top: 2px dashed #cfe6d6;
}
.contract-signee-col { text-align: center; }
.contract-signee-title { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--forest-700); margin-bottom: 10px; }

/* ---- Con dấu VUÔNG (Bên Sàn) - có viền đôi kiểu dấu mộc thật, chữ đỏ,
   KHÔNG bo góc tròn (đây là điểm khác biệt quan trọng so với bản cũ). ---- */
.contract-seal-square {
  display: inline-block; border: 2.5px solid #b5342a; padding: 3px; margin-bottom: 10px;
}
.contract-seal-square::before { content: ''; display: block; border: 1px solid #b5342a; padding: 10px 14px; }
.contract-seal-square { position: relative; }
.contract-seal-square-name, .contract-seal-square-divider, .contract-seal-square-addr {
  position: relative; z-index: 1;
}
.contract-seal-square-name {
  font-family: var(--font-display); font-size: 12px; font-weight: 800; color: #b5342a;
  line-height: 1.35; padding: 10px 14px 4px; letter-spacing: .3px;
}
.contract-seal-square-divider { height: 1px; background: #b5342a; opacity: .5; margin: 0 14px; }
.contract-seal-square-addr { font-size: 9.5px; color: #b5342a; line-height: 1.5; padding: 4px 14px 10px; opacity: .9; }

/* ---- Khối "chữ ký điện tử" (badge) - dùng chung cho cả Sàn lẫn đối tác,
   đổi màu theo bên để phân biệt rõ. ---- */
.contract-digital-sig-badge {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  background: #f0f6f2; border: 1px solid #cfe6d6; border-radius: 10px; padding: 10px 12px; margin-top: 4px;
}
.contract-digital-sig-badge-partner { background: #eef4fb; border-color: #c6dcf0; }
.contract-digital-sig-badge-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.contract-digital-sig-badge-text { min-width: 0; }
.contract-digital-sig-badge-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--forest-700); }
.contract-digital-sig-badge-partner .contract-digital-sig-badge-label { color: #1c5fa8; }
.contract-digital-sig-badge-org { font-size: 12.5px; font-weight: 700; color: var(--ink-900); margin-top: 2px; word-break: break-word; }
.contract-digital-sig-badge-detail { font-size: 11px; color: var(--ink-600); margin-top: 2px; }
.contract-digital-sig-badge-time { font-size: 11px; color: var(--ink-600); margin-top: 3px; }
.contract-digital-sig-badge-code { font-size: 10px; color: var(--ink-500); margin-top: 3px; font-family: monospace; letter-spacing: .3px; }

/* ---- Chữ ký tay (Bên Sale/Host) ---- */
.contract-handwritten-sig-box {
  height: 90px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px dashed var(--border-strong); border-radius: 8px; margin-bottom: 10px;
}
.contract-handwritten-sig-empty { color: var(--ink-400); font-size: 13px; }
.contract-signed-image { max-width: 90%; max-height: 84px; }

.contract-unsigned-note {
  margin-top: 6px; padding: 8px 10px; background: #fff3d6; border: 1px solid #f0c674; border-radius: 8px;
  font-size: 11.5px; color: #7a5a12; text-align: center;
}

@media (max-width: 560px) {
  .contract-document { padding: 18px 14px; max-height: 380px; }
  .contract-signee-row { grid-template-columns: 1fr; }
  .contract-seal-square-name { font-size: 11px; }
}