/* ============================================================================
   ThuducReal component layer  —  requires tokens.css to be loaded first.

   Every value here comes from a --tdr-* token. If a colour or size needs to
   change, change it in tokens.css, not in this file and not in a page.

   Components:
     .tdr-card   PropertyCard  - one card for house / land / rent / sale
     .tdr-dock   ContactDock   - the mobile action bar on detail pages
     .tdr-lead   LeadForm      - the enquiry form
   ========================================================================== */

/* ============================================================================
   Global type  —  approved 2026-09-03, previously deferred pending a site QA.

   The homzen theme sets body to "DM Sans" and every text input to
   "Josefin Sans". Neither carries a usable Vietnamese diacritic set, so on a
   Vietnamese site both fall back mid-word to whatever the OS supplies —
   "Phường", "Diện tích", "Sổ hồng" render in a different face to the text
   around them. Be Vietnam Pro is drawn for exactly this alphabet, which is why
   the token layer picked it.

   Stated on the elements the theme styles, not on a wrapper, because that is
   where the theme states it. This file loads after homzen/css/styles.css in
   all three layouts, so equal specificity is enough.

   To revert: delete this block. Nothing else depends on it — the .tdr-*
   components already name their own font via the tokens.
   ========================================================================== */
body {
    font-family: var(--tdr-font-body);
}

/* Headings were "Josefin Sans", which is the worst offender of the three: it carries almost no
   Vietnamese diacritic combinations, so every heading on the site was already falling back
   mid-word. The display token leads with Bricolage Grotesque and falls back to Be Vietnam Pro,
   so a glyph Bricolage lacks is served by a face drawn for it rather than by the OS. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tdr-font-display);
}

/* The theme names each input type individually; matching that keeps the
   override at the same specificity rather than escalating it. */
textarea,
select,
button,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-family: var(--tdr-font-body);
}

/* ============================================================
   PropertyCard
   Replaces: _HouseRentCard / _HouseSaleCard, the inline land card in
   Index.cshtml, and the card-box-a markup on the legacy Apartment pages.
   ============================================================ */
.tdr-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    overflow: hidden;
    transition: border-color var(--tdr-dur) var(--tdr-ease), box-shadow var(--tdr-dur) var(--tdr-ease);
}

.tdr-card:hover,
.tdr-card:focus-within {
    border-color: var(--tdr-hair);
    box-shadow: var(--tdr-shadow-2);
}

/* --- photo ------------------------------------------------- */
.tdr-card__media {
    position: relative;
    display: block;
    aspect-ratio: var(--tdr-photo-ratio);
    overflow: hidden;
    background: var(--tdr-surface-2);
}

/* aspect-ratio is well supported, but a padding fallback keeps older
   in-app browsers (common on Zalo/Facebook links) from collapsing the box. */
@supports not (aspect-ratio: 4 / 3) {
    .tdr-card__media {
        height: 0;
        padding-bottom: 75%;
    }
}

.tdr-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--tdr-dur) var(--tdr-ease);
}

.tdr-card:hover .tdr-card__media img {
    transform: scale(1.04);
}

/* --- badges over the photo --------------------------------- */
.tdr-card__badges {
    position: absolute;
    top: var(--tdr-sp-3);
    left: var(--tdr-sp-3);
    right: var(--tdr-sp-3);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tdr-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.tdr-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tdr-sp-1);
    padding: 4px 10px;
    border-radius: var(--tdr-radius-pill);
    font-family: var(--tdr-font-body);
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--tdr-surface);
    color: var(--tdr-ink);
    box-shadow: var(--tdr-shadow-1);
}

.tdr-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.tdr-badge--verified {
    background: var(--tdr-verified);
    color: #fff;
}

.tdr-badge--rent {
    background: var(--tdr-rent);
    color: #fff;
}

.tdr-badge--sale {
    background: var(--tdr-sale);
    color: #fff;
}

.tdr-badge--hot {
    background: var(--tdr-warn);
    color: #fff;
}

/* --- body -------------------------------------------------- */
.tdr-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--tdr-sp-2);
    padding: var(--tdr-sp-4);
}

/* Building name sits above the title: it is what people scan for first. */
.tdr-card__building {
    font-family: var(--tdr-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tdr-rent);
    text-decoration: none;
    display: block;
}

.tdr-card__building:hover {
    color: var(--tdr-rent-hover);
    text-decoration: underline;
}

.tdr-card__title {
    margin: 0;
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-base);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.01em;
}

.tdr-card__title a {
    color: var(--tdr-ink);
    text-decoration: none;
    /* Two lines max, so a long admin-written title cannot make one card in a
       row taller than the rest. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tdr-card__title a:hover {
    color: var(--tdr-rent);
}

.tdr-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tdr-sp-3);
    margin: 0;
    padding: var(--tdr-sp-2) 0;
    border-top: 1px solid var(--tdr-hair-soft);
    border-bottom: 1px solid var(--tdr-hair-soft);
    list-style: none;
    font-size: var(--tdr-text-sm);
    color: var(--tdr-muted);
}

.tdr-card__specs li {
    display: inline-flex;
    align-items: center;
    gap: var(--tdr-sp-1);
    white-space: nowrap;
}

.tdr-card__specs svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--tdr-rent);
}

.tdr-card__place {
    display: flex;
    align-items: flex-start;
    gap: var(--tdr-sp-1);
    font-size: var(--tdr-text-sm);
    color: var(--tdr-muted);
    min-width: 0;
}

.tdr-card__place svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tdr-card__place span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- footer: price + action -------------------------------- */
.tdr-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tdr-sp-3);
    margin-top: auto;
    padding-top: var(--tdr-sp-2);
}

.tdr-price {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-xl);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tdr-sale);
    min-width: 0;
}

.tdr-price--rent {
    color: var(--tdr-rent);
}

.tdr-price__per {
    font-family: var(--tdr-font-body);
    font-size: var(--tdr-text-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tdr-muted);
}

/* Unit price / deposit terms - the follow-up question every buyer asks. */
.tdr-price__sub {
    display: block;
    margin-top: var(--tdr-sp-1);
    font-family: var(--tdr-font-body);
    font-size: var(--tdr-text-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tdr-muted);
}

