/* Trang kho BĐS và trang đăng nhập là tài liệu HTML độc lập, không đi qua layout của theme
   nên phải tự reset margin mặc định 8px của <body>, nếu không sẽ thấy viền trắng quanh trang. */
html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* Kho BĐS Nhà Phố Center — dựng lại từ mockup vinvillav2-docs/index.html mà không cần Tailwind runtime. */
:root {
    --re-pri: #c81e2c;
    --re-pri-dark: #a6141f;
    --re-pri-light: #fce9ea;
    --re-ink: #1b1b1f;
    --re-sub: #6b6e76;
    --re-line: #e7e7ea;
    --re-bg: #f5f5f7;
    --re-hot: #e8622c;
    --re-radius: 16px;
}

.re-app,
.re-app * {
    box-sizing: border-box;
}

.re-app {
    background: var(--re-bg);
    color: var(--re-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
}

.re-app a {
    text-decoration: none;
}

/* Lưới an toàn: mọi <button> trong app đều có con trỏ tay, kể cả những nút chưa/không gắn
   class .re-btn hay .re-iconbtn (2 class đó đã tự khai cursor:pointer riêng rồi). */
.re-app button:not(:disabled),
.re-auth button:not(:disabled) {
    cursor: pointer;
}

.re-app button:disabled,
.re-auth button:disabled {
    cursor: not-allowed;
}

/* Chỉ link thường mới thừa kế màu chữ của cha; nút dạng <a> (.re-btn--*) phải tự quyết định
   màu của nó — nếu không, quy tắc trên (class + thẻ, đặc thù cao hơn .re-btn--primary một
   class đơn) sẽ luôn thắng và đè "color: inherit" lên chữ trắng của nút, làm mất tương phản. */
.re-app a:not([class*="re-btn"]) {
    color: inherit;
}

/* ---------- Sidebar ---------- */
.re-sidebar {
    width: 250px;
    flex: 0 0 250px;
    /* height:100vh (cố định theo khung nhìn) thay vì để flex cha tự stretch theo chiều cao nội
       dung của .re-main — stretch theo sibling sẽ ăn theo trang dài (có thể rất cao khi cuộn),
       làm position:sticky "dính" sai như lỗi cũ đã sửa (align-self:flex-start trước đây). Còn
       max-height:100vh (không có height cố định) lại chỉ CHẶN TRÊN, không ép sidebar cao đủ
       100vh khi nội dung ngắn hơn trang — để lộ khoảng xám trống phía dưới. height:100vh vừa
       tránh được lỗi sticky cũ vừa phủ nền trắng hết chiều cao màn hình. */
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--re-line);
    padding: 18px 14px;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.re-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 18px;
}

/* Vạch phân cách logo với danh mục điều hướng bên dưới — chỉ ở sidebar, không ảnh hưởng
   .re-brand dùng lại ở trang đăng nhập/đăng ký. Đặt ở .re-sidebar__head (bọc ngoài .re-brand +
   nút menu mobile) thay vì thẳng .re-brand để vạch kẻ nằm dưới CẢ hàng, không chỉ dưới logo. */
.re-sidebar__head {
    border-bottom: 1px solid var(--re-line);
    margin-bottom: 14px;
}

.re-brand__mark {
    /* Logo khiên (tỉ lệ 165:192) — giữ nguyên tỉ lệ, không bọc nền. */
    flex: 0 0 auto;
    display: block;
    height: 46px;
    width: auto;
}

.re-brand__name {
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.re-brand__sub {
    font-size: 10.5px;
    color: var(--re-sub);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Nút mở menu điều hướng trên mobile — ẩn hẳn trên desktop, sidebar desktop đã hiện đủ .re-nav
   luôn rồi nên không cần nút bấm mở/đóng gì cả. */
.re-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--re-line);
    background: #fff;
    color: var(--re-ink);
    flex: 0 0 auto;
    cursor: pointer;
}

/* Nút đóng (X) bên trong drawer + lớp phủ nền tối phía sau — cả 2 chỉ có ý nghĩa trên mobile
   (sidebar dạng drawer), ẩn hẳn trên desktop ở đây, hiện lại trong @media max-width:860px. */
.re-nav-close,
.re-nav-backdrop {
    display: none;
}

.re-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.re-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #4b4d54;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.re-nav__item .re-icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.re-nav__item:hover {
    background: var(--re-bg);
    color: var(--re-ink);
}

.re-nav__item.is-active {
    background: var(--re-pri-light);
    color: var(--re-pri) !important;
    font-weight: 700;
}

.re-nav__item.is-active .re-icon {
    color: var(--re-pri) !important;
}

/* Đăng xuất trong menu mobile — ẩn trên desktop (đăng xuất ở topbar như cũ). Reset lại style
   mặc định của <button> (viền, nền, font) để trông giống hệt link .re-nav__item khác. */
.re-nav__logout {
    display: none;
}

.re-nav__logout .re-nav__item {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.re-nav__count {
    margin-left: auto;
    background: var(--re-pri);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-support {
    /* margin-top:auto đẩy khối này xuống sát đáy sidebar (giờ đã cao 100vh) — khoảng cách với
       mép dưới cùng lấy từ padding-bottom sẵn có của .re-sidebar (18px), không cần khai riêng. */
    margin-top: auto;
    padding: 20px 14px 18px;
    border-radius: 14px;
    background: var(--re-pri-light);
    text-align: center;
}

.re-support__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--re-pri);
    margin-bottom: 10px;
}

.re-support__icon .re-icon {
    font-size: 19px;
}

.re-support__label {
    font-size: 12.5px;
    color: var(--re-sub);
    margin-bottom: 4px;
}

.re-support__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--re-pri);
    font-weight: 800;
    font-size: 15px;
    /* !important vì ".re-app a:not([class*=re-btn])" reset màu link về "inherit" có độ đặc thù
       cao hơn class đơn lẻ này (2 class + 1 thẻ so với 1 class) — không có "re-btn" trong tên
       class nên bị dính reset đó, chữ hoá đen theo nền hồng xung quanh thay vì trắng. */
    color: #fff !important;
    cursor: pointer;
}

.re-support__phone:hover {
    background: var(--re-pri-dark);
}

.re-support__phone .re-icon {
    font-size: 16px;
}

