/* File css dùng chung cho dự án này */

/* ══════════════════════════════════════════════════════════════
   NÚT MODAL DÙNG CHUNG (sửa 1 chỗ — ăn mọi modal)
   • .modal-close-x  : nút ✕ ở header đỏ (đóng modal)
   • .modal-cancel-btn: nút "Đóng" viền ở footer
   Áp dụng: modal Hình thức bàn giao, modal Vui lòng đăng nhập, ...
   ══════════════════════════════════════════════════════════════ */
.modal-close-x {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-close-x:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* Biến thể đặt góc trên-phải (cho modal có header canh giữa, vd Vui lòng đăng nhập) */
.modal-close-x--corner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

.modal-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.14s;
}
.modal-cancel-btn:hover {
  border-color: var(--primary, #b20707);
  color: var(--primary, #b20707);
}

/* Badge trạng thái dự án — màu lấy từ token variable.css (fallback = giá trị gốc). */
.badge-mo_ban {
    background: var(--bg-prj-mo-ban, #e7fff4);
    color: var(--color-prj-mo-ban, #07a35d);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-sap_mo_ban {
    background: var(--bg-prj-sap-mo-ban, #fff7ed);
    color: var(--color-prj-sap-mo-ban, #f97316);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-sap_ra_mat {
    background: var(--bg-prj-sap-ra-mat, #eef2ff);
    color: var(--color-prj-sap-ra-mat, #4f46e5);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-het_hang {
    background: var(--bg-prj-het-hang, #fef2f2);
    color: var(--color-prj-het-hang, #ef4444);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-tam_dung {
    background: var(--bg-prj-tam-dung, #f3f4f6);
    color: var(--color-prj-tam-dung, #4b5563);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-hoan_thanh {
    background: var(--bg-prj-hoan-thanh, #eff6ff);
    color: var(--color-prj-hoan-thanh, #2563eb);
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-dong_ban {
    background: var(--bg-prj-dong-ban, #f3f4f6);
    color: var(--color-prj-dong-ban, #4b5563);
    padding: 4px 8px;
    border-radius: 4px;
}

.proj-wish-btn.wishlisted {
    /*background: #fff5f5;*/
}
.proj-wish-btn > i {
    font-size: 20px;
}
.proj-wish-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    z-index: 10;
}
.proj-wish-btn:not(.wishlisted) i {
    color: white !important;
    opacity: 0.65;
}

.item_card_body { padding: 12px 14px; background: #FDFBF2; height: 100%;}

.my_container {
    max-width: 95%;
    padding: 0 24px;
}
@media (max-width: 767px) {
    .my_container {
        max-width: 100%;
    }
}

/* ══ Table ══ */
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #fff;
    background: var(--red);
    white-space: nowrap;
    letter-spacing: .3px;
}
.acc-table td { padding: 12px 14px; border-bottom: 1px solid #f5f5f5; color: var(--text); vertical-align: middle; font-size: var(--fs-sm)}
.acc-table th.acc-tbl-stt {
    width: 50px;
    text-align: center;
}
.acc-table td.acc-tbl-stt-val {
    text-align: center;
    color: #888;
}
.acc-table tr:last-child td { border-bottom: none; }

.acc-table tr:nth-child(even) td {
    background: var(--bg-table-hover-level-1);
}
body .acc-table tr:hover td {
    background: var(--bg-table-hover-level-2);
}

.fd-sbadge.s-available {
    background: #dcfce7;
    color: #166534;
}
.fd-sbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

/* Đổi toàn bộ màu nền phần nội dung chính (main) sang màu trắng (không sử dụng !important) */
body, body main, body .detail-container, body .listing-layout, body .profile-wrap, body .search-container, body .nd-wrap {
    background-color: #ffffff;
}

/* ── CẤU HÌNH HEADER & BREADCRUMBS ĐỒNG BỘ ── */
body .pt-hero, body .proj-header {
    background: #ffffff;
    border-bottom: none;
    padding: 20px 0 8px;
}
body .nd-breadbar {
    background: #ffffff;
    border-bottom: none;
    padding: 20px 0 0;
}

/* Cấu hình breadcrumbs */
body .pt-bc, body .bc, body .nd-breadbar-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
body .pt-bc a, body .bc a, body .nd-breadbar-inner a {
    color: #888;
    transition: color 0.15s;
    text-decoration: none;
}
body .pt-bc a:hover, body .bc a:hover, body .nd-breadbar-inner a:hover {
    color: var(--red, #e53935);
    text-decoration: none;
}
body .pt-bc .sep, body .bc .sep, body .nd-breadbar-inner .sep {
    color: #ccc;
}

/* Cấu hình tiêu đề chính với đường gạch chân co giãn tự động */
body .pt-title, body .proj-name, body .nd-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--red, #e53935);
    position: relative;
    margin-bottom: 12px;
}

h1.ni-page-title {
    padding-bottom: 4px;
}

/* Ẩn các gạch chân có độ rộng cố định cũ */
body .pt-title::after, body .proj-name::after {
    display: none;
}

/* ── THU HẸP KHOẢNG CÁCH DỌC DƯỚI HEADER ── */
body .listing-layout {
    margin-top: 12px;
    margin-bottom: 28px;
}
body .nd-wrap {
    padding-top: 12px;
}
body .contact-container {
    padding-top: 12px;
}

/* ── TRANG QUAN TÂM ── */
body .wish-section-heading {
    color: #000000;
}
body .wish-count-badge {
    color: #333333;
}
body .wish-status-badge {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── CONFIRM LOCK SUCCESS MODAL CLOSE BUTTON ── */
body .success-modal-close-btn {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: #e5e7eb;
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}
body .success-modal-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

/* ── HIDE DUPLICATE BOOKING RED CIRCLE X ICON ── */
body .fd-dup-icon-wrap {
  display: none !important;
}