.tdr-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--tdr-sp-1);
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--tdr-radius-pill);
    border: 1px solid var(--tdr-hair);
    background: var(--tdr-surface);
    color: var(--tdr-ink);
    font-size: var(--tdr-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tdr-dur-fast) var(--tdr-ease), color var(--tdr-dur-fast) var(--tdr-ease), border-color var(--tdr-dur-fast) var(--tdr-ease);
}

.tdr-card__cta:hover,
.tdr-card__cta:focus-visible {
    background: var(--tdr-rent);
    border-color: var(--tdr-rent);
    color: #fff;
}

.tdr-card--sale .tdr-card__cta:hover,
.tdr-card--sale .tdr-card__cta:focus-visible {
    background: var(--tdr-sale);
    border-color: var(--tdr-sale);
}

.tdr-card__cta svg {
    width: 14px;
    height: 14px;
}

/* Freshness. The single cheapest signal that a listing is not a stale
   re-post, which is the main thing people distrust about property sites. */
.tdr-card__fresh {
    font-family: var(--tdr-font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--tdr-muted);
}

.tdr-card__code {
    font-family: var(--tdr-font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--tdr-muted);
}

.tdr-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tdr-sp-2);
}

/* ---- Card controls (PropertyCard) -------------------------
   Sit over the photo, top-right, clear of the badges on the left. */
.tdr-card {
    position: relative;
}

/* One stack holds every card-level control, so a second control does not become a second
   set of absolute coordinates to keep in sync with the first. */
.tdr-card__tools {
    position: absolute;
    top: var(--tdr-sp-3);
    right: var(--tdr-sp-3);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tdr-save,
.tdr-compare {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--tdr-radius-pill);
    background: color-mix(in srgb, var(--tdr-surface) 92%, transparent);
    color: var(--tdr-ink-2);
    font-family: var(--tdr-font-body);
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--tdr-shadow-1);
    transition: color var(--tdr-dur-fast) var(--tdr-ease), background var(--tdr-dur-fast) var(--tdr-ease);
}

@supports not (background: color-mix(in srgb, white 92%, transparent)) {
    .tdr-save,
    .tdr-compare {
        background: var(--tdr-surface);
    }
}

.tdr-save svg,
.tdr-compare svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tdr-save:hover {
    color: var(--tdr-sale);
}

.tdr-save.is-saved {
    color: var(--tdr-sale);
}

    .tdr-save.is-saved svg {
        fill: currentColor;
    }

/* Compare is the secondary control of the two, so it stays quieter until it is on. Green is
   reserved for "verified", so the active state borrows the rent blue rather than inventing
   a fourth accent. */
.tdr-compare {
    opacity: .93;
}

.tdr-compare:hover {
    color: var(--tdr-rent);
    opacity: 1;
}

.tdr-compare.is-comparing {
    background: var(--tdr-rent);
    color: #fff;
    opacity: 1;
}

/* ---- Compare tray ----------------------------------------
   Fixed to the bottom edge so the picks stay visible while the results keep scrolling. */
.tdr-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--tdr-z-dock) - 1);
    background: var(--tdr-surface);
    border-top: 1px solid var(--tdr-hair);
    box-shadow: var(--tdr-shadow-2);
    padding: var(--tdr-sp-3) var(--tdr-sp-4);
    font-family: var(--tdr-font-body);
}

/* A detail page's contact dock already owns the bottom edge, and the Call button there is
   worth more than this strip. Sit above it rather than over it. */
.tdr-tray--above-dock {
    bottom: 72px;
}

.tdr-tray__inner {
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-4);
    max-width: 1200px;
    margin: 0 auto;
}

.tdr-tray__slots {
    display: flex;
    gap: var(--tdr-sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.tdr-tray__slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-2);
    flex: 0 0 auto;
    max-width: 220px;
    padding: 6px 26px 6px 6px;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-md);
    background: var(--tdr-surface-2);
}

.tdr-tray__slot img,
.tdr-tray__nophoto {
    width: 40px;
    height: 32px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--tdr-radius-sm);
    background: var(--tdr-paper);
}