/* ---------- Main ---------- */
.re-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.re-topbar {
    background: var(--re-pri);
    border-bottom: none;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Logo + nút mở menu mobile — ẩn trên desktop, sidebar riêng đã có logo rồi. Hiện lại ở
   @media max-width:860px. */
.re-topbar__brand {
    display: none;
}

.re-content {
    padding: 20px 24px 48px;
}

/* ---------- Filter panel ---------- */
.re-panel {
    background: #fff;
    border: 1px solid var(--re-line);
    border-radius: var(--re-radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}

/* .re-contact-card__head/__hint/__btns: thay cho margin viết tay trên thẻ "Thông tin liên
   hệ" (detail.blade.php) — giữ nguyên giá trị cũ ở đây cho desktop, override gọn hơn trên
   mobile (@media max-width:860px) vì trên đó thẻ này neo cố định dưới đáy màn hình, chiếm
   chỗ vĩnh viễn nên cần tiết kiệm khoảng trắng hơn bản nằm trong luồng trang bình thường. */
.re-contact-card__head {
    margin-bottom: 10px;
}

.re-contact-card__hint {
    font-size: 11.5px;
    color: var(--re-sub);
    text-align: center;
    margin: 6px 0 12px;
}

.re-contact-card__btns {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.re-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.re-panel__title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.re-panel__title--accent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.re-panel__title--accent::before {
    content: "";
    display: block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--re-pri);
}

.re-panel__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.re-panel__title-row .re-iconbtn {
    flex: 0 0 auto;
}

.re-filter-grid {
    /* 5 cột lọc chia đều bằng nhau tuyệt đối (cùng 1fr) + cột cuối cố định 170px riêng cho
       nút Lọc, bằng đúng nút "TÌM KIẾM" — auto-fit trước đây để cột nút co giãn theo 1fr
       như các cột khác, khiến nó không khớp độ rộng cố định của nút tìm kiếm phía trên. */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 170px;
    gap: 12px;
}

/* Ô tìm kiếm to, gắn liền nút "Tìm kiếm" ngay bên phải — thành 1 khối duy nhất thay vì
   ô input + nút submit tách rời ở cuối form. */
.re-search-row {
    display: flex;
    margin-bottom: 14px;
}

.re-search-row__field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--re-line);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 0 14px;
    background: #fff;
}

.re-search-row__field .re-icon {
    flex: 0 0 auto;
    color: var(--re-sub);
}

.re-search-row__field input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    padding: 12px 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--re-ink);
    background: none;
}

/* Chọn ".re-btn.re-search-row__submit" (2 class) chứ không chỉ ".re-search-row__submit"
   (1 class) — rule ".re-btn { border-radius: 10px }" định nghĩa SAU trong file này (cùng
   độ đặc thù 1 class nếu để y hệt selector) sẽ thắng theo thứ tự, bo tròn đều 4 góc khiến
   nút trông tách rời khỏi ô nhập thay vì dính liền bên phải. */
.re-btn.re-search-row__submit {
    flex: 0 0 auto;
    width: 170px;
    justify-content: center;
    border-radius: 0 12px 12px 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Ô chọn tự thân đã hiện placeholder (tên field, xem .re-combo__trigger-text.is-placeholder)
   nên không cần nhãn "Tên field —" đứng ngoài nữa — đỡ tốn ngang, nhất là ở màn hình hẹp.
   Chọn selector .re-field.re-field--combo (đặc thù cao hơn .re-field một bậc) vì khối này
   đứng trước .re-field trong file — không thì .re-field định nghĩa sau sẽ đè mất. */
.re-field.re-field--combo {
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--re-line);
    border-radius: 12px;
    padding: 0 4px;
    background: #fff;
    transition: border-color 0.15s;
}

.re-field.re-field--combo:hover,
.re-field.re-field--combo:focus-within {
    border-color: var(--re-pri);
}

.re-field__prefix {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--re-ink);
    white-space: nowrap;
}

.re-field--combo .re-select {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    padding: 10px 8px;
    color: var(--re-sub);
}

.re-field--combo .re-select:hover,
.re-field--combo .re-select:focus {
    border-color: transparent;
}

/* Nút "Lọc" đứng cuối hàng field, cao bằng các ô combo nhờ align-items:stretch mặc định
   của .re-filter-grid — không cần set height tay. */
.re-filter-grid__submit {
    /* Cột riêng của nút này đã cố định đúng 170px ở grid-template-columns nên chỉ cần lấp
       đầy 100% — không còn lệch với nút "TÌM KIẾM" phía trên nữa. */
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 860px) {
    .re-filter-grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .re-filter-grid__submit {
        width: 100%;
    }

    /* Ô tìm kiếm + nút tìm kiếm vốn nằm chung 1 hàng, nút cố định 170px không co giãn — trên
       màn hình hẹp, tổng độ rộng (icon + input + nút 170px) vượt quá viewport, kéo tràn ngang
       cả trang. Giữ nguyên 1 hàng nhưng thu nút về chỉ còn icon (ẩn chữ "TÌM KIẾM") + input
       co giãn được (min-width:0) để cả hàng vừa khít màn hình hẹp. */
    .re-search-row__field {
        min-width: 0;
    }

    .re-search-row__field input {
        min-width: 0;
    }

    /* .re-btn.re-search-row__submit (2 class, không phải 1) — cùng lý do ở rule gốc phía
       trên: khối @media này nằm TRƯỚC ".re-btn" trong file, nếu để 1 class thì
       "padding: 10px 18px" của ".re-btn" (định nghĩa sau) sẽ thắng và phá layout nút 48px. */
    .re-btn.re-search-row__submit {
        width: 48px;
        padding: 0;
        gap: 0;
    }

    .re-search-row__submit-label {
        display: none;
    }
}

.re-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.re-field__label {
    font-size: 12px;
    color: var(--re-sub);
    font-weight: 500;
}

.re-input,
.re-select {
    width: 100%;
    border: 1px solid var(--re-line);
    border-radius: 12px;
    padding: 10px 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--re-ink);
    background: #fff;
    transition: border-color 0.15s;
}

.re-input:hover,
.re-select:hover {
    border-color: #c4c4c8;
}

.re-input:focus,
.re-select:focus {
    outline: none;
    border-color: var(--re-pri);
}

textarea.re-input {
    min-height: 80px;
    resize: vertical;
}

/* Ô "facebook.com/<username>" ở form Thông tin tài khoản — tiền tố cố định + input gộp
   chung 1 khung, đỡ phải gõ lại "https://facebook.com/" mỗi lần. */
.re-field__combo {
    display: flex;
    align-items: center;
    border: 1px solid var(--re-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s;
}

.re-field__combo:hover {
    border-color: #c4c4c8;
}

.re-field__combo:focus-within {
    border-color: var(--re-pri);
}

.re-field__prefix-text {
    flex: 0 0 auto;
    padding-left: 13px;
    font-size: 14px;
    color: var(--re-sub);
    white-space: nowrap;
}

.re-field__combo .re-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
}

.re-field__combo .re-input:hover,
.re-field__combo .re-input:focus {
    border-color: transparent;
}

.re-form-message {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.re-form-message--success {
    background: #e7f6ec;
    color: #1f8a4c;
}

.re-form-message--error {
    background: var(--re-pri-light);
    color: var(--re-pri-dark);
}

.re-search {
    flex: 1 1 auto;
    max-width: 460px;
    position: relative;
}

.re-price-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--re-line);
}

.re-price-row .re-field {
    max-width: 160px;
}

.re-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.re-btn--primary {
    background: var(--re-pri);
    color: #fff;
}

.re-btn--primary:hover {
    background: var(--re-pri-dark);
}

.re-btn--ghost {
    background: #fff;
    border-color: var(--re-line);
    color: var(--re-sub);
}

.re-btn--ghost:hover {
    border-color: #c4c4c8;
    color: var(--re-ink);
}

.re-btn--outline {
    background: #fff;
    border-color: var(--re-pri);
    color: var(--re-pri);
}

.re-btn--outline:hover {
    background: var(--re-pri);
    color: #fff;
}

.re-btn--link {
    background: none;
    border: none;
    color: var(--re-sub);
    padding: 6px 2px;
}

.re-btn--dark {
    background: var(--re-ink);
    color: #fff;
}

.re-btn--dark:hover {
    background: #000;
}

.re-btn--zalo {
    background: #0068ff;
    color: #fff;
}

.re-btn--zalo:hover {
    background: #0054cc;
}