.tdr-tray__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tdr-tray__title {
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    color: var(--tdr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdr-tray__price {
    font-size: var(--tdr-text-xs);
    color: var(--tdr-muted);
}

.tdr-tray__drop {
    position: absolute;
    top: 2px;
    right: 4px;
    border: 0;
    background: none;
    color: var(--tdr-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.tdr-tray__drop:hover {
    color: var(--tdr-sale);
}

/* The empty slots exist to make the cap of three visible before it is hit. */
.tdr-tray__slot--empty {
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 14px 10px;
    border-style: dashed;
    background: none;
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
}

.tdr-tray__actions {
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-2);
    flex-shrink: 0;
}

.tdr-tray__go {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--tdr-radius-pill);
    background: var(--tdr-rent);
    color: #fff;
    font-size: var(--tdr-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tdr-tray__go:hover {
    background: var(--tdr-rent-hover);
    color: #fff;
}

.tdr-tray__clear {
    border: 0;
    background: none;
    color: var(--tdr-muted);
    font-size: var(--tdr-text-sm);
    cursor: pointer;
}

.tdr-tray__note {
    max-width: 1200px;
    margin: 0 auto var(--tdr-sp-2);
    color: var(--tdr-warn);
    background: var(--tdr-warn-soft);
    border-radius: var(--tdr-radius-sm);
    padding: 6px 10px;
    font-size: var(--tdr-text-xs);
}

/* Keeps the last row of results reachable above the fixed strip. */
body.tdr-has-tray {
    padding-bottom: 96px;
}

/* The floating inquiry widget is fixed at bottom:80px with z-index 9998, so it lands squarely on
   the tray's "So sánh" / "Xoá" buttons. It is a lead path and must not be hidden - lift it clear
   instead, and let it drop back the moment the tray empties.
   Below 768px the widget's own stylesheet moves the fixed positioning off the container and onto
   .inquiry-toggle-btn, so both have to be lifted or the button stays put. */
body.tdr-has-tray .thuducreal-inquiry-widget {
    bottom: 190px;
}

@media (max-width: 768px) {
    body.tdr-has-tray .thuducreal-inquiry-widget,
    body.tdr-has-tray .inquiry-toggle-btn {
        bottom: 160px;
    }
}

@media (max-width: 575.98px) {
    .tdr-tray__slot--empty {
        display: none;
    }

    .tdr-tray__inner {
        gap: var(--tdr-sp-2);
    }

    .tdr-tray__go {
        padding: 9px 12px;
    }
}

/* ---- Compare table (/so-sanh) ----------------------------
   Three columns fit a phone only by scrolling, so the wrapper - not the page - scrolls. */
.tdr-cmp-wrap {
    overflow-x: auto;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    background: var(--tdr-surface);
}

.tdr-cmp {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-family: var(--tdr-font-body);
    font-size: var(--tdr-text-sm);
}

.tdr-cmp th,
.tdr-cmp td {
    padding: var(--tdr-sp-3);
    border-bottom: 1px solid var(--tdr-hair-soft);
    text-align: left;
    vertical-align: middle;
}

/* The row labels stay put while the units scroll past them; without this the numbers in the
   third column belong to no one. */
.tdr-cmp tbody th,
.tdr-cmp__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 120px;
    min-width: 120px;
    background: var(--tdr-surface-2);
    color: var(--tdr-ink-2);
    font-weight: 600;
}

.tdr-cmp__unit {
    width: auto;
    min-width: 140px;
    vertical-align: top;
    border-bottom: 2px solid var(--tdr-hair);
}

.tdr-cmp__unit a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tdr-cmp__unit img {
    /* Block, or the purpose badge flows alongside the photo instead of under it. */
    display: block;
    width: 100%;
    max-width: 180px;
    aspect-ratio: var(--tdr-photo-ratio);
    object-fit: cover;
    border-radius: var(--tdr-radius-md);
    margin-bottom: var(--tdr-sp-2);
}

.tdr-cmp__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--tdr-radius-pill);
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    margin-bottom: 4px;
}

.tdr-cmp__unit.is-rent .tdr-cmp__badge {
    background: var(--tdr-rent-soft);
    color: var(--tdr-rent);
}

.tdr-cmp__unit.is-sale .tdr-cmp__badge {
    background: var(--tdr-sale-soft);
    color: var(--tdr-sale);
}

.tdr-cmp__name {
    display: block;
    font-family: var(--tdr-font-display);
    font-weight: 700;
    line-height: var(--tdr-leading-tight);
    color: var(--tdr-ink);
}

.tdr-cmp__drop {
    float: right;
    border: 0;
    background: none;
    color: var(--tdr-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.tdr-cmp__drop:hover {
    color: var(--tdr-sale);
}

.tdr-cmp__strong {
    font-weight: 700;
    color: var(--tdr-ink);
}

/* A gap in our data, said plainly. Never rendered as a zero. */
.tdr-cmp__na {
    color: var(--tdr-muted);
}

/* On a phone the columns are reached by scrolling the wrapper sideways. Everything is sized so
   the next column is partly visible at rest - a half-column is the cue that there is more to the
   right; a perfectly fitted first column reads as "this is all of it". */
@media (max-width: 575.98px) {
    .tdr-cmp th,
    .tdr-cmp td {
        padding: 10px 8px;
    }

    .tdr-cmp tbody th,
    .tdr-cmp__corner {
        width: 92px;
        min-width: 92px;
        font-size: var(--tdr-text-xs);
    }

    .tdr-cmp__unit {
        min-width: 132px;
    }

    .tdr-cmp__unit img {
        max-width: 132px;
    }
}

/* Header counter */
.tdr-saved-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.tdr-saved-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--tdr-radius-pill);
    background: var(--tdr-sale);
    color: #fff;
    font-family: var(--tdr-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Saved page ------------------------------------------ */
.tdr-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--tdr-sp-4);
}

.tdr-saved-empty {
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    padding: var(--tdr-sp-6) var(--tdr-sp-5);
    text-align: center;
    color: var(--tdr-ink-2);
}

/* ============================================================
   BuildingCard
   The homepage entry point. Buildings are how this market searches, so these
   lead with the stock we hold rather than with a name and a photo.
   ============================================================ */
.tdr-buildings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--tdr-sp-4);
}

.tdr-building {
    display: flex;
    flex-direction: column;
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--tdr-dur) var(--tdr-ease);
}

.tdr-building:hover {
    box-shadow: var(--tdr-shadow-2);
}

.tdr-building__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--tdr-surface-2);
}

@supports not (aspect-ratio: 3 / 2) {
    .tdr-building__media {
        height: 150px;
    }
}

.tdr-building__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--tdr-dur) var(--tdr-ease);
}

/* No photo for this building: a typographic tile in the rent blue, which reads as
   intentional where a repeated stock photo reads as a broken image. */
.tdr-building__media--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tdr-sp-4);
    background: linear-gradient(135deg, var(--tdr-rent-soft), var(--tdr-surface-2));
}

.tdr-building__media--blank span {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-lg);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-align: center;
    color: var(--tdr-rent);
    opacity: .75;
}

.tdr-building:hover .tdr-building__media img {
    transform: scale(1.04);
}

.tdr-building__body {
    display: flex;
    flex-direction: column;
    gap: var(--tdr-sp-2);
    padding: var(--tdr-sp-3) var(--tdr-sp-4) var(--tdr-sp-4);
    flex: 1;
}

.tdr-building__ward {
    font-family: var(--tdr-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tdr-muted);
}

.tdr-building__name {
    margin: 0;
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-base);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.tdr-building__name a {
    color: var(--tdr-ink);
    text-decoration: none;
}

.tdr-building__name a:hover {
    color: var(--tdr-rent);
}

.tdr-building__stock {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tdr-sp-1);
}

.tdr-building__stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: var(--tdr-text-sm);
    color: var(--tdr-ink-2);
    text-decoration: none;
    padding: 3px 0;
}

.tdr-building__stat em {
    font-style: normal;
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.tdr-building__n {
    font-family: var(--tdr-font-display);
    font-weight: 800;
    font-size: var(--tdr-text-lg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tdr-building__stat--rent .tdr-building__n {
    color: var(--tdr-rent);
}

.tdr-building__stat--sale .tdr-building__n {
    color: var(--tdr-sale);
}

.tdr-building__stat:hover {
    text-decoration: underline;
}

/* ============================================================
   ContactDock
   Replaces the two bars that used to stack on mobile detail pages:
   .mobile-contact-bar (Gọi / Zalo) and #stickyPriceBar (giá / Liên hệ ngay).
   ============================================================ */
.tdr-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tdr-z-dock);
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-2);
    padding: var(--tdr-sp-2) var(--tdr-sp-3);
    padding-bottom: calc(var(--tdr-sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--tdr-surface);
    border-top: 1px solid var(--tdr-hair);
    box-shadow: var(--tdr-shadow-2);
    font-family: var(--tdr-font-body);
}

.tdr-dock__price {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.tdr-dock__amount {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tdr-rent);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdr-dock--sale .tdr-dock__amount {
    color: var(--tdr-sale);
}

.tdr-dock__sub {
    display: block;
    font-family: var(--tdr-font-mono);
    font-size: 10.5px;
    color: var(--tdr-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdr-dock__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-pill);
    background: var(--tdr-surface);
    color: var(--tdr-ink);
    font-size: var(--tdr-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tdr-dock__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tdr-dock__btn--call {
    background: var(--tdr-sale);
    border-color: var(--tdr-sale);
    color: #fff;
}

.tdr-dock__btn--call:hover {
    background: var(--tdr-sale-hover);
    color: #fff;
}

.tdr-dock__btn--zalo {
    background: var(--tdr-zalo);
    border-color: var(--tdr-zalo);
    color: #fff;
}

.tdr-dock__btn--zalo:hover {
    background: var(--tdr-zalo-hover);
    color: #fff;
}

.tdr-dock__btn--visit:hover {
    border-color: var(--tdr-rent);
    color: var(--tdr-rent);
}

/* Narrow phones: four items in one row is tight, so the bar tightens up rather
   than pushing the last button off the edge. */
@media (max-width: 460px) {
    .tdr-dock {
        gap: 6px;
        padding-left: var(--tdr-sp-2);
        padding-right: var(--tdr-sp-2);
    }

    .tdr-dock__btn {
        padding: 9px 11px;
        font-size: var(--tdr-text-xs);
    }

    .tdr-dock__amount {
        font-size: var(--tdr-text-base);
    }
}

/* Below this the price and three actions genuinely do not fit. The two actions
   people actually use keep their labels; the viewing request stays reachable
   from the form itself, which the page already shows. */
@media (max-width: 359px) {
    .tdr-dock__btn--visit {
        display: none;
    }
}

/* Desktop keeps the dock but as a compact right-aligned bar, so the phone
   number and the viewing request stay reachable without scrolling back up. */
@media (min-width: 992px) {
    .tdr-dock {
        left: auto;
        right: var(--tdr-sp-5);
        bottom: var(--tdr-sp-5);
        border: 1px solid var(--tdr-hair);
        border-radius: var(--tdr-radius-lg);
        max-width: 520px;
    }
}

/* The global "Gọi / Zalo" bar (_ContactWidgetPartial) renders on every page from the
   layout. Where a dock is present it would sit on top of it, so the dock wins - it
   carries the same two actions plus the price and the unit code. */
body.tdr-has-dock .mobile-contact-bar {
    display: none !important;
}

/* Same for the ProjectBook pages' own bar. Those pages now render the dock instead, but the
   rule stays: two fixed bars stacked on a phone is the exact bug the dock was built to end,
   and it must not come back through a page that still carries this markup. */
body.tdr-has-dock .sticky-mobile-bar {
    display: none !important;
}

/* Keep the last of the page clear of the dock. */
body.tdr-has-dock {
    padding-bottom: 76px;
}

@media (min-width: 992px) {
    body.tdr-has-dock {
        padding-bottom: 0;
    }
}

/* Admin quick-access icon - shown only to an authenticated user (see the IsAuthenticated
   check at each call site). Icon-only everywhere: it is a convenience for the site owner,
   never the point of the bar it sits in, so it must not compete for space with Gọi/Zalo. */
.tdr-dock__btn--admin {
    flex-shrink: 0;
    padding: 10px;
    color: var(--tdr-muted);
}

.tdr-dock__btn--admin:hover {
    border-color: var(--tdr-ink);
    color: var(--tdr-ink);
}

/* .mobile-contact-bar's own rule (site.css) gives every child `flex: 1 1 0`, splitting the
   bar evenly between Gọi and Zalo. The admin link opts out of that split with a fixed width,
   so it rides alongside as a small icon rather than taking a full third of the bar. */
.mobile-contact-bar .admin-btn {
    flex: 0 0 44px !important;
    margin: 0 0 0 4px !important;
    background: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
}

.mobile-contact-bar .admin-btn svg {
    margin-right: 0 !important;
}

/* The project-layout header icon (_LayoutProject / _LayoutProjectContentBlock), next to the
   mobile nav toggler. Those layouts have no dock and no _ContactWidgetPartial, so this is the
   only quick-access point on them. */
.tdr-header-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: var(--tdr-sp-2);
    border-radius: 50%;
    color: var(--tdr-muted);
    flex-shrink: 0;
}

.tdr-header-admin-link:hover {
    background: var(--tdr-hair);
    color: var(--tdr-ink);
}

.tdr-header-admin-link svg {
    width: 20px;
    height: 20px;
}

/* The floating "Tư vấn" button belongs to thuducreal-inquiry-widget.js, which injects its own
   CSS at runtime and parks itself in the bottom-right corner - the same corner as the dock. It
   sat on top of the dock's right-hand button, so a visitor reaching for Zalo could hit "Tư vấn"
   instead, and its z-index (9998) is far above the dock's, so the dock could not win by
   stacking. Both affordances are wanted, they just cannot share the corner: the widget is lifted
   clear of the bar. Written here rather than in that file because this layer is where the dock's
   geometry is already defined, and "body.tdr-has-dock ..." outranks the widget's own single-class
   rule whatever order the two sheets load in. */
body.tdr-has-dock .thuducreal-inquiry-widget {
    bottom: calc(76px + 14px);
}

/* Below 768px the widget pins its *button* separately from its container (position: fixed;
   bottom: 50px on .inquiry-toggle-btn), so moving the container alone left the button exactly
   where it was - on top of the bar. Both have to be lifted. */
@media (max-width: 991.98px) {
    body.tdr-has-dock .inquiry-toggle-btn {
        bottom: calc(76px + 14px);
    }
}

@media (min-width: 992px) {
    /* Desktop dock is a floating card 24px off the bottom, ~66px tall. */
    body.tdr-has-dock .thuducreal-inquiry-widget {
        bottom: calc(24px + 66px + 14px);
    }
}

/* ============================================================
   LeadForm
   ============================================================ */
.tdr-lead {
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    padding: var(--tdr-sp-5);
    font-family: var(--tdr-font-body);
}

.tdr-lead__title {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tdr-ink);
    margin: 0 0 var(--tdr-sp-1);
}

.tdr-lead__intro {
    font-size: var(--tdr-text-sm);
    color: var(--tdr-muted);
    margin: 0 0 var(--tdr-sp-4);
}

.tdr-lead__agent {
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-3);
    padding-bottom: var(--tdr-sp-4);
    margin-bottom: var(--tdr-sp-4);
    border-bottom: 1px solid var(--tdr-hair-soft);
}

.tdr-lead__agent img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tdr-lead__agent-name {
    font-weight: 700;
    color: var(--tdr-ink);
    font-size: var(--tdr-text-sm);
}

/* Expertise in this specific building beats a generic slogan. */
.tdr-lead__agent-role {
    font-size: var(--tdr-text-xs);
    color: var(--tdr-muted);
}

.tdr-lead__agent a {
    color: var(--tdr-rent);
    font-weight: 600;
    text-decoration: none;
}

.tdr-lead__field {
    display: flex;
    flex-direction: column;
    gap: var(--tdr-sp-1);
    margin-bottom: var(--tdr-sp-3);
}

.tdr-lead__field label {
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    color: var(--tdr-ink-2);
}

.tdr-lead__field input,
.tdr-lead__field select,
.tdr-lead__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-sm);
    background: var(--tdr-surface);
    color: var(--tdr-ink);
    font-family: inherit;
    font-size: var(--tdr-text-sm);
    line-height: 1.5;
}