/* Xanh thương hiệu Facebook (#1877f2) — khác tông với xanh Zalo (#0068ff) ở trên dù cùng là
   "xanh dương", đứng cạnh nhau vẫn phân biệt được rõ. */
.re-btn--facebook {
    background: #1877f2;
    color: #fff;
}

.re-btn--facebook:hover {
    background: #166fe5;
}

/* .re-contact-btn thay cho style="flex:1;min-width:0" viết tay trên 3 nút liên hệ (điện
   thoại/Zalo/Facebook) — cần bỏ inline style để override riêng được trên mobile, xem
   .re-contact-btn--icon-only trong @media max-width:860px. */
.re-contact-btn {
    flex: 1;
    min-width: 0;
}

.re-actions-row {
    display: flex;
    gap: 6px;
}

.re-actions-row .re-btn {
    padding: 10px 6px;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 860px) {
    /* Nút gọi điện + Facebook chỉ còn icon trên mobile (chừa chỗ cho Zalo vẫn hiện đủ chữ
       theo yêu cầu) — nhưng cả 3 nút vẫn giữ kích thước bằng nhau như cũ (flex:1 chung từ
       .re-contact-btn, không đổi riêng chiều rộng nút icon-only). */
    .re-contact-btn__label {
        display: none;
    }
}

/* ---------- Result bar ---------- */
.re-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.re-resultbar__count strong {
    font-size: 18px;
    font-weight: 800;
}

.re-resultbar__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Card grid ---------- */
.re-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.re-card {
    background: #fff;
    border: 1px solid #ededef;
    border-radius: var(--re-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.re-card:hover {
    box-shadow: 0 8px 24px rgba(20, 20, 30, 0.08);
    transform: translateY(-2px);
}

.re-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--re-bg);
    overflow: hidden;
}

.re-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.re-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    /* Chừa chỗ cho nút lưu (32px) ở góc phải. */
    right: 56px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

/* Tag trên ảnh: nền theo màu tag (inline style), chữ trắng — cùng khuôn với badge NEW. */
.re-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.re-badge-new {
    background: var(--re-pri);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

/* Đậm, trung tính (không dùng đỏ như badge Mới) — "đã bán" là trạng thái đóng deal, không
   phải điểm nhấn cần thu hút như tin mới/nổi bật. */
.re-badge-sold {
    background: rgba(17, 24, 39, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

.re-save {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: #fff;
    color: var(--re-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.re-save.is-saved {
    background: var(--re-pri);
    border-color: var(--re-pri);
    color: #fff;
}

.re-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.re-card__title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--re-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.re-card__code {
    font-size: 12px;
    color: var(--re-sub);
    /* ID là hash 40 ký tự của nguồn — không có chỗ ngắt tự nhiên nên phải cho ngắt giữa chữ. */
    overflow-wrap: anywhere;
}

.re-card__addr {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--re-sub);
    line-height: 1.35;
    min-height: 34px;
}

.re-card__price {
    font-size: 22px;
    font-weight: 700;
    color: var(--re-pri);
}

.re-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12.5px;
    color: var(--re-sub);
}

.re-card__specs span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.re-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--re-sub);
    padding-top: 8px;
    border-top: 1px solid rgba(231, 231, 234, 0.7);
}

.re-card__cta {
    margin-top: auto;
    padding-top: 8px;
}

/* ---------- Empty ---------- */
.re-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 16px;
    color: var(--re-sub);
}

.re-empty__title {
    font-weight: 600;
    font-size: 15px;
    color: var(--re-ink);
    margin-top: 12px;
}

.re-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

/* ---------- Detail ---------- */
.re-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: start;
}

.re-detail > aside {
    position: sticky;
    top: 76px;
}

.re-detail__main {
    position: relative;
}

/* Ảnh lớn được bọc trong <a> để lightGallery mở lightbox — chọn theo data-attribute thay vì
   ">img" vì ảnh không còn là con trực tiếp của .re-detail__gallery nữa. */
[data-re-main-image-link] {
    display: block;
    cursor: zoom-in;
}

.re-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 20, 30, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s;
}

.re-gallery-nav:hover {
    background: rgba(20, 20, 30, 0.7);
}

.re-gallery-nav--prev {
    left: 12px;
}

.re-gallery-nav--next {
    right: 12px;
}

/* Ảnh nguồn lẫn lộn dọc 1200x1600 và ngang 800x600, nên khung phải cố định tỉ lệ,
   nếu không chiều cao ảnh chính nhảy theo từng tin và hàng thumb bị so le. */
[data-re-main-image] {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: var(--re-radius);
    display: block;
    background: var(--re-bg);
    transition: filter 0.5s ease;
}

/* Loé sáng khi đổi ảnh, cho thấy rõ vừa chuyển ảnh thay vì mờ đi khó nhận biết
   (đối tượng dùng nhiều là người lớn tuổi). Không transition khi bật flash để sáng lên
   ngay lập tức, rồi mới dịu dần về bình thường theo transition ở trên. */
[data-re-main-image].re-flash {
    transition: none;
    filter: brightness(1.8);
}

.re-detail__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.re-detail__thumbs img {
    display: block;
    width: 100%;
    /* Chiều cao tuyệt đối thay vì aspect-ratio: mọi ô thumb chắc chắn bằng nhau. */
    height: 68px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 10px;
    background: var(--re-bg);
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.re-detail__thumbs img:hover,
.re-detail__thumbs img.is-active {
    border-color: var(--re-pri);
}

.re-detail__price {
    font-size: 30px;
    font-weight: 800;
}

.re-detail__unit {
    color: var(--re-sub);
    font-size: 13.5px;
}

.re-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 18px 0;
    padding: 16px 0;
    border-top: 1px solid var(--re-line);
    border-bottom: 1px solid var(--re-line);
}

.re-spec__value {
    font-weight: 700;
    font-size: 15px;
}

.re-spec__label {
    font-size: 12px;
    color: var(--re-sub);
}

.re-prose {
    white-space: pre-line;
    color: #34363c;
}

.re-contact__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--re-line);
    font-size: 13.5px;
}

.re-contact__row:last-child {
    border-bottom: none;
}

/* Thay cho dấu "—" ở dòng Zalo/Facebook khi chưa điền — nhắc nhân viên bấm vào điền luôn. */
.re-contact__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px dashed var(--re-line);
    color: var(--re-sub);
    cursor: pointer;
}

.re-contact__edit:hover {
    color: var(--re-pri);
    border-color: var(--re-pri);
}

.re-contact__edit .re-icon {
    font-size: 14px;
}

.re-notice {
    background: var(--re-pri-light);
    color: var(--re-pri-dark);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    margin-top: 14px;
}

.re-breadcrumb {
    font-size: 13px;
    color: var(--re-sub);
    margin-bottom: 14px;
}

.re-section-title {
    font-weight: 700;
    font-size: 16px;
    margin: 26px 0 12px;
}

/* Material Symbols Outlined — ligature icon (VD: <span class="re-icon">home</span>), nạp từ
   Google Fonts ở layout. Thay cho SVG path tự vẽ trước đây; mọi chỗ set font-size riêng cho
   .re-icon (inline style hoặc rule khác) vẫn hoạt động y hệt vì vẫn cùng cơ chế font-size. */
.re-icon {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    vertical-align: middle;
    font-size: 16px;
}