.tdr-lead__field input:focus,
.tdr-lead__field select:focus,
.tdr-lead__field textarea:focus {
    outline: 2px solid var(--tdr-rent);
    outline-offset: 1px;
    border-color: var(--tdr-rent);
}

.tdr-lead__field textarea {
    resize: vertical;
    min-height: 84px;
}

.tdr-lead__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tdr-sp-3);
}

@media (max-width: 480px) {
    .tdr-lead__row {
        grid-template-columns: 1fr;
    }
}

.tdr-lead__submit {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--tdr-radius-pill);
    background: var(--tdr-sale);
    color: #fff;
    font-family: inherit;
    font-size: var(--tdr-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--tdr-dur-fast) var(--tdr-ease);
}

.tdr-lead__submit:hover:not(:disabled) {
    background: var(--tdr-sale-hover);
}

.tdr-lead__submit:disabled {
    opacity: .65;
    cursor: default;
}

.tdr-lead__alt {
    display: flex;
    gap: var(--tdr-sp-2);
    margin-top: var(--tdr-sp-3);
}

.tdr-lead__alt a {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-pill);
    font-size: var(--tdr-text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--tdr-ink);
}

.tdr-lead__alt a:hover {
    border-color: var(--tdr-rent);
    color: var(--tdr-rent);
}

.tdr-lead__note {
    margin-top: var(--tdr-sp-3);
    font-size: var(--tdr-text-xs);
    color: var(--tdr-muted);
    text-align: center;
}

/* ============================================================
   Building tab strip (Tổng quan / Cho thuê / Bán)
   Real links, one per canonical URL - see BuildingTabsViewModel.
   ============================================================ */
.tdr-btabs {
    background: var(--tdr-surface);
    border-bottom: 1px solid var(--tdr-hair);
    font-family: var(--tdr-font-body);
}

.tdr-btabs__list {
    display: flex;
    gap: var(--tdr-sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tdr-btabs__list::-webkit-scrollbar {
    display: none;
}

.tdr-btabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 14px var(--tdr-sp-4);
    border-bottom: 3px solid transparent;
    color: var(--tdr-ink-2);
    font-size: var(--tdr-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--tdr-dur-fast) var(--tdr-ease),
                border-color var(--tdr-dur-fast) var(--tdr-ease);
}

.tdr-btabs__tab:hover {
    color: var(--tdr-ink);
}

.tdr-btabs__tab.is-active {
    color: var(--tdr-ink);
    border-bottom-color: var(--tdr-ink);
}

/* Purpose colour only on the active tab, so the strip does not read as a colour chart. */
.tdr-btabs__tab--rent.is-active {
    color: var(--tdr-rent);
    border-bottom-color: var(--tdr-rent);
}

.tdr-btabs__tab--sale.is-active {
    color: var(--tdr-sale);
    border-bottom-color: var(--tdr-sale);
}

.tdr-btabs__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--tdr-radius-pill);
    background: var(--tdr-paper);
    color: var(--tdr-ink-2);
    font-family: var(--tdr-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tdr-btabs__tab--rent.is-active .tdr-btabs__count {
    background: var(--tdr-rent-soft);
    color: var(--tdr-rent);
}

.tdr-btabs__tab--sale.is-active .tdr-btabs__count {
    background: var(--tdr-sale-soft);
    color: var(--tdr-sale);
}

.tdr-btabs__none {
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
    font-weight: 400;
}

/* ============================================================
   Building asking-price spread ("Giá đang chào tại …")
   ============================================================ */
.tdr-prices {
    padding: var(--tdr-sp-6) 0;
    font-family: var(--tdr-font-body);
}

.tdr-prices__title {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-xl);
    font-weight: 700;
    line-height: var(--tdr-leading-tight);
    color: var(--tdr-ink);
    margin: 0 0 var(--tdr-sp-2);
}

.tdr-prices__sub {
    max-width: 68ch;
    margin: 0 0 var(--tdr-sp-5);
    color: var(--tdr-ink-2);
    font-size: var(--tdr-text-sm);
    line-height: var(--tdr-leading-body);
}