@media (max-width: 1024px) {
    .re-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .re-detail > aside {
        position: static;
    }
}

@media (max-width: 860px) {
    .re-app {
        display: block;
    }

    /* Logo chính đã gộp vào topbar đỏ (.re-topbar__brand) — .re-sidebar trên mobile giờ là
       drawer trượt từ trái vào (giống menu app quen thuộc), che hết chiều cao màn hình, ẩn
       ngoài khung nhìn (translateX(-100%)) cho tới khi bấm nút mở (☰ ở topbar) gắn .is-open. */
    .re-sidebar {
        width: 280px;
        max-width: 85vw;
        flex: none;
        height: 100vh;
        max-height: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        border-right: none;
        border-bottom: none;
        box-shadow: 4px 0 24px rgba(20, 20, 30, 0.18);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .re-sidebar.is-open {
        transform: translateX(0);
    }

    /* Logo vẫn ẩn trong drawer (đã có ở topbar rồi) — chỉ còn nút đóng (X) hiện ra. */
    .re-sidebar__head {
        display: none;
    }

    .re-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid var(--re-line);
        background: #fff;
        color: var(--re-ink);
        cursor: pointer;
        margin-bottom: 14px;
    }

    /* Lớp phủ nền tối phía sau drawer — bấm vào cũng đóng lại (data-re-nav-close), cùng gắn/gỡ
       .is-open với .re-sidebar (xem real-estate.js). */
    .re-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(20, 20, 30, 0.45);
        z-index: 99;
    }

    .re-nav-backdrop.is-open {
        display: block;
    }

    /* .re-nav giờ chỉ là danh sách bên trong drawer, không còn tự ẩn/hiện hay định vị riêng gì
       nữa — việc đó do .re-sidebar (khung ngoài) đảm nhiệm. */
    .re-nav {
        flex-direction: column;
    }

    .re-support {
        display: none;
    }

    .re-nav__logout {
        display: block;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--re-line);
    }

    /* Logo + nút mở menu, chỉ hiện trên mobile — chữ/icon trắng vì nằm trên nền đỏ của
       .re-topbar (khác bản desktop trong .re-sidebar, nền trắng nên chữ/icon tối màu). */
    .re-topbar__brand {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .re-topbar__brand .re-nav-toggle {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .re-topbar__brand-link {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        text-decoration: none;
        min-width: 0;
    }

    .re-topbar__brand-mark {
        flex: 0 0 auto;
        display: block;
        height: 34px;
        width: auto;
    }

    .re-topbar__brand-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

    /* Ghi màu trắng thẳng lên chữ — màu kế thừa từ link bị style chung của theme đè thành đen,
       đen trên nền đỏ rất khó đọc. */
    .re-topbar__brand-name,
    .re-topbar__brand-sub {
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .re-topbar__brand-name {
        font-weight: 800;
        font-size: 14.5px;
    }

    .re-topbar__brand-sub {
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .re-content,
    .re-topbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Nút đăng xuất chuyển vào cuối menu điều hướng mobile (.re-nav__logout) cho gọn hàng
       topbar — tên/vai trò nhân viên dễ bị xuống dòng nếu còn thêm nút này nữa. */
    .re-user form {
        display: none;
    }

    /* Ẩn luôn tên + vai trò trên mobile — chỉ còn avatar, đỡ chật hàng topbar (đăng xuất đã dời
       vào menu điều hướng, "tên nhân viên" ở đây không còn nhiều tác dụng bằng việc tiết kiệm
       chỗ cho chuông thông báo/logo). Phải chọn ".re-topbar .re-user__meta" (2 class) chứ không
       chỉ ".re-user__meta" (1 class) — rule gốc ".re-user__meta { display:flex }" định nghĩa
       SAU trong file này (cùng độ đặc thù 1 class) nên thắng theo thứ tự nếu để y hệt selector,
       ẩn không ăn. */
    .re-topbar .re-user__meta {
        display: none;
    }

    /* Màn hẹp đã có menu điều hướng riêng (.re-nav-toggle) — nút "Quay lại kho BĐS" ở topbar
       chỉ tổ chiếm chỗ, ưu tiên hiện chuông thông báo/avatar thay vào đó. */
    .re-topbar__back {
        display: none;
    }
}

/* ---------- Topbar mở rộng ---------- */
.re-search {
    position: relative;
}

.re-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--re-sub);
    pointer-events: none;
}

.re-search__input {
    padding-left: 36px;
}

.re-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.re-iconbtn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--re-sub);
    border: 1px solid var(--re-line);
    background: #fff;
    cursor: pointer;
}

.re-iconbtn:hover {
    color: var(--re-pri);
    border-color: var(--re-pri);
}

.re-iconbtn.is-saved {
    background: var(--re-pri);
    border-color: var(--re-pri);
    color: #fff;
}

.re-iconbtn.is-saved:hover {
    color: #fff;
}

.re-iconbtn__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--re-pri);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-user {
    display: flex;
    align-items: center;
    gap: 9px;
}

.re-user__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--re-pri-light);
    color: var(--re-pri);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-user__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.re-user__name {
    font-weight: 600;
    font-size: 13.5px;
}

.re-user__role {
    font-size: 11.5px;
    color: var(--re-sub);
}

/* Topbar nền đỏ: các phần tử vốn tương phản trên nền trắng (icon button, badge, avatar, tên
   member, nút đăng nhập...) cần đổi màu lại, không thì chìm mất trên nền đỏ. */
.re-topbar .re-iconbtn {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
}

.re-topbar .re-iconbtn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
    color: #fff;
}

/* Icon chuông trên nền đỏ: ép trắng + tô đặc (FILL 1) thay vì nét mảnh mặc định, không thì
   nhìn mờ/khó thấy trên nền đỏ ở kích thước nhỏ. Không đụng .re-iconbtn--solid (nút đăng
   xuất) vì nút đó nền trắng, icon phải đỏ mới thấy được. */
.re-topbar .re-iconbtn:not(.re-iconbtn--solid) .re-icon {
    color: #fff !important;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Nút đăng xuất: nền trắng đục, icon đỏ — khác kiểu viền mờ của các icon button còn lại
   trên topbar để nổi bật rõ hơn. */
.re-topbar .re-iconbtn--solid {
    background: #fff;
    border-color: #fff;
    color: var(--re-pri);
}

.re-topbar .re-iconbtn--solid:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--re-pri);
}

.re-topbar .re-iconbtn__badge {
    background: #fff;
    color: var(--re-pri);
}

.re-topbar .re-user__avatar {
    background: #fff;
    color: var(--re-pri);
}

.re-topbar .re-user__name {
    color: #fff;
}

.re-topbar .re-user__role {
    color: rgba(255, 255, 255, 0.75);
}

.re-topbar .re-btn--primary {
    background: #fff;
    color: var(--re-pri);
}

.re-topbar .re-btn--primary:hover {
    background: rgba(255, 255, 255, 0.85);
}

.re-topbar .re-btn--link {
    color: rgba(255, 255, 255, 0.8);
}

.re-topbar .re-btn--link:hover {
    color: #fff;
}

.re-topbar .re-btn--ghost {
    background: rgba(255, 255, 255, 0.9);
}

/* ---------- Ẩn/hiện bộ lọc ---------- */
.re-chevron {
    transition: transform 0.18s;
}