.tdr-prices__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--tdr-sp-4);
}

.tdr-prices__card {
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-top: 3px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    padding: var(--tdr-sp-5);
    box-shadow: var(--tdr-shadow-1);
}

.tdr-prices__card.is-rent {
    border-top-color: var(--tdr-rent);
}

.tdr-prices__card.is-sale {
    border-top-color: var(--tdr-sale);
}

.tdr-prices__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tdr-sp-2);
    margin-bottom: var(--tdr-sp-3);
}

.tdr-prices__label {
    font-weight: 700;
    font-size: var(--tdr-text-sm);
}

.is-rent .tdr-prices__label {
    color: var(--tdr-rent);
}

.is-sale .tdr-prices__label {
    color: var(--tdr-sale);
}

.tdr-prices__n {
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
}

.tdr-prices__range {
    margin: 0 0 var(--tdr-sp-2);
    color: var(--tdr-ink);
}

.tdr-prices__big {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-xl);
    font-weight: 700;
}

.tdr-prices__small {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-lg);
    font-weight: 700;
}

.tdr-prices__dash {
    margin: 0 4px;
    color: var(--tdr-muted);
}

.tdr-prices__per {
    color: var(--tdr-muted);
    font-size: var(--tdr-text-sm);
    font-weight: 400;
}

.tdr-prices__median {
    margin: 0 0 var(--tdr-sp-1);
    color: var(--tdr-ink-2);
    font-size: var(--tdr-text-sm);
}

.tdr-prices__sqm {
    margin: 0;
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
}

/* Transacted figures. Visually separated from the asking prices above on purpose - a reader
   must never take one for the other. */
.tdr-prices__closed {
    margin-top: var(--tdr-sp-5);
    padding-top: var(--tdr-sp-5);
    border-top: 1px dashed var(--tdr-hair);
}

.tdr-prices__closed-title {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-base);
    font-weight: 700;
    color: var(--tdr-ink);
    margin: 0 0 var(--tdr-sp-3);
}

.tdr-prices__closed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--tdr-sp-4);
}

.tdr-prices__closed-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--tdr-sp-3);
    border-left: 3px solid var(--tdr-verified);
}

.tdr-prices__closed-label {
    color: var(--tdr-verified);
    font-size: var(--tdr-text-xs);
    font-weight: 700;
}

.tdr-prices__closed-value {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-lg);
    font-weight: 700;
    color: var(--tdr-ink);
}

.tdr-prices__closed-note {
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
    line-height: var(--tdr-leading-body);
}

/* ============================================================
   Building alert ("Báo tôi khi có căn mới")
   Sits below a building's stock lists - the answer for someone who has just read every
   available unit and found nothing.
   ============================================================ */
.tdr-alert {
    padding: var(--tdr-sp-6) 0;
    background: var(--tdr-rent-soft);
    font-family: var(--tdr-font-body);
    /* The dock's third button jumps here, and the theme header is sticky - without this the
       heading lands underneath it and the visitor sees the form with no explanation above it. */
    scroll-margin-top: 90px;
}

.tdr-alert__head {
    max-width: 62ch;
    margin: 0 0 var(--tdr-sp-5);
}

.tdr-alert__title {
    font-family: var(--tdr-font-display);
    font-size: var(--tdr-text-xl);
    font-weight: 700;
    line-height: var(--tdr-leading-tight);
    color: var(--tdr-ink);
    margin: 0 0 var(--tdr-sp-2);
}

.tdr-alert__sub {
    color: var(--tdr-ink-2);
    font-size: var(--tdr-text-sm);
    line-height: var(--tdr-leading-body);
    margin: 0;
}

.tdr-alert__waiting {
    display: block;
    margin-top: var(--tdr-sp-2);
    color: var(--tdr-rent);
}

.tdr-alert__form {
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-lg);
    padding: var(--tdr-sp-5);
    box-shadow: var(--tdr-shadow-1);
}

.tdr-alert__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--tdr-sp-4);
    margin-bottom: var(--tdr-sp-4);
}

.tdr-alert__field label {
    display: block;
    font-size: var(--tdr-text-xs);
    font-weight: 700;
    color: var(--tdr-muted);
    margin-bottom: 6px;
}

.tdr-alert__field input,
.tdr-alert__field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--tdr-hair);
    border-radius: var(--tdr-radius-sm);
    background: var(--tdr-surface);
    font-family: inherit;
    font-size: var(--tdr-text-base);
    color: var(--tdr-ink);
}

.tdr-alert__field input:focus,
.tdr-alert__field select:focus {
    outline: 2px solid var(--tdr-rent);
    outline-offset: 1px;
    border-color: var(--tdr-rent);
}

.tdr-alert__actions {
    display: flex;
    align-items: center;
    gap: var(--tdr-sp-4);
    flex-wrap: wrap;
}

.tdr-alert__submit {
    border: 0;
    border-radius: var(--tdr-radius-sm);
    padding: 13px 22px;
    background: var(--tdr-rent);
    color: #fff;
    font-family: inherit;
    font-size: var(--tdr-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--tdr-dur-fast) var(--tdr-ease);
}

.tdr-alert__submit:hover {
    background: var(--tdr-rent-hover);
}

.tdr-alert__note {
    margin: 0;
    flex: 1;
    min-width: 220px;
    color: var(--tdr-muted);
    font-size: var(--tdr-text-xs);
}

/* Green here is the one sanctioned use: a completed, verified action. */
.tdr-alert__ok {
    background: var(--tdr-surface);
    border: 1px solid var(--tdr-verified-soft);
    border-left: 4px solid var(--tdr-verified);
    border-radius: var(--tdr-radius-md);
    padding: var(--tdr-sp-4) var(--tdr-sp-5);
    max-width: 62ch;
}

.tdr-alert__ok-title {
    font-family: var(--tdr-font-display);
    font-weight: 700;
    color: var(--tdr-verified);
    margin: 0 0 var(--tdr-sp-1);
}