.re-panel.is-collapsed .re-chevron {
    transform: rotate(180deg);
}

.re-panel__foot {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* ---------- Slider khoảng giá ---------- */
.re-price {
    margin-top: 18px;
    padding: 18px 20px;
    background: var(--re-pri-light);
    border-radius: 14px;
}

.re-price__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.re-price__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--re-ink);
}

.re-price__label .re-icon {
    font-size: 18px;
}

.re-price__label strong {
    color: var(--re-pri);
}

.re-price__reset {
    background: #fff;
    flex: 0 0 auto;
}

.re-price__track {
    position: relative;
    height: 5px;
    background: rgba(200, 30, 44, 0.18);
    border-radius: 4px;
    margin: 0 11px;
    touch-action: none;
}

.re-price__fill {
    position: absolute;
    height: 5px;
    background: var(--re-pri);
    border-radius: 4px;
}

.re-price__thumb {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: var(--re-pri);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--re-pri), 0 2px 6px rgba(20, 20, 30, 0.25);
    transform: translateY(-50%);
    cursor: grab;
}

.re-price__thumb:active {
    cursor: grabbing;
}

.re-price__thumb:focus-visible {
    outline: 2px solid var(--re-pri);
    outline-offset: 3px;
}

.re-price__ticks {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--re-sub);
}

.re-price__ticks span {
    white-space: nowrap;
}

.re-price__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.re-price__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--re-line);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--re-sub);
    cursor: text;
}

.re-price__field:focus-within {
    border-color: var(--re-pri);
}

.re-price__field input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--re-ink);
}

.re-price__field input::placeholder {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--re-sub);
}

.re-price__dash {
    color: var(--re-sub);
}

/* ---------- Chuyển grid ⇄ list ---------- */
.re-viewswitch {
    display: inline-flex;
    border: 1px solid var(--re-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.re-viewswitch__btn {
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    color: var(--re-sub);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-viewswitch__btn.is-active {
    background: var(--re-pri-light);
    color: var(--re-pri);
}

.re-grid.is-list {
    grid-template-columns: 1fr;
}

.re-grid.is-list .re-card {
    flex-direction: row;
}

.re-grid.is-list .re-card__media {
    flex: 0 0 240px;
    aspect-ratio: 4 / 3;
}

.re-grid.is-list .re-card__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-content: start;
    gap: 6px 20px;
}

.re-grid.is-list .re-card__addr {
    min-height: 0;
}

.re-grid.is-list .re-card__price {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    text-align: right;
}

.re-grid.is-list .re-card__cta {
    grid-column: 2;
    margin-top: 0;
}

@media (max-width: 720px) {
    .re-grid.is-list .re-card {
        flex-direction: column;
    }

    .re-grid.is-list .re-card__media {
        flex: none;
        aspect-ratio: 3 / 2;
    }

    .re-grid.is-list .re-card__body {
        grid-template-columns: 1fr;
    }

    .re-grid.is-list .re-card__price,
    .re-grid.is-list .re-card__cta {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }
}

/* ---------- Đăng nhập / Đăng ký ---------- */
.re-auth,
.re-auth * {
    box-sizing: border-box;
}

.re-auth {
    /* Ảnh full trang thì form không cần dồn về một bên nữa — brand và panel xếp chồng lên
       nhau trong cùng 1 ô grid: brand neo chữ góc trên trái, panel canh form ra giữa cả trang. */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--re-ink);
    background: var(--re-bg) url(../img/auth-bg.jpg) center / cover no-repeat;
}

.re-auth__brand,
.re-auth__panel {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.re-auth a {
    color: var(--re-pri);
    text-decoration: none;
}

.re-auth__brand a.re-brand,
.re-auth__card-brand.re-brand {
    color: inherit;
}

.re-auth__brand {
    /* Ảnh nền dùng chung của .re-auth (trải hết cả trang) — khối này chỉ còn loang tròn
       (radial) quanh đúng vùng có chữ rồi tan dần mọi hướng, không có ảnh riêng/không có lớp
       che ở mép phải nữa nên ảnh hiện liền mạch xuyên suốt cả 2 cột, không bị ngắt quãng. */
    background: radial-gradient(
        ellipse 620px 400px at 270px 190px,
        rgba(120, 14, 22, 0.94) 0%,
        rgba(120, 14, 22, 0.85) 30%,
        rgba(120, 14, 22, 0.55) 55%,
        rgba(120, 14, 22, 0.2) 76%,
        rgba(120, 14, 22, 0) 95%
    );
    color: #fff;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.re-auth__pitch {
    margin-top: 22px;
}

.re-auth__copyright {
    margin-top: auto;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}


.re-auth__brand .re-brand__sub {
    color: rgba(255, 255, 255, 0.75);
}

.re-auth__pitch h1 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 16px;
    max-width: 15ch;
}

.re-auth__pitch p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 46ch;
}

.re-auth__copyright {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
}

.re-auth__panel {
    /* Chiếm trọn ô grid để canh giữa form ra giữa trang, nhưng phần trống xung quanh card
       (đè lên brand ở dưới) phải để lọt chuột xuống — chỉ card mới thực sự bắt sự kiện. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    pointer-events: none;
}

.re-auth__card {
    /* Kính mờ, nhìn xuyên được ảnh nền phía sau — ô nhập liệu tự lo việc nổi bật chữ khi gõ,
       card không cần đục hẳn. */
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(20, 20, 30, 0.18);
    pointer-events: auto;
    border-radius: var(--re-radius);
    padding: 32px;
}

/* Ô nhập trong form đăng nhập mờ theo card lúc bình thường, chỉ đục hẳn khi đang gõ để chữ
   luôn rõ — không đụng đến .re-input dùng chung cho toàn site. */
.re-auth .re-input,
.re-auth .re-select {
    background: rgba(255, 255, 255, 0.4);
}

.re-auth .re-input:focus,
.re-auth .re-select:focus {
    background: #fff;
}

.re-auth__card-brand {
    display: none;
    padding-bottom: 20px;
}

.re-auth__title {
    font-size: 23px;
    font-weight: 800;
    margin: 0 0 6px;
}

.re-auth__subtitle {
    margin: 0 0 22px;
    color: var(--re-sub);
    font-size: 13.5px;
}

.re-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.re-field__hint {
    font-style: normal;
    color: var(--re-sub);
    font-weight: 400;
}

.re-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--re-sub);
    cursor: pointer;
}

.re-check input {
    margin-top: 2px;
    accent-color: var(--re-pri);
    width: 16px;
    height: 16px;
}

.re-btn--block {
    width: 100%;
    padding: 12px 18px;
    font-size: 14.5px;
}

.re-auth__switch {
    margin: 4px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--re-sub);
}

.re-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 18px;
}

.re-alert--error {
    background: var(--re-pri-light);
    color: var(--re-pri-dark);
}

.re-alert--success {
    background: #e7f6ec;
    color: #1f8a4c;
}

/* Ảnh đại diện trang Cài đặt: icon camera tròn đè lên góc dưới-phải ảnh thay vì nút "Đổi ảnh"
   dạng chữ đứng cạnh. */
.re-avatar-upload {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
}

.re-avatar-upload img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.re-avatar-upload__camera {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--re-line);
    color: var(--re-pri);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20, 20, 30, 0.15);
}

.re-avatar-upload__camera:hover {
    border-color: var(--re-pri);
}