.tdr-alert__ok p {
    font-size: var(--tdr-text-sm);
    color: var(--tdr-ink-2);
    margin: 0;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.tdr-lead__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Status messages, shared with site-custom.js */
.tdr-lead__error {
    background: var(--tdr-sale-soft);
    color: var(--tdr-sale);
    border-radius: var(--tdr-radius-sm);
    padding: 10px 12px;
    margin-bottom: var(--tdr-sp-3);
    font-size: var(--tdr-text-sm);
}

.tdr-lead__ok {
    background: var(--tdr-verified-soft);
    border: 1px solid var(--tdr-verified-soft);
    border-left: 4px solid var(--tdr-verified);
    border-radius: var(--tdr-radius-md);
    padding: var(--tdr-sp-4) var(--tdr-sp-5);
}

.tdr-lead__ok-title {
    font-family: var(--tdr-font-display);
    font-weight: 700;
    color: var(--tdr-verified);
    margin-bottom: var(--tdr-sp-1);
}

.tdr-lead__ok p {
    font-size: var(--tdr-text-sm);
    color: var(--tdr-ink-2);
    margin: 0;
}

/* ============================================================================
   Legacy property card (.homeya-box)
   Folded in from css/house-card-enhancements.css, 2026-09-03.

   Still needed: _PropertyCard replaced .homeya-box on the public listing and
   building pages, but Land/*, ProjectList, PropertyWanted, the search-result
   pages and the English card partials still emit it. It lives here so the
   rules travel with the component layer instead of a separate request, and so
   every layout gets them rather than only _Layout.

   Normalises the thumbnail ratio so cards line up regardless of the uploaded
   image's native dimensions, and styles the per-card CTA.
   ========================================================================== */
.homeya-box .images-style {
    aspect-ratio: var(--tdr-photo-ratio);
    overflow: hidden;
    border-radius: var(--tdr-radius-md);
    width: 100%;
    display: block;
}

.homeya-box .images-style img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Was a hard-coded #195d8b, one of the blues tokens.css exists to replace. */
.ps-card-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--tdr-rent);
    border-radius: var(--tdr-radius-pill);
    color: var(--tdr-rent);
    font-size: var(--tdr-text-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--tdr-dur-fast) var(--tdr-ease),
                color var(--tdr-dur-fast) var(--tdr-ease);
}

.ps-card-view-btn:hover,
.ps-card-view-btn:focus-visible {
    background-color: var(--tdr-rent);
    color: #fff;
    text-decoration: none;
}

.ps-card-view-btn svg {
    flex-shrink: 0;
}

/* ============================================================================
   ProjectBook page layer
   Folded in from css/project-book-enhancements.css, 2026-09-03.

   Despite the name it is not only ProjectBook: 34 of its 69 selectors match
   across the _Layout pages (homepage, search results, ward, and the three
   building routes, which all default to _Layout via _ViewStart). It is kept
   verbatim rather than rewritten onto tokens — that is a separate job, and
   mixing it with the move would make any regression impossible to attribute.

   Moving here also exposes it to the two project layouts, where exactly one
   selector matches (.box-icon, plus .btn-favorite/.btn-compare). That delta
   was pixel-diffed before the change landed.
   ========================================================================== */
/**
 * ThuducReal ProjectBook Page Enhancements
 * Optimized UI and performance for property listing pages
 */

/* ========================================
   PROJECT BOOK HEADER ENHANCEMENTS
   ======================================== */

.project-book-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.project-book-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 123, 255, 0.03);
    z-index: 1;
}

.wrap-property-v2.style-1 {
    position: relative;
    z-index: 2;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 20px 0;
    min-height: auto;
}

.box-inner-left {
    margin-bottom: 20px;
}

.box-inner-left img {
    border-radius: 12px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

.box-inner-left:hover img {
    transform: scale(1.02);
}

.box-inner-right {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 25px;
    margin-left: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 123, 255, 0.1);
}

/* Breadcrumb Improvements */
.project-breadcrumb {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 0;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(0, 123, 255, 0.1);
}

.project-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.project-breadcrumb .breadcrumb-item {
    color: #6c757d;
    font-size: 14px;
}

.project-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: #dee2e6;
    padding: 0 8px;
}

.project-breadcrumb .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-breadcrumb .breadcrumb-item a:hover {
    color: #0056b3;
}

.project-breadcrumb .breadcrumb-item.active {
    color: #333;
    font-weight: 500;
}

/* ========================================
   PROPERTY CARDS ENHANCEMENT
   ======================================== */

.homeya-box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 123, 255, 0.08);
    border: 1px solid rgba(0, 123, 255, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 30px;
}

.homeya-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.2);
}

.images-group {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    height: 250px;
    display: block;
    background: #f8f9fa;
}

.images-style {
    height: 100%;
    position: relative;
}

.images-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.homeya-box:hover .images-style img {
    transform: scale(1.05);
}

/* Enhanced property card overlay */
.top {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 3;
}

.bottom {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 3;
}

.flag-tag {
    background: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flag-tag.success {
    background: rgba(40, 167, 69, 0.9);
}

.flag-tag.style-1 {
    background: rgba(255, 193, 7, 0.9);
    color: #333;
}

.flag-tag.style-2 {
    background: rgba(108, 117, 125, 0.9);
}

/* ========================================
   PROPERTY CARD CONTENT
   ======================================== */

.content {
    padding: 25px;
}

.content .h7 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    color: #333;
}

.content .h7 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.content .h7 a:hover {
    color: #007bff;
}