.re-avatar-upload__camera .re-icon {
    font-size: 14px;
}

.re-alert ul {
    margin: 0;
    padding-left: 18px;
}

@media (max-width: 900px) {
    .re-auth {
        grid-template-columns: 1fr;
    }

    .re-auth__brand {
        display: none;
    }

    .re-auth__card-brand {
        display: flex;
    }
}

/* ---------- Bảng lịch sử tìm kiếm ---------- */
/* .re-table-panel thay cho style="padding:0;overflow:hidden" viết tay trước đây — cần
   inline-style biến mất để mobile override được (inline style luôn thắng mọi CSS ngoài
   class, kể cả trong @media), xem override ngay trong khối @media max-width:860px bên
   dưới, PHẢI đặt SAU rule này (cùng độ đặc thù 1 class) để thắng theo thứ tự nguồn. */
.re-table-panel { padding: 0; overflow: hidden; }
.re-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.re-table th, .re-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--re-line); vertical-align: middle; }
.re-table th { font-size: 12px; font-weight: 600; color: var(--re-sub); text-transform: uppercase; letter-spacing: .03em; background: var(--re-bg); }
.re-table tr:last-child td { border-bottom: none; }
.re-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.re-table__muted { color: var(--re-sub); }
.re-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; margin: 2px 4px 2px 0; border-radius: 999px; background: var(--re-bg); color: var(--re-sub); }

/*
   Trên mobile, mỗi <tr> của .re-table biến thành 1 "thẻ" đứng riêng (kiểu timeline/card-list)
   thay vì bảng nhiều cột nằm ngang dễ vỡ chữ. Đặt khối @media này NGAY SAU các rule ".re-table"
   gốc ở trên (không gộp vào khối @media (max-width:860px) chung ở đầu file, dòng ~1134) — khối
   đó nằm TRƯỚC các rule gốc trong file này, nên nếu để rule ghi đè trong đó, rule gốc (cùng độ
   đặc thù, định nghĩa SAU) sẽ thắng theo thứ tự nguồn và làm mất tác dụng, y hệt lỗi từng gặp với
   ".re-user__meta" — xem comment ở khối @media max-width:860px phía trên.
*/
@media (max-width: 860px) {
    .re-table thead {
        display: none;
    }

    .re-table, .re-table tbody, .re-table tr, .re-table td {
        display: block;
        width: 100%;
    }

    .re-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--re-line);
        border-radius: 12px;
        padding: 4px 14px;
        background: #fff;
    }

    .re-table tr:last-child {
        margin-bottom: 0;
    }

    .re-table td {
        border-bottom: 1px dashed var(--re-line);
        padding: 10px 0;
    }

    .re-table td:last-child {
        border-bottom: none;
    }

    .re-table td:not(.re-table__title)::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--re-sub);
        text-transform: uppercase;
        letter-spacing: .02em;
        margin-bottom: 3px;
    }

    /* Dòng tiêu đề nhóm khách (colspan, trang Lịch sử tìm kiếm) không phải là 1 field nên
       không cần nhãn ::before và không cần đường kẻ đứt bên trong. */
    .re-table td[colspan] {
        border-bottom: none;
    }

    .re-table td[colspan]::before {
        content: none;
    }

    /*
       .re-table__group-head / __group-row (trang Lịch sử tìm kiếm): dòng tiêu đề khách + các
       dòng tìm kiếm của khách đó phải dính liền thành 1 khối duy nhất (viền bao quanh cả nhóm)
       thay vì mỗi <tr> là 1 thẻ rời rạc như mặc định — nếu không nhìn sẽ không biết các dòng
       tìm kiếm bên dưới thuộc về khách nào. Độ đặc thù các selector dưới đây (2 class trở lên)
       CỐ Ý cao hơn ".re-table tr" gốc ở trên để thắng bất kể thứ tự trong file, tránh lặp lại
       lỗi ghi đè do thứ tự nguồn từng gặp với ".re-user__meta".
    */
    .re-table tr.re-table__group-head {
        margin-top: 12px;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--re-line);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }

    .re-table tr.re-table__group-head:first-child {
        margin-top: 0;
    }

    .re-table tr.re-table__group-head td[colspan] {
        padding: 12px 16px;
    }

    .re-table tr.re-table__group-row {
        margin-bottom: 0;
        border-left: 1px solid var(--re-line);
        border-right: 1px solid var(--re-line);
        border-top: 1px solid var(--re-line);
        border-radius: 0;
    }

    /* Dòng tìm kiếm đầu tiên ngay sau tiêu đề: bỏ viền trên, mảng màu của tiêu đề đã đủ để
       phân tách, thêm viền vào sẽ thừa. */
    .re-table tr.re-table__group-head + tr.re-table__group-row {
        border-top: none;
    }

    .re-table tr.re-table__group-row--last {
        border-bottom: 1px solid var(--re-line);
        border-radius: 0 0 12px 12px;
    }

    /* Thẻ trên mobile (viền + góc bo) sát ngay vào viền ngoài của khung bao (.re-table-panel)
       vì khung đó padding:0 (chỉ hợp lý trên desktop, lúc bảng còn là bảng thật, tự có padding
       riêng trong từng ô) — thêm padding cho khung bao để 2 lớp viền không dính chồng lên nhau. */
    .re-table-panel {
        padding: 14px;
    }
}

/* ---------- Báo cáo thống kê ---------- */
.re-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.re-stat { background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-radius); padding: 18px 20px; }
.re-stat__value { font-size: 24px; font-weight: 800; line-height: 1.2; }
.re-stat__label { margin-top: 4px; font-size: 12.5px; color: var(--re-sub); }
.re-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.re-rank { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 2fr) auto; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid rgba(231,231,234,.7); }
.re-rank:last-child { border-bottom: none; }
.re-rank__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-rank__meter { height: 8px; border-radius: 999px; background: var(--re-bg); overflow: hidden; }
.re-rank__meter span { display: block; height: 100%; background: var(--re-pri); border-radius: 999px; }
.re-rank__value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.re-rank__extra { grid-column: 1 / -1; font-size: 11.5px; color: var(--re-sub); margin-top: -4px; }

/* ---------- Địa chỉ có liên kết lọc ---------- */
.re-addr {
    display: inline;
}

/* Card danh sách: địa chỉ dài quá thì cắt sau 2 dòng kèm "...", tránh đẩy card cao thấp
   lệch nhau. Trang chi tiết (.re-card__addr--detail, cũng mang class .re-card__addr) không
   bị giới hạn này nên phải loại trừ riêng. */
.re-card__addr:not(.re-card__addr--detail) .re-addr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.re-addr__link {
    color: inherit;
    border-bottom: 1px dotted #c4c4c8;
    transition: color 0.15s, border-color 0.15s;
}

.re-addr__link:hover {
    color: var(--re-pri);
    border-bottom-color: var(--re-pri);
}

.re-addr__sep {
    margin-right: 3px;
}

.re-card__addr--detail {
    margin-top: 10px;
    font-size: 14px;
    min-height: 0;
}

/* ---------- Modal thông báo ---------- */
body.re-modal-open {
    overflow: hidden;
}

.re-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.re-modal[hidden] {
    display: none;
}

.re-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 30, 0.45);
}

.re-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: var(--re-radius);
    box-shadow: 0 20px 60px rgba(20, 20, 30, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.re-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--re-line);
}