.desc {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.desc i {
    color: #007bff;
}

.meta-list {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meta-list .item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 0.9rem;
}

.meta-list .item i {
    color: #007bff;
    font-size: 16px;
}

/* ========================================
   PROPERTY CARD FOOTER
   ======================================== */

.archive-bottom {
    padding: 20px 25px;
    border-top: 1px solid rgba(0, 123, 255, 0.1);
    background: #f8f9fa;
}

.avatar {
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.archive-bottom .h7 {
    color: #007bff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* ========================================
   SECTION IMPROVEMENTS
   ======================================== */

.flat-recommended-v2 {
    padding: 60px 0;
    background: #ffffff;
    position: relative;
}

.flat-recommended-v2:nth-child(even) {
    background: #f8f9fa;
}

.flat-recommended-v2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
}

.box-title-listing {
    margin-bottom: 40px;
    text-align: center;
    padding: 0 15px;
}

.box-title-listing h5 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.box-title-listing h5::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 2px;
}

/* ========================================
   INTERACTIVE ELEMENTS
   ======================================== */

.box-icon {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 123, 255, 0.2);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.box-icon:hover {
    background: #007bff;
    color: white;
    transform: scale(1.05);
    border-color: #007bff;
}

.btn-favorite,
.btn-compare {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-favorite:hover,
.btn-compare:hover {
    color: #dc3545;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    .project-book-header {
        padding: 15px 0;
        margin-bottom: 20px;
    }
    
    .wrap-property-v2.style-1 {
        flex-direction: column;
        padding: 15px 0;
        min-height: auto;
    }
    
    .box-inner-left {
        width: 100%;
        margin-bottom: 20px;
        padding: 0 15px;
    }
    
    .box-inner-left img {
        max-height: 250px;
        border-radius: 8px;
    }
    
    .box-inner-right {
        margin-left: 0;
        margin: 0 15px;
        padding: 20px;
    }
    
    .project-breadcrumb {
        margin: 0 15px 20px;
        padding: 10px 15px;
    }
    
    .project-breadcrumb .breadcrumb {
        font-size: 12px;
    }
    
    .content-property .title h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    
    .pricing-property h2 {
        font-size: 1.3rem;
    }
    
    .box-tag {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .flag-tag {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .list-info {
        margin: 15px 0;
    }
    
    .pricing-property {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start !important;
    }
    
    .pricing-property .d-flex {
        width: 100%;
    }
    
    .pricing-property ul {
        justify-content: center;
        width: 100%;
    }
    
    .box-icon {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Property Cards Mobile */
    .images-group {
        height: 200px;
    }
    
    .meta-list {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .content {
        padding: 20px;
    }
    
    .archive-bottom {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .homeya-box {
        margin-bottom: 20px;
    }
    
    .box-title-listing h5 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .flat-recommended-v2 {
        padding: 40px 0;
    }
    
    /* Fix section spacing */
    .flat-section-v30 {
        padding-bottom: 20px;
    }
    
    /* Ensure no overlap */
    section + section {
        margin-top: 0;
        clear: both;
    }
}

/* ========================================
   LOADING STATES FOR PROPERTY CARDS
   ======================================== */

.property-card-skeleton {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.property-card-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: skeleton-loading 1.5s infinite;
    z-index: 1;
}

.skeleton-image {
    height: 250px;
    background: #f0f0f0;
}

.skeleton-content {
    padding: 25px;
}

.skeleton-title {
    height: 20px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 15px;
    width: 80%;
}

.skeleton-text {
    height: 16px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 75%; }
.skeleton-text.long { width: 90%; }

.skeleton-footer {
    padding: 20px 25px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
}

.skeleton-price {
    height: 18px;
    width: 80px;
    background: #e0e0e0;
    border-radius: 4px;
}

/* ========================================
   ENHANCED ANIMATIONS
   ======================================== */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes skeleton-loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ========================================
   FIX FOR SECTION OVERLAP ISSUE
   ======================================== */

/* Override problematic CSS that causes section overlap on mobile */
@media only screen and (max-width: 991px) {
    /* Ensure mobile menu has proper z-index priority */
    .main-header {
        z-index: 99999 !important;
    }
    
    .mobile-menu {
        z-index: 99998 !important;
    }
    
    /* Fix for fixed sidebars that might interfere with mobile menu */
    .fixed-sidebar {
        position: static !important;
        top: auto !important;
    }
    
    /* Fix section overlaps */
    .flat-recommended-v2 {
        padding-top: 60px !important;
        margin-top: 0 !important;
    }
    
    .flat-service-v5 {
        padding-top: 60px !important;
        margin-top: 0 !important;
    }
    
    /* Ensure proper section spacing */
    .flat-section-v5 {
        padding: 60px 0 !important;
        margin: 0 !important;
    }
    
    /* Prevent negative margins that cause overlap */
    section[class*="flat-"] {
        margin-top: 0 !important;
    }
    
    /* Fix spacing between sections */
    .flat-recommended-v2 + .flat-recommended-v2 {
        margin-top: 0 !important;
    }
}

/* Additional mobile section fixes */
@media only screen and (max-width: 767px) {
    .flat-recommended-v2,
    .flat-service-v5,
    .flat-section-v5 {
        padding: 40px 0 !important;
        margin: 0 !important;
    }
    
    /* Fix mobile archive-bottom alignment */
    .archive-bottom {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-direction: row !important;
        padding: 15px 20px !important;
        gap: 10px !important;
    }
    
    .archive-bottom > div:first-child {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .archive-bottom > div:last-child {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    
    /* Ensure avatar and agent name don't wrap */
    .archive-bottom .avatar {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    .archive-bottom span {
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 80px !important;
    }
    
    /* Price styling for mobile */
    .archive-bottom .h7 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #007bff !important;
    }
    
    .archive-bottom .body-1 {
        font-size: 12px !important;
    }
}

/* Extra small mobile devices */
@media only screen and (max-width: 480px) {
    .archive-bottom {
        padding: 12px 15px !important;
        gap: 8px !important;
    }
    
    .archive-bottom .avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .archive-bottom span {
        font-size: 11px !important;
        max-width: 60px !important;
    }
    
    .archive-bottom .h7 {
        font-size: 13px !important;
    }
    
    .archive-bottom .body-1 {
        font-size: 11px !important;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

.homeya-box:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.images-group:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .homeya-box {
        border: 2px solid #333;
    }
    
    .flag-tag {
        border: 1px solid #333;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .homeya-box,
    .images-style img,
    .box-icon,
    .fade-in-up {
        transition: none;
        animation: none;
    }
    
    .property-card-skeleton::before {
        animation: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .homeya-box {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }
    
    .images-group {
        height: auto;
    }
    
    .flag-tag,
    .box-icon {
        background: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
}
/* ============================================================
   Shared House Card Styles � used by _HouseRentCard and _HouseSaleCard partials
   Defined here so all pages using these partials get the styles automatically
============================================================ */
.listing-price {
    color: #bf1e2e;
    font-weight: 800;
    font-size: 1.15rem;
}
.meta-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #195d8b;
}
.meta-list .item {
    display: flex;
    align-items: center;
    gap: 4px;
}