/* Đầu modal đăng nhập: logo + lời chào xếp dọc, canh giữa. */
.re-modal__head--login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.re-modal__logo {
    display: block;
    height: 56px;
    width: auto;
}

/* [hidden] thua các rule display của .re-iconbtn / .re-modal__logo — ép ẩn hẳn. */
.re-modal__box [hidden] {
    display: none !important;
}

.re-modal__title {
    font-weight: 700;
    font-size: 15px;
}

.re-iconbtn--ghost {
    border-color: transparent;
    background: none;
}

.re-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 10px;
    min-height: 120px;
}

/* Thông báo hiện kiểu sidebar trượt ra từ mép phải thay vì hộp thoại giữa màn hình — có thể
   có rất nhiều thông báo (tin mới + khách hàng mới) cùng lúc, cần chiều cao đầy màn hình để
   cuộn danh sách thay vì hộp nhỏ giữa màn hình dễ bị tràn. Chỉ đè riêng [data-re-notif-modal],
   không đụng .re-modal gốc vì lớp đó còn dùng chung cho modal liên hệ và đăng nhập. */
[data-re-notif-modal] {
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
}

[data-re-notif-modal] .re-modal__box {
    width: 100%;
    max-width: 380px;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    animation: re-drawer-in 0.2s ease-out;
}

@keyframes re-drawer-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

[data-re-contact-modal] .re-modal__head,
[data-re-contact-modal] .re-modal__body,
[data-re-contact-modal] .re-modal__foot {
    padding-left: 24px;
    padding-right: 24px;
}

[data-re-contact-modal] .re-modal__body {
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 0;
}

[data-re-contact-modal] .re-field + .re-field {
    margin-top: 16px;
}

/* Modal đăng nhập: nút mũi tên quay lại thay cho nút đóng (X), nằm sát tiêu đề thay vì đẩy
   nằm cùng nhóm với tiêu đề (bọc riêng trong 1 div con), còn nút X vẫn đẩy sang phải nhờ
   justify-content: space-between mặc định của .re-modal__head. Padding rộng hơn các modal
   khác vì đây là cả một form, không phải vài dòng thông báo. */
[data-re-login-modal] .re-modal__head {
    padding: 22px 26px;
}

[data-re-login-modal] .re-modal__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--re-sub);
    line-height: 1.4;
    text-align: center;
    width: 100%;
}

[data-re-login-modal] .re-modal__body {
    padding: 20px 26px 26px;
    min-height: 0;
}

[data-re-login-modal] .re-modal__foot {
    padding: 18px 26px 26px;
    border-top: none;
}

[data-re-login-modal] .re-input {
    padding: 12px 14px;
    font-size: 15px;
}

[data-re-login-modal] [data-re-login-submit] {
    padding: 13px 18px;
    font-size: 15px;
}

/* Nút quay lại nằm ngang hàng với nút Đăng nhập ở chân modal — to bằng chiều cao nút đó
   thay vì giữ cỡ 38px mặc định của .re-iconbtn, để 2 nút cân nhau. */
[data-re-login-modal] .re-modal__foot .re-iconbtn {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

[data-re-login-modal] .re-field + .re-field {
    margin-top: 16px;
}

.re-modal__loading,
.re-modal__empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--re-sub);
    font-size: 13.5px;
}

.re-modal__empty-sub {
    margin-top: 4px;
    font-size: 12.5px;
}

.re-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--re-line);
}

.re-notif-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 8px;
    border-radius: 10px;
    transition: background 0.15s;
}

.re-notif-item:hover {
    background: var(--re-bg);
}

.re-notif-item img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--re-bg);
}

/* Thông báo "khách hàng mới" không có ảnh thật như tin BĐS — thay bằng icon tròn nền hồng. */
.re-notif-item__icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--re-pri-light);
    color: var(--re-pri);
}

.re-notif-item__icon .re-icon {
    font-size: 24px;
}

.re-notif-item__body {
    min-width: 0;
}

.re-notif-item__name {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.re-notif-item__meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--re-sub);
}

/* ---------- Pagination (trang Khách hàng, Lịch sử tìm kiếm) ---------- */
.re-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.re-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--re-line);
    background: #fff;
    color: var(--re-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

a.re-pagination__btn:hover {
    border-color: var(--re-pri);
    color: var(--re-pri);
}

.re-pagination__btn.is-active {
    background: var(--re-pri);
    border-color: var(--re-pri);
    color: #fff;
    cursor: default;
}

.re-pagination__btn--disabled {
    color: var(--re-sub);
    opacity: 0.5;
    cursor: not-allowed;
}

.re-pagination__btn--dots {
    border: none;
    background: none;
    color: var(--re-sub);
    cursor: default;
}

/*
   Trên mobile, thẻ "Thông tin liên hệ" (.re-detail > aside) neo cố định dưới đáy màn hình
   (giống thanh gọi/liên hệ nhanh quen thuộc trên các trang BĐS) thay vì nằm giữa trang, phải
   cuộn qua ảnh/mô tả mới thấy. Đặt khối này Ở CUỐI FILE (sau mọi rule ".re-detail > aside"
   khác, kể cả "position: static" trong @media max-width:1024px ở trên) để chắc chắn thắng
   theo thứ tự nguồn — cùng độ đặc thù (1 selector, không thêm class) nên vị trí trong file
   mới là yếu tố quyết định.
*/
@media (max-width: 860px) {
    .re-detail > aside {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 30;
        margin: 0;
        padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -6px 20px rgba(17, 17, 22, 0.12);
    }

    .re-detail > aside .re-panel {
        border: none;
        border-radius: 16px 16px 0 0;
        padding: 10px 14px;
        margin-bottom: 0;
        max-height: 46vh;
        overflow-y: auto;
    }

    /* Bản neo cố định cần gọn hơn bản nằm trong luồng trang (desktop) — chiếm chỗ vĩnh viễn
       trên màn hình nhỏ nên giảm bớt khoảng trắng giữa các phần bên trong thẻ. */
    .re-detail > aside .re-contact-card__head {
        margin-bottom: 6px;
    }

    .re-detail > aside .re-contact-card__hint {
        margin: 2px 0 8px;
    }

    .re-detail > aside .re-contact-card__btns {
        margin-bottom: 0;
    }

    /* Chừa khoảng trống cuối trang bằng đúng chiều cao thật của thanh liên hệ cố định
       (--re-contact-bar-height, đo bằng JS — xem real-estate.js vì chiều cao đổi theo nội
       dung: SĐT dài/ngắn, có đủ 3 nút Zalo/Facebook hay không) CỘNG THÊM 24px dư ra, không
       thì phần cuối (VD: BĐS liên quan) sẽ bị nó đè lên. 280px là giá trị dự phòng cho lúc
       JS chưa kịp chạy hoặc bị chặn. */
    .re-content--detail {
        padding-bottom: calc(var(--re-contact-bar-height, 280px) + 24px);
    }
}

/*
   Dải thumbnail ảnh (.re-detail__thumbs) trên mobile: mặc định là CSS grid tự xuống hàng
   (xem rule gốc ".re-detail__thumbs" phía trên) — nhiều ảnh sẽ xuống 2-3 hàng trông lộn xộn.
   Trên mobile đổi sang 1 hàng ngang cuộn được, mỗi ô rộng vừa đúng 1/4 màn hình (luôn thấy
   tối đa 4 ảnh/hàng) — bấm prev/next ở ảnh lớn sẽ tự cuộn dải này theo (xem selectThumb()
   trong real-estate.js). Đặt Ở CUỐI FILE để chắc chắn thắng rule gốc theo thứ tự nguồn
   (cùng độ đặc thù 1 class).
*/
@media (max-width: 860px) {
    .re-detail__thumbs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .re-detail__thumbs a {
        flex: 0 0 calc((100% - 3 * 8px) / 4);
    }
}

/* ---------- Điện thoại màn hình hẹp (~360px) ----------
   Thanh đỏ chứa nút menu + logo + tên + chuông + "Đăng nhập" không đủ chỗ: nút đăng nhập rớt 2
   dòng, tiêu đề bộ lọc và "Hiện bộ lọc" cũng rớt dòng. Thu nhỏ lại, không cho xuống dòng, tên
   thương hiệu co lại (cắt "…") thay vì đẩy các nút khác. Đặt cuối file để thắng các rule trên. */
@media (max-width: 420px) {
    .re-topbar {
        gap: 8px;
    }

    .re-topbar__brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }

    .re-topbar__brand-mark {
        height: 28px;
    }

    .re-topbar__brand-name {
        font-size: 13px;
    }

    .re-topbar__brand-sub {
        font-size: 9px;
    }

    .re-topbar .re-topbar__actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .re-topbar .re-iconbtn,
    .re-topbar__brand .re-nav-toggle {
        width: 34px;
        height: 34px;
    }

    .re-topbar .re-topbar__actions .re-btn {
        padding: 8px 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .re-panel {
        padding: 16px 14px;
    }

    .re-panel__head {
        gap: 8px;
    }

    .re-panel__title {
        font-size: 12.5px;
        letter-spacing: 0;
    }

    .re-panel__head .re-btn--link {
        font-size: 12px;
        white-space: nowrap;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Nút xem/ẩn mật khẩu (password-toggle.js) ---------- */
.pw-toggle {
    position: relative;
    display: block;
    width: 100%;
}

.pw-toggle > input {
    padding-right: 44px !important;
}

.pw-toggle__btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7b7b83;
    cursor: pointer;
}

.pw-toggle__btn:hover {
    color: #2b2b30;
}

/* ---------- Combobox gõ để tìm (Phân khúc, Quận/Huyện, Xã/Phường, Đặc điểm, Nhãn) ----------
   Thay cho <select> gốc, xem searchable-select.js. <select> gốc vẫn nằm trong DOM (chỉ ẩn
   bằng .re-combo__native) để form submit đúng như cũ — không đổi gì ở PHP. */
.re-combo__native {
    display: none !important;
}

.re-field--combo .re-combo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.re-combo__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 8px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.re-combo__trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Đã chọn giá trị thật — chữ đậm, màu chính giống 1 bộ lọc đang bật, khác hẳn trạng thái
       placeholder mờ bên dưới. */
    color: var(--re-ink);
    font-weight: 600;
}

/* Chưa chọn gì — hiện tên field ("Quận/Huyện"...) làm placeholder ngay trong ô thay vì nhãn
   cố định đứng ngoài, đỡ tốn ngang (xem updateTriggerText() trong searchable-select.js). */
.re-combo__trigger-text.is-placeholder {
    color: var(--re-sub);
    font-weight: 400;
}

.re-combo__caret {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--re-sub);
    transition: transform 0.15s;
}

.re-combo__trigger[aria-expanded="true"] .re-combo__caret {
    transform: rotate(180deg);
}

.re-combo__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--re-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.re-combo__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--re-line);
}

.re-combo__search .re-icon {
    font-size: 18px;
    color: var(--re-sub);
}

.re-combo__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
    color: var(--re-ink);
    background: transparent;
}

.re-combo__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.re-combo__option {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--re-ink);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-combo__option.is-active {
    background: var(--re-bg);
}

.re-combo__option.is-selected {
    color: var(--re-pri);
    font-weight: 600;
}

.re-combo__empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--re-sub);
}

/* Màn hình hẹp: panel rộng bằng ô thay vì tràn theo cột lưới hẹp (.re-filter-grid xuống
   1 cột/hàng ở @media max-width:860px đã có), giữ nguyên hành vi — không cần chỉnh riêng. */

/* ---------- Lọc theo diện tích ---------- */
.re-area {
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--re-pri-light);
    border-radius: 14px;
}

.re-area__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--re-ink);
}

.re-area__head .re-icon {
    font-size: 20px;
}

.re-area__chips {
    display: flex;
    /* 1 hàng duy nhất, vuốt ngang khi màn hình hẹp — wrap xuống dòng làm khung lộn xộn. */
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.re-area__chips::-webkit-scrollbar {
    display: none;
}

.re-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--re-line);
    background: #fff;
    color: var(--re-ink);
    padding: 7px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.re-chip:hover {
    border-color: var(--re-pri);
}

.re-chip.is-active {
    background: var(--re-pri);
    border-color: var(--re-pri);
    color: #fff;
}

/* Mobile: gọn bộ lọc — ô chọn xếp 2 cột (thay vì 1 ô/hàng dài), nút Lọc chiếm cả hàng, khối giá và
   diện tích thu padding/khoảng cách. Đặt CUỐI file để thắng các rule gốc cùng độ ưu tiên. */
@media (max-width: 860px) {
    .re-panel {
        padding: 12px 12px;
    }

    .re-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .re-filter-grid__submit {
        grid-column: 1 / -1;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .re-combo__trigger {
        padding: 8px 8px;
        font-size: 13px;
    }

    .re-price,
    .re-area {
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .re-price__head {
        margin-bottom: 14px;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .re-price__label {
        font-size: 13px;
        min-width: 0;
    }

    .re-price__reset {
        padding: 6px 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .re-price__inputs {
        margin-top: 8px;
    }

    .re-price__field {
        padding: 5px 8px;
    }

    .re-area__head {
        font-size: 13px;
        margin-bottom: 6px;
    }
}

/* Nhóm menu "Hệ Sinh Thái Nhà Phố Center" (sidebar): <details> thu gọn/mở rộng, menu con thụt vào. */
.re-nav__group > summary {
    list-style: none;
    cursor: pointer;
}

.re-nav__group > summary::-webkit-details-marker {
    display: none;
}

.re-nav__group-label {
    flex: 1 1 auto;
}

.re-nav__group-caret {
    transition: transform 0.15s;
}

.re-nav__group[open] > summary .re-nav__group-caret {
    transform: rotate(180deg);
}

.re-nav__sub {
    padding: 2px 0 4px 18px;
}

.re-nav__item--sub {
    padding: 8px 14px;
    font-size: 14px;
}

.re-nav__item--sub .re-icon {
    font-size: 18px;
}

/* [hidden] phải thắng display của .re-form-message (khung trống trong popup). */
.re-form-message[hidden] {
    display: none;
}

.re-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Popup Nhà cho thuê: ô nhập là mốc định vị, lỗi nổi (absolute) ngay dưới ô, không đẩy bố cục. */
[data-re-rental-modal] .re-field {
    position: relative;
}

.re-rental-error {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Popup Nhà cho thuê: chừa chiều cao tối thiểu cho phần thân để thông báo lỗi nổi không đè lên nút. */
[data-re-rental-modal] .re-modal__body {
    min-height: 90px;
}